Stronyinternetowe

# Przepis na styl BISTRO

Styl do stron kawiarni, piekarni, bistro i restauracji. Nazwa lokalu na całą szerokość ekranu, kremowe tło, sekcje w kolorze masła i cały tekst w kobalcie zamiast czerni, a menu złożone jak papierowa karta, z kropkami między daniem a ceną.

Ten plik to przepis na wygląd strony internetowej dla agenta, który pisze kod: Claude Code'a, Codexa, Cursora albo podobnego. Nie ma w nim treści, tylko wygląd: kroje, kolory, siatka, elementy, zdjęcia i ruch.

## Jak z niego korzystasz

Przeczytaj cały przepis, zanim cokolwiek zmienisz. Potem sprawdź, w której sytuacji jesteś:

- **Strona już istnieje.** Zmieniasz wyłącznie wygląd. Treść i działanie strony zostają nietknięte, a zasady są niżej, w części „Treść zostaje”.
- **Strony jeszcze nie ma.** Budujesz ją od razu w tym stylu. Teksty, zdjęcia, ceny i dane kontaktowe bierzesz od użytkownika. Jeśli czegoś brakuje, wstawiasz tekst zastępczy w nawiasie kwadratowym, na przykład [adres], i nie zmyślasz faktów.

Zanim zaczniesz, napisz użytkownikowi w kilku krótkich punktach, co zmienisz, i poczekaj na zgodę. Liczby w przepisie (stopnie pisma, odstępy, czasy ruchu) są ustawione pod typowy landing. Przy bardzo długich tekstach albo nietypowych sekcjach dopasuj je tak, żeby styl dalej był rozpoznawalny. Przepis to szkic stylu, a nie sztywna instrukcja: jeśli użytkownik chce innych kolorów albo innego kroju, zmieniasz je tak, jak prosi, a resztę przepisu stosujesz dalej.

## Treść zostaje

Te zasady obowiązują zawsze, kiedy przebudowujesz stronę, która już istnieje.

- Każde słowo zostaje takie samo: nagłówki, akapity, ceny, przyciski, menu, stopka, teksty alternatywne zdjęć, tytuł strony i opisy dla wyszukiwarek. Nie poprawiasz, nie skracasz, nie tłumaczysz i niczego nie dopisujesz.
- Sekcje zostają w tej samej kolejności. Linki, formularze, koszyk, skrypty analityczne, piksele reklamowe i wtyczki działają tak samo jak wcześniej.
- Zdjęcia zostają te same. Wolno je przyciąć, zmienić proporcje kadru i nałożyć traktowanie opisane w tym przepisie, ale nie podmieniasz ich na inne i nie generujesz nowych.
- Zmieniasz krój, kolory, odstępy, rozmieszczenie elementów wewnątrz sekcji, wygląd przycisków, kart i pól formularzy oraz ruch.
- Jeśli jakiś element stylu wymaga treści, której na stronie nie ma (na przykład styl przewiduje liczby w nagłówku, a strona ich nie ma), pomijasz ten element zamiast dopisywać treść. Treści nie przenosisz też między sekcjami, żeby wypełnić element stylu.
- Jeśli na stronie jest coś, czego styl zakazuje (na przykład emoji albo strzałki w przyciskach), to zostaje, bo jest treścią. Możesz to wyciszyć wyglądem, a o usunięcie pytasz użytkownika.
- Numery porządkowe sekcji (01, 02…) wolno dodać jako element wyglądu, w CSS (licznik i `::before`), a nie w HTML. Wolno też dodać napisy sterujące, których wymaga obsługa strony na telefonie, na przykład „Menu” i „Zamknij”. Nazw sekcji, etykiet pól ani innych słów, których na stronie nie było, nie dodajesz.
- Działanie strony też zostaje: rozwijane pytania startują w tym samym stanie co wcześniej, formularz wysyła się tak samo i pokazuje te same komunikaty. Opisane w przepisie komunikaty i stany startowe stosujesz tylko przy nowej stronie.
- Przed zmianami zrób kopię plików strony obok jej folderu, a nie w nim, żeby nie zepsuć ścieżek względnych. Po zmianach wyciągnij cały widoczny tekst z wersji przed i po (najprościej skryptem, który zbiera tekst ze wszystkich podstron) i porównaj obie wersje. Przy porównaniu wyłącz `text-transform`, zamień twarde spacje na zwykłe i zwiń wszystkie odstępy do pojedynczych spacji, bo inaczej wersaliki i spacje z przepisu wyjdą jako fałszywe różnice. Różnica ma wynosić zero znaków, a wynik porównania pokazujesz użytkownikowi.

## Kroje: skąd je wziąć

Wszystkie kroje z tego przepisu są darmowe, także do użytku komercyjnego, i mają polskie znaki. Pobierz je z Google Fonts w formacie WOFF2, razem z zestawem znaków latin-ext, i podepnij z serwera strony zamiast ładować z serwerów Google. Strona otwiera się wtedy szybciej, a przeglądarka odwiedzającego nie wysyła jego adresu IP do Google, co w Unii bywa problemem przy RODO. Przy krojach ze zmienną wagą albo szerokością pobierz plik zmienny, a przy krojach z rozmiarem optycznym wariant z osią opsz, bo inaczej część wag i ustawień z przepisu nie zadziała.

## Charakter

Strona ma wyglądać jak szyld i karta dobrego lokalu: pewna siebie, apetyczna i czytelna z daleka. Całą robotę robią trzy kolory i jeden krój o dużym kontraście kreski. Menu jest najważniejszą częścią strony, więc czyta się je jak papierową kartę: nazwa, opis, cena i nic więcej.

## Kroje

- Nagłówki, nazwa lokalu i nazwy dań: **Gloock**, waga 400. Przy bardzo dużych stopniach odstęp liter −0.02em.
- Tekst, opisy, nawigacja, przyciski i etykiety: **Familjen Grotesk**, wagi 400 i 600.

## Kolory

```css
:root {
  --krem: #fff7e3;                    /* tło główne */
  --maslo: #f5d46a;                   /* pełne sekcje */
  --kobalt: #1f33c7;                  /* CAŁY tekst, linie i przyciski */
  --kobalt-2: rgba(31, 51, 199, .76); /* opisy dań i podpisy na kremie; na maśle pełny kobalt */
}
```

Na stronie nie ma czerni ani szarości. Tekst, linie, obramowania i drobne znaki są kobaltowe. Sekcje idą na przemian: krem, masło, krem. Hero i menu mogą razem tworzyć jedną kremową strefę. Rezerwacja i stopka mogą tworzyć na dole jeden kobaltowy blok z tekstem w kolorze kremu.

## Siatka i odstępy

- Treść najwyżej 1400 px szerokości, margines boczny 48 px na laptopie i 20 px na telefonie.
- Odstęp w sekcji: 110 px u góry i na dole na laptopie, 64 px na telefonie.
- Między sekcją kremową a maślaną nie ma linii ani fal, tylko prosta krawędź koloru.

## Typografia

- Nazwa lokalu w hero: Gloock tak duży, żeby słowo zajęło całą szerokość treści, interlinia 0.86. Rozmiar wynika z długości słowa i liczysz go skryptem z obrysu liter, a nie z ich szerokości w składzie, bo na przykład M w Gloock wystaje w lewo i nazwa nie stanęłaby równo z marginesem. Nazwa nie łamie się na dwa wiersze.
- H2: `clamp(44px, 6vw, 104px)`, interlinia 0.95.
- Nazwy dań: Gloock 26 px na laptopie, 22 px na telefonie.
- Tekst: Familjen Grotesk 18 px, interlinia 1.55. Opisy dań 15 px w kolorze `--kobalt-2`.
- Etykiety: Familjen Grotesk 600, 12 px, wersaliki, odstęp liter 0.12em.

## Elementy

- **Pasek godzin:** nad nawigacją, wysoki na 36 px, tło `--kobalt`, napis w kolorze kremu. Mówi, czy lokal jest teraz otwarty, na podstawie godzin z treści strony i bieżącej godziny w strefie Europe/Warsaw, na przykład „Otwarte do 16:00”, „Otwieramy dziś o 8:30” albo „Otwieramy jutro o 7:30”.
- **Nawigacja:** przyklejona u góry, na kremowym tle, nazwa lokalu po lewej w Gloock 24 px, linki w Familjen 16 px, po prawej przycisk rezerwacji.
- **Przyciski:** prostokąt bez zaokrągleń, obramowanie 1.5 px `--kobalt`, kobaltowy napis, wysokość 50 px. Po najechaniu tło wypełnia się kobaltem od dołu do góry w 220 ms, a napis zmienia kolor na krem.
- **Hero:** nazwa lokalu na całą szerokość, pod nią w dwóch kolumnach krótki opis lokalu oraz adres z godzinami, niżej zdjęcie na całą szerokość treści w proporcji 16:9.
- **Menu:** jedna długa karta, a kategorie jako tekstowe zakładki w rzędzie (Gloock 22 px), które przewijają do kategorii i podkreślają linią 2 px tę, którą akurat widać. Każda pozycja to wiersz: nazwa dania po lewej, cena po prawej, a między nimi kropkowana linia (1.5 px, kropki) na wysokości linii pisma ostatniego wiersza nazwy. Najpewniej zrobić ją pseudoelementem za nazwą w kontenerze z `overflow: hidden`, wyrównanym do ostatniej linii pisma, bo kropki z `border-bottom` na osobnym elemencie psują się przy nazwie w dwóch wierszach. Opis dania pod nazwą. Przy daniach wegetariańskich mała litera „V” w kółku z linii 1 px, bez kolorowych ikonek.
- **Zdjęcia w menu:** na laptopie obok listy stoi jedna ramka ze zdjęciem (4:5, przyklejona przy przewijaniu), która pokazuje zdjęcie dania najbliższego środkowi ekranu albo tego, nad którym jest kursor. Na telefonie zdjęcia stoją w liście, nad nazwą dania, w proporcji 3:2, a dania bez zdjęcia stoją bez pola zastępczego.
- **Danie sezonu:** sekcja w kolorze masła z dużym zdjęciem po jednej stronie i nazwą dania w Gloock `clamp(48px, 7vw, 120px)` po drugiej.
- **Godziny i adres:** duża tabela w Gloock 28 px, dni po lewej, godziny po prawej, dzisiejszy dzień podkreślony.
- **Stopka:** tło kobaltowe, nazwa lokalu w kolorze kremu na całą szerokość, jak w hero.

## Zdjęcia

- Ciepłe, jasne zdjęcia jedzenia i wnętrza, bez filtrów i winiet, z prostymi rogami.
- Jedzenie z bliska, jedno danie w kadrze. Zdjęcia z różnych źródeł wyrównujesz tym samym kadrem, a nie filtrem.
- Gdy zdjęcia brakuje, stoi pole w kolorze masła z nazwą dania w Gloock na środku.

## Ruch

- Nagłówki wchodzą wierszami spod maski: każdy wiersz w kontenerze z `overflow: hidden`, tekst przesuwa się z `translateY(105%)` do zera, 800 ms, `cubic-bezier(.2, .8, .2, 1)`, kolejne wiersze co 80 ms. Maska potrzebuje w środku około .2em zapasu u dołu (wyrównanego ujemnym marginesem), bo przy interlinii 0.95 ucina ogonki liter g, y i ę.
- Zdjęcia w trakcie przewijania przez ekran zmieniają skalę z 1.08 do 1.0 (powiązane z pozycją przewijania, nie z czasem).
- Ramka ze zdjęciem dania przy menu zmienia zdjęcie przenikaniem w 300 ms.
- Na górze sekcji z daniem sezonu przesuwa się poziomy pas z nazwami dań, jak napis na szyldzie: jedna linia Gloock 40 px, około 60 px na sekundę, zatrzymany, gdy karta przeglądarki jest w tle.
- Ruch tylko na `transform` i `opacity`, z jednym wyjątkiem: kolor napisu przycisku przy najechaniu.
- Przy ograniczonym ruchu pas z nazwami dań stoi i może zawinąć się do dwóch wierszy.

