/* ============================================================
Accessibility menu (a11y.js): the button Israeli visitors expect, and
the page adjustments it switches on. Ours, not a hosted overlay — an
overlay drops a stranger's script onto pages that carry patient contact
details, cannot be audited, and disappears when the service does. The
settings match what the common Israeli widgets offer: text size and
spacing, colour modes, highlighted links and headings, a plain typeface,
a large cursor, visible keyboard focus, motion off, and reading aloud.
Everything here is scoped to .a11y-* or to a class a11y.js puts on
, so nothing leaks into the site's own styles.
============================================================ */
/* ---------- the button and the panel ---------- */
.a11y-fab {
position: fixed; inset-block-end: max(16px, env(safe-area-inset-bottom));
inset-inline-end: 16px; z-index: 90;
width: 48px; height: 48px; padding: 0; border-radius: 50%;
display: grid; place-items: center; cursor: pointer;
background: var(--teal-deep); color: #fff;
border: 2px solid #fff; box-shadow: var(--shadow);
transition: transform .18s ease, background-color .18s ease;
}
.a11y-fab:hover { transform: translateY(-2px); background: var(--teal); }
.a11y-fab:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.a11y-fab svg { width: 26px; height: 26px; }
.a11y-panel {
position: fixed; inset-block-end: max(74px, calc(env(safe-area-inset-bottom) + 74px));
inset-inline-end: 16px; z-index: 91;
width: min(310px, calc(100vw - 32px)); max-height: min(76vh, 620px); overflow-y: auto;
padding: 16px; border-radius: var(--radius);
background: var(--surface); color: var(--ink);
border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.a11y-title { margin: 0; font-family: var(--sans); font-size: 1.05rem; font-weight: 700; }
.a11y-close {
width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
background: none; border: 1px solid var(--line); border-radius: 50%; color: var(--ink);
}
.a11y-close:hover { background: var(--cream-2); }
.a11y-group { margin-bottom: 14px; }
.a11y-label { display: block; margin-bottom: 6px; font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
.a11y-size { display: flex; align-items: center; gap: 8px; }
.a11y-size button {
width: 40px; height: 40px; font-size: 1.1rem; font-weight: 700; cursor: pointer;
background: var(--cream-2); border: 1px solid var(--line); border-radius: 12px; color: var(--ink);
}
.a11y-size button:hover { background: var(--cream); }
.a11y-size output { flex: 1; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The colour modes are one choice out of three, so they sit in a row and
only one can be pressed at a time. */
.a11y-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.a11y-modes .a11y-mode:nth-child(n+4) { grid-column: span 1; }
.a11y-mode {
padding: 9px 6px; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600;
background: var(--cream-2); border: 1px solid var(--line); border-radius: 12px; color: var(--ink);
}
.a11y-mode:hover { background: var(--cream); }
.a11y-mode[aria-pressed="true"] { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.a11y-toggle {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-bottom: 6px; padding: 10px 12px; cursor: pointer; text-align: start;
background: var(--cream-2); border: 1px solid var(--line); border-radius: 12px;
font: inherit; font-size: .95rem; color: var(--ink);
}
.a11y-toggle:hover { background: var(--cream); }
.a11y-toggle[aria-pressed="true"] { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
/* A state an eye can read without relying on colour, and a screen reader
announces from aria-pressed: the tick appears only when the setting is on. */
.a11y-toggle .a11y-state { flex: none; width: 18px; height: 18px; }
.a11y-toggle .a11y-state svg { width: 100%; height: 100%; opacity: 0; }
.a11y-toggle[aria-pressed="true"] .a11y-state svg { opacity: 1; }
.a11y-note { margin: 6px 0 0; font-size: .8rem; line-height: 1.45; color: var(--ink-soft); }
.a11y-reset {
width: 100%; margin-top: 4px; padding: 10px 12px; cursor: pointer;
background: none; border: 1px dashed var(--line); border-radius: 12px;
font: inherit; font-size: .9rem; color: var(--ink-soft);
}
.a11y-reset:hover { color: var(--ink); border-color: var(--ink-soft); }
.a11y-panel :where(button):focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
/* ---------- what the settings do to the page ---------- */
/* Text size: the type scale is in rem, so the root size carries it. */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }
html.a11y-text-3 { font-size: 137.5%; }
/* Text spacing, the WCAG 1.4.12 values. */
html.a11y-space :where(p, li, dd, dt, .lead, .section-lead, .faq-panel-inner p, .rung p) {
line-height: 1.9 !important; letter-spacing: .06em !important; word-spacing: .16em !important;
}
html.a11y-space :where(h1, h2, h3, .display) { line-height: 1.4 !important; letter-spacing: normal !important; }
/* Bigger or wider text needs room the one-screen layouts do not have: the
pinned sections are released and the snap goes quiet, so nothing is cut
off at a fold and the page simply scrolls. */
html.a11y-loose { scroll-snap-type: none !important; }
html.a11y-loose .hero[data-lock-stop],
html.a11y-loose main > section[data-lock-stop],
html.a11y-loose .section[data-lock-stop] {
height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important;
}
html.a11y-loose .embed-inline { min-height: 0 !important; }
html.a11y-loose .hero-visual { display: none; }
/* Colour mode 1: light, maximum contrast on white. */
html.a11y-light {
--cream: #fff; --cream-2: #fff; --surface: #fff;
--ink: #000; --ink-soft: #1a1a1a; --line: #000;
--teal: #00615d; --teal-deep: #004744; --teal-bright: #00615d; --dark: #000;
--shadow-sm: none; --shadow: none; --shadow-lg: none;
}
html.a11y-light body { background: #fff; color: #000; }
html.a11y-light .display .ital { color: #004744; }
/* Colour mode 2: dark, the classic high-contrast pairing. */
html.a11y-dark {
--cream: #000; --cream-2: #0a0a0a; --surface: #000;
--ink: #fff; --ink-soft: #f2f2f2; --line: #fff;
--teal: #7cf5ee; --teal-deep: #7cf5ee; --teal-bright: #7cf5ee; --dark: #000;
--shadow-sm: none; --shadow: none; --shadow-lg: none;
}
html.a11y-dark body { background: #000; color: #fff; }
html.a11y-dark :where(.cta-band, .btn-dark, .btn-cream) { background: #000 !important; color: #ffe57a !important; border: 1px solid #ffe57a !important; }
html.a11y-dark :where(a, .display .ital, .eyebrow, .cmp-mark) { color: #ffe57a !important; }
html.a11y-dark img, html.a11y-dark svg { filter: brightness(1.1); }
/* Colour mode 3: grey, for anyone who reads better without colour at all. */
html.a11y-gray { filter: grayscale(1); }
/* Colour mode 4: black on yellow, the pairing low-vision readers often ask
for by name. Painted through the tokens like the others. */
html.a11y-yellow {
--cream: #ffed8a; --cream-2: #ffed8a; --surface: #fff6c2;
--ink: #000; --ink-soft: #141414; --line: #000;
--teal: #000; --teal-deep: #000; --teal-bright: #000; --dark: #000;
--shadow-sm: none; --shadow: none; --shadow-lg: none;
}
html.a11y-yellow body { background: #ffed8a; color: #000; }
html.a11y-yellow :where(.cta-band, .btn-dark) { background: #000 !important; color: #ffed8a !important; }
html.a11y-yellow :where(.hero-canvas, .hero-veil, .hero::before) { display: none; }
/* Colour mode 5: inverted, the whole page turned through itself. Images and
the widget's own picture are turned back, or photographs come out as
negatives. */
html.a11y-invert { filter: invert(1) hue-rotate(180deg); background: #000; }
html.a11y-invert :where(img, video, canvas, .browser, .orli-panel) { filter: invert(1) hue-rotate(180deg); }
/* Shared by both contrast modes: the decorative washes go, the frames stay. */
html:is(.a11y-light, .a11y-dark, .a11y-yellow) :where(.hero-canvas, .hero-veil, .hero::before) { display: none; }
html:is(.a11y-light, .a11y-dark, .a11y-yellow) :where(.cmp-cell, .faq-item, .rung, .browser, .orli-panel, .contact-dialog, .code-card) {
border: 1px solid currentColor;
}
/* Links called out for anyone who cannot rely on colour. */
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; }
html.a11y-links a:hover, html.a11y-links a:focus-visible { background: #ffee9c; color: #000; }
/* Headings called out, so the shape of the page is obvious at a glance. */
html.a11y-headings :where(h1, h2, h3) {
outline: 2px dashed currentColor; outline-offset: 6px; border-radius: 4px;
}
/* A plain, evenly spaced face for anyone who finds the display type hard. */
html.a11y-readable :where(body, .display, h1, h2, h3, .lead, p, li, a, button, input, textarea) {
font-family: Arial, "Heebo", system-ui, sans-serif !important;
letter-spacing: normal !important; font-style: normal !important;
}
html.a11y-readable { line-height: 1.7; }
/* A large, high-contrast pointer. */
html.a11y-cursor, html.a11y-cursor * {
cursor: url("data:image/svg+xml;utf8,") 6 4, auto !important;
}
html.a11y-cursor :where(a, button, [role="button"], input, textarea, select, summary) {
cursor: url("data:image/svg+xml;utf8,") 6 4, pointer !important;
}
/* Keyboard focus made loud, on every focusable thing rather than only where
the browser decides the focus came from a key. */
html.a11y-focus :where(a, button, input, textarea, select, summary, [tabindex]):focus {
outline: 4px solid #ffb300 !important; outline-offset: 3px !important; border-radius: 4px;
}
/* Motion off: nothing animates or transitions, and the hero's moving
gradient stands still (a11y.js also tells the scripts that animate). */
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after {
animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html.a11y-still .hero-canvas { display: none; }
/* Read aloud: the pointer says the page is speakable, and the piece being
read is outlined so it is clear what the voice is on. */
html.a11y-speak main :where(p, h1, h2, h3, li, dd, dt, .lead, .section-lead) { cursor: help; }
.a11y-reading { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
/* On a phone the button sits clear of the pinned demo card. */
@media (max-width: 920px) {
.a11y-fab { width: 44px; height: 44px; inset-block-end: max(12px, env(safe-area-inset-bottom)); inset-inline-end: 12px; }
.a11y-fab svg { width: 24px; height: 24px; }
.a11y-panel { inset-block-end: max(64px, calc(env(safe-area-inset-bottom) + 64px)); inset-inline-end: 12px; }
}
@media print { .a11y-fab, .a11y-panel { display: none !important; } }