/* ========================================= 1. OUTLINE I SKIP LINK ========================================= */ .wcag-btn:focus-visible, a:focus-visible { outline: 3px solid #ffbf47 !important; outline-offset: 2px !important; } .wcag-skip-link { position: absolute; top: -100px; left: 0; background: #ffbf47; color: #000; padding: 10px; z-index: 1000000; } .wcag-skip-link:focus { top: 0; } /* ========================================= 2. UKRYWANIE TEKSTU DLA CZYTNIKÓW EKRANU ========================================= */ .wcag-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; } /* ========================================= 3. TOOLBAR I PRZYCISKI ========================================= */ .wcag-toolbar-inline { display: inline-flex; gap: 8px; align-items: center; } .wcag-btn { background: transparent; border: 0; margin: 0; padding: 0; font: inherit; color: #191919; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; text-decoration: none; transition: color 0.3s ease, background 0.3s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .wcag-btn:hover, .wcag-btn:focus { background: transparent; color: #d3055f; } .wcag-btn.active { background: transparent; color: #d3055f; } /* ========================================= 4. WYSOKI KONTRAST (klasa na ) ========================================= */ html.wcag-high-contrast, html.wcag-high-contrast * { background-color: #000 !important; background-image: none !important; color: #ffff00 !important; border-color: #ffff00 !important; } html.wcag-high-contrast a { color: #00ff00 !important; text-decoration: underline !important; } html.wcag-high-contrast .wcag-btn.active { background: #ffff00 !important; color: #000 !important; } /* ========================================= 5. POWIĘKSZENIE STRONY (zoom) `zoom` skaluje wszystko niezależnie od jednostki (px, rem, em, pt), włącznie z paddingami i marginesami — utrzymuje proporcje layoutu. Baseline 2024: Chrome, Edge, Safari, Firefox 126+, Samsung Internet. ========================================= */ html.wcag-large-text { zoom: 1.2; }