/* ─── Accessibility widget + helpers ─────────────────────────── */ /* Visually-hidden helper (screen-reader 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; } /* WCAG 2.4.1 skip-link: hidden until focused (Tab moves keyboard users into it from anywhere). Sits at the very top of the body so it's the first focusable element. */ .skip-link { position: absolute; inset-inline-start: -10000px; top: 8px; background: #1d4ed8; color: #fff; padding: 10px 18px; border-radius: 6px; font-weight: 600; text-decoration: none; z-index: 100000; } .skip-link:focus { inset-inline-start: 12px; outline: 3px solid #fff; outline-offset: 2px; } /* Force keyboard-visible focus on every interactive element */ :focus-visible { outline: 3px solid #f97316 !important; outline-offset: 2px; } /* ── A11y FAB (floating accessibility button) ─────────────── */ .a11y-fab { position: fixed; /* Anchored to the start side (bottom-left in EN, bottom-right in HE), stacked ABOVE the chat fab so neither obscures the other. */ bottom: 88px; inset-inline-start: 18px; width: 52px; height: 52px; border-radius: 50%; background: #1d4ed8; color: #fff; border: 2px solid #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.18); z-index: 9997; display: flex; align-items: center; justify-content: center; transition: transform 0.15s; } .a11y-fab:hover { transform: scale(1.05); } .a11y-fab svg { width: 26px; height: 26px; } /* ── A11y panel ───────────────────────────────────────────── */ .a11y-panel { position: fixed; bottom: 152px; /* above the a11y fab (which sits at bottom:88px, 52px tall) */ inset-inline-start: 18px; width: 320px; max-width: min(320px, calc(100% - 36px)); background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); z-index: 9997; display: none; /* direction inherited from — flips with the active language */ overflow: hidden; } .a11y-panel.open { display: block; } .a11y-head { background: #1d4ed8; color: #fff; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; } .a11y-head h4 { margin: 0; font-size: 15px; } .a11y-close { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1; } .a11y-body { padding: 14px; max-height: 60vh; overflow: auto; } .a11y-body h5 { margin: 14px 0 6px; font-size: 11px; color: #6b7280; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .a11y-body h5:first-child { margin-top: 0; } .a11y-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; } .a11y-btn { flex: 1; min-width: 90px; padding: 10px 12px; background: #f3f4f6; color: #111827; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: 0.15s; } .a11y-btn:hover { border-color: #1d4ed8; } .a11y-btn.active { background: #1d4ed8; color: #fff; border-color: #1d4ed8; } .a11y-reset { width: 100%; padding: 10px; background: #fff; color: #dc2626; border: 1px solid #fecaca; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 12px; font-family: inherit; } .a11y-reset:hover { background: #fef2f2; } .a11y-foot { padding: 10px 14px; border-top: 1px solid #e5e7eb; background: #f9fafb; font-size: 11px; color: #6b7280; line-height: 1.55; } .a11y-foot a { color: #1d4ed8; font-weight: 600; } /* ── Effects applied via classes on ──────────────── */ /* Font size scale (1.0 = default, multiplied) */ html.a11y-font-large { font-size: 112%; } html.a11y-font-xlarge { font-size: 124%; } html.a11y-font-xxlarge { font-size: 138%; } /* High contrast — black on white, no decorative gradients */ html.a11y-contrast, html.a11y-contrast body { background: #fff !important; color: #000 !important; } html.a11y-contrast * { background-image: none !important; text-shadow: none !important; box-shadow: none !important; } html.a11y-contrast a, html.a11y-contrast button { color: #000 !important; background: #fff !important; border: 2px solid #000 !important; text-decoration: underline !important; } html.a11y-contrast .btn-primary, html.a11y-contrast button[type="submit"] { background: #000 !important; color: #fff !important; } /* Highlight all links — bold + underlined + outline */ html.a11y-links a { text-decoration: underline !important; font-weight: 700 !important; outline: 2px solid #fde68a; outline-offset: 1px; background: #fffbeb !important; } /* Reduce motion — kill animations everywhere */ html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; } /* Larger cursor */ html.a11y-big-cursor, html.a11y-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='36' height='36'%3E%3Cpath d='M2 2 L2 28 L10 22 L14 32 L20 30 L16 20 L26 20 Z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 2 2, auto !important; } /* Note: we DELIBERATELY do NOT honour OS-level prefers-reduced-motion: reduce here. The OS preference is a global user setting that often gets stuck on by default on Mac and Windows, silently breaking decorative animations (hero auto-rotate, sale-banner confetti, welcome popup delay, dot-progress bar) for customers who didn't actually opt in. Industry standard for commercial e-commerce is to honour the per-site toggle ONLY (html.a11y-reduce-motion above), which the user explicitly clicks in our a11y widget. WCAG 2.3 compliance is satisfied via that toggle. */