/** * The printed birth plan. * * Goal: a printed sheet that matches the downloaded PDF. Every measurement here * is the PDF's own, converted 1:1 — a CSS point and a PDF point are both 1/72in, * so the type sizes, leading and rules are copied straight across from * assets/js/pdf.js rather than eyeballed. Changing one without the other is what * makes the two drift apart. * * Most of the document's look already lives in builder.css, because the preview * on screen is deliberately the same object: cream paper, botanical sprig, two * columns, gold sub-headings, a framed final note. What is left here is the * work of turning that card into a sheet of paper — page size, isolation, and * the handful of places where a screen affordance is not a print one. * * The file is loaded for all media, not just print, because builder.js measures * the document off-screen to pick a type size before printing. Nothing here * reaches the visible page: every rule is scoped to .bpbp-print-root, which is * display:none until printing or measuring. * * Isolation strategy: the "Print my plan" button clones the plan into a * top-level .bpbp-print-root on , and the @media print block at the foot * of this file hides every other child of with display:none. Two reasons * it works this way rather than with visibility:hidden and absolute positioning: * * - display:none collapses the boxes. visibility:hidden leaves every hidden * element occupying its full height, so the sheet opens with a screenful of * blank paper where the site header and questionnaire used to be. * - a top-level static block has no containing-block surprises. An absolutely * positioned plan resolves against the nearest positioned ancestor, and * Elementor containers commonly set position:relative — which drops the plan * part-way down the page. */ /* ── The print document ──────────────────────────────────────────────────── */ .bpbp-print-root { /* * Body type size. builder.js steps this down exactly as pdf.js does, until * the plan fits the configured page count. Every size below is derived from * it so one variable rescales the whole document. */ --bpbp-print-size: 11pt; display: none; background: var(--bpbp-paper); color: #33312c; font-size: var(--bpbp-print-size); line-height: 1.3; } /* Laid out off-screen while builder.js measures it. */ .bpbp-print-root.is-measuring { display: block; position: absolute; left: -10000px; top: 0; visibility: hidden; padding: 0; } /* * The card becomes the sheet, but it keeps its colour. Printing this in black * and white would be the tidier engineering choice and the wrong one: the plan * is a keepsake as much as a reference, and the cream ground and gold frame are * most of what makes it feel like one. Anyone who wants it plain can turn * background graphics off in their own print dialog. * * The outer border goes, because the sheet's own edge does that job and a * printed rectangle a few millimetres inside it reads as a mis-scaled page. * The inner rule stays, and becomes the frame. */ /* * The frame becomes a real border on the plan itself, rather than the absolute * pseudo-element it is on screen. Two reasons: * * - Drawn outside the box it landed in the @page margin, where a browser * paints nothing, and the frame simply disappeared. * - An absolutely positioned box does not fragment across pages; it is * clipped at the first one. A border on a block does fragment, and * box-decoration-break asks for the whole frame on every sheet, which is * what the PDF draws. A browser that ignores that still gives a continuous * frame down both pages, which is no worse than the alternative. */ .bpbp-print-root .bpbp-plan { margin: 0; padding: 12pt 14pt; border: 0.8pt solid var(--bpbp-gold-line); border-radius: 0; background: transparent; overflow: visible; box-shadow: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .bpbp-print-root .bpbp-plan::before { display: none; } /* ── Header ──────────────────────────────────────────────────────────────── */ /* PDF: sprig 104x116pt, name up to 30pt, script line 21pt, details in a pill. */ .bpbp-print-root .bpbp-plan__header { display: grid; grid-template-columns: 90pt minmax(0, 1fr) 126pt; align-items: start; gap: 10pt; padding: 0 0 18pt; break-inside: avoid; page-break-inside: avoid; } .bpbp-print-root .bpbp-plan__sprig { display: block; width: 90pt; margin: 0; } .bpbp-print-root .bpbp-plan__titles { padding-top: 4pt; } .bpbp-print-root .bpbp-plan__title { font-size: 22pt; line-height: 1.14; } .bpbp-print-root .bpbp-plan__script span { font-size: 18pt; } .bpbp-print-root .bpbp-plan__meta { margin-top: 9pt; padding: 4pt 14pt; font-size: 9.5pt; } .bpbp-print-root .bpbp-plan__quote { width: 126pt; padding: 9pt 7pt; font-size: 10pt; line-height: 1.34; } /* ── Body ────────────────────────────────────────────────────────────────── */ .bpbp-print-root .bpbp-plan__body { padding: 0; column-count: 2; column-gap: 22pt; column-rule: 0.6pt solid var(--bpbp-gold-soft); font-size: var(--bpbp-print-size); } .bpbp-print-root .bpbp-plan__section + .bpbp-plan__section { margin-top: calc(var(--bpbp-print-size) * 1.5); } .bpbp-print-root .bpbp-plan__section-title { font-size: calc(var(--bpbp-print-size) * 1.28); margin-bottom: calc(var(--bpbp-print-size) * 0.4); padding-bottom: calc(var(--bpbp-print-size) * 0.34); border-bottom-width: 0.7pt; } .bpbp-print-root .bpbp-plan__group-title { margin: calc(var(--bpbp-print-size) * 0.7) 0 calc(var(--bpbp-print-size) * 0.2); font-size: calc(var(--bpbp-print-size) * 0.68); } .bpbp-print-root .bpbp-plan__section-title + .bpbp-plan__group-title { margin-top: calc(var(--bpbp-print-size) * 0.15); } /* * No vertical padding: the PDF spaces bullets with leading alone, and padding * here is what pushed a one-page plan onto a second sheet. */ .bpbp-print-root .bpbp-plan__item { gap: 7pt; padding: 0; font-size: var(--bpbp-print-size); line-height: 1.3; } .bpbp-print-root .bpbp-plan__item .bpbp-mark--sm { width: 3pt; height: 3pt; margin-top: calc(var(--bpbp-print-size) * 0.56); } /* ── Final note ──────────────────────────────────────────────────────────── */ .bpbp-print-root .bpbp-plan__note { margin: calc(var(--bpbp-print-size) * 1.4) 0 0; padding: 10pt 17pt; border-width: 0.6pt; } .bpbp-print-root .bpbp-plan__note-kind { font-size: calc(var(--bpbp-print-size) * 0.68); } .bpbp-print-root .bpbp-plan__note-body { font-size: calc(var(--bpbp-print-size) * 0.95); line-height: 1.32; } /* ── Footer ──────────────────────────────────────────────────────────────── */ .bpbp-print-root .bpbp-plan__footer { display: block; margin: calc(var(--bpbp-print-size) * 1.1) 0 0; padding-top: 5pt; border-top: 0.5pt solid var(--bpbp-gold-soft); font-family: var(--bpbp-font-body); font-size: 7pt; line-height: 1.3; color: #8c877d; } /* ── Page isolation ──────────────────────────────────────────────────────── */ @media print { @page { /* * Close to the PDF's 48pt content margin, with room kept for printers * that cannot reach the edge of the sheet, and for the frame the plan * draws just outside its own content box. builder.js measures against * these values — keep the two in step. */ margin: 0.5in 0.62in; } body.bpbp-printing { background: var(--bpbp-paper) !important; margin: 0 !important; padding: 0 !important; } /* Collapse the entire surrounding page. */ body.bpbp-printing > *:not(.bpbp-print-root) { display: none !important; } body.bpbp-printing .bpbp-print-root { display: block !important; position: static !important; visibility: visible !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; /* Browsers drop backgrounds when printing unless this is set; without it the gold washes and the pill do not paint. */ -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .bpbp-print-root * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; box-shadow: none !important; } /* * The narrow-screen rules in builder.css key off viewport width, and a print * viewport is narrow. Without this the sheet would drop to one column and * lose the sprig — the two things that make it look like the PDF. */ .bpbp-print-root .bpbp-plan__sprig { display: block !important; } .bpbp-print-root .bpbp-plan__header { grid-template-columns: 90pt minmax(0, 1fr) 126pt !important; justify-items: stretch !important; } .bpbp-print-root .bpbp-plan__body { column-count: 2 !important; column-rule: 0.6pt solid var(--bpbp-gold-soft) !important; } }