/* ───────────────────────────────────────────────────────────────────────── Reading preferences. Loaded last on every layout, and keyed off data- attributes on that app/a11y.php writes. Nothing here applies unless somebody asked for it, so the default look is untouched. Each switch is independent and they combine: "easier to read" plus "bigger text" is a common pair and must not fight itself. ───────────────────────────────────────────────────────────────────────── */ /* ── Easier to read ────────────────────────────────────────────────────── Spacing, not a special typeface. The evidence for bespoke dyslexia fonts is thin; generous line height, word spacing and a ragged right edge are what reliably help — and they help everybody skim-reading on a phone too. */ :root[data-easy="on"]{ --label-case:none; /* the 21 uppercase labels become sentence case */ --lv-line:1.85; --lv-word:.09em; --lv-letter:.012em; } :root[data-easy="on"] body{ line-height:var(--lv-line); word-spacing:var(--lv-word); letter-spacing:var(--lv-letter); text-align:start; /* never a justified edge: it makes rivers of space */ } :root[data-easy="on"] p, :root[data-easy="on"] li, :root[data-easy="on"] dd, :root[data-easy="on"] td, :root[data-easy="on"] .lede, :root[data-easy="on"] .small, :root[data-easy="on"] .help, :root[data-easy="on"] .hint{ line-height:var(--lv-line); word-spacing:var(--lv-word); max-width:66ch; /* a line you can find your way back along */ } :root[data-easy="on"] h1, :root[data-easy="on"] h2, :root[data-easy="on"] h3{ line-height:1.35; letter-spacing:0; text-wrap:balance; } /* Tracked-out capitals are the hardest thing on the page to read. */ :root[data-easy="on"] .grp, :root[data-easy="on"] .kpi .lbl, :root[data-easy="on"] table.tbl th, :root[data-easy="on"] .pbadge, :root[data-easy="on"] .tier-lbl, :root[data-easy="on"] .price-lab{ letter-spacing:.01em; font-size:13px; } /* Underline links in running text: colour alone is not enough. */ :root[data-easy="on"] p a, :root[data-easy="on"] li a, :root[data-easy="on"] td a{ text-decoration:underline; text-underline-offset:3px } /* ── Bigger text ───────────────────────────────────────────────────────── Scaled from the root so every rem-based size moves together and nothing overlaps. Tables get room rather than squeezing their columns. */ :root[data-big="on"]{ font-size:118% } :root[data-big="on"] body{ font-size:1.06em } :root[data-big="on"] .small, :root[data-big="on"] .help, :root[data-big="on"] .hint, :root[data-big="on"] table.tbl th, :root[data-big="on"] table.tbl td{ font-size:1em } :root[data-big="on"] .inp, :root[data-big="on"] .btn, :root[data-big="on"] select, :root[data-big="on"] textarea{ font-size:1em; min-height:48px } :root[data-big="on"] .tblwrap{ overflow-x:auto } /* ── Calm ──────────────────────────────────────────────────────────────── For anyone who finds a moving, busy screen hard to work on. Movement stops, decoration quiets down, and the thing you are meant to do stays the loudest element on the page. */ :root[data-calm="on"] *, :root[data-calm="on"] *::before, :root[data-calm="on"] *::after{ animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; scroll-behavior:auto !important; } :root[data-calm="on"] .card, :root[data-calm="on"] .panel, :root[data-calm="on"] .kpi, :root[data-calm="on"] .rule{ box-shadow:none } :root[data-calm="on"] .hero, :root[data-calm="on"] .sec{ background-image:none } /* One clear focal point: the primary action keeps its colour, everything else steps back rather than competing for attention. */ :root[data-calm="on"] .btn:not(.btn-primary){ background:transparent; border-color:var(--line,#DDE3EC); color:var(--ink-2,#3E4A5C); } :root[data-calm="on"] .badge{ background:transparent; border:1px solid currentColor } :root[data-calm="on"] .wa-float{ box-shadow:none } /* ── Stronger contrast ─────────────────────────────────────────────────── For low vision, and for a phone screen in direct sunlight. */ :root[data-contrast="on"]{ --muted:#2B3442; --faint:#3A4454; --ink-2:#10161F; --line:#9AA6B8; } :root[data-contrast="on"] body{ color:#0B1118 } :root[data-contrast="on"] .small, :root[data-contrast="on"] .muted, :root[data-contrast="on"] .help, :root[data-contrast="on"] .hint{ color:#2B3442 } :root[data-contrast="on"] .inp{ border-width:2px } :root[data-contrast="on"] a{ text-decoration:underline } /* Focus must always be obvious, and more so when these are on. */ :root[data-easy="on"] :focus-visible, :root[data-big="on"] :focus-visible, :root[data-calm="on"] :focus-visible, :root[data-contrast="on"] :focus-visible{ outline:3px solid var(--blue,#1B4DB1); outline-offset:2px; } /* Somebody who has asked their whole device for less movement gets it here too, whether or not they found this page. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; } }