/* ============================================================ SimplaTask — Accessibility Widget (Phase 1) Framework-free. Applies user preferences via classes / CSS custom properties on (documentElement). All rules are scoped so the widget's own UI (#st-a11y) is never affected. Accent uses the brand tokens (--brand-*) from head.php. ============================================================ */ /* ---- Local dyslexia-friendly font ---- */ @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* ============================================================ USER PREFERENCE RULES (applied to the page, not the widget) ============================================================ */ /* Font size — always-on calc; default var = 1 → 100% (no change). */ html { font-size: calc(100% * var(--a11y-font, 1)); } /* Line height */ html.a11y-line :where(p, li, a, span, small, strong, em, label, h1, h2, h3, h4, h5, h6, blockquote, figcaption, dd, dt, td, th) { line-height: var(--a11y-line, 1.6) !important; } /* Readable font (Atkinson Hyperlegible → legible fallbacks) */ html.a11y-readable body { font-family: 'Atkinson Hyperlegible', Verdana, Tahoma, Arial, sans-serif !important; } /* Dyslexia-friendly font */ html.a11y-dyslexic body { font-family: 'OpenDyslexic', 'Comic Sans MS', Verdana, sans-serif !important; } /* Keep icon fonts intact under readable/dyslexic (fontello + generic) */ html.a11y-readable [class*="icon-"], html.a11y-dyslexic [class*="icon-"], html.a11y-readable i[class^="icon"], html.a11y-dyslexic i[class^="icon"] { font-family: 'fontello' !important; } /* Highlight links */ html.a11y-links :where(a) { text-decoration: underline !important; text-underline-offset: 2px !important; text-decoration-thickness: 2px !important; color: var(--brand-primary-hover, #E8602F) !important; background: var(--brand-bg-softer, #FFF0EB) !important; outline: 1px solid var(--brand-primary, #FF7343) !important; border-radius: 3px; } /* Bionic / cognitive reading — the wrapped prefix */ html.a11y-cognitive b.a11y-bionic { font-weight: 700 !important; } /* Text alignment overrides */ html[data-a11y-align="left"] :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, figcaption, .text-center, .text-right) { text-align: left !important; } html[data-a11y-align="center"] :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, figcaption, .text-left, .text-right) { text-align: center !important; } html[data-a11y-align="right"] :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, figcaption, .text-left, .text-center) { text-align: right !important; } /* ============================================================ PHASE 2 — preference rules ============================================================ */ /* Letter / word spacing */ html.a11y-letter :where(p, li, a, span, small, strong, em, label, h1, h2, h3, h4, h5, h6, td, th, blockquote) { letter-spacing: var(--a11y-letter, 0) !important; } html.a11y-word :where(p, li, a, span, small, strong, em, label, h1, h2, h3, h4, h5, h6, td, th, blockquote) { word-spacing: var(--a11y-word, 0) !important; } /* Highlight titles */ html.a11y-hltitles :where(h1, h2, h3, h4, h5, h6):not(#st-a11y *) { outline: 2px dashed var(--brand-primary, #FF7343) !important; outline-offset: 4px !important; background: var(--brand-bg-light, #FFF8F5) !important; } /* Hide images (keeps layout where possible) */ html.a11y-hideimg :where(img, picture, video):not(#st-a11y *) { visibility: hidden !important; } html.a11y-hideimg :where([style*="background-image"], [style*="url("]):not(#st-a11y *) { background-image: none !important; } /* Stop animations / transitions */ html.a11y-stopanim *, html.a11y-stopanim *::before, html.a11y-stopanim *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; } /* Big cursor */ html.a11y-bigcursor, html.a11y-bigcursor *:not(#st-a11y):not(#st-a11y *) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M6 2l0 26 6-7 4 9 5-2-4-9 9-1z' fill='%23fff' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important; } /* ---- Contrast overlay (backdrop-filter — does NOT break fixed layout) ---- */ #st-a11y-filter { position: fixed; inset: 0; pointer-events: none; z-index: 2147482000; display: none; } html.a11y-contrast-dark #st-a11y-filter { display: block; -webkit-backdrop-filter: invert(1) hue-rotate(180deg); backdrop-filter: invert(1) hue-rotate(180deg); } html.a11y-contrast-high #st-a11y-filter { display: block; -webkit-backdrop-filter: contrast(1.4) saturate(1.35); backdrop-filter: contrast(1.4) saturate(1.35); } html.a11y-contrast-mono #st-a11y-filter { display: block; -webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1); } /* ---- Reading guide (bar following the cursor) ---- */ #st-a11y-guide { position: fixed; left: 0; right: 0; height: 4px; background: var(--brand-primary, #FF7343); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; z-index: 2147482500; display: none; } html.a11y-guide #st-a11y-guide { display: block; } /* ---- Reading mask (dims all but a horizontal band at the cursor) ---- */ .st-a11y-mask-band { position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, .72); pointer-events: none; z-index: 2147482400; display: none; } html.a11y-mask .st-a11y-mask-band { display: block; } #st-a11y-mask-top { top: 0; } #st-a11y-mask-bot { bottom: 0; } /* The widget UI must be immune to the page-level preference rules above. Only reset the properties those rules touch (font, line-height, align) — never background/color, or the widget's own styling gets wiped out. */ #st-a11y, #st-a11y * { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; line-height: normal !important; text-align: left !important; letter-spacing: normal !important; word-spacing: normal !important; } #st-a11y :where(a) { text-decoration: none !important; outline: none !important; background: none !important; color: inherit !important; } /* ============================================================ WIDGET UI ============================================================ */ #st-a11y { --a11y-accent: var(--brand-primary, #FF7343); --a11y-accent-hover: var(--brand-primary-hover, #E8602F); --a11y-ink: #1a1a1a; --a11y-muted: #6b7280; --a11y-line-c: #e5e7eb; --a11y-card: #f5f8ff; position: relative; z-index: 2147483000; font-size: 16px; } /* Launcher button (bottom-left, avoids the bottom-right chat) */ #st-a11y-btn { position: fixed; left: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 9999px; background: var(--a11y-accent); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; z-index: 2147483001; } #st-a11y-btn:hover { background: var(--a11y-accent-hover); transform: translateY(-2px); } #st-a11y-btn:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; } #st-a11y-btn svg { width: 30px; height: 30px; } @media (max-width: 640px) { #st-a11y-btn { left: 14px; bottom: 14px; width: 50px; height: 50px; } #st-a11y-btn svg { width: 26px; height: 26px; } } /* Overlay */ #st-a11y-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 2147483002; } #st-a11y.is-open #st-a11y-overlay { opacity: 1; visibility: visible; } /* Panel */ #st-a11y-panel { position: fixed; left: 20px; bottom: 20px; width: 380px; max-width: calc(100vw - 40px); max-height: min(80vh, 720px); background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); transform: translateY(16px) scale(.98); opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; z-index: 2147483003; display: flex; flex-direction: column; overflow: hidden; color: var(--a11y-ink); } #st-a11y.is-open #st-a11y-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } @media (max-width: 640px) { #st-a11y-panel { left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 82vh; } } /* Header */ #st-a11y-header { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; border-bottom: 1px solid var(--a11y-line-c); } #st-a11y-header .st-a11y-badge { width: 40px; height: 40px; border-radius: 9999px; background: #111827; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } #st-a11y-header .st-a11y-badge svg { width: 24px; height: 24px; } #st-a11y-title { font-size: 17px; font-weight: 700; flex: 1; } #st-a11y-close { width: 34px; height: 34px; border-radius: 9999px; border: none; background: #f3f4f6; color: #374151; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease; } #st-a11y-close:hover { background: #e5e7eb; } #st-a11y-close:focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 2px; } #st-a11y-close svg { width: 18px; height: 18px; } /* Scroll body */ #st-a11y-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } #st-a11y-section-label, .st-a11y-seclabel { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--a11y-muted); margin: 2px 2px -2px; } .st-a11y-seclabel { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--a11y-line-c); } /* Stepper card (font size, line height) */ .st-a11y-stepper { background: var(--a11y-card); border-radius: 12px; padding: 14px; text-align: center; } .st-a11y-stepper .st-a11y-stepper-label { font-size: 14px; font-weight: 600; margin-bottom: 10px; } .st-a11y-stepper-row { display: flex; align-items: center; gap: 10px; } .st-a11y-step-btn { width: 44px; height: 40px; border-radius: 9px; border: none; background: var(--a11y-accent); color: #fff; font-size: 22px; font-weight: 700; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease; } .st-a11y-step-btn:hover { background: var(--a11y-accent-hover); } .st-a11y-step-btn:focus-visible { outline: 3px solid #111827; outline-offset: 2px; } .st-a11y-step-value { flex: 1; background: #fff; border-radius: 8px; padding: 10px 8px; font-size: 14px; font-weight: 600; border: 1px solid var(--a11y-line-c); } /* Toggle-card grid */ .st-a11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .st-a11y-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .st-a11y-toggle { background: var(--a11y-card); border: 2px solid transparent; border-radius: 12px; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; text-align: center; color: var(--a11y-ink); font-family: inherit; transition: border-color .2s ease, background-color .2s ease; } .st-a11y-toggle:hover { background: #eef3ff; } .st-a11y-toggle:focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 2px; } .st-a11y-toggle .st-a11y-ic { width: 40px; height: 40px; border-radius: 9999px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--a11y-line-c); } .st-a11y-toggle .st-a11y-ic svg { width: 22px; height: 22px; color: #111827; } .st-a11y-toggle .st-a11y-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; } .st-a11y-toggle[aria-pressed="true"] { border-color: var(--a11y-accent); background: var(--brand-bg-light, #FFF8F5); } .st-a11y-toggle[aria-pressed="true"] .st-a11y-ic { background: var(--a11y-accent); box-shadow: none; } .st-a11y-toggle[aria-pressed="true"] .st-a11y-ic svg { color: #fff; } /* Footer / reset */ #st-a11y-footer { padding: 14px 16px; border-top: 1px solid var(--a11y-line-c); display: flex; align-items: center; justify-content: space-between; gap: 12px; } #st-a11y-reset { appearance: none; border: 1px solid var(--a11y-line-c); background: #fff; color: var(--a11y-ink); font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: 9999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background-color .2s ease, border-color .2s ease; } #st-a11y-reset:hover { background: #f3f4f6; border-color: #d1d5db; } #st-a11y-reset:focus-visible { outline: 3px solid var(--a11y-accent); outline-offset: 2px; } #st-a11y-reset svg { width: 15px; height: 15px; } #st-a11y-note { font-size: 11px; color: var(--a11y-muted); text-align: right; line-height: 1.35; } /* Text magnifier floating box */ #st-a11y-mag { position: fixed; z-index: 2147483004; max-width: 460px; background: #111827; color: #fff; font-family: 'Inter', system-ui, sans-serif; font-size: 22px; line-height: 1.4; padding: 12px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); pointer-events: none; display: none; } #st-a11y.mag-on #st-a11y-mag.is-visible { display: block; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { #st-a11y-btn, #st-a11y-panel, #st-a11y-overlay { transition: none !important; } }