/* public/css/print.css — branded print view for public pages. * * Three preset themes, driven by class on : * .print-theme-classic — serif, warm, traditional * .print-theme-modern — sans-serif, clean, generous whitespace * .print-theme-minimal — airy, light weights, no decoration * * Accent colour comes from --print-accent (set inline from admin config). * * SCREEN rules: the print-only scaffolding (masthead, sign-off, QR) is * hidden entirely. Nothing changes for normal visitors. * * PRINT rules: website chrome is stripped; the masthead/sign-off appear; * puzzles get clean backgrounds and reliable page-break behaviour. */ /* ===== Screen — hide print-only scaffolding ============================== */ .print-only { display: none !important; } /* SVG grid replacements (generated by public/js/print-grid-svg.js) are hidden on screen — only the interactive HTML grid is visible. */ .print-grid-svg { display: none; } /* ===== Print ============================================================= */ @media print { /* CRITICAL: force browsers to honour background colours + borders. Without this, Chrome / Edge drop all backgrounds in print to "save ink" — and the crossword's black blocks print as white, making the grid unreadable. Applied globally so every themed element prints as intended. */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* Reset the viewport-based min-height on .site-main so the page content ends where it naturally does — otherwise an empty half of a page trails before the signoff block. */ html, body { min-height: 0 !important; } .site-main { min-height: auto !important; padding: 0 !important; } /* --- Strip website chrome --- */ .site-header, .site-footer, nav[data-menu], .site-search-widget, .site-nav, .footer-nav, .footer-controls, .footer-brand, .footer-columns, .cc-banner, .cc-overlay, .share-root, .adsense, .ad-slot, .quiz-nav, .quiz-type-filter, .pe-list-sort-bar, [data-consent-preferences], [data-theme-toggle-host], [data-my-scores-mount], [data-search-results-host] { display: none !important; } /* Hide non-essential interactive bits that clutter print */ button, .btn { display: none !important; } /* Strip SEO intro prose — the

blocks that sit before a puzzle / quiz wrapper. These are for search engines, not paper readers. Uses :has() (widely supported 2024+); falls back gracefully on very old browsers (prose just prints, which is harmless). */ .page-content > p:has(~ .quiz-interactive), .page-content > p:has(~ .quiz-interactive-static), .page-content > p:has(~ .xw-puzzle), .page-content > p:has(~ .ws-puzzle), .page-content > p:has(~ .sd-puzzle), .page-content > p:has(~ .cr-solver), .page-content > p:has(~ .an-solver), .page-content > p:has(~ .rd-solver), .page-content > p:has(~ .mp-board) { display: none !important; } /* Reveal the print scaffolding */ .print-only { display: block !important; } /* SVG grid replacement: when the JS successfully built an SVG for a puzzle grid (and tagged the grid with .has-print-svg), hide the original HTML grid and show the vector SVG instead. Vector rendering is pixel-perfect regardless of DPI or printer driver — no sub-pixel rounding issues that the CSS-grid approach hits. */ .xw-grid.has-print-svg, .ws-grid.has-print-svg, .sd-grid.has-print-svg { display: none !important; } .print-grid-svg { display: block !important; margin: 0 auto !important; max-width: 100% !important; height: auto !important; page-break-inside: avoid !important; break-inside: avoid !important; } /* Keep quiz questions together on a page — never split mid-question. Same treatment for the answer rows below each question. */ .qi-item, .qi-item-static, .rd-item, .cr-puzzle-item, .an-puzzle-item, .mp-pair { page-break-inside: avoid; break-inside: avoid; } /* Neutralise the interactive quiz's button-like option styling. For print we want a plain checkbox + text, not a clickable pill. Radios become simple empty squares the reader can tick with a pen. */ .qi-opts { display: flex; flex-wrap: wrap; gap: 3pt 16pt; margin-top: 2pt; } .qi-opt { display: inline-flex !important; align-items: center; gap: 5pt; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; font-size: 10.5pt !important; color: #111 !important; cursor: default !important; } .qi-opt input[type="radio"], .qi-opt input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; width: 9pt; height: 9pt; border: 0.75pt solid #000 !important; border-radius: 0 !important; background: transparent !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; flex: 0 0 auto; } /* Strip any pseudo-element decorations (checkmarks, background colours) the interactive CSS might have added to selected options. */ .qi-opt::before, .qi-opt::after, .qi-opt input::before, .qi-opt input::after { content: none !important; } /* Question text gets a little room above it */ .qi-item .qi-q { font-weight: 600; margin-top: 6pt; margin-bottom: 2pt; } .qi-item { margin-bottom: 6pt; } /* Hide feedback/answer blocks that the interactive JS would otherwise leave hidden — explicit about it in case they're rendered visible. */ .qi-feedback, .qi-result, .qi-actions, .qi-history { display: none !important; } /* Layout basics: A4 by default, small margins, white background */ @page { size: A4 portrait; margin: 15mm 14mm 22mm; /* extra at bottom so sign-off never overlaps content */ } html, body { background: #fff !important; color: #111 !important; font-size: 11pt; line-height: 1.45; } body > .container, main.site-main > .container, .site-main { max-width: none !important; padding: 0 !important; margin: 0 !important; } /* Masthead (runs at the top of the first page only — multi-page printouts rely on the browser's running header which is fine since our signoff uses fixed-position on the last visible area). */ .print-masthead { border-bottom: 1.5pt solid var(--print-accent, #2563eb); padding-bottom: 6mm; margin-bottom: 8mm; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 4mm; } .print-masthead-brand { display: flex; align-items: center; gap: 4mm; } .print-masthead-logo { width: 14mm; height: 14mm; object-fit: contain; } .print-masthead-name { font-size: 20pt; font-weight: 700; color: var(--print-accent, #2563eb); } .print-masthead-tagline { font-size: 10pt; color: #555; font-style: italic; flex: 1 0 auto; text-align: center; } .print-masthead-date { font-size: 9pt; color: #888; text-align: right; } /* Sign-off sits in document flow at the very end — prints on the last page naturally. Using `position: fixed` sounded appealing ("sign-off on every page") but browsers disagree about whether fixed elements repeat across print pages, and when they don't repeat they can overlap real content. Flow layout is predictable. */ .print-signoff { display: flex; align-items: flex-end; justify-content: space-between; gap: 6mm; margin-top: 8mm; padding-top: 4mm; border-top: 0.75pt solid #ddd; font-size: 10pt; color: #555; page-break-inside: avoid; break-inside: avoid; } .print-signoff-text { flex: 1 1 auto; line-height: 1.4; max-width: 120mm; } .print-signoff-text strong { color: var(--print-accent, #2563eb); } /* QR block */ .print-qr { flex: 0 0 auto; text-align: center; } .print-qr-canvas { width: var(--print-qr-size, 30mm); height: var(--print-qr-size, 30mm); border: 0.5pt solid var(--print-accent, #2563eb); padding: 1.5mm; background: #fff; } .print-qr-canvas svg { width: 100%; height: 100%; display: block; } .print-qr-caption { font-size: 8pt; margin-top: 1mm; color: #777; } /* QR position variants — swap flex direction to move the QR around within the sign-off block. "top-right" currently falls back to bottom-right because fixed-positioning a QR over the page content caused overlap (browsers inconsistent). If top-right is ever needed, it'd want dedicated DOM up in the masthead. */ .print-qr-pos-bottom-left { flex-direction: row-reverse; } .print-qr-pos-bottom-centre { flex-direction: column; align-items: center; text-align: center; } .print-qr-pos-bottom-centre .print-signoff-text { max-width: none; text-align: center; } /* Keep grids together on a page, but NOT whole puzzle containers. (The .rd-solver / .cr-solver / .an-solver / .mp-board containers are often taller than one page — applying page-break-inside: avoid at that level makes the browser punt the whole thing to page 2, leaving page 1 blank. Items inside them get their own avoid rules in the per-tool print CSS.) */ .xw-grid, .ws-grid, .sd-grid { page-break-inside: avoid; break-inside: avoid; } /* --- Theme: Classic (serif, traditional) --- */ .print-theme-classic { font-family: 'Georgia', 'Times New Roman', serif; } .print-theme-classic .print-masthead { border-bottom-style: double; border-bottom-width: 3pt; } .print-theme-classic h1, .print-theme-classic h2, .print-theme-classic h3 { font-family: 'Georgia', 'Times New Roman', serif; color: var(--print-accent, #2563eb); } /* --- Theme: Modern (clean sans) --- */ .print-theme-modern { font-family: 'Helvetica Neue', Arial, sans-serif; } .print-theme-modern .print-masthead { border-bottom-width: 0.75pt; } .print-theme-modern h1, .print-theme-modern h2, .print-theme-modern h3 { font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 700; color: var(--print-accent, #2563eb); } /* --- Theme: Minimal (airy, light) --- */ .print-theme-minimal { font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 300; } .print-theme-minimal .print-masthead { border-bottom: 0.5pt solid #ccc; } .print-theme-minimal .print-masthead-name { font-weight: 500; color: #111; } .print-theme-minimal h1, .print-theme-minimal h2, .print-theme-minimal h3 { font-weight: 400; color: #222; letter-spacing: -0.01em; } .print-theme-minimal .print-signoff { border-top: 0.25pt solid #ddd; } /* Headings on the page itself — scale down from screen sizes */ h1 { font-size: 20pt; margin-top: 0; } h2 { font-size: 16pt; } h3 { font-size: 13pt; } /* Links: show the target URL inline so printed pages are still useful on paper. Skip for our own internal UI links that point to hashes or javascript. */ a[href^="http"]::after, a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #777; font-style: italic; } /* Skip URL annotations on the QR canvas and other decorative bits */ .print-qr a::after, .print-masthead a::after { content: ""; } }