/* ════════════════════════════════════════════════════════════════════════ The site chrome: header, footer, buttons, page rail. One file for the whole site — see site-chrome.js for why, and DESIGN-SYSTEM.md §5, §6.7 for what these are supposed to look like. Eight pages carried their own copy of this. The copies had drifted: the landing broke to the burger at 940 and voice-api at 820 (where the "Get started free" button was pushed off the edge); the landing's buttons lift, voice-api's still used scale() on a text label, which the design system forbids by name; the landing's footer reserved 96px for the floating widget, voice-api reserved 40 and the widget sat on the last line. Everything here is the landing's version — the newest of each. ════════════════════════════════════════════════════════════════════════ */ /* The canonical tokens (§2.1) at zero specificity: any page that declares its own :root still wins. This exists so the chrome is never naked on a page that happens not to declare --line — not to override anybody. */ :where(:root){ --bg:#0A0B0F;--bg-2:#070810;--ink:#EAEEF7; --muted:rgba(234,238,247,.66);--faint:rgba(234,238,247,.56); --blue-1:#8BB4FF;--blue-2:#3A6BFF;--blue-deep:#2E4780;--blue-pale:#CEDFFE; --line:rgba(139,180,255,.14);--line-2:rgba(234,238,247,.10); --sans:"Instrument Sans","Inter",ui-sans-serif,system-ui,-apple-system,sans-serif; --mono:"JetBrains Mono","SF Mono",ui-monospace,Consolas,monospace; --ease:cubic-bezier(.22,.61,.36,1); --ease-btn:cubic-bezier(.2,.8,.2,1); /* The colour of everything that is not the page (§2.1a). Pull a page past its top on a phone and the browser opens a gap; what it fills that gap with is the CANVAS background, which comes from — and from only when has none of its own. Every page here paints its blue wash on the body while html carried flat --bg, so the gap opened in charcoal beside a lit navy page and read as a hole torn in the screen (docs/bug-shots/mobile-overscroll-top.png). --edge is what the gap gets. It is not --bg: it is measured off the page — the top row of pixels a page actually paints and the bottom row, averaged. The default below is for a page with no wash at the top; a page that has one sets its own, and sets to the same value, so the status bar and the address bar are that colour too. */ --edge:#0A0B0F; } /* The canvas, and the one thing a phone cannot be given back once it is taken: a page you can drag sideways. Nothing on the site is wider than the screen (measured at 320/390/440 — scripts/check-mobile-edges.js), so this clamp catches what measurement cannot: an element that is briefly too wide while a script sizes it, and the fixed overlays, which iOS lets pan the page even when the body clamps its own overflow. `clip`, not `hidden`: hidden on an axis makes the other axis a scroll container, and on the root that is the viewport itself — clip only cuts. */ html{background-color:var(--edge);overflow-x:clip} /* The shell every block sits in (§4). Both landings had their own identical copy. */ .rail{max-width:1760px;margin:0 auto;padding-inline:clamp(20px,4.5vw,72px)} /* A narrative page is read, not scanned: at 1760px a three-card row is over 500px per card and a heading measure runs past 22ch before the clamp ever caps it. The storytelling sections of the landing sit in a tighter shell. */ .rail.tight{max-width:1320px} @media(max-width:640px){.rail{padding-inline:20px}} .content{position:relative;z-index:2} /* The header is fixed, so a page whose first block is not a hero has to make room for it. The landings clear it with the hero's own top padding; every other page says so out loud. */ .chrome-offset{padding-top:74px} /* ── Navigation ── */ .nav{position:fixed;top:0;left:0;right:0;z-index:60;height:74px;display:flex;align-items:center; transition:height .3s ease,background .3s ease,backdrop-filter .3s} .nav.dense{height:58px;background:rgba(10,11,15,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .nav-in{max-width:1820px;margin:0 auto;padding-inline:clamp(16px,3vw,50px);width:100%;display:flex;align-items:center;gap:34px} .wm{font:600 20px/1 var(--sans);letter-spacing:-.04em;display:flex;align-items:center;gap:10px;color:var(--ink)} /* The mark stands alone in the header — 30px, the size the orb held before it. It was 27 while the letters "FG" sat next to it, because a filled disc carries far more weight per pixel than a scatter of points and at 30 it outshouted them; with nothing beside it, 27 just looked mislaid (§6.8). */ .wm-mark{width:30px;height:30px;display:block;flex:0 0 auto} /* .wm-logo — the "FG" lettering — is gone from every corner of the site: the mark is the name (§6.8). The rule went with the last markup that used it. */ .nav-links{display:flex;gap:2px;list-style:none;margin-left:8px} .nav-links a{display:inline-flex;height:36px;align-items:center;padding:0 14px;border-radius:999px; font-size:14.5px;color:var(--muted);transition:color .2s,background-color .25s ease;will-change:transform} .nav-links a:hover{color:var(--ink)} /* Which page you are on. Colour is not the only carrier: the pill fills and aria-current is set (§9). */ .nav-links a[aria-current],.nav-drop-t[aria-current]{color:var(--ink);background:rgba(139,180,255,.12)} .nav-menu>a[aria-current]{background:rgba(139,180,255,.1);color:var(--ink)} .nav-drop-menu a[aria-current]{background:rgba(139,180,255,.09)} .nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px} /* ── "Products" menu (hover) ── */ .nav-drop{position:relative} .nav-drop-t{display:inline-flex;height:36px;align-items:center;gap:6px;padding:0 14px;border-radius:999px;font-size:14.5px;color:var(--muted);cursor:pointer;transition:color .2s} .nav-drop-t svg{width:12px;height:12px;transition:transform .28s var(--ease);opacity:.7} .nav-drop:hover .nav-drop-t,.nav-drop.open .nav-drop-t{color:var(--ink)} .nav-drop:hover .nav-drop-t svg,.nav-drop.open .nav-drop-t svg{transform:rotate(180deg)} .nav-drop-menu{position:absolute;top:calc(100% + 12px);left:-14px;min-width:340px;padding:8px; background:rgba(12,15,22,.92);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3); border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05); opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .22s ease,transform .28s var(--ease);z-index:70} .nav-drop-menu::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:14px}/* hover bridge */ .nav-drop:hover .nav-drop-menu,.nav-drop.open .nav-drop-menu{opacity:1;transform:none;pointer-events:auto} /* A product row: a name and one line saying what it is. No icon — see the comment on the menu in partials/site-header.html. Nothing new is introduced here to fill the space the icons left: the radius is the buttons' 13px, the hover fill is the site's, and the rule between the rows is `--line-2`, the neutral divider §2.1 keeps for exactly this (a separation inside one block, as against `--line`, which draws the edge of a card). */ .ndi{display:block;padding:13px 15px;border-radius:12px;transition:background .18s ease} .ndi:hover{background:rgba(139,180,255,.09)} /* The arrows move the focus between the two rows, so the focused row has to be as plain to see as the hovered one — inset by 2px, the way the gear's rows ring, because an outset ring on a 13px radius crosses the panel's edge. */ .ndi:focus-visible{background:rgba(139,180,255,.09);outline:2px solid var(--blue-1);outline-offset:-2px} /* Air between the two, with a hairline in the middle of it — the same 1px of `--line-2` inset by 4px with 8px either side that `.nav-set-sep` puts between the gear panel's rows. That panel is the other popover hanging off this same header; two separators would be two languages. It is drawn from the gap rather than as a border on the row because a border would have to survive the hover fill and the rounded corners. */ .ndi+.ndi{position:relative;margin-top:17px} .ndi+.ndi::before{content:"";position:absolute;left:4px;right:4px;top:-9px;height:1px;background:var(--line-2)} .ndi b{display:block;font:600 15px/1.2 var(--sans);color:var(--ink);letter-spacing:-.01em} .ndi em{display:block;margin-top:5px;font-style:normal;font-size:12.5px;line-height:1.45;color:var(--muted);max-width:34ch} /* Overriding `.nav-links a`, which is more specific than `.ndi` and would otherwise hand these rows its own shape: a 36px-tall pill. The radius is here and not on `.ndi` for that reason — 999px on a two-line row is a lozenge, and it is what the menu had. 12px is what the gear panel's rows use. */ .nav-links .nav-drop-menu a.ndi{display:block;height:auto;padding:13px 15px;border-radius:12px} /* ── Settings (the gear) ── The same panel as the Products menu — same surface, same border, same rise — because a second popover language on one header is how a site starts looking assembled from parts. It hangs from the right edge (`right:0`) rather than the left: it is the last control in the row, and a menu that opens leftward from the last control is the only one that cannot leave the screen. */ .nav-set{position:relative;flex:0 0 auto} .nav-set-t{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0; border-radius:999px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer; -webkit-tap-highlight-color:transparent; transition:color .2s,background-color .2s ease,border-color .2s ease} .nav-set-t svg{width:19px;height:19px;transition:transform .4s var(--ease)} .nav-set-t:hover{color:var(--ink);background:rgba(234,238,247,.06)} .nav-set.open .nav-set-t{color:var(--ink);background:rgba(139,180,255,.12);border-color:var(--line)} .nav-set.open .nav-set-t svg{transform:rotate(60deg)} .nav-set-t:focus-visible{outline:2px solid var(--blue-1);outline-offset:3px} .nav-set-menu{position:absolute;top:calc(100% + 12px);right:0;width:286px;max-width:calc(100vw - 32px);padding:8px; background:rgba(12,15,22,.92);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3); border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05); /* visibility, not just opacity: a panel at opacity 0 is still in the tab order, and Tab from "Get started free" was landing inside an invisible menu. The delay carries it, and it goes one way only — `visibility .28s` interpolates a discrete property, which means it flips at the halfway mark, and the panel spent the first 140ms of every opening invisible while its own fade played. `0s .28s` closing, `0s 0s` opening. */ opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .22s ease,transform .28s var(--ease),visibility 0s .28s;z-index:70} .nav-set.open .nav-set-menu{opacity:1;visibility:visible;transform:none; transition:opacity .22s ease,transform .28s var(--ease),visibility 0s} /* The three themes, one row, the chosen one filled (§9: the fill is not the only carrier — aria-checked says it too). */ .nav-theme{display:flex;gap:4px;padding:3px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid var(--line-2)} .nav-theme-b{flex:1;display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0; border:none;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer; transition:background-color .18s ease,color .18s ease} .nav-theme-b svg{width:17px;height:17px} .nav-theme-b:hover{color:var(--ink);background:rgba(139,180,255,.09)} .nav-theme-b[aria-checked="true"]{background:rgba(139,180,255,.16);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)} .nav-theme-b:focus-visible{outline:2px solid var(--blue-1);outline-offset:-2px} .nav-set-sep{height:1px;background:var(--line-2);margin:8px 4px} .nav-set-i{display:flex;width:100%;align-items:center;gap:11px;min-height:40px;padding:0 11px; border:none;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer; font:500 14px/1.2 var(--sans);letter-spacing:-.005em;text-align:left;transition:background-color .18s ease} .nav-set-i:hover{background:rgba(139,180,255,.09)} .nav-set-i:focus-visible{outline:2px solid var(--blue-1);outline-offset:-2px} .nav-set-i>svg{flex:none;width:17px;height:17px;color:var(--blue-1)} .nav-set-i>span{flex:1} .nav-set-i>em{font-style:normal;font-size:12.5px;color:var(--muted)} .nav-set-sub{padding-left:28px} .nav-set-opt{min-height:36px;font-weight:400;color:var(--muted)} .nav-set-opt[aria-checked="true"]{color:var(--ink)} .nav-set-opt .ck{flex:none;width:15px;height:15px;color:var(--blue-1)} /* Feedback, in the panel it was opened from. There is no endpoint behind it and there is no pretending there is: the button hands the note to the mail app, and the address is written out underneath for anyone whose browser has no mail app to hand it to. */ .nav-set-fb{padding:4px 4px 2px} .nav-set-fb label{display:block;margin-bottom:6px;font:500 12.5px/1.3 var(--sans);color:var(--muted)} .nav-set-fb textarea{display:block;width:100%;box-sizing:border-box;min-height:74px;resize:vertical; padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line); color:var(--ink);font:400 13.5px/1.5 var(--sans)} .nav-set-fb textarea::placeholder{color:rgba(234,238,247,.42)} .nav-set-fb textarea:focus{outline:none;border-color:rgba(139,180,255,.42)} .nav-set-fb-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px} .nav-set-fb-row a{font-size:12.5px;color:var(--muted);transition:color .2s} .nav-set-fb-row a:hover{color:var(--blue-1)} .nav-set-fb-ok{margin:8px 0 2px;font-size:12.5px;line-height:1.4;color:#8fe6b4} /* Below ~356px the panel hangs off the left edge: it is 286px wide, and the gear it hangs from has the burger to its right, so its own right edge is only 248px in on a 320px screen — 38px of panel over the side. Measured, and the fix is to stop hanging it from the gear. `.nav-set` gives up its containing block and the panel resolves against `.nav`, which is fixed and as wide as the screen: 16px from the right edge, under the header, exactly where the burger drawer opens. */ @media(max-width:520px){ .nav-set{position:static} .nav-set-menu{right:16px} } /* ── Mobile menu (burger) ── */ .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;margin-left:auto;background:transparent;border:none;cursor:pointer;padding:11px;border-radius:12px;-webkit-tap-highlight-color:transparent} .nav-burger span{display:block;height:2px;width:22px;background:var(--ink);border-radius:2px;transition:transform .28s var(--ease),opacity .2s} .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-menu{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(10,11,15,.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line); padding:12px 20px calc(20px + env(safe-area-inset-bottom,0px));flex-direction:column;gap:2px; transform:translateY(-10px);opacity:0;pointer-events:none;transition:transform .28s var(--ease),opacity .24s ease;will-change:transform,opacity} .nav-menu.open{opacity:1;transform:none;pointer-events:auto} .nav-menu>a{display:flex;align-items:center;min-height:50px;padding:0 10px;font:500 17px/1 var(--sans);color:var(--ink);border-radius:12px;letter-spacing:-.01em} .nav-menu>a:active{background:rgba(139,180,255,.12)} .nav-menu-cta{margin-top:12px;padding-top:14px;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:10px} .nav-menu-cta .btn{width:100%;height:50px;justify-content:center;font-size:16px} .nav.menu-open{background:rgba(10,11,15,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} /* 820. The landing had pushed this to 940 because its header carried six entries and at 834 the "Get started free" button was being squeezed off the right edge; with the three the plan allows, the whole header needs 612px and at 834 there are 784 — 198px of clear air between the links and the buttons. Measured, not guessed: an iPad in portrait gets the real navigation back. */ @media(max-width:820px){ .nav-links{display:none} /* The two buttons fold into the burger; the gear does not. It is one 38px control and it is the only way to reach the settings — putting it inside a drawer that has to be opened first would be a second place to look for one thing. So `.nav-cta` stays laid out and loses its buttons, which also keeps the gear on the right where it was. The 34px gap is for the header that is no longer here (wordmark → links → buttons); with three items left it is just a hole. */ .nav-in{gap:12px} .nav-cta{gap:0} /* `>`, and it is load-bearing: the settings panel lives inside `.nav-cta`, and Feedback's Send is a `.btn`. A descendant selector here took the Send button off every phone. */ .nav-cta>.btn{display:none} .nav-burger{display:flex;margin-left:0} .nav-menu{display:flex} } /* ── Buttons (§5) ── scale() on a text button resamples the glyphs mid-transition, so a label that was crisp at rest goes soft the moment the pointer lands on the thing you most want people to click. Lift and light instead: translateY, a deeper shadow, and an arrow that steps forward. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 24px; border-radius:999px;border:none;cursor:pointer;font:500 15px/1 var(--sans);letter-spacing:-.004em; white-space:nowrap;position:relative;isolation:isolate;color:var(--ink); transition:transform .22s var(--ease-btn),background .2s ease,box-shadow .3s ease,border-color .2s ease,color .2s ease} /* The two moments that matter — "build my agent" in the hero and at the end of the page — get a bigger target than a nav button. */ .btn-lg{height:56px;padding:0 34px;font-size:16.5px} .btn-lg svg{width:18px;height:18px} .btn svg{flex:none;transition:transform .28s var(--ease-btn)} .btn:hover svg.arw{transform:translateX(3px)} .btn-primary{background:linear-gradient(180deg,#3866F5,#2E5CEB);color:#fff; box-shadow:0 8px 30px rgba(58,107,255,.4),inset 0 1px 0 rgba(255,255,255,.25)} /* A sheen that wipes across on hover — the one flourish the primary gets. */ .btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%); background-size:220% 100%;background-position:120% 0;transition:opacity .2s ease} .btn-primary:hover::after{opacity:1;animation:sheen .7s var(--ease) forwards} @keyframes sheen{to{background-position:-40% 0}} .btn:hover{transform:translateY(-2px)} .btn-primary:hover{background:linear-gradient(180deg,#4372FF,#3765F2);box-shadow:0 14px 44px rgba(58,107,255,.55)} .btn-ghost{background:rgba(234,238,247,.06);color:var(--ink);border:1px solid var(--line)} .btn-ghost:hover{background:rgba(234,238,247,.11);border-color:rgba(139,180,255,.28)} .btn-line{background:transparent;color:var(--ink);border:1px solid rgba(139,180,255,.34)} .btn-line:hover{background:rgba(139,180,255,.08);border-color:rgba(139,180,255,.55)} .btn-sm{height:38px;padding:0 16px;font-size:14px} .btn:active{transform:translateY(0) scale(.985)} /* The shared outline is blue on a blue button and disappears into it — the dark halo underneath gives the ring an edge on every variant. */ .btn:focus-visible{outline:2px solid var(--blue-1);outline-offset:3px;box-shadow:0 0 0 5px rgba(10,11,15,.92)} .btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none} /* ── Footer ── */ /* Bottom padding clears the floating voice widget, which is pinned to the bottom-right corner and otherwise sits on top of the last footer line. */ .site-footer,footer.content{position:relative;z-index:2;border-top:1px solid var(--line);padding:80px 0 96px;margin-top:60px; /* The particle field is at its densest by the end of the page, and footer links were reading through it. The wash starts earlier and ends darker. */ background:linear-gradient(180deg,rgba(6,7,13,.4),rgba(4,5,10,.88) 42%,rgba(4,5,10,.94)); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} /* One column for the footer, on every page that has one. It used to inherit the wide site rail (1760, ~65px in from the edge at 1440) and two pages then overrode it back to their own 1080 column — with the same two lines, typed twice. So the site had the footer starting at x=180 on the home page and the API page and at x=65 on /docs, /chat and the 404: the one element that is on every page, beginning in two different places depending on which page you were on. The measure is the one the landing was chosen for (DESIGN-SYSTEM.md §11), stated once, here. */ footer.content .rail,.site-footer .rail{max-width:1080px;padding-inline:clamp(18px,3vw,32px)} .foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:34px} @media(max-width:1100px){.foot{grid-template-columns:1fr 1fr 1fr}} @media(max-width:820px){.foot{grid-template-columns:1fr 1fr}} @media(max-width:520px){.foot{grid-template-columns:1fr}} .foot h4{font:500 13px/1 var(--sans);margin-bottom:18px;color:var(--ink)} .foot ul{list-style:none;margin:0;padding:0}.foot li{margin-bottom:10px} .foot a{color:var(--muted);font-size:14px;transition:color .2s;position:relative;text-decoration:none}.foot a:hover{color:var(--blue-1);text-decoration:none} .foot a::after{content:"";position:absolute;inset:-13px -8px} .foot-brand p{margin-top:14px;color:var(--muted);font-size:13.5px;line-height:1.5;max-width:300px} .foot-bot{margin-top:52px;padding-top:26px;border-top:1px solid var(--line-2);display:flex; justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--faint)} @media(prefers-reduced-motion:reduce){ .btn:hover,.btn:active{transform:none} .nav,.nav-menu,.nav-drop-menu,.nav-set-menu{transition:none} .nav-set.open .nav-set-t svg{transform:none} }