/* ═══ FESTIVAL THEME (index page only) ═══ Auto-applied by js/festival-theme.js via [data-festival] on . Subtle: only banner strip + hero glow tint + light hero particles change. No festival active → no [data-festival] attr → all rules below are inert. */ /* ── Festive banner strip ── */ .fest-banner{ display:flex;align-items:center;justify-content:center;gap:10px; position:relative; padding:8px 40px 8px 16px; font-size:12.5px;font-weight:600;letter-spacing:.2px; color:#fff;text-align:center; background:var(--fest-banner-bg,var(--navy-d)); animation:festBannerIn .5s ease both; } .fest-banner-emoji{font-size:15px;line-height:1} .fest-banner-close{ position:absolute;right:10px;top:50%;transform:translateY(-50%); width:22px;height:22px;border:none;border-radius:50%; background:rgba(255,255,255,0.18);color:#fff;font-size:13px;line-height:1; cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background .2s; } .fest-banner-close:hover{background:rgba(255,255,255,0.32)} @keyframes festBannerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} /* ── Per-festival banner palette ── */ [data-festival="diwali"] .fest-banner{--fest-banner-bg:linear-gradient(90deg,#7A3B00,#B8720C,#7A3B00)} [data-festival="holi"] .fest-banner{--fest-banner-bg:linear-gradient(90deg,#C2185B,#7B1FA2,#1976D2,#C2185B)} [data-festival="christmas"] .fest-banner{--fest-banner-bg:linear-gradient(90deg,#0D4020,#B8860C,#0D4020)} [data-festival="tricolor"] .fest-banner{--fest-banner-bg:linear-gradient(90deg,#FF9933,#FFFFFF 50%,#138808);color:#1A237E} [data-festival="tricolor"] .fest-banner-close{color:#1A237E;background:rgba(26,35,126,0.12)} /* ── Hero glow tint per festival (subtle — same blobs, different hue) ── */ [data-festival="diwali"] .hero-glow-1{background:rgba(212,150,20,0.13)} [data-festival="diwali"] .hero-glow-2{background:rgba(184,50,10,0.10)} [data-festival="holi"] .hero-glow-1{background:rgba(194,24,91,0.10)} [data-festival="holi"] .hero-glow-2{background:rgba(25,118,210,0.10)} [data-festival="christmas"] .hero-glow-1{background:rgba(13,64,32,0.12)} [data-festival="christmas"] .hero-glow-2{background:rgba(184,134,12,0.10)} [data-festival="tricolor"] .hero-glow-1{background:rgba(255,153,51,0.10)} [data-festival="tricolor"] .hero-glow-2{background:rgba(19,136,8,0.10)} /* ── Full-page particle layer (fixed over the whole viewport, scrolls with the page) ── */ .fest-particles{position:fixed;inset:0;height:100vh;overflow:hidden;pointer-events:none;z-index:500} .fest-particle{position:absolute;top:-40px;opacity:0;font-size:20px;will-change:transform,opacity;animation:festFall linear infinite} @keyframes festFall{ 0%{opacity:0;transform:translateY(0) rotate(0deg)} 6%{opacity:.75} 94%{opacity:.65} 100%{opacity:0;transform:translateY(108vh) rotate(70deg)} } [data-festival="holi"] .fest-particle{border-radius:50%;font-size:0;width:10px;height:10px;filter:blur(.3px)} @media (prefers-reduced-motion: reduce){ .fest-particle{display:none} .fest-banner{animation:none} } @media (max-width:640px){ .fest-particle{font-size:16px} [data-festival="holi"] .fest-particle{width:8px;height:8px} .fest-banner{font-size:11.5px;padding:7px 34px 7px 12px} }