markup * and the .no-hatch / .divider-dashed / .hatch-band / .rail-end classes. * ═══════════════════════════════════════════════════════════════════════════ */ @layer base { * { box-sizing: border-box; } html { scroll-behavior: smooth; position: relative; /* clip on too (frame.css): the rail pseudos live on html, so body's overflow-x can't clip them — without this, viewports narrower than the 1360px frame get horizontal pan. clip, not hidden, so html doesn't become a scroll container (which would kill position:sticky). */ overflow-x: clip; } html, body { margin: 0; padding: 0; } body { background: var(--color-background); color: var(--color-foreground); font-family: var(--font-ui); /* 18px base — the sitewide prose size (Round 12). Card body opts down to var(--text-card) explicitly; nothing else overrides this. */ font-size: var(--text-body); line-height: 1.55; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* clip, NEVER hidden. `overflow-x: hidden` + `overflow-y: visible` makes overflow-y compute to `auto`, so becomes its own scroll container. With ~1px of overflow it swallows the first wheel/touch gesture and never chains to the viewport — the double-scroll bug (Round 12). `clip` forbids horizontal overflow without creating a scroll box, and keeps sticky alive. */ overflow-x: clip; position: relative; min-height: 100dvh; } /* No mobile root-step: the prototype declares sizes in px so the scale can't fracture between breakpoints (design.md §2). Shrinking the root here would reintroduce exactly that. */ /* Diagonal-hatched outer margins — blueprint / spec-sheet feel. Very low * contrast so it reads as material, not noise. The 1px rail itself is drawn * by html::before/after (below) so it survives the no-hatch mask. */ body::before, body::after { content: ""; position: absolute; top: var(--rails-top, 0); bottom: 0; width: max(0px, calc(50% - 680px)); background-image: repeating-linear-gradient( 135deg, transparent 0, transparent 9px, rgba(14, 16, 20, 0.045) 9px, rgba(14, 16, 20, 0.045) 10px ); z-index: 0; pointer-events: none; } body::before { left: 0; } body::after { right: 0; } /* Dedicated 1px vertical rails at the 1280px content edges. z-index above * the no-hatch mask so the verticals stay visible even in no-hatch zones. */ html::before, html::after { content: ""; position: absolute; top: var(--rails-top, 0); bottom: 0; width: 1px; background: var(--line); z-index: 5; pointer-events: none; } html::before { left: calc(50% - 680px); } html::after { right: calc(50% - 680px); } /* Below the 1360px frame the rails sit at/past the viewport edge — drop them, else they force ~48px of horizontal overflow (frame.css). */ @media (max-width: 1361px) { html::before, html::after { content: none; } } /* Horizontal hairline between TOP-LEVEL page sections only. Scoped to `body > section` (frame.css) so nested sub-sections don't draw their own divider and double up against the parent's line. Footer's top border comes from footer.css — NOT here. */ section, footer.foot { position: relative; } body > section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); z-index: 4; pointer-events: none; } /* First section under the sticky nav reuses the nav's bottom border. */ body > .nav + section::before { display: none; } /* `.no-rule` opts a section out of its own top hairline AND the next section's — a band that sits clean between neighbours (e.g. the ticker). */ body > section.no-rule::before, body > section.no-rule + section::before { display: none; } /* `.rule-dashed` forces the dotted divider variant, and re-shows it even after a preceding `.no-rule` (!important beats the no-rule display:none). Used above the CTA band. */ body > section.rule-dashed { border-top: 0; } body > section.rule-dashed::before { display: block !important; background: repeating-linear-gradient( to right, var(--line-strong) 0, var(--line-strong) 5px, transparent 5px, transparent 10px ) !important; } /* No-hatch sections — paint white over the body hatching in the outer * margins (rails stay). Alternate roughly every other section so the * margins breathe. */ body > section.no-hatch::after { content: ""; position: absolute; inset: 0; background-color: transparent; background-image: linear-gradient(var(--paper), var(--paper)), linear-gradient(var(--paper), var(--paper)); background-size: max(0px, calc(50% - 681px)) 100%, max(0px, calc(50% - 681px)) 100%; background-position: left top, right top; background-repeat: no-repeat; z-index: 2; pointer-events: none; } /* (The section hairline is z-index 4 — already above the z-index 2 no-hatch mask, so it needs no override.) */ /* Hatch hand-off band — short full-bleed hatched strip after the hero. */ section.hatch-band { position: relative; height: 88px; background-color: var(--paper); } section.hatch-band::before { background: var(--line) !important; } section.hatch-band::after { content: ""; position: absolute; top: 0; bottom: 0; left: max(0px, calc(50% - 680px)); right: max(0px, calc(50% - 680px)); background-image: repeating-linear-gradient( 135deg, transparent 0, transparent 9px, rgba(14, 16, 20, 0.045) 9px, rgba(14, 16, 20, 0.045) 10px ); pointer-events: none; } /* Closing rule after the footer. */ .rail-end { position: relative; height: 0; } .rail-end::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); z-index: 2; pointer-events: none; } /* Headings — Hanken, sentence case, tight tracking. */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-foreground); margin: 0; text-wrap: balance; } p { text-wrap: pretty; } h1 { font-size: var(--text-h1); line-height: var(--text-h1--line-height); letter-spacing: var(--text-h1--letter-spacing); font-weight: var(--text-h1--font-weight); } h2 { font-size: var(--text-h2); line-height: var(--text-h2--line-height); letter-spacing: var(--text-h2--letter-spacing); font-weight: var(--text-h2--font-weight); } h3 { font-size: var(--text-h3); line-height: var(--text-h3--line-height); letter-spacing: var(--text-h3--letter-spacing); font-weight: var(--text-h3--font-weight); } h4 { font-size: var(--text-h4); line-height: var(--text-h4--line-height); letter-spacing: var(--text-h4--letter-spacing); font-weight: var(--text-h4--font-weight); } /* inherits color, no decoration — nav/buttons/cards override per-context. */ a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* Lucide icon default stroke — per-icon stroke-width={…} still wins. */ .lucide { stroke-width: 1.75; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } } /* ═══════════════════════════════════════════════════════════════════════════ * COMPONENTS — cross-cutting semantic classes (buttons, layout shell, the * accent text treatment). Component-specific CSS lives in each .astro file. * ═══════════════════════════════════════════════════════════════════════════ */ @layer components { /* Layout shell — 1280px content box, inset 40px inside the 1360px rail frame. Content is NEVER flush on the rails: the 40px padding is a real gutter that keeps the lines clear of headings, cards and columns. Do NOT raise max-width to 90rem/1440px to push content onto the rails — that regressed the whole prototype once (2026-07-07) and reads cramped. See design.md §"Container". */ /* Verbatim from the prototype (_shared/shell.css). Horizontal gutter ONLY — the 40px inset from the 1360px rail frame. Sections (.phero, .psec, …) own their vertical padding; the container never adds any. px, not rem, so the mobile root-step can't fracture the gutter. */ .container-page { position: relative; z-index: 1; max-width: 1360px; /* rail frame; -2×40px padding = 1280px inset content */ margin: 0 auto; padding: 0 40px; } @media (max-width: 700px) { .container-page { padding: 0 20px; } } /* Homepage container (prototype's `.container`, renamed to avoid colliding with Tailwind's own `.container` utility). Parallels `.container-page` but carries 72px vertical padding — home sections don't set their own. */ .container { position: relative; max-width: 1360px; margin: 0 auto; padding: 72px 40px; } @media (max-width: 960px) { .container { padding-left: 24px; padding-right: 24px; } } @media (max-width: 520px) { .container { padding-left: 16px; padding-right: 16px; } } /* ── Buttons ──────────────────────────────────────────────────────────── * ONE button, one size, sitewide. Flat #337750; hover is a single lighter * step to #3c855d. Two variants only: primary (filled) and ghost (hairline). * * The 2-stop @property gradient this used to carry was REMOVED (Round 10): * its light-top/dark-bottom endpoints read as thin "border bands" at the * pill's rounded top and bottom edges. Do not reintroduce a gradient here. * * There is NO arrow. `.arr` is hidden globally so any legacy markup that * still ships a → glyph inside a button renders nothing. Arrows belong on * inline text links and the bento tile chip — never on a button. * * Height is 40px (12 + 12 padding + 14px label at line-height 1). The * `line-height: 1` is load-bearing: without it the label inherits body 1.55 * and the pill grows to ~48px. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--pill); font: 500 0.875rem / 1 var(--font-ui); /* 14px / lh 1 → 40px tall */ border: 1px solid transparent; cursor: pointer; color: inherit; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .btn-primary { color: var(--paper); background-color: var(--btn-fill); background-image: none; /* Keep .btn's 1px transparent border — do NOT `border: 0`. Dropping it makes the primary 38px while the ghost beside it stays 40px, and the pair visibly misaligns in a CTA row. Every button is 40px. */ border-color: transparent; } .btn-primary:hover { background-color: var(--btn-fill-hover); } .btn-ghost { color: var(--ink); border-color: var(--line-strong); background: transparent; } .btn-ghost:hover { border-color: var(--ink); } /* No arrows on buttons — kill any that legacy markup still carries. */ .btn .arr { display: none; } /* Nav CTA — visually identical to .btn-primary (same 12/22 padding, 14px/500 * label, pill, flat #337750 → #3c855d). It is a separate class only because * the shared header markup predates the button component; treat it as the * same button. */ .nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--pill); color: var(--paper); font: 500 0.875rem / 1 var(--font-ui); /* 14px */ border: 1px solid transparent; cursor: pointer; background-color: var(--btn-fill); transition: background-color 0.25s var(--ease); } .nav-cta:hover { background-color: var(--btn-fill-hover); } /* Accent text — warm-verdant gradient clipped to glyphs, slow drift, no * hover. One per display headline, max (hero + CTA pattern). */ .hl-green { background-image: var(--grad-verdant); background-size: 320% 320%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: verdant-drift 22s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .hl-green { animation: none; } } /* Entry reveal — mark elements [data-rise]; they sit hidden and rise into * place when the nearest .is-playing ancestor scrolls into view (the * IntersectionObserver in the layout adds .is-playing once, then unobserves). * Stagger siblings with an inline --rise-delay. See design.md → Motion. * * This fires AUTOMATICALLY on scroll — it is not a hover interaction. Nothing * in the system waits for a hover to animate. */ .reveal [data-rise] { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--rise-delay, 0s); } .reveal.is-playing [data-rise] { opacity: 1; transform: translateY(0); } /* Replay escape hatch. The reveal is a TRANSITION, and transitions are * symmetric: simply removing .is-playing animates the element back OUT over * 0.6s rather than resetting it, so re-adding the class a frame later catches * opacity mid-fade (~0.95) and nothing visibly replays. To restart, suppress * the transition for one frame so the element snaps to the hidden state, then * release it: * * el.classList.add('no-anim') * el.classList.remove('is-playing') * void el.offsetWidth // flush — now hidden, instantly * el.classList.remove('no-anim') * el.classList.add('is-playing') // transitions in */ .reveal.no-anim [data-rise] { transition: none !important; } @media (prefers-reduced-motion: reduce) { .reveal [data-rise] { opacity: 1; transform: none; transition: none; } } /* Eyebrow — DEPRECATED (eyebrows removed Round 4). Retained so legacy * markup doesn't break; flagged "do not use" in design.md. */ .eyebrow { font-size: var(--text-eyebrow); font-weight: var(--text-eyebrow--font-weight); letter-spacing: var(--text-eyebrow--letter-spacing); text-transform: uppercase; color: var(--ink-muted); } /* Forms — foundational field set. The site has no general forms; this is the * minimal kit (based on the demo-request form): paper rectangles, hairline * border, accent focus ring, warm-deep error state. Shared across the * FormField / TextInput / SelectInput / Textarea / Checkbox components. */ .field-label { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 6px; } .field-label .opt { font-size: 12px; font-weight: 400; color: var(--ink-subtle); } .field-input { width: 100%; border: 1px solid var(--line-strong); background: var(--paper); border-radius: var(--radius-md); padding: 11px 14px; font-family: inherit; font-size: 15px; line-height: 1.3; color: var(--ink); transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); } .field-input::placeholder { color: var(--ink-subtle); } .field-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(47, 110, 75, 0.12); } .field-input:disabled { background: var(--paper-sunken); color: var(--ink-subtle); cursor: not-allowed; } .field-input[aria-invalid="true"] { border-color: var(--color-role-warm-deep); } .field-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(196, 90, 46, 0.12); } .field-hint { margin-top: 6px; font-size: 12.5px; color: var(--ink-subtle); } .field-error { margin-top: 6px; font-size: 12.5px; color: var(--color-role-warm-deep); } .field-select-wrap { position: relative; } .field-select-wrap select { appearance: none; padding-right: 38px; cursor: pointer; } .field-select-wrap .chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-subtle); } .field-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.45; color: var(--ink-soft); } .field-check input { width: 18px; height: 18px; accent-color: var(--accent); margin-top: 1px; flex: 0 0 auto; } }