/* ========================================================================== Leadbundel — Base: reset, typografie, layout, motion-primitieven ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); } /* De grondkleur staat op , niet op . Zou hij op body staan, dan propageert de browser hem naar het viewport-vlak en schildert hij ook over een element met z-index:-1 heen — dan blijft de shader onzichtbaar. Dit is tegelijk de terugval als WebGL ontbreekt. */ html { /* Terugval als WebGL ontbreekt: hetzelfde wit-blauw, dan stilstaand. */ background: #080F1F; background-image: radial-gradient(1200px 800px at 8% -10%, #16315A 0%, transparent 62%), radial-gradient(1000px 700px at 95% 20%, #12294A 0%, transparent 58%); background-attachment: fixed; } body { margin: 0; background: transparent; color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-synthesis-weight: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* `overflow-x: hidden` laat overflow-y als `auto` berekenen; body wordt dan een scrollcontainer en elke `position: sticky` eronder werkt niet meer. `clip` snijdt af zonder scrollcontainer te maken. */ overflow-x: clip; } body.is-locked { overflow: hidden; } img, svg, video, canvas { display: block; max-width: 100%; } /* Levende achtergrond: één vast canvas achter de hele pagina. z-index:-1 zet hem in de negatieve laag van de wortelcontext — boven de grondkleur van , onder alle inhoud, zonder dat elk blok een eigen z-index nodig heeft. */ .shader-bg { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .shader-bg { opacity: 0.85; } } img, video { height: auto; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } /* Mail- en telefoonlinks middenin lopende tekst zijn maar zo hoog als de regel zelf — op een telefoon te weinig om betrouwbaar te raken. Verticale padding op een inline-element vergroot wel het aanraakvlak maar niet de regelhoogte, dus de tekst blijft staan waar hij stond. */ @media (max-width: 640px) { p a[href^="mailto:"], p a[href^="tel:"], li a[href^="mailto:"], li a[href^="tel:"] { padding-block: 6px; } } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } ::selection { background: var(--accent); color: #fff; } /* -------------------------------------------------------------------------- Typografie -------------------------------------------------------------------------- */ .display-xl, .display-l, .display-m { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.018em; text-wrap: balance; } .display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display); } .display-l { font-size: var(--fs-display-l); line-height: 1.02; } .display-m { font-size: var(--fs-display-m); line-height: var(--lh-heading); } .display-xl em, .display-l em, .display-m em { font-style: italic; } .accent-word { color: var(--accent-text); font-style: italic; } .h3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; } .h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent-text); flex: none; } .eyebrow--plain::before { display: none; } .lead { font-size: var(--fs-body-l); line-height: 1.6; color: var(--fg-muted); max-width: 56ch; } .body-text { color: var(--fg-muted); max-width: 68ch; } .body-text + .body-text { margin-top: var(--space-4); } .body-text strong { color: var(--fg); font-weight: 600; } .mono { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; } /* Voetnoot bij een sectie. Bewust geen kapitalen: een regel van zestig tekens in hoofdletters leest slecht, hoe klein hij ook is. */ .fineprint { font-size: var(--fs-small); color: var(--fg-muted); max-width: 60ch; } .index-num { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.1em; color: var(--accent-text); } .text-link { color: var(--fg); border-bottom: 1px solid var(--accent-line); padding-bottom: 1px; transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); } .text-link:hover { color: var(--accent-text); border-bottom-color: var(--accent-text); } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); } .section { position: relative; background: var(--bg); color: var(--fg); padding-block: var(--section-y); } .section--sm { padding-block: var(--section-y-sm); } .section--flush-top { padding-top: 0; } .section--flush-bottom { padding-bottom: 0; } .rule { height: 1px; background: var(--rule); border: 0; margin: 0; } .grid { display: grid; gap: var(--space-6); } .grid--2, .grid--3, .grid--split { display: grid; gap: var(--space-6); } @media (min-width: 620px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); } } @media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } } .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); } @media (max-width: 899px) { .grid-12 { grid-template-columns: repeat(6, 1fr); gap: var(--space-5); } } .section-head { display: grid; gap: var(--space-5); margin-bottom: clamp(48px, 6vw, 80px); } .section-head__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule); } /* Displaykoppen breken hier met de hand; de maat is dus een breedte, geen tekenmaat van de bodyfont. */ .section-head__body { display: grid; gap: var(--space-5); max-width: min(46rem, 100%); } @media (min-width: 900px) { .section-head--split .section-head__body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-8); max-width: none; align-items: end; } } /* -------------------------------------------------------------------------- Toegankelijkheid -------------------------------------------------------------------------- */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); } .tone-ink :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline-color: #8FA0FF; } .skip-link { position: absolute; left: 16px; top: 12px; z-index: 999; transform: translateY(-200%); background: var(--ink); color: var(--text-inv); padding: 12px 20px; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500; transition: transform var(--dur-ui) var(--ease-out); } .skip-link:focus-visible { transform: translateY(0); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Motion-primitieven -------------------------------------------------------------------------- */ /* Per-item cascade. Elk item krijgt zijn eigen --i, de container krijgt .is-in. */ [data-reveal] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal].is-in { will-change: auto; } [data-reveal="fade"] { transform: none; } [data-reveal="right"] { transform: translate3d(-24px, 0, 0); } [data-reveal="scale"] { transform: translate3d(0, 24px, 0) scale(0.985); } /* Regel-voor-regel masked reveal voor koppen */ .reveal-lines { display: block; } .reveal-lines .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; } .reveal-lines .line > span { display: block; transform: translate3d(0, 105%, 0); transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 85ms); } .reveal-lines.is-in .line > span { transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .reveal-lines .line > span { transform: none !important; } [data-parallax] { transform: none !important; } } /* Fallback wanneer JS uitstaat: alles zichtbaar */ .no-js [data-reveal] { opacity: 1; transform: none; } .no-js .reveal-lines .line > span { transform: none; }