/* ============================================================ SPIS TREŚCI - custom.css (style projektowe, ostateczność po Tailwindzie) 1. PAGINACJA 2. SLIDERY SWIPER (pagination bullets + marquee) 3. FORMULARZ KONTAKTOWY (telefon, checkbox/input focus) 4. AKTYWNE MENU (bieżąca pozycja: nagłówek, panele, stopka) 5. SCROLL HEADER (chowanie headera przy scrollu w dół, .header-hidden) 6. CZCIONKI LOKALNE (wzorzec @font-face, zakomentowany) 7. TREŚCI PRAWNE (.legalContent - typografia bloków core w legal-section) 8. IKONY (MENU I BLOKI) I KLASY POZYCJI MENU (ikona-*, Menu Icons ._mi, ukryj-desktop, link-wyrozniony, kafelek-wszystkie) 9. TREŚĆ ARTYKUŁU OFERTY (.ofertaTresc - typografia bloków core w oferta-artykul) 10. COOKIEYES (kolory banera zgód i przycisku powrotu pod paletę strony) 11. ANIMACJE HERO STRONY GŁÓWNEJ (.heroPromien - świetlne wypełnianie łuku z kółkami, .heroPuls - pierścienie przy kółku Konsultacje online) 12. OCENA W GWIAZDKACH (.gwiazdki[data-ocena] - pełne, połówki i puste gwiazdki z pola Liczba gwiazdek) 13. TREŚĆ WPISU (.wpisTresc - typografia bloków core i bloku Klasyczny we wpisie, front + edytor bloków + okno TinyMCE; tytuł wpisu w edytorze) ------------------------------------------------------------ Kolory: to STARTER - nie hardcodujemy tu barw klienta. Miejsca oznaczone „TODO kolor projektu" podmień na token z panelu Design PG (albo klasę TW na elemencie). Domyślnie zostawiamy neutralny czarny / currentColor. Tailwind-first: jeśli styl da się zapisać klasą TW - rób to na elemencie, nie tutaj. custom.css jest dla Swiper, pseudo-elementów i styli wtyczek. Kontener strony: klasa „max-w-site" (1324px) to NATYWNA klasa Tailwinda - zdefiniowana w custom config kompilatora PG (--container-site), nie tutaj. Więcej: CLAUDE.md. ============================================================ */ /* === 1. PAGINACJA === */ .paginationBttn.disabled{ color: #E2E2E2; border-color: #E2E2E2; pointer-events: none; } .paginationBttn.disabled svg path{ stroke: #E2E2E2; } /* === 2. SLIDERY SWIPER (pagination bullets + marquee) === */ .swiper-pagination-bullet { width: 12px; height: 12px; background: #000; opacity: 0.3; } .swiper-pagination-bullet-active { background: #000; /* TODO kolor projektu (akcent aktywnej kropki) */ opacity: 1; } /* Ciągły marquee (.autoSlider) - liniowy ruch bez easingu. Nowa instancja z własną klasą (np. .logosSlider) potrzebuje analogicznej reguły timing-function na SWOJEJ klasie, nie polega na dziedziczeniu po innej. */ .autoSlider .swiper-wrapper { transition-timing-function: linear; } /* Przy slidesPerView: 'auto' slajd bez tej reguły spada do 100% szerokości kontenera (jeden slajd na ekran zamiast paska). */ .autoSlider .swiper-slide { width: auto; } /* === 3. FORMULARZ KONTAKTOWY === */ /* Telefon (wtyczka intl-tel-input) */ .selected-flag{ border-radius: 12px 0 0 12px; background-color: #fff !important; border-right: 1px solid #000; } .flag-container{ top: 15px !important; bottom: 15px !important; } .selected-dial-code{ font-size: 14px; } /* Checkbox, input, textarea - [checked] [focus] w formularzach Contact Form 7. Zawężone do .wpcf7-form, żeby nie nadpisywać klas focus: Tailwinda w innych miejscach. Kolory z tokenów projektu (granat marki). */ .wpcf7-form textarea:focus, .wpcf7-form input:focus { border: 1px solid var(--color-primary-500) !important; --tw-ring-color: color-mix(in oklab, var(--color-primary-500) 10%, transparent) !important; --tw-ring-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 10%, transparent) !important; } .wpcf7-form input[type="checkbox"] { color: var(--color-primary-500); } .wpcf7-form input[type="checkbox"]:focus { --tw-ring-shadow: none !important; --tw-ring-offset-shadow: none !important; } .wpcf7-form input[type="checkbox"]:checked { background-color: currentColor; border: 1px solid currentColor; --tw-ring-shadow: none !important; --tw-ring-offset-shadow: none !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'> bieżącej strony (walker Pinegrow zostawia tę klasę na li z szablonu pozycji). .current_page_parent = strona wpisów (Blog) podświetlona na pojedynczym wpisie. aria-current dokłada filtr kb_menu_aria_current w inc/custom.php. */ .nav-menu > ul > .current-menu-item > a, .nav-menu > ul > .current_page_parent > a { color: var(--color-accent-900); } [megamenu-panel] .current-menu-item > a { border-color: var(--color-accent-200); background-color: var(--color-accent-50); } .footer .current-menu-item > a, .footer .current_page_parent > a { color: var(--color-white); } /* === 5. SCROLL HEADER === */ /* custom.js: .header-scrolled po 50px scrolla (tu można dodać cień albo mniejszy padding), .header-hidden przy scrollu w dół (header wyjeżdża do góry), zdjęta przy scrollu w górę. Przejście daje transition-all na .header w markupie. */ .header.header-hidden { translate: 0 -100%; } /* === 6. CZCIONKI LOKALNE === */ /* Font z pliku (woff2) zamiast Google Fonts. Dwa kroki: 1) zadeklaruj @font-face tutaj (plik w assets/fonts/), 2) dodaj rodzinę jako token w panelu Design PG (font family) - inaczej klasa `font-nazwa` w Tailwindzie nie istnieje i nie zadziała. Wzorzec: @font-face { font-family: 'Manrope'; src: url('../fonts/manrope-variable.woff2') format('woff2'); font-weight: 300 800; font-display: swap; } */ /* === 7. TREŚCI PRAWNE (.legalContent) === */ /* Blok legal-section (regulamin, polityka prywatności, obowiązek informacyjny). Klient wkleja w strefę InnerContent zwykłe bloki core (nagłówki, akapity, listy), a te nie mają własnych styli (preflight je zeruje) - typografię daje ta sekcja. Kolory przez tokeny palety (po podmianie palety w projekcie sekcja sama wpada w kolorystykę), bez hexów konkretnego projektu. */ .legalContent h2 { margin: 2rem 0 0.75rem; font-size: 1.375rem; font-weight: 700; line-height: 1.3; } .legalContent h3 { margin: 1.5rem 0 0.5rem; font-size: 1.125rem; font-weight: 600; line-height: 1.35; } .legalContent p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.7; } .legalContent ul, .legalContent ol { margin: 0 0 1rem; padding-left: 1.5rem; line-height: 1.7; } .legalContent ul { list-style: disc; } .legalContent ol { list-style: decimal; } .legalContent li { margin-bottom: 0.375rem; } .legalContent a { color: var(--color-primary-500); text-decoration: underline; text-underline-offset: 2px; transition: color 0.3s; } .legalContent a:hover { color: var(--color-primary-600); } /* === 8. IKONY (MENU I BLOKI) I KLASY POZYCJI MENU === */ /* Klasy wpisywane przez klienta w polu "Klasy CSS" pozycji menu (Wygląd > Menu, włączane w "Opcjach ekranu"). WordPress przepuszcza tam tylko litery, cyfry, dywiz i podkreślnik (sanitize_html_class), więc warianty Tailwinda typu xl:hidden nie zadziałają - stąd własne klasy poniżej. Klasa trafia na
  • . */ /* Ikona karty w panelach nagłówka (menu "motoryzacja" i "specjalizacje"). W szablonie pozycji siedzi pusty span .menu-ikona (rozmiar i kolor z klas Tailwinda), a kształt nadaje mu maska SVG wybrana klasą ikona-* na
  • . Pozycja bez ikony z Menu Icons i bez klasy ikona-* dostaje uniwersalną ikonę domyślną (paragraf), wspólną dla wszystkich paneli (bez maski span byłby pełnym kwadratem). Pliki: inc/img/ikony/ (1:1 z Figmy, paragraf własny). Bloki tego nie używają: ikona bloku to inline z polem obrazu (klient wkleja kod SVG w panelu bloku, kolor z currentColor). */ .menu-ikona { background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } [megamenu-panel] li:not([class*="ikona-"]) .menu-ikona, .ikona-paragraf .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/paragraf.svg'); mask-image: url('../../inc/img/ikony/paragraf.svg'); } .ikona-klucz .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/klucz.svg'); mask-image: url('../../inc/img/ikony/klucz.svg'); } .ikona-umowa .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/umowa.svg'); mask-image: url('../../inc/img/ikony/umowa.svg'); } .ikona-samochod .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/samochod.svg'); mask-image: url('../../inc/img/ikony/samochod.svg'); } .ikona-wykres-spadek .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/wykres-spadek.svg'); mask-image: url('../../inc/img/ikony/wykres-spadek.svg'); } .ikona-tarcza .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/tarcza.svg'); mask-image: url('../../inc/img/ikony/tarcza.svg'); } .ikona-ostrzezenie .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/ostrzezenie.svg'); mask-image: url('../../inc/img/ikony/ostrzezenie.svg'); } .ikona-zebatka .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/zebatka.svg'); mask-image: url('../../inc/img/ikony/zebatka.svg'); } .ikona-warsztat .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/warsztat.svg'); mask-image: url('../../inc/img/ikony/warsztat.svg'); } .ikona-waga .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/waga.svg'); mask-image: url('../../inc/img/ikony/waga.svg'); } .ikona-rodzina .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/rodzina.svg'); mask-image: url('../../inc/img/ikony/rodzina.svg'); } .ikona-dokument .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/dokument.svg'); mask-image: url('../../inc/img/ikony/dokument.svg'); } .ikona-dom .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/dom.svg'); mask-image: url('../../inc/img/ikony/dom.svg'); } .ikona-karta .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/karta.svg'); mask-image: url('../../inc/img/ikony/karta.svg'); } .ikona-teczka .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/teczka.svg'); mask-image: url('../../inc/img/ikony/teczka.svg'); } .ikona-klodka .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/klodka.svg'); mask-image: url('../../inc/img/ikony/klodka.svg'); } .ikona-urzad .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/urzad.svg'); mask-image: url('../../inc/img/ikony/urzad.svg'); } /* Dodatkowe ikony dla pozycji menu (ten sam mechanizm: maska na .menu-ikona, wybór klasą ikona-* na
  • ). Nowa ikona = plik w inc/img/ikony/ + linia poniżej. */ .ikona-pinezka .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/pinezka.svg'); mask-image: url('../../inc/img/ikony/pinezka.svg'); } .ikona-telefon .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/telefon.svg'); mask-image: url('../../inc/img/ikony/telefon.svg'); } .ikona-koperta .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/koperta.svg'); mask-image: url('../../inc/img/ikony/koperta.svg'); } .ikona-dlugopis .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/dlugopis.svg'); mask-image: url('../../inc/img/ikony/dlugopis.svg'); } .ikona-dlon .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/dlon.svg'); mask-image: url('../../inc/img/ikony/dlon.svg'); } .ikona-stoper .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/stoper.svg'); mask-image: url('../../inc/img/ikony/stoper.svg'); } .ikona-globus .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/globus.svg'); mask-image: url('../../inc/img/ikony/globus.svg'); } .ikona-osoba-pytanie .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/osoba-pytanie.svg'); mask-image: url('../../inc/img/ikony/osoba-pytanie.svg'); } .ikona-dymek .menu-ikona { -webkit-mask-image: url('../../inc/img/ikony/dymek.svg'); mask-image: url('../../inc/img/ikony/dymek.svg'); } /* Ikony z wtyczki Menu Icons (ikona wybierana przy pozycji w Wygląd > Menu). Wtyczka dokleja ikonę do tytułu pozycji ({TITLE} w szablonie walkera), więc pusty span .menu-ikona chowamy, a ikonę wtyczki ustawiamy jak naszą. Ikony fontowe biorą kolor z currentColor; wgrany SVG/obraz zostaje w swoim kolorze. */ li:has(._mi) .menu-ikona { display: none; } .nav-link ._mi { display: inline-block; flex-shrink: 0; width: 1.1875rem; height: 1.1875rem; margin: 0 0.875rem 0 0; font-size: 1.1875rem; line-height: 1; vertical-align: -0.2em; color: var(--color-primary-500); } .nav-link img._mi { object-fit: contain; } @media (min-width: 1280px) { .nav-link ._mi { width: 1.25rem; height: 1.25rem; font-size: 1.25rem; } } /* Pozycja widoczna tylko w menu mobilnym (np. "Dokumenty do pobrania"). Próg = breakpoint xl, od którego działa nawigacja desktopowa. */ @media (min-width: 80rem) { .ukryj-desktop { display: none; } } /* Wyróżniony link w kolumnie stopki ("Wszystkie specjalizacje"): złoty, pogrubiony, strzałka dokładana z CSS (klient wpisuje sam tekst). */ .link-wyrozniony { padding-bottom: 3px; } .link-wyrozniony > a { font-weight: 600; color: var(--color-accent-300); } .link-wyrozniony > a::after { content: "\2192"; content: "\2192" / ""; display: inline-block; margin-left: 0.3em; transition: transform 0.3s ease; } .link-wyrozniony > a:hover { color: var(--color-accent-200); } .link-wyrozniony > a:hover::after { transform: translateX(3px); } /* Granatowy kafelek "Wszystkie sprawy motoryzacyjne" na końcu panelu menu (klasa kafelek-wszystkie na pozycji). Bez ikony, biała strzałka widoczna zawsze, także w menu mobilnym. Reguły są poza @layer, więc wygrywają z klasami Tailwinda na szablonu; stoją po sekcji 4, więc nadpisują też podświetlenie bieżącej strony (.current-menu-item). */ [megamenu-panel] .kafelek-wszystkie > .nav-link { border-color: var(--color-primary-500); background-color: var(--color-primary-500); color: var(--color-white); } [megamenu-panel] .kafelek-wszystkie > .nav-link:hover { border-color: var(--color-primary-600); background-color: var(--color-primary-600); } [megamenu-panel] .kafelek-wszystkie > .nav-link:focus-visible { outline: 2px solid var(--color-accent-500); outline-offset: 2px; } [megamenu-panel] .kafelek-wszystkie .menu-ikona, [megamenu-panel] .kafelek-wszystkie ._mi { display: none; } [megamenu-panel] .kafelek-wszystkie .nav-link > svg { display: block; opacity: 1; color: var(--color-white); } /* === 9. TREŚĆ ARTYKUŁU OFERTY (.ofertaTresc) === */ /* Blok oferta-artykul: klient pisze treść zwykłymi blokami WP (nagłówki, akapity, listy, obraz, cytat), które nie mają klas Tailwinda, więc typografię daje ta sekcja. Selektory biorą tylko bezpośrednie dzieci strefy (> ...): nasze bloki wstawiane w treść (wpis-wazne, oferta-zrodla, oferta-autor) mają własne klasy i nie mogą dostać stąd rozmiarów ani kolorów. To samo DOM jest na froncie i w edytorze (useInnerBlocksProps nie dodaje wrappera), więc reguły działają w obu miejscach. Odstępy mają !important: editor.css cofa marginesy, paddingi i list-style bloków core do warstw Tailwinda (revert-layer), a na froncie block-library WP dokłada marginesy obrazom i cytatom. Element z marginesem ustawionym przez klienta w panelu bloku (inline style) jest pomijany. Wartości z Figmy: mobile / od 768px. */ .ofertaTresc { color: var(--color-secondary-700); font-size: 1rem; line-height: 1.75; } .ofertaTresc > * + *:not([style*="margin"]) { margin-top: 0.875rem !important; } .ofertaTresc > * + :is(ul, ol):not([style*="margin"]) { margin-top: 1rem !important; } .ofertaTresc > * + :is(figure, .wp-block-image):not([style*="margin"]) { margin-top: 2rem !important; } .ofertaTresc > * + .ofertaZrodla:not([style*="margin"]) { margin-top: 3rem !important; } .ofertaTresc > * + h2:not([style*="margin"]) { margin-top: 2.5rem !important; } .ofertaTresc > * + :is(h3, h4):not([style*="margin"]) { margin-top: 2.1875rem !important; } .ofertaTresc > :is(h3, h4) + *:not([style*="margin"]) { margin-top: 1rem !important; } .ofertaTresc > h2 + *:not([style*="margin"]) { margin-top: 1.25rem !important; } .ofertaTresc > :first-child:not([style*="margin"]) { margin-top: 0 !important; } .ofertaTresc > :is(h2, h3, h4) { color: var(--color-brand_dark); font-weight: 600; } .ofertaTresc > h2 { font-size: 2.5rem; line-height: 1.15; letter-spacing: -0.01em; } .ofertaTresc > h3 { font-size: 1.3125rem; line-height: 1.3; } .ofertaTresc > h4 { font-size: 1.125rem; line-height: 1.35; } .ofertaTresc > :is(p, ul, ol) { color: var(--color-secondary-700); font-size: 1rem; line-height: 1.75; } /* Wstęp: pierwszy akapit tuż pod otwierającym H2. */ .ofertaTresc > h2:first-child + p { color: var(--color-brand_dark); font-size: 1.0625rem; line-height: 1.65; } .ofertaTresc > ul { padding-left: 1.375rem !important; list-style: disc !important; } .ofertaTresc > ol { padding-left: 1.5rem !important; list-style: decimal !important; } .ofertaTresc > :is(ul, ol) > li { line-height: 1.7; } .ofertaTresc > :is(ul, ol) > li + li { margin-top: 0.5rem !important; } .ofertaTresc > :is(ul, ol) :is(ul, ol) { margin-top: 0.5rem !important; padding-left: 1.375rem !important; list-style: circle !important; } .ofertaTresc > :is(h2, h3, h4, p, ul, ol, blockquote) strong { color: var(--color-brand_dark); font-weight: 600; } .ofertaTresc > :is(h2, h3, h4, p, ul, ol, blockquote, figure) a { color: var(--color-primary-500); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; transition: color 0.3s; } .ofertaTresc > :is(h2, h3, h4, p, ul, ol, blockquote, figure) a:hover { color: var(--color-accent-900); } /* Obraz (core/image): kadr jak w Figmie, zdjęcie w innych proporcjach przycina się samo. */ .ofertaTresc > figure img { display: block; width: 100%; height: auto; aspect-ratio: 35 / 22; object-fit: cover; border-radius: 14px; } .ofertaTresc > figure figcaption { margin: 0.625rem 0 0 !important; color: var(--color-secondary-400); font-size: 0.875rem; line-height: 1.4; text-align: left; } /* Cytat (core/quote): w Figmie go nie ma, styl dopasowany do ramki Ważne. */ .ofertaTresc > blockquote { padding: 0.25rem 0 0.25rem 1.25rem !important; border-left: 3px solid var(--color-accent-500); } .ofertaTresc > blockquote p { color: var(--color-brand_dark); font-size: 1.0625rem; line-height: 1.65; } .ofertaTresc > blockquote p + p { margin-top: 0.75rem !important; } .ofertaTresc > blockquote cite { display: block; margin-top: 0.5rem; color: var(--color-secondary-400); font-size: 0.875rem; font-style: normal; } @media (min-width: 768px) { .ofertaTresc > * + :is(h3, h4):not([style*="margin"]) { margin-top: 2.9375rem !important; } .ofertaTresc > :is(h3, h4) + *:not([style*="margin"]) { margin-top: 1rem !important; } .ofertaTresc > h2 + *:not([style*="margin"]) { margin-top: 1.25rem !important; } .ofertaTresc > :first-child:not([style*="margin"]) { margin-top: 0 !important; } .ofertaTresc > * + h2:not([style*="margin"]) { margin-top: 3rem !important; } .ofertaTresc > h3 { font-size: 1.625rem; } .ofertaTresc > h4 { font-size: 1.25rem; } .ofertaTresc > :is(p, ul, ol) { font-size: 1.0625rem; } .ofertaTresc > h2:first-child + p { font-size: 1.1875rem; } .ofertaTresc > :is(ul, ol) > li + li { margin-top: 0.4375rem !important; } .ofertaTresc > figure img { aspect-ratio: 40 / 21; } .ofertaTresc > blockquote p { font-size: 1.1875rem; } } /* === 10. COOKIEYES (baner zgód, panel ustawień, przycisk powrotu) === Wtyczka wstrzykuje własne kolory inline, stąd !important. Wzorzec hoverów jak w przyciskach strony: obrysowy = lekkie tło, wypełniony = odcień 600. */ /* Biała obwódka: bez niej granatowy przycisk znika na granatowych sekcjach (CTA, stopka). */ .cky-btn-revisit-wrapper { background: var(--color-primary-500) !important; box-shadow: 0 0 0 2px var(--color-white), 0 6px 16px color-mix(in oklab, var(--color-primary-900) 25%, transparent); } .cky-btn { border-color: var(--color-primary-500) !important; background: var(--color-white) !important; color: var(--color-primary-500) !important; transition: background-color 0.3s ease, border-color 0.3s ease !important; } .cky-btn:hover { background: var(--color-light_blue-300) !important; } .cky-btn-accept { border-color: var(--color-primary-500) !important; background: var(--color-primary-500) !important; color: var(--color-white) !important; } .cky-btn-accept:hover { border-color: var(--color-primary-600) !important; background: var(--color-primary-600) !important; } .cky-switch input[type="checkbox"]:checked { background: var(--color-primary-500) !important; } .cky-notice-des a, .cky-preference-content-wrapper a, .cky-show-desc-btn, .cky-accordion-header-des a { color: var(--color-primary-500) !important; } /* === 11. ANIMACJE HERO STRONY GŁÓWNEJ === */ /* Łuk w hero strony głównej ma blady ślad (stroke-opacity 0.4 w markupie), a grupa .heroPromien (cienki rdzeń + rozmyta poświata, filtr SVG) wypełnia go od lewego do prawego końca, chwilę trwa pełna, gaśnie i cykl rusza od nowa. pathLength="100" pozwala liczyć w procentach długości łuku. */ .heroPromien { animation: kb-hero-promien-blask 8s ease-in-out infinite; } .heroPromien path { stroke-dasharray: 100 101; stroke-dashoffset: 100; animation: kb-hero-promien-ruch 8s cubic-bezier(0.45, 0, 0.25, 1) infinite; } @keyframes kb-hero-promien-ruch { 0% { stroke-dashoffset: 100; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @keyframes kb-hero-promien-blask { 0% { opacity: 1; } 70% { opacity: 1; } 88% { opacity: 0; } 100% { opacity: 0; } } /* Kółko w karcie "Konsultacje online": dwa pierścienie w kolorze akcentu rozchodzą się od kółka i gasną na przemian, jak sygnał "na żywo". */ .heroPuls { position: relative; } .heroPuls::before, .heroPuls::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; border: 1px solid var(--color-accent-500); opacity: 0; pointer-events: none; animation: kb-hero-puls 3.6s cubic-bezier(0.25, 0.6, 0.3, 1) infinite; } .heroPuls::after { animation-delay: 1.8s; } @keyframes kb-hero-puls { 0% { scale: 1; opacity: 0.6; } 70% { scale: 1.75; opacity: 0; } 100% { scale: 1.75; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .heroPuls::before, .heroPuls::after { display: none; } .heroPromien { display: none; } } /* === 12. OCENA W GWIAZDKACH === */ /* Grupa .gwiazdki ma pięć ikon gwiazdki i atrybut data-ocena z pola select bloku (5, 4.5, 4 ... 1). Gwiazdki ponad ocenę są przygaszone, a przy połówce lewa połowa gwiazdki zostaje pełna (maska z ostrą granicą w połowie). */ .gwiazdki[data-ocena="1"] svg:nth-of-type(n+2), .gwiazdki[data-ocena="2"] svg:nth-of-type(n+3), .gwiazdki[data-ocena="3"] svg:nth-of-type(n+4), .gwiazdki[data-ocena="4"] svg:nth-of-type(n+5), .gwiazdki[data-ocena="3.5"] svg:nth-of-type(n+5), .gwiazdki[data-ocena="2.5"] svg:nth-of-type(n+4), .gwiazdki[data-ocena="1.5"] svg:nth-of-type(n+3) { opacity: 0.25; } .gwiazdki[data-ocena="4.5"] svg:nth-of-type(5), .gwiazdki[data-ocena="3.5"] svg:nth-of-type(4), .gwiazdki[data-ocena="2.5"] svg:nth-of-type(3), .gwiazdki[data-ocena="1.5"] svg:nth-of-type(2) { -webkit-mask-image: linear-gradient(90deg, #000 50%, rgb(0 0 0 / 0.25) 50%); mask-image: linear-gradient(90deg, #000 50%, rgb(0 0 0 / 0.25) 50%); } /* === 13. TREŚĆ WPISU (.wpisTresc) === */ /* Treść wpisu (single.html) to zwykłe bloki WP albo blok Klasyczny: bez klas Tailwinda, więc typografię daje ta sekcja. Selektory biorą tylko BEZPOŚREDNIE dzieci treści (> ...), dlatego nasze wstawki kb/wpis-* i ich wewnętrzne p/ul/li zostają nietknięte. Ten sam zestaw reguł (wspólna lista selektorów w :is) działa w czterech miejscach: - front: div.wpisTresc z the_content (blok Klasyczny wypisuje p/h2/ul bez wrappera), - edytor bloków: .is-root-container (bezpośrednie dzieci treści), także na stronach, ale tam na najwyższym poziomie stoją nasze sekcje, więc reguły nie mają czego złapać, - edytor bloków, podgląd bloku Klasyczny: div w [data-type="core/freeform"] (WP 6.3+, edycja w oknie) albo .wp-block-freeform (starsze WP, edycja w miejscu), - okno edycji bloku Klasyczny: body TinyMCE dostaje klasę wpisTresc (inc/custom.php, sekcja 10). Odstępy mają !important: editor.css cofa marginesy, paddingi i list-style do warstw Tailwinda (revert-layer) selektorem o wyższej specyficzności, a block-library WP dokłada marginesy obrazom, cytatom i separatorom. Element z marginesem ustawionym przez klienta w panelu bloku (inline style) jest pomijany. Wartości: mobile / od 768px. */ :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(p, h2, h3, h4, ul, ol, figure, blockquote, hr, table):not([style*="margin"]) { margin: 0 !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > * + :is(p, h2, h3, h4, ul, ol, figure, blockquote, hr, table):not([style*="margin"]) { margin-top: 0.8rem !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > * + h2:not([style*="margin"]) { margin-top: 2.5rem !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > * + h3:not([style*="margin"]) { margin-top: 2rem !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > * + h4:not([style*="margin"]) { margin-top: 1.75rem !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > * + :is(figure, blockquote, table, [class*="wp-block-kb-wpis-"], [data-type^="kb/wpis-"]):not([style*="margin"]), :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(figure, blockquote, table, [class*="wp-block-kb-wpis-"], [data-type^="kb/wpis-"]) + :not([style*="margin"]):not(h2, h3, h4) { margin-top: 2.25rem !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > hr + p:not([style*="margin"]) { margin-top: 1.25rem !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :first-child:not([style*="margin"]) { margin-top: 0 !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(h2, h3, h4) { color: var(--color-brand_dark); font-family: var(--font-Archivo); font-weight: 600; letter-spacing: normal; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > h2 { font-size: 1.5625rem; line-height: 1.25; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > h3 { font-size: 1.25rem; line-height: 1.3; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > h4 { font-size: 1.125rem; line-height: 1.35; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(p, ul, ol) { color: var(--color-secondary-700); font-family: var(--font-Archivo); font-size: 1.03125rem; line-height: 1.75; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > ul { padding-left: 1.375rem !important; list-style: disc !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > ol { padding-left: 1.5rem !important; list-style: decimal !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(ul, ol) > li { line-height: 1.65; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(ul, ol) > li + li { margin-top: 0.625rem !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > ul > li::marker { color: var(--color-accent-500); } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > ol > li::marker { color: var(--color-brand_dark); font-weight: 700; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(ul, ol) :is(ul, ol) { margin-top: 0.625rem !important; padding-left: 1.375rem !important; list-style: circle !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(h2, h3, h4, p, ul, ol, blockquote, table) strong { color: var(--color-brand_dark); font-weight: 600; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(h2, h3, h4, p, ul, ol, blockquote, figure, table) a { color: var(--color-primary-500); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; transition: color 0.3s; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(h2, h3, h4, p, ul, ol, blockquote, figure, table) a:hover { color: var(--color-accent-900); } /* Obraz (core/image i obrazek wstawiony w bloku Klasyczny). */ :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > figure img, :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > p > img { max-width: 100%; height: auto; border-radius: 0.875rem; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > figure figcaption { margin: 0.75rem 0 0 !important; color: var(--color-secondary-400); font-size: 0.875rem; line-height: 1.5; text-align: left; } /* Tabela (core/table w figure.wp-block-table albo goła tabela z bloku Klasyczny). Ramka i przewijanie w poziomie na wrapperze, szeroka tabela nie rozpycha strony. */ :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > .wp-block-table { overflow-x: auto; border: 1px solid var(--color-light_blue-600); border-radius: 0.75rem; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > table { display: block; overflow-x: auto; border: 1px solid var(--color-light_blue-600); border-radius: 0.75rem; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > .wp-block-table table, :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > table { width: 100%; min-width: 38.75rem; border-collapse: collapse; table-layout: auto !important; font-family: var(--font-Archivo); } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(.wp-block-table, table) :is(th, td) { border: 0 !important; text-align: left; vertical-align: top; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(.wp-block-table, table) th { padding: 0.875rem 1.125rem; background: var(--color-light_blue-300); color: var(--color-secondary-400); font-size: 0.75rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(.wp-block-table, table) td { padding: 1rem 1.125rem; border-top: 1px solid var(--color-light_blue-600) !important; color: var(--color-secondary-700); font-size: 0.9375rem; line-height: 1.5; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(.wp-block-table, table) td:first-child { color: var(--color-brand_dark); font-weight: 600; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(.wp-block-table, table) td:nth-child(n+3) { color: var(--color-secondary-500); } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(.wp-block-table, table) :is(thead, tfoot) { border: 0 !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > .wp-block-table figcaption { margin: 0 !important; padding: 0.75rem 1.125rem; border-top: 1px solid var(--color-light_blue-600); color: var(--color-secondary-400); font-size: 0.875rem; line-height: 1.5; text-align: left; } /* Cytat (core/quote i blockquote z bloku Klasyczny). */ :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > blockquote { padding: 0 0 0 1.75rem !important; border: 0 !important; border-left: 2px solid var(--color-primary-500) !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > blockquote p { margin: 0 !important; color: var(--color-brand_dark); font-family: var(--font-Archivo); font-size: 1.25rem; font-weight: 500; line-height: 1.5; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > blockquote p + p { margin-top: 0.75rem !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > blockquote cite { display: block; margin-top: 0.75rem; color: var(--color-secondary-400); font-size: 0.875rem; font-style: normal; font-weight: 400; } /* Separator (core/separator, hr) i przypis pod nim, np. zastrzeżenie na końcu artykułu. */ :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > hr { height: 0; border: 0 !important; border-top: 1px solid var(--color-light_blue-600) !important; background: none !important; opacity: 1 !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > hr + p { color: var(--color-secondary-400); font-size: 0.875rem; line-height: 1.6; } @media (min-width: 768px) { :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > * + :is(p, h2, h3, h4, ul, ol, figure, blockquote, hr, table):not([style*="margin"]) { margin-top: 1.0625rem !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > * + h2:not([style*="margin"]) { margin-top: 3.5rem !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > * + h3:not([style*="margin"]) { margin-top: 2.5rem !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > * + h4:not([style*="margin"]) { margin-top: 2rem !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > * + :is(figure, blockquote, table, [class*="wp-block-kb-wpis-"], [data-type^="kb/wpis-"]):not([style*="margin"]), :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(figure, blockquote, table, [class*="wp-block-kb-wpis-"], [data-type^="kb/wpis-"]) + :not([style*="margin"]):not(h2, h3, h4) { margin-top: 2.25rem !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > hr + p:not([style*="margin"]) { margin-top: 1.25rem !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :first-child:not([style*="margin"]) { margin-top: 0 !important; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > h2 { font-size: 2rem; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > h3 { font-size: 1.5rem; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > h4 { font-size: 1.25rem; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > :is(p, ul, ol) { font-size: 1.125rem; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > hr + p { font-size: 0.875rem; } :is(.wpisTresc, .editor-styles-wrapper .is-root-container, .editor-styles-wrapper [data-type="core/freeform"] > div, .editor-styles-wrapper .wp-block-freeform) > blockquote p { font-size: 1.4375rem; } } /* Edytor bloków: blok Klasyczny to wrapper bez odpowiednika na froncie. Odstęp od sąsiadów jak akapit, zawartość w środku ma własny rytm (pierwszy element bez marginesu). */ .editor-styles-wrapper .is-root-container > * + [data-type="core/freeform"] { margin-top: 0.8rem !important; } @media (min-width: 768px) { .editor-styles-wrapper .is-root-container > * + [data-type="core/freeform"] { margin-top: 1.0625rem !important; } } /* Tytuł wpisu w edytorze bloków jak H1 w nagłówku single.html (text-[40px] md:text-5xl xl:text-[56px], semibold, leading 1.1, tracking -0.01em). */ .editor-styles-wrapper h1:is(.wp-block-post-title, .editor-post-title__input) { color: var(--color-brand_dark); font-family: var(--font-Archivo); font-size: 2.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; } @media (min-width: 768px) { .editor-styles-wrapper h1:is(.wp-block-post-title, .editor-post-title__input) { font-size: 3rem; } } @media (min-width: 1280px) { .editor-styles-wrapper h1:is(.wp-block-post-title, .editor-post-title__input) { font-size: 3.5rem; } }