/* ===================================================================== PVCA Season 4 — v2 DARK theme Deeper, more theatrical variant inspired by the print/email creative ("Karnataka's Biggest Celebration of Cinema Is Here!"). Applied by adding `theme-dark` to . Loaded AFTER styles-v2.css. Toggle via the Tweaks panel. Theme intent (vs the standard v2 theme): • Deeper maroon background instead of bright cinema red • Dramatic top spotlight + gold swirl edge lighting • Richer gold accents (more saturation, more bloom) • Italic display headlines (script-like) • Golden pedestal halo behind the trophy (more prominent) • Gold sparkle/confetti layer (subtle but warm) • Cream/ivory bottom strip on partners (matches print creative) ===================================================================== */ body.theme-dark { --v2-dark-bg-1: #2a0508; --v2-dark-bg-2: #1a0306; --v2-dark-bg-3: #100204; --v2-dark-gold-1: #f5c863; --v2-dark-gold-2: #d49a3a; --v2-dark-spot: rgba(255, 210, 100, 0.30); --v2-dark-swirl: rgba(255, 196, 79, 0.18); } /* ── Hero — deeper background, dramatic spotlight ───────────── */ body.theme-dark .hero-bg { background: /* dramatic top spotlight cone */ radial-gradient(ellipse 36% 65% at 50% -8%, var(--v2-dark-spot), transparent 55%), /* bottom floor warmth */ radial-gradient(ellipse 90% 40% at 50% 105%, rgba(180, 100, 30, 0.20), transparent 60%), /* deep red ramp */ linear-gradient(180deg, #3a060b 0%, #260507 50%, #14040a 100%); } /* gold "swirl" lighting on the side edges — pure CSS */ body.theme-dark .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: /* left swirl — broad arc */ radial-gradient(ellipse 50% 120% at -15% 75%, var(--v2-dark-swirl), transparent 50%), /* right swirl — broad arc */ radial-gradient(ellipse 50% 120% at 115% 75%, var(--v2-dark-swirl), transparent 50%); opacity: 0.9; } body.theme-dark .hero::after { /* warm bottom haze */ background: radial-gradient(ellipse 100% 30% at 50% 100%, rgba(255, 175, 70, 0.16), transparent 60%); } /* Trophy dark-theme tweaks: warm the spotlight a notch in dark mode so the trophy reads brighter against the deeper crimson backdrop. (Lift / dust / sparkle animations live in styles-v2.css and are theme-agnostic — Option 3 spotlight reveal & gold dust.) */ body.theme-dark .hero-trophy .trophy-spot { background: radial-gradient(closest-side, rgba(255, 230, 160, 0.70) 0%, rgba(255, 210, 130, 0.30) 30%, rgba(255, 210, 130, 0.10) 50%, transparent 70%); } /* ── Sparkles — denser, warmer ──────────────────────────────── */ body.theme-dark .sparkle { opacity: 0.85 !important; filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.5)); } /* ── Headlines — italic display script feel ─────────────────── */ body.theme-dark .section-title { font-family: "Baloo Tamma 2", "Noto Serif Kannada", serif; font-style: italic; font-weight: 700; color: var(--v2-dark-gold-1); text-shadow: 0 2px 24px rgba(255, 200, 100, 0.25); letter-spacing: -0.005em; } body.theme-dark .section-title .label { font-style: normal; color: var(--v2-dark-gold-2); } body.theme-dark .section-head::before { background: linear-gradient(90deg, transparent, var(--v2-dark-gold-1) 50%, transparent); width: 80px; height: 2px; } body.theme-dark .hero-tagline { font-style: italic; font-size: 16.5px; color: rgba(255, 240, 214, 0.92); } body.theme-dark .contest-band h3 { font-style: italic; color: var(--v2-dark-gold-1); } body.theme-dark .page-hero-title { font-style: italic; color: var(--v2-dark-gold-1); text-shadow: 0 2px 24px rgba(255, 200, 100, 0.20); } /* ── CTA buttons — richer golden gradient ───────────────────── */ body.theme-dark .btn-primary, body.theme-dark .nav-cta { background: linear-gradient(180deg, #ffd685 0%, #f5c863 50%, #d49a3a 100%); border-color: #f5c863; color: #2a0508; box-shadow: 0 8px 28px -8px rgba(255, 200, 100, 0.5), inset 0 1px 0 rgba(255, 230, 170, 0.6); } body.theme-dark .btn-primary:hover, body.theme-dark .nav-cta:hover { background: linear-gradient(180deg, #fbe5a3 0%, #ffd07a 50%, #e9a847 100%); border-color: #ffd07a; transform: translateY(-1px); box-shadow: 0 14px 36px -10px rgba(255, 200, 100, 0.65), inset 0 1px 0 rgba(255, 230, 170, 0.7); } /* ── Countdown — golden inner glow on numerals ──────────────── */ body.theme-dark .countdown-wrap { background: rgba(0, 0, 0, 0.32); border-color: rgba(255, 200, 100, 0.32); box-shadow: inset 0 0 32px rgba(255, 200, 100, 0.08); } body.theme-dark .countdown .unit .n { color: var(--v2-dark-gold-1); text-shadow: 0 0 16px rgba(255, 200, 100, 0.4); } body.theme-dark .countdown .unit .l { color: var(--v2-dark-gold-2); } body.theme-dark .countdown-label .when { color: rgba(255, 240, 214, 0.86); } body.theme-dark .countdown-label .l { color: var(--v2-dark-gold-1); } /* ── Nav — deeper scrolled state with gold accent ───────────── */ body.theme-dark .nav.scrolled { background: rgba(20, 4, 8, 0.86); border-bottom-color: rgba(255, 200, 100, 0.22); } body.theme-dark .nav-brand .crest-text .en { color: var(--v2-dark-gold-1); } body.theme-dark .nav-link:hover, body.theme-dark .nav-link.v2-nav-active { color: var(--v2-dark-gold-1) !important; } body.theme-dark .nav-link::after, body.theme-dark .nav-link.v2-nav-active::after { background: var(--v2-dark-gold-1); } /* ── Section general bg — deeper ramp ───────────────────────── */ body.theme-dark { background: radial-gradient(ellipse 60% 30% at 50% 0%, rgba(255, 175, 70, 0.05), transparent 70%), linear-gradient(180deg, #200407 0%, #160305 50%, #0c0204 100%); } /* ── Partners — keep cream band but warmer ──────────────────── */ body.theme-dark .partners { background: linear-gradient(180deg, #f5e8c8 0%, #ebdcb6 100%); } /* ── Cards (jury, nominee, cine, contest) — golden hairline ── Jury and category tiles: transparent so the maroon page background shows through cleanly (per design feedback). Keep the gold border so the card edges still read against the bg. Nom-card, cine-card, contest-band retain the faint cream overlay for now — those are different visual contexts. */ body.theme-dark .nom-card, body.theme-dark .cine-card, body.theme-dark .contest-band { background: linear-gradient( 180deg, rgba(255, 200, 100, 0.04) 0%, rgba(255, 200, 100, 0.015) 100%); border-color: rgba(255, 200, 100, 0.22); } body.theme-dark .jury-card, body.theme-dark .cat-tile { background: transparent !important; border-color: rgba(255, 200, 100, 0.22); } body.theme-dark .jury-card:hover, body.theme-dark .nom-card:hover, body.theme-dark .cine-card:hover, body.theme-dark .cat-tile:hover { border-color: var(--v2-dark-gold-1); box-shadow: 0 14px 36px -16px rgba(255, 200, 100, 0.3), 0 0 0 1px rgba(255, 200, 100, 0.12); } body.theme-dark .jury-card::before { background: var(--v2-dark-gold-1); } /* Avatar ring — gold */ body.theme-dark .jury-card .avatar::after { border-color: rgba(255, 200, 100, 0.4); } body.theme-dark .jury-card .role { color: var(--v2-dark-gold-1); } /* Cat-tile numeral — gold instead of muted */ body.theme-dark .cat-tile .n { color: rgba(255, 200, 100, 0.38); } body.theme-dark .cat-tile:hover .n { color: var(--v2-dark-gold-1); } /* ── Contest band — golden ticket motif ─────────────────────── */ body.theme-dark .contest-band { background: radial-gradient(circle 420px at 100% 50%, rgba(255, 200, 100, 0.14), transparent 70%), linear-gradient(135deg, rgba(54, 8, 11, 0.85), rgba(20, 4, 8, 0.95)); } body.theme-dark .contest-band h3 { color: var(--v2-dark-gold-1); } body.theme-dark .contest-band .body .eyebrow { background: rgba(255, 200, 100, 0.12); border-color: rgba(255, 200, 100, 0.28); color: var(--v2-dark-gold-1); } body.theme-dark .contest-band::before { border-color: rgba(255, 200, 100, 0.4); background: radial-gradient(circle 18px at 0% 50%, transparent 17px, rgba(255, 200, 100, 0.32) 18px, transparent 19px), radial-gradient(circle 18px at 100% 50%, transparent 17px, rgba(255, 200, 100, 0.32) 18px, transparent 19px), linear-gradient(135deg, rgba(255, 200, 100, 0.14), rgba(212, 154, 58, 0.05)); } body.theme-dark .contest-band::after { color: var(--v2-dark-gold-1); } /* ── Eyebrows + category tabs — gold ───────────────────────── */ body.theme-dark .eyebrow, body.theme-dark .section-num, body.theme-dark .nom-cat, body.theme-dark .partners-head .flourish { color: var(--v2-dark-gold-1); } body.theme-dark .cat-tab.on { background: var(--v2-dark-gold-1); color: #1a0205; } /* Active-pill contrast lock for the dark theme — see corresponding block in styles-v2.css. Uses !important and -webkit-text-fill-color so it wins against any conflicting rule at equal or lower specificity (e.g. older .cat-tab.on { color: var(--gold-bright) } that would make the main label disappear into the pill). */ body.theme-dark .cat-tabs .cat-tab.on { color: #1a0205 !important; -webkit-text-fill-color: #1a0205; } body.theme-dark .cat-tabs .cat-tab.on .en { color: #1a0205 !important; opacity: 1 !important; } /* ── Modals — match the dark theme palette ──────────────────── */ body.theme-dark .modal-backdrop { background: radial-gradient(ellipse 60% 40% at 50% 8%, rgba(255, 200, 100, 0.20), transparent 60%), rgba(12, 3, 6, 0.78); } body.theme-dark .modal { background: radial-gradient(ellipse 100% 40% at 50% 0%, rgba(255, 200, 100, 0.20), transparent 65%), linear-gradient(180deg, #6a0c10 0%, #4a070a 60%, #2d040a 100%); border-color: rgba(255, 200, 100, 0.42); /* Removed `0 0 0 1px rgba(...)` shadow — duplicated the border and stacked into a doubled stroke at the rounded corners. */ box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 220, 150, 0.22); } body.theme-dark .modal-h { background: linear-gradient(180deg, rgba(108, 14, 18, 0.6), rgba(70, 8, 12, 0.6)); border-bottom-color: rgba(255, 200, 100, 0.22); } body.theme-dark .modal-h .crumbs { color: var(--v2-dark-gold-1); } body.theme-dark .modal-h .x { border-color: rgba(255, 200, 100, 0.32); background: rgba(0, 0, 0, 0.25); } body.theme-dark .modal-h .x:hover { border-color: var(--v2-dark-gold-1); background: rgba(255, 200, 100, 0.12); } body.theme-dark .modal-foot { background: linear-gradient(180deg, rgba(70, 8, 12, 0.4), rgba(40, 4, 8, 0.85)); border-top-color: rgba(255, 200, 100, 0.22); } body.theme-dark .modal-body h3, body.theme-dark .cat-detail h3 { color: #fbe5a3; } body.theme-dark .cat-detail .nom-row .name { color: #fbe5a3; } body.theme-dark .cat-detail .nom-row .nom-pct { border-color: rgba(255, 200, 100, 0.32); background: rgba(255, 200, 100, 0.08); color: var(--v2-dark-gold-1); } body.theme-dark .cat-detail .cd-head .n { color: rgba(255, 200, 100, 0.35); } body.theme-dark .cat-detail .nom-list { border-top-color: rgba(255, 200, 100, 0.22); } body.theme-dark .cat-detail .nom-row { border-bottom-color: rgba(255, 200, 100, 0.14); } body.theme-dark .cat-detail .nom-row:hover { background: rgba(255, 200, 100, 0.06); } body.theme-dark .nom-pick.on, body.theme-dark .mcq-opt.on { border-color: var(--v2-dark-gold-1); box-shadow: 0 0 0 1px var(--v2-dark-gold-1); } /* ── Scroll progress bar — richer gold ──────────────────────── */ body.theme-dark .v2-progress::before { background: linear-gradient(90deg, var(--v2-dark-gold-2), var(--v2-dark-gold-1)); box-shadow: 0 0 14px rgba(255, 200, 100, 0.6); } /* ── Section divider — richer ──────────────────────────────── */ body.theme-dark .section + .section::before { background-image: url("data:image/svg+xml;utf8,"); opacity: 0.85; } /* ── Footer — deeper, gold-accented ─────────────────────────── */ body.theme-dark .foot { background: linear-gradient(180deg, rgba(40, 8, 10, 0.7) 0%, #0c0204 80%); } body.theme-dark .foot h6 { color: var(--v2-dark-gold-1); } /* ── Footer brand crest fallback — gold ──────────────────── */ body.theme-dark .foot-brand .crest-row .crest:not(:has(img)) { background: linear-gradient(180deg, var(--v2-dark-gold-1), var(--v2-dark-gold-2)); } /* ── Background grain — slightly more warm ──────────────────── */ body.theme-dark::before { background-image: url("data:image/svg+xml;utf8,"); opacity: 0.07; }