/** * @file * Accessibility menu styles. * * Built on top of Bootstrap 5 (offcanvas, grid, buttons) and Bootstrap Icons. * Colors fall back to hard-coded values when the theme design tokens are absent. */ /* ========================================================================== 0. OpenDyslexic — шрифт для режима «Шрифт для дислексии» ========================================================================== Гарнитура OpenDyslexic (лицензия OFL/Bitstream Vera): утяжелённые низы букв не дают глазу «переворачивать» символы (b/d/p/q), а расширенные межбуквенные просветы снижают crowding-эффект. Проверено покрытие глифов для всех трёх языков сайта: RO — ă â î ș ț, включая варианты с седилью (ş ţ) из старых источников; RU — полная кириллица; EN — latin. Файлы конвертированы из поставляемых .otf в .woff2 (−32…−41 % веса). Исходные .otf оставлены в fonts/ как источник. font-display: swap — шрифт грузится ТОЛЬКО когда пользователь включил режим (класс .dyslexic-font-level-1 на ), поэтому на обычную загрузку страницы эти ~54 КБ (Regular + Bold) не влияют вовсе: браузер не скачивает @font-face, пока ни одно правило его не применяет. */ @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2'), url('../fonts/OpenDyslexic-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Bold.woff2') format('woff2'), url('../fonts/OpenDyslexic-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-Italic.woff2') format('woff2'), url('../fonts/OpenDyslexic-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'OpenDyslexic'; src: url('../fonts/OpenDyslexic-BoldItalic.woff2') format('woff2'), url('../fonts/OpenDyslexic-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; } /* ========================================================================== 1. Toggle button ========================================================================== */ /* The container is the positioning context of the absolutely placed toggle. The offcanvas panel stays viewport relative, a fixed ancestor does not become the containing block of its fixed descendants. */ .accessibility-menu-container { position: fixed; z-index: 10000; top: 0; right: 0; bottom: 0; } .accessibility-menu-toggle { cursor: pointer; background: var(--color-brand-primary); box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.2); border: 1px solid var(--white, #fff); border-radius: 50% !important; color: var(--white, #fff); padding: 0; padding-top: 2px; width: 50px; height: 50px; font-size: 24px; position: absolute; top: 10px; right: 15px; z-index: 9999; text-align: center; } .accessibility-menu-toggle svg{margin:0 auto;} .accessibility-menu-toggle:hover, .accessibility-menu-toggle:focus-visible { /*background: var(--color-brand-primary-hover);*/ background: var(--blue-sky-600); color: var(--white, #fff); } .accessibility-menu-toggle:hover{ transform: translateY(-2px); } /* ========================================================================== 2. Offcanvas panel ========================================================================== */ .accessibility-menu.offcanvas { --bs-offcanvas-width: 355px; --bs-offcanvas-padding-x: 15px; --bs-offcanvas-padding-y: 15px; --bs-offcanvas-bg: var(--color-background-base-secondary, #eff1f5); --bs-offcanvas-color: var(--color-text-base-default, #121212); --bs-offcanvas-border-width: 1px; --bs-offcanvas-border-color: var(--color-border-base-default, #d9d9d9); /* Above the toggle button, so the panel slides out over it. */ --bs-offcanvas-zindex: 10000; } .accessibility-menu .offcanvas-header { align-items: center; gap: var(--spacing-8, 0.5rem); } /* Same height as the close button, so both sides of the header line up. */ .accessibility-menu .accessibility-menu-heading { display: flex; min-width: 0; min-height: 40px; flex: 1 1 auto; flex-direction: column; align-items: flex-start; justify-content: center; } .accessibility-menu .offcanvas-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; } .accessibility-menu .btn-close { width: 40px; height: 40px; flex: 0 0 auto; padding: 10px; border: 1px solid var(--color-border-base-default, #d9d9d9); border-radius: var(--border-radius-8, 0.5rem); opacity: 1; background-color: var(--white, #fff); background-size: 14px; } .accessibility-menu .btn-close:hover { border-color: var(--red-300, #f5a0a0); color: var(--red-600, #d42020); } .accessibility-menu .btn.accessibility-menu-dismiss { min-width: 40px; flex: 0 0 auto; padding: 26px 16px; border: 1px solid var(--color-brand-primary); border-radius: var(--border-radius-8, 0.5rem); background-color: var(--color-brand-primary); color: var(--white); } .accessibility-menu .btn.accessibility-menu-dismiss .bi{font-size: 24px!important;} /* ========================================================================== 3. Option buttons ========================================================================== */ .accessibility-menu .accessibility-menu-option { display: flex; width: 100%; height: 100%; min-height: 6.875rem; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-8, 0.5rem); padding: 12px 10px; border: 1px solid var(--color-border-base-default, #d9d9d9); border-radius: var(--border-radius-8, 0.5rem); background-color: var(--white, #fff); color: var(--color-text-base-default, #121212); font-size: 16px; line-height: 1.3; text-align: center; /* The theme keeps its buttons on one line, the labels here have to wrap. */ white-space: normal; overflow: visible; overflow-wrap: break-word; /* Room for the state indicator in the top-right corner. */ position: relative; } .accessibility-menu .accessibility-menu-option .text-button { max-width: 100%; } .accessibility-menu .accessibility-menu-option .bi { font-size: 20px; line-height: 1; } .accessibility-menu .accessibility-menu-option:hover, .accessibility-menu .accessibility-menu-option:focus-visible { border-color: var(--border-asp-secondary, #99bced); background-color: var(--background-asp-secondary, #e8f0fb); color: var(--text-asp-default, #00357e); } .accessibility-menu .accessibility-menu-option.active { border-color: var(--background-asp-default, #00357e); background-color: var(--background-asp-default, #00357e); color: var(--white, #fff); } /* State indicator, drawn with the Bootstrap Icons webfont. */ .accessibility-menu .accessibility-menu-option.active::after { position: absolute; top: 4px; right: 6px; color: var(--background-asp-positive-default, #17c672); content: "\f26a"; /* bi-check-circle-fill */ font-family: bootstrap-icons, sans-serif; font-size: 14px; line-height: 1; } .accessibility-menu .accessibility-menu-tts .accessibility-menu-option { min-height: 3.75rem; } .accessibility-menu .accessibility-menu-tts .accessibility-menu-option.active::after { content: "\f592"; /* bi-stop-fill */ } /* Only the label matching the current level is shown. */ .accessibility-menu .accessibility-menu-option .text-button.level-1, .accessibility-menu .accessibility-menu-option .text-button.level-2, .accessibility-menu .accessibility-menu-option .text-button.level-3, .accessibility-menu .accessibility-menu-option .text-button.level-4 { display: none; } .accessibility-menu .reset-settings { display: flex; align-items: center; justify-content: center; gap: var(--spacing-8, 0.5rem); padding: 14px 15px; border: 1px solid var(--background-asp-tertiary, #08338f); border-radius: var(--border-radius-8, 0.5rem); background-color: var(--background-asp-tertiary, #08338f); color: var(--white, #fff); font-size: 16px; } .accessibility-menu-container.is-hidden { display: none; } .accessibility-menu .reset-settings:hover, .accessibility-menu .reset-settings:focus-visible { border-color: var(--background-asp-default-hover, #0058d2); background-color: var(--background-asp-default-hover, #0058d2); color: var(--white, #fff); } /* Pointer-only features are pointless on touch devices. */ @media (hover: none) { .accessibility-menu .cursorline { display: none; } } /* On narrower screens the header leaves no room, the button moves down. */ @media (max-width: 1399.98px) { .accessibility-menu-toggle { top: auto; bottom: 80px; } } /* ========================================================================== 4. Reading mask ========================================================================== */ #reading-mask-top, #reading-mask-bottom { display: none; } #reading-mask-top { border-bottom: 5px solid var(--background-asp-tertiary, #08338f); } #reading-mask-bottom { border-top: 5px solid var(--background-asp-tertiary, #08338f); } /* ========================================================================== 5. Accessibility features applied to the page ========================================================================== */ /* Inverted colors. */ .fon-back-level-1 { background-color: var(--black, #000); filter: invert(100%); } .fon-back-level-1 .accessibility-menu .fon-back-toggle .text-button.level-1 { display: inline-block; } /* Dark contrast. */ .fon-back-level-2 { background-color: var(--black, #000); color: var(--white, #fff); } .fon-back-level-2 * { background: inherit !important; background-color: inherit !important; color: inherit !important; } .fon-back-level-2 a { color: #0089ff !important; } .fon-back-level-2 a:hover { color: #77b259 !important; } .fon-back-level-2 .accessibility-menu .fon-back-toggle .text-button.level-2 { display: inline-block; } /* Light contrast. */ .fon-back-level-3 { background-color: var(--white, #fff); color: var(--black, #000); } .fon-back-level-3 * { background-color: inherit !important; color: inherit !important; } .fon-back-level-3 a { color: #337ab7 !important; } .fon-back-level-3 a:hover { color: #77b259 !important; } .fon-back-level-3 .accessibility-menu .fon-back-toggle .text-button.level-3 { display: inline-block; } /* Saturation. */ .saturat-level-1 { filter: saturate(50%) !important; } .saturat-level-2 { filter: saturate(4) !important; } .saturat-level-3 { filter: saturate(0) !important; } /* Highlighted links. */ .highlight-links-level-1 a { outline: 2px solid red; } /* Hidden images. */ .hide-images-level-1 img { display: none !important; } /* Dyslexia friendly font. Fallback-цепочка на случай, если .woff2/.otf не отдались: Verdana и Tahoma — шрифты без засечек с широкими просветами, ближайшие к OpenDyslexic из системных. Прежнее значение `Arial, serif` работало наоборот: OpenDyslexic не подключался вовсе, а fallback `serif` давал шрифт С ЗАСЕЧКАМИ — прямо противоположное тому, что нужно при дислексии. */ .dyslexic-font-level-1 * { font-family: 'OpenDyslexic', Verdana, Tahoma, sans-serif !important; } /* Big cursor. */ html .big-cursor-level-1 * { cursor: url(bigcursor.svg), auto !important; } /* Stopped animations. */ .no-animation-level-1 *, .no-animation-level-1 *::before, .no-animation-level-1 *::after { animation: none !important; transition: none !important; } /* Text size. The line height is unitless, so it grows together with the font size. The theme sets line heights in pixels, without this the lines would overlap. */ .large-text-level-1 * { font-size: 18px !important; line-height: 1.5 !important; } .large-text-level-1 h1, .large-text-level-1 h1 *, .large-text-level-1 h2, .large-text-level-1 h2 * { font-size: 32px !important; } .large-text-level-1 h3, .large-text-level-1 h3 * { font-size: 26px !important; } .large-text-level-1 h4, .large-text-level-1 h4 * { font-size: 20px !important; } .large-text-level-2 * { font-size: 20px !important; line-height: 1.6 !important; } .large-text-level-2 h1, .large-text-level-2 h1 *, .large-text-level-2 h2, .large-text-level-2 h2 * { font-size: 34px !important; } .large-text-level-2 h3, .large-text-level-2 h3 * { font-size: 28px !important; } .large-text-level-2 h4, .large-text-level-2 h4 * { font-size: 22px !important; } .large-text-level-3 * { font-size: 22px !important; line-height: 1.7 !important; } .large-text-level-3 h1, .large-text-level-3 h1 *, .large-text-level-3 h2, .large-text-level-3 h2 * { font-size: 36px !important; } .large-text-level-3 h3, .large-text-level-3 h3 * { font-size: 30px !important; } .large-text-level-3 h4, .large-text-level-3 h4 * { font-size: 24px !important; } /* Headings need less leading than body copy, theirs also scales with the font. */ .large-text-level-1 :is(h1, h2, h3, h4, h5, h6), .large-text-level-1 :is(h1, h2, h3, h4, h5, h6) *, .large-text-level-2 :is(h1, h2, h3, h4, h5, h6), .large-text-level-2 :is(h1, h2, h3, h4, h5, h6) *, .large-text-level-3 :is(h1, h2, h3, h4, h5, h6), .large-text-level-3 :is(h1, h2, h3, h4, h5, h6) * { line-height: 1.3 !important; } /* Line spacing. */ .line-spacing-level-1 p, .line-spacing-level-1 li, .line-spacing-level-1 td { line-height: 1.8em !important; } .line-spacing-level-2 p, .line-spacing-level-2 li, .line-spacing-level-2 td { line-height: 2em !important; } .line-spacing-level-3 p, .line-spacing-level-3 li, .line-spacing-level-3 td { line-height: 2.2em !important; } /* Letter spacing. */ .text-spacing-level-1 { letter-spacing: 0.12em !important; } .text-spacing-level-2 { letter-spacing: 0.24em !important; } .text-spacing-level-3 { letter-spacing: 0.36em !important; } /* Text alignment, including the matching icon on the toggle. */ .text-align-level-1 * { text-align: left !important; } .text-align-level-2 * { text-align: center !important; } .text-align-level-3 * { text-align: right !important; } .text-align-level-4 * { text-align: justify !important; } .text-align-level-1 .accessibility-menu .text-align-toggle .bi::before { content: "\f5c7"; /* bi-text-left */ } .text-align-level-2 .accessibility-menu .text-align-toggle .bi::before { content: "\f5c4"; /* bi-text-center */ } .text-align-level-3 .accessibility-menu .text-align-toggle .bi::before { content: "\f5c9"; /* bi-text-right */ } .text-align-level-4 .accessibility-menu .text-align-toggle .bi::before { content: "\f44b"; /* bi-justify */ } .text-align-level-1 .accessibility-menu .text-align-toggle .text-button.level-1, .text-align-level-2 .accessibility-menu .text-align-toggle .text-button.level-2, .text-align-level-3 .accessibility-menu .text-align-toggle .text-button.level-3, .text-align-level-4 .accessibility-menu .text-align-toggle .text-button.level-4 { display: inline-block; } /* The generic label is replaced by the level specific one. */ .fon-back-level-1 .accessibility-menu .fon-back-toggle .text-button.level-0, .fon-back-level-2 .accessibility-menu .fon-back-toggle .text-button.level-0, .fon-back-level-3 .accessibility-menu .fon-back-toggle .text-button.level-0, .text-align-level-1 .accessibility-menu .text-align-toggle .text-button.level-0, .text-align-level-2 .accessibility-menu .text-align-toggle .text-button.level-0, .text-align-level-3 .accessibility-menu .text-align-toggle .text-button.level-0, .text-align-level-4 .accessibility-menu .text-align-toggle .text-button.level-0 { display: none; } /* ========================================================================== 6. The panel is not affected by the features The features above are applied with "!important" to every element of the page, so the panel has to restore its own values with a higher specificity, otherwise its own controls change while they are being used. ========================================================================== */ /* Inversion and saturation are filters on the body, a nested element cannot opt out of them. Applying the inverse filter to the panel cancels them out: saturate() matrices multiply, so saturate(a) is undone by saturate(1/a). Grayscale, saturate(0), destroys the colors and cannot be reverted. The filter is set on the panel and the button, not on their container, as a filter would turn the container into the containing block of the panel, which is positioned relative to the viewport. */ .fon-back-level-1 .accessibility-menu, .fon-back-level-1 .accessibility-menu-toggle { filter: invert(100%); } .saturat-level-1 .accessibility-menu, .saturat-level-1 .accessibility-menu-toggle { filter: saturate(2); } .saturat-level-2 .accessibility-menu, .saturat-level-2 .accessibility-menu-toggle { filter: saturate(0.25); } /* The contrast modes force inherited colors on every element. */ .fon-back-level-2 .accessibility-menu, .fon-back-level-3 .accessibility-menu { background-color: var(--color-background-base-secondary, #eff1f5) !important; color: var(--color-text-base-default, #121212) !important; } .fon-back-level-2 .accessibility-menu .accessibility-menu-option, .fon-back-level-3 .accessibility-menu .accessibility-menu-option { background-color: var(--white, #fff) !important; color: var(--color-text-base-default, #121212) !important; } .fon-back-level-2 .accessibility-menu .accessibility-menu-dismiss, .fon-back-level-3 .accessibility-menu .accessibility-menu-dismiss { background-color: transparent !important; color: var(--color-text-base-secondary, #383838) !important; } .fon-back-level-2 .accessibility-menu .accessibility-menu-option:hover, .fon-back-level-3 .accessibility-menu .accessibility-menu-option:hover { background-color: var(--background-asp-secondary, #e8f0fb) !important; color: var(--text-asp-default, #00357e) !important; } .fon-back-level-2 .accessibility-menu .accessibility-menu-option.active, .fon-back-level-3 .accessibility-menu .accessibility-menu-option.active, .fon-back-level-2 .accessibility-menu .reset-settings, .fon-back-level-3 .accessibility-menu .reset-settings { background-color: var(--background-asp-tertiary, #08338f) !important; color: var(--white, #fff) !important; } .fon-back-level-2 .accessibility-menu .btn-close, .fon-back-level-3 .accessibility-menu .btn-close { background-color: var(--white, #fff) !important; } .fon-back-level-2 .accessibility-menu-toggle, .fon-back-level-3 .accessibility-menu-toggle { background: var(--color-brand-primary) !important; color: var(--white, #fff) !important; } /* The dyslexia friendly font is set on the whole page. */ .dyslexic-font-level-1 .accessibility-menu, .dyslexic-font-level-1 .accessibility-menu *, .dyslexic-font-level-1 .accessibility-menu-toggle { font-family: var(--font-family-base, system-ui, sans-serif) !important; } /* Letter spacing is set on the body only, resetting it here is enough. */ .accessibility-menu-container .accessibility-menu { letter-spacing: normal !important; line-height: 1.5 !important; text-align: start !important; } /* Alignment is forced on every single element, including the labels, which are blockified by the flex layout of the buttons. Inheriting inside the panel hands the alignment back to the rules below. */ .accessibility-menu-container .accessibility-menu * { text-align: inherit !important; } .accessibility-menu-container .offcanvas-title { font-size: 18px !important; line-height: 1.2 !important; text-align: start !important; } .accessibility-menu-container .accessibility-menu-dismiss, .accessibility-menu-container .accessibility-menu-dismiss * { font-size: 13px !important; line-height: 1.2 !important; text-align: start !important; } .accessibility-menu-container .accessibility-menu-option { font-size: 16px !important; line-height: 1.3 !important; text-align: center !important; } .accessibility-menu-container .accessibility-menu-option .bi { font-size: 20px !important; line-height: 1 !important; } .accessibility-menu-container .accessibility-menu-option .text-button { font-size: 16px !important; line-height: 1.3 !important; } .accessibility-menu-container .reset-settings { font-size: 16px !important; line-height: 1.3 !important; text-align: center !important; } .accessibility-menu-container .reset-settings .bi, .accessibility-menu-container .reset-settings span { font-size: 16px !important; line-height: 1.3 !important; } /* ========================================================================== 7. Header of the aspgovmd theme The horizontal menu does not fit once the text is enlarged or spaced out, so the header switches to its mobile hamburger, the same way it does below the 1279px breakpoint of the theme. ========================================================================== */ .large-text-level-1 .asp-header__menu, .large-text-level-2 .asp-header__menu, .large-text-level-3 .asp-header__menu, .text-spacing-level-1 .asp-header__menu, .text-spacing-level-2 .asp-header__menu, .text-spacing-level-3 .asp-header__menu { display: none; } .large-text-level-1 .asp-header__hamburger, .large-text-level-2 .asp-header__hamburger, .large-text-level-3 .asp-header__hamburger, .text-spacing-level-1 .asp-header__hamburger, .text-spacing-level-2 .asp-header__hamburger, .text-spacing-level-3 .asp-header__hamburger { display: flex; }