/* ══════════════════════════════════════════════════════════════ РЕЖИМ ДОСТУПНОСТИ ДЛЯ СЛАБОВИДЯЩИХ Единый источник правды. Подключается на всех публичных страницах. Настройки применяются классами на (см. accessibility.js): a11y-font-m / a11y-font-l — размер шрифта a11y-scheme-bw / a11y-scheme-wb — цветовая схема a11y-spacing — межбуквенный/межстрочный интервал a11y-no-images — скрыть декоративные изображения ══════════════════════════════════════════════════════════════ */ /* ── Видимый фокус для клавиатурной навигации (всегда, без переключателя) ── */ :focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; } /* ── Кнопка-глаз: активное состояние (есть хотя бы одна применённая настройка) ── */ .a11y-wrap { position: relative; display: flex; align-items: center; } .v3-a11y.active { color: var(--gold, #c9a227); } /* ── Панель настроек ────────────────────────────────────────── */ .a11y-panel { position: absolute; top: 100%; right: 0; margin-top: 10px; width: 290px; max-width: calc(100vw - 24px); background: #fff; color: #111; border: 1px solid #d5d5d5; border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); padding: 16px; z-index: 500; display: none; font-size: 14px; font-family: Arial, 'Helvetica Neue', sans-serif; } .a11y-panel.open { display: block; } .a11y-panel-title { font-weight: 700; font-size: 15px; margin: 0 0 12px; color: #111; } .a11y-row { margin-bottom: 14px; } .a11y-row:last-of-type { margin-bottom: 0; } .a11y-row-label { font-size: 11px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 6px; } .a11y-btns { display: flex; gap: 6px; } .a11y-btn { flex: 1; padding: 7px 4px; border: 1px solid #ccc; background: #fff; color: #111; cursor: pointer; border-radius: 5px; font-size: 13px; line-height: 1.2; } .a11y-btn:hover { border-color: #999; } .a11y-btn.active { background: var(--green, #1a3d1a); color: #fff; border-color: var(--green, #1a3d1a); } .a11y-swatches { display: flex; gap: 8px; } .a11y-swatch { width: 34px; height: 34px; border-radius: 6px; border: 2px solid #ccc; cursor: pointer; padding: 0; position: relative; } .a11y-swatch.active { border-color: var(--green, #1a3d1a); box-shadow: 0 0 0 2px var(--green, #1a3d1a); } /* Цвет каждого свотча задаётся инлайн-стилем в accessibility.js — так он не зависит от каскада и гарантированно не «съезжает» */ .a11y-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .a11y-toggle { position: relative; width: 40px; height: 22px; border-radius: 11px; background: #ccc; border: none; cursor: pointer; flex-shrink: 0; } .a11y-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left 0.15s; } .a11y-toggle.active { background: var(--green, #1a3d1a); } .a11y-toggle.active::after { left: 20px; } .a11y-reset { width: 100%; margin-top: 14px; padding: 9px; background: #f2f2f2; border: 1px solid #ccc; border-radius: 6px; cursor: pointer; font-size: 13px; color: #333; } .a11y-reset:hover { background: #e6e6e6; } /* ══════════════════════════════════════════════════════════════ РАЗМЕР ШРИФТА font-size на (не zoom!). zoom масштабирует весь документ как нативный зум браузера — эффективная ширина viewport в CSS-px уменьшается, и хедер/навигация, свёрстанные в px без переноса, упираются в край и обрезаются. font-size на корне через rem увеличивает именно текст, ширина viewport и раскладка (grid, position:fixed хедер/hero) не затрагиваются. Все font-size в публичных CSS переведены с px на rem (14.08), поэтому теперь они каскадируются от корня. ══════════════════════════════════════════════════════════════ */ html.a11y-font-m { font-size: 125%; } html.a11y-font-l { font-size: 150%; } /* ── Навигация в шапке (main.css: #site-nav > ul { flex-wrap: nowrap }) не переносится на вторую строку — при увеличенном шрифте пункты меню перестают помещаться в одну линию и вылезают за экран. Даём навигации собственный горизонтальный скролл вместо обрезки. ── */ html.a11y-font-m .v3-header .nav-wrapper, html.a11y-font-l .v3-header .nav-wrapper { min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } html.a11y-font-m .v3-header #site-nav > ul, html.a11y-font-l .v3-header #site-nav > ul { min-width: max-content; } /* ══════════════════════════════════════════════════════════════ МЕЖБУКВЕННЫЙ / МЕЖСТРОЧНЫЙ ИНТЕРВАЛ ══════════════════════════════════════════════════════════════ */ html.a11y-spacing body { letter-spacing: 0.05em; } html.a11y-spacing p, html.a11y-spacing li, html.a11y-spacing td, html.a11y-spacing .page-content, html.a11y-spacing .post-fulltext { line-height: 1.9 !important; } /* ══════════════════════════════════════════════════════════════ ОТКЛЮЧЕНИЕ ДЕКОРАТИВНЫХ ИЗОБРАЖЕНИЙ ══════════════════════════════════════════════════════════════ */ html.a11y-no-images .v3-hero { display: none !important; } html.a11y-no-images .v3-header { position: static !important; } /* ══════════════════════════════════════════════════════════════ ЦВЕТОВЫЕ СХЕМЫ ВЫСОКОЙ КОНТРАСТНОСТИ Универсальное правило поверх body покрывает все страницы и компоненты без необходимости перечислять каждый селектор; ниже — точечные исключения для полупрозрачных подложек модалок, чтобы не терялся эффект затемнения фона под ними. ══════════════════════════════════════════════════════════════ */ /* ---------- Чёрный текст на белом фоне ---------- */ html.a11y-scheme-bw body, html.a11y-scheme-bw body * { background-color: #fff !important; color: #111 !important; border-color: #111 !important; } html.a11y-scheme-bw a, html.a11y-scheme-bw a * { color: #00008b !important; text-decoration: underline !important; } html.a11y-scheme-bw button, html.a11y-scheme-bw .btn, html.a11y-scheme-bw input[type="submit"], html.a11y-scheme-bw input[type="button"] { background-color: #111 !important; color: #fff !important; border: 2px solid #111 !important; } html.a11y-scheme-bw input, html.a11y-scheme-bw textarea, html.a11y-scheme-bw select { background-color: #fff !important; color: #111 !important; border: 2px solid #111 !important; } html.a11y-scheme-bw .v3-header, html.a11y-scheme-bw .v3-hero { background-color: #111 !important; background-image: none !important; } html.a11y-scheme-bw .v3-header * { background-color: transparent !important; color: #fff !important; } html.a11y-scheme-bw .v3-header a, html.a11y-scheme-bw .v3-header a * { color: #ffd24a !important; } /* ---------- Белый текст на чёрном фоне (инверсия) ---------- */ html.a11y-scheme-wb body, html.a11y-scheme-wb body * { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } html.a11y-scheme-wb a, html.a11y-scheme-wb a * { color: #ffd24a !important; text-decoration: underline !important; } html.a11y-scheme-wb button, html.a11y-scheme-wb .btn, html.a11y-scheme-wb input[type="submit"], html.a11y-scheme-wb input[type="button"] { background-color: #fff !important; color: #000 !important; border: 2px solid #fff !important; } html.a11y-scheme-wb input, html.a11y-scheme-wb textarea, html.a11y-scheme-wb select { background-color: #000 !important; color: #fff !important; border: 2px solid #fff !important; } html.a11y-scheme-wb .v3-header, html.a11y-scheme-wb .v3-hero { background-color: #000 !important; background-image: none !important; } /* ---------- Исключения: полупрозрачные подложки модалок ---------- */ html.a11y-scheme-bw .catalog-modal-overlay, html.a11y-scheme-bw .coll-modal-backdrop, html.a11y-scheme-bw .gallery-lb-overlay, html.a11y-scheme-wb .catalog-modal-overlay, html.a11y-scheme-wb .coll-modal-backdrop, html.a11y-scheme-wb .gallery-lb-overlay { background-color: rgba(0, 0, 0, 0.75) !important; } /* ---------- Панель настроек всегда остаётся читаемой в обычной палитре ---------- */ /* (специфичность класса .a11y-panel выше, чем у общего "body *", поэтому эти правила перебивают глобальную схему внутри самой панели) */ html.a11y-scheme-bw .a11y-panel, html.a11y-scheme-wb .a11y-panel { background-color: #fff !important; color: #111 !important; border-color: #d5d5d5 !important; } /* .a11y-swatch исключён — его цвет задан инлайн-стилем и должен всегда показывать предпросмотр схемы как есть, а не подчиняться текущей схеме */ html.a11y-scheme-bw .a11y-panel *:not(.a11y-swatch), html.a11y-scheme-wb .a11y-panel *:not(.a11y-swatch) { background-color: transparent !important; color: #111 !important; border-color: #ccc !important; } html.a11y-scheme-bw .a11y-btn.active, html.a11y-scheme-wb .a11y-btn.active { background-color: var(--green, #1a3d1a) !important; color: #fff !important; border-color: var(--green, #1a3d1a) !important; } html.a11y-scheme-bw .a11y-swatch.active, html.a11y-scheme-wb .a11y-swatch.active { border-color: var(--green, #1a3d1a) !important; box-shadow: 0 0 0 2px var(--green, #1a3d1a) !important; } html.a11y-scheme-bw .a11y-toggle.active, html.a11y-scheme-wb .a11y-toggle.active { background-color: var(--green, #1a3d1a) !important; } html.a11y-scheme-bw .a11y-toggle::after, html.a11y-scheme-wb .a11y-toggle::after { background-color: #fff !important; }