/* Версия для слабовидящих для шаблона empathy2025. Переключатель и панель — штатный компонент Aspro (aspro:eyed.allcorp3medc): он ставит на классы eyed / eyed--color-scheme--* / eyed--font-size--* / eyed--images--*. Штатные стили Aspro перекрашивают сайт через свои CSS-переменные (--basic_text_black и т.п.), которых в новой вёрстке нет, поэтому здесь те же классы переложены на нашу разметку. */ /* ---------- палитры (значения совпадают с Aspro) ---------- */ body.eyed { --eyed-bg: #fff; --eyed-fg: #000; --eyed-zoom: 1; } body.eyed.eyed--color-scheme--black { --eyed-bg: #fff; --eyed-fg: #000; } body.eyed.eyed--color-scheme--white { --eyed-bg: #000; --eyed-fg: #fff; } body.eyed.eyed--color-scheme--blue { --eyed-bg: #9fd7ff; --eyed-fg: #133C58; } body.eyed.eyed--color-scheme--black_on_yellow { --eyed-bg: #ff0; --eyed-fg: #000; } body.eyed.eyed--color-scheme--green { --eyed-bg: #000; --eyed-fg: #a9dd38; } /* ---------- размер текста ---------- Вёрстка задаёт кегль в px почти каждому элементу, поэтому смена font-size у body ничего не даёт. Масштабируем содержимое целиком — так растёт весь текст, а не только базовый. Модалку не трогаем: zoom ломает её position: fixed. */ body.eyed.eyed--font-size--16 { --eyed-zoom: 1; } body.eyed.eyed--font-size--20 { --eyed-zoom: 1.25; } body.eyed.eyed--font-size--24 { --eyed-zoom: 1.5; } body.eyed > *:not(#eyed-panel):not(.booking-modal) { zoom: var(--eyed-zoom); } /* ---------- цвета ---------- Панель настроек (#eyed-panel) исключена — у неё собственное оформление. */ body.eyed, body.eyed > *:not(#eyed-panel), body.eyed > *:not(#eyed-panel) * { background-color: var(--eyed-bg) !important; background-image: none !important; color: var(--eyed-fg) !important; border-color: var(--eyed-fg) !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; opacity: 1 !important; } body.eyed > *:not(#eyed-panel) svg, body.eyed > *:not(#eyed-panel) svg * { fill: var(--eyed-fg) !important; stroke: var(--eyed-fg) !important; } /* Кнопки и поля — контурные: заливки в режиме слабовидящих быть не должно, но границу оставляем, иначе элемент перестаёт читаться как кнопка. */ body.eyed > *:not(#eyed-panel) :is(.button, button, input, textarea, select, .input) { border: 2px solid var(--eyed-fg) !important; border-radius: 8px !important; text-decoration: none !important; } body.eyed > *:not(#eyed-panel) a { text-decoration: underline !important; } body.eyed > *:not(#eyed-panel) a.button { text-decoration: none !important; } /* Видимый фокус — обязателен для клавиатурной навигации */ body.eyed > *:not(#eyed-panel) :is(a, button, input, textarea, select):focus-visible { outline: 3px solid var(--eyed-fg) !important; outline-offset: 2px !important; } /* Декоративные псевдоэлементы вёрстки (иконки-подложки, стрелки, градиенты) в перекрашенном режиме превращаются в цветные пятна — убираем фон, оставляя текст. */ /* Вёрстка рисует цветные подложки секций псевдоэлементами (.slider--bg:before и т.п.) — без сброса фона они остаются яркими пятнами поверх перекрашенной страницы. */ body.eyed > *:not(#eyed-panel)::before, body.eyed > *:not(#eyed-panel)::after, body.eyed > *:not(#eyed-panel) *::before, body.eyed > *:not(#eyed-panel) *::after { background-color: var(--eyed-bg) !important; background-image: none !important; box-shadow: none !important; color: var(--eyed-fg) !important; } /* Логотип — картинка-фон без текста: в режиме слабовидящих он пропадает, поэтому подписываем его названием клиники. */ body.eyed .header__logo { width: auto !important; min-width: 0 !important; font-size: 22px !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap; } body.eyed .header__logo::after { content: "Эмпатия"; display: inline; } /* ---------- изображения выключены ---------- */ body.eyed--images--off > *:not(#eyed-panel) :is(img, picture, video, iframe, svg, .intro__image, .icon) { display: none !important; } /* ---------- панель настроек ---------- Разметка компонента опирается на служебные классы Aspro (.maxwidth-theme, .line-block), их стилей в новом шаблоне нет — задаём минимально необходимую раскладку. */ #eyed-panel .maxwidth-theme { max-width: 1280px; margin: 0 auto; padding: 0 20px; } #eyed-panel .line-block { display: flex; align-items: flex-start; gap: 8px; } #eyed-panel .line-block--24-vertical { gap: 24px; } #eyed-panel .line-block--8-vertical { gap: 8px; } #eyed-panel .flexbox--justify-beetwen { justify-content: space-between; } #eyed-panel .flexbox--wrap { flex-wrap: wrap; } #eyed-panel .font_bold { font-weight: 700; } #eyed-panel .eyed-panel__item-value { padding: 0 8px; text-decoration: none; } #eyed-panel .eyed-panel__item-value svg { max-width: 40px; max-height: 24px; } #eyed-panel .btn.eyed-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 2px solid #000; border-radius: 5px; background: #fff; color: #000; cursor: pointer; } #eyed-panel .btn.eyed-toggle svg { width: 24px; height: 24px; } /* ---------- переключатель в подвале ---------- Это