/* ============================================================ HAGAG EUROPE PARTNERS — Accessibility widget Floating "כלי נגישות" panel with text-size, contrast, color, font, and link controls. Settings persist via localStorage. ============================================================ */ /* ----- Toggle button (the floating circular launcher) ----- */ .a11y-toggle { position: fixed; top: 16px; right: 16px; z-index: 100000; width: 44px; height: 44px; border-radius: 50%; background: #14192b; border: 2px solid #fff; color: #fff; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); transition: background-color 0.2s ease, transform 0.15s ease; } .a11y-toggle:hover { background: #1f2742; transform: scale(1.05); } .a11y-toggle:focus-visible { outline: 2px solid #d2b051; outline-offset: 3px; } .a11y-toggle svg { width: 24px; height: 24px; display: block; fill: currentColor; } /* ----- Panel ----- */ .a11y-panel { position: fixed; top: 72px; right: 16px; z-index: 99999; width: 260px; background: #ffffff; color: #14192b; border-radius: 4px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); padding: 0; direction: rtl; font-family: "Narkiss Block", "Arial Hebrew", "Arial", sans-serif; animation: a11y-panel-in 0.2s ease-out; } .a11y-panel[hidden] { display: none; } @keyframes a11y-panel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .a11y-title { margin: 0; padding: 14px 18px; font-size: 18px; font-weight: 700; color: #14192b; border-bottom: 1px solid #e5e7ec; text-align: right; } .a11y-list { list-style: none; margin: 0; padding: 6px 0; } .a11y-list li { display: block; } .a11y-list button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 18px; background: transparent; border: 0; font-family: inherit; font-size: 15px; font-weight: 400; color: #14192b; cursor: pointer; text-align: right; transition: background-color 0.15s ease; } .a11y-list button:hover, .a11y-list button:focus-visible { background: #f1f3f8; outline: none; } .a11y-list button.is-active { background: #fff7e0; color: #1c2342; font-weight: 600; } .a11y-list button .a11y-label { flex: 1; text-align: right; padding-right: 0; } .a11y-list button .a11y-icon { flex-shrink: 0; width: 20px; height: 20px; margin-right: 12px; color: #14192b; } .a11y-list button .a11y-icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .a11y-list .a11y-reset button { border-top: 1px solid #e5e7ec; margin-top: 4px; color: #5b5f73; } .a11y-list .a11y-reset button:hover { color: #14192b; } /* ============================================================ FEATURE STATES Each is toggled by a class on . ============================================================ */ /* ----- Text size — multiplier 0.8 → 1.6 ----- The landing uses pixel-based clamp() and viewport units (not rem), so font-size based scaling has no effect, and text-only zoom causes overlaps (positions are absolute and don't shift). We zoom the whole .viewport (everything scales together, layout stays intact) and allow the page to scroll vertically when scaled-up content needs more room. This is the same behavior as the browser's Ctrl+Plus zoom. */ html { --a11y-text-scale: 1; } html.a11y-text-scaled .viewport, html.a11y-text-scaled .tos-header, html.a11y-text-scaled .tos-main, html.a11y-text-scaled .tos-footer { zoom: var(--a11y-text-scale); } /* When scaled-up content needs more room than fits in the fixed viewport, let the viewport scroll internally. */ html.a11y-text-scaled .viewport { overflow-y: auto !important; } /* Grayscale */ html.a11y-grayscale body { filter: grayscale(100%); } /* High contrast — black on yellow / strong colors */ html.a11y-high-contrast, html.a11y-high-contrast body { background: #000 !important; color: #fff !important; } html.a11y-high-contrast *:not(.a11y-panel):not(.a11y-toggle):not(.a11y-panel *):not(.a11y-toggle *) { background-color: #000 !important; color: #ffff00 !important; border-color: #ffff00 !important; } html.a11y-high-contrast a:not(.a11y-panel a) { color: #00ffff !important; text-decoration: underline !important; } html.a11y-high-contrast img, html.a11y-high-contrast video { filter: grayscale(100%) contrast(1.2); } /* Negative contrast (color invert) */ html.a11y-invert body { filter: invert(100%) hue-rotate(180deg); } html.a11y-invert img, html.a11y-invert video { filter: invert(100%) hue-rotate(180deg); } /* Don't invert the widget itself */ html.a11y-invert .a11y-toggle, html.a11y-invert .a11y-panel { filter: invert(100%) hue-rotate(180deg); } /* Light background — white bg, dark text */ html.a11y-light-bg, html.a11y-light-bg body { background: #ffffff !important; color: #14192b !important; } html.a11y-light-bg *:not(.a11y-panel):not(.a11y-toggle):not(.a11y-panel *):not(.a11y-toggle *):not(input):not(button) { background-color: #ffffff !important; color: #14192b !important; text-shadow: none !important; } html.a11y-light-bg .hero-heading, html.a11y-light-bg .modal-heading, html.a11y-light-bg .cta-text, html.a11y-light-bg .iframe-hero, html.a11y-light-bg .iframe-heading, html.a11y-light-bg .tos-title { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: #14192b !important; color: #14192b !important; } /* Underline all links */ html.a11y-underline-links a:not(.a11y-panel a) { text-decoration: underline !important; text-underline-offset: 2px; } /* Readable font — switch to a clean, widely-readable sans */ html.a11y-readable-font, html.a11y-readable-font body, html.a11y-readable-font *:not(.a11y-icon):not(.a11y-icon *) { font-family: Arial, "Arial Hebrew", "Helvetica Neue", Helvetica, sans-serif !important; letter-spacing: normal !important; } /* When in readable font, force-display the gradient texts as solid colors */ html.a11y-readable-font .hero-heading, html.a11y-readable-font .modal-heading, html.a11y-readable-font .cta-text, html.a11y-readable-font .iframe-hero, html.a11y-readable-font .iframe-heading, html.a11y-readable-font .tos-title { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: #d2b051 !important; color: #d2b051 !important; } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 600px) { .a11y-toggle { top: 12px; right: 12px; width: 40px; height: 40px; } .a11y-panel { top: 60px; right: 12px; width: calc(100vw - 24px); max-width: 280px; } }