/* ========================================================================= KOTY (etap 1, 2026-10-01) — elementy kocie wspólne dla wielu stron: link do drugiego gatunku pod wyszukiwarką, blok startowy /hodowla-kotow, blok „Koty rasowe” na stronie głównej, kolumna w stopce. Ładowany WYŁĄCZNIE przy włączonych kotach (head.twig: kotyNawigacja()). Przy wyłączonych kotach psie strony nie dostają ani tego pliku, ani żadnej kociej klasy — bajt w bajt jak przed kotami. ⛔ Wszystkie reguły w przestrzeni klas `.koty-*` i `.gatunek-link`: plik stoi obok app.css na każdej stronie, więc reguła na gołym elemencie (a, h1, img) zmieniłaby psie strony. Wzór wyglądu: makiety v4 (Koty-projekt/makiety, hodowla-kotow-v4.html, home-a-v4.html). Paleta CI: fiolet #3D0195, żółty #FFBA27 z fioletowym tekstem (kontrast ok. 6,6:1), biały na fiolecie. ========================================================================= */ /* --- link do drugiego gatunku pod paskiem wyszukiwarki (M2, K1 = A) ----- */ /* Ta sama kolumna co pola paska wyszukiwarki (.l4d-search-bar: padding 16 px, treść 1180 px) — odbiór UX P4: link był przesunięty o 16 px (1366) i 4 px (375). */ .gatunek-link { box-sizing: border-box; max-width: 1212px; margin: 0 auto; padding: 0 16px 6px; font-size: 14px; line-height: 1.3; } .gatunek-link a { display: inline-flex; align-items: center; min-height: 44px; /* cel dotyku (WCAG 2.5.5, UX2d 16.09) */ color: #3D0195; font-weight: 700; text-decoration: underline; } /* fokus: fiolet na bieli 12,8:1 (żółty #FFBA27 dawał 1,6:1 — odbiór UX D2) */ .gatunek-link a:focus-visible { outline: 3px solid #3D0195; outline-offset: 2px; } /* --- blok startowy /hodowla-kotow (kot-n: do progu 50 hodowli) ---------- */ .koty-hero { position: relative; overflow: hidden; background: #3D0195; color: #fff; margin-bottom: 24px; /* odstęp od filtra ceny (odbiór UX P4: było 0 px) */ } .koty-hero__tlo { position: absolute; inset: 0; background: radial-gradient(1100px 420px at 12% 0%, rgba(88, 22, 185, .95), transparent 70%), radial-gradient(700px 380px at 92% 100%, rgba(242, 126, 91, .42), transparent 68%), linear-gradient(120deg, #2c026c 0%, #3D0195 45%, #5816b9 100%); } /* Szerokość i wcięcie daje klasa .wrapper z app.css — ta sama kolumna co lista hodowli pod spodem (odbiór UX P4: blok zaczynał się 26 px dalej). */ .koty-hero__srodek { position: relative; padding-top: 44px; padding-bottom: 44px; } .koty-hero__h1 { margin: 0; font-size: clamp(25px, 5.4vw, 40px); line-height: 1.2; font-weight: 700; letter-spacing: -.6px; color: #fff; } .koty-hero__lead { margin: 12px 0 6px; max-width: 720px; font-size: clamp(15px, 2.4vw, 18px); line-height: 1.5; color: #fff; } .koty-hero__fed { margin: 0; font-size: clamp(13px, 2.2vw, 15px); line-height: 1.5; color: #e2d6f7; /* na #3D0195 ok. 10:1 */ } .koty-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .koty-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px; border-radius: 24px; font-size: 15px; font-weight: 700; text-decoration: none; box-sizing: border-box; } .koty-btn--zolty { background: #FFBA27; color: #3D0195; } .koty-btn--zolty:hover { background: #fab740; } .koty-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* --- blok „Koty rasowe” na stronie głównej ------------------------------ */ .koty-blok { box-sizing: border-box; max-width: 1180px; margin: 0 auto; padding: 32px 16px 8px; } .koty-blok__tytul { margin: 0 0 14px; font-size: clamp(20px, 3.6vw, 27px); line-height: 1.2; font-weight: 700; color: #3D0195; } .koty-blok__linki { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .koty-blok__linki a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 22px; border: 1.5px solid #3D0195; background: #fff; color: #3D0195; font-size: 14.5px; font-weight: 700; text-decoration: none; box-sizing: border-box; } .koty-blok__linki li:first-child a { background: #3D0195; color: #fff; } .koty-blok__linki a:focus-visible { outline: 3px solid #3D0195; outline-offset: 2px; } /* P5: „wszystkie rasy kotów →” z celem dotyku 44 px */ #s-koty .sec__more { display: inline-flex; align-items: center; min-height: 44px; } /* --- M11: menu górne z pozycją „Koty” (strony psie) / koci nagłówek ------ Pomiar na produkcji 01.10 (prototyp DOM, nagłówek po hotfiksie 93d98c7): psie menu + „Koty” — PL 25 px zapasu, EN 55, ale DE −7, ES −18, RU −8, UK 12. Ten arkusz ładuje się tylko przy włączonych kotach, więc dodatkowe ściśnięcie (padding 6 → 4 px, czcionka 13,5 → 13 px) dotyczy wyłącznie DE/ES/RU/UK z włączonymi kotami. Po zmianie: DE 35, ES 24, RU 28 px; koci nagłówek ≥ 70 px. `body` w selektorze: blok