/* ============================================================
AYU — версия для слабовидящих
Режим включается классами на , которые PHP ставит из cookie ayu_a11y:
a11y-on
a11y-scheme-white | a11y-scheme-black | a11y-scheme-blue
a11y-font-100 | a11y-font-125 | a11y-font-150
a11y-ls-0 | a11y-ls-1 | a11y-ls-2
============================================================ */
/* ---------- 1. Кнопка в шапке ---------- */
.a11y-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: inherit;
font-size: 17px;
line-height: 1;
cursor: pointer;
transition: background-color .15s ease;
}
.a11y-trigger:hover,
.a11y-trigger:focus-visible {
background: rgba(255, 255, 255, .18);
}
.a11y-trigger:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Мобильный вариант — внутри бургер-меню, уже с подписью.
color задан явно: от inherit кнопка получала серый #808080 на белом фоне
(контраст ~3.5:1, ниже порога WCAG AA) — для кнопки доступности неприемлемо. */
.a11y-trigger--mobile {
width: auto;
height: auto;
gap: 10px;
padding: 12px 0;
border-radius: 0;
font-size: 15px;
font-weight: 600;
color: #1f2430;
}
.a11y-trigger--mobile:hover,
.a11y-trigger--mobile:focus-visible {
background: transparent;
text-decoration: underline;
}
/* ---------- 2. Панель ---------- */
.a11y-overlay {
position: fixed;
inset: 0;
z-index: 99998;
background: rgba(0, 0, 0, .45);
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, visibility .2s ease;
}
.a11y-overlay.is-open {
opacity: 1;
visibility: visible;
}
.a11y-panel {
position: fixed;
top: 0;
right: 0;
z-index: 99999;
display: flex;
flex-direction: column;
width: 340px;
max-width: 92vw;
height: 100%;
overflow-y: auto;
background: #fff;
color: #14181f;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.45;
box-shadow: -6px 0 24px rgba(0, 0, 0, .25);
transform: translateX(100%);
transition: transform .25s ease;
}
.a11y-panel.is-open {
transform: translateX(0);
}
.a11y-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 20px;
background: #1f2430;
color: #fff;
}
/* color задан явно: шаблон объявляет h2 { color:#181818 }, и прямое правило
перебивает наследование от .a11y-panel__head — заголовок становился невидимым */
.a11y-panel__title {
margin: 0;
color: #fff;
font-size: 1.07em;
font-weight: 700;
line-height: 1.3;
}
.a11y-panel__close {
flex: 0 0 auto;
width: 34px;
height: 34px;
border: 2px solid rgba(255, 255, 255, .6);
border-radius: 50%;
background: transparent;
color: #fff;
font-size: 1.07em;
line-height: 1;
cursor: pointer;
}
.a11y-panel__close:hover,
.a11y-panel__close:focus-visible {
background: rgba(255, 255, 255, .18);
}
.a11y-panel__body {
flex: 1 1 auto;
padding: 6px 20px 20px;
}
.a11y-group {
padding: 16px 0;
border-bottom: 1px solid #e2e5ea;
}
.a11y-group:last-child {
border-bottom: 0;
}
.a11y-group__label {
display: block;
margin-bottom: 10px;
font-size: .87em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #4a5261;
}
.a11y-options {
display: flex;
gap: 8px;
}
.a11y-option {
flex: 1 1 0;
min-height: 46px;
padding: 8px 6px;
border: 2px solid #c9cfd8;
border-radius: 6px;
background: #fff;
color: #14181f;
font-family: inherit;
font-size: .93em;
font-weight: 600;
cursor: pointer;
}
.a11y-option:hover {
border-color: #2a8da3;
}
.a11y-option:focus-visible {
outline: 3px solid #2a8da3;
outline-offset: 2px;
}
.a11y-option[aria-checked="true"] {
border-color: #1f2430;
background: #1f2430;
color: #fff;
}
/* Образцы цветовых схем — показываем сам цвет, а не только название */
.a11y-option--scheme-white { background: #fff; color: #000; border-color: #8d95a1; }
.a11y-option--scheme-black { background: #000; color: #fff; border-color: #000; }
.a11y-option--scheme-blue { background: #9dd1ff; color: #063462; border-color: #063462; }
.a11y-option--scheme-white[aria-checked="true"],
.a11y-option--scheme-black[aria-checked="true"],
.a11y-option--scheme-blue[aria-checked="true"] {
box-shadow: 0 0 0 3px #2a8da3;
}
.a11y-reset {
width: 100%;
min-height: 48px;
margin-top: 4px;
border: 2px solid #a20d20;
border-radius: 6px;
background: #a20d20;
color: #fff;
font-family: inherit;
font-size: 1em;
font-weight: 700;
cursor: pointer;
}
.a11y-reset:hover {
background: #850a1a;
}
.a11y-note {
margin: 10px 0 0;
font-size: .8em;
line-height: 1.4;
color: #6b7381;
}
/* Озвучка недоступна на тач-устройствах — наведения там нет */
.a11y-tts-unsupported .a11y-group--tts {
display: none;
}
/* Подсветка элемента, который читается вслух */
.a11y-speaking {
outline: 3px solid #2a8da3 !important;
outline-offset: 2px;
}
/* ============================================================
3. Цветовые схемы
============================================================ */
body.a11y-scheme-white { --a11y-bg: #ffffff; --a11y-fg: #000000; --a11y-accent: #000000; --a11y-line: #000000; }
body.a11y-scheme-black { --a11y-bg: #000000; --a11y-fg: #ffffff; --a11y-accent: #ffff00; --a11y-line: #ffffff; }
body.a11y-scheme-blue { --a11y-bg: #9dd1ff; --a11y-fg: #063462; --a11y-accent: #063462; --a11y-line: #063462; }
body.a11y-on,
body.a11y-on .a11y-surface {
background: var(--a11y-bg) !important;
color: var(--a11y-fg) !important;
}
/* Общая перекраска каркаса сайта.
.ck-content исключён — авторские цвета из редактора живут по своим правилам ниже.
Исключения завёрнуты в :where(), чтобы они не раздували вес селектора:
иначе точечные правила ниже (герой, плашки) не смогли бы его перебить. */
body.a11y-on *:where(:not(.a11y-panel, .a11y-panel *, .a11y-overlay, .ck-content, .ck-content *)) {
background-color: transparent !important;
color: var(--a11y-fg) !important;
border-color: var(--a11y-line) !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* Декоративные фоны шаблона гасим: иначе текст ложится на фотографию
и никакая схема его не спасёт. Контентные ![]()
при этом остаются на месте. */
body.a11y-on *:where(:not(.a11y-panel, .a11y-panel *, .a11y-overlay)) {
background-image: none !important;
}
/* Текст героя лежит поверх фотографии: сам слайд — это ![]()
, а картинки
по принятому решению мы не выключаем. Чтобы заголовок остался читаемым,
подкладываем под него сплошную плашку цвета схемы — фото при этом остаётся видно. */
body.a11y-on .ayu-hero-content {
background-color: var(--a11y-bg) !important;
border: 2px solid var(--a11y-line) !important;
padding: 22px 26px !important;
}
body.a11y-on a:not(.a11y-panel a),
body.a11y-on a:not(.a11y-panel a) * {
color: var(--a11y-accent) !important;
text-decoration: underline !important;
}
body.a11y-on button:not(.a11y-panel button):not(.a11y-trigger),
body.a11y-on input,
body.a11y-on select,
body.a11y-on textarea {
background-color: var(--a11y-bg) !important;
color: var(--a11y-fg) !important;
border: 2px solid var(--a11y-line) !important;
}
body.a11y-on :focus-visible {
outline: 3px solid var(--a11y-accent) !important;
outline-offset: 2px !important;
}
/* ---------- Редакторский контент ----------
Решение: авторские цвета из CKEditor не перебиваем.
Поэтому перекрашиваем внутри .ck-content только то, чему автор цвет НЕ задавал —
иначе текст по умолчанию остался бы чёрным на чёрном фоне. */
body.a11y-on .ck-content,
body.a11y-on .ck-content *:not([style*="color"]) {
background-color: transparent !important;
color: var(--a11y-fg) !important;
border-color: var(--a11y-line) !important;
}
body.a11y-on .ck-content a:not([style*="color"]),
body.a11y-on .ck-content a:not([style*="color"]) * {
color: var(--a11y-accent) !important;
text-decoration: underline !important;
}
/* Иконочные шрифты не перекрашиваем в акцент — они не текст */
body.a11y-on i[class*="icon-"],
body.a11y-on i.fa,
body.a11y-on i[class*="fa-"] {
color: var(--a11y-fg) !important;
}
/* ============================================================
4. Размер шрифта
Шаблон свёрстан в px, поэтому масштабировать html{font-size} бесполезно —
задаём размеры явно по группам элементов.
============================================================ */
/* Ступень 100% обязана не менять ничего: иначе «обычный размер» молча раздувал бы
текст и ломал раскладку меню. Размеры задаются только на 125% и 150%. */
body.a11y-on:not(.a11y-font-100) p,
body.a11y-on:not(.a11y-font-100) li,
body.a11y-on:not(.a11y-font-100) td,
body.a11y-on:not(.a11y-font-100) th,
body.a11y-on:not(.a11y-font-100) a,
body.a11y-on:not(.a11y-font-100) span,
body.a11y-on:not(.a11y-font-100) label,
body.a11y-on:not(.a11y-font-100) dd,
body.a11y-on:not(.a11y-font-100) dt,
body.a11y-on:not(.a11y-font-100) blockquote,
body.a11y-on:not(.a11y-font-100) input,
body.a11y-on:not(.a11y-font-100) select,
body.a11y-on:not(.a11y-font-100) textarea,
body.a11y-on:not(.a11y-font-100) button {
font-size: var(--a11y-fs-base) !important;
line-height: 1.6 !important;
}
body.a11y-on:not(.a11y-font-100) h1 { font-size: var(--a11y-fs-h1) !important; }
body.a11y-on:not(.a11y-font-100) h2 { font-size: var(--a11y-fs-h2) !important; }
body.a11y-on:not(.a11y-font-100) h3 { font-size: var(--a11y-fs-h3) !important; }
body.a11y-on:not(.a11y-font-100) h4,
body.a11y-on:not(.a11y-font-100) h5,
body.a11y-on:not(.a11y-font-100) h6 { font-size: var(--a11y-fs-h4) !important; }
body.a11y-font-125 { --a11y-fs-base: 22px; --a11y-fs-h1: 40px; --a11y-fs-h2: 35px; --a11y-fs-h3: 30px; --a11y-fs-h4: 25px; }
body.a11y-font-150 { --a11y-fs-base: 27px; --a11y-fs-h1: 48px; --a11y-fs-h2: 42px; --a11y-fs-h3: 36px; --a11y-fs-h4: 30px; }
/* Иконки размер не наследуют — иначе «глаз» и бургер разъедутся */
body.a11y-on i[class*="icon-"],
body.a11y-on i.fa,
body.a11y-on i[class*="fa-"] {
font-size: revert !important;
}
/* Панель масштабируется отдельно и умеренно.
Вес селекторов здесь выше, чем у общих правил размера (0,3,1 против 0,2,2):
иначе панель раздувалась бы вместе с сайтом и переставала помещаться. */
body.a11y-on .a11y-panel { font-size: 15px !important; }
body.a11y-font-125 .a11y-panel { font-size: 17px !important; }
body.a11y-font-150 .a11y-panel { font-size: 19px !important; }
body.a11y-on .a11y-panel .a11y-panel__title { font-size: 1.07em !important; }
body.a11y-on .a11y-panel .a11y-panel__close { font-size: 1.07em !important; }
body.a11y-on .a11y-panel .a11y-group__label { font-size: .87em !important; }
body.a11y-on .a11y-panel .a11y-option { font-size: .93em !important; }
body.a11y-on .a11y-panel .a11y-reset { font-size: 1em !important; }
body.a11y-on .a11y-panel .a11y-note { font-size: .8em !important; }
/* Перенос в шапке нужен только на увеличенном шрифте: на 100% он лишний
и без нужды ломает исходную раскладку меню в одну строку. */
body.a11y-font-125 .header-info,
body.a11y-font-125 .mainmenu,
body.a11y-font-125 .header-top,
body.a11y-font-150 .header-info,
body.a11y-font-150 .mainmenu,
body.a11y-font-150 .header-top {
flex-wrap: wrap !important;
height: auto !important;
min-height: 0 !important;
}
body.a11y-font-125 .header-navbar,
body.a11y-font-150 .header-navbar {
height: auto !important;
}
/* ============================================================
5. Межбуквенный интервал
============================================================ */
body.a11y-ls-1 *:where(:not(.a11y-panel, .a11y-panel *, i)) { letter-spacing: .05em !important; }
body.a11y-ls-2 *:where(:not(.a11y-panel, .a11y-panel *, i)) { letter-spacing: .1em !important; }
/* ============================================================
6. Панель внутри активной схемы — читаемость важнее единообразия
============================================================ */
body.a11y-scheme-black .a11y-panel { background: #000; color: #fff; }
body.a11y-scheme-black .a11y-panel__body { background: #000; }
body.a11y-scheme-black .a11y-group { border-bottom-color: #fff; }
body.a11y-scheme-black .a11y-group__label { color: #fff; }
body.a11y-scheme-black .a11y-option { background: #000; color: #fff; border-color: #fff; }
body.a11y-scheme-black .a11y-note { color: #d6d6d6; }
body.a11y-scheme-blue .a11y-panel { background: #9dd1ff; color: #063462; }
body.a11y-scheme-blue .a11y-panel__head { background: #063462; }
body.a11y-scheme-blue .a11y-group { border-bottom-color: #063462; }
body.a11y-scheme-blue .a11y-group__label { color: #063462; }
body.a11y-scheme-blue .a11y-option { background: #9dd1ff; color: #063462; border-color: #063462; }
body.a11y-scheme-blue .a11y-note { color: #0a4a89; }
/* Образцы схем всегда показывают свой собственный цвет */
body.a11y-on .a11y-option--scheme-white { background: #fff !important; color: #000 !important; }
body.a11y-on .a11y-option--scheme-black { background: #000 !important; color: #fff !important; }
body.a11y-on .a11y-option--scheme-blue { background: #9dd1ff !important; color: #063462 !important; }
@media (prefers-reduced-motion: reduce) {
.a11y-panel,
.a11y-overlay {
transition: none;
}
}