/** * DeepNet Europe PWA * * Author: Oleksandr Saprykin * Creator: OKSI4 Studio * Created: 2026 for DeepNet Europe Sp. z o.o. * * See AUTHORS.md, COPYRIGHT.md and PROVENANCE.md. */ /* Панель доступності — стилі віджета, перенесено з AED і переписано на токени PWA (--bg-2, --accent, --r-md тощо замість --paper, --fill-accent, --radius). Розмітка не змінюється: панель ставить data-атрибути на , а правила теми/контрасту/шрифту/інтервалів реагують на них у variables.css й layout.css — тут лише вигляд самого віджета (кнопка, панель, поля). Author: Oleksandr Saprykin Studio: OKSI4 Studio Created: 2026 for DeepNet Europe Sp. z o.o. */ /* Локальні шрифти для data-font — self-hosted, сторонніх запитів немає. */ @import url("fonts/atkinson-hyperlegible.css"); @import url("fonts/lexend.css"); /* Мінімальна ціль дотику (WCAG 2.5.5/5.2.5) — використовується лише тут, тому не винесена в variables.css як загальний токен. */ .a11y-host { --a11y-target: 2.75rem; /* 44px при типовому кореневому шрифті */ } .a11y-host { position: fixed; /* Зліва, не справа: #btn-cart стає плаваючою кнопкою в правому нижньому куті на ≤768px (components.css, «Кошик на мобільному»), і #ai-modal при відкритому чаті теж сидить bottom:24px/right:24px на десктопі — праворуч уже зайнято в обох розкладках. Знизу — банер cookie-згоди (consent.css) на всю ширину теж у нижній смузі. --consent-h пише js/consent.js, поки банер показаний (0 інакше), тож кнопка сама піднімається над ним і повертається на місце після рішення користувача — без цього банер фізично перехоплював клік мишею (з клавіатури Tab/Enter працювали й без цього, стек лише блокує курсор). */ left: 0.75rem; bottom: calc(var(--consent-h, 0px) + 0.75rem); transition: bottom var(--tr); z-index: var(--z-a11y); display: flex; /* Кнопка лишається внизу на своєму місці, панель розгортається вгору від неї — так вона не переміщується під пальцем після відкриття. */ flex-direction: column-reverse; align-items: flex-start; gap: 0.5rem; /* Порожній простір навколо кнопки й панелі не має перехоплювати кліки. */ pointer-events: none; } .a11y-host > * { pointer-events: auto; } /* Смуга внизу сторінки під плаваючу кнопку/панель — a11y-panel.js вимірює й пише --a11y-reserve сам; тут лише запасне значення, доки скрипт ще не відпрацював. :has() — щоб відступ не з'являвся, якщо з якоїсь причини хост не вставився (наприклад JS вимкнено — тоді й самої кнопки нема). */ body:has(.a11y-host) { padding-bottom: calc(var(--a11y-reserve, 4rem) + 1rem); } .a11y-toggle { display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--a11y-target); padding: 0.5rem 1rem; background: var(--accent-fill-safe); color: #fff; border: 2px solid var(--accent-fill-safe); border-radius: 999px; font: inherit; font-size: var(--fs-13); font-weight: 700; cursor: pointer; box-shadow: var(--shadow-md); } :root[data-contrast="high"] .a11y-toggle { box-shadow: none; border-color: var(--border); } .a11y-toggle svg { width: 1.4em; height: 1.4em; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; } .a11y-panel { width: min(22rem, calc(100vw - 1.5rem)); max-height: min(34rem, calc(100vh - 2 * var(--a11y-target))); overflow-y: auto; padding: 1rem; background: var(--bg-2); color: var(--text); border: 2px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); } .a11y-panel[hidden] { display: none; } .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .a11y-panel__title { margin: 0; font-size: var(--fs-16); font-weight: 800; } .a11y-panel__close { min-width: var(--a11y-target); min-height: var(--a11y-target); background: none; border: 2px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-16); line-height: 1; cursor: pointer; } .a11y-group { margin-bottom: 1.25rem; } .a11y-group__title { margin: 0 0 0.75rem; font-size: var(--fs-11); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .a11y-field { margin-bottom: 1rem; } .a11y-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .a11y-field__label { display: block; margin-bottom: 0.5rem; font-weight: 600; } .a11y-field__value { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); } .a11y-field__hint { margin: 0.5rem 0 0; font-size: var(--fs-11); color: var(--text-muted); } .a11y-range { width: 100%; min-height: var(--a11y-target); accent-color: var(--accent); } .a11y-choice { display: flex; flex-wrap: wrap; gap: 0.5rem; } .a11y-choice__option { flex: 1 1 auto; min-height: var(--a11y-target); padding: 0.5rem 0.75rem; background: var(--bg-3); color: var(--text); border: 2px solid var(--border); border-radius: var(--r-sm); font: inherit; cursor: pointer; } /* Обраний варіант позначається і заливкою, і рамкою, і жирним накресленням. Сама лише заливка передавала б стан кольором — це 1.4.1. */ .a11y-choice__option[aria-checked="true"] { background: var(--accent-fill-safe); color: #fff; border-color: var(--accent-fill-safe); font-weight: 800; box-shadow: inset 0 0 0 2px var(--bg-2); } .a11y-panel__foot { padding-top: 0.75rem; border-top: 1px solid var(--border); } .a11y-reset { width: 100%; min-height: var(--a11y-target); background: var(--bg-3); color: var(--accent); border: 2px solid var(--border); border-radius: var(--r-sm); font: inherit; font-weight: 700; cursor: pointer; } .a11y-panel__status { margin: 0.5rem 0 0; font-size: var(--fs-11); color: var(--text-muted); } /* Панель — не власний друкований документ, а керування екранним поданням; у маркетинговому PDF (window.print()) їй робити нічого. */ @media print { .a11y-host { display: none !important; } }