/** * iA Accessibility — front-end widget styles. * * Two parts: * 1. The widget UI (.ia-accessibility-root) — the floating button and the panel. * 2. Effect classes applied to (prefixed .iax-) that restyle the page. * * The widget root is appended to (a sibling of ), so page-wide * filters applied to never touch the widget itself. */ /* ============================================================ * 1. Widget UI * ============================================================ */ .ia-accessibility-root, .ia-accessibility-root * { box-sizing: border-box; } :root { --ia-color-text: #111827; --ia-color-text-muted: #6B7280; --ia-color-white: #FFFFFF; --ia-color-bg: #F6F7F9; --ia-color-white-hover: #FAFAFA; --ia-color-border: #E5E7EB; --ia-color-accent: #111111; --ia-color-accent-hover: #1a1a1a; --ia-color-success-bg: #ECFDF5; --ia-color-success-text: #047857; --ia-color-success-border: #A7F3D0; --ia-color-success-dot: #10B981; --ia-color-error-bg: #FEF2F2; --ia-color-error-text: #B91C1C; --ia-color-error-border: #FECACA; --ia-radius-app: 14px; --ia-radius-card: 12px; --ia-radius-md: 8px; --ia-radius-sm: 6px; --ia-radius-xs: 5px; --ia-radius-pill: 9999px; --ia-radius-circle: 50%; --ia-font-family: var(--ia-widget-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); --ia-text-2xs: 9px; --ia-text-xs: 11px; --ia-text-sm: 11.5px; --ia-text-base: 13px; --ia-text-md: 14px; --ia-text-lg: 15px; --ia-text-xl: 21px; --ia-space-1: 4px; --ia-space-2: 8px; --ia-space-3: 12px; --ia-space-4: 16px; --ia-space-5: 20px; --ia-space-6: 24px; --ia-space-7: 28px; --ia-space-8: 32px; --ia-space-10: 40px; --ia-size-icon-sm: 28px; --ia-size-icon-md: 36px; --ia-size-icon-lg: 36px; --ia-size-toggle-w: 36px; --ia-size-toggle-h: 20px; --ia-size-toggle-knob: 16px; --ia-size-input-h: 36px; --ia-size-header-h: 56px; --ia-transition-fast: .15s; --ia-transition-base: .2s; --ia-transition-slow: .3s; --ia-shadow-toggle: 0 1px 2px rgba(0, 0, 0, .1); --ia-shadow-widget: 0 4px 12px rgba(0, 0, 0, .15); --ia-shadow-device-tab: 0 1px 2px rgba(0, 0, 0, .04); --ia-shadow-focus-ring: 0 0 0 4px var(--ia-color-white); font-family: var(--ia-font-family); font-size: var(--ia-text-md); line-height: 1.5; color: var(--ia-color-text); } .ia-accessibility-root input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]), .ia-accessibility-root textarea, select, input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]) { padding: 0 12px 0 30px; width: 100%; border: 1px solid #111111; font-size: 12.5px; } /* ============================================================ * Floating launcher button * ============================================================ */ .ia-accessibility-root button.iax-launcher { position: fixed; z-index: 2147483000; width: var(--ia-icon-size, 60px); height: var(--ia-icon-size, 60px); border: none; border-radius: 50%; background: var(--ia-main-icon-bg, var(--ia-color-accent)); color: var(--ia-icon-color, #ffffff); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px var(--ia-space-5) rgba(0, 0, 0, .25); transition: transform .15s ease, box-shadow .15s ease; animation: wap-pulse 2s infinite; padding: 10px; margin: 0; } .ia-accessibility-root button.iax-launcher:hover { background: var(--ia-main-icon-bg, var(--ia-color-accent)); color: var(--ia-icon-color, #ffffff); } .ia-accessibility-root button.iax-launcher:hover { transform: scale(1.06); } .ia-accessibility-root button.iax-launcher:focus-visible { outline: 3px solid #2563EB; outline-offset: 3px; } .ia-accessibility-root button.iax-launcher svg { padding: 5px; } .ia-accessibility-root.iax-pos-right button.iax-launcher { right: var(--ia-horizontal-offset, 20px); bottom: var(--ia-vertical-offset, 20px); } .ia-accessibility-root.iax-pos-left button.iax-launcher { left: var(--ia-horizontal-offset, 20px); bottom: var(--ia-vertical-offset, 20px); } @keyframes wap-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--ia-button-bg-rgb, 22, 119, 255), .7); transform: scale(1); } 70% { box-shadow: 0 0 0 10px rgba(var(--ia-button-bg-rgb, 22, 119, 255), 0); transform: scale(1.05); } 100% { box-shadow: 0 0 0 0 rgba(var(--ia-button-bg-rgb, 22, 119, 255), 0); transform: scale(1); } } /* ============================================================ * Panel * ============================================================ */ .ia-accessibility-root .iax-panel { position: fixed; bottom: var(--ia-panel-bottom, 85px); z-index: 2147483000; width: 370px; max-width: calc(100vw - 32px); max-height: min(82vh, 680px); display: flex; flex-direction: column; background: var(--ia-color-white); border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); overflow: hidden; opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .ia-accessibility-root.iax-pos-right .iax-panel { right: 20px; } .ia-accessibility-root.iax-pos-left .iax-panel { left: 20px; } .ia-accessibility-root .iax-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* ============================================================ * Panel header — redesigned (centered, tall, icon + title) * ============================================================ */ .ia-accessibility-root .iax-panel-head { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 28px 20px 22px; background: var(--ia-header-bg, var(--ia-color-accent)); color: var(--ia-header-text-color, var(--ia-color-white, '#ffffff')); flex-shrink: 0; } .ia-accessibility-root .iax-panel-head .iax-icon-btn.iax-close, .ia-accessibility-root .iax-panel-head .iax-statement, .ia-accessibility-root .iax-panel-head h2 { color: var(--ia-header-text-color, var(--ia-color-white, '#ffffff')); padding: 0; } .ia-accessibility-root .iax-head-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--ia-header-icon-bg); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; flex-shrink: 0; } .ia-accessibility-root .iax-head-icon svg { width: 28px; height: 28px; color: var(--ia-header-icon-color); } /* Title */ .ia-accessibility-root .iax-panel-head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } /* Subtitle row: "Powered by … • Statement • Hide" */ .ia-accessibility-root .iax-head-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 2px; } .ia-accessibility-root .iax-head-sub-text, .ia-accessibility-root .iax-head-sub a, .ia-accessibility-root .iax-head-sub button.iax-reset { font-size: 11px; font-weight: 500; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--ia-font-family); line-height: 1; text-decoration: none; transition: color .15s; } .ia-accessibility-root .iax-head-sub a:hover, .ia-accessibility-root .iax-head-sub button.iax-reset:hover { text-decoration: underline; } /* Close button — absolute top-right */ .ia-accessibility-root .iax-icon-btn.iax-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; border-radius: var(--ia-radius-md); background: rgba(255, 255, 255, .14); cursor: pointer; transition: background var(--ia-transition-fast); flex-shrink: 0; } .ia-accessibility-root .iax-icon-btn.iax-close:hover { background: rgba(255, 255, 255, .28); } .ia-accessibility-root .iax-icon-btn.iax-close:focus-visible { outline: 2px solid var(--ia-color-white); outline-offset: 1px; } .ia-accessibility-root .iax-icon-btn.iax-close svg { width: 15px; height: 15px; } /* ============================================================ * Panel body * ============================================================ */ .ia-accessibility-root .iax-panel-body { padding: 16px 14px 14px; overflow-y: auto; background: var(--ia-box-bg-color, var(--ia-color-bg)); flex: 1; min-height: 0; } /* Custom scrollbar */ .ia-accessibility-root .iax-panel-body::-webkit-scrollbar { width: 4px; } .ia-accessibility-root .iax-panel-body::-webkit-scrollbar-track { background: transparent; } .ia-accessibility-root .iax-panel-body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .12); border-radius: 2px; } /* ============================================================ * Search prefix (above module tiles) * ============================================================ */ .ia-accessibility-root .iax-search-wrap { position: relative; margin-bottom: 16px; } .ia-accessibility-root .iax-search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--ia-box-text-color); pointer-events: none; flex-shrink: 0; } .ia-accessibility-root .iax-panel.open .iax-search-wrap input { width: 100%; height: 36px; border: 1.5px solid var(--ia-box-text-color); border-radius: 10px; background: var(--ia-box-bg-color); padding: 0 12px 0 30px; font-size: 12.5px; color: var(--ia-box-text-color); outline: none; transition: border-color .15s, box-shadow .15s; font-family: var(--ia-font-family); -webkit-appearance: none; appearance: none; margin: 0; } .ia-accessibility-root .iax-panel.open .iax-search-wrap input::placeholder { color: var(--ia-box-text-color); } .ia-accessibility-root .iax-panel.open .iax-search-wrap input:focus { border-color: var(--iax-accent, var(--ia-box-text-color)); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); } .ia-accessibility-root .iax-panel.open .iax-search-wrap input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } .ia-accessibility-root .iax-panel.open .iax-search-wrap input::-webkit-search-decoration, .ia-accessibility-root .iax-panel.open .iax-search-wrap input::-webkit-search-results-button, .ia-accessibility-root .iax-panel.open .iax-search-wrap input::-webkit-search-results-decoration { display: none; } /* ============================================================ * Category sections * ============================================================ */ .ia-accessibility-root .iax-section { margin-bottom: 18px; } .ia-accessibility-root .iax-section:last-child { margin-bottom: 0; } .ia-accessibility-root .iax-section-title { font-size: 10.5px; font-weight: 700; color: var(--ia-box-text-color, var(--ia-color-text, #111111)); text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 10px 2px; padding: 0; } /* ============================================================ * Module tile grid * ============================================================ */ .ia-accessibility-root .iax-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } /* Module tile */ .ia-accessibility-root button.iax-tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ia-space-2); padding: var(--ia-space-3); min-height: 92px; background: var(--ia-module-bg, var(--ia-color-white)); border: 1.5px solid var(--ia-module-border-color, #E5E7EB); border-radius: var(--ia-radius-card); cursor: pointer; text-align: left; transition: border-color var(--ia-transition-fast), background var(--ia-transition-fast), box-shadow var(--ia-transition-fast); font-size: 100%; position: relative; width: 100%; height: auto; overflow: hidden; line-height: 1; margin: 0; } .ia-accessibility-root button.iax-tile:hover { border-color: var(--ia-act-module-border-color, #111111); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); } .ia-accessibility-root button.iax-tile:focus-visible { outline: 2px solid var(--ia-act-module-border-color, #111111); outline-offset: 2px; } .ia-accessibility-root button.iax-tile.active, .ia-accessibility-root button.iax-tile:hover { border-color: var(--ia-act-module-border-color, var(--ia-color-accent)); background: var(--ia-act-module-bg, var(--ia-color-white)); box-shadow: inset 0 0 0 1px var(--ia-act-module-border-color, var(--ia-color-accent)); } .ia-accessibility-root .iax-tile-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--ia-radius-md); background: var(--ia-module-icon-bg-color, #F3F4F6); color: var(--ia-module-icon-color, var(--ia-color-text)); flex-shrink: 0; transition: background var(--ia-transition-fast), color var(--ia-transition-fast); } .ia-accessibility-root .iax-tile.active .iax-tile-icon { background: var(--ia-act-module-icon-bg-color, var(--ia-color-accent)); color: var(--ia-act-module-icon-color, var(--ia-color-white)); } .ia-accessibility-root .iax-tile-icon svg { width: 17px; height: 17px; } .ia-accessibility-root .iax-tile-name { font-size: var(--ia-text-md); font-weight: 600; color: var(--ia-module-text-color, var(--ia-color-text)); line-height: 1.3; } .ia-accessibility-root .iax-tile-state { font-size: var(--ia-text-xs); color: var(--ia-module-text-color, var(--ia-color-text)); } .ia-accessibility-root .iax-tile.active .iax-tile-name { color: var(--ia-act-module-text-color, var(--ia-color-text)); } .ia-accessibility-root .iax-tile.active .iax-tile-state { color: var(--ia-act-module-text-color, var(--ia-color-text)); font-weight: 600; } /* Stepped level dots */ .iax-dots { display: flex; gap: 3px; margin-top: 1px; } .iax-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ia-color-border); } .iax-dot.on { background: var(--iax-accent, var(--ia-color-accent)); } .iax-empty { padding: var(--ia-space-7) var(--ia-space-3); text-align: center; font-size: 12.5px; color: var(--ia-box-text-color); } /* ============================================================ * Panel footer * ============================================================ */ .ia-accessibility-root .iax-panel-foot { padding: var(--ia-space-3) var(--ia-space-4); border-top: 1px solid var(--ia-color-border); background: var(--ia-footer-bg, var(--ia-color-white)); text-align: center; flex-shrink: 0; color: var(--ia-footer-bg, #111111); } .ia-accessibility-root .iax-panel-foot a { font-size: var(--ia-text-xs); color: var(--ia-footer-bg, #111111); text-decoration: none; } .ia-accessibility-root .iax-panel-foot a:hover { text-decoration: underline; } .ia-accessibility-root .iax-panel-foot .iax-reset { background-color: var(--ia-reset-btn-bg, #111111); color: var(--ia-reset-btn-text-color, #ffffff); border: 1px solid var(--ia-reset-btn-bg, #111111); transition: all 0.3s; cursor: pointer; padding: 8px 15px; border-radius: 5px; width: max-content; font-size: 14px; position: relative; height: auto; display: block; line-height: 1; margin: auto; } .ia-accessibility-root .iax-panel-foot .iax-reset:hover { opacity: 0.9; box-shadow: unset; } /* ============================================================ * Mobile adjustments * ============================================================ */ @media (max-width: 420px) { .ia-accessibility-root .iax-panel { width: calc(100vw - 24px); } .ia-accessibility-root.iax-pos-left .iax-panel, .ia-accessibility-root.iax-pos-right .iax-panel { right: 12px; left: 12px; } } /* ============================================================ * Floating helpers (tooltip, dict, structure, mask, line) * ============================================================ */ .iax-tooltip { position: fixed; z-index: 2147483100; max-width: 280px; padding: 8px 11px; color: var(--ia-color-text); background: var(--ia-color-white); font: 500 12.5px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); pointer-events: none; } .iax-dict-pop { position: fixed; z-index: 2147483100; max-width: 300px; padding: 12px 14px; background: var(--ia-color-white); color: var(--ia-color-text); border: 1px solid var(--ia-color-border); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); font: 400 12.5px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .iax-dict-pop strong { display: block; font-size: 13.5px; margin-bottom: 4px; } .iax-dict-pop em { color: var(--ia-color-text-muted); } .iax-reading-line { position: fixed; left: 0; right: 0; height: 0; border-top: 4px solid #DC2626; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); z-index: 2147482000; pointer-events: none; } .iax-mask-part { position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, .90); z-index: 2147482000; pointer-events: none; } .iax-structure { position: fixed; top: 0; bottom: 0; width: 320px; max-width: 86vw; background: var(--ia-color-white); z-index: 2147483100; box-shadow: 0 0 40px rgba(0, 0, 0, .3); display: flex; flex-direction: column; font: 400 13px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .ia-accessibility-root.iax-pos-right .iax-structure { right: 0; } .ia-accessibility-root.iax-pos-left .iax-structure { left: 0; } .iax-structure header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--iax-accent, var(--ia-color-accent)); color: var(--ia-color-white); font-weight: 700; } .iax-structure header button { background: rgba(255, 255, 255, .16); border: none; color: var(--ia-color-white); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; } .iax-structure ul { list-style: none; margin: 0; padding: 8px; overflow-y: auto; } .iax-structure li { margin: 0; } .iax-structure a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--ia-color-text); text-decoration: none; } .iax-structure a:hover { background: #F3F4F6; } .iax-structure .lvl-2 { padding-left: 22px; } .iax-structure .lvl-3 { padding-left: 34px; } .iax-structure .lvl-4, .iax-structure .lvl-5, .iax-structure .lvl-6 { padding-left: 46px; } /* ============================================================ * 2. Page effect classes (applied to ) * ============================================================ */ html.iax-hide-images body :is(img, picture, video, svg, figure, [style*="background-image"]) { opacity: 0 !important; } html.iax-highlight-links body a { outline: 2px solid #111111 !important; outline-offset: 2px !important; background: #FEF08A !important; color: #111111 !important; text-decoration: underline !important; } html.iax-font-size body :is(p, li, a, span, h1, h2, h3, h4, h5, h6, button, input, label, td, th, blockquote, figcaption, em, strong, small) { font-size: calc(var(--iax-el-fs, 1em) * var(--iax-fs, 1)) !important; } html.iax-line-height body :is(p, li, a, span, h1, h2, h3, h4, h5, h6, blockquote, td, div) { line-height: var(--iax-lh, 1.8) !important; } html.iax-letter-spacing body :is(p, li, a, span, h1, h2, h3, h4, h5, h6, blockquote, td) { letter-spacing: var(--iax-ls, 0.12em) !important; word-spacing: calc(var(--iax-ls, 0.12em) * 1.6) !important; } html.iax-readable-font body :is(p, li, a, span, h1, h2, h3, h4, h5, h6, button, input, label, td, th, div, blockquote) { font-family: 'Verdana', 'Tahoma', Arial, sans-serif !important; } html.iax-dyslexic-font body :is(p, li, a, span, h1, h2, h3, h4, h5, h6, button, input, label, td, th, div, blockquote) { font-family: 'OpenDyslexic', 'Comic Sans MS', 'Comic Neue', cursive, sans-serif !important; letter-spacing: 0.03em !important; } html.iax-font-weight body :is(p, li, a, span, h1, h2, h3, h4, h5, h6, button, input, label, td, th, div, blockquote) { font-weight: 700 !important; } html.iax-align-left body :is(p, li, h1, h2, h3, h4, h5, h6, div, blockquote) { text-align: left !important; } html.iax-align-center body :is(p, li, h1, h2, h3, h4, h5, h6, div, blockquote) { text-align: center !important; } html.iax-align-right body :is(p, li, h1, h2, h3, h4, h5, h6, div, blockquote) { text-align: right !important; } html.iax-align-justify body :is(p, li, div, blockquote) { text-align: justify !important; } html.iax-contrast-dark body, html.iax-contrast-dark body :is(div, section, article, header, footer, main, aside, nav, p, li) { background-color: #000 !important; color: #fff !important; } html.iax-contrast-dark body a { color: #FFD400 !important; } html.iax-contrast-light body, html.iax-contrast-light body :is(div, section, article, header, footer, main, aside, nav, p, li) { background-color: #fff !important; color: #000 !important; } html.iax-contrast-light body a { color: #0000EE !important; } html.iax-highlight-titles body :is(h1, h2, h3, h4, h5, h6) { outline: 2px dashed #DC2626 !important; outline-offset: 3px !important; } html.iax-highlight-content body :is(p, article, section, main, li, blockquote) { outline: 2px solid #2563EB !important; outline-offset: 2px !important; } html.iax-stop-animations body *, html.iax-stop-animations body *::before, html.iax-stop-animations body *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; } html.iax-keyboard-nav body *:focus { outline: 3px solid #2563EB !important; outline-offset: 2px !important; } html.iax-highlight-hover body *:hover { outline: 2px solid #7C3AED !important; outline-offset: 1px !important; } html.iax-interactive-highlight body :is(a, button, input, select, textarea, [role="button"], [tabindex]) { outline: 2px solid #059669 !important; outline-offset: 2px !important; } html.iax-big-cursor body, html.iax-big-cursor body * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6 1 3 7-3 1-3-7-5 4z' fill='white' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") 4 2, auto !important; } /* ======================================== Accessibility Profiles ======================================== */ .ia-accessibility-root .iax-profiles { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .ia-accessibility-root .iax-profile-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--ia-module-border-color); border-radius: 14px; background: var(--ia-module-bg); cursor: pointer; transition: all .2s ease; } .ia-accessibility-root .iax-profile-item.active { background: var(--ia-act-module-bg); border-color: var(--ia-act-module-border-color); } .ia-accessibility-root .iax-profile-radio { margin-top: 3px; position: absolute; opacity: 0; pointer-events: none; } .ia-accessibility-root .iax-profile-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--ia-module-icon-bg-color); color: var(--ia-module-icon-color); } .ia-accessibility-root .iax-profile-item.active .iax-profile-icon { background: var(--ia-act-module-icon-bg-color); color: var(--ia-act-module-icon-color); } .ia-accessibility-root .iax-profile-content { display: flex; flex-direction: column; gap: 4px; } .ia-accessibility-root .iax-profile-name { font-weight: 600; color: var(--ia-module-text-color); } .ia-accessibility-root .iax-profile-desc { font-size: 13px; line-height: 1.5; opacity: .8; color: var(--ia-module-text-color); } .ia-accessibility-root .iax-profile-title { color: var(--ia-module-text-color); }