## Telefon

- Nawigacja: nazwa i linki w jednym rzędzie (linki 15 px, poniżej 380 px 14 px), bez przycisku rezerwacji, bo jego rolę przejmuje przycisk na dole ekranu.
- Nazwa lokalu dalej na całą szerokość ekranu, mniejsza, ale w jednym wierszu.
- Zakładki menu w jednym rzędzie przewijanym w poziomie, przyklejone pod nawigacją, kiedy przewijasz menu.
- Kiedy hero zniknie z ekranu, przycisk rezerwacji przykleja się do dołu ekranu na całą szerokość.

## Czego nie robić

- Brązów, „kawowego” beżu, czerni i szarości.
- Zdjęć ziaren kawy, ilustracji filiżanek, krojów odręcznych i stylizacji na tablicę kredową.
- Kart z cieniem, przycisków w kształcie pastylki, ikon sztućców i gwiazdek opinii.
- Okrągłych naklejek z obracającym się napisem.

## Kontrola na koniec

- Obejrzyj stronę na szerokości 390 px (telefon) i 1440 px (laptop), od góry do dołu, z przewijaniem. Nic nie wystaje poza ekran w poziomie, a żaden tekst nie nachodzi na inny.
- Polskie znaki w nagłówkach są w tym samym kroju co reszta słowa. Jeśli „ą” albo „ł” wygląda inaczej, plik kroju nie ma zestawu latin-ext.
- Przy systemowym ustawieniu „ogranicz ruch” animacje się wyłączają, a cała treść jest widoczna od razu.
- Zwykły tekst ma kontrast co najmniej 4,5:1 do tła, a duże nagłówki co najmniej 3:1. Kolory z przepisu są dobrane pod te progi, ale jeśli na stronie stoją na innym tle niż w przepisie, sprawdź je jeszcze raz.
- Nawigacja, która stoi nad treścią, nie liczy się jako tekst nachodzący na inny, o ile w każdym miejscu jest czytelna.
- Na stronie nie ma ani jednego czarnego albo szarego tekstu.
- Kropki w menu kończą się tuż przed ceną i stoją na linii pisma nazwy dania.
- Przy przebudowie porównanie tekstu przed i po daje zero różnic.

# Przepis na styl SKLEP

Styl do sklepu z ubraniami i dodatkami. Cała strona jest jednym drobnym krojem w jednym rozmiarze, rzeczy stoją w siatce na jednakowym jasnoszarym tle, a podpis pod każdą to nazwa, cena i najwyżej jedna szara linijka stanu, jak w butikach z Kopenhagi.

Ten plik to przepis na wygląd strony internetowej dla agenta, który pisze kod: Claude Code'a, Codexa, Cursora albo podobnego. Nie ma w nim treści, tylko wygląd: kroje, kolory, siatka, elementy, zdjęcia i ruch.

## Jak z niego korzystasz

Przeczytaj cały przepis, zanim cokolwiek zmienisz. Potem sprawdź, w której sytuacji jesteś:

- **Strona już istnieje.** Zmieniasz wyłącznie wygląd. Treść i działanie strony zostają nietknięte, a zasady są niżej, w części „Treść zostaje”.
- **Strony jeszcze nie ma.** Budujesz ją od razu w tym stylu. Teksty, zdjęcia, ceny i dane kontaktowe bierzesz od użytkownika. Jeśli czegoś brakuje, wstawiasz tekst zastępczy w nawiasie kwadratowym, na przykład [adres], i nie zmyślasz faktów.

Zanim zaczniesz, napisz użytkownikowi w kilku krótkich punktach, co zmienisz, i poczekaj na zgodę. Liczby w przepisie (stopnie pisma, odstępy, czasy ruchu) są ustawione pod typowy landing. Przy bardzo długich tekstach albo nietypowych sekcjach dopasuj je tak, żeby styl dalej był rozpoznawalny. Przepis to szkic stylu, a nie sztywna instrukcja: jeśli użytkownik chce innych kolorów albo innego kroju, zmieniasz je tak, jak prosi, a resztę przepisu stosujesz dalej.

## Treść zostaje

Te zasady obowiązują zawsze, kiedy przebudowujesz stronę, która już istnieje.

- Każde słowo zostaje takie samo: nagłówki, akapity, ceny, przyciski, menu, stopka, teksty alternatywne zdjęć, tytuł strony i opisy dla wyszukiwarek. Nie poprawiasz, nie skracasz, nie tłumaczysz i niczego nie dopisujesz.
- Sekcje zostają w tej samej kolejności. Linki, formularze, koszyk, skrypty analityczne, piksele reklamowe i wtyczki działają tak samo jak wcześniej.
- Zdjęcia zostają te same. Wolno je przyciąć, zmienić proporcje kadru i nałożyć traktowanie opisane w tym przepisie, ale nie podmieniasz ich na inne i nie generujesz nowych.
- Zmieniasz krój, kolory, odstępy, rozmieszczenie elementów wewnątrz sekcji, wygląd przycisków, kart i pól formularzy oraz ruch.
- Jeśli jakiś element stylu wymaga treści, której na stronie nie ma (na przykład styl przewiduje liczby w nagłówku, a strona ich nie ma), pomijasz ten element zamiast dopisywać treść. Treści nie przenosisz też między sekcjami, żeby wypełnić element stylu.
- Jeśli na stronie jest coś, czego styl zakazuje (na przykład emoji albo strzałki w przyciskach), to zostaje, bo jest treścią. Możesz to wyciszyć wyglądem, a o usunięcie pytasz użytkownika.
- Numery porządkowe sekcji (01, 02…) wolno dodać jako element wyglądu, w CSS (licznik i `::before`), a nie w HTML. Wolno też dodać napisy sterujące, których wymaga obsługa strony na telefonie, na przykład „Menu” i „Zamknij”. Nazw sekcji, etykiet pól ani innych słów, których na stronie nie było, nie dodajesz.
- Działanie strony też zostaje: rozwijane pytania startują w tym samym stanie co wcześniej, formularz wysyła się tak samo i pokazuje te same komunikaty. Opisane w przepisie komunikaty i stany startowe stosujesz tylko przy nowej stronie.
- Przed zmianami zrób kopię plików strony obok jej folderu, a nie w nim, żeby nie zepsuć ścieżek względnych. Po zmianach wyciągnij cały widoczny tekst z wersji przed i po (najprościej skryptem, który zbiera tekst ze wszystkich podstron) i porównaj obie wersje. Przy porównaniu wyłącz `text-transform`, zamień twarde spacje na zwykłe i zwiń wszystkie odstępy do pojedynczych spacji, bo inaczej wersaliki i spacje z przepisu wyjdą jako fałszywe różnice. Różnica ma wynosić zero znaków, a wynik porównania pokazujesz użytkownikowi.

## Kroje: skąd je wziąć

Wszystkie kroje z tego przepisu są darmowe, także do użytku komercyjnego, i mają polskie znaki. Pobierz je z Google Fonts w formacie WOFF2, razem z zestawem znaków latin-ext, i podepnij z serwera strony zamiast ładować z serwerów Google. Strona otwiera się wtedy szybciej, a przeglądarka odwiedzającego nie wysyła jego adresu IP do Google, co w Unii bywa problemem przy RODO. Przy krojach ze zmienną wagą albo szerokością pobierz plik zmienny, a przy krojach z rozmiarem optycznym wariant z osią opsz, bo inaczej część wag i ustawień z przepisu nie zadziała.

## Charakter

Sklep, który nie krzyczy. Typografia jest drobna, czarna i wszędzie taka sama, więc całą robotę robią zdjęcia: każda rzecz sama, na tym samym jasnoszarym tle, w tym samym świetle. Siatka produktów to ciągły szary pas z kafli dosuniętych do siebie bez odstępów, a podpisy stoją pod nim na białym. Między siatkami wchodzą kadry na całą szerokość z jednym małym napisem na środku. Nie ma kolorowych przycisków, plakietek, gwiazdek ani ikon. Ważniejsze od mniej ważnego oddziela miejsce w układzie i szarość tekstu, nigdy wielkość liter.

## Kroje

- Wszystko w jednej rodzinie: **Zalando Sans**, waga 400, a 500 tylko w przyciskach.
- Znak sklepu w nawigacji: **Zalando Sans Expanded**, waga 600, wersaliki, odstęp liter 0.06em, 13 px na laptopie i 12 px na telefonie. Jeśli sklep ma własne logo w pliku, zostaje logo.
- Nie ma drugiego kroju i nie ma dużych nagłówków. H1 i H2 strony wyglądają jak etykiety (opis w „Typografii”), a ich miejsce w kodzie zostaje to samo.

## Kolory

```css
:root {
  --bialy: #ffffff;      /* tło strony, pasek nad nawigacją, podpisy pod zdjęciami */
  --szary: #efefef;      /* tło każdego zdjęcia produktu i każdego kafla */
  --linia: #e3e3e3;      /* linie 1 px: pod nawigacją, w tabeli, w stopce */
  --tekst: #000000;
  --tekst-2: #737373;    /* stan produktu, numery sekcji, podpowiedzi w polach (4,7:1 na bieli) */
}
```

Strona ma tylko te kolory. Napisy na zdjęciach na całą szerokość są czarne albo białe, zależnie od jasności zdjęcia pod nimi (kontrast co najmniej 4,5:1, sprawdzany w miejscu napisu). Jeśli sklep ma kolor marki, wolno go użyć w jednym miejscu, w pasku nad nawigacją, jako tło pod czarnym albo białym tekstem.

## Siatka i odstępy

- Strona na całą szerokość okna, bez kontenera z marginesami. Tekst przy krawędziach ma margines 14 px na laptopie i 12 px na telefonie.
- Siatka produktów: 4 kolumny na laptopie, 3 od 900 px w dół, 2 na telefonie (od 600 px w dół). Kafle dosunięte do siebie bez odstępów, zdjęcie w proporcji 3:4.
- Podpis pod zdjęciem: margines wewnętrzny 12 px z boku, 12 px u góry i 32 px u dołu.
- Między siatką a kadrem na całą szerokość nie ma odstępu. Sekcje z tekstem (o marce, newsletter) mają 120 px odstępu u góry i u dołu, na telefonie 72 px.

## Typografia

- Jeden stopień na całą stronę: 11 px, interlinia 1.45, odstęp liter 0.02em. Wersalikami: nawigacja, nazwy i ceny produktów, etykiety, przyciski, napisy na zdjęciach, nagłówki sekcji.
- Akapity piszesz normalnie (bez wersalików), 12 px, interlinia 1.5, najwyżej 52 znaki w wierszu (w tym kroju to około `30em`).
- Na telefonie wszystko o 1 px większe: 12 px i akapity 13 px.
- Ceny z twardą spacją przed „zł” i liczbami o stałej szerokości (`font-variant-numeric: tabular-nums`).

## Elementy

