/* tokens.css */ /* Design tokens — MoeMadness. Ratios in comments are measured against --ink by tools/contrast.mjs and asserted by tools/tokens.test.mjs. Do not adjust a value without rerunning. */ :root { /* Surface */ --ink: #0A0A0B; --stone-900: #131211; --stone-800: #1A1917; --stone-600: #26241F; /* Decoration only — 3.54:1, never carries text */ --stone-500: #6E675C; /* Text */ --mono: #8B8478; /* 5.34:1 — metadata 11px and up */ --mono-lift: #A39B8E; /* 7.20:1 — metadata below 11px */ --bone-dim: #B8B2A8; /* 9.40:1 — secondary body */ --bone: #ECE6DB; /* 15.93:1 — primary text, display */ /* Accent — two tier, mandatory */ --red-display: #D61A12; /* 3.78:1 — display type >=24px ONLY */ --red-link: #F2564B; /* 5.85:1 — links, small text */ /* Type */ --font-display: 'Anton', Impact, sans-serif; --font-body: 'Archivo', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --step--1: 0.8125rem; --step-0: 1rem; --step-1: 1.5rem; --step-2: clamp(2rem, 4vw, 3.25rem); --step-3: clamp(3rem, 9vw, 7rem); --step-4: clamp(4rem, 15vw, 12rem); /* Rhythm */ --gap: clamp(1rem, 3vw, 2rem); --bleed: clamp(1.25rem, 4vw, 3.5rem); --hair: 1px; /* Motion */ --ease: cubic-bezier(.2, .7, .2, 1); --slow: .55s; } /* fonts.css */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/anton-latin.woff2') format('woff2'); } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/archivo-latin.woff2') format('woff2'); } /* Static file, single weight — see tools/fonts.mjs. Declaring a range here would render every mono element in the wrong weight. */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/plex-mono-latin.woff2') format('woff2'); } /* base.css */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* line-height below 1 is the point — display type stacks tight. The cost is that Anton's glyphs overflow the line box (measured: 38px past the box at 110px), so with margin:0 every heading collides with whatever follows it. The bottom margin is proportional so it scales with the clamped sizes. */ h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: .82; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 .4em; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } p { margin: 0 0 1em; max-width: 62ch; } a { color: var(--red-link); text-decoration-thickness: 1px; text-underline-offset: .2em; } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--red-link); outline-offset: 3px; } img { display: block; max-width: 100%; height: auto; } .mono { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--mono); } .plate-no { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .16em; color: var(--mono-lift); } .skip { position: absolute; left: -9999px; } .skip:focus { left: var(--bleed); top: 1rem; z-index: 99; background: var(--bone); color: var(--ink); padding: .6rem 1rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* layout.css */ /* Layout — the specimen catalogue. No cards: structure comes from hairline rules and plate numbers. */ .bleed { padding-inline: var(--bleed); } .rule { height: var(--hair); background: color-mix(in srgb, var(--bone) 15%, transparent); border: 0; margin: 0; } /* ---------- masthead ---------- */ .masthead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap); padding: 1.5rem var(--bleed); border-bottom: var(--hair) solid color-mix(in srgb, var(--bone) 15%, transparent); } .masthead__mark { text-decoration: none; } .masthead__word { font-family: var(--font-display); font-size: var(--step-1); text-transform: uppercase; letter-spacing: -.02em; color: var(--bone); } .masthead__word--red { color: var(--red-display); } .masthead__nav ul { display: flex; gap: clamp(.75rem, 2vw, 1.75rem); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .masthead__nav li { display: flex; align-items: baseline; gap: .4rem; } .masthead__nav a { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); text-decoration: none; } .masthead__nav a:hover, .masthead__nav a:focus-visible { color: var(--bone); } /* ---------- hero ---------- */ .hero { position: relative; padding: clamp(3rem, 10vh, 7rem) var(--bleed); } /* block, not inline: as inline spans the hero words flow as one paragraph and wrap by viewport width, so the composition changes unpredictably and words land on top of each other — "Delivered Clean." overlapped both lines above it at 735px. Each word owns its line; drift-1/2/3 then separate them on scroll. line-height .82 keeps the stack tight without bisecting the word above (.74 overlapped by roughly a third of the cap height). */ .hero__word { display: block; font-family: var(--font-display); font-size: var(--step-4); line-height: .82; text-transform: uppercase; letter-spacing: -.022em; margin: 0; color: var(--bone); } .hero__word--out { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--bone) 38%, transparent); } .hero__word--red { color: var(--red-display); } .hero__meta { display: flex; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; } /* ---------- display-heading links ---------- */ /* Display-heading links carry no underline. These headings wrap, and with line-height .82 the first line's underline lands inside the second line's glyphs — measured: 99px tall lines, 54px apart, underline offset 13px. Colour is the affordance; hover and focus shift it to bone. */ h1 a, h2 a, h3 a { text-decoration: none; } h1 a:hover, h1 a:focus-visible, h2 a:hover, h2 a:focus-visible, h3 a:hover, h3 a:focus-visible { color: var(--bone); } /* ---------- specimen plate ---------- */ .plate { border: var(--hair) solid color-mix(in srgb, var(--bone) 26%, transparent); padding: .4rem; background: var(--stone-900); } .plate img { width: 100%; } /* The featured row mixes portrait, square and landscape mockups. Crop them to one ratio so the row stays level and the box is reserved correctly; product pages keep each image at its own real dimensions. */ .feature .plate img { aspect-ratio: 4 / 5; object-fit: cover; } .plate__cap { display: flex; justify-content: space-between; gap: 1rem; margin-top: .55rem; } /* ---------- featured spread (staggered, max 3) ---------- auto-FILL, not auto-fit: with a single featured item, auto-fit collapses the empty tracks and balloons it to the full row width; a hardcoded repeat(3,1fr) shrinks it to a third and leaves two-thirds empty. auto-fill keeps the track so one item renders at a natural size and three still form three columns. Measured at a 661px container with 1 item: 3-col 206px, auto-fit 661px, auto-fill 320px. */ .feature { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--gap); } .feature > *:nth-child(2) { margin-block-start: clamp(1rem, 5vw, 3rem); } .feature > *:nth-child(3) { margin-block-start: clamp(.5rem, 2vw, 1.25rem); } /* ---------- catalogue index (aligned, many) ---------- */ .index { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--hair) solid color-mix(in srgb, var(--bone) 15%, transparent); } .index__cell { padding: 1.25rem 1.1rem 1.6rem; border-right: var(--hair) solid color-mix(in srgb, var(--bone) 9%, transparent); border-bottom: var(--hair) solid color-mix(in srgb, var(--bone) 9%, transparent); } .index__cell:nth-child(4n) { border-right: 0; } .index__thumb { aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone-900); } .index__thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.85); transition: filter var(--slow) var(--ease), transform .8s var(--ease); } .index__cell:hover .index__thumb img, .index__cell:focus-within .index__thumb img { filter: none; transform: scale(1.035); } .index__name { font-size: var(--step-0); color: var(--bone); margin: .45rem 0 .2rem; } .index__price { font-family: var(--font-mono); font-size: var(--step--1); color: var(--bone-dim); letter-spacing: .1em; } /* ---------- filters ---------- */ .filters { display: flex; gap: .5rem; flex-wrap: wrap; padding-block: 1.25rem; } .filters__chip { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--mono-lift); background: none; cursor: pointer; padding: .4rem .7rem; border: var(--hair) solid color-mix(in srgb, var(--bone) 20%, transparent); } .filters__chip:hover, .filters__chip:focus-visible { color: var(--bone); border-color: color-mix(in srgb, var(--bone) 50%, transparent); } .filters__chip[aria-pressed="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); } /* ---------- forms ---------- The contact form is the site's only conversion point. Unstyled it renders in browser-default Arial at 13px with 21px tap targets. font-size must be at least 16px: iOS Safari zooms the whole page when a smaller control is focused, and the user is left at a zoomed viewport. min-height 44px meets the touch-target minimum — padding alone left the