, so as a bare .review-lead
it lost to .review-card p below on specificity and the 17px step never rendered
at any width. Two classes beat one class + one type. */
.review-card .review-lead { /* verbatim Amazon review title, as a bold lead-in */
font-family: var(--display); font-weight: 600; font-size: 17px;
letter-spacing: -0.01em; line-height: 1.35; color: var(--ink);
margin: 0 0 8px; transition: color 0.2s ease;
}
.review-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); transition: color 0.2s ease; }
.review-card cite {
display: block; margin-top: 18px; font-family: var(--display); font-style: normal;
text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; color: var(--muted);
transition: color 0.2s ease;
}
/* On hover the card inverts to the dark navy treatment. Overrides come after the
base rules. Gated on a real pointer: on a touchscreen :hover latches after a
tap, so without this the card a reader last touched stays inverted, which in
the phone carousel below means a random navy card sitting in the track. */
@media (hover: hover) {
.review-card:hover { background: var(--navy); border-color: var(--navy); }
.review-card:hover p { color: #fff; }
.review-card:hover cite { color: var(--on-dark); }
}
/* ==========================================================================
SECTION SCAFFOLD
========================================================================== */
/* Page background rhythm. Every section takes one of four surfaces and no two
adjacent sections share one, so the page always reads as separate bands:
paper #FFFFFF default
cool #EEF3F5 neutral panel
mist #EFF8F7 teal at ~7%, the lightest tinted surface
wash #D6EAE7 pale teal panel, the strongest surface teal gets
teal #00A49B flooded, at most once per page (products: the spex band)
navy #10293A the dark end, from the logo blue (footer, inverted cards)
Home alternates paper / mist strictly from the pillars down, then closes on
cool. Teal at surface scale stays at the lightest tint and none of it is
flooded. */
/* Two section surfaces, and only two: paper and the teal mist. --cool was the
third, but at L* 95.5 against mist's 96.9 it was a 1.03 contrast ratio away
from it, the same value in a different hue, so stacking the two read as an
inconsistency rather than a change of surface. Grey now lives only inside
components (card heads, the PDP stage, chips), where it never meets mist.
Sections alternate paper and mist down the page; a section takes whichever
one the section above it isn't. */
.section { padding-block: clamp(64px, 9vw, 110px); }
/* A mist band is bounded on both edges, not just the one it opens on: the teal
hairline draws where the surface changes, and it changes twice. Without the
bottom rule the band trailed off into paper on a 1.03 contrast step, which
read as the mist fading rather than ending. The exception is a mist band that
closes the page, where the navy footer is already the harder edge. */
.section--mist { background: var(--teal-mist); border-block: 1px solid var(--hair-teal); }
main > .section--mist:last-child { border-bottom: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(40px, 6vw, 56px); }
.sec-head h2 { max-width: 20ch; margin-top: 14px; }
/* ---- logo wordmark treatment (GIANT blue + CLEAN teal, per the logo) ------ */
.wordmark { letter-spacing: 0; white-space: nowrap; }
.wordmark__giant { color: var(--logo-blue); }
.wordmark__clean { color: var(--teal); }
/* ---- "Why GIANTCLEAN" — three cards --------------------------------------
Replaces the earlier ledger (three horizontal rows in a two-column grid).
The ledger read as a spec table: the rows scanned all at once, the left
column sat half empty under a 15ch title, and the pillar titles outranked
the section header.
Each pillar is now a card whose top third is a tinted block carrying the
eyebrow and the title, with the body copy below on paper. That block is
what stops three text cards from reading as a generic three-column feature
grid: it gives every card a top edge and an internal division.
Every title is set to two lines via a
in the markup, so the three
tinted blocks are the same height on their own. That is why nothing here
forces alignment — an earlier pass used a min-height plus space-between to
match the heads, which is what pushed the eyebrow and title far apart.
No 01/02/03. The pillars are parallel claims, not a sequence, so numbering
them implies an order that isn't there.
------------------------------------------------------------------------- */
.why { padding-block: clamp(64px, 8vw, 104px); }
.why__head { margin-bottom: clamp(38px, 5vw, 56px); }
/* a step above the card titles (48px against 26px at 1440px) so the section
header leads. Weight and tracking stay on the site's own heading values. */
.why__h {
font-family: var(--display); font-weight: 400; letter-spacing: -0.02em;
line-height: 1.02; font-size: clamp(2.1rem, 3.6vw, 3rem); margin: 0;
display: flex; align-items: baseline; gap: 0.28em; flex-wrap: wrap;
}
/* The real wordmark replaces the typed one here. logo-wordmark.png is the
letters cropped tight out of the full lockup, no aperture mark: at heading
scale the icon outweighed the line.
Baseline alignment, not centring: a replaced element's baseline is its
bottom edge, and the crop has no padding under the letters, so the logo's
baseline sits on the heading's by construction at any size. That leaves
height free to be set optically. 0.78em runs a touch over Outfit's cap
height (0.68em) because the logo's strokes are lighter and its letters
wider, so a literal cap match reads smaller than the word beside it. */
.why__logo { height: 0.78em; width: auto; }
/* runs the full width of the card row below, tying the header to the boxes */
.why__rule { width: 100%; height: 1px; background: var(--teal); margin-top: 24px; }
.why__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
/* The card is drawn, not floated: a hairline box on the white field, with the
title zone filled in --cool so each card reads as a header over a body rather
than one undivided block. The borderless version only worked while the
section sat on the mist, where the tint supplied the edge; back on paper the
outline is what makes the three cards a set. */
.why__card {
background: var(--paper); border: 1px solid var(--hair);
display: flex; flex-direction: column;
}
.why__card-head {
background: var(--cool); border-bottom: 1px solid var(--hair);
padding: clamp(22px, 2vw, 30px);
display: flex; flex-direction: column; gap: 14px;
}
.why__eyebrow {
font-family: var(--display); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; color: var(--teal-deep);
}
.why__title {
font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.16;
font-size: clamp(1.35rem, 1.7vw, 1.6rem); color: var(--ink); margin: 0;
}
.why__body { padding: clamp(22px, 2vw, 30px); display: flex; flex-direction: column; flex: 1; }
.why__body p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }
/* "Meet Emily Zhu" uses the shared .tlink, so it carries the buttons' exact
type: Outfit 500, 12px, uppercase, 0.09em. It sits at the bottom of its
card, pushed there by the paragraph above it. */
.why__body .tlink { margin-top: auto; padding-top: 20px; align-self: flex-start; }
@media (prefers-reduced-motion: reduce) {
.tlink__arrow { transition: none; }
.tlink:hover .tlink__arrow { transform: none; }
}
/* ---- microfiber difference (clinical comparison) ------------------------ */
.diff .wrap { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(30px, 5vw, 68px); align-items: start; }
.diff__copy p { color: var(--muted); margin-top: 16px; }
.diff__copy .h2 { margin-bottom: 4px; }
.cmp { border-top: 1px solid var(--ink); }
.cmp__row { display: grid; grid-template-columns: 30px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--hair); }
.cmp__mark { font-family: var(--display); font-weight: 600; font-size: 15px; }
.cmp__row--us .cmp__mark { color: var(--teal-deep); }
.cmp__row--them .cmp__mark { color: var(--muted); }
.cmp__row h4 { font-family: var(--display); font-weight: 500; font-size: 1.1rem; letter-spacing: -0.01em; }
.cmp__row p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-top: 4px; }
/* ---- color rail ----------------------------------------------------------
The colors are a parade, not a grid: the pillars and reviews above answer
"why", and this section answers "which". A swipeable strip, CTA below.
------------------------------------------------------------------------- */
/* Plain paper: the colour rail is where the product's own colours perform, so
the field under them stays neutral and the only structure is the teal-tinted
hairline grid of the rail itself. The cards carry no fill of their own (see
.cc), so the white field runs unbroken behind the parade. */
.colors {
background: var(--paper); border-top: 1px solid var(--hair-teal);
padding-block: clamp(56px, 8vw, 96px);
display: grid; gap: clamp(32px, 4.5vw, 52px);
}
.colors .sec-head { margin-bottom: 0; justify-content: center; text-align: center; }
.colors__rail {
overflow: hidden;
border-block: 1px solid var(--hair-teal);
}
/* Four identical copies of the color set, so one loop is a -25% shift. Duration
holds the old pace (~37px/s) over the shorter 5-card distance. */
.colors__track {
display: flex; width: max-content;
animation: colors-marquee 30s linear infinite;
}
@keyframes colors-marquee {
from { transform: translateX(0); }
to { transform: translateX(-25%); }
}
.colors__track .cc { flex: 0 0 clamp(168px, 19vw, 224px); border-right: 1px solid var(--hair-teal); }
.cc { padding: 24px 14px; text-align: center; }
.cc__img { aspect-ratio: 1; display: grid; place-items: center; }
.cc__img img { width: 84%; filter: drop-shadow(0 12px 16px rgba(22, 30, 34, 0.14)); }
/* No per-photo alignment here any more. The five shots each came off the camera
at a different distance and angle, and that correction is now baked into
assets/img/product-*.png by tools/build-products.py, so every product photo
arrives already level, already the same size, and already on a shared
baseline. Nudging one in CSS would double-correct it. */
@media (prefers-reduced-motion: reduce) {
.colors__track { animation: none; }
.colors__rail { overflow-x: auto; }
}
.colors__cta {
padding-inline: var(--gutter);
display: flex;
justify-content: center;
}
.colors__cta .btn {
font-weight: 700;
font-size: 13px;
padding: 18px 40px;
}
/* ---- wholesale -----------------------------------------------------------
Sits on the teal mist. It's the one section addressed to shops rather than
skaters, so it gets its own surface instead of continuing the grey of the
colour rail above it.
Two columns: the question holds the left, the answer and the action sit
together on the right. Nothing is drawn between them. The band's own edge and
the column gap carry the structure that the numbered 01/02/03 list used to.
------------------------------------------------------------------------- */
.wholesale .wrap {
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px);
align-items: start;
}
.wholesale h2 { max-width: 13ch; margin-top: 10px; }
/* --muted-wash, not --muted: on the mist surface the standard grey only reaches
3.5:1 and fails AA, so this is the same role tuned for a tinted background. */
.wholesale__side p { color: var(--muted-wash); font-size: 18px; max-width: 44ch; }
.wholesale__side .btn { margin-top: 28px; }
/* ---- final CTA ----------------------------------------------------------
One component, same shape on every page that closes with it. Only the copy,
the destination, and the surface change. The surface is set per page by the
alternation rule: add section--mist when the block above the close is paper
(Products), leave it off when the block above is mist (Home, About), where the
mist band's own bottom hairline is what separates it from the close:
, so .cta-final p catches it: that rule is 0-1-1 and wins on specificity over the line above no matter which comes last in the file, and it would hand a one-line alt link the 40ch measure and centred auto margins meant for a paragraph of body copy. In the left-aligned --ask variant that centred a 40ch block inside a full-width wrap, which is why the override is scoped to at least the same specificity and the axis is reset for --ask. */ .cta-final p.cta-final__alt { margin: 26px auto 0; max-width: none; font-size: 16px; } .cta-final--ask p.cta-final__alt { margin-inline: 0; } @media (max-width: 1040px) { /* One column. The stage is already full-bleed by construction now, so it just stops being a grid column and hands its side edge to a bottom rule. padding-right goes back to 0: stacked, the section's right gutter would hold the stage that far off the edge instead of letting it bleed, so the gutter moves onto the buy column, which is the only thing that still needs one. */ /* Stacked, the photo joins the buy column's sequence instead of sitting above it, so the whole section becomes one flex column and the two wrappers step out of the way with display:contents. That flattens the buy column's children into siblings of the stage, which is what lets the order below interleave them: `order` only reaches siblings, and the colour row has to land directly under the photo it controls. Reading order is the point here. On a phone the chips used to sit ~600px below the shot, so changing colour meant scrolling back up to see what changed. */ .pdp { display: flex; flex-direction: column; min-height: 0; padding-right: 0; } .pdp__infocol, .pdp__info { display: contents; } /* The gutter as margin, not padding: these blocks carry the rail's hairlines, and padding would leave the rules running to the screen edge under the text. */ .pdp__info > * { margin-inline: var(--gutter); } .pdp__info > .lbl { order: 1; margin-top: clamp(30px, 5vw, 44px); } .pdp__info > h1 { order: 2; } .pdp__info > .pdp__price { order: 3; } /* The price sits directly under the product name here, where on desktop the lede separates them. Its own clamp floors at 1.9rem, within 2px of the h1's cap at this width, so the two read as one tier instead of a name and its price. Held near h1/1.45 across the stacked range. */ .pdp__amount { font-size: clamp(1.35rem, 5.6vw, 1.75rem); } .pdp__stage { order: 4; } /* No ink head on the colour rail here. It reads as the rail's opening rule on desktop, but stacked it lands just under the photo band's own bottom edge and the two rules stack up doing one job. The band's edge is the head now, so the rail keeps only the hairline under its row. */ .pdp__info > .pdp__quick--buy { order: 5; margin-top: clamp(22px, 3.4vw, 28px); border-top: 0; } .pdp__info > .pdp__lede { order: 6; } /* No ink head either, matching the colour rail. Stacked, the rows are the only structure the rail needs: the teal label opens each one and the hairline under it closes it. The ink rules were doing desktop's job of heading a column, and on a phone they read as arbitrary black lines across the copy. */ .pdp__info > .pdp__quick--specs { order: 7; margin-top: clamp(24px, 4vw, 32px); border-top: 0; } .pdp__info > .pdp__cta { order: 8; margin-bottom: clamp(36px, 6vw, 56px); } /* A tinted band between two stretches of paper, so it takes a rule on both edges rather than just the one it needed when it was the section's top. */ .pdp__stage { border-right: 0; border-block: 1px solid var(--hair-teal); margin-top: clamp(26px, 4vw, 34px); } /* 82%, not 56%. The percentage only matters once it falls under the 380px cap, which happens below a ~519px viewport, so nothing from here to 1040 moves. Below that the old 56% left the product at 187px on a 390px phone, under half the screen, ringed by mist. The photo is the page's opening statement. */ .pdp__figure { width: min(82%, 380px); } /* The rail is a desktop structure. Below this the band is one column: title over summary, marker still flush right, and the panel drops its indent. */ .spex__sum { grid-template-columns: minmax(0, 1fr) 26px; gap: 10px 20px; } .spex__title { grid-column: 1; } .spex__sumline { grid-column: 1; } .spex__mark { grid-column: 2; grid-row: 1 / span 2; } .spex__panel { padding-left: 0; } .spex__steps { grid-template-columns: 1fr; gap: 28px; } .spex__steps p { max-width: 48ch; } } @media (max-width: 680px) { .spex__sum { gap: 8px 16px; } /* The rail becomes label over value. Below the breakpoint the vw term in the h1 is dead, so it sat at its 36.8px floor and ran to five lines at line-height 1; the cap here equals that floor, so the size is continuous across 680, and the tracking loosens because -0.025em is a correction for display sizes. */ .pdp h1 { font-size: clamp(2rem, 8.4vw, 2.3rem); line-height: 1.06; letter-spacing: -0.02em; } .pdp__quick li { grid-template-columns: 1fr; gap: 3px; } /* The 5px nudge on the buy rail's label is an optical fix for the side-by-side row. Stacked, it eats the whole 3px gap and drops COLOR onto its own value. */ .pdp__quick--buy > li:first-child { padding-block: 16px 20px; } .pdp__quick--buy > li:first-child b { top: 0; } /* 44px targets. Five chips plus their gaps still run 260px against the 276px of content a 320px phone leaves, so the row holds one line. */ .chip { width: 44px; height: 44px; } /* "Size guide" is a button.tlink: 12px type on 4px of padding, so under 20px tall. Its underline is a border-bottom, so padding would detach the rule from the text. The hit area grows on a pseudo-element and the type stays put. */ .pdp__cta .tlink { position: relative; } .pdp__cta .tlink::after { content: ""; position: absolute; inset: -14px -10px -12px -10px; } /* The modal at phone width: 48px of inset plus 32px of padding left 208px of content on a 320px screen. Less inset, less padding, and the top clears the close button now that it's a 44px target. */ .sizemodal__panel { width: calc(100% - 32px); margin-top: clamp(24px, 6vh, 64px); max-height: calc(100svh - clamp(24px, 6vh, 64px) - 24px); padding: 44px 22px 30px; } .sizemodal__close { top: 10px; right: 10px; width: 44px; height: 44px; } .sizetable th, .sizetable td { padding: 18px 0; } .sizetable tbody th { width: 40%; } /* The bar exists only here. .has-buybar goes on
once at setup, not on the is-up class, for two reasons: the footer reserves the bar's height from load so revealing it never reflows the page under the reader's thumb, and the footer is shared, so the four pages without a bar keep their normal padding. */ .buybar { display: block; } body.has-buybar .site-footer { padding-bottom: 96px; } } /* ========================================================================== ABOUT — one essay, no sections The founder story is the whole page: title, deck, body, nothing else. The founder facts live on Contact and in the footer, so nothing is repeated here. Everything is carried by the type. One reading column held to the left with open margin, matching how the rest of the site aligns. ========================================================================== */ .essay { /* the teal mist, not paper: About is a single continuous read with no bands to alternate, so the page takes one surface end to end and the tint is what makes it read as a piece rather than as an untreated document. Mist is the lightest tinted surface, so it stays quiet under a long body of prose. */ background: var(--teal-mist); /* the bottom is tighter than the top: the CTA band that follows brings its own padding and a surface change, so the piece doesn't need to trail off */ padding-block: clamp(72px, 10vw, 148px) clamp(72px, 9vw, 124px); } .essay__head { margin-bottom: clamp(40px, 5vw, 64px); } .essay h1 { font-weight: 500; letter-spacing: -0.03em; line-height: 0.98; /* The floor is the hero's floor, 3.4rem. Both are the first line of a page and the only headline on their screen, so a phone shouldn't get a smaller one here than it gets on Home. The vw term is dead below ~907px, which means the floor is what the whole phone-and-tablet range renders at. */ font-size: clamp(3.4rem, 6vw, 5.2rem); margin-top: 24px; max-width: 20ch; text-wrap: balance; } /* Deck and body share one column width rather than each capping at its own ch measure, so the two blocks agree on a left and right edge. Sized in px for that reason: a ch cap would land differently at each font size. */ .essay__col { max-width: 760px; } /* the deck: one paragraph of display type standing in for a standfirst, then everything below settles into a single body size and stays there. The whole paragraph carries the colour: saturated teal on type, never on a word inside a sentence. No rule under it. The page is one continuous read with no sections, and the teal-to-ink shift already marks the turn from standfirst to body, so a hairline doing the same job was the one element arguing with the premise. The gap below is deliberately smaller than the old rule's clearance: at the full clamp(38px, 5vw, 58px) on both sides, the 116px with nothing in it read as a hole rather than as breathing room. */ .essay__deck { font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 2.3vw, 1.9rem); line-height: 1.36; letter-spacing: -0.02em; color: var(--teal-deep); } .essay__body { margin-top: clamp(30px, 3.2vw, 42px); /* see the note on .essay__deck */ /* a real reading size, larger than the site's default body, on a measure tuned for continuous prose rather than for a card or a column */ font-size: clamp(1.1rem, 1.45vw, 1.25rem); line-height: 1.75; } .essay__body p { text-wrap: pretty; } .essay__body p + p { margin-top: 1.35em; } @media (max-width: 680px) { /* "I’m Emily Zhu." is a .nb, so it can't wrap out of trouble: at the 3.4rem the base rule holds down to here it runs 303px, and a 320px phone leaves 276px of content. So the vw term comes back for the narrow end only. It reaches the 3.4rem cap at 363px, which means every phone from an iPhone SE up renders the full size and only the 320px class steps down, to 48px. Continuous across the breakpoint: the cap equals the size at 681px. */ .essay h1 { font-size: clamp(2.75rem, 15vw, 3.4rem); } .essay__body { line-height: 1.68; } } /* ========================================================================== WHOLESALE (page) The one page addressed to shops rather than skaters, and the only one with no product photography: a buyer wants the terms, not another studio shot, and there is no shop-facing imagery to use. So the page is carried by type and by the hairline rail, and its single visual moment is the five real microfiber crops sitting inside the spec rail, which is also the most useful thing a buyer looks at. Surfaces run mist / paper / mist / paper down the page. ========================================================================== */ /* ---- hero ---------------------------------------------------------------- One left column, the same shape the About essay head takes: headline across the measure, supporting copy beneath it. Not the two-column split the Home wholesale teaser uses, which is where this started. The headline is why. "A proven skate-care essential" needs about 690px at the hero size, and half of the wrap is 552px, so in a two-column hero it broke after "skate-care" and left "essential" alone on its own line. The only sizes that fit that phrase into half a wrap are under 2.8rem, which puts the hero headline level with the section heads and flattens the page's type ladder. Given the full measure the line fits at 4.4rem, and on a page with no photography the type is the only thing that can carry the first screen. Contained, not the 100svh the Home and Products heroes take. The rail below is the most valuable thing on the page, so the first screen has to reach it. ------------------------------------------------------------------------- */ .whero { background: var(--teal-mist); border-bottom: 1px solid var(--hair-teal); padding-block: clamp(64px, 8vw, 104px); } .whero h1 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.0; font-size: clamp(2.5rem, 5.2vw, 4.4rem); margin-top: 22px; max-width: 24ch; } /* --muted-wash, not --muted: on the mist the standard grey only reaches 3.5:1 */ .whero__side { margin-top: clamp(32px, 4vw, 44px); } .whero__side p { color: var(--muted-wash); font-size: 18px; line-height: 1.62; max-width: 52ch; } .whero__actions { display: flex; align-items: center; gap: 20px 24px; margin-top: 30px; flex-wrap: wrap; } /* ---- wholesale at a glance ---------------------------------------------- The label rail at page scale, the same grammar the Products accordion rows and the Contact detail list use: term left inside --rail-page, value right, hairline between rows, opening on the solid ink rule. Five terms that a buyer scans in one pass, in one column each, so nothing has to be hunted for. ------------------------------------------------------------------------- */ .glance__list { border-top: 1px solid var(--ink); margin: 0; } .glance__row { display: grid; grid-template-columns: var(--rail-page) minmax(0, 1fr); /* baseline, not start: the term and the value are different sizes, so matching their box tops would leave their first lines a few px apart */ align-items: baseline; gap: 24px; padding-block: clamp(22px, 2.8vw, 32px); border-bottom: 1px solid var(--hair); } /* matched to .spex__title, so the site's two page-scale rails agree on the size of a term. Ink, not teal: the terms are this section's structure, not accent. */ .glance__row dt { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; font-size: clamp(1.2rem, 1.55vw, 1.4rem); color: var(--ink); margin: 0; } /* matched to .spex__sumline for the same reason, but on a wider measure: that one is a lead-in sitting beside an accordion marker, and this one is the whole value of the row. At 52ch the longest of the five broke to a second line, which turned a list built to be read in one pass into five two-line paragraphs. 68ch holds every value on one line, so the rail scans as five rows, not ten. */ .glance__row dd { color: var(--muted-wash); font-size: 15.5px; line-height: 1.6; max-width: 68ch; margin: 0; } /* The swatches are the .chip from the buy box with the interaction taken out: no cursor, no hover, no ring. Each one is a crop of the real product photography, so the row shows the microfiber pile itself rather than a flat hex circle. Decorative by construction, the row's own value text names all five colors, so the markup hides them from assistive tech. */ .glance__colors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .glance__sw { width: 40px; height: 40px; border: 1px solid var(--hair); background-color: var(--cool); background-position: center; background-size: cover; background-repeat: no-repeat; } /* ---- how it works ------------------------------------------------------- Numbered, because this one actually is a sequence: you cannot build an assortment before you have the pricing. Same test that keeps 01/02/03 on "How to use it" and keeps numbering off the pillars. The difference from that block is the rule. There, each step carries its own top hairline with a gap either side, because the steps sit inside an accordion panel. Here the process is the whole section, so the four rules abut into one unbroken line running gutter to gutter and the numbers read as stops along it. That is what the gap:0 is for: the columns are opened by padding-right on each step instead of by a grid gap, so the rules meet. ------------------------------------------------------------------------- */ .works__track { /* the ul reset doesn't reach an ol, and the numbers are already drawn by .works__num, so the native markers have to go explicitly */ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .works__step { border-top: 1px solid var(--hair-teal); padding: clamp(26px, 3vw, 34px) clamp(20px, 2.6vw, 40px) 0 0; } .works__step:last-child { padding-right: 0; } /* A step below the three-up titles on Products. Four columns inside the wrap leaves ~254px of text, and at the shared 1.85rem "Build your assortment" was the only title to take two lines, which pushed one body copy out of step with the other three. Sized so all four titles set on one line instead. */ .works__step h3 { font-size: clamp(1.2rem, 1.5vw, 1.45rem); line-height: 1.14; } /* --muted-wash on the mist, which is the one thing this can't share with .spex__steps p: that block sits on paper, where --muted clears AA */ .works__step p { margin-top: 12px; color: var(--muted-wash); font-size: 15.5px; line-height: 1.6; } @media (max-width: 1040px) { /* two up, and the rules still abut across each pair */ .works__track { grid-template-columns: 1fr 1fr; } .works__step:nth-child(2n) { padding-right: 0; } .works__step:nth-child(2n + 1) { padding-right: clamp(20px, 2.6vw, 40px); } } @media (max-width: 900px) { /* the rail is a desktop structure: stacked, the term sits over its value and the row keeps only the hairline between them, like .pdp__quick on a phone */ .glance__row { grid-template-columns: 1fr; gap: 8px; } } @media (max-width: 680px) { .works__track { grid-template-columns: 1fr; } /* the :nth-child selector has to be repeated, not just overridden by the plain class: the 1040px rule above is still in force at this width and outranks a bare .works__step on specificity */ .works__step, .works__step:nth-child(2n + 1) { padding-right: 0; } } /* ========================================================================== FOOTER (shared) ========================================================================== */ .site-footer { background: var(--navy); color: #fff; padding-block: clamp(56px, 7vw, 84px) 30px; } .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(28px, 5vw, 56px); padding-bottom: 44px; border-bottom: 1px solid var(--hair-dark); } .footer-brand img { height: 24px; margin-bottom: 20px; filter: brightness(0) invert(1); } .footer-brand p { color: var(--on-dark); font-size: 14.5px; max-width: 32ch; } .footer-col h5 { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; color: rgba(255,255,255,0.5); margin: 0 0 16px; font-weight: 600; } .footer-col a, .footer-col p { display: block; color: var(--on-dark); font-size: 14.5px; padding-block: 6px; } .footer-col a:hover { color: var(--teal); } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 26px; } .footer-bottom span { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px; color: rgba(255,255,255,0.5); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 960px) { /* stack, but keep the hero filling the whole small screen (panel takes the remaining height) */ .hero .wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: calc(100svh - var(--header-h)); } .hero__l { padding-bottom: clamp(36px, 6vw, 64px); max-width: none; } .hero__panel { border-left: 0; border-top: 1px solid var(--hair); min-height: 340px; margin: 0 calc(var(--gutter) * -1); } .diff .wrap { grid-template-columns: 1fr; } /* Both grids of .why__card break together: the pair inside the Products accordion is the same component as Home's pillars, and holding it 2-up to 680 left two ~300px cards through the whole tablet band. */ .why__cards, .spex__cards { grid-template-columns: 1fr; } /* stacked, the cards are full width and there's nothing left to align to, so the forced two-line title break would just look arbitrary */ .why__title br { display: none; } .wholesale .wrap { grid-template-columns: 1fr; } /* minmax(0, …) not 1fr: a bare 1fr track floors at min-content, and on phones this column holds the reviews carousel — a nowrap flex row whose min-content width is the sum of all ten cards. That floor dragged the track to 1492px and took the whole page horizontal. */ .reviews__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 44px); } .reviews__stat { position: static; } .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: span 2; } } @media (max-width: 680px) { /* ---- header: two-tier fallback ---------------------------------------- What renders with scripting off. The header splits into two tiers rather than dropping the nav: logo on top, the five links spread across a second row under a hairline that matches the header's own bottom rule. All five labels sit on one line down to a 320px phone, where only 276px of content width is left, which is what forces the ~10px size and the tracking drop from the brand's 0.16em. Legible enough to be reachable, not good enough to be the design: the .js block below replaces it with the disclosure menu. --header-h keeps every 100svh section in step with the tier count. */ :root { --header-h: 116px; } .site-header .wrap { flex-direction: column; align-items: stretch; justify-content: center; gap: 0; } .brand { display: flex; align-items: center; height: 64px; } .nav { border-top: 1px solid var(--hair-teal); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .nav__list { justify-content: space-between; align-items: center; gap: 6px; height: 52px; } .nav a { font-size: clamp(9.75px, 2.75vw, 10.5px); letter-spacing: 0.07em; } /* ---- header: disclosure menu (enhanced) ------------------------------- .js is set by assets/js/nav.js before first paint. html.js is (0,1,1) and beats the :root rule above at (0,1,0), so the header collapses back to one 64px row and the links move into an overlay panel at a readable 16px with 48px rows. This is what phones actually get; everything above is the no-script floor. */ html.js { --header-h: 64px; } .js .site-header .wrap { flex-direction: row; align-items: center; justify-content: space-between; } .js .brand { height: auto; } .js .nav { border-top: 0; margin-inline: 0; padding-inline: 0; position: static; } /* Bars only, no label: the icon is the one thing in the header that has to read as a control, so it carries the teal instead of a word. */ .js .nav__toggle { display: flex; align-items: center; justify-content: flex-end; /* 44px of target in both axes, with the bars ending on the same gutter line the logo starts from */ min-height: 44px; min-width: 44px; padding: 0; appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; color: var(--teal-deep); } /* three hairlines, the same 1px the rest of the header is drawn with */ .js .nav__bars { position: relative; display: block; width: 20px; height: 2px; background: currentColor; } .js .nav__bars::before, .js .nav__bars::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; transition: transform 0.18s ease, top 0.18s ease; } .js .nav__bars::before { top: -6px; } .js .nav__bars::after { top: 6px; } /* open: the outer bars close into an X and the middle one gets out of the way */ .js .nav--open .nav__bars { background: transparent; } .js .nav--open .nav__bars::before { top: 0; transform: rotate(45deg); } .js .nav--open .nav__bars::after { top: 0; transform: rotate(-45deg); } .js .nav__list { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 21; /* over the sticky header's own 20 */ /* align-items/justify-content are reset explicitly: the fallback rule above sets them for a centred 52px row, and left in place they shrink-wrap each link and centre it instead of running it to the gutter */ flex-direction: column; gap: 0; height: auto; align-items: stretch; justify-content: flex-start; background: var(--paper); border-bottom: 1px solid var(--hair-teal); padding-inline: var(--gutter); box-shadow: 0 14px 24px rgba(22, 30, 34, 0.08); } .js .nav--open .nav__list { display: flex; } .js .nav__list li + li a { border-top: 1px solid var(--hair); } .js .nav a { display: block; padding-block: 14px; /* 48px rows */ font-size: 16px; letter-spacing: 0.12em; } /* ---- hero ------------------------------------------------------------- */ /* Centred on phones only. The desktop hero is a two-column split where the copy holds a left axis against the product panel; stacked, there is no second column to hold that axis and the product below is centred in its own panel, so a left rag reads as off-centre from it. align-items does the work for the block-level children (.hero__l is a flex column) and text-align for the lines inside them. */ .hero__l { align-items: center; text-align: center; } .hero__sub { margin-inline: auto; } .hero__cta { justify-content: center; } /* ---- centred heading blocks (phones) ---------------------------------- Every section that leads with an eyebrow-and-heading pair centres to match the hero, so the page reads on one axis instead of alternating. The close and the colour rail were already centred at every width, so this brings the three that weren't into line. The measures that were capped in ch need margin-inline to actually sit centred rather than just having centred text. Card interiors stay left: .why__card and .review-card are multi-line body copy, and a centred rag there costs more than the symmetry is worth. */ .why__head { text-align: center; } .why__h { justify-content: center; } .reviews__stat { text-align: center; } .reviews__score { justify-content: center; } .reviews__meta { margin-inline: auto; } /* scoped to the two teaser columns, which are Home-only: the bare .wholesale class also sits on sections of the Wholesale page itself */ .wholesale__copy { text-align: center; } .wholesale__copy h2 { margin-inline: auto; } .wholesale__side { text-align: center; } .wholesale__side p { margin-inline: auto; } /* The glass pane dissolves here. On desktop it is a column of its own holding an annotated product, and the callout labels sit outside the photo in the gap beside it. Stacked on a phone there is no gap to put them in, so the labels come down into a row underneath and the pane has nothing left to be: its hairline, its own white surface and its 340px floor turned the product into a separate band with one object floating in the middle of it. Without them the photo sits straight on the hero's field and the spec row gives it something to be next to. The leader lines stay off, having nothing left to point at. */ .hero__panel { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 0; box-shadow: none; min-height: 0; padding-bottom: clamp(30px, 8vw, 52px); } .hero__l { padding-bottom: 10px; } .leaders { display: none; } /* photo across the top, the three specs as columns under it */ .prod { width: min(90%, 360px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 10px; align-items: start; } /* The photo steps in from the grid's full width while the spec row keeps it: the three columns need every pixel to hold their values on one line at 320px, so the image is narrowed rather than .prod itself. */ .prod > img { grid-column: 1 / -1; width: min(86%, 310px); justify-self: center; } /* sized for a product centred in a tall pane; under a grid it reads as a smudge */ .prod::after { display: none; } /* the callouts stop being callouts: no anchor to the photo's edges, no vertical centring on a leader line that no longer exists */ .cal { position: static; transform: none; text-align: center; } .cal b { font-size: 9.5px; letter-spacing: 0.1em; margin-bottom: 3px; } .cal span { font-size: 12px; } .colors__track .cc { flex: 0 0 40vw; } /* the marquee runs ~8x the viewport wide and never stops, so keep it on its own compositor layer rather than repainting the band */ .colors__track { will-change: transform; } /* one column of phone width isn't wide enough to hold the accent phrase on its own line, so these headings go back to reflowing */ .cta-final h2 br, .whero h1 br { display: none; } /* ---- reviews: sideways carousel --------------------------------------- The vertical well was a 440px nested scroller holding ten full-length reviews across nearly the full width, which left almost no page gutter to swipe past it. Here the same ten cards become one snapping row instead, so a vertical swipe always belongs to the page and a horizontal one to the reviews. display:contents dissolves the two column wrappers so the cards become flex items of the track directly, which is why this needs no markup of its own. */ .reviews__masonry { display: flex; gap: 16px; align-items: start; min-width: 0; } .reviews__col { display: contents; } .reviews__scroll { max-height: none; min-width: 0; /* see the minmax note in the 960 block */ /* overflow-y stays hidden rather than visible: with one axis scrollable a computed `visible` would become `auto` and add a stray vertical bar. The block padding is the focus ring's room, since hidden would clip it. */ overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; /* The snapport is the scrollport, and padding is not part of it: without this the first card's start edge snaps to the viewport edge, which scrolls the gutter away and lands the card flush against it. scroll-padding insets the snapport to match the padding so the cards snap onto the gutter instead. */ scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; /* don't chain the swipe to the page */ padding: 4px var(--gutter); margin-inline: calc(var(--gutter) * -1); /* full-bleed track, cards on the gutter */ scrollbar-width: none; } .reviews__scroll::-webkit-scrollbar { display: none; } /* 86%, so the next card always peeks: that edge is the affordance, in place of the dots a carousel would otherwise need JavaScript to keep in sync */ .review-card { flex: 0 0 86%; scroll-snap-align: start; scroll-snap-stop: always; } /* the fade was built for a vertical well */ .reviews__well::after { display: none; } /* ---- micro-type and tap targets --------------------------------------- The smallest labels get a step up, and the heavily tracked ones lose some letter-spacing: at 11px the tracking costs more legibility than the size does. Link targets come up to the 44px floor. */ .review-card cite, .footer-bottom span { font-size: 11px; } .lbl, .why__eyebrow, .footer-col h5 { letter-spacing: 0.14em; } .tlink { display: inline-block; padding-block: 13px 12px; } /* 45px target */ .footer-col a, .footer-col p { padding-block: 11px; } /* ---- footer ----------------------------------------------------------- */ .footer-top { grid-template-columns: 1fr; } .footer-brand { grid-column: span 1; } } :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } /* --teal is only 2.9:1 on the mist and 2.6:1 on the wash, under the 3:1 a focus indicator needs. Same hue a step darker on the two tinted surfaces. */ .colors :focus-visible, .reviews :focus-visible, .wholesale :focus-visible, .whero :focus-visible, .works :focus-visible { outline-color: var(--teal-deep); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }