/* ========================================================================== HaalTheorie · Theme System ========================================================================== Themes: - studio-dark (default; donker, palette-aligned, premium-cinematic) - midnight-aurora (donker met paars-roze-oranje aurora gradient prominent) - studio-light (licht, site-aligned, vertrouwd-school) - aurora-bright (licht met warm gradient hero, instagram-aesthetic) Werkt door [data-theme="..."] op . JS switcher zet attribuut. Officieel HaalTheorie palet: #5D2B65 (paars deep), #78477E (paars medium), #619BE2 (blauw), #B4D2F0 (lichtblauw), #F3F3F3 (lichtgrijs), #FFFFFF (wit), #4CAF51 (groen) ========================================================================== */ /* ============================================================ THEME 1 · STUDIO DARK (palette-aligned dark, default) ============================================================ */ body[data-theme="studio-dark"] { --ht-purple-deep: #5D2B65; --ht-purple-bright: #78477E; --ht-purple-glow: #B47ABC; --ht-purple-soft: #2A1530; --ht-blue: #619BE2; --ht-blue-glow: #94B8E8; --ht-green: #4CAF51; --ht-green-glow: #6FCF73; --bg-0: #0A0418; --bg-1: #0F0823; --bg-2: #18102E; } body[data-theme="studio-dark"] .orb-1 { background: radial-gradient(circle at 35% 35%, #78477E 0%, transparent 60%); } body[data-theme="studio-dark"] .orb-2 { background: radial-gradient(circle at 50% 50%, #5D2B65 0%, transparent 60%); } body[data-theme="studio-dark"] .orb-3 { background: radial-gradient(circle at 50% 50%, #4CAF51 0%, transparent 65%); } body[data-theme="studio-dark"] .intro-h1 .serif { background-image: linear-gradient(180deg, #C896D1 0%, #5D2B65 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="studio-dark"] .cta-primary, body[data-theme="studio-dark"] .q-nav .next-btn.green, body[data-theme="studio-dark"] .price-cta { background: linear-gradient(180deg, #5BC662 0%, #4CAF51 100%); color: #04250F; box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(0,0,0,0.18), 0 0 0 1px rgba(76, 175, 81, 0.30), 0 1px 2px rgba(4, 37, 15, 0.40), 0 8px 16px -4px rgba(76, 175, 81, 0.42), 0 24px 48px -12px rgba(76, 175, 81, 0.32); } body[data-theme="studio-dark"] .cta-primary:hover, body[data-theme="studio-dark"] .q-nav .next-btn.green:hover, body[data-theme="studio-dark"] .price-cta:hover { background: linear-gradient(180deg, #6FCF73 0%, #5BC662 100%); } body[data-theme="studio-dark"] .dot-progress .dot.is-done { background: #78477E; box-shadow: 0 0 6px rgba(120, 71, 126, 0.6); } body[data-theme="studio-dark"] .dot-progress .dot.is-current { background: #4CAF51; box-shadow: 0 0 10px rgba(76, 175, 81, 0.85); } /* ============================================================ THEME 2 · MIDNIGHT AURORA (cinematic aurora prominent) ============================================================ */ body[data-theme="midnight-aurora"] { --ht-purple-deep: #5D2B65; --ht-purple-bright: #78477E; --ht-purple-glow: #C896D1; --ht-purple-soft: #1A0820; --ht-blue: #619BE2; --ht-blue-glow: #B4D2F0; --ht-green: #4CAF51; --ht-green-glow: #7FE08A; --bg-0: #050008; --bg-1: #0A030E; --bg-2: #14081A; --line-1: rgba(255, 255, 255, 0.06); --line-2: rgba(255, 255, 255, 0.13); --line-3: rgba(255, 255, 255, 0.22); } body[data-theme="midnight-aurora"] { background: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(93, 43, 101, 0.55) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 95% 30%, rgba(245, 91, 158, 0.30) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 50% 110%, rgba(245, 158, 11, 0.18) 0%, transparent 60%), #050008 !important; } body[data-theme="midnight-aurora"] .orb-1 { background: radial-gradient(circle at 35% 35%, #5D2B65 0%, transparent 60%); opacity: 0.55; } body[data-theme="midnight-aurora"] .orb-2 { background: radial-gradient(circle at 50% 50%, #F55B9E 0%, transparent 60%); opacity: 0.40; } body[data-theme="midnight-aurora"] .orb-3 { background: radial-gradient(circle at 50% 50%, #F59E0B 0%, transparent 65%); opacity: 0.35; } body[data-theme="midnight-aurora"] .ht-header { background: rgba(5, 0, 8, 0.65); } body[data-theme="midnight-aurora"] .sub-strip { background: rgba(5, 0, 8, 0.4); } body[data-theme="midnight-aurora"] .intro-h1 { background-image: linear-gradient(180deg, #FFFFFF 0%, #F5C7E0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="midnight-aurora"] .intro-h1 .serif { background-image: linear-gradient(180deg, #FBC8E0 0%, #F55B9E 60%, #F59E0B 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="midnight-aurora"] .intro-trust .item .num { background-image: linear-gradient(180deg, #FFFFFF, #F5C7E0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="midnight-aurora"] .intro-hero-card { background: linear-gradient(140deg, rgba(93, 43, 101, 0.32) 0%, rgba(245, 91, 158, 0.10) 100%); border-color: rgba(245, 91, 158, 0.20); } body[data-theme="midnight-aurora"] .intro-hero-card::before { background: radial-gradient(circle at 80% 20%, rgba(245, 91, 158, 0.28) 0%, transparent 50%); } body[data-theme="midnight-aurora"] .cta-primary, body[data-theme="midnight-aurora"] .q-nav .next-btn.green, body[data-theme="midnight-aurora"] .price-cta { background: linear-gradient(180deg, #5BC662 0%, #4CAF51 100%); color: #04250F; box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(0,0,0,0.18), 0 0 0 1px rgba(76, 175, 81, 0.40), 0 0 0 4px rgba(245, 158, 11, 0.08), 0 8px 16px -4px rgba(76, 175, 81, 0.48), 0 24px 48px -12px rgba(245, 91, 158, 0.25); } body[data-theme="midnight-aurora"] .cta-primary:hover, body[data-theme="midnight-aurora"] .q-nav .next-btn.green:hover, body[data-theme="midnight-aurora"] .price-cta:hover { background: linear-gradient(180deg, #6FCF73 0%, #5BC662 100%); } body[data-theme="midnight-aurora"] .dot-progress .dot.is-done { background: #C896D1; box-shadow: 0 0 6px rgba(200, 150, 209, 0.6); } body[data-theme="midnight-aurora"] .dot-progress .dot.is-current { background: #4CAF51; box-shadow: 0 0 12px rgba(76, 175, 81, 0.90); } body[data-theme="midnight-aurora"] .score-display { background-image: linear-gradient(180deg, #FFFFFF 0%, #F5C7E0 60%, #5D2B65 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="midnight-aurora"] .price-card.is-deluxe { background: linear-gradient(140deg, rgba(93, 43, 101, 0.20) 0%, rgba(245, 91, 158, 0.10) 100%); border-color: rgba(245, 91, 158, 0.30); } /* ============================================================ THEME 3 · STUDIO LIGHT (site-aligned, trustworthy) ============================================================ */ body[data-theme="studio-light"] { --ht-purple-deep: #5D2B65; --ht-purple-bright: #78477E; --ht-purple-glow: #9B6BA3; --ht-purple-soft: #F5E8F7; --ht-blue: #619BE2; --ht-blue-glow: #B4D2F0; --ht-green: #4CAF51; --ht-green-glow: #5BC662; --bg-0: #FFFFFF; --bg-1: #F3F3F3; --bg-2: #FAF7FB; --surface: rgba(0, 0, 0, 0.025); --surface-2: rgba(93, 43, 101, 0.05); --surface-3: rgba(93, 43, 101, 0.10); --line-1: rgba(0, 0, 0, 0.07); --line-2: rgba(93, 43, 101, 0.18); --line-3: rgba(93, 43, 101, 0.32); --ink: #1A0F1F; --ink-2: #3D2A45; --ink-mute: #6B5670; --ink-soft: #756278; /* WCAG 1.4.3 AA fix: was #8A7A8F (3.99:1 on white) — now ~4.65:1 */ } body[data-theme="studio-light"] { background: linear-gradient(180deg, #FFFFFF 0%, #FAF7FB 60%, #F3F3F3 100%) !important; color: #1A0F1F !important; } body[data-theme="studio-light"] .atmosphere { display: none; } body[data-theme="studio-light"] .grain { display: none; } body[data-theme="studio-light"] .grid-overlay { opacity: 0.05; background-image: linear-gradient(rgba(93, 43, 101, 1) 1px, transparent 1px), linear-gradient(90deg, rgba(93, 43, 101, 1) 1px, transparent 1px); mask-image: radial-gradient(ellipse at center, black 25%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 70%); } body[data-theme="studio-light"] .ht-header { background: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(0, 0, 0, 0.07); } body[data-theme="studio-light"] .ht-logo { color: #1A0F1F; padding: 6px 12px; border-radius: 12px; background: linear-gradient(135deg, #1A0A2E 0%, #5D2B65 100%); box-shadow: 0 4px 16px rgba(93, 43, 101, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); } body[data-theme="studio-light"] .ht-logo img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } body[data-theme="studio-light"] .ht-badge { background: rgba(76, 175, 81, 0.10); border-color: rgba(76, 175, 81, 0.25); color: #1A4022; } body[data-theme="studio-light"] .ht-badge .dot { box-shadow: 0 0 0 3px rgba(76, 175, 81, 0.18), 0 0 8px rgba(76, 175, 81, 0.5); } body[data-theme="studio-light"] .sub-strip { background: rgba(255, 255, 255, 0.75); border-bottom-color: rgba(0, 0, 0, 0.06); color: #6B5670; } body[data-theme="studio-light"] .sub-strip .crumb a { color: #6B5670; } body[data-theme="studio-light"] .sub-strip .crumb a:hover { color: #1A0F1F; } body[data-theme="studio-light"] .sub-strip .crumb .current { color: #1A0F1F; } body[data-theme="studio-light"] .intro-eyebrow { background: rgba(93, 43, 101, 0.08); border-color: rgba(93, 43, 101, 0.16); color: #5D2B65; } body[data-theme="studio-light"] .intro-eyebrow .eyebrow-dot { background: #5D2B65; box-shadow: 0 0 8px rgba(93, 43, 101, 0.6); } body[data-theme="studio-light"] .intro-h1 { background-image: linear-gradient(180deg, #1A0F1F 0%, #5D2B65 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="studio-light"] .intro-h1 .serif { background-image: linear-gradient(180deg, #78477E 0%, #5D2B65 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="studio-light"] .intro-lede { color: #3D2A45; } body[data-theme="studio-light"] .intro-lede strong { color: #1A0F1F; } body[data-theme="studio-light"] .intro-source { color: #8A7A8F; } body[data-theme="studio-light"] .intro-source a { color: #6B5670; } body[data-theme="studio-light"] .intro-trust { background: #FFFFFF; border-color: rgba(93, 43, 101, 0.14); box-shadow: 0 4px 24px -8px rgba(93, 43, 101, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04); } body[data-theme="studio-light"] .intro-trust .item { border-right-color: rgba(0, 0, 0, 0.06); } body[data-theme="studio-light"] .intro-trust a.item:hover { background: #FAF7FB; } body[data-theme="studio-light"] .intro-trust .item .num { background-image: linear-gradient(180deg, #1A0F1F 0%, #5D2B65 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="studio-light"] .intro-trust .item .num .pct { color: #6B5670; -webkit-text-fill-color: #6B5670; } body[data-theme="studio-light"] .intro-trust .item .lbl { color: #6B5670; } body[data-theme="studio-light"] .intro-trust .item .lbl sup { color: #8A7A8F; } body[data-theme="studio-light"] .intro-hero-card { background: #FFFFFF; border: 1px solid rgba(93, 43, 101, 0.16); box-shadow: 0 4px 24px -6px rgba(93, 43, 101, 0.10), 0 1px 2px rgba(0, 0, 0, 0.03); } body[data-theme="studio-light"] .intro-hero-card::before { background: radial-gradient(circle at 80% 20%, rgba(93, 43, 101, 0.06) 0%, transparent 50%); } body[data-theme="studio-light"] .intro-hero-card .h-text .h-eyebrow { color: #C2540B; text-shadow: none; } body[data-theme="studio-light"] .intro-hero-card .h-text h3 { color: #1A0F1F; } body[data-theme="studio-light"] .intro-hero-card .h-text h3 strong { background-image: linear-gradient(180deg, #C2540B 0%, #92420C 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="studio-light"] .intro-hero-card .h-text p { color: #3D2A45; } body[data-theme="studio-light"] .intro-hero-card .h-stat { background: rgba(93, 43, 101, 0.04); border-color: rgba(93, 43, 101, 0.12); } body[data-theme="studio-light"] .intro-hero-card .h-stat .k { color: #6B5670; } body[data-theme="studio-light"] .intro-hero-card .h-stat .k sup { color: #8A7A8F; } body[data-theme="studio-light"] .intro-hero-card .h-stat .v { color: #1A0F1F; } body[data-theme="studio-light"] .intro-hero-card .h-stat .v .of { color: #8A7A8F; } body[data-theme="studio-light"] .intro-hero-card .h-stat .v.green { color: #2E7D32; } body[data-theme="studio-light"] .intro-hero-card .h-stat .v.warn { color: #C2540B; } body[data-theme="studio-light"] .intro-hero-card .h-stat.loss { background: linear-gradient(140deg, rgba(220, 38, 38, 0.06) 0%, rgba(255, 255, 255, 0.6) 100%); border-color: rgba(220, 38, 38, 0.18); } body[data-theme="studio-light"] .intro-hero-card .h-stat.loss .loss-v { color: #B91C1C; } body[data-theme="studio-light"] .intro-hero-card .h-stat.loss .loss-v .of { color: rgba(185, 28, 28, 0.6); } body[data-theme="studio-light"] .cta-primary, body[data-theme="studio-light"] .q-nav .next-btn.green, body[data-theme="studio-light"] .price-cta { background: linear-gradient(180deg, #5BC662 0%, #4CAF51 100%); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(0,0,0,0.10), 0 0 0 1px rgba(76, 175, 81, 0.45), 0 1px 2px rgba(46, 125, 50, 0.20), 0 6px 14px -4px rgba(76, 175, 81, 0.45), 0 18px 36px -12px rgba(76, 175, 81, 0.35); } body[data-theme="studio-light"] .cta-primary:hover, body[data-theme="studio-light"] .q-nav .next-btn.green:hover, body[data-theme="studio-light"] .price-cta:hover { background: linear-gradient(180deg, #66D06D 0%, #56BA5C 100%); } body[data-theme="studio-light"] .cta-primary:focus-visible { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #4CAF51, 0 6px 14px -4px rgba(76, 175, 81, 0.45); } body[data-theme="studio-light"] .intro-fineprint { color: #6B5670; } body[data-theme="studio-light"] .quiz-meta .cat { background: rgba(93, 43, 101, 0.06); border-color: rgba(93, 43, 101, 0.18); color: #5D2B65; } body[data-theme="studio-light"] .quiz-meta .cat::before { background: #5D2B65; box-shadow: 0 0 8px rgba(93, 43, 101, 0.5); } body[data-theme="studio-light"] .quiz-meta .counter { color: #6B5670; } body[data-theme="studio-light"] .quiz-meta .counter .now { color: #1A0F1F; } body[data-theme="studio-light"] .quiz-meta .elapsed { background: rgba(93, 43, 101, 0.05); border-color: rgba(93, 43, 101, 0.14); color: #6B5670; } body[data-theme="studio-light"] .quiz-meta .elapsed::before { background: #5D2B65; box-shadow: 0 0 6px rgba(93, 43, 101, 0.5); } body[data-theme="studio-light"] .quiz-meta-2 { color: #6B5670; } body[data-theme="studio-light"] .quiz-meta-2 svg { color: #8A7A8F; } body[data-theme="studio-light"] .dot-progress .dot { background: rgba(93, 43, 101, 0.15); } body[data-theme="studio-light"] .dot-progress .dot.is-done { background: #78477E; box-shadow: 0 0 6px rgba(120, 71, 126, 0.4); } body[data-theme="studio-light"] .dot-progress .dot.is-current { background: #4CAF51; box-shadow: 0 0 10px rgba(76, 175, 81, 0.65); } body[data-theme="studio-light"] .quiz-question h2, body[data-theme="studio-light"] .quiz-question .q-text { color: #1A0F1F; } body[data-theme="studio-light"] .q-image-card, body[data-theme="studio-light"] .quiz-image-card { background: #FFFFFF; border: 1px solid rgba(93, 43, 101, 0.12); box-shadow: 0 4px 20px -8px rgba(93, 43, 101, 0.10); } body[data-theme="studio-light"] .q-option { background: #FFFFFF !important; border: 1.5px solid rgba(93, 43, 101, 0.14) !important; color: #1A0F1F; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px -4px rgba(93, 43, 101, 0.08); } body[data-theme="studio-light"] .q-option:hover { background: #FAF7FB !important; border-color: rgba(93, 43, 101, 0.30) !important; } body[data-theme="studio-light"] .q-option.selected, body[data-theme="studio-light"] .q-option[aria-checked="true"] { background: #F5E8F7 !important; border-color: #5D2B65 !important; box-shadow: 0 0 0 4px rgba(93, 43, 101, 0.10), 0 4px 16px -4px rgba(93, 43, 101, 0.25); } body[data-theme="studio-light"] .q-option .q-letter { color: #5D2B65; background: rgba(93, 43, 101, 0.08); border-color: rgba(93, 43, 101, 0.18); } body[data-theme="studio-light"] .q-option.selected .q-letter, body[data-theme="studio-light"] .q-option[aria-checked="true"] .q-letter { background: #5D2B65; color: #FFFFFF; border-color: #5D2B65; } body[data-theme="studio-light"] .q-nav .prev-btn { background: rgba(93, 43, 101, 0.04); border: 1px solid rgba(93, 43, 101, 0.16); color: #3D2A45; } body[data-theme="studio-light"] .q-nav .prev-btn:hover { background: rgba(93, 43, 101, 0.10); } body[data-theme="studio-light"] .quiz-sticky-bar, body[data-theme="studio-light"] .quiz-bottom-bar { background: rgba(255, 255, 255, 0.9); border-top: 1px solid rgba(93, 43, 101, 0.10); } body[data-theme="studio-light"] .answer-saved { color: #5D2B65; } body[data-theme="studio-light"] .score-display { background-image: linear-gradient(180deg, #1A0F1F 0%, #5D2B65 60%, #78477E 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="studio-light"] .verdict-pill[data-verdict="fail"] { background: rgba(220, 38, 38, 0.08); color: #B91C1C; border: 1px solid rgba(220, 38, 38, 0.20); } body[data-theme="studio-light"] .verdict-pill[data-verdict="warn"] { background: rgba(245, 158, 11, 0.10); color: #B45309; border: 1px solid rgba(245, 158, 11, 0.25); } body[data-theme="studio-light"] .verdict-pill[data-verdict="pass"] { background: rgba(76, 175, 81, 0.10); color: #2E7D32; border: 1px solid rgba(76, 175, 81, 0.30); } body[data-theme="studio-light"] .verdict-pill[data-verdict="fail"] .vp-icon { background: #DC2626; } body[data-theme="studio-light"] .verdict-pill[data-verdict="warn"] .vp-icon { background: #F59E0B; color: #1F1407; } body[data-theme="studio-light"] .verdict-pill[data-verdict="pass"] .vp-icon { background: #4CAF51; color: #FFFFFF; } body[data-theme="studio-light"] .prediction-banner { background: linear-gradient(140deg, rgba(220, 38, 38, 0.06) 0%, rgba(255, 255, 255, 0.7) 100%); border: 1px solid rgba(220, 38, 38, 0.18); } body[data-theme="studio-light"] .prediction-banner.is-pass { background: linear-gradient(140deg, rgba(76, 175, 81, 0.08) 0%, rgba(255, 255, 255, 0.7) 100%); border-color: rgba(76, 175, 81, 0.25); } body[data-theme="studio-light"] .prediction-banner.is-warn { background: linear-gradient(140deg, rgba(245, 158, 11, 0.08) 0%, rgba(255, 255, 255, 0.7) 100%); border-color: rgba(245, 158, 11, 0.22); } body[data-theme="studio-light"] .prediction-stat { background-image: linear-gradient(180deg, #1A0F1F, #B91C1C) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="studio-light"] .prediction-banner.is-pass .prediction-stat { background-image: linear-gradient(180deg, #1A0F1F, #2E7D32) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="studio-light"] .prediction-banner.is-warn .prediction-stat { background-image: linear-gradient(180deg, #1A0F1F, #B45309) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="studio-light"] .prediction-verdict.fail { background: rgba(220, 38, 38, 0.08); color: #B91C1C; } body[data-theme="studio-light"] .prediction-verdict.warn { background: rgba(245, 158, 11, 0.10); color: #B45309; } body[data-theme="studio-light"] .prediction-verdict.pass { background: rgba(76, 175, 81, 0.10); color: #2E7D32; } body[data-theme="studio-light"] .review-list .review-item { background: #FFFFFF; border: 1px solid rgba(93, 43, 101, 0.10); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); } body[data-theme="studio-light"] .review-item.is-correct { border-left: 3px solid #4CAF51; } body[data-theme="studio-light"] .review-item.is-incorrect { border-left: 3px solid #DC2626; } body[data-theme="studio-light"] .review-item.is-correct .rs-num { background: rgba(76, 175, 81, 0.12); color: #2E7D32; } body[data-theme="studio-light"] .review-item.is-incorrect .rs-num { background: rgba(220, 38, 38, 0.10); color: #B91C1C; } body[data-theme="studio-light"] .review-item.is-correct .rs-mark { background: #4CAF51; color: #FFFFFF; } body[data-theme="studio-light"] .review-item.is-incorrect .rs-mark { background: #DC2626; color: #FFFFFF; } body[data-theme="studio-light"] .review-detail dd.is-yours.is-wrong { color: #B91C1C; } body[data-theme="studio-light"] .pattern-row.ok .bar-fill { background: linear-gradient(90deg, #4CAF51, #6FCF73); box-shadow: 0 0 8px rgba(76, 175, 81, 0.3); } body[data-theme="studio-light"] .pattern-row.ok .pill { background: #4CAF51; color: #FFFFFF; } body[data-theme="studio-light"] .pattern-row.warn .pill { background: #F59E0B; color: #1F1407; } body[data-theme="studio-light"] .pattern-row.fail .pill { background: #DC2626; color: #FFFFFF; } body[data-theme="studio-light"] .price-card { background: #FFFFFF; border: 1px solid rgba(93, 43, 101, 0.14); box-shadow: 0 4px 24px -8px rgba(93, 43, 101, 0.10), 0 1px 2px rgba(0, 0, 0, 0.04); } body[data-theme="studio-light"] .price-card.is-deluxe { background: linear-gradient(140deg, #FFFFFF 0%, #FAF7FB 100%); border: 2px solid #5D2B65; box-shadow: 0 8px 32px -8px rgba(93, 43, 101, 0.20), 0 1px 2px rgba(0, 0, 0, 0.04); } body[data-theme="studio-light"] .price-amount .amount { color: #1A0F1F; } body[data-theme="studio-light"] .price-strike { color: #8A7A8F; } body[data-theme="studio-light"] .price-feature { color: #3D2A45; } body[data-theme="studio-light"] .pricing-foot { color: #6B5670; } body[data-theme="studio-light"] .sticky-cta-bar { background: rgba(255, 255, 255, 0.95); border-top: 1px solid rgba(93, 43, 101, 0.10); box-shadow: 0 -4px 20px -4px rgba(93, 43, 101, 0.10); } body[data-theme="studio-light"] .sticky-cta-bar .meta { color: #6B5670; } body[data-theme="studio-light"] .result-cta-bar { background: rgba(255, 255, 255, 0.95); border-top: 1px solid rgba(93, 43, 101, 0.10); box-shadow: 0 -4px 20px -4px rgba(93, 43, 101, 0.10); } body[data-theme="studio-light"] .result-cta-bar .copy { color: #3D2A45; } body[data-theme="studio-light"] .result-cta-bar .copy strong { color: #1A0F1F; } body[data-theme="studio-light"] .result-cta-bar .copy .bar-meta { color: #6B5670; } body[data-theme="studio-light"] .dial-num { background-image: linear-gradient(180deg, #5D2B65 0%, #2E7D32 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="studio-light"] .dial-num-label { color: #6B5670; } body[data-theme="studio-light"] .dial-suffix { color: #6B5670; } body[data-theme="studio-light"] .chance-num { background-image: linear-gradient(180deg, #5D2B65 0%, #2E7D32 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="studio-light"] .chance-num-label { color: #6B5670; } body[data-theme="studio-light"] .chance-suffix { color: #6B5670; } body[data-theme="studio-light"] .review-list h3, body[data-theme="studio-light"] .pattern-card h3, body[data-theme="studio-light"] .pricing-card h3 { color: #1A0F1F; } /* ============================================================ THEME 4 · AURORA BRIGHT (light + warm gradient hero) ============================================================ */ body[data-theme="aurora-bright"] { --ht-purple-deep: #5D2B65; --ht-purple-bright: #78477E; --ht-purple-glow: #B47ABC; --ht-purple-soft: #F5E8F7; --ht-blue: #619BE2; --ht-blue-glow: #B4D2F0; --ht-green: #4CAF51; --ht-green-glow: #5BC662; --bg-0: #FAF5F7; --bg-1: #F5EDF3; --bg-2: #FFF7F0; --surface: rgba(255, 255, 255, 0.55); --surface-2: rgba(255, 255, 255, 0.78); --surface-3: rgba(255, 255, 255, 0.92); --line-1: rgba(93, 43, 101, 0.08); --line-2: rgba(93, 43, 101, 0.18); --line-3: rgba(93, 43, 101, 0.32); --ink: #2A1730; --ink-2: #4A3055; --ink-mute: #6B5670; --ink-soft: #8A7A8F; } body[data-theme="aurora-bright"] { background: radial-gradient(ellipse 70% 50% at 0% 0%, rgba(243, 232, 255, 0.95) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 100% 5%, rgba(255, 228, 212, 0.85) 0%, transparent 55%), radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255, 247, 224, 0.85) 0%, transparent 60%), #FAF5F7 !important; color: #2A1730 !important; } body[data-theme="aurora-bright"] .atmosphere { display: none; } body[data-theme="aurora-bright"] .grain { display: none; } body[data-theme="aurora-bright"] .grid-overlay { opacity: 0.04; background-image: linear-gradient(rgba(93, 43, 101, 1) 1px, transparent 1px), linear-gradient(90deg, rgba(93, 43, 101, 1) 1px, transparent 1px); mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%); } body[data-theme="aurora-bright"] .ht-header { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(20px) saturate(180%); border-bottom-color: rgba(93, 43, 101, 0.10); } body[data-theme="aurora-bright"] .ht-logo { color: #2A1730; padding: 6px 12px; border-radius: 12px; background: linear-gradient(135deg, #1A0A2E 0%, #5D2B65 100%); box-shadow: 0 4px 16px rgba(93, 43, 101, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); } body[data-theme="aurora-bright"] .ht-logo img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } body[data-theme="aurora-bright"] .ht-badge { background: rgba(255, 255, 255, 0.7); border-color: rgba(93, 43, 101, 0.18); color: #4A3055; } body[data-theme="aurora-bright"] .ht-badge .dot { background: #4CAF51; box-shadow: 0 0 0 3px rgba(76, 175, 81, 0.18), 0 0 8px rgba(76, 175, 81, 0.5); } body[data-theme="aurora-bright"] .sub-strip { background: rgba(255, 255, 255, 0.55); border-bottom-color: rgba(93, 43, 101, 0.08); color: #6B5670; } body[data-theme="aurora-bright"] .sub-strip .crumb a { color: #6B5670; } body[data-theme="aurora-bright"] .sub-strip .crumb a:hover { color: #2A1730; } body[data-theme="aurora-bright"] .sub-strip .crumb .current { color: #2A1730; } body[data-theme="aurora-bright"] .intro-eyebrow { background: rgba(255, 255, 255, 0.7); border-color: rgba(120, 71, 126, 0.20); color: #5D2B65; backdrop-filter: blur(8px); } body[data-theme="aurora-bright"] .intro-eyebrow .eyebrow-dot { background: #C2540B; box-shadow: 0 0 8px rgba(194, 84, 11, 0.6); } body[data-theme="aurora-bright"] .intro-h1 { background-image: linear-gradient(180deg, #2A1730 0%, #5D2B65 50%, #C2540B 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="aurora-bright"] .intro-h1 .serif { background-image: linear-gradient(180deg, #78477E 0%, #C2540B 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="aurora-bright"] .intro-lede { color: #4A3055; } body[data-theme="aurora-bright"] .intro-lede strong { color: #2A1730; } body[data-theme="aurora-bright"] .intro-source { color: #8A7A8F; } body[data-theme="aurora-bright"] .intro-source a { color: #6B5670; } body[data-theme="aurora-bright"] .intro-trust { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(12px); border-color: rgba(93, 43, 101, 0.14); box-shadow: 0 4px 24px -8px rgba(93, 43, 101, 0.15), 0 1px 2px rgba(0, 0, 0, 0.04); } body[data-theme="aurora-bright"] .intro-trust .item { border-right-color: rgba(93, 43, 101, 0.08); } body[data-theme="aurora-bright"] .intro-trust a.item:hover { background: rgba(255, 255, 255, 0.95); } body[data-theme="aurora-bright"] .intro-trust .item .num { background-image: linear-gradient(180deg, #2A1730 0%, #5D2B65 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="aurora-bright"] .intro-trust .item .num .pct { color: #6B5670; -webkit-text-fill-color: #6B5670; } body[data-theme="aurora-bright"] .intro-trust .item .lbl { color: #6B5670; } body[data-theme="aurora-bright"] .intro-trust .item .lbl sup { color: #8A7A8F; } body[data-theme="aurora-bright"] .intro-hero-card { background: linear-gradient(140deg, rgba(243, 232, 255, 0.6) 0%, rgba(255, 228, 212, 0.4) 100%); border: 1px solid rgba(120, 71, 126, 0.20); backdrop-filter: blur(12px); box-shadow: 0 8px 32px -8px rgba(93, 43, 101, 0.15); } body[data-theme="aurora-bright"] .intro-hero-card::before { background: radial-gradient(circle at 80% 20%, rgba(245, 91, 158, 0.15) 0%, transparent 50%); } body[data-theme="aurora-bright"] .intro-hero-card .h-text .h-eyebrow { color: #C2540B; text-shadow: none; } body[data-theme="aurora-bright"] .intro-hero-card .h-text h3 { color: #2A1730; } body[data-theme="aurora-bright"] .intro-hero-card .h-text h3 strong { background-image: linear-gradient(180deg, #C2540B 0%, #92420C 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="aurora-bright"] .intro-hero-card .h-text p { color: #4A3055; } body[data-theme="aurora-bright"] .intro-hero-card .h-stat { background: rgba(255, 255, 255, 0.7); border-color: rgba(120, 71, 126, 0.14); } body[data-theme="aurora-bright"] .intro-hero-card .h-stat .k { color: #6B5670; } body[data-theme="aurora-bright"] .intro-hero-card .h-stat .k sup { color: #8A7A8F; } body[data-theme="aurora-bright"] .intro-hero-card .h-stat .v { color: #2A1730; } body[data-theme="aurora-bright"] .intro-hero-card .h-stat .v .of { color: #8A7A8F; } body[data-theme="aurora-bright"] .intro-hero-card .h-stat .v.green { color: #2E7D32; } body[data-theme="aurora-bright"] .intro-hero-card .h-stat .v.warn { color: #C2540B; } body[data-theme="aurora-bright"] .intro-hero-card .h-stat.loss { background: linear-gradient(140deg, rgba(220, 38, 38, 0.10) 0%, rgba(255, 255, 255, 0.5) 100%); border-color: rgba(220, 38, 38, 0.20); } body[data-theme="aurora-bright"] .intro-hero-card .h-stat.loss .loss-v { color: #B91C1C; } body[data-theme="aurora-bright"] .intro-hero-card .h-stat.loss .loss-v .of { color: rgba(185, 28, 28, 0.6); } body[data-theme="aurora-bright"] .cta-primary, body[data-theme="aurora-bright"] .q-nav .next-btn.green, body[data-theme="aurora-bright"] .price-cta { background: linear-gradient(180deg, #5BC662 0%, #4CAF51 100%); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(0,0,0,0.10), 0 0 0 1px rgba(76, 175, 81, 0.40), 0 4px 14px -2px rgba(76, 175, 81, 0.40), 0 12px 30px -8px rgba(245, 91, 158, 0.18); } body[data-theme="aurora-bright"] .cta-primary:hover, body[data-theme="aurora-bright"] .q-nav .next-btn.green:hover, body[data-theme="aurora-bright"] .price-cta:hover { background: linear-gradient(180deg, #66D06D 0%, #56BA5C 100%); transform: translateY(-1px); } body[data-theme="aurora-bright"] .cta-primary:focus-visible { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #4CAF51, 0 6px 14px -4px rgba(76, 175, 81, 0.45); } body[data-theme="aurora-bright"] .intro-fineprint { color: #6B5670; } body[data-theme="aurora-bright"] .quiz-meta .cat { background: rgba(255, 255, 255, 0.7); border-color: rgba(120, 71, 126, 0.18); color: #5D2B65; } body[data-theme="aurora-bright"] .quiz-meta .cat::before { background: #5D2B65; box-shadow: 0 0 8px rgba(93, 43, 101, 0.5); } body[data-theme="aurora-bright"] .quiz-meta .counter { color: #6B5670; } body[data-theme="aurora-bright"] .quiz-meta .counter .now { color: #2A1730; } body[data-theme="aurora-bright"] .quiz-meta .elapsed { background: rgba(255, 255, 255, 0.55); border-color: rgba(120, 71, 126, 0.14); color: #6B5670; } body[data-theme="aurora-bright"] .quiz-meta .elapsed::before { background: #C2540B; box-shadow: 0 0 6px rgba(194, 84, 11, 0.5); } body[data-theme="aurora-bright"] .quiz-meta-2 { color: #6B5670; } body[data-theme="aurora-bright"] .quiz-meta-2 svg { color: #8A7A8F; } body[data-theme="aurora-bright"] .dot-progress .dot { background: rgba(93, 43, 101, 0.12); } body[data-theme="aurora-bright"] .dot-progress .dot.is-done { background: #78477E; box-shadow: 0 0 6px rgba(120, 71, 126, 0.4); } body[data-theme="aurora-bright"] .dot-progress .dot.is-current { background: #4CAF51; box-shadow: 0 0 10px rgba(76, 175, 81, 0.65); } body[data-theme="aurora-bright"] .quiz-question h2, body[data-theme="aurora-bright"] .quiz-question .q-text { color: #2A1730; } body[data-theme="aurora-bright"] .q-image-card, body[data-theme="aurora-bright"] .quiz-image-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(120, 71, 126, 0.14); box-shadow: 0 4px 20px -8px rgba(93, 43, 101, 0.12); } body[data-theme="aurora-bright"] .q-option { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(8px); border: 1.5px solid rgba(120, 71, 126, 0.18) !important; color: #2A1730; box-shadow: 0 2px 8px -2px rgba(93, 43, 101, 0.08); } body[data-theme="aurora-bright"] .q-option:hover { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(120, 71, 126, 0.32) !important; } body[data-theme="aurora-bright"] .q-option.selected, body[data-theme="aurora-bright"] .q-option[aria-checked="true"] { background: linear-gradient(140deg, rgba(243, 232, 255, 0.95) 0%, rgba(255, 228, 212, 0.7) 100%) !important; border-color: #5D2B65 !important; box-shadow: 0 0 0 4px rgba(93, 43, 101, 0.12), 0 4px 16px -4px rgba(93, 43, 101, 0.30); } body[data-theme="aurora-bright"] .q-option .q-letter { color: #5D2B65; background: rgba(93, 43, 101, 0.08); border-color: rgba(120, 71, 126, 0.20); } body[data-theme="aurora-bright"] .q-option.selected .q-letter, body[data-theme="aurora-bright"] .q-option[aria-checked="true"] .q-letter { background: #5D2B65; color: #FFFFFF; border-color: #5D2B65; } body[data-theme="aurora-bright"] .q-nav .prev-btn { background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(120, 71, 126, 0.16); color: #4A3055; } body[data-theme="aurora-bright"] .q-nav .prev-btn:hover { background: rgba(255, 255, 255, 0.95); } body[data-theme="aurora-bright"] .quiz-sticky-bar, body[data-theme="aurora-bright"] .quiz-bottom-bar { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); border-top: 1px solid rgba(120, 71, 126, 0.10); } body[data-theme="aurora-bright"] .answer-saved { color: #5D2B65; } body[data-theme="aurora-bright"] .score-display { background-image: linear-gradient(180deg, #2A1730 0%, #5D2B65 50%, #C2540B 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="aurora-bright"] .verdict-pill[data-verdict="fail"] { background: rgba(220, 38, 38, 0.10); color: #B91C1C; border: 1px solid rgba(220, 38, 38, 0.22); } body[data-theme="aurora-bright"] .verdict-pill[data-verdict="warn"] { background: rgba(245, 158, 11, 0.12); color: #B45309; border: 1px solid rgba(245, 158, 11, 0.25); } body[data-theme="aurora-bright"] .verdict-pill[data-verdict="pass"] { background: rgba(76, 175, 81, 0.12); color: #2E7D32; border: 1px solid rgba(76, 175, 81, 0.30); } body[data-theme="aurora-bright"] .verdict-pill[data-verdict="fail"] .vp-icon { background: #DC2626; } body[data-theme="aurora-bright"] .verdict-pill[data-verdict="warn"] .vp-icon { background: #F59E0B; color: #1F1407; } body[data-theme="aurora-bright"] .verdict-pill[data-verdict="pass"] .vp-icon { background: #4CAF51; color: #FFFFFF; } body[data-theme="aurora-bright"] .prediction-banner { background: linear-gradient(140deg, rgba(220, 38, 38, 0.08) 0%, rgba(255, 255, 255, 0.6) 100%); border: 1px solid rgba(220, 38, 38, 0.20); backdrop-filter: blur(12px); } body[data-theme="aurora-bright"] .prediction-banner.is-pass { background: linear-gradient(140deg, rgba(76, 175, 81, 0.10) 0%, rgba(255, 255, 255, 0.65) 100%); border-color: rgba(76, 175, 81, 0.25); } body[data-theme="aurora-bright"] .prediction-banner.is-warn { background: linear-gradient(140deg, rgba(245, 158, 11, 0.10) 0%, rgba(255, 255, 255, 0.65) 100%); border-color: rgba(245, 158, 11, 0.25); } body[data-theme="aurora-bright"] .prediction-stat { background-image: linear-gradient(180deg, #2A1730, #B91C1C) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="aurora-bright"] .prediction-banner.is-pass .prediction-stat { background-image: linear-gradient(180deg, #2A1730, #2E7D32) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="aurora-bright"] .prediction-banner.is-warn .prediction-stat { background-image: linear-gradient(180deg, #2A1730, #B45309) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="aurora-bright"] .prediction-verdict.fail { background: rgba(220, 38, 38, 0.10); color: #B91C1C; } body[data-theme="aurora-bright"] .prediction-verdict.warn { background: rgba(245, 158, 11, 0.12); color: #B45309; } body[data-theme="aurora-bright"] .prediction-verdict.pass { background: rgba(76, 175, 81, 0.12); color: #2E7D32; } body[data-theme="aurora-bright"] .review-list .review-item { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(8px); border: 1px solid rgba(120, 71, 126, 0.10); } body[data-theme="aurora-bright"] .review-item.is-correct { border-left: 3px solid #4CAF51; } body[data-theme="aurora-bright"] .review-item.is-incorrect { border-left: 3px solid #DC2626; } body[data-theme="aurora-bright"] .review-item.is-correct .rs-num { background: rgba(76, 175, 81, 0.14); color: #2E7D32; } body[data-theme="aurora-bright"] .review-item.is-incorrect .rs-num { background: rgba(220, 38, 38, 0.12); color: #B91C1C; } body[data-theme="aurora-bright"] .review-item.is-correct .rs-mark { background: #4CAF51; color: #FFFFFF; } body[data-theme="aurora-bright"] .review-item.is-incorrect .rs-mark { background: #DC2626; color: #FFFFFF; } body[data-theme="aurora-bright"] .review-detail dd.is-yours.is-wrong { color: #B91C1C; } body[data-theme="aurora-bright"] .pattern-row.ok .bar-fill { background: linear-gradient(90deg, #4CAF51, #6FCF73); box-shadow: 0 0 8px rgba(76, 175, 81, 0.3); } body[data-theme="aurora-bright"] .pattern-row.ok .pill { background: #4CAF51; color: #FFFFFF; } body[data-theme="aurora-bright"] .pattern-row.warn .pill { background: #F59E0B; color: #1F1407; } body[data-theme="aurora-bright"] .pattern-row.fail .pill { background: #DC2626; color: #FFFFFF; } body[data-theme="aurora-bright"] .price-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(120, 71, 126, 0.16); box-shadow: 0 6px 28px -8px rgba(93, 43, 101, 0.14); } body[data-theme="aurora-bright"] .price-card.is-deluxe { background: linear-gradient(140deg, rgba(255, 255, 255, 0.95) 0%, rgba(243, 232, 255, 0.70) 100%); border: 2px solid #5D2B65; box-shadow: 0 12px 36px -8px rgba(93, 43, 101, 0.22), 0 0 0 4px rgba(93, 43, 101, 0.06); } body[data-theme="aurora-bright"] .price-amount .amount { color: #2A1730; } body[data-theme="aurora-bright"] .price-strike { color: #8A7A8F; } body[data-theme="aurora-bright"] .price-feature { color: #4A3055; } body[data-theme="aurora-bright"] .pricing-foot { color: #6B5670; } body[data-theme="aurora-bright"] .sticky-cta-bar { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); border-top: 1px solid rgba(120, 71, 126, 0.10); box-shadow: 0 -4px 20px -4px rgba(93, 43, 101, 0.12); } body[data-theme="aurora-bright"] .sticky-cta-bar .meta { color: #6B5670; } body[data-theme="aurora-bright"] .result-cta-bar { background: rgba(255, 252, 248, 0.94); backdrop-filter: blur(20px); border-top: 1px solid rgba(120, 71, 126, 0.10); box-shadow: 0 -4px 20px -4px rgba(245, 91, 158, 0.12); } body[data-theme="aurora-bright"] .result-cta-bar .copy { color: #3D2A45; } body[data-theme="aurora-bright"] .result-cta-bar .copy strong { color: #1A0F1F; } body[data-theme="aurora-bright"] .result-cta-bar .copy .bar-meta { color: #6B5670; } body[data-theme="aurora-bright"] .dial-num { background-image: linear-gradient(180deg, #5D2B65 0%, #2E7D32 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="aurora-bright"] .dial-num-label { color: #6B5670; } body[data-theme="aurora-bright"] .dial-suffix { color: #6B5670; } body[data-theme="aurora-bright"] .chance-num { background-image: linear-gradient(180deg, #5D2B65 0%, #2E7D32 100%) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body[data-theme="aurora-bright"] .chance-num-label { color: #6B5670; } body[data-theme="aurora-bright"] .chance-suffix { color: #6B5670; } body[data-theme="aurora-bright"] .review-list h3, body[data-theme="aurora-bright"] .pattern-card h3, body[data-theme="aurora-bright"] .pricing-card h3 { color: #2A1730; } /* ============================================================ REELS-SPECIFIC OVERRIDES (Demo 3 — uses .card-intro/.q-headline/[data-state]) ============================================================ */ /* Stage backgrounds */ body[data-theme="studio-dark"] .reels-stage { background: #050110; } body[data-theme="midnight-aurora"] .reels-stage { background: radial-gradient(ellipse at 50% 0%, rgba(93, 43, 101, 0.55) 0%, transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(245, 91, 158, 0.30) 0%, transparent 55%), #050008 !important; } body[data-theme="studio-light"] .reels-stage { background: linear-gradient(180deg, #FFFFFF 0%, #F3F3F3 100%) !important; } body[data-theme="aurora-bright"] .reels-stage { background: radial-gradient(ellipse at 0% 0%, rgba(243, 232, 255, 0.95) 0%, transparent 55%), radial-gradient(ellipse at 100% 5%, rgba(255, 228, 212, 0.85) 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(255, 247, 224, 0.85) 0%, transparent 60%), #FAF5F7 !important; } /* Phone-frame background (mobile fullscreen + desktop fixed-width window) */ body[data-theme="studio-dark"] .reels-frame { background: linear-gradient(180deg, #18102E 0%, #0A0418 100%) !important; } body[data-theme="midnight-aurora"] .reels-frame { background: radial-gradient(ellipse at 50% 0%, rgba(93, 43, 101, 0.65) 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(245, 91, 158, 0.25) 0%, transparent 60%), radial-gradient(ellipse at 100% 50%, rgba(245, 158, 11, 0.10) 0%, transparent 60%), #050008 !important; } body[data-theme="studio-light"] .reels-frame { background: linear-gradient(180deg, #FFFFFF 0%, #FAF7FB 100%) !important; color: #1A0F1F !important; } body[data-theme="aurora-bright"] .reels-frame { background: radial-gradient(ellipse at 30% 0%, rgba(243, 232, 255, 0.85) 0%, transparent 55%), radial-gradient(ellipse at 80% 100%, rgba(255, 228, 212, 0.70) 0%, transparent 55%), #FAF5F7 !important; color: #2A1730 !important; } /* Phone-frame box-shadow on desktop — soft purple glow on light, aurora glow on midnight */ @media (min-width: 720px) { body[data-theme="studio-light"] .reels-frame { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80), 0 0 0 1px rgba(93, 43, 101, 0.15), 0 0 0 8px #FFFFFF, 0 0 0 9px rgba(93, 43, 101, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06), 0 16px 36px -8px rgba(93, 43, 101, 0.18), 0 32px 96px rgba(93, 43, 101, 0.10), 0 0 120px rgba(180, 122, 188, 0.12) !important; } body[data-theme="aurora-bright"] .reels-frame { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 0 1px rgba(120, 71, 126, 0.18), 0 0 0 8px rgba(255, 255, 255, 0.7), 0 0 0 9px rgba(120, 71, 126, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06), 0 16px 36px -8px rgba(245, 91, 158, 0.18), 0 32px 96px rgba(245, 158, 11, 0.10), 0 0 120px rgba(180, 122, 188, 0.18) !important; } body[data-theme="midnight-aurora"] .reels-frame { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(245, 91, 158, 0.20), 0 0 0 8px #050008, 0 0 0 9px rgba(245, 91, 158, 0.10), 0 1px 2px rgba(0, 0, 0, 0.40), 0 16px 32px -8px rgba(0, 0, 0, 0.50), 0 32px 96px rgba(245, 91, 158, 0.20), 0 0 120px rgba(245, 158, 11, 0.12) !important; } body[data-theme="midnight-aurora"] .reels-stage { background: radial-gradient(ellipse at center, rgba(93, 43, 101, 0.40) 0%, #050008 80%), #050008 !important; } body[data-theme="studio-light"] .reels-stage { background: radial-gradient(ellipse at center, #FAF7FB 0%, #F3F3F3 80%) !important; } body[data-theme="aurora-bright"] .reels-stage { background: radial-gradient(ellipse at 0% 0%, rgba(243, 232, 255, 0.95) 0%, transparent 55%), radial-gradient(ellipse at 100% 5%, rgba(255, 228, 212, 0.85) 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(255, 247, 224, 0.85) 0%, transparent 60%), #FAF5F7 !important; } } /* Top bar gradient */ body[data-theme="studio-light"] .top-bar { background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0)); } body[data-theme="aurora-bright"] .top-bar { background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0)); } body[data-theme="studio-light"] .top-bar .top-x, body[data-theme="aurora-bright"] .top-bar .top-x { background: rgba(255,255,255,0.75); color: #1A0F1F; border: 1px solid rgba(93,43,101,0.14); } body[data-theme="studio-light"] .top-progress, body[data-theme="aurora-bright"] .top-progress { background: rgba(93, 43, 101, 0.12) !important; } body[data-theme="studio-light"] .top-progress-fill, body[data-theme="aurora-bright"] .top-progress-fill { background: #4CAF51 !important; box-shadow: 0 0 8px rgba(76, 175, 81, 0.65); } /* Card intro (start screen) */ body[data-theme="studio-light"] .card-intro, body[data-theme="aurora-bright"] .card-intro { color: #1A0F1F; } body[data-theme="studio-light"] .card-intro .eyebrow, body[data-theme="aurora-bright"] .card-intro .eyebrow { background: rgba(93, 43, 101, 0.08); border-color: rgba(93, 43, 101, 0.18); color: #5D2B65; } body[data-theme="studio-light"] .card-intro .eyebrow::before, body[data-theme="aurora-bright"] .card-intro .eyebrow::before { background: #4CAF51; box-shadow: 0 0 8px rgba(76, 175, 81, 0.6); } body[data-theme="studio-light"] .card-intro h1, body[data-theme="aurora-bright"] .card-intro h1 { color: #1A0F1F; } body[data-theme="studio-light"] .card-intro h1 .accent::after, body[data-theme="aurora-bright"] .card-intro h1 .accent::after { background: #4CAF51; opacity: 0.45; } body[data-theme="studio-dark"] .card-intro h1 .accent::after { background: #4CAF51; } body[data-theme="midnight-aurora"] .card-intro h1 .accent::after { background: #4CAF51; opacity: 0.65; } body[data-theme="studio-light"] .card-intro p.lede, body[data-theme="aurora-bright"] .card-intro p.lede { color: #4A3055; } body[data-theme="studio-light"] .intro-stat .num, body[data-theme="aurora-bright"] .intro-stat .num { color: #1A0F1F; } body[data-theme="studio-light"] .intro-stat .lbl, body[data-theme="aurora-bright"] .intro-stat .lbl { color: #6B5670; } body[data-theme="studio-light"] .intro-stat .num .pct, body[data-theme="aurora-bright"] .intro-stat .num .pct { color: #6B5670; } body[data-theme="studio-light"] .intro-meta, body[data-theme="aurora-bright"] .intro-meta { color: #6B5670; } /* Reels CTA (start button + result CTA) */ body[data-theme="studio-dark"] .cta-start, body[data-theme="studio-dark"] .reels-cta, body[data-theme="studio-dark"] .price-cta { background: linear-gradient(180deg, #5BC662 0%, #4CAF51 100%); color: #04250F; } body[data-theme="midnight-aurora"] .cta-start, body[data-theme="midnight-aurora"] .reels-cta, body[data-theme="midnight-aurora"] .price-cta { background: linear-gradient(180deg, #5BC662 0%, #4CAF51 100%); color: #04250F; box-shadow: 0 6px 18px -4px rgba(76, 175, 81, 0.45), 0 0 0 4px rgba(245, 158, 11, 0.06); } body[data-theme="studio-light"] .cta-start, body[data-theme="studio-light"] .reels-cta, body[data-theme="studio-light"] .price-cta, body[data-theme="aurora-bright"] .cta-start, body[data-theme="aurora-bright"] .reels-cta, body[data-theme="aurora-bright"] .price-cta { background: linear-gradient(180deg, #5BC662 0%, #4CAF51 100%); color: #FFFFFF; box-shadow: 0 6px 18px -4px rgba(76, 175, 81, 0.50), 0 0 0 1px rgba(76, 175, 81, 0.40); } /* Quiz card */ body[data-theme="studio-light"] .q-meta, body[data-theme="aurora-bright"] .q-meta { color: #1A0F1F; } body[data-theme="studio-light"] .q-cat, body[data-theme="aurora-bright"] .q-cat { background: rgba(255,255,255,0.85); border-color: rgba(93,43,101,0.18); color: #5D2B65; backdrop-filter: blur(8px); } body[data-theme="studio-light"] .q-cat::before, body[data-theme="aurora-bright"] .q-cat::before { background: #5D2B65; } body[data-theme="studio-light"] .q-headline, body[data-theme="aurora-bright"] .q-headline { color: #1A0F1F; text-shadow: 0 1px 2px rgba(255,255,255,0.6); } /* Q-option uses [data-state="selected"] not .selected — correct selectors */ body[data-theme="studio-dark"] .q-option .letter { background: #5D2B65; color: #FFFFFF; } body[data-theme="studio-dark"] .q-option[data-state="selected"] { background: linear-gradient(140deg, #F0E0F5 0%, #FFFFFF 100%); border-color: #5D2B65; color: #1A0F1F; box-shadow: inset 0 1px 0 rgba(255,255,255,0.80), 0 0 0 4px rgba(93, 43, 101, 0.18), 0 1px 2px rgba(0, 0, 0, 0.20), 0 8px 24px rgba(93, 43, 101, 0.30), 0 24px 48px -12px rgba(0, 0, 0, 0.45); } body[data-theme="studio-dark"] .q-option[data-state="selected"] .label { color: #1A0F1F; } body[data-theme="studio-dark"] .q-option[data-state="selected"] .letter { background: #78477E; color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 0 12px rgba(180, 122, 188, 0.55); } body[data-theme="midnight-aurora"] .q-option .letter { background: #5D2B65; color: #FFFFFF; } body[data-theme="midnight-aurora"] .q-option[data-state="selected"] { background: linear-gradient(140deg, #F5E0E8 0%, #FFFFFF 100%); border-color: #F55B9E; color: #1A0F1F; box-shadow: inset 0 1px 0 rgba(255,255,255,0.80), 0 0 0 4px rgba(245, 91, 158, 0.20), 0 1px 2px rgba(0, 0, 0, 0.20), 0 8px 24px rgba(245, 91, 158, 0.28), 0 24px 48px -12px rgba(0, 0, 0, 0.45); } body[data-theme="midnight-aurora"] .q-option[data-state="selected"] .label { color: #1A0F1F; } body[data-theme="midnight-aurora"] .q-option[data-state="selected"] .letter { background: #F55B9E; color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 0 12px rgba(245, 91, 158, 0.55); } body[data-theme="studio-light"] .q-option, body[data-theme="aurora-bright"] .q-option { background: #FFFFFF; color: #1A0F1F; box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 14px -4px rgba(93,43,101,0.12), 0 12px 28px -8px rgba(93,43,101,0.18); } body[data-theme="studio-light"] .q-option .letter, body[data-theme="aurora-bright"] .q-option .letter { background: #5D2B65; color: #FFFFFF; } body[data-theme="studio-light"] .q-option[data-state="selected"], body[data-theme="aurora-bright"] .q-option[data-state="selected"] { background: linear-gradient(140deg, #F5E8F7 0%, #FFFFFF 100%); border-color: #5D2B65; box-shadow: 0 0 0 4px rgba(93, 43, 101, 0.14), 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(93, 43, 101, 0.18), 0 16px 36px -8px rgba(93, 43, 101, 0.20); } body[data-theme="studio-light"] .q-option[data-state="selected"] .letter, body[data-theme="aurora-bright"] .q-option[data-state="selected"] .letter { background: #5D2B65; box-shadow: 0 0 12px rgba(93, 43, 101, 0.45); } /* Bottom bar */ body[data-theme="studio-light"] .bottom-bar, body[data-theme="aurora-bright"] .bottom-bar { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 30%); } body[data-theme="aurora-bright"] .bottom-bar { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 30%); backdrop-filter: blur(12px); } body[data-theme="studio-light"] .bottom-status, body[data-theme="aurora-bright"] .bottom-status { color: #5D2B65; } body[data-theme="studio-light"] .next-btn, body[data-theme="aurora-bright"] .next-btn { background: linear-gradient(180deg, #5BC662 0%, #4CAF51 100%) !important; color: #FFFFFF !important; box-shadow: 0 4px 14px -2px rgba(76, 175, 81, 0.40); } body[data-theme="studio-dark"] .next-btn, body[data-theme="midnight-aurora"] .next-btn { background: linear-gradient(180deg, #5BC662 0%, #4CAF51 100%) !important; color: #04250F !important; } /* Result screen cards (Reels) */ body[data-theme="studio-light"] .verdict-card, body[data-theme="aurora-bright"] .verdict-card { background: #FFFFFF; color: #1A0F1F; border: 1px solid rgba(93,43,101,0.14); box-shadow: 0 8px 28px -8px rgba(93, 43, 101, 0.18); } body[data-theme="aurora-bright"] .verdict-card { background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); } body[data-theme="studio-light"] .compare-card, body[data-theme="aurora-bright"] .compare-card, body[data-theme="studio-light"] .pattern-card, body[data-theme="aurora-bright"] .pattern-card, body[data-theme="studio-light"] .chance-card, body[data-theme="aurora-bright"] .chance-card, body[data-theme="studio-light"] .cta-card, body[data-theme="aurora-bright"] .cta-card { background: #FFFFFF; color: #1A0F1F; border: 1px solid rgba(93,43,101,0.14); box-shadow: 0 8px 28px -8px rgba(93, 43, 101, 0.16); } body[data-theme="aurora-bright"] .compare-card, body[data-theme="aurora-bright"] .pattern-card, body[data-theme="aurora-bright"] .chance-card, body[data-theme="aurora-bright"] .cta-card { background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); } /* ============================================================ REELS · per-card backgrounds (.card-intro, .card-wrapped, .card-cta, etc.) The reel "pages" have their own gradient bg, must override per theme. ============================================================ */ /* Studio Dark — palette-aligned dark cards */ body[data-theme="studio-dark"] .card-intro { background: linear-gradient(180deg, #5D2B65 0%, #1A0820 80%) !important; } body[data-theme="studio-dark"] .card-intro::before { background: radial-gradient(circle at 30% 25%, rgba(180, 122, 188, 0.45) 0%, transparent 45%), radial-gradient(circle at 70% 75%, rgba(76, 175, 81, 0.30) 0%, transparent 50%) !important; } body[data-theme="studio-dark"] .card-calc { background: linear-gradient(180deg, #5D2B65 0%, #1A0820 100%) !important; } body[data-theme="studio-dark"] .card-wrapped { background: linear-gradient(180deg, #18102E 0%, #0A0418 100%) !important; } body[data-theme="studio-dark"] .card-wrapped::before { background: radial-gradient(circle at 25% 20%, rgba(180, 122, 188, 0.32) 0%, transparent 45%), radial-gradient(circle at 75% 80%, rgba(76, 175, 81, 0.22) 0%, transparent 50%) !important; } body[data-theme="studio-dark"] .card-cta { background: linear-gradient(180deg, #18102E 0%, #0A0418 100%) !important; } body[data-theme="studio-dark"] .card.no-image { background: linear-gradient(180deg, #18102E 0%, #0A0418 100%) !important; } /* Midnight Aurora — pure black with paars-roze-oranje aurora glow */ body[data-theme="midnight-aurora"] .card-intro { background: radial-gradient(ellipse at 50% 0%, rgba(93, 43, 101, 0.70) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(245, 91, 158, 0.35) 0%, transparent 55%), radial-gradient(ellipse at 20% 100%, rgba(245, 158, 11, 0.18) 0%, transparent 55%), #050008 !important; } body[data-theme="midnight-aurora"] .card-intro::before { background: radial-gradient(circle at 30% 25%, rgba(245, 91, 158, 0.30) 0%, transparent 50%), radial-gradient(circle at 70% 75%, rgba(76, 175, 81, 0.20) 0%, transparent 55%) !important; } body[data-theme="midnight-aurora"] .card-calc { background: radial-gradient(ellipse at 50% 50%, rgba(93, 43, 101, 0.45) 0%, transparent 60%), #050008 !important; } body[data-theme="midnight-aurora"] .card-wrapped { background: radial-gradient(ellipse at 50% 0%, rgba(93, 43, 101, 0.50) 0%, transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(245, 91, 158, 0.20) 0%, transparent 55%), #050008 !important; } body[data-theme="midnight-aurora"] .card-wrapped::before { background: radial-gradient(circle at 25% 20%, rgba(245, 91, 158, 0.28) 0%, transparent 45%), radial-gradient(circle at 75% 80%, rgba(76, 175, 81, 0.18) 0%, transparent 50%) !important; } body[data-theme="midnight-aurora"] .card-cta { background: radial-gradient(ellipse at 50% 0%, rgba(93, 43, 101, 0.55) 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(245, 91, 158, 0.25) 0%, transparent 55%), #050008 !important; } body[data-theme="midnight-aurora"] .card.no-image { background: radial-gradient(ellipse at 50% 50%, rgba(93, 43, 101, 0.40) 0%, transparent 65%), #050008 !important; } /* Studio Light — white with subtle purple accents */ body[data-theme="studio-light"] .card-intro { background: linear-gradient(180deg, #FFFFFF 0%, #FAF7FB 80%) !important; color: #1A0F1F !important; } body[data-theme="studio-light"] .card-intro::before { background: radial-gradient(circle at 30% 25%, rgba(120, 71, 126, 0.10) 0%, transparent 45%), radial-gradient(circle at 70% 75%, rgba(76, 175, 81, 0.08) 0%, transparent 50%) !important; } body[data-theme="studio-light"] .card-calc { background: linear-gradient(180deg, #FFFFFF 0%, #F3F3F3 100%) !important; color: #1A0F1F !important; } body[data-theme="studio-light"] .card-wrapped { background: linear-gradient(180deg, #FFFFFF 0%, #FAF7FB 100%) !important; color: #1A0F1F !important; } body[data-theme="studio-light"] .card-wrapped::before { background: radial-gradient(circle at 25% 20%, rgba(120, 71, 126, 0.10) 0%, transparent 45%), radial-gradient(circle at 75% 80%, rgba(76, 175, 81, 0.08) 0%, transparent 50%) !important; } body[data-theme="studio-light"] .card-cta { background: linear-gradient(180deg, #FFFFFF 0%, #FAF7FB 100%) !important; color: #1A0F1F !important; } body[data-theme="studio-light"] .card.no-image { background: linear-gradient(180deg, #FFFFFF 0%, #FAF7FB 100%) !important; color: #1A0F1F !important; } /* Aurora Bright — warm cream + lavender + peach */ body[data-theme="aurora-bright"] .card-intro { background: radial-gradient(ellipse at 0% 0%, rgba(243, 232, 255, 0.95) 0%, transparent 55%), radial-gradient(ellipse at 100% 0%, rgba(255, 228, 212, 0.85) 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(255, 247, 224, 0.85) 0%, transparent 60%), #FAF5F7 !important; color: #2A1730 !important; } body[data-theme="aurora-bright"] .card-intro::before { background: radial-gradient(circle at 30% 25%, rgba(245, 91, 158, 0.10) 0%, transparent 45%), radial-gradient(circle at 70% 75%, rgba(76, 175, 81, 0.10) 0%, transparent 50%) !important; } body[data-theme="aurora-bright"] .card-calc { background: radial-gradient(ellipse at 50% 50%, rgba(243, 232, 255, 0.70) 0%, transparent 60%), #FAF5F7 !important; color: #2A1730 !important; } body[data-theme="aurora-bright"] .card-wrapped { background: radial-gradient(ellipse at 0% 0%, rgba(243, 232, 255, 0.85) 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(255, 228, 212, 0.65) 0%, transparent 55%), #FAF5F7 !important; color: #2A1730 !important; } body[data-theme="aurora-bright"] .card-wrapped::before { background: radial-gradient(circle at 25% 20%, rgba(245, 91, 158, 0.12) 0%, transparent 45%), radial-gradient(circle at 75% 80%, rgba(76, 175, 81, 0.10) 0%, transparent 50%) !important; } body[data-theme="aurora-bright"] .card-cta { background: radial-gradient(ellipse at 50% 0%, rgba(243, 232, 255, 0.85) 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(255, 228, 212, 0.55) 0%, transparent 55%), #FAF5F7 !important; color: #2A1730 !important; } body[data-theme="aurora-bright"] .card.no-image { background: radial-gradient(ellipse at 50% 50%, rgba(243, 232, 255, 0.65) 0%, transparent 65%), #FAF5F7 !important; color: #2A1730 !important; } /* Eyebrows + wrapped-eyebrow on light themes */ body[data-theme="studio-light"] .card-intro .eyebrow, body[data-theme="aurora-bright"] .card-intro .eyebrow, body[data-theme="studio-light"] .wrapped-eyebrow, body[data-theme="aurora-bright"] .wrapped-eyebrow { background: rgba(93, 43, 101, 0.08); border: 1px solid rgba(93, 43, 101, 0.18); color: #5D2B65; } body[data-theme="studio-light"] .card-intro .eyebrow::before, body[data-theme="aurora-bright"] .card-intro .eyebrow::before { background: #4CAF51 !important; box-shadow: 0 0 8px rgba(76, 175, 81, 0.6); } body[data-theme="studio-light"] .card-content, body[data-theme="aurora-bright"] .card-content { color: #1A0F1F; } body[data-theme="studio-light"] .lede, body[data-theme="aurora-bright"] .lede, body[data-theme="studio-light"] p.lede, body[data-theme="aurora-bright"] p.lede { color: #4A3055 !important; } body[data-theme="studio-light"] .intro-meta, body[data-theme="aurora-bright"] .intro-meta { color: #6B5670 !important; } /* Top progress segs on light — paars vs wit */ body[data-theme="studio-light"] .top-progress .seg, body[data-theme="aurora-bright"] .top-progress .seg { background: rgba(93, 43, 101, 0.18) !important; } body[data-theme="studio-light"] .top-progress .seg::after, body[data-theme="aurora-bright"] .top-progress .seg::after { background: #4CAF51 !important; } /* Top bar X-button + meta text */ body[data-theme="studio-light"] .top-bar-meta, body[data-theme="aurora-bright"] .top-bar-meta { color: #6B5670 !important; } /* Reels top-logo: donker chip-backdrop op licht thema zodat witte logo-tekst leesbaar blijft */ body[data-theme="studio-light"] .top-logo, body[data-theme="aurora-bright"] .top-logo { padding: 5px 10px; border-radius: 10px; background: linear-gradient(135deg, #1A0A2E 0%, #5D2B65 100%); box-shadow: 0 4px 14px rgba(93, 43, 101, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); } body[data-theme="studio-light"] .top-logo img, body[data-theme="aurora-bright"] .top-logo img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } /* ============================================================ Theme switcher widget ============================================================ */ .theme-switcher { position: fixed; right: 16px; bottom: 16px; z-index: 9999; background: rgba(15, 8, 35, 0.92); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; padding: 10px; box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; gap: 6px; font-family: 'Inter var', 'Inter', system-ui, sans-serif; transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1), opacity 220ms ease; max-width: 240px; } body[data-theme="studio-light"] .theme-switcher, body[data-theme="aurora-bright"] .theme-switcher { background: rgba(255, 255, 255, 0.92); border-color: rgba(93, 43, 101, 0.18); box-shadow: 0 12px 36px -8px rgba(93, 43, 101, 0.20), 0 2px 6px rgba(0, 0, 0, 0.06); } .theme-switcher.is-collapsed { padding: 0; border-radius: 999px; width: 44px; height: 44px; min-height: 44px; max-width: 44px; background: rgba(15, 8, 35, 0.78); border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.04); overflow: hidden; } body[data-theme="studio-light"] .theme-switcher.is-collapsed, body[data-theme="aurora-bright"] .theme-switcher.is-collapsed { background: rgba(255, 255, 255, 0.92); border-color: rgba(93, 43, 101, 0.20); box-shadow: 0 8px 22px -6px rgba(93, 43, 101, 0.20); } .theme-switcher.is-collapsed .ts-options, .theme-switcher.is-collapsed .ts-title, .theme-switcher.is-collapsed .ts-hub-link { display: none; } .theme-switcher.is-collapsed .ts-header { padding: 0; margin: 0; width: 44px; height: 44px; justify-content: center; } .theme-switcher.is-collapsed .ts-toggle { width: 44px; height: 44px; padding: 0; font-size: 18px; border-radius: 999px; } .ts-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px 8px; } .ts-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: rgba(255, 255, 255, 0.65); margin: 0; } body[data-theme="studio-light"] .ts-title, body[data-theme="aurora-bright"] .ts-title { color: rgba(26, 15, 31, 0.55); } .ts-toggle { background: transparent; border: 0; color: rgba(255, 255, 255, 0.7); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; } .ts-toggle:hover { background: rgba(255, 255, 255, 0.08); color: #FFF; } body[data-theme="studio-light"] .ts-toggle, body[data-theme="aurora-bright"] .ts-toggle { color: rgba(26, 15, 31, 0.55); } body[data-theme="studio-light"] .ts-toggle:hover, body[data-theme="aurora-bright"] .ts-toggle:hover { background: rgba(93, 43, 101, 0.08); color: #1A0F1F; } .ts-options { display: flex; flex-direction: column; gap: 4px; } .ts-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: transparent; border: 1px solid transparent; border-radius: 12px; cursor: pointer; text-align: left; width: 100%; font-family: inherit; color: rgba(255, 255, 255, 0.85); transition: background 180ms ease, border-color 180ms ease; } .ts-option:hover { background: rgba(255, 255, 255, 0.06); } .ts-option.is-active { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.18); } body[data-theme="studio-light"] .ts-option, body[data-theme="aurora-bright"] .ts-option { color: #1A0F1F; } body[data-theme="studio-light"] .ts-option:hover, body[data-theme="aurora-bright"] .ts-option:hover { background: rgba(93, 43, 101, 0.06); } body[data-theme="studio-light"] .ts-option.is-active, body[data-theme="aurora-bright"] .ts-option.is-active { background: rgba(93, 43, 101, 0.10); border-color: rgba(93, 43, 101, 0.25); } .ts-swatch { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); } .ts-swatch.s-studio-dark { background: linear-gradient(135deg, #0A0418 0%, #5D2B65 60%, #4CAF51 100%); } .ts-swatch.s-midnight-aurora { background: linear-gradient(135deg, #050008 0%, #5D2B65 35%, #F55B9E 70%, #F59E0B 100%); } .ts-swatch.s-studio-light { background: linear-gradient(135deg, #FFFFFF 0%, #F3F3F3 50%, #5D2B65 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); } .ts-swatch.s-aurora-bright { background: linear-gradient(135deg, #F3E8FF 0%, #FFE4D4 40%, #FFF7E0 70%, #4CAF51 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); } .ts-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ts-name { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; } .ts-meta { font-size: 11px; opacity: 0.65; line-height: 1.2; } .ts-hub-link { margin-top: 4px; padding: 8px 10px; background: rgba(76, 175, 81, 0.12); border: 1px solid rgba(76, 175, 81, 0.30); border-radius: 10px; color: #6FCF73; text-decoration: none; font-size: 12px; font-weight: 600; text-align: center; display: block; transition: background 180ms ease; } .ts-hub-link:hover { background: rgba(76, 175, 81, 0.20); } body[data-theme="studio-light"] .ts-hub-link, body[data-theme="aurora-bright"] .ts-hub-link { background: rgba(76, 175, 81, 0.10); border-color: rgba(76, 175, 81, 0.30); color: #2E7D32; } body[data-theme="studio-light"] .ts-hub-link:hover, body[data-theme="aurora-bright"] .ts-hub-link:hover { background: rgba(76, 175, 81, 0.18); } /* ============================================================ Loss-anchor + result-content tekst contrast op licht thema (witte tekst was onleesbaar op lichte rode/paarse backgrounds) ============================================================ */ body[data-theme="studio-light"] .loss-anchor, body[data-theme="aurora-bright"] .loss-anchor { background: linear-gradient(140deg, rgba(220, 38, 38, 0.10), rgba(127, 29, 29, 0.05)) !important; border-color: rgba(220, 38, 38, 0.35) !important; color: #7F1D1D !important; } body[data-theme="studio-light"] .loss-anchor p, body[data-theme="aurora-bright"] .loss-anchor p, body[data-theme="studio-light"] .loss-anchor strong, body[data-theme="aurora-bright"] .loss-anchor strong { color: #7F1D1D !important; } body[data-theme="studio-light"] .la-icon, body[data-theme="aurora-bright"] .la-icon { color: #DC2626 !important; } /* Reels score-headline + score-lede + chance-headline op licht thema */ body[data-theme="studio-light"] .score-headline, body[data-theme="aurora-bright"] .score-headline, body[data-theme="studio-light"] .chance-headline, body[data-theme="aurora-bright"] .chance-headline, body[data-theme="studio-light"] .compare-h2, body[data-theme="aurora-bright"] .compare-h2, body[data-theme="studio-light"] .pattern-h2, body[data-theme="aurora-bright"] .pattern-h2, body[data-theme="studio-light"] .cta-h2, body[data-theme="aurora-bright"] .cta-h2 { color: #1A0F1F !important; } body[data-theme="studio-light"] .score-lede, body[data-theme="aurora-bright"] .score-lede, body[data-theme="studio-light"] .chance-lede, body[data-theme="aurora-bright"] .chance-lede, body[data-theme="studio-light"] .pattern-sub, body[data-theme="aurora-bright"] .pattern-sub, body[data-theme="studio-light"] .cta-sub, body[data-theme="aurora-bright"] .cta-sub, body[data-theme="studio-light"] .compare-foot, body[data-theme="aurora-bright"] .compare-foot, body[data-theme="studio-light"] .prediction-norm-line, body[data-theme="aurora-bright"] .prediction-norm-line { color: #4A3055 !important; } /* Verdict-card op licht thema: tekst zwart-paars zodat ie leesbaar blijft */ body[data-theme="studio-light"] .verdict-text-big, body[data-theme="aurora-bright"] .verdict-text-big { color: #1A0F1F !important; } body[data-theme="studio-light"] .verdict-sub, body[data-theme="aurora-bright"] .verdict-sub { color: #4A3055 !important; } /* Reels prediction-disclaimer op licht thema */ body[data-theme="studio-light"] .prediction-disclaimer-reels, body[data-theme="aurora-bright"] .prediction-disclaimer-reels, body[data-theme="studio-light"] .cta-source, body[data-theme="aurora-bright"] .cta-source { color: #6B5670 !important; } /* Reels deluxe-card features (witte text was niet leesbaar) */ body[data-theme="studio-light"] .deluxe-name, body[data-theme="aurora-bright"] .deluxe-name, body[data-theme="studio-light"] .deluxe-amount .amount, body[data-theme="aurora-bright"] .deluxe-amount .amount { color: #1A0F1F !important; } body[data-theme="studio-light"] .deluxe-meta, body[data-theme="aurora-bright"] .deluxe-meta { color: #6B5670 !important; } body[data-theme="studio-light"] .deluxe-features li, body[data-theme="aurora-bright"] .deluxe-features li { color: #2A1730 !important; } body[data-theme="studio-light"] .deluxe-amount .strike, body[data-theme="aurora-bright"] .deluxe-amount .strike { color: #998A9F !important; } /* Reels score-suffix + wrapped-eyebrow op licht thema */ body[data-theme="studio-light"] .score-suffix, body[data-theme="aurora-bright"] .score-suffix, body[data-theme="studio-light"] .wrapped-eyebrow, body[data-theme="aurora-bright"] .wrapped-eyebrow { color: #6B5670 !important; } body[data-theme="studio-light"] .score-display, body[data-theme="aurora-bright"] .score-display { color: #1A0F1F !important; } /* Reels swipe-hint */ body[data-theme="studio-light"] .swipe-hint, body[data-theme="aurora-bright"] .swipe-hint { color: #6B5670 !important; } @media (max-width: 480px) { .theme-switcher { bottom: max(12px, env(safe-area-inset-bottom)); right: 12px; padding: 8px; border-radius: 14px; max-width: 200px; } .ts-swatch { width: 28px; height: 28px; } .ts-name { font-size: 12px; } .ts-meta { font-size: 10px; } } /* Lift switcher above sticky CTA-bar on Arena result-screen */ body:has(.result-cta-bar.is-visible) .theme-switcher { bottom: 96px; } @media (max-width: 480px) { body:has(.result-cta-bar.is-visible) .theme-switcher { bottom: max(96px, calc(env(safe-area-inset-bottom) + 80px)); } } /* Hide theme-switcher tijdens quiz zodat het de sticky bottom-nav niet overlapt */ body.is-quiz-active .theme-switcher { display: none !important; }