/* ============================================================================ Bruuks Huus — Design Tokens ---------------------------------------------------------------------------- ENIGE kleur- en font-bron voor het hele thema. Templates gebruiken ALLEEN var(--bh-*) — geen losse hex-codes in latere taken (Taak 3-verify dwingt af). Bron van de kleuren: "Bruuks Huus Brandbook & Design, 2026" (Kyra Smit & Ime Rötjes) — de primaire kleuren (p.10) en de kleurenwaaier 100/70/40% (p.11). Typografie (p.14-15): Nunito Sans voor koppen + body; Tabarra Round leeft UITSLUITEND in de logo-SVG's (outline-paths), niet als webfont. LET OP — logo vs. brandbook-tabel: De officiele logo-SVG's (assets/img/logo/) gebruiken net iets andere waarden (#e19668 / #4c6255 / #a1a792) dan de brandbook-kleurtabel (#E29868 / #496154 / #A2A892). Het logo is heilig en wordt NIET herkleurd; de site-tokens hieronder volgen de brandbook-TABEL. Dit verschil is bewust. Waarden gemarkeerd met "te bevestigen" of "afgeleid" staan niet letterlijk in het brandbook en moeten bij de ontwerpers/Melvin geverifieerd worden. ============================================================================ */ /* --------------------------------------------------------------------------- 1. Lettertype — Nunito Sans, self-hosted (variabele woff2, gewicht 400-800) De css2-levering van Google is een variabel font: één bestand dekt de hele gewicht-as. latin + latin-ext samen dekken NL inclusief e-umlaut/o-umlaut (creeren, Rotjes, Bruu.k). NunitoSans in de bestandsnaam = grep-anker. --------------------------------------------------------------------------- */ @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url("../fonts/NunitoSans-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: "Nunito Sans"; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url("../fonts/NunitoSans-latinext.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. Primaire merkkleuren — EXACT uit het brandbook (p.10) ------------------------------------------------------------------------- */ --bh-terracotta: #C86547; /* warme signaalkleur — de boog van het logo */ --bh-oranje: #E29868; /* warm oranje — clubkleuren-samensmelting */ --bh-groen: #496154; /* donkergroen — koppen, structuur, primaire actie */ --bh-tekst: #506155; /* tekstgroen — lopende tekst (p.14 "Merknaam") */ --bh-salie: #A2A892; /* salie — zachte vlakken, rustige accenten */ --bh-titel-licht: #AAAF9B; /* titel op donkere achtergrond (p.14) */ --bh-creme: #F7F1E7; /* creme-achtergrond — TE BEVESTIGEN bij ontwerpers (brandbook noemt geen exacte hex voor het papier) */ /* ------------------------------------------------------------------------- 3. Kleurenwaaier — 70% en 40% (brandbook p.11) Het brandbook definieert de waaier als TRANSPARANTIE van de primaire kleuren. Twee vormen: (a) -70 / -40 = de kleur al samengesteld OVER de creme-achtergrond (voorspelbaar, veilig voor tekstcontrast op de site). (b) -a70 / -a40 = echte rgba-transparantie voor overlays/foto-scrims (de wow-laag in Taak 3 gebruikt deze over beeldmateriaal). De -70/-40 solids zijn afgeleid: alpha over #F7F1E7. ------------------------------------------------------------------------- */ --bh-terracotta-70: #D68F77; --bh-terracotta-40: #E4B9A7; --bh-oranje-70: #E8B38E; --bh-oranje-40: #EFCDB4; --bh-groen-70: #7D8C80; --bh-groen-40: #B1B7AC; --bh-salie-70: #BCBEAC; --bh-salie-40: #D5D4C5; --bh-terracotta-a70: rgba(200, 101, 71, 0.7); --bh-terracotta-a40: rgba(200, 101, 71, 0.4); --bh-oranje-a70: rgba(226, 152, 104, 0.7); --bh-oranje-a40: rgba(226, 152, 104, 0.4); --bh-groen-a70: rgba(73, 97, 84, 0.7); --bh-groen-a40: rgba(73, 97, 84, 0.4); --bh-salie-a70: rgba(162, 168, 146, 0.7); --bh-salie-a40: rgba(162, 168, 146, 0.4); /* ------------------------------------------------------------------------- 4. Neutralen + afgeleide tinten (niet-brandbook, AFGELEID — flag) ------------------------------------------------------------------------- */ --bh-creme-2: #F0E8DA; /* afgeleid — iets diepere creme voor sectiewissel */ --bh-wit: #FFFFFF; /* kaart-oppervlak */ --bh-lijn: #E4DAC7; /* afgeleid — warme haarlijn/rand (salie x creme) */ --bh-groen-diep: #3A4E44; /* afgeleid — donkere groen-band/footer (dieper dan --bh-groen) */ --bh-inkt: #2E3A31; /* afgeleid — bijna-zwarte groen voor maximaal contrast waar nodig */ /* ------------------------------------------------------------------------- 5. Semantische kleur-tokens — templates gebruiken bij voorkeur DEZE (contrast op --bh-creme geverifieerd met tool, zie styleguide.html) ------------------------------------------------------------------------- */ --bh-bg: var(--bh-creme); /* pagina-achtergrond */ --bh-bg-alt: var(--bh-creme-2); /* alternerende sectie */ --bh-surface: var(--bh-wit); /* kaarten/panelen */ --bh-border: var(--bh-lijn); /* randen/dividers */ --bh-text: var(--bh-tekst); /* lopende tekst (5.9:1 op creme) */ --bh-text-strong: var(--bh-inkt); /* nadruk/max contrast */ --bh-text-muted: #63715F; /* afgeleid — bijschrift/meta (4.6:1 op creme) */ --bh-heading: var(--bh-groen); /* koppen (6.9:1 op creme) */ --bh-accent: var(--bh-terracotta); /* warme signatuur: onderstreping, kickers, focus, boog-motief */ --bh-accent-soft: var(--bh-oranje); /* zachtere warme variant */ --bh-action: var(--bh-groen); /* primaire knop-vlak — wit erop = 6.7:1 (AA-normaal) */ --bh-action-hover: var(--bh-groen-diep); /* primaire knop hover */ --bh-action-warm: var(--bh-terracotta); /* warme knop/CTA — wit erop = 3.9:1 => alleen GROTE/bold tekst (AA-large) */ --bh-on-dark: var(--bh-creme); /* tekst op donkere groen-band */ --bh-on-dark-title: var(--bh-titel-licht); /* titel op donkere band (p.14) */ --bh-on-accent: var(--bh-wit); /* tekst op terracotta/groen vlak */ --bh-focus: var(--bh-terracotta); /* focus-ring kleur */ /* ------------------------------------------------------------------------- 6. Typografie ------------------------------------------------------------------------- */ --bh-font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --bh-w-regular: 400; /* Paragraaf (brandbook "Normaal") */ --bh-w-semibold: 600; /* Ondertitel (brandbook "Semi-vet") */ --bh-w-bold: 700; --bh-w-extrabold: 800; /* Titel (brandbook "Vet") */ /* Fluide typeschaal (min .. max). Body 17px = senior-vriendelijk (>=16px). */ --bh-fs-display: clamp(2.5rem, 1.6rem + 4vw, 4rem); /* hero ~40-64 */ --bh-fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3rem); /* pagina-titel ~32-48 */ --bh-fs-h2: clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem);/* sectiekop ~26-36 */ --bh-fs-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem); /* subkop ~21-26 */ --bh-fs-h4: 1.25rem; /* klein kopje 20 */ --bh-fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);/* introzin 18-21 */ --bh-fs-base: 1.0625rem; /* body 17 */ --bh-fs-sm: 0.9375rem; /* klein 15 */ --bh-fs-xs: 0.8125rem; /* kicker/caption 13 */ --bh-lh-tight: 1.1; /* koppen */ --bh-lh-snug: 1.3; /* subkoppen */ --bh-lh-base: 1.6; /* lopende tekst */ --bh-ls-tight: -0.01em; /* grote koppen */ --bh-ls-wide: 0.14em; /* kickers/kapitaaltjes */ /* ------------------------------------------------------------------------- 7. Ruimte-schaal (bewuste variatie, geen strak 8px-grid overal) ------------------------------------------------------------------------- */ --bh-space-3xs: 0.25rem; /* 4 */ --bh-space-2xs: 0.5rem; /* 8 */ --bh-space-xs: 0.75rem; /* 12 */ --bh-space-sm: 1rem; /* 16 */ --bh-space-md: 1.5rem; /* 24 */ --bh-space-lg: 2.25rem; /* 36 */ --bh-space-xl: 3.5rem; /* 56 */ --bh-space-2xl: 5.5rem; /* 88 */ --bh-space-3xl: 8rem; /* 128 */ --bh-section-y: clamp(3.5rem, 8vw, 6.5rem); /* verticale sectie-padding */ /* ------------------------------------------------------------------------- 8. Vorm, schaduw, beweging, layout ------------------------------------------------------------------------- */ --bh-radius-sm: 4px; --bh-radius-md: 8px; --bh-radius-lg: 14px; --bh-radius-pill: 999px; /* spaarzaam gebruiken (chips/pills) */ /* schaduwen warm-groen getint (rgba van --bh-groen 73,97,84) */ --bh-shadow-sm: 0 2px 8px -3px rgba(73, 97, 84, 0.25); --bh-shadow-md: 0 18px 40px -28px rgba(73, 97, 84, 0.45); --bh-shadow-lg: 0 30px 60px -36px rgba(73, 97, 84, 0.40); --bh-ease: cubic-bezier(0.22, 0.68, 0.16, 1); /* zelfde curve als de mockup-wow */ --bh-dur-fast: 0.2s; --bh-dur: 0.3s; --bh-dur-slow: 0.6s; --bh-maxw: 1180px; --bh-gutter: clamp(1.25rem, 5vw, 3.5rem); }