/* * accessibility.css — Think Insights Accessibility Toolbar * * All feature overrides use html[data-acsb~="featurename"] so they only * activate when the JS writes that token onto . * Scoped with !important throughout to reliably override page styles. */ /* ─── OpenDyslexic font ─────────────────────────────────────────────────── */ @font-face { font-family: 'OpenDyslexic'; src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/OpenDyslexic-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } /* ─── Nav icon button ───────────────────────────────────────────────────── */ .tbm-a11y-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: none; border-radius: 8px; cursor: pointer; color: var(--tbm-link-color, #0D1B2A); flex-shrink: 0; transition: background .22s ease, color .22s ease; } .tbm-a11y-btn:hover, .tbm-a11y-btn:focus-visible, .tbm-a11y-btn[aria-expanded="true"] { background: rgba(0,0,0,.06); color: var(--tg-primary-color); outline: none; } .tbm-a11y-btn .material-symbols-sharp { font-size: 22px; font-variation-settings: 'wght' 400, 'FILL' 0, 'GRAD' 0, 'opsz' 24; transition: font-variation-settings .18s ease; } .tbm-a11y-btn[aria-expanded="true"] .material-symbols-sharp { font-variation-settings: 'wght' 400, 'FILL' 1, 'GRAD' 0, 'opsz' 24; } /* ─── Backdrop overlay ──────────────────────────────────────────────────── */ .zaira-a11y-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .40); z-index: 1079; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .zaira-a11y-overlay.is-open { opacity: 1; pointer-events: auto; } /* ─── Offcanvas panel ───────────────────────────────────────────────────── */ .zaira-a11y-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100vw; height: 100dvh; background: var(--tg-white, #fff); box-shadow: -4px 0 32px rgba(0, 0, 0, .18); z-index: 1080; transform: translateX(100%); transition: transform .3s cubic-bezier(.16, 1, .3, 1); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; } .zaira-a11y-panel.is-open { transform: translateX(0); } [data-bs-theme="dark"] .zaira-a11y-panel { background: var(--tg-secondary-color, #0D1B2A); } /* Header */ .zaira-a11y-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--tg-border-color, #E2DDD7); flex-shrink: 0; background: inherit; position: sticky; top: 0; z-index: 1; } [data-bs-theme="dark"] .zaira-a11y-header { border-color: rgba(255,255,255,.10); } .zaira-a11y-title { font-size: 1rem; font-weight: 700; color: var(--tg-heading-font-color, #0D1B2A); margin: 0; } [data-bs-theme="dark"] .zaira-a11y-title { color: #e4eaf0; } .zaira-a11y-header-actions { display: flex; align-items: center; gap: .5rem; } .zaira-a11y-header-btn { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 600; padding: .375rem .75rem; border: 1px solid var(--tg-border-color, #E2DDD7); border-radius: 6px; background: transparent; color: var(--tg-icon-color, #6B788A); cursor: pointer; transition: background .18s ease, color .18s ease; white-space: nowrap; } .zaira-a11y-header-btn:hover { background: rgba(0,0,0,.05); color: var(--tg-heading-font-color, #0D1B2A); } .zaira-a11y-header-btn .material-symbols-sharp { font-size: 16px; } .zaira-a11y-close-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--tg-border-color, #E2DDD7); border-radius: 6px; background: transparent; color: var(--tg-icon-color, #6B788A); cursor: pointer; transition: background .18s ease; } .zaira-a11y-close-btn:hover { background: rgba(0,0,0,.05); } .zaira-a11y-close-btn .material-symbols-sharp { font-size: 20px; } /* Body / scroll area */ .zaira-a11y-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem 2rem; } /* Section */ .zaira-a11y-section { margin-bottom: 1.5rem; border: 1px solid var(--tg-border-color, #E2DDD7); border-radius: 10px; overflow: hidden; } [data-bs-theme="dark"] .zaira-a11y-section { border-color: rgba(255,255,255,.10); } .zaira-a11y-section-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .875rem 1rem; background: rgba(0,0,0,.03); border: none; font-size: .875rem; font-weight: 700; color: var(--tg-heading-font-color, #0D1B2A); cursor: pointer; text-align: left; transition: background .18s ease; } [data-bs-theme="dark"] .zaira-a11y-section-toggle { background: rgba(255,255,255,.05); color: #e4eaf0; } .zaira-a11y-section-toggle:hover { background: rgba(0,0,0,.06); } .zaira-a11y-section-toggle .material-symbols-sharp { font-size: 18px; transition: transform .22s ease; } .zaira-a11y-section-toggle[aria-expanded="false"] .material-symbols-sharp { transform: rotate(-90deg); } .zaira-a11y-section-content { padding: 1rem; } .zaira-a11y-section-content[hidden] { display: none; } /* Profiles grid */ .zaira-a11y-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; } .zaira-a11y-profile-btn { display: flex; flex-direction: row; align-items: center; gap: .625rem; padding: .75rem .875rem; border: 1.5px solid var(--tg-border-color, #E2DDD7); border-radius: 8px; background: transparent; font-size: .8125rem; font-weight: 600; color: var(--tg-body-font-color, #3D4A56); cursor: pointer; text-align: left; transition: border-color .18s ease, background .18s ease, color .18s ease; line-height: 1.35; } .zaira-a11y-profile-btn .material-symbols-sharp { font-size: 20px; flex-shrink: 0; } .zaira-a11y-profile-btn:hover { border-color: var(--tg-primary-color, #C09A52); background: rgba(192,154,82,.07); } .zaira-a11y-profile-btn.is-active, .zaira-a11y-profile-btn[aria-checked="true"] { border-color: var(--tg-primary-color, #C09A52); background: rgba(192,154,82,.12); color: var(--tg-heading-font-color, #0D1B2A); } [data-bs-theme="dark"] .zaira-a11y-profile-btn { color: #c8d0da; border-color: rgba(255,255,255,.15); } [data-bs-theme="dark"] .zaira-a11y-profile-btn.is-active { color: #e4eaf0; } /* Feature buttons grid */ .zaira-a11y-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; } .zaira-a11y-feature-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem; padding: .75rem .5rem; border: 1.5px solid var(--tg-border-color, #E2DDD7); border-radius: 8px; background: transparent; font-size: .725rem; font-weight: 600; color: var(--tg-body-font-color, #3D4A56); cursor: pointer; text-align: center; line-height: 1.3; min-height: 72px; transition: border-color .18s ease, background .18s ease, color .18s ease; } .zaira-a11y-feature-btn .material-symbols-sharp { font-size: 22px; } .zaira-a11y-feature-btn:hover { border-color: var(--tg-primary-color, #C09A52); background: rgba(192,154,82,.07); } .zaira-a11y-feature-btn.is-active, .zaira-a11y-feature-btn[aria-checked="true"] { border-color: var(--tg-primary-color, #C09A52); background: rgba(192,154,82,.14); color: var(--tg-heading-font-color, #0D1B2A); } [data-bs-theme="dark"] .zaira-a11y-feature-btn { color: #c8d0da; border-color: rgba(255,255,255,.12); } [data-bs-theme="dark"] .zaira-a11y-feature-btn.is-active { color: #e4eaf0; } /* Step-group (text size, line height, spacing) */ .zaira-a11y-step-group { grid-column: span 3; } .zaira-a11y-step-label { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 700; color: var(--tg-heading-font-color, #0D1B2A); margin-bottom: .5rem; } [data-bs-theme="dark"] .zaira-a11y-step-label { color: #e4eaf0; } .zaira-a11y-step-label .material-symbols-sharp { font-size: 18px; } .zaira-a11y-step-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .zaira-a11y-step-btn { padding: .5rem; border: 1.5px solid var(--tg-border-color, #E2DDD7); border-radius: 6px; background: transparent; font-size: .875rem; font-weight: 700; color: var(--tg-body-font-color, #3D4A56); cursor: pointer; text-align: center; transition: border-color .18s ease, background .18s ease; } .zaira-a11y-step-btn:hover { border-color: var(--tg-primary-color, #C09A52); background: rgba(192,154,82,.07); } .zaira-a11y-step-btn.is-active { border-color: var(--tg-primary-color, #C09A52); background: rgba(192,154,82,.14); color: var(--tg-heading-font-color); } [data-bs-theme="dark"] .zaira-a11y-step-btn { color: #c8d0da; border-color: rgba(255,255,255,.12); } /* Footer */ .zaira-a11y-footer { padding: .875rem 1.25rem; border-top: 1px solid var(--tg-border-color, #E2DDD7); flex-shrink: 0; font-size: .775rem; color: var(--tg-icon-color, #6B788A); text-align: center; } [data-bs-theme="dark"] .zaira-a11y-footer { border-color: rgba(255,255,255,.10); } /* ───────────────────────────────────────────────────────────────────────── ACCESSIBILITY FEATURE CSS — applied via data-acsb="..." on ───────────────────────────────────────────────────────────────────────── */ /* Readable font */ html[data-acsb~="readablefont"] *:not(.zaira-a11y-panel *) { font-family: Arial, Helvetica, sans-serif !important; } /* Dyslexia-friendly font */ html[data-acsb~="dyslexic"] *:not(.zaira-a11y-panel *) { font-family: 'OpenDyslexic', Arial, sans-serif !important; } /* Highlight headings */ html[data-acsb~="highlighttitles"] h1:not(.zaira-a11y-panel *), html[data-acsb~="highlighttitles"] h2:not(.zaira-a11y-panel *), html[data-acsb~="highlighttitles"] h3:not(.zaira-a11y-panel *), html[data-acsb~="highlighttitles"] h4:not(.zaira-a11y-panel *), html[data-acsb~="highlighttitles"] h5:not(.zaira-a11y-panel *), html[data-acsb~="highlighttitles"] h6:not(.zaira-a11y-panel *) { background-color: #ffff00 !important; color: #000000 !important; outline: 2px solid #e6b800 !important; } /* Highlight links */ html[data-acsb~="highlightlinks"] a:not(.zaira-a11y-panel *) { background-color: #ffff00 !important; color: #000000 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; padding: 1px 3px !important; } /* Highlight buttons */ html[data-acsb~="highlightbuttons"] button:not(.zaira-a11y-panel *), html[data-acsb~="highlightbuttons"] [role="button"]:not(.zaira-a11y-panel *), html[data-acsb~="highlightbuttons"] input[type="button"], html[data-acsb~="highlightbuttons"] input[type="submit"], html[data-acsb~="highlightbuttons"] .btn:not(.zaira-a11y-panel *) { outline: 3px solid #ff0000 !important; outline-offset: 3px !important; } /* Hide images */ html[data-acsb~="hideimages"] img, html[data-acsb~="hideimages"] video, html[data-acsb~="hideimages"] picture, html[data-acsb~="hideimages"] [role="img"]:not([class*="material"]):not([class*="icon"]) { visibility: hidden !important; height: 0 !important; width: 0 !important; } /* Stop animations */ html[data-acsb~="stopanimations"] *, html[data-acsb~="stopanimations"] *::before, html[data-acsb~="stopanimations"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Text size */ html[data-acsb~="textsizenormal"] { font-size: 115% !important; } html[data-acsb~="textsizelarge"] { font-size: 130% !important; } html[data-acsb~="textsizebig"] { font-size: 150% !important; } /* Line height */ html[data-acsb~="lineheightnormal"] *:not(.zaira-a11y-panel *) { line-height: 1.9 !important; } html[data-acsb~="lineheightlarge"] *:not(.zaira-a11y-panel *) { line-height: 2.3 !important; } html[data-acsb~="lineheightbig"] *:not(.zaira-a11y-panel *) { line-height: 2.8 !important; } /* Text spacing */ html[data-acsb~="textspacingnormal"] *:not(.zaira-a11y-panel *) { letter-spacing: 0.05em !important; word-spacing: 0.12em !important; } html[data-acsb~="textspacinglarge"] *:not(.zaira-a11y-panel *) { letter-spacing: 0.10em !important; word-spacing: 0.20em !important; } html[data-acsb~="textspacingbig"] *:not(.zaira-a11y-panel *) { letter-spacing: 0.16em !important; word-spacing: 0.30em !important; } /* Dark contrast */ html[data-acsb~="contrastdark"] { filter: invert(1) hue-rotate(180deg) !important; } html[data-acsb~="contrastdark"] img, html[data-acsb~="contrastdark"] video, html[data-acsb~="contrastdark"] canvas { filter: invert(1) hue-rotate(180deg) !important; } /* Light contrast */ html[data-acsb~="contrastlight"], html[data-acsb~="contrastlight"] body { background: #ffffff !important; color: #000000 !important; } html[data-acsb~="contrastlight"] p, html[data-acsb~="contrastlight"] li, html[data-acsb~="contrastlight"] td { color: #000000 !important; } /* Invert colors */ html[data-acsb~="invertcolors"] { filter: invert(1) !important; } html[data-acsb~="invertcolors"] img, html[data-acsb~="invertcolors"] video, html[data-acsb~="invertcolors"] canvas { filter: invert(1) !important; } /* Change colors (high-visibility yellow-on-black) */ html[data-acsb~="changecolors"], html[data-acsb~="changecolors"] body { background: #000000 !important; color: #ffff00 !important; } html[data-acsb~="changecolors"] a { color: #00ffff !important; } html[data-acsb~="changecolors"] h1, html[data-acsb~="changecolors"] h2, html[data-acsb~="changecolors"] h3, html[data-acsb~="changecolors"] h4, html[data-acsb~="changecolors"] h5, html[data-acsb~="changecolors"] h6 { color: #ffffff !important; } /* High contrast */ html[data-acsb~="highcontrast"] { filter: contrast(160%) !important; } /* High saturation */ html[data-acsb~="highsaturation"] { filter: saturate(250%) !important; } /* Low saturation */ html[data-acsb~="lowsaturation"] { filter: saturate(40%) !important; } /* Monochrome */ html[data-acsb~="monochrome"] { filter: grayscale(100%) !important; } /* Reading guide line */ #zaira-reading-guide { position: fixed; left: 0; width: 100%; height: 3px; background: rgba(0, 100, 200, .55); z-index: 99999; pointer-events: none; box-shadow: 0 0 8px rgba(0, 100, 200, .4); top: 0; } /* Reading mask */ #zaira-reading-mask { position: fixed; inset: 0; z-index: 99998; pointer-events: none; } #zaira-reading-mask::before, #zaira-reading-mask::after { content: ''; position: absolute; left: 0; right: 0; background: rgba(0, 0, 0, .75); } #zaira-reading-mask::before { top: 0; height: var(--mask-top, 40%); } #zaira-reading-mask::after { bottom: 0; height: var(--mask-bottom, 40%); } /* Big black cursor */ html[data-acsb~="bigblackcursor"], html[data-acsb~="bigblackcursor"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='48' viewBox='0 0 36 48'%3E%3Cpath d='M4 2 L4 40 L13 30 L20 46 L26 43 L19 27 L32 27 Z' fill='black' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, default !important; } /* Big white cursor */ html[data-acsb~="bigwhitecursor"], html[data-acsb~="bigwhitecursor"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='48' viewBox='0 0 36 48'%3E%3Cpath d='M4 2 L4 40 L13 30 L20 46 L26 43 L19 27 L32 27 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, default !important; } /* Keep accessibility panel unaffected by page-level filters */ html[data-acsb] .zaira-a11y-panel, html[data-acsb] .zaira-a11y-overlay { filter: none !important; } html[data-acsb~="contrastdark"] .zaira-a11y-panel, html[data-acsb~="invertcolors"] .zaira-a11y-panel { filter: invert(1) hue-rotate(180deg) !important; } /* ─── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .zaira-a11y-panel { width: 100vw; } .zaira-a11y-profiles { grid-template-columns: 1fr; } }