/* * Typografia artykulu + layout listingu/pojedynczego wpisu, na tokenach z * frontend/src/styles/tokens.css (dostepnych globalnie - chrome.css je * importuje, theme.css enqueue'owany jako jego zaleznosc, patrz functions.php). * Case studies (.lnz-single__elementor) NIE dostaja tej typografii - maja * wlasne, kompletne style Elementora - patrz docs/blog-wordpress-plan.md 3.4. */ /* * Kontener artykulu zostaje jak byl (wasska kolumna). Listing od czasu * redesignu (Figma 1140:31361) jest pelnej szerokosci - hero dzieli limonkowe * tlo z naglowkiem, a sekcja z kaflami kladzie na nie wlasne biale - wiec ma * juz osobne reguly nizej. */ .lnz-single { max-width: var(--content-max); margin: 0 auto; padding: var(--space-8) var(--space-7) var(--space-10); font-family: var(--font-body); color: var(--brown); } /* * Cala typografia listingu to Archivo (--font-display), nie Alegreya - w * makiecie nawet lead i tekst kafla sa Archivo. Artykul (.lnz-single) zostaje * przy --font-body. */ .lnz-listing { font-family: var(--font-display); color: var(--brown); } /* * Motyw nie ma globalnego resetu box-sizing - wp-chrome.css zawezil go do * #lnz-header/#lnz-footer, zeby nie ruszyc case studies Elementora. Listing * potrzebuje go dla paddingow kafli i przyciskow, wiec bierze wlasny, * ograniczony do siebie. */ .lnz-listing *, .lnz-listing *::before, .lnz-listing *::after { box-sizing: border-box; } /* Krótki fade podczas pobierania kolejnej strony listingu — patrz assets/pjax-listing.js. */ .lnz-listing--loading { opacity: 0.5; pointer-events: none; transition: opacity 0.15s ease; } .lnz-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Przycisk (odpowiednik Button.module.css z SPA) ---------- */ /* * Podwojone selektory (.foo.foo) w regulach listingu NIE sa literowka: * Elementor Pro dokleja do globalny CSS swojego Kitu * (`.elementor-kit-N a`, `.elementor-kit-N h2`), ktorego specyficznosc * klasa+tag (0,1,1) bije pojedyncza klase (0,1,0) - bez podwojenia tytuly * kafli wychodzily w rozmiarze i kroju Kitu zamiast makiety. Dokladnie ten sam * zabieg co w NavBar/Footer, uzasadniony szerzej w * frontend/src/styles/wp-chrome.css. */ /* * Ten sam ksztalt co `variant="outlined"` w SPA, ale ramka 1px * var(--forest-100) zamiast 1.5px currentColor - tak jak robia to juz * CaseStudySection i TimelineFeatureSection, ktore tez odwzorowuja przyciski * z tej makiety. */ .lnz-btn.lnz-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px var(--space-5); border: 1px solid var(--forest-100); border-radius: 12px; background: transparent; font-family: var(--font-display); font-weight: 500; font-size: var(--body-default-size); line-height: normal; color: var(--text-dark-500); text-decoration: none; cursor: pointer; transition: background 0.2s ease; } .lnz-btn.lnz-btn:hover { background: var(--lime-100); } .lnz-icon { display: block; width: 16px; height: 16px; flex-shrink: 0; } /* ---------- Hero listingu ---------- */ /* * Tlo hero to tlo (klasa `lnz-listing-page`, patrz functions.php), bo * naglowek jest elementem fixed montowanym przez Reacta i pas pod nim musi * miec ten sam kolor co hero. */ body.lnz-listing-page { background: var(--lime-100); } .lnz-hero { display: flex; align-items: center; gap: 80px; max-width: var(--content-max); margin: 0 auto; padding: 80px; } .lnz-hero__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-9); } .lnz-hero__body { display: flex; flex-direction: column; gap: var(--space-5); } .lnz-hero__titles { display: flex; flex-direction: column; gap: var(--space-2); } /* Figma "Label/Eyebrow" — 13px/1.4, tracking 3% (0.39px przy 13px). */ .lnz-hero__eyebrow.lnz-hero__eyebrow { margin: 0; font-size: 13px; line-height: 1.4; letter-spacing: 0.39px; text-transform: uppercase; color: var(--text-dark-500); } /* * Makieta ma tu czysta czern; uzywamy --brown (#312f2b) jak reszta serwisu - * roznica jest niedostrzegalna, a token jest tym, ktory Figma podpina pod * "Text/text-dark-500" wszedzie indziej na tym ekranie. */ .lnz-hero__title.lnz-hero__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--heading-h2-size); line-height: var(--heading-h2-line); color: var(--brown); } .lnz-hero__cta-group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); } /* * Cztery linie z okladem. Makieta zaklada krotki lead, ale 20 z 38 wpisow ma * excerpt auto-generowany z pelnego akapitu (docs/blog-wordpress-plan.md * sekcja 2) - bez przyciecia taki hero rozpycha sie na pol ekranu. */ .lnz-hero__lead.lnz-hero__lead { margin: 0; font-size: var(--body-large-size); line-height: var(--body-large-line); color: var(--text-dark-500); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .lnz-hero__image { flex: 1 1 0; min-width: 0; align-self: stretch; /* 586px z makiety minus 2×80px paddingu sekcji. */ min-height: 426px; } .lnz-hero__image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } /* Archiwum kategorii i strony 2+ — sam pasek z okruszkami i tytułem. */ .lnz-hero--compact { display: block; padding-bottom: var(--space-8); } .lnz-hero--compact .lnz-hero__text { gap: var(--space-5); } /* ---------- Okruszki ---------- */ .lnz-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .lnz-breadcrumbs__item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--text-dark-500); } .lnz-breadcrumbs__link.lnz-breadcrumbs__link { color: var(--text-dark-500); text-decoration: none; } .lnz-breadcrumbs__link.lnz-breadcrumbs__link:hover { text-decoration: underline; } .lnz-breadcrumbs__current.lnz-breadcrumbs__current { font-weight: 500; } /* ---------- Sekcja z kaflami ---------- */ .lnz-listing__main { background: var(--bg-white); } .lnz-listing__inner { max-width: var(--content-max); margin: 0 auto; padding: 80px; display: flex; flex-direction: column; gap: var(--space-8); } .lnz-listing__empty { margin: 0; font-size: var(--body-large-size); } /* ---------- Chipy kategorii ---------- */ .lnz-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); } .lnz-filters__chip--active.lnz-filters__chip--active, .lnz-filters__chip--active.lnz-filters__chip--active:hover { background: var(--light-lime-500); border-color: var(--light-lime-500); } /* ---------- Siatka kafli ---------- */ .lnz-grid { display: grid; /* minmax(0, 1fr), NIE 1fr. `1fr` znaczy `minmax(auto, 1fr)`, a `auto` bierze minimalną szerokość TREŚCI — dla kafla to naturalna szerokość zdjęcia. Wpis ze zdjęciem 3000px rozpychał wtedy środkową kolumnę, a pozostałe dwie ściskał. Zmierzone w przeglądarce na żywym listingu: przy oknie 1905px `grid-template-columns` wychodziło „239.5px 3048px 244.203px", a karta miała 3048px. `max-width: 100%` na obrazku nie pomaga, bo 100% liczy się od już rozdmuchanego rodzica. Pogłębia to `sizes="auto"`, które WordPress dokłada od 6.7: w rozdmuchanym kaflu przeglądarka widzi ogromną szerokość docelową i wybiera z `srcset` największy plik, co jeszcze podnosi minimum treści. */ grid-template-columns: repeat(3, minmax(0, 1fr)); /* 48px między rzędami, ~24px między kolumnami (1280px − 3×411px). */ gap: var(--space-8) var(--space-5); } .lnz-card { /* Druga linia obrony, niezależna od siatki: element siatki ma domyślnie `min-width: auto`, więc bez tego dowolna szeroka treść w środku — nie tylko zdjęcie — potrafi rozepchnąć kolumnę. */ min-width: 0; position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-radius: 12px; background: var(--forest-50); } .lnz-card__image { border-radius: 12px; overflow: hidden; } .lnz-card__image img, .lnz-card__image-empty { display: block; width: 100%; height: 220px; object-fit: cover; border-radius: 12px; } .lnz-card__image-empty { background: var(--lime-100); } /* * `flex: 1` + `space-between` wyrownuje przyciski "Czytaj artykul" na dole * kafli w rzedzie, niezaleznie od tego, ile linii zajal tytul. */ .lnz-card__content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4); } .lnz-card__text { display: flex; flex-direction: column; gap: var(--space-4); } .lnz-card__category.lnz-card__category { margin: 0; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--forest-400); } .lnz-card__heading { display: flex; align-items: baseline; gap: var(--space-2); } .lnz-card__title.lnz-card__title { flex: 1 1 0; min-width: 0; margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--body-large-size); line-height: var(--body-default-line); /* max-h 52px w makiecie = dokładnie dwie linie 20px/1.3. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lnz-card__link.lnz-card__link { color: var(--brown); text-decoration: none; } /* * Rozciagniety link: klikalny jest caly kafel, ale w drzewie dostepnosci * zostaje jedno, opisane tytulem lacze. Dlatego CTA nizej jest . */ .lnz-card__link.lnz-card__link::after { content: ''; position: absolute; inset: 0; border-radius: 12px; } .lnz-card__time.lnz-card__time { flex-shrink: 0; font-size: var(--body-large-size); line-height: var(--body-large-line); color: var(--forest-400); white-space: nowrap; } .lnz-card__lead.lnz-card__lead { margin: 0; font-size: var(--body-default-size); line-height: var(--body-default-line); color: var(--brown); /* h 65px w makiecie = trzy linie 16px/1.3. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .lnz-card__cta.lnz-card__cta { width: 100%; } /* CTA reaguje na najazd na dowolne miejsce kafla, bo klikalny jest cały. */ .lnz-card:hover .lnz-card__cta.lnz-card__cta { background: var(--lime-100); } /* ---------- Paginacja ---------- */ .lnz-pagination { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--body-default-size); line-height: var(--body-default-line); /* 48px z gapu .lnz-listing__inner + 24px = 72px z makiety. */ margin-top: var(--space-5); } .lnz-pagination__nav.lnz-pagination__nav { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: var(--space-2) var(--space-3); border-radius: 8px; color: var(--brown); text-decoration: none; } .lnz-pagination__nav--disabled { opacity: 0.3; } .lnz-pagination .page-numbers.page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: var(--space-2) var(--space-3); border-radius: 8px; color: var(--brown); text-decoration: none; } .lnz-pagination .current.current { background: var(--bg-white); border: 1px solid var(--forest-100); font-weight: 700; } .lnz-pagination__dots { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; } /* ---------- Pojedynczy wpis ---------- */ .lnz-breadcrumb { font-size: 14px; margin-bottom: var(--space-5); color: var(--forest-300); } .lnz-breadcrumb a { color: var(--forest-500); text-decoration: none; } .lnz-badge { display: inline-block; font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--forest-500); background: var(--lime-100); padding: 4px 12px; border-radius: 20px; margin-bottom: var(--space-4); } .lnz-single__title { font-family: var(--font-display); font-weight: 500; font-size: 41px; margin: 0 0 var(--space-4); color: var(--brown); } .lnz-single__lead { font-size: 20px; line-height: 1.5; color: var(--brown); opacity: 0.85; margin: 0 0 var(--space-6); } .lnz-single__thumb img { width: 100%; height: auto; border-radius: 12px; margin-bottom: var(--space-7); } /* * Case studies Elementora — pelna szerokosc az do --content-max (1440px), * wlasne style, bez .entry-content. Standardowy trik "full bleed z limitem": * width capuje sie na 1440px, margin-left:50% + translateX(-50%) centruje * niezaleznie od tego, ile procent to jest w kontekscie rodzica (w * przeciwienstwie do starego `calc(50% - 50vw)`, ktory bez limitu rozjezdzal * sie do pelnej szerokosci viewportu na duzych/4K ekranach). */ .lnz-single__elementor { width: 100vw; max-width: var(--content-max); margin-left: 50%; transform: translateX(-50%); } .lnz-related { margin-top: var(--space-9); padding-top: var(--space-7); border-top: 1px solid var(--lime-100); } .lnz-related__title { font-family: var(--font-display); font-size: 25px; margin: 0 0 var(--space-5); } .lnz-related__grid { display: grid; /* minmax(0, 1fr) z tego samego powodu co w .lnz-grid wyżej. */ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } .lnz-related__card { text-decoration: none; color: var(--brown); font-family: var(--font-display); } .lnz-related__card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; margin-bottom: var(--space-2); } /* ---------- Typografia tresci (28 klasycznych wpisow, .entry-content) ---------- */ .entry-content { font-size: 18px; line-height: 1.65; color: var(--brown); } .entry-content p { margin: 0 0 var(--space-5); } .entry-content h2 { font-family: var(--font-display); font-weight: 500; font-size: 31px; margin: var(--space-8) 0 var(--space-4); color: var(--brown); } .entry-content h3 { font-family: var(--font-display); font-weight: 500; font-size: 25px; margin: var(--space-7) 0 var(--space-3); color: var(--brown); } .entry-content figure { margin: var(--space-7) 0; } .entry-content figure img { width: 100%; height: auto; border-radius: 12px; display: block; } .entry-content figcaption { font-size: 14px; color: var(--forest-300); margin-top: var(--space-2); text-align: center; } .entry-content blockquote { margin: var(--space-7) 0; padding: var(--space-5) var(--space-6); border-left: 4px solid var(--forest-500); background: var(--lime-100); font-family: var(--font-display); font-style: italic; font-size: 20px; } .entry-content iframe { max-width: 100%; border-radius: 12px; margin: var(--space-7) 0; } .entry-content ul, .entry-content ol { margin: 0 0 var(--space-5); padding-left: var(--space-6); } .entry-content li { margin-bottom: var(--space-2); } .entry-content a { color: var(--forest-500); } .entry-content a:hover { color: var(--forest-700); } /* ---------- Breakpointy ---------- */ /* * Makieta ma dwa warianty - 1440px i 390px. Stopnie posrednie sa domysleniem: * siatka schodzi 3 -> 2 -> 1 kolumny, a padding sekcji z 80px na 40px i 20px, * zeby kafel nie zrobil sie wezszy niz czytelny. */ @media (max-width: 1240px) { .lnz-hero { gap: var(--space-9); padding: var(--space-9) var(--space-7); } .lnz-listing__inner { padding: var(--space-9) var(--space-7); } .lnz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Poniżej ~780px hero układa się w pion — wariant mobilny z Figmy 1140:32119. */ @media (max-width: 780px) { .lnz-hero { flex-direction: column; align-items: stretch; gap: var(--space-5); padding: var(--space-6) var(--space-4); } .lnz-hero__text { gap: var(--space-5); } .lnz-hero__body { gap: var(--space-4); } .lnz-hero__cta-group { align-items: stretch; gap: var(--space-4); } .lnz-hero__lead.lnz-hero__lead { font-size: var(--body-default-size); line-height: var(--body-default-line); } /* * `flex: 0 0 auto` jest tu konieczne: po zmianie kierunku na kolumne osia * glowna staje sie wysokosc, a odziedziczone z desktopu `flex: 1 1 0` * (flex-basis: 0) wygrywa z `height`, przez co zdjecie mialo 0px wysokosci * i po prostu znikalo. */ .lnz-hero__image { flex: 0 0 auto; min-height: 0; height: 262px; } .lnz-listing__inner { padding: var(--space-4); gap: var(--space-6); } /* * Pasek filtrów jest w makiecie mobilnej szerszy niż ekran (734px przy * 390px) — przewija się w poziomie zamiast zawijać. Ujemny margines * z powrotem dodanym paddingiem pozwala chipom dojechać do krawędzi * ekranu, zamiast urywać się na paddingu sekcji. */ .lnz-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); scrollbar-width: none; } .lnz-filters::-webkit-scrollbar { display: none; } .lnz-filters__chip { flex: 0 0 auto; } .lnz-grid, .lnz-related__grid { grid-template-columns: minmax(0, 1fr); } .lnz-grid { gap: 20px; } .lnz-card { padding: var(--space-4); } .lnz-card__text { gap: var(--space-2); } .lnz-card__title.lnz-card__title, .lnz-card__time.lnz-card__time { font-size: var(--body-default-size); } .lnz-card__lead.lnz-card__lead { -webkit-line-clamp: 4; } /* Paginacja mobilna (Figma 1140:32147) — same ikony, bez etykiet. */ .lnz-pagination__nav.lnz-pagination__nav span:not(.lnz-visually-hidden) { display: none; } .lnz-pagination__nav.lnz-pagination__nav { padding: var(--space-2); } }