/** * Baba – Katalog. * Autor: JAKUB CHROBOT WYTWÓRNIA TREŚCI * * Wartości odwzorowane 1:1 z Figmy (plik mOUOSCQIjchdiyz1JCgOBr, klatka * „siatka kateogrii szkoła podstawowa wszystko”, 1920 px). Wszystko na * zmiennych, żeby kontrolki Elementora nadpisywały je punktowo. * * Siatka projektu: strona 1920, treść 1716 (marginesy 102), karta 390,22 * z odstępami 51,78 w poziomie i 63 w pionie — 4 × 390,22 + 3 × 51,78 = 1716. * * Miary poziome zapisane są jako UŁAMKI szerokości treści, a nie w pikselach. * Dzięki temu układ zachowuje proporcje projektu przy dowolnym kontenerze — * przy 1440 karta ma 327,6 px, odstęp 43,4 px, a wzajemne relacje zostają te same. */ .baba-kat { --kat-accent: #995bb3; --kat-accent-strong: #82499b; --kat-accent-soft: #f9f0f1; --kat-ink: #1e1e1e; --kat-title: #1a1a1a; --kat-muted: #545e69; --kat-line: #cfcfcf; --kat-rule: #9c9c9c; --kat-sec-accent: #0060d4; /* Nazwane style z Figmy: „Baba h1”, „Baba body”, „baba button”, „baba dodatki”. */ --kat-fs-h1: 36px; --kat-lh-h1: 44px; --kat-fs-body: 20px; --kat-lh-body: 26px; --kat-fs-btn: 16px; --kat-lh-btn: 22px; --kat-fs-small: 14px; --kat-lh-small: 18px; --kat-ls-wide: 1.5px; /* Panele na stronie produktu: w projekcie wszystkie mają białe tło i cienką ramkę, a cienia nie ma ani jeden. Cień zostaje wyłącznie kafelkowi produktu w siatce — tam jest w makiecie wprost. */ --kat-panel-line: rgba(0, 0, 0, 0.56); /* Odczytane z pikseli makiety, nie ze zmiennych projektu: znak ikony jest BIAŁY na wypełnionym kole. Koło ma #E8AFF9 przy plakietkach, zaletach i kafelkach, a `--kat-sec-accent` przy personach i krokach. Zmienna `--sds-color-icon-default-default` (#1e1e1e) to domyślna wartość systemu projektowego, której ta makieta nie używa. Fiolet zostaje odhaczeniom. Same wartości brane są z wektorów (#E8AFF9 i #0060D4), nie z pikseli podglądu — JPEG przesuwa je o jedną wartość na kanale. */ --kat-icon: #ffffff; --kat-icon-bg: #e8aff9; --kat-panel-radius: 15px; --kat-card-bg: #ffffff; --kat-radius: 10.835px; --kat-shadow: 4.334px 5.056px 7.368px rgba(0, 0, 0, 0.28); --kat-cols: 4; /* 51,78 / 1716 = 3,017 % szerokości treści. */ --kat-col-gap: 3.017%; --kat-row-gap-px: 63px; --kat-media-ratio: 390.22 / 217.26; --kat-font: "Poppins", -apple-system, "Segoe UI", sans-serif; /* Margines wewnętrzny kontenera Elementora na danym progu. Pas pigułek wychodzi o tyle poza treść, żeby przewijał się od krawędzi ekranu. */ --kat-bleed: 0px; position: relative; font-family: var(--kat-font); font-size: 16px; } .baba-kat *, .baba-kat *::before, .baba-kat *::after { box-sizing: border-box; } /* Utwardzenie wobec globalnych stylów kitu: motyw ustawia linkom wersaliki i własny rozmiar. Kit celuje w `.elementor-kit-… a`, czyli remis specyficzności — podbijamy o klasę, żeby nie zależeć od kolejności arkuszy. */ .baba-kat .baba-kat-card__title a, .baba-kat .baba-kat__head a, .baba-kat .baba-kat__pager a { font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; } /* * To samo dla stanu pod kursorem — i to jest osobny problem, nie kosmetyka. * * Kit ma regułę `.elementor-kit-… a:hover`, która pogrubia link do 600, * zamienia go na wersaliki i podkreśla. Ma dokładnie tę samą specyficzność co * reguły wyżej (dwie klasy, jeden element), a jego arkusz ładuje się później, * więc wygrywał. Tytuł karty jest przycięty do jednej linii z wielokropkiem: * szersze glify przesuwały miejsce ucięcia i tekst „skakał” pod kursorem, * a pigułki i przyciski rozpychały się, przeciągając za sobą cały rząd. * * Pseudoklasa `:hover` w naszym selektorze liczy się jak dodatkowa klasa, * więc samo powtórzenie stanu spoczynku wystarcza, żeby przeważyć. */ .baba-kat .baba-kat-card__title a:hover, .baba-kat .baba-kat-card__title a:focus, .baba-kat .baba-kat__promo-title a:hover, .baba-kat .baba-kat__promo-title a:focus, .baba-kat .baba-kat__head a:hover, .baba-kat .baba-kat__head a:focus, .baba-kat .baba-kat__pager a:hover, .baba-kat .baba-kat__pager a:focus { font-weight: inherit; letter-spacing: inherit; text-decoration: none; text-transform: none; } /* Linki-przyciski zostają wersalikami o zwykłej grubości, tak jak w spoczynku. */ .baba-kat .baba-kat__pill:hover, .baba-kat .baba-kat__pill:focus, .baba-kat .baba-kat__sec-link:hover, .baba-kat .baba-kat__sec-link:focus, .baba-kat .baba-kat-card__cta:hover, .baba-kat .baba-kat-card__cta:focus, .baba-kat .baba-kat-card__cart:hover, .baba-kat .baba-kat-card__cart:focus, .baba-kat .baba-kat__promo-cta:hover, .baba-kat .baba-kat__promo-cta:focus { font-weight: 400; letter-spacing: inherit; text-decoration: none; text-transform: uppercase; } /* ---------- okruszki ---------- */ /* * Okruszki renderuje widżet WooCommerce, który nie ma ani jednej kontrolki * koloru czy typografii — stąd stylowanie tutaj. * * Zaczep `.elementor-location-archive` obejmuje oba nasze szablony (kategorie * i wyniki), a pomija dwa wpisy używające tego samego widżetu na stronach * pojedynczych. * * Wartości wpisane wprost, a nie zmiennymi: `--kat-*` są zadeklarowane na * `.baba-kat`, a okruszki leżą poza tym poddrzewem i nic by się tu nie * rozwiązało. Liczby pochodzą ze stylu „baba dodatki” z Figmy (węzeł 1:1082), * gdzie cała ścieżka jest jednym węzłem tekstowym — czyli odnośnik nie jest * niczym wyróżniony. Na stronie był różowy z gołej reguły `a` w resecie motywu. */ .elementor-location-archive .woocommerce-breadcrumb, .elementor-location-archive .woocommerce-breadcrumb a { color: rgba(0, 0, 0, 0.5); font-family: "Poppins", -apple-system, "Segoe UI", sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 1.5px; line-height: 18px; text-decoration: none; text-transform: uppercase; } /* WooCommerce dokłada okruszkom `margin-bottom: 1em`, ale tylko tam, gdzie `body` ma klasę `woocommerce` — przez to kategoria miała pod nimi 39 px, a wyniki 25. Odstęp ma pochodzić wyłącznie z marginesu kontenera. */ .elementor-location-archive .woocommerce-breadcrumb { margin: 0; } /* Kit motywu pogrubia linki pod kursorem, zamienia je na wersaliki i podkreśla. Bez tego okruszki skakałyby tak jak wcześniej tytuły kart; pseudoklasa podnosi specyficzność o klasę i wystarcza, żeby przeważyć nad kitem. */ .elementor-location-archive .woocommerce-breadcrumb a:hover, .elementor-location-archive .woocommerce-breadcrumb a:focus { color: #995bb3; font-weight: 400; letter-spacing: 1.5px; text-decoration: none; text-transform: uppercase; } /* ---------- głowa widoku ---------- */ .baba-kat__head { display: flex; flex-direction: column; gap: 13px; } .baba-kat .baba-kat__eyebrow { margin: 0; font-family: var(--kat-font); color: var(--kat-ink); font-size: 20px; font-weight: 600; line-height: 26px; text-transform: uppercase; } .baba-kat .baba-kat__title { margin: 0; font-family: var(--kat-font); color: var(--kat-ink); font-size: 60px; font-weight: 600; line-height: 66px; } .baba-kat .baba-kat__sub { font-family: var(--kat-font); color: var(--kat-ink); font-size: 16px; font-weight: 400; line-height: 22px; text-transform: none; } .baba-kat .baba-kat__sub--count { margin-top: 8px; font-size: var(--kat-fs-small); letter-spacing: var(--kat-ls-wide); line-height: var(--kat-lh-small); text-transform: uppercase; } .baba-kat .baba-kat__sub p { margin: 0; } /* Kolumna z nadtytułem i tytułem. Modyfikator `--split` zamienia głowę we flex-kolumnie na siatkę, przez co jej `gap` przestaje dotyczyć nadtytułu i H1 — te stykały się ze sobą. Makieta: nadtytuł 336–362, H1 od 375. */ .baba-kat__head-main { display: flex; flex-direction: column; gap: 13px; } /* Makieta: tytuł 608, przerwa 194, opis 714 — w ułamkach treści (1716) daje to 35,43 % / 11,31 % / 41,61 %, więc proporcja trzyma się przy 1440. */ .baba-kat__head--split { display: grid; align-items: center; column-gap: 11.31%; grid-template-columns: 35.43% 41.61%; row-gap: 24px; } /* ---------- nagłówek sekcji ---------- */ .baba-kat__sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } .baba-kat .baba-kat__sec-title { margin: 0; font-family: var(--kat-font); color: var(--kat-ink); font-size: var(--kat-fs-h1); font-weight: 600; line-height: var(--kat-lh-h1); } .baba-kat__sec-accent { display: block; width: 73px; height: 10px; margin-top: 16px; border-radius: 12px; background: var(--kat-sec-accent); } .baba-kat .baba-kat__sec-link { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 297px; height: 48px; padding: 0 25px; border: 1.336px solid var(--kat-line); border-radius: 30px; color: var(--kat-ink); font-size: var(--kat-fs-btn); font-weight: 400; letter-spacing: var(--kat-ls-wide); text-decoration: none; text-transform: uppercase; transition: background 0.16s ease, color 0.16s ease; } .baba-kat .baba-kat__sec-link:hover { background: var(--kat-accent); color: #fff; } /* ---------- pigułki ---------- */ .baba-kat__pills { display: flex; flex-wrap: wrap; gap: 26px 18px; } .baba-kat .baba-kat__pill { display: inline-flex; font-family: var(--kat-font); align-items: center; justify-content: center; min-width: 199px; height: 48px; padding: 0 40px; border: 1px solid var(--kat-accent); border-radius: 30px; background: transparent; color: var(--kat-ink); font-size: 16px; font-weight: 400; letter-spacing: 1.5px; line-height: 22px; text-align: center; text-decoration: none; text-transform: uppercase; transition: background 0.16s ease, color 0.16s ease; } .baba-kat .baba-kat__pill:hover { background: var(--kat-accent-soft); color: var(--kat-ink); } .baba-kat .baba-kat__pill.is-active { background: var(--kat-accent); color: #fff; } /* Linia pod pasem filtrów. Prefiks `.baba-kat` jest konieczny: motyw celuje w `hr` własną regułą i zerował tu margines górny. */ .baba-kat hr.baba-kat__rule { height: 1px; border: 0; margin: 46px 0 0; background: var(--kat-rule); } /* ---------- karta ---------- */ .baba-kat-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--kat-radius); background: var(--kat-card-bg); box-shadow: var(--kat-shadow); } .baba-kat-card__media { display: block; aspect-ratio: var(--kat-media-ratio); overflow: hidden; background: var(--kat-accent-soft); border-start-start-radius: var(--kat-radius); border-start-end-radius: var(--kat-radius); } /* * Ramka miniatury jest pozioma (390,22 / 217,26 z makiety), a okładki w tym * sklepie są pionowe — 768 × 1086. `cover` pokazuje więc tylko 39 % wysokości * okładki i przy kadrze ze środka tnie przez litery: u góry urwany wiersz * z nazwiskiem, u dołu połowa słowa „LEKTURA”. * * Okładki są robione z jednego szablonu: znak firmowy, autor, tytuł, „LEKTURA”, * dopisek. Kadr od 25 % wysokości łapie autora i tytuł w całości — sprawdzone * na kilku okładkach. To wciąż wycinek, ale czytelny. * * Docelowo warto dać produktom osobne, poziome grafiki listy: żaden kadr * pionowej okładki nie pokaże jej całej. */ .baba-kat-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; } .baba-kat-card__media--contain img { object-fit: contain; } .baba-kat-card__body { flex: 1 1 auto; padding: 11.74px 16px 0; } .baba-kat .baba-kat-card__title { display: -webkit-box; margin: 0; font-family: var(--kat-font); overflow: hidden; color: var(--kat-title); font-size: 24px; font-weight: 600; line-height: 36px; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .baba-kat-card__title a { color: inherit; text-decoration: none; } .baba-kat .baba-kat-card__title a:hover { color: var(--kat-accent); } /* * Krótki opis pod tytułem. W makiecie zajmuje DWA wiersze („Opracowanie, * streszczenie, motywy, cytaty” zawija się na dwa) — przycięcie do jednego * ucinało zdanie w połowie, bez wielokropka, więc wyglądało na usterkę. * * `min-height` rezerwuje oba wiersze także wtedy, gdy opis jest krótki: * inaczej karty w jednym rzędzie miałyby różną wysokość, a stopka z ceną * i przyciskiem przestałaby się równać. */ .baba-kat .baba-kat-card__subtitle { display: -webkit-box; margin: 12px 0 0; min-height: 44px; font-family: var(--kat-font); overflow: hidden; color: var(--kat-muted); font-size: 16px; font-weight: 400; line-height: 22px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* Pasek meta pojawia się wyłącznie przy wypełnionych polach — renderer nie wypisuje go, gdy nie ma czego pokazać. */ .baba-kat-card__meta { display: flex; align-items: center; gap: 16px; height: 16px; margin-top: 24px; } .baba-kat-card__metaitem { display: inline-flex; align-items: center; gap: 8px; color: var(--kat-ink); font-size: 10px; font-weight: 400; line-height: 16px; text-transform: uppercase; white-space: nowrap; } .baba-kat-card__icon { display: inline-flex; width: 16px; height: 16px; flex: 0 0 auto; } .baba-kat-card__icon svg { width: 100%; height: 100%; } .baba-kat-card__divider { height: 1px; margin: 20px 16px 0; background: var(--kat-line); } /* * Cena i przycisk koszyka. Oba mają `white-space: nowrap`, więc żadne nie * może się skurczyć — przy dłuższej kwocie albo cenie promocyjnej (przekreślona * stara plus nowa plus plakietka rabatu) rząd nie mieścił się w karcie * i przycisk był ucinany jej krawędzią. * * Stąd zawijanie i minimalna wysokość zamiast sztywnej: gdy jedna linia nie * wystarcza, przycisk schodzi pod cenę. Treść karty ma `flex: 1`, więc wyższa * stopka zabiera miejsce jej, a nie rozjeżdża przycisków w rzędzie kart. */ .baba-kat-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; min-height: 36px; margin: 18px 16px 0; } /* * Odstęp pod stopką, gdy kafelek idzie bez przycisku „zobacz produkt". * * Dolne 18 px wnosił dotąd wyłącznie ten przycisk (`__cta` niżej). Przy * `show_cta => 'no'` — tak woła kafelek sekcja polecanych w koszyku — stopka * z ceną i koszykiem staje się ostatnim dzieckiem karty i dotyka jej krawędzi. * Karta ma `overflow: hidden` i zaokrąglenie, więc rogi nadgryzają treść: * wygląda to jak ucięty dół kafelka. * * `:last-child` celowo — na kafelku Z przyciskiem stopka nie jest ostatnia, * więc ta reguła tam nie wchodzi i katalog zostaje nietknięty. */ .baba-kat-card__foot:last-child { margin-bottom: 18px; } /* * Cena promocyjna: stara NAD nową, nie obok. * * Obok zabierała 172 px z 295 dostępnych w stopce i przycisk nie mieścił się * w jednej linii — brakowało 31 px. Ustawiona w kolumnie szerokość bierze się * z większej z dwóch kwot (95 px), więc rząd mieści się z zapasem także przy * cenach czterocyfrowych, zamiast łamać się przy kolejnym groszu. */ .baba-kat-card__price { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; font-family: var(--kat-font); color: var(--kat-title); font-size: 24px; font-weight: 600; line-height: 30px; white-space: nowrap; } .baba-kat-card__price del { margin-inline-end: 0; color: var(--kat-muted); font-size: 16px; font-weight: 400; } .baba-kat-card__price ins { text-decoration: none; } .baba-kat .baba-kat-card__cart { display: inline-flex; font-family: var(--kat-font); align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 0.797px solid var(--kat-line); border-radius: 17.899px; color: var(--kat-ink); font-size: 11.26px; font-weight: 400; letter-spacing: 1.0556px; line-height: 15.482px; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: border-color 0.16s ease, color 0.16s ease; } .baba-kat .baba-kat-card__cart .baba-kat-card__icon { width: 20.28px; height: 20.28px; } /* Strzałki z makiety: 8,949 px w koszyku i 12,717 px w „Kup teraz”. Obie dosunięte do prawej krawędzi swojego przycisku. */ .baba-kat .baba-kat-card__cart .baba-kat-card__icon--arrow { width: 8.949px; height: 8.949px; margin-inline-start: auto; } .baba-kat .baba-kat-card__cta .baba-kat-card__icon--arrow { width: 12.717px; height: 12.717px; } .baba-kat .baba-kat-card__cart:hover { border-color: var(--kat-accent); color: var(--kat-accent); } .baba-kat-card__date { color: var(--kat-muted); font-size: 14px; } /* Bez wariantu obrysowego: „Czytaj więcej” i „Kup teraz” stoją w jednym rzędzie kart i mają tę samą barwę, więc obrys zamiast wypełnienia czytał się jako inny kolor, a nie jako inna waga przycisku. */ .baba-kat .baba-kat-card__cta { display: flex; font-family: var(--kat-font); align-items: center; justify-content: center; gap: 12px; height: 48px; margin: 18px 16px; border-radius: 25.434px; background: var(--kat-accent); color: #fff; font-size: 16px; font-weight: 400; letter-spacing: 1.5px; line-height: 22px; text-decoration: none; text-transform: uppercase; transition: background 0.16s ease; } .baba-kat .baba-kat-card__cta:hover { background: var(--kat-accent-strong); color: #fff; } /* ---------- siatka ---------- */ .baba-kat__grid { display: grid; column-gap: var(--kat-col-gap); grid-template-columns: repeat(var(--kat-cols), minmax(0, 1fr)); /* row-gap w procentach odnosiłby się do wysokości kontenera, nie szerokości, więc odstęp pionowy zostaje w pikselach. */ row-gap: var(--kat-row-gap-px, 53px); } .baba-kat__empty { padding: 48px 0; color: var(--kat-muted); text-align: center; } /* Region podmieniany po filtrowaniu — przygaszamy go na czas wczytywania, zamiast podmieniać na spinner i skakać wysokością. */ .baba-kat__region { position: relative; transition: opacity 0.15s ease; } .baba-kat__region.is-loading { opacity: 0.45; pointer-events: none; } /* ---------- paginacja ---------- */ /* Makieta: ostatni rząd kart kończy się na 3177, paginacja stoi na 3240 — ten sam rytm 63 px co między rzędami. */ .baba-kat__pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 63px; } .baba-kat__pager a, .baba-kat__pager span { min-width: 34px; padding: 4px 6px; color: var(--kat-ink); font-size: 16px; line-height: 22px; text-align: center; text-decoration: none; } .baba-kat__pager a:hover { color: var(--kat-accent); } .baba-kat__pager .is-current { color: var(--kat-accent); font-weight: 600; } .baba-kat__pager .is-dots { color: var(--kat-muted); } /* ---------- pasek filtrów ---------- */ /* * Makieta (treść 1716): pole 356,8 → przerwa 23,2 → selekt 305 → 37 → selekt 305 * → 181 → podpis 137 → 67 → selekt 305, który kończy się dokładnie na krawędzi * treści. Szerokości i przerwy zapisane jako ułamki, więc układ trzyma * proporcje przy 1440. Grupa sortowania jest dosunięta do prawej marginesem * automatycznym, dzięki czemu nie rozjeżdża się, gdy któregoś selektu nie ma. */ /* * Etykiety kontrolek są w makiecie dobrane pod treść 1716 px („sortuj według * lektury” zajmuje tam 233 z 234 dostępnych px). Przy 1440 te same napisy się * nie mieszczą i ucinają, więc typografia paska — i tylko ona — skaluje się * współczynnikiem 1440/1716. Układ zostaje 1:1, zmieniają się same glify. */ .baba-kat__toolbar { --kat-tb: 0.839; display: flex; align-items: center; flex-wrap: wrap; row-gap: 16px; } .baba-kat__search { display: flex; flex: 0 0 20.79%; align-items: center; gap: calc(16px * var(--kat-tb)); height: 48px; padding: 0 calc(20px * var(--kat-tb)) 0 calc(16px * var(--kat-tb)); border-radius: 12px; background: #f1f1f1; } .baba-kat .baba-kat__search-input { width: 100%; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--kat-ink); font-family: var(--kat-font); font-size: calc(17.343px * var(--kat-tb)); font-weight: 400; letter-spacing: calc(1.8582px * var(--kat-tb)); line-height: calc(22.298px * var(--kat-tb)); text-transform: uppercase; } .baba-kat .baba-kat__search-input:focus { outline: none; box-shadow: none; } .baba-kat .baba-kat__search-input::placeholder { color: rgba(8, 8, 8, 0.25); opacity: 1; } .baba-kat__search-icon { display: inline-flex; width: calc(20px * var(--kat-tb)); height: calc(20px * var(--kat-tb)); flex: 0 0 auto; color: rgba(8, 8, 8, 0.25); } .baba-kat__search-icon svg { width: 100%; height: 100%; } .baba-kat__field { display: block; flex: 0 0 17.77%; margin-inline-start: 1.35%; } .baba-kat__field + .baba-kat__field { margin-inline-start: 2.16%; } /* Strzałka rysowana tłem, bo natywnej nie da się ostylować spójnie między przeglądarkami. */ .baba-kat .baba-kat__select { width: 100%; height: 48px; padding: 0 calc(44px * var(--kat-tb)) 0 calc(27px * var(--kat-tb)); border: 1px solid var(--kat-accent); border-radius: 30px; background-color: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-position: right calc(26.7px * var(--kat-tb)) center; background-repeat: no-repeat; background-size: calc(15.18px * var(--kat-tb)) calc(15.18px * var(--kat-tb)); appearance: none; color: rgba(30, 30, 30, 0.5); cursor: pointer; font-family: var(--kat-font); font-size: calc(var(--kat-fs-btn) * var(--kat-tb)); font-weight: 400; letter-spacing: calc(var(--kat-ls-wide) * var(--kat-tb)); line-height: calc(var(--kat-lh-btn) * var(--kat-tb)); text-transform: uppercase; } .baba-kat .baba-kat__select:focus-visible { outline: 2px solid var(--kat-accent); outline-offset: 2px; } /* Podpis i selekt sortowania: makieta 137 + 67 + 305 = 509, czyli 29,66 % treści; wewnątrz rozsuwamy je na krawędzie, co daje przerwę 67. */ .baba-kat__sort { display: flex; flex: 0 0 29.66%; align-items: center; justify-content: space-between; margin-inline-start: auto; } .baba-kat .baba-kat__sort-caption { flex: 0 0 auto; color: var(--kat-ink); font-family: var(--kat-font); font-size: calc(20px * var(--kat-tb)); font-weight: 400; line-height: calc(26px * var(--kat-tb)); } .baba-kat__sort .baba-kat__field { flex: 0 0 59.92%; margin-inline-start: 0; } /* ---------- sekcja pozioma (suwak) ---------- */ .baba-kat__rowsec { display: flex; flex-direction: column; /* Makieta: blok nagłówka kończy się na 1794,5, karty zaczynają 1836. */ gap: 38px; } .baba-kat__carousel { position: relative; } /* * Przewijaniem zajmuje się sam `overflow`, a nie skrypt — dzięki temu działa * palcem, kółkiem i klawiaturą, a strzałki są tylko wygodą. Szerokość kadru * liczymy z tej samej pary zmiennych co siatka, więc karta w suwaku ma * dokładnie tyle samo co karta w siatce. */ .baba-kat__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--kat-cols) - 1) * var(--kat-col-gap)) / var(--kat-cols)); column-gap: var(--kat-col-gap); /* * Dolne 14 px to zapas na cień kafelka. `overflow-x: auto` wymusza per spec * `overflow-y: auto`, więc track przycina także w pionie, a cień * (`--kat-shadow`) sięga 5,06 + 7,37 ≈ 12,4 px poniżej karty. Przy * dotychczasowych 10 px urywał się linią prostą. */ padding-block: 4px 14px; overflow-x: auto; scroll-snap-type: x mandatory; /* * Bez `scroll-behavior: smooth`. Zadeklarowane tutaj blokowało przewijanie * z kodu w całości: strzałki nie ruszały karuzeli w katalogu, wynikach, * opiniach ani w powiązanych materiałach — sekcja pokazywała cztery karty * z ośmiu, a reszta była nieosiągalna. Płynność i tak ustawia `slide()` * w opcjach `scrollBy`, więc deklaracja niczego nie wnosiła. */ scrollbar-width: none; -webkit-overflow-scrolling: touch; } .baba-kat__track::-webkit-scrollbar { display: none; } .baba-kat__track > * { scroll-snap-align: start; } .baba-kat .baba-kat__arrow { position: absolute; top: 50%; z-index: 2; display: inline-flex; width: 55px; height: 55px; align-items: center; justify-content: center; padding: 0 0 4px; border: 0; border-radius: 50%; background: var(--kat-accent); color: #fff; cursor: pointer; font-family: var(--kat-font); font-size: 38px; line-height: 1; transform: translateY(-50%); transition: background 0.16s ease, opacity 0.16s ease; } .baba-kat .baba-kat__arrow:hover { background: var(--kat-accent-strong); color: #fff; } /* Strzałka, której nie ma dokąd kliknąć, ma być wyraźnie martwa. */ .baba-kat .baba-kat__arrow.is-off { cursor: default; opacity: 0.25; } /* Makieta: strzałka zajmuje 16–70,7 przy treści od 102, czyli 31 px odstępu. */ .baba-kat__arrow--prev { inset-inline-start: -86px; } .baba-kat__arrow--next { inset-inline-end: -86px; } /* Poniżej tej szerokości margines strony robi się węższy niż strzałka — trzymana na zewnątrz wypchnęłaby poziomy pasek przewijania. */ /* Treść ma 1440 px, więc na strzałkę na zewnątrz trzeba jeszcze 2 × 86. Poniżej tego progu wchodzi do środka, żeby nie wypchnąć poziomego paska. */ @media (max-width: 1620px) { .baba-kat__arrow--prev { inset-inline-start: 8px; } .baba-kat__arrow--next { inset-inline-end: 8px; } } /* ---------- pas promocyjny ---------- */ /* * Miary z Figmy (klatka „wyniki wyszukiwania”, treść 1716 px): * okładka 675 przy samej krawędzi karty i na całą jej wysokość, opis 667, * pionowa kreska na 1514. Prawa kolumna liczona OD KRESKI ma 304 px (17,72 %), * z czego 18 px to odstęp za kreską, 270 px treść i 16 px zapasu przy krawędzi. * * Tła i marginesu pasa świadomie tu nie ma: kolor kładzie kontener Elementora, * dzięki czemu sięga krawędzi ekranu, a treść zostaje w kolumnie. */ .baba-kat__promo { display: block; } .baba-kat .baba-kat__promo-lead { /* Makieta: nagłówek 1072–1116, karta od 1178. */ margin: 0 0 62px; font-family: var(--kat-font); color: var(--kat-ink); font-size: var(--kat-fs-h1); font-weight: 600; line-height: var(--kat-lh-h1); } /* Karta jest szeroka, więc w suwaku widać jedną naraz na każdym ekranie. */ .baba-kat__carousel--wide { --kat-cols: 1; --kat-col-gap: 24px; } /* Karty pasa nie mają cienia, więc tor nie potrzebuje zapasu na jego wyciek — a ten zapas psuł odstęp 62 px spod nagłówka. */ .baba-kat__carousel--wide .baba-kat__track { padding-block: 0; } .baba-kat__promo-card { display: grid; grid-template-columns: 39.4% minmax(0, 1fr) 17.72%; column-gap: 2.6%; align-items: center; overflow: hidden; border-radius: var(--kat-radius); background: #fff; } /* * Okładka wypełnia lewą kolumnę bez marginesu i całą wysokość karty. * * `width: 100 %` razem z `aspect-ratio` jest tu konieczne. Sama proporcja przy * rozciągniętym elemencie liczyłaby szerokość z wysokości i kadr wychodził poza * kolumnę; sama szerokość bez proporcji pozwalała z kolei, żeby o wysokości * całego wiersza zdecydował najbardziej kwadratowy obrazek w suwaku — jeden * plik 600 × 600 rozpychał wszystkie slajdy do 567 px. */ .baba-kat__promo-media { display: block; width: 100%; align-self: stretch; aspect-ratio: var(--kat-media-ratio); overflow: hidden; background: var(--kat-accent-soft); } .baba-kat__promo-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .baba-kat__promo-body { padding-block: 24px; } .baba-kat__promo-badge { display: inline-flex; height: 48px; align-items: center; padding: 0 30px; border-radius: 30px; background: var(--kat-accent); color: #fff; font-size: var(--kat-fs-btn); font-weight: 400; letter-spacing: var(--kat-ls-wide); line-height: var(--kat-lh-btn); text-transform: uppercase; } .baba-kat .baba-kat__promo-title { display: -webkit-box; margin: 27px 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: var(--kat-font); color: var(--kat-ink); font-size: var(--kat-fs-h1); font-weight: 600; line-height: var(--kat-lh-h1); } .baba-kat .baba-kat__promo-title a { color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-decoration: none; text-transform: none; } .baba-kat .baba-kat__promo-title a:hover { color: var(--kat-accent); } /* Kolumna opisu ma przy 1440 px około 542 px zamiast 667 z makiety, więc bez przycięcia karta rosła do 567 px wysokości i panoramiczna okładka wychodziła kwadratem. Dwie linie tytułu i trzy opisu trzymają proporcję z projektu. */ .baba-kat .baba-kat__promo-desc { display: -webkit-box; margin: 10px 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-family: var(--kat-font); color: var(--kat-muted); font-size: var(--kat-fs-body); font-weight: 400; line-height: var(--kat-lh-body); } /* Nota wymagana dyrektywą Omnibus. Ma być widoczna, ale nie jest opisem produktu — stąd osobny wiersz i mniejszy stopień pisma („baba dodatki”). */ .baba-kat .baba-kat__promo-omnibus { margin: 10px 0 0; font-family: var(--kat-font); color: var(--kat-muted); font-size: var(--kat-fs-small); font-weight: 400; line-height: var(--kat-lh-small); } .baba-kat__promo-aside { position: relative; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; justify-content: center; /* 18 px za kreską i 16 px zapasu przy krawędzi karty — obie miary z makiety. */ padding-inline: 18px 1.1%; } /* Pionowa kreska z makiety nie sięga krawędzi karty — stąd pseudoelement zamiast obramowania kolumny. */ .baba-kat__promo-aside::before { position: absolute; inset-block: 15.6% 7.9%; inset-inline-start: 0; width: 1px; background: var(--kat-line); content: ""; } .baba-kat .baba-kat__promo-note { margin: 0; font-family: var(--kat-font); color: var(--kat-ink); font-size: var(--kat-fs-body); font-weight: 400; line-height: var(--kat-lh-body); } .baba-kat .baba-kat__promo-cta { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 26px; border-radius: 30px; background: var(--kat-accent); color: #fff; font-family: var(--kat-font); font-size: var(--kat-fs-btn); font-weight: 400; letter-spacing: var(--kat-ls-wide); line-height: var(--kat-lh-btn); text-decoration: none; text-transform: uppercase; transition: background 0.16s ease; } .baba-kat .baba-kat__promo-cta:hover { background: var(--kat-accent-strong); color: #fff; } /* ---------- strona produktu ---------- */ /* * Sekcje strony produktu. Korzystają z tych samych zmiennych co katalog, więc * kolory, promienie i skala pisma są wspólne z kafelkami i widokami listy. * Miary z Figmy (klatka 6:963, treść 1716): pas zalet 331 px wysokości, * boks „Dla kogo” 613 px szerokości, plakietki co 206 px. */ .baba-prod { font-family: var(--kat-font); } /* * Nadtytuł sekcji. W makiecie to nie drobna etykieta, tylko nagłówek 36/44 * w kolorze tekstu, pisany zdaniowo, z niebieską kreską pod spodem — zmierzone * na „O produkcie” (rysunek 220 × 38, #1E1E1E) i „Zawartość” (191 px). * Wcześniej stało tu 11,5 px wersalikami w fiolecie, czyli trzy razy za mało * i w cudzej barwie. */ .baba-prod .baba-prod__eyebrow { margin: 0; color: var(--kat-ink); font-family: var(--kat-font); /* Makieta ma tu 36/44 (zmierzone na rysunku napisu: 220 px szerokości). Zeszliśmy na 30/38 na prośbę Jakuba — przy nagłówku 60 px nadtytuł w 36 konkurował z nim zamiast go zapowiadać. Świadome odstępstwo. */ font-size: calc(30px * var(--kat-s)); font-weight: 600; letter-spacing: 0; line-height: calc(38px * var(--kat-s)); text-transform: none; } .baba-prod .baba-prod__title { margin: 12px 0 0; color: var(--kat-ink); font-family: var(--kat-font); font-size: var(--kat-fs-h1); font-weight: 600; line-height: var(--kat-lh-h1); } .baba-prod__head + * { margin-top: 24px; } .baba-prod .baba-prod__lead { margin: 24px 0 0; color: var(--kat-sec-accent); font-family: var(--kat-font); font-size: var(--kat-fs-body); font-weight: 600; line-height: var(--kat-lh-body); } .baba-prod .baba-prod__lead-plain, .baba-prod .baba-prod__text { margin: 18px 0 0; color: var(--kat-muted); font-family: var(--kat-font); font-size: var(--kat-fs-body); font-weight: 400; line-height: var(--kat-lh-body); } /* --- treść przeniesiona z pola „Opis" WooCommerce --- Do tej pory ta klasa stylizowała kontener i akapity, bo karmiło ją pole ACF z prostym tekstem. Odkąd bierze też opis z WooCommerce, wchodzi tu wszystko, co redakcja przez lata w nim umieściła: listy na 203 produktach, nagłówki na 194, obrazki na 14 i dwa osadzone filmy. Bez tych reguł zostałyby ze stylami przeglądarki albo motywu. */ /* Nagłówki z opisu są podrzędne wobec tytułu sekcji nad nimi. Wiele opisów zaczyna się od `

` z nazwą produktu, więc gdyby miały tę samą wagę, czytałoby się to jak dwa tytuły jeden pod drugim. */ .baba-prod .baba-prod__text :is(h1, h2, h3, h4, h5, h6) { margin: calc(26px * var(--kat-s)) 0 calc(10px * var(--kat-s)); color: var(--kat-ink); font-family: var(--kat-font); font-size: calc(24px * var(--kat-s)); font-weight: 600; line-height: calc(32px * var(--kat-s)); } .baba-prod .baba-prod__text :is(h1, h2):first-child, .baba-prod .baba-prod__text :is(h3, h4, h5, h6):first-child { margin-top: 0; } .baba-prod .baba-prod__text :is(h4, h5, h6) { font-size: calc(20px * var(--kat-s)); line-height: calc(28px * var(--kat-s)); } .baba-prod .baba-prod__text :is(ul, ol) { margin: 0 0 calc(14px * var(--kat-s)); padding-inline-start: calc(22px * var(--kat-s)); } .baba-prod .baba-prod__text li { margin: 0 0 calc(6px * var(--kat-s)); } /* Obrazki i osadzenia z opisu bywają szersze niż kolumna — bez tego rozpychałyby stronę w bok, tak jak wcześniej robił to przycisk fragmentu. */ .baba-prod .baba-prod__text img { height: auto; max-width: 100%; border-radius: 8px; } .baba-prod .baba-prod__text iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; border: 0; border-radius: 8px; } .baba-prod .baba-prod__text a { color: var(--kat-accent-strong); text-decoration: underline; } .baba-prod .baba-prod__text :last-child { margin-bottom: 0; } .baba-prod .baba-prod__text p { margin: 0 0 14px; } /* Wstęp sekcji „O produkcie”: krótki opis WooCommerce nad nagłówkiem. Odstęp trzyma wstęp, a nie nagłówek pod nim, bo `.baba-prod__head` sam nie ma marginesów — odstępy w tej sekcji rozdaje zawsze element stojący wyżej (patrz `.baba-prod__head + *`). Wartość surowa, tak jak tamta, żeby obie strony nagłówka oddychały tak samo przy każdej szerokości ekranu. */ .baba-prod .baba-prod__intro { margin: 0 0 30px; } .baba-prod .baba-prod__cta { display: inline-flex; align-items: center; gap: 10px; height: 48px; margin-top: 24px; padding: 0 30px; border-radius: 30px; background: var(--kat-accent); color: #fff; font-family: var(--kat-font); font-size: var(--kat-fs-btn); font-weight: 400; letter-spacing: var(--kat-ls-wide); line-height: var(--kat-lh-btn); text-decoration: none; text-transform: uppercase; transition: background 0.16s ease; } .baba-prod .baba-prod__cta:hover, .baba-prod .baba-prod__cta:focus { background: var(--kat-accent-strong); color: #fff; font-weight: 400; text-decoration: none; text-transform: uppercase; } .baba-prod .baba-prod__cta--ghost { border: 1px solid var(--kat-accent); background: transparent; color: var(--kat-accent); } /* --- tytuł, galeria i boks zakupu --- */ /* Wysokość wiersza wprost z projektu (60/66). Widżet WooCommerce dziedziczył z motywu wartość bliską zeru i tytuł zgniatało do czterech pikseli. */ /* Polskie złożenia bywają dłuższe niż telefon: „historycznoliterackiego” przy 49 px nie mieści się w 341 px kolumny i jako jedno słowo wypychało całą stronę — dokument miał 610 px przy oknie 396 px i dawało się go przeciągać w bok. `break-word` łamie wyłącznie słowo, które i tak by nie weszło, więc tam, gdzie tekst się mieści, nic się nie zmienia. Bez `hyphens: auto`: dzieliłoby wyrazy także na dużym ekranie, gdzie problemu nie ma. */ .baba-prod .baba-prod__h1 { overflow-wrap: break-word; margin: 0; color: var(--kat-ink); font-family: var(--kat-font); font-size: 60px; font-weight: 600; line-height: 66px; } /* * Duży kadr galerii. Makieta: 675 × 379, czyli ta sama proporcja co kadr karty. * * Zdjęcia leżą jedno na drugim i przełączamy widoczność — bez przewijania toru * i bez przesuwania go przekształceniem. Obie tamte drogi na tej stronie * zawiodły, a przenikanie jest odporne i widać po klasie, które zdjęcie jest * na wierzchu. */ .baba-prod__gallery-main { position: relative; overflow: hidden; border-radius: var(--kat-radius); background: var(--kat-accent-soft); aspect-ratio: var(--kat-media-ratio); } .baba-prod__slide { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .baba-prod__slide.is-active { opacity: 1; pointer-events: auto; } /* * `contain`, nie `cover`. Kadr jest poziomy, a okładki bywają pionowe albo * kwadratowe — przycinanie pokazywałoby pasek ze środka, a to jedyne miejsce, * gdzie kupujący ogląda sam materiał. Puste boki wypełnia tło ramki. */ /* Okno powiększenia ma zakrywać stronę, a nie przewijać się razem z nią. Elementor ustawia swojemu oknu `position: fixed`, ale na tej stronie coś nadpisuje to na `sticky` — okno przyklejało się wtedy do miejsca w treści i przyciemniało tylko jego okolicę, a nagłówek i tytuł zostawały jasne. Nie znalazłem reguły z `!important`, więc wygrywa specyficznością; stąd `!important` po naszej stronie. To przywrócenie wartości samego Elementora, nie zmiana jego zachowania. */ .elementor-lightbox { position: fixed !important; } /* Zdjęcie otwiera pełny rozmiar w oknie na wierzchu. Odnośnik wypełnia cały kadr, żeby trafić w niego dało się wszędzie, a nie tylko w widoczny obrazek — przy kwadratowej okładce w szerokim kadrze to duża różnica. */ .baba-prod .baba-prod__zoom { position: absolute; inset: 0; display: block; cursor: zoom-in; } /* Znaczek lupy: na myszy dochodzi dopiero po najechaniu, bo kursor już mówi, co się stanie. Na dotyku kursora nie ma, więc widać go od razu. */ .baba-prod .baba-prod__zoom-znak { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--kat-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16); opacity: 0; transition: opacity 0.16s ease; } .baba-prod .baba-prod__zoom-znak svg { width: 18px; height: 18px; } .baba-prod__gallery-main:hover .baba-prod__zoom-znak, .baba-prod__zoom:focus-visible .baba-prod__zoom-znak { opacity: 1; } @media (hover: none) { .baba-prod .baba-prod__zoom-znak { opacity: 1; } } .baba-prod__gallery-main img { display: block; width: 100%; height: 100%; object-fit: contain; } /* * Strzałki leżą NA zdjęciu i wychodzą po najechaniu — makieta ich nie ma, * więc nie mogą zasłaniać kadru, gdy nikt z nich nie korzysta. Przy dotyku * nie ma najeżdżania, więc tam są widoczne zawsze. Strzałka bez dokąd znika * całkiem: wyszarzony przycisk nad zdjęciem to śmieć, a nie informacja. */ .baba-prod__gallery-main .baba-kat__arrow { inset-inline-start: auto; inset-inline-end: auto; z-index: 2; opacity: 0; transition: opacity 0.16s ease, background 0.16s ease; } .baba-prod__gallery-main .baba-kat__arrow--prev { inset-inline-start: 12px; } .baba-prod__gallery-main .baba-kat__arrow--next { inset-inline-end: 12px; } .baba-prod__gallery-main:hover .baba-kat__arrow, .baba-prod__gallery-main:focus-within .baba-kat__arrow { opacity: 1; } .baba-prod__gallery-main .baba-kat__arrow.is-off, .baba-prod__gallery-main:hover .baba-kat__arrow.is-off { opacity: 0; pointer-events: none; } @media (hover: none) { .baba-prod__gallery-main .baba-kat__arrow { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .baba-prod__slide { transition: none; } } /* Makieta: cztery miniatury 155 × 143 z odstępem 19 px, 33 px pod głównym kadrem. */ .baba-prod__gallery-thumbs { display: grid; overflow-x: auto; margin-top: 33px; gap: 19px; grid-auto-flow: column; /* Cztery na widoku jak w makiecie; piąta i dalsze wjeżdżają przewijaniem, zamiast zawijać się do drugiego rzędu i psuć wysokość kolumny. */ grid-auto-columns: calc((100% - 3 * 19px) / 4); scrollbar-width: none; } .baba-prod__gallery-thumbs::-webkit-scrollbar { display: none; } .baba-prod .baba-prod__thumb { overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 8px; background: var(--kat-accent-soft); cursor: pointer; aspect-ratio: 155 / 143; } .baba-prod button.baba-prod__thumb:hover, .baba-prod button.baba-prod__thumb:focus { background: var(--kat-accent-soft); } .baba-prod button.baba-prod__thumb:focus-visible { outline: 2px solid var(--kat-accent); outline-offset: 2px; } .baba-prod .baba-prod__thumb.is-active { border-color: var(--kat-accent); } .baba-prod__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } /* * Makieta: 359 × 30 px, wyśrodkowany pod galerią (środek 425,5 = środek kadru), * 45 px pod miniaturami. Większy od pozostałych odnośników — 20/30, nie 14/18. * * `margin-top: auto` dosuwa go do dołu kolumny, przez co lewa strona kończy się * równo z prawą, tak jak w projekcie. Padding trzyma odstęp minimalny, gdy * kolumny są podobnej wysokości. */ .baba-prod .baba-prod__fragment { display: block; margin-top: 45px; color: var(--kat-ink); font-family: var(--kat-font); font-size: 20px; font-weight: 400; letter-spacing: var(--kat-ls-wide); line-height: 30px; text-align: center; text-decoration: underline; text-transform: uppercase; } .baba-prod .baba-prod__fragment:hover, .baba-prod .baba-prod__fragment:focus { color: var(--kat-accent); font-weight: 400; text-decoration: underline; text-transform: uppercase; } /* Boks zakupu — w projekcie wydzielony ramką, nie zlewa się z tłem. */ /* * Makieta (boks 1021 × 261): kolumna lewa 494 px z ceną, koszykiem i notą, * przerwa 70, panel gwarancji 376 × 199 z własnym tłem, przy 43 px marginesu * z lewej i 38 z prawej. * * Ułamki liczone od WNĘTRZA boksu (1021 − 43 − 38 = 940), nie od jego pełnej * szerokości — inaczej kolumny wychodzą o kilkadziesiąt pikseli za wąskie. */ /* Boks zakupu bez ramki — decyzja ze spotkania statusowego. W makiecie cena i przycisk siedzą w obramowanym panelu, ale na produkcie bez wypełnionych pól ramka otaczała samą cenę i jeden przycisk, a resztę miejsca zostawiała pustą. Obrys i tło znikają; zostaje siatka, bo ta dalej jest potrzebna do rozłożenia ceny i panelu zapewnień obok siebie. */ .baba-prod__buy { display: grid; align-items: start; column-gap: 7.45%; grid-template-columns: 52.55% 40%; } /* Bez zapewnień druga kolumna nie ma czego trzymać, więc znika. Cena i przycisk zostają jednak przy swojej dotychczasowej szerokości: rozciągnięty na całą kolumnę przycisk zakupu przestaje wyglądać na przycisk, a zaczyna na pasek. */ .baba-prod__buy--sam { column-gap: 0; grid-template-columns: 1fr; } .baba-prod__buy--sam .baba-prod__buy-main { max-width: 52.55%; } /* Cena, przycisk i nota mają w makiecie wspólny środek (x = 1107). */ .baba-prod__buy-main { text-align: center; } .baba-prod__price { display: flex; flex-wrap: wrap; /* Dołem, nie linią pisma: kolumna z odznaką ma własną pierwszą linię pisma (odznakę), więc przy `baseline` nowa cena podskakiwała. */ align-items: flex-end; justify-content: center; gap: 12px; } .baba-prod .baba-prod__price-now { color: var(--kat-title); font-family: var(--kat-font); font-size: 48px; font-weight: 600; line-height: 66px; } .baba-prod .baba-prod__price-old { color: var(--kat-muted); font-family: var(--kat-font); font-size: 24px; font-weight: 400; line-height: 36px; text-decoration: line-through; } /* * Odznaka rabatu i przekreślona cena idą w jednej kolumnie: obie mówią o tej * samej rzeczy — ile kosztowało i o ile taniej jest teraz. Nowa cena stoi obok * nich, a nie pod spodem, więc czyta się „było tyle, jest tyle”. */ .baba-prod__price-was { display: flex; flex-direction: column; align-items: center; gap: 4px; } .baba-prod__save { display: inline-flex; align-items: center; height: 27px; padding: 0 10px; border-radius: 14px; background: #d81b60; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; } .baba-prod__cart { margin-top: 16px; } /* Przycisk koszyka z projektu — WooCommerce daje własny, tu tylko ubranie. */ .baba-prod__cart .single_add_to_cart_button { display: inline-flex; width: 100%; height: 69px; align-items: center; justify-content: center; border: 0; border-radius: 30px; background: var(--kat-accent); color: #fff; font-family: var(--kat-font); font-size: var(--kat-fs-btn); font-weight: 400; letter-spacing: var(--kat-ls-wide); line-height: var(--kat-lh-btn); text-transform: uppercase; } .baba-prod__cart .single_add_to_cart_button:hover { background: var(--kat-accent-strong); } .baba-prod__cart .quantity { margin-bottom: 14px; } .baba-prod .baba-prod__omnibus { margin: 16px 0 0; color: var(--kat-ink); font-family: var(--kat-font); font-size: var(--kat-fs-body); font-weight: 400; line-height: var(--kat-lh-body); } /* Makieta: osobny panel 376 × 199 z własnym tłem, nie lista pod kreską. Pozycje co 53 px (wysokość 23 + przerwa 30), 24 px marginesu u góry. */ /* Prefiks `.baba-prod` jest konieczny: reguła bazowa `.baba-prod__trust` stoi niżej w pliku, więc przy równej specyficzności to ona wygrywała i panel dostawał zerowy padding oraz odstęp 18 px. */ .baba-prod .baba-prod__trust--panel { padding: 24px 22px 30px; border-radius: var(--kat-panel-radius); background: var(--kat-accent-soft); gap: 30px; } /* --- krótki opis w hero --- */ .baba-prod .baba-prod__short { margin: 0; color: var(--kat-muted); font-family: var(--kat-font); font-size: var(--kat-fs-small); font-weight: 400; letter-spacing: var(--kat-ls-wide); line-height: var(--kat-lh-small); text-transform: uppercase; } /* --- plakietki w hero --- */ /* Makieta: pięć plakietek po 155 px rozłożonych na całej szerokości prawej kolumny (1021 px). Stała szerokość zawijała je do drugiego rzędu, gdy kolumna przy 1440 px robi się węższa — dlatego dzielą ją równo między siebie. */ .baba-prod__badges { display: flex; flex-wrap: nowrap; gap: 2.5%; margin: 0; padding: 0; list-style: none; } .baba-prod__badge { display: flex; min-width: 0; flex: 1 1 0; flex-direction: column; align-items: center; gap: 10px; color: var(--kat-ink); font-size: var(--kat-fs-small); letter-spacing: var(--kat-ls-wide); line-height: var(--kat-lh-small); text-align: center; text-transform: uppercase; /* `anywhere` łamało w środku wyrazu („NATYCHMIASTOW-Y”). `break-word` dzieli dopiero wtedy, gdy całe słowo nie mieści się w kolumnie. */ overflow-wrap: break-word; } .baba-prod__badge-icon { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 50%; background: var(--kat-icon-bg); color: var(--kat-icon); } /* Makieta: tytuł kończy się na 484, opis zaczyna 509 (25), plakietki 549→ ich tekst na 691, boks zakupu na 753. Kontener daje 26 px, resztę dokładamy. */ .baba-prod--badges { margin-top: 14px; } .baba-prod--buy { margin-top: 18px; } /* --- boks zaufania --- */ .baba-prod__trust { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; } .baba-prod__trust-item { display: flex; align-items: center; gap: 12px; color: var(--kat-ink); font-size: 16px; line-height: 19px; } .baba-prod__trust-icon, .baba-prod__point-icon { display: inline-flex; width: 22px; height: 22px; flex: 0 0 auto; color: var(--kat-accent); } .baba-prod__trust-icon svg, .baba-prod__point-icon svg { width: 100%; height: 100%; } /* --- pas zalet --- */ /* Makieta (Rectangle 342, 1750 × 331): cztery zalety w JEDNYM prostokącie z cienką ramką — nie cztery osobne karty z cieniem. */ .baba-prod__features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 34px 24px; border: 1px solid var(--kat-panel-line); border-radius: var(--kat-panel-radius); background: #fff; } .baba-prod__feature { display: flex; flex-direction: column; align-items: center; padding: 0 20px; text-align: center; } .baba-prod__feature-icon { display: inline-flex; width: 62px; height: 62px; align-items: center; justify-content: center; border-radius: 50%; background: var(--kat-icon-bg); color: var(--kat-icon); } .baba-prod .baba-prod__feature-title { margin: 18px 0 0; color: var(--kat-ink); font-family: var(--kat-font); font-size: 24px; font-weight: 600; letter-spacing: 0; line-height: 32px; text-transform: uppercase; } .baba-prod .baba-prod__feature-desc { margin: 10px 0 0; color: var(--kat-ink); font-family: var(--kat-font); font-size: var(--kat-fs-body); line-height: var(--kat-lh-body); } /* --- punkty pod opisem --- */ .baba-prod__points { display: flex; flex-wrap: wrap; gap: 18px 60px; margin: 28px 0 0; padding: 0; list-style: none; } .baba-prod__point { display: flex; max-width: 320px; align-items: flex-start; gap: 12px; color: var(--kat-ink); font-size: var(--kat-fs-small); line-height: var(--kat-lh-small); } /* --- boks „Dla kogo” --- */ .baba-prod__personas { padding: 34px; border: 1px solid var(--kat-panel-line); border-radius: var(--kat-panel-radius); background: #fff; } .baba-prod .baba-prod__personas-title { margin: 0 0 24px; color: var(--kat-sec-accent); font-family: var(--kat-font); font-size: 20px; font-weight: 600; line-height: 26px; } .baba-prod__persona { display: flex; align-items: flex-start; gap: 16px; } .baba-prod__persona + .baba-prod__persona { margin-top: 22px; } .baba-prod__persona-icon { display: inline-flex; width: 42px; height: 42px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; background: var(--kat-icon-bg); color: var(--kat-icon); } .baba-prod .baba-prod__persona-title { margin: 0; color: var(--kat-ink); font-family: var(--kat-font); font-size: var(--kat-fs-body); font-weight: 600; line-height: var(--kat-lh-body); } .baba-prod .baba-prod__persona-desc { margin: 4px 0 0; color: var(--kat-ink); font-family: var(--kat-font); font-size: var(--kat-fs-body); line-height: var(--kat-lh-body); } /* --- kafelki „Co znajdziesz” --- */ .baba-prod__tiles { display: grid; margin-top: 34px; gap: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .baba-prod__tile { padding: 24px 20px; border: 1px solid var(--kat-panel-line); border-radius: var(--kat-panel-radius); background: #fff; text-align: center; } .baba-prod__tile-icon { display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center; border-radius: 50%; background: var(--kat-icon-bg); color: var(--kat-icon); } .baba-prod .baba-prod__tile-title { margin: 16px 0 0; color: var(--kat-ink); font-family: var(--kat-font); font-size: 13px; font-weight: 600; letter-spacing: 1px; line-height: 18px; text-transform: uppercase; } .baba-prod .baba-prod__tile-desc { margin: 8px 0 0; color: var(--kat-muted); font-family: var(--kat-font); font-size: 11px; line-height: 16px; } /* --- spis treści --- */ .baba-prod__toc { padding: 30px 28px; border: 1px solid var(--kat-panel-line); border-radius: var(--kat-panel-radius); background: #fff; } .baba-prod .baba-prod__toc-title { margin: 0 0 20px; color: var(--kat-sec-accent); font-family: var(--kat-font); font-size: 20px; font-weight: 600; line-height: 26px; } .baba-prod__toc-list { margin: 0; padding: 0; list-style: none; counter-reset: none; } .baba-prod__toc-item { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--kat-line); color: var(--kat-ink); font-size: var(--kat-fs-small); line-height: var(--kat-lh-small); } .baba-prod__toc-item:last-child { border-bottom: 0; } .baba-prod__toc-num { flex: 0 0 auto; color: var(--kat-accent); font-weight: 600; } /* --- podgląd materiału --- */ /* * Podgląd materiału. Makieta, licząc wewnątrz panelu (119…1811 = 1692 px): * kolumna tekstu 564 px (33,3 %), przerwa 146 px (8,6 %), reszta na pasek * zdjęć ze strzałkami po bokach. */ .baba-prod__preview { display: grid; align-items: center; /* Pół punktu procentowego ponad 33,3 % z makiety: tam nagłówek ma 566 px w kolumnie 564, czyli stoi na styk, a po przeskalowaniu brakowało 2 px i łamał się na dwa wiersze. Pasek zdjęć zachowuje swoje 58 %. */ gap: 8.1%; grid-template-columns: 33.8% minmax(0, 1fr); padding: 34px; border: 1px solid var(--kat-panel-line); border-radius: var(--kat-panel-radius); background: #fff; } .baba-prod__preview .baba-prod__title { margin: 0; } .baba-prod .baba-prod__preview-note { margin: 16px 0 0; color: var(--kat-muted); font-family: var(--kat-font); font-size: var(--kat-fs-small); line-height: var(--kat-lh-small); } .baba-prod__video { position: relative; overflow: hidden; border-radius: var(--kat-radius); background: #f1f1f1; aspect-ratio: 16 / 9; } .baba-prod__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .baba-prod__page { overflow: hidden; border-radius: 8px; background: var(--kat-accent-soft); scroll-snap-align: start; aspect-ratio: 3 / 4; } .baba-prod__page img { display: block; width: 100%; height: 100%; object-fit: cover; } .baba-prod__preview-media .baba-kat__track { --kat-cols: 3; --kat-col-gap: 3%; } /* --- kroki zakupu --- */ .baba-prod__steps-row { display: grid; align-items: center; gap: 5%; grid-template-columns: minmax(0, 1fr) 24%; margin-top: 34px; } .baba-prod__steps { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .baba-prod__step { flex: 1 1 0; text-align: center; } /* * Strzałka między krokami. W makiecie to wektor 114 × 12 w barwie kroków, * a nie znak „→”: ten zależy od kroju, w Poppinsie wychodzi krótki i siedzi * wyżej niż środek koła. Górna krawędź 38 px pod górą koła — tak jak * w projekcie, czyli minimalnie nad osią koła, nie dokładnie na niej. */ .baba-prod__step-arrow { display: block; width: calc(114px * var(--kat-s)); height: calc(12px * var(--kat-s)); flex: 0 0 auto; margin-top: calc(38px * var(--kat-s)); align-self: flex-start; color: var(--kat-sec-accent); } .baba-prod__step-arrow svg { display: block; width: 100%; height: 100%; } .baba-prod__step-icon { display: inline-flex; width: 62px; height: 62px; align-items: center; justify-content: center; border-radius: 50%; background: var(--kat-icon-bg); color: var(--kat-icon); } .baba-prod .baba-prod__step-title { margin: 16px 0 0; color: var(--kat-ink); font-family: var(--kat-font); font-size: 24px; font-weight: 600; letter-spacing: 0; line-height: 32px; text-transform: uppercase; } .baba-prod .baba-prod__step-desc { margin: 8px 0 0; color: var(--kat-ink); font-family: var(--kat-font); font-size: var(--kat-fs-body); line-height: var(--kat-lh-body); } /* * Boks „Bezpieczne zakupy”. Makieta: panel 416 × 275 na #F9F0F1, całość * wyśrodkowana, tytuł w akcencie (#995BB3) 24/36, opis 20/26, logotypy 30 px. * Wcześniej stał tu tekst 16/22 i 12/17 wyrównany do lewej — stąd wrażenie, * że boks jest za mały. */ .baba-prod__safe { padding: calc(40px * var(--kat-s)); border-radius: var(--kat-panel-radius); background: var(--kat-accent-soft); text-align: center; } .baba-prod .baba-prod__safe-title { margin: 0; color: var(--kat-accent); font-family: var(--kat-font); font-size: calc(24px * var(--kat-s)); font-weight: 600; line-height: calc(36px * var(--kat-s)); } .baba-prod .baba-prod__safe-desc { margin: calc(13px * var(--kat-s)) 0 0; color: var(--kat-ink); font-family: var(--kat-font); font-size: var(--kat-fs-body); line-height: var(--kat-lh-body); } /* * Logotypy operatorów płatności. * * Marki mają różne proporcje (Paynow 200 × 76, PayPo 84 × 23), więc równamy * je wysokością, nie szerokością — inaczej Paynow, gęstszy przez pasek barw * pod napisem, przytłoczyłby sąsiada. `width: auto` zostawia obie w ich * własnych proporcjach; rozciąganie logotypu jest naruszeniem księgi znaku. * * Bez własnego tła i filtrów: barwy marki są tu treścią, nie ozdobą. */ /* Przedrostek `.baba-prod` jest tu konieczny: motyw ustawia obrazkom `height: auto` regułą o wyższej szczegółowości i bez tego logotypy wychodzą w naturalnych 76 px zamiast równanych 22. */ .baba-prod .baba-prod__marki { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(42px * var(--kat-s)); margin: calc(31px * var(--kat-s)) 0 0; padding: 0; list-style: none; } .baba-prod .baba-prod__marki li { display: flex; align-items: center; } .baba-prod .baba-prod__marka { width: auto; height: calc(30px * var(--kat-s)); max-width: 100%; object-fit: contain; } /* --- nota o autorce --- */ .baba-prod__author { display: grid; align-items: center; gap: 6%; grid-template-columns: minmax(0, 1fr) 34%; } .baba-prod .baba-prod__author-name { margin: 14px 0 0; color: var(--kat-ink); font-family: var(--kat-font); font-size: 44px; font-weight: 600; line-height: 52px; } .baba-prod .baba-prod__author-bio { margin: 20px 0 0; color: var(--kat-muted); font-family: var(--kat-font); font-size: var(--kat-fs-small); line-height: 22px; } .baba-prod__author-photo img { display: block; width: 100%; height: auto; border-radius: var(--kat-radius); } /* --- opinie --- */ .baba-prod--reviews .baba-kat__track, .baba-prod--related .baba-kat__track { --kat-cols: 3; --kat-col-gap: 3%; margin-top: 28px; } .baba-prod--related .baba-kat__track { --kat-cols: 4; } .baba-prod__review { padding: 26px; border: 1px solid var(--kat-panel-line); border-radius: var(--kat-panel-radius); background: #fff; scroll-snap-align: start; } .baba-prod .baba-prod__stars { margin: 0; color: #f5a623; font-size: 18px; letter-spacing: 2px; line-height: 1; } .baba-prod .baba-prod__review-text { margin: 16px 0 0; color: var(--kat-muted); font-family: var(--kat-font); font-size: var(--kat-fs-small); line-height: 22px; } .baba-prod .baba-prod__review-name { margin: 18px 0 0; color: var(--kat-ink); font-family: var(--kat-font); font-size: 16px; font-weight: 600; line-height: 22px; } .baba-prod .baba-prod__review-role { margin: 2px 0 0; color: var(--kat-muted); font-family: var(--kat-font); font-size: 12px; line-height: 17px; } /* ---------- responsywność ---------- */ /* * Progi wynikają z szerokości karty, nie z nazw urządzeń: gdy karta schodzi * poniżej ~300 px, okładka przestaje cokolwiek pokazywać — wtedy ubywa kolumna. * 1200 → 3 kolumny, 1024 → 2, 767 → karta poziomista. * * Kolejność bloków ma znaczenie: mają tę samą specyficzność, więc każdy niższy * próg musi stać niżej w pliku, inaczej szerszy blok wygrywa na wąskim ekranie. */ @media (max-width: 1200px) { .baba-kat { --kat-cols: 3; --kat-row-gap-px: 44px; } .baba-kat .baba-kat__title { font-size: 44px; line-height: 50px; } .baba-kat__head--split { column-gap: 6%; grid-template-columns: 44% 50%; } } /* * Liczbę kolumn ustawia kontrolka widżetu i jej CSS bije ten arkusz na * specyficzność. Elementor ma jednak tylko dwa progi (767 i 1024), więc dla * 1025–1200 nie istnieje pole, w które dałoby się wpisać „3”. Sterujemy więc * bezpośrednio `grid-template-columns` — to inna właściwość niż `--kat-cols`, * którą zapisuje kontrolka, więc nie ma tu wyścigu, tylko czyste nadpisanie. * Bez tego przy 1200 px wychodziły cztery kolumny po 269 px. */ @media (min-width: 1025px) and (max-width: 1200px) { .baba-kat .baba-kat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1024px) { .baba-kat { --kat-cols: 2; } /* Tytuł i opis obok siebie mają sens, dopóki oba mieszczą się w linijkach; od tabletu opis schodzi pod tytuł. */ .baba-kat__head--split { column-gap: 0; grid-template-columns: minmax(0, 1fr); row-gap: 16px; } .baba-kat .baba-kat__title { font-size: 38px; line-height: 46px; } .baba-kat .baba-kat__sec-title { font-size: 30px; line-height: 36px; } /* Pigułka o stałej szerokości 199 px mieści się tu tylko po trzy w rzędzie, przez co pas filtrów urastał do 270 px. Na tablecie niech każda ma szerokość swojej etykiety — wtedy wracają dwa rzędy jak w makiecie. */ .baba-kat__pills { gap: 16px 12px; } .baba-kat .baba-kat__pill { min-width: 0; padding: 0 26px; } /* Strona produktu: siatki po cztery kolumny robią się tu za ciasne. */ .baba-prod__features, .baba-prod__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .baba-prod--related .baba-kat__track { --kat-cols: 2; } .baba-prod--reviews .baba-kat__track { --kat-cols: 2; } .baba-prod .baba-prod__h1 { font-size: 44px; line-height: 52px; } /* Pasek filtrów: cztery kontrolki obok siebie mają tu po ~230 px, więc schodzą na dwa rzędy, a sortowanie dostaje własny. */ .baba-kat__toolbar { column-gap: 3%; } .baba-kat__search, .baba-kat__field, .baba-kat__field + .baba-kat__field { flex: 1 1 46%; margin-inline-start: 0; } /* Sortowanie dzieli rząd z selektem lektury — samotny selekt o połowie szerokości wyglądałby na zgubiony. */ .baba-kat__sort { flex: 1 1 46%; margin-inline-start: 0; } .baba-kat__sort .baba-kat__field { flex: 0 0 62%; } /* Trzecia kolumna pasa robi się węższa niż sam przycisk, więc wezwanie schodzi pod okładkę i opis, na całą szerokość karty. */ .baba-kat__promo-card { grid-template-columns: 34% minmax(0, 1fr); row-gap: 20px; } .baba-kat__promo-aside { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; } } /* ---------- telefon ---------- */ @media (max-width: 767px) { .baba-kat { --kat-row-gap-px: 24px; /* Musi się zgadzać z marginesem kontenera Elementora na tym progu. */ --kat-bleed: 20px; } .baba-kat .baba-kat__eyebrow { font-size: 14px; line-height: 20px; } .baba-kat .baba-kat__title { font-size: 32px; line-height: 38px; } /* Licznik ma własny, mniejszy krój z Figmy — wyłączamy go z tej reguły, bo stoi niżej w pliku i wygrywałaby przy równej specyficzności. */ .baba-kat .baba-kat__sub:not(.baba-kat__sub--count) { font-size: 15px; line-height: 21px; } /* Opis kategorii przycięty do trzech linijek — pełną treść odsłania przycisk dokładany przez kontroler, i tylko gdy tekst faktycznie nie mieści się. Licznik „Znaleźliśmy N…” zostaje nietknięty. */ .baba-kat .baba-kat__sub:not(.baba-kat__sub--count) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .baba-kat .baba-kat__sub.is-open { display: block; -webkit-line-clamp: none; } .baba-kat .baba-kat__more { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--kat-accent); cursor: pointer; font-family: var(--kat-font); font-size: 14px; font-weight: 600; text-decoration: underline; } .baba-kat__sec { flex-wrap: wrap; gap: 14px; } .baba-kat .baba-kat__sec-title { font-size: 24px; line-height: 30px; } .baba-kat__sec-accent { width: 56px; height: 8px; margin-top: 10px; } .baba-kat .baba-kat__sec-link { min-width: 0; height: 40px; padding: 0 20px; font-size: 13px; letter-spacing: 1px; } /* --- pigułki: jeden rząd przewijany w bok --- */ /* Pas wychodzi poza kontener o jego margines, żeby zaczynał się i kończył na krawędzi ekranu: pigułka ucięta w połowie ekranu czyta się jako zaproszenie do przewinięcia, a ucięta przy marginesie — jako błąd. */ .baba-kat--pills { position: relative; } .baba-kat__pills { flex-wrap: nowrap; gap: 10px; margin-inline: calc(-1 * var(--kat-bleed)); padding-inline-start: calc(var(--kat-bleed) + 5px); padding-inline-end: var(--kat-bleed); padding-bottom: 2px; overflow-x: auto; scroll-snap-type: x proximity; /* Bez tego przyciąganie równa pigułkę do krawędzi portu przewijania, a nie do wnętrza paska — i kasuje odsunięcie ustawione paddingiem. */ scroll-padding-inline-start: calc(var(--kat-bleed) + 5px); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .baba-kat__pills::-webkit-scrollbar { display: none; } .baba-kat .baba-kat__pill { flex: 0 0 auto; min-width: 0; height: 42px; padding: 0 20px; font-size: 13px; letter-spacing: 1px; scroll-snap-align: start; } /* Rozmycie przy prawej krawędzi; kontroler gasi je na końcu przewijania. */ .baba-kat--pills::after { position: absolute; top: 0; right: calc(-1 * var(--kat-bleed)); width: 36px; height: 44px; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.94)); content: ""; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .baba-kat--pills.is-overflowing::after { opacity: 1; } .baba-kat--pills.is-end::after { opacity: 0; } .baba-kat__rule { margin-top: 24px; } /* * Strona produktu na telefonie. Wszystkie układy dwu- i czterokolumnowe * schodzą do jednej kolumny; wyjątkiem są plakietki i kafelki zawartości, * które w dwóch kolumnach nadal się bronią i oszczędzają dużo przewijania. */ .baba-prod .baba-prod__h1 { font-size: 32px; line-height: 38px; } .baba-prod .baba-prod__title { font-size: 26px; line-height: 32px; } /* Pięć plakietek w jednej linii daje przy 350 px po 60 px na sztukę — za mało na dwuwyrazowy podpis, więc zawijają się po trzy. */ .baba-prod__badges { flex-wrap: wrap; gap: 18px 4%; } .baba-prod__badge { flex: 0 0 30%; } .baba-prod__features, .baba-prod__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .baba-prod__feature { padding: 20px 14px; } .baba-prod__tile { padding: 18px 12px; } /* Kolumny szablonu nie zawijają zawartości. Elementor włącza na telefonie zawijanie każdemu kontenerowi. W rzędzie hero to potrzebne — dzięki temu galeria i tekst układają się jedno pod drugim. Ale kolumna ułożona w pionie z zawijaniem i bez własnej wysokości zeruje się: dzieci wychodzą poza nią, a to, co następuje po niej, wjeżdża na nie. Na karcie produktu z jednym zdjęciem tytuł lądował dosłownie na okładce, bo wysokość galerii bierze się z proporcji kadru, a nie z treści, więc nie miała czym rozepchnąć kolumny. Warunek `:has(> .elementor-widget)` trafia w kolumny trzymające widżety, a omija rzędy trzymające kolumny — czyli dokładnie te, które zawijać się mają. */ .e-con[class*="elementor-element-bpr"]:has(> .elementor-widget) { flex-wrap: nowrap; } .baba-prod__gallery-thumbs { gap: 10px; } .baba-prod__buy { grid-template-columns: minmax(0, 1fr); row-gap: 22px; padding: 22px 18px; } .baba-prod .baba-prod__price-now { font-size: 30px; line-height: 38px; } .baba-prod__personas, .baba-prod__toc { padding: 24px 20px; } /* Podgląd, kroki i nota o autorce: z dwóch kolumn na jedną. */ .baba-prod__preview, .baba-prod__steps-row, .baba-prod__author { grid-template-columns: minmax(0, 1fr); gap: 24px; } .baba-prod__preview { padding: 22px 18px; } /* Kroki jeden pod drugim — strzałki między nimi tracą sens w pionie. `align-items` musi wrócić do rozciągania. Odziedziczone z układu poziomego `flex-start` w kolumnie przestaje znaczyć „u góry”, a zaczyna „przy lewej”: każdy krok robi się wtedy tak szeroki jak jego najdłuższa linia, więc wyśrodkowany w środku tekst i ikona wypadały w innym miejscu przy każdym kroku — im krótszy opis, tym bardziej w lewo. */ .baba-prod__steps { flex-direction: column; align-items: stretch; gap: 22px; } .baba-prod__step-arrow { display: none; } .baba-prod .baba-prod__author-name { font-size: 32px; line-height: 40px; } /* Podgląd materiału trzymał na telefonie trzy strony na widok — skan tekstu szeroki na 100 px, z którego nie sposób ocenić, czy materiał jest czytelny, a po to ta sekcja istnieje. Jedna strona na widok, reszta przesunięciem. */ .baba-prod__preview-media .baba-kat__track, .baba-prod--reviews .baba-kat__track, .baba-prod--related .baba-kat__track { --kat-cols: 1; --kat-col-gap: 16px; } .baba-prod__points { gap: 14px 20px; } .baba-prod__point { max-width: none; } /* Każda kontrolka na własnym rzędzie — obok siebie nie zmieściłyby etykiet. */ .baba-kat__search, .baba-kat__field, .baba-kat__field + .baba-kat__field, .baba-kat__sort .baba-kat__field { flex: 1 1 100%; margin-inline-start: 0; } .baba-kat__sort { flex-wrap: wrap; row-gap: 10px; } /* Jeden slajd na ekran — liczbę kart ustawia kontrolka widżetu, tutaj zostaje tylko odstęp, bo siatkowe zero zlepiłoby slajdy ze sobą. */ .baba-kat__track { --kat-col-gap: 16px; } .baba-kat .baba-kat__arrow { width: 36px; height: 36px; font-size: 26px; } .baba-kat__rowsec { gap: 18px; } .baba-kat .baba-kat__promo-lead { margin-bottom: 18px; font-size: 20px; line-height: 28px; } .baba-kat__promo-card { grid-template-columns: minmax(0, 1fr); padding: 14px; row-gap: 16px; } .baba-kat__promo-aside { flex-direction: column; align-items: stretch; } .baba-kat .baba-kat__promo-cta { justify-content: center; } .baba-kat__pager { margin-top: 32px; flex-wrap: wrap; gap: 4px; } .baba-kat__pager a, .baba-kat__pager span { min-width: 30px; font-size: 14px; } } /* * Duży telefon i mała tabletka: dwie kolumny dają kartę ~340 px, czyli * praktycznie szerokość zaprojektowaną (327), więc zostaje układ z makiety. * Kontrolka widżetu ma na tym progu wpisane „1” i nie da się tego rozdzielić * — stąd znowu bezpośrednie `grid-template-columns`. Bez tego jedna karta * rozciągała się na 709 px, a pionowa okładka lądowała w poziomym kadrze. */ @media (min-width: 601px) and (max-width: 767px) { .baba-kat .baba-kat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.017%; } } /* ---------- wąski telefon: jedna kolumna ---------- */ /* * Karta zostaje pionowa, z okładką u góry — jak w makiecie. Przy jednej * kolumnie ma tu ~331 px, czyli praktycznie szerokość zaprojektowaną (327), * więc rozmiary tytułu, ceny, pigułki koszyka i przycisku zostają nietknięte. * Odstęp pionowy między kartami dziedziczy 24 px z progu telefonu — 63 px * z makiety liczono przy czterech kolumnach, tu byłoby to samo powietrze. */ @media (max-width: 600px) { .baba-kat { --kat-cols: 1; --kat-col-gap: 0; } } /* ---------- ikony z Figmy ---------- */ /* * Karta produktu — wymiary wprost z makiety. * * Makieta jest rysowana na siatce 1749 px, a treść na stronie ma 1440 px — * tyle, ile nagłówek i stopka motywu. Każdy wymiar z projektu przechodzi więc * przez `--kat-s`. Piksele w `calc()` to liczby żywcem z Figmy, dzięki czemu * arkusz da się z nią porównać bez przeliczania. * * Pismo idzie przez tę samą skalę. Wcześniej skalowana była tylko geometria, * a stopnie pisma wpisywałem w pikselach projektu — przez to tekst był o 21 % * za duży wobec własnych pudełek. Że skala jest właściwa, widać po samej * stronie: tekst podstawowy motywu ma 15 px, a 20 px z makiety daje tu 16,5. * * Tokeny pisma przedefiniowane są na `.baba-prod`, a nie w `:root`, bo te same * nazwy obsługują siatkę kategorii i wyniki wyszukiwania, rysowane w innej skali. */ .baba-prod { --kat-s: 0.8233; --kat-fs-body: calc(20px * var(--kat-s)); --kat-lh-body: calc(26px * var(--kat-s)); --kat-fs-btn: calc(16px * var(--kat-s)); --kat-lh-btn: calc(22px * var(--kat-s)); --kat-fs-small: calc(14px * var(--kat-s)); --kat-lh-small: calc(18px * var(--kat-s)); --kat-ls-wide: calc(1.5px * var(--kat-s)); } /* * Nagłówki. Makieta ma ich TRZY poziomy, nie jeden — sprawdzone kalibracją * szerokości rysunku napisu w podglądzie: * * tytuł produktu (h1) 60 / 70 * duży nagłówek sekcji 60 / 66 „O tym opracowaniu”, „Co znajdziesz” * mały nagłówek sekcji 36 / 44 podgląd, kroki, opinie, powiązane * * Wcześniej wszystkie `__title` dostawały rozmiar tytułu produktu, przez co * „Jak otrzymasz produkt?” było o dwie trzecie za duże, a sam tytuł produktu * w ogóle nie przechodził przez skalę. */ .baba-prod .baba-prod__h1 { font-size: calc(60px * var(--kat-s)); line-height: calc(70px * var(--kat-s)); } .baba-prod .baba-prod__title { font-size: calc(60px * var(--kat-s)); line-height: calc(66px * var(--kat-s)); } .baba-prod--preview .baba-prod__title, .baba-prod--steps .baba-prod__title, .baba-prod--schedule .baba-prod__title, .baba-prod--reviews .baba-prod__title, .baba-prod--related .baba-prod__title, /* Sekcja powiązanych używa nagłówka z katalogu; zawężamy do karty produktu, żeby nie ruszyć siatki kategorii ani wyników wyszukiwania. */ .baba-prod--related .baba-kat__sec-title { font-size: calc(36px * var(--kat-s)); line-height: calc(44px * var(--kat-s)); } /* --- „O produkcie” --- */ /* Wyróżniony wstęp: 20/36 — stopień jak tekst podstawowy, ale luźniej. */ .baba-prod--about .baba-prod__lead { font-size: calc(20px * var(--kat-s)); line-height: calc(36px * var(--kat-s)); } .baba-prod .baba-prod__point { font-size: calc(16px * var(--kat-s)); line-height: calc(26px * var(--kat-s)); } /* Odhaczenie przy punkcie ma w makiecie 48 px, czyli dwa razy tyle, co pozycja w boksie zaufania. */ .baba-prod .baba-prod__point-icon { width: calc(48px * var(--kat-s)); height: calc(48px * var(--kat-s)); } /* --- boks „Dla kogo” i spis treści: oba tytuły 24/36 --- */ .baba-prod .baba-prod__personas-title, .baba-prod .baba-prod__toc-title { font-size: calc(24px * var(--kat-s)); line-height: calc(36px * var(--kat-s)); } /* * Spis treści. W makiecie każdy wiersz jest osobnym białym kafelkiem 613 × 70, * rozdzielonym różowym tłem sekcji (odstęp 12 px) — nie jednym panelem z liniami * w środku. Kafelki sięgają obu krawędzi kolumny, więc panel nie ma marginesu * wewnętrznego; inaczej wiersze wychodzą o 12 % za wąskie. */ .baba-prod .baba-prod__toc { padding: 0; border: 0; background: none; } .baba-prod .baba-prod__toc-list { display: flex; flex-direction: column; gap: calc(12px * var(--kat-s)); } .baba-prod .baba-prod__toc-item { min-height: calc(70px * var(--kat-s)); padding: 0 calc(26px * var(--kat-s)); align-items: center; border-bottom: 0; border-radius: var(--kat-panel-radius); background: #fff; font-size: calc(24px * var(--kat-s)); line-height: calc(36px * var(--kat-s)); } /* --- podgląd materiału --- */ /* Nota pod przyciskiem: 20/26, a od przycisku dzieli ją w makiecie 24 px (przycisk kończy się na 3779, nota zaczyna na 3803). */ .baba-prod .baba-prod__preview-note { margin-top: calc(24px * var(--kat-s)); font-size: calc(20px * var(--kat-s)); line-height: calc(26px * var(--kat-s)); } /* Przycisk „Pobierz darmowy fragment”: w makiecie 494 x 80. */ .baba-prod--preview .baba-prod__cta { /* `min` zamiast gołej wartości: 494 px z makiety jest szersze niż telefon, a minimalna szerokość nie daje się ścisnąć — przycisk wypychał wtedy całą stronę i dawało się ją przewijać w bok o 50 px. */ min-width: min(calc(494px * var(--kat-s)), 100%); min-height: calc(80px * var(--kat-s)); justify-content: center; } /* * Ikony wyeksportowane z projektu mają różne proporcje (od 27,8 × 38,8 po * 50,7 × 37), więc skalujemy je z zachowaniem kształtu — wpisanie w kwadrat * spłaszczałoby połowę zestawu. Margines wewnętrzny to połowa różnicy między * kołem a ikoną, obie liczby z makiety. */ .baba-prod__badge-icon svg, .baba-prod__feature-icon svg, .baba-prod__tile-icon svg, .baba-prod__persona-icon svg, .baba-prod__step-icon svg, .baba-prod__trust-icon svg, .baba-prod__point-icon svg { width: auto; height: auto; max-width: 100%; max-height: 100%; } /* koło 84, ikona 44 */ .baba-prod__badge-icon { width: calc(84px * var(--kat-s)); height: calc(84px * var(--kat-s)); padding: calc(20px * var(--kat-s)); } /* koło 112, ikona 44 — największe na stronie */ .baba-prod__feature-icon { width: calc(112px * var(--kat-s)); height: calc(112px * var(--kat-s)); padding: calc(34px * var(--kat-s)); } /* koło 84, ikona 48 */ .baba-prod__tile-icon { width: calc(84px * var(--kat-s)); height: calc(84px * var(--kat-s)); padding: calc(18px * var(--kat-s)); } /* Persony i kroki mają w makiecie koło niebieskie, nie różowe — sprawdzone na pikselach: #0160D4 przy wszystkich trzech personach i trzech krokach. */ .baba-prod__persona-icon { width: calc(84px * var(--kat-s)); height: calc(84px * var(--kat-s)); padding: calc(23px * var(--kat-s)); background: var(--kat-sec-accent); } .baba-prod__step-icon { width: calc(104px * var(--kat-s)); height: calc(104px * var(--kat-s)); padding: calc(33px * var(--kat-s)); background: var(--kat-sec-accent); } .baba-prod__trust-icon, .baba-prod__point-icon { width: calc(24px * var(--kat-s)); height: calc(24px * var(--kat-s)); } /* --- stopnie pisma z makiety --- */ .baba-prod .baba-prod__feature-title, .baba-prod .baba-prod__step-title { font-size: calc(24px * var(--kat-s)); line-height: calc(32px * var(--kat-s)); } /* Sama nota Omnibus. Tytuły „Dla kogo” i spisu treści miały tu 20/26, ale w makiecie mają 24/36 — ustawia je blok nagłówków niżej, a ta reguła stała za nim i go przebijała. */ .baba-prod .baba-prod__omnibus { font-size: calc(20px * var(--kat-s)); line-height: calc(26px * var(--kat-s)); } .baba-prod .baba-prod__trust-item { font-size: calc(16px * var(--kat-s)); line-height: calc(19px * var(--kat-s)); } /* Kafelek zawartości wg makiety: tytuł 18,185/24,246 wersalikami, opis 15,154/19,7 — oba w #1e1e1e, nie w szarości. */ .baba-prod__tiles { gap: calc(24px * var(--kat-s)); } .baba-prod .baba-prod__tile-title { margin: calc(16px * var(--kat-s)) 0 0; color: var(--kat-ink); font-size: calc(18.185px * var(--kat-s)); font-weight: 600; letter-spacing: 0; line-height: calc(24.246px * var(--kat-s)); text-transform: uppercase; } .baba-prod .baba-prod__tile-desc { margin: calc(10px * var(--kat-s)) 0 0; color: var(--kat-ink); font-size: calc(15.154px * var(--kat-s)); line-height: calc(19.7px * var(--kat-s)); } /* * Telefon. * * Tu skala z makiety przestaje obowiązywać: przy 390 px kolumna jest jedna * albo dwie, więc tekst ma względem niej WIĘCEJ miejsca niż w projekcie, nie * mniej. Przeliczanie go dalej współczynnikiem zjechałoby na 10 px. Stopnie * są tu więc bezwzględne i trzymają się tekstu podstawowego motywu (15 px), * a skala zostaje tylko przy kołach, żeby nie zabierały pół ekranu. */ @media (max-width: 767px) { .baba-prod { --kat-fs-body: 15px; --kat-lh-body: 21px; --kat-fs-small: 12.5px; --kat-lh-small: 17px; --kat-ls-wide: 1px; } .baba-prod .baba-prod__title { font-size: 30px; line-height: 36px; } .baba-prod .baba-prod__feature-title, .baba-prod .baba-prod__step-title { font-size: 18px; line-height: 24px; } .baba-prod .baba-prod__omnibus { font-size: 16px; line-height: 22px; } .baba-prod .baba-prod__personas-title, .baba-prod .baba-prod__toc-title { font-size: 18px; line-height: 26px; } .baba-prod .baba-prod__tile-title { font-size: 14px; line-height: 19px; } .baba-prod .baba-prod__tile-desc { font-size: 12.5px; line-height: 17px; } .baba-prod__badge-icon, .baba-prod__tile-icon, .baba-prod__persona-icon { width: 56px; height: 56px; padding: 13px; } .baba-prod__feature-icon { width: 64px; height: 64px; padding: 15px; } .baba-prod__step-icon { width: 60px; height: 60px; padding: 14px; } } /* * Strzałki karuzeli na karcie produktu. * * W makiecie są NIEBIESKIE i mniejsze niż w katalogu: 54,7 px na siatce 1750. * Katalog i wyniki wyszukiwania zostają bez zmian — mają własny, zaakceptowany * wygląd, a te reguły są zawężone do `.baba-prod`. */ .baba-prod .baba-kat__arrow { width: calc(54.7px * var(--kat-s)); height: calc(54.7px * var(--kat-s)); background: var(--kat-sec-accent); font-size: calc(38px * var(--kat-s)); } .baba-prod .baba-kat__arrow:hover { background: #004fae; } /* * Podgląd materiału ma ramkę, a strzałki stoją w makiecie WEWNĄTRZ niej — * lewa w przerwie między tekstem a paskiem stron, prawa tuż przy krawędzi. * Odziedziczone po katalogu wysunięcie o 86 px sadzało prawą okrakiem na * obramowaniu panelu. * * 34 px to margines wewnętrzny panelu: prawa strzałka wchodzi dokładnie w nie, * więc dotyka paska stron, a nie ramki. */ /* * Strzałki podglądu stoją w makiecie OBOK paska zdjęć, nie na nim: lewa kończy * się 15 px przed pierwszym zdjęciem, prawa zaczyna 14 px za ostatnim. Przy * pozycjonowaniu bezwzględnym prawa nie miała własnego pasa i kładła się na * zdjęciu — tor zajmował całą szerokość karuzeli. * * Stąd trzy kolumny: strzałka, pasek, strzałka. Kolejność wynika z układu * znaczników, więc nie trzeba jej wymuszać. */ .baba-prod--preview .baba-kat__carousel { display: grid; align-items: center; column-gap: calc(15px * var(--kat-s)); grid-template-columns: auto minmax(0, 1fr) auto; } .baba-prod--preview .baba-kat__arrow { position: static; transform: none; } /* Zdjęcia: w makiecie 262 px szerokości z przerwą 34. */ .baba-prod--preview .baba-kat__track { --kat-col-gap: calc(34px * var(--kat-s)); } /* Na telefonie strzałki wchodzą na zdjęcie zamiast stać obok niego. Karuzela ma z makiety trzy kolumny: strzałka, tor, strzałka. Na dużym ekranie to bez znaczenia, ale przy 360 px dwie strzałki zabierały 90 z 267 px i na stronę zostawało 84 px — z takiego skanu nie da się nic wyczytać, a po to ta sekcja istnieje. Blok stoi tutaj, a nie wyżej z resztą reguł telefonu, bo musi być w arkuszu PO regule, którą nadpisuje. Umieszczony wcześniej przegrywał kolejnością przy równej specyficzności — i cicho nic nie robił. */ @media (max-width: 767px) { .baba-prod--preview .baba-kat__carousel { position: relative; grid-template-columns: minmax(0, 1fr); } .baba-prod--preview .baba-kat__carousel .baba-kat__arrow { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); } .baba-prod--preview .baba-kat__carousel .baba-kat__arrow--prev { inset-inline-start: 6px; } .baba-prod--preview .baba-kat__carousel .baba-kat__arrow--next { inset-inline-end: 6px; } } /* Osadzony strumień opinii z zewnętrznego serwisu — bez własnych ozdób, żeby nie walczyć ze stylem dostawcy. */ .baba-prod__reviews-embed { margin-top: calc(24px * var(--kat-s)); } .baba-prod__reviews-embed iframe { max-width: 100%; } /* * Plakietka z rodzajem treści na kadrze karty. * * W projekcie siedzi w lewym górnym rogu zdjęcia, na półprzezroczystej bieli, * wersalikami. Kadr bywa ciemny albo jasny zależnie od okładki, więc plakietka * niesie własne tło — samo rozjaśnienie tekstu nie wystarczyłoby na jasnej. */ .baba-kat-card__media { position: relative; } .baba-kat .baba-kat-card__type { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; padding: 5px 12px; border-radius: 999px; /* Pełna barwa akcentu, nie przezroczysta biel: okładki bywają ciemne i jasne, a plakietka ma się czytać na każdej tak samo. */ background: var(--kat-accent); color: #fff; font-family: var(--kat-font); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; } /* ---------- harmonogram kursu ---------- */ /* * Pas etapów: kafelek, strzałka, kafelek. Strzałka jest tym samym wektorem, * co między krokami „Jak otrzymasz produkt?” — ten sam gest w obu miejscach * ma wyglądać tak samo. * * Przewijanie w poziomie, a nie zawijanie do drugiego rzędu: harmonogram * czyta się jako oś czasu i złamanie jej w połowie gubi tę kolejność. Kurs * może mieć dwanaście modułów, a wtedy nic nie zmieści się w jednym rzędzie. */ /* --- Kategorie pod nagłówkiem --- */ .baba-prod .baba-prod__terms { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10px * var(--kat-s)); margin: 0; padding: 0; list-style: none; } /* Kafelek ma być odnośnikiem, a nie przyciskiem — stąd obrys zamiast wypełnienia. Pod ceną i przyciskiem zakupu wypełnione kafelki konkurowałyby z nimi o uwagę, a to tylko nawigacja i odnośnik dla wyszukiwarki. */ .baba-prod .baba-prod__term { display: inline-flex; align-items: center; padding: calc(7px * var(--kat-s)) calc(16px * var(--kat-s)); border: 1px solid rgba(153, 91, 179, 0.3); border-radius: 999px; color: var(--kat-ink); font-size: var(--kat-fs-small); letter-spacing: var(--kat-ls-wide); line-height: var(--kat-lh-small); text-decoration: none; text-transform: uppercase; transition: background 0.16s ease, border-color 0.16s ease; } /* Kafelki są białe, wszystkie tak samo. Wypełnione różem kategorie stały obok pustych tagów i pas czytał się jak zbiór naklejek z różnych zestawów. Modyfikator `--kat` zostaje w znaczniku, bo mówi, czym jest odnośnik, ale nie maluje już niczego. */ /* Najechanie wypełnia kafelek akcentem. Poprzednia wersja ustawiała obrys i miękkie tło — czyli dokładnie to, co kafelek kategorii ma na stałe. Najechanie na kategorię nie zmieniało więc niczego i odnośnik wyglądał na martwy. Wypełnienie działa tak samo na obu odmianach i jest jednoznaczne. */ .baba-prod .baba-prod__term:hover, .baba-prod .baba-prod__term:focus-visible { border-color: var(--kat-accent); background: var(--kat-accent); color: #fff; } /* --- wybór wariantu --- WooCommerce 11 renderuje wybór jako `table.variations` z etykietą w `th` i listą rozwijaną w `td`. Nasz arkusz nie znał żadnej z tych klas, więc formularz wyglądałby jak surowe pole z przeglądarki wciśnięte pod cenę. Układ pionowy zamiast tabelarycznego: kolumna zakupu ma na telefonie 320 px, a etykiety atrybutów bywają długie („Termin konsultacji"). Para etykieta-obok-listy nie mieści się tam ani razu. */ .baba-prod .baba-prod__cart table.variations { width: 100%; margin: 0 0 calc(16px * var(--kat-s)); border: 0; border-collapse: collapse; } .baba-prod .baba-prod__cart table.variations :is(tbody, tr, th, td) { display: block; width: auto; padding: 0; border: 0; /* Motyw podmalowuje komórki tabel szarością (rgba(128,128,128,.07)). Pod listą wychodził z tego szary pasek na całą szerokość kolumny — wyglądał jak puste pole do wypełnienia, a nie jak tło etykiety. */ background: none; text-align: start; } .baba-prod .baba-prod__cart table.variations th.label { margin-bottom: calc(6px * var(--kat-s)); color: var(--kat-muted); font-family: var(--kat-font); font-size: var(--kat-fs-small); font-weight: 400; letter-spacing: var(--kat-ls-wide); line-height: var(--kat-lh-small); text-transform: uppercase; } /* `appearance: none` zdejmuje systemowy wygląd pola, ale wtedy znika też strzałka — stąd własna, wrysowana w tło. */ .baba-prod .baba-prod__cart select { width: 100%; padding: calc(12px * var(--kat-s)) calc(38px * var(--kat-s)) calc(12px * var(--kat-s)) calc(16px * var(--kat-s)); border: 1px solid var(--kat-panel-line); border-radius: var(--kat-radius); appearance: none; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231e1e1e' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-position: right calc(16px * var(--kat-s)) center; background-repeat: no-repeat; background-size: calc(12px * var(--kat-s)) auto; color: var(--kat-ink); cursor: pointer; font-family: var(--kat-font); font-size: var(--kat-fs-btn); line-height: var(--kat-lh-btn); } .baba-prod .baba-prod__cart select:focus-visible { border-color: var(--kat-accent); outline: 2px solid var(--kat-accent-soft); } /* „Wyczyść” to wyjście awaryjne, nie równorzędna akcja — cichy tekst pod listą. WooCommerce chowa go przed wyborem przez `visibility: hidden` w stylu wpisanym prosto w element, więc odnośnik dalej zajmował swoje 22 px: między listą a przyciskiem wisiała pusta przerwa, zanim cokolwiek dało się wyczyścić. Wyjmujemy go z układu i wpuszczamy dopiero wtedy, gdy ich skrypt sam go odsłoni. Gdyby kiedyś przestali pisać ten styl, odnośnik po prostu zostanie schowany — czyszczenie robi też pierwsza pozycja listy. */ .baba-prod .baba-prod__cart a.reset_variations { display: none; margin-top: calc(8px * var(--kat-s)); color: var(--kat-muted); font-size: var(--kat-fs-small); line-height: var(--kat-lh-small); } .baba-prod .baba-prod__cart a.reset_variations[style*="visible"] { display: inline-block; margin-top: calc(8px * var(--kat-s)); color: var(--kat-muted); font-size: var(--kat-fs-small); line-height: var(--kat-lh-small); } /* Cenę wybranego wariantu przepisujemy do dużej ceny nad przyciskiem, więc ta wstawiana przez WooCommerce pod listami stałaby podwójnie. */ .baba-prod .baba-prod__cart .woocommerce-variation-price { display: none; } .baba-prod .baba-prod__cart .woocommerce-variation-availability p { margin: 0 0 calc(12px * var(--kat-s)); color: var(--kat-muted); font-size: var(--kat-fs-small); line-height: var(--kat-lh-small); } /* Przedimek przy zakresie cen: „od 149,00 zł”. Ma być podpisem przy liczbie, a nie jej częścią, więc nie dziedziczy jej wielkości. */ .baba-prod .baba-prod__price-od { align-self: flex-end; margin-inline-end: calc(-6px * var(--kat-s)); color: var(--kat-muted); font-size: var(--kat-fs-body); line-height: calc(40px * var(--kat-s)); } /* --- Zachęty do zakupu --- */ /* Ile zostaje w kieszeni. Procent nad przekreśloną ceną mówi „jak bardzo taniej”, ta linia mówi „o ile” — i to ona przekonuje, bo nie trzeba nic przeliczać w głowie. */ .baba-prod .baba-prod__saving { margin: calc(6px * var(--kat-s)) 0 0; color: var(--kat-accent-strong); font-size: var(--kat-fs-btn); font-weight: 600; line-height: var(--kat-lh-btn); } .baba-prod .baba-prod__sale-end { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--kat-s)); margin: calc(10px * var(--kat-s)) 0 0; color: var(--kat-muted); font-size: var(--kat-fs-small); line-height: var(--kat-lh-small); } /* Zegar przy cenie jest wersją kieszonkową dużego licznika nad nagłówkiem: te same pudełka cyfr, ale bez podpisów i bez tła — ma podpowiadać pośpiech, a nie przejmować uwagę należną cenie. */ .baba-prod .baba-prod__sale-clock { display: inline-flex; align-items: center; gap: calc(2px * var(--kat-s)); color: var(--kat-ink); font-variant-numeric: tabular-nums; font-weight: 600; } .baba-prod .baba-prod__sale-clock .baba-prod__cd-boxes { display: inline-block; } /* Skrypt licznika rozbija liczbę na osobne cyfry, bo w dużej sekcji każda siedzi we własnym szarym pudełku. Tutaj pudełek nie ma, więc cyfry muszą wrócić do zwykłego tekstu — inaczej sekundy czyta się jako „3 2”. */ .baba-prod .baba-prod__sale-clock .baba-prod__cd-digit { display: inline; width: auto; height: auto; border-radius: 0; background: none; color: inherit; font-size: inherit; font-weight: inherit; } .baba-prod .baba-prod__sale-clock i { font-style: normal; opacity: 0.45; } /* Skład zestawu pod boksem zakupu. Zastępuje schowaną siatkę wtyczki. Wcześniej była to jedna linijka pod tytułem, z nazwami rozdzielonymi kropką środkową. Kursy w zestawie nazywają się po sześćdziesiąt znaków („Rozprawka na egzaminie ósmoklasisty – autorski kurs Baby od polskiego”), więc trzy takie nazwy zlewały się w ciąg, w którym nie dało się ich policzyć. Każda dostaje teraz własny wiersz, a nagłówek jest ten sam, co przy „O produkcie” — nadtytuł z niebieską kreską, bo to jest sekcja, a nie dopisek. Odstęp nad listą daje reguła `.baba-prod__head + *`, wspólna dla sekcji. */ .baba-prod .baba-prod__sklad-lista { display: grid; /* Liczbę kolumn podaje widżet — tyle, ile pozycji w zestawie. */ grid-template-columns: repeat(var(--sklad-kolumn, 3), minmax(0, 1fr)); margin: 24px 0 0; padding: 0; border: 1px solid var(--kat-panel-line); border-radius: var(--kat-panel-radius); background: #fff; list-style: none; } .baba-prod .baba-prod__sklad-poz { display: flex; } /* Odnośnikiem jest cała komórka, nie sama nazwa — przy okładce i cenie w środku klient celuje w kafelek. Stąd `flex: 1` i własne wypełnienie: pole kliknięcia ma sięgać kresek, a nie kończyć się na tekście. */ .baba-prod .baba-prod__sklad-link { display: flex; width: 100%; flex-direction: column; align-items: center; padding: calc(22px * var(--kat-s)) calc(18px * var(--kat-s)); color: var(--kat-ink); font-size: var(--kat-fs-body); line-height: var(--kat-lh-body); text-align: center; text-decoration: none; /* Kit motywu składa wersalikami każdy odnośnik na stronie (`.elementor-kit-10531 a`). Nazwa produktu ma sześćdziesiąt znaków — w kapitalikach robił się z niej blok krzyczącego tekstu. */ text-transform: none; transition: background 0.16s ease; } /* Kolor przy najechaniu ustawiamy sami, bo kit motywu daje wszystkim odnośnikom `a:hover { color: #E0FC00 }` — kwasową limonkę z akcentu motywu. Na białym i na jasnoróżowym tle jest nieczytelna. Fiolet `--kat-accent-strong` ma na tym tle kontrast 5,6:1, czyli z zapasem ponad wymagane 4,5. */ .baba-prod .baba-prod__sklad-link:hover, .baba-prod .baba-prod__sklad-link:focus-visible { background: var(--kat-accent-soft); color: var(--kat-accent-strong); /* Kit dokłada przy najechaniu wersaliki i podkreślenie — nazwa zmieniała pod kursorem wielkość liter i podskakiwała o wiersz. Tło i kolor mówią wystarczająco, że to odnośnik. */ text-decoration: none; text-transform: none; } /* Ta sama limonka łapała odnośniki w opisach produktów — jedyne inne linki tekstowe na karcie, które nie miały własnego stanu. Zostają fioletowe, a sygnałem najechania jest grubsza kreska. */ .baba-prod .baba-prod__text a:hover, .baba-prod .baba-prod__text a:focus-visible { color: var(--kat-accent-strong); text-decoration-thickness: 2px; } /* Okładki produktów są kwadratowe (1024 × 1024 w każdym z trzech kursów), więc kadr trzyma ten proporcje i nie zniekształca żadnej z nich. */ .baba-prod .baba-prod__sklad-foto { width: calc(120px * var(--kat-s)); height: auto; margin-bottom: calc(14px * var(--kat-s)); border-radius: var(--kat-radius); aspect-ratio: 1; object-fit: cover; } .baba-prod .baba-prod__sklad-tekst { display: flex; flex-direction: column; } .baba-prod .baba-prod__sklad-nazwa { display: block; } .baba-prod .baba-prod__sklad-cena { display: block; margin-top: calc(8px * var(--kat-s)); /* Bez własnego koloru — dziedziczy po odnośniku, więc przy najechaniu zmienia się razem z nazwą, a nie zostaje sama w ciemnym. */ font-size: var(--kat-fs-body); font-weight: 600; line-height: var(--kat-lh-body); } /* Kreska między komórkami zamiast odstępu: pas ma się czytać jak jeden prostokąt podzielony na części, a nie jak trzy kafelki obok siebie — tak samo, jak pas zalet niżej na stronie. Komórki wyrównują się przy tym do najwyższej z nich, bo siatka daje im wspólny wiersz. */ .baba-prod .baba-prod__sklad-poz + .baba-prod__sklad-poz { border-left: 1px solid var(--kat-panel-line); } /* Siatka zawartości zestawu, dorysowywana skryptem wtyczki `easy-product-bundles` w okolicy formularza koszyka — a więc w środku naszego boksu zakupu. Rozpychała go z 260 px do 1190 px i wyglądała jak wklejony obcy widżet. Chowamy stylem, a nie zdejmując skrypt wtyczki: to on wypełnia ukryte pole `#asnp_wepb_items`, z którego koszyk czyta zawartość zestawu. Bez skryptu zakup zestawu przestałby działać po cichu, a siatka i tak leży poza `form.cart`, więc styl nie dotyka samego formularza. Modyfikator nadaje widżet zakupu i tylko wtedy, gdy w zestawie nie ma nic do wyboru — patrz Baba_Prod_Buy_Widget::zestaw_bez_wyboru(). */ .baba-prod__buy--zestaw-staly .asnp_easy_product_bundle { display: none; } /* --- Kontener bez treści znika razem z tłem --- Widżety chowają się same, gdy produkt nie ma dla nich treści — Elementor nie wypisuje widżetu, który nic nie wyrenderował. Kontener zostaje jednak zawsze, razem ze swoim tłem i marginesami, więc nieopisany produkt dostawał różowy pas przez całą szerokość ekranu i nic w środku. Z poziomu PHP tego nie da się złapać: Elementor 4.2.3 przepuszcza przez `print_element()`, a więc i przez akcje `before_render` / `after_render`, wyłącznie widżety. Dla kontenerów nie odpala ich ani razu — sprawdzone licznikiem na żywej stronie. Zostaje więc arkusz. `:has()` pyta o to samo, co pytałby PHP: czy w środku ostał się jakikolwiek widżet. Zawężone do `bpr`, czyli do identyfikatorów szablonu karty produktu (patrz skrypty/build-product.php), żeby nie ruszyć nagłówka, stopki ani stron składanych ręcznie, gdzie pusty kontener bywa świadomym paskiem koloru. Przeglądarka bez `:has()` zachowa się jak dotąd — pas zostanie widoczny, nic się nie zepsuje. */ .e-con[class*="elementor-element-bpr"]:not(:has(.elementor-widget)) { display: none; } /* Harmonogram jest pasem na całą szerokość wciśniętym między dwa bloki tekstu, więc widać, gdy oddycha nierówno. Pod nim leżało 100 px — tyle ma margines wiersza „Zawartość” — a nad nim 20 px z przerwy kontenera, przez co pas przyklejał się do „Dla kogo”. 80 px dokładane tutaj wyrównuje obie strony. Wartość jest surowa, nie skalowana przez `--kat-s`, bo dopełnia margines z szablonu, który też jest surowy; przeliczenie jednej z nich rozjechałoby symetrię przy każdej szerokości ekranu. */ .baba-prod--schedule { margin-top: 80px; } .baba-prod__schedule { display: flex; /* Kafelki równają do najwyższego zamiast każdy do swojej treści. Przy `center` etap z jednoliniowym podpisem miał 137 px, a z dwuliniowym 155 — różnica 18 px, i ikony siadały na dwóch różnych wysokościach, przez co rząd wyglądał na poszarpany. Strzałki między etapami dalej trafiają w środek, bo mają własne `align-items: center`. */ align-items: stretch; overflow-x: auto; margin: calc(40px * var(--kat-s)) 0 0; padding: 0 0 calc(8px * var(--kat-s)); gap: calc(14px * var(--kat-s)); list-style: none; scrollbar-width: none; } .baba-prod__schedule::-webkit-scrollbar { display: none; } .baba-prod .baba-prod__stage { display: flex; flex: 0 0 auto; /* Makieta dawała 178 px, po przeskalowaniu 147 — a w rzędzie zostawało 158 px niewykorzystanej szerokości i pas wyglądał na wciśnięty w lewo. Wartość policzona z pomiaru, nie z proporcji: strzałki i odstępy zajmują 404 px, więc na sześć kafelków zostaje 1036, czyli po 172. 206 px po skali daje 170 i zostawia 18 px zapasu — przy 220 px pas przestrzeliwał o 50 i zaczynał się przewijać, czyli ostatni kafelek znowu był ucięty. Bez wyśrodkowania: przy dłuższym harmonogramie pas się przewija, a wtedy `center` chowałby pierwszy kafelek poza lewą krawędzią. */ width: calc(206px * var(--kat-s)); flex-direction: column; align-items: center; padding: calc(20px * var(--kat-s)) calc(12px * var(--kat-s)); border: 1px solid var(--kat-panel-line); border-radius: var(--kat-panel-radius); background: #fff; text-align: center; } .baba-prod__stage-icon { display: inline-flex; width: calc(58px * var(--kat-s)); height: calc(58px * var(--kat-s)); align-items: center; justify-content: center; padding: calc(15px * var(--kat-s)); border-radius: 50%; background: var(--kat-icon-bg); color: var(--kat-icon); } .baba-prod__stage-icon svg { width: auto; height: auto; max-width: 100%; max-height: 100%; } .baba-prod .baba-prod__stage-label { margin: calc(14px * var(--kat-s)) 0 0; color: var(--kat-ink); font-family: var(--kat-font); font-size: calc(16px * var(--kat-s)); font-weight: 600; letter-spacing: var(--kat-ls-wide); line-height: calc(22px * var(--kat-s)); text-transform: uppercase; } .baba-prod .baba-prod__stage-date { margin: calc(10px * var(--kat-s)) 0 0; color: var(--kat-muted); font-family: var(--kat-font); font-size: calc(15px * var(--kat-s)); line-height: calc(20px * var(--kat-s)); } /* Strzałka między kafelkami — bez własnej ramki i tła, sam znak. */ .baba-prod__stage-sep { display: flex; flex: 0 0 auto; align-items: center; } .baba-prod__stage-arrow { display: block; width: calc(70px * var(--kat-s)); height: calc(12px * var(--kat-s)); color: var(--kat-sec-accent); } .baba-prod__stage-arrow svg { display: block; width: 100%; height: 100%; } @media (max-width: 767px) { .baba-prod .baba-prod__stage { width: 132px; padding: 16px 10px; } .baba-prod__stage-arrow { width: 34px; } } /* ---------- licznik do wydarzenia ---------- */ .baba-prod--countdown { margin-top: calc(28px * var(--kat-s)); text-align: center; } /* Zapowiedź jest podkreślona jak w projekcie — to zdanie, nie odnośnik, więc podkreślenie rysujemy obramowaniem, żeby nie udawało linku. */ .baba-prod .baba-prod__countdown-lead { display: inline-block; margin: 0 0 calc(20px * var(--kat-s)); padding-bottom: calc(6px * var(--kat-s)); border-bottom: 1px solid var(--kat-ink); color: var(--kat-ink); font-family: var(--kat-font); font-size: calc(16px * var(--kat-s)); font-weight: 500; letter-spacing: var(--kat-ls-wide); line-height: calc(22px * var(--kat-s)); text-transform: uppercase; } .baba-prod__countdown { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: calc(26px * var(--kat-s)); } .baba-prod__cd-group { display: flex; flex-direction: column; align-items: center; gap: calc(10px * var(--kat-s)); } .baba-prod__cd-boxes { display: flex; gap: calc(8px * var(--kat-s)); } /* * Jedna cyfra na pudełko. Liczba pudełek zmienia się sama, gdy dni spadną * ze stu na dziewięćdziesiąt dziewięć — dlatego szerokość jest stała, a nie * liczona z zawartości: inaczej rząd skakałby przy każdym przeskoku. */ .baba-prod__cd-digit { display: flex; width: calc(56px * var(--kat-s)); height: calc(72px * var(--kat-s)); align-items: center; justify-content: center; border-radius: calc(6px * var(--kat-s)); background: #d9d9d9; color: var(--kat-ink); font-family: var(--kat-font); font-size: calc(34px * var(--kat-s)); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; } .baba-prod__cd-label { color: var(--kat-ink); font-family: var(--kat-font); font-size: calc(15px * var(--kat-s)); letter-spacing: var(--kat-ls-wide); line-height: calc(20px * var(--kat-s)); text-transform: uppercase; } /* =========================================================================== NAGŁÓWEK KARTY PRODUKTU NA TELEFONIE Makieta nie ma wersji mobilnej, więc kolejność ustalona osobno: tytuł, krótki opis, ikony, cena z boksem zapewnień, licznik, darmowy fragment, galeria. Wcześniej pierwsza szła galeria — klient dostawał zdjęcia i odnośnik do pliku, zanim dowiedział się, co kupuje i za ile. Blok stoi na samym końcu arkusza, bo musi być ZA blokiem skalującym do siatki 1440. Ten ostatni nie ma warunku szerokości i unieszkodliwia wszystko, co napisano dla telefonu wcześniej — patrz rozmiar tytułu niżej. =========================================================================== */ @media (max-width: 767px) { /* Rząd nagłówka układa się w pionie, a obie kolumny przestają istnieć jako pudełka. Bez tego licznik zostałby uwięziony w kolumnie galerii: `order` przestawia elementy wyłącznie w obrębie jednego rodzica, a licznik ma stanąć między elementami drugiej kolumny. `flex-wrap: nowrap` nie jest ozdobą — kontener ułożony w pionie z zawijaniem i bez własnej wysokości zeruje się, a dzieci wychodzą poza niego. To ta sama usterka, przez którą tytuł lądował kiedyś na okładce. */ /* Do warunku dochodzi boks zakupu, bo galeria bywa pusta — produkt bez zdjęć (np. konsultacja z terminami) nie spełniał tego warunku i cały rząd zostawał z szablonowym `align-items: flex-start`. Boks zakupu dostawał wtedy szerokość swojej treści: 253 px zamiast 301 px, czyli kończył się w połowie ekranu, choć to on ma być pełną szerokością. */ .e-con:has(> .e-con > .elementor-widget-baba_prod_gallery), .e-con:has(> .e-con > .elementor-widget-baba_prod_buy) { flex-direction: column; flex-wrap: nowrap; /* Rząd ma z szablonu `align-items: flex-start`, co przy układzie pionowym znaczy „nie rozciągaj na szerokość”. Kadr galerii ma tylko dzieci pozycjonowane absolutnie, więc z treści wychodzi mu zero — bez rozciągania zapadał się do 0×0 i zdjęcie znikało ze strony. */ align-items: stretch; /* Odstęp przejmuje rząd, bo kolumna tekstu przestaje go dawać. */ gap: 26px; } .e-con:has(> .elementor-widget-baba_prod_gallery), .e-con:has(> .elementor-widget-baba_prod_title) { display: contents; } /* Sam widżet galerii też przestaje być pudełkiem — razem z trzema opakowaniami pod nim. Zdjęcia mają stać na górze, a odnośnik do darmowego fragmentu na samym końcu, tymczasem oba renderują się w jednym widżecie: kadr, miniatury i odnośnik są rodzeństwem wewnątrz `.baba-prod__gallery`. Dopóki widżet jest jednym elementem, `order` przestawia go w całości i nie da się ich rozdzielić. Po rozpuszczeniu opakowań kadr, miniatury i odnośnik stają się bezpośrednimi elementami rzędu i każde idzie tam, gdzie ma iść. `display: contents` nie rusza drzewa dokumentu, więc skrypt galerii dalej znajduje swoje elementy przez `.baba-prod__gallery`, a zmienne z `.baba-prod` dziedziczą się bez zmian. */ .elementor-widget-baba_prod_gallery, .elementor-widget-baba_prod_gallery > .elementor-widget-container, .baba-prod--gallery, .baba-prod__gallery { display: contents; } .baba-prod__gallery-main { order: 1; } .baba-prod__gallery-thumbs { order: 2; /* Odstęp daje teraz rząd; własne 33 px z makiety dokładałoby się do niego. */ margin-top: 0; } .elementor-widget-baba_prod_title { order: 3; } .elementor-widget-baba_prod_lead { order: 4; } .elementor-widget-baba_prod_badges { order: 5; } /* Boks zakupu kończy się panelem „Bezpieczne płatności / Szybka realizacja", więc licznik zaraz za nim ląduje dokładnie pod tym panelem. */ .elementor-widget-baba_prod_buy { order: 6; } /* Skład zestawu należy do bloku ceny — idzie zaraz za nim, przed licznikiem. Zestaw z terminem promocji jest możliwy, więc kolejność musi być ustalona, a nie zostawiona przypadkowi. */ .elementor-widget-baba_prod_bundle { order: 7; } /* Trzy komórki w 301 px dają po sto pikseli na nazwę, która ma sześćdziesiąt znaków — pas rozsypywał się na słupki po jednym wyrazie. Na telefonie prostokąt zostaje, ale dzieli się poziomo. */ .baba-prod .baba-prod__sklad-lista { grid-template-columns: minmax(0, 1fr); } .baba-prod .baba-prod__sklad-poz + .baba-prod__sklad-poz { border-top: 1px solid var(--kat-panel-line); border-left: 0; } /* W kolumnie okładka nad nazwą dawała komórkę wysoką na 240 px, czyli trzy pozycje na siedemset pikseli przewijania. Obok siebie mieszczą się w jednej trzeciej tego, a okładka dalej robi swoje — mówi, co to za materiał, zanim klient przeczyta nazwę. */ .baba-prod .baba-prod__sklad-link { flex-direction: row; align-items: center; gap: 14px; padding: 16px; text-align: left; } .baba-prod .baba-prod__sklad-foto { width: 72px; flex: 0 0 auto; margin-bottom: 0; } .elementor-widget-baba_prod_countdown { order: 8; } .baba-prod .baba-prod__fragment { order: 9; /* Górne 45 px z makiety oddzielało odnośnik od miniatur, pod którymi stał. Teraz jest ostatni w kolumnie i odstęp daje rząd. */ margin: 0; } /* Rytm wewnątrz nagłówka to odstęp rzędu, czyli 26 px. Plakietki i boks zakupu dokładały do niego własne marginesy z makiety — 14 px i 18 px — a boks jeszcze 22 px wypełnienia u góry. Wychodziło 40 px nad ikonami i 66 px nad ceną, czyli dwa razy więcej niż wszędzie indziej. Wypełnienie dolne boksu zostaje: to ono daje 22 px pod panelem zapewnień, pod który podciągnięty jest licznik. */ .baba-prod--badges, .baba-prod--buy { margin-top: 0; } .baba-prod__buy { padding-top: 0; } /* Jednolity rytm między sekcjami. Wypełnienia z makiety szablon zmniejsza na telefonie do 60 %, ale sumują się parami: dół pasa zalet 42 px plus góra „O produkcie" 48 px to 90 px białego pola, a między spisem treści a podglądem wychodziło 102. Na ekranie wysokim na 800 px to cała ćwiartka widoku zmarnowana na pustkę. Zamiast dobierać każdą sekcję z osobna — jedna wartość dla wszystkich: 24 px u góry i u dołu, czyli 48 px między sekcjami. Sekcje z różowym tłem zachowują przy tym oddech od krawędzi. */ .e-con.e-parent[class*="elementor-element-bpr"] > .e-con-inner { padding-top: 24px; padding-bottom: 24px; } /* Dwa marginesy pisane na sztywno w pikselach, bez wersji mobilnej: mój przy harmonogramie i ten z szablonu przy „Zawartości". Na dużym ekranie 80 px wyrównuje pas do sąsiadów, na telefonie to przepaść. */ .baba-prod--schedule { margin-top: 32px; } .e-con:has(> .e-con > .elementor-widget-baba_prod_contents) { margin-top: 32px; } /* Nota Omnibus w jednej linijce. Przy 16 px napis „Najniższa cena w ciągu ostatnich 30 dni: 90 zł” ma 370 px i łamie się na telefonie na trzy wiersze, przez co wygląda na ważniejszy, niż jest. Zmierzone szerokości: 14 px → 324, 13 px → 302, 12 px → 279. Bierzemy 12, żeby został zapas na dłuższe ceny — „1 299,00 zł” to jeszcze jakieś 30 px. */ .baba-prod .baba-prod__omnibus { font-size: 12px; line-height: 16px; } /* Zapowiedź końca promocji na środku, tak jak cena i przycisk nad nią. `text-align` z boksu zakupu nie działa na elementy zginane, więc potrzebne jest własne wyśrodkowanie. */ .baba-prod .baba-prod__sale-end { justify-content: center; } /* Boks ceny na całą szerokość. Przy zdejmowaniu ramki ograniczyłem blok z ceną do 52,55 % szerokości, żeby przycisk zakupu nie rozciągał się na całą kolumnę i nie wyglądał jak pasek. Na dużym ekranie to 450 px i działa, ale na telefonie te same 52,55 % dają 168 px — przycisk WooCommerce nie schodzi poniżej szerokości swojego napisu, więc „DODAJ DO KOSZYKA” było ucięte w połowie. Na wąskim ekranie nie ma czego oszczędzać: cała kolumna to i tak jedna szerokość przycisku. */ .baba-prod__buy--sam .baba-prod__buy-main, .baba-prod__buy .baba-prod__buy-main { max-width: none; } /* Licznik w jednej linii i przyklejony do boksu zakupu. Pudełka z makiety mają 56 px szerokości. Cztery grupy po dwie cyfry plus odstępy dają 459 px, a na telefonie do dyspozycji jest około 320 — licznik łamał się więc na dwa rzędy i czytał jak dwa osobne liczniki. Pudełka po 34 px dają w sumie 312 px, czyli jeden wiersz z zapasem. Ujemny margines zdejmuje własny odstęp licznika (23 px) i odstęp rzędu (26 px). Zmierzone na żywo: przy -12 px między panelem zapewnień a licznikiem zostawało 36 px, bo boks zakupu ma jeszcze własne wypełnienie pod panelem. -26 px schodzi do jakichś 22 px i licznik czyta się jako część sekcji ceny, a nie osobny element pod nią. */ .baba-prod--countdown { margin-top: -26px; } .baba-prod__countdown { flex-wrap: nowrap; gap: 8px; } .baba-prod__cd-group { gap: 6px; } .baba-prod__cd-boxes { gap: 4px; } .baba-prod__cd-digit { width: 34px; height: 44px; border-radius: 4px; font-size: 22px; } /* Podpisy muszą zmieścić się pod parą pudełek (72 px). „SEKUND” przy 12 px i rozstrzeleniu z makiety miało 52 px i rozpychało grupę. */ .baba-prod__cd-label { font-size: 10px; letter-spacing: 0.4px; line-height: 14px; } /* Tytuł produktu: 32 px zamiast 49. Ta wartość jest w arkuszu od dawna, tyle że nigdy nie działała — blok skalujący nadpisywał ją na `calc(60px * var(--kat-s))`. Tutaj, na końcu pliku, wreszcie wygrywa. Tytuł schodzi z siedmiu linii do czterech. */ .baba-prod .baba-prod__h1 { font-size: 32px; line-height: 38px; } } /* =========================================================================== HARMONOGRAM NA TABLECIE I TELEFONIE Pas etapów ma z makiety stały układ w jednej linii i przewijanie w poziomie, ale pasek przewijania jest ukryty, więc nic nie zdradza, że coś jeszcze jest. Zmierzone: pas potrzebuje 1283 px, przy 980 px widać 4 kafelki z 6, przy 768 px — trzy, przy 360 px — jeden. Wyglądało to jak ucięta sekcja, bo z punktu widzenia czytającego było ucięte. Poniżej 1024 px pas zawija się zamiast przewijać: przy 360 px wchodzą dwa kafelki w rzędzie, przy 768 px cztery. Strzałki między etapami znikają — w układzie łamanym wskazywałyby w bok na przejściu do nowego wiersza, a kolejność i tak niosą daty. Tak samo rozwiązane są kroki zakupu. Blok stoi na końcu arkusza, bo reguła bazowa pasa jest w pliku niżej niż bloki tabletu i telefonu i wygrywałaby kolejnością. =========================================================================== */ @media (max-width: 1024px) { /* Siatka, nie zginanie z zawijaniem. Zginanie wyrównuje wysokości tylko w obrębie jednego rzędu, więc przy sześciu etapach po dwa w rzędzie dwa ostatnie kafelki były o 17 px wyższe od czterech pierwszych. `grid-auto-rows: 1fr` równa wszystkie rzędy do najwyższego, czyli wszystkie kafelki na stronie mają jedną wysokość. Szerokość ścieżki zastępuje szerokość kafelka, więc sam kafelek przechodzi na `auto` — inaczej walczyłby ze ścieżką. */ .baba-prod__schedule { display: grid; grid-template-columns: repeat(auto-fit, 168px); grid-auto-rows: 1fr; justify-content: center; overflow-x: visible; gap: 16px; } .baba-prod__stage-sep { display: none; } /* Szerokością steruje ścieżka siatki wyżej; kafelek ma ją tylko wypełnić. */ .baba-prod .baba-prod__stage { width: auto; } } /* Telefon osobno i PO bloku tabletu, inaczej 168 px zeszłoby także tutaj i w rzędzie zmieściłby się tylko jeden kafelek. Przy 360 px zostaje jakieś 320 px na treść: dwa kafelki po 147 px plus odstęp to 310. */ @media (max-width: 767px) { /* Przy 360 px zostaje jakieś 320 px na treść: dwa kafelki po 147 px plus odstęp to 310. */ .baba-prod__schedule { grid-template-columns: repeat(auto-fit, 147px); } } /* =========================================================================== PASEK ZAKUPU PRZYKLEJONY DO DOŁU — TELEFON Karta produktu ma na telefonie ponad 7400 px wysokości przy oknie 736 px, czyli dziesięć ekranów. Cena i przycisk stoją gdzieś na drugim z nich, więc po zejściu niżej nie ma czym kupić bez wracania na górę. Blok stoi na samym końcu arkusza, bo wcześniejsze bloki telefonu i tabletu są niżej w pliku niż reguły bazowe i wygrałyby kolejnością — ta sama pułapka zjadła kiedyś osiem reguł nagłówka na telefonie. =========================================================================== */ /* Na szerokim ekranie paska nie ma w ogóle — reguła bazowa, poza blokiem telefonu. Bez niej znacznik renderowałby się na pulpicie jako zwykła treść: napis „Kup za 10,00 zł” i goły przycisk pod boksem zakupu. */ .baba-prod .baba-prod__pasek { display: none; } @media (max-width: 767px) { /* Dalej schowany: pokazuje go skrypt dopiero, gdy boks zakupu wyjedzie poza ekran. Bez skryptu paska po prostu nie ma i nic się nie psuje. */ .baba-prod .baba-prod__pasek { position: fixed; z-index: 9000; display: none; align-items: center; /* Cena i przycisk stoją razem na środku, a nie rozepchnięte do krawędzi. Przy `space-between` przycisk siedział przy samym brzegu ekranu i przy dłuższym napisie nie miał się gdzie zmieścić. */ justify-content: center; flex-wrap: nowrap; inset: auto 0 0; gap: 16px; padding: 10px 16px; /* Dolny pasek iPhone'a zjadałby przycisk. */ padding-bottom: max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--kat-panel-line); background: #fff; box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.1); transform: translateY(100%); transition: transform 0.22s ease; } .baba-prod .baba-prod__pasek.is-widoczny { display: flex; transform: none; } .baba-prod .baba-prod__pasek-cena { display: flex; min-width: 0; flex-direction: column; align-items: center; margin: 0; } .baba-prod .baba-prod__pasek-podpis { color: var(--kat-muted); font-family: var(--kat-font); font-size: 12px; letter-spacing: var(--kat-ls-wide); line-height: 16px; text-transform: uppercase; } .baba-prod .baba-prod__pasek-kwota { color: var(--kat-ink); font-family: var(--kat-font); font-size: 22px; font-weight: 600; line-height: 28px; white-space: nowrap; } /* Ten sam przycisk, co nad nim w boksie — tylko niższy, bo pasek ma nie zjadać ekranu. 48 px to dolna granica sensownego celu dla palca. */ .baba-prod .baba-prod__pasek-cta { display: inline-flex; height: 48px; /* Może się zwęzić, gdy zabraknie miejsca — wcześniej `0 0 auto` trzymało szerokość i przycisk wychodził poza ekran zamiast się dopasować. */ flex: 0 1 auto; min-width: 0; align-items: center; justify-content: center; padding: 0 20px; white-space: nowrap; border: 0; border-radius: 30px; background: var(--kat-accent); color: #fff; cursor: pointer; font-family: var(--kat-font); font-size: var(--kat-fs-btn); font-weight: 400; letter-spacing: var(--kat-ls-wide); line-height: var(--kat-lh-btn); text-transform: uppercase; } .baba-prod button.baba-prod__pasek-cta:hover, .baba-prod button.baba-prod__pasek-cta:focus { background: var(--kat-accent-strong); color: #fff; } .baba-prod button.baba-prod__pasek-cta:focus-visible { outline: 2px solid #fff; outline-offset: -4px; } .baba-prod .baba-prod__pasek-cta:active { background: var(--kat-accent-strong); } /* Bez tego pasek przykrywałby na stałe ostatni wiersz stopki. Klasę zdejmuje skrypt razem z paskiem, więc gdy go nie widać, nie ma też pustego miejsca pod treścią. */ html.ma-pasek-zakupu body { padding-bottom: 74px; } } @media (prefers-reduced-motion: reduce) { .baba-prod .baba-prod__pasek { transition: none; } } /* =========================================================================== PASEK SEKCJI NA TELEFONIE Karta ma na telefonie trzynaście ekranów wysokości — bez skrótu do sekcji dojście do opinii to kilkanaście przesunięć kciukiem. Cena i przycisk zostają w pasku dolnym, tutaj jest sama nawigacja. =========================================================================== */ /* Na szerokim ekranie paska nie ma — reguła bazowa, poza blokiem telefonu, żeby pusty kontener nie zostawiał paska tła nad treścią. */ .baba-prod .baba-prod__nav { display: none; } @media (max-width: 767px) { .baba-prod .baba-prod__nav { position: fixed; z-index: 8999; display: none; /* `top` ustawia skrypt, mierząc dolną krawędź przyklejonego nagłówka. */ right: 0; left: 0; top: 0; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--kat-panel-line); background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); transform: translateY(-100%); transition: transform 0.22s ease; white-space: nowrap; /* Pasek przewijany palcem, ale bez widocznego suwaka — na telefonie zjadałby wysokość, a i tak nikt go nie łapie. */ scrollbar-width: none; -ms-overflow-style: none; } .baba-prod .baba-prod__nav::-webkit-scrollbar { display: none; } .baba-prod .baba-prod__nav.is-widoczny { display: flex; transform: none; } .baba-prod .baba-prod__nav-item { flex: 0 0 auto; padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--kat-muted); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; } /* Ten sam akcent co przycisk „Kup teraz” w pasku dolnym — jedna zmienna, więc zmiana koloru marki przechodzi przez oba paski naraz. Barwimy po `aria-current`, nie po klasie: atrybut i tak musi tu być, żeby czytnik ekranu wiedział, w której sekcji jest czytelnik, a przy okazji nie da się go pomylić z klasą stanu z innego arkusza. */ .baba-prod .baba-prod__nav-item[aria-current="true"], .baba-prod .baba-prod__nav-item.is-aktywna { background: var(--kat-accent); color: #fff; } } /* Tekst pod zawartością — dłuższy opis przenoszony z podstron działu „Kursy”. Stoi już w sekcji o białym tle, więc sam tła nie maluje; potrzebuje tylko oddechu i szerokości kolumny takiej jak reszta treści karty. */ .baba-prod--tekst { padding: 8px 0 24px; } .baba-prod__text--pelny > *:first-child { margin-top: 0; } .baba-prod__text--pelny > *:last-child { margin-bottom: 0; } /* ——— Program kursu: rozwijane moduły ——— Sekcja stoi pod „Zawartością”, na białym tle, a moduły rozdzielają hairline'y — tak jak we wzorze od redakcji. Kontener w szablonie ma zerowy padding, więc odstępy sekcji niesie ten blok; przy braku modułów widżet nic nie drukuje i po sekcji nie zostaje pusty pas. */ .baba-prod--modules { padding: calc(80px * var(--kat-s)) 0 calc(90px * var(--kat-s)); background: #fff; } .baba-prod--modules .baba-prod__head { margin-bottom: calc(40px * var(--kat-s)); } .baba-prod__modules { position: relative; border-top: 1px solid var(--kat-line); } .baba-prod__module { border-bottom: 1px solid var(--kat-line); } /* Reset motywu Hello nakłada na