/* ══════════════════════════════════════════════════════════════════════════
Ink Indigo & Brass — design-system tokens and component classes.
Copied from the design prototypes' own tokens.css, which was the
source of truth for the system's look. Two deliberate differences from
that file, both to match what the approved design actually needs:
1. The @import of Google Fonts is gone. The reference pages load their
fonts with a preconnected in instead, and so do we
(see partials/head.php) — an @import inside a stylesheet cannot
start downloading until the stylesheet itself has arrived, which
costs a round trip on the one asset that blocks first paint.
2. That requests Figtree 400;500;600;700;800 and IBM Plex Mono
400;500 as well as Caprasimo. The reference sheet's own import
stops at Figtree 700, but the design uses 800 throughout for
button faces and card titles, and Plex Mono for every kicker,
caption and footer line.
The colour values below are the Ink Indigo & Brass theme; the geometry
(space, radius, type scale) and every component rule are the reference
file unchanged. Retune the system here; site-specific components live in
components.css and layer on top.
── how the theme's named roles map onto these ramps ──
The theme spec names roles (shell, accent, signal, ground); this sheet
has three 100–900 ramps. They are mapped by ROLE, not by matching old
hex to new hex, because this site assigns some ramp steps differently
from the prototype the spec was written against:
--color-accent-2-* the indigo shell. 900 band, 800 raised,
700 rule, 300 muted-on-shell, 100 on-shell.
--color-accent-* brass. 400 action, 300 hover, 200 soft,
700 soft-ink, 900 ink-on-brass.
--color-neutral-* the porcelain ground and the ink on it.
--color-signal clay. Marks and bullets only — never a fill
behind a label, per the theme's own rule 4.
Four stops the spec does not name are interpolated to keep each ramp
monotonic: accent-2-200/500/600 and neutral-400/500/800, plus
accent-100/500/600/800. They are only used where a mid-tone is wanted,
never for text on a coloured ground.
══════════════════════════════════════════════════════════════════════ */
:root {
--color-bg: #f7f5f0;
--color-surface: #eae5db;
--color-text: #1a1a22;
/* Brass. Actions, links, focus and the alternating mark that is not
clay. Text on it is always --color-accent-900, never the ground. */
--color-accent: #d9a03c;
--color-accent-2: #d9a03c;
/* Clay. The theme reserves this for marks and bullets — it must never
become a button fill or it competes with brass for the eye. */
--color-signal: #c05f4a;
--color-signal-soft: #f6ddd6;
--color-divider: color-mix(in srgb, #1a1a22 16%, transparent);
/* Tonal ramps. Each is monotonic in lightness, so the same step of any
role sits at roughly the same visual value as the others. */
--color-neutral-100: #f7f5f0;
--color-neutral-200: #eeeae1;
--color-neutral-300: #d8d1c4;
--color-neutral-400: #b9b2a6;
--color-neutral-500: #9d968b;
/* The theme's --text-mono is #8a869a. That is 2.81:1 on the card
surface and 3.24:1 on the ground — short of the 4.5:1 that body-sized
text needs, and this step carries the quote form's field hints, the
"or" divider and the FAQ chevron. Darkened to the lightest value that
clears 4.5:1 on the card while staying a distinct step above
--color-neutral-700, with the cool mono hue kept. */
--color-neutral-600: #676375;
--color-neutral-700: #625f6e;
--color-neutral-800: #46434f;
--color-neutral-900: #2b2933;
--color-accent-100: #fdf5e6;
--color-accent-200: #f7e7c6;
--color-accent-300: #ecba5e;
--color-accent-400: #d9a03c;
--color-accent-500: #bd8529;
--color-accent-600: #96681c;
--color-accent-700: #6b4a12;
--color-accent-800: #4d340d;
--color-accent-900: #33230a;
--color-accent-2-100: #f2f1f6;
--color-accent-2-200: #d6d8e6;
--color-accent-2-300: #b9bcd4;
--color-accent-2-400: #9095b4;
--color-accent-2-500: #797fa3;
--color-accent-2-600: #616891;
--color-accent-2-700: #4a5280;
--color-accent-2-800: #2a3154;
--color-accent-2-900: #1b2039;
--font-heading: "Caprasimo", system-ui, sans-serif;
--font-heading-weight: 400;
--font-body: "Figtree", system-ui, sans-serif;
--space-1: 4.4px;
--space-2: 8.8px;
--space-3: 13.2px;
--space-4: 17.6px;
--space-6: 26.4px;
--space-8: 35.2px;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 28px;
/* Elevation — derived from the ground: soft ink-tinted shadows on a
light theme, a hairline edge + ambient darkness on a dark one. */
/* Tinted with the shell indigo rather than with the ground's ink — the
theme specifies the card shadow as rgba(27,32,57,0.22), which is
#1b2039 at 22%, and --shadow-lg is that shadow. */
--shadow-sm: 0 1px 2px color-mix(in srgb, #1b2039 14%, transparent);
--shadow-md: 0 3px 10px color-mix(in srgb, #1b2039 16%, transparent);
--shadow-lg: 0 12px 32px color-mix(in srgb, #1b2039 22%, transparent);
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.washed{filter:saturate(0.78) contrast(0.94)}
/* ══════════════════════════════════════════════════════════════════════════
Components — built with the tokens above. Plain CSS
on plain HTML: no JavaScript, no build step. Each class is documented in
readme.md and demonstrated in foundations/ and components/.
══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
font-size: 11px; margin-top: var(--space-1);
color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
box-shadow: 0 0 0 5px var(--color-accent-2-900);
}
::selection { background: var(--color-accent-200); }
/* — rules — */
.hr {
height: 1px; border: 0; margin: var(--space-4) 0;
background: var(--color-divider);
}
/* — buttons — */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
cursor: pointer; text-decoration: none;
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
the pair sits side by side in sign-up rows */
background: transparent; border: 1px solid transparent;
padding: var(--space-2) calc(var(--space-3) * 1.2);
border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-accent-900); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }
/* — forms — */
.field > label {
display: block; font-size: 12px; margin-bottom: 5px;
color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
background: var(--color-surface);
border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
width: 16px; height: 16px; flex: none; border-radius: 50%;
border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
border-color: var(--color-accent); background: var(--color-accent);
box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
display: inline-flex; overflow: hidden;
border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-accent-900); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* — cards — */
.card {
display: flex; flex-direction: column; gap: var(--space-2);
padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
display: flex; align-items: center; gap: 6px; font-size: 11px;
color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }
/* — tags — */
.tag {
display: inline-flex; align-items: center; font-size: 11px;
letter-spacing: 0.02em; padding: 3px 10px;
border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
/* — navigation — */
.nav {
display: flex; align-items: center; gap: var(--space-4);
padding: var(--space-3) var(--space-4);
border-bottom: none;
}
.nav-brand {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }
/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
color: color-mix(in srgb, var(--color-text) 60%, transparent);
padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
padding: var(--space-2);
border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
/* — dialog — */
.dialog-backdrop {
position: fixed; inset: 0; display: grid; place-items: center;
padding: var(--space-4);
background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
padding: var(--space-4); border-radius: var(--radius-lg);
background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
/* — rounded frame: everything softens, small controls go pill — */
.card, .dialog { border-radius: calc(var(--radius-lg) * 1.15); }
.btn, .tag, .seg, .input { border-radius: 999px; }
.input { padding-inline: 14px; }
/* ══════════════════════════════════════════════════════════════════════════
Site additions — the few values the Organic sheet has no opinion about
because they are layout facts of this site rather than system tokens.
Kept here so components.css never hardcodes one.
══════════════════════════════════════════════════════════════════════ */
:root {
/* Plex Mono carries every kicker, caption and footer line in the design.
The handoff calls it a page-level addition rather than a system token,
so it is named here and never referenced by a raw font stack. */
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* The brand title beside the logo (partials/brand.php) — a geometric sans
that stays crisp at the 9.5-22px the lockup uses. */
--font-brand: "Outfit", "Figtree", system-ui, sans-serif;
/* Content cap and gutters, from the handoff's Global geometry. */
--container-max: 1160px;
--gutter-desktop: 40px;
--gutter-tablet: 28px;
--gutter-mobile: var(--space-6);
/* Fixed bar heights, also from the handoff. base.css uses the desktop
value for scroll-padding so in-page anchors clear the bar. */
--bar-height: 84px;
--bar-height-tablet: 72px;
--bar-height-mobile: 68px; /* 14px padding + the 40px burger */
/* Section rhythm. */
--section-gap: 96px;
--section-gap-tablet: 72px;
--band-pad: 88px;
--band-pad-tablet: 64px;
/* The design's one stroke width, used for borders and icon strokes alike. */
--stroke: 2.75px;
/* Motion: the handoff allows 150ms background transitions on buttons and
the drawer's 280ms slide. Nothing else animates. */
--transition-fast: 150ms ease;
--drawer-ease: cubic-bezier(.32, .72, 0, 1);
--drawer-duration: 280ms;
/* Stacking, from the handoff: the drawer sits under the fixed bar. */
--z-sticky: 10;
--z-drawer: 25;
--z-bar: 30;
--z-skip: 40;
}