/** * Formularz zapisu na depesze — kolumna „Depesze" w stopce. * * Arkusz partu `template-parts/depesze-formularz.php`. Reguły pola i przycisku * są PRZENIESIONE z `footer.css` (blok „Depesze") razem z ich pomiarami: atrapa * zeszła w N5, więc tamte selektory zostałyby regułami bez znacznika. Pomiary * kontrastu i typografii z 11.08.2026 obowiązują dalej i dlatego jadą tu razem * z uzasadnieniem — bez niego następny czat „poprawi" je z powrotem. * * ⚠︎ Tło kolumny to STOPKA, czyli Smoked Tent z białym ziarnem 0,06 — renderuje * się jako rgb(33, 21, 12), nie rgb(28, 16, 7). Wszystkie progi kontrastu niżej * są liczone na wartości WYRENDEROWANEJ. */ .szewko-depesze__zacheta { /* 13px, nie 12 — kolumna „Depesze" stoi w rzędzie z dwiema kolumnami linków i jako jedyna zostawała przy starym stopniu. Po pakiecie 1 linki mają 14px (ekw. 14,3), a to zdanie 13px Source Serif 4 (ekw. 12,9) — nad podłogą i pół szczebla niżej niż nawigacja, czyli tam, gdzie ma być. */ max-width: 240px; margin: 0 auto var(--space-md); /* ⚠︎ PONIŻEJ 768px KOLUMNA IDZIE NA PEŁNĄ SZEROKOŚĆ — decyzja właściciela z 18.09.2026, ŚWIADOME ODEJŚCIE OD PROJEKTU, nie naprawa transkrypcji. Design ma tu `max-w-[240px] mx-auto` (i 280px przy formularzu niżej) na każdej szerokości, a port odwzorowywał to co do piksela — zmierzone na 390px: kolumna „Depesze" 24–366 jak sąsiednie, ale zdanie 75–315 i formularz 55–335, czyli 51 i 31 px luzu z każdej strony. Powód zmiany: na telefonie kolumny stopki stoją JEDNA POD DRUGĄ, więc wyśrodkowany bilecik 280px sąsiaduje z linkami na pełne 342px i czyta się jako nierówna lewa krawędź, a nie jako forma. Na desktopie kolumna ma jedną trzecią z 1200px i ten sam bilecik jest tam formą — dlatego reguła jest w `max-width`, a nie zdejmuje ograniczenia wszędzie. */ @media (max-width: 767px) { max-width: none; } font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-parchment); opacity: 0.7; } .szewko-depesze__formularz { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 280px; margin: 0 auto; /* Pełna szerokość kolumny na telefonie — rachunek i powód stoją przy `.szewko-depesze__zacheta` wyżej; obie wartości schodzą razem, bo jedna bez drugiej daje dwie różne lewe krawędzie w tej samej kolumnie. ⚠︎ `.szewko-depesze__zgoda` NIE potrzebuje własnej reguły — jest wewnątrz formularza i szerokość dziedziczy. */ @media (max-width: 767px) { max-width: none; } /* ⚠︎ Obrys niesie 3:1 jako element nietekstowy (WCAG 1.4.11), a Sand Gold 30 % dawał 1,38:1 — pole było praktycznie bez krawędzi. Bleached Linen 45 % daje 3,50:1; Sand Gold trzeba by podnieść aż do 55 %, żeby dobić do 3,32:1, więc len wygrywa nie tonacją, tylko zapasem nad progiem. ⚠︎ Pomiar pikselowy 17.09.2026 mówi **3,36:1**, nie 3,50 — wyliczenie szło na tle tokenowym, a wyrenderowana stopka jest jaśniejsza. Próg 3:1 dalej przechodzi z zapasem 12 %, więc nie ruszam krycia; liczba jest tu po to, żeby następny czat nie sprawdzał tego trzeci raz. */ & input[type='email'] { width: 100%; padding: 12px var(--space-md); border: 1px solid color-mix(in srgb, var(--color-bleached-linen) 45%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-smoked-tent) 40%, transparent); color: var(--color-parchment); font-size: 0.875rem; text-align: center; transition: border-color 200ms var(--ease-desert); /* Sand Gold przy kryciu 0,5 dawał 3,72:1. Pergamin przy tym samym kryciu miał dać 4,63:1 — podpowiedź jest tekstem i obowiązuje ją 4,5:1. ⚠︎ 0,55, NIE 0,5 — i to nie jest zaokrąglanie w górę „na wszelki wypadek". Wyliczenie 4,63 liczyło na tle TOKENOWYM. Pomiar pikselowy na żywym renderze (17.09.2026, `/produkcja grafika`, poz. 18) dał **4,49:1 na 1440 px** i 4,52 na 390 px — czyli podpowiedź siedziała DOKŁADNIE na progu i przy najmniejszej zmianie tła spadała pod niego. Powód rozjazdu to ta sama pułapka, co przy fali wydmy: tło pola renderuje się jako rgb(30, 18, 10), a nie jako `color-mix()` policzony na rgb(28, 16, 7). 0,55 daje **5,28:1**, czyli zapas, a próg krycia Pergaminu z nagłówka `tokens.css` (nie niżej niż 50 %) zostaje dotrzymany. */ &::placeholder { color: var(--color-parchment); opacity: 0.55; } &:focus { border-color: var(--color-sand-gold); outline: none; } &[aria-invalid='true'] { border-color: var(--color-terracotta-light); } &:disabled { opacity: 0.6; } } /* `padding` 12px, nie 10px: na 390px pole miało 42px, a przycisk 40px — obie wartości poniżej progu 44×44, którego ten projekt pilnuje wszędzie indziej. Różnica to 4px na element, więc wygląd ze zrzutu zostaje, a próg jest dotrzymany. */ & button[type='submit'] { width: 100%; padding: 12px var(--space-md); border: 0; border-radius: var(--radius-sm); background: var(--color-desert-rust); color: var(--color-parchment); font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: background-color 200ms var(--ease-desert); &:hover:not(:disabled) { background: color-mix(in srgb, var(--color-desert-rust) 82%, black); } &:disabled { cursor: not-allowed; opacity: 0.55; } } } /* ─── Treść zgody ───────────────────────────────────────────── ⚠︎ To NIE jest notka i nie wolno jej przyciemnić do krycia notki. Zapis ze stopki nie ma checkboxa, a warunkiem, na którym stoi ta decyzja, jest WIDOCZNOŚĆ treści zgody przy przycisku (`zgody.md` §3.1). Zdanie ściemnione do 0,7 przestaje być „widoczne przy przycisku" i przewraca całą podstawę prawną tej drogi zapisu. Krycie 0,8 daje Pergaminowi na wyrenderowanej stopce 10,0:1 — próg dla tekstu to 4,5:1, więc zapas jest ponaddwukrotny. */ .szewko-depesze__zgoda { font-family: var(--font-body); /* ⚠︎ 12,5px, nie 12 — i połówka piksela ma tu powód. Tabela §4 `docs/TYPOGRAFIA.md` podaje dla Source Serif 4 na szczeblu `mikro` „12 px", ale jest to zaokrąglenie 12,12: przy x 0,495 równe 12px daje ekw. 11,88, czyli o włos PONIŻEJ podłogi czytelności. 12,5px daje 12,4. */ font-size: 12.5px; line-height: 1.45; color: var(--color-parchment); opacity: 0.8; text-align: left; } /* ⚠︎ TRZY KLASY, I TO NIE JEST OZDOBNIK — to ta sama pułapka, którą `CLAUDE.md` opisuje przy fali wydmy, tylko na odnośniku. Kolumna „Depesze" nosi klasę `szewko-stopka__kolumna`, więc odnośnik do polityki łapie się na `.szewko-stopka .szewko-stopka__kolumna a` (0-2-1) z `footer.css` — regułę pisaną pod LINKI NAWIGACYJNE stopki. Zdanie zgody dostawało przez to `display: block`, `padding: 11px 0`, `font-weight: 600` i `text-decoration: none`, czyli rozpadało się na akapit plus doklejony kafelek, a odnośnik przestawał wyglądać na odnośnik. Widać to było na zrzucie 390 px jako pustą przerwę przed „Polityka prywatności". `.szewko-depesze__zgoda a` (0-1-1) przegrywało. Remis (0-2-1) też jest za mało: rozstrzygałaby wtedy kolejność arkuszy, a ta zależy od tego, że part renderuje się po `wp_head()` — czyli od rzeczy, która nie jest o wyglądzie. Stąd 0-3-1 i wygrana wprost. ⚠︎ Własności trzeba ZDJĄĆ jawnie, nie tylko dopisać kolor — dziedziczą się z tamtej reguły, a nie z niczego. */ .szewko-stopka .szewko-stopka__depesze .szewko-depesze__zgoda a { display: inline; padding: 0; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; opacity: 1; /* Sand Gold na wyrenderowanej stopce daje 7,0:1 — odnośnik jest tekstem, więc obowiązuje go 4,5:1. Podkreślenie zostaje, bo sam kolor nie jest dopuszczalnym jedynym wyróżnikiem odnośnika w akapicie (WCAG 1.4.1). */ color: var(--color-sand-gold); text-decoration: underline; &:hover { color: var(--color-parchment); } } /* Notka gałęzi awaryjnej — TA wolno być cichsza, bo objaśnia stan formularza, a nie niesie oświadczenia woli. */ .szewko-depesze__notka { font-family: var(--font-body); font-size: 12.5px; line-height: 1.45; color: var(--color-sand-gold); opacity: 0.7; } /* ─── Honeypot ──────────────────────────────────────────────── ⚠︎ Nie `display: none` i nie atrybut `hidden` — pola schowanego w ten sposób bot zwykle nie wypełnia, a wtedy pułapka nie łapie niczego. Wyprowadzamy je poza kadr, zostawiając w układzie i w drzewie. */ .szewko-depesze__zapora { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .szewko-depesze__turnstile:not(:empty) { display: flex; justify-content: center; } /* ─── Komunikat ─────────────────────────────────────────────── Węzeł istnieje zawsze (czytniki ekranu ogłaszają zmianę treści ISTNIEJĄCEGO obszaru `role="status"`), więc pusty nie może zbierać odstępu ani obrysu. */ .szewko-depesze__komunikat { font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.45; color: var(--color-parchment); text-align: left; &:empty { display: none; } } /* Błąd: tekst niesie Terracotta rozjaśniona (5,2:1 na Smoked Tencie). ⚠︎ Samej `--color-terracotta` tu użyć NIE WOLNO — daje 1,8:1. */ .szewko-depesze__formularz[data-stan='blad'] .szewko-depesze__komunikat { color: var(--color-terracotta-light); } /* Sukces: ⚠︎ zapis skończony, więc pole i przycisk SCHODZĄ — zostawienie ich zaprasza do wpisania adresu drugi raz, co przy double opt-in wysyła drugą prośbę o potwierdzenie i wygląda jak usterka. Zgoda schodzi razem z nimi: nie ma już czego oświadczać, a zdanie „wypisujesz się jednym kliknięciem" pod komunikatem „sprawdź skrzynkę" czyta się jak zachęta do rezygnacji z rzeczy, której jeszcze nie ma. */ .szewko-depesze__formularz[data-stan='sukces'] { & input[type='email'], & button[type='submit'], & .szewko-depesze__zgoda, & .szewko-depesze__turnstile { display: none; } & .szewko-depesze__komunikat { padding-left: var(--space-sm); /* Kreska jest elementem NIETEKSTOWYM, więc obowiązuje ją 3:1 — Oasis Green rozjaśniona daje 3,9:1. Tekst obok niesie Pergamin, nie zieleń: `--color-oasis-green-light` na tekście dałaby 3,9:1 przy wymaganych 4,5:1. */ border-left: 2px solid var(--color-oasis-green-light); } }