/* ── ПАНЕЛЬ НАЛАШТУВАНЬ ЧИТАННЯ ──────────────────────────────────── Кнопка «Aa» відкриває чотири незалежні налаштування. Кожне вмикається окремо й памʼятається між візитами. ПРО КОНТРАСТ. Сайт Градієнта темний, тож високий контраст тут — біле по чорному, а не навпаки. Режим не підкручує наявну палітру, а замінює її повністю: всі фони чорні, весь текст білий, декор прибрано. Так світле на світлому неможливе за побудовою. (Попередня редакція фарбувала весь текст білим, не питаючи, який під ним фон — на світлих блоках це давало невидимий текст.) ПРО РОЗМІРИ. Сайт задає кеглі в пікселях, тож font-size на на них не впливає. Масштабуємо явно через множник --as. */ /* Кнопки-утиліти в шапці */ .a11yb{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.08em; padding:7px 12px;border-radius:100px;border:1px solid var(--line);background:transparent; color:inherit;cursor:pointer;line-height:1;display:inline-flex;align-items:center; transition:border-color .2s,background .2s,color .2s} .a11yb:hover{border-color:var(--pulse);background:rgba(255,255,255,.06)} .a11yb[aria-pressed="true"]{background:var(--pulse);border-color:var(--pulse);color:#0B0B10} /* ── ПАНЕЛЬ ── */ .a11y-panel{position:absolute;top:calc(100% + 10px);right:24px;z-index:200; width:min(350px,calc(100vw - 24px));background:#0E1017;border:2px solid var(--pulse); border-radius:16px;padding:18px 18px 16px;box-shadow:0 24px 60px rgba(0,0,0,.6); display:none;text-align:left} .a11y-panel.open{display:block} .a11y-panel h2{font-family:"Unbounded","Arial Black",system-ui,sans-serif;font-size:15px; margin:0 0 4px;color:#fff} .a11y-panel .hint{font-size:12.5px;line-height:1.45;color:#C7CCDA;margin:0 0 14px} .a11y-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px; padding:11px 0;border-top:1px solid rgba(255,255,255,.16)} .a11y-row .lbl{font-size:14px;color:#fff;line-height:1.3} .a11y-row .sub{display:block;font-size:12px;color:#C7CCDA;margin-top:3px;line-height:1.4;max-width:30ch} .a11y-sizes{display:flex;gap:6px} .a11y-sizes button{font-family:inherit;border:1.5px solid #fff;background:transparent;color:#fff; border-radius:8px;padding:5px 10px;cursor:pointer;line-height:1} .a11y-sizes button[aria-pressed="true"]{background:#fff;color:#0B0B10} .a11y-sw{flex:0 0 auto;width:46px;height:26px;border-radius:100px;border:2px solid #fff; background:transparent;position:relative;cursor:pointer;padding:0} .a11y-sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px; border-radius:50%;background:#fff;transition:transform .18s} .a11y-sw[aria-pressed="true"]{background:#fff} .a11y-sw[aria-pressed="true"]::after{background:#0B0B10;transform:translateX(20px)} .a11y-reset{margin-top:12px;width:100%;font-family:inherit;font-size:13px;border:1.5px solid #fff; background:transparent;color:#fff;border-radius:10px;padding:8px;cursor:pointer} /* ══ 1. ВИСОКИЙ КОНТРАСТ: біле по чорному ══ */ html.a11y,html.a11y body{background:#000!important;color:#fff!important} html.a11y *,html.a11y *::before,html.a11y *::after{ background-image:none!important;box-shadow:none!important;text-shadow:none!important} html.a11y div,html.a11y section,html.a11y article,html.a11y aside,html.a11y header, html.a11y footer,html.a11y nav,html.a11y main,html.a11y form,html.a11y ul,html.a11y ol, html.a11y li,html.a11y table,html.a11y tr,html.a11y td,html.a11y th,html.a11y blockquote, html.a11y figure,html.a11y span,html.a11y label,html.a11y dl,html.a11y dt,html.a11y dd, html.a11y .card,html.a11y .tcard,html.a11y .chip,html.a11y .box,html.a11y .toc, html.a11y .kv,html.a11y .dl-row{background-color:transparent!important} html.a11y p,html.a11y li,html.a11y td,html.a11y th,html.a11y dd,html.a11y dt,html.a11y span, html.a11y label,html.a11y div,html.a11y blockquote,html.a11y cite,html.a11y h1,html.a11y h2, html.a11y h3,html.a11y h4,html.a11y h5,html.a11y h6,html.a11y b,html.a11y strong,html.a11y em, html.a11y small,html.a11y figcaption,html.a11y .lead,html.a11y .eyebrow,html.a11y .muted, html.a11y .upd,html.a11y .crumbs,html.a11y .crumbs span{color:#fff!important} /* градієнтні написи повертаємо в суцільний колір */ html.a11y .nb,html.a11y .grad,html.a11y .wordmark,html.a11y .brand .nb,html.a11y .stat b{ -webkit-text-fill-color:#fff!important;background:none!important;color:#fff!important} html.a11y a{color:#8ecbff!important;text-decoration:underline!important; text-underline-offset:3px;text-decoration-thickness:2px} html.a11y a:not(.btn):not(.btn-p):not(.btn-s):not(.nav-cta):not(.a11yb):hover{color:#ffd24a!important} html.a11y .btn,html.a11y .btn-p,html.a11y .btn-s,html.a11y .nav-cta,html.a11y button, html.a11y .a11yb{background:transparent!important;color:#fff!important;border:2px solid #fff!important; text-decoration:none!important} html.a11y .btn-p,html.a11y .nav-cta,html.a11y .a11yb[aria-pressed="true"]{ background:#fff!important;color:#000!important;border-color:#fff!important} html.a11y input,html.a11y select,html.a11y textarea{background:#000!important;color:#fff!important; border:2px solid #fff!important} html.a11y input::placeholder,html.a11y textarea::placeholder{color:#c9c9c9!important} html.a11y .card,html.a11y .tcard,html.a11y .chip,html.a11y .box,html.a11y .toc, html.a11y .crumbs,html.a11y .sect{border-color:#fff!important} html.a11y .card,html.a11y .tcard,html.a11y .box,html.a11y .toc{border:2px solid #fff!important} html.a11y :focus-visible{outline:4px solid #ffd24a!important;outline-offset:3px} html.a11y ::selection{background:#fff;color:#000} /* Skip-link має власний білий фон із базових стилів, тож загальне правило для посилань дало б світло-блакитний текст на білому. */ html.a11y .skip{background:#000!important;color:#fff!important; border:3px solid #fff!important;text-decoration:underline!important} /* Плаваюча кнопка «Підтримати» має власний кольоровий фон — у режимі контрасту робимо її такою ж, як інші головні дії: біле на чорному. */ html.a11y .fab,html.a11y .fab:hover{background:#fff!important;color:#000!important; border:2px solid #fff!important;text-decoration:none!important} html.a11y #field,html.a11y #cursor-glow,html.a11y #grain,html.a11y .glow,html.a11y canvas, html.a11y .bg-field,html.a11y #progress,html.a11y .vecfig{display:none!important} html.a11y *,html.a11y *::before,html.a11y *::after{animation:none!important;transition:none!important} html.a11y .reveal,html.a11y .rv{opacity:1!important;transform:none!important} html.a11y h2::after{width:70px!important;background:#fff!important} /* ══ 2. РОЗМІР ТЕКСТУ ══ */ html[class*="a11y-size"]{--as:1} html.a11y-size-1{--as:1.18} html.a11y-size-2{--as:1.42} html[class*="a11y-size"] p,html[class*="a11y-size"] li,html[class*="a11y-size"] td, html[class*="a11y-size"] th,html[class*="a11y-size"] dd{font-size:calc(16px * var(--as))} html[class*="a11y-size"] .lead{font-size:calc(18px * var(--as))} html[class*="a11y-size"] .muted,html[class*="a11y-size"] .eyebrow,html[class*="a11y-size"] .upd, html[class*="a11y-size"] small,html[class*="a11y-size"] .crumbs, html[class*="a11y-size"] .toc-list a{font-size:calc(13.5px * var(--as))} html[class*="a11y-size"] h1{font-size:calc(34px * var(--as))} html[class*="a11y-size"] h2{font-size:calc(25px * var(--as))} html[class*="a11y-size"] h3{font-size:calc(19px * var(--as))} html[class*="a11y-size"] .btn,html[class*="a11y-size"] button,html[class*="a11y-size"] input, html[class*="a11y-size"] select,html[class*="a11y-size"] textarea, html[class*="a11y-size"] .nav-links a{font-size:calc(15px * var(--as))} /* ══ 3. ПРОМІЖКИ (метрики WCAG 1.4.12) ══ */ html.a11y-space p,html.a11y-space li,html.a11y-space dd,html.a11y-space td, html.a11y-space .lead,html.a11y-space blockquote{ line-height:1.6!important;letter-spacing:.12em!important;word-spacing:.16em!important} html.a11y-space p{margin-bottom:2em!important} html.a11y-space h1,html.a11y-space h2,html.a11y-space h3{ line-height:1.35!important;letter-spacing:.02em!important} /* ══ 4. ВИДІЛЕННЯ ПОЧАТКУ СЛІВ ══ */ .bio{font-weight:800} html.a11y .bio{color:#fff}