/* Gedeelde basis: tokens, reset, typografie, en alles wat op meer dan een view voorkomt. Wordt voor views.css geladen, zodat een viewspecifieke regel deze kan overschrijven. Bij twijfel hoort een regel hier en niet in views.css. */ /* Figtree is het voorgeschreven lettertype van de VNG-huisstijl. Zelf gehost en niet van Google Fonts geladen: op een congres zit de hele zaal achter een wifi, en een lettertype dat van een externe server moet komen valt dan terug op Arial terwijl er gepresenteerd wordt. Zelf hosten laat bovendien fonts.googleapis.com en fonts.gstatic.com uit de CSP verdwijnen. Vier subsets in plaats van een bestand: de unicode-ranges zijn overgenomen van Google Fonts, zodat de browser latin-ext alleen ophaalt als er een teken in staat dat daarin zit. Cursief hoort erbij omdat views.css het gebruikt. Licentie: portaal/font/OFL.txt, meeleveren is een voorwaarde van de OFL. */ @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/font/figtree-normal-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: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/font/figtree-normal-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: "Figtree"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/font/figtree-italic-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: "Figtree"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("/font/figtree-italic-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; } /* De twee merkkleuren van de VNG-huisstijl. Alles hieronder is hiervan afgeleid. De waarden zijn geverifieerd tegen het officiele logo-SVG, waarin exact deze twee kleuren voorkomen. Zie docs/huisstijl-vng.md. */ :root{ --vng-donkerblauw: #143462; --vng-cyaan: #00a1e5; /* Rollen. De contrastverhouding op wit staat erbij: de handleiding toetst op WCAG 2.1 AA en dat is voor een overheidsportaal geen vrije keuze. */ --inkt: #143462; /* koppen, looptekst, links 12.37 */ --inkt-zwak: #4A5F80; /* secundaire tekst, meta 6.48 */ --lijn-accent: #00a1e5; /* lijnvoering, NOOIT tekst (op wit 2.90) */ --lijn: #d0d6e0; /* scheidingslijnen, 20% donkerblauw */ --grond: #e8ebef; /* paginagrond, 10% donkerblauw */ --vlak: #ffffff; --inkt-diep: #102a4e; /* donkerblauw bij hover en actief */ /* Twee van de twaalf accentkleuren uit de handleiding, alleen voor status: gevonden kunnen worden of niet. Beide dragen zwarte tekst, zoals voorgeschreven. */ --vng-hardgroen: #00a253; --vng-geel: #f7ad00; /* Rood alleen als rand of vlak bij een fout, nooit als tekst: de handleiding geeft er zwarte tekst bij, en 4.14:1 op wit is geen tekstkleur. */ --vng-rood: #e63b44; /* Maatvoering. De handleiding rekent in margetegels van 7 mm, met 4 tegels voor een grote hoek en 1 voor een kleine. Op Full HD komt een tegel neer op ongeveer 47 px en dat is voor kaarten in een webinterface te grof, dus we nemen de verhouding over en niet de maat. Bewuste afwijking, vastgelegd in docs/superpowers/specs/2026-09-22-vng-huisstijl-overhaul-design.md. */ --tegel: 8px; --hoek-klein: 8px; /* 1 tegel */ --hoek-groot: 32px; /* 4 tegels */ /* De vorm zelf: twee ronde hoeken en twee scherpe. Groot voor kaarten, klein voor tegels, zodat de ronding de inhoud niet opeet. */ --vorm-groot: var(--hoek-groot) 0 var(--hoek-groot) 0; --vorm-klein: calc(var(--hoek-klein) * 2) 0 calc(var(--hoek-klein) * 2) 0; --font: "Figtree", Arial, Helvetica, sans-serif; /* De typografische schaal is de kleine terts uit de handleiding, ratio 1.2 */ --t-label: 11px; --t-meta: 13px; --t-basis: 15px; --t-lead: 18px; --t-kaart: 22px; --t-sectie: 26px; --t-pagina: 37px; --t-hero: 54px; /* Schaduw op het nieuwe donkerblauw. Geen huisstijlelement, wel nodig om kaarten van de grond te tillen. */ --sch: 0 1px 2px rgba(20,52,98,.05), 0 10px 30px rgba(20,52,98,.06); } *{box-sizing:border-box}html{scroll-behavior:smooth} /* hidden wint altijd, ook van een klasse met display:flex (.fmt, .card). */ [hidden]{display:none!important} body{margin:0;font-family:var(--font);font-size:var(--t-basis);color:var(--inkt);background:var(--vlak);-webkit-font-smoothing:antialiased;line-height:1.55} a{color:inherit;text-decoration:none}.wrap{max-width:1560px;margin:0 auto;padding:0 24px} h1,h2,h3{letter-spacing:-.015em;margin:0}p{margin:0} /* Zonder expliciete grootte valt een kop terug op 2em van de browser, en dat is geen stap uit de schaal. */ h1{font-size:var(--t-pagina)}h2{font-size:var(--t-sectie)}h3{font-size:var(--t-kaart)} .view{display:none} .hdr{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--lijn)} .hdr-in{display:flex;align-items:center;gap:14px;height:70px} .brand{display:flex;align-items:center;gap:12px}.brand img{height:30px;display:block} .brand .vng{font-size:var(--t-label);color:var(--inkt-zwak);border-left:1px solid var(--lijn);padding-left:12px;line-height:1.25} .nav{display:flex;gap:1px;margin-left:2px} .nav a{padding:8px 9px;border-radius:var(--hoek-klein);font-weight:600;font-size:var(--t-meta);color:var(--inkt-zwak);white-space:nowrap;cursor:pointer} .nav a:hover{color:var(--inkt);text-decoration:underline;text-underline-offset:4px}.nav a.on{color:var(--inkt);background:var(--grond)} .hdr-right{margin-left:auto;display:flex;align-items:center;gap:11px} .gem{font-size:var(--t-meta);text-align:right;max-width:260px;min-width:0}.gem small,.gem b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gem small{color:var(--inkt-zwak);display:block;font-size:var(--t-label)}.gem b{color:var(--inkt)} /* De avatar is de ingang naar #/account. Was een
; als heeft hij een zichtbare focusring nodig en moet hij aanwijsbaar zijn, anders is het een link die niemand als link herkent en die met het toetsenbord onvindbaar is. */ .av{width:36px;height:36px;border-radius:999px;background:var(--inkt);color:#fff;display:grid;place-items:center;font-weight:800;font-size:var(--t-meta);flex:none;text-decoration:none;cursor:pointer;transition:box-shadow .15s} a.av:hover{box-shadow:0 0 0 3px var(--grond)} a.av:focus-visible{outline:2px solid var(--inkt);outline-offset:2px} .btn{display:inline-flex;align-items:center;gap:8px;border:0;font-family:var(--font);font-weight:700;border-radius:var(--hoek-klein);cursor:pointer;font-size:var(--t-basis);line-height:1} .btn-pri{background:var(--inkt);color:#fff;padding:12px 18px}.btn-pri:hover{background:var(--inkt-diep)} .btn-donker{background:var(--inkt);color:#fff;padding:12px 18px}.btn-donker:hover{background:var(--inkt-diep)} .btn-ghost{background:#fff;border:1px solid var(--lijn);color:var(--inkt);padding:11px 16px}.btn-ghost:hover{border-color:var(--lijn-accent)} .btn-sm{padding:8px 13px;font-size:var(--t-meta)} /* Acties die eruitzien als een link maar een knop zijn, zodat ze met Tab en Enter werken. Navigatie gebruikt echte href's. */ .alsLink{font:inherit;color:var(--inkt);font-weight:700;background:none;border:0;padding:0;cursor:pointer;text-align:left} /* De statusregel op #/account: ben je nu vindbaar of niet, en waarom niet. Vindbaar zijn vraagt twee dingen tegelijk — zichtbaar aan én expertise ingevuld — en dat stond nergens. */ .vindbaar{border-radius:var(--hoek-klein);padding:12px 14px;margin:16px 0;max-width:660px;font-size:var(--t-basis);line-height:1.5} /* Wel of niet vindbaar is status en geen opmaak: dit is de regel die zegt of collega's je kunnen vinden. De handleiding staat een accentkleur toe "als het nodig is om informatie te verduidelijken", en schrijft zwarte of wit uitgespaarde tekst voor op zo'n vlak. VNG Hard groen haalt 6.29 met zwart, VNG Geel 10.93. */ .vindbaar.ja{background:var(--grond);border:1px solid var(--lijn);border-left:6px solid var(--vng-hardgroen);color:var(--inkt)} .vindbaar.nee{background:var(--grond);border:1px solid var(--lijn);border-left:6px solid var(--vng-geel);color:var(--inkt)} .alsLink:hover{text-decoration:underline} /* Zonder zichtbare focus is toetsenbordbediening onbruikbaar: je ziet niet waar je bent. */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--inkt);outline-offset:2px;border-radius:var(--hoek-klein)} /* Donkerblauw en niet cyaan: een focusring moet 3:1 halen, cyaan haalt 2.90. */ input[type=checkbox],input[type=radio]{accent-color:var(--inkt)}.btn-link{color:var(--inkt);font-weight:700;font-size:var(--t-basis);cursor:pointer} footer{border-top:1px solid var(--lijn);background:var(--grond);margin-top:70px} .foot{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:30px 24px;color:var(--inkt-zwak);font-size:var(--t-meta)} .foot .pf{font-weight:800;color:var(--inkt);font-size:var(--t-basis)}.foot .r{margin-left:auto;text-align:right;font-size:var(--t-meta)} .eyebrow{font-size:var(--t-meta);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt)} /* De themachip droeg een kleur per thema. Dat is een geclaimde kleur en dat staat de handleiding niet toe; bovendien haalde de lichtste geen 3:1 met witte tekst. De chip onderscheidt zich nu door vorm en de naam die erin staat. */ .ttag{font-size:var(--t-label);font-weight:800;letter-spacing:.02em;padding:3px 9px;border-radius:999px;display:inline-block;background:var(--grond);color:var(--inkt)} .xchip{font-size:var(--t-label);font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;display:inline-block;border:1px solid var(--lijn);color:var(--inkt-zwak);background:#fff} .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .tile{display:flex;flex-direction:column;background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--hoek-groot);padding:22px;box-shadow:var(--sch);transition:.18s;min-height:182px;cursor:pointer} .tile:hover{transform:translateY(-3px);border-color:var(--lijn);box-shadow:0 14px 40px rgba(20,52,98,.10)} .tile .ti{width:46px;height:46px;border-radius:var(--hoek-klein);background:var(--grond);display:grid;place-items:center;color:var(--inkt);margin-bottom:14px} .tile h3{font-size:var(--t-lead);color:var(--inkt)}.tile p{font-size:var(--t-meta);color:var(--inkt-zwak);margin-top:5px} .tile .foot-row{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:14px} .tile .stat{font-size:var(--t-meta);font-weight:800;color:var(--inkt);background:var(--grond);padding:5px 11px;border-radius:999px} .tile .go{font-size:var(--t-meta);font-weight:700;color:var(--inkt)}.tile:hover .go{color:var(--inkt)} .card{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--hoek-groot);box-shadow:var(--sch)}.card .bd{padding:24px} .crumb{display:flex;align-items:center;gap:8px;color:var(--inkt-zwak);font-size:var(--t-meta);padding-top:26px}.crumb a:hover{color:var(--inkt)} .pagehead{padding:14px 0 26px;border-bottom:1px solid var(--lijn);margin-bottom:30px} /* Met foto wordt de pagehead een kaart in plaats van een blok met een lijn eronder: de foto heeft een rand nodig om tegen te staan, en een losse foto naast tekst met alleen een onderlijn leest als een ongeluk. Zelfde opzet als de themakaart — tekst op zijn eigen grond, foto ernaast en onbedekt. */ .pagehead.metfoto{display:grid;grid-template-columns:1fr 34%;gap:0;align-items:stretch; padding:0;border-bottom:0;background:var(--vlak);border:1px solid var(--lijn); border-radius:var(--hoek-groot);overflow:hidden;box-shadow:var(--sch)} .pagehead.metfoto .phtekst{padding:26px 30px} .pagehead.metfoto .phfoto{position:relative;min-height:200px;background:var(--grond)} .pagehead.metfoto .phfoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} @media(max-width:820px){ .pagehead.metfoto{grid-template-columns:1fr} .pagehead.metfoto .phfoto{min-height:150px} .pagehead.metfoto .phtekst{padding:22px 22px 20px} } @media(max-width:820px){.welkomkaart{min-height:0}} .pagehead .ico{width:54px;height:54px;border-radius:var(--hoek-klein);background:var(--grond);display:grid;place-items:center;color:var(--inkt);margin-bottom:14px} .pagehead h1{font-size:var(--t-sectie);color:var(--inkt)}.pagehead p{font-size:var(--t-basis);color:var(--inkt-zwak);margin-top:8px;max-width:720px} .chip{font-size:var(--t-label);background:var(--grond);color:var(--inkt);padding:3px 10px;border-radius:999px;font-weight:700;display:inline-block} .chip.open{background:#fff;border:1px solid var(--lijn-accent);color:var(--inkt)} .muted{color:var(--inkt-zwak)} .sub-h{display:flex;align-items:baseline;gap:10px;margin:34px 0 16px}.sub-h h2{font-size:var(--t-lead);color:var(--inkt)}.sub-h span{font-size:var(--t-meta);color:var(--inkt-zwak)}.sub-h a{margin-left:auto;font-size:var(--t-meta);font-weight:700;color:var(--inkt);cursor:pointer} .pcard{display:flex;gap:13px;align-items:flex-start;background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--hoek-klein);padding:16px;box-shadow:var(--sch)} .pcard .a{width:46px;height:46px;border-radius:999px;background:var(--inkt);color:#fff;display:grid;place-items:center;font-weight:800;font-size:var(--t-basis);flex:none} .pcard .nm{font-size:var(--t-basis);font-weight:800;color:var(--inkt)}.pcard .role{font-size:var(--t-meta);color:var(--inkt-zwak)} /* Matchreden als blok over de volle breedte: als inline-block viel hij weg tussen de gekleurde tags eronder — Ton had een halve minuut nodig om te zien waarom iemand bovenaan stond. */ .pcard .why{display:block;font-size:var(--t-meta);color:var(--inkt);background:var(--grond);border-left:3px solid var(--lijn-accent);border-radius:0 var(--hoek-klein) var(--hoek-klein) 0;padding:8px 12px;margin-top:10px} .pcard .why b{display:block;font-size:var(--t-label);font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--inkt);margin-bottom:2px} .pcard .acts{margin-top:11px;display:flex;gap:8px}.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} /* Onder 900px verdween de navigatie zonder vervanging: op een telefoon kwam je geen enkele view meer binnen. Nu een uitklapmenu. */ .navknop{display:none;background:none;border:0;padding:8px;border-radius:var(--hoek-klein);cursor:pointer;color:var(--inkt)} .navknop:hover{background:var(--grond)} @media(max-width:1280px){.gem{display:none}} @media(max-width:900px){.tiles{grid-template-columns:1fr 1fr}.gem{display:none} .navknop{display:inline-grid;place-items:center;margin-left:auto}.navknop~.hdr-right{margin-left:0} .nav{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0; background:#fff;border-bottom:1px solid var(--lijn);padding:6px 24px 12px; box-shadow:0 14px 34px rgba(20,52,98,.12);z-index:39} .nav.open{display:flex} .nav a{padding:13px 8px;font-size:var(--t-basis);border-bottom:1px solid var(--lijn);border-radius:0} .nav a:last-child{border-bottom:0}} @media(max-width:620px){.tiles{grid-template-columns:1fr}} /* ---- Hulpklassen -------------------------------------------------------- Stonden als style-attribuut in de markup. Daar konden ze niet blijven: een inline stijl vraagt 'unsafe-inline' in de CSP, en dat is precies wat we dichtzetten. De marges liepen van 6 tot 22 pixels in stappen die niemand gekozen heeft. Ze staan nu op de margetegel, net als de rest van de maatvoering. */ .ruimte-1{margin-top:var(--tegel)} .ruimte-2{margin-top:calc(var(--tegel) * 2)} .ruimte-3{margin-top:calc(var(--tegel) * 3)} .onder-1{margin-bottom:var(--tegel)} .onder-2{margin-bottom:calc(var(--tegel) * 2)} .onder-3{margin-bottom:calc(var(--tegel) * 3)} .geen-marge{margin:0} .naar-rechts{margin-left:auto} .naast{margin-left:calc(var(--tegel) * .75)} .tekst-meta{font-size:var(--t-meta)} .tekst-basis{font-size:var(--t-basis)} .tekst-lead{font-size:var(--t-lead);font-weight:650;margin:0 0 4px} .tekst-inkt{color:var(--inkt)} .tekst-zwak{color:var(--inkt-zwak)} .verborgen{display:none} .blok-inline{display:inline-block} .rij{display:flex;align-items:center} .kolom{display:flex;flex-direction:column} .wikkel{flex-wrap:wrap} .gat-1{gap:calc(var(--tegel) * 1.25)} .gat-2{gap:calc(var(--tegel) * 1.5)} .boven-scrim{position:relative;z-index:1} .scheiding{margin-top:calc(var(--tegel) * 3);padding-top:calc(var(--tegel) * 2); border-top:1px solid var(--lijn)} /* De vrije invoervelden. De formulieren van aanmelden en account hebben hun eigen .field-opmaak; dit is voor de losse velden daarbuiten. */ .invoer{border:1px solid var(--lijn);border-radius:var(--hoek-klein); padding:12px 14px;font-family:var(--font);font-size:var(--t-basis)} .invoer-klein{padding:11px 12px;font-size:var(--t-meta)} .invoer-rekbaar{resize:vertical} .wijzer{cursor:pointer} .normaal,.q .ttl.normaal{font-weight:400} .behoud-witruimte{white-space:pre-wrap} .lucht-1{padding:calc(var(--tegel) * .5) 0} /* Een korte pagina liet een wit vlak onder de footer staan. Het portaal is header, main en footer onder elkaar; main krijgt de rest van de hoogte. */ body{min-height:100vh;display:flex;flex-direction:column} body>main{flex:1 0 auto} /* Een knop die eruitziet als een link: zonder de rand en het vlak van de browserknop. Stond alleen op , en op een