/* App layout on top of the vendored Nocturne system. Ours to edit; nocturne.css is not (see README.md in this directory). Every colour here is a token. No hex, no rgb(), no hsl(), no oklch(), and no named colour — design_system_test.rb fails the build on any of them, in this file and in the style attributes of our ERB. That is the whole point of adopting a system: the day Jeff ships a new drop, the palette moves and this file does not have to. Sizes are a different matter and are NOT enforced: raw px appears here where a spacing token would be the wrong unit (a blur radius, a min-height, a border width). Colour is the one the tokens fully cover. */ body { min-height: 100vh; display: flex; flex-direction: column; /* A page that scrolls sideways is a bug, always. Wide content scrolls inside its own box instead (see .table-scroll). */ overflow-x: hidden; } main { flex: 1; } /* The page shell: a CENTERED container whose CONTENT is flush-left. Both halves matter. This comment used to claim the container was not centered, which the `margin: 0 auto` on the next line contradicts and Jeff's mockup does not do either — it centers a 1200px container and left-aligns everything inside it, which is what the readme's "asymmetric, whitespace on the right" describes. Width matches his 1200px rather than a rounder number of our own. */ .shell { width: 100%; max-width: 1200px; margin: 0 auto; /* Jeff's gutter, verbatim: clamp(20px, 5vw, 72px). A flat token here made every page sit ~55px further left than the design at desktop width, which is the single most visible difference between the two when you flip between them. */ padding: 96px clamp(20px, 5vw, 72px) 72px; } .shell-tight { padding-top: 64px; } /* A section label above a heading. Was `.card-kicker` borrowed out of a card, which meant a card restyle in the next drop would have silently restyled page headings. Same look, its own name, ours. */ .kicker { display: block; font-size: 13px; line-height: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 40px; } .shell-narrow { max-width: 480px; margin: 0; } /* Header. `.nav` and `.nav-brand` come from the system; the layout does not. Note what is NOT here: no `flex: 1` on the links. `.nav-brand` already carries `margin-right: auto`, so a second growing child pushes the actions off the right edge and the page scrolls sideways — which is exactly what the first version of this file did. */ .site-nav { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; row-gap: 12px; align-items: center; gap: 24px; padding: 14px clamp(20px, 5vw, 72px); background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(14px); /* The mockup's nav carries this rule; the vendored `.nav` explicitly sets `border-bottom: none`, so it is ours to add back. */ border-bottom: 1px solid var(--color-divider); } /* The brand lockup: a 22px outlined badge holding the initial, then the wordmark with "API" in the accent. The badge is the mark Jeff drew; without it the header reads as plain text and is the first thing that looks unfinished. */ .nav-brand { display: inline-flex; align-items: center; gap: 9px; /* NOT margin-right: auto (which the vendored .nav-brand sets). His nav is [brand][links][actions]; an auto margin here pushes the links to the right edge along with the actions, which reads as a different navigation. */ margin-right: 0; } .site-nav-spacer { flex: 1; } /* The nav CTA is an for us and a