# Przepis na styl KLINIKA

Styl do stron gabinetów lekarskich, klinik, kancelarii i biur rachunkowych, czyli tam, gdzie klient musi najpierw zaufać, a dopiero potem się umówić. Kremowe tło, głęboka śliwka w pasach u góry i u dołu strony, jeden cienki krój szeryfowy z kursywą i usługi w rozwijanych wierszach z cienkim plusem.

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 papier firmowy dobrej kancelarii: kremowe tło, jeden ciemny kolor i duże, bardzo cienkie litery. Cała strona stoi na jednym kroju szeryfowym, od menu po formularz. Mocne miejsca są tylko trzy: pasy w kolorze śliwki u góry i u dołu, ogromny nagłówek z kursywą w hero i znak firmy z paskiem z czterech odcinków pod nazwą. Reszta jest cicha. Zaufanie budują konkrety (nazwiska, ceny, godziny, numery wpisów), więc styl podaje je w tabelach z cienkimi liniami, a nie w kartach.

## Kroje

- Wszystko, co się czyta: **Newsreader** z osią rozmiaru optycznego (`font-optical-sizing: auto`). Nagłówki mają wagę 200, tekst, menu i przyciski 300, wartości w tabelach 400. Kursywa 200 w nagłówkach według zasady z części „Typografia”.
- Nazwa firmy w nawigacji i w stopce (kiedy strona nie ma logo w pliku) oraz małe etykiety sekcji: **Archivo** w szerokości 125 % (`font-stretch: 125%`, plik zmienny z osią wdth), waga 500, wersaliki. Archivo nie pojawia się nigdzie indziej.
- Dane firmy drobnym drukiem pod stopką (NIP, KRS, siedziba, dopiski prawne): krój systemowy `Helvetica, Arial, sans-serif`, 12 px. To jedyne miejsce bez szeryfu i ma wyglądać jak stopka urzędowego pisma.
- Ceny, godziny i numery: `font-variant-numeric: lining-nums tabular-nums`.

## Kolory

```css
:root {
  --krem: #f6f2ef;      /* główne tło strony */
  --bez: #eeeae4;       /* sekcja z listą usług, cennik, pas z danymi firmy */
  --bez-2: #dbd5cb;     /* rozwinięty wiersz listy, panel w miejscu brakującego zdjęcia */
  --biel: #ffffff;      /* jedna sekcja z ciemnym zdjęciem */
  --sliwka: #2d012b;    /* pas górny, pas pod hero, stopka, przycisk główny, H1 */
  --wrzos: #b8a7b1;     /* pas kontaktu, drugorzędny tekst na śliwce */
  --fiolet: #7f4666;    /* numery sekcji */
  --tekst: #14080f;
  --tekst-2: #5e4a58;   /* opisy, podpisy, nazwy w tabelach, etykiety */
  --linia: #d3c8cc;     /* linie w tabelach i pod nawigacją */
}
```

Pasek pod znakiem firmy ma cztery równe odcinki w kolorach `#9b7b8f`, `#7f4666`, `#7f2e57` i `#4a0e4c`, od lewej. Na śliwce tekst ma kolor `--krem`, a drugorzędny `--wrzos`. Śliwka to jedyny mocny kolor na stronie: duże powierzchnie w niej mają tylko pas górny, pas pod hero i stopka. Kolor `#7c2343` pojawia się wyłącznie jako warstwa przy najechaniu na przycisk główny.

## Siatka i odstępy

- 12 kolumn, treść najwyżej 1280 px szerokości, odstęp między kolumnami 24 px, margines boczny 80 px od 1200 px szerokości okna, 48 px na tablecie i 22 px na telefonie.
- Sekcje oddziela zmiana tła, a nie linia: krem, beż, krem, biel i tak dalej. Tylko dwie sąsiednie sekcje na tym samym tle oddziela linia 1 px `--linia` na całą szerokość okna.
- Odstęp w sekcji: 128 px u góry i na dole na laptopie, 80 px na telefonie.
- Każda sekcja zaczyna się etykietą z numerem i nazwą („01 Zabiegi”), a pod nią stoi nagłówek. Etykieta i nagłówek zajmują kolumny 1–9, treść stoi pod nimi na całej szerokości albo w układzie opisanym przy elemencie.

## Typografia

