/* ════════════════ VALHELPS · A11Y (версия для слабовидящих) ════════════════ Стили панели «Настройки отображения» и глобальные классы, которые вешаются на . Работают поверх обычной темы (light/dark), схемы a11y-scheme-wb/bw ПЕРЕОПРЕДЕЛЯЮТ dark. */ /* ─── глобальные a11y-классы на ──────────────────────── */ /* Размер шрифта: на сайте все размеры в px, поэтому меняем через zoom — он масштабирует и текст, и layout, и картинки. Работает в Chrome/Safari/ Edge/Yandex. В Firefox — тоже поддерживается с версии 126 (май 2024). */ html.a11y-font-large { zoom: 1.25; } html.a11y-font-huge { zoom: 1.55; } /* На мобилке zoom на ломает viewport: контент физически шире экрана, уезжает вправо, плавающие элементы (float-chip/float-dot) наползают на соседний контент. Решение: на мобилке zoom СБРАСЫВАЕМ, а масштабируем через font-size на конкретных типографских элементах — layout остаётся ровно по ширине экрана, а текст растёт. */ @media (max-width: 720px) { html.a11y-font-large, html.a11y-font-huge { zoom: 1 !important; } /* Множитель через CSS-переменную, применяем к типографике */ html.a11y-font-large { --a11y-mobile-scale: 1.15; } html.a11y-font-huge { --a11y-mobile-scale: 1.32; } html:where(.a11y-font-large, .a11y-font-huge) :where( p, li, dd, dt, blockquote, .lead, .article-body, h1, h2, h3, h4, h5, h6, .chapter-row-title, .chapter-row-lead, .chapter-row-meta, .chapter-row-num, .contents-group-title, .brain-tag, .tag, .num, .htr-body, .how-to-read, .foot-sos .n, .foot-col a, .foot-col h4, .cat-card h3, .cat-card p, .cat-card-eyebrow, .call-main strong, .call-online strong, .call-sec strong, .btn, button ) { font-size: calc(1em * var(--a11y-mobile-scale, 1)) !important; } /* Плавающие чипы «Дневник»/«Настроение» и точки-акценты вокруг Вэла всё равно скрываем в a11y-режимах шрифта — они отвлекают и путают восприятие при крупном тексте. */ html:where(.a11y-font-large, .a11y-font-huge) :where(.float-chip, .float-dot) { display: none !important; } /* Гарантия: никакого горизонтального оверфлоу от контента */ html:where(.a11y-font-large, .a11y-font-huge) body { overflow-x: hidden; } } /* Межстрочный интервал — применяем к главным текстовым блокам, чтобы не растягивать вертикально кнопки и шапку. */ html.a11y-line-med :where(p, li, blockquote, dd, .article-body, .rich, .prose, .content) { line-height: 1.85 !important; } html.a11y-line-big :where(p, li, blockquote, dd, .article-body, .rich, .prose, .content) { line-height: 2.15 !important; } /* Схема «чёрное на белом» — максимальный контраст, поверх light/dark. Занимает !important — иначе локальные CSS страниц перекроют. */ html.a11y-scheme-wb { --bg: #FFFFFF !important; --card: #FFFFFF !important; --text: #000000 !important; --sub: #000000 !important; --muted: #000000 !important; --border: #000000 !important; --faint: #333333 !important; --accent: #E7E7E7 !important; --accent-dark: #000000 !important; --accent-deep: #000000 !important; --mint: #FFFFFF !important; --mint-dark: #000000 !important; --hairline: #000000 !important; --topic-color: #000000 !important; --warn: #000000 !important; --danger: #000000 !important; --shadow-sm: none !important; --shadow-md: none !important; --cta-shadow: none !important; --header-bg: #FFFFFF !important; background: #FFFFFF !important; color: #000000 !important; } /* FAQ / раскрывашки .details.more: левая полоска, плюсик, ховер */ html.a11y-scheme-wb details.more { border-left-color: #000000 !important; } html.a11y-scheme-wb details.more > summary::before, html.a11y-scheme-wb details.more[open] > summary::before { background: #000000 !important; color: #FFFFFF !important; } html.a11y-scheme-wb details.more > summary:hover { color: #000000 !important; } /* Красный «!» в блоках .note — через ::before, отдельно */ html.a11y-scheme-wb .note::before { background: #000000 !important; color: #FFFFFF !important; } /* Зелёная галочка в блоках .good («это не приговор») */ html.a11y-scheme-wb .good { background: #FFFFFF !important; color: #000000 !important; border: 1px solid #000000 !important; } html.a11y-scheme-wb .good::before { background: #000000 !important; color: #FFFFFF !important; } /* Блок «Как читать» с Валом на хабах */ html.a11y-scheme-wb .how-to-read { background: #FFFFFF !important; color: #000000 !important; border: 1px solid #000000 !important; } /* Вложенные подсвеченные

внутри раскрывашек (inline style с фоном/border) */ html.a11y-scheme-wb .more-body p[style] { background: #FFFFFF !important; color: #000000 !important; border-left-color: #000000 !important; border-left-width: 3px !important; border-left-style: solid !important; } /* symptom-card: цветная полоска сверху (::before) и цветные .tag внутри */ html.a11y-scheme-wb .symptom-card { border: 1px solid #000000 !important; } html.a11y-scheme-wb .symptom-card::before, html.a11y-scheme-wb .symptom-card.up::before, html.a11y-scheme-wb .symptom-card.down::before, html.a11y-scheme-wb .symptom-card.mixed::before { background: #000000 !important; } html.a11y-scheme-wb :where( .symptom-card .tag, .symptom-card.up .tag, .symptom-card.down .tag, .symptom-card.mixed .tag ) { background: #FFFFFF !important; color: #000000 !important; border: 1px solid #000000 !important; } html.a11y-scheme-wb body { background: #FFFFFF !important; color: #000000 !important; } html.a11y-scheme-wb :where(a, a:visited) { color: #000000 !important; text-decoration: underline !important; text-underline-offset: 3px; } html.a11y-scheme-wb :where(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, blockquote, dd, dt) { color: #000000 !important; } html.a11y-scheme-wb .btn, html.a11y-scheme-wb .cta-head, html.a11y-scheme-wb button { background: #FFFFFF !important; color: #000000 !important; border: 2px solid #000000 !important; } html.a11y-scheme-wb .sos-pill { background: #FFFFFF !important; color: #000000 !important; border: 2px solid #000000 !important; } html.a11y-scheme-wb :where( header, footer, .brain-says, .symptom-card, .note, .call-main, .call-online, .call-sec, .card, .prin, .foot-sos, .foot-col, .hub-cat, .cat-header, .hub, .art-card, .voice, .glossary ) { background: #FFFFFF !important; color: #000000 !important; border: 1px solid #000000 !important; } html.a11y-scheme-wb :where(.call-circle, .hub-cat-ic, .cat-ic) { background: #FFFFFF !important; color: #000000 !important; border: 1px solid #000000 !important; } html.a11y-scheme-wb :where(.hub-cat-strip, .cat-strip) { background: #000000 !important; } html.a11y-scheme-wb :where(.dotpulse, .float-dot, .float-dot.f1, .float-dot.f2, .float-dot.f3, .val-caption .vdot) { background: #000000 !important; box-shadow: none !important; animation: none !important; } html.a11y-scheme-wb .val-caption .vlabel { color: #000000 !important; } /* Заголовки/подписи внутри самой панели a11y — WB симметрично */ html.a11y-scheme-wb .a11y-panel .lab { color: #000000 !important; } html.a11y-scheme-wb .a11y-panel .tcap { color: #000000 !important; } html.a11y-scheme-wb .a11y-panel .cap { color: #000000 !important; } html.a11y-scheme-wb .a11y-panel .tlab { color: #000000 !important; } html.a11y-scheme-wb .a11y-panel .ttl { color: #000000 !important; } html.a11y-scheme-wb .a11y-panel .state { color: #000000 !important; } html.a11y-scheme-wb :where( .cat-hero-bg, .hub-hero-bg, .hero-bg, .topic-hero-bg, .faq-bg, .chapters-bg, .stories-bg, .likbez-bg, .glava-bg ) { background: #FFFFFF !important; } html.a11y-scheme-wb :where( .num, .chapter-num, .toc-num, .step-num, .step-index, .chapter-row-num, .chapter-num-circle, .row-num, .list-num, .time-badge, .min-badge, .read-min, .badge, .chapter-row-meta, .tag, .cat-tag, .hub-tag, .topic-tag, .hero-tag, .pill, .chip, .eyebrow, .cat-eyebrow, .hub-eyebrow, .topic-eyebrow, .kicker ) { background: #FFFFFF !important; color: #000000 !important; border: 1px solid #000000 !important; } html.a11y-scheme-wb .chapter-row { background: #FFFFFF !important; color: #000000 !important; border: 1px solid #000000 !important; } html.a11y-scheme-wb :where(.chapter-row.g-what, .chapter-row.g-deep, .chapter-row.g-help, .chapter-row.g-life, .chapter-row.g-story, .chapter-row.g-treat, .chapter-row.g-stories) { background: #FFFFFF !important; } html.a11y-scheme-wb .contents-group-title, html.a11y-scheme-wb :where( .contents-group-title.g-what, .contents-group-title.g-deep, .contents-group-title.g-help, .contents-group-title.g-life, .contents-group-title.g-story, .contents-group-title.g-treat, .contents-group-title.g-stories ) { color: #000000 !important; background: transparent !important; } html.a11y-scheme-wb :where(.cat-hero-bg, .hub-hero-bg, .topic-hero-bg, .hero-bg) { border-bottom: 2px solid #000000 !important; } html.a11y-scheme-wb .chapter-nav a, html.a11y-scheme-wb .next-chapter-btn, html.a11y-scheme-wb .back-to-hub { background: #FFFFFF !important; color: #000000 !important; border: 1px solid #000000 !important; box-shadow: none !important; } html.a11y-scheme-wb .chapter-nav-label { color: #000000 !important; } /* Упражнения SOS — круги заземления. Filled должен явно отличаться от пустого. */ html.a11y-scheme-wb .ground-circle { background: #FFFFFF !important; border: 2px solid #000000 !important; } html.a11y-scheme-wb .ground-circle.is-filled { background: #000000 !important; box-shadow: none !important; } html.a11y-scheme-wb :where(.call-main, .call-online, .call-sec) :where(strong, .n, .call-main-num) { color: #000000 !important; } /* Privacy / юридические страницы — жёстко захардкоженные inline-стили */ html.a11y-scheme-wb :where(.callout, .requisites, .signature) { background: #FFFFFF !important; color: #000000 !important; border: 1px solid #000000 !important; box-shadow: none !important; } html.a11y-scheme-wb :where(.back, .meta, .lead, .signature, .requisites .lbl, .meta) { color: #000000 !important; } html.a11y-scheme-wb li::marker { color: #000000 !important; } /* Схема «белое на чёрном» */ html.a11y-scheme-bw { --bg: #000000 !important; --card: #000000 !important; --text: #FFFFFF !important; --sub: #FFFFFF !important; --muted: #FFFFFF !important; --border: #FFFFFF !important; --faint: #CCCCCC !important; --accent: #333333 !important; --accent-dark: #FFFFFF !important; --accent-deep: #FFFFFF !important; --mint: #000000 !important; --mint-dark: #FFFFFF !important; --hairline: #FFFFFF !important; --topic-color: #FFFFFF !important; --warn: #FFFFFF !important; --danger: #FFFFFF !important; --shadow-sm: none !important; --shadow-md: none !important; --cta-shadow: none !important; --header-bg: #000000 !important; background: #000000 !important; color: #FFFFFF !important; } /* FAQ / раскрывашки .details.more: левая полоска, плюсик, ховер */ html.a11y-scheme-bw details.more { border-left-color: #FFFFFF !important; } html.a11y-scheme-bw details.more > summary::before, html.a11y-scheme-bw details.more[open] > summary::before { background: #FFFFFF !important; color: #000000 !important; } html.a11y-scheme-bw details.more > summary:hover { color: #FFFFFF !important; } /* Красный «!» в блоках .note — через ::before, отдельно */ html.a11y-scheme-bw .note::before { background: #FFFFFF !important; color: #000000 !important; } /* Зелёная галочка в блоках .good («это не приговор») */ html.a11y-scheme-bw .good { background: #000000 !important; color: #FFFFFF !important; border: 1px solid #FFFFFF !important; } html.a11y-scheme-bw .good::before { background: #FFFFFF !important; color: #000000 !important; } /* Блок «Как читать» с Валом на хабах */ html.a11y-scheme-bw .how-to-read { background: #000000 !important; color: #FFFFFF !important; border: 1px solid #FFFFFF !important; } /* Вложенные подсвеченные

внутри раскрывашек (inline style с фоном/border) */ html.a11y-scheme-bw .more-body p[style] { background: #000000 !important; color: #FFFFFF !important; border-left-color: #FFFFFF !important; border-left-width: 3px !important; border-left-style: solid !important; } /* symptom-card: цветная полоска сверху (::before) и цветные .tag внутри */ html.a11y-scheme-bw .symptom-card { border: 1px solid #FFFFFF !important; } html.a11y-scheme-bw .symptom-card::before, html.a11y-scheme-bw .symptom-card.up::before, html.a11y-scheme-bw .symptom-card.down::before, html.a11y-scheme-bw .symptom-card.mixed::before { background: #FFFFFF !important; } html.a11y-scheme-bw :where( .symptom-card .tag, .symptom-card.up .tag, .symptom-card.down .tag, .symptom-card.mixed .tag ) { background: #000000 !important; color: #FFFFFF !important; border: 1px solid #FFFFFF !important; } html.a11y-scheme-bw body { background: #000000 !important; color: #FFFFFF !important; } html.a11y-scheme-bw :where(a, a:visited) { color: #FFFFFF !important; text-decoration: underline !important; text-underline-offset: 3px; } html.a11y-scheme-bw :where(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, blockquote, dd, dt) { color: #FFFFFF !important; } html.a11y-scheme-bw .btn, html.a11y-scheme-bw .cta-head, html.a11y-scheme-bw button { background: #000000 !important; color: #FFFFFF !important; border: 2px solid #FFFFFF !important; } html.a11y-scheme-bw .sos-pill { background: #000000 !important; color: #FFFFFF !important; border: 2px solid #FFFFFF !important; } html.a11y-scheme-bw :where( header, footer, .brain-says, .symptom-card, .note, .call-main, .call-online, .call-sec, .card, .prin, .foot-sos, .foot-col, .hub-cat, .cat-header, .hub, .art-card, .voice, .glossary ) { background: #000000 !important; color: #FFFFFF !important; border: 1px solid #FFFFFF !important; } html.a11y-scheme-bw :where(.call-circle, .hub-cat-ic, .cat-ic) { background: #000000 !important; color: #FFFFFF !important; border: 1px solid #FFFFFF !important; } html.a11y-scheme-bw :where(.hub-cat-strip, .cat-strip) { background: #FFFFFF !important; } html.a11y-scheme-bw :where(.dotpulse, .float-dot, .float-dot.f1, .float-dot.f2, .float-dot.f3, .val-caption .vdot) { background: #FFFFFF !important; box-shadow: none !important; animation: none !important; } html.a11y-scheme-bw .val-caption .vlabel { color: #FFFFFF !important; } /* Заголовки/подписи внутри самой панели a11y — на случай каскадных перекрытий */ html.a11y-scheme-bw .a11y-panel .lab { color: #FFFFFF !important; } html.a11y-scheme-bw .a11y-panel .tcap { color: #FFFFFF !important; } html.a11y-scheme-bw .a11y-panel .cap { color: #FFFFFF !important; } html.a11y-scheme-bw .a11y-panel .tlab { color: #FFFFFF !important; } html.a11y-scheme-bw .a11y-panel .ttl { color: #FFFFFF !important; } html.a11y-scheme-bw .a11y-panel .state { color: #FFFFFF !important; } html.a11y-scheme-bw :where( .cat-hero-bg, .hub-hero-bg, .hero-bg, .topic-hero-bg, .faq-bg, .chapters-bg, .stories-bg, .likbez-bg, .glava-bg ) { background: #000000 !important; } html.a11y-scheme-bw :where( .num, .chapter-num, .toc-num, .step-num, .step-index, .chapter-row-num, .chapter-num-circle, .row-num, .list-num, .time-badge, .min-badge, .read-min, .badge, .chapter-row-meta, .tag, .cat-tag, .hub-tag, .topic-tag, .hero-tag, .pill, .chip, .eyebrow, .cat-eyebrow, .hub-eyebrow, .topic-eyebrow, .kicker ) { background: #000000 !important; color: #FFFFFF !important; border: 1px solid #FFFFFF !important; } html.a11y-scheme-bw .chapter-row { background: #000000 !important; color: #FFFFFF !important; border: 1px solid #FFFFFF !important; } html.a11y-scheme-bw :where(.chapter-row.g-what, .chapter-row.g-deep, .chapter-row.g-help, .chapter-row.g-life, .chapter-row.g-story, .chapter-row.g-treat, .chapter-row.g-stories) { background: #000000 !important; } html.a11y-scheme-bw .contents-group-title, html.a11y-scheme-bw :where( .contents-group-title.g-what, .contents-group-title.g-deep, .contents-group-title.g-help, .contents-group-title.g-life, .contents-group-title.g-story, .contents-group-title.g-treat, .contents-group-title.g-stories ) { color: #FFFFFF !important; background: transparent !important; } html.a11y-scheme-bw :where(.cat-hero-bg, .hub-hero-bg, .topic-hero-bg, .hero-bg) { border-bottom: 2px solid #FFFFFF !important; } html.a11y-scheme-bw .chapter-nav a, html.a11y-scheme-bw .next-chapter-btn, html.a11y-scheme-bw .back-to-hub { background: #000000 !important; color: #FFFFFF !important; border: 1px solid #FFFFFF !important; box-shadow: none !important; } html.a11y-scheme-bw .chapter-nav-label { color: #FFFFFF !important; } /* Упражнения SOS — круги заземления. Filled должен явно отличаться от пустого. */ html.a11y-scheme-bw .ground-circle { background: #000000 !important; border: 2px solid #FFFFFF !important; } html.a11y-scheme-bw .ground-circle.is-filled { background: #FFFFFF !important; box-shadow: none !important; } html.a11y-scheme-bw :where(.call-main, .call-online, .call-sec) :where(strong, .n, .call-main-num) { color: #FFFFFF !important; } /* Privacy / юридические страницы — жёстко захардкоженные inline-стили */ html.a11y-scheme-bw :where(.callout, .requisites, .signature) { background: #000000 !important; color: #FFFFFF !important; border: 1px solid #FFFFFF !important; box-shadow: none !important; } html.a11y-scheme-bw :where(.back, .meta, .lead, .signature, .requisites .lbl, .meta) { color: #FFFFFF !important; } html.a11y-scheme-bw li::marker { color: #FFFFFF !important; } html.a11y-scheme-bw body { background: #000000 !important; } /* Обесцвечиваем большие иллюстрации SVG (Вэл, планета, схемы в статьях), если пользователь их НЕ скрыл. Мелкие UI-иконки (шапка/панель/футер) не трогаем. */ html:where(.a11y-scheme-wb, .a11y-scheme-bw):not(.a11y-hide-images) :where(main, article, .hero-val, .val-scene, .scene, .article-body, .rich) svg, html:where(.a11y-scheme-wb, .a11y-scheme-bw):not(.a11y-hide-images) :where(main, article, .hero-val, .val-scene, .scene, .article-body, .rich) img { filter: grayscale(1) contrast(1.15) !important; } /* Скрыть изображения — картинки, иллюстрации, SVG в контенте. Панель, иконки в шапке, favicon — оставляем видимыми. */ html.a11y-hide-images :where(article, main, .content, .article-body, .rich) img, html.a11y-hide-images :where(article, main, .content, .article-body, .rich) picture, html.a11y-hide-images :where(article, main, .content, .article-body, .rich) svg, html.a11y-hide-images .scene, html.a11y-hide-images .illustration, html.a11y-hide-images figure { display: none !important; } /* Отключить анимации и переходы */ html.a11y-no-animations *, html.a11y-no-animations *::before, html.a11y-no-animations *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } /* Кнопка «очки» в шапке — крупная, белая контрастная плашка, чтобы человек со слабым зрением сразу её увидел. Работает на любой теме сайта. */ #a11yToggle { background: #FFFFFF !important; color: #2B2435 !important; border: 2px solid #2B2435 !important; width: 52px !important; height: 52px !important; border-radius: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important; } #a11yToggle:hover { background: #F5F0FA !important; } #a11yToggle svg { width: 34px !important; height: 34px !important; } /* На чёрной a11y-схеме инвертируем — чёрная плашка с белым stroke и рамкой */ html.a11y-scheme-bw #a11yToggle { background: #000000 !important; color: #FFFFFF !important; border-color: #FFFFFF !important; } /* ─── overlay ───────────────────────────────────────────────── */ .a11y-overlay { position: fixed; inset: 0; background: rgba(43,36,53,0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 998; opacity: 0; pointer-events: none; transition: opacity .18s ease; } .a11y-overlay.open { opacity: 1; pointer-events: auto; } /* ─── панель (мобилка = fullscreen, десктоп = drawer справа) ── */ .a11y-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; z-index: 999; transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); font-family: 'Nunito', system-ui, sans-serif; color: var(--text); } .a11y-panel.open { transform: translateX(0); } /* Десктоп — panel справа, узкий drawer с скруглением */ @media (min-width: 720px) { .a11y-panel { width: 380px; max-width: 380px; border-top-left-radius: 22px; border-bottom-left-radius: 22px; box-shadow: -12px 0 40px rgba(43,36,53,0.16); } } .a11y-head { display: flex; align-items: center; gap: 12px; padding: 22px 20px 18px; border-bottom: 1px solid var(--hairline); flex: none; } .a11y-head .hicon { width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent-deep); } .a11y-head .ttl { font-size: 19px; font-weight: 800; line-height: 1.15; color: var(--text); } .a11y-head .close { margin-left: auto; width: 40px; height: 40px; border-radius: 12px; border: none; cursor: pointer; flex: none; background: var(--card); box-shadow: var(--shadow-sm); color: var(--text); display: flex; align-items: center; justify-content: center; font-family: inherit; } .a11y-body { flex: 1; overflow-y: auto; padding: 22px 20px 10px; display: flex; flex-direction: column; gap: 24px; } .a11y-sec > .lab { display: block; font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text); margin-bottom: 12px; } .a11y-row { display: flex; gap: 11px; } .a11y-opt { flex: 1; min-height: 62px; border: 2px solid transparent; cursor: pointer; font-family: inherit; background: var(--card); color: var(--text); border-radius: 15px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; } .a11y-opt .big { font-weight: 800; line-height: 1; color: var(--text); } .a11y-opt .cap { font-size: 12px; font-weight: 700; color: var(--text); } .a11y-opt.on { background: color-mix(in srgb, var(--accent) 34%, var(--card)); border-color: var(--accent-dark); } .a11y-opt.on .cap { color: var(--accent-deep); } .a11y-opt[data-a11y="font"][data-value="normal"] .big { font-size: 19px; } .a11y-opt[data-a11y="font"][data-value="large"] .big { font-size: 25px; } .a11y-opt[data-a11y="font"][data-value="huge"] .big { font-size: 33px; } .a11y-lines { display: flex; flex-direction: column; width: 24px; } .a11y-lines i { height: 2.5px; border-radius: 2px; background: currentColor; display: block; } .a11y-opt[data-a11y="line"][data-value="normal"] .a11y-lines { gap: 3px; } .a11y-opt[data-a11y="line"][data-value="med"] .a11y-lines { gap: 6px; } .a11y-opt[data-a11y="line"][data-value="big"] .a11y-lines { gap: 9px; } .a11y-schemes { display: flex; gap: 11px; } .a11y-tile { flex: 1; border: 2px solid transparent; border-radius: 15px; cursor: pointer; padding: 0; overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); font-family: inherit; display: flex; flex-direction: column; } .a11y-tile.on { border-color: var(--accent-dark); } .a11y-tile .swatch { height: 56px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 23px; } .a11y-tile .tcap { font-size: 12px; font-weight: 800; line-height: 1.2; padding: 10px 5px; text-align: center; color: var(--text); } /* Превью «Аа» в свотчах — фиксированные цвета образцов схем. !important чтобы ни одна тема сайта их не перебивала. */ .a11y-panel .swatch.sw-normal { background: #FBF7F4 !important; color: #6B5AA0 !important; } .a11y-panel .swatch.sw-wb { background: #FFFFFF !important; color: #000000 !important; box-shadow: inset 0 0 0 1px #E4E4E4; } .a11y-panel .swatch.sw-bw { background: #000000 !important; color: #FFFFFF !important; } .a11y-toggle { display: flex; align-items: center; width: 100%; border: none; cursor: pointer; font-family: inherit; background: var(--card); border-radius: 15px; padding: 16px 16px; box-shadow: var(--shadow-sm); } .a11y-toggle .tlab { font-weight: 800; font-size: 16.5px; color: var(--text); } .a11y-toggle .state { font-size: 12.5px; font-weight: 700; color: var(--text); margin-left: auto; margin-right: 13px; } .tt-track { width: 54px; height: 31px; border-radius: 16px; flex: none; position: relative; background: color-mix(in srgb, var(--text) 20%, transparent); transition: background .18s ease; } .tt-track .knob { position: absolute; top: 3px; left: 3px; width: 25px; height: 25px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.28); transition: left .18s ease; } .a11y-toggle.on .tt-track { background: var(--accent-dark); } .a11y-toggle.on .tt-track .knob { left: 26px; } .a11y-foot { flex: none; padding: 16px 20px 22px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; } .a11y-foot button { width: 100%; min-height: 52px; border-radius: 15px; border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 9px; } .a11y-reset { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); } .a11y-done { background: var(--mint); color: #1F4636; box-shadow: var(--cta-shadow); } /* Скрытие панели идёт через атрибут hidden (display: none) + transform: translateX(100%) на .a11y-panel без .open. Visibility не используем — он ломает вложенный текст если .open по каким-то причинам не проставился. */