- **Pasek nad nawigacją:** wysokość 30 px, jedno krótkie zdanie na środku, po prawej druga informacja (dostawa, zwroty). Bez rabatu za zapis i bez krzyżyka, jeśli pasek nie ma czego zamykać.
- **Nawigacja:** wysokość 34 px, linia 1 px pod spodem. Po lewej działy, na środku znak sklepu, po prawej wyszukiwarka, konto i koszyk z liczbą w nawiasie: „Koszyk (0)”. Nawigacja jest przyklejona do góry (`position: sticky`) razem z paskiem i ma białe tło. Na telefonie: „Menu” po lewej, znak na środku, sama liczba koszyka „(0)” po prawej.
- **Hero:** zdjęcie na całą szerokość, wysokie na ekran bez paska i nawigacji. Na zdjęciu napisy ułożone w siatce 3 × 4: w pierwszym wierszu liczba, nazwa marki, liczba; w drugim nazwa kolekcji; w trzecim liczba, miasto, liczba; w czwartym wezwanie do zakupu. Kolumny z liczbami stoją na 20% i 80% szerokości, napisy w środkowej kolumnie są wyśrodkowane, wiersze rozłożone równo na środkowych 60% wysokości. Jeśli sklep nie ma liczb ani nazwy kolekcji, zostaje sam znak i wezwanie, w tych samych miejscach.
- **Siatka produktów:** kafel to zdjęcie na tle `--szary`, pod nim na białym nazwa w pierwszej linii i cena w drugiej. Trzecia linia jest tylko wtedy, gdy sklep ją ma, i zawsze w `--tekst-2`: „Wyprzedane”, „Zostały 4 sztuki”, „2 kolory”. Wyprzedana rzecz zostaje na swoim miejscu w siatce, z tym samym zdjęciem, bez szarzenia i bez przekreślenia. Numer produktu (01, 02…) stoi przed nazwą, jeśli sklep numeruje rzeczy.
- **Kadry na całą szerokość:** między siatkami, w proporcji około 16:9, z jednym albo dwoma wierszami napisu na środku. Dwa kadry obok siebie (pół na pół, proporcja 4:5) z napisem na środku każdego to wejścia do działów.
- **Sekcja z numerami:** informacje o marce, materiałach, rozmiarach, dostawie i kontakcie jako wiersze 01, 02, 03… Każdy wiersz: linia 1 px u góry, numer w `--tekst-2`, tytuł wersalikami, pod nim akapit. Na laptopie dwie kolumny: po lewej etykieta sekcji i jeden akapit wstępu, po prawej wiersze. Na stronie głównej wiersze są rozwinięte. Jeśli sklep ma te informacje w akordeonie, akordeon zostaje, a zamiast strzałki stoi znak „+” w tym samym kroju.
- **Tabela rozmiarów:** wersalikami 11 px, linia 1 px pod każdym wierszem, liczby wyrównane do lewej w równych kolumnach, nagłówek w `--tekst-2`.
- **Przyciski:** tekst wersalikami w prostokącie z ramką 1 px w kolorze tekstu, wypełnienie 10 × 16 px, ostre rogi, bez tła. Wezwania na zdjęciach i linki w tekście to sam tekst wersalikami, bez ramki.
- **Pola formularza:** etykieta wersalikami po lewej, pole po prawej, samo podkreślenie 1 px w kolorze `--tekst-2`, bez ramki i bez tła. Po wysłaniu formularz zostaje na miejscu, a pod przyciskiem pojawia się jedna linijka odpowiedzi.
- **Stopka:** trzy kolumny oddzielone pionowymi liniami 1 px, każda z nagłówkiem nad linią poziomą i listą pod spodem. Dolny wiersz z walutą i krajem, zapisem i prawami autorskimi, nad nim linia 1 px.

## Karta produktu i koszyk

Te części opisują resztę sklepu, jeśli strona je ma.

- **Karta produktu:** po lewej zdjęcia jedno pod drugim na tle `--szary`, na całą wysokość ekranu każde, po prawej przyklejona kolumna szerokości około 30%: nazwa, cena, kolor, rozmiary, przycisk i wiersze 01–04 (opis, szczegóły, dostawa i zwroty, kontakt).
- **Rozmiary:** w jednym rzędzie jako zwykły tekst („XS S M L XL” albo „46/S 48/M”), wybrany podkreślony, niedostępny w `--tekst-2` i przekreślony. Obok tekstowy link „Tabela rozmiarów”.
- **Przycisk zakupu:** prostokąt z ramką na całą szerokość kolumny, z liczbą sztuk w środku, kiedy zostało ich mało: „Zostały 4 sztuki · Dodaj do koszyka”. Przy wyprzedanej rzeczy przycisk zmienia się w „Powiadom o dostawie”.
- **Koszyk:** wysuwa się z prawej jako kolumna szerokości 400 px na białym tle, a strona pod nim przygasa półprzezroczystą bielą (70%). U góry „Dodano do koszyka”, niżej rzeczy jako miniatura na `--szary`, nazwa, rozmiar i cena, na dole suma i przycisk z ramką.

## Zdjęcia

- Każde zdjęcie produktu: sama rzecz z przodu, bez człowieka, na jednolitym tle dokładnie w kolorze `--szary`, z miękkim cieniem tylko przy krawędziach rzeczy. Tło zdjęcia i tło kafla muszą się zlewać, bez widocznej granicy.
- Rzeczy na zdjęciach stoją na środku kafla i są w podobnej skali: ubrania zajmują około 70% szerokości kafla, dodatki (czapka, komin, biżuteria) około 40%, buty i torby około 55–65%.
- Jeśli zdjęcia sklepu mają różne tła albo różne skale, nie wolno ich podmieniać (zasady w „Treść zostaje”). Wolno je przyciąć i ustawić tak, żeby rzecz stała na środku kafla, a kafel dostaje kolor tła zmierzony na zdjęciu (mediana pikseli przy krawędziach), zamiast `--szary`.
- Kadry na całą szerokość: martwa natura albo ludzie w szarym studiu, prawie bez koloru. Kolorowe zdjęcia lifestyle z kawiarni i plaży nie pasują do tego stylu. Jeśli sklep ma tylko takie, zostają, ale trafiają na koniec strony, a nie do hero.

## Ruch

- Liczby w hero co 1,2 s zmieniają się na inne dwucyfrowe, każda o innej porze (przesunięcie 300 ms między nimi), bez przenikania, jak cyfry na tablicy przylotów. Przy pierwszym wejściu przez 800 ms losują się szybko co 60 ms i stają na wartości startowej.
- Zdjęcie hero przy wejściu oddala się ze skali 1.04 do 1 w 1,6 s, `cubic-bezier(.2, .7, .2, 1)`.
- Kafle produktów pojawiają się przy przewijaniu: z krycia 0 i przesunięcia 16 px w dół do swojego miejsca w 600 ms, kolejne w rzędzie co 70 ms. Zdjęcie w kaflu wchodzi w tym samym czasie ze skali 1.04.
- Kadry na całą szerokość przesuwają się przy przewijaniu wolniej od strony: zdjęcie ma 12% zapasu wysokości i przesuwa się o ten zapas w czasie, gdy kadr przejeżdża przez ekran.
- Ruch nie zależy od myszki: nie ma zmian po najechaniu ani kursora w kształcie ręki nad elementami, które nic nie robią.
- Przy ograniczonym ruchu liczby stoją na wartościach startowych, kafle i zdjęcia są od razu na miejscu.

## Telefon

- Pasek nad nawigacją z jednym zdaniem na środku, bez prawej części.
- Hero na wysokość ekranu bez paska i nawigacji (`100svh` minus ich wysokość), zdjęcie przycięte do pionu na środku rzeczy, liczby na 12% i 88% szerokości.
- Siatka w 2 kolumnach. Dwa kadry obok siebie stają jeden pod drugim, każdy w proporcji 4:5. Kadry na całą szerokość w proporcji 4:5, przycięte na środku rzeczy.
- Sekcja z numerami w jednej kolumnie, stopka w jednej kolumnie z poziomymi liniami między grupami.

## Czego nie robić

- Okna z rabatem za zapis, okna wyboru kraju na pół ekranu, serduszek przy produktach, gwiazdek opinii, plakietek „-30%” i „Nowość”, zegarów odliczających promocję.
- Ikon płatności, ciężarówek i tarcz przy dostawie. Wystarczy tekst.
- Zaokrąglonych rogów, cieni pod kaflami, kolorowych przycisków i dużych nagłówków nad siatką („Nasze bestsellery”).
- Karuzel z kropkami i strzałkami. Kolejne rzeczy widać w siatce albo przy przewijaniu.
- Zdjęć produktów na różnych tłach w jednej siatce i rzeczy w różnych skalach obok siebie.

## Kontrola na koniec

- Obejrzyj stronę na szerokości 390 px (telefon) i 1440 px (laptop), od góry do dołu, z przewijaniem. Nic nie wystaje poza ekran w poziomie, a żaden tekst nie nachodzi na inny.
- Polskie znaki w nagłówkach są w tym samym kroju co reszta słowa. Jeśli „ą” albo „ł” wygląda inaczej, plik kroju nie ma zestawu latin-ext.
- Przy systemowym ustawieniu „ogranicz ruch” animacje się wyłączają, a cała treść jest widoczna od razu.
- Zwykły tekst ma kontrast co najmniej 4,5:1 do tła, a duże nagłówki co najmniej 3:1. Kolory z przepisu są dobrane pod te progi, ale jeśli na stronie stoją na innym tle niż w przepisie, sprawdź je jeszcze raz.
- Nawigacja, która stoi nad treścią, nie liczy się jako tekst nachodzący na inny, o ile w każdym miejscu jest czytelna.
- Tło każdego zdjęcia w siatce ma ten sam kolor co kafel: piksel w rogu zdjęcia różni się od tła kafla najwyżej o 2 w każdym kanale.
- Na zrzucie siatki rzeczy stoją na środku kafli i są w podobnej skali (ubrania razem, dodatki razem).
- Napisy na zdjęciach na całą szerokość mają kontrast co najmniej 4,5:1 z tłem pod nimi, także po przycięciu na telefonie.
- Cała strona używa tylko krojów Zalando Sans i Zalando Sans Expanded, a stopień 11 px (12 px na telefonie) mają wszystkie elementy poza akapitami.
- Przy przebudowie porównanie tekstu przed i po daje zero różnic.

# Przepis na styl KOLOR

Styl do marek, które mają kilka wariantów: smaków, zapachów, kolorów albo kolekcji. Każdy wariant dostaje pełną sekcję w swoim nasyconym kolorze, wziętym z jego zdjęcia (z tła albo z samego produktu), a sekcje łączą krótkie przejścia gradientem.

Ten plik to przepis na wygląd strony internetowej dla agenta, który pisze kod: Claude Code'a, Codexa, Cursora albo podobnego. Nie ma w nim treści, tylko wygląd: kroje, kolory, siatka, elementy, zdjęcia i ruch.

## Jak z niego korzystasz

Przeczytaj cały przepis, zanim cokolwiek zmienisz. Potem sprawdź, w której sytuacji jesteś:

- **Strona już istnieje.** Zmieniasz wyłącznie wygląd. Treść i działanie strony zostają nietknięte, a zasady są niżej, w części „Treść zostaje”.
- **Strony jeszcze nie ma.** Budujesz ją od razu w tym stylu. Teksty, zdjęcia, ceny i dane kontaktowe bierzesz od użytkownika. Jeśli czegoś brakuje, wstawiasz tekst zastępczy w nawiasie kwadratowym, na przykład [adres], i nie zmyślasz faktów.

Zanim zaczniesz, napisz użytkownikowi w kilku krótkich punktach, co zmienisz, i poczekaj na zgodę. Liczby w przepisie (stopnie pisma, odstępy, czasy ruchu) są ustawione pod typowy landing. Przy bardzo długich tekstach albo nietypowych sekcjach dopasuj je tak, żeby styl dalej był rozpoznawalny. Przepis to szkic stylu, a nie sztywna instrukcja: jeśli użytkownik chce innych kolorów albo innego kroju, zmieniasz je tak, jak prosi, a resztę przepisu stosujesz dalej.

## Treść zostaje

Te zasady obowiązują zawsze, kiedy przebudowujesz stronę, która już istnieje.

- Każde słowo zostaje takie samo: nagłówki, akapity, ceny, przyciski, menu, stopka, teksty alternatywne zdjęć, tytuł strony i opisy dla wyszukiwarek. Nie poprawiasz, nie skracasz, nie tłumaczysz i niczego nie dopisujesz.
- Sekcje zostają w tej samej kolejności. Linki, formularze, koszyk, skrypty analityczne, piksele reklamowe i wtyczki działają tak samo jak wcześniej.
- Zdjęcia zostają te same. Wolno je przyciąć, zmienić proporcje kadru i nałożyć traktowanie opisane w tym przepisie, ale nie podmieniasz ich na inne i nie generujesz nowych.
- Zmieniasz krój, kolory, odstępy, rozmieszczenie elementów wewnątrz sekcji, wygląd przycisków, kart i pól formularzy oraz ruch.
- Jeśli jakiś element stylu wymaga treści, której na stronie nie ma (na przykład styl przewiduje liczby w nagłówku, a strona ich nie ma), pomijasz ten element zamiast dopisywać treść. Treści nie przenosisz też między sekcjami, żeby wypełnić element stylu.
- Jeśli na stronie jest coś, czego styl zakazuje (na przykład emoji albo strzałki w przyciskach), to zostaje, bo jest treścią. Możesz to wyciszyć wyglądem, a o usunięcie pytasz użytkownika.
- Numery porządkowe sekcji (01, 02…) wolno dodać jako element wyglądu, w CSS (licznik i `::before`), a nie w HTML. Wolno też dodać napisy sterujące, których wymaga obsługa strony na telefonie, na przykład „Menu” i „Zamknij”. Nazw sekcji, etykiet pól ani innych słów, których na stronie nie było, nie dodajesz.
- Działanie strony też zostaje: rozwijane pytania startują w tym samym stanie co wcześniej, formularz wysyła się tak samo i pokazuje te same komunikaty. Opisane w przepisie komunikaty i stany startowe stosujesz tylko przy nowej stronie.
- Przed zmianami zrób kopię plików strony obok jej folderu, a nie w nim, żeby nie zepsuć ścieżek względnych. Po zmianach wyciągnij cały widoczny tekst z wersji przed i po (najprościej skryptem, który zbiera tekst ze wszystkich podstron) i porównaj obie wersje. Przy porównaniu wyłącz `text-transform`, zamień twarde spacje na zwykłe i zwiń wszystkie odstępy do pojedynczych spacji, bo inaczej wersaliki i spacje z przepisu wyjdą jako fałszywe różnice. Różnica ma wynosić zero znaków, a wynik porównania pokazujesz użytkownikowi.

## Kroje: skąd je wziąć

Wszystkie kroje z tego przepisu są darmowe, także do użytku komercyjnego, i mają polskie znaki. Pobierz je z Google Fonts w formacie WOFF2, razem z zestawem znaków latin-ext, i podepnij z serwera strony zamiast ładować z serwerów Google. Strona otwiera się wtedy szybciej, a przeglądarka odwiedzającego nie wysyła jego adresu IP do Google, co w Unii bywa problemem przy RODO. Przy krojach ze zmienną wagą albo szerokością pobierz plik zmienny, a przy krojach z rozmiarem optycznym wariant z osią opsz, bo inaczej część wag i ustawień z przepisu nie zadziała.

## Charakter

Głośno i soczyście, ale porządnie. Każdy wariant ma sekcję na cały ekran w kolorze wziętym z jego zdjęcia. Zdjęcie na kolorowym tle zlewa się z sekcją, wycięty przedmiot stoi wprost na kolorze, a zdjęcie, którego nie da się wtopić (biały packshot, wnętrze, plener), stoi jako wyraźny blok przy krawędzi ekranu. Nagłówki są grube i szerokie, tekst prosty, a poza kolorem nie ma ozdób.

## Kroje

- Nagłówki, nazwy wariantów i ceny: **Unbounded**, wagi 700 i 900.
- Tekst i przyciski: **Onest**, 400 i 600.

## Kolory

Kolor sekcji wariantu bierze się z jego zdjęcia (część „Zdjęcia”). Różnice kolorów liczysz w OKLab razy 100 (ΔE): przy 2 kolory obok siebie ledwo da się odróżnić, przy 10 to wyraźnie inny odcień.

- Tekst: biały albo ciemny w barwie sekcji (OKLCH L 0,25, chroma 0,04–0,09, w razie potrzeby L 0,20), ten, który ma kontrast co najmniej 4,5:1.
- Kolor wzięty z przedmiotu ma jasność L 0,70–0,85 pod ciemny tekst albo 0,35–0,50 pod biały.
- Sąsiednie warianty różnią się co najmniej o ΔE 10. Gdy wypadają bliżej, zmieniasz jasność jednego o 0,06–0,10 i wyrównujesz jego zdjęcie do nowego koloru, bez zmiany kolejności sekcji.
- `--ciemny` (o marce, stopka): OKLCH L 0,20, chroma 0,05, barwa pierwszego wariantu.

```css
:root {
  --wariant-1: #f99aa7;  /* róż z tła zdjęcia 1 */
  --wariant-2: #e35b04;
  --wariant-3: #d5bea3;
  --wariant-4: #79bbbc;
  --ciemny: #2a0a10;
}
```

Strona nie ma białego tła. Hero stoi na kolorze pierwszego wariantu, a inne sekcje bez zdjęcia (zestawy, opinie, miejsca sprzedaży) na kolorze jednego z wariantów albo na `--ciemny`.

## Siatka i odstępy

- Treść najwyżej 1440 px, margines boczny 40 px na laptopie i 18 px na telefonie.
- Sekcja wariantu ma `min-height: 100svh`.
- Między wariantami stoi pas przejścia wysoki na 28vh: `linear-gradient(in oklch, …)` od koloru jednej sekcji do następnej, z punktami na 30% (18% drugiego koloru) i 70% (82%). Pas stawiasz tylko, gdy barwy różnią się o mniej niż około 120°, bo inaczej gradient przechodzi przez fiolet albo zieleń. Odleglejsze barwy (turkus i róż, turkus i pomarańcz) i sekcje, które nie są wariantami, łączy twarde cięcie.
- Przy ponad 6 wariantach sekcja ma `min-height: 75svh`, a pas 16vh. Przy ponad 10 warianty stoją na laptopie parami: dwie sekcje po pół szerokości, każda w swoim kolorze, bez pasa między nimi.

## Typografia

- Nazwa marki w hero: Unbounded 900 na całą szerokość treści, interlinia 0.85, około 0.3em zapasu pod spodem na ogonek Ą i kropkę Ż.
- Nazwa wariantu: Unbounded 900 wersalikami, `clamp(56px, 10vw, 180px)`, interlinia 0.88, odstęp liter −0.02em, nigdy szersza niż miejsce na nią. Kontener ma `overflow: clip` i zapas na przesuw o 8%.
- H2: Unbounded 700, `clamp(32px, 4vw, 64px)`. Tekst: Onest 18 px, interlinia 1.5.
- Cena: Unbounded 900. Skład i pojemność: Onest 600 wersalikami 13 px, odstęp liter 0.08em.

## Elementy

- **Nawigacja:** pełne tło w kolorze sekcji pod nią, w pasach przejścia mieszane na bieżąco (`color-mix(in oklch, …)`). Marka Unbounded 900 20 px, linki Onest 15 px, po prawej licznik koszyka w kółku z obramowaniem 1.5 px.
- **Hero:** na całą szerokość nazwa marki, a gdy jej nie ma, główny nagłówek hero w tym samym kroju. Pod nim pas kolorów wariantów jako menu: pionowe paski z nazwą wariantu u dołu, kliknięcie przewija do sekcji. Bez nazw wariantów w hero paski mają numery 01, 02…, a nazwę dla czytników ekranu dostają przez `aria-labelledby` z nagłówka sekcji wariantu. Pasek w kolorze hero ma u góry linię 1.5 px. Ponad 8 wariantów: dwa rzędy.
- **Nagłówek nad listą wariantów** („Nasze kremy”): krótki pas na kolorze pierwszego wariantu.
- **Sekcja wariantu:** numer i ogromna nazwa, zdjęcie według jego drogi, skład, pojemność, cena i przycisk, a zdjęcie co sekcję zmienia stronę. Przy bloku nazwa stoi na laptopie nad nim na całą szerokość treści albo w kolumnie tekstu, najwyżej na 84% jej szerokości.
- **Przyciski:** zaokrąglenie 999 px, tło w kolorze tekstu sekcji, napis w kolorze sekcji, wysokość 54 px, Onest 600 16 px.
- **O marce:** sekcja na `--ciemny` z tekstem w kolorze pierwszego wariantu.
- **Listy:** linie 1.5 px w kolorze tekstu sekcji.

## Zdjęcia

Każde zdjęcie mierzysz na pasie szerokim na 5% krótszego boku wzdłuż krawędzi i przypisujesz do drogi. Pierwszy spełniony warunek rozstrzyga:

| Warunek | Droga |
|---|---|
| Plik ma kanał alfa, a co najmniej 5% pikseli pasa ma krycie poniżej 250 | wycięty przedmiot |
| Szczegóły zajmują ponad 8% pasa albo na zdjęciu widać miejsce, a nie przedmiot na tle | scena |
| Mediana pasa ma chromę poniżej 0,03 (biel, szarość, czerń) | białe tło |
| Wszystko inne | kolorowe tło |

Szczegóły to piksele pasa, w których rozmycie gaussem o sigmie 1,5 px różni się od rozmycia o sigmie 8 px o więcej niż 4 (w skali 0–255) w którymkolwiek kanale. Rozrzut to największa różnica ΔE między medianami 16 odcinków pasa (po 4 na krawędź, bez przeciętych przez przedmiot); powyżej 15 tło ma gradient albo linię stołu i wyrównanie wymaga maski z modelu. W planie podajesz przy każdym wariancie drogę, kolor sekcji i to, co zrobisz ze zdjęciem.

### Kolorowe tło

- Kolor sekcji to mediana całego pasa.
- Tło zdjęcia wyrównujesz do koloru sekcji według dodatku. Przedmiot zostaje bez zmian, a oryginał w kopii; to traktowanie dopuszcza część „Treść zostaje”.
- Zdjęcie stoi bez ramki i bez maski. Maskę 6–12% dostaje tylko bok, przez który przedmiot wychodzi z kadru (ręka z boku, podstawka ucięta dołem). Zdjęcia poziome dochodzą do krawędzi ekranu, pionowe stoją w siatce.
- Odmiana: gdy barwa każdej mediany odcinka różni się od barwy sekcji najwyżej o 30°, wolno zostawić gradient tła. Zdjęcie dochodzi wtedy do krawędzi ekranu bokiem, na którym tło najbardziej odbiega od sekcji, a pozostałe boki wtapiasz maską 10–26%.

### Białe tło

