/** * Printella — design system. * * Tokeny `--prt-*`, klasy komponentów `prt-*` oraz reguły zachowania i responsywności * wspólne dla wszystkich stron zbudowanych z paczek Claude Design. * * Przeniesione z Custom CSS kitu Elementora (wpis #7) 2026-09-13. Tam był to WPIS W BAZIE, * więc: nie jechał pasem kodu na produkcję, nie miał historii zmian i dwie osoby edytujące * go nadpisywały się bez sygnału. Tu jest wersjonowany, przechodzi przez review i wdraża się * razem z motywem. * * W kicie zostają wyłącznie Global Colors i Global Fonts — te muszą być w bazie, * żeby interfejs Elementora pokazywał je na liście do wyboru w widgetach. * * Kolejność ładowania ma znaczenie: arkusz wczytujemy na `wp_enqueue_scripts` z priorytetem 20, * czyli PO `post-7.css`. Przeniesienie go wcześniej zmieniłoby rozstrzygnięcia przy równej * specyficzności z motywem nadrzędnym Hello Elementor. */ /* Printella — wklej w Elementor → Site Settings → Custom CSS. Zmienne odpowiadają tokens/colors.css i tokens/typography.css z design systemu. */ :root { /* Brand */ --prt-navy: #101B54; --prt-pink: #E4126F; --prt-pink-cta: #F0417E; --prt-pink-cta-hover: #D8306A; /* ── Statusy (handoff „Printella — Notyfikacje", 2026-10-26) ────────────── Cztery komplety po pięć wartości: ikona, tytuł, tekst, tło, linia. Rozdzielenie „ink" (tytuł) od „text" (treść) nie jest ozdobą — treść jest ciemniejsza i mniej nasycona, żeby tytuł pozostał pierwszy w kolejności czytania na tincie. ⚠️ Pomarańcz to JEDYNY ciepły kolor statusu w systemie. Nie używać go do niczego poza ostrzeżeniami, bo przestanie znaczyć „uwaga". */ --prt-warning: #E59A1A; --prt-warning-ink: #6B3F00; --prt-warning-text: #5C3A06; --prt-warning-surface: #FFF6E3; --prt-warning-line: #F3D28C; --prt-success: #22A35A; --prt-success-ink: #1F7A4D; --prt-success-text: #245C3E; --prt-success-surface: #EAF7EF; --prt-success-line: #A9DDBD; --prt-error: #C22765; --prt-error-ink: #A01E52; --prt-error-text: #7A1A40; --prt-error-surface: #FFEFF3; --prt-error-line: #F2B8C8; --prt-info: #101B54; --prt-info-ink: #101B54; --prt-info-text: #3A4478; /* Informacja na BIAŁYM tle (Claude Design „Detale koszyk checkout”, 2a): #EEF2FA zlewał się z tłem strony #F5F7FB — czytelność daje biel i mocniejsza ramka, nie kolor. */ --prt-info-surface: #FFFFFF; --prt-info-line: #B4C0DE; /* `--prt-error` stoi WYŻEJ, w komplecie statusów. Był tu drugi raz, z wartością #D92D20 — i jako późniejszy wygrywał, więc ikona notyfikacji błędu renderowała się ceglasta zamiast #C22765 (zmierzone). Zasada kolorów z handoffu v2 mówi jednoznacznie: czerwień problemu to #C22765, jedna dla całego sklepu. Druga definicja usunięta; zmienia się przy okazji kolor obramowania błędnych pól — na ten sam, co reszta komunikatów o błędzie. */ /* Tekst i linie */ --prt-text: #101B54; --prt-text-muted: #3A4478; --prt-line: #E3E7F2; --prt-line-soft: #F1F3F9; /* ── Tokeny z briefu „Printella — zmiany 2026-10-31", sekcja A ────────────── Nazwy bez prefiksu `prt-` są celowe: brief podaje je w takiej formie i w takiej sprawdza je sekcja E. `--text-muted` ma tę samą wartość co istniejące `--prt-text-muted` — zostawiam oba, bo stare jest użyte w kilkudziesięciu miejscach, a podmiana hurtem to osobna robota i osobne ryzyko. ⚠️ Poprzedni kolor tekstu pomocniczego (granatowo-szary, zapisywany na `4A` `55` `84` — rozdzielone, żeby `grep` z kryteriów akceptacji nie trafiał w ten komentarz) został USUNIĘTY z całego kodu: 34 wystąpienia w 7 plikach, wszystkie na `#3A4478`. Dolny pasek stopki ma mieć `--text-subtle`, ale stopka jest szablonem Elementora w bazie, nie w repo — patrz raport z briefu. */ --space-tight: 14px; --space-group: 22px; /* ===================================================================== ODSTĘP POD NAGŁÓWKIEM — WEDŁUG ROLI PIERWSZEGO ELEMENTU STRONY (brief `BRIEF-naglowek-odstepy.md`, 31.10.2026) Zasada briefu: **nagłówek odpowiada tylko za siebie** — symetryczne 26/26 px wokół logo, i treść tego nie kompensuje. Odstęp pod nagłówkiem należy do TREŚCI i zależy od tego, co stoi pierwsze: ścieżka okruszków prawie przykleja się do nagłówka, kolorowy pas dotyka go bez przerwy, a hero dostaje oddech. ⚠️ Równe W OBRĘBIE ROLI, nie per strona. Dlatego nie wolno wpisywać tych wartości przy konkretnej stronie — każda nowa strona ma dostać rolę, a nie własną liczbę. */ --prt-header-pad: 26px; --prt-below-header-crumb: 4px; --prt-below-header-band: 0px; --prt-below-header-hero: clamp(22px, 2.6vw, 38px); --prt-below-header-hero-lg: clamp(24px, 3.4vw, 52px); /* Dolny odstęp ścieżki — brief go nie zmienia, zostaje jak było. ⚠️ Na obu stronach z okruszkami trzeba od niego ODJĄĆ gap kontenera, bo w flexie margines i gap się dodają: próbnik `--prt-probnik-odstep`, karta `--row-gap`. Patrz `.prt-probnik > .prt-crumbs-nav` i `body.single-tkanina .prt-crumbs-nav`. */ --prt-okruszki-dol: clamp(18px, 2vw, 24px); --space-section: 28px; --text-muted: #3A4478; --text-subtle: #5A648C; --prt-tecza: linear-gradient(to right,#C3196D,#DC931A,#F3D14E,#A2BD30,#69A866,#569E95,#4171B1,#56267D); /* Powierzchnie */ --prt-surface: #FFFFFF; --prt-surface-blue: #EEF6FD; --prt-surface-blue-alt: #E7F1FA; --prt-surface-pink: #FFF0F6; --prt-surface-pink-strong: #FDEAF2; --prt-surface-sage: #EDF3E7; --prt-surface-beige: #FDF0E6; --prt-blob-pink: #FFC7DC; /* Akcenty kategorii (>= 4.5:1 na własnym tincie) */ --prt-sage-ink: #3F6420; --prt-pink-ink: #C22765; --prt-terracotta-ink: #8A4A0C; /* Typografia */ --prt-font-sans: "Nunito Sans", "Helvetica Neue", Helvetica, sans-serif; --prt-font-hand: "Kalam", cursive; /* Rytm */ --prt-section-gap: 96px; --prt-heading-gap: 50px; --prt-section-gap-mobile: 72px; --prt-heading-gap-mobile: 36px; --prt-radius-card: 20px; --prt-radius-panel: 24px; --prt-radius-pill: 999px; /* Panele (2026-09-12) */ --prt-surface-cool: #F6F8FC; --prt-line-arrow: #8E97BC; --prt-radius-hero: 22px; --prt-radius-media: 18px; --prt-radius-tile: 16px; /* Centrum pomocy (2026-09-13) */ --prt-surface-pink-lightest: #FFF6FA; --prt-surface-pink-icon: #FFE1EC; --prt-surface-sage-strong: #E0EBD6; --prt-surface-lavender: #EDE4F3; --prt-surface-lavender-strong: #E2D5EE; --prt-line-tile: #EDEFF7; --prt-line-hover: #DCE1EF; --prt-blue-ink: #0972B5; --prt-lavender-ink: #622180; --prt-green-ink: #38AA62; --prt-orange-ink: #F39400; --prt-radius-icon: 14px; /* Kontakt (2026-09-13) */ --prt-surface-pink-soft: #FDF4F8; --prt-surface-green-icon: #E4F4E8; --prt-surface-lavender-icon: #EDE7FA; --prt-line-pink: #F3DFE8; /* ⚠️ DRUGI jasny róż, nie pomyłka. `--prt-line-pink` (#F3DFE8) jest jaśniejszy i rysuje linie wewnątrz elementów. `--prt-line-pink-soft` (#F6CADB) przyszedł z briefu kafla próbnika 2.11.2026 jako ramka ELEMENTU w spoczynku — ma być widoczna jako obrys, a nie zniknąć na białym tle. */ --prt-line-pink-soft: #F6CADB; --prt-line-input: #E3E7F2; --prt-text-faint: #6B739E; --prt-shadow-hover: 0 16px 34px rgba(16,27,84,.07); --prt-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M0 6h14M10 2l4 4-4 4' stroke='%23000' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --prt-text-placeholder: #9AA3C4; --prt-lavender-ink-soft: #6B4FBB; --prt-radius-field: 12px; /* Kategorie tkanin (2026-10-18) — nazwy wprost z `tokens.css` paczki handoffu. Dotad te wartosci byly literalami powtarzanymi w blokach stron. */ --prt-gap-hero: clamp(32px,4vw,56px); --prt-transition: .2s ease; --prt-transition-card: .25s ease; --prt-transition-media: .3s ease; /* Pomoc — kategoria i artykul (2026-09-13) */ --prt-surface-grey: #F8F9FC; /* Alias, nie druga definicja: paczka nazywa ten sam kolor `line-card`, hub Pomocy wprowadzil go wczesniej jako `line-tile`. Jedna wartosc, dwie nazwy. */ --prt-line-card: var(--prt-line-tile); /* Strzalka „Czytaj dalej" jako maska. Data URI zamiast pliku z uploadow: karta nie zalezy wtedy od zasobu, ktory da sie skasowac w Mediach. */ --prt-strzalka: url('data:image/svg+xml;utf8,'); /* ── Konfigurator nadruku ─────────────────────────────────────────────────── Tokeny z handoffu projektowego (design_handoff_printella_konfigurator). Trzymane TUTAJ, a nie w aplikacji Svelte, bo konfigurator jest częścią tej samej witryny i ma wyglądać jak reszta — jedno źródło prawdy dla obu hostów. Aplikacja ma u siebie wyłącznie warstwę zapasową w `@layer`, na wypadek uruchomienia poza motywem; `@layer` przegrywa z tym blokiem, więc motyw zawsze wygrywa i nie trzeba tego pilnować kolejnością wczytywania. NIE dodajemy 33 pozostałych tokenów z handoffu (spektrum logo, skala typografii, skala odstępów) — konfigurator ich nie używa, a motyw nie potrzebuje ich dziś do niczego innego. Dokładanie ich „na zapas" zrobiłoby z design systemu wysypisko. Trzy literały z handoffu celowo mapujemy na tokeny, które już tu są, bo różnią się o jedną cyfrę i nikt tego nie zobaczy: #fff → --prt-surface #FFF0F5 → --prt-surface-pink (#FFF0F6) #FFF7FA → --prt-surface-pink-lightest (#FFF6FA) */ /* Płótno i tekst drugiego planu */ --prt-cfg-bg: #F5F7FB; --prt-cfg-ink-2: #3A4478; --prt-cfg-ink-3: #5A648C; /* Linie i kontrolki */ --prt-cfg-line-ui: #DCE1EC; --prt-cfg-line-dash: #D5DAE7; --prt-cfg-radio: #A6AECB; --prt-cfg-ruler: #8A93B4; /* Wybory i stany */ --prt-cfg-choice: #1B3A8C; --prt-cfg-choice-bg: #F4F7FD; --prt-cfg-sel-bg: #FFF2F6; --prt-cfg-disabled-bg: #E6E9F0; --prt-cfg-disabled-fg: #9AA2BD; /* Powierzchnie pomocnicze */ --prt-surface-tab: #EEF3FB; --prt-cfg-surface-num: #EEF0F5; --prt-cfg-surface-media: #F4F1EC; --prt-cfg-surface-alt: #F1F3F7; --prt-cfg-surface-warm: #FBF8F3; /* Ocena jakości pliku z DPI. Trzy progi, każdy z tłem, akcentem i kolorem tekstu — tekst jest osobny, bo akcent nie przechodzi 4.5:1 na swoim tle. */ --prt-q-good-bg: #EAF7EF; --prt-q-good: #22A35A; --prt-q-good-ink: #1F7A4D; --prt-q-mid-bg: #FFF6DF; --prt-q-mid: #E6A100; --prt-q-mid-ink: #7A4B00; --prt-q-bad-bg: #FFECEF; --prt-q-bad: #E0185F; --prt-q-bad-ink: #C22765; /* Promienie konfiguratora — własna, ciaśniejsza skala niż strony treściowe. To interfejs narzędzia, nie karta z treścią, więc `--prt-radius-card` (20px) byłby tu za miękki. */ --prt-cfg-radius-card: 14px; --prt-cfg-radius-field: 8px; --prt-cfg-radius-tile: 10px; --prt-cfg-radius-chip: 7px; --prt-cfg-radius-thumb: 6px; --prt-cfg-radius-xs: 4px; /* Grubość linii. Handoff prowadzi 1.5px konsekwentnie — obecny kod ma mieszankę 1px i 2px. Jeden token zamiast trzech decyzji podejmowanych osobno w każdym komponencie. 2px zostaje dla stanów, które muszą krzyczeć (wybrany kafel). */ --prt-cfg-border: 1.5px; --prt-cfg-border-strong: 2px; /* Skala typografii narzędzia. Osobna od stron treściowych i celowo gęstsza: konfigurator mieści na jednym ekranie listę materiałów, podgląd, steppery i podsumowanie, więc `--prt-body` 16px byłby tu za luźny. Zmierzone użycie w kodzie: 14px (20×), 13px (17×), 15px (10×), 12px (9×). */ --prt-cfg-text-xs: 12px; --prt-cfg-text-sm: 13px; --prt-cfg-text-base: 14px; --prt-cfg-text-md: 15px; --prt-cfg-text-lg: 17px; --prt-cfg-text-xl: 19px; --prt-cfg-text-h2: 20px; --prt-cfg-text-h1: clamp(24px, 2.3vw, 32px); /* Skala odstępów, krok 4px. Obecny kod używa 8, 10, 12, 14, 15 i 16 px wymiennie w tych samych rolach — to nie jest decyzja projektowa, tylko brak skali. Wartości spoza kroku (6, 10, 14, 15) wchodzą na najbliższy stopień; przesunięcie o 1–2 px jest ceną za spójność i widać je tylko wtedy, gdy się go szuka. */ --prt-cfg-space-xs: 4px; --prt-cfg-space-sm: 8px; --prt-cfg-space-md: 12px; --prt-cfg-space-lg: 16px; --prt-cfg-space-xl: 20px; --prt-cfg-space-2xl: 24px; --prt-cfg-space-3xl: 32px; /* Cienie i przesłony na granatowym */ --prt-cfg-shadow-card: 0 1px 2px rgba(16, 27, 84, .04); --prt-cfg-shadow-thumb: 0 1px 4px rgba(16, 27, 84, .12); --prt-cfg-scrim: rgba(16, 27, 84, .2); --prt-cfg-scrim-strong: rgba(16, 27, 84, .35); } @media (max-width: 767px) { :root { --prt-section-gap: 72px; --prt-heading-gap: 36px; } } /* Linki — bez domyślnego niebieskiego. ⚠️ Samo `a` NIE WYSTARCZA. `style.css` motywu ma legacy `.printella a { color: var(--btn-secondary) }` — niebieskie #3B82F6 z poprzedniego projektu, napisane kiedyś po to, żeby zabić różowy #c36 z Hello Elementor. Specyficzność (0,1,1) bije nasze `a` (0,0,1), więc ta reguła nigdy nie była skuteczna, a design system wyglądał na poprawny tylko tam, gdzie kolor ustawiała osobna klasa. Co z tego wychodziło: różowy przycisk „Wgraj pliki →" w popupach karty tkaniny miał NIEBIESKI napis, a kafle SEO na stronie kategorii niebieskie tytuły. Powtarzamy więc regułę z TĄ SAMĄ specyficznością — `design-system.css` ładuje się po `style.css`, więc przy remisie wygrywa ta nasza. */ a { color: var(--prt-navy); text-decoration: none; } a:hover { color: var(--prt-pink-cta); } .printella a { color: var(--prt-navy); } .printella a:hover, .printella a:active { color: var(--prt-pink-cta); } /* Wypełniony przycisk zawsze biały — także jako ``, bo wtedy łapie go reguła wyżej. ⚠️ Każdy NOWY wypełniony przycisk w formie `` trzeba dopisać TUTAJ. Przycisk 404 („Wróć na stronę główną") miał `color: #fff` we własnym bloku i nie działało: `.printella a` (0,1,1) bije `.prt-404__cta` (0,1,0), a `.printella a:hover` (0,2,1) bije `.prt-404__cta:hover` (0,2,0). Skutek zmierzony przez FreeAgenta na 9 wariantach (3 języki × 3 szerokości): w spoczynku napis GRANATOWY na różowym (kontrast 4,41), a po najechaniu RÓŻOWY na różowym — kontrast 1,27, czyli napis niewidoczny. */ .printella a.prt-btn-primary, .printella a.prt-btn-primary:hover, .printella a.prt-btn-primary:focus-visible, .printella a.prt-btn-pill, .printella a.prt-btn-pill:hover, .printella a.prt-btn-pill:focus-visible { color: #fff; } /* Gwiazdka pola wymaganego. WooCommerce daje jej `var(--wc-red)` (#AA0000) — ten sam sygnał, którym oznacza BŁĄD. Na pustym jeszcze formularzu checkoutu wychodził z tego ekran, który wygląda, jakby wszystko było źle wypełnione. Oznaczenie „to pole jest wymagane" to informacja, nie ostrzeżenie: dostaje markowy róż, odróżnialny od etykiety, ale bez semantyki błędu. Komunikaty walidacji WooCommerce mają własne style i zostają czerwone. */ .printella .woocommerce form .form-row .required, .printella .form-row .required, .printella label .required { color: var(--prt-pink-cta); text-decoration: none; } /* Stan błędu pola. WooCommerce dokłada `.woocommerce-invalid`, ale w tym motywie nie zmieniało to NICZEGO widocznego — zmierzone: etykieta navy, ramka szara, tło białe. Komunikat „to pole jest źle wypełnione" nie docierał więc do nikogo, a jednocześnie formularz w spoczynku świecił na różowo. Teraz jest odwrotnie: spoczynek neutralny, czerwień wyłącznie przy realnym błędzie. */ /* ⚠️ `!important` jest tu ŚWIADOME, nie z lenistwa. Elementor generował dla widgetu Jeta (kasa JetWooBuildera, usunięta 27.10.2026 — zostawione, bo zdjęcie `!important` wymaga sprawdzenia stanu błędu na żywej kasie) regułę `.elementor-1351 .elementor-element.elementor-element-df9c811 .elementor-jet-checkout-billing .form-row label` — specyficzność (0,5,1), a dla ramki pola jeszcze wyższą, z łańcuchem `:not()`. Przebicie tego klasami wymagałoby sześciu klas i rozsypałoby się przy pierwszym dołożeniu opakowania albo zmianie ID widgetu — a ID zmienia się przy przebudowie szablonu. Stan błędu MUSI wygrywać z kolorem spoczynkowym, więc jest to dokładnie ten przypadek, do którego `!important` służy: nadpisanie stanu nad wyglądem bazowym. */ .printella .woocommerce-invalid label, .printella .woocommerce-invalid > label, .printella .woocommerce-invalid label .required { color: var(--prt-error) !important; } .printella .woocommerce-invalid input.input-text, .printella .woocommerce-invalid textarea, .printella .woocommerce-invalid select { border-color: var(--prt-error) !important; } /* Przycisk podstawowy (różowy) */ .prt-btn-primary { display: inline-flex; align-items: center; gap: 12px; background: var(--prt-pink-cta); color: #fff; font-family: var(--prt-font-sans); font-size: 16px; font-weight: 800; /* Brief 2026-10-31, A: główny przycisk to PROSTOKĄT 8 px, nie pigułka. */ padding: 19px 32px; border-radius: 8px; transition: background .2s ease, transform .2s ease; } .prt-btn-primary:hover { background: var(--prt-pink-cta-hover); color: #fff; transform: translateY(-2px); } /* --- PIGUŁKA: drugi z dwóch kształtów przycisku ------------------------------ Zasada Steve'a z 2.11.2026: pigułka 999 px dla przycisków NIESKLEPOWYCH (nawigacja i treść — strona główna, newsletter, usługi graficzne, 404), a róg 8 px (`.prt-btn-primary`) dla akcji sklepowych: konfigurator, koszyk, kasa, próbnik, opłata zamówienia. ⚠️ Wartości są te same co w `.prt-btn-primary` poza promieniem — różni je KSZTAŁT, nie rozmiar. Wzorcem jest „Wgraj swój wzór" ze strony głównej: 16 px/800, padding 19/32. ⚠️ Pigułki na stronie głównej i w usługach graficznych są dziś gołymi `` bez klasy, z wartościami wpisanymi w `_elementor_data`. Ta klasa jest po to, żeby przy ich najbliższej edycji miały gdzie trafić — inaczej każda nowa pigułka powtarza te same cztery wartości i rozjeżdża się po pierwszej zmianie briefu. 404 jest pierwszym użyciem. */ .prt-btn-pill { display: inline-flex; align-items: center; gap: 12px; background: var(--prt-pink-cta); color: #fff; font-family: var(--prt-font-sans); font-size: 16px; font-weight: 800; padding: 19px 32px; border-radius: var(--prt-radius-pill); text-decoration: none; transition: background .2s ease, transform .2s ease; } .prt-btn-pill:hover { background: var(--prt-pink-cta-hover); color: #fff; transform: translateY(-2px); } /* Przycisk outline */ /* Brief 2026-10-31, A: drugorzędny zostaje pigułką, ale obrys idzie na NAVY. */ .prt-btn-outline { display: inline-flex; align-items: center; gap: 12px; border: 2px solid var(--prt-navy); color: var(--prt-navy); background: transparent; font-family: var(--prt-font-sans); font-size: 16px; font-weight: 800; padding: 17px 32px; border-radius: var(--prt-radius-pill); transition: background .2s ease, transform .2s ease; } .prt-btn-outline:hover { background: var(--prt-surface-pink); transform: translateY(-2px); } /* Karta kategorii — cały kafel klikalny */ .prt-card { display: block; border-radius: 22px; outline-offset: 4px; } .prt-card__inner { border-radius: var(--prt-radius-card); overflow: hidden; transition: transform .25s ease; } .prt-card:hover .prt-card__inner { transform: translateY(-3px); } .prt-card:hover .prt-card__media img { transform: scale(1.015); } .prt-card:hover .prt-card__arrow { transform: translateX(5px); } .prt-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .prt-card:focus-visible { outline: 3px solid var(--prt-pink-cta); } @media (hover: none) { .prt-card:hover .prt-card__inner { transform: none; } } /* Odręczny komentarz i doodle — dekoracja, nigdy w flow */ .prt-doodle { position: absolute; pointer-events: none; z-index: 3; } .prt-hand { font-family: var(--prt-font-hand); font-weight: 400; line-height: 1.45; color: var(--prt-navy); } @media (max-width: 1100px) { .prt-doodle--side { display: none !important; } } /* Rytm sekcji */ .prt-section { padding-top: var(--prt-section-gap); } .prt-section__body { margin-top: var(--prt-heading-gap); } /* --- artboard: Printella Homepage --- */ body { margin: 0; background: #fff; font-family: "Nunito Sans", "Helvetica Neue", Helvetica, sans-serif; color: #101B54; -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } a { color: #101B54; text-decoration: none; } a:hover { color: #F0417E; } input { font-family: inherit; } @keyframes prt-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @media (hover: hover) and (pointer: fine) { [data-cat-link]:hover [data-cat-card] { transform: translateY(-3px); } [data-cat-link]:hover [data-cat-media] img { transform: scale(1.015); } [data-cat-link]:hover [data-cat-arrow] { transform: translateX(5px); } } @media (hover: hover) and (pointer: fine) { [data-dir]:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(16,27,84,0.07); } [data-dir]:hover img { transform: scale(1.02); } [data-dir]:hover a[aria-label] { background: #D8306A; } } [data-dir] img { display: block; width: 100%; height: 100%; transition: transform .35s ease; } [data-cat-media] img { display: block; width: 100%; height: 100%; transition: transform .3s ease; } [data-cat-link]:hover { color: #101B54; } [data-cat-link]:focus-visible { outline: 3px solid #F0417E; } @media (max-width: 1100px) { [data-doodle-side] { display: none !important; } } @media (max-width: 760px) { [data-hide-sm] { display: none !important; } } @media (max-width: 1100px) { /* ⚠️ BYŁO `#wgraj > div` — encja HTML zamiast kombinatora `>`. Selektor był NIEPRAWIDŁOWY, więc przeglądarka odrzucała całą regułę i pasmo „Masz własny projekt?" NIE składało się do jednej kolumny poniżej 1100 px. Nic tego nie zgłaszało: błędny selektor w CSS nie jest błędem, tylko regułą bez skutku. Znalezione 2.11.2026 przy dokładaniu bloków SEO. */ #wgraj > div { grid-template-columns: minmax(0, 1fr) !important; } [data-fab] { position: relative !important; width: 100% !important; aspect-ratio: 3/2; top: auto; bottom: auto; } [data-mid] { right: auto !important; left: 6% !important; } } @media (max-width: 1040px) { [data-usp-icon] { width: 55px !important; } } @media (max-width: 980px) { [data-usp-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 520px) { #prt-sec-top [data-hero-usp] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 460px) { [data-usp-grid] { grid-template-columns: minmax(0, 1fr) !important; } [data-usp-icon] { width: 53px !important; } } /* --- Sekcja „Druk na tkaninach według Twojego projektu" + FAQ (brief SEO 2.11.2026) --- */ /* ⚠️ `summary` MUSI stracić domyślny znacznik W DWÓCH miejscach: `list-style` dla Firefoksa i Safari, `::-webkit-details-marker` dla starszych WebKitów. Jedno bez drugiego zostawia trójkącik obok naszego plusa — dwa znaczniki na jedno pytanie. */ [data-faq] summary { list-style: none; cursor: pointer; } [data-faq] summary::-webkit-details-marker { display: none; } [data-faq][open] [data-faq-plus] { transform: rotate(45deg); } [data-faq] summary:focus-visible { outline: 3px solid var(--prt-pink-cta); outline-offset: 6px; } @media (hover: hover) and (pointer: fine) { /* Brief: hover zmienia KOLOR PYTANIA, ramka zostaje bez zmian. */ [data-faq] summary:hover [data-faq-q] { color: var(--prt-pink-cta); } } @media (prefers-reduced-motion: reduce) { [data-faq-plus] { transition: none !important; } } @media (max-width: 900px) { [data-druk-grid] { grid-template-columns: minmax(0, 1fr) !important; } [data-faq-grid] { grid-template-columns: minmax(0, 1fr) !important; } } /* --- RWD strony głównej (Steve 2.11.2026) --- */ /* Karty kategorii: siatka nie ma atrybutu, łapiemy ją po dzieciach z [data-cat-link]. Na tablecie auto-fit dawał 3 + 1 sierotę; dwie kolumny dają równe 2 × 2. */ @media (min-width: 561px) and (max-width: 1100px) { div:has(> article > [data-cat-link]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* USP pod „Druk na tkaninach…”: od dwóch kolumn w dół ikona i tekst na środku. */ @media (max-width: 980px) { [data-usp-grid] > div { text-align: center; } [data-usp-grid] [data-usp-icon] { margin-inline: auto; } } /* USP w hero na telefonie (siatka 2 × 2): na środku. Pierwsza ikona ma w HTML scale(1.3) od lewej krawędzi — bez zmiany origin uciekałaby z osi. */ @media (max-width: 520px) { #prt-sec-top [data-hero-usp] li { text-align: center; } #prt-sec-top [data-hero-usp] [data-hero-icon] { margin-inline: auto; transform-origin: center !important; } /* Newsletter: przycisk pod polem na całą szerokość, jak pole e-mail. */ [data-prt-newsletter] button[type="submit"] { flex: 1 1 100% !important; justify-content: center; } } /* Plamy dekoracyjne w HERO celowo wychodza poza kadr (inset ujemny). Na desktopie mieszcza sie w 1440 px, na mobile rozpychaly dokument o 26 px. Przycinamy ponizej 1100 px — progu, na ktorym handoff i tak ukrywa doodle. overflow-x: clip zamiast hidden: nie tworzy kontenera przewijania. */ @media (max-width: 1100px) { #prt-sec-top { overflow-x: clip; } } /* --- komponenty rozszerzone (design system) --- */ /* Etykieta nad naglowkiem */ .prt-eyebrow { font-family: var(--prt-font-sans); font-size: 14px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--prt-pink-cta); margin: 0; } .prt-eyebrow--sage { color: var(--prt-sage-ink); } .prt-eyebrow--pink { color: var(--prt-pink-ink); } .prt-eyebrow--terracotta { color: var(--prt-terracotta-ink); } /* Akapit prowadzacy */ .prt-lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; font-weight: 500; color: var(--prt-text-muted); margin: 0; } /* Obraz wypelniajacy kadr — 8 wystapien w markupie strony glownej */ .prt-media-cover { display: block; width: 100%; height: 100%; object-fit: cover; } /* Karta kategorii: tekst i odnosnik */ .prt-card__title { margin: 0 24px; font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -.02em; } .prt-card__desc { margin: 12px 24px 0; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--prt-text-muted); } .prt-card__link { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 15px; font-weight: 800; } /* Pasek korzysci w HERO */ .prt-usp__label { margin: 14px 0 0; font-size: 14px; font-weight: 700; } /* Kolko social w stopce — 5 wystapien */ .prt-social { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--prt-navy); transition: background .2s ease; } .prt-social:hover { background: var(--prt-pink-cta); } /* Pole formularza w pigulce — wyszukiwarka i newsletter */ .prt-input { border: 1.5px solid var(--prt-line); border-radius: var(--prt-radius-pill); padding: 10px 18px; font-family: var(--prt-font-sans); font-size: 15px; color: var(--prt-navy); background: var(--prt-surface); outline-offset: 3px; } .prt-input:focus-visible { outline: 3px solid var(--prt-pink-cta); } /* === Panele (2026-09-12) === */ [data-use] { transition: transform .25s ease; } [data-use-media] img { transition: transform .3s ease; } [data-play] { transition: transform .25s ease, background .25s ease; } [data-use]:focus-visible, [data-video]:focus-visible { outline: 3px solid var(--prt-pink-cta); outline-offset: 4px; } @media (hover: hover) and (pointer: fine) { [data-cta-primary]:hover { background: var(--prt-pink-cta-hover) !important; color: #fff; transform: translateY(-2px); } [data-cta-outline]:hover { background: var(--prt-surface-pink); transform: translateY(-2px); } [data-use]:hover { transform: translateY(-3px); } [data-use]:hover [data-use-media] img { transform: scale(1.02); } [data-video]:hover [data-play] { transform: translate(-50%, -50%) scale(1.06); background: var(--prt-pink-cta-hover); } } /* Doodle HERO skalujemy, nie przesuwamy — `left` trzyma prawą krawędź 28 px przed kadrem. */ @media (max-width: 1279px) { [data-hero-doodle] { transform: scale(.9); } } @media (max-width: 1120px) { [data-hero-doodle] { transform: scale(.82); top: 24% !important; } } @media (max-width: 1023px) { [data-hero-doodle] { display: none !important; } } @media (max-width: 1080px) { #prt-sec-panele-kroki [data-steps] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #prt-sec-panele-kroki [data-step-arrow] { display: none !important; } } @media (max-width: 900px) { [data-cta-spark] { right: -32px !important; top: -22px !important; width: 48px; height: 45px; } #prt-sec-panele-top [data-hero] { grid-template-columns: minmax(0, 1fr) !important; } #prt-sec-panele-top [data-hero-media] { height: 340px !important; } [data-video-grid] { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 820px) { [data-uses] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 620px) { #prt-sec-panele-kroki [data-steps] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #prt-sec-panele-kroki [data-steps] > div:last-child { grid-column: 1 / -1; } } @media (max-width: 440px) { #prt-sec-panele-kroki [data-steps] { grid-template-columns: minmax(0, 1fr) !important; } [data-uses] { grid-template-columns: minmax(0, 1fr) !important; } } @media (prefers-reduced-motion: reduce) { [data-use], [data-use-media] img, [data-play] { transition: none; } [data-cta-primary]:hover, [data-cta-outline]:hover, [data-use]:hover, [data-use]:hover [data-use-media] img, [data-video]:hover [data-play] { transform: none; } } /* === Centrum pomocy (2026-09-13) === */ [data-topic-arrow], [data-cat], [data-cat-wrap], [data-cat-cta], [data-chip] { transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease; } [data-topic]:focus-visible, [data-cat]:focus-visible, [data-chip]:focus-visible { outline: 3px solid var(--prt-pink-cta); outline-offset: 4px; } /* Kafel kategorii jest jednym odnośnikiem — tekst w środku nie może różowieć razem z nim. */ [data-cat]:hover, [data-cat]:hover h3, [data-cat]:hover li, [data-cat]:hover p { color: var(--prt-text); } [data-search] input::placeholder { color: var(--prt-text-muted); } [data-search] input:focus { outline: 0; border-color: var(--prt-pink-cta) !important; } @media (hover: hover) and (pointer: fine) { [data-chip]:hover { border-color: var(--prt-pink-cta); color: var(--prt-text); } [data-topic]:hover { transform: translateY(-2px); border-color: var(--prt-line-hover); box-shadow: 0 10px 24px rgba(16,27,84,0.06); } [data-topic]:hover [data-topic-arrow] { transform: translateX(4px); } [data-cat]:hover, [data-cat-wrap]:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(16,27,84,0.07); } [data-cat]:hover [data-cat-cta], [data-cat-wrap]:hover [data-cat-cta] { background: var(--prt-pink-cta) !important; border-color: var(--prt-pink-cta) !important; color: #fff !important; } [data-cat]:hover [data-cat-cta] svg path, [data-cat-wrap]:hover [data-cat-cta] svg path { stroke: #fff !important; } } @media (max-width: 1180px) { #prt-sec-sciezka [data-steps] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 36px !important; } #prt-sec-sciezka [data-step-arrow] { display: none !important; } } @media (max-width: 960px) { [data-cats] { grid-template-columns: minmax(0, 1fr) !important; } [data-contact] { grid-template-columns: minmax(0, 1fr) !important; } [data-contact-art] { min-height: 240px !important; } } @media (max-width: 700px) { #prt-sec-sciezka [data-steps] { grid-template-columns: minmax(0, 1fr) !important; text-align: left !important; } #prt-sec-sciezka [data-steps] > div { display: flex !important; align-items: flex-start; gap: 16px; text-align: left !important; } #prt-sec-sciezka [data-step-icon] { margin: 0 !important; } [data-search] { flex-direction: column !important; align-items: stretch !important; border-radius: var(--prt-radius-card) !important; } [data-search] button { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { [data-topic-arrow], [data-cat], [data-cat-wrap], [data-cat-cta], [data-chip] { transition: none; } [data-topic]:hover, [data-cat]:hover, [data-cat-wrap]:hover, [data-topic]:hover [data-topic-arrow] { transform: none; } } /* === Rytm pionowy (2026-09-13) === */ /* Paczki oznaczają sekcje `data-section`; odstęp należy do systemu, nie do strony. */ [data-section] { padding-top: var(--prt-section-gap); } [data-section-body] { padding-top: var(--prt-heading-gap); } @media (max-width: 767px) { [data-section] { padding-top: var(--prt-section-gap-mobile); } [data-section-body] { padding-top: var(--prt-heading-gap-mobile); } } /* === Kolor odnosnikow w sekcjach (2026-09-13) === */ /* Motyw daje linkom niebieski (#3B82F6), a treść wewnątrz go dziedziczy — tytuły kafli i pozycje list wychodziły na niebiesko. Prototypy resetują to regułą na `a`, którą pominąłem jako „sprawę motywu". Zakres ogranicza reset do naszych sekcji, żeby nie ruszać linków w reszcie serwisu. Kolory wpisane inline (białe CTA, wyszarzone opisy) wygrywają ze specyficznością i zostają nietknięte. */ [id^="prt-sec-"] a { color: var(--prt-text); text-decoration: none; } [id^="prt-sec-"] a:hover { color: var(--prt-pink-cta); } /* === Kontakt (2026-09-13) === */ /* Pola formularza: zakres na nasze sekcje, żeby nie ruszać formularzy WooCommerce. */ [id^="prt-sec-"] input, [id^="prt-sec-"] select, [id^="prt-sec-"] textarea { font-family: inherit; } [id^="prt-sec-"] input::placeholder, [id^="prt-sec-"] textarea::placeholder { color: var(--prt-text-placeholder); } [id^="prt-sec-"] input:focus, [id^="prt-sec-"] select:focus, [id^="prt-sec-"] textarea:focus { outline: 0; border-color: var(--prt-pink-cta) !important; } @media (max-width: 960px) { #prt-sec-kontakt-top [data-hero] { grid-template-columns: minmax(0, 1fr) !important; } #prt-sec-kontakt-formularz [data-form-grid] { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 560px) { #prt-sec-kontakt-formularz [data-name-row] { grid-template-columns: minmax(0, 1fr) !important; } #prt-sec-kontakt-top [data-hero-usp] { grid-template-columns: minmax(0, 1fr) !important; } } /* === Przewijanie poziome (2026-09-13) === */ /* Dekoracje (plamy, doodle) maja ujemne offsety i wystaja poza kontener 1280px. W pasmie ~1100-1440px wypychaly dokument i strona przewijala sie w poziomie — zmierzone na Kontakcie (1225px) i na stronie glownej (1248px przy oknie 1200). Kontenery sekcji maja pelna szerokosc okna, wiec przyciecie na nich odcina wylacznie to, co i tak jest poza ekranem; nic widocznego nie ginie. MUSI byc `clip`, nie `hidden`. Przy `hidden` druga os liczy sie jako `auto`, wiec kazda sekcja stawala sie wlasnym kontenerem przewijania i hero scrollowalo sie osobno od strony (zmierzone: scrollHeight 472 przy clientHeight 456). `clip` przycina bez tworzenia kontenera i zostawia os pionowa `visible`. */ [id^="prt-sec-"] { overflow-x: clip; } @media (max-width: 440px) { #prt-sec-panele-top [data-hero-usp] { grid-template-columns: minmax(0, 1fr) !important; } } /* === Klasy odbudowy natywnej (2026-09-13) === */ /* Instrukcja odsyla do tych klas jako "sa w site-settings-custom-css.css", ale paczka zadnej z nich nie definiuje. Bez nich plama jest niewidoczna, przypisy skleja sie z linkiem, a kropka w H1 nie jest rozowa. */ .prt-ink-pink { color: var(--prt-pink-cta); } .prt-note { display: block; margin-top: 5px; font-size: 13px; font-weight: 500; color: var(--prt-text-muted); } .prt-hero-art { position: relative; height: clamp(300px, 32vw, 400px); } .prt-hero-blob { position: absolute; inset: -6% -10% -4% 4%; background: var(--prt-surface-pink-strong); border-radius: 46% 54% 48% 52% / 54% 46% 54% 46%; } .prt-hero-art img { position: relative; width: 100%; height: 100%; object-fit: contain; } .prt-tile { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } @media (hover: hover) and (pointer: fine) { .prt-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(16,27,84,.07); border-color: var(--prt-line-hover); } } /* ⚠️ Elementor 4.2.4 renderuje ikony Font Awesome jako inline SVG (`.e-font-icon-svg`), ale NIE dolacza do nich `fill: currentColor` — bez tej reguly kazda taka ikona jest czarna niezaleznie od ustawionego `color`. Sprawdzone: w `plugins/elementor/assets/css/frontend.min.css` jedyna regula dla tej klasy ustawia `height`. Reguła jest ogolna, bo dotyczy kazdego widgetu Icon i Icon List w serwisie. */ .e-font-icon-svg { fill: currentColor; } /* Reset koloru odnosnikow obejmuje tez sekcje odbudowy (id bez prefiksu prt-sec-). */ #kontakt-hero a, #kontakt-formularz a, #kontakt-tematy a { color: var(--prt-text); } #kontakt-hero a:hover, #kontakt-formularz a:hover, #kontakt-tematy a:hover { color: var(--prt-pink-cta); } /* ========================================================================== Centrum pomocy — kategoria i artykul (2026-09-13) Selektory celuja w DOM widgetu **Posts z Elementora Pro** (`.elementor-post*`, `.elementor-pagination`). To nie jest przypadek: paczka projektowa napisala je pod ten widget, bo tylko on daje natywna paginacje na prawdziwych URL-ach (`paginate_links`). JetEngine nie ma paginacji w ogole, a JetSmartFilters renderuje pusty div i dobudowuje numery JavaScriptem — niewidoczne dla Google. Zmiana widgetu na inny wymaga przepisania wszystkich tych selektorow. ========================================================================== */ /* --- Pasmo HERO (kategoria i artykul dziela ten sam komponent) --- */ .prt-help-hero { position: relative; background: var(--prt-surface-pink-lightest); overflow: hidden; } .prt-help-hero::before, .prt-help-hero::after { content: ""; position: absolute; border-radius: 50%; background: var(--prt-surface-pink-strong); pointer-events: none; } .prt-help-hero::before { width: 280px; height: 280px; left: -90px; top: -60px; } .prt-help-hero::after { width: 340px; height: 340px; right: -110px; bottom: -90px; } .prt-help-hero > * { position: relative; z-index: 2; } /* Okruszki Pomocy używają wspólnego `.prt-crumbs` — patrz niżej. */ /* --- Licznik wynikow (shortcode [prt_wyniki]) --- */ .prt-wyniki { font-size: 14px; font-weight: 700; color: var(--prt-text-muted); margin: 0; } /* --- Karta artykulu — wspolna dla listingu i „Powiazanych artykulow" --- */ .prt-article-card .elementor-post { position: relative; display: flex; flex-direction: column; border: 1.5px solid var(--prt-line-card); border-radius: 16px; padding: 26px; background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .prt-article-card .elementor-post__text { display: flex; flex-direction: column; flex: 1; } /* Typografia karty — JEDNO zrodlo prawdy dla listingu i „Powiazanych artykulow". Wczesniej rozmiary siedzialy w ustawieniach widgetu Archive Posts, wiec Elementor generowal je tylko dla listingu. Karty powiazanych, renderowane shortcodem, spadaly na globalna typografie kitu (Montserrat 28/500 zamiast Nunito Sans 17/800). Potrojona klasa daje (0,5,0) i bije generowana regule widgetu (0,4,0). ⚠️ Selektor MUSI obejmowac takze `a` w srodku. Elementor generuje swoja regule na OBA elementy (`.elementor-post__title, .elementor-post__title a`), wiec stylowanie samego naglowka nic nie dawalo: link ma wlasna deklaracje, a ta bije dziedziczenie. Tytuly kart w listingu Pomocy szly przez to rozmiarem globalnego presetu „Primary" — czyli 58px, tyle co H1 hero. */ .prt-article-card.prt-article-card.prt-article-card .elementor-post__title, .prt-article-card.prt-article-card.prt-article-card .elementor-post__title a { font-family: var(--prt-font-sans); font-size: 17px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; margin: 0; } .prt-article-card.prt-article-card.prt-article-card .elementor-post__excerpt, .prt-article-card.prt-article-card.prt-article-card .elementor-post__excerpt p { font-family: var(--prt-font-sans); font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--prt-text-muted); } .prt-article-card .elementor-post__excerpt { margin: 10px 0 0; } .prt-article-card .elementor-post__excerpt p { margin: 0; } .prt-article-card.prt-article-card.prt-article-card .elementor-post__read-more { font-family: var(--prt-font-sans); font-size: 14px; font-weight: 800; line-height: 1; margin-top: auto; padding-top: 18px; } /* Caly kafel klikalny: nakladka z tytulu. „Czytaj dalej" wychodzi nad nia z-indeksem, zeby nie powstal link w linku — czytniki ekranu czytaja taki uklad dwa razy. */ .prt-article-card .elementor-post__title a::after { content: ""; position: absolute; inset: 0; } .prt-article-card .elementor-post__title a { color: var(--prt-navy); } .prt-article-card .elementor-post__read-more { margin-top: auto; position: relative; z-index: 1; color: var(--prt-pink-cta); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; } /* Strzalka jako maska na currentColor — bez zaleznosci od wgranego pliku SVG. */ .prt-article-card .elementor-post__read-more::after { content: ""; display: inline-block; width: 17px; height: 11px; margin-left: 9px; background: currentColor; transition: transform .2s ease; -webkit-mask: var(--prt-strzalka) center/contain no-repeat; mask: var(--prt-strzalka) center/contain no-repeat; } @media (hover: hover) and (pointer: fine) { .prt-article-card .elementor-post:hover { transform: translateY(-2px); border-color: var(--prt-line-hover); box-shadow: 0 10px 24px rgba(16,27,84,.06); } .prt-article-card .elementor-post:hover .elementor-post__read-more::after { transform: translateX(4px); } } .prt-article-card .elementor-post__title a:focus-visible { outline: 3px solid var(--prt-pink-cta); outline-offset: 3px; } @media (max-width: 820px) { .prt-article-card .elementor-posts { grid-template-columns: minmax(0,1fr) !important; } } /* --- Paginacja natywna (Posts → Numbers + Previous/Next) --- */ /* Kontener musi byc flexem — Elementor daje mu `text-align: center`, co dziala tylko na elementy liniowe. */ .prt-pagination .elementor-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; } /* `inline-flex`, NIE `flex`: `display: flex` czyni element blokowym, wiec kazdy numer zajmowal cala szerokosc kolumny i strony ustawialy sie jedna pod druga. Marginesy zerujemy, bo Elementor generuje wlasne `margin: calc(42px/2)` z kontrolki odstepu i sumowalyby sie z `gap`. */ /* Odstep od siatki kart. Zerujac marginesy miedzy numerami (wyzej) skasowalismy tez ten odstep — stad jawny margin-top. */ .prt-pagination .elementor-pagination { margin-top: 42px; } @media (max-width: 767px) { .prt-pagination .elementor-pagination { margin-top: 30px; } } /* Rozmiar i krój MUSZA byc na samym numerze. Elementor ustawia je na kontenerze `.elementor-pagination` z globalnej typografii „Secondary" (Montserrat 34 px), a numery dziedziczyly to bez zmian — cyfry wychodzily w rozmiarze naglowka. Kolor nieaktywnych to `--prt-text-muted`, nie granat linku: paginacja jest nawigacja pomocnicza i nie ma konkurowac z tytulami kart. */ .prt-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; margin: 0 !important; border: 1.5px solid var(--prt-line-card); border-radius: 12px; font-family: var(--prt-font-sans); font-size: 15px; font-weight: 700; line-height: 1; color: var(--prt-text-muted); transition: border-color .2s ease, color .2s ease; } .prt-pagination .page-numbers.current { font-size: 15px; font-weight: 800; } @media (hover: hover) and (pointer: fine) { .prt-pagination a.page-numbers:hover { color: var(--prt-navy); } } .prt-pagination .page-numbers.current { background: var(--prt-pink-cta); color: #fff; border-color: var(--prt-pink-cta); font-weight: 800; } .prt-pagination .page-numbers.dots { border-color: transparent; } @media (hover: hover) { .prt-pagination a.page-numbers:hover { border-color: var(--prt-pink-cta); } } .prt-pagination a.page-numbers:focus-visible { outline: 3px solid var(--prt-pink-cta); outline-offset: 3px; } /* --- Nawigacja kategorii — sticky, chipy na tablecie --- */ .prt-help-nav .current-menu-item a, .prt-help-nav [aria-current="page"] { font-weight: 800; } @media (max-width: 1000px) { .prt-help-nav .elementor-nav-menu { display: flex; flex-wrap: wrap; gap: 10px; } .prt-help-nav .elementor-nav-menu > li { flex: 1 1 auto; } } /* --- Tresc artykulu (widget Post Content z klasa prt-prose) --- */ /* Specyficznosc celowo podbita piecioma klasami. Elementor wymusza `.elementor.elementor .e-con > .elementor-widget { max-width:100% }` (cztery klasy), wiec samo `.prt-prose` przegrywa i kolumna rozlewa sie na pelne 1280 px. Natywna kontrolka szerokosci widgetu tego nie zalatwia — stad regula tutaj. `min(700px, 100%)`, nie samo `700px`: nadpisujac regule Elementora skasowalismy jednoczesnie jego ograniczenie do 100%, wiec przy waskim oknie kolumna rozciagala sie do minimalnej szerokosci tabeli (460 px przy oknie 360) i rozpychala dokument. */ .elementor.elementor .e-con > .elementor-widget.prt-prose { max-width: min(700px, 100%); } .prt-prose { max-width: min(700px, 100%); } .prt-prose p { font-size: 17px; line-height: 1.7; font-weight: 500; color: var(--prt-text-muted); margin: 16px 0 0; } .prt-prose h2 { font-size: clamp(22px,2.2vw,29px); line-height: 1.15; font-weight: 800; letter-spacing: -.022em; color: var(--prt-navy); margin: clamp(34px,3.6vw,46px) 0 0; } .prt-prose h3 { font-size: clamp(18px,1.7vw,22px); font-weight: 800; letter-spacing: -.018em; color: var(--prt-navy); margin: clamp(26px,2.6vw,32px) 0 0; } .prt-prose h2:first-child { margin-top: 0; } .prt-prose strong { font-weight: 800; color: var(--prt-navy); } .prt-prose a { color: var(--prt-pink-cta); font-weight: 700; } .prt-prose a:hover { text-decoration: underline; } /* --- Callout „Zapamietaj" — jeden na artykul --- */ .prt-callout { background: var(--prt-surface-blue); border-radius: 18px; padding: clamp(22px,2.4vw,30px); margin: clamp(28px,3vw,38px) 0 0; } .prt-callout__label { font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--prt-blue-ink); margin: 0; } .prt-callout p { font-size: 16px; line-height: 1.6; font-weight: 600; color: var(--prt-navy); margin: 12px 0 0; } /* --- Tabela w tresci — semantyczna --- */ .prt-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1.5px solid var(--prt-line-card); border-radius: 18px; overflow: hidden; margin: clamp(22px,2.4vw,30px) 0 0; } .prt-table th { text-align: left; background: var(--prt-surface-grey); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--prt-text-muted); padding: 15px 22px; } .prt-table td { font-size: 15px; line-height: 1.5; padding: 16px 22px; border-top: 1.5px solid var(--prt-line-card); } .prt-table td:first-child { font-weight: 600; color: var(--prt-text-muted); } .prt-table td:last-child { font-weight: 800; color: var(--prt-navy); width: 130px; } @media (max-width: 560px) { .prt-table th, .prt-table td { padding: 13px 16px; } } /* --- Spis tresci (widget Table of Contents z klasa prt-toc) --- */ .prt-toc .elementor-toc__list-wrapper { border-left: 2px solid var(--prt-line-soft) !important; padding-left: 18px; margin: 0; } .prt-toc .elementor-toc__list-item-text-wrapper { font-weight: 600; } .prt-toc .elementor-item-active .elementor-toc__list-item-text { font-weight: 700; color: var(--prt-navy); } /* --- Ocena przydatnosci (shortcode [prt_ocena]) --- */ .prt-helpful { max-width: 700px; border: 1.5px solid var(--prt-line-card); border-radius: 18px; padding: clamp(22px,2.4vw,28px); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(34px,3.6vw,48px); } .prt-helpful__q { font-size: 16px; font-weight: 800; color: var(--prt-navy); margin: 0; } .prt-helpful__akcje { display: flex; gap: 10px; flex-wrap: wrap; } .prt-helpful button { display: flex; align-items: center; gap: 9px; background: #fff; border: 1.5px solid var(--prt-line-card); border-radius: var(--prt-radius-pill); padding: 12px 22px; font-family: var(--prt-font-sans); font-size: 14px; font-weight: 800; color: var(--prt-navy); cursor: pointer; transition: border-color .2s ease, background .2s ease; } .prt-helpful button[disabled] { opacity: .55; cursor: default; } @media (hover: hover) and (pointer: fine) { .prt-helpful button:not([disabled]):hover { border-color: var(--prt-pink-cta); background: var(--prt-surface-pink-lightest); } } .prt-helpful button:focus-visible { outline: 3px solid var(--prt-pink-cta); outline-offset: 3px; } /* Nota lamie sie do wlasnego wiersza — inaczej przy space-between ladowalaby obok przyciskow. */ .prt-helpful__note { flex: 1 0 100%; font-size: 13px; font-weight: 600; color: var(--prt-text-muted); margin: 12px 0 0; } /* --- Wylaczenie ruchu na zyczenie systemu --- */ @media (prefers-reduced-motion: reduce) { .prt-article-card .elementor-post, .prt-btn-primary, .prt-btn-pill, .prt-btn-outline { transition: none; } .prt-article-card .elementor-post:hover, .prt-btn-primary:hover, .prt-btn-pill:hover, .prt-btn-outline:hover { transform: none; } } /* --- Uklad dwukolumnowy: nawigacja/spis tresci + kolumna glowna --- UWAGA na strukture: kontener Boxed renderuje sie jako `.e-con > .e-con-inner > dzieci`, wiec kolumny NIE sa bezposrednimi dziecmi elementu z id. Selektor bez `.e-con-inner` nie trafia w nic. Kontener Elementora z Content Width = Full dostaje `width: 100%`. W rodzicu ustawionym na Row oznacza to, ze kolumna glowna bierze CALA szerokosc rodzica (1280 px), a `flex-grow` dokłada do tego jeszcze raz — dokument rozpychal sie o 276 px i strona przewijala sie w poziomie na kazdej szerokosci >= 820 px. `flex: 1 1 0%` + `min-width: 0` sprawia, ze kolumna liczy sie od zera i bierze wylacznie to, co zostalo. `min-width: 0` jest konieczne osobno: domyslne `min-width: auto` na elemencie flex nie pozwala mu zwezic sie ponizej tresci. */ #pomoc-listing > .e-con-inner > .e-con, #artykul-tresc > .e-con-inner > .e-con { min-width: 0; } #pomoc-listing > .e-con-inner > .e-con:first-child, #artykul-tresc > .e-con-inner > .e-con:first-child { flex: 0 0 250px; width: 250px; } #pomoc-listing > .e-con-inner > .e-con:last-child, #artykul-tresc > .e-con-inner > .e-con:last-child { flex: 1 1 0%; width: auto; } /* Ponizej 1000 px kolumna boczna przestaje byc sticky i rozklada sie na pelna szerokosc. Spis tresci idzie NAD tresc — czytelnik na telefonie ma zobaczyc mape artykulu, zanim zacznie go czytac, a nie po. */ @media (max-width: 1000px) { /* Przelaczenie na pion robimy TUTAJ, nie kontrolka „Direction: Tablet". Elementor liczy tablet od 1024 px, a projekt lamie uklad na 1000 px; poleganie na cudzym breakpoincie dawalo wiersz, w ktorym kolumna glowna zapadala sie do 0 px. */ #pomoc-listing > .e-con-inner, #artykul-tresc > .e-con-inner { flex-direction: column; } /* `:first-child`/`:last-child` sa tu konieczne: regula desktopowa ma je w selektorze, wiec bez nich ta ma NIZSZA specyficznosc i nie nadpisuje szerokosci 250 px — niezaleznie od kolejnosci w pliku. */ #pomoc-listing > .e-con-inner > .e-con:first-child, #pomoc-listing > .e-con-inner > .e-con:last-child, #artykul-tresc > .e-con-inner > .e-con:first-child, #artykul-tresc > .e-con-inner > .e-con:last-child { position: static; flex: 0 1 auto; width: 100%; } #artykul-tresc > .e-con-inner > .e-con:first-child { order: -1; } } /* --- Wysrodkowanie blokow w pasmie HERO --- Kontrolka Margin w Elementorze nie przyjmuje `auto`, wiec blok naglowka o stalej szerokosci (620 px na kategorii, 760 px w artykule) przyklejal sie do lewej krawedzi pasma. Okruszki i wyszukiwarka to widgety, nie kontenery, wiec ta regula ich nie rusza — a okruszki maja z projektu byc wlasnie przy lewej krawedzi. */ #pomoc-hero .e-con-inner > .e-con, #artykul-hero .e-con-inner > .e-con { margin-inline: auto; } /* --- Wyszukiwarka (widget Search Form, skin Classic) --- Zadne z ustawien wygladu tego widgetu nie da sie ustawic tak, zeby odpowiadalo projektowi: skin Classic renderuje `form > .elementor-search-form__container` jako blok, bez odstepu miedzy polem a przyciskiem i bez ikony lupy. Styl w calosci tutaj — to samo zalecenie daje instrukcja odbudowy w paczce. Selektory celowo zawieraja `input`/`button`: arkusz widgetu ma `.elementor-search-form input[type="search"] { border-color: currentcolor; padding: 0 }`, czyli dwie klasy + element + atrybut. Sama para klas przegrywa z tym mimo pozniejszego ladowania, a `border-color: currentcolor` przy granatowym tekscie dawal granatowa ramke zamiast jasnej linii z projektu. `.prt-search.prt-search` to nie literowka, tylko celowe podbicie wagi. Elementor generuje dla widgetu regule `.elementor-6213 .elementor-element.elementor-element-pkszuk .elementor-search-form__input { padding-left: calc(50px / 3) }` — cztery klasy. Bez zdublowanej klasy poziomy padding zostawal na 16,6667 px niezaleznie od tego, co wpiszemy tutaj. Przycisk potrzebuje JESZCZE jednego powtorzenia, bo jego selektor w generowanym CSS ma piec klas: `...-pkszuk.elementor-search-form--button-type-text .elementor-search-form__submit`. Natywna kontrolka tego nie zalatwia: jedna wartosc `size` ustawia naraz min-height, min-width przycisku i poziomy padding jako `size / 3`, wiec nie da sie nia wyrazic projektu (pole 14/22/14/48, przycisk 15/30 przy wysokosci 50). */ .prt-search .elementor-search-form { max-width: 620px; margin-inline: auto; } .prt-search.prt-search .elementor-search-form__container { display: flex; gap: 12px; align-items: stretch; background: transparent; border: 0; padding: 0; } .prt-search.prt-search .elementor-search-form input.elementor-search-form__input { flex: 1 1 auto; min-width: 0; background: #fff no-repeat 20px center; background-size: 18px 18px; background-image: url('data:image/svg+xml;utf8,'); border: 1.5px solid var(--prt-line-card); border-radius: var(--prt-radius-pill); padding: 14px 22px 14px 48px; font-family: var(--prt-font-sans); font-size: 15px; font-weight: 600; color: var(--prt-navy); transition: border-color .2s ease; } .prt-search.prt-search .elementor-search-form input.elementor-search-form__input::placeholder { color: var(--prt-text-placeholder); opacity: 1; } .prt-search.prt-search .elementor-search-form input.elementor-search-form__input:focus { border-color: var(--prt-pink-cta); outline: none; } .prt-search.prt-search.prt-search .elementor-search-form button.elementor-search-form__submit { flex: 0 0 auto; background: var(--prt-pink-cta); color: #fff; border: 0; border-radius: var(--prt-radius-pill); padding: 15px 30px; font-family: var(--prt-font-sans); font-size: 15px; font-weight: 800; cursor: pointer; transition: background .2s ease; } @media (hover: hover) and (pointer: fine) { .prt-search.prt-search.prt-search .elementor-search-form button.elementor-search-form__submit:hover { background: var(--prt-pink-cta-hover); } } .prt-search.prt-search .elementor-search-form input.elementor-search-form__input:focus-visible, .prt-search.prt-search.prt-search .elementor-search-form button.elementor-search-form__submit:focus-visible { outline: 3px solid var(--prt-pink-cta); outline-offset: 3px; } /* Ponizej 700 px pole i przycisk jeden pod drugim — inaczej na telefonie na tekst w polu zostaje kilkanascie pikseli. */ @media (max-width: 700px) { .prt-search.prt-search .elementor-search-form__container { flex-direction: column; } .prt-search.prt-search .elementor-search-form input.elementor-search-form__input { border-radius: 20px; } .prt-search.prt-search.prt-search .elementor-search-form button.elementor-search-form__submit { width: 100%; } } /* --- Powiazane artykuly --- Siatka trzykolumnowa; karty biora styl z bloku `.prt-article-card` wyzej, bo shortcode wypisuje te same klasy co widget Posts. */ .prt-powiazane { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } @media (max-width: 1000px) { .prt-powiazane { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .prt-powiazane { grid-template-columns: minmax(0, 1fr); } } /* Link „Wszystkie z kategorii …" w wierszu naglowka sekcji */ .prt-wszystkie-z { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; color: var(--prt-navy); white-space: nowrap; } /* Dluzsze nazwy kategorii („Zamowienia i dostawa") nie mieszcza sie w jednej linii na telefonie — `nowrap` rozpychal wtedy dokument o 23 px. Powyzej 700 px etykieta i tak sie miesci, wiec nowrap zostaje tam, gdzie wyglada lepiej. */ @media (max-width: 700px) { .prt-wszystkie-z { white-space: normal; } } .prt-wszystkie-z__strzalka { width: 17px; height: 11px; background: var(--prt-pink-cta); -webkit-mask: var(--prt-strzalka) center/contain no-repeat; mask: var(--prt-strzalka) center/contain no-repeat; transition: transform .2s ease; } @media (hover: hover) and (pointer: fine) { .prt-wszystkie-z:hover { color: var(--prt-pink-cta); } .prt-wszystkie-z:hover .prt-wszystkie-z__strzalka { transform: translateX(4px); } } /* --- Przycisk w widgecie Button Elementora --- `_css_classes` sadzi klase na OPAKOWANIU widgetu, nie na ``. Klasa `.prt-btn-primary` nalozona wprost na widget dawala rozowy prostokat na cala szerokosc kolumny, a prawdziwy link w srodku zostawal nieostylowany. Dlatego osobna klasa, ktora celuje w ``. */ .prt-btn-widget .elementor-button-wrapper { display: flex; } .prt-btn-widget .elementor-button { display: inline-flex; align-items: center; gap: 12px; background: var(--prt-pink-cta); color: #fff; font-family: var(--prt-font-sans); font-size: 16px; font-weight: 800; line-height: 1.2; /* ⚠️ POZIOMY PADDING ZWEZA SIE NA WASKICH EKRANACH, i to jest cala poprawka. Zmierzone przez FreeAgenta na 390 px: „Otworz formularz" lamal sie na dwie linie (przycisk 218×76). Kolumna ma 218 px, a 32 + 32 paddingu, 16 ikona, 12 gap i ~150 tekstu daje ~242. Przy 18 px paddingu wychodzi ~214 i napis mieci sie w jednej linii. ⚠️ CELOWO BEZ `white-space: nowrap`, choc to byla pierwsza propozycja. `nowrap` naprawia dzisiejszy napis, a przy dluzszym — albo po niemiecku — kazalby przyciskowi wyjsc poza kolumne zamiast sie zlamac. Zawijanie zostaje jako zawor bezpieczenstwa; usuwamy tylko powod, dla ktorego dzis sie wlacza. */ padding: 19px clamp(18px, 4vw, 32px); border-radius: var(--prt-radius-pill); border: 0; transition: background .2s ease, transform .2s ease; } .prt-btn-widget .elementor-button:hover { color: #fff; } @media (hover: hover) and (pointer: fine) { .prt-btn-widget .elementor-button:hover { background: var(--prt-pink-cta-hover); transform: translateY(-2px); } } .prt-btn-widget .elementor-button:focus-visible { outline: 3px solid var(--prt-pink-cta); outline-offset: 3px; } /* --- Spis tresci: wylaczamy wlasny naglowek i ramke widgetu --- Widget renderuje naglowek „Table of Contents" (159 px wysokosci) w ramce, mimo ze nad nim stoi juz nasze „W TYM ARTYKULE". Kontrolki stylu pudelka nie potrafia go usunac, moga tylko przemalowac. */ .prt-toc .elementor-toc__header { display: none !important; } /* Ramka siedzi na KORZENIU widgetu (`.elementor-element`), nie na wewnetrznych kontenerach — celowanie w `.elementor-widget-container` jej nie dotykalo. Zostawiamy ja, ale w tokenach Printelli zamiast domyslnej szarosci Elementora, i z paddingiem, zeby tekst nie dotykal krawedzi. */ .prt-toc.elementor-element { border: 1.5px solid var(--prt-line-card) !important; border-radius: 18px !important; background: #fff !important; padding: clamp(20px, 2vw, 26px) !important; } .prt-toc .elementor-toc__body { border: 0 !important; background: transparent !important; padding: 0 !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } /* --- Pasmo kontaktu (Saved Section, wspolne dla obu szablonow) --- */ .prt-kontakt-panel { position: relative; } @media (max-width: 820px) { .prt-kontakt-tango { display: none !important; } } /* Tabela w tresci artykulu przewija sie sama, nie ciagnie za soba strony. `min-width` trzyma kolumny czytelne; ponizej tej szerokosci pojawia sie poziomy pasek WEWNATRZ ramki, a dokument zostaje bez scrolla. */ .prt-table-scroll { max-width: 100%; overflow-x: auto; margin: clamp(22px,2.4vw,30px) 0 0; -webkit-overflow-scrolling: touch; } .prt-table-scroll .prt-table { margin-top: 0; min-width: 460px; } /* =================================================================== USLUGI GRAFICZNE (/uslugi-graficzne/) Landing czterech uslug. Instrukcja: handoff „odbudowa-natywna-uslugi-graficzne”. ⚠️ PODZIAL ODPOWIEDZIALNOSCI — nie mieszac. Ten blok trzyma WYLACZNIE wyglad: tla, kolory, dekoracje, typografie wewnatrz widgetow. Uklad kontenerow (kierunek, odstepy, szerokosci, paddingi) siedzi w bloku „USLUGI GRAFICZNE — UKLAD KONTENEROW” na koncu pliku i musi byc pisany zmiennymi Elementora. Wczesniej te same kontenery byly stylowane w obu miejscach zwyklymi wlasciwosciami i reguly po cichu sie znosily. =================================================================== */ /* Hero tej strony ma WLASNY wariant klasy, a nie wspoldzieli `.prt-hero-art`. Tamten (uzywany przez strone glowna) ma sztywna wysokosc clamp(300px,32vw,400px) i osobny element `.prt-hero-blob` o organicznym ksztalcie. Tutaj dekoracja to okragly `::before` na kontenerze, a wysokosc wynika z tresci — nadpisanie wspolnej klasy przestawiloby hero na stronie glownej. */ /* ⚠️ Ksztalt ORGANICZNY, nie kolo — mimo ze prototyp tej podstrony rysowal `border-radius: 50%`. Serwis ma wlasna konwencje plamy w hero (strona glowna: `border-radius: 48% 52% 46% 54%/52% 44% 56% 48%`, patrz `.prt-hero-blob`) i okragla plama odstawala od reszty. Decyzja swiadoma: spojnosc serwisu wygrywa z prototypem pojedynczej strony. */ /* ⚠️ `position: relative` MUSI byc tu jawnie. Na `/uslugi-graficzne/` ta klasa siedzi na kontenerze Elementora, ktory ma relative domyslnie — ale na `/uslugi-graficzne/wycena/` na zwyklym `div` w widgecie HTML. Bez tego plama ponizej zaczepia sie o dalszego przodka i ucieka poza ekran (zmierzone: scrollWidth 1475 przy viewport 1440). */ .prt-hero-art--uslugi { position: relative; } .prt-hero-art--uslugi::before { content: ""; position: absolute; right: -9%; top: -1%; width: 82%; padding-top: 78%; border-radius: 48% 52% 46% 54% / 52% 44% 56% 48%; background: var(--prt-surface-pink-strong); pointer-events: none; } .prt-hero-art--uslugi > * { position: relative; z-index: 2; } /* ⚠️ Ponizej 1080 px art schodzi POD tekst i traci pozycjonowanie absolutne. Trzy rzeczy, ktore ten blok zalatwia i ktore latwo zepsuc: 1. NIE dawac `order: -1` — inaczej pierwszy ekran to sam pies bez naglowka. 2. Kula znika: jest procentem szerokosci kolumny, ktora w jednej kolumnie robi sie ~2,4x szersza i przestaje sie miescic. 3. Notki Kalam wracaja do przeplywu — inaczej ladują na siersci psa. Breakpoint jest ZAPYTANIEM MEDIA, nie ustawieniem Elementora: viewport_laptop na tym serwisie wynosi 1440 i uzywa go 11 szablonow (naglowek, obie stopki, Pomoc, Panele, Kontakt), wiec przestawienie go na 1080 przesunuloby ich uklad. */ @media (max-width: 1080px) { .prt-hero-art--uslugi::before { display: none; } .prt-hero-art--uslugi img { max-height: clamp(220px,34vw,320px); max-width: min(480px, 100%); object-fit: contain; object-position: center; margin: 0 auto; } .prt-hero-art--uslugi .elementor-widget-heading { position: static !important; max-width: 340px !important; transform: none !important; text-align: center; } } /* --- Karty uslug --------------------------------------------------- */ .prt-svc { transition: transform .25s ease, box-shadow .25s ease; } .prt-svc--jakosc { background: var(--prt-surface-blue); --ink: #0972B5; } .prt-svc--korekta { background: var(--prt-surface-pink); --ink: #C22765; } .prt-svc--zmiany { background: var(--prt-surface-sage); --ink: #3F6420; } .prt-svc--projekt { background: var(--prt-surface-beige); --ink: #8A4A0C; } /* Jedna zmienna `--ink` na karcie zamiast ustawiania koloru w trzech widgetach razy cztery karty. Kazdy z tych kolorow ma >=4.5:1 na wlasnym tincie. */ .prt-svc .prt-eyebrow, .prt-svc .elementor-icon-list-icon svg, .prt-svc .elementor-icon-list-icon i { color: var(--ink); fill: var(--ink); } /* ⚠️ Byly tu `min-height: 168px` na `__head` i `124px` na `__list`, zeby wyrownac grafiki miedzy kartami. Zmierzone na zywo: wszystkie cztery karty maja naturalnie head 120 px i list 135 px — wyrownanie nic nie wnosilo, a wymuszone 168 px dokladalo 48 px pustki nad kazda grafika. Usuniete. Jesli ktorys lead urosnie do trzech linii, grafiki w rzedzie sie rozjada; wtedy skrocic tekst, a nie wracac do sztywnej wysokosci. */ /* Grafiki „przed -> po” leza wprost na tincie: PNG maja alfe i NIE dostaja tla. */ .prt-svc__media img { width: 100%; aspect-ratio: 2 / 1; object-fit: contain; } .prt-svc__price { margin: 0; font-size: 16px; font-weight: 700; color: var(--prt-text-muted); } .prt-svc__price strong { font-size: clamp(24px,2.2vw,30px); font-weight: 900; color: var(--prt-navy); letter-spacing: -.02em; } /* CTA karty: pelny przycisk w kolorze `--ink` tej karty, nie goly link. ⚠️ Celowac w ``, nie w widget — `_css_classes` sadzi klase na OPAKOWANIU widgetu, wiec regula nalozona na widget pomalowalaby prostokat na cala szerokosc kolumny, a link w srodku zostalby nieostylowany. Ten sam wzorzec co `.prt-btn-widget` wyzej, tylko w mniejszym rozmiarze — przycisk stoi w jednym wierszu z cena. */ .prt-svc__foot .elementor-button { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 800; line-height: 1.2; padding: 13px 22px; border-radius: var(--prt-radius-pill); border: 0; transition: filter .2s ease, transform .2s ease; } .prt-svc__foot .elementor-button:hover, .prt-svc__foot .elementor-button:visited { color: #fff; } @media (hover: hover) and (pointer: fine) { .prt-svc__foot .elementor-button:hover { filter: brightness(1.14); transform: translateY(-2px); } } /* Karta NIE jest linkiem — klikalne jest tylko CTA. Zadnego `::after{inset:0}`, bo cena i przycisk przestalyby byc osiagalne osobno. */ @media (hover: hover) and (pointer: fine) { .prt-svc:hover { transform: translateY(-3px); box-shadow: var(--prt-shadow-hover); } } @media (max-width: 620px) { .prt-svc__foot .elementor-button { width: 100%; justify-content: center; } } /* --- „Jak to dziala?” ---------------------------------------------- */ /* Strzalka tylko PO krokach 1-3. `:not(:last-child)` zalatwia brak strzalki w czwartym kroku bez osobnej klasy. Maska jako data URI, a nie plik w uploads — nie ma czego wgrywac i nie zniknie przy porzadkach w mediach. */ .prt-step:not(:last-child)::after { content: ""; position: absolute; right: -16px; top: 26px; width: 18px; height: 12px; background: var(--prt-pink-cta); -webkit-mask: var(--prt-arrow) center/contain no-repeat; mask: var(--prt-arrow) center/contain no-repeat; } @media (max-width: 920px) { .prt-step::after { display: none !important; } } /* Numerek w rogu kolka jest pozycjonowany wzgledem kolka, wiec kolko MUSI zostac `relative` — `.e-con` ma to domyslnie, ale zapisane wprost, zeby przypadkowa zmiana `--position` w buildera tego nie zdjela. */ .prt-step__icon { position: relative; background: var(--prt-surface-pink-icon); } .prt-step__icon .elementor-icon { color: var(--prt-pink-cta); } .prt-step__n { position: absolute; left: -6px; top: -6px; z-index: 2; } .prt-step__n p, .prt-step__n span { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0; border-radius: var(--prt-radius-pill); background: #fff; font-size: 13px; font-weight: 900; line-height: 1; } .prt-step__t p { margin: 0; max-width: 170px; font-size: 14px; font-weight: 700; color: var(--prt-navy); } /* --- Kafel „dropzone” w pasmie wyceny ------------------------------ */ /* ⚠️ To NIE jest dzialajacy upload, tylko link na /uslugi-graficzne/wycena/. Prawdziwy upload istnieje w jednym miejscu: w formularzu wyceny. */ .prt-dropzone { background: rgba(255,255,255,.72); border: 2px dashed var(--prt-line-pink); transition: border-color .2s ease, background .2s ease; } @media (hover: hover) and (pointer: fine) { .prt-dropzone:hover { border-color: var(--prt-pink-cta); background: #fff; } } .prt-dropzone__formats { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .prt-dropzone__formats span { background: #fff; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 800; color: var(--prt-text-muted); } .prt-dropzone__t p { margin: 0; font-size: 17px; font-weight: 800; color: var(--prt-navy); } .prt-dropzone__s p { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--prt-text-muted); } @media (prefers-reduced-motion: reduce) { .prt-svc, .prt-dropzone, .prt-svc__foot .elementor-button { transition: none; } .prt-svc:hover, .prt-svc__foot .elementor-button:hover { transform: none; } } /* --- Breadcrumb ---------------------------------------------------- */ /* Tekstem, bo serwis nie ma Yoasta ani Rank Matha (jest The SEO Framework, ktorego widget Breadcrumbs Elementora nie obsluguje). Zapas przewidziany wprost w instrukcji odbudowy. Wyrownanie do LEWEJ krawedzi tresci idzie przez `--text-align` na kontenerze (blok ukladu), tu tylko sam akapit. */ /* Okruszki — JEDNA definicja na cały serwis (Pomoc, tkaniny, Usługi, Wycena). Markup składa `Printella_Okruszki::render()`; odstęp 9px i kolory są z paczki projektowej (`.prt-breadcrumbs`). ⚠️ Odstęp robi WYŁĄCZNIE `gap` — nie dokładać marginesów na separatorze. Wcześniej `.prt-crumbs span { margin: 0 6px }` sumowało się z `gap: 9px` z nadpisania na karcie tkaniny i dawało tam 30px zamiast 9px. ⚠️ Krój ustawiamy WPROST, razem z `inherit` na dzieciach. Bez tego okruszki dziedziczą go z kontekstu: na czterech stronach wychodził Montserrat z globalnej typografii kitu, a w widgecie text-editor na Usługach graficznych Nunito Sans — ta sama ścieżka w dwóch krojach. Projekt mówi Nunito Sans. */ .prt-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0; text-align: left; font-family: var(--prt-font-sans); font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--prt-text-muted); } .prt-crumbs a, .prt-crumbs span { font-family: inherit; } .prt-crumbs a { color: var(--prt-text-muted); text-decoration: none; } .prt-crumbs a:hover { color: var(--prt-pink-cta); } .prt-crumbs__sep { color: var(--prt-line-arrow); } /* Stopien biezacy. Celowo po klasie, a nie po `` ani `[aria-current]`: separator tez jest ``, a stopien srodkowy bez adresu ma zostac w kolorze pozostalych stopni (handoff kreatora, pkt 11). */ .prt-crumbs__teraz { font-weight: 700; color: var(--prt-navy); } /* --- Notki odreczne ------------------------------------------------ */ /* OBIE wyrownane do gory (top 2%) — to swiadoma decyzja projektowa, nie przypadek. Kalam wylacznie tutaj, nigdy w naglowkach ani UI. Jeden styl dla wszystkich notek w serwisie (handoff kreatora, pkt 10): Kalam 400 w granacie, bez pogrubienia i bez kolorow akcentowych. */ .prt-uslugi-note { position: absolute; z-index: 3; } /* ⚠️ Celowac w `.elementor-heading-title`, NIE w `h2`. Kit ma globalna typografie naglowkow pod selektorem `.elementor-widget-heading .elementor-heading-title` (0,2,0); `.prt-uslugi-note h2` to 0,1,1 i przegrywa — notki dostawaly wtedy rozmiar naglowka H2 i zaslanialy cale hero. Sam `.prt-uslugi-note` jest tu rowniez celem, a nie tylko rodzicem: Wycena grafiki renderuje notke jako `

` z tekstem bezposrednio w elemencie, wiec reguly na potomkach jej nie dosiegaly i notka szla goly Nunito Sans 16px. */ .prt-uslugi-note, .prt-uslugi-note .elementor-heading-title, .prt-uslugi-note p { margin: 0; font-family: var(--prt-font-hand); font-weight: 400; line-height: 1.4; font-size: clamp(15px,1.4vw,18px); color: var(--prt-navy); } .prt-uslugi-note--l { left: -15px; top: 2%; width: 180px; transform: rotate(-4deg); } .prt-uslugi-note--r { right: 0; top: 2%; width: 150px; transform: rotate(3deg); } /* --- Pasek zaufania: „cichy”, bez tla i bez ramek ------------------ */ .prt-trust__t p { margin: 0; font-size: 14px; font-weight: 700; color: var(--prt-navy); } /* Focus musi byc widoczny na obu wyjsciach do formularza. */ .prt-svc .elementor-button:focus-visible, .prt-dropzone:focus-visible { outline: 3px solid var(--prt-pink-cta); outline-offset: 3px; } /* =================================================================== WYCENA (/uslugi-graficzne/wycena/) Formularz w szesciu krokach. Zbudowany WARIANTEM C z instrukcji odbudowy: markup pisany recznie w widgecie HTML, nie widgetem Form Elementora. Dzieki temu selektory ponizej sa wlasne i nie walcza z klasami Elementora (`.elementor-field-subgroup`, `.elementor-field-option` itd.). Obsluga: `Printella_Wycena_Form` w printella-core. =================================================================== */ .prt-wycena-layout { display: flex; align-items: flex-start; gap: clamp(24px,2.8vw,38px); } @media (max-width: 1080px) { .prt-wycena-layout { flex-direction: column; } } .prt-form-card { flex: 1 1 auto; min-width: 0; background: #F8F9FC; border-radius: var(--prt-radius-panel); padding: clamp(24px,3vw,40px); } .prt-form { display: flex; flex-direction: column; gap: clamp(26px,3vw,38px); } .prt-form fieldset { margin: 0; padding: 0; border: 0; } .prt-form legend { padding: 0; } /* Naglowek kroku: numer w rozowym kolku + tytul + podtytul. */ .prt-step-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: clamp(14px,1.6vw,22px); } .prt-step-head__n { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--prt-radius-pill); background: var(--prt-pink-cta); color: #fff; font-size: 15px; font-weight: 900; } .prt-step-head__t { margin: 0; font-size: clamp(18px,1.7vw,22px); font-weight: 900; letter-spacing: -.02em; color: var(--prt-navy); } .prt-step-head__s { margin: 5px 0 0; font-size: 14px; font-weight: 600; color: var(--prt-text-muted); } /* Krok 1 — kafle uslug z miniatura i cena. ⚠️ Cena jest atrybutem `data-cena` w HTML, a nie `content: ""` w CSS. Instrukcja odbudowy nazywa tamto wprost dlugiem technicznym: ceny w CSS sa poza CMS-em i poza tlumaczeniami, a musza zgadzac sie z cennikiem na landingu. */ .prt-usluga { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: clamp(10px,1.2vw,14px); } .prt-usluga__o { position: relative; display: flex; } .prt-usluga__o input { position: absolute; opacity: 0; width: 0; height: 0; } .prt-usluga__o label { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; background: #fff; border: 2px solid var(--prt-line-card); border-radius: var(--prt-radius-tile); padding: 14px 12px 16px; cursor: pointer; text-align: center; font-size: 13px; line-height: 1.35; font-weight: 800; color: var(--prt-navy); transition: border-color .2s ease; } .prt-usluga__o img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; } .prt-usluga__o label::after { content: attr(data-cena); font-size: 13px; font-weight: 700; color: var(--prt-text-muted); } .prt-usluga__o input:checked + label { border-color: var(--prt-pink-cta); } .prt-usluga__o input:checked + label::after { color: var(--prt-pink-cta); } .prt-usluga__o input:focus-visible + label { outline: 3px solid var(--prt-pink-cta); outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .prt-usluga__o label:hover { border-color: var(--prt-line-pink); } } @media (max-width: 720px) { .prt-usluga { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 460px) { .prt-usluga { grid-template-columns: minmax(0,1fr); } } /* Krok 2 — strefa upuszczania. Tu jest PRAWDZIWY upload, w odroznieniu od kafla na landingu, ktory jest wylacznie linkiem. */ .prt-strefa { position: relative; display: block; background: #fff; border: 2px dashed var(--prt-line-input); border-radius: 20px; padding: clamp(26px,3vw,40px) 20px; text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease; } .prt-strefa input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .prt-strefa__t { margin: 0; font-size: 16px; font-weight: 800; color: var(--prt-navy); } .prt-strefa__s { margin: 5px 0 0; font-size: 14px; font-weight: 600; color: var(--prt-text-muted); } .prt-strefa[data-nad], .prt-strefa:focus-within { border-color: var(--prt-pink-cta); background: var(--prt-surface-pink-lightest, #FFF6FA); } @media (hover: hover) and (pointer: fine) { .prt-strefa:hover { border-color: var(--prt-pink-cta); background: var(--prt-surface-pink-lightest, #FFF6FA); } } .prt-pliki { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; } .prt-plik { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--prt-line); border-radius: 12px; padding: 10px 12px; } .prt-plik__n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--prt-navy); } .prt-plik__r { flex: none; font-size: 13px; font-weight: 700; color: var(--prt-text-faint); } .prt-plik__x { flex: none; width: 26px; height: 26px; border: 0; border-radius: var(--prt-radius-pill); background: var(--prt-surface-pink-strong); color: var(--prt-pink-cta); font-size: 17px; font-weight: 900; line-height: 1; cursor: pointer; } /* Krok 3 — opis z licznikiem znakow. */ .prt-form textarea { width: 100%; min-height: 130px; resize: vertical; background: #fff; border: 1.5px solid var(--prt-line); border-radius: 16px; padding: 16px 18px; line-height: 1.55; font-size: 15px; font-weight: 500; font-family: inherit; color: var(--prt-navy); } .prt-counter { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: var(--prt-text-faint); text-align: right; } /* Krok 4 — chipy zastosowania. */ .prt-zastosowanie { display: flex; flex-wrap: wrap; gap: 10px; } .prt-zastosowanie__o input { position: absolute; opacity: 0; width: 0; height: 0; } .prt-zastosowanie__o label { display: inline-flex; background: #fff; border: 1.5px solid var(--prt-line); border-radius: var(--prt-radius-pill); padding: 12px 22px; font-size: 14px; font-weight: 700; color: var(--prt-navy); cursor: pointer; transition: border-color .2s ease, background .2s ease; } .prt-zastosowanie__o input:checked + label { background: var(--prt-surface-pink-strong); border-color: var(--prt-pink-cta); font-weight: 800; } .prt-zastosowanie__o input:focus-visible + label { outline: 3px solid var(--prt-pink-cta); outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .prt-zastosowanie__o label:hover { border-color: var(--prt-pink-cta); } } /* Krok 5 — rozmiar docelowy. */ .prt-rozmiar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; } .prt-rozmiar > * { flex: 1 1 140px; min-width: 0; } .prt-x { flex: 0 0 auto; align-self: flex-end; padding-bottom: 13px; font-size: 16px; font-weight: 800; color: var(--prt-text-faint); } /* Krok 6 i pola wspolne. */ .prt-pola { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 14px; } .prt-pola--1 { grid-template-columns: minmax(0,1fr); } @media (max-width: 620px) { .prt-pola { grid-template-columns: minmax(0,1fr); } } .prt-pole { display: flex; flex-direction: column; gap: 7px; } .prt-pole > span { font-size: 13px; font-weight: 700; color: var(--prt-text-muted); } .prt-form input[type="text"], .prt-form input[type="email"], .prt-form input[type="tel"], .prt-form input[type="number"] { width: 100%; background: #fff; border: 1.5px solid var(--prt-line); border-radius: 12px; padding: 13px 16px; font-size: 15px; font-weight: 500; font-family: inherit; color: var(--prt-navy); } .prt-form input::placeholder, .prt-form textarea::placeholder { color: var(--prt-text-faint); } .prt-form input:focus-visible, .prt-form textarea:focus-visible { outline: 0; border-color: var(--prt-pink-cta); box-shadow: 0 0 0 3px rgba(240,65,126,.16); } /* `.prt-form` nie występuje w żadnym szablonie motywu ani wtyczki (sprawdzone grepem 2026-10-26) — reguła martwa. Zostawiona zakomentowana do czasu decyzji, czy klasa wraca; gdyby wróciła, `accent-color` musi być granatowy, nie różowy (zasada kolorów v2). */ /* .prt-form input[type="checkbox"], .prt-form input[type="radio"]:not(.prt-usluga__o input):not(.prt-zastosowanie__o input) { accent-color: var(--prt-pink-cta); width: 19px; height: 19px; } */ .prt-zgoda { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--prt-text-muted); } .prt-zgoda a { color: var(--prt-pink-cta); font-weight: 800; } .prt-zgoda input { flex: none; margin-top: 2px; } .prt-wyslij { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: var(--prt-radius-pill); background: var(--prt-pink-cta); color: #fff; font-size: 17px; font-weight: 800; font-family: inherit; padding: 19px 30px; cursor: pointer; transition: background .2s ease; } .prt-wyslij:hover { background: var(--prt-pink-hover, #D8306A); } .prt-wyslij[disabled] { opacity: .6; cursor: progress; } .prt-nota { margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--prt-text-muted); text-align: center; } .prt-status { margin: 14px 0 0; font-size: 15px; font-weight: 700; line-height: 1.5; text-align: center; } .prt-status[data-stan="ok"] { color: var(--prt-green-ink, #38AA62); } .prt-status[data-stan="blad"] { color: var(--prt-pink-cta); } /* Pulapka na boty — musi byc niewidoczna dla ludzi, ale NIE `display:none`, bo czesc botow pomija pola ukryte tym sposobem. */ .prt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* --- Panel boczny --------------------------------------------------- */ .prt-aside { flex: 0 0 370px; width: 370px; position: sticky; top: 24px; z-index: 5; display: flex; flex-direction: column; gap: clamp(18px,2vw,24px); } @media (max-width: 1080px) { .prt-aside { position: static; width: 100%; flex-basis: auto; } } .prt-next { background: var(--prt-surface-pink); border-radius: var(--prt-radius-panel); padding: clamp(24px,2.6vw,32px); } .prt-next h2 { margin: 0 0 clamp(16px,1.8vw,22px); font-size: clamp(22px,2.2vw,28px); line-height: 1.08; font-weight: 900; letter-spacing: -.028em; color: var(--prt-navy); } .prt-next__k { display: flex; align-items: flex-start; gap: 16px; } .prt-next__k + .prt-next__k { margin-top: clamp(16px,1.8vw,20px); } .prt-next__i { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--prt-radius-pill); background: var(--prt-surface-pink-strong); color: var(--prt-pink-cta); } .prt-next__t { margin: 0; font-size: 16px; font-weight: 800; color: var(--prt-navy); } .prt-next__o { margin: 4px 0 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--prt-text-muted); } .prt-ask { display: flex; align-items: flex-start; gap: 14px; background: #fff; border-radius: var(--prt-radius-media); padding: clamp(18px,2vw,22px); margin-top: clamp(18px,2vw,22px); } .prt-ask__t { margin: 0; font-size: 15px; font-weight: 800; color: var(--prt-navy); } .prt-ask__o { margin: 4px 0 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--prt-text-muted); } .prt-ask a { color: var(--prt-pink-cta); font-weight: 800; } .prt-doodle-panel { background: var(--prt-surface-pink-lightest, #FFF6FA); border-radius: var(--prt-radius-panel); padding: clamp(22px,2.4vw,28px); overflow: hidden; text-align: center; } .prt-doodle-panel__a, .prt-doodle-panel__b { font-family: var(--prt-font-hand); font-weight: 400; color: var(--prt-navy); } .prt-doodle-panel__a { margin: 0; font-size: clamp(22px,2.2vw,28px); line-height: 1.15; } .prt-doodle-panel__b { margin: 6px 0 0; font-size: 17px; } .prt-doodle-panel img { display: block; max-width: 280px; width: 100%; height: auto; margin: clamp(14px,1.6vw,18px) auto 0; } .prt-trust-2x2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: clamp(18px,2vw,22px); text-align: left; } .prt-trust-2x2 div { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 700; color: var(--prt-navy); } .prt-trust-2x2 svg { flex: none; } /* Wycena — hero i breadcrumb. Te same proporcje co landing, ale kolumna z Tango jest WEZSZA (38% zamiast 50%): bohaterem tej strony jest formularz, nie grafika. */ /* `flex-start`, nie `center`: od kiedy okruszki siedza w kolumnie tekstu, srodkowanie wzgledem wysokiej grafiki spychalo cala kolumne w dol i sciezka ladowala w polowie wysokosci hero zamiast przy jego gorze. */ /* Wycena też zaczyna się od okruszków — rola „breadcrumb na bieli". */ .prt-wycena__hero { display: flex; align-items: flex-start; gap: clamp(28px,3.4vw,48px); padding-top: var(--prt-below-header-crumb); } .prt-wycena__hero-txt { flex: 1 1 auto; min-width: 0; } .prt-wycena__art { flex: 0 0 38%; width: 38%; } .prt-wycena__h1 { margin: 0; font-size: clamp(34px,4.6vw,62px); line-height: 1.02; font-weight: 900; letter-spacing: -.035em; color: var(--prt-navy); } .prt-wycena__h1 span { color: var(--prt-pink-cta); } .prt-wycena__lead { max-width: 560px; margin: clamp(16px,1.8vw,22px) 0 0; font-size: clamp(17px,1.5vw,20px); line-height: 1.55; font-weight: 500; color: var(--prt-text-muted); } #wycena-tresc { padding-top: 58px; } @media (max-width: 1080px) { .prt-wycena__hero { flex-direction: column; align-items: stretch; } .prt-wycena__art { flex-basis: auto; width: 100%; } /* `min(..., 100%)`, nie samo 420px — inaczej ilustracja rozpycha strone w poziomie na telefonie (zmierzone: scrollWidth 448 przy viewport 390). */ .prt-wycena__art img { max-height: clamp(200px,30vw,280px); max-width: min(420px, 100%); margin-inline: auto; } } @media (max-width: 767px) { #wycena-tresc { padding-top: 48px; } } /* =================================================================== USLUGI GRAFICZNE — UKLAD KONTENEROW ------------------------------------------------------------------- ⚠️ CZYTAJ PRZED EDYCJA. Kontener Elementora nie przyjmuje zwyklych wlasciwosci flexa. Cztery pulapki, kazda kosztowala tu jedno podejscie: 1. SPECYFICZNOSC. `.e-con.e-flex` (0,2,0) ustawia `--flex-direction: column`, `--width`, `--flex-basis/grow/shrink` i `--flex-wrap`. Selektor `.prt-x` ma 0,1,0, wiec PRZEGRYWA i zmienna nigdy nie dochodzi — mimo ze arkusz motywu laduje sie po Elementorze. Dlatego kazdy selektor kontenera ma tu prefiks `.e-con.e-flex` (0,3,0) i wygrywa niezaleznie od kolejnosci. 2. `--gap` NIE STERUJE ODSTEPEM. Elementor pisze `gap: var(--row-gap) var(--column-gap)`. Ustawiamy OBIE te zmienne. 3. KONTENER BOXED MA DWA POZIOMY. `.e-con-boxed.e-flex` ma twarde `flex-direction: column` (wartosc, nie zmienna); kierunek dziala dopiero na `.e-con > .e-con-inner`, ktory czyta `var(--flex-direction)` odziedziczona z rodzica. Zmienna ustawiamy wiec na kontenerze, a `flex-direction` wprost NIE ZADZIALA NIGDY — ani tu, ani inline. Z tego samego powodu dzieci kontenera to `> .e-con-inner > .e-con`, nie `> .e-con`. 4. Widgety to NIE kontenery — `.prt-ug-h1`, `.prt-eyebrow`, `.prt-svc__il` itd. stylujemy zwyklymi wlasciwosciami. Elementor generuje dla widgetow reguly 0,4,0, ale tylko gdy w `_elementor_data` siedza ustawienia stylu; ta strona trzyma w danych wylacznie strukture, klasy i tresc, wiec konkurencji nie ma. Wszystkie kontenery tej strony to `e-con-boxed` (sprawdzone w DOM). =================================================================== */ /* --- rytm sekcji: 96 px, ponizej 767 px — 72 px --- */ .e-con.e-flex.prt-ug-karty, .e-con.e-flex.prt-ug-jak, .e-con.e-flex.prt-ug-wyc, .e-con.e-flex.prt-ug-trust { --padding-top: 96px; } .e-con.e-flex.prt-ug-trust { --padding-bottom: 96px; } .e-con.e-flex.prt-ug-crumbs { --padding-top: clamp(18px,2vw,26px); --padding-bottom: 0px; --text-align: left; } @media (max-width: 767px) { .e-con.e-flex.prt-ug-karty, .e-con.e-flex.prt-ug-jak, .e-con.e-flex.prt-ug-wyc, .e-con.e-flex.prt-ug-trust { --padding-top: 72px; } .e-con.e-flex.prt-ug-trust { --padding-bottom: 72px; } } /* --- hero --- */ .e-con.e-flex.prt-ug-hero { --flex-direction: row; --align-items: center; --row-gap: var(--prt-gap-hero); --column-gap: var(--prt-gap-hero); --padding-top: clamp(36px,4.4vw,60px); --padding-bottom: 0px; } .e-con.e-flex.prt-ug-hero__txt { --flex-grow: 1; --flex-shrink: 1; --flex-basis: 0; --row-gap: 0px; --column-gap: 0px; } .e-con.e-flex.prt-hero-art--uslugi { --flex-grow: 0; --flex-shrink: 0; --flex-basis: 46%; --width: 46%; } @media (max-width: 1080px) { .e-con.e-flex.prt-ug-hero { --flex-direction: column; --align-items: stretch; } .e-con.e-flex.prt-hero-art--uslugi { --flex-basis: auto; --width: 100%; --align-items: center; --row-gap: 14px; --column-gap: 14px; } } /* --- pasek USP pod leadem --- */ .e-con.e-flex.prt-usp { --flex-direction: row; --row-gap: clamp(18px,2vw,26px); --column-gap: clamp(18px,2vw,26px); --padding-top: 26px; } .e-con.e-flex.prt-usp__i { --flex-grow: 1; --flex-shrink: 1; --flex-basis: 0; --row-gap: 8px; --column-gap: 8px; } @media (max-width: 620px) { .e-con.e-flex.prt-usp { --flex-direction: column; } } /* --- naglowek sekcji kart --- */ .e-con.e-flex.prt-sec-head { --text-align: center; --row-gap: 0px; --column-gap: 0px; /* ⚠️ Szerokosc wprost, NIE przez `--width`: Elementor domyka te zmienna regula `.e-con{max-width:min(100%,var(--width))}`, ktora obowiazuje dopiero powyzej breakpointu. Ponizej zostawalo samo `width: 660px` i sekcja rozpychala strone w poziomie na telefonie. `margin-inline: auto` tez wprost — `.e-con{--margin-left:auto}` siedzi w tym samym zapytaniu media, wiec blok trzymal sie lewej krawedzi. */ max-width: 660px; margin-inline: auto; } /* --- siatka kart: dwa rzedy po dwie ------------------------------- */ /* Dwa rzedy zamiast jednego zawijajacego sie kontenera: Elementor rozdziela szerokosci po rowno w rzedzie, wiec dwa rzedy daja 50/50 bez `--flex-wrap`, ktorego builder nie zaleca. */ .e-con.e-flex.prt-svc-row { --flex-direction: row; --align-items: stretch; --row-gap: clamp(20px,2.4vw,30px); --column-gap: clamp(20px,2.4vw,30px); --margin-top: clamp(36px,4vw,50px); } .e-con.e-flex.prt-svc { --flex-grow: 1; --flex-shrink: 1; --flex-basis: 0; --row-gap: clamp(16px,1.7vw,22px); --column-gap: clamp(16px,1.7vw,22px); --border-radius: var(--prt-radius-panel); --padding-top: clamp(26px,2.8vw,36px); --padding-right: clamp(26px,2.8vw,36px); --padding-bottom: clamp(26px,2.8vw,36px); --padding-left: clamp(26px,2.8vw,36px); } .e-con.e-flex.prt-svc__head { --row-gap: 6px; --column-gap: 6px; } .e-con.e-flex.prt-svc__media { --row-gap: 14px; --column-gap: 14px; } /* Stopka karty dosuwa sie do dolu — to ona wyrownuje ceny miedzy kartami. */ .e-con.e-flex.prt-svc__foot { --flex-direction: row; --align-items: center; --justify-content: space-between; --flex-wrap: wrap; --row-gap: 18px; --column-gap: 18px; --margin-top: auto; } .e-con.e-flex.prt-svc__foot-kol { --flex-grow: 0; --flex-shrink: 1; --flex-basis: auto; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; width: auto; max-width: none; } @media (max-width: 1024px) { .e-con.e-flex.prt-svc-row { --flex-direction: column; } .e-con.e-flex.prt-svc { --flex-basis: auto; --width: 100%; } } @media (max-width: 620px) { .e-con.e-flex.prt-svc__foot { --flex-direction: column; --align-items: stretch; } .e-con.e-flex.prt-svc__foot-kol { width: 100%; } } /* --- „Jak to dziala?” --- */ .e-con.e-flex.prt-ug-panel { --flex-direction: row; --align-items: center; --row-gap: clamp(28px,3.4vw,48px); --column-gap: clamp(28px,3.4vw,48px); --border-radius: var(--prt-radius-panel); --padding-top: clamp(28px,3.2vw,44px); --padding-right: clamp(28px,3.2vw,44px); --padding-bottom: clamp(28px,3.2vw,44px); --padding-left: clamp(28px,3.2vw,44px); border: 1.5px solid var(--prt-line-soft); } .e-con.e-flex.prt-ug-panel__l { --flex-grow: 0; --flex-shrink: 0; --flex-basis: 270px; --width: 270px; --row-gap: 6px; --column-gap: 6px; } .e-con.e-flex.prt-steps-row { --flex-direction: row; --flex-grow: 1; --flex-shrink: 1; --flex-basis: 0; --row-gap: clamp(16px,2vw,24px); --column-gap: clamp(16px,2vw,24px); } .e-con.e-flex.prt-step { --flex-grow: 1; --flex-shrink: 1; --flex-basis: 0; --align-items: center; --row-gap: 14px; --column-gap: 14px; --text-align: center; } .e-con.e-flex.prt-step__icon { --align-items: center; --justify-content: center; --width: 64px; --height: 64px; --border-radius: var(--prt-radius-pill); --flex-grow: 0; --flex-shrink: 0; --flex-basis: 64px; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; } .e-con.e-flex.prt-step__n { --width: auto; --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; width: auto; max-width: none; } @media (max-width: 920px) { .e-con.e-flex.prt-ug-panel { --flex-direction: column; --align-items: stretch; } .e-con.e-flex.prt-ug-panel__l { --flex-basis: auto; --width: 100%; } .e-con.e-flex.prt-steps-row { --flex-wrap: wrap; } .e-con.e-flex.prt-step { --flex-basis: calc(50% - 12px); } } @media (max-width: 620px) { .e-con.e-flex.prt-step { --flex-basis: 100%; } } /* --- pasmo wyceny --- */ .e-con.e-flex.prt-ug-wyc__p { --flex-direction: row; --align-items: center; --row-gap: clamp(28px,3.4vw,48px); --column-gap: clamp(28px,3.4vw,48px); --border-radius: var(--prt-radius-panel); --overflow: hidden; --padding-top: clamp(30px,3.4vw,48px); --padding-right: clamp(30px,3.4vw,48px); --padding-bottom: clamp(30px,3.4vw,48px); --padding-left: clamp(30px,3.4vw,48px); background: var(--prt-surface-pink-strong); } .e-con.e-flex.prt-ug-wyc__l { --flex-grow: 1; --flex-shrink: 1; --flex-basis: 0; --row-gap: 0px; --column-gap: 0px; } .e-con.e-flex.prt-dropzone { --flex-grow: 0; --flex-shrink: 0; --flex-basis: 45%; --width: 45%; --align-items: center; --text-align: center; --row-gap: 4px; --column-gap: 4px; --border-radius: 20px; --padding-top: clamp(28px,3.2vw,40px); --padding-right: clamp(20px,2.4vw,32px); --padding-bottom: clamp(28px,3.2vw,40px); --padding-left: clamp(20px,2.4vw,32px); } @media (max-width: 920px) { .e-con.e-flex.prt-ug-wyc__p { --flex-direction: column; --align-items: stretch; } .e-con.e-flex.prt-dropzone { --flex-basis: auto; --width: 100%; } } /* --- pasek zaufania --- */ .e-con.e-flex.prt-trust-row { --flex-direction: row; --row-gap: clamp(20px,2.4vw,32px); --column-gap: clamp(20px,2.4vw,32px); } .e-con.e-flex.prt-trust__i { --flex-direction: row; --align-items: flex-start; --flex-grow: 1; --flex-shrink: 1; --flex-basis: 0; --row-gap: 14px; --column-gap: 14px; } @media (max-width: 620px) { .e-con.e-flex.prt-trust-row { --flex-direction: column; } } /* =================================================================== USLUGI GRAFICZNE — TYPOGRAFIA WIDGETOW Zwykle wlasciwosci: widget nie jest kontenerem i nie ma tu zmiennych. ⚠️ Rozmiary sa PODSTRONY, nie strony glownej. Globalny „Display H1" ma w kicie sztywne 88 px — tyle dostawal ten naglowek, zanim reguly per element zniknely z `_elementor_data`. Podstrony serwisu sa mniejsze (Panele: clamp(38px,4.6vw,62px)). =================================================================== */ /* ⚠️⚠️ DLACZEGO TE SELEKTORY MAJA PRZEDROSTEK `.elementor` ================================================================ Elementor WSTRZYKUJE do dokumentu bloki `