/* AppBlocks - Israeli accessibility widget (IS 5568 / WCAG 2.0 AA). Floating toggle button + panel (a11y-widget.js), plus the global overrides each preference applies to . Starts bottom-left so it never collides with the RTL app's own right-anchored chrome, but is draggable - a11y-widget.js switches it to explicit left/top (with bottom/right: auto) the moment it's dragged or a saved position is restored, which overrides the bottom/left below. --a11y-lift is written by avoidPwaBanner() - 0 normally, or the PWA install banner's own height + a gap while that banner is showing AND the button is still at its default position, so the two never overlap on mobile. */ .a11y-toggle-btn { position: fixed; left: 14px; bottom: calc(14px + var(--a11y-lift, 0px)); z-index: 2000; width: 48px; height: 48px; border-radius: 50%; border: none; /* The icon assets (a11y-icon.png / a11y-icon-lg.png) are already complete circular badges - the button itself is just their clickable/draggable hit area, not a second background circle. */ background: transparent; padding: 0; display: flex; align-items: center; justify-content: center; cursor: grab; /* Own the pointer for dragging on touch instead of letting the browser interpret it as a page-scroll gesture. */ touch-action: none; -webkit-user-select: none; user-select: none; transition: transform 0.25s ease; } .a11y-toggle-btn:active { cursor: grabbing; } .a11y-toggle-btn:hover, .a11y-toggle-btn:focus-visible { filter: brightness(1.08); } /* "Edge-Docked Accessibility Widget" - after a drag the button always magnets to whichever side is closer (a11y-widget.js's snapToNearestSide), and collapses into a small tab peeking out from that same edge once idle, expanding again on hover/touch/focus or whenever its own panel is open. */ .a11y-toggle-btn--docked-left.a11y-toggle-btn--collapsed { transform: translateX(-60%); } .a11y-toggle-btn--docked-right.a11y-toggle-btn--collapsed { transform: translateX(60%); } .a11y-toggle-icon { width: 100%; height: 100%; border-radius: 50%; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); pointer-events: none; -webkit-user-drag: none; } /* Mobile default: the simpler single-ring icon. Desktop: the bolder double-ring one, at a bigger overall button size (explicit ask). */ .a11y-toggle-icon-lg { display: none; } @media (min-width: 768px) { .a11y-toggle-btn { width: 64px; height: 64px; } .a11y-toggle-icon-sm { display: none; } .a11y-toggle-icon-lg { display: block; } } .a11y-panel { position: fixed; left: 14px; bottom: calc(70px + var(--a11y-lift, 0px)); z-index: 2000; width: 260px; max-width: calc(100vw - 28px); background: #ffffff; color: #222222; border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); padding: 12px; direction: rtl; } .a11y-panel-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; margin-bottom: 10px; } .a11y-close-btn { background: none; border: none; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; padding: 0 4px; } .a11y-font-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; } .a11y-font-btn { flex: 1; padding: 8px 0; border: 1px solid var(--border-color, #ddd); border-radius: 8px; background: #f5f5f5; cursor: pointer; font-weight: 700; } .a11y-font-pct { min-width: 44px; text-align: center; font-size: 0.85rem; } .a11y-row-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--border-color, #ddd); border-radius: 8px; background: #f5f5f5; cursor: pointer; text-align: right; font: inherit; } .a11y-row-state::after { content: 'כבוי'; font-size: 0.8rem; color: #777; } .a11y-row-btn.a11y-row-on { background: var(--cyan-accent, #4DD0E1); border-color: var(--blue-primary, #0a4f7f); } .a11y-row-btn.a11y-row-on .a11y-row-state::after { content: 'פעיל'; color: #0a4f7f; font-weight: 700; } .a11y-reset-btn { width: 100%; padding: 8px 0; margin-top: 4px; border: 1px solid var(--border-color, #ddd); border-radius: 8px; background: #fff; cursor: pointer; } .a11y-statement-link { display: block; text-align: center; margin-top: 8px; font-size: 0.8rem; } /* --- Global effects each preference applies document-wide --- */ /* True black & white (explicit ask, 2026-09-18 - the previous black- background/yellow-text override only touched html/body/buttons/ inputs, so it left the actual page - the headline, the colored solution-tile cards - either unreadable or still in full color, since those carry their own background/text colors this widget never knew about). A grayscale filter instead affects EVERY color on the page, images included, with no per-component list to maintain. Applied to body's own children rather than html/body themselves, specifically so it can exclude this widget's own button/panel - they are ALSO body's children, and position:fixed is relative to whichever ancestor has a filter/transform if one exists above it, so filtering body or html directly would make THAT the widget's containing block instead of the real viewport (the button would then scroll away with the page instead of staying put - see style.css's own overflow-x comment for a related containing-block bug this app already hit). */ html.a11y-contrast body > *:not(.a11y-toggle-btn):not(.a11y-panel) { filter: grayscale(1) contrast(1.3); } html.a11y-underline a { text-decoration: underline !important; } html.a11y-no-anim *, html.a11y-no-anim *::before, html.a11y-no-anim *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-readable, html.a11y-readable * { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.02em !important; line-height: 1.6 !important; }