/* The accessibility toolbar: the widget itself, and the display modes it switches on. Everything below is driven by ONE class on (or, for the text scale, one custom property), so the panel never writes a style onto an element and nothing here can leak into a page whose visitor turned none of it on. Format follows .claude/rules/static.md - one selector per line, one line per declaration block. WHICH MODES THE TOOLBAR EXEMPTS ITSELF FROM, and why it is not all of them: the grayscale filter excludes the panel, because a grey button is exactly the control somebody needs to find in order to switch grayscale off again, and the selector that exempt needs is a plain class every browser parses. The two high-contrast modes deliberately DO repaint the panel - see the note above them. */ /* =========================================================================== THE WIDGET =========================================================================== */ .eohr-a11y{position:fixed;inset-block-end:1rem;inset-inline-start:1rem;z-index:60;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;direction:rtl;} .eohr-a11y__button{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;padding:0;border:2px solid #fed72f;border-radius:9999px;background-color:#4a2c11;color:#fed72f;box-shadow:0 6px 18px #0000002e;cursor:pointer;transition:background-color .15s,transform .15s;} .eohr-a11y__button:hover{background-color:#5d3915;transform:scale(1.05);} .eohr-a11y__glyph{display:flex;} .eohr-a11y__panel{position:absolute;inset-block-end:3.75rem;inset-inline-start:0;width:19rem;max-width:calc(100vw - 2rem);max-height:min(80vh,34rem);overflow-y:auto;padding:1rem;border:1px solid #e1ba23;border-radius:1.25rem;background-color:#fffdf7;box-shadow:0 12px 34px #00000026;color:#3a2a17;text-align:right;} .eohr-a11y__panel[hidden]{display:none;} .eohr-a11y__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-block-end:.75rem;padding-block-end:.5rem;border-block-end:1px solid #eadfc4;} .eohr-a11y__title{margin:0;font-size:.9375rem;font-weight:800;color:#4a2c11;} .eohr-a11y__close{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:9999px;background-color:#f2e9d6;color:#5a4526;font-size:.8125rem;cursor:pointer;} .eohr-a11y__close:hover{background-color:#e6d8bc;} .eohr-a11y__group+.eohr-a11y__group{margin-block-start:.875rem;} .eohr-a11y__group-title{margin:0 0 .375rem;font-size:.75rem;font-weight:700;color:#6b5535;} .eohr-a11y__grid{display:grid;grid-template-columns:1fr 1fr;gap:.375rem;} .eohr-a11y__control{display:flex;align-items:center;gap:.4rem;padding:.5rem .5rem;border:1px solid #e3d7be;border-radius:.75rem;background-color:#fff;color:#43331d;font-family:inherit;font-size:.75rem;font-weight:600;line-height:1.25;text-align:start;cursor:pointer;transition:background-color .15s,border-color .15s;} .eohr-a11y__control:hover:not([disabled]){background-color:#fdf4e0;border-color:#d9c69c;} .eohr-a11y__control[disabled]{opacity:.45;cursor:not-allowed;} /* THREE signals for "this is on", not one. The filled chip is the quick read and aria-pressed is what a screen reader gets - but a chip alone would be information carried by COLOUR ALONE (1.4.1), which is the exact failure this panel exists to help with. The tick is the third signal, and it is the one that survives the high-contrast modes below: those repaint every colour in the document, so without it the panel would lose its own on/off distinction the moment somebody turned high contrast on. */ .eohr-a11y__control[aria-pressed="true"]{background-color:#4a2c11;border-color:#4a2c11;color:#fed72f;} .eohr-a11y__control[aria-pressed="true"] .eohr-a11y__label::after{content:" ✓";font-weight:900;} .eohr-a11y__icon{flex-shrink:0;width:1.25rem;text-align:center;font-size:.875rem;font-weight:800;} .eohr-a11y__foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-block-start:.875rem;padding-block-start:.625rem;border-block-start:1px solid #eadfc4;} .eohr-a11y__reset{padding:.375rem .75rem;border:1px solid #cdbb99;border-radius:.625rem;background-color:#fff;color:#5a4526;font-family:inherit;font-size:.75rem;font-weight:700;cursor:pointer;} .eohr-a11y__reset:hover{background-color:#f6eeda;} .eohr-a11y__statement{color:#8a4b0f;font-size:.75rem;font-weight:700;text-decoration:underline;text-underline-offset:2px;} .eohr-a11y__status{margin:.5rem 0 0;min-height:1rem;color:#4a2c11;font-size:.75rem;font-weight:700;} /* =========================================================================== TEXT SIZE (--eohr-a11y-scale, set by a11y.js) Scaling the root font size is what moves the whole rem-based design at once. The five arbitrary px font sizes the design also uses would stay put, so they are restated in rem HERE - only while the scale is active, so the default page keeps the exact pixel values it was measured against. =========================================================================== */ html.eohr-a11y-text{font-size:calc(100% * var(--eohr-a11y-scale,1));} html.eohr-a11y-text .text-\[7px\]{font-size:.4375rem;} html.eohr-a11y-text .text-\[9px\]{font-size:.5625rem;} html.eohr-a11y-text .text-\[10px\]{font-size:.625rem;} html.eohr-a11y-text .text-\[11px\]{font-size:.6875rem;} /* =========================================================================== TEXT SPACING - the metrics WCAG 1.4.12 names, applied on request. =========================================================================== */ html.eohr-a11y-spacing body, html.eohr-a11y-spacing body *{line-height:1.6!important;letter-spacing:.045em!important;word-spacing:.16em!important;} html.eohr-a11y-spacing body p{margin-block-end:1.5em!important;} /* =========================================================================== READABLE FONT Arial is the choice because it is present on every desktop and mobile platform this site is reached from and its Hebrew is unambiguous at small sizes - and because a webfont would be an external request, which this theme does not make. =========================================================================== */ html.eohr-a11y-readable-font body, html.eohr-a11y-readable-font body *{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif!important;font-style:normal!important;} /* =========================================================================== COLOUR MODES Two decisions worth knowing before editing this block. FIRST, background-image is cleared as well as background-color. Most of this design's dark surfaces are gradients, and a background COLOUR alone would simply sit underneath one and change nothing. SECOND, THE TOOLBAR IS NOT EXEMPTED FROM THESE TWO MODES, on purpose. The obvious way to exempt it is :not(.eohr-a11y *) - a complex selector inside :not(), which older Safari does not parse, and an unparsed selector takes the WHOLE RULE with it: high contrast would then silently do nothing at all on those browsers. Repainting the panel too costs nothing, because it stays perfectly usable in black and white and its on/off state is carried by the tick and by aria-pressed rather than by its colour. The monochrome mode below is the one that does exempt itself, and it can: the selector it needs is a plain class, which every browser has always understood. =========================================================================== */ html.eohr-a11y-contrast-dark body, html.eohr-a11y-contrast-dark body *{background-color:#000!important;background-image:none!important;color:#fff!important;border-color:#fff!important;box-shadow:none!important;text-shadow:none!important;} html.eohr-a11y-contrast-dark body a, html.eohr-a11y-contrast-dark body a *{color:#ffff00!important;} html.eohr-a11y-contrast-dark body button, html.eohr-a11y-contrast-dark body [type="submit"]{background-color:#1a1a1a!important;color:#ffff00!important;border:1px solid #ffff00!important;} html.eohr-a11y-contrast-dark body input, html.eohr-a11y-contrast-dark body select, html.eohr-a11y-contrast-dark body textarea{background-color:#000!important;color:#fff!important;border:1px solid #fff!important;} html.eohr-a11y-contrast-dark body ::placeholder{color:#cfcfcf!important;} html.eohr-a11y-contrast-light body, html.eohr-a11y-contrast-light body *{background-color:#fff!important;background-image:none!important;color:#000!important;border-color:#000!important;box-shadow:none!important;text-shadow:none!important;} html.eohr-a11y-contrast-light body a, html.eohr-a11y-contrast-light body a *{color:#0b3d91!important;} html.eohr-a11y-contrast-light body button, html.eohr-a11y-contrast-light body [type="submit"]{background-color:#f0f0f0!important;color:#0b3d91!important;border:1px solid #0b3d91!important;} html.eohr-a11y-contrast-light body input, html.eohr-a11y-contrast-light body select, html.eohr-a11y-contrast-light body textarea{background-color:#fff!important;color:#000!important;border:1px solid #000!important;} html.eohr-a11y-contrast-light body ::placeholder{color:#4a4a4a!important;} /* The two modes flatten every image to a black or white box otherwise - a photograph is content, and these rules are about text. */ html.eohr-a11y-contrast-dark body :is(img,svg,canvas,video), html.eohr-a11y-contrast-light body :is(img,svg,canvas,video){background-color:transparent!important;} /* Monochrome is a filter and not a repaint, so photographs survive as readable greyscale images rather than being flattened to a block of colour. The filter is applied to each top-level child of instead of to itself, which is what lets the toolbar stay in colour. */ html.eohr-a11y-monochrome body>*:not(.eohr-a11y){filter:grayscale(1);} /* =========================================================================== HIGHLIGHT LINKS =========================================================================== */ html.eohr-a11y-links body a{text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:2px!important;outline:1px dashed currentColor!important;outline-offset:2px!important;} /* The panel's own statement link is already underlined and does not need a dashed box drawn round it. */ html.eohr-a11y-links .eohr-a11y a{outline:0!important;} /* =========================================================================== STOP MOTION The mechanism WCAG 2.2.2 asks for. The same rules are applied to anybody whose operating system already says they prefer reduced motion, further down in this file - the difference is only who decided. =========================================================================== */ html.eohr-a11y-stop-motion *, html.eohr-a11y-stop-motion *::before, html.eohr-a11y-stop-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;} /* =========================================================================== BIG CURSOR - DRAWN AS AN ELEMENT, NOT SET WITH THE `cursor` PROPERTY. THIS IS THE THIRD IMPLEMENTATION, AND THE HISTORY IS THE JUSTIFICATION: 1. Inline SVG data-URI. WebKit PARSES `cursor: url(*.svg)` - the computed value comes back intact, which is why it survived a code review and two audit passes - and then declines to draw it, falling back silently to `auto`. Dead in Safari, which is the default browser on a Mac. 2. PNG files with two sizes through image-set(). Reported symptom: the big cursor appeared for about half a second and then reverted to the system one. 3. PNG, single size, plain url(). Same symptom: rises, then falls - on first application AND on every hover of a link. At that point the asset side was ruled out: the files are served as image/png, byte-identical to local, and decode as 48x48 RGBA. So the remaining variable was the `cursor` property itself in that browser - something that CANNOT be observed from here. Playwright does not photograph cursors, `getComputedStyle` returns the value even when the engine ignores it, and WebKit-via-Playwright is not Safari. Three rounds of hypotheses that cannot be tested is the signal to stop hypothesising. So the property is out of the picture. The cursor is now a 48px element that follows the pointer, which has no browser-support surface at all - it is a positioned background image. Costs, stated plainly: one pointermove handler (only for a visitor who turned the feature on), a frame of lag behind the OS cursor, and no drawing over native UI such as an open