/* ================================================================ Serlonghi Accessibility Widget — widget.css ================================================================ */ /* ── CSS custom properties (defaults, overridden by JS) ───────── */ :root { --a11y-font-scale: 1; --a11y-letter-spacing: 0; --a11y-line-height: 0; --a11y-word-spacing: 0; /* Widget own palette — absolute values, immune to color schemes */ --a11y-w-bg: #12172a; --a11y-w-bg2: #1c2340; --a11y-w-border: #2d3561; --a11y-w-text: #e2e8f0; --a11y-w-muted: #8899bb; --a11y-w-accent: #00d4ff; --a11y-w-accent2: #39d353; --a11y-w-radius: 10px; --a11y-w-shadow: 0 8px 40px rgba(0,0,0,0.6); } /* ── Apply dynamic CSS properties ─────────────────────────────── */ html { font-size: calc(16px * var(--a11y-font-scale)) !important; } body { letter-spacing: calc(var(--a11y-letter-spacing) * 0.025em) !important; line-height: calc(1.6 + var(--a11y-line-height) * 0.2) !important; word-spacing: calc(var(--a11y-word-spacing) * 0.05em) !important; } /* ================================================================ ACCESSIBILITY OVERRIDES Applied via data-attributes on or ================================================================ */ /* ── 1. Color schemes (CSS-var-based) ─────────────────────────── */ html[data-a11y-scheme="contrast-dark"] { --bg-primary: #000000; --bg-secondary: #0a0a0a; --bg-card: #111111; --bg-card-hover: #1a1a1a; --text-primary: #ffffff; --text-secondary:#ffffff; --text-muted: #dddddd; --accent-neon: #ffff00; --accent-green: #00ff88; --accent-purple: #ff88ff; --border: #ffffff; --border-hover: #cccccc; } html[data-a11y-scheme="contrast-light"] { --bg-primary: #ffffff; --bg-secondary: #f0f0f0; --bg-card: #e8e8e8; --bg-card-hover: #dcdcdc; --text-primary: #000000; --text-secondary:#111111; --text-muted: #333333; --accent-neon: #0055cc; --accent-green: #006622; --accent-purple: #6600aa; --border: #000000; --border-hover: #444444; } html[data-a11y-scheme="contrast-light"] body { background-color: #ffffff; color: #000000; } html[data-a11y-scheme="soft"] { --bg-primary: #1a1208; --bg-secondary: #241a0e; --bg-card: #2e2010; --bg-card-hover: #382818; --text-primary: #f0e8d8; --text-secondary:#d8c8a8; --text-muted: #a89070; --accent-neon: #e8b840; --accent-green: #80c870; --accent-purple: #c890e8; --border: #5a4830; --border-hover: #786040; } /* ── 2. Filter-based schemes (applied to page wrapper) ────────── */ #a11y-page-content { transition: filter 0.2s ease; } html[data-a11y-scheme="grayscale"] #a11y-page-content { filter: grayscale(100%); } html[data-a11y-scheme="inverted"] #a11y-page-content { filter: invert(100%); } html[data-a11y-scheme="inverted"] #a11y-page-content img, html[data-a11y-scheme="inverted"] #a11y-page-content video { filter: invert(100%); } html[data-a11y-scheme="protan"] #a11y-page-content { filter: url(#a11y-filter-protan); } html[data-a11y-scheme="deutan"] #a11y-page-content { filter: url(#a11y-filter-deutan); } html[data-a11y-scheme="tritan"] #a11y-page-content { filter: url(#a11y-filter-tritan); } /* ── 3. Font overrides ─────────────────────────────────────────── */ html[data-a11y-font="sans"] { --font-sans: Arial, Helvetica, system-ui, sans-serif; } html[data-a11y-font="serif"] { --font-sans: Georgia, 'Times New Roman', serif; } html[data-a11y-font="dyslexic"] { --font-sans: 'Open-Dyslexic', 'OpenDyslexic', sans-serif; } html[data-a11y-font="mono"] { --font-sans: 'JetBrains Mono', 'Fira Code', monospace; } /* ── 4. Text alignment ─────────────────────────────────────────── */ html[data-a11y-align] p, html[data-a11y-align] li, html[data-a11y-align] td, html[data-a11y-align] h1, html[data-a11y-align] h2, html[data-a11y-align] h3 { text-align: left !important; } /* ── 5. Link highlight ─────────────────────────────────────────── */ html[data-a11y-links] a:not(.a11y-trigger):not(.a11y-panel *) { background-color: rgba(0, 212, 255, 0.15) !important; outline: 1px solid var(--accent-neon, #00d4ff) !important; border-radius: 3px !important; padding: 0 2px !important; text-decoration: underline !important; } html[data-a11y-scheme="contrast-light"][data-a11y-links] a { background-color: rgba(0, 85, 200, 0.12) !important; outline-color: #0055cc !important; } /* ── 6. Enhanced focus ring ────────────────────────────────────── */ html[data-a11y-focus] *:focus, html[data-a11y-focus] *:focus-visible { outline: 3px solid #ffff00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(255,255,0,0.25) !important; } /* ── 7. Hide images ────────────────────────────────────────────── */ html[data-a11y-images] img, html[data-a11y-images] video, html[data-a11y-images] .about-photo, html[data-a11y-images] .about-photo-wrap { visibility: hidden !important; } /* ── 8. Reduce motion ──────────────────────────────────────────── */ html[data-a11y-motion] *, html[data-a11y-motion] *::before, html[data-a11y-motion] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ── 9. Dyslexia preset ────────────────────────────────────────── */ html[data-a11y-dyslexia] { --font-sans: 'Open-Dyslexic', 'OpenDyslexic', sans-serif; } html[data-a11y-dyslexia] body { letter-spacing: 0.05em !important; line-height: 1.9 !important; word-spacing: 0.1em !important; } html[data-a11y-dyslexia] p, html[data-a11y-dyslexia] li, html[data-a11y-dyslexia] td { text-align: left !important; } /* ── 10. Reading guide ─────────────────────────────────────────── */ #a11y-reading-guide { position: fixed; left: 0; width: 100%; height: 2.5em; background: rgba(0, 212, 255, 0.07); border-top: 1px solid rgba(0, 212, 255, 0.25); border-bottom: 1px solid rgba(0, 212, 255, 0.25); pointer-events: none; z-index: 9990; display: none; transform: translateY(-50%); } html[data-a11y-scheme="contrast-light"] #a11y-reading-guide { background: rgba(0, 85, 200, 0.07); border-color: rgba(0, 85, 200, 0.3); } /* ── 11. Large cursor follower ─────────────────────────────────── */ #a11y-cursor-follower { position: fixed; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #00d4ff; background: rgba(0, 212, 255, 0.12); pointer-events: none; transform: translate(-50%, -50%); z-index: 9991; display: none; transition: left 0.04s linear, top 0.04s linear; } html[data-a11y-cursor] { cursor: none !important; } html[data-a11y-cursor] * { cursor: none !important; } html[data-a11y-cursor] #a11y-cursor-follower { display: block; } /* ── 12. Focus / ADHD mode ─────────────────────────────────────── */ .a11y-focus-highlight { background: rgba(0, 212, 255, 0.06) !important; border-radius: 4px; outline: 1px solid rgba(0, 212, 255, 0.2) !important; transition: background 0.15s; } html[data-a11y-scheme="contrast-light"] .a11y-focus-highlight { background: rgba(0, 85, 200, 0.07) !important; outline-color: rgba(0, 85, 200, 0.3) !important; } /* ================================================================ WIDGET UI ================================================================ */ /* ── Trigger button ────────────────────────────────────────────── */ .a11y-trigger { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9995; width: 48px; height: 48px; border-radius: 50%; background: var(--a11y-w-bg); color: var(--a11y-w-accent); border: 2px solid var(--a11y-w-border); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--a11y-w-shadow); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .a11y-trigger:hover, .a11y-trigger:focus-visible { transform: scale(1.1); border-color: var(--a11y-w-accent); box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.3), var(--a11y-w-shadow); outline: none; } .a11y-trigger[aria-expanded="true"] { border-color: var(--a11y-w-accent); background: var(--a11y-w-bg2); } /* ── Backdrop ──────────────────────────────────────────────────── */ .a11y-overlay { position: fixed; inset: 0; z-index: 9993; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; } .a11y-overlay.visible { opacity: 1; visibility: visible; } /* ── Panel ─────────────────────────────────────────────────────── */ .a11y-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 320px; z-index: 9994; background: var(--a11y-w-bg); border-left: 1px solid var(--a11y-w-border); box-shadow: var(--a11y-w-shadow); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 14px; color: var(--a11y-w-text); line-height: 1.5; letter-spacing: normal; word-spacing: normal; } .a11y-panel[aria-hidden="false"] { transform: translateX(0); } @media (max-width: 360px) { .a11y-panel { width: 100vw; } } /* ── Panel header ──────────────────────────────────────────────── */ .a11y-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--a11y-w-border); flex-shrink: 0; } .a11y-panel__title { font-size: 0.95rem; font-weight: 600; color: var(--a11y-w-accent); display: flex; align-items: center; gap: 0.5rem; margin: 0; border: none; padding: 0; } .a11y-panel__close { background: none; border: none; color: var(--a11y-w-muted); cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 4px 6px; border-radius: 4px; transition: color 0.15s, background 0.15s; } .a11y-panel__close:hover, .a11y-panel__close:focus-visible { color: var(--a11y-w-text); background: var(--a11y-w-bg2); outline: 2px solid var(--a11y-w-accent); } /* ── Panel body ────────────────────────────────────────────────── */ .a11y-panel__body { flex: 1; overflow-y: auto; padding: 0.5rem 0 1rem; scrollbar-width: thin; scrollbar-color: var(--a11y-w-border) transparent; } .a11y-panel__body::-webkit-scrollbar { width: 5px; } .a11y-panel__body::-webkit-scrollbar-track { background: transparent; } .a11y-panel__body::-webkit-scrollbar-thumb { background: var(--a11y-w-border); border-radius: 4px; } /* ── Section ───────────────────────────────────────────────────── */ .a11y-section { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--a11y-w-border); } .a11y-section:last-child { border-bottom: none; } .a11y-section__title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--a11y-w-muted); margin: 0 0 0.75rem; border: none; padding: 0; } /* ── Row ───────────────────────────────────────────────────────── */ .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; } .a11y-row--col { flex-direction: column; align-items: flex-start; } .a11y-row:last-child { margin-bottom: 0; } .a11y-label { font-size: 0.825rem; color: var(--a11y-w-text); white-space: nowrap; } /* ── Stepper ───────────────────────────────────────────────────── */ .a11y-stepper { display: flex; align-items: center; gap: 0; border: 1px solid var(--a11y-w-border); border-radius: 6px; overflow: hidden; flex-shrink: 0; } .a11y-stepper__btn { background: var(--a11y-w-bg2); color: var(--a11y-w-text); border: none; padding: 4px 10px; cursor: pointer; font-size: 0.8rem; font-weight: 600; transition: background 0.15s; white-space: nowrap; } .a11y-stepper__btn:hover, .a11y-stepper__btn:focus-visible { background: var(--a11y-w-accent); color: #000; outline: none; } .a11y-stepper__val { min-width: 36px; text-align: center; font-size: 0.8rem; color: var(--a11y-w-accent); font-weight: 600; padding: 4px 4px; border-left: 1px solid var(--a11y-w-border); border-right: 1px solid var(--a11y-w-border); } /* ── Button group (font selector) ──────────────────────────────── */ .a11y-btn-group { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0.35rem; } .a11y-btn-group button { background: var(--a11y-w-bg2); color: var(--a11y-w-muted); border: 1px solid var(--a11y-w-border); border-radius: 5px; padding: 4px 10px; font-size: 0.75rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .a11y-btn-group button:hover, .a11y-btn-group button:focus-visible { color: var(--a11y-w-text); border-color: var(--a11y-w-accent); outline: none; } .a11y-btn-group button.active, .a11y-btn-group button[aria-pressed="true"] { background: rgba(0, 212, 255, 0.15); color: var(--a11y-w-accent); border-color: var(--a11y-w-accent); } /* ── Color scheme grid ─────────────────────────────────────────── */ .a11y-scheme-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .a11y-scheme-btn { background: var(--a11y-w-bg2); border: 1px solid var(--a11y-w-border); border-radius: 7px; padding: 6px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 0.68rem; color: var(--a11y-w-muted); text-align: center; line-height: 1.2; transition: border-color 0.15s, color 0.15s; } .a11y-scheme-btn:hover, .a11y-scheme-btn:focus-visible { border-color: var(--a11y-w-accent); color: var(--a11y-w-text); outline: none; } .a11y-scheme-btn.active, .a11y-scheme-btn[aria-pressed="true"] { border-color: var(--a11y-w-accent); color: var(--a11y-w-accent); background: rgba(0, 212, 255, 0.08); } .a11y-swatch { width: 32px; height: 20px; border-radius: 4px; display: block; border: 1px solid rgba(255,255,255,0.1); } /* ── Toggle switch ─────────────────────────────────────────────── */ .a11y-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px solid rgba(45, 53, 97, 0.5); } .a11y-toggle-row:last-child { border-bottom: none; } .a11y-toggle-label { font-size: 0.825rem; color: var(--a11y-w-text); cursor: pointer; } .a11y-toggle { background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0; } .a11y-toggle:focus-visible .a11y-toggle__track { outline: 2px solid var(--a11y-w-accent); outline-offset: 2px; } .a11y-toggle__track { display: block; width: 40px; height: 22px; background: var(--a11y-w-bg2); border: 1px solid var(--a11y-w-border); border-radius: 11px; position: relative; transition: background 0.2s, border-color 0.2s; } .a11y-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--a11y-w-muted); transition: transform 0.2s, background 0.2s; } .a11y-toggle[aria-checked="true"] .a11y-toggle__track { background: rgba(0, 212, 255, 0.2); border-color: var(--a11y-w-accent); } .a11y-toggle[aria-checked="true"] .a11y-toggle__thumb { transform: translateX(18px); background: var(--a11y-w-accent); } /* ── Panel footer ──────────────────────────────────────────────── */ .a11y-panel__footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--a11y-w-border); flex-shrink: 0; } .a11y-reset-btn { width: 100%; padding: 0.5rem; background: transparent; color: var(--a11y-w-muted); border: 1px solid var(--a11y-w-border); border-radius: 6px; font-size: 0.825rem; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .a11y-reset-btn:hover, .a11y-reset-btn:focus-visible { color: #ff6b6b; border-color: #ff6b6b; background: rgba(255, 107, 107, 0.08); outline: none; } /* ── Responsive ────────────────────────────────────────────────── */ @media (max-width: 480px) { .a11y-trigger { bottom: 1rem; right: 1rem; width: 44px; height: 44px; } }