/** * SmartAccessibility — front-end styles. * * Two parts: * 1) The widget UI (.smarta11y-*). * 2) Accessibility profile classes added to (.smarta11y-*-on) that * re-skin the whole page. These deliberately use high specificity and * !important because they must override theme styles. */ /* ============================================================ * 1. Widget UI * ============================================================ */ .smarta11y, .smarta11y * { box-sizing: border-box; } /* .smarta11y-* buttons live on arbitrary host sites, whose themes commonly apply a global `button, [type="button"] { ... }` reset (background, border, padding, text-align, ...). Those resets match at the same specificity as a single class selector, so on themes that enqueue their reset after this stylesheet, the theme wins. !important on the visual essentials keeps the widget looking right regardless of theme/load order. */ .smarta11y .smarta11y-toggle { position: fixed; z-index: 2147483600; /* Sensible defaults so the button is always visible even if the admin-injected inline CSS (size/color/offset) is stripped or deferred by an optimization/caching plugin. Inline style overrides these. */ right: 20px; bottom: 20px; width: 56px; height: 56px; background: #1a5cff !important; color: #ffffff !important; border: 0 !important; border-radius: 50% !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transition: transform 0.18s ease, box-shadow 0.18s ease; } .smarta11y-toggle:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32); } .smarta11y-toggle:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; } .smarta11y-toggle svg { width: 60%; height: 60%; } .smarta11y-panel { position: fixed; bottom: 20px; right: 20px; z-index: 2147483601; width: 340px; max-width: calc(100vw - 24px); max-height: calc(100vh - 40px); overflow-y: auto; background: #ffffff; color: #1a1a1a; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased; } .smarta11y-panel[hidden] { display: none; } .smarta11y-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: #1a5cff; color: #fff; border-radius: 14px 14px 0 0; position: sticky; top: 0; } .smarta11y-h { margin: 0; font-size: 17px; font-weight: 700; color: #fff; } .smarta11y .smarta11y-close { background: transparent !important; border: 0 !important; color: #fff !important; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px !important; border-radius: 6px !important; } .smarta11y-close:focus-visible { outline: 2px solid #ffbf47; } .smarta11y-body { padding: 14px; } .smarta11y-section-title { margin: 4px 4px 10px; font-size: 13px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.04em; } .smarta11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .smarta11y .smarta11y-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px !important; background: #f3f5f9 !important; border: 2px solid transparent !important; border-radius: 10px !important; text-align: center; cursor: pointer; color: #1a1a1a !important; font: inherit; min-height: 92px; justify-content: center; transition: background 0.15s ease, border-color 0.15s ease; } .smarta11y-item:hover { background: #e7ecf5; } .smarta11y-item:focus-visible { outline: 3px solid #1a5cff; outline-offset: 1px; } .smarta11y-ico { color: #1a5cff; display: flex; } .smarta11y-label { font-size: 13px; font-weight: 600; } .smarta11y-state { font-size: 11px; color: #888; } /* Active toggle state */ .smarta11y-tog[aria-pressed="true"] { background: #e3edff; border-color: #1a5cff; } .smarta11y-tog[aria-pressed="true"] .smarta11y-state { color: #1a5cff; font-weight: 700; } /* Steppers */ .smarta11y-stepper { cursor: default; } .smarta11y-steps { display: flex; align-items: center; gap: 8px; } .smarta11y .smarta11y-step-up, .smarta11y .smarta11y-step-down { width: 30px; height: 30px; border-radius: 50% !important; border: 0 !important; background: #1a5cff !important; color: #fff !important; padding: 0 !important; cursor: pointer; display: flex; align-items: center; justify-content: center; } .smarta11y-step-up svg, .smarta11y-step-down svg { width: 16px; height: 16px; } .smarta11y-step-up:focus-visible, .smarta11y-step-down:focus-visible { outline: 2px solid #ffbf47; } .smarta11y-level { min-width: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } .smarta11y-footer { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e3e6ec; } .smarta11y .smarta11y-reset, .smarta11y .smarta11y-link { display: flex; align-items: center; gap: 8px; padding: 10px 12px !important; border-radius: 8px !important; border: 0 !important; background: #f3f5f9 !important; color: #1a1a1a !important; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; } .smarta11y-reset:hover, .smarta11y-link:hover { background: #e7ecf5; } .smarta11y-reset svg, .smarta11y-link svg { color: #1a5cff; flex: 0 0 auto; } .smarta11y-reset:focus-visible, .smarta11y-link:focus-visible { outline: 3px solid #1a5cff; outline-offset: 1px; } .smarta11y-credit { text-align: center; font-size: 11px; color: #aaa; padding: 0 0 12px; } /* RTL niceties */ .smarta11y[dir="rtl"] .smarta11y-reset, .smarta11y[dir="rtl"] .smarta11y-link { flex-direction: row; } /* ============================================================ * 2. Page-level accessibility profiles (applied to ) * ============================================================ */ /* Contrast — dark */ html.smarta11y-contrast_dark-on, html.smarta11y-contrast_dark-on body { background: #000 !important; color: #fff !important; } html.smarta11y-contrast_dark-on *:not(.smarta11y):not(.smarta11y *) { background-color: transparent !important; color: #fff !important; border-color: #fff !important; } html.smarta11y-contrast_dark-on a, html.smarta11y-contrast_dark-on a * { color: #ffff00 !important; } /* Contrast — light */ html.smarta11y-contrast_light-on, html.smarta11y-contrast_light-on body { background: #fff !important; color: #000 !important; } html.smarta11y-contrast_light-on *:not(.smarta11y):not(.smarta11y *) { background-color: transparent !important; color: #000 !important; } html.smarta11y-contrast_light-on a, html.smarta11y-contrast_light-on a * { color: #0000cc !important; } /* Contrast — high (filter based) */ html.smarta11y-contrast_high-on { filter: contrast(1.5) !important; } /* Grayscale */ html.smarta11y-grayscale-on { filter: grayscale(100%) !important; } /* Invert */ html.smarta11y-invert-on { filter: invert(100%) hue-rotate(180deg) !important; } /* keep media visually correct under invert */ html.smarta11y-invert-on img, html.smarta11y-invert-on video, html.smarta11y-invert-on picture, html.smarta11y-invert-on iframe { filter: invert(100%) hue-rotate(180deg) !important; } /* If both grayscale and a contrast filter apply, the last wins; JS prevents mutually exclusive contrast modes from stacking. */ /* Readable font */ html.smarta11y-readable_font-on body, html.smarta11y-readable_font-on body *:not(.smarta11y):not(.smarta11y *) { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; letter-spacing: 0.02em; } /* Highlight links */ html.smarta11y-links-on a:not(.smarta11y *) { text-decoration: underline !important; outline: 2px solid #ffbf47 !important; outline-offset: 1px; background: #1a1a1a !important; color: #ffff00 !important; } /* Highlight headings */ html.smarta11y-headings-on :is(h1, h2, h3, h4, h5, h6):not(.smarta11y *) { outline: 2px dashed #1a5cff !important; outline-offset: 2px; background: rgba(26, 92, 255, 0.08) !important; } /* Big cursor */ html.smarta11y-big_cursor-on, html.smarta11y-big_cursor-on * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l28 16-12 3-4 13z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 4, auto !important; } /* Stop animations */ html.smarta11y-stop_anim-on *:not(.smarta11y):not(.smarta11y *) { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.smarta11y-stop_anim-on :is(video, .smarta11y-allow-motion) { animation: initial !important; } /* Reading guide — horizontal bar that follows the cursor */ .smarta11y-guide { position: fixed; left: 0; right: 0; height: 22px; background: rgba(255, 213, 0, 0.35); border-top: 2px solid #1a5cff; border-bottom: 2px solid #1a5cff; pointer-events: none; z-index: 2147483590; display: none; top: 0; } html.smarta11y-reading_guide-on .smarta11y-guide { display: block; } /* Reading mask — dim everything except a horizontal band */ .smarta11y-mask-top, .smarta11y-mask-bottom { position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, 0.6); pointer-events: none; z-index: 2147483589; display: none; } .smarta11y-mask-top { top: 0; height: 0; } .smarta11y-mask-bottom { bottom: 0; height: 0; } html.smarta11y-reading_mask-on .smarta11y-mask-top, html.smarta11y-reading_mask-on .smarta11y-mask-bottom { display: block; } /* Keyboard navigation — strong, always-visible focus ring */ html.smarta11y-keyboard_nav-on :is(a, button, input, select, textarea, [tabindex]):focus { outline: 3px solid #ff6a00 !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #fff !important; } /* Reduce-motion users: never animate the toggle */ @media (prefers-reduced-motion: reduce) { .smarta11y-toggle { transition: none; } }