/* ============================================================ 29-print.css — print-friendly stylesheet Goals when someone hits Cmd/Ctrl-P or saves a page as PDF: - Strip nav, banners, sticky CTAs, dev banner, cookie notice, floating SMS button, scroll progress - Black text on white, no background images, no shadows - Show the URL after every link so it's clickable from print - Keep headings together with content (page-break-after: avoid) - Preserve a clean header with the logo + business + contact so the printed page reads like a brochure, not a screenshot ============================================================ */ @media print { /* ── Reset to neutral background, print-safe colours ───────── */ *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; } html, body { background: #fff !important; color: #000 !important; font-size: 11pt; line-height: 1.45; } /* Hide chrome that doesn't belong in print ─────────────────── */ #header, .nav, .nav-toggle, .header-cta, #banner, .dev-banner, .cookie-notice, .floating-cta, .scroll-progress, .section-dots, .skip-link, .sr-only-focusable, .qf-submit, .hero-actions, .pj-filters, .pj-cta, .pj-cta-actions, form button[type="submit"], .btn, .btn-primary, .btn-light, .btn-yellow, .btn-dark, .btn-ghost, .modal-overlay, iframe, video { display: none !important; } /* Custom print header — added at the top of so the page starts with brand and contact info even when nav is hidden. */ body::before { content: "Born to Build — Carpentry and Construction Services · 0498 188 478 · borntobuildservices.com · ABN 67 654 664 838 · NSW Builders Licence 362701C"; display: block; padding: 12pt 0 14pt; margin-bottom: 18pt; border-bottom: 1pt solid #999; font-family: Inter, system-ui, sans-serif; font-size: 9pt; font-weight: 600; color: #000 !important; } /* Compact footer with print date */ body::after { content: "Printed " attr(data-print-date) " · borntobuildservices.com"; display: block; margin-top: 24pt; padding-top: 10pt; border-top: 1pt solid #999; font-family: Inter, system-ui, sans-serif; font-size: 8pt; color: #666 !important; text-align: center; } /* Strip hero parallax — show the copy directly on white */ #hero, .hero, .hero-inner, section.parallax { min-height: 0 !important; background-image: none !important; color: #000 !important; padding: 12pt 0 !important; } .hero-copy { color: #000 !important; } /* Module containers — neutral spacing */ .module { padding: 18pt 0 !important; page-break-inside: avoid; } /* Layout helpers — fluid widths so everything fits on A4 */ .container, .narrow-container { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Typography — sized for print */ h1 { font-size: 22pt; line-height: 1.2; margin: 0 0 8pt; page-break-after: avoid; } h2 { font-size: 16pt; line-height: 1.25; margin: 14pt 0 6pt; page-break-after: avoid; } h3 { font-size: 12pt; line-height: 1.3; margin: 10pt 0 4pt; page-break-after: avoid; } p, li { font-size: 11pt; line-height: 1.45; orphans: 3; widows: 3; } ul, ol { padding-left: 18pt; } /* Show URL after links so they're clickable on the printout. Skip phone/email — those would expose the schema markup. */ a[href^="http"]::after, a[href^="https"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555 !important; word-break: break-all; } a[href^="tel:"]::after, a[href^="mailto:"]::after, a[href^="#"]::after, a[href^="/"]::after { content: ""; /* don't suffix internal links */ } /* Tables and forms — flatten cleanly */ table { width: 100%; border-collapse: collapse; } th, td { border: 0.5pt solid #999; padding: 4pt 6pt; } input, textarea, select { border: 0.5pt solid #999 !important; background: #fff !important; color: #000 !important; padding: 3pt !important; font-size: 10pt !important; } /* Images — keep aspect, never break across pages */ img { max-width: 100% !important; height: auto !important; page-break-inside: avoid; } /* Fix obvious dark-mode-specific colour overrides */ .compact-cta, .compact-cta--light, footer, #footer { background: #fff !important; color: #000 !important; } #footer a, .compact-cta a { color: #000 !important; } /* Force images to print at full quality (no print-saver compression) */ body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* A4 page margins */ @page { size: A4; margin: 14mm 14mm 14mm 14mm; } }