/* ══════════════════════════════════════════════════════════════ NORTHBOUND · merk en kopbalk Eén gedeeld bestand voor alle pagina's, zodat het woordmerk en de donkere balk op één plek staan en niet twaalf keer gekopieerd zijn. Het woordmerk is gezette tekst, geen afbeelding. Een raster wordt op twintig pixels hoogte altijd zacht; tekst is op elke pixel- dichtheid scherp en de spatiëring is tot op de honderdste af te stemmen. Dat laatste is wat een woordmerk onderscheidt van gewoon gezette tekst. ══════════════════════════════════════════════════════════════ */ .merk{display:flex;flex-direction:column;align-items:center;gap:5px; line-height:1;white-space:nowrap;color:var(--nb-merk-kleur,#14181D)} .merk-w{font-family:'Jost',-apple-system,BlinkMacSystemFont,sans-serif; font-weight:500;font-size:16.5px;letter-spacing:.325em; /* Drie correcties die gezette tekst tot een woordmerk maken. 1 · letter-spacing zet ook ruimte áchter de laatste letter; zonder dit staat het woord optisch links van het midden en klopt de uitlijning met de rand niet */ margin-right:-.325em; /* 2 · de N heeft links een schouderwit dat het merk van de kolomrand wegduwt; weghalen zodat de stam vlak met de marge staat */ margin-left:-.045em; /* 3 · kerningparen zijn gemaakt voor krappe zetting. Bij deze spatiëring trekken ze juist enkele paren scheef en verstoren ze het ritme; uit laten staan. */ font-kerning:none;font-feature-settings:"kern" 0; text-transform:uppercase;color:inherit} .merk-s{font-family:'Jost',-apple-system,BlinkMacSystemFont,sans-serif; font-weight:400;font-size:7.5px;letter-spacing:.38em;margin-right:-.38em; font-kerning:none;font-feature-settings:"kern" 0; text-transform:uppercase;color:var(--nb-merk-sub,rgba(20,24,29,.52))} @media(max-width:999px){ .merk-w{font-size:15px;letter-spacing:.3em;margin-right:-.3em} .merk-s{font-size:7px;letter-spacing:.34em;margin-right:-.34em} } /* Onder 430px wordt de ondertitel zes pixels en dat is geen tekst meer maar een grijze veeg. Daar staat alleen de naam. */ @media(max-width:430px){ .merk-w{font-size:14px;letter-spacing:.26em;margin-right:-.26em} .merk .merk-s{display:none} } /* ── de kopbalk ──────────────────────────────────────────────── Donker vlak, ivoren letter. Op inkt houdt het woordmerk zijn vorm beter op kleine maat: een lichte letter zakt niet weg in de achtergrond zoals een donkere letter op canvas dat doet. Wil je terug naar wit, dan is dit het enige blok dat je aanraakt. */ nav:not(.dots), .nb-balk{ --nb-merk-kleur:#FBFAF8; --nb-merk-sub:rgba(251,250,248,.52); background:#14181D; border-bottom:1px solid transparent} nav:not(.dots){backdrop-filter:none;-webkit-backdrop-filter:none} nav:not(.dots).vast{border-bottom-color:rgba(251,250,248,.14)} /* een losse balk krijgt dezelfde binnenmaat als de navigatie */ .nb-balk{display:flex;align-items:center;gap:16px; padding:13px 20px;margin:0 calc(50% - 50vw); padding-left:max(20px,calc(50vw - var(--wrap,1120px)/2 + 20px)); padding-right:max(20px,calc(50vw - var(--wrap,1120px)/2 + 20px))} @media(min-width:760px){.nb-balk{padding-top:14px;padding-bottom:14px}} /* links en tekst in de balk */ nav:not(.dots) .menu a{color:rgba(251,250,248,.68)} nav:not(.dots) .menu a:hover, nav:not(.dots) .menu a:focus-visible, nav:not(.dots) .menu a.hier{color:#FBFAF8} nav:not(.dots) .menu a::after{background:#FBFAF8} .nb-balk .reg a,.nb-balk .back{color:rgba(251,250,248,.7)} .nb-balk .reg a:hover,.nb-balk .back:hover{color:#FBFAF8} /* de taalkeuze */ .taalknop{color:rgba(251,250,248,.68)} .taalknop:hover{color:#FBFAF8;border-color:rgba(251,250,248,.22)} .taalknop[aria-expanded=true]{color:#FBFAF8; border-color:rgba(251,250,248,.3);background:rgba(251,250,248,.07)} /* het paneel blijft licht: een donker menu op een donkere balk verliest zijn rand en gaat zweven */ .taalmenu{background:#fff;border-color:rgba(20,24,29,.14); box-shadow:0 2px 6px rgba(0,0,0,.18),0 18px 44px -16px rgba(0,0,0,.45)} /* de knop keert om: ivoor vlak, inkt letter */ nav:not(.dots) .navr .btn.sm{background:#FBFAF8;color:#14181D;border-color:#FBFAF8} nav:not(.dots) .navr .btn.sm::after{background:#14181D;color:#FBFAF8} nav:not(.dots) .navr .btn.sm:hover{background:#fff;border-color:#fff} /* het hamburgerteken en het uitklapmenu */ .navtog span{background:#FBFAF8} .mobmenu{background:#14181D;border-top-color:rgba(251,250,248,.14)} .mobmenu a{color:#FBFAF8;border-bottom-color:rgba(251,250,248,.14)} /* ── terug naar de site ──────────────────────────────────────── Op losse pagina's zonder navigatie moet je altijd terug kunnen. */ .nb-terug{margin-left:auto;display:inline-flex;align-items:center;gap:8px; font-family:'Jost',-apple-system,sans-serif;font-size:14px; color:rgba(251,250,248,.72);text-decoration:none; padding:7px 14px 7px 12px;border:1px solid rgba(251,250,248,.22); border-radius:999px;transition:color .25s,border-color .25s,background-color .25s} .nb-terug:hover{color:#FBFAF8;border-color:rgba(251,250,248,.45); background:rgba(251,250,248,.07)} .nb-terug::before{content:"\2190";font-size:13px;line-height:1} @media(max-width:430px){.nb-terug span{display:none} .nb-terug{padding:7px 11px}} /* ══════════════════════════════════════════════════════════════ MENU IN EEN LOSSE BALK De Nederlandse homepage heeft een eigen