/* ══════════════════════════════════════════════════════ Smarter Dev — Product surface The second of two visual systems on this site. framework.css — MARKETING. Near-black ground, animated hex canvas, cyan-tinted hairlines, glows. Built to be looked at. product.css — PRODUCT. Flat slate ground, no canvas, neutral hairlines, no glow. Built to be READ, for hours. The product system is not a dark-mode variant of the marketing one — it is the same brand with the volume down. Four rules define it: 1. ONE GROUND. Everything sits on --p-bg. Depth comes from a small number of raised planes, never from a gradient or an image. 2. HAIRLINES ARE NEUTRAL. Marketing tints every border cyan; here borders are slate (--p-line / --p-line-strong). Tinted borders read as decoration, and decoration is what tires an eye over a long session. 3. ACCENT IS A MARK, NOT A SURFACE. Full --p-accent appears a handful of times per view — the primary action, the live pulse, one meter fill, the active nav rule. Accent used as *text* steps down to --p-accent-text, which holds up at paragraph length where #00d4ff glares. 4. NO MOTION FOR ITS OWN SAKE. The only thing that animates is something actually happening. Scope: every rule below is nested under [data-product], set on the page shell. Marketing pages never see any of it, so this file is safe to load globally — and it survives SPA partial swaps, which a class would not. Type roles are inherited from framework.css: --heading (Bruno Ace SC) for labels and titles, --body (Inter) for prose, --mono for machine text — timings, token counts, model ids, keyboard hints. ══════════════════════════════════════════════════════ */ /* ── Tokens ───────────────────────────────────────────── Declared on :root, not on [data-product], so a page can hand them to a portalled dialog that lives outside the shell. */ :root { /* Planes, recessed → raised. */ --p-recess: #0b0f17; /* chrome strips: header bars, footers, wells */ --p-bg: #0c111a; /* the ground */ --p-surface: #121826; /* raised: cards, composer, chips, active rows */ --p-surface-2: #171e2e;/* nested inside something already raised */ --p-float: #1a2130; /* dialogs and popovers, above everything */ /* Hairlines. Slate, deliberately — see rule 2. */ --p-line: #181f2a; /* dividers and rules on the ground */ --p-line-strong: #273040; /* the edge of a raised plane */ --p-line-focus: #3d4c63; /* hover / focus */ /* Text, brightest → quietest. Every step clears 4.5:1 on --p-bg. */ --p-text: #eaf1f8; /* titles, emphasis, the thing you are reading now */ --p-body: #b9c6d6; /* prose */ --p-muted: #8195aa; /* secondary UI: nav, list items, quiet buttons */ --p-dim: #5f7288; /* labels, bylines, machine chatter */ /* Accent. Sparingly. */ --p-accent: #00d4ff; --p-accent-text: #5ecfe8; /* accent as *text* */ --p-accent-wash: rgba(0, 212, 255, .07); --p-accent-line: rgba(0, 212, 255, .30); --p-ok: #3ecf8e; --p-warn: #d9a441; --p-bad: #e8636f; --p-bad-line: rgba(232, 99, 111, .38); --p-bad-wash: rgba(232, 99, 111, .07); /* Rhythm. */ --p-tap: 40px; /* minimum interactive height */ --p-pad: clamp(1rem, 3vw, 2rem); --p-measure: 46rem; /* reading column */ --p-nav: 55px; /* fixed .site-nav height */ } /* ── Ground ───────────────────────────────────────────── The marketing canvas is a fixed, full-viewport element outside the SPA content partial, so it is still in the DOM on a product page. Hide it here rather than omitting it per-template: this survives SPA navigation in both directions, where a template-level omission would not. */ body:has([data-product]) { background: var(--p-bg); color: var(--p-body); } body:has([data-product]) #bg { display: none } /* ── Site nav, product dressing ───────────────────────── Same nav markup as marketing; quieter clothes. Links drop the Bruno Ace all-caps treatment for plain Inter — a product nav is wayfinding, not a headline — and the active item is marked with a rule under it instead of a glowing box. */ body:has([data-product]) .site-nav { padding: 0 20px; height: var(--p-nav); background: var(--p-bg); backdrop-filter: none; border-bottom: 1px solid var(--p-line); gap: 1rem; } body:has([data-product]) .nav-links { gap: 4px } body:has([data-product]) .nav-links a { position: relative; display: inline-flex; align-items: center; height: var(--p-nav); padding: 0 14px; border: 0; font-family: var(--body); font-size: .85rem; font-weight: 400; letter-spacing: 0; color: var(--p-muted); transition: color .18s; } body:has([data-product]) .nav-links a:hover { color: var(--p-text); background: none; } /* The rule is a pseudo-element so it can sit flush on the nav's own border rather than pushing the link box around. */ body:has([data-product]) .nav-links a.active { color: var(--p-text); background: none; } body:has([data-product]) .nav-links a.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--p-accent); } body:has([data-product]) .site-nav .btn-follow { display: inline-flex; align-items: center; height: 34px; padding: 0 18px; font-family: var(--body); font-size: .85rem; letter-spacing: 0; color: var(--p-text); background: transparent; border: 1px solid var(--p-line-strong); box-shadow: none; text-decoration: none; transition: border-color .18s, background .18s; } body:has([data-product]) .site-nav .btn-follow:hover { border-color: var(--p-line-focus); background: var(--p-surface); color: var(--p-text); } body:has([data-product]) .nav-toggle span { background: var(--p-muted) } /* nav.css now folds the row into the hamburger at 760px for every page, so the fold itself is not repeated here. What is left is only what differs about a PRODUCT nav once stacked: its links are sized by product tokens rather than the marketing scale, and its active marker is an underline that means nothing in a vertical list. */ @media (max-width: 760px) { body:has([data-product]) .site-nav { height: auto; min-height: var(--p-nav); } body:has([data-product]) .nav-links a { height: auto; padding: 12px 0; justify-content: center; font-size: .85rem; } body:has([data-product]) .nav-links a.active::after { display: none } /* `display` has to be restated in both states, not just the open one: the unscoped product rule above sets `display: inline-flex` and outranks nav.css's `display: none`, so without this the button stays stranded beside the hamburger instead of folding into the menu. */ body:has([data-product]) .site-nav .btn-follow { display: none; width: 100%; margin-bottom: 8px; justify-content: center; } body:has([data-product]) .nav-toggle[aria-expanded="true"] ~ .btn-follow { display: inline-flex; } } /* A product page owns the whole viewport, so the marketing footer would only add a second scroll region below a pane that already fills the screen. */ body:has([data-product]) > footer { display: none } /* ── Filling the viewport ─────────────────────────────── The page is a column: the fixed nav is cleared with padding, anything else in the flow above the app (the founder banner, say) takes its natural height, and the app pane takes whatever is left. This is deliberately not `height: calc(100dvh -