A header that gets out of the way

The bar has no fixed height. Every item in it - logo, nav item, phone, Apply - is one declared row height, 40px, plus Spacing/Medium top and bottom: 72px.

Past 40px of scroll it takes data-stuck="true": the row height drops to 36px and the padding to Spacing/Small, so the bar becomes 60px.

The size change snaps rather than easing. padding and height are layout properties, and animating them on a sticky bar is what makes a header stutter on a mid-range phone. The bar's shadow carries the 220ms transition instead, because a shadow composites.

It is position: sticky, not fixed, so it needs no spacer element and cannot overlap the first section.

Above the bar sits the client's own scroll progress indicator, restored from the live site where it is #progress-bar. Full sticky footprint is therefore 76px, and 64px once stuck.

Pointer: hovering a trigger opens it after 120ms. The delay is what stops a mouse crossing the bar diagonally from flashing three panels open.

Leaving the trigger or the panel closes it after 180ms. That window is what lets the pointer travel the diagonal from the word into the panel without it shutting.

Keyboard: focus opens, Escape closes, focus moves through the panel in source order.

Touch and click: the trigger toggles. A tap does not follow the trigger's own link.

Only one panel exists in the DOM at a time, so two can never be open together.

Full-bleed ground, but the content is held to Max-Width/Large so the columns line up with the page underneath.

Five equal tracks: Car | Leisure | Personal (spans two, its six pages run 3 + 3) | Commercial. No column is more than four links deep, so the panel ends on one line. 303px tall, down from 554px.

Each silo opens with a hub tile: the silo name on a tinted bubble with a red arrow, linking to the hub page. The hub pages are the money pages, so they must read as links, not as column titles. The tile turns navy on hover.

No description and no second "All ..." link to the same URL under the pages.

Home Loans is removed. Yes Loans does not write home loans.

The Ice foot strip holds the help: Borrowing power calculator, or call.

Every label is the live page's own anchor text, with one deliberate exception: Fast Loans Online is relabelled Fast Car Loans. Nothing is reworded to fit the layout.

Opens on the Navy bar as a White panel with an Ice foot strip. No two adjacent grounds repeat (TR-016).

A small panel, min-width 248px, anchored under its own trigger rather than under the viewport.

It is positioned by measuring the trigger, not by nesting inside the bar. Nesting it means the sticky bar's border clips it.

Radius/Large on the panel, 6px on the links inside it. An inner corner is never rounder than the one containing it (TR-025).

Nav, phone number and Apply button leave the bar. A 44px phone glyph and a 44px burger replace them.

The drawer is fixed, full-viewport and fully opaque, and slides in from the right (340ms, cubic-bezier(0.32, 0.72, 0, 1)). The live drawer is translucent and the hero reads straight through the menu.

It is a stack of screens, not an accordion. Screen one fits one phone height: the five loan silos, each with its one-line description, then Insurance, Calculators, About and Contact.

Tapping a silo or a menu slides its own screen in over screen one, which drifts a quarter width left and fades. ‹ Menu slides it back. Any loan page is two taps from the burger.

A silo screen leads with the hub card - silo name, description, arrow, on its own ground - linking to the hub page, then lists every page under it. Contact has no screen: it links straight through.

Transform and opacity only. Hidden screens are visibility: hidden and inert, so they hold no tab stops. Focus moves to the back button on the way in and back to the row on the way out. Escape steps back one screen, then closes.

Every screen is rendered at all times and positioned off to the side, so every link stays in the markup for crawlers and for the export.

Body scroll locks while the drawer is open by pinning the body at its offset, which is what holds on iOS Safari. The page returns to the same position on close.

Call us and Apply now are pinned to the bottom of the drawer, above the safe-area inset.

The Yes Loans mark is a speech bubble - round on three corners, square on the bottom right. That shape is the header's only decoration and it is used five times: the Apply button, the nav hover, the active-page chip, the hub tile on each silo, and the hover chip on every link.

Nothing else is added. No shadows for their own sake, no borders that are not doing structural work, no icons that repeat what a word already says.

The bar is a two-stop gradient from Background/Background to Background/Background Overlay, which is Navy/900 to Navy/950. Both are existing tokens. It is barely a shift, and it is what stops the bar reading as one flat printed rectangle.

The progress indicator is the client's, not ours. It is 3px here rather than the live 8px: at 8px it is a stripe, at 3px it is an instrument.

data-current="true" on a top-level item draws the red bubble chip beneath it. The developer sets this per page. The live header has no active state at all.

Panels reveal with opacity and a 6px translate only. No height animation, so nothing below reflows.

The progress indicator is driven by a scroll listener writing transform, throttled to one write per animation frame. It is deliberately NOT a CSS scroll timeline: animation-timeline fails the house motion check, and a re-render per scroll event is how a progress bar becomes the reason a page stutters.

Every transition names its properties. None of them is `all`.

prefers-reduced-motion removes every transition and the translate. Panels still open, instantly.

Focus rings are Text/Accent at 2px with offset on every trigger, link and button.

All mobile targets are at least 44px on both axes.