/* ========================================================================== print.css — a paper handout of the written version. THE ONLY ENTRY POINT IN THIS FILE IS `@media print`. Nothing here applies on screen, so the file is safe to load unconditionally: (no media attribute needed — the media query below owns that job). What it does: hides the whole WebGL experience and prints #written on its own, inverted to black-on-white, with a masthead, numbered steps, spelled-out link URLs and a closing footer. It works whether the reader is on the no-webgl fallback or looking at the animation with #written still [hidden]. ========================================================================== */ @media print { /* ---------- page box ---------- */ @page { margin: 18mm 16mm; } /* Print tokens. Deliberately plain: near-black on white, mid-grey for anything secondary. Nothing is a brand colour, so nothing needs forcing. */ :root { --p-ink: #111; /* body and headings */ --p-dim: #555; /* notes, labels, source line, printed URLs */ --p-rule: #bbb; /* hairlines */ --p-tint: #f2f2f2; /* the one tint we ask the printer to honour */ } /* ---------- hide the experience ---------- */ /* Everything fixed, animated, interactive or duplicated. #captions is the screen-reader source copy that #written is cloned from, so printing both would print the article twice. #story is eight empty scroll spacers that would otherwise emit eight blank pages. */ #gl, #caption-link, #loader, #rail, #controls, #timeline, #compare, #scroll-cue, #captions, #story, #outro, .skip-link, #written-x, #written-close { display: none !important; } html, body { background: #fff !important; color: var(--p-ink) !important; overflow: visible !important; /* body has overflow-x:hidden on screen */ font-weight: 400; -webkit-print-color-adjust: economy; print-color-adjust: economy; } /* ---------- unlock the written version ---------- */ /* It may still carry [hidden] (reader was watching the animation) and may not have .no-webgl, so force it visible and take it out of its fixed, blurred, self-scrolling overlay so it can flow across pages. */ #written, #written[hidden] { display: block !important; position: static !important; inset: auto !important; z-index: auto !important; overflow: visible !important; height: auto !important; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .written-inner { max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ---------- typography for paper ---------- */ #written { font-family: 'Inter', Georgia, 'Times New Roman', serif; font-size: 11.5pt; line-height: 1.55; color: var(--p-ink); orphans: 3; widows: 3; } #written h1, #written h2 { font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; font-weight: 400; color: var(--p-ink); text-shadow: none !important; break-after: avoid; page-break-after: avoid; /* legacy alias, still needed by some engines */ } #written-body h2 { font-size: 17pt; line-height: 1.18; margin: 0 0 6pt; } #written-body p { font-size: 11.5pt; line-height: 1.55; color: var(--p-ink); margin: 0 0 7pt; } #written-body .note { font-size: 10pt; color: var(--p-dim); margin-top: 8pt; padding-top: 6pt; border-top: 0.5pt solid var(--p-rule); } /* ---------- numbered steps ---------- */ /* .step-no already reads "01 · A HEALTHY BRAIN". On screen it shouts in full caps; on paper it becomes a quiet label sitting above the heading. */ #written-body .step { margin: 0 0 14pt; break-inside: avoid-page; /* keeps a short step whole; long ones still split */ page-break-inside: avoid; } #written-body .step-no { margin: 0 0 3pt; font-family: 'Inter', Arial, sans-serif; font-size: 8pt; font-weight: 500; letter-spacing: 0.12em; text-transform: none; /* undo the screen shout: "01 · A healthy brain" */ font-variant-caps: all-small-caps; /* … and set it as small caps where supported, falling back to plain sentence case if not */ color: var(--p-dim); break-after: avoid; page-break-after: avoid; } /* ---------- masthead ---------- */ /* Built entirely from #written-kicker, which already exists in the markup and is redundant in print ("The written version" means nothing on paper). Its own text is collapsed to zero and the two generated lines carry the title and standfirst. No new markup required. */ #written-kicker { font-size: 0 !important; /* swallows "The written version" */ letter-spacing: normal !important; text-transform: none !important; color: var(--p-ink) !important; margin: 0 0 14pt !important; padding: 0 0 8pt; border-bottom: 1pt solid var(--p-ink); break-after: avoid; page-break-after: avoid; } #written-kicker::before { content: "How Alzheimer's changes the brain"; display: block; font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif; font-size: 26pt; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 4pt; } #written-kicker::after { content: "A plain-language guide to how the disease unfolds, from the whole brain down to a single nerve cell."; display: block; font-family: 'Inter', Georgia, serif; font-size: 10.5pt; line-height: 1.4; color: var(--p-dim); } /* ---------- support list ---------- */ #written h2.written-support { font-family: 'Inter', Arial, sans-serif; font-size: 11pt; font-weight: 600; margin: 16pt 0 6pt; } /* The one place a tint earns its ink: the helpline block is what a carer will actually look for, so it gets a light panel and we ask the printer not to drop it. Everything else stays plain black on white. */ #written .outro-links { list-style: none; margin: 0 0 10pt; padding: 7pt 9pt; background: var(--p-tint); border-left: 2pt solid var(--p-ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; page-break-inside: avoid; } #written .outro-links li { margin: 0 0 4pt; font-size: 10.5pt; } #written .outro-links li:last-child { margin-bottom: 0; } /* ---------- links on paper ---------- */ #written a { color: var(--p-ink) !important; border-bottom: 0 !important; text-decoration: underline; } /* Spell the destination out after each link, since a printed link is useless otherwise. Scoped to the support list and the source line only. The step text in #written-body is cloned with textContent, so it contains no links at all today — but if that ever changes, appending a full URL mid-sentence would wreck the measure, so prose is explicitly opted out below. */ #written .outro-links a[href^="http"]::after, #written .written-source a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: var(--p-dim); word-break: break-all; /* long URLs must not push the column wider */ } #written-body a[href^="http"]::after { content: none; } /* ---------- source line ---------- */ .written-source { font-size: 9.5pt; color: var(--p-dim); margin: 10pt 0 0; } /* ---------- footer ---------- */ /* CSS has no cross-browser running footer (@page margin boxes are barely supported), so this is a single end-of-document colophon rather than a per-page strap. Generated from .written-inner::after, again no new markup. \A + white-space:pre-line gives the two lines. */ .written-inner::after { content: "How Alzheimer's changes the brain · Source: NHS\A The animated version: demo.harmony.co.uk/kieran/alzheimers/"; display: block; white-space: pre-line; margin-top: 14pt; padding-top: 6pt; border-top: 0.5pt solid var(--p-rule); font-family: 'Inter', Arial, sans-serif; font-size: 8.5pt; line-height: 1.5; color: var(--p-dim); break-inside: avoid; page-break-inside: avoid; } } @media print { /* Quotes were added to the captions after this sheet was written: make sure they print as ink. */ #written-body blockquote { margin: 14pt 0; padding: 2pt 0 2pt 10pt; border-left: 2pt solid #999; } #written-body blockquote p { color: #222 !important; font-size: 12.5pt; line-height: 1.45; } #written-body blockquote cite { color: #666 !important; font-size: 8.5pt; } /* The checklist and the methods note are part of the handout; the ticks are not. */ #written .risk-list label { padding: 2pt 0; font-size: 10.5pt; color: #222 !important; } #written .risk-list input[type=checkbox] { appearance: auto; -webkit-appearance: auto; width: 9pt; height: 9pt; border: 1pt solid #444; background: #fff !important; } #written .risk-tally { display: none; } #written .methods-list li { font-size: 10.5pt; color: #333 !important; } #written .methods-list strong, #written #risks strong { color: #000 !important; } }