/* ══════════════════════════════════════════════ 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-mark { position: fixed; left: max(0.85rem, env(safe-area-inset-left)); bottom: max(1.1rem, env(safe-area-inset-bottom)); z-index: 10020; display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.85rem 0.45rem 0.45rem; border-radius: 999px; color: #0f172a; background: color-mix(in srgb, #ffffff 88%, var(--fest-accent, #EA580C)); border: 1px solid color-mix(in srgb, var(--fest-accent, #EA580C) 42%, #0f172a); box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14), 0 0 0 1px color-mix(in srgb, var(--fest-accent, #EA580C) 18%, transparent); pointer-events: none; } .festival-mark__motif { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 999px; color: var(--fest-primary, #B45309); background: color-mix(in srgb, var(--fest-accent, #EA580C) 16%, #fff); border: 1px solid color-mix(in srgb, var(--fest-accent, #EA580C) 35%, transparent); } .festival-mark__icon { display: block; width: 1.55rem; height: 1.55rem; } .festival-mark__copy { display: flex; flex-direction: column; min-width: 0; padding-right: 0.2rem; } .festival-mark__kicker { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, #0f172a 62%, var(--fest-primary, #B45309)); } .festival-mark__name { font-size: 0.86rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: #0f172a; } body.cookie-banner-visible .festival-mark { bottom: calc(5.75rem + env(safe-area-inset-bottom)); } @media (max-width: 640px) { .festival-mark { left: max(0.65rem, env(safe-area-inset-left)); right: auto; max-width: calc(100vw - 5.5rem); } .festival-mark__name { font-size: 0.8rem; } } .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 — any festival-* / legacy theme-* class */ html[class*="festival-"], html[class*="theme-"] { --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; } .festival-onam { --fest-accent: #15803D; --fest-primary: #CA8A04; --fest-cyan: #EA580C; } .festival-pongal { --fest-accent: #CA8A04; --fest-primary: #B45309; --fest-cyan: #16A34A; } .festival-durga { --fest-accent: #BE123C; --fest-primary: #9F1239; --fest-cyan: #F59E0B; } .festival-shivaratri { --fest-accent: #4338CA; --fest-primary: #1E1B4B; --fest-cyan: #67E8F9; } .festival-ramnavami { --fest-accent: #C2410C; --fest-primary: #9A3412; --fest-cyan: #FBBF24; } .festival-hanuman { --fest-accent: #EA580C; --fest-primary: #9A3412; --fest-cyan: #DC2626; } .festival-gurunanak { --fest-accent: #0F766E; --fest-primary: #115E59; --fest-cyan: #F59E0B; } .festival-mahavir { --fest-accent: #B45309; --fest-primary: #92400E; --fest-cyan: #F8FAFC; } .festival-buddha { --fest-accent: #D97706; --fest-primary: #B45309; --fest-cyan: #FDE68A; } .festival-adha { --fest-accent: #047857; --fest-primary: #065F46; --fest-cyan: #B45309; } .festival-ramadan { --fest-accent: #0F766E; --fest-primary: #134E4A; --fest-cyan: #F59E0B; } .festival-muharram { --fest-accent: #334155; --fest-primary: #1E293B; --fest-cyan: #94A3B8; } .festival-baisakhi { --fest-accent: #CA8A04; --fest-primary: #A16207; --fest-cyan: #16A34A; } .festival-ugadi { --fest-accent: #C026D3; --fest-primary: #A21CAF; --fest-cyan: #F59E0B; } .festival-karva { --fest-accent: #BE185D; --fest-primary: #9D174D; --fest-cyan: #F59E0B; } .festival-chhath { --fest-accent: #EA580C; --fest-primary: #C2410C; --fest-cyan: #FBBF24; } .festival-lohri { --fest-accent: #EA580C; --fest-primary: #9A3412; --fest-cyan: #F59E0B; } .festival-akshaya { --fest-accent: #D97706; --fest-primary: #B45309; --fest-cyan: #FBBF24; } .festival-rathyatra { --fest-accent: #DC2626; --fest-primary: #991B1B; --fest-cyan: #F59E0B; } .festival-kali { --fest-accent: #6D28D9; --fest-primary: #4C1D95; --fest-cyan: #F59E0B; } .festival-hanukkah { --fest-accent: #1D4ED8; --fest-primary: #1E3A8A; --fest-cyan: #F59E0B; } .festival-passover { --fest-accent: #0369A1; --fest-primary: #0C4A6E; --fest-cyan: #F8FAFC; } .festival-cinco { --fest-accent: #16A34A; --fest-primary: #DC2626; --fest-cyan: #F59E0B; } .festival-carnival { --fest-accent: #7C3AED; --fest-primary: #DB2777; --fest-cyan: #F59E0B; } .festival-nowruz { --fest-accent: #16A34A; --fest-primary: #15803D; --fest-cyan: #FBBF24; } .festival-songkran { --fest-accent: #0284C7; --fest-primary: #0369A1; --fest-cyan: #67E8F9; } .festival-midautumn { --fest-accent: #D97706; --fest-primary: #B45309; --fest-cyan: #FDE68A; } .festival-obon { --fest-accent: #DC2626; --fest-primary: #7F1D1D; --fest-cyan: #F59E0B; } .festival-kwanzaa { --fest-accent: #15803D; --fest-primary: #B91C1C; --fest-cyan: #111827; } .festival-bastille { --fest-accent: #1D4ED8; --fest-primary: #B91C1C; --fest-cyan: #F8FAFC; } .festival-canada { --fest-accent: #DC2626; --fest-primary: #991B1B; --fest-cyan: #F8FAFC; } .festival-juneteenth { --fest-accent: #B45309; --fest-primary: #1E3A8A; --fest-cyan: #DC2626; } /* ── 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; } }