/* ============================================================
Alkali Partners — Design System Tokens
Single source of truth for color, type, spacing, radii, shadow.
Import this file at the top of any HTML artifact.
============================================================ */
/* ---------- Fonts via Google Fonts ----------
Add this to :
*/
:root {
/* ---------- COLOR: Primary ---------- */
--ink: #01153F; /* navy, aligned to the mark (Brand Direction · The Balance) */
--midnight: #000B26; /* deepest background, aligned to the mark */
--bone: #F4EFE4; /* warm editorial paper */
--paper: #FAF8F3; /* lighter neutral */
--white: #FFFFFF;
/* ---------- COLOR: Accent ---------- */
--brass: #A8884A; /* sophisticated metallic, the DEFAULT accent / voice */
--brass-dark: #87683A;
--brass-tint: #D9C6A0;
--vermilion: #C8553D; /* negative / loss call-outs, used sparingly */
/* ---------- COLOR: Amplifier (The Balance) ----------
Blue is the second accent — the "amplified moment."
RULE: light grounds only (bone/paper/white). NEVER on ink/midnight navy.
On navy, the cool pop is --blue-cyan, not --blue. */
--blue: #0083FF; /* primary amplifier — light grounds only */
--blue-deep: #0067CC; /* hover/pressed for blue actions */
--blue-cyan: #06B5EE; /* the only cool pop permitted on navy */
--action-light: var(--blue); /* semantic: primary action on a light ground */
/* ---------- COLOR: Neutrals ---------- */
--slate-900: #0F172A;
--slate-700: #334155;
--slate-500: #64748B;
--slate-300: #CBD5E1;
--slate-200: #E5E7EB;
--slate-100: #F1F5F9;
/* ---------- COLOR: Data signal (charts only) ---------- */
--data-blue: #1E5BD8;
--data-blue-light: #5B9DFF;
--data-positive: #2A7F62;
--data-negative: #A33A2A;
/* ---------- COLOR: Semantic ---------- */
--bg: var(--paper);
--bg-elevated: var(--white);
--bg-inverse: var(--ink);
--fg: var(--slate-900);
--fg-muted: var(--slate-500);
--fg-secondary: var(--slate-700);
--fg-on-dark: var(--bone);
--fg-on-dark-muted: rgba(244, 239, 228, 0.65);
--border: var(--slate-200);
--border-strong: var(--slate-300);
--border-on-dark: rgba(244, 239, 228, 0.12);
--accent: var(--brass);
--accent-text: var(--brass-dark);
/* ---------- TYPE: Family ---------- */
--font-display: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
--font-body: "Geist", "Helvetica Neue", system-ui, -apple-system, sans-serif;
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", monospace;
/* ---------- TYPE: Scale (perfect fourth / 1.333) ---------- */
--text-xs: 11px;
--text-sm: 13px;
--text-base: 15px;
--text-lg: 17px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 32px;
--text-4xl: 42px;
--text-5xl: 56px;
--text-6xl: 74px;
--text-7xl: 96px;
/* ---------- TYPE: Line heights ---------- */
--lh-tight: 1.05;
--lh-snug: 1.18;
--lh-normal: 1.5;
--lh-relaxed: 1.65;
/* ---------- TYPE: Tracking ---------- */
--track-tight: -0.02em;
--track-snug: -0.01em;
--track-normal: 0;
--track-wide: 0.04em;
--track-eyebrow: 0.12em; /* small caps / eyebrows */
/* ---------- TYPE: Weight ---------- */
--w-light: 300;
--w-regular: 400;
--w-medium: 500;
--w-semibold: 600;
--w-bold: 700;
/* ---------- SPACING (4pt scale) ---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
--space-40: 160px;
/* ---------- RADII ---------- */
--radius-none: 0;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
/* ---------- SHADOWS ---------- */
--shadow-none: none;
--shadow-1: 0 1px 2px rgba(10, 31, 68, 0.06);
--shadow-2: 0 8px 24px rgba(10, 31, 68, 0.08);
--shadow-3: 0 24px 60px rgba(10, 31, 68, 0.12);
/* ---------- MOTION ---------- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 160ms;
--dur-base: 240ms;
--dur-slow: 480ms;
--dur-story: 1000ms;
/* ---------- LAYOUT ---------- */
--max-w: 1440px;
--gutter: 96px;
--gutter-md: 48px;
--gutter-sm: 24px;
}
/* ============================================================
Semantic typography classes
Use these where possible. They encode the system.
============================================================ */
.t-eyebrow {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--w-medium);
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
color: var(--brass);
}
.t-display-xl {
font-family: var(--font-display);
font-size: var(--text-7xl);
line-height: var(--lh-tight);
letter-spacing: var(--track-tight);
font-weight: var(--w-regular);
font-optical-sizing: auto;
}
.t-display-lg {
font-family: var(--font-display);
font-size: var(--text-6xl);
line-height: var(--lh-tight);
letter-spacing: var(--track-tight);
font-weight: var(--w-regular);
font-optical-sizing: auto;
}
.t-display-md {
font-family: var(--font-display);
font-size: var(--text-5xl);
line-height: var(--lh-snug);
letter-spacing: var(--track-snug);
font-weight: var(--w-regular);
}
.t-display-sm {
font-family: var(--font-display);
font-size: var(--text-4xl);
line-height: var(--lh-snug);
letter-spacing: var(--track-snug);
font-weight: var(--w-regular);
}
.t-h1 {
font-family: var(--font-display);
font-size: var(--text-4xl);
line-height: var(--lh-snug);
letter-spacing: var(--track-snug);
font-weight: var(--w-regular);
}
.t-h2 {
font-family: var(--font-display);
font-size: var(--text-3xl);
line-height: var(--lh-snug);
font-weight: var(--w-regular);
}
.t-h3 {
font-family: var(--font-body);
font-size: var(--text-xl);
line-height: var(--lh-snug);
font-weight: var(--w-semibold);
letter-spacing: var(--track-snug);
}
.t-h4 {
font-family: var(--font-body);
font-size: var(--text-lg);
line-height: var(--lh-snug);
font-weight: var(--w-semibold);
}
.t-body-lg {
font-family: var(--font-body);
font-size: var(--text-lg);
line-height: var(--lh-relaxed);
font-weight: var(--w-regular);
color: var(--fg-secondary);
}
.t-body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--lh-normal);
font-weight: var(--w-regular);
color: var(--fg);
}
.t-body-sm {
font-family: var(--font-body);
font-size: var(--text-sm);
line-height: var(--lh-normal);
font-weight: var(--w-regular);
color: var(--fg-secondary);
}
.t-caption {
font-family: var(--font-mono);
font-size: var(--text-xs);
line-height: var(--lh-normal);
letter-spacing: var(--track-wide);
text-transform: uppercase;
color: var(--fg-muted);
}
.t-num {
font-family: var(--font-display);
font-weight: var(--w-regular);
font-feature-settings: "lnum", "tnum";
font-variant-numeric: lining-nums tabular-nums;
}
.t-num-mono {
font-family: var(--font-mono);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
}
/* ============================================================
Reset / base resets used across artifacts
============================================================ */
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--fg);
background: var(--bg);
font-size: var(--text-base);
line-height: var(--lh-normal);
text-rendering: optimizeLegibility;
}
::selection { background: var(--brass); color: var(--ink); }
/* ============================================================
INSTITUTIONAL MODE
Toggle:
A quieter accent treatment for the "less wedding, more bank" feel.
- Eyebrow labels: brass text → muted current color (dot stays brass)
- Body : italic + brass dropped; emphasis via medium weight
- Headline : italic retained, brass color dropped
- Caption pull-quotes: brass accent muted
============================================================ */
body.institutional .ey {
color: color-mix(in srgb, currentColor 58%, transparent);
}
body.institutional .ey > .of {
color: color-mix(in srgb, currentColor 70%, transparent);
}
/* Dot keeps brass since it's a background-color, untouched by parent color */
/* Body copy — drop italic + brass mid-sentence emphasis */
body.institutional p em,
body.institutional li em,
body.institutional .tag em,
body.institutional .lead p em,
body.institutional .body p em,
body.institutional .right-tag em,
body.institutional .right p em,
body.institutional .right-meta em,
body.institutional .moats .lead p em,
body.institutional .va .lead p em,
body.institutional .hero .tag em,
body.institutional .feat .right p em,
body.institutional footer .tagline em {
font-style: normal;
color: inherit;
font-weight: 500;
}
/* Headline — keep italic; drop brass tinge */
body.institutional h1 em,
body.institutional h2 em,
body.institutional h3 em,
body.institutional h4 em {
color: inherit;
}
/* Pull-quote / caption blocks — neutralize brass */
body.institutional .va .caption {
background: rgba(15, 23, 42, 0.35);
border-left-color: rgba(244, 239, 228, 0.4);
}
body.institutional .va .caption .qe {
color: color-mix(in srgb, currentColor 60%, transparent);
}
body.institutional .va .caption .ln {
font-style: normal;
}
/* Founder-signature italic flourish (concept-c) — restrained */
body.institutional .cta-c .signature-side .sig {
font-style: normal;
font-weight: 500;
color: var(--bone);
}
body.institutional .cta-c .signature-side p {
font-style: normal;
}
/* Breadcrumb brass link → bone */
body.institutional .breadcrumb a {
color: var(--bone);
border-bottom: 1px solid color-mix(in srgb, var(--bone) 35%, transparent);
}
/* ============================================================
QUIET LEVERAGE — Newsletter subscribe block (reusable across pages)
Drop in as: before