/* WebForge-Accessibility widget styles. Palette-driven via the theme's --wf-* tokens so the widget matches the site; falls back to safe defaults when a token is absent. Direction follows the document (RTL-first). */ /* ---- Site-wide accessibility baseline (ships with the plugin) ---- */ /* A visible keyboard-focus ring on every interactive element (WCAG 2.4.7). */ :focus-visible { outline: 3px solid var(--wf-color-accent, #1769ff); outline-offset: 2px; } /* Keep the skip-link target clear of the sticky header when jumped to. */ #wf-main { scroll-margin-top: 96px; } .wf-a11y-skip { position: fixed; inset-inline-start: 12px; top: -60px; z-index: 100000; padding: 10px 18px; border-radius: 8px; background: var(--wf-color-accent, #1769ff); color: #fff; font: 600 15px/1.2 var(--wf-font-he, system-ui, sans-serif); text-decoration: none; transition: top 0.15s ease; } .wf-a11y-skip:focus { top: 12px; outline: 3px solid #fff; outline-offset: 2px; } /* Floating toggle button */ .wf-a11y-toggle { position: fixed; inset-inline-start: 18px; inset-block-end: 18px; z-index: 99998; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--wf-color-accent, #1769ff); color: #fff; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease, box-shadow 0.15s ease; } .wf-a11y-toggle:hover { transform: scale(1.06); } .wf-a11y-toggle svg { width: 28px; height: 28px; fill: currentColor; } /* Panel */ .wf-a11y-panel { position: fixed; inset-inline-start: 18px; inset-block-end: 80px; z-index: 99999; width: min(300px, calc(100vw - 36px)); max-height: min(560px, calc(100vh - 110px)); overflow-y: auto; padding: 16px; border-radius: 14px; background: var(--wf-surface, var(--wf-bg, #fff)); color: var(--wf-text, #14110b); border: 1px solid var(--wf-border, rgba(0, 0, 0, 0.12)); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24); font: 400 15px/1.4 var(--wf-font-he, system-ui, sans-serif); } .wf-a11y-panel[hidden] { display: none; } .wf-a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 12px; } .wf-a11y-panel__title { margin: 0; font-size: 16px; font-weight: 700; } .wf-a11y-close { border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px; border-radius: 6px; } .wf-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .wf-a11y-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--wf-border, rgba(0, 0, 0, 0.14)); border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .wf-a11y-btn:hover { border-color: var(--wf-color-accent, #1769ff); } .wf-a11y-btn[aria-pressed="true"] { border-color: var(--wf-color-accent, #1769ff); background: color-mix(in srgb, var(--wf-color-accent, #1769ff) 14%, transparent); font-weight: 700; } .wf-a11y-btn__icon { font-size: 20px; line-height: 1; } .wf-a11y-reset { grid-column: 1 / -1; flex-direction: row; justify-content: center; } .wf-a11y-statement { display: block; margin-block-start: 12px; text-align: center; color: var(--wf-color-accent, #1769ff); font-weight: 600; } /* Keyboard focus - strong, visible ring on every control in the widget. */ .wf-a11y-toggle:focus-visible, .wf-a11y-btn:focus-visible, .wf-a11y-close:focus-visible, .wf-a11y-statement:focus-visible { outline: 3px solid var(--wf-color-accent, #1769ff); outline-offset: 2px; } /* ---- Applied modes (classes on ) ---- */ /* High contrast: override the palette tokens so token-driven components follow, plus force body text/background for anything with hard-coded colors. */ html.wf-a11y-contrast { --wf-bg: #000; --wf-surface: #000; --wf-text: #fff; --wf-text-muted: #fff; --wf-border: #fff; --wf-color-accent: #ffff00; } html.wf-a11y-contrast body, html.wf-a11y-contrast p, html.wf-a11y-contrast li, html.wf-a11y-contrast h1, html.wf-a11y-contrast h2, html.wf-a11y-contrast h3, html.wf-a11y-contrast h4, html.wf-a11y-contrast span { background-color: #000 !important; color: #fff !important; } html.wf-a11y-contrast a { color: #ffff00 !important; } /* Highlight links: underline + outline every link so they stand out. */ html.wf-a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; outline: 1px dashed currentColor; outline-offset: 2px; } /* Readable font: swap to a plain, high-legibility sans across the page. */ html.wf-a11y-readable, html.wf-a11y-readable body, html.wf-a11y-readable * { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; letter-spacing: normal !important; word-spacing: normal !important; } /* Pause animations: kill CSS animations/transitions and reveal any element the scroll-reveal engine left at opacity 0, so nothing is stranded invisible. This is the standard reduced-motion reset and needs no hook into GSAP internals. */ html.wf-a11y-no-motion *, html.wf-a11y-no-motion *::before, html.wf-a11y-no-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.wf-a11y-no-motion [class*="wf-animate-"], html.wf-a11y-no-motion .wf-stagger__item { opacity: 1 !important; transform: none !important; } /* The widget must stay readable in every mode - never invert its own controls. */ html.wf-a11y-contrast .wf-a11y-panel, html.wf-a11y-contrast .wf-a11y-panel * { background-color: #000 !important; color: #fff !important; }