- H1: `clamp(50px, 7.2vw, 108px)`, waga 200, interlinia 1.02, odstęp liter −0.02em, kolor `--sliwka`, wyśrodkowany.
- H2: `clamp(38px, 4.6vw, 68px)`, waga 200, interlinia 1.06, odstęp liter −0.015em.
- H3: w liście usług `clamp(28px, 3.3vw, 48px)`, w zespole 26 px, waga 200.
- Tekst: 19 px, waga 300, interlinia 1.55, akapit najwyżej 60 znaków szerokości.
- Akapit w pasie pod hero: `clamp(22px, 2.2vw, 31px)`, waga 300, interlinia 1.38, wyśrodkowany, najwyżej 36 em szerokości.
- Etykiety: Archivo 500, szerokość 125 %, 11 px, wersaliki, odstęp liter 0.16em, kolor `--tekst-2`, numer sekcji w `--fiolet`.
- Kursywa: w H1 kursywą idzie słowo albo fragment, który treść już wyróżnia, i stoi w osobnym wierszu. Jeśli w H1 nic nie jest wyróżnione, kursywą idzie druga część nagłówka (po przecinku albo po „i”) i zaczyna nowy wiersz. W H2 sekcji ze zdjęciem obok kursywą idzie druga część zdania, jeśli zdanie ma dwie części. Gdzie indziej kursywy nie ma, a słowa zostają te same.

## Elementy