- Kolor sekcji bierzesz z przedmiotu.
- Zdjęcie stoi jako blok: ostre krawędzie, bez maski i zaokrągleń, proporcja 4:5 albo 1:1, przy krawędzi ekranu, na całą wysokość sekcji.
- Czyste tło (rozrzut poniżej 3, szczegóły poniżej 1%) zostawiasz bez zmian, a winietę, szare rogi albo blat wyrównujesz do mediany tła według dodatku.
- Przemalowanie tła na kolor sekcji albo wycięcie przedmiotu tylko za zgodą użytkownika, po pokazaniu jednego zdjęcia przed i po.

### Wycięty przedmiot

- Stoi wprost na kolorze sekcji, bez ramki i dorysowanego cienia (cień z pliku zostaje).
- Kolor sekcji z przedmiotu. Gdy jego największa grupa różni się od sekcji o mniej niż ΔE 12, przesuwasz jasność sekcji co 0,04 w zakresie 0,70–0,85 (w dół przy jasnym przedmiocie, w górę przy ciemnym), a gdy to nie wystarcza, bierzesz L 0,50 pod biały tekst.

### Scena

- Zdjęcia nie wtapiasz, a kolor sekcji bierzesz z przedmiotu albo głównej rzeczy w kadrze.
- Zdjęcie stoi jako blok: na laptopie pełna połowa sekcji od krawędzi ekranu, na całą wysokość (`object-fit: cover`), na telefonie cała szerokość w proporcji 4:5. Krawędź od strony treści jest ostra.

### Kolor z przedmiotu

Piksele przedmiotu (alfa maski albo pliku co najmniej 0,98, w scenie bez maski środkowe 60% kadru) przeliczasz na OKLab i dzielisz metodą k-średnich na 5 grup. Odrzucasz grupy o chromie poniżej 0,02 i mniejsze niż 10% pikseli przedmiotu, z reszty bierzesz największą (przy różnicy wielkości poniżej 25% bardziej nasyconą). Sekcja dostaje jej barwę, L 0,78 i chromę co najmniej 0,10 albo najwyższą możliwą w sRGB, także gdy grupa jest pastelowa (chroma 0,02–0,04). Gdy żadna grupa nie zostaje (biały kubek, czarne słuchawki), kolor podaje użytkownik albo proponujesz go z nazwy wariantu.

### Brak zdjęcia i mieszane drogi

- Bez zdjęcia w sekcji stoi sama nazwa wariantu, jeszcze większa. Przy nowej stronie możesz zaproponować opis do generatora: „[przedmiot] na gładkim tle studyjnym w kolorze #F99AA7, ten sam kolor na ścianie i blacie, bez linii horyzontu, miękkie światło z boku, miękki cień kontaktowy, bez gradientu i winiety, przedmiot na najwyżej 60% kadru, kadr 4:5”. Bez zgody niczego nie generujesz.
- Gdy co najmniej połowa zdjęć to bloki (białe tło, scena), blokami stoją wszystkie, żeby warianty wyglądały jak jedna seria.

## Ruch

- Nazwa wariantu przesuwa się z przewijaniem sekcji od `translateX(8%)` do `translateX(-8%)` (procent jej szerokości), a w połowie sekcji stoi w spoczynku.
- Zdjęcie wtopione i wycięty przedmiot przy wejściu obracają się z −3° do 0° i rosną ze skali 0.94 do 1.0, 900 ms, `cubic-bezier(.2, .8, .2, 1)`. Blok się nie obraca, tylko odsłania od krawędzi ekranu (`clip-path` od `inset(0 0 0 100%)` albo z drugiej strony do `inset(0)`).
- Nawigacja przejmuje kolory sekcji pod sobą w 300 ms.
- Pasek w hero najechany albo dotknięty rozszerza się kosztem pozostałych (`flex-grow` z 1 do 2.2, 450 ms).

## Telefon

- Nawigacja w dwóch wierszach: marka i koszyk, pod nimi linki.
- Hero: pas kolorów jako poziome paski jeden pod drugim.
- Sekcja wariantu: nazwa, zdjęcie, skład, cena i przycisk jeden pod drugim. Zdjęcie na całą szerokość, blok 4:5. Linia przycięcia kadru wypada na wyrównanym tle, nie na przedmiocie ani cieniu.
- Pasy przejścia na 18vh.

## Czego nie robić

- Białych i szarych sekcji, także pod packshoty na białym tle.
- Maski na zdjęciu, którego tło ma inny kolor niż sekcja albo jest sceną: zostaje po niej miękki prostokąt innego koloru.
- Poprawiania przedmiotu przy wyrównaniu tła, a bez zgody wycinania, przemalowywania tła i generowania zdjęć.
- Gradientów z kolorów spoza zdjęć, cieni pod zdjęciami, ramek i ilustracji owoców czy kropli.

## Dodatek: wyrównanie tła

Cel: tło ma przy krawędziach dokładnie kolor docelowy (sekcji albo bieli), a przedmiot i jego cień kontaktowy zostają bez zmian. Pracujesz na oryginale w pełnej rozdzielczości, w RGB 0–255 na liczbach zmiennoprzecinkowych (na przykład Python z numpy, scipy i Pillow). Rozmycia to gauss, podane wartości to sigma.

1. **Maska przedmiotu** z lokalnego modelu do wycinania tła (na przykład `rembg` z `birefnet-general`): sama maska z miękką krawędzią, zdjęcia nie wycinasz. Przedmiot to alfa co najmniej 0,98. Bez modelu (tylko przy rozrzucie do 15) przedmiotem jest piksel różny od pola tła (krok 2) o ponad ΔE 9, który nie jest cieniem (ciemniejszy od tła, z różnicą barwy poniżej połowy różnicy jasności plus 5); potem wypełniasz dziury i usuwasz plamki poniżej 1500 px.
2. **Pole tła:** piksele spoza maski powiększonej o 8 px rozmywasz splotem znormalizowanym (rozmyte zdjęcie razy wagi, przez rozmyte wagi) z sigmą 3% krótszego boku, a większe dziury wypełniasz tak samo z sigmą 10% i 30%. Pięć przebiegów, w każdym odrzucasz piksele różne od pola o ponad ΔE 4,5 (cienie, odbicia).
3. **Linia stołu:** pole liczysz osobno nad linią ściany i blatu (najsilniejszy poziomy skok jasności poza przedmiotem, dopasowany prostą) i pod nią, przejście bierzesz z profilu w poprzek linii, a resztkowy ślad usuwasz, uśredniając resztę wzdłuż linii (sigma 20 px, pas ±24 px).
4. **Reszta** to zdjęcie minus pole, rozmyta z sigmą 2,5 px tylko po tle: cienie i odbicia zostają, znika ziarno, z którego WebP robi w płaskim tle kratkę.
5. **Tło** to kolor docelowy plus reszta razy k. k = 1 tam, dokąd sięga cień kontaktowy (zwykle 4–8% krótszego boku), i łagodnie spada do 0 przy 15–25% od przedmiotu oraz na ostatnich 10% przy krawędziach. Reszta słabsza niż 2 poziomy dostaje 0, mocniejsza niż 6 zostaje cała. Cień rzucony daleko na ścianę usuwasz.
6. **Składanie:** do 4 px od maski wynik = zdjęcie + (1 − alfa) × (kolor docelowy − pole), więc miękka krawędź nie zostawia obwódki. Dalej bierzesz tło z kroku 5, które na ostatnich 2,5% przy krawędziach przechodzi płynnie w dokładny kolor docelowy.
7. **Sprawdzenie:** przed kompresją piksele przedmiotu są identyczne z oryginałem. Po zapisie do WebP (jakość 80) mediana pasa 2% przy każdej krawędzi różni się od koloru docelowego najwyżej o 2 w każdym kanale, poza bokiem, przez który przedmiot wychodzi z kadru. Wynik oglądasz w pełnej rozdzielczości na prostokącie w kolorze sekcji i z różnicą wzmocnioną sześć razy.

## Kontrola na koniec

- Obejrzyj stronę na szerokości 390 px (telefon) i 1440 px (laptop), od góry do dołu, z przewijaniem. Nic nie wystaje poza ekran w poziomie, a żaden tekst nie nachodzi na inny.
- Polskie znaki w nagłówkach są w tym samym kroju co reszta słowa. Jeśli „ą” albo „ł” wygląda inaczej, plik kroju nie ma zestawu latin-ext.
- Przy systemowym ustawieniu „ogranicz ruch” animacje się wyłączają, a cała treść jest widoczna od razu.
- Zwykły tekst ma kontrast co najmniej 4,5:1 do tła, a duże nagłówki co najmniej 3:1. Kolory z przepisu są dobrane pod te progi, ale jeśli na stronie stoją na innym tle niż w przepisie, sprawdź je jeszcze raz.
- Nawigacja, która stoi nad treścią, nie liczy się jako tekst nachodzący na inny, o ile w każdym miejscu jest czytelna.
- Każde zdjęcie ma przypisaną drogę, a użytkownik dostał ją w planie razem z kolorem sekcji.
- Na zrzutach laptopa i telefonu w pełnej rozdzielczości nie widać granicy wtopionego zdjęcia ani plamy innego koloru wokół przedmiotu, także przy przycięciu kadru. Blok ma ostre krawędzie i dochodzi do krawędzi ekranu.
- Sąsiednie warianty różnią się co najmniej o ΔE 10, a każdy tekst ma kontrast co najmniej 4,5:1 do swojej sekcji.
- Przy przebudowie porównanie tekstu przed i po daje zero różnic.

# Przepis na styl OFERTA

Styl do landingu jednej usługi, jednego produktu albo marki jednej osoby. Każda sekcja to osobny arkusz z dużym zaokrągleniem, w jednym z pięciu pełnych kolorów, leżący na ciepłym szarym tle. Przy przewijaniu następny arkusz wjeżdża na poprzedni jak kartka kładziona na kartkę. Nagłówki w ciężkim, miękkim szeryfie, zdjęcia przedmiotów na jednolitym tle dochodzą do krawędzi arkusza.

Ten plik to przepis na wygląd strony internetowej dla agenta, który pisze kod: Claude Code'a, Codexa, Cursora albo podobnego. Nie ma w nim treści, tylko wygląd: kroje, kolory, siatka, elementy, zdjęcia i ruch.

## Jak z niego korzystasz

Przeczytaj cały przepis, zanim cokolwiek zmienisz. Potem sprawdź, w której sytuacji jesteś:

- **Strona już istnieje.** Zmieniasz wyłącznie wygląd. Treść i działanie strony zostają nietknięte, a zasady są niżej, w części „Treść zostaje”.
- **Strony jeszcze nie ma.** Budujesz ją od razu w tym stylu. Teksty, zdjęcia, ceny i dane kontaktowe bierzesz od użytkownika. Jeśli czegoś brakuje, wstawiasz tekst zastępczy w nawiasie kwadratowym, na przykład [adres], i nie zmyślasz faktów.

Zanim zaczniesz, napisz użytkownikowi w kilku krótkich punktach, co zmienisz, i poczekaj na zgodę. Liczby w przepisie (stopnie pisma, odstępy, czasy ruchu) są ustawione pod typowy landing. Przy bardzo długich tekstach albo nietypowych sekcjach dopasuj je tak, żeby styl dalej był rozpoznawalny. Przepis to szkic stylu, a nie sztywna instrukcja: jeśli użytkownik chce innych kolorów albo innego kroju, zmieniasz je tak, jak prosi, a resztę przepisu stosujesz dalej.

## Treść zostaje

Te zasady obowiązują zawsze, kiedy przebudowujesz stronę, która już istnieje.

