/* Elipaz accessibility widget — palette: #0c5adb (brand blue), #00247e (navy). All component selectors are namespaced under .a11y-widget. The feature overrides at the bottom of the file are applied to via the a11y-* classes that the JS toggles. */ /* ============================================================ Widget — trigger + panel ============================================================ */ .a11y-widget { position: fixed; /* Vertically centered on the viewport edge. RTL (Hebrew): pinned to the LEFT edge. LTR (English/other): pinned to the RIGHT edge (the opposite side). The base rule covers RTL; the :not() override below flips for LTR. */ top: 50%; bottom: auto; left: 24px; right: auto; transform: translateY(-50%); z-index: 99990; direction: ltr; font-family: inherit; } /* LTR — flip to right edge, still vertically centered */ .a11y-widget:not(.a11y-widget--rtl) { left: auto; right: 24px; } .a11y-widget--rtl { direction: rtl; } /* Trigger button — small and quiet (no idle pulse). */ .a11y-widget__trigger { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; background: #0c5adb; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 6px 16px rgba(12, 90, 219, 0.35); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, background 0.2s ease; } .a11y-widget__trigger:hover, .a11y-widget__trigger:focus-visible { background: #084bb8; transform: scale(1.06); box-shadow: 0 8px 22px rgba(12, 90, 219, 0.5); outline: none; } .a11y-widget__trigger svg { width: 22px; height: 22px; } .a11y-widget.is-open .a11y-widget__trigger { transform: rotate(8deg); } /* Panel — opens horizontally from the trigger now that the widget lives mid-edge rather than in a bottom corner. Vertically centered on the trigger; capped so it can't run off the top/bottom. */ .a11y-widget__panel { position: absolute; top: 50%; width: min(360px, calc(100vw - 32px)); max-height: min(80vh, 640px); display: flex; flex-direction: column; background: #fff; color: #1f2433; border-radius: 18px; box-shadow: 0 24px 48px rgba(12, 32, 80, 0.22), 0 4px 12px rgba(12, 32, 80, 0.08); opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden; } /* RTL — trigger sits on the left edge; panel opens to the RIGHT of it. */ .a11y-widget--rtl .a11y-widget__panel { left: calc(100% + 14px); right: auto; transform: translateY(-50%) translateX(-12px) scale(0.96); transform-origin: left center; } .a11y-widget--rtl.is-open .a11y-widget__panel { transform: translateY(-50%) translateX(0) scale(1); } /* LTR — trigger sits on the right edge; panel opens to the LEFT of it. */ .a11y-widget:not(.a11y-widget--rtl) .a11y-widget__panel { right: calc(100% + 14px); left: auto; transform: translateY(-50%) translateX(12px) scale(0.96); transform-origin: right center; } .a11y-widget:not(.a11y-widget--rtl).is-open .a11y-widget__panel { transform: translateY(-50%) translateX(0) scale(1); } .a11y-widget.is-open .a11y-widget__panel { opacity: 1; pointer-events: auto; } /* Header */ .a11y-widget__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 14px; background: linear-gradient(135deg, #0c5adb 0%, #00247e 100%); color: #fff; } .a11y-widget__title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: 0.3px; /* Important: theme h2 rules elsewhere can paint headings dark, which would render this title invisible on its blue header gradient. Pin to white. */ color: #fff !important; } .a11y-widget__close { width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.14); border: none; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background 0.18s ease; } .a11y-widget__close:hover, .a11y-widget__close:focus-visible { background: rgba(255, 255, 255, 0.28); outline: none; } .a11y-widget__close svg { width: 18px; height: 18px; } /* Grid of tiles */ .a11y-widget__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; overflow-y: auto; } .a11y-widget__tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; background: #f5f7fb; border: 2px solid transparent; border-radius: 12px; color: #1f2433; font-size: 13px; font-weight: 500; line-height: 1.25; text-align: center; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, color 0.18s ease; } .a11y-widget__tile:hover { background: #e7ecf7; transform: translateY(-1px); } .a11y-widget__tile:focus-visible { outline: none; border-color: #0c5adb; } .a11y-widget__tile.is-active { background: #0c5adb; border-color: #00247e; color: #fff; } .a11y-widget__tile.is-active:hover { background: #084bb8; } .a11y-widget__tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .a11y-widget__tile-icon svg { width: 26px; height: 26px; } .a11y-widget__tile-label { display: block; font-size: 12px; } /* Footer (reset button + accessibility-statement link) */ .a11y-widget__footer { padding: 12px 14px 14px; border-top: 1px solid #eef1f6; display: flex; flex-direction: column; gap: 10px; } .a11y-widget__statement { display: inline-block; text-align: center; font-size: 13px; font-weight: 500; color: #0c5adb; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.18s ease, color 0.18s ease; } .a11y-widget__statement:hover, .a11y-widget__statement:focus-visible { color: #084bb8; border-bottom-color: #0c5adb; outline: none; } .a11y-widget__reset { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: #fff; color: #b41e2a; border: 2px solid #f5c2c7; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .a11y-widget__reset:hover, .a11y-widget__reset:focus-visible { background: #fdecee; border-color: #b41e2a; outline: none; } .a11y-widget__reset svg { width: 16px; height: 16px; } /* ============================================================ Global feature overrides — toggled by classes on ============================================================ */ /* --- Font size --- The theme uses pixel-based font-sizes throughout, so changing the root font-size doesn't propagate. Use the `zoom` CSS property on body — widely supported (Chrome, Edge, Safari, Firefox 126+) and scales all text regardless of how it's sized. Exempt the accessibility widget so it doesn't grow when the user zooms the page. */ html.a11y-font-smaller body { zoom: 0.9; } html.a11y-font-larger body { zoom: 1.12; } html.a11y-font-largest body { zoom: 1.25; } html.a11y-font-smaller .a11y-widget, html.a11y-font-larger .a11y-widget, html.a11y-font-largest .a11y-widget { zoom: 1; } /* --- Contrast modes --- */ /* High contrast: dark text on white, bold borders */ html.a11y-contrast-high body, html.a11y-contrast-high body * { background-color: #ffffff !important; color: #000000 !important; border-color: #000000 !important; text-shadow: none !important; box-shadow: none !important; } html.a11y-contrast-high body a, html.a11y-contrast-high body a * { color: #0000ee !important; } /* Inverted colors — apply the filter to body's direct children (excluding the widget itself + script/style tags) instead of body directly. Applying filter to body would create a containing block for `position: fixed` descendants, which would tear the widget away from the viewport corner and (combined with the inversion) make it look like it disappeared. */ html.a11y-contrast-inverted body > *:not(.a11y-widget):not(script):not(style):not(noscript) { filter: invert(1) hue-rotate(180deg); } /* Un-invert media inside the inverted regions so photos still look right. */ html.a11y-contrast-inverted img, html.a11y-contrast-inverted video, html.a11y-contrast-inverted picture, html.a11y-contrast-inverted iframe, html.a11y-contrast-inverted [style*="background-image"] { filter: invert(1) hue-rotate(180deg); } /* Keep the widget itself fully un-inverted regardless of nesting. */ html.a11y-contrast-inverted .a11y-widget, html.a11y-contrast-inverted .a11y-widget * { filter: none !important; } /* Light background — force white surfaces */ html.a11y-contrast-light body, html.a11y-contrast-light body * { background-color: #ffffff !important; background-image: none !important; } html.a11y-contrast-light body, html.a11y-contrast-light body p, html.a11y-contrast-light body li, html.a11y-contrast-light body span, html.a11y-contrast-light body div { color: #232323 !important; } /* --- Link highlighting --- */ html.a11y-links a { text-decoration: underline !important; background: #fff8b0 !important; color: #1a1a1a !important; outline: 1px dashed #b8860b; outline-offset: 2px; } /* --- Heading highlighting --- */ html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3, html.a11y-headings h4, html.a11y-headings h5, html.a11y-headings h6 { outline: 2px solid #0c5adb !important; outline-offset: 4px; background: rgba(12, 90, 219, 0.08) !important; } /* --- Readable font (more legible system font + spacing) --- */ html.a11y-readable, html.a11y-readable body, html.a11y-readable body * { font-family: "Verdana", "Heebo", "Arial", sans-serif !important; letter-spacing: 0.5px !important; line-height: 1.65 !important; word-spacing: 1px !important; } /* --- Big cursor — inline SVG cursor at 2x size --- */ html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 7-6 1-2 6z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 0 0, auto !important; } html.a11y-cursor a, html.a11y-cursor button, html.a11y-cursor [role="button"], html.a11y-cursor input, html.a11y-cursor textarea, html.a11y-cursor select { cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M9 2v8H5l7 12 7-12h-4V2z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 8 0, pointer !important; } /* --- Pause animations --- */ html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Mobile tweaks — on narrow screens there isn't room for a side panel next to a mid-edge trigger, so float the panel away from the trigger slightly and let it overlay most of the width. */ @media (max-width: 480px) { .a11y-widget { left: 12px; } .a11y-widget:not(.a11y-widget--rtl) { left: auto; right: 12px; } .a11y-widget__trigger { width: 50px; height: 50px; } .a11y-widget--rtl .a11y-widget__panel { left: calc(100% + 10px); } .a11y-widget:not(.a11y-widget--rtl) .a11y-widget__panel { right: calc(100% + 10px); } .a11y-widget__panel { width: calc(100vw - 80px); max-width: 340px; } .a11y-widget__grid { grid-template-columns: 1fr 1fr; } }