/* print.css, sjabloon voor een mkb-one-pager.
Waarom dit bestand bestaat: bij dit publiek wordt de pagina uitgeprint of
als PDF bewaard en gaat hij mee als bijlage bij een offerte. De print is
dus geen bijproduct van het scherm maar een tweede oplevering, met een
eigen eis: wie het papier leest moet kunnen bellen, mailen en zien of hij
binnen het werkgebied valt, zonder terug naar de site.
Koppelen in elke pagina, naast styles.css:
scripts/nieuw.py zet er zelf ?v= achter. De cachebuster hoort ook op dit
bestand mee omhoog (valkuilen.md, cachebuster-regel), anders meet je een
printresultaat op een oude stylesheet.
Regel voor dit bestand: het schakelt uit en het maakt leesbaar. Het voegt
nooit inhoud toe. Een ::content-regel die een telefoonnummer, een
responstijd of een garantie op papier zet, is een bewering die niemand
heeft bevestigd (integriteit.md).
Alles staat in één @media print. Zonder die wikkel lekt de printreset naar
het scherm zodra iemand dit bestand per ongeluk zonder media-attribuut
koppelt, en dat is een fout die pas bij de klant zichtbaar wordt. */
@media print {
/* ── 1. Bladspiegel ──────────────────────────────────────────────
Ruime binnenmarge omdat de print vaak geniet of geperforeerd wordt. */
@page {
margin: 16mm 14mm;
}
html {
/* overflow-x: clip op html (valkuilen.md) doet op papier niets nuttigs en
kan een decoratie-element zijn laatste kolom kosten. */
overflow: visible !important;
font-size: 11pt;
}
body {
background: #fff !important;
color: #000 !important;
line-height: 1.45;
}
/* ── 2. Kleur plat, en waarom dat hier niet optioneel is ─────────
De donkere en vlakke secties herdefiniëren hun eigen tokens
(valkuilen.md A1). Printen zonder achtergrond betekent dus: lichte tekst
op wit papier, oftewel een lege pagina waar de oproepsectie hoorde te
staan. Daarom wordt élke kleur hier teruggezet, niet alleen de
achtergrond. */
*,
*::before,
*::after {
background: transparent !important;
background-image: none !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
filter: none !important;
/* Randen blijven wel bestaan; ze dragen de structuur van kaarten en
tabellen zodra de vlakken weg zijn. */
border-color: #999 !important;
}
/* ── 3. Beweging en onthulling ───────────────────────────────────
De duurste printfout uit deze familie: [data-reveal] staat op opacity 0
tot de IntersectionObserver hem passeert. Wie print vanaf de bovenkant
van de pagina, print de helft van de site als wit vlak. Op papier bestaat
scrollen niet, dus alles staat hier per definitie in beeld. */
[data-reveal],
[data-reveal]:not(.is-in),
.schuif {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
animation: none !important;
transition: none !important;
clip-path: none !important;
}
/* ── 4. Wat er niet op papier hoort ──────────────────────────────
Navigatie, zwevende balken en decoratie: op papier zijn het knoppen die
niets doen en inkt die niets zegt. De selectors zijn de data-attributen
uit main.js, niet de klassenamen, zodat een hernoemde klasse deze regels
niet stil uitschakelt. */
[data-kopbalk],
[data-actiebalk],
[data-vorm],
.overslaan,
[hidden] {
display: none !important;
}
/* Formulier: de velden zelf zijn op papier lege vakken die om invulling
vragen die nooit aankomt. De contactgegevens eromheen blijven staan. */
form button,
form input,
form select,
form textarea,
[data-form-melding] {
display: none !important;
}
/* Knoppen die geen link zijn kunnen op papier niets. Een blijft wel
staan: die krijgt hieronder zijn href uitgeschreven. */
button {
display: none !important;
}
/* Een lopende band is op papier een willekeurige uitsnede van een rij.
Het venster verdwijnt in zijn geheel, inclusief de aria-hidden-kopie. */
[data-marquee] {
display: none !important;
}
/* Een schuifvergelijking bevriest op papier op één stand en toont dan de
helft van twee foto's. Beter helemaal weg dan half. */
[data-vergelijker] {
display: none !important;
}
/* Wat main.js heeft uitgeschakeld omdat het feit ontbreekt, blijft uit.
Deze regel staat er expliciet zodat geen latere print-regel een blok
terugzet dat op het scherm bewust leeg is (integriteit.md 3c). */
[data-uit] {
display: none !important;
}
/* ── 5. Vast wordt statisch ──────────────────────────────────────
Een position: fixed element drukt de printer op élke pagina af, of legt
hem over de eerste alinea heen. Sticky doet op papier niets maar houdt
wel zijn plaatsingscontext vast. */
* {
position: static !important;
}
/* ── 6. Scrollvensters uitvouwen ─────────────────────────────────
Alles wat op het scherm binnen een overflow-container scrollt (tabellen,
codeblokken, sporen) drukt anders alleen zijn eerste scherm af. */
main *,
.voet * {
overflow: visible !important;
max-height: none !important;
}
/* ── 7. Ritme op papier ──────────────────────────────────────────
Secties krijgen lucht in plaats van kleur. Het onderscheid tussen licht,
vlak en donker verdwijnt hier bewust: op papier draagt witruimte het
ritme en een grijze balk kost inkt zonder betekenis. */
main > section {
padding: 0 0 10mm !important;
margin: 0 0 6mm !important;
border-bottom: 1px solid #ddd;
break-inside: auto;
}
h1, h2, h3, h4 {
break-after: avoid;
page-break-after: avoid;
}
h1 { font-size: 20pt; }
h2 { font-size: 15pt; }
h3 { font-size: 12pt; }
p, li, blockquote, figure, table {
orphans: 3;
widows: 3;
}
li, figure, blockquote, tr, dl > div {
break-inside: avoid;
page-break-inside: avoid;
}
img, svg {
max-width: 100% !important;
height: auto !important;
break-inside: avoid;
}
/* ── 8. Links met hun bestemming ─────────────────────────────────
Een blauw woord zonder adres is op papier een dood spoor. Uitgeschreven
wordt alleen wat de lezer kan gebruiken: externe adressen, telefoon en
e-mail. Ankers naar de pagina zelf krijgen niets, want #contact zegt
niets zonder scherm. */
a[href^="http"]::after,
a[href^="mailto:"]::after,
a[href^="tel:"]::after {
content: " (" attr(href) ")";
font-size: 0.85em;
word-break: break-all;
}
/* De uitzonderingen: als de linktekst het adres al ís, staat het er twee
keer. main.js zet bij data-tel="toon" en data-mail="toon" het nummer of
het adres zelf in de tekst. */
a[data-tel="toon"]::after,
a[data-mail="toon"]::after,
a[href^="#"]::after,
a[href^="index.html"]::after {
content: "" !important;
}
a {
text-decoration: underline;
/* Een lange URL in een smalle kolom duwt anders de bladspiegel open. */
overflow-wrap: anywhere;
}
/* ── 9. Wat de lezer van het papier moet overhouden ──────────────
Contactgegevens, werkgebied en de voet zijn de reden dat dit vel bestaat.
Ze blijven bij elkaar op één pagina en krijgen een kader, zodat ze in een
stapel offertebijlagen terug te vinden zijn. */
.voet,
body > footer,
[data-werkgebied],
#contact {
break-inside: avoid;
page-break-inside: avoid;
}
.voet,
body > footer {
border: 1px solid #333 !important;
padding: 5mm !important;
margin-top: 8mm !important;
font-size: 10pt;
}
/* Het werkgebied is bij dit publiek de eerste vraag na de prijs. Op papier
hoort het als tekst te staan, niet als uitkomst van een postcodeveld dat
hier niet meer werkt. Het invoerveld verdwijnt (zie 4), de tekst blijft. */
[data-werkgebied] [data-postcode],
[data-werkgebied] label {
display: none !important;
}
[data-werkgebied-uitkomst] {
font-weight: 700;
}
/* ── 10. Gaten blijven gaten ─────────────────────────────────────
Een TE BEVESTIGEN-markering die op het scherm opvalt, mag op papier niet
wegvallen, anders gaat een onbevestigd veld als feit de deur uit. Geen
kleur beschikbaar op zwart-wit, dus onderstreping en kapitaal. */
[data-verify],
.gat {
text-decoration: underline dotted !important;
text-underline-offset: 2px;
}
}