with an inline
* style="color:#1164A9" — the one blue thing on the site, and inline so no
* ordinary rule reaches it. !important is the correct tool here precisely
* because the competing declaration is inline and not ours to edit; setting
* the plugin's colour option instead would work until someone opens its
* settings page and saves the default back. */
.pi-cart .single_variation_wrap > a[onclick] {
color: var(--ink-2) !important;
font-family: var(--font-mono); font-size: var(--text-xs);
text-transform: lowercase;
text-decoration: underline; text-underline-offset: 0.3em;
}
.pi-cart .single_variation_wrap > a[onclick]:hover { color: var(--ink) !important; }
.pi-cart form.cart { display: block; }
/* Quantity and button on one row. Alone above a full-width button, the qty box
* read as an orphaned input with no label; paired, the row is legibly one
* control plus one action. */
.pi-cart .woocommerce-variation-add-to-cart,
.pi-cart form.cart:not(.variations_form) {
display: flex; align-items: stretch; gap: 0.8rem; margin-top: 2rem;
}
.pi-cart .quantity { flex: 0 0 auto; }
.pi-cart .quantity input {
width: 6rem; height: 100%; text-align: center;
font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.pi-cart .single_add_to_cart_button {
flex: 1 1 auto; margin: 0; padding: 1.2rem;
font-size: var(--text-s); letter-spacing: var(--track-small);
}
.pi-cart .woocommerce-variation-price {
margin: 1.6rem 0 0; font-family: var(--font-mono); font-size: var(--text-s);
letter-spacing: var(--track-small);
}
.pi-cart .woocommerce-variation-availability p,
.pi-cart .stock {
margin: 1.2rem 0 0;
font-family: var(--font-mono); font-size: var(--text-xs);
letter-spacing: var(--track-small); color: var(--ink-2);
}
@media (max-width: 640px) {
.product-split { grid-template-columns: 1fr; }
.product-info { position: static; padding: 3rem 0 0; }
}
/* --- drop clock --------------------------------------------------------- */
/* .dropbanner was the old standalone countdown section, and .dropwindow its
* date line. The clock now sits inside .state-clock on the three state
* templates, so only .clock itself is still reachable. .dropbanner's
* margin-top was --space-m (60px) where a section break wants 120-144px —
* a genuine spec violation, but on a rule nothing renders. */
.clock {
font-family: var(--font-mono); font-size: var(--text-l);
font-variant-numeric: tabular-nums; letter-spacing: var(--track-small);
}
.clock .unit { color: var(--ink-2); font-size: var(--text-xs); margin-right: 2rem; }
/* --- machine layer ------------------------------------------------------ */
.kv { font-family: var(--font-mono); font-size: var(--text-s); letter-spacing: var(--track-small); line-height: 2.1; }
.kv .k { color: var(--ink-2); }
/* --- forms (validation red is the only red) ----------------------------- */
input, textarea, select, button {
font: inherit; letter-spacing: inherit;
border: 1px solid var(--hairline); border-radius: var(--radius);
background: var(--paper); color: var(--ink); padding: 0.8rem 1.2rem;
}
button, .button, input[type=submit] {
border-color: var(--ink); background: var(--ink); color: var(--paper);
cursor: pointer; text-transform: lowercase; transition: opacity var(--t-fast);
}
button:hover, .button:hover, input[type=submit]:hover { opacity: 0.85; }
.field-error, .woocommerce-error { color: var(--error); font-size: var(--text-xs); }
@media (prefers-reduced-motion: reduce) {
.p-card canvas.mosaic { transition: none; }
}
/* ---- legal pages -------------------------------------------------------- */
/* Returns, privacy, cookies, gpsr. The only body copy on the site, so this is
* the only place a reading measure matters — everything else is images, a spec
* block or a countdown. Capped at 68ch because policy text is read once, under
* mild duress, and long lines are where people give up. */
.legal {
max-width: 68ch;
margin: var(--space-m) auto var(--space-l);
padding: 0;
}
.legal-head { border-bottom: 1px solid var(--ink); padding-bottom: 1.6rem; margin-bottom: var(--space-s, 3rem); }
.legal-head h1 { font-size: var(--text-l); margin: 0 0 0.8rem; }
.legal-head .meta { color: var(--ink-2); }
.legal-body { font-size: var(--text-s); line-height: 1.75; }
.legal-body > * + * { margin-top: 1.6em; }
.legal-body h2 { font-size: var(--text-m); margin-top: 2.4em; }
.legal-body h3 { font-size: var(--text-s); margin-top: 2em; text-transform: lowercase; }
.legal-body ul, .legal-body ol { padding-left: 2.4rem; }
.legal-body li + li { margin-top: 0.6em; }
.legal-body a { text-decoration: underline; text-underline-offset: 0.2em; }
/* Policy pages are where a stray Elementor table or wide would break the
* page — they came from a page builder and carry its markup. */
.legal-body img, .legal-body table, .legal-body pre { max-width: 100%; }
.legal-body table { display: block; overflow-x: auto; }
.legal-back {
display: inline-block;
margin-top: var(--space-m);
border-top: 1px solid var(--hairline);
padding-top: 1.6rem;
}
/* ---- site states: full-bleed hero, minimal type over it ------------------ */
/* The about:blank treatment. An earlier revision put a bordered panel under a
* 52vh image band — a nice object, the wrong page. The reference sells with a
* photograph filling the viewport and a few lines of type on top. */
.state {
position: relative;
min-height: 100svh;
display: flex;
align-items: flex-end;
/* Run under the header. The token is --nav-h; this said --header-h, which is
defined nowhere, so it silently used the 6rem fallback. That matches
--nav-h on desktop by coincidence and is wrong on mobile, where --nav-h is
4rem — the hero was pulling up 20px too far and running past the header. */
margin-top: calc(var(--nav-h) * -1);
}
/* The image bleeds past the page inset; only the type respects it. */
.state-media { position: absolute; inset: 0 calc(var(--edge) * -1); z-index: 0; }
.state-media img, .state-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The scrim is structural, not decorative: the hero is a PER-DROP asset, so the
* next one may be light where this one is dark. Legibility cannot be allowed to
* depend on one particular photograph. */
.state-media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 34%, rgba(0,0,0,0.05) 62%);
}
/* THE CRYSTAL BUTTON. Open state only — the one CTA, on the hero, right-hand
* side and vertically centred.
*
* Absolute rather than a flex child: .state is `align-items: flex-end` for the
* type block in the other three states, and giving this its own coordinates
* keeps those layouts untouched. `right: 0` lands on the page inset, not the
* bleed — .state-media deliberately overhangs by --edge, the content does not.
*
* The frost is a backdrop-filter so the button shows the PHOTOGRAPH blurred,
* not a flat wash. brightness(0.78) is structural: white type has to hold on a
* per-drop image nobody has chosen yet, and the scrim below is transparent this
* far up the frame. Browsers without backdrop-filter get a flat dark panel —
* same contrast, no blur. */
.state-crystal {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: min(26rem, 100%);
padding: 1.15rem 2.4rem;
color: var(--paper);
font-size: var(--text-s);
letter-spacing: 0.08em;
text-decoration: none;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.42);
backdrop-filter: blur(14px) saturate(120%) brightness(0.78);
-webkit-backdrop-filter: blur(14px) saturate(120%) brightness(0.78);
transition: background 160ms ease, border-color 160ms ease;
}
.state-crystal:hover,
.state-crystal:focus-visible {
background: rgba(255,255,255,0.20);
border-color: rgba(255,255,255,0.82);
text-decoration: none;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
.state-crystal { background: rgba(0,0,0,0.52); }
.state-crystal:hover, .state-crystal:focus-visible { background: rgba(0,0,0,0.66); }
}
/* Below 40rem, 26rem of button plus the page inset does not fit and the thing
* would either overflow or shrink to an odd stub. It spans the inset instead —
* still the only CTA, still vertically centred, and now a thumb-sized target. */
@media (max-width: 40rem) {
.state-crystal { left: 0; right: 0; min-width: 0; padding: 1.05rem 1.4rem; }
}
/* Bottom-left, clear of the centred figure in the campaign imagery. */
.state-body {
position: relative;
z-index: 1;
color: var(--paper);
padding: var(--space-m) 0 var(--space-s);
max-width: 52ch;
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.state-body h1 {
font-size: var(--text-xl);
line-height: 0.96;
letter-spacing: -0.02em; /* negative on display — spec item 1 */
margin: 0;
color: var(--paper);
}
.state-eyebrow { font-size: var(--text-xs); color: rgba(255,255,255,0.72); margin: 0; }
.state-line { font-size: var(--text-s); color: rgba(255,255,255,0.82); margin: 0; max-width: 44ch; }
.state-body .meta { color: rgba(255,255,255,0.6); }
/* One bar, in the eyebrow. A table of them was the panel wearing the brand
* rather than being it. */
.state-eyebrow .bar {
display: inline-block; height: 0.9em; background: var(--paper);
vertical-align: -0.1em; opacity: 0.9;
}
.state-clock .clock { font-size: var(--text-clock); color: var(--paper); }
.state-clock .meta { margin: 0.4rem 0 0; }
.state-form { display: flex; flex-direction: column; gap: 0.8rem; }
.state-entry { display: flex; gap: 0.8rem; max-width: 40ch; }
.state-entry input {
flex: 1;
font-family: var(--font-mono);
font-size: var(--text-s);
letter-spacing: var(--track-code);
padding: 1.1rem 1.4rem;
border: 1px solid rgba(255,255,255,0.5);
background: rgba(0,0,0,0.25);
color: var(--paper);
}
.state-entry input::placeholder { color: rgba(255,255,255,0.4); letter-spacing: var(--track-code); }
.state-entry input[aria-invalid="true"] { border-color: var(--error); }
.state-entry button {
padding: 1.1rem 2.2rem; white-space: nowrap;
background: var(--paper); color: var(--ink); border: 1px solid var(--paper);
}
.state-alt a { color: var(--paper); text-decoration: underline; text-underline-offset: 0.2em; }
.state-signup { max-width: 40ch; }
/* The header sits over the hero on these pages. */
.state ~ .site-foot, body:has(.state) .site-head { position: relative; z-index: 2; }
body:has(.state) .site-head { color: var(--paper); }
body:has(.state) .site-head a { color: var(--paper); }
/* Admin-only preview marker. Deliberately ugly — it must never be mistaken for
* part of the design, and it must be impossible to miss. */
.un-state-badge {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
background: #ff3b00; color: var(--paper); font-size: 1.1rem;
padding: 0.6rem 1.2rem; text-align: center;
}
.un-state-badge a { color: var(--paper); text-decoration: underline; }
/* ---- signup ------------------------------------------------------------- */
.signup { display: flex; gap: 0.8rem; max-width: 40ch; }
.signup input[type="email"] {
flex: 1;
font-family: var(--font-mono);
font-size: var(--text-s);
padding: 1.1rem 1.4rem;
border: 1px solid rgba(255,255,255,0.5);
background: rgba(0,0,0,0.25);
color: var(--paper);
}
.signup input[type="email"]::placeholder { color: rgba(255,255,255,0.45); }
.signup button {
font-family: var(--font-mono);
padding: 1.1rem 1.6rem; white-space: nowrap;
background: var(--paper); color: var(--ink); border: 1px solid var(--paper);
}
/* Honeypot. Off-screen rather than display:none — some bots skip hidden fields
* but happily fill positioned ones, which is the point of the trap. */
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup-done { font-size: var(--text-xs); line-height: 1.7; margin: 0; }
/* On the light legal/shop pages the field inverts. */
body:not(:has(.state)) .signup input[type="email"] {
border-color: var(--ink); background: transparent; color: var(--ink);
}
body:not(:has(.state)) .signup button { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* ---- basket drawer ------------------------------------------------------ */
/* Slides from the right. 75ms cubic-bezier(.165,.84,.44,1) is the house
* transition from 04-aboutblank-spec — very fast, sharply decelerating. The
* panel gets a longer duration than that because it travels a real distance;
* 75ms on a 42ch slide reads as a jump-cut rather than a movement. */
.drawer { position: fixed; inset: 0; z-index: 200; }
.drawer[hidden] { display: none; }
/* The admin bar is itself fixed to the viewport, and WordPress clears it by
* putting margin-top on — which does nothing for a fixed element, so
* the drawer's own header was sliding underneath it. Logged-in views only;
* customers never hit this. WP's breakpoints are in px, not our rem scale. */
body.admin-bar .drawer { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar .drawer { top: 46px; }
}
@media screen and (max-width: 600px) {
/* Below 600px the bar switches to position:absolute and scrolls away with
the page, so a standing offset would leave a permanent white gap. */
body.admin-bar .drawer { top: 0; }
}
.drawer-scrim {
position: absolute; inset: 0;
background: rgba(0,0,0,0.45);
opacity: 0;
transition: opacity var(--t-drawer);
}
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer-panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(42ch, 100%);
background: var(--paper);
border-left: 1px solid var(--ink);
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform var(--t-drawer);
}
.drawer.is-open .drawer-panel { transform: translateX(0); }
.drawer-head {
display: flex; justify-content: space-between; align-items: center;
padding: 2rem;
border-bottom: 1px solid var(--ink);
font-size: var(--text-xs);
}
.drawer-close { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-2); font-size: var(--text-xs); }
.drawer-close:hover { color: var(--ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: 2rem; }
.drawer-empty { margin: 0; }
.drawer-items { list-style: none; margin: 0; padding: 0; }
.drawer-item {
display: grid;
grid-template-columns: 7rem 1fr auto;
gap: 1.6rem;
padding-bottom: 2rem;
}
.drawer-item + .drawer-item { border-top: 1px solid var(--hairline); padding-top: 2rem; }
.di-thumb img { width: 100%; height: auto; display: block; }
.di-detail { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.di-name { font-size: var(--text-xs); line-height: 1.35; }
.di-meta, .di-line { font-size: var(--text-xs); }
.di-remove { font-size: var(--text-xs); color: var(--ink-2); align-self: start; }
.di-remove:hover { color: var(--error); }
.drawer-foot { border-top: 1px solid var(--ink); padding: 2rem; display: flex; flex-direction: column; gap: 1.2rem; }
.drawer-total { display: flex; justify-content: space-between; font-size: var(--text-s); }
.drawer-note { margin: 0; font-size: var(--text-xs); }
.drawer-cta {
display: block; text-align: center;
padding: 1.3rem; font-family: var(--font-mono); font-size: var(--text-xs);
border: 1px solid var(--ink);
}
.drawer-cta--alt { background: var(--ink); color: var(--paper); }
/* Stop the page scrolling behind the panel. */
body.drawer-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.drawer-scrim, .drawer-panel { transition: none; }
}
/* ---- cart page ---------------------------------------------------------- */
/* The drawer's contents with room to breathe. Two columns on desktop: the list
* scrolls, the summary stays put — same anatomy as the product page, so the two
* transactional surfaces behave identically. */
.cart-page {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-m);
max-width: 110rem;
margin: var(--space-m) auto var(--space-l);
padding: 0;
}
@media (min-width: 62rem) {
.cart-page { grid-template-columns: 1fr 34rem; align-items: start; }
.cart-head { grid-column: 1 / -1; }
.cart-summary { position: sticky; top: var(--space-s, 4rem); }
}
.cart-head { border-bottom: 1px solid var(--ink); padding-bottom: 1.6rem; }
.cart-head h1 { font-size: var(--text-l); margin: 0 0 0.6rem; }
.cart-head .meta { margin: 0; }
.cart-items { list-style: none; margin: 0; padding: 0; }
/* basket and checkout are ordinary pages, so page.php hands them here instead of
* wrapping them in the legal template's 68ch reading measure. */
.shop-page { margin: 0 0 var(--space-l); }
.cart-item {
display: grid;
/* minmax(0,1fr) on the detail column, not 1fr. A bare 1fr will not shrink
below its content's min-content, so a long product name held the column
open and squeezed the other four until the name itself wrapped one word per
line. This lets it shrink and wrap normally. */
grid-template-columns: 9rem minmax(0, 1fr) auto auto auto;
gap: 2rem;
align-items: start;
padding: 2.4rem 0;
border-bottom: 1px solid var(--hairline);
}
@media (max-width: 48rem) {
/* thumb down the left, everything else stacked beside it */
.cart-item { grid-template-columns: 7rem minmax(0, 1fr); gap: 1.4rem; }
.cart-item .ci-qty, .cart-item .ci-total, .cart-item .ci-remove { grid-column: 2; }
.cart-item .ci-thumb { grid-row: 1 / span 4; }
}
.ci-thumb img { width: 100%; height: auto; display: block; }
.ci-detail { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.ci-name { font-size: var(--text-s); line-height: 1.3; }
.ci-meta, .ci-unit { font-size: var(--text-xs); }
.ci-total { font-size: var(--text-s); white-space: nowrap; }
.ci-remove { font-size: var(--text-xs); color: var(--ink-2); }
.ci-remove:hover { color: var(--error); }
/* --- quantity stepper (drawer + basket page) ------------------------------ */
.qty {
display: inline-flex; align-items: stretch;
border: 1px solid var(--hairline);
}
.qty-btn {
width: 2.8rem; border: 0; background: var(--paper); color: var(--ink);
font-family: var(--font-mono); font-size: var(--text-s); line-height: 1;
cursor: pointer; padding: 0;
transition: background var(--t-fast), color var(--t-fast);
}
.qty-btn:hover:not([disabled]) { background: var(--ink); color: var(--paper); }
.qty-btn[disabled] { color: var(--hairline); cursor: default; }
.qty-n {
min-width: 3rem; padding: 0.8rem 0.2rem;
display: grid; place-items: center;
font-size: var(--text-xs);
border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
}
/* In flight. Not a spinner — the row dims and stops taking clicks, which is
enough feedback for an operation that resolves in well under a second. */
.is-busy { opacity: 0.45; pointer-events: none; }
.drawer-item .qty { margin-top: 0.6rem; }
.di-qty-one { margin-top: 0.6rem; }
/* Woo's quantity input, restyled rather than replaced — its markup carries the
* name attributes the update handler depends on. */
.ci-qty .quantity input {
width: 6rem; text-align: center;
font-family: var(--font-mono); font-size: var(--text-xs);
padding: 0.8rem; border: 1px solid var(--hairline); background: transparent; color: var(--ink);
}
.cart-actions { padding-top: 2rem; }
.cart-update {
background: none; border: 1px solid var(--hairline); cursor: pointer;
padding: 1rem 1.8rem; font-size: var(--text-xs); color: var(--ink-2);
}
.cart-update:hover { border-color: var(--ink); color: var(--ink); }
.cart-summary { border: 1px solid var(--ink); padding: 2.4rem; display: flex; flex-direction: column; gap: 1.6rem; }
.cart-total { display: flex; justify-content: space-between; font-size: var(--text-m); }
.cart-note { margin: 0; font-size: var(--text-xs); line-height: 1.6; }
.cart-checkout {
display: block; text-align: center;
background: var(--ink); color: var(--paper);
padding: 1.4rem; font-family: var(--font-mono); font-size: var(--text-xs);
}
.cart-back { display: inline-block; border-top: 1px solid var(--hairline); padding-top: 1.6rem; }
/* Empty cart — Woo renders its own template; keep it in the same measure. */
.wc-empty-cart-message, .cart-empty { max-width: 52ch; margin: var(--space-m) auto; padding: 0; }
/* ---- front page hero ----------------------------------------------------
* Same .state treatment as the holding page and the 403, so all three entry
* points read as one site rather than three designs. The front page adds a CTA
* and is the only one that leads somewhere. */
.state-front { min-height: 88svh; } /* shorter than 100 — the grid below should peek */
.state-cta {
display: inline-block;
align-self: flex-start;
color: var(--paper);
border-bottom: 1px solid rgba(255,255,255,0.6);
padding-bottom: 0.4rem;
font-size: var(--text-xs);
transition: border-color var(--t-fast);
}
.state-cta:hover { border-color: var(--paper); }
/* The header sits over the hero on the front page too. body:has() covers the
* state templates; .state-front is the same case. */
body:has(.state-front) .site-head, body:has(.state-front) .site-head a { color: var(--paper); }
/* The old stacked banner. Removed from the template — this clears any cached
* markup and stops it reappearing if a stale page is served. */
.dropbanner { display: none; }
/* --- touch targets ---------------------------------------------------------
* Measured on a 375px phone with touch emulation: the quick-add was 28x28, the
* quantity steppers 28x31, the filter checkboxes 14x14, WooCommerce's payment
* radio 26x18 and its terms checkbox 13x13. WCAG 2.5.8 puts the floor at 24x24
* CSS px and the last three were under it.
*
* Scoped to `pointer: coarse` rather than a width breakpoint — this is about
* fingers, not screens. A small window on a desktop still has a mouse and does
* not need 44px controls; a large tablet does.
*
* MIND THE ROOT CLAMP: html is font-size: clamp(10px, 0.7vw, 12px), so 1rem is
* 10px on every phone. 4.4rem is 44px here, not 70. */
@media (pointer: coarse) {
.p-card .qb-open { width: 4.4rem; height: 4.4rem; }
.qty-btn { width: 4.4rem; height: 4.4rem; }
.qty-n { min-width: 4rem; }
/* Our own controls */
.fopt input { width: 2.4rem; height: 2.4rem; }
.fopt { gap: 1.2rem; padding: 0.4rem 0; }
/* WooCommerce's, which the theme does not template */
.checkout input[type="checkbox"],
.checkout input[type="radio"],
#payment .input-radio { width: 2.4rem; height: 2.4rem; flex: none; }
.checkout .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 1.2rem; }
/* Inline text actions get vertical padding rather than a box — `remove` was
15px tall, and it deletes a line from a basket. */
.ci-remove, .di-remove { padding: 1rem 0; display: inline-block; }
/* THE SIZE BUTTONS ARE THE POINT OF THE QUICK-ADD, and they were the worst
targets on the page: `flex: 1 1 auto` split a ~168px card six ways, giving
buttons 14 to 22px wide. Choosing a size is the one thing this panel exists
to do, and on a phone it was a lottery.
A three-column grid gives every size the same ~48px box and wraps to two
rows, which also stops S and 3XL being different widths. */
.p-card .qb-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.p-card .qb-size { padding: 1.2rem 0.4rem; }
/* The panel's close control was a bare glyph at 14x15. */
.p-card .qb-close {
width: 3.4rem; height: 3.4rem; padding: 0;
display: grid; place-items: center;
}
}