/* ============================================================ Pasek dostępności cyfrowej ============================================================ */ #a11y-bar { display: flex; align-items: center; gap: 0.25rem; padding: 4px 10px; font-size: 12px; background: #0d2550; color: #ccd6f0; flex-wrap: wrap; /* Wyrównanie do szerokości wrappera – te same marginesy co header */ margin: 0 20px; box-sizing: border-box; } @media (min-width: 768px) { #a11y-bar { margin: 0 50px; } } @media (min-width: 1024px) { #a11y-bar { margin: 0 80px; } } @media (min-width: 1320px) { #a11y-bar { margin: 0 calc(50vw - 600px); } } #a11y-bar .a11y-label { margin-right: 0.5rem; color: #8fa8d0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } #a11y-bar .a11y-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.2); margin: 0 0.5rem; flex-shrink: 0; } /* Przyciski paska */ #a11y-bar button { background: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: 3px; color: #ccd6f0; cursor: pointer; padding: 2px 8px; font-family: inherit; line-height: 1.6; transition: background 0.15s, color 0.15s, border-color 0.15s; } #a11y-bar button:hover, #a11y-bar button:focus-visible { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.5); color: #fff; outline: none; } #a11y-bar button[aria-pressed="true"] { background: #ffffff; color: #0d2550; border-color: #ffffff; font-weight: bold; } /* Przyciski rozmiaru czcionki */ .a11y-font-btn[data-size="lg"] { font-size: 13px; } .a11y-font-btn[data-size="xl"] { font-size: 15px; } .a11y-font-btn[data-size="xxl"] { font-size: 17px; } /* ============================================================ Tryby dostępności – stosowane na ============================================================ */ /* Rozmiary czcionki */ [data-font-size="lg"] body { font-size: 16px !important; } [data-font-size="xl"] body { font-size: 19px !important; } [data-font-size="xxl"] body { font-size: 22px !important; } [data-font-size="lg"] #main-nav .nav-item { font-size: 16px !important; } [data-font-size="xl"] #main-nav .nav-item { font-size: 19px !important; } [data-font-size="xxl"] #main-nav .nav-item { font-size: 22px !important; } /* Wysoki kontrast – czarne tło, żółty tekst */ [data-contrast="high"] body { background: #000 !important; color: #ffff00 !important; } [data-contrast="high"] header, [data-contrast="high"] #footer, [data-contrast="high"] #a11y-bar { background: #000 !important; color: #ffff00 !important; border-color: #ffff00 !important; } [data-contrast="high"] #main-nav { background: #000 !important; color: #ffff00 !important; border-color: #ffff00 !important; } [data-contrast="high"] #main-nav .nav-item { color: #ffff00 !important; } [data-contrast="high"] #main-nav .nav-item:hover, [data-contrast="high"] #main-nav .active > .nav-item { background: #ffff00 !important; color: #000 !important; } [data-contrast="high"] main { background: #000 !important; color: #ffff00 !important; border-color: #ffff00 !important; } [data-contrast="high"] a, [data-contrast="high"] main a, [data-contrast="high"] footer a { color: #ffff00 !important; text-decoration: underline !important; } [data-contrast="high"] a:visited, [data-contrast="high"] main a:visited { color: #ff9900 !important; } [data-contrast="high"] #a11y-bar button[aria-pressed="true"] { background: #ffff00 !important; color: #000 !important; } [data-contrast="high"] #wrapper { background: #000 !important; } [data-contrast="high"] .bip-header-title a { color: #ffff00 !important; } /* Czarno-biały */ [data-contrast="bw"] body, [data-contrast="bw"] * { filter: grayscale(100%) !important; }