/* ========================================================================== Dostępność — Nieidealni: pływająca ikonka + skutki włączonych ułatwień ========================================================================== */ .ni-a11y { position: fixed; /* --ni-x / --ni-y wstawia wpis w nagłówku strony (z ustawień) */ left: clamp(34px, var(--ni-x, 97vw), calc(100vw - 34px)); top: clamp(34px, var(--ni-y, 88vh), calc(100dvh - 34px)); transform: translate(-50%, -50%); /* nad treścią (fala slidera ma 120), ale POD nagłówkiem motywu (sticky, z-index 200) — nagłówek tworzy własny kontekst warstw, w którym żyją rozwinięte menu mobilne i wyszukiwarka: one mają przykrywać ikonkę */ z-index: 150; --ni-zloty: #b7891f; --ni-linia: #d6d6d6; --ni-tlo: #f4f4f4; font-family: "Merriweather Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.4; color: #1d2327; } .ni-a11y__przycisk { width: 56px; height: 56px; border: 0; border-radius: 50%; cursor: pointer; background: var(--ni-zloty); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); padding: 0; } .ni-a11y__przycisk svg { width: 34px; height: 34px; fill: currentColor; } .ni-a11y__przycisk:hover, .ni-a11y__przycisk:focus-visible { background: #a07a1a; } .ni-a11y__przycisk:focus-visible { outline: 3px solid #1d2327; outline-offset: 2px; } .ni-a11y__panel { position: absolute; left: 0; top: calc(100% + 12px); width: min(300px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--ni-linia); border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); padding: 0.6rem; text-align: left; } /* panel otwiera się w wolną stronę — klasy nadaje skrypt */ .ni-a11y--od-prawej .ni-a11y__panel { left: auto; right: 0; } .ni-a11y--nad .ni-a11y__panel { top: auto; bottom: calc(100% + 12px); } .ni-a11y__tytul { margin: 0.2rem 0.4rem 0.5rem; font-weight: 800; font-size: 1em; } .ni-a11y__panel button { display: block; width: 100%; text-align: left; border: 1px solid var(--ni-linia); border-radius: 8px; background: var(--ni-tlo); color: inherit; font-family: inherit; font-size: 1em; line-height: inherit; cursor: pointer; padding: 0.65rem 0.8rem; margin-top: 0.4rem; min-height: 44px; /* WCAG 2.5.5/2.5.8 — wygodny cel dotykowy */ } .ni-a11y__deklaracja { display: block; margin: 0.5rem 0.4rem 0.2rem; color: #1d2327; font-weight: 700; text-decoration: underline; } /* tekst tylko dla czytników ekranu (komunikaty o zmianach) */ .ni-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ni-a11y__panel button:hover, .ni-a11y__panel button:focus-visible { border-color: var(--ni-zloty); background: #faf3e1; } .ni-a11y__panel button[aria-pressed="true"] { border-color: var(--ni-zloty); background: #faf3e1; font-weight: 700; } @media print { .ni-a11y { display: none; } } /* ========================================================================== Skutki ułatwień — klasy na . Widżet (.ni-a11y) zostaje wyłączony z powiększenia i filtrów, żeby przycisk zawsze wyglądał tak samo i nie uciekał poza ekran. ========================================================================== */ /* większy tekst — powiększenie całych treści strony */ html.ni-czcionka-1 body > *:not(.ni-a11y) { zoom: 1.15; } html.ni-czcionka-2 body > *:not(.ni-a11y) { zoom: 1.3; } /* wysoki kontrast (negatyw) — zdjęcia i filmy odwracamy z powrotem */ html.ni-kontrast body { background: #111 !important; } html.ni-kontrast body > *:not(.ni-a11y) { filter: invert(1) hue-rotate(180deg); } html.ni-kontrast body > *:not(.ni-a11y) :is(img, picture, video, iframe, svg, [style*="background-image"]) { filter: invert(1) hue-rotate(180deg); } /* skala szarości */ html.ni-szarosc body > *:not(.ni-a11y) { filter: grayscale(1); } html.ni-kontrast.ni-szarosc body > *:not(.ni-a11y) { filter: invert(1) hue-rotate(180deg) grayscale(1); } html.ni-kontrast.ni-szarosc body > *:not(.ni-a11y) :is(img, picture, video, iframe, svg, [style*="background-image"]) { filter: invert(1) hue-rotate(180deg) grayscale(1); } /* podkreślanie odnośników */ html.ni-podkreslenia a { text-decoration: underline !important; } /* wyraźny fokus — podwójna obwódka widoczna na jasnym i ciemnym tle (WCAG 2.4.7 Widoczny fokus / 2.4.13 Wygląd fokusu) */ html.ni-fokus :is(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus { outline: 3px solid #b7891f !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px #1d2327 !important; } /* duży kursor */ html.ni-kursor, html.ni-kursor * { cursor: url('data:image/svg+xml;utf8,') 5 2, auto !important; } /* zatrzymanie animacji (także slidera i płynnego przewijania) */ html.ni-stop-animacje *, html.ni-stop-animacje *::before, html.ni-stop-animacje *::after { animation: none !important; transition: none !important; } html.ni-stop-animacje { scroll-behavior: auto !important; }