/* ========================================================================== TnUAD — panel prístupnosti Plávajúce tlačidlo, panel a režimy. Režim zapína a11y.js triedou na : kroky .a11y-text-1 … -4, .a11y-lh-1 … -3 prepínače .a11y-contrast, .a11y-links, .a11y-font, .a11y-gray, .a11y-noimg, .a11y-mask, .a11y-motion Načítava sa ako posledný, aby režimy prebili bežné štýly. ========================================================================== */ /* -------------------------------------------------------------------------- Tlačidlo a panel Panel má rozmery v px, nie v rem — inak by pri väčšom písme rástol spolu so stránkou a na mobile by sa nezmestil. -------------------------------------------------------------------------- */ .tn-a11y-fab { position: fixed; left: 16px; bottom: 16px; z-index: 1045; display: grid; place-items: center; width: 56px; height: 56px; border: 3px solid #fff; border-radius: 50%; background: var(--tn-amber-500); color: #fff; font-size: 28px; box-shadow: var(--tn-shadow-md); transition: background-color var(--tn-duration) var(--tn-ease); } .tn-a11y-fab:hover { background: var(--tn-amber-600); } /* Krúžok s počtom zapnutých volieb */ .tn-a11y-fab__badge { position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; padding: 0 6px; border: 2px solid #fff; border-radius: 12px; background: var(--tn-blue-800); color: #fff; font-family: var(--tn-font-body); font-size: 13px; font-weight: var(--tn-fw-bold); line-height: 20px; text-align: center; } .tn-a11y-fab__badge[hidden] { display: none; } .tn-a11y-panel { position: fixed; left: 16px; bottom: 84px; z-index: 1046; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow-y: auto; padding: 18px; border-radius: var(--tn-radius-lg); background: #fff; color: var(--tn-ink-900); box-shadow: var(--tn-shadow-lg); font-size: 15px; line-height: 1.25; } .tn-a11y-panel[hidden] { display: none; } .tn-a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .tn-a11y-panel__title { margin: 0; font-family: var(--tn-font-heading); font-size: 20px; font-weight: var(--tn-fw-bold); color: var(--tn-blue-800); } .tn-a11y-panel__close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--tn-surface-tint); color: var(--tn-ink-900); font-size: 18px; } /* Riadok s krokmi: ikona, názov, − hodnota + */ .tn-a11y-step { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px 10px; border: 2px solid var(--tn-line); border-radius: var(--tn-radius-md); background: var(--tn-surface-tint); } .tn-a11y-step.is-on { border-color: var(--tn-blue-800); } .tn-a11y-step > i { width: 22px; font-size: 18px; text-align: center; color: var(--tn-blue-800); } .tn-a11y-step__label { flex: 1; font-weight: var(--tn-fw-medium); } .tn-a11y-step__val { min-width: 64px; font-weight: var(--tn-fw-semibold); text-align: center; } .tn-a11y-step__btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--tn-blue-800); color: #fff; font-size: 14px; } .tn-a11y-step__btn:disabled { opacity: .3; } .tn-a11y-panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } /* Nepárny počet volieb — posledná sa roztiahne na celý riadok. */ .tn-a11y-opt:last-child:nth-child(odd) { grid-column: 1 / -1; } .tn-a11y-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 2px solid var(--tn-line); border-radius: var(--tn-radius-md); background: var(--tn-surface-tint); color: var(--tn-ink-900); font-size: 14px; font-weight: var(--tn-fw-medium); line-height: 1.25; text-align: center; } .tn-a11y-opt i { font-size: 20px; color: var(--tn-blue-800); } .tn-a11y-opt:hover { border-color: var(--tn-blue-400); } /* Zapnutá voľba — plná modrá, aby bol stav jasný aj bez farby: pribudne fajka. */ .tn-a11y-opt[aria-pressed="true"] { position: relative; border-color: var(--tn-blue-800); background: var(--tn-blue-800); color: #fff; } .tn-a11y-opt[aria-pressed="true"] i { color: #fff; } .tn-a11y-opt[aria-pressed="true"]::after { content: "\f00c"; position: absolute; top: 6px; right: 8px; font: var(--fa-font-solid); font-size: 12px; } .tn-a11y-reset { display: block; width: 100%; margin-top: 10px; padding: 10px; border: 0; border-radius: var(--tn-radius-sm); background: none; color: var(--tn-blue-800); font-size: 15px; font-weight: var(--tn-fw-medium); } .tn-a11y-reset:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- Režim: veľkosť písma (4 kroky) Všetky veľkosti sú v rem, takže stačí zväčšiť koreň. -------------------------------------------------------------------------- */ html.a11y-text-1 { font-size: 115%; } html.a11y-text-2 { font-size: 130%; } html.a11y-text-3 { font-size: 145%; } html.a11y-text-4 { font-size: 160%; } /* -------------------------------------------------------------------------- Režim: riadkovanie (3 kroky) Riadkovanie a medzery medzi slovami a písmenami podľa WCAG 1.4.12. Panel a ikony sa nemenia. -------------------------------------------------------------------------- */ html.a11y-lh-1 body :where(*:not(i, .tn-a11y-panel, .tn-a11y-panel *)) { line-height: 1.8 !important; word-spacing: .08em !important; } html.a11y-lh-2 body :where(*:not(i, .tn-a11y-panel, .tn-a11y-panel *)) { line-height: 2.1 !important; word-spacing: .16em !important; letter-spacing: .06em !important; } html.a11y-lh-3 body :where(*:not(i, .tn-a11y-panel, .tn-a11y-panel *)) { line-height: 2.4 !important; word-spacing: .2em !important; letter-spacing: .12em !important; } /* -------------------------------------------------------------------------- Režim: čitateľné písmo (Atkinson Hyperlegible — načíta ho a11y.js) Ikony majú vlastné písmo, tie vynechávame. -------------------------------------------------------------------------- */ html.a11y-font body :where(*:not(i, .material-symbols-outlined)) { font-family: "Atkinson Hyperlegible", Verdana, sans-serif !important; } /* -------------------------------------------------------------------------- Režim: stupne šedej Filter nie na ani — vytvoril by nový kontext a plávajúce tlačidlo by prestalo držať pri okraji okna. -------------------------------------------------------------------------- */ html.a11y-gray body > *:not(.tn-a11y-fab, .tn-a11y-panel, .tn-a11y-mask) { filter: grayscale(1); } /* -------------------------------------------------------------------------- Režim: skryť obrázky Fotky a obrázky na pozadí zmiznú, logá a ikony zostávajú. -------------------------------------------------------------------------- */ html.a11y-noimg img:not(.navbar-brand img, .tn-tile img, [src*="spolufinancovanie"]) { visibility: hidden !important; } html.a11y-noimg .tn-hero, html.a11y-noimg [style*="background-image"] { background-image: none !important; } /* -------------------------------------------------------------------------- Režim: čitacia maska Stmaví obrazovku okrem pásu okolo kurzora (výšky pruhov nastavuje a11y.js). -------------------------------------------------------------------------- */ .tn-a11y-mask { display: none; } html.a11y-mask .tn-a11y-mask { display: block; } .tn-a11y-mask > div { position: fixed; left: 0; right: 0; z-index: 1044; background: rgba(0, 0, 0, .55); pointer-events: none; } .tn-a11y-mask__top { top: 0; } .tn-a11y-mask__bottom { bottom: 0; } /* -------------------------------------------------------------------------- Režim: zvýrazniť odkazy -------------------------------------------------------------------------- */ /* Každý odkaz dostane žlté pozadie, čierny text a čierny rámik — je ho vidno na prvý pohľad bez ohľadu na farbu okolia. */ html.a11y-links a { background-color: #ff0 !important; background-image: none !important; color: #000 !important; outline: 2px solid #000 !important; outline-offset: 0; border-radius: 4px; text-decoration: none !important; } html.a11y-links a :where(*:not(img)) { color: #000 !important; } /* Biele logo by na žltej zaniklo — dostane len žltý rámik. */ html.a11y-links a.navbar-brand { background-color: transparent !important; outline: 3px solid #ff0 !important; outline-offset: 4px; } html.a11y-links a:not(.btn, .tn-tile, .navbar-brand, .dropdown-item, .nav-link) { padding: 3px 7px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* -------------------------------------------------------------------------- Režim: zastaviť animácie -------------------------------------------------------------------------- */ html.a11y-motion { scroll-behavior: auto !important; } html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; } /* -------------------------------------------------------------------------- Režim: vysoký kontrast Čierne pozadie, biely text, žlté odkazy a tlačidlá. Farebné plochy, prechody a fotky na pozadí sa vypnú. Pseudoprvky (ikony accordionu, vodoznaky) univerzálne pravidlo nezasiahne, tie riešime zvlášť. -------------------------------------------------------------------------- */ html.a11y-contrast :where(*:not(img, svg, path, .navbar-toggler-icon, .tn-a11y-mask > div)) { background-color: #000 !important; background-image: none !important; color: #fff !important; box-shadow: none !important; text-shadow: none !important; } html.a11y-contrast .card, html.a11y-contrast .tn-tile, html.a11y-contrast .tn-a11y-panel, html.a11y-contrast .tn-a11y-opt, html.a11y-contrast .tn-a11y-step, html.a11y-contrast .dropdown-menu { border: 2px solid #fff !important; } html.a11y-contrast a, html.a11y-contrast a *, html.a11y-contrast .tn-icon, html.a11y-contrast .tn-list li > i { color: #ff0 !important; } html.a11y-contrast .btn, html.a11y-contrast .btn * { background-color: #ff0 !important; border-color: #ff0 !important; color: #000 !important; } html.a11y-contrast .tn-rule { background-color: #fff !important; } html.a11y-contrast .tn-shape, html.a11y-contrast .bg-apply::before, html.a11y-contrast .tn-hero::before { display: none !important; } html.a11y-contrast .accordion-button::after { filter: invert(1); } html.a11y-contrast :focus-visible { outline-color: #ff0 !important; } /* Logá s tmavým písmom na priehľadnom pozadí by na čiernej zmizli. */ html.a11y-contrast img[src*="spolufinancovanie"], html.a11y-contrast .tn-tile img { padding: 4px; border-radius: 6px; background: #fff !important; } /* Zapnutá voľba v paneli musí byť rozoznateľná aj v kontraste. */ html.a11y-contrast .tn-a11y-opt[aria-pressed="true"], html.a11y-contrast .tn-a11y-opt[aria-pressed="true"] * { background-color: #ff0 !important; color: #000 !important; } html.a11y-contrast .tn-a11y-fab { border-color: #ff0 !important; color: #ff0 !important; } /* Cieľ odkazu „Preskočiť na obsah“ — fokus bez rámika okolo celej stránky. */ main:focus { outline: none; } /* Kontrast + zvýraznené odkazy naraz — kontrast by textu odkazu dal žltú na žltom pozadí. Odkaz je žltý štítok s čiernym textom a bielym rámikom. */ html.a11y-contrast.a11y-links a:not(.navbar-brand), html.a11y-contrast.a11y-links a:not(.navbar-brand) :where(*:not(img)) { background-color: #ff0 !important; color: #000 !important; } html.a11y-contrast.a11y-links a:not(.navbar-brand) { outline: 2px solid #fff !important; } html.a11y-contrast .tn-a11y-fab__badge { background: #ff0 !important; color: #000 !important; border-color: #000 !important; }