/** * Доступність сайту — справжня версія для людей зі слабким зором. * * Що було до 2026-09-14: кнопка «Версія для слабкозорих» існувала на всіх * сторінках і формально працювала — додавала body.a11y-mode, яка міняла * фон #FCF8F2 на #FFFFFF і текст на чорний. Розмір шрифту не змінювався * ЖОДНОГО разу, вибір не запам'ятовувався, на наступній сторінці все * скидалось. Тобто для тієї єдиної людини, заради якої кнопка існує, * вона не робила нічого. * * Тут — те, що справді потрібно: розмір тексту, контраст, міжрядковий * інтервал, вимкнення анімацій. Усе керується атрибутами на , щоб * налаштування застосовувались ДО першого малювання сторінки (без * блимання) і працювали незалежно від того, якими стилями зверстана * конкретна сторінка. */ /* ---------- Розмір тексту ---------- * Сторінки сайту зверстані в пікселях (вбудований HTML у статтях), тому * масштабування через root font-size не подіяло б. `zoom` збільшує все * разом з відступами й картинками — саме те, чого людина очікує від * «зробіть більше». Перевірено на Головній: горизонтальної прокрутки не * з'являється навіть на 150%. */ html[data-a11y-size="125"] body { zoom: 1.25; } html[data-a11y-size="150"] body { zoom: 1.5; } /* ---------- Міжрядковий інтервал ---------- */ html[data-a11y-spacing="wide"] body, html[data-a11y-spacing="wide"] p, html[data-a11y-spacing="wide"] li, html[data-a11y-spacing="wide"] td, html[data-a11y-spacing="wide"] dd, html[data-a11y-spacing="wide"] figcaption { line-height: 1.9 !important; letter-spacing: 0.02em !important; word-spacing: 0.08em !important; } /* ---------- Контраст: чорне на білому ---------- * Навмисно груба заливка через `*`: сторінки сайту мають сотні вбудованих * правил і кольорів прямо в тілі статей, тож вибірково перекривати їх * неможливо — тільки повним скиданням. */ html[data-a11y-contrast="high"] body, html[data-a11y-contrast="high"] body * { background-color: #FFFFFF !important; background-image: none !important; color: #000000 !important; border-color: #000000 !important; box-shadow: none !important; text-shadow: none !important; } html[data-a11y-contrast="high"] body a, html[data-a11y-contrast="high"] body a * { color: #00308F !important; text-decoration: underline !important; } html[data-a11y-contrast="high"] body button, html[data-a11y-contrast="high"] body .btn, html[data-a11y-contrast="high"] body input, html[data-a11y-contrast="high"] body select, html[data-a11y-contrast="high"] body textarea { border: 2px solid #000000 !important; } /* Фотографії мають лишатись фотографіями. */ html[data-a11y-contrast="high"] body img, html[data-a11y-contrast="high"] body video { background: none !important; filter: contrast(1.15); } html[data-a11y-contrast="high"] body :focus-visible { outline: 3px solid #00308F !important; outline-offset: 2px !important; } /* ---------- Контраст: біле на чорному ---------- * Інверсія всієї сторінки плюс зворотна інверсія медіа — так фотографії * лишаються у своїх справжніх кольорах. Працює на будь-якій верстці, не * знаючи про неї нічого. */ html[data-a11y-contrast="invert"] { filter: invert(1) hue-rotate(180deg); background: #000000; } html[data-a11y-contrast="invert"] img, html[data-a11y-contrast="invert"] video, html[data-a11y-contrast="invert"] iframe, html[data-a11y-contrast="invert"] svg image, html[data-a11y-contrast="invert"] [style*="background-image"] { filter: invert(1) hue-rotate(180deg); } /* ---------- Без анімацій ---------- */ html[data-a11y-motion="off"] *, html[data-a11y-motion="off"] *::before, html[data-a11y-motion="off"] *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; } /* ---------- Сама панель ---------- */ .vl21-a11y-panel { position: fixed; top: 0; right: 0; z-index: 100000; width: min(370px, 100vw); max-height: 100vh; overflow-y: auto; padding: 20px 22px 26px; background: #FFFFFF; color: #16121F; border-left: 3px solid #16121F; box-shadow: -8px 0 30px rgba(0, 0, 0, 0.25); font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.5; } .vl21-a11y-panel[hidden] { display: none !important; } .vl21-a11y-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .vl21-a11y-panel__title { margin: 0; font-size: 20px; font-weight: 800; color: #16121F; } .vl21-a11y-panel__intro { margin: 0 0 18px; font-size: 14px; color: #4A4458; } .vl21-a11y-panel__close { flex-shrink: 0; width: 40px; height: 40px; border: 2px solid #16121F; border-radius: 10px; background: #FFFFFF; color: #16121F; font-size: 22px; line-height: 1; cursor: pointer; } .vl21-a11y-panel__close:hover { background: #16121F; color: #FFFFFF; } .vl21-a11y-group { margin-bottom: 20px; } .vl21-a11y-group__label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #4A4458; } .vl21-a11y-options { display: flex; gap: 8px; flex-wrap: wrap; } .vl21-a11y-option { flex: 1 1 auto; min-width: 84px; min-height: 52px; padding: 10px 14px; border: 2px solid #C9C4D4; border-radius: 12px; background: #FFFFFF; color: #16121F; font: inherit; font-weight: 700; cursor: pointer; } .vl21-a11y-option:hover { border-color: #16121F; } .vl21-a11y-option[aria-pressed="true"] { border-color: #16121F; background: #16121F; color: #FFFFFF; } .vl21-a11y-option--size-1 { font-size: 16px; } .vl21-a11y-option--size-2 { font-size: 20px; } .vl21-a11y-option--size-3 { font-size: 25px; } .vl21-a11y-reset { width: 100%; min-height: 50px; margin-top: 4px; border: 2px solid #16121F; border-radius: 12px; background: #FFFFFF; color: #16121F; font: inherit; font-weight: 800; cursor: pointer; } .vl21-a11y-reset:hover { background: #16121F; color: #FFFFFF; } .vl21-a11y-panel :focus-visible { outline: 3px solid #E65C00; outline-offset: 2px; } @media (max-width: 480px) { .vl21-a11y-panel { width: 100vw; border-left: 0; border-bottom: 3px solid #16121F; } } /* ---------- Сама панель під збільшенням (2026-09-17) ---------- * Панель живе в , а збільшення тексту — це `zoom` на тому ж . * position: fixed усередині зумованого предка множиться разом з усім * іншим: на телефоні 390px при 150% панель виміряно як left -195px, * ширина 585px — тобто вона звисала за обидва краї екрана, і ліва * колонка кнопок («Звичайні», «Залишити») ішла за межу. * Компенсуємо зворотним zoom і піднімаємо шрифт самої панелі: людина * усе одно бачить більший текст, але панель лишається в екрані. */ html[data-a11y-size="125"] .vl21-a11y-panel { zoom: 0.8; font-size: 17.5px; } html[data-a11y-size="150"] .vl21-a11y-panel { zoom: 0.6667; font-size: 19px; } /* ---------- Панель у режимі «чорне на білому» ---------- * Суцільне перекриття вище (`body *`) фарбує геть усе, включно з самою * панеллю, — і обрана кнопка ставала білою на білому, тобто людина не * бачила, що саме зараз увімкнено. Ці правила специфічніші, тому * перекривають заливку, лишаючись у тій самій чорно-білій гамі. */ html[data-a11y-contrast="high"] .vl21-a11y-panel .vl21-a11y-option[aria-pressed="true"], html[data-a11y-contrast="high"] .vl21-a11y-panel .vl21-a11y-option[aria-pressed="true"] * { background-color: #000000 !important; color: #FFFFFF !important; border-color: #000000 !important; } html[data-a11y-contrast="high"] .vl21-a11y-panel .vl21-a11y-option { border: 2px solid #000000 !important; } html[data-a11y-contrast="high"] .vl21-a11y-panel { border-left: 4px solid #000000 !important; } html[data-a11y-contrast="high"] .vl21-a11y-panel__close:hover, html[data-a11y-contrast="high"] .vl21-a11y-reset:hover { background-color: #000000 !important; color: #FFFFFF !important; } /* ========================================================================== GLOBAL LAYOUT FIXES: усунення синьої смуги знизу та білої щілини згори ========================================================================== */ #sp-footer, #sp-bottom, #sp-footer1, #sp-footer2, #sp-bottom1, #sp-bottom2, #sp-bottom3, #sp-bottom4, .sp-reading-progress-bar { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; border: none !important; } .article-can-edit, .article-details .article-can-edit { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; } #sp-main-body, .article-details { margin-top: 0 !important; padding-top: 0 !important; }