/* ========================================================================== סרגל נגישות — a11y.css Framework-free accessibility toolbar + user-preference layer. Pairs with a11y.js. Israeli standard IS 5568 (WCAG 2.0 AA) helper layer. NOTE: this is a *convenience layer*, not a compliance substitute. The site itself must be accessible in its own markup. Everything the user toggles is a class on : a11y-contrast-dark a11y-contrast-light a11y-invert a11y-grayscale a11y-links a11y-headings a11y-readable-font a11y-spacing a11y-no-anim a11y-big-cursor a11y-focus a11y-guide Font size is an inline font-size % on . The widget itself is #a11y-widget and always wins over the override rules below by ID specificity, so it stays legible in every mode. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Skip link (injected by a11y.js only if the page has none) -------------------------------------------------------------------------- */ .a11y-skip-link { position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 2147483646; padding: 12px 20px; background: #000; color: #fff; font: 600 16px/1.4 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; border-radius: 0 0 8px 8px; text-decoration: underline; transition: top 0.15s ease-out; } .a11y-skip-link:focus { top: 0; outline: 3px solid #ffbf47; outline-offset: 2px; } /* -------------------------------------------------------------------------- 2. Text size / spacing / readable font -------------------------------------------------------------------------- */ html.a11y-spacing body, html.a11y-spacing body :not(#a11y-widget):not(#a11y-widget *) { line-height: 1.9 !important; letter-spacing: 0.06em !important; word-spacing: 0.12em !important; } html.a11y-readable-font body, html.a11y-readable-font body :not(#a11y-widget):not(#a11y-widget *) { font-family: Arial, "Helvetica Neue", Helvetica, "Noto Sans Hebrew", sans-serif !important; font-style: normal !important; font-variant: normal !important; letter-spacing: normal; } /* -------------------------------------------------------------------------- 3. Link / heading emphasis -------------------------------------------------------------------------- */ html.a11y-links body a:not(#a11y-widget a) { text-decoration: underline !important; text-underline-offset: 3px !important; text-decoration-thickness: 2px !important; outline: 1px dashed currentColor; outline-offset: 2px; } html.a11y-headings body :is(h1, h2, h3, h4, h5, h6):not(#a11y-widget *) { background: #ffff00 !important; color: #000 !important; outline: 2px solid #000 !important; outline-offset: 2px; } html.a11y-headings body :is(h1, h2, h3, h4, h5, h6):not(#a11y-widget *) * { background: transparent !important; color: #000 !important; -webkit-text-fill-color: #000 !important; } /* -------------------------------------------------------------------------- 4. Contrast modes Broad !important overrides — deliberately blunt, this is what makes them work on arbitrary markup. #a11y-widget outranks all of it. -------------------------------------------------------------------------- */ /* 4a. High contrast — dark Only gets the surface colour. Every other element is made *transparent*, never opaque: painting #000 on `*` turns decorative overlay layers (gradients, scrims, absolutely-positioned panels) into solid blocks that sit on top of the text and hide the page. */ html.a11y-contrast-dark body { background-color: #000 !important; color: #fff !important; } html.a11y-contrast-dark body *:not(img):not(picture):not(video):not(svg):not(svg *) { background-color: transparent !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; -webkit-text-fill-color: #fff !important; } /* Photos are dimmed and desaturated so white text laid over them stays legible. */ html.a11y-contrast-dark body :is(img, picture, video) { filter: grayscale(100%) brightness(0.45) !important; } html.a11y-contrast-dark body a, html.a11y-contrast-dark body a * { color: #ffff00 !important; -webkit-text-fill-color: #ffff00 !important; text-decoration: underline !important; } html.a11y-contrast-dark body :is(button, [role="button"], input, select, textarea) { border: 2px solid #fff !important; border-radius: 4px !important; } html.a11y-contrast-dark body :is(input, textarea, select)::placeholder { color: #d0d0d0 !important; -webkit-text-fill-color: #d0d0d0 !important; } html.a11y-contrast-dark body :is(img, video, iframe, canvas) { background: transparent !important; } /* Set the colour only. Forcing `fill: currentColor` fills stroke-only icon sets (lucide, feather, heroicons outline) into solid blobs. */ html.a11y-contrast-dark body svg { color: #fff !important; } /* 4b. High contrast — light (same rule as 4a, inverted) */ html.a11y-contrast-light body { background-color: #fff !important; color: #000 !important; } html.a11y-contrast-light body *:not(img):not(picture):not(video):not(svg):not(svg *) { background-color: transparent !important; background-image: none !important; color: #000 !important; border-color: #000 !important; box-shadow: none !important; text-shadow: none !important; -webkit-text-fill-color: #000 !important; } /* Washed out rather than dimmed, so black text laid over photos stays legible. */ html.a11y-contrast-light body :is(img, picture, video) { filter: grayscale(100%) brightness(1.75) contrast(0.5) !important; } html.a11y-contrast-light body a, html.a11y-contrast-light body a * { color: #00309e !important; -webkit-text-fill-color: #00309e !important; text-decoration: underline !important; } html.a11y-contrast-light body :is(button, [role="button"], input, select, textarea) { border: 2px solid #000 !important; border-radius: 4px !important; } html.a11y-contrast-light body :is(input, textarea, select)::placeholder { color: #4a4a4a !important; -webkit-text-fill-color: #4a4a4a !important; } html.a11y-contrast-light body svg { color: #000 !important; } /* 4c. Filters. Safe on the root element: per the Filter Effects spec the root element does NOT become a containing block, so position:fixed still works. */ html.a11y-grayscale { filter: grayscale(100%); } html.a11y-invert { filter: invert(100%) hue-rotate(180deg); } html.a11y-invert.a11y-grayscale { filter: grayscale(100%) invert(100%); } /* Un-invert media so photos stay recognisable, and the widget so it stays true-colour */ html.a11y-invert :is(img, video, picture, canvas, iframe, [style*="background-image"]) { filter: invert(100%) hue-rotate(180deg); } html.a11y-invert #a11y-widget { filter: invert(100%) hue-rotate(180deg); } /* -------------------------------------------------------------------------- 5. Motion -------------------------------------------------------------------------- */ html.a11y-no-anim, html.a11y-no-anim body, html.a11y-no-anim body *, html.a11y-no-anim body *::before, html.a11y-no-anim body *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* Reveal-on-scroll patterns leave content at opacity:0 until an observer fires. With animation off, force everything visible. */ html.a11y-no-anim body [class*="reveal"], html.a11y-no-anim body [data-reveal], html.a11y-no-anim body [class*="fade"], html.a11y-no-anim body [class*="animate"] { opacity: 1 !important; transform: none !important; } html.a11y-no-anim :is(video, [autoplay]) { /* poster frame stays; autoplay is paused by a11y.js */ } /* -------------------------------------------------------------------------- 6. Big cursor -------------------------------------------------------------------------- */ html.a11y-big-cursor, html.a11y-big-cursor body, html.a11y-big-cursor body * { cursor: url("data:image/svg+xml;utf8,") 4 2, auto !important; } html.a11y-big-cursor body :is(a, button, [role="button"], label, select, summary, [onclick]), html.a11y-big-cursor body :is(a, button, [role="button"]) * { cursor: url("data:image/svg+xml;utf8,") 10 2, pointer !important; } /* -------------------------------------------------------------------------- 7. Focus highlight (always-on strong focus ring) -------------------------------------------------------------------------- */ html.a11y-focus body *:focus, html.a11y-focus body *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; border-radius: 2px; box-shadow: 0 0 0 8px rgba(255, 106, 0, 0.28) !important; } /* -------------------------------------------------------------------------- 8. Reading guide -------------------------------------------------------------------------- */ #a11y-reading-guide { position: fixed; inset-inline: 0; height: 14px; background: rgba(0, 0, 0, 0.82); border-top: 2px solid #ffff00; border-bottom: 2px solid #ffff00; pointer-events: none; z-index: 2147483640; display: none; } html.a11y-guide #a11y-reading-guide { display: block; } /* ========================================================================== 9. THE WIDGET ITSELF All sizes in px on purpose: the font-size control changes the root font size, and the panel must stay stable. ID specificity keeps it readable inside every contrast mode. ========================================================================== */ #a11y-widget { --a11y-brand: #10357a; --a11y-brand-ink: #ffffff; --a11y-bg: #ffffff; --a11y-ink: #14161c; --a11y-muted: #55606f; --a11y-line: #d2d8e2; --a11y-on: #10357a; --a11y-side: 16px; --a11y-bottom: 16px; /* Spans the viewport on purpose. In "invert colours" mode the widget gets its own `filter`, which makes it a containing block for its fixed children — with inset:0 that box IS the viewport, so nothing shifts. */ position: fixed; inset: 0; pointer-events: none; z-index: 2147483645; direction: rtl; font-family: "Heebo", "Rubik", "Noto Sans Hebrew", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 15px; line-height: 1.5; color: var(--a11y-ink); } #a11y-widget * { box-sizing: border-box; } #a11y-toggle, #a11y-panel, #a11y-backdrop { pointer-events: auto; } /* ---- trigger button ---- */ #a11y-toggle { position: fixed; bottom: var(--a11y-bottom); z-index: 2147483645; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 2px solid rgba(255, 255, 255, 0.9) !important; border-radius: 50% !important; background: var(--a11y-brand) !important; color: var(--a11y-brand-ink) !important; -webkit-text-fill-color: var(--a11y-brand-ink) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28) !important; cursor: pointer; transition: transform 0.18s ease, background-color 0.18s ease; } #a11y-widget[data-side="start"] #a11y-toggle { inset-inline-start: var(--a11y-side); } #a11y-widget[data-side="end"] #a11y-toggle { inset-inline-end: var(--a11y-side); } #a11y-toggle:hover { transform: scale(1.06); } #a11y-toggle:focus-visible { outline: 3px solid #ff6a00 !important; outline-offset: 3px !important; } #a11y-toggle svg { width: 30px; height: 30px; fill: currentColor !important; color: var(--a11y-brand-ink) !important; pointer-events: none; } /* ---- backdrop ---- */ #a11y-backdrop { position: fixed; inset: 0; background: rgba(9, 12, 20, 0.45); z-index: 2147483644; display: none; } #a11y-widget.is-open #a11y-backdrop { display: block; } /* ---- panel ---- */ #a11y-panel { position: fixed; bottom: calc(var(--a11y-bottom) + 62px); width: 340px; max-width: calc(100vw - 24px); max-height: min(76vh, 620px); overflow-y: auto; overscroll-behavior: contain; background: var(--a11y-bg) !important; color: var(--a11y-ink) !important; border: 1px solid var(--a11y-line) !important; border-radius: 16px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3) !important; z-index: 2147483645; display: none; } #a11y-widget[data-side="start"] #a11y-panel { inset-inline-start: var(--a11y-side); } #a11y-widget[data-side="end"] #a11y-panel { inset-inline-end: var(--a11y-side); } #a11y-widget.is-open #a11y-panel { display: block; } @media (max-width: 480px) { #a11y-panel { inset-inline: 8px !important; width: auto; bottom: 8px; max-height: 88vh; } } /* ---- panel header ---- */ #a11y-panel header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; background: var(--a11y-brand) !important; color: #fff !important; border-radius: 15px 15px 0 0; } #a11y-panel header h2 { margin: 0 !important; font-size: 17px !important; font-weight: 700 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; background: transparent !important; outline: none !important; } #a11y-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-radius: 8px !important; background: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 19px; line-height: 1; cursor: pointer; } #a11y-close:hover { background: rgba(255, 255, 255, 0.16) !important; } #a11y-close:focus-visible { outline: 3px solid #ffbf47 !important; outline-offset: 2px !important; } #a11y-panel .a11y-body { padding: 14px 16px 18px; background: var(--a11y-bg) !important; } #a11y-panel .a11y-group + .a11y-group { margin-top: 16px; } #a11y-panel .a11y-group > h3 { margin: 0 0 8px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.02em; color: var(--a11y-muted) !important; -webkit-text-fill-color: var(--a11y-muted) !important; background: transparent !important; outline: none !important; text-transform: none; } #a11y-panel .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* ---- option buttons ---- */ #a11y-panel .a11y-opt { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 8px 10px; text-align: start; font: inherit; font-size: 13.5px !important; font-weight: 600 !important; color: var(--a11y-ink) !important; -webkit-text-fill-color: var(--a11y-ink) !important; background: #f4f6fa !important; border: 2px solid transparent !important; border-radius: 10px !important; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } #a11y-panel .a11y-opt:hover { background: #e8edf6 !important; } #a11y-panel .a11y-opt:focus-visible { outline: 3px solid #ff6a00 !important; outline-offset: 2px !important; } #a11y-panel .a11y-opt[aria-pressed="true"] { background: var(--a11y-on) !important; border-color: var(--a11y-on) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } #a11y-panel .a11y-opt .a11y-ico { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; } #a11y-panel .a11y-opt svg { width: 20px; height: 20px; fill: currentColor !important; color: inherit !important; } #a11y-panel .a11y-opt .a11y-state { margin-inline-start: auto; font-size: 11px; font-weight: 700; opacity: 0.85; } /* ---- font size stepper ---- */ #a11y-panel .a11y-stepper { display: flex; align-items: center; gap: 8px; } #a11y-panel .a11y-stepper button { flex: 0 0 auto; width: 46px; height: 46px; font: 700 20px/1 inherit; color: var(--a11y-ink) !important; -webkit-text-fill-color: var(--a11y-ink) !important; background: #f4f6fa !important; border: 2px solid var(--a11y-line) !important; border-radius: 10px !important; cursor: pointer; } #a11y-panel .a11y-stepper button:hover:not(:disabled) { background: #e8edf6 !important; } #a11y-panel .a11y-stepper button:disabled { opacity: 0.4; cursor: not-allowed; } #a11y-panel .a11y-stepper button:focus-visible { outline: 3px solid #ff6a00 !important; outline-offset: 2px !important; } #a11y-panel .a11y-stepper output { flex: 1 1 auto; text-align: center; font-size: 14px !important; font-weight: 700 !important; color: var(--a11y-ink) !important; -webkit-text-fill-color: var(--a11y-ink) !important; } /* ---- footer links ---- */ #a11y-panel .a11y-links { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--a11y-line) !important; display: grid; gap: 6px; } #a11y-panel .a11y-links a { display: block; padding: 7px 2px; font-size: 13.5px !important; font-weight: 600 !important; color: var(--a11y-brand) !important; -webkit-text-fill-color: var(--a11y-brand) !important; text-decoration: underline !important; text-underline-offset: 3px; background: transparent !important; } #a11y-panel .a11y-links a:focus-visible { outline: 3px solid #ff6a00 !important; outline-offset: 2px !important; } #a11y-panel .a11y-note { margin: 10px 0 0 !important; font-size: 11.5px !important; line-height: 1.6 !important; color: var(--a11y-muted) !important; -webkit-text-fill-color: var(--a11y-muted) !important; background: transparent !important; } #a11y-reset { width: 100%; min-height: 44px; margin-top: 14px; font: 700 14px/1 inherit; color: #fff !important; -webkit-text-fill-color: #fff !important; background: #7a1020 !important; border: 2px solid #7a1020 !important; border-radius: 10px !important; cursor: pointer; } #a11y-reset:hover { background: #5d0c19 !important; } #a11y-reset:focus-visible { outline: 3px solid #ff6a00 !important; outline-offset: 2px !important; } /* screen-reader-only helper used inside the widget */ #a11y-widget .a11y-sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* Respect the OS setting for the widget's own motion */ @media (prefers-reduced-motion: reduce) { #a11y-toggle, #a11y-panel .a11y-opt, .a11y-skip-link { transition: none !important; } } /* Print: never print the widget */ @media print { #a11y-widget, #a11y-reading-guide { display: none !important; } }