, H1 = opis SEO),
więc serif trzeba przypiąć do klas, nie do tagów */
.rh-hero__title {
margin: 0 0 16px;
font-family: var(--rh-serif);
font-weight: 500;
/* „Jesteś w dobrym miejscu.” — na telefonie maks. 2 wiersze (przy 44 px były 3) */
font-size: clamp(34px, 9.4vw, 55px);
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--rh-cream);
text-wrap: balance;
}
.rh-hero__title span { display: block; }
/* 2026-09-24 (plan P1-06b): jednorazowe wejście samego hasła od 900 px: dwa wiersze,
560 ms, opóźnienia 0 i 100 ms, krzywa wjazdów z WZORZEC §8, keyframes rh-rise (sekcja
„Ruch” niżej). Tylko za html.is-js (inline w head.php przed arkuszem, więc bez JS hasło
stoi od razu) i bez reduced-motion. H1 z frazą SEO, CTA, kafel zaufania i zdjęcie (LCP)
widoczne od 0 ms; telefon i tablet statyczne (decyzja 19.09). Obie strony (WZORZEC §5). */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
html.is-js .rh-hero__title > span { animation: rh-rise .56s cubic-bezier(.2, .8, .2, 1) both; }
html.is-js .rh-hero__title > span + span { animation-delay: .1s; }
}
.rh-hero__desc {
max-width: 480px;
margin: 0 0 24px;
/* Jedyne zdanie mówiące, czym jest firma — nie może wyglądać jak podpis.
To H1 (SEO), ale wizualnie lead: zostaje w Interze. */
font-family: var(--rh-font);
font-size: 18px;
font-weight: 400;
line-height: 1.45;
color: var(--rh-sand);
}
.rh-hero__desc strong { display: block; font-weight: 500; color: var(--rh-cream); }
.rh-hero__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 28px;
}
/* Cienka obwódka ginęła na jasnych partiach zdjęcia */
.rh-hero .rh-btn--outline {
background: rgba(20, 11, 0, 0.30);
border-color: rgba(255, 241, 224, 0.65);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* 2026-09-22 (właściciel: „brzydkie!! ale dobrze, że rozszerzone"): zatwierdzona
forma kafla zaufania z wariantu .home przeniesiona DO BAZY — obowiązuje na obu
stronach. Szklana karta: siatka 2 kolumny (3 od 1024 px), adres w osobnym
wierszu ODDZIELONYM linią, tło espresso z blurem (czytelne na zdjęciu). */
.rh-hero__trust {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 560px;
padding: 20px;
border: 1px solid rgba(255, 241, 224, 0.18);
border-radius: var(--rh-radius-inner);
background: rgba(20, 11, 0, 0.38);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* 2026-09-22 (właściciel): „wyśrodkuj wszystko" — cała zawartość kafla centrowana;
bez pionowych kresek, jedyna linia to pozioma nad adresem */
.rh-hero__trust-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
min-width: 0;
margin: 0;
padding: 0 8px;
text-align: center;
color: var(--rh-cream);
}
/* 2026-09-24 (plan P1-03): cyfry tabelaryczne w wartościach kafla */
.rh-hero__trust-value { font-size: 21px; font-weight: 500; line-height: 1.2; letter-spacing: -0.05px; font-variant-numeric: tabular-nums; }
.rh-hero__star { margin-right: 4px; font-size: .8em; vertical-align: .08em; }
.rh-hero__trust-label { font-size: 13px; line-height: 1.55; letter-spacing: 0.12px; color: var(--rh-sand); }
a.rh-hero__trust-item:hover .rh-hero__trust-label { color: var(--rh-cream); }
/* adres (bez podpisu): pełny wiersz pod linią; od 1024 px trzecia kolumna */
.rh-hero__trust-item--addr {
grid-column: 1 / -1;
justify-content: center;
margin-top: 18px;
padding: 16px 0 0;
border-left: 0;
border-top: 1px solid rgba(255, 241, 224, 0.15);
}
.rh-hero__trust-item--addr .rh-hero__trust-value { font-size: 17px; }
@media (max-width: 380px) {
.rh-hero__trust { padding: 16px; }
}
@media (max-width: 380px) {
.rh-hero__trust-item { padding-right: 12px; margin-right: 12px; }
.rh-hero__trust-item + .rh-hero__trust-item { padding-left: 12px; }
.rh-hero__trust-value { font-size: 19px; }
.rh-hero__learn { display: none; }
}
@media (min-width: 768px) {
/* skaluje się z szerokością, żeby „Jesteś w dobrym miejscu.” zostało w jednym wierszu */
.rh-hero__content { max-width: 960px; }
.rh-hero__title { font-size: clamp(52px, 6.6vw, 73px); line-height: 1; letter-spacing: -0.8px; }
.rh-hero__wrap { padding: 96px var(--rh-gutter) 52px; }
.rh-hero__desc { font-size: 20px; max-width: 540px; }
/* Dolny-lewy narożnik (H1 + CTA + zaufanie) dociążony punktowo,
żeby nie przygaszać twarzy w górnej części kadru */
.rh-hero__scrim {
background:
radial-gradient(115% 85% at 10% 92%,
rgba(20, 11, 0, 0.78) 0%,
rgba(20, 11, 0, 0.42) 48%,
rgba(20, 11, 0, 0) 72%),
linear-gradient(to top,
rgba(20, 11, 0, 0.95) 0%,
rgba(20, 11, 0, 0.82) 30%,
rgba(20, 11, 0, 0.50) 62%,
rgba(20, 11, 0, 0.48) 100%);
}
}
@media (min-width: 1024px) {
.rh-hero { min-height: min(94vh, 880px); }
.rh-hero__bg { object-position: center 35%; }
}
/* ---------- Hero głównej: wyróżnik w H1 i rytm (2026-09-24) ----------
Plan P2-01 (wariant A) + P1-03, makiety m2 i m3 z poprawkami recenzji i krytyka.
Wysokość hero BEZ zmian (pełnoekranowe ciemne hero z makiety m2 to pytanie do
właściciela). Rytm zawężony do .home: /pierwsza-wizyta/ ma inne zdjęcie i przy
wspólnych regułach hasło „zamiast obiecywać.” wchodziło na oczy (375×667). */
/* ogon „Najpierw szukamy przyczyny.” tylko od 1024 px; niżej druga linia wypychała
hasło na twarz (390 i 360 px: 37–49 px nad linią oczu, 768×1024: na usta) */
@media (max-width: 1023px) {
.rh-hero__desc-tail { display: none; }
}
/* telefon: kompensacja wysokości za „Bez skierowania.”; w linii, więc
„Bez skierowania.” idzie za „w Koninie.”, gdy się mieści (bez schodka w 3 wierszach) */
@media (max-width: 767px) {
.home .rh-hero__title { margin-bottom: 12px; }
.home .rh-hero__desc { margin-bottom: 18px; font-size: 17px; }
.home .rh-hero__desc strong { display: inline; }
.home .rh-hero__cta { margin-bottom: 20px; }
.home .rh-hero__wrap { padding-bottom: 24px; }
}
/* oddech pod hasłem: 26 px zamiast 16 px do H1 (P1-03) */
@media (min-width: 768px) {
.home .rh-hero__title { margin-bottom: 26px; }
}
@media (min-width: 1024px) {
/* H1 w dwóch wierszach trzyma się hasła, nie przycisków: rytm 26 / 32 / 28 */
.home .rh-hero__desc { margin-bottom: 32px; }
/* dodatkowa warstwa scrimu nad radialem i gradientem pionowym z bazy 768+: pozioma,
spłaszczona elipsa pod „dobrym miejscu.”, zakotwiczona od dołu hero jak treść, więc
jedzie razem z hasłem (środek = słowo „miejscu.”: 447 px od dołu, niskie laptopy
niżej, patrz media query pod spodem). Liniowy gradient 90deg z planu odrzucony po
pomiarze: twarz Marcina ciemniała o 54%, a przy 1440×900 tło pod „miejscu.” i tak
było o 40% jaśniejsze niż przed zmianą (ogon H1 podnosi hasło na głowicę aparatu).
Wysokość elipsy w px (100), nie w %: przy niskich oknach wyższa elipsa rysowała
ciemną chmurę na jasnej ścianie nad hasłem.
Pomiar 24.09 (luminancja tła pod „miejscu.” / twarz wobec stanu sprzed zmian):
1440×900 −25% / 0%, 1920×1080 −21% / 0%, 1366×657 −68% / 0%, 1280×720 −74% / −4%. */
.home .rh-hero__scrim {
background:
radial-gradient(ellipse 30% 100px at var(--rh-glow-x, 57%) calc(100% - var(--rh-glow-y, 447px)),
rgba(20, 11, 0, 0.62) 0%,
rgba(20, 11, 0, 0.36) 55%,
rgba(20, 11, 0, 0) 100%),
radial-gradient(115% 85% at 10% 92%,
rgba(20, 11, 0, 0.78) 0%,
rgba(20, 11, 0, 0.42) 48%,
rgba(20, 11, 0, 0) 72%),
linear-gradient(to top,
rgba(20, 11, 0, 0.95) 0%,
rgba(20, 11, 0, 0.82) 30%,
rgba(20, 11, 0, 0.50) 62%,
rgba(20, 11, 0, 0.48) 100%);
}
}
/* niskie laptopy (1280×720, 1366×657 z paskami Chrome, 1536×730 przy skali 125%):
hasło skaluje się też z wysokością, żeby nie wchodziło na okulary (recenzja m2) */
@media (min-width: 1024px) and (max-height: 820px) {
.home .rh-hero__title { margin-bottom: 20px; font-size: clamp(52px, min(6.6vw, 8.2vh), 73px); }
.home .rh-hero__desc { margin-bottom: 24px; }
.home .rh-hero__trust { padding-block: 14px; }
.home .rh-hero__wrap { padding-bottom: 32px; }
/* mniejsze hasło: „miejscu.” ok. 395 px od dołu hero i bliżej lewej */
.home .rh-hero__scrim { --rh-glow-x: 54%; --rh-glow-y: 395px; }
}
/* bardzo niskie okna (1366×657, 1280×649): kadr niżej, żeby hasło zeszło z twarzy
(1366×657: oczy 43 px nad hasłem zamiast 8 px, 38 px pod navem). Przy 50–55% z recenzji
m2 oczy wchodziły pod nav (tamte wartości liczono dla wyższego hero). */
@media (min-width: 1024px) and (max-height: 700px) {
.home .rh-hero__bg { object-position: center 45%; }
}
/* ---------- Mapa ciała (#problemy) ---------- */
.rh-body {
padding: calc(var(--rh-section) + 12px) var(--rh-gutter) var(--rh-section);
background: var(--canvas);
color: var(--ink);
}
.rh-body__inner {
max-width: var(--rh-max);
margin: auto;
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 0.95fr);
grid-template-areas:
"head stage side"
"book book book"
"foot foot foot";
gap: 24px 40px;
align-items: center;
}
.rh-body__head { grid-area: head; }
.rh-body__stage { grid-area: stage; }
.rh-body__side { grid-area: side; }
.rh-body__footer { grid-area: foot; }
/* CTA pod sylwetką (2026-09-19, właściciel) — domyka scenę, zanim wjedzie kafel
„Nie tego szukasz?”. 2026-09-20 (właściciel): do lewej, wszystkie CTA jednakowo. */
.rh-body__book { grid-area: book; justify-self: start; }
.rh-body__fill { color: var(--ink); }
.rh-body__intro { margin: 0 0 20px; font-size: 16px; color: var(--muted); }
/* Lista miejsc */
.rh-body__chips {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 4px;
}
.rh-chip {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
grid-template-areas: "num area" "num q";
align-items: center;
column-gap: 12px;
width: 100%;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: var(--rh-radius-inner);
background: transparent;
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
transition: background-color .15s ease, box-shadow .2s ease, border-color .15s ease;
}
.rh-chip__num { grid-area: num; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rh-chip__area { grid-area: area; font-size: 14px; font-weight: 500; }
.rh-chip__q { grid-area: q; font-size: 14px; color: var(--muted); }
.rh-chip:hover { background: var(--surface); }
.rh-chip[aria-pressed="true"] {
background: var(--card);
border-color: var(--line);
box-shadow: var(--rh-shadow);
}
.rh-chip[aria-pressed="true"] .rh-chip__num {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: var(--rh-pill);
background: var(--rh-amber);
color: var(--rh-espresso);
}
/* Scena */
/* 2026-09-24 (plan P1-04, makieta m7): miękki zanik krawędzi kadru przy zoomie zamiast
twardego cięcia. Maska jest zawsze włączona, a szerokość zaniku to --rh-fade:
spoczynek 0% (buty i wpieczony cień bez zmian), zoom 12%. Właściwość zarejestrowana
przez @property, więc animuje się razem z zoomem (.75 s, krzywa .rh-body__fig): bez
skoku przy zbliżaniu i oddalaniu. Boki gasną na 6%, góra na 3% (czubek głowy w kadrze
„bark” stoi na 4,2%), dół na 12%. Bez @property wartość przełącza się skokowo. */
@property --rh-fade {
syntax: ' w gridzie — rytm robi gap. */
.rh-talk__line { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: -0.03px; text-wrap: pretty; }
/* stawka w kaflu-finale (2026-09-19 nocą, „żeby wybrzmiało”) — bez własnego tła:
espresso daje kafel, amber wraca do roli akcentu (puenta + CTA). Poprzedni bursztynowy
kafel stawki gasił bursztynowy przycisk pod spodem i dusił zdanie (16px/16px). */
.rh-talk__stake {
margin: 0 0 28px;
max-width: 44ch;
font-size: 19px;
line-height: 1.55;
letter-spacing: -0.03px;
text-wrap: pretty;
}
/* teza na własnej linii — 22px to ustalony stopień skali (hero trust, h3 kontaktu) */
.rh-talk__stake strong {
display: block;
margin: 0 0 14px;
font-size: 22px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.05px;
text-wrap: balance;
}
/* anafora „im…” wyszczególniona (właściciel, 2026-09-19 nocą) — trzy linie z bursztynową
kropką (znacznik jak przy etykietach kroków), crescendo przed domknięciem */
.rh-talk__stake-list {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.rh-talk__stake-list li {
position: relative;
padding-left: 22px;
}
.rh-talk__stake-list li::before {
content: "";
position: absolute;
left: 2px;
top: calc(0.775em - 3px); /* środek pierwszej linii przy line-height 1.55 */
width: 6px;
height: 6px;
border-radius: var(--rh-pill);
background: var(--rh-amber);
}
/* domknięcie anafory: własna linia, zwykłe zdanie po przecinku zbiera trzy punkty
(2026-09-24, plan P0-06a: bez pauzy „—”) */
.rh-talk__stake-sum { margin: 12px 0 0; }
/* puenta po domknięciu, na własnej linii — bursztyn na espresso (~9:1) podaje oko
bursztynowemu CTA niżej; amber jako tekst TYLKO w ciemnym kontekście */
.rh-talk__stake-punch {
margin: 18px 0 0;
font-weight: 500;
color: var(--rh-amber);
}
/* kafel-finał „A potem?” USUNIĘTY 2026-09-19 (właściciel) — jego kolorystykę przejęły
wszystkie kafle sekcji (kontekst ciemny wyżej); reguły --finale i --last skasowane. */
/* porównanie trzech dróg kwalifikacji — NIEUŻYWANE od 2026-09-19 (właściciel: „nie
porównujmy”); markup uśpiony w plan.php ('compare' nieustawione). Reguły zostają
na wypadek powrotu. */
.rh-talk__tracks {
display: grid;
gap: 10px;
margin: 12px 0 4px;
padding: 0;
list-style: none;
}
/* tło jak karty w innych sekcjach — bez własnego odcienia. Cień celowo --rh-shadow-sm:
statyczny załącznik w odpowiedzi (jak .rh-talk__doc); pełny cień mają elementy
klikalne (.rh-talk__card) i karty top-level (.rh-gcard). */
.rh-talk__track {
display: grid;
gap: 4px;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--rh-radius-inner);
background: var(--card);
box-shadow: var(--rh-shadow-sm);
}
/* kafel RH: bursztynowa krawędź (dekoracja, nie tekst) */
.rh-talk__track--rh { border-color: var(--rh-amber); }
.rh-talk__track-tag {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 12px;
letter-spacing: 0.12px;
color: var(--muted);
}
.rh-talk__track-tag::before {
content: "";
width: 8px;
height: 8px;
border-radius: var(--rh-pill);
border: 1px solid var(--line-strong);
}
.rh-talk__track--rh .rh-talk__track-tag { color: var(--ink); font-weight: 500; }
.rh-talk__track--rh .rh-talk__track-tag::before {
border-color: var(--rh-amber);
background: var(--rh-amber);
}
/* typografia identyczna z .rh-talk__line — blok ma czytać się jak część odpowiedzi */
.rh-talk__track-text { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: -0.03px; text-wrap: pretty; }
/* sygnały „od razu do lekarza” — treść bezpieczeństwa, nie ozdoba */
.rh-talk__note {
margin: 12px 0 0;
padding-top: 12px;
border-top: 1px dashed var(--line-strong);
font-size: 19px;
line-height: 1.3;
letter-spacing: -0.03px;
text-wrap: pretty;
color: var(--ink);
}
.rh-talk__note strong { font-weight: 500; }
/* kafel-artefakt „Twój plan” — NIEUŻYWANY od 2026-09-19 (karta wycofana przez
właściciela; markup uśpiony w plan.php, flaga 'doc' nieustawiona). Reguły zostają
na wypadek powrotu — projekt nie trzyma pełnej historii w gicie (por. droga.php). */
.rh-talk__doc {
max-width: 440px;
margin: 14px 0 4px;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: var(--rh-radius-inner);
background: #fff;
box-shadow: var(--rh-shadow);
}
.rh-talk__doc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.rh-talk__doc-title { font-size: 16px; font-weight: 500; }
.rh-talk__doc-badge {
padding: 3px 10px;
border-radius: var(--rh-pill);
background: var(--rh-amber);
color: var(--rh-espresso);
font-size: 12px;
letter-spacing: 0.12px;
white-space: nowrap;
}
.rh-talk__doc-sub { margin: 4px 0 12px; font-size: 13px; letter-spacing: 0.12px; color: var(--muted); }
.rh-talk__doc-rows {
display: grid;
gap: 8px;
margin: 0;
padding-top: 12px;
border-top: 1px solid var(--line);
}
.rh-talk__doc-rows > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.rh-talk__doc-rows dt { margin: 0; font-size: 14px; color: var(--muted); }
.rh-talk__doc-rows dd { margin: 0; font-size: 16px; font-weight: 500; text-align: right; }
.rh-talk__doc-blank { font-weight: 400; color: var(--muted); letter-spacing: 2px; }
.rh-talk__doc-note {
margin: 12px 0 0;
padding-top: 10px;
border-top: 1px dashed var(--line-strong);
font-size: 14px;
line-height: 1.5;
color: var(--muted);
}
/* zajawka „piramidy efektów” (2026-09-19) — pełne rozwinięcie planowane na podstronie */
.rh-talk__pyramid { margin: 16px 0 4px; max-width: 400px; }
.rh-talk__pyramid svg { display: block; width: 100%; height: auto; }
.rh-talk__pyramid text {
fill: var(--rh-espresso);
font-family: var(--rh-font);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.1px;
}
.rh-talk__pyramid figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* Wykres „lepsze i gorsze dni” w Kroku 2 (2026-09-24, plan P1-07, makieta m5 z poprawkami
recenzji): sam kształt przebiegu, bez osi, liczb i tygodni. Podpis siedzi w pustym lewym
górnym rogu (krzywa trzyma się ≥18 jednostek od góry do x=294), więc figura ma dokładnie
wysokość wykresu: 72 px, od 900 px 88 px. Odstęp od linii odpowiedzi: gap wątku + 2 px
(na głównej 20 px, „Plan ma mieć oddech”). */
.rh-talk__chart { position: relative; margin: 2px 0; }
.rh-talk__chart svg { display: block; width: 100%; height: 72px; overflow: visible; }
.rh-talk__chart figcaption {
position: absolute;
top: 0;
left: 0;
margin: 0;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.12px;
white-space: nowrap;
color: var(--rh-sand);
}
/* dno jedynego dołka „gorszy dzień” (x 190/320, y 56/72 viewBoxa): HTML nad SVG, bo w SVG
z preserveAspectRatio="none" koło rozciąga się w elipsę; środek = tło kafla .home */
.rh-talk__chart-dot {
position: absolute;
left: 59.375%;
top: 77.78%;
width: 10px;
height: 10px;
border: 2.5px solid var(--rh-amber);
border-radius: 50%;
background: #21170c;
transform: translate(-50%, -50%);
}
@media (min-width: 900px) {
.rh-talk__chart svg { height: 88px; }
}
/* 320 px: przy 12 px podpis prawie dotykał krzywej (2,9 px); 11 px daje ok. 10 px prześwitu */
@media (max-width: 359px) {
.rh-talk__chart figcaption { font-size: 11px; letter-spacing: 0; }
}
/* „pisze…” */
.rh-talk__typing {
position: absolute;
left: 56px;
top: 4px;
display: none;
align-items: center;
gap: 5px;
height: 34px;
padding: 0 14px;
border-radius: var(--rh-pill);
background: var(--card);
box-shadow: var(--rh-shadow-sm);
}
.rh-talk__typing i {
width: 6px;
height: 6px;
border-radius: var(--rh-pill);
background: var(--ink);
animation: rh-talk-dot 1s infinite ease-in-out;
}
.rh-talk__typing i:nth-child(2) { animation-delay: .15s; }
.rh-talk__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes rh-talk-dot {
0%, 60%, 100% { transform: translateY(0); opacity: .35; }
30% { transform: translateY(-3px); opacity: 1; }
}
.rh-talk__a.is-typing .rh-talk__typing { display: inline-flex; }
/* karta-link */
.rh-talk__card {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
align-items: center;
gap: 14px;
width: fit-content;
min-width: min(320px, 100%);
max-width: 100%;
margin-top: 14px;
padding: 8px 20px 8px 8px;
border: 1px solid var(--rh-amber);
border-radius: var(--rh-radius-inner); /* 2026-09-24 (P1-01): karta-link zagnieżdżona w kaflu */
background: var(--card);
color: var(--ink);
box-shadow: var(--rh-shadow);
transition: transform .25s ease, box-shadow .25s ease, border-color .15s ease;
}
/* 2026-09-20 (właściciel: „dodaj im bursztynu"): stała bursztynowa obwódka wpina
karty w rodzinę przycisków na ciemnym kaflu; hover = uniesienie + jaśniejszy amber */
.rh-talk__card:hover { transform: translateY(-2px); box-shadow: var(--rh-shadow-lg); border-color: var(--rh-amber-hover); }
/* miniatura = zdjęcie z gabinetu wypełniające kafelek (2026-09-19; wcześniej
48px „wycięty przedmiot” w contain — pliki plan-*.webp nigdy nie powstały) */
.rh-talk__thumb {
display: grid;
place-items: center;
width: 72px;
height: 72px;
overflow: hidden;
border-radius: var(--rh-radius-inner);
background: var(--surface);
}
.rh-talk__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rh-talk__thumb:empty::after {
content: "";
width: 28px;
height: 28px;
border-radius: var(--rh-pill);
border: 1px dashed var(--line-strong);
}
.rh-talk__card-body { display: grid; min-width: 0; }
.rh-talk__card-title { font-size: 17px; font-weight: 500; line-height: 1.3; }
/* finał: stawka + CTA w jednym ciemnym kaflu (2026-09-19 nocą) — baza z .rh-talk__group,
tylko więcej powietrza; wcześniej goły kontener na jasnym tle (bursztyn na bursztynie) */
.rh-talk__group--cta { padding: 32px 36px 36px; }
/* animacja (tylko z JS)
2026-09-24 (plan P1-06): selektory zawężone do .rh-talk.is-js (klasę dodaje plan.php na
#plan). Od teraz head.php stawia is-js także na , a gołe „.is-js .rh-talk__…”
chowałyby kafle Planu na telefonie, gdzie plan.php nie odpala choreografii i nic nie
dodaje .is-in (decyzja 19.09: poniżej 900 px kafle widoczne od razu). */
.rh-talk.is-js .rh-talk__step, .rh-talk.is-js .rh-talk__facts, .rh-talk.is-js .rh-talk__q, .rh-talk.is-js .rh-talk__avatar,
.rh-talk.is-js .rh-talk__line, .rh-talk.is-js .rh-talk__chart, .rh-talk.is-js .rh-talk__track, .rh-talk.is-js .rh-talk__note, .rh-talk.is-js .rh-talk__doc,
.rh-talk.is-js .rh-talk__card, .rh-talk.is-js .rh-talk__stake, .rh-talk.is-js .rh-talk__cta { opacity: 0; transform: translateY(12px); }
.rh-talk.is-js .rh-talk__q { transform: translateY(10px) scale(.96); transform-origin: 100% 100%; }
.rh-talk.is-js .is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.rh-talk.is-js .rh-talk__a.is-typing .rh-talk__lines { visibility: hidden; }
/* 2026-09-24 (plan P1-07): wykres wchodzi takt po swojej linii i rysuje się od lewej, kropka
„gorszego dnia” pojawia się, gdy krzywa do niej dojdzie. .rh-talk.is-js jest tylko od 900 px
i bez reduced-motion (plan.php), media query to bezpiecznik przy zmianie okna; niżej statycznie. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
.rh-talk.is-js .rh-talk__chart svg { clip-path: inset(0 100% 0 0); }
.rh-talk.is-js .rh-talk__chart.is-in svg { clip-path: inset(0); transition: clip-path .9s cubic-bezier(.2, .8, .2, 1); }
.rh-talk.is-js .rh-talk__chart .rh-talk__chart-dot { opacity: 0; }
.rh-talk.is-js .rh-talk__chart.is-in .rh-talk__chart-dot { opacity: 1; transition: opacity .3s ease .55s; }
}
/* mobile (2026-09-21): animują się TYLKO pigułki pytań — kafle widoczne od razu
(pełna choreografia zostaje na ≥900px; decyzja 19.09 o mobile nienaruszona) */
.is-js-q .rh-talk__q { opacity: 0; transform: translateY(10px) scale(.96); transform-origin: 100% 100%; }
.is-js-q .rh-talk__q.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 899px) {
.rh-talk__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.rh-talk__head { position: static; }
.rh-talk__thread { gap: 20px; }
.rh-talk__group { padding: 20px 16px 24px; }
.rh-talk__group--cta { padding: 24px 20px 28px; }
.rh-talk__stake { font-size: 17px; }
.rh-talk__stake strong { font-size: 20px; }
.rh-talk__meta { flex-wrap: wrap; gap: 4px 16px; margin-bottom: 16px; padding-bottom: 12px; }
/* 2026-09-19: bez zbijania pytań do 14px — pytania niosą głos pacjenta i zostają 16px
jak na desktopie; rozróżnienie głosów robi ciemny dymek, nie rozmiar */
.rh-talk__q { max-width: 88%; }
.rh-talk__a { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
.rh-talk__avatar { width: 32px; height: 32px; }
.rh-talk__typing { left: 44px; }
.rh-talk__card { min-width: 0; width: 100%; }
}
/* ---------- FAQ (2026-09-19): akordeon ),
więc „PEŁNA OPIEKA” miała 17 px i zero odstępu zamiast 12 px metki jak w kartach przygotowania */
.rh-pw-track > p:not(.rh-pw-track__tag) { margin: 0; font-size: 17px; line-height: 1.55; }
.rh-pw-track ul {
list-style: none;
display: grid;
gap: 8px;
margin: 14px 0 0;
padding: 14px 0 0;
border-top: 1px solid var(--line);
}
.rh-pw-track li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.4; }
.rh-pw-track li::before {
content: "";
position: absolute;
left: 2px;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: var(--rh-pill);
background: var(--rh-amber);
}
.rh-pw-close { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
/* duze kafle-linki ze zdjeciem u gory (wlasciciel: "kafle z linkami byly duze") */
.rh-pw-links { display: grid; gap: 16px; margin: 28px 0 0; }
.rh-pw-tile {
display: block;
border: 1px solid var(--line);
border-radius: var(--rh-radius);
background: var(--card);
box-shadow: var(--rh-shadow);
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.rh-pw-tile:hover { transform: translateY(-2px); box-shadow: var(--rh-shadow-lg); border-color: var(--rh-amber); }
/* 2026-09-24 (plan P0-05): height: auto, bo atrybut height="500" wygrywał z aspect-ratio
(na telefonie kadr 348×500 zamiast 16:10, ok. 565 px zbędnej wysokości na dwóch kaflach) */
.rh-pw-tile img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.rh-pw-tile__row { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.rh-pw-tile__body { display: grid; min-width: 0; }
.rh-pw-tile__title { font-size: 19px; font-weight: 500; letter-spacing: -0.03px; color: var(--ink); }
/* karty przygotowania (bez zmian z v1 poza gapem) */
.rh-pw-prep { display: grid; gap: 16px; margin: 24px 0 0; }
.rh-pw-card {
padding: 18px 20px;
border: 1px solid var(--line);
border-radius: var(--rh-radius);
background: var(--card);
box-shadow: var(--rh-shadow); /* 2026-09-24 (P1-01): jak karty ścieżek */
}
.rh-pw-card__tag {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted);
}
.rh-pw-card__tag::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--rh-pill);
background: var(--rh-amber);
}
.rh-pw-card p + p { margin: 0; font-size: 16px; line-height: 1.5; }
.rh-pw-card a { text-decoration: underline; text-underline-offset: 3px; }
/* zaufanie: fakty w ciemnym kaflu (drugi takt), opinie na papierze */
.rh-pw-trust { padding: 32px 36px 36px; }
.rh-pw-trust h2 { font-size: 30px; margin: 12px 0 10px; }
.rh-pw-trust h2 em { color: var(--rh-amber); }
.rh-pw-trust .rh-pw-intro { font-size: 17px; }
.rh-pw-trust .rh-guide__facts { margin-top: 24px; }
/* 2026-09-24 (weryfikacja po wdrożeniu): przy 320 px „3 735 pacjentów” kończyło się na 347 px
(poziomy overflow 27 px, hamburger ucięty). Sam padding daje 331 px, dlatego także siatka
3 × minmax(0, 1fr), jak w karcie bio na głównej. Liczby 18 px jak tam (przy 19 px
„od 2009” stało 2 px od kreski separatora). */
@media (max-width: 359px) {
.rh-pw-trust { padding: 28px 20px 32px; }
.rh-pw-trust .rh-guide__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rh-pw-trust .rh-guide__facts li { min-width: 0; }
.rh-pw-trust .rh-guide__facts strong { font-size: 18px; }
}
.rh-pw-quotes { display: grid; gap: 16px; margin: 16px 0 0; }
/* final: 1:1 wzorzec panelu "Fizjoterapeuta" z glownej (rh-guide__hero) —
wlasciciel 2026-09-20: "podstrony musza byc spojne". Scoped nadpisania:
u Agi dolna krawedz wycinka jest CZYSTA (u Marcina dolne 16% to mgla),
wiec bez clip-path i translate; wysokosc = cut+pop, dol rowno z panelem. */
.rh-pw-sec--final { padding-top: 8px; }
.rh-pw-final .rh-guide__cut img {
height: calc(var(--cut-h) + var(--pop));
transform: translate(-50%, 0);
clip-path: none;
}
.rh-pw-final h2 em { color: var(--rh-amber); }
.rh-pw-final__stake { margin: 14px 0 24px; max-width: 44ch; font-size: 19px; line-height: 1.55; letter-spacing: -0.03px; }
.rh-pw-final__aga { margin: 18px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.55; color: var(--muted); }
.rh-pw-final__aga a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.rh-pw-final__pill {
position: absolute;
left: 16px;
bottom: 14px;
padding: 6px 12px;
border: 1px solid var(--rh-walnut);
border-radius: var(--rh-pill);
background: rgba(20, 11, 0, 0.55);
font-size: 12px;
letter-spacing: 0.12px;
color: var(--rh-sand);
}
/* na telefonie tresc finalu lezy na jasnej karcie (flip z .rh-guide__hero) —
amber jako tekst na jasnym zabroniony, h2 em przechodzi na amber-deep */
@media (max-width: 767px) {
.rh-pw-final h2 em { color: var(--rh-amber-deep); }
}
@media (min-width: 768px) {
.rh-pw h2 { font-size: 43px; letter-spacing: -0.3px; }
.rh-pw-trust h2 { font-size: 34px; }
.rh-pw-tracks, .rh-pw-links, .rh-pw-quotes, .rh-pw-prep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 2026-09-24 (plan P0-05): 5 kart przygotowania bez pustego pola siatki.
768–1023 px: 2 + 2 + ostatnia na całą szerokość; od 1024 px 6 kolumn, karty 1–3
po 2 kolumny, karty 4–5 po 3 (rząd 3 + 2 zamiast 3 + 2 + dziura). */
@media (min-width: 768px) and (max-width: 1023px) {
.rh-pw-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
.rh-pw-prep { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rh-pw-card { grid-column: span 2; }
.rh-pw-card:nth-child(n + 4) { grid-column: span 3; }
/* 2026-09-24 (plan P1-01d): ciemny kafel faktów na pełnej szerokości kontenera — tekst
po lewej, pas faktów po prawej, zamiast pustej płaszczyzny espresso obok tekstu */
.rh-pw-trust {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 56px;
}
.rh-pw-trust > * { grid-column: 1; }
.rh-pw-trust > .rh-guide__facts { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; }
}
@media (max-width: 479px) {
.rh-pw-step > summary { padding: 18px 16px; gap: 12px; }
.rh-pw-step > summary h3 { font-size: 19px; }
.rh-pw-step__inner { padding: 16px 16px 20px; }
.rh-pw-step__figure img { aspect-ratio: 16 / 10; }
.rh-pw-more__panel, .rh-pw-more__answer { margin-left: 0; }
}
/* RH FIZJO / 2026-09-21
Homepage layout from rhfizjo.pl: framed imagery, roomy tiles, fine rules.
Scoped to .home: existing copy, section order and subpages stay intact. */
/* 2026-09-24 (plan P1-01): koniec zerowania cieni (--rh-shadow-sm/--rh-shadow: none,
własne --rh-shadow-lg) i promienia 20/16 px w body.home. Promienie i cienie idą z :root
(wspólne z /pierwsza-wizyta/). Skutki uboczne powrotu tokenów (zmierzone w m4): cień
wraca też na .rh-spot__label, .rh-more („Nie tego szukasz?”), .rh-talk__typing
i panel menu (bazowy --rh-shadow-lg zamiast 0 18px 48px -36px/.3). */
body.home {
--rh-max: 1200px;
--rh-section: 80px;
--rh-amber-deep: #925600;
--line: rgba(115,83,40,.2);
}
/* 2026-09-24 (plan P0-04): pełne espresso zamiast rgba(20,11,0,.97) — przez 3% prześwitu
treść (model z mapy ciała, zdjęcia Planu) przebijała pod navem po przewinięciu.
Rozmiary przycisków nav przeniesione do bazy (sekcja Nawigacja); duże przyciski
.home omijają małe przyciski nav (.rh-btn--sm), inaczej nadpisałyby bazę. */
.home .rh-nav { background: var(--rh-espresso); border-bottom: 1px solid rgba(255,241,224,.15); }
.home .rh-btn:not(.rh-btn--sm) { min-height: 48px; padding-inline: 22px; box-shadow: none; }
.home .rh-tag { margin-bottom: 20px; }
.home :is(.rh-body,.rh-guide,.rh-talk,.rh-faq,.rh-kontakt) { padding-inline: var(--rh-gutter); }
/* 2026-09-22: kolor separatorów przeszedł do bazy (bursztynowe linie włosowe) */
.home :is(.rh-body,.rh-guide,.rh-talk,.rh-faq,.rh-kontakt) h2 {
line-height: 1.12;
letter-spacing: -.025em;
text-wrap: balance;
}
/* 2026-09-21 (właściciel do wariantu .home): „popraw hero, zdjęcie w tle" —
rozbicie hero na kolumny COFNIĘTE (zdjęcie wraca pod tekst, scrim z bazy),
ale kafel-karta social proof ZOSTAJE w tej formie. */
.home .rh-hero__learn { display: inline-flex; }
/* 2026-09-22: reguły kafla zaufania przeniesione z tego bloku do BAZY .rh-hero__trust
(właściciel zatwierdził formę, a na /pierwsza-wizyta renderowała się stara) */
/* The body selector stays interactive; its choices become clearly defined tiles. */
.home .rh-body { padding-top: var(--rh-section); }
.home .rh-body__inner { column-gap: 32px; row-gap: 32px; }
.home .rh-body__chips { gap: 8px; }
.home .rh-chip { border-color: var(--line); background: rgba(255,251,245,.55); padding: 13px 14px; }
.home .rh-chip:hover { border-color: #ac824b; background: var(--rh-card); }
.home .rh-chip[aria-pressed="true"] { border-color: #a56c20; background: #fff0d8; box-shadow: inset 3px 0 #ffb442; }
.home .rh-chip[aria-pressed="true"] .rh-chip__area { color: var(--rh-espresso); }
.home .rh-chip__area { font-size: 16px; }
.home .rh-chip__q { font-size: 13px; line-height: 1.5; }
.home :is(.rh-body__empty,.rh-body__panel) { padding: 28px; border-style: solid; border-color: var(--line); background: var(--rh-card); box-shadow: var(--rh-shadow); }
.home .rh-body__panel h3 { font-size: 28px; line-height: 1.2; }
.home .rh-body__empty-text { font-size: 22px; line-height: 1.45; }
.home .rh-body__list { line-height: 1.65; }
.home .rh-body__list li { margin-block: 8px; }
.home .rh-body__book { margin-top: 4px; }
/* Portrait plus an open, three-column review grid, as on the reference site. */
.home .rh-guide__hero { border: 1px solid rgba(115,83,40,.2); margin-bottom: 40px; }
/* 2026-09-24 (weryfikacja po wdrożeniu): tekst i link „Więcej o zespole” zawsze nad zdjęciem
(przy 1024–1279 px wycinek zasłaniał początek linku) */
.home .rh-guide__copy { position: relative; z-index: 1; padding: 32px 28px; }
.home .rh-guide__bio { line-height: 1.6; }
.home .rh-guide__facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.home .rh-guide__facts li { min-width: 0; padding-right: 10px; }
.home .rh-guide__facts li + li { padding-left: 10px; }
.home .rh-guide__grid { gap: 24px; }
.home .rh-gcard--score { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
.home .rh-gcard--score > * { margin: 0; }
.home .rh-gcard--score .rh-gcard__score { font-size: 60px; }
.home .rh-guide__quotes { grid-column: 1 / -1; gap: 24px; }
/* 2026-09-24 (plan P1-01): pady karty, cudzysłów, interlinia cytatu i podpis przeniesione
do bazy .rh-gcard (wspólne z /pierwsza-wizyta/); kolor #925600 = --rh-amber-deep tej strony */
.home .rh-guide__cta { margin-top: 8px; }
/* Three steps read from left to right on desktop, with all current text visible. */
.home .rh-talk__inner { display: block; }
.home .rh-talk__head { position: static; max-width: 740px; margin-bottom: 48px; }
.home .rh-talk .rh-tag { color: var(--rh-amber-deep); }
.home .rh-talk__thread { display: grid; gap: 24px; }
.home .rh-talk__group { display: flex; flex-direction: column; padding: 28px; border: 1px solid rgba(255,241,224,.17); background: #21170c; }
.home .rh-talk__meta { flex-direction: column; align-items: start; gap: 10px; padding-bottom: 24px; margin-bottom: 24px; border-bottom-color: rgba(255,241,224,.17); }
.home .rh-talk__step { color: var(--rh-amber); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; white-space: normal; }
.home .rh-talk__step::before { display: none; }
.home .rh-talk__facts { text-align: left; font-size: 13px; color: var(--rh-sand); }
/* 2026-09-21 (właściciel): bursztynowa pigułka pytania PRZYWRÓCONA (bazowy dymek),
nadpisanie „goły serif" z eksperymentu usunięte */
.home .rh-talk__q { margin-bottom: 24px; }
.home .rh-talk__a { display: flex; flex: 1; margin: 0; }
.home .rh-talk__avatar { display: none; }
.home .rh-talk__lines { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.home .rh-talk__line { font-size: 17px; line-height: 1.7; color: #d7cbbc; }
.home .rh-talk__line strong { color: var(--rh-cream); font-weight: 600; }
.home .rh-talk__card { width: 100%; min-width: 0; margin-top: auto; border-color: rgba(255,180,66,.55); background: rgba(255,241,224,.045); }
.home .rh-talk__card:hover { border-color: var(--rh-amber); }
.home .rh-talk__card-title { font-size: 15px; }
.home .rh-talk__group--cta { grid-column: 1 / -1; gap: 28px; padding: 36px; background: var(--rh-espresso); }
/* link CTA szerokości przycisku (w kolumnie flex rozciągał się na cały kafel, hover łapał pusty pas) */
.home .rh-talk__cta { align-self: flex-start; }
.home .rh-talk__stake { margin: 0; max-width: 760px; line-height: 1.6; }
.home .rh-talk__stake strong { font-family: var(--rh-serif); font-size: 30px; font-weight: 500; }
.home .rh-talk__stake-punch { margin-bottom: 0; }
/* 2026-09-21 (właściciel: „dodaj animacje dla tych pytań"): bazowa choreografia
czatu (wjazd pigułek, kropki pisania, odsłanianie odpowiedzi) PRZYWRÓCONA —
wyłączające ją nadpisania eksperymentu usunięte. Kropki pisania bez wcięcia,
bo wariant .home chowa awatar (bazowe left:56px celowało pod niego). */
.home .rh-talk__typing { left: 0; }
/* Wide FAQ tiles; thin amber rule identifies the expanded answer. */
.home .rh-faq__inner { grid-template-columns: minmax(0,1fr); gap: 40px; }
.home .rh-faq__head { position: static; max-width: 780px; }
.home .rh-faq h2 { font-size: clamp(34px,4vw,50px); }
.home .rh-faq__list { gap: 14px; }
.home .rh-faq__item { border-color: var(--line); }
/* 2026-09-24 (QA): tło otwartego pytania = bazowe --card (od P1-01 zamknięte ma to samo) */
.home .rh-faq__item[open] { border-color: rgba(146,86,0,.45); }
.home .rh-faq__item summary { padding: 24px 28px; font-size: 22px; gap: 20px; }
.home .rh-faq__body { padding: 0 28px 28px 68px; max-width: 1000px; gap: 16px; }
.home .rh-faq__body p { line-height: 1.75; }
.home .rh-faq__tail { margin-top: 16px; }
/* Booking keeps the current widget and links, with the same generous card rhythm. */
.home .rh-kontakt__head { max-width: 780px; margin-bottom: 44px; }
.home .rh-kontakt__grid { gap: 24px; }
.home .rh-kontakt__card { padding: 32px; border-color: var(--line); }
.home .rh-kontakt__underline { margin-block: 20px 28px; }
.home .rh-kontakt__rows { gap: 28px; }
.home .rh-foot { border-top: 1px solid rgba(255,241,224,.18); padding-block: 64px 28px; }
@media (min-width: 768px) {
body.home { --rh-section: 104px; }
.home .rh-guide__hero { margin-top: 0; }
.home .rh-guide__cut { height: 100%; align-self: stretch; }
.home .rh-guide__cut img { height: calc(100% / .84); }
.home .rh-guide__copy h2 em { color: var(--rh-sand); }
.home .rh-guide__copy { padding: 40px 40px 40px 8px; }
/* 2026-09-23 (P1-04): 3. kolumna 245 → 269 px = iframe certyfikatu + płyta 2×12 px */
.home .rh-gcard--score { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr) 269px; align-items: center; column-gap: 32px; }
.home .rh-gcard--score .rh-gcard__label { grid-column: 1; grid-row: 1; }
.home .rh-gcard--score .rh-gcard__score { grid-column: 1; grid-row: 2; }
.home .rh-gcard--score .rh-gcard__text { grid-column: 1; grid-row: 3; }
.home .rh-gcard--score .rh-gcard__tags-label { grid-column: 2; grid-row: 1; }
.home .rh-gcard--score .rh-gcard__tags { grid-column: 2; grid-row: 2; }
.home .rh-gcard--score .rh-gcard__link { grid-column: 2; grid-row: 3; padding-top: 0; }
.home .rh-gcard--score .rh-zl-cert { grid-column: 3; grid-row: 1 / 4; margin: 0; }
.home .rh-guide__quotes { grid-template-columns: repeat(3,minmax(0,1fr)); }
.home .rh-talk h2 { font-size: 50px; }
.home .rh-talk__group--cta { padding: 44px; }
}
/* 2026-09-24 (weryfikacja po wdrożeniu): 1024–1279 px. Wycinek w wysokości calc(100% / .84)
miał x −60…605 przy 1024 px: wychodził poza kartę, łokieć zasłaniał „od 2009” i link.
Jak na telefonie: zdjęcie mieści się w kolumnie (x 33–512 przy 1024). Od 1280 px bez zmian. */
@media (min-width: 1024px) and (max-width: 1279px) {
.home .rh-guide__cut img { max-width: 100%; object-fit: contain; object-position: bottom; }
}
@media (min-width: 1024px) {
.home .rh-talk__thread { grid-template-columns: repeat(3,minmax(0,1fr)); }
/* 2026-09-24 (plan P0-06b): finał w kolumnie jak na telefonie, CTA pod „Nie odwlekaj.”
do lewej (odstęp 28 px z gap); układ wierszowy z CTA przy prawej krawędzi usunięty.
Kafel na 2 z 3 kolumn siatki (792 px przy 1200 px; wariant A krytyka §6.6, ok. 760 px,
wyrównany do krawędzi kafli nad nim): bez pustej płaszczyzny espresso ok. 800×417 px,
zostaje papier. Wariant dwukolumnowy odrzucony na zrzucie: CTA lądowało w połowie strony. */
.home .rh-talk__group--cta { grid-column: 1 / span 2; }
/* 2026-09-24 (P2-02, m5): metki rezerwują 2 wiersze, żeby pigułki pytań w trzech
kaflach stały w jednej linii (metka Kroku 2 ma drugi wiersz „łączny koszt…”). */
.home .rh-talk__facts { line-height: 1.5; min-height: 3em; }
}
/* kafle 246–273 px treści: przy 13 px „łączny koszt szacuję na pierwszej wizycie” łamało się
na 2 wiersze i pigułka Kroku 2 zjeżdżała o wiersz (pomiar 1024 px); 12 px mieści się w jednym */
@media (min-width: 1024px) and (max-width: 1099px) {
.home .rh-talk__facts { font-size: 12px; }
}
@media (max-width: 767px) {
/* 2026-09-24 (plan P0-04): reguły nav (bar 12 px, odstępy 8/6 px, przyciski) przeniesione
do bazy, z przyciskami 44 px / 13 px zamiast 40 px / 12 px */
.home .rh-body__inner { row-gap: 24px; }
.home :is(.rh-body__empty,.rh-body__panel) { padding: 24px; }
/* 2026-09-24 (P1-01, m4): dół karuzeli mieści cień kart (overflow-x ucinał go twardą
krawędzią 24 px pod kartą), ujemny margines trzyma dotychczasowy odstęp do CTA */
.home .rh-guide__quotes { gap: 16px; padding-bottom: 36px; margin-bottom: -20px; }
.home .rh-guide__cut img { max-width: 100%; object-fit: contain; object-position: bottom; }
.home .rh-guide__copy { padding-inline: 22px; }
.home .rh-gcard--quote { flex-basis: 88%; box-shadow: var(--rh-shadow-sm); }
.home .rh-talk__head { margin-bottom: 32px; }
.home .rh-talk__q { min-height: 0; }
.home .rh-talk__group { padding: 26px 22px; }
.home .rh-talk__group--cta { padding: 28px 24px; }
.home .rh-talk__stake strong { font-size: 27px; }
.home .rh-talk__card { margin-top: 8px; }
.home .rh-faq__item summary { padding: 22px 20px; gap: 12px; font-size: 20px; }
.home .rh-faq__body { padding: 0 20px 24px; }
.home .rh-kontakt__card { padding: 24px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.home .rh-guide__hero { grid-template-columns: minmax(0,1fr); }
.home .rh-guide__cut { height: 400px; }
.home .rh-guide__copy { padding: 36px; }
.home .rh-gcard--score { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); }
.home .rh-gcard--score .rh-zl-cert { grid-column: 1; grid-row: 4; }
.home .rh-gcard--score .rh-gcard__tags { grid-row: 2 / 4; }
/* 2026-09-24 (m4, poprawka recenzji): link na dole obok płyty certyfikatu, nie w połowie */
.home .rh-gcard--score .rh-gcard__link { grid-row: 4; align-self: end; }
/* 2026-09-24 (P1-01, m4): opinie jedna pod drugą; w 3 kolumnach po ~230 px karta miała
15 wierszy, a podpis łamał datę. Wiersz cytatu do ok. 80 znaków. */
.home .rh-guide__quotes { grid-template-columns: minmax(0,1fr); }
.home .rh-gcard--quote blockquote { max-width: 640px; }
}
@media (max-width: 380px) {
.home .rh-guide__facts strong { font-size: 18px; }
.home .rh-guide__facts span { font-size: 10px; }
}
/* ===== Pas zdjęcia w kaflach Planu (werdykt A/B 2026-09-22: wariant B na stałe;
pełne tło kafla odrzucone jako nieczytelne). Obramowany pas fotografii u góry
kafla z winietą, miniatura w karcie-linku ukryta (pas ją zastępuje). ===== */
.rh-talk__thread > .rh-talk__group:not(.rh-talk__group--cta)::before {
content: "";
display: block;
height: clamp(150px, 24vw, 200px);
margin: 0 0 22px;
border: 1px solid rgba(255, 241, 224, 0.14);
border-radius: 12px;
background-size: cover;
background-position: center;
box-shadow: inset 0 0 56px 10px rgba(11, 6, 0, 0.45);
}
.rh-talk__thread > .rh-talk__group:nth-child(1)::before { background-image: url(assets/images/process-1.webp?v=bdaabc2f); }
.rh-talk__thread > .rh-talk__group:nth-child(2)::before { background-image: url(assets/images/process-2.webp?v=89e444ab); }
.rh-talk__thread > .rh-talk__group:nth-child(3)::before { background-image: url(assets/images/process-3.webp?v=0468a2d1); }
/* markup miniatury zostaje w plan.php na wypadek powrotu, CSS ją chowa */
.rh-talk__thumb { display: none; }
.rh-talk__card { grid-template-columns: minmax(0, 1fr); padding: 16px 20px; }
/* ===== Paczka premium (2026-09-22, właściciel: „rób!") ===== */
/* 1. Bursztynowe linie włosowe między sekcjami (zamiast szarych --line) */
.rh-guide__inner,
.rh-talk__inner,
.rh-faq__inner,
.rh-kontakt__inner { border-top-color: rgba(193, 116, 0, 0.22); }
.rh-pw-sec + .rh-pw-sec:not(.rh-pw-sec--final) > .rh-pw-sec__inner {
border-top: 1px solid rgba(193, 116, 0, 0.2);
padding-top: 40px;
}
/* 2. Liczby głosem marki: wartości kafla zaufania w Playfair */
.rh-hero__trust-value { font-family: var(--rh-serif); }
/* 3. Akordeony „zapalające się" po otwarciu (wzorzec produkcji) */
.rh-faq__item,
.rh-pw-step { transition: border-color .2s ease, box-shadow .2s ease; }
.rh-faq__item[open] { border-color: rgba(193, 116, 0, 0.45); box-shadow: var(--rh-shadow); }
.rh-pw-step[open] { border-color: rgba(193, 116, 0, 0.4); }
/* 4. Wspólna temperatura barw (decyzja właściciela 24.09): korekta WYPALONA w plikach zdjęć
skryptem narzedzia/korekta-barw/grade_site.py (czyta zawsze z oryginałów). Filtry CSS
saturate/sepia usunięte (hero, awatar, pasy Planu, figury PW, wycinki, model mapy ciała),
żeby korekta nie działała podwójnie. Wycinki wracają do cienia drop-shadow z 18.09. */
/* 2026-09-24 (plan P0-05): winieta przeniesiona z wygrywał
z aspect-ratio (na telefonie kadr 348×450 zamiast 16:10). Promień 14 px: zdjęcie
jest zagnieżdżone w karcie kroku (P1-01). Winieta na .rh-pw-step__img (paczka premium). */
.rh-pw-step__figure { margin: 2px 0; }
.rh-pw-step__figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: 60% 40%;
border-radius: var(--rh-radius-inner);
}
.rh-pw-step__figure figcaption { margin: 8px 0 0; font-size: 13px; letter-spacing: 0.12px; color: var(--muted); }
/* warstwa rozwijana: krotka etykieta + ikona w kolku (wzor starej produkcji) */
.rh-pw-more { border-top: 1px solid var(--line); }
/* flex-start + ujemny margines ikony = kolo wycentrowane do PIERWSZEJ linii
etykiety (przy wielolinijkowych pytaniach ikona nie wisi na srodku bloku) */
.rh-pw-more summary {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 0;
cursor: pointer;
font-family: var(--rh-serif);
font-size: 17px;
font-weight: 500;
line-height: 1.45;
list-style: none;
}
.rh-pw-more summary .rh-pw-more__ico { margin-top: -6px; }
.rh-pw-more summary::-webkit-details-marker { display: none; }
.rh-pw-more__ico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid var(--line-strong);
border-radius: var(--rh-pill);
color: var(--rh-amber-deep);
}
/* tytul przypadku jako kicker DOPIERO po rozwinieciu (etykieta zostaje krotka).
2026-09-20 (wlasciciel: „nowa mniej czytelna, brzydkie"): kicker z szarego na
bursztyn jak na produkcji, wiecej swiatla w calym bloku przykladu. */
.rh-pw-more__kicker {
margin: 0 0 10px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--rh-amber-deep);
}
.rh-pw-more__panel { margin: 4px 0 20px 50px; }
/* bursztynowa linia = WYLACZNIE prawdziwy przypadek z gabinetu (dawna zlota linia) */
.rh-pw-more__case {
margin: 0;
padding: 14px 18px;
background: var(--surface);
border-left: 3px solid var(--rh-amber);
border-radius: 0 var(--rh-radius-inner) var(--rh-radius-inner) 0; /* 2026-09-24 (P1-01): zagnieżdżony */
font-size: 16px;
line-height: 1.65;
}
.rh-pw-more__answer { margin: 4px 0 20px 50px; font-size: 16px; line-height: 1.65; }
/* pod-blok fali w kroku 02: tylko gdy jest potrzebny */
.rh-pw-fala {
margin: 2px 0 0;
padding: 18px 20px 6px;
background: var(--surface);
border-radius: var(--rh-radius-inner); /* 2026-09-24 (P1-01): pod-blok w karcie kroku */
}
.rh-pw-fala__tag {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.12px;
color: var(--muted);
}
.rh-pw-fala__tag::before {
content: "";
width: 8px;
height: 8px;
border-radius: var(--rh-pill);
background: var(--rh-amber);
}
.rh-pw-fala > p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; }
.rh-pw-fala .rh-pw-more__case { background: var(--card); }
/* notka anty-nocebo: zawsze widoczna (HANDOFF), nigdy w details.
2026-09-24 (P1-01): 14 px, to wąski pasek-dopowiedzenie, nie karta sekcji */
.rh-pw-note {
margin: 20px 0 0;
padding: 14px 18px;
border-radius: var(--rh-radius-inner);
background: var(--rh-paper-2);
font-size: 15px;
line-height: 1.55;
}
/* sciezki po diagnozie: karty z wypunktowaniem 1:1 z produkcji
2026-09-24 (plan P1-01): statyczne karty treści z cieniem --rh-shadow jak karty
na głównej (opinie, dane kontaktowe, panel mapy); -sm zostaje zamkniętym akordeonom */
.rh-pw-tracks { display: grid; gap: 16px; margin: 24px 0 0; }
.rh-pw-track {
padding: 24px 26px;
border: 1px solid var(--line);
border-radius: var(--rh-radius);
background: var(--card);
box-shadow: var(--rh-shadow);
}
.rh-pw-track__tag {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--muted);
}
.rh-pw-track__tag::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--rh-pill);
background: var(--rh-amber);
}
/* 2026-09-24 (P1-01): :not() — .rh-pw-track > p łapało też metkę (
— bez JS panel
po prostu zostaje otwarty do kliknięcia; JS tylko domyka po linku/obok */
.rh-nav__menu { position: relative; }
.rh-nav__menu > summary {
list-style: none;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 241, 224, 0.4);
border-radius: var(--rh-pill);
color: var(--rh-cream);
cursor: pointer;
transition: background-color .15s ease;
}
.rh-nav__menu > summary::-webkit-details-marker { display: none; }
.rh-nav__menu > summary:hover,
.rh-nav__menu[open] > summary { background: var(--rh-walnut); }
/* 2026-09-24 (plan P0-04): jeden nagłówek w bazie, taki sam na głównej i na
/pierwsza-wizyta/ (wcześniej rozmiary przycisków siedziały w bloku .home na końcu
pliku, więc PW miała 36 px i hamburger wystający poza ekran przy 360 px).
Na telefonie cele dotyku 44 px (przyciski i hamburger), tekst 13 px. */
.rh-nav .rh-btn { min-height: 40px; padding-inline: 16px; }
@media (max-width: 767px) {
.rh-nav__bar { padding-inline: 12px; gap: 8px; }
.rh-nav__actions { gap: 6px; }
.rh-nav .rh-btn { min-height: 44px; padding-inline: 12px; font-size: 13px; }
.rh-nav__menu > summary { width: 44px; height: 44px; }
}
/* ≤380 px: po podniesieniu do 44 px odstęp logo–„Zadzwoń” spadał do ok. 10 px
(recenzja makiety m3); cel ≥18 px, wysokość zostaje */
@media (max-width: 380px) {
.rh-nav .rh-btn { padding-inline: 10px; }
.rh-nav__logo { letter-spacing: 0.04em; }
}
.rh-nav__menu-panel {
position: absolute;
top: calc(100% + 10px);
right: 0;
display: grid;
gap: 2px;
min-width: 220px;
padding: 8px;
border-radius: var(--rh-radius);
background: var(--rh-espresso);
box-shadow: var(--rh-shadow-lg);
}
.rh-nav__menu-panel a {
padding: 10px 14px;
border-radius: var(--rh-radius-inner);
font-size: 15px;
color: var(--rh-cream);
}
.rh-nav__menu-panel a:hover { background: var(--rh-walnut); }
/* na najwęższych ekranach telefon zwija się do samej słuchawki,
żeby logo + 3 pigułki nie przelewały paska przy 320 px (przy 375 zostaje tekst) */
@media (max-width: 359px) {
.rh-nav__phone-ico { display: inline-flex; }
.rh-nav__phone-short { display: none; }
}
@media (min-width: 600px) {
.rh-nav__phone-full { display: inline; }
.rh-nav__phone-short { display: none; }
.rh-nav__book-full { display: inline; }
.rh-nav__book-short { display: none; }
}
/* 2026-09-24 (plan P0-04): hamburger do 1039 px (było do 1023): przy 1024–1039 px
„PIERWSZA WIZYTA” i „O NAS” łamały się na dwa wiersze */
@media (min-width: 1040px) {
.rh-nav__links { display: flex; }
.rh-nav__menu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.rh-nav { transition: none; }
}
/* ---------- Hero (ciemny — zatwierdzony przez właściciela 16.09) ---------- */
.rh-hero {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
min-height: 700px;
min-height: min(92svh, 760px);
overflow: hidden;
background: var(--rh-espresso);
color: var(--rh-cream);
}
.rh-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Kadr ustalony wcześniej (HANDOFF §5): twarz i aparat w oknie na telefonie */
object-position: 24% center;
/* 2026-09-24: kolor wypalony w pliku (narzedzia/korekta-barw/grade_site.py), bez filtra CSS */
}
/* 2026-09-24 (plan P0-09): z kadrem mobilnym (parts/hero.php) nie tworzy
pudełka, więc ![]()
dalej jest absolutną warstwą tła .rh-hero. Kadr 600×984 jest już
wycięty wokół twarzy i aparatu, więc na telefonie środek zamiast 24%. */
.rh-hero > picture { display: contents; }
@media (max-width: 480px) {
.rh-hero > picture > .rh-hero__bg { object-position: center; }
}
.rh-hero__scrim {
position: absolute;
inset: 0;
/* Pas 56–70% (górny wiersz H1) nie może spadać poniżej ~0.6 */
background:
linear-gradient(to top,
rgba(20, 11, 0, 0.97) 0%,
rgba(20, 11, 0, 0.90) 34%,
rgba(20, 11, 0, 0.62) 62%,
rgba(20, 11, 0, 0.55) 100%);
}
/* po usunięciu plakietki (19.09) treść jest jedynym dzieckiem — dociskamy ją do dołu
kadru flex-endem (ze space-between siedziałaby u góry, na twarzy) */
.rh-hero__wrap {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
max-width: var(--rh-max);
margin: 0 auto;
padding: 84px var(--rh-gutter) 32px;
}
.rh-hero__content { max-width: 800px; }
/* 2026-09-21: markup hero jest odwrócony (display =
, jasne kafle po ciemnym Planie;
pytania 1–2 przeniesione z #plan, schema FAQPage w JSON-LD ---------- */
.rh-faq {
padding: 0 var(--rh-gutter) var(--rh-section);
background: var(--canvas);
color: var(--ink);
}
.rh-faq__inner {
max-width: var(--rh-max);
margin: auto;
padding-top: var(--rh-section);
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 52px;
align-items: start;
}
.rh-faq__head { position: sticky; top: 96px; }
.rh-faq h2 { margin: 0; }
.rh-faq__list { display: grid; gap: 12px; }
/* 2026-09-24 (plan P1-01): pytanie = element listy, promień 14 px; zamknięte --rh-shadow-sm,
otwarte --rh-shadow z obwódką amber 45% (paczka premium, pkt 3) */
.rh-faq__item {
border: 1px solid var(--line);
border-radius: var(--rh-radius-inner);
background: var(--card);
box-shadow: var(--rh-shadow-sm);
}
.rh-faq__item summary {
display: flex;
align-items: baseline;
gap: 14px;
padding: 16px 18px;
cursor: pointer;
list-style: none;
font-family: var(--rh-serif);
font-size: 18px;
font-weight: 500;
line-height: 1.35;
}
.rh-faq__item summary::-webkit-details-marker { display: none; }
/* znacznik +/− (glif UI, nie interpunkcja copy) */
.rh-faq__mark { flex: 0 0 auto; width: 20px; color: var(--rh-amber-deep); font-weight: 500; }
.rh-faq__mark::before { content: "+"; }
.rh-faq__item[open] .rh-faq__mark::before { content: "−"; }
.rh-faq__body { display: grid; gap: 10px; padding: 0 18px 18px 52px; }
.rh-faq__body p { margin: 0; font-size: 16px; line-height: 1.5; }
.rh-faq__body strong { font-weight: 500; }
/* ciemna ramka anty-pozycjonowania (przeniesiona z Planu, tam kafle są już ciemne).
2026-09-24 (P1-01): bez cienia, bo element w karcie nie może stać wyżej niż sama karta
(po powrocie cieni pigułka unosiła się nad pytaniem, m4) */
.rh-faq__callout {
padding: 12px 16px;
border-radius: var(--rh-radius-inner);
background: var(--rh-espresso);
color: var(--rh-cream);
}
.rh-faq__tail { margin: 6px 0 0; font-size: 15px; color: var(--muted); }
.rh-faq__tail a { font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) {
.rh-faq__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.rh-faq__head { position: static; }
.rh-faq__body { padding-left: 18px; }
}
/* baner-certyfikat ZnanyLekarz w karcie ocen (iframe 245×256 px z widget.js; zanim
treść iframe'u się wczyta, widget.js daje mu 150 px, pomiar 24.09 przy 390 i 1440 px).
2026-09-23 (plan P0-01 + P1-04): płyta-pieczęć (paper-2, 14 px) rysuje się TYLKO,
gdy iframe już jest, więc nie ma pustej tacy. Dół płyty bez paddingu: biała karta
ZL kończy się ok. 22 px nad dołem iframe'u (miejsce na jej cień), więc 12 px dałoby
34 px pod kartą przy 12 nad nią. Rezerwacja wysokości 256 + 12 px trzyma się od
wstrzyknięcia kotwicy (.is-js) do końca, także przy iframe 150 px, więc nic nie
skacze; po awarii loadera (.is-failed po 8 s) kontener się zwija.
Bez :has() (stare przeglądarki) zostaje goły iframe. */
.rh-zl-cert { margin: 14px 0 2px; }
.rh-zl-cert.is-js:not(.is-failed) { min-height: 268px; }
.rh-zl-cert:has(iframe) {
justify-self: start;
width: fit-content;
padding: 12px 12px 0;
border-radius: var(--rh-radius-inner);
background: var(--rh-paper-2);
box-shadow: inset 0 0 0 1px rgba(20, 11, 0, 0.06);
}
.rh-zl-cert iframe { display: block; }
/* ---------- Pierwsza wizyta — jedyny ciemny pas w środku strony ---------- */
.rh-first {
padding: var(--rh-section) var(--rh-gutter);
background: var(--rh-espresso);
color: var(--ink);
}
.rh-d__inner { max-width: var(--rh-max); margin-inline: auto; }
.rh-d__buy { display: flex; flex-direction: column; gap: 32px; }
.rh-first h2 { margin: 0 0 12px; }
.rh-d__offer { max-width: 440px; margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.rh-d__act {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.rh-d__price { margin: 0; font-size: 14px; color: var(--muted); }
.rh-d__price span {
display: block;
margin-bottom: 4px;
font-size: 69px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.69px;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
.rh-d__buy { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 52px; }
.rh-d__act { flex: 0 0 auto; padding: 0 0 0 52px; border-top: 0; border-left: 1px solid var(--line); }
}
/* ---------- Kontakt ---------- */
/* separator jak w pozostałych jasnych sekcjach: linia + oddech nad treścią */
.rh-kontakt {
padding: 0 var(--rh-gutter) var(--rh-section);
background: var(--canvas);
color: var(--ink);
}
.rh-kontakt__inner {
max-width: var(--rh-max);
margin: 0 auto;
padding-top: var(--rh-section);
border-top: 1px solid var(--line);
}
.rh-kontakt h3 { margin: 0 0 8px; font-size: 22px; line-height: 1.2; letter-spacing: -0.05px; color: var(--ink); }
.rh-kontakt__underline { height: 1px; margin: 12px 0 20px; background: var(--line); }
.rh-kontakt__card {
padding: 24px;
border: 1px solid var(--line);
border-radius: var(--rh-radius);
background: var(--card);
color: var(--ink);
box-shadow: var(--rh-shadow);
}
/* margin-top usunięty 2026-09-18: karty są teraz bezpośrednio w siatce (gap 12px);
na desktopie margines obniżałby ciemną kartę względem sąsiada */
.rh-kontakt__card--dark {
background: var(--rh-espresso);
border-color: var(--rh-espresso);
}
.rh-kontakt__card--dark h3 { display: flex; align-items: center; gap: 12px; }
.rh-kontakt__card--dark h3 svg { color: var(--rh-amber); }
.rh-kontakt__head { max-width: 720px; margin-bottom: 32px; }
.rh-kontakt__head .rh-tag { margin: 0 0 16px; }
/* mikrolinia dowodu społecznego nad podsumowaniem rezerwacji (2026-09-19, audyt) */
.rh-booking-rating { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.12px; color: var(--muted); }
.rh-booking-rating__star { color: var(--rh-amber-deep); }
.rh-booking-summary { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.rh-booking-summary strong { color: var(--ink); }
/* ---------- Panel rezerwacji (parts/rezerwacja.php) ----------
2026-09-23 (plan P1-02, wariant A JASNY; makieta m1 z poprawkami recenzji i krytyka):
telefon = jedna kolumna (H3, cena, płyta z kalendarzem, linia telefonu); od 768 px
lewa kolumna z ceną i telefonem + płyta 340 px (iframe 316 px, jak na telefonie);
od 1024 px płyta 452 px. Szerokości płyty są stałe, bo karta ZL w iframe ma na sztywno
ok. 380 px i centruje się: szersza płyta = pusta beżowa taca po bokach (pomiar
23.09: iframe 316–380 px → 676 px wysokości, od 404 px → 654 px). Dlatego od 1024 px
NIE 5fr/7fr z planu (płyta 615 px, 62% pustej tacy), tylko 1fr + 452 px wg poprawki
pierwszej recenzji makiety m1.
Promienie: karta = token karty (--rh-radius), elementy zagnieżdżone --rh-radius-inner (14 px).
Karta ma własną klasę (nie .rh-kontakt__card), więc nie łapie zerowania cieni
z eksperymentu .home; cień = --rh-shadow-lg (P1-01: bio i panel rezerwacji). */
.rh-book {
margin-bottom: 24px;
padding: 24px 16px 20px;
border: 1px solid var(--line);
border-radius: var(--rh-radius);
background: var(--rh-card);
color: var(--ink);
box-shadow: var(--rh-shadow-lg);
}
.rh-book h3 {
margin: 0 0 10px;
font-size: clamp(28px, 2.4vw, 34px);
line-height: 1.15;
letter-spacing: -0.2px;
text-wrap: balance;
}
.rh-book .rh-booking-rating { margin: 0 0 10px; }
/* telefon: płyta bez tła (karta ZL ma własny cień i promień 20 px, więc druga taca
dałaby niekoncentryczne narożniki) i wchodzi 8 px w padding karty: iframe ma
wtedy 332 px przy 390 px ekranu (przy ~300 px ZL ucina 3. kolumnę godzin) */
.rh-book__plate { margin: 20px -8px 0; }
/* linia telefonu (P2-03): cały wiersz to link tel:, numer wygląda jak link (WZORZEC §4).
14 px na telefonie: przy 15 px ze słuchawką linia miała 4 wiersze przy 390 px (cel ≤3) */
.rh-book__call {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px;
font-size: 14px;
line-height: 1.5;
color: var(--muted);
text-wrap: pretty;
}
.rh-book__num {
font-weight: 500;
color: var(--ink);
white-space: nowrap;
text-decoration: underline;
text-decoration-color: rgba(193, 116, 0, 0.55);
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
transition: text-decoration-color .15s ease;
}
.rh-book__num svg { display: inline-block; margin-right: 5px; vertical-align: -2px; }
.rh-book__call:hover .rh-book__num { text-decoration-color: currentColor; }
/* awatar Agnieszki: kadr twarzy z aga-900; kolor wypalony w pliku (wspólna korekta 24.09) */
.rh-book__aga {
flex: none;
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
background: var(--rh-paper-2);
box-shadow: 0 0 0 1px rgba(20, 11, 0, 0.08);
}
/* Kontener kalendarza (P0-01). Kotwicę wstrzykuje loader (parts/zl-loader.php);
jej tekst jest tylko dla czytników i na czas, zanim widget.js ją podmieni. */
.rh-zl-widget { position: relative; }
.rh-zl-widget iframe { display: block; }
.rh-zl-widget .zl-url,
.rh-zl-cert .zl-url {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Rezerwacja wysokości = końcowa wysokość iframe (676 px przy iframe 302–380 px,
654 px od ok. 404 px). Trzyma się od .is-js do końca, TAKŻE gdy iframe już jest:
widget.js wstawia go z 150 px i podnosi dopiero po wczytaniu treści (150 → 486 →
676 px w ~1 s). 2026-09-24: z regułą ograniczoną do :not(:has(iframe)) ścieżka
„Umów” miała CLS 0,13–0,42 (pomiar puppeteer 390/800/1024/1440 px). Zwija się
tylko przy awarii (.is-failed), wtedy w płycie stoi bezpiecznik.
2026-09-24 (weryfikacja po wdrożeniu): loader dokłada iframe'owi 14 px (ZL ucinał dół
swojej karty, parts/zl-loader.php pad()), więc wysokości końcowe to 694 i 672 px. */
.rh-zl-widget.is-js:not(.is-failed) { min-height: 694px; }
/* Szkielet w kształcie karty ZL: biała karta (::before) + 3 kolumny dni × 4 pigułki
slotów (::after, SVG). Tylko do chwili, gdy pojawi się iframe (pseudo-element
zasłoniłby go) albo loader ogłosi awarię. Bez :has() reguła odpada w całości. */
.rh-zl-widget.is-js:not(:has(iframe)):not(.is-failed)::before,
.rh-zl-widget.is-js:not(:has(iframe)):not(.is-failed)::after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: min(380px, 100%);
height: calc(100% - 20px);
border-radius: 20px;
transform: translateX(-50%);
pointer-events: none;
}
.rh-zl-widget.is-js:not(:has(iframe)):not(.is-failed)::before {
background: #fff;
box-shadow: 0 1px 3px rgba(20, 11, 0, 0.08), 0 12px 28px -18px rgba(20, 11, 0, 0.18);
}
.rh-zl-widget.is-js:not(:has(iframe)):not(.is-failed)::after {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 332 524'%3E%3Cg fill='%23efe7dc'%3E%3Ccircle cx='32' cy='32' r='32'/%3E%3Crect x='80' y='8' width='180' height='16' rx='8'/%3E%3Crect x='80' y='34' width='96' height='12' rx='6'/%3E%3Crect x='80' y='54' width='132' height='12' rx='6'/%3E%3Crect y='96' width='280' height='12' rx='6'/%3E%3Crect y='118' width='190' height='12' rx='6'/%3E%3Crect x='30' y='162' width='40' height='12' rx='6'/%3E%3Crect x='26' y='182' width='48' height='10' rx='5'/%3E%3Crect x='14' y='214' width='72' height='36' rx='18'/%3E%3Crect x='14' y='266' width='72' height='36' rx='18'/%3E%3Crect x='14' y='318' width='72' height='36' rx='18'/%3E%3Crect x='14' y='370' width='72' height='36' rx='18'/%3E%3Crect x='120' y='162' width='40' height='12' rx='6'/%3E%3Crect x='116' y='182' width='48' height='10' rx='5'/%3E%3Crect x='104' y='214' width='72' height='36' rx='18'/%3E%3Crect x='104' y='266' width='72' height='36' rx='18'/%3E%3Crect x='104' y='318' width='72' height='36' rx='18'/%3E%3Crect x='104' y='370' width='72' height='36' rx='18'/%3E%3Crect x='210' y='162' width='40' height='12' rx='6'/%3E%3Crect x='206' y='182' width='48' height='10' rx='5'/%3E%3Crect x='194' y='214' width='72' height='36' rx='18'/%3E%3Crect x='194' y='266' width='72' height='36' rx='18'/%3E%3Crect x='194' y='318' width='72' height='36' rx='18'/%3E%3Crect x='194' y='370' width='72' height='36' rx='18'/%3E%3Ccircle cx='314' cy='176' r='16'/%3E%3C/g%3E%3Crect y='430' width='332' height='94' rx='4' fill='%23f5f0e9'/%3E%3C/svg%3E") no-repeat 50% 24px / calc(100% - 48px) auto;
}
@media (prefers-reduced-motion: no-preference) {
.rh-zl-widget.is-js:not(:has(iframe)):not(.is-failed)::after { animation: rh-zl-pulse 1.4s ease-in-out infinite; }
}
@keyframes rh-zl-pulse {
50% { opacity: 0.45; }
}
/* Bezpiecznik (P0-01 + krytyk §6.3): odsłania go loader po ok. 8 s bez iframe.
Tekst + pigułka primary do profilu ZL + telefon; wszystko do lewej, bez strzałek. */
.rh-zl-fallback {
display: grid;
justify-items: start;
gap: 16px;
margin: 0;
padding: 8px 8px 12px;
}
.rh-zl-fallback[hidden] { display: none; }
.rh-zl-fallback p { margin: 0; max-width: 40ch; font-size: 16px; line-height: 1.5; color: var(--muted); }
.rh-zl-fallback__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rh-zl-fallback .rh-btn { white-space: normal; text-align: left; }
/* 2026-09-24 (weryfikacja po wdrożeniu): w awarii „Nie widzisz pasującego terminu?” nie ma
sensu (terminów nie widać), a numer padał dwa razy w ok. 60 px; zostaje pigułka telefonu
z bezpiecznika. Bez :has() linia zostaje jak dotąd. */
.rh-book:has(.rh-zl-widget.is-failed) .rh-book__call { display: none; }
/* 480–767 px (duże telefony w poziomie, małe tablety): jedna kolumna, ale iframe
ma już ≥ 404 px, więc ZL rysuje go na 654 px (+14 px z loadera = 672) */
@media (min-width: 480px) and (max-width: 767px) {
.rh-zl-widget.is-js:not(.is-failed) { min-height: 672px; }
}
/* Od 768 px: lewa kolumna (H3, ocena, cena, telefon) jako jedna grupa wyśrodkowana
w pionie względem płyty, jak panel na produkcji. 2026-09-24: plan zakładał wiersze
auto 1fr pod zdjęcie Marcina z makiety m1; bez zdjęcia (krytyk) układ „góra + dół”
zostawiał ok. 500 px pustki między ceną a telefonem. */
@media (min-width: 768px) {
.rh-book {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
grid-template-areas: ". plate" "info plate" "call plate" ". plate";
grid-template-rows: 1fr auto auto 1fr;
gap: 24px 40px;
padding: 32px;
}
.rh-book__info { grid-area: info; }
.rh-book__plate {
grid-area: plate;
margin: 0;
padding: 12px;
border-radius: var(--rh-radius-inner);
background: var(--rh-paper-2);
box-shadow: inset 0 0 0 1px rgba(20, 11, 0, 0.06);
}
.rh-book__call { grid-area: call; margin: 0; font-size: 16px; }
}
/* 768–1023 px: lewa kolumna ma ~260 px, więc awatar nad tekstem (obok niego linia
rozpadała się na 5 wierszy po ~190 px) */
@media (min-width: 768px) and (max-width: 1023px) {
.rh-book__call { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (min-width: 1024px) {
.rh-book { grid-template-columns: minmax(0, 1fr) 452px; padding: 40px; }
.rh-book__plate { padding: 24px; }
.rh-zl-widget.is-js:not(.is-failed) { min-height: 672px; }
}
@media (min-width: 1280px) {
.rh-book { column-gap: 48px; padding: 48px; }
}
@media (prefers-reduced-motion: reduce) {
.rh-book__num { transition: none; }
}
.rh-kontakt__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.rh-kontakt__rows { display: flex; flex-direction: column; gap: 20px; }
.rh-kontakt__row { display: flex; align-items: flex-start; gap: 16px; }
.rh-kontakt__icon {
flex-shrink: 0;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line-strong);
border-radius: var(--rh-pill);
color: var(--ink);
transition: background-color .15s ease, border-color .15s ease;
}
.rh-kontakt__icon svg { width: 18px; height: 18px; }
a.rh-kontakt__row:hover .rh-kontakt__icon { background: var(--rh-amber); border-color: var(--rh-amber); color: var(--rh-espresso); }
.rh-kontakt__label { display: block; margin-bottom: 2px; font-size: 12px; letter-spacing: 0.12px; color: var(--muted); }
.rh-kontakt__value { display: block; font-size: 17px; font-weight: 500; color: var(--ink); }
.rh-kontakt__sub { display: block; font-size: 14px; color: var(--muted); }
.rh-kontakt__hours { flex: 1; min-width: 0; }
.rh-kontakt__hours-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 16px;
margin-top: 8px;
font-size: 14px;
}
.rh-kontakt__hours-grid span:nth-child(odd) { color: var(--muted); }
.rh-kontakt__hours-grid span:nth-child(even) { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.rh-kontakt__hours-grid span.is-gold { color: var(--muted); }
.rh-kontakt__notes { display: flex; flex-direction: column; gap: 16px; }
.rh-kontakt__notes p { display: flex; gap: 12px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.rh-kontakt__notes strong { color: var(--ink); }
.rh-kontakt__notes svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--ink); }
/* 2026-09-23 (plan P1-02): align-items start zamiast stretch: rozciągnięta ciemna karta
„Jak do nas trafić?” była w 60% pusta (karty bez scalania, decyzja 16a) */
@media (min-width: 1024px) {
.rh-kontakt__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 767px) {
.rh-kontakt__card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.rh-kontakt__icon, .rh-talk__card { transition: none; }
}
/* ---------- Stopka ---------- */
.rh-foot {
padding: var(--rh-section) var(--rh-gutter) 24px;
background: var(--rh-cocoa);
color: var(--ink);
}
/* 2026-09-24 (plan P1-05, makieta m8 z poprawkami recenzji): kolejność w DOM to marka,
nawigacja, kontakt, godziny, akapit lokalny. Telefon: jedna kolumna; 768–1023 px: 2×2
i akapit na pełną szerokość; od 1024 px 4 kolumny od jednej linii (media query niżej). */
.rh-foot__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 24px;
max-width: var(--rh-max);
margin: 0 auto;
}
.rh-foot p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.rh-foot a:hover { color: var(--ink); }
.rh-foot__col p + p { margin-top: 8px; }
/* 2026-09-24 (P1-05, recenzja m8): przy 1024–1279 px motto bez sierotki „rozmasujesz.” */
.rh-foot__claim { text-wrap: balance; }
/* 2026-09-24 (plan P1-05): Facebook i Instagram jako okrągłe ikony z obwódką (wcześniej tekst
z kropkami), ZnanyLekarz jako pigułka tekstowa. 40 px, poniżej 768 px 44 px (WZORZEC §4). */
.rh-foot .rh-foot__social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.rh-foot__soc,
.rh-foot__zl {
border: 1px solid rgba(255, 241, 224, 0.2);
color: var(--ink);
transition: border-color .2s ease, color .2s ease;
}
.rh-foot__soc { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.rh-foot__zl { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--rh-pill); font-size: 13px; }
.rh-foot .rh-foot__soc:hover,
.rh-foot .rh-foot__zl:hover { border-color: var(--rh-amber); color: var(--rh-amber); }
/* nawigacja stopki (10 pozycji z produkcji).
2026-09-24 (plan P1-05): pozycje się nie łamią (wcześniej „Fala / uderzeniowa / Konin”
w 3 wierszach). Poniżej 1024 px 2 kolumny według treści, bez overflow przy 320 px
(recenzja m8); od 1024 px jedna kolumna. */
.rh-foot__nav ul {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: 4px clamp(16px, 6vw, 48px);
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
line-height: 1.5;
}
.rh-foot__nav a { color: var(--muted); white-space: nowrap; }
/* obszar działania — tekst lokalny (SEO), 13 px.
2026-09-24 (P1-05): ostatnie dziecko .rh-foot__inner zamiast osobnego pasa pod siatką */
.rh-foot__area {
margin-top: 8px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
.rh-foot__area p { font-size: 13px; }
.rh-foot__area p + p { margin-top: 8px; }
/* 2026-09-21: nagłówki kolumn stopki jak na produkcji — serif w bursztynie */
.rh-foot .rh-foot__logo { margin-bottom: 8px; font-family: var(--rh-serif); font-size: 22px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink); }
.rh-foot .rh-foot__h { margin-bottom: 10px; font-family: var(--rh-serif); font-size: 18px; font-weight: 500; letter-spacing: 0.01em; color: var(--rh-amber); }
/* 2026-09-24 (P1-05, P2-06): w pierwszym wierszu „© rok RH Fizjo” i „Polityka prywatności”,
firma spółki z adresem i NIP osobnym wierszem na pełną szerokość */
.rh-foot__legal {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 8px 24px;
max-width: var(--rh-max);
margin: 40px auto 0;
padding-top: 16px;
border-top: 1px solid var(--line);
font-size: 12px;
letter-spacing: 0.12px;
color: var(--muted);
}
/* link do polityki (gdy strona istnieje): cel dotyku 26 px przy tekście 12 px (WCAG 2.5.8) */
.rh-foot__legal a {
display: inline-block;
padding-block: 4px;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(255, 241, 224, 0.35);
}
.rh-foot__legal a:hover { text-decoration-color: currentColor; }
.rh-foot__company { flex-basis: 100%; line-height: 1.6; }
@media (max-width: 1023px) {
/* 2026-09-24 (plan P0-04, MOB-13): cele dotyku linków stopki 45 px zamiast 21 px.
Ujemne marginesy trzymają dotychczasowe odstępy tekstu od nagłówka kolumny,
od adresu i od następnej kolumny.
2026-09-24 (weryfikacja po wdrożeniu): ujemny margines na KAŻDYM linku kontaktu, nie na
akapicie. Z marginesem akapitu między telefonem a e-mailem zostawało 24 px nadwyżki
(odstęp 45 zamiast 21 px). Pola dotyku 45 px nachodzą na siebie o 24 px. */
.rh-foot__nav ul { row-gap: 0; margin-block: -12px; }
.rh-foot__nav a,
.rh-foot__reach a { display: inline-block; padding-block: 12px; }
.rh-foot__reach a { margin-block: -12px; }
}
@media (max-width: 767px) {
.rh-foot__soc { width: 44px; height: 44px; }
.rh-foot__zl { min-height: 44px; }
/* pasek prawny od lewej jak reszta strony (recenzja m8) */
.rh-foot__legal { flex-direction: column; align-items: flex-start; }
.rh-foot__company { flex-basis: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.rh-foot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.rh-foot__area { grid-column: 1 / -1; }
}
/* 2026-09-24 (plan P1-05): 4 kolumny od jednej linii, marka najszersza; kolumny zajmują
oba wiersze, więc akapit lokalny siada 24 px pod social zamiast pod najdłuższą kolumną */
@media (min-width: 1024px) {
.rh-foot__inner {
grid-template-columns: 1.4fr 1fr 1.1fr 1fr;
grid-template-rows: auto 1fr;
gap: 24px 48px;
align-items: start;
}
.rh-foot__col { grid-row: 1 / span 2; }
.rh-foot__area { grid-column: 1; grid-row: 2; margin: 0; padding: 0; border: 0; }
.rh-foot__nav ul { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
/* 1024–1279 px: „Poniedziałek–piątek: 09:00–19:00” w jednym wierszu (kolumna godzin ok. 226 px) */
@media (min-width: 1024px) and (max-width: 1279px) {
.rh-foot__inner { grid-template-columns: 1.25fr 1fr 1fr 1.2fr; column-gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.rh-foot__soc, .rh-foot__zl { transition: none; }
}
/* =========================================================================
PROTOTYP „podróż pacjenta” (?v=podroz)
- Pasek postępu pod nawigacją: odcinek = pytanie pacjenta, długość odcinka =
długość sekcji. Pokazuje, ile strony zostało i gdzie jesteś; działa jak spis treści.
- Sekcja „Czy to dla mnie?” z precyzyjnym wykresem (szkic kształtu).
========================================================================= */
.rh-journey { background: var(--canvas); }
/* ---------- Pasek postępu ---------- */
.rh-progress {
position: fixed;
top: 64px;
left: 0;
right: 0;
z-index: 49;
background: var(--rh-espresso);
box-shadow: 0 10px 24px -14px rgba(20, 11, 0, 0.55);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, visibility 0s linear .35s;
}
.rh-progress.is-visible {
transform: none;
opacity: 1;
visibility: visible;
transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
}
/* nawigacja nad paskiem bez własnego cienia — cień daje pasek */
.has-progress .rh-nav.is-scrolled { box-shadow: none; }
.rh-progress__inner {
display: flex;
align-items: center;
gap: 24px;
max-width: var(--rh-max);
margin: 0 auto;
padding: 0 var(--rh-gutter) 12px;
}
.rh-progress__steps {
flex: 1 1 auto;
display: flex;
gap: 4px;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
.rh-progress__step { flex: 1 1 0; min-width: 0; }
/* odcinek nigdy węższy niż jego podpis — proporcje długości zostają przybliżone */
@media (min-width: 768px) {
.rh-progress__step { min-width: max-content; }
}
.rh-progress__step a {
position: relative;
display: block;
padding-top: 4px;
color: var(--rh-sand);
}
/* 2026-09-24 (plan P0-04): przezroczysty obszar tapnięcia odcinka. Na telefonie odcinek
to 6 px wysokości (podpisy ukryte); ::before dokłada po 12 px w górę i w dół. Nad
paskiem leży nav (z-index 50), więc pas pod przyciskami nav nie przechwytuje dotyku. */
.rh-progress__step a::before {
content: "";
position: absolute;
inset: -12px 0;
}
.rh-progress__track {
position: relative;
display: block;
height: 2px;
overflow: hidden;
border-radius: var(--rh-pill);
background: var(--rh-walnut);
}
.rh-progress__fill {
position: absolute;
inset: 0;
background: var(--rh-amber);
transform-origin: 0 50%;
transform: scaleX(0);
}
.rh-progress__label {
display: block;
margin-top: 8px;
overflow: hidden;
font-size: 12px;
letter-spacing: 0.12px;
white-space: nowrap;
text-overflow: ellipsis;
transition: color .2s ease;
}
.rh-progress__step a:hover .rh-progress__label,
.rh-progress__step.is-done .rh-progress__label { color: var(--rh-cream); }
.rh-progress__step.is-current .rh-progress__label { color: var(--rh-cream); font-weight: 500; }
.rh-progress__count {
flex: 0 0 auto;
margin: 0;
font-size: 12px;
letter-spacing: 0.12px;
color: var(--rh-sand);
font-variant-numeric: tabular-nums;
}
.rh-progress__count b { font-weight: 500; color: var(--rh-cream); }
.rh-progress__now { display: none; }
@media (max-width: 767px) {
/* telefon: sam pasek, pod nim nazwa bieżącej sekcji i licznik */
.rh-progress__inner { flex-wrap: wrap; gap: 6px 12px; padding-bottom: 8px; }
.rh-progress__steps { flex-basis: 100%; gap: 3px; }
.rh-progress__step { min-width: 0; }
/* 2026-09-24 (weryfikacja po wdrożeniu): ukryta tylko wizualnie; przy display:none
5 linków paska nie miało nazwy dostępnej (czytnik: „link”) */
.rh-progress__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rh-progress__now {
display: block;
flex: 1 1 auto;
min-width: 0;
margin: 0;
overflow: hidden;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
color: var(--rh-cream);
white-space: nowrap;
text-overflow: ellipsis;
}
}
@media (prefers-reduced-motion: reduce) {
.rh-progress, .rh-progress.is-visible { transition: none; }
}
/* przy pasku kotwice muszą schodzić niżej */
.has-progress [id] { scroll-margin-top: 124px; }
/* ---------- „Czy to dla mnie?” — jak pracujemy ---------- */
.rh-j {
padding: calc(var(--rh-section) * 1.4) var(--rh-gutter);
color: var(--ink);
}
.rh-j__inner { max-width: var(--rh-max); margin: auto; }
.rh-j__head { max-width: 680px; }
.rh-j h2 {
margin: 0 0 20px;
font-size: 43px;
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.3px;
}
.rh-j__lead {
margin: 0;
max-width: 34ch;
font-size: 19px;
line-height: 1.45;
color: var(--muted);
text-wrap: pretty;
}
.rh-j__draft {
display: inline-block;
margin: 48px 0 0;
padding: 4px 10px;
border: 1px dashed var(--line-strong);
border-radius: var(--rh-pill);
font-size: 12px;
color: var(--muted);
}
/* Wykres: cienkie linie siatki, precyzyjna krzywa, węzły w punktach */
.rh-j__chart {
position: relative;
height: 260px;
margin: 56px 0 104px;
border-left: 1px solid var(--line-strong);
border-bottom: 1px solid var(--line-strong);
background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 25%;
}
.rh-j__curve {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.rh-j__curve path { fill: none; }
.rh-j__stroke {
stroke: var(--rh-espresso);
stroke-width: 2;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.rh-j__area { fill: rgba(255, 180, 66, 0.16) !important; }
.rh-j.is-js .rh-j__stroke { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1); }
.rh-j.is-js .rh-j__area { opacity: 0; transition: opacity .8s ease .9s; }
.rh-j.is-js.is-drawn .rh-j__stroke { stroke-dashoffset: 0; }
.rh-j.is-js.is-drawn .rh-j__area { opacity: 1; }
.rh-j__pin { position: absolute; width: 0; height: 0; }
.rh-j__pin::before {
content: "";
position: absolute;
left: -6px;
top: -6px;
width: 12px;
height: 12px;
border-radius: var(--rh-pill);
background: var(--rh-amber);
box-shadow: 0 0 0 3px var(--rh-paper), var(--rh-shadow-sm);
}
.rh-j__pin span {
position: absolute;
left: 0;
bottom: 14px;
transform: translateX(-50%);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
.rh-j__pin--soft::before { background: var(--rh-paper); border: 1.5px solid var(--rh-espresso); }
.rh-j__pin--soft span { top: 14px; bottom: auto; font-weight: 400; color: var(--muted); }
.rh-j__pin--first span { left: -4px; transform: none; }
.rh-j.is-js .rh-j__pin { opacity: 0; transition: opacity .4s ease; }
.rh-j.is-js.is-drawn .rh-j__pin { opacity: 1; }
.rh-j__axis { position: absolute; font-size: 12px; letter-spacing: 0.12px; color: var(--muted); }
.rh-j__axis--y { left: 0; top: -28px; }
.rh-j__axis--x { right: 0; bottom: -28px; }
.rh-j__steps {
list-style: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 56px;
margin: 0;
padding: 0;
}
.rh-j__step { padding-top: 24px; border-top: 1px solid var(--ink); }
.rh-j__num {
display: block;
margin-bottom: 40px;
font-size: 12px;
letter-spacing: 0.12px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.rh-j__step h3 {
margin: 0 0 16px;
font-size: 35px;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.21px;
}
.rh-j__step p {
margin: 0 0 24px;
max-width: 36ch;
font-size: 16px;
line-height: 1.6;
color: var(--muted);
text-wrap: pretty;
}
.rh-j__link {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
font-size: 14px;
font-weight: 500;
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 1px;
text-decoration-color: var(--line-strong);
transition: text-decoration-color .15s ease;
}
.rh-j__link:hover { text-decoration-color: var(--ink); }
.rh-j__filter {
max-width: 22ch;
margin: 144px 0 0;
font-size: 43px;
line-height: 1.1;
letter-spacing: -0.3px;
text-wrap: balance;
}
.rh-j__note {
max-width: 60ch;
margin: 32px 0 0;
font-size: 14px;
line-height: 1.5;
color: var(--muted);
}
@media (min-width: 1100px) {
.rh-j h2 { font-size: 69px; letter-spacing: -0.69px; }
.rh-j__filter { font-size: 55px; letter-spacing: -0.44px; }
.rh-j__chart { height: 320px; }
}
@media (max-width: 899px) {
.rh-j__steps { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.rh-j__num { margin-bottom: 20px; }
}
@media (max-width: 767px) {
.rh-j h2 { font-size: 35px; letter-spacing: -0.21px; }
.rh-j__lead { font-size: 17px; }
.rh-j__draft { margin-top: 32px; }
.rh-j__chart { height: 200px; margin: 56px 0 88px; }
.rh-j__pin span { font-size: 12px; }
.rh-j__pin--soft span { display: none; }
.rh-j__step h3 { font-size: 29px; letter-spacing: -0.12px; }
.rh-j__filter { margin-top: 96px; font-size: 29px; letter-spacing: -0.12px; }
}
@media (prefers-reduced-motion: reduce) {
.rh-j.is-js .rh-j__pin, .rh-j.is-js .rh-j__stroke, .rh-j.is-js .rh-j__area { transition: none; }
}
/* ---------- Podstrona /pierwsza-wizyta/ v2 (2026-09-20, buildspec ultracode) ----------
v1 skrytykowana: sciany tekstu, brak zdjec/przykladow, minuty. v2: rytm
"kartka i espresso" (3 ciemne takty: granat zdjecia zespolu w hero, kafel
faktow, final z Agnieszka), warstwy
zamiast scian tekstu,
numeracja 01/02/03 w walnut zamiast minut, bursztynowa linia przy
rozwinietym przykladzie = TYLKO prawdziwy przypadek (dawna "zlota linia"),
duze kafle-linki ze zdjeciem u gory. */
/* 2026-09-24 (plan P0-05): text-wrap: balance jak na głównej (sierota „plan.” w H2 przebiegu);
waga 500 jak reszta nagłówków (Playfair nigdy poniżej 500, 400 i tak nie jest ładowane) */
.rh-pw h2 {
margin: 0 0 12px;
font-weight: 500;
font-size: 35px;
line-height: 1.1;
letter-spacing: -0.21px;
color: var(--ink);
text-wrap: balance;
}
.rh-pw h2 em { color: var(--rh-walnut); }
/* hero podstrony = 1:1 komponent .rh-hero z glownej (wlasciciel 2026-09-20:
"zrob hero jak na stronie glownej" + separatory paska zaufania). Jedyna
roznica: kadr kwadratowego zdjecia zespolu (twarze w gornej czesci). */
.rh-pw .rh-hero__bg { object-position: center 30%; }
/* sekcje: waska kolumna czytelnicza
2026-09-24 (plan P1-01d): wspólny kontener z główną (--rh-max, lewa krawędź x = 120 px
przy 1440 jak FAQ, Kontakt i logo) zamiast 880 px na środku, który dawał skok
280 → 120 px przy FAQ. Kolumna czytania 720 px od tej samej krawędzi: nagłówek, kroki,
notka i dopowiedzenie; siatki kart (ścieżki, kafle, przygotowanie, opinie) i ciemne
kafle idą na pełną szerokość kontenera. */
.rh-pw-sec { padding: calc(var(--rh-section) + 16px) var(--rh-gutter); }
.rh-pw-sec__inner { max-width: var(--rh-max); margin: auto; }
.rh-pw-sec__inner > :is(h2, .rh-pw-steps, .rh-pw-note, .rh-pw-close) { max-width: 720px; }
.rh-pw-intro { margin: 8px 0 0; max-width: 56ch; font-size: 19px; line-height: 1.45; letter-spacing: -0.03px; }
.rh-pw-sec__cta { margin-top: 24px; }
/* kroki wizyty v3: AKORDEON zwiniety domyslnie (wlasciciel: "strona bardzo
dluga, brak oddechu; oryginal ma przestrzen") — sekcja to 3 wiersze jak na
starej produkcji; interlinia 1.65, duze pady, krotkie etykiety rozwijane
z ikonami w kolkach, tytul przypadku jako kicker dopiero w srodku. */
.rh-pw-steps { display: grid; gap: 14px; margin: 36px 0 0; }
.rh-pw-step {
border: 1px solid var(--line);
border-radius: var(--rh-radius);
background: var(--card);
box-shadow: var(--rh-shadow-sm);
}
.rh-pw-step[open] { box-shadow: var(--rh-shadow); }
.rh-pw-step > summary {
display: flex;
align-items: center;
gap: 16px;
padding: 22px 26px;
cursor: pointer;
list-style: none;
}
.rh-pw-step > summary::-webkit-details-marker { display: none; }
.rh-pw-step__num {
flex: 0 0 auto;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.12em;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.rh-pw-step > summary h3 {
flex: 1;
min-width: 0;
margin: 0;
font-size: 21px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -0.05px;
}
/* znacznik +/− jak w akordeonie FAQ (jeden jezyk rozwijania w motywie) */
.rh-pw-step__mark { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.rh-pw-step__mark::before,
.rh-pw-step__mark::after {
content: "";
position: absolute;
background: var(--rh-amber-deep);
border-radius: 2px;
transition: transform .2s ease;
}
.rh-pw-step__mark::before { left: 2px; right: 2px; top: 9px; height: 2px; }
.rh-pw-step__mark::after { top: 2px; bottom: 2px; left: 9px; width: 2px; }
.rh-pw-step[open] .rh-pw-step__mark::after { transform: scaleY(0); }
.rh-pw-step__inner {
display: grid;
gap: 22px;
padding: 22px 26px 28px;
border-top: 1px solid var(--line);
}
.rh-pw-step__inner > p { margin: 0; font-size: 17px; line-height: 1.65; }
/* 2026-09-24 (plan P0-05): height: auto, bo atrybut height="450" z