/* ============================================================================ print.css — what comes out of the printer. Loaded with media="print", so none of this affects the screen. OWNERSHIP: Agent A, in Phase 3, strictly after Agent B has written every printRender. Phase 0 provides only the rules that make the CURRENT build print something sane rather than a screenshot of the app chrome. --------------------------------------------------------------------------- THE TRAP, documented so nobody rediscovers it the hard way: js/theme.js writes the derived palette as INLINE custom properties on :root. Inline style beats any selector, so an override here must carry !important ON THE CUSTOM PROPERTY ITSELF: @media print { :root { --ink: var(--print-ink) !important; } } A `html[data-printing] { --ink: #000; }` selector is NOT specific enough. --------------------------------------------------------------------------- INVENTORY .no-print .print-cover .print-divider .print-section .print-section--wide .print-card .print-allow-break .print-h2 .print-note .print-cover-title .w1 .w2 .w3 the three words of the cover title, each taking its own hue .print-cover-year .print-cover-name .print-cover-meta .print-cover-motto .print-divider-emoji .print-divider-title Set on rather than as classes: [data-printing] a print run is in progress; the live view is hidden [data-paper] 'letter' | 'a4' — chooses the @page block [data-print-mode] 'ink-saver' | 'color' — chooses the palette ============================================================================ */ /* US Letter by default: this sells to US K-12 teachers, and a three-ring binder takes Letter. (The "8x10" the competing listing advertises is a PHOTO print size — no consumer printer stocks it and no binder accepts it.) A4 is a Settings switch, because Etsy sells internationally and an A4 buyer printing a Letter layout loses the right-hand column off every wide table. */ @page { size: Letter portrait; /* Wide left margin so a three-hole punch never eats a column. */ margin: 0.5in 0.5in 0.5in 0.75in; } /* The cover uses the SAME margin as every other page. It briefly full-bled to the paper edge (@page :first { margin: 0 }), but .print-cover has no background — no photo, no colour fill — so there was nothing that actually needed the bleed. All it bought was a page whose margin didn't match the rest of the binder, which is what "the cover looks wrong, it's outside the margins" was pointing at, and it carries a real printer risk besides: plenty of consumer printers refuse a true zero margin outright and silently rescale the page to their own hardware minimum. */ @page a4page { size: A4 portrait; margin: 12mm 12mm 12mm 19mm; } html[data-paper="a4"] body { page: a4page; } /* Ink-saver is the DEFAULT, and it is a real decision rather than a timid one: teachers print on the shared school laser and toner is a recurring cost that comes out of someone's budget. Full colour is one switch away in Settings. The !important is load-bearing and not laziness. js/theme.js writes the derived palette as INLINE custom properties on :root, and inline style beats any selector — so `html[data-print-mode] { --ink: #000 }` would lose. The !important has to sit on the custom-property declaration itself. */ html:not([data-print-mode="color"]) { --ink: var(--print-ink) !important; --ink-soft: var(--print-ink-soft) !important; --ink-faint: var(--print-ink-faint) !important; --surface: var(--print-surface) !important; --surface-2: var(--print-surface) !important; --surface-3: var(--print-surface-2) !important; --bg: var(--print-surface) !important; --line: var(--print-line) !important; --line-strong: var(--print-line-strong) !important; --shadow-sm: none !important; --shadow-md: none !important; --shadow-lg: none !important; } /* Full-colour binder. Browsers strip backgrounds when printing unless told otherwise, so the whole point of this mode needs the adjust hint. */ html[data-print-mode="color"] * { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; } body { background: var(--print-surface); font-size: 10.5pt; } /* App chrome never goes on paper. */ .no-print, .topbar, .subtabs, .binder-foot, .binder-rings, .decor, .fx-canvas, .modal-root, .toast-root, .splash, .skip-link, .btn, .btn-icon, .chip, .seg, .chips, .toolbar, .rowbtns { display: none !important; } /* During a print run js/print.js sets data-printing on and fills [data-print-doc]. The live view is hidden and the built document is shown — screen views are full of inputs and filters and are never what gets printed. */ html[data-printing] .binder { display: none !important; } html[data-printing] [data-print-doc] { display: block !important; } .binder { max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; border: 0; min-height: 0; } .card, .table-wrap { border: 1px solid var(--print-line) !important; border-radius: 0; box-shadow: none !important; break-inside: avoid; } .print-cover { break-after: page; } .print-divider { break-before: page; break-after: page; } .print-section { break-before: page; } .print-card { break-inside: avoid; } /* A section carrying a wide table turns the paper. js/print.js applies this automatically when the built section contains a .table-wrap--wide, so the attendance matrix and the gradebook get landscape without any view asking. Named pages need Chrome 118+/Safari 16.4+; where unsupported the page simply stays portrait with the table scaled down, which is legible rather than clipped — an acceptable floor, not a broken one. */ @page landscape { size: Letter landscape; margin: 0.5in 0.5in 0.5in 0.75in; } @page a4landscape { size: A4 landscape; margin: 12mm 12mm 12mm 19mm; } .print-section--wide { page: landscape; } html[data-paper="a4"] .print-section--wide { page: a4landscape; } .print-section--wide .table { font-size: 8.5pt; } .print-section--wide .table th, .print-section--wide .table td { padding: 2pt 3pt; } /* Escape hatch: a card taller than a page must be allowed to split, or it forces a new page and leaves the previous one blank. */ .print-card.print-allow-break { break-inside: auto; } /* The single most important rule for a binder. The attendance matrix and the gradebook run to many pages and are unreadable without the header row repeating on each one. Absent from every print block in the sibling products, including the best of them. */ thead { display: table-header-group; } tfoot { display: table-footer-group; } tr, td, th { break-inside: avoid; } /* Never orphan a heading at the foot of a page. */ h1, h2, h3, .print-h2 { break-after: avoid; } .table th { position: static; } /* sticky is meaningless on paper */ .table-wrap { overflow: visible; } a[href]::after { content: ""; } /* no URL spew after every link */ /* Section heading and sub-line on a printed sheet. Views emit these instead of the screen's .card-head, because a printed page wants a title and a context line ("Mrs Parker · 3rd Grade · Room 204"), not a coloured card header. */ .print-h2 { margin: 0 0 .12in; font-size: 15pt; border-bottom: 1.5pt solid var(--print-ink-soft); padding-bottom: .06in; } .print-note { margin: 0 0 .18in; font-size: 9pt; color: var(--print-ink-soft); } /* The teacher's own reference line, repeated under every section heading so a sheet that gets separated from the binder still says whose class it is. */ .print-section > .print-note:first-of-type { font-style: italic; } /* --------------------------------------------------------------------------- The cover and the tab dividers. These are the two pages a buyer compares against the printable she almost bought instead, so they keep their colour even in ink-saver mode — the overrides at the top of this file are re-overridden here deliberately. Everything else in the binder still prints neutral. --------------------------------------------------------------------------- */ .print-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; /* 9.4in fits comfortably inside the 10in a Letter page leaves after its standard 0.5in top/bottom @page margin — sized for THIS page's real content box now that the cover no longer gets one of its own. */ min-height: 9.4in; padding: 0.3in 0.35in; gap: .18in; } .print-cover-title { margin: 0; font-family: var(--font-display); font-size: 54pt; line-height: .96; letter-spacing: .01em; print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* Each word of the cover title takes its own hue from the section ladder, the way the printable this competes with alternates a colour per letter. The spans are emitted by js/print.js; the colours are still tokens, so a teacher who themes her binder gets a themed cover rather than a fixed rainbow. */ .print-cover-title .w1 { color: var(--print-title-1); } .print-cover-title .w2 { color: var(--print-title-2); font-family: var(--font-hand); } .print-cover-title .w3 { color: var(--print-title-3); } .print-cover-year { margin: 0; font-family: var(--font-hand); font-size: 20pt; color: var(--print-year); print-color-adjust: exact; } .print-cover-name { margin: .12in 0 0; font-size: 16pt; font-weight: 700; } .print-cover-meta { margin: 0; font-size: 12pt; color: var(--print-meta); } .print-cover-motto { margin: .3in 0 0; padding: .12in .3in; border: 2pt solid var(--print-motto); border-radius: 999px; font-family: var(--font-hand); font-size: 13pt; print-color-adjust: exact; } /* A tab divider: the sheet that sits behind a physical binder tab. Big enough to read from the side of a desk, with the section's own colour as a band. */ .print-divider { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 9.6in; gap: .2in; print-color-adjust: exact; -webkit-print-color-adjust: exact; } .print-divider-emoji { font-size: 62pt; line-height: 1; } .print-divider-title { margin: 0; padding: .16in .5in; font-family: var(--font-display); font-size: 34pt; color: var(--print-surface); background: var(--sec, var(--print-band)); border-radius: 999px; print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* Ink-saver still applies to the 29 content sections; the cover and dividers opt back in above. A teacher who wants the whole thing neutral can pick ink-saver AND skip the dividers, which is a Settings choice, not a default. */