/** * «Версия для слабовидящих» (раздел 118н). Включается классом ld-a11y на * (рендерит сервер по cookie — без мигания). Поверх дизайна: упрощает палитру до * выбранной схемы, увеличивает шрифт, подчёркивает ссылки, усиливает фокус. * * Панель управления (.a11y-bar) скрыта, пока режим выключен. Тумблер включения * (.a11y-toggle) прячется, когда режим уже активен. */ /* Панель видна только в режиме; тумблер — только вне режима. */ .a11y-bar { display: none; } html.ld-a11y .a11y-bar { display: block; } html.ld-a11y .a11y-toggle { display: none; } /* Тумблер включения в топлайне. */ .a11y-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; font-size: 13px; } .a11y-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.8; } .a11y-toggle:hover { text-decoration: underline; } /* ── Цветовые схемы (значения для переменных режима) ─────────────────── */ html.ld-a11y { --a-bg: #ffffff; --a-fg: #000000; --a-link: #0000cc; } /* по умолчанию: чёрным по белому */ html.ld-a11y.ld-a11y--bw { --a-bg: #000000; --a-fg: #ffffff; --a-link: #ffd633; } html.ld-a11y.ld-a11y--blue { --a-bg: #9dd1ff; --a-fg: #063462; --a-link: #063462; } html.ld-a11y.ld-a11y--beige { --a-bg: #f7f1db; --a-fg: #4a3f2a; --a-link: #4a3f2a; } /* ── Размер шрифта (множитель дизайна --ld-fs) ──────────────────────── */ html.ld-a11y.ld-a11y--font-1 { --ld-fs: 1; } html.ld-a11y.ld-a11y--font-2 { --ld-fs: 1.25; } html.ld-a11y.ld-a11y--font-3 { --ld-fs: 1.5; } /* ── Упрощение оформления: одна схема цветов, без декора ─────────────── */ html.ld-a11y, html.ld-a11y body { background: var(--a-bg) !important; color: var(--a-fg) !important; } html.ld-a11y * { background-color: transparent !important; background-image: none !important; color: var(--a-fg) !important; border-color: var(--a-fg) !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; } /* Ссылки — цветом схемы и всегда подчёркнуты. */ html.ld-a11y a { color: var(--a-link) !important; text-decoration: underline !important; text-underline-offset: 2px; } /* Кнопки и pill-CTA — контурные, читаемые. */ html.ld-a11y .btn, html.ld-a11y button { background: transparent !important; color: var(--a-fg) !important; border: 2px solid var(--a-fg) !important; -webkit-text-fill-color: var(--a-fg) !important; } /* Иконки (stroke-контуры) — цветом текста. */ html.ld-a11y svg { stroke: var(--a-fg) !important; } /* Значок логотипа: глобально фон-картинка обнуляется, поэтому рисуем его одноцветным силуэтом цвета схемы через mask (форма «зуб+сердце»). */ html.ld-a11y .logo .mark { background-color: var(--a-fg) !important; -webkit-mask: url('../brand-mark-color.png?v=rnd1') center/contain no-repeat; mask: url('../brand-mark-color.png?v=rnd1') center/contain no-repeat; } /* Поверхности, которым нужен непрозрачный фон (иначе текст ляжет на текст). */ html.ld-a11y .topline, html.ld-a11y .hdr, html.ld-a11y .ftr, html.ld-a11y .modal, html.ld-a11y .m-drawer, html.ld-a11y .m-cta, html.ld-a11y .cookie-bar, html.ld-a11y .dd-menu, html.ld-a11y .phone-dd { background: var(--a-bg) !important; border: 2px solid var(--a-fg) !important; } /* Затемнение под модалками — оставляем читаемым. */ html.ld-a11y .modal-ovl, html.ld-a11y .m-ovl { background: rgba(0, 0, 0, .55) !important; } /* Усиленный фокус для управления с клавиатуры. */ html.ld-a11y :focus, html.ld-a11y :focus-visible { outline: 3px solid var(--a-link) !important; outline-offset: 2px !important; } /* Скрыть изображения по выбору пользователя. */ html.ld-a11y.ld-a11y--noimg img, html.ld-a11y.ld-a11y--noimg .media, html.ld-a11y.ld-a11y--noimg .ph, html.ld-a11y.ld-a11y--noimg .photo { display: none !important; } /* Декоративные плейсхолдеры/полоски не нужны в режиме. */ html.ld-a11y .ph::before, html.ld-a11y .ph::after { display: none !important; } /* ── Панель управления режимом ──────────────────────────────────────── */ html.ld-a11y .a11y-bar { background: var(--a-bg) !important; border-bottom: 2px solid var(--a-fg) !important; padding: 8px 0; } .a11y-bar__in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .a11y-bar__title { font-weight: 800; font-size: 14px; } .a11y-grp { display: inline-flex; align-items: center; gap: 6px; } .a11y-grp__lbl { font-size: 13px; } html.ld-a11y .a11y-btn { min-width: 30px; min-height: 30px; padding: 3px 9px; line-height: 1; font-size: 14px; font-weight: 700; cursor: pointer; border: 2px solid var(--a-fg) !important; border-radius: 4px !important; } html.ld-a11y .a11y-btn.is-active { background: var(--a-fg) !important; color: var(--a-bg) !important; -webkit-text-fill-color: var(--a-bg) !important; } html.ld-a11y .a11y-sw { font-weight: 800; } .a11y-bar__off { margin-left: auto; font-size: 13px !important; padding: 4px 12px !important; cursor: pointer; } @media (max-width: 760px) { .a11y-bar__title { width: 100%; } .a11y-bar__off { margin-left: 0; } }