/* Base, Kamila Radzioch. Reset + typografia + layout + komponenty globalne. Nazwy tokenów z tokens.css, zero hexów tutaj (budowa-strony.md). */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { overflow-x: hidden; max-width: 100%; } body { margin: 0; font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); background: var(--surface-cream); color: var(--text-on-light); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* Decyzja Jakuba 14.09.2026: kontener 90% szerokosci viewportu (nie stale 1304px), spojne z proporcja projektu graficznego (1304/1440 = 90.5%) na kazdej szerokosci, nie tylko na kanonicznych 1440px. Gorny limit 1728px (=90% z 1920px) zeby linia tekstu nie robila sie absurdalnie szeroka na ultra-wide/4K, gdzie makieta i tak nie ma odniesienia. */ .container { width: 90%; max-width: 1728px; margin-inline: auto; } section { padding-block: var(--space-section); } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-display); margin: 0; } h1 { font-size: var(--fs-display-1); } h2 { font-size: var(--fs-display-2); } h3 { font-size: var(--fs-display-3); } em, i { font-style: italic; } p { margin: 0 0 var(--space-4); } p:last-child { margin-bottom: 0; } .eyebrow { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; gap: var(--space-3); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent-ctx, var(--surface-dark)); margin-bottom: var(--space-5); } .eyebrow__num { opacity: .7; } .eyebrow__line { flex: none; width: 40px; height: 1px; background: currentColor; opacity: .5; } /* --- Przyciski --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h-desktop); padding-inline: var(--space-6); font-family: var(--font-text); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; /* D41 audyt hover (RADZIOCH_DESIGN_SYSTEM.md sekcja 7/20): transform/box-shadow byly na 120ms bez shadow w ogole - dokument chce translateY(-2px) + shadow-soft na hover, 180-320ms. --dur-base=320ms (token juz istnial, dodany wczesniej w tej sesji, nieuzywany do teraz). 15.09.2026 (D46): transform/box-shadow przestawione z --dur-base (320ms) na --dur (500ms), ten sam czas co kolor/tlo/obwodka - Jakub na zywo: najechanie na przycisk czuc jako gwaltowne, nie delikatne. Rozjazd dwoch predkosci w jednej interakcji (kolor konczy sie 180ms pozniej niz uniesienie+cien) dawal wrazenie "dwuetapowego" hover zamiast jednego, spokojnego ruchu - teraz wszystko w tym samym tempie. */ transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); white-space: nowrap; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-karta); } .btn:active { transform: scale(0.96); box-shadow: none; } .btn[disabled] { transform: none; box-shadow: none; } .btn svg { width: 16px; height: 16px; flex: none; } .btn::after { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("../img/ikony/arrow-up-right.svg") center / contain no-repeat; mask: url("../img/ikony/arrow-up-right.svg") center / contain no-repeat; transition: transform var(--dur-fast) var(--ease); } /* D41: strzalka CTA (ukosna, arrow-up-right) nie reagowala na hover w ogole. implementation-guide.md sekcja 21: "ikona CTA... reaguje na hover ruchem 4px". Ruch po przekatnej (ta sama forma co juz istniejacy wzorzec w dropdown-linkach headera: translate(2px,-2px)), tu nieco wiekszy zeby wypelnic "4px" doslownie (sqrt(3^2+3^2)~4.24px). */ .btn:hover::after { transform: translate(3px, -3px); } .btn--bez-strzalki::after, .site-header__cta::after { display: none; } .btn--solid { background: var(--btn-solid-bg); color: var(--btn-solid-fg); border-color: var(--btn-solid-bg); } .btn--solid:hover { background: var(--accent-ctx-hover, var(--surface-dark-warm)); border-color: var(--accent-ctx-hover, var(--surface-dark-warm)); } .btn--outline { background: transparent; color: var(--btn-outline-fg); border-color: var(--line-ctx); } .btn--outline:hover { /* 15.09.2026 (D44): bylo background:var(--line-ctx) - to token linii (bardzo niska nieprzezroczystosc, myslany do subtelnych obwodek, nie wypelnien), na hover dawal ledwo widoczne, szare wypelnienie zamiast wyraznego stanu. Jakub zglosil na zrzutach ("Zobacz platforme", "TikTok" na ciemnym tle) - ledwo widoczne. Teraz pelna inwersja: wypelnienie = kolor dotychczasowego tekstu/obwodki (--btn-outline-fg), tekst = kolor czytelny NA TYM wypelnieniu (--accent-ctx-fg, juz istniejacy token per kontekst: on-dark->czarny, on-light->bialy, on-wine->czarny) - klasyczny odwrocony hover, zawsze pelny kontrast niezaleznie od kontekstu, bez nowych tokenow. */ background: var(--btn-outline-fg, var(--surface-dark)); border-color: var(--btn-outline-fg, var(--surface-dark)); color: var(--accent-ctx-fg, var(--surface-white)); } /* D41 audyt hover, RADZIOCH_DESIGN_SYSTEM.md sekcja 8: outline-offset uniform 4px w calym dokumencie - bylo 3px tutaj, jedyne odstepstwo warte ujednolicenia (pozostale focus-visible w kodzie header/dropdown mialy juz 2px/4px/-2px z powodow geometrycznych lokalnych, te zostawione bez zmian). */ .btn:focus-visible { outline: 2px solid var(--accent-ctx, var(--surface-dark)); outline-offset: 4px; } .btn[disabled] { opacity: .5; cursor: not-allowed; } @media (max-width: 767px) { .btn { height: var(--control-h-mobile); padding-inline: var(--space-5); } } /* --- Nagłówek ------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: var(--z-header); /* D41: bylo 50 (kolidowalo z rbt-z-sticky ogolnym), RADZIOCH_DESIGN_SYSTEM.md chce header=100, osobna warstwa od zwyklego sticky */ padding-block: var(--space-5); background: var(--surface-dark); /* zawsze ciemny: makieta kładzie menu na ciemnym pasie nad hero, a body jest kremowe */ transition: background-color var(--dur) var(--ease), padding-block var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); } .site-header.is-scrolled { background: var(--surface-dark); padding-block: var(--space-3); box-shadow: 0 12px 32px rgba(12, 9, 11, 0.35); } /* H-LD naglowek platformy kursowej, copy-0hg.4 16.09.2026: rozjazd wobec makiety (qa/dowody/globalne/raport-16-09.md): 149px desktop / 90px mobile renderowane, cel 128px / 66px (qa/kadry/wymiary.md). Tresc (logo lockup) bez zmian, zmierzona site-header__inner: 101px desktop / 42px mobile - nadmiar w calosci z padding-block: var(--space-5) (24px) dziedziczonego z bazowej .site-header (uzywanej TEZ przez H-MKT "strona"). Skopowane wylacznie do .site-header--ld (dodane tylko w wariancie pelnym H-LD w header.php), .site-header bazowy (branch "strona", radziochszkolenia.local) bez zmian - P2 "GLOBALNE PLATFORMY ZAMROZONE" zero regresji. Desktop: 101+24(--space-3 x2)=125 (cel 128, -2.3%, w tolerancji ~5%). Mobile: 42+24=66 (cel 66, dokladnie). */ .site-header--ld { padding-block: var(--space-3); } .site-header--ld.is-scrolled { padding-block: var(--space-2); } /* Lockup logo jak w makiecie: monogram NAD napisem, wyśrodkowane. */ /* Rozmiar i kolor logo zmierzone 1:1 z paczka-projekt/01-strona-glowna (i potwierdzone w menu_architektura.pdf), 14.09.2026: monogram ~59px wysokosci, wordmark RADZIOCH ZLOTY (nie bialy jak bylo), z liniami po obu stronach podpisu BUSINESS TRAINING. */ .site-header__logo { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-on-dark); text-align: center; } .site-header__logo img { height: 56px; width: auto; } .site-header__logo-text { display: flex; flex-direction: column; align-items: center; line-height: 1.1; } .site-header__logo-text strong { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 400; padding-left: 0.3em; color: var(--surface-white); } .site-header__logo-text span { display: flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: 0.28em; color: var(--text-on-dark-muted); text-transform: uppercase; margin-top: 5px; padding-left: 0.28em; } .site-header__logo-text span::before, .site-header__logo-text span::after { content: ""; display: block; width: 16px; height: 1px; background: currentColor; flex: none; } .site-header__nav { display: flex; align-items: center; gap: var(--space-7); align-self: stretch; /* 15.09.2026 (D44): nav sam siega pelnej wysokosci .site-header__inner (~101px), zeby moc podac te wysokosc dalej pojedynczym dzieciom przez align-self (nizej). */ } .site-header__nav-item--dropdown { align-self: stretch; /* 15.09.2026 (D44): TYLKO itemy z dropdownem rozciagaja sie do pelnej wysokosci nav (~101px) - dropdown kotwiczony do LI (top:100%) wychodzi wtedy dokladnie spod calego paska naglowka, nie spod samego tekstu triggera (bez tego panel startowal ~50px za wysoko, nakladal sie na dolna czesc headera, zglosil Jakub na zywo). Nav-item ma wlasny wewnetrzny align-items:center wiec trigger nadal centrowany w tym wyzszym pudelku. UWAGA, poprzednia wersja tego fixa dala align-items:stretch calemu .site-header__nav - to rozciagalo TEZ gole linki "O nas"/"Kontakt" (bezposrednie dzieci bez wlasnego centrowania), ktore wtedy wyjezdzaly wizualnie w gore (tekst do gory pudelka zamiast na srodku) - zglosil Jakub na zywo jako "nawigacja sie rozjechala". Scope'owanie tylko na --dropdown naprawia to bez psucia zwyklych linkow. */ pointer-events: none; /* 15.09.2026 (D44): LI rozciagniete do ~101px ma teraz duzo PUSTEGO miejsca nad/pod samym triggerem (naglowek jest wyzszy niz tekst "KURSY"). Bez tego cale puste pudelko LI liczylo sie jako hover i otwieralo dropdown nawet przy najechaniu na ciemne tlo obok tekstu, nie tylko na sam napis/chevron - zglosil Jakub na zywo. Zamiast tego LI samo w sobie NIE reaguje na wskaznik, reaguja tylko jego potomkowie z jawnym pointer-events:auto nizej (trigger, most-hover, otwarty panel) - :hover na LI nadal dziala poprawnie w tych miejscach, bo trafienie w potomka z auto propaguje :hover do przodkow. */ } .site-header__nav-item--dropdown .site-header__nav-trigger { pointer-events: auto; } .site-header__nav a { position: relative; line-height: 1.15; /* 15.09.2026 (D44): bylo dziedziczone z body (--lh-body:1.6), dawalo ~4px niewidocznego "halo" nad i pod tekstem gdzie hover/klik sie tez liczyl - zglosil Jakub na zywo na WSZYSTKICH pozycjach nawigacji naraz (spojny problem, bo wszystkie dziedziczyly to samo). 1.15 zamiast 1 zeby nie obcinac znakow z ogonkami (np. bez tego "ą","ę" na dole albo wersaliki z akcentem u gory potrafia sie docinac przy scisle 1). Trigger dziedziczy (D27), wiec zmiana obejmuje oba automatycznie. */ font-size: var(--fs-small); /* 14.09 D27: bylo hardkodowane 12px, niezalezne od tokenu, przez co token nie dotykal nav mimo ze byl czescia flagi D25 */ font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; /* D43 audyt hover: bylo --text-on-dark-muted (.68), dokument chce .72 konkretnie dla tego linku - patrz token dedykowany --text-nav-link w tokens.css, "dokument wygrywa" (decyzja Jakuba przekazana przez koordynatora 15.09.2026). */ color: var(--text-nav-link); transition: color var(--dur) var(--ease); } .site-header__nav a:hover, .site-header__nav a[aria-current="page"] { color: var(--text-on-dark); } /* D41 audyt hover, RADZIOCH_DESIGN_SYSTEM.md sekcja 6, wzorzec .rbt-nav-link: linia champagne rysujaca sie od lewej do prawej pod tekstem. Wczesniej link headera mial WYLACZNIE zmiane koloru, zero linii. */ .site-header__nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -10px; height: 1px; background: var(--surface-white); transition: right var(--dur-base) var(--ease); } .site-header__nav a:hover::after, .site-header__nav a[aria-current="page"]::after { right: 0; } .site-header__nav a:focus-visible { outline: 2px solid var(--surface-white); outline-offset: 4px; } .site-header .site-header__dropdown a::after { content: none; } /* 15.09.2026 (D44): linia champagne z .site-header__nav a::after (wyzej) lapala TEZ linki wewnatrz otwartego dropdownu (flagowa karta, "Zobacz pelna biblioteke") bo to ten sam bug specyficznosci co przy kolorze - dropdown fizycznie siedzi w .site-header__nav. Karta i link maja wlasny hover (zmiana tla/koloru), linia pod spodem byla zbedna i niezamierzona - zglosil Jakub na zywo ("usuwamy linie ktora daje na hover pod boxem"). content:none kasuje pseudoelement bez dotykania oryginalnej reguly dla zwyklych linkow headera (O nas/Kontakt), ktore linie maja zostac. */ /* CTA naglowka: tekst pelny z makiety (promuje kurs flagowy, D25) na szerokim desktopie, krotszy fallback w przedziale 1025-1384px, bo pelny tekst wypycha nawigacje do zawijania (zmierzone Playwright: laptop 1280px realnie sie psul, 1300px juz nie). Prog byl chwilowo 1479 (D27, gdy --fs-small stal na 16px), skorygowany 14.09 D27 amendment na **1384** po powrocie --fs-small do 14px (Jakub zobaczyl 16px na zywo, nav wygladal za duzy) - nav a i nav-trigger nadal uzywaja var(--fs-small), wiec przy 14px sa 2px szersze niz oryginalne hardkodowane 12px z D26/wczesniej, prog wiec NIE wraca do oryginalnych 1319. Binarnie zmierzone Playwright na 14px: 1360px jeszcze sie zawija ("O"/"NAS" dwie linie), 1365px juz nie, 1384 zostawia margines bezpieczenstwa. */ .site-header__cta-short { display: none; } @media (max-width: 1384px) { .site-header__cta-full { display: none; } .site-header__cta-short { display: inline; } } .site-header__toggle { display: none; } /* Dekoracja: wielkie R monogramu w tle sekcji (makieta, sekcje 01/06/11/12 - poprawka D41: "02" tu wczesniej wypisane bylo bledne, sekcja Misja NIE ma tej dekoracji w makiecie, sprawdzone wektorowym renderem PDF przy 10x wzmocnieniu kontrastu, zero sladu w calym obszarze sekcji. Klasa `deko-r` zdjeta z `#misja` w front-page.php). */ .deko-r { position: relative; overflow: hidden; } .deko-r > .container { position: relative; z-index: 1; } .deko-r::after { content: ""; position: absolute; z-index: 0; pointer-events: none; right: 0; top: 50%; transform: translateY(-50%); width: 380px; height: 500px; opacity: .05; background: url("../img/logo/monogram-ivory@2x.png") right -80px center / 460px 500px no-repeat; } .deko-r.on-light::after, .deko-r--ink::after { background-image: url("../img/logo/monogram-ink.png"); opacity: .06; } .deko-r--hero::after { /* D41 poprawka pozycji: bylo right:220px/width:620/top:0, co centrowalo widoczny tusz litery R (monogram-ivory@2x.png ma padding wewnatrz canvasu 1200x1300, tresc x:159-1111/y:167-1259) w okolicy x~700-950 canonical, nad kolumna tekstu. Pomiar wektorowy makiety (radzioch_home_desktop.pdf, ten sam sposob co watermark BEAUTY) pokazuje R przy PRAWEJ krawedzi hero, dosuniete do/za zdjecie, czesciowo wychodzace poza krawedz sekcji - nie wysrodkowane nad tekstem. Przesuniete w prawo i powiekszone tak zeby widoczny tusz siegal krawedzi. Pomiar mniej pewny niz przy watermarku (element ma tylko .04 opacity, trudniej o pikselowa precyzje nawet w wektorze) - do potwierdzenia na zywym zrzucie. */ top: -16px; transform: none; right: 0; width: 400px; height: 500px; opacity: .04; /* Box zostaje W GRANICACH .hero (right:0, nie ujemny) zeby nie psuc scrollWidth na .hero mimo overflow:hidden (ten sam problem co przy watermarku BEAUTY) - "bleed" w prawo osiagniety przez background-position (ten sam wzorzec co bazowe .deko-r::after ktore juz uzywa "right -80px" do tego samego efektu), nie przez sam box. */ background-position: right -150px top -20px; background-size: 550px auto; } @media (max-width: 1024px) { .site-header__nav { display: none; } /* D31 14.09, trzecia poprawka: header fizycznie schowany (visibility, nie display, zeby nie zmienial layoutu/wysokosci sticky) na czas otwartego panelu mobile. Jakub zglosil "duch"-box przy X w rogu, nieodtworzony w Chromium/Playwright, ale sticky+fixed maja znany problem kompozytowania na mobile Safari (element sticky potrafi wygrac z fixed o wyzszym z-index podczas scrolla mimo poprawnej specyfikacji). Zamiast polegac na samym z-index, `.is-menu-open` (main.js, dodawane/usuwane przy otwarciu/zamknieciu) fizycznie eliminuje kazde mozliwe przebicie header-u przez panel, niezaleznie od przyczyny. */ .site-header.is-menu-open { visibility: hidden; } /* D30 14.09: logo mobile bylo identyczne z desktopowym (56px monogram, 20px wordmark, zero mobile-specific rule), Jakub zobaczyl na zywo ze jest za duze. Zmierzone pikselowo z paczka-projekt/15-menu/00-full-mobile.png (naglowek zamkniety, lewy gorny rog), canvas 1080px szerokosci, przeliczone proporcja 390/1080=0.3611 (PRZEKAZANIE.md, "Makieta mobile 1080 nie 390"): monogram 63x73px -> 23x26px. Pierwsza proba: przeskalowac caly lockup (monogram+wordmark+podpis) proporcjonalnie z makiety - Jakub po zrzucie zdecydowal INACZEJ niz makieta (ktora pokazuje pelny lockup): na mobile zostaje WYLACZNIE monogram R, wordmark "RADZIOCH"/"BUSINESS TRAINING" schowany calkowicie, zeby oszczedzic miejsce w rzedzie z ikonkami i triggerem MENU. Swiadome odejscie od makiety na zywo, ten sam wzorzec co D27/D29/D31pkt1. Po schowaniu wordmarku 26px okazalo sie za male (bez tekstu obok brakowalo mu wizualnej wagi) - Jakub na zywo: podbic do 36px (polowa drogi miedzy 26 a oryginalnym 56, rozsadny start bez pomiaru z rastra, bo makieta pokazuje inny lockup niz to co faktycznie renderujemy). 36px = dokladnie wysokosc sasiednich `.site-header__icon` (36x36px). Jeszcze jedna tura: Jakub na zywo, 36px odrobine za male, podbite do **42px** (158px luzu do ikonek przy 36px, z zapasem starcza i na 42px). */ .site-header__logo img { height: 42px; } /* D32 14.09: selektor byl bez zawezenia (".site-header__logo-text"), wiec gasil TEZ wordmark w stopce (".site-footer__brand .site-header__logo-text" dzieli te sama klase, celowo - stopka MA pokazywac pelny lockup na mobile, zgodnie z makieta 01-strona- glowna/00-full-mobile.png). Zawezone do samego naglowka. */ .site-header__logo > .site-header__logo-text { display: none; } .site-header__toggle { /* D29 14.09: makieta 00-full-mobile.png pokazuje "MENU" nad DWIEMA zlotymi kreskami (rozne dlugosci, wyrownane do prawej), nie klasyczny 3-liniowy hamburger z podkresleniem calego przycisku. Podkreslenie (border-bottom) zdjete, bylo pozostaloscia wczesniejszej proby, koliduje wizualnie z nowymi kreskami. */ display: inline-flex; flex-direction: column; align-items: flex-end; gap: 7px; width: auto; height: auto; padding: 0; background: transparent; border: 0; color: var(--text-on-dark); font-family: var(--font-text); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: opacity var(--dur) var(--ease); } .site-header__toggle-lines { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .site-header__toggle-line { display: block; height: 2px; background: var(--surface-white); transition: background-color var(--dur) var(--ease); } .site-header__toggle-line--1 { width: 28px; } .site-header__toggle-line--2 { width: 18px; } .site-header__toggle:hover { opacity: .7; } .site-header__toggle:active { opacity: .5; } .site-header__toggle:focus-visible { outline: 2px solid var(--surface-white); outline-offset: 3px; } .site-header__cta { display: none; } } .site-header__mobile { /* D29 14.09: off-canvas prawdziwe (wjazd translateX), nie display:none/:flex. Wzorzec: wiki/komponenty/naglowek-kapsula.md, sekcja "Pulapki szuflady" (visibility bez transition-delay zabija animacje zamkniecia). */ position: fixed; inset: 0; background: var(--surface-dark); z-index: var(--z-dropdown); /* D41: bylo 60, podbite bo header teraz 100 (RADZIOCH_DESIGN_SYSTEM.md), panel musi zostac nad headerem */ padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-6); transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur); } .site-header__mobile.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform var(--dur) var(--ease), visibility 0s linear 0s; } /* D29 14.09: martwa regula ".site-header__mobile a" (font 28px, kolor jasny) z pierwszej, ciemnej wersji panelu (przed redesignem na jasny 13.09) usunieta - przez wyzsza specyficznosc (klasa+tag vs sam .site-header__mobile-row) wygrywala z nowym resetem wiersza i nadpisywala kolor na text-on-dark (bialy tekst na kremowym tle, prawie niewidoczny) na liniach "O nas"/"Kontakt", ktore nie maja klasy -trigger. */ .site-header__mobile-close { align-self: flex-end; width: 44px; height: 44px; background: transparent; border: 1px solid var(--line-on-dark); color: var(--text-on-dark); cursor: pointer; transition: background-color var(--dur) var(--ease), transform 120ms var(--ease); } .site-header__mobile-close:hover { background: var(--line-on-dark); } .site-header__mobile-close:active { transform: scale(0.9); } .site-header__mobile-close:focus-visible { outline: 2px solid var(--surface-white); outline-offset: 2px; } /* --- Hero ------------------------------------------------------------------ */ .hero { position: relative; /* D41 rebuild: tlo to realny plik paczka-projekt/00-global/decorations/dark-gradient.svg (nie przyblizenie plaskim tokenem), zmierzone pikselowo z makiety - lewa krawedz hero wyraznie chlodniejsza/ciemniejsza niz prawa (13,10,11 vs 28,20,16 w probkach marginesu), zgodne z diagonalnym gradientem svg #090708 -> #17110F -> #2A1A16. --surface-dark zostaje jako fallback/kolor tla pod SVG (gdyby obrazek nie zaladowal sie), nie jako jedyne zrodlo koloru. */ background: var(--surface-dark) url("../img/dekoracje/dark-gradient.svg") center / cover no-repeat; color: var(--text-on-dark); padding-top: var(--space-9); padding-bottom: 0; overflow: hidden; } .hero::before { /* D41 rebuild: watermark "BEAUTY" z paczka-projekt/00-global/backgrounds/beauty-outline.svg, wczesniej calkowicie pominiety w kodzie (grep potwierdzil zero uzyc). Widoczny w makiecie kontrastowo wzmocnionej jako duzy obrys tekstu w lewym dolnym rogu hero, za przyciskami CTA, ucziety lewa krawedzia viewportu. Pozycja/rozmiar dobrane pomiarem + wizualnym zestawieniem ze zrzutem (nie czysta matematyka z niskokontrastowego zrodla). */ content: ""; position: absolute; z-index: 0; pointer-events: none; /* D41 poprawka pozycji/rozmiaru: pierwsza wersja (left:-40px, width 780px) byla za waska i za mocno wsuniata w lewo. Ponowny pomiar na wektorowym PDF (paczka-projekt/zrodla/ pdf-desktop/radzioch_home_desktop.pdf, renderowany PyMuPDF - odporny na artefakty kompresji PNG, w przeciwienstwie do wczesniejszego rastra) z segmentacja liter B-E-A-U-T-Y w natywnym viewBox (0-1400): litera B zaczyna sie w viewBox x=3 (~lewa krawedz hero, offset ~0), U konczy sie x=704, skala wyliczona z dopasowania do pozycji liter w makiecie ~0.83-0.86 canonical-px/native-unit (dwie niezalezne miary zbiezne). Pelny viewBox (1400 szer. x 320 wys.) w skali ~0.845 daje ~1183x270 canonical na 1440. Dolna krawedz (baseline liter, native y=250) zmierzona wzgledem dolu hero na ~179px. Litera Y (ostatnia) wychodzi poza lewa krawedz zdjecia (~817 canonical) i jest celowo schowana pod fotografia (z-index nizszy niz .container). */ left: -4px; bottom: 179px; /* Mobile: makieta mobilna (paczka-projekt/zrodla/pdf-mobile/radzioch_home_mobile.pdf) NIE pokazuje watermarku BEAUTY w ogole (sprawdzone 3x wzmocnienie kontrastu, zero sladu) - tylko monogram R zostaje. Dlatego chowany ponizej 1024px zamiast skalowany, zgodnie z tym co makieta faktycznie pokazuje, nie z domyslu ze "powinien gdzies byc". */ width: min(1183px, 82vw); aspect-ratio: 1400 / 320; background: url("../img/dekoracje/beauty-outline.svg") left bottom / contain no-repeat; /* stroke="currentColor" w svg: CSS `color` hosta NIE propaguje sie do zewnetrznego zasobu SVG uzytego jako background-image (tylko mask-image/inline to robia), wiec przegladarka renderuje domyslny czarny. Na ciemnym tle hero czarny obrys jest niewidoczny (proba z jawnym `color:` na tym elemencie potwierdzila brak efektu). Filter:invert odwraca czern na jasny odcien bez modyfikacji verbatim pliku zrodlowego. Dodatkowe opacity .5 (poza stroke-opacity .08 juz w pliku): przy samym invert(1) napis byl czytelny gola oka, w makiecie wymagal 3.2x wzmocnienia kontrastu zeby go w ogole dostrzec (rownie subtelny jak monogram .04, D34) - .5 przyblizylo subtelnosc. */ filter: invert(1); opacity: .3; } @media (max-width: 1024px) { .hero::before { display: none; } } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.85fr; gap: var(--space-9); align-items: center; } .hero__grid > * { min-width: 0; } .hero__kicker { font-size: var(--fs-eyebrow); /* 14.09 D27 amendment: bylo hardkodowane 12px, niezalezne od tokenu, wiec eyebrow hero rozjezdzal sie z eyebrow innych sekcji (16px) */ letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-4); font-weight: 700; } .hero h1 { font-size: var(--fs-display-1); } .hero__h1-pre { display: block; font-family: var(--font-text); font-size: 12px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--text-on-dark-muted); margin-bottom: var(--space-4); } .hero h1 em { color: var(--gold-light); } .hero__lead { margin-top: var(--space-5); max-width: 46ch; color: var(--text-on-dark-muted); font-size: 18px; } .hero__actions { display: flex; gap: var(--space-4); margin-top: var(--space-7); flex-wrap: wrap; } .hero__note { margin-top: var(--space-4); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-dark-muted); } .hero__photo { position: relative; } .hero__photo::before { /* D41 poprawka: bylo left:14px/top:-14px, ramka wizualnie przesunieta wzgledem maski o 14px w kazda strone (potwierdzone getBoundingClientRect - dwa identyczne prostokaty przesuniete o (14,-14), nie pokrywajace sie). Wektorowy render PDF makiety (radzioch_home_desktop.pdf) pokazuje JEDNĄ, pojedynczą zlota linie dokladnie na krawedzi maski, bez przesuniecia/efektu podwojnej linii - frame i mask uzywaja tego samego viewBox i tej samej krzywej, wiec przy identycznym rozmiarze/pozycji pokrywaja sie z definicji. */ content: ""; position: absolute; z-index: 0; pointer-events: none; left: 0; top: 0; width: 100%; height: 100%; background: url("../img/global/hero-photo-frame.svg") center / contain no-repeat; } .hero__photo-mask { z-index: 1; } .hero__photo-mask { position: relative; aspect-ratio: 4 / 5; -webkit-mask-image: url("../img/global/hero-photo-mask.svg"); mask-image: url("../img/global/hero-photo-mask.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .hero__photo-mask img { width: 100%; height: 100%; object-fit: cover; } .hero__photo-card { position: absolute; z-index: 2; right: 0; bottom: 40px; background: var(--surface-dark); border: 1px solid var(--line-on-dark); padding: var(--space-5) var(--space-6); } .hero__photo-card strong { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; } .hero__photo-card em { display: block; font-family: var(--font-display); font-size: 20px; margin-bottom: 6px; } .hero__photo-card p { font-size: 13px; color: var(--text-on-dark-muted); max-width: 30ch; } .hero__stats { margin-top: var(--space-9); border-top: 1px solid var(--line-on-dark); display: grid; grid-template-columns: repeat(3, 1fr); } .hero__stat { padding: var(--space-6) var(--gutter); border-right: 1px solid var(--line-on-dark); display: flex; align-items: baseline; gap: var(--space-4); } .hero__stat:last-child { border-right: 0; } .hero__stat-num { font-family: var(--font-display); font-style: italic; font-size: 40px; color: var(--gold); white-space: nowrap; } .hero__stat-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-on-dark-muted); line-height: 1.4; } @media (max-width: 1024px) { .hero__grid { grid-template-columns: 1fr; } .hero__photo-card { bottom: 16px; right: 0; padding: var(--space-4) var(--space-5); } .hero__stats { grid-template-columns: 1fr; } .hero__stat { border-right: 0; border-bottom: 1px solid var(--line-on-dark); } .hero__stat:last-child { border-bottom: 0; } } /* --- Sekcja generyczna, dwie kolumny ----------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: start; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } } .misja__body p + p { margin-top: var(--space-4); } /* D41 sekcja 02 Misja: h2 em bylo bez koloru (dziedziczylo domyslny ciemny atrament naglowka), pomiar wektorowy makiety (radzioch_home_desktop.pdf) pokazal wyrazny wineowy odcien (~112,41,59, dokladnie --accent) na "z Twojego zycia i biznesu.", ten sam wzorzec co juz istniejace .opinie__text em / .dla-kogo__item em. */ #misja h2 em { color: var(--accent-ctx); } /* Dywider miedzy H2 a tagline: paczka-projekt/00-global/decorations/section-label-divider.svg, wczesniej zero uzyc w calym motywie (grep), a w makiecie wyraznie widoczny (zmierzony ~168px szerokosci, wineowy kolor). mask-image zamiast background-image, bo SVG ma stroke="currentColor" ktory NIE dziedziczy CSS color hosta przy background-image (ta sama pulapka co przy watermarku Hero) - maska omija problem, kolor bierze sie wprost z background-color. */ .misja__divider { width: 168px; aspect-ratio: 180 / 8; margin-top: var(--space-6); background-color: var(--accent-ctx); -webkit-mask: url("../img/dekoracje/section-label-divider.svg") left center / contain no-repeat; mask: url("../img/dekoracje/section-label-divider.svg") left center / contain no-repeat; } .misja__tagline { margin-top: var(--space-5); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-on-light-muted); } .misja__cta { margin-top: var(--space-6); } .card-highlight { background: var(--accent); color: var(--text-on-dark); padding: var(--card-pad-featured); /* D41: bylo --space-7=40px, RADZIOCH_DESIGN_SYSTEM.md chce 48px na kartach wyroznionych/sprzedazowych */ } @media (max-width: 767px) { .card-highlight { padding: var(--card-pad-featured-mobile); } } .misja__card { margin-top: var(--space-6); } .card-highlight strong { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); margin-bottom: var(--space-3); } .card-highlight p { font-family: var(--font-display); font-size: 22px; font-style: italic; } /* D41 sekcja 02: pomiar wektorowy makiety pokazal PODZIAL stylu w obrebie zdania karty - pierwsza czesc prostym pismem, druga (po przecinku) kursywa - nie caly akapit kursywa jak w bazowej regule .card-highlight p (ktora nadal dotyczy card-highlight--ink w sekcji Osiagnij, nietknietej w tej turze). Scoped tylko do .misja__card. */ .misja__card p { font-style: normal; } /* D41 sekcja 03: BUG znaleziony przy budowie Osiagnij - .card-highlight--ink stalo PRZED bazowa regula .card-highlight w zrodle, wiec przy rownej specyficznosci (jedna klasa kontra jedna klasa) .card-highlight (pozniej w pliku) WYGRYWALO i nadpisywalo tlo/kolor etykiety na wine zamiast ciemnego - karta Osiagnij od dawna renderowala sie zlym kolorem, zlapane dopiero teraz przy zrzucie tej sekcji. Przeniesione PO bazowej regule zeby cascade byl poprawny. Tresc reguly bez zmian, tylko pozycja w pliku. */ .card-highlight--ink { background: rgba(12, 9, 11, 0.82); /* Pomiar wektorowy makiety pokazal ramke i etykiete karty w odcieniu ZLOTA (~90,75,63 na krawedzi, ~181,149,100 na etykiecie - obie blizej --gold niz --line-on-dark/--gold-light), nie biale linie jak reszta kart --ink w motywie. */ border: 1px solid var(--gold); } .card-highlight--ink strong { color: var(--gold); } /* D41 sekcja 03, Osiagnij w rok wiecej. Tlo: zdjecie z konferencji Kamili (copy.md wskazuje IMG_9133.JPG albo IMG_9135.JPG, oba istnieja w materialach, uzyty pierwszy - zdjecie potwierdzone jako ta sama scena co w makiecie: kurtyny, publicznosc, Kamila z mikrofonem). Wczesniej inline style z zahardkodowanymi rgba - teraz przez tokeny --overlay-soft/--overlay-dark (RADZIOCH_DESIGN_SYSTEM.md, wartosci .46/.72 ~ identyczne z poprzednimi recznymi .45/.7). */ .osiagnij { position: relative; background-image: linear-gradient(var(--overlay-soft), var(--overlay-dark)), url("../img/zdjecia/IMG_9133.JPG"); background-size: cover; background-position: center; } .osiagnij__meta { margin-top: var(--space-5); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-on-dark-muted); } /* Pomiar wektorowy: zdanie karty jest PODZIELONE - poczatek prostym pismem (bialy, jak reszta tekstu na ciemnym tle), dalsza czesc (po "w ktorej") kursywa w kolorze zlota. Base ".card-highlight p" (klasa+element, specyficznosc 0-1-1) ustawia 22px/italic/Bodoni dla calego akapitu - selektor jednoklasowy ".osiagnij__lead" (0-1-0) PRZEGRYWAL z nim mimo zapisu pozniej w pliku (bug zlapany dopiero pomiarem getComputedStyle, na oko wygladalo OK). Podniesione do ".card-highlight .osiagnij__lead" (0-2-0) zeby realnie wygrac. */ .card-highlight .osiagnij__lead { font-size: 20px; font-style: normal; color: var(--text-on-dark); } .card-highlight .osiagnij__lead em { color: var(--gold); } .card-highlight .osiagnij__body { font-family: var(--font-text); font-size: 14px; font-style: normal; margin-top: var(--space-4); color: var(--text-on-dark-muted); } .osiagnij__cta { margin-top: var(--space-6); } /* --- Program, dwa etapy -------------------------------------------------- */ .program__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; } .program__intro { max-width: 34ch; font-size: 14px; color: var(--fg-muted); } .program__intro .btn { margin-top: var(--space-5); } /* D41 sekcja 04, pomiar wektorowy makiety: "Konkretna droga." (H2, nie H3 karty) jest w kolorze --blush (zmierzone ~208,178,168, dokladnie #D7B6AA), inny od kart nizej (.etapa h3 em uzywa gold-light, potwierdzone poprawne). Wczesniej brak reguly = dziedziczylo biale --text-on-dark. */ #program h2 em { color: var(--blush); } .etapy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); margin-top: var(--space-8); } @media (max-width: 900px) { .etapy { grid-template-columns: 1fr; } } .etapa { position: relative; padding: var(--space-8) var(--space-7); overflow: hidden; border-left: 4px solid var(--gold); } .etapa--dark { background: var(--surface-espresso); color: var(--text-on-dark); } /* D41: border-left-color bylo var(--gold) (kopiowane z bazowej .etapa), pomiar wektorowy pokazal dokladnie --blush (#D7B6AA, zmierzone 215,182,170, piksel w piksel) na lewej krawedzi karty wine - gold zostaje tylko na karcie --dark. */ .etapa--wine { background: var(--accent-deep); color: var(--text-on-dark); border-left-color: var(--blush); } .etapa__num { position: absolute; right: var(--space-6); top: var(--space-5); font-family: var(--font-display); font-size: 90px; font-style: italic; color: rgba(255,253,248,0.06); line-height: 1; } .etapa__kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); margin-bottom: var(--space-4); } .etapa h3 { font-size: 30px; margin-bottom: var(--space-6); } .etapa h3 em { color: var(--gold-light); } .etapa__list { list-style: none; margin: 0 0 var(--space-7); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-5); border-top: 1px solid var(--line-on-dark); padding-top: var(--space-5); } .etapa__list--flush { border-top: 0; padding-top: 0; } /* D41: bylo inline style na Etapie 2 */ .etapa__list li { font-size: 13px; display: flex; gap: var(--space-2); } /* D41: numery listy (01-08) byly bez koloru (dziedziczyly biale --text-on-dark przez opacity .55 = szarawy), pomiar wektorowy pokazal cieply zloty odcien (~156,127,88, blisko --gold-light stlumionego). */ .etapa__list li::before { content: attr(data-i); color: var(--gold-light); opacity: .7; } .etapa p.etapa__lead { font-size: 14px; color: var(--text-on-dark-muted); margin-bottom: var(--space-6); } .etapa__actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; } .etapa__actions a.link { font-size: 12px; text-decoration: underline; text-underline-offset: 4px; color: var(--text-on-dark-muted); } /* --- Platforma mockup ------------------------------------------------- */ .platforma { position: relative; background: var(--surface-paper); overflow: hidden; } /* D41 sekcja 06, dograne po zgloszeniu przy Social: watermark "PLATFORM" byl pominiety tym samym wzorcem co "BEAUTY"/"SOCIAL", zauwazone dopiero na zrzutach Pas CTA (fragment gornej krawedzi tamtej sekcji). Pomiar wektorowy makiety: sekcja on-light, wiec obrys WINEOWY (~92,50,56, rodzina --accent), nie bialy jak na sekcjach on-dark. Pozycja wyzej nad dolna krawedzia sekcji niz w Social (bottom ~65px vs 30px - mierzone relatywnie do dolnej krawedzi sekcji, nie viewportu). */ .platforma__watermark { position: absolute; z-index: 0; pointer-events: none; left: -10px; bottom: 65px; /* "PLATFORM" (8 znakow) jest szersze niz "SOCIAL" (6) - 21vw przy 768px dawalo 878px szerokosci watermarku (scrollWidth>clientWidth), skorygowane do 17vw zeby zmiescic sie przy tej samej dlugosci slowa na wezszych ekranach. */ font-family: var(--font-display); font-size: min(210px, 17vw); font-weight: 400; line-height: 1; letter-spacing: 0.02em; color: transparent; -webkit-text-stroke: 1px rgba(112, 41, 59, 0.08); text-stroke: 1px rgba(112, 41, 59, 0.08); white-space: nowrap; } .platforma > .container { position: relative; z-index: 1; } /* D41 sekcja 06: pomiar wektorowy makiety pokazal kolumny NIE 1fr/1fr (domyslne .split) - lewa (tekst+sciezka) ~448px, prawa (mockup) ~848px na kontenerze 1296px, stosunek ~1:1.9. Osobna klasa zamiast modyfikacji generycznego .split (uzywanego przez inne sekcje z rowna kolumna, nie ruszane). */ .platforma__split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.9fr); gap: var(--space-9); align-items: start; } @media (max-width: 900px) { .platforma__split { grid-template-columns: 1fr; } } .platforma__intro-text { margin-top: var(--space-5); color: var(--text-on-light-muted); } .platforma__cta { margin-top: var(--space-6); } .platforma__mockup { background: var(--surface-dark); color: var(--text-on-dark); padding: var(--space-3); border-radius: 18px; /* ramka urządzenia z makiety, nie element UI */ box-shadow: 0 30px 70px rgba(12, 9, 11, 0.28); } .platforma__mockup-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-4) var(--space-3); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-dark-muted); } .platforma__mockup-bar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 14px 0 0 var(--blush), 28px 0 0 rgba(255,253,248,.35); margin-right: 32px; } .platforma__mockup-media { position: relative; margin-bottom: var(--space-5); } .platforma__mockup-media img { margin-bottom: 0; } .platforma__mockup-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(12, 9, 11, 0.72); color: var(--text-on-dark); display: flex; align-items: center; justify-content: center; } .platforma__mockup-play svg { width: 18px; height: 18px; margin-left: 3px; } .sciezka { margin-top: var(--space-8); } /* D41: bylo var(--gold-hover) (brazowy zloty), pomiar wektorowy pokazal wyraznie wineowy odcien (~134,74,86, rodzina --accent), nie zloty. */ .sciezka__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ctx); font-weight: 700; margin-bottom: var(--space-3); } .sciezka h3 { font-size: var(--fs-display-3); } .sciezka__bar { position: relative; height: 2px; background: rgba(12, 9, 11, 0.28); margin: var(--space-6) 6px var(--space-3); } .sciezka__dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--surface-dark); } .sciezka__dot--start { left: 0; background: var(--accent); } .sciezka__dot--srodek { left: 50%; background: var(--gold); } .sciezka__dot--koniec { left: 100%; } .sciezka__labels { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--text-on-light-muted); } .sciezka .btn { margin-top: var(--space-6); } .sciezka__cta { --btn-solid-bg: var(--accent); --btn-solid-fg: var(--surface-white); } .platforma__mockup-body { display: grid; grid-template-columns: 240px 1fr; gap: 0; background: var(--surface-espresso); } .platforma__mockup-side { padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; min-height: 100%; } .platforma__mockup-logo { margin-bottom: var(--space-5); } .platforma__mockup-logo img { height: 34px; width: auto; } .platforma__mockup-course { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); margin-bottom: var(--space-1); } .platforma__mockup-course strong { display: block; font-family: var(--font-text); font-size: 13px; color: var(--text-on-dark); text-transform: none; letter-spacing: 0; margin-top: 2px; } .platforma__mockup-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .platforma__mockup-list li { font-size: 12px; padding: var(--space-3) var(--space-3); color: var(--text-on-dark-muted); } .platforma__mockup-list li.active { background: var(--accent); color: var(--text-on-dark); font-weight: 700; } /* D41: element z makiety calkowicie pominiety wczesniej ("POSTĘP 38%" + pasek pod lista modulow w panelu bocznym mockupu). Czysto dekoracyjny UI chrome mockupu (nie realna funkcja LearnDash na tej stronie), liczba 38% nie jest faktem o kliencie tylko przykladowa wartoscia demo w screenie makiety. */ .platforma__mockup-progress { margin-top: auto; padding-top: var(--space-6); } .platforma__mockup-progress p { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-dark-muted); margin-bottom: var(--space-2); } .platforma__mockup-progress-bar { height: 3px; background: rgba(255,253,248,.14); } .platforma__mockup-progress-bar span { display: block; height: 100%; background: var(--gold); } .platforma__mockup-main { background: var(--surface-cream); color: var(--text-on-light); padding: var(--space-6); } .platforma__mockup-main img { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-bottom: var(--space-5); } .platforma__mockup-main .lekcja-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-2); } .platforma__mockup-etap { margin-bottom: var(--space-4); } .platforma__mockup-main h4 { font-family: var(--font-display); font-size: 20px; margin: 0 0 var(--space-3); font-weight: 400; } .platforma__mockup-desc { font-size: 13px; color: var(--text-on-light-muted); } /* D41: przycisk "DALEJ" w rogu karty lekcji, wczesniej pominiety. Dekoracyjny (mockup nie jest prawdziwa nawigacja LearnDash), stad button bez href, aria-hidden+tabindex=-1 tak jak juz istniejacy .platforma__mockup-play. */ .platforma__mockup-lesson-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); } .platforma__mockup-next { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); background: var(--surface-dark); color: var(--text-on-dark); border: 0; padding: var(--space-3) var(--space-5); font-family: var(--font-text); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: default; } @media (max-width: 767px) { .platforma__mockup-body { grid-template-columns: 1fr; } } /* --- Pas CTA prosty -------------------------------------------------- */ /* D41 sekcja 07: tlo bylo --surface-dark (przez .on-dark), pomiar wektorowy makiety pokazal cieplejszy odcien (~41,26,22), dokladnie --surface-espresso (#271914), nie czarny .on-dark. .on-dark zostaje na sekcji (tekst/przycisk/ kontekst gold poprawne), --bg nadpisany osobno. Deko-r bylo calkowicie pominiete - kontrastowy zoom makiety pokazal wyrazny luk monogramu R przy prawej krawedzi, ten sam wzorzec co inne sekcje on-dark (01/06/11/12). */ .pas-cta-sekcja { background: var(--surface-espresso); padding-block: var(--space-9); } .pas-cta__h2 { font-size: var(--fs-display-3); } .pas-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; } /* D41: bylo var(--text-on-dark-muted) (biel stlumiona), pomiar wektorowy pokazal wyrazny zloty odcien (~162,132,89, rodzina --gold). */ .pas-cta__meta { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-top: var(--space-3); } /* --- Dla kogo ---------------------------------------------------------- */ .dla-kogo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: start; } /* D41 sekcja 08: pomiar wektorowy makiety pokazal cienka pionowa linie miedzy kolumna tekstu a kolumna listy (render x~1399 na kontenerze 72-1368, blisko srodka - potwierdza ze podzial 1fr/1fr juz jest poprawny, brakowalo tylko samej linii). Kolor bardzo subtelny (delta ~30 od tla), --line-ctx pasuje. */ .dla-kogo__col--list { border-left: 1px solid var(--line-ctx); padding-left: var(--space-9); } .dla-kogo__intro { margin-top: var(--space-5); color: var(--text-on-dark-muted); } .dla-kogo__cta { margin-top: var(--space-6); } .dla-kogo__list { display: flex; flex-direction: column; gap: var(--space-3); } .dla-kogo__item { display: flex; gap: var(--space-6); align-items: baseline; padding: var(--space-5) var(--space-6); border: 1px solid var(--line-ctx); background: rgba(255, 253, 248, 0.03); } /* D41: bylo var(--accent-ctx) (=gold na on-dark, juz OK), h2 em obok bylo BEZ koloru w ogole - pomiar wektorowy H2 em pokazal cieply zloty (~203,178,142, rodzina --gold-light), dziedziczylo biel. */ .dla-kogo__item em { font-family: var(--font-display); font-style: italic; font-size: 26px; color: var(--accent-ctx); width: 40px; flex: none; } .dla-kogo__item strong { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; } .dla-kogo__item span { font-size: 13px; color: var(--fg-muted); } #dla-kogo h2 em { color: var(--gold-light); } @media (max-width: 900px) { .dla-kogo { grid-template-columns: 1fr; } .dla-kogo__col--list { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-ctx); padding-top: var(--space-7); margin-top: var(--space-2); } } /* --- Pakiety ------------------------------------------------------------- */ .pakiety { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); margin-top: var(--space-8); } @media (max-width: 900px) { .pakiety { grid-template-columns: 1fr; } } .pakiety__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; } .pakiety__intro { max-width: 34ch; font-size: 14px; color: var(--fg-muted); } /* D41 sekcja 09: border-left bylo 4px, pomiar wektorowy makiety (trzy niezalezne probki y) pokazal ~7-7.5px canonical, zaokraglone do 8px. */ .pakiet { padding: var(--space-8) var(--space-7); background: var(--surface-white); border-left: 8px solid var(--surface-dark); box-shadow: var(--shadow-karta); } .pakiet--premium { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); color: var(--text-on-dark); border-left-color: var(--gold); --btn-solid-bg: var(--gold); --btn-solid-fg: var(--surface-dark); } .pakiet--premium .btn--solid:hover { /* 15.09.2026 (D44): karta nadpisuje --btn-solid-bg na zloto (dobry kontrast na winnym tle w spoczynku), ale NIE nadpisywala --accent-ctx-hover - hover dziedziczyl go z zewnetrznego kontekstu sekcji (.on-light, --accent-ctx-hover:var(--accent-hover) =#491923), ktory przypadkiem jest PRAWIE IDENTYCZNY z koncem gradientu tej karty (--accent-deep, tez #491923) - przycisk na hover znikal w tle karty. Zgloszone przez Jakuba zrzutem. Zamiast kolejnego koloru wypelnienia: transparent + biala obwodka/tekst (tlo karty ciemne winne, bialy zawsze czytelny), spojne z zasada "primary na tle primary -> transparent+outline" ustalona z Jakubem. */ background: transparent; border-color: var(--surface-white); color: var(--surface-white); } .pakiet__list-intro { font-size: 13px; margin-bottom: var(--space-4); } .pakiet__label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin-bottom: var(--space-4); } .pakiet--premium .pakiet__label { color: var(--gold-light); } .pakiet__desc { font-size: 13px; color: var(--text-on-light-muted); margin-bottom: var(--space-6); } .pakiet--premium .pakiet__desc { color: var(--text-on-dark-muted); } .pakiet__price { display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-display); margin-bottom: var(--space-6); border-bottom: 1px solid var(--line-on-light); padding-bottom: var(--space-6); } .pakiet--premium .pakiet__price { border-color: var(--line-on-dark); } .pakiet__price strong { font-size: 48px; font-weight: 400; } /* D41: dziedziczylo font-display (Bodoni) z rodzica .pakiet__price - etykieta jednostki ("zł") to maly uppercase label, ten sam typ co eyebrow/kicker/meta sitewide (zawsze Manrope), nie liczba ceny. Jawny reset. */ .pakiet__price span { font-family: var(--font-text); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; } .pakiet__list { list-style: none; margin: 0 0 var(--space-7); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); counter-reset: pakiet; } .pakiet__list li { font-size: 13px; padding-left: var(--space-6); position: relative; counter-increment: pakiet; } /* D41: numery listy byly bez koloru (dziedziczyly tekst rodzica x opacity .55), pomiar wektorowy Basic pokazal wyrazny wineowy odcien (~137,79,93, rodzina --accent), nie zwykla stlumiona czern. --accent-ctx dziala jednakowo w obu kartach (sekcja on-light), na Premium (tlo gradient wine) nadal daje widoczny, tylko cichszy kontrast - zgodne z makieta. */ .pakiet__list li::before { content: counter(pakiet, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-size: 11px; letter-spacing: .06em; color: var(--accent-ctx); opacity: .85; } /* --accent-ctx na sekcji on-light = wine, nieczytelne na wine-gradient tle Premium (pierwsza proba, zlapane od razu na zrzucie - wine-na-wine). Premium dostaje gold-light, ten sam ton co juz .pakiet--premium .pakiet__label. */ .pakiet--premium .pakiet__list li::before { color: var(--gold-light); opacity: .9; } .pakiet__meta { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: var(--space-4); opacity: .7; } .pakiet__meta--premium { text-transform: none; letter-spacing: 0; font-size: 12px; opacity: .85; } /* --- Zespół -------------------------------------------------------------- */ .zespol__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-4); } /* D41 sekcja 10: bylo var(--text-on-dark-muted) (biel stlumiona), pomiar wektorowy pokazal wyrazny zloty odcien (~169,139,93, rodzina --gold). */ .zespol__social { display: flex; gap: var(--space-5); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--gold); } /* D41 audyt hover, RADZIOCH_DESIGN_SYSTEM.md pkt 4: strzalka linku tekstowego przesuwa sie 4px w osi X na hover, 180ms, bez zmiany skali calego linku. .link-arrow to wspolny span uzyty we wszystkich linkach-strzalkach na home (Zespol, Inne szkolenia, karty szkolen). */ .link-arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease); } .zespol__social a:hover .link-arrow, .inne__link:hover .link-arrow, .szkolenie-card__link:hover .link-arrow { transform: translateX(4px); } .zespol__social a { transition: color var(--dur-base) var(--ease); } .zespol__social a:hover { color: var(--gold-light); } .zespol__social a:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; } .zespol { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); margin-top: var(--space-8); } .osoba { display: grid; grid-template-columns: 38% 1fr; border: 1px solid var(--line-on-dark); background: rgba(255, 253, 248, 0.02); } .osoba img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; margin: 0; } .osoba__body { padding: var(--space-6); display: flex; flex-direction: column; } .osoba__name { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-2); } .osoba h3 { font-size: 24px; margin-bottom: var(--space-4); } .osoba h3 em { color: var(--gold-light); } .osoba p { font-size: 13px; color: var(--text-on-dark-muted); margin-bottom: var(--space-4); } .osoba__bio-full { display: none; } .osoba.is-open .osoba__bio-full { display: block; } .osoba.is-open .osoba__bio-short { display: none; } .osoba .btn { margin-top: auto; align-self: flex-start; } @media (max-width: 1024px) { .zespol { grid-template-columns: 1fr; } } @media (max-width: 700px) { .osoba { grid-template-columns: 40% 1fr; } .osoba img { min-height: 0; } .osoba__body { padding: var(--space-4); min-width: 0; } .osoba h3 { font-size: 20px; } .osoba .btn { width: 100%; padding-inline: var(--space-3); font-size: 11px; white-space: normal; text-align: center; } } /* --- Social -------------------------------------------------------------- */ /* D41 sekcja 11: tlo bylo inline var(--surface-espresso) - teraz klasa. Watermark "SOCIAL" byl calkowicie pominiety w kodzie (zero uzyc), kontrastowy zoom makiety ujawnil wielki obrysowy napis w lewym dolnym rogu, ten sam wzorzec co "BEAUTY" w Hero (D41 wczesniej) - tam realny plik SVG istnial w paczce, tutaj NIE MA gotowego assetu "social-outline.svg" w 00-global, wiec zaimplementowane jako prawdziwy tekst HTML (zgodne z implementation-guide "tekst jako HTML, nie raster") ostylowany konturem zamiast wypelnienia. Ten sam wzorzec (Bodoni, opacity ~.06-.08) prawdopodobnie dotyczy tez sekcji 06 Platforma ("PLATFORM" widoczne w tle na zrzutach z tamtej tury, wtedy nie zlapane) - zgloszone w raporcie do Jakuba, nie naprawiane wstecznie bez zgody. */ .social-sekcja { position: relative; background: var(--surface-espresso); overflow: hidden; } .social-sekcja__watermark { position: absolute; z-index: 0; pointer-events: none; left: -20px; bottom: 30px; /* D41: bylo font-size stale 220px + media query skok przy 767px - 768px (tuz POZA progiem max-width:767) renderowal desktopowy rozmiar w wezszym viewporcie i psul scrollWidth na sekcji (ten sam wzorzec co watermark Hero/monogram R wczesniej w tej sesji). Skalowanie plynne przez vw eliminuje luke miedzy 767 a 768 zamiast kolejnego twardego progu. */ font-family: var(--font-display); font-size: min(220px, 22vw); font-weight: 400; line-height: 1; letter-spacing: 0.02em; color: transparent; -webkit-text-stroke: 1px rgba(255, 253, 248, 0.045); text-stroke: 1px rgba(255, 253, 248, 0.045); white-space: nowrap; } .social-sekcja > .container { position: relative; z-index: 1; } .social__intro { margin-top: var(--space-4); color: var(--text-on-dark-muted); max-width: 40ch; } .social__actions { display: flex; gap: var(--space-4); margin-top: var(--space-7); flex-wrap: wrap; } .social { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--space-9); align-items: center; } @media (max-width: 900px) { .social { grid-template-columns: 1fr; gap: var(--space-7); } } .social__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .social__item { position: relative; aspect-ratio: 3/4; overflow: hidden; } .social__item img { width: 100%; height: 100%; object-fit: cover; } .social__item span { position: absolute; left: var(--space-4); bottom: var(--space-4); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-on-dark); background: rgba(12,9,11,0.55); padding: 6px 10px; } @media (max-width: 767px) { .social__grid { gap: var(--space-2); } .social__item span { font-size: 8px; left: var(--space-2); bottom: var(--space-2); padding: 4px 6px; } } /* --- Inne szkolenia -------------------------------------------------------- */ /* D41 sekcja 12: h2 em ("w wybranym formacie.") byl bez koloru (dziedziczyl ciemny atrament), pomiar wektorowy pokazal dokladnie --accent (113,43,60 vs token 112,41,59, prawie zero odchylenia). */ .inne h2 em { color: var(--accent-ctx); } .inne { display: grid; grid-template-columns: 1fr 2.2fr; gap: var(--space-9); align-items: start; } .inne__intro { margin-top: var(--space-5); color: var(--text-on-light-muted); max-width: 32ch; } .inne__link { display: inline-block; margin-top: var(--space-5); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; transition: color var(--dur-base) var(--ease); } .inne__link:hover { color: var(--accent-hover, var(--accent-deep)); } .inne__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .inne-szkolenia { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } @media (max-width: 900px) { .inne { grid-template-columns: 1fr; gap: var(--space-7); } .inne-szkolenia { grid-template-columns: 1fr; gap: var(--space-3); } .szkolenie-card { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto; } .szkolenie-card img { grid-row: 1 / 3; height: 100%; aspect-ratio: auto; } .szkolenie-card__body, .szkolenie-card__link { grid-column: 2; } .szkolenie-card__link { padding-top: 0; } } /* D41 sekcja 12: akcentowa linia wine byla na SPODZIE calej karty (pod linkiem "Zobacz"), pomiar wektorowy makiety pokazal ja MIEDZY zdjeciem a tekstem, nie na dole. Przeniesiona z .szkolenie-card na sam obrazek. */ .szkolenie-card { background: var(--surface-white); } .szkolenie-card img { aspect-ratio: 4/3; object-fit: cover; border-bottom: 3px solid var(--accent); } .szkolenie-card__body { padding: var(--space-5); } .szkolenie-card__body strong { display: block; font-size: 14px; margin-bottom: var(--space-2); } /* D41: podpis (np. "90 LEKCJI / 6 MIESIĘCY") byl w stlumionej szarosci, pomiar wektorowy pokazal wyrazny wineowy kolor (rodzina --accent). */ .szkolenie-card__body span { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } .szkolenie-card__link { display: flex; justify-content: flex-end; padding: var(--space-3) var(--space-5) var(--space-5); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); transition: color var(--dur-base) var(--ease); } .szkolenie-card__link:hover { color: var(--accent-deep); } .szkolenie-card__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* --- Opinie karuzela ------------------------------------------------------- */ /* D41 15.09: sekcja odkryta (Jakub odwraca D16pkt11), pelny pomiar wektorowy pierwszy raz (wczesniej tylko D33, przed RADZIOCH_DESIGN_SYSTEM.md). */ .opinie__h2 { margin-bottom: var(--space-8); } .opinie__slide { max-width: 780px; margin-inline: auto; background: var(--surface-cream); color: var(--text-on-light); padding: var(--space-8); position: relative; } /* D41: bez font-family, dziedziczylo Manrope. implementation-guide.md: Bodoni dla "wyroznionych cytatow" - ten duzy cudzyslow to dokladnie ten przypadek. */ .opinie__quote { font-family: var(--font-display); font-size: 40px; color: var(--accent); margin-bottom: var(--space-4); } .opinie__text { font-family: var(--font-display); font-size: 20px; } .opinie__text em { color: var(--accent); } .opinie__meta { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line-on-light); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-on-light-muted); } .opinie__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-8); margin-top: var(--space-6); } /* D41: strzalki byly kwadratowe, jednakowo stylowane - pomiar wektorowy pokazal OKRAGLE przyciski, "poprzednia" = kontur, "nastepna" = pelne zloto (ten sam wzorzec solid/outline co przyciski btn--solid/outline gdzie indziej, tu zastosowany do nawigacji karuzeli). Jedyny drugi wyjatek od "kanciastej" makiety poza maska zdjecia hero (tokens.css komentarz do zaktualizowania przy kolejnej rundzie audytu tokenow). Wylaczone (disabled) bo jest tylko 1 realny slajd (placeholder) - nie udajemy dzialajacej karuzeli bez tresci do przewijania (D11/braki-materialy: brak JS, statyczny uklad na start). */ .opinie__arrow { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--line-on-dark); background: transparent; color: var(--text-on-dark); } .opinie__arrow--next { background: var(--gold); border-color: var(--gold); color: var(--surface-dark); } .opinie__arrow[disabled] { opacity: .55; cursor: not-allowed; } .opinie__dots { display: flex; gap: var(--space-2); } .opinie__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-on-dark); } .opinie__dots span.active { background: var(--gold); } /* --- CTA końcowe ------------------------------------------------------------- */ .cta-koncowe-sekcja { position: relative; overflow: hidden; color: var(--surface-dark); background: url("../img/dekoracje/gold-gradient.svg") center / cover no-repeat, var(--gold-light); } .cta-koncowe-sekcja::after { content: ""; position: absolute; right: 0; top: 0; width: 400px; height: 440px; pointer-events: none; color: var(--surface-dark); background: url("../img/dekoracje/editorial-rings.svg") right -120px top -80px / 520px 520px no-repeat; opacity: .9; } .cta-koncowe-sekcja > .container { position: relative; z-index: 1; } /* D41 sekcja 14 (dograna po CTA koncowe D33, przed RADZIOCH_DESIGN_SYSTEM.md): 11 inline styli usuniete. Kolory H2/em/eyebrow byly juz poprawne co do tokenu (accent-deep/surface-dark), tylko zapisane inline - przeniesione do klas bez zmiany wartosci. */ .cta-koncowe__eyebrow { color: var(--accent-deep); } .cta-koncowe__h2 { color: var(--surface-dark); } .cta-koncowe__h2 em { color: var(--accent-deep); } .cta-koncowe__lead { margin-top: var(--space-4); } .cta-koncowe__actions { display: flex; gap: var(--space-4); margin-top: var(--space-7); flex-wrap: wrap; } .cta-koncowe__cta-primary { --btn-solid-bg: var(--surface-dark); --btn-solid-fg: var(--surface-white); } .cta-koncowe__cta-primary.btn--solid:hover { /* 15.09.2026 (D44): sekcja ma zlote tlo (gold-gradient.svg + --gold-light), przycisk w spoczynku jest celowo ciemny (dobry kontrast), ale hover dziedziczyl domyslny fallback --gold-hover (sekcja nie ma klasy kontekstu .on-*) - zloty hover na zlotym tle sekcji, przycisk znikal. Zgloszone przez Jakuba zrzutem. transparent + czarna obwodka/tekst, ta sama zasada co .pakiet--premium wyzej, tu czarny bo tlo sekcji jasne/zlote. */ background: transparent; border-color: var(--surface-dark); color: var(--surface-dark); } .cta-koncowe__cta-secondary { border-color: var(--surface-dark); color: var(--surface-dark); } .cta-koncowe__cta-secondary:hover { /* 15.09.2026 (D44): sekcja bez klasy .on-* (kontekst nieustawiony), wiec generyczny .btn--outline:hover polegalby na fallbackach - tu jawnie, spojnie z sasiednim przyciskiem primary: ciemne wypelnienie, biale tekst, dobry kontrast na zlotym tle. */ background: var(--surface-dark); border-color: var(--surface-dark); color: var(--surface-white); } .cta-koncowe { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-9); } @media (max-width: 900px) { .cta-koncowe { grid-template-columns: 1fr; } } /* D41: pionowy dywider miedzy kolumnami calkowicie pominiety, pomiar wektorowy pokazal cienka linie (~167,137,97 na tle ~206,170,119, przyciemniony wariant tla, nie osobny jasny/ciemny token) - rgba(12,9,11,.2) daje wizualnie ten sam efekt przyciemnienia zlotego tla. */ .cta-koncowe__col--list { border-left: 1px solid rgba(12, 9, 11, 0.2); padding-left: var(--space-9); } @media (max-width: 900px) { .cta-koncowe__col--list { border-left: 0; padding-left: 0; border-top: 1px solid rgba(12,9,11,.2); padding-top: var(--space-7); margin-top: var(--space-2); } } .cta-koncowe__list-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--space-5); } .cta-koncowe__list { border-top: 1px solid rgba(12,9,11,0.18); padding-top: var(--space-5); } .cta-koncowe__item { display: flex; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; } /* D41: numery listy (01-03) byly bez koloru (dziedziczyly --surface-dark z sekcji), pomiar wektorowy pokazal wyrazny wineowy odcien, ta sama rodzina co H2 em w tej samej sekcji (--accent-deep, juz uzywane obok). */ .cta-koncowe__item em { font-family: var(--font-display); font-style: italic; font-size: 20px; width: 28px; flex: none; color: var(--accent-deep); } .cta-koncowe__disclaimer { font-size: 11px; margin-top: var(--space-5); opacity: .75; } /* --- Stopka ------------------------------------------------------------------ */ .site-footer { background: var(--surface-dark); color: var(--text-on-dark); padding-block: var(--space-9); } .site-footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-6); padding-bottom: var(--space-8); border-bottom: 1px solid var(--line-on-dark); } @media (min-width: 901px) { .site-footer--platforma .site-footer__top { grid-template-columns: 1.4fr repeat(3, 1fr); } } .site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } /* D32 14.09: logo stopki bylo 44px, zmierzone z paczka-projekt/01-strona-glowna/00-full-desktop.png (canvas 1:1 z realnym px, kanon 1440) na ~65px wysokosci monogramu - blisko juz zweryfikowanego w D24 rozmiaru monogramu naglowka (56px, ta sama miara pikselowa co header). Wybrane 56px zamiast surowej wartosci 65 z tego pomiaru: dwie niezalezne miary (nowy pomiar stopki vs juz zatwierdzony pomiar naglowka) powinny sie zgadzac dla tego samego assetu logo, 56px jest bardziej wiarygodne (D24 mial pelna, dedykowana sesje pomiarowa). */ .site-footer__brand img { height: 56px; } .site-footer__brand .site-header__logo-text { align-items: flex-start; } .site-footer__brand .site-header__logo-text strong { font-size: 15px; padding-left: 0; } .site-footer__brand .site-header__logo-text span { font-size: 7px; padding-left: 0; } .site-footer__col strong { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--surface-white); margin-bottom: var(--space-4); } /* D41 audyt hover, RADZIOCH_DESIGN_SYSTEM.md sekcja 18, cytat doslowny: "linki: 14px, kolor rgba(255,253,248,.68), hover do --rbt-white z przesunieciem/ krotka linia maksymalnie 4 px". Jakub zglosil wprost: zero hover na tych linkach do dzisiaj (bylo 13px, brak jakiegokolwiek :hover). Rozmiar poprawiony na 14px, dodany hover: kolor + przesuniecie 4px + podkreslenie (nie sama zmiana koloru, zgodnie z proba "nie tylko kolor"). */ .site-footer__col a, .site-footer__col span { display: block; font-size: 14px; color: var(--text-on-dark-muted); margin-bottom: var(--space-2); } .site-footer__col a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), text-decoration-color var(--dur-base) var(--ease); } .site-footer__col a:hover { color: var(--text-on-dark); transform: translateX(4px); text-decoration-color: currentColor; } .site-footer__col a:focus-visible { outline: 2px solid var(--surface-white); outline-offset: 4px; } /* D32 14.09: dodane text-transform+letter-spacing - makieta (00-full-desktop.png, wszystkie sprawdzone podstrony) pokazuje caly dolny rzad (copyright/regulamin/polityka) wersalikami, live renderowal sie normalnym tekstem (brak wlasciwosci w ogole). */ .site-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-6); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-on-dark-muted); flex-wrap: wrap; gap: var(--space-3); } .site-footer__bottom a { text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); display: inline-block; } .site-footer__bottom a:hover { color: var(--text-on-dark); transform: translateX(4px); } .site-footer__bottom a:focus-visible { outline: 2px solid var(--surface-white); outline-offset: 4px; } @media (max-width: 900px) { /* D32 14.09: makieta mobile (01-strona-glowna/00-full-mobile.png ORAZ 15-menu/00-full-mobile.png, dwa niezalezne zrodla, zgodne ze soba) pokazuje na mobile TYLKO logo pelnej szerokosci + Kontakt + Social media - kolumny Oferta i Studio znikaja calkowicie, nie tylko sie zawijaja. Wczesniej live pokazywal wszystkie 4 kolumny w siatce 2 kolumn (w tym Oferta/Studio), rozjazd z makieta. */ .site-footer__top { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } .site-footer__col--oferta, .site-footer__col--studio { display: none; } } @media (max-width: 600px) { .site-footer__bottom { flex-direction: column; align-items: flex-start; } } /* F-PLAT stopka platformy kursowej, copy-0hg.4 16.09.2026: rozjazd wobec makiety (qa/dowody/globalne/raport-16-09.md): desktop 321px -> cel 264px (+22%), mobile 572px -> cel 150px (+281%, "duzy rozjazd" zgloszony w raporcie). Diagnoza po zestawieniu z qa/kadry/lista/mobile/stopka.png (kadr 150px, realny render policzony rzad-po-rzad przez detekcje tuszu): PRZYCZYNA GLOWNA na mobile jest bug ukladu, nie roznica w makiecie - regula chowajaca kolumny stopki na mobile (@media 900px wyzej) celuje w klasy --oferta/--studio z wariantu "strona" (H-MKT/F-MKT), ktorych F-PLAT nie uzywa (ma --platforma/--pomoc), wiec regula nigdy nie trafiala i WSZYSTKIE 4 kolumny renderowaly sie w pelni na mobile zamiast doc. docelowych 2 (Kontakt, Social). Kadr pokazuje tez oba linki w kazdej z tych kolumn (mail/telefon, Instagram/TikTok) w JEDNEJ linii, nie w osobnych blokach jak dzis - to samo widac na kadrze desktop (linki spolecznosciowe jedna linia), wiec merge linkow zastosowany na obu szerokosciach. Skopowane WYLACZNIE do .site-footer--platforma (dodane tylko w wariancie pelnym F-PLAT w footer.php, wariant minimalny na /logowanie/ NIETKNIETY, poza zakresem copy-0hg.4), .site-footer bazowy (branch "strona") bez zmian - P2 "GLOBALNE PLATFORMY ZAMROZONE" zero regresji. */ .site-footer--platforma { padding-block: var(--space-8); } .site-footer--platforma .site-footer__top { padding-bottom: var(--space-6); } .site-footer--platforma .site-footer__col--kontakt a, .site-footer--platforma .site-footer__col--social a { display: inline; margin-bottom: 0; } .site-footer--platforma .site-footer__col--kontakt a:not(:last-child)::after { content: " / "; color: var(--text-on-dark-muted); } .site-footer--platforma .site-footer__col--social a:not(:last-child)::after { content: " "; } @media (max-width: 900px) { /* Kadr mobile (150px) nie ma budzetu na wysokosci --space-9/--space-6/ --space-4 bazowe (same by zjadly caly cel), a nasz obowiazkowy credit "Projekt i realizacja" (checklist wordpress-stack.md) nie wystepuje w kadrze Karola w ogole - stopka nie zejdzie do dokladnych 150px bez usuniecia tego creditu, czego nie robie samowolnie (poza moim mandatem, patrz raport copy-0hg.4). Ponizej maksymalna kompresja przy zachowaniu czytelnosci i creditu: --space-3 zamiast --space-5/6/9 na paddingach/odstepach pionowych, mniejsze logo. */ .site-footer--platforma { padding-block: var(--space-3); } .site-footer--platforma .site-footer__col--platforma { display: none; } .site-footer--platforma .site-footer__top { grid-template-columns: 1fr; gap: var(--space-3); padding-bottom: var(--space-3); } .site-footer--platforma .site-footer__brand { grid-column: 1 / -1; gap: 4px; } .site-footer--platforma .site-footer__brand img { height: 22px; } .site-footer--platforma .site-footer__brand .site-header__logo-text strong { font-size: 10px; } .site-footer--platforma .site-footer__brand .site-header__logo-text span { font-size: 6px; margin-top: 2px; } .site-footer--platforma .site-footer__col strong { margin-bottom: var(--space-2); } .site-footer--platforma .site-footer__bottom { padding-top: var(--space-3); } } /* --- Fade in wejścia, zgodnie ze standardem --------------------------- */ .fade-in-grupa > * { opacity: 0; transform: translateY(16px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .fade-in-grupa.is-visible > * { opacity: 1; transform: none; } .fade-in-grupa.is-visible > *:nth-child(2) { transition-delay: 80ms; } .fade-in-grupa.is-visible > *:nth-child(3) { transition-delay: 160ms; } /* ========================================================================== F2, 14.09.2026: dropdown nawigacji, ikony konto/koszyk, mobile jasne. Dopisane na koncu pliku, wygrywa z regulami .site-header__nav/.site-header__mobile wyzej przy tej samej specyficznosci (kolejnosc w kaskadzie). ========================================================================== */ .site-header__nav-item { position: relative; display: inline-flex; align-items: center; } .site-header__nav-item--dropdown:last-child .site-header__dropdown { left: auto; right: 0; } .site-header__nav-trigger { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 0; cursor: pointer; padding: 0; margin: 0; font-family: var(--font-text); font-size: var(--fs-small); /* 14.09 D27: dopasowane do sasiedniego .site-header__nav a, ten sam token */ font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: inherit; /*