/* ========================================================================== Zasoby wiedzy (/zasoby/) — wyszukiwarka fasetowa (runda 7, 2026-09-16). Stronę renderuje serwer (`apps/feed/library_search.py`); każdy filtr jest linkiem. Ten arkusz nie zakłada JS-a poza klasą `zw-js` na , która włącza szufladę filtrów na telefonie (bez skryptu panel stoi otwarty nad wynikami). Kolor KODUJE GRUPĘ typu materiału i nic poza tym (specyfikacja §1.4): Feed / Wiedza i analizy / Praktyka i procedury / Wzory i narzędzia. Odcień wybiera klasa `zw-tone--` (nazwa z `library.SHELF_TONE`), a reszta interfejsu jest neutralna: biel, szarości i błękit marki. Tokeny wg specyfikacji §3 z trzema świadomymi odstępstwami: * błękit to BŁĘKIT MARKI (#1A86B8 / #27A3DC), nie #1D63E6 — decyzja właściciela 2026-09-16; na przyciskach z białym tekstem #1778A6, bo #1A86B8 daje 4,1:1, a §9 wymaga 4,5:1, * pomarańcz Feedu #D97706 zamiast #E8871E — pole wyboru wypełnione kolorem grupy musi mieć ≥ 3:1 do bieli (#E8871E ma 2,65:1), * napisy na tłach `*-soft` mają własny, ciemniejszy odcień `*-ink` (akcent grupy na jej jasnym tle daje 3,5-3,9:1). Wszystko scope'owane pod `.zw`. Kolory nagłówków ustawiamy JAWNIE — `main.css h1..h6 { color }` bije dziedziczenie. ========================================================================== */ .zw { /* Neutralne */ --zw-bg: #F6F8FC; --zw-surface: #FFFFFF; --zw-border: #E2E8F0; --zw-border-strong: #CBD5E1; --zw-text: #0F172A; --zw-text-2: #334155; --zw-text-muted: #5B6B80; /* spec #64748B — ciemniej dla 4,5:1 na tłach *-soft */ --zw-hover: #F1F5F9; /* Błękit marki — przycisk Szukaj, focus, zaznaczenia w panelu, linki */ --zw-brand: #1778A6; --zw-brand-hover: #146C96; --zw-brand-accent: #27A3DC; --zw-brand-soft: #EAF6FC; --zw-brand-line: #BFE3F4; --zw-brand-ink: #125F84; /* Złoto marki — wyłącznie w blokach pod wynikami (wybór redakcji, CTA) */ --zw-gold: #F4BD37; --zw-gold-deep: #9A7112; /* Grupy typów materiałów: akcent / tło / ramka aktywna / napis */ --zw-feed: #D97706; --zw-feed-soft: #FEF6EC; --zw-feed-line: #F6DCBB; --zw-feed-ink: #92400E; --zw-wiedza: #1A86B8; --zw-wiedza-soft: #EAF6FC; --zw-wiedza-line: #BFE3F4; --zw-wiedza-ink: #125F84; --zw-praktyka: #0E9384; --zw-praktyka-soft: #E9F7F5; --zw-praktyka-line: #BFE7E1; --zw-praktyka-ink: #0A6358; --zw-wzory: #6D4AE0; --zw-wzory-soft: #F1EDFD; --zw-wzory-line: #D9CEFA; --zw-wzory-ink: #5234C0; /* Kształt i głębia — jeden cień na cały ekran */ --zw-radius-card: 12px; --zw-radius-ctrl: 8px; --zw-radius-chip: 6px; --zw-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04); --zw-shadow-hover: 0 4px 12px rgba(15, 23, 42, .08); /* Układ */ /* Marginesy boczne jak na reszcie serwisu (decyzja właściciela 2026-09-17: „nie rozszerzałbym tego do pełnej strony"). `/feed/` ma 1280 px treści, `/products/` 1320 — bierzemy szerszą z dwóch, bo tu obok wyników stoi jeszcze panel filtrów. Runda 8 rozszerzyła stronę do 1640 px, żeby zmieścić cztery rozwinięte karty grup; od rundy 10 karty są ZWINIĘTE i tamten powód znika. */ /* JEDEN DO JEDNEGO z `/feed/` (decyzja właściciela 2026-09-17, wieczór). `.page` na feedzie ma `max-width: 1280px` i `padding-inline: 28px`, więc treść zaczyna się na 228 px przy oknie 1680. Te same dwie liczby tutaj dają ten sam margines — wcześniej 1320/28 dawało 208 px i biblioteka odstawała od reszty serwisu o 20 px. Zmiana którejkolwiek z nich rozjeżdża marginesy między zakładkami. */ --zw-max: 1280px; --zw-gutter: 28px; --zw-side: 236px; --zw-topbar-h: 84px; /* górny pasek serwisu na desktopie (nav-drawer.css) */ /* Tło sekcji „Zasoby wiedzy" — czytają je też paski przyklejane w tej sekcji, żeby przewijana treść nie prześwitywała innym odcieniem. */ --zw-kb-bg: color-mix(in srgb, var(--zw-bg) 50%, var(--zw-surface)); /* Ile ekranu zajmuje przyklejony nagłówek „Zasoby wiedzy" (C1). Mierzy go `syncStickyHead()` w JS; ta wartość obowiązuje tylko bez skryptu. */ --zw-kb-head: 96px; /* Odcień bieżącej grupy — nadpisują go klasy `zw-tone--*` */ --tone: #64748B; --tone-soft: #F1F5F9; --tone-line: #E2E8F0; --tone-ink: #475569; background: var(--zw-bg); color: var(--zw-text); font-size: 14px; line-height: 20px; } .zw-tone--feed { --tone: var(--zw-feed); --tone-soft: var(--zw-feed-soft); --tone-line: var(--zw-feed-line); --tone-ink: var(--zw-feed-ink); } .zw-tone--wiedza { --tone: var(--zw-wiedza); --tone-soft: var(--zw-wiedza-soft); --tone-line: var(--zw-wiedza-line); --tone-ink: var(--zw-wiedza-ink); } .zw-tone--praktyka { --tone: var(--zw-praktyka); --tone-soft: var(--zw-praktyka-soft); --tone-line: var(--zw-praktyka-line); --tone-ink: var(--zw-praktyka-ink); } .zw-tone--wzory { --tone: var(--zw-wzory); --tone-soft: var(--zw-wzory-soft); --tone-line: var(--zw-wzory-line); --tone-ink: var(--zw-wzory-ink); } .zw *, .zw *::before, .zw *::after { box-sizing: border-box; } .zw [hidden] { display: none !important; } .zw-wrap { max-width: var(--zw-max); margin-inline: auto; padding-inline: var(--zw-gutter); } .zw-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Fokus: ramka w błękicie marki + miękka poświata (specyfikacja §9). */ .zw a:focus-visible, .zw button:focus-visible, .zw select:focus-visible, .zw summary:focus-visible, .zw [tabindex]:focus-visible { outline: 2px solid var(--zw-brand); outline-offset: 2px; box-shadow: 0 0 0 5px var(--zw-brand-soft); border-radius: var(--zw-radius-ctrl); } /* Kotwice: lądowanie pod przyklejonym paskiem serwisu I pod przyklejonym nagłówkiem sekcji. Odstęp liczy CSS, nigdy JS (CLAUDE.md §35) — JS dostarcza tylko zmierzoną wysokość nagłówka. */ .zw-types, .zw-results, .zw-hit, .zw-facet { scroll-margin-top: calc(var(--zw-topbar-h) + var(--zw-kb-head) + 16px); } /* --- przyciski ---------------------------------------------------------- */ .zw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--zw-radius-ctrl); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .zw-btn--primary { background: var(--zw-brand); color: #FFFFFF; } .zw-btn--primary:hover { background: var(--zw-brand-hover); color: #FFFFFF; } .zw-btn--ghost { background: var(--zw-surface); color: var(--zw-text); border-color: var(--zw-border-strong); } .zw-btn--ghost:hover { border-color: var(--zw-text-muted); color: var(--zw-text); } .zw-btn--small { height: 34px; padding: 0 12px; font-size: 13px; } .zw-btn--block { width: 100%; } /* ========================================================================== Hero + wyszukiwarka główna (§4) ========================================================================== */ /* PRZYKLEJONY NAGŁÓWEK (C1, makieta 2026-09-18, ref/02). Przykleja się WYŁĄCZNIE wiersz nagłówka: tytuł + wyszukiwarka (+ „Dodaj materiał"). Kafle typów, aktywne filtry i licznik wyników jadą z treścią — przyklejone razem z nagłówkiem zabierały za dużo ekranu (rozmowa z właścicielem). Granicą jest sekcja `.zw-kb`: nagłówek nie wyjeżdża nad blok górny. Pełne tło, żeby treść nie prześwitywała. `z-index: 25` — nad treścią wyników (wiersze 1, podniesiony dymek AI 20), pod paskiem serwisu (10000) i jego menu „Moje konto". */ .zw-hero { position: sticky; top: var(--zw-topbar-h); z-index: 25; padding-block: 12px; background: var(--zw-kb-bg); transition: box-shadow 140ms ease; } /* Cień dopiero w stanie przyklejonym — wcześniej rysowałby kreskę w środku sekcji. Klasę przełącza JS. */ .zw-hero.is-stuck { box-shadow: 0 1px 0 var(--zw-border), 0 12px 20px -16px rgba(15, 23, 42, .28); } /* Nagłówek bloku wyszukiwania — ŚCIEŚNIONY (decyzja właściciela 2026-09-17: „to powinno być zgrabniejsze, powinno być mniejsze"). Tytuł i wyszukiwarka w jednym rzędzie, bez karty i bez cienia: pod spodem zaczyna się rząd kart typów, a trzy ramki jedna pod drugą robiły z górnej części strony harmonijkę. Zmierzone: hero schodzi z 216 px do ~96 px. */ .zw-hero__inner { display: grid; grid-template-columns: minmax(0, auto) minmax(320px, 1fr); align-items: center; gap: 12px 28px; padding: 0; border-radius: 0; background: transparent; border: 0; box-shadow: none; } .zw .zw-hero__title { margin: 0 0 2px; font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -0.02em; color: var(--zw-brand-ink); white-space: nowrap; } .zw-hero__lead { margin: 0; max-width: 44ch; font-size: 13px; line-height: 18px; color: var(--zw-text-muted); } /* Rząd: wyszukiwarka + (dla autorów) wejście do kreatora. */ .zw-hero__search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .zw-hero__search .zw-search { flex: 1 1 320px; min-width: 0; } .zw-search { display: block; margin: 0; } /* Pigułka: ramkę rysuje POJEMNIK, nie `input`, więc pole i przycisk czytają się jako jedna kontrolka, a fokus podświetla całość (makieta właściciela). `position: relative` zostaje — to kotwica listy podpowiedzi. */ .zw-search__field { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; height: 48px; padding: 5px 5px 5px 16px; border: 1.5px solid var(--zw-brand-line); border-radius: 12px; background: var(--zw-surface); transition: border-color 120ms ease, box-shadow 120ms ease; } .zw-search__field:focus-within { border-color: var(--zw-brand); box-shadow: 0 0 0 3px var(--zw-brand-soft); } .zw-search__icon { flex: 0 0 auto; color: var(--zw-text-muted); pointer-events: none; } .zw .zw-search__input { flex: 1 1 auto; width: auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--zw-text); font-family: inherit; font-size: 15px; box-shadow: none; -webkit-appearance: none; appearance: none; } .zw .zw-search__input::placeholder { color: var(--zw-text-muted); opacity: 1; } /* Obwódkę pokazuje pigułka (`:focus-within`) — druga, na samym polu, rysowałaby ramkę w ramce. */ .zw .zw-search__input:focus, .zw .zw-search__input:focus-visible { outline: none; border: 0; box-shadow: none; } .zw-search__submit { flex: 0 0 auto; min-width: 96px; height: 36px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--zw-brand); color: #FFFFFF; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color 120ms ease; } .zw-search__submit:hover { background: var(--zw-brand-hover); } .zw-hero__query { margin: 10px 0 0; } .zw-add { flex: 0 0 auto; display: inline-flex; align-items: center; height: 48px; padding: 0 14px; border-radius: var(--zw-radius-ctrl); background: var(--zw-surface); border: 1px solid var(--zw-border-strong); color: var(--zw-text); font-size: 13px; font-weight: 600; text-decoration: none; } .zw-add:hover { border-color: var(--zw-brand); color: var(--zw-brand-ink); } /* --- podpowiedzi w trakcie pisania (ulepszenie JS) ---------------------- */ .zw-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; max-height: 60vh; overflow-y: auto; padding: 6px; background: var(--zw-surface); border: 1px solid var(--zw-border); border-radius: var(--zw-radius-card); box-shadow: 0 18px 40px rgba(15, 23, 42, .14); } .zw-suggest__label { margin: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--zw-text-muted); } .zw-suggest__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--zw-radius-ctrl); color: var(--zw-text); cursor: pointer; } .zw-suggest__item.is-active, .zw-suggest__item:hover { background: var(--zw-brand-soft); } .zw-suggest__kind { flex: 0 0 auto; padding: 2px 7px; border-radius: var(--zw-radius-chip); background: var(--zw-hover); color: var(--zw-text-2); font-size: 12px; font-weight: 600; } .zw-suggest__mark { flex: 0 0 auto; display: flex; color: var(--zw-text-muted); } .zw-suggest__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .zw-suggest__title mark { background: #FEF3C7; color: inherit; font-weight: 600; } .zw-suggest__count { flex: 0 0 auto; font-size: 12px; color: var(--zw-text-muted); font-variant-numeric: tabular-nums; } .zw-suggest__foot { margin: 6px 10px 4px; padding-top: 8px; border-top: 1px solid var(--zw-border); font-size: 12px; color: var(--zw-text-muted); } /* ========================================================================== Układ: panel filtrów + treść (§2) ========================================================================== */ .zw-layout { display: grid; grid-template-columns: var(--zw-side) minmax(0, 1fr); align-items: start; gap: 20px; /* Mały odstęp od nagłówka: hero, karty typów i wyniki mają czytać się jako JEDEN blok wyszukiwania, a nie trzy osobne. */ padding-block: 14px 48px; } .zw-content { min-width: 0; } .zw-section-title, .zw .zw-section-title { margin: 0 0 10px; font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: 0; color: var(--zw-text); } /* ========================================================================== Panel filtrów — fasety (§6) ========================================================================== */ .zw-side { position: sticky; /* Pod paskiem serwisu I pod przyklejonym nagłówkiem sekcji (C1). */ top: calc(var(--zw-topbar-h) + var(--zw-kb-head) + 8px); max-height: calc(100vh - var(--zw-topbar-h) - var(--zw-kb-head) - 24px); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--zw-radius-card); /* Bez widocznego suwaka (B1, rozmowa z właścicielem 2026-09-18). Kolumna dalej przewija się kółkiem, palcem i klawiaturą; to, że niżej jest coś jeszcze, mówi wygaszona dolna krawędź (`.has-more`). */ scrollbar-width: none; } .zw-side::-webkit-scrollbar { display: none; } /* Wygaszenie tylko wtedy, gdy pod spodem naprawdę coś jest — klasę przełącza JS; na dole listy znika, bo przygaszony ostatni wiersz wyglądałby na nieczytelny, a nie na „jest więcej". Tylko na szerokim ekranie: niżej kolumna nie przewija się sama. */ @media (min-width: 1024px) { .zw-side.has-more { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent); } } .zw-skip { position: absolute; left: -9999px; top: 8px; z-index: 5; padding: 8px 12px; border-radius: var(--zw-radius-ctrl); background: var(--zw-brand); color: #FFFFFF; font-weight: 600; text-decoration: none; } .zw-skip:focus { left: 8px; } /* Przycisk „Filtry (N)" istnieje tylko poniżej 1024 px. */ .zw-filters__toggle { display: none; } .zw-filters__toggle::-webkit-details-marker { display: none; } .zw-filters__panel { background: var(--zw-surface); border: 1px solid var(--zw-border); border-radius: var(--zw-radius-card); box-shadow: var(--zw-shadow); /* Boczne wcięcie 10 px (było 12): te 4 px wracają etykietom, które przy strzałce podkategorii zawijały się bez potrzeby (B3). */ padding: 12px 10px 6px; } .zw-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 3px 9px; border-bottom: 1px solid var(--zw-border); } .zw .zw-filters__title svg { color: var(--zw-brand); } .zw .zw-filters__title { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--zw-text); } .zw-filters__clear { font-size: 13px; font-weight: 600; color: var(--zw-brand-ink); text-decoration: none; } .zw-filters__clear:hover { text-decoration: underline; } .zw-filters__close { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 0; border-radius: var(--zw-radius-ctrl); background: transparent; color: var(--zw-text); cursor: pointer; } .zw-filters__foot { display: none; } /* --- grupa filtrów ------------------------------------------------------ */ /* ROZLUŹNIENIE (B3, rozmowa z właścicielem 2026-09-18: „za ściśnięte, może mniejsze litery"). Styl zostaje; zmieniają się proporcje w obrębie tej samej szerokości kolumny: mniejsze etykiety, więcej powietrza między opcjami i grupami, liczniki w jednej kolumnie po prawej. */ .zw-facet { padding-block: 13px; border-top: 1px solid var(--zw-border); } .zw-filters__head + .zw-facet { border-top: 0; } .zw-facet__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px; list-style: none; cursor: pointer; border-radius: var(--zw-radius-ctrl); } .zw-facet__head::-webkit-details-marker { display: none; } .zw .zw-facet__title { margin: 0; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .01em; color: var(--zw-text); } .zw-facet__chevron { flex: 0 0 auto; color: var(--zw-text-muted); transform: rotate(180deg); transition: transform 120ms ease; } .zw-facet[open] > .zw-facet__head .zw-facet__chevron { transform: none; } .zw-facet__body { padding-top: 8px; } .zw-facet__search { position: relative; margin: 2px 0 6px; } .zw-facet__search svg { position: absolute; left: 10px; top: 11px; color: var(--zw-text-muted); pointer-events: none; } .zw .zw-facet__search input[type="search"] { width: 100%; height: 36px; margin: 0; padding: 0 10px 0 32px; border: 1px solid var(--zw-border-strong); border-radius: var(--zw-radius-ctrl); background: var(--zw-surface); color: var(--zw-text); font-family: inherit; font-size: 14px; -webkit-appearance: none; appearance: none; } .zw .zw-facet__search input[type="search"]:focus { outline: none; border-color: var(--zw-brand); box-shadow: 0 0 0 3px var(--zw-brand-soft); } .zw-facet__reset, .zw-facet__more { display: inline-flex; align-items: center; gap: 4px; margin: 6px 4px 0; font-size: 13px; font-weight: 600; color: var(--zw-brand-ink); text-decoration: none; } .zw-facet__reset:hover, .zw-facet__more:hover { text-decoration: underline; } .zw-facet__note { margin: 4px 4px 0; font-size: 13px; color: var(--zw-text-muted); } /* --- opcja: link-pole wyboru ------------------------------------------- */ .zw-options { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; } .zw-opt { margin: 0; } .zw-opt__row { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 6px 4px; border-radius: var(--zw-radius-chip); color: var(--zw-text); font-size: 12.5px; line-height: 17px; text-decoration: none; transition: background-color 120ms ease; } a.zw-opt__row:hover { background: var(--zw-hover); color: var(--zw-text); } /* Długa etykieta („Formy prowadzenia działalności") zawija się pod sobą. Etykieta nie rozpycha się na cały wiersz, więc strzałka podkategorii stoi tuż za nią, a licznik — dociśnięty do prawej — w jednej kolumnie. */ .zw-opt__label { flex: 0 1 auto; min-width: 0; overflow-wrap: break-word; } .zw-opt__count { flex: 0 0 auto; min-width: 2ch; margin-left: auto; text-align: right; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--zw-text-muted); font-variant-numeric: tabular-nums; } /* Zero wyników w KARCIE TYPÓW = wiersz zostaje (układ nie skacze), ale gaśnie i nie jest linkiem — serwer renderuje go jako . W panelu filtrów opcja z zerem wygląda jak każda inna (B2), więc tej klasy nie ma. */ .zw-opt.is-empty > .zw-opt__row { opacity: .45; pointer-events: none; } /* Podkategorie: wcięcie I pionowa kreska. Samo wcięcie nie wystarczało — właściciel zgłosił (2026-09-17), że nie widać, iż lista pod rdzeniem do niego należy. Kreska prowadzi wzrok od zaznaczonego rdzenia w dół. */ .zw-options--nested { margin: 2px 0 4px 11px; padding-left: 13px; border-left: 2px solid var(--tone-line, var(--zw-brand-line)); } .zw-options--nested .zw-opt__row { min-height: 27px; font-size: 12px; } /* Strzałka przy rdzeniu, który ma podkategorie — zapowiedź, że klik coś rozwinie. Obraca się, gdy rdzeń jest zaznaczony i lista jest już widoczna. */ .zw-opt__chevron { flex: 0 0 auto; margin-left: -5px; color: var(--zw-text-muted); opacity: .55; transition: transform 120ms ease, opacity 120ms ease; } .zw-opt__row:hover .zw-opt__chevron { opacity: 1; } .zw-opt.is-checked > .zw-opt__row .zw-opt__chevron, .zw-opt.is-mixed > .zw-opt__row .zw-opt__chevron { transform: rotate(180deg); opacity: 1; } /* Pole wyboru rysowane: link z `role="checkbox"` nie ma własnego pola. */ .zw-box { position: relative; flex: 0 0 auto; width: 16px; height: 16px; border: 1.5px solid var(--zw-border-strong); border-radius: 4px; background: var(--zw-surface); transition: background-color 120ms ease, border-color 120ms ease; } .zw-box--radio { border-radius: 50%; } [aria-checked="true"] > .zw-box--checkbox, [aria-checked="mixed"] > .zw-box--checkbox { background: var(--zw-box-on, var(--zw-brand)); border-color: var(--zw-box-on, var(--zw-brand)); } [aria-checked="true"] > .zw-box--checkbox::after { content: ''; position: absolute; left: 4px; top: 0.5px; width: 4.5px; height: 9px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); } [aria-checked="mixed"] > .zw-box--checkbox::after { content: ''; position: absolute; left: 3px; right: 3px; top: 5.5px; height: 2px; border-radius: 1px; background: #FFFFFF; } [aria-checked="true"] > .zw-box--radio { border: 4.5px solid var(--zw-brand); } a.zw-opt__row:hover > .zw-box { border-color: var(--zw-text-muted); } a.zw-opt__row[aria-checked="true"]:hover > .zw-box--checkbox { border-color: var(--zw-box-on, var(--zw-brand)); } /* ========================================================================== Karty grup typów materiałów (§5) ========================================================================== */ .zw-types { margin-bottom: 20px; } .zw-types__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 10px; } .zw-type { --zw-box-on: var(--tone); display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--zw-surface); border: 1px solid var(--zw-border); border-radius: var(--zw-radius-card); box-shadow: var(--zw-shadow); transition: box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease; } .zw-type:hover { box-shadow: var(--zw-shadow-hover); } /* ŻADNEGO `subgrid` w tej siatce — i to jest decyzja, nie przeoczenie. Subgrid wiąże wiersze wszystkich kart, więc rozwinięcie JEDNEJ listy rodzajów rozciągało pozostałe trzy (zmierzone: 139 px → 285 px na każdej karcie, mimo że rozwinięta była jedna). Właściciel wybrał rozwijanie niezależne, więc karty muszą rosnąć osobno. Nagłówki wyrównuje zamiast tego `min-height` — przy dzisiejszych opisach (dwa wiersze) wszystkie cztery przyciski stoją równo, a opis trzywierszowy po prostu przesunie jeden z nich niżej. To jest cena, którą warto zapłacić za niezależne rozwijanie. */ .zw-type__head { min-height: 93px; } /* Aktywna (cała albo częściowo): tło i ramka w odcieniu grupy. Ramka 1,5 px rysowana cieniem wewnętrznym — zmiana grubości `border` przesuwałaby treść. */ .zw-type.is-all, .zw-type.is-some { background: var(--tone-soft); border-color: var(--tone-line); box-shadow: inset 0 0 0 .5px var(--tone-line), var(--zw-shadow); } /* Pole wyboru siedzi w ROGU karty (makieta), a nie w trzeciej kolumnie siatki: w trzeciej zabierało 30 px kolumnie tekstu na całej wysokości nagłówka, choć koliduje wyłącznie z pierwszym wierszem. Miejsce robi mu odstęp w `.zw-type__line`. */ .zw-type__head { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 12px 9px; color: var(--zw-text); text-decoration: none; } a.zw-type__head:hover { color: var(--zw-text); } /* Kafelek ikony trzyma kolor grupy ZAWSZE, nie dopiero po zaznaczeniu — to on odróżnia karty od siebie, gdy nic nie jest wybrane (stan wyjściowy strony). */ .zw-type__icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--tone-soft); color: var(--tone); font-size: 14px; transition: background-color 120ms ease, color 120ms ease; } .zw-type.is-all .zw-type__icon, .zw-type.is-some .zw-type__icon { background: var(--zw-surface); } .zw-type__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } /* Wiersz tekstowy, nie flex: plakietka ma płynąć za ostatnim słowem nazwy i łamać się razem z nim. Odstęp z prawej = miejsce pod pole wyboru w rogu. */ .zw-type__line { display: block; padding-right: 20px; min-width: 0; } .zw-type__name { font-size: 12.5px; line-height: 18px; font-weight: 700; color: var(--zw-text); } .zw-type__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin-left: 4px; padding: 0 4px; border-radius: 999px; background: var(--zw-hover); color: var(--zw-text-2); font-size: 10px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: 1px; } .zw-type.is-all .zw-type__badge, .zw-type.is-some .zw-type__badge { background: var(--zw-surface); color: var(--tone-ink); } /* Bez obcinania: zdanie „po co ta półka" ma dwie-trzy linijki i urwane wielokropkiem nie mówi nic (CLAUDE.md — licznik i limit mierzą to samo). */ .zw-type__purpose { font-size: 11.5px; line-height: 15px; color: var(--zw-text-muted); } .zw-type__head > .zw-box { position: absolute; top: 10px; right: 10px; width: 17px; height: 17px; border-radius: 4px; } /* Ptaszek dociągnięty do pola 17 px — reguła ogólna jest liczona dla 18 px. */ .zw-type__head[aria-checked="true"] > .zw-box--checkbox::after { left: 4.5px; top: 1px; width: 5px; height: 9px; } .zw-type__head[aria-checked="mixed"] > .zw-box--checkbox::after { top: 6.5px; } /* Półka bez ani jednego materiału: przygaszona, ale nie wymarła — kolor grupy i ikona zostają, bo karta dalej mówi, co się tu pojawi. */ .zw-type.is-empty > .zw-type__head { opacity: .7; cursor: default; } /* Lista rodzajów siedzi w `
`, a przycisk rozwijający ma być na DOLE karty. `` musi być pierwszym dzieckiem `
`, więc kolejność odwraca układ, a nie znacznik — semantyka zostaje nietknięta. */ .zw-type__more { display: flex; flex-direction: column-reverse; } .zw-type__toggle { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 12px 8px; list-style: none; cursor: pointer; color: var(--zw-text-muted); font-size: 11px; font-weight: 600; border-radius: 0 0 var(--zw-radius-card) var(--zw-radius-card); } .zw-type__toggle::-webkit-details-marker { display: none; } .zw-type__toggle:hover { color: var(--zw-text-2); background: var(--zw-hover); } .zw-type__chevron { flex: 0 0 auto; transition: transform 120ms ease; } .zw-type__more[open] .zw-type__chevron { transform: rotate(180deg); } .zw-type__body { padding: 4px 8px 6px; border-top: 1px solid var(--zw-border); background: var(--zw-surface); } /* Zaznaczona karta niesie odcień grupy W CAŁOŚCI — nagłówek i lista rodzajów (makieta widoku listy). Tło bierze się z samej karty, więc lista musi tylko przestać je zasłaniać własną bielą. */ .zw-type.is-all .zw-type__body, .zw-type.is-some .zw-type__body { background: transparent; } .zw-type.is-all .zw-type__body, .zw-type.is-some .zw-type__body { border-top-color: var(--tone-line); } .zw-type__subtitle { margin: 4px 8px 2px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--zw-text); } .zw-options--type .zw-opt__row { min-height: 27px; padding: 3px 6px; gap: 7px; font-size: 12px; } .zw-options--type .zw-opt.is-checked > .zw-opt__row { background: var(--tone-soft); } .zw-options--type a.zw-opt__row:hover { background: var(--tone-soft); } /* ========================================================================== Pasek wyników, aktywne filtry, odczytanie frazy (§7) ========================================================================== */ .zw-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 12px; } .zw .zw-bar__count { margin: 0; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--zw-text); } .zw-bar__controls { display: flex; align-items: center; gap: 12px; } .zw-sort { display: flex; align-items: center; gap: 8px; margin: 0; } .zw-sort__label { font-size: 14px; color: var(--zw-text-muted); } .zw .zw-sort__select { height: 40px; margin: 0; padding: 0 36px 0 12px; border: 1px solid var(--zw-border-strong); border-radius: var(--zw-radius-ctrl); background: var(--zw-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--zw-text); font-family: inherit; font-size: 14px; cursor: pointer; -webkit-appearance: none; appearance: none; } .zw-views { display: flex; overflow: hidden; border: 1px solid var(--zw-border-strong); border-radius: var(--zw-radius-ctrl); background: var(--zw-surface); } .zw-views__btn { width: 40px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--zw-text-muted); text-decoration: none; transition: background-color 120ms ease, color 120ms ease; } .zw-views__btn + .zw-views__btn { border-left: 1px solid var(--zw-border-strong); } .zw-views__btn:hover { background: var(--zw-hover); color: var(--zw-text); } .zw-views__btn.is-active { background: var(--zw-brand); color: #FFFFFF; } .zw-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; } .zw-chips__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .zw-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 10px 5px 12px; border-radius: 999px; background: var(--zw-brand-soft); color: var(--zw-brand-ink); font-size: 13px; line-height: 18px; font-weight: 500; text-decoration: none; transition: background-color 120ms ease; } .zw-chip:hover { background: #D5EDF8; color: var(--zw-brand-ink); } .zw-chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zw-chip svg { flex: 0 0 auto; } .zw-chips__clear { font-size: 13px; font-weight: 600; color: var(--zw-brand-ink); text-decoration: underline; text-underline-offset: 2px; } .zw-reading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; padding: 10px 12px; background: var(--zw-surface); border: 1px solid var(--zw-border); border-radius: var(--zw-radius-ctrl); } .zw-reading__label { font-size: 13px; font-weight: 600; color: var(--zw-text); } .zw-reading__terms { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .zw-term { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--zw-hover); color: var(--zw-text); font-size: 13px; line-height: 18px; font-weight: 500; text-decoration: none; } a.zw-term:hover { background: #E2E8F0; color: var(--zw-text); } .zw-term.is-missing { color: var(--zw-text-muted); } .zw-term__note { padding: 0 5px; border-radius: 4px; background: var(--zw-surface); font-size: 11px; color: var(--zw-text-muted); } .zw-reading__ignored, .zw-reading__related, .zw-reading__note { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 18px; color: var(--zw-text-muted); } .zw-reading__related { color: var(--zw-text-2); font-weight: 500; } /* ========================================================================== Wyniki — karty (§7) ========================================================================== */ .zw-list { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; } .zw-hit { margin: 0; min-width: 0; } .zw-hit__card { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr); grid-template-areas: "media body"; gap: 16px; height: 100%; padding: 16px; background: var(--zw-surface); border: 1px solid var(--zw-border); border-radius: var(--zw-radius-card); transition: box-shadow 120ms ease, border-color 120ms ease; } .zw-hit__card:hover { box-shadow: var(--zw-shadow-hover); border-color: var(--zw-border-strong); } /* Fokus na tytule podświetla CAŁĄ kartę — rozciągnięty link jest jej celem. */ .zw-hit__card:has(.zw-hit__link:focus-visible) { border-color: var(--zw-brand); box-shadow: 0 0 0 3px var(--zw-brand-soft); } .zw-hit__body { grid-area: body; display: flex; flex-direction: column; min-width: 0; } .zw-hit__media { grid-area: media; width: 160px; height: 100px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: var(--zw-radius-ctrl); background: var(--tone-soft); color: var(--tone); font-size: 32px; } /* Materiał bez okładki dostaje tabliczkę marki (§39). Jeden plik obsługuje każde przycięcie, bo cała treść znaku siedzi w środkowym kwadracie — stąd `cover` niżej, wspólne dla okładki i tabliczki. */ .zw-hit__media--empty { background: var(--tone-soft); } .zw-hit__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .zw-hit__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; } /* Plakietki, zakładka i podpis autora stoją NAD rozciągniętym linkiem tytułu. */ .zw-hit__tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; } /* Dymek „udział AI" liczy się wewnątrz `.zw-hit__tags`; na czas otwarcia kontener idzie wyżej niż sąsiednie elementy (CLAUDE.md §14, §33). */ .zw-hit__tags:has(.ai-badge.is-open) { z-index: 20; } .zw-tag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px; border-radius: var(--zw-radius-chip); font-size: 12px; line-height: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zw-tag i { flex: 0 0 auto; font-size: 11px; } .zw-tag--group { background: var(--tone-soft); color: var(--tone-ink); } .zw-tag--group i { color: var(--tone); } .zw-tag--domain, .zw-tag--files { background: var(--zw-hover); color: #475569; } a.zw-tag:hover { text-decoration: underline; text-underline-offset: 2px; } a.zw-tag--group:hover { color: var(--tone-ink); } a.zw-tag--domain:hover { color: #475569; } .zw-relevance { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--zw-brand-ink); white-space: nowrap; } .zw-relevance.is-weak { color: var(--zw-text-muted); font-weight: 500; } .zw-save { position: relative; z-index: 1; flex: 0 0 auto; margin: -8px -8px 0 0; } .zw-save__btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--zw-radius-ctrl); background: transparent; color: var(--zw-text-muted); cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .zw-save__btn svg { fill: none; } .zw-save__btn:hover { background: var(--zw-hover); color: var(--zw-text); } .zw-save__btn.is-on { color: var(--zw-brand); } .zw-save__btn.is-on svg { fill: currentColor; } .zw-save__btn[disabled] { opacity: .6; cursor: default; } .zw .zw-hit__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 6px; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--zw-text); } .zw-hit__link { color: inherit; text-decoration: none; } .zw-hit__link:hover { color: var(--zw-brand-ink); } .zw-hit__link:focus-visible { outline: none; box-shadow: none; } .zw-hit__link::after { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: var(--zw-radius-card); } .zw-hit__title mark, .zw-hit__lead mark { padding: 0 1px; border-radius: 2px; background: #FEF3C7; color: inherit; } .zw-hit__lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 12px; font-size: 14px; line-height: 21px; color: var(--zw-text-muted); } .zw-hit__lead--locked { font-style: italic; } .zw-hit__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: auto 0 0; font-size: 13px; line-height: 18px; color: var(--zw-text-muted); } .zw-meta { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .zw-meta__icon { flex: 0 0 auto; color: #94A3B8; } .zw-meta--author { position: relative; z-index: 1; } .zw-meta__author { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--zw-text-2); font-weight: 500; text-decoration: none; } a.zw-meta__author:hover { color: var(--zw-brand-ink); text-decoration: underline; } .zw-avatar { display: none; /* w liście ikona, w kafelkach awatar */ flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--zw-hover); } .zw-avatar--initial { align-items: center; justify-content: center; background: var(--zw-brand-soft); color: var(--zw-brand-ink); font-size: 11px; font-weight: 700; } /* Materiał zamknięty dla konta bez Plusa — sama zapowiedź. */ .zw-hit.is-locked .zw-hit__media { opacity: .7; } /* --- kreska „Pokrewne materiały" ---------------------------------------- */ .zw-split { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; padding: 14px 4px 2px; border-top: 1px solid var(--zw-border-strong); } .zw-split__label { font-size: 14px; font-weight: 600; color: var(--zw-text); } .zw-split__note { font-size: 13px; color: var(--zw-text-muted); } /* --- widok kafelków (≥ 768 px; na telefonie zawsze lista) --------------- Kafelek to karta z OKŁADKĄ NA GÓRZE, nie sam tekst. Do rundy 9 grafika była w kafelkach ukryta (`display: none`) i wychodziła ściana napisów: trzy kolumny szarego tekstu bez punktu zaczepienia dla oka. Przy okazji zniknął drugi objaw — kafelki w rzędzie mają wspólną wysokość (`1fr`), a że tytuł brał 3 wiersze, a zajawka 3, to przy krótkim materiale między zajawką a stopką zostawała dziura na pół karty. Teraz tytuł ma 2 wiersze, zajawka 2, a grafika o stałych proporcjach wyrównuje górę wszystkich kafelków. Znacznik zostaje TEN SAM co w liście (`_hit.html`) — kolejność w kodzie to dalej treść przed grafiką (czytnik ekranu dostaje najpierw tytuł), a układ przestawia `grid-template-areas`. Dwa widoki, jeden szablon. ---------------------------------------------------------------------- */ @media (min-width: 768px) { .zw-list--kafelki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; } /* Kreska „Pokrewne" ma własną wysokość, a nie wysokość karty. */ .zw-list--kafelki:has(.zw-split) { grid-auto-rows: auto; } .zw-list--kafelki .zw-split { grid-column: 1 / -1; } .zw-list--kafelki .zw-hit__card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "media" "body"; gap: 0; padding: 0; overflow: hidden; /* okładka przycina się do rogów karty */ } .zw-list--kafelki .zw-hit__media { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; } .zw-list--kafelki .zw-hit__body { padding: 14px 16px 16px; } /* Zakładka wchodzi NA okładkę: w kafelku nie ma dla niej wiersza, a przy plakietkach zawijających się do dwóch linii lądowała krzywo. Tło pełne, BEZ `backdrop-filter` — filtr robi z elementu blok zawierający dla `position: fixed`, a dymek plakietki „AI" jest właśnie `fixed` (CLAUDE.md §14). */ .zw-list--kafelki .zw-save { position: absolute; top: 10px; right: 10px; z-index: 2; margin: 0; } .zw-list--kafelki .zw-save__btn { width: 34px; height: 34px; background: rgba(255, 255, 255, .94); box-shadow: 0 1px 3px rgba(15, 23, 42, .18); color: var(--zw-text-2); } .zw-list--kafelki .zw-save__btn:hover { background: #FFFFFF; color: var(--zw-text); } .zw-list--kafelki .zw-save__btn.is-on { color: var(--zw-brand); } .zw-list--kafelki .zw-hit__top { margin-bottom: 10px; } .zw-list--kafelki .zw-hit__tags { gap: 4px 8px; } /* Pigułkę dostaje RODZAJ materiału i plakietka „AI"; dziedzina i liczba plików schodzą do cichego tekstu (tak jak na makiecie kafelków). Powód jest mierzalny, nie estetyczny: w kafelku 409 px trzy pigułki obok siebie zawijały się do drugiego wiersza i tytuł startował niżej niż u sąsiadów, więc rząd rozjeżdżał się w pionie. */ .zw-list--kafelki .zw-tag--domain, .zw-list--kafelki .zw-tag--files { padding: 0; background: transparent; color: var(--zw-text-muted); font-weight: 500; } .zw-list--kafelki a.zw-tag--domain:hover { color: var(--zw-brand-ink); } .zw-list--kafelki .zw-hit__title { -webkit-line-clamp: 2; margin-bottom: 8px; font-size: 16px; line-height: 22px; } .zw-list--kafelki .zw-hit__lead { -webkit-line-clamp: 2; margin-bottom: 14px; font-size: 13.5px; line-height: 20px; } .zw-list--kafelki .zw-hit__meta { gap: 4px 12px; padding-top: 12px; border-top: 1px solid var(--zw-border); font-size: 12.5px; } .zw-list--kafelki .zw-meta--author { flex: 1 0 100%; } .zw-list--kafelki .zw-meta--author .zw-meta__icon { display: none; } .zw-list--kafelki .zw-avatar { display: inline-flex; } /* Materiał zamknięty dla konta bez Plusa nie ma okładki — kafelek dostaje sam odcień grupy zamiast dziury po grafice. */ .zw-list--kafelki .zw-hit.is-locked .zw-hit__media { opacity: 1; } } /* --- stan pusty --------------------------------------------------------- */ .zw-empty { padding: 32px 24px; text-align: center; background: var(--zw-surface); border: 1px dashed var(--zw-border-strong); border-radius: var(--zw-radius-card); } .zw-empty__title { margin: 0 0 6px; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--zw-text); } .zw-empty__body { max-width: 56ch; margin: 0 auto 16px; font-size: 14px; line-height: 21px; color: var(--zw-text-muted); } .zw-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; } /* --- strony ------------------------------------------------------------- */ .zw-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; } .zw-pager__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; } .zw-pager__num, .zw-pager__step, .zw-pager__gap { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; border-radius: var(--zw-radius-ctrl); color: var(--zw-text); font-size: 14px; font-weight: 500; text-decoration: none; font-variant-numeric: tabular-nums; } a.zw-pager__num:hover, a.zw-pager__step:hover { background: var(--zw-surface); box-shadow: var(--zw-shadow); color: var(--zw-text); } .zw-pager__num.is-current { background: var(--zw-brand); color: #FFFFFF; } .zw-pager__gap { color: var(--zw-text-muted); } /* ========================================================================== Bloki pod wynikami: wyróżnione, najnowsze, opracowania ========================================================================== */ .zw-block { padding-block: 32px; } /* DWIE SEKCJE STRONY (makieta 2026-09-18, ref/03). Najpierw blok redakcji — wyróżnione, najnowsze, autorzy — na jasnym, niebieskawym tle, potem wejście do bazy wiedzy na tle jaśniejszym i neutralnym, z dużym odstępem i własnym nagłówkiem. Oba tła biegną na całą szerokość okna, a treść zostaje w `.zw-wrap`: marginesy i szerokość treści się nie zmieniają. Kolory to mieszanki istniejących tokenów, bez nowej palety. */ .zw-block--more { padding-block: 32px 36px; background: var(--zw-brand-soft); } .zw-kb { padding-top: 32px; border-top: 1px solid var(--zw-brand-line); background: var(--zw-kb-bg); } /* Bez JS blok górny nie istnieje (startuje ukryty), więc sekcja nie ma od czego się odcinać. */ .zw-block--more[hidden] + .zw-kb { border-top: 0; } .zw-block--showcase { background: var(--zw-surface); border-top: 1px solid var(--zw-border); } /* --- materiały wyróżnione: karuzela 1 + 2 (kafle rysuje JS) ------------- Makieta właściciela 2026-09-18: po lewej duży ciemny kafel, po prawej dwie białe karty. Strona to trzy materiały; strzałki podmieniają całą trójkę. Wysokość sceny jest STAŁA, żeby przełączenie strony nie przesuwało bloków pod spodem. OKŁADKA ZAWSZE W CAŁOŚCI (2026-09-19). Nasze okładki to gotowe grafiki 16:9 z wypalonym tytułem, podpisem autora i ramką. Do 18.09 duży kafel rozciągał okładkę na całe tło (widać było jej prawy wycinek pod nakładką, z urwanymi słowami), a mały wciskał ją w prawie kwadrat — właściciel: „obrazki dziwnie rozjechane”. Teraz każde pole grafiki ma proporcje 16:9, a obraz wchodzi przez `contain`: okładka 16:9 wypełnia pole co do piksela, a grafika o innych proporcjach dostaje pasy tła zamiast cięcia. */ .zw-featured__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; } .zw-featured__intro { min-width: 0; } .zw .zw-featured__title, .zw .zw-showcase__title { margin: 0; font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -0.02em; color: var(--zw-text); } .zw-featured__lead, .zw-showcase__hint { margin: 4px 0 0; font-size: 15px; line-height: 22px; color: var(--zw-text-muted); } .zw-featured__nav { display: flex; gap: 10px; flex: 0 0 auto; } .zw-featured__arrow { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--zw-border-strong); border-radius: 50%; background: var(--zw-surface); color: var(--zw-text-2); box-shadow: var(--zw-shadow); cursor: pointer; transition: border-color 120ms ease, color 120ms ease, opacity 120ms ease; } .zw-featured__arrow:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--zw-brand); color: var(--zw-brand-ink); } /* Karuzela wyróżnionych oznacza kraniec `aria-disabled` (przycisk zostaje w kolejności tabulatora), pasek autorów — atrybutem `disabled`. */ .zw-featured__arrow:disabled, .zw-featured__arrow[aria-disabled="true"] { opacity: .4; box-shadow: none; cursor: default; } .zw-feat { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 16px; height: 420px; transition: opacity 180ms ease; } .zw-feat.is-entering { opacity: 0; transition: none; } /* Ostatnia strona z jednym materiałem: sam duży kafel. Na całej szerokości okładka 46% byłaby wyższa niż pas nad stopką (~306 px) i dostałaby pasy tła po bokach — stąd węższe pole. Tylko od 1024: niżej kafel ma i tak jedną kolumnę, a na telefonie okładka idzie na całą szerokość (`auto`). */ .zw-feat--solo { grid-template-columns: minmax(0, 1fr); } @media (min-width: 1024px) { .zw-feat--solo .zw-feat-main__media { width: 40%; } } .zw-feat__side { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; min-height: 0; } /* Pigułki nad tytułem: powód wyboru + kategoria (+ plakietka AI). Rząd stoi NAD linkiem rozciągniętym na kafel, a na czas otwartego dymka AI podnosi się wyżej niż treść sąsiednich kafli (CLAUDE.md §33). */ .zw-feat__pills { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; margin: 0 0 12px; } .zw-feat__pills:has(.ai-badge.is-open) { z-index: 20; } .zw-feat-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: var(--zw-hover); color: var(--zw-text-2); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zw-feat-pill:not(.zw-feat-pill--category)::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Powód „ręcznie wskazany" i „przypięty" — złoto marki, jak na makiecie. */ .zw-feat-pill--manual, .zw-feat-pill--pinned { background: var(--zw-gold); color: var(--zw-text); } .zw-feat-pill--manual::before, .zw-feat-pill--pinned::before { background: var(--zw-gold-deep); } .zw-feat-pill--popular { background: var(--zw-brand-soft); color: var(--zw-brand-ink); } /* Wspólne: tytuł to link rozciągnięty na cały kafel. */ .zw-feat-main__title a, .zw-feat-side__title a { color: inherit; text-decoration: none; } .zw-feat-main__title a::after, .zw-feat-side__title a::after { content: ''; position: absolute; inset: 0; z-index: 0; } .zw-feat-face { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--zw-hover); } .zw-feat-face--initial { display: inline-flex; align-items: center; justify-content: center; background: var(--zw-brand-soft); color: var(--zw-brand-ink); font-size: 12px; font-weight: 700; } /* Nazwisko prowadzi do profilu — stoi nad linkiem kafla. */ .zw-feat-name { position: relative; z-index: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--zw-text-2); text-decoration: none; } a.zw-feat-name:hover { text-decoration: underline; } /* --- duży kafel ---------------------------------------------------------- */ .zw-feat-main { position: relative; display: flex; min-width: 0; border-radius: 16px; background: radial-gradient(90% 110% at 82% 50%, #15496C 0%, rgba(21, 73, 108, 0) 70%), #0B3550; box-shadow: var(--zw-shadow); color: #FFFFFF; } /* Okładka stoi OBOK tekstu, nie pod nim — tytuł na wypalonym tytule okładki dawał dwa nałożone napisy. Pole trzyma 16:9 i stoi po prawej; kolumna tekstu kończy się przed nim (`max-width` tytułu i zajawki niżej). Środek pola to środek pasa NAD stopką (od górnego odstępu 28 px do 86 px od dołu: odstęp 26 + przycisk 46 + 14 luzu), nie środek kafla — wyśrodkowana w całym kaflu okładka wchodziła na podpis autora, gdy kafel był niski (zmierzone przy 900 px). `max-height` to ten sam pas: gdyby pole się w nim nie zmieściło, `contain` da pasy tła, a nie zachodzenie. Przycina się sam pojemnik, a nie kafel — `overflow: hidden` na kaflu obciąłby dymek plakietki AI (§44c). */ .zw-feat-main__media { position: absolute; top: calc(50% - 29px); right: 28px; width: 46%; max-height: calc(100% - 114px); aspect-ratio: 16 / 9; transform: translateY(-50%); overflow: hidden; border-radius: 12px; background: #0E3F60; box-shadow: 0 14px 34px rgba(3, 16, 26, .45); } .zw-feat-main__media img { width: 100%; height: 100%; object-fit: contain; display: block; } .zw-feat-main__media--empty { background: linear-gradient(135deg, var(--zw-brand-soft) 0%, #FAFCFE 100%); } /* -------------------------------------------------------------------------- Duży kafel ze zdjęciem NA CAŁOŚĆ (Etap B, 2026-09-20) Wariant włącza się WYŁĄCZNIE wtedy, gdy redakcja wgrała w panelu grafikę przygotowaną pod ten kafel. Okładki materiałów mają wypalony tytuł i tu nie trafiają — rozciągnięte kadrowałyby własne napisy i twarze autorów (zgłoszenie „obrazki rozjechane", §44f). Brak grafiki = układ z rundy 13a, czyli okładka obok tekstu. Nakładka nie jest ozdobą: bez niej biały tytuł na jasnym zdjęciu jest nieczytelny, a kontrast tekstu do tła musi trzymać się WCAG niezależnie od tego, co redakcja wgra. Stąd gradient od lewej — mocny pod kolumną tekstu, przezroczysty tam, gdzie zdjęcie ma być widać. -------------------------------------------------------------------------- */ .zw-feat-main--hero { overflow: visible; } /* dymek AI ma nie być przycięty (§44c) */ .zw-feat-main__bg { position: absolute; inset: 0; border-radius: 16px; background-position: center; background-size: cover; background-repeat: no-repeat; } /* Nakładka osobnym pseudoelementem, nie `background-image` na tym samym elemencie: gradient i zdjęcie muszą dać się podmieniać niezależnie, a `background-image` przyjmuje je w jednej właściwości i JS wpisuje tam adres. */ .zw-feat-main__bg::after { content: ''; position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(90deg, rgba(6, 28, 45, .92) 0%, rgba(6, 28, 45, .82) 42%, rgba(6, 28, 45, .35) 72%, rgba(6, 28, 45, .18) 100%); } .zw-feat-main--hero .zw-feat-main__body { position: relative; z-index: 1; } /* Kolumna tekstu jest tu SZERSZA niż w układzie z okładką obok (45%), bo nic nie stoi po prawej — ale nie pełna: zdjęcie ma zostać widoczne, po to się je wgrywa. */ .zw .zw-feat-main--hero .zw-feat-main__title, .zw-feat-main--hero .zw-feat-main__lead { max-width: 62%; } @media (max-width: 900px) { /* Na wąskim ekranie kolumna tekstu zajmuje całość, a nakładka ciemnieje równomiernie — gradient „od lewej" zostawiłby biały tytuł na jasnym fragmencie zdjęcia. */ .zw-feat-main__bg::after { background: linear-gradient(180deg, rgba(6, 28, 45, .55) 0%, rgba(6, 28, 45, .88) 60%, rgba(6, 28, 45, .94) 100%); } .zw .zw-feat-main--hero .zw-feat-main__title, .zw-feat-main--hero .zw-feat-main__lead { max-width: none; } } .zw-feat-main__body { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 28px 30px 26px; } .zw-feat-main .zw-feat-pill--category { background: rgba(255, 255, 255, .16); color: #FFFFFF; } .zw .zw-feat-main__title { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; max-width: 45%; margin: 0 0 12px; font-size: 26px; line-height: 32px; font-weight: 800; letter-spacing: -0.015em; color: #FFFFFF; } .zw-feat-main__title a:focus-visible { outline-color: #FFFFFF; } .zw-feat-main__lead { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 45%; margin: 0; font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .86); } .zw-feat-main__foot { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; margin-top: auto; padding-top: 18px; } /* Wygląda jak przycisk, ale jest częścią linku kafla (patrz JS). */ .zw-feat-main__cta { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 999px; background: #FFFFFF; color: var(--zw-text); font-size: 15px; font-weight: 700; white-space: nowrap; } .zw-feat-main__cta svg { transition: transform 160ms ease; } .zw-feat-main:hover .zw-feat-main__cta svg { transform: translateX(3px); } .zw-feat-main__author { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .zw-feat-main__author .zw-feat-face { width: 42px; height: 42px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); } .zw-feat-main__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .zw-feat-main .zw-feat-name { font-size: 15px; color: #FFFFFF; } .zw-feat-main__date { font-size: 13px; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; } /* --- mały kafel ----------------------------------------------------------- */ /* Pigułki idą wierszem na CAŁĄ szerokość karty, nad okładką i tekstem. W kolumnie obok okładki zostawało na nie ~300 px, więc kategoria urywała się w pół słowa („Kontrole i”); na pełnej szerokości mieści się w całości. Ciało karty jest `display: contents`, żeby tytuł, zajawka i stopka stanęły w siatce obok okładki. */ .zw-feat-side { position: relative; display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); grid-template-areas: "pills pills" "media title" "media lead" "media foot"; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 0 18px; min-height: 0; padding: 16px; border: 1px solid var(--zw-border); border-radius: 16px; background: var(--zw-surface); box-shadow: var(--zw-shadow); transition: box-shadow 140ms ease; } .zw-feat-side:hover { box-shadow: var(--zw-shadow-hover); } /* Miniatura w proporcjach okładki, wyśrodkowana w pionie — rozciągnięta na wysokość karty wycinała z okładki środkowy pasek z urwanym tytułem. */ .zw-feat-side__media { grid-area: media; align-self: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--zw-hover); } .zw-feat-side__media img { width: 100%; height: 100%; object-fit: contain; display: block; } .zw-feat-side__media--empty { background: linear-gradient(135deg, var(--zw-brand-soft) 0%, #FAFCFE 100%); } .zw-feat-side__body { display: contents; } /* Pigułki mieszczą się w JEDNYM wierszu: zawinięte spychały tytuł i zajawkę poza kartę o stałej wysokości. Gdyby kategoria się nie zmieściła, ustępuje ona — wielokropkiem, a nie cięciem w pół litery: `text-overflow` działa tylko w bloku, a pigułka jest `inline-flex` (anonimowy element flex nie dziedziczy `overflow`). Kategoria nie ma kropki `::before`, więc blok jej wystarcza. */ .zw-feat-side .zw-feat__pills { grid-area: pills; flex-wrap: nowrap; margin-bottom: 10px; } .zw-feat-side .zw-feat__pills > * { flex: 0 0 auto; } .zw-feat-side .zw-feat-pill--category { display: block; flex: 0 1 auto; min-width: 0; } .zw .zw-feat-side__title { grid-area: title; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 6px; font-size: 17px; line-height: 23px; font-weight: 700; color: var(--zw-text); } .zw-feat-side:hover .zw-feat-side__title { color: var(--zw-brand-ink); } .zw-feat-side__lead { grid-area: lead; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 14px; line-height: 20px; color: var(--zw-text-muted); } .zw-feat-side__foot { grid-area: foot; align-self: end; display: flex; align-items: center; gap: 12px; min-width: 0; padding-top: 10px; } .zw-feat-side__author { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; } .zw-feat-side__date { flex: 0 0 auto; font-size: 12px; color: var(--zw-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .zw-feat-side__go { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--zw-border-strong); border-radius: 50%; color: var(--zw-text-2); transition: border-color 120ms ease, color 120ms ease; } .zw-feat-side:hover .zw-feat-side__go { border-color: var(--zw-brand); color: var(--zw-brand-ink); } /* Tabliczka marki (materiał bez okładki) — w obu kaflach i w wynikach. */ .zw-media__mark { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- pas „Najnowsze" ---------------------------------------------------- */ .zw-latest { display: flex; align-items: center; gap: 14px; min-width: 0; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--zw-border); } .zw-featured[hidden] + .zw-latest { margin-top: 0; padding-top: 0; border-top: 0; } .zw-latest__label { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--zw-text); } /* Pas jedzie sam jak pasek informacyjny w telewizji: taśma z listą DWA razy przesuwa się o połowę szerokości — pętla bez szwu. W CSS siedzi PRĘDKOŚĆ w px/s, czas liczy JS z długości taśmy (stały czas dałby wolny pas przy trzech tytułach i szybki przy dziesięciu). */ .zw-latest__rail { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); } .zw-latest__track { --zw-ticker-speed: 45; --zw-ticker-dur: 60s; display: flex; align-items: center; width: max-content; } .zw-latest__track.is-running { animation: zw-ticker var(--zw-ticker-dur) linear infinite; } /* WCAG 2.2.2: ruch dłuższy niż 5 s musi dać się zatrzymać. */ .zw-latest__rail:hover .zw-latest__track, .zw-latest__rail:focus-within .zw-latest__track { animation-play-state: paused; } @keyframes zw-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .zw-latest__item { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 8px; max-width: 340px; padding: 4px 16px; border-right: 1px solid var(--zw-border); } .zw-latest__link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; color: var(--zw-text); text-decoration: none; } .zw-latest__link:hover, .zw-latest__link:focus-visible { color: var(--zw-brand-ink); text-decoration: underline; } .zw-latest__date { flex: 0 0 auto; font-size: 12px; color: var(--zw-text-muted); white-space: nowrap; } /* --- materiały promowane (do 2026-09-19 „Opracowania i usługi") ---------- Tytuł i zdanie pod nim dzielą reguły z „Materiałami wyróżnionymi" (wyżej) — trzy bloki strony mają równe nagłówki, więc rozmiar stoi w JEDNYM miejscu. */ .zw-showcase__head { margin-bottom: 18px; } .zw-showcase__hint { max-width: 72ch; } .zw-showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; } .zw-showcase--solo { grid-template-columns: minmax(0, 1fr); } .zw-card { position: relative; display: block; min-height: 210px; overflow: hidden; isolation: isolate; border-radius: var(--zw-radius-card); text-decoration: none; background: var(--zw-card-bg, none) center / cover no-repeat, linear-gradient(135deg, #1A86B8 0%, #0B5E86 100%); } .zw-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 42, 64, .30) 0%, rgba(8, 42, 64, .72) 55%, rgba(8, 42, 64, .88) 100%); } .zw-card__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; height: 100%; padding: 22px 24px 20px; color: #FFFFFF; } .zw-card__kicker { font-size: 12px; font-weight: 700; color: var(--zw-gold); } .zw-card__title { font-size: 22px; line-height: 28px; font-weight: 700; text-wrap: balance; } .zw-card__lead { max-width: 52ch; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .88); } .zw-card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 700; color: var(--zw-gold); } .zw-card__cta svg { transition: transform 160ms ease; } .zw-card:hover .zw-card__cta svg, .zw-card:focus-visible .zw-card__cta svg { transform: translateX(4px); } .zw-card:focus-visible { outline: 3px solid var(--zw-gold); outline-offset: 2px; } .zw-showcase--solo .zw-card { min-height: 300px; background: linear-gradient(120deg, #0B3550 0%, #0B4A6E 100%); } .zw-showcase--solo .zw-card::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; width: 58%; background: var(--zw-card-bg, none) center 30% / cover no-repeat; } .zw-showcase--solo .zw-card__shade { background: linear-gradient(90deg, #0B3550 0%, #0B3550 40%, rgba(11, 53, 80, .72) 55%, rgba(11, 53, 80, .12) 80%, rgba(11, 53, 80, 0) 100%); } .zw-showcase--solo .zw-card__body { max-width: 54%; padding: 34px 40px 32px; gap: 10px; } .zw-showcase--solo .zw-card__kicker { padding: 5px 12px; border: 1px solid rgba(244, 189, 55, .45); border-radius: 999px; background: rgba(244, 189, 55, .08); } .zw-showcase--solo .zw-card__title { font-size: 28px; line-height: 34px; } .zw-showcase--solo .zw-card__lead { font-size: 15px; line-height: 23px; } .zw-showcase--solo .zw-card__cta { margin-top: 10px; padding: 12px 20px; border-radius: var(--zw-radius-ctrl); background: var(--zw-gold); color: #0F172A; transition: background-color 120ms ease; } .zw-showcase--solo .zw-card:hover .zw-card__cta, .zw-showcase--solo .zw-card:focus-visible .zw-card__cta { background: #F7CB5E; } /* ========================================================================== Pasek autorów — kółka ze zdjęciem pod „Najnowszymi" (runda 9) Kafelek osoby to PIGUŁKA, a nie prostokąt: materiały na tej stronie są kartami o ostrych rogach, więc ludzie odróżniają się kształtem, zanim czytelnik zdąży przeczytać nagłówek. Zdjęcie + nazwisko + tytuł zawodowy — tyle, ile trzeba, żeby kogoś rozpoznać, i nic więcej: licznik materiałów stoi w filtrze „Autor" w kolumnie obok, a powtórzony tutaj robiłby z paska drugą tabelkę. ========================================================================== */ /* JEDEN WIERSZ, jak pas „Najnowsze" (uwagi właściciela 2026-09-19): etykieta, pigułki, strzałki i „Zobacz wszystkich autorów" obok siebie. Do tej rundy „Autorzy" był nagłówkiem nad pustym pasem, a pigułki stały dopiero pod nim — 118 px pionu na pasek, który mieści się w jednym rzędzie. Flex, a nie siatka z nazwanymi polami: strzałki znikają, gdy pigułki mieszczą się bez przewijania (`hidden` z `syncPeopleArrows`), a pusta ścieżka siatki zostawiłaby po sobie dwa odstępy przed linkiem. Kreska u góry i odstępy te same co w „Najnowszych" — dwa paski czytają się jak dwa wiersze tej samej tabelki. */ .zw-people { display: flex; align-items: center; gap: 14px; min-width: 0; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--zw-border); } /* Etykieta ma ten sam krój co „Najnowsze", a obie tę samą minimalną szerokość, żeby pas tytułów i pas pigułek zaczynały się w jednej pionowej linii. Napisy przychodzą z panelu, więc to MINIMUM, nie sztywna szerokość — dłuższa etykieta rozepchnie swój wiersz, zamiast się urwać. */ .zw-latest__label, .zw .zw-people__title { min-width: 96px; } .zw .zw-people__title { flex: 0 0 auto; margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0; color: var(--zw-text); } .zw-people__nav { display: flex; gap: 8px; flex: 0 0 auto; } /* Ten sam adres i ta sama bramka Plus co „Zobacz wszystkich autorów" w kolumnie feedu; wygląd — linku tekstowego w kolorze marki, jak tam. */ .zw-people__all { flex: 0 0 auto; font-size: 13.5px; line-height: 20px; font-weight: 700; color: var(--zw-brand-ink); white-space: nowrap; text-decoration: none; } .zw-people__all:hover, .zw-people__all:focus-visible { color: var(--zw-brand-ink); text-decoration: underline; } /* Pasek NIE jedzie sam (prośba właściciela) — przesuwa go palec, mysz albo tabulator. `scroll-snap` łapie pigułki na krawędzi, żeby przesunięcie nie zostawiało połowy kafelka za brzegiem. */ .zw-people__rail { flex: 1 1 auto; min-width: 0; display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 2px; /* Zapas w pionie na cień i na obwódkę zaznaczenia — bez niego `overflow-x` przycinałby je u góry i u dołu. Równy u góry i u dołu, bo pigułki stoją w jednym wierszu z etykietą, wyśrodkowane w pionie. */ padding: 6px 2px; margin-inline: -2px; cursor: grab; /* Pasek przewijania chowamy: nad spodem jedzie już taśma „Najnowsze", a dwa paski jeden nad drugim czytają się jak usterka. Sposobu ruchu nie odbieramy — zostają strzałki, palec i przeciąganie. */ scrollbar-width: none; } .zw-people__rail::-webkit-scrollbar { display: none; } .zw-people__rail.is-grabbing { cursor: grabbing; scroll-snap-type: none; } .zw-person { flex: 0 0 auto; scroll-snap-align: start; } .zw-person__link { display: flex; align-items: center; gap: 10px; width: 238px; padding: 6px 16px 6px 6px; background: var(--zw-surface); border: 1px solid var(--zw-border); border-radius: 999px; box-shadow: var(--zw-shadow); color: var(--zw-text); text-decoration: none; transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease; } .zw-person__link:hover { border-color: var(--zw-border-strong); box-shadow: var(--zw-shadow-hover); color: var(--zw-text); } .zw-person__face { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; /* Kadr zdjęć portretowych: twarz siedzi wyżej niż środek kadru, więc przy `cover` środkowanie ucinałoby czoło. */ object-position: 50% 22%; background: var(--zw-brand-soft); } .zw-person__face--initial { display: flex; align-items: center; justify-content: center; color: var(--zw-brand-ink); font-size: 18px; font-weight: 700; object-position: initial; } .zw-person__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .zw-person__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; line-height: 19px; font-weight: 700; color: var(--zw-text); } /* Tytuł zawodowy — pierwszy człon specjalizacji (`library.author_title`). Jeden wiersz z wielokropkiem: to podpis pod nazwiskiem, nie wizytówka. */ .zw-person__role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; line-height: 16px; font-weight: 500; color: var(--zw-text-muted); } /* Autor, po którym właśnie filtrujemy — ten sam odcień, co zaznaczona opcja w kolumnie filtrów, żeby „wybrane" znaczyło na tej stronie jedno. */ .zw-person.is-active .zw-person__link { background: var(--zw-brand-soft); border-color: var(--zw-brand); box-shadow: inset 0 0 0 1px var(--zw-brand), var(--zw-shadow); } .zw-person.is-active .zw-person__name, .zw-person.is-active .zw-person__role { color: var(--zw-brand-ink); } .zw-people__rail:focus-visible { outline: 2px solid var(--zw-brand); outline-offset: 2px; border-radius: var(--zw-radius-ctrl); } @media (max-width: 767.98px) { /* Na telefonie ruch robi palec — strzałki byłyby celem 36 px obok obszaru, który i tak da się przesunąć. */ .zw-people__nav { display: none; } .zw-person__link { width: 216px; } /* Obok etykiety nie ma miejsca na pigułkę: „Autorzy" i „Zobacz wszystkich" zostają w jednym wierszu, a pigułki schodzą pod nie na całą szerokość. */ .zw-people { flex-wrap: wrap; row-gap: 4px; } .zw-people__all { margin-left: auto; } .zw-people__rail { order: 1; flex-basis: 100%; } } /* ========================================================================== Płynne filtrowanie — stan „pobieram" (runda 9) ========================================================================== */ /* Pasek postępu u góry okna. `fixed` na pseudoelemencie korzenia strony: `.zw` nie ma transformacji ani filtra, więc blokiem zawierającym zostaje okno (gdyby kiedyś doszły — pasek zacząłby jeździć razem z treścią). */ .zw::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; background: linear-gradient(90deg, transparent, var(--zw-brand-accent), var(--zw-brand), transparent); background-size: 40% 100%; background-repeat: no-repeat; opacity: 0; pointer-events: none; transition: opacity 150ms ease; } .zw.is-busy::after { opacity: 1; animation: zw-progress 900ms linear infinite; } @keyframes zw-progress { from { background-position: -40% 0; } to { background-position: 140% 0; } } /* Przygaszenie wyników startuje z OPÓŹNIENIEM: odpowiedź z pamięci podręcznej wraca w kilkanaście milisekund, a mignięcie szarością wygląda gorzej niż brak jakiejkolwiek reakcji. Przy dłuższym czekaniu czytelnik widzi, że coś się dzieje. */ .zw-results { transition: opacity 140ms ease; } .zw.is-busy .zw-results { opacity: .5; transition: opacity 140ms ease 200ms; } /* W trakcie pobierania klik w kolejny filtr i tak by go przerwał, ale kursor ma mówić „czekaj", a nie „klikaj dalej". */ .zw.is-busy .zw-results, .zw.is-busy .zw-types { pointer-events: none; } @media (prefers-reduced-motion: reduce) { .zw.is-busy::after { animation: none; background: var(--zw-brand); } .zw-results, .zw.is-busy .zw-results { transition: none; } } /* ========================================================================== Responsywność (§9) ========================================================================== */ /* 1024-1279: węższy panel, karty grup 2×2, kafelki w 2 kolumnach. Panel WĘŻSZY niż na szerokim ekranie (a nie szerszy, jak było do rundy 10 — wtedy baza wynosiła 280 px i te 260 faktycznie zwężało; dziś baza to 248). */ @media (max-width: 1279.98px) { .zw { --zw-side: 228px; --zw-gutter: 24px; } .zw-types__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zw-list--kafelki { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Mały kafel wyróżnionych ma tu 400-470 px szerokości. Pigułki (wiersz na całą kartę) mieszczą się razem z kategorią; ciasno robi się w stopce obok okładki — przy 1024 px nazwisko skracało się do „Anna Popr…”. Ustępuje ozdobne „›” (cały kafel i tak jest linkiem), a okładka zwęża się do 32%. Od 1024 w dół karta rośnie z treścią i strzałka wraca. */ @media (min-width: 1024px) and (max-width: 1279.98px) { .zw-feat-side { grid-template-columns: minmax(0, 32%) minmax(0, 1fr); } .zw-feat-side__go { display: none; } } /* Górny pasek serwisu ma 64 px do 1024 px włącznie (nav-drawer.css). */ @media (max-width: 1024px) { .zw { --zw-topbar-h: 64px; } } /* PRÓG FILTRÓW — 1024 px. Ta sama liczba stoi w skrypcie inline w `templates/feed/_library/_filters.html` (pilnuje test TestProgFiltrow). Poniżej: jedna kolumna, panel zwija się do przycisku „Filtry (N)". */ @media (max-width: 1023.98px) { .zw-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; } /* Wyróżnione: duży kafel na całą szerokość, dwa mniejsze pod nim obok siebie. */ .zw-feat { grid-template-columns: minmax(0, 1fr); height: auto; } .zw-feat-main { min-height: 360px; } .zw-feat__side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; } /* Tu karta rośnie z treścią, więc pigułki i stopka mogą się zawinąć. Pigułki idą na całą szerokość nad okładką, a okładka staje obok tytułu: w kolumnie obok niej zawinięte pigułki zjadały miejsce na tytuł (tak samo układa się wiersz wyniku na telefonie). */ .zw-feat-side { grid-template-columns: 128px minmax(0, 1fr); grid-template-areas: "pills pills" "media title" "lead lead" "foot foot"; grid-template-rows: auto auto auto 1fr; gap: 0 14px; padding: 14px; } .zw-feat-side .zw-feat__pills { flex-wrap: wrap; } .zw-feat-side__media { align-self: start; } .zw .zw-feat-side__title { align-self: center; margin: 0; -webkit-line-clamp: 3; } .zw-feat-side__lead { margin-top: 10px; } .zw-feat-side__foot { flex-wrap: wrap; row-gap: 6px; } /* Okładka 44% zamiast 46%: przy 1023 px pole 46% (~450×252) nie mieści się w pasie nad stopką kafla o wysokości 360 px. */ .zw-feat-main__media { width: 44%; } .zw .zw-feat-main__title { max-width: 47%; } .zw-feat-main__lead { max-width: 47%; } .zw-hero__inner { grid-template-columns: minmax(0, 1fr); } .zw-side { position: static; max-height: none; overflow: visible; border-radius: 0; } .zw-filters__toggle { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; list-style: none; border: 1px solid var(--zw-border-strong); border-radius: var(--zw-radius-ctrl); background: var(--zw-surface); color: var(--zw-text); font-size: 14px; font-weight: 600; cursor: pointer; } .zw-filters[open] > .zw-filters__toggle { margin-bottom: 12px; } .zw-showcase--solo .zw-card::after { width: 100%; opacity: .4; } .zw-showcase--solo .zw-card__shade { background: linear-gradient(180deg, rgba(11, 53, 80, .55) 0%, #0B3550 70%); } .zw-showcase--solo .zw-card__body { max-width: none; padding: 26px 24px 24px; } } /* < 768: hero w kolumnie, filtry w szufladzie, karty grup przewijane w bok, wyniki zawsze jako lista z okładką 88×88 po lewej. */ @media (max-width: 767.98px) { .zw { --zw-gutter: 16px; } .zw-block--more { padding-block: 24px 28px; } .zw-kb { padding-top: 20px; } /* Na telefonie przykleja się SAMA wyszukiwarka (Q6): tytuł, zdanie pod nim i „Dodaj materiał" odjeżdżają pod pasek serwisu. Nagłówek przykleja się z ujemnym odstępem równym części nad polem wyszukiwania (`--zw-hero-hide`, mierzy JS). „Dodaj materiał" staje NAD polem, żeby odjechało razem z tytułem, zamiast zostać przyklejone pod nim. */ .zw-hero { top: calc(var(--zw-topbar-h) - var(--zw-hero-hide, 0px)); padding-block: 8px; } .zw-add { order: -1; } /* Bez wewnętrznego wcięcia: przyklejona wyszukiwarka ma trzymać ten sam margines co reszta strony i nie ciągnąć za sobą pustego pasa. */ .zw-hero__inner { padding: 0; gap: 12px; } .zw .zw-hero__title { font-size: 24px; line-height: 30px; } .zw-hero__lead { font-size: 14px; line-height: 20px; } .zw-search__submit { min-width: 0; padding: 0 16px; } /* Przycisk „Filtry (N)" przyklejony nad listą. Przykleja się aside, a nie
: aside jest elementem siatki układu, więc przyklejenie trwa przez całą długość wyników. */ .zw-side { position: sticky; top: calc(var(--zw-topbar-h) + var(--zw-kb-head)); z-index: 30; margin-inline: calc(var(--zw-gutter) * -1); padding: 8px var(--zw-gutter); /* Pełne tło, BEZ `backdrop-filter`: filtr (tak jak transform) robi z elementu blok zawierający dla `position: fixed`, a wtedy szuflada otwierałaby się w tym pasku zamiast na całym ekranie. */ background: var(--zw-kb-bg); } /* Lądowanie kotwic pod paskiem serwisu, wyszukiwarką i paskiem „Filtry". */ .zw-results, .zw-hit { scroll-margin-top: calc(var(--zw-topbar-h) + var(--zw-kb-head) + 72px); } .zw-filters__toggle { display: inline-flex; height: 44px; border: 0; border-radius: 999px; background: var(--zw-brand); color: #FFFFFF; box-shadow: 0 6px 16px rgba(15, 23, 42, .18); } .zw-opt__row { min-height: 44px; } /* Szuflada — tylko ze skryptem (klasa `zw-js`). Bez JS panel otwiera się w toku strony, nad wynikami. */ .zw-js .zw-filters[open] > .zw-filters__toggle { margin-bottom: 0; } .zw-js .zw-filters[open] > .zw-filters__panel { position: fixed; inset: 0; z-index: 10050; /* nad górnym paskiem serwisu (10000) */ overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 88px; border: 0; border-radius: 0; box-shadow: none; } .zw-js .zw-filters__close { display: inline-flex; margin-left: auto; } .zw-js .zw-filters__clear { margin-left: auto; } .zw-js .zw-filters__clear + .zw-filters__close { margin-left: 0; } .zw-js .zw-filters[open] .zw-filters__foot { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10051; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--zw-surface); border-top: 1px solid var(--zw-border); } /* Przyklejony aside tworzy własny kontekst warstw (z-index 30), który zamknąłby szufladę POD górnym paskiem serwisu — na czas otwarcia idzie wyżej razem z nią. */ .zw-js .zw-side:has(.zw-filters[open]) { z-index: 10050; } .zw-js body:has(.zw-filters[open]) { overflow: hidden; } .zw-types__grid { position: relative; /* §25 */ display: flex; gap: 12px; margin-inline: calc(var(--zw-gutter) * -1); padding: 2px var(--zw-gutter) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--zw-gutter); scrollbar-width: none; } .zw-types__grid::-webkit-scrollbar { display: none; } /* Karty w rzędzie przewijanym NIE wyrównują wysokości — Feed ma trzy tryby, dział sześć rodzajów, a rozciągnięta karta to pusta połowa ekranu. */ .zw-types__grid { align-items: flex-start; } .zw-type { flex: 0 0 84%; scroll-snap-align: start; } .zw-bar { align-items: flex-start; } .zw-views { display: none; } /* Okładka 88×88 obok plakietek i tytułu; zajawka i podpis pod nią na całą szerokość. Ciało karty oddaje dzieci siatce (`display: contents`). */ .zw-hit__card { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "media top" "media title" "lead lead" "meta meta"; grid-template-rows: auto 1fr auto auto; gap: 0 12px; padding: 12px; } .zw-hit__body { display: contents; } .zw-hit__top { grid-area: top; margin-bottom: 6px; } .zw-hit__title { grid-area: title; } .zw-hit__lead { grid-area: lead; margin: 10px 0 8px; } .zw-hit__meta { grid-area: meta; gap: 4px 12px; margin-top: 0; } .zw-hit__media { width: 88px; height: 88px; font-size: 24px; } .zw .zw-hit__title { font-size: 16px; line-height: 22px; -webkit-line-clamp: 3; margin-bottom: 0; } .zw-hit__lead + .zw-hit__meta, .zw-hit__title + .zw-hit__meta { margin-top: 8px; } .zw-hit__tags { gap: 4px; } /* Na wąskim ekranie zostaje plakietka grupy (i AI) — dziedzina i liczba plików zajmowały po osobnym wierszu nad tytułem. */ .zw-tag--domain, .zw-tag--files { display: none; } /* Wyróżnione: kafle jeden pod drugim, duży na górze (Q6). */ .zw-featured__head { align-items: flex-start; gap: 12px; } .zw .zw-featured__title, .zw .zw-showcase__title { font-size: 24px; line-height: 30px; } .zw-featured__lead, .zw-showcase__hint { font-size: 14px; line-height: 20px; } .zw-feat__side { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } /* Za wąsko na okładkę obok tekstu: stoi nad nim, na całą szerokość. */ .zw-feat-main { flex-direction: column; min-height: 0; } .zw-feat-main__media { position: relative; top: auto; right: auto; width: auto; max-height: none; transform: none; border-radius: 16px 16px 0 0; box-shadow: none; } .zw-feat-main__body { padding: 18px 18px 18px; } .zw .zw-feat-main__title { max-width: none; font-size: 22px; line-height: 28px; -webkit-line-clamp: 3; } .zw-feat-main__lead { max-width: none; } .zw-feat-side__go { display: none; } .zw-feat-side { grid-template-columns: 112px minmax(0, 1fr); gap: 0 12px; padding: 12px; } .zw .zw-feat-side__title { font-size: 16px; line-height: 22px; } .zw-latest { flex-direction: column; align-items: flex-start; gap: 8px; } .zw-latest__rail { width: 100%; } .zw-latest__track { --zw-ticker-speed: 55; } .zw-latest__item { max-width: 78vw; } .zw-showcase { grid-template-columns: minmax(0, 1fr); } .zw-showcase--solo .zw-card__title { font-size: 22px; line-height: 28px; } } @media (prefers-reduced-motion: reduce) { .zw *, .zw *::before, .zw *::after { transition: none !important; } .zw-latest__track.is-running { animation: none; } .zw-latest__rail { overflow-x: auto; scrollbar-width: thin; } } /* ====================================================================== Pasek podglądu szkicu (`?podglad=szkic`, tylko pełny manager) ====================================================================== Widoczny WYŁĄCZNIE w podglądzie z panelu. Musi być nie do pomylenia z treścią strony — stąd ostrzegawczy pas na całą szerokość, a nie dyskretna plakietka: jedyny błąd, który ten tryb może spowodować, to wzięcie szkicu za stan faktyczny. */ .zw-preview-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 10px 16px; margin: 0 0 8px; background: #fff4d6; border-bottom: 2px solid #e0a200; color: #4a3200; font-size: 13px; line-height: 1.4; } .zw-preview-bar strong { font-weight: 700; letter-spacing: .01em; } .zw-preview-bar a { color: inherit; text-decoration: underline; font-weight: 600; }