/* ============================================================ BLUEGREY — BASE + CHROME Imports the token system, then sets element defaults, the background motifs, and the shared header/nav/footer chrome. Every value resolves to a token in tokens.css. ============================================================ */ @import url("tokens.css"); /* ---------- 0.0 reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* overflow-x: clip stops decorative halos (.shot-frame::before) widening the page at 390px without creating a scroll container (sticky keeps working) */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } /* Lenis soft-momentum scroll (audit D1) — the classes Lenis stamps on . Native scroll-behavior must yield while Lenis interpolates; anchors, keyboard and touch stay native. Lenis is never started under prefers-reduced-motion (main.js). */ html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } body { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background: var(--color-page); min-height: 100vh; position: relative; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul { list-style: none; padding: 0; } :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } /* ---------- 1.0 background FX ---------- Carbon base with a very faint graph-paper grid and ONE slow slate radial glow that drifts. Sits behind all content (z-index:-1, fixed), never catches pointer events, and is frozen under reduced motion. Reintroduced per the 2026-06-21 motion brief; kept deliberately faint. */ .page-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .page-fx::before { /* graph-paper grid */ content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: var(--grid-cell) var(--grid-cell); } .page-fx::after { /* single slate radial glow, slow drift */ content: ""; position: absolute; inset: -25%; background: radial-gradient(closest-side, var(--glow-color), transparent 72%); animation: fx-drift var(--dur-drift) var(--ease-standard) infinite alternate; will-change: transform; } @keyframes fx-drift { from { transform: translate3d(-7%, -5%, 0) scale(1); } to { transform: translate3d(7%, 6%, 0) scale(1.12); } } /* ---------- 2.0 layout ---------- */ .container { width: 100%; max-width: var(--maxw-content); margin-inline: auto; padding-inline: var(--gutter); } @media (min-width: 768px) { .container { padding-inline: var(--gutter-lg); } } main.container { padding-block: var(--space-9) var(--space-11); min-height: 60vh; } /* ---------- 4.0 spec label (the mono voice: BG-01 / NESTER) ---------- */ .spec-label { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-secondary); } /* ---------- 5.0 chips ---------- UI pills are the UI font (Inter 500), NOT mono — mono is reserved for spec labels / codes (BG-01, hex, captions). Per the BlueGrey craft layer. */ .chip { display: inline-block; font-family: var(--font-body); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--weight-medium); padding: 2px var(--space-2); border-radius: var(--radius-pill); border: var(--border-hairline); background: var(--color-muted-fill); color: var(--color-text-secondary); vertical-align: middle; white-space: nowrap; } .chip--beta { color: var(--color-accent-bright); border-color: var(--color-border-bright); } /* ---------- 5.0 buttons (UI is Inter 600, per Brand Pack §10) ---------- Proportion: width ~= 2x height (horizontal padding is 2x the vertical). ONE corner radius across the product (--radius-md). Importance reads by DARKNESS, not by adding colour: muted (ghost) -> border -> solid (slate) -> action (flame, one per view) -> reward (brass keyline, never with flame). Every state is an EXPLICIT colour token (default/hover/pressed/disabled), never a filter:brightness trick (which is invisible on a solid fill). */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-sm); line-height: 1; padding: var(--space-3) var(--space-6); /* 12px x 32px ~= width 2x height */ border-radius: var(--radius-md); border: var(--border-hairline); transition: var(--transition-colors), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-press) var(--ease-standard); } /* solid = the blue primary: weight + a soft glow in our blue (Option B). Explicit state tokens; flame below keeps its own treatment. */ .btn--solid { background: var(--blue-btn); color: var(--color-on-accent); border-color: var(--blue-btn); box-shadow: var(--shadow-btn-glow); } .btn--solid:hover { background: var(--blue-btn-hover); border-color: var(--blue-btn-hover); box-shadow: var(--shadow-btn-glow-hover); transform: translateY(-1px); } .btn--solid:active { background: var(--blue-btn-pressed); border-color: var(--blue-btn-pressed); } /* border = the visible secondary: blue keyline + faint blue wash, never grey-on-grey */ .btn--border { color: var(--color-accent-bright); border-color: var(--color-border-bright); background: var(--color-accent-fill); } .btn--border:hover { border-color: var(--color-focus); color: var(--color-focus); background: var(--color-muted-fill); } .btn--muted { color: var(--color-text-secondary); } .btn--muted:hover { color: var(--color-text); border-color: var(--color-border-strong); } /* flame: the one loud, rare action — explicit default/hover/pressed tokens */ .btn--action { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); } .btn--action:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); color: var(--color-on-action); transform: translateY(-1px); } .btn--action:active { background: var(--color-action-pressed); border-color: var(--color-action-pressed); } /* reward: brass keyline pill (pro / milestones). NEVER on a screen with flame. */ .btn--reward { border-radius: var(--radius-pill); color: var(--color-reward); border-color: var(--color-reward); background: var(--color-reward-fill); } .btn--reward:hover { background: transparent; } /* disabled — desaturated slate, unmistakably inactive (Brand Pack §09/§10) */ .btn[disabled], .btn[aria-disabled="true"] { color: var(--color-text-muted); border-color: var(--color-border); background: var(--color-muted-fill); pointer-events: none; cursor: default; } /* press feedback: small, quick scale-down (Brand Pack §11) */ .btn:active { transform: translateY(1px) scale(.985); } /* ============================================================ 5.1 FORMS — inputs (Brand Pack §10 / §09) Resting warm-grey hairline; slate focus ring + faint slate glow on click-in; flame error state with the message right under the field. Ready for the contact / newsletter forms that POST to /api/subscribe. ============================================================ */ .field { display: grid; gap: var(--space-2); } .field__label { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-secondary); } .input, .textarea { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background: var(--color-surface); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); width: 100%; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .textarea { resize: vertical; min-height: calc(var(--space-9) + var(--space-3)); } .input::placeholder, .textarea::placeholder { color: var(--color-text-muted); } .input:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--color-input-focus); box-shadow: var(--shadow-input-focus); } .input:disabled, .textarea:disabled { color: var(--color-text-muted); background: var(--color-muted-fill); cursor: default; } /* flame error state — red border + message under the field */ .field--error .input, .field--error .textarea, .input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-input-error); } .field--error .input:focus-visible, .field--error .textarea:focus-visible, .input[aria-invalid="true"]:focus-visible { box-shadow: var(--shadow-input-error); } .field__msg { font-size: var(--text-sm); color: var(--color-text-secondary); } .field--error .field__msg { color: var(--color-input-error); } .field__hint { font-size: var(--text-sm); color: var(--color-text-muted); } /* an inline form row (email + button) */ .form-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: start; } .form-row .input { flex: 1 1 16rem; } /* ============================================================ 5.2 OVERLAYS — tooltips + toasts (Brand Pack §11) Tooltip: appears on SUSTAINED hover/focus after ~1s (vital where small unlabelled icons sit together). Toast: slides UP from the bottom = a temporary action (motion as wayfinding), then dismisses. Both transform/opacity only and neutralised under reduced motion. ============================================================ */ [data-tip] { position: relative; } [data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%) translateY(4px); z-index: var(--z-menu); pointer-events: none; white-space: nowrap; font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-2xs); letter-spacing: var(--tracking-normal); color: var(--color-text); background: var(--color-surface-raised); border: var(--border-hairline); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); box-shadow: var(--shadow-pop); opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out-expo), visibility var(--dur-fast) var(--ease-standard); } [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: var(--delay-tip); /* ~1s sustained hover before it shows */ } .toast { position: fixed; left: 50%; bottom: var(--space-6); z-index: var(--z-modal); transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--color-text); background: var(--color-surface-raised); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-pop); animation: toast-up var(--dur-toast) var(--ease-out-expo); } .toast--ok { border-color: var(--color-border-bright); } .toast--error { border-color: var(--color-action); } /* error stays flame */ @keyframes toast-up { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ============================================================ HEADER / NAV ============================================================ */ /* the condensing bar (2026-07-03, founder call — supersedes the floating pill): fixed, full width, square corners. At rest a 72px faint carbon wash with a light blur; once scrolled past ~24px (class toggled in main.js) it condenses to 52px carbon glass with a hairline bottom border and a soft shadow. Fixed = out of flow, so the height change never shifts the page; heroes compensate with --header-h padding. --hh tracks the current height so the mobile menu panel follows it. */ .site-header { --hh: var(--header-h); position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); height: var(--hh); background: var(--header-bg); border-bottom: 1px solid transparent; -webkit-backdrop-filter: var(--header-blur); backdrop-filter: var(--header-blur); transition: height var(--dur-header) var(--ease-out), background var(--dur-header) var(--ease-out), border-color var(--dur-header) var(--ease-out), box-shadow var(--dur-header) var(--ease-out), -webkit-backdrop-filter var(--dur-header) var(--ease-out), backdrop-filter var(--dur-header) var(--ease-out); } .site-header.is-scrolled { --hh: var(--header-h-condensed); background: var(--header-bg-scrolled); border-bottom-color: var(--color-border); -webkit-backdrop-filter: var(--header-blur-scrolled); backdrop-filter: var(--header-blur-scrolled); box-shadow: var(--shadow-header); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--space-5); } /* the fixed bar overlays the page: heroes pad down by the resting height, and anchor targets clear the condensed bar */ html { scroll-padding-top: var(--header-h-condensed); } .logo { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md); letter-spacing: var(--tracking-tight); color: var(--color-text); } .logo__word { height: 32px; width: auto; display: block; } .site-nav__list { display: flex; align-items: center; gap: var(--space-5); } /* plain links only (2026-07-03, founder call — the Products dropdown moved out of the header; the full grouped directory lives on /tools/) */ .site-nav a { font-size: var(--text-sm); color: var(--color-text-secondary); transition: var(--transition-colors); } .site-nav a:hover { color: var(--color-accent-bright); } .site-nav .btn { color: var(--color-text); } /* burger + mobile menu (CSS-only, checkbox hack) */ .nav-toggle, .nav-burger { display: none; } @media (max-width: 767px) { .nav-burger { display: inline-flex; flex-direction: column; gap: 5px; width: var(--space-6); height: var(--space-6); align-items: center; justify-content: center; } .nav-burger span { display: block; width: 20px; height: 2px; background: var(--color-text); transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard); } /* the bar's backdrop-filter would otherwise make it the containing block for the fixed panel below, collapsing it; drop the blur on mobile (including the scrolled state — keep bg + border, no blur). The bar also needs a readable base on mobile without the blur. */ .site-header, .site-header.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--color-page-translucent); } /* --hh (72 -> 52 once scrolled) keeps the panel flush under the bar */ .site-nav { position: fixed; inset: var(--hh) 0 0 0; z-index: var(--z-menu); background: var(--color-page); border-top: var(--border-hairline); padding: var(--space-6) var(--gutter); overflow-y: auto; transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out-expo); } .nav-toggle:checked ~ .site-nav { transform: none; } .site-nav__list { flex-direction: column; align-items: stretch; gap: var(--space-4); } .site-nav a:not(.btn) { font-size: var(--text-lg); color: var(--color-text); } .site-nav .btn { justify-content: center; } .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; } .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ============================================================ FOOTER ============================================================ */ .site-footer { border-top: var(--border-hairline); margin-top: var(--space-10); padding-block: var(--space-8); position: relative; } .site-footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-7); } .site-footer__tag { color: var(--color-text-secondary); font-size: var(--text-sm); } .footer-directory { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-6); padding-bottom: var(--space-7); border-bottom: var(--border-hairline); } .footer-directory__group { display: grid; gap: var(--space-3); align-content: start; } .footer-directory ul { display: grid; gap: var(--space-3); } .footer-directory li { display: grid; gap: 2px; } .footer-directory a { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--color-text); transition: var(--transition-colors); } .footer-directory a:hover { color: var(--color-accent-bright); } .footer-directory__benefit { font-size: var(--text-sm); color: var(--color-text-secondary); } .site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-5); color: var(--color-text-secondary); font-size: var(--text-sm); } /* ============================================================ PAGE SHELL MARKER (placeholder until real page content lands) ============================================================ */ .page-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-hi); margin-block: var(--space-3) var(--space-4); } .page-note { color: var(--color-text-secondary); max-width: var(--maxw-prose); } .page-note a { color: var(--color-accent-bright); transition: var(--transition-colors); } .page-note a:hover { color: var(--color-text); } .page-cta { margin-top: var(--space-6); } /* hero/display type drops a rung on small screens (token sizes only, DESIGN.md 1.3) */ @media (max-width: 767px) { .page-title { font-size: var(--text-2xl); } } @media (max-width: 420px) { .page-title { font-size: var(--text-xl); } } /* ============================================================ HOVER GRAMMAR — text/nav links grow a 1px underline from the left (transform-only, no layout thrash). Cards + buttons handled in their own blocks above. ============================================================ */ .site-nav__list > li > a:not(.btn), .footer-directory a { position: relative; } .site-nav__list > li > a:not(.btn)::after, .footer-directory a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--color-accent-bright); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease-standard); } .site-nav__list > li > a:not(.btn):hover::after, .footer-directory a:hover::after { transform: scaleX(1); } /* inline / prose text links: slate underline that slides in from the left */ .page-note a, .page-lead a, .prose a, .track-lead a { background-image: linear-gradient(var(--color-accent-bright), var(--color-accent-bright)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .page-note a:hover, .page-lead a:hover, .prose a:hover, .track-lead a:hover { background-size: 100% 1px; } /* ============================================================ CARD — one product card for everywhere (DESIGN.md 5.0) ============================================================ */ .product-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } /* orphan control (audit D7/11): the template stamps data-count so a lone card or a pair never stretches into a stranded full-width row */ .product-grid[data-count="1"] { grid-template-columns: minmax(0, 26rem); } .product-grid[data-count="2"] { grid-template-columns: repeat(auto-fit, minmax(16rem, 24rem)); } .card { display: grid; gap: var(--space-3); align-content: start; background: var(--color-surface); border: var(--border-hairline); border-radius: var(--radius-lg); padding: var(--space-6); transition: transform var(--dur-hover) var(--ease-soft-spring), border-color var(--dur-hover) var(--ease-swift), box-shadow var(--dur-hover) var(--ease-out); } .card:hover { transform: translateY(-4px); border-color: var(--color-border-bright); box-shadow: var(--shadow-card-hover); } /* cards are also [data-reveal]; that rule's `transition` shorthand would otherwise win and drop the hover transitions. This higher-specificity rule carries BOTH the reveal (opacity/translate, slow) and hover (transform/ border/shadow, ~180ms) transitions on one declaration. */ .js [data-reveal].card { transition: opacity var(--dur-reveal) var(--ease-out), translate var(--dur-reveal-rise) var(--ease-soft-spring), transform var(--dur-hover) var(--ease-soft-spring), border-color var(--dur-hover) var(--ease-swift), box-shadow var(--dur-hover) var(--ease-out); } .card__icon { width: var(--space-8); height: var(--space-8); color: var(--color-accent); } .card__icon svg { width: 100%; height: 100%; display: block; } .card__icon [stroke] { stroke: currentColor; } /* ---------- card FACE (audit D7/12) ---------- Every product card carries a viz zone: a muted tinted mini-diagram hinting at what the tool does (brand tints only, never flame), replaced automatically by a real screenshot/clip when products.json sets a src. */ .card__viz { position: relative; overflow: hidden; border-radius: var(--radius-md); height: var(--space-10); border: var(--border-hairline); background: linear-gradient(140deg, var(--viz-bg1), var(--viz-bg2)); } .card__viz img, .card__viz video { width: 100%; height: 100%; object-fit: cover; display: block; } .card__viz i { position: absolute; display: block; font-style: normal; } /* nest: parts settling on a sheet */ .card__viz--nest i { border-radius: var(--radius-sm); background: var(--viz-shape); } .card__viz--nest i:nth-child(1) { width: 26%; height: 30%; left: 8%; top: 14%; rotate: -8deg; background: var(--viz-shape-blue); } .card__viz--nest i:nth-child(2) { width: 16%; height: 42%; left: 40%; top: 10%; rotate: 12deg; } .card__viz--nest i:nth-child(3) { width: 22%; height: 24%; left: 26%; top: 56%; rotate: 4deg; opacity: .7; } .card__viz--nest i:nth-child(4) { width: 14%; height: 30%; left: 64%; top: 44%; rotate: -16deg; background: var(--viz-shape-soft); } /* reg marks: crosshair circles */ .card__viz--regmarks { background: linear-gradient(140deg, var(--viz-bg2), var(--viz-bg3)); } .card__viz--regmarks i { width: 18px; height: 18px; border: 2px solid var(--viz-shape); border-radius: var(--radius-pill); } .card__viz--regmarks i::before, .card__viz--regmarks i::after { content: ""; position: absolute; background: var(--viz-shape); } .card__viz--regmarks i::before { left: 50%; top: -5px; bottom: -5px; width: 2px; translate: -50% 0; } .card__viz--regmarks i::after { top: 50%; left: -5px; right: -5px; height: 2px; translate: 0 -50%; } .card__viz--regmarks i:nth-child(1) { left: 10%; top: 16%; border-color: var(--viz-shape-blue); } .card__viz--regmarks i:nth-child(1)::before, .card__viz--regmarks i:nth-child(1)::after { background: var(--viz-shape-blue); } .card__viz--regmarks i:nth-child(2) { right: 10%; top: 16%; opacity: .6; } .card__viz--regmarks i:nth-child(3) { left: 10%; bottom: 16%; opacity: .6; } /* preflight: check lines shortening to a pass */ .card__viz--preflight i { left: 12%; right: 12%; height: 8%; border-radius: var(--radius-pill); background: var(--viz-shape); } .card__viz--preflight i:nth-child(1) { top: 20%; opacity: .55; } .card__viz--preflight i:nth-child(2) { top: 44%; right: 42%; opacity: .75; } .card__viz--preflight i:nth-child(3) { top: 68%; right: 30%; background: var(--viz-shape-blue); } /* vector: nodes on a path */ .card__viz--vector i { width: 10px; height: 10px; border: 2px solid var(--viz-shape-blue); border-radius: var(--radius-pill); background: var(--color-surface); } .card__viz--vector::after { content: ""; position: absolute; left: 16%; top: 52%; width: 66%; height: 2px; background: var(--viz-shape); rotate: -12deg; transform-origin: left; } .card__viz--vector i:nth-child(1) { left: 13%; top: 48%; } .card__viz--vector i:nth-child(2) { left: 48%; top: 30%; } .card__viz--vector i:nth-child(3) { right: 14%; top: 56%; } /* dashboard: quiet bars */ .card__viz--dashboard i { bottom: 18%; width: 9%; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--viz-shape); } .card__viz--dashboard i:nth-child(1) { left: 16%; height: 26%; opacity: .6; } .card__viz--dashboard i:nth-child(2) { left: 30%; height: 42%; } .card__viz--dashboard i:nth-child(3) { left: 44%; height: 34%; opacity: .75; } .card__viz--dashboard i:nth-child(4) { left: 58%; height: 52%; background: var(--viz-shape-blue); } .card__viz--dashboard i:nth-child(5) { left: 72%; height: 38%; opacity: .6; } .card__name { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-text); } .card__tag { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--color-text-secondary); } .card__desc { font-size: var(--text-base); color: var(--color-text); } .card__cta { margin-top: var(--space-2); justify-self: start; } /* ---------- spotlight field (audit D5) ---------- On dark-zone card grids main.js adds .has-spot and tracks the cursor across the WHOLE grid (--mx/--my per card), so a soft accent light sweeps the cards as one field. Desktop pointers only; no-op on touch and under prefers-reduced-motion (never attached). */ .has-spot > * { position: relative; } .has-spot > *::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(var(--spot-size) calc(var(--spot-size) * .66) at var(--mx, 50%) var(--my, 50%), var(--spot-glow), transparent 70%); transition: opacity var(--dur-base) var(--ease-out); } .has-spot:hover > *::after { opacity: 1; } /* ============================================================ SECTION — generic content block spacing + heads ============================================================ */ .section { padding-block: var(--space-9); } .section__head { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); } .section__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--color-text-hi); } /* ============================================================ TOOLPATH — CNC cut-line connective tissue (DESIGN.md 3.3). stroke-dashoffset is the one sanctioned non-transform/opacity property for the draw-in (MOTION.md 0.1 / 2.1). ============================================================ */ .toolpath { display: block; overflow: visible; } .toolpath line, .toolpath path { stroke: var(--toolpath-color); stroke-width: var(--toolpath-width); stroke-dasharray: 6 6; fill: none; } .toolpath__node { fill: var(--color-accent-bright); } .js [data-reveal] .toolpath line, .js [data-reveal] .toolpath path { stroke-dashoffset: 280; transition: stroke-dashoffset var(--dur-reveal) var(--ease-out-expo); } .js [data-reveal].is-visible .toolpath line, .js [data-reveal].is-visible .toolpath path { stroke-dashoffset: 0; } /* ============================================================ 5.0 HERO LOAD + SCROLL REVEAL Both gated behind .js (added by an inline head script) so that with JS OFF nothing is hidden — content renders fully. ============================================================ */ /* hero load choreography (MOTION.md 1.0; soft-spring since the 2026-07-03 look-and-feel round): rise on the spring, fade on the out curve */ .js [data-hero] > * { opacity: 0; transform: translateY(var(--reveal-rise)); } .js [data-hero].is-loaded > * { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal-rise) var(--ease-soft-spring); transition-delay: min(calc(var(--i, 0) * var(--stagger-step)), var(--stagger-cap)); } /* scroll reveal (MOTION.md 2.0; audit D2 choreography) */ /* reveal uses the independent `translate` property (not `transform`) so a card can both fade-up on reveal AND lift on :hover (transform) without the two transitions clashing on the same property. Arrives 26px low, settles with a whisker of overshoot, ALWAYS at opacity 1. Sibling stagger capped. */ .js [data-reveal] { opacity: 0; translate: 0 var(--reveal-rise); transition: opacity var(--dur-reveal) var(--ease-out), translate var(--dur-reveal-rise) var(--ease-soft-spring); transition-delay: min(calc(var(--i, 0) * var(--stagger-reveal)), var(--stagger-cap)); } .js [data-reveal].is-visible { opacity: 1; translate: 0 0; } /* ============================================================ 5.9 register-interest capture (BG-128, Drop 2) The band form reuses .form-row/.input/.btn; these rules only size and centre the capture pieces. Errors stay flame, like .toast--error and the input error state. ============================================================ */ .reg-form { max-width: 40rem; margin-inline: auto; justify-content: center; } .reg-fine { text-align: center; margin-top: var(--space-4); } .reg-note { max-width: 40rem; margin: var(--space-5) auto 0; padding: var(--space-5); } .reg-note--err { border-color: var(--color-action); } .reg-alert { display: none; max-width: 46rem; margin: 0 auto var(--space-5); padding: var(--space-5); border-color: var(--color-action); } .reg-alert:target { display: block; } .reg-page-form { max-width: 46rem; margin-inline: auto; padding: var(--space-6); display: grid; gap: var(--space-5); } .reg-checks { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); } .reg-checks legend { margin-bottom: var(--space-2); } .reg-check { display: flex; gap: var(--space-3); align-items: baseline; cursor: pointer; } .reg-check input { accent-color: var(--color-accent-bright); } .reg-check__tag { margin-left: var(--space-2); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); } /* ============================================================ 5.95 provenance strip (BG-128, Drop 3) The quiet signapps.ai credential on the home About band: a small greyscale shot + one line. Deliberately understated — it must never read as an advert. ============================================================ */ .provenance { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); } .provenance__shot { flex: 0 0 auto; line-height: 0; } .provenance__shot img { width: 264px; max-width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); filter: grayscale(1) contrast(.92); opacity: .75; transition: opacity var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); } .provenance__shot:hover img { filter: grayscale(0); opacity: 1; } .provenance__line { flex: 1 1 18rem; max-width: 46ch; color: var(--color-text-secondary); font-size: var(--text-sm); } .provenance__line .spec-label { display: block; margin-bottom: var(--space-2); } /* ============================================================ 6.0 prefers-reduced-motion ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* force every reveal/hero target visible regardless of .js state */ .js [data-reveal], .js [data-reveal].is-visible, .js [data-hero] > *, .js [data-hero].is-loaded > *, [data-reveal], [data-hero] > * { opacity: 1 !important; transform: none !important; translate: none !important; transition: none !important; } .toolpath line, .toolpath path { stroke-dashoffset: 0 !important; } /* no hover lift/glow, no button lift, no background drift under reduce-motion */ .card:hover, .why:hover, .btn--action:hover, .btn--solid:hover, .btn:active { transform: none !important; box-shadow: none !important; } .page-fx::after { animation: none !important; transform: none !important; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }