/* print.css — the PDF/print rendering of the proposal deck. Loaded on every page for consistency with the rest of the frame, but every rule in this file is scoped inside @media print, so it has zero effect on-screen. Generated via tools/pdf.mjs (Chrome print-to-PDF, NOT pdfkit — see that file's own comment for why: pdfkit's built-in fonts are WinAnsi-encoded and cannot render ₹). The rule this build follows because of it: never trust a PDF export sight-unseen — rasterise the output and read it before it ships. */ @media print { /* ---------- Unstick the nav, drop the section-progress rail ---------- */ /* position:sticky repeats the bar at the top of every printed page, which is a screen affordance (mid-scroll orientation) with no meaning once there is no scrolling. Unstick it first, then drop the fill track and the dot rail themselves — an empty sticky bar and a set of jump-links nobody can click are both dead weight on paper. */ .progress-nav { position: static; } .progress-nav__track, .progress-nav__list { display: none; } /* The cover's bouncing scroll cue is a screen-only affordance (an animated "scroll down" hint) with nothing to invite on paper — and without this it would also pick up the a[href]::after expansion below and print "Scroll (#vision)", which reads as a stray fragment next to the cover's headline. */ .scroll-cue { display: none; } /* ---------- Sections lay out top to bottom, not one-per-screen ---------- */ /* min-height:100svh (frame.css) is a screen-only "one slide fills the viewport" device. On paper it would waste most of a page as blank space under short sections and split long ones arbitrarily. page-break-inside:avoid asks the print engine to keep a section whole rather than splitting it across a page boundary where possible — a best-effort hint (a section taller than one page still has to break somewhere), not a hard guarantee. */ .section { min-height: auto; page-break-inside: avoid; } /* #cover (frame.css) is an ID selector forcing min-height:100svh so the cover fills a phone/desktop screen on load — ID beats the .section class rule above regardless of print.css loading after frame.css in , so it survives the override above untouched and forces the cover to claim most of a print page by itself, pushing its own content onto a second page and leaving the first mostly blank above the unstuck nav. Matching it with another ID selector here is what actually wins: same specificity, later in the cascade (this file's is last in ). Found by rendering the PDF and looking, exactly the rasterise-and-read discipline this file's own top comment cites for ₹. */ #cover { min-height: auto; } /* ---------- Print backgrounds ---------- */ /* Chrome drops background colours/images by default when printing to save ink. This deck's dark .imv sections and the gold accents throughout are load-bearing content, not decoration, so backgrounds must print exactly as rendered on screen. Both the standard and the WebKit-prefixed property are set — Chrome (which tools/pdf.mjs drives) still honours the prefixed form in several versions. */ * { print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* ---------- Expand links to show their destination ---------- */ /* A printed page has no click. Every link's own URL is appended in parentheses after its text so the destination survives onto paper — most usefully for the mockup screen links (./mockups/*.html) and the live-demo link, which are otherwise dead text once printed. attr(href) alone prints the relative path literally — "(./mockups/ sitemap.html)" — which means something only on the page that rendered it, not on paper someone carries away from this page. The eight mockup links each carry a data-abs-href set in the markup to this proposal's one real address, so the PDF prints a URL a reader can actually type. Two rules, not one attr() with a fallback: attr()'s fallback syntax for an arbitrary string type is not reliably supported by the engine tools/pdf.mjs drives, so the two cases are separated by selector instead — data-abs-href wins where present, href is the plain fallback for the one link (the live demo) that is already a full external URL. */ a[data-abs-href]::after { content: " (" attr(data-abs-href) ")"; font-size: 0.85em; font-weight: 400; } a[href]:not([data-abs-href])::after { content: " (" attr(href) ")"; font-size: 0.85em; font-weight: 400; } /* ---------- The package comparison table ---------- */ /* .compare-table's 640px min-width (imove.css) exists so the on-screen .table-scroll wrapper has something to scroll horizontally on a narrow phone. Print has no scrollbar: content wider than the page is not scrolled, it is clipped at the page edge, silently dropping whichever columns ran off it — the opposite of what min-width is for on screen. Dropping it to 0 lets the table shrink to the printable width instead; the smaller type size keeps every column readable at that width rather than wrapping so aggressively each cell turns into a ragged single-word column. overflow:visible on the wrapper matches — an auto-overflow box can clip rather than paginate content that still doesn't fit, which is the same failure by a different route. */ .table-scroll { overflow: visible; border: none; } .compare-table { min-width: 0; width: 100%; font-size: 9.5px; } .compare-table th, .compare-table td { padding: 4px 6px; } }