/** * КБ «Дисплей» — версия для слабовидящих (СТБ 2304-2013). * * Подключается на всех страницах. Кнопка «Слабовидящим» (JS) вешает на * класс .a11y-mode — по нему включаются правила ниже: контрастная схема, * шрифт без засечек, увеличение, интервалы, отключение картинок. * Модификаторы: схема .scheme-bw/.scheme-wb/.scheme-by; размер .fs-1/.fs-2/.fs-3; * интервал .a11y-space; отключение картинок .hide-img. */ /* ── Панель управления режимом (в шапке) ── */ .a11y-bar{background:var(--brand);color:#fff;border-bottom:1px solid rgba(255,255,255,.15)} .a11y-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 28px;max-width:var(--container);margin:0 auto;flex-wrap:wrap} .a11y-left{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;font-size:13px} .a11y-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .a11y-controls button{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:6px;padding:5px 11px;font-size:13px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px;font-family:inherit} .a11y-controls button:hover{background:rgba(255,255,255,.25)} .a11y-controls button:focus-visible{outline:3px solid #FFD400;outline-offset:2px} .a11y-controls .sep{width:1px;height:20px;background:rgba(255,255,255,.25);margin:0 4px} @media(max-width:720px){ .a11y-left{display:none} } /* панель скрыта, показывается при включении режима */ .a11y-bar{display:none;background:var(--navy);color:#fff;border-bottom:2px solid var(--sky)} body.a11y-mode .a11y-bar{display:block} /* ── Схема по умолчанию — чёрным по белому (СТБ 2304-2013): применяется сразу при включении режима, пока пользователь не выбрал другую. Шрифт без засечек. ── */ body.a11y-mode{--a11y-bg:#fff;--a11y-fg:#000;--a11y-accent:#000;background:var(--a11y-bg)!important;color:var(--a11y-fg)!important;font-family:Arial,Helvetica,'PT Sans',sans-serif!important} body.a11y-mode.scheme-bw{--a11y-bg:#fff;--a11y-fg:#000;--a11y-accent:#000} body.a11y-mode.scheme-wb{--a11y-bg:#000;--a11y-fg:#fff;--a11y-accent:#fff} body.a11y-mode.scheme-by{--a11y-bg:#9DD1FF;--a11y-fg:#063462;--a11y-accent:#063462} /* межбуквенный / междусловный / междустрочный интервал (кнопка «Интервал») */ body.a11y-mode.a11y-space{letter-spacing:.12em;word-spacing:.16em} body.a11y-mode.a11y-space p,body.a11y-mode.a11y-space li,body.a11y-mode.a11y-space h1,body.a11y-mode.a11y-space h2,body.a11y-mode.a11y-space h3,body.a11y-mode.a11y-space h4,body.a11y-mode.a11y-space .prod-row-title{line-height:1.8!important} /* заметный фокус клавиатуры */ body.a11y-mode a:focus-visible,body.a11y-mode button:focus-visible,body.a11y-mode input:focus-visible,body.a11y-mode select:focus-visible,body.a11y-mode [tabindex]:focus-visible{outline:3px solid var(--a11y-accent)!important;outline-offset:2px!important} body.a11y-mode *{background:transparent!important;color:var(--a11y-fg)!important;border-color:var(--a11y-fg)!important;box-shadow:none!important;text-shadow:none!important;border-radius:0!important} body.a11y-mode .a11y-bar,body.a11y-mode .a11y-bar *{background:var(--a11y-fg)!important;color:var(--a11y-bg)!important;border-color:var(--a11y-fg)!important} /* всплывающие элементы (выпадающее меню, список комбобокса, плавающая кнопка) должны оставаться НЕпрозрачными — правило body.a11y-mode *{background:transparent} иначе делает их насквозь прозрачными и контент страницы просвечивает */ body.a11y-mode .site-nav .sub-menu, body.a11y-mode .dkb-combo-list, body.a11y-mode .cf-float-apply{background:var(--a11y-bg)!important} body.a11y-mode a,body.a11y-mode .eyebrow,body.a11y-mode .scr-badge,body.a11y-mode .card-meta,body.a11y-mode .post-date,body.a11y-mode .svc-num{color:var(--a11y-accent)!important;text-decoration:underline} body.a11y-mode .btn,body.a11y-mode .nav-cta{border:2px solid var(--a11y-fg)!important;text-decoration:none!important} body.a11y-mode .site-header{position:static} /* шапка непрозрачна (иначе текст просвечивает и сливается). Главное меню закрепляется сверху; строка-контакты идёт в потоке, чтобы два липких элемента не наезжали друг на друга при крупном шрифте. */ body.a11y-mode .topbar{position:static!important;background:var(--a11y-bg)!important} body.a11y-mode .site-nav{position:sticky!important;top:0!important;z-index:60!important;background:var(--a11y-bg)!important} body.a11y-mode .site-header{background:var(--a11y-bg)!important} body.a11y-mode .news-years,body.a11y-mode .pd-media{position:static!important} /* декоративное медиа hero убираем, hero — в одну колонку */ body.a11y-mode .hero-visual{display:none!important} body.a11y-mode .hero .wrap{display:block} body.a11y-mode .hero-grid,body.a11y-mode .hero-glow,body.a11y-mode .post-img .ph,body.a11y-mode .screen-scan,body.a11y-mode .scr-bars,body.a11y-mode .float-chip,body.a11y-mode .logo span{display:none!important} body.a11y-mode .panel-display,body.a11y-mode .screen{border:2px solid var(--a11y-fg)!important} body.a11y-mode.hide-img .card-ico,body.a11y-mode.hide-img .panel-display,body.a11y-mode.hide-img .post-img,body.a11y-mode.hide-img img{display:none!important} body.a11y-mode .logo{border:2px solid var(--a11y-fg)!important} body.a11y-mode.fs-1{font-size:18px} body.a11y-mode.fs-2{font-size:18px} body.a11y-mode.fs-3{font-size:18px} /* Реальное увеличение контента. font-size на body почти вся типографика темы (в px) не наследует — масштабируем основной контент целиком, любые единицы. */ body.a11y-mode.fs-1 #main{zoom:1} body.a11y-mode.fs-2 #main{zoom:1.5} body.a11y-mode.fs-3 #main{zoom:2} body.a11y-mode.fs-1 .hero h1,body.a11y-mode.fs-2 .hero h1,body.a11y-mode.fs-3 .hero h1{font-size:2em} body.a11y-mode.fs-1 .sec-head h2,body.a11y-mode.fs-2 .sec-head h2,body.a11y-mode.fs-3 .sec-head h2{font-size:1.6em} /* прочие декоративные слои и отключение картинок в списках */ body.a11y-mode .page-hero::before,body.a11y-mode .section::before, body.a11y-mode .pcb{display:none!important} body.a11y-mode.hide-img .subcat-ico{display:none} body.a11y-mode.hide-img .prod-row-img{display:none!important}