/* =========================================================
Pan Pieseł — style.css
Źródło prawdy dla UI: DESIGN.md v1.0 (zamrożony 02.09.2026).
Poprzedni kierunek (design-system.md v3, playful/graficzny —
Bricolage Grotesque + Manrope, mocne kolory, grube obrysy) jest
NIEAKTUALNY. Wszystkie sekcje homepage są już przebudowane pod
DESIGN.md v1.0 (etapy 1–10). Etap 12A (global cleanup) usunął z
:root stare tokeny kolorów/kontenera/radiusów, które nie miały już
żadnego aktywnego użycia (--cream, --charcoal, --pink, --pink-dark,
--yellow, --aqua, --blush, --ink, --container-w, --container-w-wide,
--r-sm, --r-md, --r-lg). Pozostałe aktywne stare referencje (jest
ich niewiele) są opisane w TASKS.md wraz z uzasadnieniem, dlaczego
zostały — to celowe, zgłoszone wyjątki, nie przeoczenia.
========================================================= */
:root {
--r-pill: 999px;
--ease: cubic-bezier(.22,.68,.24,1);
--section-pad: 56px;
/* ---------- Fonty — przełączone na docelowe już teraz ---------- */
--font-display: 'Fraunces', Georgia, serif;
--font-body: 'DM Sans', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* ---------- NOWE TOKENY — DESIGN.md v1.0 ---------- */
--color-bg: #F1F1F3;
--color-surface: #FFFFFF;
--color-surface-alt: #E7E7EA;
--color-ink: #222126;
--color-text: #4F4B53;
--color-muted: #746F78;
--color-line: #D4D1D7;
--color-fuchsia: #D52D8B;
--color-fuchsia-hover: #B92373;
--color-fuchsia-soft: #F9DCEA;
--color-aqua: #46CFC8;
--color-aqua-soft: #D9F4F2;
--color-yellow: #F2DF46;
--color-yellow-soft: #FBF5BF;
/* Dodane etapem 17F.3 dla hover 3 sytuacji klienta w hero — kolory
jawnie podane wprost w poleceniu (pomarańcz / pudrowy róż),
nie istniały wcześniej w palecie. */
--color-orange: #F0923D;
--color-orange-soft: #FBE3CC;
--color-orange-hover: #FF7A1F;
--color-powder-pink: #E8AAB4;
--color-powder-pink-soft: #FBE9EC;
--color-powder-pink-hover: #FF8FAE;
/* Wariant hover żółtego (etap 17F.5) — sam --color-yellow jest już
jasny/nasycony, "neonowy" efekt to głównie mocniejsze nasycenie
względem dotychczasowego bardzo jasnego --color-yellow-soft. */
--color-yellow-hover: #FFDD00;
--color-graphite: #232127;
--color-white: #FFFFFF;
/* Jedyny nowy token spoza DESIGN.md §5.1 — dodany w etapie 15, bo
§13 "Formularze" wprost wymaga czerwonego komunikatu błędu, a
system kolorów nie miał dotąd czerwieni. Kontrast na bieli
zweryfikowany: ~6.5:1 (WCAG AA dla zwykłego tekstu). */
--color-error: #B3261E;
--container: 1200px;
--container-text: 760px;
--gutter-desktop: 32px;
--gutter-tablet: 24px;
--gutter-mobile: 18px;
--section-space-desktop: 112px;
--section-space-tablet: 88px;
--section-space-mobile: 68px;
--radius-sm: 14px;
--radius-md: 24px;
--radius-lg: 36px;
--radius-pill: 999px;
--border-width: 1px;
--border-color: var(--color-line);
--shadow-elevated: 0 18px 48px rgba(28, 24, 31, 0.08);
--shadow-none: none;
/* Skala typografii, desktop (DESIGN.md §6.2); mobile via clamp(), patrz §6.3 */
--fs-hero: clamp(4rem, 7vw, 6.5rem);
--fs-h2: clamp(2.625rem, 5vw, 4.25rem);
--fs-h3: clamp(2rem, 3vw, 2.5rem);
--fs-lead: clamp(1.1875rem, 1.6vw, 1.3125rem);
--fs-body: clamp(1rem, 1.2vw, 1.125rem);
--fs-button: clamp(0.875rem, 1vw, 1rem);
--fs-eyebrow: clamp(0.6875rem, 0.8vw, 0.75rem);
/* Breakpointy robocze (DESIGN.md §16) — dokumentacyjne;
CSS nie pozwala użyć var() w warunku @media, więc @media
w tym pliku nadal używają literalnych px zgodnych z tymi wartościami. */
--bp-mobile: 480px;
--bp-tablet: 768px;
--bp-small-desktop: 1050px;
--bp-wide: 1280px;
}
@media (min-width: 768px) { :root { --section-pad: 84px; } }
@media (min-width: 1024px) { :root { --section-pad: 120px; } }
@media (min-width: 1440px) { :root { --section-pad: 136px; } }
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--color-bg);
color: var(--color-ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { body { font-size: 17px; } }
@media (min-width: 1024px) { body { font-size: 18px; } }
@media (min-width: 1440px) { body { font-size: 19px; } }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, blockquote, figure { margin: 0; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
sup { font-size: .6em; }
.wrap {
max-width: var(--container);
margin-inline: auto;
padding-inline: 24px;
}
@media (min-width: 768px) { .wrap { padding-inline: 40px; } }
@media (min-width: 1280px) { .wrap { padding-inline: 64px; } }
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--color-fuchsia);
color: var(--color-white);
font-weight: 700;
padding: 14px 22px;
border-radius: 0 0 10px 0;
z-index: 1000;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--color-fuchsia); outline-offset: 3px; }
section { padding-block: var(--section-pad); position: relative; }
/* ---------- Type ---------- */
.eyebrow {
font-family: var(--font-body);
font-weight: 800;
font-size: var(--fs-eyebrow);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--color-muted);
}
.eyebrow span { color: var(--color-muted); font-weight: 700; letter-spacing: .1em; }
.section-heading {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.3rem, 4vw, 4.6rem);
line-height: 1.02;
color: var(--color-ink);
letter-spacing: -.02em;
/* etap 17F.6 — nagłówki nie mają łamać się na 3 linie tylko dlatego,
że element ma niepotrzebnie wąską szerokość; naturalne 2 linie
zostają, ale bez wymuszania krótszych łamań niż to konieczne. */
word-break: normal;
overflow-wrap: normal;
hyphens: none;
text-wrap: balance;
}
.section-heading--onlight { color: var(--color-white); }
.section-heading--onphoto { color: var(--color-white); max-width: 20ch; }
em, strong { font-family: inherit; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-shrink: 0;
white-space: nowrap;
font-family: var(--font-body);
font-weight: 800;
font-size: 15px;
padding: 15px 28px;
border-radius: var(--r-pill);
transition: transform .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
min-height: 48px;
border: 2px solid transparent;
}
/* .btn ustawia display:inline-flex, więc bije domyślne [hidden]{display:none}
przeglądarki (ta sama specyficzność, reguła autorska zawsze wygrywa) -
ten sam, wcześniej już znaleziony wzorzec błędu co .field/.field__error
(etap 15) i .pricing-group (etap 32). Jawny override raz, dla całego
.btn w każdym miejscu, gdzie kod ustawia .hidden na przycisku
(np. panel/dyspozycyjnosc - stan zamknięty ukrywa CTA zapisu). */
.btn[hidden] { display: none; }
.btn--large { font-size: 16px; padding: 18px 34px; min-height: 56px; }
.btn--small { padding: 11px 20px; font-size: 13px; min-height: 40px; }
.btn__arrow { width: 16px; height: 16px; flex-shrink: 0; transition: transform .18s var(--ease); }
.btn--primary { background: var(--color-fuchsia); color: var(--color-white); }
.btn--primary:hover, .btn--primary:focus-visible {
background: var(--color-fuchsia-hover);
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 14px 28px -10px rgba(30,26,26,.4);
}
.btn--primary:hover .btn__arrow { transform: translateX(4px); }
.btn--outline {
background: transparent;
color: var(--color-ink);
border-width: var(--border-width);
border-color: var(--color-line);
}
.btn--outline:hover, .btn--outline:focus-visible {
background: var(--color-fuchsia);
border-color: var(--color-fuchsia);
color: var(--color-white);
transform: translateY(-3px);
}
/* =========================================================
LOCATION BAR + HEADER
DESIGN.md §12.1 — pasek lokalizacji nad headerem; header sticky,
jasny, subtelny blur dopiero po scrollu; logo w całości; maks.
5 linków + 1 CTA na desktopie; sticky ≤ ~88px wysokości.
========================================================= */
.location-bar {
background: var(--color-graphite);
color: var(--color-white);
text-align: center;
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: .02em;
padding: 9px 12px;
}
@media (min-width: 768px) { .location-bar { font-size: 13px; } }
.site-header {
background: var(--color-surface);
border-bottom: var(--border-width) solid var(--color-line);
position: sticky;
top: 0;
z-index: 200;
transition: box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.site-header.is-scrolled {
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 12px 24px -18px rgba(34, 33, 38, .18);
}
.header-inner, .hero-inner {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px) { .header-inner, .hero-inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1280px) { .header-inner, .hero-inner { padding-inline: var(--gutter-desktop); } }
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 76px;
}
@media (min-width: 1280px) { .header-inner { min-height: 84px; } }
/* Etap 17C: header nie ma już podpisu "trening i behawior" — logo samo
ma nieść markę, więc przeszliśmy z małej wersji zbiorczej (ikona+napis
w kwadracie) na assets/logo-pan-piesel-wordmark.png (sam kolorowy
napis, format poziomy) w większym rozmiarze niż poprzednio. */
.wordmark { display: flex; align-items: center; flex-shrink: 0; gap: 8px; }
/* Ikona psa + wordmark obok siebie, etap 17F.6A — zastępuje pojedynczy
niemal-kwadratowy plik logo-pan-piesel.png z etapu 17F.6, w którym
ograniczenie wysokością ściskało tekst do nieczytelności (ten sam
problem, co przy dawnym wordmark-only w stopce). Oba assety istniały
już w projekcie nieużywane — łączymy je flexboxem, bez tworzenia
nowego pliku/logo i bez zmiany typografii/proporcji żadnego z nich. */
.wordmark__icon { height: 38px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.wordmark__logo { height: 30px; width: auto; max-width: 100%; object-fit: contain; display: block; }
@media (min-width: 768px) { .wordmark__icon { height: 44px; } .wordmark__logo { height: 34px; } }
@media (min-width: 1280px) { .wordmark__icon { height: 46px; } .wordmark__logo { height: 36px; } }
.header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.header-cta { display: none; }
.menu-toggle {
width: 44px;
height: 44px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
border-radius: var(--radius-sm);
flex-shrink: 0;
transition: background-color .15s var(--ease);
}
.menu-toggle:hover, .menu-toggle:focus-visible { background: var(--color-surface-alt); }
.menu-toggle span {
width: 20px;
height: 2px;
background: var(--color-ink);
transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-scrim {
position: fixed;
inset: 0;
background: rgba(34, 33, 38, .45);
z-index: 150;
}
.nav-scrim[hidden] { display: none; }
@media (max-width: 1279px) {
.site-nav {
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(360px, 88vw);
background: var(--color-surface);
border-left: var(--border-width) solid var(--color-line);
box-shadow: -24px 0 48px -24px rgba(34, 33, 38, .18);
padding: 96px 28px 32px;
transform: translateX(100%);
transition: transform .28s var(--ease);
overflow-y: auto;
z-index: 200;
}
.site-nav.is-open { transform: translateX(0); }
.site-nav__list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; }
.site-nav__list a {
font-family: var(--font-display);
font-size: 26px;
font-weight: 600;
display: block;
padding-block: 8px;
color: var(--color-ink);
}
.site-nav__cta { display: inline-flex; }
}
@media (min-width: 1280px) {
.menu-toggle { display: none; }
.header-cta { display: inline-flex; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav__list { display: flex; gap: 22px; }
.site-nav__list a {
font-size: 15px;
font-weight: 600;
white-space: nowrap;
color: var(--color-ink);
transition: color .15s var(--ease);
position: relative;
}
.site-nav__list a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 2px;
background: var(--color-fuchsia);
transform: scaleX(0);
transform-origin: left;
transition: transform .18s var(--ease);
}
.site-nav__list a:hover::after, .site-nav__list a:focus-visible::after { transform: scaleX(1); }
.site-nav__cta { display: none; }
}
@media (min-width: 1440px) {
.site-nav { gap: 34px; }
.site-nav__list { gap: 28px; }
.site-nav__list a { font-size: 16px; }
}
/* body scroll lock while mobile menu open */
body.menu-open { overflow: hidden; }
/* =========================================================
HERO — PHOTO ONLY (etap 17F.6) — dogs-on-sofa.jpg jako tło sekcji
zdjęciowej, H1 wyrównany do GÓRY zdjęcia (dawniej do dołu — zmiana
17F.6, żeby pasować do nowej kolejności: zdjęcie → biała sekcja
"Co najlepiej..." → kafle, patrz .hero-choices niżej). Na mobile
zdjęcie NIE jest croppowane, patrz media query (max-width:767px).
========================================================= */
.hero { position: relative; overflow: hidden; padding-top: 40px; padding-bottom: 40px; min-height: 480px; display: flex; align-items: flex-start; }
@media (min-width: 768px) { .hero { min-height: 560px; padding-top: 56px; padding-bottom: 56px; } }
@media (min-width: 1024px) { .hero { min-height: 620px; } }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; }
/* delikatny gradient wyłącznie od góry (gdzie teraz siedzi H1) —
zastępuje dawny gradient od dołu, bo tekst przeniósł się na górę
zdjęcia (etap 17F.6). Zdjęcie poniżej zostaje w pełni odsłonięte. */
.hero__bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20,17,16,.34) 0%, rgba(20,17,16,.06) 40%, rgba(20,17,16,0) 60%);
}
.hero-inner { position: relative; z-index: 1; width: 100%; }
/* Mobile: zdjęcie w naturalnych proporcjach, bez przycinania (etap
17F.6 — wymóg "widać WSZYSTKIE psy z kanapy"). .hero__bg wraca do
normalnego przepływu (nie position:absolute), więc .hero rośnie do
wysokości zdjęcia; H1 zostaje nałożony na górę przez position:absolute
na .hero-inner, niezależnie od faktycznej wysokości obrazu. */
@media (max-width: 767px) {
.hero { min-height: 0; padding: 0; display: block; overflow: visible; }
.hero__bg { position: static; }
.hero__bg img { position: static; width: 100%; height: auto; object-fit: initial; object-position: initial; }
.hero__bg::after { content: none; }
.hero-inner { position: absolute; top: 0; left: 0; right: 0; padding: 20px var(--gutter-mobile) 0; }
}
/* ---------- Headline bezpośrednio na zdjęciu (etap 17F.3) ----------
Zastępuje wcześniejszy frosted .hero__panel (białą kartę z eyebrow +
H1 + lead, etap 17F) — na zdjęciu ma zostać wyłącznie mocny headline,
biały z czarną obwódką, bez karty/tła/dodatkowego tekstu. Lokalizacje
(dawny .hero__eyebrow) i lead nie mają dziś innego miejsca na
homepage — świadomie usunięte z hero, nie przeniesione gdzie indziej
(poza zakresem tej poprawki, patrz CLAUDE.md/TASKS.md). */
.hero__heading--onphoto {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.4rem, 7vw, 5rem);
line-height: 1.18;
letter-spacing: -.01em;
color: var(--color-white);
-webkit-text-stroke: 1.5px var(--color-graphite);
text-stroke: 1.5px var(--color-graphite);
paint-order: stroke fill;
text-shadow: 0 2px 8px rgba(0, 0, 0, .3);
max-width: 14ch;
margin: 0;
}
/* Jedna linia od tabletu w górę (etap 17F.5) — mniejsza, dedykowana
skala fontu (nie ta sama co mobile 2-liniowe clamp) + wymuszone
nie-zawijanie, żeby "Opowiedz mi o swoim psie." zmieściło się w
.hero-inner bez overflow na 768/1024/1440. */
@media (min-width: 768px) {
.hero__heading--onphoto {
font-size: clamp(2.4rem, 4.6vw, 4.4rem);
white-space: nowrap;
max-width: none;
-webkit-text-stroke-width: 2px;
}
.hero__heading-break { display: none; }
}
/* ---------- "Co najlepiej opisuje Was dzisiaj?" + 3 kafle — biała
sekcja pod zdjęciem hero (etap 17F.6, zastępuje wersję na zdjęciu z
17F/17F.3/17F.5). Czyste białe tło gwarantuje czytelność niezależnie
od treści fotografii nad nią. ---------- */
.hero-choices { background: var(--color-surface); padding-top: 40px; padding-bottom: var(--section-space-mobile); }
@media (min-width: 768px) { .hero-choices { padding-top: 48px; padding-bottom: var(--section-space-tablet); } }
@media (min-width: 1024px) { .hero-choices { padding-top: 56px; } }
.hero-choices__intro {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.15rem, 1.8vw, 1.5rem);
color: var(--color-ink);
margin-bottom: 20px;
}
.intent-list { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.intent-choice {
display: flex;
align-items: center;
gap: 18px;
padding: 18px 22px;
border-radius: var(--radius-md);
border: var(--border-width) solid var(--color-line);
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
box-shadow: 0 10px 28px -14px rgba(20, 17, 16, .35);
transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease);
}
.intent-choice:hover, .intent-choice:focus-visible, .intent-choice:active {
border-color: var(--color-ink);
transform: translateX(4px);
}
.intent-choice__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.intent-choice--orange .intent-choice__dot { background: var(--color-orange); }
.intent-choice--yellow .intent-choice__dot { background: var(--color-yellow); }
.intent-choice--pink .intent-choice__dot { background: var(--color-powder-pink); }
/* Mocniejsze, bardziej nasycone kolory hover/focus/active (etap 17F.5)
— poprzednie -soft warianty oceniono jako za delikatne. Tekst na
tych tłach przechodzi na --color-ink (zamiast --color-text) na
hover, żeby zachować bardzo dobrą czytelność bez glow/efektów. */
.intent-choice--orange:hover, .intent-choice--orange:focus-visible, .intent-choice--orange:active { background: var(--color-orange-hover); }
.intent-choice--yellow:hover, .intent-choice--yellow:focus-visible, .intent-choice--yellow:active { background: var(--color-yellow-hover); }
.intent-choice--pink:hover, .intent-choice--pink:focus-visible, .intent-choice--pink:active { background: var(--color-powder-pink-hover); }
.intent-choice:hover .intent-choice__desc, .intent-choice:focus-visible .intent-choice__desc, .intent-choice:active .intent-choice__desc { color: var(--color-ink); }
.intent-choice__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.intent-choice__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--color-ink); line-height: 1.2; }
.intent-choice__desc { font-size: .86em; line-height: 1.4; color: var(--color-text); transition: color .18s var(--ease); }
.intent-choice__arrow { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-ink); transition: transform .18s var(--ease); }
.intent-choice:hover .intent-choice__arrow, .intent-choice:focus-visible .intent-choice__arrow, .intent-choice:active .intent-choice__arrow { transform: translateX(4px); }
@media (min-width: 640px) {
.intent-choice { padding: 20px 26px; }
.intent-choice__desc { max-width: 44ch; }
}
/* Desktop: 3 zbliżone do kwadratu kafle w jednym rzędzie (etap 18) —
zastępuje poziome rzędy z mobile/tablet tylko od 1024px. Mobile/tablet
układ (flex column, wiersze) zostaje BEZ ZMIAN — jawne polecenie
"na telefonie obecna forma jest dobra". */
@media (min-width: 1024px) {
.intent-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: none; }
.intent-choice {
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
aspect-ratio: 1 / 1;
padding: 32px 30px;
gap: 20px;
}
.intent-choice__dot { width: 12px; height: 12px; }
.intent-choice__body { gap: 10px; }
.intent-choice__title { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.intent-choice__desc { max-width: none; }
.intent-choice__arrow { align-self: flex-end; }
.intent-choice:hover, .intent-choice:focus-visible, .intent-choice:active { transform: translateY(-4px); }
}
/* =========================================================
"MA BYĆ WAM PO PROSTU ŁATWIEJ ŻYĆ RAZEM" (etap 17D — skrócone do
jednego kompaktowego editorial bandu, bez card-chrome; poprzednia
wersja z trzema pełnymi kartami — etap 17C — zastąpiona).
========================================================= */
.benefits { background: var(--color-aqua-soft); padding-block: var(--section-space-mobile); overflow: hidden; }
@media (min-width: 768px) { .benefits { padding-block: var(--section-space-tablet); } }
@media (min-width: 1024px) { .benefits { padding-block: var(--section-space-desktop); } }
.benefits__heading { max-width: 32ch; }
.benefits__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--color-text); max-width: 62ch; margin-top: 24px; }
.benefit-row { display: grid; gap: 28px; margin-top: 48px; }
.benefit-point { padding-top: 20px; border-top: 2px solid rgba(34, 33, 38, .14); }
.benefit-point__num { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--color-ink); opacity: .5; margin-bottom: 10px; }
.benefit-point__title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--color-ink); margin-bottom: 8px; }
.benefit-point__text { font-size: .95em; line-height: 1.5; color: var(--color-text); }
@media (min-width: 768px) { .benefit-row { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
/* =========================================================
JAK MOŻEMY PRACOWAĆ? (etap 13) — DESIGN.md §12.4
Trzy zróżnicowane kafle (nie identyczne białe SaaS cards, nie kopia
kart "Od czego chcesz zacząć") — wspólny system (biała powierzchnia,
cienka linia, radius-md), ale różny akcent koloru na każdym i lekki
pionowy offset środkowego kafla dla odmiany rytmu.
========================================================= */
.work { background: var(--color-bg); padding-block: var(--section-space-mobile); }
@media (min-width: 768px) { .work { padding-block: var(--section-space-tablet); } }
@media (min-width: 1024px) { .work { padding-block: var(--section-space-desktop); } }
.work-tiles { display: grid; gap: 20px; margin-top: 48px; }
.work-tile {
background: var(--color-surface);
border: var(--border-width) solid var(--color-line);
border-radius: var(--radius-md);
padding: 32px 28px;
}
.work-tile::before {
content: "";
display: block;
height: 3px;
width: 56px;
border-radius: var(--radius-pill);
margin-bottom: 24px;
}
.work-tile--a::before { background: var(--color-aqua); }
.work-tile--b::before { background: var(--color-fuchsia); }
.work-tile--c::before { background: var(--color-yellow); }
.work-tile__num {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.2rem, 3.5vw, 3rem);
color: var(--color-line);
line-height: 1;
margin-bottom: 16px;
}
.work-tile h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 600; line-height: 1.1; color: var(--color-ink); margin-bottom: 14px; }
.work-tile p { font-size: 1em; line-height: 1.55; color: var(--color-text); }
.work-tile__note { margin-top: 12px; font-weight: 700; font-size: .85em; color: var(--color-muted); }
.work-tile__cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 18px;
font-family: var(--font-body);
font-weight: 700;
font-size: .85em;
color: var(--color-ink);
}
.work-tile__cta svg { width: 14px; height: 14px; transition: transform .18s var(--ease); }
.work-tile__cta:hover, .work-tile__cta:focus-visible { color: var(--color-fuchsia); }
.work-tile__cta:hover svg, .work-tile__cta:focus-visible svg { transform: translateX(3px); }
/* Rozszerzenia .work-tile dla pełnej treści /szkolenia/ (etap 18) —
badge trybu pracy, lista cech/sytuacji, wiersz z dwoma CTA. Homepage
nadal używa samego podstawowego .work-tile (num/h3/p/note/cta), te
klasy są dla niego martwym, nieużywanym CSS — nic tu nie zmienia
wyglądu istniejących kafli homepage. */
.work-tile__badge {
display: inline-flex;
align-items: center;
padding: 4px 14px;
margin-bottom: 16px;
border-radius: var(--radius-pill);
background: var(--color-aqua-soft);
color: var(--color-ink);
font-family: var(--font-body);
font-weight: 700;
font-size: .76em;
letter-spacing: .02em;
}
.work-tile__list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.work-tile__list li { position: relative; padding-left: 20px; font-size: .92em; line-height: 1.5; color: var(--color-text); }
.work-tile__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-fuchsia); }
.work-tile__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 18px; }
.work-tile__cta-row .work-tile__cta { margin-top: 0; }
/* Krótki lead pod H2 "Jak możemy pracować?" na /szkolenia/ (etap 18) —
homepage nie ma tego akapitu, klasa tam nieużywana. */
.work__lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--color-text); max-width: 62ch; margin-top: 20px; }
/* Wariant .work-tiles na 2 kolumny (etap 19, /klasy/ i /obrona/) — moduły
"pies-pies"/"pies-człowiek" itp. Reużywa dokładnie .work-tile (karta,
akcent, h3, p), tylko inna liczba kolumn na desktopie. */
@media (min-width: 768px) { .work-tiles.work-tiles--2 { grid-template-columns: repeat(2, 1fr); } }
/* =========================================================
/KLASY/, /OBRONA/ (etap 19) — podstrony w tym samym kierunku
wizualnym co homepage/szkolenia, zero nowego systemu designu.
========================================================= */
/* Hero z zdjęciem obok tekstu (reużywa .apply-hero__heading/__text/
__actions/__link z /szkolenia/, .eyebrow, .btn — tylko układ 2-kolumnowy
i kadr zdjęcia są nowe, oparte o --radius-lg i istniejące zdjęcia
assets/communication-classes.jpg, assets/sport-defense.jpg). */
.subpage-hero { background: var(--color-bg); padding-block: var(--section-space-mobile); }
@media (min-width: 768px) { .subpage-hero { padding-block: var(--section-space-tablet); } }
.subpage-hero__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .subpage-hero__grid { grid-template-columns: 1fr 1fr; gap: 56px; } }
.subpage-hero__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10; margin: 0; }
.subpage-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Uniwersalna sekcja treściowa (etap 19) — H2 + opcjonalny .work__lead +
opcjonalna .work-tile__list/.work-tiles, naprzemienne tło z istniejących
tokenów dla rytmu kolorystycznego (DESIGN.md), bez nowych kolorów. */
.info-section { padding-block: var(--section-space-mobile); }
@media (min-width: 768px) { .info-section { padding-block: var(--section-space-tablet); } }
@media (min-width: 1024px) { .info-section { padding-block: var(--section-space-desktop); } }
.info-section--bg { background: var(--color-bg); }
.info-section--surface { background: var(--color-surface); }
.info-section--aqua { background: var(--color-aqua-soft); }
.info-section--yellow { background: var(--color-yellow-soft); }
@media (min-width: 768px) { .work-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .work-tile--b { margin-top: -20px; padding-top: 48px; padding-bottom: 48px; } }
/* Informacja o zapisie bezpośrednim na Klasy/Obronę (etap 18) —
zastępuje dawny .work-callout (fuksjowy box+ikona+border, etap 17F.6),
uznany za zbyt bannerowy/niejasny co do tego, czego dotyczy. Zwykły
tekst BEZ boxa/tła/ramki, bezpośrednio nad kartami Klasy/Obrona — sama
bliskość ma tłumaczyć relację. Współdzielone z homepage i /szkolenia/.
Homepage: ... ...
. /szkolenia/ (osobna sekcja,
wymaga własnego H2 dla hierarchii H1→H2→H3): .direct-booking-note__heading. */
.direct-booking-note { margin-top: 32px; max-width: 64ch; }
.direct-booking-note p { font-size: 1.02em; line-height: 1.5; color: var(--color-ink); }
.direct-booking-note strong { font-weight: 800; }
.direct-booking-note__heading {
font-family: var(--font-body);
font-weight: 800;
font-size: 1.02em;
line-height: 1.5;
color: var(--color-ink);
margin-bottom: 2px;
}
/* /szkolenia/ (etap 18): Klasy/Obrona jako OSOBNA sekcja (nie zagnieżdżona
w .work jak na homepage) — jawne polecenie tego etapu. Naprzemienne tło
względem .work (--color-bg) dla zachowania rytmu kolorystycznego. */
.work-direct { background: var(--color-surface); padding-block: var(--section-space-mobile); }
@media (min-width: 768px) { .work-direct { padding-block: var(--section-space-tablet); } }
@media (min-width: 1024px) { .work-direct { padding-block: var(--section-space-desktop); } }
/* etap 17F — Klasy komunikacji / Obrona jako widoczne, fotograficzne
moduły WEWNĄTRZ tej samej sekcji oferty (nie osobna sekcja) */
.work-specialties { display: grid; gap: 20px; margin-top: 28px; }
@media (min-width: 768px) { .work-specialties { grid-template-columns: 1fr 1fr; gap: 24px; } }
.work-specialty { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; border: var(--border-width) solid var(--color-line); }
.work-specialty__photo { aspect-ratio: 16 / 10; margin: 0; }
.work-specialty__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-specialty__copy { padding: 24px 24px 28px; }
.work-specialty__accent { display: block; height: 4px; width: 52px; border-radius: var(--radius-pill); margin-bottom: 16px; background: var(--color-fuchsia); }
.work-specialty__accent--aqua { background: var(--color-aqua); }
.work-specialty__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--color-ink); margin-bottom: 10px; }
.work-specialty__text { font-size: .98em; line-height: 1.5; color: var(--color-text); }
.work-specialty__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 18px; }
.work-specialty__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-weight: 700;
font-size: .88em;
color: var(--color-ink);
}
.work-specialty__link svg { width: 14px; height: 14px; transition: transform .18s var(--ease); }
.work-specialty__link:hover, .work-specialty__link:focus-visible { color: var(--color-fuchsia); }
.work-specialty__link:hover svg, .work-specialty__link:focus-visible svg { transform: translateX(3px); }
/* =========================================================
CENNIK CTA (etap 17E) — zastępuje ceny pokazywane bezpośrednio przy
formach współpracy. Jeden wyraźny pas, nie kolejna duża sekcja.
========================================================= */
.pricing-cta { background: var(--color-fuchsia-soft); padding-block: 80px; }
@media (min-width: 1024px) { .pricing-cta { padding-block: 100px; } }
.pricing-cta__inner {
display: flex;
flex-direction: column;
gap: 20px;
}
@media (min-width: 640px) { .pricing-cta__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } }
.pricing-cta__heading { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 1.8rem); color: var(--color-ink); margin-bottom: 4px; }
.pricing-cta__text { font-size: .95em; color: var(--color-text); }
.pricing-cta .btn--primary { flex-shrink: 0; }
/* =========================================================
CO SIĘ TERAZ DZIEJE? (etap 17C §15-18) — komponent wydarzeń, dziś
zawsze pusty/hidden (patrz komentarz w index.html i EVENTS w
script.js). Style przygotowane pod przyszłe realne dane.
========================================================= */
.events { background: var(--color-yellow-soft); padding-block: var(--section-space-mobile); }
@media (min-width: 768px) { .events { padding-block: var(--section-space-tablet); } }
@media (min-width: 1024px) { .events { padding-block: var(--section-space-desktop); } }
.events__grid { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 768px) { .events__grid { grid-template-columns: repeat(var(--events-cols, 1), 1fr); } }
.event-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 28px 26px;
background: var(--color-surface);
border: var(--border-width) solid var(--color-line);
border-radius: var(--radius-md);
}
.event-card__type { font-family: var(--font-body); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-fuchsia); }
.event-card__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--color-ink); }
.event-card__meta { font-size: .9em; color: var(--color-muted); font-weight: 600; }
.event-card__desc { font-size: .95em; color: var(--color-text); line-height: 1.5; }
.event-card__cta { margin-top: 10px; font-weight: 700; color: var(--color-ink); display: inline-flex; align-items: center; gap: 6px; }
.events__more { margin-top: 32px; }
.events__more a {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
font-weight: 700;
color: var(--color-ink);
}
.events__more a:hover, .events__more a:focus-visible { color: var(--color-fuchsia); }
/* =========================================================
OPINIE (etap 13) — DESIGN.md §12.7. Kompozycja "unoszących się"
karteczek zamiast slidera: wszystkie widoczne naraz, różne wielkości,
lekka rotacja/asymetria (CSS columns = naturalna masonry bez JS),
miękkie cienie, subtelne pionowe unoszenie (translate, niezależne od
statycznej rotacji na transform). prefers-reduced-motion wyłącza
unoszenie całkowicie. Mobile: pojedyncza kolumna = czytelny strumień.
========================================================= */
.testimonials { position: relative; padding-top: 140px; padding-bottom: 64px; scroll-margin-top: 96px; }
@media (min-width: 1024px) { .testimonials { padding-top: 168px; padding-bottom: 80px; } }
.testimonials__bg { position: absolute; inset: 0; background: url("assets/testimonials-background.jpg") center 30% / cover no-repeat; }
.testimonials__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(20,17,16,.82), rgba(20,17,16,.6) 55%, rgba(20,17,16,.85)); }
.testimonials__inner { position: relative; z-index: 1; }
.testimonials .section-heading { margin-bottom: 40px; }
.quote-cloud {
margin-top: 48px;
column-count: 1;
column-gap: 24px;
}
@media (min-width: 640px) { .quote-cloud { column-count: 2; } }
@media (min-width: 1100px) { .quote-cloud { column-count: 3; column-gap: 28px; } }
.quote-card {
display: inline-block;
width: 100%;
break-inside: avoid;
margin-bottom: 24px;
background: var(--color-surface);
border-radius: var(--radius-md);
padding: 28px 26px;
box-shadow: 0 16px 32px -14px rgba(20, 17, 16, .2);
}
.quote-card--featured { padding: 36px 32px; }
/* lekkie, zróżnicowane rotacje — delikatna asymetria, nie chaos */
.quote-card--a { transform: rotate(-1deg); }
.quote-card--b { transform: rotate(1.2deg); }
.quote-card--c { transform: rotate(-0.8deg); }
.quote-card--d { transform: rotate(1deg); }
.quote-card--e { transform: rotate(-1.3deg); }
.quote-card--f { transform: rotate(0.7deg); }
@media (max-width: 639px) { .quote-card { transform: none !important; } }
.quote-card p {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(1.1rem, 2vw, 1.4rem);
line-height: 1.35;
color: var(--color-ink);
margin-bottom: 18px;
}
.quote-card--featured p { font-size: clamp(1.25rem, 2.6vw, 1.9rem); }
@media (max-width: 479px) {
.quote-card p { font-size: 1.05rem; line-height: 1.42; }
}
.quote-card footer { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.quote-card cite { font-style: normal; font-family: var(--font-body); font-weight: 700; color: var(--color-ink); }
.quote-card footer span { font-size: .85em; color: var(--color-muted); font-weight: 600; }
/* delikatne unoszenie — niezależne od statycznej rotacji dzięki
CSS Individual Transform Properties (translate osobno od transform) */
@media (prefers-reduced-motion: no-preference) {
.quote-card--a { animation: quote-float 7.5s ease-in-out .1s infinite; }
.quote-card--b { animation: quote-float 8.5s ease-in-out .6s infinite; }
.quote-card--c { animation: quote-float 6.8s ease-in-out 1.1s infinite; }
.quote-card--d { animation: quote-float 9s ease-in-out .3s infinite; }
.quote-card--e { animation: quote-float 7.8s ease-in-out .8s infinite; }
.quote-card--f { animation: quote-float 8.2s ease-in-out 1.4s infinite; }
@keyframes quote-float {
0%, 100% { translate: 0 0; }
50% { translate: 0 -8px; }
}
}
@media (prefers-reduced-motion: reduce) {
.quote-card { animation: none !important; }
}
/* =========================================================
O MNIE (DESIGN.md §12.7)
Zdjęcie 42–46% / treść 54–58% na desktopie; kwalifikacje jako ciche,
uporządkowane tagi — element drugorzędny wizualnie, nie ściana
certyfikatów. Hierarchia: główny opis (H2 + tekst) → CTA →
kwalifikacje → nota prawna, w tej kolejności malejącej wagi.
========================================================= */
.about { background: var(--color-bg); padding-block: var(--section-space-mobile); }
@media (min-width: 768px) { .about { padding-block: var(--section-space-tablet); } }
@media (min-width: 1024px) { .about { padding-block: var(--section-space-desktop); } }
.about__grid { display: grid; gap: 40px; align-items: start; }
.about__photo {
border-radius: var(--radius-lg);
overflow: hidden;
border: var(--border-width) solid var(--color-line);
box-shadow: var(--shadow-elevated);
aspect-ratio: 3 / 4;
}
/* etap 17F: było 4/5 + object-position 50% 20% — ucinało nogi w
nienaturalnym miejscu (kadr skupiony zbyt wysoko na zdjęciu pełnej
sylwetki). Zdjęcie asset/about-martyna-baldur.webp to Martyna z psem
w pełnej sylwetce na chodniku (pion 1206×2117) — 3/4 (mniej agresywny
crop niż 4/5) + object-position Y 38% pokazuje więcej dołu kadru,
obejmując buty/nogi, kosztem odrobiny nieba nad czapką. */
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.about__eyebrow { margin-bottom: 6px; }
.about__text { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; margin-top: 20px; max-width: 52ch; color: var(--color-text); }
.about__highlight {
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: clamp(1.4rem, 2.2vw, 1.9rem);
line-height: 1.35;
color: var(--color-fuchsia);
margin-top: 24px;
max-width: 46ch;
}
.about__copy .btn { margin-top: 32px; }
.about__more { margin-top: 64px; padding-top: 40px; border-top: var(--border-width) solid var(--color-line); }
.about__more-heading {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
color: var(--color-muted);
margin-bottom: 20px;
}
.credentials {
display: grid;
gap: 16px 32px;
}
@media (min-width: 768px) { .credentials { grid-template-columns: 1fr 1fr; } }
.credentials li { display: flex; flex-direction: column; gap: 4px; }
.credentials__name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--color-ink); }
/* "Wkrótce" pozycja (etap 17F.6) — spójna z resztą listy, subtelnie
wyróżniona kursywą + przygaszonym kolorem, nie osobnym badge'em. */
.credentials__name--soon { font-style: italic; color: var(--color-muted); font-weight: 500; }
.credentials__desc { font-family: var(--font-body); font-size: .85em; color: var(--color-muted); }
.disclaimer { margin-top: 20px; font-size: 12px; color: var(--color-muted); max-width: 60ch; }
/* etap 17D — wariant skrócony, użyty bezpośrednio w .about__copy (bez
.about__more wrappera i bez nagłówka "Moje zaplecze"), lista pozioma
zamiast siatki 2-kolumnowej z opisami pod każdą pozycją */
.credentials--compact { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; }
.credentials--compact li { flex-direction: row; align-items: baseline; gap: 8px; }
.credentials--compact .credentials__name { font-size: .96rem; }
.credentials--compact .credentials__desc { font-size: .87em; }
@media (min-width: 1024px) { .about__grid { grid-template-columns: 4fr 5fr; gap: 64px; } }
/* =========================================================
GROOMER — mały cross-sell blok (etap 17D, zastępuje pełną sekcję
editorial 50/50 z etapu 12B/17C — groomer nie jest głównym celem
homepage szkoleń, nie potrzebuje dużego zdjęcia ani rozbudowanego copy).
========================================================= */
.groomer-teaser {
background: var(--color-surface);
border-top: var(--border-width) solid var(--color-line);
padding-block: 40px;
}
.groomer-teaser__inner {
display: flex;
flex-direction: column;
gap: 20px;
}
@media (min-width: 640px) { .groomer-teaser__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } }
.groomer-teaser__heading { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--color-ink); margin-bottom: 4px; }
.groomer-teaser__text { font-size: .95em; color: var(--color-text); }
.groomer-teaser__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; flex-shrink: 0; }
.groomer-teaser__link { font-family: var(--font-body); font-weight: 700; font-size: .9em; color: var(--color-ink); }
.groomer-teaser__link:hover, .groomer-teaser__link:focus-visible { color: var(--color-fuchsia); }
@media (min-width: 1024px) {
.groomer__grid { grid-template-columns: 4fr 5fr; gap: 64px; }
.groomer__photo { order: 2; }
.groomer__copy { order: 1; }
}
/* =========================================================
FAQ
========================================================= */
/* DESIGN.md §12.8 — wstęp po lewej, accordion po prawej; cienkie linie
1px zamiast kart; plus obraca się do × (rotacja 45°); fuksja tylko
jako akcent hover/focus/otwartego stanu, nie kolor statyczny. */
/* Sekcja wysmuklona etapem 17F.6 — dawny wspólny --section-space-*
token (68-112px) oceniony jako za duży dla FAQ, własny, mniejszy
padding tylko tutaj. */
.faq { background: var(--color-bg); padding-block: 32px; }
@media (min-width: 768px) { .faq { padding-block: 48px; } }
@media (min-width: 1024px) { .faq { padding-block: 56px; } }
/* Ułożenie w jednej kolumnie na wszystkich szerokościach (etap 17F.6A)
— zastępuje dawny 2-kolumnowy układ na desktopie (wstęp po lewej,
accordion po prawej, od etapu 17D). Jawne nowe polecenie: eyebrow
ma siedzieć BEZPOŚREDNIO nad accordionem, bez osobnej kolumny i bez
pustej przestrzeni między nimi. */
.faq__grid { display: block; }
.faq__intro { margin-bottom: 20px; }
/* Mały eyebrow zamiast dawnego ogromnego section-heading (etap 17F.6),
wielkość skorygowana etapem 18 — ma być TYLKO delikatnie większy od
pytań accordionu, nie mały label. Hierarchia: heading > pytania >
odpowiedzi. Desktop ~24px, mobile ~19px (patrz .accordion__trigger
niżej dla porównania: ~19-21px desktop, ~17px mobile). */
.faq__eyebrow {
font-family: var(--font-body);
font-weight: 800;
font-size: clamp(1.2rem, 2.6vw, 1.5rem);
letter-spacing: 0;
color: var(--color-fuchsia);
line-height: 1.3;
max-width: 34ch;
}
.accordion { border-top: var(--border-width) solid var(--color-line); }
.accordion__item { border-bottom: var(--border-width) solid var(--color-line); }
.accordion__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-block: 16px;
text-align: left;
font-family: var(--font-display);
font-size: clamp(1.0625rem, 1.6vw, 1.3rem);
font-weight: 600;
color: var(--color-ink);
}
.accordion__icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-muted); transition: transform .22s var(--ease), color .18s var(--ease); }
.accordion__trigger:hover .accordion__icon,
.accordion__trigger:focus-visible .accordion__icon,
.accordion__trigger[aria-expanded="true"] .accordion__icon { color: var(--color-fuchsia); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__trigger:hover span { text-decoration: underline; text-decoration-color: var(--color-fuchsia); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.accordion__panel { padding-bottom: 16px; max-width: 68ch; }
.accordion__panel p { font-size: .92em; line-height: 1.55; color: var(--color-text); }
.accordion__panel p + p { margin-top: 10px; }
/* Linki wewnątrz odpowiedzi akordeonu (np. panel/zasady/) - globalny
`a { color:inherit }` (reset u góry pliku) zostawiałby je wizualnie
nieodróżnialne od zwykłego tekstu. */
.accordion__panel a { color: var(--color-fuchsia); font-weight: 700; }
.accordion__panel a:hover, .accordion__panel a:focus-visible { color: var(--color-fuchsia-hover); }
@media (prefers-reduced-motion: no-preference) {
.accordion__panel:not([hidden]) { animation: faq-in .28s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
/* =========================================================
FINAL CTA (DESIGN.md §12.11, etap 17C) — mocny fuksjowy blok
(wcześniej grafitowy — grafit zarezerwowany teraz dla stopki, patrz
DESIGN.md §12). Przycisk primary i link secondary dostają lokalne
nadpisania, bo domyślny .btn--primary (fuksja na białym) i domyślny
hover .final-cta__secondary (fuksja) znikałyby na fuksjowym tle.
========================================================= */
.final-cta {
background: var(--color-fuchsia);
text-align: center;
padding-block: var(--section-space-mobile);
}
@media (min-width: 768px) { .final-cta { padding-block: var(--section-space-tablet); } }
@media (min-width: 1024px) { .final-cta { padding-block: var(--section-space-desktop); } }
.final-cta__inner { display: flex; flex-direction: column; align-items: center; }
.final-cta .eyebrow,
.final-cta .eyebrow span { color: rgba(255, 255, 255, .75); }
.final-cta__eyebrow { margin-bottom: 4px; }
.final-cta .section-heading { color: var(--color-white); }
.final-cta__text {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: clamp(1.3rem, 2vw, 1.8rem);
color: rgba(255, 255, 255, .92);
margin-block: 22px 40px;
}
.final-cta .btn--primary {
background: var(--color-white);
color: var(--color-fuchsia);
}
.final-cta .btn--primary:hover, .final-cta .btn--primary:focus-visible {
background: var(--color-ink);
color: var(--color-white);
}
/* domyślny :focus-visible (fuksjowy outline) byłby niewidoczny na fuksjowym
tle tej sekcji — biały outline zamiast tego, tylko tutaj */
.final-cta :focus-visible { outline-color: var(--color-white); }
.final-cta__row {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
@media (min-width: 480px) { .final-cta__row { flex-direction: row; justify-content: center; gap: 32px; } }
.final-cta__secondary {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
color: rgba(255, 255, 255, .85);
transition: color .18s var(--ease);
}
.final-cta__secondary svg { width: 16px; height: 16px; transition: transform .18s var(--ease); }
.final-cta__secondary:hover, .final-cta__secondary:focus-visible { color: var(--color-white); text-decoration: underline; }
.final-cta__secondary:hover svg, .final-cta__secondary:focus-visible svg { transform: translateX(3px); }
/* =========================================================
FOOTER (etap 17F — całkowity redesign) — poprzednia wersja (DESIGN.md
§12.10, etap 17C) oceniona jako za ciemna/ciasna/mało czytelna.
Nadal grafit, ale: wyższy kontrast tekstu (.7→.82 opacity na tekście
pomocniczym), większy font, znacznie więcej przestrzeni pionowej i
poziomej, wyraźne nagłówki kolumn z cienką linią pod spodem (nie
tylko waga fontu), pełne logo z psem większe niż poprzedni sam
wordmark. Wysokość celowo NIE jest minimalizowana — czytelność ważniejsza.
========================================================= */
/* Wysmuklone etapem 17F.6 — logo usunięte (branding jest już widoczny
w headerze, patrz .wordmark__logo), mniejsze paddingi/odstępy/fonty
na całej stopce. Footer ma być lekki, nie kolejna duża sekcja. */
.site-footer { background: var(--color-graphite); color: var(--color-white); padding-top: 40px; }
.site-footer__inner { padding-bottom: 28px; border-bottom: var(--border-width) solid rgba(255, 255, 255, .2); }
.site-footer__location { color: rgba(255, 255, 255, .82); font-size: .9em; font-weight: 700; margin-bottom: 6px; }
.site-footer__address { color: rgba(255, 255, 255, .82); font-size: .9em; line-height: 1.5; margin: 10px 0 8px; }
.site-footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
.site-footer__social a { margin: 0; min-height: 36px; display: inline-flex; align-items: center; }
/* Link Booksy w stopce jako klikalny obrazek (etap 18.2) — zastępuje
oficjalny widget Booksy (etap 18), oceniony jako wizualnie niepasujący
do stopki. assets/booksy.png (dostarczony asset), skalowany po
wysokości, proporcje zachowane (bez deformacji), kompaktowy rozmiar
dopasowany do rzędu ikon social. URL bez zmian — ten sam, którego
projekt już używa (CTA "Sprawdź usługi / umów wizytę" w groomer-teaser). */
.site-footer__booksy-link { display: inline-flex; align-items: center; min-height: 36px; }
.site-footer__booksy-link img { height: 32px; width: auto; display: block; }
/* Ikony social media (etap 17F.6A) — prawdziwe assety dostarczone w projekcie
(assets/instagram.svg, facebook.svg, tiktok.svg, Bootstrap Icons, fill="currentColor"),
przebarwione na kolor footeru przez CSS mask zamiast inline SVG/sprite'a.
Mask jako base64 data-URI (dokładna, niezmieniona zawartość tych samych
plików assets/*.svg) — url(assets/*.svg) w mask-image jest blokowane przez
CORS przy otwarciu strony bezpośrednio z dysku (protokół file://, origin
"null"), co czyniło ikony niewidoczne przy takim uruchomieniu (wymóg
projektu, patrz CLAUDE.md §3). Data-URI nie ma tego problemu. */
.social-icon { display: inline-block; width: 21px; height: 21px; background-color: rgba(255, 255, 255, .82); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; transition: background-color .15s ease; }
.site-footer__social a:hover .social-icon,
.site-footer__social a:focus-visible .social-icon { background-color: var(--color-white); }
.social-icon--instagram { mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktaW5zdGFncmFtIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDBDNS44MjkgMCA1LjU1Ni4wMSA0LjcwMy4wNDggMy44NS4wODggMy4yNjkuMjIyIDIuNzYuNDJhMy45IDMuOSAwIDAgMC0xLjQxNy45MjNBMy45IDMuOSAwIDAgMCAuNDIgMi43NkMuMjIyIDMuMjY4LjA4NyAzLjg1LjA0OCA0LjcuMDEgNS41NTUgMCA1LjgyNyAwIDguMDAxYzAgMi4xNzIuMDEgMi40NDQuMDQ4IDMuMjk3LjA0Ljg1Mi4xNzQgMS40MzMuMzcyIDEuOTQyLjIwNS41MjYuNDc4Ljk3Mi45MjMgMS40MTcuNDQ0LjQ0NS44OS43MTkgMS40MTYuOTIzLjUxLjE5OCAxLjA5LjMzMyAxLjk0Mi4zNzJDNS41NTUgMTUuOTkgNS44MjcgMTYgOCAxNnMyLjQ0NC0uMDEgMy4yOTgtLjA0OGMuODUxLS4wNCAxLjQzNC0uMTc0IDEuOTQzLS4zNzJhMy45IDMuOSAwIDAgMCAxLjQxNi0uOTIzYy40NDUtLjQ0NS43MTgtLjg5MS45MjMtMS40MTcuMTk3LS41MDkuMzMyLTEuMDkuMzcyLTEuOTQyQzE1Ljk5IDEwLjQ0NSAxNiAxMC4xNzMgMTYgOHMtLjAxLTIuNDQ1LS4wNDgtMy4yOTljLS4wNC0uODUxLS4xNzUtMS40MzMtLjM3Mi0xLjk0MWEzLjkgMy45IDAgMCAwLS45MjMtMS40MTdBMy45IDMuOSAwIDAgMCAxMy4yNC40MmMtLjUxLS4xOTgtMS4wOTItLjMzMy0xLjk0My0uMzcyQzEwLjQ0My4wMSAxMC4xNzIgMCA3Ljk5OCAwem0tLjcxNyAxLjQ0MmguNzE4YzIuMTM2IDAgMi4zODkuMDA3IDMuMjMyLjA0Ni43OC4wMzUgMS4yMDQuMTY2IDEuNDg2LjI3NS4zNzMuMTQ1LjY0LjMxOS45Mi41OTlzLjQ1My41NDYuNTk4LjkyYy4xMS4yODEuMjQuNzA1LjI3NSAxLjQ4NS4wMzkuODQzLjA0NyAxLjA5Ni4wNDcgMy4yMzFzLS4wMDggMi4zODktLjA0NyAzLjIzMmMtLjAzNS43OC0uMTY2IDEuMjAzLS4yNzUgMS40ODVhMi41IDIuNSAwIDAgMS0uNTk5LjkxOWMtLjI4LjI4LS41NDYuNDUzLS45Mi41OTgtLjI4LjExLS43MDQuMjQtMS40ODUuMjc2LS44NDMuMDM4LTEuMDk2LjA0Ny0zLjIzMi4wNDdzLTIuMzktLjAwOS0zLjIzMy0uMDQ3Yy0uNzgtLjAzNi0xLjIwMy0uMTY2LTEuNDg1LS4yNzZhMi41IDIuNSAwIDAgMS0uOTItLjU5OCAyLjUgMi41IDAgMCAxLS42LS45MmMtLjEwOS0uMjgxLS4yNC0uNzA1LS4yNzUtMS40ODUtLjAzOC0uODQzLS4wNDYtMS4wOTYtLjA0Ni0zLjIzM3MuMDA4LTIuMzg4LjA0Ni0zLjIzMWMuMDM2LS43OC4xNjYtMS4yMDQuMjc2LTEuNDg2LjE0NS0uMzczLjMxOS0uNjQuNTk5LS45MnMuNTQ2LS40NTMuOTItLjU5OGMuMjgyLS4xMS43MDUtLjI0IDEuNDg1LS4yNzYuNzM4LS4wMzQgMS4wMjQtLjA0NCAyLjUxNS0uMDQ1em00Ljk4OCAxLjMyOGEuOTYuOTYgMCAxIDAgMCAxLjkyLjk2Ljk2IDAgMCAwIDAtMS45Mm0tNC4yNyAxLjEyMmE0LjEwOSA0LjEwOSAwIDEgMCAwIDguMjE3IDQuMTA5IDQuMTA5IDAgMCAwIDAtOC4yMTdtMCAxLjQ0MWEyLjY2NyAyLjY2NyAwIDEgMSAwIDUuMzM0IDIuNjY3IDIuNjY3IDAgMCAxIDAtNS4zMzQiLz4KPC9zdmc+); -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktaW5zdGFncmFtIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik04IDBDNS44MjkgMCA1LjU1Ni4wMSA0LjcwMy4wNDggMy44NS4wODggMy4yNjkuMjIyIDIuNzYuNDJhMy45IDMuOSAwIDAgMC0xLjQxNy45MjNBMy45IDMuOSAwIDAgMCAuNDIgMi43NkMuMjIyIDMuMjY4LjA4NyAzLjg1LjA0OCA0LjcuMDEgNS41NTUgMCA1LjgyNyAwIDguMDAxYzAgMi4xNzIuMDEgMi40NDQuMDQ4IDMuMjk3LjA0Ljg1Mi4xNzQgMS40MzMuMzcyIDEuOTQyLjIwNS41MjYuNDc4Ljk3Mi45MjMgMS40MTcuNDQ0LjQ0NS44OS43MTkgMS40MTYuOTIzLjUxLjE5OCAxLjA5LjMzMyAxLjk0Mi4zNzJDNS41NTUgMTUuOTkgNS44MjcgMTYgOCAxNnMyLjQ0NC0uMDEgMy4yOTgtLjA0OGMuODUxLS4wNCAxLjQzNC0uMTc0IDEuOTQzLS4zNzJhMy45IDMuOSAwIDAgMCAxLjQxNi0uOTIzYy40NDUtLjQ0NS43MTgtLjg5MS45MjMtMS40MTcuMTk3LS41MDkuMzMyLTEuMDkuMzcyLTEuOTQyQzE1Ljk5IDEwLjQ0NSAxNiAxMC4xNzMgMTYgOHMtLjAxLTIuNDQ1LS4wNDgtMy4yOTljLS4wNC0uODUxLS4xNzUtMS40MzMtLjM3Mi0xLjk0MWEzLjkgMy45IDAgMCAwLS45MjMtMS40MTdBMy45IDMuOSAwIDAgMCAxMy4yNC40MmMtLjUxLS4xOTgtMS4wOTItLjMzMy0xLjk0My0uMzcyQzEwLjQ0My4wMSAxMC4xNzIgMCA3Ljk5OCAwem0tLjcxNyAxLjQ0MmguNzE4YzIuMTM2IDAgMi4zODkuMDA3IDMuMjMyLjA0Ni43OC4wMzUgMS4yMDQuMTY2IDEuNDg2LjI3NS4zNzMuMTQ1LjY0LjMxOS45Mi41OTlzLjQ1My41NDYuNTk4LjkyYy4xMS4yODEuMjQuNzA1LjI3NSAxLjQ4NS4wMzkuODQzLjA0NyAxLjA5Ni4wNDcgMy4yMzFzLS4wMDggMi4zODktLjA0NyAzLjIzMmMtLjAzNS43OC0uMTY2IDEuMjAzLS4yNzUgMS40ODVhMi41IDIuNSAwIDAgMS0uNTk5LjkxOWMtLjI4LjI4LS41NDYuNDUzLS45Mi41OTgtLjI4LjExLS43MDQuMjQtMS40ODUuMjc2LS44NDMuMDM4LTEuMDk2LjA0Ny0zLjIzMi4wNDdzLTIuMzktLjAwOS0zLjIzMy0uMDQ3Yy0uNzgtLjAzNi0xLjIwMy0uMTY2LTEuNDg1LS4yNzZhMi41IDIuNSAwIDAgMS0uOTItLjU5OCAyLjUgMi41IDAgMCAxLS42LS45MmMtLjEwOS0uMjgxLS4yNC0uNzA1LS4yNzUtMS40ODUtLjAzOC0uODQzLS4wNDYtMS4wOTYtLjA0Ni0zLjIzM3MuMDA4LTIuMzg4LjA0Ni0zLjIzMWMuMDM2LS43OC4xNjYtMS4yMDQuMjc2LTEuNDg2LjE0NS0uMzczLjMxOS0uNjQuNTk5LS45MnMuNTQ2LS40NTMuOTItLjU5OGMuMjgyLS4xMS43MDUtLjI0IDEuNDg1LS4yNzYuNzM4LS4wMzQgMS4wMjQtLjA0NCAyLjUxNS0uMDQ1em00Ljk4OCAxLjMyOGEuOTYuOTYgMCAxIDAgMCAxLjkyLjk2Ljk2IDAgMCAwIDAtMS45Mm0tNC4yNyAxLjEyMmE0LjEwOSA0LjEwOSAwIDEgMCAwIDguMjE3IDQuMTA5IDQuMTA5IDAgMCAwIDAtOC4yMTdtMCAxLjQ0MWEyLjY2NyAyLjY2NyAwIDEgMSAwIDUuMzM0IDIuNjY3IDIuNjY3IDAgMCAxIDAtNS4zMzQiLz4KPC9zdmc+); }
.social-icon--facebook { mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZmFjZWJvb2siIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTE2IDguMDQ5YzAtNC40NDYtMy41ODItOC4wNS04LTguMDVDMy41OCAwLS4wMDIgMy42MDMtLjAwMiA4LjA1YzAgNC4wMTcgMi45MjYgNy4zNDcgNi43NSA3Ljk1MXYtNS42MjVoLTIuMDNWOC4wNUg2Ljc1VjYuMjc1YzAtMi4wMTcgMS4xOTUtMy4xMzEgMy4wMjItMy4xMzEuODc2IDAgMS43OTEuMTU3IDEuNzkxLjE1N3YxLjk4aC0xLjAwOWMtLjk5MyAwLTEuMzAzLjYyMS0xLjMwMyAxLjI1OHYxLjUxaDIuMjE4bC0uMzU0IDIuMzI2SDkuMjVWMTZjMy44MjQtLjYwNCA2Ljc1LTMuOTM0IDYuNzUtNy45NTEiLz4KPC9zdmc+); -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktZmFjZWJvb2siIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTE2IDguMDQ5YzAtNC40NDYtMy41ODItOC4wNS04LTguMDVDMy41OCAwLS4wMDIgMy42MDMtLjAwMiA4LjA1YzAgNC4wMTcgMi45MjYgNy4zNDcgNi43NSA3Ljk1MXYtNS42MjVoLTIuMDNWOC4wNUg2Ljc1VjYuMjc1YzAtMi4wMTcgMS4xOTUtMy4xMzEgMy4wMjItMy4xMzEuODc2IDAgMS43OTEuMTU3IDEuNzkxLjE1N3YxLjk4aC0xLjAwOWMtLjk5MyAwLTEuMzAzLjYyMS0xLjMwMyAxLjI1OHYxLjUxaDIuMjE4bC0uMzU0IDIuMzI2SDkuMjVWMTZjMy44MjQtLjYwNCA2Ljc1LTMuOTM0IDYuNzUtNy45NTEiLz4KPC9zdmc+); }
.social-icon--tiktok { mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktdGlrdG9rIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik05IDBoMS45OGMuMTQ0LjcxNS41NCAxLjYxNyAxLjIzNSAyLjUxMkMxMi44OTUgMy4zODkgMTMuNzk3IDQgMTUgNHYyYy0xLjc1MyAwLTMuMDctLjgxNC00LTEuODI5VjExYTUgNSAwIDEgMS01LTV2MmEzIDMgMCAxIDAgMyAzeiIvPgo8L3N2Zz4=); -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktdGlrdG9rIiB2aWV3Qm94PSIwIDAgMTYgMTYiPgogIDxwYXRoIGQ9Ik05IDBoMS45OGMuMTQ0LjcxNS41NCAxLjYxNyAxLjIzNSAyLjUxMkMxMi44OTUgMy4zODkgMTMuNzk3IDQgMTUgNHYyYy0xLjc1MyAwLTMuMDctLjgxNC00LTEuODI5VjExYTUgNSAwIDEgMS01LTV2MmEzIDMgMCAxIDAgMyAzeiIvPgo8L3N2Zz4=); }
/* Wiersz kontaktowy z małą ikoną (etap 17F.5, zagęszczone 17F.6) */
.site-footer__contact-row { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .85); font-size: .92em; font-weight: 600; margin: 0 0 8px; min-height: 0; line-height: 1.3; }
.site-footer__contact-row span { min-width: 0; }
.site-footer__contact-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-orange); }
a.site-footer__contact-row { width: fit-content; }
.site-footer__col h3 {
font-family: var(--font-body);
font-weight: 800;
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-white);
padding-bottom: 8px;
margin-bottom: 10px;
border-bottom: var(--border-width) solid rgba(255, 255, 255, .22);
}
.site-footer__col p { color: rgba(255, 255, 255, .82); font-size: .92em; }
.site-footer__col a {
display: flex;
align-items: center;
width: fit-content;
min-height: 36px;
color: rgba(255, 255, 255, .9);
font-size: .96em;
font-weight: 600;
margin: 0 0 -4px -2px;
padding: 0 2px;
border-bottom: var(--border-width) solid transparent;
transition: color .15s var(--ease), border-color .15s var(--ease);
}
.site-footer__col a:hover, .site-footer__col a:focus-visible {
color: var(--color-white);
border-color: var(--color-fuchsia);
}
.site-footer__col a.site-footer__contact-row:hover, .site-footer__col a.site-footer__contact-row:focus-visible { border-color: transparent; text-decoration: underline; }
.site-footer__bottom { padding-block: 16px; font-size: 12px; color: rgba(255, 255, 255, .65); }
/* 3 RÓWNOWAŻNE kolumny — ta sama szerokość dla wszystkich trzech,
odstępy zmniejszone etapem 17F.6. */
.site-footer__columns { display: grid; gap: 28px; }
@media (min-width: 768px) { .site-footer__columns { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (min-width: 1024px) { .site-footer__columns { gap: 40px; } }
/* =========================================================
/ZAPISZ-SIĘ — formularz zgłoszeniowy (etap 15, DESIGN.md §13)
Editorialowa kontynuacja homepage: krótki hero (skala H2, bez
zdjęcia), formularz jako biała, uniesiona karta na jasnym tle,
pola pogrupowane w 4 fieldsety. Token --color-error zdefiniowany
w głównym :root na górze pliku.
========================================================= */
.apply-hero { background: var(--color-bg); padding-top: 56px; padding-bottom: var(--section-space-mobile); }
@media (min-width: 768px) { .apply-hero { padding-bottom: var(--section-space-tablet); } }
.apply-hero__inner { max-width: var(--container-text); }
.apply-hero__heading {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-h2);
line-height: 1.02;
letter-spacing: -.01em;
color: var(--color-ink);
margin-block: 16px 20px;
}
.apply-hero__text { font-size: var(--fs-lead); line-height: 1.55; color: var(--color-text); max-width: 56ch; }
/* Krótka linia lokalizacji pod leadem hero /szkolenia/ (etap 18) —
zapisz-sie/co-wybrac nie mają tego elementu, klasa tam nieużywana. */
.apply-hero__meta { font-size: .88em; font-weight: 700; color: var(--color-muted); margin-top: 14px; }
/* Hero /szkolenia/ ze zdjęciem (etap 18.4) — grid-template-areas
zamiast .subpage-hero (klasy/obrona), bo tu zdjęcie ma zajmować
ok. 40-48% (nie 50/50) I kolejność mobile musi wstawić zdjęcie
MIĘDZY tekst a CTA, nie tylko obok tekstu — stąd CTA jako osobny
obszar grida, nie część .szkolenia-hero__copy. Nietknięte .apply-hero
i .apply-hero__inner zostają używane bez zmian przez /zapisz-sie/. */
.szkolenia-hero__grid {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "copy" "photo" "actions";
gap: 28px;
align-items: center;
}
.szkolenia-hero__copy { grid-area: copy; }
.szkolenia-hero__photo {
grid-area: photo;
margin: 0;
aspect-ratio: 3 / 4;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-elevated);
}
.szkolenia-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.szkolenia-hero__actions { grid-area: actions; margin-top: 0; }
@media (min-width: 1024px) {
.szkolenia-hero__grid {
grid-template-columns: 1.25fr 1fr;
grid-template-areas: "copy photo" "actions photo";
gap: 56px;
}
}
/* /szkolenia/ placeholder (etap 17F.6A) — dwa CTA pod krótkim tekstem,
reużywa istniejący .btn i prosty wzorzec tekstowego linku ze strzałką
już użyty gdzie indziej (np. .groomer-teaser__link). */
.apply-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.apply-hero__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--color-ink); border-bottom: var(--border-width) solid var(--color-ink); transition: color .15s var(--ease); }
.apply-hero__link svg { width: 18px; height: 18px; transition: transform .18s var(--ease); }
.apply-hero__link:hover, .apply-hero__link:focus-visible { color: var(--color-fuchsia); border-color: var(--color-fuchsia); }
.apply-hero__link:hover svg, .apply-hero__link:focus-visible svg { transform: translateX(3px); }
.apply-form-section { background: var(--color-bg); padding-top: 0; padding-bottom: var(--section-space-mobile); }
@media (min-width: 768px) { .apply-form-section { padding-bottom: var(--section-space-tablet); } }
@media (min-width: 1024px) { .apply-form-section { padding-bottom: var(--section-space-desktop); } }
.apply-form-section__inner { max-width: 760px; }
/* Podsumowanie wyboru z /cennik-szkolen (etap 24) — lekki, jasny box nad
formularzem (nie kolejna pełna .form-owa karta), fuksjowy tint spina
wizualnie z .price-option/.pricing-summary na samym cenniku. */
.pricing-recap { background: var(--color-fuchsia-soft); border-radius: var(--radius-sm); padding: 20px 24px; margin-bottom: 24px; }
.pricing-recap .eyebrow { margin-bottom: 6px; }
.pricing-recap__variant { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--color-ink); margin-bottom: 6px; }
.pricing-recap__addon { font-size: .92em; color: var(--color-text); margin-bottom: 4px; }
.pricing-recap__total { margin-bottom: 10px; }
.pricing-recap__total strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.55rem); color: var(--color-fuchsia); }
.pricing-recap__note { font-size: .88em; color: var(--color-text); }
.form, .quiz-card {
background: var(--color-surface);
border: var(--border-width) solid var(--color-line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-elevated);
padding: 28px 20px;
}
@media (min-width: 640px) { .form, .quiz-card { padding: 40px; } }
@media (min-width: 1024px) { .form, .quiz-card { padding: 56px; } }
/* formularz kontaktowy w /co-wybrac żyje już wewnątrz .quiz-card —
zdejmujemy własny card-chrome .form, żeby nie powielać karty w karcie;
stylowanie pól (.form input itd.) działa dalej przez selektory potomne */
.quiz-card .form { background: none; border: none; box-shadow: none; padding: 0; }
/* honeypot antyspamowy (etap 17) — niewidoczny dla ludzi i czytników
ekranu (aria-hidden na wrapperze, poza kolejnością Tab), ale obecny w
DOM, więc naiwne boty wciąż go wypełniają */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__summary {
background: var(--color-error);
color: var(--color-white);
font-weight: 700;
font-size: 14px;
line-height: 1.4;
padding: 14px 18px;
border-radius: var(--radius-sm);
margin-bottom: 28px;
}
fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.form__group { margin-bottom: 40px; }
.form__legend {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.15rem;
color: var(--color-ink);
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: var(--border-width) solid var(--color-line);
width: 100%;
}
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
/* etap 17C: pola warunkowe (#f-duration-wrap, #f-previous-work-wrap) łączą
class="field" z atrybutem [hidden] — bez tego override .field { display:
flex } (reguła autorska) wygrywa z domyślną regułą UA [hidden]{display:
none}, bo reguły autorskie zawsze biją UA niezależnie od specyficzności.
Ten sam wzorzec błędu co .field__error[hidden] wyżej w pliku (etap 15). */
.field[hidden] { display: none; }
.field:last-child { margin-bottom: 0; }
.field > label, .field > legend {
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
color: var(--color-ink);
}
.field__optional { font-weight: 500; color: var(--color-muted); }
.field-row { display: grid; gap: 20px; margin-bottom: 22px; }
.field-row .field { margin-bottom: 0; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
/* Etap 9E.4 §16/§17/§18/§19 polecenia - GLOBAL FORM POLISH. Panel pages
(cele/psy/dyspozycyjność/notatki/ustaw-hasło i in.) w większości NIE
opakowują swoich pól w klasę `.form` (używają wyłącznie `.field` jako
wrappera na pojedyncze pole) - dlatego runtime pokazał "zbyt kanciaste"
pola: input/textarea/select bez `.form` w drzewie spadały na goły,
nieostylowany wygląd przeglądarki. Selektor rozszerzony o `.field` jako
RÓWNORZĘDNY kontekst (nie zamiennik) - te same miękkie zaokrąglenia
(--radius-sm, 14px - już w duchu poleconych 14-18px) i wygląd wszędzie,
bez zmiany istniejącego layoutu/rozmiarów tam, gdzie `.form` już działało. */
.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form input[type="time"],
.form input[type="password"],
.form input[type="date"],
.form select,
.form textarea,
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="time"],
.field input[type="password"],
.field input[type="date"],
.field select,
.field textarea,
input.panel-control[type="text"],
input.panel-control[type="tel"],
input.panel-control[type="email"],
input.panel-control[type="time"],
input.panel-control[type="password"],
input.panel-control[type="date"],
select.panel-control,
textarea.panel-control {
min-height: 48px;
padding: 12px 16px;
background: var(--color-surface);
color: var(--color-ink);
border: var(--border-width) solid var(--color-line);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 16px;
width: 100%;
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form textarea, .field textarea, textarea.panel-control { min-height: 120px; padding-top: 14px; resize: vertical; }
.form select, .field select, select.panel-control {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23222126' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 18px;
padding-right: 44px;
}
.form input::placeholder, .form textarea::placeholder,
.field input::placeholder, .field textarea::placeholder,
input.panel-control::placeholder, textarea.panel-control::placeholder { color: var(--color-muted); opacity: 1; }
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
input.panel-control:focus-visible,
select.panel-control:focus-visible,
textarea.panel-control:focus-visible {
outline: none;
border-color: var(--color-fuchsia);
box-shadow: 0 0 0 4px var(--color-fuchsia-soft);
}
.radio-group { display: flex; flex-direction: column; gap: 4px; }
.radio-group--inline { flex-direction: row; flex-wrap: wrap; gap: 8px 28px; }
.radio-option {
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
color: var(--color-text);
cursor: pointer;
}
.radio-option input[type="radio"] {
width: 20px;
height: 20px;
flex-shrink: 0;
accent-color: var(--color-fuchsia);
}
.radio-option input[type="radio"]:focus-visible { outline: 3px solid var(--color-fuchsia); outline-offset: 3px; }
.field--invalid input[type="text"],
.field--invalid input[type="tel"],
.field--invalid input[type="email"],
.field--invalid input[type="time"],
.field--invalid select,
.field--invalid textarea {
border-color: var(--color-error);
}
.field__error {
display: flex;
align-items: center;
gap: 6px;
color: var(--color-error);
font-size: 13px;
font-weight: 600;
}
.field__error[hidden] { display: none; }
.field__error-icon { width: 16px; height: 16px; flex-shrink: 0; }
.apply-form__note { font-size: 14px; line-height: 1.5; color: var(--color-muted); margin-bottom: 24px; }
.apply-form__privacy { font-size: 13px; line-height: 1.5; color: var(--color-muted); margin: -12px 0 24px; }
.apply-form__submit { width: 100%; justify-content: center; }
@media (min-width: 480px) { .apply-form__submit { width: auto; } }
.apply-success {
background: var(--color-surface);
border: var(--border-width) solid var(--color-line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-elevated);
padding: 48px 28px;
text-align: center;
}
.apply-success h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: var(--color-ink);
margin-bottom: 12px;
}
.apply-success p { color: var(--color-text); font-size: 1.05rem; max-width: 46ch; margin-inline: auto; }
/* =========================================================
/CO-WYBRAC — krótka ścieżka decyzyjna (etap 16)
Jeden krok na ekran, karta w stylu /zapisz-sie (.quiz-card dzieli
card-chrome z .form, patrz wyżej). Odpowiedzi jako duże karty radio
(.answer-card) — prawdziwe kontrolki formularza, nie div-y.
========================================================= */
.quiz-hero { background: var(--color-bg); padding-top: 56px; padding-bottom: 40px; }
.quiz-hero__inner { max-width: var(--container-text); }
.quiz-hero__heading {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-h2);
line-height: 1.02;
letter-spacing: -.01em;
color: var(--color-ink);
margin-block: 16px 20px;
}
.quiz-hero__text { font-size: var(--fs-lead); line-height: 1.55; color: var(--color-text); max-width: 56ch; }
.quiz-hero__note { margin-top: 10px; font-size: 14px; color: var(--color-muted); max-width: 56ch; }
.quiz-section { background: var(--color-bg); padding-top: 0; padding-bottom: var(--section-space-mobile); }
@media (min-width: 768px) { .quiz-section { padding-bottom: var(--section-space-tablet); } }
@media (min-width: 1024px) { .quiz-section { padding-bottom: var(--section-space-desktop); } }
.quiz-section__inner { max-width: 760px; }
.quiz-noscript { background: var(--color-surface-alt); border-radius: var(--radius-sm); padding: 16px 20px; margin-bottom: 24px; font-size: 14px; color: var(--color-text); }
.quiz-noscript a { font-weight: 700; color: var(--color-ink); text-decoration: underline; }
.quiz-progress {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: 24px;
min-height: 1em;
}
/* nadpisanie globalnego "section { padding-block: var(--section-pad) }"
— kroki quizu to zagnieżdżone stany UI wewnątrz .quiz-card, nie
sekcje strony, więc nie mają dostawać sekcyjnego odstępu */
.quiz-step { padding-block: 0; }
.quiz-step__question {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
line-height: 1.15;
color: var(--color-ink);
}
.answer-list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.answer-card {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
background: var(--color-surface-alt);
border: var(--border-width) solid var(--color-line);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.answer-card:hover { border-color: var(--color-fuchsia); background: var(--color-surface); }
.answer-card:has(input:checked) { border-color: var(--color-fuchsia); background: var(--color-fuchsia-soft); }
.answer-card input[type="radio"] {
width: 22px;
height: 22px;
flex-shrink: 0;
margin-top: 2px;
accent-color: var(--color-fuchsia);
}
.answer-card input[type="radio"]:focus-visible { outline: 3px solid var(--color-fuchsia); outline-offset: 3px; }
.answer-card__body { display: flex; flex-direction: column; gap: 4px; }
.answer-card__title { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--color-ink); line-height: 1.35; }
.answer-card__desc { font-size: 14px; color: var(--color-text); line-height: 1.45; }
.quiz-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.quiz-nav__back {
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
color: var(--color-muted);
}
.quiz-nav__back:hover, .quiz-nav__back:focus-visible { color: var(--color-ink); }
.quiz-result__heading {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.8rem, 3.2vw, 2.6rem);
color: var(--color-ink);
margin-block: 6px 16px;
}
.quiz-result__text { font-size: 1.05rem; line-height: 1.55; color: var(--color-text); max-width: 60ch; margin-bottom: 16px; }
.quiz-result__disclaimer { font-size: 13px; color: var(--color-muted); max-width: 60ch; margin-bottom: 20px; }
.quiz-result__change { margin-bottom: 4px; }
.quiz-decision { margin-top: 32px; padding-top: 28px; border-top: var(--border-width) solid var(--color-line); }
.quiz-decision__question {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
color: var(--color-ink);
margin-bottom: 8px;
}
.quiz-decision__note { font-size: 14px; line-height: 1.5; color: var(--color-muted); margin-bottom: 20px; max-width: 56ch; }
.quiz-decision__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.quiz-decision__no {
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
color: var(--color-muted);
text-decoration: underline;
text-underline-offset: 3px;
}
.quiz-decision__no:hover, .quiz-decision__no:focus-visible { color: var(--color-ink); }
.quiz-declined { margin-top: 32px; padding-top: 28px; border-top: var(--border-width) solid var(--color-line); }
.quiz-declined p { color: var(--color-text); margin-bottom: 14px; }
.quiz-declined__link {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
font-weight: 700;
color: var(--color-ink);
}
.quiz-declined__link svg { width: 16px; height: 16px; transition: transform .18s var(--ease); }
.quiz-declined__link:hover, .quiz-declined__link:focus-visible { color: var(--color-fuchsia); }
.quiz-declined__link:hover svg, .quiz-declined__link:focus-visible svg { transform: translateX(3px); }
.quiz-success h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: var(--color-ink);
margin-bottom: 12px;
}
.quiz-success p { color: var(--color-text); font-size: 1.05rem; max-width: 52ch; }
/* =========================================================
/CENNIK-SZKOLEN — premium redesign (etap 26)
Wyłącznie warstwa wizualna/layout - JS (script.js, blok
"/CENNIK-SZKOLEN") NIETKNIĘTY, wszystkie ID/klasy poniżej istnieją
dokładnie tam, gdzie JS ich szuka. Kierunek: dużo bieli, cienkie
obrysy zamiast wypełnień --color-surface-alt (dawny "szary na
szarym"), fuksja jako jedyny mocny akcent, premium przez typografię/
proporcje/światło, nie przez nowe kolory czy ciężkie cienie. Zdjęcia
(assets/cennik/) użyte 1:1, bez modyfikacji.
========================================================= */
/* HERO — ≥768px (tablet+desktop) ZAMROŻONY od etapu 34/35/36/37
(polecenie: "nie zmieniaj ani jednej reguły wizualnej"). .pricing-
hero__photo (background z etapu 30, oparty na cennik-hero-dog-mobile
.webp/-desktop.webp) i jego reguły @media (min-width:768px)/
(min-width:1024px) niżej są bit-w-bit takie same jak przed etapem 37.
Telefon (≤767px) — etap 37, PIĄTA i ostateczna zmiana koncepcji:
etap 36 (CSS-owe kadrowanie samego cennik-hero.jpg) matematycznie
potwierdził, że przy tym zdjęciu oko psa zawsze zaczyna się przed
końcem 62%-owej kolumny tekstu, niezależnie od doboru background-
size - dlatego zamiast dalszego dobierania CSS, powstał DEDYKOWANY,
raz wygenerowany asset assets/cennik/cennik-hero-mobile-final.webp
(860×1200, programowo skomponowany z tego samego, niezmienionego
cennik-hero.jpg - pies dosunięty w prawo + naturalne tło stopione w
jedną kompozycję przez piórkowanie (feather) lewej/górnej/dolnej
krawędzi, tło canvasa próbkowanym kolorem #F8F3EF). Bezpieczna strefa
dla tekstu (0-500px z 860 bez sierści/oka/nosa/ucha, zweryfikowana
programowo na gotowym pliku) jest już zaszyta w SAMYM assetcie -
CSS wyłącznie go pokazuje: `background-image` wprost na .pricing-hero
(nie .pricing-hero__photo - ten div zostaje wyłącznie mechanizmem
≥768px, nietkniętym), `background-size:100% auto` (skalowanie po
szerokości, zero dodatkowego CSS-owego kadrowania/pozycjonowania).
Nad zdjęciem: .pricing-hero::before (biała/kremowa mgła, ten sam
sampled kolor) i .pricing-hero::after (wąska strefa backdrop-filter
:blur, zamaskowana gradientową maską po obu krawędziach - kończy się
bezpiecznie przed sierścią/okiem). Tekst (.pricing-hero__inner) ma
z-index wyższy niż obie warstwy. Reguły @media (max-width:767px)
niżej są jedynym miejscem definiującym ten mechanizm. */
.pricing-hero { position: relative; overflow: hidden; isolation: isolate; min-height: 540px; display: flex; align-items: center; background: var(--color-bg); }
.pricing-hero__photo { display: none; }
.pricing-hero__inner { position: relative; z-index: 2; width: 100%; padding-block: 32px; }
.pricing-hero__heading-col { margin-bottom: 16px; }
.pricing-hero__heading {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.6rem, 6.4vw, 2rem);
line-height: 1.08;
letter-spacing: -.01em;
color: var(--color-ink);
margin-block: 8px 0;
}
.pricing-hero__text { font-size: .88rem; line-height: 1.48; color: var(--color-text); }
.pricing-hero__text + .pricing-hero__text { margin-top: 8px; }
@media (min-width: 480px) {
.pricing-hero__heading { font-size: clamp(1.9rem, 6vw, 2.3rem); }
.pricing-hero__text { font-size: .95rem; }
}
/* Telefon (≤767px), etap 38 — cofnięcie koncepcji "safe zone" z etapu
37 (wymusiła zbyt małego psa, ocenione jako wyglądające jak doklejony
fragment). Powrót do oryginalnego assets/cennik/cennik-hero.jpg jako
prawdziwego background-image CAŁEGO .pricing-hero, tym razem z
background-size:cover (dozwolony kontrolowany crop tułowia/boku/tła,
NIE oczu/nosa/pyska/uszu) - pies renderuje się znacznie większy.
Mgła (::before) MOŻE teraz zachodzić na sierść (jawnie dozwolone) -
zapewnia kontrast tekstu bez wymogu czystego "pustego" pasa pod nim.
Blur (::after) to wąska, zamaskowana na obu krawędziach strefa
ustawiona tak, by nie dotykać oka/pyska. */
@media (max-width: 767px) {
.pricing-hero {
min-height: 460px;
background-color: #F8F3EF;
background-image: url("assets/cennik/cennik-hero.jpg");
background-repeat: no-repeat;
background-position: 78% center;
background-size: cover;
}
.pricing-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(248, 243, 239, .97) 0%,
rgba(248, 243, 239, .93) 28%,
rgba(248, 243, 239, .8) 43%,
rgba(248, 243, 239, .48) 54%,
rgba(248, 243, 239, .22) 63%,
rgba(248, 243, 239, .06) 72%,
rgba(248, 243, 239, 0) 80%
);
}
.pricing-hero::after {
content: "";
position: absolute;
inset: 0;
left: 53%;
width: 18%;
z-index: 1;
pointer-events: none;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 35%, black 65%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 35%, black 65%, transparent 100%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.pricing-hero__inner { max-width: 62%; margin-inline: 0; }
}
@media (min-width: 768px) {
.pricing-hero { min-height: 520px; }
.pricing-hero__photo {
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 100%;
width: 42%;
z-index: 0;
pointer-events: none;
background-image: url("assets/cennik/cennik-hero-dog-mobile.webp");
background-repeat: no-repeat;
background-position: right bottom;
background-size: contain;
}
.pricing-hero__inner { padding-block: 40px; }
.pricing-hero__grid { max-width: 54%; }
.pricing-hero__heading { font-size: clamp(2.1rem, 4.4vw, 2.5rem); }
.pricing-hero__text { font-size: 1rem; }
}
/* Desktop od 1024px — prawdziwy grid 52%/48% WEWNĄTRZ strefy tekstowej
(H1 po lewej, lead bardziej z boku/środka, nie pod H1), pies jako
niezależna warstwa tła po prawej, poza tym gridem - patrz sekcja 3/5
polecenia. Od tej szerokości używamy kadru desktopowego (więcej
widocznego tułowia/kontekstu, nie tylko blisko twarzy). */
@media (min-width: 1024px) {
.pricing-hero { min-height: 560px; }
.pricing-hero__inner { padding-block: 0; }
.pricing-hero__photo {
/* Desktop (zaakceptowany, etap 30) ma WŁASNY, pełny mechanizm
pozycjonowania niezależny od reguły bazowej mobile/tablet z
etapu 32 (bottom:0/height:100%/contain) - stąd jawny reset
top/transform/bottom/height/background-size tutaj, żeby zmiana
reguły bazowej dla mobile nie zepsuła tego, co tu już działa. */
top: 50%;
bottom: auto;
height: auto;
transform: translateY(-50%);
width: 40%;
aspect-ratio: 1000 / 1023;
background-image:
linear-gradient(90deg, var(--color-bg) 0%, rgba(241, 241, 243, 0) 32%),
linear-gradient(180deg, var(--color-bg) 0%, rgba(241, 241, 243, 0) 18%, rgba(241, 241, 243, 0) 82%, var(--color-bg) 100%),
url("assets/cennik/cennik-hero-dog-desktop.webp");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: center, center, center;
background-size: 100% 100%, 100% 100%, cover;
}
.pricing-hero__grid {
max-width: 58%;
display: grid;
grid-template-columns: 52% 48%;
column-gap: 24px;
align-items: center;
}
.pricing-hero__heading-col { margin-bottom: 0; }
.pricing-hero__heading { font-size: var(--fs-h2); margin-block: 14px 0; }
.pricing-hero__lead-col { max-width: 300px; }
.pricing-hero__text { font-size: .95rem; line-height: 1.55; }
.pricing-hero__text + .pricing-hero__text { margin-top: 12px; }
}
@media (min-width: 1280px) {
.pricing-hero { min-height: 600px; }
.pricing-hero__photo { width: 38%; }
.pricing-hero__grid { max-width: 60%; }
.pricing-hero__lead-col { max-width: 340px; }
.pricing-hero__text { font-size: var(--fs-lead); }
}
.pricing-section { background: var(--color-surface); padding-top: var(--section-space-mobile); padding-bottom: var(--section-space-mobile); }
@media (min-width: 768px) { .pricing-section { padding-top: var(--section-space-tablet); padding-bottom: var(--section-space-tablet); } }
@media (min-width: 1024px) { .pricing-section { padding-top: var(--section-space-desktop); padding-bottom: var(--section-space-desktop); } }
.pricing-section__inner { max-width: 960px; }
/* Wprowadzenie przed wyborem formy pracy (etap 28) — zwykły tekst
zgodny z typografią homepage (ten sam przepis co .work__lead), nie
nagłówek/alert/box. */
.pricing-choices__intro { font-size: var(--fs-lead); line-height: 1.55; color: var(--color-text); margin-bottom: 24px; }
/* KROK 1 — trzy duże, numerowane karty (jak .work-tile na homepage:
num + tytuł + opis), zamiast klasycznego widocznego radia. Input
zostaje prawdziwym, dostępnym radiem (klawiatura, focus-visible),
tylko wizualnie ukryty - stan aktywny idzie przez :has(input:checked)
na całej karcie, czytelny bez hovera. */
.pricing-choices { display: grid; gap: 20px; margin-top: 8px; }
@media (min-width: 1024px) { .pricing-choices { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.pricing-choice {
position: relative;
display: block;
background: var(--color-surface);
border: var(--border-width) solid var(--color-line);
border-radius: var(--radius-md);
padding: 32px 28px;
cursor: pointer;
transition: border-color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.pricing-choice:hover { border-color: var(--color-fuchsia); }
.pricing-choice:has(input:checked) { border-color: var(--color-fuchsia); background: var(--color-fuchsia-soft); box-shadow: 0 14px 34px rgba(213, 45, 139, .10); }
.pricing-choice:has(input:focus-visible) { outline: 3px solid var(--color-fuchsia); outline-offset: 3px; }
.pricing-choice input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pricing-choice__num {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.2rem, 3.5vw, 3rem);
color: var(--color-line);
line-height: 1;
margin-bottom: 18px;
transition: color .18s var(--ease);
}
.pricing-choice:has(input:checked) .pricing-choice__num { color: var(--color-fuchsia); }
.pricing-choice__title { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--color-ink); margin-bottom: 10px; }
.pricing-choice__desc { display: block; font-size: .92em; line-height: 1.5; color: var(--color-text); }
/* KROK 2 — grupy wariantów, jedna na formę pracy. Ukrywane w runtime
przez script.js (hidden), widoczne wszystkie w bazowym HTML. */
.pricing-group { margin-top: 64px; padding-top: 44px; border-top: var(--border-width) solid var(--color-line); }
/* Zabezpieczenie jak przy .field[hidden]/.field__error[hidden] wyżej w
tym pliku - żadna reguła tutaj nie ustawia własnego "display" na
.pricing-group, więc [hidden] z UA stylesheet powinno wystarczyć,
ale jawna reguła to gwarantuje niezależnie od kolejności/specyfiki
(etap 32, stan początkowy cennika musi być ukryty w samym HTML). */
.pricing-group[hidden] { display: none; }
.pricing-group .eyebrow { margin-bottom: 10px; }
.pricing-group__heading {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.7rem, 2.8vw, 2.3rem);
color: var(--color-ink);
margin-bottom: 4px;
}
.price-options { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 640px) { .price-options { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
.price-option {
display: flex;
flex-direction: column;
gap: 10px;
padding: 28px 26px;
background: var(--color-surface);
border: var(--border-width) solid var(--color-line);
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.price-option:hover { border-color: var(--color-fuchsia); }
.price-option:has(input:checked) { border-color: var(--color-fuchsia); background: var(--color-fuchsia-soft); box-shadow: 0 12px 30px rgba(213, 45, 139, .10); }
.price-option__row { display: flex; align-items: center; gap: 12px; }
.price-option input[type="radio"] { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--color-fuchsia); }
.price-option input[type="radio"]:focus-visible { outline: 3px solid var(--color-fuchsia); outline-offset: 3px; }
.price-option__title { font-family: var(--font-body); font-weight: 700; font-size: 17px; color: var(--color-ink); }
.price-option__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-top: 2px; }
.price-option__old { font-size: .85em; font-weight: 600; color: var(--color-muted); }
.price-option__current {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.9rem, 3.2vw, 2.5rem);
color: var(--color-ink);
transition: color .15s var(--ease);
}
.price-option:has(input:checked) .price-option__current { color: var(--color-fuchsia); }
/* .price-option__save (badge "Oszczędzasz X zł") usunięty etapem 31 na
polecenie - regularPrice zostaje w PRICING (script.js) wyłącznie do
przekreślonej ceny standardowej powyżej. */
.pricing-note { font-size: .82em; line-height: 1.5; color: var(--color-muted); }
/* KROK 3 — prowadzenie: lekkie, bezwypełnieniowe pigułki (biel + cienki
obrys), nie ciężkie szare przyciski. */
.pricing-addon { margin-top: 64px; padding-top: 44px; border-top: var(--border-width) solid var(--color-line); }
.pricing-addon[hidden] { display: none; }
.pricing-addon .eyebrow { margin-bottom: 10px; }
.addon-options { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.addon-option {
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 12px 22px;
background: var(--color-surface);
border: var(--border-width) solid var(--color-line);
border-radius: var(--radius-pill);
cursor: pointer;
transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.addon-option:hover { border-color: var(--color-fuchsia); }
.addon-option:has(input:checked) { border-color: var(--color-fuchsia); background: var(--color-fuchsia-soft); }
.addon-option input[type="radio"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-fuchsia); }
.addon-option input[type="radio"]:focus-visible { outline: 3px solid var(--color-fuchsia); outline-offset: 3px; }
.addon-option__title { font-family: var(--font-body); font-weight: 700; font-size: .95em; color: var(--color-ink); }
.addon-option__price { font-family: var(--font-body); font-weight: 700; font-size: .85em; color: var(--color-muted); }
.addon-option:has(input:checked) .addon-option__price { color: var(--color-fuchsia); }
/* Delikatny fade/slide przy odsłonięciu kroku (etap 26, §14) - ten sam
wzorzec co .accordion__panel/faq-in, wyłączony pod reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
.pricing-group:not([hidden]),
.pricing-addon:not([hidden]),
.pricing-summary:not([hidden]) { animation: pricing-reveal .32s var(--ease); }
@keyframes pricing-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
/* PODSUMOWANIE — osobna, pełnoszeroka sekcja premium (nie wnętrze
#pricing-config), fuksjowy tint, duża cena, dyskretna grafika
dog-line.png w tle (nigdy nie zasłania tekstu/CTA - niski z-index,
niska opacity, position:absolute poza obszarem treści). */
.pricing-summary { background: var(--color-fuchsia-soft); padding-block: 56px; position: relative; overflow: hidden; }
.pricing-summary[hidden] { display: none; }
@media (min-width: 768px) { .pricing-summary { padding-block: 72px; } }
@media (min-width: 1024px) { .pricing-summary { padding-block: 96px; } }
.pricing-summary__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 768px) { .pricing-summary__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; } }
.pricing-summary__copy { max-width: 480px; }
.pricing-summary__variant {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.8rem, 3.2vw, 2.6rem);
color: var(--color-ink);
margin-block: 6px 10px;
line-height: 1.1;
}
.pricing-summary__addon { font-size: 1.05em; color: var(--color-text); }
.pricing-summary__price { flex-shrink: 0; }
@media (min-width: 768px) { .pricing-summary__price { text-align: right; } }
.pricing-summary__total-label { font-size: .95em; font-weight: 700; color: var(--color-text); margin-bottom: 2px; }
.pricing-summary__total { margin-bottom: 22px; }
.pricing-summary__total strong { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5.5vw, 4rem); color: var(--color-fuchsia); line-height: 1; }
.pricing-summary__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
@media (min-width: 768px) { .pricing-summary__actions { align-items: flex-end; } }
.pricing-summary__link { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; }
.pricing-summary__link:hover, .pricing-summary__link:focus-visible { color: var(--color-ink); }
.pricing-summary__dog {
position: absolute;
right: 6px;
bottom: 0;
width: 100px;
opacity: .14;
pointer-events: none;
z-index: 0;
}
@media (min-width: 768px) { .pricing-summary__dog { width: 160px; right: 16px; } }
@media (min-width: 1024px) { .pricing-summary__dog { width: 220px; right: 24px; } }
/* CO MASZ OPRÓCZ ZAJĘĆ — lekkie kolumny z ikonami zamiast ciężkich
kart. 1 kolumna mobile, 2x2 tablet, 4 z cienkimi separatorami od
1024px. */
.pricing-benefits { background: var(--color-surface); padding-block: var(--section-space-mobile); }
@media (min-width: 768px) { .pricing-benefits { padding-block: var(--section-space-tablet); } }
@media (min-width: 1024px) { .pricing-benefits { padding-block: var(--section-space-desktop); } }
.pricing-benefits__row { display: grid; gap: 36px; margin-top: 40px; }
@media (min-width: 640px) { .pricing-benefits__row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
.pricing-benefits__row { grid-template-columns: repeat(4, 1fr); gap: 0; }
.pricing-benefit { padding-inline: 28px; border-left: var(--border-width) solid var(--color-line); }
.pricing-benefit:first-child { border-left: none; padding-left: 0; }
}
.pricing-benefit__icon { display: block; width: 40px; height: 40px; margin-bottom: 20px; }
.pricing-benefit h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--color-ink); margin-bottom: 8px; }
.pricing-benefit p { font-size: .92em; line-height: 1.5; color: var(--color-text); }
/* Fallback statyczny /cennik_szkolenia/ → /cennik-szkolen/ (etap 23) -
sama strona nie ma headera/footera (to techniczny stub przekierowania,
nie strona treściowa), tylko krótki komunikat na wypadek, gdy meta
refresh/.htaccess nie zadziała od razu. */
.redirect-notice { max-width: 480px; margin: 18vh auto; padding: 0 24px; text-align: center; }
.redirect-notice p { color: var(--color-text); margin-bottom: 12px; }
.redirect-notice a { font-weight: 700; color: var(--color-fuchsia); }
/* =========================================================
Reveal + reduced motion
========================================================= */
@media (prefers-reduced-motion: no-preference) {
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.site-nav { transition: none !important; }
}
/* =========================================================
Panel podopiecznego (Panel MVP — etap 1, patrz PANEL_KLIENTA.md)
Osobny, minimalny "app chrome" — nie reużywa .site-header/.site-nav
marketingowych (te obsługują lejek sprzedażowy z pełną nawigacją do
sekcji homepage; panel jest osobną, zalogowaną częścią systemu z inną
listą pozycji nawigacji). Reużywa wyłącznie globalne tokeny i istniejące
klasy komponentów (.wrap, .btn, .field, .field__error, .form__summary,
.eyebrow, .wordmark) — zero nowych wariantów tych komponentów.
========================================================= */
/* Finalny redesign (patrz CLAUDE.md, "Finalne wdrożenie — panel zgodny z
WWW") — poprzednia, ciepła kremowo-beżowa "brandowa" paleta panelu
(etap 9D) jest COFNIĘTA. Audyt wykazał, że łamała DESIGN.md §4 (twardy
zakaz "beżowej, kremowej... dominanty") i wprowadzała kolory marki
(--panel-brown/--panel-sage) nigdzie w DESIGN.md niezatwierdzone. Panel
dziś NIE nadpisuje już kolorów tokenów globalnych — dziedziczy dokładnie
tę samą jasnoszaro-białą paletę co reszta strony (--color-bg:#F1F1F3,
--color-surface:#FFFFFF, itd. z :root). Jedyny override, który zostaje,
to --container (patrz niżej) - czysto funkcjonalna potrzeba szerszego
contentu dla layoutu z sidebarem, nie kwestia koloru/marki. */
.panel-page {
/* Popr. po live review (2 tury) — panel wyglądał zbyt drobno na dużych
ekranach. Szerszy content (bez zmiany --container na reszcie serwisu -
nadpisanie WYŁĄCZNIE w zasięgu .panel-page), doprecyzowany do
1180-1280px zakresu po drugiej turze feedbacku. */
--container: 1240px;
background: var(--color-bg);
}
/* ---- Ekran ładowania, zanim frontend potwierdzi token (panel/index.html) ----
[hidden] override konieczny - .panel-loading{display:flex} ma tę samą
specyficzność co domyślne [hidden]{display:none} przeglądarki i jako
późniejsza reguła autorska wygrywa (ten sam błąd znaleziony wcześniej
przy .pricing-group, etap 32 - patrz CLAUDE.md). */
.panel-loading { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.panel-loading[hidden] { display: none; }
.panel-loading p { color: var(--color-muted); font-size: .95em; }
/* Logo w headerze stron BEZ sidebara/nawigacji (wyłącznie panel/onboarding/
- świadomie bez .panel-nav, patrz sekcja "Onboarding" niżej w pliku) -
te strony nie mają .panel-sidebar__brand, więc marka zostaje w
.panel-header jak dotychczas, w niezmienionym, mniejszym rozmiarze. */
.panel-header__wordmark .wordmark__icon,
.panel-header__wordmark .wordmark__logo { height: 32px; width: auto; }
/* ---- Sidebar (marka + nawigacja) ----
KOREKTA "Content + Mobile + Panel UX" §5 — poniżej 1024px pasek linków
poziomo przewijalny (dawny "bez hamburgera" mechanizm) jest teraz
ZASTĄPIONY mobilnym drawerem (patrz .panel-drawer* wyżej) jako główny
sposób nawigacji - sam