/* * Версия для слабовидящих. * * Включается кнопкой в шапке, состояние хранится в браузере посетителя. * Все переключатели — это классы на , поэтому режим работает на любой * странице и переживает переходы по сайту. */ /* ============================================================ 1. Кнопка и панель ============================================================ */ .st-a11y-open { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 999px; background: none; color: inherit; cursor: pointer; flex: 0 0 auto; transition: border-color .35s ease, background .35s ease, color .35s ease; } .st-a11y-open:hover { border-color: var(--sun); color: var(--sun-ink); } .st-a11y-open svg { width: 20px; height: 20px; } .st-a11y { position: fixed; inset: 0 0 auto 0; z-index: 300; background: #FFF; border-bottom: 1px solid var(--line); box-shadow: var(--shade-2); padding: 16px var(--pad); display: none; } .st-a11y.is-open { display: block; } .st-a11y__inner { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; } .st-a11y__group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .st-a11y__label { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted-2); } .st-a11y__btn { min-width: 40px; padding: 9px 14px; border: 1px solid var(--line); background: #FFF; color: var(--deep); font-family: inherit; font-size: 13px; cursor: pointer; transition: border-color .3s ease, background .3s ease, color .3s ease; } .st-a11y__btn:hover { border-color: var(--sun); } .st-a11y__btn[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); color: #12303F; font-weight: 600; } .st-a11y__btn--sm { font-size: 12px; } .st-a11y__btn--md { font-size: 15px; } .st-a11y__btn--lg { font-size: 18px; } .st-a11y__btn--bw { background: #FFF; color: #000; border-color: #000; } .st-a11y__btn--wb { background: #000; color: #FFF; border-color: #000; } .st-a11y__btn--yb { background: #000; color: #FFDD33; border-color: #FFDD33; } .st-a11y__off { margin-left: auto; } @media (max-width: 900px) { .st-a11y { max-height: 70vh; overflow-y: auto; } .st-a11y__inner { gap: 12px 18px; } .st-a11y__off { margin-left: 0; } } /* ============================================================ 2. Сам режим ============================================================ */ /* * В этом режиме ни панель, ни шапка не липнут к экрану: перекрытия и * подпрыгивающая вёрстка мешают тем, кому и так тяжело читать. */ html.a11y .st-a11y { position: static; } html.a11y .st-nav { position: static; background: var(--sky); backdrop-filter: none; box-shadow: none; } html.a11y .st-bookbar { position: static; transform: none; } html.a11y .st-progress { display: none; } /* * Размеры на сайте считаются от --index (проценты экрана). В этом режиме * фиксируем его в пикселях и множим на выбранный шаг, иначе крупный шрифт * ничего не изменит. */ html.a11y { --a11y-k: 1; --index: calc(19px * var(--a11y-k)); --pad: 24px; } html.a11y.a11y-font-md { --a11y-k: 1.22; } html.a11y.a11y-font-lg { --a11y-k: 1.5; } html.a11y body { font-size: calc(17px * var(--a11y-k)); line-height: 1.7; } html.a11y .st-body, html.a11y p, html.a11y li, html.a11y dd, html.a11y .st-lead { font-size: calc(17px * var(--a11y-k)) !important; line-height: 1.75; } html.a11y .st-label, html.a11y .st-kicker, html.a11y .st-a11y__label { font-size: calc(13px * var(--a11y-k)) !important; letter-spacing: .12em; } /* Декор в этом режиме только мешает. */ html.a11y .st-hero__stage { height: auto; min-height: 0; padding: calc(var(--index) * 3) 0; } html.a11y .st-hero__layer, html.a11y .st-hero__veil, html.a11y .st-phero__bg, html.a11y .st-post__hero-bg, html.a11y .st-hero__ground, html.a11y .st-hero__cue, html.a11y .st-spiral, html.a11y .st-route__svg, html.a11y .st-quote__bg, html.a11y .st-cta__bg, html.a11y .st-route__veil, html.a11y .st-flow__frame::after, html.a11y body::before { display: none !important; } html.a11y .st-hero__inner { transform: none !important; text-shadow: none !important; color: var(--deep) !important; } html.a11y .st-hero__inner::before { display: none; } html.a11y .st-quote p { color: var(--deep) !important; text-shadow: none !important; } html.a11y .st-quote__veil { background: none !important; } html.a11y *, html.a11y *::before, html.a11y *::after { animation: none !important; transition: none !important; filter: none !important; backdrop-filter: none !important; } /* Карусели превращаются в обычные ряды карточек. */ html.a11y .st-flow { perspective: none; } html.a11y .st-flow__track { height: auto !important; display: flex; flex-wrap: wrap; gap: 20px; transform: none !important; } html.a11y .st-flow__item { position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important; width: min(320px, 100%) !important; } html.a11y .st-flow__item[data-flow-clone] { display: none !important; } html.a11y .st-flow__ui { display: none; } /* Дорога на главной остаётся списком остановок. */ html.a11y .st-route__plot { aspect-ratio: auto; height: auto; } html.a11y .st-route__stop { position: static !important; width: auto; height: auto; display: block; opacity: 1 !important; padding: 10px 0; border-bottom: 1px solid var(--line); } html.a11y .st-route__stop i { display: none; } html.a11y .st-route__stop b, html.a11y .st-route__stop em { position: static; transform: none; opacity: 1 !important; display: inline-block; margin-right: 12px; background: none; box-shadow: none; padding: 0; } html.a11y .st-route__city { position: static; display: inline-block; } html.a11y [data-reveal] { opacity: 1 !important; transform: none !important; } /* Многоколоночные сетки в одну колонку: крупный шрифт в узкой колонке рвётся и вылезает за край. */ html.a11y .st-about__grid, html.a11y .st-about__cols, html.a11y .st-terms__grid, html.a11y .st-deal__grid, html.a11y .st-tiles__grid, html.a11y .st-reads, html.a11y .st-story__grid, html.a11y .st-route__stage, html.a11y .st-grid-lines, html.a11y .st-cards, html.a11y .st-tours, html.a11y .st-contacts__grid, html.a11y .st-form--3, html.a11y .st-form--4, html.a11y .st-step__panel, html.a11y .st-step__head { grid-template-columns: 1fr !important; } html.a11y .st-story__toc { display: none; } html.a11y .st-step__text { padding-left: 0 !important; } html.a11y .st-facts dd, html.a11y .st-facts dt { text-align: left; } html.a11y .st-facts div { flex-direction: column; align-items: flex-start; gap: 4px; } /* ---- контрастные схемы ---- */ html.a11y-bw { --sky: #FFF; --sky-2: #FFF; --sky-3: #FFF; --cloud: #FFF; --deep: #000; --deep-2: #000; --sun: #000; --sun-lt: #000; --sun-ink: #000; --azure: #000; --azure-lt: #000; --line: #000; --line-soft: #000; --muted: #000; --muted-2: #000; --shade-1: none; --shade-2: none; --shade-3: none; } html.a11y-wb { --sky: #000; --sky-2: #000; --sky-3: #000; --cloud: #000; --deep: #FFF; --deep-2: #FFF; --sun: #FFF; --sun-lt: #FFF; --sun-ink: #FFF; --azure: #FFF; --azure-lt: #FFF; --line: #FFF; --line-soft: #FFF; --muted: #FFF; --muted-2: #FFF; --shade-1: none; --shade-2: none; --shade-3: none; } html.a11y-yb { --sky: #000; --sky-2: #000; --sky-3: #000; --cloud: #000; --deep: #FFDD33; --deep-2: #FFDD33; --sun: #FFDD33; --sun-lt: #FFDD33; --sun-ink: #FFDD33; --azure: #FFDD33; --azure-lt: #FFDD33; --line: #FFDD33; --line-soft: #FFDD33; --muted: #FFDD33; --muted-2: #FFDD33; --shade-1: none; --shade-2: none; --shade-3: none; } /* * Часть цветов в теме записана готовыми rgba, а не переменными: в контрастных * схемах перекрашиваем всё разом, иначе остаются бледные абзацы. */ html.a11y-bw body, html.a11y-wb body, html.a11y-yb body { background: var(--sky) !important; } html.a11y-bw *, html.a11y-wb *, html.a11y-yb * { color: var(--deep) !important; border-color: var(--line) !important; text-shadow: none !important; box-shadow: none !important; } html.a11y-bw section, html.a11y-wb section, html.a11y-yb section, html.a11y-bw header, html.a11y-wb header, html.a11y-yb header, html.a11y-bw footer, html.a11y-wb footer, html.a11y-yb footer, html.a11y-bw div, html.a11y-wb div, html.a11y-yb div, html.a11y-bw span, html.a11y-wb span, html.a11y-yb span, html.a11y-bw li, html.a11y-wb li, html.a11y-yb li { background-color: transparent !important; } html.a11y-bw .st-flow__frame, html.a11y-wb .st-flow__frame, html.a11y-yb .st-flow__frame, html.a11y-bw .st-terms__item, html.a11y-wb .st-terms__item, html.a11y-yb .st-terms__item, html.a11y-bw .st-tile, html.a11y-wb .st-tile, html.a11y-yb .st-tile, html.a11y-bw .st-read, html.a11y-wb .st-read, html.a11y-yb .st-read, html.a11y-bw .st-route__card, html.a11y-wb .st-route__card, html.a11y-yb .st-route__card, html.a11y-bw .st-spiral__panel, html.a11y-wb .st-spiral__panel, html.a11y-yb .st-spiral__panel, html.a11y-bw .st-step[open], html.a11y-wb .st-step[open], html.a11y-yb .st-step[open], html.a11y-bw .st-a11y, html.a11y-wb .st-a11y, html.a11y-yb .st-a11y, html.a11y-bw .st-a11y__btn, html.a11y-wb .st-a11y__btn, html.a11y-yb .st-a11y__btn, html.a11y-bw .st-nav, html.a11y-wb .st-nav, html.a11y-yb .st-nav { background: var(--sky) !important; color: var(--deep) !important; border-color: var(--line) !important; box-shadow: none !important; } html.a11y-wb .st-btn--solid, html.a11y-yb .st-btn--solid, html.a11y-bw .st-btn--solid { background: var(--deep) !important; color: var(--sky) !important; border: 1px solid var(--deep) !important; } /* ---- буквы пореже ---- */ html.a11y-space p, html.a11y-space li, html.a11y-space dd, html.a11y-space .st-body { letter-spacing: .06em; word-spacing: .16em; line-height: 2; } /* ---- без картинок ---- */ html.a11y-noimg img, html.a11y-noimg .st-tile__shot, html.a11y-noimg .st-read__shot, html.a11y-noimg .st-route__shot, html.a11y-noimg .st-compass__shot, html.a11y-noimg .st-spiral__bg, html.a11y-noimg .st-step__shot, html.a11y-noimg .st-flow__frame, html.a11y-noimg .st-phero__bg, html.a11y-noimg .st-post__hero-bg { display: none !important; } /* Логотип в этом режиме и так крупный, а цветной значок чата отвлекает. */ html.a11y .stc-root, html.a11y .stc-toggle, html.a11y .stc-teaser, html.a11y [class^="stc-"] { display: none !important; }