/* ========================================================================== a11 info pages — INK-ONLY (color-free) variants for black & white printing -------------------------------------------------------------------------- The color pages stay the default. These two variants strip every color so the sheet prints clean on a B&W laser (Walgreens etc.) instead of coming out as muddy grays. Activated by a body class, added by /assets/print-toggle.js (or ?bw=light / ?bw=dark in the URL): body.bw-light → white paper, black ink (safe, cheap, crisp) body.bw-dark → black paper, white ink (on-brand, heavy toner) HOW IT WORKS: brand.css is entirely CSS-variable driven, so re-pointing the tokens under a body class recolors BOTH the on-screen preview AND the printed sheet with almost no new rules. We only hand-fix the few HARDCODED colors brand.css / the page markup bake in (the aurora blobs, the 5 ColorTrim status slivers, the printed blue-aurora echo, the glassy badge, buttons). No layout is touched — the @media print one-pager in brand.css still runs. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Token remap — the whole page recolors from these -------------------------------------------------------------------------- */ body.bw-light { --canvas: #ffffff; --fg: #000000; --muted: #3a3a3a; /* still passes contrast on white in print */ --surface: #f2f2f0; --card: #ffffff; --line: #8a8a8a; /* dashed construction rails */ --line2: #cfcfcf; /* card borders */ /* accent = sub-labels (Accurate/Fast/…) + icon strokes. NOTE: each page sets --accent INLINE on , which beats a normal class rule — so this needs !important to win. A distinct dark gray (~7:1 on white) makes the accent tier read separately from the pure-black body text while staying AA. */ --accent: #595959 !important; } body.bw-dark { --canvas: #000000; --fg: #ffffff; --muted: #c4c4c4; --surface: #161616; --card: #0d0d0d; --line: #5a5a5a; --line2: #333333; /* dark analog: a light gray (~8:1 on black), softer than pure white */ --accent: #a6a6a6 !important; } /* overview.html is the multi-accent page: it sets --accent INLINE on each product section (not just ), so a body-level override can't reach them — an element's own inline --accent beats an inherited value no matter the ancestor's !important. Target every element that sets --accent inline so ALL accents (body + per-section) collapse to the monochrome gray. */ body.bw-light [style*="--accent"] { --accent: #595959 !important; } body.bw-dark [style*="--accent"] { --accent: #a6a6a6 !important; } /* -------------------------------------------------------------------------- 2. Kill the color washes (aurora is hardcoded rgba, not var-driven) -------------------------------------------------------------------------- */ body.bw-light .aurora, body.bw-dark .aurora { display: none !important; } /* closing band wash keys off --accent; with accent=ink it's a faint gray — drop it entirely so the footer band stays truly ink-free */ body.bw-light .closing, body.bw-dark .closing { background: none !important; } /* -------------------------------------------------------------------------- 3. SVG line-art — white knockout fills must match the page in dark mode, or the checkmark/plus circles punch a solid white blob onto black -------------------------------------------------------------------------- */ body.bw-dark [fill="#fff"], body.bw-dark [fill="#ffffff"], body.bw-dark [fill="#FFF"] { fill: #000000 !important; } /* -------------------------------------------------------------------------- 4. Components with hardcoded (non-var) colors in brand.css -------------------------------------------------------------------------- */ /* buttons are `background: var(--fg); color:#fff` — with fg flipped, force the label back to the page color so it stays legible on screen (hidden in print) */ body.bw-light .btn, body.bw-dark .btn { color: var(--canvas) !important; box-shadow: none !important; } /* badge is a glassy white pill — reads wrong on black; make it a clean outline */ body.bw-light .badge { background: transparent !important; border-color: rgba(0,0,0,0.35) !important; color: rgba(0,0,0,0.82) !important; } body.bw-dark .badge { background: transparent !important; border-color: rgba(255,255,255,0.42) !important; color: rgba(255,255,255,0.86) !important; } body.bw-dark .badge .dot { background: #ffffff !important; } /* the a11 logo art is near-black grayscale — invert it so the wordmark reads on a black sheet (nav, the print-only brand mark, and the footer mark) */ body.bw-dark .nav .brand img, body.bw-dark .print-brand img, body.bw-dark .footer .who img { filter: invert(1) !important; } /* selection tint (green) → neutral */ body.bw-light ::selection { background: rgba(0,0,0,0.18); } body.bw-dark ::selection { background: rgba(255,255,255,0.28); } /* -------------------------------------------------------------------------- 5. ColorTrim → dashed rule. The five-color strip basically advertises "no color here" on a B&W sheet, so drop it and close the page with the same dashed construction rule used up top. (In print the top rule's corner crosses are hidden too, so this plain dashed line matches the top exactly on paper.) -------------------------------------------------------------------------- */ body.bw-light .color-trim, body.bw-dark .color-trim { height: auto !important; min-height: 0; background: none !important; border-top: 1px dashed var(--line); } body.bw-light .color-trim > *, body.bw-dark .color-trim > * { display: none !important; } /* -------------------------------------------------------------------------- 6. Print-specific fixes -------------------------------------------------------------------------- */ @media print { /* remove the printed blue-aurora echo (hardcoded blue radial gradients) */ body.bw-light::before, body.bw-light::after, body.bw-dark::before, body.bw-dark::after { background: none !important; } /* dark = a true full-bleed black sheet: paint the page edge-to-edge so the white text has black under it everywhere (needs print-color-adjust:exact, which brand.css already sets on *). */ html:has(body.bw-dark) { background: #000000 !important; } body.bw-dark { background: #000000 !important; } /* SYMMETRIC TOP/BOTTOM MARGIN. brand.css gives main a 0.28in TOP margin, so the top dashed rule (main's border-top) sits 0.28in in from the paper edge. But main has no bottom margin — it grows to fill the sheet, cramming its trailing dashed .rule against the unprintable bottom edge (invisible on the printout). Mirror the top: give main the same 0.28in BOTTOM margin, and let that existing trailing .rule be the bottom line. Hide the color-trim in print (screen keeps it) so it isn't a second line jammed at the edge. */ body.bw-light main, body.bw-dark main { margin-bottom: 0.28in; } body.bw-light .color-trim, body.bw-dark .color-trim { display: none !important; } /* VERTICAL RAILS RUN OFF THE BOTTOM EDGE (mirror of the top). At the top, main's first band uses margin-top:-0.28in to carry its side rails up past the top rule to the paper edge. Do the same at the bottom: the footer band sits right after main (its inner .footer is hidden, but the .band wrapper's dashed side rails remain). Pull it up 0.28in so its rails start at the bottom rule, and pad it 0.28in tall so those rails run down through main's bottom margin and off the paper edge. */ body.bw-light main + .band, body.bw-dark main + .band { margin-top: -0.28in; padding-bottom: 0.28in; } } /* -------------------------------------------------------------------------- 7. The on-screen mode control (injected by print-toggle.js). Screen only — never printed. -------------------------------------------------------------------------- */ .pmode { position: fixed; right: 16px; bottom: 16px; z-index: 9000; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: #ffffff; color: #0a0a0a; border: 1px solid #d7d7d7; box-shadow: 0 6px 22px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.12); font-family: var(--font-mono, ui-monospace, monospace); } .pmode .pmode-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.16em; color: #7a7a7a; padding: 0 4px 0 8px; user-select: none; } .pmode-btn { appearance: none; cursor: pointer; font: inherit; font-size: 11.5px; letter-spacing: -0.01em; padding: 6px 11px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: #3a3a3a; transition: background 0.15s, color 0.15s; } .pmode-btn:hover { background: #f1f1ef; color: #0a0a0a; } .pmode-btn[aria-pressed="true"] { background: #0a0a0a; color: #ffffff; } .pmode-sep { width: 1px; align-self: stretch; margin: 3px 2px; background: #e2e2e2; } .pmode-print { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font: inherit; font-size: 11.5px; padding: 6px 12px 6px 10px; border-radius: 999px; border: 1px solid #d7d7d7; background: #0a0a0a; color: #ffffff; } .pmode-print:hover { background: #262626; } .pmode-print svg { width: 13px; height: 13px; } @media (max-width: 560px) { .pmode .pmode-label { display: none; } } @media print { .pmode { display: none !important; } }