/* ========================================================= Дела сердечные — Версия для слабовидящих Сквозной режим доступности для всего сайта. Включается классом .a11y на + data-атрибуты. Всё, что НЕ относится к режиму, не затрагивается: каждый селектор начинается с html.a11y. ========================================================= */ /* ── Скрытый текст для скринридеров (если нет .sr-only на странице) ── */ .a11y-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================= 1. ЦВЕТОВЫЕ СХЕМЫ — переопределяем дизайн-токены сайта. Сайт целиком построен на var(--text) / var(--bg) и т.п., поэтому замена переменных перекрашивает весь интерфейс. ========================================================= */ html.a11y { /* служебные токены режима */ --a11y-link: #0a3aa8; /* ссылки */ --a11y-accent: #0a3aa8; /* заливка главных кнопок */ --a11y-on-accent: #ffffff; /* текст на кнопке */ --a11y-border: #000000; /* рамки, разделители */ --a11y-field-bg: #ffffff; /* фон полей формы */ --a11y-focus: #ff7a00; /* рамка фокуса */ --a11y-error: #b00018; /* ошибки форм */ /* перекрытие палитры сайта (светлая схема — по умолчанию) */ --text: #000000; --text-muted: #000000; --text-light: #000000; --bg: #ffffff; --bg-soft: #ffffff; --bg-gray-card:#ffffff; --border: #000000; --violet: #0a3aa8; --violet-hover:#072a80; --violet-deep: #051d5e; --violet-text: #0a3aa8; --violet-soft: #ffffff; --coral: #b00018; --coral-deep: #8a0012; --green: #0a7a45; --green-text: #0a7a45; --text-light: #000000; } /* Чёрная схема: чёрный фон / белый текст */ html.a11y[data-a11y-scheme="black"] { --a11y-link: #ffe600; --a11y-accent: #ffe600; --a11y-on-accent: #000000; --a11y-border: #ffffff; --a11y-field-bg: #000000; --a11y-focus: #ffe600; --a11y-error: #ff7a7a; --text: #ffffff; --text-muted:#ffffff; --text-light:#ffffff; --bg:#000000; --bg-soft:#000000; --bg-gray-card:#000000; --border:#ffffff; --violet:#ffe600; --violet-text:#ffe600; --violet-deep:#ffe600; --violet-soft:#000000; --coral:#ff8f8f; --green:#7dffb0; } /* Синяя контрастная схема: тёмно-синий фон / белый текст */ html.a11y[data-a11y-scheme="blue"] { --a11y-link: #ffe600; --a11y-accent: #ffe600; --a11y-on-accent: #04243f; --a11y-border: #ffffff; --a11y-field-bg: #04243f; --a11y-focus: #ffe600; --a11y-error: #ffb3b3; --text:#ffffff; --text-muted:#ffffff; --text-light:#ffffff; --bg:#063060; --bg-soft:#063060; --bg-gray-card:#063060; --border:#ffffff; --violet:#ffe600; --violet-text:#ffe600; --violet-deep:#ffe600; --violet-soft:#063060; --coral:#ffc0c0; --green:#bff5d4; } /* ========================================================= 2. БАЗОВЫЙ СБРОС ВИЗУАЛЬНОГО ШУМА Один фон, один цвет текста, плоские поверхности. ========================================================= */ html.a11y body { background: var(--bg) !important; color: var(--text) !important; } /* Всё содержимое сайта — кроме панели режима и векторных иконок — приводим к единому контрасту: прозрачный фон, цвет текста, без теней. */ html.a11y body *:not(.a11y-bar):not(.a11y-bar *):not(.a11y-skip):not(svg):not(svg *) { background-color: transparent !important; background-image: none !important; color: var(--text) !important; border-color: var(--a11y-border) !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -webkit-text-fill-color: var(--text) !important; } /* Содержимое всегда видно — отменяем стартовые состояния анимаций появления. ВАЖНО: сбрасываем transform только у самих анимируемых блоков (.reveal и ПРЯМЫХ детей .reveal-stagger), а не у всех потомков — иначе ломается вёрстка, где transform используется для раскладки (например, центрирование фото врача через translateX(-50%)). */ html.a11y .reveal, html.a11y .reveal-stagger > * { opacity: 1 !important; transform: none !important; } /* ВАЖНО: НЕ сбрасываем opacity у ВСЕХ потомков .reveal — иначе принудительно показываются скрытые через opacity:0 элементы (закрытые выпадашки, тултипы) и они «залипают» видимыми. Достаточно вернуть видимость самим анимируемым блокам выше. */ /* ========================================================= 3. ССЫЛКИ — всегда подчёркнуты и выделены цветом ========================================================= */ html.a11y body a:not([class*="btn"]):not(.logo):not(.logo-full):not(.service-card-link) { color: var(--a11y-link) !important; -webkit-text-fill-color: var(--a11y-link) !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; } html.a11y body a:hover { text-decoration-thickness: 3px; } /* ========================================================= 4. КНОПКИ — чёткие, с рамкой и крупной зоной ========================================================= */ html.a11y body .btn { border: 2px solid var(--text) !important; border-radius: 10px !important; text-decoration: none !important; font-weight: 700 !important; min-height: 52px; } html.a11y body .btn-primary, html.a11y body .btn-green { background: var(--a11y-accent) !important; color: var(--a11y-on-accent) !important; -webkit-text-fill-color: var(--a11y-on-accent) !important; border-color: var(--text) !important; } html.a11y body .btn-white, html.a11y body .btn-outline { background: transparent !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; } /* иконочные / круглые кнопки */ html.a11y body .icon-btn, html.a11y body .round-btn, html.a11y body .max-btn, html.a11y body .search-btn, html.a11y body .burger-btn { border: 2px solid var(--text) !important; border-radius: 10px !important; color: var(--text) !important; } html.a11y body .burger-btn span { background: var(--text) !important; } /* Единая высота и выравнивание кнопок действий в шапке — чтобы MAX, личный кабинет и бургер стояли в одну линию и одного размера. */ html.a11y .header-bottom { align-items: center !important; } html.a11y body .header-bottom .max-btn, html.a11y body .header-bottom .icon-btn, html.a11y body .header-bottom .acct-btn, html.a11y body .header-bottom .burger-btn { height: 52px !important; min-height: 52px !important; align-self: center !important; flex: 0 0 auto !important; } html.a11y body .header-bottom .icon-btn, html.a11y body .header-bottom .burger-btn { width: 52px !important; } /* Чип кабинета (авторизован) содержит инициалы + имя + шеврон — ширина по содержимому, иначе текст обрезается. */ html.a11y body .header-bottom .acct-btn { width: auto !important; padding: 0 10px !important; } /* Кнопка-лупа внутри поля — только иконка, без собственной рамки (иначе выглядит «коробкой в коробке»). */ html.a11y body .search-wrap .search-btn { border: 0 !important; background: transparent !important; color: var(--text) !important; } html.a11y body .search-wrap input { height: 52px !important; } /* поле поиска — меньше внутренних отступов, чтобы плейсхолдер «поиск» не обрезался */ html.a11y body .search-wrap input { padding: 0 46px 0 16px !important; } /* На мобильных (≤480px) в a11y-режиме поле поиска — с жирной зелёной рамкой чтобы было сразу видно что это поле ввода. */ /* Средние ширины (планшет / крупный шрифт): поле поиска становится тесным и плейсхолдер «поиск» обрезается — убираем сам текст плейсхолдера, поле остаётся рабочим, а иконка-лупа подсказывает назначение. */ @media (max-width: 1180px) { html.a11y body .search-wrap input::placeholder { color: transparent !important; -webkit-text-fill-color: transparent !important; } } @media (max-width: 1280px) { /* MAX на узких экранах скрыт (как и на обычной версии) — иначе кнопки не помещаются; написать в Max доступно из меню и контактов. */ html.a11y body .header-bottom .max-btn { display: none !important; } html.a11y body .header-bottom .max-btn, html.a11y body .header-bottom .icon-btn, html.a11y body .header-bottom .acct-btn, html.a11y body .header-bottom .burger-btn { height: 46px !important; min-height: 46px !important; width: 46px !important; } /* Поиск в режиме доступности схлопывается до одной иконки-лупы: при крупном шрифте поле не помещается, а тап по иконке открывает полноэкранный оверлей поиска со своим крупным полем ввода. */ html.a11y body .search-wrap { flex: 0 0 auto !important; width: 46px !important; min-width: 46px !important; margin-left: 0 !important; } html.a11y body .search-wrap input { width: 46px !important; height: 46px !important; padding: 0 !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } html.a11y body .search-wrap input::placeholder { color: transparent !important; } html.a11y body .search-wrap .search-btn { right: 50% !important; transform: translate(50%, -50%) !important; width: 40px !important; height: 40px !important; border: 0 !important; background: transparent !important; } /* Кнопка кабинета: вместо инициалов «ИП» показываем понятную иконку человечка (на узких экранах место только под иконку). */ html.a11y body .header-bottom .acct-btn { padding: 0 !important; justify-content: center !important; } html.a11y body .header-bottom .acct-btn .acct-name, html.a11y body .header-bottom .acct-btn .acct-caret { display: none !important; } html.a11y body .header-bottom .acct-btn .acct-avatar { width: 46px !important; height: 46px !important; border-radius: 10px !important; border: 2px solid var(--text) !important; background: transparent !important; color: transparent !important; font-size: 0 !important; position: relative !important; } html.a11y body .header-bottom .acct-btn .acct-avatar::after { content: ""; position: absolute; inset: 0; background-color: var(--text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z' fill='%23000'/%3E%3C/svg%3E") center / 26px 26px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z' fill='%23000'/%3E%3C/svg%3E") center / 26px 26px no-repeat; } } /* Кнопка «Написать в Max» — иконка не читается в контрасте, заменяем её на текстовую подпись MAX (важный смысл не только в картинке) */ html.a11y body .max-btn { min-width: 64px; width: auto !important; padding: 0 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } html.a11y body .max-btn img { display: none !important; } html.a11y body .max-btn::after { content: "MAX"; font-weight: 800; font-size: 16px; letter-spacing: 0.04em; color: var(--text) !important; } /* CTA «Написать в Max» (.serv-cta-btn): мелкий цветной логотип Max не читается в контрасте, а текст уже всё объясняет — прячем иконку и центрируем подпись. */ html.a11y body .serv-cta-mx { display: none !important; } html.a11y body .serv-cta-btn { justify-content: center !important; text-align: center !important; } /* CTA «Написать в Max» (.serv-cta-btn): мелкий цветной логотип Max не читается в контрасте, а текст уже всё объясняет — прячем иконку и центрируем подпись. */ html.a11y body .serv-cta-mx { display: none !important; } html.a11y body .serv-cta-btn { justify-content: center !important; text-align: center !important; } /* ========================================================= 5. ФОРМЫ — видимые границы, понятные подписи, ошибки текстом ========================================================= */ html.a11y body input, html.a11y body textarea, html.a11y body select, html.a11y body .custom-select-trigger, html.a11y body .search-wrap input { background: var(--a11y-field-bg) !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; border: 2px solid var(--text) !important; border-radius: 10px !important; } html.a11y body input::placeholder, html.a11y body textarea::placeholder { color: var(--text) !important; opacity: .65; } html.a11y body label { font-weight: 700 !important; } /* ============================================================ Каталожные поля, выпадашки и фильтры (Цены, Анализы, Врачи, Библиотека, ЛК). Универсальный сброс (специфичность 0,4,4) снимает фон с плавающих панелей и контейнеров полей — возвращаем сплошную поверхность префиксом html.a11y.a11y.a11y.a11y (5 классов). ============================================================ */ /* Плоские поля поиска каталога: контейнер становится единым боксом, а кнопка-лупа сидит внутри (а не отдельно сбоку). */ html.a11y.a11y.a11y.a11y body .tseny-search, html.a11y.a11y.a11y.a11y body .analizy-search { background: var(--a11y-field-bg) !important; border: 2px solid var(--text) !important; border-radius: 12px !important; } html.a11y body .tseny-search input, html.a11y body .analizy-search input { border: 0 !important; border-radius: 0 !important; } html.a11y body .tseny-search-btn, html.a11y body .analizy-search-btn { color: var(--text) !important; border: 0 !important; } /* Кастомные выпадающие списки (Врачи, формы, ЛК) и фильтр «Библиотеки» — сплошной фон, рамка, видимые наведение и выбранный пункт. */ html.a11y body .dfilter-trigger, html.a11y body .rev-trigger { border: 2px solid var(--text) !important; border-radius: 10px !important; color: var(--text) !important; } html.a11y.a11y.a11y.a11y body .custom-select-dropdown, html.a11y.a11y.a11y.a11y body .dfilter-dropdown, html.a11y.a11y.a11y.a11y body .rev-dropdown, html.a11y.a11y.a11y.a11y body .dfilter-select-wrap.open { background: var(--bg) !important; border: 2px solid var(--a11y-border) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.28) !important; z-index: 500 !important; } html.a11y.a11y.a11y.a11y body .custom-select-option:hover, html.a11y.a11y.a11y.a11y body .custom-select-option:focus-visible, html.a11y.a11y.a11y.a11y body .custom-select-option.selected, html.a11y.a11y.a11y.a11y body .dfilter-option:hover, html.a11y.a11y.a11y.a11y body .dfilter-option:focus-visible, html.a11y.a11y.a11y.a11y body .dfilter-option.selected, html.a11y.a11y.a11y.a11y body .rev-option:hover, html.a11y.a11y.a11y.a11y body .rev-option:focus-visible, html.a11y.a11y.a11y.a11y body .rev-option.selected, /* и вложенный текст пунктов (метка в span) — иначе сброс красит его в чёрный */ html.a11y.a11y.a11y.a11y body .custom-select-option:hover *, html.a11y.a11y.a11y.a11y body .custom-select-option.selected *, html.a11y.a11y.a11y.a11y body .dfilter-option:hover *, html.a11y.a11y.a11y.a11y body .dfilter-option.selected *, html.a11y.a11y.a11y.a11y body .rev-option:hover *, html.a11y.a11y.a11y.a11y body .rev-option.selected * { background: var(--a11y-accent) !important; color: var(--a11y-on-accent) !important; -webkit-text-fill-color: var(--a11y-on-accent) !important; } /* Фильтр-пилюли (срок выполнения и т.п.): чёткая рамка, активная — заливка. */ html.a11y body .filter-pill { border: 2px solid var(--text) !important; border-radius: 999px !important; color: var(--text) !important; font-weight: 700 !important; } html.a11y.a11y.a11y.a11y body .filter-pill.is-active { background: var(--a11y-accent) !important; color: var(--a11y-on-accent) !important; -webkit-text-fill-color: var(--a11y-on-accent) !important; } /* Табы переключения формы («Оставить отзыв» / «Отдел контроля качества»): в режиме доступности выглядят как голый текст — даём обводку, активный таб заливаем акцентом. */ html.a11y body .rev-tab { border: 2px solid var(--text) !important; border-radius: 10px !important; font-weight: 700 !important; } html.a11y.a11y.a11y.a11y body .rev-tab.is-active, html.a11y.a11y.a11y.a11y body .rev-tab[aria-selected="true"], html.a11y.a11y.a11y.a11y body .rev-tab.is-active *, html.a11y.a11y.a11y.a11y body .rev-tab[aria-selected="true"] * { background: var(--a11y-accent) !important; color: var(--a11y-on-accent) !important; -webkit-text-fill-color: var(--a11y-on-accent) !important; } /* Аккордеон категорий (Цены/Анализы): плитки теряют фон-подложку — возвращаем чёткую обводку, чтобы группы читались как карточки. */ html.a11y body .cat-group { border: 2px solid var(--text) !important; border-radius: 12px !important; } html.a11y body .cat-sub { border: 2px solid var(--a11y-border) !important; border-radius: 10px !important; } html.a11y body .cat-leaf { border: 1px solid var(--a11y-border) !important; border-radius: 8px !important; } /* Аккордеоны-«плитки» (детали анализа .ad-acc, FAQ .faq-item) теряют фон-подложку — даём чёткую обводку, чтобы строки читались как карточки. */ html.a11y body .ad-acc, html.a11y body .faq-item { border: 2px solid var(--text) !important; border-radius: 12px !important; } /* поле с ошибкой */ html.a11y body [aria-invalid="true"] { border-color: var(--a11y-error) !important; border-width: 3px !important; } html.a11y .a11y-field-error { display: block; margin-top: 6px; color: var(--a11y-error) !important; font-weight: 700; font-size: 0.95em; } html.a11y[data-a11y-scheme="white"] .a11y-field-error, html.a11y:not([data-a11y-scheme]) .a11y-field-error { color: #b00018 !important; } /* ========================================================= 6. ВИДИМЫЙ ФОКУС — толстая контрастная рамка ========================================================= */ html.a11y :focus-visible, html.a11y a:focus, html.a11y button:focus, html.a11y input:focus, html.a11y select:focus, html.a11y textarea:focus, html.a11y [tabindex]:focus { outline: 4px solid var(--a11y-focus) !important; outline-offset: 2px !important; border-radius: 6px; } /* ========================================================= 7. СПОКОЙНАЯ ШАПКА (без авто-скрытия и анимаций) ========================================================= */ html.a11y .site-header { position: static !important; transform: none !important; border-bottom: 2px solid var(--a11y-border) !important; } html.a11y .site-header.compact { transform: none !important; } /* Пока открыто мега-меню — поднимаем шапку НАД подложкой (scrim z-index:8999). В a11y шапка position:static, поэтому z-index сам по себе не действует — на время открытия делаем её relative (визуально та же позиция) и поднимаем над scrim, иначе подложка перекрывает пункты и наведение пункт→пункт мёртвое. */ html.a11y.mega-open .site-header { position: relative !important; z-index: 9100 !important; } html.a11y .nav-main a, html.a11y .mobile-nav a { text-decoration: underline !important; } /* Мобильное выпадающее меню — сплошная подложка и рамка. (универсальный сброс делает фон прозрачным; перебиваем по ID-специфичности) */ html.a11y #mobile-menu { background: var(--bg) !important; border: 2px solid var(--a11y-border) !important; box-shadow: 0 18px 40px rgba(0,0,0,0.28) !important; } /* Полоски иконки бургера (перебиваем сброс фона по ID-специфичности) */ html.a11y #burger-toggle span { background: var(--text) !important; } html.a11y #burger-toggle.open span { background: var(--a11y-accent) !important; } /* Оверлей поиска по сайту (.hs-root): сплошная подложка панели и затемнение фона. Универсальный сброс фона имеет специфичность (0,4,4) из-за :not()-аргументов, поэтому поднимаем свою через удвоение классов. */ /* На мобильном поиск открывается на весь экран — он должен лежать ВЫШЕ липкой панели режима (z-index 100000), иначе она перекрывает строку ввода. */ html.a11y .hs-root { z-index: 100001 !important; } html.a11y .hs-root.hs-root .hs-shell.hs-shell { background: var(--bg) !important; border: 2px solid var(--a11y-border) !important; box-shadow: 0 20px 48px rgba(0,0,0,0.32) !important; } html.a11y .hs-root.hs-root .hs-scrim.hs-scrim { background-color: rgba(0,0,0,0.6) !important; } html.a11y .hs-root.hs-root .hs-bar.hs-bar { background: var(--bg) !important; border-bottom: 2px solid var(--a11y-border) !important; } html.a11y .hs-root.hs-root .hs-footer.hs-footer { background: var(--bg) !important; border-top: 2px solid var(--a11y-border) !important; } /* Меню личного кабинета (.acct-menu): сплошная подложка, рамка, видимые разделители и фон при наведении. Универсальный сброс имеет специфичность (0,4,4) — поднимаем свою удвоением/утроением классов (≥5 классов). */ html.a11y .acct-menu.acct-menu.acct-menu.acct-menu { background: var(--bg) !important; border: 2px solid var(--a11y-border) !important; box-shadow: 0 20px 48px rgba(0,0,0,0.32) !important; } html.a11y .acct-menu.acct-menu.acct-menu .acct-sep { background: var(--a11y-border) !important; height: 2px !important; } html.a11y .acct-menu.acct-menu.acct-menu .acct-item:hover, html.a11y .acct-menu.acct-menu.acct-menu .acct-item:focus-visible { background: var(--a11y-accent) !important; color: var(--a11y-on-accent) !important; } html.a11y .acct-menu.acct-menu.acct-menu .acct-item:hover span, html.a11y .acct-menu.acct-menu.acct-menu .acct-item:hover svg, html.a11y .acct-menu.acct-menu.acct-menu .acct-item:focus-visible span, html.a11y .acct-menu.acct-menu.acct-menu .acct-item:focus-visible svg { color: var(--a11y-on-accent) !important; } /* Десктопное выпадающее меню (.nav-mega): сплошная подложка панели и подменю «Виды УЗИ». Универсальный сброс (0,4,4) перебиваем ≥5 классами. В a11y .site-header становится position:static и теряет контекст наложения, поэтому панель нужно явно поднять над контентом страницы высоким z-index. */ html.a11y .nav-mega.nav-mega.nav-mega.nav-mega { background: var(--bg) !important; border: 2px solid var(--a11y-border) !important; box-shadow: 0 20px 48px rgba(0,0,0,0.32) !important; /* Панель должна лежать ВЫШЕ шапки (z-index 9100 в открытом состоянии), иначе выпадающее меню уходит под строку поиска. Порядок слоёв: scrim 8999 < шапка 9100 < панель 9200. */ z-index: 9200 !important; } /* Непрозрачная подложка и на слое содержимого — чтобы контент страницы не просвечивал сквозь панель ни при каких условиях. */ html.a11y .nav-mega.nav-mega .nav-mega-panel.nav-mega-panel, html.a11y .nav-mega.nav-mega .nav-mega-inner.nav-mega-inner { background: var(--bg) !important; } html.a11y .nav-mega-scrim.nav-mega-scrim { z-index: 8999 !important; } html.a11y .nav-mega.nav-mega .nav-mega-aside.nav-mega-aside { border: 2px solid var(--a11y-border) !important; } html.a11y .nav-mega.nav-mega .nav-mega-link.nav-mega-link:hover, html.a11y .nav-mega.nav-mega .nav-mega-link.nav-mega-link:focus-visible, html.a11y .nav-mega.nav-mega .nav-mega-link.has-flyout.flyout-open { background: var(--a11y-accent) !important; color: var(--a11y-on-accent) !important; -webkit-text-fill-color: var(--a11y-on-accent) !important; } html.a11y .nav-mega.nav-mega .nav-mega-link.nav-mega-link:hover *, html.a11y .nav-mega.nav-mega .nav-mega-link.nav-mega-link:focus-visible *, html.a11y .nav-mega.nav-mega .nav-mega-link.has-flyout.flyout-open * { color: var(--a11y-on-accent) !important; -webkit-text-fill-color: var(--a11y-on-accent) !important; } /* ========================================================= 8. РАЗДЕЛИТЕЛИ КАРТОЧЕК (поверхности слились — добавим рамки) ========================================================= */ html.a11y .service-card, html.a11y .principle-card, html.a11y .doctor-card, html.a11y .ext-rev-card, html.a11y .review-card, html.a11y .help-card, html.a11y .rev-cta, html.a11y .hero-card, html.a11y .hero-stat, html.a11y .booking-card, html.a11y .price-card, html.a11y .care-card, html.a11y .footer-col, html.a11y .tariff-card, html.a11y [class*="-card"] { border: 2px solid var(--a11y-border) !important; border-radius: 12px !important; padding: 18px !important; } /* ========================================================= 9. РАЗМЕР ШРИФТА — масштаб содержимого без поломки вёрстки (zoom корректно перекомпоновывает текст и блоки) ========================================================= */ html.a11y[data-a11y-font="large"] body { zoom: 1.15; } html.a11y[data-a11y-font="xlarge"] body { zoom: 1.32; } /* ========================================================= 10. ИНТЕРВАЛЫ — межстрочный / межбуквенный ========================================================= */ html.a11y[data-a11y-spacing="wide"] body *:not(.a11y-bar):not(.a11y-bar *) { line-height: 1.8 !important; letter-spacing: 0.02em !important; word-spacing: 0.08em !important; } html.a11y[data-a11y-spacing="wider"] body *:not(.a11y-bar):not(.a11y-bar *) { line-height: 2.1 !important; letter-spacing: 0.06em !important; word-spacing: 0.18em !important; } /* ========================================================= 11. ИЗОБРАЖЕНИЯ — скрытие с подстановкой alt-описания ========================================================= */ .a11y-img-alt { display: none; } html.a11y[data-a11y-images="hide"] img:not(.a11y-keep) { display: none !important; } html.a11y[data-a11y-images="hide"] .a11y-img-alt { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 2px dashed var(--a11y-border) !important; border-radius: 10px; color: var(--text) !important; font-size: 0.95em; font-weight: 600; line-height: 1.4; } html.a11y[data-a11y-images="hide"] .a11y-img-alt::before { content: "🖼"; } /* ========================================================= 12. ОТКЛЮЧЕНИЕ АНИМАЦИЙ ========================================================= */ html.a11y[data-a11y-motion="off"] *, html.a11y[data-a11y-motion="off"] *::before, html.a11y[data-a11y-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { html.a11y * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ========================================================= 13. ССЫЛКА «ПЕРЕЙТИ К СОДЕРЖИМОМУ» (skip link) ========================================================= */ .a11y-skip { position: fixed; top: -100px; left: 12px; z-index: 100002; background: #0a3aa8; color: #fff !important; padding: 12px 20px; border-radius: 0 0 10px 10px; font: 700 16px/1.2 'Manrope', system-ui, sans-serif; text-decoration: none; transition: top .15s ease; } .a11y-skip:focus { top: 0; outline: 4px solid #ff7a00; outline-offset: 2px; } /* ========================================================= 14. ПАНЕЛЬ НАСТРОЕК — верхняя «тулбар»-полоса Имеет собственную палитру, не зависит от схемы содержимого. ========================================================= */ .a11y-bar { position: sticky; top: 0; z-index: 100000; background: #0d1b2e; color: #fff; border-bottom: 3px solid #ff7a00; font-family: 'Manrope', system-ui, -apple-system, sans-serif; display: none; } html.a11y .a11y-bar { display: block; } .a11y-bar-inner { max-width: 1480px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 12px clamp(14px, 3vw, 28px); } .a11y-bar-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: #fff; white-space: nowrap; margin-right: 4px; } .a11y-bar-title svg { flex: 0 0 auto; } /* на десктопе head/body прозрачны для лейаута — всё течёт в одну строку .a11y-bar-inner */ .a11y-bar-head { display: contents; } .a11y-bar-body { display: contents; } .a11y-bar-toggle { display: none; } .a11y-group { display: flex; align-items: center; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; } .a11y-group > .a11y-legend { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.62); white-space: nowrap; } .a11y-seg { display: flex; gap: 4px; background: rgba(255,255,255,0.07); border-radius: 10px; padding: 3px; } .a11y-seg button { font-family: inherit; font-size: 14px; font-weight: 600; color: #fff; background: transparent; border: 2px solid transparent; border-radius: 8px; padding: 8px 13px; cursor: pointer; white-space: nowrap; line-height: 1; display: inline-flex; align-items: center; gap: 7px; transition: background .15s ease, color .15s ease; } .a11y-seg button:hover { background: rgba(255,255,255,0.16); } .a11y-seg button[aria-pressed="true"] { background: #ffffff; color: #0d1b2e; font-weight: 800; } /* образцы цветовых схем внутри кнопок */ .a11y-swatch { width: 20px; height: 20px; border-radius: 5px; flex: 0 0 auto; display: inline-block; border: 1.5px solid rgba(255,255,255,0.5); } .a11y-seg button[aria-pressed="true"] .a11y-swatch { border-color: #0d1b2e; } .a11y-swatch.s-white { background: #fff; } .a11y-swatch.s-black { background: #000; } .a11y-swatch.s-blue { background: #063060; } /* буквы размера шрифта */ .a11y-fs-s { font-size: 14px; } .a11y-fs-m { font-size: 17px; } .a11y-fs-l { font-size: 21px; } .a11y-bar-actions { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; } .a11y-btn { font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; border-radius: 9px; padding: 10px 16px; border: 2px solid rgba(255,255,255,0.5); background: transparent; color: #fff; white-space: nowrap; transition: background .15s ease, color .15s ease; } .a11y-btn:hover { background: rgba(255,255,255,0.14); } .a11y-btn-exit { background: #fff; color: #0d1b2e; border-color: #fff; display: inline-flex; align-items: center; gap: 8px; } .a11y-btn-exit:hover { background: #ffe600; } /* фокус внутри панели */ .a11y-bar :focus-visible, .a11y-skip:focus-visible { outline: 4px solid #ff7a00 !important; outline-offset: 2px !important; } /* индикатор «режим включён» на кнопке в шапке */ html.a11y .accessibility-link, html.a11y .mobile-a11y { font-weight: 700; } html.a11y .accessibility-link .eye { background: var(--a11y-accent) !important; color: var(--a11y-on-accent) !important; } /* живой регион для скринридера */ .a11y-live { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ========================================================= 15. АДАПТИВ ПАНЕЛИ ========================================================= */ @media (max-width: 1100px) { .a11y-bar-inner { gap: 12px 16px; } .a11y-group > .a11y-legend { display: none; } .a11y-bar-actions { margin-left: 0; width: 100%; } } /* Планшеты и узкие экраны: полная панель занимает слишком много рядов — сворачиваем её в компактный вид с кнопкой «Настройки» (выпадающее меню), как на мобильном. */ @media (max-width: 1024px) { .a11y-bar-inner { flex-direction: column; align-items: stretch; gap: 0; padding: 0; } /* верхняя строка: заголовок + кнопка «Настройки» */ .a11y-bar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; box-sizing: border-box; } .a11y-bar-title { width: auto; font-size: 15px; min-width: 0; flex: 0 1 auto; overflow: hidden; } .a11y-bar-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .a11y-bar-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 14px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.5); border-radius: 9px; padding: 9px 14px; cursor: pointer; white-space: nowrap; } .a11y-bar-toggle .a11y-chevron { transition: transform .2s ease; } .a11y-bar-toggle .a11y-gear { display: none; flex: 0 0 auto; } .a11y-bar.is-open .a11y-bar-toggle .a11y-chevron { transform: rotate(180deg); } .a11y-bar.is-open .a11y-bar-toggle { background: #fff; color: #0d1b2e; border-color: #fff; } /* тело панели — выпадающее меню */ .a11y-bar-body { display: none; flex-direction: column; gap: 12px; padding: 4px 14px 16px; border-top: 1px solid rgba(255,255,255,0.18); max-height: 72vh; overflow-y: auto; } .a11y-bar.is-open .a11y-bar-body { display: flex; } .a11y-group { flex: 1 1 auto; flex-direction: column; align-items: stretch; } .a11y-group > .a11y-legend { display: block; margin-bottom: 4px; } .a11y-seg { width: 100%; justify-content: space-between; } .a11y-seg button { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 8px; padding-right: 8px; } .a11y-bar-actions { margin-left: 0; width: 100%; flex-direction: column; } .a11y-bar-actions .a11y-btn { flex: 1 1 auto; text-align: center; width: 100%; } } /* Очень узкие экраны: кнопка «Настройки» не помещается рядом с заголовком — сворачиваем её до иконки-шестерёнки (текст и стрелка скрыты). */ @media (max-width: 440px) { .a11y-bar-toggle .a11y-toggle-label, .a11y-bar-toggle .a11y-chevron { display: none; } .a11y-bar-toggle .a11y-gear { display: inline-block; } .a11y-bar-toggle { padding: 0 !important; width: 44px; height: 44px; justify-content: center; } } /* 481–1280px в a11y-режиме: поиск — широкое поле с обводкой (не иконка). */ @media (min-width: 481px) and (max-width: 1280px) { html.a11y body .search-wrap { flex: 1 1 260px !important; width: auto !important; min-width: 180px !important; max-width: 420px !important; margin-left: auto !important; border: none !important; border-radius: 0 !important; } html.a11y body .search-wrap input { display: block !important; width: 100% !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; border: 2px solid var(--text) !important; border-radius: var(--r-md) !important; outline: none !important; padding: 0 46px 0 14px !important; } html.a11y body .search-wrap input::placeholder { color: var(--text-muted) !important; -webkit-text-fill-color: var(--text-muted) !important; } html.a11y body .search-wrap .search-btn { position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; background: transparent !important; border: 0 !important; } } /* ≤480px в a11y-режиме: поиск — полноширинное поле с обводкой + иконка справа. Этот блок ПОСЛЕДНИЙ — перебивает все предыдущие правила 1280/1180. */ @media (max-width: 480px) { html.a11y body .search-wrap { order: 10 !important; flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; position: relative !important; } html.a11y body .search-wrap input { display: block !important; width: 100% !important; height: 52px !important; padding: 0 52px 0 16px !important; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; border: 2px solid var(--text) !important; border-radius: var(--r-md) !important; outline: none !important; background: var(--a11y-field-bg, #fff) !important; font-size: 18px !important; } html.a11y body .search-wrap input:focus { box-shadow: 0 0 0 2px rgba(0,0,0,0.15) !important; } html.a11y body .search-wrap .search-btn { position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; width: 40px !important; height: 40px !important; background: transparent !important; border: 0 !important; } }