/* ============================================================
Paul van Dijk — "Een dijk van een coach"
Design tokens & base styles
Palette: Earth & Iron | Type: Space Grotesk + Manrope
============================================================ */
/* Google Fonts wordt per pagina geladen via in —
parallel met tokens.css i.p.v. serieel via @import. */
:root {
/* ---------- Earth & Iron palette (locked) ---------- */
--primary-900: #0b1a2e;
--primary-800: #112649;
--primary-700: #1A365D; /* PRIMARY — Deep Blue */
--primary-600: #274a76;
--primary-500: #375f90;
--primary-400: #5a7ca7;
--primary-300: #8aa3c2;
--primary-200: #b8c7dc;
--primary-100: #dde4ee;
--primary-50: #eff3f8;
--secondary-900: #0e1f0c;
--secondary-800: #173215;
--secondary-700: #20441d;
--secondary-600: #2D5A27; /* SECONDARY — Forest */
--secondary-500: #3e7236;
--secondary-400: #5a8e52;
--secondary-300: #86ac7f;
--secondary-200: #b3c8ae;
--secondary-100: #d7e2d3;
--secondary-50: #ebf0e9;
--tertiary-900: #3d3416;
--tertiary-800: #5a4e23;
--tertiary-700: #7a6b35;
--tertiary-600: #9c8b52;
--tertiary-500: #C2B280; /* TERTIARY — Sand */
--tertiary-400: #cfc197;
--tertiary-300: #dcd2b1;
--tertiary-200: #e8e1cb;
--tertiary-100: #f0ebdc;
--tertiary-50: #f7f4eb;
--neutral-950: #0e0d0a;
--neutral-900: #1b1a16;
--neutral-800: #2a2923;
--neutral-700: #3f3d35;
--neutral-600: #5a5850;
--neutral-500: #807d72;
--neutral-400: #a6a498;
--neutral-300: #c7c4b7;
--neutral-200: #e2dfd2;
--neutral-100: #edebdf;
--neutral-50: #F4F1EA; /* NEUTRAL — page base */
--neutral-0: #faf8f2;
/* ---------- Surface hierarchy (no-line rule) ----------
Structure comes from background shifts, not borders. */
--surface-base: var(--neutral-50); /* page background */
--surface-low: #EFEBDF; /* recessed section */
--surface-mid: #E8E3D2; /* deeper recess */
--surface-raised: #FBF8F1; /* lifted card (lowest) */
--surface-raised-2: #FFFFFF; /* most prominent card */
--surface-ink: var(--primary-900); /* dijk break (dam) */
--surface-leaf: var(--secondary-600);
/* ---------- Ink ---------- */
--ink: var(--neutral-900);
--ink-soft: var(--neutral-700);
--ink-muted: var(--neutral-500);
--ink-on-dark: #F4F1EA;
--ink-on-dark-muted: rgba(244,241,234,.72);
/* ---------- Ghost border (felt, not seen) ---------- */
--ghost: rgba(27, 26, 22, 0.08); /* 8% on-surface */
--ghost-strong: rgba(27,26,22,0.14);
/* ---------- Focus ring ---------- */
--focus: var(--secondary-600);
/* ---------- Typography ---------- */
--font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
--font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
--fs-display-xl: clamp(54px, 8.2vw, 120px);
--fs-display-l: clamp(44px, 6vw, 88px);
--fs-display-m: clamp(36px, 4.6vw, 64px);
--fs-h1: clamp(32px, 3.4vw, 48px);
--fs-h2: clamp(26px, 2.6vw, 36px);
--fs-h3: 22px;
--fs-h4: 18px;
--fs-body-lg: 19px;
--fs-body: 16px;
--fs-body-sm: 14px;
--fs-label: 12px;
--lh-tight: 1.02;
--lh-snug: 1.15;
--lh-body: 1.6;
/* ---------- Radius (softened rectangles, not pills) ----- */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 14px;
--r-btn: 14px; /* button radius — softened rectangle */
--r-lg: 20px;
--r-xl: 24px;
--r-2xl: 32px;
--r-pill: 999px; /* reserved for chips/avatars only */
/* ---------- Spacing (4px base) ---------- */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
--s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
--s-32: 128px;
/* ---------- Ambient shadows (low, tinted, rarely used) -- */
--shadow-xs: 0 1px 2px rgba(27,26,22,.04);
--shadow-amb: 0 20px 40px -24px rgba(27,26,22,.18),
0 2px 4px rgba(27,26,22,.04);
--shadow-lift: 0 32px 60px -30px rgba(27,26,22,.22);
/* ---------- Motion (heavy, slow) ---------- */
--ease: cubic-bezier(.2,.7,.2,1);
--dur: 360ms;
}
/* ============================================================
Reset-ish + base
============================================================ */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--surface-base);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01", "ss02";
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--primary-700); color: #fff; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
/* ============================================================
Global film grain — persistent across UI
============================================================ */
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none;
z-index: 9999;
opacity: .06;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
/* ============================================================
Typography utilities
============================================================ */
.display-xl, .display-l, .display-m,
.h1, .h2, .h3, .h4 {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.025em;
line-height: var(--lh-tight);
margin: 0;
color: var(--primary-700);
text-wrap: balance;
}
.display-xl { font-size: var(--fs-display-xl); letter-spacing: -0.035em; font-weight: 500; }
.display-l { font-size: var(--fs-display-l); letter-spacing: -0.03em; font-weight: 500; }
.display-m { font-size: var(--fs-display-m); letter-spacing: -0.025em; font-weight: 500; }
.h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
.h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600;}
.h4 { font-size: var(--fs-h4); line-height: 1.3; font-weight: 600;}
/* The signature italic — editorial pull word */
.em {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
color: var(--secondary-600);
letter-spacing: -0.02em;
}
.em--sand { color: var(--tertiary-700); }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.body { font-size: var(--fs-body); }
.body-sm { font-size: var(--fs-body-sm); color: var(--ink-soft); }
.eyebrow {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 700;
color: var(--ink-muted);
}
.measure { max-width: 56ch; }
.measure-l { max-width: 68ch; }
/* ============================================================
Buttons — "Solid Foundation"
Softened rectangles (14px), no pills.
============================================================ */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 15px 22px;
border-radius: var(--r-btn);
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
letter-spacing: -0.005em;
border: 1.5px solid transparent;
cursor: pointer;
transition: transform var(--dur) var(--ease),
background-color var(--dur) var(--ease),
color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn .i { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary {
background: var(--primary-700); color: #fff;
box-shadow: var(--shadow-xs);
}
.btn-primary:hover { background: var(--primary-800); }
.btn-secondary {
background: var(--secondary-100);
color: var(--secondary-700);
}
.btn-secondary:hover { background: var(--secondary-200); }
.btn-inverted {
background: var(--neutral-900); color: var(--neutral-50);
}
.btn-inverted:hover { background: var(--neutral-800); }
.btn-outlined {
background: transparent; color: var(--primary-700);
border-color: var(--primary-700);
}
.btn-outlined:hover { background: var(--primary-700); color: #fff; }
.btn-ghost {
background: transparent; color: var(--ink);
}
.btn-ghost:hover { background: var(--surface-low); }
/* Tertiary text-button with Moss underline */
.btn-tertiary {
background: transparent;
color: var(--primary-700);
padding: 8px 2px;
border-radius: 0;
font-weight: 600;
text-decoration: underline solid var(--secondary-600);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
transition: color var(--dur) var(--ease);
}
.btn-tertiary:hover { color: var(--secondary-600); }
.btn-sm { padding: 10px 16px; font-size: 13px; border-radius: 10px; }
.btn-lg { padding: 18px 28px; font-size: 16px; }
.btn-icon {
padding: 0;
width: 44px; height: 44px;
justify-content: center;
border-radius: 12px;
}
/* ============================================================
Cards — "The Monolith"
No borders, layered tones, ambient shadows only on lift.
============================================================ */
.card {
background: var(--surface-raised);
border-radius: var(--r-xl);
padding: 32px;
transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card--lift:hover {
background: var(--surface-raised-2);
box-shadow: var(--shadow-amb);
}
.card-soft {
background: var(--surface-low);
border-radius: var(--r-xl);
padding: 32px;
}
.card-sand {
background: var(--tertiary-200);
border-radius: var(--r-xl);
padding: 32px;
color: var(--neutral-900);
}
.card-ink {
background: var(--primary-900);
color: var(--ink-on-dark);
border-radius: var(--r-xl);
padding: 32px;
}
.card-ink .h1, .card-ink .h2, .card-ink .h3, .card-ink .display-m { color: var(--ink-on-dark); }
.card-brand {
background: var(--primary-700);
color: #fff;
border-radius: var(--r-xl);
padding: 32px;
}
.card-brand .h1, .card-brand .h2, .card-brand .h3 { color: #fff; }
/* ============================================================
Inputs
============================================================ */
.input, .textarea, .select {
display: block;
width: 100%;
background: var(--surface-low);
color: var(--ink);
border: 1.5px solid var(--ghost);
border-radius: var(--r-md);
padding: 14px 16px;
font: inherit;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-muted); }
.input:hover, .textarea:hover, .select:hover { background: var(--surface-mid); }
.input:focus, .textarea:focus, .select:focus {
outline: none;
border-color: var(--secondary-600);
background: var(--surface-raised);
}
.search-field {
display: flex; align-items: center; gap: 10px;
background: var(--surface-low);
border-radius: var(--r-md);
padding: 12px 16px;
border: 1.5px solid var(--ghost);
}
.search-field input {
flex: 1;
border: 0; background: transparent; outline: none;
font: inherit; color: inherit;
}
/* ============================================================
Chips / badges / dividers
============================================================ */
.chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px;
border-radius: var(--r-pill);
background: var(--surface-raised);
font-size: 13px;
font-weight: 500;
color: var(--ink-soft);
}
.chip .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--secondary-600); }
.chip-leaf { background: var(--secondary-100); color: var(--secondary-700); }
.chip-sand { background: var(--tertiary-200); color: var(--tertiary-800); }
.chip-ink { background: var(--neutral-900); color: var(--ink-on-dark); }
/* ============================================================
Brand mark
============================================================ */
.brandmark {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-display);
font-weight: 600;
font-size: 19px;
color: var(--primary-700);
letter-spacing: -0.015em;
}
.brandmark .sigil {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--primary-700);
color: var(--tertiary-300);
display: grid; place-items: center;
}
.brandmark .sigil svg { width: 20px; height: 20px; }
.brandmark em { font-style: italic; font-weight: 500; color: var(--secondary-600); }
/* ============================================================
Container + grid
============================================================ */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
}
.container-narrow { max-width: 960px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 1024px) {
.container, .container-narrow { padding: 0 32px; }
}
@media (max-width: 720px) {
.container, .container-narrow { padding: 0 24px; }
}
/* ============================================================
Header — glass nav
============================================================ */
.site-header {
position: sticky; top: 0; z-index: 40;
background: color-mix(in oklab, var(--surface-base) 78%, transparent);
backdrop-filter: saturate(140%) blur(20px);
-webkit-backdrop-filter: saturate(140%) blur(20px);
}
.site-header__inner {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 0;
}
.nav {
display: flex; align-items: center; gap: 36px;
}
.nav a {
font-size: 15px;
color: var(--ink-soft);
font-weight: 500;
position: relative;
padding: 6px 2px;
transition: color .2s var(--ease);
}
.nav a:hover { color: var(--primary-700); }
.nav a.is-active {
color: var(--primary-700);
}
.nav a.is-active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 2px; background: var(--secondary-600);
border-radius: 2px;
}
/* ============================================================
Footer
============================================================ */
.site-footer {
background: var(--primary-900);
color: var(--ink-on-dark);
padding: 88px 0 44px;
margin-top: 120px;
border-top-left-radius: var(--r-2xl);
border-top-right-radius: var(--r-2xl);
position: relative;
overflow: hidden;
}
.site-footer a { color: var(--ink-on-dark-muted); }
.site-footer a:hover { color: var(--tertiary-300); }
/* ============================================================
"Dijk Break" — full-width dark band between sections
============================================================ */
.dijk-break {
background: radial-gradient(120% 160% at 20% 0%, #002046 0%, var(--primary-700) 55%, var(--primary-900) 100%);
color: var(--ink-on-dark);
padding: 96px 0;
margin: 88px 0;
position: relative;
overflow: hidden;
}
.dijk-break .h1, .dijk-break .h2, .dijk-break .display-m { color: #fff; }
.dijk-break::after {
content: "";
position: absolute; inset: 0;
pointer-events: none; opacity: .08; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* ============================================================
Placeholder imagery (warm striped — stand-in for photo)
============================================================ */
.ph {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
background:
repeating-linear-gradient(135deg,
color-mix(in oklab, var(--tertiary-500) 36%, transparent) 0 10px,
color-mix(in oklab, var(--tertiary-500) 18%, transparent) 10px 22px),
linear-gradient(180deg, var(--tertiary-200), var(--tertiary-300));
color: var(--neutral-800);
}
.ph--ink {
background:
repeating-linear-gradient(135deg,
rgba(255,255,255,.06) 0 10px,
rgba(255,255,255,.00) 10px 22px),
linear-gradient(180deg, var(--primary-800), var(--primary-900));
color: var(--tertiary-200);
}
.ph--leaf {
background:
repeating-linear-gradient(135deg,
rgba(255,255,255,.12) 0 10px,
rgba(255,255,255,.00) 10px 22px),
linear-gradient(180deg, var(--secondary-600), var(--secondary-800));
color: var(--tertiary-100);
}
.ph__label {
position: absolute; inset: auto 0 0 0;
padding: 14px 18px;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
background: linear-gradient(180deg, transparent, rgba(0,0,0,.4));
color: rgba(255,255,255,.88);
}
/* ============================================================
Pull quote — editorial, moss green, wide margins
============================================================ */
.pullquote {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(26px, 3vw, 40px);
line-height: 1.25;
color: var(--secondary-600);
letter-spacing: -0.015em;
max-width: 22ch;
text-wrap: balance;
}
/* ============================================================
"Tree" bullet — circular marker inspired by logo
============================================================ */
.tree-list { list-style: none; margin: 0; padding: 0; }
.tree-list li {
position: relative;
padding: 0 0 20px 32px;
font-size: 16px;
}
.tree-list li::before {
content: "";
position: absolute; left: 0; top: 8px;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--primary-700);
box-shadow: 0 0 0 3px var(--surface-base), 0 0 0 4px var(--secondary-600);
}
.tree-list li:last-child { padding-bottom: 0; }
/* ============================================================
Utility
============================================================ */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .gap-12 { gap: 48px; }
.mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; } .mt-12 { margin-top: 48px; } .mt-16 { margin-top: 64px; }
.mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; } .mb-12 { margin-bottom: 48px; } .mb-16 { margin-bottom: 64px; }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 140px 0; }
@media (max-width: 820px) {
.section { padding: 64px 0; }
.section-sm { padding: 44px 0; }
.section-lg { padding: 80px 0; }
}
.section--sunken { background: var(--surface-low); }
.section--sand { background: var(--tertiary-200); }
.asym-offset { margin-left: 8%; }
@media (max-width: 920px) { .asym-offset { margin-left: 0; } }