/* Hegeman Advies — richting C "Banen". Zie ONTWERP.md. Handgeschreven, geen buildstap, geen externe bronnen. */ :root { /* Palet — contrastwaarden staan in ONTWERP.md */ --paper: #FFFFFF; --ink: #14181A; --link: #12495F; --link-hover: #0B2130; --tint: #E6EDF1; --dark: #123243; --on-dark: #EDF2F5; --link-on-dark: #9CCBDE; --hover-on-dark:#C4E1EE; --rule: #C6D3DA; --rule-dark: #2F5468; --font: Verdana, Tahoma, "DejaVu Sans", Geneva, sans-serif; --meet: 36rem; /* leesmaat lopende tekst */ --breed: 62rem; /* maximale inhoudsbreedte */ } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.65; /* Nederlandse samenstellingen worden lang. Zonder dit duwt een woord als "Btw-identificatienummer" of "Verwerkersovereenkomst" de hele pagina breder dan een telefoonscherm. Breekt alleen als het woord anders niet past. */ overflow-wrap: break-word; } /* ---------- Skip-link ---------- */ .skip { position: absolute; left: -9999px; top: 0; background: var(--dark); color: var(--on-dark); padding: .75rem 1rem; z-index: 10; } .skip:focus { left: 0; } /* ---------- Focus ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } /* ---------- Kop van de site ---------- */ .site-head { border-bottom: 2px solid var(--dark); } .head-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.25rem; padding-top: .9rem; padding-bottom: .5rem; } .logo { font-weight: 700; letter-spacing: -.03em; font-size: 1.05rem; color: var(--ink); text-decoration: none; } .logo:hover, .logo:focus-visible { color: var(--link); } /* Zes items passen op een telefoon niet op een regel. Natuurlijk afbreken geeft een rommelige verdeling, dus verdelen we bewust over drie kolommen (3 + 3). Dat komt sinds de doorlichtingspagina precies uit; bij vijf items was het nog 3 + 2 met een wees op de tweede regel. Op bredere schermen wordt het weer een gewone rij. */ .nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 1.25rem; } .nav a { color: var(--ink); text-decoration: none; font-size: 1rem; /* Verticale ruimte maakt het tikdoel op een telefoon ruim 42px hoog (gemeten op 320px breed). WCAG 2.2 eist minimaal 24px; rond de 44px is wat een vinger prettig raakt. */ padding-block: .5rem; } .nav a:hover, .nav a:focus-visible { color: var(--link); } .nav a[aria-current="page"] { color: var(--link); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; } @media (min-width: 44rem) { .nav { display: flex; flex-wrap: wrap; margin-left: auto; } } /* ---------- Banen ---------- */ .wrap { max-width: var(--breed); margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 44rem) { .wrap { padding-inline: 2rem; } } .band { padding-block: 2.25rem; } @media (min-width: 44rem) { .band { padding-block: 3.5rem; } } .band--tint { background: var(--tint); } .band--dark { background: var(--dark); color: var(--on-dark); } .band--dark a { color: var(--link-on-dark); } .band--dark a:hover, .band--dark a:focus-visible { color: var(--hover-on-dark); } /* ---------- Typografie ---------- */ h1, h2, h3 { font-weight: 700; letter-spacing: -.035em; line-height: 1.15; text-wrap: balance; margin: 0 0 .6rem; /* lang="nl" staat op , dus de browser breekt volgens Nederlandse regels af. Nodig bij koppen als "Verwerkersovereenkomst: wanneer heb je er een nodig?" op 320px. */ -webkit-hyphens: auto; hyphens: auto; } h1 { font-size: 1.6rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; letter-spacing: -.02em; } @media (min-width: 44rem) { h1 { font-size: 2.4rem; } h2 { font-size: 1.7rem; } h3 { font-size: 1.15rem; } } p, ul, ol, dl { margin: 0 0 1rem; max-width: var(--meet); } p:last-child, ul:last-child, dl:last-child { margin-bottom: 0; } .lead { font-size: 1.08rem; } .meta { font-size: .87rem; } a { color: var(--link); text-underline-offset: 3px; } a:hover, a:focus-visible { color: var(--link-hover); } /* ---------- Knop ---------- */ .knop { display: inline-block; margin-top: 1.25rem; background: var(--dark); color: var(--paper); text-decoration: none; font-weight: 700; letter-spacing: -.01em; padding: .8rem 1.2rem; } .knop:hover, .knop:focus-visible { background: var(--link-hover); color: var(--paper); } .band--dark .knop { background: var(--link-on-dark); color: var(--link-hover); } .band--dark .knop:hover, .band--dark .knop:focus-visible { background: var(--hover-on-dark); color: var(--link-hover); } /* ---------- Roosters ---------- */ .rij { display: grid; gap: 1.5rem; margin-top: 1.5rem; max-width: none; } @media (min-width: 44rem) { .rij--drie { grid-template-columns: repeat(3, 1fr); gap: 2rem; } .rij--twee { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } .rij > li { max-width: var(--meet); } .rij p { font-size: .93rem; } ul.schoon { list-style: none; padding: 0; } /* ---------- Prijsregel ---------- */ .prijs { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-bottom: .25rem; } .prijs span { font-weight: 400; font-size: .85rem; letter-spacing: 0; } /* ---------- Gegevenslijst ---------- */ .gegevens { display: grid; gap: .15rem .9rem; max-width: var(--meet); } @media (min-width: 34rem) { .gegevens { grid-template-columns: 13rem 1fr; } } /* Een gridkolom is minstens zo breed als het langste woord. break-word verandert die min-content-breedte niet, anywhere wel. */ .gegevens dt, .gegevens dd { overflow-wrap: anywhere; } .gegevens dt { font-weight: 700; } .gegevens dd { margin: 0 0 .35rem; } /* ---------- Voet ---------- */ .site-foot { background: var(--tint); border-top: 2px solid var(--dark); padding-block: 2.25rem; font-size: .87rem; } .site-foot h2 { font-size: 1rem; margin-bottom: .4rem; } .site-foot .voet-rij { display: grid; gap: 1.5rem; } @media (min-width: 50rem) { .site-foot .voet-rij { grid-template-columns: repeat(3, 1fr); gap: 2rem; } } .site-foot p, .site-foot ul { max-width: 30rem; } .site-foot .voet-onder { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--rule); } .site-foot li { margin-bottom: .2rem; } /* ---------- Beweging ---------- */ @media (prefers-reduced-motion: no-preference) { a, .knop { transition: background-color .15s ease, color .15s ease; } } /* ---------- Triage op de homepage ---------- */ .triage { max-width: var(--meet); margin-top: 1.25rem; } .triage dt { font-weight: 700; letter-spacing: -.01em; padding-top: .8rem; border-top: 1px solid var(--rule); } .triage dt:first-of-type { border-top: 0; padding-top: 0; } .triage dd { margin: .2rem 0 .9rem; } /* ---------- Kennis: overzicht en artikel ---------- */ .kennis-lijst { list-style: none; padding: 0; max-width: var(--meet); } .kennis-lijst > li { padding-block: 1.25rem; border-top: 1px solid var(--rule); } .kennis-lijst > li:first-child { border-top: 0; padding-top: 0; } .kennis-lijst h3 { margin-bottom: .3rem; } .kennis-lijst h3 a { text-decoration: none; color: var(--ink); } .kennis-lijst h3 a:hover, .kennis-lijst h3 a:focus-visible { color: var(--link); text-decoration: underline; } .kennis-lijst p { font-size: .95rem; margin-bottom: .4rem; } .artikel { max-width: var(--meet); } .artikel h2 { margin-top: 2rem; } .artikel h2:first-of-type { margin-top: 1rem; } .artikel h3 { margin-top: 1.5rem; } .artikel ul { padding-left: 1.2rem; } .artikel li { margin-bottom: .4rem; } .artikel-meta { font-size: .85rem; padding-bottom: .9rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem; } .band--dark .artikel-meta { border-bottom-color: var(--rule-dark); } /* ---------- Volgende stap ---------- */ .volgende-stap { max-width: var(--meet); } .volgende-stap h2 { font-size: 1.15rem; } /* ---------- Afbeeldingen (nog niet in gebruik) ---------- Opmaak staat klaar voor de plekken die in PLACEHOLDERS.md staan: portret op over.html en index.html, en een geanonimiseerd fragment van een quickscan-beoordeling op quickscan.html. Er staat bewust nog geen in de HTML: een verwijzing naar een niet-bestaand bestand breekt qa/check_links.py en levert ongeldige markup op. */ figure { margin: 1.5rem 0; max-width: var(--meet); } figure img { display: block; width: 100%; height: auto; } figcaption { font-size: .85rem; margin-top: .5rem; } .portret { max-width: 14rem; }