/** * Accessibility widget (IS 5568) — floating disclosure toggle + panel, * plus the classes it applies (toggled by assets/a11y-widget.js, * pre-painted server-side by functions.php soker_a11y_prepaint()). * Tokens + logical properties only; loaded on every page. * * @package Soker_Hello_Child */ /* ========================================================================== Floating toggle + disclosure panel — stacked above the CTA bar and the cookie-consent banner via --soker-stack-offset (assets/a11y-widget.js measures both and keeps this in sync). ========================================================================== */ .soker-a11y { position: fixed; inset-inline-start: 1rem; inset-block-end: calc(1rem + var(--soker-stack-offset, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 965; } @media (min-width: 640px) { .soker-a11y { inset-inline-start: 1.5rem; } } .soker-a11y__toggle { appearance: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border-radius: var(--nx-radius-pill); border: 1px solid var(--nx-line); background-color: var(--nx-navy); color: var(--nx-on-navy); box-shadow: var(--nx-shadow-soft); cursor: pointer; } .soker-a11y__toggle:hover, .soker-a11y__toggle:focus-visible { background-color: var(--nx-navy-2); } .soker-a11y__panel { position: absolute; inset-inline-start: 0; inset-block-end: calc(48px + .75rem); inline-size: min(88vw, 19rem); max-block-size: calc(100vh - 8rem); overflow: auto; background-color: var(--nx-surface); color: var(--nx-ink); border-radius: var(--nx-radius-card); box-shadow: 0 20px 60px rgba(15, 31, 64, .3); border: 1px solid var(--nx-line); } /* CRITICAL: matches .nx-popup[hidden] / .soker-consent__panel[hidden] — without this the positioned panel could still capture layout/clicks. */ .soker-a11y__panel[hidden] { display: none; } .soker-a11y__panel-inner { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; } .soker-a11y__heading { margin: 0 0 .25rem; font-size: 1rem; color: var(--nx-ink); } .soker-a11y__opt { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-block-size: 44px; padding-inline: .85rem; border: 1px solid var(--nx-line); border-radius: var(--nx-radius-btn); background-color: var(--nx-subtle); color: var(--nx-ink); font-family: var(--nx-font-body); font-size: .9rem; font-weight: 600; cursor: pointer; text-align: start; } .soker-a11y__opt[aria-pressed="true"] { background-color: var(--nx-red-ink); border-color: var(--nx-red-ink); color: #ffffff; } /* Decorative on/off dot — the accessible state lives in aria-pressed. */ .soker-a11y__opt::after { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; border: 2px solid currentColor; flex-shrink: 0; } .soker-a11y__opt[aria-pressed="true"]::after { background-color: #ffffff; } .soker-a11y__reset { appearance: none; min-block-size: 44px; margin-block-start: .5rem; border: 1px solid var(--nx-line); border-radius: var(--nx-radius-btn); background-color: transparent; color: var(--nx-ink-muted); font-family: var(--nx-font-body); font-size: .85rem; font-weight: 600; cursor: pointer; } .soker-a11y__reset:hover, .soker-a11y__reset:focus-visible { color: var(--nx-ink); border-color: var(--nx-ink-muted); } .soker-a11y__statement { display: inline-flex; align-items: center; min-block-size: 32px; margin-block-start: .25rem; color: var(--nx-ink-muted); font-size: .8rem; text-decoration: underline; } .soker-a11y__statement:hover, .soker-a11y__statement:focus-visible { color: var(--nx-red-ink); } /* ========================================================================== Preference states — applied to by assets/a11y-widget.js (and pre-painted by functions.php soker_a11y_prepaint() to avoid a flash on return visits). The "עצירת אנימציות" rule itself lives in tokens.css, folded into the existing prefers-reduced-motion block. ========================================================================== */ html.soker-a11y-text-1 { font-size: 112.5%; } html.soker-a11y-text-2 { font-size: 125%; } /* Max-contrast overrides, scoped to this class only (not a global re-theme) — darkens text/surfaces well past AA on every token consumer. */ html.soker-a11y-contrast { --nx-body: #000000; --nx-ink: #000000; --nx-ink-muted: #1a1a1a; --nx-bg: #ffffff; --nx-subtle: #ffffff; --nx-surface: #ffffff; --nx-line: #000000; --nx-navy: #000000; --nx-navy-2: #1a1a1a; --nx-on-navy: #ffffff; --nx-on-navy-muted: #ffffff; --nx-red-ink: #b30000; } /* Buttons already carry sufficient non-color affordance (fill/border); scope link emphasis to actual inline links only. */ html.soker-a11y-links a:not(.nx-btn):not(.soker-a11y__opt) { text-decoration: underline !important; text-decoration-thickness: 2px !important; font-weight: 700 !important; } html.soker-a11y-font { --nx-font-body: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }