/* Fala wydmy na styku sekcji — arkusz template partu `dune-divider.php`. * * Sama geometria SVG siedzi w atrybutach znacznika, nie tutaj: arkusz partu * kolejkuje się po `wp_head()`, więc dochodzi ze stopką, a fala musi mieć * właściwy rozmiar od pierwszej klatki. Tutaj zostaje wyłącznie to, co dotyczy * UMIESZCZENIA fali względem sekcji. */ .szewko-dune-divider { /* `line-height: 0` na opakowaniu — inaczej pod inline'owym SVG zostaje kilkupikselowy pasek na zejście linii bazowej i styk przestaje być szczelny. Wartość jest też w atrybucie `style`, żeby działała bez tego arkusza. */ line-height: 0; & svg { display: block; /* ⚠︎ **JEDEN PIKSEL W DÓŁ — przeciwko włosowi pod falą z jawnym `from`.** * * Fala z podanym `from` maluje tło na OPAKOWANIU, a rysunek stoi na nim * jako SVG. Przy gęstości ekranu 1,25 i 1,5 opakowanie i SVG zaokrąglają * się do różnych pikseli urządzenia i w ostatnim wierszu zostaje tło * opakowania zamiast wypełnienia ścieżki — czyli **ciemna kreska * w kolorze sekcji wychodzącej** dokładnie tam, gdzie fala ma wprowadzać * w kolor sekcji następnej. Zmierzone na styku rejestr → „O Szewko”: * odchylenie 23,0 przy DPR 1,5, przy 3–4 na pozostałych stykach. * * Ujemny margines skraca opakowanie o piksel i wypuszcza pod nie dolny * wiersz rysunku — a ten jest pełnym wypełnieniem w kolorze sekcji * docelowej, więc zakrycie jest niewidoczne. Reguła dopełnia * `section + section { margin-top: -1px }` ze `strona-glowna.css`: * tamta zamyka szew MIĘDZY sekcjami, ta — szew WEWNĄTRZ fali. */ margin-bottom: -1px; } /* ═══════════════════════════════════════════════════════════════════════ WIDOK WĄSKI — jedyne miejsce, w którym fala przestaje być proporcjonalna. ═══════════════════════════════════════════════════════════════════════ ⚠︎ **Jeden `@media` na obie poprawki i to jest celowe.** Wysokość i długość falowania mają wspólny próg, a rozdzielone na dwa bloki rozjechałyby się przy pierwszej korekcie jednej z nich — dokładnie tak, jak rozjechał się wzór `szerokość / 18` przepisany do sześciu arkuszy. ─── 1. PODŁOGA WYSOKOŚCI (D71a, 08.08) ──────────────────────────────── * * Powyżej 1008 px nie ma tu żadnej reguły i wysokość liczy się tak jak od * fali 0.7: z `viewBoxa 1440×80` i `svg { height: auto }` w `base.css`, * czyli `szerokość elementu / 18`. Desktop jest przez to nietknięty co do * piksela — a to warunek, bez którego tej zmiany nie dałoby się wprowadzić, * bo każdy styk witryny jest obejrzany i zatwierdzony w tamtym wyglądzie. * * Poniżej 1008 px fala dostaje 56 px na sztywno. Powód nie jest estetyczny * tylko percepcyjny: rysunek fali jest NIEZMIENNICZY wobec skali (trzy * falowania na szerokość, wychylenie stale 27,0 % wysokości), więc na * telefonie nie płaszczeje — kurczy się. Przy 368 px wychylenie schodzi do * 5,5 px, czyli poniżej jednej trzeciej wiersza pisma, podczas gdy tekst, * odstępy i kadry obok zostają tej samej wielkości. Wydma przegrywa z nimi * i czyta się jak kreska. Podłoga 56 px podnosi wychylenie do 15,1 px. * * PRÓG 1008 px = 56 × 18, czyli dokładnie ta szerokość, przy której * proporcja sama dochodzi do podłogi. Dzięki temu przejście jest ciągłe: * po obu stronach progu fala ma te same 56 px i nie ma skoku. * ⚠︎ Zmiana `--fala-podloga` wymaga zmiany TEJ liczby — `@media` nie czyta * zmiennych. Reszta motywu bierze wysokość z `--fala-h` w `tokens.css` * i przelicza się sama. * * Odrzucone: `height: var(--fala-h)` bez progu. `--fala-h` liczy ze `100vw`, * czyli razem z paskiem przewijania, a fala jest szeroka na element — * na desktopie dokładałoby to ~0,8 % wysokości wszystkim stykom naraz. * Zapas na szew owszem, ale nie w zamian za „desktop bez zmian”. * * Historia: 80 px na sztywno (jak w komponencie Reacta) odrzucone w D71, * bo przy 390 px daje pas wysoki na 80 px pod treścią szeroką na 390. * Podłoga jest środkiem, którego wtedy nie było na stole — rewizja D71 * z 08.08.2026, rozpisanie w `PO-PORCIE.md` §D. * ─── 2. DŁUGOŚĆ FALOWANIA (D71b, 10.08) ──────────────────────────────── Podłoga naprawiła amplitudę i zostawiła drugą połowę problemu. Ścieżka mieści **2,7 falowania** na szerokość viewBoxa, a `preserveAspectRatio="none"` ściska ją do szerokości ekranu bez względu na to, jaka ta szerokość jest: przy 1440 px jedno falowanie ma 540 px, przy 404 px — 151 px. Stromizna rośnie przez to **2,75 ×** względem desktopu i wydma czyta się jak falbana. ⚠︎ Kształt jest wtedy za GĘSTY, nie za płaski — to jest ta pomyłka, przez którą naprawa idzie odruchowo w wysokość, czyli w złą stronę. Naprawa: rozciągamy rysunek SZERZEJ niż ekran i przycinamy nadmiar, czyli zmieniamy kadrowanie, nie geometrię. `szewko_fala_sciezka()` zostaje co do znaku. falowania na ekranie = 266,7 / `--fala-rozciag` 177,78 % → 1,5 falowania · długość 269 px przy 404 px (było 151) ⚠︎ **`max-width: none` jest obowiązkowe.** `base.css` ma globalne `svg { max-width: 100% }`, które po cichu unieważnia całe `width`. ⚠︎ **Przycięcie MUSI zabierać nadmiar także przewijaniu, nie tylko malowaniu.** SVG jest tu o 78 % szerszy od opakowania, więc samo przycięcie obrazu nie wystarcza — `clip-path` przycina malowanie, ale nadmiar **nadal liczy się do przewijania strony** i daje poziomy pasek na telefonie. To samo dotyczy `overflow: clip` z `overflow-clip-margin`: zapas obowiązuje we WSZYSTKICH kierunkach, więc 2 px pionowego luzu kupuje się 2 px poziomego nadmiaru. **Zmierzone: `+2 px` przewijania na ośmiu podstronach × pięciu szerokościach.** Zostaje `overflow: hidden` — jedyny wariant wspierany wszędzie i jedyny, który nie oddaje nic. Cenę widać niżej: **zapas 1 px przenosi się z SVG na opakowanie**, bo `hidden` zjadłby go w środku. Amplitudy to nie dotyka: skalowanie poziome nie ma wpływu na proporcje pionowe, więc `--fala-h`, `--fala-piasek`, `--fala-przyrost`, korekta karawany i wszystkie rachunki zapasu zostają nietknięte. Wybór 1,5 falowania z czterech pokazanych właścicielowi na zrzutach (2,7 · 2 · 1,5 · 1). ⚠︎ Przy 1 falowaniu stromizna równa się desktopowej, ale na ekran wchodzi samo zbocze bez grzbietu i doliny — wydma przestaje się czytać z drugiego powodu. To jest podłoga tej skali, nie jej cel. */ @media (max-width: 1008px) { overflow: hidden; /* ─── WŁOS PONIŻEJ PROGU (20.08.2026, wiązka `W6a`) ────────────────── * * Powyżej progu włos pod falą z jawnym `from` zamyka `margin-bottom: -1px` * na SVG — rysunek wychodzi piksel poza opakowanie i zakrywa jego dolny * wiersz własnym wypełnieniem. Tutaj `overflow: hidden` na to nie pozwala * (jest potrzebne przy rozciągnięciu 177,78 %, patrz wyżej), więc zapas * przeniósł się na opakowanie — a to przesuwa razem z rysunkiem TAKŻE tło * opakowania, czyli nie zakrywa niczego. * * Pomiar 20.08 na trzech stykach z `from` × dwóch szerokościach × trzech * gęstościach ekranu: czysto wszędzie poza `/dziennik` przy 390 px i DPR * **1,25 oraz 1,5** — tam wiersz `rgb(41,26,15)` między sąsiadami * `rgb(28,16,7)`, czyli odchylenie **13 poziomów** przy progu widoczności * ~8. Przy DPR 1,0 w tym samym miejscu zero. Krawędź opakowania ląduje na * ułamku piksela urządzenia i ostatni wiersz jest mieszanką rysunku z tłem * opakowania, czyli z kolorem sekcji WYCHODZĄCEJ. * * Lekarstwem jest podłożenie pod ten wiersz koloru sekcji DOCELOWEJ. * `box-shadow: inset` maluje NAD tłem, a POD treścią, więc pasek siada * dokładnie między jednym a drugim i nie zabiera ani piksela układu — * a `place` i domyślne `bottom`/`top` partu zostają nietknięte (zakaz * z odpowiedzi właściciela: ruszenie ich przesunęłoby 22 styki naraz). * * ⚠︎ Bez `--fala-koniec` reguła jest bezczynna. Zmienną ustawia * `dune-divider.php` **tylko przy jawnym `from` i tylko przy `opacity: 1`**; * osiemnaście wywołań bez `from` nie maluje tła na opakowaniu, więc nie ma * u nich czego zakrywać i pasek byłby tam widoczną kreską zamiast lekarstwa. * * **Pomiar kontrolny po wdrożeniu, ta sama metoda i skala:** `/dziennik` * 390 px **13 → 2** poziomów przy DPR 1,25 i **13 → 6** przy DPR 1,5, czyli * pod progiem widoczności w obu przypadkach. Pozostałe pięć kombinacji bez * zmian w granicach szumu (±0,5). Prostokąty opakowania i SVG identyczne co * do ułamka piksela (1106,890625 / 1162,890625) — układ nie drgnął. * ⚠︎ **Przy DPR 1,5 zostaje ślad sub-progowy (6 wobec 0 na czystych stykach)** * i to jest stan przyjęty: kreska wyszła z zakresu widocznego, nie * z mierzalnego. Gdyby wróciła jako zgłoszenie, szukaj po tej liczbie. */ box-shadow: inset 0 -1px 0 var(--fala-koniec, transparent); & svg { height: var(--fala-podloga); max-width: none; width: var(--fala-rozciag); margin-left: calc((100% - var(--fala-rozciag)) / 2); /* ⚠︎ Zapas przeciw włosowi WRACA, ale na opakowaniu — patrz niżej. Tutaj musi zejść do zera, inaczej `overflow: hidden` utnie ostatni wiersz rysunku i włos wróci w miejsce, w którym go naprawiono. */ margin-bottom: 0; } /* Zapas 1 px przeniesiony z SVG na opakowanie. Efekt jest ten sam co w regule nadrzędnej — dolny wiersz wypełnienia ląduje piksel poniżej krawędzi sekcji — tylko osiągnięty przesunięciem CAŁEGO opakowania zamiast wypuszczaniem rysunku poza nie. Kierunek idzie za wariantem: fala dolna schodzi w dół, górna (obrócona o 180°) w górę. */ &.szewko-dune-divider--dol, &:not(.szewko-dune-divider--gora) { margin-bottom: -1px; } &.szewko-dune-divider--gora { margin-top: -1px; } } /* Dolny styk — pozycja pięciu z pięciu użyć na stronie głównej. Sekcja musi mieć `position: relative`. */ &.szewko-dune-divider--dol { position: absolute; right: 0; bottom: 0; left: 0; } /* Górny styk. Obrót zamiast drugiej ścieżki — ta sama fala odwrócona, dokładnie jak `transform rotate-180` na opakowaniu w Reakcie. Uwaga na kontrakt: jeden styk = jeden separator. Jeśli sekcja nad tą ma już falę na dole, ta wersja jest błędem, nie wyborem. */ &.szewko-dune-divider--gora { position: absolute; top: 0; right: 0; left: 0; transform: rotate(180deg); } }