- Każde słowo zostaje takie samo: nagłówki, akapity, ceny, przyciski, menu, stopka, teksty alternatywne zdjęć, tytuł strony i opisy dla wyszukiwarek. Nie poprawiasz, nie skracasz, nie tłumaczysz i niczego nie dopisujesz.
- Sekcje zostają w tej samej kolejności. Linki, formularze, koszyk, skrypty analityczne, piksele reklamowe i wtyczki działają tak samo jak wcześniej.
- Zdjęcia zostają te same. Wolno je przyciąć, zmienić proporcje kadru i nałożyć traktowanie opisane w tym przepisie, ale nie podmieniasz ich na inne i nie generujesz nowych.
- Zmieniasz krój, kolory, odstępy, rozmieszczenie elementów wewnątrz sekcji, wygląd przycisków, kart i pól formularzy oraz ruch.
- Jeśli jakiś element stylu wymaga treści, której na stronie nie ma (na przykład styl przewiduje liczby w nagłówku, a strona ich nie ma), pomijasz ten element zamiast dopisywać treść. Treści nie przenosisz też między sekcjami, żeby wypełnić element stylu.
- Jeśli na stronie jest coś, czego styl zakazuje (na przykład emoji albo strzałki w przyciskach), to zostaje, bo jest treścią. Możesz to wyciszyć wyglądem, a o usunięcie pytasz użytkownika.
- Numery porządkowe sekcji (01, 02…) wolno dodać jako element wyglądu, w CSS (licznik i `::before`), a nie w HTML. Wolno też dodać napisy sterujące, których wymaga obsługa strony na telefonie, na przykład „Menu” i „Zamknij”. Nazw sekcji, etykiet pól ani innych słów, których na stronie nie było, nie dodajesz.
- Działanie strony też zostaje: rozwijane pytania startują w tym samym stanie co wcześniej, formularz wysyła się tak samo i pokazuje te same komunikaty. Opisane w przepisie komunikaty i stany startowe stosujesz tylko przy nowej stronie.
- Przed zmianami zrób kopię plików strony obok jej folderu, a nie w nim, żeby nie zepsuć ścieżek względnych. Po zmianach wyciągnij cały widoczny tekst z wersji przed i po (najprościej skryptem, który zbiera tekst ze wszystkich podstron) i porównaj obie wersje. Przy porównaniu wyłącz `text-transform`, zamień twarde spacje na zwykłe i zwiń wszystkie odstępy do pojedynczych spacji, bo inaczej wersaliki i spacje z przepisu wyjdą jako fałszywe różnice. Różnica ma wynosić zero znaków, a wynik porównania pokazujesz użytkownikowi.

## Kroje: skąd je wziąć

Wszystkie kroje z tego przepisu są darmowe, także do użytku komercyjnego, i mają polskie znaki. Pobierz je z Google Fonts w formacie WOFF2, razem z zestawem znaków latin-ext, i podepnij z serwera strony zamiast ładować z serwerów Google. Strona otwiera się wtedy szybciej, a przeglądarka odwiedzającego nie wysyła jego adresu IP do Google, co w Unii bywa problemem przy RODO. Przy krojach ze zmienną wagą albo szerokością pobierz plik zmienny, a przy krojach z rozmiarem optycznym wariant z osią opsz, bo inaczej część wag i ustawień z przepisu nie zadziała.

## Charakter

Landing, który da się przejrzeć jak plik kartek na stole. Każda sekcja jest arkuszem: ma pełny kolor, duży promień na wszystkich czterech rogach i wąski margines, przez który widać tło strony. Arkusze przyklejają się pod nawigacją, a następny wjeżdża na poprzedni, który w tym czasie lekko się cofa i ciemnieje. Zaokrąglone są tylko arkusze, przyciski i pola formularza. Wszystko wewnątrz arkusza jest proste: linie, kolumny, duże cyfry, a zdjęcie nie ma własnych rogów, tylko dochodzi do krawędzi arkusza i dostaje jego zaokrąglenie przez przycięcie. Wezwanie do głównego celu strony ma jeden wygląd od nawigacji po formularz na końcu.

## Kroje

- Nagłówki, nazwa firmy w nawigacji, ceny, duże cyfry kroków i faktów, cytaty z opinii i pytania: **Young Serif**, jedyna waga 400. Kroju nie pogrubiasz sztucznie i nie pochylasz (nie ma kursywy).
- Wszystko inne (akapity, menu, przyciski, etykiety, pola formularza, podpisy): **Schibsted Grotesk**, plik zmienny z wagami 400–900. Tekst 400, menu i etykiety 500, przyciski 600.
- Ceny, godziny i numery: `font-variant-numeric: lining-nums tabular-nums`, twarda spacja przed „zł”.

## Kolory

```css
:root {
  --rama: #dcd6ca;   /* tło strony: margines dookoła arkuszy i pasek nawigacji */
  --kosc: #f4eddd;   /* arkusz jasny (hero), pola formularza, menu na telefonie */
  --filc: #a3141b;   /* arkusz czerwony, arkusz z formularzem, przycisk na jasnych arkuszach */
  --ochra: #efb22f;  /* arkusz żółty, przycisk na arkuszach zielonym i ciemnym */
  --sukno: #163f2a;  /* arkusz zielony */
  --heban: #18130f;  /* tekst na jasnych arkuszach, arkusz z cennikiem, stopka */
  --promien: clamp(24px, 2.8vw, 44px);  /* jedyny promień na stronie, 0 wyłącza wszystkie zaokrąglenia */
  --ramka: 12px;     /* margines dookoła arkuszy, 8 px poniżej 700 px szerokości */
}
```

Każdy arkusz ma swój kolor tekstu i przycisku:

| Arkusz | Tekst | Przycisk (tło / napis) |
|---|---|---|
| `--kosc` | `--heban` | `--filc` / `--kosc` |
| `--filc` | `--kosc` | `--kosc` / `--filc` |
| `--ochra` | `--heban` | `--heban` / `--ochra` |
| `--sukno` | `--kosc` | `--ochra` / `--heban` |
| `--heban` | `--kosc`, ceny w `--ochra` | `--ochra` / `--heban` |

Tekst drugorzędny (opisy pod nazwami, podpisy, dopiski) to kolor tekstu arkusza zmieszany w 78% z kolorem arkusza (`color-mix(in srgb, tekst 78%, arkusz)`), linie w 28%. Tak dobrane pary mają co najmniej 4,5:1. Czerwonego tekstu nie stawiasz na ochrze (4,1:1).

**Kolejność kolorów.** Pierwszy arkusz (hero) jest `--kosc`. Kolejne idą w stałej kolejce `--filc`, `--ochra`, `--sukno`, `--kosc` i od nowa. Poza kolejką są trzy arkusze: cennik (albo sekcja z najważniejszymi liczbami, jeśli cennika nie ma) i stopka dostają `--heban`, a arkusz z formularzem albo ostatnim wezwaniem `--filc`. Arkusz poza kolejką nie przesuwa kolejki. Jeśli dwa sąsiednie arkusze wyszłyby w tym samym kolorze, drugi bierze następny kolor z kolejki. Przykłady:
- 5 sekcji (hero, oferta, cennik, formularz, stopka): kość, filc, heban, filc, heban.
- 10 sekcji jak na stronie pokazowej: kość, filc, ochra, sukno, heban (cennik), kość, filc, ochra, filc (formularz), heban (stopka).
- 12 sekcji: kość, filc, ochra, sukno, kość, filc, heban (cennik), ochra, sukno, kość, filc (formularz), heban (stopka).
- Bez cennika i formularza: `--heban` dostaje tylko stopka.

Jeśli firma ma własny kolor marki, zastępuje on `--filc` (arkusz i przyciski), pod warunkiem że `--kosc` ma na nim co najmniej 4,5:1. Pozostałe kolory zostają, bo bez nich styl przestaje być rozpoznawalny.

## Siatka i odstępy

- **Rama:** tło strony `--rama`. Arkusze mają `--ramka` marginesu z boków i taki sam odstęp między sobą. Arkusz jest blokiem na całą szerokość okna minus rama, bez kontenera o stałej szerokości.
- **Wnętrze arkusza:** odstęp od krawędzi `clamp(22px, 4vw, 64px)` z boków i 1,2 raza tyle u góry i na dole. Treść w 12 kolumnach z odstępem 24 px, najwyżej 1320 px szerokości, wyśrodkowana w arkuszu. Poniżej 900 px arkusz z połówkami zmienia się w jedną kolumnę (`grid-template-columns: minmax(0, 1fr)`, zdjęcie nad tekstem). Treść w środku arkusza ma własne progi, opisane w części „Telefon”.
- **Wysokość:** na laptopie każdy arkusz ma co najmniej wysokość ekranu pod nawigacją (`calc(100svh - nawigacja - ramka)`), więc jeden ekran to zawsze jeden arkusz. Nagłówek sekcji stoi u góry arkusza, a treść spływa do dołu (`display: flex; flex-direction: column; justify-content: space-between`, między nimi co najmniej 56 px). Wyjątki: hero (opis niżej) i stopka, która ma wysokość treści. Na telefonie arkusz ma wysokość treści.
- **Początek sekcji:** w lewym górnym rogu arkusza numer i nazwa sekcji („02 W cenie wizyty”), pod nimi 24 px odstępu i H2 w kolumnach 1–8. Numer to element wyglądu, wolno go dodać, najlepiej licznikiem CSS w `::before`, żeby nie wszedł do tekstu strony. Nazwę bierzesz z treści strony (z menu albo z nadtytułu), a jeśli sekcja nie ma nazwy albo nazwa brzmi tak samo jak H2 („Cennik” nad „Cennik”), zostaje sam numer.
- **Zdjęcie obok tekstu:** zdjęcie zajmuje połowę arkusza (kolumny 7–12 albo 1–6, w kolejnych arkuszach na zmianę) i dochodzi do górnej, dolnej i bocznej krawędzi arkusza bez marginesu, a tekst stoi w drugiej połowie. **Pas zdjęcia:** w arkuszu z krokami albo z treścią w kilku kolumnach zdjęcie leży u góry na całą szerokość arkusza, w proporcji 21:9, ale najwyżej na 45% wysokości ekranu, dochodzi do górnej krawędzi i boków, a treść stoi pod nim.
- **Arkusz bez zdjęcia:** etykieta i nagłówek w kolumnach 1–8, treść na całej szerokości albo w dwóch połowach (1–6 i 7–12). W miejsce brakującego zdjęcia nie wstawiasz ikon, ilustracji ani kształtów. Kolor arkusza wystarczy. Strona, która nie ma żadnych zdjęć, też działa w tym stylu: hero dostaje układ bez zdjęcia, a rytm robią kolory arkuszy, duże cyfry i ceny.

## Typografia

