/* * HUMBLE Offertetool — print/PDF page geometry (media="print", see * includes/class-assets.php). Exact measurements and rationale: * /home/claude/repo/wordpress/BUILD_NOTES.md ("Print / PDF page geometry"). * Behavior mirrored from source lines 31-43 (@media print block) and * /home/claude/repo/project/doc-page.js (pagination technique reproduced * in plain CSS here — the doc-page custom element itself is NOT ported, * per BUILD_NOTES.md's architecture decisions). * * MARKUP CONTRACT for HOT.components.OfferteDocument (public/js/wizard/ * offerte-doc.js) — read this before wiring the document up: * * .hot-doc-wrap (was [data-doc-wrap]) * .hot-doc-note (open-placeholder count, print-hidden) * .hot-doc-fit (was [data-doc-fit] — on-screen scale wrapper) * .hot-doc-sheet.hot-doc-sheet--page.hot-doc-sheet--cover (1 page, full bleed) * .hot-doc-sheet.hot-doc-sheet--flow (flows N pages) * table.hot-doc-flow-table * thead > tr > th > .hot-doc-header-spacer > .hot-doc-header-band > img * tbody > tr > td.hot-doc-body (all real content) * tfoot > tr > td > .hot-doc-footer-spacer > .hot-doc-footer-band > img * .hot-doc-sheet.hot-doc-sheet--page.hot-doc-sheet--back (1 page, full bleed) * * Every [data-print-*] attribute below is kept as the SAME attribute name * the source HTML used (BUILD_NOTES.md: "keep using the SAME data-* * attribute names ... so the JS/HTML other agents write can rely on them * without renegotiating a new contract"). The .hot-print-* classes are * provided as an equivalent, class-based alternative for components that * prefer className over a data attribute — style either one and you get * the same behavior. * * Root-cause note on the prototype's "blank leading page" bug (BUILD_NOTES * print section): each custom element injected its OWN global * @page rule into ; because @page is a single global at-rule (not * scoped to the element that authored it), the LAST-inserted rule silently * governed sizing for every page in the job, including earlier ones, and a * margin/size mismatch between the paginated cover/back and the flowing * content produced a spurious blank sheet. This file defines exactly ONE * @page rule shared by all three sheets, so that failure mode cannot recur. */ @page{ size:210mm 297mm; margin:0; } /* ========================================================================= 1. Global print visibility rules — mirrors source @media print block (lines 31-43) 1:1, same attribute names. ========================================================================= */ @media print{ body{background:#fff} /* Belt-and-suspenders against a native (OS-overlay) scrollbar thumb getting rasterized into the printed/saved PDF: this happens on a macOS/Chrome combo where a scrollable element still has a visible overlay scrollbar at the instant printing is triggered, and the print pipeline bakes that compositor layer into the page image rather than the CSS-visible content underneath it. It shows up at the SAME viewport-relative spot on every physical page (confirmed: identical position on the printed cover AND back page of a real saved PDF), invisible on white content pages and only noticeable against the cover/back's colored background. Forcing every scrollbar to zero width — not just this component's own known scroll containers, but everything, since the culprit could be the html/body root scroller too — removes the thumb regardless of which element it actually belongs to. */ html,body{overflow:visible!important} *{scrollbar-width:none!important;-ms-overflow-style:none!important} *::-webkit-scrollbar{width:0!important;height:0!important;display:none!important} [data-print-hide],.hot-print-hide{display:none!important} [data-print-scroll],.hot-print-scroll{ overflow:visible!important;height:auto!important;display:block!important;padding:0!important; } [data-print-doc],.hot-print-doc{ box-shadow:none!important;margin:0!important;width:100%!important;padding:0!important;border:0!important; } [data-print-page],.hot-print-page{break-after:page;page-break-after:always} [data-doc-wrap],.hot-doc-wrap{display:block!important;gap:0!important;align-items:stretch!important} [data-doc-wrap] .hot-doc-sheet,.hot-doc-wrap .hot-doc-sheet{display:block!important;margin:0!important} [data-doc-fit],.hot-doc-fit{zoom:1!important;transform:none!important;gap:0!important} [data-app-shell],.hot-shell{display:block!important;min-height:0!important} [data-app-main],.hot-main{display:block!important;min-width:0!important} /* Tekenpagina (klantportaal, #sign=…): de paginawrapper heeft op scherm 26px padding rondom en de documentwrapper een marge — bij printen duwde die padding het voorblad omlaag, waardoor er een wit randje boven verscheen en het voorblad datzelfde stukje doorschoof naar pagina 2 (gebruikersmelding: "een klein stukje wit ruimte boven en loop de voorpagina datzelfde stukje door op pagina 2"). */ .hot-portal-page{padding:0!important;min-height:0!important;background:#fff!important} .hot-portal-page .hot-doc-wrap{margin:0!important;max-width:none!important} } /* ========================================================================= 2. Shared page-box geometry for all three sheets (cover / content / back) ========================================================================= */ .hot-doc-sheet{ width:210mm; background:#fff; position:relative; } @media print{ .hot-doc-sheet{ box-shadow:none!important; border-radius:0!important; margin:0!important; -webkit-print-color-adjust:exact; print-color-adjust:exact; } } /* Cover and back are each explicitly-paginated, full-bleed, single-page sheets (mirrors doc-page.js's "paginated" mode for a lone .page child). */ .hot-doc-sheet--page{ height:297mm; overflow:hidden; } @media print{ .hot-doc-sheet--page{ width:210mm!important; height:297mm!important; overflow:hidden!important; break-inside:avoid; } } /* Cover starts the document; forced break after it so content always starts on physical page 2 regardless of on-screen layout. */ .hot-doc-sheet--cover{ background-color:#3E7BF6; /* fallback, per BUILD_NOTES */ background-position:center; background-size:cover; background-repeat:no-repeat; } @media print{ .hot-doc-sheet--cover{break-after:page;page-break-after:always} } /* Back page: forced break BEFORE it, so it always starts a fresh physical page no matter how many pages the flowing content used. */ .hot-doc-sheet--back{ background-color:#2F8FFF; /* fallback, per BUILD_NOTES */ background-position:center; background-size:cover; background-repeat:no-repeat; } @media print{ .hot-doc-sheet--back{break-before:page;page-break-before:always} } /* Cover page overlay positioning (measured from artwork, BUILD_NOTES) */ .hot-doc-cover-title{ position:absolute;left:30.1%;right:27.8%;top:52%;height:15.8%; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:2mm;padding:3mm 4mm;text-align:center;overflow:hidden; } .hot-doc-cover-logo{ display:block;width:100%;height:9mm;flex:0 0 auto; background-repeat:no-repeat;background-position:center;background-size:contain; } .hot-doc-cover-doctitle{ font-family:Alexandria,Montserrat,sans-serif;font-weight:700; font-size:13pt;line-height:1.25;color:#243B50; } .hot-doc-cover-company{font-size:9.5pt;margin-top:2mm;color:#48555F} .hot-doc-cover-meta{ position:absolute;left:31%;right:28%;top:71%;height:5%; display:grid;place-items:center;text-align:center; font-size:8pt;font-weight:600;color:#243B50; } /* ========================================================================= 3. Content sheet — flowing document with repeating header/footer bands. On screen it is one continuous card; the .hot-doc-flow-table structure only matters at print, where the thead/tfoot spacer rows repeat on every physical page (this is the mechanism doc-page.js itself uses internally, reproduced here as plain CSS/HTML per BUILD_NOTES.md's instruction to "reproduce" — not port — its pagination behavior). ========================================================================= */ .hot-doc-flow-table{ width:100%;border-collapse:collapse; font-size:10.5pt;line-height:1.55;color:#243B50; } .hot-doc-flow-table td,.hot-doc-flow-table th{padding:0;text-align:left;font-weight:inherit} .hot-doc-header-band,.hot-doc-footer-band{display:block;box-sizing:border-box} .hot-doc-header-band{height:59mm} .hot-doc-footer-band{height:34.5mm} .hot-doc-header-band img,.hot-doc-footer-band img{ display:block;width:100%;height:100%;object-fit:fill; /* NOT cover — see BUILD_NOTES */ } .hot-doc-body{padding:0 22mm;text-wrap:pretty} @media screen{ /* On screen the header/footer render once, in normal flow, at the top and bottom of the single scrolling card — no spacer trick needed. */ .hot-doc-header-spacer,.hot-doc-footer-spacer{height:auto} } @media print{ .hot-doc-flow-table{break-inside:auto} .hot-doc-flow-table tr{break-inside:avoid} /* The footer spacer reserves the full band height — its artwork's own content (the address block) runs right up to the bottom edge, so there's no spare blank margin to reclaim there. The footer band was briefly made position:fixed to pin it to the true page bottom even on a short last page (the "extra witte pagina" fix) — reverted: in real Chrome (not reproducible in this session's headless test renderer, which is how it slipped through) a fixed-position element repeats across the WHOLE print job, not just the pages belonging to its own ancestor — it bled onto the cover and back sheets too, which are separate, forced-page-break siblings that should never have a footer at all. A footer that occasionally sits a bit above the true bottom on an unusually short last page is a much smaller problem than one bleeding onto the branded cover/back pages, so plain flow wins here, same as the header. The header spacer is deliberately much shorter than the header band itself: the HUMBLE wordmark + tagline only occupy the top ~14mm of the 59mm artwork, the rest is blank/decorative (the thin arcs). Reserving just 14mm + ~10mm breathing room lets body text start right under the wordmark instead of under the whole band, at the cost of text visually running over the decorative arcs lower down — intentional, by request. Unlike the footer, the header band is left in NORMAL flow (no position:fixed, no z-index): the browser already repeats a on every printed page on its own, so fixed positioning was never needed here — it only bought trouble, since a fixed/negative-z-index band needs its ancestor sheet to open a new stacking context to stay visible at all, and that in turn made the browser repeat it onto pages it doesn't belong on (e.g. the cover). Plain flow + overflow:visible achieves the same overlap safely: the spacer is shorter than the band's own height, so the band's tail simply overflows past it, and the body content that follows in the DOM paints over that overflow the same way any two overlapping normal-flow boxes do — no special stacking needed. */ .hot-doc-header-spacer{height:25mm;overflow:visible} .hot-doc-footer-spacer{height:34.5mm} .hot-doc-header-band{ height:59mm;margin:0; } .hot-doc-footer-band{ height:34.5mm;margin:0; } /* GEEN grijze "uitloper" onder de band om de laatste kier te vullen: elke geschilderde staart voorbij de paginarand (::after met top:100%, of padding-bottom + negatieve margin) laat Chrome een extra lege pagina aanmaken — headless empirisch bevestigd (6 → 7 pagina's zodra zo'n staart bestaat). De kier wordt in plaats daarvan gedicht via de min-height hieronder. */ /* Slotpagina (Ondertekening): altijd een verse, korte pagina (breakBefore:page) — zonder ingreep zet de browser de herhalende tfoot-footer daar direct ONDER de laatste regel in plaats van op de fysieke paginavoet. De min-height vult de pagina bijna volledig zodat de tfoot tegen de onderrand gedrukt wordt. Kalibratie op basis van twee ECHTE Chrome-metingen (gebruiker): totaalgebruik 235mm (v1.371.4: 226 min-height + 9mm collapsede kopmarge) paste, met ~2,5mm witte kier; totaalgebruik 237mm (v1.371.5: 228 + 9) sloeg om naar een extra lege pagina met alleen kop-/voetbanden (gebruikersmelding: "er is ineens nog een extra pagina aan het einde bijgekomen"). De echte omslaggrens ligt dus ergens tussen 235 en 237mm — lager dan de theoretische 237,5mm (297 − 25 header-spacer − 34,5 footer-spacer), en headless Chromium meet hier wéér anders (~236,5), dus niet verder op te rekken zonder gokken. Daarom: exact 235mm totaal, de hoogste bewezen-veilige waarde, en DETERMINISTISCH — de padding-top hieronder vervangt de 9mm top-margin van de eerste kop (die marge wordt binnen de padding op 0 gezet), zodat er geen margin-collapse-gedrag meer in de som zit: border-box 235mm is 235mm. Alleen bij print: op scherm rendert alles als één doorlopende kaart. */ .hot-doc-signature-page{min-height:235mm;box-sizing:border-box;padding-top:9mm} .hot-doc-signature-page > table:first-child{margin-top:0} } /* ========================================================================= 4. Section heading pill inside the document body ========================================================================= */ .hot-doc-heading{ margin:9mm -10mm 5mm;padding:3.6mm 10mm; background:#F4F4F6;border-radius:999px; box-shadow:0 1px 3px rgba(36,59,80,.08); font-family:Montserrat,sans-serif;font-size:11pt;font-weight:700; font-style:italic;letter-spacing:.045em;text-transform:uppercase; color:#243B50; break-inside:avoid;break-after:avoid;page-break-after:avoid; } .hot-doc-heading-num{font-style:italic;margin-right:2.5mm} /* Gebouwenbijlage heading always starts a fresh physical page. */ .hot-doc-heading--attachment{margin-top:0;break-before:page;page-break-before:always} /* ========================================================================= 5. Document tables (eenmalige/jaarlijkse kosten, gebouwenbijlage, ...) ========================================================================= */ .hot-doc-table{width:100%;border-collapse:collapse;font-size:11.5px} .hot-doc-table--dense{font-size:10.5px} .hot-doc-table th{padding:8px 10px;text-align:left;font-weight:600;color:#48555F;background:#F7F9FB} .hot-doc-table td{padding:9px 10px;border-bottom:1px solid #E6EBF1;vertical-align:top} .hot-doc-table tr.hot-doc-table-total td{padding:10px;font-weight:700;color:#243B50;background:#F7F9FB} @media print{ .hot-doc-table{-webkit-print-color-adjust:exact;print-color-adjust:exact} } /* ========================================================================= 6. Signature block — CSS background-image (not ) so an empty signature never fires a broken-image request, per BUILD_NOTES.md. ========================================================================= */ .hot-sig-grid{ display:grid;grid-template-columns:1fr 1fr;gap:40px; margin-top:44px;padding-top:22px;border-top:1px solid #E6EBF1; } .hot-sig-area{ width:220px;height:62px; background-repeat:no-repeat;background-position:left bottom;background-size:contain; } /* ========================================================================= 7. Doc-fit scaling — on-screen the JS sets a transform/zoom factor on .hot-doc-fit to shrink the whole document to the available column width; print always resets to true 1:1 size (rule already declared in section 1 above, restated here for locality/clarity). ========================================================================= */ @media print{ .hot-doc-fit{zoom:1!important} }