/* =========================================================================== Accessibility (נגישות) — IS 5568 / WCAG 2.1 AA support layer. Self-contained: the floating accessibility widget, the user-selectable display adjustments, and the global keyboard-focus + skip-link styles. Display modes are classes on . IMPORTANT: the CSS filters below are applied to the CONTENT ROOTS (header/main/footer + each overlay), never to html/body — a filter on an ancestor turns it into the containing block for position:fixed descendants, which would break every fixed overlay the moment the page scrolls. Filtering each overlay ELEMENT itself is safe (only its descendants are affected, and they are not fixed). The widget itself is deliberately excluded from every filter so a user can always see it well enough to switch a mode back off. =========================================================================== */ /* --- shared content-root list (kept in sync across the modes below) -------- */ /* ---------- 1. Skip link — first focusable element on the page ------------- */ .a11y-skip { position: fixed; inset-inline-start: 50%; top: -100px; transform: translateX(50%); z-index: 5000; background: #10243d; color: #fff; font: 700 0.95rem/1 inherit; font-family: inherit; padding: 13px 22px; border-radius: 0 0 12px 12px; text-decoration: none; box-shadow: 0 6px 22px rgba(10, 18, 30, 0.45); transition: top 0.18s ease-out; } html[dir="ltr"] .a11y-skip { transform: translateX(-50%); } .a11y-skip:focus { top: 0; outline: 3px solid #ffd400; outline-offset: 2px; } /* ---------- 2. Global keyboard focus ring --------------------------------- */ /* Only for keyboard users (:focus-visible) so mouse clicks stay visually clean. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #1a73e8 !important; outline-offset: 2px !important; border-radius: 4px; } /* Inputs opt out of the site's `outline:none` when focused by keyboard. */ input:focus-visible, textarea:focus-visible, select:focus-visible { box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.25) !important; } /* ---------- 3. The widget: launcher button -------------------------------- */ .a11y-btn { position: fixed; inset-inline-start: 14px; bottom: 14px; z-index: 1990; /* above content, below the page modals (2000) */ width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff; background: #10243d; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: 0 4px 16px rgba(10, 18, 30, 0.35); transition: transform 0.15s ease-out, background 0.15s; } .a11y-btn:hover { transform: scale(1.06); background: #17365c; } .a11y-btn:active { transform: scale(0.98); } .a11y-btn svg { width: 27px; height: 27px; display: block; } .a11y-btn[hidden] { display: none; } /* ---------- 4. The widget: panel ------------------------------------------ */ .a11y-panel { position: fixed; inset-inline-start: 14px; bottom: 70px; z-index: 1995; width: min(290px, calc(100vw - 28px)); max-height: min(74vh, 560px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #fff; color: #17212e; border-radius: 14px; box-shadow: 0 18px 50px rgba(10, 18, 30, 0.32); padding: 12px; font-family: inherit; font-size: 0.9rem; animation: a11yPop 0.16s ease-out; } .a11y-panel[hidden] { display: none; } @keyframes a11yPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .a11y-panel__title { margin: 0; font-size: 1rem; font-weight: 800; color: #10243d; } .a11y-panel__close { border: none; background: #eef1f5; color: #17212e; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; font-size: 1.1rem; line-height: 1; font-family: inherit; flex: 0 0 auto; } .a11y-panel__close:hover { background: #dfe4ea; } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .a11y-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; min-height: 62px; padding: 9px 6px; border: 2px solid #e2e7ee; border-radius: 10px; background: #f8fafc; color: #17212e; font: 600 0.76rem/1.25 inherit; font-family: inherit; cursor: pointer; transition: border-color 0.14s, background 0.14s; } .a11y-opt:hover { background: #eef3f9; border-color: #b9c6d6; } .a11y-opt__ico { font-size: 1.15rem; line-height: 1; } .a11y-opt[aria-pressed="true"] { border-color: #1a73e8; background: #e8f0fe; color: #0b47a1; } .a11y-opt--wide { grid-column: 1 / -1; flex-direction: row; min-height: 42px; } .a11y-reset { grid-column: 1 / -1; margin-top: 2px; border: 2px solid #f0c9c9; background: #fdf1f1; color: #a12222; } .a11y-reset:hover { background: #fbe3e3; border-color: #e6adad; } .a11y-panel__foot { margin-top: 10px; padding-top: 9px; border-top: 1px solid #e8ecf1; display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; color: #5a6675; text-align: center; } .a11y-statement-link { background: none; border: none; padding: 2px; cursor: pointer; color: #1a73e8; font: 700 0.78rem inherit; font-family: inherit; text-decoration: underline; } /* ---------- 5. Statement dialog ------------------------------------------- */ .a11y-modal { position: fixed; inset: 0; z-index: 4100; display: flex; align-items: center; justify-content: center; padding: 18px; } .a11y-modal[hidden] { display: none; } .a11y-modal__back { position: absolute; inset: 0; background: rgba(10, 18, 30, 0.62); } .a11y-modal__card { position: relative; background: #fff; color: #24303a; border-radius: 16px; padding: 22px 20px 18px; max-width: 560px; width: 100%; max-height: 86vh; overflow-y: auto; box-shadow: 0 22px 60px rgba(10, 18, 30, 0.4); font-size: 0.9rem; line-height: 1.6; } .a11y-modal__card h2 { margin: 0 0 12px; font-size: 1.2rem; color: #10243d; } .a11y-modal__card h3 { margin: 16px 0 6px; font-size: 0.98rem; color: #10243d; } .a11y-modal__card p, .a11y-modal__card li { margin: 0 0 8px; } .a11y-modal__card ul { margin: 0 0 8px; padding-inline-start: 20px; } .a11y-modal__card a { color: #1a73e8; } .a11y-modal__x { position: absolute; inset-inline-end: 12px; top: 10px; border: none; background: #eef1f5; cursor: pointer; width: 32px; height: 32px; border-radius: 9px; font-size: 1.2rem; line-height: 1; font-family: inherit; color: #17212e; } .a11y-modal__x:hover { background: #dfe4ea; } /* =========================================================================== Display modes =========================================================================== */ /* ---------- Font scaling (rem-based type across the site scales with this) - */ html.a11y-fs-1 { font-size: 112.5%; } html.a11y-fs-2 { font-size: 125%; } html.a11y-fs-3 { font-size: 137.5%; } html.a11y-fs-4 { font-size: 150%; } /* The widget keeps its own scale so the panel never outgrows the screen. */ html[class*="a11y-fs-"] .a11y-panel, html[class*="a11y-fs-"] .a11y-btn { font-size: 0.9rem; } /* ---------- Grayscale ------------------------------------------------------ */ html.a11y-gray header, html.a11y-gray main, html.a11y-gray footer, html.a11y-gray .vehicle-modal, html.a11y-gray .video-backdrop, html.a11y-gray .video-close, html.a11y-gray .explainer-inline, html.a11y-gray .frame-wrap { filter: grayscale(1); } /* ---------- Inverted colours ---------------------------------------------- */ html.a11y-invert header, html.a11y-invert main, html.a11y-invert footer, html.a11y-invert .vehicle-modal, html.a11y-invert .video-backdrop, html.a11y-invert .video-close, html.a11y-invert .explainer-inline, html.a11y-invert .frame-wrap { filter: invert(1) hue-rotate(180deg); } /* Keep photos/video looking natural inside an inverted page. */ html.a11y-invert img, html.a11y-invert video, html.a11y-invert iframe { filter: invert(1) hue-rotate(180deg); } /* ---------- High contrast (dark) ------------------------------------------ */ /* Explicit colour overrides rather than a filter, so nothing about the layout or the fixed overlays changes — only the palette. */ html.a11y-contrast body, html.a11y-contrast header, html.a11y-contrast main, html.a11y-contrast footer, html.a11y-contrast .card, html.a11y-contrast .vehicle-modal__card, html.a11y-contrast .a11y-modal__card { background: #000 !important; color: #fff !important; } html.a11y-contrast .hero { background-image: none !important; } html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast p, html.a11y-contrast span, html.a11y-contrast li, html.a11y-contrast label, html.a11y-contrast div, html.a11y-contrast b, html.a11y-contrast strong, html.a11y-contrast legend, html.a11y-contrast small { background-color: transparent !important; color: #fff !important; text-shadow: none !important; } html.a11y-contrast a, html.a11y-contrast a * { color: #ffd400 !important; } html.a11y-contrast button, html.a11y-contrast .cta, html.a11y-contrast input, html.a11y-contrast select, html.a11y-contrast textarea { background: #000 !important; color: #ffd400 !important; border: 2px solid #ffd400 !important; box-shadow: none !important; background-image: none !important; } html.a11y-contrast input::placeholder { color: #d0d0d0 !important; } html.a11y-contrast .card { border: 1px solid #fff !important; } /* The widget stays on its own palette so it is always readable. */ html.a11y-contrast .a11y-panel, html.a11y-contrast .a11y-panel * { background: #000 !important; color: #fff !important; } html.a11y-contrast .a11y-opt { border-color: #fff !important; } html.a11y-contrast .a11y-opt[aria-pressed="true"] { background: #ffd400 !important; color: #000 !important; } html.a11y-contrast .a11y-opt[aria-pressed="true"] * { color: #000 !important; } html.a11y-contrast .a11y-btn { background: #000 !important; border-color: #ffd400 !important; color: #ffd400 !important; } /* ---------- Highlight links ----------------------------------------------- */ html.a11y-links a, html.a11y-links button, html.a11y-links [role="button"] { text-decoration: underline !important; outline: 2px dashed #1a73e8 !important; outline-offset: 2px !important; } html.a11y-links .a11y-panel *, html.a11y-links .a11y-btn { outline: none !important; text-decoration: none !important; } /* ---------- Readable font -------------------------------------------------- */ html.a11y-readable body, html.a11y-readable body * { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; letter-spacing: 0.012em !important; word-spacing: 0.05em !important; line-height: 1.65 !important; } /* ---------- Big cursor ----------------------------------------------------- */ html.a11y-bigcursor, html.a11y-bigcursor * { 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='M6 2l0 24 6-6 4 9 5-2-4-9 9 0z' fill='%23000' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 6 2, auto !important; } /* ---------- Stop animations ------------------------------------------------ */ html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ---------- Reading guide -------------------------------------------------- */ .a11y-guide { position: fixed; inset-inline: 0; height: 14px; background: rgba(255, 212, 0, 0.55); border-top: 2px solid #b58900; border-bottom: 2px solid #b58900; z-index: 1980; pointer-events: none; display: none; } html.a11y-guide-on .a11y-guide { display: block; } /* ---------- Respect the OS "reduce motion" setting ------------------------- */ @media (prefers-reduced-motion: reduce) { .a11y-panel { animation: none; } .a11y-skip { transition: none; } } /* ---------- Small screens: keep the panel comfortable ---------------------- */ @media (max-width: 380px) { .a11y-panel { width: calc(100vw - 20px); inset-inline-start: 10px; } .a11y-btn { inset-inline-start: 10px; bottom: 10px; } } /* ---------- Print: never print the widget ---------------------------------- */ @media print { .a11y-btn, .a11y-panel, .a11y-modal, .a11y-guide, .a11y-skip { display: none !important; } }