/* 12-wiedza-i-blog.css: Wiedza: artykuł, lista wpisów, wyszukiwarka, notka, filtr kategorii, treść wpisu (.prose), wideo, galeria. Style globalne motywu QS GPS; zasady i spis plików w 01-tokeny.css. */ /* Artykuł z Wiedzy (single.php): nagłówek, kolumna tekstu, spis treści z boku */ /* Układ tworzy szablon motywu; we wpisie jest tylko treść (akapity, h2, h3, obrazy, notka, karty). */ .article-hero{padding-block:clamp(28px,4vw,48px) clamp(40px,5vw,64px);background:var(--pale);border-bottom:1px solid var(--line)} .article-hero h1{max-width:900px;font-size:var(--fs-h1-page)} .article-hero__lead{max-width:760px;margin-top:20px;font-size:clamp(1.05rem,1.5vw,1.18rem)} /* Z obrazkiem wyróżniającym: tekst z lewej, zdjęcie z prawej (na telefonie pod tekstem) */ .article-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center} .article-hero__img img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-pop)} @media (max-width:900px){.article-hero__grid{grid-template-columns:minmax(0,1fr)}} .article-hero__meta{margin-top:18px;font-size:var(--fs-sm);color:var(--muted)} .article-hero__meta a{color:var(--blue)} .article{padding-block:clamp(40px,5vw,64px) var(--section)} .article__grid{display:grid;grid-template-columns:220px minmax(0,760px);gap:clamp(32px,5vw,72px);justify-content:center;align-items:start} .article__toc{position:sticky;top:calc(var(--header) + 24px)} .article__toc .toc{margin-top:0} /* Ramka kontaktowa pod spisem treści (strony prawne):

…

…

…
*/ .article__kontakt{margin-top:24px;padding:18px;border-radius:var(--r-sm);background:var(--pale-2);border:1px solid var(--line);font-size:var(--fs-sm);line-height:1.5} .article__kontakt-h{margin-bottom:6px;color:var(--ink);font-weight:800} .article__kontakt .more{margin-top:10px;font-size:var(--fs-sm)} .article__toc .toc+.article__kontakt{margin-top:24px} .article__toc .toc ol{flex-direction:column;flex-wrap:nowrap;gap:2px;margin-top:12px;border-left:2px solid var(--line)} .article__toc .toc a{display:block;min-height:0;margin-left:-2px;padding:8px 0 8px 16px;border:0;border-left:2px solid transparent;border-radius:0;background:none;color:var(--muted);font-weight:600;font-size:var(--fs-sm);line-height:1.4} .article__toc .toc a:hover{color:var(--blue)} .article__toc .toc a[aria-current="true"]{border-left-color:var(--blue);color:var(--blue)} @media (max-width:1000px){ .article__grid{grid-template-columns:minmax(0,760px)} .article__toc{position:static} .article__toc .toc ol{flex-direction:row;flex-wrap:wrap;gap:8px;border-left:0} .article__toc .toc a{margin-left:0;padding:8px 14px;min-height:40px;display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--white);color:var(--ink)} } /* Treść artykułu: typografia .prose + komponenty w środku tekstu */ .article__body.prose h2{margin-top:2.2em;padding-top:1.2em;border-top:1px solid var(--line);font-size:clamp(1.5rem,2.6vw,1.9rem)} .article__body.prose>h2:first-child{margin-top:0;padding-top:0;border-top:0} .article__body.prose>h2:first-of-type:not(:first-child){margin-top:1.6em} .article__body :is(ul.pros,ul.cons,ul.dots,ul.related,ul.cards,ul.posts){padding-left:0;list-style:none} .article__body a[class]{text-decoration:none} .article__body .applists{margin-top:1.4em} .article__body .applist p{font-size:.95rem} .prose .applist>:first-child{margin-top:0} .prose .applist h4{margin-top:20px} .prose .applist :is(ul,p){margin-top:10px} .prose .applists .applist,.prose .related a{margin-top:0} .article__body figure{margin-block:1.6em} .article__body .embed{margin-block:1.6em} /* Lista powiązanych stron (np. na końcu artykułu): */ .related{display:grid;gap:10px} .related li+li,.prose .related li+li{margin-top:0} .related a{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r-sm);background:var(--white);border:1px solid var(--line);color:var(--ink);font-weight:700;transition:border-color .2s,transform .2s} .related a:hover{border-color:var(--blue);transform:translateY(-2px)} .related .mt small{font-size:.85rem;font-weight:400;color:var(--muted)} .related a>svg{flex:none;width:18px;height:18px;margin-left:auto;color:var(--blue)} /* Blog: lista wpisów, treść wpisu, wyszukiwarka */ .posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)} .post-card{display:flex} .post-card__link{flex:1;display:flex;flex-direction:column;border-radius:var(--r);background:var(--white);border:1px solid var(--line);overflow:hidden;transition:transform .25s,border-color .25s} .post-card__link:hover{transform:var(--lift);border-color:var(--line-strong)} .post-card__img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--pale-3)} .post-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .post-card__body{flex:1;display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px} .post-card__meta{font-size:var(--fs-xs);font-weight:600;color:var(--muted)} /* Plakietka kategorii: na zdjęciu karty w prawym górnym rogu, w karcie wyróżnionej nad tytułem */ .post-card__kat{display:inline-block;padding:5px 12px;border-radius:var(--r-pill);background:var(--blue);color:var(--white);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.3} .post-card__img .post-card__kat{position:absolute;top:14px;right:14px;max-width:calc(100% - 28px)} .post-card__title{margin:0;color:var(--ink);font-weight:800;font-size:1.1rem;line-height:1.3;letter-spacing:-.01em} .post-card__link:hover .post-card__title{color:var(--blue)} .post-card__excerpt{font-size:var(--fs-sm);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .post-card .more{margin-top:auto;padding-block:8px 0;white-space:nowrap} .post-card__link:hover .more svg{transform:translateX(4px)} /* Notka: wyróżniona ramka, np. na początku artykułu z bazy wiedzy (czym jest artykuł i co jest w ofercie QS).
[qs_ikona nazwa="ui-info"]

Tytuł

Tekst

Nazwa [qs_ikona nazwa="ui-strzalka"]
*/ .note{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap) 20px;padding:22px 24px 22px 28px;border-radius:var(--r);background:var(--white);border:1px solid var(--line-strong);box-shadow:var(--shadow-pop);overflow:hidden;font-size:.95rem;line-height:1.55} .note::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--grad)} .note>.ico{align-self:flex-start} .note__txt{flex:1 1 260px} .note__h{color:var(--ink);font-weight:800;font-size:1.05rem;line-height:1.35} .note__txt p+p{margin-top:4px} .note .btn{flex:none;padding:13px 20px} @media (max-width:600px){.note{padding:20px 18px 20px 22px}.note .btn{width:100%;padding:13px 14px;font-size:.95rem;text-align:center}} /* Filtr kategorii nad listą wpisów: */ .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,36px)} .filters a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line-strong);color:var(--ink);font-weight:600;font-size:var(--fs-sm);transition:border-color .2s,color .2s,background .2s} .filters a:hover{border-color:var(--blue);color:var(--blue)} .filters a[aria-current]{background:var(--blue);border-color:var(--blue);color:var(--white)} .filters small{font-size:var(--fs-xs);font-weight:700;opacity:.7} .page-hero .search{margin-top:28px} /* Sekcja z listą wpisów zaraz pod nagłówkiem strony: mniej miejsca nad filtrem */ .section--list{padding-top:clamp(32px,4vw,48px)} @media (max-width:767px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}} /* 3 wpisy w rzędzie do 768 px, bez samotnej trzeciej karty na tablecie */ @media (max-width:600px){.posts{grid-template-columns:minmax(0,1fr)}} /* Wiedza: najnowszy wpis na całą szerokość, pod nim karty po 2 w rzędzie i pasek boczny (szukaj, kategorie, prezentacja) */ .posts--2{grid-template-columns:repeat(2,minmax(0,1fr))} .post-feature{margin-bottom:var(--gap-lg)} .post-feature__link{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);border-radius:var(--r);background:var(--white);border:1px solid var(--line);overflow:hidden;transition:transform .25s,border-color .25s} .post-feature__link:hover{transform:var(--lift);border-color:var(--line-strong)} .post-feature__img{position:relative;display:block;min-height:320px;background:var(--pale-3)} .post-feature__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .post-feature__body{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,3vw,44px)} .post-feature__top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px} .post-feature__title{margin:0;color:var(--ink);font-weight:800;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.25;letter-spacing:-.015em} .post-feature__link:hover .post-feature__title{color:var(--blue)} .post-feature__excerpt{font-size:var(--fs-text);line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .post-feature .more{margin-top:auto} .post-feature__link:hover .more svg{transform:translateX(4px)} .wiedza{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"lista bok";gap:var(--gap-lg);align-items:start} .wiedza__main{grid-area:lista} .wiedza__side{grid-area:bok;position:sticky;top:calc(var(--header) + 24px);display:flex;flex-direction:column;gap:20px} .wiedza__side .search{flex-wrap:nowrap;margin-top:0;max-width:none} .wiedza__side .search__input{flex:1 1 0;min-width:0} .wiedza__h{margin:0 0 12px;color:var(--ink);font-weight:800;font-size:1.05rem} .wiedza__kat{padding:20px;border-radius:var(--r);background:var(--white);border:1px solid var(--line)} .wiedza__kat ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px} .wiedza__kat a{text-decoration:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 12px;border-radius:var(--r-sm);color:var(--ink);font-weight:600;transition:background .2s,color .2s} .wiedza__kat a:hover{background:var(--pale-2);color:var(--blue)} .wiedza__kat a[aria-current]{background:var(--blue);color:var(--white)} .wiedza__kat small{min-width:28px;padding:2px 8px;border-radius:var(--r-pill);background:var(--pale-2);color:var(--ink);font-size:var(--fs-xs);font-weight:700;text-align:center} .wiedza__kat a[aria-current] small{background:var(--white);color:var(--blue)} .wiedza__cta{padding:24px 20px;border-radius:var(--r);background:var(--grad-mocny);color:var(--white)} .wiedza__cta .wiedza__h,.wiedza__cta p{color:var(--white)} .wiedza__cta p{margin:0 0 16px;font-size:var(--fs-sm)} .wiedza__cta .btn{background:var(--white);color:var(--blue);border-color:var(--white)} @media (max-width:1000px){ .wiedza{grid-template-columns:minmax(0,1fr);grid-template-areas:"bok" "lista";gap:24px} .wiedza__side{position:static} .wiedza__kat{padding:0;background:none;border:0} .wiedza__kat .wiedza__h,.wiedza__cta{display:none} .wiedza__kat ul{flex-direction:row;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px} .wiedza__kat ul::-webkit-scrollbar{display:none} .wiedza__kat li{flex:0 0 auto} .wiedza__kat a{white-space:nowrap} .wiedza__kat a{justify-content:flex-start;padding:8px 16px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line-strong)} .wiedza__kat a[aria-current]{border-color:var(--blue)} .post-feature__link{grid-template-columns:minmax(0,1fr)} .post-feature__img{min-height:0;aspect-ratio:16/9} } @media (max-width:600px){.posts--2{grid-template-columns:minmax(0,1fr)}} .pagination{margin-top:clamp(32px,4vw,48px)} .pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .pagination .page-numbers{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 14px;border-radius:var(--r-xs);background:var(--white);border:1px solid var(--line);color:var(--ink);font-weight:700;transition:border-color .2s,color .2s} .pagination a.page-numbers:hover{border-color:var(--blue);color:var(--blue)} .pagination .current{background:var(--blue);border-color:var(--blue);color:var(--white)} .search{display:flex;flex-wrap:wrap;gap:10px;max-width:560px;margin-top:24px} .search__input{flex:1 1 240px;min-height:52px;padding:0 18px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font:inherit;color:var(--ink);background:var(--white)} .search__input:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--blue)} /* Treść wpisu: typografia dla HTML z edytora (wpisy zostają bez zmian) */ .prose{font-size:var(--fs-text);line-height:1.75} .prose>*+*{margin-top:1.1em} .prose h2{margin-top:1.8em;font-size:clamp(1.45rem,2.6vw,1.9rem)} .prose h3{margin-top:1.6em;font-size:var(--fs-h3)} .prose h4{margin-top:1.4em;font-size:var(--fs-lead)} .prose ul,.prose ol{padding-left:1.4em} .prose ul{list-style:disc} .prose ol{list-style:decimal} .prose li+li{margin-top:.4em} .prose li::marker{color:var(--blue)} .prose a:where(:not([class])){color:var(--blue);text-decoration:underline;text-underline-offset:3px} .prose strong{color:var(--ink)} .prose img,.prose video,.prose iframe{max-width:100%;border-radius:var(--r-sm)} .prose figure{margin:1.6em 0} .prose figcaption,.prose .wp-caption-text{margin-top:8px;font-size:var(--fs-sm);color:var(--muted);text-align:center} .prose blockquote{margin:1.6em 0;padding:4px 0 4px 20px;border-left:4px solid var(--blue);color:var(--ink);font-weight:600} .prose table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);display:block;overflow-x:auto} .prose th,.prose td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top} .prose th{background:var(--pale);color:var(--ink)} .prose hr{border:0;border-top:1px solid var(--line);margin:2em 0} /* Wideo 16:9 (YouTube):
; plik wideo: