/* ════════════════════════════════════════════════════════════════════════ LOADBARE — FOUNDATION STYLESHEET "START TO PAID: The Job Log" · REV A — locked Layer 0 of the build: tokens, reset, base type, primitives, keyframes. Section builders import nothing else. Deviations require design-lead sign-off. HARD RULES ENFORCED HERE: · Copper is the only accent (≤5% of rendered pixels). · --paid green appears exactly twice on the page (stamp tick, +$1,230). · No gradient text, no cyan, no third hue. · No blurred colored glows, no backdrop-filter, no mesh gradients, no radial halos. Depth on dark = --edge-lit + --shadow-panel only. · Cards are banned. Surfaces below are panels (dark plates) and the paper document family (exactly 3 instances sitewide). · Two easings sitewide. No infinite animations anywhere. · Never ship opacity:0 in base CSS — hidden initial states are gated behind the .js class on (see §9). ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ §1 · DESIGN TOKENS (verbatim from the master spec — do not edit) ════════════════════════════════════════════════════════════════════════ */ :root { /* ── INK (dark grounds, warm-black) ─────────────────────────── */ --ink-page: #07070a; /* page base — brand DNA, unchanged */ --ink-panel: #0c0c10; /* flat panels, nav, footer */ --ink-raised: #131318; /* raised plates, hover rows */ --ink-ember: #1a0f06; /* warm shadow ground — PAID full-bleed band ONLY, never as a glow blob */ /* ── COPPER (the ONLY accent — budget: ≤5% of rendered pixels) ─ */ --copper: #ff8c3a; /* prime: CTA fill, thread, stamps, focus rings */ --copper-hi: #ffa850; /* hover + the one italic accent word per headline */ --copper-press: #c96a22; /* :active / pressed states (heavy-press graft) */ --copper-ox: #7d4f24; /* oxidized: hairline rules, button offset shadows */ --copper-wash: rgba(255,140,58,0.12); /* tinted fields, max one per section */ /* ── PAPER (the only light surfaces — exactly 3 on the page) ── */ --paper: #f6f0e2; /* quote ticket, invoice, pricing rate-sheet */ --paper-ink: #16130c; /* all text on paper (AAA on --paper) */ --paper-rule: rgba(22,19,12,0.18); /* hairlines on paper */ /* ── TEXT ON DARK ──────────────────────────────────────────── */ --cream: #f4ecdc; /* display headlines, solid only, NEVER gradient-clipped */ --body: rgba(244,236,220,0.72); /* body copy */ --tan: #d6b890; /* secondary, mono labels */ --tan-dim: rgba(214,184,144,0.64); /* metadata, inactive rail timestamps */ /* ── RITUAL GREEN (appears EXACTLY TWICE on the entire page) ── */ --paid: #4fae6e; /* use 1: the PAID stamp tick · use 2: dashboard "+$1,230" */ /* ── BORDERS ───────────────────────────────────────────────── */ --hairline: 1px solid rgba(214,184,144,0.14); --hairline-copper: 1px solid var(--copper-ox); --rule-pro: 2px solid var(--copper); /* Pro plan left rule, nothing else */ /* ── RADII (hard-edged system) ─────────────────────────────── */ --r-0: 0; /* buttons, stamps, rules, title cards */ --r-paper: 2px; /* paper documents */ --r-panel: 6px; /* dark panels and UI crops — the maximum radius sitewide */ /* ── ELEVATION (one warm key light, upper-left; shadows fall down-right) ── */ --edge-lit: inset 1px 1px 0 rgba(244,236,220,0.06); /* every raised dark surface */ --shadow-panel: 0 24px 64px -24px rgba(15,7,1,0.8); --shadow-paper: 0 1px 0 rgba(20,10,2,0.35), 0 2px 4px rgba(20,10,2,0.35), 0 20px 44px -16px rgba(20,10,2,0.6), 0 56px 96px -40px rgba(255,140,58,0.10); /* paper artifacts only */ --shadow-btn: 2px 2px 0 var(--copper-ox); /* physical press buttons */ --shadow-btn-hover: 3px 3px 0 var(--copper-ox); --shadow-btn-active: 0 0 0 var(--copper-ox); /* collapses on press */ /* BANNED: blurred colored glows, backdrop-filter, mesh gradients, radial halos */ /* ── TYPE ──────────────────────────────────────────────────── */ --font-sans: Calibri, Carlito, 'Segoe UI', system-ui, sans-serif; /* already loaded — add NO new fonts */ --font-mono: Calibri, Carlito, 'Segoe UI', system-ui, sans-serif; --fs-display: clamp(56px, 8.5vw, 128px); /* lh 0.92 · ls -0.045em · weight 700 */ --fs-h2: clamp(36px, 4.5vw, 64px); /* lh 1.02 · ls -0.025em · 700 · max-width 14ch · always left-aligned */ --fs-h3: clamp(24px, 1.4vw + 18px, 32px); /* lh 1.15 · ls -0.02em · 700 */ --fs-lead: clamp(18px, 0.6vw + 15px, 22px); /* lh 1.5 · 500 */ --fs-body: 17px; /* lh 1.7 · 400 · measure max 34em */ --fs-small: 14px; /* lh 1.6 */ --fs-meta: 12px; /* mono · lh 1.5 · tabular */ --fs-slug: 11px; /* mono 700 · ls 0.28em · uppercase */ --fs-ghost: clamp(80px, 9vw, 136px); /* ghost timestamps · mono 700 · faint texture, not a billboard */ /* ── SPACING (8px base) ────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; --s-12: 192px; --s-13: 224px; --rail-w: 88px; --content-max: 1320px; --gutter: 24px; --pad-x: 64px; /* 20px below 768px */ /* ── MOTION (two easings sitewide — no others permitted) ───── */ --ease-settle: cubic-bezier(0.22, 1, 0.36, 1); /* heavy machine settle — ALL entrances, hovers, rules */ --ease-stamp: cubic-bezier(0.34, 1.4, 0.64, 1); /* single stiff overshoot — stamps ONLY */ --t-micro: 140ms; /* buttons, links */ --t-tick: 200ms; /* rail timestamp flip, FAQ */ --t-row: 240ms; /* row/card hover states */ --t-stamp: 380ms; /* the PAID stamp */ --t-wipe: 600ms; /* headline clip-path wipes */ --t-rule: 700ms; /* scribe-line hairline draws */ --t-enter: 560ms; /* scroll-reveal entrances */ --stagger-item: 60ms; /* ticket line items */ --stagger-line: 80ms; /* headline lines */ } @media (max-width: 768px) { :root { --pad-x: 20px; } } /* ════════════════════════════════════════════════════════════════════════ §2 · RESET ════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--copper-ox) var(--ink-page); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { min-height: 100svh; background: var(--ink-page); color: var(--body); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.7; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* NOTE: never set overflow-x:hidden here — off-canvas crops are verified, not masked (asymmetry rule). */ } img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; } ul[role="list"], ol[role="list"] { list-style: none; } hr { border: 0; border-top: var(--hairline); } ::selection { background: var(--copper); color: var(--ink-page); } /* Focus — 2px copper outline, 2px offset, everywhere. No exceptions. */ :focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* ════════════════════════════════════════════════════════════════════════ §3 · BASE TYPOGRAPHY Headlines are solid --cream only. Gradient-clipped text is banned. ════════════════════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { color: var(--cream); font-weight: 700; text-wrap: balance; } h1, .t-display { font-size: var(--fs-display); line-height: 0.92; letter-spacing: -0.045em; } h2, .t-h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.025em; max-width: 14ch; text-align: left; /* centered section titles are banned */ } h3, .t-h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; } h4, h5, h6 { font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -0.01em; } p { max-width: 34em; /* measure cap */ } .t-lead { font-size: var(--fs-lead); line-height: 1.5; font-weight: 500; color: var(--body); } .t-small { font-size: var(--fs-small); line-height: 1.6; } .t-meta { font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--tan-dim); } /* The one italic accent word per headline (e.g. "PAID.") */ .t-accent { font-style: italic; color: var(--copper-hi); } strong { color: var(--cream); font-weight: 700; } em { font-style: italic; } /* Links — 1px copper underline draws in over --t-tick */ a { color: var(--cream); text-decoration: none; background-image: linear-gradient(var(--copper), var(--copper)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size var(--t-tick) var(--ease-settle), color var(--t-micro) var(--ease-settle); } a:hover { color: var(--copper-hi); background-size: 100% 1px; } /* MONEY RULE (no exceptions): every dollar figure and clock time is mono with tabular numerals. Apply .money / .ts to the element that holds it. */ .money, .ts, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "lnum" 1; /* guards lining figures under Carlito substitution */ } .money { text-align: right; } /* ════════════════════════════════════════════════════════════════════════ §4 · LAYOUT PRIMITIVES ════════════════════════════════════════════════════════════════════════ */ .container { width: 100%; max-width: calc(var(--content-max) + (var(--pad-x) * 2)); margin-inline: auto; padding-inline: var(--pad-x); } /* 12-col grid shell — sections place children with grid-column spans */ .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); } @media (max-width: 768px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Chapter rhythm: 160–220px desktop (vary deliberately), 96px mobile. Default 192px; modifiers let consecutive sections breathe differently. */ .section { padding-block: var(--s-12); } .section--tight { padding-block: var(--s-11); } .section--loose { padding-block: var(--s-13); } /* The single compressed 80px beat between the 11:38 title card and PAID */ .section--beat { padding-block-start: 80px; } @media (max-width: 768px) { .section, .section--tight, .section--loose { padding-block: var(--s-9); } .section--beat { padding-block-start: var(--s-8); } } /* Full-bleed grid breaks — exactly two on the page (11:38 card, PAID band) */ .bleed { width: 100%; } .bleed--ember { background: var(--ink-ember); border-block: 1px solid rgba(125,79,36,0.30); /* seats the plate against the page ground */ } /* Eyebrow / chapter slug — mono 700, copper, machine-formatted, 24px oxidized rule trailing. Pattern: "03 / QUOTE — 07:46 AM" */ .slug { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: 10px; /* below --fs-slug 11px — supports, doesn't shout */ font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tan-dim); /* was --copper — slug now metadata, not a banner */ font-variant-numeric: tabular-nums; } .slug::after { content: ""; width: 24px; /* the sitewide origin-tick unit */ height: 1px; background: var(--copper-ox); opacity: 0.6; } /* Chapter header row: slug left, mono metadata right, scribe line beneath */ .chapter-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gutter); padding-bottom: var(--s-4); } .chapter-head .t-meta { text-align: right; } /* The scribe line — full-width hairline that draws on scroll (scaleX 0→1, origin left) with a 4px copper tick at its origin. */ .scribe { position: relative; height: 1px; background: rgba(214,184,144,0.14); transform-origin: left center; } .scribe::before { content: ""; position: absolute; left: 0; top: -2px; width: 4px; height: 5px; background: var(--copper); } .js .scribe[data-reveal] { transform: scaleX(0); transition: transform var(--t-rule) var(--ease-settle); } .js .scribe[data-reveal].is-inview { transform: scaleX(1); } /* Ghost timestamp — chapter clock, cropped off the top-right edge. Parent section must be position:relative. Never centered. */ .ghost-ts { position: absolute; top: -0.18em; right: -0.12em; font-family: var(--font-mono); font-size: var(--fs-ghost); font-weight: 700; line-height: 1; color: rgba(244,236,220,0.032); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; user-select: none; z-index: 0; } /* Mobile: the value prop leads — the ghost clock drops out entirely */ @media (max-width: 768px) { .ghost-ts { display: none; } } /* Margin note — small rotated mono annotation, outer gutter, max 1/chapter */ .margin-note { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.5; color: var(--tan); transform: rotate(-2deg); } /* ════════════════════════════════════════════════════════════════════════ §5 · BUTTONS — physical press buttons (PUNCHLIST graft) Cream slab, radius 0, hard oxidized-copper offset shadow that collapses on press. No floats, no scale, no glow. ════════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-4) var(--s-6); background: var(--cream); color: var(--paper-ink); font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; border: 0; border-radius: var(--r-0); box-shadow: var(--shadow-btn); text-decoration: none; background-image: none; /* defuse the link underline */ background-size: 0; user-select: none; /* Press travel lives on the independent translate property so it composes with the motion layer's magnetic transform (GSAP x/y). */ transition: translate var(--t-micro) var(--ease-settle), box-shadow var(--t-micro) var(--ease-settle), background-color var(--t-micro) var(--ease-settle), color var(--t-micro) var(--ease-settle); } .btn:hover { color: var(--paper-ink); translate: -1px -1px; box-shadow: var(--shadow-btn-hover); } .btn:active { translate: 2px 2px; box-shadow: var(--shadow-btn-active); background: var(--copper-press); color: var(--cream); } /* Primary CTA variant — copper fill (counts against the copper budget) */ .btn--primary { background: var(--copper); color: var(--ink-page); } .btn--primary:hover { background: var(--copper-hi); color: var(--ink-page); } .btn--primary:active { background: var(--copper-press); color: var(--cream); } /* Ghost — hairline-boxed, transparent; same press physics, no offset slab */ .btn--ghost { background: transparent; color: var(--tan); border: var(--hairline-copper); box-shadow: none; } .btn--ghost:hover { color: var(--copper-hi); border-color: var(--copper); translate: 0 0; box-shadow: none; } .btn--ghost:active { translate: 1px 1px; color: var(--copper-press); border-color: var(--copper-press); background: transparent; } .btn--small { padding: var(--s-3) var(--s-5); font-size: var(--fs-small); } /* ════════════════════════════════════════════════════════════════════════ §6 · BADGES & CHIPS ════════════════════════════════════════════════════════════════════════ */ /* Generic badge — mono, hairline-boxed, hard corners */ .badge { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; color: var(--tan); border: var(--hairline); border-radius: var(--r-0); font-variant-numeric: tabular-nums; white-space: nowrap; } .badge--copper { color: var(--copper); border: var(--hairline-copper); } /* Inline timestamp chip — the rail's mobile collapse (<1100px) */ .log-chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); font-family: var(--font-mono); font-size: 11px; /* just under --fs-meta — quieter eyebrow */ font-weight: 700; letter-spacing: 0.12em; color: var(--tan-dim); /* was --copper — supports the content */ border: 1px solid rgba(214,184,144,0.18); /* was --hairline-copper */ border-radius: var(--r-0); font-variant-numeric: tabular-nums; white-space: nowrap; } .log-chip::before { content: ""; width: 8px; height: 1px; background: var(--copper-ox); /* dimmed tick, still warm */ } /* ════════════════════════════════════════════════════════════════════════ §7 · SURFACES & ELEVATION HELPERS Cards are banned. These are the only depth treatments permitted: dark panels (--edge-lit + --shadow-panel) and the paper document family (--shadow-paper, exactly 3 instances). Glows do not exist in this system. ════════════════════════════════════════════════════════════════════════ */ /* Dark raised plate — UI crops, job record, client card */ .surface-panel { background: var(--ink-raised); border: var(--hairline); border-radius: var(--r-panel); box-shadow: var(--edge-lit), var(--shadow-panel); } /* Flat panel — nav, footer */ .surface-flat { background: var(--ink-panel); border: var(--hairline); border-radius: var(--r-panel); } /* Paper document — hero ticket, PAID invoice, pricing rate sheet ONLY. Warm-ink fiber baked into the tile + a faint top-light gradient: paper that reads as paper. No blend modes — paper-ink contrast untouched. */ .surface-paper { position: relative; background-color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"), linear-gradient(180deg, #f9f4e8 0%, var(--paper) 34%, #f1e9d6 100%); background-size: 200px 200px, 100% 100%; color: var(--paper-ink); border-radius: var(--r-paper); box-shadow: var(--shadow-paper); } .surface-paper :is(h1,h2,h3,h4,h5,h6,strong) { color: var(--paper-ink); } /* 0.5deg document tilt — desktop only, dies on mobile */ .tilt { transform: rotate(0.5deg); } /* Scatter the three artifacts — three documents dropped on a desk, not clones. The invoice + rate sheet ride the independent rotate property so the reveal system's transform never flattens them. */ .gp-invoice.tilt { rotate: -0.4deg; } .rate-sheet.tilt { rotate: 0.35deg; } @media (max-width: 768px) { .tilt { transform: none; } .gp-invoice.tilt, .rate-sheet.tilt { rotate: none; } } /* Perforated top edge — receipt-printer graft. --perf-ground must match the section's background (--ink-page default, --ink-ember on PAID). */ .paper-perforated { --perf-ground: var(--ink-page); } .paper-perforated::before { content: ""; position: absolute; top: -4px; left: 0; right: 0; height: 8px; background-image: radial-gradient(circle at 7px 0, var(--perf-ground) 0 3px, transparent 3.5px); background-size: 14px 8px; background-repeat: repeat-x; pointer-events: none; } /* Measurement-tick corners on paper artifacts (drafting graft) */ .paper-ticks::after { content: ""; position: absolute; inset: 6px; pointer-events: none; background: linear-gradient(var(--paper-rule), var(--paper-rule)) top left / 10px 1px, linear-gradient(var(--paper-rule), var(--paper-rule)) top left / 1px 10px, linear-gradient(var(--paper-rule), var(--paper-rule)) top right / 10px 1px, linear-gradient(var(--paper-rule), var(--paper-rule)) top right / 1px 10px, linear-gradient(var(--paper-rule), var(--paper-rule)) bottom left / 10px 1px, linear-gradient(var(--paper-rule), var(--paper-rule)) bottom left / 1px 10px, linear-gradient(var(--paper-rule), var(--paper-rule)) bottom right/ 10px 1px, linear-gradient(var(--paper-rule), var(--paper-rule)) bottom right/ 1px 10px; background-repeat: no-repeat; } /* Dotted leader — flex filler between a label and its right-aligned figure */ .leader { flex: 1 1 auto; min-width: var(--s-4); margin-inline: var(--s-2); border-bottom: 1px dotted var(--paper-rule); transform: translateY(-3px); } /* Copper-tinted field — max ONE per section */ .field-wash { background: var(--copper-wash); } /* Elevation utilities (the complete, closed set) */ .edge-lit { box-shadow: var(--edge-lit); } .elev-panel { box-shadow: var(--edge-lit), var(--shadow-panel); } .elev-paper { box-shadow: var(--shadow-paper); } /* Spec-sheet row hover — background steps up, 2px copper rule slides in. No translateY, no scale. */ .spec-row { position: relative; border-bottom: var(--hairline); transition: background-color var(--t-row) var(--ease-settle); } .spec-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--copper); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-row) var(--ease-settle); } .spec-row:hover, .spec-row:focus-within { background: var(--ink-raised); } .spec-row:hover::before, .spec-row:focus-within::before { transform: scaleX(1); } /* ════════════════════════════════════════════════════════════════════════ §8 · GLOBAL KEYFRAMES One-shot only. The motion layer attaches these via .is-inview / load classes. Infinite iteration counts are banned sitewide. ════════════════════════════════════════════════════════════════════════ */ /* Headline squeegee wipe — hard clip-path, left to right. Never fade-up. */ @keyframes wipe-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* Ticket line item stamping in — 180ms each, --stagger-item between */ @keyframes item-stamp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* 3-frame digit settle for amounts — pair with steps(3, end) timing */ @keyframes digit-settle { 0% { opacity: 0; transform: translateY(3px); } 66% { opacity: 0.6; transform: translateY(1px); } 100% { opacity: 1; transform: translateY(0); } } /* The PAID stamp slam — pair with var(--ease-stamp), var(--t-stamp). The ONLY overshoot on the page. Fired once at 60% intersection. */ @keyframes stamp-slam { from { opacity: 0; transform: scale(1.5) rotate(-11deg); } to { opacity: 1; transform: scale(1) rotate(-7deg); } } /* Scribe line draw — pair with var(--t-rule), var(--ease-settle) */ @keyframes scribe-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Rule underline draw for the ticket total (copper, left to right) */ @keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Plain brighten — FAQ answers, reduced-motion fallback for everything */ @keyframes fade-swap { from { opacity: 0; } to { opacity: 1; } } /* ════════════════════════════════════════════════════════════════════════ §9 · REVEAL SYSTEM (JS-gated) The page reads complete with JS disabled: hidden states exist ONLY under html.js. The motion layer adds .is-inview via one IntersectionObserver. ════════════════════════════════════════════════════════════════════════ */ .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--t-enter) var(--ease-settle), transform var(--t-enter) var(--ease-settle); } .js [data-reveal].is-inview { opacity: 1; transform: translateY(0); } /* Headline wipe variant — used by hero lines with --stagger-line delays */ .js [data-reveal="wipe"] { opacity: 1; /* visibility handled by clip, not opacity */ transform: none; clip-path: inset(0 100% 0 0); transition: clip-path var(--t-wipe) var(--ease-settle); } .js [data-reveal="wipe"].is-inview { clip-path: inset(0 0 0 0); } /* Stamp variant — the climax seal; scale/rotate handled by stamp-slam */ .js [data-reveal="stamp"] { opacity: 0; transform: scale(1.5) rotate(-11deg); transition: none; } .js [data-reveal="stamp"].is-inview { animation: stamp-slam var(--t-stamp) var(--ease-stamp) forwards; } /* Stagger hooks — builders set --i per child (inline OR stylesheet maps); the JS backfill only indexes elements with no authored --i. Delay is capped so deep stacks never wait more than half a second. */ .js [data-reveal] { transition-delay: min(calc(var(--i, 0) * var(--stagger-item)), 480ms); } /* HERO IS NEVER HIDDEN — the first paint for every visitor (esp. mobile) must not depend on a JS reveal. A stuck clip-path wipe left the headline + CTAs blank on phones. Force the hero solid on load; below-the-fold sections keep scroll reveals. The one exception: once motion.js releases the page (html.lb-hero-in), the six entrance elements are handed to the one-shot load animations below — !important locks would beat keyframes in the cascade, so those elements are excluded here post-release. If lb-hero-in never lands (motion.js dead), the locks hold forever. */ html.js:not(.lb-hero-in) .hero [data-reveal], html.js:not(.lb-hero-in) .hero [data-reveal="wipe"], html.js:not(.lb-hero-in) .hero [data-reveal="stamp"], .js .hero [data-reveal]:not(.hero-line):not(.hero-call):not(.hero-lead):not(.hero-cta):not(.hero-hook) { opacity: 1 !important; clip-path: none !important; transform: none !important; animation: none !important; } /* Hero entrance — fires once when motion.js adds html.lb-hero-in at page release (the preloader's payoff). JS off → class never lands, the locks above keep the hero solid. Reduced motion → media query blocks it. */ @media (prefers-reduced-motion: no-preference) { html.lb-hero-in .hero .hero-line[data-reveal="wipe"] { animation: wipe-in var(--t-wipe) var(--ease-settle) both !important; animation-delay: calc(var(--i, 0) * var(--stagger-line) + 120ms) !important; } html.lb-hero-in .hero :is(.hero-call, .hero-lead, .hero-cta, .hero-hook)[data-reveal] { animation: hero-rise 640ms var(--ease-settle) both !important; } html.lb-hero-in .hero .hero-lead[data-reveal] { animation-delay: 420ms !important; } html.lb-hero-in .hero .hero-cta[data-reveal] { animation-delay: 520ms !important; } html.lb-hero-in .hero .hero-hook[data-reveal] { animation-delay: 620ms !important; } } @keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Hero POP entrance v2 — overrides the gentle wipe with a punch-in sequence: the incoming text buzzes in like a real phone, QUOTED./ACCEPTED. slam down from scale, PAID. lands hardest with a copper flash and a 2px impact shake, then a copper sheen sweeps the headline once. Same lb-hero-in gate, same reduced-motion block; placed after the base entrance so these rules win. */ @media (prefers-reduced-motion: no-preference) { html.lb-hero-in .hero .hero-call[data-reveal] { animation: hero-buzz 620ms var(--ease-settle) both !important; } html.lb-hero-in .hero .hero-line[data-reveal="wipe"] { animation: word-slam 520ms cubic-bezier(0.16, 1.3, 0.3, 1) both !important; } html.lb-hero-in .hero .hero-line[data-reveal="wipe"]:nth-child(1) { animation-delay: 240ms !important; } html.lb-hero-in .hero .hero-line[data-reveal="wipe"]:nth-child(2) { animation-delay: 460ms !important; } html.lb-hero-in .hero .hero-line.t-accent[data-reveal="wipe"] { animation: paid-slam 640ms cubic-bezier(0.14, 1.42, 0.28, 1) both !important; animation-delay: 700ms !important; } html.lb-hero-in .hero .hero-sub[data-reveal="wipe"] { animation: hero-rise 560ms var(--ease-settle) both !important; animation-delay: 1120ms !important; } html.lb-hero-in .hero .hero-grid { animation: hero-impact 340ms linear both; animation-delay: 1040ms; } html.lb-hero-in .hero .hero-headline { position: relative; } html.lb-hero-in .hero .hero-headline::after { content: ""; position: absolute; inset: 0 -20%; background: linear-gradient(105deg, transparent 42%, rgba(255, 190, 120, 0.14) 50%, transparent 58%); transform: translateX(-80%); animation: hero-sheen 900ms ease-out both; animation-delay: 1180ms; pointer-events: none; } } @keyframes word-slam { 0% { opacity: 0; transform: translateY(-10px) scale(1.16); filter: blur(7px); } 62% { opacity: 1; transform: translateY(2px) scale(0.992); filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } } @keyframes paid-slam { 0% { opacity: 0; transform: translateY(-14px) scale(1.32); filter: blur(9px); text-shadow: 0 0 0 rgba(255, 140, 58, 0); } 55% { opacity: 1; transform: translateY(3px) scale(0.985); filter: blur(0); text-shadow: 0 0 34px rgba(255, 140, 58, 0.55); } 100% { opacity: 1; transform: none; filter: none; text-shadow: 0 0 0 rgba(255, 140, 58, 0); } } @keyframes hero-impact { 0%, 100% { transform: none; } 18% { transform: translate(1px, 2px); } 38% { transform: translate(-1.5px, -1px); } 58% { transform: translate(1px, -1.5px); } 78% { transform: translate(-0.5px, 1px); } } @keyframes hero-buzz { 0% { opacity: 0; transform: translateY(-16px); } 52% { opacity: 1; transform: translateY(2px); } 66% { transform: translate(-1.5px, 0) rotate(-0.3deg); } 78% { transform: translate(1.5px, 0) rotate(0.3deg); } 90% { transform: translate(-1px, 0); } 100% { opacity: 1; transform: none; } } @keyframes hero-sheen { from { transform: translateX(-80%); } to { transform: translateX(80%); } } /* ════════════════════════════════════════════════════════════════════════ §10 · GRAIN The one permitted texture: existing noise overlay at 0.022 page-wide. (The same feTurbulence SVG is reused as the stamp's ink-bleed mask.) ════════════════════════════════════════════════════════════════════════ */ .grain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.022; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 240px 240px; } /* ════════════════════════════════════════════════════════════════════════ §11 · ACCESSIBILITY & REDUCED MOTION Story must read 100% complete standing still: thread drawn, ticket printed, stamp stamped, scribe lines ruled. Every reveal becomes a 200ms opacity swap. ════════════════════════════════════════════════════════════════════════ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js [data-reveal], .js [data-reveal="wipe"], .js [data-reveal="stamp"], .js .scribe[data-reveal] { opacity: 1; transform: none; clip-path: none; animation: none; transition: opacity 200ms linear; } .js [data-reveal="stamp"].is-inview { transform: rotate(-7deg); /* pre-stamped at rest angle */ } } /* ═══════════ SECTION: nav ═══════════ */ /* ════════════════════════════════════════════════════════════════════════ 00 / NAV — "THE BAR" · REV A.1 (craft pass) Slim hairline bar on --ink-panel · redrawn bear mark · four mono links · one press-button CTA · container-aligned marginalia strip with ruler-tick separators and a REV A datum (the page opens and closes on a rev mark). Scroll-aware via solid ink elevation step — backdrop-filter stays banned. Everything degrades fully without JS (html:not(.js) ships the solid bar,
menu is native). ════════════════════════════════════════════════════════════════════════ */ :root { --nav-strip-h: 32px; /* marginalia strip — rides off on scroll */ --nav-h: 64px; /* the pinned bar — rail thread starts below this */ } /* Anchor landing offset for every in-page target (#how-it-works, #pricing…) */ [id] { scroll-margin-top: calc(var(--nav-h) + var(--s-6)); } /* ── Skip link ───────────────────────────────────────────────── :focus (not :focus-visible) — keyboard reveal must never depend on heuristic focus styling. */ .skip-link { position: fixed; top: var(--s-3); left: var(--s-3); z-index: 200; padding: var(--s-3) var(--s-5); background: var(--cream); background-image: none; color: var(--paper-ink); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 700; border-radius: var(--r-0); box-shadow: var(--shadow-btn); transform: translateY(calc(-100% - var(--s-6))); } .skip-link:focus { transform: none; } /* ── Header shell — sticky with negative offset: the strip rides off, the bar pins at top:0. No height animation, zero CLS. ── */ .site-nav { position: sticky; top: calc(-1 * var(--nav-strip-h)); z-index: 100; } .site-nav a, .nav-menu__summary { -webkit-tap-highlight-color: transparent; } /* ── Marginalia strip (the above-the-fold price hook) ─────────── Left-set inside the same .container as the brand — machine marginalia aligns to the drawing, it doesn't float centered. Separators are 1px×8px ruler ticks: the same vocabulary as the rail ticks and the trades index strip. */ .nav-strip { background: var(--ink-panel); border-bottom: var(--hairline); } .nav-strip__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: var(--nav-strip-h); margin-block: 0; font-family: var(--font-mono); font-size: var(--fs-slug); font-weight: 700; letter-spacing: 0.28em; /* slug spec — not the looser 0.22em */ text-transform: uppercase; font-variant-numeric: tabular-nums; line-height: 1; color: var(--tan-dim); white-space: nowrap; } .nav-strip__hook { display: inline-flex; align-items: center; gap: var(--s-3); overflow: hidden; } .nav-strip__tick { flex: none; width: 1px; height: 8px; /* matches the rail tick length */ background: var(--copper-ox); } .nav-strip__row .num { color: var(--tan); } /* the $19 steps up one rung — no copper spent */ .nav-strip__rev { flex: none; } /* ── The bar ─────────────────────────────────────────────────── At rest it sits flush on --ink-page (seamless over the hero). On scroll / no-JS / open menu it steps to --ink-panel + hairline + edge-lit + panel shadow — elevation, never blur. Hairline fades via alpha on its own RGB; no new hue. .is-menu-open is the JS fallback for engines without :has(). */ .nav-bar { height: var(--nav-h); background: var(--ink-page); border-bottom: 1px solid rgba(214, 184, 144, 0); transition: background-color var(--t-row) var(--ease-settle), border-color var(--t-row) var(--ease-settle), box-shadow var(--t-row) var(--ease-settle); } html:not(.js) .nav-bar, .js .site-nav.is-scrolled .nav-bar, .js .site-nav.is-menu-open .nav-bar, .site-nav:has(.nav-menu[open]) .nav-bar { background: var(--ink-panel); border-bottom-color: rgba(214, 184, 144, 0.14); box-shadow: var(--edge-lit), var(--shadow-panel); } .nav-bar__row { display: flex; align-items: center; gap: var(--s-5); height: 100%; } /* ── Brand ────────────────────────────────────────────────────── */ .nav-brand { display: inline-flex; align-items: center; gap: var(--s-3); background-image: none; /* defuse the global underline draw */ color: var(--cream); } .nav-brand:hover { color: var(--cream); } .nav-brand__mark { width: 40px; height: 40px; flex: none; border-radius: 8px; object-fit: contain; color: var(--copper); } .nav-brand__word { font-family: var(--font-sans); font-size: 17px; font-weight: 700; letter-spacing: 0.06em; line-height: 1; color: var(--cream); } /* ── The log clock — mirrors the rail's active timestamp. min-width reserves the swap ("07:42 AM" → "11:52 AM" = 8ch tabular): the bar can never reflow when the chapter changes. */ .nav-clock { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; white-space: nowrap; } .nav-clock::before { content: ""; width: 8px; height: 1px; background: var(--copper); } .nav-clock__label { color: var(--tan-dim); } .nav-clock__time { min-width: 8ch; color: var(--tan); } @keyframes nav-swap { from { opacity: 0; } } .js .nav-clock__time.is-swapping { animation: nav-swap var(--t-tick) var(--ease-settle); } /* ── Primary links — four, mono, machine-set. Underline draw is self-contained here (1px copper, left origin, --t-tick), so this section can't break if global link rules reorder. ───── */ .nav-links { display: flex; align-items: center; gap: var(--s-6); margin-left: auto; } .nav-links a { padding-block: var(--s-2); /* honest hit area, no layout cost */ font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tan); white-space: nowrap; background-image: linear-gradient(var(--copper), var(--copper)); background-repeat: no-repeat; background-size: 0 1px; background-position: 0 100%; transition: color var(--t-micro) var(--ease-settle), background-size var(--t-tick) var(--ease-settle); } .nav-links a:hover { color: var(--copper-hi); background-size: 100% 1px; } .nav-links a[aria-current] { /* scroll-spy: any truthy value */ color: var(--copper); background-size: 100% 1px; /* underline held drawn on the live chapter */ } /* ── Actions — a 16px hairline tick separates wayfinding from the two doors in. ──────────────────────────────────────────── */ .nav-actions { display: flex; align-items: center; gap: var(--s-3); } .nav-actions::before { content: ""; width: 1px; height: 16px; background: rgba(214, 184, 144, 0.14); margin-right: var(--s-2); } /* ── Menu (<1100px, where the rail also collapses) — native
: fully functional with JS disabled. ─────────────── */ .nav-menu { display: none; } .nav-menu__summary { position: relative; /* keeps the chip above the scrim */ z-index: 2; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; /* true touch target */ padding: var(--s-2) var(--s-4); border: var(--hairline); border-radius: var(--r-0); list-style: none; cursor: pointer; user-select: none; font-family: var(--font-mono); font-size: var(--fs-slug); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--tan); transition: color var(--t-micro) var(--ease-settle), border-color var(--t-micro) var(--ease-settle), transform var(--t-micro) var(--ease-settle); } .nav-menu__summary::-webkit-details-marker { display: none; } .nav-menu__summary::marker { content: ""; } .nav-menu__summary:hover { color: var(--copper-hi); border-color: var(--copper-ox); } .nav-menu__summary:active { transform: translate(1px, 1px); } /* press physics */ .nav-menu[open] .nav-menu__summary { color: var(--copper-hi); border-color: var(--copper-ox); } .nav-menu__label--close, .nav-menu__icon--close { display: none; } .nav-menu[open] .nav-menu__label--open, .nav-menu[open] .nav-menu__icon--open { display: none; } .nav-menu[open] .nav-menu__label--close { display: inline; } .nav-menu[open] .nav-menu__icon--close { display: block; } /* Scrim — anchored below the header bottom (absolute against the sticky .site-nav), so the bar itself stays lit. Ink-page RGB at alpha: a depth step, not a new hue. Painted below the panel by DOM order; the motion layer closes the menu on scrim click. */ .nav-menu[open]::before { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 100vh; background: rgba(7, 7, 10, 0.72); } /* Panel drops from the pinned bar (containing block = .site-nav). Copper-ox bottom rule punctuates it like a chapter scribe line. max-height guards short landscape viewports. */ .nav-menu__panel { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; padding: var(--s-2) var(--pad-x) var(--s-6); background: var(--ink-panel); border-bottom: 1px solid var(--copper-ox); box-shadow: var(--edge-lit), var(--shadow-panel); } @keyframes nav-panel-drop { from { opacity: 0; transform: translateY(-6px); } } .nav-menu[open] .nav-menu__panel { animation: nav-panel-drop var(--t-tick) var(--ease-settle) both; } /* Ledger rows — same physics as the spec sheet: hairline-ruled, bg steps to --ink-raised, 2px copper rule slides in from the left (inset shadow x-offset 0→2px — it slides, never pops). */ .nav-menu__row { display: flex; align-items: baseline; gap: var(--s-4); padding: var(--s-4) var(--s-3); background-image: none; /* defuse the global underline draw */ color: var(--cream); box-shadow: inset 0 0 0 var(--copper); transition: background-color var(--t-row) var(--ease-settle), box-shadow var(--t-row) var(--ease-settle); } .nav-menu__row + .nav-menu__row { border-top: var(--hairline); } .nav-menu__row:hover, .nav-menu__row:focus-visible { color: var(--cream); background-color: var(--ink-raised); box-shadow: inset 2px 0 0 var(--copper); } .nav-menu__idx { flex: none; min-width: 2ch; /* the → row keeps column alignment */ font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--copper); } .nav-menu__name { font-size: var(--fs-lead); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--cream); } .nav-menu__meta { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tan-dim); white-space: nowrap; } .nav-menu__fine { margin: var(--s-4) 0 0; padding: var(--s-4) var(--s-3) 0; /* inline-aligned with the rows */ border-top: var(--hairline); max-width: none; font-family: var(--font-mono); font-size: var(--fs-slug); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--tan-dim); } /* ── Breakpoints — one structural break (1100px, rail collapse), then a graceful degradation ladder for the strip + bar. ───── */ @media (max-width: 1099px) { .nav-links, .nav-clock, .nav-actions__app, .nav-actions::before { display: none; } .nav-actions { margin-left: auto; } .nav-menu { display: block; } } @media (max-width: 899px) { .nav-strip__rev { display: none; } } @media (max-width: 639px) { .nav-strip__mtm, .nav-strip__tick--mtm { display: none; } } @media (max-width: 479px) { .nav-strip__row { letter-spacing: 0.18em; } .nav-bar__row { gap: var(--s-4); } /* Icon-only chip — summary keeps its aria-label; expanded state is announced natively by
. */ .nav-menu .nav-menu__label--open, .nav-menu[open] .nav-menu__label--close { display: none; } .nav-menu__summary { padding-inline: var(--s-3); letter-spacing: 0; } } @media (max-width: 399px) { .nav-brand__word { display: none; } /* the bear holds the corner alone */ .nav-strip__lead { display: none; } /* "FROM $19/MO · CANCEL ANYTIME" */ } /* ── Reduced motion: everything lands instantly, nothing breaks ── */ @media (prefers-reduced-motion: reduce) { .nav-bar, .nav-links a, .nav-menu__summary, .nav-menu__row { transition: none; } .nav-menu[open] .nav-menu__panel, .js .nav-clock__time.is-swapping { animation: none; } } /* ═══════════ SECTION: hero ═══════════ */ /* ════════════════════════════════════════════════════════════════════ HERO — 01 / THE CALL — 07:42 AM Story cols 1–7 · the AI quote ticket cols 8–12, bleeding off-right. Paper surfaces: 1 of 3 sitewide (the ticket — the PAID invoice is the SAME document, Nº 0612, same line items). Stamps: 0 of 3. Green: 0 of 2. Copper-wash fields: 1 of 1 (the customer text). Margin notes: 0 of 1 (the dimension callout carries the annotation duty). Inline styles: 0. ════════════════════════════════════════════════════════════════════ */ .hero { position: relative; padding-block: var(--s-8) var(--s-11); /* Scoped crop of the DESIGNED off-right ticket bleed — guarantees no horizontal scrollbar. Section-scoped, never body-level masking. */ overflow-x: clip; } @media (max-width: 768px) { .hero { padding-block: var(--s-6) var(--s-9); } } .hero .container { position: relative; z-index: 1; } /* Drafting-table backdrop — a faint graph-paper field swept in under the ticket. Static, inset-positioned, zero contrast cost. */ .hero::before { content: ""; position: absolute; inset: 0 0 12% 0; background-image: linear-gradient(rgba(214,184,144,0.032) 1px, transparent 1px), linear-gradient(90deg, rgba(214,184,144,0.032) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(115deg, transparent 30%, #000 62%, #000 86%, transparent); mask-image: linear-gradient(115deg, transparent 30%, #000 62%, #000 86%, transparent); pointer-events: none; } /* Rail-collapse chip — only below the rail breakpoint */ .hero-chip { margin-bottom: var(--s-5); } @media (min-width: 1100px) { .hero-chip { display: none; } } /* ── CHAPTER HEAD (locked pattern: slug · 24px oxidized rule · meta) ─ */ .hero .chapter-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4); } .hero .head-rule { flex: none; align-self: center; width: 24px; height: 1px; background: var(--copper-ox); } .hero .chapter-meta { margin-left: auto; } .hero-grid { margin-top: var(--s-6); } @media (max-width: 768px) { .hero-grid { margin-top: var(--s-7); } } /* ── STORY · cols 1–7 ─────────────────────────────────────────────── */ .hero-story { grid-column: 1 / 8; min-width: 0; /* nowrap display lines can't blow the grid */ position: relative; z-index: 1; } /* The inciting incident — one line out of a call log, not decoration */ .hero-call { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-3); row-gap: var(--s-1); font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.6; margin-bottom: var(--s-4); } .hero-call .ts { color: var(--copper); font-weight: 700; font-variant-numeric: tabular-nums; } .hero-call-tag { font-size: var(--fs-meta); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tan-dim); } .hero-call-msg { color: var(--tan); } /* ── DISPLAY HEADLINE — solid cream, never gradient-clipped ───────── */ .hero-headline { display: block; font-family: var(--font-sans); font-size: var(--fs-display); font-weight: 700; line-height: 0.92; letter-spacing: -0.045em; color: var(--cream); } .hero-line { display: block; width: fit-content; white-space: nowrap; } .hero-line.t-accent { font-style: italic; color: var(--copper-hi); margin-left: -0.02em; /* optical alignment of the italic stem */ padding-right: 0.08em; /* the italic period's overhang survives the wipe */ } /* Line stagger via nth-child --i map — zero inline styles */ .hero-headline .hero-line:nth-child(1) { --i: 0; } .hero-headline .hero-line:nth-child(2) { --i: 1; } .hero-headline .hero-line:nth-child(3) { --i: 2; } .hero-headline .hero-line:nth-child(4) { --i: 3; } .js .hero .hero-line[data-reveal="wipe"] { transition-delay: calc(var(--i, 0) * var(--stagger-line)); } /* "before his coffee got cold." — 60% scale, italic, 500 (locked) */ .hero-sub { margin-top: var(--s-2); font-size: 0.6em; font-style: italic; font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; color: var(--tan); white-space: normal; text-wrap: balance; } .hero-lead { margin-top: var(--s-5); max-width: 21em; text-wrap: pretty; } .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-5); } .hero-hook { margin-top: var(--s-4); letter-spacing: 0.18em; text-transform: uppercase; font-variant-numeric: tabular-nums; } /* Laptop fold guard — on shorter desktop viewports (1440x900, 1280x800, 1366x768) the hero CTA must land on screen one. Tighten the vertical rhythm and cap the display size a step; tall screens keep the full-scale composition. */ @media (min-width: 769px) and (max-height: 999px) { .hero { padding-block: var(--s-5) var(--s-11); } .hero-grid { margin-top: var(--s-4); } .hero-headline { font-size: clamp(56px, 7vw, 100px); } .hero-lead { margin-top: var(--s-4); } .hero-cta { margin-top: var(--s-4); } } @media (min-width: 769px) and (max-height: 800px) { .hero { padding-block: var(--s-4) var(--s-11); } .hero-headline { font-size: clamp(52px, 6.2vw, 88px); } .hero-call { padding-top: var(--s-2); padding-bottom: var(--s-2); } } /* ── ARTIFACT · cols 8–12, bleeding off the right edge ────────────── */ .hero-artifact { grid-column: 8 / 13; position: relative; min-width: 0; margin-top: var(--s-4); /* the confident crop: past --pad-x and off the viewport edge */ margin-right: calc(-1 * var(--pad-x) - 48px); padding-bottom: 56px; /* reserves the dimension callout — CLS guard */ } /* Below ~1720px the full bleed pushes the ticket's money column off the viewport edge (prices read "$1,23" at 1440). Keep a confident crop but never crop the figures themselves. */ @media (max-width: 1719px) { .hero-artifact { margin-right: -28px; } } @media (max-width: 960px) { .hero-story { grid-column: 1 / -1; } .hero-artifact { grid-column: 1 / -1; margin-top: var(--s-8); margin-right: 0; max-width: 560px; } } /* THE TICKET — paper surface 1 of 3 */ .hero-ticket { --perf-ground: var(--ink-page); position: relative; max-width: 640px; padding: var(--s-6) var(--s-6) var(--s-5); font-family: var(--font-mono); color: var(--paper-ink); } @media (max-width: 768px) { .hero-ticket { padding: var(--s-5) var(--s-4) var(--s-4); } } /* Every figure on paper is tabular mono — no exceptions */ .hero-ticket .ts, .hero-ticket .num, .hero-ticket .money { font-variant-numeric: tabular-nums; } .ticket-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--paper-rule); font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.18em; } .ticket-meta { display: grid; gap: 2px; margin: 0; padding-block: var(--s-3); border-bottom: 1px solid var(--paper-rule); } .ticket-meta-row { display: flex; justify-content: space-between; gap: var(--s-4); min-height: 18px; /* CLS guard */ font-size: var(--fs-meta); letter-spacing: 0.06em; } .ticket-meta-row dt { opacity: 0.62; } .ticket-meta-row dd { margin: 0; text-align: right; } /* Customer's words — the ONE copper-tinted field in this section */ .ticket-desc { margin-block: var(--s-4); padding: var(--s-3); } .ticket-desc-label { display: block; margin-bottom: var(--s-1); font-size: 10px; font-weight: 700; letter-spacing: 0.2em; opacity: 0.62; } .ticket-desc-copy { margin: 0; font-size: var(--fs-meta); line-height: 1.5; min-height: 36px; /* CLS guard: 2 mono lines reserved for typing */ max-width: none; } .ticket-items { margin: 0; padding: 0; list-style: none; } .ticket-item { display: flex; align-items: baseline; gap: var(--s-2); height: 30px; /* CLS guard: fixed row height */ font-size: var(--fs-small); } .ticket-item .money, .ticket-total .money { min-width: 56px; text-align: right; /* digit columns share one hard right edge */ } /* nth-child --i map drives the stamp stagger — zero inline styles */ .ticket-items .ticket-item:nth-child(1) { --i: 1; } .ticket-items .ticket-item:nth-child(2) { --i: 2; } .ticket-items .ticket-item:nth-child(3) { --i: 3; } .ticket-items .ticket-item:nth-child(4) { --i: 4; } .ticket-items .ticket-item:nth-child(5) { --i: 5; } .ticket-total { position: relative; display: flex; align-items: baseline; gap: var(--s-2); height: 48px; /* CLS guard */ margin-top: var(--s-2); padding-top: var(--s-3); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.08em; max-width: none; } .ticket-total .money { font-size: 22px; letter-spacing: -0.01em; } .ticket-total-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--copper); transform-origin: left center; } .ticket-foot { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px dashed var(--paper-rule); font-size: var(--fs-meta); letter-spacing: 0.08em; } .ticket-url { font-weight: 700; } /* Dimension callout — anchored INSIDE the ticket (rotates with the tilt, can never drift), centered like a true drafting dimension */ .ticket-dim { position: absolute; left: 50%; bottom: -52px; width: 280px; height: 40px; margin-left: -140px; pointer-events: none; } .ticket-dim line { stroke: var(--copper); stroke-width: 1; } .ticket-dim path { fill: var(--copper); } .ticket-dim text { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; fill: var(--copper); } /* ── PRINT CHOREOGRAPHY (JS-gated, desktop only; no-JS, mobile, and reduced-motion all ship the ticket pre-printed) ──────────────── Sequence: items stamp → digits settle → total → copper rule draws → foot fades in → the "2 MIN ±0" callout annotates the finished quote. */ @media (min-width: 769px) { .js .hero-ticket[data-print] .ticket-item, .js .hero-ticket[data-print] .ticket-total, .js .hero-ticket[data-print] .ticket-foot, .js .hero-ticket[data-print] .ticket-dim { opacity: 0; } .js .hero-ticket[data-print] .ticket-total-rule { transform: scaleX(0); } .js .hero-ticket.is-printed .ticket-item { animation: item-stamp 180ms var(--ease-settle) both; animation-delay: calc(var(--i, 0) * var(--stagger-item)); } .js .hero-ticket.is-printed .ticket-item .money { animation: digit-settle 180ms steps(3, end) both; animation-delay: calc(var(--i, 0) * var(--stagger-item) + 90ms); } .js .hero-ticket.is-printed .ticket-total { animation: item-stamp 180ms var(--ease-settle) both; animation-delay: calc(6 * var(--stagger-item)); } .js .hero-ticket.is-printed .ticket-total .money { animation: digit-settle 180ms steps(3, end) both; animation-delay: calc(6 * var(--stagger-item) + 90ms); } .js .hero-ticket.is-printed .ticket-total-rule { animation: rule-draw 320ms var(--ease-settle) both; animation-delay: calc(6 * var(--stagger-item) + 140ms); } .js .hero-ticket.is-printed .ticket-foot { animation: fade-swap var(--t-tick) var(--ease-settle) both; animation-delay: calc(6 * var(--stagger-item) + 320ms); } .js .hero-ticket.is-printed .ticket-dim { animation: fade-swap var(--t-tick) var(--ease-settle) both; animation-delay: calc(6 * var(--stagger-item) + 520ms); } } @media (prefers-reduced-motion: reduce) { .js .hero-ticket[data-print] .ticket-item, .js .hero-ticket[data-print] .ticket-total, .js .hero-ticket[data-print] .ticket-foot, .js .hero-ticket[data-print] .ticket-dim { opacity: 1; animation: none; } .js .hero-ticket[data-print] .ticket-total-rule { transform: scaleX(1); animation: none; } } /* ═══════════ SECTION: trustbar ═══════════ */ /* ════════════════════════════════════════════════════════════════════ TRUSTBAR — trades index strip (section-scoped) — REV A.1 A strip, not a chapter: deliberately tighter than chapter rhythm so it reads as a ruled divider between the hero and 02 / THE ACCEPT. Static by decree — the marquee is dead; this manifest does not move. ════════════════════════════════════════════════════════════════════ */ .trustbar { padding-block: var(--s-8); background: var(--ink-page); } /* ── drafting index label ───────────────────────────────────────────── Right-aligned micro-metadata above the top rule: same position the chapter headers park their mono metadata, so the strip reads as part of the same document set, not an anonymous logo bar. */ .trustbar__index { font-family: var(--font-mono); font-size: var(--fs-slug); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; line-height: 1; text-align: right; color: var(--tan-dim); font-variant-numeric: tabular-nums; margin-bottom: var(--s-3); } /* ── the manifest row ───────────────────────────────────────────────── space-between keeps graduations optically centered between names (ticks are true flex siblings, never glued to a name). column-gap is the wrap floor only — at full width the justification owns spacing. */ .trustbar__trades { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; column-gap: var(--s-3); row-gap: var(--s-3); padding-block: var(--s-5); } /* Fluid manifest type, bounded by two existing tokens: interpolates --fs-meta → --fs-small across ~1090–1450px so the seven trades hold ONE ruled line at every desktop width instead of wrapping raggedly. letter-spacing is em-based, so tracking scales with it. */ .trustbar__trade { font-family: var(--font-mono); font-size: clamp(var(--fs-meta), 0.55vw + 6px, var(--fs-small)); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; color: var(--tan); white-space: nowrap; font-variant-numeric: tabular-nums; } /* tape-measure graduations — full / quarter / half / quarter / full, all rising from the bottom edge. top:1px is an optical-baseline nudge (margin-free and transform-free so it can't fight the reveal's translateY entrance). */ .trustbar__tick { flex: 0 0 auto; display: block; width: 25px; height: 12px; color: var(--tan-dim); position: relative; top: 1px; } /* bottom rule reuses .scribe's draw but drops the copper origin tick — one copper tick per strip keeps the accent budget honest */ .trustbar__rule--plain::before { display: none; } /* ── the line beneath ─────────────────────────────────────────────── */ .trustbar__below { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4) var(--gutter); padding-top: var(--s-5); } .trustbar__tagline { font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.5; letter-spacing: 0.04em; color: var(--tan-dim); } .trustbar__facts { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-6); row-gap: var(--s-3); } .trustbar__fact { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; color: var(--tan); white-space: nowrap; font-variant-numeric: tabular-nums; } /* 8px copper dash prefix — same mark language as .log-chip::before */ .trustbar__fact::before { content: ""; flex: 0 0 auto; width: 8px; height: 1px; background: var(--copper); } /* ── tablet (<960px): graduations retire before they can orphan ────── Below ~960px the ticked line can no longer hold without wrapping (which strands graduations at line edges — drafting-table sloppiness). The manifest stays a justified single line of names as far down as it fits, then wraps left-ragged. */ @media (max-width: 960px) { .trustbar__tick { display: none; } .trustbar__trades { column-gap: var(--s-5); } } /* ── mobile (<768px): left-ragged manifest, facts become a list ────── */ @media (max-width: 768px) { .trustbar { padding-block: var(--s-7); } .trustbar__index { text-align: left; /* matches the inline log-chip position */ } .trustbar__trades { justify-content: flex-start; column-gap: var(--s-4); row-gap: var(--s-2); padding-block: var(--s-4); } .trustbar__trade { letter-spacing: 0.16em; } .trustbar__below { flex-direction: column; align-items: flex-start; } .trustbar__facts { flex-direction: column; align-items: flex-start; row-gap: var(--s-2); } } /* ═══════════ SECTION: how ═══════════ */ /* ════════════════════════════════════════════════════════════════ SECTION: HOW — "01 / THE METHOD — 07:43 AM" Three moves told editorially against the job clock. Scope: .how · foundation tokens only. Budgets used here: paper 0 · green 0 · stamps 0 · margin notes 1 · field-wash 1 (the ACCEPTED row) · easings: foundation only. ════════════════════════════════════════════════════════════════ */ .how { position: relative; overflow: clip; /* crops the ghost timestamp cleanly — no horizontal scrollbar */ } .how .container { position: relative; z-index: 1; } /* ── chapter chip — the rail's <1100px collapse (markup-provided) ── */ .how-chapter-chip { display: none; margin-bottom: var(--s-4); } @media (max-width: 1099px) { .how-chapter-chip { display: inline-flex; } } /* ── intro: headline + lead left, chapter index pinned right ── */ .how-intro { margin-top: var(--s-7); row-gap: var(--s-5); } .how-intro h2 { grid-column: 1 / 9; grid-row: 1; } .how-lead { grid-column: 1 / 8; grid-row: 2; } /* the chapter's own mini-manifest: three anchored moves, ruled left */ .how-index { grid-column: 10 / 13; grid-row: 1 / 3; align-self: end; border-left: var(--hairline); padding-left: var(--s-5); padding-block: var(--s-1); display: flex; flex-direction: column; gap: var(--s-2); } .how-index__head { color: var(--tan-dim); letter-spacing: 0.18em; margin-bottom: var(--s-1); } .how-index__row { display: flex; align-items: baseline; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: var(--tan); text-decoration: none; transition: color var(--t-micro) var(--ease-settle); } .how-index__t { color: var(--tan-dim); transition: color var(--t-micro) var(--ease-settle); } .how-index__row:hover, .how-index__row:hover .how-index__t { color: var(--copper-hi); } /* ── steps (ordered procedure, ruled like a ledger) ── */ .how-steps { margin-top: var(--s-9); } .how-step { border-top: var(--hairline); padding-block: var(--s-8); scroll-margin-top: var(--s-8); /* index anchors land clear of the fold */ } .how-step__grid { row-gap: var(--s-6); align-items: start; } /* step 1 · index left / copy mid / photo plate right */ .how-step--1 .how-step__index { grid-column: 1 / 3; grid-row: 1; } .how-step--1 .how-step__copy { grid-column: 3 / 8; grid-row: 1; } .how-step--1 .how-photo { grid-column: 8 / 13; grid-row: 1; } .how-step--1 .how-note { grid-column: 8 / 13; grid-row: 2; justify-self: end; } /* step 2 · flipped silhouette — log left / copy mid / index right (DOM stays index → copy → artifact; the grid does the flipping) */ .how-step--2 .how-log { grid-column: 1 / 6; grid-row: 1; } .how-step--2 .how-step__copy { grid-column: 6 / 11; grid-row: 1; } .how-step--2 .how-step__index { grid-column: 11 / 13; grid-row: 1; justify-self: end; } /* step 3 · narrower settle slip (4 cols) so no two steps share a silhouette. The dashed gap band replaces this step's top rule. */ .how-step--3 { border-top: 0; padding-top: 0; } .how-step--3 .how-step__index { grid-column: 1 / 3; grid-row: 1; } .how-step--3 .how-step__copy { grid-column: 3 / 8; grid-row: 1; } .how-step--3 .how-settle { grid-column: 9 / 13; grid-row: 1; align-self: center; } /* ── index block (big tabular numeral + clock chip) ── */ .how-step__index { display: flex; flex-direction: column; gap: var(--s-3); } .how-step__index--right { align-items: flex-end; text-align: right; } .how-step__num { font-family: var(--font-mono); font-weight: 700; font-size: clamp(44px, 4vw, 60px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--tan); } .how-step__den { font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.18em; color: var(--tan-dim); margin-left: var(--s-1); } /* ── step copy ── */ .how-step__copy h3 { max-width: 16ch; } .how-step__copy p { margin-top: var(--s-4); } .how-step__spec { margin-top: var(--s-5); padding-top: var(--s-3); border-top: var(--hairline); color: var(--tan); letter-spacing: 0.08em; } /* ── step 1 artifact: the customer photo plate ── */ .how-photo { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); } .how-photo__meta { display: flex; justify-content: space-between; gap: var(--s-4); padding-inline: var(--s-1); } .how-photo__frame { background: var(--ink-panel); border: var(--hairline); border-radius: var(--r-paper); } .how-photo__frame svg { width: 100%; height: auto; display: block; } .how-photo__cap { letter-spacing: 0.08em; padding-inline: var(--s-1); } .how-note { margin-top: var(--s-2); } /* ── step 2 artifact: the quote activity log ── */ .how-log { overflow: hidden; } /* keeps the wash row inside the panel radius */ .how-log__head { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: var(--hairline); } .how-log__row { display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: var(--hairline); font-family: var(--font-mono); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; line-height: 1.5; } .how-log__row:last-child { border-bottom: 0; } .how-log__ts { color: var(--tan-dim); flex: none; } .how-log__event { color: var(--body); letter-spacing: 0.04em; min-width: 0; } .how-log__val { color: var(--tan); white-space: nowrap; } .how-log__row--accept .how-log__ts, .how-log__row--accept .how-log__event, .how-log__row--accept .how-log__val { color: var(--copper); } /* dotted leader — dark-ground variant of the foundation .leader */ .how-leader { flex: 1 1 16px; border-bottom-color: var(--tan-dim); opacity: 0.45; transform: translateY(-3px); } /* ── the gap band: 07:51 → 11:38, elapsed work drawn as a dashed rule with rail-vocabulary end ticks ── */ .how-gap { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding-block: var(--s-2) var(--s-7); } .how-gap__span { color: var(--tan); flex: none; } .how-gap__rule { position: relative; flex: 1 1 80px; height: 0; border-top: 1px dashed var(--tan-dim); opacity: 0.5; } .how-gap__rule::before, .how-gap__rule::after { content: ""; position: absolute; top: -4px; width: 1px; height: 8px; background: var(--tan-dim); } .how-gap__rule::before { left: 0; } .how-gap__rule::after { right: 0; } .how-gap__label { letter-spacing: 0.08em; } /* ── step 3 artifact: the settle slip ── */ .how-settle { padding: var(--s-5); } .how-settle__row { display: flex; align-items: baseline; gap: var(--s-3); } .how-settle__row--sub { margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--hairline); justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-4); } .how-settle__amt { font-size: 20px; font-weight: 700; color: var(--cream); } .how-settle__link { color: var(--tan); font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.12em; white-space: nowrap; } /* ── coda — the punchline carries the brighter ink ── */ .how-coda { margin-top: var(--s-8); padding-top: var(--s-4); border-top: var(--hairline); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-4); } .how-coda__l { color: var(--tan-dim); letter-spacing: 0.1em; } .how-coda__r { color: var(--tan); letter-spacing: 0.1em; } /* ── responsive: single column under 960 — DOM order already reads index → copy → artifact, so stacking needs no order overrides ── */ @media (max-width: 960px) { .how-intro h2, .how-lead { grid-column: 1 / -1; } .how-lead { grid-row: 2; } .how-index { display: none; } .how-step--1 .how-step__index, .how-step--1 .how-step__copy, .how-step--1 .how-photo, .how-step--1 .how-note, .how-step--2 .how-step__index, .how-step--2 .how-step__copy, .how-step--2 .how-log, .how-step--3 .how-step__index, .how-step--3 .how-step__copy, .how-step--3 .how-settle { grid-column: 1 / -1; grid-row: auto; } .how-step__index { flex-direction: row; align-items: baseline; gap: var(--s-4); } .how-step--2 .how-step__index { align-items: baseline; text-align: left; justify-self: start; } .how-step__num { font-size: 40px; } .how-note { justify-self: end; } .how-settle { align-self: auto; } } @media (max-width: 767px) { .how-steps { margin-top: var(--s-8); } .how-step { padding-block: var(--s-7); } .how-step__num { font-size: 32px; } .how-gap__label { flex-basis: 100%; } } /* ═══════════ SECTION: feature_quote ═══════════ */ /* ════════════════════════════════════════════════════════════════ SECTION · feature_quote — "01 / THE QUOTE — 07:46 AM" · REV B Scope prefix: .fq · foundation tokens only · no new raw colors, easings, or fonts. No --paid green in this chapter (budget: 0). ════════════════════════════════════════════════════════════════ */ .fq { position: relative; overflow: clip; /* crops the ghost timestamp off the top-right edge without spawning a horizontal scrollbar */ } .fq > .container { position: relative; z-index: 1; } /* Rail collapse chip — only below the rail breakpoint. (If the shared rail script injects chips itself, integrator drops this.) */ .fq-chip { display: none; margin-bottom: var(--s-5); } @media (max-width: 1099px) { .fq-chip { display: inline-flex; } } /* ── Chapter grid: story 5 / artifact 7 — flips the hero's 7/5. Col 6 stays empty as a deliberate air channel. min-width:0 stops long mono strings from blowing out the tracks. */ .fq-grid { margin-top: var(--s-8); row-gap: var(--s-8); align-items: start; } .fq-story { grid-column: 1 / span 5; min-width: 0; } .fq-artifact { grid-column: 7 / -1; margin: 0; min-width: 0; } /* ── Story column */ .fq-lead { margin-top: var(--s-5); } .fq-body { margin-top: var(--s-4); } /* Two-input ledger: every row ruled, flush to the column's left rag. Static content — no hover affordance on rows that aren't clickable. */ .fq-ways { margin-top: var(--s-6); border-top: var(--hairline); } .fq-way { display: flex; align-items: baseline; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: var(--hairline); } .fq-way-key { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 700; color: var(--copper); } .fq-way-name { font-size: var(--fs-small); font-weight: 700; letter-spacing: -0.01em; color: var(--cream); white-space: nowrap; } .fq-way-spec { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.5; color: var(--tan-dim); text-align: right; } .fq-cta { margin-top: var(--s-6); } .fq-note { margin-top: var(--s-7); } /* ── Artifact: the quote-builder UI crop (dark plate — NOT paper). Tonal hierarchy: chrome + input pane sit on --ink-panel (recessed), the drafted quote rides the raised plate — the eye lands on the output, which is the product's whole argument. */ .fq-app { overflow: hidden; } /* honors --r-panel on inner grounds */ .fq-app-chrome { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-5); background: var(--ink-panel); border-bottom: var(--hairline); font-family: var(--font-mono); font-size: var(--fs-slug); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tan-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .fq-chrome-id { color: var(--tan); } .fq-app-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .fq-in { padding: var(--s-5); background: var(--ink-panel); border-right: var(--hairline); } .fq-out { padding: var(--s-5); display: flex; flex-direction: column; } .fq-pane-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); max-width: none; font-family: var(--font-mono); font-size: var(--fs-slug); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tan-dim); font-variant-numeric: tabular-nums; } /* The label's name carries structure — lift it off metadata gray */ .fq-pane-label > span:first-child { color: var(--tan); } .fq-said { margin-top: var(--s-3); max-width: none; font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.6; color: var(--tan); min-height: calc(2 * 1.6 * var(--fs-small)); /* CLS guard: two lines reserved before the typing hook runs */ } .fq-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; vertical-align: -0.15em; background: var(--copper); /* static — blinking would be an infinite loop */ } .fq-label-photo { margin-top: var(--s-6); } /* Photo well: single frame only — the SVG's viewfinder corners do the framing; a CSS border on top of them was double-matting. */ .fq-photo { margin-top: var(--s-3); padding: var(--s-3); background: var(--ink-page); border-radius: var(--r-0); } .fq-shot { display: block; width: 100%; height: auto; } .fq-svg-mono { font-family: var(--font-mono); } .fq-photo-meta { margin-top: var(--s-2); } .fq-read { margin-top: var(--s-6); } .fq-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); } /* ── Output pane: the drafted quote */ .fq-job { margin-top: var(--s-4); max-width: none; font-size: var(--fs-body); font-weight: 700; letter-spacing: -0.01em; color: var(--cream); } .fq-items { margin-top: var(--s-4); } .fq-item { display: flex; align-items: baseline; padding: var(--s-3) 0; border-bottom: var(--hairline); font-size: var(--fs-small); line-height: 1.5; } .fq-item:last-child { border-bottom: 0; } .fq-item-name { color: var(--body); font-weight: 500; } .fq-leader { flex: 1 1 auto; min-width: var(--s-4); margin-inline: var(--s-2); border-bottom: 1px dotted var(--tan-dim); opacity: 0.5; transform: translateY(-4px); } .fq-amt { color: var(--cream); font-weight: 700; } .fq-total-rule { height: 2px; background: var(--copper); transform-origin: left center; } .fq-total { display: flex; align-items: baseline; max-width: none; padding-top: var(--s-3); padding-bottom: var(--s-5); } .fq-total-label { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.22em; color: var(--tan); } .fq-total-amt { margin-left: auto; font-size: var(--fs-lead); font-weight: 700; color: var(--cream); } .fq-status { margin-top: auto; padding-top: var(--s-4); border-top: var(--hairline); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3) var(--s-4); } /* The send action as the product's real press-button slab — depicted, not interactive, so it's a span: no fake button semantics. */ .fq-send-btn { display: inline-flex; align-items: center; padding: var(--s-2) var(--s-4); background: var(--cream); color: var(--paper-ink); border-radius: var(--r-0); box-shadow: var(--shadow-btn); font-family: var(--font-mono); font-size: var(--fs-slug); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; } .fq-cap { margin-top: var(--s-4); max-width: 52ch; } /* ── Stagger indices (replaces inline style="--i:n" per STEP ZERO — foundation delay rule reads var(--i) the same either way) ───── */ .fq-items > .fq-item:nth-child(1) { --i: 0; } .fq-items > .fq-item:nth-child(2) { --i: 1; } .fq-items > .fq-item:nth-child(3) { --i: 2; } .fq-items > .fq-item:nth-child(4) { --i: 3; } .fq-items > .fq-item:nth-child(5) { --i: 4; } .fq-total { --i: 6; } .fq-send-btn { --i: 7; } .fq-tags > li:nth-child(1) { --i: 0; } .fq-tags > li:nth-child(2) { --i: 1; } .fq-tags > li:nth-child(3) { --i: 2; } .fq-tags > li:nth-child(4) { --i: 3; } /* ── Motion wiring (rides the foundation reveal system) ─────────── */ /* AI leak flag snaps on after the photo settles — read, then flagged */ .js .fq-photo[data-reveal] .fq-flag { opacity: 0; transition: opacity var(--t-tick) var(--ease-settle); transition-delay: 360ms; } .js .fq-photo[data-reveal].is-inview .fq-flag { opacity: 1; } /* Total rule draws left-to-right after the five line items stamp in */ .js .fq-total-rule[data-reveal] { opacity: 1; transform: scaleX(0); transition: transform var(--t-rule) var(--ease-settle); transition-delay: calc(5 * var(--stagger-item)); } .js .fq-total-rule[data-reveal].is-inview { transform: scaleX(1); } /* 3-frame digit settle on each amount, offset off its row's --i. Keyframes scoped fq- so the section never collides with foundation. */ @keyframes fq-digit-settle { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } .js .fq-item.is-inview .fq-amt { animation: fq-digit-settle 180ms steps(3, end) both; animation-delay: calc(var(--i, 0) * var(--stagger-item) + 120ms); } .js .fq-total.is-inview .fq-total-amt { animation: fq-digit-settle 180ms steps(3, end) both; animation-delay: calc(6 * var(--stagger-item) + 120ms); } /* ── Reduced motion: quote ships pre-built, rule pre-drawn, flag on ── */ @media (prefers-reduced-motion: reduce) { .js .fq-photo[data-reveal] .fq-flag { opacity: 1; transition: none; } .js .fq-total-rule[data-reveal], .js .fq-total-rule[data-reveal].is-inview { transform: none; transition: opacity 200ms linear; transition-delay: 0ms; } .js .fq-item.is-inview .fq-amt, .js .fq-total.is-inview .fq-total-amt { animation: none; } } /* ── Breakpoints ────────────────────────────────────────────────── */ @media (max-width: 1023px) { .fq-story, .fq-artifact { grid-column: 1 / -1; } .fq-story { max-width: 60ch; } .fq-artifact { max-width: 820px; } /* keeps the crop composed, not gym-stretched, on tablets */ } @media (max-width: 768px) { .fq-grid { margin-top: var(--s-7); row-gap: var(--s-7); } .fq-app-body { grid-template-columns: minmax(0, 1fr); } .fq-in { border-right: 0; border-bottom: var(--hairline); } .fq-way { flex-wrap: wrap; row-gap: var(--s-1); } .fq-way-spec { margin-left: 0; flex-basis: 100%; text-align: left; padding-left: var(--s-6); } .fq-note { margin-top: var(--s-6); } } @media (max-width: 479px) { .fq-chrome-meta { display: none; } /* keeps the chrome bar from overflowing at 320–360px */ } /* ═══════════ SECTION: feature_getpaid ═══════════ */ /* ════════════════════════════════════════════════════════════════════ 05 / PAID — section-scoped styles (.gp-*) Foundation tokens only. Muted paper text derives from --paper-ink via color-mix; no raw colors introduced. Copper-wash use: 1 of max 1. ═══════════════════════════════════════════════════════════════════ */ .gp { position: relative; overflow: clip; /* crops the ghost timestamp off the band edge — no horizontal scrollbar */ } .gp-wrap { position: relative; z-index: 1; } /* Rail collapse chip (<1100px). Remove if the shared rail script injects chips. */ .gp-chip { margin-bottom: var(--s-5); } @media (min-width: 1100px) { .gp-chip { display: none; } } /* ── Chapter grid · artifact 1–7, story 9–12 (flips the hero's 7/5). Mobile-first: everything stacks in DOM order — headline, stamped invoice, then the receipts. The payoff is screen two, not screen six. */ .gp-grid { margin-top: var(--s-7); row-gap: var(--s-7); align-items: start; } .gp-lede, .gp-doc, .gp-after { grid-column: 1 / -1; } .gp-doc { margin: 0; position: relative; } @media (min-width: 1100px) { .gp-grid { row-gap: var(--s-8); } .gp-lede { grid-column: 9 / 13; grid-row: 1; } .gp-after { grid-column: 9 / 13; grid-row: 2; } .gp-doc { grid-column: 1 / 8; grid-row: 1 / 3; } } /* ── Lede ─────────────────────────────────────────────────────────── */ .gp-lede .t-lead { margin-top: var(--s-5); } /* Money rule: clock times in running prose are tabular. 0.88em keeps the inline figures matched to the surrounding x-height. */ .gp-time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.88em; letter-spacing: -0.01em; } /* ── Aftermath column — deliberate rhythm, not a uniform gap ─────── */ .gp-body { color: var(--body); } .gp-log-block { margin-top: var(--s-6); } .gp-dash { margin-top: var(--s-6); } .gp-note { display: block; width: max-content; max-width: 100%; margin-top: var(--s-5); margin-left: auto; /* outer gutter — story sits in the right columns */ } /* ── Payment log — prints like a receipt ─────────────────────────── */ .gp-log-head { font-weight: 700; letter-spacing: 0.18em; margin-bottom: var(--s-2); } .gp-log { border-top: var(--hairline); } .gp-log li { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--s-3); align-items: baseline; padding: var(--s-3) 0; border-bottom: var(--hairline); } .gp-log-t { font-size: var(--fs-meta); font-weight: 700; color: var(--tan-dim); } .gp-log-what { color: var(--cream); font-size: var(--fs-small); font-weight: 500; } .gp-log .t-meta { text-align: right; } .gp-log-amt { font-size: var(--fs-meta); font-variant-numeric: tabular-nums; color: var(--cream); } /* The approval row is the event — section's single copper-wash field. */ .gp-log li:last-child { background: var(--copper-wash); border-bottom: 0; padding-inline: var(--s-3); margin-inline: calc(-1 * var(--s-3)); } .gp-log li:last-child .gp-log-t { color: var(--copper); } /* Receipt-print cascade: rows stamp in one after another, keyed off the shared observer's .is-inview on the block. Gated behind .js; rows are fully visible with JS off or reduced motion. */ .js .gp-log-block li { opacity: 0; transform: translateY(4px); transition: opacity var(--t-row) var(--ease-settle), transform var(--t-row) var(--ease-settle); } .js .gp-log-block li:nth-child(2) { transition-delay: var(--stagger-item); } .js .gp-log-block li:nth-child(3) { transition-delay: calc(var(--stagger-item) * 2); } .js .gp-log-block.is-inview li { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .gp-log-block li { opacity: 1; transform: none; transition: none; } } /* ── Dashboard strip — green use #2 of 2 sitewide ────────────────── */ .gp-dash { padding: var(--s-5); } .gp-dash-top { display: flex; justify-content: space-between; gap: var(--gutter); padding-bottom: var(--s-3); border-bottom: var(--hairline); margin-bottom: var(--s-4); } .gp-dash-row { display: flex; justify-content: space-between; align-items: center; gap: var(--gutter); } .gp-dash-info { display: flex; flex-direction: column; gap: var(--s-1); } .gp-dash-job { color: var(--cream); font-weight: 500; } .gp-dash-amt { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--paid); white-space: nowrap; } /* Running tally makes the panel a ledger, not a mockup. Cream, never green. No dotted leaders here — leaders are a paper-document device. */ .gp-dash-week { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gutter); margin-top: var(--s-4); padding-top: var(--s-3); border-top: var(--hairline); } .gp-dash-wtd { font-size: var(--fs-small); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cream); } /* ── The invoice — paper surface #2 of 3 ─────────────────────────── */ .gp-invoice { --perf-ground: var(--ink-ember); --gp-inkmut: color-mix(in srgb, var(--paper-ink) 64%, transparent); position: relative; padding: var(--s-6); } @media (max-width: 768px) { .gp-invoice { padding: var(--s-5) var(--s-4); } } .gp-inv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gutter); padding-bottom: var(--s-4); border-bottom: 1px solid var(--paper-rule); } .gp-inv-brand, .gp-inv-docid { display: flex; flex-direction: column; gap: var(--s-1); } .gp-inv-docid { align-items: flex-end; text-align: right; } .gp-inv-biz { font-size: var(--fs-lead); line-height: 1.2; letter-spacing: -0.01em; } .gp-doc-type { font-family: var(--font-mono); font-size: var(--fs-lead); font-weight: 700; letter-spacing: 0.08em; color: var(--paper-ink); } .gp-was { text-decoration-line: line-through; text-decoration-color: var(--copper-press); text-decoration-thickness: 2px; color: var(--gp-inkmut); margin-right: var(--s-2); } .gp-inv-mut { font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.5; letter-spacing: 0.08em; color: var(--gp-inkmut); font-variant-numeric: tabular-nums; } .gp-inv-billed { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) 0; border-bottom: 1px solid var(--paper-rule); } .gp-inv-client { color: var(--paper-ink); font-size: var(--fs-small); font-weight: 700; } .gp-lines { padding-top: var(--s-3); } .gp-lines li { display: flex; align-items: baseline; padding: var(--s-2) 0; font-size: var(--fs-small); line-height: 1.6; color: var(--paper-ink); } .gp-lines .money { min-width: 4.5ch; /* digits column-align down the sheet */ text-align: right; font-variant-numeric: tabular-nums; } .gp-total { display: flex; align-items: baseline; margin-top: var(--s-3); padding-top: var(--s-4); border-top: 2px solid var(--paper-ink); } .gp-total-label { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.18em; color: var(--paper-ink); } .gp-total-amt { font-size: var(--fs-lead); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--paper-ink); padding-bottom: 2px; border-bottom: 3px double var(--paper-ink); /* the accountant's final-total mark */ } .gp-paidline { margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border: 1px dashed var(--paper-rule); display: flex; flex-direction: column; gap: var(--s-1); } .gp-paidline-main { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gutter); } .gp-paidline-zero { margin-top: var(--s-1); padding-top: var(--s-2); border-top: 1px solid var(--paper-rule); } .gp-paystatus { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.14em; color: var(--paper-ink); } .gp-payamt { font-size: var(--fs-small); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--paper-ink); } .gp-inv-foot { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--paper-rule); display: flex; justify-content: space-between; gap: var(--gutter); font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.08em; color: var(--gp-inkmut); } /* ── The seal — stamp use #1 of 3 ──────────────────────────────────── Clipped to the sheet: stamp ink exists only on paper, so the mark crops at the invoice's left edge (and tracks the paper's 0.5deg tilt). multiply soaks the ink into the print beneath — true overprint. Lower- left placement counterweights the green +$1,230 and keeps every dollar figure on the right side of the document clear. */ .gp-seal-clip { position: absolute; inset: 0; overflow: clip; border-radius: var(--r-paper); pointer-events: none; } .gp-seal { position: absolute; z-index: 2; left: -28px; bottom: 24px; width: 192px; height: 192px; } @media (max-width: 768px) { .gp-seal { width: 140px; height: 140px; left: -12px; bottom: 36px; } } .gp-seal-svg { width: 100%; height: 100%; mix-blend-mode: multiply; /* ink sits into the paper and overprints the text */ opacity: 0.92; } .gp-seal-svg text { font-family: var(--font-mono); font-weight: 700; fill: var(--copper); font-variant-numeric: tabular-nums; } .gp-rim-text { font-size: 12px; letter-spacing: 0.42em; } .gp-rim-text--sm { font-size: 10px; letter-spacing: 0.24em; } .gp-seal-paid { font-size: 34px; letter-spacing: 0.14em; } .gp-seal-time { font-size: 11px; letter-spacing: 0.08em; } /* No-JS: seal rests at its stamped angle (foundation owns the JS slam and the reduced-motion pre-stamped state). */ html:not(.js) .gp-seal { transform: rotate(-7deg); } /* Green tick — green use #1 of 2 sitewide. Self-sequences: draws 250ms after the stamp lands, keyed off .is-inview set by the shared observer. */ .gp-tick { stroke-dasharray: 1; stroke-dashoffset: 0; } .js .gp-seal .gp-tick { stroke-dashoffset: 1; transition: stroke-dashoffset var(--t-tick) var(--ease-settle); transition-delay: calc(var(--t-stamp) + 250ms); } .js .gp-seal.is-inview .gp-tick { stroke-dashoffset: 0; } @media (prefers-reduced-motion: reduce) { .js .gp-seal .gp-tick { stroke-dashoffset: 0; } } /* ═══════════ SECTION: showcase ═══════════ */ /* ════════════════════════════════════════════════════════════════════ SHOWCASE — 02 / THE QUOTE — section-scoped styles Tokens only. Depth = --edge-lit + --shadow-panel (via .surface-panel). No glows, no paper, no green. One copper wash (the ACCEPTED feed row), one margin note. Both artifacts are frozen inside this chapter's clock — Collected stays $0 so the 11:52 PAID chapter keeps its payoff. All stagger indexes are assigned via nth-child below: zero inline styles. ════════════════════════════════════════════════════════════════════ */ #showcase { position: relative; /* anchors .ghost-ts */ overflow-x: clip; /* crops the ghost timestamp without a horizontal scrollbar; vertical shadows stay unclipped */ } /* ── Chapter header ─────────────────────────────────────────────── */ #showcase .sc-head { position: relative; z-index: 1; margin-bottom: var(--s-8); } #showcase .sc-chip { margin-bottom: var(--s-4); } @media (min-width: 1100px) { #showcase .sc-chip { display: none; } /* rail takes over ≥1100px */ } /* ── Grid: 4-col story / 7-col stage, col 5 left as air ─────────── */ #showcase .sc-story { grid-column: 1 / span 4; } #showcase .sc-stage { grid-column: 6 / -1; } #showcase .sc-story h2 { margin-bottom: var(--s-5); } #showcase .sc-story .t-lead { margin-bottom: var(--s-5); } #showcase .sc-story p + p { margin-top: var(--s-4); } /* ── The stage: layered device shot ─────────────────────────────── */ #showcase .sc-stage { position: relative; z-index: 1; padding-bottom: 72px; /* 9 × 8px baseline — reserves the phone's overhang before any animation runs (CLS 0) */ } /* ── ARTIFACT 1 — the board (behind, keyed from upper-left) ─────── */ #showcase .sc-dash { margin-left: 22%; overflow: hidden; /* wash row + chart meet the 6px panel radius cleanly */ } #showcase .sc-dash-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--gutter); padding: var(--s-4) var(--s-5); border-bottom: var(--hairline); } #showcase .sc-brand { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-slug); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--tan); } #showcase .sc-brand::before { content: ""; width: 6px; height: 6px; background: var(--copper); } /* Funnel stats: quoted → accepted → collected ($0, dimmed: the setup) */ #showcase .sc-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: var(--hairline); } #showcase .sc-stat { padding: var(--s-4) var(--s-5); } #showcase .sc-stat + .sc-stat { border-left: var(--hairline); } #showcase .sc-stat-label { display: block; font-family: var(--font-mono); font-size: var(--fs-slug); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tan-dim); } #showcase .sc-stat-val { display: block; margin-top: var(--s-1); font-size: 20px; /* in-mock UI scale, below token type ramp */ font-weight: 700; line-height: 1.2; color: var(--cream); } #showcase .sc-stat-val--zero { color: var(--tan-dim); } /* not yet — paid off by the 11:52 chapter */ /* Week chart — six honest bars + today's open outline */ #showcase .sc-chart { padding: var(--s-4) var(--s-5) var(--s-3); border-bottom: var(--hairline); } #showcase .sc-chart-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-slug); font-weight: 700; letter-spacing: 0.18em; color: var(--tan-dim); margin-bottom: var(--s-2); } #showcase .sc-chart svg { width: 100%; height: auto; display: block; } #showcase .sc-bar { fill: var(--tan-dim); } #showcase .sc-bar--open { /* today: drawn, not yet filled */ fill: none; stroke: var(--tan-dim); stroke-width: 1.5; stroke-dasharray: 3 4; } #showcase .sc-chart text { font-family: var(--font-mono); font-size: 8px; fill: var(--tan-dim); } #showcase .sc-chart .sc-day--today { fill: var(--copper); } /* Solid bars rise on reveal — transform only, settle ease, item stagger. Overrides the generic [data-reveal] translate/fade for rects. */ .js #showcase .sc-bar[data-reveal] { opacity: 1; transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; transition: transform var(--t-rule) var(--ease-settle); transition-delay: calc(var(--i, 0) * var(--stagger-item)); } .js #showcase .sc-bar[data-reveal].is-inview { transform: scaleY(1); } /* The open today-bar blinks in last, after the solid bars land */ .js #showcase .sc-bar--open[data-reveal] { transform: none; opacity: 0; transition: opacity var(--t-tick) var(--ease-settle); transition-delay: calc(8 * var(--stagger-item)); } .js #showcase .sc-bar--open[data-reveal].is-inview { opacity: 1; } /* Activity feed — four rows, all inside this chapter's clock */ #showcase .sc-feed li { display: grid; grid-template-columns: 52px 1fr auto; gap: var(--s-3); align-items: baseline; padding: var(--s-3) var(--s-5); border-bottom: var(--hairline); font-size: var(--fs-small); line-height: 1.5; color: var(--body); } #showcase .sc-feed li:last-child { border-bottom: 0; } #showcase .sc-feed .ts { font-size: var(--fs-meta); color: var(--tan-dim); } #showcase .sc-feed-event strong { color: var(--cream); font-weight: 700; } #showcase .sc-feed .money { color: var(--cream); } #showcase .sc-feed-dash { color: var(--tan-dim); } #showcase .sc-feed-tag { font-family: var(--font-mono); font-size: var(--fs-slug); font-weight: 700; letter-spacing: 0.18em; color: var(--copper); margin-right: var(--s-2); } /* .field-wash on the 07:51 ACCEPTED row is this section's single copper wash */ /* ── ARTIFACT 2 — her phone (in front, lower-left) ──────────────── */ #showcase .sc-phone { position: absolute; left: 0; bottom: 0; width: 300px; z-index: 2; overflow: hidden; } #showcase .sc-ph-status { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) var(--s-4); border-bottom: var(--hairline); font-size: var(--fs-meta); color: var(--tan-dim); } #showcase .sc-ph-status svg rect { fill: var(--tan-dim); } #showcase .sc-ph-status svg rect[fill="none"] { fill: none; stroke: var(--tan-dim); } #showcase .sc-ph-page { padding: var(--s-5) var(--s-4); } #showcase .sc-ph-brand { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); } #showcase .sc-ph-co { font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream); white-space: nowrap; } #showcase .sc-ph-title { font-size: 18px; /* in-mock UI scale */ font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--cream); margin-bottom: var(--s-1); max-width: none; } #showcase .sc-ph-sub { margin-bottom: var(--s-4); } /* Job-photo provenance strip — the photo-to-quote loop, on her page */ #showcase .sc-ph-photo { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-4); border: var(--hairline); border-radius: var(--r-0); } #showcase .sc-ph-photo svg { width: 40px; height: 40px; flex: none; background: var(--ink-raised); } #showcase .sc-ph-photo svg rect, #showcase .sc-ph-photo svg line, #showcase .sc-ph-photo svg circle { fill: none; stroke: var(--tan-dim); stroke-width: 1.5; stroke-linecap: round; } #showcase .sc-ph-photo-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #showcase .sc-ph-photo-meta strong { font-size: var(--fs-small); font-weight: 700; line-height: 1.2; color: var(--cream); } #showcase .sc-ph-items li { display: flex; align-items: baseline; padding: var(--s-2) 0; font-size: var(--fs-small); color: var(--body); } #showcase .sc-ph-items .money { color: var(--cream); } #showcase .ph-leader { flex: 1 1 auto; min-width: var(--s-4); margin-inline: var(--s-2); border-bottom: 1px dotted var(--tan-dim); transform: translateY(-4px); } #showcase .sc-ph-total { display: flex; align-items: baseline; margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--hairline-copper); font-weight: 700; color: var(--cream); } #showcase .sc-ph-total .money { font-size: 18px; } /* The one-tap accept — in-screen UI slab, not an interactive page button */ #showcase .sc-accept { display: block; margin-top: var(--s-5); padding: var(--s-4); background: var(--copper); color: var(--ink-page); border-radius: var(--r-0); box-shadow: var(--shadow-btn); text-align: center; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; line-height: 1; } #showcase .sc-ph-fine { margin-top: var(--s-3); text-align: center; } /* ── Stagger choreography — indexes via nth-child, no inline styles ─ Board lands first; phone (--i:2) second; then both artifacts print their internals on the shared --stagger-item clock. */ #showcase .sc-phone { --i: 2; } #showcase .sc-chart rect.sc-bar:nth-of-type(1) { --i: 1; } #showcase .sc-chart rect.sc-bar:nth-of-type(2) { --i: 2; } #showcase .sc-chart rect.sc-bar:nth-of-type(3) { --i: 3; } #showcase .sc-chart rect.sc-bar:nth-of-type(4) { --i: 4; } #showcase .sc-chart rect.sc-bar:nth-of-type(5) { --i: 5; } #showcase .sc-chart rect.sc-bar:nth-of-type(6) { --i: 6; } #showcase .sc-feed li:nth-child(1) { --i: 2; } #showcase .sc-feed li:nth-child(2) { --i: 3; } #showcase .sc-feed li:nth-child(3) { --i: 4; } #showcase .sc-feed li:nth-child(4) { --i: 5; } #showcase .sc-ph-photo { --i: 3; } #showcase .sc-ph-items li:nth-child(1) { --i: 4; } #showcase .sc-ph-items li:nth-child(2) { --i: 5; } #showcase .sc-ph-items li:nth-child(3) { --i: 6; } #showcase .sc-ph-items li:nth-child(4) { --i: 7; } #showcase .sc-ph-items li:nth-child(5) { --i: 8; } #showcase .sc-ph-total { --i: 9; } #showcase .sc-accept { --i: 10; } /* Margin note — this chapter's one annotation, beside the overlap seam */ #showcase .sc-note { position: absolute; left: 316px; bottom: 28px; } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 1099px) { #showcase .sc-story, #showcase .sc-stage { grid-column: 1 / -1; } #showcase .sc-stage { margin-top: var(--s-7); } } @media (max-width: 768px) { #showcase .sc-stage { padding-bottom: 0; } #showcase .sc-dash { margin-left: 0; } #showcase .sc-phone { position: relative; left: auto; bottom: auto; width: min(300px, 88%); margin-top: -40px; /* keeps the layered-depth read on mobile */ margin-left: var(--s-5); } #showcase .sc-note { position: static; display: inline-block; margin-top: var(--s-4); margin-left: var(--s-5); } #showcase .sc-feed li { grid-template-columns: 44px 1fr auto; padding-inline: var(--s-4); } #showcase .sc-stats .sc-stat { padding: var(--s-3) var(--s-4); } #showcase .sc-stat-val { font-size: 17px; } } /* ── Reduced motion: chart pre-drawn, open bar pre-shown ────────── */ @media (prefers-reduced-motion: reduce) { .js #showcase .sc-bar[data-reveal], .js #showcase .sc-bar--open[data-reveal] { transform: none; opacity: 1; transition: opacity 200ms linear; } } /* ═══════════ SECTION: field-reports ═══════════ */ /* ════════════════════════════════════════════════════════════════════ 06 / THE WORD — FIELD REPORTS (testimonials) · REV A.1 Scoped under .fr — foundation tokens and primitives only. Budgets honored: paper 0 · stamps 0 · green 0 · margin notes 1 · copper-wash 0 · easings: settle + tick only · no new keyframes. ════════════════════════════════════════════════════════════════════ */ .fr .container { position: relative; } .fr { overflow-x: clip; } /* crops the chapter's ghost timestamp off the right edge — same guard every other ghost-ts chapter has; without it the page grows a horizontal scrollbar */ /* content paints above the ghost clock (positioned, z-0 in foundation) */ .fr .chapter-head, .fr .scribe, .fr-grid, .fr-strip { position: relative; z-index: 1; } /* UA-margin guard — blockquote/figure ship with 40px defaults; never trust the reset you haven't read */ .fr figure, .fr blockquote, .fr blockquote p { margin: 0; } .fr cite { font-style: normal; } .fr-grid { margin-top: var(--s-7); row-gap: var(--s-8); } .fr-story, .fr-log { grid-column: 1 / -1; } @media (min-width: 1100px) { .fr-story { grid-column: 1 / span 7; } .fr-log { grid-column: 8 / -1; margin-top: var(--s-9); } /* asymmetric drop */ /* silhouette flip — add .fr--flip to the
if the neighboring chapter already runs story-left (asymmetry rule, §3) */ .fr--flip .fr-story { grid-column: 6 / -1; grid-row: 1; } .fr--flip .fr-log { grid-column: 1 / span 5; grid-row: 1; } } /* ── story column ─────────────────────────────────────────────────── */ .fr-story .t-h2 { margin-bottom: var(--s-5); } .fr-lead { max-width: 24em; } /* featured rule = the foundation scribe (draw + 4px copper origin tick come free); spacing only is scoped here */ .fr .scribe--feature { margin-top: var(--s-7); } .fr-feature { margin-top: var(--s-5); } .fr-quote { margin-top: var(--s-5); } .fr-punch { font-size: clamp(26px, 3.2vw, 40px); /* deliberately under --fs-h2 floor: the H2 owns the chapter */ line-height: 1.15; letter-spacing: -0.022em; font-weight: 500; color: var(--cream); max-width: 21ch; text-wrap: balance; } .fr-quote-more { margin-top: var(--s-4); font-size: var(--fs-body); line-height: 1.7; color: var(--body); max-width: 30em; text-wrap: pretty; } /* hanging open-quotes: real property where supported, indent fallback */ .fr-punch, .fr-quote-more, .fr-entry .fr-q p { text-indent: -0.45ch; } @supports (hanging-punctuation: first) { .fr-punch, .fr-quote-more, .fr-entry .fr-q p { text-indent: 0; hanging-punctuation: first; } } .fr-cite { margin-top: var(--s-5); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.12em; color: var(--cream); } .fr-cite .t-meta { display: block; margin-top: var(--s-1); font-weight: 400; letter-spacing: 0.08em; max-width: none; } .fr-note { margin-top: var(--s-6); margin-left: var(--s-2); } /* ── shared meta row (featured + entries) ─────────────────────────── */ .fr-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); max-width: none; } .fr-ix { font-weight: 700; color: var(--tan); font-variant-numeric: tabular-nums; } .fr-plan { margin-left: auto; font-weight: 700; letter-spacing: 0.18em; } .fr-meta .ts { color: var(--tan-dim); font-variant-numeric: tabular-nums; /* money rule applies to clocks */ transition: color var(--t-tick) var(--ease-settle); } /* the featured report's clock is lit — the only static copper time here */ .fr-feature .fr-meta .ts { color: var(--copper); } /* ── the log (entries reuse .spec-row physics from the foundation) ── */ .fr-log { list-style: none; /* kills UA decimals doubling .fr-ix */ margin: 0; padding: 0; border-top: var(--hairline); } .fr-entry { padding: var(--s-5) var(--s-4); } .fr-entry:first-child { border-top: 0; } /* guard: no doubled hairline if .spec-row carries its own rule */ .fr-entry .fr-q { margin-top: var(--s-3); } .fr-entry .fr-q p { font-size: var(--fs-body); line-height: 1.65; color: var(--body); max-width: 30em; text-wrap: pretty; } .fr-who { margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.08em; color: var(--tan); } /* rail-flip echo: row hover relights the entry's timestamp (tan-dim → copper), same --t-tick the job-log rail uses. Copper left rule + ink-raised wash come free from .spec-row. One echo, no more. */ .fr-entry:hover .fr-meta .ts, .fr-entry:focus-within .fr-meta .ts { color: var(--copper); } /* ── colophon strip ───────────────────────────────────────────────── */ .fr-strip { margin-top: var(--s-9); padding: var(--s-3) 0; border-top: var(--hairline); border-bottom: var(--hairline); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-5); } .fr-strip p { max-width: none; } /* ── mobile ───────────────────────────────────────────────────────── */ @media (max-width: 768px) { .fr-grid { row-gap: var(--s-7); } .fr .scribe--feature { margin-top: var(--s-6); } .fr-feature { margin-top: var(--s-4); } .fr-entry { padding: var(--s-5) var(--s-3); } .fr-strip { margin-top: var(--s-8); } } /* ═══════════ SECTION: pricing ═══════════ */ /* ════════════════════════════════════════════════════════════════ 06 / THE RATE — PRICING (section-scoped) · REV A.1 Foundation tokens/classes only. Every value is a token or a token + opacity. No new raw colors. ════════════════════════════════════════════════════════════════ */ .rate { position: relative; scroll-margin-top: var(--s-8); /* #pricing nav anchor clears the bar */ } .rate__grid { margin-top: var(--s-7); row-gap: var(--s-7); } /* Story column — cols 1–5; padding-right keeps copy clear of the margin-note gutter at ≥1200px */ .rate__story { grid-column: 1 / 6; grid-row: 1; align-self: start; padding-right: var(--s-7); } .rate__lead { margin-top: var(--s-5); } .rate__body { margin-top: var(--s-4); max-width: 26em; } /* The one CTA — terminates the story column under a drawn hairline with a 24px oxidized origin tick (same vocabulary as the scribe) */ .rate__cta { grid-column: 1 / 6; grid-row: 2; align-self: start; position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4) var(--s-5); border-top: var(--hairline); padding-top: var(--s-5); } .rate__cta::before { content: ""; position: absolute; top: -1px; left: 0; width: 24px; height: 1px; background: var(--copper-ox); } .rate__cta-meta { white-space: normal; } /* ── THE RATE SHEET — paper artifact, cols 7–12 ─────────────────── */ .rate__sheet-wrap { grid-column: 7 / 13; grid-row: 1 / 3; position: relative; } .rate-sheet { padding: var(--s-6) var(--s-6) var(--s-5); font-variant-numeric: tabular-nums; /* money-rule insurance, sheet-wide */ } /* Document header — drafting block */ .rate-sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gutter); } .rate-sheet__brand { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-lead); line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; color: var(--paper-ink); } .rate-sheet__doc { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.08em; color: var(--paper-ink); opacity: 0.65; white-space: nowrap; } .rate-sheet__sub { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--paper-ink); opacity: 0.55; margin-top: var(--s-1); padding-bottom: var(--s-4); border-bottom: 2px solid var(--paper-ink); /* heavy rule: inset */ } /* Ledger lines — bleed paper-edge to paper-edge; the bleed's own border-top forms the light rule of a drafting double-rule under the heavy header rule */ .rate-sheet__lines { list-style: none; padding: 0; margin-inline: calc(var(--s-6) * -1); margin-top: 3px; border-top: 1px solid var(--paper-rule); /* light rule: full bleed */ } .rate-line { position: relative; padding: var(--s-5) var(--s-6); } .rate-line + .rate-line { border-top: 1px solid var(--paper-rule); } .rate-line__row { display: flex; align-items: baseline; gap: var(--s-3); } .rate-line__row .leader { min-width: var(--s-6); } /* dots never collapse */ .rate-line__no { flex: none; width: 24px; font-size: var(--fs-meta); font-weight: 700; color: var(--paper-ink); opacity: 0.5; } .rate-line__name { font-size: 20px; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--paper-ink); } .rate-line__price { flex: none; display: flex; align-items: baseline; gap: 2px; } .rate-line__price .money { font-size: 30px; /* the parse anchor — heaviest ink on the sheet */ font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--paper-ink); } .rate-line__per { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--paper-ink); opacity: 0.55; } .rate-line__spec { margin: var(--s-2) 0 0 calc(24px + var(--s-3)); font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.6; color: var(--paper-ink); opacity: 0.72; max-width: 40ch; } /* Pro — the carried line: --rule-pro left rule + the section's single field-wash (class lives on the
  • ) */ .rate-line--pro { border-left: var(--rule-pro); padding-left: calc(var(--s-6) - 2px); } /* ── THE BEAR SEAL — "MOST PICKED" (stamp 2 of 3) ─────────────────── multiply blends the copper into the paper fiber: ink, not sticker. Sits over the leader-dot dead zone, clear of name and price. Rotation lives on this wrapper, NOT the reveal target. */ .rate-seal { position: absolute; top: 50%; right: 116px; width: 92px; height: 92px; margin-top: -46px; transform: rotate(-3deg); color: var(--copper); mix-blend-mode: multiply; opacity: 0.88; pointer-events: none; z-index: 1; } .rate-seal__svg { width: 100%; height: 100%; } /* Collision guard — the seal shrinks off the price column as the sheet narrows between the two comfortable layouts. */ @media (min-width: 1100px) and (max-width: 1320px) { .rate-seal { width: 74px; height: 74px; margin-top: -37px; right: 92px; } } .rate-seal__rim { font-family: var(--font-mono); font-weight: 700; font-size: 7px; letter-spacing: 1.1px; fill: currentColor; } .rate-seal__label { font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: 1.6px; fill: currentColor; } .rate-seal__year { font-family: var(--font-mono); font-weight: 700; font-size: 6px; letter-spacing: 1px; fill: currentColor; opacity: 0.85; } .rate-seal__cut { fill: var(--paper); } /* One-ink seals — the raster bear at each seal's center re-inked to the seal's own copper so every stamp reads as one pass of one ink, not a full-color sticker dropped on an engraving. */ .gp-bear image, .rate-seal__svg image { filter: grayscale(1) brightness(0.55) sepia(1) saturate(4) hue-rotate(-14deg) contrast(1.05); } .site-footer__seal image { filter: grayscale(1) brightness(0.34) sepia(1) saturate(2.6) hue-rotate(-14deg); /* matches --copper-ox */ } /* Document footer — fine print */ .rate-sheet__foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gutter); border-top: 1px solid var(--paper-rule); padding-top: var(--s-4); } .rate-sheet__fine { font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.5; color: var(--paper-ink); opacity: 0.75; } .rate-sheet__rev { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.18em; color: var(--paper-ink); opacity: 0.45; } /* The killer comparison — mono footnote on dark, below the sheet */ .rate__compare { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-6); } .rate__compare-tick { flex: none; width: 24px; height: 1px; background: var(--copper-ox); align-self: center; } .rate__compare-us { color: var(--cream); font-weight: 700; } /* Margin note — outer gutter between story and sheet. Sized so it can never reach the story copy at any width it renders at. */ .rate__note-pos { position: absolute; top: 42%; left: -158px; width: 134px; text-align: right; } .rate__note-tick { display: block; width: 24px; height: 1px; background: var(--copper-ox); margin: var(--s-2) 0 0 auto; } /* ── RESPONSIVE ─────────────────────────────────────────────────── */ @media (max-width: 1199px) { /* below this the gutter is too tight for the note — it goes, copy never collides */ .rate__note-pos { display: none; } } @media (max-width: 1099px) { .rate__story, .rate__sheet-wrap, .rate__cta { grid-column: 1 / -1; grid-row: auto; } .rate__story { padding-right: 0; } .rate__sheet-wrap { margin-top: var(--s-5); max-width: 680px; } /* leaders stay honest */ } @media (max-width: 768px) { .rate-sheet { padding: var(--s-5) var(--s-5) var(--s-4); } .rate-sheet__lines { margin-inline: calc(var(--s-5) * -1); } .rate-line { padding: var(--s-4) var(--s-5); } .rate-line--pro { padding-left: calc(var(--s-5) - 2px); } .rate-line__name { font-size: 18px; } .rate-line__price .money { font-size: 26px; } .rate-line__spec { max-width: none; } /* Seal flows under the Pro spec line instead of floating */ .rate-seal { position: static; display: block; width: 68px; height: 68px; margin: var(--s-3) 0 0 auto; transform: rotate(-3deg); } /* One full-width press target for the thumb in the truck */ .rate__cta { row-gap: var(--s-3); } .rate__cta .btn { width: 100%; justify-content: center; text-align: center; } } /* ═══════════ SECTION: faq ═══════════ */ /* ══════════════════════════════════════════════════════════════════ 07 / QUESTIONS — FAQ · section-scoped Foundation tokens only. No new colors, no new easings, no glows. Hover/press language inherited from .spec-row (copper left rule, --ink-raised step) but scoped to the summary so a non-interactive open answer never lights up like a button. Answers brighten via the shared fade-swap keyframe at --t-tick. Native
    = exclusive accordion in modern browsers, independent disclosure elsewhere; fully readable with JS disabled. ══════════════════════════════════════════════════════════════════ */ .faq { position: relative; scroll-margin-top: var(--s-8); /* clean landing from the nav anchor */ } /* ── Layout: intro cols 1–5, ledger cols 6–13; col 5 breathes ───── */ .faq__grid { margin-top: var(--s-8); row-gap: var(--s-7); } .faq__intro { grid-column: 1 / 5; align-self: start; } .faq__list { grid-column: 6 / 13; border-top: var(--hairline); /* opens the ledger above row 01 */ } @media (min-width: 769px) { .faq__intro { position: sticky; top: var(--s-9); } } .faq__intro h2 { text-wrap: balance; } .faq__lead { margin-top: var(--s-5); } .faq__note { display: inline-block; margin-top: var(--s-6); } /* ── Ledger rows ─────────────────────────────────────────────────── */ /* Shared indent geometry: question and answer share a left edge. --q-fs / --q-lh feed the marker's first-line alignment math. */ .faq-item { --q-col: 64px; /* numeral column */ --q-pad-x: var(--s-4); /* row inset */ --q-gap: var(--gutter); /* numeral-to-question gap */ --q-fs: var(--fs-lead); /* question size (drops to body on mobile) */ --q-lh: 1.3; border-bottom: var(--hairline); } /* Stagger indices in CSS, not inline styles (Step Zero). Feeds the foundation's calc(var(--i) * var(--stagger-item)). */ .faq__list .faq-item:nth-of-type(1) { --i: 0; } .faq__list .faq-item:nth-of-type(2) { --i: 1; } .faq__list .faq-item:nth-of-type(3) { --i: 2; } .faq__list .faq-item:nth-of-type(4) { --i: 3; } .faq__list .faq-item:nth-of-type(5) { --i: 4; } .faq__list .faq-item:nth-of-type(6) { --i: 5; } /* Keep the spec-row copper rule pinned while a row is open */ .faq-item[open]::before { transform: scaleX(1); } /* Scope the --ink-raised hover step to the question line only: an open answer is reading matter, not a control. Closed rows are all summary, so foundation behavior already matches; for open rows, neutralize unless the summary itself is under the cursor. No :has() support → foundation row hover remains. Acceptable. */ @media (hover: hover) { .faq-item[open]:hover { background: transparent; } .faq-item[open]:has(> .faq-item__q:hover) { background: var(--ink-raised); } } /* ── Question line ───────────────────────────────────────────────── */ .faq-item__q { display: grid; grid-template-columns: var(--q-col) 1fr 16px; column-gap: var(--q-gap); align-items: baseline; padding: var(--s-5) var(--q-pad-x); cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; } .faq-item__q::marker { content: none; } .faq-item__q::-webkit-details-marker { display: none; } .faq-item__q:focus-visible { outline-offset: -2px; } /* Numeral — three honest states echoing the rail timestamp flip: tan-dim at rest → tan on hover → copper while open. */ .faq-item__no { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.12em; color: var(--tan-dim); transition: color var(--t-tick) var(--ease-settle); } .faq-item__q:hover .faq-item__no, .faq-item__q:focus-visible .faq-item__no { color: var(--tan); } .faq-item[open] .faq-item__no { color: var(--copper); } /* Question — lead scale over body-scale answers: real hierarchy */ .faq-item__t { margin: 0; color: var(--cream); font-family: var(--font-sans); font-size: var(--q-fs); font-weight: 500; letter-spacing: -0.015em; line-height: var(--q-lh); text-wrap: balance; } /* Plus → minus marker, two 1px currentColor bars. The vertical bar retracts; nothing rotates, nothing bounces. Aligned to the question's FIRST line (computed from type metrics), so two-line questions never float the mark to a dead center. */ .faq-item__mark { position: relative; width: 12px; height: 12px; align-self: start; justify-self: end; margin-top: calc((var(--q-fs) * var(--q-lh) - 12px) / 2); color: var(--tan-dim); transition: color var(--t-micro) var(--ease-settle); } .faq-item__mark::before, .faq-item__mark::after { content: ""; position: absolute; background: currentColor; } .faq-item__mark::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; } .faq-item__mark::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; transform-origin: center; transition: opacity var(--t-micro) var(--ease-settle), transform var(--t-micro) var(--ease-settle); } .faq-item__q:hover .faq-item__mark, .faq-item__q:focus-visible .faq-item__mark { color: var(--copper-hi); } .faq-item[open] .faq-item__mark { color: var(--copper); } .faq-item[open] .faq-item__mark::after { opacity: 0; transform: scaleY(0.2); } /* ── Answer ──────────────────────────────────────────────────────── */ /* Indented to the question's left edge; brightens at --t-tick via the shared fade-swap keyframe. No height tween. */ .faq-item__a { padding: 0 var(--s-6) var(--s-6) calc(var(--q-pad-x) + var(--q-col) + var(--q-gap)); } .faq-item__a p { color: var(--body); max-width: 34em; } .faq-item__a p + p { margin-top: var(--s-3); } .faq-item__a em { color: var(--cream); } .faq-item[open] .faq-item__a { animation: fade-swap var(--t-tick) var(--ease-settle) both; } /* Height micro-transition on the native
    — progressive: modern engines tween the open/close, older engines keep today's instant swap. Exclusive-open (name="faq") behavior untouched. */ :root { interpolate-size: allow-keywords; } @media (prefers-reduced-motion: no-preference) { .faq-item::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size var(--t-row) var(--ease-settle), opacity var(--t-row) var(--ease-settle), content-visibility var(--t-row) allow-discrete; } .faq-item[open]::details-content { block-size: auto; opacity: 1; } } /* The verdict — each answer leads with its blunt answer in cream. Scannable in two seconds, like a foreman would give it. */ .faq-verdict { color: var(--cream); font-weight: 600; } /* ── Ledger close ────────────────────────────────────────────────── */ /* Accountant's double rule: last row's border-bottom + this border-top, 4px apart. Two hairline tokens, zero new colors. */ .faq__end { border-top: var(--hairline); margin-top: var(--s-1); padding-top: var(--s-3); text-align: right; letter-spacing: 0.18em; text-transform: uppercase; } /* ── Reduced motion (local guarantee, beyond the global override) ── */ @media (prefers-reduced-motion: reduce) { .faq-item[open] .faq-item__a { animation: none; } .faq-item__no, .faq-item__mark, .faq-item__mark::after { transition: none; } } /* ── Mobile ──────────────────────────────────────────────────────── */ @media (max-width: 768px) { .faq__grid { row-gap: var(--s-6); } .faq__intro, .faq__list { grid-column: 1 / -1; } .faq-item { --q-col: 36px; --q-pad-x: var(--s-2); --q-gap: var(--s-3); --q-fs: var(--fs-body); --q-lh: 1.4; } .faq-item__t { font-weight: 600; } .faq-item__q { padding-block: var(--s-4); } .faq-item__a { padding-right: var(--q-pad-x); padding-bottom: var(--s-5); } .faq__note { margin-top: var(--s-5); } .faq__end { text-align: left; } } /* ═══════════ SECTION: finalcta ═══════════ */ /* ════════════════════════════════════════════════════════════════════════ SECTION: FINALCTA — "08 / EPILOGUE — 09:47 PM" + FOOTER TITLE BLOCK Scope: .epilogue / .site-footer only. Foundation tokens only — no new colors, fonts, easings, or radii. REV A. ════════════════════════════════════════════════════════════════════════ */ /* ── THE EPILOGUE ──────────────────────────────────────────────────────── */ .epilogue { position: relative; /* clips the ghost timestamp + embossed watermark at the section edge so both crops read as confidence without a horizontal scrollbar; the clip lives on the SECTION only, never on body */ overflow: clip; } .epilogue .container { position: relative; z-index: 1; } /* Ghost timestamp — device #6: chapter clock, mono 700, 3.5% cream, cropped off the section's top-right edge. Decorative only. */ .epilogue__ghost { position: absolute; top: -0.14em; right: -0.1em; z-index: 0; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-ghost); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--cream); opacity: 0.032; white-space: nowrap; pointer-events: none; user-select: none; } @media (max-width: 768px) { .epilogue__ghost { display: none; } } /* Embossed bear watermark — device #9: 480px, 3.5% cream, cropped off the bottom-right corner. Decorative only. */ .epilogue__watermark { position: absolute; right: -110px; bottom: -130px; width: 480px; z-index: 0; color: var(--cream); opacity: 0.035; pointer-events: none; user-select: none; } .epilogue__watermark svg { width: 100%; height: auto; } @media (max-width: 768px) { .epilogue__watermark { width: 280px; right: -70px; bottom: -80px; } } /* Rail collapse chip — visible only below 1100px (the rail owns it above) */ .epilogue__chip { margin-bottom: var(--s-5); } @media (min-width: 1100px) { .epilogue__chip { display: none; } } .epilogue__body { margin-top: var(--s-8); } .epilogue__story { grid-column: 1 / 10; } @media (max-width: 768px) { .epilogue__story { grid-column: 1 / -1; } } /* The last log line of the day — the chapter's kicker */ .epilogue__logline { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.6; letter-spacing: 0.04em; color: var(--tan); font-variant-numeric: tabular-nums; max-width: none; } .epilogue__logline .ts { color: var(--copper); font-weight: 700; } .epilogue__headline { margin-top: var(--s-5); } .epilogue__hline { display: block; } /* Second headline line wipes one beat after the first (squeegee pass). Gated behind .js so a no-script paint ships zero delay artifacts. */ .js .epilogue__headline .epilogue__hline:nth-child(2) { transition-delay: var(--stagger-line); } .epilogue__sub { margin-top: var(--s-6); max-width: 30em; } .epilogue__actions { margin-top: var(--s-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); } /* The big press — same physics as every .btn, scaled up for the closer */ .epilogue__cta { padding: 20px 40px; font-size: var(--fs-body); letter-spacing: 0.01em; } /* Thumb-reach on a phone in a truck: stack and stretch the presses */ @media (max-width: 480px) { .epilogue__actions { flex-direction: column; align-items: stretch; } .epilogue__actions .btn { text-align: center; } } .epilogue__fine { margin-top: var(--s-5); letter-spacing: 0.08em; color: var(--tan-dim); max-width: none; } /* Margin note — device #5, max one per chapter. Lives in the outer gutter, level with the headline. Rotation sits on the inner span so the reveal transform on the

    never overwrites it. */ .epilogue__note { grid-column: 10 / 13; align-self: center; justify-self: end; font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.5; letter-spacing: 0.04em; color: var(--tan); font-variant-numeric: tabular-nums; max-width: none; } .epilogue__note-ink { display: inline-block; transform: rotate(-2deg); } @media (max-width: 1099px) { .epilogue__note { display: none; } } /* ── FOOTER — DRAFTING TITLE BLOCK ─────────────────────────────────────── */ .site-footer { background: var(--ink-panel); border-top: 0; position: relative; } /* Torn-edge top — the page's last sheet separates along a perforation, not a plain hairline. */ .site-footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background-image: linear-gradient(90deg, rgba(214,184,144,0.28) 0 8px, transparent 8px 14px); background-size: 14px 1px; } .site-footer .container { padding-block: var(--s-9) var(--s-7); } @media (max-width: 768px) { .site-footer .container { padding-block: var(--s-8) var(--s-6); } } /* Scoped list reset — insurance against UA styles, no visual cost */ .site-footer ul[role="list"] { list-style: none; margin: 0; padding: 0; } /* Top: brand statement + link columns + the day's log recap */ .site-footer__top { row-gap: var(--s-7); margin-bottom: var(--s-8); } .site-footer__brand { grid-column: 1 / 5; } .site-footer__col--product { grid-column: 6 / 8; } .site-footer__col--account { grid-column: 8 / 10; } .site-footer__col--log { grid-column: 10 / 13; } @media (max-width: 768px) { .site-footer__brand { grid-column: 1 / -1; } .site-footer__col--product { grid-column: 1 / 7; } .site-footer__col--account { grid-column: 7 / 13; } .site-footer__col--log { grid-column: 1 / -1; } } .site-footer__word { font-family: var(--font-sans); font-size: var(--fs-lead); font-weight: 700; letter-spacing: 0.06em; color: var(--cream); max-width: none; } .site-footer__line { margin-top: var(--s-3); font-size: var(--fs-small); line-height: 1.6; color: var(--body); max-width: 36ch; } .site-footer__colhead { font-family: var(--font-mono); font-size: var(--fs-slug); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--tan-dim); margin-bottom: var(--s-4); max-width: none; } .site-footer__col li { margin-bottom: var(--s-2); } .site-footer__col a { font-size: var(--fs-small); color: var(--body); transition: color var(--t-micro) var(--ease-settle), background-size var(--t-tick) var(--ease-settle); /* the copper underline draws, never snaps */ } .site-footer__col a:hover { color: var(--cream); } /* The log recap — static mono ledger: time, dotted leader, entry. clock.js hides the frozen .ts + .leader at runtime; the copper origin tick makes the post-JS state read as a deliberate list, not orphans. */ .site-footer__log li { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); color: var(--tan-dim); transition: color var(--t-micro) var(--ease-settle); } .site-footer__log li::before { content: ""; flex: none; align-self: center; width: 8px; height: 1px; background: var(--copper-ox); } .site-footer__log li:hover { color: var(--tan); } .site-footer__log li:hover .site-footer__log-label { color: var(--cream); } .site-footer__log .ts { min-width: 5ch; color: var(--tan); } .site-footer__log .leader { flex: 1 1 auto; min-width: 16px; border-bottom: 1px dotted var(--tan-dim); opacity: 0.4; transform: translateY(-3px); } .site-footer__log-label { text-align: left; white-space: nowrap; } /* The title block itself — bordered drafting plate on the page ground. Inset surface: no edge-lit, no shadow, radius 0. */ .site-footer__block { display: grid; grid-template-columns: minmax(0, 1fr) 188px; border: var(--hairline); border-radius: var(--r-0); background: var(--ink-page); margin-bottom: var(--s-5); } .site-footer__blockleft { display: flex; flex-direction: column; min-width: 0; } /* Revision strip — REV A — 2026 — BUILT FOR THE TRADES */ .site-footer__rev { display: flex; flex-wrap: wrap; border-bottom: var(--hairline); } .site-footer__rev span { padding: var(--s-2) var(--s-4); border-left: var(--hairline); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } .site-footer__rev span:first-child { border-left: 0; } .site-footer__rev-desc { flex: 1 1 auto; } @media (max-width: 640px) { .site-footer__rev { display: grid; grid-template-columns: 1fr 1fr; } .site-footer__rev span { border-left: var(--hairline); border-top: var(--hairline); white-space: normal; } .site-footer__rev span:nth-child(-n+2) { border-top: 0; } .site-footer__rev span:nth-child(odd) { border-left: 0; } } /* Title-block cells */ .site-footer__cells { display: grid; grid-template-columns: 1.7fr 1.1fr 1fr 0.7fr 1.3fr; flex: 1 1 auto; margin: 0; } .site-footer__cell { padding: var(--s-4); border-left: var(--hairline); min-width: 0; } .site-footer__cell:first-child { border-left: 0; } .site-footer__cell dt { font-family: var(--font-mono); font-size: var(--fs-slug); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tan-dim); margin-bottom: var(--s-2); } .site-footer__cell dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-meta); line-height: 1.5; letter-spacing: 0.04em; color: var(--cream); font-variant-numeric: tabular-nums; } /* Seal cell — stamp use #3 of 3 sitewide. Oxidized ink, dried-stamp skew. */ .site-footer__sealcell { border-left: var(--hairline); display: grid; place-items: center; padding: var(--s-5); } .site-footer__seal { width: 136px; height: auto; color: var(--copper-ox); transform: rotate(-5deg); transition: transform 400ms var(--ease-settle), color 400ms var(--ease-settle); } /* Re-ink on hover — the dried stamp straightens and warms */ .site-footer__sealcell:hover .site-footer__seal { transform: rotate(-3deg); color: var(--copper); } .site-footer__seal text { font-family: var(--font-mono); font-size: 10px; font-weight: 700; fill: currentColor; } @media (max-width: 900px) { .site-footer__block { grid-template-columns: 1fr; } .site-footer__cells { grid-template-columns: 1fr 1fr; } .site-footer__cell { border-top: var(--hairline); } .site-footer__cell:nth-child(odd) { border-left: 0; } .site-footer__cell:nth-child(even) { border-left: var(--hairline); } .site-footer__cell:first-child, .site-footer__cell:nth-child(2) { border-top: 0; } /* Odd cell count: the Approved cell spans the full row, no orphan gap */ .site-footer__cell:last-child { grid-column: 1 / -1; } .site-footer__sealcell { border-left: 0; border-top: var(--hairline); } } /* Legal row — the sign-off */ .site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-4) var(--s-5); padding-top: var(--s-5); } .site-footer__legal p { max-width: none; } .site-footer__copyright { color: var(--body); } .site-footer__ig { font-size: var(--fs-small); color: var(--body); transition: color var(--t-micro) var(--ease-settle); } .site-footer__ig:hover { color: var(--cream); } .site-footer__next { letter-spacing: 0.1em; color: var(--tan-dim); } /* ═══════════ SECTION: hero PAID stamp (v7, founder rebuild) ═══════════ The hero showpiece payoff: after motion.js finishes printing the ticket (.is-printed at page release), the bear-logo PAID seal slams onto the paper and the green tick draws. Clipped to the sheet like the invoice seal was: ink exists only on paper. No-JS and reduced motion ship the seal pre-stamped at its rest angle. */ .hero-seal-clip { position: absolute; inset: 0; overflow: clip; border-radius: var(--r-paper); pointer-events: none; } .hero-seal { position: absolute; z-index: 2; left: -26px; bottom: 20px; width: 176px; height: 176px; transform: rotate(-7deg); } @media (max-width: 768px) { .hero-seal { width: 132px; height: 132px; left: -12px; bottom: 28px; } } /* Choreography: hidden while the ticket prints, then the one overshoot. */ .js .hero-ticket[data-print] .hero-seal { opacity: 0; transform: scale(1.5) rotate(-11deg); } .js .hero-ticket.is-printed .hero-seal { animation: stamp-slam var(--t-stamp) var(--ease-stamp) both; animation-delay: 1800ms; /* after items + digit count-up settle */ } /* Green tick self-sequences 240ms after the slam lands. */ .js .hero-seal .gp-tick { stroke-dashoffset: 1; transition: stroke-dashoffset var(--t-tick) var(--ease-settle); transition-delay: calc(1800ms + var(--t-stamp) + 240ms); } .js .hero-ticket.is-printed .hero-seal .gp-tick { stroke-dashoffset: 0; } @media (prefers-reduced-motion: reduce) { .js .hero-ticket[data-print] .hero-seal { opacity: 1; animation: none; transform: rotate(-7deg); } .js .hero-seal .gp-tick { stroke-dashoffset: 0; transition: none; } } /* ═══════════ SECTION: steps (v7, compact method strip) ═══════════ Four moves on one hairline-ruled strip: photo, quote, accept, paid. Replaces the long chapter narrative (now on how-it-works.html). */ .steps__title { margin-top: var(--s-6); font-size: var(--fs-h2, clamp(28px, 2.2vw + 20px, 44px)); font-weight: 700; letter-spacing: -0.03em; color: var(--cream); } .steps__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); margin: var(--s-7) 0 0; padding: 0; list-style: none; } @media (max-width: 960px) { .steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .steps__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } } .step { min-width: 0; padding-top: var(--s-4); border-top: var(--hairline); } .step__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin: 0; max-width: none; } .step__num { font-family: var(--font-mono); font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.18em; color: var(--copper); font-variant-numeric: tabular-nums; } .step__t { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.12em; color: var(--tan-dim); font-variant-numeric: tabular-nums; } .step__name { margin-top: var(--s-4); font-size: clamp(19px, 0.7vw + 15px, 23px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; color: var(--cream); } .step__copy { margin-top: var(--s-3); font-size: var(--fs-small); line-height: 1.6; color: var(--body); max-width: 30ch; } .steps__more { margin-top: var(--s-7); } /* ═══════════ SECTION: compact footer (v7) ═══════════ Short footer: logo row + two link columns, no title block. */ .site-footer__brandrow { display: inline-flex; align-items: center; gap: var(--s-3); background-image: none; /* defuse the global underline draw */ color: var(--cream); } .site-footer__brandrow:hover { color: var(--cream); } .site-footer__logo { width: 40px; height: 40px; flex: none; border-radius: 8px; object-fit: contain; } .site-footer__brandrow .site-footer__word { margin: 0; } @media (min-width: 769px) { .site-footer--compact .site-footer__col--product { grid-column: 7 / 10; } .site-footer--compact .site-footer__col--account { grid-column: 10 / 13; } } /* Mobile: the shared .grid drops to 4 explicit columns; the inherited 1/7 + 7/13 spans mint implicit tracks and crush the brand column. Re-place all three on the real 4-col grid. */ @media (max-width: 768px) { .site-footer--compact .site-footer__brand { grid-column: 1 / -1; } .site-footer--compact .site-footer__col--product { grid-column: 1 / 3; } .site-footer--compact .site-footer__col--account { grid-column: 3 / 5; } } .site-footer--compact .site-footer__top { margin-bottom: var(--s-7); } .site-footer--compact .site-footer__legal { border-top: var(--hairline); } /* ═══════════ SECTION: epilogue founder link (v7) ═══════════ */ .epilogue__founder { margin-top: var(--s-5); }