/* * Версия для слабовидящих (панель доступности). * * Активный режим держится на классах корневого : * .a11y-on — режим включён, показана панель * .a11y-font-125/-150 — масштаб 125% / 150% * .a11y-scheme-white — чёрный текст на белом фоне * .a11y-scheme-black — белый текст на чёрном фоне * .a11y-scheme-blue — тёмно-синий текст на голубом фоне * .a11y-img-off — изображения скрыты, вместо них подписи alt * * Классы ставятся ранним скриптом в до отрисовки, поэтому * сохранённые настройки применяются без мигания обычной темой. */ /* ---------- кнопка в шапке ---------- */ .a11y-toggle { display: inline-flex; align-items: center; gap: 7px; color: #333; text-decoration: none; font-size: 13px; line-height: 1; cursor: pointer; white-space: nowrap; } .a11y-toggle svg { flex: 0 0 auto; fill: currentColor; } /* плашка с глазом — общий вид */ .a11y-badge { z-index: 998; /* слой плавающих кнопок: над контентом, под модалками и меню */ display: flex; align-items: center; box-sizing: border-box; background: #47bcbb; color: #fff; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25); white-space: nowrap; } .a11y-badge svg { flex: 0 0 auto; } /* по наведению/нажатию темнеет фон, глаз всегда остаётся белым */ .a11y-badge:hover, .a11y-badge:active, .a11y-badge:focus-visible { background: #2e8b8a; color: #fff; } .a11y-badge:focus-visible { outline: 3px solid #d00; outline-offset: 2px; } /* десктоп: язычок у левого края на уровне логотипа, уезжает вместе с шапкой; когда появляется клонированное липкое меню, глаз перебирается на его уровень (класс a11y-badge--stuck ставит скрипт по факту видимости #sticky-menu) */ @media (min-width: 721px) { .a11y-badge { position: absolute; left: 0; top: 28px; gap: 10px; max-width: 56px; padding: 12px; border: 2px solid transparent; border-left: none; border-radius: 0 12px 12px 0; overflow: hidden; transition: max-width 0.25s ease; } .a11y-badge span { display: inline; font-size: 14px; opacity: 0; transition: opacity 0.2s ease 0.05s; } .a11y-badge:hover, .a11y-badge:focus-visible { max-width: 300px; color: #fff; } .a11y-badge:hover span, .a11y-badge:focus-visible span { opacity: 1; } .a11y-badge--stuck { position: fixed; top: 5px; z-index: 10000; /* над клонированным меню (9999) */ } } /* мобильные: круглая кнопка в правой стопке мессенджеров, сразу под Telegram (их круги 55px, правый край на 40px от края экрана, шаг стопки ~65px) */ @media (max-width: 720px) { .a11y-badge { position: fixed; right: 40px; bottom: 17px; width: 55px; height: 55px; justify-content: center; border-radius: 50%; } .a11y-badge span { display: none; } } /* на небольших экранах кнопки панели идут единым левым столбцом — прижатая вправо «Обычная версия» смотрится оторванной */ @media (max-width: 720px) { .a11y-panel .a11y-panel__off { margin-left: 0; } } /* панель — служебная плоскость: масштаб страницы её не растягивает, иначе на телефоне при 150% кнопки перестают помещаться в экран */ html.a11y-font-125 body .a11y-panel { zoom: 0.8; } html.a11y-font-150 body .a11y-panel { zoom: 0.66667; } /* ---------- панель настроек ---------- */ .a11y-panel { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; /* выше модалок (99001) и меню (9999) */ background: #fff; border-bottom: 3px solid #000; font-family: Arial, sans-serif; color: #000; } .a11y-panel__wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; max-width: 1200px; margin: 0 auto; padding: 10px 16px; } .a11y-panel__group { display: inline-flex; align-items: center; gap: 6px; } .a11y-panel__label { font-size: 15px; } .a11y-panel button { min-height: 40px; min-width: 40px; padding: 4px 10px; border: 2px solid #000; border-radius: 4px; background: #fff; color: #000; font-family: Arial, sans-serif; font-size: 16px; line-height: 1; cursor: pointer; } .a11y-panel button:hover { outline: 2px solid #47bcbb; } .a11y-panel button:focus-visible { outline: 3px solid #d00; outline-offset: 1px; } .a11y-panel button[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #47bcbb; } /* размер шрифта: три «А» по возрастанию */ .a11y-panel .a11y-fs--2 { font-size: 20px; } .a11y-panel .a11y-fs--3 { font-size: 24px; } /* образцы цветовых схем */ .a11y-panel [data-a11y-scheme="white"] { background: #fff; color: #000; } .a11y-panel [data-a11y-scheme="black"] { background: #000; color: #fff; } .a11y-panel [data-a11y-scheme="blue"] { background: #9dd1ff; color: #063462; } .a11y-panel__off { font-weight: bold; margin-left: auto; } /* свёрнутая панель полностью скрыта: контент и крест закрытия попапа доступны, а разворачивает её всегда видимая плашка-глаз у левого края */ .a11y-panel--collapsed { display: none !important; } /* когда панель видна, контент сдвигается вниз на её высоту (ставит JS) */ /* ---------- масштаб ---------- */ /* ширину body при необходимости компенсирует скрипт: в старых движках zoom растягивает содержимое за правый край, в новых проценты уже учитывают масштаб — поэтому корректная ширина определяется измерением, а не CSS */ html.a11y-font-125 body { zoom: 1.25; } html.a11y-font-150 body { zoom: 1.5; } /* при масштабировании выехавшие за экран служебные элементы (выдвижное меню и т.п.) не должны давать страничный горизонтальный скролл: контент к этому моменту уже переливается по ширине, обрезается только пустой хвост */ html.a11y-font-125, html.a11y-font-150 { overflow-x: hidden; } /* ---------- цветовые схемы ---------- */ /* общее для всех схем: плоское оформление, подчёркнутые ссылки, серые картинки */ html[class*="a11y-scheme-"] body *, html[class*="a11y-scheme-"] body *:before, html[class*="a11y-scheme-"] body *:after { box-shadow: none !important; text-shadow: none !important; } html[class*="a11y-scheme-"] body a { text-decoration: underline !important; } html[class*="a11y-scheme-"] body img, html[class*="a11y-scheme-"] body iframe, html[class*="a11y-scheme-"] body video { filter: grayscale(1); } html[class*="a11y-scheme-"] body *:focus { outline: 3px solid #d00 !important; outline-offset: 2px; } /* чёрным по белому */ html.a11y-scheme-white body, html.a11y-scheme-white body * , html.a11y-scheme-white body *:before, html.a11y-scheme-white body *:after { background-color: #fff !important; background-image: none !important; color: #000 !important; border-color: #000 !important; } /* белым по чёрному */ html.a11y-scheme-black body, html.a11y-scheme-black body *, html.a11y-scheme-black body *:before, html.a11y-scheme-black body *:after { background-color: #000 !important; background-image: none !important; color: #fff !important; border-color: #fff !important; } /* тёмно-синим по голубому */ html.a11y-scheme-blue body, html.a11y-scheme-blue body *, html.a11y-scheme-blue body *:before, html.a11y-scheme-blue body *:after { background-color: #9dd1ff !important; background-image: none !important; color: #063462 !important; border-color: #063462 !important; } /* полупрозрачные подложки модалок должны остаться подложками: глухая заливка схемы превращает их в сплошной лист, закрывающий страницу */ html[class*="a11y-scheme-"] body .overlay, html[class*="a11y-scheme-"] body .popup-scroll-wrap, html[class*="a11y-scheme-"] body .age-warning-window { background-color: rgba(0, 0, 0, 0.74) !important; } /* панель не подчиняется схемам — у неё собственные контрастные цвета. Селекторы ниже по каскаду перебивают одинаково важные правила схем. */ html[class*="a11y-scheme-"] body .a11y-panel, html[class*="a11y-scheme-"] body .a11y-panel * { background-color: #fff !important; color: #000 !important; border-color: #000 !important; } html[class*="a11y-scheme-"] body .a11y-panel [data-a11y-scheme="black"] { background-color: #000 !important; color: #fff !important; } html[class*="a11y-scheme-"] body .a11y-panel [data-a11y-scheme="blue"] { background-color: #9dd1ff !important; color: #063462 !important; } /* ---------- без изображений ---------- */ html.a11y-img-off body img, html.a11y-img-off body picture, html.a11y-img-off body svg, html.a11y-img-off body video, html.a11y-img-off body iframe { display: none !important; } html.a11y-img-off body * { background-image: none !important; } /* подпись, которую JS ставит вместо картинки с непустым alt */ .a11y-alt { display: none; border: 1px dashed currentColor; padding: 2px 8px; font-size: 13px; font-family: Arial, sans-serif; } html.a11y-img-off body .a11y-alt { display: inline-block; } /* иконку в кнопке шапки и элементы панели прятать нельзя */ html.a11y-img-off body .a11y-toggle svg, html.a11y-img-off body .a11y-panel svg { display: inline-block !important; }