/* Accessibility widget — shared by every page on this origin. * * This lived inside site.css, which only site_base.html loads. The academy at /ai/course/ is * a separate static tree with its own stylesheet, so it had no widget at all: 58 lessons and * four hub pages with no text sizing, no contrast, no invert. Same origin, same site, same * accessibility statement covering it — and none of the controls the statement describes. * * TOKENS ARE LAYERED because the two stylesheets name their colours differently. site.css * has --paper/--ink/--rule/--wash; course.css has --bg/--text/--line/--tint-1. Each property * asks for the news name, falls back to the academy name, then to a literal. Anything that * loads this file gets a widget that matches its own palette, and a page with neither set * still gets a usable one. */ .a11y-fab{ position:fixed; inset-block-end:18px; inset-inline-start:18px; z-index:60; width:48px; height:48px; border:0; border-radius:50%; cursor:pointer; background:var(--accent, #0a8093); color:#fff; display:grid; place-items:center; box-shadow:0 2px 10px rgba(0,0,0,.28); } .a11y-fab:hover{ background:var(--accent-d, var(--accent-deep, #076b7c)) } .a11y-panel{ position:fixed; inset-block-end:76px; inset-inline-start:18px; z-index:60; width:min(300px, calc(100vw - 36px)); padding:14px; background:var(--paper, var(--bg, #fff)); color:var(--ink, var(--text, #14181a)); border:1px solid var(--rule, var(--line, #e2e0dc)); border-radius:10px; box-shadow:0 6px 26px rgba(0,0,0,.22); } .a11y-panel[hidden]{ display:none } .a11y-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px } .a11y-head h2{ font-size:15px; margin:0 } .a11y-x{ background:none; border:0; font-size:22px; line-height:1; cursor:pointer; color:var(--muted, #6a7075) } .a11y-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px } .a11y-grid button, .a11y-reset{ font:inherit; font-size:13px; padding:8px 6px; cursor:pointer; background:var(--wash, var(--tint-1, #f6f6f4)); color:var(--ink, var(--text, #14181a)); border:1px solid var(--rule, var(--line, #e2e0dc)); border-radius:6px; } .a11y-grid button:hover, .a11y-reset:hover{ background:var(--band, #f2f1ee) } /* aria-pressed is the state — style from it rather than a parallel class, so the visual and the value a screen reader announces cannot disagree. */ .a11y-grid button[aria-pressed="true"]{ background:var(--accent, #0a8093); color:#fff; border-color:var(--accent, #0a8093) } .a11y-reset{ width:100%; margin-top:8px } .a11y-link{ display:block; margin-top:10px; font-size:12px; color:var(--link, #12525f) } /* ---- the preferences themselves ---- */ /* Both naming schemes are reassigned. A page only reads the names its own stylesheet uses, so the unused half costs nothing — and high contrast works on the academy, which it would not if this only knew the news site's tokens. */ .a11y-contrast{ --ink:#000; --ink2:#000; --muted:#1a1a1a; --page:#fff; --paper:#fff; --wash:#fff; --band:#f0f0f0; --rule:#000; --rule2:#333; --link:#00309e; --text:#000; --text-soft:#000; --bg:#fff; --line:#000; --line-strong:#000; --tint-1:#fff; --tint-2:#fff; --tint-3:#f0f0f0 } .a11y-contrast body{ background:#fff } .a11y-links a{ text-decoration:underline !important; text-underline-offset:2px } .a11y-links a:focus, .a11y-links a:hover{ outline:2px solid currentColor; outline-offset:1px } .a11y-readable body, .a11y-readable button, .a11y-readable input{ font-family:Arial, "Arimo", "Segoe UI", Tahoma, sans-serif !important; letter-spacing:.01em } .a11y-spacing body{ line-height:2 } .a11y-spacing p, .a11y-spacing li{ margin-block:.9em; word-spacing:.12em } /* NOT on , and not on either. A filter makes the filtered element a containing block for its fixed-position descendants. Put it on the root and .a11y-fab stops being fixed to the VIEWPORT and becomes fixed to the DOCUMENT — it scrolls away, and the reader who just inverted the page has no way to switch it back. That is a trap, and worse than the feature is worth. Filtering html also leaves the canvas background unfiltered, because body's background propagates to the canvas and paints outside the filtered element: content inverts, the page behind it stays white. So filter the page's top-level blocks and skip the widget's own two. */ .a11y-invert body > *:not(.a11y-fab):not(.a11y-panel):not(script){ filter:invert(1) hue-rotate(180deg) } .a11y-gray body > *:not(.a11y-fab):not(.a11y-panel):not(script){ filter:grayscale(1) } .a11y-invert.a11y-gray body > *:not(.a11y-fab):not(.a11y-panel):not(script){ filter:invert(1) hue-rotate(180deg) grayscale(1) } .a11y-invert body{ background:#000 } /* Photographs read as negatives otherwise. Undo the inversion for them only. */ .a11y-invert img, .a11y-invert video{ filter:invert(1) hue-rotate(180deg) } /* The academy draws its lessons as inline SVG, which the rule above does not cover — an inverted diagram is not a photograph, it is a diagram that should invert with the page, so it is deliberately left alone. The reading-progress bar is fixed like the fab is. */ @media print{ .a11y-fab, .a11y-panel{ display:none } }