/* Theme Name: Motyw Viamed Theme URI: n/a Template: kadence Author: Olga Zawisza - Kempińska Author URI: n/a Description: Motyw stworzony w celu rozbudowania wyszukiwarki usług i lekarzy Version: 1.0 License: GNU General Public License v3.0 (or later) License URI: https://www.gnu.org/licenses/gpl-3.0.html */ /* stylizacja obrazków np. w opisie poradni, stylów uywac samodzielnie */ .viamed-obrazek-sredni { overflow: hidden; border-radius: 10px; height: 400px; /* stała wysokość kontenera */ } .viamed-obrazek-sredni img { width: 100%; height: 100%; /* 100% z 400px rodzica */ object-fit: cover; /* wypełnia + kadruje */ object-position: center; /* kadr od środka */ } /* szersza strona — domyślnie Kadence daje 1290px */ :root { --global-content-width: 1500px; } /* ============================================= PASEK GÓRNY (top bar z telefonem i miastami) ============================================= */ /* WYJAŚNIENIE : display: flex → ustawia dzieci (kolumny) obok siebie w RZĘDZIE flex-direction: row → kierunek: od lewej do prawej align-items: center → wyrównuje elementy w PIONIE na środek justify-content: flex-start → elementy zaczynają od lewej strony gap: 20px → odstęp między kolumnami (20 pikseli) flex: 0 0 auto → trzy liczby oznaczają: 0 = nie rozciągaj się (flex-grow) 0 = nie kurcz się (flex-shrink) auto = szerokość dopasuj do zawartości (flex-basis) margin-left: auto → "wepchnij mnie i wszystko za mną na prawą stronę" (to jest SZTUCZKA flexboxa — auto margin zjada wolną przestrzeń) */ /* 1. Zamiana grida na flex w kontenerze kolumn ID paska na różnych stronach: 4887_4acc72-44 → viamed.pl (placówki) 3685_7fa6ff-c5 → czp2.viamed.pl 5366_438657-fb → lublin.viamed.pl */ .kb-row-layout-id4887_4acc72-44 > .kt-row-column-wrap, .kb-row-layout-id3685_7fa6ff-c5 > .kt-row-column-wrap, .kb-row-layout-id5366_438657-fb > .kt-row-column-wrap { display: flex; /* flexbox zamiast grid */ flex-direction: row; /* elementy w rzędzie */ align-items: center; /* wycentruj w pionie */ justify-content: flex-start; gap: 20px; padding: 8px 24px; max-width: none; /* bez limitu szerokości — pełna szerokość ekranu */ } /* 2. Każda kolumna: naturalny rozmiar, nie rozciągaj */ .kb-row-layout-id4887_4acc72-44 .wp-block-kadence-column, .kb-row-layout-id3685_7fa6ff-c5 .wp-block-kadence-column, .kb-row-layout-id5366_438657-fb .wp-block-kadence-column { flex: 0 0 auto; max-width: none; } /* 3. Trzecia kolumna (na produkcji: Lublin) — margin-left: auto pcha ją i pozostałe kolumny na PRAWĄ stronę. Jeśli zmienisz liczbę kolumn — zmień tu numer w nth-child() */ .kb-row-layout-id4887_4acc72-44 > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3), .kb-row-layout-id3685_7fa6ff-c5 > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3), .kb-row-layout-id5366_438657-fb > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3) { margin-left: auto; } /* 4. Tekst w pasku: nie łam na nowy wiersz */ .kb-row-layout-id4887_4acc72-44 .wp-block-kadence-advancedheading, .kb-row-layout-id3685_7fa6ff-c5 .wp-block-kadence-advancedheading, .kb-row-layout-id5366_438657-fb .wp-block-kadence-advancedheading { white-space: nowrap; font-size: 14px; } /* 5. Na telefonach: zawijaj elementy, pełna szerokość */ @media (max-width: 767px) { .kb-row-layout-id4887_4acc72-44 > .kt-row-column-wrap, .kb-row-layout-id3685_7fa6ff-c5 > .kt-row-column-wrap, .kb-row-layout-id5366_438657-fb > .kt-row-column-wrap { flex-wrap: wrap; /* pozwól zawijać na nowy wiersz */ justify-content: center; /* wycentruj na telefonie */ gap: 8px 16px; } .kb-row-layout-id4887_4acc72-44 > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3), .kb-row-layout-id3685_7fa6ff-c5 > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3), .kb-row-layout-id5366_438657-fb > .kt-row-column-wrap > .wp-block-kadence-column:nth-child(3) { margin-left: 0; /* wyłącz pchnięcie w prawo */ } } /* ============================================= MENU W STOPCE — klasa wielokrotnego użytku ============================================= Zastosowanie: - dla shortcode viamed_stopka_dynamiczna (Kadence Element → blok Nawigacja) - albo dla dowolnego innego menu w stopce/na stronie Jak użyć: w edytorze bloków Kadence wybierz blok Nawigacja → Zaawansowane → Dodatkowa klasa CSS → wpisz: viamed-menu-stopka */ /* Dwa selektory obok siebie (,) = "zastosuj to samo do obu przypadków": 1) .viamed-menu-stopka li a — dowolny w
  • , niezależnie od głębokości zagnieżdżenia. Działa dla klasycznych menu WordPressa (tam siedzi prosto w
  • ). 2) .viamed-menu-stopka a.kb-nav-link-content — specyficznie dla bloku Kadence Navigation, gdzie jest owinięte w
    i ma klasę .kb-nav-link-content. Ten selektor ma wyższą specyficzność (dwie klasy zamiast jednej), więc przebija własne style Kadence. */ /* Podwójna klasa .wp-block-kadence-navigation.viamed-menu-stopka to "kuloodporność": - DWIE klasy na tym samym elemencie = specyficzność (0,3,1) zamiast (0,2,1) - przebija wewnętrzne reguły Kadence niezależnie od kolejności ładowania CSS Drugi selektor (.viamed-menu-stopka li a) zachowujemy dla klasycznych menu WP, gdzie nie ma klasy .wp-block-kadence-navigation. */ .wp-block-kadence-navigation.viamed-menu-stopka a.kb-nav-link-content, .viamed-menu-stopka li a { padding: 1.7px 0; /* bez bocznego wcięcia; minimalny oddech góra/dół */ display: block; /* każdy link = osobna linia (jak
      klasycznego WP) */ /* UWAGA: tu NIE dajemy justify-content ani text-align — na desktopie linki mają być wyrównane do lewej (jak menu "Services"). Centrowanie uruchamia się tylko w @media (max-width: 767px) poniżej. */ } /* Mobile: wyrównaj menu do lewej strony stopki */ @media (max-width: 767px) { .wp-block-kadence-navigation.viamed-menu-stopka ul.kb-navigation { align-items: flex-start; /* w flex-column: dosuwa elementy do lewej */ } .wp-block-kadence-navigation.viamed-menu-stopka a.kb-nav-link-content, .viamed-menu-stopka li a { display: block; text-align: left; justify-content: flex-start; } } /* ============================================= STRONA GŁÓWNA HUBU (viamed.pl/) — ukrycie tytułu sekcji Usługi w stopce ============================================= Działa razem z filtrem body_class w functions.php, który dodaje do klasę viamed-glowna, gdy URL nie zawiera placówki. Wymaga: w Kadence Footer Builderze blok tytułu „Usługi" musi mieć Zaawansowane → Dodatkowa klasa CSS = viamed-stopka-tytul-uslugi. Sam shortcode [viamed_stopka_dynamiczna_uslugi] zwraca już pusty string na hubie — to CSS dokłada ukrycie samego nagłówka. */ body.viamed-glowna .viamed-stopka-tytul-uslugi { display: none; } /* ============================================= STRONA LEKARZA — wyrównanie treści do nagłówków ============================================= */ /* PROBLEM: Nagłówki h3 w Kadence Advanced Heading (Specjalizacja, Wykształcenie, Dostępność, itp.) mają padding-left: 16px → ich tekst zaczyna się 16 pikseli od lewej krawędzi kolumny. Treść pod nimi (paragrafy, listy) nie ma tego paddingu → zaczyna się od samej krawędzi kolumny, czyli 16px BARDZIEJ W LEWO niż nagłówek. Wizualnie wygląda to, jakby treść była "wysunięta" spod nagłówka. ROZWIĄZANIE: Dodajemy padding-left: 16px wszystkim bezpośrednim "dzieciom" kolumny które NIE są nagłówkami — żeby ich tekst startował z tej samej kolumny co tekst h3. SELEKTOR — rozbiór po kawałku: body.single-lekarz → tylko na stronach pojedynczego lekarza .kt-inside-inner-col → wewnętrzna kolumna Kadence :has(> h3) → TYLKO taka kolumna, która bezpośrednio zawiera nagłówek h3 (czyli sekcja "nagłówek + treść"). Inne kolumny Kadence na stronie nie są ruszane. > *:not(h3) → wszystkie bezpośrednie dzieci TEJ kolumny poza samym h3 (bo h3 już ma swój padding) */ body.single-lekarz .kt-inside-inner-col:has(> h3) > *:not(h3) { padding-left: 16px; } /* ============================================= HERO SLIDESHOW — automatyczna zmiana zdjęcia w tle sekcji (używane na /leczna/ — placówka i dla dzieci, i dla dorosłych) ============================================= */ /* ROZWIĄZANIE: - Tło "dla dzieci" zostaje ustawione standardowo w Kadence (Row → Background). - Pseudo-element ::after dokłada drugą warstwę z obrazem "dorośli" i animuje swoje opacity od 0 (niewidoczny) do 1 (widoczny). - Gdy ::after jest widoczny, zasłania tło Kadence → użytkownik widzi "dorosłych". Gdy znika, prześwituje "dzieci" z tła Kadence. - Treść Kadence (kolumny, nagłówki) leży nad wszystkim i jest nietknięta. CYKL 10 s: 0–4 s ::after niewidoczny → widać "dzieci" (tło Kadence) 4–5 s fade-in 5–9 s ::after widoczny → widać "dorosłych" 9–10 s fade-out (zapętlenie) JAK WŁĄCZYĆ: 1) Wiersz w Kadence dostaje klasę CSS "hero-slideshow" (Advanced → CSS Class) 2) W ustawieniach wiersza Background ustaw obraz "dla dzieci" (jak normalnie) */ .hero-slideshow { position: relative; /* kontekst dla pseudo-elementu absolutnie pozycjonowanego */ } .hero-slideshow-lubartow { position: relative; /* kontekst dla pseudo-elementu absolutnie pozycjonowanego */ } .hero-slideshow::after { content: ""; /* pseudo-element musi mieć content, choćby pusty */ position: absolute; inset: 0; /* skrót na top/right/bottom/left = 0 — wypełnia rodzica */ /* DWIE WARSTWY tła w jednej deklaracji: - PIERWSZA (na wierzchu) → gradient overlay, taki sam jak ten, którym Kadence przykrywa zdjęcie "dzieci" (jasnoszary z lewej, przezroczysty z prawej — dla czytelności nagłówka). - DRUGA (pod spodem) → zdjęcie "dorośli". Dzięki temu na obu zdjęciach (dzieci i dorośli) tekst po lewej leży na podobnie rozjaśnionym tle. */ background-image: linear-gradient(90deg, rgb(225, 235, 238) 23%, rgba(255, 255, 255, 0) 93%), url("/wp-content/uploads/2026/05/viamed-leczna-dorosli.jpg"); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; z-index: 0; /* nad tłem wiersza, ale pod treścią (kolumny mają z-index: 1) */ pointer-events: none; /* żeby nie przechwytywał klików nad tekstem */ animation: hero-fade 10s infinite ease-in-out; } .hero-slideshow-lubartow::after { content: ""; /* pseudo-element musi mieć content, choćby pusty */ position: absolute; inset: 0; /* skrót na top/right/bottom/left = 0 — wypełnia rodzica */ /* DWIE WARSTWY tła w jednej deklaracji: - PIERWSZA (na wierzchu) → gradient overlay, taki sam jak ten, którym Kadence przykrywa zdjęcie "dzieci" (jasnoszary z lewej, przezroczysty z prawej — dla czytelności nagłówka). - DRUGA (pod spodem) → zdjęcie "dorośli". Dzięki temu na obu zdjęciach (dzieci i dorośli) tekst po lewej leży na podobnie rozjaśnionym tle. */ background-image: linear-gradient(90deg, rgb(225, 235, 238) 23%, rgba(255, 255, 255, 0) 93%), url("/wp-content/uploads/2026/05/lubartow-viamed-dorosli-hero.jpg"); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; z-index: 0; /* nad tłem wiersza, ale pod treścią (kolumny mają z-index: 1) */ pointer-events: none; /* żeby nie przechwytywał klików nad tekstem */ animation: hero-fade 10s infinite ease-in-out; } @keyframes hero-fade { 0%, 40% { opacity: 0; } /* niewidoczny przez ~4 s — widać "dorosłych" */ 50%, 90% { opacity: 1; } /* widoczny przez ~4 s — widać "dzieci" */ 100% { opacity: 0; } /* powrót do niewidocznego (zapętlenie) */ } /* ============================================= KARTA PORADNI — układ pionowy na telefonie ============================================= Karty poradni na stronie głównej placówki (np. /leczna/) leżą w Kadence Row Layout jako kilka kolumn obok siebie. Na desktopie wygląda dobrze; na telefonie kolumny są ściśnięte, obrazek robi się malutki (~150px). WAŻNE — Kadence Row Layout NIE używa flexa do kolumn, tylko CSS Grid: .kt-row-column-wrap → display: grid; grid-template-columns: repeat(N, 1fr); Dlatego flex-direction NIC nie robi. Trzeba grid-template-columns: 1fr, żeby przełączyć z N kolumn na 1. Jak użyć — DWA równoważne sposoby (oba obsłużone): 1) Klasa karta-poradni na ZEWNĘTRZNYM Row Layout zawierającym kilka kart → wszystkie karty układają się pionowo 2) Klasa karta-poradni na KAŻDEJ kolumnie-karcie (Section z obrazkiem + tytułem + opisem + przyciskiem) → wymaga :has(), ale działa tak samo Desktop nieruszony — wszystko w mediach mobile (feedback_css_media_scope). */ @media (max-width: 767px) { /* Wariant 1: klasa na zewnętrznym Row Layout */ .karta-poradni.wp-block-kadence-rowlayout > .kt-row-column-wrap, /* Wariant 2: klasa na każdej karcie-kolumnie — przełącza grid rodzica */ .kt-row-column-wrap:has(> .wp-block-kadence-column.karta-poradni) { grid-template-columns: 1fr !important; } /* Obrazek w karcie — jednakowy rozmiar i kadr dla wszystkich 5 kart. Cele: - SZEROKOŚĆ ~85% karty (obrazek węższy niż tekst pod nim) - WSZYSTKIE 5 OBRAZKÓW W TYM SAMYM ROZMIARZE (ramka 4:3 + cover) - kadr przycięty zamiast rozciągnięcia (różne oryginały — od 1.1:1 do 1.78:1) UWAGA: Kadence używa własnej klasy figure .wp-block-kadence-image (NIE standardowego WP .wp-block-image). Wewnątrz jest jeszcze div .kb-is-ratio-image.kb-image-ratio-land43 trzymający proporcje 4:3 oraz sam w `position: absolute` (mechanizm proporcji Kadence). */ /* Figura — kontener obrazka. Zwężamy do 85% i centrujemy. Margines auto wyrównuje obrazek do środka karty. */ .karta-poradni .wp-block-kadence-image { width: 85% !important; max-width: 85% !important; margin-left: auto !important; margin-right: auto !important; } /* Wewnętrzny div trzymający proporcje 4:3 — pełna szerokość figury. Wysokość wynika z ratio (kb-image-ratio-land43 → 4:3 = 75% szerokości). */ .karta-poradni .wp-block-kadence-image .kb-is-ratio-image { width: 100% !important; } /* Sam — wypełnia kontener 4:3, kadr przycięty przez object-fit: cover. Bez tego obrazek wystawałby poza ramkę (każdy oryginał ma inne proporcje). */ .karta-poradni .wp-block-kadence-image img { width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover !important; } } /* ============================================= .pricelist-card — HERO obrazek na pojedynczym świadczeniu ============================================= ZASTOSOWANIE: - na obrazku WIODĄCYM (hero) na single świadczenia (np. lublin.viamed.pl/swiadczenie//) - w edytorze bloku obrazka (Kadence Advanced Image): Zaawansowane → Dodatkowa klasa CSS → wpisz: pricelist-card UWAGA O NAZWIE (historia 2026-05-25): Klasa pierwotnie miała być dla miniatur w listingu /cennik/. Po analizie produkcji okazało się że /cennik/ nie ma listingu z miniaturami — jest tekstowy. Klasa została przepisana na hero pojedynczego świadczenia. Nazwa pozostawiona, bo posty na produkcji już ją mają — łatwiej zmienić semantykę CSS niż klikać po wp-adminie każdego świadczenia. Jeśli kiedyś pojawi się listing kafelków cennika, dodamy osobną klasę .pricelist-thumb z innym CSS. CEL: - jednakowy rozmiar i kadr dla WSZYSTKICH hero-obrazków świadczeń - pełna szerokość kontenera treści (~1500 px na Kadence Viamed) - proporcje 21:9 (kinowe / banner) → przy 1500 px szer. wysokość ~643 px - object-fit: cover — kadr przycięty zamiast rozciągnięcia - zaokrąglone rogi 10 px (spójność z .viamed-obrazek-sredni) OBSŁUGUJE TRZY WARIANTY BLOKU: 1) Kadence Image z ratio wrapperem (blok ma ustawione proporcje w edytorze): figure.wp-block-kadence-image → div.kb-is-ratio-image → img 2) Kadence Image bez ratio wrappera (blok bez ustawionych proporcji): figure.wp-block-kadence-image → img (bezpośrednio) 3) Standardowy WP Image: figure.wp-block-image → img Reguła działa na WSZYSTKICH viewportach. */ /* Zewnętrzna ramka — wymuszamy pełną szerokość kontenera (zamiast szerokości intrinsic obrazka z atrybutu width). Bez tego figure ma naturalną szerokość obrazka (np. 1500 px), ale Kadence Image często ma ustawione user-defined max-width w bloku — to nadpisuje. */ .pricelist-card { width: 100% !important; max-width: 100% !important; } /* === Wariant 1: Kadence Image z ratio wrapperem === */ /* Warstwa 2: div trzymający proporcje. Nadpisujemy ratio z konfiguracji bloku Kadence (kb-image-ratio-XX) na nasze 21:9. border-radius + overflow: hidden TUTAJ, bo to ta warstwa kadruje obrazek. */ .pricelist-card .kb-is-ratio-image { aspect-ratio: 21 / 9 !important; width: 100% !important; border-radius: 10px; overflow: hidden; } /* Warstwa 3: sam . W Kadence ma position: absolute, więc width/height 100% = "wypełnij rodzica" (.kb-is-ratio-image). */ .pricelist-card .kb-is-ratio-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } /* === Warianty 2 i 3: img bezpośrednio w figure (bez ratio wrappera) === */ /* Sam jako bezpośrednie dziecko figure z klasą pricelist-card. Proporcje 21:9 wymuszamy bezpośrednio na obrazku przez aspect-ratio. To jest przypadek widziany na produkcji 2026-05-25 — Kadence Image bez ustawionych proporcji w edytorze renderuje TYLKO figure > img. */ .pricelist-card > img, img.pricelist-card { width: 100% !important; height: auto !important; aspect-ratio: 21 / 9; object-fit: cover; object-position: center; border-radius: 10px; display: block; }