/* =========================================================================== Milronski contentsites — gedeeld ontwerpsysteem, laag "bulk/kennis". Bron: milronski-os/ontwerp/contentsites-bulk.css (nooit per repo bewerken; uitrollen met node tools/ontwerp-uitrol.mjs). Doel: één herkenbaar, licht, redactioneel ontwerp voor alle contentsites. Per site verschilt alleen #0EA5E9/#0369A1 (zie ontwerp/merken.mjs). Ontwerpregels die hier hard in zitten: - Licht papier, zwarte inkt. Merkkleur is accent, nooit de drager van tekst op een lichte achtergrond tenzij het de donkere variant is (>=5:1 op wit). - Geen bolletjes/badges met een puntje (afgekeurd 23-08-2026): accenten zijn rechte balken en onderstrepingen. - Niets onder 14px, tikdoelen minimaal 44px, geen horizontale uitloop. - De oude inline `style="--accent:..."` op wordt genegeerd; die zette per pagina een andere teal en brak de eenheid. ========================================================================= */ :root, html, body { --merk: #0EA5E9; --diep: #0369A1; /* neutralen */ --papier: #ffffff; --achter: #f6f6f4; --inkt: #14171c; --inkt-zacht: #4b5259; --lijn: #e4e5e1; --lijn-sterk: #c9ccc6; --merk-tint: color-mix(in srgb, var(--merk) 9%, #ffffff); --merk-rand: color-mix(in srgb, var(--merk) 30%, #ffffff); /* maten */ --r: 14px; --r-klein: 10px; --meet: 68ch; /* leesbreedte artikel */ --breed: calc(var(--meet) + 40px); /* kop, hero, artikel en voet delen één lijn */ /* het oude accent uit de inline-stijl mag niets meer sturen */ --accent: var(--diep) !important; } * { margin: 0; padding: 0; box-sizing: border-box } html { -webkit-text-size-adjust: 100% } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.7; color: var(--inkt); background: var(--papier); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block } ::selection { background: var(--merk-rand); color: var(--inkt) } :focus-visible { outline: 3px solid var(--diep); outline-offset: 2px; border-radius: 4px } .g-wrap { max-width: var(--breed); margin: 0 auto; padding: 0 20px } /* --- kop ------------------------------------------------------------------ Merknaam in zware inkt met een merkgekleurde onderstreping. Geen bolletje. */ .g-kop { background: var(--papier); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 20; } .g-kop .g-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; } .g-logo { font-weight: 800; font-size: 1.15rem; letter-spacing: -.022em; text-decoration: none; color: var(--inkt); border-bottom: 3px solid var(--merk); padding-bottom: 2px; line-height: 1.1; } .g-kop nav { display: flex; align-items: center; gap: 8px; font-size: .95rem } .g-kop nav a { color: var(--inkt-zacht); text-decoration: none; font-weight: 600; padding: 12px 10px; border-radius: var(--r-klein); min-height: 44px; display: inline-flex; align-items: center; } .g-kop nav a:hover { background: var(--achter); color: var(--inkt) } /* --- knop --- */ .g-knop { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 20px; background: var(--diep); color: #fff !important; text-decoration: none; font-weight: 700; font-size: .95rem; letter-spacing: -.01em; border: 1px solid var(--diep); border-radius: var(--r-klein); } .g-knop:hover { background: var(--inkt); border-color: var(--inkt) } .g-knop.groot { min-height: 54px; padding: 15px 28px; font-size: 1.02rem; margin-top: 20px } /* --- hero ----------------------------------------------------------------- Rustig lichtgrijs blok met een merkbalk erboven: strak en herkenbaar, zonder verlopen of glans. */ .g-hero { background: var(--achter); border-top: 4px solid var(--merk); border-bottom: 1px solid var(--lijn); padding: 44px 0 40px; } .g-hero h1 { font-size: clamp(1.95rem, 1.35rem + 2.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.033em; font-weight: 800; max-width: 24ch; text-wrap: balance; } .g-sub { margin-top: 16px; font-size: 1.1rem; color: var(--inkt-zacht); max-width: 60ch; } /* --- kruimelpad --- */ .g-kruimel { /* .875rem = 14px: onder de 14 mag geen tekst (gemeten 23-08: dit stond op 13,1px) */ font-size: .875rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; color: var(--inkt-zacht); margin-bottom: 18px; } .g-kruimel a { color: var(--inkt-zacht); text-decoration: none; border-bottom: 1px solid var(--lijn-sterk) } .g-kruimel a:hover { color: var(--inkt); border-bottom-color: var(--diep) } /* --- artikel -------------------------------------------------------------- Gecentreerde leeskolom. Op breed scherm hing de tekst vroeger links tegen een leeg vlak aan; centreren lost dat op zonder de regellengte te verpesten. */ .g-artikel { max-width: var(--breed); padding: 44px 20px 72px } /* de eerste kop in een overzichtspagina krijgt geen scheidingslijn en geen kopmarge */ .g-artikel > h2:first-child, .g-artikel > link:first-child + h2 { margin-top: 0; padding-top: 0; border-top: 0 } .g-artikel > p { margin-bottom: 20px } .g-artikel a { color: var(--diep); text-decoration: none; border-bottom: 2px solid var(--merk-rand) } .g-artikel a:hover { border-bottom-color: var(--diep); background: var(--merk-tint) } .g-artikel h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); font-weight: 800; letter-spacing: -.024em; line-height: 1.2; margin: 52px 0 16px; padding-top: 22px; border-top: 1px solid var(--lijn); } .g-artikel h2 a { border: 0; color: var(--inkt) } .g-artikel h2 a:hover { color: var(--diep); background: none } .g-artikel h3 { font-size: 1.18rem; font-weight: 750; letter-spacing: -.015em; margin: 32px 0 10px } .g-artikel ul, .g-artikel ol { margin: 0 0 20px 22px } .g-artikel li { margin-bottom: 8px } .g-artikel strong { font-weight: 750 } .g-artikel table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: .96rem } .g-artikel th, .g-artikel td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--lijn) } .g-artikel thead th { background: var(--achter); font-weight: 750; border-bottom: 2px solid var(--lijn-sterk) } .g-artikel blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--merk); color: var(--inkt-zacht); font-size: 1.05rem; } /* --- kernpuntenblok --- */ .g-punten { background: var(--achter); border: 1px solid var(--lijn); border-left: 5px solid var(--merk); border-radius: var(--r); padding: 24px 26px; margin: 36px 0; } .g-punten h2 { margin: 0 0 12px; padding: 0; border: 0; font-size: 1.2rem } .g-punten ul { margin: 0 0 0 20px } .g-punten li { margin-bottom: 8px } .g-punten p:last-child, .g-punten ul:last-child { margin-bottom: 0 } /* --- FAQ ------------------------------------------------------------------ Een strakke lijst met haarlijnen in plaats van een stapel doosjes; het pijltje is een CSS-chevron, geen teken uit een lettertype. */ details { border-bottom: 1px solid var(--lijn); background: none; padding: 0 } details:first-of-type { border-top: 1px solid var(--lijn) } summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 1.03rem; padding: 18px 44px 18px 0; min-height: 48px; position: relative; } summary::-webkit-details-marker { display: none } summary::after { content: ""; position: absolute; right: 10px; top: 26px; width: 10px; height: 10px; border-right: 2.5px solid var(--diep); border-bottom: 2.5px solid var(--diep); transform: rotate(45deg); transition: transform .15s ease; } details[open] summary::after { transform: rotate(-135deg); top: 30px } details p { padding: 0 0 18px; color: var(--inkt-zacht); max-width: 62ch } /* --- oproep tot actie --- */ .g-cta { background: var(--inkt); color: #fff; border: 0; border-top: 5px solid var(--merk); border-radius: var(--r); padding: 36px 32px 40px; margin: 48px 0; text-align: left; } .g-cta h2 { margin: 0 0 10px; padding: 0; border: 0; color: #fff; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); letter-spacing: -.025em; } .g-cta p { color: #d7dbdf; max-width: 54ch; margin: 0 } /* Wit vlak met inkt: 16:1. De merkkleur zit in de balk boven het blok, want op 8 van de 17 sites haalt inkt-op-merk geen 4,5:1 (gemeten 23-08-2026). */ .g-cta .g-knop { background: #fff; border-color: #fff; color: var(--inkt) !important } .g-cta .g-knop:hover { background: var(--merk-tint); border-color: var(--merk-tint); color: var(--inkt) !important } /* --- verder lezen / bron --- */ .g-buren, .g-bron { font-size: .95rem; color: var(--inkt-zacht); background: var(--achter); border: 1px solid var(--lijn); border-radius: var(--r); padding: 20px 22px; margin: 28px 0; } .g-buren a { color: var(--inkt); border-bottom: 1px solid var(--lijn-sterk); text-decoration: none } .g-buren a:hover { border-bottom-color: var(--diep); color: var(--diep) } .g-bron { background: none; border: 0; border-top: 1px solid var(--lijn); border-radius: 0; padding: 18px 0 0; font-size: .88rem } /* --- linkwolken (kennisindex, gemeentelijsten) ---------------------------- De bron levert links gescheiden door losse "·"-tekens. Die tekstknopen kunnen we niet selecteren, dus zetten we ze op font-size:0 en geven de links zelf weer een maat. Resultaat: nette chips met een echt tikdoel, in plaats van een muur van gekleurde tekst. */ .g-gemeenten { font-size: 0; line-height: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px } .g-gemeenten a { font-size: 15px; line-height: 1.35; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--lijn); border-radius: 999px; background: var(--papier); color: var(--inkt); text-decoration: none; font-weight: 600; } .g-gemeenten a:hover { border-color: var(--diep); background: var(--merk-tint); color: var(--diep) } .g-letter { font-size: 1.05rem; font-weight: 800; color: var(--inkt); display: block; margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--merk); } /* --- voet --- */ .g-voet { border-top: 1px solid var(--lijn); background: var(--achter); padding: 28px 0; font-size: .9rem; color: var(--inkt-zacht); } .g-voet .g-wrap { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap } .g-voet a { color: var(--inkt-zacht) } /* --- klein scherm --------------------------------------------------------- Nooit flex-basis in een kolomrichting (dat gaat als hoogte werken); alleen verbergen en verkleinen. */ @media (max-width: 640px) { body { font-size: 16px } .g-kop nav a:not(.g-knop) { display: none } .g-kop .g-wrap { min-height: 62px } .g-hero { padding: 32px 0 30px } .g-artikel { padding: 32px 20px 56px } .g-cta { padding: 28px 22px; margin: 36px 0 } .g-punten { padding: 20px 18px } .g-artikel h2 { margin-top: 40px } }