/* dostepnosc-kontrast-osiedlo.css — kontrast WCAG AA dla osiedlo.pl. 2026-08-04. * * OSOBNY PLIK OD OTOAUTA, I TO JEST CELOWE: * Portale mają różne barwy marki — otoauta #f5631e, osiedlo #e57d1a. Wspólny arkusz * musiałby albo narzucić jeden odcień obu (czyli zabrać jednemu markę), albo mnożyć * warunki. Wartości i tak są policzone osobno dla każdej barwy, więc rozdzielenie * plików nic nie kosztuje, a chroni przed sytuacją, w której poprawka dla jednego * portalu po cichu zmienia wygląd drugiego. * * SKĄD WARTOŚCI — POLICZONE, NIE DOBRANE: * Minimalne przyciemnienie w HLS (barwa i nasycenie bez zmian) aż stosunek kontrastu * osiągnie próg wobec NAJTRUDNIEJSZEGO z czterech jasnych teł portalu * (#ffffff, #f3f6fb, #eef2f9, #f2f6fc). Liczby przy regułach są prawdziwe. */ :root{ /* NADPISUJEMY ZMIENNE, nie pojedyncze selektory. Pierwsze podejście na otoauta celowało w konkretne klasy i było gonieniem własnego ogona: po każdej poprawce narzędzie pokazywało ten sam kolor w innym miejscu. Kolor jest jeden, więc poprawka też ma być jedna — tam, gdzie ten kolor się rodzi. */ --orange-600:#a85a11; /* pomarańczowy jako TEKST: 3.15 → 4.52 */ --gold-600:#946219; /* plakietka na #fbeecb: 3.15 → 4.53 */ --green-600:#1c7b49; /* plakietka na #dff3e8: 3.76 → 4.55 */ --muted-2:#636f84; /* tekst pomocniczy: 2.66 → 4.52 */ --os-tekst:#a85a11; /* pomarańczowy jako tekst: 3.15 → 4.52 */ --os-tekst-duzy:#d27218; /* tekst od 24 px, próg 3:1: 2.57 → 3.04 */ --os-tlo-tekst:#b36114; /* tło pod białym napisem: 2.88 → 4.53 */ } /* Białe napisy na pomarańczowym tle */ .va-nav__add, #btnSearch, .btn-oa--accent, .oa-btn--primary, .os-badge--accent, .badge-accent, .row-card__badge, .oa-card__badge, .oa-promo-badge, .os-card__badge{ background:var(--os-tlo-tekst) !important; } /* Elementy używające koloru marki jako TEKSTU — dziedziczą teraz --orange-600. */ .flt__clear, .oa-eyebrow, .oa-link--accent{color:var(--orange-600) !important;} #cc-accept-btn{background:#d44501 !important;} /* 3.22 → 4.52 */ /* Pomarańczowy jako TEKST — dwa progi, bo dwa rozmiary. Poniżej 24 px obowiązuje 4.5:1. */ .accent{color:var(--os-tekst) !important;} h1 .accent, h2 .accent{color:var(--os-tekst-duzy) !important;} #secType, #miniType{color:var(--os-tekst) !important;} button[data-v]:not(.is-active), .oa-tab:not(.is-active), a.oa-more{color:var(--os-tekst) !important;} /* Opisy SEO pod listą — własna, jaśniejsza szarość tego szablonu. */ .oa-seo-article__body, .oa-seo-article__body p, .oa-seo-article__body li{color:#677183 !important;} .oa-seo-article__title, .oa-seo-article__body h2, .oa-seo-article__body h3{color:#69717d !important;} /* Nagłówki stopki po zmianie poziomu — kolor trzeba podać jawnie, bo reguła `.oa-footer h6` przestaje pasować i nagłówki dziedziczą ciemny `--ink` na granatowym tle. Sprawdzone na otoauta: kontrast spadał do 1.08:1. */ .oa-footer__h{color:#fff;font-family:var(--font-display);font-weight:700; font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px} /* Odnośnik „przejdź do treści" — ukryty, dopóki nie dostanie ogniska klawiaturą. `transform`, nie `display:none`: element ukryty przez `display` nie może dostać ogniska i cały mechanizm przestaje istnieć. */ .oa-skip-nav{position:absolute;left:0;top:0;z-index:10000} .oa-skip{position:absolute;left:8px;top:8px;z-index:10000;padding:12px 18px;border-radius:9px; background:#0e1320;color:#fff;font-weight:600;text-decoration:none; transform:translateY(-140%);transition:transform .15s} .oa-skip:focus{transform:translateY(0);color:#fff;outline:3px solid #e57d1a;outline-offset:2px} .flt__h{font-size:1rem;font-weight:700;margin:0} .cat-card__nazwa{font-size:1rem;font-weight:650;margin:0 0 3px} @media (prefers-color-scheme:dark){ :root{--muted-2:#9aa5b8;--os-tekst:#ff9a4d;--os-tekst-duzy:#ff9a4d;--os-tlo-tekst:#e57d1a;} .oa-seo-article__body,.oa-seo-article__body p{color:#a9b2c1 !important;} .oa-seo-article__title{color:#c4cbd6 !important;} } /* BŁĄD, KTÓRY SAM POPEŁNIŁEM I KTÓRY ZŁAPAŁ POMIAR: `#lstMapBtn` trafił do listy „białych napisów na pomarańczowym tle", a to przycisk z obwódką i POMARAŃCZOWYM tekstem. Nadanie mu pomarańczowego tła dało kontrast 1.12:1 — napis praktycznie zniknął. Przycisk zostaje przezroczysty, poprawiamy wyłącznie kolor tekstu i obwódki. */ #lstMapBtn{background:transparent !important;color:var(--orange-600) !important; border-color:var(--orange-600) !important;} /* Opisy SEO na osiedlo mają przedrostek `os-`, nie `oa-` — pierwsza wersja reguł celowała w cudzy przedrostek i nie robiła nic. Wartości policzone wobec #f3f6fb. */ .os-seo-article__h{color:#666c78 !important;} /* 2.91 → 4.53 */ .os-seo-article__body h2, .os-seo-article__body h3{color:#5f646f !important;} /* 3.27 → 4.52 */ .os-seo-article__body, .os-seo-article__body p, .os-seo-article__body li{color:#666c78 !important;} /* Plakietki na kafelkach ofert: biały napis na `--orange-500`. */ .row-card__badge, .os-offer__badge, .oa-card__tag, [class*="__badge"], .oa-badge--promo, .oa-badge--accent{ background:var(--os-tlo-tekst) !important; } @media (prefers-color-scheme:dark){ .os-seo-article__h,.os-seo-article__body,.os-seo-article__body p{color:#a9b2c1 !important;} .os-seo-article__body h2,.os-seo-article__body h3{color:#c4cbd6 !important;} #lstMapBtn{color:#ff9a4d !important;border-color:#ff9a4d !important;} } /* Tytuł oferty na liście był

zaraz po

— przeskok o poziom. Zmienione na

; rozmiar zostaje bez zmian, żeby układ się nie ruszył. */ .row-card__title{font-size:1.02rem;font-weight:650;margin:0 0 4px} /* Nagłówki sekcji strony agencji: były

po

. Rozmiar utrzymany. */ .dlr-card > h2, .dlr-side h2, #dlrAboutCard > h2{font-size:1.02rem;font-weight:700;margin:0 0 10px} /* Zakładki kategorii na stronie agencji. DRUGI RAZ TEN SAM BŁĄD, KTÓRY ZŁAPAŁ POMIAR: pierwsza wersja nadała wszystkim `button[data-t]` pomarańczowy TEKST, nie sprawdzając, że aktywna zakładka ma pomarańczowe TŁO — wyszło 1.76:1, czyli napis zlał się z tłem. Wniosek na przyszłość: przy kontraście nigdy nie ustawiać samego koloru tekstu bez sprawdzenia, co jest pod spodem. Aktywna: białe na przyciemnionym pomarańczu. Nieaktywna: pomarańczowy tekst na jasnym. */ button[data-t]:not(.active):not(.is-active){color:var(--orange-600) !important;background:transparent !important;} button[data-t].active, button[data-t].is-active, .dlr-cat.active{background:var(--os-tlo-tekst) !important;color:#fff !important;} /* Licznik wewnątrz aktywnej zakładki miał jaśniejsze tło (#ea9443) niż sama zakładka. */ .dlr-cat.active .cnt, button[data-t].active .cnt{background:#8a4a0f !important;color:#fff !important;} /* Przycisk „Pokaż więcej” — 4.32:1, brakowało niecałych dwóch dziesiątych. */ .btn-outline-secondary{color:#5c646c !important;border-color:#5c646c !important;} /* SPECYFICZNOŚĆ ZAMIAST KOLEJNOŚCI — dopisane 2026-08-04. Strona główna osiedlo nie dołącza `inc/header.php`, więc arkusz trafia tam tylko do i przegrywa z blokami