/* * OWEB Accessibility widget — CSS * * Two responsibilities: * 1. Style the toggle button + sidebar panel (everything inside * .oweb-a11y-widget). * 2. Apply the visual transformations when body has the corresponding * .oweb-a11y-* class (set by oweb-a11y.js). * * The body-class transformations use !important sparingly but liberally * enough to override any theme/builder styles. Accessibility wins ties. */ /* ─── Widget shell ─────────────────────────────────────────────────────── */ .oweb-a11y-widget { position: fixed; bottom: 20px; z-index: 99999; font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } .oweb-a11y-widget.oweb-a11y-side-right { right: 20px; } .oweb-a11y-widget.oweb-a11y-side-left { left: 20px; } .oweb-a11y-toggle { width: 56px; height: 56px; border-radius: 50%; border: 0; background: #2c3e50; color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; transition: transform .15s ease, box-shadow .15s ease; padding: 8px; } .oweb-a11y-toggle:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(0,0,0,.3); } .oweb-a11y-toggle:focus { outline: 3px solid #4a90e2; outline-offset: 3px; } .oweb-a11y-toggle img { width: 100%; height: 100%; object-fit: contain; } .oweb-a11y-panel { position: absolute; bottom: 70px; width: 320px; max-width: calc(100vw - 40px); background: #fff; color: #1a1a1a; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.25); padding: 0; max-height: calc(100vh - 100px); overflow: hidden; display: flex; flex-direction: column; direction: rtl; } .oweb-a11y-side-right .oweb-a11y-panel { right: 0; } .oweb-a11y-side-left .oweb-a11y-panel { left: 0; } .oweb-a11y-panel[hidden] { display: none; } .oweb-a11y-panel__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: #2c3e50; color: #fff; } .oweb-a11y-panel__title { margin: 0; font-size: 16px; font-weight: 700; } .oweb-a11y-panel__close { background: transparent; border: 0; color: #fff; font-size: 28px; cursor: pointer; width: 32px; height: 32px; line-height: 1; padding: 0; border-radius: 4px; } .oweb-a11y-panel__close:hover { background: rgba(255,255,255,.15); } .oweb-a11y-panel__body { flex: 1; overflow: auto; padding: 14px; } .oweb-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .oweb-a11y-btn { background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: #374151; transition: background .15s, border-color .15s; } .oweb-a11y-btn:hover { background: #e5e7eb; } .oweb-a11y-btn:focus { outline: 2px solid #4a90e2; outline-offset: 2px; } .oweb-a11y-btn[aria-pressed="true"] { background: #4a90e2; border-color: #357abd; color: #fff; } .oweb-a11y-btn__icon { display: flex; align-items: center; justify-content: center; } .oweb-a11y-btn__label { line-height: 1.2; text-align: center; } .oweb-a11y-panel__actions { display: flex; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e5e7eb; } .oweb-a11y-link { flex: 1; background: transparent; border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px; cursor: pointer; font-size: 12px; color: #6b7280; } .oweb-a11y-link:hover { background: #f3f4f6; color: #1a1a1a; } .oweb-a11y-panel__foot { padding: 10px 14px; background: #f9fafb; border-top: 1px solid #e5e7eb; text-align: center; font-size: 11px; } .oweb-a11y-credit { color: #6b7280; text-decoration: none; } .oweb-a11y-credit:hover { color: #1a1a1a; } .oweb-a11y-credit strong { color: #2c3e50; } /* ─── Body-class transformations ───────────────────────────────────────── */ /* Font size scale — applied via JS by setting font-size on */ html.oweb-a11y-fz-1 { font-size: 110%; } html.oweb-a11y-fz-2 { font-size: 120%; } html.oweb-a11y-fz-3 { font-size: 130%; } html.oweb-a11y-fz-4 { font-size: 140%; } /* High contrast variants — cycle through 4 WCAG-approved combos. * .oweb-a11y-contrast applies the active variant; .oweb-a11y-cv-N picks which. * Cycling is handled by oweb-a11y.js (clicking the contrast button advances * through variants, then off). */ body.oweb-a11y-contrast.oweb-a11y-cv-1, body.oweb-a11y-contrast.oweb-a11y-cv-1 * { background-color: #000 !important; color: #ff0 !important; border-color: #ff0 !important; } body.oweb-a11y-contrast.oweb-a11y-cv-1 a, body.oweb-a11y-contrast.oweb-a11y-cv-1 a * { color: #00ffff !important; } body.oweb-a11y-contrast.oweb-a11y-cv-2, body.oweb-a11y-contrast.oweb-a11y-cv-2 * { background-color: #ffffff !important; color: #000000 !important; border-color: #000000 !important; } body.oweb-a11y-contrast.oweb-a11y-cv-2 a, body.oweb-a11y-contrast.oweb-a11y-cv-2 a * { color: #0000ee !important; text-decoration: underline !important; } body.oweb-a11y-contrast.oweb-a11y-cv-3, body.oweb-a11y-contrast.oweb-a11y-cv-3 * { background-color: #000080 !important; color: #ffffff !important; border-color: #ffffff !important; } body.oweb-a11y-contrast.oweb-a11y-cv-3 a, body.oweb-a11y-contrast.oweb-a11y-cv-3 a * { color: #ffff00 !important; } body.oweb-a11y-contrast.oweb-a11y-cv-4, body.oweb-a11y-contrast.oweb-a11y-cv-4 * { background-color: #fff8e7 !important; color: #1a1a1a !important; border-color: #1a1a1a !important; } body.oweb-a11y-contrast.oweb-a11y-cv-4 a, body.oweb-a11y-contrast.oweb-a11y-cv-4 a * { color: #8b4513 !important; } /* Default (no variant chosen yet) — variant 1 */ body.oweb-a11y-contrast:not(.oweb-a11y-cv-2):not(.oweb-a11y-cv-3):not(.oweb-a11y-cv-4):not(.oweb-a11y-cv-1) { background-color: #000 !important; color: #ff0 !important; } /* Underline all links */ body.oweb-a11y-underline_links a { text-decoration: underline !important; } /* Highlight links (yellow background) */ body.oweb-a11y-highlight_links a { background-color: #ffeb3b !important; color: #000 !important; padding: 0 4px; border-radius: 2px; } /* Remove styles — strip backgrounds, borders, shadows */ body.oweb-a11y-remove_styles *, body.oweb-a11y-remove_styles *::before, body.oweb-a11y-remove_styles *::after { background: #fff !important; color: #000 !important; border: none !important; box-shadow: none !important; text-shadow: none !important; background-image: none !important; } /* Remove animations & transitions */ body.oweb-a11y-remove_animations *, body.oweb-a11y-remove_animations *::before, body.oweb-a11y-remove_animations *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; } /* Readable font (Arial) */ body.oweb-a11y-readable_fonts, body.oweb-a11y-readable_fonts * { font-family: Arial, "Arial Hebrew", sans-serif !important; letter-spacing: 0.02em; line-height: 1.6; } /* Greyscale all images */ body.oweb-a11y-greyscale img, body.oweb-a11y-greyscale video, body.oweb-a11y-greyscale picture { filter: grayscale(100%) !important; } /* Invert colors */ body.oweb-a11y-invert_colors { filter: invert(100%) hue-rotate(180deg); background: #fff; } body.oweb-a11y-invert_colors img, body.oweb-a11y-invert_colors video { filter: invert(100%) hue-rotate(180deg); } /* Lights off — dim everything except focus area */ body.oweb-a11y-lights_off { background: #000 !important; } body.oweb-a11y-lights_off > *:not(#oweb-a11y-widget) { opacity: 0.3; transition: opacity .2s; } body.oweb-a11y-lights_off > *:hover { opacity: 1; } /* Dark theme — preserves widget contrast */ body.oweb-a11y-darktheme { background: #1a1a1a !important; color: #e5e5e5 !important; } body.oweb-a11y-darktheme a { color: #4a90e2 !important; } body.oweb-a11y-darktheme img { opacity: 0.85; } /* Keyboard navigation focus ring (visible always) */ body.oweb-a11y-keyboard_navigation *:focus { outline: 3px solid #4a90e2 !important; outline-offset: 2px !important; } /* Mobile responsive */ @media (max-width: 480px) { .oweb-a11y-panel { width: calc(100vw - 40px); } .oweb-a11y-toggle { width: 48px; height: 48px; } }