/* VEYLO X print styles for the public legal documents. Loaded by public/terms.html, public/privacy.html, public/complaints.html and public/trust-centre.html, after /blog/blog.css and with media="print". WHY THIS FILE EXISTS (2026-09-06) --------------------------------- The application has had a print stylesheet since 21 May 2026, written because Chrome was squeezing a dashboard onto one sheet at 61 per cent. Nobody wrote the equivalent for the pages a person actually prints: a landlord printing the Terms before signing, a renter taking the Privacy Notice to an adviser, a solicitor putting the Complaints procedure in a file. Until today those printed with the screen palette and the screen layout, and one of them printed with a hole in it. THE HOLE, WHICH IS THE POINT OF THIS FILE. Both long legal pages fold their older change entries behind a
, and privacy.html folds four supplier tables the same way. A closed
does not print its content. So a printed copy of the Privacy Notice silently omitted every processor, every recipient, every referral partner and every public register we read, and a printed copy of the Terms silently omitted its own change history. Nothing on the paper said anything was missing. A contract that quietly drops its change record is worse than one that runs long, so the fold is undone on paper. See section 4. DO NOT COPY THE APPLICATION'S VERSION INTO HERE. src/index.css in the app repository exists to unwind a single-page application's viewport locking: h-screen, overflow-hidden, fixed heights, and a `body > *:not(:has(.printable))` sweep that hides every other route. None of that applies to a static document. What applies here is ink, folded content, page breaks and a table that scrolls sideways on screen. THIS FILE CHANGES NO WORDS. It hides nothing that carries meaning: the version label, the effective date, the change record and the footer legal notice all print. Section 2 lists what is dropped and why each is chrome rather than content. CACHING. firebase.json serves every .css with `max-age=31536000, immutable`, so this file is only ever reached through a content-hashed URL. After editing it, run `python tools/stamp-assets.py` before deploying, exactly as for /blog/blog.css. The stamp is enforced: tools/check-print-styles.py fails if the ?v= on any page does not match this file's own hash. */ @media print { /* ---- 1. Paper and ink ------------------------------------------------------------ */ /* A4 portrait because the company and its readers are in England. The bottom margin is larger than the top so the browser's own footer, which carries the page number and the URL the copy came from, has room. Do not fight that footer: on a printed legal document the source URL and the page count are worth more than the two millimetres. */ @page { size: A4 portrait; margin: 16mm 16mm 20mm; } /* The screen palette is #46586f body text on a #f3f7fc ground. That is fine backlit and poor on paper, and the ground does not print at all unless the reader has turned background graphics on, which leaves pale grey text on white. Dark ink on white. */ html, body { background: #fff !important; color: #111 !important; overflow: visible !important; /* blog.css sets overflow-x:hidden, which can clip on paper */ } body { font-size: 10.5pt; line-height: 1.45; } h1, h2, h3, h4, strong, dt, th { color: #000 !important; } /* Nothing here relies on a background printing. Shadows, gradients and tinted panels are removed rather than left to the reader's "background graphics" setting, which is off by default and would otherwise decide whether a table header is legible. */ * { box-shadow: none !important; text-shadow: none !important; } /* ---- 2. What does not print ------------------------------------------------------ */ /* Site navigation. The sticky black header is a menu and a "Get early access" button; the footer's five link columns and social icons are a site map. None of it can be used on paper, and the black grounds would either waste a cartridge or print as invisible pale text on white. The document still identifies itself:

, the version line under it, and the footer legal notice, which is kept below. */ header.site, .breadcrumb, .fgrid, .fsocial, .fbar > div, .cta, .wl-in, form, button, input, .no-print { display: none !important; } /* `.fbar > div` above drops the Property Redress Scheme mark, which is that scheme's registered artwork on a white panel drawn for a black footer. Scheme condition C9 is a requirement to display it on the website, which the screen does; reproducing a third party's mark on paper, where the panel it was drawn for does not exist, is a decision nobody has taken. The scheme is named in words on /complaints and in the Terms, which is what a printed copy needs. */ /* The kicker above the title reads "> LEGAL" or "> TRUST CENTRE". It is a category label for a browsing reader and its "> " is drawn by CSS. Neither survives usefully on paper. */ .mono { display: none !important; } /* ---- 3. Layout ------------------------------------------------------------------- */ .article { padding: 0 !important; } .wrap { max-width: none !important; padding: 0 !important; } .article .col { max-width: none !important; margin: 0 !important; } .article h1 { font-size: 20pt; line-height: 1.15; margin: 0 0 8pt; } /* THE VERSION LABEL AND THE EFFECTIVE DATE. This is the reason a legal page gets printed at all: a copy that does not say which version it is cannot be relied on later. It is `

Version …-vN.N-YYYY-MM-DD · Last updated

` on all four pages. It stays visible, it stays dark enough to read, and it is not allowed to be separated from the title it belongs to. tools/check-print-styles.py fails if a page loses it or if this stylesheet hides it. */ .article .meta { color: #222 !important; font-size: 9pt; margin: 0 0 4pt; break-after: avoid; page-break-after: avoid; } .article .meta a { color: #000 !important; } .article .body { margin-top: 14pt; } .article .body h2 { font-size: 13.5pt; margin: 16pt 0 6pt; } .article .body h3 { font-size: 11.5pt; margin: 12pt 0 5pt; } .article .body p { margin: 0 0 8pt; } /* blog.css colours the standfirst #46586f, which is the one paragraph on these pages that does not inherit the body ink set above. Caught in a print preview, not by reading. */ .lead { font-size: 11.5pt; margin: 0 0 8pt; color: #111 !important; } /* Headings keep their first lines of body text; paragraphs do not leave one line stranded on a sheet of their own. `break-inside: avoid` is deliberately NOT set on

: some clauses here run half a page and forcing them whole would push large blanks onto the paper. orphans/widows is the right tool and degrades to nothing where unsupported. */ h1, h2, h3, h4, summary, caption { break-after: avoid; page-break-after: avoid; } p, li, dd { orphans: 3; widows: 3; } section { break-inside: auto; } /* Definition pairs in the Terms are a term and its meaning. Splitting one across a sheet boundary means reading a definition whose term is on the previous page. */ dl > div { break-inside: avoid; page-break-inside: avoid; } dt { font-weight: 700; } dd { margin: 0 0 8pt 18pt; } /* Bulleted lists. blog.css draws the bullet as an 8px gradient square with a border-radius, which is a background: it prints as nothing at all, leaving an indented list with no marks. Replaced with a real character. The checkbox variant is restored after it. */ .article .body ul { margin: 0 0 8pt; } .article .body li { font-size: 10.5pt; padding: 2pt 0 2pt 14pt; } .article .body li::before { content: "\2022"; position: absolute; left: 0; top: 2pt; width: auto; height: auto; border-radius: 0; background: none !important; color: #000; font-size: 10.5pt; line-height: 1.45; } .article .body li.todo::before { content: "\2610"; top: 1pt; color: #000; } /* ---- 4. Folded content ----------------------------------------------------------- */ /* A

that is closed on screen prints nothing but its summary. On these pages that is four supplier tables in the Privacy Notice and the change record in both long documents, so the fold has to come off for print. There is no way to do this with a single rule that works everywhere, because browsers do not hide the content the same way, and none of the older mechanisms was ever reachable from author CSS: the content lived in a user-agent shadow tree with an inline style on it. ::details-content, standardised in 2024, is the first selector that can reach it, and it is supported by Chrome 131+, Safari 18.4+ and Firefox 139+. So this is the primary mechanism and it needs no JavaScript, and the four pages ALSO carry a short script that sets `open` on every
before printing and puts each one back afterwards. That script is the fallback for anything older than mid-2025, which is exactly where a printed contract is likely to be produced: an office browser that has not moved in two years. Both are required by tools/check-print-styles.py, and neither is allowed to be the only one, because a reader cannot see that the change record was dropped. */ details::details-content { content-visibility: visible !important; block-size: auto !important; height: auto !important; opacity: 1 !important; } details, details[open] { display: block !important; border: 1px solid #999 !important; border-radius: 0 !important; background: none !important; margin: 10pt 0 !important; break-inside: auto; } /* Belt and braces for any engine that hides the children rather than the slot. Harmless where the user agent uses ::details-content, which is every current one. */ details > *:not(summary) { display: block !important; } .body details > div { padding: 0 10pt 8pt !important; } .body summary { display: block !important; padding: 8pt 10pt !important; font-size: 11.5pt; font-weight: 700; color: #000 !important; cursor: auto; border-bottom: 1px solid #ccc; } /* The "+" that rotates to a "×" is an affordance for a control that does not exist on paper, and it would read as a stray plus sign at the end of a heading. */ .body summary::after { content: none !important; } /* ---- 5. Tables ------------------------------------------------------------------- */ /* blog.css gives every table `display:block; overflow-x:auto` so a wide table can be swiped on a phone. On paper `overflow-x:auto` clips: the columns past the right edge are simply not printed, and nothing indicates it. Every table on these pages is inside a folded
in the Privacy Notice, so before today they were invisible twice over. Back to a real table, allowed to wrap. */ .article .body table { display: table !important; width: 100% !important; overflow: visible !important; table-layout: auto; font-size: 8.5pt; line-height: 1.35; margin: 0 0 10pt; border-collapse: collapse; break-inside: auto; } /* A table longer than a sheet repeats its column headings on the next one. */ .article .body table thead { display: table-header-group; } .article .body table tr { break-inside: avoid; page-break-inside: avoid; } .article .body table thead th { background: none !important; white-space: normal !important; /* nowrap on screen; on A4 it forces columns off the edge */ border-bottom: 1.5pt solid #333 !important; padding: 4pt 5pt; font-size: 8.5pt; } .article .body table td, .article .body table tbody th { min-width: 0 !important; /* 150px per column does not fit A4 at five columns */ padding: 4pt 5pt; border-bottom: 0.5pt solid #bbb !important; vertical-align: top; text-align: left; } .article .body table tbody tr:nth-child(even) { background: none !important; } .article .body table caption { caption-side: top; text-align: left; font-weight: 700; font-size: 9pt; color: #000; padding: 0 0 4pt; } /* ---- 6. Links -------------------------------------------------------------------- */ /* WHAT WAS DECIDED AND WHY. Paper loses a link's destination, so the question is which destinations are worth the ink. External links get their URL printed. There are six across the four pages and they are the ones a reader cannot reconstruct: a Companies House company page, the ICO's register search, the Property Redress Scheme's complaint form. The whole premise of the Trust Centre is "check it yourself on the third party's register", and a printed copy that drops those addresses does not let anyone check anything. Internal links do not. There are eight, they all point at another page of this same document set, and the house style already writes the path as the link text wherever it matters ("veylox.uk/complaints"). Printing "(veylox.uk/privacy)" after the words "Privacy Notice" adds a line break and no information to a reader who is holding a VEYLO X document. mailto: and tel: links do not either. On every one of them the visible text is already the address or the number; the href only adds a URL-encoded subject line. In-page # anchors do not: there is nowhere to go. Cost of the decision: on the two external links whose text is already a trimmed URL, such as "propertyredress.co.uk", the full address is repeated in brackets. That is mild redundancy in exchange for a rule with no exception list to fall out of date. */ a { color: #000 !important; text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; /* a 75-character URL must not push a table column off the sheet */ } a[href^="mailto:"]::after, a[href^="tel:"]::after, a[href^="#"]::after, a[href^="/"]::after { content: none; } /* ---- 7. Footer legal notice ------------------------------------------------------ */ /* The company number, the registered address, the trade mark notice, the ICO registration and the neutral-platform statement are the only part of the site footer that is content rather than navigation, and on a printed legal document they are the part that says who the document is from. Printed as plain text at the end, in ink. */ footer.site { background: none !important; color: #111 !important; padding: 10pt 0 0 !important; font-size: 8.5pt; break-before: avoid; } .fbar { display: block !important; border-top: 0.5pt solid #999 !important; padding-top: 8pt !important; color: #111 !important; font-size: 8.5pt; line-height: 1.4; } .fbar span { display: block; margin: 0 0 4pt; } }