/* ============================================================= Панель доступности WAH (Figma 1:229–1:259) + схемы контраста. Классы на : a11y-font-*, a11y-contrast-*, a11y-no-motion. ============================================================= */ /* Legacy-плагин «For the visually impaired» — дублирует WAH-панель, свой цвет кнопки */ #bt_widget-vi-on, .bt_widget-vi, .visually-impaired-controls { display:none !important; } /* ---------- Панель (Figma: #232323 кнопки, ~200px) ---------- */ .a11y-panel { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.45); } .a11y-panel[hidden] { display: none !important; } .a11y-panel__inner { position: fixed; left: 0; top: 0; bottom: 0; width: min(200px, 85vw); background: #fff; color: #111; font-family: var(--font-body); font-size: 14px; line-height: 1.4; overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 4px 0 24px rgba(0,0,0,.2); } .a11y-panel.is-open .a11y-panel__inner { transform: translateX(0); } .a11y-panel__close { display: block; width: 100%; border: 0; background: var(--c-primary, #A67737); color: #fff; font: 500 14px/1.4 var(--font-body); padding: 10px 12px; text-align: center; cursor: pointer; border-radius: 2px; margin: 0; } .a11y-panel__close:hover { background: var(--c-primary-hover, #C59048); } .a11y-panel__block { padding: 12px 10px; border-bottom: 1px solid #000; } .a11y-panel__label { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #111; } .a11y-panel__row { display: flex; gap: 8px; } .a11y-panel__btn { flex: 1; min-height: 36px; padding: 8px 10px; background: #232323; color: #fff; border: 1px solid #fff; border-radius: 2px; font: 500 14px/1.2 var(--font-body); cursor: pointer; } .a11y-panel__btn:hover { background: #3a3a3a; } .a11y-panel__btn--wide { width: 100%; } .a11y-panel__btn[aria-pressed="true"] { outline: 2px solid var(--c-primary, #A67737); outline-offset: 2px; } .a11y-panel__credit { margin: 0; padding: 10px; text-align: center; font-size: 12px; } .a11y-panel__credit a { color: #111; text-decoration: underline; } html.a11y-no-motion .a11y-panel__inner { transition: none !important; } /* ---------- Масштаб шрифта ---------- */ html.a11y-font-100 { --a11y-font-scale: 1; } html.a11y-font-110 { --a11y-font-scale: 1.1; } html.a11y-font-125 { --a11y-font-scale: 1.25; } html.a11y-font-150 { --a11y-font-scale: 1.5; } html[class*="a11y-font-"] { font-size: calc(100% * var(--a11y-font-scale, 1)); } /* ---------- Отключение анимаций ---------- */ html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { html:not(.a11y-no-motion) .hero__swiper.swiper { --a11y-prm: 1; } } /* ---------- Схема: жёлтый по чёрному (ГОСТ/WAH) ---------- */ html.a11y-contrast-yellow { --c-dark: #000; --c-cream: #000; --c-card: #000; --c-text: #ff0; --c-text-muted: #ff0; --c-text-invert: #ff0; --c-primary: #ff0; --c-primary-hover: #fff; --c-menu-active: #fff; --c-logo-accent: #ff0; --c-badge-hero: #330; --c-badge-light: #330; --c-divider-light: #ff0; } html.a11y-contrast-yellow, html.a11y-contrast-yellow body { background: #000 !important; color: #ff0 !important; } html.a11y-contrast-yellow .btn, html.a11y-contrast-yellow .badge { background: #000 !important; color: #ff0 !important; border: 2px solid #ff0 !important; } html.a11y-contrast-yellow a { color: #ff0 !important; text-decoration: underline !important; } html.a11y-contrast-yellow a:hover { color: #fff !important; } html.a11y-contrast-yellow :where(a,button,input,[tabindex]):focus-visible { outline: 4px solid #fff !important; outline-offset: 3px !important; } html.a11y-contrast-yellow .hero__media, html.a11y-contrast-yellow .repertoire-card, html.a11y-contrast-yellow .premiere-showcase { background-image: none !important; } html.a11y-contrast-yellow .hero__overlay-grad, html.a11y-contrast-yellow .repertoire-card__overlay, html.a11y-contrast-yellow .premiere-showcase__overlay { background: #000 !important; } html.a11y-contrast-yellow .event-card { box-shadow: none !important; border: 2px solid #ff0; } /* ---------- Схема: белый по чёрному ---------- */ html.a11y-contrast-dark { --c-dark: #000; --c-cream: #000; --c-card: #111; --c-text: #fff; --c-text-muted: #fff; --c-text-invert: #fff; --c-primary: #fff; --c-primary-hover: #ddd; --c-menu-active: #fff; --c-logo-accent: #fff; } html.a11y-contrast-dark, html.a11y-contrast-dark body { background: #000 !important; color: #fff !important; } html.a11y-contrast-dark .btn, html.a11y-contrast-dark .badge { background: #000 !important; color: #fff !important; border: 2px solid #fff !important; } html.a11y-contrast-dark a { color: #fff !important; text-decoration: underline !important; } /* ---------- Схема: чёрно-белая ---------- */ html.a11y-contrast-bw { filter: grayscale(1) contrast(1.25); } html.a11y-contrast-bw body { background: #fff !important; color: #000 !important; } /* ---------- Совместимость: body.low-vision-mode (legacy) ---------- */ body.low-vision-mode:not(.a11y-legacy-off) { /* Дублирует yellow-схему, если включено без html-класса */ }