/* home.css — the merged product's shell. * * Two moods from one stylesheet, switched by `body[data-mode]`: * * adult — "aurora console": a dark cosmic stage, frosted glass, a little * glow, Space Grotesk display type. Matches the /goals SPA. * kid — "arcade": warmer, rounder, more colour, Bricolage Grotesque, a * companion and a crown count up top. No streak, no accuracy %, no * timer, no number a child can watch fall (see #stat-streak below). * * The switch happens on sign-in, so a child never sees an interface designed * for someone reading a mortgage question. */ /* ------------------------------------------------------------------ themes * data-mode on — adult | kid (font, accent hue, radius, feel) * data-theme on — always "light" or "dark"; the script * resolves "auto" against the OS and home.js keeps * it in sync, so there is no prefers-color-scheme * media query here. * * Light is the base; [data-theme="dark"] overrides. The dark side is the * original "aurora console" (adult) / "arcade" (kid); the light side is a * calmer paper — white cards, hairline borders, soft shadows instead of glow. * Kid constraints hold in both: no streak, no number a child can watch fall. * (light-dark() is not used — it is colours-only and can't carry the gradients * and shadows below.) */ :root { color-scheme: light; /* ADULT · LIGHT */ --bg: #f5f6fb; --bg-2: #ffffff; --card: #ffffff; --card-2: #eef1f8; --glass: rgba(255, 255, 255, 0.7); --line: #e3e7f0; --line-lit: #6366f1; --ink: #191c28; --ink-2: #484f63; --ink-3: #7b8397; --accent: #7c3aed; --accent-ink: #ffffff; --grad: linear-gradient(135deg, #6366f1, #8b5cf6); --warm: #7c3aed; --good: #15803d; --bad: #dc2626; --on-good: #ffffff; --on-bad: #ffffff; --radius: 14px; --radius-lg: 20px; --radius-xl: 26px; --shadow: 0 12px 30px -14px rgba(30, 30, 70, 0.2); --card-shadow: 0 4px 16px -10px rgba(30, 30, 70, 0.16); --track: rgba(20, 22, 45, 0.09); --scrim: rgba(25, 22, 50, 0.42); --hero-bg: linear-gradient(180deg, rgba(124, 58, 237, 0.05), #ffffff); --hero-shadow: 0 32px 80px -42px rgba(80, 60, 160, 0.32); --hero-ring-opacity: 0.32; --title-grad: linear-gradient(104deg, #4338ca 12%, #7c3aed 42%, #0ea5e9 66%, #4338ca 90%); --cta-shadow: 0 10px 26px -10px rgba(99, 102, 241, 0.5); --stage: none; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Space Grotesk", var(--font); --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; } :root[data-theme="dark"] { color-scheme: dark; /* ADULT · DARK — the "aurora console" */ --bg: #05060d; --bg-2: #0b0d18; --card: rgba(12, 16, 28, 0.55); --card-2: rgba(255, 255, 255, 0.06); --glass: rgba(255, 255, 255, 0.045); --line: rgba(255, 255, 255, 0.11); --line-lit: rgba(125, 235, 255, 0.5); --ink: #f4f7ff; --ink-2: rgba(228, 234, 250, 0.68); --ink-3: rgba(228, 234, 250, 0.4); --accent: #5eead4; --accent-ink: #04211c; --warm: #8b5cf6; --good: #4ade80; --bad: #f87171; --on-good: #06240f; --on-bad: #2a0a0a; --shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.9); --card-shadow: 0 0 0 transparent; --track: rgba(255, 255, 255, 0.08); --scrim: rgba(3, 4, 10, 0.72); --hero-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); --hero-shadow: 0 40px 110px -46px rgba(90, 110, 210, 0.42); --hero-ring-opacity: 0.65; --title-grad: linear-gradient(104deg, #eef2ff 18%, #b7c0ff 42%, #7ff0dd 58%, #eef2ff 80%); --cta-shadow: 0 12px 32px -8px rgba(99, 102, 241, 0.7); --stage: radial-gradient(56% 44% at 12% 4%, rgba(99, 102, 241, 0.28), transparent 72%), radial-gradient(50% 40% at 90% 6%, rgba(56, 189, 248, 0.20), transparent 72%), radial-gradient(46% 52% at 82% 96%, rgba(217, 70, 239, 0.16), transparent 72%); } body[data-mode="kid"] { /* KID · LIGHT */ --bg: #faf7ff; --bg-2: #ffffff; --card: #ffffff; --card-2: #f3eefd; --glass: rgba(255, 255, 255, 0.72); --line: #e9e0f7; --line-lit: #7c3aed; --ink: #2a2145; --ink-2: #665a86; --ink-3: #968aba; --accent: #c2410c; --accent-ink: #ffffff; --grad: linear-gradient(135deg, #a3e635, #38e0d0); --warm: #d97706; --radius: 18px; --radius-lg: 24px; --radius-xl: 28px; --font-display: "Bricolage Grotesque", var(--font); --track: rgba(40, 20, 70, 0.1); --card-shadow: 0 4px 18px -10px rgba(90, 60, 160, 0.18); --hero-bg: linear-gradient(160deg, rgba(255, 209, 102, 0.16), #ffffff); --hero-shadow: 0 24px 60px -34px rgba(150, 110, 220, 0.35); --hero-ring-opacity: 0.4; --stage: radial-gradient(70% 45% at 50% -6%, rgba(192, 132, 252, 0.08), transparent 70%); } :root[data-theme="dark"] body[data-mode="kid"] { /* KID · DARK — the "arcade" */ --bg: #130f26; --bg-2: #1e1740; --card: #1e1740; --card-2: #281e56; --glass: #1e1740; --line: #3a2c73; --line-lit: #ffd166; --ink: #f4efff; --ink-2: #c3b3ef; --ink-3: #8b7bc0; --accent: #ffd166; --accent-ink: #3a2a00; --warm: #ffd166; --track: #281e56; --card-shadow: 0 0 0 transparent; --hero-bg: linear-gradient(160deg, rgba(255, 209, 102, 0.1), rgba(30, 23, 64, 0.6)); --hero-shadow: 0 30px 90px -40px rgba(192, 132, 252, 0.6); --hero-ring-opacity: 0.5; --stage: radial-gradient(70% 50% at 50% -8%, rgba(192, 132, 252, 0.18), transparent 70%); } * { box-sizing: border-box; } /* A