, not the
itself - a flex display on
the | directly overrides its default `display: table-cell`, which
drops the .admin-table td rule's vertical-align and skews that column's
width/border behaviour relative to the others. */
.cart-product { display: flex; align-items: center; gap: var(--s-3); }
.cart-product img { border-radius: var(--r-sm); background: var(--tile); }
.cart-table input[type="number"] { width: 72px; border-radius: var(--r-sm); }
.cart-totals {
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
gap: var(--s-6); margin-top: var(--s-6);
}
.cart-totals dl {
display: grid; grid-template-columns: auto auto; gap: var(--s-1) var(--s-5);
margin: 0; font-size: var(--fs-body);
}
.cart-totals dt { color: var(--muted); }
.cart-totals dd {
margin: 0; text-align: right;
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.cart-totals dt.total, .cart-totals dd.total { color: var(--ink); font-weight: 600; font-size: var(--fs-h2); }
.cart-totals dt.total { font-family: var(--font-display); letter-spacing: -.02em; }
.cart-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
/*
* Continue shopping on one side, the totals and both buttons on the other.
* The way back into the catalogue was previously the masthead logo or the
* Back button, on the page where a shopper is most likely to want one more
* item before paying.
*/
.cart-foot {
display: flex; flex-wrap: wrap; align-items: flex-start;
justify-content: space-between; gap: var(--s-5);
}
.cart-foot .cart-totals { margin-top: 0; flex-direction: column; align-items: flex-end; }
/* A shipping line that says only "$9.95" invites the question this answers. */
.cart-totals .note {
display: block; color: var(--muted);
font-size: var(--fs-micro); font-weight: 400;
}
/* Directly under the Checkout button, because that is where the hesitation
is. The claim is literally true: checkout is a hosted Stripe Session, so
this application never renders a card field. */
.cart-secure {
margin: var(--s-3) 0 0; max-width: 40ch; text-align: right;
color: var(--muted); font-size: var(--fs-meta);
}
/* =================================================================== hero === */
/*
* Container-width, not viewport-width. Edge-to-edge from inside
* needs `width:100vw; margin-left:calc(50% - 50vw)`,
* and 100vw ignores the scrollbar on Windows - that trick buys a horizontal
* scrollbar on the developer's own platform.
*/
.hero {
position: relative;
margin-bottom: var(--s-7);
border-radius: var(--r-lg);
overflow: hidden;
background: var(--tile);
}
/*
* height:auto is load-bearing, not tidying. The ![]() carries width/height
* attributes (which reserve space before the image loads), and those become
* presentational hints for BOTH dimensions - with a resolved height,
* aspect-ratio is ignored entirely and every rule below is dead. The
* attributes stay: with height:auto they still do their layout-shift job,
* through aspect-ratio rather than around it.
*/
.hero img {
width: 100%;
height: auto;
aspect-ratio: 21 / 9;
object-fit: cover;
}
/*
* The copy sits on this gradient, never on raw image pixels, so contrast
* holds whichever generated candidate is chosen. The stops are set from
* measurement, not from the darkest stop: the text runs well past 0% of the
* gradient, so what matters is the alpha where the LAST character sits.
*
* RE-MEASURED 2026-08-21 against the cold hero (Phase 2) and against these
* literals, which are now the current --ink (16,20,24) rather than the old
* (20,22,26) they were parked at while the warm image was still in place.
* Method: composite this gradient over the real decoded pixels in a canvas at
* the rendered size, then take the LOWEST ratio found anywhere inside each
* text element's box - an average hides the one word that fails.
*
* headline paragraph
* 320px 5.79 7.98 (bottom-up stops, see the 699px block)
* 400px 5.77 8.51
* 700px 5.95 4.84 <- worst on the page, still clear of AA
* 1280px 7.24 8.23
* 1536px 7.24 8.23
*
* Every figure clears WCAG AA (4.5:1) and most clear AAA. The cold image is
* darker where the copy sits than the golden-hour one was, so mobile improved
* most: the headline was 4.55:1 at 400px and is now 5.77:1.
*
* Re-measure the whole table if the image, the stops, or the copy's length
* changes. Do not eyeball it - the previous hero measured 2.83:1 while
* looking perfectly legible in a screenshot.
*/
.hero-copy {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--s-3);
padding: var(--s-5);
color: #fff;
background: linear-gradient(90deg,
rgba(16, 20, 24, .82) 0%,
rgba(16, 20, 24, .58) 50%,
rgba(16, 20, 24, 0) 85%);
}
.hero-copy h1 { margin: 0; max-width: 15ch; }
.hero-copy p { margin: 0; max-width: 34ch; color: rgba(255, 255, 255, .88); }
/* Roomier padding as the crop gets taller, in two steps rather than one. A
single jump to --s-7 at 700px overflows: the 21:9 crop is only 273px tall
there while the copy plus 48px of padding top and bottom needs 277px, and
the overflow is clipped by .hero{overflow:hidden}. The band closes on its
own by ~760px, so the wider padding just waits for 900px. */
@media (min-width: 700px) {
.hero-copy { padding: var(--s-6); }
}
@media (min-width: 900px) {
.hero-copy { padding: var(--s-7); }
}
/* Narrow screens: a 21:9 crop is a letterbox slit, and a left-hand scrim has
no room, so the image gets taller and the scrim rotates bottom-up. */
@media (max-width: 699px) {
.hero img { aspect-ratio: 4 / 3; }
/* The scrim has to reach much further up here than the desktop one does
sideways: a 4:3 crop at 400px is 253px tall and the copy fills 229px of
it, so a fade that has run out by 78% leaves the headline on raw sky.
Re-measured against the cold hero, 2026-08-21: worst case behind the
headline is 5.77:1 at 400px and 5.79:1 at 320px, up from 4.55:1 and
4.58:1 under the golden-hour image. The full table lives with the
desktop stops above; these bottom-up stops are what those two rows
were measured through. */
.hero-copy {
justify-content: flex-end;
background: linear-gradient(0deg,
rgba(16, 20, 24, .88) 0%,
rgba(16, 20, 24, .66) 55%,
rgba(16, 20, 24, .52) 95%,
rgba(16, 20, 24, .30) 100%);
}
}
/* Very narrow screens: the copy is taller than the crop it sits on. Because
.hero-copy is justify-content:flex-end inside .hero{overflow:hidden}, the
excess escapes UPWARD and is clipped - at 320px the headline's top sits
above the hero box entirely. Measured at 320px: the copy needs 229px of
the 193px a 4:3 crop gives it. Both halves of the gap are closed here -
the copy gets shorter (tighter padding/gap, headline at --fs-h2, which a
257px-wide box wants anyway) and the crop gets taller (5:4) - so there is
real headroom rather than a fit that one extra wrapped line would undo. */
@media (max-width: 399px) {
.hero img { aspect-ratio: 5 / 4; }
.hero-copy { padding: var(--s-4); gap: var(--s-2); }
.hero-copy h1 { font-size: var(--fs-h2); }
}
/* ================================================ trust & funnel === */
/*
* Everything below is mobile-first: the base rule is the small-screen form
* and every change up is a min-width query written immediately after it. The
* responsive section at the foot of this file is for overriding rules that
* live far away from it; a component that states its own breakpoints in
* place cannot lose a specificity tie to itself.
*/
/* A text link that is not a button and not body copy: the secondary way out
of a decision point (Continue shopping, Keep looking, Read the policy). */
.link-quiet {
color: var(--muted); font-size: var(--fs-meta);
text-decoration: underline; text-underline-offset: 3px;
}
.link-quiet:hover { color: var(--accent-ink); }
/* Update cart must not compete with Checkout. Outlined, not filled, so the
pair reads as one primary action and one maintenance action rather than
two equal choices at the moment of payment. The :hover rule carries two
classes so it beats the base `button:hover`, which would otherwise put the
accent fill straight back. */
.btn-secondary { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-secondary:hover { background: var(--tile); color: var(--ink); box-shadow: inset 0 0 0 1px var(--muted); }
/* -------------------------------------------------------------- trust --- */
/*
* The three reassurances, in two arrangements from one partial: a band
* across the page (home, cart) and a stack inside the buy box (product).
*
* Not cards. Hairlines and space group these, which is the same decision the
* product grid makes - a bordered box around every promise would read as
* three badges bolted on, and badges are exactly what a sceptical shopper
* discounts. The whole item is the link, so the target is a full row rather
* than a four-word phrase.
*/
.trust { list-style: none; margin: 0; padding: 0; }
.trust a { display: block; color: inherit; text-decoration: none; }
.trust strong {
display: block; color: var(--ink);
font-size: var(--fs-meta); font-weight: 600; letter-spacing: -.005em;
}
.trust span { display: block; margin-top: var(--s-1); color: var(--muted); font-size: var(--fs-meta); }
.trust a:hover strong { color: var(--accent-ink); }
.trust a:hover span { color: var(--ink); }
.trust-band {
margin: 0 0 var(--s-7);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.trust-band li { border-top: 1px solid var(--line); }
.trust-band li:first-child { border-top: 0; }
.trust-band a { padding: var(--s-4) 0; }
@media (min-width: 760px) {
.trust-band { display: grid; grid-template-columns: repeat(3, 1fr); }
/* Vertical hairlines between the three, none on the outside: the top and
bottom rules already close the band. */
.trust-band li { border-top: 0; border-left: 1px solid var(--line); }
.trust-band li:first-child { border-left: 0; }
.trust-band a { padding: var(--s-5); }
.trust-band li:first-child a { padding-left: 0; }
.trust-band li:last-child a { padding-right: 0; }
}
/* Inside the buy box, where it answers "what does postage cost" and "what if
I hate it" without the shopper leaving the page to find out. */
.trust-stack { margin-top: var(--s-5); border-top: 1px solid var(--line); }
.trust-stack li { border-top: 1px solid var(--line); }
.trust-stack li:first-child { border-top: 0; }
.trust-stack a { padding: var(--s-3) 0; }
.trust-stack span { font-size: var(--fs-micro); }
/* --------------------------------------------------------- breadcrumb --- */
.breadcrumb {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
margin-bottom: var(--s-5);
font-family: var(--font-mono); font-size: var(--fs-micro);
letter-spacing: .04em; color: var(--muted);
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-ink); text-decoration: underline; }
.breadcrumb .sep { color: var(--line); }
/*
* The product name can be long; it is the page title, not a link, so it
* truncates rather than wrapping the crumb onto three lines.
*
* max-width is 100%, NOT a ch value. A nowrap element with `max-width: 46ch`
* cannot shrink below about 331px of mono, which is wider than the content
* box of a 320px phone - it would have put a horizontal scrollbar on every
* product page, the exact bug the header had before Phase 1. min-width:0 is
* what actually lets a flex item shrink past its content.
*/
.breadcrumb [aria-current="page"] {
min-width: 0; max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ------------------------------------------------------------- buybox --- */
/*
* Price, quantity, button and reassurances as one object. They were four
* loose things stacked down the column, so the decision the page exists to
* support was spread across half a metre of scroll. White on --paper lifts
* it without a shadow, which suits a palette this cold.
*/
.buybox {
margin: var(--s-5) 0 var(--s-6);
padding: var(--s-5);
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-lg);
}
.buybox .price { font-size: var(--fs-h2); }
.buybox .add-to-cart { margin: var(--s-4) 0 0; }
.buybox .add-to-cart button { flex: 1 1 auto; }
/* Confirmation after POST /cart/add redirects back to the product. Uses the
semantic ok pair, not the brand accent: this is "that worked", which is a
different thing from "this is a Sky Pilot Gear button". */
.added {
margin: var(--s-4) 0 0;
padding: var(--s-4);
background: var(--ok-soft);
border-left: 3px solid var(--ok-ink);
border-radius: var(--r-sm);
}
.added-line { margin: 0 0 var(--s-3); color: var(--ok-ink); font-size: var(--fs-meta); }
.added-line strong { display: block; font-size: var(--fs-body); }
.added-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
/* ------------------------------------------------------------ related --- */
/* A product page that a visitor has just decided against needs somewhere to
go that is not the Back button. */
.related {
margin-top: var(--s-9);
padding-top: var(--s-7);
border-top: 1px solid var(--line);
}
.related h2 { margin-bottom: var(--s-6); }
/* ------------------------------------------------------- policy pages --- */
/*
* Shipping, returns, contact, privacy. Measure-constrained prose: at the
* 1200px container these would run to about 160 characters a line and nobody
* would read the paragraph that says who they are buying from.
*/
.policy, .confirmation { max-width: 68ch; }
.policy h2, .confirmation h2 {
margin: var(--s-7) 0 var(--s-3);
font-size: var(--fs-h3);
font-family: var(--font-display);
letter-spacing: -.012em;
}
.policy p, .confirmation p { margin: 0 0 var(--s-4); }
.policy-lede {
color: var(--muted);
font-size: 1.0625rem;
max-width: 52ch;
}
.contact-address {
margin: var(--s-6) 0;
padding: var(--s-5);
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-lg);
font-family: var(--font-mono);
font-size: 1.0625rem;
overflow-wrap: anywhere;
}
/* -------------------------------------------------- order confirmation --- */
/* The highest-trust moment in the funnel, and previously three centred
sentences in .empty, the component that otherwise means "nothing here". */
.order-number {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4);
margin: var(--s-5) 0;
padding: var(--s-4) var(--s-5);
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-lg);
}
.order-number span { color: var(--muted); font-size: var(--fs-meta); }
.order-number strong {
font-family: var(--font-mono); font-size: var(--fs-price);
font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.next-steps { counter-reset: step; list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.next-steps li {
counter-increment: step;
position: relative;
padding-left: var(--s-6);
margin-bottom: var(--s-5);
color: var(--muted);
}
.next-steps li::before {
content: counter(step);
position: absolute; left: 0; top: 1px;
font-family: var(--font-mono); font-size: var(--fs-meta);
font-variant-numeric: tabular-nums;
color: var(--accent-ink);
}
.next-steps strong { display: block; color: var(--ink); font-weight: 600; }
.confirmation-actions {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
margin-top: var(--s-6);
}
/* ============================================ responsive overrides === */
/*
* The header did not actually wrap, it OVERFLOWED. A flex item's default
* min-width is auto, so the search refused to shrink below its
* intrinsic width and pushed the cart link off the side: at a 320px viewport
* the document measured 447px wide, i.e. every phone visitor could scroll
* the whole site sideways. The old 114px header height was that overflow
* being absorbed, not a deliberate two-row layout.
*
* Below 700px the search now takes a row of its own, on purpose: logo and
* cart on the first row, full-width search on the second. min-width:0 on the
* input is the part that actually fixes the overflow; the rest is what makes
* the resulting two rows look intentional.
*/
@media (max-width: 699px) {
/* Two rows here, so the anchor offset has to grow with them. */
:root { --header-h: 106px; }
.site-header { flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
/* min-width:0 is needed on BOTH the form and the input. The form is a
flex item of the header AND a flex container itself; leaving its own
automatic minimum size at `auto` lets its content push it past the
100% basis, which is what kept a 320px viewport 11px too wide even
after the input was allowed to shrink. */
.site-header .search { order: 3; flex: 1 1 100%; min-width: 0; margin-left: 0; }
.site-header .search input { flex: 1 1 auto; min-width: 0; }
.site-header .cart-link { margin-left: auto; }
}
/* ==================================================== reduced motion === */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: .001s !important;
animation-duration: .001s !important;
}
.card:hover .thumb, .card:hover .thumb img { transform: none; }
}
|