/* Global styles for Diwali.info This stylesheet defines the colour palette, typography and layout to create a warm, elegant and responsive design suitable for all devices. */ :root{ --primary-color:#0A2342; --secondary-color:#872D4C; --accent-color:#EEC643; --light-bg:#FEF7E6; --font-serif:'Merriweather',serif; --font-sans:'Lato',sans-serif; } *{box-sizing:border-box;margin:0;padding:0;} body{font-family:var(--font-sans);line-height:1.6;background-color:var(--light-bg);color:var(--primary-color);} a{text-decoration:none;color:inherit;} img{max-width:100%;display:block;} .container{max-width:1200px;margin:0 auto;padding:0 1rem;} /* Header */ .site-header{background-color:var(--primary-color);color:#fff;} .header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0;} .logo{display:flex;align-items:center;font-size:1.25rem;font-weight:bold;color:#fff;} .logo img{margin-right:0.5rem;height:48px;width:48px;} .site-nav a{margin-left:1rem;color:#fff;font-weight:500;padding:0.5rem 0;position:relative;} .site-nav a::after{content:'';display:block;width:0;height:2px;background:var(--accent-color);transition:width .3s;position:absolute;bottom:0;left:0;} .site-nav a:hover::after{width:100%;} /* Hero */ .hero{position:relative;background-size:cover;background-position:center;height:60vh;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;} .hero-overlay{background:rgba(0,0,0,0.5);padding:2rem;border-radius:8px;width:90%;max-width:800px;} .hero h1{font-family:var(--font-serif);font-size:2rem;margin-bottom:0.5rem;color:#fff;} .hero p{font-size:1rem;margin-bottom:1rem;color:#f9f9f9;} .countdown{font-size:1.25rem;font-weight:700;color:var(--accent-color);} /* Sections */ section{padding:2rem 0;} h2{font-family:var(--font-serif);font-size:1.75rem;margin-bottom:1rem;color:var(--secondary-color);text-align:center;} h3{font-family:var(--font-serif);font-size:1.25rem;margin-bottom:0.5rem;color:var(--secondary-color);} p{margin-bottom:1rem;} /* Date cards */ .dates-highlight{background-color:#fff0da;border-top:4px solid var(--accent-color);} .date-cards{display:flex;flex-direction:column;gap:1.5rem;} .date-card{background:#fff;border:1px solid #f1e4d7;border-radius:8px;padding:1.5rem;flex:1;box-shadow:0 2px 4px rgba(0,0,0,0.05);} .date-card h3{margin-bottom:0.5rem;font-size:1.25rem;} .date-card ul{list-style:disc inside;margin-left:0.5rem;margin-bottom:0.5rem;} .date-card .btn{margin-top:0.5rem;} /* Cards */ .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;} .card{background:#fff;border:1px solid #f1e4d7;border-radius:8px;padding:1.5rem;text-align:center;flex:1 1 250px;max-width:300px;transition:transform 0.3s,box-shadow 0.3s;} .card img{margin:0 auto 0.75rem auto;height:64px;width:64px;} .card:hover{transform:translateY(-4px);box-shadow:0 6px 12px rgba(0,0,0,0.1);} .btn{display:inline-block;background-color:var(--secondary-color);color:#fff;padding:0.5rem 1rem;border-radius:4px;font-weight:bold;transition:background-color 0.3s;} .btn:hover{background-color:var(--primary-color);} /* Featured */ .featured{background-color:#fef0d9;border-top:4px solid var(--secondary-color);} .featured-cards .card{max-width:330px;} /* Conclusion */ .conclusion p{font-size:1rem;text-align:center;} /* Footer */ .site-footer{background-color:var(--primary-color);color:#fff;padding:1rem 0;text-align:center;font-size:0.9rem;} /* Tables and lists on the dates page */ .date-table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:0.95rem;} .date-table th,.date-table td{border:1px solid #f1e4d7;padding:0.5rem;text-align:left;} .date-table th{background-color:var(--secondary-color);color:#fff;font-family:var(--font-serif);} .date-table tbody tr:nth-child(even){background-color:#fdf6ed;} .future-list{list-style:none;padding-left:1rem;margin-top:0.5rem;} .future-list li{margin-bottom:0.5rem;position:relative;padding-left:1.25rem;font-size:0.95rem;} .future-list li::before{content:'\2022';position:absolute;left:0;color:var(--secondary-color);} /* Rangoli gallery */ .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:1rem;} .gallery figure{background:#fff;border:1px solid #f1e4d7;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,0.05);} .gallery img{width:100%;height:auto;display:block;} .gallery figcaption{padding:0.5rem;font-size:0.85rem;color:var(--primary-color);} /* Tutorial list */ .tutorial-steps{list-style:decimal;padding-left:1.5rem;font-size:1rem;} .tutorial-steps li{margin-bottom:0.5rem;} /* Wish lists */ .wish-list{list-style:disc;padding-left:1.5rem;margin:1rem 0;font-size:1rem;color:var(--primary-color);} .wish-list li{margin-bottom:0.5rem;line-height:1.5;} /* Responsive adjustments */ @media(min-width:600px){ .hero h1{font-size:2.5rem;} .hero p{font-size:1.25rem;} .countdown{font-size:1.5rem;} .date-cards{flex-direction:row;} } @media(min-width:900px){ .hero{height:70vh;} .hero-overlay{padding:3rem;} }