/* ============================================================
CHICAGO MOTOR CARS — main
Loaded after tokens.css.
============================================================ */
/* ---- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--t-body);
line-height: var(--lh-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* clip, not hidden: `hidden` makes the body a scroll container and
silently kills position:sticky on every descendant. U6 says clip
for exactly this reason. */
overflow-x: clip;
}
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; } /* ol too — the chapter rail and the sell steps are both ordered */
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 3px;
border-radius: 2px;
}
.u-visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.shell {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* ---- Micro label ------------------------------------------
The machine register. Uppercase, tracked, never below 14px. */
.micro {
font-family: var(--font-label);
/* The alignment the monospace used to give for free, asked for
explicitly. This is the mechanism that was always doing the work
for figures; the face was never the reason. */
font-variant-numeric: tabular-nums;
font-size: var(--t-micro);
font-weight: 500;
letter-spacing: var(--tr-label);
text-transform: uppercase;
line-height: var(--lh-label);
}
/* ============================================================
HEADER — transparent over the hero
============================================================ */
/* Fixed, not absolute: the page scrolls now, and a header that scrolls
away takes the phone number with it. */
.masthead {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: 70; /* above .menu, so the toggle stays the way out */
height: var(--header-h);
transition: background-color var(--dur-4) var(--ease-out),
backdrop-filter var(--dur-4) var(--ease-out);
}
/* ---- The top gradient --------------------------------------
MENU and the call carry their own grounds; the wordmark does not, and
it was crossing whatever scrolled beneath it — the Featured Inventory
eyebrow and heading were reading straight through the header.
This fixes it the same way the hero does: at the GROUND layer, not
with a panel behind the type. A solid bar was already rejected and
would be the wrong answer anyway — it draws an edge across the page
for the sake of one wordmark.
Two details that matter more than they look:
It is TALLER than the header (1.9x) so the fade finishes well below
the chrome. A gradient that ends on the header's own bottom edge puts
its termination exactly where the eye is already looking, and the
fade reads as a band with a hard bottom.
The last stop is `rgb(var(--bg-rgb) / 0)`, not `transparent`. They are
not the same thing to interpolate through — the keyword can take the
ramp through a greyed midpoint and leave a dirty smear over a navy
page. Fading a colour to nothing means fading THAT colour to zero
alpha. The intermediate stops approximate an ease so it does not
band across such a shallow ramp. */
.masthead::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
z-index: -1; /* behind the rail and the two controls */
height: calc(var(--header-h) * 1.9);
pointer-events: none;
opacity: 0;
/* The ramp HOLDS across the header's own height and only then falls
away. The first attempt fell linearly across the whole 1.9x, which
put alpha at roughly 0.44 exactly at the header's bottom edge —
measured, the heading passing beneath was still coming through at
rgb(205,204,204) against a wordmark at 244. Covering where the
chrome actually is, and fading below it, is what a header scrim is
for; a straight ramp spends most of its opacity on empty air. */
background: linear-gradient(to bottom,
rgb(var(--bg-rgb) / 0.95) 0%,
rgb(var(--bg-rgb) / 0.92) 34%,
rgb(var(--bg-rgb) / 0.78) 53%, /* the header's bottom edge */
rgb(var(--bg-rgb) / 0.42) 72%,
rgb(var(--bg-rgb) / 0.14) 88%,
rgb(var(--bg-rgb) / 0) 100%);
transition: opacity var(--dur-4) var(--ease-out);
}
/* Only after the hero. Over the photograph the scrim already darkens
the top band — the masthead measured 6.11:1 there without help — and
a second wash would just dim a frame chosen for its light. */
.has-js.is-condensed .masthead::before { opacity: 1; }
/* ---- The scrolled masthead ---------------------------------
The condensed state used to dissolve to nothing: the rail's ground,
border and blur all went, and what was left was a wordmark, a MENU
and a phone number floating separately over whatever happened to be
behind them. Each object was fine and the BAR had stopped existing —
three things at the top of a page are not a header, they are three
things.
So the chrome moves down a level instead of disappearing. The rail
still dissolves — that decision stands and its reasoning is below —
but the masthead itself picks up a quiet ground and a rule, which is
what puts the three objects back on one line and gives the page an
edge to scroll under.
THE RULE HAS TWO JOBS AND IS ONE DEVICE. It separates the header from
the page, and it reports read position by filling in --accent. That is
deliberate economy: a separate progress bar would be a second element
doing a job this line is already the right shape for. It is also the
one place the accent belongs by this project's own rationing — a mark,
never a ground, arriving in response to what the visitor is doing.
Scroll-driven, so it costs nothing per frame and the user keeps the
transport. Under reduced motion, and anywhere scroll timelines are not
supported, the rule is simply a rule: still separating, no fill. */
/* No ground on the masthead itself. A full-width bar was tried here and
was both wrong and dead — the ground belongs under the nav items only
(see .navbar__groups), and a later rule in this file was already
setting `background: none` on the same selector, so it never rendered.
The rule and its progress fill are what the scrolled masthead gets. */
/* ---- Read position, bottom edge ----------------------------
Fixed to the bottom of the VIEWPORT, not to the header. 3px rather
than a hairline: at 1px it was a scratch under the bar, and a line
that is reporting something has to be thick enough to be read as a
quantity rather than as a border.
Still scroll-driven, so it costs nothing per frame and the user keeps
the transport. Under reduced motion, and anywhere scroll timelines
are unsupported, the track is simply a track — no fill, no lie. */
.readbar {
position: fixed;
inset-block-end: 0;
inset-inline: 0;
z-index: 55; /* under .menu (60) so an open panel covers it */
height: 3px;
background: rgb(var(--bg-rgb) / 0.55);
opacity: 0;
transition: opacity var(--dur-4) var(--ease-out);
pointer-events: none;
}
/* Only after the hero. Over the photograph it would cut across the air
under the claim, which is the one thing that space is for. */
.has-js.is-condensed .readbar { opacity: 1; }
.readbar__fill {
display: block;
height: 100%;
background: var(--accent);
transform-origin: left center;
scale: 0 1;
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: scroll()) {
.readbar__fill {
animation-name: read-progress;
animation-fill-mode: both;
animation-timing-function: linear;
animation-timeline: scroll(root block);
}
}
}
@keyframes read-progress { to { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) {
.masthead,
.readbar { transition: none; }
}
/* Full bleed, not contained. The rest of the page reads inside
--container (1440px), but the header is chrome rather than reading
matter: on anything wider it was capping at 1440 and centring, which
left the wordmark floating inland on a 2560px screen instead of
holding the corner. It keeps the gutter — the mark and the bar still
line up with the page's own margin — but loses the ceiling, so the
two ends stay pinned to the two edges at any width. */
.masthead__inner {
height: 100%;
width: 100%;
padding-inline: var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
/* Down one step, from 32 to 16. This is the gap between the rail and
the call, so it is what sits between MENU and the number once the
rail has condensed — and with the rail's own 12px of right padding
on top of it, 32 was reading as 44px of nothing between two objects
that belong together. Now 28. */
gap: var(--sp-4);
}
/* ---- The wordmark -------------------------------------------
THE MARK IS INK, AND IT IS OPTICALLY CORRECTED AT SIZE.
Two defects, both of them in how the mark was RENDERED rather than in
how it is drawn — the outlines are untouched, which the mandate
requires.
1. Colour. The file had #FEFEFE baked into every path, so the
identity was the only cold-white object on a page whose ink is
--ink #F3EEE6. On the hero's blue sky that is the worst available
pairing: cold white on cold blue, no hue separation at all. It is
currentColor now, so the mark takes the ink of wherever it stands
and can be set --bone-ink on the light band without a second file.
2. Weight. This is the real one, and it is exactly the failure a token
check cannot see. The script's thinnest strokes are about 2.5 units
of a 1271-unit box — 0.29px at the 146px the rail can afford — so
they never fill a pixel and arrive as partial coverage.
Measured by rasterising the mark at 146px and reading the alpha
channel, against the composited ground behind it (30% --bg over the
hero sky = #2E527E, L 0.082):
nominal #F3EEE6 on that ground ......... 7.12:1 passes
actual 34.4% of the mark's pixels sit
below 40% coverage, i.e. at ..... ≤2.5:1 fails
So the mark's COLOUR was never the problem and re-inking it fixes
nothing on its own. The problem is mass: the mark had 861 inked
pixels carrying 514 units of ink where the mono beside it carries
solid stems, which is why the navigation was outranking the
identity in the identity's own header.
Scaling up does not fix it either — 1px hairlines want ~508px of
width, which no header has. So the correction goes on the stroke:
0.6px of NON-SCALING stroke, constant in CSS pixels at every render
size. Measured at 146px it takes the mark from 861 inked pixels /
514 ink units to 1314 / 789 — 53% more ink mass, same letterforms —
and lifts the fully-inked share from 33.0% to 36.6%. At display
sizes the same 0.6px is 0.07% of the mark and invisible.
Tested at 0.4 / 0.6 / 0.8 / 1.0 over the real hero: 1.0 closes the
counters of "g" and "a" at 118px, 0.4 does not clear the pixel.
0.6 is the measured middle.
`paint-order: stroke fill` keeps the stroke behind the fill so the
outline never eats into the letterform's own shape. */
/* THE MARK HAS TWO SIZES, BECAUSE IT HAS TWO AMOUNTS OF ROOM.
Measured at 1440, which is the width that decides this:
full rail — wordmark + six groups + My Garage + call + padding
needs 1364px of 1441. Spare: 77px, and every pixel the
mark takes pushes the compact breakpoint up by one.
condensed — the rail has dissolved; only the mark, MENU and the
call are left. Used: 443px. Spare: 882px.
One ramp for both states was therefore the wrong shape: it was being
held down by a constraint that only exists while the navigation is
unpacked, and starved the state where the mark stands alone with most
of the header empty beside it. So this is the mark's natural size, and
.navbar below is the only place it gets cut back. */
.masthead__wm {
display: block;
width: clamp(200px, 17vw, 280px);
height: auto;
color: var(--ink);
fill: currentColor;
stroke: currentColor;
stroke-width: 0.6;
paint-order: stroke fill;
}
/* NO HOVER STATE, on purpose. The mark is already at full --ink, so the
only lift available is toward pure white — which is the exact cold
value this whole rule set just took OUT of the identity, and a 3%
luminance move nobody perceives. A home link on a wordmark needs no
affordance beyond being a wordmark. Focus is covered by the global
:focus-visible ring at the top of this file. */
/* Wherever the mark stands on the light band it takes that ink instead.
It could not do this at all while the fill was baked into the file —
the light-ground case needed a second copy of the logo. */
.on-bone .masthead__wm { color: var(--bone-ink); }
/* ---- The navigation rail ------------------------------------
One object carrying the wordmark and the whole navigation, with the
call sitting outside it. That structure is the reference's, and it
is also what makes the scrolled state calm: the rail keeps its box,
so nothing slides when its contents change.
The direction asks for minimum decorative glassmorphism, so the blur
is down from 24px to 12px and the ground carries the legibility
instead. The blur was the decoration; the ground is the function. */
.navbar {
position: relative;
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: var(--sp-5);
/* The padding STAYS even though the ground is gone. It is what holds
the wordmark --sp-4 in from the gutter, and the hero claim aligns to
exactly that — see .hero__foot. Removing it here would silently move
the claim's left edge on the other side of the file. */
padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
border-radius: var(--r-rail);
/* NO GROUND OVER THE HERO. The rail was a frosted capsule at rest, and
over a photograph this good it was a box drawn around nothing — the
navigation reads on the sky without it, and the first screen goes
back to being the picture plus the words rather than the picture
plus a widget. Kept transparent rather than deleted so the border
still occupies its pixel and nothing shifts when it arrives below.
The ground is not gone from the project, it moved to the two places
that need it: the open dropdown, immediately below, and the
condensed masthead once the header has left the hero. */
background: transparent;
border: 1px solid transparent;
transition: background-color var(--dur-3) var(--ease-out),
border-color var(--dur-3) var(--ease-out),
backdrop-filter var(--dur-3) var(--ease-out);
}
/* The open-panel ground moved to .navbar__groups — see there. The rail
itself now carries no ground in any state. */
.navbar .masthead__mark { flex: none; }
/* ONE SIZE NOW, AND IT IS THE BIG ONE.
The mark used to shrink to 12.8vw/196 while the rail was packed and
only reach 17vw/280 once the rail dissolved on scroll. The scrolled
size is the right size, so it became the size — the rail no longer
gets to make the identity smaller than it should be.
What paid for it: "My Garage" collapses to its glyph and count while
the rail is packed, which is worth 67px. That is not an improvisation
— the COMPACT HEADER block below has said since it was written that
when the rail runs out of room the width has to come from the content
rather than from squeezing padding, and named this exact control.
Net effect is better than a straight trade. The mark is 33% wider than
it was a moment ago and 79% wider than it started, and the compact
breakpoint still came DOWN, 1410 to 1390, because the glyph freed more
than the mark took. */
.navbar .masthead__wm { width: clamp(200px, 17vw, 280px); }
/* The condensed state now inherits the same size, so nothing about the
mark changes on scroll. The transition stays declared because the
surrounding rail still dissolves around it under --dur-4, and a mark
whose box is animated by nothing while its neighbours move is the one
element that would look pinned. */
.has-js.is-condensed .navbar .masthead__wm {
transition: width var(--dur-4) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
.has-js.is-condensed .navbar .masthead__wm { transition: none; }
}
/* The garage label is present for assistive tech at every width; it is
only the packed rail that hides it from sight, because that is the one
state short of room. Above the breakpoint the glyph carries it. */
.navbar__garage-icon { display: none; flex: none; }
@media (min-width: 1391px) {
.navbar__garage-icon { display: block; }
.navbar__garage-label {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden; white-space: nowrap;
clip-path: inset(50%);
}
}
/* Centred in whatever the wordmark and the counter leave over. */
/* THE GROUND IS UNDER THE NAV ITEMS AND NOWHERE ELSE.
It used to be the whole rail — one capsule from the wordmark across to
My Garage — and that box was mostly empty. Over a photograph a
translucent panel is only legible while it is a contained object, and
a container that is 60% air is not containing anything; it was reading
as a widget laid on the picture.
So the capsule shrank to the six items that actually need a ground to
sit on. `flex: 0 1 auto` with auto margins is what makes it hug them
while staying centred in whatever the mark and the garage leave over —
`flex: 1 1 auto` was stretching it to fill, which is why it could not
carry a background before. */
.navbar__groups {
flex: 0 1 auto;
min-width: 0;
margin-inline: auto;
display: flex;
align-items: center;
gap: var(--sp-1);
/* Thicker than the items need. The capsule is an object now rather
than a tint behind some words, and an object wants its own margin
before its edge — at the triggers' own height it was shrink-wrap. */
padding-block: var(--sp-3);
padding-inline: var(--sp-4);
border-radius: var(--r-rail);
background: transparent;
border: 1px solid transparent;
transition: background-color var(--dur-3) var(--ease-out),
border-color var(--dur-3) var(--ease-out),
box-shadow var(--dur-3) var(--ease-out),
backdrop-filter var(--dur-3) var(--ease-out);
}
/* It arrives in exactly two situations, both of them the same reason —
the type underneath stops being reliable:
scrolled — the header is now over page content and whatever
photograph the hero slider happens to be holding;
open — a panel is hanging off the bar and needs something to
hang off.
Over the hero at rest it stays transparent, which is the state the
first screen is actually judged on. */
/* NO GROUND UNDER THE WORDMARK. A glass capsule was tried here and
removed at your call — the mark stands on the page bare, like the
instruction said. The collision it was covering for is real but
small: the finder bar passes under the mark for a few hundred pixels
of scroll. If that ever needs solving it should be solved by the
finder, not by putting a box round the identity. */
.has-js.is-condensed .navbar__groups,
.navbar:has(.navmenu__trigger[aria-expanded="true"]) .navbar__groups {
background: rgb(var(--bg-rgb) / 0.52);
border-color: rgba(243, 238, 230, 0.16);
/* GLASS, and this is a REVERSAL worth naming. The art direction's own
terms include "minimum decorative glassmorphism", and the blur was
cut 24px to 12px under it on the grounds that the ground did the
legibility work and the blur was decoration. Client direction now
asks for glass, so it is glass — recorded here rather than applied
quietly, which is this project's rule for reversing a stated term.
What makes it glass rather than frost: url(#nav-glass) displaces the
backdrop, so the photograph BENDS through the capsule and keeps
bending as it scrolls. Blur and saturation alone are frosting; the
refraction is the part that reads as a material.
The order matters — displace first, then blur, then lift the colour.
Blurring before the displacement would smear the noise field itself
and the warp would vanish into mush. */
backdrop-filter: url(#nav-glass) blur(10px) saturate(1.5) brightness(1.06);
-webkit-backdrop-filter: blur(12px) saturate(1.5) brightness(1.06);
/* The two edges a pane of glass actually has: a lit top rim where it
catches light and a darker underside where it sits off the surface.
Without them the capsule reads as a hole, not a solid. */
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.28),
0 8px 30px rgb(var(--bg-rgb) / 0.45);
}
.navmenu { position: relative; }
.navmenu__trigger {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
border: 0;
background: transparent;
cursor: pointer;
font-family: var(--font-label);
font-size: var(--t-micro); /* 14px floor */
font-weight: 400;
letter-spacing: var(--tr-label);
text-transform: uppercase;
white-space: nowrap;
color: var(--ink-2);
padding: var(--sp-3);
border-radius: var(--r-control);
transition: color var(--dur-2) var(--ease-out),
background-color var(--dur-2) var(--ease-out);
}
.navmenu__trigger:hover,
.navmenu__trigger[aria-expanded="true"] {
color: var(--ink);
background: rgba(243, 238, 230, 0.08);
}
.navmenu__chev {
opacity: 0.6;
transition: transform var(--dur-2) var(--ease-out);
}
.navmenu__trigger[aria-expanded="true"] .navmenu__chev { transform: rotate(180deg); }
/* A top-level item with no children — Sell us your car. Same metrics as
a trigger so the row stays one line of type; it simply has no chevron
and nothing to open. */
.navbar__link {
display: inline-flex;
align-items: center;
font-family: var(--font-label);
font-size: var(--t-micro);
font-weight: 400;
letter-spacing: var(--tr-label);
text-transform: uppercase;
white-space: nowrap;
color: var(--ink-2);
padding: var(--sp-3);
border-radius: var(--r-control);
transition: color var(--dur-2) var(--ease-out),
background-color var(--dur-2) var(--ease-out);
}
.navbar__link:hover,
.navbar__link:focus-visible {
color: var(--ink);
background: rgba(243, 238, 230, 0.08);
}
/* The panel is anchored to ITS OWN trigger and sized to its content.
The earlier version spanned the whole bar, which was eco's geometry —
but eco has three evenly-loaded groups and this tree does not. Here
Inventory carries eighteen links over three levels and Services
carries three; one shared width either strands Services in a 950px
void or squeezes Inventory. So the panel opens under the word that
opened it, and takes the width its own content needs. */
.navmenu { position: relative; }
.navmenu__panel {
position: absolute;
inset-inline-start: 0;
/* Detached, not docked. At 8px it read as a panel stuck to the
underside of the bar — neither one object nor two. At 16px it is
plainly its own surface floating over the photograph, which is also
what its own blur and border were already claiming.
The pointer crosses this gap in far less than the 180ms grace
period on the bar, so hover does not break. */
top: calc(100% + var(--sp-4));
display: flex;
align-items: flex-start;
gap: var(--sp-8);
/* max-content sized it to the longest label and no further, which read
as cramped — the links were touching the walls. A floor plus columns
that share the slack gives the list room without letting a short
menu sprawl. */
width: max-content;
min-width: 24rem;
max-width: min(60rem, calc(100vw - 2 * var(--gutter)));
padding: var(--sp-6);
border-radius: var(--r-panel);
background: rgb(var(--bg-rgb) / 0.82);
border: 1px solid rgba(243, 238, 230, 0.10);
backdrop-filter: blur(40px) saturate(1.1);
-webkit-backdrop-filter: blur(40px) saturate(1.1);
}
.navmenu__panel[hidden] { display: none; }
/* Panels near the right edge open leftward so they cannot run off the
viewport — the alternative is a menu the last group cannot show. */
.navmenu:nth-last-child(-n + 2) .navmenu__panel {
inset-inline-start: auto;
inset-inline-end: 0;
}
/* Columns share whatever width the panel has over its content, so the
extra room lands between the lists rather than at one edge. */
.navmenu__group { min-width: 0; flex: 1 1 auto; }
.navmenu__group--wide { flex: 2 1 auto; }
.navmenu__list { display: grid; align-content: start; }
.navmenu__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
/* Inventory carries eighteen links; the rest carry three to six. */
.navmenu__panel--mega { min-width: 46rem; }
.navmenu__list a {
display: block;
font-size: 0.9375rem;
line-height: 1.35;
color: var(--ink-2);
padding: var(--sp-2) var(--sp-3);
margin-inline: calc(var(--sp-3) * -1);
border-radius: 8px;
transition: color var(--dur-1) var(--ease-out),
background-color var(--dur-1) var(--ease-out);
}
.navmenu__list a:hover,
.navmenu__list a:focus-visible {
color: var(--ink);
background: rgba(243, 238, 230, 0.08);
}
/* Entering decelerates; nothing moves for anyone who asked it not to. */
@media (prefers-reduced-motion: no-preference) {
.navmenu__panel { animation: nav-drop var(--dur-2) var(--ease-out) both; }
}
@keyframes nav-drop {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* The pill that closes the bar. Same object as .btn--fill — bone at
rest, accent on hover — so the control register is one system and
not a lookalike. */
.navbar__cta {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-family: var(--font-label);
font-size: var(--t-micro);
letter-spacing: var(--tr-label);
flex: none;
padding: var(--sp-4) var(--sp-5);
border-radius: var(--r-control);
background: transparent;
color: var(--ink);
border: 1px solid rgba(243, 238, 230, 0.18);
transition: background-color var(--dur-2) var(--ease-out),
border-color var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out);
}
/* Through the ACCENT ACTION tokens, not a second copy of the red. The
call is an action surface; when it fills, it fills with the system's
action colour. */
.navbar__cta:hover,
.navbar__cta:focus-visible {
background: var(--action);
border-color: var(--action);
color: var(--action-ink); /* 6.30:1 */
}
/* Outlined rather than filled, and outside the rail. In the reference
it is its own object beside the rail, not the light mass closing it —
which also frees the one bone fill on the screen for the hero's
primary action, where it does more work. */
.navbar__cta .navbar__cta-icon { display: block; opacity: 0.55; }
/* The glyph is the phone's affordance, not the desktop's — the number
itself says "call" perfectly well when there is room to print it. */
.navbar__cta-icon { display: none; }
/* My Garage. Present in their header, so present here — but outlined
rather than filled: one light mass in the bar, and the call has it. */
.navbar__garage {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-family: var(--font-label);
font-size: var(--t-micro);
letter-spacing: var(--tr-label);
white-space: nowrap;
color: var(--ink-2);
padding: var(--sp-3);
border-radius: var(--r-control);
transition: color var(--dur-2) var(--ease-out),
background-color var(--dur-2) var(--ease-out);
}
.navbar__garage:hover,
.navbar__garage:focus-visible {
color: var(--ink);
background: rgba(243, 238, 230, 0.08);
}
.navbar__count {
min-width: 1.375rem;
padding-inline: 0.3em;
text-align: center;
border-radius: 999px;
background: rgba(243, 238, 230, 0.12);
color: var(--ink);
}
/* ---- Condensed, once the header leaves the hero -------------
The previous version swapped display:none for display:flex, and that
is exactly why it read as crude: the groups did not fade, they
vanished, and the rail lost most of its width in one frame, so the
wordmark and the counter jumped sideways. The abruptness was the
GEOMETRY, not the speed — a slower display swap would have been just
as bad.
So nothing moves now. The rail keeps its box and the wordmark keeps
its place; only the contents dissolve. The groups and the counter go
out on opacity, the toggle comes in on opacity in the same trailing
slot. `visibility` is stepped at the end of the fade so nothing
invisible stays tabbable, and at --dur-4 it is a slow dissolve rather
than a cut — the cinematic register the direction asks for.
The call does NOT fold: it is the one action on a $1.2M car, and
putting it behind a tap exactly as the visitor gets more interested
is the wrong way round. */
.navbar__groups,
.navbar__garage {
transition: opacity var(--dur-4) var(--ease-out),
visibility 0s linear var(--dur-4);
}
/* THE NAVIGATION SURVIVES THE SCROLL NOW.
It used to crossfade out and hand over to a MENU toggle at every
width. That is gone above the compact breakpoint: the bar stays
sticky and keeps all six groups, and the ground under the items
arrives instead. A hamburger on a 1440 screen was hiding a navigation
that fits, which costs a click on every use and is the one thing a
sticky header exists to avoid.
Below 1390 the toggle is still the whole way in — there the nav
genuinely does not fit, and that rule lives in the COMPACT HEADER
block, untouched. */
@media (max-width: 1390px) {
.has-js.is-condensed .navbar__groups,
.has-js.is-condensed .navbar__garage {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
}
/* Absolute, so it fades in exactly where the groups fade out and takes
no part in the rail's layout — an appearing toggle must not push
anything sideways. */
.has-js .menu-toggle {
position: absolute;
inset-inline-end: var(--sp-3);
inset-block-start: 50%;
translate: 0 -50%;
display: inline-flex;
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-4) var(--ease-out),
visibility 0s linear var(--dur-4);
}
/* Only below the breakpoint now — above it the groups never leave, so
there is nothing for the toggle to replace. */
@media (max-width: 1390px) {
.has-js.is-condensed .menu-toggle {
opacity: 1;
visibility: visible;
/* Flush to the rail's edge so the gap to the call is the masthead's
own, and the two read as a spaced pair rather than one control
tucked inside a container and another loose beside it. */
inset-inline-end: 0;
transition: opacity var(--dur-4) var(--ease-out),
visibility 0s linear 0s,
background-color var(--dur-4) var(--ease-out),
border-color var(--dur-4) var(--ease-out),
border-radius var(--dur-4) var(--ease-out);
}
}
/* The rail has no ground in any state now, so there is nothing left for
this to dissolve — it only has to stop moving things.
THE WORDMARK DOES NOT MOVE ON SCROLL. The left padding used to
collapse to zero here, sliding the mark 16px onto the gutter line,
and the note that used to sit in this comment argued that 24px over
--dur-4 was "a settle, not a jump". It was still a move, and it was
the identity making it — the one thing on the page that should be
nailed down while everything else scrolls past. It also dragged the
mark off the line the hero claim is aligned to, so the two edges
agreed at rest and disagreed the moment you touched the wheel.
The padding stays. Nothing in the header changes position on scroll;
what changes is the ground arriving under the nav items and the rule
arriving under the bar. */
.has-js.is-condensed .navbar {
background: transparent;
border-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-radius: 0;
}
.has-js .navbar {
transition: background-color var(--dur-4) var(--ease-out),
border-color var(--dur-4) var(--ease-out),
padding var(--dur-4) var(--ease-out);
}
/* NO continuous header. The masthead stays a transparent frame and the
chrome lives only in the objects themselves — a full-width bar would
put a band across the page for the sake of two controls, and it is
the heavier answer to a state that is supposed to be lighter.
Each object carries its own ground instead, which is also what keeps
them legible over whatever scrolls beneath. */
.has-js.is-condensed .masthead {
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* The rail SPLITS rather than dissolves. Its treatment — radius, ground,
hairline, blur — does not disappear; it is inherited by the two
objects that survive, so the scrolled state is recognisably the same
material as the state it came from, just broken in two.
The wordmark keeps no box: three boxes would be a row of chips. */
.has-js.is-condensed .menu-toggle,
.has-js.is-condensed .navbar__cta {
border-radius: var(--r-rail);
background: rgb(var(--bg-rgb) / 0.30);
border-color: rgba(243, 238, 230, 0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.has-js.is-condensed .menu-toggle:hover,
.has-js.is-condensed .navbar__cta:hover {
background: rgb(var(--bg-rgb) / 0.52);
border-color: rgba(243, 238, 230, 0.28);
}
/* The call keeps its accent on hover — the one action that outranks the
surface it sits on. */
/* Re-asserted at this specificity only because the condensed rule above
sets a background at the same weight — the VALUE is not repeated. */
.has-js.is-condensed .navbar__cta:hover,
.has-js.is-condensed .navbar__cta:focus-visible {
background: var(--action);
border-color: var(--action);
}
@media (prefers-reduced-motion: no-preference) {
.has-js .masthead { transition: background-color var(--dur-3) var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
.navbar__groups, .navbar__garage,
.has-js .menu-toggle, .has-js.is-condensed .menu-toggle { transition: none; }
}
/* ---- Menu toggle + panel (mobile) --------------------------
Hidden until JS confirms the panel can actually open. Without
JS the nav row itself stays on the page — the routes are never
locked behind a script. */
/* ---- The header pair ---------------------------------------
MENU and the call are ONE PAIR and are drawn as one: identical
height, padding, border, radius and type. They had drifted apart —
40px against 52px, one filled and one not — which read as two
controls that happened to land next to each other rather than a set.
The MENU button itself is after ballance.framer.website: a compact
labelled rectangle beside its glyph, not a bare icon. Same
mono/uppercase register as the nav labels it replaces, so the swap
reads as one system changing state. It also says what it does,
which three stacked lines never quite manage. */
.menu-toggle,
.navbar__cta {
min-height: 46px;
padding-block: 0;
padding-inline: var(--sp-5);
border: 1px solid rgba(243, 238, 230, 0.18);
border-radius: var(--r-control);
background: transparent;
color: var(--ink);
font-family: var(--font-label);
font-size: var(--t-micro);
letter-spacing: var(--tr-label);
text-transform: uppercase;
white-space: nowrap;
/* The radius travels with everything else when the rail splits, so
the two objects grow into the rail's shape rather than snapping
into it a frame later. */
transition: background-color var(--dur-4) var(--ease-out),
border-color var(--dur-4) var(--ease-out),
border-radius var(--dur-4) var(--ease-out),
color var(--dur-2) var(--ease-out);
}
.menu-toggle {
display: none;
align-items: center;
justify-content: center;
gap: var(--sp-3);
cursor: pointer;
transition: background-color var(--dur-2) var(--ease-out),
border-color var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out);
}
.menu-toggle:hover {
border-color: rgba(243, 238, 230, 0.34);
background: rgba(243, 238, 230, 0.08);
}
.menu-toggle__bars {
display: flex;
flex-direction: column;
gap: 5px;
width: 15px;
flex: none;
}
.menu-toggle__bars i {
display: block;
height: 1.5px;
background: var(--ink);
transition: transform var(--dur-2) var(--ease);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:first-child {
transform: translateY(3.25px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars i:last-child {
transform: translateY(-3.25px) rotate(-45deg);
}
/* Not a solid slab. Ballance's panel keeps the page faintly present
underneath — you can still see where you were — which is what stops a
full-screen menu feeling like a page navigation. A heavy scrim plus
blur does that; an opaque fill does not. */
.menu {
position: fixed;
inset: 0;
z-index: 60;
background: rgb(var(--bg-rgb) / 0.94);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
overflow-y: auto;
}
.menu[hidden] { display: none; }
/* Slow, and staggered by column. The panel arrives, then the groups
settle into it — one idea unfolding rather than a block appearing.
Under reduced motion the whole thing is simply there. */
@media (prefers-reduced-motion: no-preference) {
.menu:not([hidden]) { animation: menu-in var(--dur-3) var(--ease-out) both; }
.menu:not([hidden]) .menu__group {
animation: menu-rise var(--dur-4) var(--ease-out) both;
}
.menu:not([hidden]) .menu__group:nth-child(2) { animation-delay: 60ms; }
.menu:not([hidden]) .menu__group:nth-child(3) { animation-delay: 120ms; }
.menu:not([hidden]) .menu__group:nth-child(4) { animation-delay: 180ms; }
.menu:not([hidden]) .menu__group:nth-child(5) { animation-delay: 240ms; }
}
@keyframes menu-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes menu-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/* The trigger does not turn into a different control — it relabels.
Same box, same place, same size, so the eye never loses it. */
.menu-toggle__label::after { content: "Menu"; }
.menu-toggle[aria-expanded="true"] .menu-toggle__label::after { content: "Close"; }
/* Two bands: the navigation from under the header down, and the
showrooms closing the panel along the bottom edge.
Two ROWS, not `align-content: start`, and that is what changed when
the feature cards left. With three bands the panel filled itself and
stacking from the top was right. With two it no longer does: at
1440x900 the content is 742px, so starting from the top left 159px of
dead ground under the showrooms — and at 1920x1080 it left 339. The
leftover now falls BETWEEN the two bands instead of below them, which
is what the direction asks of a panel like this anyway: mass at the
top, the tail settling onto the bottom edge, the air in the middle
where it separates two different kinds of thing.
At short viewports 1fr collapses to nothing and the two bands simply
sit at their gap, so this costs the tight cases nothing. */
.menu__inner {
min-height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
gap: var(--sp-7) var(--sp-8);
padding-block: calc(var(--header-h) + var(--sp-6)) var(--sp-8);
}
.menu__foot { align-self: end; }
/* .menu__feature and the whole .fcard component are GONE — see the
comment where they used to sit in index.html. assets/img/stock/ still
holds both frames. */
/* Four groups now, so the rows drop a rank: the group heading carries
the structure and the rows sit under it. A 2.25rem row per item would
run four screens deep for a menu that used to be one. */
.menu__nav {
display: flex;
flex-direction: column;
gap: var(--sp-7);
}
/* The panel is no longer phone-only — the condensed header opens it at
any width. One column of thirty-five links would be a page of its own
on a desktop, so the groups sit side by side where there is room. */
@media (min-width: 901px) {
/* Column widths come from the CONTENT, not from equal division.
Inventory has eighteen SHORT labels and wants two narrow columns;
Financing has five LONG ones ("Trucks & Equipment Online Credit
Approval") and wants a wide single. Four equal columns gave the
long labels no room — they broke to three and four lines each —
and handed the short ones space they had no use for. */
.menu__nav {
display: grid;
grid-template-columns: 1.75fr 1.2fr 0.95fr 1fr;
gap: var(--sp-8) var(--sp-7);
align-items: start;
}
/* Inventory carries eighteen of the thirty-four links. Left in one
column it ran three times the depth of its neighbours and dragged
the whole panel down with it. */
/* Selector raised on purpose: .menu__group is declared after this
block with the same specificity, so `display: flex` was winning on
source order and the links stayed in one column while the group
obediently spanned two. Fourth time this trap has come up here —
raise the selector, never !important. */
.menu__nav .menu__group--wide {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--sp-6);
align-content: start;
}
.menu__nav .menu__group--wide .menu__label { grid-column: 1 / -1; }
}
/* The childless entries sit as a row beneath the columns rather than as
a fifth column with nothing at its head — which would leave its links
starting a heading's height above everyone else's and read as a
misalignment rather than a decision. */
.menu__nav .menu__group--plain {
flex-direction: row;
flex-wrap: wrap;
gap: var(--sp-3) var(--sp-6);
padding-block-start: var(--sp-5);
border-top: 1px solid var(--rule);
}
@media (min-width: 901px) {
.menu__nav .menu__group--plain { grid-column: 1 / -1; }
}
.menu__group { display: flex; flex-direction: column; }
.menu__group .menu__label {
margin-block-end: var(--sp-3);
padding-block-end: var(--sp-3);
border-bottom: 1px solid var(--rule);
}
/* 17px, not 20px. At 20px the long financing labels could not hold a
line in any column arrangement that also fitted four groups across.
This is the size the reference sets its own menu at. */
.menu__nav a {
font-size: 1.0625rem;
font-weight: 400;
letter-spacing: -0.005em;
line-height: 1.35;
padding-block: var(--sp-3);
color: var(--ink-2);
transition: color var(--dur-2) var(--ease-out);
}
.menu__nav a:hover, .menu__nav a:focus-visible { color: var(--ink); }
.menu__label {
color: var(--ink-3);
margin-block-end: var(--sp-4);
}
.menu__places li {
display: flex;
justify-content: space-between;
gap: var(--sp-4);
padding-block: var(--sp-3);
border-bottom: 1px solid var(--rule);
}
.menu__places span {
font-family: var(--font-label);
font-size: var(--t-micro);
color: var(--ink-2);
}
/* ---- FITTING THE PANEL TO THE SCREEN ------------------------
The panel must not scroll. A menu you have to scroll to reach its own
links has stopped being a menu — the way out of the page becomes a
second page.
Measured at 1440x900 with the feature cards already removed: 1071px
of panel in 901px of viewport, 170px over. The whole overflow came
from two places, and both were structure rather than air.
Inventory alone .... 467px of a 602px nav. It carries 18 of the 34
links; in two sub-columns that is 9 rows, and
it set the height of the panel by itself while
its three neighbours ended 140–280px short.
Showrooms .......... 237px for four addresses, because they were
stacked. Four showrooms are a SET, not a list —
stacking them spends a fifth of the panel
saying so, and reads as four separate facts
rather than one fact with four parts.
So: Inventory goes to three sub-columns (9 rows to 6), and the
showrooms go to one row of four. Nothing is cut, no type shrinks, no
tap target moves. Measured after: 786px in 901. */
/* Inventory's sub-columns are decided by the LABEL, not by a breakpoint.
The constraint is one string: "Schedule Test Drive" measures 154.4px at
17px and is the longest in the group. Below that the row wraps, and a
wrapped row costs more height than the column saved — which is exactly
what a hand-picked 1200px breakpoint produced when it was tried: three
columns at 139px each, every third row on two lines, TALLER than two
columns had been.
So the floor goes in the track instead. `auto-fit` with a 9.7rem
minimum takes three columns wherever three fit and two where they do
not, at every width, with no breakpoint to keep in sync.
The 24px gap is not a saving either: these three are sub-columns of ONE
group, so their gap has to read as clearly tighter than the 48px
between the groups themselves. Internal gap < external gap.
auto-fit is scoped to 1200 and up on purpose. Below that the Inventory
track drops under 334px — two 155px columns plus the gap — and auto-fit
would collapse it to a SINGLE column of eighteen rows, which is worse
than the wrapping it was brought in to prevent. There it stays pinned
at two.
The four track widths are set from the longest label in each group,
measured, not divided evenly: Services needs 181.5px for "Schedule
Appointment" and had 172; About Us needs 116.8 for "Our Dealership" and
had 191. Two of the four were the wrong way round. */
@media (min-width: 1200px) {
.menu__nav { grid-template-columns: 2.7fr 1.15fr 1fr 0.8fr; }
.menu__nav .menu__group--wide {
grid-template-columns: repeat(auto-fit, minmax(9.7rem, 1fr));
}
}
@media (min-width: 901px) {
.menu__nav .menu__group--wide { column-gap: var(--sp-5); }
}
/* Rows are 39px on a desktop panel, not 47. The 24px of vertical padding
was set for a thumb; this panel opens under a mouse at every width
above 900, and 12px of it was buying nothing but height in a control
that has 34 rows. 39px still clears WCAG 2.5.8 target minimum (24px)
with room. Below 901 the touch rhythm is untouched. */
@media (min-width: 901px) {
.menu__nav a { padding-block: var(--sp-2); }
}
/* SHORT VIEWPORTS: the panel tightens rather than scrolls.
A 1280x800 laptop cannot take the full rhythm — measured at 860px of
content against 801 of viewport. Rather than let it scroll, the panel
spends its air: the clearance under the header drops to the header
plus one step, the tail padding halves, and the three bands close up.
Nothing is cut and no type moves.
Bounded to min-width 901 on purpose. A phone in portrait is often
under 900px tall too (iPhone 14 is 844), and it must NOT inherit
desktop row heights — there the panel scrolls, which is the honest
answer for 34 links under a thumb. */
@media (min-width: 901px) and (max-height: 880px) {
.menu__inner {
padding-block: calc(var(--header-h) + var(--sp-3)) var(--sp-6);
gap: var(--sp-6) var(--sp-8);
}
.menu__nav { gap: var(--sp-6) var(--sp-7); }
.menu__nav .menu__group--plain { padding-block-start: var(--sp-4); }
}
/* Second step, for the 1366x768 class of laptop — about 700px of viewport
once the browser has taken its chrome. Measured at 751px of content in
721, so the first step is not enough. The clearance under the header
goes to zero extra (the header's own height is the whole reservation,
which is all it ever needed to clear), the tail and the band gaps drop
one more step, and the group headings pull their rules in.
This is the floor. Below roughly 660px of viewport the panel scrolls,
and that is the correct answer rather than a failure: 34 links and four
showrooms do not fit in half a screen, and cutting routes or dropping
type under the 14px floor to pretend otherwise would break something
that matters more than the scrollbar. */
@media (min-width: 901px) and (max-height: 800px) {
.menu__inner {
padding-block: var(--header-h) var(--sp-5);
gap: var(--sp-5) var(--sp-8);
}
.menu__nav { gap: var(--sp-5) var(--sp-7); }
.menu__group .menu__label {
margin-block-end: var(--sp-2);
padding-block-end: var(--sp-2);
}
.menu__nav .menu__group--plain { padding-block-start: var(--sp-3); }
}
/* One row of four, with the rule above rather than below: the showrooms
read as one band closing the panel instead of four stacked entries. */
@media (min-width: 901px) {
.menu__places {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-6);
}
.menu__places li {
flex-direction: column;
align-items: start;
gap: var(--sp-2);
padding-block: var(--sp-3) 0;
border-bottom: 0;
border-top: 1px solid var(--rule);
}
}
/* ============================================================
THE SINGLE-SCREEN PAGE
Scoped to `body.page--screen`, never to the element, because
main.css is also the design system's stylesheet and design.html
is a long scrolling document that must keep its scrollbar.
============================================================ */
/* The single-screen lock is gone now that a section follows the hero.
The hero is still exactly 100dvh — the fold below it is a decision,
not an accident. */
/* The sentinel is the height of the header, pinned at the top of the
document. Once it has scrolled out of view the header has left the
hero, and that is the moment the bar condenses. Watched by
IntersectionObserver, so this costs nothing per frame. */
.scroll-sentinel {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
width: 1px;
height: var(--header-h);
pointer-events: none;
}
/* Placeholder for the next chapter. No border, no rule: the hero's
gradient already resolves to this exact colour, so there is nothing
for a divider to divide. */
.after {
min-height: 100svh;
background: var(--bg);
}
/* ============================================================
HERO
One frame, full bleed, one screen.
============================================================ */
.hero {
position: relative;
height: 100dvh;
background: var(--bg);
isolation: isolate;
overflow: hidden;
}
/* ---- Ground ------------------------------------------------
An rather than a CSS background: it can carry
fetchpriority, intrinsic dimensions and a decoding hint, and it
is the LCP element on a page that is currently nothing else. */
.hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
/* ---- Framing --------------------------------------------------
The re-saved frame carries deliberate air on every side, so the crop
is now a composition decision rather than a rescue. Three numbers,
in one place, and nothing else needs touching to re-frame:
--frame-zoom height relative to the box. 100% = the whole frame
height fits; above that it crops top and bottom.
--frame-x which part of the width stays when it overflows
--frame-y which part of the height stays when it overflows
--frame-drop how far the frame is pushed BELOW the hero's bottom
edge, as a share of the hero height. This is what
lowers the car in the composition.
They are custom properties rather than literal values so a re-frame
is one edit read as a sentence, not four unrelated numbers hidden
in a shorthand. Overriding them per breakpoint is the whole mobile
story below.
WHY --frame-drop EXISTS, AND WHY --frame-y COULD NOT DO IT.
--frame-y is inert on every ordinary viewport, which is not obvious
from reading it. `cover` only honours the vertical half of
object-position when the image OVERFLOWS vertically, and inside this
box it does not: at 1440x820 the box is 1426x1051 and the frame
scales to 1691x1051 — exactly the box height, 265px of overflow all
of it horizontal. So --frame-x does the work and --frame-y changes
nothing. It only wakes up past roughly 2:1, where the box finally
gets wider than the frame's own 1.609.
What actually decides the vertical crop is the ANCHOR: the element is
128% of the hero and pinned to its bottom, so the top 28% is what
hangs off the top edge and gets clipped. Moving the subject down means
moving that anchor, not repointing the image.
Hence the ceiling on this number, which is a real constraint and not
a preference: --frame-drop may never exceed --frame-zoom minus 100%.
Past that the frame's own top edge comes down past the hero's and the
composition opens a gap of background above the sky. Here that is 28%,
and 8% spends less than a third of it. */
.hero__photo {
--frame-zoom: 128%;
--frame-x: 54%;
--frame-y: 62%;
--frame-drop: 8%;
position: absolute;
inset-inline: 0;
inset-block-end: calc(-1 * var(--frame-drop));
width: 100%;
height: var(--frame-zoom);
object-fit: cover;
object-position: var(--frame-x) var(--frame-y);
}
/* ---- The slides --------------------------------------------
Stacked and crossfaded, never slid sideways. A horizontal slide is a
change of place; a crossfade is a change of subject, and these two
are the same car in two registers rather than two positions in a
filmstrip. It is also the only transition that costs nothing when the
thing arriving is a 21 MB video decode.
Both slides are always in the DOM and always laid out — only opacity
moves — so nothing reflows and the frame that is leaving keeps its
crop while it goes. */
.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--dur-4) var(--ease-out);
}
.hero__slide.is-current { opacity: 1; }
/* ---- The transition: the film pulls back and defocuses -----
The effect is carried ENTIRELY by the video slide, and that is a
decision rather than laziness. The photograph is the base layer and
is on screen from the first paint — blurring it in its resting state
would mean the page opens on an out-of-focus picture for however long
the film takes to arrive.
So only the film moves: it settles from 1.05 and 10px of blur as it
arrives, and lifts back out to them as it goes. Leaving, that reads
as the film receding and the frame beneath resolving into focus —
which is the sequence the hero actually is.
scale + filter on one element, both transitioned on the same 760ms
curve, so the two never separate into "it moved, then it sharpened".
Blur is the expensive half; 10px on one full-screen element for one
transition is affordable, 30px would not be. */
.hero__slide[data-slide="0"] {
transform: scale(1.05);
filter: blur(10px);
transition: opacity var(--dur-4) var(--ease-out),
transform var(--dur-4) var(--ease-out),
filter var(--dur-4) var(--ease-out);
}
.hero__slide[data-slide="0"].is-current {
transform: none;
filter: none;
}
@media (prefers-reduced-motion: reduce) {
/* No crossfade, no zoom, no defocus — a full-viewport scale-and-blur
is precisely the large-area motion the preference exists to stop. */
.hero__slide { transition: none; }
.hero__slide[data-slide="0"] { transition: none; transform: none; filter: none; }
}
/* The photograph is the BASE and never fades out — it is what everything
else is layered over.
Found by breaking it: with both slides crossfading, the opening was a
black screen. The video is transparent until playback actually starts
(see main.js), so while it waited, slide 1 was showing an empty box
and slide 2 was faded out — nothing was on screen but the hero's own
near-black ground.
Making the still the floor fixes the cause rather than the symptom.
The video sits above it and dissolves in when it is genuinely running;
choosing slide 2 simply takes the video away again. Nothing ever has
to cover a gap, because there is no gap. */
.hero__slide[data-slide="1"] { opacity: 1; z-index: 0; }
/* AND IT HAS TO BE BEHIND. Making the photograph the base fixed the
black opening but introduced a worse fault: it comes later in the DOM,
so at equal z-index it painted ON TOP and the video — playing, opaque,
reporting every sign of health — was covered by it. The state said
is-playing, the screen said photograph, and both were true.
Explicit layers rather than document order, because the order here is
meaningful in the other direction: the film is slide ONE and belongs
above the still it falls back to. */
.hero__slide[data-slide="0"] { z-index: 1; }
/* ---- The video ---------------------------------------------
Its own framing variables, not the photograph's. The still is 2301x1430
(1.61) and the video is 1920x1080 (1.78), so the same --frame-zoom
would not produce the same crop on the same screen — inheriting the
numbers would look like sharing a decision while actually making a
different one.
The video sits ABOVE the still and starts transparent. main.js fades
it in only once the browser reports it can actually play through, so
a slow connection shows the composition rather than a stalled frame,
and there is never a flash of empty video element. */
.hero__video {
--frame-zoom: 100%;
--frame-x: 50%;
--frame-y: 50%;
position: absolute;
inset: 0;
width: 100%;
height: var(--frame-zoom);
object-fit: cover;
object-position: var(--frame-x) var(--frame-y);
opacity: 0;
transition: opacity var(--dur-4) var(--ease-out);
}
.hero__video.is-playing { opacity: 1; }
/* Under reduced motion the element is removed from the picture entirely
rather than merely paused: a paused video still downloads, still holds
a decode buffer, and still shows a first frame that may not be the
frame we composed. The still is the whole hero there, and it was
built to be. */
@media (prefers-reduced-motion: reduce) {
.hero__video { display: none; }
}
/* A portrait viewport sees roughly a quarter of a 16:9 frame — measured,
26% of the width at 390x844 — so no object-position shows a whole car
and pretending otherwise gives you a wheel and a door. Recomposed
rather than cropped-and-hoped: the crop moves to the front end, where
the nose, headlight and splitter still read as a car coming at you.
The condition is the aspect ratio, not a width breakpoint, because
the aspect ratio is what actually causes it — a short landscape
window on a laptop has the same problem at a much larger width.
This is the interim answer. The real one is a portrait frame shot or
selected for the phone; a landscape original re-pointed is a repair,
not an art direction. */
@media (max-aspect-ratio: 1 / 1) {
/* --frame-drop MUST go back to 0 here. The zoom is 100% in portrait,
so there is no overhang to spend: any drop at all would pull the
frame's top edge down into the hero and open bare ground above the
sky. This is the ceiling named above, hitting its floor. */
.hero__photo { --frame-zoom: 100%; --frame-x: 60%; --frame-y: 62%; --frame-drop: 0%; }
}
/* ---- The scrim ---------------------------------------------
Dramatic is a wider tonal range, not a darker picture. So this
deepens the two ends and leaves the middle band alone: the sky goes
down at the top, the tarmac goes down at the bottom, and the strip
where the car and the mountains actually live keeps its daylight.
Flattening the whole frame with one even wash would throw away the
reason this photograph was picked.
Three gradients, each with a job:
BOTTOM is the heaviest. The tarmac was the brightest thing in the
frame and it competed with the car; taking it down lifts the car off
its own floor. It also fixes the worst-measured region of the picture
— the lower left ran to 1.58:1 against near-white — at the GROUND
layer, which is where colour I4 says legibility gets fixed, so the
claim that goes there later needs no panel behind it.
TOP is light. The sky was already the deepest part of the frame and
the masthead already cleared AA over it at 6.11:1; this is for the
frame's shape, not for the chrome.
LEFT is the asymmetry. The car sits right of centre and the left half
is empty sky, so darkening from the left builds the contrast toward
the subject instead of ringing the picture evenly. A symmetrical
vignette would read as a filter applied to a photo rather than a
composition. */
.hero__scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
/* Built from --bg-rgb — the SAME token the page ground uses — so the
bottom edge cannot drift away from the section beneath it. These
were hard-coded rgb(11,11,12); the ground then went navy and the
two would have parted by fourteen points of blue, drawing a band
exactly where the join is. A gradient whose job is to match a
colour has to be made OF that colour, not of a copy of it.
It reaches full opacity at the bottom edge, not merely dark: at
0.85 the last 15% of the tarmac still showed through and left a
faint line at the seam. The last stops sit close together so the
ramp does its work higher up and the solid strip stays thin. */
/* The 32/44% stops came up — 0.22 to 0.30 and 0.04 to 0.12 — and the
left ramp went 0.46 to 0.56. Measured reason, not taste: the
eyebrow's worst pixel sat at 3.73:1 against 4.5, and closing that
needed about 0.14 more alpha in this one band. It is spent here,
at the ground, rather than on a plate behind the type, because
colour I4 puts legibility at the background layer.
The car is not paying for it. Its body runs 41-70% up the frame
where the bottom ramp is 0.12 falling to zero, and the left ramp
darkens the empty quarter the subject is not in — which is the job
that ramp was given in the first place. */
/* FOURTH LAYER: the claim's own ground, shaped like the claim.
Added when the display went to 107px — at that size the headline
stopped living in the tarmac and started crossing the car and the
bright ground beside it, and the first line measured 1.66:1.
A horizontal band strong enough to fix that would have taken the
car's whole lower half with it. An ellipse anchored at the bottom
left does not: it is 0.27 where the first line's worst pixel sits
and 0.11 across the car's front, because the subject is outside
the block's footprint and the falloff knows it.
It is a fourth gradient in one device, not a fourth device — the
scrim is still the ground, and this is the ground being shaped for
what stands on it. */
/* FIFTH LAYER: the same thing, on the other side, for the finder.
The bottom-left ellipse was built for the claim and the claim only,
so the rail on the opposite corner has been standing on the plain
bottom ramp this whole time. Measured on the composite against the
film's brightest pixels behind the rail, its value lines came out
at 4.39:1 with --ink-2 and 3.58:1 with --ink-3 — a functional line
stating what a control is set to, under the 4.5 floor either way.
Spent here rather than on the type, for the reason already written
above: colour I4 puts legibility at the background layer. 0.30 at
the corner falling to nothing by 42% across, which lands the rail
around 0.20 and its worst pixel at 4.95:1. The car sits outside
that footprint, the same way it sits outside the claim's. */
radial-gradient(58% 62% at 100% 100%,
rgb(var(--bg-rgb) / 0.30) 0%,
rgb(var(--bg-rgb) / 0.22) 45%,
rgb(var(--bg-rgb) / 0.08) 75%,
transparent 100%),
radial-gradient(110% 95% at 0% 100%,
rgb(var(--bg-rgb) / 0.74) 0%,
rgb(var(--bg-rgb) / 0.58) 35%,
rgb(var(--bg-rgb) / 0.36) 62%,
rgb(var(--bg-rgb) / 0.12) 82%,
transparent 100%),
linear-gradient(to top,
rgb(var(--bg-rgb)) 0%,
rgb(var(--bg-rgb) / 0.97) 5%,
rgb(var(--bg-rgb) / 0.66) 17%,
rgb(var(--bg-rgb) / 0.36) 32%,
rgb(var(--bg-rgb) / 0.18) 44%,
transparent 58%),
linear-gradient(to bottom,
rgb(var(--bg-rgb) / 0.55) 0%,
rgb(var(--bg-rgb) / 0.16) 20%,
transparent 36%),
/* Raised and extended for the VIDEO, not for the still.
A photograph has one worst pixel; a moving picture has a new one
every frame, and the average lies about it. Measured under the
claim across the clip with the copy hidden: the average ground ran
12–17:1 while the WORST pixel hit 2.49:1 at the opening frame and
3.49:1 at 44s — headlights and reflections crossing exactly where
the type sits. The old stops were tuned against a single still and
had no reason to survive that.
Still the ground layer, not a panel behind the words (colour I4):
the ramp is longer and starts higher, and the picture keeps its
right-hand two thirds untouched. */
linear-gradient(to right,
rgb(var(--bg-rgb) / 0.72) 0%,
rgb(var(--bg-rgb) / 0.52) 22%,
rgb(var(--bg-rgb) / 0.28) 44%,
rgb(var(--bg-rgb) / 0.08) 64%,
rgb(var(--bg-rgb) / 0) 80%),
/* The RIGHT ramp, for the search rail. Weaker than the left one and
reaching further in, because the claim is 106px bold type that
needs less help than a 14px label does, and because a hard onset
here would be the panel edge coming back by another route.
Mirrored device, not a mirrored curve. */
linear-gradient(to left,
rgb(var(--bg-rgb) / 0.62) 0%,
rgb(var(--bg-rgb) / 0.46) 18%,
rgb(var(--bg-rgb) / 0.24) 38%,
rgb(var(--bg-rgb) / 0.07) 58%,
rgb(var(--bg-rgb) / 0) 76%);
}
/* ---- The claim, bottom left --------------------------------
Placed low and left because that is where the photograph has room:
the car sits right of centre with its mass in the upper-middle band,
and the tarmac below it is the only large quiet field in the frame.
Putting the claim there uses the picture's own empty quarter instead
of covering its subject — the type and the car are not competing for
the same ground, so neither has to be weakened for the other.
It also gives the first screen a diagonal: mark top left, car centre
right, claim bottom left. The eye enters at the identity, crosses the
subject, and lands on the sentence and the two doors.
NO PANEL, and the block was SHORTENED instead. This is the part that
had to be measured to be got right, and the first attempt was wrong.
Measured on the composite — the frame drawn with its real cover maths
and the three scrim gradients over it, sampled under the actual glyph
rects at 1440x900. First attempt, block 362px tall with its top at
y=477:
eyebrow 14px --ink-2 ....... 1.81:1 needs 4.5 FAIL
claim 81px --ink ......... 2.58:1 needs 3.0 FAIL
lede 16px --ink-2 ....... 3.86:1 needs 4.5 FAIL
All three, and the reason is structural rather than a wrong colour.
The scrim's bottom ramp is only meaningful below about a third of the
frame — deliberately, because the band where the car and the mountains
live is what the photograph was chosen for. A block 362px tall put its
own top squarely in that daylight band, on tarmac reading 152-198 per
channel.
The wrong fix was available and rejected: darkening the ramp enough to
rescue 14px type at y=477 needs about 0.78 alpha there, and the car's
front wheel and splitter sit at y=470-530. That trades the subject for
a caption. So the block lost 100px instead — smaller claim, one-line
lede, tighter stack, less bottom offset — which moves the small type
down into ground the scrim was already darkening for it, and the
eyebrow went to full --ink because at 62% it cannot clear 4.5 over
anything this photograph offers above its bottom quarter. */
/* THE LEFT EDGE IS THE WORDMARK'S, AND IT IS NOT THE GUTTER.
The mark does not sit on the gutter while the rail is packed — the
rail carries --sp-4 of its own padding on that side, so the glyph
starts 16px further in. Setting the claim to --gutter alone put it
16px to the LEFT of the mark, which reads worse than no alignment at
all: two edges that near each other look like one edge drawn twice.
Below the compact breakpoint, and once condensed, the rail drops that
padding and the mark settles onto the gutter itself — so the claim
follows it there too. Same rule, two states, one visible edge in each.
If the rail's padding changes, this has to change with it. That is the
cost of aligning to another component's inside rather than to a shared
token, and it is worth paying here because those two objects are the
only things on the frame. */
.hero__foot {
position: absolute;
z-index: 2;
/* A RIGHT gutter now, not 0. It could end at the edge while the claim
was the only thing here; the search panel lives at that end and the
brief asks for it not to be stuck to the edge. Same gutter as the
left, so the two objects sit inside one measure. */
inset-inline: var(--gutter);
/* Lifted off the bottom edge rather than sitting on it: the scrim
reaches solid --bg in its last 5%, and type inside that strip would
read as sitting on the page ground rather than on the photograph. */
/* Real air under the block now, not just clearance. The claim used to
sit close to the bottom edge; this leaves the corner open, which is
what stops a 106px headline from looking like it fell to the floor
of the frame. It is also the room the slider's controls will want. */
inset-block-end: clamp(var(--sp-7), 8vh, var(--sp-9));
}
/* The packed rail holds the mark --sp-4 in from the gutter, so the claim
goes there too. Below the breakpoint the rail drops that padding and
both fall back to the gutter, which the rule above already does. */
@media (min-width: 1391px) {
.hero__foot { inset-inline-start: calc(var(--gutter) + var(--sp-4)); }
}
/* Wide enough for the longest authored line to hold. At 44rem the box
was 704px and "worth chasing." wants ~720 at 107px, so it broke into
"worth / chasing." and the claim rendered as THREE lines — the one
thing the two spans exist to prevent. */
/* The claim and the search share the hero's foot: statement left,
search right, both lifted off the bottom edge by the same amount so
they sit on one line rather than one floating above the other.
flex-end, not centre — they are anchored to the same baseline of the
composition, which is what makes the panel read as belonging to the
hero rather than as a card dropped on it. */
.hero__foot {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-8);
}
.hero__claim { max-width: min(56rem, 100%); flex: 1 1 auto; min-width: 0; }
/* ---- The hero search rail ----------------------------------
NOT A CARD. There is no border, no radius, no panel edge and no
silhouette — the container was removed rather than softened, because
a rounded rectangle with a lighter fill is still a rectangle and the
test is whether you notice the shape before the content.
What replaces it is a CONTRAST FIELD: a semi-transparent navy wash
that exists only to make type legible over film, and that is MASKED so
it has no edge to notice. A mask is the only way to do this honestly —
backdrop-filter and background both paint to the element's box and
stop dead at it, however soft the colour is. The mask fades the field
itself to nothing before it reaches any boundary, so there is no line
anywhere for the eye to find.
No blur. It was the last thing the field needed and the first thing
that would have given it away: a blurred region has a visible
perimeter wherever the mask has not fully reached zero, which is
exactly the silhouette this is removing. The wash alone carries the
legibility — measured below.
The field bleeds well past the content on every side so the fade
happens in empty space rather than across the words. */
.hunt {
position: relative;
flex: none;
width: clamp(340px, 27vw, 390px);
padding-block: var(--sp-2);
}
/* NO FIELD OF ITS OWN. A masked wash behind the rail was tried first and
failed the brief's own test: at any strength that made the labels
legible it read as a soft rectangle with a findable edge, and the
shape arrived before the content.
The legibility comes from the FRAME instead. The scrim already carries
a left-hand ramp for the claim; it now carries a right-hand one for
the rail — see .hero__scrim. That belongs to the photograph's tonal
structure rather than to the search, so there is no object behind the
search at all, and therefore no edge to notice. It is also the same
device, in the same place, that every other piece of type on this
frame already sits on. */
.hunt__eyebrow {
/* --ink-2, not --ink-3. The third ink level is calibrated against a
SOLID ground; on a feathered wash over film it never reaches 4.5:1.
Same correction the hero eyebrow needed for the same reason. */
color: var(--ink-2);
margin-block-end: var(--sp-5);
}
/* NO BOX PER FIELD. The row is a label over a value with a hairline
under it — a spec sheet, not a form. Four bordered slots is precisely
what makes a search widget read as a booking engine. */
/* ONE LINE WHEN EMPTY, two when answered.
The label and the control occupy the SAME grid cell while nothing is
chosen, so the row reads as a single line — the category and its
chevron, nothing else. "MAKE" over "Select Make" was the category
said twice, and saying it twice is what made the rail read as a form.
The placeholder text is still in the