/* merk-lees.css: lange leesstukken in de huisstijl van de voordeur.
Voor de handleiding, de whitepaper en het manifest: donker, rustig, met de
koppen van de homepage en een leesbreedte die je volhoudt. Bovenop
merk.css (tokens en componentcontract); laad hem daarna:
Alles hangt onder html.merk-lees, zodat een pagina die hem laadt zonder de
klasse niets verandert. Print blijft licht: wie een whitepaper afdrukt, wil
zwart op wit.
Klassen die een pagina kan gebruiken:
.lees de kolom met de tekst (max. ongeveer 72 tekens)
.lees-hero de kop van de pagina, met .eyebrow, h1 en .lead
.kader een opvallend blok (belangrijk, tip, citaat)
.merk-kop-balk de bovenbalk (uit merk.css)
*/
html.merk-lees {
--lees-breedte: 72ch;
--lees-regel: 1.72;
scroll-padding-top: 90px;
}
html.merk-lees body {
margin: 0;
background:
radial-gradient(70% 45% at 70% -10%, rgba(24, 164, 255, 0.10), transparent 70%),
radial-gradient(50% 40% at 0% 30%, rgba(152, 213, 60, 0.05), transparent 70%),
var(--merk-nacht);
background-attachment: fixed;
color: var(--merk-tekst);
font-family: var(--merk-font);
font-size: var(--tekst-l);
line-height: var(--lees-regel);
-webkit-font-smoothing: antialiased;
}
/* ---- De bovenbalk ----
Staat in merk.css: dezelfde balk als op de voordeur en de Bouwplaats. */
/* ---- Knoppen ---- */
html.merk-lees .merk-knop-klein { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
font: inherit; font-size: var(--tekst-s); font-weight: var(--gewicht-nadruk); text-decoration: none; cursor: pointer;
color: #fff; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--merk-lijn-2); white-space: nowrap; }
html.merk-lees .merk-knop-klein:hover { border-color: var(--merk-cyaan); color: #fff; }
html.merk-lees .merk-knop-klein.primair { background: var(--merk-blauw); color: #021019; border-color: var(--merk-blauw); }
/* ---- Een band met een oproep aan het eind ---- */
html.merk-lees .merk-cta { margin: 64px 0 20px; padding: 30px 32px; border-radius: 20px;
background: radial-gradient(80% 120% at 0% 0%, rgba(24, 164, 255, 0.22), transparent 60%), var(--merk-nacht-3);
border: 1px solid var(--merk-lijn-2); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
html.merk-lees .merk-cta h2 { margin: 0; font-size: var(--tekst-3xl); }
html.merk-lees .merk-cta h2::before { display: none; }
html.merk-lees .merk-cta p { margin: 6px 0 0; color: var(--merk-tekst-zacht); }
/* ---- Figuren die voor papier zijn getekend ----
Een schema met lichte vlakken en donkere tekst: omkeren en de tint
terugdraaien houdt blauw blauw en groen groen, en maakt het vlak nacht.
Op papier blijft het zoals het getekend is. */
html.merk-lees .merk-omkeer { filter: invert(0.92) hue-rotate(180deg) saturate(1.3); }
/* ---- Voet ---- */
html.merk-lees .merk-voet { border-top: 1px solid var(--merk-lijn); margin-top: 60px; padding: 28px 0 48px;
color: var(--merk-tekst-stil); font-size: var(--tekst-s); }
/* ---- De kolom ---- */
html.merk-lees .lees { max-width: var(--lees-breedte); margin: 0 auto; }
html.merk-lees .lees > p, html.merk-lees .lees li { color: var(--merk-tekst); }
/* ---- Koppen ---- */
html.merk-lees h1, html.merk-lees h2 {
font-family: var(--merk-kop); font-weight: var(--gewicht-nadruk);
text-transform: uppercase; letter-spacing: 0.01em; color: #fff; line-height: 1.02;
}
html.merk-lees h1 { font-size: var(--merk-grote-kop); margin: 0.2em 0 0.35em; }
html.merk-lees h2 { font-size: var(--tekst-4xl); margin: 2.2em 0 0.5em; }
html.merk-lees h2::before {
content: ""; display: block; width: 44px; height: 3px; margin-bottom: 14px;
background: linear-gradient(90deg, var(--merk-cyaan), transparent); border-radius: 2px;
}
html.merk-lees h3 {
font-family: var(--merk-font); font-weight: var(--gewicht-nadruk);
font-size: var(--tekst-2xl); color: #fff; margin: 1.8em 0 0.4em; line-height: 1.25;
}
html.merk-lees h4 {
font-family: var(--merk-mono); font-weight: var(--gewicht-normaal); font-size: var(--tekst-s);
letter-spacing: 0.14em; text-transform: uppercase; color: var(--merk-cyaan); margin: 1.6em 0 0.4em;
}
/* ---- De kop van de pagina ---- */
html.merk-lees .lees-hero { padding: 72px 0 40px; }
html.merk-lees .eyebrow, html.merk-lees .lees-hero .eyebrow {
font-family: var(--merk-mono); font-size: var(--tekst-s); letter-spacing: 0.22em;
text-transform: uppercase; color: var(--merk-cyaan);
}
html.merk-lees .lead { font-size: var(--tekst-2xl); line-height: 1.5; color: var(--merk-tekst-zacht); }
/* ---- Tekst ---- */
html.merk-lees strong, html.merk-lees b { color: #fff; font-weight: var(--gewicht-nadruk); }
html.merk-lees em, html.merk-lees i { color: var(--merk-tekst); }
html.merk-lees a { color: var(--merk-cyaan); text-decoration-color: rgba(117, 217, 255, 0.4); text-underline-offset: 3px; }
html.merk-lees a:hover { color: #fff; text-decoration-color: var(--merk-cyaan); }
/* In de kopbalk geen leeslinks: het sitemenu en de knoppen hebben hun eigen kleur. */
html.merk-lees .merk-kop-balk a:not(.merk-knop-klein):not(.merk-kop-cta):not(.sxl-menu-cta):not(.brand) { color: var(--merk-tekst); text-decoration: none; }
html.merk-lees .merk-kop-balk a:not(.merk-knop-klein):not(.merk-kop-cta):not(.sxl-menu-cta):not(.brand):hover { color: #fff; }
html.merk-lees hr { border: 0; height: 1px; background: var(--merk-lijn-2); margin: 3em 0; }
html.merk-lees ::selection { background: rgba(24, 164, 255, 0.35); color: #fff; }
/* ---- Lijsten ---- */
html.merk-lees ul { padding-left: 1.3em; }
html.merk-lees ul > li::marker { color: var(--merk-cyaan); }
html.merk-lees ol > li::marker { color: var(--merk-cyaan); font-family: var(--merk-mono); }
html.merk-lees li { margin: 0.35em 0; }
/* ---- Kaders en citaten ---- */
html.merk-lees .kader, html.merk-lees blockquote {
margin: 1.6em 0; padding: 18px 22px; border-radius: 14px;
background: rgba(13, 24, 38, 0.72); border: 1px solid var(--merk-lijn-2);
border-left: 3px solid var(--merk-cyaan); color: var(--merk-tekst);
}
html.merk-lees blockquote { font-size: var(--tekst-xl); color: #fff; }
html.merk-lees .kader.let-op { border-left-color: var(--merk-oranje); }
html.merk-lees .kader.goed { border-left-color: var(--merk-groen); }
/* ---- Code ---- */
html.merk-lees code, html.merk-lees kbd, html.merk-lees samp {
font-family: var(--merk-mono); font-size: 0.88em; color: var(--merk-cyaan);
background: rgba(117, 217, 255, 0.08); border: 1px solid var(--merk-lijn); border-radius: 6px; padding: 1px 6px;
}
html.merk-lees pre {
background: var(--merk-nacht-2); border: 1px solid var(--merk-lijn-2); border-radius: 12px;
padding: 16px 18px; overflow-x: auto; line-height: 1.5;
}
html.merk-lees pre code { background: none; border: 0; padding: 0; color: var(--merk-tekst); }
/* ---- Tabellen ---- */
html.merk-lees table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: var(--tekst-m); }
html.merk-lees th {
text-align: left; font-family: var(--merk-mono); font-weight: var(--gewicht-normaal); font-size: var(--tekst-xs);
letter-spacing: 0.1em; text-transform: uppercase; color: var(--merk-tekst-stil);
border-bottom: 1px solid var(--merk-lijn-2); padding: 10px 12px;
}
html.merk-lees td { border-bottom: 1px solid var(--merk-lijn); padding: 10px 12px; vertical-align: top; }
html.merk-lees tr:hover td { background: rgba(117, 217, 255, 0.04); }
/* ---- Beeld ---- */
html.merk-lees figure { margin: 2em 0; }
html.merk-lees figure img, html.merk-lees .lees img {
max-width: 100%; border-radius: 14px; border: 1px solid var(--merk-lijn-2);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
html.merk-lees figcaption { font-size: var(--tekst-s); color: var(--merk-tekst-stil); margin-top: 10px; }
/* ---- Afdrukken: zwart op wit ---- */
@media print {
html.merk-lees body { background: #fff !important; color: #111 !important; font-size: var(--tekst-m); }
html.merk-lees h1, html.merk-lees h2, html.merk-lees h3, html.merk-lees strong, html.merk-lees b { color: #000 !important; }
html.merk-lees h2::before { background: #999 !important; }
html.merk-lees a { color: #000 !important; }
html.merk-lees .kader, html.merk-lees blockquote, html.merk-lees pre, html.merk-lees code {
background: #f4f6f8 !important; color: #111 !important; border-color: #ccc !important; box-shadow: none !important;
}
html.merk-lees td, html.merk-lees th { color: #111 !important; border-color: #ccc !important; }
html.merk-lees .merk-kop-balk, html.merk-lees .merk-beweging, html.merk-lees [data-print-verberg] { display: none !important; }
html.merk-lees figure img { box-shadow: none !important; border-color: #ccc !important; }
html.merk-lees .merk-omkeer { filter: none !important; }
html.merk-lees .merk-cta { display: none !important; }
}