- **Pas górny:** na ekranie pierwszy element strony, tło `--sliwka`, wysokość 72 px na laptopie i 56 px na telefonie, przewija się razem ze stroną. Po prawej stoi przycisk do umówienia wizyty (ten sam, który był w nawigacji) jako sam tekst w kolorze `--krem`, Newsreader 300 24 px, na telefonie 18 px, z długą strzałką. Nic więcej w pasie nie ma. W kodzie pas zostaje w elemencie nawigacji, za linkami, czyli tam, gdzie przycisk był wcześniej, a nad nawigację przenosi go CSS (`display: flex; flex-direction: column` na nawigacji i `order: -1` na pasie). Nawigacja przykleja się wtedy z `top` równym minus wysokości pasa, więc pas wyjeżdża za ekran, a nawigacja zostaje. Dzięki temu kolejność tekstu na stronie się nie zmienia.
- **Nawigacja:** pod pasem górnym, tło `--krem`, wysokość 96 px na laptopie i 72 px na telefonie. Przykleja się do góry przy przewijaniu i dostaje wtedy linię 1 px `--linia` na dole, bez cienia i bez rozmycia. Po lewej znak firmy, po prawej linki Newsreader 300 18 px co 36 px, podkreślenie 1 px pojawia się po najechaniu. Poniżej 1100 px zamiast linków stoi ikona menu: trzy poziome kreski 1,5 px, dwie po 26 px i dolna 18 px, wyrównane do prawej. Jeśli przycisk menu miał napis, napis zostaje w przycisku ukryty wizualnie (jako jego nazwa dla czytników ekranu), a widać ikonę.
- **Znak firmy:** nazwa wersalikami w Archivo 500 125 %, 21 px na laptopie i 16 px na telefonie, odstęp liter 0.14em. Pod nią pasek wysoki na 4 px z czterech odcinków, który zaczyna się 0,8 em przed nazwą i kończy 0,8 em za nią, 14 px pod literami (12 px na telefonie). Jeśli strona ma logo w pliku, logo zostaje bez zmian, a pasek stoi pod nim tak samo.
- **Strzałka:** długa i cienka: linia 30 px i grot z dwóch kresek po 7 px, grubość 1,25 px, w kolorze tekstu obok. Ta sama w przyciskach, w pasie górnym i w menu. Po najechaniu przesuwa się o 4 px w prawo. Jeśli w tekście przycisku stoi znak „→”, zostaje w kodzie, a zamiast niego widać tę strzałkę, rysowaną maską SVG na tym znaku.
- **Przyciski:** prostokąt bez zaokrągleń, wysokość 56 px, odstęp 0 28 px, Newsreader 400 18 px, strzałka 14 px za tekstem. Główny ma tło `--sliwka` i napis `--krem`, a po najechaniu nad tłem pojawia się warstwa `#7c2343` (przejrzystość od 0 do 1). Na tle `--sliwka` główny ma odwrócone kolory: tło `--krem`, napis `--sliwka`, warstwa po najechaniu `#ffffff`. Drugi przycisk to sam tekst z podkreśleniem 1 px odsuniętym o 6 px, bez ramki.
- **Hero:** trzy części jedna pod drugą. Najpierw na kremie etykieta i H1, wyśrodkowane, z odstępem 80 px u góry i na dole (64 px na telefonie), tak żeby w pierwszym ekranie laptopa było już widać górę zdjęcia. Potem zdjęcie na całą szerokość okna, bez marginesów, w proporcji 21:9 na laptopie i 4:5 na telefonie. Na końcu pas `--sliwka` z akapitem, przyciskami, informacją „dziś przyjmujemy” i faktami, wszystko wyśrodkowane, odstęp 112 px u góry i na dole (72 px na telefonie). Fakty stoją w rzędzie trzech kolumn oddzielonych pionową linią 1 px `--wrzos` o przejrzystości .35: liczba w Newsreader 200 `clamp(44px, 5vw, 76px)` w kolorze `--krem`, pod nią podpis Newsreader 300 16 px w `--wrzos`. Informacja „dziś przyjmujemy” ma przed sobą kropkę 7 px w `--wrzos`. Bez zdjęcia w hero zostają pierwsza i trzecia część.
- **Lista usług:** sekcja na tle `--bez`. Każda usługa to wiersz z nazwą jako H3 po lewej i plusem po prawej: dwie kreski 1 px, 44 na 44 px. Między wierszami nie ma linii, tylko odstęp 30 px u góry i na dole wiersza. Kliknięcie w wiersz rozwija opis (Newsreader 300 `clamp(20px, 1.9vw, 27px)`, najwyżej 52 znaki szerokości), wiersz dostaje tło `--bez-2` na całą szerokość okna, a pionowa kreska plusa znika i zostaje minus. Otwarty jest jeden wiersz naraz, na starcie pierwszy. Nazwa usługi jest przyciskiem z `aria-expanded`, a bez JavaScriptu wszystkie opisy są widoczne.
- **Zdjęcie i opis obok siebie:** zdjęcie w kolumnach 1–5 w proporcji 4:5, opis w kolumnach 7–12, a w kolejnej takiej sekcji strony się zamieniają. Pod opisem tabela faktów: nazwa po lewej w `--tekst-2`, wartość po prawej w `--tekst` i wadze 400, linia 1 px `--linia` między wierszami.
- **Zespół:** trzy kolumny, nazwisko jako H3 26 px, pod nim specjalizacja w `--tekst-2`, a numer prawa wykonywania zawodu albo numer wpisu na listę w Archivo 500 125 %, 11 px, wersalikami. Linia 1 px `--linia` nad każdą osobą.
- **Cennik:** sekcja na tle `--bez`, tabela zamiast kart. Nazwa usługi Newsreader 300 24 px, opis pod nią 16 px w `--tekst-2`, cena po prawej Newsreader 300 26 px, wyrównana do prawej, z cyframi tabelarycznymi. Wiersz ma co najmniej 84 px wysokości i linię 1 px na dole.
- **Certyfikaty i członkostwa:** „pieczęcie” z samego tekstu: nazwa w Archivo 500 125 %, 10,5 px, wersalikami, w ramce 1 px `--tekst-2`, a pod ramką rok w Newsreader 300 15 px. Bez kolorowych logotypów.
- **Kontakt:** sekcja zaczyna się pasem `--wrzos` na całą szerokość okna, w którym stoją etykieta, H2 i akapit. Na wrzosie etykieta, numer i nagłówek mają kolor `--sliwka`, a akapit `--tekst`, bo `--tekst-2` i `--fiolet` mają na nim za mały kontrast. Po prawej stronie pasa stoi długa cienka strzałka skierowana w dół (48 px), która pokazuje formularz. Formularz i godziny stoją pod pasem na tle `--krem`.
- **Formularz:** pola z samą dolną linią 1 px `--tekst-2`, etykieta nad polem Newsreader 300 15 px, wpisany tekst 19 px. Przy aktywnym polu linia robi się 2 px w kolorze `--sliwka`. Błąd pola pokazujesz kolorem `#a2412f`. Bez zaokrągleń i bez tła pól.
- **Stopka:** tło `--sliwka`, tekst `--krem`. Po lewej znak firmy w `--krem` (pasek zostaje w swoich kolorach), obok w dwóch kolumnach adres i kontakt Newsreader 300 19 px. Pod stopką pas `--bez` z danymi firmy drobnym drukiem w kroju systemowym. Godzin, które stoją już w kontakcie, stopka nie powtarza.
- **Menu na telefonie:** panel wysuwany z prawej, szeroki na `min(420px, 88vw)`, tło `--krem`. Linki Newsreader 300 32 px jeden pod drugim, zamknięcie to cienki krzyżyk 22 px w prawym górnym rogu. Na dole panelu blok `--sliwka` z przyciskiem do umówienia wizyty. Strona pod panelem dostaje warstwę `--wrzos` o przejrzystości .55, a Escape i kliknięcie w warstwę zamykają menu.

