/* * Accessibility layer ("версия для слабовидящих") — contracts/a11y-state.md + * OKF-Docs/accessibility-audit-checklist.md §F (ГОСТ Р 52872-2019). Our own * CSS-variable theme switch, not a third-party widget (constitution III). * State lives in data-attributes on , set SSR from the sputnik_a11y cookie * and toggled by a11y_controller. Attribute selectors outrank the :root defaults. * * Axes (all independent): data-scheme (mono|dark|blue) · data-fs (2|3) · * data-lh (2|3) line-height · data-ls (2|3) letter-spacing · data-img (bw|off). */ /* --- F2 colour schemes ------------------------------------------------------- */ /* Чёрно-белая (mono): desaturate the whole page. Achromatic, keeps the existing ≥4.5:1 contrast structure, needs no per-component overrides. */ html[data-scheme="mono"] { filter: grayscale(1); } /* Белым по чёрному (dark): every --c-* → black bg / yellow ink (prototype values) */ html[data-scheme="dark"] { --c-bg: #000000; --c-bg-soft: #0a0a0a; --c-bg-blue: #000000; --c-navy: #000000; --c-navy-2: #000000; --c-gold: #ffe600; --c-heading: #ffe600; --c-teal: #ffe600; --c-teal-ink: #ffe600; --c-sun: #ffe600; --c-sun-deep: #ffe600; --c-ink: #ffffff; --c-soft: #ffffff; --c-line: #ffe600; --c-white: #000000; /* Buttons: surfaces invert to black, so primary/outline get the yellow accent via their own semantic tokens (systemic — no per-component override). */ --c-btn-bg: #ffe600; --c-btn-bg-hover: #ffffff; --c-btn-fg: #000000; --c-btn-line: #ffe600; } /* Тёмным по бежевому (beige) — тёплый светлый фон, тёмно-коричневый текст */ html[data-scheme="beige"] { --c-bg: #f4ebd4; --c-bg-soft: #eee2c5; --c-bg-blue: #e6d8b8; --c-navy: #43382a; --c-navy-2: #43382a; --c-gold: #3b3126; --c-heading: #3b3126; --c-teal: #3b3126; --c-teal-ink: #3b3126; /* --c-sun is the bright accent — it backs the CTA (with dark text) and colours glyphs on the dark-brown sections, so it must stay light (amber), not dark. */ --c-sun: #d9a441; --c-sun-deep: #b07d1f; --c-ink: #3b3126; --c-soft: #4a4032; --c-line: #3b3126; --c-white: #f4ebd4; /* Buttons: dark-brown surface + beige text (own tokens, systemic). */ --c-btn-bg: #43382a; --c-btn-bg-hover: #2c251b; --c-btn-fg: #f4ebd4; --c-btn-line: #43382a; } /* --- F6 sans-serif in the special version (any non-default scheme) ----------- */ /* Headings use var(--font-serif); repointing it to the sans stack switches the whole special version to a sans-serif face (more legible for low vision). */ html[data-scheme="mono"], html[data-scheme="dark"], html[data-scheme="beige"] { --font-serif: "PT Sans", "Segoe UI", system-ui, sans-serif; } /* --- F3 font-size steps: ≈100 / 150 / 200 % (root drives em/rem) ------------- */ html[data-fs="2"] { --fs: 24px; } html[data-fs="3"] { --fs: 32px; } /* --- F4 line-height and letter-spacing steps -------------------------------- */ html[data-lh="2"] { --lh-text: 1.9; } html[data-lh="3"] { --lh-text: 2.2; } html[data-ls="2"] { letter-spacing: 0.06em; } html[data-ls="3"] { letter-spacing: 0.14em; } /* --- F5 images: colour / black-and-white / hidden --------------------------- */ /* T024 (007, FR-017): режимы распространяются и на видео — кадр (iframe), свой ролик (video, US4) и их общий плейсхолдер, не только на img. */ html[data-img="bw"] img, html[data-img="bw"] iframe, html[data-img="bw"] video, html[data-img="bw"] .sputnik-ph { filter: grayscale(1); } html[data-img="off"] img, html[data-img="off"] iframe, html[data-img="off"] video, html[data-img="off"] .sputnik-ph { visibility: hidden !important; } /* --- The accessibility panel (toggled by the glasses button in the header) --- */ .sputnik-a11y { position: relative; display: inline-flex; } .sputnik-a11y__panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 120; width: 280px; max-height: 80vh; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; background: var(--c-white); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--r-card); box-shadow: var(--sh-card-hover); } .sputnik-a11y__panel[hidden] { display: none; } .sputnik-a11y__legend { display: block; margin-bottom: 6px; font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-soft); } .sputnik-a11y__row { display: flex; gap: 6px; } .sputnik-a11y__btn { flex: 1; min-height: 40px; padding: 8px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--c-white); color: var(--c-heading); border: 1px solid var(--c-line); border-radius: var(--r-button); font-weight: 700; font-family: var(--font-sans); font-size: 0.9em; cursor: pointer; } .sputnik-a11y__btn:hover { background: var(--c-bg-soft); } .sputnik-a11y__btn[aria-pressed="true"] { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); } .sputnik-a11y__btn--reset { background: transparent; color: var(--c-teal-ink); border-style: dashed; } /* Scheme swatches read as their scheme even before it is applied */ .sputnik-a11y__btn--scheme-mono { background: #fff; color: #000; border-color: #000; } .sputnik-a11y__btn--scheme-dark { background: #000; color: #ffe600; border-color: #000; } .sputnik-a11y__btn--scheme-beige { background: #f4ebd4; color: #3b3126; border-color: #3b3126; } .sputnik-a11y__btn--scheme-mono[aria-pressed="true"], .sputnik-a11y__btn--scheme-dark[aria-pressed="true"], .sputnik-a11y__btn--scheme-beige[aria-pressed="true"] { outline: 3px solid var(--c-sun); outline-offset: 1px; }