/* * PoppyOS — baza wiedzy: hub wpisów i układ artykułu. * * Wczytywany WYŁĄCZNIE wtedy, gdy operator włączy moduł w panelu (PoppyOS → Baza wiedzy). * Motyw stoi na kilku niepowiązanych produkcjach, więc dopóki przełącznik jest wyłączony, * ten plik nie trafia do i żadna z nich nie zmienia się o piksel. * * Nazwy: prefiks `posw-` (poppyos wiedza) na klasach i zmiennych. Motyw ma już własne * `pos-*`, a trzy z nich — `pos-eyebrow`, `pos-lead`, `pos-cena` — znaczą co innego niż * w makietach, z których ten układ pochodzi. Osobna przestrzeń nazw jest tańsza niż * tropienie, która reguła wygrywa. * * Kolor marki bierze się z akcentu Customizera (`--poppyos-accent`), więc moduł wygląda * jak witryna, na której stoi. Sześć barw tematycznych to osobna sprawa: kodują temat * artykułu (cukier, serce, jelita), nie markę, i dlatego są stałe — ten sam odcień ma * znaczyć to samo na każdym blogu. * * @since 2.33.0 */ .posw { /* Skala marki wyprowadzona z akcentu; tło i obwódki mieszają go z bielą, więc jasny akcent nie robi z tła plamy, a ciemny nie zabija czytelności napisu. */ --posw-brand: var( --poppyos-accent, #dc2626 ); --posw-brand-ink: var( --poppyos-accent-text, var( --poppyos-accent, #dc2626 ) ); --posw-brand-50: color-mix( in srgb, var( --posw-brand ) 5%, #fff ); --posw-brand-100: color-mix( in srgb, var( --posw-brand ) 11%, #fff ); --posw-brand-200: color-mix( in srgb, var( --posw-brand ) 22%, #fff ); --posw-brand-300: color-mix( in srgb, var( --posw-brand ) 38%, #fff ); /* Barwy tematyczne — stałe, bo znaczą temat, nie markę. */ --posw-mint-100: #eaf3ec; --posw-mint-700: #206940; --posw-olive-100: #edf3e5; --posw-olive-700: #3f6212; --posw-plum-100: #f1edf8; --posw-plum-700: #6d4aa3; --posw-berry-100: #fdeef2; --posw-berry-700: #b03a64; --posw-blue-100: #e8f0fa; --posw-blue-700: #1d5fa8; --posw-honey-100: #fff4dc; --posw-honey-700: #a16207; --posw-ink: #0f172a; --posw-ink-2: #334155; --posw-muted: #64748b; --posw-line: #e2e8f0; --posw-surface: #f8fafc; --posw-r-sm: .625rem; --posw-r-md: 1rem; --posw-r-lg: 1.5rem; --posw-r-xl: 1.75rem; --posw-r-pill: 999px; --posw-cien: 0 1px 2px rgba( 15, 23, 42, .04 ), 0 8px 24px -12px rgba( 15, 23, 42, .12 ); /* Nagłówki idą krojem „display" z theme.json, więc moduł podąża za przełącznikiem krojów w Customizerze zamiast wołać własną rodzinę. */ --posw-font-h: var( --wp--preset--font-family--display, inherit ); --posw-waga-h: 800; } /* Bez `color-mix()` (Safari < 16.2) skala marki byłaby nieważna, a każde tło z niej — przezroczyste. Neutralne szarości zamiast pustki; akcent zostaje w napisach i obwódkach. */ @supports not ( color: color-mix( in srgb, red 50%, #fff ) ) { .posw { --posw-brand-50: #f8fafc; --posw-brand-100: #f1f5f9; --posw-brand-200: #e2e8f0; --posw-brand-300: #cbd5e1; } } /* Kroje o wysokim x-height (Figtree, Outfit) nie potrzebują pełnej masy 800 przy dużych stopniach — nagłówki hubu schodzą o jeden krok niżej. */ .posw h1, .posw h2, .posw h3 { font-family: var( --posw-font-h ); letter-spacing: -.025em; text-wrap: balance; } /* ═══ elementy wspólne ═══ */ /* Kontener bloku `main` daje już 1.5rem po bokach (theme.json, useRootPaddingAwareAlignments); własny padding dokładałby drugi margines i zostawiał 280 px treści na telefonie 360 px. */ .posw__wrap { max-width: 1200px; margin-inline: auto; } /* Hero i pasek tematów wychodzą na pełną szerokość okna (jak w makiecie), a ich wewnętrzny kontener wraca do siatki strony: 1200 px plus boczne 1.5rem. */ .posw-hub__hero, .posw-hub__sciezki { width: 100vw; margin-left: calc( 50% - 50vw ); } .posw-hub__hero > .posw__wrap, .posw-hub__sciezki > .posw__wrap { max-width: calc( 1200px + var( --wp--style--root--padding-left, 1rem ) + var( --wp--style--root--padding-right, 1rem ) ); padding-left: var( --wp--style--root--padding-left, 1rem ); padding-right: var( --wp--style--root--padding-right, 1rem ); } .posw__eyebrow { display: flex; align-items: center; gap: .5em; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var( --posw-brand-ink ); margin: 0 0 .7rem; } .posw__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .posw__h1 { font-size: clamp( 2rem, 1.4rem + 2.6vw, 3.25rem ); line-height: 1.08; font-weight: var( --posw-waga-h ); margin: 0; color: var( --posw-ink ); } .posw__h2 { font-size: clamp( 1.5rem, 1.2rem + 1.6vw, 2.25rem ); line-height: 1.14; font-weight: var( --posw-waga-h ); margin: 0; color: var( --posw-ink ); } .posw__h2--wiersz { font-size: clamp( 1.3rem, 1.1rem + 1vw, 1.75rem ); } .posw__akcent { color: var( --posw-brand-ink ); } .posw__lead { font-size: clamp( 1rem, .95rem + .3vw, 1.15rem ); line-height: 1.45; color: var( --posw-ink-2 ); max-width: 62ch; margin: 1rem 0 0; } .posw__siatka { display: grid; gap: clamp( 1.25rem, 1rem + 1.5vw, 2rem ); grid-template-columns: 1fr; } @media ( min-width: 600px ) { .posw__siatka--3, .posw__siatka--4 { grid-template-columns: repeat( 2, 1fr ); } } @media ( min-width: 1024px ) { .posw__siatka--3 { grid-template-columns: repeat( 3, 1fr ); } .posw__siatka--4 { grid-template-columns: repeat( 4, 1fr ); } } .posw__chip { display: inline-flex; align-items: center; gap: .4em; font-size: .74rem; font-weight: 700; letter-spacing: .01em; padding: .3em .75em; border-radius: var( --posw-r-pill ); background: var( --posw-temat-bg, var( --posw-brand-100 ) ); color: var( --posw-temat-ink, var( --posw-brand-ink ) ); } .posw__pigulka { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; font-size: .88rem; font-weight: 600; text-decoration: none; color: var( --posw-ink-2 ); background: #fff; border: 1px solid var( --posw-line ); border-radius: var( --posw-r-pill ); padding: .5em 1em; transition: border-color .2s, color .2s; } .posw__pigulka:hover { border-color: var( --posw-brand-300 ); color: var( --posw-ink ); } .posw__pigulka[ aria-current ] { background: var( --posw-brand-100 ); border-color: var( --posw-brand-300 ); color: var( --posw-brand-ink ); font-weight: 700; } .posw__pigulka .posw__licz { font-size: .78rem; color: var( --posw-muted ); font-variant-numeric: tabular-nums; } .posw__pigulka[ aria-current ] .posw__licz { color: inherit; } .posw__ikona { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var( --posw-ikona-bg, var( --posw-brand-100 ) ); color: var( --posw-ikona-ink, var( --posw-brand-ink ) ); } .posw__ikona svg { width: 1.3rem; height: 1.3rem; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .posw__btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: inherit; font-size: .95rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; border-radius: var( --posw-r-pill ); padding: .85em 1.5em; min-height: 48px; transition: transform .15s, box-shadow .2s, background-color .2s; } .posw__btn--cta { background: var( --posw-brand ); /* Ciemny napis na jasnym akcencie. Biały tekst na pomarańczu #F89840 daje 2,20:1 i nie zdaje WCAG AA — dlatego kolor napisu liczy kontrast, nie przyzwyczajenie. */ color: var( --poppyos-accent-contrast, #0f172a ); box-shadow: 0 8px 20px -10px var( --posw-brand ); } .posw__btn--cta:hover { filter: brightness( 1.06 ); box-shadow: 0 12px 24px -10px var( --posw-brand ); } .posw__btn--ciemny { background: var( --posw-ink ); color: #fff; } .posw__btn--kontur { background: #fff; border-color: var( --posw-ink ); color: var( --posw-ink ); } .posw__btn:hover { transform: translateY( -1px ); } /* Sześć tematów. Klasa siada na karcie albo na plakietce i ustawia obie zmienne naraz. */ .posw-t-cukier { --posw-temat-bg: var( --posw-mint-100 ); --posw-temat-ink: var( --posw-mint-700 ); } .posw-t-wege { --posw-temat-bg: var( --posw-olive-100 ); --posw-temat-ink: var( --posw-olive-700 ); } .posw-t-40 { --posw-temat-bg: var( --posw-plum-100 ); --posw-temat-ink: var( --posw-plum-700 ); } .posw-t-jelita { --posw-temat-bg: var( --posw-berry-100 ); --posw-temat-ink: var( --posw-berry-700 ); } .posw-t-serce { --posw-temat-bg: var( --posw-blue-100 ); --posw-temat-ink: var( --posw-blue-700 ); } .posw-t-szybkie { --posw-temat-bg: var( --posw-honey-100 ); --posw-temat-ink: var( --posw-honey-700 ); } /* ═══════════ HUB ═══════════ */ .posw-hub__hero { padding-block: clamp( 2.5rem, 1.5rem + 3vw, 4rem ) clamp( 2rem, 1.5rem + 2vw, 3rem ); background: linear-gradient( 180deg, var( --posw-brand-100 ) 0%, #fff 100% ); } /* Hero ma dotykać nagłówka witryny. Między nimi stoją odstęp blokowy `.wp-site-blocks > * + *` i padding-top kontenera `main` z szablonu — oba zerujemy na stronie z hubem (klasa body z PHP), zamiast zgadywać ich sumę ujemnym marginesem. */ body.posw-hub-strona .wp-site-blocks > main { margin-block-start: 0; /* `!important`, bo custom.css ustawia padding-top kontenera z `!important` (styl inline szablonu). */ padding-top: 0 !important; } .posw-hub__hero .posw__h1 { max-width: 16ch; } .posw-hub__szukaj { display: flex; gap: .6rem; max-width: 620px; margin-top: 1.5rem; flex-wrap: wrap; } .posw-hub__szukaj input { flex: 1; min-width: 240px; font: inherit; font-size: 1rem; padding: .85em 1.1em; border: 1.5px solid var( --posw-line ); border-radius: var( --posw-r-pill ); background: #fff; min-height: 48px; } .posw-hub__szukaj input:focus { outline: 2px solid var( --posw-brand ); outline-offset: 1px; border-color: transparent; } /* Pasek ścieżek przykleja się pod nagłówkiem witryny. `top` liczy motyw — wysokość paska nawigacji zależy od logo, więc wartość wstawia PHP w zmiennej. */ .posw-hub__sciezki { border-bottom: 1px solid var( --posw-line ); padding-block: .9rem; position: sticky; top: var( --posw-naglowek-h, 0px ); background: rgba( 255, 255, 255, .95 ); backdrop-filter: blur( 8px ); z-index: 20; } .posw-hub__sciezki .posw__wrap { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-block: 2px; } .posw-hub__sciezki .posw__wrap::-webkit-scrollbar { display: none; } .posw-hub__wiersz { margin-bottom: clamp( 2.5rem, 2rem + 2vw, 4rem ); } .posw-hub__glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.6rem; flex-wrap: wrap; } .posw-hub__glowa > div { flex: 1 1 340px; } .posw-hub__opis { margin: .3rem 0 0; color: var( --posw-ink-2 ); font-size: .96rem; max-width: 60ch; } .posw-hub__akcja { flex: none; } .posw-hub__wiecej { font-weight: 700; font-size: .92rem; color: var( --posw-brand-ink ); text-decoration: none; white-space: nowrap; display: inline-flex; gap: .4em; align-items: center; } .posw-hub__wiecej:hover { text-decoration: underline; } .posw-hub__sep { border: 0; border-top: 1px solid var( --posw-line ); margin: clamp( 2rem, 1.5rem + 2vw, 3.5rem ) 0; } /* ── karta wpisu ── */ .posw-karta { display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; } .posw-karta__kafel { position: relative; aspect-ratio: 3 / 2; border-radius: var( --posw-r-xl ); overflow: hidden; background: var( --posw-temat-bg, var( --posw-brand-100 ) ); padding: 14px; display: flex; } .posw-karta__kafel img { width: 100%; height: 100%; object-fit: cover; border-radius: calc( var( --posw-r-xl ) - 12px ); } /* Wpis bez zdjęcia dostaje kafel z tytułem na tle w kolorze tematu — pusty prostokąt w siatce czyta się jak błąd, a tak brak zdjęcia wygląda na decyzję. */ .posw-karta__kafel--pusty { align-items: center; justify-content: center; color: var( --posw-temat-ink, var( --posw-brand-ink ) ); font-family: var( --posw-font-h ); font-weight: 800; font-size: clamp( 1.15rem, 1rem + .7vw, 1.5rem ); letter-spacing: -.025em; text-align: center; padding: 1.8rem; line-height: 1.2; } .posw-karta__kafel--pusty::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient( currentColor 1.5px, transparent 1.6px ); background-size: 18px 18px; opacity: .16; } .posw-karta__kafel--pusty span { position: relative; } .posw-karta__body { display: flex; flex-direction: column; gap: .6rem; padding-top: 1.1rem; flex: 1; } .posw-karta__tytul { display: block; font-family: var( --posw-font-h ); letter-spacing: -.02em; text-wrap: balance; font-size: 1.22rem; line-height: 1.25; font-weight: calc( var( --posw-waga-h ) - 100 ); margin: 0; color: var( --posw-ink ); transition: color .2s; } .posw-karta__opis { font-size: .92rem; line-height: 1.45; color: var( --posw-ink-2 ); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .posw-karta__stopka { margin-top: auto; padding-top: .85rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .82rem; color: var( --posw-muted ); } .posw-karta__typ { border: 1px solid var( --posw-line ); border-radius: var( --posw-r-pill ); padding: .25em .7em; font-size: .74rem; font-weight: 700; color: var( --posw-ink-2 ); } .posw-karta__strzalka { transition: transform .25s; display: inline-block; } .posw-karta:hover .posw-karta__strzalka { transform: translate( 3px, -3px ); } .posw-karta:hover .posw-karta__tytul { color: var( --posw-brand-ink ); } /* wariant wiodący — poziomy na desktopie */ .posw-karta--wiodaca { gap: 0; } @media ( min-width: 768px ) { .posw-karta--wiodaca { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2rem; align-items: center; } .posw-karta--wiodaca .posw-karta__kafel { aspect-ratio: 16 / 10; } .posw-karta--wiodaca .posw-karta__body { padding-top: 0; } .posw-karta--wiodaca .posw-karta__tytul { font-size: clamp( 1.5rem, 1.1rem + 1.4vw, 2.1rem ); line-height: 1.14; } .posw-karta--wiodaca .posw-karta__opis { -webkit-line-clamp: 4; font-size: 1.02rem; } } /* wariant kompaktowy — lista numerowana, bez zdjęć. Kolumny robi `columns`, więc numeracja płynie w dół pierwszej kolumny, potem drugiej — na każdej szerokości. */ .posw-hub__kompakt { columns: 1; column-gap: clamp( 1.25rem, 1rem + 1.5vw, 2rem ); } @media ( min-width: 600px ) { .posw-hub__kompakt { columns: 2; } } @media ( min-width: 1024px ) { .posw-hub__kompakt { columns: 3; } } .posw-karta--kompakt { height: auto; flex-direction: row; gap: .9rem; align-items: flex-start; padding: .9rem 0; border-bottom: 1px solid var( --posw-line ); break-inside: avoid; } .posw-karta--kompakt:last-child { border-bottom: 0; } .posw-karta--kompakt .posw-karta__body { padding-top: 0; gap: .35rem; } .posw-karta--kompakt .posw-karta__nr { font-family: var( --posw-font-h ); font-weight: 800; font-size: 1.1rem; /* Numer niesie kolejność, więc ma zdawać kontrast — `brand-300` dawało 1,3:1. */ color: var( --posw-muted ); line-height: 1.2; flex: none; width: 1.6em; } .posw-karta--kompakt .posw-karta__tytul { font-size: 1rem; line-height: 1.35; } .posw-karta--kompakt .posw-karta__stopka { padding-top: .35rem; font-size: .78rem; } /* ── karta ścieżki ── */ .posw-sciezka { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem; border-radius: var( --posw-r-lg ); background: var( --posw-temat-bg, var( --posw-brand-100 ) ); text-decoration: none; color: inherit; min-height: 100%; transition: transform .2s; } .posw-sciezka:hover { transform: translateY( -3px ); } .posw-sciezka__glowa { display: flex; align-items: center; gap: .8rem; margin-bottom: .2rem; } .posw-sciezka__nr { font-family: var( --posw-font-h ); font-size: .75rem; font-weight: 800; letter-spacing: .1em; color: var( --posw-temat-ink ); opacity: .8; } .posw-sciezka .posw__ikona { --posw-ikona-bg: rgba( 255, 255, 255, .75 ); --posw-ikona-ink: var( --posw-temat-ink ); } .posw-sciezka__tytul { display: block; font-family: var( --posw-font-h ); letter-spacing: -.025em; font-size: 1.25rem; line-height: 1.2; margin: 0; font-weight: calc( var( --posw-waga-h ) - 100 ); color: var( --posw-ink ); } .posw-sciezka__opis { display: block; font-size: .92rem; line-height: 1.45; color: var( --posw-ink-2 ); margin: 0; } .posw-sciezka__stopka { margin-top: auto; padding-top: 1rem; font-size: .82rem; font-weight: 700; color: var( --posw-temat-ink ); display: flex; align-items: center; gap: .4em; } /* ── panel produktowy w hubie ── */ .posw-hub__promo { display: grid; gap: 1.5rem; align-items: center; background: linear-gradient( 120deg, var( --posw-brand-100 ), var( --posw-brand-200 ) ); border-radius: var( --posw-r-xl ); padding: clamp( 1.5rem, 1rem + 2vw, 2.25rem ); position: relative; overflow: hidden; margin-bottom: clamp( 2.5rem, 2rem + 2vw, 4rem ); } @media ( min-width: 768px ) { .posw-hub__promo { grid-template-columns: auto 1fr auto; gap: 2rem; } } .posw-hub__promo-okladka { display: flex; justify-content: center; } .posw-hub__promo-okladka img { width: 132px; border-radius: 6px; border: 4px solid #fff; box-shadow: 0 22px 44px -20px rgba( 15, 23, 42, .65 ); transform: rotate( -4deg ); } .posw-hub__promo h2 { font-size: clamp( 1.4rem, 1.1rem + 1.4vw, 1.9rem ); line-height: 1.15; margin: 0 0 .5rem; font-weight: var( --posw-waga-h ); color: var( --posw-ink ); } .posw-hub__promo p { margin: 0; color: var( --posw-ink-2 ); max-width: 52ch; } .posw-hub__promo-akcje { display: flex; gap: .7rem; flex-wrap: wrap; } /* ═══════════ ARTYKUŁ ═══════════ */ /* Jeden kontener dla całego artykułu: głowa, zdjęcie, spis i tekst mają tę samą szerokość. Szablon daje 1100 px; z limitem kolumny tekstu zostawał pusty pas z prawej, a bez limitu wiersz miał ~95 znaków. 1040 px = spis 230 px + odstęp + kolumna ~750 px (ok. 60 znaków). */ .posw.posw-art { max-width: 1040px; margin-inline: auto; } .posw-art__okruszki { font-size: .82rem; color: var( --posw-muted ); margin-bottom: 1.5rem; } .posw-art__okruszki a { color: var( --posw-brand-ink ); text-decoration: none; } .posw-art__okruszki a:hover { color: var( --posw-brand-ink ); text-decoration: underline; } .posw-art__glowa { margin-bottom: clamp( 1.5rem, 1rem + 2vw, 2.5rem ); } /* Tytuł i zajawka na całą szerokość układu (jak zdjęcie pod nimi) — limit 20ch ucinał tytuł w połowie szerokości hero. */ .posw-art__glowa .posw__h1 { max-width: none; margin-block: .8rem; } /* Zajawka pod tytułem — jedno, dwa zdania, stopniem większe od tekstu ciągłego. Bierze się z pola „Zajawka" wpisu; jeśli jest puste, sekcja w ogóle nie powstaje. */ .posw-art__zajawka { font-size: clamp( 1.02rem, .98rem + .3vw, 1.18rem ); line-height: 1.45; color: var( --posw-ink-2 ); max-width: 95ch; margin: 0 0 1.5rem; } .posw-art__meta { display: flex; align-items: center; gap: .5rem 1.1rem; flex-wrap: wrap; font-size: .84rem; color: var( --posw-muted ); margin-bottom: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var( --posw-line ); } .posw-art__meta img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .posw-art__meta .posw-art__autor { font-weight: 700; color: var( --posw-ink ); } .posw-art__hero { border-radius: var( --posw-r-xl ); overflow: hidden; margin: 0 0 clamp( 1.5rem, 1rem + 2vw, 2.5rem ); background: var( --posw-temat-bg, var( --posw-brand-100 ) ); padding: 14px; } /* Pionowe zdjęcie z Pexels bez tej proporcji zajmowałoby dwa ekrany zanim zacznie się tekst. */ .posw-art__hero img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; display: block; border-radius: calc( var( --posw-r-xl ) - 12px ); } /* Odznaczone „zdjęcie w kafelku": samo zdjęcie, bez tła tematu i ramki. */ .posw-art__hero--goly { padding: 0; background: none; } .posw-art__hero--goly img { border-radius: var( --posw-r-xl ); } /* Układ dwukolumnowy dopiero od 1024 px. Niżej spis treści jedzie nad tekstem jako zwijany
, bo przyklejona kolumna na telefonie zjada pół ekranu. */ .posw-art__uklad { display: grid; gap: clamp( 1.5rem, 1rem + 2vw, 3rem ); /* `1fr` to `minmax(auto, 1fr)`: szeroka tabela w treści rozpychała tor siatki i całą stronę w poziomie (173 px poza ekranem na 400 px). */ grid-template-columns: minmax( 0, 1fr ); align-items: start; } @media ( min-width: 1024px ) { .posw-art__uklad { grid-template-columns: 230px minmax( 0, 1fr ); gap: 3.5rem; } /* Artykuł z mniej niż trzema nagłówkami nie dostaje spisu treści, a wtedy druga kolumna nie ma po co istnieć: tekst wraca na środek zamiast stać przy prawej krawędzi obok pustego pasa. */ .posw-art__uklad--bez-spisu { grid-template-columns: minmax( 0, 1fr ); max-width: 820px; margin-inline: auto; } } .posw-art__toc { display: none; } @media ( min-width: 1024px ) { .posw-art__toc { display: block; position: sticky; top: calc( var( --posw-naglowek-h, 0px ) + 1.5rem ); max-height: calc( 100vh - var( --posw-naglowek-h, 0px ) - 3rem ); overflow-y: auto; } } .posw-art__toc-tytul { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var( --posw-muted ); margin: 0 0 .9rem; } .posw-art__toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var( --posw-line ); } .posw-art__toc li a { display: block; padding: .45rem 0 .45rem .9rem; margin-left: -2px; border-left: 2px solid transparent; font-size: .88rem; line-height: 1.35; color: var( --posw-ink-2 ); text-decoration: none; } .posw-art__toc li a:hover { color: var( --posw-ink ); } /* Podświetlenie czytanej sekcji nadaje JS na podstawie IntersectionObserver. */ .posw-art__toc li a[ aria-current="true" ] { border-left-color: var( --posw-brand ); color: var( --posw-brand-ink ); font-weight: 700; } .posw-art__toc-mobil { border: 1px solid var( --posw-line ); border-radius: var( --posw-r-md ); padding: .9rem 1.1rem; margin-bottom: 1.5rem; background: var( --posw-surface ); } @media ( min-width: 1024px ) { .posw-art__toc-mobil { display: none; } } .posw-art__toc-mobil summary { cursor: pointer; font-weight: 700; font-size: .92rem; color: var( --posw-ink ); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .posw-art__toc-mobil summary::-webkit-details-marker { display: none; } .posw-art__toc-mobil summary::after { content: ""; width: .55em; height: .55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate( 45deg ); transition: transform .2s; flex: none; } .posw-art__toc-mobil[ open ] summary::after { transform: rotate( -135deg ); } .posw-art__toc-mobil ol { margin: .9rem 0 0; padding-left: 1.2rem; font-size: .9rem; line-height: 1.6; } .posw-art__toc-mobil a { color: var( --posw-ink-2 ); text-decoration: none; } /* „W skrócie" — cztery wypunktowane wnioski NAD tekstem, dla czytających w biegu. Ma stać przed pierwszym akapitem, nie po nim: kto zdąży przeczytać tylko jedną rzecz, ma przeczytać tę. */ .posw-art__wnioski { background: var( --posw-brand-100 ); border-radius: var( --posw-r-lg ); padding: clamp( 1.1rem, 1rem + .6vw, 1.5rem ); margin-bottom: clamp( 1.5rem, 1rem + 1.5vw, 2.25rem ); } .posw-art__wnioski-tytul { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var( --posw-brand-ink ); margin: 0 0 .8rem; } .posw-art__wnioski ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .6rem; } .posw-art__wnioski li { font-size: .95rem; line-height: 1.5; color: var( --posw-ink-2 ); } .posw-art__wnioski li::marker { color: var( --posw-brand ); } /* Nawigacja po ścieżce zamiast „poprzedni / następny wpis" po dacie. Czytelnik dostał tekst jako krok w kolejności, więc kolejność ma być widoczna. */ .posw-art__sciezka-nav { display: grid; gap: 1rem; margin-top: clamp( 2rem, 1.5rem + 1.5vw, 3rem ); padding-top: 1.5rem; border-top: 1px solid var( --posw-line ); } @media ( min-width: 600px ) { .posw-art__sciezka-nav { grid-template-columns: 1fr 1fr; } .posw-art__sciezka-nav a:last-child:not( :first-child ) { text-align: right; } } .posw-art__sciezka-nav a { display: block; padding: 1rem 1.2rem; border: 1px solid var( --posw-line ); border-radius: var( --posw-r-md ); text-decoration: none; color: inherit; transition: border-color .2s; } .posw-art__sciezka-nav a:hover { border-color: var( --posw-brand-300 ); } .posw-art__sciezka-nav .posw-art__kierunek { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var( --posw-muted ); margin-bottom: .35rem; } .posw-art__sciezka-nav strong { font-family: var( --posw-font-h ); font-size: 1rem; line-height: 1.3; font-weight: 700; color: var( --posw-ink ); } /* ── wtręt produktowy w treści (makieta 05): okładka wystaje ponad boks ── */ .posw-art__wtret { display: grid; gap: 1.2rem; align-items: center; background: linear-gradient( 120deg, var( --posw-brand-100 ), var( --posw-brand-200 ) ); border: 1px solid var( --posw-brand-300 ); border-radius: var( --posw-r-lg ); padding: 1.5rem; margin: 3.4rem 0 2.6rem; } @media ( min-width: 640px ) { .posw-art__wtret { grid-template-columns: 130px minmax( 0, 1fr ) auto; gap: 1.6rem; padding: 1.4rem 1.6rem; } .posw-art__wtret--bez-okladki { grid-template-columns: minmax( 0, 1fr ) auto; } } .posw-art__wtret-okladka { display: flex; justify-content: center; align-items: center; align-self: stretch; } .posw-art__wtret-okladka img { width: 130px; height: auto; margin-block: -2.2rem; border-radius: 7px; border: 4px solid #fff; box-shadow: 0 20px 40px -18px rgba( 15, 23, 42, .6 ); transform: rotate( -4deg ); transition: transform .25s; } .posw-art__wtret:hover .posw-art__wtret-okladka img { transform: rotate( -2deg ) translateY( -3px ); } .posw-art__wtret .posw__eyebrow { margin-bottom: .35rem; } .posw-art__wtret h3 { font-family: var( --posw-font-h ); font-size: 1.18rem; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 .4rem; color: var( --posw-ink ); } .posw-art__wtret p { margin: 0; font-size: .93rem; line-height: 1.5; color: var( --posw-ink-2 ); } .posw-art__wtret-akcje { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; } .posw-art__wtret .posw__btn { white-space: nowrap; } .posw-art__wtret-wiecej { font-size: .85rem; font-weight: 600; color: var( --posw-ink-2 ); } /* ── newsletter w treści: lżej niż samodzielna sekcja — jeden nagłówek, jedno zdanie, formularz ── */ .posw-art__tresc .pos-optin { margin: 2.6rem 0; padding: 1.4rem 1.5rem; border: 1px solid var( --posw-line ); border-radius: var( --posw-r-lg ); background: var( --posw-surface ); } .posw-art__tresc .pos-optin__title { font-family: var( --posw-font-h ); font-size: 1.18rem; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 .4rem; color: var( --posw-ink ); } .posw-art__tresc .pos-optin__text { font-size: .93rem; line-height: 1.5; margin: 0 0 1rem; color: var( --posw-ink-2 ); } .posw-art__tresc .pos-optin__form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; } .posw-art__tresc .pos-optin__form input[type="email"] { flex: 1 1 220px; min-height: 46px; padding: .6rem 1rem; border: 1px solid var( --posw-line ); border-radius: var( --posw-r-pill ); font: inherit; font-size: 1rem; background: #fff; } .posw-art__tresc .pos-optin__button { min-height: 46px; padding: .6rem 1.3rem; border: 0; border-radius: var( --posw-r-pill ); background: var( --posw-brand ); color: var( --poppyos-accent-contrast, #0f172a ); font: inherit; font-weight: 700; cursor: pointer; } .posw-art__tresc .pos-optin__note { display: block; margin-top: .6rem; font-size: .78rem; line-height: 1.4; color: var( --posw-muted ); } @media ( prefers-reduced-motion: reduce ) { .posw *, .posw *::before, .posw *::after { transition-duration: .01ms !important; } } /* ═══ typografia treści artykułu ═══ Treść idzie przez `the_content`, więc nagłówki i akapity są zwykłymi blokami WordPressa. Bez tych reguł H2 dziedziczy stopień z motywu, policzony dla kolumny o pełnej szerokości — w węższej kolumnie obok spisu treści wygląda wtedy jak pogrubiony akapit i przestaje dzielić tekst na sekcje. */ .posw-art__tresc { font-size: 1.05rem; line-height: 1.62; color: var( --posw-ink-2 ); min-width: 0; /* Bez własnego limitu: szerokość kolumny wynika z kontenera artykułu (1040 px minus spis), więc tekst wypełnia miejsce obok spisu zamiast zostawiać pusty pas. Uwaga na `ch`: w Figtree jedno „0" ma 0,73em, 72ch to 885 px. */ } .posw-art__tresc > h2 { font-family: var( --posw-font-h ); font-size: clamp( 1.45rem, 1.25rem + .9vw, 1.9rem ); line-height: 1.18; letter-spacing: -.02em; font-weight: var( --posw-waga-h ); color: var( --posw-ink ); margin: 2.4rem 0 .9rem; /* Kotwica ze spisu treści nie może wjechać pod przyklejony nagłówek witryny. */ scroll-margin-top: calc( var( --posw-naglowek-h, 0px ) + 1.5rem ); } .posw-art__tresc > h2:first-child { margin-top: 0; } .posw-art__tresc > h3 { font-family: var( --posw-font-h ); font-size: clamp( 1.15rem, 1.05rem + .5vw, 1.35rem ); line-height: 1.25; letter-spacing: -.015em; font-weight: 700; color: var( --posw-ink ); margin: 1.8rem 0 .6rem; scroll-margin-top: calc( var( --posw-naglowek-h, 0px ) + 1.5rem ); } .posw-art__tresc > p { margin: 0 0 1.1rem; } .posw-art__tresc > ul, .posw-art__tresc > ol { margin: 0 0 1.3rem; padding-left: 1.4rem; display: grid; gap: .5rem; } .posw-art__tresc li::marker { color: var( --posw-brand ); } /* Bez przycisków bloku „Przycisk" i reklamowych CTA: te mają własne tło i napis w kolorze akcentu stałby się niewidoczny na akcencie. */ .posw-art__tresc a:not( .wp-element-button ):not( .wp-block-button__link ):not( .posw__btn ) { color: var( --posw-brand-ink ); text-underline-offset: .18em; } .posw-art__tresc blockquote { margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var( --posw-brand-300 ); font-size: 1.08rem; color: var( --posw-ink ); } /* Tabela w tekście bywa szersza niż kolumna — własny pasek przewijania zamiast rozpychania całej strony w poziomie. Blok „Tabela" ma go na swoim `
` (block-library); tabela wklejona jako goły HTML dostaje go tutaj. */ .posw-art__tresc table { width: 100%; border-collapse: collapse; font-size: .94rem; margin: 1.4rem 0; } .posw-art__tresc > table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .posw-art__tresc > table > tbody, .posw-art__tresc > table > thead { display: table; width: 100%; min-width: 480px; } .posw-art__tresc th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var( --posw-muted ); background: var( --posw-surface ); padding: .7rem .8rem; border-bottom: 1px solid var( --posw-line ); } .posw-art__tresc td { padding: .7rem .8rem; border-bottom: 1px solid var( --posw-line ); } .posw-art__tresc figure { margin: 1.6rem 0; } .posw-art__tresc img { max-width: 100%; height: auto; } .posw-art__tresc figure img, .posw-art__tresc > img { border-radius: var( --posw-r-md ); } @media print { .posw-hub__szukaj, .posw-hub__sciezki, .posw-hub__promo, .posw-art__toc, .posw-art__toc-mobil, .posw-art__sciezka-nav { display: none; } .posw-art__uklad { grid-template-columns: minmax( 0, 1fr ); } } /* `wpautop` zostawia po sobie puste akapity wszędzie tam, gdzie shortcode zwrócił HTML z tagami blokowymi. Zero wysokości zamiast pasa pustego miejsca. */ .posw p:empty { display: none; }