/* =========================================================================== SEKCJA WYBORU TERMINU NA LANDING PAGE --------------------------------------------------------------------------- Konwencja własna (BEM, polskie nazwy bloków), spójna z katalog2.css i szkolenia.css. CSS prototypu marketingu NIE jest przenoszony: stoi na .eldago-lp-terminy własnym resecie i własnych tokenach, a u nas wszystko siada w Kadence, gdzie dziedziczy się typografia, kontenery i skala odstępów. Prototyp jest wyrocznią WYGLĄDU, nie źródłem klas. Blok `wiersz` zamiast `termin`: `termin__data` i `termin__miejsca` już istnieją w szkolenia.css i znaczą co innego (elementy karty w katalogu). Zakresy by je rozdzieliły, ale ta sama nazwa w dwóch znaczeniach to pułapka dla kogoś, kto wróci do tego za pół roku. .eldago-lp-terminy PRZEŁĄCZANIE WARIANTU: PHP renderuje OBA komplety wierszy i wszystkie karty, a widoczność rozstrzyga się tutaj, na podstawie modyfikatora korzenia (--wariant-hybryda / --wariant-szkolenie). JS przestawia tylko ten modyfikator. =========================================================================== */.eldago-lp-terminy.eldago-lp-terminy { --lp-odstep: 1.5rem; --lp-promien: 14px; --lp-ramka: #e4e2dd; --lp-tlo-karty: #fff; --lp-tlo-sekcji: #f6f5f2; --lp-akcent: #111; --lp-wyrozniony-tlo: #17171a; --lp-wyrozniony-tekst: #fff; --lp-znacznik-tlo: #f5c518; --lp-cisza: #6b6b6b; box-sizing: border-box; padding: clamp(1.5rem, 4vw, 3rem) 0; } .eldago-lp-terminy *, .eldago-lp-terminy *::before, .eldago-lp-terminy *::after { box-sizing: inherit; } .eldago-lp-terminy__naglowek { margin: 0 0 .5em; line-height: 1.15; } .eldago-lp-terminy__lead { margin: 0 0 var(--lp-odstep); max-width: 60ch; color: var(--lp-cisza); } /* --- siatka kart --------------------------------------------------------- */ .eldago-lp-terminy__plany { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: var(--lp-odstep); } /* Trzy karty od szerokości, na której zmieszczą się bez ściskania tekstu; przy dwóch kartach (szkolenie tylko w pakiecie) auto-fit zrobi dwie. */ @media (min-width: 900px) {.eldago-lp-terminy__plany { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } .eldago-lp-terminy .plan { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; border: 1px solid var(--lp-ramka); border-radius: var(--lp-promien); background: var(--lp-tlo-karty); } .eldago-lp-terminy .plan--wyrozniony { /* Karta pakietu jest POLECANA — stąd żółta obwódka i plakietka. Ciemne tło to co innego: oznacza WYBRANY wariant i wędruje razem z wyborem (patrz `.plan--wybrany` niżej). Zaszycie ciemnego tła na karcie pakietu mieszało dwa znaczenia w jednym stylu. */ border-color: var(--lp-znacznik-tlo); box-shadow: 0 0 0 1px var(--lp-znacznik-tlo); } /* --- karta wybrana: ciemne tło wędruje za wyborem --- */ .eldago-lp-terminy--wariant-hybryda .plan--hybryda, .eldago-lp-terminy--wariant-szkolenie .plan--szkolenie { background: var(--lp-wyrozniony-tlo); border-color: var(--lp-wyrozniony-tlo); box-shadow: none; color: var(--lp-wyrozniony-tekst); } /* Kadence nadaje nagłówkom własny kolor, .eldago-lp-terminy więc `color` na karcie go NIE przebija — tytuł na ciemnym tle robił się nieczytelny. Stąd jawna reguła. */ .eldago-lp-terminy--wariant-hybryda .plan--hybryda .plan__tytul, .eldago-lp-terminy--wariant-szkolenie .plan--szkolenie .plan__tytul { color: var(--lp-wyrozniony-tekst); } .eldago-lp-terminy--wariant-hybryda .plan--hybryda .plan__opis, .eldago-lp-terminy--wariant-szkolenie .plan--szkolenie .plan__opis, .eldago-lp-terminy--wariant-hybryda .plan--hybryda .plan__omnibus, .eldago-lp-terminy--wariant-szkolenie .plan--szkolenie .plan__omnibus, .eldago-lp-terminy--wariant-hybryda .plan--hybryda .plan__cena-stara, .eldago-lp-terminy--wariant-szkolenie .plan--szkolenie .plan__cena-stara { color: rgba(255, 255, 255, .72); } .eldago-lp-terminy .plan__tytul { margin: 0; font-size: 1.15rem; line-height: 1.25; } .eldago-lp-terminy .plan__opis { margin: 0; color: var(--lp-cisza); } .eldago-lp-terminy .plan__cena { /* Cena NIE jest już rozpychaczem — od dołu karty odpycha `.plan__akcja`. Wcześniej `margin-top: auto` siedziało tutaj, więc do dołu zjeżdżała cena razem z resztą, a pod przyciskiem zostawała pusta przestrzeń. */ margin: 0; padding-top: .75rem; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.1; display: flex; align-items: baseline; flex-wrap: wrap; gap: .4em; } .eldago-lp-terminy .plan__od { font-size: .55em; font-weight: 400; color: var(--lp-cisza); } .eldago-lp-terminy .plan__cena-stara { font-size: .5em; font-weight: 400; text-decoration: line-through; color: var(--lp-cisza); } .eldago-lp-terminy .plan__znacznik { margin: 0; /* `inline-block`, a nie `align-self` — plakietka siedzi teraz w slocie (zwykły blok), gdzie `align-self` nic nie znaczy, więc akapit rozciągał się na całą szerokość karty. Szerokość ma wynikać z tekstu, niezależnie od tego, czy rodzicem jest flex, grid czy blok. */ display: inline-block; align-self: flex-start; padding: .15em .6em; border-radius: 999px; background: var(--lp-znacznik-tlo); color: #111; font-size: .75rem; font-weight: 600; line-height: 1.6; } .eldago-lp-terminy .plan__znacznik--rabat { font-size: .45em; } .eldago-lp-terminy .plan__omnibus { margin: 0; font-size: .8rem; line-height: 1.4; color: var(--lp-cisza); } .eldago-lp-terminy .plan__link, .eldago-lp-terminy .plan__wybor { display: inline-flex; align-items: center; gap: .4em; padding: .6em 1.1em; border: 1px solid currentColor; border-radius: 12px; background: transparent; color: inherit; font: inherit; cursor: pointer; text-decoration: none; } /* Przycisk wybranej karty: żółta pigułka, jak w makiecie. */ .eldago-lp-terminy--wariant-hybryda .plan--hybryda .plan__wybor, .eldago-lp-terminy--wariant-szkolenie .plan--szkolenie .plan__wybor { background: var(--lp-znacznik-tlo); border-color: var(--lp-znacznik-tlo); color: #111; font-weight: 600; } /* --- kółko radio i etykieta przycisku --- */ .eldago-lp-terminy .plan__radio { flex: 0 0 auto; width: 1.05em; height: 1.05em; border: 2px solid currentColor; border-radius: 50%; /* Wypełnienie pojawia się dopiero na karcie wybranej. */ box-shadow: inset 0 0 0 0 currentColor; transition: box-shadow .12s ease; } .eldago-lp-terminy--wariant-hybryda .plan--hybryda .plan__radio, .eldago-lp-terminy--wariant-szkolenie .plan--szkolenie .plan__radio { box-shadow: inset 0 0 0 .18em currentColor; } /* Obie etykiety przychodzą z PHP; CSS pokazuje właściwą. Dzięki temu napis jest poprawny także przy wyłączonym JavaScripcie. */ .eldago-lp-terminy .plan__wybor-aktywny { display: none; } .eldago-lp-terminy--wariant-hybryda .plan--hybryda .plan__wybor-tekst, .eldago-lp-terminy--wariant-szkolenie .plan--szkolenie .plan__wybor-tekst { display: none; } .eldago-lp-terminy--wariant-hybryda .plan--hybryda .plan__wybor-aktywny, .eldago-lp-terminy--wariant-szkolenie .plan--szkolenie .plan__wybor-aktywny { display: inline; } /* Kreska nad przyciskiem, jak w makiecie. */ .eldago-lp-terminy .plan__akcja { /* `margin-top: auto` przykleja kreskę i przycisk do dołu karty, dzięki czemu przyciski wszystkich kart stoją w jednej linii niezależnie od długości opisu i od tego, czy karta ma zdanie o Omnibusie. */ margin-top: auto; border-top: 1px solid var(--lp-ramka); padding-top: 1rem; } .eldago-lp-terminy--wariant-hybryda .plan--hybryda .plan__akcja, .eldago-lp-terminy--wariant-szkolenie .plan--szkolenie .plan__akcja { border-top-color: rgba(255, 255, 255, .18); } /* Wezwanie do działania zamiast przycisku wyboru — używane tylko tam, gdzie nie ma czego wybierać (szkolenie sprzedawane wyłącznie w pakiecie). */ .eldago-lp-terminy .plan__cta { display: inline-flex; align-items: center; gap: .4em; padding: .6em 1.1em; border-radius: 12px; background: var(--lp-znacznik-tlo); color: #111; font-weight: 600; text-decoration: none; } .eldago-lp-terminy .plan__cta:hover, .eldago-lp-terminy .plan__cta:focus-visible { text-decoration: none; opacity: .88; } .eldago-lp-terminy .plan__admin { margin: 0; font-size: .8rem; color: #b26a00; } /* --- sloty kart i wyrównanie cen ----------------------------------------- */ /* Każda karta ma ten sam komplet slotów (także pustych), więc może dzielić wiersze z siatką rodzica. Dzięki temu ceny wszystkich kart leżą w jednej linii niezależnie od długości opisu — tak jak w makiecie. */ .eldago-lp-terminy .plan__slot { display: block; min-width: 0; } .eldago-lp-terminy .plan__slot--znacznik:empty, .eldago-lp-terminy .plan__slot--omnibus:empty { /* Pusty slot nie może zniknąć — trzyma wiersz — ale nie ma też zabierać miejsca ponad to, co konieczne. */ min-height: 0; } /* Tylko przy kartach obok siebie. W jednej kolumnie nie ma czego wyrównywać, a podgrid rozbiłby wtedy naturalny układ karty. */ @media (min-width: 900px) { @supports (grid-template-rows: subgrid) { .eldago-lp-terminy .eldago-lp-terminy__plany { grid-template-rows: repeat(6, auto); } .eldago-lp-terminy .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; gap: .5rem; } } } /* --- lista terminów ------------------------------------------------------ */ .eldago-lp-terminy__lista { display: flex; flex-direction: column; gap: .5rem; } .eldago-lp-terminy .wiersz { display: grid; gap: .25rem .75rem; grid-template-columns: 1fr auto; align-items: center; padding: 1rem 1.25rem; border: 1px solid var(--lp-ramka); border-radius: var(--lp-promien); background: var(--lp-tlo-karty); /* Układ mobilny wg makiety: data i cena w jednej linii, miasto i opis pod nimi na całą szerokość, licznik miejsc i przycisk na dole. Automatyczne rozmieszczanie układało to parami, bez związku z ważnością treści. */ grid-template-areas: "data ceny" "miasto miasto" "opis opis" "miejsca akcja" "omni omni"; } /* Przypisania obszarów obowiązują w OBU układach — różnią się tylko siatki. */ .eldago-lp-terminy .wiersz__data { grid-area: data; } .eldago-lp-terminy .wiersz__miasto { grid-area: miasto; } .eldago-lp-terminy .wiersz__opis { grid-area: opis; } .eldago-lp-terminy .wiersz__miejsca { grid-area: miejsca; } .eldago-lp-terminy .wiersz__ceny { grid-area: ceny; } .eldago-lp-terminy .wiersz__akcja { grid-area: akcja; } .eldago-lp-terminy .wiersz__omnibus { grid-area: omni; } @media (min-width: 760px) { .eldago-lp-terminy .wiersz { /* Kolumny o STAŁYCH szerokościach w miejscach, gdzie treść bywa różnej długości (miejsca, cena). Inaczej wiersz z promocją rozpychał kolumnę ceny i licznik miejsc wędrował w lewo tylko w tym jednym wierszu. */ grid-template-columns: 7em minmax(8em, 1fr) minmax(0, 1.4fr) 10em 8em auto; grid-template-areas: "data miasto opis miejsca ceny akcja" "omni omni omni omni omni omni"; } /* Na szerokim ekranie data stoi we własnej kolumnie i nie musi krzyczeć. */ .eldago-lp-terminy .wiersz__data { font-size: 1rem; } .eldago-lp-terminy .wiersz__rezerwuj { padding: .6em 1.2em; font-size: 1rem; } } .eldago-lp-terminy .wiersz p { margin: 0; } /* Na wąskim ekranie data jest NAJWAŻNIEJSZĄ informacją w wierszu — to po niej klient wybiera. Miasto jest przy tych szkoleniach zawsze to samo, więc nie ma powodu, żeby rzucało się w oczy bardziej niż termin. */ .eldago-lp-terminy .wiersz__data { font-weight: 700; font-size: 1.2rem; line-height: 1.2; } .eldago-lp-terminy .wiersz__miasto { font-weight: 500; font-size: .95rem; } .eldago-lp-terminy .wiersz__opis, .eldago-lp-terminy .wiersz__miejsca { color: var(--lp-cisza); font-size: .9rem; } .eldago-lp-terminy .wiersz__cena { font-weight: 700; font-size: 1.1rem; white-space: nowrap; } /* Cena promocyjna, pod nią regularna — jak w makiecie. Wyrównanie do prawej krawędzi komórki, żeby liczby układały się w kolumnę między wierszami. */ .eldago-lp-terminy .wiersz__ceny { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; } .eldago-lp-terminy .wiersz__cena-stara { margin: 0; font-weight: 400; font-size: .85rem; text-decoration: line-through; color: var(--lp-cisza); } /* Dopisek pojawia się tylko wtedy, gdy terminy mają RÓŻNE ceny (wyjątek cenowy na pojedynczej dacie) — wtedy nie da się opisać ich jednym zdaniem pod listą. Własny wiersz siatki, więc nie rusza szerokości kolumn; do prawej, bo opisuje cenę stojącą nad nim. */ .eldago-lp-terminy .wiersz__omnibus { margin: .35rem 0 0; font-size: .72rem; line-height: 1.35; color: var(--lp-cisza); text-align: right; } .eldago-lp-terminy .wiersz__rezerwuj { /* Element to , nie