/* ========================================================================== Webspinner Academy — Print / PDF Stylesheet -------------------------------------------------------------------------- Load with: Produces the downloadable handout when the reader chooses "Save as PDF" in the browser print dialog. TWO OUTPUTS, one document. academy.js sets a class on immediately before window.print() and removes it on afterprint: .printing-lesson full academic text, endnotes, bibliography .printing-handout condensed study sheet: objective, key terms, evidence table, self-check, practice log RUNNING HEADS — WHY THERE AREN'T ANY. Tested, not assumed. Browsers do not implement CSS Paged Media margin boxes (@top-center and friends); that is Prince/WeasyPrint territory. Two documented workarounds were measured against Chrome's PDF output and both failed: position: fixed with negative offsets → elements land inside the text block and overprint body copy; they do not sit in the page margin. display: table-header-group at the root → renders correctly on page one and does not repeat on subsequent pages. So this stylesheet does not pretend to have running heads. Page one carries a real document masthead (.print-masthead), the last page carries the colophon, and per-page numbering comes from the browser's own "Headers and footers" print option — which the on-screen print bar tells the reader to switch on. A broken running head is worse than none. TESTED TARGETS: Chrome/Edge (Blink), Safari (WebKit), Firefox (Gecko). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Page geometry -------------------------------------------------------------------------- */ @page { size: Letter portrait; /* Top margin leaves room for the fixed running head; bottom margin leaves room for the fixed running foot. */ margin: 22mm 20mm 24mm; } /* A4 users: uncomment, or change `size` above. @page { size: A4 portrait; } */ @page :first { margin-top: 26mm; } /* -------------------------------------------------------------------------- 2. Ink discipline -------------------------------------------------------------------------- */ @media print { /* Force the light palette REGARDLESS of the on-screen theme. This must list the [data-theme] attribute selectors explicitly: the dark theme is defined on `:root[data-theme="dark"]` (specificity 0,1,1), so a bare `:root` (0,0,1) here loses to it and a dark-theme print leaks black table fills and low-contrast grey text into the PDF. Matching the selector — and coming later in the cascade (print.css loads after academy.css) — wins cleanly. A dark-theme PDF is a cartridge-destroying document and reads badly on paper regardless. */ :root, :root[data-theme="light"], :root[data-theme="dark"] { --paper: #ffffff; --paper-raised: #ffffff; --paper-sunken: #f6f4ef; --ink: #000000; --ink-muted: #3a3a3a; --ink-faint: #5e5e5e; --line: #cfcabd; --line-strong: #9c9483; --accent: #7a5416; --accent-soft: #f3ebda; --accent-ink: #5a3d0f; --evidence: #14454f; --evidence-soft: #eef5f7; --caution: #7a2f21; --caution-soft: #faf0ed; --practice: #2f4720; --practice-soft: #f0f5ea; --shadow: none; --shadow-lg: none; } html, body { background: #fff !important; color: #000 !important; font-size: 10.5pt; line-height: 1.5; overflow: visible !important; } /* Never let the browser mute our tints. */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; box-shadow: none !important; text-shadow: none !important; } /* -------------------------------------------------------------------------- 3. Suppress interface chrome -------------------------------------------------------------------------- */ .masthead, .rail, .progress, .print-bar, .lesson-nav, .skip-link, .enpop, .no-print, .theme-toggle, .backref, .hub-controls { display: none !important; } /* Layout collapses to a single column at full measure. */ .shell, .shell--lesson { display: block !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } .prose, .prose--wide, .bleed, .callout, .objective, .apparatus, .selfcheck, .datagrid, .meta-strip, .colophon, .pullquote, pre { max-width: none !important; width: auto !important; } /* -------------------------------------------------------------------------- 4. Document masthead — page one only -------------------------------------------------------------------------- */ .print-masthead { display: flex !important; align-items: center; gap: 5mm; padding-bottom: 3mm; margin-bottom: 8mm; border-bottom: 1pt solid #000; break-inside: avoid; break-after: avoid; } .print-masthead__badge { width: 13mm; height: 13mm; flex: none; border-radius: 2mm; background: #00040c; } .print-masthead__text { flex: 1 1 auto; font-family: var(--font-sans); line-height: 1.35; } .print-masthead__brand { display: block; font-size: 9.5pt; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #000; } .print-masthead__course { display: block; font-size: 8pt; color: #5e5e5e; letter-spacing: 0.03em; } .print-masthead__meta { text-align: right; flex: none; font-family: var(--font-sans); font-size: 7.5pt; color: #5e5e5e; line-height: 1.45; } .print-masthead__meta b { display: block; color: #7a5416; font-size: 8.5pt; } /* -------------------------------------------------------------------------- 5. Typography -------------------------------------------------------------------------- */ body { font-family: var(--font-serif); } h1, h2, h3, h4 { break-after: avoid-page; page-break-after: avoid; break-inside: avoid-page; color: #000; letter-spacing: -0.01em; } h1 { font-size: 24pt; line-height: 1.12; margin: 0 0 6pt; } h2 { font-size: 15pt; margin: 20pt 0 7pt; padding-bottom: 3pt; border-bottom: 0.5pt solid #cfcabd; } h3 { font-size: 12pt; margin: 15pt 0 5pt; } h4 { font-size: 10.5pt; margin: 12pt 0 3pt; } p, li { orphans: 3; widows: 3; } p { margin: 0 0 7pt; } /* Hyphenation earns its keep at this measure. */ .prose p, .prose li, .deck { hyphens: auto; -webkit-hyphens: auto; } .deck { font-size: 12pt; line-height: 1.4; color: #3a3a3a; margin: 0 0 10pt; hyphens: none; } .eyebrow { font-size: 8pt; color: #7a5416; margin: 0 0 5pt; letter-spacing: 0.09em; } a { color: #000; text-decoration: none; } /* -------------------------------------------------------------------------- 6. Title block -------------------------------------------------------------------------- */ .lesson-head { padding: 0 0 10pt; break-after: avoid-page; } .meta-strip { border-top: 0.75pt solid #000; border-bottom: 0.75pt solid #000; padding: 5pt 0; gap: 10mm; font-size: 8pt; break-inside: avoid; } .meta-strip__label { font-size: 6.5pt; } .objective { background: #f3ebda; border: none; border-left: 2.5pt solid #7a5416; padding: 7pt 10pt; margin: 10pt 0; break-inside: avoid; } .objective__label { font-size: 7.5pt; } /* -------------------------------------------------------------------------- 7. Blocks that must not straddle a page break -------------------------------------------------------------------------- */ .callout, .datapoint, .figure-placeholder, figure, .selfcheck__item, .pullquote, .print-only-box, dl.terms div, .handout-field { break-inside: avoid-page; page-break-inside: avoid; } .callout { border: 0.5pt solid #cfcabd; border-radius: 3pt; padding: 7pt 10pt; margin: 10pt 0; font-size: 10pt; } .callout__label { font-size: 7.5pt; margin-bottom: 4pt; } .pullquote { border-left: 2.5pt solid #7a5416; padding-left: 8pt; margin: 12pt 0; font-size: 12pt; } blockquote { border-left: 1pt solid #9c9483; padding-left: 8pt; font-size: 10pt; } /* -------------------------------------------------------------------------- 8. Figures — the illustration placeholders survive into the PDF so the production team can mark them up on paper. -------------------------------------------------------------------------- */ figure { margin: 12pt 0; } .figure-placeholder { border: 1pt dashed #9c9483; background: #f6f4ef; padding: 10pt; min-height: 34mm; gap: 4pt; } .figure-placeholder__slug { font-size: 7pt; background: #f3ebda; color: #5a3d0f; } .figure-placeholder__title { font-size: 9pt; } .figure-placeholder__brief { font-size: 8pt; line-height: 1.4; } .figure-placeholder__spec { font-size: 7pt; } figcaption { font-size: 8pt; line-height: 1.4; color: #3a3a3a; margin-top: 4pt; padding-top: 3pt; border-top: 0.5pt solid #cfcabd; } /* -------------------------------------------------------------------------- 9. Tables -------------------------------------------------------------------------- */ .table-wrap { overflow: visible !important; border: 0.5pt solid #cfcabd; border-radius: 0; margin: 10pt 0; break-inside: auto; } table { font-size: 8.5pt; width: 100% !important; } caption { font-size: 7.5pt; padding: 5pt 5pt 3pt; color: #3a3a3a; break-after: avoid; } /* Repeat the header row when a long table spans pages. */ thead { display: table-header-group; } tfoot { display: table-footer-group; } tr { break-inside: avoid; page-break-inside: avoid; } th, td { padding: 3.5pt 5pt; border-bottom: 0.5pt solid #cfcabd; } thead th { background: #f6f4ef; border-bottom: 0.75pt solid #000; font-size: 7.5pt; position: static; } tbody tr:hover { background: none; } /* -------------------------------------------------------------------------- 10. Endnote references and the note list -------------------------------------------------------------------------- */ .enref { font-size: 7pt; color: #7a5416; font-weight: 700; vertical-align: super; line-height: 0; } .apparatus { break-before: page; page-break-before: always; margin-top: 0; padding-top: 0; border-top: none; } .endnotes ol { font-size: 8.5pt; line-height: 1.42; } .endnotes li { padding: 3.5pt 0 3.5pt 16pt; border-bottom: 0.25pt solid #e4dfd3; break-inside: avoid; } .endnotes li::before { width: 13pt; top: 3.5pt; font-size: 8.5pt; } /* Spell out URLs on paper — a link the reader cannot click must be a link the reader can type. */ .endnotes a[href^="http"]::after, .bibliography a[href^="http"]::after { content: " <" attr(href) ">"; font-family: var(--font-mono); font-size: 7pt; color: #5e5e5e; word-break: break-all; } .tier { font-size: 5.5pt; padding: 0.5pt 3pt; } .bibliography li { font-size: 8.5pt; line-height: 1.4; padding: 3.5pt 0 3.5pt 14pt; text-indent: -14pt; border-bottom: 0.25pt solid #e4dfd3; break-inside: avoid; } .bibliography h3 { font-size: 10pt; margin-top: 12pt; } /* -------------------------------------------------------------------------- 11. Self-check — force every answer open on paper -------------------------------------------------------------------------- */ details { display: block !important; } details > summary { list-style: none; } .selfcheck__a { display: block !important; } .selfcheck__item { border: 0.5pt solid #cfcabd; margin-bottom: 6pt; } .selfcheck__q { padding: 5pt 8pt; font-size: 10pt; background: #f6f4ef !important; } .selfcheck__q::before { width: 11pt; height: 11pt; font-size: 7pt; border: 0.5pt solid #7a5416; } .selfcheck__a { padding: 5pt 8pt 6pt 20pt; font-size: 9.5pt; border-top: 0.5pt solid #cfcabd; } /* -------------------------------------------------------------------------- 12. Data points -------------------------------------------------------------------------- */ .datagrid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6pt; margin: 10pt 0; } .datapoint { border: 0.5pt solid #cfcabd; padding: 7pt; gap: 3pt; } .datapoint__value { font-size: 18pt; color: #7a5416; } .datapoint__label { font-size: 8pt; } .datapoint__source { font-size: 6.5pt; } /* -------------------------------------------------------------------------- 13. Colophon -------------------------------------------------------------------------- */ .colophon { break-inside: avoid; border-top: 0.5pt solid #cfcabd; padding: 6pt 0 0; margin-top: 14pt; font-size: 7.5pt; color: #5e5e5e; } pre { font-size: 8pt; border: 0.5pt solid #cfcabd; padding: 6pt; } code, kbd, samp { font-size: 8pt; border: none; background: #f6f4ef; } hr { margin: 12pt 0; border-top: 0.5pt solid #cfcabd; } /* -------------------------------------------------------------------------- 14. Print-mode switching -------------------------------------------------------------------------- */ /* Elements authored for paper only are hidden on screen (see below) and revealed here. */ .print-only { display: block !important; } /* --- Full-lesson mode (default) ------------------------------------ */ .printing-lesson .handout-only { display: none !important; } /* --- Handout mode --------------------------------------------------- */ /* Keep the study apparatus, drop the long-form argument. */ .printing-handout .lesson-body, .printing-handout .bibliography, .printing-handout .deck { display: none !important; } .printing-handout .handout-only { display: block !important; } .printing-handout .apparatus { break-before: auto; page-break-before: auto; margin-top: 14pt; padding-top: 8pt; border-top: 0.75pt solid #000; } .printing-handout .endnotes ol { font-size: 8pt; } /* Ruled writing space for the practice log. Real handouts need somewhere to write; a PDF that cannot be worked in is a PDF that gets skimmed. */ .handout-field { border: 0.5pt solid #cfcabd; border-radius: 3pt; padding: 6pt 8pt 4pt; margin: 8pt 0; } .handout-field__label { font-family: var(--font-sans); font-size: 8pt; font-weight: 700; color: #3a3a3a; margin: 0 0 5pt; } /* Ruled writing space. Two things were learned the hard way here and are worth not re-discovering: mixing mm with pt inside a gradient stop invalidates the whole declaration in Blink's print context (blank boxes, no error); and repeating-linear- gradient does not tile reliably in that context either. A single-rule tile sized with background-size and repeated with repeat-y does work. */ .handout-field__rules { background-image: linear-gradient( to bottom, transparent 0mm, transparent 8.3mm, #cfc8b9 8.3mm, #cfc8b9 8.5mm ); background-size: 100% 8.5mm; background-repeat: repeat-y; background-position: 0 0; } .handout-field__rules--3 { height: 27mm; } .handout-field__rules--5 { height: 44mm; } .handout-field__rules--8 { height: 70mm; } .handout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8pt; break-inside: avoid; } /* A page break the author can place deliberately. */ .page-break { break-before: page; page-break-before: always; } .keep-together { break-inside: avoid-page; page-break-inside: avoid; } } /* -------------------------------------------------------------------------- 15. Screen-side counterparts -------------------------------------------------------------------------- Deliberately NOT here. This file is linked with media="print", so an `@media screen` block inside it can never match. The rules that keep .running-head, .running-foot and .print-only out of the screen layout live in academy.css, which is the stylesheet that is actually parsed on screen. -------------------------------------------------------------------------- */