/* ========================================================================== ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ (BVI) Обязательный режим для официального сайта образовательной организации. Включается атрибутом data-bvi="on" на , настройки хранятся в localStorage (см. assets/js/a11y.js). Реализовано переопределением семантических токенов из tokens.css — поэтому режим автоматически распространяется на все компоненты, ничего дублировать не нужно. ========================================================================== */ /* -------------------------------------------------------------------------- Панель управления -------------------------------------------------------------------------- */ .bvi-panel { display: none; background: #1a1a1a; color: #fff; border-bottom: 2px solid #fff; } html[data-bvi="on"] .bvi-panel { display: block; } .bvi-panel__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); padding-block: var(--space-3); } .bvi-group { display: flex; align-items: center; gap: var(--space-2); } .bvi-group__label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; opacity: .75; } .bvi-btn { min-width: 34px; padding: 6px 10px; font-family: var(--font-heading); font-weight: 700; font-size: 13px; line-height: 1.2; color: #fff; background: transparent; border: 2px solid #fff; cursor: pointer; } .bvi-btn:hover { background: #fff; color: #1a1a1a; } .bvi-btn[aria-pressed="true"] { background: #fff; color: #1a1a1a; } .bvi-btn--off { margin-left: auto; } /* Кружки образцов цветовых схем */ .bvi-swatch { width: 30px; height: 30px; padding: 0; border: 2px solid #fff; cursor: pointer; font-family: var(--font-heading); font-weight: 800; font-size: 13px; } .bvi-swatch[aria-pressed="true"] { outline: 3px solid var(--brand-teal); outline-offset: 2px; } .bvi-swatch--white { background: #fff; color: #000; } .bvi-swatch--black { background: #000; color: #fff; } .bvi-swatch--blue { background: #9dd1ff; color: #063462; } .bvi-swatch--brown { background: #f7f3d6; color: #4d4b43; } .bvi-swatch--green { background: #3b2716; color: #a9e44d; } /* -------------------------------------------------------------------------- Общие правила режима -------------------------------------------------------------------------- */ html[data-bvi="on"] body { font-family: Georgia, "Times New Roman", serif; line-height: 1.7; } html[data-bvi="on"] * { font-family: inherit !important; letter-spacing: normal; border-radius: 0 !important; box-shadow: none !important; text-transform: none !important; transition: none !important; } html[data-bvi="on"] h1, html[data-bvi="on"] h2, html[data-bvi="on"] h3, html[data-bvi="on"] h4 { line-height: 1.25; letter-spacing: normal; margin-left: 0; } /* Шрифт без засечек по выбору пользователя */ html[data-bvi="on"][data-bvi-font="sans"] body { font-family: Arial, Verdana, sans-serif; } /* Фоновые изображения и декор не нужны */ html[data-bvi="on"] .media, html[data-bvi="on"] figure { border-width: 1px; } /* Все цветные плашки становятся плоскими по выбранной схеме */ html[data-bvi="on"] .section--brand, html[data-bvi="on"] .section--accent, html[data-bvi="on"] .sveden-nav, html[data-bvi="on"] .bvi-flat { background: var(--color-bg) !important; color: var(--color-text) !important; border-top: 2px solid var(--color-text); border-bottom: 2px solid var(--color-text); } html[data-bvi="on"] .btn { background: transparent !important; color: var(--color-text) !important; border: 2px solid var(--color-text) !important; text-decoration: none; } html[data-bvi="on"] .btn:hover { background: var(--color-text) !important; color: var(--color-bg) !important; } html[data-bvi="on"] a { text-decoration: underline; color: var(--color-text); } html[data-bvi="on"] a:hover { text-decoration: none; } html[data-bvi="on"] .step { border-left-color: var(--color-text); } html[data-bvi="on"] .stat__num, html[data-bvi="on"] .kicker, html[data-bvi="on"] .text-accent, html[data-bvi="on"] .svcard__num, html[data-bvi="on"] .hero__title em { color: var(--color-text) !important; } html[data-bvi="on"] .brand__dot { color: var(--color-text); } /* -------------------------------------------------------------------------- Цветовые схемы -------------------------------------------------------------------------- */ html[data-bvi="on"][data-bvi-scheme="white"] { --color-bg: #ffffff; --color-surface: #ffffff; --color-text: #000000; --color-text-muted: #000000; --color-text-faint: #000000; --color-divider: #000000; --color-hairline: #000000; --color-accent: #000000; --color-accent-ink: #000000; --color-accent-bg: #ffffff; --color-brand: #ffffff; --color-brand-bg: #ffffff; --color-on-dark: #000000; --color-on-dark-muted: #000000; } html[data-bvi="on"][data-bvi-scheme="black"] { --color-bg: #000000; --color-surface: #000000; --color-text: #ffffff; --color-text-muted: #ffffff; --color-text-faint: #ffffff; --color-divider: #ffffff; --color-hairline: #ffffff; --color-accent: #ffffff; --color-accent-ink: #ffffff; --color-accent-bg: #000000; --color-brand: #000000; --color-brand-bg: #000000; --color-on-dark: #ffffff; --color-on-dark-muted: #ffffff; } html[data-bvi="on"][data-bvi-scheme="blue"] { --color-bg: #9dd1ff; --color-surface: #9dd1ff; --color-text: #063462; --color-text-muted: #063462; --color-text-faint: #063462; --color-divider: #063462; --color-hairline: #063462; --color-accent: #063462; --color-accent-ink: #063462; --color-accent-bg: #9dd1ff; --color-brand: #9dd1ff; --color-brand-bg: #9dd1ff; --color-on-dark: #063462; --color-on-dark-muted: #063462; } html[data-bvi="on"][data-bvi-scheme="brown"] { --color-bg: #f7f3d6; --color-surface: #f7f3d6; --color-text: #4d4b43; --color-text-muted: #4d4b43; --color-text-faint: #4d4b43; --color-divider: #4d4b43; --color-hairline: #4d4b43; --color-accent: #4d4b43; --color-accent-ink: #4d4b43; --color-accent-bg: #f7f3d6; --color-brand: #f7f3d6; --color-brand-bg: #f7f3d6; --color-on-dark: #4d4b43; --color-on-dark-muted: #4d4b43; } html[data-bvi="on"][data-bvi-scheme="green"] { --color-bg: #3b2716; --color-surface: #3b2716; --color-text: #a9e44d; --color-text-muted: #a9e44d; --color-text-faint: #a9e44d; --color-divider: #a9e44d; --color-hairline: #a9e44d; --color-accent: #a9e44d; --color-accent-ink: #a9e44d; --color-accent-bg: #3b2716; --color-brand: #3b2716; --color-brand-bg: #3b2716; --color-on-dark: #a9e44d; --color-on-dark-muted: #a9e44d; } /* -------------------------------------------------------------------------- Размер шрифта — переопределяем всю типографическую шкалу -------------------------------------------------------------------------- */ html[data-bvi="on"] { --fs-h1: 34px; --fs-h1-sub: 32px; --fs-h2: 28px; --fs-h3: 22px; --fs-lead: 20px; --fs-base: 20px; --fs-sm: 20px; --fs-xs: 18px; --fs-xxs: 18px; } html[data-bvi="on"][data-bvi-size="2"] { --fs-h1: 40px; --fs-h1-sub: 38px; --fs-h2: 32px; --fs-h3: 26px; --fs-lead: 24px; --fs-base: 24px; --fs-sm: 24px; --fs-xs: 22px; --fs-xxs: 22px; } html[data-bvi="on"][data-bvi-size="3"] { --fs-h1: 48px; --fs-h1-sub: 46px; --fs-h2: 38px; --fs-h3: 30px; --fs-lead: 28px; --fs-base: 28px; --fs-sm: 28px; --fs-xs: 26px; --fs-xxs: 26px; } html[data-bvi="on"] body, html[data-bvi="on"] p, html[data-bvi="on"] li, html[data-bvi="on"] td, html[data-bvi="on"] th, html[data-bvi="on"] label, html[data-bvi="on"] .input, html[data-bvi="on"] .textarea, html[data-bvi="on"] .btn, html[data-bvi="on"] .filter, html[data-bvi="on"] .nav__link, html[data-bvi="on"] .lead { font-size: var(--fs-base) !important; } html[data-bvi="on"] .kicker, html[data-bvi="on"] .label, html[data-bvi="on"] .doclist__meta, html[data-bvi="on"] .pcard__meta, html[data-bvi="on"] .ncard__date { font-size: var(--fs-xs) !important; } /* -------------------------------------------------------------------------- Межбуквенный интервал -------------------------------------------------------------------------- */ html[data-bvi="on"][data-bvi-spacing="mid"] body { letter-spacing: 0.06em; word-spacing: 0.12em; } html[data-bvi="on"][data-bvi-spacing="wide"] body { letter-spacing: 0.12em; word-spacing: 0.24em; } html[data-bvi="on"][data-bvi-spacing="mid"] *, html[data-bvi="on"][data-bvi-spacing="wide"] * { letter-spacing: inherit !important; } /* -------------------------------------------------------------------------- Изображения -------------------------------------------------------------------------- */ html[data-bvi="on"][data-bvi-images="off"] img, html[data-bvi="on"][data-bvi-images="off"] .media, html[data-bvi="on"][data-bvi-images="off"] svg:not(.bvi-keep), html[data-bvi="on"][data-bvi-images="off"] .map-frame { display: none !important; } html[data-bvi="on"][data-bvi-images="gray"] img, html[data-bvi="on"][data-bvi-images="gray"] .media { filter: grayscale(1); } /* -------------------------------------------------------------------------- Упрощение раскладки: одна колонка, без линеек-сеток -------------------------------------------------------------------------- */ html[data-bvi="on"] .gridlines, html[data-bvi="on"] .cols, html[data-bvi="on"] .split, html[data-bvi="on"] .steps, html[data-bvi="on"] .form, html[data-bvi="on"] .footer__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; background: transparent !important; } html[data-bvi="on"] .gridlines > * { background: transparent !important; border-bottom: 2px solid var(--color-text); padding-inline: 0; } html[data-bvi="on"] .cols > *, html[data-bvi="on"] .footer__grid > *, html[data-bvi="on"] .split > *, html[data-bvi="on"] .form > * { margin-bottom: var(--space-6); } html[data-bvi="on"] .step { border-left: 0; padding-left: 0; } html[data-bvi="on"] .table { min-width: 0; } html[data-bvi="on"] .table, html[data-bvi="on"] .table tbody, html[data-bvi="on"] .table tr, html[data-bvi="on"] .table td { display: block; width: 100%; } html[data-bvi="on"] .table thead { display: none; } html[data-bvi="on"] .table tr { border-bottom: 2px solid var(--color-text); padding-block: var(--space-4); } html[data-bvi="on"] .table td { border: 0; padding: 2px 0; text-align: left !important; } html[data-bvi="on"] .doclist__item { grid-template-columns: minmax(0, 1fr) !important; gap: 4px; } html[data-bvi="on"] .doclist__action { text-align: left; }