/* ========================================================================== G1 · Tokenlaag — Natuurlijk Gezonder / B&B Gezond aan Zee v1.0 · 2026-08-30 -------------------------------------------------------------------------- De enige plaats waar waarden ontstaan. Geen component definieert een eigen maat, kleur, duur of radius: alles komt hieruit. Een waarde die hier niet staat, bestaat niet — dat is een verbod, geen aanbod. Plaats: child-theme, als eerste stylesheet. Volgorde: 00-tokens.css → 05-reset.css → 10-*.css (sitebreed) → 20+ (componenten) Lettertypen: Cormorant Garamond + Mulish, beide SIL Open Font License 1.1, zelf gehost. Zie ../fonts/LEESMIJ.md. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · Lettertypen — variabel, zelf gehost Beide families zijn variabele fonts: één bestand draagt het hele gewichtsbereik. Daarom staat er per subset één @font-face met een font-weight-RANGE in plaats van vier losse bestanden per familie. latin dekt Nederlands, Duits en Engels volledig; latin-ext wordt alleen opgehaald wanneer er daadwerkelijk een teken uit dat bereik op de pagina staat (dat regelt unicode-range). -------------------------------------------------------------------------- */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/mulish-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Mulish'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/mulish-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ------------------------------------------------------------------------ 2 · Kleur — ruwe schaal Vijf kleuren uit de bestaande site plus drie toevoegingen. De rest van het oude Wix-palet (66 variabelen, 9 unieke) is bewust niet overgenomen: die tinten werden nergens gebruikt. ------------------------------------------------------------------------ */ --ng-wit: #FFFEFC; /* paginagrond, tekst op donker */ --ng-wit-warm: #FFFDF8; /* alternerende sectiegrond */ --ng-munt-050: #EEFAF7; /* zachtste vlak */ --ng-munt-200: #BDE9E2; /* accentvlak — alleen achter grote tekst */ --ng-groen-700: #2A7C6F; /* merkkleur: koppen, vlakken, primaire actie */ --ng-groen-800: #1F5C53; /* hover van de primaire actie */ --ng-groen-900: #143B35; /* lopende tekst, diepste vlak */ --ng-zand: #E4D9C6; /* de enige warme tint; sectiegrond, nooit tekst */ /* Het logobestand draagt een eigen blauwgrijs dat niet uit dit palet komt. Zolang het logo niet hertekend is, staat die waarde hier als token — dan is het omzetten later één regel in plaats van een zoektocht. */ --ng-logo: #678187; /* ------------------------------------------------------------------------ 3 · Kleur — rollen Componenten gebruiken UITSLUITEND deze laag, nooit de ruwe schaal hierboven. Zo blijft een paletwijziging één bestand. ------------------------------------------------------------------------ */ --ng-grond: var(--ng-wit); --ng-grond-warm: var(--ng-wit-warm); --ng-grond-accent: var(--ng-munt-200); --ng-grond-diep: var(--ng-groen-900); --ng-tekst: var(--ng-groen-900); /* 12,2:1 op wit — was 4,95:1 */ --ng-tekst-zacht: var(--ng-groen-700); /* alleen op wit, alleen ≥ 24px */ --ng-tekst-op-diep: var(--ng-wit); --ng-kop: var(--ng-groen-700); --ng-actie: var(--ng-groen-700); --ng-actie-hover: var(--ng-groen-800); --ng-op-actie: var(--ng-wit); --ng-lijn: rgba(20, 59, 53, .14); --ng-lijn-sterk: rgba(20, 59, 53, .28); /* Fout — de enige plek waar de site het palet verlaat. Een foutkleur die op de merkkleur lijkt, leest niet als fout: die zoekt de bezoeker weg tussen de accenten. Dit rood is warm genoeg om naast het zeegroen te staan en haalt **6,0 : 1** op wit, dus ook een foutmelding op micromaat is leesbaar. Kleur is nooit het enige signaal — er staat altijd tekst bij, en het veld krijgt een rand. */ --ng-fout: #B4342B; /* ------------------------------------------------------------------------ 4 · Typografie Twee families. Display uitsluitend voor titels en getallen — nooit voor labels, knoppen of lopende tekst: Cormorant is licht en verliest het onder ~24px. ------------------------------------------------------------------------ */ --ng-font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --ng-font-tekst: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Schaal 1,25 (major third), verankerd op 17px body, vloeiend tussen 390px en 1440px. In rem, zodat de tekstgrootte-instelling van de bezoeker de layout meeneemt. */ --ng-t-display: clamp(2.375rem, 1.35rem + 4.20vw, 4.250rem); /* 38 → 68 */ --ng-t-h1: clamp(2.000rem, 1.35rem + 2.67vw, 3.375rem); /* 32 → 54 */ --ng-t-h2: clamp(1.750rem, 1.34rem + 1.68vw, 2.500rem); /* 28 → 40 */ --ng-t-h3: clamp(1.375rem, 1.20rem + 0.72vw, 1.688rem); /* 22 → 27 */ --ng-t-lead: clamp(1.188rem, 1.12rem + 0.28vw, 1.313rem); /* 19 → 21 */ --ng-t-body: 1.0625rem; /* 17 */ --ng-t-klein: 0.875rem; /* 14 */ --ng-t-micro: 0.750rem; /* 12 */ --ng-lh-display: 1.08; --ng-lh-kop: 1.20; --ng-lh-lead: 1.55; --ng-lh-body: 1.60; --ng-lh-klein: 1.45; --ng-w-licht: 300; /* display, h1, h2 */ --ng-w-normaal: 400; /* lopende tekst */ --ng-w-medium: 500; /* h3 in de displayfamilie — Cormorant heeft dit nodig */ --ng-w-half: 600; /* knoppen, labels, eyebrows, nadruk */ /* Letterspatie is maatafhankelijk. De displayregel krijgt een haartje POSITIEF in plaats van het gebruikelijke negatief: het woordmerk is gezet met zeer brede letterspatie, en Cormorant is smal en hoog- contrast — die vorm vraagt lucht, geen samentrekking. Bewuste afwijking van de standaardregel, hier vastgelegd zodat de volgende bouwer weet dat het een keuze was. */ --ng-ls-display: 0.012em; --ng-ls-kop: 0.008em; --ng-ls-body: 0; --ng-ls-caps: 0.10em; /* uitsluitend voor kapitalen en eyebrows */ --ng-tekstbreedte: 68ch; /* 45–75 tekens */ /* ------------------------------------------------------------------------ 5 · Ruimte — 4px-basis ------------------------------------------------------------------------ */ --ng-s-1: 0.25rem; /* 4 */ --ng-s-2: 0.50rem; /* 8 */ --ng-s-3: 1.00rem; /* 16 */ --ng-s-4: 1.50rem; /* 24 */ --ng-s-5: 2.00rem; /* 32 */ --ng-s-6: 3.00rem; /* 48 */ --ng-s-7: 4.00rem; /* 64 */ --ng-s-8: 6.00rem; /* 96 */ --ng-s-9: 8.00rem; /* 128 */ --ng-sectie-y: clamp(var(--ng-s-6), 6vw, var(--ng-s-8)); --ng-gutter: clamp(var(--ng-s-3), 4vw, var(--ng-s-6)); --ng-breedte: 75rem; /* 1200 */ /* ------------------------------------------------------------------------ 6 · Vorm en diepte De oude site is overal recht, met één uitzondering (de taalkiezer op 24px). We houden het recht met 2px verzachting; drie elevatieniveaus, niet meer. ------------------------------------------------------------------------ */ --ng-radius: 2px; --ng-radius-rond: 999px; --ng-schaduw-rust: none; --ng-schaduw-opgetild: 0 1px 2px rgba(20,59,53,.05), 0 4px 12px rgba(20,59,53,.06); --ng-schaduw-zwevend: 0 2px 4px rgba(20,59,53,.07), 0 12px 32px rgba(20,59,53,.12); /* ------------------------------------------------------------------------ 7 · Beweging — twee duraties, één easing ------------------------------------------------------------------------ */ --ng-duur-snel: 180ms; --ng-duur-rustig: 340ms; --ng-easing: cubic-bezier(.22, .61, .36, 1); /* ------------------------------------------------------------------------ 8 · Focus — zichtbaar, altijd ------------------------------------------------------------------------ */ --ng-focus-kleur: var(--ng-groen-700); --ng-focus-breedte: 2px; --ng-focus-offset: 3px; /* ------------------------------------------------------------------------ 9 · Stapeling ------------------------------------------------------------------------ */ --ng-z-boekbalk: 90; --ng-z-header: 100; --ng-z-menu: 110; --ng-z-overlay: 120; } /* -------------------------------------------------------------------------- 10 · Voorkeuren van de bezoeker -------------------------------------------------------------------------- */ /* Meer contrast gevraagd: vlakken dichter, lijnen sterker. */ @media (prefers-contrast: more) { :root { --ng-lijn: rgba(20, 59, 53, .40); --ng-lijn-sterk: rgba(20, 59, 53, .70); --ng-tekst-zacht: var(--ng-groen-900); } } /* Minder beweging: korter en zonder verplaatsing — niet géén terugkoppeling. */ @media (prefers-reduced-motion: reduce) { :root { --ng-duur-snel: 1ms; --ng-duur-rustig: 120ms; } }