/* ============================================================================ נגישות - accessibility widget + accessibility modes ---------------------------------------------------------------------------- Loaded by index.html, plan.html and accessibility.html. It owns two things: 1. The floating toolbar (button + panel) that a11y.js injects into . 2. The user-selectable accessibility MODES, all driven by classes that a11y.js puts on : a11y-contrast, a11y-links, a11y-noanim, a11y-font. Keeping them here - in one file, after the page's own stylesheet - is what lets them override site.css / plan.css without touching either. This file is the LAST stylesheet on every page. Do not reorder it: the mode overrides below rely on being able to win on cascade order, which is also why they can stay mostly free of !important. ========================================================================= */ /* ---------- shared helper: text for screen readers only ---------- */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- the launcher button ---------- Sits on the side OPPOSITE the WhatsApp button (which is inset-inline-start), so the two never overlap in RTL or in LTR. 52px square on desktop and 48px on phones, both comfortably over the 44px minimum touch target. */ .a11y-fab { position: fixed; bottom: 1.6rem; inset-inline-end: 1.6rem; z-index: 90; width: 52px; height: 52px; min-width: 44px; min-height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: #1c3a8f; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); transition: transform 0.25s, background 0.25s; } .a11y-fab:hover { background: #234ab5; transform: scale(1.06); } .a11y-fab svg { display: block; width: 28px; height: 28px; } /* ---------- the panel ---------- position: fixed and sized with min(), so on a phone it becomes a nearly full-width sheet ABOVE the button rather than a box that hangs off the screen edge. max-height + overflow keeps it scrollable on short screens, which is what stops it covering the page content it is meant to help with. */ .a11y-panel { position: fixed; z-index: 91; bottom: calc(1.6rem + 62px); inset-inline-end: 1.6rem; width: min(320px, calc(100vw - 2rem)); max-height: min(70vh, 560px); overflow-y: auto; background: #14100d; color: #f5efe6; border: 1px solid rgba(201, 163, 92, 0.45); border-radius: 14px; padding: 1rem 1rem 1.1rem; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); font-family: 'Assistant', system-ui, sans-serif; font-size: 0.95rem; line-height: 1.5; } .a11y-panel[hidden] { display: none !important; } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.8rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(201, 163, 92, 0.25); } .a11y-panel-head h2 { font-family: 'Frank Ruhl Libre', Georgia, serif; font-size: 1.1rem; font-weight: 700; margin: 0; } .a11y-close { background: none; border: 1px solid rgba(201, 163, 92, 0.35); color: #f5efe6; border-radius: 8px; min-width: 44px; min-height: 44px; cursor: pointer; font-size: 1.1rem; line-height: 1; } .a11y-close:hover { border-color: #c9a35c; color: #e8cf9b; } .a11y-group { margin-bottom: 0.55rem; } .a11y-group-label { font-size: 0.8rem; color: #cbbfad; margin-bottom: 0.3rem; } .a11y-row { display: flex; align-items: center; gap: 0.5rem; } /* Every control is a real