/* 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 /home-2/ — ukrycie widżetów 2 i 3 w stopce ============================================= Klasa viamed-home-2 jest dodawana do przez filtr body_class w functions.php WYŁĄCZNIE na stronie o slugu home-2 (is_page('home-2')). Dzięki temu widżety 2 i 3 znikają tylko tutaj; na wszystkich innych stronach (placówki, pozostały hub) stopka zostaje kompletna. */ body.viamed-home-2 .footer-widget2, body.viamed-home-2 .footer-widget3 { 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-home { 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/06/viamed-leczna.jpeg"); 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; } /* STRONA GŁÓWNA (/home-2/) — osobna klasa, żeby w przyszłości móc zmienić zdjęcie bez ruszania Łęcznej i Lubartowa. Na razie to SAMO zdjęcie co Łęczna. Aby zmienić obraz dorosłych na home: podmień TYLKO URL w background-image. */ .hero-slideshow-home::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 */ background-image: linear-gradient(90deg, rgb(225, 235, 238) 23%, rgba(255, 255, 255, 0) 93%), url("/wp-content/uploads/2026/04/dzieci-tus-viamed-small.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; } } /* ========================================================================= Dane placówki — shortcode [viamed_placowka] (wtyczka viamed-placowki) Spójny format adresu/kontaktu wszędzie: stopka, strony poradni, sekcje kontaktu. Kolory dziedziczone z kontekstu (stopka/treść) — komponent zostaje neutralny. ========================================================================= */ .viamed-placowka { line-height: 1.5; } /* Każda informacja w osobnym akapicie — kasujemy domyślne marginesy motywu i dajemy jednolity, mały odstęp między wierszami. */ .viamed-placowka p { margin: 0 0 4px; } .viamed-placowka__nazwa { font-weight: 700; margin-bottom: 6px; } .viamed-placowka__adres { font-weight: 600; } /* Linki kontaktowe (telefon, e-mail) dziedziczą kolor — bez podkreślenia, podkreślenie na hover dla czytelności. */ .viamed-placowka a { color: inherit; text-decoration: none; } .viamed-placowka a:hover { text-decoration: underline; } /* Link „Zobacz na mapie" jako przycisk (forma wzorowana na hearandsay.org.au: pełne tło, białe pismo, zaokrąglenie 10px, generous padding) — w kolorach VIAMED. */ .viamed-placowka__mapa { display: inline-block; margin-top: 12px; padding: 14px 22px; background-color: #0047bb; color: #ffffff !important; font-weight: 600; font-size: 14px; line-height: 1; border-radius: 10px; text-decoration: none; transition: background-color 0.2s ease; } .viamed-placowka__mapa:hover, .viamed-placowka__mapa:focus { background-color: #009cde; color: #ffffff !important; text-decoration: none; } /* Wariant „karta" — pełny blok kontaktowy: trochę więcej powietrza między wierszami. */ .viamed-placowka--karta p { margin: 0 0 6px; }