/* ============================================================ Слой доступности «Универ» — низкое зрение + слепые Подключать после ds.css. Управляется атрибутами на : data-fs = "lg" | "xl" (размер шрифта) data-contrast = "bw" | "wb" | "by" (контрастные схемы) data-images = "off" (скрыть декоративные изображения) data-motion = "off" (убрать анимации) ============================================================ */ /* — Screen-reader-only (для слепых: невидимо, но читается озвучкой) — */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* — Скип-ссылка «к содержимому» — */ .skip-link{position:fixed;left:8px;top:-60px;z-index:200; background:var(--accent-strong);color:var(--on-accent); padding:10px 16px;border-radius:var(--r-pill);font:600 14px/1 var(--font-sans); text-decoration:none;transition:top .18s ease} .skip-link:focus{top:8px;outline:3px solid var(--text);outline-offset:2px} /* — Видимый фокус для клавиатуры (всегда, всем на пользу) — */ :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px} [data-contrast] :focus-visible{outline-color:var(--text)} /* ============ Размер шрифта ============ */ html[data-fs="lg"]{font-size:118%} html[data-fs="xl"]{font-size:140%} /* ============ Контрастные схемы (версия для слабовидящих) ============ Переопределяем токены DS — работает для обеих тем и всех компонентов. */ html[data-contrast="bw"]{ /* чёрным по белому */ --bg-1:#fff;--bg-2:#fff;--bg-3:#fff;--surface:#fff;--surface-2:#fff;--field:#fff;--media-bg:#fff; --text:#000;--muted:#111;--dim:#333; --stroke:#000;--stroke-2:#000;--hairline:2px; --accent:#0a3d91;--accent-ink:#0a3d91;--accent-strong:#0a3d91;--accent-2:#0a3d91;--on-accent:#fff; --success:#0a6b1e;--warning:#8a4b00;--danger:#a00000;--info:#0a3d91; } html[data-contrast="wb"]{ /* белым по чёрному */ --bg-1:#000;--bg-2:#000;--bg-3:#000;--surface:#000;--surface-2:#000;--field:#000;--media-bg:#000; --text:#fff;--muted:#f0f0f0;--dim:#cfcfcf; --stroke:#fff;--stroke-2:#fff;--hairline:2px; --accent:#ffd21f;--accent-ink:#ffd21f;--accent-strong:#ffd21f;--accent-2:#ffd21f;--on-accent:#000; --success:#7CFC7C;--warning:#ffd21f;--danger:#ff9a9a;--info:#8ec7ff; } html[data-contrast="by"]{ /* тёмно-синим по бежевому */ --bg-1:#f5efd8;--bg-2:#f5efd8;--bg-3:#f5efd8;--surface:#fbf6e6;--surface-2:#f0e9cf;--field:#fbf6e6;--media-bg:#f0e9cf; --text:#0a2a5c;--muted:#123a6b;--dim:#2b4d7a; --stroke:#0a2a5c;--stroke-2:#0a2a5c;--hairline:2px; --accent:#0a2a5c;--accent-ink:#0a2a5c;--accent-strong:#0a2a5c;--accent-2:#0a2a5c;--on-accent:#fbf6e6; --success:#0a5c2a;--warning:#7a4a00;--danger:#8a0000;--info:#0a2a5c; } /* В любой контрастной схеме убираем стекло/блюр/тени — они вредят низкому зрению */ html[data-contrast] .glass, html[data-contrast] .badge, html[data-contrast] .a11y-panel{ -webkit-backdrop-filter:none!important;backdrop-filter:none!important} html[data-contrast] *{ box-shadow:none!important;text-shadow:none!important;filter:none!important} html[data-contrast] .glass{border-width:2px!important;background:var(--surface)!important} html[data-contrast] .badge{background:var(--surface)!important;border-width:2px!important} /* прозрачные заливки прогресса/оверлеев — под контраст */ html[data-contrast] .bar{background:var(--field)!important;border:2px solid var(--stroke)!important} html[data-contrast] a{text-decoration:underline} /* ============ Отключение изображений ============ */ html[data-images="off"] img{display:none!important} html[data-images="off"] .cover{min-height:64px;display:flex;align-items:center;justify-content:center} html[data-images="off"] [data-noimg]::after{content:attr(data-noimg); font:600 12px/1.3 var(--font-mono);color:var(--muted);text-align:center;padding:10px} /* ============ Уменьшение движения ============ */ html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ============ Виджет доступности ============ */ .a11y-fab{position:fixed;right:16px;bottom:16px;z-index:150; display:inline-flex;align-items:center;gap:0;justify-content:center; width:44px;height:44px;padding:0;border-radius:22px;overflow:hidden;cursor:pointer; background:var(--accent-strong);color:var(--on-accent);border:2px solid transparent; font:600 12px/1 var(--font-sans);box-shadow:var(--shadow-md);white-space:nowrap; transition:width .25s ease,padding .25s ease,gap .25s ease} .a11y-fab svg{width:19px;height:19px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2} .a11y-fab span{max-width:0;overflow:hidden;opacity:0;transition:max-width .25s ease,opacity .2s ease} .a11y-fab:hover,.a11y-fab:focus-visible{width:auto;padding:0 16px 0 12px;gap:8px} .a11y-fab:hover span,.a11y-fab:focus-visible span{max-width:240px;opacity:1} .a11y-fab:hover{filter:brightness(1.06)} .a11y-panel{position:fixed;right:16px;bottom:70px;z-index:151;width:290px;max-width:calc(100vw - 32px); display:none;flex-direction:column;gap:14px;padding:18px; background:var(--surface);border:var(--hairline) solid var(--stroke-2);border-radius:var(--r-lg); -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--saturate));backdrop-filter:blur(var(--blur)) saturate(var(--saturate)); box-shadow:var(--shadow-md)} .a11y-panel.on{display:flex} .a11y-panel h2{font:600 15px/1.2 var(--font-sans);color:var(--text);display:flex;justify-content:space-between;align-items:center} .a11y-panel .close{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:8px} .a11y-panel .close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2} .a11y-grp{display:grid;gap:7px} .a11y-grp>span{font:600 11px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--dim)} .a11y-row{display:flex;gap:6px;flex-wrap:wrap} .a11y-opt{flex:1 1 auto;min-width:0;padding:9px 8px;border-radius:10px;cursor:pointer;text-align:center; background:var(--surface-2);border:var(--hairline) solid var(--stroke);color:var(--text); font:600 12.5px/1.1 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .a11y-opt[aria-pressed="true"]{background:var(--accent-strong);color:var(--on-accent);border-color:transparent} .a11y-opt.sw{flex:0 0 42px;min-width:42px;display:flex;align-items:center;justify-content:center;gap:6px} .a11y-opt.sw i{width:16px;height:16px;border-radius:4px;border:2px solid currentColor;display:inline-block} .a11y-opt.bw i{background:#fff;border-color:#000} .a11y-opt.wb i{background:#000;border-color:#fff} .a11y-opt.by i{background:#f5efd8;border-color:#0a2a5c} .a11y-reset{background:none;border:none;color:var(--accent-ink);cursor:pointer; font:600 13px/1 var(--font-sans);text-decoration:underline;padding:2px;text-align:left}