/* * Dostepnosc cyfrowa (WCAG 2.2) - warstwa nad motywem. * * Dwie czesci: * 1. Poprawki GLOBALNE, zawsze aktywne: widoczny fokus klawiatury, link * "przejdz do tresci", klasa .sr-only dla etykiet pol, honorowanie * systemowego prefers-reduced-motion (motyw ukrywa elementy .ftco-animate * do czasu animacji - bez tej sekcji uzytkownik z wylaczonymi animacjami * widzialby pusta strone). * 2. Tryby przelaczane przez widzet (templates/partials/dostepnosc.html), * zapisywane w localStorage i nakladane jako klasy na : * .a11y-kontrast - wysoki kontrast (ciemne tlo, jasny tekst, zolte linki) * .a11y-duzy-tekst - powiekszenie tekstu o 25 % * .a11y-bez-animacji - zero animacji i przewijania parallax * .a11y-podkreslenia - podkreslone wszystkie linki * .a11y-czytelny-font - font systemowy zamiast Poppins */ /* ---------- 1. Globalnie ---------- */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Link pomijajacy nawigacje - widoczny dopiero po ustawieniu fokusu (Tab). */ .skip-link { position: absolute; left: 8px; top: -100px; z-index: 10001; padding: 10px 16px; background: #1cc88a; color: #0b1a14; font-weight: 700; border-radius: 4px; text-decoration: none; transition: top .15s; } .skip-link:focus { top: 8px; outline: 3px solid #0b1a14; } /* Motyw kasuje outline (button:focus, .btn:focus). WCAG 2.4.7 / 2.4.11 wymagaja widocznego fokusu - przywracamy go dla nawigacji klawiatura. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid #f8b500 !important; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0, 0, 0, .35); } /* Cel dotyku min. 24x24 px (WCAG 2.5.8) dla przyciskow ikonowych. */ .navbar-toggler, .close, .tag-cloud-link { min-width: 24px; min-height: 24px; } @media (prefers-reduced-motion: reduce) { .ftco-animate { opacity: 1 !important; visibility: visible !important; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } [data-aos] { opacity: 1 !important; transform: none !important; } } /* Bez JavaScriptu motyw nie odslania .ftco-animate - tresc bylaby niewidoczna. */ .bez-js .ftco-animate { opacity: 1 !important; visibility: visible !important; } /* ---------- 2. Widzet ---------- */ .a11y-przycisk { position: fixed; left: 16px; bottom: 16px; z-index: 10000; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; background: #1a2226; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); cursor: pointer; display: flex; align-items: center; justify-content: center; } .a11y-przycisk svg { width: 28px; height: 28px; fill: currentColor; } .a11y-przycisk:hover { background: #1cc88a; color: #0b1a14; } .a11y-panel { position: fixed; left: 16px; bottom: 80px; z-index: 10000; width: min(320px, calc(100vw - 32px)); background: #fff; color: #1a2226; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); padding: 18px 18px 14px; font-size: 15px; line-height: 1.5; } .a11y-panel[hidden] { display: none; } .a11y-panel h2 { font-size: 17px; margin: 0 0 12px; color: #1a2226; } .a11y-panel ul { list-style: none; margin: 0; padding: 0; } .a11y-panel li { margin: 0 0 8px; } .a11y-panel label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; border: 1px solid #e3e6ea; } .a11y-panel label:hover { background: #f3f5f7; } .a11y-panel input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: none; } .a11y-panel .a11y-stopka { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid #e3e6ea; font-size: 13px; } .a11y-panel .a11y-stopka a { color: #146c43; text-decoration: underline; } .a11y-panel button.a11y-reset { background: none; border: 1px solid #cfd4da; border-radius: 6px; padding: 6px 10px; font-size: 13px; cursor: pointer; color: #1a2226; } /* ---------- 3. Tryby ---------- */ html.a11y-duzy-tekst { font-size: 125%; } html.a11y-duzy-tekst body { font-size: 1.1rem; } html.a11y-podkreslenia a { text-decoration: underline !important; } html.a11y-czytelny-font body, html.a11y-czytelny-font h1, html.a11y-czytelny-font h2, html.a11y-czytelny-font h3, html.a11y-czytelny-font h4, html.a11y-czytelny-font .btn, html.a11y-czytelny-font input, html.a11y-czytelny-font textarea { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Noto Sans", sans-serif !important; letter-spacing: .01em; } html.a11y-bez-animacji *, html.a11y-bez-animacji *::before, html.a11y-bez-animacji *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-bez-animacji .ftco-animate, html.a11y-bez-animacji [data-aos] { opacity: 1 !important; visibility: visible !important; transform: none !important; } html.a11y-bez-animacji [data-stellar-background-ratio] { background-attachment: scroll !important; background-position: center !important; } html.a11y-bez-animacji #ftco-loader { display: none !important; } /* Wysoki kontrast: ciemne tlo, jasny tekst, linki zolte (kontrast > 7:1). */ html.a11y-kontrast body, html.a11y-kontrast .bg-light, html.a11y-kontrast .bg-white, html.a11y-kontrast .ftco-section, html.a11y-kontrast .card, html.a11y-kontrast .blog-entry .text, html.a11y-kontrast .about-author, html.a11y-kontrast .custom-card-wrapper, html.a11y-kontrast .contact-form, html.a11y-kontrast .form-control, html.a11y-kontrast .navbar, html.a11y-kontrast .ftco-footer, html.a11y-kontrast .bg-primary, html.a11y-kontrast .a11y-panel { background: #000 !important; background-image: none !important; color: #fff !important; box-shadow: none !important; } html.a11y-kontrast .hero-wrap { background-image: none !important; background: #000 !important; } html.a11y-kontrast .hero-wrap .overlay { opacity: 0 !important; } html.a11y-kontrast h1, html.a11y-kontrast h2, html.a11y-kontrast h3, html.a11y-kontrast h4, html.a11y-kontrast p, html.a11y-kontrast li, html.a11y-kontrast span, html.a11y-kontrast label, html.a11y-kontrast .text-muted, html.a11y-kontrast .a11y-panel h2, html.a11y-kontrast .breadcrumbs a { color: #fff !important; } html.a11y-kontrast a, html.a11y-kontrast .nav-link, html.a11y-kontrast .a11y-panel .a11y-stopka a { color: #ffd200 !important; text-decoration: underline !important; } html.a11y-kontrast .btn, html.a11y-kontrast .btn-primary, html.a11y-kontrast .btn-custom, html.a11y-kontrast input[type="submit"], html.a11y-kontrast .a11y-przycisk { background: #ffd200 !important; color: #000 !important; border-color: #ffd200 !important; } html.a11y-kontrast .btn *, html.a11y-kontrast .btn-custom * { color: #000 !important; } html.a11y-kontrast .form-control { border: 2px solid #fff !important; } html.a11y-kontrast .form-control::placeholder { color: #d0d0d0 !important; } html.a11y-kontrast .a11y-panel label { border-color: #fff; } html.a11y-kontrast .a11y-panel label:hover { background: #222 !important; } html.a11y-kontrast img:not(.logo) { filter: contrast(1.15); } html.a11y-kontrast #cookie-banner { border-top: 2px solid #ffd200; }