/* ==========================================================================
DE SELECTIE — applicatie-stylesheet
==========================================================================
Huisstijl afgeleid van https://www.de-selectie.nl/ (opgehaald 2026-08-31).
Kleuren komen uit het Wix-thema van de site; typografie op de site is
Monoela (koppen) en DIN Next Light (body). Beide zijn gelicenseerde fonts:
zolang de fontbestanden niet beschikbaar zijn, vallen we terug op
Space Grotesk en Barlow (Google Fonts). Staan de echte fonts er wel, dan
pakt de font-stack ze automatisch op.
Gebruik:
De @import hieronder werkt out-of-the-box; laad in productie de fonts
liever via een in de (sneller, geen import-keten).
Thema: licht is de basis. Donker volgt het OS automatisch en kan
geforceerd worden met of "light".
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* --------------------------------------------------------------------------
1. Design-tokens
-------------------------------------------------------------------------- */
:root {
color-scheme: light;
/* -- Merkpalet (bron: de-selectie.nl) ---------------------------------- */
--ds-ink: #000501; /* near-black, de kern van het merk (logo) */
--ds-paper: #ffffff;
--ds-petrol: #114b5f; /* primaire themakleur van de site */
--ds-coral: #ff7351;
--ds-amber: #ffc145;
--ds-green: #00b482;
--ds-orange: #ea6020;
--ds-rust: #c94001;
--ds-mint: #edf7f6; /* lichte sectie-achtergrond op de site */
--ds-mist: #e2eeee;
--ds-haze: #e1eae9;
--ds-grey-300: #c2c2c2;
--ds-grey-400: #b0b0b0;
--ds-grey-600: #6e6e6e;
/* -- Semantische tokens: hierop stylen, niet op het palet -------------- */
--ds-bg: var(--ds-paper);
--ds-surface: var(--ds-paper);
--ds-surface-alt: var(--ds-mint);
--ds-text: var(--ds-ink);
--ds-text-muted: var(--ds-grey-600);
--ds-border: var(--ds-haze);
--ds-border-strong: var(--ds-grey-300);
--ds-primary: var(--ds-ink);
--ds-primary-contrast: var(--ds-paper);
--ds-primary-hover: var(--ds-petrol);
--ds-link: var(--ds-petrol);
--ds-focus: var(--ds-petrol);
--ds-info: var(--ds-petrol);
--ds-success: var(--ds-green);
--ds-warning: var(--ds-amber);
--ds-danger: var(--ds-rust);
/* -- Typografie -------------------------------------------------------- */
--ds-font-display: "Monoela", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
--ds-font-body: "DIN Next W01 Light", "DIN Next", Barlow, "Helvetica Neue", Arial, sans-serif;
/* Schaal volgt de site: 72/42/34/28/22 koppen, 18/16/14 lopende tekst */
--ds-text-display: clamp(2.75rem, 2rem + 3vw, 4.5rem);
--ds-text-h1: clamp(2rem, 1.7rem + 1.2vw, 2.625rem);
--ds-text-h2: clamp(1.625rem, 1.45rem + 0.7vw, 2.125rem);
--ds-text-h3: 1.75rem;
--ds-text-h4: 1.375rem;
--ds-text-lead: 1.125rem;
--ds-text-body: 1rem;
--ds-text-small: 0.875rem;
--ds-text-caption: 0.75rem;
/* -- Maatvoering ------------------------------------------------------- */
--ds-space-1: 0.25rem;
--ds-space-2: 0.5rem;
--ds-space-3: 0.75rem;
--ds-space-4: 1rem;
--ds-space-5: 1.5rem;
--ds-space-6: 2rem;
--ds-space-7: 3rem;
--ds-space-8: 4rem;
--ds-radius: 4px; /* de site is strak: kleine radii */
--ds-radius-lg: 8px;
--ds-measure: 65ch;
--ds-shadow-sm: 0 1px 2px rgba(0, 5, 1, 0.08);
--ds-shadow-md: 0 2px 10px rgba(0, 5, 1, 0.10);
--ds-shadow-lg: 0 8px 30px rgba(0, 5, 1, 0.14);
--ds-transition: 150ms ease;
}
/* Donker thema: volgt het OS zolang er geen expliciete keuze is gemaakt */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--ds-bg: #0c1416;
--ds-surface: #121d20;
--ds-surface-alt: #18262a;
--ds-text: var(--ds-mint);
--ds-text-muted: #9bb3b0;
--ds-border: #263a40;
--ds-border-strong: #3a545c;
--ds-primary: var(--ds-mint);
--ds-primary-contrast: #0c1416;
--ds-primary-hover: #6fb3c8;
--ds-link: #6fb3c8;
--ds-focus: var(--ds-amber);
--ds-info: #6fb3c8;
--ds-danger: #f5764b;
--ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--ds-shadow-md: 0 2px 10px rgba(0, 0, 0, 0.45);
--ds-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.55);
}
}
/* Expliciete keuze via wint van het OS */
:root[data-theme="dark"] {
color-scheme: dark;
--ds-bg: #0c1416;
--ds-surface: #121d20;
--ds-surface-alt: #18262a;
--ds-text: var(--ds-mint);
--ds-text-muted: #9bb3b0;
--ds-border: #263a40;
--ds-border-strong: #3a545c;
--ds-primary: var(--ds-mint);
--ds-primary-contrast: #0c1416;
--ds-primary-hover: #6fb3c8;
--ds-link: #6fb3c8;
--ds-focus: var(--ds-amber);
--ds-info: #6fb3c8;
--ds-danger: #f5764b;
--ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--ds-shadow-md: 0 2px 10px rgba(0, 0, 0, 0.45);
--ds-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.55);
}
/* --------------------------------------------------------------------------
2. Basis
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--ds-bg);
color: var(--ds-text);
font-family: var(--ds-font-body);
font-size: var(--ds-text-body);
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img,
svg,
video {
max-width: 100%;
height: auto;
}
:focus-visible {
outline: 2px solid var(--ds-focus);
outline-offset: 2px;
}
::selection {
background: var(--ds-amber);
color: var(--ds-ink);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* --------------------------------------------------------------------------
3. Typografie
-------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--ds-space-4);
font-family: var(--ds-font-display);
font-weight: 600;
line-height: 1.2;
text-wrap: balance;
}
h1 { font-size: var(--ds-text-h1); }
h2 { font-size: var(--ds-text-h2); line-height: 1.25; }
h3 { font-size: var(--ds-text-h3); line-height: 1.3; }
h4 { font-size: var(--ds-text-h4); line-height: 1.35; }
h5 { font-size: var(--ds-text-lead); line-height: 1.4; }
h6 { font-size: var(--ds-text-body); line-height: 1.4; }
.ds-display {
font-size: var(--ds-text-display);
line-height: 1.1;
letter-spacing: -0.01em;
}
p {
margin: 0 0 var(--ds-space-4);
max-width: var(--ds-measure);
}
.ds-lead {
font-size: var(--ds-text-lead);
font-weight: 300;
line-height: 1.6;
}
small,
.ds-small {
font-size: var(--ds-text-small);
}
.ds-muted {
color: var(--ds-text-muted);
}
/* Kickers/sectielabels: gespatieerde kapitalen, zoals het gestapelde logo */
.ds-eyebrow {
display: block;
margin-bottom: var(--ds-space-2);
font-family: var(--ds-font-display);
font-size: var(--ds-text-caption);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ds-text-muted);
}
a {
color: var(--ds-link);
text-decoration: underline;
text-underline-offset: 0.15em;
transition: color var(--ds-transition);
}
a:hover {
color: var(--ds-text);
}
hr {
border: 0;
border-top: 1px solid var(--ds-border);
margin: var(--ds-space-6) 0;
}
code,
pre {
font-family: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.875em;
}
code {
padding: 0.1em 0.35em;
border-radius: var(--ds-radius);
background: var(--ds-surface-alt);
}
pre {
padding: var(--ds-space-4);
border-radius: var(--ds-radius);
background: var(--ds-surface-alt);
overflow-x: auto;
}
pre code {
padding: 0;
background: none;
}
blockquote {
margin: 0 0 var(--ds-space-4);
padding: var(--ds-space-2) var(--ds-space-5);
border-left: 3px solid var(--ds-text);
font-family: var(--ds-font-display);
font-size: var(--ds-text-lead);
}
/* --------------------------------------------------------------------------
4. Merkelementen
-------------------------------------------------------------------------- */
/* De doorhaal uit het eerdere beeldmerk (logo v1), nog beschikbaar als kop-motief:
De Selectie
*/
.ds-strike {
position: relative;
display: inline-block;
}
.ds-strike::after {
content: "";
position: absolute;
left: -0.6em;
right: -0.6em;
top: 50%;
height: max(0.045em, 2px);
background: currentColor;
pointer-events: none;
}
/* CSS-benadering van het beeldmerk (v2: zwart vlak, twee linkslijnende regels
DE / SELECTIE, zonder doorhaal). Het originele bestand staat in assets/
(logo-de-selectie-v2.jpg); gebruik waar mogelijk de afbeelding zelf.