/** * TourManager - front. * * Wzorce: kafelek wg lista.png, galeria wg galeria.png. * Kolor i typografia wg dokumentu "Identyfikacja wizualna: Andaluzja - Gibraltar". * Zmienne niżej są punktem wejścia dla motywu - nadpisz je zamiast selektorów. * * Lista selektorów to KORZENIE bloków. Każdy nowy blok renderowany samodzielnie * musi tu trafić, inaczej var() nie ma się z czego rozwiązać. Elementów * zagnieżdżonych (.tourmgr-card, .tourmgr-wa) NIE dopisuj - dziedziczą po * korzeniu, a redeklaracja zabiłaby nadpisania z motywu. */ /* -------------------------------------------------------------------------- * Fonty. Hostowane lokalnie, nie z CDN Google - odbiorca jest w UE, a strzał * do fonts.gstatic.com wysyła jego IP do Google (RODO). Zmienne warianty, * subset do łaciny z polskimi znakami: 21 kB + 29 kB na komplet wag. * * Nadpisanie --tourmgr-font-* w motywie sprawia, że te pliki w ogóle się nie * pobiorą - nieużyty @font-face nic nie kosztuje. * ------------------------------------------------------------------------ */ @font-face { font-family: 'Figtree'; src: url('fonts/Figtree.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Sans 3'; src: url('fonts/SourceSans3.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; } /* Gdzie ŻYJĄ ZMIENNE. Lista jest szersza niż przy resecie typografii niżej, bo [tourmgr_title], [tourmgr_short_desc] i [tourmgr_long_desc] renderują samotne elementy w widgecie Elementora - nie mają nad sobą żadnego korzenia wtyczki, więc bez dopisania ich tutaj var(--tourmgr-*) rozwiązywałby się w nic, a reguła koloru cicho by nie zadziałała. Do resetu typografii ich NIE dopisujemy - powód w komentarzu przy nim. */ .tourmgr-listing, .tourmgr-category, .tourmgr-gallery, .tourmgr-features, .tourmgr-related, .tourmgr-sections, .tourmgr-faq, .tourmgr-sticky, .tourmgr-cta, .tourmgr-lightbox, .tourmgr-langs, .tourmgr-nav, .tourmgr-title, .tourmgr-short-desc, .tourmgr-long-desc, .tourmgr-menu, .tourmgr-menu__panel, .tourmgr-menu__scrim, .tourmgr-wa, .tourmgr-heading, .tourmgr-text, .tourmgr-btn { /* Paleta źródłowa - siedem pigmentów. Nie używaj ich wprost w regułach, od tego są role niżej. */ --tourmgr-wapno: #faf6f0; --tourmgr-piasek: #e7dac5; --tourmgr-grafit: #2e3439; --tourmgr-azulejo: #2f5d8a; --tourmgr-niebo: #b7d0e3; --tourmgr-oliwka: #6d7b54; --tourmgr-terakota: #a8512f; /* Role. Wartości pochodne są policzone jako mieszanki palety - żeby do systemu nie wszedł ani jeden kolor spoza niego. Każda ma dwie deklaracje: literał (fallback) i color-mix. Starsza przeglądarka zatrzyma się na literale, nowsza policzy z palety - dzięki temu nadpisanie samego pigmentu wyżej faktycznie przestawia całą resztę, zamiast rozjeżdżać się z zapisanymi na sztywno wartościami. */ --tourmgr-text: var(--tourmgr-grafit); --tourmgr-muted: #666663; /* grafit -> piasek 30%, kontrast 5.35 */ --tourmgr-muted: color-mix(in srgb, var(--tourmgr-grafit) 70%, var(--tourmgr-piasek)); --tourmgr-border: #ede2d2; /* piasek -> wapno 30% */ --tourmgr-border: color-mix(in srgb, var(--tourmgr-piasek) 70%, var(--tourmgr-wapno)); --tourmgr-border-strong: var(--tourmgr-piasek); --tourmgr-surface: var(--tourmgr-wapno); --tourmgr-surface-alt: #f4eee3; /* wapno -> piasek 30% */ --tourmgr-surface-alt: color-mix(in srgb, var(--tourmgr-wapno) 70%, var(--tourmgr-piasek)); --tourmgr-empty: #f0e7d8; /* wapno -> piasek 55% */ --tourmgr-empty: color-mix(in srgb, var(--tourmgr-wapno) 45%, var(--tourmgr-piasek)); /* Hover: niebo to "kolor wydechu" - pod kursorem coś przestaje naciskać. */ --tourmgr-hover: #e6ebec; /* wapno -> niebo 30% */ --tourmgr-hover: color-mix(in srgb, var(--tourmgr-wapno) 70%, var(--tourmgr-niebo)); --tourmgr-on-dark: var(--tourmgr-wapno); --tourmgr-accent: var(--tourmgr-grafit); --tourmgr-link: var(--tourmgr-azulejo); --tourmgr-focus: var(--tourmgr-azulejo); --tourmgr-icon: var(--tourmgr-oliwka); /* Terakota jest tu jedynym kolorem, który cokolwiek uruchamia. Jej siła bierze się z samotności - jeśli dołożysz ją gdziekolwiek indziej, przestanie działać w CTA. Świadomie NIE jest to zieleń WhatsAppa (#25d366): nasycony kolor ekranowy czyta się jako przecena i zbiłby cały system. Rozpoznawalność niesie tu ikona, nie tło. Powrót do zieleni = nadpisz --tourmgr-cta. */ --tourmgr-cta: var(--tourmgr-terakota); --tourmgr-cta-hover: #924c31; /* terakota -> grafit 18% */ --tourmgr-cta-hover: color-mix(in srgb, var(--tourmgr-terakota) 82%, var(--tourmgr-grafit)); --tourmgr-cta-soft: #eddcd1; /* wapno -> terakota 16%, grafit na tym: 9.46 */ --tourmgr-cta-soft: color-mix(in srgb, var(--tourmgr-wapno) 84%, var(--tourmgr-terakota)); --tourmgr-cta-text: var(--tourmgr-wapno); /* Zieleń WhatsAppa - rozpoznawalność wygrywa tu z systemem kolorów. Uwaga na przyszłość: jasny tekst na #25d366 ma kontrast ok. 1.9, więc przy tym zestawieniu etykieta jest słabo czytelna. Zmiana na ciemniejszą zieleń brandową (#128c7e) podniosłaby go do ~4.1 bez utraty rozpoznawalności. */ --tourmgr-wa: #25d366; --tourmgr-wa-hover: #1db855; --tourmgr-wa-text: var(--tourmgr-wapno); /* Typografia: Figtree w nagłówkach, Source Sans 3 w treści. */ --tourmgr-font-heading: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --tourmgr-font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Skala pod odbiorcę 45-65 lat. Czytelność jest tu decyzją pozycjonującą, nie udogodnieniem - stąd większa baza niż zwykle. */ --tourmgr-fs-xs: 14px; --tourmgr-fs-sm: 16px; --tourmgr-fs-base: 17px; --tourmgr-fs-md: 20px; --tourmgr-fs-price: 26px; --tourmgr-fs-price-lg: 32px; --tourmgr-lh-body: 1.65; --tourmgr-radius: 16px; --tourmgr-radius-sm: 8px; --tourmgr-shadow: 0 1px 2px rgba(46, 52, 57, .05), 0 1px 3px rgba(46, 52, 57, .08); --tourmgr-shadow-hover: 0 4px 14px rgba(46, 52, 57, .11); --tourmgr-scrim: rgba(46, 52, 57, .5); --tourmgr-gap: 16px; } /* Reset typografii - lista CELOWO węższa niż przy zmiennych wyżej. font-size: 17px i font treści mają sens dla bloków, które budujemy w całości, ale [tourmgr_title] to

osadzany w cudzym szablonie: narzucenie mu tych wartości zbiłoby nagłówek do rozmiaru akapitu i podmieniło krój na Source Sans. Rozmiar i krój tytułu zostają po stronie motywu / Elementora - my dajemy tam tylko kolor. */ .tourmgr-listing, .tourmgr-category, .tourmgr-gallery, .tourmgr-features, .tourmgr-related, .tourmgr-sections, .tourmgr-faq, .tourmgr-sticky, .tourmgr-cta, .tourmgr-lightbox, .tourmgr-langs, .tourmgr-nav { box-sizing: border-box; color: var(--tourmgr-text); font-family: var(--tourmgr-font-body); font-size: var(--tourmgr-fs-base); line-height: var(--tourmgr-lh-body); } .tourmgr-listing *, .tourmgr-category *, .tourmgr-gallery *, .tourmgr-features *, .tourmgr-faq *, .tourmgr-sticky *, .tourmgr-langs *, .tourmgr-nav * { box-sizing: border-box; } .tourmgr-listing :focus-visible, .tourmgr-category :focus-visible, .tourmgr-gallery :focus-visible, .tourmgr-features :focus-visible, .tourmgr-sections :focus-visible, .tourmgr-faq :focus-visible, .tourmgr-sticky :focus-visible, .tourmgr-cta :focus-visible, .tourmgr-langs :focus-visible, .tourmgr-nav :focus-visible, .tourmgr-menu :focus-visible, .tourmgr-menu__panel :focus-visible, .tourmgr-btn:focus-visible { outline: 2px solid var(--tourmgr-focus); outline-offset: 2px; border-radius: 4px; } /* --------------------------------------------------------------------------- * Taby * ------------------------------------------------------------------------ */ .tourmgr-tabs-bar { display: flex; align-items: center; gap: 4px; margin: 0 0 24px; } .tourmgr-tabs { display: flex; flex: 1 1 auto; gap: 8px; margin: 0; padding: 2px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; /* Bez tego overflow-y liczy się jako `auto` (bo overflow-x != visible) i przy nawet 1px nadmiaru kółko myszy przewija taby zamiast strony - dokładnie ten sam problem, który rozwiązano na taśmie karuzeli. */ overflow-y: hidden; /* `safe center` zamiast `center`: przy zwykłym center przepełniona taśma centruje nadmiar po obu stronach i pierwsze taby stają się NIEDOSTĘPNE - nie da się do nich doscrollować. `safe` przełącza wtedy na start. Dwie deklaracje: przeglądarka bez `safe` odrzuci drugą i zostanie przy zwykłym center, czyli przy zachowaniu sprzed tej zmiany. */ justify-content: center; justify-content: safe center; } .tourmgr-tabs::-webkit-scrollbar { display: none; } /* Tab nie ma prawa się skurczyć - inaczej zamiast przewijania dostaniemy ściśnięte, nieczytelne etykiety. */ .tourmgr-tab { flex: 0 0 auto; } .tourmgr-tabs__nav { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--tourmgr-border); border-radius: 50%; cursor: pointer; } .tourmgr-tabs__nav, .tourmgr-tabs__nav:hover, .tourmgr-tabs__nav:focus, .tourmgr-tabs__nav:active { background: var(--tourmgr-surface) !important; color: var(--tourmgr-text) !important; } .tourmgr-tabs__nav:hover { border-color: var(--tourmgr-border-strong); } .tourmgr-tabs__nav:disabled { opacity: .35; cursor: default; } .tourmgr-tabs__nav svg { width: 16px; height: 16px; } @media (prefers-reduced-motion: reduce) { .tourmgr-tabs { scroll-behavior: auto; } } .tourmgr-tab { font-family: var(--tourmgr-font-heading); display: inline-flex; align-items: center; padding: 10px 20px; border: 1px solid var(--tourmgr-border); border-radius: 999px; background: var(--tourmgr-surface); color: var(--tourmgr-text); font-size: var(--tourmgr-fs-sm); font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .tourmgr-tab:hover, .tourmgr-tab:focus-visible { background: var(--tourmgr-cta-soft) !important; border-color: var(--tourmgr-cta); color: var(--tourmgr-text); } .tourmgr-tab.is-active, .tourmgr-tab.is-active:hover, .tourmgr-tab.is-active:focus { background: var(--tourmgr-cta) !important; border-color: var(--tourmgr-cta); color: var(--tourmgr-cta-text) !important; } /* --------------------------------------------------------------------------- * Lista * ------------------------------------------------------------------------ */ /* Kategoria dopisana do listingu, a nie skopiowana: obie mają ten sam hak aria-busy i tę samą sygnalizację ładowania, więc dwie kopie tej reguły rozjechałyby się przy pierwszej zmianie. */ .tourmgr-listing__panel, .tourmgr-category__panel { position: relative; transition: opacity .15s ease; } .tourmgr-listing__panel[aria-busy="true"], .tourmgr-category__panel[aria-busy="true"] { opacity: .45; pointer-events: none; } .tourmgr-cards { display: flex; flex-direction: column; gap: var(--tourmgr-gap); } .tourmgr-empty { margin: 0; padding: 48px 16px; border: 1px dashed var(--tourmgr-border); border-radius: var(--tourmgr-radius); color: var(--tourmgr-muted); text-align: center; } /* --------------------------------------------------------------------------- * Tytuł oferty ([tourmgr_title]) * ------------------------------------------------------------------------ */ /* Jedyna reguła dla tej klasy - świadomie sam kolor. Rozmiar, krój i wagę nagłówka zostawiamy motywowi/Elementorowi, bo

osadzasz w ich szablonie. Ten sam grafit co tytuły na kafelkach - tytuł oferty i tytuł na liście mają być tym samym kolorem. Zmienna działa tu tylko dlatego, że .tourmgr-title jest dopisany do listy korzeni zmiennych na górze pliku. */ .tourmgr-title { color: var(--tourmgr-text); } /* Jedyne odstępstwo od zasady "rozmiar zostawiamy motywowi": na telefonie nagłówek h1 z Elementora bywa liczony pod desktop i zjada pół ekranu. */ @media (max-width: 767px) { .tourmgr-title { font-size: 25px; } } /* --------------------------------------------------------------------------- * Kafelek (moduł 4) - wzór: lista.png * ------------------------------------------------------------------------ */ .tourmgr-card { display: grid; grid-template-columns: 40% 1fr; overflow: hidden; border: 1px solid var(--tourmgr-border); border-radius: var(--tourmgr-radius); background: var(--tourmgr-surface); box-shadow: var(--tourmgr-shadow); transition: box-shadow .18s ease; } .tourmgr-card:hover { box-shadow: var(--tourmgr-shadow-hover); } .tourmgr-card__media { position: relative; overflow: hidden; background: var(--tourmgr-surface-alt); aspect-ratio: 3 / 2; } .tourmgr-card__placeholder { display: block; width: 100%; height: 100%; background: var(--tourmgr-surface-alt); } /* Kafelek bez galerii (polecane): samo zdjęcie główne, bez taśmy i strzałek. */ .tourmgr-card__photo { display: block; width: 100%; height: 100%; } /* Dwie klasy celowo - powód ten sam co przy .tourmgr-gallery__img niżej: `.elementor img { height: auto }` ma (0,1,1) i rozbiłoby kadrowanie. */ .tourmgr-card .tourmgr-card__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .tourmgr-card__body { display: flex; flex-direction: column; padding: 24px; min-width: 0; } /* Kolejność pionowa: tytuł -> krótki opis -> cena -> cechy. */ .tourmgr-card__title { font-family: var(--tourmgr-font-heading); margin: 0 0 8px; font-size: var(--tourmgr-fs-md); font-weight: 700; line-height: 1.35; } .tourmgr-card__title a { display: -webkit-box; overflow: hidden; color: inherit; text-decoration: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; text-overflow: ellipsis; } /* (4) Hover ma wyglądać jak stan normalny. !important, bo `.elementor a:hover` ma wyższą specyficzność i sam też dokłada podkreślenie. Kolor MUSI siedzieć tutaj, a nie na .tourmgr-card__title: cały tekst tytułu jest w , a ta reguła i tak nadpisałaby h3 swoim !important. */ .tourmgr-card__title a, .tourmgr-card__title a:hover, .tourmgr-card__title a:focus, .tourmgr-card__title a:active { color: var(--tourmgr-text) !important; text-decoration: none !important; } .tourmgr-card__desc { margin: 0 0 16px; color: var(--tourmgr-muted); font-size: var(--tourmgr-fs-sm); line-height: 1.5; } /* (7) Sama cena i tytuł to za mało - nie widać, że kafelek jest klikalny. CTA siedzi w wierszu ceny, tak jak ustalone. */ .tourmgr-card__pricerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto 0 0; padding: 0 0 16px; } .tourmgr-card__cta { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border: 1px solid var(--tourmgr-cta); border-radius: 999px; background: var(--tourmgr-cta); font-family: var(--tourmgr-font-heading); font-size: var(--tourmgr-fs-xs); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } /* Świadomie NIE terakota: ten przycisk powtarza się na każdym kafelku, a terakota działa tylko dlatego, że jest sama. Zostaje dla rezerwacji. */ /* (1) Świadomie BEZ `.tourmgr-card:hover .tourmgr-card__cta` - przycisk ma reagować na najechanie na siebie, nie na dowolny punkt kafelka. */ .tourmgr-card__cta, .tourmgr-card__cta:hover, .tourmgr-card__cta:focus, .tourmgr-card__cta:active, .tourmgr-card__cta:visited { color: var(--tourmgr-cta-text) !important; } .tourmgr-card__cta { background: var(--tourmgr-cta) !important; } .tourmgr-card__cta:hover, .tourmgr-card__cta:focus-visible, .tourmgr-card__cta:active { background: var(--tourmgr-cta-hover) !important; border-color: var(--tourmgr-cta-hover); } .tourmgr-card__price { font-family: var(--tourmgr-font-heading); margin: 0; padding: 0; color: var(--tourmgr-oliwka); font-size: var(--tourmgr-fs-price); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; } .tourmgr-card__price .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; } .tourmgr-card__features { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--tourmgr-border); list-style: none; } .tourmgr-card__feature { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--tourmgr-fs-sm); font-weight: 600; } .tourmgr-card__feature-value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tourmgr-card .tourmgr-icon { display: block; flex: 0 0 auto; width: 18px; height: 18px; color: var(--tourmgr-icon); fill: currentColor; } /* --------------------------------------------------------------------------- * Karuzela (kafelek + mobilna galeria) * ------------------------------------------------------------------------ */ .tourmgr-carousel { position: relative; overflow: hidden; width: 100%; height: 100%; } .tourmgr-carousel__track { display: flex; height: 100%; scroll-snap-type: x mandatory; scroll-behavior: smooth; overflow-x: auto; /* Bez tego overflow-y liczy się jako `auto` (bo overflow-x != visible) i przy nawet 1px nadmiaru kółko myszy przewija taśmę zamiast strony. */ overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; } .tourmgr-carousel__track::-webkit-scrollbar { display: none; } .tourmgr-carousel__slide { display: block; flex: 0 0 100%; width: 100%; height: 100%; padding: 0; border: 0; background: none; scroll-snap-align: center; scroll-snap-stop: always; cursor: pointer; } .tourmgr-carousel .tourmgr-carousel__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } .tourmgr-carousel__nav { position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--tourmgr-scrim); color: var(--tourmgr-on-dark); cursor: pointer; opacity: .85; transform: translateY(-50%); transition: opacity .18s ease, background-color .18s ease; } .tourmgr-carousel__nav svg { width: 20px; height: 20px; } .tourmgr-carousel__nav--prev { left: 12px; } .tourmgr-carousel__nav--next { right: 12px; } /* Motywy stylują `button:hover/:focus/:active` - domykamy wszystkie stany, inaczej ikona przejmuje kolor motywu po kliknięciu. */ .tourmgr-carousel__nav, .tourmgr-carousel__nav:hover, .tourmgr-carousel__nav:focus, .tourmgr-carousel__nav:focus-visible, .tourmgr-carousel__nav:active { color: var(--tourmgr-on-dark) !important; } .tourmgr-carousel__nav { background: var(--tourmgr-scrim) !important; } .tourmgr-carousel__nav:hover, .tourmgr-carousel__nav:focus-visible, .tourmgr-carousel__nav:active { background: rgba(46, 52, 57, .72) !important; } .tourmgr-card:hover .tourmgr-carousel__nav, .tourmgr-carousel:hover .tourmgr-carousel__nav, .tourmgr-carousel:focus-within .tourmgr-carousel__nav { opacity: 1; } .tourmgr-carousel.is-single .tourmgr-carousel__nav, .tourmgr-carousel.is-single .tourmgr-carousel__counter { display: none; } /* Kropek nie ma nigdzie. Kafelek stracił je pierwszy - niósł obok licznik "1 / 13", a dwie wskazówki tego samego robiły więcej szumu niż pożytku. Galeria została wtedy pominięta, choć miała ten sam problem, i dodatkowo gorszy: kropki były ograniczone do 10, więc przy 13 zdjęciach mapowały pozycję proporcjonalnie i po prostu kłamały. Licznik jest dokładny. */ .tourmgr-carousel__counter { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(46, 52, 57, .62); color: var(--tourmgr-on-dark); font-size: var(--tourmgr-fs-xs); font-weight: 600; line-height: 1; pointer-events: none; } .tourmgr-carousel__counter svg { width: 15px; height: 15px; } /* --------------------------------------------------------------------------- * Paginacja * ------------------------------------------------------------------------ */ .tourmgr-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 28px; } .tourmgr-pagination__page, .tourmgr-pagination__arrow, .tourmgr-pagination__gap { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 8px; color: var(--tourmgr-text); font-size: var(--tourmgr-fs-sm); font-weight: 500; text-decoration: none; } .tourmgr-pagination__page:hover, .tourmgr-pagination__arrow:hover { background: var(--tourmgr-hover); } .tourmgr-pagination__page.is-active { background: var(--tourmgr-accent); color: var(--tourmgr-on-dark); font-weight: 700; } .tourmgr-pagination__arrow svg { width: 18px; height: 18px; } .tourmgr-pagination__arrow.is-disabled { color: var(--tourmgr-border); pointer-events: none; } .tourmgr-pagination__gap { color: var(--tourmgr-muted); pointer-events: none; } /* --------------------------------------------------------------------------- * Galeria (moduł 5.1) - wzór: galeria.png * ------------------------------------------------------------------------ */ .tourmgr-gallery__mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; aspect-ratio: 2.77 / 1; } .tourmgr-gallery__tile { position: relative; overflow: hidden; margin: 0; padding: 0; border: 0; border-radius: var(--tourmgr-radius-sm); background: var(--tourmgr-empty); cursor: pointer; } .tourmgr-gallery__tile.is-empty { cursor: default; pointer-events: none; } /* Kafel 1: lewa połowa, pełna wysokość. Kafle 2-5: siatka 2x2 po prawej. */ .tourmgr-gallery__tile--1 { grid-column: 1; grid-row: 1 / span 2; } /* Dwie klasy celowo: motywy i Elementor mają regułę `.elementor img { height: auto }` o specyficzności (0,1,1), która bije pojedynczą klasę (0,1,0) i rozjeżdża kadrowanie - obraz spada do własnych proporcji i zostają puste pasy. */ .tourmgr-gallery .tourmgr-gallery__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .35s ease; } .tourmgr-gallery__tile:hover .tourmgr-gallery__img { transform: scale(1.03); } .tourmgr-gallery__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; background: var(--tourmgr-scrim); } .tourmgr-gallery__overlay-text { color: var(--tourmgr-on-dark); font-size: clamp(14px, 1.15vw, 19px); font-weight: 700; line-height: 1.3; text-align: center; text-decoration: underline; text-underline-offset: 3px; } .tourmgr-gallery__mobile { display: none; } .tourmgr-gallery__mobile .tourmgr-carousel { border-radius: var(--tourmgr-radius-sm); aspect-ratio: 4 / 3; } @media (max-width: 1023px) { .tourmgr-gallery__mosaic { display: none; } .tourmgr-gallery__mobile { display: block; } } /* --------------------------------------------------------------------------- * Lightbox * ------------------------------------------------------------------------ */ .tourmgr-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(250, 246, 240, .98); opacity: 0; transition: opacity .2s ease; } .tourmgr-lightbox.is-open { opacity: 1; } .tourmgr-lightbox__stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 56px 16px; touch-action: pan-y; } .tourmgr-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; } .tourmgr-lightbox__btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--tourmgr-cta); color: var(--tourmgr-cta-text); cursor: pointer; transition: background-color .18s ease; } /* Wszystkie stany wypisane: inaczej `button:hover/:focus` z motywu przemaluje ikonę - i to bywa widoczne nawet bez kliknięcia, bo focus zostaje po otwarciu. */ .tourmgr-lightbox__btn, .tourmgr-lightbox__btn:hover, .tourmgr-lightbox__btn:focus, .tourmgr-lightbox__btn:focus-visible, .tourmgr-lightbox__btn:active { color: var(--tourmgr-cta-text) !important; } /* :focus-visible, nie :focus - focus zostaje po kliknięciu myszą (a w lightboxie jest nadawany programowo zaraz po otwarciu), więc na :focus przycisk wyglądałby na najechany, choć nikt na niego nie najechał. */ .tourmgr-lightbox__btn { background: var(--tourmgr-cta) !important; } .tourmgr-lightbox__btn:hover, .tourmgr-lightbox__btn:focus-visible, .tourmgr-lightbox__btn:active { background: var(--tourmgr-cta-hover) !important; } .tourmgr-lightbox__btn svg path, .tourmgr-lightbox__btn svg line { stroke: currentColor; } .tourmgr-lightbox__btn svg { width: 24px; height: 24px; } .tourmgr-lightbox__btn--close { top: 16px; right: 16px; } .tourmgr-lightbox__btn--prev { top: 50%; left: 16px; transform: translateY(-50%); } .tourmgr-lightbox__btn--next { top: 50%; right: 16px; transform: translateY(-50%); } .tourmgr-lightbox__counter { position: absolute; bottom: 20px; left: 50%; padding: 6px 14px; border-radius: 999px; background: var(--tourmgr-cta) !important; color: var(--tourmgr-cta-text) !important; font-family: var(--tourmgr-font-heading); font-size: var(--tourmgr-fs-xs); font-weight: 600; transform: translateX(-50%); } /* Zdjęcie nie ma prawa wejść pod strzałki. Padding 16px oddawał obraz w te same 16px, w których siedzą przyciski - stąd nachodzenie. 80px to 16px odstępu + 48px przycisku + 16px luzu. */ @media (min-width: 768px) { .tourmgr-lightbox__stage { padding: 76px 80px; } } /* Na telefonie strzałki schodzą na dół, a licznik ląduje MIĘDZY nimi. Powód: przy 48px przycisku po każdej stronie na zdjęcie zostawało kilkanaście procent szerokości ekranu - w pionie miejsca jest po prostu więcej. Padding sceny odcina trzy strefy naraz: górę pod krzyżyk (16 + 48 + 12), dół pod pasek strzałek z licznikiem, a env() dokłada pasek gestów iPhone'a. */ @media (max-width: 767px) { .tourmgr-lightbox__stage { padding: 76px 12px calc(80px + env(safe-area-inset-bottom, 0px)); } .tourmgr-lightbox__btn--prev, .tourmgr-lightbox__btn--next { top: auto; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: none; } .tourmgr-lightbox__btn--prev { left: 20px; } .tourmgr-lightbox__btn--next { right: 20px; } /* Ta sama wysokość i to samo `bottom` co przyciski - wtedy licznik siada z nimi w jednej linii bez dobierania marginesu na oko. */ .tourmgr-lightbox__counter { display: flex; align-items: center; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); min-height: 48px; margin: 0; } } html.tourmgr-lightbox-open { overflow: hidden; } /* --------------------------------------------------------------------------- * Cechy + CTA (moduł 5.2) * ------------------------------------------------------------------------ */ .tourmgr-features { padding: 24px; border: 1px solid var(--tourmgr-border); border-radius: var(--tourmgr-radius); background: var(--tourmgr-surface); } .tourmgr-features__price { font-family: var(--tourmgr-font-heading); margin: 0 0 20px; /* Pigment wprost, NIE var(--tourmgr-cta): rola CTA może zostać przestawiona na zieleń WhatsAppa (paleta wprost to przewiduje) i cena poszłaby za nią. Cena ma być terakotą niezależnie od tego, na co przemalujesz przyciski. */ color: var(--tourmgr-terakota); font-size: var(--tourmgr-fs-price-lg); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; } .tourmgr-features__price .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; } .tourmgr-features__list { margin: 0 0 20px; padding: 0; list-style: none; } .tourmgr-features__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--tourmgr-border); } .tourmgr-features__item:last-child { border-bottom: 0; } .tourmgr-features__label { display: inline-flex; align-items: center; gap: 10px; color: var(--tourmgr-muted); font-size: var(--tourmgr-fs-sm); } .tourmgr-features .tourmgr-icon { display: block; flex: 0 0 auto; width: 20px; height: 20px; color: var(--tourmgr-icon); fill: currentColor; } .tourmgr-features__value { font-size: var(--tourmgr-fs-sm); font-weight: 600; text-align: right; } /* --------------------------------------------------------------------------- * WhatsApp * ------------------------------------------------------------------------ */ .tourmgr-wa { font-family: var(--tourmgr-font-heading); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 999px; background: var(--tourmgr-wa); font-size: var(--tourmgr-fs-sm); font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color .18s ease; } .tourmgr-wa, .tourmgr-wa:hover, .tourmgr-wa:focus, .tourmgr-wa:active, .tourmgr-wa:visited { color: var(--tourmgr-wa-text) !important; } .tourmgr-wa { background: var(--tourmgr-wa) !important; } .tourmgr-wa:hover, .tourmgr-wa:focus-visible, .tourmgr-wa:active { background: var(--tourmgr-wa-hover) !important; } .tourmgr-wa--block { width: 100%; } /* .tourmgr-wa--contact jest CELOWO bez własnych kolorów: przycisk kontaktowy ma wyglądać identycznie jak "Zarezerwuj przez WhatsApp" na stronie oferty, czyli w firmowej zieleni z reguły bazowej wyżej. Klasa zostaje jako haczyk do przestylowania z motywu - gdybyś chciał ją przemalować, pamiętaj że reguła bazowa ma !important, więc potrzebujesz dwóch klas w selektorze (.tourmgr-wa.tourmgr-wa--contact), inaczej nie przebijesz specyficzności. */ .tourmgr-wa__icon { width: 20px; height: 20px; flex: 0 0 auto; } /* --------------------------------------------------------------------------- * FAQ (moduł 5.5) * ------------------------------------------------------------------------ */ /* (4) Cała sekcja FAQ jest jasna na życzenie - zakłada ciemne tło pod spodem (np. sekcja Elementora). Jeśli FAQ trafi na jasne tło, tekst zniknie: wtedy nadpisz --tourmgr-faq-text na var(--tourmgr-text). */ .tourmgr-faq { --tourmgr-faq-text: var(--tourmgr-on-dark); /* Tło nagłówka - ciemniejszy odcień oliwki, na której stoi cały blok. Tu grafit jest OK (inaczej niż w sekcjach): oliwka to kolor przygaszony, więc utrata nasycenia nie robi z niej kurzu, a nam zależy na przyciemnieniu. Rozwiązuje się do #59644b. Bonus: wapno na czystej oliwce ma kontrast 4.23, a na tym odcieniu 5.82, więc nagłówek czyta się lepiej niż tekst wokół. */ --tourmgr-faq-heading-bg: color-mix(in srgb, var(--tourmgr-oliwka) 68%, var(--tourmgr-grafit)); } /* Bliźniak .tourmgr-sections__heading-main - patrz komentarz tam. */ .tourmgr-faq__heading-main { display: inline-block; margin: 0 0 12px; padding: 6px 14px; border-radius: var(--tourmgr-radius-sm); background: var(--tourmgr-faq-heading-bg); color: var(--tourmgr-faq-text); font-family: var(--tourmgr-font-heading); font-size: var(--tourmgr-fs-price); font-weight: 700; line-height: 1.2; } /* (7) Zachowanie identyczne jak w sekcjach - różni się wyłącznie kolorem. */ .tourmgr-faq__item + .tourmgr-faq__item { border-top: 1px solid var(--tourmgr-faq-text); } .tourmgr-faq__heading { margin: 0; font-size: inherit; } /* white-space: normal na wypadek `button { white-space: nowrap }` z motywu. Bez min-width: 0 flex item nie zejdzie poniżej najdłuższego słowa - a piszemy po polsku ("zakwaterowanie", "ubezpieczenie"), więc to realne ryzyko. */ .tourmgr-faq__question { font-family: var(--tourmgr-font-heading); white-space: normal; display: flex; /* flex-start, nie center: przy tytule łamiącym się na trzy linie strzałka wyśrodkowana względem CAŁEGO bloku lądowała przy drugiej linii, wizualnie oderwana od początku zdania. Strzałka dostaje niżej wysokość jednej linii i sama centruje w niej ikonę - dzięki temu siada na wysokości pierwszej. */ align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 14px; border: 0; border-radius: var(--tourmgr-radius-sm); color: var(--tourmgr-faq-text); font-size: var(--tourmgr-fs-md); font-weight: 600; line-height: 1.4; text-align: left; cursor: pointer; } /* Jak .tourmgr-sections__title - lżejszy od triggera, cięższy od odpowiedzi. */ .tourmgr-faq__question-text { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; font-weight: 500; } /* Tło pytania jest przezroczyste ZAWSZE - w każdym stanie, także po kliknięciu. Trzy rzeczy naraz: 1. Wyliczony selektor ma specyficzność (0,3,0) i bije `.elementor button:focus` (0,2,1), które wpuszczało tu kolor motywu. 2. :focus MUSI być na liście osobno od :focus-visible. Bez tego po kliknięciu myszą przycisk zostawał w stanie :focus i motyw malował tło dopiero po zjechaniu kursorem - dopóki był hover, wygrywała reguła hovera. 3. box-shadow, bo część motywów udaje tło wewnętrznym cieniem. Klawiaturowy focus i tak rysuje własny outline (sekcja "Focus" na górze pliku). */ .tourmgr-faq[data-tourmgr-accordion] .tourmgr-faq__question, .tourmgr-faq[data-tourmgr-accordion] .tourmgr-faq__question:hover, .tourmgr-faq[data-tourmgr-accordion] .tourmgr-faq__question:focus, .tourmgr-faq[data-tourmgr-accordion] .tourmgr-faq__question:focus-visible, .tourmgr-faq[data-tourmgr-accordion] .tourmgr-faq__question:focus-within, .tourmgr-faq[data-tourmgr-accordion] .tourmgr-faq__question:active, .tourmgr-faq[data-tourmgr-accordion] .tourmgr-faq__item.is-open .tourmgr-faq__question { background: transparent !important; box-shadow: none !important; } .tourmgr-faq__question, .tourmgr-faq__question:hover, .tourmgr-faq__question:focus, .tourmgr-faq__question:focus-visible, .tourmgr-faq__question:active, .tourmgr-faq__question:hover .tourmgr-faq__question-text, .tourmgr-faq__question:focus .tourmgr-faq__question-text, .tourmgr-faq__question:active .tourmgr-faq__question-text { color: var(--tourmgr-faq-text) !important; } /* Powód wysokości 1.4em - patrz .tourmgr-sections__chevron. */ .tourmgr-faq__chevron { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; height: 1.4em; color: var(--tourmgr-faq-text); opacity: .7; transition: transform .2s ease; } .tourmgr-faq__chevron svg { width: 20px; height: 20px; } .tourmgr-faq__item.is-open .tourmgr-faq__chevron { transform: rotate(180deg); } .tourmgr-faq__answer { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1), visibility .3s; } .tourmgr-faq__item.is-open .tourmgr-faq__answer { grid-template-rows: 1fr; visibility: visible; } .tourmgr-faq__clip { overflow: hidden; min-height: 0; } .tourmgr-faq__answer-inner { padding: 10px 14px 22px; color: var(--tourmgr-faq-text); font-size: var(--tourmgr-fs-base); /* Jawne 400: bez tego waga leci z body motywu i relacja "pytanie cięższe od odpowiedzi" przestaje być gwarancją. */ font-weight: 400; line-height: var(--tourmgr-lh-body); } .tourmgr-faq__answer-inner > :first-child { margin-top: 0; } .tourmgr-faq__answer-inner > :last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- * Sticky bar (moduł 6) * ------------------------------------------------------------------------ */ .tourmgr-sticky { position: fixed; bottom: 0; left: 0; z-index: 9998; width: 100%; border-top: 1px solid var(--tourmgr-border); background: var(--tourmgr-surface); box-shadow: 0 -2px 12px rgba(16, 24, 40, .1); transform: translateY(100%); transition: transform .2s ease; } /* (1) Na desktopie CTA jest już w [tourmgr_features] - pasek tylko dublowałby je i zjadał wysokość ekranu. Zostaje tam, gdzie realnie pomaga: na mobile. */ @media (min-width: 768px) { .tourmgr-sticky { display: none; } } .tourmgr-sticky.is-visible { transform: translateY(0); } .tourmgr-sticky__inner { display: flex; align-items: center; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 12px 16px; } /* Cena zamiast tytułu. Miniatura i tytuł zniknęły z szablonu: pasek żyje tylko na telefonie, gdzie tytuł i tak kończył się wielokropkiem, a miniatura była ukrywana. Terakota bierze się z palety - podany #A8522E to praktycznie --tourmgr-terakota (#a8512f), a zmienna nadąży za paletą, gdyby się zmieniła. */ .tourmgr-sticky__price { flex: 0 1 auto; min-width: 0; margin: 0; color: var(--tourmgr-terakota); font-family: var(--tourmgr-font-heading); font-size: var(--tourmgr-fs-md); font-weight: 700; line-height: 1.2; white-space: nowrap; } /* WooCommerce lubi malować kwotę własnym kolorem - dwie klasy biją to bez !important. */ .tourmgr-sticky__price .woocommerce-Price-amount { color: inherit; font-size: inherit; font-weight: inherit; } .tourmgr-sticky .tourmgr-wa { flex: 0 0 auto; } /* Przycisk odchudzony, żeby cena zmieściła się w CAŁOŚCI. Rachunek na najgorszy przypadek ("12 345,00 €" + CTA) przy szerokości 320px: pełna etykieta dawała 445px, czyli 125px za dużo. Z krótką i tymi wartościami wychodzi ~300px. min-height pilnuje, żeby odchudzanie nie zjechało poniżej progu 44px, w który da się trafić palcem. */ @media (max-width: 767px) { .tourmgr-sticky__inner { /* Cena przy lewej krawędzi, przycisk przy prawej. Bez tego oba pakowały się do lewej i przycisk wisiał w środku paska. */ justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); } .tourmgr-sticky .tourmgr-wa { min-height: 44px; padding: 10px 14px; font-size: var(--tourmgr-fs-sm); } } /* --------------------------------------------------------------------------- * Przełącznik języka (moduł 8.6) * ------------------------------------------------------------------------ */ .tourmgr-langs { position: relative; display: inline-block; } .tourmgr-langs__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--tourmgr-border); border-radius: var(--tourmgr-radius-sm); line-height: 0; cursor: pointer; } /* Wszystkie stany wypisane: `.elementor button:hover` ma (0,2,1) i bez tego przemaluje przycisk na kolor motywu - dokładnie ten problem, przez który akordeony łapały fioletowe tło po kliknięciu. */ .tourmgr-langs__toggle, .tourmgr-langs__toggle:hover, .tourmgr-langs__toggle:focus, .tourmgr-langs__toggle:focus-visible, .tourmgr-langs__toggle:active { background: var(--tourmgr-surface) !important; color: var(--tourmgr-text) !important; } .tourmgr-langs__toggle:hover { border-color: var(--tourmgr-border-strong); } .tourmgr-langs__flag { display: block; flex: 0 0 auto; width: var(--tourmgr-flag-size, 24px); height: auto; border-radius: 2px; } .tourmgr-langs__chevron { flex: 0 0 auto; width: 14px; height: 14px; transition: transform .18s ease; } .tourmgr-langs.is-open .tourmgr-langs__chevron { transform: rotate(180deg); } .tourmgr-langs__list { position: absolute; top: 100%; left: 0; z-index: 30; /* width: max-content, a nie domyślne auto. Pudełko position: absolute liczy szerokość metodą shrink-to-fit względem swojego kontenera, a kontenerem jest tu wąski przycisk z samą flagą - lista dziedziczyła jego ciasnotę i nazwy wystawały poza białe tło. max-content znaczy "dokładnie tyle, ile potrzebuje najdłuższa pozycja", więc żaden język nie ma jak wystać. min-width trzyma listę co najmniej tak szeroką jak przycisk (gdyby nazwy były krótsze), a max-width nie pozwala jej wyjechać poza ekran telefonu - najdłuższa nazwa w katalogu to "Español (Argentina)", ale ktoś może dodać własny język albo podbić rozmiar flagi. */ width: max-content; min-width: 100%; max-width: min(78vw, 300px); margin: 4px 0 0; padding: 4px; border: 1px solid var(--tourmgr-border); border-radius: var(--tourmgr-radius-sm); background: var(--tourmgr-surface); box-shadow: var(--tourmgr-shadow-hover); list-style: none; } /* [hidden] to tylko display:none z arkusza przeglądarki, czyli (0,0,0) - position:absolute wyżej nie przeszkadza, ale gdyby ktoś dołożył tu display, lista wisiałaby otwarta przed pierwszym kliknięciem. Ta sama pułapka co przy panelu menu. */ .tourmgr-langs__list[hidden] { display: none; } /* Przełącznik ląduje zwykle w stopce, więc lista otwierana w dół wychodziłaby poza ekran. --up wymusza górę na sztywno, --auto zostawia decyzję JS-owi, który mierzy miejsce pod przyciskiem (klasa is-open/is-up). */ .tourmgr-langs--up .tourmgr-langs__list, .tourmgr-langs.is-up .tourmgr-langs__list { top: auto; bottom: 100%; margin: 0 0 4px; } /* Bez white-space: nowrap. Przy max-content lista i tak nie łamie nazw - rośnie do nich. Ale gdyby kiedyś dobiła do max-width, nowrap kazałby tekstowi znowu wystawać zamiast się złamać, czyli wróciłby dokładnie ten sam problem. */ .tourmgr-langs__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; font-size: var(--tourmgr-fs-sm); } .tourmgr-langs__item, .tourmgr-langs__item:hover, .tourmgr-langs__item:focus, .tourmgr-langs__item:active, .tourmgr-langs__item:visited { color: var(--tourmgr-text) !important; text-decoration: none !important; } .tourmgr-langs__item:hover, .tourmgr-langs__item:focus-visible { background: var(--tourmgr-surface-alt); } .tourmgr-langs__item.is-active { font-weight: 700; } @media (prefers-reduced-motion: reduce) { .tourmgr-langs__chevron { transition: none; } } /* --------------------------------------------------------------------------- * Nawigacja (moduł 9) * ------------------------------------------------------------------------ */ .tourmgr-nav__heading { font-family: var(--tourmgr-font-heading); margin: 0 0 12px; font-size: var(--tourmgr-fs-sm); font-weight: 700; } .tourmgr-nav__list { display: flex; gap: 8px 20px; margin: 0; padding: 0; list-style: none; } .tourmgr-nav--column .tourmgr-nav__list { flex-direction: column; } .tourmgr-nav--row .tourmgr-nav__list { flex-direction: row; flex-wrap: wrap; align-items: center; } /* inline-flex zamiast domyślnego inline: ikona ma stać obok etykiety i być wyrównana do jej środka, a nie do linii bazowej tekstu. Bez ikony zachowuje się jak wcześniej - gap nie ma na czym zadziałać. */ .tourmgr-nav__link { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-size: var(--tourmgr-fs-sm); text-decoration: none; transition: opacity .15s ease; } /* Podkreślenie na hover ma obejmować sam tekst, a nie ikonę - stąd osobny span wokół etykiety w szablonie. */ .tourmgr-nav__icon, .tourmgr-menu__icon { flex: 0 0 auto; width: 18px; height: 18px; object-fit: contain; } /* Podkreślenie siedzi na etykiecie, nie na linku. Link jest inline-flex, więc text-decoration pociągnęłoby kreskę przez całe pudełko - także pod ikoną. */ .tourmgr-nav__link:hover { color: var(--tourmgr-link); } .tourmgr-nav__link:hover .tourmgr-nav__label { text-decoration: underline; } .tourmgr-nav__link.is-active { font-weight: 700; } /* --------------------------------------------------------------------------- * Mobile: kafelek pionowo * ------------------------------------------------------------------------ */ @media (max-width: 767px) { .tourmgr-card { grid-template-columns: 1fr; } /* Na wąskim ekranie cena i przycisk obok siebie ściskają się nawzajem, a 9px paddingu to za mały cel dla kciuka. Rozdzielamy na dwa wiersze i dajemy CTA pełną szerokość - wtedy trafienie jest bezwarunkowe. */ .tourmgr-card__pricerow { flex-direction: column; align-items: stretch; gap: 12px; } .tourmgr-card__cta { padding: 13px 18px; font-size: var(--tourmgr-fs-sm); } .tourmgr-card__media { aspect-ratio: 4 / 3; } .tourmgr-card__body { padding: 16px; } .tourmgr-card__title { font-size: 18px; } .tourmgr-card__price { font-size: 22px; } .tourmgr-carousel__nav { width: 36px; height: 36px; } .tourmgr-features { padding: 16px; } .tourmgr-features__price { font-size: var(--tourmgr-fs-price); } } @media (prefers-reduced-motion: reduce) { .tourmgr-listing, .tourmgr-card, .tourmgr-gallery, .tourmgr-sticky, .tourmgr-lightbox, .tourmgr-faq, .tourmgr-carousel__track { scroll-behavior: auto; } .tourmgr-card, .tourmgr-card *, .tourmgr-gallery *, .tourmgr-sticky, .tourmgr-lightbox, .tourmgr-lightbox * { transition-duration: .01ms !important; } } /* -------------------------------------------------------------------------- * Sekcje opisu (akordeony) * ------------------------------------------------------------------------ */ /* (6) Kreski wyłącznie MIĘDZY pozycjami: selektor sąsiada daje to sam z siebie - pierwsza pozycja nie ma nic nad sobą, ostatnia nic pod sobą. Kolor bierzemy z koloru tytułu, żeby linia należała do tej samej rodziny co tekst. */ .tourmgr-sections__item + .tourmgr-sections__item { border-top: 1px solid var(--tourmgr-text); } /* Tło nagłówka. Mieszamy z TERAKOTĄ, nie z grafitem - to nie kaprys, tylko sedno sprawy: grafit (#2e3439) jest zimnym szaroniebieskim, więc zbijał nasycenie piasku z 41% na 18% i chip wychodził szary, czyli "brudny". Terakota to ten sam ciepły rejon co piasek, więc nasycenie zostaje 41% i chip czyta się jako głębszy piasek, a nie jako plama kurzu. Rozwiązuje się do #dfcab3: jasność 79% (piasek ma 84%), tekst 7.93. Chcesz głębiej - zejdź z 88% w dół, każde 2% to jeden odczuwalny krok. */ .tourmgr-sections { --tourmgr-sections-heading-bg: color-mix(in srgb, var(--tourmgr-piasek) 88%, var(--tourmgr-terakota)); } /* Nagłówek całego bloku (np. "Opis"). Bliźniak .tourmgr-faq__heading-main - różni się wyłącznie kolorem, bo sekcje stoją na jasnym tle, a FAQ na ciemnym. inline-block, żeby tło objęło sam tekst, a nie ciągnęło się przez całą szerokość bloku - zamień na `display: block`, jeśli chcesz pełny pas. */ .tourmgr-sections__heading-main { display: inline-block; margin: 0 0 12px; padding: 6px 14px; border-radius: var(--tourmgr-radius-sm); background: var(--tourmgr-sections-heading-bg); color: var(--tourmgr-text); font-family: var(--tourmgr-font-heading); font-size: var(--tourmgr-fs-price); font-weight: 700; line-height: 1.2; } /* Nagłówek pojedynczej pozycji (h3 opakowujący przycisk). */ .tourmgr-sections__heading { margin: 0; font-size: inherit; } .tourmgr-sections__trigger { font-family: var(--tourmgr-font-heading); white-space: normal; display: flex; /* flex-start, nie center: przy tytule łamiącym się na trzy linie strzałka wyśrodkowana względem CAŁEGO bloku lądowała przy drugiej linii, wizualnie oderwana od początku zdania. Strzałka dostaje niżej wysokość jednej linii i sama centruje w niej ikonę - dzięki temu siada na wysokości pierwszej. */ align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 14px; border: 0; border-radius: var(--tourmgr-radius-sm); color: var(--tourmgr-text); font-size: var(--tourmgr-fs-md); font-weight: 600; line-height: 1.4; text-align: left; cursor: pointer; } /* Trigger niesie 600, ale sam tytuł schodzi na 500: ma być lżejszy, a wciąż wyraźnie cięższy od treści pod spodem (ta jest przypięta do 400 niżej). */ .tourmgr-sections__title { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; font-weight: 500; } /* (5) Tło triggera jest przezroczyste ZAWSZE - dokładnie jak w FAQ, powody opisane przy .tourmgr-faq__question. Stan otwarty rozpoznaje się po strzałce i po treści, nie po podświetleniu. */ .tourmgr-sections[data-tourmgr-accordion] .tourmgr-sections__trigger, .tourmgr-sections[data-tourmgr-accordion] .tourmgr-sections__trigger:hover, .tourmgr-sections[data-tourmgr-accordion] .tourmgr-sections__trigger:focus, .tourmgr-sections[data-tourmgr-accordion] .tourmgr-sections__trigger:focus-visible, .tourmgr-sections[data-tourmgr-accordion] .tourmgr-sections__trigger:focus-within, .tourmgr-sections[data-tourmgr-accordion] .tourmgr-sections__trigger:active, .tourmgr-sections[data-tourmgr-accordion] .tourmgr-sections__item.is-open .tourmgr-sections__trigger { background: transparent !important; box-shadow: none !important; } .tourmgr-sections__trigger, .tourmgr-sections__trigger:hover, .tourmgr-sections__trigger:focus, .tourmgr-sections__trigger:focus-visible, .tourmgr-sections__trigger:active, .tourmgr-sections__trigger:hover .tourmgr-sections__title, .tourmgr-sections__trigger:focus .tourmgr-sections__title, .tourmgr-sections__trigger:active .tourmgr-sections__title { color: var(--tourmgr-text) !important; } /* height: 1.4em to DOKŁADNIE jedna linia tytułu - 1.4 to line-height triggera, a em liczy się od jego font-size, które strzałka dziedziczy. Żadnej magicznej liczby: zmiana rozmiaru czcionki triggera przesunie strzałkę razem z tekstem. */ .tourmgr-sections__chevron { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; height: 1.4em; color: var(--tourmgr-muted); transition: transform .2s ease; } .tourmgr-sections__chevron svg { width: 20px; height: 20px; } .tourmgr-sections__item.is-open .tourmgr-sections__chevron { transform: rotate(180deg); } .tourmgr-sections__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1), visibility .3s; } .tourmgr-sections__item.is-open .tourmgr-sections__panel { grid-template-rows: 1fr; visibility: visible; } /* Przycinanie i padding MUSZĄ być na osobnych elementach. Gdy siedzą razem, zwinięty panel nie schodzi do zera - grid ustawia wysokość na 0, ale padding zostaje i zabiera 32px. Efekt: kreska między pozycjami odsuwa się od jednego tytułu trzy razy dalej niż od drugiego. */ .tourmgr-sections__clip { overflow: hidden; min-height: 0; } /* Odstęp od nagłówka, żeby treść nie kleiła się do niego, i to samo wcięcie poziome co w triggerze - inaczej opis wygląda na zagnieżdżony. */ .tourmgr-sections__inner { padding: 10px 14px 22px; color: var(--tourmgr-text); font-size: var(--tourmgr-fs-sm); /* Jawne 400 - powód jak przy .tourmgr-faq__answer-inner. */ font-weight: 400; line-height: 1.7; } .tourmgr-sections__inner > :first-child { margin-top: 0; } .tourmgr-sections__inner > :last-child { margin-bottom: 0; } /* Skala pod telefon. --tourmgr-fs-price ma 26px i na desktopie jest w porządku, ale na wąskim ekranie nagłówek bloku i tytuł akordeonu robią się nieproporcjonalne do reszty. Wartości podane wprost, bo to punktowa korekta, a nie nowy krok skali. */ @media (max-width: 767px) { .tourmgr-sections__heading-main, .tourmgr-faq__heading-main { font-size: 25px; } .tourmgr-sections__title, .tourmgr-faq__question-text { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .tourmgr-sections__chevron, .tourmgr-sections__panel, .tourmgr-faq__answer { transition: none; } } /* -------------------------------------------------------------------------- * Polecane wycieczki * ------------------------------------------------------------------------ */ /* Styl inline (z atrybutu per_view) bije każdą regułę arkusza, także media query - dlatego szablon ustawia tylko wartość desktopową, a właściwą zmienną liczymy tutaj. Inaczej mobile zostawałoby na dwóch kafelkach. */ .tourmgr-related { --tourmgr-per-view: var(--tourmgr-per-view-desktop, 2); } .tourmgr-related__heading { margin: 0 0 16px; color: var(--tourmgr-text); font-family: var(--tourmgr-font-heading); font-size: var(--tourmgr-fs-price); font-weight: 700; line-height: 1.2; } /* Karuzela polecanych nie jest kadrem na zdjęcie jak ta w kafelku, tylko taśmą z kartami - stąd własna wysokość i prześwit między slajdami. */ .tourmgr-carousel--related { height: auto; overflow: visible; } .tourmgr-carousel--related .tourmgr-carousel__track { height: auto; gap: var(--tourmgr-gap); align-items: stretch; padding: 2px; } .tourmgr-related__slide { flex: 0 0 calc( ( 100% - ( var(--tourmgr-per-view) - 1 ) * var(--tourmgr-gap) ) / var(--tourmgr-per-view) ); scroll-snap-align: start; scroll-snap-stop: always; } .tourmgr-related__slide .tourmgr-card { height: 100%; } /* Kafelek polecanych przechodzi w PION już na tablecie, nie dopiero na telefonie. Rachunek, nie przeczucie: przy 2 kartach na widok układ poziomy oddaje 40% szerokości zdjęciu, więc na ciało zostaje 154px (768px) do 230px (1024px), a cena obok CTA potrzebuje 231px. CTA wychodziło poza kartę. W pionie ciało dostaje całą szerokość karty - 288px przy 768px - i wszystko wchodzi z zapasem. Listingu to nie dotyczy i dlatego reguła jest zawężona do .tourmgr-related__slide: tam kafelek zajmuje całą kolumnę i miejsca ma pod dostatkiem. CTA powiększone jak na telefonie: tablet to też ekran dotykowy, a 9px paddingu przy 14px czcionki daje ~35px wysokości, czyli poniżej progu 44px, w który da się trafić palcem. Cena i CTA zostają obok siebie - w pionie jest na to miejsce, a rozdzielanie ich na dwa wiersze robiłoby pustą kartę. */ @media (min-width: 768px) and (max-width: 1023px) { .tourmgr-related__slide .tourmgr-card { grid-template-columns: 1fr; } .tourmgr-related__slide .tourmgr-card__cta { padding: 13px 18px; font-size: var(--tourmgr-fs-sm); } } /* Hover nie podbija cienia. Taśma ma overflow-y: hidden - i to jest świadome (patrz komentarz przy .tourmgr-carousel__track: bez tego kółko myszy przewija taśmę zamiast strony), więc obcina wszystko, co wystaje poza kafelek. Cień bazowy ma 3px i nikt nie zauważy, że jest przycięty. Hover ma 14px rozmycia przy 4px przesunięcia, czyli wystaje na 18px - i ucina się płaską krawędzią, co wygląda jak błąd renderowania. Poszerzenie taśmy o padding dałoby cieniowi miejsce, ale rozjechałoby wyśrodkowanie strzałek i dołożyło 40px wysokości. Cień bazowy zostaje. */ .tourmgr-related__slide .tourmgr-card:hover { box-shadow: var(--tourmgr-shadow); } /* Te 16px w .tourmgr-card__pricerow istnieją po to, żeby odsunąć cenę od kreski nad listą cech - a kafelek polecanych cech nie ma (related.php woła szablon z show_features = false), więc jest to czysty martwy odstęp. Bez niego ostatni element siada 24px nad dolną krawędzią, symetrycznie do tytułu 24px pod górną; z nim było 40 na dole przy 24 na górze i karta wyglądała na przechyloną do góry. BEZ media query - i to jest poprawka. Wcześniej reguła siedziała w @media (min-width: 768px) z uzasadnieniem, że "na mobile kafelek przełącza się w układ pionowy i ta symetria przestaje mieć sens". To było błędne: padding ciała karty wynosi 24px z góry i z dołu niezależnie od tego, czy zdjęcie stoi obok czy nad treścią, więc martwy odstęp był martwy tak samo w pionie. */ .tourmgr-related__slide .tourmgr-card__pricerow { padding-bottom: 0; } /* Strzałki siedzą na bocznych krawędziach taśmy, wyśrodkowane w pionie względem kafelków. Wcześniej stały w nagłówku, bo na taśmie lądowały dokładnie na strzałkach galerii wewnątrz kafelka - ale kafelek polecanych nie ma już galerii (related.php woła szablon z show_gallery = false), więc kolizja znikła. Nagłówek jest teraz poza .tourmgr-carousel, żeby top: 50% liczyło się od kafelków, a nie od kafelków razem z nagłówkiem. Jasny styl zamiast przyciemnienia, bo tło pod spodem jest jasne. */ .tourmgr-carousel--related .tourmgr-carousel__nav { position: absolute; top: 50%; z-index: 2; opacity: 1; border: 1px solid var(--tourmgr-border-strong); background: var(--tourmgr-surface) !important; color: var(--tourmgr-text) !important; box-shadow: var(--tourmgr-shadow); } /* Połowa przycisku wychodzi poza taśmę (stąd overflow: visible wyżej): wjazd całym przyciskiem na kafelek przykrywałby CTA "Sprawdź ofertę", które siedzi przy prawej krawędzi karty. */ .tourmgr-carousel--related .tourmgr-carousel__nav--prev { left: 0; transform: translate(-50%, -50%); } .tourmgr-carousel--related .tourmgr-carousel__nav--next { right: 0; transform: translate(50%, -50%); } .tourmgr-carousel--related .tourmgr-carousel__nav:hover, .tourmgr-carousel--related .tourmgr-carousel__nav:focus-visible, .tourmgr-carousel--related .tourmgr-carousel__nav:active { background: var(--tourmgr-cta-soft) !important; border-color: var(--tourmgr-cta); } /* Wszystko widać naraz - strzałki nie mają dokąd przewijać. */ .tourmgr-related.is-few .tourmgr-carousel__nav { display: none; } @media (max-width: 767px) { /* Na wąskim ekranie dwie karty obok siebie byłyby nieczytelne; kafelek i tak przełącza się wtedy w układ pionowy. */ .tourmgr-related { --tourmgr-per-view: 1; } .tourmgr-related.is-few .tourmgr-carousel__nav { display: flex; } } /* -------------------------------------------------------------------------- * Menu główne ([tourmgr_menu]) * * Breakpoint 1023px, a nie 767px jak reszta pliku: pozioma listwa z sześcioma * pozycjami dusi się dużo wcześniej niż kafelek, a 1023 pokrywa się z domyślnym * tabletem Elementora - czyli z granicą, na której i tak przełączasz sekcje. * ------------------------------------------------------------------------ */ .tourmgr-menu { display: flex; align-items: center; } /* Listwa desktopowa */ .tourmgr-menu__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 0; padding: 0; list-style: none; } .tourmgr-menu__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tourmgr-font-heading); font-size: var(--tourmgr-fs-sm); font-weight: 500; white-space: nowrap; } /* color: inherit, żeby menu przejęło kolor nagłówka z Elementora - listwa bywa na jasnym i na ciemnym tle, a my nie wiemy na którym. !important, bo `.elementor a` i `.elementor a:hover` biją pojedynczą klasę. */ .tourmgr-menu__link, .tourmgr-menu__link:hover, .tourmgr-menu__link:focus, .tourmgr-menu__link:active, .tourmgr-menu__link:visited { color: inherit !important; text-decoration: none !important; } /* Jak w .tourmgr-nav__link: kreska pod tekstem, nie pod ikoną. */ .tourmgr-menu__link:hover .tourmgr-menu__label, .tourmgr-menu__link:focus-visible .tourmgr-menu__label, .tourmgr-menu__link.is-active .tourmgr-menu__label { text-decoration: underline !important; text-underline-offset: 5px; } /* Hamburger */ .tourmgr-menu__burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer; } .tourmgr-menu__burger, .tourmgr-menu__burger:hover, .tourmgr-menu__burger:focus, .tourmgr-menu__burger:active { background: transparent !important; color: inherit !important; } .tourmgr-menu__burger-box { display: flex; flex-direction: column; gap: 5px; width: 24px; } .tourmgr-menu__burger-bar { display: block; width: 100%; height: 2px; border-radius: 2px; background: currentColor; } @media (max-width: 1023px) { .tourmgr-menu__bar { display: none; } .tourmgr-menu__burger { display: inline-flex; } } /* Przesłona i panel. Oba są przenoszone przez JS do - patrz komentarz w menu.php. Dlatego NIE zagnieżdżamy ich pod .tourmgr-menu w selektorach. */ .tourmgr-menu__scrim { position: fixed; inset: 0; z-index: 10000; background: var(--tourmgr-scrim); opacity: 0; transition: opacity .25s ease; } .tourmgr-menu__scrim.is-open { opacity: 1; } .tourmgr-menu__panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 10001; display: flex; flex-direction: column; width: min(360px, 86vw); background: var(--tourmgr-surface); box-shadow: -4px 0 24px rgba(46, 52, 57, .18); transform: translateX(100%); transition: transform .28s ease; } /* [hidden] to tylko `display: none` z arkusza przeglądarki, czyli specyficzność (0,0,0) - `display: flex` wyżej by je przebiło i panel wisiałby na ekranie przed pierwszym otwarciem. */ .tourmgr-menu__panel[hidden], .tourmgr-menu__scrim[hidden] { display: none; } .tourmgr-menu__panel.is-open { transform: translateX(0); } .tourmgr-menu__panel-head { display: flex; flex: 0 0 auto; justify-content: flex-end; padding: 12px 12px 8px; } .tourmgr-menu__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; } .tourmgr-menu__close, .tourmgr-menu__close:hover, .tourmgr-menu__close:focus, .tourmgr-menu__close:active { background: transparent !important; color: var(--tourmgr-text) !important; } .tourmgr-menu__close svg { width: 22px; height: 22px; } /* Tylko lista pozycji się przewija - stopka z CTA ma zostać przyklejona do dołu panelu niezależnie od tego, ile jest pozycji. */ .tourmgr-menu__panel-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 0 12px; } .tourmgr-menu__panel-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .tourmgr-menu__panel-link { display: flex; align-items: center; gap: 10px; padding: 14px 20px; font-family: var(--tourmgr-font-heading); font-size: var(--tourmgr-fs-md); font-weight: 500; } .tourmgr-menu__panel-link, .tourmgr-menu__panel-link:hover, .tourmgr-menu__panel-link:focus, .tourmgr-menu__panel-link:active, .tourmgr-menu__panel-link:visited { color: var(--tourmgr-text) !important; text-decoration: none !important; } .tourmgr-menu__panel-link:hover, .tourmgr-menu__panel-link:focus-visible { background: var(--tourmgr-surface-alt); } .tourmgr-menu__panel-link.is-active { font-weight: 700; } /* Stopka panelu. env(safe-area-inset-bottom) na pasek gestów iPhone'a - bez tego CTA wchodzi pod niego i nie da się w nie trafić. */ .tourmgr-menu__panel-foot { flex: 0 0 auto; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--tourmgr-border); } @media (prefers-reduced-motion: reduce) { .tourmgr-menu__panel, .tourmgr-menu__scrim { transition: none; } } /* Blokada scrolla przy otwartym panelu. Osobna klasa od lightboxowej: oba overlaye są niezależne, a wspólna klasa znaczyłaby, że zamknięcie jednego odblokowuje scroll pod drugim. */ html.tourmgr-menu-open { overflow: hidden; } /* -------------------------------------------------------------------------- * Luźne bloki: [tourmgr_heading], [tourmgr_text], [tourmgr_button] * * Nagłówek i tekst są CELOWO prawie bez stylów - osadzasz je w cudzym szablonie, * więc rozmiar, krój i kolor mają zostać po stronie motywu/Elementora. To samo * podejście co przy .tourmgr-title. * ------------------------------------------------------------------------ */ /* Zero marginesu i paddingu na obu blokach. Sama wtyczka nigdy nic tu nie dokładała - odstęp wnosił

z motywu (`.elementor h2` ma (0,1,1), więc bije pojedynczą klasę - stąd !important). Problem w tym, że tego marginesu nie da się dosięgnąć z Elementora: widget Shortcode steruje opakowaniem, a nie elementem w środku. Po wyzerowaniu odstępy ustawiasz tam, gdzie powinny być - gapem kontenera albo marginesem widgetu. Nie dotyczy .tourmgr-btn: jego padding to wnętrze przycisku, nie odstęp, i tak masz go w panelu Styl. */ .tourmgr-heading, .tourmgr-text { margin: 0 !important; padding: 0 !important; } /* Znacznik