/** * OZ Software - accessibility layer. * Israeli standard 5568 / WCAG 2.0 AA. * * Two parts: * 1. The widget chrome (#ozs-a11y) - the floating button and its panel. * 2. The adjustment classes on that the widget switches on and off. * * Everything is prefixed ozs-a11y so it cannot collide with Elementor or a plugin. */ /* ------------------------------------------------------------------ 1. Widget chrome ------------------------------------------------------------------ */ #ozs-a11y { --ozs-ink: #1c1c28; --ozs-ink-soft: #4a4a57; --ozs-surface: #ffffff; --ozs-surface-2: #f4f4f7; --ozs-line: #767680; --ozs-line-soft: #d9d9e0; --ozs-brand: #4b51a3; --ozs-brand-deep: #3a3f80; --ozs-on: #39bead; --ozs-radius: 12px; /* Layered above the site header (z-index 10) and Elementor popups (9999+). A global assistive overlay has to win; the value is deliberate, not a guess. */ --ozs-z: 2147483000; font-family: "Montserrat", Arial, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; color: var(--ozs-ink); } #ozs-a11y *, #ozs-a11y *::before, #ozs-a11y *::after { box-sizing: border-box; } /* Scoped reset. The widget drops into a theme that also loads Bootstrap and Elementor, both of which style bare p / ul / li / h2 / h3 / button. Those rules beat inheritance, so the widget states its own values with an id in the selector and stops the page's typography from leaking into the panel. */ #ozs-a11y p, #ozs-a11y ul, #ozs-a11y li, #ozs-a11y h2, #ozs-a11y h3, #ozs-a11y span, #ozs-a11y button, #ozs-a11y a, #ozs-a11y strong { font-family: inherit; letter-spacing: normal; word-spacing: normal; text-transform: none; text-shadow: none; float: none; max-width: none; min-width: 0; } #ozs-a11y ul { list-style: disc; } /* Explicit sizes, id-scoped so a bare `p { font-size: 20px }` in the theme cannot reach inside the panel. */ #ozs-a11y .ozs-a11y__title { font-size: 17px; line-height: 1.3; } #ozs-a11y .ozs-a11y__legend { font-size: 12px; line-height: 1.3; } #ozs-a11y .ozs-a11y__opt, #ozs-a11y .ozs-a11y__opt span { font-size: 12.5px; line-height: 1.25; } #ozs-a11y .ozs-a11y__value { font-size: 15px; line-height: 1.5; } #ozs-a11y .ozs-a11y__action, #ozs-a11y .ozs-a11y__back { font-size: 13px; line-height: 1.4; } #ozs-a11y .ozs-a11y__statement p, #ozs-a11y .ozs-a11y__statement li, #ozs-a11y .ozs-a11y__statement a, #ozs-a11y .ozs-a11y__statement strong { font-size: 13.5px; line-height: 1.65; } #ozs-a11y .ozs-a11y__statement h3 { font-size: 15px; line-height: 1.35; } #ozs-a11y .ozs-a11y__step--small { font-size: 14px; } #ozs-a11y .ozs-a11y__step--large { font-size: 21px; } /* Visually hidden, still read by screen readers. */ .ozs-a11y__sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Floating toggle ------------------------------------------------ */ /* Every box property here is !important and id-scoped on purpose. Elementor and the parent theme both ship blanket `button` rules that otherwise win, and on the live site they flattened this control to a transparent 64x56 block with 8px/16px padding. A drop-in assistive overlay has to render identically no matter what the surrounding theme declares. */ #ozs-a11y .ozs-a11y__toggle { position: fixed !important; bottom: 20px !important; z-index: var(--ozs-z) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 56px !important; height: 56px !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border: 2px solid #ffffff !important; border-radius: 50% !important; background: var(--ozs-brand) !important; color: #ffffff !important; cursor: pointer !important; overflow: visible !important; text-decoration: none !important; box-shadow: 0 4px 16px rgba(28, 28, 40, 0.28) !important; transition: background-color 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1); -webkit-appearance: none !important; appearance: none !important; } #ozs-a11y .ozs-a11y__toggle:hover { background: var(--ozs-brand-deep) !important; transform: scale(1.06); } #ozs-a11y .ozs-a11y__toggle:active { transform: scale(0.97); } #ozs-a11y .ozs-a11y__toggle svg { width: 30px !important; height: 30px !important; max-width: none !important; display: block !important; fill: currentColor !important; margin: 0 !important; } /* Anchored right in both languages, deliberately. In an RTL document Chrome puts the vertical scrollbar on the LEFT, and the containing block for position:fixed starts behind it - so `left: 20px` puts the button partly under the scrollbar for Hebrew visitors on any browser with classic (non-overlay) scrollbars. `right` is unaffected, and bottom-right is the convention Israeli visitors already expect. */ #ozs-a11y .ozs-a11y__toggle { right: 20px !important; left: auto !important; } /* --- Panel ---------------------------------------------------------- */ #ozs-a11y .ozs-a11y__panel { position: fixed !important; bottom: 88px !important; right: 20px !important; left: auto !important; z-index: var(--ozs-z) !important; width: 340px !important; max-width: calc(100vw - 32px) !important; max-height: calc(100vh - 120px) !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; border: 1px solid var(--ozs-line-soft) !important; border-radius: var(--ozs-radius) !important; background: var(--ozs-surface) !important; box-shadow: 0 12px 40px rgba(28, 28, 40, 0.24) !important; overflow: hidden !important; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 200ms; } #ozs-a11y .ozs-a11y__panel.is-open { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; } html[dir="rtl"] .ozs-a11y__panel, html[lang^="he"] .ozs-a11y__panel { text-align: right; } html[dir="ltr"] .ozs-a11y__panel, html[lang^="en"] .ozs-a11y__panel { text-align: left; } .ozs-a11y__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; background: var(--ozs-brand); color: #ffffff; } .ozs-a11y__title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; color: #ffffff; font-family: inherit; } .ozs-a11y__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #ffffff; cursor: pointer; transition: background-color 160ms ease-out; } .ozs-a11y__close:hover { background: rgba(255, 255, 255, 0.18); } .ozs-a11y__close svg { width: 18px; height: 18px; display: block; } .ozs-a11y__body { flex: 1 1 auto; padding: 14px 16px 4px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .ozs-a11y__group + .ozs-a11y__group { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ozs-line-soft); } .ozs-a11y__legend { margin: 0 0 9px; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--ozs-ink-soft); font-family: inherit; } /* --- Text-size stepper ---------------------------------------------- */ /* Forced LTR: "A-" and "A+" are a numeric control, and bidi reordering would render them as "-A" / "+A" on the Hebrew side of the site. */ .ozs-a11y__stepper { display: flex; align-items: stretch; gap: 8px; direction: ltr; } .ozs-a11y__step { flex: 0 0 52px; display: flex; align-items: center; justify-content: center; height: 44px; padding: 0; border: 1px solid var(--ozs-line); border-radius: 10px; background: var(--ozs-surface); color: var(--ozs-ink); font-family: inherit; font-weight: 700; cursor: pointer; transition: background-color 160ms ease-out, border-color 160ms ease-out; } .ozs-a11y__step:hover:not(:disabled) { background: var(--ozs-surface-2); border-color: var(--ozs-ink); } .ozs-a11y__step:disabled { opacity: 0.45; cursor: not-allowed; } .ozs-a11y__step--small { font-size: 14px; } .ozs-a11y__step--large { font-size: 21px; } .ozs-a11y__value { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 10px; background: var(--ozs-surface-2); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ozs-ink); } /* --- Option toggles -------------------------------------------------- */ .ozs-a11y__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ozs-a11y__opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 78px; padding: 10px 6px; border: 1px solid var(--ozs-line); border-radius: 10px; background: var(--ozs-surface); color: var(--ozs-ink); font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer; transition: background-color 160ms ease-out, border-color 160ms ease-out; } .ozs-a11y__opt:hover { background: var(--ozs-surface-2); border-color: var(--ozs-ink); } .ozs-a11y__opt svg { width: 22px; height: 22px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Selected state: teal fill with dark ink reads 7.3:1 - the accent carries state, never decoration. */ .ozs-a11y__opt[aria-pressed="true"] { background: var(--ozs-on); border-color: #1f8d80; color: var(--ozs-ink); } .ozs-a11y__opt[aria-pressed="true"]:hover { background: #2fae9e; } /* --- Footer actions --------------------------------------------------- */ .ozs-a11y__foot { flex: 0 0 auto; display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--ozs-line-soft); background: var(--ozs-surface-2); } .ozs-a11y__action { flex: 1 1 0; min-height: 42px; padding: 8px 10px; border: 1px solid var(--ozs-line); border-radius: 10px; background: var(--ozs-surface); color: var(--ozs-ink); font-family: inherit; font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 160ms ease-out, border-color 160ms ease-out; } .ozs-a11y__action:hover { background: var(--ozs-surface-2); border-color: var(--ozs-ink); color: var(--ozs-ink); } /* --- Statement view ---------------------------------------------------- */ .ozs-a11y__statement { padding: 14px 16px 18px; font-size: 13.5px; line-height: 1.65; color: var(--ozs-ink); } .ozs-a11y__statement h3 { margin: 0 0 8px; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--ozs-ink); } .ozs-a11y__statement p { margin: 0 0 10px; color: var(--ozs-ink); } .ozs-a11y__statement ul { margin: 0 0 10px; padding-inline-start: 20px; } html[dir="rtl"] .ozs-a11y__statement ul, html[lang^="he"] .ozs-a11y__statement ul { padding-right: 20px; padding-left: 0; } html[dir="ltr"] .ozs-a11y__statement ul, html[lang^="en"] .ozs-a11y__statement ul { padding-left: 20px; padding-right: 0; } .ozs-a11y__statement li { margin: 0 0 4px; } .ozs-a11y__statement a { color: var(--ozs-brand); text-decoration: underline; } .ozs-a11y__back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-bottom: 10px; padding: 6px 12px; border: 1px solid var(--ozs-line); border-radius: 10px; background: var(--ozs-surface); color: var(--ozs-ink); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .ozs-a11y__back:hover { background: var(--ozs-surface-2); border-color: var(--ozs-ink); } /* --- Focus ring ------------------------------------------------------- */ /* The panel takes focus when it opens so screen readers land inside the dialog; that programmatic move should not paint a ring. */ #ozs-a11y-panel:focus, #ozs-a11y-panel:focus-visible { outline: none; } #ozs-a11y :focus { outline: 3px solid var(--ozs-ink); outline-offset: 2px; } .ozs-a11y__head :focus, .ozs-a11y__toggle:focus { outline: 3px solid #ffce35; outline-offset: 3px; } /* Mouse users do not need the ring; keyboard users must have it. */ #ozs-a11y :focus:not(:focus-visible) { outline: none; } #ozs-a11y :focus-visible { outline: 3px solid var(--ozs-ink); outline-offset: 2px; } .ozs-a11y__head :focus-visible, .ozs-a11y__toggle:focus-visible { outline: 3px solid #ffce35; outline-offset: 3px; } /* --- Theme-proofing for the controls inside the panel --------------------- Same reason as the toggle: Elementor and the parent theme style bare `button` elements, which would otherwise repaint every control in here. */ #ozs-a11y .ozs-a11y__head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 16px !important; margin: 0 !important; background: var(--ozs-brand) !important; color: #ffffff !important; border: 0 !important; border-radius: 0 !important; } #ozs-a11y .ozs-a11y__body { padding: 14px 16px 4px !important; margin: 0 !important; background: transparent !important; overflow-y: auto !important; } #ozs-a11y .ozs-a11y__foot { display: flex !important; padding: 12px 16px !important; margin: 0 !important; background: var(--ozs-surface-2) !important; border-top: 1px solid var(--ozs-line-soft) !important; border-radius: 0 !important; } #ozs-a11y .ozs-a11y__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; } #ozs-a11y .ozs-a11y__stepper { display: flex !important; gap: 8px !important; direction: ltr !important; margin: 0 !important; padding: 0 !important; } #ozs-a11y .ozs-a11y__close, #ozs-a11y .ozs-a11y__step, #ozs-a11y .ozs-a11y__opt, #ozs-a11y .ozs-a11y__action, #ozs-a11y .ozs-a11y__back { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; cursor: pointer !important; max-width: none !important; min-width: 0 !important; width: auto !important; background-image: none !important; } #ozs-a11y .ozs-a11y__close { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; flex: 0 0 auto !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background-color: transparent !important; color: #ffffff !important; } #ozs-a11y .ozs-a11y__close svg { width: 18px !important; height: 18px !important; display: block !important; } #ozs-a11y .ozs-a11y__step { flex: 0 0 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 44px !important; padding: 0 !important; border: 1px solid var(--ozs-line) !important; border-radius: 10px !important; background-color: var(--ozs-surface) !important; color: var(--ozs-ink) !important; font-weight: 700 !important; } #ozs-a11y .ozs-a11y__value { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 44px !important; margin: 0 !important; padding: 0 !important; border-radius: 10px !important; background-color: var(--ozs-surface-2) !important; color: var(--ozs-ink) !important; } #ozs-a11y .ozs-a11y__opt { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; min-height: 78px !important; height: auto !important; padding: 10px 6px !important; border: 1px solid var(--ozs-line) !important; border-radius: 10px !important; background-color: var(--ozs-surface) !important; color: var(--ozs-ink) !important; text-align: center !important; } #ozs-a11y .ozs-a11y__opt[aria-pressed="true"] { background-color: var(--ozs-on) !important; border-color: #1f8d80 !important; color: var(--ozs-ink) !important; } #ozs-a11y .ozs-a11y__opt svg { width: 22px !important; height: 22px !important; flex: 0 0 auto !important; max-width: none !important; stroke: currentColor !important; fill: none !important; } #ozs-a11y .ozs-a11y__action, #ozs-a11y .ozs-a11y__back { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 42px !important; height: auto !important; padding: 8px 10px !important; border: 1px solid var(--ozs-line) !important; border-radius: 10px !important; background-color: var(--ozs-surface) !important; color: var(--ozs-ink) !important; } #ozs-a11y .ozs-a11y__action { flex: 1 1 0 !important; } #ozs-a11y .ozs-a11y__back { display: inline-flex !important; flex: 0 0 auto !important; margin-bottom: 10px !important; padding: 6px 12px !important; min-height: 40px !important; } #ozs-a11y .ozs-a11y__statement { padding: 14px 16px 18px !important; margin: 0 !important; background: transparent !important; color: var(--ozs-ink) !important; } /* --- Small screens: the panel becomes a bottom sheet ------------------- */ @media (max-width: 600px) { /* Width stays fixed and only clamps on genuinely tiny screens; stretching it edge to edge with `left` would reintroduce the RTL scrollbar problem. */ #ozs-a11y .ozs-a11y__panel { right: 12px !important; left: auto !important; bottom: 84px !important; max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 108px) !important; } #ozs-a11y .ozs-a11y__toggle { right: 16px !important; bottom: 16px !important; } } /* --- Reading guide ----------------------------------------------------- Lives inside #ozs-a11y so the grayscale filter, which is applied to the page's other top-level blocks, leaves it alone. */ .ozs-a11y-guide { position: fixed; left: 0; right: 0; height: 5px; background: #4b51a3; box-shadow: 0 0 0 1px #ffffff; pointer-events: none; z-index: calc(var(--ozs-z, 2147483000) - 1); display: none; } html.ozs-a11y-guide-on .ozs-a11y-guide { display: block; } /* --- Skip link ---------------------------------------------------------- */ .ozs-a11y-skip { position: fixed; top: -100px; left: 50%; transform: translateX(-50%); z-index: 2147483001; padding: 12px 22px; border: 2px solid #ffffff; border-radius: 0 0 10px 10px; background: #1c1c28; color: #ffffff; font-family: "Montserrat", Arial, sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; transition: top 160ms cubic-bezier(0.22, 1, 0.36, 1); } .ozs-a11y-skip:focus { top: 0; color: #ffffff; outline: 3px solid #ffce35; outline-offset: -6px; } /* The site header is fixed at 110px; do not let it swallow the anchor target. */ #ozs-main-content:focus { outline: none; scroll-margin-top: 130px; } /* ------------------------------------------------------------------ 2. Site-wide baseline (always on) ------------------------------------------------------------------ */ /* WCAG 2.4.7 - a visible focus indicator on every interactive element. Only appears for keyboard users, so mouse users see no change. */ body a:focus-visible, body button:focus-visible, body input:focus-visible, body select:focus-visible, body textarea:focus-visible, body summary:focus-visible, body [tabindex]:focus-visible { outline: 3px solid #1c1c28 !important; outline-offset: 2px !important; } .ozs-header a:focus-visible, .ozs-header button:focus-visible, .site-header a:focus-visible, .site-header button:focus-visible { outline: 3px solid #ffce35 !important; outline-offset: 3px !important; } /* ------------------------------------------------------------------ 3. Adjustment classes, switched on by the widget ------------------------------------------------------------------ */ /* --- Highlight links ---------------------------------------------------- */ html.ozs-a11y-links a:not(.ozs-a11y-skip) { text-decoration: underline !important; text-underline-offset: 3px !important; font-weight: 700 !important; outline: 1px dashed currentColor !important; outline-offset: 2px !important; } /* --- Highlight headings -------------------------------------------------- */ html.ozs-a11y-headings h1, html.ozs-a11y-headings h2, html.ozs-a11y-headings h3, html.ozs-a11y-headings h4, html.ozs-a11y-headings h5, html.ozs-a11y-headings h6 { outline: 2px solid #4b51a3 !important; outline-offset: 3px !important; background-color: rgba(75, 81, 163, 0.07) !important; } /* The widget is chrome, not page content: it must never highlight itself. */ html.ozs-a11y-headings #ozs-a11y h1, html.ozs-a11y-headings #ozs-a11y h2, html.ozs-a11y-headings #ozs-a11y h3, html.ozs-a11y-headings #ozs-a11y h4, html.ozs-a11y-headings #ozs-a11y h5, html.ozs-a11y-headings #ozs-a11y h6 { outline: none !important; background-color: transparent !important; } html.ozs-a11y-links #ozs-a11y a { outline: none !important; font-weight: inherit !important; } /* --- Readable font -------------------------------------------------------- Arial and Tahoma both carry a complete Hebrew glyph set and are installed everywhere, so this needs no webfont download. */ html.ozs-a11y-font body, html.ozs-a11y-font body * { font-family: Arial, "Segoe UI", Tahoma, "Helvetica Neue", sans-serif !important; letter-spacing: normal !important; } html.ozs-a11y-font #ozs-a11y, html.ozs-a11y-font #ozs-a11y * { font-family: Arial, "Segoe UI", Tahoma, sans-serif !important; } /* --- Line spacing ---------------------------------------------------------- */ html.ozs-a11y-lh p, html.ozs-a11y-lh li, html.ozs-a11y-lh dd, html.ozs-a11y-lh dt, html.ozs-a11y-lh td, html.ozs-a11y-lh th, html.ozs-a11y-lh blockquote, html.ozs-a11y-lh figcaption, html.ozs-a11y-lh label, html.ozs-a11y-lh h1, html.ozs-a11y-lh h2, html.ozs-a11y-lh h3, html.ozs-a11y-lh h4, html.ozs-a11y-lh h5, html.ozs-a11y-lh h6, html.ozs-a11y-lh .excerpt { line-height: 2 !important; } html.ozs-a11y-lh #ozs-a11y, html.ozs-a11y-lh #ozs-a11y * { line-height: 1.5 !important; } /* --- Letter spacing ---------------------------------------------------------- */ html.ozs-a11y-ls p, html.ozs-a11y-ls li, html.ozs-a11y-ls dd, html.ozs-a11y-ls dt, html.ozs-a11y-ls td, html.ozs-a11y-ls th, html.ozs-a11y-ls blockquote, html.ozs-a11y-ls figcaption, html.ozs-a11y-ls label, html.ozs-a11y-ls a, html.ozs-a11y-ls h1, html.ozs-a11y-ls h2, html.ozs-a11y-ls h3, html.ozs-a11y-ls h4, html.ozs-a11y-ls h5, html.ozs-a11y-ls h6, html.ozs-a11y-ls .excerpt { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } html.ozs-a11y-ls #ozs-a11y, html.ozs-a11y-ls #ozs-a11y * { letter-spacing: normal !important; word-spacing: normal !important; } /* --- Grayscale --------------------------------------------------------------- Applied to the page's top-level blocks rather than , because a filter on an ancestor would re-anchor position:fixed and detach the widget. */ html.ozs-a11y-mono body > *:not(#ozs-a11y) { -webkit-filter: grayscale(100%); filter: grayscale(100%); } /* --- Dark contrast ------------------------------------------------------------ */ html.ozs-a11y-dark, html.ozs-a11y-dark body, html.ozs-a11y-dark body * { background-image: none !important; background-color: #000000 !important; color: #ffffff !important; border-color: #ffffff !important; text-shadow: none !important; box-shadow: none !important; } html.ozs-a11y-dark body a, html.ozs-a11y-dark body a * { color: #ffce35 !important; text-decoration: underline !important; } html.ozs-a11y-dark body button, html.ozs-a11y-dark body input, html.ozs-a11y-dark body select, html.ozs-a11y-dark body textarea { border: 1px solid #ffffff !important; } html.ozs-a11y-dark body img, html.ozs-a11y-dark body video, html.ozs-a11y-dark body iframe { background-color: transparent !important; } html.ozs-a11y-dark body svg * { background-color: transparent !important; } /* --- Light contrast --------------------------------------------------------- */ html.ozs-a11y-light, html.ozs-a11y-light body, html.ozs-a11y-light body * { background-image: none !important; background-color: #ffffff !important; color: #000000 !important; border-color: #000000 !important; text-shadow: none !important; box-shadow: none !important; } html.ozs-a11y-light body a, html.ozs-a11y-light body a * { color: #0b3ea8 !important; text-decoration: underline !important; } html.ozs-a11y-light body button, html.ozs-a11y-light body input, html.ozs-a11y-light body select, html.ozs-a11y-light body textarea { border: 1px solid #000000 !important; } html.ozs-a11y-light body img, html.ozs-a11y-light body video, html.ozs-a11y-light body iframe { background-color: transparent !important; } /* --- The widget keeps its own colours in every contrast mode ------------------- Higher specificity (one id) than the blanket rules above, so these win. */ html.ozs-a11y-dark #ozs-a11y, html.ozs-a11y-light #ozs-a11y, html.ozs-a11y-dark #ozs-a11y *, html.ozs-a11y-light #ozs-a11y * { background-color: transparent !important; color: #1c1c28 !important; border-color: #767680 !important; text-decoration: none !important; } html.ozs-a11y-dark #ozs-a11y .ozs-a11y__panel, html.ozs-a11y-light #ozs-a11y .ozs-a11y__panel { background-color: #ffffff !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important; } html.ozs-a11y-dark #ozs-a11y .ozs-a11y__toggle, html.ozs-a11y-light #ozs-a11y .ozs-a11y__toggle, html.ozs-a11y-dark #ozs-a11y .ozs-a11y__head, html.ozs-a11y-light #ozs-a11y .ozs-a11y__head { background-color: #4b51a3 !important; color: #ffffff !important; border-color: #ffffff !important; } html.ozs-a11y-dark #ozs-a11y .ozs-a11y__title, html.ozs-a11y-light #ozs-a11y .ozs-a11y__title, html.ozs-a11y-dark #ozs-a11y .ozs-a11y__close, html.ozs-a11y-light #ozs-a11y .ozs-a11y__close { color: #ffffff !important; } /* Both glyphs are drawn with currentColor, so resetting the colour is enough - overriding fill/stroke directly would defeat the close icon's fill="none". */ html.ozs-a11y-dark #ozs-a11y .ozs-a11y__toggle svg, html.ozs-a11y-light #ozs-a11y .ozs-a11y__toggle svg, html.ozs-a11y-dark #ozs-a11y .ozs-a11y__head svg, html.ozs-a11y-light #ozs-a11y .ozs-a11y__head svg { color: #ffffff !important; } html.ozs-a11y-dark #ozs-a11y .ozs-a11y-guide { background-color: #ffce35 !important; } html.ozs-a11y-light #ozs-a11y .ozs-a11y-guide { background-color: #4b51a3 !important; } html.ozs-a11y-dark #ozs-a11y .ozs-a11y__step, html.ozs-a11y-light #ozs-a11y .ozs-a11y__step, html.ozs-a11y-dark #ozs-a11y .ozs-a11y__opt, html.ozs-a11y-light #ozs-a11y .ozs-a11y__opt, html.ozs-a11y-dark #ozs-a11y .ozs-a11y__action, html.ozs-a11y-light #ozs-a11y .ozs-a11y__action, html.ozs-a11y-dark #ozs-a11y .ozs-a11y__back, html.ozs-a11y-light #ozs-a11y .ozs-a11y__back { background-color: #ffffff !important; color: #1c1c28 !important; } html.ozs-a11y-dark #ozs-a11y .ozs-a11y__value, html.ozs-a11y-light #ozs-a11y .ozs-a11y__value, html.ozs-a11y-dark #ozs-a11y .ozs-a11y__foot, html.ozs-a11y-light #ozs-a11y .ozs-a11y__foot { background-color: #f4f4f7 !important; } html.ozs-a11y-dark #ozs-a11y .ozs-a11y__opt[aria-pressed="true"], html.ozs-a11y-light #ozs-a11y .ozs-a11y__opt[aria-pressed="true"] { background-color: #39bead !important; border-color: #1f8d80 !important; } html.ozs-a11y-dark #ozs-a11y .ozs-a11y__statement a, html.ozs-a11y-light #ozs-a11y .ozs-a11y__statement a { color: #4b51a3 !important; text-decoration: underline !important; } /* --- Large cursor --------------------------------------------------------- */ html.ozs-a11y-cursor, html.ozs-a11y-cursor body, html.ozs-a11y-cursor body * { cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4 L8 38 L16 30 L21 42 L28 39 L23 27 L34 27 Z' fill='%23ffffff' stroke='%23000000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 4, auto !important; } html.ozs-a11y-cursor body a, html.ozs-a11y-cursor body button, html.ozs-a11y-cursor body [role="button"], html.ozs-a11y-cursor body label, html.ozs-a11y-cursor body summary { cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M18 4 C15 4 14 6 14 9 L14 24 L12 22 C10 20 7 20 5 22 C3 24 3 27 5 29 L15 42 C17 44 19 45 22 45 L33 45 C38 45 41 42 41 37 L41 22 C41 19 39 17 36 17 C35 17 34 17 33 18 C33 15 31 14 29 14 C28 14 27 14 26 15 C25 12 23 11 21 11 C20 11 19 11 18 12 L18 9 C18 6 21 4 18 4 Z' fill='%23ffffff' stroke='%23000000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 14 4, pointer !important; } /* --- Stop animations -------------------------------------------------------- */ html.ozs-a11y-noanim, html.ozs-a11y-noanim body, html.ozs-a11y-noanim body *, html.ozs-a11y-noanim body *::before, html.ozs-a11y-noanim body *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* The site header is a fixed background image; freeze any parallax on it too. */ html.ozs-a11y-noanim body * { background-attachment: scroll !important; } /* ------------------------------------------------------------------ 4. Respect the OS-level reduced-motion preference ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .ozs-a11y__toggle, .ozs-a11y__panel, .ozs-a11y__close, .ozs-a11y__opt, .ozs-a11y__step, .ozs-a11y__action, .ozs-a11y-skip { transition-duration: 0.01ms !important; } .ozs-a11y__toggle:hover, .ozs-a11y__toggle:active { transform: none; } .ozs-a11y__panel { transform: none; } } /* ------------------------------------------------------------------ 5. Print - the widget is screen furniture, never paper ------------------------------------------------------------------ */ @media print { #ozs-a11y, .ozs-a11y-skip, .ozs-a11y-guide { display: none !important; } }