/* ============================================================ Termdeck — home.css (V2 marketing homepage, agent-ai theme) Self-contained. Geist + DM Mono, midnight surfaces, hairline rails, ambient top-glow. Isolated from the shared homepage.css (which still styles /vs/* and /blog). Do not link both on one page. ============================================================ */ .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--primary);color:var(--primary-fg);padding:8px 14px;border-radius:0 0 var(--r-md) 0;font-size:13px} .skip-link:focus{left:0} /* ============ FONTS (Geist + DM Mono, embedded) ============ */ /* Geist is `optional`, not `swap`, and that is a CLS fix rather than a taste change (the freeze allows the former). The hero's lede stopped fading in with the reveal, so it now paints at first contentful paint instead of after it, which is the whole point of that change. But it paints in whatever face is ready, and the system fallback runs about 11% wider than Geist: measured 2026-09-07 on the live page, the hero was 43px taller at 412px wide and 95px taller at 1280px until the real face arrived, and everything below it moved when it did. CLS went 0.042 -> 0.132. `swap` guarantees that reflow happens; `optional` forbids it. The face gets a ~100ms block period and then either it is ready and is used, or the fallback is kept for the whole pageview with no swap at any later point. Geist is preloaded above and is 57 KB, so on a warm cache or an ordinary connection it wins that race and the reader sees Geist at first paint. On a cold, slow one they get the system sans for that pageview, which is the price of the guarantee, and the cheaper half of the trade against a moving page. A metric-matched @font-face fallback was tried first and abandoned: swept across size-adjust from 85% to 100%, the residual shift never reached zero at all four breakpoints at once, because the error is a whole-line-count jump rather than a smooth width error. */ @font-face{font-family:'Geist';src:url('../fonts/geist-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:optional} @font-face{font-family:'Geist Mono';src:url('../fonts/geist-mono-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap} /* DM Mono is the mono face here. Only the 400 and 500 cuts are embedded: this page asks for mono at 400/500/600/700, and DM Mono has no cut above 500, so 600/700 synthesize from 500 rather than pulling another file. */ @font-face{font-family:'DM Mono';src:url('../fonts/dm-mono-400-normal-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'DM Mono';src:url('../fonts/dm-mono-400-normal-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'DM Mono';src:url('../fonts/dm-mono-500-normal-latin-ext.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'DM Mono';src:url('../fonts/dm-mono-500-normal-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ============ TOKENS ============ THE PALETTE IS THE APP'S, BY REFERENCE AND NOT BY COPY. These names all resolve to --workspace-* from tokens/colors.css, which every marketing page already links. That file owns Termdeck's cool midnight spine; this sheet used to carry a SECOND, older palette (#0a0a0a canvas, #131315 cards, #a1a1a1 body copy) that predated the swap and was never moved with it, so the public site and the product were two different greys. The worst of it was body copy: --muted at #a1a1a1 against the app's #bdc7d2, 47 eight-bit steps dim and with none of the blue cast the rest of the palette has. var(), not the hex, on purpose. A copied value is a value that goes stale the next time colors.css moves, which is exactly how this file got here. The local names stay because ~600 declarations spell them, and renaming those is not what a palette swap is. */ :root{ --bg:var(--workspace-bg); /* #0c1117 midnight canvas */ --bg-2:var(--workspace-nav-hover); /* #10171f deep chrome */ --card:var(--workspace-surface); /* #161e27 card rung */ --card-2:var(--workspace-surface); /* flat cards: same rung, see --panel */ --raised:var(--workspace-surface-raised); /* #1d2834 */ --muted-surface:var(--workspace-surface-hover); /* #263443 */ --text:var(--workspace-text); /* #f4f7fa */ --muted:var(--workspace-muted); /* #bdc7d2 */ --faint:var(--workspace-faint); /* #8c9aaa */ --primary:var(--workspace-accent); /* #a3e9bd */ --primary-fg:var(--workspace-primary-fg); /* #0c1117 */ --border:var(--workspace-border); /* cool translucent hairline */ --border-soft:var(--workspace-nav-border); /* #263443 */ --rail:var(--workspace-nav-border); /* lit column edges */ /* --input is the BRIGHTENED edge: a card on hover, the "after" compare column, or a focused control. The grouping hairline cannot carry a control that is identified by its boundary alone, so text fields take the measured --workspace-control-border directly and brighten to --muted on focus. Everything else uses this, the app's strong hairline. */ --input:var(--workspace-border-strong); /* #354657 */ --ring:var(--workspace-accent); /* mint, same ring as the app */ /* ---- surfaces: one elevation language for every component on the page ---- desk = the page behind the column panel = a card you read as a component sunken = a chip nested inside a card well = media / live data surface edge + lift are the only two shadows on the page, so every raised thing is lit from the same angle by the same amount. */ --desk:var(--workspace-nav-bg); /* blue-black page behind the column */ --grid:rgba(163,233,189,.032); /* THE CARD IS LINEAR'S CARD NOW: a FLAT fill, a hairline, and nothing else. --panel was a linear-gradient(180deg, #171717, #131315) and the reference is explicit that a card is a solid #0f1011-class surface with an inset hairline, "no outer shadow, no glow". Both tokens keep their names so the ~20 rules that spell them do not move; they simply resolve to a colour instead of a gradient. */ --panel:var(--card); --panel-2:var(--raised); --sunken:var(--workspace-surface-raised); /* a chip nested inside a card */ --well:var(--workspace-overlay-bg); /* media / live data surface */ /* Both resting shadows are off. Linear's don'ts: "Do not use shadows to separate cards from the canvas, use hairline borders and inner inset shadows instead." The lift here is the surface step (#0c1117 -> #161e27, 20 eight-bit steps) plus the hairline, which is the same argument tokens/colors.css makes for the app: on a near-black canvas a cast shadow has nowhere to go. 0 0 #0000 and NOT none, because every consumer writes `box-shadow:var(--edge),var(--lift)` and `box-shadow:,none` is invalid, which would drop the whole declaration. Same trap tokens/controls.css documents for --btn-bezel-none. --lift-2 survives as a real shadow because it is the HOVER state, and an interaction affordance is not resting elevation. It is Linear's --shadow-sm. */ --edge:0 0 #0000; --lift:0 0 #0000; --lift-2:0 2px 4px rgba(0,0,0,.4); --grid-cols:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),var(--grid) calc(12.5% - 1px) 12.5%); --link-rule:rgba(88,220,142,.7); /* = --brand-green-400 at 70%, literal so the rule survives without color-mix */ --link-rule:color-mix(in srgb,var(--brand-green-400) 70%,transparent); /* 55% read as grey at 1x; a 1px rule needs the alpha */ --danger:#ff6b7a; --live:#42d187; --busy:#f2bd4f; /* state trio from the workspace palette */ /* ---- info: "here is a fact you did not ask for and cannot act on" ---- The marketing-local mirror of the app's --workspace-info (tokens/colors.css). Same hue, declared here because home.css is self-contained by design. The one thing that spends it — .price-tag — sits ON the flipped featured card and straddles its top edge, so the soft pair is BAKED OPAQUE rather than left as a tint: a translucent 14% would show near-black through the badge's top half and near-white through its bottom, and read as a two-tone chip. --info-soft = app info blue at 14% over #ededed --info-line = the same at 36% --info-ink is the app's soft-badge glyph run in reverse. On a DARK tint the label has to lift (the app's --workspace-info-text); on a light tint it has to sink, so it deepens to 4.88:1. Same rule (measure against the tint you just painted), opposite direction. */ --info-soft:#d4dfee; --info-line:#aec8f1; --info-ink:#275bae; --cat-purple:#c49cff; --cat-orange:#ff9b61; --cat-emerald:#56d9a0; --cat-blue:#68b7ff; --cat-pink:#f47daf; /* The page's one light source blends the product mint with the tool blue. Both hues already carry meaning in the app; here they act as brand identity and keep the marketing surface related to the workspace. */ --glow:radial-gradient(100% 80% at 42% 0%, rgba(66,209,135,.11), transparent 58%), radial-gradient(70% 65% at 72% 4%, rgba(79,145,247,.08), transparent 55%); /* Radii - Linear's five, and exactly its five: 2 / 4 / 6 / 12 / pill, with a hard cap of 12 on cards and panels. The old family (8/10/14/20) shared no value with the reference at all, and 12 hand-written literals sat off even that: 9px eight times, 15px five, plus 5, 7 and 11. See tokens/spacing.css, which took the same five values for the app family on the same pass. --r-xl is deliberately the same 12 as --r-lg: the name survives for the big frames that spell it, the value is capped where Linear caps it. */ --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:12px; --r-xl:12px; --pill:999px; --shell:1280px; --sans:'Geist',-apple-system,system-ui,sans-serif; --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace; --step:clamp(2.2rem,5.2vw,3.9rem); --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:80px} /* clears the 64px sticky .nav on in-page anchors */ body{background:var(--desk);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:-.01em} a{color:inherit;text-decoration:none} h1,h2,h3{font-weight:600;letter-spacing:-.028em;line-height:1.03;text-wrap:balance} ::selection{background:rgba(255,255,255,.16)} :focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ring);border-radius:var(--r-md)} /* ============ LAB CHROME ============ */ .demo-wrap{max-width:var(--shell);margin:0 auto;padding:0 32px} /* ============ PRIMITIVES ============ */ .eyebrow{display:inline-flex;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted)} .btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 17px;border-radius:var(--r-md);font-family:var(--sans);font-size:14px;font-weight:500;border:1px solid transparent;cursor:pointer;transition:background .16s,border-color .16s,transform .16s,color .16s;white-space:nowrap} .btn svg{width:15px;height:15px} .btn-primary{background:var(--primary);color:var(--primary-fg)} .btn-primary:hover{background:#fff} .btn-ghost{background:transparent;color:var(--text);border-color:var(--border)} .btn-ghost:hover{background:rgba(255,255,255,.05);border-color:var(--input)} /* Nav sign-up. Linear's one shaped exception: a white PILL against the dark bar, "the second highest-contrast element after the acid-lime CTA". Pure #ffffff and not --primary (#a3e9bd) on purpose, because the whole point of the variant is that it out-contrasts every other control in the chrome; --primary is the fill for a control that must not out-shout the sentence beside it. The weight is .btn's own 500 and is deliberately NOT overridden. Linear specifies 510, which is ten units away and not a difference anyone can see at 13px; it is also not a rung of this project's weight scale, and tests/sans-weight-scale.mjs fails any weight that is not one. A shape swap does not get to add a type rung. 16px of side padding over .btn-sm's 32px height is their 8/16. */ /* .btn prefixed so the 16px survives .btn-sm's `padding:0 12px`, which is declared after this and would otherwise win on source order at equal specificity. */ .btn.btn-signup{background:#fff;color:var(--primary-fg);border-radius:var(--pill);padding:0 16px} .btn.btn-signup:hover{background:var(--primary)} .btn-sm{height:32px;font-size:13px;padding:0 12px} .btn .arrow{transition:transform .18s var(--ease)} .btn:hover .arrow{transform:translateX(3px)} .dot{width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(66, 209, 135,.18)} .cat{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:var(--r-md);font-size:12.5px;font-weight:500;font-family:var(--mono);letter-spacing:.01em;border:1px solid} .cat i{width:14px;height:14px;display:inline-flex} .cat i svg{width:100%;height:100%} /* the vendor marks carry only a viewBox */ .cat.purple{color:var(--cat-purple);background:rgba(196, 156, 255,.10);border-color:rgba(196, 156, 255,.22)} .cat.orange{color:var(--cat-orange);background:rgba(251,146,60,.10);border-color:rgba(251,146,60,.22)} .cat.emerald{color:var(--cat-emerald);background:rgba(52,211,153,.10);border-color:rgba(52,211,153,.22)} .cat.blue{color:var(--cat-blue);background:rgba(104, 183, 255,.10);border-color:rgba(104, 183, 255,.22)} .pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--pill);font-family:var(--mono);font-size:11px;letter-spacing:.02em;border:1px solid var(--border);color:var(--muted);text-transform:uppercase} .pill.live{color:var(--live);border-color:rgba(66, 209, 135,.3)} .pill.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live)} .pill.busy{color:var(--busy);border-color:rgba(242, 189, 79,.3)} .pill.busy::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--busy)} .pill.need{color:var(--danger);border-color:rgba(255, 107, 122,.3)} .pill.need::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--danger)} .swatch{display:flex;flex-direction:column;gap:8px} .swatch .chip{height:60px;border-radius:var(--r-md);border:1px solid var(--border)} .swatch b{font-size:12px;font-weight:500} .swatch code{font-family:var(--mono);font-size:11px;color:var(--faint)} /* ============ CANVAS: lit column on a dark desk (signature) ============ Every section is a full-bleed .hsec (its top hairline runs edge to edge) wrapping a .rail, the 1280 column that carries the page surface, the two signature hairline rails, and a vertical column grid. The grid is drawn per section but reads as one continuous field: vertical lines have no vertical phase, so a section boundary cannot break their alignment. The warm glow is the page's single light source and now fires once, on the hero, instead of restarting at the top of all thirteen sections. */ .rail{max-width:var(--shell);margin:0 auto;background:var(--bg);border-left:1px solid var(--rail);border-right:1px solid var(--rail);position:relative} .rail::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grid-cols); background-size:calc(100% + 1px) 100%} /* +1px pushes the 8th line past the right rail so the grid never doubles it */ #top .rail::before{background-image:var(--glow),var(--grid-cols);background-size:100% 100%,calc(100% + 1px) 100%} .rail>*{position:relative} /* ============ SURFACES ============ Raised for components, sunken for what sits inside them, well for media. Nested surfaces never repeat the raised recipe — that is what keeps the page from reading as cards inside cards. */ .frame,.bento .cell,.compare .col,.price,.cta,.sess,.composer,.auth-card{ background:var(--panel);border:1px solid var(--border);box-shadow:var(--edge),var(--lift)} /* .price.feat used to sit here too. It doesn't any more: the featured tier is a polarity flip, not a lighter grey — see PRICING below. */ .compare .col.after{background:var(--panel-2);border-color:var(--input)} .frame-inner,.usage-panel,.diff .dh{background:var(--well)} /* only the panels that are links move on hover; static cards stay put */ a.frame,a.cell{transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)} a.frame:hover,a.cell:hover{border-color:var(--input);box-shadow:var(--edge),var(--lift-2);transform:translateY(-2px)} /* ============ NAV ============ */ /* the bar is full-bleed, its contents are not: the padding resolves to the column edge + the 40px section gutter, so the brand sits on the same vertical as the hero headline on any screen wider than the shell */ .nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:26px;height:64px;padding:0 max(26px,calc((100% - var(--shell))/2 + 40px));border-bottom:1px solid var(--border-soft);background:var(--bg); transition:background-color .3s var(--ease),border-color .3s var(--ease)} @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){ .nav{background:rgba(10,10,10,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} /* opaque --bg stays the fallback so scrolled content never bleeds through */ } /* Over the hero the bar carries nothing, so the band reads to the top of the window; it takes its surface as you scroll off. Set by /js/nav-chrome.js and ONLY on pages that open with a full-bleed hero — the default state in the stylesheet is the opaque bar, so no JS means no transparent header over ordinary content. Higher specificity than the @supports rule above, so the blur goes with it whichever order they land in. */ .nav.is-top{background:transparent;border-bottom-color:transparent; -webkit-backdrop-filter:none;backdrop-filter:none} .brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;letter-spacing:-.02em} /* The app's own mark (icons/icon.svg), not a mono "›_" set in a green box: the marketing site and the dashboard were shipping two different logos for one product, and only the box was ever the brand colour. The tile is full-bleed, so the radius here is what makes it read as an app icon. The rim is a box-shadow, never a border: the tile is a fixed 26px under box-sizing:border-box, so a border would eat 2px of the artwork and thin the green bar. The mark's screen bottoms out at #0d1210 against the bar's --bg, so without the rim it has no left, right or bottom edge — only the green title bar read. Lit from the same angle and by the same amount as --edge/--lift, so it sits on the bar like every other raised thing on the page. Its twin is .brand-logo in style.css; the two chromes already shipped different marks once. */ .brand .mk{width:26px;height:26px;border-radius:var(--r-md);display:block;flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.24),0 1px 2px rgba(0,0,0,.6)} .nav-links{display:flex;gap:4px;margin:0 auto} .nav-links a{position:relative;font-size:13.5px;color:var(--muted);padding:7px 11px;border-radius:var(--r-md); transition:color .2s var(--ease)} .nav-links a:hover{color:var(--text);background:var(--muted-surface)} /* Where you are. Green is this system's selection colour, and a marker under the label is the one that survives the header going transparent — a filled chip would need a surface the bar does not have over the hero. Driven by aria-current from /js/nav-chrome.js, so the semantics and the styling are the same fact rather than a class repeating one. */ .nav-links a[aria-current]{color:var(--text)} .nav-links a[aria-current]::after{content:"";position:absolute;left:11px;right:11px;bottom:1px; height:2px;border-radius:var(--r-xs);background:var(--link-rule)} .nav-actions{display:flex;align-items:center;gap:12px} .nav-actions .login{font-size:13.5px;color:var(--muted)} .nav-actions .login:hover{color:var(--text)} /* The phone menu. Below 900px the nine links used to be display:none with nothing in their place, and below 600px Log in and Start free went with them (the 2026-08-24 audit's P2-08): a phone got the brand and one button. One Menu control opens the same .nav-links as a panel under the bar (the links stay ONE set, tests/nav-squeeze.spec.js counts them), with the two auth links repeated inside it only where the bar has folded them. Driven by /js/nav-chrome.js (aria-expanded, Escape, focus); with no JS the button is inert and the links are reachable in the footer as before. */ .nav-menu-btn{display:none;align-items:center;justify-content:center;height:44px;min-width:44px;padding:0 12px;border:1px solid var(--border-soft);border-radius:var(--r-md);background:transparent;color:var(--text);font:inherit;font-size:13.5px;line-height:1;cursor:pointer} .nav-menu-btn:hover{background:var(--muted-surface)} .nav-menu-btn[aria-expanded="true"]{background:var(--muted-surface);color:var(--text)} .nav-links .nav-menu-only{display:none} /* Secondary pages: in the Menu panel, never on the bar. The bar holds the four a visitor is deciding with (Features, Pricing, Docs, Blog); the rest are in the panel and the footer. One rule for every page, so the header a visitor sees on /blog is the one they saw on /. */ .nav-links .nav-more{display:none} /* ============ HERO ============ Centred type over the warp canvas, then the marquee, then the run diagram — one section, three bands, all of it edge to edge. The hero is the ONE full-bleed band on this page. Everywhere else the lit column earns its keep by framing a measure of text; here it would be cutting its own hairlines and 12.5% grid straight through a diagram whose panels carry their own borders, which is why the column resumes at #compare and not before. The rail stays in the markup to keep the type and the marquee on the page's measure — it just paints nothing. */ .hsec-hero{background:var(--bg);overflow:hidden} .hsec-hero .rail{background:transparent;border-left:0;border-right:0} .hsec-hero .rail::before{content:none} .hero{padding:84px 40px 40px;max-width:820px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center} .hero h1{font-size:clamp(2.6rem,5.6vw,4.25rem);letter-spacing:-.035em} .hero h1 em{font-style:normal;color:var(--text);text-decoration:underline;text-decoration-color:rgba(255,255,255,.30);text-decoration-thickness:.055em;text-underline-offset:.14em} /* emphasis = full white + hairline rule, no hue */ .hero .lede{margin-top:20px;font-size:16.5px;color:var(--muted);max-width:60ch;line-height:1.5} .hero .actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .hero .note{margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--faint)} /* the down-arrow twin of .btn .arrow: nudges toward the demo it points at */ /* the rule under "One console." fades in once the words have landed. text-decoration-color, not a pseudo — the em wraps on phones. */ @keyframes heroRule{from{text-decoration-color:transparent}} .rv-on .hero h1 em{animation:heroRule 1.1s var(--ease) .95s both} /* …then a console cursor takes over from the rule: a block caret blinks three times after "One console." and leaves. A ::after with content:'' so the headline text — the LCP candidate — is never hidden or retyped, and the caret sits outside the em, so it never joins the underline. Base opacity 0 and no fill mode: invisible before its delay and after its last blink. The global reduced-motion kill at the foot of this sheet matches elements, not pseudo-elements, so this one carries its own motion guard. */ .hero h1 em::after{content:'';display:inline-block;width:.22em;height:.72em; margin-left:.14em;vertical-align:-.04em;background:var(--text);opacity:0} @keyframes heroCaret{0%,15.9%{opacity:1}16%,32.9%{opacity:0}33%,48.9%{opacity:1} 49%,65.9%{opacity:0}66%,82.9%{opacity:1}83%,100%{opacity:0}} @media (prefers-reduced-motion:no-preference){ .rv-on .hero h1 em::after{animation:heroCaret 2.6s linear 1.9s} } /* ---- the warp canvas ---- Decorative depth behind the type: /js/hero-warp.js paints it, 'lighten' so it can only ever add light to the near-black column, never darken a glyph. TWO masks, intersected, and they are the whole reason it stays a background: one fades it out before it reaches the marquee, the other holds a corridor down the middle where the headline and lede sit. The script thins the centre too, but only per strip — a wide one near the camera can still straddle the middle, and a mask cannot miss it. */ .hero-warp{position:absolute;inset:0 0 auto 0;width:100%;height:min(700px,92%); z-index:0;pointer-events:none;mix-blend-mode:lighten;opacity:.85; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 96%), linear-gradient(90deg,#000 0,#000 calc(50% - 680px),rgba(0,0,0,.12) calc(50% - 420px), rgba(0,0,0,.12) calc(50% + 420px),#000 calc(50% + 680px),#000 100%); mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 96%), linear-gradient(90deg,#000 0,#000 calc(50% - 680px),rgba(0,0,0,.12) calc(50% - 420px), rgba(0,0,0,.12) calc(50% + 420px),#000 calc(50% + 680px),#000 100%); -webkit-mask-composite:source-in;mask-composite:intersect} /* ============ HERO RUN DIAGRAM ============ A staged Termdeck run, laid out as the architecture it runs on: the engine's own transcript on the left, the session in the middle, the permission gate and the machine link on the right, the rest of the fleet underneath. The panels are placed on a percentage grid (--x is a centre line, --y a top edge) so the whole board reflows with the column instead of needing a fixed width. /js/hero-orchestrator.js only adds state classes and text — with no JS this is a still diagram, which is a perfectly good illustration on its own. */ /* On the page's own column, framed like every section below it — the board's own section supplies the rule above it, so nothing here draws one. */ .horc{position:relative;height:620px;padding-top:44px} /* The gutter lives here, not on .horc: absolute percentages resolve against the padding box, so padding on the parent would leave the outer panels flush with the rail's hairlines and clip their own borders. 40px is the page's inner gutter, so the panels sit on the same margin as every other section's copy. */ /* Opaque, not translucent: the rail's 12.5% column grid runs behind this section like every other, and it should show in the gaps BETWEEN panels the way it does between cards elsewhere — not through their contents. */ /* A panel that has already had its moment keeps a trace of it rather than snapping back to inert — otherwise the board forgets the run as it goes. */ /* the transcript: one row per turn already appended to the jsonl */ .hd-row{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:baseline; padding:6px 8px;border:1px solid rgba(255,255,255,.05);font-size:10.5px; animation:hdIn .34s var(--ease) both} @keyframes hdIn{from{opacity:0;transform:translateY(-4px)}} .hd-kind{color:var(--faint);text-transform:uppercase;letter-spacing:.04em;font-size:9px} .hd-label{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hd-size{color:rgba(255,255,255,.28)} .hd-row.is-fresh{border-color:rgba(255,255,255,.16)} .hd-row.is-fresh .hd-label{color:var(--text)} /* the CTA panel is the one thing in here you can click, so it never dims */ /* the permission gate */ /* Go-Is-Green: while the run is actually parked on this prompt the panel depicts the app, where the one filled action is green and it pulses. */ @keyframes hpcWait{50%{box-shadow:0 0 0 4px rgba(66, 209, 135,.16)}} /* the machine link */ /* the run's settings */ /* ---- the session card ---- The one thing on the board that is a Termdeck screen rather than a diagram of one, so it gets the rounded, lit treatment the rest deliberately lacks. --tint is the running engine's mark colour; it is the only hue in here. */ .hcard-item{animation:hciIn .3s var(--ease) both;opacity:.42;transition:opacity .35s var(--ease)} .hcard-item.is-current{opacity:1} @keyframes hciIn{from{opacity:0;transform:translateY(9px)}} .hcard-item.is-user{align-self:flex-end;max-width:86%;padding:10px 14px;border-radius:var(--r-lg); background:var(--muted-surface);color:var(--text);font-size:13.5px;line-height:1.5} .hcard-item.is-assistant{font-size:14px;line-height:1.55;color:var(--text)} .hci-tool{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono); font-size:11.5px;letter-spacing:.02em;color:var(--faint)} .hci-tool svg{width:11px;height:11px;flex:none} /* the running tool call gets the sweep the app uses for a live one */ .hcard-item.is-tool.is-current .hci-tool{color:transparent;background-clip:text;-webkit-background-clip:text; background-image:linear-gradient(90deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.75) 42%,#fff 50%,rgba(255,255,255,.75) 58%,rgba(255,255,255,.3) 100%); background-size:220% 100%;animation:hciSweep 2s var(--ease) infinite} .hcard-item.is-tool.is-current .hci-tool svg{color:var(--text)} @keyframes hciSweep{from{background-position:120% 0}to{background-position:-120% 0}} .hcard-item.is-thinking{display:flex;gap:5px;align-items:center;opacity:1} .hcard-item.is-thinking i{width:5px;height:5px;border-radius:50%;background:var(--tint); animation:hciDot 1.4s var(--ease) infinite} .hcard-item.is-thinking i:nth-child(2){animation-delay:.2s} .hcard-item.is-thinking i:nth-child(3){animation-delay:.4s} @keyframes hciDot{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}} /* ---- the wires ---- Drawn from the end nearest the card outward, which is the direction the work actually travels. ::before is the soft halo under the hairline. */ /* ---- the rest of the fleet ---- */ .hfm-bar{margin-top:9px;height:3px;background:rgba(255,255,255,.07);overflow:hidden} /* --fill is a 0..1 scale, not a width: the fill is a transform so it runs on the compositor and never relays out the card it sits in. */ .hfm-bar i{display:block;height:100%;width:100%;background:var(--muted); transform:scaleX(var(--fill,0));transform-origin:left; transition:transform 1.1s var(--ease)} /* ---- below the board's width, the same run as a plain column ---- The absolute grid needs ~1120px. Under that the board stops being a board: the card, the permission gate and the machine link stack, and the panels that were context (the transcript, the settings, the fleet) drop out. Phones are half the point of this product, so the mobile fallback is the session and the approval — not a hidden diagram and an apology. */ /* Stacked, the diagram keeps the page's gutter (40px, then 20px at 600px and below, like .sec-head and .video-frame): it had its own 20px / 14px, a step the film stacked directly above it made plain. */ @media (max-width:1120px){ .horc{height:auto;width:100%;border-top:0;display:flex;flex-direction:column;gap:12px; margin-top:20px;padding:20px 40px 0} /* the board stops being a box so its children become .horc's flex items */ } @media (max-width:640px){ .hero{padding:56px 20px 32px} .horc{padding-top:16px} } /* framed screenshot — a raised panel holding a recessed media well */ .frame{display:block;border-radius:var(--r-xl);padding:6px} /* fake app window for showcases */ /* ============ LOGO STRIP ============ Static since 2026-08-03 (was a 30s marquee loop): the vendor marks sit still, centered, wrapping on narrow screens. The class names stay so the markup and the motion-gate history don't churn. */ .marquee{overflow:hidden;padding:26px 0} .logo{display:flex;align-items:center;gap:11px;white-space:nowrap;color:var(--muted);opacity:.85;transition:opacity .2s,color .2s} .logo:hover{opacity:1;color:var(--text)} .logo svg{width:21px;height:21px;flex-shrink:0} .logo b{font-size:16px;font-weight:600;letter-spacing:-.02em} /* ============ FEATURE SHOWCASE (sticky list + panel) ============ */ /* ============ BENTO ============ */ .bento{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:48px 40px} .bento .cell{border-radius:var(--r-lg);padding:24px;min-height:210px;display:flex;flex-direction:column} .bento .cell.wide{grid-column:span 2} .bento .idx{font-family:var(--mono);font-size:11px;color:var(--faint);margin-bottom:auto} .bento h3{font-size:19px;margin:18px 0 8px} .bento .cell>p{font-size:13.5px;color:var(--muted);max-width:44ch} /* ---- the live fleet: the page's one authored sequence ---- The board runs six beats, one state change each, ending on the board it started from. States are the app's own signal set: amber working, red waiting on you, green attached, grey finished. Nothing here reports progress, because a turn has no percentage — working shows as an indeterminate run line, the way the terminal shows it. The markup ships the resting board, so a reader with reduced motion, a failed script, or no JS sees the same honest state. */ /* the word that swaps on a beat */ /* .in is set by the observer, so every loop below is dead weight off screen */ @keyframes runline{from{transform:translateX(-100%)}to{transform:translateX(294%)}} @keyframes needring{0%{box-shadow:0 0 0 0 rgba(255, 107, 122,.45)}70%,100%{box-shadow:0 0 0 5px rgba(255, 107, 122,0)}} /* ---- bento vignettes, staged like the hero (2026-08-03) ---- The four small cells act out their claims: a push banner drops in, a diff paints its remove-then-add, terminal panes tile in, allowlist rows cascade. All one-shot behind .rv-in; the wide cell's fleet board keeps the page's only loop. Resting markup is complete for no-JS and reduced motion. */ .bento .bv{margin-top:16px} .bento .diff .dh{padding:7px 11px;font-size:11px} .bento .diff pre{padding:9px 11px;font-size:11px;line-height:1.6} .diff .ctx{display:block} /* .tpane has always said overflow:hidden, which is a truncation it could not actually perform: text-overflow does nothing on a flex container, and the bare text node was an anonymous flex item with no box to hang an ellipsis on. So the narrowest pane hard-clipped mid-word, which reads as a rendering fault rather than a label that ran out of room. min-width:0 lets the span shrink past its own min-content; nowrap it inherits from .tpane. */ .rule{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--sunken);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:6px 11px} .rule code{background:none;padding:0;font-size:11.5px;color:var(--muted)} @media (prefers-reduced-motion:no-preference){ .rv-on .cell.rv-in .diff .del{animation:vinLine .4s var(--ease) .55s both} .rv-on .cell.rv-in .diff .add{animation:vinLine .4s var(--ease) .75s both} .rv-on .cell.rv-in .rule{animation:vinLine .45s var(--ease) both} .rv-on .cell.rv-in .rule:nth-child(1){animation-delay:.45s} .rv-on .cell.rv-in .rule:nth-child(2){animation-delay:.55s} .rv-on .cell.rv-in .rule:nth-child(3){animation-delay:.65s} } @keyframes pushIn{from{opacity:0;transform:translateY(-10px)}} /* a push arrives from the top, the way a real banner does */ @keyframes vinLine{from{opacity:0;transform:translateY(5px)}} @keyframes paneIn{from{opacity:0;transform:scale(.96)}} /* ============ STEPS + STAT ============ */ .steps{display:grid;grid-template-columns:auto repeat(3,1fr);gap:34px;padding:52px 40px;align-items:start} .step h3{font-size:17px;margin:12px 0 8px} .step p{font-size:13.5px;color:var(--muted)} /* ---- how-it-works vignettes, staged like the rest (2026-08-04) ---- Sunken mono rows in the app's grammar: green dot = online, emerald check = signed in, amber = a turn in flight, and the one green fill is the send. Rows cascade one-shot after their step lands; nothing loops. */ /* ============ STATS ROW ============ */ /* a recessed readout strip, not a card — data rows and cards read differently */ .stats{display:grid;grid-template-columns:repeat(4,1fr);margin:26px 40px 52px;border:1px solid var(--border-soft);border-radius:var(--r-lg);background:var(--sunken);overflow:hidden} .stat{padding:30px 24px;border-left:1px solid var(--border-soft)} .stat:first-child{border-left:0} .stat .v{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .stat .l{margin-top:8px;font-size:12.5px;color:var(--muted)} /* ============ TESTIMONIAL ============ */ /* ============ PRICING ============ */ .pricing-head{text-align:center;padding:56px 40px 14px} .pricing-head h2{font-size:var(--step);margin:14px 0} .pricing-head p{color:var(--muted);max-width:52ch;margin:0 auto;font-size:15.5px} .pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:26px 40px 40px} .pricing.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin:0 auto;padding:26px 40px 20px} .price{border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column} .price .pn{font-size:16px;font-weight:600} .price .pd{font-size:13px;color:var(--faint);margin-top:6px;min-height:34px} .price .amt{font-size:clamp(2.2rem,4vw,3rem);font-weight:600;letter-spacing:-.03em;margin:16px 0 2px} .price .amt small{font-size:13px;font-weight:400;color:var(--faint);letter-spacing:0} .price .unit{font-family:var(--mono);font-size:11px;color:var(--faint);margin-bottom:18px} .price ul{list-style:none;display:flex;flex-direction:column;gap:11px;padding:18px 0;border-top:1px solid var(--border-soft);margin-bottom:20px} .price li{display:flex;gap:10px;font-size:13.5px;color:var(--muted);align-items:flex-start} /* the checkmark tile from the hero's proof list — one grammar for "you get this" */ .price li svg{width:20px;height:20px;padding:4px;background:var(--sunken);border:1px solid var(--border-soft);border-radius:var(--r-md);color:var(--cat-emerald);flex-shrink:0;margin-top:0} .price .btn{margin-top:auto;justify-content:center} /* ---- the featured tier: THE POLARITY FLIP (DESIGN.md § Pricing tiers) ---- The reference system marks its featured tier by inverting it — dark fill, light text, against a white page. Inverted for a near-black page, that is the opposite move: a near-white fill with near-black text. White is already this system's identity accent (--primary), so this is the strongest single gesture the palette allows, and exactly one tier per table gets it — the same discipline as one filled action per view. It replaces `background:var(--panel-2)`, which on a dark page is the same card in a slightly different grey and does not read as featured at all. The flip is done by REDECLARING this card's surface tokens rather than by restating a colour on every child. Everything inside already spends --text, --muted, --faint, --border-soft, --sunken, --edge, --primary and --ring, so one local block turns the whole subtree over at once and anything added to the card later inherits the flip for free. The greys are the dark card's own contrast ladder mirrored, not merely legal ones: 17.48 / 7.06 / 5.36 on the dark card's #151516 becomes 15.73 / 6.51 / 5.31 on --primary, so the three tiers read at the same three strengths. Those numbers moved with the palette swap: the ground was the literal #ededed and is the token now, which resolves to #a3e9bd, so every ratio here was remeasured rather than carried over. */ .price.feat{ /* --workspace-accent and NOT var(--primary), even though :root maps one to the other. --primary is REDECLARED five lines down, and custom properties on one element resolve against that element's final value for the name, not against the declaration order in the block. Pointing --feat-ground at --primary here therefore resolved it to --feat-ink and painted the featured card near-black: caught by tests/pricing-tiers.spec.js, which pins the ground. */ --feat-ground:var(--workspace-accent); /* the identity accent, as a ground */ --feat-ink:var(--workspace-primary-fg); /* 15.83:1 on it */ --text:var(--feat-ink); /* .pn, .amt, inherited, so set on the card */ --muted:#4f4f4f; /* 6.51:1, .price li */ --faint:#5c5c5c; /* 5.31:1, .pd, .amt small, .unit */ --border:rgba(0,0,0,.14); /* the card's own edge */ --border-soft:rgba(0,0,0,.10); /* the ul rule and the tick tiles — 1.25:1, the dark side's 1.19:1 mirrored */ --sunken:rgba(0,0,0,.05); /* the tick tile ground */ --primary:var(--feat-ink); /* the one filled action inverts WITH its card... */ --primary-fg:var(--feat-ground); /* ...so .btn-primary stays 15.8:1 either way */ --edge:inset 0 1px 0 rgba(255,255,255,.55);/* same light, same angle: on a light ground the top edge is a sheen, not a white line */ --bg:var(--feat-ground); /* :focus-visible is a two-stop ring whose inner stop is the ground it sits on */ --ring:rgba(0,0,0,.45); /* 3.28:1 over the card */ background:var(--feat-ground);color:var(--text);border-color:var(--border)} /* The tick keeps its tile and loses its hue: --cat-emerald is 1.9:1 on #ededed, and the glyph carries "you get this" by shape, not by colour. Inside a flipped card the ink IS the accent. */ .price.feat li svg{color:var(--text)} /* .btn-primary:hover goes to #fff, which on this card is a button that dissolves. */ .price.feat .btn-primary:hover{background:#000} /* ---- pricing, staged like the hero (2026-08-03) ---- Cards land on their rv stagger, each plan's checklist cascades in while the card settles, and the featured card's tag drops in last. One-shot only — the fleet board keeps the page's single loop. Resting state is complete for no-JS and reduced motion: every animation hides nothing until .rv-in lands. */ .price{position:relative} .price .amt{font-variant-numeric:tabular-nums} /* "Most popular" is a fact the reader did not ask for and cannot act on, which is exactly the soft info badge's job (DESIGN.md § Badges, § Pricing tiers). It used to wear --primary / --primary-fg — the near-white identity accent, i.e. the one fill this page reserves for its primary action — so a decorative label was dressed as a call to action it cannot honour: a Color-Is-Semantic violation. After the flip it would also have been #ededed on an #ededed card, and simply disappeared. Soft, never filled: filled is for a state someone has to act on. Opaque, never a tint: the badge straddles the card's top edge (top:-11px on a 22px box), so it is painted on two grounds at once and a translucent 14% would come out two-tone. See --info-soft / --info-line / --info-ink for what the bake is and why the ink deepens. Radius steps off --pill to --r-sm: a badge is a label, not a control, and a capsule is this page's shape for things you press. */ .price-tag{position:absolute;top:-11px;left:50%;transform:translate(-50%,0);display:inline-flex;align-items:center;height:22px;padding:0 11px;border-radius:var(--r-sm);background:var(--info-soft);border:1px solid var(--info-line);color:var(--info-ink);font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} @media (prefers-reduced-motion:no-preference){ .rv-on .price.rv-in li{animation:planLine .45s var(--ease) both} .rv-on .price.rv-in li:nth-child(1){animation-delay:.30s} .rv-on .price.rv-in li:nth-child(2){animation-delay:.38s} .rv-on .price.rv-in li:nth-child(3){animation-delay:.46s} .rv-on .price.rv-in li:nth-child(4){animation-delay:.54s} .rv-on .price.rv-in li:nth-child(5){animation-delay:.62s} .rv-on .price.feat.rv-in .price-tag{animation:tagIn .5s var(--ease) .8s both} } @keyframes planLine{from{opacity:0;transform:translateY(6px)}} @keyframes tagIn{from{opacity:0;transform:translate(-50%,7px)}} /* ============ FAQ ============ */ .faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;padding:56px 40px} /* same rail as .feat-list, clears the 64px sticky nav */ /* Monthly/annual switch above the pricing cards (MONETIZATION.md Phase 5). Deliberately the SAME pill vocabulary as .faq-tab below rather than a new control: it is the page's existing "pick one of these" shape, and inventing a second one for the pricing section would make the two read as different kinds of choice when they are the same kind. Centred, because the cards it governs are. Hidden until pricing.js confirms this box can actually sell a year. */ .billing-toggle{display:flex;justify-content:center;gap:8px;margin:0 0 28px} .billing-opt{height:34px;padding:0 16px;border-radius:var(--pill);border:1px solid var(--border);background:transparent;color:var(--muted);font-family:var(--sans);font-size:13px;cursor:pointer;transition:.16s} .billing-opt:hover{color:var(--text);background:var(--sunken)} .billing-opt.on{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)} .billing-opt [data-save]{opacity:.8} /* ---- faq, staged like the rest (2026-08-04) ---- Tabs pop in first, questions cascade after the panel lands. Tab filtering toggles display, which replays the cascade for the filtered set — that one is user-initiated and still one-shot per click. The accordion's own open/close motion above is untouched; nothing loops. */ /* ============ FINAL CTA ============ The page opens on the hero glow and closes on the same light, this time contained by a panel so the last thing you scroll to is a component. */ .cta{position:relative;overflow:hidden;text-align:center;padding:72px 40px;margin:52px 40px;border-radius:var(--r-xl)} .cta::before{content:"";position:absolute;inset:0;background:var(--glow);pointer-events:none} .cta>*{position:relative} .cta h2{font-size:var(--step);margin:14px 0} .cta p{color:var(--muted);max-width:44ch;margin:0 auto 26px;font-size:16px} .cta .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ---- final cta, staged like the rest (2026-08-04) ---- The page's closing light TURNS ON as the panel lands (still the One-Light rule — same lamp, it just arrives), the copy cascades, and a "run finished" chip closes the story the hero's approval card opened. All one-shot. */ @media (prefers-reduced-motion:no-preference){ .rv-on .cta.rv-in::before{animation:lampOn 1.4s var(--ease) both} .rv-on .cta.rv-in .kicker{animation:vinLine .5s var(--ease) .15s both} .rv-on .cta.rv-in h2{animation:vinLine .5s var(--ease) .25s both} .rv-on .cta.rv-in p{animation:vinLine .5s var(--ease) .35s both} .rv-on .cta.rv-in .actions{animation:vinLine .5s var(--ease) .45s both} } @keyframes lampOn{from{opacity:0}} /* ============ FOOTER ============ */ .foot{padding:56px 40px 26px} .foot-grid{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:32px} .foot .fb .brand{margin-bottom:14px} .foot .fb p{font-size:13px;color:var(--muted);max-width:30ch;margin-bottom:16px} .foot .socials{display:flex;gap:10px} .foot .socials a{width:32px;height:32px;border-radius:var(--r-md);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted)} .foot .socials a:hover{color:var(--text);border-color:var(--input)} .foot-col :is(h2,h3,h4){font-size:12px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;font-weight:500} .foot-col a{display:block;font-size:13.5px;color:var(--muted);padding:5px 0} .foot-col a:hover{color:var(--text)} .foot-tm{margin-top:38px;padding-top:20px;border-top:1px solid var(--border-soft);font-size:11.5px;line-height:1.6;color:var(--faint);max-width:92ch} .foot-tm h2{font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin-bottom:8px;font-weight:500} .foot-base{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:20px;border-top:1px solid var(--border-soft);font-size:12.5px;color:var(--faint)} .foot-base .ops{display:flex;align-items:center;gap:7px} .foot-base .ops::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live)} .foot-base.in .ops::before{animation:opsBreath 3.4s var(--ease) infinite} /* the page's other live claim, breathing at rest */ @keyframes opsBreath{0%,100%{box-shadow:0 0 6px var(--live);opacity:.82}50%{box-shadow:0 0 13px var(--live);opacity:1}} /* ---- footer, staged like the rest (2026-08-04) ---- Brand block and the three columns cascade one-shot after the footer lands, with the trademark notice and baseline arriving last. The footer is a shared partial and this CSS ships in home.css, so every marketing page gets the identical chrome AND the identical entrance. The ops dot keeps its sanctioned breath; nothing else loops. */ @media (prefers-reduced-motion:no-preference){ .rv-on .foot.rv-in .foot-grid>*{animation:vinLine .5s var(--ease) both} .rv-on .foot.rv-in .foot-grid>*:nth-child(1){animation-delay:.15s} .rv-on .foot.rv-in .foot-grid>*:nth-child(2){animation-delay:.25s} .rv-on .foot.rv-in .foot-grid>*:nth-child(3){animation-delay:.35s} .rv-on .foot.rv-in .foot-grid>*:nth-child(4){animation-delay:.45s} .rv-on .foot.rv-in .foot-grid>*:nth-child(5){animation-delay:.55s} /* the 5th column the grid always had a track for */ .rv-on .foot.rv-in .foot-tm{animation:vinLine .5s var(--ease) .65s both} .rv-on .foot.rv-in .foot-base{animation:vinLine .5s var(--ease) .75s both} } /* ============ APP-SURFACE PREVIEW ============ */ .app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px} .sess{border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:11px} .sess .top{display:flex;align-items:center;gap:8px} .sess .eng{width:24px;height:24px;border-radius:var(--r-md);display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:500} .sess .eng.claude,.acct-av.claude{background:#d97757;color:#1a0e08} .sess .eng.codex,.acct-av.openai{background:var(--primary);color:var(--primary-fg)} .sess .eng.grok{background:#111;color:#fff;border:1px solid var(--border)} .sess .title{font-size:14px;font-weight:500} .sess .path{font-family:var(--mono);font-size:11px;color:var(--faint)} .sess .foot{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;color:var(--faint)} .composer{border-radius:var(--r-xl);padding:14px 16px;display:flex;flex-direction:column;gap:12px} .composer .ta{font-family:var(--mono);font-size:13px;color:var(--muted);min-height:44px} .composer .send{margin-left:auto} .diff{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;font-family:var(--mono);font-size:12px} .diff .dh{display:flex;justify-content:space-between;padding:9px 12px;border-bottom:1px solid var(--border-soft);color:var(--muted)} .diff pre{padding:12px;line-height:1.6;color:var(--muted);overflow-x:auto} .diff .add{color:var(--live);background:rgba(66, 209, 135,.08);display:block} .diff .del{color:var(--danger);background:rgba(255, 107, 122,.08);display:block} /* ============ RESPONSIVE ============ */ /* The nav's squeeze band. .nav-links only disappears at 900px, so between there and ~1060px the full row — brand + every link + three actions — has to fit on one line, and it does not: at 901px the 7-link nav already pushed 10px of horizontal scroll onto the whole page, and adding /about took that to 72px. Nothing wraps (the row is flex with no wrap), so the overflow is invisible on a wide monitor and shows up only as a page that scrolls sideways on a small laptop. Buy the width back from padding and the nav's own gap instead of dropping a link. Must precede the 900px block: below 900 the links are display:none and these rules are moot, but the narrower query has to win. */ @media(max-width:1060px){ .nav{gap:16px} .nav-links a{padding:7px 7px} /* The sign-up pill gives back its 4px of extra side padding here. Linear's 8/16 is what it wears where there is room; inside the squeeze band it drops to .btn-sm's 12 like every other button, because 8px of chrome is 8px the nine links do not have. tests/nav-squeeze.spec.js measured the pill spending more than the budget had left at 941px. */ .btn.btn-signup{padding:0 12px} } /* The last of that budget, spent by /docs. Nine links no longer clear 901px on padding alone (39px short, measured), so the bottom of the band also gives up the link gap and 0.5px of tracking. Scoped to 940px so the type stays at its designed metrics everywhere it fits, and so the next reader knows the room ran out here rather than finding it quietly narrower at 1280. Past this, a tenth link means dropping one instead — tests/nav-squeeze.spec.js is the gate. */ @media(max-width:940px){ .nav{gap:12px} .nav-links{gap:0} .nav-links a{padding:7px 6px;letter-spacing:-.015em} } @media(max-width:900px){ .hero,.showcase,.faq,.foot-grid{grid-template-columns:1fr} .pricing,.stats,.tstis,.steps{grid-template-columns:1fr} /* minmax(0,…), not 1fr — same reason .u-metrics gives further down. `1fr` is minmax(AUTO,1fr), and that auto floor is the track's min-content, so one unbreakable child sets the width of the whole column. The approvals cell holds .pushrow, whose notification line is white-space:nowrap with an ellipsis ready for exactly this: at 320px its min-content is 273px, the track grew to 319 to seat it, and the ellipsis never fired — the page got 20px of horizontal scroll instead. Flooring the track at 0 hands the row a definite width to shrink into, which is the truncation .push-tx already asked for with min-width:0. */ .bento{grid-template-columns:minmax(0,1fr)} .bento .cell.wide{grid-column:auto} /* a span-2 child manufactures a 2nd implicit track even at 1fr */ .stat,.tstis .t{border-left:0;border-top:1px solid var(--border-soft)} .stat:first-child,.tstis .t:first-child{border-top:0} .pricing.two{grid-template-columns:1fr} /* 0-2-0, must restate or the base rule keeps 2 cols */ :root{--grid-cols:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--grid) calc(25% - 1px) 25%)} /* 8 columns is a mesh on a phone; drop to 4 */ .nav-links{display:none} .nav-actions{margin-left:auto} /* .nav-links carried the auto margin; it is hidden here */ .nav-menu-btn{display:inline-flex} /* Open, the links are a panel under the bar: the bar's own surface (never the transparent-over-hero state, which the panel would be unreadable on), one link per row at the tap floor. */ .nav.menu-open .nav-links{display:flex;flex-direction:column;gap:2px;position:absolute;top:100%;left:0;right:0;margin:0;padding:8px 16px 16px;background:var(--bg);border-bottom:1px solid var(--border-soft);box-shadow:0 12px 24px rgba(0,0,0,.35)} .nav.menu-open .nav-links a{display:flex;align-items:center;min-height:44px;padding:0 11px;font-size:15px;letter-spacing:0} /* The auth duplicates only exist for the band where the bar has folded its own (the 600px block below re-shows them there); everywhere else in this range the bar still carries Log in and Start free, so the panel must not say them twice. Element+classes, to outweigh the row rule above. */ .nav.menu-open .nav-links a.nav-menu-only{display:none} .nav.menu-open .nav-links a.nav-more{display:flex} .nav.menu-open .nav-links a[aria-current]::after{display:none} /* the scroll-spy underline is a bar affordance, not a list one */ } @media(max-width:600px){ .nav{gap:12px;padding:0 16px} .nav-actions{gap:8px} /* One nav CTA on a phone. It used to be the sign-up that survived, because the sign-up was the filled one; the Linear pass swapped which button carries the fill, so it is the sign-up that folds now. Both are still reachable in the hero and the footer, and /dashboard has to stay because tests/vs-pages.spec.js asserts a phone can reach it from the header. */ .nav-actions .login,.nav-actions .btn-signup{display:none} /* ...and they come back inside the menu, where the bar folded them; the button itself goes to its glyph so the bar still fits a 320px screen. */ .nav.menu-open .nav-links a.nav-menu-only{display:flex;border-top:1px solid var(--border-soft);margin-top:6px;padding-top:6px} .nav.menu-open .nav-links a.nav-menu-only + a.nav-menu-only{border-top:0;margin-top:0;padding-top:0} .nav-menu-btn{width:44px;padding:0;font-size:0} .nav-menu-btn::before{content:"\2630";font-size:18px;line-height:1} .btn,.btn-sm{height:auto;min-height:44px;padding-top:6px;padding-bottom:6px} /* 3 tracks clip the agent paths below ~600px */ } /* The 320px floor: brand + Open Termdeck + Menu ran 5px past it at the 600px block's metrics. The bar's padding and gaps give the width back; nothing is dropped. */ @media(max-width:360px){ .nav{gap:8px;padding:0 12px} .nav-actions{gap:6px} .nav-actions .btn-ghost.btn-sm{padding:0 10px} } @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ============ USAGE ============ */ .usage{padding:24px;max-width:1400px} .usage h1{font-size:22px;font-weight:600;letter-spacing:-.03em;margin-bottom:4px} .usage .lead{color:var(--muted);font-size:13px;margin-bottom:20px;font-family:var(--mono)} .u-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px} /* the accent border-top per metric is inline in the markup */ /* the bars grow when you arrive at the chart, not four screens earlier. growBar was referenced here for weeks without ever being defined, so the entrance has never actually run; bars stay at full height when the observer never fires. */ @keyframes growBar{from{transform:scaleY(.04);opacity:.3}to{transform:scaleY(1);opacity:1}} /* ---- usage showcase, staged like the rest (2026-08-04) ---- The metric tiles cascade in after the framed panel lands, and the peak bar names its number once the bars have grown. The chart and model-mix entrances above already run on the .in observer; everything stays one-shot and the resting panel is complete for no-JS and reduced motion. */ @keyframes peakTag{from{opacity:0;transform:translate(-50%,4px)}} /* the model mix arrives with the chart beside it, so the panel reads as one readout waking up rather than half a panel moving. scaleX, never width. */ @keyframes sweepIn{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ---- homepage structural helpers ---- */ .hsec{position:relative;border-top:1px solid var(--border-soft)} main>.hsec:first-child{border-top:0} /* :first-of-type also matched the footer, which is the only