# Przepis na styl GALERIA

Styl do stron pracowni architektury, projektantów wnętrz i marek, które sprzedają obrazem. Duże zdjęcia, cienki krój i dużo pustego miejsca, a przez wybrany projekt przechodzi się w poziomie, przewijając stronę w dół.

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

Cisza i światło. Zdjęcie jest bohaterem, a tekst jest jego podpisem. Układ jest asymetryczny i rytmiczny: duże zdjęcie, potem mniejsze z szerokim marginesem, podpis daleko od krawędzi. Puste miejsce nie jest tu stratą, tylko częścią stylu.

## Kroje

- Wszystko w jednej rodzinie: **Epilogue**.
- Duże nagłówki: waga 200, odstęp liter −0.02em.
- Tekst: waga 400, 15 px.
- Etykiety i podpisy: waga 500, 11 px, wersaliki, odstęp liter 0.16em.

## Kolory

```css
:root {
  --tlo: #f2f2f0;
  --tekst: #1a1a18;
  --tekst-2: #6b6b66;   /* drobny tekst, 4,8:1 na tle */
  --linia: #d9d9d4;
}
```

Koloru akcentu nie ma, bo kolor dają zdjęcia.

## Siatka i odstępy

- 12 kolumn, margines boczny 48 px na laptopie i 20 px na telefonie, odstęp między kolumnami 20 px.
- Duże odstępy w pionie: 160–220 px między projektami na laptopie, 96 px na telefonie.
- Zdjęcia stoją w różnych miejscach siatki według rytmu: pełna szerokość, potem para w jednym rzędzie (kolumny 2–7 i 8–12, drugie zdjęcie niżej o 120 px), potem znowu pełna szerokość. Hero liczy się jako pierwsza pełna szerokość, a to samo zdjęcie nie stoi dwa razy w pełnej szerokości tuż po sobie.

## Typografia

- Nazwa pracowni w nawigacji: Epilogue 500, 14 px, wersaliki, odstęp liter 0.16em.
- H1: Epilogue 200, `clamp(48px, 7vw, 128px)`, interlinia 0.95.
- Nazwy projektów: Epilogue 200, `clamp(32px, 3.6vw, 60px)`.
- Podpisy projektów: miejsce, rok i powierzchnia w kroju etykiety, rozdzielone szerokim odstępem zamiast kropek.
- Tekst: 15 px, interlinia 1.7, najwyżej 46 znaków w wierszu (w Epilogue to około `23em`, a nie `46ch`).

## Elementy

- **Nawigacja:** nazwa pracowni po lewej, trzy linki po prawej, sam tekst bez tła. Chowa się przy przewijaniu w dół i wraca przy przewijaniu w górę. Nad ciemnym zdjęciem tekst zmienia kolor na jasny, tak żeby zawsze miał kontrast 4,5:1, bez nakładek na zdjęcie. To samo dotyczy podpisu na hero.
- **Hero:** jedno zdjęcie na cały ekran, a na nim w lewym dolnym rogu nazwa projektu i miejsce drobnym drukiem. Nagłówek z nazwą pracowni i jednym zdaniem stoi dopiero pod zdjęciem.
- **Lista projektów:** zdjęcie, a pod nim w jednej linii nazwa projektu po lewej oraz miejsce i rok po prawej. Kliknięcie w zdjęcie albo nazwę prowadzi do projektu, jeśli projekt ma swoją podstronę albo sekcję. Bez niej projekt zostaje bez linku.
- **Przejazd w poziomie:** jeden wybrany projekt pokazany jako pas zdjęć. Sekcja jest przyklejona do ekranu, a przewijanie strony w dół przesuwa pas w lewo, aż pokaże się ostatnie zdjęcie. Pod pasem cienka linia postępu.
- **Pracownia:** krótki tekst o pracowni w Epilogue 200 `clamp(26px, 2.6vw, 40px)` w kolumnach 4–10, a pod nim lista osób z rolami jako zwykły tekst.
- **Kontakt:** adres e-mail w Epilogue 200 na pół szerokości ekranu (na telefonie na całą), telefon i adres pracowni w kroju etykiety.
- **Przyciski:** sam tekst z linią 1 px pod spodem. Po najechaniu linia skraca się do zera i rośnie z powrotem z drugiej strony (cały efekt 400 ms).

## Zdjęcia

- Bez zaokrągleń, ramek, cieni i filtrów. Zdjęcia w oryginalnych proporcjach, poziome i pionowe na zmianę, jeśli są jedne i drugie.
- Pod zdjęciem zawsze podpis, a na zdjęciu nigdy tekst, z wyjątkiem hero.
- Gdy zdjęć brakuje, zamiast zdjęcia stoi sama nazwa projektu w Epilogue 200, wielkości połowy ekranu.

## Ruch

- Wolny i ciężki. Zdjęcia odsłaniają się maską od dołu w 1400 ms, `cubic-bezier(.65, 0, .35, 1)`, a obraz w masce zaczyna od skali 1.15. Odsłanianie startuje, kiedy widać 20–25% zdjęcia.
- Przejazd w poziomie: przesunięcie pasa liczone z postępu przewijania przyklejonej sekcji i wygładzone (zbliżanie do celu o 0.08 odległości na klatkę przy 60 kl./s, na szybszych ekranach przeliczone z czasu klatki), a pas staje na całych pikselach, żeby podpisy się nie rozmywały.
- W trakcie przewijania zdjęcia przesuwają się w swojej ramce o 6% wysokości, a sama ramka stoi.
- Podpisy wchodzą 200 ms po zdjęciu, samą przejrzystością.

## Telefon

- Jedna kolumna, zdjęcia na całą szerokość ekranu bez marginesów, podpisy z marginesem.
- Przejazd w poziomie zamienia się w pas zdjęć przewijany palcem w bok, z przyciąganiem do zdjęcia (`scroll-snap`); zdjęcia zajmują od 56% do 84% szerokości ekranu, zależnie od proporcji.
- Nawigacja: nazwa pracowni i „Menu”, które otwiera pełny ekran z linkami w Epilogue 200 48 px.

## Czego nie robić

- Kart, zaokrągleń, cieni i kolorowych przycisków z tłem.
- Tekstu na zdjęciach (poza hero) i ciemnych nakładek na zdjęcia.
- Ikon mediów społecznościowych w kółkach, liczników „lat doświadczenia” i rzędu nagród w logotypach.
- Pogrubionych nagłówków. Najgrubsza waga na stronie to 500 w etykietach.

## 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.
- Przejazd w poziomie kończy się dokładnie na ostatnim zdjęciu i odkleja się bez skoku.
- Na laptopie żadne dwa kolejne zdjęcia nie stoją w tym samym miejscu siatki.
- Przy przebudowie porównanie tekstu przed i po daje zero różnic.