/* * Версия для слабовидящих — стили панели и сайта в режиме «особые потребности». * Активируется через data-атрибуты на , которые ставит /local/templates/eco/js/a11y.js. * * Цветовые схемы (data-a11y-scheme): * white — чёрный текст на белом фоне (по умолчанию в режиме) * black — белый текст на чёрном фоне * blue — тёмно-синий текст на бежевом фоне * * Размеры шрифта (data-a11y-font): * m — обычный (1x), l — крупный (1.25x), xl — очень крупный (1.5x) * * Интервал (data-a11y-spacing): normal | medium | wide * Шрифт (data-a11y-family): sans | serif * Изображения (data-a11y-images): on | off */ /* * Кнопка a11y-toggle — кнопка в шапке в стиле остальных .btn-gray: * иконка «глаз» + подпись «Версия для слабовидящих». Размеры, фон, радиус и * hover приходят из .btn-gray в main.css — здесь только отступ иконки и * активное состояние. */ .a11y-toggle.btn-gray { display: inline-flex; align-items: center; justify-content: center; } .a11y-toggle.btn-gray .svg-icon { flex: 0 0 auto; } /* Когда режим включён — подсвечиваем кнопку, чтобы визуально показать активность (aria-pressed="true" ставится скриптом a11y.js). */ .a11y-toggle[aria-pressed="true"] { background: #222 !important; color: #fff !important; } .a11y-toggle[aria-pressed="true"] .svg-icon { color: #fff; } /* ===== Верхняя панель управления ===== */ .a11y-panel { position: sticky; top: 0; z-index: 1050; width: 100%; background: #222; color: #fff; padding: 10px 16px; border-bottom: 2px solid #000; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.2; } .a11y-panel[hidden] { display: none !important; } .a11y-panel__inner { max-width: 1400px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: flex-start; } .a11y-panel__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .a11y-panel__group-label { font-weight: 700; margin-right: 4px; white-space: nowrap; } .a11y-panel__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; border: 1px solid #fff; background: transparent; color: #fff; border-radius: 4px; font-family: inherit; font-size: 15px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; } .a11y-panel__btn:hover, .a11y-panel__btn:focus-visible { background: #fff; color: #222; outline: none; } .a11y-panel__btn.is-active { background: #fff; color: #222; font-weight: 700; } .a11y-panel__btn--scheme-white { background: #fff; color: #222; } .a11y-panel__btn--scheme-black { background: #000; color: #fff; border-color: #fff; } .a11y-panel__btn--scheme-blue { background: #9dd1ff; color: #063462; border-color: #fff; } .a11y-panel__btn--font-m { font-size: 14px; } .a11y-panel__btn--font-l { font-size: 18px; } .a11y-panel__btn--font-xl { font-size: 22px; } .a11y-panel__btn--reset { background: #c0392b; border-color: #c0392b; color: #fff; } .a11y-panel__btn--reset:hover, .a11y-panel__btn--reset:focus-visible { background: #e04a3b; border-color: #e04a3b; color: #fff; } .a11y-panel__close { margin-left: auto; background: transparent; border: 1px solid #fff; color: #fff; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 14px; } .a11y-panel__close:hover, .a11y-panel__close:focus-visible { background: #fff; color: #222; outline: none; } @media (max-width: 767px) { .a11y-panel { font-size: 14px; padding: 8px; } .a11y-panel__group-label { width: 100%; margin-bottom: 2px; } .a11y-panel__close { margin-left: 0; } } /* ============================================================= * Режим «для слабовидящих» активен. * Применяем ко всему сайту (кроме самой панели и кнопки-тоггла). * ============================================================= */ html[data-a11y="on"], html[data-a11y="on"] body { background: var(--a11y-bg, #ffffff) !important; color: var(--a11y-fg, #000000) !important; } /* Цветовые переменные по схемам */ html[data-a11y="on"][data-a11y-scheme="white"] { --a11y-bg: #ffffff; --a11y-fg: #000000; --a11y-link: #0000cc; --a11y-link-visited: #551a8b; --a11y-border: #000000; } html[data-a11y="on"][data-a11y-scheme="black"] { --a11y-bg: #000000; --a11y-fg: #ffffff; --a11y-link: #ffff00; --a11y-link-visited: #ffcc00; --a11y-border: #ffffff; } html[data-a11y="on"][data-a11y-scheme="blue"] { --a11y-bg: #9dd1ff; --a11y-fg: #063462; --a11y-link: #063462; --a11y-link-visited: #2d0e5b; --a11y-border: #063462; } /* Применяем фон/цвет ко ВСЕМ элементам страницы (кроме панели и служебных) */ html[data-a11y="on"] body *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-toggle):not(.a11y-toggle *):not(svg):not(svg *) { background-color: transparent !important; background-image: none !important; color: var(--a11y-fg) !important; border-color: var(--a11y-border) !important; box-shadow: none !important; text-shadow: none !important; } html[data-a11y="on"] body a:not(.a11y-panel a):not(.a11y-toggle) { color: var(--a11y-link) !important; text-decoration: underline !important; } html[data-a11y="on"] body a:visited:not(.a11y-panel a):not(.a11y-toggle) { color: var(--a11y-link-visited) !important; } /* Кнопки и инпуты — контурные */ html[data-a11y="on"] body button:not(.a11y-panel button):not(.a11y-toggle), html[data-a11y="on"] body input:not([type="checkbox"]):not([type="radio"]), html[data-a11y="on"] body select, html[data-a11y="on"] body textarea { background-color: var(--a11y-bg) !important; color: var(--a11y-fg) !important; border: 1px solid var(--a11y-border) !important; border-radius: 0 !important; } /* ===== Размер шрифта ===== */ html[data-a11y="on"][data-a11y-font="m"] { font-size: 100% !important; } html[data-a11y="on"][data-a11y-font="l"] { font-size: 125% !important; } html[data-a11y="on"][data-a11y-font="xl"] { font-size: 150% !important; } /* Сбрасываем fixed-размеры текста в пользу em */ html[data-a11y="on"] body *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-toggle):not(.a11y-toggle *) { font-size: inherit !important; line-height: 1.5 !important; } /* ===== Интервал между символами ===== */ html[data-a11y="on"][data-a11y-spacing="normal"] body * { letter-spacing: 0 !important; } html[data-a11y="on"][data-a11y-spacing="medium"] body *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-toggle):not(.a11y-toggle *) { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } html[data-a11y="on"][data-a11y-spacing="wide"] body *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-toggle):not(.a11y-toggle *) { letter-spacing: 0.24em !important; word-spacing: 0.32em !important; } /* ===== Семейство шрифта ===== */ html[data-a11y="on"][data-a11y-family="sans"] body *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-toggle):not(.a11y-toggle *) { font-family: Arial, Helvetica, sans-serif !important; } html[data-a11y="on"][data-a11y-family="serif"] body *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-toggle):not(.a11y-toggle *) { font-family: "Times New Roman", Times, serif !important; } /* ===== Отключение изображений ===== */ html[data-a11y="on"][data-a11y-images="off"] body img:not(.a11y-panel img), html[data-a11y="on"][data-a11y-images="off"] body picture:not(.a11y-panel picture), html[data-a11y="on"][data-a11y-images="off"] body video:not(.a11y-panel video), html[data-a11y="on"][data-a11y-images="off"] body svg:not(.a11y-panel svg):not(.a11y-toggle svg) { display: none !important; } html[data-a11y="on"][data-a11y-images="off"] body *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-toggle):not(.a11y-toggle *) { background-image: none !important; } /* Скрываем декоративные элементы, которые в режиме бесполезны */ html[data-a11y="on"] body .nd-header__logo img { /* Логотип должен оставаться текстом? Оставим видимым если картинки включены */ } /* Улучшения фокуса */ html[data-a11y="on"] body *:focus-visible { outline: 3px solid var(--a11y-link) !important; outline-offset: 2px !important; } /* Таблицы */ html[data-a11y="on"] body table, html[data-a11y="on"] body th, html[data-a11y="on"] body td { border: 1px solid var(--a11y-border) !important; border-collapse: collapse !important; }