/* ============================================================ HALFTONE TEXTILE MFG — V2 · THE SPECIFICATION Paper-white spec sheets ruled with hairlines; black photography cut hard against them. Anton for the numbers a buyer decides on, IBM Plex Mono for everything that qualifies them, Barlow for prose. One signal accent with seven permitted uses. Nothing drifts, nothing floats, nothing slides in from the side. Assembled from _fable/build/css/*.css — edit the partials. ============================================================ */ :root { /* faces */ --display: "Anton", "Arial Narrow", sans-serif; --barlow: "Barlow", "Helvetica Neue", sans-serif; --mono: "IBM Plex Mono", "SFMono-Regular", monospace; /* colour: paper, ink, two greys, one signal (live dot, focus, invalid, required tick, Last-down marker, map node, active stage — never text) */ --ink: #080808; --paper: #fcfbf9; /* printed stock, not screen white */ --mid: #4a4a4a; --faint: #8a8a8a; --signal: #d62b12; --rule: rgba(8, 8, 8, .16); --rule-grid: rgba(8, 8, 8, .07); --rule-paper: rgba(255, 255, 255, .28); --rule-paper-soft: rgba(255, 255, 255, .14); --a-1: .92; --a-2: .76; --a-3: .55; --a-4: .3; --a-5: .14; /* the sheet: one container, twelve columns. Grows to 2560, caps after. */ --gut: clamp(1.25rem, .92rem + 1.7vw, 5.5rem); --max: clamp(1560px, 84vw, 2280px); --col-gap: clamp(.9rem, .6rem + 1vw, 2rem); --head-h: 78px; /* type: rem + vw middles, never a pure vw. The H1 alone also caps on vh so three lines never push the ticket strip out of the first viewport. */ --fs-hero: clamp(2.6rem, min(1rem + 9vw, 14vh), 14.5rem); /* owner: stands out without overpowering big screens */ --fs-h2: clamp(2rem, 1rem + 3.6vw, 5.6rem); --fs-h3: clamp(1.25rem, 1.02rem + 1.1vw, 2.6rem); --fs-num: clamp(3rem, 1.5rem + 6.4vw, 9rem); --fs-num-sm: clamp(1.5rem, 1.05rem + 2.1vw, 3.4rem); --fs-lede: clamp(1.05rem, .98rem + .36vw, 1.5rem); --fs-body: clamp(.95rem, .9rem + .2vw, 1.1rem); --fs-mono: clamp(.72rem, .69rem + .12vw, .82rem); --fs-mono-sm: clamp(.64rem, .62rem + .08vw, .7rem); --track-h1: .018em; --track-display: .024em; --track-num: .02em; --track-mono: .14em; --track-mono-wide: .22em; --lh-h1: .97; --lh-display: 1; --lh-body: 1.55; --lh-mono: 1.3; --measure-lede: 44ch; --measure-body: 62ch; --measure-say: 38ch; /* rhythm: steps, not one padding for everything */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 20px; --s-5: 32px; --s-6: clamp(2.4rem, 1.6rem + 2vw, 4rem); --sec-pad: clamp(3.5rem, 1.8rem + 4.8vw, 9.5rem); --sec-pad-tight: calc(var(--sec-pad) * .55); --sec-pad-photo: clamp(1.5rem, .8rem + 2vw, 3.5rem); /* photo grades — CSS filters only, never a floor process */ --grade-doc: grayscale(1) contrast(1.08) brightness(.9); --grade-plate: grayscale(1) contrast(1.38) brightness(.8); /* motion: a mechanical click for states, the press ease for reveals */ --click: 90ms steps(3, end); --press-ease: cubic-bezier(.22, 1, .36, 1); } @media (max-width: 620px) { :root { --head-h: 66px; } } @media (min-width: 1280px) { :root { --head-h: 86px; } } @media (min-width: 1800px) { :root { --head-h: 92px; } } @media (prefers-reduced-motion: reduce) { :root { --click: 0ms linear; } } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--barlow); font-size: var(--fs-body); line-height: var(--lh-body); background: var(--paper); color: var(--ink); } html { overflow-x: clip; } /* 3D reveal start states must never add a horizontal scrollbar */ img, video, svg { display: block; max-width: 100%; } :where(img[width][height]) { height: auto; } /* zero specificity: any class rule (height: 100% in a frame) wins */ a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } ol, ul { list-style: none; } b, strong { font-weight: 600; } h1, h2, h3 { font-weight: 400; } em { font-style: normal; } ::selection { background: var(--ink); color: var(--paper); } .mono { font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; line-height: var(--lh-mono); letter-spacing: var(--track-mono); text-transform: uppercase; } .mono-sm { font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 500; line-height: var(--lh-mono); letter-spacing: var(--track-mono); text-transform: uppercase; } .mono, .mono-sm, .ledger, .num { font-variant-numeric: tabular-nums lining-nums; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* a ring on every stop: signal on paper, paper on ink */ :where(a, button, summary, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 0; } :where([data-tone="ink"], .vhero, .vhdr:not(.is-stuck), .vmenu, .vftr2) :where(a, button, summary, input, textarea, select, [tabindex]):focus-visible { outline-color: var(--paper); } /* ---------- the sheet ---------- */ .wrap2 { position: relative; width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .wrap2 > * { grid-column: 1 / -1; min-width: 0; position: relative; z-index: 1; } /* section heads: three layouts, rotated so no two neighbours match. split — H2 left, lede right on the same row (kills the empty right half) ledger — H2 + lede left, an inline key row right stack — H2 alone, media takes the next row */ .wrap2 > .chap { grid-column: 1 / -1; } section > .wrap2 > h2 { grid-column: 1 / span 7; align-self: end; } .wrap2 > .say { grid-column: 9 / span 4; align-self: end; } [data-intro="ledger"] > .wrap2 > h2 { grid-column: 1 / span 6; } [data-intro="ledger"] > .wrap2 > .say { grid-column: 1 / span 5; align-self: start; } [data-intro="ledger"] > .wrap2 > .key { grid-column: 7 / -1; grid-row: 2; align-self: start; margin-top: .1em; } [data-intro="stack"] > .wrap2 > h2 { grid-column: 1 / span 6; } [data-intro="stack"] > .wrap2 > .say { grid-column: 1 / span 5; align-self: start; } @media (max-width: 900px) { .wrap2 > * { grid-column: 1 / -1 !important; grid-row: auto !important; align-self: auto !important; } /* desktop row placements (key rows, media) must not reorder the phone */ .wrap2 > .say { margin-top: var(--s-4); } [data-intro] > .wrap2 > .key, .wrap2 > .key { margin-top: var(--s-4); } } /* the layout sheet's faint blue lines — paper sections, wide screens only. Ship OFF; add class="gridlines" to to review them at 1512 and 2560 */ .wrap2 > .gridlines { position: absolute; inset: 0 var(--gut); z-index: 0; display: none; pointer-events: none; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); } .wrap2 > .gridlines i { border-left: 1px solid var(--rule-grid); } .wrap2 > .gridlines i:last-child { border-right: 1px solid var(--rule-grid); } /* the layout sheet's column lines ship ON for wide paper sheets (the old html.gridlines toggle matched the overlay rule itself and hid the root) */ @media (min-width: 1280px) { [data-tone="paper"] > .wrap2 > .gridlines { display: grid; } } html.no-gridlines .wrap2 > .gridlines { display: none !important; } /* chapter headlines: solid Anton, open tracking, never outlined */ section > .wrap2 > h2, .h2 { font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: var(--track-display); text-transform: uppercase; overflow-wrap: normal; hyphens: manual; } .h3 { font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-display); letter-spacing: var(--track-display); text-transform: uppercase; } .say { font-size: var(--fs-lede); line-height: 1.5; color: var(--mid); max-width: var(--measure-say); } [data-intro="ledger"] .say, [data-intro="stack"] .say { max-width: var(--measure-lede); margin-top: var(--s-4); } .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--mid); max-width: var(--measure-body); } /* section rhythm */ section { padding-block: var(--sec-pad); position: relative; } /* printed stock: a whisper of grain on every paper sheet (multiply, 5%) */ section[data-tone="paper"]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .05; background: url("data:image/svg+xml;utf8,") 0 0 / 240px 240px; } @media (prefers-reduced-motion: reduce), (max-width: 680px) { section[data-tone="paper"]::before { opacity: .035; } } section[data-pad="tight"] { padding-block: var(--sec-pad-tight) var(--sec-pad); } section[data-pad="photo"] { padding-block: var(--sec-pad-photo); } section[data-pad="open"] { padding-block: var(--sec-pad) 0; } section[id] { scroll-margin-top: calc(var(--head-h) + 1.2rem); } [data-tone="ink"] { background: var(--ink); color: var(--paper); } [data-tone="ink"] .say, [data-tone="ink"] .body { color: rgba(255, 255, 255, var(--a-2)); } /* ============================================================ PRIMITIVES — the parts every sheet is built from ============================================================ */ /* registration marks, colour-agnostic (mask, not background) so the same mark prints ink on paper and paper on ink */ .xhair, .reg, .chap::after { display: inline-block; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .xhair { width: 14px; height: 14px; opacity: .6; } .reg { width: 26px; height: 26px; opacity: .45; } /* chapter plate: a boxed machine label under the standing job line. Markup:

03After the ink

Stays a DIRECT child of .wrap2 (the chapter-mark JS depends on it). */ .chap { display: inline-flex; align-items: center; gap: var(--s-3); justify-self: start; margin-bottom: var(--s-5); color: var(--ink); } .chap > b { display: inline-grid; place-items: center; min-width: 2.4em; padding: .3rem .55rem .36rem; border: 1px solid currentColor; font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--track-num); } .chap > span { color: var(--mid); white-space: nowrap; } .chap > em { letter-spacing: var(--track-mono-wide); } .chap::after { content: ""; width: 14px; height: 14px; opacity: .55; } [data-tone="ink"] .chap { color: var(--paper); } [data-tone="ink"] .chap > span { color: rgba(255, 255, 255, var(--a-3)); } /* the key row: a mono ledger set beside a section head (data-intro="ledger") */ .key { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); border-top: 2px solid var(--ink); } .key > div { padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-rows: auto 1fr; } .key > div + div { padding-left: var(--s-4); border-left: 1px solid var(--rule); } .key dt { font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mid); } .key dd { margin-top: .2rem; align-self: end; font-family: var(--display); font-size: var(--fs-num-sm); line-height: 1; letter-spacing: var(--track-num); text-transform: uppercase; } .key dd.is-text { font-family: var(--barlow); font-size: var(--fs-body); text-transform: none; letter-spacing: 0; line-height: 1.4; color: var(--ink); } /* ---------- buttons: square, mono, mechanical ---------- */ .btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 44px; padding: .85rem 1.3rem; border: 2px solid currentColor; font-family: var(--mono); font-size: var(--fs-mono); font-weight: 600; line-height: 1; letter-spacing: var(--track-mono); text-transform: uppercase; white-space: nowrap; transition: color var(--click), background-color var(--click), border-color var(--click); } .btn:active { translate: 1px 1px; } .btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn--ink:hover { background: var(--paper); color: var(--ink); } .btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); } .btn--paper:hover { background: var(--ink); color: var(--paper); } .btn--rule { background: transparent; } .btn--rule:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } :where([data-tone="ink"], .vhero, .vftr2, .vmenu) .btn--rule { color: var(--paper); } :where([data-tone="ink"], .vhero, .vftr2, .vmenu) .btn--rule:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } /* the ink wipe: the primary CTA fills like a squeegee pass */ .btn--wipe::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--paper); transform: scaleX(0); transform-origin: 0 50%; transition: transform .32s var(--press-ease); } .btn--wipe:hover::before { transform: scaleX(1); } .btn--wipe:hover { background: var(--ink); color: var(--ink); } .btn--paper.btn--wipe::before { background: var(--ink); } .btn--paper.btn--wipe:hover { background: var(--paper); color: var(--paper); } .btn[disabled] { opacity: var(--a-3); cursor: progress; } .btn--sm { min-height: 38px; padding: .6rem 1rem; font-size: var(--fs-mono-sm); } /* text link with a rule that grows under it (rows, nav, detail links) */ .rowlink { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-family: var(--mono); font-size: var(--fs-mono); font-weight: 600; letter-spacing: var(--track-mono); text-transform: uppercase; } .rowlink::after { content: ""; position: absolute; left: 0; right: 100%; bottom: .35rem; height: 2px; background: currentColor; transition: right var(--click); } .rowlink:hover::after, .rowlink:focus-visible::after { right: 0; } .rowlink:active { translate: 1px 1px; } .rowlink > span { transition: translate var(--click); } .rowlink:hover > span { translate: 2px -2px; } /* ---------- ledgers: where a competitor puts a slogan ---------- */ .ledger { width: 100%; border-collapse: collapse; border-top: 2px solid currentColor; } .ledger th, .ledger td { padding: clamp(.7rem, .5rem + .6vw, 1.15rem) 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: baseline; } .ledger th { font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mid); } .ledger td { color: var(--ink); } .ledger .val { font-family: var(--display); font-size: var(--fs-num-sm); line-height: 1; letter-spacing: var(--track-num); text-transform: uppercase; white-space: nowrap; } .ledger .unit { font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mid); padding-left: .7em; } .ledger .same { font-family: var(--barlow); color: var(--mid); } .ledger .diff { font-weight: 600; color: var(--ink); } [data-tone="ink"] .ledger th { color: rgba(255, 255, 255, var(--a-2)); } [data-tone="ink"] .ledger td { color: var(--paper); } [data-tone="ink"] .ledger th, [data-tone="ink"] .ledger td { border-bottom-color: var(--rule-paper-soft); } [data-tone="ink"] .ledger .unit { color: rgba(255, 255, 255, var(--a-3)); } /* key/value ledger as a definition list (dt first, then dd) */ .kv { border-top: 2px solid currentColor; } .kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: clamp(.65rem, .45rem + .5vw, 1rem) 0; border-bottom: 1px solid var(--rule); } .kv dt { font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mid); } .kv dd { font-family: var(--display); font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--track-display); text-transform: uppercase; text-align: right; } /* a numbered service column: counter in Anton, rule under every row */ .svc { border-top: 2px solid var(--ink); } .svc > li { display: grid; grid-template-columns: 1.6rem 1fr; align-items: baseline; gap: var(--s-3); padding: clamp(.6rem, .4rem + .5vw, .95rem) 0; border-bottom: 1px solid var(--rule); color: var(--ink); } /* offerings, not steps: a square ink mark instead of a running number */ .svc > li::before { content: ""; width: 7px; height: 7px; background: var(--ink); align-self: center; } .svc > li.svc__head { display: block; padding: var(--s-3) 0 var(--s-2); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); } .svc > li.svc__head::before { content: none; } .svc > li.svc__head b { display: block; font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--track-display); text-transform: uppercase; } .svc > li.svc__head span { display: block; margin-top: .3rem; font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mid); } /* the document tile: a spec sheet on the sheet */ .doc { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); padding: var(--s-4); border: 2px solid var(--ink); color: var(--ink); transition: background-color var(--click), color var(--click); } .doc > .reg { opacity: .8; } .doc__name { font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--track-display); text-transform: uppercase; } .doc__meta { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: .3rem; font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mid); } .doc__meta b { color: inherit; font-weight: 600; } .doc:hover { background: var(--ink); color: var(--paper); } .doc:hover .doc__meta { color: rgba(255, 255, 255, var(--a-2)); } .doc:active { translate: 1px 1px; } /* photographic plates: ink cut against paper, a paper caption block cut against the plate */ .plate { position: relative; overflow: clip; background: var(--ink); } /* every photograph is screened: a 45° halftone dot layer sits still while the image drifts beneath it */ .plate::after, .aft__media::after, .rep__panel::after, .stg__media:has(> img)::after { content: ""; position: absolute; inset: -30%; z-index: 1; pointer-events: none; mix-blend-mode: multiply; opacity: .24; transform: rotate(45deg); background: radial-gradient(circle, rgba(8, 8, 8, .95) 0 .8px, transparent 1.35px) 0 0 / 5px 5px; } .rep__panel, .stg__media { position: relative; } @media (max-width: 680px) { .plate::after, .aft__media::after, .rep__panel::after, .stg__media:has(> img)::after { opacity: .15; background-size: 4px 4px; } } /* phones: the screen is finer and lighter against the smaller frame */ /* ledger rows answer the pointer with a faint band */ [data-tone="paper"] .ledger tbody tr, [data-tone="paper"] .kv > div, [data-tone="paper"] .svc > li { transition: background-color var(--click); } [data-tone="paper"] .ledger tbody tr:hover, [data-tone="paper"] .kv > div:hover, [data-tone="paper"] .svc > li:hover { background-color: rgba(8, 8, 8, .035); } /* route letter plate in the programs table head, same idiom as the chapter plates */ .rtag { display: inline-grid; place-items: center; width: 2.1em; height: 2.1em; margin-bottom: .55rem; border: 1px solid var(--ink); font-family: var(--display); font-size: 1.15rem; line-height: 1; color: var(--ink); } .plate > img, .plate > video { width: 100%; height: 100%; object-fit: cover; filter: var(--grade-plate); } .plate__cap { position: absolute; z-index: 2; background: var(--paper); color: var(--ink); padding: var(--s-4) calc(var(--s-5) + 26px) var(--s-4) var(--s-4); display: grid; gap: var(--s-2); } .plate__cap .reg { position: absolute; top: var(--s-3); right: var(--s-3); } .plate__cap b { font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--track-display); text-transform: uppercase; } .plate__cap p { color: var(--mid); max-width: var(--measure-say); } .plate__cap .mono-sm { color: var(--mid); } /* bleed helpers: photography runs to the viewport edge while type stays on the sheet */ .bleed-r { margin-right: calc(-1 * max(var(--gut), (100vw - var(--max)) / 2 + var(--gut))); } .bleed-l { margin-left: calc(-1 * max(var(--gut), (100vw - var(--max)) / 2 + var(--gut))); } .bleed { margin-inline: calc(-1 * max(var(--gut), (100vw - var(--max)) / 2 + var(--gut))); } /* ---------- the halftone signature: ink dissolves to paper through dots. Dot SIZE carries the ramp, never opacity, never gray. --up flips it. ---------- */ .htfade { position: relative; height: clamp(38px, 6vw, 76px); background: var(--paper); overflow: hidden; } .htfade i { position: absolute; left: -10px; right: -10px; height: 35%; } .htfade i:nth-child(1) { top: 0; background: radial-gradient(circle, var(--ink) 8.2px, transparent 8.7px) 0 0 / 16px 16px; } .htfade i:nth-child(2) { top: 33%; background: radial-gradient(circle, var(--ink) 4.4px, transparent 4.9px) 4px 0 / 16px 16px; } .htfade i:nth-child(3) { top: 66%; background: radial-gradient(circle, var(--ink) 1.7px, transparent 2.2px) 8px 0 / 16px 16px; } .htfade--up { transform: scaleY(-1); } /* units Anton cannot set (µ) print in mono */ .u { font-family: var(--mono); font-weight: 600; font-size: .62em; letter-spacing: 0; vertical-align: .08em; margin-left: .06em; } /* the live dot */ .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .dot--live { background: var(--signal); animation: liveblink 2.2s infinite; } @keyframes liveblink { 0%, 60%, 100% { opacity: 1; } 80% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .dot--live { animation: none; } } /* line-print contract (headlines print out of a mask after fonts.ready) */ .mline { display: block; overflow: hidden; perspective: 900px; } .mline > * { display: block; will-change: transform; } .js-split { visibility: hidden; } .js-split.is-ready { visibility: visible; } @media (prefers-reduced-motion: reduce) { .js-split { visibility: visible; } } /* media parallax runs on an inner element scaled 1.12: every parent clips */ .plate, .stg__media, .aft__media, .rep__panel { overflow: clip; } .plate > *, .stg__media > *, .aft__media > *, .rep__panel > img { will-change: transform; } /* running head: every sheet is numbered at its top right, like the hero's "Sheet 00 / 10" */ .wrap2 > .chap { grid-column: 1 / span 6; } .wrap2 > .sheetno { grid-column: 7 / -1; grid-row: 1; justify-self: end; align-self: center; margin: 0 0 var(--s-5); color: var(--faint); letter-spacing: var(--track-mono); text-transform: uppercase; } @media (max-width: 900px) { .wrap2 > .sheetno { display: none; } } /* depth pass: perspective hosts for the 3D reveals */ .vhero__spec { perspective: 800px; } .ledger--nums tbody, .key { perspective: 900px; overflow: clip; } /* the flap start state must not widen the page */ .ledger--compare thead th { perspective: 600px; } .rtag { transform-style: preserve-3d; } .net__map { transform-style: preserve-3d; } .net__node { transform-style: preserve-3d; } .net__node > b, .net__node > span { transform: translateZ(26px); } .htfade i { left: -6%; right: -6%; } /* ============================================================ HEADER — the one
. Two tones: a flat ink bar over photography, paper with a double rule over the sheets. Logo is the only brand mark. ============================================================ */ .vhdr { position: fixed; z-index: 60; inset: 0 0 auto; height: var(--head-h); color: var(--paper); background: rgba(8, 8, 8, .6); transition: background-color .2s linear, color .2s linear, transform .34s var(--press-ease); } .vhdr.is-stuck { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--ink); } .vhdr.is-away { transform: translateY(-104%); } .vhdr.is-away:focus-within { transform: none; } .vhdr__in { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 2vw, 2rem); } .vhdr__brand { flex: none; display: block; } .vhdr__brand img { width: clamp(170px, 15vw + 3rem, 360px); height: auto; } .vhdr.is-stuck .vhdr__brand img { filter: invert(1); } .vhdr__nav { display: flex; align-items: center; gap: clamp(.9rem, 1.6vw, 2rem); } .vhdr__nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: var(--fs-mono); font-weight: 600; letter-spacing: var(--track-mono); text-transform: uppercase; color: rgba(255, 255, 255, var(--a-2)); transition: color var(--click); } .vhdr__nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: .55rem; height: 2px; background: currentColor; transition: right var(--click); } .vhdr__nav a:hover, .vhdr__nav a:focus-visible { color: var(--paper); } .vhdr__nav a:hover::after, .vhdr__nav a:focus-visible::after { right: 0; } .vhdr.is-stuck .vhdr__nav a { color: var(--mid); } .vhdr.is-stuck .vhdr__nav a:hover, .vhdr.is-stuck .vhdr__nav a:focus-visible { color: var(--ink); } .vhdr__end { display: flex; align-items: center; gap: var(--s-2); flex: none; min-width: 0; } .vhdr__tel { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid rgba(255, 255, 255, var(--a-4)); color: rgba(255, 255, 255, var(--a-1)); transition: color var(--click), border-color var(--click), background-color var(--click); } .vhdr__tel:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .vhdr.is-stuck .vhdr__tel { border-color: var(--ink); color: var(--ink); } .vhdr.is-stuck .vhdr__tel:hover { background: var(--ink); color: var(--paper); } .vhdr__cta { min-height: 44px; padding-block: .6rem; } .vhdr.is-stuck .vhdr__cta { background: var(--ink); color: var(--paper); border-color: var(--ink); } .vhdr.is-stuck .vhdr__cta:hover { background: var(--paper); color: var(--ink); } .vhdr.is-stuck .vhdr__cta.btn--wipe::before { background: var(--paper); } .vhdr__menu { display: none; align-items: center; gap: .55rem; flex: none; min-height: 44px; padding: 0 .9rem; border: 1px solid rgba(255, 255, 255, var(--a-4)); color: var(--paper); font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 600; letter-spacing: var(--track-mono); text-transform: uppercase; transition: color var(--click), border-color var(--click), background-color var(--click); } .vhdr__menu i { display: block; width: 15px; height: 1.5px; background: currentColor; } .vhdr__menu i + i { margin-top: -3px; width: 10px; } .vhdr__menu:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .vhdr.is-stuck .vhdr__menu { border-color: var(--ink); color: var(--ink); } .vhdr.is-stuck .vhdr__menu:hover { background: var(--ink); color: var(--paper); } @media (max-width: 900px) { .vhdr__nav, .vhdr__tel { display: none; } .vhdr__menu { display: inline-flex; } } @media (max-width: 620px) { .vhdr__brand img { width: 150px; } .vhdr__cta { padding-inline: .8rem; font-size: var(--fs-mono-sm); } } @media (max-width: 340px) { .vhdr__cta { display: none; } } @media (max-width: 480px) { /* 414px phones: brand + CTA + a labelled menu button did not fit */ .vhdr__brand img { width: 138px; } .vhdr__cta { padding-inline: .7rem; } .vhdr__menu span { display: none; } .vhdr__menu { padding: 0 .75rem; gap: 0; flex-direction: column; justify-content: center; } } @media (max-width: 390px) { .vhdr__brand img { width: 126px; } .vhdr__cta { padding-inline: .65rem; } } /* run progress: a hairline that fills as you walk the floor */ .runbar { position: fixed; inset: 0 auto auto 0; z-index: 61; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .runbar, .chrail { display: none; } } /* the chapter rail: a machine label on the right edge */ .chrail { position: fixed; top: 50%; right: calc(var(--gut) * .38); z-index: 55; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: .9rem; font-family: var(--mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: #fff; mix-blend-mode: difference; opacity: 0; transition: opacity .3s linear; pointer-events: none; } body.chrail-on .chrail { opacity: 1; } .chrail b { font-weight: 500; font-size: .72rem; display: flex; gap: .4em; padding: .3rem .45rem; border: 1px solid currentColor; } .chrail em { opacity: .55; } .chrail span { writing-mode: vertical-rl; font-size: var(--fs-mono-sm); letter-spacing: .3em; opacity: .8; } .chrail::after { content: ""; width: 1px; height: 56px; background: currentColor; opacity: .4; } @media (max-width: 1699px) { .chrail { display: none; } } /* ============================================================ THE MENU — below 900px the nav lives here. Paper panel, printed chapters. ============================================================ */ .vmenu { position: fixed; inset: 0; z-index: 90; } .vmenu__scrim { position: absolute; inset: 0; background: rgba(8, 8, 8, .62); opacity: 0; transition: opacity .3s linear; } .vmenu__panel { position: absolute; inset: 0 0 0 auto; width: min(430px, 88vw); background: var(--paper); color: var(--ink); border-left: 2px solid var(--ink); display: flex; flex-direction: column; padding: clamp(1.2rem, 4vw, 2rem); transform: translateX(100%); transition: transform .42s var(--press-ease); overflow-y: auto; } .vmenu.is-open .vmenu__scrim { opacity: 1; } .vmenu.is-open .vmenu__panel { transform: translateX(0); } .vmenu__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: var(--s-3); border-bottom: 1px solid var(--ink); } .vmenu__top .mono { color: var(--mid); display: inline-flex; align-items: center; gap: .6rem; } .vmenu__top em { color: var(--faint); } .vmenu__x { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ink); font-size: 1.6rem; line-height: 1; transition: background-color var(--click), color var(--click); } .vmenu__x:hover { background: var(--ink); color: var(--paper); } .vmenu__nav { display: flex; flex-direction: column; margin-top: var(--s-4); } .vmenu__nav a { display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; gap: .6rem; padding: clamp(.6rem, 2vw, .9rem) 0; border-bottom: 1px solid var(--rule); font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 5.6vw, 1.9rem); line-height: 1.05; letter-spacing: var(--track-display); text-transform: uppercase; transition: color var(--click), background-color var(--click); } .vmenu__nav a b { font-family: var(--mono); font-weight: 500; font-size: var(--fs-mono-sm); letter-spacing: var(--track-mono); color: var(--mid); } .vmenu__nav a:hover { color: var(--paper); background: var(--ink); box-shadow: -.6rem 0 0 var(--ink), .6rem 0 0 var(--ink); } .vmenu__nav a:hover b { color: rgba(255, 255, 255, var(--a-2)); } .vmenu__foot { margin-top: auto; padding-top: var(--s-5); display: grid; gap: var(--s-3); } .vmenu__tel { font-size: var(--fs-mono); color: var(--ink); } @media (prefers-reduced-motion: reduce) { .vmenu__panel, .vmenu__scrim { transition: none; } } /* ============================================================ HERO — SHEET 00. The owner's own press footage, the H1, and the four numbers no competitor publishes, inside the first viewport at every size. Load-bearing for ban 9: .vhero__in is a space-between flex column; the BOTTOM padding lifts the ticket strip. Never trim the top to fix the bottom. ============================================================ */ .vhero { position: relative; isolation: isolate; min-height: 100svh; display: flex; overflow: clip; padding: 0; color: var(--paper); background: var(--ink); } .vhero__media { position: absolute; inset: 0; z-index: -2; } .vhero__media video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03) brightness(.82); } .vhero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 8, 8, .76) 0%, rgba(8, 8, 8, .24) 50%, rgba(8, 8, 8, .34) 100%); } .vhero__in { width: 100%; max-width: var(--max); margin-inline: auto; padding: max(clamp(4.5rem, 8.6vh, 6.4rem), calc(var(--head-h) + .75rem)) var(--gut) clamp(3rem, 8.5vh, 5.6rem); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(.9rem, 1.6vh, 1.6rem); } /* job-ticket chrome */ .vhero__topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--rule-paper); } .vhero__id { display: inline-flex; align-items: center; gap: .7rem; letter-spacing: var(--track-mono-wide); color: rgba(255, 255, 255, var(--a-1)); } .vhero__id em { color: rgba(255, 255, 255, var(--a-3)); } .vhero__sheet { letter-spacing: var(--track-mono-wide); color: rgba(255, 255, 255, var(--a-2)); white-space: nowrap; } /* the one hero moment */ .vhero__head { margin-block: auto; } .vhero__eyebrow { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: clamp(.6rem, 1.4vh, 1.2rem); letter-spacing: var(--track-mono-wide); color: rgba(255, 255, 255, var(--a-1)); white-space: nowrap; } .vhero__eyebrow .dot { background: var(--paper); width: 8px; height: 8px; } .vhero__eyebrow-short { display: none; } .vhero h1 { font-family: var(--display); font-size: var(--fs-hero); line-height: var(--lh-h1); letter-spacing: var(--track-h1); text-transform: uppercase; } .vhero__hit { display: inline-block; background: var(--paper); color: var(--ink); padding: .015em .18em .035em; } /* lower block: fact-line lede left, actions right, on the sheet's columns */ .vhero__lower { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-4); align-items: end; margin-top: clamp(.6rem, 1.4vh, 1.4rem); } .vhero__said { grid-column: 1 / span 6; } .vhero__lede { font-size: calc(var(--fs-body) * 1.1); line-height: 1.5; color: rgba(255, 255, 255, var(--a-1)); max-width: var(--measure-lede); } .vhero__lede--short { display: none; } .vhero__act { grid-column: 8 / -1; display: flex; justify-content: flex-end; align-items: center; gap: var(--s-3); flex-wrap: wrap; } /* the ticket strip: a ruled ledger of the four numbers, live status, and the press control */ .vhero__ticket { display: flex; align-items: stretch; margin-top: clamp(.8rem, 1.6vh, 1.8rem); border-top: 1px solid var(--rule-paper); color: rgba(255, 255, 255, var(--a-2)); } .vhero__spec { flex: 1 1 auto; display: flex; min-width: 0; } .vhero__spec > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .2rem; padding: clamp(.7rem, 1.3vh, 1.1rem) clamp(.8rem, 1.4vw, 1.6rem); border-left: 1px solid var(--rule-paper); } .vhero__spec > div:first-child { border-left: 0; padding-left: 0; } .vhero__spec dt { order: 2; font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; color: rgba(255, 255, 255, var(--a-2)); overflow-wrap: anywhere; } .vhero__spec dd { order: 1; font-family: var(--display); font-size: calc(var(--fs-num-sm) * .86); line-height: 1; letter-spacing: var(--track-num); color: var(--paper); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; } .vhero__live, .vhero__press { flex: none; display: inline-flex; align-items: center; gap: .6rem; padding: 0 clamp(.8rem, 1.4vw, 1.6rem); border-left: 1px solid var(--rule-paper); font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; white-space: nowrap; } .vhero__live { color: rgba(255, 255, 255, var(--a-1)); } .vhero__press { color: var(--paper); font-weight: 600; min-height: 44px; padding-right: 0; transition: background-color var(--click), color var(--click); } .vhero__press:hover { background: var(--paper); color: var(--ink); padding-right: clamp(.8rem, 1.4vw, 1.6rem); } .vhero__press i { width: 9px; height: 10px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; flex: none; } .vhero__press[data-stopped="true"] i { border: 0; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } /* tablet + phone: numbers in one row, controls on the next; nothing is hidden */ @media (max-width: 899px) { .vhero__sheet { display: none; } .vhero__ticket { flex-wrap: wrap; } .vhero__spec { flex: 1 1 100%; border-bottom: 1px solid var(--rule-paper); } .vhero__spec > div:first-child { padding-left: 0; } .vhero__live { border-left: 0; padding-left: 0; } .vhero__live, .vhero__press { min-height: 44px; } .vhero__press { margin-left: auto; } .vhero__lower { display: block; } .vhero__act { justify-content: flex-start; margin-top: var(--s-4); } } @media (max-width: 620px) { .vhero__act { display: grid; grid-template-columns: 1fr; gap: var(--s-2); } .vhero__act .btn { width: 100%; } .vhero__lower { row-gap: var(--s-3); } } @media (max-width: 480px) { .vhero__lede--long { display: none; } .vhero__lede--short { display: block; } .vhero__eyebrow { margin-bottom: .5rem; } .vhero__eyebrow-long { display: none; } .vhero__eyebrow-short { display: inline; } .vhero__in { padding-top: max(clamp(4.4rem, 8.6vh, 6.4rem), calc(var(--head-h) + .6rem)); } .vhero__unit { display: none; } .vhero__lede { font-size: var(--fs-body); } /* the desktop bump would push the ticket out at 320x640 */ .vhero__act { grid-template-columns: 1fr 1fr; } .vhero__act .btn { font-size: var(--fs-mono-sm); padding-inline: .7rem; gap: .4rem; } } @media (max-width: 480px) { .vhero__spec > div { padding-inline: .45rem; } .vhero__spec dd { font-size: 1.2rem; } .vhero__live, .vhero__press { font-size: var(--fs-mono-sm); padding-inline: .6rem; } } @media (max-width: 400px) { .vhero h1 { font-size: clamp(2.4rem, .8rem + 9.2vw, 4rem); } } @media (max-width: 340px) { .vhero__eyebrow { display: none; } .vhero__spec dd { font-size: 1.1rem; } .vhero__live, .vhero__press { min-height: 40px; } .vhero__topline { padding-bottom: .3rem; } .vhero__spec { flex-wrap: wrap; } .vhero__spec > div { flex: 1 1 50%; border-left: 0; padding-left: 0; } .vhero__spec > div:nth-child(2n) { border-left: 1px solid var(--rule-paper); padding-left: .6rem; } .vhero__spec > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-paper); } } @media (max-width: 340px) { .vhero__act { grid-template-columns: 1fr; } } /* short viewports (landscape phones, small laptops): give the strip back its room */ /* short desktop viewports (1366x768, 1280x800): trim the H1's vh cap and the bottom lift so the whole hero stays inside 100svh */ @media (max-height: 820px) and (min-width: 901px) { :root { --fs-hero: clamp(2.6rem, min(1rem + 9.2vw, 12vh), 15.5rem); } .vhero__in { padding-bottom: clamp(2rem, 4.5vh, 3.2rem); } } @media (max-height: 640px) { .vhero__in { padding-bottom: 2rem; gap: .6rem; } .vhero__ticket { margin-top: .4rem; } .vhero__lower { margin-top: .4rem; } } /* crop marks: the hero is sheet 00 of the run */ .vhero::before, .vhero::after, .vhero__in::before, .vhero__in::after { content: ""; position: absolute; width: 22px; height: 22px; z-index: 3; pointer-events: none; opacity: .75; } .vhero::before { top: calc(var(--head-h) + .6rem); left: calc(var(--gut) * .45); border-top: 1px solid var(--paper); border-left: 1px solid var(--paper); } .vhero::after { top: calc(var(--head-h) + .6rem); right: calc(var(--gut) * .45); border-top: 1px solid var(--paper); border-right: 1px solid var(--paper); } .vhero__in::before { bottom: calc(var(--gut) * .45); left: calc(var(--gut) * .45); border-bottom: 1px solid var(--paper); border-left: 1px solid var(--paper); } .vhero__in::after { bottom: calc(var(--gut) * .45); right: calc(var(--gut) * .45); border-bottom: 1px solid var(--paper); border-right: 1px solid var(--paper); } @media (max-width: 900px) { .vhero::before, .vhero::after, .vhero__in::before, .vhero__in::after { display: none; } } /* ============================================================ 01 · THE OPERATION — the numbers as a ruled bar, the operation ledger, the spec sheet as a document, the floor plate closing the sheet. ============================================================ */ .steps1__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-3); padding-block: var(--s-2); border-bottom: 1px solid var(--ink); } .steps1__press { color: var(--mid); } .steps1__sheet { flex: none; min-height: 40px; } .steps1__ledger { grid-column: 1 / -1; margin-top: var(--s-6); } .steps1__plate { margin-top: var(--s-6); height: clamp(420px, 62vh, 820px); } .steps1__plate > img { object-position: 50% 45%; } .steps1__cap { left: max(var(--gut), (100vw - var(--max)) / 2 + var(--gut)); bottom: 0; width: min(600px, calc(100% - 2 * var(--gut))); padding-bottom: var(--s-5); } .steps1__capledger { display: block; padding-top: var(--s-3); border-top: 1px solid var(--rule); color: var(--mid); } /* the numbers: rows below 1280, one ruled bar of four columns above it */ .ledger--nums { margin-top: var(--s-6); } .ledger--nums .val { font-size: clamp(2rem, .9rem + 2.4vw, 4rem); } /* owner: the 7rem figures were far too big */ @media (min-width: 681px) and (max-width: 1279px) { /* table mode: the unit hugs its value; label left, figure right, like the ledger below */ .ledger--nums .val, .ledger--nums .unit { width: 1%; white-space: nowrap; } .ledger--nums .val { padding-right: .8em; } .ledger--nums .unit { padding-left: 0; } } @media (min-width: 1280px) { .ledger--nums { border-top-width: 2px; } .ledger--nums tbody { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); } .ledger--nums tr { display: grid; grid-template-columns: 1fr; grid-template-areas: "th" "val" "unit"; align-content: start; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-4); border-left: 1px solid var(--ink); } .ledger--nums tr:first-child { border-left: 0; padding-left: 0; } .ledger--nums th, .ledger--nums td { border: 0; padding: 0; } .ledger--nums th { grid-area: th; margin-bottom: var(--s-3); } .ledger--nums .val { grid-area: val; } .ledger--nums .unit { grid-area: unit; padding-left: 0; margin-top: .4rem; } } @media (max-width: 680px) { .ledger--nums tr { display: grid; grid-template-columns: 40% 1fr; align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); } .ledger--nums th, .ledger--nums td { border: 0; padding: 0; } .ledger--nums th { grid-row: 1 / span 2; } .ledger--nums .unit { grid-column: 2; padding: .2rem 0 0; } } @media (max-width: 900px) { .steps1__row { flex-direction: column; align-items: flex-start; gap: var(--s-2); } .steps1__plate { height: clamp(300px, 48vh, 420px); margin-top: var(--s-6); } .steps1__cap { position: static; width: auto; padding: var(--s-4) var(--gut) 0; } .steps1__cap .reg { display: none; } } /* ============================================================ 02 · THE PROGRAMS — Contract vs Full package as one comparison ledger ============================================================ */ .ledger--compare { margin-top: var(--s-6); } .ledger--compare thead th { padding-top: var(--s-4); padding-bottom: var(--s-4); vertical-align: top; border-bottom: 1px solid var(--ink); } .ledger--compare thead th p { margin-top: var(--s-3); font-family: var(--barlow); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0; text-transform: none; color: var(--mid); max-width: 36ch; } .ledger--compare thead th .mono-sm { display: block; color: var(--mid); margin-bottom: .35rem; } .ledger--compare thead th b { display: block; font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--track-display); text-transform: uppercase; color: var(--ink); } .ledger--compare th[scope="row"] { width: 22%; padding-right: var(--s-4); } .ledger--compare th[scope="row"] a { position: relative; } .ledger--compare th[scope="row"] a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; opacity: .5; } .ledger--compare td { width: 39%; padding-right: var(--s-4); font-size: var(--fs-body); } .ledger--compare td .val { display: inline-block; margin-right: .5em; color: var(--ink); } .ledger--compare tfoot td { padding-top: var(--s-4); padding-bottom: 0; border-bottom: 0; } /* a set to display:grid stops being a table cell — both route cells were wrapped into one anonymous cell and stacked */ .ledger--compare tfoot td:not(:first-child) { vertical-align: top; } .ledger--compare tfoot td:not(:first-child) .btn { display: inline-flex; } .ledger--compare tfoot td:not(:first-child) .rowlink { display: flex; width: fit-content; margin-top: var(--s-2); } @media (max-width: 680px) { .ledger--compare thead { display: none; } .ledger--compare tbody tr { display: grid; grid-template-columns: 1fr; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); } .ledger--compare th[scope="row"], .ledger--compare td { display: block; width: auto; border: 0; padding: 0; } .ledger--compare th[scope="row"] { margin-bottom: .45rem; } .ledger--compare td + td { margin-top: .6rem; } .ledger--compare td[data-col]::before { content: attr(data-col); display: block; margin-bottom: .15rem; font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mid); } .ledger--compare tfoot tr { display: grid; gap: var(--s-4); padding-top: var(--s-4); } .ledger--compare tfoot td:first-child { display: none; } .ledger--compare tfoot td { display: grid; gap: var(--s-2); padding: 0; } .ledger--compare tfoot td a { margin: 0; } .ledger--compare tfoot .btn { width: 100%; } } /* ============================================================ 03 · AFTER THE INK — one ruled service column beside the photograph bled to the viewport edge; garment → carton → pallet. ============================================================ */ .aft__col { grid-column: 1 / span 5; margin-top: var(--s-6); align-self: start; } .aft__media { grid-column: 7 / -1; margin-top: var(--s-6); position: relative; align-self: stretch; min-height: clamp(520px, 70vh, 900px); background: var(--ink); } .aft__media { grid-row: 2 / span 3; margin-top: 0; } /* headline row through the list row; the phone clears this */ .aft__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: var(--grade-doc); } .aft__cap { left: 0; bottom: 0; max-width: min(520px, 70%); } .aft__inset { margin-top: var(--s-6); } .aft__inset img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 55%; filter: var(--grade-doc); } .aft__inset figcaption { padding: .55rem 0 0; color: var(--mid); border-bottom: 1px solid var(--rule); padding-bottom: .55rem; } .aft__pull { margin-top: var(--s-5); padding-left: var(--s-4); border-left: 2px solid var(--ink); font-size: var(--fs-lede); line-height: 1.45; max-width: var(--measure-say); } .off { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--rule); } .off .rowlink { color: var(--mid); } .off .rowlink:hover { color: var(--ink); } @media (max-width: 900px) { /* phone: plate, headline, deck, THEN the photo (caption below it on paper), then the lists */ .aft__media { order: 1; margin-inline: calc(-1 * var(--gut)); min-height: 0; height: clamp(380px, 60vh, 560px); margin-top: var(--s-5); } /* the caption stays a positioned paper block (z-index 2) so the parallax image can never paint over it — same idiom as .plate__cap */ .aft__cap { left: 0; right: 0; bottom: 0; max-width: none; padding: var(--s-3) var(--gut); } .aft__cap .reg { display: none; } .aft__col { order: 2; margin-top: var(--s-5); } .aft .off { order: 3; } } /* ============================================================ 04 · THE INK ROOM — a contact sheet: 16 cells that fill 12-column rows exactly at every width, 2px ink gutters, no card chrome. Closes on the dot. ============================================================ */ .wall__key { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wall__grid { margin-top: var(--s-6); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: 2px; background: var(--ink); border: 2px solid var(--ink); } .wall__photo { grid-column: span 3; display: flex; flex-direction: column; min-width: 0; background: var(--paper); } .wall__photo--hero { grid-column: span 6; grid-row: span 2; } .wall__photo--wide { grid-column: span 6; } .wall__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: var(--grade-doc); } .wall__photo--wide img { aspect-ratio: 2 / 1; } .wall__photo--wide-lg, .wall__photo--wide-lgmd { grid-column: span 6; } /* fourteen tiles: two extra wides keep every row full; which ones changes per breakpoint */ .wall__photo--wide-lg img, .wall__photo--wide-lgmd img { aspect-ratio: 2 / 1; } .wall__photo--hero img { aspect-ratio: auto; flex: 1 1 0; min-height: 0; height: 100%; } .wall__cap { display: grid; grid-template-columns: 1fr auto; column-gap: .6rem; row-gap: .1rem; padding: .6rem .7rem .7rem; transition: background-color var(--click), color var(--click); } .wall__cap b { grid-column: 1; font-family: var(--display); font-weight: 400; font-size: 1.05rem; line-height: 1.05; letter-spacing: var(--track-num); text-transform: uppercase; } .wall__cap > span { grid-column: 1; font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1.35; color: var(--mid); } .wall__cap i { grid-column: 2; grid-row: 1; font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mid); } .wall__photo--hero .wall__cap b { font-size: var(--fs-h3); } .wall__photo--hero .wall__cap > span, .wall__photo--wide .wall__cap > span { font-family: var(--barlow); font-size: var(--fs-body); text-transform: none; letter-spacing: 0; max-width: 34ch; } .wall__photo:hover .wall__cap { background: var(--ink); color: var(--paper); } .wall__photo:hover .wall__cap > span, .wall__photo:hover .wall__cap i { color: rgba(255, 255, 255, var(--a-2)); } .wall__plate { margin-top: var(--s-6); height: clamp(360px, 56vh, 760px); } .wall__plcap { right: max(var(--gut), (100vw - var(--max)) / 2 + var(--gut)); bottom: 0; max-width: min(480px, 60%); } @media (max-width: 980px) { .wall__key { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wall__photo { grid-column: span 4; } .wall__photo--hero { grid-column: span 8; grid-row: auto; } .wall__photo--hero img { aspect-ratio: 2 / 1; height: auto; flex: none; } .wall__photo--wide { grid-column: span 8; } .wall__photo--wide-lg { grid-column: span 4; } .wall__photo--wide-lg img { aspect-ratio: 1; } .wall__photo--wide-md, .wall__photo--wide-lgmd { grid-column: span 8; } .wall__photo--wide-md img, .wall__photo--wide-lgmd img { aspect-ratio: 2 / 1; } } @media (max-width: 680px) { .wall__photo { grid-column: span 6; } .wall__photo--hero, .wall__photo--wide { grid-column: span 12; } .wall__photo--hero img, .wall__photo--wide img { aspect-ratio: 16 / 9; } .wall__photo--wide-md, .wall__photo--wide-lgmd { grid-column: span 6; } .wall__photo--wide-md img, .wall__photo--wide-lgmd img { aspect-ratio: 1; } .wall__plate { height: clamp(260px, 42vh, 380px); } .wall__plcap { position: static; max-width: none; padding: var(--s-4) var(--gut) 0; } .wall__plcap .reg { display: none; } } /* ============================================================ 07 · THE NETWORK — five countries as a ledger beside a halftone map ============================================================ */ .net__key { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ledger--net { grid-column: 1 / span 6; margin-top: var(--s-6); align-self: start; } .ledger--net thead th { padding-top: 0; padding-bottom: .6rem; border-bottom: 1px solid var(--ink); font-size: var(--fs-mono-sm); } .ledger--net th.val { width: 4.5rem; font-size: var(--fs-num-sm); color: var(--ink); padding-right: var(--s-3); } .ledger--net td { padding-right: var(--s-4); vertical-align: baseline; } .ledger--net td b { font-weight: 600; white-space: nowrap; } .ledger--net td.mono-sm { color: var(--mid); white-space: nowrap; } .ledger--net td.same { font-size: var(--fs-body); } .ledger--net tbody tr { transition: background-color var(--click); } .ledger--net tbody tr:hover { background: rgba(8, 8, 8, .04); } .net__map { grid-column: 7 / -1; margin-top: var(--s-6); align-self: start; position: relative; aspect-ratio: 2 / 1; width: 100%; max-width: 1000px; } .net__mask { position: absolute; inset: 0; background: radial-gradient(circle, var(--ink) 1.35px, transparent 1.85px) 0 0 / 7px 7px; -webkit-mask: url("/assets/media/worldmask.png") center / 100% 100% no-repeat; mask: url("/assets/media/worldmask.png") center / 100% 100% no-repeat; -webkit-mask-mode: luminance; mask-mode: luminance; } .net__node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; place-items: center; width: 22px; height: 22px; } .net__node::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); transition: background-color var(--click), border-color var(--click); } .net__node::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); transition: background-color var(--click); } .net__node--home::after { background: var(--signal); } .net__node b { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .35rem; font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 600; letter-spacing: var(--track-mono); color: var(--ink); background: var(--paper); padding: .1rem .3rem; white-space: nowrap; } .net__node span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: .3rem; font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mid); background: var(--paper); padding: .1rem .3rem; white-space: nowrap; } .net:has(tr[data-node="us"]:hover) .net__node[data-node="us"]::before, .net:has(tr[data-node="mx"]:hover) .net__node[data-node="mx"]::before, .net:has(tr[data-node="hn"]:hover) .net__node[data-node="hn"]::before, .net:has(tr[data-node="id"]:hover) .net__node[data-node="id"]::before, .net:has(tr[data-node="pk"]:hover) .net__node[data-node="pk"]::before { background: var(--ink); } .net:has(tr[data-node="us"]:hover) .net__node[data-node="us"]::after, .net:has(tr[data-node="mx"]:hover) .net__node[data-node="mx"]::after, .net:has(tr[data-node="hn"]:hover) .net__node[data-node="hn"]::after, .net:has(tr[data-node="id"]:hover) .net__node[data-node="id"]::after, .net:has(tr[data-node="pk"]:hover) .net__node[data-node="pk"]::after { background: var(--paper); } @media (max-width: 900px) { .net__key { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s-5); } .net__map { margin-top: var(--s-5); } .ledger--net thead { display: none; } .ledger--net tbody tr { display: grid; grid-template-columns: 4rem 1fr; column-gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); } .ledger--net th, .ledger--net td { border: 0; padding: 0; width: auto; } .ledger--net th.val { grid-row: 1 / span 3; } .ledger--net td.same { margin-top: .2rem; } } @media (max-width: 680px) { .net__node b { display: none; } .net__node { width: 16px; height: 16px; } .net__node::after { width: 4px; height: 4px; } } /* ============================================================ 08 · YOUR PRODUCT / OUR REPUTATION — the op-ed page. Copy is verbatim. ============================================================ */ .rep__cols { grid-column: 1 / span 8; margin-top: var(--s-6); display: grid; grid-template-columns: subgrid; align-items: start; } .rep__cols article { grid-column: span 4; padding-top: var(--s-4); border-top: 2px solid var(--ink); } .rep__cols article + article { padding-left: calc(var(--col-gap) / 2); margin-left: calc(var(--col-gap) / -2); border-left: 1px solid var(--rule); } .rep__cols article .mono-sm { color: var(--mid); } .rep__cols h3 { margin-top: var(--s-3); font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.02; letter-spacing: var(--track-display); text-transform: uppercase; max-width: 18ch; text-wrap: balance; } .rep__cols p { margin-top: var(--s-3); color: var(--mid); max-width: var(--measure-body); } .rep__spec { grid-column: 9 / -1; margin-top: var(--s-6); align-self: start; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); border-left: 1px solid var(--ink); } .rep__spec li { display: grid; grid-template-rows: auto 1fr; gap: .5rem; padding: var(--s-3) var(--s-3) var(--s-4); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .rep__spec b { font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--track-num); } .rep__spec span { font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; color: var(--mid); } .rep__panel { margin-top: var(--s-6); height: clamp(240px, 34vh, 480px); } .rep__panel > img { object-position: 50% 50%; } .rep__cap { right: max(var(--gut), (100vw - var(--max)) / 2 + var(--gut)); bottom: 0; max-width: min(520px, 60%); } @media (max-width: 900px) { .rep__cols { margin-top: var(--s-5); grid-template-columns: 1fr; } .rep__cols article + article { padding-left: 0; margin-left: 0; border-left: 0; margin-top: var(--s-5); } .rep__spec { margin-top: var(--s-5); grid-template-columns: 1fr; } .rep__spec li { grid-template-columns: 3rem 1fr; grid-template-rows: none; align-items: baseline; padding: .7rem var(--s-3); } .rep__panel { height: clamp(200px, 30vh, 300px); } .rep__cap { position: static; max-width: none; padding: var(--s-4) var(--gut) 0; } .rep__cap .reg { display: none; } } /* ============================================================ 09 · QUESTIONS — fourteen answers printed open, the number or the verdict leading each. Three ruled columns wide, two at desktop, one on phones. ============================================================ */ .qa { grid-column: 1 / -1; margin-top: var(--s-6); display: grid; grid-template-columns: 1fr; column-gap: var(--col-gap); border-top: 2px solid var(--ink); } .qa__item { display: grid; grid-template-columns: 8.5rem 1fr; column-gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0; border-top: 1px solid var(--rule); } .qa__item:first-child { border-top: 0; } .qa__item { scroll-margin-top: calc(var(--head-h) + 1rem); } /* 02 deep-links single questions */ .qa__lead { grid-row: 1 / span 2; font-family: var(--display); font-weight: 400; font-size: clamp(1.2rem, .85rem + 1.05vw, 2rem); line-height: 1; letter-spacing: var(--track-num); text-transform: uppercase; } .qa__item h3 { font-family: var(--barlow); font-weight: 600; font-size: var(--fs-body); line-height: 1.35; } .qa__item p { margin-top: .45rem; color: var(--mid); font-size: var(--fs-body); max-width: 42ch; } @media (min-width: 901px) { .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(7, auto); } .qa__item:nth-child(8) { border-top: 0; } .qa__item:nth-child(n+8) { padding-left: calc(var(--col-gap) / 2); margin-left: calc(var(--col-gap) / -2); border-left: 1px solid var(--rule); } } @media (min-width: 1512px) { .qa { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); } .qa__item:nth-child(6), .qa__item:nth-child(11) { border-top: 0; } .qa__item:nth-child(n+6) { padding-left: calc(var(--col-gap) / 2); margin-left: calc(var(--col-gap) / -2); border-left: 1px solid var(--rule); } .qa__item:nth-child(8) { border-top: 1px solid var(--rule); } } /* ============================================================ 10 · QUOTE INTAKE — the brief on the left, the three-step form sheet on the right ============================================================ */ .vcta > .wrap2 > h2, .vcta > .wrap2 > .say { grid-column: 1 / span 5; } .brief { grid-column: 1 / span 5; margin-top: var(--s-6); } .kv--text > div { display: grid; grid-template-columns: 1fr; row-gap: .3rem; padding-block: var(--s-3); } .kv--text dt { color: var(--mid); } .kv--text dd { font-family: var(--barlow); font-weight: 400; font-size: var(--fs-body); text-transform: none; letter-spacing: 0; line-height: 1.45; text-align: left; color: var(--ink); max-width: 48ch; } .brief__talk { grid-column: 1 / span 5; margin-top: var(--s-5); } /* the form sheet spans rows 2–5; a flexible last row absorbs its height so the headline, deck and brief keep their own rhythm */ @media (min-width: 901px) { .vcta > .wrap2 { grid-template-rows: auto auto auto auto minmax(0, 1fr); } .brief__talk { grid-row: 5; align-self: start; } } .hp2 { position: absolute; left: -9999px; } .wiz { grid-column: 7 / -1; grid-row: 2 / span 4; align-self: start; padding: clamp(1.4rem, 1rem + 1.6vw, 2.6rem); background: rgba(8, 8, 8, .035); border-top: 2px solid var(--ink); } .wiz__kick { color: var(--mid); } .wiz__title { margin-top: .5rem; font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--track-display); text-transform: uppercase; } .wiz__lede { margin-top: var(--s-3); color: var(--mid); max-width: 54ch; } .wiz__tabs { display: flex; gap: var(--s-4); margin-top: var(--s-5); padding: 0; list-style: none; border-bottom: 1px solid var(--rule); } .wiz__tabs button { display: block; padding: .6rem 0 .7rem; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--faint); font: inherit; letter-spacing: var(--track-mono); text-transform: uppercase; cursor: pointer; transition: color var(--click), border-color var(--click); white-space: nowrap; } .wiz__tabs em { font-style: normal; } .wiz__tabs button.is-done { color: var(--mid); } .wiz__tabs button[aria-current="step"] { color: var(--ink); border-bottom-color: var(--ink); } .wiz__step { margin-top: var(--s-5); } .wiz__step[hidden] { display: none; } .wiz__q { display: block; padding: 0; font-family: var(--barlow); font-weight: 600; font-size: var(--fs-body); margin-bottom: .75rem; } .wiz__q em { font-style: normal; font-weight: 400; color: var(--mid); } .wiz__routes, .wiz__checks { border: 0; padding: 0; margin: 0; min-width: 0; } .wiz__cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } .wiz__card { position: relative; display: block; padding: 1rem 2.8rem 1.05rem 1.1rem; border: 1px solid var(--ink); background: var(--paper); cursor: pointer; transition: background-color var(--click), box-shadow var(--click); } .wiz__card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; } .wiz__card b { display: block; font-family: var(--barlow); font-weight: 600; font-size: var(--fs-lede); line-height: 1.2; } .wiz__card > span { display: block; margin-top: .4rem; font-size: .92em; line-height: 1.4; color: var(--mid); } .wiz__card i { position: absolute; top: 1.05rem; right: 1rem; width: 14px; height: 14px; border: 1px solid var(--ink); background: var(--paper); } .wiz__card:has(input:checked) { background: rgba(8, 8, 8, .06); box-shadow: inset 0 0 0 1px var(--ink); } .wiz__card:has(input:checked) i { background: var(--ink); box-shadow: inset 0 0 0 3px var(--paper); } .wiz__card:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 3px; } .wiz__routes.is-invalid .wiz__cards { outline: 1px solid var(--signal); outline-offset: 6px; } .wiz__opt { display: inline-flex; align-items: center; gap: .55rem; margin-top: var(--s-3); font-weight: 600; cursor: pointer; } .wiz__opt input, .wiz__check input { width: 14px; height: 14px; margin: 0; accent-color: var(--ink); } .wiz__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-4); } .wiz__field { display: block; min-width: 0; } .wiz__field > span { display: flex; align-items: center; gap: .4rem; margin-bottom: .45rem; font-weight: 600; } .wiz__field.is-req > span::after { content: ""; width: 6px; height: 6px; background: var(--signal); } .wiz__field input, .wiz__field select, .wiz__field textarea { width: 100%; padding: .8rem .9rem; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; transition: box-shadow var(--click); } .wiz__field select { appearance: none; padding-right: 2.4rem; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .9rem center; } .wiz__field input::placeholder, .wiz__field textarea::placeholder { color: var(--faint); } .wiz__field input:focus, .wiz__field select:focus, .wiz__field textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink); } .wiz__field.is-invalid input, .wiz__field.is-invalid select, .wiz__field.is-invalid textarea { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); } .wiz__field.is-invalid > span { color: var(--signal); } .wiz__field small { display: block; margin-top: .4rem; font-size: .86em; color: var(--mid); } .wiz__field textarea { resize: vertical; min-height: 6rem; } .wiz__wide { margin-top: var(--s-4); } .wiz__checks { margin-top: var(--s-4); } .wiz__checkrow { display: flex; flex-wrap: wrap; gap: var(--s-2); } .wiz__check { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem .9rem; border: 1px solid var(--ink); background: var(--paper); cursor: pointer; transition: background-color var(--click), color var(--click); } .wiz__check:has(input:checked) { background: var(--ink); color: var(--paper); } .wiz__check:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 3px; } .wiz__note { margin-top: var(--s-4); color: var(--mid); max-width: 54ch; } .wiz__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); } .wiz__back { border: 0; padding: 0; background: none; color: var(--ink); cursor: pointer; } .wiz__count { color: var(--mid); } .wiz__review { margin-top: 0; } .wiz__review > div { grid-template-columns: 10rem 1fr; column-gap: var(--s-4); padding-block: .6rem; } .wiz__status { margin-top: var(--s-3); color: var(--mid); min-height: 1.3em; } .wiz__status:not(:empty) { color: var(--ink); } @media (min-width: 901px) and (max-width: 1279px) { .wiz__cards, .wiz__grid2 { grid-template-columns: 1fr; } .wiz__review > div { grid-template-columns: 1fr; } } @media (max-width: 900px) { .brief { margin-top: var(--s-5); } .wiz { margin-top: var(--s-5); padding: var(--s-4); } .wiz__cards, .wiz__grid2 { grid-template-columns: 1fr; } .wiz__tabs { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: .6rem; } .wiz__tabs button { font-size: .6rem; letter-spacing: .06em; } } @media (max-width: 400px) { /* three full labels do not fit a 320px column; the numbers carry it, the aria-label keeps the name */ .wiz__tabs em { display: none; } .wiz__tabs { justify-content: start; gap: var(--s-4); } .wiz__tabs button { font-size: var(--fs-mono-sm); letter-spacing: var(--track-mono); } .wiz__nav { flex-wrap: wrap; } .wiz__nav .btn { width: 100%; order: 3; } .wiz__review > div { grid-template-columns: 1fr; } } /* ============================================================ 05 · THE FLOOR — six stages, each a photo plate cut against a paper spec block, alternating sides. PRINT is the tallest and breaks the grid; PACK and SHIP close as a diptych. The section ground is paper; the plates are ink. Every plate keeps overflow: clip and a fixed height (parallax). ============================================================ */ .stg__grid { margin-top: var(--s-5); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-6); } .stg__card { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: var(--col-gap); align-items: start; } .stg__media { position: relative; height: clamp(360px, 52vh, 620px); } .stg__media > img, .stg__media > video { width: 100%; height: 100%; object-fit: cover; filter: var(--grade-plate); } .stg__body { position: relative; z-index: 2; padding-top: var(--s-4); border-top: 2px solid var(--ink); background: var(--paper); } .stg__no { display: block; font-family: var(--display); font-weight: 400; font-size: var(--fs-num); line-height: .9; letter-spacing: var(--track-num); } .stg__kick { display: block; margin-top: var(--s-3); color: var(--mid); } .stg__body h3 { margin-top: .25rem; font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--track-display); text-transform: uppercase; } .stg__body p { margin-top: var(--s-3); color: var(--mid); max-width: var(--measure-say); } .stg__facts { margin-top: var(--s-4); border-top: 1px solid var(--ink); } .stg__facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: .5rem 0; border-bottom: 1px solid var(--rule); } .stg__facts dt { font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--mid); } .stg__facts dd { font-family: var(--display); font-weight: 400; font-size: clamp(1.1rem, .95rem + .7vw, 1.6rem); line-height: 1; letter-spacing: var(--track-num); text-transform: uppercase; text-align: right; } /* each stage keeps only the facts it earns: registration, mesh, squeegee, print order and flash temp live in the anatomy spec, the minimum and the lead in the hero ticket (owner: "overcrowded") */ .stg__facts > .is-echo { display: none; } /* placements ≥ 901 */ .stg__card--1 .stg__media { grid-column: 1 / span 8; } .stg__card--1 .stg__body { grid-column: 9 / -1; } .stg__card--2 .stg__body, .stg__card--4 .stg__body { grid-column: 1 / span 4; } .stg__card--2 .stg__media, .stg__card--4 .stg__media { grid-column: 5 / -1; } .stg__card--3 .stg__media { grid-column: 1 / -1; grid-row: 1; height: clamp(560px, 82vh, 900px); } .stg__card--3 .stg__body { grid-column: 1 / span 5; grid-row: 2; margin-top: calc(-1 * clamp(120px, 18vh, 220px)); padding: var(--s-5) var(--s-5) 0 0; border-top: 0; } .stg__card--3 .stg__body::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); } .stg__card--5 { grid-column: 1 / span 6; } .stg__card--6 { grid-column: 7 / -1; } .stg__card--5 .stg__media, .stg__card--6 .stg__media { grid-column: 1 / -1; height: clamp(300px, 44vh, 520px); } .stg__card--5 .stg__body, .stg__card--6 .stg__body { grid-column: 1 / -1; } .stg__card--6 .stg__body { padding-right: 0; } @media (max-width: 900px) { .stg__grid { row-gap: var(--s-6); } .stg__card, .stg__card--5, .stg__card--6 { grid-column: 1 / -1; grid-template-columns: 1fr; } .stg__card > .stg__media, .stg__card > .stg__body { grid-column: 1 / -1 !important; grid-row: auto !important; } .stg__card > .stg__media { order: -1; margin-inline: calc(-1 * var(--gut)); height: clamp(260px, 44vh, 420px); } .stg__card--3 .stg__media { height: clamp(320px, 56vh, 520px); } .stg__card--3 .stg__body { margin-top: 0; padding: var(--s-4) 0 0; border-top: 2px solid var(--ink); } .stg__card--3 .stg__body::before { content: none; } .stg__body { margin-top: var(--s-3); } .stg__no { font-size: 3rem; } } /* ============================================================ 06 · THE ANATOMY — eight screens, one impression. The ONE pinned set piece. Static-first: the two-frame layout below is the default; the pin is layered on for ≥861px with motion allowed (see .craft.is-pinned). scenes.js owns the layer transforms, the dryer opacity and the progress bar; this file never sets those properties. ============================================================ */ .craft { position: relative; background: var(--ink); color: var(--paper); } .craft__top { padding-top: var(--sec-pad); } .craft__top .chap { margin-bottom: 0; } .craft h2 { font-size: clamp(2rem, 1rem + 3.4vw, 5.2rem); line-height: .96; letter-spacing: var(--track-display); } .craft h2 em { color: rgba(255, 255, 255, var(--a-3)); } .craft__sub { margin-top: var(--s-3); color: rgba(255, 255, 255, var(--a-2)); } .craft__dryer { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.5); opacity: 0; transform: scale(1.05); } .craft__shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 8, .9), rgba(8, 8, 8, .2) 56%, rgba(8, 8, 8, .7)), linear-gradient(0deg, rgba(8, 8, 8, .9), transparent 58%); opacity: .32; } /* the separations: flat frames, no drop-shadow (paint cost), no glass */ .craft-layer { position: absolute; inset: 0; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform, opacity; } .craft-layer .film { fill: rgba(242, 236, 221, .05); stroke: rgba(242, 236, 221, .3); stroke-width: 1.5; } .craft-layer .screen-frame { fill: rgba(14, 15, 13, .97); stroke: rgba(242, 239, 230, .42); stroke-width: 1.25; } .craft-layer .screen-screw { fill: var(--paper); stroke: #0a0b09; stroke-width: 1; } .craft-layer .screen-id { fill: rgba(242, 239, 230, .72); font: 600 5.5px var(--mono); letter-spacing: .7px; } .craft-layer .reg { fill: none; stroke: rgba(242, 239, 230, .66); stroke-width: 1; } .craft-layer.is-lit .screen-frame { stroke: rgba(255, 255, 255, .9); } /* spec ledger + legend (shared by both layouts) */ .craft__spec { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--paper); } .craft__spec div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--rule-paper-soft); } .craft__spec dt { font: 500 var(--fs-mono-sm) / 1.3 var(--mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: rgba(255, 255, 255, var(--a-2)); } .craft__spec dd { font-family: var(--display); font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--track-num); color: var(--paper); white-space: nowrap; } .craft__labels { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border: 1px solid var(--rule-paper); background: var(--ink); } .craft__labels li { display: flex; align-items: flex-start; gap: .5rem; min-width: 0; padding: .7rem .6rem; border-right: 1px solid var(--rule-paper-soft); color: rgba(255, 255, 255, var(--a-3)); font: 500 var(--fs-mono-sm) / 1.45 var(--mono); letter-spacing: .04em; text-transform: uppercase; transition: color var(--click), background-color var(--click); } .craft__labels li:last-child { border-right: 0; } .craft__labels li i { flex: 0 0 7px; width: 7px; height: 7px; margin-top: .25rem; border: 1px solid currentColor; border-radius: 50%; } .craft__labels li.is-last i { border-color: var(--signal); } .craft__labels li.is-active { color: var(--ink); background: var(--paper); } .craft__labels li.is-active i { background: var(--ink); border-color: var(--ink); } .craft__labels li.is-active.is-last i { background: var(--signal); border-color: var(--signal); } .craft__register { position: absolute; opacity: 0; pointer-events: none; } .craft__register i { position: absolute; width: 20px; height: 20px; border: 1px solid var(--paper); border-radius: 50%; } .craft__register i::before, .craft__register i::after { content: ""; position: absolute; background: var(--paper); } .craft__register i::before { left: 50%; top: -5px; bottom: -5px; width: 1px; } .craft__register i::after { top: 50%; left: -5px; right: -5px; height: 1px; } .craft__register i:nth-child(1) { left: 4%; top: 4%; } .craft__register i:nth-child(2) { right: 4%; top: 4%; } .craft__register i:nth-child(3) { left: 4%; bottom: 4%; } .craft__register i:nth-child(4) { right: 4%; bottom: 4%; } .craft__cue { display: flex; align-items: center; gap: .8rem; color: rgba(255, 255, 255, var(--a-2)); font: 500 var(--fs-mono-sm) / 1.5 var(--mono); letter-spacing: var(--track-mono); text-transform: uppercase; } .craft__cue i { width: 38px; height: 1px; background: var(--paper); } .craft__final p { max-width: 46ch; color: rgba(255, 255, 255, var(--a-2)); font-size: var(--fs-lede); line-height: 1.5; } .craft__progress { height: 2px; background: rgba(255, 255, 255, var(--a-5)); } .craft__progress i { display: block; width: 100%; height: 100%; background: var(--paper); transform: scaleX(0); transform-origin: left; } /* ---------- DEFAULT: the static two-frame sheet (phones, tablets, reduced motion) ---------- */ .craft__scroll { height: auto; } .craft__sticky { position: relative; isolation: isolate; width: 100%; max-width: var(--max); margin-inline: auto; padding: var(--s-6) var(--gut) var(--sec-pad); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-6); align-items: start; } .craft__head { grid-column: 1 / -1; order: 0; } .craft__scene { order: 2; } .craft__final { order: 3; } .craft__sheet { order: 1; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--rule-paper-soft); border: 1px solid var(--rule-paper-soft); } .craft__sheet .craft-layer { position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 1; background: var(--ink); transform: none; opacity: 1; will-change: auto; } .craft__sheet:empty { display: none; } .craft__scene { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-5); align-items: start; } .craft__stack { grid-column: 1 / -1; width: min(100%, 78vh); aspect-ratio: 1; position: relative; margin-inline: auto; transform-style: preserve-3d; } .craft__stack .craft-layer { transform: none; opacity: 1; } .craft__cue { display: none; } .craft__spec { grid-column: 1 / span 6; } .craft__labels { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); } .craft__labels li:nth-child(4) { border-right: 0; } .craft__labels li:nth-child(-n+4) { border-bottom: 1px solid var(--rule-paper-soft); } .craft__final { grid-column: 1 / span 8; } .craft__progress { display: none; } .craft__dryer { display: none; } @media (max-width: 680px) { .craft__sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .craft__spec { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: var(--col-gap); } .craft__spec div { flex-direction: column; align-items: flex-start; gap: .15rem; } .craft__labels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .craft__labels li:nth-child(even) { border-right: 0; } .craft__labels li:nth-child(odd) { border-right: 1px solid var(--rule-paper-soft); } .craft__labels li:nth-child(-n+6) { border-bottom: 1px solid var(--rule-paper-soft); } .craft__final { grid-column: 1 / -1; } } /* ---------- PINNED: ≥861px with motion allowed. JS adds .is-pinned ---------- */ @media (min-width: 861px) and (prefers-reduced-motion: no-preference) { .craft.is-pinned .craft__scroll { height: 230vh; } .craft.is-pinned .craft__sticky { position: sticky; top: 0; height: 100svh; min-height: 680px; max-width: none; padding: 0; display: block; overflow: hidden; perspective: 1900px; } .craft.is-pinned .craft__sheet { display: none; } .craft.is-pinned .craft__dryer { display: block; } .craft.is-pinned .craft__head { position: absolute; z-index: 8; top: max(clamp(5.4rem, 9vh, 7rem), calc(var(--head-h) + 1.2rem)); left: max(var(--gut), (100vw - var(--max)) / 2 + var(--gut)); width: min(460px, 32vw); } .craft.is-pinned .craft__scene { position: absolute; z-index: 3; inset: 0; display: block; transform-style: preserve-3d; } .craft.is-pinned .craft__stack { position: absolute; left: 58%; top: 49%; width: min(60vw, 74vh, 1100px); margin: 0; transform: translate(-50%, -50%); will-change: transform; } .craft.is-pinned .craft__register { left: 58%; top: 49%; width: min(56vw, 66vh, 1000px); aspect-ratio: 1; transform: translate(-50%, -50%); } .craft.is-pinned .craft__cue { display: flex; position: absolute; z-index: 7; right: max(var(--gut), (100vw - var(--max)) / 2 + var(--gut)); top: clamp(5.6rem, 9vh, 7rem); } .craft.is-pinned .craft__spec { position: absolute; z-index: 7; left: max(var(--gut), (100vw - var(--max)) / 2 + var(--gut)); bottom: clamp(7rem, 14vh, 10rem); width: min(300px, 22vw); } .craft.is-pinned .craft__labels { position: absolute; z-index: 7; left: max(var(--gut), (100vw - var(--max)) / 2 + var(--gut)); right: max(var(--gut), (100vw - var(--max)) / 2 + var(--gut)); bottom: clamp(1rem, 2.4vh, 1.8rem); grid-template-columns: repeat(8, minmax(0, 1fr)); } .craft.is-pinned .craft__labels li { border-bottom: 0; } .craft.is-pinned .craft__labels li:nth-child(4) { border-right: 1px solid var(--rule-paper-soft); } .craft.is-pinned .craft__final { position: absolute; z-index: 7; left: max(var(--gut), (100vw - var(--max)) / 2 + var(--gut)); top: max(clamp(5.4rem, 9vh, 7rem), calc(var(--head-h) + 1.2rem)); max-width: min(460px, 32vw); opacity: 0; transform: translateY(30px); } .craft.is-pinned .craft__progress { display: block; position: absolute; z-index: 9; inset: auto 0 0; } } @media (min-width: 861px) and (min-aspect-ratio: 2 / 1) and (prefers-reduced-motion: no-preference) { .craft.is-pinned .craft__stack { width: min(44vw, 66vh); } } @media (min-width: 861px) and (max-width: 1279px) { /* small desktops: the stack must clear the head column */ .craft.is-pinned .craft__head { width: min(460px, 28vw); } .craft.is-pinned .craft__final { max-width: min(460px, 28vw); } .craft.is-pinned .craft__stack { left: 62%; width: min(56vw, 70vh, 1100px); } } /* ============================================================ COLOPHON — the numbers band, three link columns, the address. Brand string as text only; the logo lives in the header. ============================================================ */ .vftr2 { background: var(--ink); color: var(--paper); padding-bottom: var(--s-4); } .vftr2__band { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--paper); border-bottom: 1px solid var(--rule-paper-soft); } .vftr2__band > div { display: flex; flex-direction: column-reverse; gap: .25rem; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-left: 1px solid var(--rule-paper-soft); padding-left: var(--s-4); } .vftr2__band > div:first-child { border-left: 0; padding-left: 0; } .vftr2__band dt { font-family: var(--mono); font-size: var(--fs-mono-sm); font-weight: 500; letter-spacing: var(--track-mono); text-transform: uppercase; color: rgba(255, 255, 255, var(--a-2)); } .vftr2__band dd { font-family: var(--display); font-size: var(--fs-num-sm); line-height: 1; letter-spacing: var(--track-num); font-variant-numeric: tabular-nums; } .vftr2__main { grid-column: 1 / -1; display: grid; grid-template-columns: 4fr 2fr 2fr 4fr; column-gap: var(--col-gap); row-gap: var(--s-6); padding: var(--s-6) 0; } .vftr2__name { display: inline-flex; align-items: center; gap: .6rem; color: rgba(255, 255, 255, var(--a-2)); } .vftr2__id > p + p { margin-top: var(--s-3); color: rgba(255, 255, 255, var(--a-2)); max-width: 34ch; } .vftr2__id a { color: var(--paper); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .vftr2__id a:hover { text-decoration-thickness: 2px; } .vftr2__col h3, .vftr2__contact h3 { color: rgba(255, 255, 255, var(--a-3)); margin-bottom: var(--s-3); padding-bottom: .5rem; border-bottom: 1px solid var(--rule-paper-soft); } .vftr2__col a { display: block; padding: .35rem 0; color: rgba(255, 255, 255, var(--a-1)); transition: color var(--click), translate var(--click); } .vftr2__col a:hover { color: var(--paper); translate: 3px 0; } .vftr2__contact { font-style: normal; } .vftr2__contact > a:not(.btn):not(.rowlink) { display: block; padding: .3rem 0; color: rgba(255, 255, 255, var(--a-1)); } .vftr2__contact > a:not(.btn):not(.rowlink):hover { color: var(--paper); } .vftr2__tel { font-family: var(--mono); font-weight: 600; font-size: var(--fs-lede); letter-spacing: var(--track-mono); } .vftr2__contact p { margin: .6rem 0 var(--s-3); color: rgba(255, 255, 255, var(--a-2)); line-height: 1.6; } .vftr2__sheet { display: flex; width: fit-content; color: rgba(255, 255, 255, var(--a-1)); } .vftr2__cta { display: flex; width: fit-content; margin-top: var(--s-4); } .vftr2__legal { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: var(--s-4) 0; border-top: 1px solid var(--rule-paper-soft); color: rgba(255, 255, 255, var(--a-3)); } .vftr2__legal a { color: rgba(255, 255, 255, var(--a-2)); } .vftr2__legal a:hover { color: var(--paper); } @media (max-width: 980px) { .vftr2__main { grid-template-columns: 1fr 1fr; } .vftr2__id, .vftr2__contact { grid-column: 1 / -1; } } @media (max-width: 680px) { .vftr2__band { grid-template-columns: 1fr 1fr; } .vftr2__band > div:nth-child(3) { border-left: 0; padding-left: 0; } .vftr2__band > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-paper-soft); } .vftr2__main { grid-template-columns: 1fr; } } .vftr2__colophon { color: var(--faint); } @media (max-width: 680px) { .vftr2__colophon { display: block; margin-top: .4rem; } } /* print: a buyer who prints the specification gets clean paper sheets */ @media print { .vhdr, .runbar, .chrail, .vmenu, .htfade, video, .vhero__press, .vhero__live, .craft, .vftr2__cta, .btn--wipe::before { display: none !important; } .wrap2 > .gridlines, section[data-tone="paper"]::before, .plate::after, .aft__media::after, .rep__panel::after, .stg__media::after { display: none !important; } .vhero, [data-tone="ink"], .vftr2 { background: transparent !important; } .vhero *, [data-tone="ink"] *, .vftr2 * { color: #000 !important; background: transparent !important; border-color: #000 !important; } .vhero { min-height: 0 !important; } .vhero__in { min-height: 0 !important; padding-top: 1rem !important; } section { padding-block: 1.2rem !important; } .ledger, .kv, .key, .svc, .qa__item, .stg__card, .rep__spec, .plate, .wall__photo { break-inside: avoid; } .plate, .stg__media, .aft__media, .rep__panel { height: auto !important; min-height: 0 !important; } .plate > img, .aft__media > img { position: static !important; height: auto !important; transform: none !important; } a[href]::after { content: none !important; } /* scroll-triggered reveals must not print blank: force every hidden start state to its final state */ main *, footer * { opacity: 1 !important; visibility: visible !important; clip-path: none !important; transform: none !important; } /* the floor: stack each stage, drop the video frames, keep the stills */ .stg__card { display: block !important; } .stg__body { margin-top: 0 !important; max-width: 60ch; } .stg__media:has(> video) { display: none !important; } .stg__media { height: auto !important; } .stg__media > img { position: static !important; height: auto !important; } } /* ============================================================ PROGRAM PAGES — /contract-screen-printing/ and /full-package-apparel-printing/. The same sheet system as the home page: a photographic hero (ink), then paper sheets built from the shared ledgers, service columns and Q&A. Only what a landing page needs is new here. ============================================================ */ /* ---------- the hero: one photograph, the H1, the four numbers ---------- */ .pghero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(92svh, 980px); padding: calc(var(--head-h) + var(--s-6)) 0 var(--s-5); overflow: clip; color: var(--paper); background: var(--ink); } .pghero__media { position: absolute; inset: 0; z-index: -2; margin: 0; } .pghero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.72); } .pghero__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 8, 8, .9) 0%, rgba(8, 8, 8, .55) 42%, rgba(8, 8, 8, .25) 100%); } .pghero .wrap2 { align-items: end; } .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: var(--s-5); color: rgba(255, 255, 255, var(--a-2)); } .crumbs a { color: rgba(255, 255, 255, var(--a-1)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; } .crumbs a:hover { color: var(--paper); } .pghero .chap { color: var(--paper); margin-bottom: var(--s-4); } .pghero h1 { grid-column: 1 / span 9; font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 1rem + 6.4vw, 9rem); line-height: .96; letter-spacing: var(--track-h1); text-transform: uppercase; } .pghero h1 .vhero__hit { margin-top: .06em; } .pghero__lower { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-4); align-items: end; margin-top: var(--s-5); } .pghero__lede { grid-column: 1 / span 6; font-size: calc(var(--fs-body) * 1.1); line-height: 1.5; color: rgba(255, 255, 255, var(--a-1)); max-width: 52ch; } .pghero__act { grid-column: 8 / -1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--s-3); } .pghero .vhero__ticket { grid-column: 1 / -1; margin-top: var(--s-5); } /* ---------- sheets ---------- */ .pg section[data-tone="paper"] > .wrap2 > .ledger, .pg section[data-tone="paper"] > .wrap2 > .kv { margin-top: var(--s-6); } /* a numbered route: four stations as ruled columns (rows on phones) */ .route { grid-column: 1 / -1; margin-top: var(--s-6); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); counter-reset: none; } .route > li { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-5); border-left: 1px solid var(--rule); } .route > li:first-child { border-left: 0; padding-left: 0; } .route b { font-family: var(--display); font-weight: 400; font-size: var(--fs-num-sm); line-height: 1; letter-spacing: var(--track-num); } .route h3 { font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--track-display); text-transform: uppercase; } .route .mono-sm { color: var(--mid); } .route p { color: var(--mid); max-width: 36ch; } /* two ruled columns: a list beside a list, or a list beside a plate */ .pgcols { grid-column: 1 / -1; margin-top: var(--s-6); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-5); align-items: start; } .pgcols > * { grid-column: span 6; min-width: 0; } .pgcols .plate { height: clamp(320px, 46vh, 560px); } .pgcols p { color: var(--mid); max-width: var(--measure-body); } .pgcols p + p { margin-top: var(--s-3); } .pgcols h3 { font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.02; letter-spacing: var(--track-display); text-transform: uppercase; margin-bottom: var(--s-3); text-wrap: balance; } .inklist { columns: 2; column-gap: var(--col-gap); border-top: 2px solid var(--ink); } .inklist li { break-inside: avoid; display: flex; justify-content: space-between; gap: var(--s-3); padding: .6rem 0; border-bottom: 1px solid var(--rule); } .inklist b { font-weight: 600; } .inklist span { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--faint); } /* the service area: three ruled cells, the claim each one can back up */ .area { grid-column: 1 / -1; margin-top: var(--s-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); } .area > div { padding: var(--s-4) var(--s-4) var(--s-5); border-left: 1px solid var(--rule); } .area > div:first-child { border-left: 0; padding-left: 0; } .area dt { font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--track-display); text-transform: uppercase; } .area dd { margin-top: var(--s-3); color: var(--mid); max-width: 38ch; } /* next steps: the quote, the phone, the other program */ .pgcta { grid-column: 1 / -1; margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--ink); } .pgcta .rowlink { color: var(--mid); } .pgcta .rowlink:hover { color: var(--ink); } .pgnext { grid-column: 1 / -1; margin-top: var(--s-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--ink); } .pgnext a { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-5) 0; border-bottom: 1px solid var(--rule); transition: background-color var(--click), color var(--click); } .pgnext a + a { padding-left: var(--s-4); border-left: 1px solid var(--rule); } .pgnext a .mono-sm { color: var(--mid); } .pgnext a b { font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--track-display); text-transform: uppercase; } .pgnext a:hover { background: var(--ink); color: var(--paper); } .pgnext a:hover .mono-sm { color: rgba(255, 255, 255, var(--a-2)); } /* the published specification: label, figure, what qualifies it */ .ledger--spec th { width: 22%; padding-right: var(--s-4); } .ledger--spec td.val { width: 1%; padding-right: var(--s-5); } .ledger--spec td:last-child { color: var(--mid); max-width: 60ch; } .pg .ledger--net { grid-column: 1 / -1; } /* questions on a program page: printed open, two ruled columns wide, one on phones */ .pg .qa { grid-template-rows: none; grid-auto-flow: row; } @media (min-width: 901px) { .pg .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg .qa__item:nth-child(n) { padding-left: 0; margin-left: 0; border-left: 0; border-top: 1px solid var(--rule); } .pg .qa__item:nth-child(-n+2) { border-top: 0; } .pg .qa__item:nth-child(even) { padding-left: calc(var(--col-gap) / 2); margin-left: calc(var(--col-gap) / -2); border-left: 1px solid var(--rule); } } @media (max-width: 900px) { .pghero { min-height: 0; padding-top: calc(var(--head-h) + var(--s-5)); } .pghero__lower { display: block; } .pghero__act { justify-content: flex-start; margin-top: var(--s-4); } .route { grid-template-columns: 1fr 1fr; } .route > li:nth-child(3) { border-left: 0; padding-left: 0; } .route > li:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } .pgcols > * { grid-column: 1 / -1; } .area { grid-template-columns: 1fr; } .area > div { border-left: 0; padding-left: 0; border-bottom: 1px solid var(--rule); } } @media (max-width: 680px) { .route { grid-template-columns: 1fr; } .route > li { border-left: 0 !important; padding: var(--s-3) 0 var(--s-4) !important; border-bottom: 1px solid var(--rule); grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--s-3); } .route > li > :not(b) { grid-column: 2; } .route b { grid-row: 1 / span 3; } .inklist { columns: 1; } .pgnext { grid-template-columns: 1fr; } .pgnext a + a { padding-left: 0; border-left: 0; } .pghero__act { display: grid; grid-template-columns: 1fr; } .pghero__act .btn { width: 100%; } .pg .qa__item h3 { padding: var(--s-3) 0 .2rem; } .ledger--spec, .ledger--spec tbody { display: block; } .ledger--spec tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); } .ledger--spec th, .ledger--spec td { width: auto !important; padding: 0 !important; border: 0; } .ledger--spec td:last-child { grid-column: 1 / -1; margin-top: .3rem; } } /* ============================================================ THE PHONE SHEET — stacked layouts (≤900) and phones (≤680). Two jobs, both screen only (print keeps its own sheet): 1. Print each fact once. .is-echo marks a block that repeats what the reader was already handed on the way down (the hero ticket, a stage ledger, the anatomy spec). Stacked layouts drop it; the desktop composition, which reads across rather than down, keeps it. 2. Shorten the scroll without losing a fact: a two-column comparison, folded questions, the separations as a strip, stage heads on one line. Loaded last so it wins by order. Nothing here applies above 900px. ============================================================ */ @media screen and (max-width: 900px) { .is-echo { display: none !important; } /* captions inside a parallax plate stay POSITIONED paper blocks. The old static captions sat under the fixed-height frame and were clipped out of sight. */ .steps1__cap, .rep__cap, .wall__plcap { position: absolute; left: 0; right: auto; bottom: 0; width: auto; max-width: min(460px, calc(100% - var(--gut))); padding: var(--s-3) var(--s-4) var(--s-3) var(--gut); gap: .3rem; } .plate__cap .reg { display: none; } /* cross-links point a few screens further down the same scroll */ .wrap2 > .off { display: none; } /* 04: the one key left (fourteen applications) is a single ruled line */ .wall__key { grid-template-columns: 1fr; } .wall__key > div { display: flex; align-items: baseline; justify-content: space-between; padding-right: 0; } /* 07: stacked rows are grids; the table around them must not be a table or each row shrinks to its content */ .ledger--net, .ledger--net tbody { display: block; width: 100%; } /* 10: the section head already opens the brief; the form sheet starts at the steps */ .wiz__kick, .wiz__title { display: none; } .wiz__lede { margin-top: 0; } } @media screen and (max-width: 680px) { /* chapter plates: long names wrap, and the crosshair would float to the far edge */ .chap::after { display: none; } .chap { margin-bottom: var(--s-4); } /* ---------- 01 · the operation (the figures are in the hero ticket) ---------- */ .steps1__row { margin-top: var(--s-5); border-bottom: 0; } .steps1__ledger { margin-top: var(--s-4); } .steps1__ledger > div { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: baseline; gap: var(--s-3); } .steps1__ledger dd { text-align: left; font-size: 1.2rem; line-height: 1.08; } .steps1__plate { height: clamp(240px, 70vw, 340px); } .steps1__cap p { display: none; } /* ---------- 02 · a real two-column comparison ---------- The route plates head the columns once; every row prints its label once. Table, sections and rows become blocks and grids together: a grid inside a real table is wrapped in an anonymous cell and its rule stops short. */ .ledger--compare, .ledger--compare thead, .ledger--compare tbody, .ledger--compare tfoot { display: block; width: 100%; } .ledger--compare thead tr, .ledger--compare tbody tr, .ledger--compare tfoot tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); } .ledger--compare thead tr { border-bottom: 1px solid var(--ink); } .ledger--compare thead th { display: block; padding: var(--s-4) 0 var(--s-3); border: 0; } .ledger--compare thead th:first-child, .ledger--compare thead th .mono-sm, .ledger--compare thead th p { display: none; } .ledger--compare thead th b { font-size: clamp(1.2rem, 1rem + 1.2vw, 1.5rem); } .ledger--compare .rtag { width: 1.9em; height: 1.9em; margin-bottom: .5rem; font-size: 1rem; } .ledger--compare tbody tr { row-gap: .35rem; padding: var(--s-3) 0; } .ledger--compare th[scope="row"] { grid-column: 1 / -1; margin: 0; } .ledger--compare td { font-size: .95rem; line-height: 1.4; } .ledger--compare td + td { margin-top: 0; } .ledger--compare td[data-col]::before { content: none; } .ledger--compare td[data-col] + td[data-col] { margin-left: calc(var(--s-4) / -2); padding-left: calc(var(--s-4) / 2); border-left: 1px solid var(--rule); } .ledger--compare td.same { grid-column: 1 / -1; } .ledger--compare tfoot .btn { white-space: normal; text-align: center; line-height: 1.25; padding: .7rem .5rem; font-size: var(--fs-mono-sm); letter-spacing: .08em; } /* ---------- 03 · the product photo at a phone ratio ---------- */ .aft__media { height: clamp(320px, 106vw, 460px); } /* ---------- 04 · swatches a touch shorter; the closing dot plate repeats the swatches ---------- */ .wall__photo:not(.wall__photo--hero):not(.wall__photo--wide) img { aspect-ratio: 5 / 4; } .wall__plate { display: none; } section.wall[data-pad] { padding-bottom: var(--sec-pad); } /* ---------- 05 · plates sized for a phone, the stage head on one line ---------- */ .stg__grid { row-gap: var(--s-5); } .stg__card > .stg__media { height: clamp(220px, 62vw, 320px); } .stg__card--3 > .stg__media { height: clamp(300px, 94vw, 440px); } .stg__card .stg__body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); align-items: end; margin-top: 0; padding-top: var(--s-3); } .stg__no { grid-row: 1 / span 2; font-size: 2.75rem; line-height: .82; } .stg__kick { margin-top: 0; } .stg__body h3 { margin-top: .15rem; } .stg__body p, .stg__facts { grid-column: 1 / -1; } /* ---------- 06 · the eight separations as one contact strip, then the assembled print ---------- */ .craft__sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); } .craft__sticky { row-gap: var(--s-5); } /* ---------- 08 · the owner's ledger as ruled rows (copy untouched) ---------- */ .rep__spec { border-left: 0; } .rep__spec li { grid-template-columns: 2.6rem minmax(0, 1fr); padding: .65rem 0; border-right: 0; } .rep__spec b { font-size: 1.2rem; } .rep__panel { height: clamp(190px, 52vw, 260px); } /* ---------- 09 · verdict and question; the detail folds (the script adds .qa__q) ---------- */ .qa { margin-top: var(--s-5); } .qa__item { position: relative; grid-template-columns: 5.4rem minmax(0, 1fr); column-gap: var(--s-3); align-items: center; padding: 0; } .qa__lead { grid-row: 1; font-size: 1.15rem; } .qa__item h3 { grid-column: 2; } .qa__item p { position: relative; grid-column: 1 / -1; margin: 0; padding: 0 0 var(--s-4) calc(5.4rem + var(--s-3)); max-width: none; } .qa__q { display: grid; grid-template-columns: minmax(0, 1fr) 12px; align-items: center; column-gap: var(--s-3); width: 100%; min-height: 60px; padding: var(--s-3) 0; text-align: left; line-height: 1.35; } .qa__q::before { content: ""; position: absolute; inset: 0; } /* the verdict is part of the target; the open answer sits above it (position: relative) */ .qa__q::after { content: ""; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 2px 100% no-repeat; transition: rotate var(--click); } .qa__item.is-open .qa__q::after { rotate: 45deg; } .qa__q:focus-visible { outline-offset: -2px; } /* ---------- 10 · the direct line as a ruled call row: the words, then the number ---------- */ .brief__talk .rowlink { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-3); width: 100%; padding: var(--s-3) 0; border-block: 1px solid var(--rule); } .brief__talk .rowlink > em { grid-row: 2; font-size: var(--fs-lede); letter-spacing: .06em; } .brief__talk .rowlink > span { grid-row: 1 / span 2; grid-column: 2; font-size: 1.2rem; } .brief__talk .rowlink::after { content: none; } /* ---------- colophon · the two link columns side by side ---------- */ .vftr2__main { grid-template-columns: 1fr 1fr; row-gap: var(--s-5); padding-block: var(--s-5); } .vftr2__id, .vftr2__contact { grid-column: 1 / -1; } } @media print { .qa__item p[hidden] { display: block !important; } .qa__q::before, .qa__q::after { display: none; } }