/* ============================================================ Ariel Malka Engineers — Accessibility layer (ת"י 5568 / WCAG 2.0 AA) ------------------------------------------------------------ Two independent halves: 1. THE WIDGET — everything under `.a11y-ui`. It is always a DIRECT CHILD OF , which is what keeps it out of reach of the page-wide overrides below (they all start `body > *:not(.a11y-ui)`). That structural exclusion is deliberate: the control panel must stay legible and operable no matter which display mode the user turned on. 2. THE MODES — `html[data-a11y-*]` attributes written by js/a11y.js (and by the inline boot snippet in each page's , so a stored preference is painted on the first frame, never as a flash). Contrast modes repaint through the design-system tokens rather than a CSS `filter`, because a filter on or turns them into the containing block for `position: fixed` — which would unstick the header, the mobile nav and this widget itself. ============================================================ */ /* ============================================================ 1. WIDGET — palette ============================================================ */ .a11y-ui { --w-bg: #ffffff; --w-bg-2: #eef3fa; --w-fg: #101c2e; --w-fg-dim: #46566f; --w-line: #c3d1e4; --w-accent: #1d5ca3; --w-accent-fg: #ffffff; --w-on: #0d4a2f; --w-on-bg: #cdf2dd; --w-focus: #ff6a00; --w-shadow: 0 26px 60px -18px rgba(9, 22, 41, 0.45); font-family: "Assistant", Arial, "Arial Hebrew", sans-serif; /* follows the page text-size setting, but bounded so the panel can never outgrow its own fixed-width box */ font-size: clamp(15px, 1rem, 18px); line-height: 1.5; direction: rtl; } /* the panel tracks the display mode the user chose — a light-sensitive user who turned on dark contrast should not get a white panel back */ html[data-a11y-contrast="dark"] .a11y-ui { --w-bg: #000000; --w-bg-2: #101010; --w-fg: #ffffff; --w-fg-dim: #ffffff; --w-line: #ffffff; --w-accent: #ffff00; --w-accent-fg: #000000; --w-on: #000000; --w-on-bg: #ffff00; --w-focus: #ffff00; --w-shadow: 0 0 0 2px #ffffff; } html[data-a11y-contrast="light"] .a11y-ui { --w-bg: #ffffff; --w-bg-2: #ffffff; --w-fg: #000000; --w-fg-dim: #000000; --w-line: #000000; --w-accent: #00309e; --w-accent-fg: #ffffff; --w-on: #ffffff; --w-on-bg: #00309e; --w-focus: #000000; --w-shadow: 0 0 0 2px #000000; } html[data-a11y-contrast="mono"] .a11y-ui { --w-bg-2: #e8e8e8; --w-line: #8a8a8a; --w-accent: #2e2e2e; --w-on: #ffffff; --w-on-bg: #2e2e2e; --w-focus: #000000; } /* ============================================================ 1a. WIDGET — the floating button ============================================================ */ .a11y-fab { position: fixed; z-index: 100000; /* physical left, not inset-inline-start: the site is RTL but the user asked for the button on the left edge of the screen */ left: var(--a11y-fab-left, 18px); top: var(--a11y-fab-top, 50%); translate: 0 var(--a11y-fab-shift, -50%); display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 3px solid #ffffff; border-radius: 50%; background: #1d5ca3; color: #ffffff; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; box-shadow: 0 0 0 2px rgba(11, 26, 48, 0.5), 0 12px 30px -8px rgba(9, 22, 41, 0.6); transition: transform 0.18s cubic-bezier(0.33, 1, 0.68, 1), background-color 0.18s ease; } .a11y-fab:hover { background: #174b86; transform: scale(1.07); } .a11y-fab:active { transform: scale(0.96); } .a11y-fab svg { width: 34px; height: 34px; display: block; pointer-events: none; } /* --- supplied-artwork variant --------------------------------------------- The project icon is a complete tile: its own brown ground, its own rounded frame. Cropping that into a circle would clip the corners off the frame and fight the button's own fill, so the button takes the artwork's shape and lets it run edge to edge. The white keyline stays — it is what separates a mid-brown tile from the navy hero behind it. */ .a11y-fab.has-art { border-radius: 16px; background: #ffffff; padding: 0; overflow: hidden; } .a11y-fab.has-art:hover { background: #ffffff; } .a11y-fab.has-art img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; } /* while being dragged */ .a11y-fab.is-dragging { transition: none; cursor: grabbing; transform: scale(1.12); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 18px 40px -10px rgba(9, 22, 41, 0.7); } /* long-press feedback: a ring fills before drag mode engages */ .a11y-fab::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 3px solid #f2ac5c; opacity: 0; scale: 0.75; pointer-events: none; transition: opacity 0.15s ease, scale 0.15s ease; } .a11y-fab.has-art::after { border-radius: 22px; } .a11y-fab.is-arming::after, .a11y-fab.is-dragging::after { opacity: 1; scale: 1; } html[data-a11y-contrast="dark"] .a11y-fab { background: #000000; border-color: #ffff00; color: #ffff00; box-shadow: 0 0 0 2px #ffffff; } html[data-a11y-contrast="light"] .a11y-fab { background: #ffffff; border-color: #000000; color: #000000; box-shadow: 0 0 0 2px #000000; } /* ============================================================ 1b. WIDGET — the panel ============================================================ */ .a11y-panel { position: fixed; z-index: 100001; left: 18px; top: 50%; translate: 0 -50%; width: min(380px, calc(100vw - 36px)); max-height: min(88vh, 760px); display: none; flex-direction: column; background: var(--w-bg); color: var(--w-fg); border: 1px solid var(--w-line); border-radius: 16px; box-shadow: var(--w-shadow); overflow: hidden; } .a11y-panel[data-open="true"] { display: flex; } /* anchored beside the button once it has been dragged somewhere */ .a11y-panel[data-anchored="true"] { top: var(--a11y-panel-top, 50%); translate: 0 var(--a11y-panel-shift, -50%); left: var(--a11y-panel-left, 18px); } .a11y-panel-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--w-accent); color: var(--w-accent-fg); border-bottom: 1px solid var(--w-line); } .a11y-panel-head h2 { margin: 0; font-family: inherit; font-size: 1.125em; font-weight: 700; line-height: 1.3; color: inherit; flex: 1 1 auto; } .a11y-panel-head .a11y-icon { width: 26px; height: 26px; flex: none; } .a11y-close { flex: none; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 2px solid currentColor; border-radius: 9px; background: transparent; color: inherit; font-size: 1.1em; line-height: 1; cursor: pointer; } .a11y-close:hover { background: rgba(255, 255, 255, 0.18); } .a11y-panel-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 6px 14px 14px; } .a11y-group { margin-top: 14px; } .a11y-group > h3 { margin: 0 0 8px; font-family: inherit; font-size: 0.8125em; font-weight: 700; letter-spacing: 0.04em; color: var(--w-fg-dim); text-transform: none; } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a11y-grid.one { grid-template-columns: 1fr; } /* a control: toggle button or stepper */ .a11y-item { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 56px; padding: 9px 11px; border: 2px solid var(--w-line); border-radius: 11px; background: var(--w-bg-2); color: var(--w-fg); font: inherit; font-size: 0.9375em; font-weight: 600; text-align: start; line-height: 1.25; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .a11y-item:hover { border-color: var(--w-accent); background: var(--w-bg); } .a11y-item .a11y-icon { flex: none; width: 22px; height: 22px; } .a11y-item .a11y-label { flex: 1 1 auto; min-width: 0; } .a11y-item .a11y-state { flex: none; font-size: 0.75em; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--w-line); color: var(--w-bg); } .a11y-item[aria-pressed="true"], .a11y-item[data-active="true"] { background: var(--w-on-bg); color: var(--w-on); border-color: currentColor; } .a11y-item[aria-pressed="true"] .a11y-state, .a11y-item[data-active="true"] .a11y-state { background: currentColor; color: var(--w-on-bg); } /* stepper rows (text size, spacing, cursor size) */ .a11y-stepper { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 2px solid var(--w-line); border-radius: 11px; background: var(--w-bg-2); } .a11y-stepper .a11y-stepper-label { flex: 1 1 auto; min-width: 0; font-size: 0.9375em; font-weight: 600; } .a11y-stepper .a11y-stepper-label small { display: block; font-size: 0.75em; font-weight: 400; color: var(--w-fg-dim); } .a11y-step-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 2px solid var(--w-accent); border-radius: 9px; background: var(--w-accent); color: var(--w-accent-fg); font: inherit; font-size: 1.375em; font-weight: 700; line-height: 1; cursor: pointer; } .a11y-step-btn:hover { filter: brightness(1.15); } .a11y-step-btn[disabled] { opacity: 0.4; cursor: not-allowed; } .a11y-panel-foot { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--w-line); background: var(--w-bg-2); } .a11y-foot-btn { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 8px 10px; border: 2px solid var(--w-accent); border-radius: 10px; background: transparent; color: var(--w-fg); font: inherit; font-size: 0.875em; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; } .a11y-foot-btn:hover { background: var(--w-accent); color: var(--w-accent-fg); } .a11y-foot-btn.wide { grid-column: 1 / -1; } .a11y-foot-btn .a11y-icon { width: 18px; height: 18px; flex: none; } .a11y-hint { margin: 10px 0 0; font-size: 0.75em; line-height: 1.55; color: var(--w-fg-dim); } .a11y-hint kbd { font-family: inherit; font-size: 0.72em; font-weight: 700; padding: 1px 5px; border: 1px solid var(--w-line); border-radius: 4px; background: var(--w-bg); color: var(--w-fg); } /* focus ring inside the widget — always visible, never suppressed */ .a11y-ui :is(button, a, [tabindex]):focus-visible { outline: 3px solid var(--w-focus); outline-offset: 2px; border-radius: 10px; } /* mobile: bottom sheet */ @media (max-width: 620px) { .a11y-panel, .a11y-panel[data-anchored="true"] { left: 0; right: 0; top: auto; bottom: 0; translate: none; width: 100%; max-height: 82vh; border-radius: 18px 18px 0 0; border-width: 1px 0 0; } .a11y-fab { width: 46px; height: 46px; } .a11y-fab svg, .a11y-fab img { width: 31px; height: 31px; } } /* scrim — only when the sheet covers the page */ .a11y-scrim { position: fixed; inset: 0; z-index: 100000; display: none; background: rgba(6, 14, 26, 0.55); } @media (max-width: 620px) { .a11y-scrim[data-open="true"] { display: block; } } /* screen-reader-only text used across the widget */ .a11y-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } @media print { .a11y-ui { display: none !important; } } /* ============================================================ 2a. MODE — text size All 40 font-size declarations in style.css are rem-based, so scaling the root scales the whole document. The four clamp()ed sizes carry a vw term that would pin them at desktop widths, so they are restated here multiplied by --a11y-fs. ============================================================ */ :root { --a11y-fs: 1; } html[data-a11y-fontsize="110"] { font-size: 110%; --a11y-fs: 1.1; } html[data-a11y-fontsize="125"] { font-size: 125%; --a11y-fs: 1.25; } html[data-a11y-fontsize="140"] { font-size: 140%; --a11y-fs: 1.4; } html[data-a11y-fontsize="160"] { font-size: 160%; --a11y-fs: 1.6; } html[data-a11y-fontsize="90"] { font-size: 90%; --a11y-fs: 0.9; } /* scoped away from the widget: a bare `h2` selector here would also match the panel's own heading and blow the control panel's header apart */ html[data-a11y-fontsize] body > *:not(.a11y-ui) h1 { font-size: clamp(2.1rem, calc(5.2vw * var(--a11y-fs)), calc(3.7rem * var(--a11y-fs))); } html[data-a11y-fontsize] body > *:not(.a11y-ui) h2 { font-size: clamp(1.55rem, calc(3vw * var(--a11y-fs)), calc(2.3rem * var(--a11y-fs))); } html[data-a11y-fontsize] .hero .subtitle { font-size: clamp(1.05rem, calc(1.7vw * var(--a11y-fs)), calc(1.25rem * var(--a11y-fs))); } html[data-a11y-fontsize] .stat-number { font-size: clamp(1.7rem, calc(3vw * var(--a11y-fs)), calc(2.4rem * var(--a11y-fs))); } /* The desktop nav is a single nowrap flex row; past ~125% it would run off the header. Force the hamburger layout instead — the same one the 760px breakpoint uses — and grow the header offset to match. */ html[data-a11y-fontsize="125"], html[data-a11y-fontsize="140"], html[data-a11y-fontsize="160"] { --header-h: 84px; } html[data-a11y-fontsize="160"] { --header-h: 92px; } html:is( [data-a11y-fontsize="125"], [data-a11y-fontsize="140"], [data-a11y-fontsize="160"] ) .nav-toggle { display: inline-flex; } html:is( [data-a11y-fontsize="125"], [data-a11y-fontsize="140"], [data-a11y-fontsize="160"] ) .main-nav { /* absolute, not fixed — see the note at the 760px breakpoint in style.css: the header's backdrop-filter is the containing block for fixed children */ position: absolute; top: 100%; inset-inline: 0; height: calc(100vh - 100%); height: calc(100dvh - 100%); background: var(--ink); padding: 18px 24px 40px; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; } html:is( [data-a11y-fontsize="125"], [data-a11y-fontsize="140"], [data-a11y-fontsize="160"] ) .main-nav.open { opacity: 1; visibility: visible; transform: none; } html:is( [data-a11y-fontsize="125"], [data-a11y-fontsize="140"], [data-a11y-fontsize="160"] ) .main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; } html:is( [data-a11y-fontsize="125"], [data-a11y-fontsize="140"], [data-a11y-fontsize="160"] ) :is(.main-nav a, .has-dropdown > button) { width: 100%; padding: 14px 12px; justify-content: flex-start; white-space: normal; } html:is( [data-a11y-fontsize="125"], [data-a11y-fontsize="140"], [data-a11y-fontsize="160"] ) .has-dropdown > button { justify-content: space-between; } html:is( [data-a11y-fontsize="125"], [data-a11y-fontsize="140"], [data-a11y-fontsize="160"] ) .dropdown { position: static; max-width: none; opacity: 1; visibility: hidden; transform: none; box-shadow: none; border: 0; border-inline-start: 2px solid var(--line-dark); border-radius: 0; margin-inline-start: 14px; padding: 0 0 0 4px; display: none; } html:is( [data-a11y-fontsize="125"], [data-a11y-fontsize="140"], [data-a11y-fontsize="160"] ) .has-dropdown[data-open="true"] .dropdown { display: block; visibility: visible; } html:is( [data-a11y-fontsize="125"], [data-a11y-fontsize="140"], [data-a11y-fontsize="160"] ) .main-nav .nav-cta { margin: 14px 0 0; justify-content: center; } /* enlarged text needs room to wrap instead of clipping */ html[data-a11y-fontsize] :is(.btn, .eyebrow, .hero-cred span, .filter-btn) { white-space: normal; height: auto; } /* ============================================================ 2b. MODE — text spacing (WCAG 1.4.12 Text Spacing) ============================================================ */ html[data-a11y-spacing="1"] body > *:not(.a11y-ui) :is(p, li, dd, dt, blockquote, address, span, a, td, th, label, figcaption) { line-height: 1.6 !important; letter-spacing: 0.06em !important; word-spacing: 0.1em !important; } html[data-a11y-spacing="2"] body > *:not(.a11y-ui) :is(p, li, dd, dt, blockquote, address, span, a, td, th, label, figcaption) { line-height: 2 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } html[data-a11y-spacing="2"] body > *:not(.a11y-ui) p { margin-bottom: 2em !important; } html[data-a11y-spacing] body > *:not(.a11y-ui) :is(h1, h2, h3, h4) { line-height: 1.35 !important; } /* ============================================================ 2c. MODE — fonts ============================================================ */ html[data-a11y-font="readable"] body > *:not(.a11y-ui), html[data-a11y-font="readable"] body > *:not(.a11y-ui) * { font-family: Arial, "Arial Hebrew", "Assistant", Helvetica, sans-serif !important; font-style: normal !important; letter-spacing: normal !important; } /* Tahoma / Verdana are the system faces usually recommended for dyslexic readers — wide apertures, distinct letterforms — and Tahoma is one of the few with a full Hebrew set. Paired with looser tracking and heavier weight. */ html[data-a11y-font="dyslexic"] body > *:not(.a11y-ui), html[data-a11y-font="dyslexic"] body > *:not(.a11y-ui) * { font-family: Tahoma, Verdana, Arial, "Arial Hebrew", sans-serif !important; font-style: normal !important; letter-spacing: 0.06em !important; word-spacing: 0.12em !important; line-height: 1.75 !important; font-weight: 500; } html[data-a11y-font] body > *:not(.a11y-ui) :is(h1, h2, h3, h4) { line-height: 1.3 !important; } /* ============================================================ 2d. MODE — contrast / colour Written through the tokens first (so gradients, shadows and rgba() values that reference them follow), then a low-specificity sweep with !important for the hard-coded values style.css sets directly. `body > *:not(.a11y-ui)` never matches the widget, so its own rules are untouched by all of this. ============================================================ */ /* --- high contrast, dark --- */ html[data-a11y-contrast="dark"] { --ink: #000000; --navy: #000000; --navy-2: #000000; --paper: #000000; --card: #000000; --azure: #ffff00; --azure-deep: #ffff00; --copper: #ffff00; --copper-hi: #ffff00; --copper-deep: #ffff00; --ink-text: #ffffff; --muted: #ffffff; --on-dark: #ffffff; --on-dark-dim: #ffffff; --line: #ffffff; --line-dark: #ffffff; --shadow: none; --shadow-lift: none; background: #000000; } html[data-a11y-contrast="dark"] body { background: #000000 !important; color: #ffffff !important; } html[data-a11y-contrast="dark"] body > *:not(.a11y-ui), html[data-a11y-contrast="dark"] body > *:not(.a11y-ui) *, html[data-a11y-contrast="dark"] body > *:not(.a11y-ui) *::before, html[data-a11y-contrast="dark"] body > *:not(.a11y-ui) *::after { background-color: transparent !important; background-image: none !important; color: #ffffff !important; border-color: #ffffff !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; opacity: 1 !important; } html[data-a11y-contrast="dark"] body > *:not(.a11y-ui) :is(a, a *, .arrow-link, .more-link a) { color: #ffff00 !important; } html[data-a11y-contrast="dark"] body > *:not(.a11y-ui) :is(header, .site-header, .site-footer, .hero, .cta-band, .dropdown, .main-nav, .section, .card, .lightbox) { background-color: #000000 !important; } html[data-a11y-contrast="dark"] body > *:not(.a11y-ui) :is(.btn, button, input, select, textarea, .nav-cta, .filter-btn) { background-color: #000000 !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; } html[data-a11y-contrast="dark"] body > *:not(.a11y-ui) :is(.btn:hover, button:hover, .nav-cta:hover) { background-color: #ffff00 !important; color: #000000 !important; } /* keep photographs recognisable but stop them washing out the contrast */ html[data-a11y-contrast="dark"] body > *:not(.a11y-ui) :is(img, video) { filter: grayscale(0.35) contrast(1.15) !important; border: 1px solid #ffffff !important; background: #000000 !important; } /* the logo artwork is drawn for a white plate — keep the plate */ html[data-a11y-contrast="dark"] body > *:not(.a11y-ui) .logo-full-tile { background: #ffffff !important; border: 2px solid #ffff00 !important; } html[data-a11y-contrast="dark"] body > *:not(.a11y-ui) .logo-full-tile img { filter: none !important; border: 0 !important; background: transparent !important; } /* decorative SVG line-art (schematics, icons) must not vanish into black */ html[data-a11y-contrast="dark"] body > *:not(.a11y-ui) svg :is(path, line, circle, rect, polyline, polygon, ellipse) { stroke: currentColor !important; } html[data-a11y-contrast="dark"] body > *:not(.a11y-ui) svg [fill]:not([fill="none"]) { fill: currentColor !important; } html[data-a11y-contrast="dark"] #fx-layer, html[data-a11y-contrast="dark"] .hero-glow, html[data-a11y-contrast="dark"] .hero::before { display: none !important; } /* --- high contrast, light --- */ html[data-a11y-contrast="light"] { --ink: #ffffff; --navy: #ffffff; --navy-2: #ffffff; --paper: #ffffff; --card: #ffffff; --azure: #00309e; --azure-deep: #00309e; --copper: #00309e; --copper-hi: #00309e; --copper-deep: #00309e; --ink-text: #000000; --muted: #000000; --on-dark: #000000; --on-dark-dim: #000000; --line: #000000; --line-dark: #000000; --shadow: none; --shadow-lift: none; background: #ffffff; } html[data-a11y-contrast="light"] body { background: #ffffff !important; color: #000000 !important; } html[data-a11y-contrast="light"] body > *:not(.a11y-ui), html[data-a11y-contrast="light"] body > *:not(.a11y-ui) *, html[data-a11y-contrast="light"] body > *:not(.a11y-ui) *::before, html[data-a11y-contrast="light"] body > *:not(.a11y-ui) *::after { background-color: transparent !important; background-image: none !important; color: #000000 !important; border-color: #000000 !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; opacity: 1 !important; } html[data-a11y-contrast="light"] body > *:not(.a11y-ui) :is(a, a *, .arrow-link, .more-link a) { color: #00309e !important; } html[data-a11y-contrast="light"] body > *:not(.a11y-ui) :is(header, .site-header, .site-footer, .hero, .cta-band, .dropdown, .main-nav, .section, .card, .lightbox) { background-color: #ffffff !important; } html[data-a11y-contrast="light"] body > *:not(.a11y-ui) :is(.btn, button, input, select, textarea, .nav-cta, .filter-btn) { background-color: #ffffff !important; color: #00309e !important; border: 2px solid #00309e !important; } html[data-a11y-contrast="light"] body > *:not(.a11y-ui) :is(.btn:hover, button:hover, .nav-cta:hover) { background-color: #00309e !important; color: #ffffff !important; } html[data-a11y-contrast="light"] body > *:not(.a11y-ui) :is(img, video) { filter: contrast(1.1) !important; border: 1px solid #000000 !important; } html[data-a11y-contrast="light"] body > *:not(.a11y-ui) svg :is(path, line, circle, rect, polyline, polygon, ellipse) { stroke: currentColor !important; } html[data-a11y-contrast="light"] body > *:not(.a11y-ui) svg [fill]:not([fill="none"]) { fill: currentColor !important; } html[data-a11y-contrast="light"] #fx-layer, html[data-a11y-contrast="light"] .hero-glow, html[data-a11y-contrast="light"] .hero::before { display: none !important; } /* --- monochrome (גווני אפור) --- Tokens are desaturated so text keeps its contrast ratio, and the filter is confined to media — never to an element that could become a containing block for a fixed-position descendant. */ html[data-a11y-contrast="mono"] { --ink: #0e0e0e; --navy: #1c1c1c; --navy-2: #2b2b2b; --paper: #f2f2f2; --card: #ffffff; --azure: #4a4a4a; --azure-deep: #2e2e2e; --copper: #6b6b6b; --copper-hi: #8e8e8e; --copper-deep: #333333; --ink-text: #141414; --muted: #4a4a4a; --on-dark: #f2f2f2; --on-dark-dim: #c9c9c9; --line: #cfcfcf; --line-dark: rgba(255, 255, 255, 0.22); } html[data-a11y-contrast="mono"] body > *:not(.a11y-ui) :is(img, video, canvas, svg) { filter: grayscale(1) !important; } html[data-a11y-contrast="mono"] #fx-layer { filter: grayscale(1) !important; } /* --- reduced saturation (רוויה מופחתת) --- */ html[data-a11y-contrast="soft"] { --azure: #5f83a6; --azure-deep: #3f5f7d; --copper: #a8907a; --copper-hi: #bda893; --copper-deep: #6b5945; } html[data-a11y-contrast="soft"] body > *:not(.a11y-ui) :is(img, video, canvas, svg) { filter: saturate(0.35) !important; } html[data-a11y-contrast="soft"] #fx-layer { filter: saturate(0.3) !important; } /* ============================================================ 2e. MODE — highlight links / headings ============================================================ */ html[data-a11y-links="1"] body > *:not(.a11y-ui) a, html[data-a11y-links="1"] body > *:not(.a11y-ui) a * { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; font-weight: 700 !important; } html[data-a11y-links="1"] body > *:not(.a11y-ui) a { outline: 2px dashed currentColor !important; outline-offset: 2px !important; border-radius: 3px; } /* a link that is only an image gets a visible frame instead of an underline */ html[data-a11y-links="1"] body > *:not(.a11y-ui) a:has(> img:only-child) { outline-style: solid !important; outline-width: 3px !important; } html[data-a11y-headings="1"] body > *:not(.a11y-ui) :is(h1, h2, h3, h4, h5, h6) { outline: 2px solid currentColor !important; outline-offset: 4px !important; border-radius: 3px; } html[data-a11y-headings="1"] body > *:not(.a11y-ui) :is(h1, h2, h3, h4, h5, h6)::before { content: attr(data-a11y-level) " "; font-family: "Miriam Libre", monospace; font-size: 0.62em; font-weight: 700; opacity: 0.75; margin-inline-end: 0.4em; vertical-align: middle; } /* ============================================================ 2f. MODE — keyboard focus emphasis ============================================================ */ html[data-a11y-keyboard="1"] body > *:not(.a11y-ui) :is(a, button, input, select, textarea, summary, [tabindex]):focus { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 3px #000000, 0 0 0 9px #ffdd00 !important; border-radius: 4px; scroll-margin-block: calc(var(--header-h, 76px) + 24px); } /* without the mode on, still guarantee a visible ring — style.css only styles :focus-visible, which mouse users never see but which some assistive tech drives differently */ html[data-a11y-keyboard="1"] body > *:not(.a11y-ui) *:focus { outline-style: solid !important; } /* ============================================================ 2g. MODE — stop animations Mirrors the prefers-reduced-motion block in style.css so the toggle and the OS setting produce exactly the same page. ============================================================ */ html[data-a11y-motion="off"] { scroll-behavior: auto !important; } html[data-a11y-motion="off"] body > *:not(.a11y-ui), html[data-a11y-motion="off"] body > *:not(.a11y-ui) *, html[data-a11y-motion="off"] body > *:not(.a11y-ui) *::before, html[data-a11y-motion="off"] body > *:not(.a11y-ui) *::after { animation: none !important; transition: none !important; } html[data-a11y-motion="off"] .reveal { opacity: 1 !important; transform: none !important; } html[data-a11y-motion="off"] .reveal .wire, html[data-a11y-motion="off"] .stats-bus::before { transform: scaleX(1) !important; } html[data-a11y-motion="off"] .reveal .wire::before { opacity: 1 !important; } html[data-a11y-motion="off"] .trace { stroke-dashoffset: 0 !important; } html[data-a11y-motion="off"] :is(.sym, .node) { opacity: 1 !important; } html[data-a11y-motion="off"] :is(.spark, #fx-layer, .hero-glow, .scroll-conductor) { display: none !important; } /* ============================================================ 2h. MODE — enlarged cursor SVG cursors: black body with a white keyline so the pointer reads on both the navy and the paper surfaces. `auto` is the fallback where SVG cursors are unsupported. ============================================================ */ html[data-a11y-cursor="big"] body > *:not(.a11y-ui), html[data-a11y-cursor="big"] body > *:not(.a11y-ui) * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M2 1.5 L2 27 L8.6 20.8 L12.7 29.6 L17.4 27.4 L13.3 18.9 L21.6 18.6 Z' fill='%23000000' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 3 3, auto !important; } html[data-a11y-cursor="big"] body > *:not(.a11y-ui) :is(a, button, [role="button"], summary, .btn, label, select, [onclick]), html[data-a11y-cursor="big"] body > *:not(.a11y-ui) :is(a, button, .btn) * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M11.5 3.5a2 2 0 0 1 4 0v9m0-7a2 2 0 0 1 4 0v7m0-5a2 2 0 0 1 4 0v10.5a8 8 0 0 1-8 8h-2.6a6 6 0 0 1-5.4-3.4L4.2 15a2 2 0 0 1 3.3-2.2l2 2.4V3.5a2 2 0 0 1 2-2z' fill='%23000000' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 15 4, pointer !important; } html[data-a11y-cursor="huge"] body > *:not(.a11y-ui), html[data-a11y-cursor="huge"] body > *:not(.a11y-ui) * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 32 32'%3E%3Cpath d='M2 1.5 L2 27 L8.6 20.8 L12.7 29.6 L17.4 27.4 L13.3 18.9 L21.6 18.6 Z' fill='%23000000' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 4, auto !important; } html[data-a11y-cursor="huge"] body > *:not(.a11y-ui) :is(a, button, [role="button"], summary, .btn, label, select, [onclick]), html[data-a11y-cursor="huge"] body > *:not(.a11y-ui) :is(a, button, .btn) * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 32 32'%3E%3Cpath d='M11.5 3.5a2 2 0 0 1 4 0v9m0-7a2 2 0 0 1 4 0v7m0-5a2 2 0 0 1 4 0v10.5a8 8 0 0 1-8 8h-2.6a6 6 0 0 1-5.4-3.4L4.2 15a2 2 0 0 1 3.3-2.2l2 2.4V3.5a2 2 0 0 1 2-2z' fill='%23000000' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 22 6, pointer !important; } /* white-on-black variants read better once the page is inverted */ html[data-a11y-contrast="dark"][data-a11y-cursor] body > *:not(.a11y-ui), html[data-a11y-contrast="dark"][data-a11y-cursor] body > *:not(.a11y-ui) * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M2 1.5 L2 27 L8.6 20.8 L12.7 29.6 L17.4 27.4 L13.3 18.9 L21.6 18.6 Z' fill='%23ffffff' stroke='%23000000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 3 3, auto !important; } /* ============================================================ 2i. OVERLAY — reading guide + reading mask ============================================================ */ .a11y-guide { position: fixed; z-index: 99990; left: 0; right: 0; height: 14px; pointer-events: none; background: rgba(255, 106, 0, 0.28); border-top: 3px solid #ff6a00; border-bottom: 3px solid #ff6a00; display: none; } html[data-a11y-guide="1"] .a11y-guide { display: block; } .a11y-mask { position: fixed; inset: 0; z-index: 99989; pointer-events: none; display: none; /* a transparent band at --y, everything else dimmed */ background: linear-gradient( to bottom, rgba(4, 10, 20, 0.78) 0, rgba(4, 10, 20, 0.78) calc(var(--a11y-mask-y, 50vh) - 60px), transparent calc(var(--a11y-mask-y, 50vh) - 60px), transparent calc(var(--a11y-mask-y, 50vh) + 60px), rgba(4, 10, 20, 0.78) calc(var(--a11y-mask-y, 50vh) + 60px), rgba(4, 10, 20, 0.78) 100% ); } html[data-a11y-mask="1"] .a11y-mask { display: block; } /* ============================================================ 2j. OVERLAY — text-to-speech reading highlight ============================================================ */ html[data-a11y-tts="1"] body > *:not(.a11y-ui) :is(p, li, h1, h2, h3, h4, h5, h6, a, button, td, th, figcaption, dd, dt, blockquote, address, label, span):hover { outline: 3px dashed #7b2ff7 !important; outline-offset: 2px !important; } .a11y-speaking { background: #ffe27a !important; color: #201400 !important; outline: 3px solid #b8860b !important; outline-offset: 2px !important; } .a11y-tts-badge { position: fixed; z-index: 99995; bottom: 18px; left: 50%; translate: -50% 0; display: none; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 2px solid #ffffff; background: #4a1d9e; color: #ffffff; font-family: "Assistant", Arial, sans-serif; font-size: 0.9em; font-weight: 700; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.6); } html[data-a11y-tts="1"] .a11y-tts-badge { display: flex; } .a11y-tts-badge button { padding: 5px 12px; border: 2px solid #ffffff; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; } .a11y-tts-badge button:hover { background: #ffffff; color: #4a1d9e; } /* ============================================================ 2k. OVERLAY — virtual keyboard ============================================================ */ .a11y-vkb { position: fixed; z-index: 99996; left: 50%; bottom: 0; translate: -50% 0; width: min(760px, 100vw); display: none; flex-direction: column; gap: 6px; padding: 10px 10px 14px; background: var(--w-bg, #fff); color: var(--w-fg, #101c2e); border: 2px solid var(--w-line, #c3d1e4); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -18px 44px -14px rgba(9, 22, 41, 0.5); direction: ltr; } html[data-a11y-vkb="1"] .a11y-vkb { display: flex; } .a11y-vkb-bar { display: flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--w-line, #c3d1e4); direction: rtl; } .a11y-vkb-bar strong { flex: 1 1 auto; font-size: 0.85em; } .a11y-vkb-bar .a11y-vkb-target { font-weight: 400; color: var(--w-fg-dim, #46566f); } .a11y-vkb-row { display: flex; gap: 5px; justify-content: center; } .a11y-vkb-key { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 4px 2px; border: 2px solid var(--w-line, #c3d1e4); border-radius: 8px; background: var(--w-bg-2, #eef3fa); color: inherit; font: inherit; font-size: 1em; font-weight: 600; cursor: pointer; } .a11y-vkb-key:hover { background: var(--w-accent, #1d5ca3); color: var(--w-accent-fg, #fff); } .a11y-vkb-key.wide { flex: 2 1 0; font-size: 0.8em; } .a11y-vkb-key.space { flex: 6 1 0; } .a11y-vkb-key[aria-pressed="true"] { background: var(--w-accent, #1d5ca3); color: var(--w-accent-fg, #fff); } @media (max-width: 620px) { .a11y-vkb-key { min-height: 42px; font-size: 0.9em; } } /* ============================================================ 2l. Image descriptions (תיאורי תמונות) ============================================================ */ .a11y-alt-note { display: block; margin: 6px 0 10px; padding: 7px 10px; border: 2px dashed #7b2ff7; border-radius: 6px; background: #f4ecff; color: #2b0b52; font-family: "Assistant", Arial, sans-serif; font-size: 0.85rem; line-height: 1.5; font-weight: 600; direction: rtl; text-align: start; } .a11y-alt-note[data-empty="true"] { border-color: #b00020; background: #ffeaee; color: #6b0014; } /* ============================================================ 2n. OVERLAY — accessibility-statement modal Opened by the footer link on every page. Its content is fetched from accessibility.html at click time, so the statement has exactly one source of truth; without JS (or if the fetch fails) the link simply navigates to that page instead. ============================================================ */ .a11y-doc-modal { position: fixed; inset: 0; z-index: 100002; display: none; align-items: center; justify-content: center; padding: 4vh 16px; background: rgba(6, 14, 26, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .a11y-doc-modal[data-open="true"] { display: flex; } .a11y-doc-dialog { display: flex; flex-direction: column; width: min(860px, 100%); max-height: 92vh; background: var(--w-bg); color: var(--w-fg); border: 1px solid var(--w-line); border-radius: 16px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7); overflow: hidden; } .a11y-doc-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--w-accent); color: var(--w-accent-fg); } .a11y-doc-head h2 { flex: 1 1 auto; margin: 0; font-family: inherit; font-size: 1.25em; font-weight: 700; line-height: 1.3; color: inherit; } .a11y-doc-head .a11y-icon { flex: none; width: 26px; height: 26px; } .a11y-doc-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 22px 26px 26px; background: var(--w-bg); } .a11y-doc-foot { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--w-line); background: var(--w-bg-2); } .a11y-doc-foot .a11y-foot-btn { flex: 1 1 auto; } .a11y-doc-loading { padding: 40px 20px; text-align: center; color: var(--w-fg-dim); font-size: 0.95em; } /* The statement prose as it renders inside the modal. Every selector here is deliberately prefixed with .a11y-doc-modal: the cloned markup carries .a11y-doc, whose page-level rules (section 3) sit LATER in this file at equal specificity and would otherwise win. They paint from the site tokens — `var(--ink)` on a heading, which high-contrast dark redefines to #000 and would render black-on-black inside the modal. The modal must paint from its own --w-* tokens only. */ .a11y-doc-modal .a11y-doc { max-width: none; } .a11y-doc-modal .a11y-doc-body h3 { margin: 26px 0 10px; font-family: "Suez One", var(--font-display, serif); font-size: 1.06em; font-weight: 400; line-height: 1.35; color: var(--w-fg); } .a11y-doc-modal .a11y-doc-body h3:first-child { margin-top: 0; } .a11y-doc-modal .a11y-doc-body :is(p, li, dd, dt) { color: var(--w-fg); font-size: 0.95em; line-height: 1.75; } .a11y-doc-modal .a11y-doc-body dt { font-weight: 700; } .a11y-doc-modal .a11y-doc-body strong { color: var(--w-fg); } .a11y-doc-modal .a11y-doc-body ul.bullets { list-style: disc; padding-inline-start: 1.3em; margin: 0 0 1em; color: var(--w-fg); } .a11y-doc-modal .a11y-doc-body dl { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 10px 18px; margin: 0 0 1em; padding: 14px 16px; border: 1px solid var(--w-line); border-radius: 10px; background: var(--w-bg-2); } .a11y-doc-modal .a11y-doc-body kbd { font-family: inherit; font-size: 0.85em; font-weight: 700; padding: 1px 6px; border: 1px solid var(--w-line); border-radius: 4px; background: var(--w-bg-2); color: var(--w-fg); } /* the reveal-on-scroll class comes along with the cloned markup and would otherwise leave the whole statement invisible inside the modal */ .a11y-doc-body .reveal { opacity: 1 !important; transform: none !important; } @media (max-width: 620px) { .a11y-doc-modal { padding: 0; } .a11y-doc-dialog { max-height: 100%; height: 100%; border-radius: 0; border: 0; } .a11y-doc-body { padding: 18px 18px 24px; } .a11y-doc-body dl { grid-template-columns: 1fr; gap: 2px 0; } .a11y-doc-body dd { margin-bottom: 10px; } } @media print { .a11y-doc-modal[data-open="true"] { position: static; display: block; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .a11y-doc-dialog { max-height: none; border: 0; box-shadow: none; } .a11y-doc-body { overflow: visible; } .a11y-doc-head, .a11y-doc-foot { display: none; } } /* ============================================================ 3. Accessibility-statement page (accessibility.html) style.css resets lists to no-bullet/no-padding site-wide, so the statement needs its own prose scope to read as a legal document. ============================================================ */ .a11y-doc { max-width: 820px; } .a11y-doc h3 { margin-top: 0; color: var(--ink); } .a11y-doc p { color: var(--muted); } .a11y-doc p:last-child { margin-bottom: 0; } .a11y-doc ul.bullets { list-style: disc; padding-inline-start: 1.3em; margin: 0 0 1em; color: var(--muted); } .a11y-doc ul.bullets li { margin-bottom: 0.45em; } .a11y-doc ul.bullets li:last-child { margin-bottom: 0; } .a11y-doc dl { margin: 0; display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 10px 18px; } .a11y-doc dt { font-weight: 700; color: var(--ink-text); } .a11y-doc dd { margin: 0; color: var(--muted); } @media (max-width: 560px) { .a11y-doc dl { grid-template-columns: 1fr; gap: 2px 0; } .a11y-doc dd { margin-bottom: 12px; } } /* placeholder the site owner still has to fill in — deliberately loud */ .a11y-todo { background: #fff2c2; color: #6b4a00; border: 1px dashed #b07d00; border-radius: 4px; padding: 1px 7px; font-weight: 700; font-family: var(--font-tech, monospace); font-size: 0.9em; } /* ============================================================ 4. Respect the OS motion setting for the widget itself ============================================================ */ @media (prefers-reduced-motion: reduce) { .a11y-fab, .a11y-fab::after, .a11y-item { transition: none !important; } }