/* ======================================================================== * CORE 21 — shared design system * Single source of truth for tokens + reusable components. * Per-screen styles live inline in their HTML file and may extend this. * ====================================================================== */ /* ======================================================================== * DESIGN TOKENS — semantic-first, theme-swappable * Light is primary. Dark is opt-in via [data-theme="dark"] on . * Surface-named legacy tokens (--paper, --ink, etc.) are preserved as * aliases so existing per-screen styles keep working. * ====================================================================== */ :root{ --shell: #f3efe7; --panel: #ffffff; /* ---- scales ---- */ /* spacing — 4px base, premium rhythm */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* radius — rounded but disciplined */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 12px; --radius-2xl: 12px; --radius-pill: 999px; /* text scale — calmer, more editorial */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 28px; --text-3xl: 34px; --text-display: 34px; /* line-heights — paired with the scale above */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.6; /* motion */ --ease-out: cubic-bezier(.22,.8,.32,1); --ease-in-out: cubic-bezier(.4,0,.2,1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; /* ---- semantic theme tokens — light ---- */ /* backgrounds (deepest → most elevated) */ --bg: var(--surface); /* legacy page-background alias */ --bg-2: var(--shell); /* legacy recessed alias */ --surface: #faf8f3; --surface-solid: var(--panel); /* legacy opaque-card alias */ --surface-elevated: #ffffff; /* highest elevation */ --surface-sunken: #f6f2ea; /* pressed / disabled */ --overlay: rgba(19,22,27,0.45); /* modal scrim */ /* borders — three weights */ --border: rgba(19,22,27,0.08); /* hairline */ --border-strong: rgba(19,22,27,0.14); /* card edge */ --border-focus: rgba(216,31,42,0.55); /* keyboard focus */ /* text — three roles plus accent */ --text: #13161b; /* primary ink */ --text-2: #3a424e; /* secondary body */ --text-muted: #626a78; /* tertiary, meta */ --text-on-accent: #ffffff; --text-on-dark: #ffffff; /* brand accent (single accent — restraint) */ --accent: #d81f2a; --accent-soft: rgba(216,31,42,0.10); --accent-ink: #b51a23; /* semantic colors — meaning, not decoration */ --success: #1f7a4f; --success-soft: #e2f3ea; --success-ink: #1c6e47; --info: #1e4ca3; --info-soft: #e0e9fa; --warning: #9a5d00; --warning-soft: #fbefd7; --warning-ink: #8b5400; --risk: #b0321f; --risk-soft: #fbe7e2; /* platform brand dots */ --yt: #ff0033; --ig: #d946a0; --tt: #25f4ee; /* shadows — three-tier, premium softness */ --shadow-sm: 0 1px 2px rgba(19,22,27,0.04); --shadow-md: 0 1px 2px rgba(19,22,27,0.04), 0 8px 24px rgba(19,22,27,0.06); --shadow-lg: 0 2px 6px rgba(19,22,27,0.05), 0 30px 60px rgba(19,22,27,0.12); --shadow-xl: 0 4px 12px rgba(19,22,27,0.06), 0 50px 100px rgba(19,22,27,0.14); /* gradient signature — the brand */ --brand-grad: linear-gradient(90deg,var(--accent),var(--accent)); /* deprecated: remove after one release */ --dark-grad: linear-gradient(135deg, #18162c 0%, #2a1f4a 60%, var(--accent) 100%); --page-grad: linear-gradient(180deg, #fbfaf7 0%, var(--bg) 58%, #f6f1e9 100%); --rail-bg: rgba(250,248,243,0.72); /* ---- legacy aliases (keep existing per-screen CSS working) ---- */ --paper: var(--bg); --paper-2: var(--bg-2); --card: var(--surface); --card-solid: var(--surface-solid); --ink: var(--text); --ink-2: var(--text-2); --muted: var(--text-muted); --line: var(--border); --line-2: var(--border-strong); --green: var(--success); --green-soft: var(--success-soft); --blue: var(--info); --blue-soft: var(--info-soft); --amber: var(--warning); --amber-soft: var(--warning-soft); --red: var(--risk); --red-soft: var(--risk-soft); --shadow: var(--shadow-md); --lavender: var(--accent-soft); } /* ---- dark theme — opt-in via [data-theme="dark"] on ---- * Deliberate, not default. The warm-paper light theme is the primary * experience because it's more readable for the text-heavy briefs and * doesn't look like every other AI dashboard. Dark is for late-night * creator workflows. Toggle by setting , or set * on an opted-in surface to follow OS preference. */ [data-theme="dark"]{ --shell: #0a0c10; --panel: #0e1014; --bg: var(--panel); --bg-2: #161922; --surface: #1a1e28; --surface-solid: var(--surface); --surface-elevated: #20242f; --surface-sunken: #0a0c10; --overlay: rgba(0,0,0,0.65); --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); --border-focus: color-mix(in srgb,var(--accent) 65%,transparent); --text: #f5f3ee; --text-2: #c2c6cf; --text-muted: #8a909c; --accent: #f2564b; --accent-soft: rgba(242,86,75,0.16); --accent-ink: #f4746b; --success: #4caf85; --success-soft: rgba(76,175,133,0.16); --success-ink: #53b28a; --info: #6ea4ff; --info-soft: rgba(110,164,255,0.16); --warning: #e1a04a; --warning-soft: rgba(225,160,74,0.16); --warning-ink: #e1a04a; --risk: #ef6e5b; --risk-soft: rgba(239,110,91,0.16); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5); --shadow-lg: 0 2px 6px rgba(0,0,0,0.5), 0 30px 60px rgba(0,0,0,0.6); --shadow-xl: 0 4px 12px rgba(0,0,0,0.55), 0 50px 100px rgba(0,0,0,0.65); --page-grad: linear-gradient(180deg, #0c0e12 0%, var(--bg) 58%, #0a0c10 100%); --rail-bg: rgba(14,16,20,0.72); } /* Respect OS preference only when a page explicitly opts into auto theme */ @media (prefers-color-scheme: dark){ :root[data-theme="auto"]{ --shell: #0a0c10; --panel: #0e1014; --bg: var(--panel); --bg-2: #161922; --surface: #1a1e28; --surface-solid: var(--surface); --surface-elevated: #20242f; --surface-sunken: #0a0c10; --overlay: rgba(0,0,0,0.65); --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); --border-focus: color-mix(in srgb,var(--accent) 65%,transparent); --text: #f5f3ee; --text-2: #c2c6cf; --text-muted: #8a909c; --accent: #f2564b; --accent-soft: rgba(242,86,75,0.16); --accent-ink: #f4746b; --success: #4caf85; --success-soft: rgba(76,175,133,0.16); --success-ink: #53b28a; --info: #6ea4ff; --info-soft: rgba(110,164,255,0.16); --warning: #e1a04a; --warning-soft: rgba(225,160,74,0.16); --warning-ink: #e1a04a; --risk: #ef6e5b; --risk-soft: rgba(239,110,91,0.16); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5); --shadow-lg: 0 2px 6px rgba(0,0,0,0.5), 0 30px 60px rgba(0,0,0,0.6); --shadow-xl: 0 4px 12px rgba(0,0,0,0.55), 0 50px 100px rgba(0,0,0,0.65); --page-grad: linear-gradient(180deg, #0c0e12 0%, var(--bg) 58%, #0a0c10 100%); --rail-bg: rgba(14,16,20,0.72); } } /* ---------- base ---------- */ *,*::before,*::after{box-sizing:border-box;} html,body{margin:0;padding:0;} html{color-scheme:light dark;} body{ background:var(--shell); color:var(--text); font-family:"Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:var(--leading-normal); transition:background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out); /* Mobile safety: prevent horizontal page scroll when a large hero word or wide card briefly overflows. Pages stay visually centered; any edge clipping reads as intentional rather than as a scroll bug. */ overflow-x:hidden; } html{overflow-x:hidden;} /* Headlines must wrap rather than push the layout wider than the viewport. This is a global safety net so a 72px+ gradient hero word never forces a horizontal scrollbar on a 390px phone. */ h1, h2, h3 { overflow-wrap:break-word; word-break:normal; } /* Honor focus rings without breaking mouse UX */ :focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--radius-sm);} .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,56px);} .display{font-family:"Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;font-weight:900;letter-spacing:0;line-height:0.86;} .mono{font-family:"Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;} .num{font-variant-numeric:normal;} /* ---------- accent hero word ---------- */ .grad-word{ font-style:normal; color:var(--accent); } /* ============================================================ * TOP RAIL — premium global shell * Linear/PlayerZero/Supabase principles: calm typography, generous * spacing, restrained active state, theme-aware contrast. Frosted- * glass back via backdrop-filter; semantic tokens everywhere so * light and opt-in dark stay consistent. * ============================================================ */ .rail{ display:flex;align-items:center;justify-content:space-between; gap:var(--space-4); padding:var(--space-4) clamp(20px, 4vw, 56px); border-bottom:1px solid var(--border); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); background:var(--rail-bg); position:sticky;top:0;z-index:50; transition:border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } /* Brand — calmer presence than the prior 64-88px lockup. Still * readable; no longer competing with the page hero. */ .brand{ display:flex;align-items:center;gap:var(--space-3); font-weight:700;letter-spacing:0.04em; text-decoration:none;color:inherit; border-radius:var(--radius-md); } .brand:focus-visible{outline:2px solid var(--border-focus);outline-offset:4px;} .brand .mark{ display:inline-flex;align-items:center;justify-content:center; height:clamp(56px, 6vw, 76px);margin:-12px 0; } .brand .mark img{height:100%;width:auto;display:block;} .brand .mark .fallback{ font-family:"Schibsted Grotesk", sans-serif;font-weight:900;font-size:15px;letter-spacing:0.14em; color:var(--accent); } /* Nav — Linear-style restraint. Muted by default; primary text on hover * or when active. Active item gets a soft underline using --accent so the * highlight reads as a deliberate marker, not a busy pill. */ .rail nav{ display:flex;align-items:center;gap:var(--space-1); font-family:"Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif; font-size:var(--text-sm);font-weight:500; color:var(--text-muted); } .rail nav a{ position:relative; display:inline-flex;align-items:center; padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); color:var(--text-muted); text-decoration:none; letter-spacing:-0.005em; transition:color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .rail nav a:hover{ color:var(--text); background:var(--bg-2); } .rail nav a.active{ color:var(--text); font-weight:600; } .rail nav a.active::after{ content:""; position:absolute; left:var(--space-3);right:var(--space-3);bottom:-1px; height:2px;border-radius:var(--radius-pill); background:var(--accent); } .rail nav a:focus-visible{ outline:2px solid var(--border-focus);outline-offset:3px; } /* ---- No flash-of-flat-nav ---- * The flat inline nav is the link source + no-JS fallback, but it must never * PAINT before nav.js regroups it (that caused a ~2s flash of the old packed * nav on every navigation). Until nav.js adds .core-nav, hide the raw flat * links (they're the only direct children of