Floating Nav

Which pages get it

Only pages with at least one more screen of reading left once the pill arrives — measured live from the document height, never a list of routes. A page that grows content later starts qualifying on its own; today that means short pages like /thank-you and /contact skip it. Arriving is debounced by 200ms so that growing the page mid-interaction (expanding FAQ accordions, say) can't summon a nav under the reader's hands.

Motion

Opacity and y only, on a spring — it slides down from behind the top edge. It is never mounted on arrival: it renders from the first paint, transparent and inert, and is shown by a property change. Its backdrop-filter is a compositor surface, and inserting one into the layer tree mid-scroll was a one-frame flash of whatever sat under it — on the home page, exactly as the case studies band pinned. Deliberately not scale: on a w-fit element a 5% scale is a 5% change in rendered width, which is the artifact this component exists to avoid. This pill replaced a bar that morphed into it, and every version of that morph read as a glitch. Nothing here may animate width, border-radius, margin, scale or layout, and no transition-* class may be added — a transition-all would let the full-width ↔ hugged switch animate on resize, which is the same artifact arriving through a side door. It is one size from its first frame.

Below lg the pill goes full width with 12px side margins matching its 12px top offset, and the row's justify-between pushes the menu button to the far end. Above lg it hugs its content and justify-between is inert, since there is no free space to distribute.

Surface

Frosted glass — .nav-pill-surface. The wide 28px blur is what makes it read as glass rather than a slab: a narrow blur leaves the backdrop as sharp noise directly behind the labels, which is both harder to read and less convincing. A brightness filter darkens the backdrop before the 62% tint composites over it, so far more of the ground's texture survives than a heavier flat fill would allow at the same contrast.

No saturate(), unlike .popover-surface. The canonical glass recipe boosts saturation, but over the vivid yellow case-study card that clips two of three channels and leaves the pill a yellow-cast olive — it costs contrast rather than buying it. The tint, not the filters, is what keeps the text readable; the binding case is the secondary line over a white screenshot. Browsers without backdrop-filter fall back to the opaque fill this replaced.

10px padding on all four sides, matching the even inset around the 32px circular avatar and the CTA. On dark pages the fill lands within a few units of the page itself, so the border and the top inset highlight are the only things drawing the pill's shape — don't weaken either.