## Zdjęcia

- Naturalne światło z okna i ciepłe złamane biele: rozmowa z lekarzem przy stole, dłonie przy badaniu, wnętrze gabinetu. Bez uśmiechniętych modelek ze stocku i bez zbliżeń skóry jak z reklamy kremu.
- Bez zaokrągleń i kształtów. Na wszystkie zdjęcia nakładasz ten sam filtr `filter: saturate(.92) contrast(1.02)`, żeby zdjęcia z różnych źródeł wyglądały jak z jednej sesji.
- Jedno ciemne zdjęcie, na przykład portret na czarnym tle, może stać w sekcji na tle `--biel` jako kontrapunkt.
- Gdy zdjęcia brakuje, w jego miejscu stoi panel `--bez-2` z numerem sekcji w Newsreader 200 kursywą, wysokim na połowę panelu.

## Ruch

Ruch jest spokojny i nigdy nie przeszkadza w czytaniu.

- Nagłówki wchodzą wierszami przy pierwszym pojawieniu się na ekranie: z 14 px niżej i od przejrzystości 0 do 1, 800 ms, `cubic-bezier(.2, .7, .2, 1)`, kolejne wiersze nagłówków, tabel i list z opóźnieniem 70 ms. Akapity wchodzą w całości.
- Pasek pod znakiem firmy po wczytaniu strony rysuje się od lewej odcinek po odcinku (skala w poziomie od 0 do 1, 500 ms na odcinek, kolejne co 90 ms).
- Zdjęcia odsłaniają się od dołu maską: `clip-path: inset(100% 0 0 0)` do `inset(0)`, 1200 ms, a zdjęcie w hero w tym samym czasie przechodzi ze skali 1.06 do 1.
- Rozwijany wiersz listy usług: wysokość opisu przez `grid-template-rows` od `0fr` do `1fr`, 500 ms, ta sama krzywa, a pionowa kreska plusa skaluje się do zera w 300 ms.
- Liczby w pasie pod hero przy pierwszym wejściu odliczają od zera do swojej wartości w 900 ms. Lata (rok otwarcia) nie odliczają, tylko wchodzą jak tekst.
- Bez paralaksy, bez ruchu za kursorem i bez animacji w pętli. Wejścia uruchamia `IntersectionObserver`, a animujesz tylko `transform`, `opacity`, `clip-path` i wysokość rozwijanego opisu.

## Telefon

- Pas górny 56 px, nawigacja 72 px ze znakiem po lewej i ikoną menu po prawej.
- Hero: H1 wyśrodkowany, od 50 px, zdjęcie na całą szerokość w proporcji 4:5, w pasie pod hero przyciski jeden pod drugim na całą szerokość, a fakty po dwa w rzędzie (trzeci pod nimi na całą szerokość).
- Lista usług: plus 32 na 32 px, nazwy od 28 px, odstęp w wierszu 26 px.
- Pieczęcie jedna pod drugą, bo szeroki krój w dwóch wąskich kolumnach łamie długie słowa.
- Cennik zostaje tabelą: nazwa i opis po lewej, cena po prawej, bez przewijania w bok.
- Kiedy hero zniknie z ekranu, przycisk do umówienia wizyty przykleja się do dołu ekranu na całą szerokość (56 px, tło `--sliwka`), a chowa się, kiedy na ekranie jest formularz.

## Czego nie robić

- Gradientów, cieni, rozmytych teł i szkła.
- Zaokrąglonych rogów, przycisków w kształcie pastylki i kolorowych kart.
- Ikon w kółkach, emoji i ilustracji ze stetoskopami.
- Drugiego mocnego koloru obok śliwki, „medycznego” błękitu #007bff i jaskrawej zieleni.
- Krojów Inter, Roboto, Poppins i Montserrat oraz grubych nagłówków: najgrubsza waga na stronie to Newsreader 400.
- Karuzel z opiniami.

## 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.
- Wszystkie ceny w cenniku stoją w jednej równej kolumnie po prawej.
- Pas górny i stopka mają tło `--sliwka`, a poza pasem pod hero nie ma na stronie innych dużych powierzchni w tym kolorze.
- Wiersze listy usług rozwijają się z klawiatury (Enter i spacja), a bez JavaScriptu wszystkie opisy są widoczne.
- Przy przebudowie porównanie tekstu przed i po daje zero różnic.