/* ══════════════════════════════════════════════ FESTIVAL / SEASONAL THEME OVERRIDES Applied on (or legacy theme-*). Motifs + accents — not color tokens alone. Dual selectors keep existing DB class names working. ══════════════════════════════════════════════ */ html[class*="festival-"] .festival-preview-badge, html[class*="theme-"] .festival-preview-badge { display: inline-flex; } .festival-preview-badge { display: none; position: fixed; top: max(0.75rem, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 10050; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: #0f172a; background: #fff; border: 1px solid rgba(15, 23, 42, 0.12); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); } /* Shared accent wiring */ .festival-diwali, .theme-diwali, .festival-dussehra, .theme-dussehra, .festival-navratri, .theme-navratri, .festival-india, .theme-patriot, .festival-holi, .theme-holi, .festival-eid, .theme-eid, .festival-valentines, .theme-love, .festival-stpatricks, .festival-easter, .festival-july4, .festival-oktoberfest, .festival-halloween, .theme-spooky, .festival-thanksgiving, .festival-christmas, .theme-christmas, .festival-new-year, .theme-newyear, .festival-rakhi, .theme-rakhi, .festival-ganesh, .theme-ganesh, .festival-krishna, .theme-krishna, .festival-kite, .theme-kite, .festival-lunar, .theme-lunar { --clr-accent: var(--fest-accent); --clr-accent-primary: var(--fest-primary); --clr-accent-cyan: var(--fest-cyan); --clr-accent-violet: var(--fest-primary); --clr-border-glow: color-mix(in srgb, var(--fest-accent) 35%, transparent); --gradient-accent: linear-gradient(135deg, var(--fest-primary), var(--fest-accent), var(--fest-cyan)); --pulse-accent: var(--fest-accent); --pulse-accent-hover: var(--fest-primary); --av2-accent: var(--fest-accent); } .festival-diwali, .theme-diwali { --fest-accent: #D97706; --fest-primary: #B45309; --fest-cyan: #F59E0B; } .festival-dussehra, .theme-dussehra { --fest-accent: #DC2626; --fest-primary: #991B1B; --fest-cyan: #F59E0B; } .festival-navratri, .theme-navratri { --fest-accent: #0891B2; --fest-primary: #C026D3; --fest-cyan: #D97706; } .festival-india, .theme-patriot { --fest-accent: #EA580C; --fest-primary: #C2410C; --fest-cyan: #15803D; } .festival-holi, .theme-holi { --fest-accent: #7C3AED; --fest-primary: #DB2777; --fest-cyan: #65A30D; } .festival-eid, .theme-eid { --fest-accent: #B45309; --fest-primary: #047857; --fest-cyan: #0F766E; } .festival-valentines, .theme-love { --fest-accent: #E11D48; --fest-primary: #BE123C; --fest-cyan: #FB7185; } .festival-stpatricks { --fest-accent: #059669; --fest-primary: #047857; --fest-cyan: #10B981; } .festival-easter { --fest-accent: #8B5CF6; --fest-primary: #DB2777; --fest-cyan: #10B981; } .festival-july4 { --fest-accent: #1D4ED8; --fest-primary: #B91C1C; --fest-cyan: #2563EB; } .festival-oktoberfest { --fest-accent: #0284C7; --fest-primary: #D97706; --fest-cyan: #92400E; } .festival-halloween, .theme-spooky { --fest-accent: #EA580C; --fest-primary: #7C3AED; --fest-cyan: #C2410C; } .festival-thanksgiving { --fest-accent: #D97706; --fest-primary: #92400E; --fest-cyan: #B45309; } .festival-christmas, .theme-christmas { --fest-accent: #166534; --fest-primary: #991B1B; --fest-cyan: #15803D; } .festival-new-year, .theme-newyear { --fest-accent: #B45309; --fest-primary: #1E40AF; --fest-cyan: #64748B; } .festival-rakhi, .theme-rakhi { --fest-accent: #DB2777; --fest-primary: #BE185D; --fest-cyan: #F59E0B; } .festival-ganesh, .theme-ganesh { --fest-accent: #EA580C; --fest-primary: #B45309; --fest-cyan: #DC2626; } .festival-krishna, .theme-krishna { --fest-accent: #4F46E5; --fest-primary: #312E81; --fest-cyan: #F59E0B; } .festival-kite, .theme-kite { --fest-accent: #0284C7; --fest-primary: #EA580C; --fest-cyan: #FBBF24; } .festival-lunar, .theme-lunar { --fest-accent: #DC2626; --fest-primary: #B91C1C; --fest-cyan: #F59E0B; } /* ── Shared atmosphere: ribbon + wash (not color-only) ───────────── */ html[class*="festival-"] body, html[class*="theme-"] body { position: relative; } html[class*="festival-"] body::before, html[class*="theme-"] body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 10040; pointer-events: none; background: var(--gradient-accent, linear-gradient(90deg, var(--fest-primary), var(--fest-accent), var(--fest-cyan))); box-shadow: 0 0 24px color-mix(in srgb, var(--fest-accent, #d97706) 45%, transparent); } html[class*="festival-"] body::after, html[class*="theme-"] body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.09; background: radial-gradient(ellipse 60% 40% at 12% 8%, color-mix(in srgb, var(--fest-accent) 70%, transparent), transparent 70%), radial-gradient(ellipse 50% 35% at 88% 12%, color-mix(in srgb, var(--fest-primary) 55%, transparent), transparent 72%), radial-gradient(ellipse 45% 30% at 70% 92%, color-mix(in srgb, var(--fest-cyan) 50%, transparent), transparent 70%); } html[class*="festival-"] .navbar-wrapper, html[class*="theme-"] .navbar-wrapper { position: relative; z-index: 50; } html[class*="festival-"] .navbar, html[class*="theme-"] .navbar { box-shadow: 0 0 0 1px color-mix(in srgb, var(--fest-accent) 28%, transparent), 0 10px 30px rgba(15, 23, 42, 0.08); } html[class*="festival-"] .navbar__pill, html[class*="theme-"] .navbar__pill { background: color-mix(in srgb, var(--fest-accent) 18%, transparent) !important; } html[class*="festival-"] .site-footer, html[class*="theme-"] .site-footer { border-top: 3px solid transparent; border-image: var(--gradient-accent) 1; position: relative; } html[class*="festival-"] .hero-band, html[class*="theme-"] .hero-band, html[class*="festival-"] .home-hero, html[class*="theme-"] .home-hero { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--fest-accent, transparent) 22%, transparent); position: relative; } /* Per-festival recognizable motifs */ html.festival-diwali body::after, html.theme-diwali body::after { opacity: 0.11; background: radial-gradient(circle at 18% 12%, rgba(245, 158, 11, 0.55) 0 1px, transparent 2px), radial-gradient(circle at 42% 22%, rgba(217, 119, 6, 0.45) 0 1.5px, transparent 3px), radial-gradient(circle at 72% 10%, rgba(180, 83, 9, 0.5) 0 1px, transparent 2px), radial-gradient(circle at 88% 28%, rgba(251, 191, 36, 0.4) 0 2px, transparent 3px), radial-gradient(ellipse 55% 40% at 50% 0%, rgba(245, 158, 11, 0.35), transparent 70%); background-size: 140px 140px, 180px 180px, 120px 120px, 160px 160px, 100% 100%; } html.festival-holi body::after, html.theme-holi body::after { opacity: 0.14; background: radial-gradient(circle at 20% 20%, rgba(219, 39, 119, 0.45), transparent 28%), radial-gradient(circle at 75% 15%, rgba(124, 58, 237, 0.4), transparent 30%), radial-gradient(circle at 55% 70%, rgba(101, 163, 13, 0.35), transparent 32%), radial-gradient(circle at 30% 80%, rgba(14, 165, 233, 0.3), transparent 28%); } html.festival-india body::before, html.theme-patriot body::before { height: 6px; background: linear-gradient(90deg, #FF9933 0 33%, #FFFFFF 33% 66%, #138808 66% 100%); box-shadow: none; } html.festival-christmas body::before, html.theme-christmas body::before { height: 5px; background: repeating-linear-gradient( 90deg, #166534 0 14px, #991B1B 14px 28px, #F8FAFC 28px 34px ); box-shadow: none; } html.festival-halloween body::after, html.theme-spooky body::after { opacity: 0.12; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 58, 237, 0.5), transparent 55%), radial-gradient(circle at 15% 80%, rgba(234, 88, 12, 0.35), transparent 25%); } html.festival-eid body::after, html.theme-eid body::after { opacity: 0.1; background: radial-gradient(circle at 85% 12%, rgba(4, 120, 87, 0.35) 0 8px, transparent 9px), radial-gradient(circle at 88% 10%, transparent 0 5px, rgba(180, 83, 9, 0.45) 5.5px 6.5px, transparent 7px), radial-gradient(ellipse 50% 35% at 20% 0%, rgba(15, 118, 110, 0.3), transparent 70%); } html.festival-navratri body::before, html.theme-navratri body::before { height: 5px; background: linear-gradient(90deg, #C026D3, #0891B2, #D97706, #C026D3); } html.festival-new-year body::after, html.theme-newyear body::after { opacity: 0.1; background: radial-gradient(circle at 10% 8%, rgba(251, 191, 36, 0.55) 0 1px, transparent 2px), radial-gradient(circle at 30% 18%, rgba(59, 130, 246, 0.4) 0 1.5px, transparent 3px), radial-gradient(circle at 70% 10%, rgba(244, 114, 182, 0.4) 0 1px, transparent 2px), radial-gradient(ellipse 60% 40% at 50% 0%, rgba(30, 64, 175, 0.25), transparent 70%); background-size: 110px 110px, 150px 150px, 130px 130px, 100% 100%; } html.festival-valentines body::after, html.theme-love body::after { opacity: 0.1; background: radial-gradient(ellipse 40% 30% at 20% 10%, rgba(225, 29, 72, 0.35), transparent 70%), radial-gradient(ellipse 35% 28% at 85% 15%, rgba(251, 113, 133, 0.3), transparent 70%); } html.festival-kite body::before, html.theme-kite body::before { height: 5px; background: repeating-linear-gradient(90deg, #0284C7 0 18px, #EA580C 18px 36px, #FBBF24 36px 48px); box-shadow: none; } html.festival-lunar body::after, html.theme-lunar body::after { opacity: 0.12; background: radial-gradient(circle at 82% 14%, rgba(248, 250, 252, 0.55) 0 12px, transparent 13px), radial-gradient(ellipse 55% 40% at 20% 0%, rgba(185, 28, 28, 0.35), transparent 70%); } html.festival-rakhi body::before, html.theme-rakhi body::before { height: 5px; background: repeating-linear-gradient(90deg, #BE185D 0 10px, #F59E0B 10px 16px, #DB2777 16px 26px); } html.festival-ganesh body::after, html.theme-ganesh body::after { opacity: 0.1; background: radial-gradient(ellipse 50% 35% at 50% 0%, rgba(234, 88, 12, 0.4), transparent 70%), radial-gradient(circle at 25% 20%, rgba(220, 38, 38, 0.25), transparent 22%); } html.festival-krishna body::after, html.theme-krishna body::after { opacity: 0.11; background: radial-gradient(ellipse 55% 40% at 50% 0%, rgba(49, 46, 129, 0.45), transparent 70%), radial-gradient(circle at 78% 18%, rgba(245, 158, 11, 0.35), transparent 18%); } html.festival-dussehra body::before, html.theme-dussehra body::before { height: 5px; background: linear-gradient(90deg, #991B1B, #DC2626, #F59E0B, #991B1B); } html.festival-july4 body::before { height: 6px; background: repeating-linear-gradient(90deg, #B91C1C 0 12px, #FFFFFF 12px 18px, #1D4ED8 18px 30px); box-shadow: none; } html.festival-stpatricks body::after { opacity: 0.1; background: radial-gradient(ellipse 50% 35% at 50% 0%, rgba(5, 150, 105, 0.4), transparent 70%), radial-gradient(circle at 20% 25%, rgba(16, 185, 129, 0.3), transparent 20%); } html.festival-easter body::after { opacity: 0.1; background: radial-gradient(circle at 25% 15%, rgba(139, 92, 246, 0.35), transparent 22%), radial-gradient(circle at 70% 20%, rgba(219, 39, 119, 0.3), transparent 24%), radial-gradient(circle at 50% 70%, rgba(16, 185, 129, 0.25), transparent 28%); } html.festival-oktoberfest body::before { height: 5px; background: repeating-linear-gradient(90deg, #0284C7 0 16px, #FFFFFF 16px 22px, #D97706 22px 38px); box-shadow: none; } html.festival-thanksgiving body::after { opacity: 0.1; background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(146, 64, 14, 0.4), transparent 70%); } @media (prefers-reduced-motion: reduce) { html[class*="festival-"] body::before, html[class*="theme-"] body::before, html[class*="festival-"] body::after, html[class*="theme-"] body::after { animation: none !important; transition: none !important; } }