- H1: Young Serif `clamp(46px, 5.9vw, 100px)`, interlinia 0.98, odstęp liter −0.02em, najwyżej 11 em szerokości. Krótki nagłówek mieści się przy tym stopniu w połowie arkusza w trzech, czterech wierszach. Długie polskie słowa łamią ten rachunek, więc wiersze wyrównujesz `text-wrap: balance`, bez dzielenia wyrazów i bez samotnego słowa w ostatnim wierszu, a jeśli najdłuższe słowo nie mieści się w połowie arkusza, zmniejszasz stopień, aż się zmieści. W hero bez zdjęcia 1,25 raza większy i do 16 em.
- H2: Young Serif `clamp(36px, 4.2vw, 64px)`, interlinia 1.02, odstęp liter −0.015em, najwyżej 14 em.
- H3 (nazwy w listach, kroki, pozycje cennika, pytania): Young Serif `clamp(22px, 2vw, 30px)`, interlinia 1.12.
- Liczby: ceny Young Serif `clamp(44px, 4.4vw, 68px)`, cyfry kroków `clamp(64px, 7vw, 112px)`, fakty `clamp(40px, 3.6vw, 56px)`, wszystkie z interlinią 1. Słowo przy liczbie („około”, „od”) w faktach ma 0.36 wielkości liczby i stoi przed nią w tym samym wierszu.
- Akapit wstępu: Schibsted Grotesk 400 `clamp(18px, 1.45vw, 21px)`, interlinia 1.45, najwyżej 32 em.
- Tekst: Schibsted Grotesk 400 17 px (16 px na telefonie), interlinia 1.55, najwyżej 34 em.
- Etykiety (numer i nazwa sekcji, nazwy pól, podpisy pod liczbami): Schibsted Grotesk 500 15 px, bez wersalików, numer z cyframi tabelarycznymi i 12 px odstępu przed nazwą.
- Wezwanie na nowej stronie: zdaniem, z wielkiej litery, bez wykrzyknika i bez strzałki. Przy przebudowie napis zostaje taki, jaki był.
- Wiersze dzielisz tak, żeby na końcu wiersza nie zostały jednoliterowe spójniki i przyimki (twarda spacja po „w”, „z”, „i”, „a”, „o”, „u”), a w nagłówkach `text-wrap: balance`.

## Elementy

- **Nawigacja:** pasek na tle `--rama`, wysokość 64 px (56 px na telefonie), przyklejony do góry, bez linii i bez cienia. Po lewej nazwa firmy Young Serif 26 px (22 px na telefonie) albo logo z pliku, na środku linki Schibsted Grotesk 500 15 px co 32 px (po najechaniu podkreślenie 1,5 px rysowane od lewej), po prawej przycisk główny w mniejszym wariancie (44 px wysokości, 15 px, odstęp 0 20 px). Poniżej 900 px zamiast linków i przycisku jest napis „Menu” (Schibsted Grotesk 600 15 px) po prawej.
- **Arkusz:** `border-radius: var(--promien)`, `overflow: hidden`, `position: sticky` i `top` równe wysokości nawigacji. Arkusz wyższy niż ekran przykleja się dopiero wtedy, kiedy jego dół dojdzie do dołu ekranu: `top` liczysz skryptem jako `innerHeight − wysokość arkusza − ramka` (wartość ujemna) i przeliczasz po wczytaniu krojów, przy zmianie rozmiaru okna i przy zmianie wysokości arkusza (`ResizeObserver`, bo rozwinięte pytanie wydłuża arkusz). Arkusz niższy niż 60% wysokości ekranu (na telefonie zdarza się to często) w ogóle się nie przykleja, tylko przewija zwyczajnie, bo przyklejony krótki arkusz zostawia pod sobą pół ekranu przyciemnionego poprzedniego. Bez skryptu arkusze stoją jeden pod drugim bez przyklejania, bo inaczej następny zasłoniłby koniec długiego.
- **Wspólny rodzic:** `position: sticky` działa tylko w obrębie rodzica, więc wszystkie arkusze i stopka muszą być rodzeństwem. Jeśli sekcje stoją w `<main>`, a stopka poza nim, nadajesz `<main>` `display: contents` (znacznik zostaje w kodzie, znika tylko jego pudełko).
- **Koniec stosu:** arkusz tuż przed stopką i sama stopka się nie przyklejają, tylko przewijają zwyczajnie. Inaczej krótka stopka zostaje na stałe na ostatnim arkuszu i zasłania formularz z przyciskiem. Arkusz chowasz (`visibility: hidden`), kiedy arkusze leżące nad nim, czyli późniejsze, razem zakrywają całą jego widoczną część, i kiedy pierwszy nieprzyklejany arkusz nad nim minął nawigację. Arkusz, na który właśnie wjeżdża następny, zostaje widoczny, bo jego kolor w rogach nadjeżdżającego pokazuje, że to stos. Bez tej reguły przez szczeliny ramy i rogi (między formularzem a stopką, przy krótkich arkuszach na telefonie) prześwituje przyciemniony arkusz sprzed kilku ekranów.
- **Kotwice:** linki z menu prowadzą do pustych znaczników przed arkuszami (`display: block; height: 0`), nie do samych arkuszy, bo przewijanie do przyklejonego elementu bywa niedokładne, z `scroll-margin-top` równym wysokości nawigacji. Płynne przewijanie do kotwic robisz skryptem i tylko przy włączonym ruchu. `scroll-behavior: smooth` na całej stronie odpada, bo psuje przewijanie sterowane skryptem (podglądy, testy, stronę w ramce).
- **Hero:** pierwszy arkusz, `--kosc`, wysoki na ekran pod nawigacją minus 44 px (`calc(100svh - 64px - 2 * var(--ramka) - 44px)`, co najmniej 540 px), tak żeby u dołu pierwszego ekranu wystawała górna krawędź następnego arkusza z zaokrąglonymi rogami. Od pierwszego ekranu widać, że strona to stos arkuszy. Po lewej w kolumnach 1–6: etykieta u góry, a na dole H1, akapit wstępu, przycisk i pod nim jedna linijka stanu (najbliższy termin, godziny otwarcia, termin wysyłki) Schibsted Grotesk 500 15 px w kolorze drugorzędnym. Po prawej zdjęcie na pół arkusza, dochodzące do trzech krawędzi. Bez zdjęcia: H1 na całą szerokość, a pod nim akapit i przycisk w kolumnach 1–6.
- **Przyciski:** prostokąt z promieniem `calc(var(--promien) / 2)`, wysokość 56 px, odstęp 0 28 px, Schibsted Grotesk 600 17 px, kolory z tabeli w „Kolorach”, bez ramki, cienia i strzałki. Po najechaniu nad tłem pojawia się warstwa w kolorze napisu z kryciem 0.12, po naciśnięciu przycisk zjeżdża o 1 px. Drugi przycisk (każde inne wezwanie niż główne) to sam tekst Schibsted Grotesk 600 17 px z podkreśleniem 1,5 px odsuniętym o 5 px. Wygląd przycisku głównego dostaje każde wezwanie prowadzące do tego samego celu (formularz, zakup, zapis). Na nowej stronie wszystkie mają jedno brzmienie. Przy przebudowie brzmienie zostaje takie, jakie było, a jednolity jest wygląd: kształt, krój i wielkość, kolor z tabeli dla arkusza, na którym przycisk stoi.
- **Lista powodów albo sytuacji** („z czym przychodzą ludzie”): wiersze z linią 1 px na górze, nazwa jako H3 po lewej (kolumny 1–5), jedno zdanie po prawej (kolumny 6–12), odstęp 22 px u góry i na dole wiersza. Ostatni wiersz ma też linię na dole. Obok zdjęcia na pół arkusza nazwa i zdanie stoją jedno pod drugim.
- **Lista „co dostajesz”:** dwie kolumny par nazwa (H3) i opis pod nią, z linią 1 px nad każdą parą, bez ikon i bez numerów.
- **Kroki:** w rzędzie po cztery (przy trzech po trzy, przy pięciu i więcej po trzy w dwóch rzędach), oddzielone pionowymi liniami 1 px, 24 px od linii. W każdym duża cyfra Young Serif, 20 px pod nią H3 i dwa, trzy zdania w kolorze drugorzędnym. Cyfry, nazwy i opisy w sąsiednich krokach stoją na tych samych liniach, także kiedy nazwy mają różną liczbę wierszy (`grid-template-rows: subgrid`). Na telefonie jeden pod drugim, cyfra 64 px w kolumnie 72 px po lewej, tekst po prawej.
- **Cennik:** arkusz `--heban`. Pozycje w kolumnach oddzielonych pionową linią 1 px (najwyżej cztery w rzędzie, przy pięciu i więcej tabela wierszy z ceną wyrównaną do prawej). W kolumnie: nazwa H3 w `--kosc`, 28 px niżej cena Young Serif w `--ochra`, 16 px pod nią opis w kolorze drugorzędnym. Wszystkie ceny stoją w jednej linii, nawet kiedy nazwy mają po jednym i po trzy wiersze (`subgrid`, jak w krokach). Pod kolumnami linia 1 px, a pod nią w jednym rzędzie dopisek po lewej i jeden przycisk główny po prawej, jeśli strona ma taki dopisek albo wezwanie. Na nowej stronie nie dajesz przycisku w każdej kolumnie. Przy przebudowie przyciski z kolumn zostają, ale jako drugi przycisk (tekst z podkreśleniem) pod opisem. Żadna kolumna nie jest wyróżniona tłem, ramką ani powiększeniem. Jeśli strona ma plakietkę „najczęściej wybierany”, zostaje jako etykieta Schibsted Grotesk 500 15 px w kolorze `--ochra` nad nazwą pakietu, bez tła. Bez przekreślonych cen.
- **Kto za tym stoi:** zdjęcie na pół arkusza, obok H2, akapit i rząd faktów: liczba Young Serif, 10 px pod nią podpis Schibsted Grotesk 500 15 px w kolorze drugorzędnym, kolumny oddzielone pionową linią 1 px. Na telefonie fakty jeden pod drugim, liczba po lewej, podpis obok.
- **Opinie:** cytaty Young Serif `clamp(24px, 2.2vw, 34px)`, interlinia 1.2, w cudzysłowie polskim „…”. Pod cytatem podpis Schibsted Grotesk 500 15 px, a pod nim w kolorze drugorzędnym, czego dotyczy opinia. Cytaty jeden pod drugim z linią między nimi albo w trzech kolumnach z pionowymi liniami. Bez gwiazdek, zdjęć klientów i karuzeli.
- **Pytania:** wiersze z linią 1 px na górze, pytanie H3 po lewej i plus po prawej: dwie kreski 1,5 px, 22 na 22 px, przycisk z odstępem 20 px u góry i na dole. Odpowiedź rozwija się pod pytaniem (Schibsted Grotesk 17 px w kolorze drugorzędnym, najwyżej 40 em). Pytanie jest przyciskiem z `aria-expanded`, otwarte może być kilka naraz. Na nowej stronie na start otwarte jest pierwsze, przy przebudowie stan startowy zostaje taki, jaki był. Bez JavaScriptu wszystkie odpowiedzi są widoczne, a plusów nie ma.
- **Formularz:** arkusz `--filc`. Pola to płytki w kolorze `--kosc` z napisem `--heban`, wysokość 56 px, promień `calc(var(--promien) / 2)`, bez ramki, etykieta nad polem Schibsted Grotesk 500 15 px w kolorze tekstu arkusza. Aktywne pole ma obwódkę 2 px w kolorze `--heban` odsuniętą o 2 px. Wybór z dwóch, trzech opcji to rząd takich płytek, a wybrana ma tło `--heban` i napis `--kosc`. Na nowej stronie błąd pokazujesz pod polem napisem „Uzupełnij to pole” w kolorze `--kosc` Schibsted Grotesk 600 14 px i obwódką 2 px `--kosc`, a po wysłaniu formularz zostaje i pod przyciskiem pojawia się jedna linijka odpowiedzi. Przy przebudowie obsługa formularza (wymagane pola, komunikaty, okienka po wysłaniu) zostaje taka, jaka była, a zmieniasz tylko wygląd pól, napisów i przycisku.
- **Arkusz z samymi liczbami** (sekcja, w której są tylko fakty liczbowe): liczby w siatce 2 × 2, Young Serif `clamp(64px, 8.6vw, 148px)`, pod każdą podpis Schibsted Grotesk 500 15 px w kolorze drugorzędnym, między polami linie 1 px (pionowa i pozioma). Przy trzech liczbach trzecia zajmuje cały dolny wiersz. Rząd małych liczb na arkuszu wysokim na cały ekran wygląda jak pusty kolorowy ekran, dlatego liczby są duże. Na telefonie jedna pod drugą, 64 px, z poziomymi liniami.
- **Galeria:** zdjęcia w jednym rzędzie na dole arkusza, w jednakowej proporcji (najlepiej 4:5), dochodzą do dolnej i bocznych krawędzi arkusza. Między nimi szczelina szerokości `--ramka` w kolorze arkusza, bez własnych rogów. Nagłówek sekcji stoi nad nimi jak w każdym arkuszu. Na telefonie zdjęcia w siatce 2 × 2 z tą samą szczeliną.
- **Karta z oceną w hero** (pływająca ramka typu „4,9 ★ z 180 opinii”): zostaje, ale jako wycięcie w rogu zdjęcia, czyli prostokąt w kolorze `--kosc` przyklejony do dolnego rogu zdjęcia od strony tekstu, bez cienia, ramki i własnych zaokrągleń. W środku ten sam odstęp co w arkuszu, liczba Young Serif `clamp(36px, 3.4vw, 52px)`, podpis Schibsted Grotesk 500 15 px w kolorze drugorzędnym.
- **Emoji, symbole i inicjały** (treść, która zostaje przy przebudowie): emoji dostają `filter: grayscale(1)`, krycie 0.6 i wielkość 0.8 em. Symbole ★, ✕ i ✓ mają kolor drugorzędny arkusza. Inicjały w kółkach zamiast zdjęć klientów stają się samą literą Young Serif w stopniu H3, bez kółka i bez tła.
- **Stopka:** ostatni arkusz `--heban`, wysoki na swoją treść. U góry nazwa firmy Young Serif w stopniu H2, pod nią kolumny z linią 1 px u góry, nagłówkiem Schibsted Grotesk 500 15 px w kolorze drugorzędnym i treścią 17 px w `--kosc`. Dane firmy drobnym drukiem 13 px na dole.
- **Menu na telefonie:** arkusz `--kosc` zjeżdża z góry pod nawigację, z promieniem tylko na dolnych rogach, na szerokość ekranu minus ramka. Linki Young Serif 34 px jeden pod drugim, na dole przycisk główny na całą szerokość. Strona pod spodem dostaje warstwę `--rama` z kryciem 0.7. Zamyka je napis „Zamknij” w miejscu „Menu”, Escape i dotknięcie warstwy.

