/** * The accessibility toolbar, and the settings it writes. * * Every var() here carries a fallback. This sheet is shared by two host * stylesheets with different vocabularies - src/home.css defines --band, * --radius-chip and friends, src/style.css does not - and an undefined * custom property does not fall back to the property's initial value, it * makes the whole declaration invalid. That is how the panel's pill rendered * as a square on every app page while looking right on the home page: the * rules were loading fine, their values just did not exist. * * Shared by every page on the site: src/style.css imports it for the app * pages and src/home.css for the home page, so the control the header's * נגישות button opens exists everywhere rather than on one page. The panel * builds its own markup - see src/a11y.js - so no page carries it in HTML. * * Every rule here keys off a data-* attribute on , which src/a11y.js * writes and an inline script in each page's replays before first * paint. Colours come from the host stylesheet's own tokens, so the panel * wears whichever palette the page it sits on is using. */ /* Visitor-controlled, from the accessibility toolbar. Kept separate from the theme so someone can run high-contrast on the light variant too. */ /* Applied per top-level block rather than to , and never to the toolbar itself. A `filter` on an ancestor makes it the containing block for every position:fixed descendant - filtering would leave the accessibility toolbar scrolling away up the page, for exactly the reader who just turned high contrast on. Leaving the panel unfiltered also keeps the control that got you here readable while you try the other modes. */ /* This rule read [data-contrast="high"] body > * until 2026-08-26, which meant the text-size control did nothing at all unless the reader had ALSO turned contrast up - the one setting in the panel that everybody understands, inert for everybody who used it on its own. The zoom belongs to every reader; nothing here has anything to do with contrast. The width comes with the zoom rather than standing on its own, because inline-size: 100% on every top-level block of every page is not free - a floated or fixed child of body would take it too. --a11y-zoom-width is written beside --a11y-zoom, so a page at 100% is exactly the page it was before this rule existed. */ /* Chrome is excluded, not just the toolbar. The rule below is for the page's own top-level blocks - a header, a main, a footer - and forcing every child of to the full width caught the desktop's furniture too: the application menu is a 420px panel that sits above its button, and being a direct child of body it was being stretched across the whole screen. A window escaped only because its width is set inline. */ /* .visually-hidden is excluded for a different reason than the rest, and a sharper one: it is a class that exists to be 1px, and this rule was setting inline-size on top of it. The skip link at the top of every page is a direct child of body, so it took the width of its own text - 425px on a 390px phone, pushing
in by 35 and giving the page a sideways scroll. Anything whose whole job is to be invisible does not want a width from here. */ body > *:not(.a11y-panel):not(.a11y-open):not(.lx-menu):not(.lx-panel):not(.lx-win):not(.lx-snap):not(.visually-hidden) { /* The fallback IS the default size: a first-time reader has nothing in localStorage and no inline property, and this is what they get - from the first paint, without a page that jumps once the script has run. src/a11y.js writes the property for everybody who has chosen, 1 for 100% included. */ zoom: var(--a11y-zoom, 1.3); /* A zoomed block still lays out at the full width of its containing block and is scaled afterwards, so at 1.6 it renders 390px of content as 624px and the page scrolls sideways. It has to be told a width - and the width is 100%, not calc(100vw / zoom). A percentage resolves against the containing block, which a zoomed element sees in its own scaled coordinate space: 100% is viewport/zoom before scaling and exactly the viewport after it. Measured on Firefox 140 and Chromium at zoom 1.2 - both render it at precisely the viewport width. A viewport unit is the one that engines disagree about, because it is absolute to the viewport rather than to the containing block, and dividing it by hand is right in one reading and wrong in the other. Get that wrong and the division happens twice: at 120% the page renders at 1/1.2 of the screen with a band of empty canvas down the side, which is what Firefox for Android was drawing. */ inline-size: var(--a11y-zoom-width, 100%); } [data-density="compact"] { --gap-card: 10px; --col-card: 250px; --pad-panel: 18px; } [data-spacing="loose"] { line-height: 2; letter-spacing: 0.03em; word-spacing: 0.14em; } [data-underline="on"] main a { text-decoration: underline; } [data-focusring="strong"] :focus-visible { outline: 4px solid var(--focus, var(--accent, #2f5fbd)) !important; outline-offset: 3px !important; border-radius: 4px; } [data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ------------------------------------------------- accessibility toolbar */ .a11y-open { position: fixed; inset-block-end: 18px; inset-inline-start: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; block-size: 48px; padding-inline: 16px; border: 1px solid var(--border-strong, var(--border, #cbd5cf)); border-radius: var(--radius-chip, 999px); background: var(--card, #fff); color: var(--text, var(--fg, #111)); font: inherit; font-size: 14px; box-shadow: var(--shadow-lift, 0 2px 4px rgba(0,0,0,.08), 0 16px 34px rgba(0,0,0,.14)); cursor: pointer; } .a11y-panel { position: fixed; inset-block-end: 76px; inset-inline-start: 18px; z-index: 61; inline-size: min(340px, calc(100vw - 36px)); max-block-size: min(70vh, 620px); overflow-y: auto; background: var(--card, #fff); border: 1px solid var(--border-strong, var(--border, #cbd5cf)); border-radius: var(--radius-panel, var(--radius, 14px)); box-shadow: var(--shadow-lift, 0 2px 4px rgba(0,0,0,.08), 0 16px 34px rgba(0,0,0,.14)); padding: 18px; } .a11y-panel[hidden] { display: none; } .a11y-head { display: flex; align-items: center; gap: 10px; margin-block-end: 14px; } .a11y-head h2 { font-size: 16px; flex: 1; } .a11y-close { inline-size: 44px; block-size: 44px; border: 1px solid var(--border, #dfe9d8); border-radius: 10px; background: none; color: var(--text, var(--fg, #111)); cursor: pointer; flex: none; } .a11y-group + .a11y-group { margin-block-start: 15px; padding-block-start: 15px; border-block-start: 1px solid var(--border, #dfe9d8); } .a11y-group > h3 { font-size: var(--size-secondary, 12.5px); color: var(--muted, #5b6f56); font-weight: 500; margin-block-end: 8px; } .a11y-row { display: flex; align-items: center; gap: 8px; } .a11y-row button, .a11y-seg button, .a11y-toggle { min-block-size: 44px; min-inline-size: 44px; padding: 8px 14px; border: 1px solid var(--border-strong, var(--border, #cbd5cf)); border-radius: 10px; background: var(--paper, var(--bg, #fff)); color: var(--text, var(--fg, #111)); font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap; flex: none; } .a11y-row output { flex: 1; text-align: center; font-variant-numeric: tabular-nums; font-size: 14px; } .a11y-seg { display: flex; gap: 6px; flex-wrap: wrap; } .a11y-seg button[aria-pressed="true"], .a11y-toggle[aria-pressed="true"] { background: var(--band, #22303a); color: var(--band-text, #f2f7f9); border-color: var(--band, #22303a); } .a11y-toggles { display: grid; gap: 6px; } .a11y-toggle { inline-size: 100%; text-align: start; display: flex; align-items: center; gap: 8px; } .a11y-toggle .ico { font-size: 16px; } .a11y-reset { margin-block-start: 15px; inline-size: 100%; }