/* ==========================================================================
Cennik /oferta. HTML generowany przez cennik.py z copy/oferta.md.
Nie ma odpowiednika w bibliotece komponentow (wiki/komponenty/index.md
nie ma cennika/tabeli cen), zbudowany od zera na tokenach.
D37, 29.08.2026: uklad PASMOWY 1:1 z makieta Karola, nie plaska kolumna
na kategorie. Kategoria z podgrupami (twarz) to kilka pasm, po jednym na
podgrupe, naprzemiennie jasne/ciemne, kazde ze zdjeciem po prawej.
Kategorie bez podgrup (cialo, usta, zmiany-skorne) to jedno pasmo z
uslugami w siatce 2 kolumny. Zdjecie domyslnie po prawej: uproszczenie
wobec makiety, ktora miesza strony miedzy pasmami, koszt odwzorowania
tego 1:1 (strona zdjecia per pasmo) nieproporcjonalny do efektu.
D115, 03.09.2026: wyjatek od powyzszego uproszczenia, zrobiony punktowo
po zgloszeniu Jakuba. Wstep kategorii "twarz" (eyebrow+H2+lead) dostal
WLASNE pasmo (osobne od pierwszej podgrupy, wczesniej sklejone razem),
a pierwsza podgrupa dostala zdjecie PO LEWEJ plus pionowa kreske przy
liscie, 1:1 z makieta (raw/.../Oferta/02-twarz-oczyszczanie...). Modyfikator
`.cennik-pasmo__grid--lewo` odwraca kolumny i strone bleedu, generowany
przez cennik.py (parametr `strona` w html_pasmo()), nie recznie w HTML.
D122, 03.09.2026: ten sam wstep (eyebrow+H2+lead+zdjecie, klasa
`.cennik-pasmo--wstep`) dobudowany do cialo/usta/zmiany-skorne, zgloszenie
Jakuba "ten sam pasek co na makiecie, a ponizej sa juz wymienione ceny".
Kazda z tych trzech kategorii ma tylko JEDNO zdjecie w `ZDJECIA` (cennik.py),
ktore teraz idzie do wstepu, wiec sekcja z cenami PONIZEJ nie ma juz wlasnej
kolumny zdjecia: `.cennik-pasmo--pelny` (nizej w tym pliku), kontener na
pelnej szerokosci, bez gridu tresc/zdjecie. Zastepuje wczesniejszy uklad,
w ktorym #cialo mialo osobna restrukturyzacje CSS na grid-areas (audyt
31.08.2026, usunieta razem z tym ruchem, patrz historia w decyzje.md D122).
D125, 03.09.2026: wstep PRZEBUDOWANY W CALOSCI, D122 nieaktualne. Jakub,
po zobaczeniu D122 na zywo: "dużo wolnej przestrzeni po lewej... nie
chodzi o zachowanie tego samego układu, tylko przebudować w pełni, żeby
była spójna, ale wyglądała dobrze... zupełnie inna forma." Wstep nie jest
juz `.cennik-pasmo` z klasa `.cennik-pasmo--wstep` (D122) tylko osobna
rodzina `.cennik-wstep`, generowana przez `html_wstep()` w cennik.py.
Trzy warianty strukturalne (D baner, E naklada, F sam tekst) stanely obok
siebie na przelaczniku, Jakub wybral **D globalnie**, na wszystkie cztery
kategorie naraz ("idziemy w D globalnie"). E, F i mechanizm przelacznika
usuniete z kodu w calosci. Historia wyzej (D37/D115/D122) zostaje jako
zapis jak dotarlismy do tego punktu, ale opisany tam uklad
(`.cennik-pasmo__grid` dla wstepu, klasa `.cennik-pasmo--wstep`) juz nie
istnieje w kodzie.
D33, 28.08.2026: przycisk "Rezerwuj" stoi w KAZDYM wierszu wariantu,
podniesiony do progu dotyku 44px (D4). ID Booksy jest per usluga, nie
per wariant, wiec wszystkie wiersze jednej uslugi prowadza pod ten sam
adres, swiadomie przyjety koszt. Potwierdzone zgodne z makieta 29.08.
========================================================================== */
.cennik-pasmo {
position: relative;
/* D168, 03.09.2026: wartosc ustawiona przez Jakuba w konfiguratorze i
przeniesiona TUTAJ, do pliku wlasciciela, na jego polecenie ("idzie do
plikow sekcji bo to sa poprawki sekcji"). Konfigurator.css skasowany,
zeby ten sam odstep nie zyl w dwoch miejscach naraz. */
padding-block: var(--space-6);
scroll-margin-top: var(--space-12);
}
.cennik-pasmo__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
gap: var(--space-9);
align-items: start;
}
/* D114, 03.09.2026: proba bleedu zdjec cennika do krawedzi okna (zgodnie
z makieta Karola), COFNIETA w D118. Zdjecie ze `position:sticky` (D117)
plus ujemny margines dawaly u Jakuba realny scroll poziomy strony,
niereprodukowalny w tym srodowisku (Playwright/Chromium czysty na
1024-2560px), najpewniej rozjazd silnika w kombinacji sticky+ujemny
margines. Jakub zaproponowal prosciej: "zdjecie zaokraglone... zeby nie
bawic sie w pelna szerokosc". Zdjecie zostaje wewnatrz `.container`,
zaokraglone, bez bleedu. */
/* D162, 03.09.2026: --radius-md -> ksztalt liscia, zgloszenie Jakuba "te
zdjecia w ofercie przy obszarach mialy byc zrobione w ksztalcie liscia, tak
samo jak na home". Wariant liscia idzie za strona, po ktorej stoi zdjecie:
ostry czubek wskazuje kolumne z tekstem, tak jak w pasmach oferty na home.
Domyslnie zdjecie jest w drugiej kolumnie (po prawej), wiec --lisc-odbity. */
.cennik-pasmo__zdjecie {
border-radius: var(--lisc-odbity);
overflow: hidden;
aspect-ratio: 4 / 5;
}
.cennik-pasmo__zdjecie img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* D139, 03.09.2026: `.cennik-pasmo--pelny` (pasmo bez zdjecia dla cialo/usta/
zmiany-skorne, D122) nie istnieje juz w cennik.py. Zgloszenie Jakuba:
"ta struktura się psuje... musimy ją zrobić taką, jak jest wyżej [Twarz]".
Cennik tych trzech kategorii dostaje ten sam uklad grid/42% ze zdjeciem
co podgrupy Twarzy, patrz historia D115/D122 wyzej w tym pliku. */
/* D115: wariant "zdjecie po lewej". Kolumny odwrocone (zdjecie 42% pierwsze,
tresc 1fr drugie, zgodnie z kolejnoscia w DOM ktora generuje cennik.py). */
.cennik-pasmo__grid--lewo {
grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
}
/* D162: zdjecie po lewej, wiec czubek liscia obraca sie na prawo, w strone tekstu. */
.cennik-pasmo__grid--lewo .cennik-pasmo__zdjecie { border-radius: var(--lisc); }
/* D115: pionowa kreska ("lista wszystkich zabiegow z kreska po stronie
zdjecia, pelna do konca"), 1:1 z makieta. border-inline siega calej
wysokosci bloku tresci, wiec "pelna do konca" jest darmowe, nie trzeba
liczyc wysokosci recznie.
D141, 03.09.2026: do D139 kreska stala wylacznie na pierwszej podgrupie
Twarzy (jedynej "lewo" w tamtym momencie), zawsze border-inline-start.
Zgloszenie Jakuba: kreska ma byc na KAZDYM pasmie, zawsze PO STRONIE
ZDJECIA, nie tylko po lewej. Domyslnie (strona=prawo, tresc pierwsza w
DOM, zdjecie drugie) linia siedzi na inline-end tresci, bo tam wlasnie
zaczyna sie zdjecie. Modyfikator `--lewo` (ten sam, ktory odwraca kolumny
gridu) odwraca kreske na inline-start. */
.cennik-pasmo__tresc--kreska {
border-inline-end: var(--border-width) solid var(--line-ctx-soft);
padding-inline-end: var(--space-6);
}
.cennik-pasmo__grid--lewo .cennik-pasmo__tresc--kreska {
border-inline-end: 0;
padding-inline-end: 0;
border-inline-start: var(--border-width) solid var(--line-ctx-soft);
padding-inline-start: var(--space-6);
}
/* D117, 03.09.2026: zdjecie zostaje w miejscu przy scrollu, przewija sie
tylko tresc obok. Zgloszenie Jakuba, wprost "tylko na komputerze".
Mechanizm: .cennik-pasmo__grid ma juz align-items:start (linia wyzej w
pliku), wiec zdjecie NIE rozciaga sie do wysokosci tresci, kolumna
zdjecia zostaje wlasnej wysokosci (aspect-ratio 4/5), a caly wiersz
gridu jest tak wysoki jak dluzsza tresc. To jest dokladnie warunek
potrzebny position:sticky: element sticky "odklei sie" dopiero gdy
dojdzie do dolu WLASNEGO wiersza gridu, czyli razem z koncem tresci,
a do tego momentu zostaje przypiety do --header-rest-h + oddech, pod
naglowkiem (z-index nizszy niz --z-header, zeby kapsula zawsze wygrywala
przy zakladce). Prog 901px, ten sam co reszta ukladu pasmowego (ponizej
tego progu grid schodzi do jednej kolumny, sticky by nie mial sensu).
D122: wylaczenie dla #cialo usuniete. Do tej daty #cialo trzymalo zdjecie
w mniejszym, wlasnym boksie obok tytulu (osobna restrukturyzacja CSS),
gdzie sticky nie mialby efektu. Ten uklad zniknal razem z restrukturyzacja:
#cialo ma dzis ten sam wstep pelnowysokosciowy co reszta kategorii, wiec
sticky dziala tak samo wszedzie. */
@media (min-width: 901px) {
.cennik-pasmo__zdjecie {
position: sticky;
top: calc(var(--header-rest-h, 0px) + var(--space-3));
z-index: var(--z-sticky);
}
}
/* ==========================================================================
D125, 03.09.2026: pasek tytulowy kategorii. Baner: zdjecie umiarkowanej
wysokosci (nie wysoki portret jak w D37/D115/D122), tresc wysrodkowana w
pionie wzgledem niego, wiec nie zostaje pusta przestrzen pod krotkim
tekstem. Wybrany przez Jakuba sposrod trzech wariantow strukturalnych na
przelaczniku (D/E/F), globalnie na wszystkie cztery kategorie.
========================================================================== */
/* D129, 03.09.2026: padding-block zmieniony z var(--space-8) (48px, stale) na
var(--space-section) (rytm kazdej innej sekcji na stronie, plynny
clamp). Zgloszenie Jakuba na mobile: "odstepy gora-dol, zeby byly
spojne". Diagnoza: `.cennik-wstep` nie ma klasy `.section`, wiec nie
dziedziczyl globalnego rytmu jak `.cennik-pasmo` (ktory ma "section
cennik-pasmo"), zostal na sztywnym --space-8 z pierwszej wersji D125.
Skutek zmierzony na 390px: odstep wstep→pierwsza podgrupa byl 48+72=120px,
odstep miedzy kolejnymi podgrupami 72+72=144px, czyli dwa rozne rytmy w
jednym ciagu sekcji. Po zmianie oba 144px, spojne w calej kategorii. */
/* D168, 03.09.2026: wartosc ustawiona przez Jakuba w konfiguratorze i
przeniesiona TUTAJ, do pliku wlasciciela, na jego polecenie ("idzie do
plikow sekcji bo to sa poprawki sekcji"). Konfigurator.css skasowany,
zeby ten sam odstep nie zyl w dwoch miejscach naraz. */
.cennik-wstep { padding-block: var(--space-8) var(--space-7); scroll-margin-top: var(--space-12); }
/* D165, 03.09.2026: kolumna zdjecia 42% -> 36%. Naglowek kategorii lamal sie
na trzy wiersze zamiast dwoch z copy: najdluzszy ("Zabiegi na twarz, szyje
i dekolt") potrzebuje 744px przy 1440, a kolumna tekstu dawala 704px, wiec
pierwszy segment sam sie lamal, zanim doszlo do zamierzonego
przed
"Ostrów Mazowiecka". Zmiana liczona z najdluzszego naglowka na pieciu
szerokosciach, nie z jednej. */
.cennik-wstep__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 36%);
gap: var(--space-8);
align-items: center;
}
/* D162, 03.09.2026: ksztalt liscia zamiast zaokraglonego prostokata, patrz
nota przy .cennik-pasmo__zdjecie. Zdjecie wstepu stoi zawsze w drugiej
kolumnie, po prawej, wiec zawsze --lisc-odbity. */
.cennik-wstep__zdjecie {
border-radius: var(--lisc-odbity);
overflow: hidden;
aspect-ratio: 3 / 2;
}
.cennik-wstep__zdjecie img { inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (max-width: 900px) {
.cennik-wstep__grid { grid-template-columns: 1fr; }
/* D166, 03.09.2026: na telefonie ksztalt liscia (D162) schodzi, zostaje
zaokraglony prostokat, decyzja Jakuba. Ta sama zasada co przy zdjeciu
"o mnie" na home (D93/D148): lisc jest ksztaltem dla ukladu dwukolumnowego,
na pelnej szerokosci telefonu czyta sie jako uciety kadr, nie jako ksztalt. */
.cennik-wstep__zdjecie { aspect-ratio: 16 / 10; border-radius: var(--radius-md); }
/* D135, 03.09.2026: zgloszenie Jakuba ze zrzutu, "rozjazdy miedzy
elementami" - odstep zdjecie->naglowek podgrupy (144px, D129: oba po
72px z --space-section) rzucal sie w oczy obok znacznie ciasniejszego
rytmu naglowek/podtytul/wiersze ponizej (D132-134). --space-8 (48px)
zamiast --space-section na OBU stronach granicy (wstep i pasmo,
symetrycznie, ten sam token na obu, zasada z D129 zostaje: gora=dol),
tylko na mobile. Odstep spada z 144px na 96px, reszta rytmu (miedzy
kolejnymi podgrupami Twarzy, w tym Lifting/Zabiegi iglowe) bez zmian,
bo tam miedzy sekcjami stoi pelna lista cen, nie pusta przestrzen. */
/* D168: mobilny override zdjety. Baza ma teraz te sama wartosc na kazdej
szerokosci, zgodnie z ustawieniem z konfiguratora. */
}
/* 01.09.2026 (D50): font-size na --fs-display-3, razem z H1 hero (byl
dziedziczony z domyslnego h2, czyli --fs-display-2, 84px). Hero schodzi
na display-3 (67px), wiec H2 kategorii cennika schodza razem z nim,
inaczej hierarchia nagłowkow byłaby odwrocona (H2 wiekszy niz H1). */
/* D165: `max-width: 20ch` zdjety. Przycinal naglowek do 683px, czyli ponizej
744px, ktorych potrzebuje najdluzszy z czterech. Szerokosc trzyma teraz sama
kolumna gridu, jedno ograniczenie zamiast dwoch. */
/* 14.09.2026, zgloszenie Jakuba na zywo: "wielkosc czcionek... w porownaniu
do CTA albo nawigacji w headerze wydaja sie duze", potem doprecyzowane
"H1 hero jest taki sam jak H2 w ofercie". Zmierzone: --fs-display-3 dawal
H1 i H2 kategorii IDENTYCZNY rozmiar co do piksela (66.672px na 1440px),
3-4x wiekszy niz CTA headera (16px) i nawigacja (20px). Zalozenie D50
("H2 rowny hero") mialo sens, dopoki H2 bylo krotka etykieta ("Usta",
"Modelowanie sylwetki"). Od 13-14.09 H2 to pelne zdanie z korzyscia
("Zabiegi oczyszczaja i ujedrniaja skore..."), wiec ten sam rozmiar
renderuje cale zdanie jako drugie hero na stronie, nie podsekcje pod nim.
Nowy token schodzi PONIZEJ H1 (67px) i ZOSTAJE POWYZEJ H3 podgrupy
(--fs-display-4, 49px na 1440px), zeby hierarchia H1>H2>H3 sie nie
odwrocila. Lokalny, nie globalny --fs-*, bo to jedyne miejsce w projekcie,
gdzie naglowek tego poziomu musi uniesc pelne zdanie zamiast etykiety. */
.cennik__tytul { font-size: clamp(32px, 4vw, 58px); margin: 0 0 var(--space-6); }
/* Plaski, wysrodkowany blok jak w makiecie (08B), nie kartka z lewym
akcentem. Kolory na sztywno, NIE z kontekstu .on-dark/.on-light: kategoria
"zmiany skorne" moze wypasc na ciemnym tle w alternacji, a --surface-sand
jest stalym jasnym hexem niezaleznym od kontekstu, wiec kremowy tekst na
ciemnym kontekscie na kremowym pasku byl nieczytelny (znalezione 28.08). */
/* D157, 03.09.2026: zgloszenie Jakuba na zywo (desktop), "ten box mielismy
wywalic". D148 chowala to pudelko wylacznie na mobile, zalozenie ze na
desktopie ma prawo do wlasnego miejsca bylo moje, nie jego. Wywalone
wszedzie, tekst zostaje w copy/oferta.md (kanon copy nietykalne), to
decyzja PREZENTACJI, nie tresci. */
.cennik__zastrzezenie {
display: none;
margin: 0 0 var(--space-7);
padding: var(--space-5) var(--space-6);
background: var(--surface-cream-hi);
color: var(--text-on-light);
text-align: center;
font-size: var(--fs-small);
line-height: 1.6;
}
.cennik__intro { max-width: 62ch; margin: 0 0 var(--space-8); color: var(--fg-muted); line-height: 1.6; }
/* D132, 03.09.2026: hierarchia obu naglowkow cennika podniesiona do poziomu
z makiety, zgloszenie Jakuba ze zrzutu: "wieksza, innym kolorem, tym
brazowym" dla podgrupy, i to samo wyroznienie dla tytulu uslugi ponizej.
Przed ta zmiana oba naglowki byly niemal tej samej wielkosci (--fs-card
19-24px vs --fs-body-lg 17-21px), za blisko siebie i za blisko zwyklego
tekstu, zeby czytac sie jako hierarchia. Podgrupa dostaje --fs-display-4
(istniejacy token "naglowek pomocniczy", nie nowa wartosc) i --accent-deep
(ten sam braz co eyebrow/nadtytuly w calym projekcie). Tytul uslugi
zostaje wizualnie NIZEJ podgrupy (mniejszy, bez koloru), ale wyrazniej
nad zwyklym tekstem niz przedtem: --fs-card zamiast --fs-body-lg. */
.cennik__podgrupa {
margin: 0 0 var(--space-5);
font-family: var(--font-display);
font-size: var(--fs-display-4);
color: var(--accent-deep);
}
/* D136, 03.09.2026: zgloszenie Jakuba ze zrzutu "Lifting i ujedrnianie"
(podgrupa na tle .on-dark): braz --accent-deep (dobry na jasnym) ginie
na ciemnym tle, maly kontrast. Na ciemnym: kremowa biel zamiast brazu.
"Pogrubiony" NIE jest doslownym font-weight: Bellefair ma jedna wage
(400), font-weight:600+ daje fake bold przegladarki, ten sam problem co
.cennik__usluga-tytul opisuje w komentarzu nizej (audyt 31.08.2026).
Wyroznienie przez letter-spacing (--ls-caps), tym samym mechanizmem co
tam, nie przez zlamanie fonta. */
.on-dark .cennik__podgrupa {
color: var(--text-on-dark);
letter-spacing: var(--ls-caps);
}
.cennik__usluga { margin-block-end: var(--space-7); }
/* D150, 03.09.2026: zgloszenie Jakuba, odstep koniec cennika->konsultacja
dalej za duzy mimo D149 (zero na .cennik-pasmo, padding-block-end).
Przyczyna: `.cennik__usluga` to grid item (`.cennik-pasmo__tresc` jest
dzieckiem `.cennik-pasmo__grid`, display:grid), margines dziecka w gridzie
NIGDY sie nie zwija (CSS Grid nie kolapsuje marginesow w ogole, w
przeciwienstwie do zwyklego block flow), wiec margin-block-end OSTATNIEGO
`.cennik__usluga` w kazdym pasmie/wstepie renderowal sie w pelni, dodajac
40px POZA zerowanym paddingiem sekcji. Zero na ostatnim dziecku usuwa ta
ukryta warstwe, tak samo w kazdym miejscu gdzie usluga jest ostatnia
trescia przed koncem pasma/wstepu. */
.cennik-pasmo__tresc > .cennik__usluga:last-child,
.cennik-wstep__cennik > .cennik__usluga:last-child {
margin-block-end: 0;
}
/* Audyt 31.08.2026: font-weight:var(--fw-semibold) na Bellefair (jedna waga,
400) dawal fake bold przegladarki, litery grubsze i znieksztalcone wobec
.cennik__podgrupa obok. Bellefair nigdy nie jest pogrubiana (tokens.css
linia 143). Wyroznienie przeniesione na letter-spacing, jak w podgrupie. */
.cennik__usluga-tytul { margin: 0 0 var(--space-2); font-size: var(--fs-card); font-weight: var(--fw-display); letter-spacing: var(--ls-caps); }
.cennik__opis { margin: 0 0 var(--space-3); max-width: 62ch; color: var(--fg-muted); line-height: 1.6; }
/* Przycisk Szczegoly, 13.09.2026 (popup z przebiegiem i zaleceniami po
zabiegu, opis w cenniku zostaje krotki, R10/R11 w rzemioslo-copy.md).
Ghost, bez tla i ramki (tokens.css :591-592), zeby nie konkurowal z
przyciskiem Rezerwuj w tym samym wierszu usluglugi. Strzalka to ten sam
.btn__arrow co front-page.php:176 (jedyne inne uzycie w motywie). */
.cennik__szczegoly {
margin: 0 0 var(--space-4);
padding-inline: 0;
display: inline-flex;
}
/* --- popup Szczegoly -------------------------------------------------- */
.cennik-dialog {
/* Popup jest zawsze jasny, niezaleznie od tego, czy stoi w DOM wewnatrz
sekcji .on-dark (np. kategoria "Modelowanie sylwetki").