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