/* Legacy light-theme overrides, moved out of app/globals.css (design spec DS-0b). Loaded only when the light theme is on: app/layout.tsx's bootstrap injects it before first paint and lib/theme.tsx loads it before switching to light. Rules keep their original order. Do not add rules here; this file only shrinks (scripts/design/legacy-light-prune.mjs) until it is deleted. */ /* ── Light Theme ── */ html[data-theme="light"] { --brand-primary: #7C3AED; } /* Light mode: clean light-purple */ html[data-theme="light"] .homepage-shell.bg-slate-950 { background-color: transparent !important; } html[data-theme="light"] .homepage-shell .text-slate-100 { color: var(--theme-text); } /* Default "gameshow" text in light mode — animated multi-color (MUST come before host-specific so hosts win cascade) */ html[data-theme="light"] .homepage-shell .from-emerald-300.via-cyan-300.to-sky-400 { background-image: linear-gradient(90deg, #7C3AED, #EC4899, #F59E0B, #0EA5E9, #7C3AED) !important; background-size: 300% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; } /* ── Host-energy gradient (light mode — deeper saturation, AFTER default so these win) ── */ html[data-theme="light"] [data-active-host="diego"] .from-emerald-300.via-cyan-300.to-sky-400 { background-image: linear-gradient(90deg, #ea580c, #dc2626, #d97706, #ea580c) !important; } html[data-theme="light"] [data-active-host="jasper"] .from-emerald-300.via-cyan-300.to-sky-400 { background-image: linear-gradient(90deg, #0284c7, #0891b2, #6366f1, #0284c7) !important; } html[data-theme="light"] [data-active-host="luna"] .from-emerald-300.via-cyan-300.to-sky-400 { background-image: linear-gradient(90deg, #7c3aed, #9333ea, #c026d3, #7c3aed) !important; } html[data-theme="light"] [data-active-host="blaze"] .from-emerald-300.via-cyan-300.to-sky-400 { background-image: linear-gradient(90deg, #d97706, #ea580c, #dc2626, #d97706) !important; } html[data-theme="light"] [data-active-host="raj"] .from-emerald-300.via-cyan-300.to-sky-400 { background-image: linear-gradient(90deg, #ea580c, #c2410c, #d97706, #ea580c) !important; } html[data-theme="light"] [data-active-host="priya"] .from-emerald-300.via-cyan-300.to-sky-400 { background-image: linear-gradient(90deg, #db2777, #be185d, #a21caf, #db2777) !important; } html[data-theme="light"] [data-active-host="sofia"] .from-emerald-300.via-cyan-300.to-sky-400 { background-image: linear-gradient(90deg, #e11d48, #be123c, #0d9488, #e11d48) !important; } /* ── Hero headline in light mode — bold and impactful ── */ html[data-theme="light"] .homepage-shell .hero-headline { letter-spacing: -0.04em; } html[data-theme="light"] .homepage-shell .hero-headline .text-white { color: #0f0a1e !important; } html[data-theme="light"] .homepage-shell .hero-subtitle { color: #64607a !important; font-weight: 450; letter-spacing: 0.01em; } /* "gameshow" gradient text → vivid violet-to-fuchsia in light mode */ html[data-theme="light"] .homepage-shell h1 .from-emerald-300.via-cyan-300.to-sky-400 { background-image: linear-gradient(135deg, #7C3AED 0%, #c026d3 40%, #e879f9 70%, #7C3AED 100%) !important; background-size: 200% 100%; animation: shimmer-gradient 4s ease-in-out infinite; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: none; } /* ── Hide dark-mode visual effects in light mode ── */ html[data-theme="light"] .homepage-shell header::before { display: none; } html[data-theme="light"] .homepage-shell header canvas { opacity: 0 !important; display: none !important; } html[data-theme="light"] .homepage-shell [data-telemetry-overlay] { display: none; } /* Homepage orbs hidden in light mode — page bg handles the ambient feel */ html[data-theme="light"] .homepage-orbs { display: none !important; } /* ── Homepage light mode — text color overrides ── */ html[data-theme="light"] .homepage-shell .text-white { color: #1A1A2E !important; } html[data-theme="light"] .homepage-shell .text-slate-100 { color: #1e293b; } html[data-theme="light"] .homepage-shell .text-slate-200 { color: #334155; } html[data-theme="light"] .homepage-shell .text-slate-300 { color: #475569; } html[data-theme="light"] .homepage-shell .text-slate-400 { color: #64748b; } html[data-theme="light"] .homepage-shell .text-slate-500 { color: #6b7280; } /* ── Homepage light mode — background overrides (frosted glass palette) ── */ html[data-theme="light"] .homepage-shell .bg-slate-950:not(.avatar-circle-dark) { background-color: #F0EAFF; } html[data-theme="light"] .homepage-shell .bg-slate-900:not(.avatar-circle-dark) { background-color: rgba(255, 255, 255, 0.85); } html[data-theme="light"] .homepage-shell .bg-slate-800 { background-color: rgba(245, 240, 255, 0.6); } html[data-theme="light"] .homepage-shell .bg-slate-950\/60 { background-color: rgba(255, 255, 255, 0.72); } html[data-theme="light"] .homepage-shell .bg-slate-950\/75 { background-color: rgba(255, 255, 255, 0.85); } html[data-theme="light"] .homepage-shell .bg-slate-950\/80 { background-color: rgba(255, 255, 255, 0.88); } html[data-theme="light"] .homepage-shell .bg-slate-950\/95 { background-color: rgba(255, 255, 255, 0.96); } html[data-theme="light"] .homepage-shell .bg-slate-900\/50 { background-color: rgba(255, 255, 255, 0.6); } html[data-theme="light"] .homepage-shell .bg-slate-900\/60 { background-color: rgba(255, 255, 255, 0.7); } html[data-theme="light"] .homepage-shell .bg-slate-800\/60 { background-color: rgba(245, 240, 255, 0.5); } html[data-theme="light"] .homepage-shell .bg-slate-800\/80 { background-color: rgba(245, 240, 255, 0.7); } html[data-theme="light"] .homepage-shell .bg-white\/5 { background-color: rgba(124, 58, 237, 0.03); } html[data-theme="light"] .homepage-shell .bg-white\/\[0\.02\] { background-color: rgba(124, 58, 237, 0.015); } html[data-theme="light"] .homepage-shell .bg-white\/\[0\.03\] { background-color: rgba(124, 58, 237, 0.02); } html[data-theme="light"] .homepage-shell .bg-white\/\[0\.05\] { background-color: rgba(124, 58, 237, 0.03); } html[data-theme="light"] .homepage-shell .bg-white\/\[0\.06\] { background-color: rgba(124, 58, 237, 0.035); } html[data-theme="light"] .homepage-shell .bg-white\/\[0\.08\] { background-color: rgba(124, 58, 237, 0.04); } html[data-theme="light"] .homepage-shell .bg-\[\#050816\]:not(.avatar-circle-dark) { background-color: #F0EAFF !important; } html[data-theme="light"] .homepage-shell .bg-black\/60 { background-color: rgba(15, 10, 30, 0.45); } /* ── Homepage light mode — border overrides (violet-tinted) ── */ html[data-theme="light"] .homepage-shell .border-white\/5 { border-color: rgba(124, 58, 237, 0.06); } html[data-theme="light"] .homepage-shell .border-white\/8 { border-color: rgba(124, 58, 237, 0.07); } html[data-theme="light"] .homepage-shell .border-white\/10 { border-color: rgba(124, 58, 237, 0.09); } html[data-theme="light"] .homepage-shell .border-white\/15 { border-color: rgba(124, 58, 237, 0.12); } html[data-theme="light"] .homepage-shell .border-white\/20 { border-color: rgba(124, 58, 237, 0.15); } html[data-theme="light"] .homepage-shell .border-white\/\[0\.06\] { border-color: rgba(124, 58, 237, 0.07); } html[data-theme="light"] .homepage-shell .border-white\/\[0\.08\] { border-color: rgba(124, 58, 237, 0.09); } html[data-theme="light"] .homepage-shell .border-slate-700\/60 { border-color: rgba(124, 58, 237, 0.1); } /* ── Homepage light mode — accent colors (emerald/cyan/sky → violet) ── */ html[data-theme="light"] .homepage-shell .text-emerald-400 { color: #7C3AED; } html[data-theme="light"] .homepage-shell .text-emerald-300 { color: #7C3AED; } html[data-theme="light"] .homepage-shell .text-emerald-200 { color: #7C3AED; } html[data-theme="light"] .homepage-shell .text-emerald-100 { color: #7C3AED; } html[data-theme="light"] .homepage-shell .text-sky-400 { color: #7C3AED; } html[data-theme="light"] .homepage-shell .text-sky-300 { color: #8b5cf6; } html[data-theme="light"] .homepage-shell .text-sky-100 { color: #6D28D9; } html[data-theme="light"] .homepage-shell .text-cyan-400 { color: #7C3AED; } html[data-theme="light"] .homepage-shell .text-cyan-300 { color: #8b5cf6; } html[data-theme="light"] .homepage-shell .border-emerald-400\/30 { border-color: rgba(124, 58, 237, 0.25); } html[data-theme="light"] .homepage-shell .border-emerald-400\/40 { border-color: rgba(124, 58, 237, 0.3); } html[data-theme="light"] .homepage-shell .border-emerald-400\/60 { border-color: rgba(124, 58, 237, 0.35); } html[data-theme="light"] .homepage-shell .bg-emerald-500\/10 { background-color: rgba(124, 58, 237, 0.06); } html[data-theme="light"] .homepage-shell .bg-emerald-500\/20 { background-color: rgba(124, 58, 237, 0.08); } html[data-theme="light"] .homepage-shell .ring-emerald-400\/50 { --tw-ring-color: rgba(124, 58, 237, 0.25); } html[data-theme="light"] .homepage-shell .ring-white\/10 { --tw-ring-color: rgba(0, 0, 0, 0.06); } html[data-theme="light"] .homepage-shell .border-sky-400 { border-color: #7C3AED; } html[data-theme="light"] .homepage-shell .border-emerald-400 { border-color: #7C3AED; } /* ── CTA buttons → violet with white text ── */ html[data-theme="light"] .homepage-shell .bg-emerald-400 { background-color: #7C3AED !important; color: #ffffff !important; } html[data-theme="light"] .homepage-shell .bg-emerald-400:hover { background-color: #6D28D9 !important; } /* text-slate-950 stays dark by default — only white on colored buttons (handled by color: #fff on .bg-emerald-400 etc.) */ html[data-theme="light"] .homepage-shell .bg-emerald-400.text-slate-950, html[data-theme="light"] .homepage-shell .bg-emerald-400 .text-slate-950, html[data-theme="light"] .homepage-shell .bg-sky-500.text-slate-950, html[data-theme="light"] .homepage-shell .bg-sky-500 .text-slate-950, html[data-theme="light"] .homepage-shell [class*="from-sky-500"].text-slate-950, html[data-theme="light"] .homepage-shell [class*="from-sky-500"] .text-slate-950 { color: #ffffff !important; } html[data-theme="light"] .homepage-shell .shadow-emerald-500\/25 { box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.2); } html[data-theme="light"] .homepage-shell .from-emerald-500.to-cyan-500 { background-image: linear-gradient(to right, #7C3AED, #6D28D9) !important; } html[data-theme="light"] .homepage-shell .bg-gradient-to-r.from-emerald-500.to-cyan-500 { background: linear-gradient(to right, #7C3AED, #6D28D9) !important; } /* Green pulse dot stays green */ html[data-theme="light"] .homepage-shell .bg-green-400 { background-color: #22c55e !important; } /* ── Hero input box — premium elevated glass ── */ html[data-theme="light"] .homepage-shell [data-hero-input] { background: rgba(255, 255, 255, 0.95) !important; -webkit-backdrop-filter: blur(20px) saturate(1.3) !important; backdrop-filter: blur(20px) saturate(1.3) !important; border-color: rgba(124, 58, 237, 0.12) !important; border-width: 1.5px !important; border-radius: 28px !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 6px rgba(124, 58, 237, 0.04), 0 12px 32px -8px rgba(124, 58, 237, 0.10), 0 28px 60px -20px rgba(124, 58, 237, 0.12) !important; } html[data-theme="light"] .homepage-shell [data-hero-input]:focus-within { border-color: rgba(124, 58, 237, 0.4) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 0 0 4px rgba(124, 58, 237, 0.06), 0 8px 24px -8px rgba(124, 58, 237, 0.1), 0 32px 64px -16px rgba(124, 58, 237, 0.14) !important; } /* Override inline emerald glow on focused input container */ html[data-theme="light"] .homepage-shell .border-emerald-400\/60 { border-color: rgba(124, 58, 237, 0.4) !important; } html[data-theme="light"] .homepage-shell .ring-emerald-400\/20 { --tw-ring-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .homepage-shell .shadow-\[0_0_60px_-10px_rgba\(52\,211\,153\,0\.35\)\,0_0_100px_-20px_rgba\(34\,211\,238\,0\.2\)\] { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 0 60px -10px rgba(124, 58, 237, 0.15), 0 0 100px -20px rgba(124, 58, 237, 0.1) !important; } /* Blinking cursor → violet with glow */ html[data-theme="light"] .homepage-shell .bg-emerald-400.animate-\[blink_1s_step-end_infinite\] { background-color: #7C3AED !important; box-shadow: 0 0 12px rgba(124, 58, 237, 0.5) !important; } /* Spark icon active state → violet glow */ html[data-theme="light"] .homepage-shell .from-emerald-500\/25 { --tw-gradient-from: rgba(124, 58, 237, 0.15) !important; } html[data-theme="light"] .homepage-shell .to-cyan-500\/25 { --tw-gradient-to: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .homepage-shell [data-hero-input] input { color: #1A1A2E !important; } html[data-theme="light"] .homepage-shell [data-hero-input] input::placeholder { color: #9494AB !important; } html[data-theme="light"] .homepage-shell [data-hero-input] .text-emerald-300 { color: #7C3AED !important; } html[data-theme="light"] .homepage-shell [data-hero-input] .text-slate-500 svg { color: rgba(124, 58, 237, 0.35); } html[data-theme="light"] .homepage-shell [data-hero-input] .bg-emerald-400 { background-color: #7C3AED !important; } /* Generate button → violet */ html[data-theme="light"] .homepage-shell [data-hero-input] .from-emerald-500.to-cyan-500 { background-image: linear-gradient(135deg, #7C3AED 0%, #6D28D9 50%, #7C3AED 100%) !important; background-size: 200% 100%; color: #ffffff !important; } html[data-theme="light"] .homepage-shell [data-hero-input] .from-emerald-500.to-cyan-500:hover { background-position: 100% 0; box-shadow: 0 6px 28px -4px rgba(124, 58, 237, 0.5) !important; transform: translateY(-1px); } /* Inactive generate button */ html[data-theme="light"] .homepage-shell [data-hero-input] button.bg-white\/\[0\.08\] { background: linear-gradient(to right, rgba(124, 58, 237, 0.15), rgba(109, 40, 217, 0.12)) !important; color: rgba(124, 58, 237, 0.6) !important; border: 1px solid rgba(124, 58, 237, 0.18); border-radius: 0.75rem; } /* Quick example chips */ html[data-theme="light"] .homepage-shell [data-hero-input] .border-white\/\[0\.06\] { border-color: rgba(124, 58, 237, 0.08) !important; background: rgba(124, 58, 237, 0.02) !important; } html[data-theme="light"] .homepage-shell [data-hero-input] .hover\:border-emerald-400\/30:hover { border-color: rgba(124, 58, 237, 0.25) !important; } html[data-theme="light"] .homepage-shell [data-hero-input] .hover\:text-emerald-300:hover { color: #7C3AED !important; } html[data-theme="light"] .homepage-shell [data-hero-input] .border-white\/\[0\.05\] { border-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .homepage-shell [data-hero-generate-button], html[data-theme="light"] .homepage-shell [data-hero-generate-button] * { color: #ffffff !important; } /* ── Use case cards — premium elevated glass with depth ── */ html[data-theme="light"] .homepage-shell .use-case-card { border: 1px solid rgba(124, 58, 237, 0.10) !important; background: rgba(255, 255, 255, 0.88) !important; -webkit-backdrop-filter: blur(16px) saturate(1.2) !important; backdrop-filter: blur(16px) saturate(1.2) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 6px rgba(124, 58, 237, 0.05), 0 8px 24px -8px rgba(124, 58, 237, 0.08) !important; border-radius: 1.25rem !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } html[data-theme="light"] .homepage-shell .use-case-card:hover { transform: translateY(-3px); border-color: rgba(124, 58, 237, 0.22) !important; background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 20px -4px rgba(124, 58, 237, 0.12), 0 20px 48px -12px rgba(124, 58, 237, 0.10) !important; } /* Use case card text labels — ensure readable in light mode */ html[data-theme="light"] .homepage-shell .use-case-card .text-slate-300 { color: #1e293b !important; } html[data-theme="light"] .homepage-shell .use-case-card .text-slate-500 { color: #64748b !important; } html[data-theme="light"] .homepage-shell .use-case-card .text-emerald-200 { color: #7C3AED !important; } /* Use case section label */ html[data-theme="light"] .homepage-shell .use-case-label { color: #8b5cf6 !important; letter-spacing: 0.22em; } /* Host energy ring colors — visible in light mode */ html[data-theme="light"] .homepage-shell .use-case-card .ring-amber-400\/50 { --tw-ring-color: rgba(245, 158, 11, 0.45) !important; } html[data-theme="light"] .homepage-shell .use-case-card .ring-violet-400\/50 { --tw-ring-color: rgba(167, 139, 250, 0.50) !important; } html[data-theme="light"] .homepage-shell .use-case-card .ring-emerald-400\/50 { --tw-ring-color: rgba(52, 211, 153, 0.45) !important; } html[data-theme="light"] .homepage-shell .use-case-card .ring-pink-400\/50 { --tw-ring-color: rgba(244, 114, 182, 0.45) !important; } html[data-theme="light"] .homepage-shell .use-case-card .ring-orange-400\/50 { --tw-ring-color: rgba(251, 146, 60, 0.45) !important; } html[data-theme="light"] .homepage-shell .use-case-card .ring-sky-400\/50 { --tw-ring-color: rgba(56, 189, 248, 0.45) !important; } /* Host energy hover borders */ html[data-theme="light"] .homepage-shell .use-case-card.hover\:border-amber-400\/30:hover { border-color: rgba(245, 158, 11, 0.25) !important; } html[data-theme="light"] .homepage-shell .use-case-card.hover\:border-violet-400\/30:hover { border-color: rgba(167, 139, 250, 0.30) !important; } html[data-theme="light"] .homepage-shell .use-case-card.hover\:border-emerald-400\/30:hover { border-color: rgba(52, 211, 153, 0.25) !important; } html[data-theme="light"] .homepage-shell .use-case-card.hover\:border-pink-400\/30:hover { border-color: rgba(244, 114, 182, 0.25) !important; } html[data-theme="light"] .homepage-shell .use-case-card.hover\:border-orange-400\/30:hover { border-color: rgba(251, 146, 60, 0.25) !important; } html[data-theme="light"] .homepage-shell .use-case-card.hover\:border-sky-400\/30:hover { border-color: rgba(56, 189, 248, 0.25) !important; } /* Use case section label */ html[data-theme="light"] .homepage-shell .use-case-card.border-emerald-400\/40 { background: linear-gradient(135deg, rgba(124, 58, 237, 0.04), rgba(236, 72, 153, 0.02)) !important; border-color: rgba(124, 58, 237, 0.25) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 0 0 1px rgba(124, 58, 237, 0.06), 0 8px 24px -6px rgba(124, 58, 237, 0.14), 0 0 48px -12px rgba(124, 58, 237, 0.08) !important; } /* Active use case pill glow */ html[data-theme="light"] .homepage-shell .shadow-\[0_0_20px_rgba\(52\,211\,153\,0\.1\)\] { box-shadow: 0 0 24px rgba(124, 58, 237, 0.1) !important; } /* ── Frosted Live Preview Card — showpiece ── */ html[data-theme="light"] .homepage-shell [data-hero-preview] { background: rgba(255, 255, 255, 0.88) !important; -webkit-backdrop-filter: blur(24px) saturate(1.3) !important; backdrop-filter: blur(24px) saturate(1.3) !important; border: 1px solid rgba(124, 58, 237, 0.12) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 12px -4px rgba(124, 58, 237, 0.06), 0 16px 40px -12px rgba(124, 58, 237, 0.1), 0 32px 80px -24px rgba(124, 58, 237, 0.08) !important; border-radius: 1.25rem !important; } /* "No signup required" badge — premium violet pill */ html[data-theme="light"] .homepage-shell .border-emerald-400\/30.bg-emerald-500\/20 { background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(236, 72, 153, 0.06)) !important; border-color: rgba(124, 58, 237, 0.2) !important; color: #6D28D9 !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; } html[data-theme="light"] .homepage-shell .text-emerald-100 { color: #6D28D9 !important; } /* Live preview card glow → deep violet */ html[data-theme="light"] .homepage-shell [data-hero-preview] .text-white { color: #1e293b !important; } html[data-theme="light"] .homepage-shell [data-hero-preview] .text-slate-300 { color: #475569 !important; } html[data-theme="light"] .homepage-shell [data-hero-preview] .text-slate-400 { color: #64748b !important; } html[data-theme="light"] .homepage-shell [data-hero-preview] .border-white\/10 { border-color: rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] .homepage-shell [data-hero-preview] .bg-white\/5 { background-color: rgba(0, 0, 0, 0.03) !important; } html[data-theme="light"] .homepage-shell [data-hero-preview] .bg-white\/\[0\.02\] { background-color: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.02); } html[data-theme="light"] .homepage-shell [data-hero-preview] .text-\[\#00E5FF\] { color: #7C3AED !important; font-weight: 700; } /* ── Hover state overrides — violet-accented ── */ html[data-theme="light"] .homepage-shell .hover\:bg-white\/5:hover { background-color: rgba(124, 58, 237, 0.04); } html[data-theme="light"] .homepage-shell .hover\:bg-white\/10:hover { background-color: rgba(124, 58, 237, 0.06); } html[data-theme="light"] .homepage-shell .hover\:text-white:hover { color: #0f0a1e; } html[data-theme="light"] .homepage-shell .hover\:border-white\/20:hover { border-color: rgba(124, 58, 237, 0.2); } /* ── Card glass effects — layered depth ── */ html[data-theme="light"] .homepage-shell [class*="backdrop-blur"] { background-color: rgba(255, 255, 255, 0.78); border-color: rgba(124, 58, 237, 0.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; } html[data-theme="light"] .homepage-shell .shadow-lg { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 4px 12px -4px rgba(124, 58, 237, 0.08), 0 16px 40px -16px rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .homepage-shell .avatar-circle-dark .hero-reaction-bubble { background: rgba(10, 12, 20, 0.9) !important; border-color: rgba(255, 255, 255, 0.26) !important; box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important; } html[data-theme="light"] .homepage-shell .avatar-circle-dark .bg-black\/60 { background-color: rgba(5, 8, 18, 0.68) !important; } html[data-theme="light"] .homepage-shell .avatar-circle-dark .text-white { color: #ffffff !important; } html[data-theme="light"] .homepage-shell .avatar-circle-dark .text-white\/70 { color: rgba(255, 255, 255, 0.72) !important; } html[data-theme="light"] .homepage-shell .avatar-circle-dark .text-emerald-300 { color: #6ee7b7 !important; } html[data-theme="light"] .homepage-shell .avatar-circle-dark .text-emerald-200 { color: #a7f3d0 !important; } html[data-theme="light"] .homepage-shell .shadow-xl { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 24px -8px rgba(124, 58, 237, 0.1), 0 24px 56px -16px rgba(124, 58, 237, 0.12) !important; } /* Host speech bubble — warm elevated glass */ html[data-theme="light"] .homepage-shell .shadow-inner { box-shadow: inset 0 1px 3px rgba(124, 58, 237, 0.05), 0 4px 12px -4px rgba(124, 58, 237, 0.06) !important; background: rgba(255, 255, 255, 0.75) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; } /* Host avatar gradient ring — vivid glow */ html[data-theme="light"] .homepage-shell .shadow-\[0_0_24px_rgba\(0\,0\,0\,0\.4\)\] { box-shadow: 0 4px 24px -4px rgba(124, 58, 237, 0.25) !important; } /* ── Gradient card backgrounds ── */ html[data-theme="light"] .homepage-shell .from-slate-900 { --tw-gradient-from: #ffffff; } html[data-theme="light"] .homepage-shell .to-slate-950 { --tw-gradient-to: #f8fafc; } html[data-theme="light"] .homepage-shell .from-slate-950 { --tw-gradient-from: #F0EAFF; } /* Sky/cyan gradient stops → violet in light mode */ html[data-theme="light"] .homepage-shell .from-sky-500\/10 { --tw-gradient-from: rgba(124, 58, 237, 0.06); } html[data-theme="light"] .homepage-shell .from-sky-500\/20 { --tw-gradient-from: rgba(124, 58, 237, 0.08); } html[data-theme="light"] .homepage-shell .from-sky-900\/50 { --tw-gradient-from: rgba(124, 58, 237, 0.06); } html[data-theme="light"] .homepage-shell .to-cyan-500\/10 { --tw-gradient-to: rgba(236, 72, 153, 0.04); } html[data-theme="light"] .homepage-shell .to-violet-900\/20 { --tw-gradient-to: rgba(124, 58, 237, 0.04); } html[data-theme="light"] .homepage-shell .from-emerald-500\/30 { --tw-gradient-from: rgba(124, 58, 237, 0.1); } /* Host avatar — disable mix-blend-lighten in light mode so avatars render normally on light bg */ html[data-theme="light"] .mix-blend-lighten { mix-blend-mode: normal !important; } /* BUT keep mix-blend-lighten INSIDE dark avatar circles — these need it to render PNG avatars */ html[data-theme="light"] .avatar-circle-dark > .mix-blend-lighten, html[data-theme="light"] .avatar-circle-dark .mix-blend-lighten, html[data-theme="light"] .homepage-shell .avatar-circle-dark .mix-blend-lighten, html[data-theme="light"] .avatar-circle-dark img[class*="mix-blend-lighten"], html[data-theme="light"] .avatar-circle-dark img.mix-blend-lighten { mix-blend-mode: lighten !important; } /* CRITICAL: isolate avatar circles so mix-blend-lighten composites against the dark bg, not the light page */ html[data-theme="light"] .avatar-circle-dark { isolation: isolate !important; } /* HowItWorks Avatar Sync — keep the same dark-circle treatment in light mode so PNG hosts stay visible */ html[data-theme="light"] .hiw-avatar { background: linear-gradient(135deg, #1a1035, #0f0a1e) !important; isolation: isolate !important; } html[data-theme="light"] .hiw-avatar .hiw-avatar-img, html[data-theme="light"] .hiw-avatar img.mix-blend-lighten, html[data-theme="light"] .hiw-avatar .mix-blend-lighten { mix-blend-mode: lighten !important; } html[data-theme="light"] .mix-blend-screen { mix-blend-mode: normal !important; } /* Host avatar containers — keep dark for avatar-circle-dark, light for everything else */ /* ── Inline dark gradient cards → premium glass in light ── */ html[data-theme="light"] .homepage-shell [class*="bg-[linear-gradient(180deg,rgba(15,23,42"] { background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,248,255,0.85)) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 16px 48px -12px rgba(124, 58, 237, 0.1) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; } html[data-theme="light"] .homepage-shell [class*="bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.08"] { background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,248,255,0.85)) !important; } html[data-theme="light"] .homepage-shell [class*="bg-[radial-gradient(circle_at_top,rgba(14,165,233"] { background: linear-gradient(180deg, rgba(124, 58, 237, 0.05), rgba(255,255,255,0.9)) !important; } html[data-theme="light"] .homepage-shell [class*="bg-[linear-gradient(180deg,rgba(8,13,30"] { background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,248,255,0.85)) !important; } html[data-theme="light"] .homepage-shell [class*="bg-[linear-gradient(180deg,rgba(6,11,28"] { background: linear-gradient(180deg, rgba(124, 58, 237, 0.04), rgba(255,255,255,0.9)) !important; } html[data-theme="light"] .homepage-shell [class*="bg-[radial-gradient(circle_at_top_right"] { background: radial-gradient(circle at top right, rgba(124, 58, 237, 0.07), transparent 60%) !important; } html[data-theme="light"] .homepage-shell .ring-offset-slate-900 { --tw-ring-offset-color: #ffffff; } /* ── Testimonials — glass cards ── */ html[data-theme="light"] .homepage-shell [class*="marquee"] .bg-white\/3, html[data-theme="light"] .homepage-shell [class*="marquee"] .bg-white\/4, html[data-theme="light"] .homepage-shell [class*="marquee"] .bg-white\/5 { background-color: rgba(255, 255, 255, 0.8); border-color: rgba(124, 58, 237, 0.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 4px 16px -4px rgba(124, 58, 237, 0.06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* ── Footer — full light mode override ── */ html[data-theme="light"] .homepage-shell footer { border-color: rgba(124, 58, 237, 0.06); } /* Footer card — replace dark gradient with premium light glass */ /* Footer brand pill */ html[data-theme="light"] .homepage-shell footer .bg-slate-950\/75 { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(124, 58, 237, 0.1) !important; box-shadow: 0 2px 8px -2px rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .homepage-shell footer .hover\:border-sky-400\/40:hover { border-color: rgba(124, 58, 237, 0.25) !important; } /* Footer text colors */ html[data-theme="light"] .homepage-shell footer .text-slate-300 { color: #4B5563 !important; } html[data-theme="light"] .homepage-shell footer .text-slate-400 { color: #6B7280 !important; } html[data-theme="light"] .homepage-shell footer .text-slate-500 { color: #9CA3AF !important; } html[data-theme="light"] .homepage-shell footer .text-slate-200 { color: #1F2937 !important; } html[data-theme="light"] .homepage-shell footer .hover\:text-white:hover { color: #7C3AED !important; } /* Footer borders */ html[data-theme="light"] .homepage-shell footer .border-white\/10 { border-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .homepage-shell footer .border-white\/5 { border-color: rgba(124, 58, 237, 0.05) !important; } /* Footer social icons */ html[data-theme="light"] .homepage-shell footer .bg-slate-950\/65 { background: rgba(124, 58, 237, 0.04) !important; border-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .homepage-shell footer .bg-slate-950\/65:hover { background: rgba(124, 58, 237, 0.08) !important; border-color: rgba(124, 58, 237, 0.2) !important; } /* Footer highlight buttons */ html[data-theme="light"] .homepage-shell footer .bg-white\/\[0\.04\] { background: rgba(124, 58, 237, 0.04) !important; border-color: rgba(124, 58, 237, 0.12) !important; color: #374151 !important; } html[data-theme="light"] .homepage-shell footer .bg-white\/\[0\.04\]:hover { background: rgba(124, 58, 237, 0.08) !important; border-color: rgba(124, 58, 237, 0.25) !important; color: #7C3AED !important; } /* Footer big shadow → violet */ /* Hero section — seamless, no block — blends into page bg */ html[data-theme="light"] .homepage-shell header { background: transparent !important; } /* Fade floating elements at bottom so hero blends seamlessly into content */ html[data-theme="light"] .hero-floating-elements { -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%); mask-image: linear-gradient(to bottom, black 60%, transparent 100%); } /* Hide dark-mode orbs entirely in light mode — they create the purple block */ html[data-theme="light"] .homepage-shell header .animate-pulse { display: none !important; } html[data-theme="light"] .homepage-shell .homepage-orbs { display: none !important; } /* Show light-mode ambient orbs */ /* Hero heading — premium gradient in light mode */ html[data-theme="light"] .homepage-shell .hero-headline { color: #0f0a1e !important; text-shadow: none; } /* ── Gameshow gradient text — premium animated shimmer in light mode ── */ html[data-theme="light"] .homepage-shell .hero-gradient-text { background-image: linear-gradient(135deg, #7C3AED 0%, #c026d3 35%, #e879f9 55%, #7C3AED 80%, #6D28D9 100%) !important; background-size: 250% 100%; animation: hero-shimmer 5s ease-in-out infinite; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 2px 12px rgba(124, 58, 237, 0.25)); } html[data-theme="light"] .hero-floating-elements { display: block; } html[data-theme="light"] .hero-input-idle { animation: input-glow-pulse-light 3s ease-in-out infinite; } /* ── Host energy color tints on use-case cards (light mode) ── */ html[data-theme="light"] .homepage-shell .use-case-card.use-case-raj { background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(245, 158, 11, 0.06)) !important; border-color: rgba(245, 158, 11, 0.15) !important; } html[data-theme="light"] .homepage-shell .use-case-card.use-case-raj:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 158, 11, 0.12)) !important; border-color: rgba(245, 158, 11, 0.30) !important; box-shadow: 0 8px 24px -8px rgba(245, 158, 11, 0.15), 0 0 0 1px rgba(245, 158, 11, 0.08) !important; } html[data-theme="light"] .homepage-shell .use-case-card.use-case-luna { background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(167, 139, 250, 0.08)) !important; border-color: rgba(167, 139, 250, 0.18) !important; } html[data-theme="light"] .homepage-shell .use-case-card.use-case-luna:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(167, 139, 250, 0.14)) !important; border-color: rgba(167, 139, 250, 0.35) !important; box-shadow: 0 8px 24px -8px rgba(167, 139, 250, 0.18), 0 0 0 1px rgba(167, 139, 250, 0.08) !important; } html[data-theme="light"] .homepage-shell .use-case-card.use-case-jasper { background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(52, 211, 153, 0.06)) !important; border-color: rgba(52, 211, 153, 0.15) !important; } html[data-theme="light"] .homepage-shell .use-case-card.use-case-jasper:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(52, 211, 153, 0.12)) !important; border-color: rgba(52, 211, 153, 0.30) !important; box-shadow: 0 8px 24px -8px rgba(52, 211, 153, 0.15), 0 0 0 1px rgba(52, 211, 153, 0.08) !important; } html[data-theme="light"] .homepage-shell .use-case-card.use-case-priya { background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(244, 114, 182, 0.06)) !important; border-color: rgba(244, 114, 182, 0.15) !important; } html[data-theme="light"] .homepage-shell .use-case-card.use-case-priya:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 114, 182, 0.12)) !important; border-color: rgba(244, 114, 182, 0.30) !important; box-shadow: 0 8px 24px -8px rgba(244, 114, 182, 0.15), 0 0 0 1px rgba(244, 114, 182, 0.08) !important; } html[data-theme="light"] .homepage-shell .use-case-card.use-case-blaze { background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(251, 146, 60, 0.07)) !important; border-color: rgba(251, 146, 60, 0.15) !important; } html[data-theme="light"] .homepage-shell .use-case-card.use-case-blaze:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(251, 146, 60, 0.13)) !important; border-color: rgba(251, 146, 60, 0.30) !important; box-shadow: 0 8px 24px -8px rgba(251, 146, 60, 0.15), 0 0 0 1px rgba(251, 146, 60, 0.08) !important; } html[data-theme="light"] .homepage-shell .use-case-card.use-case-sofia { background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(56, 189, 248, 0.07)) !important; border-color: rgba(56, 189, 248, 0.15) !important; } html[data-theme="light"] .homepage-shell .use-case-card.use-case-sofia:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(56, 189, 248, 0.13)) !important; border-color: rgba(56, 189, 248, 0.30) !important; box-shadow: 0 8px 24px -8px rgba(56, 189, 248, 0.15), 0 0 0 1px rgba(56, 189, 248, 0.08) !important; } html[data-theme="light"] .homepage-shell { background: linear-gradient(135deg, #F0EAFF 0%, #EDE5FF 25%, #F5F0FF 50%, #EBE3FD 75%, #F0EAFF 100%) !important; background-size: 400% 400% !important; animation: bg-shift 20s ease-in-out infinite; } /* Hero subtitle in light mode */ html[data-theme="light"] .homepage-shell .hero-subtitle { color: #6b7280 !important; } html[data-theme="light"] .homepage-shell .hero-subtitle .font-medium { color: #4b5563 !important; } /* Social proof line */ html[data-theme="light"] .homepage-shell .hero-social-proof { color: #4b5563 !important; background: rgba(255, 255, 255, 0.72) !important; border-color: rgba(124, 58, 237, 0.12) !important; } html[data-theme="light"] .homepage-shell .hero-social-proof .text-violet-400 { color: #8b5cf6 !important; } html[data-theme="light"] .homepage-shell .hero-social-proof .text-emerald-400 { color: #10b981 !important; } /* ── UserMenu light mode ── */ html[data-theme="light"] [data-testid="user-menu"] > button { border-color: rgba(124, 58, 237, 0.1) !important; background: rgba(124, 58, 237, 0.03) !important; } html[data-theme="light"] [data-testid="user-menu"] > button:hover { border-color: rgba(124, 58, 237, 0.25) !important; background: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] [data-testid="user-menu"] > button .text-slate-200 { color: #374151 !important; } html[data-theme="light"] [data-testid="user-menu"] > button .text-slate-400 { color: #6b7280 !important; } html[data-theme="light"] [data-testid="user-menu-dropdown"] { background: rgba(255, 255, 255, 0.98) !important; border-color: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0,0,0,0.04) !important; -webkit-backdrop-filter: blur(22px) saturate(1.15) !important; backdrop-filter: blur(22px) saturate(1.15) !important; isolation: isolate !important; z-index: 200 !important; } html[data-theme="light"] [data-testid="user-menu-dropdown"] .border-white\/10 { border-color: rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] [data-testid="user-menu-dropdown"] .text-slate-200 { color: #1f2937 !important; } html[data-theme="light"] [data-testid="user-menu-dropdown"] .text-slate-300 { color: #374151 !important; } html[data-theme="light"] [data-testid="user-menu-dropdown"] .text-slate-500 { color: #6b7280 !important; } html[data-theme="light"] [data-testid="user-menu-dropdown"] .text-sky-400 { color: #7c3aed !important; } html[data-theme="light"] [data-testid="user-menu-dropdown"] a:hover, html[data-theme="light"] [data-testid="user-menu-dropdown"] button:hover { background: rgba(124, 58, 237, 0.06) !important; color: #4c1d95 !important; } /* ── Global background overrides (warm violet-tinted palette) ── */ html[data-theme="light"] .bg-slate-950:not(.avatar-circle-dark) { background-color: #F0EAFF !important; } html[data-theme="light"] .bg-slate-950\/60 { background-color: rgba(250, 250, 255, 0.75) !important; } html[data-theme="light"] .bg-slate-950\/75 { background-color: rgba(250, 250, 255, 0.88) !important; } html[data-theme="light"] .bg-slate-950\/80 { background-color: rgba(250, 250, 255, 0.9) !important; } html[data-theme="light"] .bg-slate-950\/90 { background-color: rgba(250, 250, 255, 0.95) !important; } html[data-theme="light"] .bg-slate-950\/95 { background-color: rgba(250, 250, 255, 0.98) !important; } html[data-theme="light"] .bg-slate-900:not(.avatar-circle-dark) { background-color: rgba(255, 255, 255, 0.88) !important; } html[data-theme="light"] .bg-slate-900\/60:not(.avatar-circle-dark) { background-color: rgba(255, 255, 255, 0.7) !important; } html[data-theme="light"] .bg-slate-900\/70:not(.avatar-circle-dark) { background-color: rgba(255, 255, 255, 0.8) !important; } html[data-theme="light"] .bg-slate-900\/80:not(.avatar-circle-dark) { background-color: rgba(255, 255, 255, 0.88) !important; } html[data-theme="light"] .bg-slate-900\/90:not(.avatar-circle-dark) { background-color: rgba(255, 255, 255, 0.95) !important; } html[data-theme="light"] .bg-slate-800 { background-color: rgba(245, 240, 255, 0.6) !important; } html[data-theme="light"] .bg-slate-800\/60 { background-color: rgba(245, 240, 255, 0.5) !important; } html[data-theme="light"] .bg-slate-800\/80 { background-color: rgba(245, 240, 255, 0.7) !important; } html[data-theme="light"] .bg-slate-700 { background-color: rgba(235, 228, 255, 0.5) !important; } html[data-theme="light"] .bg-\[\#020617\] { background-color: #F0EAFF !important; } html[data-theme="light"] .bg-\[\#050816\]:not(.avatar-circle-dark) { background-color: #F0EAFF !important; } html[data-theme="light"] .bg-\[\#071324\] { background-color: rgba(245, 240, 255, 0.6) !important; } html[data-theme="light"] .bg-\[\#091129\] { background-color: rgba(245, 240, 255, 0.5) !important; } html[data-theme="light"] .bg-\[\#0b1b36\]:not(.avatar-circle-dark) { background-color: rgba(245, 240, 255, 0.5) !important; } html[data-theme="light"] .bg-\[\#0B0F19\]\/80 { background-color: rgba(250, 250, 255, 0.85) !important; } html[data-theme="light"] .bg-\[\#0B0F19\] { background-color: #F0EAFF !important; } html[data-theme="light"] .bg-white\/5 { background-color: rgba(124, 58, 237, 0.03) !important; } html[data-theme="light"] .bg-white\/\[0\.02\] { background-color: rgba(124, 58, 237, 0.015) !important; } html[data-theme="light"] .bg-white\/\[0\.03\] { background-color: rgba(124, 58, 237, 0.02) !important; } html[data-theme="light"] .bg-white\/\[0\.04\] { background-color: rgba(124, 58, 237, 0.025) !important; } html[data-theme="light"] .bg-white\/\[0\.05\] { background-color: rgba(124, 58, 237, 0.03) !important; } html[data-theme="light"] .bg-white\/\[0\.06\] { background-color: rgba(124, 58, 237, 0.035) !important; } html[data-theme="light"] .bg-white\/\[0\.08\] { background-color: rgba(124, 58, 237, 0.04) !important; } html[data-theme="light"] .bg-white\/10 { background-color: rgba(124, 58, 237, 0.05) !important; } html[data-theme="light"] .bg-white\/20 { background-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .bg-slate-900\/50 { background-color: rgba(255, 255, 255, 0.6) !important; } html[data-theme="light"] .bg-slate-950\/40 { background-color: rgba(250, 250, 255, 0.5) !important; } html[data-theme="light"] .bg-slate-950\/50 { background-color: rgba(250, 250, 255, 0.6) !important; } html[data-theme="light"] .bg-slate-950\/65 { background-color: rgba(250, 250, 255, 0.75) !important; } html[data-theme="light"] .bg-slate-900\/80 { background-color: rgba(255, 255, 255, 0.88) !important; } /* ── Global: ALL inline dark gradient backgrounds → light ── */ html[data-theme="light"] [class*="bg-[linear-gradient"][class*="rgba(2,6,23"] { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(250,248,255,0.95)) !important; } html[data-theme="light"] [class*="bg-[linear-gradient"][class*="rgba(15,23,42"] { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(250,248,255,0.95)) !important; } html[data-theme="light"] [class*="bg-[linear-gradient"][class*="rgba(8,13,30"] { background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(250,248,255,0.92)) !important; } html[data-theme="light"] [class*="bg-[linear-gradient"][class*="rgba(3,7,18"] { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,248,255,0.92)) !important; } html[data-theme="light"] [class*="bg-[linear-gradient"][class*="rgba(6,11,28"] { background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(250,248,255,0.92)) !important; } html[data-theme="light"] [class*="bg-[linear-gradient"][class*="rgba(8,47,73"] { background: linear-gradient(135deg, rgba(124,58,237,0.04), rgba(255,255,255,0.92)) !important; } html[data-theme="light"] [class*="bg-[linear-gradient"][class*="rgba(9,14,26"] { background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(250,248,255,0.9)) !important; } html[data-theme="light"] [class*="bg-[linear-gradient"][class*="rgba(20,30,40"] { background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(250,248,255,0.9)) !important; } html[data-theme="light"] [class*="bg-[linear-gradient"][class*="rgba(30,20,50"] { background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,245,255,0.9)) !important; } html[data-theme="light"] [class*="bg-[linear-gradient"][class*="rgba(76,29,149"] { background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(255,255,255,0.92)) !important; } html[data-theme="light"] [class*="bg-[linear-gradient"][class*="rgba(120,53,15"] { background: linear-gradient(180deg, rgba(217,119,6,0.06), rgba(255,255,255,0.95)) !important; } html[data-theme="light"] [class*="bg-[radial-gradient"][class*="rgba(14,165,233"] { background: radial-gradient(circle at top, rgba(124,58,237,0.06), transparent 40%) !important; } html[data-theme="light"] [class*="bg-[radial-gradient(circle_at_top_left"] { background: radial-gradient(circle at top left, rgba(124,58,237,0.06), transparent 38%) !important; } html[data-theme="light"] [class*="bg-[radial-gradient(circle_at_top_right"] { background: radial-gradient(circle at top right, rgba(124,58,237,0.05), transparent 60%) !important; } /* Combined radial+linear gradients (host spotlight, starter packs) */ html[data-theme="light"] [class*="bg-[radial-gradient(circle_at_top,rgba(255,255,255"] { background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,248,255,0.94)) !important; } html[data-theme="light"] [class*="bg-[radial-gradient(circle_at_top,rgba(14,165,233,0.12)"] { background: radial-gradient(circle at top, rgba(124,58,237,0.06), transparent 40%), linear-gradient(180deg, rgba(255,255,255,0.94), rgba(250,248,255,0.92)) !important; } /* Catch inline gradients with hex dark colors */ html[data-theme="light"] [class*="bg-["][class*="#020617"] { background: linear-gradient(180deg, #EDE5FF 0%, #FAFAFF 50%, #EDE5FF 100%) !important; } html[data-theme="light"] [class*="bg-["][class*="#0f172a"] { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,248,255,0.9)) !important; } html[data-theme="light"] [class*="bg-["][class*="#0B0F19"] { background: linear-gradient(180deg, #FAFAFF, #EDE5FF) !important; } /* Dark shadows on host/starter containers → soft violet */ html[data-theme="light"] [class*="shadow-[0_30px_120px"] { box-shadow: 0 30px 120px -60px rgba(124,58,237,0.08) !important; } html[data-theme="light"] [class*="shadow-[0_24px_80px"] { box-shadow: 0 24px 80px -55px rgba(124,58,237,0.08) !important; } html[data-theme="light"] [class*="shadow-[0_32px_90px"] { box-shadow: 0 32px 90px -60px rgba(124,58,237,0.08) !important; } html[data-theme="light"] [class*="shadow-[0_22px_60px"] { box-shadow: 0 22px 60px -40px rgba(124,58,237,0.06) !important; } /* ── Global: dark color-coded bg overrides — only inside avatar circles ── */ html[data-theme="light"] .avatar-circle-dark .bg-\[\#0b1b36\], html[data-theme="light"] .avatar-circle-dark.bg-\[\#0b1b36\] { background-color: #0b1b36 !important; } html[data-theme="light"] .avatar-circle-dark .bg-\[\#33140a\], html[data-theme="light"] .avatar-circle-dark.bg-\[\#33140a\] { background-color: #33140a !important; } html[data-theme="light"] .avatar-circle-dark .bg-\[\#33111b\], html[data-theme="light"] .avatar-circle-dark.bg-\[\#33111b\] { background-color: #33111b !important; } html[data-theme="light"] .avatar-circle-dark .bg-\[\#2d1b11\], html[data-theme="light"] .avatar-circle-dark.bg-\[\#2d1b11\] { background-color: #2d1b11 !important; } html[data-theme="light"] .avatar-circle-dark .bg-\[\#2d111c\], html[data-theme="light"] .avatar-circle-dark.bg-\[\#2d111c\] { background-color: #2d111c !important; } html[data-theme="light"] .avatar-circle-dark .bg-\[\#2b1b0b\], html[data-theme="light"] .avatar-circle-dark.bg-\[\#2b1b0b\] { background-color: #2b1b0b !important; } html[data-theme="light"] .avatar-circle-dark .bg-\[\#1e1333\], html[data-theme="light"] .avatar-circle-dark.bg-\[\#1e1333\] { background-color: #1e1333 !important; } html[data-theme="light"] .avatar-circle-dark .bg-\[\#102415\], html[data-theme="light"] .avatar-circle-dark.bg-\[\#102415\] { background-color: #102415 !important; } /* ── Global text overrides — comprehensive (ALL use !important to beat Tailwind utilities) ── */ html[data-theme="light"] .text-white { color: #0f0a1e !important; } html[data-theme="light"] .text-slate-50 { color: #1e293b !important; } html[data-theme="light"] .text-slate-100 { color: #1e293b !important; } html[data-theme="light"] .text-slate-200 { color: #334155 !important; } html[data-theme="light"] .text-slate-300 { color: #475569 !important; } html[data-theme="light"] .text-slate-400 { color: #64748b !important; } /* Was #94a3b8 (2.4:1 on the light pages' paper, a WCAG AA failure on /learn captions such as the line under the $399 price). #5b6478 reads as muted and passes at 5:1. */ html[data-theme="light"] .text-slate-500 { color: #5b6478 !important; } html[data-theme="light"] .text-sky-100 { color: #6D28D9 !important; } html[data-theme="light"] .text-sky-200 { color: #7C3AED !important; } /* IMPORTANT: Preserve gradient text — text-transparent + bg-clip-text must NOT be overridden */ html[data-theme="light"] .text-transparent { color: transparent !important; } html[data-theme="light"] .bg-clip-text { -webkit-text-fill-color: transparent !important; } /* Preserve white text on solid colored buttons/badges ONLY (not gradient containers) */ html[data-theme="light"] .bg-emerald-400 { color: #ffffff !important; } html[data-theme="light"] .bg-emerald-400 > * { color: #ffffff !important; } html[data-theme="light"] .bg-sky-500 { color: #ffffff !important; } html[data-theme="light"] .bg-sky-500 > * { color: #ffffff !important; } html[data-theme="light"] .bg-sky-600 { color: #ffffff !important; } html[data-theme="light"] .bg-sky-600 > * { color: #ffffff !important; } html[data-theme="light"] .bg-violet-600 { color: #ffffff !important; } html[data-theme="light"] .bg-violet-600 > * { color: #ffffff !important; } html[data-theme="light"] .bg-violet-700 { color: #ffffff !important; } html[data-theme="light"] .bg-violet-700 > * { color: #ffffff !important; } html[data-theme="light"] .bg-indigo-600 { color: #ffffff !important; } html[data-theme="light"] .bg-indigo-600 > * { color: #ffffff !important; } /* Gradient buttons — only on actual button/anchor elements, NOT containers */ html[data-theme="light"] button[class*="from-emerald-500"][class*="to-cyan"], html[data-theme="light"] a[class*="from-emerald-500"][class*="to-cyan"] { color: #ffffff !important; } html[data-theme="light"] button[class*="from-sky-"], html[data-theme="light"] a[class*="from-sky-"] { color: #ffffff !important; } html[data-theme="light"] button[class*="from-violet-"], html[data-theme="light"] a[class*="from-violet-"] { color: #ffffff !important; } /* Toast/overlay/status notifications keep white */ html[data-theme="light"] [role="status"] .text-white { color: #ffffff !important; } html[data-theme="light"] [aria-live="polite"] .text-white { color: #ffffff !important; } /* Buttons — higher specificity backup */ html[data-theme="light"] button.bg-emerald-400, html[data-theme="light"] a.bg-emerald-400, html[data-theme="light"] button.bg-sky-500, html[data-theme="light"] a.bg-sky-500, html[data-theme="light"] button.bg-violet-600, html[data-theme="light"] a.bg-violet-600 { color: #ffffff !important; } /* ── Global text-white opacity variants (ALL use !important) ── */ html[data-theme="light"] .text-white\/90 { color: rgba(15, 10, 30, 0.9) !important; } html[data-theme="light"] .text-white\/80 { color: rgba(15, 10, 30, 0.8) !important; } html[data-theme="light"] .text-white\/70 { color: rgba(15, 10, 30, 0.7) !important; } html[data-theme="light"] .text-white\/60 { color: rgba(15, 10, 30, 0.6) !important; } html[data-theme="light"] .text-white\/50 { color: rgba(15, 10, 30, 0.5) !important; } html[data-theme="light"] .hover\:text-white:hover { color: #0f0a1e !important; } html[data-theme="light"] .placeholder\:text-slate-500::placeholder { color: #9494AB !important; } html[data-theme="light"] .text-\[\#00E5FF\] { color: #7C3AED !important; } /* ── Global shadow overrides (sky → violet) ── */ html[data-theme="light"] [class*="shadow-"][class*="rgba(56,189,248"] { box-shadow: none !important; } html[data-theme="light"] [class*="shadow-"][class*="rgba(14,165,233"] { box-shadow: none !important; } html[data-theme="light"] .shadow-inner { box-shadow: inset 0 1px 3px rgba(124,58,237,0.05) !important; } /* ── Global: additional bg overrides for create/pricing/other pages ── */ html[data-theme="light"] .bg-sky-500\/10 { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .bg-sky-500\/20 { background-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .bg-sky-400\/10 { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .bg-emerald-500\/10 { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .bg-emerald-500\/20 { background-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .bg-violet-500\/10 { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .bg-violet-500\/20 { background-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .border-sky-400\/30 { border-color: rgba(124, 58, 237, 0.2) !important; } html[data-theme="light"] .border-sky-500\/20 { border-color: rgba(124, 58, 237, 0.15) !important; } /* ── Global: ring color overrides ── */ html[data-theme="light"] .ring-white\/10 { --tw-ring-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .ring-inset.ring-white\/10 { --tw-ring-color: rgba(124, 58, 237, 0.08) !important; } /* ── Global: footer on ALL pages (not just homepage) ── */ html[data-theme="light"] footer .bg-slate-950\/75 { background: rgba(255,255,255,0.9) !important; } html[data-theme="light"] footer .bg-slate-950\/65 { background: rgba(124,58,237,0.04) !important; border-color: rgba(124,58,237,0.1) !important; } html[data-theme="light"] footer .text-slate-300 { color: #4B5563 !important; } html[data-theme="light"] footer .text-slate-400 { color: #6B7280 !important; } html[data-theme="light"] footer .text-slate-500 { color: #9CA3AF !important; } html[data-theme="light"] footer .text-slate-200 { color: #1F2937 !important; } html[data-theme="light"] footer .hover\:text-white:hover { color: #7C3AED !important; } html[data-theme="light"] footer .border-white\/10 { border-color: rgba(124,58,237,0.08) !important; } html[data-theme="light"] footer .bg-white\/\[0\.04\] { background: rgba(124,58,237,0.04) !important; border-color: rgba(124,58,237,0.1) !important; } html[data-theme="light"] footer .hover\:border-sky-400\/40:hover { border-color: rgba(124,58,237,0.25) !important; } html[data-theme="light"] footer [class*="shadow-"][class*="rgba(56,189,248"] { box-shadow: 0 16px 48px -16px rgba(124,58,237,0.08) !important; } /* ── Global border overrides (violet-tinted for cohesion) ── */ html[data-theme="light"] .border-white\/5 { border-color: rgba(124, 58, 237, 0.05) !important; } html[data-theme="light"] .border-white\/10 { border-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .border-white\/15 { border-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .border-white\/20 { border-color: rgba(124, 58, 237, 0.14) !important; } html[data-theme="light"] .border-white\/\[0\.06\] { border-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .border-white\/\[0\.08\] { border-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .border-slate-700 { border-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .border-slate-800 { border-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .border-slate-600 { border-color: rgba(124, 58, 237, 0.12) !important; } html[data-theme="light"] .divide-white\/10 > * + * { border-color: rgba(124, 58, 237, 0.08) !important; } /* ── Global accent color overrides (emerald/cyan/sky → violet) ── */ html[data-theme="light"] .text-emerald-400 { color: #7C3AED !important; } html[data-theme="light"] .text-emerald-300 { color: #7C3AED !important; } html[data-theme="light"] .text-sky-400 { color: #7C3AED !important; } html[data-theme="light"] .text-sky-300 { color: #8B5CF6 !important; } html[data-theme="light"] .text-sky-200 { color: #7C3AED !important; } html[data-theme="light"] .text-sky-100 { color: #6D28D9 !important; } html[data-theme="light"] .text-cyan-400 { color: #7C3AED !important; } html[data-theme="light"] .bg-emerald-400 { background-color: #7C3AED !important; } html[data-theme="light"] .bg-emerald-500 { background-color: #6D28D9 !important; } html[data-theme="light"] .bg-emerald-500\/10 { background-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .bg-emerald-500\/20 { background-color: rgba(124, 58, 237, 0.12) !important; } html[data-theme="light"] .bg-sky-500 { background-color: #7C3AED !important; } html[data-theme="light"] .bg-sky-400 { background-color: #8B5CF6 !important; } html[data-theme="light"] .bg-sky-500\/10 { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .bg-sky-500\/20 { background-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .border-emerald-400\/30 { border-color: rgba(124, 58, 237, 0.25) !important; } html[data-theme="light"] .border-emerald-400\/40 { border-color: rgba(124, 58, 237, 0.3) !important; } html[data-theme="light"] .border-sky-400\/20 { border-color: rgba(124, 58, 237, 0.15) !important; } html[data-theme="light"] .border-sky-400\/30 { border-color: rgba(124, 58, 237, 0.2) !important; } html[data-theme="light"] .border-sky-400\/50 { border-color: rgba(124, 58, 237, 0.35) !important; } html[data-theme="light"] .border-sky-500\/20 { border-color: rgba(124, 58, 237, 0.15) !important; } html[data-theme="light"] .border-sky-500\/50 { border-color: rgba(124, 58, 237, 0.35) !important; } html[data-theme="light"] .from-emerald-500.to-cyan-500 { background-image: linear-gradient(to right, #7C3AED, #6D28D9) !important; } html[data-theme="light"] .from-sky-400.to-violet-500 { background-image: linear-gradient(to right, #7C3AED, #6D28D9) !important; } html[data-theme="light"] .bg-gradient-to-r.from-sky-400.to-blue-500 { background-image: linear-gradient(to right, #7C3AED, #6D28D9) !important; } html[data-theme="light"] .hover\:bg-sky-400:hover { background-color: #6D28D9 !important; } html[data-theme="light"] .hover\:bg-emerald-300:hover { background-color: #6D28D9 !important; } html[data-theme="light"] .hover\:border-sky-400:hover { border-color: #7C3AED !important; } html[data-theme="light"] .hover\:text-sky-300:hover { color: #7C3AED !important; } html[data-theme="light"] .hover\:bg-sky-500\/10:hover { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .hover\:bg-sky-500\/20:hover { background-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .hover\:border-sky-400\/50:hover { border-color: rgba(124, 58, 237, 0.35) !important; } html[data-theme="light"] .focus\:border-sky-400:focus { border-color: #7C3AED !important; } html[data-theme="light"] .focus\:ring-sky-400:focus { --tw-ring-color: rgba(124, 58, 237, 0.5) !important; } html[data-theme="light"] .focus-within\:border-sky-400:focus-within { border-color: #7C3AED !important; } html[data-theme="light"] .ring-emerald-400\/50 { --tw-ring-color: rgba(124, 58, 237, 0.3) !important; } html[data-theme="light"] .ring-white\/10 { --tw-ring-color: rgba(0, 0, 0, 0.06) !important; } html[data-theme="light"] .shadow-emerald-500\/25 { box-shadow: 0 10px 25px -5px rgba(124, 58, 237, 0.15) !important; } html[data-theme="light"] .caret-emerald-400 { caret-color: #7C3AED !important; } /* Sky-blue custom shadows → violet */ html[data-theme="light"] .shadow-\[0_0_10px_rgba\(56\,189\,248\,0\.8\)\] { box-shadow: 0 0 10px rgba(124, 58, 237, 0.4) !important; } html[data-theme="light"] .shadow-\[0_0_20px_rgba\(14\,165\,233\,0\.3\)\] { box-shadow: 0 0 20px rgba(124, 58, 237, 0.15) !important; } html[data-theme="light"] .shadow-\[0_0_20px_rgba\(14\,165\,233\,0\.4\)\] { box-shadow: 0 0 20px rgba(124, 58, 237, 0.18) !important; } html[data-theme="light"] .shadow-\[0_0_25px_rgba\(14\,165\,233\,0\.35\)\] { box-shadow: 0 0 25px rgba(124, 58, 237, 0.15) !important; } html[data-theme="light"] .shadow-\[0_20px_80px_-50px_rgba\(56\,189\,248\,0\.8\)\] { box-shadow: 0 20px 80px -50px rgba(124, 58, 237, 0.3) !important; } html[data-theme="light"] .shadow-\[0_30px_100px_-60px_rgba\(56\,189\,248\,0\.85\)\] { box-shadow: 0 30px 100px -60px rgba(124, 58, 237, 0.2) !important; } html[data-theme="light"] .shadow-\[0_30px_120px_-80px_rgba\(56\,189\,248\,0\.5\)\] { box-shadow: 0 30px 120px -80px rgba(124, 58, 237, 0.15) !important; } /* ── Global hover overrides ── */ html[data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(124, 58, 237, 0.04) !important; } html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .hover\:bg-slate-800:hover { background-color: rgba(245, 240, 255, 0.7) !important; } html[data-theme="light"] .hover\:border-white\/20:hover { border-color: rgba(124, 58, 237, 0.18) !important; } html[data-theme="light"] .hover\:text-emerald-300:hover { color: #7C3AED !important; } /* ── Global gradient stop overrides ── */ html[data-theme="light"] .from-slate-900 { --tw-gradient-from: #ffffff !important; } html[data-theme="light"] .from-slate-950 { --tw-gradient-from: #f8fafc !important; } html[data-theme="light"] .to-slate-950 { --tw-gradient-to: #f8fafc !important; } /* ── Create page inline gradient cards ── */ html[data-theme="light"] .bg-\[linear-gradient\(135deg\,rgba\(2\,6\,23\,0\.96\)\,rgba\(15\,23\,42\,0\.94\)\)\] { background: linear-gradient(135deg, #ffffff, #f8fafc) !important; } /* ── Creator Shell Light Mode ── */ html[data-theme="light"] .creator-shell { background: radial-gradient(130% 130% at 95% 0%, rgba(124, 58, 237, 0.06) 0%, transparent 44%), radial-gradient(150% 150% at 0% 100%, rgba(124, 58, 237, 0.04) 0%, transparent 48%), #f8fafc !important; } html[data-theme="light"] .creator-surface { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.06) !important; } html[data-theme="light"] .creator-surface-strong { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(0, 0, 0, 0.1) !important; } html[data-theme="light"] .creator-section-title { color: #0f172a !important; } html[data-theme="light"] .creator-empty-state { border-color: rgba(0, 0, 0, 0.12) !important; background: rgba(0, 0, 0, 0.02) !important; } html[data-theme="light"] .creator-card-hover:hover { border-color: rgba(124, 58, 237, 0.3) !important; background: rgba(255, 255, 255, 0.95) !important; } /* Workspace header */ html[data-theme="light"] .creator-workspace-header { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(124, 58, 237, 0.08) !important; box-shadow: 0 4px 20px -10px rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .creator-workspace-header .text-white { color: #0f172a !important; } html[data-theme="light"] .creator-workspace-header .text-slate-400 { color: #64748b !important; } html[data-theme="light"] .creator-workspace-header .text-slate-200 { color: #334155 !important; } html[data-theme="light"] .creator-workspace-header [class*="bg-white/5"] { background: rgba(124, 58, 237, 0.04) !important; border-color: rgba(124, 58, 237, 0.10) !important; } html[data-theme="light"] .creator-workspace-header [class*="bg-sky-400"] { background-color: #7C3AED !important; box-shadow: 0 0 12px rgba(124, 58, 237, 0.5) !important; } html[data-theme="light"] .creator-workspace-header a[class*="border-white"] { border-color: rgba(124, 58, 237, 0.15) !important; color: #5B21B6 !important; } html[data-theme="light"] .creator-workspace-header a[class*="border-white"]:hover { border-color: rgba(124, 58, 237, 0.4) !important; color: #7C3AED !important; } /* Creator main content — text + border overrides */ html[data-theme="light"] .creator-main .text-white { color: #0f172a !important; } html[data-theme="light"] .creator-main .text-slate-100 { color: #1e293b !important; } html[data-theme="light"] .creator-main .text-slate-200 { color: #334155 !important; } html[data-theme="light"] .creator-main .text-slate-300 { color: #475569 !important; } html[data-theme="light"] .creator-main .text-slate-400 { color: #64748b !important; } html[data-theme="light"] .creator-main .text-slate-500 { color: #94a3b8 !important; } html[data-theme="light"] .creator-main [class*="border-white/10"], html[data-theme="light"] .creator-main [class*="border-white/8"] { border-color: rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] .creator-main [class*="bg-white/5"], html[data-theme="light"] .creator-main [class*="bg-white/[0.0"] { background: rgba(0, 0, 0, 0.02) !important; } html[data-theme="light"] .creator-main [class*="bg-slate-950"], html[data-theme="light"] .creator-main [class*="bg-slate-900"] { background: rgba(255, 255, 255, 0.8) !important; } html[data-theme="light"] .creator-section-subtitle { color: #64748b !important; } /* ── Semantic colors stay semantic ── */ html[data-theme="light"] .text-green-400 { color: #16a34a !important; } html[data-theme="light"] .bg-green-400 { background-color: #22c55e !important; } html[data-theme="light"] .text-red-400 { color: #dc2626 !important; } html[data-theme="light"] .text-red-500 { color: #dc2626 !important; } html[data-theme="light"] .text-amber-400 { color: #d97706 !important; } html[data-theme="light"] .text-violet-400 { color: #7C3AED !important; } html[data-theme="light"] .text-violet-300 { color: #8B5CF6 !important; } html[data-theme="light"] .text-indigo-400 { color: #6D28D9 !important; } html[data-theme="light"] .text-purple-400 { color: #7C3AED !important; } html[data-theme="light"] .text-fuchsia-400 { color: #c026d3 !important; } /* ── Backdrop overlays ── */ html[data-theme="light"] .bg-black\/50 { background-color: rgba(0, 0, 0, 0.35) !important; } html[data-theme="light"] .bg-black\/60 { background-color: rgba(0, 0, 0, 0.4) !important; } /* Host avatar container (global): light violet tint, but keep avatar wells dark. */ /* Avatar circles must stay dark for mix-blend-lighten portraits. */ html[data-theme="light"] .avatar-circle-dark, html[data-theme="light"] .avatar-circle-dark.bg-slate-950, html[data-theme="light"] .avatar-circle-dark.bg-slate-900, html[data-theme="light"] .avatar-circle-dark[class*="bg-[#05"], html[data-theme="light"] .avatar-circle-dark[class*="bg-[#0f"], html[data-theme="light"] .avatar-circle-dark[class*="bg-[var(--theme-surface-solid)"] { background-color: #0f0a1e !important; } html[data-theme="light"] .host-identity-card { background: radial-gradient(circle at top left, rgba(124, 58, 237, 0.22), transparent 42%), linear-gradient(135deg, #121420 0%, #0d1020 58%, #080b16 100%) !important; border-color: rgba(255, 255, 255, 0.16) !important; box-shadow: 0 18px 42px -28px rgba(15, 10, 30, 0.86) !important; } html[data-theme="light"] .host-identity-card .host-portrait-stage { background: radial-gradient(circle at 50% 14%, rgba(167, 139, 250, 0.26), transparent 44%), linear-gradient(180deg, #151127 0%, #0f0a1e 58%, #070812 100%) !important; } html[data-theme="light"] .host-identity-card .host-portrait-image { filter: saturate(1.08) contrast(1.08) brightness(1.02); } /* Host "test the host" section inner card */ html[data-theme="light"] [class*="bg-[linear-gradient(180deg,rgba(255,255,255,0.04)"] { background: linear-gradient(180deg, rgba(124,58,237,0.03), rgba(124,58,237,0.01)) !important; } /* ring-1 ring-sky-500/50 → violet for selected host card */ html[data-theme="light"] .ring-sky-500\/50 { --tw-ring-color: rgba(124, 58, 237, 0.5) !important; } html[data-theme="light"] .bg-sky-500\/10 { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .border-sky-500\/40 { border-color: rgba(124, 58, 237, 0.35) !important; } /* ── Scrollbar ── */ html[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; } html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ── Homepage: HeroSection — premium light mode input & cards ── */ html[data-theme="light"] [data-hero-input] { background: #ffffff !important; border-color: rgba(124, 58, 237, 0.18) !important; box-shadow: 0 8px 40px -12px rgba(124, 58, 237, 0.12), 0 2px 8px -2px rgba(0,0,0,0.04) !important; } html[data-theme="light"] [data-hero-input]:has(input:focus) { border-color: rgba(124, 58, 237, 0.4) !important; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08), 0 8px 40px -12px rgba(124, 58, 237, 0.18) !important; } /* Hero input inner highlight line */ html[data-theme="light"] [data-hero-input] .bg-gradient-to-r.from-transparent.via-white\/30 { background-image: linear-gradient(to right, transparent, rgba(124,58,237,0.08), transparent) !important; } /* Hero input bottom bar */ html[data-theme="light"] [data-hero-input] .border-t.border-white\/\[0\.05\] { border-color: rgba(124, 58, 237, 0.08) !important; } /* Hero example chips inside input */ html[data-theme="light"] [data-hero-input] .border-white\/\[0\.06\] { border-color: rgba(124, 58, 237, 0.12) !important; background-color: rgba(124, 58, 237, 0.03) !important; } html[data-theme="light"] [data-hero-input] .border-white\/\[0\.08\] { border-color: rgba(124, 58, 237, 0.12) !important; background-color: rgba(124, 58, 237, 0.03) !important; } /* Hero spark icon container */ html[data-theme="light"] [data-hero-input] .bg-white\/\[0\.06\] { background-color: rgba(124, 58, 237, 0.06) !important; } /* Hero upload/file chips */ html[data-theme="light"] [data-hero-input] .border-white\/\[0\.04\] { border-color: rgba(0, 0, 0, 0.06) !important; } /* Hero host selector card in free game section */ html[data-theme="light"] header[data-active-host] .border-white\/10.bg-black\/20 { background-color: rgba(124, 58, 237, 0.04) !important; border-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] header[data-active-host] .border-emerald-400\/40.bg-emerald-500\/10 { background-color: rgba(5, 150, 105, 0.08) !important; border-color: rgba(5, 150, 105, 0.3) !important; } /* Hero animated background orbs — make them subtle violet instead of invisible */ html[data-theme="light"] .homepage-orbs .bg-sky-500\/15 { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .homepage-orbs .bg-cyan-500\/10 { background-color: rgba(124, 58, 237, 0.04) !important; } html[data-theme="light"] .homepage-orbs .bg-violet-500\/5 { background-color: rgba(124, 58, 237, 0.03) !important; } /* Hero: hide NeuralNetwork and AITelemetry in light mode (dark-only decorative elements) */ html[data-theme="light"] .homepage-orbs canvas, html[data-theme="light"] .homepage-orbs svg:not([class]) { opacity: 0.15 !important; } /* ── Homepage: HowItWorks — hardcoded inline bg #050816 on avatar containers ── */ html[data-theme="light"] [style*="background-color: rgb(5, 8, 22)"], html[data-theme="light"] [style*="backgroundColor"] { } /* HowItWorks: dashed upload zone dark bg → light violet tint */ html[data-theme="light"] .bg-sky-500\/5 { background-color: rgba(124, 58, 237, 0.03) !important; } html[data-theme="light"] .border-sky-500\/30 { border-color: rgba(124, 58, 237, 0.2) !important; } html[data-theme="light"] .bg-sky-500\/20 { background-color: rgba(124, 58, 237, 0.08) !important; } /* HowItWorks: indigo step card accents */ html[data-theme="light"] .bg-indigo-500\/20 { background-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .text-indigo-300 { color: #6D28D9 !important; } html[data-theme="light"] .border-indigo-500\/30 { border-color: rgba(124, 58, 237, 0.2) !important; } /* HowItWorks: white low-opacity borders need more visibility on light bg */ html[data-theme="light"] .border-white\/8 { border-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .border-white\/4 { border-color: rgba(124, 58, 237, 0.04) !important; } html[data-theme="light"] .border-white\/12 { border-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .bg-white\/\[0\.04\] { background-color: rgba(124, 58, 237, 0.03) !important; } html[data-theme="light"] .bg-white\/\[0\.02\] { background-color: rgba(124, 58, 237, 0.02) !important; } /* HowItWorks: emerald step accents */ html[data-theme="light"] .bg-emerald-500\/20 { background-color: rgba(5, 150, 105, 0.1) !important; } html[data-theme="light"] .border-emerald-300\/80 { border-color: rgba(5, 150, 105, 0.6) !important; } /* HowItWorks: emerald link bar */ html[data-theme="light"] .bg-emerald-400\/70 { background-color: rgba(5, 150, 105, 0.5) !important; } /* HowItWorks: indigo copy button */ html[data-theme="light"] .bg-indigo-500 { background-color: #7C3AED !important; color: #fff !important; } /* ── Homepage: UseCases — 900-level colored backgrounds ── */ html[data-theme="light"] .bg-sky-900\/30 { background-color: rgba(14, 165, 233, 0.08) !important; } html[data-theme="light"] .bg-fuchsia-900\/30 { background-color: rgba(192, 38, 211, 0.08) !important; } html[data-theme="light"] .bg-emerald-900\/30 { background-color: rgba(5, 150, 105, 0.08) !important; } html[data-theme="light"] .bg-violet-900\/30 { background-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .bg-slate-800\/40 { background-color: rgba(124, 58, 237, 0.04) !important; } html[data-theme="light"] .border-slate-700\/60 { border-color: rgba(0, 0, 0, 0.1) !important; } html[data-theme="light"] .border-white\/5 { border-color: rgba(0, 0, 0, 0.06) !important; } /* ── Homepage: TestimonialsSection ── */ html[data-theme="light"] .ring-offset-slate-900 { --tw-ring-offset-color: #FAFAFF !important; } html[data-theme="light"] .border-white\/\[0\.06\] { border-color: rgba(0, 0, 0, 0.06) !important; } /* ── Homepage: TemplateGallery — dark slate cards ── */ html[data-theme="light"] .bg-slate-950\/60 { background-color: rgba(250, 250, 255, 0.7) !important; } html[data-theme="light"] .bg-slate-900\/60 { background-color: rgba(255, 255, 255, 0.75) !important; } html[data-theme="light"] .bg-slate-900 { background-color: rgba(255, 255, 255, 0.92) !important; } html[data-theme="light"] .bg-black\/20 { background-color: rgba(0, 0, 0, 0.08) !important; } html[data-theme="light"] .bg-black\/15 { background-color: rgba(0, 0, 0, 0.06) !important; } /* ── Homepage: HeroSection — dark blobs / overlays ── */ html[data-theme="light"] .bg-sky-500\/40 { background-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .bg-cyan-400\/40 { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .bg-slate-500\/30 { background-color: rgba(124, 58, 237, 0.04) !important; } /* ── Homepage: HostStarterSection — comprehensive light mode ── */ html[data-theme="light"] .bg-black\/10 { background-color: rgba(0, 0, 0, 0.04) !important; } html[data-theme="light"] .border-white\/\[0\.08\] { border-color: rgba(0, 0, 0, 0.06) !important; } /* Section header — "Meet Your Hosts" label: sky→violet */ html[data-theme="light"] .homepage-shell #templates .text-sky-500, html[data-theme="light"] .homepage-shell #templates .dark\:text-sky-400 { color: #7C3AED !important; } html[data-theme="light"] .homepage-shell #templates .text-sky-200 { color: #8b5cf6 !important; } html[data-theme="light"] .homepage-shell #templates .text-sky-300 { color: #7C3AED !important; } /* Main container card */ html[data-theme="light"] .homepage-shell #templates > div > [class*="rounded-[2rem]"] { background: rgba(255, 255, 255, 0.80) !important; border-color: rgba(124, 58, 237, 0.10) !important; box-shadow: 0 4px 32px -8px rgba(124, 58, 237, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8) inset !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } /* ── Host carousel cards ── */ html[data-theme="light"] .homepage-shell #templates button[aria-pressed="false"] { background: rgba(255, 255, 255, 0.75) !important; border-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .homepage-shell #templates button[aria-pressed="false"]:hover { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(124, 58, 237, 0.18) !important; box-shadow: 0 4px 16px -4px rgba(124, 58, 237, 0.10) !important; } /* Selected host card — violet instead of sky */ html[data-theme="light"] .homepage-shell #templates button[aria-pressed="true"] { background: linear-gradient(145deg, rgba(124, 58, 237, 0.06), rgba(192, 38, 211, 0.03)) !important; border-color: rgba(124, 58, 237, 0.30) !important; box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.08), 0 4px 20px -6px rgba(124, 58, 237, 0.15) !important; --tw-ring-color: rgba(124, 58, 237, 0.35) !important; } /* "Live" badge — violet brand */ html[data-theme="light"] .homepage-shell #templates button[aria-pressed="true"] .border-sky-400\/30 { border-color: rgba(124, 58, 237, 0.25) !important; background: rgba(124, 58, 237, 0.08) !important; color: #7C3AED !important; } /* Host card overlay gradient — reduce opacity in light mode */ html[data-theme="light"] .homepage-shell #templates button .opacity-\[0\.12\] { opacity: 0.04 !important; } /* ── Carousel nav buttons ── */ html[data-theme="light"] .homepage-shell #templates .rounded-full.border.h-10.w-10, html[data-theme="light"] .homepage-shell #templates .inline-flex.h-10.w-10 { border-color: rgba(124, 58, 237, 0.12) !important; background: rgba(255, 255, 255, 0.8) !important; color: #6b7280 !important; } html[data-theme="light"] .homepage-shell #templates .rounded-full.border.h-10.w-10:hover, html[data-theme="light"] .homepage-shell #templates .inline-flex.h-10.w-10:hover { border-color: rgba(124, 58, 237, 0.25) !important; background: rgba(124, 58, 237, 0.06) !important; color: #7C3AED !important; } /* Outer gradient border wrapper — soft violet instead of host gradient */ html[data-theme="light"] .homepage-shell #templates .mt-8 > div:first-child { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(124, 58, 237, 0.12) !important; box-shadow: 0 4px 24px -8px rgba(124, 58, 237, 0.08) !important; } /* Inner spotlight content — clean white */ html[data-theme="light"] .homepage-shell #templates .mt-8 > div:first-child > div:first-child { background: rgba(255, 255, 255, 0.95) !important; } /* Spotlight glow blob — make violet */ html[data-theme="light"] .homepage-shell #templates .bg-sky-500\/10.blur-3xl { background: rgba(124, 58, 237, 0.06) !important; } /* Host profile inner card — soft gradient */ html[data-theme="light"] .homepage-shell #templates .mt-8 .rounded-\[1\.7rem\] { background: linear-gradient(145deg, rgba(124, 58, 237, 0.03), rgba(255, 255, 255, 0.9)) !important; border-color: rgba(124, 58, 237, 0.10) !important; } /* Host profile inner gradient blur — soften */ html[data-theme="light"] .homepage-shell #templates .mt-8 .opacity-20.blur-2xl { opacity: 0.08 !important; } /* Avatar shadow — violet glow instead of sky */ /* "Selected host" badge */ html[data-theme="light"] .homepage-shell #templates .mt-8 span[class*="tracking-[0.24em]"][class*="rounded-full"] { background: rgba(124, 58, 237, 0.06) !important; border-color: rgba(124, 58, 237, 0.12) !important; color: #6b7280 !important; } /* Best-for tags */ html[data-theme="light"] .homepage-shell #templates .mt-8 .flex-wrap .rounded-full { background: rgba(124, 58, 237, 0.04) !important; border-color: rgba(124, 58, 237, 0.10) !important; color: #4b5563 !important; } /* ── TEST THE HOST — voice preview area ── */ html[data-theme="light"] .homepage-shell #templates .mt-8 .rounded-\[1\.75rem\] { background: linear-gradient(145deg, rgba(124, 58, 237, 0.04), rgba(192, 38, 211, 0.02)) !important; border-color: rgba(124, 58, 237, 0.12) !important; } /* Play button — violet */ html[data-theme="light"] .homepage-shell #templates .mt-8 .h-16.w-16 { background: linear-gradient(135deg, #7C3AED, #9333EA) !important; box-shadow: 0 4px 20px -4px rgba(124, 58, 237, 0.35) !important; } html[data-theme="light"] .homepage-shell #templates .mt-8 .h-16.w-16:hover { box-shadow: 0 4px 28px -4px rgba(124, 58, 237, 0.5) !important; } /* Equalizer bars — violet tint */ html[data-theme="light"] .homepage-shell #templates .bg-sky-500\/15 { background: rgba(124, 58, 237, 0.10) !important; } html[data-theme="light"] .homepage-shell #templates .bg-sky-500\/12 { background: rgba(124, 58, 237, 0.08) !important; } /* CTA buttons — Meet host / Create with host */ html[data-theme="light"] .homepage-shell #templates .bg-emerald-400, html[data-theme="light"] .homepage-shell #templates .bg-emerald-300 { background: linear-gradient(135deg, #7C3AED, #9333EA) !important; color: #fff !important; } html[data-theme="light"] .homepage-shell #templates .text-slate-950 { color: #fff !important; } /* Secondary outline button */ html[data-theme="light"] .homepage-shell #templates .border-emerald-400\/40 { border-color: rgba(124, 58, 237, 0.25) !important; } html[data-theme="light"] .homepage-shell #templates .text-emerald-200, html[data-theme="light"] .homepage-shell #templates .text-emerald-400, html[data-theme="light"] .homepage-shell #templates .dark\:text-emerald-300\/80 { color: #7C3AED !important; } html[data-theme="light"] .homepage-shell #templates .bg-emerald-400\/15 { background: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .homepage-shell #templates .bg-emerald-500\/12 { background: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .homepage-shell #templates .text-emerald-500 { color: #7C3AED !important; } /* Starter packs heading label — violet */ html[data-theme="light"] .homepage-shell #templates .text-sky-500.dark\:text-sky-400 { color: #7C3AED !important; } /* Template/pack cards */ html[data-theme="light"] .homepage-shell #templates article { background: rgba(255, 255, 255, 0.88) !important; border-color: rgba(124, 58, 237, 0.10) !important; box-shadow: 0 2px 12px -4px rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .homepage-shell #templates article:hover { border-color: rgba(124, 58, 237, 0.20) !important; box-shadow: 0 8px 24px -8px rgba(124, 58, 237, 0.12) !important; } /* Pack card overlay gradient — mute */ html[data-theme="light"] .homepage-shell #templates article .opacity-40 { opacity: 0.06 !important; } /* Category badges on pack cards */ html[data-theme="light"] .homepage-shell #templates article .rounded-full.border { background: rgba(124, 58, 237, 0.04) !important; border-color: rgba(124, 58, 237, 0.12) !important; color: #6b7280 !important; } /* "Signature fit" badge — violet accent */ html[data-theme="light"] .homepage-shell #templates article .border-sky-500\/50 { border-color: rgba(124, 58, 237, 0.30) !important; background: rgba(124, 58, 237, 0.06) !important; color: #7C3AED !important; } /* "First pack" badge */ html[data-theme="light"] .homepage-shell #templates article .bg-\[var\(--theme-text-heading\)\] { background: #7C3AED !important; color: #fff !important; } /* "Instant preview" badge — violet */ html[data-theme="light"] .homepage-shell #templates article .border-emerald-400\/40.bg-emerald-400\/15 { border-color: rgba(124, 58, 237, 0.20) !important; background: rgba(124, 58, 237, 0.06) !important; } /* "Why this works" box in pack cards */ html[data-theme="light"] .homepage-shell #templates article .bg-white\/5 { background: rgba(124, 58, 237, 0.03) !important; border-color: rgba(124, 58, 237, 0.08) !important; } /* Play free preview button on pack cards */ html[data-theme="light"] .homepage-shell #templates article .bg-emerald-400 { background: linear-gradient(135deg, #7C3AED, #9333EA) !important; color: #fff !important; } /* "Open in builder" button */ html[data-theme="light"] .homepage-shell #templates article .bg-white\/10 { background: rgba(124, 58, 237, 0.04) !important; border-color: rgba(124, 58, 237, 0.12) !important; } /* ── Explore All Packs bottom button ── */ html[data-theme="light"] .homepage-shell #templates > div > div:last-child .rounded-full { border-color: rgba(124, 58, 237, 0.15) !important; background: rgba(255, 255, 255, 0.8) !important; color: #4b5563 !important; } html[data-theme="light"] .homepage-shell #templates > div > div:last-child .rounded-full:hover { border-color: rgba(124, 58, 237, 0.30) !important; background: rgba(124, 58, 237, 0.04) !important; color: #7C3AED !important; } html[data-theme="light"] .homepage-shell #templates > div > div:last-child .text-emerald-300 { color: #7C3AED !important; } html[data-theme="light"] .homepage-shell #templates .animate-bounce { color: #7C3AED !important; } /* Best Value / highlighted card */ html[data-theme="light"] [class*="bg-[linear-gradient(180deg,rgba(76,29,149"] { background: #ffffff !important; border-color: rgba(124,58,237,0.35) !important; box-shadow: 0 0 0 2px rgba(124,58,237,0.12), 0 12px 40px -12px rgba(124,58,237,0.18) !important; } html[data-theme="light"] [class*="shadow-[0_20px_40px_-15px_rgba(139,92,246"] { box-shadow: 0 12px 40px -12px rgba(124,58,237,0.18) !important; } /* Regular pricing cards */ html[data-theme="light"] [class*="bg-[linear-gradient(180deg,rgba(15,23,42,0.6)"] { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 4px 16px -4px rgba(0,0,0,0.06) !important; } /* Studios/LTD fuchsia card */ html[data-theme="light"] [class*="bg-[linear-gradient(135deg,rgba(192,38,211"] { background: linear-gradient(135deg, rgba(192,38,211,0.04), #ffffff) !important; border-color: rgba(192,38,211,0.2) !important; } /* Pricing feature text — must be dark and readable on white cards */ html[data-theme="light"] [class*="bg-[linear-gradient(180deg,rgba(76,29,149"] .text-slate-300, html[data-theme="light"] [class*="bg-[linear-gradient(180deg,rgba(15,23,42"] .text-slate-300 { color: #334155 !important; } html[data-theme="light"] [class*="bg-[linear-gradient(180deg,rgba(76,29,149"] .text-slate-400, html[data-theme="light"] [class*="bg-[linear-gradient(180deg,rgba(15,23,42"] .text-slate-400 { color: #64748b !important; } html[data-theme="light"] [class*="bg-[linear-gradient(180deg,rgba(76,29,149"] .text-slate-500, html[data-theme="light"] [class*="bg-[linear-gradient(180deg,rgba(15,23,42"] .text-slate-500 { color: #94a3b8 !important; } /* Pricing divider */ html[data-theme="light"] .bg-white\/10.opacity-50 { background-color: rgba(0,0,0,0.08) !important; } /* Pricing comparison table */ html[data-theme="light"] .bg-slate-900\/40 { background-color: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; } /* Badge gradient stays vibrant */ html[data-theme="light"] .bg-gradient-to-r.from-violet-600.to-fuchsia-600 { color: #fff !important; } /* Free plan CTA — visible outline button */ html[data-theme="light"] .border-white\/20.bg-white\/5 { background-color: rgba(124,58,237,0.04) !important; border-color: rgba(124,58,237,0.2) !important; color: #1e293b !important; } /* CTA buttons on white cards — ensure contrast */ html[data-theme="light"] .bg-violet-500 { background-color: #7C3AED !important; color: #fff !important; } html[data-theme="light"] .bg-violet-500:hover { background-color: #6D28D9 !important; } html[data-theme="light"] .hover\:bg-violet-400:hover { background-color: #6D28D9 !important; } /* "Start Free" / "Get Creator Pro" buttons — white bg needs dark text */ html[data-theme="light"] .bg-white.text-slate-900 { background-color: #f1f5f9 !important; color: #0f172a !important; border: 1px solid rgba(0,0,0,0.1) !important; } /* ── /about page — hardcoded #020617 full page bg ── */ html[data-theme="light"] .bg-\[\#020617\] { background-color: #F0EAFF !important; } html[data-theme="light"] .bg-\[\#091129\]\/80 { background-color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="light"] .bg-\[\#091129\]\/60 { background-color: rgba(255, 255, 255, 0.75) !important; } html[data-theme="light"] .bg-sky-950\/80 { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .bg-slate-800\/50 { background-color: rgba(245, 240, 255, 0.5) !important; } /* ── /teams page — complex inline gradient background ── */ html[data-theme="light"] [class*="bg-[linear-gradient(180deg,#020617"] { background: linear-gradient(180deg, #FAFAFF 0%, #ffffff 48%, #FAFAFF 100%) !important; } html[data-theme="light"] [class*="bg-[radial-gradient(circle_at_top,rgba(14,165,233,0.08)"] { background: radial-gradient(circle at top, rgba(124, 58, 237, 0.06), transparent 32%) !important; } html[data-theme="light"] .bg-slate-900\/40 { background-color: rgba(255, 255, 255, 0.7) !important; } html[data-theme="light"] .bg-slate-900\/50 { background-color: rgba(255, 255, 255, 0.65) !important; } /* ── /pricing/credits page ── */ html[data-theme="light"] .bg-violet-500\/15 { background-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .bg-fuchsia-600\/6 { background-color: rgba(192, 38, 211, 0.04) !important; } html[data-theme="light"] .bg-violet-500\/5 { background-color: rgba(124, 58, 237, 0.03) !important; } html[data-theme="light"] .bg-violet-500\/20 { background-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .bg-fuchsia-500\/10 { background-color: rgba(192, 38, 211, 0.06) !important; } html[data-theme="light"] .bg-fuchsia-500\/20 { background-color: rgba(192, 38, 211, 0.1) !important; } html[data-theme="light"] .bg-gradient-to-b.from-violet-500\/15 { background-image: linear-gradient(to bottom, rgba(124,58,237,0.08), rgba(250,250,255,0.85)) !important; } html[data-theme="light"] .bg-rose-500\/10 { background-color: rgba(244, 63, 94, 0.06) !important; } html[data-theme="light"] .bg-emerald-500\/\[0\.06\] { background-color: rgba(16, 185, 129, 0.04) !important; } html[data-theme="light"] .bg-violet-500\/\[0\.06\] { background-color: rgba(124, 58, 237, 0.04) !important; } /* ── /games page ── */ html[data-theme="light"] .bg-slate-800\/60 { background-color: rgba(245, 240, 255, 0.5) !important; } /* ── /host/[slug] live game page ── */ html[data-theme="light"] .bg-slate-700 { background-color: rgba(235, 228, 255, 0.5) !important; } html[data-theme="light"] .bg-slate-800\/80 { background-color: rgba(245, 240, 255, 0.7) !important; } html[data-theme="light"] .bg-black\/40 { background-color: rgba(0, 0, 0, 0.25) !important; } html[data-theme="light"] .bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.12) !important; } html[data-theme="light"] .bg-orange-500\/20 { background-color: rgba(249, 115, 22, 0.1) !important; } /* ── /[handle] creator profiles — inline styles handled by bg-slate-* overrides above ── */ html[data-theme="light"] .bg-gradient-to-b.from-white\/\[0\.04\].to-transparent { background: linear-gradient(to bottom, rgba(124,58,237,0.03), transparent) !important; } /* ── /series/[slug] ── */ html[data-theme="light"] .bg-slate-950\/70 { background-color: rgba(250, 250, 255, 0.82) !important; } html[data-theme="light"] .bg-slate-900\/70 { background-color: rgba(255, 255, 255, 0.78) !important; } html[data-theme="light"] .bg-cyan-500\/15 { background-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .bg-sky-500\/15 { background-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .bg-cyan-500\/10 { background-color: rgba(124, 58, 237, 0.06) !important; } /* ── Additional text colors used across pages (readable dark tones for light bg) ── */ html[data-theme="light"] .text-violet-200 { color: #7C3AED !important; } html[data-theme="light"] .text-emerald-200 { color: #059669 !important; } html[data-theme="light"] .text-emerald-300 { color: #059669 !important; } html[data-theme="light"] .text-sky-400 { color: #7C3AED !important; } html[data-theme="light"] .text-sky-300 { color: #6D28D9 !important; } html[data-theme="light"] .text-cyan-400 { color: #7C3AED !important; } html[data-theme="light"] .text-cyan-300 { color: #6D28D9 !important; } html[data-theme="light"] .text-cyan-200 { color: #7C3AED !important; } html[data-theme="light"] .text-rose-200 { color: #e11d48 !important; } html[data-theme="light"] .text-rose-100 { color: #f43f5e !important; } html[data-theme="light"] .text-rose-500 { color: #e11d48 !important; } html[data-theme="light"] .text-emerald-400 { color: #059669 !important; } html[data-theme="light"] .text-emerald-500 { color: #059669 !important; } html[data-theme="light"] .text-orange-400 { color: #ea580c !important; } html[data-theme="light"] .text-orange-200 { color: #ea580c !important; } html[data-theme="light"] .text-pink-200 { color: #db2777 !important; } html[data-theme="light"] .text-amber-200 { color: #d97706 !important; } html[data-theme="light"] .text-amber-900 { color: #92400e !important; } html[data-theme="light"] .text-fuchsia-300 { color: #c026d3 !important; } html[data-theme="light"] .text-emerald-400\/80 { color: rgba(5, 150, 105, 0.8) !important; } html[data-theme="light"] .text-sky-300\/80 { color: rgba(109, 40, 217, 0.8) !important; } html[data-theme="light"] .text-slate-200\/80 { color: rgba(51, 65, 85, 0.8) !important; } html[data-theme="light"] .text-slate-300\/80 { color: rgba(71, 85, 105, 0.8) !important; } html[data-theme="light"] .text-white\/95 { color: rgba(15, 10, 30, 0.95) !important; } html[data-theme="light"] .text-slate-600 { color: #475569 !important; } html[data-theme="light"] .text-slate-900 { color: #0f172a !important; } html[data-theme="light"] .text-slate-800 { color: #1e293b !important; } /* ── Additional border overrides used across pages ── */ html[data-theme="light"] .border-violet-500\/30 { border-color: rgba(124, 58, 237, 0.25) !important; } html[data-theme="light"] .border-violet-500\/50 { border-color: rgba(124, 58, 237, 0.4) !important; } html[data-theme="light"] .border-violet-500\/20 { border-color: rgba(124, 58, 237, 0.15) !important; } html[data-theme="light"] .border-violet-400\/30 { border-color: rgba(124, 58, 237, 0.25) !important; } html[data-theme="light"] .border-violet-400\/40 { border-color: rgba(124, 58, 237, 0.3) !important; } html[data-theme="light"] .border-sky-400\/40 { border-color: rgba(124, 58, 237, 0.3) !important; } html[data-theme="light"] .border-sky-500\/30 { border-color: rgba(124, 58, 237, 0.2) !important; } html[data-theme="light"] .border-sky-500\/40 { border-color: rgba(124, 58, 237, 0.3) !important; } html[data-theme="light"] .border-emerald-400\/30 { border-color: rgba(5, 150, 105, 0.25) !important; } html[data-theme="light"] .border-emerald-500\/20 { border-color: rgba(5, 150, 105, 0.15) !important; } html[data-theme="light"] .border-orange-400\/30 { border-color: rgba(234, 88, 12, 0.25) !important; } html[data-theme="light"] .border-orange-500\/30 { border-color: rgba(234, 88, 12, 0.25) !important; } html[data-theme="light"] .border-fuchsia-500\/30 { border-color: rgba(192, 38, 211, 0.25) !important; } html[data-theme="light"] .border-fuchsia-400\/30 { border-color: rgba(192, 38, 211, 0.25) !important; } html[data-theme="light"] .border-amber-500\/20 { border-color: rgba(245, 158, 11, 0.15) !important; } html[data-theme="light"] .border-rose-500\/30 { border-color: rgba(244, 63, 94, 0.25) !important; } html[data-theme="light"] .border-slate-900 { border-color: rgba(124, 58, 237, 0.08) !important; } /* ── Gradient button overrides (teams/about/credits pages) ── */ html[data-theme="light"] .bg-gradient-to-r.from-sky-500.to-blue-600 { background-image: linear-gradient(to right, #7C3AED, #6D28D9) !important; color: #fff !important; } html[data-theme="light"] .bg-gradient-to-r.from-sky-500.to-emerald-500 { background-image: linear-gradient(to right, #7C3AED, #059669) !important; color: #fff !important; } html[data-theme="light"] .bg-gradient-to-r.from-violet-600.to-fuchsia-600 { background-image: linear-gradient(to right, #7C3AED, #c026d3) !important; color: #fff !important; } html[data-theme="light"] .bg-gradient-to-r.from-indigo-500 { color: transparent !important; } html[data-theme="light"] .bg-gradient-to-tr.from-sky-500.to-violet-500 { background-image: linear-gradient(to top right, #7C3AED, #6D28D9) !important; } /* ── /for page use-case glow backgrounds (already themed via --theme-* but decorative glows need light values) ── */ html[data-theme="light"] .from-sky-500\/30 { --tw-gradient-from: rgba(124, 58, 237, 0.12) !important; } html[data-theme="light"] .from-emerald-500\/30 { --tw-gradient-from: rgba(5, 150, 105, 0.12) !important; } html[data-theme="light"] .from-orange-500\/30 { --tw-gradient-from: rgba(234, 88, 12, 0.12) !important; } html[data-theme="light"] .from-sky-500\/10 { --tw-gradient-from: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .from-violet-500\/10 { --tw-gradient-from: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .from-emerald-500\/10 { --tw-gradient-from: rgba(5, 150, 105, 0.06) !important; } html[data-theme="light"] .from-pink-500\/10 { --tw-gradient-from: rgba(219, 39, 119, 0.06) !important; } html[data-theme="light"] .to-amber-500\/5 { --tw-gradient-to: rgba(245, 158, 11, 0.02) !important; } /* ── Shadow overrides for custom dark shadows ── */ html[data-theme="light"] .shadow-sky-500\/20 { box-shadow: 0 4px 14px -4px rgba(124, 58, 237, 0.12) !important; } html[data-theme="light"] .shadow-sky-500\/40 { box-shadow: 0 4px 14px -4px rgba(124, 58, 237, 0.2) !important; } html[data-theme="light"] .shadow-\[0_20px_40px_-15px_rgba\(0\,0\,0\,0\.5\)\] { box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08) !important; } /* ── Global: radial gradient backgrounds used in /about and /for ── */ html[data-theme="light"] [class*="bg-[radial-gradient(ellipse_at_center"] { background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.05), transparent 70%) !important; } html[data-theme="light"] .bg-gradient-to-b.from-slate-900\/80.to-slate-950\/80 { background: linear-gradient(to bottom, rgba(255,255,255,0.88), rgba(250,250,255,0.85)) !important; } /* ── Hover states for buttons across all pages ── */ html[data-theme="light"] .hover\:bg-slate-900\/80:hover { background-color: rgba(255, 255, 255, 0.9) !important; } html[data-theme="light"] .hover\:bg-slate-700:hover { background-color: rgba(235, 228, 255, 0.6) !important; } html[data-theme="light"] .hover\:bg-violet-500\/20:hover { background-color: rgba(124, 58, 237, 0.12) !important; } html[data-theme="light"] .hover\:border-violet-400\/40:hover { border-color: rgba(124, 58, 237, 0.35) !important; } html[data-theme="light"] .hover\:text-sky-400:hover { color: #7C3AED !important; } html[data-theme="light"] .hover\:text-violet-300:hover { color: #6D28D9 !important; } html[data-theme="light"] .hover\:border-emerald-400\/30:hover { border-color: rgba(5, 150, 105, 0.3) !important; } /* ── mix-blend-screen (used on /hosts decorative blurs) ── */ html[data-theme="light"] .mix-blend-screen { mix-blend-mode: normal !important; } /* ── Creator sidebar — light mode ── */ html[data-theme="light"] .creator-sidebar { background: rgba(255, 255, 255, 0.92) !important; -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; border-color: rgba(124, 58, 237, 0.10) !important; box-shadow: 2px 0 20px -8px rgba(124, 58, 237, 0.08) !important; } /* User profile card */ html[data-theme="light"] .creator-sidebar [class*="bg-white/5"] { background: rgba(124, 58, 237, 0.04) !important; border-color: rgba(124, 58, 237, 0.10) !important; } /* Text colors */ html[data-theme="light"] .creator-sidebar .text-white { color: #1e293b !important; } html[data-theme="light"] .creator-sidebar .text-slate-400 { color: #64748b !important; } html[data-theme="light"] .creator-sidebar .text-slate-500 { color: #94a3b8 !important; } html[data-theme="light"] .creator-sidebar .text-slate-100 { color: #1e293b !important; } html[data-theme="light"] .creator-sidebar .text-sky-300 { color: #7C3AED !important; } html[data-theme="light"] .creator-sidebar .text-sky-200 { color: #7C3AED !important; } html[data-theme="light"] .creator-sidebar .text-sky-100\/90 { color: #7C3AED !important; } /* Active nav link */ html[data-theme="light"] .creator-sidebar a[aria-current="page"] { background: linear-gradient(to right, rgba(124, 58, 237, 0.10), rgba(124, 58, 237, 0.04)) !important; border-color: rgba(124, 58, 237, 0.25) !important; color: #7C3AED !important; box-shadow: 0 4px 16px -8px rgba(124, 58, 237, 0.2) !important; } /* Nav links hover */ html[data-theme="light"] .creator-sidebar a:hover { background: rgba(124, 58, 237, 0.04) !important; color: #1e293b !important; } html[data-theme="light"] .creator-sidebar a[aria-current="page"]:hover { color: #7C3AED !important; } /* Footer border */ html[data-theme="light"] .creator-sidebar [class*="border-t"][class*="border-white"] { border-color: rgba(124, 58, 237, 0.08) !important; } /* Collapse toggle button */ html[data-theme="light"] .creator-sidebar button[data-testid="creator-sidebar-toggle"] { background: #ffffff !important; border-color: rgba(124, 58, 237, 0.25) !important; color: #7C3AED !important; box-shadow: 0 4px 12px -4px rgba(124, 58, 237, 0.15) !important; } /* Brand lockup */ html[data-theme="light"] .creator-sidebar [class*="bg-[linear-gradient(145deg"] { background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 245, 255, 0.9)) !important; border-color: rgba(124, 58, 237, 0.15) !important; box-shadow: 0 8px 24px -12px rgba(124, 58, 237, 0.15) !important; } html[data-theme="light"] .creator-sidebar [class*="bg-slate-950/85"] { background: rgba(124, 58, 237, 0.08) !important; border-color: rgba(124, 58, 237, 0.12) !important; } /* Brand lockup inner overlays — suppress dark gradients */ html[data-theme="light"] .creator-sidebar [class*="bg-[radial-gradient(circle_at_28%"] { background: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .creator-sidebar [class*="bg-[radial-gradient(circle_at_top_left"] { opacity: 0.3 !important; } html[data-theme="light"] .creator-sidebar [class*="bg-sky-400/20"] { background: rgba(124, 58, 237, 0.12) !important; } /* Badge */ html[data-theme="light"] .creator-sidebar [class*="bg-sky-400/10"] { background: rgba(124, 58, 237, 0.08) !important; border-color: rgba(124, 58, 237, 0.2) !important; color: #7C3AED !important; } /* Team workspace link */ html[data-theme="light"] .creator-sidebar .text-emerald-400 { color: #059669 !important; } /* Mobile bottom nav — light mode */ html[data-theme="light"] nav[aria-label="Creator navigation mobile"] { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] nav[aria-label="Creator navigation mobile"] .text-slate-400 { color: #64748b !important; } html[data-theme="light"] nav[aria-label="Creator navigation mobile"] .text-sky-300 { color: #7C3AED !important; } html[data-theme="light"] nav[aria-label="Creator navigation mobile"] [class*="bg-sky-500/20"] { background: rgba(124, 58, 237, 0.10) !important; } /* ── Homepage: TestimonialsSection — light mode ── */ html[data-theme="light"] .homepage-shell .marquee-strip .rounded-2xl, html[data-theme="light"] .homepage-shell .marquee-strip [class*="rounded-2xl"] { background: rgba(255, 255, 255, 0.88) !important; border-color: rgba(124, 58, 237, 0.10) !important; box-shadow: 0 2px 16px -4px rgba(124, 58, 237, 0.06) !important; } /* Remove hard gradient edges on marquee fade */ html[data-theme="light"] .homepage-shell .marquee-wrap .from-slate-950, html[data-theme="light"] .homepage-shell .marquee-wrap [class*="from-slate-950"] { --tw-gradient-from: #F0EAFF !important; } /* Testimonial card gradient bg — clean white */ html[data-theme="light"] .homepage-shell .marquee-strip [class*="bg-[linear-gradient(180deg,rgba(15,23,42"] { background: rgba(255, 255, 255, 0.90) !important; } /* Ring offset for avatar circles in testimonials */ html[data-theme="light"] .homepage-shell .ring-offset-slate-900 { --tw-ring-offset-color: #F0EAFF !important; } /* ── Homepage: PricingSection — "Hear Smart Host" audio card ── */ html[data-theme="light"] .homepage-shell .border-violet-500\/20.bg-violet-500\/\[0\.06\] { background: rgba(124, 58, 237, 0.06) !important; border-color: rgba(124, 58, 237, 0.18) !important; } html[data-theme="light"] .homepage-shell .bg-violet-500\/20 { background-color: rgba(124, 58, 237, 0.15) !important; } html[data-theme="light"] .homepage-shell .text-violet-200 { color: #7C3AED !important; } html[data-theme="light"] .homepage-shell .text-violet-300 { color: #6D28D9 !important; } html[data-theme="light"] .homepage-shell .text-violet-300\/60 { color: rgba(109, 40, 217, 0.65) !important; } html[data-theme="light"] .homepage-shell .bg-violet-400\/50 { background-color: rgba(124, 58, 237, 0.50) !important; } /* ── Homepage: FinalCTA — bottom section ── */ html[data-theme="light"] .homepage-shell .bg-gradient-to-br.from-sky-900\/50 { background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(124, 58, 237, 0.02), rgba(167, 139, 250, 0.03)) !important; } html[data-theme="light"] .homepage-shell .border-sky-500\/20 { border-color: rgba(124, 58, 237, 0.12) !important; } html[data-theme="light"] .homepage-shell .text-amber-400 { color: #d97706 !important; } /* ── Homepage: reduce excessive spacing between sections in light mode ── */ html[data-theme="light"] .homepage-shell main { gap: 2rem !important; } html[data-theme="light"] .homepage-shell main > *:not(header) { margin-top: 0 !important; } /* ── 1. Backdrops — frosted light glass ── */ html[data-theme="light"] .generated-game-backdrop { background: rgba(240, 234, 255, 0.85) !important; -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; } html[data-theme="light"] .publish-success-backdrop { background: rgba(240, 234, 255, 0.85) !important; -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; } /* ── 2. Generated Game Modal ("It's ready!") ── */ html[data-theme="light"] .generated-game-modal { background: #ffffff !important; border-color: rgba(124, 58, 237, 0.15) !important; box-shadow: 0 25px 80px -12px rgba(124, 58, 237, 0.12), 0 0 0 1px rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .generated-game-header { background: #ffffff !important; border-bottom-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .generated-game-header h3 { color: #1a0e2e !important; } html[data-theme="light"] .generated-game-header p { color: #5b4a7a !important; } html[data-theme="light"] .generated-game-header button { color: #5b4a7a !important; } html[data-theme="light"] .generated-game-header button:hover { background: rgba(124, 58, 237, 0.05) !important; color: #1a0e2e !important; } html[data-theme="light"] .generated-game-body { background: #faf8ff !important; } /* All text inside generated-game-modal — catch-all via wildcard descendant */ html[data-theme="light"] .generated-game-modal [class*="text-white"] { color: #1a0e2e !important; } html[data-theme="light"] .generated-game-modal [class*="text-slate-50"] { color: #1a0e2e !important; } html[data-theme="light"] .generated-game-modal [class*="text-slate-100"] { color: #1a0e2e !important; } html[data-theme="light"] .generated-game-modal [class*="text-slate-200"] { color: #2d1f50 !important; } html[data-theme="light"] .generated-game-modal [class*="text-slate-300"] { color: #3d2e66 !important; } html[data-theme="light"] .generated-game-modal [class*="text-slate-400"] { color: #5b4a7a !important; } html[data-theme="light"] .generated-game-modal [class*="text-slate-500"] { color: #7a6b96 !important; } html[data-theme="light"] .generated-game-modal [class*="text-sky-1"] { color: #4c1d95 !important; } html[data-theme="light"] .generated-game-modal [class*="text-sky-2"] { color: #5b21b6 !important; } html[data-theme="light"] .generated-game-modal [class*="text-sky-3"] { color: #6d28d9 !important; } html[data-theme="light"] .generated-game-modal [class*="text-sky-4"] { color: #7c3aed !important; } html[data-theme="light"] .generated-game-modal [class*="text-green-4"] { color: #059669 !important; } html[data-theme="light"] .generated-game-modal [class*="text-emerald-2"] { color: #059669 !important; } html[data-theme="light"] .generated-game-modal [class*="text-rose-2"] { color: #be123c !important; } html[data-theme="light"] .generated-game-modal [class*="text-rose-3"] { color: #be123c !important; } html[data-theme="light"] .generated-game-modal [class*="text-purple-1"] { color: #5b21b6 !important; } html[data-theme="light"] .generated-game-modal [class*="text-purple-3"] { color: #7c3aed !important; } /* Borders inside modal */ html[data-theme="light"] .generated-game-modal [class*="border-white/"] { border-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .generated-game-modal [class*="border-white\\/"] { border-color: rgba(124, 58, 237, 0.1) !important; } /* Backgrounds inside modal */ html[data-theme="light"] .generated-game-modal [class*="bg-white/5"], html[data-theme="light"] .generated-game-modal [class*="bg-white\\/5"] { background-color: rgba(255, 255, 255, 0.8) !important; } html[data-theme="light"] .generated-game-modal [class*="bg-slate-9"] { background-color: #f5f1ff !important; } html[data-theme="light"] .generated-game-modal [class*="bg-slate-8"] { background-color: #ede8fa !important; } html[data-theme="light"] .generated-game-modal [class*="bg-white/10"], html[data-theme="light"] .generated-game-modal [class*="bg-white\\/10"] { background-color: rgba(124, 58, 237, 0.04) !important; } /* Question carousel card */ html[data-theme="light"] .generated-game-modal [class*="border-sky-500"] { border-color: rgba(124, 58, 237, 0.12) !important; } html[data-theme="light"] .generated-game-modal [class*="shadow-\\[0_0_20px"] { box-shadow: 0 4px 24px -4px rgba(124, 58, 237, 0.06) !important; } /* Correct answer row */ html[data-theme="light"] .generated-game-modal [class*="border-green-500"] { border-color: rgba(5, 150, 105, 0.2) !important; } html[data-theme="light"] .generated-game-modal [class*="bg-green-500"] { background-color: rgba(5, 150, 105, 0.06) !important; } /* Title selection pills */ html[data-theme="light"] .generated-game-modal [class*="border-sky-400"] { border-color: #7c3aed !important; } html[data-theme="light"] .generated-game-modal [class*="bg-sky-500"] { background-color: rgba(124, 58, 237, 0.08) !important; } /* Buttons: Start Over, Regenerate, Customize */ html[data-theme="light"] .generated-game-modal [class*="border-rose-500"] { border-color: rgba(190, 18, 60, 0.25) !important; } html[data-theme="light"] .generated-game-modal [class*="bg-rose-500"] { background-color: rgba(190, 18, 60, 0.06) !important; } /* Smart Host section */ html[data-theme="light"] .generated-game-modal [class*="border-purple-500"] { border-color: rgba(124, 58, 237, 0.12) !important; } html[data-theme="light"] .generated-game-modal [class*="bg-purple-500"] { background-color: rgba(124, 58, 237, 0.04) !important; } html[data-theme="light"] .generated-game-modal [class*="border-emerald-500"] { border-color: rgba(5, 150, 105, 0.12) !important; } html[data-theme="light"] .generated-game-modal [class*="bg-emerald-500"] { background-color: rgba(5, 150, 105, 0.04) !important; } /* ── 3. Publish Success Modal ("Your gameshow is live!") ── */ html[data-theme="light"] .publish-success-modal { background: linear-gradient(180deg, #ffffff, #faf7ff) !important; border-color: rgba(124, 58, 237, 0.15) !important; box-shadow: 0 25px 80px -12px rgba(124, 58, 237, 0.12), 0 0 0 1px rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .publish-success-modal [class*="text-white"] { color: #1a0e2e !important; } html[data-theme="light"] .publish-success-modal [class*="text-slate-50"] { color: #1a0e2e !important; } html[data-theme="light"] .publish-success-modal [class*="text-slate-1"] { color: #1a0e2e !important; } html[data-theme="light"] .publish-success-modal [class*="text-slate-3"] { color: #3d2e66 !important; } html[data-theme="light"] .publish-success-modal [class*="text-slate-4"] { color: #5b4a7a !important; } html[data-theme="light"] .publish-success-modal [class*="text-slate-5"] { color: #7a6b96 !important; } html[data-theme="light"] .publish-success-modal [class*="text-emerald-3"] { color: #059669 !important; } html[data-theme="light"] .publish-success-modal [class*="text-sky-2"] { color: #5b21b6 !important; } html[data-theme="light"] .publish-success-modal [class*="text-sky-3"] { color: #6d28d9 !important; } html[data-theme="light"] .publish-success-modal [class*="text-sky-4"] { color: #7c3aed !important; } html[data-theme="light"] .publish-success-modal [class*="text-purple-3"] { color: #7c3aed !important; } html[data-theme="light"] .publish-success-modal [class*="text-purple-4"] { color: #6d28d9 !important; } html[data-theme="light"] .publish-success-modal [class*="text-red-3"] { color: #dc2626 !important; } html[data-theme="light"] .publish-success-modal [class*="text-green-4"] { color: #059669 !important; } /* Borders & surfaces */ html[data-theme="light"] .publish-success-modal [class*="border-white/"] { border-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .publish-success-modal [class*="bg-white/5"], html[data-theme="light"] .publish-success-modal [class*="bg-white\\/5"] { background-color: rgba(250, 247, 255, 0.8) !important; } html[data-theme="light"] .publish-success-modal [class*="bg-white/\\[0"] { background-color: rgba(245, 240, 255, 0.9) !important; } html[data-theme="light"] .publish-success-modal [class*="bg-slate-950"], html[data-theme="light"] .publish-success-modal [class*="bg-slate-9"] { background-color: #ffffff !important; } html[data-theme="light"] .publish-success-modal [class*="border-slate-6"] { border-color: rgba(124, 58, 237, 0.15) !important; } /* QR code container glow */ html[data-theme="light"] .publish-success-modal [class*="shadow-\\[0_0_30px"] { box-shadow: 0 4px 20px -4px rgba(124, 58, 237, 0.1) !important; } /* Ring colors */ html[data-theme="light"] .publish-success-modal [class*="ring-purple-"] { --tw-ring-color: rgba(124, 58, 237, 0.25) !important; } html[data-theme="light"] .publish-success-modal [class*="ring-emerald-"] { --tw-ring-color: rgba(5, 150, 105, 0.2) !important; } html[data-theme="light"] .publish-success-modal [class*="ring-red-"] { --tw-ring-color: rgba(220, 38, 38, 0.2) !important; } /* Ring offset — change from dark to light bg */ html[data-theme="light"] .publish-success-modal [class*="ring-offset-\\[#020617\\]"] { --tw-ring-offset-color: #faf7ff !important; } /* Open Game button → violet gradient */ html[data-theme="light"] .publish-success-modal [class*="from-sky-500"][class*="to-cyan"] { background: linear-gradient(to right, #7c3aed, #a855f7) !important; color: white !important; box-shadow: 0 4px 20px -4px rgba(124, 58, 237, 0.35) !important; } html[data-theme="light"] .publish-success-modal .text-slate-950 { color: white !important; } /* ── Page body ── */ html[data-theme="light"] .create-page { color: #1A1A2E; } /* ── Hero section — gradient card ── */ html[data-theme="light"] .create-hero { background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(245,240,255,0.92)) !important; border-color: rgba(124, 58, 237, 0.12) !important; box-shadow: 0 30px 120px -80px rgba(124, 58, 237, 0.25) !important; } /* ── Generic dark bg overrides inside create-page ── */ html[data-theme="light"] .create-page [class*="bg-white/[0.0"] { background-color: rgba(255, 255, 255, 0.7) !important; } html[data-theme="light"] .create-page .bg-white\/\[0\.045\] { background-color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="light"] .create-page .bg-white\/\[0\.04\] { background-color: rgba(255, 255, 255, 0.6) !important; } html[data-theme="light"] .create-page .bg-white\/\[0\.03\] { background-color: rgba(255, 255, 255, 0.5) !important; } html[data-theme="light"] .create-page .bg-white\/\[0\.05\] { background-color: rgba(255, 255, 255, 0.6) !important; } html[data-theme="light"] .create-page .bg-white\/5 { background-color: rgba(124, 58, 237, 0.03) !important; } /* Section cards & panels */ html[data-theme="light"] .create-brief { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(124, 58, 237, 0.1) !important; box-shadow: 0 8px 40px -12px rgba(124, 58, 237, 0.08); } html[data-theme="light"] .create-page .bg-slate-950\/40 { background-color: rgba(255, 255, 255, 0.7) !important; } html[data-theme="light"] .create-page .bg-slate-950\/60 { background-color: rgba(255, 255, 255, 0.8) !important; } html[data-theme="light"] .create-page .bg-slate-950\/75 { background-color: rgba(255, 255, 255, 0.9) !important; } html[data-theme="light"] .create-page .bg-slate-950\/95 { background-color: rgba(255, 255, 255, 0.97) !important; } html[data-theme="light"] .create-page .bg-slate-900\/50 { background-color: rgba(255, 255, 255, 0.65) !important; } html[data-theme="light"] .create-page .bg-slate-900\/60 { background-color: rgba(255, 255, 255, 0.75) !important; } html[data-theme="light"] .create-page .bg-slate-900\/70 { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .create-page .bg-slate-800\/60 { background-color: rgba(245, 240, 255, 0.6) !important; } html[data-theme="light"] .create-page .bg-slate-800\/40 { background-color: rgba(245, 240, 255, 0.4) !important; } /* Scoreboard entry card */ html[data-theme="light"] .create-page [class*="bg-[linear-gradient(135deg,rgba(2,6,23"] { background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(245,240,255,0.9)) !important; } /* ── Text colors ── */ html[data-theme="light"] .create-page .text-slate-50 { color: #0f172a !important; } html[data-theme="light"] .create-page .text-slate-100 { color: #1e293b !important; } html[data-theme="light"] .create-page .text-slate-200 { color: #334155 !important; } html[data-theme="light"] .create-page [class*="text-slate-200/"] { color: #475569 !important; } html[data-theme="light"] .create-page .text-slate-300 { color: #475569 !important; } html[data-theme="light"] .create-page [class*="text-slate-300/"] { color: #64748b !important; } html[data-theme="light"] .create-page .text-slate-400 { color: #64748b !important; } html[data-theme="light"] .create-page .text-slate-500 { color: #6b7280 !important; } html[data-theme="light"] .create-page .text-slate-900 { color: #0f172a !important; } html[data-theme="light"] .create-page .text-slate-950 { color: #0f172a !important; } html[data-theme="light"] .create-page .text-white { color: #1A1A2E !important; } /* Sky / cyan accent text → violet brand */ html[data-theme="light"] .create-page .text-sky-100 { color: #6D28D9 !important; } html[data-theme="light"] .create-page [class*="text-sky-1"] { color: #6D28D9 !important; } html[data-theme="light"] .create-page .text-sky-200 { color: #7C3AED !important; } html[data-theme="light"] .create-page [class*="text-sky-2"] { color: #7C3AED !important; } html[data-theme="light"] .create-page .text-sky-400 { color: #7C3AED !important; } html[data-theme="light"] .create-page .text-cyan-400 { color: #7C3AED !important; } /* Emerald accent → green stays but slightly darker */ html[data-theme="light"] .create-page .text-emerald-100 { color: #065f46 !important; } html[data-theme="light"] .create-page .text-emerald-300 { color: #059669 !important; } html[data-theme="light"] .create-page .text-emerald-400 { color: #059669 !important; } /* Rose/error text — keep readable */ html[data-theme="light"] .create-page .text-rose-100 { color: #9f1239 !important; } html[data-theme="light"] .create-page .text-rose-200 { color: #be123c !important; } html[data-theme="light"] .create-page [class*="text-rose-200/"] { color: #be123c !important; } /* ── Borders ── */ html[data-theme="light"] .create-page .border-white\/5 { border-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .create-page .border-white\/8 { border-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .create-page .border-white\/10 { border-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .create-page .border-white\/15 { border-color: rgba(124, 58, 237, 0.14) !important; } html[data-theme="light"] .create-page .border-white\/20 { border-color: rgba(124, 58, 237, 0.18) !important; } html[data-theme="light"] .create-page [class*="border-white/[0.0"] { border-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .create-page .border-slate-600 { border-color: rgba(124, 58, 237, 0.15) !important; } html[data-theme="light"] .create-page .border-slate-700 { border-color: rgba(124, 58, 237, 0.12) !important; } html[data-theme="light"] .create-page .border-slate-800 { border-color: rgba(124, 58, 237, 0.08) !important; } /* Sky/emerald accent borders */ html[data-theme="light"] .create-page [class*="border-sky-400/"] { border-color: rgba(124, 58, 237, 0.25) !important; } html[data-theme="light"] .create-page [class*="border-sky-500/"] { border-color: rgba(124, 58, 237, 0.3) !important; } html[data-theme="light"] .create-page [class*="border-emerald-400/"] { border-color: rgba(16, 185, 129, 0.25) !important; } html[data-theme="light"] .create-page [class*="border-emerald-500/"] { border-color: rgba(16, 185, 129, 0.3) !important; } html[data-theme="light"] .create-page [class*="border-rose-500/"] { border-color: rgba(244, 63, 94, 0.25) !important; } /* ── Background accents ── */ html[data-theme="light"] .create-page [class*="bg-sky-500/1"] { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .create-page [class*="bg-sky-500/2"] { background-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .create-page [class*="bg-emerald-500/1"] { background-color: rgba(16, 185, 129, 0.08) !important; } html[data-theme="light"] .create-page [class*="bg-rose-500/1"] { background-color: rgba(244, 63, 94, 0.06) !important; } /* ── Inputs & form controls ── */ html[data-theme="light"] .create-page input:not([type="checkbox"]):not([type="radio"]), html[data-theme="light"] .create-page textarea, html[data-theme="light"] .create-page select { background-color: #ffffff !important; border-color: rgba(124, 58, 237, 0.12) !important; color: #1A1A2E !important; } html[data-theme="light"] .create-page input::placeholder, html[data-theme="light"] .create-page textarea::placeholder { color: #9494AB !important; } html[data-theme="light"] .create-page input:focus, html[data-theme="light"] .create-page textarea:focus, html[data-theme="light"] .create-page select:focus { border-color: #7C3AED !important; } html[data-theme="light"] .create-page select option { background-color: #ffffff !important; color: #1A1A2E !important; } /* Primary CTA — sky → violet brand */ html[data-theme="light"] .create-page .bg-sky-500 { background-color: #7C3AED !important; color: #ffffff !important; } html[data-theme="light"] .create-page .hover\:bg-sky-400:hover { background-color: #6D28D9 !important; } /* Secondary / ghost buttons */ html[data-theme="light"] .create-page button[class*="border-slate-7"], html[data-theme="light"] .create-page a[class*="border-slate-7"], html[data-theme="light"] .create-page button[class*="border-slate-6"], html[data-theme="light"] .create-page a[class*="border-slate-6"] { border-color: rgba(124, 58, 237, 0.15) !important; color: #4B5563 !important; } html[data-theme="light"] .create-page button:hover[class*="border-slate-7"], html[data-theme="light"] .create-page button:hover[class*="border-slate-6"] { border-color: rgba(124, 58, 237, 0.35) !important; color: #1A1A2E !important; } html[data-theme="light"] .create-page .hover\:border-sky-400:hover { border-color: #7C3AED !important; } html[data-theme="light"] .create-page .hover\:text-white:hover { color: #7C3AED !important; } /* Disabled state */ html[data-theme="light"] .create-page .disabled\:bg-slate-700:disabled { background-color: #e2e8f0 !important; } html[data-theme="light"] .create-page .disabled\:text-slate-500:disabled { color: #94a3b8 !important; } html[data-theme="light"] .create-page .disabled\:border-slate-800:disabled { border-color: #e2e8f0 !important; } /* Quick start cards hover */ html[data-theme="light"] .create-page .hover\:border-sky-400\/50:hover { border-color: rgba(124, 58, 237, 0.35) !important; } html[data-theme="light"] .create-page .hover\:bg-sky-500\/10:hover { background-color: rgba(124, 58, 237, 0.06) !important; } /* ── Dividers ── */ html[data-theme="light"] .create-page .bg-white\/8 { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .create-page .h-px.bg-white\/8 { background-color: rgba(124, 58, 237, 0.08) !important; } /* ── Status bar ── */ html[data-theme="light"] .create-page [class*="border-sky-500/3"][class*="bg-sky-500/1"] { background-color: rgba(124, 58, 237, 0.06) !important; border-color: rgba(124, 58, 237, 0.2) !important; } /* ── Shadows — remove dark glows, add soft violet ── */ html[data-theme="light"] .create-page [class*="shadow-[0_30px_120px"] { box-shadow: 0 8px 40px -12px rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .create-page [class*="shadow-[0_20px_80px"] { box-shadow: 0 6px 32px -8px rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .create-page [class*="shadow-[0_24px_60px"] { box-shadow: 0 8px 32px -8px rgba(124, 58, 237, 0.08) !important; } /* ── Preview dialog ── */ html[data-theme="light"] .create-page .bg-slate-950\/95 { background-color: rgba(240, 234, 255, 0.96) !important; } html[data-theme="light"] .create-page .bg-slate-900\/90 { background-color: rgba(255, 255, 255, 0.92) !important; } /* ── Mobile generation toast ── */ html[data-theme="light"] .create-page [data-testid="mobile-generation-toast"] [class*="bg-slate-950/9"] { background-color: rgba(255, 255, 255, 0.96) !important; border-color: rgba(124, 58, 237, 0.2) !important; } /* ── Spinner / progress bar ── */ html[data-theme="light"] .create-page .bg-sky-400 { background-color: #7C3AED !important; } html[data-theme="light"] .create-page [class*="border-sky-200/3"] { border-color: rgba(124, 58, 237, 0.2) !important; } html[data-theme="light"] .create-page [class*="border-t-sky-100"] { border-top-color: #7C3AED !important; } /* Host grid chips — light mode */ html[data-theme="light"] .host-chip { background: rgba(255, 255, 255, 0.8) !important; border-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .host-chip:hover { background: rgba(124, 58, 237, 0.04) !important; border-color: rgba(124, 58, 237, 0.2) !important; } html[data-theme="light"] .host-chip[class*="border-violet-400"] { background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(124, 58, 237, 0.03)) !important; border-color: rgba(124, 58, 237, 0.35) !important; box-shadow: 0 0 12px -3px rgba(124, 58, 237, 0.2) !important; color: #5B21B6 !important; /* selected host name visible on light bg */ } /* Smart Voice card — text visible in light mode (dark: prefix overrides base when OS is dark) */ html[data-theme="light"] .smart-voice-card strong { color: #5B21B6 !important; } html[data-theme="light"] .smart-voice-card .text-xs, html[data-theme="light"] .smart-voice-card [class*="text-violet-6"], html[data-theme="light"] .smart-voice-card [class*="text-violet-1"], html[data-theme="light"] .smart-voice-card [class*="text-violet-7"] { color: #6D28D9 !important; } /* CreationForm section cards — light mode */ html[data-theme="light"] .create-page [class*="bg-[linear-gradient(180deg,rgba(15,23,42"] { background: rgba(255, 255, 255, 0.75) !important; border-color: rgba(124, 58, 237, 0.08) !important; box-shadow: 0 4px 20px -10px rgba(124, 58, 237, 0.08) !important; } /* ContextHint (Better Long-Form Results) — light mode */ html[data-theme="light"] .context-hint { background: linear-gradient(180deg, rgba(245, 158, 11, 0.12), rgba(255, 251, 235, 0.9)) !important; border-color: rgba(217, 119, 6, 0.3) !important; box-shadow: 0 4px 16px -8px rgba(245, 158, 11, 0.2) !important; } html[data-theme="light"] .context-hint p, html[data-theme="light"] .context-hint li { color: #78350f !important; } html[data-theme="light"] .context-hint span { color: #b45309 !important; } html[data-theme="light"] .context-hint button { color: #92400e !important; border-color: rgba(217, 119, 6, 0.2) !important; } /* ── Link mode / EvidenceSection dark panels ── */ html[data-theme="light"] .create-page .bg-slate-900\/60 { background-color: rgba(255, 255, 255, 0.75) !important; } /* ── Starter lane (first run) ── */ html[data-theme="light"] .create-page [class*="bg-sky-500/[0.08]"] { background-color: rgba(124, 58, 237, 0.04) !important; } html[data-theme="light"] .create-page [class*="border-sky-400/15"] { border-color: rgba(124, 58, 237, 0.12) !important; } /* ── Auth modal / upsell inside create ── */ html[data-theme="light"] .create-page [class*="bg-sky-500/10"][class*="border-sky-400/2"] { background-color: rgba(124, 58, 237, 0.04) !important; border-color: rgba(124, 58, 237, 0.15) !important; } /* ── Upgrade status banners ── */ html[data-theme="light"] .create-page [class*="border-emerald-400/35"][class*="bg-emerald-500/10"] { background-color: rgba(16, 185, 129, 0.06) !important; border-color: rgba(16, 185, 129, 0.2) !important; } html[data-theme="light"] .create-page .text-emerald-100 { color: #065f46 !important; } /* ── Audio generating indicator ── */ html[data-theme="light"] .create-page [class*="border-emerald-500/20"][class*="bg-emerald-500/10"] { background-color: rgba(16, 185, 129, 0.05) !important; border-color: rgba(16, 185, 129, 0.15) !important; } html[data-theme="light"] .create-page [class*="text-emerald-100/8"] { color: #065f46 !important; } /* ── Keep CTA button text white ── */ html[data-theme="light"] .create-page button.bg-sky-500 .text-slate-900, html[data-theme="light"] .create-page .bg-sky-500 { color: #ffffff !important; } html[data-theme="light"] .create-page a.bg-sky-500 { color: #ffffff !important; } /* ── GenerationModeToggle ── */ html[data-theme="light"] .create-page .bg-slate-900\/60[class*="rounded"] { background-color: rgba(255, 255, 255, 0.8) !important; } /* ── ThemeToggle positioning inside hero ── */ html[data-theme="light"] .create-hero .flex.items-center.gap-3 > button[aria-label="Toggle Theme"] { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(124, 58, 237, 0.12) !important; } /* ══════════════════════════════════════════════════════════════════════ TEAMS PAGE — Light Mode ══════════════════════════════════════════════════════════════════════ */ /* Hero text */ /* Feature cards + pricing inner panel */ html[data-theme="light"] .teams-page .bg-slate-900\/40, html[data-theme="light"] .teams-page [class*="bg-slate-900/40"] { background-color: rgba(255, 255, 255, 0.85) !important; } /* Icon bg */ html[data-theme="light"] .teams-page [class*="bg-sky-500/2"] { background-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .teams-page [class*="bg-emerald-500/2"] { background-color: rgba(16, 185, 129, 0.08) !important; } html[data-theme="light"] .teams-page [class*="bg-violet-500/2"] { background-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .teams-page [class*="bg-orange-500/2"] { background-color: rgba(234, 88, 12, 0.08) !important; } /* Pricing card — catch both Tailwind v3 and v4 class formats */ html[data-theme="light"] .teams-page [class*="bg-[#091129]"], html[data-theme="light"] .teams-page [class*="bg-\\[\\#091129\\]"] { background-color: rgba(255, 255, 255, 0.95) !important; } html[data-theme="light"] .teams-page [class*="border-sky-500/4"] { border-color: rgba(124, 58, 237, 0.2) !important; } html[data-theme="light"] .teams-page [class*="shadow-[0_0_80px"] { box-shadow: 0 16px 64px -16px rgba(124, 58, 237, 0.12) !important; } /* Pricing card glow orbs */ html[data-theme="light"] .teams-page [class*="blur-[120px]"] { opacity: 0.15 !important; } /* CTA button */ html[data-theme="light"] .teams-page [class*="shadow-[0_0_20px_rgba(14,165,233"] { box-shadow: 0 4px 20px rgba(124, 58, 237, 0.2) !important; } /* Secondary CTA */ /* Badge */ html[data-theme="light"] .teams-page [class*="border-sky-400/3"][class*="bg-sky-500/1"] { background-color: rgba(124, 58, 237, 0.06) !important; border-color: rgba(124, 58, 237, 0.2) !important; } html[data-theme="light"] .teams-page [class*="border-emerald-400/3"][class*="bg-emerald-500/1"] { background-color: rgba(16, 185, 129, 0.06) !important; border-color: rgba(16, 185, 129, 0.2) !important; } /* Bullets */ /* Gradient CTA button override */ html[data-theme="light"] .teams-page [class*="from-sky-500"][class*="to-emerald-500"] { background-image: linear-gradient(to right, #7C3AED, #6D28D9) !important; } html[data-theme="light"] .teams-page [class*="bg-[#091129]/60"], html[data-theme="light"] .teams-page [class*="bg-\\[\\#091129\\]/60"] { background-color: transparent !important; } /* CTA button hover gradient */ html[data-theme="light"] .teams-page [class*="from-sky-400"][class*="to-emerald-400"] { background-image: linear-gradient(to right, #6D28D9, #5B21B6) !important; } /* CTA button shadow */ html[data-theme="light"] .teams-page [class*="shadow-[0_0_30px"] { box-shadow: 0 4px 24px rgba(124, 58, 237, 0.25) !important; } html[data-theme="light"] .teams-page [class*="shadow-[0_0_40px"] { box-shadow: 0 4px 28px rgba(124, 58, 237, 0.3) !important; } /* Pricing inner panel — override shadow-inner */ /* Pricing check icons */ /* Pricing inner text */ /* Drop shadow on price */ /* mix-blend-screen glows — hide in light mode */ html[data-theme="light"] .teams-page [class*="mix-blend-screen"] { opacity: 0 !important; } /* Gradient overlay in pricing card */ html[data-theme="light"] .teams-page [class*="from-sky-500/5"][class*="to-emerald-500/5"] { background-image: linear-gradient(to bottom right, rgba(124, 58, 237, 0.03), rgba(16, 185, 129, 0.03)) !important; } /* Ping animation */ /* ══════════════════════════════════════════════════════════════════════ HOSTS PAGE — Light Mode ══════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .hosts-page { background: linear-gradient(180deg, #F0EAFF 0%, #FAF7FF 48%, #F0EAFF 100%) !important; color: #1A1A2E; } /* Ambient background glows — soften */ html[data-theme="light"] .hosts-page [class*="mix-blend-screen"] { opacity: 0.15 !important; mix-blend-mode: normal !important; } html[data-theme="light"] .hosts-page [class*="blur-[150px]"], html[data-theme="light"] .hosts-page [class*="blur-[140px]"] { opacity: 0.12 !important; } /* The HostStarterSection itself uses CSS variables which are already correctly set for light mode. These additional overrides handle the host-page-specific gradients and violet label colors. */ html[data-theme="light"] .hosts-page .text-violet-400, html[data-theme="light"] .hosts-page .dark\:text-violet-400 { color: #7C3AED !important; } html[data-theme="light"] .hosts-page .text-violet-500 { color: #7C3AED !important; } html[data-theme="light"] .hosts-page .dark\:text-violet-300 { color: #7C3AED !important; } /* Main container card on hosts page */ html[data-theme="light"] .hosts-page #templates > div > [class*="rounded-[2rem]"] { background: rgba(255, 255, 255, 0.80) !important; border-color: rgba(124, 58, 237, 0.10) !important; box-shadow: 0 4px 32px -8px rgba(124, 58, 237, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8) inset !important; } /* Host carousel cards */ html[data-theme="light"] .hosts-page #templates button[aria-pressed="false"] { background: rgba(255, 255, 255, 0.75) !important; border-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .hosts-page #templates button[aria-pressed="false"]:hover { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(124, 58, 237, 0.18) !important; box-shadow: 0 4px 16px -4px rgba(124, 58, 237, 0.10) !important; } html[data-theme="light"] .hosts-page #templates button[aria-pressed="true"] { background: linear-gradient(145deg, rgba(124, 58, 237, 0.06), rgba(192, 38, 211, 0.03)) !important; border-color: rgba(124, 58, 237, 0.30) !important; box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.08), 0 4px 20px -6px rgba(124, 58, 237, 0.15) !important; --tw-ring-color: rgba(124, 58, 237, 0.35) !important; } /* Live badge */ html[data-theme="light"] .hosts-page #templates button[aria-pressed="true"] [class*="border-violet-400"] { border-color: rgba(124, 58, 237, 0.25) !important; background: rgba(124, 58, 237, 0.08) !important; color: #7C3AED !important; } /* Host card overlay gradient — reduce opacity */ html[data-theme="light"] .hosts-page #templates button .opacity-\[0\.12\] { opacity: 0.04 !important; } /* Carousel nav buttons */ html[data-theme="light"] .hosts-page #templates .inline-flex.h-10.w-10 { border-color: rgba(124, 58, 237, 0.12) !important; background: rgba(255, 255, 255, 0.8) !important; color: #6b7280 !important; } html[data-theme="light"] .hosts-page #templates .inline-flex.h-10.w-10:hover { border-color: rgba(124, 58, 237, 0.25) !important; background: rgba(124, 58, 237, 0.06) !important; color: #7C3AED !important; } /* Spotlight left panel */ html[data-theme="light"] .hosts-page #templates .mt-8 > div:first-child { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(124, 58, 237, 0.12) !important; box-shadow: 0 4px 24px -8px rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .hosts-page #templates .mt-8 > div:first-child > div:first-child { background: rgba(255, 255, 255, 0.95) !important; } /* Host profile inner card */ html[data-theme="light"] .hosts-page #templates .mt-8 .rounded-\[1\.7rem\] { background: linear-gradient(145deg, rgba(124, 58, 237, 0.03), rgba(255, 255, 255, 0.9)) !important; border-color: rgba(124, 58, 237, 0.10) !important; } html[data-theme="light"] .hosts-page #templates .mt-8 .opacity-\[0\.12\].blur-2xl { opacity: 0.06 !important; } /* Best-for tags */ html[data-theme="light"] .hosts-page #templates .mt-8 .flex-wrap .rounded-full { background: rgba(124, 58, 237, 0.04) !important; border-color: rgba(124, 58, 237, 0.10) !important; color: #4b5563 !important; } /* Voice preview area */ html[data-theme="light"] .hosts-page #templates .mt-8 .rounded-\[1\.6rem\] { background: linear-gradient(145deg, rgba(124, 58, 237, 0.03), rgba(255, 255, 255, 0.9)) !important; border-color: rgba(124, 58, 237, 0.10) !important; } /* Play button */ html[data-theme="light"] .hosts-page #templates .mt-8 .h-16.w-16 { background: linear-gradient(135deg, #7C3AED, #9333EA) !important; box-shadow: 0 4px 20px -4px rgba(124, 58, 237, 0.35) !important; color: #fff !important; border-color: rgba(124, 58, 237, 0.30) !important; } /* Play button inner ring */ html[data-theme="light"] .hosts-page #templates .mt-8 .h-16.w-16 .inset-2 { border-color: rgba(255, 255, 255, 0.30) !important; } /* Starter packs right panel */ html[data-theme="light"] .hosts-page #templates .mt-8 > div:nth-child(2) { background: rgba(255, 255, 255, 0.80) !important; border-color: rgba(124, 58, 237, 0.10) !important; } /* Pack cards gradient overlays */ html[data-theme="light"] .hosts-page #templates .mt-8 article { border-color: rgba(124, 58, 237, 0.10) !important; } html[data-theme="light"] .hosts-page #templates .mt-8 article:first-child { border-color: rgba(124, 58, 237, 0.18) !important; } /* Pack card "Why this works" box */ html[data-theme="light"] .hosts-page #templates .mt-8 article .rounded-2xl { background: rgba(124, 58, 237, 0.03) !important; border-color: rgba(124, 58, 237, 0.08) !important; } /* Pack card badges/chips */ html[data-theme="light"] .hosts-page #templates .mt-8 article .rounded-full { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(124, 58, 237, 0.10) !important; } /* CTA "Play free preview" button */ html[data-theme="light"] .hosts-page #templates .bg-violet-500 { background: linear-gradient(135deg, #7C3AED, #9333EA) !important; } /* "Build your own gameshow" bottom CTA */ html[data-theme="light"] .hosts-page #templates .mt-12 button { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(124, 58, 237, 0.15) !important; color: #0f172a !important; } html[data-theme="light"] .hosts-page #templates .mt-12 button:hover { background: rgba(124, 58, 237, 0.06) !important; border-color: rgba(124, 58, 237, 0.25) !important; } /* ══════════════════════════════════════════════════════════════════════ ABOUT PAGE — Light Mode ══════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .about-page { background-color: #F0EAFF !important; color: #1A1A2E; } html[data-theme="light"] .about-page .text-white { color: #0f172a !important; } html[data-theme="light"] .about-page .text-slate-300 { color: #475569 !important; } html[data-theme="light"] .about-page .text-slate-400 { color: #64748b !important; } html[data-theme="light"] .about-page .text-slate-100 { color: #1e293b !important; } html[data-theme="light"] .about-page .text-sky-400 { color: #7C3AED !important; } html[data-theme="light"] .about-page .text-sky-200 { color: #7C3AED !important; } html[data-theme="light"] .about-page .text-indigo-400 { color: #4f46e5 !important; } html[data-theme="light"] .about-page .text-emerald-400 { color: #059669 !important; } /* Background glows */ html[data-theme="light"] .about-page [class*="mix-blend-screen"] { opacity: 0.15 !important; mix-blend-mode: normal !important; } html[data-theme="light"] .about-page [class*="blur-[150px]"] { opacity: 0.12 !important; } /* Cards */ html[data-theme="light"] .about-page [class*="bg-[#091129]"] { background-color: rgba(255, 255, 255, 0.9) !important; } html[data-theme="light"] .about-page .border-white\/5 { border-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .about-page .border-white\/10 { border-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .about-page .bg-white\/5 { background-color: rgba(124, 58, 237, 0.04) !important; } html[data-theme="light"] .about-page [class*="bg-white/[0.02]"] { background-color: rgba(124, 58, 237, 0.02) !important; } /* Story section */ html[data-theme="light"] .about-page [class*="bg-gradient-to-b"][class*="from-slate-900"] { background: rgba(255, 255, 255, 0.92) !important; } html[data-theme="light"] .about-page [class*="bg-gradient-to-l"][class*="from-sky-900/2"] { background: linear-gradient(to left, rgba(124, 58, 237, 0.03), transparent) !important; } /* CTA buttons */ html[data-theme="light"] .about-page [class*="from-sky-500"][class*="to-indigo-500"] { background-image: linear-gradient(to right, #7C3AED, #4f46e5) !important; color: #fff !important; } html[data-theme="light"] .about-page .border-slate-700 { border-color: rgba(124, 58, 237, 0.15) !important; } html[data-theme="light"] .about-page .bg-slate-800\/50 { background-color: rgba(255, 255, 255, 0.7) !important; } /* CTA section top border */ html[data-theme="light"] .about-page [class*="border-sky-900/3"] { border-color: rgba(124, 58, 237, 0.1) !important; } /* Hero gradient text readability */ html[data-theme="light"] .about-page h1[class*="bg-gradient-to-r"][class*="from-white"] { background-image: linear-gradient(to right, #0f172a, #334155, #64748b) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* Avatar circle */ html[data-theme="light"] .about-page [class*="border-sky-500/3"][class*="bg-gradient-to-b"] { border-color: rgba(124, 58, 237, 0.25) !important; } /* ══════════════════════════════════════════════════════════════════════ CONTACT MODAL — Light Mode ══════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .contact-modal { background: linear-gradient(to bottom right, #ffffff, #faf7ff, #f5f0ff) !important; border-color: rgba(124, 58, 237, 0.12) !important; } html[data-theme="light"] .contact-modal .text-white { color: #0f172a !important; } html[data-theme="light"] .contact-modal .text-slate-300 { color: #475569 !important; } html[data-theme="light"] .contact-modal .text-slate-400 { color: #64748b !important; } html[data-theme="light"] .contact-modal .text-slate-500 { color: #9494AB !important; } /* Glow orbs */ html[data-theme="light"] .contact-modal [class*="blur-[80px]"] { opacity: 0.15 !important; } /* Inputs */ html[data-theme="light"] .contact-modal input, html[data-theme="light"] .contact-modal textarea { background-color: #ffffff !important; border-color: rgba(124, 58, 237, 0.12) !important; color: #1A1A2E !important; } html[data-theme="light"] .contact-modal input::placeholder, html[data-theme="light"] .contact-modal textarea::placeholder { color: #9494AB !important; } html[data-theme="light"] .contact-modal input:focus, html[data-theme="light"] .contact-modal textarea:focus { border-color: #7C3AED !important; --tw-ring-color: rgba(124, 58, 237, 0.3) !important; } /* Close button */ html[data-theme="light"] .contact-modal .hover\:bg-white\/5:hover { background-color: rgba(124, 58, 237, 0.04) !important; } html[data-theme="light"] .contact-modal .hover\:text-white:hover { color: #0f172a !important; } /* Submit button gradient → violet */ html[data-theme="light"] .contact-modal [class*="from-sky-400"][class*="to-cyan-500"] { background-image: linear-gradient(to right, #7C3AED, #6D28D9) !important; } html[data-theme="light"] .contact-modal .bg-slate-950\/20 { background-color: transparent !important; } html[data-theme="light"] .contact-modal .text-slate-950 { color: #ffffff !important; } /* Success state */ html[data-theme="light"] .contact-modal [class*="bg-emerald-500/2"] { background-color: rgba(16, 185, 129, 0.08) !important; } html[data-theme="light"] .contact-modal .text-emerald-400 { color: #059669 !important; } /* Backdrop */ html[data-theme="light"] .contact-modal-backdrop { background-color: rgba(240, 234, 255, 0.85) !important; } /* Backdrop: soften dark-navy wash to light-purple tint */ html[data-theme="light"] .generation-paywall-backdrop { background-color: rgba(240, 234, 255, 0.82) !important; } /* Modal body: convert slate-900 card to white-ish card with violet border */ html[data-theme="light"] .generation-paywall { background: linear-gradient(to bottom right, #ffffff, #faf7ff, #f5f0ff) !important; border-color: rgba(124, 58, 237, 0.14) !important; } /* Soften decorative glow orbs in light mode */ html[data-theme="light"] .generation-paywall [class*="blur-3xl"] { opacity: 0.35 !important; } /* Title gradient: dark-to-muted in light mode (was white→slate in dark) */ html[data-theme="light"] .generation-paywall #paywall-title { background-image: linear-gradient(to bottom right, #0f0a1e, #5c5c7a) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* Body text color overrides */ html[data-theme="light"] .generation-paywall .text-white { color: #0f0a1e !important; } html[data-theme="light"] .generation-paywall .text-slate-100 { color: #0f0a1e !important; } html[data-theme="light"] .generation-paywall .text-slate-300 { color: #1A1A2E !important; } html[data-theme="light"] .generation-paywall .text-slate-400 { color: #5C5C7A !important; } html[data-theme="light"] .generation-paywall .text-slate-500 { color: #9494AB !important; } /* Fuchsia accents: bump contrast for readability on white */ html[data-theme="light"] .generation-paywall .text-fuchsia-100 { color: #6D28D9 !important; } html[data-theme="light"] .generation-paywall .text-fuchsia-300 { color: #7C3AED !important; } /* Smart Host demo button: dark-slate bg → soft violet tint */ html[data-theme="light"] .generation-paywall .bg-slate-950\/80 { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .generation-paywall .hover\:bg-slate-900:hover { background-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .generation-paywall .border-fuchsia-400\/30 { border-color: rgba(124, 58, 237, 0.25) !important; } /* Keep the white text INSIDE the purple play-button circle on top of gradient */ html[data-theme="light"] .generation-paywall [class*="from-fuchsia-500"][class*="to-indigo-500"] .text-white { color: #ffffff !important; } /* Fuchsia-500/5 card tint on white bg */ html[data-theme="light"] .generation-paywall .bg-fuchsia-500\/5 { background-color: rgba(124, 58, 237, 0.04) !important; } html[data-theme="light"] .generation-paywall .border-fuchsia-500\/20 { border-color: rgba(124, 58, 237, 0.18) !important; } /* Close button */ html[data-theme="light"] .generation-paywall .hover\:bg-white\/10:hover { background-color: rgba(124, 58, 237, 0.06) !important; } html[data-theme="light"] .generation-paywall .hover\:text-white:hover { color: #0f0a1e !important; } /* Keep upgrade CTA button text white on its gradient */ html[data-theme="light"] .generation-paywall [class*="from-sky-400"][class*="to-indigo-500"] { color: #ffffff !important; } /* ══════════════════════════════════════════════════════════════════════ TOPICS PAGE — Light Mode ══════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] .topics-page { background-color: #F0EAFF !important; color: #1A1A2E; } /* Ambient glows */ html[data-theme="light"] .topics-page [class*="blur-[1"] { opacity: 0.12 !important; } /* Text */ html[data-theme="light"] .topics-page .text-white { color: #0f172a !important; } html[data-theme="light"] .topics-page .text-slate-100 { color: #1e293b !important; } html[data-theme="light"] .topics-page .text-slate-200 { color: #334155 !important; } html[data-theme="light"] .topics-page .text-slate-300 { color: #475569 !important; } html[data-theme="light"] .topics-page .text-slate-400 { color: #64748b !important; } html[data-theme="light"] .topics-page .text-slate-600 { color: #94a3b8 !important; } html[data-theme="light"] .topics-page .text-sky-300 { color: #7C3AED !important; } html[data-theme="light"] .topics-page .text-sky-400 { color: #7C3AED !important; } html[data-theme="light"] .topics-page .text-fuchsia-400 { color: #c026d3 !important; } /* Badge */ html[data-theme="light"] .topics-page [class*="border-sky-500/3"][class*="bg-sky-500/1"] { background-color: rgba(124, 58, 237, 0.06) !important; border-color: rgba(124, 58, 237, 0.2) !important; } /* Cards */ html[data-theme="light"] .topics-page [class*="bg-[#0B0F19]"] { background-color: rgba(255, 255, 255, 0.9) !important; } html[data-theme="light"] .topics-page .border-white\/10 { border-color: rgba(124, 58, 237, 0.08) !important; } html[data-theme="light"] .topics-page .border-white\/15 { border-color: rgba(124, 58, 237, 0.1) !important; } html[data-theme="light"] .topics-page .border-white\/20 { border-color: rgba(124, 58, 237, 0.12) !important; } html[data-theme="light"] .topics-page .bg-white\/5 { background-color: rgba(124, 58, 237, 0.03) !important; } html[data-theme="light"] .topics-page [class*="bg-white/[0.0"] { background-color: rgba(124, 58, 237, 0.03) !important; } html[data-theme="light"] .topics-page .border-white\/5 { border-color: rgba(124, 58, 237, 0.06) !important; } /* Card hover */ html[data-theme="light"] .topics-page .hover\:border-sky-500\/30:hover { border-color: rgba(124, 58, 237, 0.25) !important; } html[data-theme="light"] .topics-page .group:hover .group-hover\:text-sky-400 { color: #7C3AED !important; } html[data-theme="light"] .topics-page .group:hover .group-hover\:text-white { color: #0f172a !important; } html[data-theme="light"] .topics-page .group:hover .group-hover\:text-slate-300 { color: #475569 !important; } html[data-theme="light"] .topics-page .group:hover .group-hover\:scale-110 { background-color: rgba(124, 58, 237, 0.06) !important; } /* CTA buttons */ html[data-theme="light"] .topics-page .bg-white { background-color: #7C3AED !important; color: #ffffff !important; } html[data-theme="light"] .topics-page .text-slate-900 { color: #ffffff !important; } html[data-theme="light"] .topics-page [class*="shadow-white/1"] { box-shadow: 0 4px 16px rgba(124, 58, 237, 0.15) !important; } /* Secondary CTA */ html[data-theme="light"] .topics-page [class*="bg-white/[0.03]"][class*="border-white/15"] { background-color: rgba(255, 255, 255, 0.7) !important; border-color: rgba(124, 58, 237, 0.12) !important; } /* Custom builder CTA */ html[data-theme="light"] .topics-page [class*="border-dashed"] { border-color: rgba(124, 58, 237, 0.2) !important; background-color: rgba(255, 255, 255, 0.5) !important; } html[data-theme="light"] .topics-page [class*="from-fuchsia-500"][class*="to-purple-600"] { color: #ffffff !important; } /* Section divider */ html[data-theme="light"] .topics-page .border-b.border-white\/10 { border-bottom-color: rgba(124, 58, 237, 0.1) !important; } /* ══════════════════════════════════════════════════════════════════════ USE CASES PAGE — Light Mode ══════════════════════════════════════════════════════════════════════ */ /* Ambient glows */ html[data-theme="light"] .usecases-page [class*="blur-[1"] { opacity: 0.12 !important; } /* Text */ html[data-theme="light"] .usecases-page [class*="text-white/9"] { color: #1e293b !important; } /* Badge */ html[data-theme="light"] .usecases-page [class*="border-sky-500/3"][class*="bg-sky-500/1"] { background-color: rgba(124, 58, 237, 0.06) !important; border-color: rgba(124, 58, 237, 0.2) !important; } /* Cards */ html[data-theme="light"] .usecases-page [class*="bg-[#0B0F19]"] { background-color: rgba(255, 255, 255, 0.9) !important; } html[data-theme="light"] .usecases-page [class*="bg-white/[0.0"] { background-color: rgba(124, 58, 237, 0.03) !important; } /* Bento glow */ html[data-theme="light"] .usecases-page [class*="blur-[80px]"] { opacity: 0.15 !important; } /* Feature panel */ html[data-theme="light"] .usecases-page [class*="bg-gradient-to-br"][class*="backdrop-blur"] { background: rgba(255, 255, 255, 0.6) !important; } /* CTA buttons */ /* Custom topic card */ html[data-theme="light"] .usecases-page [class*="border-dashed"] { border-color: rgba(124, 58, 237, 0.2) !important; background-color: rgba(255, 255, 255, 0.5) !important; } html[data-theme="light"] .usecases-page [class*="from-sky-500"][class*="to-blue-600"] { color: #ffffff !important; } /* Hover states */ /* ── Pricing Page (Lite Mode) ── */ html[data-theme="light"] .pricing-page [class*="mix-blend-screen"], html[data-theme="light"] .pricing-page [class*="blur-3xl"] { opacity: 0.12 !important; mix-blend-mode: normal !important; } /* ── Auth Modal (Lite Mode) ── */ html[data-theme="light"] .auth-modal { background-color: #ffffff !important; border-color: #e2e8f0 !important; } html[data-theme="light"] .auth-modal h2 { color: #0f172a !important; } html[data-theme="light"] .auth-modal p, html[data-theme="light"] .auth-modal .auth-modal-desc { color: #64748b !important; } html[data-theme="light"] .auth-modal label { color: #475569 !important; } html[data-theme="light"] .auth-modal input { background-color: #fcfcfc !important; color: #0f172a !important; border-color: #e2e8f0 !important; } html[data-theme="light"] .auth-modal input:focus { border-color: #8b5cf6 !important; box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important; } html[data-theme="light"] .auth-modal input::placeholder { color: #64748b !important; } html[data-theme="light"] .auth-modal .border-white\/10 { border-color: #e2e8f0 !important; } html[data-theme="light"] .auth-modal .text-white\/50 { color: #64748b !important; } html[data-theme="light"] .auth-modal [data-testid="forgot-password-link"] { color: #6366f1 !important; } html[data-theme="light"] .auth-modal [data-testid="forgot-password-link"]:hover { color: #4f46e5 !important; } html[data-theme="light"] .auth-modal [data-testid="auth-switch-mode"] { color: #64748b !important; } html[data-theme="light"] .auth-modal [data-testid="auth-switch-mode"]:hover { background-color: #f1f5f9 !important; color: #0f172a !important; } html[data-theme="light"] .auth-modal [data-testid="magic-link-button"] { background-color: #f8fafc !important; color: #0f172a !important; border-color: #e2e8f0 !important; } html[data-theme="light"] .auth-modal [data-testid="auth-error"] { background-color: #fff1f2 !important; border-color: #ffe4e6 !important; color: #e11d48 !important; } html[data-theme="light"] .auth-modal [data-testid="auth-success"] { background-color: #f0fdf4 !important; border-color: #dcfce7 !important; color: #16a34a !important; } /* Learn uses a fixed light shell but intentionally includes a few dark product stages. The global entertainment-theme light overrides otherwise turn their white text dark. Keep contrast local to Learn without changing Play pages. */ html[data-theme="light"] .learn-surface .learn-dark-panel { color: #ffffff !important; } html[data-theme="light"] .learn-surface .learn-dark-panel.bg-slate-950 { background-color: #0c1728 !important; } html[data-theme="light"] .learn-surface .learn-dark-panel .text-white { color: #ffffff !important; } html[data-theme="light"] .learn-surface .learn-dark-panel .text-slate-200 { color: #e2e8f0 !important; } html[data-theme="light"] .learn-surface .learn-dark-panel .text-slate-300 { color: #cbd5e1 !important; } html[data-theme="light"] .learn-surface .learn-dark-panel .text-slate-400 { color: #94a3b8 !important; } html[data-theme="light"] .learn-surface .learn-dark-panel .text-emerald-100 { color: #d1fae5 !important; } html[data-theme="light"] .learn-surface .learn-dark-panel .text-emerald-200 { color: #a7f3d0 !important; } html[data-theme="light"] .learn-surface .learn-dark-panel .text-emerald-300 { color: #6ee7b7 !important; } html[data-theme="light"] .learn-solid-cta { background-color: #126f5a !important; color: #ffffff !important; } html[data-theme="light"] .learn-solid-cta:hover { background-color: #0d5b4a !important; } html[data-theme="light"] .learn-cookie-panel.learn-cookie-panel { border-color: #d7e1dc !important; background: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 20px 70px -38px rgba(15, 23, 42, 0.38) !important; }