## Zdjęcia

Pierwsze dwa punkty (co pokazują zdjęcia i para kolorów) dotyczą nowej strony. Przy przebudowie obowiązują tylko kadr, filtr i krawędzie z dwóch kolejnych punktów, a kolejkę kolorów zostawiasz bez zmian, nawet jeśli któreś zdjęcie wypadnie na arkuszu w kolorze swojego tła.

- Przedmioty i materiały, z którymi pracuje firma, jako martwa natura na jednolitym, nasyconym tle, z góry albo na wprost, w miękkim świetle dziennym, bez połysku i bez snopów światła. Ludzie tylko przy pracy, z profilu albo od tyłu, nie uśmiechnięci do obiektywu.
- **Para kolorów:** tło zdjęcia ma inny kolor niż arkusz, na którym leży (czerwone zdjęcie na jasnym albo zielonym arkuszu, żółte na czerwonym). Zdjęcie nie zlewa się z arkuszem, tylko leży na nim jak druga kartka.
- Zdjęcie nie ma ramki, cienia ani własnych zaokrągleń. Dochodzi do krawędzi arkusza i dostaje jego promień przez `overflow: hidden`. `object-fit: cover`, kadr ustawiony na środku przedmiotu (`object-position`).
- Jeśli strona ma zdjęcia z różnych sesji, nakładasz na wszystkie `filter: saturate(1.05) contrast(1.03)` i dobierasz im arkusze według reguły pary kolorów. Zdjęcia biurowe albo stockowe nie dostają połowy arkusza: stoją jako pas 21:9 u góry arkusza.

## Ruch

- **Nakładanie arkuszy:** kiedy następny arkusz wjeżdża na przyklejony, przyklejony cofa się ze skali 1 do 0.94 i ciemnieje: warstwa nad nim ma gradient od przezroczystości u góry do `rgb(0 0 0 / .32)` u dołu, a jej krycie rośnie od 0 do 1. Postęp liczysz z położenia następnego arkusza: 0, kiedy jego góra jest u dołu ekranu, 1, kiedy dojdzie pod nawigację. Środek skalowania to środek widocznej części arkusza. Animujesz tylko `transform` i `opacity`, w jednym `requestAnimationFrame` na przewinięcie, i tylko dla arkuszy widocznych na ekranie.
- **Zdjęcie w arkuszu:** w czasie wjeżdżania arkusza od dołu ekranu do miejsca przyklejenia zdjęcie zmniejsza się ze skali 1.08 do 1.
- **Wejście treści:** kiedy góra arkusza minie 75% wysokości ekranu, etykieta, wiersze H2 i kolejne bloki treści wchodzą z 24 px niżej i od krycia 0 do 1, 700 ms, `cubic-bezier(.2, .7, .2, 1)`, kolejne co 70 ms. Akapity wchodzą w całości.
- **Hero po wczytaniu:** wiersze H1 wysuwają się spod maski (z przesunięcia 110% do 0), 900 ms, kolejne co 80 ms, a zdjęcie przechodzi ze skali 1.08 do 1 w 1400 ms, ta sama krzywa. Maska ma zapas 0.06 em u góry i 0.14 em u dołu (ujemny margines), żeby nie ucinała ogonków ą, ę, ł i akcentów nad wielkimi literami. Etykieta, akapit, przycisk i linijka stanu wchodzą z 16 px niżej w 700 ms, po kolei z opóźnieniem 100, 350, 450 i 550 ms. Po skończonej animacji wiersze wracają do zwykłego tekstu, żeby nagłówek łamał się dobrze po zmianie szerokości okna. Wysokość nagłówka w czasie animacji i po niej ma być identyczna, inaczej na końcu nagłówek podskakuje: kontener wierszy ustawiasz jako `display: flex; flex-direction: column`, bo ujemne marginesy sąsiednich bloków by się zlały, a jeśli wiersze są `inline-block` z `overflow: clip`, dostają `vertical-align: top`, bo bez tego linia bazowa przenosi się na dół bloku i nagłówek skacze o kilkanaście pikseli. Sprawdzasz to pomiarem wysokości nagłówka przed końcem animacji i po nim.
- **Pytania:** wysokość odpowiedzi przez `grid-template-rows` od `0fr` do `1fr`, 400 ms, a pionowa kreska plusa skaluje się do zera w 300 ms.
- Ruch nie zależy od myszki: bez efektów za kursorem i bez treści, którą widać dopiero po najechaniu.
- Przy ograniczonym ruchu arkusze dalej przyklejają się i nachodzą na siebie (to zwykłe przewijanie), ale bez skali, przyciemnienia i powiększenia zdjęć, a cała treść i H1 są widoczne od razu.

## Telefon

- Rama 8 px, promień 24 px (dolna granica `--promien`), wnętrze arkusza 22 px z boków i 26 px u góry i na dole, nawigacja 56 px z nazwą i „Menu”, tekst 16 px.
- Hero: zdjęcie na górze arkusza na całą szerokość, w proporcji 4:3, dochodzi do górnej krawędzi i boków. Pod nim etykieta, H1 od 46 px, akapit, przycisk na całą szerokość i linijka stanu. Hero ma co najmniej wysokość ekranu pod nawigacją minus 36 px, żeby przy krótkiej treści wystawała krawędź następnego arkusza.
- Zdjęcie obok tekstu staje nad tekstem, na całą szerokość arkusza, w proporcji 4:3, dochodzi do górnej krawędzi i boków. Pas zdjęcia ma proporcję 4:3.
- Progi treści w arkuszu: od 1199 px do 700 px kroki i cennik stoją po dwa w rzędzie (`repeat(2, minmax(0, 1fr))`), a pary „co dostajesz” w jednej kolumnie. Od 699 px w dół listy, kroki, cennik, fakty, liczby i opinie są w jednej kolumnie (`minmax(0, 1fr)`), z poziomymi liniami zamiast pionowych. Pola formularza i przyciski na całą szerokość.
- Arkusze przyklejają się tak samo jak na laptopie, długie dopiero na swoim końcu, a krótsze niż 60% ekranu wcale.

## Czego nie robić

- Drugiego poziomu zaokrągleń: kart z promieniem wewnątrz arkusza, zdjęć z własnymi rogami, plakietek i przycisków-pigułek z promieniem 999 px.
- Siatek kart z ikonami po trzy w rzędzie, ikon w kółkach, emoji, ilustracji 3D i plakietek nad nagłówkiem („Nowość”, „Najlepszy wybór”).
- Gradientów między kolorami, fioletu, neonów, szkła, rozmytych teł i cieni pod arkuszami. Jedyny gradient na stronie to przyciemnienie arkusza, na który wjeżdża następny.
- Fal, skosów i ząbków między sekcjami: arkusze oddziela rama, nic więcej.
- Gwiazdek przy opiniach, logotypów „zaufali nam”, liczników odliczających promocję i okien z rabatem.
- Na nowej stronie: kilku różnych wezwań jako przycisków głównych obok siebie („Zadzwoń”, „Kup teraz” i „Zapisz się” na jednym ekranie) i strzałek w przyciskach.
- Czarnego tła całej strony: `--heban` to tylko kolor arkusza, rama zostaje jasna.
- Krojów Inter, Roboto, Poppins i Montserrat, pogrubiania Young Serif i nagłówków wersalikami.

## Kontrola na koniec

- Obejrzyj stronę na szerokości 390 px (telefon) i 1440 px (laptop), od góry do dołu, z przewijaniem. Nic nie wystaje poza ekran w poziomie, a żaden tekst nie nachodzi na inny.
- Polskie znaki w nagłówkach są w tym samym kroju co reszta słowa. Jeśli „ą” albo „ł” wygląda inaczej, plik kroju nie ma zestawu latin-ext.
- Przy systemowym ustawieniu „ogranicz ruch” animacje się wyłączają, a cała treść jest widoczna od razu.
- Zwykły tekst ma kontrast co najmniej 4,5:1 do tła, a duże nagłówki co najmniej 3:1. Kolory z przepisu są dobrane pod te progi, ale jeśli na stronie stoją na innym tle niż w przepisie, sprawdź je jeszcze raz.
- Nawigacja, która stoi nad treścią, nie liczy się jako tekst nachodzący na inny, o ile w każdym miejscu jest czytelna.
- Po ustawieniu `--promien: 0` na stronie nie zostaje żadne zaokrąglenie, a układ dalej wygląda porządnie.
- Żadne dwa sąsiednie arkusze nie mają tego samego koloru, a `--heban` mają tylko cennik i stopka.
- Długi arkusz da się przeczytać do końca, zanim wjedzie na niego następny, także na telefonie.
- Wszystkie wezwania do tego samego celu wyglądają jak przycisk główny, a ich kolory zgadzają się z tabelą dla arkusza, na którym stoją.
- Na końcu strony i przy krótkich arkuszach na telefonie przez szczeliny ramy widać tło `--rama` albo arkusz, na który właśnie wjeżdża następny, a nie przyciemnione arkusze sprzed kilku ekranów.
- Na nowej stronie żadne zdjęcie nie stoi na arkuszu w kolorze swojego tła.
- Przy przebudowie porównanie tekstu przed i po daje zero różnic.