/* ========================================================================== VDMB · TOKENS Van Driesten Montage & Bouw Afgeleid van VDMB-Huisstijl.pdf v1.0 / logobestanden v3.0 Elke waarde hier komt uit het brandbook. Wijzig niets zonder het brandbook. ========================================================================== */ :root { /* --- Kleur · pagina 06 van het brandbook ------------------------------- Verdeelsleutel 60/30/7/3: Nokzwart 60% · Valleibeige 22% · Kalkwit 8% · neutralen 7% · brons 3% */ --nokzwart: #121110; /* RAL 9005 · PMS 426 C · draagt de site */ --roetgrijs: #22201E; /* RAL 9017 · verdieping binnen het zwart */ --valleibeige: #DBD0BD; /* RAL 1013 · PMS 7534 C · het merkpaar */ --kalkwit: #F5F1EA; /* RAL 9010 · lichte secties */ --brons: #8A6A45; /* RAL 8000 · PMS 7505 C · accent, max 3% */ --brons-licht: #B08A5E; /* RAL 1011 · enige brons dat tekst mag zijn */ --betongrijs: #6E6A65; /* RAL 7039 · secundaire tekst op licht */ --mistgrijs: #A69E93; /* RAL 7030 · secundaire tekst op donker */ /* Semantisch. Gebruik deze in componenten, niet de kleurnamen hierboven. Contrastwaarden zijn nagerekend volgens WCAG 2.1 en staan erbij. */ --vlak-donker: var(--nokzwart); --vlak-donker-diep: var(--roetgrijs); --vlak-licht: var(--kalkwit); --vlak-beige: var(--valleibeige); --tekst-op-donker: var(--valleibeige); /* 12,37:1 AAA */ --tekst-op-donker-zwak: var(--mistgrijs); /* 7,13:1 AAA */ --tekst-op-licht: var(--nokzwart); /* 16,75:1 AAA */ --tekst-op-licht-zwak: var(--betongrijs); /* 4,77:1 AA vanaf 10 pt */ --tekst-op-beige: var(--nokzwart); /* 12,37:1 AAA */ /* Op beige bestaat geen lichtere tint die AA haalt: betongrijs zakt daar naar 3,52:1. Zwakke tekst op beige is daarom roetgrijs, 10,65:1, en het verschil met de hoofdtekst zit in grootte, niet in kleur. */ --tekst-op-beige-zwak: var(--roetgrijs); /* 10,65:1 AAA */ /* Placeholdertekst in formuliervelden. */ --tekst-placeholder: var(--mistgrijs); /* 7,13:1 AAA */ --accent: var(--brons); /* lijnen, iconen, grote vlakken */ --accent-tekst: var(--brons-licht); /* 5,97:1 op nokzwart · AA */ --lijn-op-donker: rgba(219, 208, 189, 0.20); --lijn-op-licht: rgba(18, 17, 16, 0.14); --lijn-accent: var(--brons); /* Beeldoverlay. Het brandbook verbiedt verlopen, ook als scrim. Een overlay is daarom altijd een VLAKKE dekking. */ --overlay-zwart-licht: rgba(18, 17, 16, 0.28); --overlay-zwart-half: rgba(18, 17, 16, 0.46); --overlay-zwart-zwaar: rgba(18, 17, 16, 0.62); /* --- Typografie · pagina 07 -------------------------------------------- */ --font-kop: 'Outfit', 'Archivo', 'Segoe UI', Helvetica, sans-serif; --font-body: 'IBM Plex Sans', 'Segoe UI', Helvetica, sans-serif; /* Schaal. De px-waarden uit het brandbook zijn de desktopmaten; daartussen schalen we vloeiend mee naar mobiel. */ --t-display: clamp(2.5rem, 1.30rem + 5.10vw, 4.5rem); /* 40 → 72 */ --t-h1: clamp(2rem, 1.40rem + 2.55vw, 3rem); /* 32 → 48 */ --t-h2: clamp(1.5rem, 1.20rem + 1.28vw, 2rem); /* 24 → 32 */ --t-h3: clamp(1.125rem,0.98rem + 0.64vw, 1.375rem); /* 18 → 22 */ --t-lead: clamp(1.0625rem,0.98rem + 0.38vw,1.25rem); /* 17 → 20 */ --t-body: 1.0625rem; /* 17 */ --t-klein: 0.875rem; /* 14 */ --t-label: 0.75rem; /* 12 */ --t-cijfer: clamp(3.5rem, 1.50rem + 8.50vw, 7rem); /* ghostcijfer */ --ls-display: -0.015em; --ls-h1: -0.010em; --ls-h2: -0.005em; --ls-h3: 0em; --ls-label: 0.18em; --ls-knop: 0.10em; --ls-nav: 0.06em; --ls-wordmark: 0.030em; --lh-display: 0.98; --lh-kop: 1.08; --lh-h3: 1.25; --lh-lead: 1.55; --lh-body: 1.65; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-extrabold: 800; /* Lopende tekst 60 tot 75 tekens per regel · pagina 07 */ --maat-tekst: 62ch; --maat-lead: 52ch; /* --- Lijnsysteem · pagina 08 · verdubbeling 1:2:4:8 -------------------- Tussenwaarden bestaan niet. Nooit 3 px, nooit 0,75 mm. */ --lijn-haar: 1px; /* rasterlijn, tabelregel, maatlijn */ --lijn-basis: 2px; /* kader, scheiding, onderstreping */ --lijn-constructie: 4px; /* sectiescheiding, materiaalveld */ --lijn-massa: 8px; /* de stalen balk: een per compositie */ /* --- Ruimte · achtvoud ------------------------------------------------- */ --r-1: 0.5rem; /* 8 */ --r-2: 1rem; /* 16 */ --r-3: 1.5rem; /* 24 */ --r-4: 2rem; /* 32 */ --r-5: 3rem; /* 48 */ --r-6: 4rem; /* 64 */ --r-7: 6rem; /* 96 */ --r-8: 8rem; /* 128 */ /* Sectieritme. Regel 01: minimaal 40% van elk vlak blijft leeg. */ --sectie-y: clamp(4rem, 2.20rem + 7.66vw, 9rem); --sectie-y-ruim: clamp(5.5rem, 3.10rem + 10.21vw, 12rem); /* Hoogte van de vaste header. Body-opvulling, de negatieve marge van de volbeeld-hero en de heroberekening lezen deze waarde, zodat ze niet uit elkaar kunnen lopen. Op een telefoon is de header lager: 88 px is daar ruim een tiende van het scherm. */ --header-h: 5.5rem; --header-h-vast: 4.5rem; --container: 1440px; /* pagina 09: website-header container 1440 */ --container-smal: 960px; --gutter: clamp(1.25rem, 0.61rem + 2.72vw, 3.5rem); /* De tussenruimte in het raster is kleiner dan de zijmarge van de container. Anders eten elf tussenruimtes de kolommen op. */ --raster-gap: clamp(1rem, 0.66rem + 1.45vw, 2rem); /* --- De Snede · pagina 08 --------------------------------------------- De rechterbovenhoek onder 45 graden weggesneden over maat s, s = kortste zijde gedeeld door 12, minimaal 8 px, maximaal 120 px. Altijd rechtsboven. Nooit gespiegeld of geroteerd. Maximaal drie sneden per compositie. */ --snede-s: 2rem; /* 32 px · standaardblok */ --snede-s-klein:0.75rem; /* 12 px · knop, label, kleine kaart */ --snede-s-groot:4.5rem; /* 72 px · groot beeldvlak */ /* --- Beweging ---------------------------------------------------------- Rustig en mechanisch, passend bij een constructie. Geen veer, geen overshoot, geen stuiter. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-uit: cubic-bezier(0.16, 1, 0.30, 1); --duur-kort: 220ms; --duur: 420ms; --duur-lang: 760ms; --duur-reveal: 1000ms; --z-beeld: 1; --z-inhoud: 2; --z-header: 50; /* Het mobiele menu ligt ONDER de header, niet erover. Anders dekt het paneel de menuknop af en is het menu op een telefoon niet meer te sluiten: er is geen Escape-toets. Nu blijft het logo staan en wordt dezelfde knop de sluitknop. */ --z-menu: 45; } /* Hoekradius is overal 0. Pagina 08: "Nooit afgeronde hoeken, border-radius is 0 op beeld, blokken, knoppen, formuliervelden, kaarten en iconen." */ * { border-radius: 0; } /* Telefoon. Een lagere header geeft het scherm terug aan de inhoud, en het sectieritme is krapper: op 375 px leest 144 px wit tussen twee secties als een gat, op 1440 px als rust. Boven de 900 px verandert er niets. */ @media (max-width: 900px) { :root { --header-h: 4rem; --header-h-vast: 3.5rem; --sectie-y: 3.25rem; --sectie-y-ruim: 4.25rem; } } /* Op een telefoon is 14 px lopende tekst net te klein om prettig te lezen. Labels en bijschriften blijven op hun eigen, kleinere maat. */ @media (max-width: 640px) { :root { --t-klein: 0.9375rem; } }