/* Версия для слабовидящих (bvi) — ГОСТ Р 52872 / приказ Рособрнадзора № 1493. Подключается напрямую (не через Vite): Классы состояния ставятся на : bv-active, bv-font-1..4, bv-color-bw|wb|bb, bv-img-on|gray|off, bv-letters-0..2 */ /* ---------- Кнопка включения (в top-bar) ---------- */ .bv-enable-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 6px; padding: 4px 12px; font-size: 12.5px; line-height: 1.4; cursor: pointer; white-space: nowrap; } .bv-enable-btn:hover { background: rgba(255, 255, 255, 0.24); } .bv-enable-btn[hidden] { display: none !important; } .bv-enable-btn svg { flex: 0 0 auto; } @media (max-width: 560px) { .bv-enable-btn .bv-btn-text { display: none; } } /* ---------- Плавающая кнопка «Версия для слабовидящих» (язычок слева, как на sportfmba.ru) ---------- */ .bv-fab { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 99980; display: flex; align-items: center; gap: 10px; background: #0b3d91; color: #ffffff; border: 3px solid #ffffff; border-left: none; border-radius: 0 14px 14px 0; padding: 13px 16px 13px 12px; box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4); cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.25; white-space: nowrap; } .bv-fab:hover { background: #0d47a1; } .bv-fab[hidden] { display: none !important; } .bv-fab svg { width: 28px; height: 28px; flex: 0 0 auto; } .bv-fab .bv-fab-text { display: inline-block; max-width: 110px; white-space: normal; text-align: left; } @media (max-width: 768px) { .bv-fab .bv-fab-text { display: none; } .bv-fab { padding: 12px 10px; } } @media print { .bv-fab, .bv-enable-btn, .bv-panel { display: none !important; } } /* ---------- Панель настроек (только в режиме bvi) ---------- */ .bv-panel { position: sticky; top: 0; z-index: 99990; background: #000; color: #fff; border-bottom: 2px solid #fff; font-size: 15px; line-height: 1.4; } .bv-panel[hidden] { display: none; } .bv-panel-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 9px 16px; } .bv-panel-title { font-weight: 700; } .bv-group { display: inline-flex; align-items: center; gap: 6px; } .bv-label { opacity: 0.85; margin-right: 2px; } .bv-panel button { background: #000; color: #fff; border: 1px solid #fff; border-radius: 4px; padding: 3px 9px; font: inherit; cursor: pointer; } .bv-panel button:hover { background: #2a2a2a; } .bv-panel button.bv-current { background: #fff; color: #000; font-weight: 700; } .bv-panel .bv-scheme { width: 30px; height: 26px; padding: 0; text-align: center; font-weight: 700; } .bv-panel .bv-scheme[data-bv-color="bw"] { background: #fff; color: #000; } .bv-panel .bv-scheme[data-bv-color="wb"] { background: #000; color: #fff; } .bv-panel .bv-scheme[data-bv-color="bb"] { background: #9dd1ff; color: #005db4; } .bv-panel .bv-scheme.bv-current { outline: 3px solid #ffd400; outline-offset: 1px; } .bv-off { margin-left: auto; font-weight: 700; } .bv-off:hover { background: #fff !important; color: #000 !important; } /* ---------- Цветовые схемы ---------- */ html.bv-active { --bv-bg: #ffffff; --bv-fg: #000000; --bv-link: #0000cc; } html.bv-color-wb { --bv-bg: #000000; --bv-fg: #ffffff; --bv-link: #ffff00; } html.bv-color-bb { --bv-bg: #9dd1ff; --bv-fg: #005db4; --bv-link: #004080; } html.bv-active, html.bv-active body { background: var(--bv-bg) !important; color: var(--bv-fg) !important; } html.bv-active body * { background-color: var(--bv-bg) !important; background-image: none !important; color: var(--bv-fg) !important; border-color: var(--bv-fg) !important; box-shadow: none !important; text-shadow: none !important; transition: none !important; } html.bv-active a, html.bv-active a * { color: var(--bv-link) !important; text-decoration: underline !important; } html.bv-active a:hover { text-decoration: none !important; } /* SVG-иконки наследуют цвет текста */ html.bv-active svg { color: inherit !important; fill: currentColor !important; } html.bv-active svg [fill]:not([fill="none"]):not([fill="currentColor"]) { fill: currentColor !important; } html.bv-active svg [stroke]:not([stroke="none"]) { stroke: currentColor !important; } /* Панель всегда чёрным по белому — максимальный контраст управления */ html.bv-active .bv-panel, html.bv-active .bv-panel * { background-color: #000 !important; color: #fff !important; border-color: #fff !important; text-decoration: none !important; } html.bv-active .bv-panel button:hover { background-color: #2a2a2a !important; } html.bv-active .bv-panel button.bv-current { background-color: #fff !important; color: #000 !important; } /* ---------- Шрифт (масштаб) ---------- */ html.bv-active { font-size: 112.5%; } html.bv-font-2 { zoom: 1.12; } html.bv-font-3 { zoom: 1.26; } html.bv-font-4 { zoom: 1.42; } html.bv-active body { line-height: 1.55 !important; } /* ---------- Изображения ---------- */ html.bv-img-off img, html.bv-img-off .logo img, html.bv-img-off iframe { display: none !important; } html.bv-img-gray img { filter: grayscale(1) !important; } /* ---------- Интервалы ---------- */ html.bv-letters-1 body * { letter-spacing: 1.5px !important; } html.bv-letters-2 body * { letter-spacing: 3px !important; } html.bv-line-1 body * { line-height: 1.75 !important; } html.bv-line-2 body * { line-height: 2.05 !important; } /* ---------- Спецэлементы режима ---------- */ .bv-skip-link { position: absolute; left: -9999px; } .bv-skip-link:focus { left: 8px; top: 8px; z-index: 99999; background: #000; color: #fff; padding: 8px 14px; border: 2px solid #fff; }