/* ========================================================= PIETRO Blog — wszystkie style scope'owane pod .pietro-blog ========================================================= */ .pietro-blog { /* Marka — wartości 1:1 z żywego CSS landingu 17pietro.pl (blok `.p17-lp`, motyw CIEMNY = domyślny). Nazwy kluczy zostały z portu (navy/red/gold) — tylko wartości są inne: „navy" = ciemna POWIERZCHNIA (karty, CTA), „red" = złoto akcentu. */ --pietro-navy: #0C0E15; /* --surf */ --pietro-navy-700: #080A0F; /* --surf3 */ --pietro-red: #E8C15A; /* --gold — akcent JAKO TŁO (przyciski, plakietki) */ --pietro-accent: #E8C15A; /* akcent JAKO TEKST/OBRYS — w trybie jasnym ciemnieje, bo złoto na kremie ma kontrast 1,6:1 (nieczytelne) */ --pietro-red-700: #A87E1E; /* --link-h z motywu jasnego — ciemniejsza ochra na hover */ --pietro-red-bright: #F2D488; /* DOBRANE algorytmicznie (jaśniejsze złoto), nie z żywego CSS */ --pietro-gold: #C9A24A; /* DOBRANE (ciemniejsze złoto) — drugi stop gradientów akcentu */ --pietro-onred: #05060A; /* --ongold: tekst NA złocie; biały na złocie ma fatalny kontrast */ /* Neutralne — ciemne tło marki */ --pietro-bg: #05060A; /* --bg */ --pietro-bg-soft: #0A0C12; /* --surf2 */ --pietro-border: rgba(237,235,228,0.10); --pietro-text: #EDEBE4; --pietro-text-muted: rgba(237,235,228,0.60); --pietro-card-bg: #0C0E15; /* System */ --pietro-radius: 14px; --pietro-radius-sm: 8px; --pietro-shadow: 0 8px 30px rgba(0,0,0,0.55); --pietro-shadow-sm: 0 2px 10px rgba(0,0,0,0.40); --pietro-maxw: 1160px; --pietro-read: 740px; --pietro-side-w: 268px; --pietro-side-gap: 48px; --pietro-space: clamp(16px, 4vw, 40px); /* Fonty marki — Space Grotesk (nagłówki) + Poppins (tekst) są ładowane globalnie na 17pietro.pl */ font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--pietro-text); background: var(--pietro-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; } /* ========================================================= TRYB JASNY — wspólny z przełącznikiem w globalnym headerze 17pietro. Header zapisuje wybór w localStorage['p17-theme'] i wiesza klasę `is-light` na `.p17hdr` oraz `.p17-lp`; blog dokłada się do tej samej konwencji. Dwa selektory: `.is-light` wiesza JS wtyczki na kontenerze bloga, a `html.pietro-light` ustawia skrypt w ZANIM strona się narysuje (bez tego blog mignąłby ciemny przed przełączeniem). Wartości z żywego CSS landingu, blok `.p17-lp.is-light`. ========================================================= */ :is(.pietro-blog.is-light, .pietro-light .pietro-blog) { --pietro-bg: #F7F5EF; --pietro-bg-soft: #EFEBE1; --pietro-card-bg: #FFFFFF; --pietro-text: #1A1B21; --pietro-text-muted: rgba(26,27,33,0.60); --pietro-border: rgba(26,27,33,0.12); /* Złoto zostaje TŁEM przycisków (czerń na złocie = 11,8:1), ale jako tekst schodzi do ciemnej ochry. Marka ma tu #A87E1E, które na kremie daje tylko 3,4:1 — za mało dla tekstu, więc akcent jest DOBRANY (#8A6616 = 4,8:1), a #A87E1E został na hover. */ --pietro-accent: #8A6616; --pietro-red: #E8C15A; --pietro-red-700: #C9A24A; --pietro-onred: #05060A; --pietro-shadow: 0 8px 30px rgba(26,27,33,0.10); --pietro-shadow-sm: 0 2px 10px rgba(26,27,33,0.07); --pietro-glow-red: rgba(232,193,90,0.38); --pietro-ring-red: rgba(138,102,22,0.16); --pietro-shadow-brand: 0 18px 44px rgba(26,27,33,0.16); /* --pietro-navy zostaje CIEMNE: CTA i nagłówek tabeli mają być ciemną plamą na kremie */ } /* Dostrojenia z bloku ciemnego, które w trybie jasnym trzeba odwrócić. */ :is(.pietro-blog.is-light, .pietro-light .pietro-blog) .pietro-card__excerpt, :is(.pietro-blog.is-light, .pietro-light .pietro-blog) .pietro-featured__excerpt, :is(.pietro-blog.is-light, .pietro-light .pietro-blog) .pietro-side__fact-txt, :is(.pietro-blog.is-light, .pietro-light .pietro-blog) .pietro-faq__a p { color: rgba(26,27,33,0.72); } :is(.pietro-blog.is-light, .pietro-light .pietro-blog) .pietro-side__fact { background: linear-gradient(160deg, rgba(232,193,90,0.16), rgba(26,27,33,0.02)); border-color: rgba(138,102,22,0.24); } :is(.pietro-blog.is-light, .pietro-light .pietro-blog) .pietro-content tbody tr:nth-child(even) { background: rgba(26,27,33,0.03); } :is(.pietro-blog.is-light, .pietro-light .pietro-blog) .pietro-card:hover, :is(.pietro-blog.is-light, .pietro-light .pietro-blog) .pietro-featured:hover { border-color: rgba(138,102,22,0.45); } .pietro-blog h1, .pietro-blog h2, .pietro-blog h3, .pietro-blog h4, .pietro-blog .pietro-card__title, .pietro-blog .pietro-featured__title, .pietro-blog .pietro-404__code, .pietro-blog .pietro-btn, .pietro-blog .pietro-side__cta-txt { font-family: 'Space Grotesk', 'Poppins', system-ui, sans-serif; } .pietro-blog *, .pietro-blog *::before, .pietro-blog *::after { box-sizing: border-box; } .pietro-blog img { max-width: 100%; height: auto; } /* Bezpiecznik: nasze kontrolki dziedziczą font i nie przejmują agresywnych stylów motywu. */ .pietro-blog input, .pietro-blog button, .pietro-blog textarea, .pietro-blog select { font-family: inherit; font-size: inherit; line-height: inherit; } .pietro-blog .pietro-btn, .pietro-blog .pietro-chip, .pietro-blog .pietro-share__btn { box-shadow: none; text-transform: none; letter-spacing: normal; } .pietro-container { max-width: var(--pietro-maxw); margin-inline: auto; padding-inline: var(--pietro-space); } .pietro-ico { vertical-align: middle; flex: none; } /* ---------- Pasek postępu ---------- */ .pietro-progress { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 9999; background: transparent; pointer-events: none; } .pietro-progress__bar { display: block; height: 100%; width: 0%; background: var(--pietro-accent); transition: width .08s linear; } /* ---------- Breadcrumbs ---------- */ .pietro-breadcrumb { font-size: 14px; color: var(--pietro-text-muted); padding-top: clamp(20px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pietro-breadcrumb a { color: var(--pietro-text-muted); text-decoration: none; } .pietro-breadcrumb a:hover { color: var(--pietro-accent); } .pietro-breadcrumb__sep { color: var(--pietro-border); } .pietro-breadcrumb__current { color: var(--pietro-text); font-weight: 600; } /* ---------- Header wpisu ---------- */ .pietro-single__header { margin: 18px 0 22px; } .pietro-single__title { font-size: clamp(28px, 5vw, 44px); line-height: 1.15; font-weight: 800; color: var(--pietro-text); margin: 0 0 16px; } .pietro-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--pietro-text-muted); } .pietro-meta__author { display: inline-flex; align-items: center; gap: 8px; } .pietro-meta__author a { color: var(--pietro-text); text-decoration: none; font-weight: 600; } .pietro-meta__author a:hover { color: var(--pietro-accent); } .pietro-meta__avatar { border-radius: 999px; } .pietro-meta__dot { color: var(--pietro-border); } .pietro-meta__updated { color: var(--pietro-accent); font-weight: 600; } .pietro-meta__read { display: inline-flex; align-items: center; gap: 5px; } /* ---------- Cover ---------- */ /* Cover jest teraz w kolumnie artykułu, tuż nad treścią — sam musi dać odstęp od niej. */ .pietro-cover { margin: 24px 0 30px; } .pietro-cover__img { width: 100%; border-radius: var(--pietro-radius); display: block; box-shadow: var(--pietro-shadow-sm); object-fit: cover; } /* ---------- Layout single: ToC + artykuł ---------- */ .pietro-single__layout { display: grid; grid-template-columns: 1fr; gap: 32px; padding-top: clamp(20px, 4vw, 40px); padding-bottom: 40px; } /* Okruszki są teraz pierwszym elementem kolumny artykułu — górny odstęp daje już siatka. */ .pietro-article > .pietro-breadcrumb { padding-top: 0; } .pietro-article { max-width: var(--pietro-read); width: 100%; margin-inline: auto; } @media (min-width: 1024px) { .pietro-single__layout { grid-template-columns: var(--pietro-side-w) minmax(0, var(--pietro-read)); justify-content: center; gap: var(--pietro-side-gap); align-items: start; } .pietro-article { margin-inline: 0; } /* Wpis bez sidebara bierze pełną kolumnę tekstu. Bez tego artykuł wpadał do wąskiej kolumny spisu treści i renderował się na ~240 px (wpisy bez żadnego H2/H3). */ .pietro-single__layout--noside { grid-template-columns: minmax(0, var(--pietro-read)); } } /* Zapas dla szablonu nadpisanego w motywie (bez klasy --noside). Osobny blok celowo: brak obsługi :has() unieważniłby całą listę selektorów, gdyby reguły były połączone. */ @media (min-width: 1024px) { .pietro-single__layout:not(:has(.pietro-side)) { grid-template-columns: minmax(0, var(--pietro-read)); } } /* ---------- Sidebar wpisu (licznik, ToC, ciekawostka, CTA) ---------- */ /* Wzbogacenie desktopu. Na mobile ukryty: w jednokolumnowej siatce trafiłby dopiero pod CTA i newsletterem, a spis treści jest tam i tak w .pietro-toc-mobile. */ .pietro-side { display: none; } @media (min-width: 1024px) { .pietro-side { display: block; position: sticky; top: 100px; align-self: start; } .pietro-side__meter { display: flex; } } .pietro-side__inner { display: grid; gap: 14px; } /* ToC w sidebarze dostaje własną kartę — inaczej goły spis między dwoma kaflami wyglądał jak niedokończony fragment. */ .pietro-side .pietro-toc { background: var(--pietro-card-bg); border: 1px solid var(--pietro-border); border-radius: var(--pietro-radius); padding: 14px 14px 14px 12px; box-shadow: var(--pietro-shadow-sm); } .pietro-side .pietro-toc__title { margin: 0 0 10px 8px; } .pietro-side__meter { align-items: center; gap: 14px; background: var(--pietro-card-bg); border: 1px solid var(--pietro-border); border-radius: var(--pietro-radius); padding: 14px 16px; box-shadow: var(--pietro-shadow-sm); } .pietro-ring-wrap { position: relative; width: 58px; height: 58px; flex: none; } .pietro-ring { display: block; transform: rotate(-90deg); } .pietro-ring__bg { fill: none; stroke: var(--pietro-border); stroke-width: 5; } .pietro-ring__bar { fill: none; stroke: var(--pietro-accent); stroke-width: 5; stroke-linecap: round; /* obwód dla r=25 → 2πr = 157.08 */ stroke-dasharray: 157.08; stroke-dashoffset: 157.08; transition: stroke-dashoffset .12s linear; } .pietro-ring__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--pietro-text); font-variant-numeric: tabular-nums; } .pietro-side__meter-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pietro-side__meter-main { font-weight: 700; color: var(--pietro-text); font-size: 14px; line-height: 1.3; } .pietro-side__meter-sub { font-size: 13px; color: var(--pietro-text-muted); } .pietro-side__fact { background: var(--pietro-bg-soft); border: 1px solid var(--pietro-border); border-left: 3px solid var(--pietro-accent); border-radius: var(--pietro-radius); padding: 14px 16px; } .pietro-side__fact-label { display: flex; align-items: center; gap: 7px; margin: 0 0 7px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--pietro-accent); } .pietro-side__fact-txt { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--pietro-text-muted); } .pietro-side__cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; background: linear-gradient(135deg, var(--pietro-navy), var(--pietro-navy-700)); color: #fff; text-decoration: none; border-radius: var(--pietro-radius); padding: 14px 16px; box-shadow: var(--pietro-shadow-sm); transition: transform .18s ease, box-shadow .18s ease; } .pietro-side__cta-label { grid-column: 1; grid-row: 1; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--pietro-red-bright); } .pietro-side__cta-txt { grid-column: 1; grid-row: 2; font-weight: 700; font-size: 14px; } .pietro-side__cta .pietro-ico { grid-column: 2; grid-row: 1 / span 2; } .pietro-side__cta:hover { transform: translateY(-2px); box-shadow: var(--pietro-shadow-brand); } .pietro-toc__title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--pietro-text-muted); margin: 0 0 12px; font-weight: 700; } .pietro-toc__list, .pietro-toc-mobile ul { list-style: none; margin: 0; padding: 0; } .pietro-toc__item { margin: 0; } .pietro-toc__item--h3 .pietro-toc__link { padding-left: 18px; font-size: 13px; } .pietro-toc__link { display: block; padding: 6px 10px; font-size: 14px; line-height: 1.4; color: var(--pietro-text-muted); text-decoration: none; border-left: 2px solid var(--pietro-border); transition: color .15s, border-color .15s; } .pietro-toc__link:hover { color: var(--pietro-accent); } .pietro-toc__link.is-active { color: var(--pietro-accent); border-left-color: var(--pietro-accent); font-weight: 600; } /* ToC mobile */ .pietro-toc-mobile { border: 1px solid var(--pietro-border); border-radius: var(--pietro-radius-sm); background: var(--pietro-bg-soft); margin-bottom: 24px; } @media (min-width: 1024px) { .pietro-toc-mobile { display: none; } } .pietro-toc-mobile__summary { cursor: pointer; padding: 14px 16px; font-weight: 700; color: var(--pietro-text); list-style: none; } .pietro-toc-mobile__summary::-webkit-details-marker { display: none; } .pietro-toc-mobile__summary::after { content: "▾"; float: right; } .pietro-toc-mobile[open] .pietro-toc-mobile__summary::after { content: "▴"; } .pietro-toc-mobile ul { padding: 0 16px 14px; } .pietro-toc-mobile .pietro-toc__link { border-left: none; padding: 6px 0; } /* ---------- Treść ---------- */ .pietro-content { font-size: 18px; line-height: 1.7; color: var(--pietro-text); } .pietro-content > * { margin-top: 1.25em; } .pietro-content > *:first-child { margin-top: 0; } .pietro-content h2 { font-size: clamp(22px, 3.5vw, 30px); font-weight: 700; color: var(--pietro-text); line-height: 1.25; margin-top: 1.8em; scroll-margin-top: 100px; } .pietro-content h3 { font-size: clamp(18px, 2.5vw, 22px); font-weight: 600; color: var(--pietro-text); margin-top: 1.5em; scroll-margin-top: 100px; } .pietro-content a { color: var(--pietro-accent); text-decoration: none; } .pietro-content a:hover { text-decoration: underline; } .pietro-content img { border-radius: var(--pietro-radius-sm); } .pietro-content ul, .pietro-content ol { padding-left: 1.4em; } .pietro-content li { margin: .4em 0; } .pietro-content blockquote { border-left: 4px solid var(--pietro-accent); background: var(--pietro-bg-soft); margin: 1.5em 0; padding: 16px 22px; border-radius: 0 var(--pietro-radius-sm) var(--pietro-radius-sm) 0; font-style: italic; color: var(--pietro-text); } .pietro-content blockquote p:last-child { margin-bottom: 0; } .pietro-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 16px; display: block; overflow-x: auto; } .pietro-content thead th { background: var(--pietro-navy); color: #fff; text-align: left; padding: 12px 14px; font-weight: 600; } .pietro-content tbody td { padding: 10px 14px; border-bottom: 1px solid var(--pietro-border); } .pietro-content tbody tr:nth-child(even) { background: var(--pietro-bg-soft); } /* Ramka takeaways */ .pietro-content .pietro-takeaways { background: var(--pietro-bg-soft); border: 1px solid var(--pietro-border); border-radius: var(--pietro-radius); padding: 20px 24px; margin: 1.6em 0; } .pietro-content .pietro-takeaways ul { list-style: none; padding-left: 0; } .pietro-content .pietro-takeaways li { position: relative; padding-left: 28px; } .pietro-content .pietro-takeaways li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--pietro-accent); font-weight: 800; } /* ---------- Chipy / tagi ---------- */ .pietro-chip { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--pietro-bg-soft); color: var(--pietro-text); font-size: 13px; font-weight: 600; text-decoration: none; line-height: 1.4; border: 1px solid transparent; transition: background .15s, color .15s; } .pietro-chip:hover { background: var(--pietro-border); } .pietro-chip--cat { background: var(--pietro-red); color: var(--pietro-onred); } .pietro-chip--cat:hover { background: var(--pietro-red-700); } .pietro-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; } /* ---------- Share ---------- */ .pietro-share { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 18px 0; border-top: 1px solid var(--pietro-border); border-bottom: 1px solid var(--pietro-border); margin: 28px 0; } .pietro-share__label { font-weight: 600; color: var(--pietro-text-muted); font-size: 14px; } .pietro-share__btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; width: auto; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--pietro-border); background: var(--pietro-card-bg); color: var(--pietro-text); justify-content: center; transition: all .15s; } .pietro-share__btn:hover { border-color: var(--pietro-accent); color: var(--pietro-accent); transform: translateY(-2px); } .pietro-share__copytxt { font-size: 14px; font-weight: 600; } .pietro-share__copy.is-copied { border-color: #2e9e5b; color: #2e9e5b; } /* ---------- Box autora ---------- */ .pietro-author { display: flex; gap: 18px; align-items: flex-start; background: var(--pietro-bg-soft); border-radius: var(--pietro-radius); padding: 22px 24px; margin: 28px 0; } .pietro-author__avatar { border-radius: 999px; flex: none; } .pietro-author__name { font-weight: 700; color: var(--pietro-text); margin: 0 0 6px; font-size: 18px; } .pietro-author__bio { margin: 0 0 8px; color: var(--pietro-text-muted); font-size: 15px; } .pietro-author__links { display: flex; gap: 16px; margin: 0; } .pietro-link { color: var(--pietro-accent); font-weight: 600; text-decoration: none; font-size: 14px; } .pietro-link:hover { text-decoration: underline; } /* ---------- Prev / next ---------- */ .pietro-prevnext { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 28px 0; } @media (min-width: 640px) { .pietro-prevnext { grid-template-columns: 1fr 1fr; } } .pietro-prevnext__item { display: block; padding: 16px 18px; border: 1px solid var(--pietro-border); border-radius: var(--pietro-radius); background: var(--pietro-card-bg); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; } .pietro-prevnext__item:hover { transform: translateY(-3px); box-shadow: var(--pietro-shadow); border-color: var(--pietro-accent); } .pietro-prevnext__item--next { text-align: right; } .pietro-prevnext__label { display: block; font-size: 13px; color: var(--pietro-text-muted); margin-bottom: 6px; } .pietro-prevnext__title { display: block; font-weight: 600; color: var(--pietro-text); } /* ---------- Karty / grid ---------- */ .pietro-grid { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 600px) { .pietro-grid--3, .pietro-grid--4 { grid-template-columns: 1fr 1fr; } } @media (min-width: 960px) { .pietro-grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 960px) { .pietro-grid--4 { grid-template-columns: repeat(4, 1fr); } } .pietro-card { display: flex; flex-direction: column; background: var(--pietro-card-bg); border: 1px solid var(--pietro-border); border-radius: var(--pietro-radius); overflow: hidden; box-shadow: var(--pietro-shadow-sm); transition: transform .18s, box-shadow .18s; } .pietro-card:hover { transform: translateY(-4px); box-shadow: var(--pietro-shadow); } .pietro-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pietro-bg-soft); } /* Uwaga na specyficzność: reset `.pietro-blog img {height:auto}` (0,1,1) wygrywał z `.pietro-card__img` (0,1,0) — obrazek był niższy od kadru 16/10 i pod spodem zostawał kremowy pasek tła kadru. */ .pietro-blog .pietro-card__img { width: 100%; height: 100%; object-fit: cover; display: block; } .pietro-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .pietro-card__title { font-size: 18px; line-height: 1.3; margin: 0; font-weight: 700; } .pietro-card__title a { color: var(--pietro-text); text-decoration: none; } .pietro-card__title a:hover { color: var(--pietro-accent); } .pietro-card__excerpt { margin: 0; color: var(--pietro-text-muted); font-size: 15px; flex: 1; } .pietro-card__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pietro-text-muted); } .pietro-related { margin: 36px 0; } .pietro-related__title, .pietro-archive__title, .pietro-404__subtitle { font-size: clamp(22px, 3.5vw, 28px); font-weight: 700; color: var(--pietro-text); margin: 0 0 20px; } /* ---------- Featured ---------- */ .pietro-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 0; background: var(--pietro-card-bg); border: 1px solid var(--pietro-border); border-radius: var(--pietro-radius); overflow: hidden; box-shadow: var(--pietro-shadow-sm); transition: transform .18s, box-shadow .18s; } .pietro-featured:hover { transform: translateY(-4px); box-shadow: var(--pietro-shadow); } .pietro-featured__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pietro-bg-soft); } .pietro-blog .pietro-featured__img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 768px) { .pietro-featured { grid-template-columns: 1.2fr 1fr; align-items: stretch; } /* Kadr 16/10 był niższy niż kolumna z tekstem — pod obrazkiem zostawała pusta luka. Na desktopie obrazek rozciąga się na całą wysokość karty. */ .pietro-featured__media { aspect-ratio: auto; position: relative; min-height: 320px; } .pietro-blog .pietro-featured__img { position: absolute; inset: 0; } } .pietro-featured__body { padding: clamp(20px, 3vw, 34px); display: flex; flex-direction: column; gap: 14px; justify-content: center; } .pietro-featured__title { font-size: clamp(22px, 3vw, 30px); margin: 0; line-height: 1.2; } .pietro-featured__title a { color: var(--pietro-text); text-decoration: none; } .pietro-featured__title a:hover { color: var(--pietro-accent); } .pietro-featured__excerpt { margin: 0; color: var(--pietro-text-muted); } /* ---------- Przyciski ---------- */ .pietro-btn { display: inline-block; padding: 14px 28px; border-radius: 999px; font-weight: 700; text-decoration: none; cursor: pointer; border: 2px solid transparent; font-size: 15px; transition: background .15s, color .15s, transform .15s; text-align: center; } .pietro-btn--primary { background: var(--pietro-red); color: var(--pietro-onred); } .pietro-btn--primary:hover { background: var(--pietro-red-700); transform: translateY(-2px); } .pietro-btn--secondary { background: transparent; color: var(--pietro-text); border-color: var(--pietro-text); } .pietro-btn--secondary:hover { background: var(--pietro-red); color: var(--pietro-onred); } /* ---------- Archiwum ---------- */ .pietro-archive { padding-top: clamp(24px, 5vw, 48px); padding-bottom: 48px; } .pietro-archive__head { margin-bottom: 24px; } .pietro-archive__desc { color: var(--pietro-text-muted); max-width: var(--pietro-read); } .pietro-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 30px; } .pietro-chip--filter { padding: 8px 16px; font-size: 14px; border: 1px solid var(--pietro-border); } .pietro-chip--filter.is-active { background: var(--pietro-red); color: var(--pietro-onred); border-color: var(--pietro-red); } .pietro-loadmore { text-align: center; margin: 36px 0 0; } .pietro-pagination { margin: 30px 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .pietro-pagination .page-numbers { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--pietro-border); border-radius: var(--pietro-radius-sm); color: var(--pietro-text); text-decoration: none; } .pietro-pagination .page-numbers.current { background: var(--pietro-red); color: var(--pietro-onred); border-color: var(--pietro-red); } .pietro-empty { color: var(--pietro-text-muted); padding: 40px 0; text-align: center; } /* ---------- Search ---------- */ .pietro-search { position: relative; max-width: 520px; margin-bottom: 8px; } .pietro-blog .pietro-search__ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--pietro-text-muted); z-index: 2; pointer-events: none; } /* Wysoka specyficzność + ochrona paddingu — motyw stylizuje input[type=search] agresywnie. */ .pietro-blog .pietro-search .pietro-search__input { width: 100%; margin: 0; padding: 13px 18px 13px 48px !important; border: 1px solid var(--pietro-border) !important; border-radius: 999px !important; background: var(--pietro-card-bg); color: var(--pietro-text); font-size: 15px; line-height: 1.4; font-family: inherit; box-shadow: none; -webkit-appearance: none; appearance: none; } .pietro-blog .pietro-search .pietro-search__input:focus { outline: 2px solid var(--pietro-accent); outline-offset: 1px; border-color: transparent; } .pietro-search__results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; background: var(--pietro-card-bg); border: 1px solid var(--pietro-border); border-radius: var(--pietro-radius-sm); box-shadow: var(--pietro-shadow); overflow: hidden; display: none; } .pietro-search__results.is-open { display: block; } .pietro-search__item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: var(--pietro-text); } .pietro-search__item:hover, .pietro-search__item:focus { background: var(--pietro-bg-soft); } .pietro-blog .pietro-search__thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex: none; background: var(--pietro-bg-soft); } .pietro-search__t { font-weight: 600; font-size: 14px; line-height: 1.3; } .pietro-search__empty { padding: 14px; color: var(--pietro-text-muted); font-size: 14px; } .pietro-search--404 { margin-inline: auto; margin-block: 22px 28px; } /* ---------- CTA ---------- */ .pietro-cta { background: var(--pietro-navy); border-radius: var(--pietro-radius); margin: 40px 0; padding: clamp(28px, 5vw, 48px); text-align: center; } .pietro-cta__inner { max-width: 560px; margin-inline: auto; } .pietro-cta__heading { color: #fff; font-size: clamp(22px, 3.5vw, 30px); margin: 0 0 12px; font-weight: 800; } .pietro-cta__desc { color: rgba(255,255,255,.82); margin: 0 0 24px; } .pietro-newsletter { margin: 32px 0; padding: 24px; background: var(--pietro-bg-soft); border-radius: var(--pietro-radius); } /* ---------- 404 ---------- */ .pietro-404 { padding: clamp(40px, 8vw, 90px) var(--pietro-space); } .pietro-404__head { text-align: center; max-width: 620px; margin-inline: auto; } .pietro-404__code { font-size: clamp(64px, 16vw, 130px); font-weight: 800; color: var(--pietro-accent); line-height: 1; margin: 0; } .pietro-404__title { font-size: clamp(24px, 4vw, 34px); color: var(--pietro-text); margin: 8px 0 12px; } .pietro-404__desc { color: var(--pietro-text-muted); margin: 0 0 8px; } .pietro-404__posts { margin-top: 56px; } /* ---------- Kontrolki globalne ---------- */ .pietro-totop { position: fixed; right: 22px; z-index: 9000; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--pietro-border); background: var(--pietro-card-bg); color: var(--pietro-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--pietro-shadow); transition: opacity .2s, transform .2s, background .2s; } .pietro-totop { bottom: 22px; opacity: 0; visibility: hidden; } .pietro-theme-toggle { position: fixed; right: 22px; bottom: 78px; z-index: 9000; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--pietro-border); background: var(--pietro-card-bg); color: var(--pietro-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--pietro-shadow); transition: transform .2s, border-color .2s, color .2s; } .pietro-theme-toggle:hover { transform: translateY(-3px); border-color: var(--pietro-accent); color: var(--pietro-accent); } .pietro-theme-toggle .pietro-ico--sun { display: none; } .pietro-theme-toggle .pietro-ico--moon { display: inline; } :is(.pietro-blog.is-light, .pietro-light .pietro-blog) .pietro-theme-toggle .pietro-ico--sun { display: inline; } :is(.pietro-blog.is-light, .pietro-light .pietro-blog) .pietro-theme-toggle .pietro-ico--moon { display: none; } .pietro-totop.is-visible { opacity: 1; visibility: visible; } .pietro-totop:hover { transform: translateY(-3px); border-color: var(--pietro-accent); color: var(--pietro-accent); } /* ========================================================= POLISH — brandowe cienie, akcenty, animacje ========================================================= */ /* Poświaty liczone z koloru akcentu. W porcie z ns33 wisiał tu na sztywno karmazyn, więc zielony przycisk rzucał czerwony cień. Pierwsza wartość = fallback dla przeglądarek bez color-mix(); wtyczka i tak nadpisuje oba tokeny inline (PIETRO_Blog::css_vars). */ .pietro-blog { --pietro-glow-red: rgba(232,193,90,0.26); --pietro-glow-red: color-mix(in srgb, var(--pietro-red) 28%, transparent); --pietro-ring-red: rgba(232,193,90,0.18); --pietro-ring-red: color-mix(in srgb, var(--pietro-red) 16%, transparent); --pietro-shadow-brand: 0 18px 44px rgba(0,0,0,0.6); } /* Nagłówek listy z czerwonym akcentem + delikatna poświata granatu */ .pietro-archive__head { position: relative; } .pietro-archive__title { position: relative; display: inline-block; padding-bottom: 14px; } .pietro-archive__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--pietro-accent), var(--pietro-gold)); } .pietro-archive { position: relative; } .pietro-archive::before { content: ""; position: absolute; top: -40px; right: -60px; width: 320px; height: 320px; background: radial-gradient(circle, var(--pietro-ring-red), transparent 70%); pointer-events: none; z-index: 0; filter: blur(8px); } .pietro-archive > * { position: relative; z-index: 1; } /* Karty — czerwona krawędź u góry, zoom zdjęcia, brandowy cień */ .pietro-card { position: relative; border-color: var(--pietro-border); } .pietro-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3; background: linear-gradient(90deg, var(--pietro-accent), var(--pietro-gold)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } .pietro-card:hover::before { transform: scaleX(1); } .pietro-card:hover { box-shadow: var(--pietro-shadow-brand); border-color: var(--pietro-accent); } .pietro-card__media { position: relative; } .pietro-card__img { transition: transform .5s ease; } .pietro-card:hover .pietro-card__img { transform: scale(1.06); } .pietro-card__title a { background-image: linear-gradient(var(--pietro-accent), var(--pietro-accent)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s ease; padding-bottom: 1px; } .pietro-card:hover .pietro-card__title a { background-size: 100% 2px; } /* Featured — mocniejszy, z akcentem */ .pietro-featured { position: relative; border-color: var(--pietro-border); } .pietro-featured::after { content: ""; position: absolute; inset: 0; border-radius: var(--pietro-radius); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .3s ease; pointer-events: none; } .pietro-featured:hover { box-shadow: var(--pietro-shadow-brand); } .pietro-featured:hover::after { box-shadow: inset 0 0 0 2px var(--pietro-red); } .pietro-featured__img { transition: transform .6s ease; } .pietro-featured:hover .pietro-featured__img { transform: scale(1.05); } /* Chipy filtrów — glow na aktywnym, lift na hover */ .pietro-chip--filter { transition: transform .15s ease, box-shadow .2s ease, background .15s, color .15s, border-color .15s; } .pietro-chip--filter:hover { transform: translateY(-2px); border-color: var(--pietro-accent); color: var(--pietro-accent); } .pietro-chip--filter.is-active { box-shadow: 0 8px 20px var(--pietro-glow-red); } .pietro-chip--filter.is-active:hover { color: var(--pietro-onred); transform: translateY(-2px); } /* Search — czerwony pierścień przy focusie */ .pietro-blog .pietro-search .pietro-search__input:focus { outline: none; border-color: var(--pietro-accent) !important; box-shadow: 0 0 0 4px var(--pietro-ring-red); } .pietro-search { transition: transform .2s ease; } .pietro-search:focus-within .pietro-search__ico { color: var(--pietro-accent); } /* Przyciski — brandowa poświata */ .pietro-btn--primary { box-shadow: 0 10px 24px var(--pietro-glow-red); } .pietro-btn--primary:hover { box-shadow: 0 14px 30px var(--pietro-glow-red); } /* CTA — gradient + subtelny wzór */ .pietro-cta { background: linear-gradient(135deg, var(--pietro-navy), var(--pietro-navy-700)); position: relative; overflow: hidden; box-shadow: var(--pietro-shadow-brand); } .pietro-cta::before { content: ""; position: absolute; top: -80px; right: -80px; width: 260px; height: 260px; background: radial-gradient(circle, var(--pietro-glow-red), transparent 70%); pointer-events: none; } .pietro-cta__inner { position: relative; z-index: 1; } /* ---------- Animacje wejścia (tylko gdy JS i bez reduced-motion) ---------- */ .pietro-blog.pietro-anim .pietro-card, .pietro-blog.pietro-anim .pietro-featured, .pietro-blog.pietro-anim .pietro-related, .pietro-blog.pietro-anim .pietro-author, .pietro-blog.pietro-anim .pietro-prevnext, .pietro-blog.pietro-anim .pietro-cta { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; } .pietro-blog.pietro-anim .is-inview { opacity: 1; transform: none; } /* ---------- Focus / a11y ---------- */ .pietro-blog a:focus-visible, .pietro-blog button:focus-visible, .pietro-blog input:focus-visible, .pietro-blog summary:focus-visible { outline: 2px solid var(--pietro-accent); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .pietro-blog *, .pietro-progress__bar { transition: none !important; scroll-behavior: auto !important; animation: none !important; } .pietro-card:hover, .pietro-prevnext__item:hover, .pietro-featured:hover, .pietro-btn:hover, .pietro-totop:hover, .pietro-share__btn:hover { transform: none; } } /* ========================================================= GŁÓWNA BLOGA: siatka wpisów + sidebar FAQ ========================================================= */ .pietro-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; } .pietro-home__main { min-width: 0; } @media (min-width: 1100px) { .pietro-home--side { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; } /* Z sidebarem trzy kolumny kart byłyby za wąskie — schodzimy do dwóch. */ .pietro-home--side .pietro-grid--3 { grid-template-columns: repeat(2, 1fr); } /* Węższa kolumna główna — oddajemy przewagę tekstowi, inaczej tytuł łamie się na 5 linii. */ .pietro-home--side .pietro-featured { grid-template-columns: 1fr 1.25fr; } } .pietro-faq { min-width: 0; } @media (min-width: 1100px) { .pietro-faq { position: sticky; top: 100px; } } .pietro-faq__card { position: relative; overflow: hidden; background: var(--pietro-card-bg); border: 1px solid var(--pietro-border); border-radius: var(--pietro-radius); padding: 22px; box-shadow: var(--pietro-shadow-sm); } .pietro-faq__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--pietro-accent), var(--pietro-gold)); } .pietro-faq__eyebrow { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pietro-accent); } .pietro-faq__title { font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--pietro-text); margin: 0 0 14px; } .pietro-faq__item { border-top: 1px solid var(--pietro-border); } .pietro-faq__item:first-child { border-top: 0; } .pietro-faq__q { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--pietro-text); } .pietro-faq__q::-webkit-details-marker { display: none; } .pietro-faq__q::after { content: "+"; flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--pietro-bg-soft); color: var(--pietro-accent); display: grid; place-items: center; font-size: 15px; font-weight: 800; line-height: 1; transition: background .2s ease, color .2s ease; } .pietro-faq__item[open] .pietro-faq__q::after { content: "\2212"; background: var(--pietro-red); color: var(--pietro-onred); } .pietro-faq__q:hover { color: var(--pietro-accent); } .pietro-faq__a { padding: 0 0 14px; } .pietro-faq__a p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--pietro-text-muted); } .pietro-faq__cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 12px 18px; border-radius: 999px; background: var(--pietro-red); color: var(--pietro-onred); font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 8px 20px var(--pietro-glow-red); transition: background .15s, transform .15s; } .pietro-faq__cta:hover { background: var(--pietro-red-700); color: var(--pietro-onred); transform: translateY(-2px); } /* ========================================================= ARMOR — Hello Elementor / Elementor Kit Elementor wstrzykuje reguły typu `.elementor-kit-123 button {…}` (0,1,1) i nadpisuje nasze pojedyncze klasy: przyciski udostępniania dostawały cudzy kolor, wysokość i display, przez co etykieta „Kopiuj link" wypadała poza obrys. Stąd !important — wszystko ściśle scope'owane pod .pietro-blog, poza obszar bloga nic nie wycieka. ========================================================= */ .pietro-blog .pietro-btn, .pietro-blog .pietro-share__btn, .pietro-blog .pietro-totop, .pietro-blog .pietro-faq__cta, .pietro-blog .pietro-side__cta { font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important; text-decoration: none !important; } .pietro-blog .pietro-share .pietro-share__btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: auto !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; padding: 0 14px !important; border-radius: 999px !important; border: 1px solid var(--pietro-border) !important; background: var(--pietro-card-bg) !important; color: var(--pietro-text) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; box-shadow: none !important; overflow: visible !important; } .pietro-blog .pietro-share .pietro-share__btn > svg { flex: none !important; display: block !important; } .pietro-blog .pietro-share .pietro-share__copytxt { display: inline !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; } .pietro-blog .pietro-share .pietro-share__btn:hover { border-color: var(--pietro-accent) !important; color: var(--pietro-accent) !important; background: var(--pietro-card-bg) !important; transform: translateY(-2px); } .pietro-blog .pietro-share .pietro-share__copy.is-copied { border-color: var(--pietro-accent) !important; color: var(--pietro-accent) !important; } .pietro-blog .pietro-btn { display: inline-block !important; width: auto !important; padding: 14px 28px !important; border-radius: 999px !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; } .pietro-blog .pietro-btn--primary { background: var(--pietro-red) !important; color: var(--pietro-onred) !important; border: 2px solid transparent !important; } .pietro-blog .pietro-btn--primary:hover { background: var(--pietro-red-700) !important; color: var(--pietro-onred) !important; } .pietro-blog .pietro-btn--secondary { background: transparent !important; color: var(--pietro-text) !important; border: 2px solid var(--pietro-border) !important; } .pietro-blog .pietro-btn--secondary:hover { background: var(--pietro-red) !important; color: var(--pietro-onred) !important; border-color: var(--pietro-red) !important; } .pietro-blog .pietro-totop { width: 46px !important; height: 46px !important; min-height: 46px !important; padding: 0 !important; border-radius: 999px !important; background: var(--pietro-card-bg) !important; border: 1px solid var(--pietro-border) !important; color: var(--pietro-text) !important; } /* Hello Elementor stylizuje summary/details globalnie — trzymamy własny wygląd. */ .pietro-blog .pietro-faq__q, .pietro-blog .pietro-toc-mobile__summary { list-style: none !important; } .pietro-blog .pietro-faq__item, .pietro-blog .pietro-toc-mobile { background: none; } .pietro-blog .pietro-faq__item[open] { background: none; } /* Wyróżniony wpis obok sidebara: mniej dominujący tytuł i przycięty zajawka, inaczej karta rośnie do ~620 px i spycha resztę siatki poniżej ekranu. */ @media (min-width: 1100px) { .pietro-home--side .pietro-featured__title { font-size: clamp(20px, 2.1vw, 26px); } .pietro-home--side .pietro-featured__excerpt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } } /* ========================================================= DOSTROJENIE POD CIEMNE TŁO 17pietro Na jasnych biurach „navy" było ciemną plamą na jasnym tle i samo się wyróżniało. Tutaj powierzchnia (#0C0E15) leży o włos od tła strony (#05060A), więc bloki, które mają przyciągać wzrok, dostają złotą krawędź zamiast samego kontrastu tła. ========================================================= */ .pietro-cta { background: linear-gradient(135deg, #10131C, #05060A); border: 1px solid rgba(232,193,90,0.30); } .pietro-side__cta { background: linear-gradient(135deg, #10131C, #05060A); border: 1px solid rgba(232,193,90,0.30); } .pietro-content thead th { background: #11141C; color: var(--pietro-red); border-bottom: 1px solid rgba(232,193,90,0.35); } .pietro-content tbody tr:nth-child(even) { background: rgba(237,235,228,0.03); } /* Zajawka i teksty poboczne na ciemnym potrzebują wyższej jasności niż .6 alfa */ .pietro-card__excerpt, .pietro-featured__excerpt, .pietro-side__fact-txt, .pietro-faq__a p { color: rgba(237,235,228,0.72); } /* Kafelek ciekawostki: delikatna złota poświata zamiast płaskiego beżu */ .pietro-side__fact { background: linear-gradient(160deg, rgba(232,193,90,0.07), rgba(237,235,228,0.02)); border-color: rgba(232,193,90,0.20); } /* Karta wpisu — złota krawędź na hover zamiast ledwie widocznego cienia */ .pietro-card:hover { border-color: rgba(232,193,90,0.45); } .pietro-featured:hover { border-color: rgba(232,193,90,0.45); } /* ========================================================= Globalny header 17pietro pokazuje swój przełącznik motywu wyłącznie na stronie głównej (`body.home .p17hdr__theme{display:inline-flex}`). Na stronach bloga go odsłaniamy — to JEDYNE miejsce, w którym wtyczka sięga poza własny scope, celowo i wąsko, żeby nie trzeba było ruszać header.html w Theme Builderze. ========================================================= */ body.pietro-blog-page .p17hdr__theme { display: inline-flex !important; }