/* ═══════════════════════════════════════════════════════════════════════════ DE HUISSTIJL VAN DE TOOL — talentpull Geserveerd op /assets/merk.css Dit bestand is de énige plek waar een kleur, een letter, een maat of een ronding van de tool wordt vastgelegd. Staat er ergens anders in de code een hexcode, dan is dat per definitie een fout die nog opgeruimd moet worden — scripts/proef-stijl.js telt ze en laat het aantal alleen dalen. DIT GAAT NIET OVER DE ADVERTENTIES. De advertenties die met de tool gemaakt worden dragen de kleur van de KLANT, niet die van ons. Die wereld staat in src/services/templates/ en heeft zijn eigen bron. Waarom dat streng gescheiden moet blijven staat in docs/tool-design.md sectie 1. Kort: het oude merkblauw was tegelijk onze kleur én de terugvalkleur van elke klant zonder eigen kleur. WAAROM DE NAMEN OVER ROLLEN GAAN EN NIET OVER KLEUREN Er stond hier bijna `--blauw: #54A0FD`. Dat is precies de fout die deze hele operatie veroorzaakt heeft: de vorige huisstijl heette overal "bb-blauw", en toen het merk veranderde was elke naam in de codebase een leugen. Een token dat `--blauw` heet en geel is, is erger dan geen token. Dus: `--actie` is de kleur van iets waar je op klikt. Wat die kleur ís, mag morgen veranderen zonder dat er één pagina hoeft mee te veranderen. TWEE NAMEN DIE HIER MET OPZET NIET IN STAAN `--muted` en `--radius`. In design/theme.css en src/styles/brand.css — de twee oude, nooit geladen merkbestanden — betekent `--muted` het tégenovergestelde: in de één een TEKSTkleur, in de ander een VLAKkleur. Wie die twee bestanden naast elkaar laadt krijgt lichtgrijze tekst op lichtgrijs. Beide namen zijn hier verboden; gebruik `--tekst-zacht` of `--vlak`, en `--rond-kaart` of `--rond-knop`. ═══════════════════════════════════════════════════════════════════════════ */ /* ── DE LETTERS ───────────────────────────────────────────────────────────── Matt voor koppen, Figtree voor alles wat je leest. Zo heeft de ontwerper het aangeleverd en zo staan ze in de merkvoorbeelden. LET OP — Matt is nu de PROEFVERSIE (Matt_Trial). De licentie wordt gekocht vóór productie; zie public/assets/fonts/Matt-LET-OP.txt. Zodra het echte bestand er is verandert alleen de regel hieronder, verder niets: elke pagina praat over `var(--font-kop)` en niet over een bestandsnaam. Matt is één variabel bestand van 283 KB dat alle gewichten dekt. Dat is meer dan je wilt. De foundry levert bij een gekochte licentie woff2 (±90 KB); dat is het moment om dit te vervangen, niet eerder — een proeffont converteren heeft geen zin. */ @font-face { font-family: "Matt"; src: url("/assets/fonts/Matt-Variable.ttf") format("truetype-variations"); font-weight: 100 900; font-display: swap; } /* ⇩ Figtree — geschreven door scripts/merk-fonts-ophalen.js. Niet met de hand aanpassen. */ @font-face { font-family:"Figtree"; font-style:normal; font-weight:400; src:url("/assets/fonts/Figtree-400-latin-ext.woff2") format("woff2"); font-display:swap; 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:"Figtree"; font-style:normal; font-weight:400; src:url("/assets/fonts/Figtree-400-latin.woff2") format("woff2"); font-display:swap; 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:"Figtree"; font-style:normal; font-weight:500; src:url("/assets/fonts/Figtree-500-latin-ext.woff2") format("woff2"); font-display:swap; 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:"Figtree"; font-style:normal; font-weight:500; src:url("/assets/fonts/Figtree-500-latin.woff2") format("woff2"); font-display:swap; 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:"Figtree"; font-style:normal; font-weight:600; src:url("/assets/fonts/Figtree-600-latin-ext.woff2") format("woff2"); font-display:swap; 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:"Figtree"; font-style:normal; font-weight:600; src:url("/assets/fonts/Figtree-600-latin.woff2") format("woff2"); font-display:swap; 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:"Figtree"; font-style:normal; font-weight:700; src:url("/assets/fonts/Figtree-700-latin-ext.woff2") format("woff2"); font-display:swap; 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:"Figtree"; font-style:normal; font-weight:700; src:url("/assets/fonts/Figtree-700-latin.woff2") format("woff2"); font-display:swap; 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; } /* ⇧ einde Figtree */ :root { /* ═══ KLEUR ═══════════════════════════════════════════════════════════════ Het merk levert er drie. Alle andere kleuren hieronder zijn daaruit afgeleid, en elke keuze is doorgerekend op leesbaarheid in plaats van gekozen op gevoel. De verhoudingen staan erbij: 4,5:1 is de ondergrens voor tekst, 3:1 voor grote tekst en voor randen die iets betekenen. */ /* De drie merkkleuren, ongewijzigd zoals aangeleverd. */ --merk: #54A0FD; /* 2,68:1 op wit — NOOIT tekst, alleen vlak of accent */ --merk-diep: #12224F; /* 15,36:1 op wit — AAA */ --merk-accent: #FFC93C; /* 1,54:1 op wit — NOOIT tekst, alleen vlak */ /* ── De lucht uit de merkbeelden ── De ontwerper leverde drie beelden aan: witte vormen die zweven in een blauwe lucht. Sem wil die sfeer op de inlogpagina, en dan klopt het niet om de kleur op gevoel na te maken — dan zit je er net naast en zie je dat zodra het beeld ernaast staat. Deze drie zijn daarom uit glas.jpg BEMONSTERD, niet gekozen: de donkerste hoek is rechtsboven, de lichtste linksonder, en het verloop loopt daar diagonaal tussendoor. Het is een grijzer, minder verzadigd blauw dan --merk; met een mengsel van --merk en --merk-diep kom je er niet, dat heb ik nagerekend. Alleen als VLAK, en let op de richting: op deze lucht werkt DONKERE tekst beter dan witte. Nagerekend: wit erop --tekst-sterk erop --lucht-diep 3,73 4,12 --lucht 3,24 4,75 ← AA --lucht-licht 2,16 7,10 Witte tekst haalt het nergens. Donkerblauwe tekst haalt het vanaf --lucht. Wat je echt moet lezen zet je hoe dan ook op een kaart. */ --lucht-diep: #4B85D7; /* rechtsboven in het beeld — de donkerste hoek */ --lucht: #5990E0; /* linksboven */ --lucht-licht: #86B4E8; /* linksonder — waar het licht vandaan komt */ /* ── Waar het lichte blauw wél werkt ── Op wit haalt het 2,68:1 en is het dus onbruikbaar voor tekst én voor een knop met witte tekst erop. Op het donkerblauw haalt het 5,72:1 en is het een prima accent — vandaar dat een donkere zijbalk met blauwe markering wél kan en een lichtblauwe knop niet. */ /* ── Actie: waar je op klikt ── Donkerblauw met witte tekst haalt 15,36:1. De gele knop met donkerblauwe tekst haalt 10,00:1 en kan dus ook — dat is precies het verschil tussen de twee voorbeelden van de ontwerper, en het is een keuze en geen beperking. */ --actie: var(--merk-diep); --actie-tekst: #FFFFFF; --actie-hover: #1C3372; /* 11,74:1 — iets lichter, zodat hover voelbaar is */ --actie-rand: #54A0FD; /* toetsomlijning: 5,72:1 tegen --actie */ /* ── Link: het merkblauw, ver genoeg verdonkerd om te lezen ── 35% richting het donkerblauw. Onder die grens haal je 4,5:1 niet. */ --link: #3D74C0; /* 4,71:1 op wit — AA */ --link-hover: #2C5896; /* 6,63:1 */ /* ── Tekst ── De grijzen zijn niet grijs: ze zijn uit het merkdonkerblauw in wit gemengd. Daardoor horen ze bij de familie in plaats van er neutraal naast te staan — hetzelfde idee als de color-mix in leadform-template.html. */ --tekst-sterk: #12224F; /* 15,36:1 — koppen */ --tekst: #2E3D64; /* 10,67:1 — lopende tekst */ /* LET OP — deze stond eerst op #7D859E, en dat was 3,67:1 op wit. De regel erbij luidde "alleen ondertitels en meta, nooit iets dat je moet kunnen lezen om verder te kunnen". Dat klinkt als een geldige uitzondering, maar die bestaat niet: WCAG kent geen categorie tekst die minder leesbaar mag zijn omdat hij secundair is. En de tekst die dit token in de praktijk draagt — "Zwolle · 12 vestigingen", "3 campagnes", kolomkoppen — is precies wat je moet kunnen lezen om te weten waar je klikt. Gemeten over de acht ontwerpschermen die er toen stonden: 8 van de 8 vielen hierop om, met tussen de 2 en 17 gevallen per scherm. Eén token dus, en honderd gevallen. #6A7186 is dezelfde tint op 85%. Hij haalt 4,5:1 op alle drie de vlakken waar hij op staat, en het verschil in helderheid met --tekst blijft 11,8% (was 18,8%) — genoeg om de rangorde te zien. Donkerder maken kan, maar dan verdwijnt het onderscheid waar dit token voor bestaat. */ --tekst-zacht: #6A7186; /* 4,85:1 op --kaart · 4,72 op --grond · 4,54 op --vlak Alleen op die drie. De gekleurde vlakken dragen hun eigen tekstkleur. */ --tekst-op-diep: #FFFFFF; /* 15,36:1 op --merk-diep */ --tekst-zacht-op-diep:#B8BDCA; /* 8,17:1 op --merk-diep */ /* ── Vlakken en lijnen ── */ --grond: #FBFCFC; /* de pagina */ --vlak: #F7F7F9; /* ingezonken vlakken, invoervelden in rust */ --kaart: #FFFFFF; /* alles wat boven de pagina ligt */ --lijn: #E7E9ED; /* gewone scheiding */ --lijn-sterk: #D4D7DF; /* velden en actieve randen */ /* ── Betekeniskleuren, met hun eigen vlak ── Kleur-plus-vlak in paren, zoals console/publiek/assets/console.css het al doet. Elke kleur leest op zijn eigen vlak (≥ 4,5:1) én op wit. --let-op is bewust róder en donkerder dan het gebruikelijke oranje. Geel is hier het MERKACCENT, dus een waarschuwing in geel zou niet meer als waarschuwing lezen. De eerste kandidaat (#B4690E) lag maar 2,75:1 van het merkgeel; deze ligt er 4,76:1 vanaf. */ --gelukt: #0C6E50; --gelukt-vlak: #E2EEEA; /* 6,25 op wit · 5,25 op eigen vlak */ --let-op: #9A3412; --let-op-vlak: #F3E7E3; /* 7,31 op wit · 6,04 op eigen vlak */ --fout: #B3261E; --fout-vlak: #F6E5E4; /* 6,54 op wit · 5,37 op eigen vlak */ --merk-vlak: #EAF4FF; /* draagt --tekst-sterk op 13,81:1 */ --accent-vlak: #FFF9E8; /* draagt --tekst-sterk op 14,60:1 */ /* ═══ LETTER ══════════════════════════════════════════════════════════════ */ --font-kop: "Matt", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-tekst: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Een schaal met vaste stappen, zodat niemand halverwege 15,5px verzint. De tool is een werkomgeving: 15px lopende tekst leest de hele dag prettig, 14px is voor dichte tabellen en 13px alleen voor labels. */ --maat-xs: 12px; /* meta, tijdstempels */ --maat-s: 13px; /* labels, chips */ --maat-m: 14px; /* tabellen, dichte lijsten */ --maat-l: 15px; /* lopende tekst — de standaard */ --maat-xl: 17px; /* uitgelichte tekst, grote knoppen */ --kop-s: 20px; --kop-m: 24px; --kop-l: 30px; --kop-xl: clamp(30px, 5vw, 44px); /* alleen op lege staten en welkomstschermen */ --regel-dicht: 1.35; /* koppen */ --regel: 1.55; /* lopende tekst */ --regel-ruim: 1.7; /* lange lappen tekst, uitleg */ /* ═══ RUIMTE ══════════════════════════════════════════════════════════════ Eén reeks van 4px-stappen. Wie iets anders nodig heeft, heeft meestal een ander probleem. */ --ruimte-1: 4px; --ruimte-2: 8px; --ruimte-3: 12px; --ruimte-4: 16px; --ruimte-5: 24px; --ruimte-6: 32px; --ruimte-7: 48px; --ruimte-8: 64px; --pagina-marge: 30px; --kaart-padding: 22px 24px; --raster-gat: 16px; /* ═══ VORM ════════════════════════════════════════════════════════════════ De namen zeggen waar de ronding op zit, niet hoe groot hij is. Een variant die overal strakker wil zijn verandert deze vier regels en verder niets. */ --rond-veld: 10px; --rond-knop: 12px; --rond-tegel: 16px; --rond-kaart: 18px; --rond-chip: 999px; /* Schaduwen uit het merkdonkerblauw in plaats van uit zwart: een grijze schaduw onder een blauwe kaart ziet er vuil uit. */ /* ── De grafiek ─────────────────────────────────────────────────────────── Eigen rollen, want de grafiek staat niet altijd op dezelfde ondergrond. Op het dashboard ligt hij op een donker paneel; een ontwerp dat dat paneel licht maakt, verlegt deze drie en hoeft niets met !important te overrulen. Geen nieuwe kleuren: alles is afgeleid van bestaande tokens. */ --grafiek-lijn: var(--merk); --grafiek-tweede: color-mix(in srgb, var(--kaart) 55%, transparent); --grafiek-as: color-mix(in srgb, var(--kaart) 45%, transparent); --grafiek-raster: color-mix(in srgb, var(--kaart) 10%, transparent); --grafiek-punt: var(--merk-diep); --meta-blauw: #1877F2; /* Facebook, op de koppelknop */ /* LET OP — hier stond een commentaar dat NOOIT WERD AFGESLOTEN. Gevonden 05-09-2026. De `/*` hieronder liep door tot het eerstvolgende `*/` acht regels verderop, en slikte daarmee --schaduw-1, --schaduw-2 en --schaduw-3 op. Die drie waren dus nergens gedefinieerd terwijl ze 59 keer gebruikt worden (campagnes.html 22x, input.html 15x, configure.html 6x, portaal 4x, flow-stepper 4x, ...). Een `var()` zonder definitie en zonder terugval maakt de hele regel ongeldig, dus er viel op elke pagina stilletjes elke schaduw weg. Geen enkele proef zag het: een kapot commentaar is geen kleur. Daarom staat er nu ook scripts/proef-tokens-bestaan.js. */ --ad-vlak: #0F1117; /* het donkere vlak waarop een advertentievoorbeeld wordt getoond */ /* ── DONKER: de editor en alles wat een werkblad is ───────────────────── De advertentie-editor is een canvas-gereedschap. Die is donker, en dat blijft zo: het werk van de klant moet het lichte ding op het scherm zijn, niet de omlijsting eromheen. Licht maken zou geen andere vormgeving zijn maar een ander ontwerp, en dat viel buiten de opdracht. De editor had ~20 bijna-gelijke grijzen (#0d0f14 tot #5a6376), allemaal los ingetypt. Hieronder staan er vier vlakken en twee lijnen voor in de plaats, gemengd uit --merk-diep zodat ze bij de familie horen — dezelfde redenering als bij de lichte grijzen hierboven. Nagerekend, niet gegokt (contrast op elk vlak): grond vlak kaart hoog --tekst-op-diep 19,18 18,01 16,63 12,64 --tekst-zacht… 10,20 9,58 8,85 6,72 --merk 7,14 6,71 6,20 4,71 --merk-accent 12,48 11,73 10,83 8,23 Alle vier halen overal 4,5:1. --merk zit op --diep-hoog op 4,71 en dus krap: gebruik het daar als accent, niet als lopende tekst. De vlakken liggen dicht bij elkaar (1,06 tot 1,32) — zo werkt een donkere schil: het onderscheid komt van de lijnen, niet van de vlakken zelf. --diep-lijn haalt 2,03 tot 2,34 tegen de vlakken en is als 1px-lijn duidelijk te zien. */ --diep-grond: #080E21; /* de diepste laag: achter alles */ --diep-vlak: #0B1531; /* rails, balken, ingezonken vlakken */ --diep-kaart: #0F1C41; /* panelen en velden die omhoog komen */ --diep-hoog: #23315B; /* hover, actieve tab, geselecteerde rij */ --diep-lijn: #414E72; /* de gewone scheiding */ --diep-lijn-sterk:#636D8B; /* waar een rand echt moet spreken */ /* Signaalkleuren op donker. De lichte varianten (--gelukt #0E7C5A e.d.) zijn hier onleesbaar; dit zijn hun tegenhangers. --let-op-op-diep is bewust oranjeroder dan het merkgeel: 1,63 verschil met --merk-accent, tegen 1,15 voor de eerste kandidaat. Zelfde afweging als bij --let-op in het lichte palet — een waarschuwing mag niet op het merk lijken. */ --gelukt-op-diep: #46C98A; /* 9,12 op --diep-grond · 6,01 op --diep-hoog */ --fout-op-diep: #FF8A85; /* 8,42 · 5,55 */ --let-op-op-diep: #F08A3C; /* 7,68 · 5,06 */ /* ── CANVAS-OVERLAY: met opzet GEEN merkkleuren ───────────────────────── De selectierand en de hulplijnen worden bovenop de advertentie van de klant getekend. Zou de selectie --merk worden, dan verdwijnt hij zodra een klant zelf blauw gebruikt: #4C8DFF haalt tegen --merk (#54A0FD) maar 1,19:1. Gemeten, en het is precies de val waar dit hele project omheen bouwt — onze kleur en die van de klant mogen niet door elkaar lopen. Daarom is dit gereedschapskleur en geen merkkleur, en daarom is het een PAAR: een gekleurde streep met een witte tegenstreep. Wit haalt 21:1 op zwart en 2,68 op ons eigen blauw, dus samen blijft de selectie zichtbaar op welke ondergrond de klant ook kiest. De hulplijn is magenta om dezelfde reden: die kleur komt in geen enkele merkhuisstijl per ongeluk voorbij. */ --canvas-selectie: #4C8DFF; --canvas-selectie-contra: #FFFFFF; --canvas-selectie-vul: color-mix(in srgb, var(--canvas-selectie) 30%, transparent); --canvas-hulplijn: #FF3D8A; --schaduw-1: 0 1px 2px color-mix(in srgb, var(--merk-diep) 8%, transparent); --schaduw-2: 0 4px 14px color-mix(in srgb, var(--merk-diep) 10%, transparent); --schaduw-3: 0 12px 32px color-mix(in srgb, var(--merk-diep) 14%, transparent); /* Toetsomlijning. Eén token, zodat "kan ik met tab door dit scherm" nergens per pagina opnieuw bedacht wordt. */ --focus: 0 0 0 3px color-mix(in srgb, var(--merk) 55%, transparent); } /* ── HIER STAAT MET OPZET GEEN ENKELE OPMAAKREGEL ────────────────────────── Geen `body { font-family: … }`, geen `.knop`, geen `.kaart`. Dat is een bewuste keuze en geen half werk. Twee redenen: 1. DIT BESTAND MAG NIETS VERANDEREN ALS HET WORDT INGELADEN. Het gaat straks op alle 40 pagina's. Zou het `body` of `h1` zetten, dan verschuift op elke pagina de letter zodra de link erin staat — en dan is "de tool ziet er onveranderd uit" geen controle meer die je kunt doen. Nu is die controle hard: er verwijst nog niets naar deze tokens, dus er hoort letterlijk geen pixel te verschuiven. Verschuift er toch iets, dan is er iets anders aan de hand en wil je dát weten. Een @font-face declareren laadt trouwens niets: de browser haalt een lettertype pas op als een regel het echt gebruikt. Deze 119 KB kost dus nul zolang niemand var(--font-tekst) aanroept. 2. KNOPPEN EN KAARTEN ZIJN PRECIES WAAR DE DRIE RICHTINGEN VERSCHILLEN. Een donkerblauwe pil of een gele; een donkere zijbalk of een lichte; ruim of compact. Die hier vastleggen zou de keuze al maken. De componentlaag komt zodra Sem een richting heeft gekozen. Wie de tokens nu al wil gebruiken (de variantpagina's in design/ doen dat), schrijft zijn eigen regels bovenop var(--…). */ /* ── De periodekiezer ────────────────────────────────────────────────────── Eén vorm op elk scherm waar cijfers staan. Stond eerst per scherm anders -- en twee kiezers die er anders uitzien laten je denken dat ze iets anders doen. Zie public/assets/periodekiezer.js. */ .bb-periode { border: 1px solid var(--lijn-sterk); border-radius: var(--rond-veld); background: var(--kaart); color: var(--tekst-sterk); font-family: inherit; font-size: var(--maat-s); font-weight: 600; padding: 0 var(--ruimte-3); min-height: 36px; cursor: pointer; } .bb-periode:hover { background: var(--vlak); } .bb-periode:focus-visible { outline: none; border-color: var(--actie-rand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merk) 40%, transparent); } /* ── Het kruimelpad ──────────────────────────────────────────────────────── ÉÉN definitie, want er waren er vijf en ze waren uit elkaar gelopen: campagnes op 13px, de andere vier op 14px, en campagne.html gaf zijn links ook nog een knopvorm met achtergrond. Vijf schermen die hetzelfde element tonen en er alle vijf iets anders van maakten -- hetzelfde patroon als bij de verdeelregel en de periodekiezer, alleen dan in CSS. De maat is die van campagnes.html (Sems keuze, 09-09-2026): een kruimelpad is navigatie, geen kop, en hoort niet met de titel eronder te concurreren. Een scherm mag hier nog van afwijken -- de regels hieronder staan in merk.css en dus vóór het eigen stijlblok van een pagina. Doe dat alleen met een reden erbij, anders lopen ze over een maand weer uit elkaar. */ .kruimel { display: flex; align-items: center; gap: var(--ruimte-2); min-width: 0; flex-wrap: wrap; font-size: var(--maat-s); font-weight: 600; color: var(--tekst-zacht); min-height: 19px; } /* Een kruimel is een link en dus een raakvlak: minstens 24 px hoog om aan te kunnen wijzen, ook op een telefoon. */ .kruimel a { display: inline-flex; align-items: center; gap: var(--ruimte-2); min-height: 24px; color: var(--tekst-zacht); text-decoration: none; border-radius: var(--rond-veld); } .kruimel a:hover { color: var(--link-hover); text-decoration: underline; } .kruimel a:focus-visible { outline: none; box-shadow: var(--focus); } /* Het scheidingsteken en de plek waar je nu bent. Beide selectoren, want de schermen gebruiken door elkaar `svg`, `svg.sep`, `b` en `.nu`. */ .kruimel svg, .kruimel svg.sep { width: 13px; height: 13px; flex: none; color: var(--lijn-sterk); } .kruimel b, .kruimel .nu { color: var(--tekst-sterk); font-weight: 700; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }