/* ============================================================ HELMORA · v4 brand tokens — lilac primary, lavender ground. Adapts `app/theme.ts` with WCAG AA text roles so the marketing site and SPA read as one product. This is intentionally not a token-for-token copy: text, focus, and status roles are strengthened for the public site. (The filename stays moonstone.css for import-path continuity.) 2026-08-27 visual refresh: - Self-hosted brand type (InterVariable + JetBrains Mono, /styles/fonts) — the CSP is 'self'-only by policy, so no font CDN may be used. - Dark mode ("nightstone", from the Moonstone brand sheet): automatic via prefers-color-scheme, overridable via the nav toggle, which sets data-mode on (persisted in localStorage by /site.js; a pre-paint head snippet applies it before first paint to avoid FOUC). - --panel/--panel-* tokens for the deep-ink terminal/CTA surfaces that must stay dark in BOTH modes (do not restyle those with --secondary). - .rv/.rv-child scroll-reveal utilities (driven by /site.js, inert under prefers-reduced-motion and without JS). ============================================================ */ @font-face{ font-family:"InterVariable"; src:url("/styles/fonts/InterVariable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:"JetBrains Mono"; src:url("/styles/fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"JetBrains Mono"; src:url("/styles/fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:"JetBrains Mono"; src:url("/styles/fonts/JetBrainsMono-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } :root{ --bg:#ECEAF2; --surface:#FFFFFF; --surface-2:#FBFBFD; --line:#E6E4EE; --line-strong:#D6D3E1; --fg:#141528; --fg-2:#2A2B40; --muted:#5F5C73; --muted-2:#666378; --primary:#6554B3; --primary-fg:#FFFFFF; --primary-2:#59489F; --primary-soft:#EDEAF8; --secondary:#0F1022; --secondary-fg:#FFFFFF; --accent:#7FC7E3; --accent-fg:#0F1022; --accent-text:#236782; --accent-soft:#E2F1F8; --success:#23765A; --warning:#8B591B; --danger:#A63B52; --focus:#356F86; /* Deep-ink display surfaces (terminal mocks, CTA strip, flow blocks). Deliberately near-identical in both modes — the product's transcript is dark, and these panels are "the product showing through". */ --panel:#0F1022; --panel-2:#171930; --panel-fg:#F2F1F8; --panel-line:rgba(255,255,255,0.10); --panel-muted:rgba(242,241,248,0.55); /* Decorative glows (hero, section accents). */ --glow-a:rgba(101,84,179,0.16); --glow-b:rgba(127,199,227,0.18); --grid-dot:rgba(20,21,40,0.055); --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px; --shadow-sm:0 1px 2px rgba(15,16,34,.06); --shadow-md:0 4px 12px rgba(15,16,34,.08), 0 1px 2px rgba(15,16,34,.04); --shadow-lg:0 18px 50px rgba(15,16,34,.12), 0 2px 6px rgba(15,16,34,.06); --shadow-glow:0 0 0 1px var(--line), 0 24px 70px rgba(101,84,179,.18), 0 4px 14px rgba(15,16,34,.08); --font-sans:"InterVariable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --maxw:1180px; } /* Nightstone (Moonstone brand sheet dark): deep-ink ground, lifted lilac primary. Kept in sync with the auto block below — edit both. */ [data-mode="dark"]{ --bg:#0A0B16; --surface:#121427; --surface-2:#181A30; --line:#22243E; --line-strong:#2F3253; --fg:#EDECF6; --fg-2:#C6C3DC; --muted:#8f8CAC; --muted-2:#6B6889; --primary:#B0A6E3; --primary-fg:#0A0B16; --primary-2:#C5BCEC; --primary-soft:#1E1B36; --secondary:#5E52A8; --secondary-fg:#EDECF6; --accent:#7FC7E3; --accent-fg:#0A0B16; --accent-text:#8FD0E8; --accent-soft:#15263A; --success:#6FCFAB; --warning:#E3B978; --danger:#DE7A8C; --focus:#7FC7E3; --panel:#0D0E1D; --panel-2:#14162B; --panel-fg:#EDECF6; --panel-line:rgba(237,236,246,0.10); --panel-muted:rgba(237,236,246,0.50); --glow-a:rgba(176,166,227,0.13); --glow-b:rgba(127,199,227,0.10); --grid-dot:rgba(237,236,246,0.05); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 18px 50px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3); --shadow-glow:0 0 0 1px var(--line), 0 24px 70px rgba(176,166,227,.10), 0 4px 14px rgba(0,0,0,.4); } /* System preference, unless the visitor chose explicitly (data-mode set pre-paint from localStorage by the head snippet). Mirror of the block above — keep the two in sync. */ @media (prefers-color-scheme: dark){ :root:not([data-mode="light"]):not([data-mode="dark"]){ --bg:#0A0B16; --surface:#121427; --surface-2:#181A30; --line:#22243E; --line-strong:#2F3253; --fg:#EDECF6; --fg-2:#C6C3DC; --muted:#8F8CAC; --muted-2:#6B6889; --primary:#B0A6E3; --primary-fg:#0A0B16; --primary-2:#C5BCEC; --primary-soft:#1E1B36; --secondary:#5E52A8; --secondary-fg:#EDECF6; --accent:#7FC7E3; --accent-fg:#0A0B16; --accent-text:#8FD0E8; --accent-soft:#15263A; --success:#6FCFAB; --warning:#E3B978; --danger:#DE7A8C; --focus:#7FC7E3; --panel:#0D0E1D; --panel-2:#14162B; --panel-fg:#EDECF6; --panel-line:rgba(237,236,246,0.10); --panel-muted:rgba(237,236,246,0.50); --glow-a:rgba(176,166,227,0.13); --glow-b:rgba(127,199,227,0.10); --grid-dot:rgba(237,236,246,0.05); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 18px 50px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.3); --shadow-glow:0 0 0 1px var(--line), 0 24px 70px rgba(176,166,227,.10), 0 4px 14px rgba(0,0,0,.4); } } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } html, body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; } body{ font-feature-settings:"ss01","cv11"; transition:background 200ms ease, color 200ms ease; } ::selection{ background:color-mix(in oklch, var(--primary) 28%, transparent); } a{ color:inherit; text-decoration:none; } a:focus-visible, button:focus-visible, input:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; } .skip-link{ position:fixed; top:10px; left:10px; z-index:100; padding:10px 14px; border-radius:var(--r-md); background:var(--secondary); color:var(--secondary-fg); font:600 14px/1 var(--font-sans); transform:translateY(calc(-100% - 14px)); transition:transform 120ms ease; } .skip-link:focus{ transform:translateY(0); } main:focus{ outline:none; } /* ----- nav ----- */ .nav{ position:sticky; top:0; z-index:50; background:color-mix(in oklch, var(--bg) 82%, transparent); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--line); } .nav::after{ content:""; position:absolute; inset:auto 0 -1px 0; height:1px; background:linear-gradient(90deg, transparent 5%, color-mix(in oklch, var(--primary) 45%, transparent) 50%, transparent 95%); opacity:.5; pointer-events:none; } .nav-inner{ max-width:var(--maxw); margin:0 auto; padding:14px 32px; display:flex; align-items:center; gap:32px; } .brand{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px; letter-spacing:-0.025em;} .brand .glyph{ width:28px; height:28px; border-radius:7px; background:linear-gradient(135deg, var(--primary) 0%, color-mix(in oklch, var(--primary) 72%, var(--accent)) 100%); display:grid; place-items:center; color:var(--primary-fg); font-weight:700; font-size:14px; letter-spacing:-0.04em; position:relative; box-shadow:0 2px 8px color-mix(in oklch, var(--primary) 35%, transparent); } .brand .glyph::after{ content:""; position:absolute; top:-2px; right:-2px; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--bg); } .brand-name .dot{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--accent); margin-left:2px; transform:translateY(-7px); } .nav-links{ display:flex; gap:4px; align-items:center; flex:1; } .nav-links a{ font-size:14px; color:var(--fg-2); padding:7px 11px; border-radius:var(--r-pill); transition:background 120ms ease, color 120ms ease; } .nav-links a:hover{ color:var(--fg); background:color-mix(in oklch, var(--surface) 70%, transparent); } .nav-cta{ display:flex; gap:10px; align-items:center; } /* Dark-mode toggle (in .nav-cta on every page; /site.js drives it). */ .mode-toggle{ width:34px; height:34px; border-radius:var(--r-pill); border:1px solid var(--line-strong); background:transparent; color:var(--fg-2); cursor:pointer; display:grid; place-items:center; padding:0; transition:background 120ms ease, color 120ms ease, border-color 120ms ease; } .mode-toggle:hover{ background:var(--surface-2); color:var(--fg); } .mode-toggle svg{ width:16px; height:16px; display:block; } .mode-toggle .ic-sun{ display:none; } [data-mode="dark"] .mode-toggle .ic-sun{ display:block; } [data-mode="dark"] .mode-toggle .ic-moon{ display:none; } @media (prefers-color-scheme: dark){ :root:not([data-mode="light"]):not([data-mode="dark"]) .mode-toggle .ic-sun{ display:block; } :root:not([data-mode="light"]):not([data-mode="dark"]) .mode-toggle .ic-moon{ display:none; } } /* ----- buttons ----- */ .btn{ font:500 14px/1 var(--font-sans); letter-spacing:-0.005em; padding:10px 16px; border-radius:var(--r-md); border:1px solid transparent; cursor:pointer; transition:background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; } .btn:active{ transform:translateY(0.5px); } .btn-primary{ background:linear-gradient(180deg, color-mix(in oklch, var(--primary) 92%, white) 0%, var(--primary) 55%); color:var(--primary-fg); box-shadow:0 1px 2px rgba(15,16,34,.18), inset 0 1px 0 rgba(255,255,255,.16); } .btn-primary:hover{ background:var(--primary-2); box-shadow:0 4px 16px color-mix(in oklch, var(--primary) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.16); transform:translateY(-1px); } .btn-secondary{ background:var(--secondary); color:var(--secondary-fg); } .btn-secondary:hover{ background:color-mix(in oklch, var(--secondary) 85%, var(--primary)); } .btn-ghost{ background:transparent; color:var(--fg); border-color:var(--line-strong); } .btn-ghost:hover{ background:var(--surface-2); border-color:color-mix(in oklch, var(--primary) 40%, var(--line-strong)); } .btn-link{ background:transparent; color:var(--primary); padding-left:4px; padding-right:4px; } .btn-link:hover{ color:var(--primary-2); } .btn-lg{ padding:13px 22px; font-size:15px; } .btn-sm{ padding:7px 12px; font-size:13px; } /* ----- input ----- */ .input{ font:400 14px/1.4 var(--font-sans); padding:11px 14px; border-radius:var(--r-md); border:1px solid var(--line-strong); background:var(--surface); color:var(--fg); width:100%; } .input::placeholder{ color:var(--muted-2); } .input:focus{ outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus); } /* ----- generic ----- */ .container{ max-width:var(--maxw); margin:0 auto; padding:0 32px; } .eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-text); display:inline-flex; align-items:center; gap:10px; } .eyebrow::before{ content:""; width:22px; height:1px; background:color-mix(in oklch, var(--accent-text) 65%, transparent); } /* Gradient emphasis for display headings — pages opt in via . */ .grad-em em, em.grad{ font-style:normal; font-weight:inherit; background:linear-gradient(100deg, var(--primary) 10%, color-mix(in oklch, var(--primary) 55%, var(--accent)) 85%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ----- scroll reveal (driven by /site.js; harmless without it) ----- */ .rv, .rv-child > *{ opacity:0; transform:translateY(14px); transition:opacity 550ms cubic-bezier(.2,.6,.25,1), transform 550ms cubic-bezier(.2,.6,.25,1); } .rv.in, .rv-child.in > *{ opacity:1; transform:none; } .rv-child.in > *:nth-child(2){ transition-delay:70ms; } .rv-child.in > *:nth-child(3){ transition-delay:140ms; } .rv-child.in > *:nth-child(4){ transition-delay:210ms; } .rv-child.in > *:nth-child(5){ transition-delay:280ms; } .rv-child.in > *:nth-child(6){ transition-delay:350ms; } .rv-child.in > *:nth-child(7){ transition-delay:420ms; } .rv-child.in > *:nth-child(8){ transition-delay:490ms; } .rv-child.in > *:nth-child(9){ transition-delay:560ms; } /* No-JS / crawler fallback: html gets .js from the head snippet; without it, everything stays visible. */ html:not(.js) .rv, html:not(.js) .rv-child > *{ opacity:1; transform:none; } /* ----- footer ----- */ footer.bot{ border-top:1px solid var(--line); padding:64px 32px 48px; margin-top:96px; background:var(--surface-2); } footer.bot .inner{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; } footer.bot h2{ font-family:var(--font-mono); font-size:10px; line-height:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; font-weight:500; } footer.bot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; } footer.bot ul a{ font-size:14px; color:var(--fg-2); } footer.bot ul a:hover{ color:var(--primary); } footer.bot .blurb{ font-size:13.5px; color:var(--muted); line-height:1.55; max-width:34ch; margin-top:16px; } footer.bot .meta{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:flex; justify-content:space-between; max-width:var(--maxw); margin-left:auto; margin-right:auto; } /* ----- card ----- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; } /* ----- responsive ----- */ @media (max-width: 920px){ .nav-inner{ padding:14px 20px; } .nav-links{ display:none; } .container{ padding:0 20px; } footer.bot .inner{ grid-template-columns:1fr 1fr; gap:32px; } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .rv, .rv-child > *{ opacity:1 !important; transform:none !important; } *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:0.01ms !important; } }