@charset "UTF-8"; /* ========================================================================== AbedLesCar — ab-a11y.css ("ab-a11y") Self-hosted accessibility widget. Replaces the negishim.com overlay (74 KB of third-party JS) that used to be loaded at the end of . Serve at: asset('front/assets/css/ab-a11y.css') LOAD ORDER: after style.css, responsive.css AND mobile-boost.css. This file never edits any other stylesheet — it only adds and overrides. -------------------------------------------------------------------------- NAMING — READ THIS FIRST The markup, the JS and this file each grew their own vocabulary, and during this review the other two converged on the BEM-ish one: accessibility.blade.php renders #a11y / .a11y / .a11y__toggle / .a11y__panel / .a11y__opt / .a11y__close / .a11y__reset / .a11y__stmt ab-a11y.js queries '.a11y__toggle, .ab-a11y-fab, [data-a11y-toggle], #abA11yFab' (etc.) and stamps BOTH html.a11y- and html.ab-a11y-, plus a11y-js / ab-a11y-js / a11y-ready. So this file styles BOTH vocabularies everywhere — the shipped .a11y__* set and the .ab-a11y-* set the JS still accepts. That is deliberate duplication, not sloppiness: a CSS selector list costs nothing, and it means a future rename on either side cannot silently unstyle the widget. Every id-specificity take-back (§4, §6, §7) leads with :is(#a11y,#abA11y,.ab-a11y,.a11y) — :is() carries the weight of its most specific argument, so those rules keep their (1,x,y) ranking even when they match through the plain .a11y class. -------------------------------------------------------------------------- RULES OBSERVED 1. RTL-first. Logical properties everywhere (inset-inline-*, inset-block-*, margin-inline, padding-inline, border-*-start). env(safe-area-inset-*) is PHYSICAL, so it may never be fed to a logical property blind. The widget's OWN direction decides where inline-start is; it is pinned rtl (here and by dir="rtl" in the markup), therefore inline-start is the physical RIGHT edge and the inset we consume is safe-area-inset-RIGHT. There is exactly one escape and it flips direction AND the inset together (§1) — flipping one without the other is the trap. 2. Admin never sees this. • §5–§12 are gated on a class that only ever lands on from front-end code which itself bails on /admin/ — so they cannot reach the admin panel at all. • §4 and §14 have no such class to hang on, and `body:not(.admin)` is worthless on its own because admin layouts render a BARE . They are therefore gated on `body.has-ab` — hardcoded in layouts/app/front-app.blade.php, present with JS off, and absent from both admin layouts — with an html.*a11y-js branch as backup. 3. Zero third-party anything. No @import, no url() to a remote host, no webfont, no icon font. The only url() are inline SVG data-URIs (§12). 4. Progressive enhancement: the panel ships `hidden`, so with JS off there is no dead UI (see §2 for the visibility gate) — and the footer must keep its own plain so the legally required statement is reachable with JS disabled. 5. Nothing at the bottom of a phone screen may collide with nav#abBar. Every bottom-anchored value here is offset by var(--a11y-bar-space) — including the short-landscape panel, which previously was not. 6. No existing class or id is renamed, removed or restyled except through the explicitly-scoped effect classes in §5–§12. -------------------------------------------------------------------------- TOGGLE PLACEMENT — the justification (corrected against mobile-boost.css) • style.css:716 pins .wp-bottom (WhatsApp) at physical left:30px / bottom:30px — the INLINE-END corner on this RTL page. • mobile-boost.css §18 then does @media (max-width:991.98px){ .wp-bottom{ display:none !important } } because .ab-bar already carries a labelled וואטסאפ action. So on phones that bubble does NOT exist. An earlier draft of this file stacked the toggle at bar-space + 70px to clear a bubble that is not there, leaving the FAB floating in 70px of dead air. • the old negishim button (style.css:738, left:30px / bottom:100px) dies with the script; §14 sweeps up any cached remnant. So: anchor to the INLINE-START edge (physical RIGHT in RTL) at both breakpoints — one edge, one muscle memory, the natural reading-side corner for a Hebrew reader — and on phones take over the exact slot mobile-boost vacated: inset-inline-start calc(--ab-s4 + safe-i), inset-block-end calc(--ab-bar-space + --ab-s3). -------------------------------------------------------------------------- WHAT THE JS MUST DO (this file only styles it) • add class `a11y-js` on (ab-a11y-js / ab-js / a11y-ready are also accepted) — that is the visibility gate in §2. • toggle .a11y-contrast/.a11y-invert/.a11y-links/.a11y-readable/ .a11y-nomotion/.a11y-bigcursor and .a11y-t1|t2|t3 on (or the ab- prefixed equivalents; both are styled). • keep aria-expanded / aria-pressed / [hidden] in sync — every visual state in this file is driven off those attributes, never off a JS-only "is-open" class. • aria-pressed belongs on the six TOGGLES only. text-up / text-down are steppers, not toggles: they must carry data-a11y-level (0-4), which §3 renders as a level badge, and must NOT be given aria-pressed. • FOCUS TRAP: CSS cannot trap focus. While the panel is open the JS keeps Tab/Shift+Tab inside the panel, moves focus into it on open, and on Escape closes and returns focus to the toggle. CSS does the other half: a closed panel is [hidden] → display:none → nothing inside it is focusable or reachable (§3), and §4 gives every focus stop a real, visible ring. • aria-modal="false" is honoured: no scrim, the page stays interactive. • .a11y-nomotion cannot pause an autoplaying owl carousel or a