/* ========================================================================== Alembic Marketing — shared stylesheet (features / technology) The marketing surface speaks the product's Broadsheet language: warm ink, Fraunces display, DM Sans body, IBM Plex Mono data, green action, blue reserved for the logo mark only. Light + dark themes, reduced-motion honored. ========================================================================== */ :root { /* Logo only — never buttons, never accents */ --alembic: #1F7AD4; /* Action green — every CTA, link accent, focus ring */ --action: #4A8B6A; --action-hover: #3E7A5B; /* Button FILLS only. --action stays the accent-text colour (it must read on paper, which is why dark mode lightens it — and why white could never read on it: 3.23:1, and 2.67:1 on the dark hover green, under even the 3:1 large-text floor). Two jobs, two tokens. These are identical in both modes: a filled button carries its own background, so it has no reason to follow the theme. White on #3E7A5B = 5.07:1, on #35684E = 6.48:1. */ --action-surface: #3E7A5B; --action-surface-hover: #35684E; /* Accent green as TEXT. The third job: it has to read on paper/card/well, which the brand green does not in light mode (3.56 on the well, 3.84 on paper). Light lands on the same #35684E as the button hover, so light mode still only carries two greens. Dark's existing #5C9C7C already cleared this (5.25 worst) and is unchanged. Large display text (the contact h1 em at 38-64px) keeps plain --action — 3:1 applies there and brand wins. So: --action-surface fills, --action-text reads, --action decorates. */ --action-text: #35684E; --action-glow: rgba(74, 139, 106, 0.2); --action-wash: rgba(74, 139, 106, 0.08); /* Warm ink scale (matches product --color-ink-*) */ --ink-900: #16130E; --ink-700: #3D3730; --ink-600: #655D53; --ink-500: #7A7168; --ink-400: #9B9289; --ink-300: #B5ADA5; --ink-200: #CFC9C2; --ink-100: #E6E2DD; --ink-50: #F2F0ED; /* Surfaces */ --paper: #FAF9F7; --card: #FFFFFF; --card-border: var(--ink-100); /* E20: mockup-internal hairlines only. --ink-100 is --card-border and paints 20+ hairlines across seven pages, so it cannot move; but at 1.12 in dark the mockups lost their internal divisions entirely — a section card with an outer edge and no cell walls. Dark needs --ink-300's value (1.72); light wants --ink-200 (1.64), because light --ink-300 reads as a rule rather than a hairline. Hence a token of its own. */ --mock-hairline: var(--ink-200); --well: #F2F0ED; /* Semantic (WCAG-safe on card surfaces) */ --ok-text: #1E7E34; --ok-bg: #E6F4EA; --warn-text: #8B6914; --warn-bg: #FEF3CD; --bad-text: #C5221F; --bad-bg: #FCE8E6; /* Copper — second brand voice (Prism round 2, §2/§7). Alembic is named after a copper still and had never used copper before this pass. Semantic split from --action: green is what Alembic does, copper is what today costs you. Measured 2026-08-13, both clear 4.5:1 as body text: light #A0522D is 5.34:1 on --paper / 5.62 on --card / 4.94 on --well. Allowed ONLY on pain/limitations mono eyebrows, the pull-quote mark + left rule, and 01/02/03 numerals in pain/capability lists. Banned on anything interactive, anything inside .pm-* mockups (amber lives there — copper and amber must never sit adjacent), and any status meaning. Copper measured against --action-text is 1.15:1 — never nest one inside the other. */ --copper: #A0522D; /* Type */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', monospace; /* Motion */ --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Dark-code panel (used by the API visual in both themes) */ --code-bg: #14110D; --code-border: #2A251F; } @media (prefers-color-scheme: dark) { :root { --ink-900: #ECE9E4; --ink-700: #CFC9C2; --ink-600: #9B9289; /* E0: re-spaced from #7A7168 (3.55 on dark --card — under the floor) so the mockups have a legible fourth tier in dark mode. Stays darker than dark --ink-600 #9B9289, so the ramp order holds. Blast radius checked: `var(--ink-500)` had exactly two consumers repo-wide before this pass and both were dead `.app-check*` rules. */ --ink-500: #8C8379; --ink-400: #655D53; --ink-300: #4A4239; --ink-200: #302A24; --ink-100: #2A251F; --mock-hairline: #4A4239; /* = dark --ink-300 */ --ink-50: #231F1A; --paper: #14110D; --card: #1F1C18; --card-border: #2A251F; --well: #1B1814; --action: #5C9C7C; --action-hover: #6FAB8C; --action-surface: #3E7A5B; --action-surface-hover: #35684E; /* #66A585 not #5C9C7C: --action-text lands on --action-wash in the featured compare column, which composites to #262B24 over --card. #5C9C7C measured 4.47 there — short by 0.03. This clears it at 5.01 and improves every plain-surface case too. */ --action-text: #66A585; --action-glow: rgba(92, 156, 124, 0.25); --action-wash: rgba(92, 156, 124, 0.12); --ok-text: #7DC79A; --ok-bg: rgba(52, 168, 83, 0.14); --warn-text: #D9B45B; --warn-bg: rgba(217, 180, 91, 0.12); --bad-text: #E08A84; --bad-bg: rgba(197, 34, 31, 0.16); /* Dark copper — measured 2026-08-13: 5.63:1 on --paper / 5.07 on --card / 5.29 on --well. */ --copper: #C9784E; --code-bg: #100E0B; --code-border: #2A251F; } } /* ── Base ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink-900); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--action-glow); } /* ── Nav ─────────────────────────────────────────────────────────────────── */ /* The chrome placeholders must not form a box. `position: sticky` is constrained by its containing block, and these wrappers are exactly the height of the element they hold — so a sticky nav inside one has zero travel and scrolls away permanently. Before this session the nav was a direct child and stuck correctly; moving it into
silently broke that on all five pages. `display: contents` removes the wrapper from the box tree so the nav's containing block is again, with no layout shift. */ [data-marketing-nav], [data-marketing-footer] { display: contents; } /* CLS guard: until marketing-chrome.js injects the real