/*
* TrimSpot — the page-agnostic half of the accessibility settings.
*
* Linked by all five pages of the site: the React landing page and the four
* hand-written pages under site/ (privacy, terms, accessibility,
* delete-account), which never load the bundle and so would otherwise honour
* none of these settings. public/a11y-boot.js puts the classes, custom
* properties and data-a11y-align attribute on ; this file is what they
* mean. The TrimSpot-specific half — the Tailwind utility classes and the named
* motifs that only exist on the landing page — is in src/index.css.
*
* Two conventions worth knowing before editing:
*
* 1. !important is load-bearing here, not laziness. Tailwind utilities are
* single-class rules and this file is linked before the bundle, so without
* it every one of these rules would lose to a utility on the element.
*
* 2. :not([data-a11y-ui], [data-a11y-ui] *) exempts the accessibility panel
* itself from the broad text rules. The panel has to stay operable while the
* visitor is experimenting — a dialog at 2.3 line height and 0.18em tracking
* is one they cannot finish using. Font SIZE is deliberately not exempt: the
* panel grows with the setting and scrolls, because a visitor who asked for
* bigger text meant this dialog too.
*
* The :not() is only HALF of that exemption, and on its own it is worth
* nothing. All four of these properties inherit, and the panel's ancestors
* (#root, the dir="rtl" wrapper) are ordinary page elements that do get the
* declaration — so excluding the panel from the declaration just left it
* inheriting the same value from above. The other half is a positive reset on
* [data-a11y-ui] in src/index.css, which re-establishes what the panel should
* inherit; this :not() is what stops each element inside it being hit directly
* and overriding that reset. Change one, check the other.
*
* Note also what these rules do NOT say: `body`. Declaring on body reaches the
* page only by inheritance, which every Tailwind text-* utility overrides;
* `body *` reaches every element directly, which is the coverage this needs.
*
* Not fingerprinted: every reference carries ?v= and all five pages must agree.
* scripts/check-legal-pages.sh enforces that.
*/
/* ------------------------------------------------------------------ */
/* CONTENT — font size */
/* */
/* One custom property drives the whole page rather than a class per */
/* step: every rem on the site is relative to the root, so scaling the */
/* root scales type, spacing and the panel together. 100% and not a */
/* pixel value, so this multiplies the reader's own browser font-size */
/* setting instead of throwing it away. */
/* ------------------------------------------------------------------ */
html {
font-size: calc(100% * var(--a11y-font-scale, 1));
}
/* ------------------------------------------------------------------ */
/* CONTENT — line height */
/* */
/* Applied to everything rather than to body alone: line-height inherits, */
/* but Tailwind's text-* utilities each declare one, and a declared value */
/* beats an inherited one — setting it on body would have missed most of */
/* the landing page. Headings included, on purpose: a heading that wraps */
/* to three lines is exactly where the extra leading is wanted. */
/* ------------------------------------------------------------------ */
html.a11y-line body *:not([data-a11y-ui], [data-a11y-ui] *) {
line-height: var(--a11y-line-height, 1.5) !important;
}
/* ------------------------------------------------------------------ */
/* CONTENT — letter spacing */
/* ------------------------------------------------------------------ */
html.a11y-space body *:not([data-a11y-ui], [data-a11y-ui] *) {
letter-spacing: var(--a11y-letter-spacing, normal) !important;
word-spacing: calc(var(--a11y-letter-spacing, 0em) * 1.6) !important;
}
/* ------------------------------------------------------------------ */
/* CONTENT — readable font */
/* */
/* A stack of faces already on the reader's machine, not a new webfont. */
/* The site self-hosts its two typefaces precisely so that a visit makes */
/* no third-party request (see src/fonts.css); shipping a third family */
/* for this one setting would add bytes to every visit to serve a */
/* fraction of them, and the point of the setting — an unadorned, evenly */
/* weighted face with open counters, in place of the editorial serif and */
/* the gradient wordmark — is met by Arial and its equivalents. */
/* ------------------------------------------------------------------ */
html.a11y-readable body *:not([data-a11y-ui], [data-a11y-ui] *) {
font-family: Arial, 'Helvetica Neue', Helvetica, 'Segoe UI', 'Noto Sans Hebrew', system-ui,
sans-serif !important;
font-feature-settings: normal !important;
font-variant-ligatures: none !important;
}
/* ------------------------------------------------------------------ */
/* CONTENT — font weight */
/* */
/* Body copy up to 600, things that were already emphatic up to 800, so */
/* the setting adds weight without flattening the distinction between a */
/* heading and the paragraph under it. Both faces are variable (100–900), */
/* so these are real weights and not a synthesised smear. */
/* ------------------------------------------------------------------ */
/* Absolute values here, and that was a bug worth recording: at 600 and 800 */
/* they set rather than add, so anything already heavier was thinned. The h1 */
/* on the home page is 900 and became 800 — the module labelled "bold text" */
/* made the largest text on the page lighter, measurably: 4.6% less ink. */
/* The nav links went 700 to 600 the same way. */
/* */
/* The scale is now a floor, never a ceiling. Body text rises to 600, links */
/* and headings to at least their existing weight, and the heaviest headings */
/* stay at 900 so the hierarchy survives the setting instead of collapsing. */
html.a11y-weight body *:not([data-a11y-ui], [data-a11y-ui] *) {
font-weight: 600 !important;
}
html.a11y-weight body :is(a, strong, b, th, h4, h5, h6):not([data-a11y-ui] *) {
font-weight: 700 !important;
}
html.a11y-weight body :is(h1, h2, h3):not([data-a11y-ui] *) {
font-weight: 900 !important;
}
/* ------------------------------------------------------------------ */
/* CONTENT — text alignment */
/* */
/* Logical values, so "start" stays the reading edge if a page is ever */
/* served LTR. Restricted to text-bearing block elements rather than */
/* applied to everything: text-align on a flex row re-positions buttons */
/* and icons, and a visitor asking for left-aligned prose did not ask for */
/* the navigation to move. */
/* ------------------------------------------------------------------ */
html[data-a11y-align='start'] { --a11y-align: start; }
html[data-a11y-align='center'] { --a11y-align: center; }
html[data-a11y-align='end'] { --a11y-align: end; }
html[data-a11y-align]
body
:is(p, h1, h2, h3, h4, h5, h6, li, dd, dt, blockquote, figcaption, td, th, address):not(
[data-a11y-ui],
[data-a11y-ui] *
) {
text-align: var(--a11y-align) !important;
}
/* ------------------------------------------------------------------ */
/* CONTENT — big cursor */
/* */
/* Two inline SVGs, 48px, white with a black outline so the pointer is */
/* visible over both the dark page and the light-contrast one. Some */
/* platforms cap a CSS cursor at 32px and will scale these down; the */
/* `, auto` fallback covers the case where an image cursor is refused */
/* outright. Text fields keep their own I-beam — replacing that with an */
/* arrow hides where the caret will land. */
/* ------------------------------------------------------------------ */
html.a11y-cursor,
html.a11y-cursor body,
html.a11y-cursor body * {
cursor: url("data:image/svg+xml,")
4 3,
auto !important;
}
html.a11y-cursor body :is(a, button, summary, label, select, [role='button'], [role='link'], [tabindex]:not([tabindex='-1'])) {
cursor: url("data:image/svg+xml,")
18 4,
pointer !important;
}
html.a11y-cursor body :is(input:not([type='button']):not([type='submit']):not([type='checkbox']):not([type='radio']), textarea) {
cursor: auto !important;
}
/* ------------------------------------------------------------------ */
/* COLOUR — monochrome */
/* */
/* On rather than on body. A filter normally makes an element the */
/* containing block for its fixed-position descendants, which would nail */
/* the navbar and the accessibility button to the top of the document */
/* instead of the viewport — the root element is the one place the spec */
/* exempts, so this is the only selector that greys the page without */
/* breaking it. */
/* ------------------------------------------------------------------ */
html.a11y-mono {
filter: grayscale(1);
}
/* ------------------------------------------------------------------ */
/* COLOUR — focus ring per scheme */
/* */
/* The site's ring is gold (#E2C06A), which is 1.8:1 on a light page — a */
/* focus indicator nobody could find. Each scheme names its own. */
/* ------------------------------------------------------------------ */
html.a11y-light :focus-visible {
outline: 3px solid #6b5312 !important;
outline-offset: 3px;
}
html.a11y-contrast :focus-visible {
outline: 3px solid #ffd97a !important;
outline-offset: 3px;
}
/* ------------------------------------------------------------------ */
/* ORIENTATION — highlight links */
/* ------------------------------------------------------------------ */
html.a11y-underline a {
text-decoration: underline !important;
text-underline-offset: 0.2em;
text-decoration-thickness: max(1px, 0.06em);
}
/* ------------------------------------------------------------------ */
/* ORIENTATION — highlight the main content region */
/* */
/* An outline, not a border: an outline is drawn outside the box and takes */
/* no space, so nothing reflows when the setting comes on. */
/* ------------------------------------------------------------------ */
html.a11y-highlight :is(main, [role='main']) {
outline: 0.25rem dashed #e2c06a !important;
outline-offset: -0.25rem;
}
html.a11y-light.a11y-highlight :is(main, [role='main']) {
outline-color: #6b5312 !important;
}
html.a11y-contrast.a11y-highlight :is(main, [role='main']) {
outline-color: #ffd97a !important;
}
/* ------------------------------------------------------------------ */
/* ORIENTATION — hide images, keep the alt text */
/* */
/* a11y-boot.js has taken src/srcset off, so the browser is rendering the */
/* alt text as text. These rules give it somewhere to sit: the fixed */
/* dimensions and background the layout gave the picture are dropped, since */
/* a 5rem square with a white background is not a box that words fit in. */
/* */
/* An image with an empty alt is decorative and is saying, correctly, that */
/* it has nothing to tell anyone — so it goes entirely rather than leaving */
/* an empty frame for the reader to wonder about. */
/* ------------------------------------------------------------------ */
html.a11y-noimg img[alt=''],
html.a11y-noimg img:not([alt]),
html.a11y-noimg img[aria-hidden='true'] {
display: none !important;
}
html.a11y-noimg img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
min-height: 0 !important;
background: none !important;
box-shadow: none !important;
object-fit: fill !important;
padding: 0.4em 0.6em !important;
border: 1px dashed currentColor !important;
border-radius: 0.375rem !important;
color: inherit !important;
font-size: 0.875em;
font-style: normal;
text-align: start;
}
/* ------------------------------------------------------------------ */
/* ORIENTATION — stop animations */
/* */
/* The same treatment prefers-reduced-motion gets in src/index.css, by */
/* choice: a visitor ticking this is making the OS setting's request, and */
/* the accessibility statement says the two stop the same things. */
/* Durations are collapsed rather than the declarations deleted, so every */
/* state change still happens — colour, border, opacity — and only the */
/* travel goes. The named animations of the landing page are listed in */
/* src/index.css, which is where they are defined. */
/* ------------------------------------------------------------------ */
html.a11y-paused {
scroll-behavior: auto !important;
}
html.a11y-paused *,
html.a11y-paused *::before,
html.a11y-paused *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
}
/* ------------------------------------------------------------------ */
/* ORIENTATION — reading mask and reading line */
/* */
/* One fixed layer; a11y-boot.js writes --a11y-y (the line the visitor is */
/* looking at) and every box below is derived from it, so a pointer move is */
/* a single custom-property write with no layout read and no reflow. */
/* */
/* pointer-events:none throughout: the mask dims the page, it never takes */
/* a click off it. The layer sits at z-index 95 — over the navbar (50) and */
/* the page, under the skip link (100) and the accessibility button, which */
/* are the two controls a visitor reaches for to undo this. The panel */
/* itself is a modal