/* ============================================================================= accessible.css — Версия для слабовидящих ГОСТ Р 52872-2019, Приказ Минсвязи №483, WCAG 2.1 AAA Управляется через data-vis-* атрибуты на . Файл подключается в header.php после ShowHead() — перекрывает все. ============================================================================= */ /* ============================================================ SKIP NAVIGATION ============================================================ */ .skip-nav { position: absolute; top: -200px; left: 8px; z-index: 10000; padding: 10px 18px; background: #000; color: #fff; font-size: 1rem; font-weight: 700; text-decoration: none; border-radius: 0 0 4px 4px; transition: top .15s; white-space: nowrap; } .skip-nav:focus { top: 0; } /* ============================================================ ПАНЕЛЬ СПЕЦИАЛЬНЫХ ВОЗМОЖНОСТЕЙ ============================================================ */ #vis-panel { display: none; position: sticky; top: 0; left: 0; right: 0; z-index: 9500; background: #1a1a2e; color: #e8e8f0; border-bottom: 2px solid #3a3a6e; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); } :root[data-vis-active="true"] #vis-panel { display: block; } .vis-panel-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 7px 16px; max-width: 1400px; margin: 0 auto; } .vis-panel-title { font-size: 12px; font-weight: 600; color: #9999bb; white-space: nowrap; margin-right: 4px; flex-shrink: 0; } .vis-group { display: flex; align-items: center; gap: 3px; padding-left: 10px; border-left: 1px solid #3a3a5e; flex-shrink: 0; } .vis-group-label { font-size: 11px; color: #8888aa; white-space: nowrap; margin-right: 2px; } /* Базовая кнопка панели */ .vis-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 30px; padding: 3px 9px; font-size: 13px; font-family: inherit; line-height: 1; border: 1px solid #4a4a7a; border-radius: 3px; background: #252540; color: #dde; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; } .vis-btn:hover { background: #353560; border-color: #6a6ab4; } .vis-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .vis-btn[aria-pressed="true"], .vis-btn.vis-active { background: #4a4ab4; border-color: #7a7af4; color: #fff; font-weight: 700; } /* Кнопки-свотчи цветовых схем */ .vis-btn-scheme-none { background: #e0e0e0; color: #222; border-color: #aaa; } .vis-btn-scheme-bw { background: #000; color: #fff; border-color: #777; } .vis-btn-scheme-wb { background: #fff; color: #000; border-color: #999; } .vis-btn-scheme-by { background: #000; color: #ffff00; border-color: #cc0; } .vis-btn-scheme-yb { background: #003366; color: #ffff00; border-color: #cc0; } .vis-btn-scheme-bw[aria-pressed="true"], .vis-btn-scheme-wb[aria-pressed="true"], .vis-btn-scheme-by[aria-pressed="true"], .vis-btn-scheme-yb[aria-pressed="true"], .vis-btn-scheme-none[aria-pressed="true"] { outline: 2px solid #ff9900; outline-offset: 2px; font-weight: 700; } /* Кнопка сброса */ .vis-btn-reset { margin-left: auto; background: #5a2020; border-color: #ff5555; color: #fcc; font-size: 12px; } .vis-btn-reset:hover { background: #7a3030; } /* ============================================================ КНОПКА-АКТИВАТОР «Слабовидящим» в шапке/подвале ============================================================ */ .vis-activate-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted, #888); text-decoration: none; padding: 4px 7px; border: 1px solid transparent; border-radius: 3px; white-space: nowrap; cursor: pointer; background: transparent; font-family: inherit; transition: color .15s, border-color .15s; line-height: 1.2; } .vis-activate-link:hover, .vis-activate-link:focus-visible { color: var(--link-color, #0066cc); border-color: currentColor; text-decoration: none; } /* Скрываем когда панель уже активна (пользователь уже там) */ :root[data-vis-active="true"] .vis-activate-link { display: none; } /* ============================================================ ДРОПДАУН НАСТРОЕК ОТОБРАЖЕНИЯ (шестерёнка в шапке) ============================================================ */ .settings-dd-wrapper { position: relative; display: flex; align-items: center; flex-shrink: 0; } .settings-dd-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-muted, #888); cursor: pointer; transition: color .15s, border-color .15s, background .15s; flex-shrink: 0; } .settings-dd-btn:hover, .settings-dd-btn[aria-expanded="true"] { color: var(--link-color, #1a6bc9); border-color: currentColor; background: var(--hover-bg, rgba(0, 102, 204, .07)); } .settings-dd-btn:focus-visible { outline: 2px solid var(--link-color, #1a6bc9); outline-offset: 2px; } .settings-dd-menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 2000; min-width: 215px; background: var(--card-bg, #fff); border: 1px solid var(--border-color, #dde); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .14); padding: 5px 0; } .settings-dd-menu.open { display: block; } .settings-dd-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 15px; font-size: 13.5px; font-family: inherit; color: var(--text-main, #333); background: transparent; border: none; text-decoration: none; cursor: pointer; text-align: left; line-height: 1.3; transition: background .1s; white-space: nowrap; box-sizing: border-box; } .settings-dd-item:hover { background: rgba(128, 128, 128, .12); color: var(--text-main, #333); text-decoration: none; } .settings-dd-item:focus-visible { outline: 2px solid var(--link-color, #1a6bc9); outline-offset: -2px; } .settings-dd-item.active { font-weight: 600; color: var(--link-color, #1a6bc9); } /* Пункт «Версия для слабовидящих» — чуть выделен */ .settings-dd-vis { color: var(--link-color, #1a6bc9); } .settings-dd-vis:hover { background: rgba(26, 107, 201, .08); } .settings-dd-divider { height: 1px; background: var(--border-color, #e5e7eb); margin: 4px 0; } .settings-dd-label { display: block; padding: 4px 15px 3px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #999); pointer-events: none; } /* Защита дропдауна от цветовых схем версии для слабовидящих */ :root[data-vis-scheme] #settingsDdMenu { background: var(--card-bg, #fff) !important; color: var(--text-main, #333) !important; border-color: var(--border-color, #dde) !important; } :root[data-vis-scheme] #settingsDdMenu .settings-dd-item { background: transparent !important; color: var(--text-main, #333) !important; } :root[data-vis-scheme] #settingsDdMenu .settings-dd-item:hover { background: rgba(128, 128, 128, .12) !important; } :root[data-vis-scheme] #settingsDdMenu .settings-dd-vis { color: var(--link-color, #1a6bc9) !important; } :root[data-vis-scheme] #settingsDdMenu .settings-dd-label { color: var(--text-muted, #999) !important; background: transparent !important; } :root[data-vis-scheme] #settingsDdMenu .settings-dd-divider { background: var(--border-color, #e5e7eb) !important; } :root[data-vis-scheme] #settingsDdMenu .active { color: var(--link-color, #1a6bc9) !important; } /* ============================================================ РАЗМЕР ШРИФТА (А / А+ / А++) ГОСТ Р 52872-2019 §5.3: А++ минимум 18pt (≈24px) ============================================================ */ :root[data-vis-fontsize="large"] { font-size: 20px; } :root[data-vis-fontsize="xlarge"] { font-size: 24px; } :root[data-vis-fontsize="large"] body, :root[data-vis-fontsize="xlarge"] body { font-size: 1em; } /* Предотвращаем обрезку текста при масштабировании */ :root[data-vis-fontsize="large"] p, :root[data-vis-fontsize="xlarge"] p, :root[data-vis-fontsize="large"] li, :root[data-vis-fontsize="xlarge"] li, :root[data-vis-fontsize="large"] td, :root[data-vis-fontsize="xlarge"] td, :root[data-vis-fontsize="large"] th, :root[data-vis-fontsize="xlarge"] th, :root[data-vis-fontsize="large"] h1, :root[data-vis-fontsize="xlarge"] h1, :root[data-vis-fontsize="large"] h2, :root[data-vis-fontsize="xlarge"] h2, :root[data-vis-fontsize="large"] h3, :root[data-vis-fontsize="xlarge"] h3, :root[data-vis-fontsize="large"] span, :root[data-vis-fontsize="xlarge"] span { overflow-wrap: break-word; word-break: break-word; } /* Убираем overflow: hidden на контейнерах, которые режут увеличенный текст */ :root[data-vis-fontsize="large"] .menu-container, :root[data-vis-fontsize="xlarge"] .menu-container, :root[data-vis-fontsize="large"] .fac-header-wrapper, :root[data-vis-fontsize="xlarge"] .fac-header-wrapper, :root[data-vis-fontsize="large"] .dept-header-wrapper, :root[data-vis-fontsize="xlarge"] .dept-header-wrapper { overflow: visible; } /* ============================================================ МЕЖБУКВЕННЫЙ ИНТЕРВАЛ ============================================================ */ :root[data-vis-spacing="medium"] body { letter-spacing: .05em; } :root[data-vis-spacing="wide"] body { letter-spacing: .12em; } /* ============================================================ МЕЖСТРОЧНЫЙ ИНТЕРВАЛ (WCAG 1.4.12: ≥1.5) ============================================================ */ :root[data-vis-lineheight="large"] body { line-height: 2.0; } :root[data-vis-lineheight="xlarge"] body { line-height: 2.5; } /* ============================================================ ШРИФТ ============================================================ */ :root[data-vis-font="sans"] body, :root[data-vis-font="sans"] * { font-family: Arial, Helvetica, sans-serif !important; } :root[data-vis-font="serif"] body, :root[data-vis-font="serif"] * { font-family: 'Times New Roman', Times, serif !important; } /* ============================================================ СКРЫТЬ ИЗОБРАЖЕНИЯ ============================================================ */ :root[data-vis-images="hide"] img { visibility: hidden !important; } :root[data-vis-images="hide"] *, :root[data-vis-images="hide"] *::before, :root[data-vis-images="hide"] *::after { background-image: none !important; } /* ============================================================ ФОКУСНЫЕ ИНДИКАТОРЫ (WCAG 2.4.7, 2.4.11) ============================================================ */ :root[data-vis-active="true"] *:focus { outline: 3px solid currentColor !important; outline-offset: 3px !important; } /* Убираем outline: none / -webkit-tap-highlight: none */ :root[data-vis-active="true"] * { -webkit-tap-highlight-color: rgba(0, 0, 0, .3) !important; } /* ============================================================ ЦВЕТОВЫЕ СХЕМЫ Контрасты ≥ 7:1 (WCAG 2.1 AAA). Панель (#vis-panel) перекрывает глобальные правила за счёт более высокой специфичности (#vis-panel .vis-btn vs [attr] *) ============================================================ */ /* --- scheme bw: чёрный фон / белый текст / жёлтые ссылки --- */ :root[data-vis-scheme="bw"] * { background-color: #000 !important; color: #fff !important; border-color: #555 !important; box-shadow: none !important; text-shadow: none !important; } :root[data-vis-scheme="bw"] a, :root[data-vis-scheme="bw"] a * { color: #ffff00 !important; } :root[data-vis-scheme="bw"] a:hover, :root[data-vis-scheme="bw"] a:focus { color: #ffe066 !important; } :root[data-vis-scheme="bw"] button, :root[data-vis-scheme="bw"] input, :root[data-vis-scheme="bw"] select, :root[data-vis-scheme="bw"] textarea { background: #111 !important; color: #fff !important; border-color: #888 !important; } :root[data-vis-scheme="bw"] ::placeholder { color: #aaa !important; } /* --- scheme wb: белый фон / чёрный текст / синие ссылки --- */ :root[data-vis-scheme="wb"] * { background-color: #fff !important; color: #000 !important; border-color: #bbb !important; box-shadow: none !important; text-shadow: none !important; } :root[data-vis-scheme="wb"] a, :root[data-vis-scheme="wb"] a * { color: #0000cd !important; } :root[data-vis-scheme="wb"] a:hover, :root[data-vis-scheme="wb"] a:focus { color: #000099 !important; text-decoration: underline !important; } :root[data-vis-scheme="wb"] button, :root[data-vis-scheme="wb"] input, :root[data-vis-scheme="wb"] select, :root[data-vis-scheme="wb"] textarea { background: #f5f5f5 !important; color: #000 !important; border-color: #666 !important; } :root[data-vis-scheme="wb"] ::placeholder { color: #666 !important; } /* --- scheme by: чёрный фон / жёлтый текст / голубые ссылки --- */ :root[data-vis-scheme="by"] * { background-color: #000 !important; color: #ffff00 !important; border-color: #886600 !important; box-shadow: none !important; text-shadow: none !important; } :root[data-vis-scheme="by"] a, :root[data-vis-scheme="by"] a * { color: #00ffff !important; } :root[data-vis-scheme="by"] a:hover, :root[data-vis-scheme="by"] a:focus { color: #88ffff !important; } :root[data-vis-scheme="by"] button, :root[data-vis-scheme="by"] input, :root[data-vis-scheme="by"] select, :root[data-vis-scheme="by"] textarea { background: #111 !important; color: #ffff00 !important; border-color: #886600 !important; } :root[data-vis-scheme="by"] ::placeholder { color: #cc9900 !important; } /* --- scheme yb: синий фон / жёлтый текст / голубые ссылки --- */ :root[data-vis-scheme="yb"] * { background-color: #003366 !important; color: #ffff00 !important; border-color: #005599 !important; box-shadow: none !important; text-shadow: none !important; } :root[data-vis-scheme="yb"] a, :root[data-vis-scheme="yb"] a * { color: #00ffff !important; } :root[data-vis-scheme="yb"] a:hover, :root[data-vis-scheme="yb"] a:focus { color: #88ffff !important; } :root[data-vis-scheme="yb"] button, :root[data-vis-scheme="yb"] input, :root[data-vis-scheme="yb"] select, :root[data-vis-scheme="yb"] textarea { background: #002255 !important; color: #ffff00 !important; border-color: #005599 !important; } :root[data-vis-scheme="yb"] ::placeholder { color: #aaa200 !important; } /* ============================================================ ЗАЩИТА ПАНЕЛИ ОТ ЦВЕТОВЫХ СХЕМ #vis-panel и его дочерние элементы имеют специфичность ID, которая перекрывает атрибутные [data-vis-scheme="*"] правила даже при !important (в группе !important побеждает высшая специфичность). ============================================================ */ :root[data-vis-scheme] #vis-panel { background: #1a1a2e !important; border-bottom-color: #3a3a6e !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .5) !important; } :root[data-vis-scheme] #vis-panel .vis-panel-title { color: #9999bb !important; background: transparent !important; } :root[data-vis-scheme] #vis-panel .vis-group { border-left-color: #3a3a5e !important; } :root[data-vis-scheme] #vis-panel .vis-group-label { color: #8888aa !important; background: transparent !important; } :root[data-vis-scheme] #vis-panel .vis-btn { background: #252540 !important; color: #dde !important; border-color: #4a4a7a !important; text-shadow: none !important; box-shadow: none !important; } :root[data-vis-scheme] #vis-panel .vis-btn:hover { background: #353560 !important; border-color: #6a6ab4 !important; } :root[data-vis-scheme] #vis-panel .vis-btn[aria-pressed="true"], :root[data-vis-scheme] #vis-panel .vis-btn.vis-active { background: #4a4ab4 !important; border-color: #7a7af4 !important; color: #fff !important; } /* Свотчи сохраняют свои цвета-превью */ :root[data-vis-scheme] #vis-panel .vis-btn-scheme-none { background: #e0e0e0 !important; color: #222 !important; border-color: #aaa !important; } :root[data-vis-scheme] #vis-panel .vis-btn-scheme-bw { background: #000 !important; color: #fff !important; border-color: #777 !important; } :root[data-vis-scheme] #vis-panel .vis-btn-scheme-wb { background: #fff !important; color: #000 !important; border-color: #999 !important; } :root[data-vis-scheme] #vis-panel .vis-btn-scheme-by { background: #000 !important; color: #ffff00 !important; border-color: #cc0 !important; } :root[data-vis-scheme] #vis-panel .vis-btn-scheme-yb { background: #003366 !important; color: #ffff00 !important; border-color: #cc0 !important; } :root[data-vis-scheme] #vis-panel .vis-btn-reset { background: #5a2020 !important; border-color: #ff5555 !important; color: #fcc !important; } /* ============================================================ @MEDIA PREFERS-CONTRAST (WCAG 1.4.11, ГОСТ §5.9) Автоматически активирует схему wb при системных предпочтениях (синхронизируется с JS-модулем) ============================================================ */ @media (prefers-contrast: more) { :root:not([data-vis-scheme]) * { background-color: #fff !important; color: #000 !important; } :root:not([data-vis-scheme]) a { color: #0000cd !important; } :root:not([data-vis-scheme]) *:focus { outline: 3px solid #000 !important; outline-offset: 3px !important; } } /* ============================================================ МОБИЛЬНАЯ АДАПТАЦИЯ ПАНЕЛИ ============================================================ */ @media (max-width: 767px) { .vis-panel-inner { padding: 5px 10px; gap: 3px 6px; } .vis-panel-title { display: none; } .vis-group-label { display: none; } .vis-btn { min-width: 28px; min-height: 26px; padding: 2px 6px; font-size: 12px; } .vis-btn-reset { font-size: 11px; padding: 2px 8px; } } /* ============================================================ ПУНКТ «НАСТРОЙКИ» В МЕНЮ Скрыт в горизонтальном десктопном меню главной шапки. Показывается в мобильном бургере и в дропдаунах факультетов/подразделений. ============================================================ */ /* Шестерёнку-дропдаун скрываем на мобильных */ @media (max-width: 768px) { .settings-dd-wrapper { display: none !important; } } /* По умолчанию пункт «Настройки» скрыт (не попадает в горизонтальный nav) */ .settings-menu-item { display: none !important; } /* В мобильном бургере главного сайта */ @media (max-width: 768px) { .menu-container .settings-menu-item { display: block !important; border-top: 2px solid var(--border-color, #e0e0e0); margin-top: 4px; } } /* В выпадающих дропдаунах факультетов / подразделений / кафедр */ .faculty-main-menu-wrapper .settings-menu-item, .dept-main-menu-dropdown .settings-menu-item { display: block !important; border-top: 1px solid var(--border-color, #e0e0e0); margin-top: 4px; } /* Кнопка «Версия для слабовидящих» внутри submenu — сброс button-стилей */ .settings-vis-btn { appearance: none; -webkit-appearance: none; border: none !important; display: flex; align-items: center; gap: 8px; font-family: inherit; text-align: left; line-height: inherit; } /* Метка-заголовок группы «Цветовая тема» */ .settings-group-label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--text-muted, #888) !important; cursor: default !important; pointer-events: none; opacity: 1; } .settings-group-head .menu-link-wrapper { pointer-events: none; } /* Пункт «Настройки» — иконка-шестерёнка рядом с текстом */ .settings-menu-item > .menu-link-wrapper > .menu-link { display: flex; align-items: center; gap: 7px; }