/* IKE - tryby wysokiego kontrastu. Wspólny arkusz dla wszystkich podstron. Ładowany jako ostatni, dlatego nadpisuje style lokalne stron (także ustawione inline). */ /* ================= TRYBY KONTRASTU (v2) ================= Jeden zestaw reguł dla wszystkich trzech trybów. Działa też na sekcjach ze stylami inline (strony budowane jako komponenty), bo nadpisuje kolor tła, tekstu i obramowania na każdym elemencie w . */ html[data-contrast="white-black"] { --hc-bg:#000; --hc-fg:#fff; --hc-mute:#d7d7d7; } html[data-contrast="yellow-black"] { --hc-bg:#000; --hc-fg:#ff0; --hc-mute:#ffe600; } html[data-contrast="black-yellow"] { --hc-bg:#ff0; --hc-fg:#000; --hc-mute:#222; } html[data-contrast] { background: var(--hc-bg) !important; } html[data-contrast] body { background: var(--hc-bg) !important; color: var(--hc-fg) !important; } /* podstawa: płaskie tło, kolor tekstu i obramowań z trybu. :where() celowo zeruje specyficzność wykluczeń, żeby dalsze wyjątki (przyciski, karty, Hałasory) mogły tę regułę nadpisać. */ html[data-contrast] body *:where(:not(img, picture, video, canvas, iframe, .a11y__btn)) { background-color: var(--hc-bg) !important; background-image: none !important; color: var(--hc-fg) !important; border-color: var(--hc-fg) !important; outline-color: var(--hc-fg) !important; box-shadow: none !important; text-shadow: none !important; -webkit-text-fill-color: var(--hc-fg) !important; filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; } html[data-contrast] body svg { color: var(--hc-fg) !important; } html[data-contrast] a { text-decoration: underline !important; } html[data-contrast] ::selection { background: var(--hc-fg); color: var(--hc-bg); } /* elementy dekoracyjne, które w normalnym trybie są samym kolorem tła (kreski, paski, akcenty) - w kontraście dostają widoczną krawędź */ html[data-contrast] hr { border-top: 2px solid var(--hc-fg) !important; } /* belki i nagłówki sekcji: ramka zamiast wypełnienia */ html[data-contrast] .acad-bar, html[data-contrast] .acad-box__h, html[data-contrast] .acad-table thead th, html[data-contrast] .imghero__label, html[data-contrast] .kt-label, html[data-contrast] .rz-tile__n { border: 2px solid var(--hc-fg) !important; font-weight: 700 !important; } /* pasek tożsamości, nawigacja i stopka: oddzielone linią, nie kolorem */ html[data-contrast] .ident { border-bottom: 2px solid var(--hc-fg) !important; } html[data-contrast] .site-header, html[data-contrast] .pg-head { border-bottom: 2px solid var(--hc-fg) !important; } html[data-contrast] .acad-footer, html[data-contrast] .footer, html[data-contrast] .pg-foot { border-top: 2px solid var(--hc-fg) !important; } html[data-contrast] .acad-hero { border-bottom: 2px solid var(--hc-fg) !important; } /* aktywna pozycja nawigacji: wypełnienie odwrotne, żeby była rozpoznawalna */ html[data-contrast] .navbar__links a[aria-current="page"], html[data-contrast] .pg-nav a[aria-current="page"], html[data-contrast] .ident__lang a.is-active { background: var(--hc-fg) !important; color: var(--hc-bg) !important; -webkit-text-fill-color: var(--hc-bg) !important; text-decoration: none !important; } /* przyciski i CTA: wypełnienie odwrotne + ramka */ html[data-contrast] .btn, html[data-contrast] .acad-btn, html[data-contrast] .navbar__cta a, html[data-contrast] .navbar__cta a *, html[data-contrast] .pg-btn, html[data-contrast] .pg-btn *, html[data-contrast] .kt-submit, html[data-contrast] button[type="submit"], html[data-contrast] button[type="submit"] * { background: var(--hc-fg) !important; color: var(--hc-bg) !important; -webkit-text-fill-color: var(--hc-bg) !important; border: 2px solid var(--hc-fg) !important; text-decoration: none !important; } html[data-contrast] .btn:hover, html[data-contrast] .acad-btn:hover, html[data-contrast] .navbar__cta a:hover, html[data-contrast] .pg-btn:hover, html[data-contrast] button[type="submit"]:hover { background: var(--hc-bg) !important; color: var(--hc-fg) !important; -webkit-text-fill-color: var(--hc-fg) !important; } /* karty, boksy i kafle: kontur, żeby nie zlewały się z tłem strony */ html[data-contrast] .acad-box, html[data-contrast] .acad-table, html[data-contrast] .card, html[data-contrast] .paper, html[data-contrast] .benefit, html[data-contrast] .model-card, html[data-contrast] .rz-tile, html[data-contrast] .kt-topic, html[data-contrast] .ob-card, html[data-contrast] .pg-card, html[data-contrast] figure { border: 2px solid var(--hc-fg) !important; } html[data-contrast] .acad-table td, html[data-contrast] .acad-table th { border: 1px solid var(--hc-fg) !important; } html[data-contrast] .acad-news__item, html[data-contrast] .acad-depts li { border-bottom: 1px solid var(--hc-fg) !important; } /* zaznaczony kafel / wybrana opcja */ html[data-contrast] [aria-pressed="true"]:not(.a11y__btn), html[data-contrast] [aria-checked="true"], html[data-contrast] .is-picked, html[data-contrast] .kt-topic.is-on { outline: 3px solid var(--hc-fg) !important; outline-offset: -3px; } /* logo, godło i zdjęcia: czytelne na ciemnym tle */ html[data-contrast="white-black"] .ident__logo img, html[data-contrast="yellow-black"] .ident__logo img, html[data-contrast="white-black"] .acad-footer__brand img, html[data-contrast="yellow-black"] .acad-footer__brand img, html[data-contrast="white-black"] .pg-logo img, html[data-contrast="yellow-black"] .pg-logo img { filter: brightness(0) invert(1) !important; } html[data-contrast="black-yellow"] .ident__logo img, html[data-contrast="black-yellow"] .acad-footer__brand img, html[data-contrast="black-yellow"] .pg-logo img { filter: brightness(0) !important; } html[data-contrast] body img:not([src*="logo"]):not([src*="godlo"]) { border: 1px solid var(--hc-fg); } /* warstwy dekoracyjne nad zdjęciami (przesłony, gradienty) - w kontraście zbędne */ html[data-contrast] [class*="veil"], html[data-contrast] [class*="scrim"], html[data-contrast] [class*="overlay"], html[data-contrast] [class*="hero__bg"], html[data-contrast] [class*="hero__img"] { display: none !important; } /* hero bez zdjęcia nie musi trzymać wysokości kadru */ html[data-contrast] .hx-hero .wrap, html[data-contrast] .imghero .wrap, html[data-contrast] .page-hero .wrap, html[data-contrast] .hero .wrap { min-height: 0 !important; height: auto !important; padding-block: clamp(28px, 4vw, 52px) !important; } /* godło i znaki graficzne: monochromatyczna sylwetka zamiast koloru */ html[data-contrast="white-black"] .ident__godlo img, html[data-contrast="yellow-black"] .ident__godlo img { filter: grayscale(1) brightness(0) invert(1) !important; } html[data-contrast="black-yellow"] .ident__godlo img { filter: grayscale(1) brightness(0) !important; } /* Hałasory i inne dekoracje: nie przeszkadzają w czytaniu */ /* ikony rysowane samym tłem (hamburger, kreski, strzałki) - muszą zostać widoczne */ html[data-contrast] .navbar__burger { border: 2px solid var(--hc-fg) !important; } html[data-contrast] .navbar__burger span, html[data-contrast] .navbar__burger span::before, html[data-contrast] .navbar__burger span::after { background: var(--hc-fg) !important; } /* Hałasory: w kontraście jako monochromatyczne sylwetki (nadal widoczne) */ html[data-contrast] .nz { opacity: .9 !important; } html[data-contrast] .nz__body, html[data-contrast] .nz__arm, html[data-contrast] .nz__body::before, html[data-contrast] .nz__body::after { background: var(--hc-fg) !important; border-color: var(--hc-fg) !important; } html[data-contrast] .nz__eye, html[data-contrast] .nz__eye::after, html[data-contrast] .nz__mouth { background: var(--hc-bg) !important; } html[data-contrast] .pgt-layer { opacity: .55 !important; } /* przyciski wyboru kontrastu zachowują własne barwy (to próbniki) */ html[data-contrast] .a11y__btn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--hc-fg) !important; } html[data-contrast] .a11y__sep { background: var(--hc-fg) !important; } /* pola formularza */ html[data-contrast] input, html[data-contrast] textarea, html[data-contrast] select { background: var(--hc-bg) !important; color: var(--hc-fg) !important; -webkit-text-fill-color: var(--hc-fg) !important; border: 2px solid var(--hc-fg) !important; } html[data-contrast] input::placeholder, html[data-contrast] textarea::placeholder { color: var(--hc-mute) !important; opacity: 1 !important; } html[data-contrast] :focus-visible { outline: 3px solid var(--hc-fg) !important; outline-offset: 2px; } /* --- strona Pogromcy Hałasu: elementy o własnych stylach --- */ html[data-contrast] .pg, html[data-contrast] .pg-hero, html[data-contrast] .pg-sec { background: var(--hc-bg) !important; } html[data-contrast] .pg-hero__in { min-height: 0 !important; padding-block: clamp(40px,6vw,72px) !important; } html[data-contrast] .pg-blob, html[data-contrast] .pg-ring, html[data-contrast] .pg-zz, html[data-contrast] .pg-wave, html[data-contrast] .pg-glow, html[data-contrast] .pg-hero__title::before { display: none !important; } html[data-contrast] .pg-tag, html[data-contrast] .pg-card, html[data-contrast] .pg-slot, html[data-contrast] .pg-mat__sheet, html[data-contrast] .pg-path__st, html[data-contrast] .pg-faq__it { border: 2px solid var(--hc-fg) !important; } html[data-contrast] .pg-btn, html[data-contrast] .pg-btn * { background: var(--hc-fg) !important; color: var(--hc-bg) !important; -webkit-text-fill-color: var(--hc-bg) !important; border-color: var(--hc-fg) !important; } html[data-contrast] .pg-btn:hover { background: var(--hc-bg) !important; color: var(--hc-fg) !important; -webkit-text-fill-color: var(--hc-fg) !important; } html[data-contrast] .pg-lang a.is-active { background: var(--hc-fg) !important; color: var(--hc-bg) !important; -webkit-text-fill-color: var(--hc-bg) !important; }