/* ───────────────────────────────────────────────────────────────── ALPHA-3.5 Liquid Glass · scoped layer Activates when or "alpha35-dark". Adds translucent panels, neon glows, white inset shimmer, backdrop-blur. Does NOT override layout — only surface treatment + type scale floor. ──────────────────────────────────────────────────────────────── */ [data-theme^="alpha35"] { /* type-scale floors (per design_system_notes.md 16px floor rule) */ --fs-body: 18px; --fs-meta: 16px; --fs-title: 26px; --fs-hero: 30px; --fs-amt: 40px; /* liquid glass sizing */ --lg-radius: 20px; --lg-radius-sm: 16px; } /* Cosmic-indigo gradient for dark mode, tinted ivory for light */ [data-theme="alpha35-dark"] body { background: radial-gradient(1100px 600px at 12% -10%, rgba(255,40,120,0.25), transparent 60%), radial-gradient(900px 500px at 92% 8%, rgba(0,212,255,0.20), transparent 60%), radial-gradient(700px 400px at 50% 100%, rgba(160,80,255,0.22), transparent 60%), linear-gradient(180deg,#100A2A 0%, #1A0E35 50%, #2A1550 100%) !important; background-attachment: fixed !important; color: #FFFFFF; } [data-theme="alpha35-light"] body { background: radial-gradient(800px 500px at 10% 0%, rgba(255,40,120,0.08), transparent 60%), radial-gradient(700px 400px at 95% 10%, rgba(0,212,255,0.08), transparent 60%), #FFFFFF !important; background-attachment: fixed !important; color: #2F133C; } /* ── Liquid Glass primitives ─────────────────────────────────────── */ [data-theme^="alpha35"] .lg-card, [data-theme^="alpha35"] [data-glass="card"] { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: var(--lg-radius); box-shadow: var(--glow); } [data-theme^="alpha35"] .lg-topbar, [data-theme^="alpha35"] [data-glass="topbar"] { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-border); } [data-theme^="alpha35"] .lg-dock, [data-theme^="alpha35"] [data-glass="dock"] { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-top: 1px solid var(--glass-border); } [data-theme^="alpha35"] .lg-dark-glass, [data-theme^="alpha35"] [data-glass="dark"] { background: var(--dark-glass); color: var(--dark-glass-ink); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: var(--lg-radius); } /* Neon brand button */ [data-theme^="alpha35"] [data-glass="cta"], [data-theme="alpha35-dark"] button[data-primary], [data-theme^="alpha35"] .lg-cta { background: linear-gradient(135deg, var(--brand) 0%, var(--magenta) 100%); color: #FFFFFF; border: none; box-shadow: 0 0 0 1px rgba(255,40,120,0.3), 0 8px 24px rgba(255,40,120,0.35), inset 0 1px 0 rgba(255,255,255,0.3); border-radius: var(--lg-radius-sm); } /* Neon accent tag */ [data-theme^="alpha35"] .lg-tag { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 14px; backdrop-filter: var(--glass-blur); } /* Display type — Bebas Neue uppercase wide tracking for hero titles */ [data-theme^="alpha35"] .lg-display, [data-theme^="alpha35"] h1.lg-hero { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.95; } /* ── Live dot pulse (canonical animation) ────────────────────────── */ @keyframes lg-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } } [data-theme^="alpha35"] .lg-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--swatch-5); /* emerald */ box-shadow: 0 0 12px var(--swatch-5); animation: lg-pulse 1.6s infinite; } /* ── Auto-glass: any card that uses --surface background inherits blur. This lifts the mobile-app cards without rewriting their inline styles. */ [data-theme^="alpha35"] [style*="var(--surface)"] { backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); } [data-theme="alpha35-dark"] [style*="var(--surface)"] { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 0 rgba(0,0,0,0.3); } /* Brand CTA on phone buttons gets glow in dark */ [data-theme="alpha35-dark"] [style*="var(--brand)"]:not([style*="color:var(--brand)"]) { box-shadow: 0 0 0 1px rgba(255,40,120,0.35), 0 10px 32px rgba(255,40,120,0.35), inset 0 1px 0 rgba(255,255,255,0.2); } /* ── Override mobile-app stage chrome in ALPHA-3.5 themes ────────── */ [data-theme="alpha35-dark"] .stage-head, [data-theme="alpha35-dark"] .stage-foot, [data-theme="alpha35-dark"] .tweaks { color: #FFFFFF; } [data-theme="alpha35-dark"] .stage-head .k, [data-theme="alpha35-dark"] .stage-foot .k { color: var(--swatch-2); } /* Neon glow on brand-name flourish */ [data-theme="alpha35-dark"] .stage-head h1 em { color: var(--magenta); text-shadow: 0 0 32px rgba(255,40,120,0.6); }