/* kontakt_hero — sections/kontakt_hero.php Hero podstrony „Kontakt z nami". Mobile: zdjęcie siedziby na pełną szerokość, badge + H1 wpisane w jego dolną krawędź, lead pod zdjęciem na bieli. Desktop: dwie kolumny na bieli (treść / zdjęcie w kadrze) — bez płyty pod spodem. ── Czym to się różni od paczki „Kontakt z nami — mobile" ────────────────── Paczka jest zbudowana na DS 1.2 (tokeny --color-*, --text-*, klasy .t-*). Obowiązuje AKTUALNY design system (assets/css/design-system.css, --ds-*), więc przeniesione są PROPORCJE i KOMPOZYCJA, a wartości pochodzą z tokenów dzisiejszych. Stąd, świadomie: • promień kadru zdjęcia 18px (--ds-radius-xl) zamiast 28px; • stopnie pisma z aktualnej skali: H1 29/46px zamiast 32/56px, lead 16/17px zamiast 17/19px, eyebrow 13px zamiast 12px; • waga 600, nie 700 (CLAUDE.md, reguła 8 — w DS 1.2 nagłówki miały 700); • padding boczny 16/20px, czyli tyle, ile ma .container-ms — nie 20/60px z paczki: inaczej hero nie stałby w jednym pionie z nagłówkiem, stopką i kanałami kontaktu pod nim; • ruch z tokenów: 180 ms i --ds-ease-out-soft zamiast 220 ms; • badge „Dostępni 24/7" jest ZIELONY (rodzina `success`), nie czerwony jak systemowy `.badge-live` ani szklany jak na mobile w paczce — decyzja Tomka, szczegóły przy .kh-badge; • hero na desktopie NIE MA kremowej płyty ani radialnych blasków z paczki — również decyzja Tomka. Sekcja siedziby zostaje jedyną kremową płytą na podstronie, więc hero nie konkuruje z nią o rolę „oddechowego" bloku. Wartości projektowe SPOZA tokenów, zachowane 1:1 za paczką: gradient przyciemniający zdjęcie na mobile, kadr `object-position: 50% 22%` i wysokość zdjęcia 300px na telefonie. */ .kh { background-color: var(--ds-color-canvas); } /* Mobile: jedna kolumna, ale nagłówek leży w TYM SAMYM obszarze siatki co zdjęcie i jest dociśnięty do jego dołu. Dzięki temu nie ma nakładania przez position:absolute — wysokość obszaru wyznacza zdjęcie, a tekst nie może się z niego wylać. */ .kh-inner { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "body"; } .kh-media { grid-area: media; position: relative; margin: 0; overflow: hidden; } .kh-media img { display: block; width: 100%; /* 300px i kadr 50% 22% to wartości projektowe z paczki — zdjęcie jest pionowe (1199×1688), więc kadr decyduje, czy w polu widzenia zostaje biurowiec, czy drzewa pod nim. Atrybuty width/height na są tylko rezerwacją proporcji przeciw CLS. */ height: 300px; object-fit: cover; object-position: 50% 22%; } /* Nakładka przyciemniająca — wartość z paczki, przeniesiona bez zmian. Kontrast bieli liczony jest w NAJJAŚNIEJSZYM punkcie zdjęcia pod tekstem, nie w średniej (ta sama zasada co dla gradientów marki, CLAUDE.md reguła 14): H1 29px w bieli trzyma tam Lc 75 przy progu 55 (średnia po całym prostokącie nagłówka: Lc 96). */ .kh-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 46, 158, .5) 0%, rgba(10, 46, 158, 0) 40%, rgba(19, 26, 43, .74) 100%); } .kh-head { grid-area: media; position: relative; z-index: 1; align-self: end; padding: 0 var(--ds-space-4) var(--ds-space-4); } .kh-title { margin: var(--ds-space-3) 0 0; font-family: var(--ds-font-display); font-weight: var(--ds-weight-semi); font-size: var(--ds-text-display-hero); line-height: 1.12; letter-spacing: -0.03em; color: var(--ds-color-on-primary); } .kh-body { grid-area: body; padding: var(--ds-space-5) var(--ds-space-4) 0; } .kh-lead { margin: 0; color: var(--ds-color-ink-secondary); } /* Na telefonie kanały kontaktu (sections/kontakt_channels.php) są same dużymi celami dotykowymi, więc przyciski hero dublowałyby tę samą akcję dwa ekrany wyżej. Wchodzą od 1024px, gdzie kanały przestają wyglądać jak lista do kliknięcia. Decyzja z projektu, nie oszczędność. */ .kh-actions { display: none; } /* ── Badge „Dostępni 24/7" ─────────────────────────────────────────────── Kształt, wersaliki, stopień i pulsującą kropkę daje atom .badge-live; tutaj zmienia się WYŁĄCZNIE paleta — z czerwonej („na żywo") na zieloną („dostępni"). Kolory z rodziny `success` design systemu, nie z ręki: tło `success-tint`, litery `success-ink` (Lc 80,3 przy progu 80 dla 13px/600 — dokładnie tam, gdzie siedzą wszystkie kolorowe warianty .badge-* w systemie), kropka w żywym `success` (reguła 12: żywy kolor niesie sygnał, nigdy liter). Jedna zielona para jest ODSTĘPSTWEM policzonym i przyjętym świadomie (CLAUDE.md, reguła 11): kropka 5px w `success` #0E9F6E na `success-tint` daje Lc 54 przy progu 60 dla elementu nietekstowego — 6 punktów niedoboru w granicy 10. Zielony sygnał jest jaśniejszy od czerwonego (ta sama kropka w `error` trzyma Lc 63), a nie ma ciemniejszego wariantu, który nadal czytałby się jak „żywe światełko". Kropka niczego tu nie niesie sama: znaczenie jest w słowach „Dostępni 24/7" obok, kropka je tylko wzmacnia. Pigułka jest pełna także na telefonie, gdzie leży na zdjęciu — NIE szklana jak w paczce. Dwa zyski: label jest zielony w obu układach, a kontrast przestaje zależeć od tego, co akurat wypadnie pod nim na zdjęciu (szklany welon z paczki dawał tam w najgorszym punkcie Lc 48 przy progu 80). H1 (29px) zostaje w bieli wprost na zdjęciu — biel trzyma tam Lc 75 przy progu 55, podkładka nie jest potrzebna. `display: inline-flex` naprawia kropkę: w atomie .badge-live jest ona pseudoelementem `inline-block` bez wyrównania w pionie, więc siada na linii pisma i wygląda na opuszczoną. Flex ustawia ją w osi tekstu. To samo przesunięcie ma każdy .badge-live w serwisie — poprawka w design-system.css to osobna decyzja i osobny commit (CLAUDE.md → „Czego nie robić"). */ .kh-badge { display: inline-flex; align-items: center; background-color: var(--ds-color-success-tint); color: var(--ds-color-success-ink); } .kh-badge::before { background-color: var(--ds-color-success); } /* ── Tablet (768–1023px) ───────────────────────────────────────────────── Projekt z paczki ma jeden próg (1024px) i w tym zakresie się rozjeżdża: pas zdjęcia wysoki na 300px przy szerokości 900px czyta się jak listwa, a lead ciągnie się na ponad 110 znaków w linii. Ten próg nie zmienia projektu — dowozi jego proporcje, zanim wejdzie układ dwukolumnowy. 768px to `md` Bootstrapa (CLAUDE.md → Klasy CSS). */ @media (min-width: 768px) { .kh-media img { height: 380px; } .kh-head { padding: 0 var(--ds-space-5) var(--ds-space-5); } .kh-body { padding: var(--ds-space-6) var(--ds-space-5) 0; } .kh-lead { max-width: 58ch; } } /* ── Desktop (≥1024px) ─────────────────────────────────────────────────── */ @media (min-width: 1024px) { /* Hero stoi na bieli — bez kremowej płyty i bez radialnych blasków z paczki. Bez tła nie ma czego zaokrąglać ani domykać cieniem, więc zostaje sama siatka w kontenerze serwisu (1320px). Padding boczny to 20px, czyli DOKŁADNIE tyle, ile ma .container-ms na desktopie: H1, kanały kontaktu niżej, nagłówek i stopka serwisu stają w jednym pionie. Oddech niesie padding pionowy i kolumna zdjęcia. */ .kh { padding: 0; } .kh-inner { max-width: 1320px; margin-inline: auto; padding: var(--ds-space-10) var(--ds-space-5); grid-template-columns: 1fr 1fr; grid-template-areas: "head media" "body media"; column-gap: var(--ds-space-16); align-content: center; align-items: center; } .kh-head { grid-area: head; align-self: end; padding: 0; } .kh-title { margin: var(--ds-space-4) 0 0; /* Systemowy stopień hero (46px od 1024px) — na desktopie nie ma powodu do odstępstwa, nagłówek jest dwuwyrazowy i mieści się w jednej linii. */ font-size: var(--ds-text-display-hero); color: var(--ds-color-ink); } .kh-body { grid-area: body; align-self: start; padding: var(--ds-space-4) 0 0; } .kh-lead { max-width: 34ch; } .kh-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); margin-top: var(--ds-space-6); } /* .btn-lg podnosi do 52px tylko .btn-solar i .btn-blue (design-system.css), a wtórny przycisk ma stanąć w jednej linii z głównym — stąd lokalne zrównanie wysokości i stopnia etykiety, bez ruszania atomu. Liczby są PRZEPISANE z .btn-lg (52px / 15px 26px), nie wymyślone tutaj: przy zmianie atomu trzeba je zaktualizować razem z nim albo dopisać wariant .btn-lg.btn-sec do design systemu. */ .kh-btn-sec { min-height: 52px; padding: 15px 26px; font-size: var(--ds-text-btn-lg); } .kh-media { grid-area: media; grid-row: 1 / span 2; border-radius: var(--ds-radius-xl); box-shadow: var(--ds-shadow-lg); } .kh-media img { height: auto; aspect-ratio: 16 / 11; } /* Na kremowej płycie zdjęcie stoi w kadrze, a nagłówek obok — nie na nim. Nakładka nie ma tu czego przyciemniać. */ .kh-media::after { content: none; } }