/* Theme Name: Pieniądz — motyw potomny Theme URI: https://patrykkomisarczyk.pl Description: Motyw potomny GeneratePress dla landingu i sklepu książki „Pieniądz. Sztuka mądrego inwestowania" Patryka Komisarczyka. Landing kodowany ręcznie, strony sklepu na szablonach motywu nadrzędnego. Author: Tomasz Węcki Template: generatepress Version: 1.0.0 Text Domain: pieniadz-child */ /* ===================================================================== 1. ZMIENNE Paleta wyciągnięta z PDF-a makiety — wartości rzeczywiste, nie z oka. ===================================================================== */ :root { --pk-zloty: #aa823e; --pk-zloty-jasny: #c69c52; --pk-zloty-ciemny: #8b6a31; --pk-grafit: #231f20; --pk-czern: #060707; --pk-czern-mieka: #0d0d0e; --pk-biel: #ffffff; --pk-szary: #6b6b6b; --pk-szary-jasny: #e6e4e2; /* Kroje. Podmiana = zmiana jednej linii. Oryginały z makiety (Myriad Pro, Minion Pro) mają licencję desktopową Adobe, która NIE obejmuje osadzania na stronie. */ --pk-font-naglowek: 'Encode Sans Semi Condensed', system-ui, 'Segoe UI', sans-serif; --pk-font-tekst: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif; --pk-font-cytat: 'Source Serif 4', Georgia, 'Times New Roman', serif; --pk-max: 1200px; --pk-gap: clamp(1.5rem, 4vw, 4rem); --pk-sekcja-y: clamp(3.5rem, 8vw, 7rem); --pk-przejscie: 180ms ease; } /* ===================================================================== 2. FONTY Pliki .woff2 wgrywasz do /fonts/ — instrukcja w fonts/README.md. Do czasu ich wgrania strona korzysta z krojów systemowych z fallbacku. ===================================================================== */ @font-face { font-family: 'Encode Sans Semi Condensed'; src: url('fonts/encode-sans-semi-condensed-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Sans 3'; src: url('fonts/source-sans-3-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Sans 3'; src: url('fonts/source-sans-3-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Sans 3'; src: url('fonts/source-sans-3-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/source-serif-4-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } /* ===================================================================== 3. RESET WŁASNY Szablon landingu jest samodzielny — nie wypisuje kontenerów GeneratePressa (.site-content, #page, #primary), więc nie ma czego neutralizować. Arkusz motywu nadrzędnego nadal się ładuje i wnosi przydatny reset; poniżej tylko to, czego brakuje. UWAGA na przyszłość: gdyby ktoś przywrócił w szablonie get_header(), wróci `.site-content { display: flex }` z GeneratePressa i pasek, treść oraz stopka ustawią się w trzech kolumnach obok siebie. ===================================================================== */ body.page-template-page-landing { margin: 0; padding: 0; } .page-template-page-landing img { max-width: 100%; height: auto; } .page-template-page-landing a { color: inherit; } /* Zabezpieczenie szerokości. Landing to sekcje wypisane wprost w , bez żadnego kontenera. Gdyby jakikolwiek arkusz z zewnątrz — WooCommerce, wtyczka, motyw nadrzędny — próbował narzucić szerokość korpusowi albo sekcjom, strona zwęziłaby się do kolumny na tle pustej przeglądarki. Poniższe trzy reguły trzymają pełną szerokość niezależnie od tego, co dołoży się w przyszłości. */ html:has(body.page-template-page-landing), body.page-template-page-landing { width: auto; max-width: none; float: none; } body.page-template-page-landing > header, body.page-template-page-landing > main, body.page-template-page-landing > footer, body.page-template-page-landing > section { width: 100%; max-width: none; float: none; } /* ===================================================================== 4. PODSTAWY ===================================================================== */ body.page-template-page-landing { font-family: var(--pk-font-tekst); color: var(--pk-grafit); background: var(--pk-biel); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; } .page-template-page-landing h1, .page-template-page-landing h2, .page-template-page-landing h3 { font-family: var(--pk-font-naglowek); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.12; margin: 0 0 1rem; } .page-template-page-landing h2 { font-size: clamp(1.65rem, 3.4vw, 2.35rem); } .pk-ciemna { background: var(--pk-czern-mieka); color: var(--pk-biel); } .pk-ciemna h2 { color: var(--pk-zloty); } .pk-skip { position: absolute; left: -9999px; background: var(--pk-grafit); color: #fff; padding: .75rem 1.25rem; z-index: 999; } .pk-skip:focus { left: 1rem; top: 1rem; } .page-template-page-landing :focus-visible { outline: 3px solid var(--pk-zloty); outline-offset: 2px; } .pk-ikona { flex-shrink: 0; vertical-align: middle; } /* ===================================================================== 5. PRZYCISKI ===================================================================== */ .pk-btn { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--pk-font-naglowek); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; padding: .95rem 2rem; border: 2px solid var(--pk-zloty); color: var(--pk-zloty); background: transparent; cursor: pointer; transition: background var(--pk-przejscie), color var(--pk-przejscie), border-color var(--pk-przejscie); } .pk-btn:hover, .pk-btn:focus-visible { background: var(--pk-zloty); color: var(--pk-czern); } .pk-btn--zloty { background: var(--pk-zloty); color: var(--pk-czern); } .pk-btn--zloty:hover, .pk-btn--zloty:focus-visible { background: var(--pk-zloty-jasny); border-color: var(--pk-zloty-jasny); color: var(--pk-czern); } .pk-btn:active { transform: translateY(1px); } /* ===================================================================== 6. PASEK NAWIGACJI ===================================================================== */ .pk-pasek { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--pk-szary-jasny); } .pk-pasek__wrap { max-width: var(--pk-max); margin: 0 auto; padding: .85rem clamp(1rem, 3vw, 2rem); display: flex; align-items: center; gap: 1.5rem; } .pk-pasek__logo { font-family: var(--pk-font-naglowek); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; color: var(--pk-grafit); text-decoration: none; margin-right: auto; } .pk-pasek__nav ul { display: flex; gap: clamp(1rem, 3vw, 2.75rem); list-style: none; margin: 0; padding: 0; } .pk-pasek__nav a { color: var(--pk-grafit); text-decoration: none; font-size: .95rem; padding: .35rem 0; border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--pk-przejscie), border-color var(--pk-przejscie); } .pk-pasek__nav a:hover, .pk-pasek__nav a:focus-visible { color: var(--pk-zloty); border-bottom-color: var(--pk-zloty); } .pk-pasek__koszyk { display: flex; align-items: center; gap: .5rem; color: var(--pk-grafit); text-decoration: none; font-size: .9rem; white-space: nowrap; } .pk-pasek__koszyk:hover { color: var(--pk-zloty); } .pk-pasek__burger { display: none; background: none; border: 0; padding: .35rem; cursor: pointer; color: var(--pk-grafit); } .pk-burger-close { display: none; } .pk-pasek__burger[aria-expanded="true"] .pk-burger-open { display: none; } .pk-pasek__burger[aria-expanded="true"] .pk-burger-close { display: block; } /* ===================================================================== 7. HERO ===================================================================== */ .pk-hero { --pk-ksiazka: clamp(320px, 56vw, 700px); /* szerokość okładki */ --pk-ksiazka-zejscie: clamp(1.5rem, 4vw, 3.5rem); /* ile schodzi w ciemną sekcję */ --pk-hero-dol: clamp(2rem, 4vw, 3.5rem); /* dolny odstęp sekcji */ /* Przycinamy TYLKO w poziomie: okładka wychodzi poza prawą krawędź ekranu i bez tego pojawia się pasek przewijania. Pionowo zostaje `visible`, bo dolny róg musi wejść w sekcję poniżej. `clip` zamiast `hidden` — `hidden` zrobiłby z sekcji kontener przewijania i uciąłby też pion. */ overflow-x: clip; overflow-y: visible; } .pk-hero__wrap { max-width: var(--pk-max); margin: 0 auto; padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2rem) var(--pk-hero-dol); display: grid; /* Cytat dostaje więcej miejsca niż wcześniej — pierwszy wers („…niczego nie zmienia.") musi się zmieścić bez zawijania. */ grid-template-columns: 1.15fr 1fr; align-items: center; gap: var(--pk-gap); } .pk-hero__cytat { margin: 0; border: 0; padding: 0; } .pk-hero__cytat p { font-family: var(--pk-font-cytat); font-style: italic; font-size: clamp(1.15rem, 2.1vw, 1.55rem); line-height: 1.55; color: var(--pk-grafit); margin: 0 0 1.5rem; } /* Wersy łamane dokładnie tam, gdzie chce graficzka — nie tam, gdzie wypadnie z szerokości kolumny. Bez tego „zmienia." znowu zsunie się do osobnej linijki przy węższym oknie. */ .pk-hero__wers { display: block; white-space: nowrap; } /* Pod cytatem: podpis odręczny, pod nim nazwisko. Oba do prawej. */ .pk-hero__podpis { display: block; font-style: normal; text-align: right; } .pk-hero__podpis img { display: block; margin-left: auto; width: clamp(180px, 22vw, 260px); height: auto; } .pk-hero__nazwisko { display: block; margin-top: .35rem; font-family: var(--pk-font-tekst); font-size: .95rem; color: var(--pk-szary); } /* Okładka: powiększona, dosunięta do dołu sekcji, dolnym rogiem wchodzi w ciemną sekcję mniej więcej na wysokości głowy z sekcji o autorze. z-index musi być WIĘKSZY niż 3 z .pk-autor__foto — inaczej ciemne tło następnej sekcji, która jest później w kodzie, zamalowałoby róg okładki. Plik jest przycięty do treści (bez przezroczystego marginesu), więc zejście liczy się wprost: dolny odstęp sekcji plus zamierzone wejście. */ .pk-hero__ksiazka { margin: 0; position: relative; z-index: 4; align-self: end; justify-self: end; } .pk-hero__ksiazka img { display: block; width: var(--pk-ksiazka); height: auto; max-width: none; margin-right: calc(-1 * clamp(0px, 6vw, 5rem)); margin-bottom: calc(-1 * (var(--pk-hero-dol) + var(--pk-ksiazka-zejscie))); } /* ===================================================================== 8. O AUTORZE ===================================================================== */ /* --pk-sylwetka — szerokość kolumny zarezerwowanej na figurę. --pk-wystaje — o ile głowa wychodzi ponad górną krawędź sekcji. */ .pk-autor { --pk-sylwetka: clamp(260px, 40vw, 480px); --pk-wystaje: clamp(2.5rem, 5vw, 6rem); } .pk-autor__wrap { max-width: var(--pk-max); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); display: grid; grid-template-columns: var(--pk-sylwetka) 1fr; gap: var(--pk-gap); align-items: start; position: relative; } /* Sylwetka: stopy na dolnej krawędzi ciemnej sekcji ORAZ głowa ponad górną. Oba warunki naraz, bez wiszenia w powietrzu. Sztuczka polega na tym, że ramka figury ma zadane JEDNOCZEŚNIE `top` i `bottom` — jej wysokość wynika więc z wysokości sekcji powiększonej o wystawanie i nie trzeba jej nigdzie podawać. Zdjęcie w środku dostaje `height: 100%` i `width: auto`, czyli skaluje się do tej wysokości, a szerokość dobiera sobie samo z proporcji. Postać rośnie dokładnie tyle, ile trzeba, żeby sięgnąć od podłogi ponad krawędź. Kontrola: przy sekcji ~680 px figura ma ~776 px wysokości, uszy siedzą na 13,9% jej wysokości (pomiar na pliku 1128 × 1800: szczyt głowy y≈10, skronie i uszy y≈250), czyli 108 px od góry figury. Wystawanie to 96 px — krawędź pada więc ~12 px nad uszami. */ .pk-autor__foto { position: absolute; left: clamp(1rem, 3vw, 2rem); top: calc(-1 * var(--pk-wystaje)); bottom: 0; width: var(--pk-sylwetka); margin: 0; z-index: 3; pointer-events: none; } .pk-autor__foto img { display: block; height: 100%; width: auto; max-width: none; /* Gdy wyliczona szerokość przekroczy zarezerwowaną kolumnę, nadmiar rozkłada się po równo na boki i chowa w odstępie między kolumnami. */ margin-inline: auto; } /* Tekst musi zostać w drugiej kolumnie — figura jest poza układem siatki, więc bez tego wskoczyłby na jej miejsce. */ .pk-autor__tekst { grid-column: 2; } .pk-autor__tekst { padding: var(--pk-sekcja-y) 0; } .pk-autor__tekst p { font-size: .97rem; line-height: 1.7; margin: 0 0 1.1rem; } .pk-autor__tekst p:last-of-type { margin-bottom: 0; } .pk-autor__nazwisko { font-family: var(--pk-font-naglowek); color: var(--pk-zloty); letter-spacing: .04em; } .pk-autor__cta { margin-top: 2rem; } /* ===================================================================== 9. O KSIĄŻCE ===================================================================== */ .pk-ksiazka { --pk-moneta: clamp(210px, 30vw, 400px); --pk-moneta-zejscie: clamp(1.5rem, 4vw, 3.5rem); /* ile STOPY schodzą poniżej sekcji */ overflow-x: clip; overflow-y: visible; } .pk-ksiazka__wrap { max-width: var(--pk-max); margin: 0 auto; padding: var(--pk-sekcja-y) clamp(1rem, 3vw, 2rem); display: grid; grid-template-columns: 1.5fr .8fr; gap: var(--pk-gap); align-items: center; } .pk-ksiazka__tekst p { margin: 0 0 1.1rem; } .pk-ksiazka__tekst p:last-of-type { margin-top: 2rem; margin-bottom: 0; } /* Moneta: powiększona, nogi postaci schodzą poniżej sekcji w biel następnego bloku. Uwaga na kompensację: plik ma pod stopami celowy przezroczysty pas (148 z 1201 px, czyli 12,3% wysokości — dodany po to, żeby stopy nie wyglądały na ucięte). Przy proporcji 1201/800 ten pas to 18,5% szerokości obrazka. Bez odjęcia go zejście liczyłoby się do pustej krawędzi pliku, a nie do widocznych stóp — i wizualnie nic by nie zeszło. Stąd trzy składniki: odstęp sekcji + przezroczysty pas + zamierzone zejście. */ .pk-ksiazka__moneta { margin: 0 0 calc(-1 * ( var(--pk-sekcja-y) + 0.185 * var(--pk-moneta) + var(--pk-moneta-zejscie) )); align-self: end; position: relative; z-index: 4; } .pk-ksiazka__moneta img { display: block; width: var(--pk-moneta); height: auto; max-width: none; margin-inline: auto; } /* ===================================================================== 10. DLA KOGO ===================================================================== */ .pk-dlakogo__wrap { display: grid; grid-template-columns: 0.85fr 1.4fr; align-items: center; } .pk-dlakogo__foto { margin: 0; height: 100%; } .pk-dlakogo__foto img { display: block; width: 100%; height: 100%; object-fit: cover; } .pk-dlakogo__lista { padding: var(--pk-sekcja-y) clamp(1.25rem, 4vw, 3.5rem); } .pk-dlakogo__lista h2 { color: var(--pk-zloty); margin-bottom: 1.75rem; } .pk-dlakogo__lista ul { list-style: none; margin: 0; padding: 0; } .pk-dlakogo__lista li { display: flex; align-items: flex-start; gap: .9rem; padding: .55rem 0; font-size: .95rem; line-height: 1.5; } .pk-dlakogo__lista li .pk-ikona { color: var(--pk-zloty); margin-top: .15rem; } /* ===================================================================== 11. CTA ===================================================================== */ .pk-cta { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .pk-cta__tresc { padding: var(--pk-sekcja-y) clamp(1.5rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; text-align: center; } .pk-cta__lead { font-size: 1.1rem; margin: 0 0 1.5rem; } .pk-cta__opis { font-size: .95rem; color: #cfcbc6; margin: 0 0 2.25rem; } /* --- Licznik do premiery ------------------------------------------- Siedzi w slocie konwersyjnym sekcji CTA. Po włączeniu sprzedaży ustępuje miejsca blokowi zakupu (.pk-zakup) — patrz inc/licznik.php. */ .pk-licznik { margin: 0 0 2rem; } .pk-licznik__tytul { font-family: var(--pk-font-naglowek); font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: #cfcbc6; margin: 0 0 1rem; } .pk-licznik__pola { display: flex; justify-content: center; gap: clamp(1rem, 4vw, 2.5rem); } .pk-licznik__pole { display: flex; flex-direction: column; align-items: center; min-width: 4.5rem; } .pk-licznik__liczba { font-family: var(--pk-font-naglowek); font-weight: 700; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1; color: var(--pk-zloty); /* Cyfry o stałej szerokości — bez tego liczba „przeskakuje” w bok przy każdej zmianie minuty. */ font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .pk-licznik__jedn { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #9a9691; margin-top: .35rem; } /* --- Moduł zakupowy: wybór wariantu --------------------------------- Karty do wyboru zamiast rozwijanej harmonijki. Przy dwóch opcjach harmonijka chowałaby połowę oferty i wymagała dwóch kliknięć zamiast jednego; tutaj obie ceny widać naraz i porównuje się je od razu. */ .pk-zakup { margin: 0 0 1.5rem; } .pk-zakup__wybor { border: 0; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .75rem; } .pk-zakup__karta { display: flex; align-items: flex-start; gap: .9rem; padding: 1.1rem 1.25rem; border: 2px solid #3d3936; background: rgba(255, 255, 255, .03); cursor: pointer; text-align: left; transition: border-color var(--pk-przejscie), background var(--pk-przejscie); } .pk-zakup__karta:hover { border-color: var(--pk-zloty-ciemny); } /* Zaznaczony wariant — obramowanie i tło, nie sam znacznik radio. Cała karta jest celem kliknięcia, także na telefonie. */ .pk-zakup__karta:has(input:checked) { border-color: var(--pk-zloty); background: rgba(170, 130, 62, .1); } .pk-zakup__karta:has(input:focus-visible) { outline: 3px solid var(--pk-zloty); outline-offset: 2px; } .pk-zakup__karta input { margin-top: .25rem; width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--pk-zloty); } .pk-zakup__tresc { display: grid; gap: .2rem; } .pk-zakup__nazwa { font-family: var(--pk-font-naglowek); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 1rem; } .pk-zakup__cena { font-family: var(--pk-font-naglowek); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.1rem); color: var(--pk-zloty); line-height: 1.1; } .pk-zakup__cena del { opacity: .5; font-size: .6em; margin-right: .4em; } .pk-zakup__cena ins { text-decoration: none; } .pk-zakup__opis { font-size: .88rem; color: #cfcbc6; } .pk-zakup__oszczedz { font-size: .82rem; font-weight: 600; color: var(--pk-zloty-jasny); text-transform: uppercase; letter-spacing: .05em; margin-top: .15rem; } .pk-zakup button { width: 100%; justify-content: center; } /* Tekst wyłącznie dla czytników ekranu */ .pk-tylko-czytnik { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pk-cta__tresc .pk-btn { align-self: center; } .pk-cta__foto { margin: 0; } .pk-cta__foto img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ===================================================================== 11a. KILIMANDŻARO Tekst jest długi i został przeniesiony z posta w mediach społecznościowych w całości, na życzenie klienta. Zadaniem układu jest sprawić, żeby dało się to czytać: wąska kolumna tekstu, wyraźny rytm akapitów, zdjęcie przyklejone do góry przy przewijaniu, żeby nie zostawało w tyle za treścią. Tło lekko przełamane wobec bieli sekcji „dla kogo” powyżej — inaczej obie zlałyby się w jedną długą płachtę. ===================================================================== */ .pk-kili { background: #f7f5f2; } .pk-kili__wrap { max-width: var(--pk-max); margin: 0 auto; padding: var(--pk-sekcja-y) clamp(1rem, 3vw, 2rem); /* Zdjęcie powiększone z .8fr do 1fr — przy 1200 px kontenera rośnie z około 410 do 510 px szerokości. Plik ma 1200 px, więc nawet na ekranie o podwójnej gęstości jest z czego brać. */ display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--pk-gap); align-items: start; } .pk-kili__foto { margin: 0; position: sticky; top: 6rem; } .pk-kili__foto img { display: block; width: 100%; height: auto; } .pk-kili__tekst h2 { color: var(--pk-zloty); margin-bottom: 1.75rem; } /* Cztery pełne akapity zamiast dawnych jednozdaniowych wersów z posta — stąd większy odstęp między nimi i szersza interlinia. */ .pk-kili__tekst p { margin: 0 0 1.15rem; font-size: .97rem; line-height: 1.75; } .pk-kili__domkniecie { margin-top: 2rem !important; font-family: var(--pk-font-cytat); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.4rem) !important; line-height: 1.5 !important; color: var(--pk-zloty-ciemny); } /* ===================================================================== 11b. RECENZJE Dwie pełne recenzje naukowe, bez skracania. Przy tekstach tej długości liczy się wyłącznie czytelność: dwie kolumny, węższa miara wiersza, wyraźnie oddzielony podpis z afiliacją. ===================================================================== */ .pk-recenzje { background: #f7f5f2; } .pk-recenzje__wrap { max-width: var(--pk-max); margin: 0 auto; padding: var(--pk-sekcja-y) clamp(1rem, 3vw, 2rem); } .pk-recenzje__wrap h2 { color: var(--pk-zloty); text-align: center; margin-bottom: 2.5rem; } .pk-recenzje__siatka { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .pk-recenzja { margin: 0; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--pk-biel); border-top: 3px solid var(--pk-zloty); position: relative; } /* Cudzysłów jako znak graficzny, nie jako treść — dlatego przez ::before i ukryty przed czytnikami ekranu. Odsunięty od kolumny tekstu: 2 px w lewo na ozdobniku i 2 px odstępu po stronie akapitu. Wcześniej ozdobnik wchodził na pierwsze wiersze. */ .pk-recenzja::before { content: '„'; position: absolute; top: .05em; left: .22rem; font-family: var(--pk-font-cytat); font-size: 5rem; line-height: 1; color: var(--pk-zloty); opacity: .18; pointer-events: none; } /* GeneratePress nadaje każdemu blockquote kursywę, powiększenie do 1.2em i lewą krawędź. Reset wyżej zdejmował tylko marginesy i obramowanie, przez co całe recenzje szły kursywą. Tu zdejmujemy resztę — kursywa ma być wyłącznie na tytule książki, nie na całym tekście. */ .pk-recenzja blockquote { margin: 0; padding: 0; border: 0; font-style: normal; font-size: inherit; } .pk-recenzja blockquote p { margin: 0; padding-left: 2px; font-size: .93rem; line-height: 1.75; text-align: justify; hyphens: auto; } .pk-recenzja figcaption { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--pk-szary-jasny); font-family: var(--pk-font-naglowek); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pk-grafit); } /* ===================================================================== 12. FAQ Rozwijane bez JavaScriptu — element

robi to natywnie. ===================================================================== */ .pk-faq__wrap { max-width: 820px; margin: 0 auto; padding: var(--pk-sekcja-y) clamp(1rem, 3vw, 2rem); } .pk-faq__wrap h2 { color: var(--pk-zloty); text-align: center; margin-bottom: 2.5rem; } .pk-faq__poz { border-bottom: 1px solid var(--pk-szary-jasny); } .pk-faq__poz summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; cursor: pointer; list-style: none; font-family: var(--pk-font-naglowek); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; transition: color var(--pk-przejscie); } .pk-faq__poz summary::-webkit-details-marker { display: none; } .pk-faq__poz summary:hover { color: var(--pk-zloty); } .pk-faq__poz summary .pk-ikona { color: var(--pk-zloty); transition: transform var(--pk-przejscie); } .pk-faq__poz[open] summary .pk-ikona { transform: rotate(180deg); } .pk-faq__odp { padding: 0 0 1.35rem; } .pk-faq__odp p { margin: 0; font-size: .97rem; } /* ===================================================================== 13. FORMULARZ ===================================================================== */ .pk-zapis { background: var(--pk-szary-jasny); } .pk-zapis__wrap { max-width: 720px; margin: 0 auto; padding: var(--pk-sekcja-y) clamp(1rem, 3vw, 2rem); } .pk-form { background: var(--pk-biel); padding: clamp(1.5rem, 4vw, 3rem); } /* Honeypot — poza ekranem, niewidoczny dla czytników. */ .pk-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .pk-form__pole { margin-bottom: 1.5rem; } .pk-form__pole label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .4rem; } .pk-form__pole input { width: 100%; padding: .85rem 1rem; font-size: 1rem; font-family: inherit; border: 1px solid #c9c6c2; background: var(--pk-biel); transition: border-color var(--pk-przejscie); } .pk-form__pole input:focus { border-color: var(--pk-zloty); outline: none; box-shadow: 0 0 0 3px rgba(170,130,62,.18); } .pk-form__pole input[aria-invalid="true"] { border-color: #b3261e; } .pk-form__blad { color: #b3261e; font-size: .85rem; margin: .4rem 0 0; } .pk-form__zgoda { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1.1rem; } .pk-form__zgoda input { margin-top: .25rem; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--pk-zloty); } .pk-form__zgoda label { font-size: .82rem; line-height: 1.5; color: #4a4a4a; } .pk-form__klauzula { font-size: .78rem; line-height: 1.5; color: var(--pk-szary); margin: 1.25rem 0 1.75rem; } .pk-form__klauzula a { color: var(--pk-zloty); } .pk-form__komunikat { margin: 1rem 0 0; font-size: .92rem; } .pk-form__komunikat[data-stan="ok"] { color: #1a7f37; } .pk-form__komunikat[data-stan="blad"] { color: #b3261e; } /* ===================================================================== 14. STOPKA ===================================================================== */ .pk-stopka { background: var(--pk-czern); color: #9a9691; } .pk-stopka__wrap { max-width: var(--pk-max); margin: 0 auto; padding: 3rem clamp(1rem, 3vw, 2rem); text-align: center; } /* Trzy równe kolumny — tak jak w makiecie, gdzie kanały są rozłożone na całą szerokość, a nie zbite w środku. */ .pk-stopka__social { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); list-style: none; margin: 0 0 2.5rem; padding: 0; gap: 1rem; } .pk-stopka__social a { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; color: #9a9691; text-decoration: none; font-size: .9rem; transition: color var(--pk-przejscie); } /* Ikony w kółkach — makieta ma je w okrągłych medalionach. */ .pk-stopka__social .pk-ikona { box-sizing: content-box; padding: .6rem; border: 1px solid #3d3936; border-radius: 50%; transition: border-color var(--pk-przejscie), color var(--pk-przejscie); } .pk-stopka__social a:hover { color: var(--pk-zloty); } .pk-stopka__social a:hover .pk-ikona { border-color: var(--pk-zloty); } .pk-stopka__prawne ul { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; list-style: none; margin: 0 0 1.5rem; padding: 0; } .pk-stopka__prawne a { color: #9a9691; font-size: .85rem; text-decoration: underline; } .pk-stopka__prawne a:hover { color: var(--pk-zloty); } .pk-stopka__sprzedawca { font-size: .78rem; margin: 0 0 .5rem; } /* Copyright do prawej — jak w makiecie. */ .pk-stopka__copy { font-size: .78rem; margin: 0; text-align: right; } @media (max-width: 782px) { .pk-stopka__social { grid-template-columns: 1fr; gap: 1.25rem; } .pk-stopka__copy { text-align: center; } } /* ===================================================================== 15. RESPONSYWNOŚĆ Makieta była wyłącznie desktopowa. Dwie sekcje wymagały decyzji projektowej, bo wycięta sylwetka wchodzi tam w kolumnę tekstu i na wąskim ekranie ten układ się rozpada: · „o autorze" → sylwetka jako pas u góry, tekst pod spodem · „dla kogo" → zdjęcie jako pas 16:9 nad listą Reszta zwija się liniowo. ===================================================================== */ @media (max-width: 1024px) { .pk-hero__wrap { grid-template-columns: 1fr 1fr; } .pk-ksiazka__wrap { grid-template-columns: 1.3fr .7fr; } /* UWAGA: nie ma tu nadpisania `.pk-autor__wrap`, i to celowo. Było `grid-template-columns: .8fr 1.4fr` — reguła z czasów, gdy sylwetka siedziała w siatce. Po przejściu na pozycjonowanie bezwzględne figura ma szerokość `var(--pk-sylwetka)`, a pierwsza kolumna rezerwuje dla niej miejsce TĄ SAMĄ zmienną. Nadpisanie ułamkami rozjeżdżało jedno z drugim: przy oknie 900 px kolumna miała 295 px, figura 360 px, więc wchodziła 29 px w tekst. */ } @media (max-width: 782px) { .pk-pasek__burger { display: block; order: 3; } .pk-pasek__nav { display: none; order: 4; width: 100%; border-top: 1px solid var(--pk-szary-jasny); padding-top: .75rem; margin-top: .5rem; } .pk-pasek__wrap { flex-wrap: wrap; } .pk-pasek__nav.is-open { display: block; } .pk-pasek__nav ul { flex-direction: column; gap: 0; } .pk-pasek__nav li { border-bottom: 1px solid var(--pk-szary-jasny); } .pk-pasek__nav li:last-child { border-bottom: 0; } .pk-pasek__nav a { display: block; padding: .85rem 0; border: 0; } .pk-pasek__koszyk-txt { display: none; } .pk-hero__wrap { grid-template-columns: 1fr; text-align: center; /* Odstęp pod książką MUSI zostać — patrz uwaga przy .pk-hero__ksiazka img. */ padding-bottom: clamp(1.5rem, 5vw, 2.5rem); gap: 2rem; } /* Poniżej tej szerokości narzucone wersy cytatu i tak by nie weszły — pozwalamy im zawijać się naturalnie. */ .pk-hero__wers { display: inline; white-space: normal; } .pk-hero__wers::after { content: ' '; } .pk-hero__podpis { text-align: center; } .pk-hero__podpis img { margin-inline: auto; } .pk-hero__ksiazka { justify-self: center; align-self: auto; } .pk-hero__ksiazka img { width: min(100%, 460px); max-width: 100%; /* ŻADNEGO zejścia w dół na wąskim ekranie. Na desktopie dolny róg okładki wchodzi w ciemną sekcję obok sylwetki i wygląda to zamierzenie. Na telefonie sekcje układają się w jedną kolumnę, a sylwetka zamienia się w pas 340 px kadrowany od góry — czyli w samą twarz. Okładka, która ma z-index 4, lądowała dokładnie na niej. */ margin: 0 auto; } /* Sylwetka autora: pas u góry, kadr od głowy w dół. Pozycjonowanie bezwzględne wraca do normalnego układu — na wąskim ekranie nie ma gdzie wystawać, a figura obok tekstu nie zmieściłaby się. */ .pk-autor__wrap { grid-template-columns: 1fr; gap: 0; } .pk-autor__foto { position: static; inset: auto; width: auto; margin: 0; max-height: 340px; overflow: hidden; } .pk-autor__foto img { width: 100%; height: 340px; max-width: 100%; object-fit: cover; object-position: center top; } .pk-autor__tekst { grid-column: 1; padding: 2.5rem 0 var(--pk-sekcja-y); text-align: left; } /* Na wąskim ekranie moneta wraca nad tekst i nie schodzi nigdzie — przy układzie jednokolumnowym zachodziłaby na treść. */ .pk-ksiazka__wrap { grid-template-columns: 1fr; } .pk-ksiazka__moneta { order: -1; margin: 0; align-self: auto; } .pk-ksiazka__moneta img { width: 200px; } /* Zdjęcie w „dla kogo" jako pas 16:9 nad listą. */ .pk-dlakogo__wrap { grid-template-columns: 1fr; } .pk-dlakogo__foto img { aspect-ratio: 16/9; height: auto; } .pk-cta { grid-template-columns: 1fr; } .pk-cta__foto { order: -1; } .pk-cta__foto img { aspect-ratio: 16/9; height: auto; } /* Kilimandżaro: zdjęcie nad tekstem, bez przyklejania — przy jednej kolumnie sticky tylko przeszkadza. */ .pk-kili__wrap { grid-template-columns: 1fr; } .pk-kili__foto { position: static; max-width: 420px; margin-inline: auto; } /* Recenzje jedna pod drugą. Wyrównanie obustronne przy wąskiej kolumnie robi „rzeki” białych przerw — dlatego do lewej. */ .pk-recenzje__siatka { grid-template-columns: 1fr; } .pk-recenzja blockquote p { text-align: left; } .pk-btn { width: 100%; justify-content: center; text-align: center; } .pk-cta__tresc .pk-btn { align-self: stretch; } } @media (max-width: 480px) { body.page-template-page-landing { font-size: 16px; } .pk-form { padding: 1.25rem; } } /* ===================================================================== 16. DOSTĘPNOŚĆ I DRUK ===================================================================== */ @media (prefers-reduced-motion: reduce) { .page-template-page-landing *, .page-template-page-landing *::before, .page-template-page-landing *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } html { scroll-behavior: smooth; } /* Kotwice nie mogą chować się pod przyklejonym paskiem. */ :target { scroll-margin-top: 5.5rem; } @media print { .pk-pasek, .pk-zapis, .pk-stopka__social { display: none; } .pk-ciemna { background: #fff !important; color: #000 !important; } } /* ===================================================================== 17. STRONY SKLEPU I STRONY PRAWNE Wszystko poniżej dotyczy stron POZA landingiem — koszyka, zamówienia, produktu, regulaminu, polityki prywatności. Klasę `pk-strona` nadaje inc/sklep.php. Zasada z planu bez zmian: landing kodujemy ręcznie, sklep jedzie na szablonach GeneratePressa. Poniżej jest tylko warstwa marki nałożona na te szablony — kolory, krój i przyciski. Żadnych nadpisanych szablonów Woo, bo to one rozjeżdżają się przy aktualizacjach. ===================================================================== */ /* Nagłówek i stopka GeneratePressa — mamy własne. */ body.pk-strona .site-header, body.pk-strona .main-navigation, body.pk-strona .site-footer, body.pk-strona .site-info { display: none; } body.pk-strona { font-family: var(--pk-font-tekst); color: var(--pk-grafit); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; } body.pk-strona h1, body.pk-strona h2, body.pk-strona h3, body.pk-strona .product_title, body.pk-strona .cart_totals h2, body.pk-strona .woocommerce-billing-fields h3 { font-family: var(--pk-font-naglowek); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; color: var(--pk-grafit); } body.pk-strona h1, body.pk-strona .product_title { font-size: clamp(1.6rem, 3.2vw, 2.2rem); } body.pk-strona h2 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); } body.pk-strona a { color: var(--pk-zloty-ciemny); } body.pk-strona a:hover { color: var(--pk-zloty); } /* Odstęp pod przyklejonym paskiem */ body.pk-strona .site-content { padding-top: 2.5rem; } /* --- 17.1. Pasek na stronach sklepu ---------------------------------- */ .pk-pasek--sklep { border-bottom: 1px solid var(--pk-szary-jasny); } .pk-pasek--sklep .pk-pasek__nav ul { gap: clamp(1rem, 3vw, 2rem); } /* --- 17.2. Przyciski WooCommerce ------------------------------------- */ body.pk-strona .woocommerce a.button, body.pk-strona .woocommerce button.button, body.pk-strona .woocommerce input.button, body.pk-strona .woocommerce a.button.alt, body.pk-strona .woocommerce button.button.alt, body.pk-strona .woocommerce input.button.alt, body.pk-strona #place_order, body.pk-strona .wp-element-button { font-family: var(--pk-font-naglowek); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; padding: .95rem 2rem; border: 2px solid var(--pk-zloty); border-radius: 0; background: var(--pk-zloty); color: var(--pk-czern); transition: background var(--pk-przejscie), border-color var(--pk-przejscie); } body.pk-strona .woocommerce a.button:hover, body.pk-strona .woocommerce button.button:hover, body.pk-strona .woocommerce input.button:hover, body.pk-strona .woocommerce a.button.alt:hover, body.pk-strona .woocommerce button.button.alt:hover, body.pk-strona .woocommerce input.button.alt:hover, body.pk-strona #place_order:hover { background: var(--pk-zloty-jasny); border-color: var(--pk-zloty-jasny); color: var(--pk-czern); } /* Przyciski drugorzędne — „Aktualizuj koszyk", „Zastosuj kupon" */ body.pk-strona .woocommerce button[name="update_cart"], body.pk-strona .woocommerce a.button.wc-backward { background: transparent; color: var(--pk-zloty-ciemny); } body.pk-strona .woocommerce button[name="update_cart"]:hover, body.pk-strona .woocommerce a.button.wc-backward:hover { background: var(--pk-zloty); color: var(--pk-czern); } body.pk-strona .woocommerce button[name="update_cart"]:disabled { opacity: .4; border-color: var(--pk-szary); } /* --- 17.3. Ceny i informacja o przedsprzedaży ------------------------ */ body.pk-strona .woocommerce div.product p.price, body.pk-strona .woocommerce div.product span.price, body.pk-strona .woocommerce ul.products li.product .price { font-family: var(--pk-font-naglowek); font-weight: 700; color: var(--pk-grafit); font-size: 1.5rem; } .pk-przedsprzedaz { border-left: 3px solid var(--pk-zloty); background: #faf7f2; padding: .85rem 1.1rem; font-size: .95rem; margin: 0 0 1.5rem; } /* --- 17.4. Komunikaty ------------------------------------------------ */ body.pk-strona .woocommerce-message, body.pk-strona .woocommerce-info, body.pk-strona .woocommerce-error { border-top: 0; border-left: 3px solid var(--pk-zloty); background: #faf7f2; border-radius: 0; padding: 1rem 1.25rem; } body.pk-strona .woocommerce-message::before, body.pk-strona .woocommerce-info::before { color: var(--pk-zloty); } body.pk-strona .woocommerce-error { border-left-color: #b3261e; background: #fdf3f2; } body.pk-strona .woocommerce-error::before { color: #b3261e; } /* --- 17.5. Formularze ------------------------------------------------ */ body.pk-strona .woocommerce form .form-row input.input-text, body.pk-strona .woocommerce form .form-row textarea, body.pk-strona .woocommerce form .form-row select, body.pk-strona .select2-container .select2-selection--single { padding: .8rem 1rem; font-size: 1rem; font-family: inherit; border: 1px solid #c9c6c2; border-radius: 0; background: var(--pk-biel); height: auto; } body.pk-strona .woocommerce form .form-row input.input-text:focus, body.pk-strona .woocommerce form .form-row textarea:focus, body.pk-strona .woocommerce form .form-row select:focus { border-color: var(--pk-zloty); outline: none; box-shadow: 0 0 0 3px rgba(170, 130, 62, .18); } body.pk-strona .woocommerce form .form-row label { font-weight: 600; font-size: .9rem; } body.pk-strona .required { color: #b3261e; } /* --- 17.6. Tabele koszyka i podsumowania ----------------------------- */ body.pk-strona .woocommerce table.shop_table { border: 1px solid var(--pk-szary-jasny); border-radius: 0; border-collapse: collapse; } body.pk-strona .woocommerce table.shop_table th { font-family: var(--pk-font-naglowek); text-transform: uppercase; letter-spacing: .03em; font-size: .85rem; background: #faf9f7; } body.pk-strona .woocommerce table.shop_table td, body.pk-strona .woocommerce table.shop_table th { border-top: 1px solid var(--pk-szary-jasny); padding: 1rem; } body.pk-strona .cart_totals, body.pk-strona #order_review { background: #faf9f7; padding: 1.5rem; } body.pk-strona .woocommerce-checkout #payment { background: transparent; border: 1px solid var(--pk-szary-jasny); border-radius: 0; } body.pk-strona .woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--pk-szary-jasny); } body.pk-strona .woocommerce-checkout #payment div.form-row { padding: 1.25rem; } /* Zgoda na regulamin — element o znaczeniu prawnym, ma być widoczny. */ body.pk-strona .woocommerce-terms-and-conditions-wrapper { border-left: 3px solid var(--pk-zloty); background: #faf7f2; padding: 1rem 1.25rem; margin-bottom: 1.25rem; } body.pk-strona .woocommerce-terms-and-conditions-wrapper a { text-decoration: underline; } /* --- 17.7. Karta produktu i lista ------------------------------------ */ body.pk-strona .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--pk-font-naglowek); text-transform: uppercase; font-size: 1rem; letter-spacing: .02em; } body.pk-strona .woocommerce ul.products li.product a img { border-radius: 0; } body.pk-strona .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--pk-zloty-ciemny); } body.pk-strona .woocommerce-breadcrumb { font-size: .85rem; color: var(--pk-szary); margin-bottom: 1.5rem; } /* Pole ilości — przy jednej książce zwykle zbędne, ale niech nie razi. */ body.pk-strona .woocommerce .quantity .qty { padding: .6rem; border: 1px solid #c9c6c2; border-radius: 0; } /* --- 17.8. Stopka na stronach sklepu --------------------------------- */ .pk-stopka--sklep { margin-top: 4rem; } .pk-stopka--sklep .pk-stopka__wrap { padding: 2.5rem clamp(1rem, 3vw, 2rem); } .pk-stopka--sklep .pk-stopka__prawne ul { margin-bottom: 1.25rem; } /* ===================================================================== 18. STRONY SKLEPU — WERSJA MOBILNA Cała sekcja siedzi w zapytaniu medialnym i jest zawężona do `.pk-strona` albo `.pk-pasek--sklep`. Nic tutaj nie może zmienić wyglądu na szerokich ekranach ani ruszyć landingu — to celowe, bo desktop jest zatwierdzony. ===================================================================== */ @media (max-width: 782px) { /* --- BŁĄD, który to naprawia --------------------------------------- Reguła ogólna z sekcji 15 chowa `.pk-pasek__nav` i czeka, aż JavaScript doda klasę `is-open` po kliknięciu hamburgera. Pasek sklepu hamburgera nie ma, a landing.js nie ładuje się poza landingiem — więc nawigacja znikała bezpowrotnie. Zamiast dokładać przycisk i skrypt na dwie krótkie pozycje, pokazujemy je po prostu w rzędzie pod logo. Zero JS. */ .pk-pasek--sklep .pk-pasek__nav { display: block; order: 3; width: 100%; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--pk-szary-jasny); } .pk-pasek--sklep .pk-pasek__nav ul { flex-direction: row; gap: 1.5rem; } .pk-pasek--sklep .pk-pasek__nav li { border-bottom: 0; } .pk-pasek--sklep .pk-pasek__nav a { display: inline-block; padding: .25rem 0; font-size: .9rem; } /* --- Oddech ------------------------------------------------------- */ body.pk-strona .site-content { padding-top: 1.5rem; } /* --- Przyciski Woo na pełną szerokość ------------------------------ Domyślnie dopasowują się do treści, przez co na telefonie „Przejdź do kasy" bywa węższy niż palec. */ body.pk-strona .woocommerce a.button, body.pk-strona .woocommerce button.button, body.pk-strona .woocommerce input.button, body.pk-strona #place_order { display: block; width: 100%; text-align: center; padding: 1rem 1.25rem; } /* Wyjątek: przycisk przy polu ilości ma zostać obok niego. */ body.pk-strona .woocommerce div.product form.cart .button { width: auto; display: inline-block; } /* --- Tabele koszyka ------------------------------------------------ Woo przełącza je na układ blokowy; zmniejszamy tylko odstępy, żeby wiersze nie zajmowały pół ekranu. */ body.pk-strona .woocommerce table.shop_table td, body.pk-strona .woocommerce table.shop_table th { padding: .7rem; } body.pk-strona .cart_totals, body.pk-strona #order_review { padding: 1rem; } body.pk-strona .woocommerce-checkout #payment div.form-row { padding: 1rem; } /* --- Typografia ----------------------------------------------------- */ body.pk-strona { font-size: 16px; } body.pk-strona .woocommerce div.product p.price, body.pk-strona .woocommerce div.product span.price { font-size: 1.3rem; } }