/** * Seven Accessibility Pro — widget + accessibility mode styles. * * Design rules: * 1. Every mode is a class on (svn-axp-*). We only ADD layers on top * of Elementor CSS — never reset its layout, so the design survives * every combination of modes. * 2. WIDGET IMMUNITY: no accessibility mode may restyle the plugin's own UI. * Filters are applied to body's direct children EXCLUDING the widget, * and an immunity block re-asserts the widget look with #id specificity. * 3. THEME IMMUNITY: every chrome selector is anchored to #svn-axp-root / * #svn-axp-structure. ID specificity (1,x,x) outranks Elementor Kit * global styles like `.elementor-kit-12 button { color: ... }` (0,1,1), * which otherwise repaint our buttons with the site's palette. */ :root { --svn-axp-color: #1a3e8f; /* Brand blue (overridden from settings). */ --svn-axp-sky: #eaf6fd; /* Seven light-blue — feature card bg. */ --svn-axp-sky-hover: #d9eefa; --svn-axp-ink: #1f2937; /* Dark gray text. */ --svn-axp-panel-width: 400px; --svn-axp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* ------------------------------------------------------------------ * * Box-model + native-button reset, scoped to plugin markup only. * ------------------------------------------------------------------ */ #svn-axp-root, #svn-axp-root *, #svn-axp-root *::before, #svn-axp-root *::after, #svn-axp-structure, #svn-axp-structure *, .svn-axp-skip-link { box-sizing: border-box; } /* Neutralize theme/Elementor-Kit global button styling inside the widget. */ #svn-axp-root button, #svn-axp-structure button { appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: none; box-shadow: none; text-shadow: none; text-transform: none; text-decoration: none; letter-spacing: normal; font-family: var(--svn-axp-font); transition: none; } /* ------------------------------------------------------------------ * * Utility: screen-reader-only (also used by injected labels/H1) * ------------------------------------------------------------------ */ .svn-axp-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------ * * Skip link: styled by AccessibilityEngine::print_skip_link_css() * (inline critical CSS in ) — the markup and its styles must live * in the same module, independent of this stylesheet. Do NOT re-style * .svn-axp-skip-link here. * ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ * * Floating toggle button * ------------------------------------------------------------------ */ /* * z-index layering vs AdSense: anchor/side-rail ads use the int32 maximum * (2147483647) as an INLINE style — no higher number exists, and at a tie * the later DOM node (the dynamically-appended ad) wins. So the decisive * move is demoting the ad containers themselves: CSS !important beats * inline styles. Stacking-only change (ads stay fully visible above page * content) — AdSense-policy safe. The accessibility UI is a legally * mandated facility; it must never sit under an ad. */ ins.adsbygoogle { z-index: 2147483000 !important; } /* * CRITICAL: the root creates the stacking context for the whole widget — * against ads, ONLY this value matters (the panel's z is internal). It * must be the int32 max; ties are then broken by DOM order, and widget.js * keeps the root as the LAST element in . */ #svn-axp-root { position: fixed !important; bottom: 24px; z-index: 2147483647; font-family: var(--svn-axp-font); font-size: 14px; line-height: 1.4; color: var(--svn-axp-ink); } #svn-axp-root[hidden] { display: none !important; } #svn-axp-root.svn-axp-side-right { right: 24px; } #svn-axp-root.svn-axp-side-left { left: 24px; } #svn-axp-root .svn-axp-toggle { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border-radius: 14px; background: var(--svn-axp-color); color: #fff; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } #svn-axp-root .svn-axp-toggle:focus-visible { outline: 3px solid #000; outline-offset: 3px; } #svn-axp-root .svn-axp-toggle svg { width: 30px; height: 30px; } #svn-axp-root .svn-axp-toggle img { max-width: 34px; max-height: 34px; } /* ------------------------------------------------------------------ * * Panel — floating rounded drawer, never cut off. * ------------------------------------------------------------------ */ #svn-axp-root .svn-axp-panel { position: fixed !important; top: 8px !important; bottom: 8px !important; width: var(--svn-axp-panel-width); max-width: calc(100vw - 16px) !important; z-index: 2147483647; display: flex; flex-direction: column; overflow: hidden; background: #f2f7fc; color: var(--svn-axp-ink); border-radius: 20px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35); } /* * CRITICAL: the author-level `display: flex` above beats the browser's * built-in [hidden] { display: none } — without this rule the panel * would be permanently visible. */ #svn-axp-root .svn-axp-panel[hidden] { display: none !important; } /* * Physical right/left on purpose (NOT inset-inline-*): on RTL sites * (dir="rtl" on ) logical properties flip and would anchor the * panel off-screen. !important defeats theme-level overrides. */ #svn-axp-root.svn-axp-side-right .svn-axp-panel { right: 8px !important; left: auto !important; } #svn-axp-root.svn-axp-side-left .svn-axp-panel { left: 8px !important; right: auto !important; } /* --- Header bar ---------------------------------------------------- */ #svn-axp-root .svn-axp-panel-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; background: var(--svn-axp-color); color: #fff; } #svn-axp-root .svn-axp-panel-brand { display: flex; align-items: center; gap: 10px; min-width: 0; } #svn-axp-root .svn-axp-brand-ico { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--svn-axp-ink); } #svn-axp-root .svn-axp-brand-ico svg { width: 20px; height: 20px; } #svn-axp-root .svn-axp-panel-title { font-weight: 800; font-size: 17px; color: #fff; } #svn-axp-root .svn-axp-panel-actions { display: flex; align-items: center; gap: 4px; } /* Round "pill" action buttons — visually distinct from Ally's squares. */ #svn-axp-root .svn-axp-hbtn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; cursor: pointer; } #svn-axp-root .svn-axp-hbtn:hover { background: #fff; color: var(--svn-axp-color); } #svn-axp-root .svn-axp-hbtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } #svn-axp-root .svn-axp-hbtn svg { width: 20px; height: 20px; } /* --- Scrollable body with white section cards ---------------------- */ #svn-axp-root .svn-axp-panel-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 12px; } #svn-axp-root .svn-axp-group { border: 0; border-radius: 16px; margin: 0 0 12px; padding: 14px; min-width: 0; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); } /* * float normalizes the browser's special rendering (it is drawn * half-outside the fieldset box by default, which made the section titles * look detached and misaligned). With float + width:100% it behaves like * a regular heading row inside the card. */ #svn-axp-root .svn-axp-group legend { float: right; float: inline-start; width: 100%; padding: 0; margin: 0 0 10px; /* !important: some themes style with !important rules of their own; the section titles must match the button labels exactly. */ font-family: var(--svn-axp-font) !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1.4; color: var(--svn-axp-ink) !important; letter-spacing: normal !important; text-align: start; } /* * minmax(0, 1fr) gives every button a predictable equal width: * a plain 1fr lets long labels stretch their column and overflow. */ #svn-axp-root .svn-axp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; clear: both; /* sits below the floated legend */ } /* --- Feature cards: Seven light-blue bg, dark-gray text ------------ */ #svn-axp-root .svn-axp-feature { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 68px; padding: 12px; border: 2px solid transparent; border-radius: 14px; background: var(--svn-axp-sky); color: var(--svn-axp-ink); font-size: 14px; font-weight: 700; line-height: 1.35; cursor: pointer; text-align: start; white-space: normal; overflow-wrap: break-word; } #svn-axp-root .svn-axp-feature:hover { background: var(--svn-axp-sky-hover); } #svn-axp-root .svn-axp-feature:focus-visible { outline: 3px solid var(--svn-axp-color); outline-offset: 1px; } #svn-axp-root .svn-axp-ico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--svn-axp-ink); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.14); } #svn-axp-root .svn-axp-ico svg { width: 22px; height: 22px; } #svn-axp-root .svn-axp-glyph { font-weight: 800; font-size: 15px; color: var(--svn-axp-ink); direction: ltr; } #svn-axp-root .svn-axp-label { min-width: 0; color: inherit; } #svn-axp-root .svn-axp-feature.is-active { border-color: var(--svn-axp-color); background: #fff; color: var(--svn-axp-ink); } #svn-axp-root .svn-axp-feature.is-active .svn-axp-ico { background: var(--svn-axp-color); color: #fff; box-shadow: none; } #svn-axp-root .svn-axp-feature.is-active .svn-axp-glyph { color: #fff; } #svn-axp-root .svn-axp-feature[data-axp-level="2"] .svn-axp-label::after { content: " ••"; } #svn-axp-root .svn-axp-feature[data-axp-level="3"] .svn-axp-label::after { content: " •••"; } /* --- Bottom brand bar ---------------------------------------------- */ #svn-axp-root .svn-axp-panel-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--svn-axp-color); color: #fff; font-size: 13px; font-weight: 700; } #svn-axp-root .svn-axp-bar-brand { display: flex; align-items: center; gap: 8px; min-width: 0; color: #fff; } #svn-axp-root .svn-axp-bar-brand img { max-height: 22px; width: auto; } /* Agency credit link (optional agency_url setting). */ #svn-axp-root .svn-axp-bar-brand a { color: #fff; text-decoration: underline; } #svn-axp-root .svn-axp-bar-brand a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } #svn-axp-root .svn-axp-bar-link { display: flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; } #svn-axp-root .svn-axp-bar-link:hover { text-decoration: underline; } #svn-axp-root .svn-axp-bar-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } #svn-axp-root .svn-axp-bar-link svg { width: 16px; height: 16px; } /* * Mobile: bottom sheet instead of a full-screen drawer — capped at ~60% * of the viewport so the page stays visible; the panel body scrolls for * the rest of the options. */ @media (max-width: 480px) { #svn-axp-root .svn-axp-panel { width: calc(100vw - 16px); top: auto !important; bottom: 8px !important; height: auto; max-height: 60vh; max-height: 60dvh; } /* Prevent background scroll while the panel is open. */ html.svn-axp-panel-open body { overflow: hidden !important; } } /* ------------------------------------------------------------------ * * Structure popup — Ally-style: blue header + heading cards with * level badges. Explicit colors everywhere: theme/Kit link colors * (e.g. white links) must never make the heading names invisible. * ------------------------------------------------------------------ */ #svn-axp-structure { position: fixed; top: 8vh; left: 50%; transform: translateX(-50%); z-index: 2147483647; width: min(560px, calc(100vw - 32px)); max-width: 100vw; max-height: 78vh; display: flex; flex-direction: column; overflow: hidden; padding: 0; background: #f2f7fc; color: var(--svn-axp-ink); border-radius: 18px; box-shadow: 0 10px 60px rgba(0, 0, 0, 0.45); font-family: var(--svn-axp-font); } #svn-axp-structure .svn-axp-structure-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; background: var(--svn-axp-color); color: #fff; } #svn-axp-structure .svn-axp-structure-title { font-weight: 800; font-size: 16px; color: #fff; } #svn-axp-structure .svn-axp-close { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; } #svn-axp-structure .svn-axp-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } #svn-axp-structure .svn-axp-structure-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px; } #svn-axp-structure ul { list-style: none; margin: 0; padding: 0; } #svn-axp-structure li { margin: 0 0 10px; } #svn-axp-structure .svn-axp-hcard { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff !important; border: 1px solid #e3e9f2; border-radius: 12px; color: var(--svn-axp-ink) !important; font-family: var(--svn-axp-font); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none !important; } #svn-axp-structure .svn-axp-hcard:hover { border-color: var(--svn-axp-color); } #svn-axp-structure .svn-axp-hcard:focus-visible { outline: 3px solid var(--svn-axp-color); outline-offset: 1px; } #svn-axp-structure .svn-axp-hbadge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 26px; padding: 0 7px; border-radius: 8px; background: #0b1220; color: #fff; font-size: 12px; font-weight: 800; direction: ltr; } #svn-axp-structure .svn-axp-htext { min-width: 0; overflow-wrap: break-word; } #svn-axp-structure .svn-axp-hempty { padding: 16px; text-align: center; color: #6b7280; } /* ------------------------------------------------------------------ * * MODES — Text & Typography * ------------------------------------------------------------------ */ html.svn-axp-readable-font body, html.svn-axp-readable-font body * :not(i):not([class*="icon"]):not([class*="fa-"]) { font-family: Arial, Helvetica, "Segoe UI", sans-serif !important; } html.svn-axp-line-height-1 body p, html.svn-axp-line-height-1 body li { line-height: 1.6 !important; } html.svn-axp-line-height-2 body p, html.svn-axp-line-height-2 body li { line-height: 2 !important; } html.svn-axp-line-height-3 body p, html.svn-axp-line-height-3 body li { line-height: 2.4 !important; } html.svn-axp-letter-spacing-1 body { letter-spacing: 0.05em !important; } html.svn-axp-letter-spacing-2 body { letter-spacing: 0.1em !important; } html.svn-axp-letter-spacing-3 body { letter-spacing: 0.15em !important; } /* RTL-aware alignment cycle: 1=start, 2=center, 3=end */ html.svn-axp-text-align-1 body p, html.svn-axp-text-align-1 body h1, html.svn-axp-text-align-1 body h2, html.svn-axp-text-align-1 body h3 { text-align: start !important; } html.svn-axp-text-align-2 body p, html.svn-axp-text-align-2 body h1, html.svn-axp-text-align-2 body h2, html.svn-axp-text-align-2 body h3 { text-align: center !important; } html.svn-axp-text-align-3 body p, html.svn-axp-text-align-3 body h1, html.svn-axp-text-align-3 body h2, html.svn-axp-text-align-3 body h3 { text-align: end !important; } /* ------------------------------------------------------------------ * * MODES — Visuals & Colors * * Filters are applied to body's DIRECT CHILDREN except the plugin UI — * a CSS filter cannot be cancelled on a descendant (grayscale has no * inverse), so exclusion at the selector level is the only correct way * to keep the widget itself full-color and readable. * ------------------------------------------------------------------ */ html.svn-axp-grayscale body > :not(#svn-axp-root):not(#svn-axp-structure):not(.svn-axp-mask) { filter: grayscale(1); } html.svn-axp-contrast-invert body { background: #fff; } html.svn-axp-contrast-invert body > :not(#svn-axp-root):not(#svn-axp-structure):not(.svn-axp-mask) { filter: invert(1) hue-rotate(180deg); } /* Re-invert media so photos keep natural colors inside inverted areas. */ html.svn-axp-contrast-invert body > :not(#svn-axp-root):not(#svn-axp-structure) img, html.svn-axp-contrast-invert body > :not(#svn-axp-root):not(#svn-axp-structure) video, html.svn-axp-contrast-invert body > :not(#svn-axp-root):not(#svn-axp-structure) iframe { filter: invert(1) hue-rotate(180deg); } /* * High / light contrast — REAL recolor, not a weak CSS filter. * This is the behavior users know from established Israeli a11y widgets: * high = dark surfaces, white text, yellow underlined links * light = white surfaces, black text, accessible blue links * background-image:none also kills gradients/hero overlays that would * otherwise sit behind the recolored text. Media elements (img/video/ * svg/iframe) and the plugin UI are excluded at the selector level. */ html.svn-axp-contrast-high body, html.svn-axp-contrast-high body *:not(#svn-axp-root):not(#svn-axp-root *):not(#svn-axp-structure):not(#svn-axp-structure *):not(.svn-axp-mask):not(.svn-axp-mask *):not(img):not(picture):not(video):not(iframe):not(svg):not(svg *) { background-color: #0d0d0d !important; background-image: none !important; color: #ffffff !important; border-color: #8a8a8a !important; text-shadow: none !important; box-shadow: none !important; } html.svn-axp-contrast-high body a:not(#svn-axp-root a):not(#svn-axp-structure a) { color: #ffe100 !important; text-decoration: underline !important; } html.svn-axp-contrast-high body button:not(#svn-axp-root button):not(#svn-axp-structure button), html.svn-axp-contrast-high body input, html.svn-axp-contrast-high body select, html.svn-axp-contrast-high body textarea { border: 1px solid #ffffff !important; } html.svn-axp-contrast-light body, html.svn-axp-contrast-light body *:not(#svn-axp-root):not(#svn-axp-root *):not(#svn-axp-structure):not(#svn-axp-structure *):not(.svn-axp-mask):not(.svn-axp-mask *):not(img):not(picture):not(video):not(iframe):not(svg):not(svg *) { background-color: #ffffff !important; background-image: none !important; color: #000000 !important; border-color: #444444 !important; text-shadow: none !important; } html.svn-axp-contrast-light body a:not(#svn-axp-root a):not(#svn-axp-structure a) { color: #0645ad !important; text-decoration: underline !important; } html.svn-axp-contrast-light body button:not(#svn-axp-root button):not(#svn-axp-structure button), html.svn-axp-contrast-light body input, html.svn-axp-contrast-light body select, html.svn-axp-contrast-light body textarea { border: 1px solid #000000 !important; } html.svn-axp-hide-images body img, html.svn-axp-hide-images body svg, html.svn-axp-hide-images body video, html.svn-axp-hide-images body [style*="background-image"] { visibility: hidden !important; } html.svn-axp-pause-animations body *, html.svn-axp-pause-animations body *::before, html.svn-axp-pause-animations body *::after { animation-play-state: paused !important; animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* ------------------------------------------------------------------ * * MODES — Orientation * ------------------------------------------------------------------ */ html.svn-axp-highlight-links body a { text-decoration: underline !important; background: #fff44f !important; color: #0b0b0b !important; outline: 1px solid #0b0b0b; } html.svn-axp-focus-ring body a:focus, html.svn-axp-focus-ring body button:focus, html.svn-axp-focus-ring body input:focus, html.svn-axp-focus-ring body select:focus, html.svn-axp-focus-ring body textarea:focus, html.svn-axp-focus-ring body [tabindex]:focus { outline: 4px solid #e11d48 !important; outline-offset: 3px !important; } /* Large cursors (inline SVG data URIs — no extra HTTP requests) */ html.svn-axp-cursor-black body, html.svn-axp-cursor-black body * { cursor: url('data:image/svg+xml;utf8,') 4 2, auto !important; } html.svn-axp-cursor-white body, html.svn-axp-cursor-white body * { cursor: url('data:image/svg+xml;utf8,') 4 2, auto !important; } /* Feedback toast (read-aloud hints / errors) */ .svn-axp-toast { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%) translateY(8px); z-index: 2147483647; max-width: min(440px, calc(100vw - 32px)); padding: 12px 18px; background: #111827; color: #fff; border-radius: 12px; font-family: var(--svn-axp-font); font-size: 14px; font-weight: 600; line-height: 1.5; text-align: center; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; } .svn-axp-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* Read aloud: highlight for the block currently being spoken */ .svn-axp-reading { outline: 3px solid var(--svn-axp-color) !important; outline-offset: 3px !important; border-radius: 4px; } /* In read mode every text block is a "read me" target */ html.svn-axp-read-aloud body p, html.svn-axp-read-aloud body h1, html.svn-axp-read-aloud body h2, html.svn-axp-read-aloud body h3, html.svn-axp-read-aloud body h4, html.svn-axp-read-aloud body h5, html.svn-axp-read-aloud body h6, html.svn-axp-read-aloud body li, html.svn-axp-read-aloud body blockquote { cursor: pointer; } /* Reading mask overlay */ .svn-axp-mask { position: fixed; inset: 0; z-index: 2147483639; pointer-events: none; } .svn-axp-mask-top, .svn-axp-mask-bottom { position: absolute; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); } .svn-axp-mask-top { top: 0; height: 0; } .svn-axp-mask-bottom { top: 120px; bottom: 0; } .svn-axp-mask-window { position: absolute; left: 0; right: 0; height: 120px; } /* ------------------------------------------------------------------ * * WIDGET IMMUNITY — accessibility modes must never restyle the * plugin's own UI. #id selectors outrank every mode rule above. * ------------------------------------------------------------------ */ #svn-axp-root, #svn-axp-root *, #svn-axp-structure, #svn-axp-structure * { font-family: var(--svn-axp-font) !important; letter-spacing: normal !important; } /* Typography cycles target body p/li/h2 — keep plugin dialogs stable. */ #svn-axp-structure li { line-height: 1.5 !important; } #svn-axp-structure h2 { text-align: start !important; } /* "Highlight links" must not paint the plugin's own links yellow. */ html.svn-axp-highlight-links #svn-axp-root a, html.svn-axp-highlight-links #svn-axp-structure a { background: transparent !important; color: inherit !important; outline: none; } /* "Hide images" must not blank the plugin's icons or white-label logo. */ html.svn-axp-hide-images #svn-axp-root img, html.svn-axp-hide-images #svn-axp-root svg, html.svn-axp-hide-images #svn-axp-structure img, html.svn-axp-hide-images #svn-axp-structure svg { visibility: visible !important; } /* ------------------------------------------------------------------ * * Reduced motion: respect the OS-level preference out of the box * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .svn-axp-toast { transition: none; } }