/* * The Crypto Secret — design tokens (Story 1.1). * * Every value below is copied VERBATIM from * design-artifacts/D-Design-System/tokens.md, which was itself extracted from * the 15 approved artboards in design/canvas/ by counting actual usage. * Do not round, harmonise, substitute or "improve" any of them. The negative * letter-spacing at large sizes is load-bearing, not decoration: a 72px hero * with default tracking reads as a different website. * * The artboards declare zero CSS custom properties — every value there is a * literal hex (design/canvas/_head.html:11-14). So the artboards cannot * arbitrate token NAMING; only tokens.md fixes the --tcs-* names, and this * file is where they become real. * * This file carries the :root block and the global box-sizing reset, and * nothing else. Applying the tokens to elements — the colour bands, the type * scale, the motion — is Stories 1.2 and 1.3. */ :root { /* --------------------------------------------------------------------- * COLOUR — all 18 tokens, tokens.md "Colour" * * The rule that governs the palette: sections alternate full-bleed * grounds (cream → black → orange → …), each section owns exactly one. * Orange sections take black type; black sections take cream type. * #F7931A is never a large fill except on a buy button. * ------------------------------------------------------------------- */ --tcs-black: #0C0C0D; /* 243 uses — primary text; full-bleed dark sections; primary button on cream */ --tcs-orange: #F7931A; /* 228 — ACCENT. Buy buttons and small details only. Bitcoin brand orange */ --tcs-muted: #8B877D; /* 194 — captions, meta, footer text */ --tcs-cream: #F4F1EA; /* 118 — page ground; text on dark sections */ --tcs-body: #55524B; /* 106 — body copy on cream */ --tcs-border: #E4DED0; /* 104 — card and rule borders on cream */ --tcs-body-dark: #A9A49A; /* 40 — body copy on black. NOT --tcs-body, which fails contrast there (~2.4:1) */ --tcs-cream-2: #EFEADF; /* 37 — inset fills, gradient stop */ --tcs-white: #FFFFFF; /* 36 — card fill on cream */ --tcs-amber: #B8730C; /* 35 — link colour on cream/white (orange fails contrast as a link) */ --tcs-border-2: #DCD5C6; /* 32 — input borders */ --tcs-dim: #6E6A62; /* 30 — headline setup line; legal disclaimer */ --tcs-border-dark: #232325; /* 23 — borders on black */ --tcs-ink: #3A382F; /* 18 — long-form legal body */ --tcs-amber-2: #8A6A3C; /* 14 — chapter numerals on orange cards */ --tcs-error: #C0392B; /* 11 — errors only */ --tcs-panel: #131315; /* 10 — raised panel on black */ --tcs-green: #26A17B; /* — confirmations, Tether mark. NEVER a CTA */ /* --------------------------------------------------------------------- * COLOUR ALIASES * * DESIGN.md names five of the colours above differently, and the * component specs written against it cite those names. The VALUES agree * exactly; only the spelling differs. The --tcs-* names above stay * canonical; these aliases exist so a later story that reaches for the * DESIGN.md spelling resolves a real colour instead of silently * inheriting an unset variable — which renders as no declaration at all, * the hardest kind of styling bug to see. * ------------------------------------------------------------------- */ --tcs-amber-link: var(--tcs-amber); /* DESIGN.md colors.amber-link #B8730C */ --tcs-amber-numeral: var(--tcs-amber-2); /* DESIGN.md colors.amber-numeral #8A6A3C */ --tcs-border-input: var(--tcs-border-2); /* DESIGN.md colors.border-input #DCD5C6 */ --tcs-panel-dark: var(--tcs-panel); /* DESIGN.md colors.panel-dark #131315 */ --tcs-success: var(--tcs-green); /* DESIGN.md colors.success #26A17B */ /* --------------------------------------------------------------------- * TYPOGRAPHY — tokens.md "Typography" * * Instrument Sans is the only face. The hierarchy comes from size and * tracking, never from mixing families. The faces are self-hosted in * ../fonts/ — see fonts.css. * ------------------------------------------------------------------- */ --tcs-font: 'Instrument Sans', "Helvetica Neue", Arial, sans-serif; /* Declared, and deliberately unused in this story. tokens.md:40 lists a * monospace stack for token labels; DESIGN.md:193 says "one family, * nothing else". Declaring the property costs nothing and loads no second * face — every entry in the stack is a system font. No rule may reference * it here. */ --tcs-mono: ui-monospace, Menlo, monospace; --tcs-fw-regular: 400; --tcs-fw-medium: 500; --tcs-fw-semibold: 600; --tcs-fw-bold: 700; /* Hero h1 — desktop: 72 / 1.00 / 600 / −.045em */ --tcs-fs-hero: 72px; --tcs-lh-hero: 1.00; --tcs-ls-hero: -0.045em; /* Hero h1 — mobile: 42 / 1.04 / 600 / −.040em */ --tcs-fs-hero-mobile: 42px; --tcs-lh-hero-mobile: 1.04; --tcs-ls-hero-mobile: -0.040em; /* Section h2 — desktop: 54 / 1.04 / 600 / −.040em */ --tcs-fs-h2: 54px; --tcs-lh-h2: 1.04; --tcs-ls-h2: -0.040em; /* Section h2 — mobile: 34 / 1.04 / 600 / −.038em */ --tcs-fs-h2-mobile: 34px; --tcs-lh-h2-mobile: 1.04; --tcs-ls-h2-mobile: -0.038em; /* Page h1, inner pages. tokens.md states RANGES here — 44–54 / 1.02–1.04 * — which cannot be a single CSS value. DESIGN.md:53-58 gives the * discrete pair the artboards actually use, and that is what is fixed * here: 44px / 1.04 / 600 / −.042em. */ --tcs-fs-page-title: 44px; --tcs-lh-page-title: 1.04; --tcs-ls-page-title: -0.042em; /* Card title: 17 / 1.25 / 600 / −.022em */ --tcs-fs-card-title: 17px; --tcs-lh-card-title: 1.25; --tcs-ls-card-title: -0.022em; /* Body: 17 / 1.66 / 400 */ --tcs-fs-body: 17px; --tcs-lh-body: 1.66; /* Small body: 15 / 1.70 / 400 — also the floor for interface text. * Nothing in the interface goes below --tcs-fs-eyebrow (12px). */ --tcs-fs-body-sm: 15px; --tcs-lh-body-sm: 1.70; /* Eyebrow label: 12 / 600 / +.13em, uppercase. The only POSITIVE * tracking in the system. */ --tcs-fs-eyebrow: 12px; --tcs-ls-eyebrow: 0.13em; --tcs-tt-eyebrow: uppercase; /* Closing wordmark: 232 / .78 / 700 / −.055em */ --tcs-fs-wordmark: 232px; --tcs-lh-wordmark: 0.78; --tcs-ls-wordmark: -0.055em; /* Wordmark — mobile: HomeMobile.dc.html:175, 62px. deferred-work.md * (story 1.1 entry) flagged the missing mobile variant; story 2.6 is the * first consumer of the wordmark and needs it to avoid overflowing a * 390px viewport, so it is named here rather than left for a later story * to invent under deadline. Weight, line-height and tracking are unchanged * from desktop — the board only shrinks the size. */ --tcs-fs-wordmark-mobile: 62px; /* --------------------------------------------------------------------- * SHAPE — tokens.md "Shape & spacing" * * tokens.md states radius as RANGES (6–8px buttons, 10–12px cards, * 14–18px panels), which cannot be single CSS values. DESIGN.md:87-93 * gives the discrete scale the artboards actually use, and that scale is * what is fixed here. * ------------------------------------------------------------------- */ --tcs-radius-sm: 6px; /* buttons, tight end of the 6–8px range */ --tcs-radius: 8px; /* buttons, default */ --tcs-radius-md: 12px; /* cards */ --tcs-radius-lg: 16px; /* panels */ --tcs-radius-xl: 18px; /* panels, loose end of the 14–18px range */ --tcs-radius-full: 9999px; /* pills and round marks */ --tcs-border-width: 1px; /* --------------------------------------------------------------------- * SPACING — tokens.md "Shape & spacing" * ------------------------------------------------------------------- */ --tcs-section-y: 92px; /* desktop section padding: 92px 40px */ --tcs-section-x: 40px; --tcs-section-y-mobile: 56px; /* mobile section padding: 56px 20px */ --tcs-section-x-mobile: 20px; --tcs-card-gap: 16px; /* DESIGN.md spacing.card-gap */ --tcs-tap-min: 44px; /* minimum tap target, inline text links included */ /* --------------------------------------------------------------------- * MOTION — tokens.md "Motion contract" * * Declared here; consumed by Story 1.2, which builds the primitives. * Hard limits that apply wherever these are used: only opacity and * transform may animate — never width, height, top or left — and every * animation needs a prefers-reduced-motion state that resolves to the * animation's FINAL value, never to zero and never to invisible. * ------------------------------------------------------------------- */ --tcs-ease-reveal: cubic-bezier(.16, 1, .3, 1); --tcs-ease-draw: cubic-bezier(.4, 0, .2, 1); /* Scroll reveal: translateY(26px)→0, opacity 0→1, 900ms */ --tcs-reveal-distance: 26px; --tcs-dur-reveal: 900ms; --tcs-stagger-headline: 100ms; /* Card hover: translateY(−6px) + shadow, 340ms */ --tcs-card-hover-lift: -6px; --tcs-dur-card-hover: 340ms; /* Button shimmer: 3.6s sweep, translateX(−140% → 240%) */ --tcs-dur-shimmer: 3.6s; --tcs-shimmer-from: -140%; --tcs-shimmer-to: 240%; /* Wordmark sweep (Story 2.6, _head.html:37 `@keyframes sweep`): 7s linear * loop, background-position 0% 50% → 200% 50% over a 200%-wide gradient. */ --tcs-dur-sweep: 7s; --tcs-sweep-from: 0% 50%; --tcs-sweep-to: 200% 50%; --tcs-sweep-size: 200% 100%; /* Aurora blobs: 24s / 30s loops, translate + scale, blur(30px) */ --tcs-dur-blob-1: 24s; --tcs-dur-blob-2: 30s; --tcs-blob-blur: 30px; /* Book tilt: perspective(1400px) rotateY(−14deg→−7deg), 12s */ --tcs-book-perspective: 1400px; --tcs-book-tilt-from: -14deg; --tcs-book-tilt-to: -7deg; --tcs-dur-book-tilt: 12s; /* Coin orbits: 30s / 42s / 24s, counter-rotated so coins stay upright */ --tcs-dur-orbit-1: 30s; --tcs-dur-orbit-2: 42s; --tcs-dur-orbit-3: 24s; /* Marquees: 28s topics · 40s assets · 40s + 46s reviews (opposite * directions), pause on hover */ --tcs-dur-marquee-topics: 28s; --tcs-dur-marquee-assets: 40s; --tcs-dur-marquee-reviews-a: 40s; --tcs-dur-marquee-reviews-b: 46s; /* SVG draw: stroke-dashoffset 1200→0, 3.4s */ --tcs-svg-dash: 1200; --tcs-dur-svg-draw: 3.4s; /* --------------------------------------------------------------------- * MOTION — values that exist only in design/canvas/_head.html * * tokens.md's motion contract is a prose summary; the artboard head is * the literal source. Everything below appears there as a hardcoded * value inside a .btn / .card / .row / .sh rule and has no name in * tokens.md. Story 1.2 consumes all of them, so they are named HERE * first and referenced from motion.css — never hardcoded into a rule, * which is what would let epic 2 quietly drift from the artboards. * * TWO DOCUMENTED EXCEPTIONS to "only opacity and transform animate": * .btn and .card transition box-shadow, and .row:hover shifts * padding-left. Those are deliberate hover affordances in the artboards, * not scroll motion. They are implemented as drawn and must not be * "fixed" to satisfy the general rule. * ------------------------------------------------------------------- */ /* Card hover shadow (_head.html:71, `.card:hover`). The lift itself is * --tcs-card-hover-lift / --tcs-dur-card-hover above. */ --tcs-card-hover-shadow: 0 22px 44px -14px rgba(12, 12, 13, .28); /* Button hover (_head.html:66-69). The lift is -3px over 220ms, and the * two shadows belong to the two button skins: .btnD is the dark button * that inverts to orange, .btnO the orange button that inverts to dark. */ --tcs-btn-hover-lift: -3px; --tcs-dur-btn-hover: 220ms; --tcs-btn-hover-shadow-dark: 0 14px 32px -8px rgba(247, 147, 26, .6); --tcs-btn-hover-shadow-orange: 0 14px 32px -8px rgba(12, 12, 13, .5); /* Button shimmer geometry (_head.html:70, `.btn .sh`). The duration and * the -140% -> 240% travel are already tokens above; the sweep's width * and its highlight colour were the two values still living only in the * artboard. */ --tcs-shimmer-width: 38%; --tcs-shimmer-highlight: rgba(255, 255, 255, .42); /* Wordmark gradient (_head.html:63, `.wm`'s `background`). Black-brown-black * so the sweep reads as light passing through the letters on the orange * closing band, rather than a colour change. */ --tcs-wordmark-gradient: linear-gradient(100deg, #0C0C0D 20%, #5A3A08 42%, #0C0C0D 62%); /* Marquee travel (_head.html:31-32, `@keyframes marq` / `marqR`). * -50% is not arbitrary: the track holds the content TWICE, so half a * track-width is exactly one seamless loop. Change this and the loop * visibly jumps. */ --tcs-marquee-travel: -50%; /* Row hover (_head.html:74-75, `.row` / `.row:hover`). */ --tcs-row-hover-bg: rgba(247, 147, 26, .07); --tcs-row-hover-indent: 12px; --tcs-dur-row-hover: 280ms; /* Sibling stagger between revealed elements in one group. tokens.md * names only the 100ms HEADLINE stagger; epic-1-context.md names both * ("100ms headline / 80ms sibling stagger"). js/reveal.js uses this one. */ --tcs-stagger-sibling: 80ms; /* --------------------------------------------------------------------- * MOTION — the hero's own values (Story 2.1) * * The nine values below appear in design/canvas/_head.html and in the * hero block of Main.dc.html as hardcoded literals inside a .ring, .tw, * .chip, .cue, .scan, .dot, .cwN or .book rule, and none of them has a * name in tokens.md. Epic 1's rule is that no rule hardcodes a value, so * they are named HERE first and referenced from css/hero.css — never * written into a declaration, which is what would let a later story * quietly drift away from the artboards. * * All of them animate only opacity or transform, and every one of them is * switched off by the reduced-motion block in css/hero.css, which * resolves each to its FINAL rest value rather than to invisible. * ------------------------------------------------------------------- */ /* 1. Twinkle on the eight ambient dots (_head.html:27, `.tw`). */ --tcs-twinkle-opacity-from: .12; --tcs-twinkle-opacity-to: .85; --tcs-twinkle-scale-from: .7; --tcs-dur-twinkle: 4s; /* 2. Floating chip (_head.html:28, `.chip`). The artboard's 9px bob was * cut to 6px in the 2026-09-03 stage redesign — at 9px two chips beside * a floating book read as three things drifting, at 6px they read as * one calm surface. The second chip is offset by 2.4s so the pair never * moves in lockstep. */ --tcs-chip-lift: -6px; --tcs-dur-chip: 7s; --tcs-chip-delay-2: 2.4s; /* 3. Scroll cue (_head.html:29, `.cue`). Travels DOWN 7px — the only * downward motion in the system, and deliberately so: it points at the * content below. */ --tcs-cue-travel: 7px; --tcs-cue-opacity-from: .35; --tcs-dur-cue: 2.2s; /* 4. Pulsing dot in the social-proof pill (_head.html:36, `.dot` / * `@keyframes pulseD`). Opacity only — the dot never moves. */ --tcs-pulse-opacity-from: .25; --tcs-dur-pulse: 2.6s; /* 5. The second aurora blob's blur. * * Main.dc.html:118 sets `filter: blur(36px)` on `.b2`, while `.b1` at * :117 uses 30px. --tcs-blob-blur (30px) is the shipped token and cannot * express both, so the second value gets its own name rather than being * hardcoded into hero.css or, worse, having .b2 silently rendered at the * wrong blur because 30px was "close enough". */ --tcs-blob-blur-2: 36px; /* 6. The twinkle field's second colour (Main.dc.html:123-129, `.tw`'s * `background`). Four of the eight ambient dots draw #C99A4E — the * muted companion to --tcs-orange, per the artboard — and it had no name * here, so front-page.php's tcs_hero_twinkles() carried it as a literal * hex in an inline `style` attribute, bypassing every per-stylesheet * no-literal-colour rule this file exists to enforce. Code-review fix, * 2026-09-04: named here so the PHP references a token like every other * twinkle value already does. */ --tcs-twinkle-companion: #C99A4E; /* --------------------------------------------------------------------- * MOTION — the hero stage (redesign, 2026-09-03) * * The artboard's stage — a pulsing halo, two dashed rings and three * coins orbiting THROUGH the book behind counter-rotation — was * replaced after review: it read as busy rather than considered. The * stage is now an instrument dial (hairline rings, a tick scale, one * slow orange sweep), the book resting at a fixed tilt on a cast shadow * and breathing gently, three coins PLACED on the dial where they never * cross the cover, and the two chips. Everything enters once in a short * choreographed sequence, then idles slowly. The old ring/orbit/scan * tokens (--tcs-ring-*, --tcs-counter-rotation*, --tcs-orbit-3-offset, * --tcs-scan-*, --tcs-book-rotate-x-*, --tcs-book-lift) were retired * with it; --tcs-dur-orbit-* and --tcs-book-tilt-from/-to above stay * declared for tokens.md's record but have no consumer. * * Only opacity and transform animate. Every value resolves to its final * state under prefers-reduced-motion in css/hero.css section 8. * ------------------------------------------------------------------- */ /* 1. The entrance. One duration and one easing for every element; the * order is carried by the per-element delays, glow first and the second * chip last, ~1.1s end to end. Idle loops begin exactly when an * element's entrance ends (delay + duration), so there is no seam. */ --tcs-dur-stage-enter: 900ms; --tcs-ease-stage: cubic-bezier(.2, .8, .2, 1); --tcs-stage-rise: 28px; --tcs-stage-pop-scale: .72; --tcs-stage-settle-scale: .94; --tcs-stage-delay-glow: 0ms; --tcs-stage-delay-dial: 120ms; --tcs-stage-delay-book: 220ms; --tcs-stage-delay-coin-1: 640ms; --tcs-stage-delay-coin-2: 780ms; --tcs-stage-delay-coin-3: 920ms; --tcs-stage-delay-chip-1: 1000ms; --tcs-stage-delay-chip-2: 1140ms; /* 2. The book at rest: a fixed three-quarter tilt (no longer a 12s * rotation, which read as wobble) and a 10px breath over 7s. The cast * shadow on the "ground" shrinks and fades in counter-phase. */ --tcs-book-tilt-y: -12deg; --tcs-book-tilt-x: 3deg; --tcs-book-float: -10px; --tcs-dur-book-float: 7s; --tcs-book-shadow-scale: .86; --tcs-book-shadow-opacity-to: .55; /* 3. The coins: placed, not orbiting. Each drifts 6px on its own period * so the three never move together. */ --tcs-coin-float: -6px; --tcs-dur-coin-float-1: 6s; --tcs-dur-coin-float-2: 7.4s; --tcs-dur-coin-float-3: 8.6s; /* 4. The dial's sweep — one 42-degree orange arc making a full lap in * 48s. Slow enough to be ambient, fast enough to be alive. */ --tcs-dur-dial-sweep: 48s; /* 5. The glow behind the book breathes between .7 and 1 over 9s. Its * floor is never 0 — a glow that vanishes flickers. */ --tcs-glow-opacity-from: .7; --tcs-glow-scale: 1.05; --tcs-dur-glow: 9s; /* 6. A diagonal sheen crosses the cover once every 9s, taking ~2s of * that: light passing over a glossy object, not a scanner. */ --tcs-dur-sheen: 9s; --tcs-sheen-highlight: rgba(255, 255, 255, .14); /* --------------------------------------------------------------------- * MOTION AND COLOUR — the noise-into-order band (Story 2.2) * * Every value below appears in design/canvas/_head.html or in the black * band of design/canvas/Main.dc.html as a hardcoded literal, and none of * them has a name in tokens.md. Epic 1's rule is that no rule hardcodes a * value, so they are named HERE first and referenced from css/noise.css. * * The flow line is the ONE documented exception to "only opacity and * transform animate" in this story: `stroke-dashoffset` is not a * compositable property, but it is also the only way to express a dashed * line travelling along its own path, and the artboard draws exactly that. * It animates a 5/9 dash pattern over a 750px horizontal stroke — a cost * bounded by one path — and css/noise.css resolves it to a solid, fully * visible line under prefers-reduced-motion rather than to a gap. * ------------------------------------------------------------------- */ /* 1. The flow line (_head.html:33 `@keyframes dash`, :59 `.flw`). The * offset is NEGATIVE: the dashes travel left-to-right, in the direction * the eight chapters are read. -160 is a whole number of 14px dash cycles * (5 + 9), which is what makes the loop seamless rather than jumping. */ --tcs-flow-dash: 5 9; --tcs-flow-offset: -160; --tcs-dur-flow: 4s; /* code-review fix, 2026-09-04: the noise band's own aurora blob * (Main.dc.html:229, `.b1` inside the black section) blurs at 32px — a * THIRD distinct blob-blur value, matching neither --tcs-blob-blur * (30px, hero's .b1) nor --tcs-blob-blur-2 (36px, hero's .b2). It gets * its own name for the same reason --tcs-blob-blur-2 exists: no shipped * token can express it without silently rendering the wrong blur. */ --tcs-blob-blur-3: 32px; /* code-review fix, 2026-09-04: the pricing band's own aurora blob * (Main.dc.html:468, `.b2` inside the black pricing section) blurs at * 34px — a FOURTH distinct blob-blur value, matching none of * --tcs-blob-blur (30px), --tcs-blob-blur-2 (36px) or --tcs-blob-blur-3 * (32px). Restoring the blob this story's own artboard draws (see * --tcs-pricing-blob-size below) needs its own name for the same reason * the other three do. */ --tcs-blob-blur-4: 34px; /* 2. The five panel colours of the illustration surface * (Main.dc.html:243-256). --tcs-panel (#131315) is the shipped token for a * raised panel on black and the MOBILE board uses it; the desktop board * instead paints a gradient between two DIFFERENT near-blacks and then * layers three progressively lighter hairlines over it. None of the five * is --tcs-panel, so none can borrow its name. * * NOTE what these are NOT: not one of them is ever a text or an SVG * `fill` colour. They are grounds and hairlines. Text on this panel is * --tcs-cream, --tcs-body-dark, --tcs-dim or --tcs-muted, every one of * which is measured against #0C0C0D. */ --tcs-panel-grad-from: #141416; /* Main.dc.html:243, gradient start */ --tcs-panel-grad-to: #0F0F11; /* Main.dc.html:243, gradient end */ --tcs-panel-divider: #1E1E20; /* :244, the caption row's underline */ --tcs-thread-line: #2A2A2C; /* :250, the tangled threads' strokes */ --tcs-flow-line: #3A3A3D; /* :251-253, the joins and the spine */ /* 3. The tangled-thread cloud's own opacity (Main.dc.html:246, * ``). The noise is deliberately half-present: it is what * the reader is leaving behind, and drawing it at full strength would give * it the same visual weight as the ordered spine. */ --tcs-thread-opacity: .72; /* 4. THE NOISE-INTO-ORDER ENTRANCE (2026-09-04 redesign). The panel * departs from Main.dc.html:245-263 on purpose: the board's cloud was * drawn too faint to read as noise, and nothing in it narrated the * resolution the section is about. The figure now plays ONCE when the * panel reveals — dots pop, threads draw, the two joins meet at a resolve * node, the rail draws left to right and the eight stops pop as it * reaches them — then settles into two quiet loops: the dash travel above * and an orange spark riding the rail. Every timing below is consumed by * css/noise.css; nothing there is literal. */ --tcs-noise-stagger: 45ms; /* between successive dots */ --tcs-noise-enter-dots: 80ms; /* first dot */ --tcs-noise-enter-threads: 220ms; /* first thread starts drawing */ --tcs-noise-thread-stagger: 160ms; --tcs-noise-enter-joins: 1050ms; --tcs-noise-enter-resolve: 1450ms; /* the node where the joins meet */ --tcs-noise-enter-rail: 1560ms; --tcs-noise-enter-stops: 1640ms; /* stop 1; the rail is ~26px in */ --tcs-noise-stop-stagger: 135ms; /* one 107px pitch of rail travel */ --tcs-noise-stop-stagger-mobile: 250ms; /* one 64px pitch of the vertical spine */ --tcs-noise-enter-flow: 2700ms; /* the dash travel fades in */ --tcs-noise-enter-spark: 3100ms; /* the spark's first run */ --tcs-dur-noise-pop: 520ms; --tcs-dur-noise-draw: 900ms; --tcs-dur-noise-rail: 1000ms; --tcs-dur-noise-fade: 600ms; --tcs-dur-spark: 5.4s; /* one trip along the 776px rail */ --tcs-noise-rail-travel: 776px; /* M534→H1310 in the 1360 viewBox */ --tcs-noise-halo-opacity: .12; /* the soft ring behind each disc */ --tcs-noise-halo-opacity-hover: .28; --tcs-noise-spark-glow: .22; --tcs-noise-glow-opacity: .16; /* the resolve node's halo */ /* The two bobbing coins that REPLACE the orbits at mobile * (HomeMobile.dc.html:59-60, its own _head.html:19-20 `drift` / `drift2`). * Mobile is a designed state with its own smaller motion vocabulary, not a * reflow of the desktop board, so these are its durations rather than the * orbit durations reused. */ --tcs-dur-drift-1: 8s; --tcs-dur-drift-2: 10s; /* --------------------------------------------------------------------- * SHAPE, MOTION AND COLOUR — the eight chapter cards (Story 2.3) * * Every value below appears in design/canvas/Main.dc.html:265-357 or in * design/canvas/_head.html as a hardcoded literal with no name in * tokens.md. Epic 1's rule is that no rule hardcodes a value, so they are * named HERE first and referenced from css/chapters.css. * * THE ONE THING THIS BLOCK EXISTS TO STOP: the miniatures are the * deliverable. A card with an icon and a gap is the state this design was * already rejected in, so every value that makes a miniature draw — the * gauge's short arc, the candles' grow origin, the bar heights' scale — * gets a name rather than living as a literal one edit away from being * "tidied" out. * ------------------------------------------------------------------- */ /* 1. RADIUS. Main.dc.html:273 draws the chapter card at 14px and its * inner miniature panel at 9px. DESIGN.md specifies 12px cards with a * border, and the shipped --tcs-radius-md is that 12px. The two disagree, * and the chapter cards are a THIRD card variant DESIGN.md does not * cover: they sit on the orange ground and carry no border at all. The * artboard wins on a visual conflict, so both radii get their own names * rather than being rounded into --tcs-radius-md / --tcs-radius-lg. */ --tcs-radius-chapter-card: 14px; --tcs-radius-chapter-panel: 9px; /* Mobile draws the same card at 11px (HomeMobile.dc.html:113) — a * genuinely different value, not a rounding of 14. */ --tcs-radius-chapter-card-mobile: 11px; /* 2. THE CANDLES' GROW (_head.html:35 `@keyframes grow`, :60 `.bar`). * * scaleY from .05, not from 0: a bar at scaleY(0) has no painted pixel at * all, and a miniature whose marks are momentarily absent is the rejected * empty-card state arriving one frame at a time. The origin is `bottom` * because a candle grows up from the axis; with the default centre origin * the bars would expand in both directions and detach from the baseline. * * animation-iteration-count is never `infinite` in this section — the * shorthand in chapters.css uses `both`, which runs exactly once and * holds the final value. */ --tcs-bar-scale-from: .05; --tcs-bar-origin: bottom; --tcs-dur-bar-grow: 1s; --tcs-bar-stagger: .08s; /* Main.dc.html:307, the seven candles' step */ /* 3. THE GAUGE'S SHORT ARC (Main.dc.html:297). * * The shipped draw tokens are --tcs-svg-dash: 1200 over * --tcs-dur-svg-draw: 3.4s, and the artboard OVERRIDES both inline for * this one path — because the gauge's needle arc is about 120 units long, * and a 1200 dasharray on a 120-unit path leaves the stroke entirely * offscreen for 90% of its run. The reader would see an empty gauge for * three seconds. These are correct design decisions, not stray inline * styles, so they get names instead of being hardcoded back in. */ --tcs-gauge-dash: 120; --tcs-dur-gauge-draw: 2s; /* 4. AN AA-PASSING REPLACEMENT FOR #B8B3A6. * * Main.dc.html uses #B8B3A6 eight times in this band — five as a CSS * `color` and three as an SVG `fill` — always for a caption or a * secondary label on the WHITE miniature panel. It measures 2.09:1 on * #FFFFFF and fails WCAG AA's 4.5:1 for body text by a wider margin than * the #55524B defect story 2.2 corrected. The artboards win on a visual * conflict; they do not win on an accessibility failure. * * #767164 is the same hue and chroma family lifted to 4.87:1 on white and * 4.31:1 on the cream card — passing AA everywhere it is used here while * staying visibly quieter than --tcs-ink (11.75:1) and --tcs-body * (7.79:1), so the caption keeps the subordinate weight the board * intended. It gets its own name rather than reusing --tcs-dim (5.38:1), * which is the HEADLINE SETUP colour and carries a different role. * * This is a NEW token, not an edit to a shipped one — the same treatment * --tcs-amber-2 gets below, and for the same reason. */ --tcs-caption: #767164; /* --tcs-muted (#8B877D) is 3.58:1 on white and fails AA as body text * there. It is correct on BLACK (5.46:1) and that is where the shipped * token is used. The chapter miniatures put it on white, so those uses * resolve to this name instead. Same value as --tcs-caption because the * role is the same — a quiet label on the white panel — but named * separately so a later change to one does not silently move the other. */ --tcs-label-on-white: #767164; /* --tcs-amber-2 (#8A6A3C) is the shipped chapter-numeral colour and it * measures 4.42:1 on the #F4F1EA card — 0.08 short of AA. It is a SHIPPED * TOKEN, so its value is not edited here (that needs a human); an * AA-passing variant is introduced alongside it instead. #75592C is the * same amber darkened to 5.78:1 on cream and 6.52:1 on white. */ --tcs-amber-numeral-aa: #75592C; /* 5. THE MINIATURE'S OWN GEOMETRY (Main.dc.html:274-356). * * The panel's minimum height is what guarantees a miniature has room to * draw at every width — the single value most directly standing between * this section and the rejected empty card, which is why it is a token * and not a literal in one rule. */ --tcs-chapter-panel-min-h: 104px; --tcs-chapter-card-pad: 22px; --tcs-chapter-panel-pad: 13px; --tcs-chapter-card-gap: 15px; /* The seven candle heights (Main.dc.html:307) and the bar width. Data * from the drawing, kept together so the shape cannot drift one bar at a * time. */ --tcs-candle-w: 9px; --tcs-candle-gap: 5px; /* The comparison bars' three fill stops (Main.dc.html:283-285). A CSS * gradient, deliberately NOT the .bar keyframe: "comparison bars" is a * static reading of a time horizon, and animating it would invent motion * the design does not have. */ --tcs-bar-swing: 72%; --tcs-bar-day: 48%; --tcs-bar-hold: 90%; /* The order book's six depth stops (Main.dc.html:325-327). */ --tcs-book-bid-1: 30%; --tcs-book-ask-1: 62%; --tcs-book-bid-2: 55%; --tcs-book-ask-2: 38%; --tcs-book-bid-3: 18%; --tcs-book-ask-3: 74%; /* The dot that marks the defined term, and the seed grid's cell * (Main.dc.html:276, :335-339). */ --tcs-chapter-dot: 5px; --tcs-seed-cell-h: 13px; /* The eighth card's three coin marks (Main.dc.html:351-353). Sized down * from the hero's 46/38/32 because the panel is 104px tall. */ --tcs-chapter-coin-1: 38px; --tcs-chapter-coin-2: 32px; --tcs-chapter-coin-3: 27px; /* --------------------------------------------------------------------- * SHAPE AND COLOUR — the comparison table and the credibility band * (Story 2.4) * * Every value below appears in design/canvas/Main.dc.html:360-420 as a * hardcoded literal with no name in tokens.md. Epic 1's rule is that no * rule hardcodes a value, so they are named HERE first and referenced * from css/comparison.css. * ------------------------------------------------------------------- */ /* 1. THE BOOK COLUMN'S TINT (Main.dc.html:367-386, `background: #FEF6EA`). * * The third column of the comparison table is washed a barely-there warm * cream so the eye reads it as the answer without the table shouting. It * is NOT --tcs-cream (#F4F1EA, the page ground — a column painted in it * would vanish into the band) and NOT --tcs-cream-2 (#EFEADF, the inset * fill, which is greyer and reads as a disabled cell). #FEF6EA is a * distinct fourth cream in the same family, and it is the only place on * the board it appears, which is exactly why it needs a name rather than * six copies of a literal across six cells. * * CONTRAST IS SAFE ON IT AT REST AND ON HOVER. --tcs-black measures * 18.23:1 on this tint and 17.30:1 once the row-hover wash composites * over it; --tcs-body is 7.27:1 and 6.89:1. Both clear AA in both * states. */ --tcs-compare-book-tint: #FEF6EA; /* 2. RADIUS. Main.dc.html:367 draws the table at 14px and :410-418 draws * each figure card at 13px. Neither is the shipped --tcs-radius-md * (12px) or --tcs-radius-lg (16px), and rounding them into those would * change two shapes the artboard fixes. The artboards win on a visual * conflict, so both get their own names. * * The table radius is load-bearing beyond taste: the table sets * `overflow: hidden` so the corner cells clip to it, and a cell tint that * squared off at the corner would be visible as a defect. */ --tcs-radius-compare-table: 14px; --tcs-radius-figure-card: 13px; /* 3. THE CREDIBILITY HEADLINE (Main.dc.html:398, `font-size: 46px`). * * NOT --tcs-fs-h2 (54px). This band's h2 sits in the right-hand column of * a 300px + 1fr grid rather than spanning the band, so the artboard sets * it two steps down. A 54px headline in that column wraps to four lines * and the three figure cards below it lose their relationship to it. Its * tracking is -.038em, not the h2's -.040em, for the same reason — the * board's own value, not a rounding. */ --tcs-fs-credibility-h2: 46px; --tcs-lh-credibility-h2: 1.08; --tcs-ls-credibility-h2: -0.038em; /* 4. THE TABLE'S OWN GEOMETRY (Main.dc.html:367-386). * * The header row is padded 20px 26px and the five body rows 19px 26px — * one pixel of difference that is the board's, and which keeps the header * fractionally taller than the rows beneath it. * * The label column is drawn at 1.2fr against two 1fr columns, but it * ships as minmax(0, 1.2fr): a bare fr has an implicit min-width of auto, * so one long unbroken cell string widens its column past its share and * pushes the whole row sideways. That is the horizontal-overflow failure * the I/O matrix forbids, and it is a grid rule, not a preference. */ --tcs-compare-cell-pad-y: 19px; --tcs-compare-cell-pad-x: 26px; --tcs-compare-head-pad-y: 20px; --tcs-compare-label-col: 1.2fr; /* The cell type: 15px for the row label, 14.5px for the two content * columns and the two column headers (Main.dc.html:368-386). Both clear * the 12px interface-text floor. */ --tcs-fs-compare-label: 15px; --tcs-fs-compare-cell: 14.5px; /* The tick and dash marks that head the two columns (Main.dc.html:368-369) * and the gap between a mark and its label. */ --tcs-compare-mark: 17px; --tcs-compare-mark-gap: 9px; /* The row rules are LIGHTER than the table's own border: --tcs-border-2 * (#DCD5C6) would read as five stacked tables. The board uses the inset * fill colour as a hairline here (Main.dc.html:371, `#EFEADF`), which is * --tcs-cream-2 doing a second job, and it is referenced as that rather * than duplicated. Named so the intent survives: this is a row rule, not * a fill. */ --tcs-compare-row-rule: var(--tcs-cream-2); /* 5. THE CREDIBILITY BAND'S GEOMETRY (Main.dc.html:395-420). * * A 300px eyebrow column against the content column, 70px apart; the * figure cards 24px inside with a 16px gutter; the two body paragraphs * 40px apart. */ --tcs-cred-label-col: 300px; --tcs-cred-col-gap: 70px; --tcs-cred-stack-gap: 30px; --tcs-cred-prose-gap: 40px; --tcs-figure-card-pad: 24px; --tcs-figure-card-gap: 16px; --tcs-figure-gutter: 9px; /* The figure itself: 34px desktop, 26px mobile, at the h2's tracking. * The mobile size is the board's nearest analogue for a three-up stat row * (HomeMobile.dc.html), not a proportional shrink of 34. */ --tcs-fs-figure: 34px; --tcs-fs-figure-mobile: 26px; --tcs-fs-figure-caption: 13.5px; /* The band's aurora blob (Main.dc.html:396) — a 520px orange radial * bleeding in from the top right at 14% peak, the same primitive the hero * and noise bands use, at this band's own size. The peak is a PERCENTAGE * rather than an alpha because it is consumed by color-mix(), which is * how every other blob in the system derives its stop FROM --tcs-orange * instead of respelling #F7931A next to it. */ --tcs-cred-blob-size: 520px; --tcs-cred-blob-pct: 14%; /* 6. THE TWO HEADER ROWS (Main.dc.html:361, :394). * * The comparison band's head sits 44px above its table and its lede is * measured at 400px — the same measure the chapters lede uses, because it * is the same two-column head pattern one band earlier. */ --tcs-compare-head-gap: 44px; --tcs-compare-lede-max: 400px; --tcs-lh-lede: 1.62; /* The comparison cell's line-height. The board sets none, so its cells * inherit the artboard body 1.5; 1.45 is used instead because these cells * are single clauses at 14.5px inside a 19px-padded row, and the band's * own --tcs-lh-body (1.66) opens the five rows to a height the head no * longer balances. */ --tcs-lh-compare-cell: 1.45; /* 7. THE CREDIBILITY BAND'S PROSE (Main.dc.html:398-401). * * The headline is measured at 780px — a hard max rather than a column * share, so the three lines break where the board breaks them however * wide the viewport gets. The two paragraphs are 16.5px / 1.72, the * board's own values rather than the system's 17px / 1.66 body: this is * body copy on BLACK, and the extra half-point of leading is what keeps * --tcs-body-dark legible against it. */ --tcs-cred-headline-max: 780px; --tcs-fs-cred-copy: 16.5px; --tcs-lh-cred-copy: 1.72; --tcs-lh-figure-caption: 1.45; /* --------------------------------------------------------------------- * SHAPE AND COLOUR — the reviews marquee and the guarantee band * (Story 2.5) * * Every value below appears in design/canvas/Main.dc.html:422-464 (and * HomeMobile.dc.html:124-137 for the mobile stack) as a hardcoded literal * with no name in tokens.md. Epic 1's rule is that no rule hardcodes a * value, so they are named HERE first and referenced from css/reviews.css. * * NOTHING ABOUT THE MOTION IS NAMED HERE, because it already is: * --tcs-dur-marquee-reviews-a (40s) and --tcs-dur-marquee-reviews-b (46s) * were declared at :220-221 in story 1.2 anticipating exactly this band, * and --tcs-marquee-travel (-50%) at :267 governs both. Adding a third * name for a speed that already has one is how two timings drift apart. * ------------------------------------------------------------------- */ /* 1. THE REVIEW CARD (Main.dc.html:430). * * 342px is a FIXED width, not a share of a grid, and that is the point: * these cards live inside a `width: max-content` marquee track, where a * percentage has no containing block to resolve against and a flexible * card would collapse to its text. The radius is 13px — the same figure * card radius story 2.4 named, and referenced as that rather than * respelled, because it is the same card shape one band earlier. * * The card is --tcs-white on the cream band, bordered --tcs-border. Both * are shipped tokens; only the geometry is new. */ --tcs-review-card-w: 342px; --tcs-review-card-pad: 24px; --tcs-review-card-gap: 13px; /* quote to name, inside one card */ --tcs-review-track-gap: 14px; /* card to card, and row A to row B */ /* The mobile card (HomeMobile.dc.html:128): 22px inside, 12px between, * 11px radius — the same radius the mobile chapter card takes, referenced * rather than respelled for the same reason. */ --tcs-review-card-pad-mobile: 22px; --tcs-review-stack-gap: 12px; /* 2. THE QUOTE AND THE NAME (Main.dc.html:430). * * 18px / 500 / 1.46 / -.018em desktop, 17px mobile (HomeMobile:128). This * is NOT --tcs-fs-body (17px / 1.66 / 400): a pull quote is set tighter * and heavier than body copy so it reads as someone speaking, and the * board fixes all four values. * * The name is 13px and takes --tcs-label-on-white, NOT the board's * #8B877D — see the note at that token. 13px is interface text, so the * 4.5:1 floor applies and 3.58:1 fails it. */ --tcs-fs-review-quote: 18px; --tcs-fs-review-quote-mobile: 17px; --tcs-lh-review-quote: 1.46; --tcs-ls-review-quote: -0.018em; --tcs-fs-review-name: 13px; /* 3. THE BAND'S HEAD (Main.dc.html:424-427). * * The headline is the band's own --tcs-fs-h2 (54px), so nothing new is * needed for it; the lede is measured at 340px and the head sits 44px * above the first track — the same --tcs-compare-head-gap the comparison * band uses, referenced rather than duplicated. */ --tcs-review-lede-max: 340px; /* 4. THE EDGE MASK (Main.dc.html:428). * * A symmetric fade at both ends of the viewport so cards read as * continuing past the edge rather than being guillotined by it. The * asset strip fades one edge at 84%; this band fades both, which needs * two stops rather than one. Written as PERCENTAGES because that is what * they are — the alpha in the gradient is spelled at the rule, since in * a mask only the alpha channel is read and nothing is ever painted. */ --tcs-review-mask-in: 5%; --tcs-review-mask-out: 95%; /* 5. THE GUARANTEE BAND (Main.dc.html:453-463). * * An 84px black disc holding a 40px shield glyph, then the copy column, * then the policy link — 34px apart. The grid ships as * `84px minmax(0, 1fr) auto`, never a bare 1fr: the copy column holds a * 34px headline whose longest word would otherwise set the column's * implicit auto min-width and push the nowrap link off the right edge. * * The band itself takes .tcs-band--short (66px), already declared in * sections.css:197 from this exact artboard line. */ --tcs-guarantee-badge: 84px; --tcs-guarantee-glyph: 40px; --tcs-guarantee-gap: 34px; --tcs-guarantee-copy-gap: 8px; --tcs-guarantee-copy-max: 700px; --tcs-guarantee-stroke: 1.7; /* The headline is 34px — coincidentally the mobile h2 size, but NOT that * token: this is the desktop size of a band whose headline shares a row * with a badge and a link, and the two would drift the moment either * changed. Its tracking is -.032em, the board's own, looser than the * h2's -.040em because 34px does not need the same optical correction. */ --tcs-fs-guarantee-h2: 34px; --tcs-lh-guarantee-h2: 1.12; --tcs-ls-guarantee-h2: -0.032em; --tcs-fs-guarantee-copy: 16px; --tcs-lh-guarantee-copy: 1.6; --tcs-fs-guarantee-link: 14.5px; /* 6. THE GUARANTEE BODY COLOUR, AS AN OPAQUE VALUE. * * Main.dc.html:460 draws it `rgba(12,12,13,.72)`. Composited over * --tcs-orange that resolves to #4E3211 and measures 5.11:1 — comfortably * AA, and the design note is explicit that it must not be "improved" * (--tcs-amber-2 is 2.17:1 on orange and is scoped to chapter numerals; * --tcs-body-dark is documented for black grounds only). * * IT SHIPS OPAQUE RATHER THAN AS THE RGBA, and that is a verification * decision as much as a rendering one. The contrast sweep composites an * element's cumulative OPACITY, not the alpha inside a `color` value — it * would read rgba(12,12,13,.72) as plain #0C0C0D and report 8.51:1, a * number no reader ever sees. Naming the composited result makes the * measurement the honest one and pins the value to the ground it was * computed against. */ --tcs-guarantee-copy-ink: #4E3211; /* 7. THE PRICING PANEL (Story 2.6, Main.dc.html:466-494). * * A two-column band: copy + checklist on the left, the price card on the * right, 80px apart. The card itself is a dark panel one shade lighter * than the band's own black ground, so it reads as a raised surface * rather than a flat rectangle on the same black. */ --tcs-pricing-col-gap: 80px; --tcs-pricing-copy-gap: 26px; --tcs-pricing-checklist-gap: 13px; --tcs-pricing-check-icon-gap: 11px; --tcs-pricing-check-icon: 18px; /* code-review fix, 2026-09-04: the band's aurora blob (Main.dc.html:468) * — a 620px orange radial bleeding in from the bottom right at 22% peak * — was dropped when this band was first built. Restored per the * artboard, matching every other band in the epic that carries one * (hero, credibility, noise). Sized and coloured the same way theirs * are: a named diameter and peak percentage here, composited from * --tcs-orange with color-mix at the rule (comparison.css:486-490's * convention) rather than a second spelling of the accent colour. */ --tcs-pricing-blob-size: 620px; --tcs-pricing-blob-pct: 22%; /* The headline is 54/1.04/-.04em desktop, 34/1.04/-.038em mobile — an * exact match to --tcs-fs-h2 / --tcs-fs-h2-mobile (tokens.css:101-109), * so it takes those rather than a duplicate pair. */ --tcs-fs-pricing-check: 16px; /* The card: a lighter-than-ground panel, not a second black. */ --tcs-pricing-card-bg: linear-gradient(160deg, #17171A, #0F0F11); --tcs-pricing-card-border: #2A2A2C; --tcs-pricing-card-padding: 44px; --tcs-pricing-card-gap: 24px; --tcs-pricing-card-shadow: 0 30px 70px -24px rgba(0, 0, 0, .8); --tcs-pricing-price-gap: 14px; --tcs-fs-pricing-price: 64px; --tcs-ls-pricing-price: -0.05em; --tcs-fs-pricing-was: 24px; /* Code-review fix (2026-09-04): this was #55524B, copied verbatim from * the artboard, on the pricing card's DARK background — measuring * ~2.3-2.5:1, under the WCAG AA 3:1 floor for this text's size, and * against this codebase's own documented rule (front-page.php's pricing * section header: "#55524B NEVER TOUCHES A DARK GROUND"). Reusing * --tcs-body-dark (tokens.css:38, the token this codebase already * documents as the correct dark-ground body ink) fixes the failure. */ --tcs-pricing-was-ink: var(--tcs-body-dark); --tcs-fs-pricing-badge: 13px; --tcs-ls-pricing-badge: 0.09em; /* Mobile card (HomeMobile.dc.html:148-152): smaller radius, tighter * padding, and every type size in the card steps down one notch. The * border is #232325, already --tcs-border-dark. */ --tcs-pricing-card-radius-mobile: 14px; --tcs-pricing-card-padding-mobile: 28px 22px; --tcs-fs-pricing-price-mobile: 46px; --tcs-ls-pricing-price-mobile: -0.048em; --tcs-fs-pricing-was-mobile: 20px; --tcs-pricing-checklist-gap-mobile: 11px; --tcs-fs-pricing-check-mobile: 15px; /* * The secure-payment row and the checklist text both draw #A9A49A, which * is already --tcs-body-dark (tokens.css:38, "body copy on black") — the * artboard's colour for exactly this job, so no new ink is named for * either. The refund-policy line draws #8B877D, already --tcs-muted. */ --tcs-pricing-secure-gap: 9px; --tcs-fs-pricing-secure: 13px; --tcs-fs-pricing-refund: 13px; /* 8. THE CLOSING BAND (Story 2.6, Main.dc.html:519-532). * * Headline + CTA share a row, 60px apart, 54px above the wordmark. The * band itself is .tcs-band--orange .tcs-band--flush-bottom — both already * declared in sections.css from this exact artboard line — so only the * content geometry is named here. */ --tcs-closing-row-gap: 60px; --tcs-closing-row-margin: 54px; --tcs-closing-copy-gap: 14px; --tcs-fs-closing-h2: 50px; --tcs-lh-closing-h2: 1.06; --tcs-ls-closing-h2: -0.04em; /* HomeMobile.dc.html:173 — 32/1.06/-.038em, close to but not the same as * --tcs-fs-h2-mobile (34px), so named rather than borrowed. */ --tcs-fs-closing-h2-mobile: 32px; --tcs-ls-closing-h2-mobile: -0.038em; --tcs-fs-closing-copy: 16.5px; --tcs-closing-copy-max: 420px; --tcs-closing-cta-gap: 10px; --tcs-fs-closing-save: 13.5px; /* * BOTH pieces of secondary copy on this band — the lede under the headline * and the "$60.00 · save 50%" line — reuse --tcs-guarantee-copy-ink rather * than a second hand-derived composite. The board draws them at two * different alphas (rgba(12,12,13,.72) and .66) over the same * --tcs-orange ground; .66 composites to #5C3A11 and measures 4.42:1, * under the 4.5:1 AA floor for text this size — the same failure mode the * guarantee band's own token comment documents and fixes by shipping * opaque. Reusing the already-AA .72 token (5.11:1) fixes the save line * the same way instead of inventing a second, barely-passing composite. */ /* --------------------------------------------------------------------- * SHAPE AND COLOUR — the checkout page (Story 3.2) * * Every value below appears in design/canvas/Checkout.dc.html or * CheckoutMobile.dc.html as a hardcoded literal with no name in * tokens.md. Epic 1's rule is that no rule hardcodes a value, so they are * named HERE first and referenced from css/checkout.css. * ------------------------------------------------------------------- */ /* 1. THE TWO-COLUMN LAYOUT (Checkout.dc.html:45, `grid-template-columns: * 1.3fr 1fr`). The form takes the wider share; the dark summary panel the * narrower. 64px apart, 56px above the page title. */ /* Redesign 2026-09-03: the summary is a fixed 432px column so the form * gets every remaining pixel; the artboard's 1.3fr/1fr left a 315px * form on a 1440 screen once WooCommerce's own 48% billing column bit. */ --tcs-checkout-col-form: minmax(0, 1fr); --tcs-checkout-col-summary: 432px; --tcs-checkout-col-gap: 72px; --tcs-checkout-top-pad: 48px; --tcs-checkout-bottom-pad: 88px; --tcs-checkout-form-max: 680px; /* * THE STICKY HEADER'S HEIGHT (2026-09-05). js/header.js overwrites this * on with the measured height on load and resize; the value here * is the no-JS fallback and the declaration the token gate requires. * Every sticky offset (legal sidebar, FAQ intro, checkout summary) and * every jumped-to heading's scroll-margin reads it. */ --tcs-header-h: 80px; --tcs-checkout-summary-top: calc(var(--tcs-header-h) + 24px); /* sticky offset, below the sticky header */ /* 2. THE FORM COLUMN (Checkout.dc.html:46-73). Sections stack 40px apart; * each section's own fields stack 18px apart, and a two-up row (name, * expiry/CVC) takes 14px. The step eyebrow ("1 — YOUR DETAILS") repeats * the system's eyebrow tracking but takes the accent colour rather than * --tcs-muted, since it is a numbered step marker, not a caption. */ --tcs-checkout-form-gap: 24px; --tcs-checkout-field-group-gap: 22px; --tcs-checkout-field-row-gap: 18px 16px; --tcs-checkout-field-gap: 8px; /* Each section is a white card (redesign 2026-09-03). */ --tcs-checkout-card-pad: 32px; --tcs-checkout-card-pad-mobile: 22px 18px; --tcs-checkout-card-radius: 16px; --tcs-checkout-card-border: var(--tcs-border); /* Inputs: 52px tall, 16px type — a field you can hit, not a hairline. */ --tcs-checkout-input-h: 52px; --tcs-checkout-input-h-mobile: 50px; --tcs-checkout-input-pad: 0 16px; --tcs-checkout-input-pad-mobile: 0 16px; --tcs-checkout-textarea-pad: 14px 16px; --tcs-checkout-input-radius: 10px; --tcs-checkout-input-border: var(--tcs-border-2); --tcs-checkout-input-border-hover: rgba(12, 12, 13, .34); --tcs-checkout-input-border-focus: 1.5px solid var(--tcs-orange); --tcs-checkout-input-ring: 0 0 0 4px rgba(247, 147, 26, .18); /* The payment-method tiles (Checkout.dc.html:65-66): a bordered card with * a radio dot, 16px inside, 12px between the dot and the label. The * selected tile takes a 2px dark border rather than the input's 1px — * genuinely thicker in the artboard, not a rounding of the same value. */ --tcs-checkout-tile-pad: 16px; --tcs-checkout-tile-gap: 12px; --tcs-checkout-tile-radius: 10px; --tcs-checkout-tile-border-selected: 2px solid var(--tcs-black); --tcs-checkout-tile-radio: 17px; --tcs-checkout-tile-radio-dot: 8px; /* 3. THE ORDER SUMMARY PANEL (Checkout.dc.html:76-98). A dark panel, * radius 16px (already --tcs-radius-lg), 34px inside, 22px between * blocks. Not --tcs-panel (#131315, the raised-panel token): the summary * sits directly on the page ground rather than on a black band, so it * needs its own full #0C0C0D fill rather than a lighter raised tone. */ --tcs-checkout-summary-pad: 32px; --tcs-checkout-summary-gap: 22px; --tcs-checkout-summary-bg: linear-gradient(180deg, #141416 0%, #0C0C0D 60%); --tcs-checkout-summary-rule: var(--tcs-border-dark); /* The product thumbnail: a small dark card holding the "101" mark, * 68x96 desktop / 54x76 mobile — the same proportions, not a rounded * share of one another. */ /* 2:3, the cover's own ratio (the thumb is now the real artwork). */ --tcs-checkout-thumb-w: 68px; --tcs-checkout-thumb-h: 102px; --tcs-checkout-thumb-w-mobile: 54px; --tcs-checkout-thumb-h-mobile: 81px; --tcs-checkout-thumb-pad: 10px 8px; --tcs-checkout-thumb-pad-mobile: 8px 7px; --tcs-checkout-thumb-radius: 3px; --tcs-checkout-thumb-gap: 16px; --tcs-checkout-thumb-gap-mobile: 14px; --tcs-checkout-product-gap: 5px; --tcs-checkout-totals-gap: 11px; /* The grand total's figure: 38px desktop, 30px mobile — the artboard's * own pair, not a proportional shrink of the pricing panel's 64px. */ --tcs-fs-checkout-total: 38px; --tcs-fs-checkout-total-mobile: 30px; --tcs-ls-checkout-total: -0.04em; --tcs-checkout-trust-gap: 10px; --tcs-checkout-trust-icon-gap: 9px; --tcs-checkout-trust-icon: 18px; --tcs-fs-checkout-trust: 13px; /* 4. MOBILE (CheckoutMobile.dc.html:39-92). The summary moves ABOVE the * form as its own full-bleed dark block — not a rounded panel inset in * the page padding, which is why it takes its own padding rather than * the summary panel's. The sticky pay bar is a second full-bleed block * pinned to the viewport bottom. */ --tcs-checkout-mobile-summary-pad: 24px 20px; --tcs-checkout-mobile-content-pad: 32px 20px 40px; --tcs-checkout-mobile-stack-gap: 32px; --tcs-checkout-tile-min-h: 44px; --tcs-checkout-paybar-bg: rgba(12, 12, 13, .97); --tcs-checkout-paybar-pad: 14px 20px; /* 5. TYPE THAT IS NEITHER A SHIPPED TOKEN NOR AN EXACT MATCH. * Checkout.dc.html:47 sets the page h1 at 44/1.05/600/-.04em — one * hundredth of an em off --tcs-ls-page-title (-.042em) and its own * line-height (--tcs-lh-page-title is 1.04), so it is named separately * rather than assumed close enough. */ --tcs-fs-checkout-title: 44px; --tcs-lh-checkout-title: 1.05; --tcs-ls-checkout-title: -0.04em; --tcs-fs-checkout-step: 12px; --tcs-ls-checkout-step: 0.13em; --tcs-fs-checkout-label: 13.5px; --tcs-fs-checkout-input: 16px; --tcs-fs-checkout-hint: 13px; --tcs-fs-checkout-lede: 16px; /* * NOT the artboard's 11.5px (Checkout.dc.html:97). The Boundaries & * Constraints are explicit — "no text below 12px" — and that floor * overrides the artboard on this one figure the same way an * accessibility failure always wins over a visual match elsewhere in * this system (see, for example, --tcs-caption in the Story 2.3 block * above). 12px is the interface-text floor tokens.md itself names. */ --tcs-fs-checkout-secure: 12px; --tcs-fs-checkout-tile-label: 15px; /* --------------------------------------------------------------------- * STORY 3.3 — DECLINED PAYMENT RECOVERY (CheckoutDeclined.dc.html) * * A second block, kept separate from the Story 3.2 checkout block above * rather than interleaved with it, because these tokens style states * page-checkout.php's markup never enters (the decline banner, the red * "Declined" tile marking, the alternate-gateway link, the manual * fallback) — grouping by story keeps each one's tokens findable as a * unit, the same discipline every earlier story block in this file * already follows. * ------------------------------------------------------------------- */ /* The decline banner (CheckoutDeclined.dc.html:100-106): a soft red * card, not a full --tcs-error fill — the fill would read as a hard * stop rather than a recoverable state, and the artboard's own * background (#FDF2F2) and border (#E9BFBF) are both far lighter tints * than --tcs-error itself. Named here rather than reusing --tcs-error * for the fill because neither artboard value IS --tcs-error at any * opacity tokens.md documents. */ --tcs-declined-banner-bg: #FDF2F2; --tcs-declined-banner-border: #E9BFBF; --tcs-declined-banner-pad: 22px 24px; --tcs-declined-banner-gap: 14px; --tcs-declined-banner-radius: 12px; --tcs-declined-banner-icon: 21px; --tcs-declined-banner-copy-gap: 6px; /* The re-rendered gateway tiles (CheckoutDeclined.dc.html:118-122): the * failed tile takes a 1.5px --tcs-error border (thinner than the * selected-tile's 2px --tcs-checkout-tile-border-selected — a DIFFERENT * state, not a stronger one) and a small "Declined" badge in the same * red, right-aligned in the tile. */ --tcs-declined-tile-border: 1.5px solid var(--tcs-error); --tcs-declined-badge-fs: 12px; /* The alternate-gateway link under the retry button * (CheckoutDeclined.dc.html:140): a centred row, icon plus link text, * 9px apart — matching the trust-row icon gap already declared above * rather than a new value for the same relationship. */ --tcs-declined-alt-gap: 9px; --tcs-declined-alt-icon: 17px; --tcs-declined-alt-fs: 14px; /* The manual-fallback block (CheckoutDeclined.dc.html:142-145): a small * stacked label + sentence, 7px apart — the same gap * --tcs-checkout-field-gap already uses for a label/field pair, so it * is reused by reference rather than re-declared as a second number * that happens to match. */ --tcs-declined-fallback-gap: var(--tcs-checkout-field-gap); --tcs-declined-fallback-title-fs: 13.5px; --tcs-declined-fallback-text-fs: 13px; /* --------------------------------------------------------------------- * SHAPE AND COLOUR — thank-you and delivery-failure (Story 3.4) * * Every value below appears in design/canvas/ThankYou.dc.html or * DeliveryFailed.dc.html as a hardcoded literal with no name in * tokens.md. Named HERE first and referenced from css/delivery.css, same * discipline as every story since 1.2. * ------------------------------------------------------------------- */ /* 1. THE INTRO BLOCK (ThankYou.dc.html:92-99 / DeliveryFailed.dc.html: * 94-101). Both pages centre a small icon badge above an H1 above a * lede, 16px apart inside the block and ~34-38px before whatever * follows — the two artboards' own gaps (34px thank-you, 34px * delivery-failed) match closely enough to share one token rather than * two numbers for the same relationship. */ --tcs-delivery-intro-gap: 16px; --tcs-delivery-block-gap: 34px; --tcs-delivery-icon-size: 58px; --tcs-delivery-icon-size-mobile: 50px; /* 2. THE THANK-YOU DOWNLOAD CARD (ThankYou.dc.html:101-113) — THE * LARGEST ELEMENT ON SCREEN per the spec's own Boundaries. A black card, * 34px inside, 30px between the book mark and the copy/CTA column, 16px * between the product name/meta and the button. Sized generously: 700px * max-width against the page's own 660-700px measure, so it reads as the * dominant shape on the page rather than one card among equals. */ --tcs-thank-you-card-max: 700px; --tcs-thank-you-card-pad: 34px; --tcs-thank-you-card-pad-mobile: 24px; --tcs-thank-you-card-gap: 30px; --tcs-thank-you-card-gap-mobile: 20px; --tcs-thank-you-card-copy-gap: 16px; --tcs-thank-you-thumb-w: 104px; --tcs-thank-you-thumb-h: 148px; --tcs-thank-you-thumb-w-mobile: 84px; --tcs-thank-you-thumb-h-mobile: 120px; /* 3. THE THREE INFO CARDS (ThankYou.dc.html:115-131): an equal three-up * grid, 14px apart, each card 22px inside with a 9px stack — mirroring * chapters.css's own established card padding/gap RELATIONSHIP rather * than reusing --tcs-card-gap verbatim, since 14px is the artboard's own * distinct figure for this specific grid. */ --tcs-thank-you-cards-gap: 14px; --tcs-thank-you-cards-max: 700px; --tcs-thank-you-info-pad: 22px; --tcs-thank-you-info-gap: 9px; /* 4. THE DELIVERY-FAILURE CARD (DeliveryFailed.dc.html:103-116): a * white bordered card, 32px inside, 22px between blocks, sitting inside * a 660px measure — narrower than the thank-you card's 700px because * this page carries no book mark, only text and controls. */ --tcs-delivery-failed-card-max: 660px; --tcs-delivery-failed-card-pad: 32px; --tcs-delivery-failed-card-pad-mobile: 24px; --tcs-delivery-failed-card-gap: 22px; /* The order-status row (DeliveryFailed.dc.html:104-107): info left, * "Payment confirmed" pill right, 20px apart, with a 20px-padded rule * beneath separating it from the actions below. The pill fill is * --tcs-green at the artboard's own literal 10% alpha * (`rgba(38,161,123,.1)`) — written as a literal rgba() rather than a * CSS relative-colour rgb(from …) expression, which is not yet supported * everywhere this design system otherwise runs. */ --tcs-delivery-order-row-gap: 20px; --tcs-delivery-order-row-pad: 20px; --tcs-delivery-pill-pad: 6px 12px; --tcs-delivery-pill-fs: 12px; --tcs-delivery-pill-bg: rgba(38, 161, 123, 0.1); /* The two-up action row (DeliveryFailed.dc.html:111-114): email-me / * go-to-account side by side, 12px apart, each a bordered row button * 14px inside with a 9px icon-to-label gap — reusing --tcs-border-2 * (input borders) for the row border, since these read as secondary * controls beside the dark primary retry button above them. */ --tcs-delivery-actions-gap: 12px; --tcs-delivery-action-pad: 14px; --tcs-delivery-action-icon-gap: 9px; --tcs-delivery-action-radius: 9px; /* --------------------------------------------------------------------- * SHAPE AND COLOUR — the account page (Story 4.2) * * Every value below appears in design/canvas/Account.dc.html:100-163 as a * hardcoded literal with no name in tokens.md. Epic 1's rule is that no * rule hardcodes a value, so they are named HERE first and referenced * from css/account.css. Every checkout-derived field/button/band value * this page ALSO needs (--tcs-checkout-input-*, --tcs-fs-checkout-*, * --tcs-tap-min, --tcs-radius-md, --tcs-border, …) is reused verbatim * rather than respelled here. * ------------------------------------------------------------------- */ /* 1. THE TWO-COLUMN LAYOUT (Account.dc.html:100, `grid-template-columns: * 260px 1fr`, 56px apart). A fixed sidebar column, not a fraction — * the nav's own content (an avatar row plus four short links) never * needs more than 260px, and a flexible column would let a long * translated label push the divider around per-locale. */ --tcs-account-nav-col: 260px; --tcs-account-col-gap: 56px; --tcs-account-top-pad: 56px; /* 2. THE SIDEBAR NAV (Account.dc.html:102-111). The identity row sits * 18px above a rule, 8px above the first nav link; each link row is * padded 12px 14px with an 11px gap between icon and label, and the * current tab gets a bordered white pill matching the artboard's * "Downloads" row (:107). */ --tcs-account-avatar-size: 38px; --tcs-account-identity-gap: 11px; --tcs-account-identity-pad-bottom: 18px; --tcs-account-identity-margin-bottom: 8px; --tcs-account-nav-row-pad: 12px 14px; --tcs-account-nav-row-gap: 11px; --tcs-account-nav-gap: 4px; /* 3. THE DOWNLOAD CARD (Account.dc.html:119-136). A white bordered card, * 28px inside, 26px between the thumbnail/info/button. The thumbnail * itself is a dark book-spine mark, 86x122, with a 6px orange spine * accent down its left edge — the same "101" placeholder mark * page-checkout.php's own order summary already draws * (page-checkout.php:270), reused here rather than a second convention * for the identical placeholder. */ --tcs-account-card-pad: 28px; --tcs-account-card-gap: 26px; --tcs-account-thumb-w: 86px; --tcs-account-thumb-h: 122px; --tcs-account-thumb-spine: 6px; --tcs-account-thumb-pad: 12px 10px; /* 4. THE TWO INFO CARDS (Account.dc.html:153-162): an equal two-up grid, * 14px apart, matching the thank-you page's own three-up info-card * padding/gap RELATIONSHIP (22px inside, 8-9px stack) rather than a * fresh pair of numbers for what is visually the same card family. */ --tcs-account-info-gap: 14px; --tcs-account-info-pad: 22px; --tcs-account-info-stack-gap: 8px; /* 5. THE LOGIN CARD (this story's own Resolved "Logged-out derivation": * DESIGN.md's input tokens plus Contact.dc.html:143-151's label-above- * field layout). A single card, narrower than the two-column layout * above since a logged-out visitor has no sidebar to sit beside — 440px * is this page's own measure, distinct from the checkout form's wider * two-column layout and the contact form's card width, because neither * of those pages is a single centered card the way this state is. */ --tcs-account-login-card-max: 464px; --tcs-account-login-card-pad: 40px; --tcs-account-login-field-gap: 20px; --tcs-account-login-card-shadow: 0 30px 60px -36px rgba(12, 12, 13, .35); } /* * Global box-sizing reset. * * Not housekeeping: two artboards overflowed horizontally without it * (tokens.md, "Shape & spacing"). ::before and ::after are included because * the section bands and button shimmer are built from pseudo-elements that * carry their own padding and borders. */ *, *::before, *::after { box-sizing: border-box; } /* * The other half of the artboard reset (design/canvas/_head.html:12, which * pairs `body { margin: 0 }` with the box-sizing rule above). Without it the * user agent's default 8px body margin survives, and a full-bleed section band * — the one thing the whole layout is built from — shows an 8px gutter of page * ground down both edges. * * The artboard sets a body BACKGROUND on the same rule. That is deliberately * not ported here: the ground alternates per section (cream -> black -> * orange) and belongs to the band system in Story 1.2, not to a global default * that every band would then have to override. */ body { margin: 0; }