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