/* * Fraser Valley — merklaag op de huisstijl-basislaag * Versie 1.0 — 2026-08-09 * * Zet uitsluitend variabelen en lettersoorten. Geen enkele vormregel: die * staan in `thema-basis.css`. Een volgend merk is een kopie van dít bestand * met andere waarden, niet van beide. * * De waarden komen één op één uit `tokens.css` v1.1 van de Fraser Valley * Huisstijl. Waar een token een rol heeft die Bootstrap ook kent, wordt hij * daarop gezet; de vertaling staat als commentaar erbij, want de namen komen * niet vanzelf overeen. * * Laadvolgorde: bootstrap → thema-basis → dit bestand. */ /* --- Letters ------------------------------------------------------------- Zelf geserveerd, nooit van een CDN: het serverblok stuurt `font-src 'self'`. De paden zijn relatief aan dít bestand, zodat het ook werkt wanneer de proefpagina rechtstreeks van schijf wordt geopend. */ @font-face { font-family: "Spectral"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/spectral-300-latin.woff2") format("woff2"); } @font-face { font-family: "Spectral"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/spectral-400-latin.woff2") format("woff2"); } @font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jost-500-latin.woff2") format("woff2"); } /* --- Licht --------------------------------------------------------------- Spectral voor alles wat gelezen wordt, Jost voor kapitaaltjes. Geen derde letter — daarom blijft de monospace-stapel van Bootstrap staan zoals hij is, in plaats van er een vierde letter bij te halen. */ :root { --hs-font-kop: "Spectral", Georgia, "Times New Roman", serif; --hs-font-label: "Jost", "Helvetica Neue", Arial, sans-serif; --bs-body-font-family: "Spectral", Georgia, "Times New Roman", serif; --bs-body-font-size: 1.0625rem; /* 17px, --fv-tekst-web */ --bs-body-font-weight: 400; --bs-body-line-height: 1.65; /* --fv-regelafstand, altijd */ --bs-body-bg: #FCFBF8; /* --fv-papier */ --bs-body-color: #232F29; /* --fv-inkt */ --bs-emphasis-color: #1A251F; /* --fv-inkt-kop */ --bs-heading-color: #1A251F; /* --fv-inkt-kop */ --bs-secondary: #6E6A64; /* --fv-label, ook als knopkleur */ --bs-secondary-rgb: 110, 106, 100; --bs-secondary-color: #6E6A64; /* --fv-label, bewust niet lichter */ --bs-secondary-bg: #F2F0EB; /* --fv-papier-warm */ --bs-tertiary-bg: #FFFFFF; /* --fv-papier-wit, kaarten en panelen */ --bs-primary: #3D5247; /* --fv-salie */ --bs-primary-rgb: 61, 82, 71; --bs-primary-text-emphasis: #2E3F36; --bs-primary-bg-subtle: #C8D5CF; --bs-primary-border-subtle: #C8D5CF; --bs-border-color: #DFDBD4; /* --fv-lijn */ /* Bijna vierkant; nooit ronder. Alle maten gelijk, ook 'pill' — een pilvormige badge hoort niet bij deze huisstijl. */ --bs-border-radius: 2px; --bs-border-radius-sm: 2px; --bs-border-radius-lg: 2px; --bs-border-radius-xl: 2px; --bs-border-radius-xxl: 2px; --bs-border-radius-pill: 2px; --bs-link-color: #3D5247; --bs-link-color-rgb: 61, 82, 71; --bs-link-hover-color: #2E3F36; /* --fv-salie-donker */ --bs-code-color: #3D5247; /* De huisstijl kent geen schaduwen. */ --bs-box-shadow: none; --bs-box-shadow-sm: none; --bs-box-shadow-lg: none; --bs-focus-ring-color: rgba(61, 82, 71, 0.15); } /* --- Donker -------------------------------------------------------------- Via `data-bs-theme`, het eigen mechanisme van Bootstrap 5.3, en niet via `@media (prefers-color-scheme: dark)`. Een media query volgt het besturingssysteem en is niet om te zetten; de knop Licht/Donker moet de keuze van de gebruiker kunnen bewaren. De waarden komen uit de `--fv-donker-*`-set van tokens.css v1.1. */ [data-bs-theme="dark"] { --bs-body-bg: #1A251F; /* --fv-donker */ --bs-body-color: #EFEDE8; /* --fv-donker-tekst */ --bs-emphasis-color: #EFEDE8; --bs-heading-color: #EFEDE8; /* koppen even licht als lopende tekst */ --bs-secondary: #A8B7AE; /* --fv-donker-label, ook als knopkleur */ --bs-secondary-rgb: 168, 183, 174; --bs-secondary-color: #A8B7AE; /* --fv-donker-label, NIET lichter */ --bs-secondary-bg: #232F29; /* --fv-donker-warm */ --bs-tertiary-bg: #141D18; /* --fv-donker-paneel */ --bs-primary: #7FAF95; /* --fv-salie-omkeer */ --bs-primary-rgb: 127, 175, 149; --bs-primary-text-emphasis: #7FAF95; --bs-primary-bg-subtle: #33413A; --bs-primary-border-subtle: #33413A; --bs-border-color: #33413A; /* --fv-donker-lijn */ --bs-link-color: #7FAF95; --bs-link-color-rgb: 127, 175, 149; --bs-link-hover-color: #6C9B82; /* --fv-donker-salie-hover */ --bs-code-color: #7FAF95; --bs-focus-ring-color: rgba(127, 175, 149, 0.2); } /* Tekst op een salievlak. In licht is dat papier, in donker het paneel — niet wit, want dat schittert op een donkere achtergrond. De basislaag gebruikt deze variabele voor elke gevulde knop. */ :root { --hs-op-primary: #FCFBF8; } [data-bs-theme="dark"] { --hs-op-primary: #141D18; } /* --fv-donker-op-salie */ /* --- Dezelfde waarden, voor wie geen JavaScript heeft -------------------- Bij de stand 'volg het apparaat' blijft `data-bs-theme` leeg wanneer thema.js niet draait, en zou de weergave licht blijven op een apparaat dat om donker vraagt. Dit blok vangt precies die ene stand op. De waarden staan hier een tweede keer. Dat is geen slordigheid maar een grens van CSS: een declaratieblok is niet te delen tussen een media query en een gewone selector. `tests/test_thema_css.py` vergelijkt de twee blokken regel voor regel, zodat ze niet uit elkaar kunnen lopen. */ @media (prefers-color-scheme: dark) { :root[data-thema-keuze="system"] { --bs-body-bg: #1A251F; /* --fv-donker */ --bs-body-color: #EFEDE8; /* --fv-donker-tekst */ --bs-emphasis-color: #EFEDE8; --bs-heading-color: #EFEDE8; /* koppen even licht als lopende tekst */ --bs-secondary: #A8B7AE; /* --fv-donker-label, ook als knopkleur */ --bs-secondary-rgb: 168, 183, 174; --bs-secondary-color: #A8B7AE; /* --fv-donker-label, NIET lichter */ --bs-secondary-bg: #232F29; /* --fv-donker-warm */ --bs-tertiary-bg: #141D18; /* --fv-donker-paneel */ --bs-primary: #7FAF95; /* --fv-salie-omkeer */ --bs-primary-rgb: 127, 175, 149; --bs-primary-text-emphasis: #7FAF95; --bs-primary-bg-subtle: #33413A; --bs-primary-border-subtle: #33413A; --bs-border-color: #33413A; /* --fv-donker-lijn */ --bs-link-color: #7FAF95; --bs-link-color-rgb: 127, 175, 149; --bs-link-hover-color: #6C9B82; /* --fv-donker-salie-hover */ --bs-code-color: #7FAF95; --bs-focus-ring-color: rgba(127, 175, 149, 0.2); } }