/* === Glass theme overlay === * Activated by `[data-theme="glass"]` on . Pure additive — overrides * brand tokens + a few targeted card / button rules. The Default theme stays * untouched. * * Inspired by the Cinema Center Stage design system: dark cinematic radial * gradient backdrop, frosted-white glass cards (alpha 0.18, blur 24px), * white inverted buttons, Rubik display + Inter body fonts. */ [data-theme="glass"] { /* Surfaces — glass white over dark backdrop */ --surface-card: rgba(255, 255, 255, 0.18); --surface-card-hi: rgba(255, 255, 255, 0.22); --surface-toolbar: rgba(0, 0, 0, 0.55); --surface-overlay: rgba(8, 8, 33, 0.78); --border-card: rgba(255, 255, 255, 0.30); --border-card-hi: rgba(255, 255, 255, 0.40); /* Inverted button text */ --text-on-bright: #190E2F; /* Display + body fonts swap to Rubik / Inter */ --font-display: "Rubik", "Bungee", "Arial Black", system-ui, sans-serif; --font-body: "Inter", "Oswald", system-ui, sans-serif; } /* Dark cinematic radial gradient — replaces the per-event gradient as the * primary backdrop. The animated gradient stage is dimmed (not removed) so * the per-event color signature still bleeds through subtly. */ [data-theme="glass"] html { background: radial-gradient(120% 100% at 50% 35%, #361745 0%, #190E2F 30%, #080821 70%, #040415 100%); background-attachment: fixed; } [data-theme="glass"] #gradient-stage { opacity: 0.32; mix-blend-mode: screen; } /* Cards — frosted glass on dark backdrop */ [data-theme="glass"] .card { background: var(--surface-card); border: 1px solid var(--border-card); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 40px -16px rgba(0, 0, 0, 0.55); } /* Card header — keep the per-type accent so events stay distinguishable, * but tone down the saturated brand colors to fit the cinematic palette. */ [data-theme="glass"] .card__header { color: rgba(255, 255, 255, 0.95); } [data-theme="glass"] .card__label { color: rgba(255, 255, 255, 0.55); } /* Primary button — inverted (white on dark) per the design system */ [data-theme="glass"] .btn:not(.btn--ghost) { background: #FFFFFF; color: var(--text-on-bright); font-weight: 700; } [data-theme="glass"] .btn:not(.btn--ghost):hover { background: rgba(255, 255, 255, 0.92); } [data-theme="glass"] .btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.85); } [data-theme="glass"] .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); } /* Body background sits on html; body must stay transparent */ [data-theme="glass"] body { background: transparent; } /* Inputs / form fields — translucent on glass */ [data-theme="glass"] input, [data-theme="glass"] textarea, [data-theme="glass"] select { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--text-primary); border-radius: var(--r-input); padding: var(--sp-3) var(--sp-4); } /* Trivia / VideoPoll option buttons — glass pills */ [data-theme="glass"] .trivia__option, [data-theme="glass"] .vpoll__option { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.20); } [data-theme="glass"] .trivia__option:hover:not(:disabled), [data-theme="glass"] .vpoll__option:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.32); } [data-theme="glass"] .trivia__option-letter, [data-theme="glass"] .vpoll__option-letter { background: rgba(255, 255, 255, 0.92); color: var(--text-on-bright); box-shadow: 0 0 14px -4px rgba(255, 255, 255, 0.45); } /* Points counter — keep dark for legibility, but tinted toward cinematic */ [data-theme="glass"] #points-counter { background: rgba(8, 8, 33, 0.78) !important; border-top: 1px solid rgba(255, 255, 255, 0.10); backdrop-filter: blur(20px) saturate(140%); } /* Logo bar in feed — slight backdrop blur over the cinematic backdrop */ [data-theme="glass"] .feed__logo-bar { background: linear-gradient(to bottom, rgba(8, 8, 33, 0.85) 0%, rgba(8, 8, 33, 0.50) 70%, transparent 100%); } /* Modals — glass surfaces */ [data-theme="glass"] .modal__card { background: var(--surface-card-hi); border: 1px solid var(--border-card); backdrop-filter: blur(28px) saturate(150%); } /* Toast — frosted */ [data-theme="glass"] .toast { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(18px); } /* Reduced motion still honored everywhere via the global tokens override */