/* Спеціальні можливості — vodokanal-kub Палітра: indigo #003C71 · water #2FA4E7 · green #009030 */ /* ============================================================ * ГЛОБАЛЬНІ ЕФЕКТИ (застосовуються до ; віджет винесений у ) * ============================================================ */ html.a11y-invert body { filter: invert(1) hue-rotate(180deg); } html.a11y-grayscale body { filter: grayscale(1); } html.a11y-saturate-low body { filter: saturate(.5); } html.a11y-saturate-high body { filter: saturate(1.7); } /* Темний контраст */ html.a11y-contrast-dark body { background: #000 !important; } html.a11y-contrast-dark body :where(p,li,span,small,strong,em,label,td,th,dd,dt,blockquote,figcaption,h1,h2,h3,h4,h5,h6,div,section,article,header,footer,nav,aside,summary,details) { color: #fff !important; } html.a11y-contrast-dark body :where(section,article,header,footer,nav,aside,main,.card,.tile,.section,.contacts-card,.emergency-feed,.emergency-intro,.hero,.navbar) { background: #000 !important; background-image: none !important; box-shadow: none !important; } html.a11y-contrast-dark body :where(a,a *) { color: #ffea00 !important; } html.a11y-contrast-dark body :where(button,.btn,input,select,textarea) { background: #000 !important; color: #fff !important; border: 1px solid #fff !important; } /* Світлий контраст */ html.a11y-contrast-light body { background: #fff !important; } html.a11y-contrast-light body :where(p,li,span,small,strong,em,label,td,th,dd,dt,blockquote,figcaption,h1,h2,h3,h4,h5,h6,div,section,article,header,footer,nav,aside,summary,details) { color: #000 !important; } html.a11y-contrast-light body :where(section,article,header,footer,nav,aside,main,.card,.tile,.section,.contacts-card,.emergency-feed,.emergency-intro,.hero,.navbar) { background: #fff !important; background-image: none !important; box-shadow: none !important; } html.a11y-contrast-light body :where(a,a *) { color: #0033cc !important; text-decoration: underline; } html.a11y-contrast-light body :where(button,.btn,input,select,textarea) { background: #fff !important; color: #000 !important; border: 1px solid #000 !important; } /* Висота рядка / інтервал між літерами */ body.a11y-line :where(p,li,a,span,small,strong,em,label,td,th,dd,dt,blockquote,figcaption,h1,h2,h3,h4,h5,h6) { line-height: var(--a11y-lh) !important; } body.a11y-letter :where(p,li,a,span,small,strong,em,label,td,th,dd,dt,blockquote,figcaption,h1,h2,h3,h4,h5,h6) { letter-spacing: var(--a11y-ls) !important; } /* ============================================================ * ВІДЖЕТ (px — не масштабується разом зі сторінкою) * ============================================================ */ .vkub-a11y-root { position: fixed; z-index: 99990; } /* Плаваюча кнопка */ .vkub-a11y-fab { position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; border: none; border-radius: 50%; background: rgb(0, 84, 143); color: #fff; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 60, 113, .35); transition: background-color .2s ease; z-index: 99991; } .vkub-a11y-fab:hover { background: rgb(47, 164, 231); } .vkub-a11y-fab:focus-visible { outline: 3px solid #ffea00; outline-offset: 3px; } /* Панель */ .vkub-a11y-panel { position: fixed; right: 20px; bottom: 86px; width: 360px; max-width: calc(100vw - 40px); max-height: calc(100vh - 120px); overflow-y: auto; background: #fff; color: #16233f; border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 60, 113, .28); padding: 18px; font-family: "e-Ukraine", system-ui, sans-serif; font-size: 14px; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98); transform-origin: right bottom; transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 99992; } .vkub-a11y-root.is-open .vkub-a11y-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .vkub-a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; } .vkub-a11y-title { margin: 0; font-size: 18px; font-weight: 800; color: #003C71; background: #dfe7ff; padding: 4px 8px; border-radius: 6px; font-family: "e-Ukraine Head", "e-Ukraine", system-ui, sans-serif; } .vkub-a11y-tools { display: flex; gap: 6px; flex: 0 0 auto; } .vkub-a11y-reset, .vkub-a11y-close { width: 34px; height: 34px; border: none; border-radius: 8px; background: #f0f3fa; color: #003C71; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .vkub-a11y-reset:hover, .vkub-a11y-close:hover { background: #e3e9f7; } .vkub-a11y-close { color: #2FA4E7; } .vkub-a11y-reset:focus-visible, .vkub-a11y-close:focus-visible { outline: 3px solid #2FA4E7; outline-offset: 1px; } /* Сітка режимів кольору */ .vkub-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .vkub-a11y-tog { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1.5px solid #e2ecf4; border-radius: 12px; background: #f7faff; color: #16233f; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; line-height: 1.2; transition: border-color .12s, background .12s; } .vkub-a11y-tog i { font-size: 18px; color: #003C71; flex: 0 0 auto; } .vkub-a11y-tog:hover { border-color: #b9ccff; } .vkub-a11y-tog.is-active { border-color: #2FA4E7; background: #e6f5fd; } .vkub-a11y-tog.is-active i { color: #2FA4E7; } .vkub-a11y-tog:focus-visible { outline: 3px solid #2FA4E7; outline-offset: 1px; } /* Повзунки */ .vkub-a11y-sliders { display: flex; flex-direction: column; gap: 12px; } .vkub-a11y-slider { display: flex; flex-direction: column; gap: 6px; } .vkub-a11y-name { font-size: 13px; font-weight: 600; color: #16233f; } .vkub-a11y-ctl { display: flex; align-items: center; gap: 8px; } .vkub-a11y-track { position: relative; flex: 1 1 auto; height: 6px; background: #e2ecf4; border-radius: 3px; overflow: hidden; } .vkub-a11y-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #003C71, #2FA4E7); border-radius: 3px; } .vkub-a11y-val { min-width: 44px; text-align: right; font-size: 13px; font-weight: 700; color: #003C71; } .vkub-a11y-minus, .vkub-a11y-plus { width: 30px; height: 30px; border: 1.5px solid #e2ecf4; border-radius: 8px; background: #fff; color: #003C71; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .vkub-a11y-minus:hover, .vkub-a11y-plus:hover { border-color: #2FA4E7; } .vkub-a11y-minus:disabled, .vkub-a11y-plus:disabled { opacity: .4; cursor: default; } .vkub-a11y-minus:focus-visible, .vkub-a11y-plus:focus-visible { outline: 3px solid #2FA4E7; outline-offset: 1px; } /* Мобільний */ @media (max-width: 480px) { .vkub-a11y-panel { left: 14px; right: 14px; width: auto; max-width: none; bottom: 80px; padding: 16px; } } @media (prefers-reduced-motion: reduce) { .vkub-a11y-panel, .vkub-a11y-fab { transition: none; } } /* ---------- Озвучення ---------- */ .vkub-a11y-speak { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e2ecf4; display: flex; flex-direction: column; gap: 8px; } .vkub-a11y-speak-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .vkub-a11y-play { display: inline-flex; align-items: center; gap: .4rem; border: none; border-radius: 9px; background: linear-gradient(135deg, #003C71, #2FA4E7); color: #fff; font-weight: 700; font-size: 13px; padding: 8px 14px; cursor: pointer; } .vkub-a11y-play:hover { filter: brightness(1.06); } .vkub-a11y-pause, .vkub-a11y-stop { width: 34px; height: 34px; border: 1.5px solid #e2ecf4; border-radius: 9px; background: #fff; color: #003C71; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .vkub-a11y-pause:hover, .vkub-a11y-stop:hover { border-color: #2FA4E7; } .vkub-a11y-pause:disabled, .vkub-a11y-stop:disabled { opacity: .4; cursor: default; } .vkub-a11y-rate { margin-left: auto; border: 1.5px solid #e2ecf4; border-radius: 9px; background: #fff; color: #003C71; font-weight: 600; font-size: 13px; padding: 7px 8px; cursor: pointer; } .vkub-a11y-play:focus-visible, .vkub-a11y-pause:focus-visible, .vkub-a11y-stop:focus-visible, .vkub-a11y-rate:focus-visible { outline: 3px solid #2FA4E7; outline-offset: 1px; } .vkub-a11y-speak-hint { margin: 0; font-size: 11.5px; color: #6b7689; line-height: 1.4; } /* Озвучення недоступне (немає українського голосу) */ .vkub-a11y-play:disabled { opacity: .45; cursor: default; filter: none; } .vkub-a11y-speak.is-unavailable .vkub-a11y-speak-hint { color: #b3261e; font-weight: 600; }