# 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.