/* =========================================================
Merlijn Consultancy — Colors & Type
Source of truth for foundation tokens.
Pair with the framework rules in README.md.
========================================================= */
/* ------- Google Fonts -------
Deliberately NOT imported here. Each page loads the family it actually
uses, via a in its own , so nobody downloads a typeface
they never render:
· diagnostic.html → Oswald (+ oswald-skin.css retunes these tokens)
· teardown-sample* → Fraunces + JetBrains Mono (the tokens below as-is)
An @import here would force every page to fetch all of them. */
:root {
/* ---------- Foundations ---------- */
--bg: #07080c; /* default page background. almost-black with blue undertone */
--bg-2: #0b0d14; /* elevated surfaces */
--bg-3: #11141d; /* card hover, deeper recess */
--fg: #e8ecf2; /* primary text. off-white, never pure white */
--fg-dim: #9aa3b2; /* body copy */
--fg-mute: #5b6370; /* DECORATION ONLY. 3.30:1 on --bg, which fails WCAG AA
for anything under 24px. Never put a label on it. */
--fg-label: #757e8d; /* meta, captions, eyebrows. Same grey family lifted to
4.89:1 on --bg (4.71:1 on the lifted card surfaces),
so small uppercase chrome passes AA. Mirrors the
token index.html declares inline. */
--hair: rgba(255, 255, 255, 0.08);
--hair-2: rgba(255, 255, 255, 0.04);
--hair-strong: rgba(255, 255, 255, 0.14);
/* ---------- Signature accents ---------- */
--cyan: oklch(0.82 0.15 220); /* ~#5cd6ff */
--violet: oklch(0.70 0.17 295); /* ~#a07cf0 */
--magenta: oklch(0.74 0.19 340); /* ~#ee82cc */
--cyan-hex: #5cd6ff;
--violet-hex: #a07cf0;
--magenta-hex: #ee82cc;
/* ---------- Signature gradient ---------- */
--grad: linear-gradient(
90deg,
oklch(0.85 0.14 210) 0%,
oklch(0.70 0.17 290) 55%,
oklch(0.74 0.19 340) 100%
);
/* ---------- Atmospheric wallpapers ----------
Layer at 30–45% opacity over --bg.
Each is a soft radial mood. Pick by domain. */
--atmos-deepspace: radial-gradient(60% 60% at 30% 30%, oklch(0.35 0.10 220) 0%, transparent 65%),
radial-gradient(60% 60% at 75% 75%, oklch(0.30 0.12 280) 0%, transparent 65%);
--atmos-amber: radial-gradient(60% 60% at 30% 30%, oklch(0.40 0.09 55) 0%, transparent 65%),
radial-gradient(60% 60% at 75% 75%, oklch(0.28 0.06 30) 0%, transparent 65%);
--atmos-green: radial-gradient(60% 60% at 30% 30%, oklch(0.40 0.14 150) 0%, transparent 65%),
radial-gradient(60% 60% at 75% 75%, oklch(0.32 0.10 165) 0%, transparent 65%);
--atmos-ice: radial-gradient(60% 60% at 30% 30%, oklch(0.45 0.12 210) 0%, transparent 65%),
radial-gradient(60% 60% at 75% 75%, oklch(0.38 0.09 230) 0%, transparent 65%);
--atmos-violet: radial-gradient(60% 60% at 30% 30%, oklch(0.40 0.15 295) 0%, transparent 65%),
radial-gradient(60% 60% at 75% 75%, oklch(0.32 0.12 315) 0%, transparent 65%);
--atmos-magenta: radial-gradient(60% 60% at 30% 30%, oklch(0.42 0.16 340) 0%, transparent 65%),
radial-gradient(60% 60% at 75% 75%, oklch(0.36 0.13 20) 0%, transparent 65%);
--atmos-teal: radial-gradient(60% 60% at 30% 30%, oklch(0.38 0.13 175) 0%, transparent 65%),
radial-gradient(60% 60% at 75% 75%, oklch(0.34 0.10 190) 0%, transparent 65%);
--atmos-red: radial-gradient(60% 60% at 30% 30%, oklch(0.42 0.19 20) 0%, transparent 65%),
radial-gradient(60% 60% at 75% 75%, oklch(0.36 0.15 15) 0%, transparent 65%);
--atmos-calmblue: radial-gradient(60% 60% at 30% 30%, oklch(0.44 0.14 220) 0%, transparent 65%),
radial-gradient(60% 60% at 75% 75%, oklch(0.38 0.12 200) 0%, transparent 65%);
/* ---------- Status ---------- */
--status-success: var(--cyan); /* never green */
--status-error: #ff6b8a; /* soft red, not fire-engine */
/* ---------- Type ----------
Brand stack is two fonts: Fraunces + JetBrains Mono.
Fraunces does display AND body (optical sizing handles small-size legibility).
Mono covers eyebrows, labels, UI chrome, technical receipts.
Inter is retained ONLY as a fallback if Fraunces fails to load, and as
--font-prose for opt-in long-form sans body (blog posts, About pages).
Default: never reach for Inter. */
--font-display: 'Fraunces', 'Times New Roman', serif;
--font-body: 'Fraunces', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--font-prose: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
/* Sizes — exact scale from the framework */
--type-hero: clamp(56px, 9.5vw, 148px);
--type-h2: clamp(34px, 4.6vw, 64px);
--type-closing: clamp(44px, 6vw, 84px);
--type-pullquote: clamp(19px, 1.55vw, 23px);
--type-body: 18px;
--type-body-tight: 17px;
--type-card-title: 23px;
--type-stat-num: 48px;
--type-eyebrow: 11px;
--type-nav-brand: 20px;
--type-mono-meta: 11px;
--type-sidenav: 10px;
/* Tracking */
--track-display: -0.025em;
--track-hero: -0.035em;
--track-mono: 0.20em;
--track-mono-loose: 0.12em;
--track-sidenav: 0.18em;
/* Line-height */
--lh-hero: 0.95;
--lh-h2: 1.02;
--lh-body: 1.55;
--lh-tight: 1.1;
/* ---------- Spacing scale ---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 72px;
--space-section-y: 22vh; /* hero / chapter top */
--space-section-y-end: 18vh; /* chapter bottom */
--space-side: 6vw;
/* ---------- Layout widths ---------- */
--w-story: 520px;
--w-hero: 820px;
--w-closing: 1040px;
--w-outer: 1200px;
/* ---------- Radii ---------- */
--r-logo: 0px; /* never round logos */
--r-input: 10px;
--r-image: 14px;
--r-card: 20px;
--r-pill: 999px;
/* ---------- Motion ---------- */
--ease: cubic-bezier(.22, .9, .3, 1);
--t-hover: 0.25s;
--t-reveal: 0.9s;
--t-atmosphere: 1.1s;
--t-sidenav: 0.45s;
/* ---------- Shadows / glows ---------- */
--glow-cyan: drop-shadow(0 0 12px rgba(0, 207, 255, 0.25));
--glow-cta-hover: 0 6px 30px rgba(120, 200, 255, 0.18);
/* WCAG 2.2 SC 2.4.11 wants the focus indicator at 3:1 against what it sits
on. At 0.08 alpha this composited to #10171f, a ratio of 1.11:1: invisible.
0.65 composites to #5085aa on --bg, 5.03:1, and holds ≥4.89:1 on every
other surface in the system. */
--focus-ring: 0 0 0 3px rgba(120, 200, 255, 0.65);
}
/* =========================================================
Base / reset (opinionated)
========================================================= */
html, body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--type-body);
line-height: var(--lh-body);
font-optical-sizing: auto; /* let Fraunces pick opsz from font-size */
font-weight: 350; /* Fraunces body weight, between 300 and 400 */
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection { background: rgba(92, 214, 255, 0.25); color: var(--fg); }
/* =========================================================
Semantic type classes (canonical patterns)
========================================================= */
/* HERO — page-level shout */
.m-hero {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--type-hero);
line-height: var(--lh-hero);
letter-spacing: var(--track-hero);
color: var(--fg);
text-wrap: balance;
}
/* H2 — section headline */
.m-h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--type-h2);
line-height: var(--lh-h2);
letter-spacing: var(--track-display);
color: var(--fg);
text-wrap: balance;
}
/* The signature gesture — italic gradient word inside a headline */
.m-accent,
.m-hero em,
.m-h2 em {
font-style: italic;
font-weight: 400;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Body */
.m-body {
font-family: var(--font-body);
font-weight: 350;
font-size: var(--type-body);
line-height: var(--lh-body);
font-optical-sizing: auto;
color: var(--fg-dim);
}
.m-body strong { color: var(--fg); font-weight: 500; }
/* Long-form prose escape hatch — opt-in sans for 500+ word reading surfaces
(blog posts, About pages). Default body is Fraunces; this is only when
sans-serif is the right call. */
.m-prose {
font-family: var(--font-prose);
font-weight: 400;
font-size: var(--type-body);
line-height: 1.65;
color: var(--fg-dim);
}
.m-prose strong { color: var(--fg); font-weight: 600; }
/* Eyebrow — "[02] [tick] THE CHALLENGE" */
.m-eyebrow {
font-family: var(--font-mono);
font-weight: 400;
font-size: var(--type-eyebrow);
letter-spacing: var(--track-mono);
text-transform: uppercase;
color: var(--fg-label);
display: inline-flex;
align-items: center;
gap: 14px;
}
.m-eyebrow .num { color: var(--cyan-hex); }
.m-eyebrow .tick {
width: 28px; height: 1px;
background: var(--hair);
display: inline-block;
}
/* Mono meta — small uppercase labels */
.m-mono {
font-family: var(--font-mono);
font-weight: 400;
font-size: var(--type-mono-meta);
letter-spacing: var(--track-mono-loose);
text-transform: uppercase;
color: var(--fg-label);
}
/* Stat number */
.m-stat {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--type-stat-num);
line-height: 1;
color: var(--fg);
letter-spacing: -0.02em;
}
.m-stat .unit {
font-style: italic;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Card / service title */
.m-card-title {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--type-card-title);
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--fg);
}
/* =========================================================
Components (compact primitives — see ui_kits/ for full set)
========================================================= */
/* Primary CTA — capsule pill */
.m-cta {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--fg);
color: #0a0a0f;
font-family: var(--font-body);
font-weight: 500;
font-size: 15px;
padding: 16px 26px;
border-radius: var(--r-pill);
border: none;
cursor: pointer;
text-decoration: none;
overflow: hidden;
isolation: isolate;
transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.m-cta::before {
content: '';
position: absolute; inset: 0;
background: var(--grad);
opacity: 0;
transition: opacity var(--t-hover) var(--ease);
z-index: -1;
border-radius: inherit;
}
.m-cta .arrow { transition: transform var(--t-hover) var(--ease); }
.m-cta:hover { transform: translateY(-2px); box-shadow: var(--glow-cta-hover); }
.m-cta:hover::before { opacity: 1; }
.m-cta:hover .arrow { transform: translateX(4px); }
/* Mono link CTA */
.m-mono-link {
font-family: var(--font-mono);
font-weight: 500;
font-size: 11px;
letter-spacing: var(--track-mono);
text-transform: uppercase;
color: var(--fg);
text-decoration: none;
padding-bottom: 6px;
border-bottom: 1px solid var(--hair);
transition: color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.m-mono-link:hover { color: var(--cyan-hex); border-bottom-color: var(--cyan-hex); }
/* Form input */
.m-input {
width: 100%;
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--hair);
border-radius: var(--r-input);
padding: 12px 14px;
font-family: var(--font-body);
font-size: 15px;
color: var(--fg);
transition: border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
/* Placeholders are text and get judged as text. --fg-mute at 0.6 opacity
composited to about 1.9:1 on the input surface. --fg-label at full opacity
is 4.71:1. */
.m-input::placeholder { color: var(--fg-label); opacity: 1; }
.m-input:focus {
outline: none;
border-color: rgba(120, 200, 255, 0.45);
box-shadow: var(--focus-ring);
}
.m-label {
display: block;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: var(--track-mono);
text-transform: uppercase;
color: var(--fg-label);
margin-bottom: 8px;
}
/* Grain overlay (mix-blend overlay, 5% opacity) — apply to a wrapper */
.m-grain {
position: relative;
}
.m-grain::after {
content: '';
position: absolute; inset: 0;
pointer-events: none;
z-index: 2;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* Forced colors (Windows High Contrast)
Every focus indicator in this codebase is `outline: none` plus a box-shadow,
and forced-colors strips box-shadow. Without this, keyboard focus vanishes
completely. Put a real outline back in the system's own colour. */
@media (forced-colors: active) {
:focus-visible,
.m-input:focus {
outline: 2px solid Highlight;
outline-offset: 2px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.m-cta, .m-input, .m-cta::before, .m-cta .arrow { transition: none; }
}