/* === HIGH CONTRAST: black bg + yellow text (hard override) === */ html.wcag-contrast, html.wcag-contrast body { background: #000 !important; color: #ff0 !important; } /* Zbij tła i wymuś żółty tekst dosłownie wszędzie (także pseudo-elementy) */ html.wcag-contrast *, html.wcag-contrast *::before, html.wcag-contrast *::after { background-color: transparent !important; color: #ff0 !important; border-color: #ff0 !important; box-shadow: none !important; text-shadow: none !important; } /* Główne „pojemniki” niech będą faktycznie czarne (dzieci mogą być transparent) */ html.wcag-contrast body, html.wcag-contrast main, html.wcag-contrast header, html.wcag-contrast footer, html.wcag-contrast .offcanvas, html.wcag-contrast .header-full, html.wcag-contrast .header-menu-main-fixed, html.wcag-contrast .footer-full, html.wcag-contrast .stage-bg, html.wcag-contrast .container-fluid, html.wcag-contrast .content { background-color: #000 !important; } /* Linki */ html.wcag-contrast a { color: #ff0 !important; text-decoration: underline !important; } html.wcag-contrast a:visited { color: #ffd700 !important; } /* Formularze */ html.wcag-contrast input, html.wcag-contrast textarea, html.wcag-contrast select { background: #000 !important; color: #ff0 !important; border: 2px solid #ff0 !important; } html.wcag-contrast ::placeholder { color: #ff0 !important; opacity: 1 !important; } /* Tabele */ html.wcag-contrast table, html.wcag-contrast th, html.wcag-contrast td { border-color: #ff0 !important; } /* Focus */ html.wcag-contrast :focus { outline: 3px solid #0ff !important; outline-offset: 2px !important; } /* Przyciski i ikonki — żółte tło + czarny tekst dla czytelności */ html.wcag-contrast .btn, html.wcag-contrast button, html.wcag-contrast .icon-button { background: #ff0 !important; color: #000 !important; border: 2px solid #ff0 !important; } html.wcag-contrast .btn:hover, html.wcag-contrast button:hover, html.wcag-contrast .icon-button:hover { background: #000 !important; color: #ff0 !important; border-color: #ff0 !important; } /* SVG – przefarbuj ikony, żeby nie „znikały” na czarnym */ html.wcag-contrast svg, html.wcag-contrast svg * { fill: #ff0 !important; stroke: #000 !important; } /* Backdropy/offcanvasy itp. */ html.wcag-contrast .offcanvas-backdrop.show { background: rgba(0,0,0,0.9) !important; } /* Wysoki kontrast – lepsza widoczność ikon w przyciskach */ .wcag-contrast .icon-button { /* jeśli tło jest już żółte, nie ruszamy go */ color: #111; /* tekst/ikona = bardzo ciemny */ border: 2px solid #111; /* wyraźna ramka */ } .wcag-contrast .icon-button .material-icons { color: currentColor !important; /* ikona dziedziczy powyższy kolor */ font-size: 24px; /* trochę większa ikona = lepsza czytelność */ } .wcag-contrast .icon-button:hover, .wcag-contrast .icon-button:focus-visible { outline: 3px solid #111; outline-offset: 2px; } /* celujemy w klasę wysokiego kontrastu dodaną na lub */ html.wcag-contrast, body.wcag-contrast {} /* 1) Link w submenu: "Dodaj nowy konkurs" */ html.wcag-contrast .item-submenu-li.contestedition-menu-li > a { background: #000 !important; color: #ffd500 !important; border: 2px solid #ffd500 !important; border-radius: 8px !important; padding: .5rem 1rem !important; display: inline-block !important; text-decoration: none !important; } html.wcag-contrast .item-submenu-li.contestedition-menu-li > a:hover, html.wcag-contrast .item-submenu-li.contestedition-menu-li > a:focus-visible { background: #ffd500 !important; color: #000 !important; outline: 3px solid #000 !important; outline-offset: 2px !important; text-decoration: none !important; } /* 2) Przycisk lupy (btn-search) + jego SVG */ html.wcag-contrast .btn-search { background: #000 !important; color: #ffd500 !important; /* to steruje też kolorem ikony (patrz niżej) */ border: 2px solid #ffd500 !important; border-radius: 8px !important; } /* Wymuś, żeby ikona SVG dziedziczyła kolor z przycisku */ html.wcag-contrast .btn-search svg, html.wcag-contrast .btn-search svg path { fill: currentColor !important; stroke: currentColor !important; /* na wszelki wypadek, gdyby ikonka była „strokująca” */ } /* hover/focus dla przycisku lupy – odwracamy kolory, żeby zawsze był czytelny */ html.wcag-contrast .btn-search:hover, html.wcag-contrast .btn-search:focus-visible { background: #ffd500 !important; color: #000 !important; outline: 3px solid #000 !important; outline-offset: 2px !important; } /* Ikony w trybie kontrastu dziedziczą kolor z elementu-rodzica */ html.wcag-contrast header svg, html.wcag-contrast header svg path { fill: currentColor !important; stroke: currentColor !important; } /* STAN PODSTAWOWY – na pewno czarne tło, żółta ikona/tekst */ html.wcag-contrast .btn-search:not(:hover):not(:focus), html.wcag-contrast .btn-search:not(:hover):not(:focus-visible) { background-color: #000 !important; color: #ffd500 !important; /* ikona też przyjmie ten kolor */ border: 2px solid #ffd500 !important; border-radius: 8px !important; } /* HOVER/FOCUS – odwracamy kolory, żeby zawsze był kontrast */ html.wcag-contrast .btn-search:hover, html.wcag-contrast .btn-search:focus, html.wcag-contrast .btn-search:focus-visible { background-color: #ffd500 !important; color: #000 !important; outline: 3px solid #000 !important; outline-offset: 2px !important; } /* (Opcjonalnie) jeśli coś po drodze farbuje wszystkie .btn na żółto, możesz dodatkowo wyzerować tło linkowego wariantu w kontrast mode */ html.wcag-contrast .btn-link:not(.btn-search) { background: transparent !important; } /* Żółty kafelek w submenu: czarny napis w stanie spoczynku i po odwiedzeniu */ html.wcag-contrast .contest-submenu-li a.cpr-bg-theme.cpr-theme-green:link span, html.wcag-contrast .contest-submenu-li a.cpr-bg-theme.cpr-theme-green:visited span { color: #000 !important; text-shadow: none !important; /* gdyby gdzieś był "blady" cień */ opacity: 1 !important; } /* (opcjonalnie) hover/focus z odwróceniem kolorów — zawsze wysoki kontrast */ html.wcag-contrast .contest-submenu-li a.cpr-bg-theme.cpr-theme-green:hover span, html.wcag-contrast .contest-submenu-li a.cpr-bg-theme.cpr-theme-green:focus span { background-color: #000 !important; color: #ffd500 !important; outline: 3px solid #000 !important; outline-offset: 2px !important; } html.wcag-contrast .item { background-color: #333 !important; color: #ffd500 !important; outline: 3px solid #000 !important; outline-offset: 2px !important; } html.wcag-contrast .container { background-color: #151515 !important; color: #ffd500 !important; outline: 3px solid #000 !important; outline-offset: -2px !important; }