/* ========================================================================== Drum — First Crack Coffee Roasters A manufactured faceplate: periwinkle plates butted on 12px seams, a carbon command layer bolted across them. Warmth is wayfinding only. ========================================================================== */ /* ---------- Fonts (self-hosted, zero external requests) ---------- */ /* Arimo — the Arial-metric open grotesque (drop-in for Liberation Sans; identical metrics). Variable file covers the 400-700 range. */ @font-face { font-family: "Arimo"; src: url("./assets/fonts/arimo-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo Black"; src: url("./assets/fonts/archivo-black-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Silkscreen"; src: url("./assets/fonts/silkscreen-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { /* palette */ --canvas: #7a8aba; --periwinkle: #8ba1d4; --canvas-soft: #9fbee7; --platinum: #dedede; --surface: #ffffff; --carbon: #21242e; --carbon-lift: #2c3040; --chrome-indigo: #3d4f97; --chrome-light: #a9b8dd; --muted-indigo: #60619c; --floor: #2b3352; --nav-gold: #e48600; --amber: #ecab37; --signal: #f68d1f; --signal-press: #e07a12; --tint-index: #acace7; --tint-beans: #c0d5e6; --tint-about: #206479; /* the tint of the current page — set per page on */ --tint: var(--tint-index); /* type */ --font-ui: "Arimo", "Liberation Sans", Arial, Helvetica, sans-serif; --font-display: "Archivo Black", Arial, Helvetica, sans-serif; --font-stencil: "Silkscreen", "Arimo", monospace; /* spacing — base unit 4px */ --xxs: 2px; --xs: 4px; --sm: 8px; --md: 12px; --lg: 16px; --xl: 24px; --xxl: 32px; /* corners */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-full: 9999px; } /* The three hero fields are the only sanctioned accents outside the warm trio, and all three are cool — so warmth stays unambiguously actionable. */ body[data-page="beans"] { --tint: var(--tint-beans); } body[data-page="about"] { --tint: var(--tint-about); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 16px 0; background: var(--floor); color: var(--carbon); font-family: var(--font-ui); font-size: 14px; line-height: 1.55; } img { display: block; max-width: 100%; } p { margin: 0 0 var(--sm); } p:last-child { margin-bottom: 0; } ul { margin: 0; padding: 0; list-style: none; } dl, dd, dt { margin: 0; } a { color: inherit; } /* Focus is a 2px carbon outline with 2px offset — carbon reads on every surface in the system (>= 4.55:1 on the lightest, the periwinkle canvas). */ :focus-visible { outline: 2px solid var(--carbon); outline-offset: 2px; } /* ---------- Bevel & depth ---------- */ /* Level 0 — inset (recessed into the chrome) */ .inset { background: var(--platinum); border-top: 1px solid var(--chrome-indigo); border-left: 1px solid var(--chrome-indigo); border-right: 1px solid var(--chrome-light); border-bottom: 1px solid var(--chrome-light); } .inset-white { background: var(--surface); } /* Level 1 — plate (flush, the default) */ .plate { background: var(--canvas); border-top: 1px solid var(--chrome-light); border-left: 1px solid var(--chrome-light); border-right: 1px solid var(--chrome-indigo); border-bottom: 1px solid var(--chrome-indigo); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); /* hard edge-light, ZERO blur */ } .plate-mid { background: var(--periwinkle); } .plate-white { background: var(--surface); } /* Level 2 — raised chip (a pressable control) */ .chip { border-top: 1px solid var(--chrome-light); border-left: 1px solid var(--chrome-light); border-right: 2px solid var(--chrome-indigo); border-bottom: 2px solid var(--chrome-indigo); } .chip:active { border-width: 2px 1px 1px 2px; border-color: var(--chrome-indigo) var(--chrome-light) var(--chrome-light) var(--chrome-indigo); transform: translate(1px, 1px); } /* Level 3 — command slab (above the chrome): carbon + halftone dot matrix. The only gradient in the system, and it is a texture, not a wash. */ .slab { background-color: var(--carbon); background-image: radial-gradient(circle at 50% 50%, rgba(159, 190, 231, 0.1) 0.5px, transparent 0.6px); background-size: 3px 3px; border-top: 1px solid #3a3f52; border-bottom: 1px solid #000000; } /* Chamfer — the largest slabs are cut, not rounded. clip-path destroys borders on the cut edges, so a chamfered slab is two stacked clipped layers. */ .chamfer-outer { background: var(--chrome-indigo); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); } .chamfer-inner { margin: 1px; clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); } /* Top-left-only chamfer, for the masthead. */ .chamfer-tl-outer { background: var(--chrome-indigo); clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); } .chamfer-tl-inner { margin: 1px; clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px); } /* ---------- Type roles ---------- */ .t-hero-tagline { font-size: 16px; line-height: 1.35; font-weight: 700; } .t-label { font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .t-link { font-size: 14px; line-height: 1.4; font-weight: 700; } .t-body { font-size: 14px; line-height: 1.55; font-weight: 400; } .t-readout { font-size: 15px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; } .t-micro { font-size: 11px; line-height: 1.35; font-weight: 400; } .t-stencil { font-family: var(--font-stencil); font-size: 16px; line-height: 1; } /* The outlined-display law. A wordmark is never flat text. */ .wordmark { font-family: var(--font-display); text-transform: uppercase; color: var(--surface); letter-spacing: 0.01em; margin: 0; -webkit-text-stroke: 5px var(--carbon); paint-order: stroke fill; /* stroke behind fill — letterforms stay full */ text-shadow: 3px 3px 0 var(--chrome-indigo); /* hard offset, zero blur */ } .wordmark-hero { font-size: 52px; line-height: 1; } .wordmark-plate { font-size: 26px; line-height: 1.05; -webkit-text-stroke: 3px var(--carbon); text-shadow: 2px 2px 0 var(--chrome-indigo); } /* ---------- The machine ---------- */ .machine { width: 1000px; margin: 0 auto; padding: 8px; background: var(--canvas); border-top: 1px solid var(--chrome-light); border-left: 1px solid var(--chrome-light); border-right: 1px solid var(--chrome-indigo); border-bottom: 1px solid var(--chrome-indigo); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); } /* Plates butt against each other on a 12px seam. */ .machine > * + * { margin-top: var(--md); } /* ---------- Masthead ---------- */ /* The chamfer's clip-path would clip anything leaning out of the masthead, so the roaster cutout lives in the unclipped block, not inside the plate. */ .mast-block { position: relative; } .masthead { min-height: 148px; display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, auto); gap: var(--md); align-items: center; padding: var(--md); padding-left: 200px; /* the reserved slot the roaster stands in */ background: var(--canvas); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); } /* The drum roaster breaks the masthead's bottom edge and sits on top of the carbon nav slab — a manufactured object above the chrome, not inside a box. */ /* Sized by HEIGHT, not width: the cutout PNG is trimmed hard to its content, so its bottom row IS the roaster's feet + baked shadow. 184px tall against the 148px masthead, pulled down 36px, puts ~30px of solid roaster body ON the carbon nav. */ .masthead-roaster { position: absolute; left: 16px; bottom: -36px; /* 12px seam + 24px of nav overlap */ z-index: 3; height: 184px; width: auto; } .bubble { position: relative; justify-self: start; max-width: 300px; background: var(--surface); border: 1px solid var(--carbon); border-radius: var(--r-lg); padding: var(--sm) var(--md); color: var(--carbon); } .bubble::before { content: ""; position: absolute; left: -10px; top: 14px; width: 10px; height: 18px; background: var(--carbon); clip-path: polygon(0 50%, 100% 0, 100% 100%); } .bubble::after { content: ""; position: absolute; left: -8px; top: 16px; width: 9px; height: 14px; background: var(--surface); clip-path: polygon(0 50%, 100% 0, 100% 100%); } .masthead-right { text-align: right; } .masthead-strip { display: inline-block; margin: var(--sm) 0 0; padding: 6px var(--sm); color: var(--carbon); } /* On desktop the bubble sits left of the wordmark; on mobile the masthead goes to block flow and the DOM order (wordmark, then bubble) takes over. */ .bubble { order: 0; } .masthead-right { order: 1; min-width: 0; text-align: right; } /* Breaks the wordmark as FIRST CRACK / COFFEE ROASTERS without forcing a nowrap that could overflow the plate when the machine goes fluid. */ .wordmark-hero span { display: block; } /* ---------- nav-primary (Level 3) ---------- */ .nav-primary { position: relative; z-index: 1; height: 48px; display: flex; align-items: center; gap: var(--md); padding: 0 var(--sm); } /* The pill is a link, so it takes the 44px touch floor like every other control — the hit area is 44px tall, while the racetrack it draws stays the reference's 28px. The visual is the inner face; the anchor is the target. */ .logo-pill { flex: 0 0 auto; display: inline-flex; align-items: center; height: 44px; text-decoration: none; } .logo-pill-face { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--md); background: var(--surface); border: 1px solid var(--carbon); border-radius: var(--r-full); font-family: var(--font-display); font-size: 13px; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--carbon); white-space: nowrap; } .nav-words { display: flex; align-items: stretch; gap: 0; margin: 0 auto; height: 44px; } .nav-word { display: inline-flex; align-items: center; padding: 0 14px; color: var(--nav-gold); /* 5.68:1 on carbon */ text-decoration: none; font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; border-bottom: 3px solid transparent; transition: color 90ms linear; } .nav-word:hover { color: var(--amber); } /* Active page: the word turns white and its cell takes a 3px amber bottom rule. Active state is a mark (amber), never a forward cue (signal). */ .nav-word[aria-current="page"] { color: var(--surface); border-bottom-color: var(--amber); } .nav-utils { flex: 0 0 auto; display: flex; gap: var(--sm); } .util-chip { display: inline-flex; align-items: center; height: 44px; padding: 0 var(--md); background: var(--amber); /* carbon on amber: 7.70:1 */ color: var(--carbon); border-radius: var(--r-xs); text-decoration: none; font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; } /* ---------- nav-secondary ---------- */ .nav-secondary { height: 44px; display: flex; align-items: stretch; background: var(--canvas-soft); border-top: 1px solid var(--chrome-indigo); border-left: 1px solid var(--chrome-indigo); border-right: 1px solid var(--chrome-light); border-bottom: 1px solid var(--chrome-light); } .subnav-link { display: inline-flex; align-items: center; padding: 0 var(--md); color: var(--carbon); /* 8.10:1 on canvas-soft */ text-decoration: none; font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; border-right: 1px solid var(--chrome-indigo); white-space: nowrap; } .subnav-link:first-child { border-left: 1px solid var(--chrome-indigo); } .subnav-link:hover { background: var(--surface); } /* ---------- Mobile nav (below 720px) ---------- */ .nav-mobile { display: none; position: relative; z-index: 2; height: 56px; align-items: center; justify-content: space-between; padding: 0 var(--sm); } .nav-disclosure { position: static; } /* Resting fill is --carbon: carbon-lift is reserved as the HOVER fill on command-layer buttons, so a resting carbon-lift would read as stuck-on-hover. */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; height: 44px; padding: 0 var(--md); background: var(--carbon); border: 1px solid #3a3f52; color: var(--surface); font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; list-style: none; transition: background-color 90ms linear; } .nav-toggle:hover { background: var(--carbon-lift); /* white holds at 13.09:1 */ } .nav-toggle::-webkit-details-marker { display: none; } .nav-panel { position: absolute; left: 0; right: 0; top: 56px; z-index: 5; padding: var(--sm); background-color: var(--carbon); background-image: radial-gradient(circle at 50% 50%, rgba(159, 190, 231, 0.1) 0.5px, transparent 0.6px); background-size: 3px 3px; border: 1px solid #000000; } .nav-panel-word { display: flex; align-items: center; min-height: 44px; padding: 0 var(--sm); color: var(--nav-gold); text-decoration: none; font-size: 15px; line-height: 1; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .nav-panel-word[aria-current="page"] { color: var(--surface); } .nav-panel-sub { display: flex; align-items: center; min-height: 44px; padding: 0 var(--sm); color: var(--canvas-soft); /* 8.10:1 on carbon */ text-decoration: none; font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } /* ---------- Split: 636px content column + 336px command rail ---------- */ .split { display: grid; grid-template-columns: 1fr 336px; gap: var(--md); align-items: start; } /* The rail is command layer, not content: it is a control panel of fixed modules, so NOTHING in it stretches to match the content column's height. Every module is its natural size (`align-self: start` here, `flex: 0 0 auto` on the chassis), and the panel TRAVELS with the viewport instead — see the sticky rule in the responsive section. */ .rail { align-self: start; display: flex; flex-direction: column; } .content > * + *, .rail > * + * { margin-top: var(--md); } /* ---------- rail-chassis: the status readout at the foot of the command rail ---------- */ /* A real module, not a filler: the machine's duty cycle as instrument readouts. It is sized by its content and never grows. */ .rail-chassis { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--sm); padding: var(--sm); } .rail-chassis > .section-label-bar { margin: calc(-1 * var(--sm)) calc(-1 * var(--sm)) 0; } .chassis-readouts { display: flex; flex-direction: column; gap: 6px; } .chassis-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sm); } .chassis-row dt { color: var(--canvas-soft); /* 8.10:1 on carbon */ font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } /* A readout field: white Level-0 inset recessed into the carbon chassis. */ .chassis-row dd { min-width: 118px; padding: 3px var(--sm); background: var(--surface); border-top: 1px solid var(--chrome-indigo); border-left: 1px solid var(--chrome-indigo); border-right: 1px solid var(--chrome-light); border-bottom: 1px solid var(--chrome-light); border-radius: var(--r-xs); text-align: right; color: var(--carbon); /* 15.48:1 */ font-size: 15px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .rail-chassis .dotted-divider { margin: 0; } .chassis-badge { align-self: flex-start; background: var(--amber); /* a classification mark — a fill, never ink */ color: var(--carbon); /* 7.70:1 */ border-radius: var(--r-xs); padding: 3px 6px; font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } /* ---------- section-label-bar ---------- */ .section-label-bar { display: flex; align-items: center; gap: var(--sm); height: 32px; padding: 0 var(--sm); background: var(--canvas); border-top: 1px solid var(--chrome-light); border-left: 1px solid var(--chrome-light); border-right: 1px solid var(--chrome-indigo); border-bottom: 1px solid var(--chrome-indigo); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); } /* CSS-drawn 10x10 carbon 2x2 grid glyph */ .label-glyph { flex: 0 0 auto; width: 10px; height: 10px; background-image: linear-gradient(var(--carbon), var(--carbon)), linear-gradient(var(--carbon), var(--carbon)), linear-gradient(var(--carbon), var(--carbon)), linear-gradient(var(--carbon), var(--carbon)); background-size: 4px 4px; background-position: 0 0, 6px 0, 0 6px, 6px 6px; background-repeat: no-repeat; } /* Every label-bar title, whatever its heading level. The form panels on beans use

(they sit under the section's

), so h3 must carry the chrome voice too — without it they fall back to the browser's default h3 and dwarf the DOSE key. / .section-label-bar h1, .section-label-bar h2, .section-label-bar h3 { margin: 0; color: var(--carbon); / 4.55:1 on canvas — the only legal ink on periwinkle / font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } / ---------- Module (a plate with a label bar) ---------- / .module { padding: var(--md); } .module-lg { padding: var(--lg); } .module > .section-label-bar { margin: calc(-1 var(--md)) calc(-1 * var(--md)) var(--md); } .module-lg > .section-label-bar { margin: calc(-1 * var(--lg)) calc(-1 * var(--lg)) var(--md); } /* Every framed image takes a 1px chrome-indigo edge. / .framed { width: 100%; height: auto; border: 1px solid var(--chrome-indigo); } / Body copy never sits directly on the periwinkle canvas. / .prose { padding: var(--md); color: var(--carbon); } .framed + .inset, .framed + .prose, .framed + .form-panels, .framed + .visit-grid { margin-top: var(--md); } / ---------- Hero field (the page tint) ---------- / .hero-field { background: var(--tint); padding: var(--md); } .hero-figure { position: relative; } .hero-figure .wordmark { position: absolute; left: var(--md); bottom: var(--md); z-index: 2; } .hero-tagline { margin-top: var(--md); color: var(--carbon); / 7.23:1 on tint-index, 10.25:1 on tint-beans / } / On the about page's teal field, carbon fails (2.33:1) — support text is white. / body[data-page="about"] .hero-tagline { color: var(--surface); / 6.64:1 on tint-about / } .hero-row { display: flex; align-items: center; justify-content: space-between; gap: var(--md); margin-top: var(--md); } / ---------- system-tile ---------- / .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--md); } .system-tile { position: relative; display: flex; flex-direction: column; gap: var(--sm); padding: var(--sm); border-radius: var(--r-sm); } .stencil-tab { align-self: flex-start; padding: 3px var(--sm); background: var(--carbon); color: var(--canvas-soft); / 8.10:1 / font-family: var(--font-stencil); font-size: 16px; line-height: 1; } .tile-figure { position: relative; } / The wordmark is inset 8px from the frame on the left, bottom AND right. Binding `right` is what stops a long origin from pushing its stroke through the chrome-indigo edge — a wordmark may never cross the frame it is printed on. / .tile-figure .wordmark { position: absolute; left: var(--sm); right: var(--sm); bottom: var(--sm); z-index: 2; font-size: 22px; white-space: nowrap; } / YIRGACHEFFE and SAN AGUSTIN do not fit a 204px tile at Plate size. Drop them one step (and untrack them) rather than let them break the frame or wrap to two lines. / .tile-figure .wordmark-long { font-size: 18px; letter-spacing: 0; } .roast-mark { align-self: flex-start; padding: 3px 6px; background: var(--amber); / a classification mark — a fill, never ink / color: var(--carbon); / 7.70:1 / border-radius: var(--r-xs); font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .spec-strip { padding: 5px var(--sm); color: var(--carbon); font-size: 11px; line-height: 1.35; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; font-variant-numeric: tabular-nums; } .tile-foot { display: flex; align-items: center; justify-content: flex-end; margin-top: auto; } / ---------- button-icon-arrow: 44px signal disc, 2px carbon ring ---------- / .button-icon-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; background: var(--signal); border: 2px solid var(--carbon); / the ring, not the fill, proves the edge / border-radius: var(--r-full); transition: background-color 90ms linear; } .button-icon-arrow:hover { background: var(--signal-press); } .button-icon-arrow:active { transform: translate(1px, 1px); } / ---------- spec-row + button-arrow-chip ---------- / .spec-rows > + * { margin-top: var(--sm); } .spec-row { display: flex; align-items: center; gap: var(--md); min-height: 44px; padding: 10px; border-radius: var(--r-sm); text-decoration: none; } .spec-glyph { flex: 0 0 auto; width: 12px; height: 12px; background: var(--carbon); } .spec-body { flex: 1 1 auto; min-width: 0; } /* A row title is a structural label, so it is uppercase — but Link never tracks, so no letter-spacing here. / .spec-title { display: block; color: var(--chrome-indigo); / 5.65:1 on platinum — the one place indigo is readable / font-size: 14px; line-height: 1.4; font-weight: 700; text-transform: uppercase; } .spec-note { display: block; color: var(--carbon); font-size: 11px; line-height: 1.35; } .button-arrow-chip { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 auto; background: var(--signal); border: 1px solid var(--carbon); border-radius: var(--r-xs); transition: background-color 90ms linear; } .spec-row:hover .button-arrow-chip { background: var(--signal-press); } .spec-row:active { transform: translate(1px, 1px); } / ---------- The roast module (image left, spec rows right) ---------- / .roast-grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--md); align-items: start; } / ---------- form-panel (the brew guide) ---------- / .form-panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--md); } .form-panel { border-radius: var(--r-md); overflow: hidden; } .form-body { padding: var(--lg); background: var(--platinum); border-top: 1px solid var(--chrome-indigo); border-left: 1px solid var(--chrome-indigo); border-right: 1px solid var(--chrome-light); border-bottom: 1px solid var(--chrome-light); } .param { display: flex; align-items: center; justify-content: space-between; gap: var(--sm); padding: var(--xs) 0; } .field-label { color: var(--carbon); font-size: 14px; line-height: 1.4; font-weight: 700; text-transform: uppercase; } .readout { min-width: 104px; padding: 5px var(--sm); background: var(--surface); border-top: 1px solid var(--chrome-indigo); border-left: 1px solid var(--chrome-indigo); border-right: 1px solid var(--chrome-light); border-bottom: 1px solid var(--chrome-light); border-radius: var(--r-xs); text-align: right; color: var(--carbon); font-size: 15px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; } / ---------- dotted-divider ---------- / .dotted-divider { height: 0; margin: var(--md) 0; border-top: 1px dotted var(--muted-indigo); / dotted, never solid / } / ---------- rail ---------- / .order-beans { display: flex; align-items: center; justify-content: center; gap: var(--sm); width: 100%; height: 48px; background: var(--signal); color: var(--carbon); / 6.45:1 — signal never carries white / border-radius: var(--r-xs); text-decoration: none; font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; transition: background-color 90ms linear; } .order-beans:hover { background: var(--signal-press); / carbon holds at 5.13:1 / } .rail-button { display: flex; align-items: center; gap: var(--md); width: 100%; height: 44px; padding: 0 var(--md); background-color: var(--carbon); background-image: radial-gradient(circle at 50% 50%, rgba(159, 190, 231, 0.1) 0.5px, transparent 0.6px); background-size: 3px 3px; border-top: 1px solid #3a3f52; border-bottom: 1px solid #000000; color: var(--surface); / 15.48:1 / text-decoration: none; font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; transition: background-color 90ms linear; } .rail-button:hover { background-color: var(--carbon-lift); / white holds at 13.09:1 / } / CSS-drawn 12px leading glyph / .rail-glyph { flex: 0 0 auto; width: 12px; height: 12px; border: 2px solid var(--canvas-soft); } .rail-module { padding: var(--sm); border-radius: var(--r-sm); } .rail-module > .section-label-bar { margin: calc(-1 var(--sm)) calc(-1 * var(--sm)) var(--sm); } /* ---------- Calendar widget (the roast schedule) ---------- / .calendar { border-radius: var(--r-sm); padding: var(--sm); } .calendar-caption { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sm); height: 28px; margin: calc(-1 var(--sm)) calc(-1 * var(--sm)) var(--sm); padding: 0 var(--md); background-color: var(--carbon); background-image: radial-gradient(circle at 50% 50%, rgba(159, 190, 231, 0.1) 0.5px, transparent 0.6px); background-size: 3px 3px; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px); } /* Silkscreen only renders crisply on its native pixel grid, so it is set at 16px and nowhere else. / .calendar-month { font-family: var(--font-stencil); font-size: 16px; line-height: 1; text-transform: uppercase; color: var(--canvas-soft); / 8.10:1 / } .calendar-year { font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; color: var(--canvas-soft); font-variant-numeric: tabular-nums; } / Weekday header row: a platinum Level-0 inset. / .calendar-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--platinum); border-top: 1px solid var(--chrome-indigo); border-left: 1px solid var(--chrome-indigo); border-right: 1px solid var(--chrome-light); border-bottom: 1px solid var(--chrome-light); } .calendar-head span { padding: 6px 0; text-align: center; color: var(--carbon); font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); border-left: 1px solid var(--platinum); border-top: 1px solid var(--platinum); } / Day cells are static text, not buttons — no focus, no click, so the 44px touch floor does not apply. / .calendar-cell { position: relative; display: flex; align-items: center; justify-content: center; height: 34px; background: var(--surface); border-right: 1px solid var(--platinum); border-bottom: 1px solid var(--platinum); color: var(--carbon); / 15.48:1 / font-size: 11px; line-height: 1; font-weight: 400; font-variant-numeric: tabular-nums; } .calendar-cell.is-blank { background: var(--surface); } / Roast days: a signal square with a 1px carbon ring (orange on white is only 2.40:1 and cannot prove its own edge), numeral in carbon on top (6.45:1). / .calendar-cell.is-roast::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; / a square marker, whatever the cell's width / height: 26px; background: var(--signal); border: 1px solid var(--carbon); border-radius: var(--r-xs); } .calendar-cell.is-roast span { position: relative; z-index: 1; font-weight: 700; } .calendar-legend { display: flex; align-items: center; gap: var(--sm); margin: 0; color: var(--carbon); } .legend-swatch { width: 11px; height: 11px; flex: 0 0 auto; background: var(--signal); border: 1px solid var(--carbon); border-radius: var(--r-xs); } .calendar-note { margin-top: var(--sm); color: var(--carbon); font-size: 14px; line-height: 1.55; } / ---------- info-box ---------- / .info-box { position: relative; margin-top: 14px; padding: var(--md); background: var(--surface); border: 1px solid var(--carbon); border-radius: var(--r-sm); color: var(--carbon); } .info-tab { position: absolute; top: -12px; left: var(--md); padding: 3px var(--sm); background: var(--amber); / 7.70:1 with carbon / color: var(--carbon); border: 1px solid var(--carbon); border-radius: var(--r-xs); font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; } .info-box-body { margin-top: var(--sm); } / ---------- cta-band ---------- / / The copy stack sits on the 16px padding line and the band's height tracks its CONTENT — the render is capped so it can no longer inflate the band and leave the wordmark floating in a field of lavender. / .cta-band { background: var(--tint-index); display: grid; grid-template-columns: 1fr auto; gap: var(--md); align-items: start; padding: var(--lg); } .cta-copy > + * { margin-top: var(--md); } .cta-band .order-beans { max-width: 260px; } /* The machine stands on the band's bottom padding line, at the masthead's scale. / .cta-roaster { height: 168px; width: auto; align-self: end; justify-self: end; } / ---------- footer ---------- / .footer { padding: var(--xl); background-color: var(--carbon); background-image: radial-gradient(circle at 50% 50%, rgba(159, 190, 231, 0.1) 0.5px, transparent 0.6px); background-size: 3px 3px; color: var(--canvas-soft); / 8.10:1 / } .footer-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lg); flex-wrap: wrap; } .footer p { font-size: 11px; line-height: 1.35; color: var(--canvas-soft); } .footer a { color: var(--canvas-soft); text-decoration: none; border-bottom: 1px dotted var(--canvas-soft); } .footer a:hover { color: var(--surface); border-bottom-color: var(--surface); } .footer-links { display: flex; flex-wrap: wrap; gap: var(--md); } / The 44px hit area is a box taller than the word, so a bottom BORDER would draw the rule 14px under the text and read as a stray hairline. The underline rides the glyphs instead, which is what an underline is. / .footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; border-bottom: none; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--canvas-soft); text-underline-offset: 3px; } .footer-links a:hover { text-decoration-color: var(--surface); } .footer-badge { display: inline-block; padding: 6px var(--sm); background: var(--amber); color: var(--carbon); / 7.70:1 / border-radius: var(--r-xs); font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } / ---------- beans: full-width origin tile ---------- / .origin-wide { display: grid; grid-template-columns: 280px 1fr; gap: var(--md); padding: var(--sm); border-radius: var(--r-sm); } .origin-wide-figure { position: relative; } .origin-wide-figure .wordmark { position: absolute; left: var(--sm); right: var(--sm); / same law as the tile: never cross the frame's chrome-indigo edge / bottom: var(--sm); z-index: 2; white-space: nowrap; } .origin-wide-body { display: flex; flex-direction: column; gap: var(--sm); padding: var(--md); color: var(--carbon); } .origin-wide-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sm); } .notes-list { display: flex; flex-direction: column; gap: var(--xs); } .note-key { color: var(--carbon); font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .origin-wide-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--md); margin-top: auto; } / ---------- Visit rows ---------- / .visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--md); } .visit-block { padding: var(--md); border-radius: var(--r-sm); color: var(--carbon); } .visit-block dt { font-size: 11px; line-height: 1.15; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--carbon); } .visit-block dd { font-size: 14px; line-height: 1.55; font-variant-numeric: tabular-nums; } .visit-block dd + dt { margin-top: var(--sm); } / ========================================================================== Responsive — this is a pre-responsive design; the collapse is authored. ========================================================================== / / >=720px: the rail is pinned to the viewport. The command layer travels with the reader instead of being padded out to the content column's height, so the right third of the faceplate is never a bare field — and nothing stretches to fill it. The rail's own stack (917-1256px, taller than a desktop viewport) is clamped to its grid area, so it releases and scrolls out at the column's foot. The nav is not fixed, so the only offset needed is the 12px plate seam. / @media (min-width: 720px) { .rail { position: sticky; top: var(--md); } } / 720-1023px: the machine goes fluid. / @media (max-width: 1023px) { .machine { width: 100%; max-width: 1000px; margin: 0 12px; width: calc(100% - 24px); } .split { grid-template-columns: 1fr 300px; } .nav-secondary { overflow-x: auto; -webkit-overflow-scrolling: touch; } .roast-grid { grid-template-columns: 200px 1fr; } .origin-wide { grid-template-columns: 220px 1fr; } } / <720px: rail stacks beneath the content column; the dual nav collapses into one 56px carbon bar with a disclosure panel. Plates keep every bevel. / @media (max-width: 719px) { .nav-primary, .nav-secondary { display: none; } .nav-mobile { display: flex; } .split { grid-template-columns: 1fr; } .rail { margin-top: var(--md); } .masthead { display: block; min-height: 0; padding: var(--md); padding-right: 124px; } .masthead-right { text-align: left; } .bubble { margin-top: var(--md); max-width: none; } / The collapsed bar puts the 44px MENU toggle directly under the roaster's slot, and the toggle is centred in the 56px bar (6px of carbon above it). So the overlap is cut from 30px to 16px: the legs and their cast shadow break across the 12px seam onto the bar's empty top strip and stop clear of the toggle's top border. / .masthead-roaster { left: auto; right: 8px; bottom: -16px; height: 140px; width: auto; } .wordmark-hero { font-size: 34px; line-height: 1.02; -webkit-text-stroke: 4px var(--carbon); } .wordmark-plate { font-size: 22px; line-height: 1.05; } .t-hero-tagline { font-size: 15px; line-height: 1.4; } .nav-word, .subnav-link { font-size: 15px; } .tiles { grid-template-columns: 1fr; } .roast-grid, .form-panels, .origin-wide, .visit-grid, .cta-band { grid-template-columns: 1fr; } .hero-figure .wordmark, .tile-figure .wordmark, .origin-wide-figure .wordmark { font-size: 20px; } .cta-roaster { height: 150px; width: auto; } .footer { padding: var(--lg); } } / Under reduced motion, drop the 1px press translate. Keep the bevel inversion and the fill change — those are state, not motion. */ @media (prefers-reduced-motion: reduce) { .chip:active, .spec-row:active, .button-icon-arrow:active { transform: none; } }