/* Stopka — arkusz `footer.php`. * * Przepisane z klas Tailwinda `FooterVariant3.tsx`, wartości co do piksela. * Jedna reguła wyrównania na wszystkich szerokościach: środek (decyzja * właściciela z 29.07.2026, podjęta na zrzucie). */ .szewko-stopka { position: relative; background: var(--color-smoked-tent); /* Róża wiatrów — znak wodny na 3% krycia, pod treścią. */ & .szewko-stopka__roza { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.03; pointer-events: none; & svg { width: 600px; height: 600px; } } /* Ziarno — ten sam szum co na falach wydm, przez data URI. Tło, nie element: nakładka ma leżeć nad kolorem, a pod treścią. */ & .szewko-stopka__ziarno { position: absolute; inset: 0; opacity: 0.06; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-size: 400px 400px; } & .szewko-stopka__srodek { position: relative; max-width: 1200px; margin: 0 auto; padding: 56px var(--space-lg) 48px; @media (min-width: 768px) { padding: 80px 48px 48px; } @media (min-width: 1024px) { padding-right: 80px; padding-left: 80px; } } /* ─── Marka ───────────────────────────────────────────────── */ & .szewko-stopka__marka { margin-bottom: 48px; text-align: center; & img { width: 112px; height: 112px; margin: 0 auto 20px; object-fit: contain; } } & .szewko-stopka__nazwa { margin-bottom: 12px; font-family: var(--font-display); font-size: 1.5rem; color: var(--color-parchment); } & .szewko-stopka__haslo { max-width: 28rem; margin: 0 auto; font-family: var(--font-accent); font-size: 1rem; font-style: italic; line-height: 1.625; color: var(--color-sand-gold); } & .szewko-stopka__spolecznosci { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); margin-top: 32px; padding: 0; list-style: none; & a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; border: 1px solid color-mix(in srgb, var(--color-sand-gold) 30%, transparent); border-radius: var(--radius-full); color: var(--color-sand-gold); transition: color 200ms var(--ease-desert), border-color 200ms var(--ease-desert); &:hover { border-color: var(--color-sand-gold); color: var(--color-parchment); } } } /* Ozdoba między blokami — płytsza fala niż separator sekcji. */ & .szewko-stopka__fala { display: block; width: 100%; height: 24px; margin: var(--space-xl) 0; } /* ─── Cztery kolumny ──────────────────────────────────────── */ /* ⚠︎ **BYŁY TRZY DO 19.08.2026.** Dokumenty prawne wyszły z kolumny „Karawana" do własnej (`C3-10`, decyzja właściciela z 14.08) — szczegóły przy `stopka-dokumenty` w `inc/nawigacja.php`. Trzy progi, nie dwa, i środkowy jest tu koniecznością, nie ozdobą: < 768px jedna kolumna — bez zmian ≥ 768px DWIE kolumny — cztery nie mieszczą się w 672px treści: (672 − 3×32) / 4 = 144px na kolumnę, a samo „Zwroty i reklamacje" ma przy 13px Literaty ~130px i łamałoby się w każdym wierszu ≥ 1024px cztery kolumny — (864 − 3×32) / 4 = 192px, mieści się Ostatnia kolumna dostaje 1,4fr, bo nie jest listą linków tylko formularzem: `.szewko-depesze__formularz` ma `max-width: 280px` i przy równych czterech kolumnach (236px przy 1440px) kurczyłby się bez powodu, podczas gdy trzy kolumny obok zostawiały niewykorzystane pasy. Przy 1440px daje to kolumnom linków 214px, a depeszom 300px — pole staje w swojej szerokości projektowej. ⚠︎ To NIE jest hierarchia wizualna, tylko rachunek szerokości; nie przenoś tej wagi na inne siatki motywu. */ & .szewko-stopka__kolumny { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); } @media (min-width: 1024px) { grid-template-columns: repeat(3, 1fr) 1.4fr; } } & .szewko-stopka__kolumna { text-align: center; & ul { padding: 0; list-style: none; @media (min-width: 768px) { & li + li { margin-top: 4px; } } } } & .szewko-stopka__etykieta { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-bottom: 20px; & span { width: 20px; height: 1px; background: var(--color-sand-gold); } /* 12px, nie 11 — etykieta rośnie razem z listą pod nią (11.08.2026). Wysokość wersalika 0,7 em, więc 11px dawało 7,7px realnego rysunku litery przy rozstrzeleniu 0,14 em. Przy linkach podniesionych do 15px etykieta przestawała czytać się jako nagłówek kolumny i zaczynała jako podpis pod czymś. T8 (12.08.2026) — Cinzel → Literata. ⚠︎ To był NAJMNIEJSZY Cinzel w całym motywie: 12 px, czyli mniej niż połowa progu „≥ 26 px" z jego własnego komentarza przy `--font-display`. Naprawianie kafli 13 px z pominięciem tych 12 px byłoby niespójne, więc wchodzi razem z nimi, choć „nagłówek kolumny" nie jest ani kaflem, ani nadtytułem. ⚠︎ Waga 700 dopisana JAWNIE: reguła jej nie miała i opierała się na domyślnej pogrubionej wadze `h2` przeglądarki. Zostaje to samo 12 px — wysokość wersalika obu krojów jest praktycznie równa (0,72 wobec 0,70), więc rozmiar widziany okiem się nie zmienia. */ & h2 { font-family: var(--font-ui); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-sand-gold); } } /* ODSTĘP MIĘDZY LINKAMI NA MOBILE: ZERO, nie 8px. * * Reguła „cele dotykowe min. 44×44 z odstępem min. 8px" jest napisana pod * kontrolki stojące OBOK siebie (stepper, paginacja), gdzie sąsiedni cel da * się trafić pomyłkowo. Przy linkach ułożonych w pionie na pełną szerokość * kolumny robi coś odwrotnego: 8px szpary to pas, w który można kliknąć * i NIE trafić w nic. Zerowy odstęp przy pudełkach 44px kasuje cztery takie * martwe pasy na kolumnę. * * Cel 44px zostaje tylko do `md` — to sprawa dotyku, nie wyrównania. * Na wskaźniku wracają zwarte 26px ze zrzutu; pełne 44px w dwóch kolumnach * po pięć pozycji dokłada stopce około 200px wysokości. * * ⚠︎ **LICZBA PO PRZELICZENIU. Nie dobieraj jej osobno.** Historia, bo bez * niej każda kolejna korekta wygląda na cofanie cudzej poprawki. Etap „14px" * opisany niżej **został zastąpiony przez T6** — obowiązująca wartość i jej * uzasadnienie stoją na końcu tego komentarza: * * 13px stan wyjściowy portu * 15px podniesione tego samego dnia, żeby nadrobić niską wysokość x * Crimson Pro (0,42) — 13px czytało się wtedy jak 10,7px * 14px po pakiecie 0: `--font-ui` to **Literata (x 0,51)**, więc tamta * kompensacja liczyła się DRUGI RAZ — 15px dawało ekw. 15,3 zamiast * zamierzonych 12,4. 14px to ekw. **14,3**, czyli szczebel * `pomocniczy` skali z `docs/TYPOGRAFIA.md` §4 i dokładnie to pasmo, * w którym stopki stoją normalnie. * * Optycznie jest to więc dalej WYRAŹNIE więcej niż przed 11.08, mimo że sama * liczba spadała. Pasek nawigacji stoi na tym samym rachunku i przelicza się * razem z tą regułą — dziś **14px**, po korekcie T6 (było 16px; ekw. 16,3 * dawało linkom paska rozmiar akapitu). * * Kontrast NIE był problemem i nie ruszamy krycia: Parchment przy 0,75 na * wyrenderowanym tle stopki (`rgb(33, 21, 12)`, czyli Smoked Tent z ziarnem) * daje **8,75 : 1**, z ogromnym zapasem ponad 4,5 : 1. * * ⚠︎ **13px — DECYZJA T6 z 11.08.2026, trzecia i ostatnia korekta tej liczby.** * Dopisek do historii wyżej: * * 13px stan wyjściowy portu (Crimson Pro, ekw. 10,7) * 15px kompensacja niskiej wysokości x Crimson Pro * 14px po pakiecie 0 — kompensacja liczyła się drugi raz * 13px **T6** — nawigacja dostała własny szczebel * * Powód jest inny niż przy poprzednich dwóch i nie ma z nimi nic wspólnego: * skala §4 przypisuje szczeble RODZAJOM tekstu, a **nawigacji nie przypisała * żadnego**. Linki stopki to nawigacja WTÓRNA, więc stoją oczko niżej niż * pasek (14px, ekw. 14,3). 13px Literaty to ekw. **13,3** — między `mikro` * a `pomocniczy`, z zapasem 1,3 nad podłogą czytelności. * * ⚠︎ **Ta sama liczba co w porcie, ale NIE ten sam rozmiar.** Wtedy 13px * znaczyło ekw. 10,7 (Crimson Pro, x 0,42), dziś znaczy 13,3 (Literata, * x 0,51) — czyli **o 24 % więcej**, mimo identycznego zapisu w CSS. Kto * porównuje te dwie reguły po samej liczbie, wyciągnie błędny wniosek. * * ⚠︎ **Wyściółka rośnie z 10px na 11px i to nie jest ozdoba, tylko warunek * progu dotykowego.** Wiersz ma 13 × 1,8 = 23,4px, więc przy 10px cel miałby * 43,4px — poniżej 44px, których ten projekt pilnuje wszędzie indziej. * 2 × 11 + 23,4 = **45,4px**. Zmniejszenie rozmiaru MUSI iść w parze * ze zwiększeniem wyściółki, inaczej łamie próg dotykowy. * * Nagłówek kolumny zostaje na **12px Cinzela** i to jest sprawdzone, nie * przeoczone: wersalik Cinzela to 0,72 (nie 1,035 — patrz sprostowanie * w `docs/TYPOGRAFIA.md` §2), więc litery mają 8,6px wobec 6,6px wysokości x * linku pod nimi. Nagłówek dalej góruje nad listą o 30 %. */ & .szewko-stopka__kolumna a { display: block; padding: 11px 0; font-family: var(--font-ui); font-weight: 600; font-size: 13px; line-height: 1.8; color: var(--color-parchment); text-decoration: none; opacity: 0.75; transition: opacity 200ms var(--ease-desert), color 200ms var(--ease-desert); &:hover { color: var(--color-sand-gold); opacity: 1; } /* ⚠︎ **Cel dotykowy — RÓŻNICA MIĘDZY SZEROKOŚCIAMI JEST TU CAŁĄ SPRAWĄ.** Poniżej 768 px link jest `block` z wyściółką 11 px, więc ma **45,39 px** i próg przechodzi z zapasem (rachunek stoi w komentarzu wyżej). Gałąź niżej zdejmuje wyściółkę dla układu kolumnowego — i wtedy zostaje sama interlinia, czyli 13 × 1,8 = **23,39 px**. Zmierzone 21.08.2026 na `/` przy 1440 px: **16 z 16 odnośników pod progiem**, nie sześć z jednej kolumny, jak zapowiadał wpis rejestru. Próg to **24 × 24 px** — WCAG 2.2, SC 2.5.8, poziom AA (44 px to SC 2.5.5, czyli AAA). Wyjątek „link w zdaniu" tu nie broni: to jest **lista nawigacyjna**, czyli zbiór celów jeden pod drugim. Wzorzec jest domowy i sprawdzony — nakładka na `::before` (`PORT.md` §2d, `base.css` przy okruszkach). Jest `absolute`, więc **nie zajmuje miejsca w układzie** i wysokość kolumn nie drgnie. ⚠︎ **`inset-block: 0`, a NIE `-3px` jak przy okruszkach — i to nie jest niedbalstwo.** Odstęp między odnośnikami kolumny wynosi **5 px** (zmierzone). Rozciągnięcie o 3 px w obie strony daje 6 px na parę, czyli **cele sąsiednich linków zaczęłyby na siebie nachodzić** i kliknięcie w szparę trafiałoby w losowy z dwóch. Okruszki tego problemu nie mają, bo stoją w jednym wierszu obok siebie. Zamiast tego pracuje sam `min-height`: przy `inset-block: 0` i wysokości większej niż pole przeglądarka **ignoruje `inset-block-end`**, więc pudełko rośnie w dół od górnej krawędzi — dokładnie 24 px, odstęp zostaje 4,39 px. To ta sama właściwość, przed którą `base.css` ostrzega przy `top` + `height`; tutaj jest użyta celowo, jako podłoga rosnąca razem z wierszem. ⚠︎ **Jeden odnośnik stopki ZOSTAJE pod progiem i to jest rozstrzygnięcie, nie przeoczenie:** „Polityka prywatności" w nocie zgody pod formularzem depesz ma **17 px na obu szerokościach**. Stoi **w zdaniu**, na końcu akapitu `.szewko-depesze__zgoda` — czyli w dokładnie tym przypadku, który SC 2.5.8 wyłącza wprost („target is in a sentence"). Nakładka zrobiłaby tam **szkodę**: rozciągnięta ponad wiersz przejęłaby kliknięcia w tekst zgody nad nią. Należy też do arkusza partu (`depesze-formularz.css`), nie tego. */ @media (min-width: 768px) { display: inline-block; padding: 0; position: relative; &::before { content: ""; position: absolute; inset-block: 0; inset-inline: 0; min-height: 24px; } } } /* ─── Depesze (newsletter) ────────────────────────────────── */ & .szewko-stopka__depesze { /* Zapas pod przyklejony pasek nawigacji dla kotwicy `#newsletter`. */ scroll-margin-top: 96px; } /* ⚠︎ Reguły pola, przycisku, zachęty i notki PRZENIOSŁY SIĘ 13.08.2026 do `assets/css/depesze-formularz.css` — razem ze znacznikiem, który w N5 stał się partem. Nie odtwarzaj ich tutaj: arkusz partu jedzie tylko wtedy, gdy part się renderuje, a reguła bez znacznika jest martwym bajtem na każdej odsłonie witryny. Pomiary kontrastu i typografii pojechały tam razem z uzasadnieniem. */ /* ─── Pasek dolny ─────────────────────────────────────────── */ & .szewko-stopka__dol { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid color-mix(in srgb, var(--color-sand-gold) 20%, transparent); @media (min-width: 768px) { flex-direction: row; justify-content: space-between; } } & .szewko-stopka__prawa { order: 2; font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-parchment); text-align: center; opacity: 0.6; @media (min-width: 768px) { order: 1; text-align: left; } } /* Znaki płatności na jasnych płytkach — uzasadnienie w `footer.php`. */ & .szewko-stopka__platnosci { display: flex; order: 1; align-items: center; gap: 10px; padding: 0; list-style: none; @media (min-width: 768px) { order: 2; } & li { display: flex; align-items: center; justify-content: center; height: 32px; padding: 0 10px; border-radius: var(--radius-sm); background: var(--color-parchment); } & img { width: auto; height: 16px; object-fit: contain; } } }