/* ==========================================================================
STASACUCINE — BLOG POST STYLESHEET
Samodzielny arkusz stylów szablonu wpisów blogowych.
Wszystkie klasy mają prefiks "blog-", aby uniknąć kolizji ze styles.css.
ZASADY JĘZYKA GRAFICZNEGO (od v4 = język strony głównej):
1. Powierzchnie jak na stronie głównej: panele na --surface z linią 1px;
gradient tylko w przycisku głównym i w tle banera CTA (jak .btn-primary).
2. Podziały: linia 1px albo panel z linią — bez cieni na treści.
3. Jeden akcent: szampan (--accent z css/base.css), zawsze w tej samej roli
(numeracja, mikro-etykiety, linia prowadząca, przycisk główny).
4. Promienie strony głównej: 8 / 14 / 22 px, pigułka dla przycisków i etykiet,
50% dla awatarów i numerów kroków.
5. Skala odstępów oparta na 8px — bez wartości spoza skali.
6. Jeden krój: Montserrat (self-hosted, jak strona główna). Bez kursywy.
OD WERSJI 4: blog dziedziczy język strony głównej — css/base.css
(tokeny, przyciski .btn) i css/layout.css (navbar, stopka) są ładowane
PRZED tym plikiem. Sekcja 52 na końcu dopasowuje komponenty bloga.
========================================================================== */
/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root{
/* Tokeny bloga są ALIASAMI tokenów strony głównej (css/base.css).
Zmiana koloru/kroju na stronie głównej automatycznie zmienia blog.
Nie wpisuj tu literałów kolorów — dopisz token w base.css. */
/* — Powierzchnie — */
--blog-bg: var(--bg, #111113);
--blog-surface: var(--surface, #17171a);
--blog-surface-2: var(--surface-2, #1e1e22);
/* — Linie — */
--blog-line: var(--line, rgba(255,255,255,.09));
--blog-line-strong: var(--line-strong, rgba(255,255,255,.18));
/* — Tekst — */
--blog-text: var(--text, #f5f2e8);
--blog-muted: var(--text-2, rgba(245,242,232,.74));
--blog-dim: var(--text-3, rgba(245,242,232,.52));
/* — Akcent (szampan, ten sam co na stronie głównej) — */
--blog-gold: var(--accent, #c8b88a);
--blog-gold-hi: var(--accent-hi, #efe7cc);
--blog-gold-soft: var(--accent-soft, rgba(200,184,138,.12));
--blog-gold-line: var(--accent-line, rgba(200,184,138,.38));
--blog-cream: var(--accent-hi, #efe7cc);
--blog-ink: var(--on-accent, #16140f);
--blog-clay: var(--err, #f2766b);
/* — Skala odstępów (8px) — */
--blog-s1: 8px;
--blog-s2: 16px;
--blog-s3: 24px;
--blog-s4: 40px;
--blog-s5: 64px;
--blog-s6: 96px;
/* — Kształt: promienie strony głównej — */
--blog-radius: var(--r-sm, 8px);
--blog-radius-md: var(--r-md, 14px);
--blog-radius-lg: var(--r-lg, 22px);
/* — Nagłówek: ten sam navbar co na stronie głównej (layout.css) — */
--blog-header-h: var(--header-h, 76px);
--blog-anchor-offset: calc(var(--blog-header-h) + var(--blog-s3));
/* — Typografia: jeden krój, jak na stronie głównej (self-hosted Montserrat) — */
--blog-serif: var(--font, 'Montserrat', system-ui, sans-serif);
--blog-sans: var(--font, 'Montserrat', system-ui, sans-serif);
/* — Miary — */
--blog-measure: 680px; /* ~72 znaki */
--blog-wide: var(--container, 1200px);
--blog-sidebar: 220px;
}
/* ==========================================================================
2. RESET & BASE
========================================================================== */
.blog-page,
.blog-page *,
.blog-page *::before,
.blog-page *::after{ box-sizing: border-box; }
.blog-page{
margin: 0;
padding: 0;
background: var(--blog-bg);
color: var(--blog-text);
font-family: var(--blog-sans);
font-size: 17px;
font-weight: 400;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
.blog-page img{ max-width: 100%; display: block; }
.blog-page a{ color: inherit; }
.blog-page ul,
.blog-page ol{ padding-left: 0; margin: 0; list-style: none; }
.blog-page button{ font-family: inherit; }
.blog-page :focus-visible{
outline: 1px solid var(--blog-gold);
outline-offset: 4px;
}
/* Każdy potencjalny cel kotwicy zatrzymuje się poniżej przyklejonego nagłówka.
Działa też bez JS — przy wejściu z #hashem i przy nawigacji wstecz/dalej. */
.blog-page [id]{
scroll-margin-top: var(--blog-anchor-offset);
}
.blog-container{
max-width: var(--blog-wide);
margin: 0 auto;
padding: 0 var(--blog-s4);
}
.blog-skip-link{
position: absolute;
top: -60px;
left: var(--blog-s2);
background: var(--blog-cream);
color: var(--blog-ink);
padding: var(--blog-s1) var(--blog-s2);
border-radius: var(--blog-radius);
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
z-index: 10001;
transition: top 0.2s ease;
}
.blog-skip-link:focus{ top: var(--blog-s2); }
/* ==========================================================================
3. MIKRO-ETYKIETA — jeden wzorzec dla wszystkich nadpisów w serwisie
========================================================================== */
.blog-label,
.blog-eyebrow,
.blog-toc-card h2,
.blog-related-card-cat,
.blog-callout-title,
.blog-table thead th,
.blog-table caption,
.blog-share-label,
.blog-author-role,
.blog-video-caption,
.blog-tag{
font-family: var(--blog-sans);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1.5;
}
/* ==========================================================================
4. TYPOGRAFIA
========================================================================== */
.blog-page h1,
.blog-page h2,
.blog-page h3{
font-family: var(--blog-serif);
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color: var(--blog-text);
letter-spacing: -0.015em;
line-height: 1.2;
margin: 0;
}
.blog-page h4{
font-family: var(--blog-sans);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0;
color: var(--blog-text);
line-height: 1.5;
margin: 0;
}
/* Numerowane sekcje — zastępują ozdobne podkreślenia pod nagłówkami */
.blog-content{ counter-reset: blog-section; }
.blog-content h2{
font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem);
margin: var(--blog-s6) 0 var(--blog-s3);
}
.blog-content h2::before{
counter-increment: blog-section;
content: counter(blog-section, decimal-leading-zero);
display: block;
font-family: var(--blog-sans);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--blog-gold);
margin-bottom: var(--blog-s2);
line-height: 1;
}
.blog-content article > section:first-of-type h2{ margin-top: var(--blog-s4); }
.blog-content h3{
font-size: 1.28rem;
margin: var(--blog-s5) 0 var(--blog-s2);
}
.blog-content h4{ margin: var(--blog-s3) 0 var(--blog-s1); }
.blog-content p{
margin: 0 0 var(--blog-s3);
color: var(--blog-muted);
}
.blog-content p strong,
.blog-content li strong{
color: var(--blog-text);
font-weight: 600;
}
.blog-content a:not(.blog-btn){
color: var(--blog-text);
text-decoration: none;
border-bottom: 1px solid var(--blog-gold);
padding-bottom: 1px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.blog-content a:not(.blog-btn):hover{
color: var(--blog-gold);
}
/* Lead — bez inicjału, tylko większy stopień i pełny kontrast */
.blog-content p.blog-lead{
font-size: 1.15rem;
line-height: 1.75;
color: var(--blog-text);
margin-bottom: var(--blog-s4);
}
.blog-content p.blog-note{
font-size: 0.8rem;
line-height: 1.7;
color: var(--blog-dim);
padding-top: var(--blog-s2);
border-top: 1px solid var(--blog-line);
}
/* — Listy — */
.blog-content .blog-list{
margin: 0 0 var(--blog-s3);
}
.blog-list li{
position: relative;
padding-left: var(--blog-s4);
margin-bottom: var(--blog-s2);
color: var(--blog-muted);
}
.blog-list li:last-child{ margin-bottom: 0; }
ul.blog-list li::before{
content: '';
position: absolute;
left: 0;
top: 0.85em;
width: var(--blog-s2);
height: 1px;
background: var(--blog-gold);
}
ol.blog-list{ counter-reset: blog-ol; }
ol.blog-list li{ counter-increment: blog-ol; }
ol.blog-list li::before{
content: counter(blog-ol, decimal-leading-zero);
position: absolute;
left: 0;
top: 0;
font-family: var(--blog-sans);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--blog-gold);
line-height: 2.6;
}
/* ==========================================================================
5. HEADER
========================================================================== */
.blog-header{
position: sticky;
top: 0;
z-index: 1000;
background: rgba(13, 13, 12, 0.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--blog-line);
}
.blog-header-inner{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--blog-s4);
height: var(--blog-header-h);
}
.blog-header-brand{
display: flex;
align-items: center;
gap: var(--blog-s2);
text-decoration: none;
flex-shrink: 0;
}
.blog-header-brand img{ height: 34px; width: auto; }
/* Wordmark składany, nie SVG — plik z napisem ma proporcje 2:1 z dużym
marginesem wewnętrznym i przy tej wysokości byłby nieczytelny.
Ten sam lockup stosuje stopka, dzięki czemu marka wygląda spójnie. */
.blog-header-brand .brand-wordmark{
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blog-text);
white-space: nowrap;
line-height: 1;
}
.blog-header-brand .brand-wordmark em{
font-style: normal;
color: var(--blog-gold);
}
.blog-header-nav{
display: flex;
align-items: center;
gap: var(--blog-s3);
}
.blog-header-nav a{
font-size: 0.82rem;
font-weight: 500;
color: var(--blog-dim);
text-decoration: none;
transition: color 0.2s ease;
}
.blog-header-nav a:hover{ color: var(--blog-text); }
.blog-header-actions{
display: flex;
align-items: center;
gap: var(--blog-s3);
flex-shrink: 0;
}
.blog-header-phone{
font-size: 0.82rem;
font-weight: 500;
color: var(--blog-dim);
text-decoration: none;
white-space: nowrap;
transition: color 0.2s ease;
}
.blog-header-phone:hover{ color: var(--blog-text); }
/* Pasek postępu czytania — 1px, bez poświaty */
.blog-progress{
position: sticky;
top: var(--blog-header-h);
height: 1px;
z-index: 1001;
background: transparent;
}
.blog-progress-bar{
height: 100%;
width: 0%;
background: var(--blog-gold);
}
/* ==========================================================================
6. OKRUSZKI
========================================================================== */
.blog-breadcrumbs{ padding-top: var(--blog-s5); }
.blog-breadcrumbs ol{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--blog-s1);
font-size: 0.74rem;
letter-spacing: 0.04em;
color: var(--blog-dim);
}
.blog-breadcrumbs li{ display: flex; align-items: center; gap: var(--blog-s1); }
.blog-breadcrumbs li:not(:last-child)::after{ content: '/'; opacity: 0.4; }
.blog-breadcrumbs a{ color: var(--blog-dim); text-decoration: none; transition: color 0.2s ease; }
.blog-breadcrumbs a:hover{ color: var(--blog-text); }
.blog-breadcrumbs [aria-current="page"]{ color: var(--blog-muted); }
/* ==========================================================================
7. HERO
========================================================================== */
.blog-hero{ padding: var(--blog-s4) 0 var(--blog-s5); }
.blog-hero-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--blog-s5);
align-items: center;
}
.blog-eyebrow{
display: inline-flex;
align-items: center;
gap: var(--blog-s2);
color: var(--blog-gold);
margin-bottom: var(--blog-s3);
}
.blog-eyebrow::before{
content: '';
width: var(--blog-s3);
height: 1px;
background: var(--blog-gold);
}
.blog-hero h1{
font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
line-height: 1.14;
margin-bottom: var(--blog-s3);
}
.blog-hero h1 .blog-h1-accent{
display: block;
color: var(--blog-dim);
margin-top: var(--blog-s1);
}
.blog-dek{
font-size: 1.05rem;
line-height: 1.7;
color: var(--blog-muted);
max-width: 44ch;
margin: 0 0 var(--blog-s4);
}
/* — Metadane — */
.blog-meta-row{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--blog-s3);
padding-top: var(--blog-s3);
border-top: 1px solid var(--blog-line);
}
.blog-meta-author{
display: flex;
align-items: center;
gap: var(--blog-s2);
}
.blog-avatar{
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--blog-line-strong);
display: flex;
align-items: center;
justify-content: center;
color: var(--blog-gold);
font-family: var(--blog-sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
flex-shrink: 0;
}
.blog-meta-author-name{
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--blog-text);
line-height: 1.4;
}
.blog-meta-author-role{
display: block;
font-size: 0.78rem;
color: var(--blog-dim);
line-height: 1.4;
}
.blog-meta-divider{
width: 1px;
height: 24px;
background: var(--blog-line);
}
.blog-meta-facts{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--blog-s2);
font-size: 0.78rem;
color: var(--blog-dim);
}
.blog-meta-fact{ display: inline-flex; align-items: center; gap: var(--blog-s2); }
.blog-meta-fact:not(:last-child)::after{ content: '·'; opacity: 0.5; }
/* ==========================================================================
8. MEDIA — jeden wzorzec placeholdera dla całego szablonu
========================================================================== */
.blog-image-placeholder{
width: 100%;
aspect-ratio: 4 / 3;
background: var(--blog-surface);
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
display: flex;
align-items: center;
justify-content: center;
padding: var(--blog-s3);
}
.blog-image-placeholder span{
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1.7;
color: var(--blog-dim);
text-align: center;
max-width: 24ch;
}
.blog-hero-media{ margin: 0; }
.blog-page figcaption{
font-size: 0.78rem;
line-height: 1.6;
color: var(--blog-dim);
margin-top: var(--blog-s2);
padding-top: var(--blog-s2);
border-top: 1px solid var(--blog-line);
}
.blog-content figure{ margin: var(--blog-s4) 0; }
.blog-content figure .blog-image-placeholder{ aspect-ratio: 16 / 9; }
.blog-gallery{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--blog-s2);
}
.blog-gallery .blog-image-placeholder{ aspect-ratio: 1 / 1; }
.blog-video-placeholder{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--blog-surface);
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
display: flex;
align-items: center;
justify-content: center;
margin: var(--blog-s4) 0;
}
.blog-video-play{
width: 56px;
height: 56px;
border-radius: 50%;
border: 1px solid var(--blog-line-strong);
display: flex;
align-items: center;
justify-content: center;
color: var(--blog-gold);
font-size: 0.8rem;
padding-left: 3px;
transition: border-color 0.25s ease;
}
.blog-video-placeholder:hover .blog-video-play{ border-color: var(--blog-gold); }
.blog-video-caption{
position: absolute;
left: var(--blog-s3);
bottom: var(--blog-s3);
color: var(--blog-dim);
}
/* ==========================================================================
9. LAYOUT
========================================================================== */
.blog-layout{
display: grid;
grid-template-columns: var(--blog-sidebar) minmax(0, 1fr);
gap: var(--blog-s6);
align-items: start;
padding-bottom: var(--blog-s6);
}
.blog-content{
min-width: 0;
max-width: var(--blog-measure);
}
/* ==========================================================================
10. SIDEBAR — bez kart, wyłącznie linie
========================================================================== */
.blog-sidebar{
position: sticky;
top: calc(var(--blog-anchor-offset) + var(--blog-s2));
display: flex;
flex-direction: column;
gap: var(--blog-s5);
}
.blog-card{ /* zachowana nazwa klasy, ale bez wyglądu karty */
background: none;
border: none;
padding: 0;
}
.blog-toc-card h2{
color: var(--blog-dim);
margin: 0 0 var(--blog-s2);
padding-bottom: var(--blog-s2);
border-bottom: 1px solid var(--blog-line);
}
.blog-toc-list{ display: flex; flex-direction: column; }
.blog-toc-list a{
display: block;
font-size: 0.82rem;
line-height: 1.5;
color: var(--blog-dim);
text-decoration: none;
padding: var(--blog-s1) 0 var(--blog-s1) var(--blog-s2);
border-left: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.blog-toc-list a:hover{ color: var(--blog-text); }
.blog-toc-list a.is-active{
color: var(--blog-text);
border-left-color: var(--blog-gold);
}
.blog-toc-list .blog-toc-sub{
padding-left: var(--blog-s4);
}
.blog-sidebar-cta{
padding-top: var(--blog-s3);
border-top: 1px solid var(--blog-line);
}
.blog-sidebar-cta h3{
font-size: 1.1rem;
margin-bottom: var(--blog-s1);
}
.blog-sidebar-cta p{
font-size: 0.82rem;
line-height: 1.65;
color: var(--blog-dim);
margin: 0 0 var(--blog-s3);
}
.blog-sidebar-author{
padding-top: var(--blog-s3);
border-top: 1px solid var(--blog-line);
}
.blog-sidebar-author .blog-avatar{ margin-bottom: var(--blog-s2); }
.blog-sidebar-author h3{
font-family: var(--blog-sans);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0;
margin-bottom: var(--blog-s1);
}
.blog-sidebar-author p{
font-size: 0.82rem;
line-height: 1.65;
color: var(--blog-dim);
margin: 0 0 var(--blog-s2);
}
.blog-sidebar-social{ display: flex; gap: var(--blog-s2); }
.blog-sidebar-social a,
.blog-footer-social a{
color: var(--blog-dim);
font-size: 0.85rem;
text-decoration: none;
transition: color 0.2s ease;
}
.blog-sidebar-social a:hover,
.blog-footer-social a:hover{ color: var(--blog-gold); }
/* ==========================================================================
11. PRZYCISKI — dwa warianty, oba WCAG AA
========================================================================== */
.blog-page .blog-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--blog-s1);
padding: 13px var(--blog-s3);
border: 1px solid transparent;
border-radius: var(--blog-radius);
font-family: var(--blog-sans);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* Kremowe wypełnienie + atramentowy tekst = 16.2:1 */
.blog-page .blog-btn-primary{
background: var(--blog-cream);
color: var(--blog-ink);
border-color: var(--blog-cream);
}
.blog-page .blog-btn-primary:hover{
background: #FFFFFF;
border-color: #FFFFFF;
color: var(--blog-ink);
}
/* Kontur — tekst 15.9:1 na tle strony */
.blog-page .blog-btn-outline{
background: transparent;
color: var(--blog-text);
border-color: var(--blog-line-strong);
}
.blog-page .blog-btn-outline:hover{
border-color: var(--blog-gold);
color: var(--blog-gold);
}
.blog-page .blog-btn-block{ width: 100%; }
/* ==========================================================================
12. DANE LICZBOWE — kolumny rozdzielone linią, bez kart
========================================================================== */
.blog-stats-row{
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: var(--blog-s4) 0;
border-top: 1px solid var(--blog-line);
border-bottom: 1px solid var(--blog-line);
}
.blog-stat-card{ padding: var(--blog-s3) var(--blog-s3) var(--blog-s3) 0; }
.blog-stat-card + .blog-stat-card{
border-left: 1px solid var(--blog-line);
padding-left: var(--blog-s3);
}
.blog-stat-number{
display: block;
font-family: var(--blog-serif);
font-size: 1.5rem;
font-weight: 400;
line-height: 1.25;
color: var(--blog-text);
margin-bottom: var(--blog-s1);
letter-spacing: -0.015em;
}
.blog-stat-label{
display: block;
font-size: 0.78rem;
line-height: 1.55;
color: var(--blog-dim);
}
/* ==========================================================================
13. TABELE — bez ramek zewnętrznych i zebry
========================================================================== */
.blog-table-wrap{
overflow-x: auto;
margin: var(--blog-s4) 0;
}
.blog-table{
width: 100%;
border-collapse: collapse;
font-size: 0.88rem;
min-width: 520px;
}
.blog-table caption{
text-align: left;
color: var(--blog-dim);
padding-bottom: var(--blog-s2);
}
.blog-table th,
.blog-table td{
text-align: left;
padding: var(--blog-s2) var(--blog-s3) var(--blog-s2) 0;
vertical-align: top;
}
.blog-table th:last-child,
.blog-table td:last-child{ padding-right: 0; }
.blog-table thead th{
color: var(--blog-dim);
border-bottom: 1px solid var(--blog-line-strong);
padding-bottom: var(--blog-s2);
}
.blog-table tbody td{
color: var(--blog-muted);
line-height: 1.6;
border-bottom: 1px solid var(--blog-line);
}
.blog-table tbody tr:last-child td{ border-bottom: none; }
.blog-table tbody td:first-child{ color: var(--blog-text); }
/* Wyróżnienie wiersza: cienka złota linia prowadząca, nie tło */
.blog-table tbody tr.blog-table-highlight td{
color: var(--blog-text);
box-shadow: inset 0 -1px 0 var(--blog-gold);
}
/* Komórki z kwotami — separator tysięcy nie może łamać liczby */
.blog-table .blog-num{ white-space: nowrap; }
.blog-badge{
display: inline-block;
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blog-gold);
border: 1px solid var(--blog-line-strong);
border-radius: var(--blog-radius);
padding: 2px var(--blog-s1);
margin-left: var(--blog-s1);
white-space: nowrap;
}
/* ==========================================================================
14. CYTAT
========================================================================== */
.blog-pullquote{
margin: var(--blog-s5) 0;
padding-left: var(--blog-s3);
border-left: 1px solid var(--blog-gold);
}
.blog-content .blog-pullquote p{
font-family: var(--blog-serif);
font-size: 1.4rem;
font-weight: 400;
line-height: 1.45;
letter-spacing: -0.015em;
color: var(--blog-text);
margin: 0 0 var(--blog-s2);
}
.blog-pullquote cite{
font-style: normal;
font-size: 0.78rem;
color: var(--blog-dim);
}
.blog-content blockquote:not(.blog-pullquote){
margin: var(--blog-s4) 0;
padding-left: var(--blog-s3);
border-left: 1px solid var(--blog-line-strong);
}
.blog-content blockquote:not(.blog-pullquote) p{ margin: 0; }
/* ==========================================================================
15. CALLOUTY — różnią się wyłącznie kolorem linii i etykietą
========================================================================== */
.blog-callout{
margin: var(--blog-s4) 0;
padding-left: var(--blog-s3);
border-left: 1px solid var(--blog-line-strong);
}
.blog-callout-title{
display: block;
color: var(--blog-dim);
margin-bottom: var(--blog-s1);
}
.blog-callout-body p{
margin: 0;
font-size: 0.95rem;
line-height: 1.75;
}
.blog-callout-body p + p{ margin-top: var(--blog-s2); }
.blog-callout--tip{ border-left-color: var(--blog-gold); }
.blog-callout--tip .blog-callout-title{ color: var(--blog-gold); }
.blog-callout--warning{ border-left-color: var(--blog-clay); }
.blog-callout--warning .blog-callout-title{ color: var(--blog-clay); }
/* ==========================================================================
16. KROKI
========================================================================== */
.blog-steps{ margin: var(--blog-s4) 0; counter-reset: blog-step; }
.blog-step{
display: grid;
grid-template-columns: var(--blog-s4) 1fr;
gap: var(--blog-s3);
padding-bottom: var(--blog-s4);
position: relative;
}
.blog-step:last-child{ padding-bottom: 0; }
.blog-step:not(:last-child)::before{
content: '';
position: absolute;
left: 0;
top: var(--blog-s3);
bottom: 0;
width: 1px;
background: var(--blog-line);
}
.blog-step-num{
counter-increment: blog-step;
font-family: var(--blog-sans);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--blog-gold);
line-height: 1.6;
}
.blog-step-num::before{ content: counter(blog-step, decimal-leading-zero); }
.blog-step-body h4{ margin: 0 0 var(--blog-s1); }
.blog-step-body p{ margin: 0; font-size: 0.95rem; }
/* ==========================================================================
17. CTA — panel bez tła, oparty na liniach
========================================================================== */
.blog-cta-banner{
margin: var(--blog-s6) 0 var(--blog-s5);
padding: var(--blog-s5) 0;
border-top: 1px solid var(--blog-line-strong);
border-bottom: 1px solid var(--blog-line-strong);
text-align: center;
}
.blog-cta-banner h3{
font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
margin-bottom: var(--blog-s2);
}
.blog-content .blog-cta-banner p,
.blog-cta-banner p{
max-width: 44ch;
margin: 0 auto var(--blog-s4);
font-size: 0.95rem;
color: var(--blog-muted);
}
/* ==========================================================================
18. AKORDEON FAQ
========================================================================== */
.blog-accordion{ margin-top: var(--blog-s3); border-top: 1px solid var(--blog-line); }
.blog-accordion-item{ border-bottom: 1px solid var(--blog-line); }
.blog-accordion-trigger{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--blog-s3);
background: none;
border: none;
padding: var(--blog-s3) 0;
cursor: pointer;
text-align: left;
font-size: 0.98rem;
font-weight: 500;
line-height: 1.6;
color: var(--blog-text);
transition: color 0.2s ease;
}
.blog-accordion-trigger:hover{ color: var(--blog-gold); }
.blog-accordion-icon{
position: relative;
flex-shrink: 0;
width: 12px;
height: 12px;
transition: transform 0.3s ease;
}
.blog-accordion-icon::before,
.blog-accordion-icon::after{
content: '';
position: absolute;
left: 0;
top: 50%;
width: 12px;
height: 1px;
background: var(--blog-gold);
}
.blog-accordion-icon::after{ transform: rotate(90deg); }
.blog-accordion-item.is-open .blog-accordion-icon{ transform: rotate(45deg); }
.blog-accordion-panel{
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.blog-accordion-panel-inner{ padding: 0 var(--blog-s6) var(--blog-s3) 0; }
.blog-accordion-panel-inner p{
margin: 0;
font-size: 0.95rem;
line-height: 1.75;
}
/* ==========================================================================
19. TAGI, UDOSTĘPNIANIE, AUTOR
========================================================================== */
.blog-tags{
display: flex;
flex-wrap: wrap;
gap: var(--blog-s1);
margin: var(--blog-s5) 0 var(--blog-s3);
padding-top: var(--blog-s3);
border-top: 1px solid var(--blog-line);
}
.blog-tag{
color: var(--blog-dim);
text-decoration: none;
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
padding: 6px var(--blog-s2);
transition: color 0.2s ease, border-color 0.2s ease;
}
.blog-tag:hover{ color: var(--blog-text); border-color: var(--blog-line-strong); }
.blog-share-row{
display: flex;
align-items: center;
gap: var(--blog-s2);
margin: 0 0 var(--blog-s5);
}
.blog-share-label{ color: var(--blog-dim); margin-right: var(--blog-s1); }
.blog-share-btn{
width: 36px;
height: 36px;
border-radius: var(--blog-radius);
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid var(--blog-line);
color: var(--blog-muted);
text-decoration: none;
cursor: pointer;
font-size: 0.82rem;
transition: color 0.2s ease, border-color 0.2s ease;
}
.blog-share-btn:hover{ color: var(--blog-gold); border-color: var(--blog-gold); }
.blog-author-box-full{
display: flex;
gap: var(--blog-s3);
align-items: flex-start;
padding-top: var(--blog-s3);
border-top: 1px solid var(--blog-line);
}
.blog-author-box-full h3{
font-family: var(--blog-sans);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0;
margin-bottom: var(--blog-s1);
}
.blog-author-role{
display: block;
color: var(--blog-gold);
margin-bottom: var(--blog-s2);
}
.blog-content .blog-author-box-full p,
.blog-author-box-full p{
margin: 0;
font-size: 0.9rem;
line-height: 1.75;
}
/* ==========================================================================
20. POWIĄZANE ARTYKUŁY
========================================================================== */
.blog-related{
padding: var(--blog-s6) 0;
border-top: 1px solid var(--blog-line);
}
.blog-related h2{
font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem);
margin-bottom: var(--blog-s2);
}
.blog-related-sub{
color: var(--blog-dim);
font-size: 0.95rem;
max-width: 48ch;
margin: 0 0 var(--blog-s5);
}
.blog-related-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--blog-s4);
}
.blog-related-card{
display: block;
text-decoration: none;
transition: opacity 0.25s ease;
}
.blog-related-card:hover{ opacity: 0.7; }
.blog-related-card .blog-image-placeholder{ aspect-ratio: 16 / 10; }
.blog-related-card-body{ padding-top: var(--blog-s2); }
.blog-related-card-cat{
display: block;
color: var(--blog-gold);
margin-bottom: var(--blog-s1);
}
.blog-related-card h3{
font-size: 1.05rem;
line-height: 1.35;
margin-bottom: var(--blog-s1);
}
.blog-related-card p{
font-size: 0.85rem;
line-height: 1.65;
color: var(--blog-dim);
margin: 0;
}
/* ==========================================================================
21. FOOTER
========================================================================== */
.blog-footer{
border-top: 1px solid var(--blog-line);
padding: var(--blog-s4) 0;
}
.blog-footer-inner{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--blog-s3);
}
.blog-footer-brand{
display: flex;
align-items: center;
gap: var(--blog-s2);
text-decoration: none;
}
.blog-footer-brand img{ height: 28px; }
.blog-footer-brand .brand-wordmark{
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blog-muted);
white-space: nowrap;
line-height: 1;
}
.blog-footer-brand .brand-wordmark em{
font-style: normal;
color: var(--blog-gold);
}
.blog-footer-links{ display: flex; flex-wrap: wrap; gap: var(--blog-s3); }
.blog-footer-links a{
font-size: 0.82rem;
color: var(--blog-dim);
text-decoration: none;
transition: color 0.2s ease;
}
.blog-footer-links a:hover{ color: var(--blog-text); }
.blog-footer-social{ display: flex; gap: var(--blog-s2); }
.blog-footer-bottom{
margin-top: var(--blog-s4);
padding-top: var(--blog-s3);
border-top: 1px solid var(--blog-line);
}
.blog-footer-bottom p{
margin: 0;
font-size: 0.74rem;
color: var(--blog-dim);
}
/* ==========================================================================
22. BACK TO TOP
========================================================================== */
.blog-back-to-top{
position: fixed;
right: var(--blog-s4);
bottom: var(--blog-s4);
width: 40px;
height: 40px;
border-radius: var(--blog-radius);
background: var(--blog-surface);
border: 1px solid var(--blog-line-strong);
color: var(--blog-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.8rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease, border-color 0.2s ease, color 0.2s ease;
z-index: 999;
}
.blog-back-to-top.is-visible{ opacity: 1; visibility: visible; }
.blog-back-to-top:hover{ border-color: var(--blog-gold); color: var(--blog-gold); }
/* ==========================================================================
23. RESPONSYWNOŚĆ
========================================================================== */
@media (max-width: 1080px){
.blog-container{ padding: 0 var(--blog-s3); }
.blog-layout{
grid-template-columns: 1fr;
gap: var(--blog-s5);
}
/* display:contents rozbija sidebar na osobne elementy siatki, dzięki czemu
spis treści trafia NAD tekst, a CTA i autor zostają pod nim. */
.blog-sidebar{
display: contents;
}
.blog-toc-card{ order: 1; }
.blog-content{ max-width: 100%; order: 2; }
.blog-sidebar-cta{ order: 3; }
.blog-sidebar-author{ order: 4; }
.blog-hero-grid{ grid-template-columns: 1fr; gap: var(--blog-s4); }
.blog-hero-media{ order: -1; }
.blog-header-nav{ display: none; }
.blog-related-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
.blog-page{ font-size: 16px; }
.blog-breadcrumbs{ padding-top: var(--blog-s4); }
.blog-hero{ padding: var(--blog-s3) 0 var(--blog-s4); }
.blog-content h2{ margin-top: var(--blog-s5); }
.blog-stats-row{ grid-template-columns: 1fr; }
.blog-stat-card{ padding: var(--blog-s3) 0; }
.blog-stat-card + .blog-stat-card{
border-left: none;
border-top: 1px solid var(--blog-line);
padding-left: 0;
}
.blog-gallery{ grid-template-columns: 1fr 1fr; }
.blog-related-grid{ grid-template-columns: 1fr; gap: var(--blog-s4); }
/* Nagłówek na wąskim ekranie: zostaje sam znak graficzny i jedno CTA —
pełny lockup + przycisk nie mieszczą się w 390px */
.blog-header-phone{ display: none; }
.blog-header-brand .brand-wordmark{ display: none; }
.blog-header-inner{ gap: var(--blog-s2); }
.blog-page .blog-btn{ padding: 12px var(--blog-s2); font-size: 0.62rem; letter-spacing: 0.12em; }
.blog-meta-divider{ display: none; }
.blog-author-box-full{ flex-direction: column; }
.blog-footer-inner{ flex-direction: column; align-items: flex-start; }
.blog-accordion-panel-inner{ padding-right: var(--blog-s4); }
.blog-back-to-top{ right: var(--blog-s2); bottom: var(--blog-s2); }
.blog-pullquote p{ font-size: 1.2rem; }
}
/* ==========================================================================
24. PRINT
========================================================================== */
@media print{
.blog-header, .blog-sidebar, .blog-progress, .blog-back-to-top,
.blog-cta-banner, .blog-share-row, .blog-related, .blog-footer{
display: none !important;
}
.blog-layout{ grid-template-columns: 1fr; }
.blog-page{ background: #fff; color: #000; }
.blog-content p, .blog-content li, .blog-table td{ color: #111; }
}
/* ==========================================================================
25. REDUCED MOTION
========================================================================== */
@media (prefers-reduced-motion: reduce){
.blog-page *{
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
==========================================================================
BIBLIOTEKA KOMPONENTÓW
==========================================================================
Wszystko poniżej podlega tym samym 6 zasadom co reszta arkusza:
płasko, włoskowate linie, jeden akcent, promień 2px, skala 8px, dwa kroje.
Dodając nowy komponent NIE wprowadzaj: gradientów, cieni, nowych kolorów
akcentu, nowych promieni, wartości spoza skali 8px.
==========================================================================
========================================================================== */
/* ==========================================================================
27. IKONY — sprite SVG, kreska 1.5px, currentColor
Zastępuje Font Awesome. Użycie:
========================================================================== */
.blog-icon{
width: 1em;
height: 1em;
flex-shrink: 0;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: -0.125em;
}
.blog-icon--lg{ width: 1.5em; height: 1.5em; }
/* ==========================================================================
28. KEY TAKEAWAYS — skrót artykułu
Stawiaj TUŻ POD leadem. Czytają go zarówno ludzie w pośpiechu, jak i modele
językowe budujące odpowiedzi (AI Overviews). 3–5 punktów, każdy to pełne
zdanie, które broni się bez kontekstu reszty tekstu.
========================================================================== */
.blog-takeaways{
margin: var(--blog-s4) 0;
padding: var(--blog-s3);
border: 1px solid var(--blog-line-strong);
border-radius: var(--blog-radius);
}
.blog-takeaways > .blog-label{
display: block;
color: var(--blog-gold);
margin-bottom: var(--blog-s2);
}
.blog-takeaways ul{ margin: 0; }
.blog-takeaways li{
position: relative;
padding-left: var(--blog-s4);
margin-bottom: var(--blog-s2);
color: var(--blog-text);
font-size: 0.97rem;
line-height: 1.7;
}
.blog-takeaways li:last-child{ margin-bottom: 0; }
.blog-takeaways li::before{
content: '';
position: absolute;
left: 0;
top: 0.8em;
width: var(--blog-s2);
height: 1px;
background: var(--blog-gold);
}
/* ==========================================================================
29. CYTAT EKSPERTA — wypowiedź konkretnej osoby z zespołu
Różni się od pull-quote: pull-quote to podkreślenie zdania Z artykułu,
a to jest cytat PRZYPISANY do człowieka. Buduje E-E-A-T.
========================================================================== */
.blog-expert{
display: grid;
grid-template-columns: 48px 1fr;
gap: var(--blog-s3);
margin: var(--blog-s4) 0;
padding: var(--blog-s3);
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
}
.blog-expert .blog-avatar{ width: 48px; height: 48px; }
.blog-expert blockquote{
margin: 0;
padding: 0;
border: none;
}
.blog-expert blockquote p{
font-family: var(--blog-serif);
font-size: 1.12rem;
line-height: 1.55;
color: var(--blog-text);
margin: 0 0 var(--blog-s2);
}
.blog-expert figcaption{
margin: 0;
padding: 0;
border: none;
font-size: 0.78rem;
color: var(--blog-dim);
}
.blog-expert figcaption strong{
display: block;
color: var(--blog-text);
font-weight: 600;
font-size: 0.85rem;
}
/* ==========================================================================
30. WYKRES SŁUPKOWY — widełki cenowe, udziały, porównania
Czysty CSS, bez biblioteki. Wartość ustawiasz inline: style="--v:65"
(procent szerokości). Maks. 6 słupków — więcej staje się nieczytelne.
========================================================================== */
.blog-chart{
margin: var(--blog-s4) 0;
}
.blog-chart-row{
display: grid;
grid-template-columns: minmax(90px, 30%) 1fr auto;
align-items: center;
gap: var(--blog-s2);
padding: var(--blog-s2) 0;
border-bottom: 1px solid var(--blog-line);
}
.blog-chart-row:last-child{ border-bottom: none; }
.blog-chart-label{
font-size: 0.85rem;
color: var(--blog-text);
line-height: 1.4;
}
.blog-chart-track{
height: 6px;
background: rgba(242, 241, 234, 0.07);
border-radius: var(--blog-radius);
overflow: hidden;
}
.blog-chart-fill{
display: block;
height: 100%;
width: calc(var(--v, 50) * 1%);
background: var(--blog-gold);
border-radius: var(--blog-radius);
}
/* Wariant wyciszony — dla wartości odniesienia / tła porównania */
.blog-chart-row--muted .blog-chart-fill{ background: var(--blog-dim); }
.blog-chart-value{
font-size: 0.82rem;
color: var(--blog-muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
31. MIERNIK — ocena cechy w skali 1–5 (np. odporność materiału)
Ustawiasz przez data-score="4". Zawsze podawaj też opis słowny obok —
sama grafika nie jest dostępna dla czytników ekranu.
========================================================================== */
.blog-meter{
display: inline-flex;
align-items: center;
gap: 5px;
vertical-align: middle;
}
.blog-meter span{
width: 18px;
height: 3px;
border-radius: 1px;
background: rgba(242, 241, 234, 0.14);
}
.blog-meter span.is-on{ background: var(--blog-gold); }
/* ==========================================================================
32. ZA I PRZECIW — dwukolumnowe zestawienie
Zawsze symetrycznie: tyle samo punktów po obu stronach. Nierówna liczba
czyta się jak reklama, nie jak porada.
========================================================================== */
.blog-proscons{
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--blog-s4);
margin: var(--blog-s4) 0;
padding-top: var(--blog-s3);
border-top: 1px solid var(--blog-line-strong);
}
.blog-proscons > div > .blog-label{
display: flex;
align-items: center;
gap: var(--blog-s1);
margin-bottom: var(--blog-s2);
}
.blog-pros > .blog-label{ color: var(--blog-gold); }
.blog-cons > .blog-label{ color: var(--blog-clay); }
.blog-proscons li{
position: relative;
padding-left: var(--blog-s3);
margin-bottom: var(--blog-s2);
font-size: 0.92rem;
line-height: 1.65;
color: var(--blog-muted);
}
.blog-proscons li::before{
content: '';
position: absolute;
left: 0;
top: 0.75em;
width: 10px;
height: 1px;
}
.blog-pros li::before{ background: var(--blog-gold); }
.blog-cons li::before{ background: var(--blog-clay); }
/* ==========================================================================
33. SPECYFIKACJA — pary etykieta/wartość
Do danych technicznych realizacji: metraż, materiały, czas, budżet.
Maks. 8 par. Etykieta maks. 3 słowa.
========================================================================== */
.blog-spec{
margin: var(--blog-s4) 0;
border-top: 1px solid var(--blog-line-strong);
}
.blog-spec > div{
display: grid;
grid-template-columns: minmax(120px, 34%) 1fr;
gap: var(--blog-s3);
padding: var(--blog-s2) 0;
border-bottom: 1px solid var(--blog-line);
}
.blog-spec dt{
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blog-dim);
line-height: 1.7;
}
.blog-spec dd{
margin: 0;
font-size: 0.95rem;
color: var(--blog-text);
line-height: 1.6;
}
/* ==========================================================================
34. OŚ CZASU — harmonogram z etykietą czasu
Różni się od .blog-steps: tam liczy się KOLEJNOŚĆ, tu liczy się CZAS.
Używaj do „ile trwa realizacja", nie do „jak zamówić".
========================================================================== */
.blog-timeline{
margin: var(--blog-s4) 0;
}
.blog-timeline-item{
display: grid;
grid-template-columns: minmax(72px, 96px) 1fr;
gap: var(--blog-s3);
padding-bottom: var(--blog-s4);
position: relative;
}
.blog-timeline-item:last-child{ padding-bottom: 0; }
.blog-timeline-item::before{
content: '';
position: absolute;
left: calc(var(--blog-s2) * 0.5);
top: var(--blog-s2);
bottom: 0;
width: 1px;
background: var(--blog-line);
}
.blog-timeline-item:last-child::before{ display: none; }
.blog-timeline-when{
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--blog-gold);
padding-left: var(--blog-s3);
position: relative;
line-height: 1.7;
}
.blog-timeline-when::before{
content: '';
position: absolute;
left: 4px;
top: 0.6em;
width: 9px;
height: 9px;
border: 1px solid var(--blog-gold);
border-radius: 50%;
background: var(--blog-bg);
}
.blog-timeline-body h4{ margin: 0 0 var(--blog-s1); }
.blog-timeline-body p{ margin: 0; font-size: 0.95rem; }
/* ==========================================================================
35. CHECKLISTA — interaktywna, stan zapisywany w localStorage
Idealna do „7 pytań, które zadaj wykonawcy". Wymaga unikalnego
data-checklist="nazwa" na kontenerze, inaczej stany się nadpiszą.
========================================================================== */
.blog-checklist{
margin: var(--blog-s4) 0;
padding: var(--blog-s3);
border: 1px solid var(--blog-line-strong);
border-radius: var(--blog-radius);
}
.blog-checklist > .blog-label{
display: block;
color: var(--blog-gold);
margin-bottom: var(--blog-s2);
}
.blog-checklist ul{ margin: 0; }
.blog-checklist li{ margin-bottom: var(--blog-s2); }
.blog-checklist li:last-child{ margin-bottom: 0; }
.blog-checklist label{
display: grid;
grid-template-columns: 20px 1fr;
gap: var(--blog-s2);
align-items: start;
cursor: pointer;
font-size: 0.95rem;
line-height: 1.6;
color: var(--blog-muted);
transition: color 0.2s ease;
}
.blog-checklist label:hover{ color: var(--blog-text); }
.blog-checklist input{
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
margin: 0;
border: 1px solid var(--blog-line-strong);
border-radius: var(--blog-radius);
cursor: pointer;
position: relative;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.blog-checklist input:checked{
background: var(--blog-gold);
border-color: var(--blog-gold);
}
.blog-checklist input:checked::after{
content: '';
position: absolute;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid var(--blog-ink);
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg);
}
.blog-checklist input:checked + span{
color: var(--blog-dim);
text-decoration: line-through;
text-decoration-color: var(--blog-line-strong);
}
.blog-checklist-reset{
margin-top: var(--blog-s3);
padding-top: var(--blog-s2);
border-top: 1px solid var(--blog-line);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--blog-s2);
font-size: 0.78rem;
color: var(--blog-dim);
}
.blog-checklist-reset button{
background: none;
border: none;
color: var(--blog-dim);
font-size: 0.78rem;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
padding: 0;
}
.blog-checklist-reset button:hover{ color: var(--blog-text); }
/* ==========================================================================
36. KARTY MATERIAŁÓW — próbka + charakterystyka
Kolor próbki ustawiasz inline: style="--swatch:#8B7355".
Do fornirów/lakierów/kompozytów. Maks. 4 w rzędzie na desktopie.
========================================================================== */
.blog-swatches{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--blog-s2);
margin: var(--blog-s4) 0;
}
.blog-swatch{
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
overflow: hidden;
}
.blog-swatch-chip{
height: 72px;
background: var(--swatch, var(--blog-surface));
border-bottom: 1px solid var(--blog-line);
}
.blog-swatch-body{ padding: var(--blog-s2); }
.blog-swatch h4{
margin: 0 0 4px;
font-size: 0.85rem;
}
.blog-swatch p{
margin: 0;
font-size: 0.78rem;
line-height: 1.55;
color: var(--blog-dim);
}
.blog-swatch .blog-meter{ margin-top: var(--blog-s1); }
/* ==========================================================================
37. PALETA KOLORÓW — do artykułów o trendach
Zawsze podawaj nazwę koloru tekstem. Sam kafelek nic nie mówi ani
czytnikowi ekranu, ani osobie z zaburzeniami widzenia barw.
========================================================================== */
.blog-palette{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: var(--blog-s2);
margin: var(--blog-s4) 0;
}
.blog-palette-item{ text-align: left; }
.blog-palette-chip{
height: 88px;
border-radius: var(--blog-radius);
border: 1px solid var(--blog-line);
background: var(--swatch, var(--blog-surface));
margin-bottom: var(--blog-s1);
}
.blog-palette-name{
display: block;
font-size: 0.82rem;
color: var(--blog-text);
line-height: 1.4;
}
.blog-palette-code{
display: block;
font-size: 0.72rem;
color: var(--blog-dim);
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
38. OBSZAR DZIAŁANIA — lista lokalizacji (SEO lokalne)
Nie rób z tego ściany 40 dzielnic — to wygląda na spam. Maks. 12,
pogrupowane, z jednym zdaniem kontekstu nad listą.
========================================================================== */
.blog-area{
margin: var(--blog-s4) 0;
padding: var(--blog-s3);
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
}
.blog-area > .blog-label{
display: flex;
align-items: center;
gap: var(--blog-s1);
color: var(--blog-gold);
margin-bottom: var(--blog-s2);
}
.blog-area p{ margin: 0 0 var(--blog-s2) !important; font-size: 0.92rem; }
.blog-area-list{
display: flex;
flex-wrap: wrap;
gap: var(--blog-s1);
}
.blog-area-list span{
font-size: 0.8rem;
color: var(--blog-muted);
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
padding: 4px var(--blog-s2);
}
/* ==========================================================================
39. KARTA REALIZACJI — case study z lokalizacją
Do artykułów lokalnych i portfolio. Metryki maks. 3.
========================================================================== */
.blog-case{
margin: var(--blog-s4) 0;
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
overflow: hidden;
}
.blog-case .blog-image-placeholder{
aspect-ratio: 21 / 9;
border: none;
border-bottom: 1px solid var(--blog-line);
border-radius: 0;
}
.blog-case-body{ padding: var(--blog-s3); }
.blog-case-loc{
display: flex;
align-items: center;
gap: var(--blog-s1);
color: var(--blog-gold);
margin-bottom: var(--blog-s1);
}
.blog-case-body h4{ margin: 0 0 var(--blog-s1); font-size: 1.05rem; }
.blog-case-body > p{ margin: 0 0 var(--blog-s3) !important; font-size: 0.92rem; }
.blog-case-metrics{
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--blog-line);
}
.blog-case-metrics > div{
padding: var(--blog-s2) var(--blog-s2) 0 0;
}
.blog-case-metrics > div + div{
border-left: 1px solid var(--blog-line);
padding-left: var(--blog-s2);
}
.blog-case-metrics dt{
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--blog-dim);
margin-bottom: 2px;
}
.blog-case-metrics dd{
margin: 0;
font-family: var(--blog-serif);
font-size: 1.1rem;
color: var(--blog-text);
}
/* ==========================================================================
40. PORÓWNANIE PRZED/PO — suwak
Wymaga dwóch warstw o identycznych proporcjach. Zawsze opisz w podpisie,
co dokładnie się zmieniło — sam suwak nie niesie informacji.
========================================================================== */
.blog-compare{
position: relative;
margin: var(--blog-s4) 0 0;
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--blog-surface);
touch-action: pan-y;
}
.blog-compare-layer{
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blog-dim);
}
.blog-compare-layer--after{
background: var(--blog-bg);
clip-path: inset(0 0 0 var(--pos, 50%));
}
.blog-compare-handle{
position: absolute;
top: 0;
bottom: 0;
left: var(--pos, 50%);
width: 1px;
background: var(--blog-gold);
pointer-events: none;
}
.blog-compare-handle::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 36px;
height: 36px;
transform: translate(-50%, -50%);
border: 1px solid var(--blog-gold);
border-radius: 50%;
background: var(--blog-bg);
}
.blog-compare input[type="range"]{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: ew-resize;
}
.blog-compare-tag{
position: absolute;
top: var(--blog-s2);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blog-dim);
pointer-events: none;
}
.blog-compare-tag--l{ left: var(--blog-s2); }
.blog-compare-tag--r{ right: var(--blog-s2); }
/* ==========================================================================
41. MOODBOARD — nieregularna siatka inspiracji
Do artykułów wizerunkowych i trendowych. Dokładnie 5 kafelków —
układ jest zaprojektowany pod tę liczbę.
========================================================================== */
.blog-moodboard{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 110px;
gap: var(--blog-s2);
margin: var(--blog-s4) 0;
}
.blog-moodboard .blog-image-placeholder{ aspect-ratio: auto; height: 100%; }
.blog-moodboard > :nth-child(1){ grid-column: span 2; grid-row: span 2; }
.blog-moodboard > :nth-child(4){ grid-column: span 2; }
/* ==========================================================================
42. ZAKŁADKI — treść alternatywna, nie sekwencyjna
Używaj TYLKO gdy warianty się wykluczają (np. kuchnia / łazienka / garderoba).
Nigdy do treści, którą trzeba przeczytać po kolei — ukryty tekst czyta się
gorzej i słabiej indeksuje.
========================================================================== */
.blog-tabs{ margin: var(--blog-s4) 0; }
.blog-tablist{
display: flex;
flex-wrap: wrap;
gap: var(--blog-s3);
border-bottom: 1px solid var(--blog-line-strong);
margin-bottom: var(--blog-s3);
}
.blog-tablist button{
background: none;
border: none;
padding: 0 0 var(--blog-s2);
margin-bottom: -1px;
cursor: pointer;
font-family: var(--blog-sans);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blog-dim);
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.blog-tablist button:hover{ color: var(--blog-text); }
.blog-tablist button[aria-selected="true"]{
color: var(--blog-gold);
border-bottom-color: var(--blog-gold);
}
.blog-tabpanel[hidden]{ display: none; }
.blog-tabpanel > :first-child{ margin-top: 0; }
/* ==========================================================================
43. LEAD MAGNET — pobranie materiału w zamian za kontakt
Jeden na artykuł, nie więcej. Konkurujący z głównym CTA rozmywa konwersję.
========================================================================== */
.blog-magnet{
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--blog-s3);
margin: var(--blog-s4) 0;
padding: var(--blog-s3);
border: 1px solid var(--blog-gold);
border-radius: var(--blog-radius);
}
.blog-magnet-icon{ color: var(--blog-gold); font-size: 1.5rem; }
.blog-magnet h4{ margin: 0 0 4px; }
.blog-magnet p{ margin: 0 !important; font-size: 0.85rem; color: var(--blog-dim); }
/* ==========================================================================
44. KARTA DORADCY — konwersja przez konkretną osobę
Działa lepiej niż bezosobowe CTA. Wymaga PRAWDZIWEJ osoby i zdjęcia.
========================================================================== */
.blog-advisor{
display: grid;
grid-template-columns: 64px 1fr;
gap: var(--blog-s3);
align-items: center;
margin: var(--blog-s4) 0;
padding: var(--blog-s3);
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
}
.blog-advisor .blog-avatar{ width: 64px; height: 64px; font-size: 0.85rem; }
.blog-advisor h4{ margin: 0 0 2px; }
.blog-advisor .blog-author-role{ margin-bottom: var(--blog-s2); }
.blog-advisor-links{
display: flex;
flex-wrap: wrap;
gap: var(--blog-s3);
font-size: 0.85rem;
}
.blog-advisor-links a{
display: inline-flex;
align-items: center;
gap: var(--blog-s1);
color: var(--blog-text);
text-decoration: none;
border-bottom: 1px solid var(--blog-gold);
padding-bottom: 1px;
}
.blog-advisor-links a:hover{ color: var(--blog-gold); }
/* ==========================================================================
45. PRZECZYTAJ TAKŻE — link śródtekstowy do innego artykułu
Maks. 2 na artykuł. Wstawiaj po akapicie, który naturalnie kończy wątek.
========================================================================== */
.blog-readalso{
display: flex;
align-items: center;
gap: var(--blog-s2);
margin: var(--blog-s4) 0;
padding: var(--blog-s2) 0;
border-top: 1px solid var(--blog-line);
border-bottom: 1px solid var(--blog-line);
}
.blog-readalso .blog-label{ color: var(--blog-gold); white-space: nowrap; }
.blog-readalso a{
font-size: 0.92rem;
color: var(--blog-text);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.blog-readalso a:hover{ border-bottom-color: var(--blog-gold); }
/* ==========================================================================
46. SŁOWNICZEK — definicja terminu branżowego
Inline: fornir
Definicja pokazuje się w tooltipie i jest czytana przez czytniki ekranu.
========================================================================== */
.blog-term{
font-style: normal;
border-bottom: 1px dotted var(--blog-gold);
cursor: help;
position: relative;
}
.blog-term::after{
content: attr(data-def);
position: absolute;
left: 0;
bottom: calc(100% + 8px);
width: max-content;
max-width: 280px;
padding: var(--blog-s2);
background: var(--blog-surface);
border: 1px solid var(--blog-line-strong);
border-radius: var(--blog-radius);
font-size: 0.8rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
line-height: 1.5;
color: var(--blog-muted);
z-index: 10;
pointer-events: none;
/* display:none zamiast visibility:hidden — element ukryty przez visibility
nadal zajmuje miejsce w układzie i rozpychał stronę w poziomie na telefonie. */
display: none;
}
.blog-term:hover::after,
.blog-term:focus-visible::after{ display: block; }
/* ==========================================================================
47. ŹRÓDŁA — bibliografia na końcu artykułu
Podnosi wiarygodność (E-E-A-T). Podawaj wydawcę i rok, nie sam link.
========================================================================== */
.blog-sources{
margin: var(--blog-s4) 0;
padding-top: var(--blog-s3);
border-top: 1px solid var(--blog-line);
}
.blog-sources > .blog-label{ display: block; color: var(--blog-dim); margin-bottom: var(--blog-s2); }
.blog-sources ol{ counter-reset: blog-src; }
.blog-sources li{
counter-increment: blog-src;
position: relative;
padding-left: var(--blog-s4);
margin-bottom: var(--blog-s1);
font-size: 0.82rem;
line-height: 1.65;
color: var(--blog-dim);
}
.blog-sources li::before{
content: '[' counter(blog-src) ']';
position: absolute;
left: 0;
color: var(--blog-gold);
font-variant-numeric: tabular-nums;
}
/* ==========================================================================
48. AKTUALIZACJA — data ostatniej rewizji treści
Do artykułów z datą w tytule („ceny 2026"). Sygnał świeżości dla Google.
========================================================================== */
.blog-updated{
display: inline-flex;
align-items: center;
gap: var(--blog-s1);
font-size: 0.78rem;
color: var(--blog-dim);
padding: 6px var(--blog-s2);
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
}
.blog-updated svg{ color: var(--blog-gold); }
/* ==========================================================================
49. RESPONSYWNOŚĆ KOMPONENTÓW
========================================================================== */
@media (max-width: 720px){
.blog-proscons{ grid-template-columns: 1fr; gap: var(--blog-s3); }
.blog-expert{ grid-template-columns: 1fr; }
.blog-expert .blog-avatar{ margin-bottom: calc(var(--blog-s1) * -1); }
.blog-magnet{ grid-template-columns: 1fr; text-align: left; }
.blog-advisor{ grid-template-columns: 1fr; }
.blog-spec > div{ grid-template-columns: 1fr; gap: 2px; }
.blog-chart-row{ grid-template-columns: 1fr auto; }
.blog-chart-track{ grid-column: 1 / -1; order: 3; }
.blog-case-metrics{ grid-template-columns: 1fr; }
.blog-case-metrics > div + div{
border-left: none;
border-top: 1px solid var(--blog-line);
padding-left: 0;
}
.blog-moodboard{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 96px; }
.blog-moodboard > :nth-child(4){ grid-column: span 1; }
.blog-readalso{ flex-direction: column; align-items: flex-start; gap: var(--blog-s1); }
.blog-term::after{ max-width: 240px; }
}
/* ==========================================================================
50. KOD INLINE — nazwy klas, atrybuty, fragmenty składni
Bez tego długie tokeny (np. style="--swatch:#8B7355") nie łamią się
i rozpychają układ na telefonie, powodując poziome przewijanie strony.
========================================================================== */
.blog-content code{
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.85em;
color: var(--blog-gold);
background: rgba(242, 241, 234, 0.05);
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
padding: 1px 5px;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Zabezpieczenie ostateczne: żaden komponent nie może wypchnąć strony
w poziomie. Tabele mają własny scroll wewnątrz .blog-table-wrap. */
.blog-content,
.blog-content * {
min-width: 0;
}
.blog-content pre,
.blog-content p,
.blog-content li,
.blog-content dd,
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4{
overflow-wrap: break-word;
}
/* ==========================================================================
51. WIDGET REZERWACJI KONSULTACJI
Renderowany przez blog-booking.js do elementu [data-booking].
Korzysta z tego samego backendu co widget na ofertach:
GET /api/consultations/availability
POST /api/offer/book-consultation
Dzięki temu dostępność i blokada slotów są WSPÓLNE — nie da się
podwójnie zarezerwować tego samego terminu z bloga i z oferty.
========================================================================== */
/* — Sekcja zapraszająca — */
.blog-booking{
margin: var(--blog-s6) 0;
padding: var(--blog-s5) 0;
border-top: 1px solid var(--blog-line-strong);
border-bottom: 1px solid var(--blog-line-strong);
}
.blog-booking-head{ margin-bottom: var(--blog-s4); }
.blog-booking .blog-label{ display: block; color: var(--blog-gold); margin-bottom: var(--blog-s2); }
.blog-booking h3{
font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
margin-bottom: var(--blog-s2);
}
.blog-booking-sub{
color: var(--blog-muted);
font-size: 0.97rem;
max-width: 52ch;
margin: 0;
}
.blog-booking-chips{
display: flex;
flex-wrap: wrap;
gap: var(--blog-s1);
margin: var(--blog-s3) 0 0;
}
.blog-booking-chips span{
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--blog-muted);
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
padding: 5px var(--blog-s2);
}
.blog-booking-chips svg{ color: var(--blog-gold); }
.blog-booking-points{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--blog-s4);
margin-bottom: var(--blog-s4);
}
.blog-booking-point{
padding-top: var(--blog-s2);
border-top: 1px solid var(--blog-line);
}
.blog-booking-point strong{
display: block;
font-size: 0.9rem;
color: var(--blog-text);
margin-bottom: 4px;
}
.blog-booking-point span{
font-size: 0.85rem;
line-height: 1.6;
color: var(--blog-dim);
}
/* — Awatary zespołu — */
.blog-booking-team{
display: flex;
align-items: center;
gap: var(--blog-s2);
margin-bottom: var(--blog-s4);
}
.blog-booking-faces{ display: flex; }
.blog-booking-faces img,
.blog-booking-faces .blog-avatar{
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--blog-bg);
outline: 1px solid var(--blog-line-strong);
}
.blog-booking-faces > * + *{ margin-left: -10px; }
.blog-booking-team p{
margin: 0 !important;
font-size: 0.85rem;
color: var(--blog-dim);
}
/* ==========================================================================
MODAL
========================================================================== */
.blog-modal{
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--blog-s3);
background: rgba(13, 13, 12, 0.92);
}
.blog-modal[hidden]{ display: none; }
.blog-modal-box{
width: 100%;
max-width: 560px;
max-height: calc(100vh - var(--blog-s5));
overflow-y: auto;
background: var(--blog-bg);
border: 1px solid var(--blog-line-strong);
border-radius: var(--blog-radius);
padding: var(--blog-s4);
}
.blog-modal-head{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--blog-s3);
margin-bottom: var(--blog-s3);
padding-bottom: var(--blog-s3);
border-bottom: 1px solid var(--blog-line);
}
.blog-modal-head h4{
font-family: var(--blog-serif);
font-size: 1.25rem;
font-weight: 400;
letter-spacing: -0.015em;
margin: 0;
}
.blog-modal-step{
display: block;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blog-gold);
margin-bottom: 6px;
}
.blog-modal-close{
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
color: var(--blog-muted);
cursor: pointer;
font-size: 1rem;
line-height: 1;
transition: color 0.2s ease, border-color 0.2s ease;
}
.blog-modal-close:hover{ color: var(--blog-gold); border-color: var(--blog-gold); }
.blog-modal-section + .blog-modal-section{
margin-top: var(--blog-s3);
padding-top: var(--blog-s3);
border-top: 1px solid var(--blog-line);
}
.blog-modal-section > .blog-label{
display: block;
color: var(--blog-dim);
margin-bottom: var(--blog-s2);
}
/* — Kalendarz — */
.blog-cal-nav{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--blog-s2);
}
.blog-cal-month{
font-size: 0.9rem;
font-weight: 600;
color: var(--blog-text);
text-transform: capitalize;
}
.blog-cal-nav button{
width: 30px;
height: 30px;
background: none;
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
color: var(--blog-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s ease, border-color 0.2s ease;
}
.blog-cal-nav button:hover:not(:disabled){ color: var(--blog-gold); border-color: var(--blog-gold); }
.blog-cal-nav button:disabled{ opacity: 0.3; cursor: not-allowed; }
.blog-cal-grid{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.blog-cal-dow{
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--blog-dim);
text-align: center;
padding-bottom: 4px;
}
.blog-cal-day{
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 1px solid transparent;
border-radius: var(--blog-radius);
color: var(--blog-muted);
font-family: var(--blog-sans);
font-size: 0.85rem;
cursor: pointer;
transition: all 0.15s ease;
}
.blog-cal-day:hover:not(:disabled){ border-color: var(--blog-line-strong); color: var(--blog-text); }
.blog-cal-day:disabled{ color: rgba(242,241,234,0.18); cursor: not-allowed; }
.blog-cal-day.is-selected{
background: var(--blog-cream);
border-color: var(--blog-cream);
color: var(--blog-ink);
font-weight: 600;
}
.blog-cal-day.is-empty{ visibility: hidden; }
/* — Wybór doradcy — */
.blog-pick-list{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--blog-s1);
}
.blog-pick{
display: flex;
align-items: center;
gap: var(--blog-s2);
padding: var(--blog-s2);
background: none;
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
cursor: pointer;
text-align: left;
font-family: var(--blog-sans);
transition: border-color 0.2s ease;
}
.blog-pick:hover{ border-color: var(--blog-line-strong); }
.blog-pick.is-selected{ border-color: var(--blog-gold); }
.blog-pick img,
.blog-pick .blog-avatar{
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.blog-pick strong{
display: block;
font-size: 0.88rem;
font-weight: 600;
color: var(--blog-text);
}
.blog-pick span{
font-size: 0.75rem;
color: var(--blog-dim);
}
/* — Godziny — */
.blog-slot-list{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
gap: var(--blog-s1);
}
.blog-slot{
padding: 9px 4px;
background: none;
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
color: var(--blog-muted);
font-family: var(--blog-sans);
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: all 0.15s ease;
}
.blog-slot:hover{ border-color: var(--blog-line-strong); color: var(--blog-text); }
.blog-slot.is-selected{
background: var(--blog-cream);
border-color: var(--blog-cream);
color: var(--blog-ink);
font-weight: 600;
}
/* — Formularz kontaktowy — */
.blog-field{ margin-bottom: var(--blog-s2); }
.blog-field label{
display: block;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blog-dim);
margin-bottom: 6px;
}
.blog-field input,
.blog-field textarea{
width: 100%;
background: var(--blog-surface);
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius);
padding: 11px var(--blog-s2);
color: var(--blog-text);
font-family: var(--blog-sans);
font-size: 0.92rem;
transition: border-color 0.2s ease;
}
.blog-field input:focus,
.blog-field textarea:focus{
outline: none;
border-color: var(--blog-gold);
}
.blog-field input::placeholder,
.blog-field textarea::placeholder{ color: rgba(242,241,234,0.32); }
.blog-field-row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--blog-s2);
}
.blog-field-hint{
font-size: 0.74rem;
color: var(--blog-dim);
margin-top: 4px;
}
/* — Podsumowanie wyboru — */
.blog-booking-summary{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--blog-s2);
padding: var(--blog-s2);
border: 1px solid var(--blog-gold);
border-radius: var(--blog-radius);
margin-bottom: var(--blog-s3);
font-size: 0.85rem;
color: var(--blog-text);
}
.blog-booking-summary svg{ color: var(--blog-gold); }
/* — Komunikaty — */
.blog-msg{
padding: var(--blog-s2);
border-radius: var(--blog-radius);
font-size: 0.85rem;
line-height: 1.6;
margin-bottom: var(--blog-s2);
border: 1px solid var(--blog-line-strong);
color: var(--blog-muted);
}
.blog-msg--error{ border-color: var(--blog-clay); color: var(--blog-clay); }
.blog-msg--empty{ color: var(--blog-dim); text-align: center; }
/* — Stopka modalu — */
.blog-modal-foot{
display: flex;
gap: var(--blog-s2);
margin-top: var(--blog-s3);
padding-top: var(--blog-s3);
border-top: 1px solid var(--blog-line);
}
.blog-modal-foot .blog-btn{ flex: 1; }
.blog-page .blog-btn[disabled]{
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
/* — Ekran potwierdzenia — */
.blog-booking-done{ text-align: center; padding: var(--blog-s3) 0; }
.blog-booking-done-mark{
width: 52px;
height: 52px;
margin: 0 auto var(--blog-s3);
border: 1px solid var(--blog-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--blog-gold);
}
.blog-booking-done h4{
font-family: var(--blog-serif);
font-size: 1.3rem;
font-weight: 400;
margin: 0 0 var(--blog-s2);
}
.blog-booking-done p{
color: var(--blog-muted);
font-size: 0.92rem;
max-width: 42ch;
margin: 0 auto var(--blog-s2) !important;
}
@media (max-width: 720px){
.blog-booking-points{ grid-template-columns: 1fr; gap: var(--blog-s3); }
.blog-modal{ padding: 0; align-items: flex-end; }
.blog-modal-box{
max-width: 100%;
max-height: 92vh;
padding: var(--blog-s3);
}
.blog-field-row{ grid-template-columns: 1fr; }
.blog-modal-foot{ flex-direction: column-reverse; }
}
/* ==========================================================================
52. ZGODNOŚĆ ZE STRONĄ GŁÓWNĄ (v4)
--------------------------------------------------------------------------
Blog używa tego samego navbaru i stopki co index.html (css/layout.css)
i tych samych przycisków (.btn z css/base.css). Ta sekcja przestawia
komponenty bloga na język strony głównej: Montserrat w nagłówkach,
szampański akcent, zaokrąglone panele na --surface, przyciski-pigułki.
Ładowana jako ostatnia — wygrywa z regułami z sekcji 1–51.
========================================================================== */
/* — Stały navbar strony głównej: treść zaczyna się pod nim — */
.blog-page{
padding-top: var(--blog-header-h);
font-size: 16.5px;
line-height: 1.75;
}
.blog-page .navbar{ position: fixed; }
.blog-progress{
position: fixed;
top: var(--blog-header-h);
left: 0;
right: 0;
height: 2px;
z-index: calc(var(--z-nav, 100) + 1);
}
.blog-progress-bar{ background: linear-gradient(90deg, var(--blog-gold-hi), var(--blog-gold)); }
/* Nawigacja: link „Poradnik” aktywny na stronach bloga */
.blog-page .nav-link[aria-current]{ color: var(--blog-text); }
/* — Typografia: jak .section-title / .hero-title — */
.blog-page h1,
.blog-page h2,
.blog-page h3{
font-family: var(--blog-sans);
font-weight: 600;
letter-spacing: -0.02em;
text-wrap: balance;
}
.blog-hero h1{
font-size: clamp(2rem, 1.2rem + 2.8vw, 3.25rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
}
.blog-hero h1 .blog-h1-accent{ color: var(--blog-gold-hi); font-weight: 600; }
.blog-content h2{
font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem);
font-weight: 700;
letter-spacing: -0.03em;
}
.blog-content h2::before{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.4rem;
height: 1.6rem;
padding: 0 0.6rem;
border: 1px solid var(--blog-gold-line);
border-radius: var(--r-pill, 999px);
background: var(--blog-gold-soft);
color: var(--blog-gold-hi);
font-size: 0.7rem;
letter-spacing: 0.12em;
line-height: 1;
}
.blog-content h3{ font-size: 1.25rem; }
.blog-content p.blog-lead{ font-size: clamp(1.08rem, 1rem + 0.3vw, 1.22rem); }
.blog-content a:not(.blog-btn):not(.btn){
border-bottom-color: var(--blog-gold-line);
}
.blog-content a:not(.blog-btn):not(.btn):hover{ color: var(--blog-gold-hi); border-bottom-color: var(--blog-gold); }
/* — Eyebrow jako pigułka (.eyebrow ze strony głównej) — */
.blog-eyebrow{
gap: 0.5rem;
padding: 0.35rem 0.95rem;
border: 1px solid var(--blog-gold-line);
border-radius: var(--r-pill, 999px);
background: var(--blog-gold-soft);
color: var(--blog-gold-hi);
font-size: var(--fs-xs, 0.8125rem);
letter-spacing: 0.12em;
}
.blog-eyebrow::before{ display: none; }
/* — Hero: zdjęcie w zaokrąglonej ramce jak karty realizacji — */
.blog-hero-media img,
.blog-hero-media .blog-image-placeholder{
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--blog-radius-lg);
border: 1px solid var(--blog-line);
}
.blog-content figure img{
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--blog-radius-md);
}
.blog-image-placeholder{
border-radius: var(--blog-radius-md);
background:
repeating-linear-gradient(135deg, transparent 0 14px, rgb(255 255 255 / 0.018) 14px 15px),
var(--blog-surface);
}
.blog-image-placeholder span{ max-width: 36ch; text-transform: none; letter-spacing: 0.02em; font-weight: 500; font-size: 0.78rem; }
.blog-page figcaption{ border-top: 0; padding-top: 0; }
.blog-avatar{ background: var(--blog-gold-soft); border-color: var(--blog-gold-line); color: var(--blog-gold-hi); }
/* — Panele (karty strony głównej: --surface, linia, --r-md) — */
.blog-takeaways,
.blog-callout,
.blog-checklist,
.blog-proscons > div,
.blog-readalso,
.blog-sources,
.blog-area{
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius-md);
background: var(--blog-surface);
}
.blog-takeaways{ padding: var(--blog-s3); border-color: var(--blog-gold-line); }
.blog-callout{
padding: var(--blog-s3);
border-left: 3px solid var(--blog-line-strong);
}
.blog-callout--tip{ border-left-color: var(--blog-gold); }
.blog-callout--warning{ border-left-color: var(--blog-clay); }
.blog-proscons > div{ padding: var(--blog-s3); }
.blog-readalso{ padding: var(--blog-s2) var(--blog-s3); }
.blog-sources,
.blog-area{ padding: var(--blog-s3); }
/* — Kroki: numer w kółku jak .step-marker na stronie głównej — */
.blog-step{ grid-template-columns: 2.75rem 1fr; }
.blog-step-num{
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border: 1px solid var(--blog-gold-line);
border-radius: 50%;
background: var(--blog-surface);
color: var(--blog-gold-hi);
letter-spacing: 0.06em;
font-size: 0.78rem;
position: relative;
z-index: 1;
}
.blog-step:not(:last-child)::before{ left: 1.375rem; top: 2.75rem; }
.blog-step-body{ padding-top: 0.55rem; }
/* — Tabele w panelu — */
.blog-table-wrap{
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius-md);
background: var(--blog-surface);
padding: var(--blog-s2) var(--blog-s3);
}
.blog-table caption{ text-transform: none; letter-spacing: 0.02em; font-weight: 500; font-size: 0.8rem; }
/* — Pull-quote — */
.blog-pullquote{ border-left: 3px solid var(--blog-gold); }
.blog-content .blog-pullquote p{ font-weight: 600; letter-spacing: -0.02em; font-size: 1.3rem; color: var(--blog-gold-hi); }
/* — FAQ: karty .faq-item ze strony głównej — */
.blog-accordion{ border-top: 0; display: grid; gap: 0.75rem; }
.blog-accordion-item{
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius-md);
background: var(--blog-surface);
transition: border-color var(--dur, .25s), background-color var(--dur, .25s);
}
.blog-accordion-item:hover{ border-color: var(--blog-line-strong); }
.blog-accordion-item.is-open{ border-color: var(--blog-gold-line); background: var(--blog-surface-2); }
.blog-accordion-trigger{ padding: 1.1rem 1.4rem; font-weight: 600; }
.blog-accordion-panel-inner{ padding: 0 1.4rem 1.2rem; }
.blog-accordion-icon::before, .blog-accordion-icon::after{ height: 2px; border-radius: 2px; }
/* — CTA: panel jak .calculator-container — */
.blog-cta-banner{
padding: var(--blog-s5) var(--blog-s4);
border: 1px solid var(--blog-gold-line);
border-radius: var(--blog-radius-lg);
background:
radial-gradient(120% 140% at 50% 0%, var(--blog-gold-soft), transparent 60%),
var(--blog-surface);
}
.blog-cta-banner h2,
.blog-cta-banner h3{ font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem); margin: 0 0 var(--blog-s2); }
.blog-content .blog-cta-banner h2::before{ display: none; }
.blog-cta-contact{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--blog-s1) var(--blog-s3);
margin-top: var(--blog-s3);
font-size: 0.9rem;
color: var(--blog-muted);
}
.blog-cta-contact a{ display: inline-flex; align-items: center; gap: var(--blog-s1); }
.blog-cta-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
/* — Sidebar — */
.blog-sidebar-cta{
padding: var(--blog-s3);
border: 1px solid var(--blog-gold-line);
border-radius: var(--blog-radius-md);
background: var(--blog-surface);
}
.blog-sidebar-cta h3{ font-size: 1rem; }
.blog-toc-list a{ border-left-width: 2px; }
.blog-toc-card h2{ font-size: 0.7rem; }
/* — Przyciski bloga = .btn strony głównej — */
.blog-page .blog-btn{
min-height: 3rem;
padding: 0.8rem 1.6rem;
border-radius: var(--r-pill, 999px);
font-size: var(--fs-sm, 0.9375rem);
letter-spacing: 0.02em;
text-transform: none;
line-height: 1.2;
transition: transform var(--dur, .25s) var(--ease, ease), box-shadow var(--dur, .25s), background-color var(--dur, .25s), border-color var(--dur, .25s);
}
.blog-page .blog-btn:hover{ transform: translateY(-2px); }
.blog-page .blog-btn-primary,
.blog-page .blog-btn-primary:hover{
color: var(--blog-ink);
border-color: transparent;
background: linear-gradient(135deg, var(--accent-hi), var(--accent) 60%, var(--accent-lo));
box-shadow: 0 6px 24px rgb(200 184 138 / 0.22);
}
.blog-page .blog-btn-primary:hover{ box-shadow: 0 10px 34px rgb(200 184 138 / 0.38); }
.blog-page .blog-btn-outline{
color: var(--blog-gold-hi);
border-color: var(--blog-gold-line);
background: rgb(255 255 255 / 0.04);
}
.blog-page .blog-btn-outline:hover{ color: var(--blog-gold-hi); border-color: var(--blog-gold); background: var(--blog-gold-soft); }
/* — Tagi, udostępnianie, autor — */
.blog-tag{ border-radius: var(--r-pill, 999px); padding: 6px 14px; }
.blog-share-btn{ border-radius: 50%; width: 2.5rem; height: 2.5rem; }
.blog-author-box-full{
padding: var(--blog-s3);
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius-md);
background: var(--blog-surface);
}
/* — Powiązane: tło sekcji jak .section--alt — */
.blog-related{ background: var(--bg-deep, #0a0a0b); }
.blog-related h2{ font-weight: 700; letter-spacing: -0.03em; }
.blog-related-card{
border: 1px solid var(--blog-line);
border-radius: var(--blog-radius-lg);
background: var(--blog-surface);
overflow: hidden;
transition: transform var(--dur, .25s) var(--ease, ease), border-color var(--dur, .25s);
}
.blog-related-card:hover{ opacity: 1; transform: translateY(-4px); border-color: var(--blog-gold-line); }
.blog-related-card .blog-image-placeholder,
.blog-related-card img{ border: 0; border-radius: 0; aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.blog-related-card-body{ padding: var(--blog-s3); }
.blog-related-card h3{ font-size: 1.05rem; }
/* — Back to top = .back-to-top strony głównej — */
.blog-back-to-top{
border-radius: 50%;
width: 3rem;
height: 3rem;
border-color: var(--blog-gold-line);
background: rgb(23 23 26 / 0.9);
color: var(--blog-gold-hi);
backdrop-filter: blur(10px);
}
.blog-back-to-top:hover{ background: var(--blog-gold); color: var(--blog-ink); }
/* — Ikony sprite'u w navbarze/stopce strony głównej — */
.blog-page .nav-cta-btn .blog-icon,
.blog-page .social-link .blog-icon{ width: 1.05rem; height: 1.05rem; }
.blog-page .footer-contact .blog-icon{ flex: none; width: 1rem; height: 1rem; margin-top: 0.3rem; color: var(--blog-gold); }
/* — Listing bloga (blog.html) — */
.blog-index-hero{ padding: var(--blog-s5) 0 var(--blog-s4); text-align: center; }
.blog-index-hero .blog-dek{ margin-inline: auto; max-width: 52ch; }
.blog-index-filter{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 0 var(--blog-s4); }
.blog-index-filter a{
padding: 0.5rem 1.1rem;
border: 1px solid var(--blog-line-strong);
border-radius: var(--r-pill, 999px);
color: var(--blog-muted);
font-size: var(--fs-sm, .9375rem);
font-weight: 500;
text-decoration: none;
}
.blog-index-filter a:hover{ border-color: var(--blog-gold-line); color: var(--blog-text); }
.blog-index-group{ padding-bottom: var(--blog-s5); }
.blog-index-group > h2{ font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); font-weight: 700; margin: 0 0 var(--blog-s3); }
.blog-index-group .blog-related-grid{ gap: var(--blog-s3); }
.blog-draft-badge{
display: inline-block;
margin-left: var(--blog-s1);
padding: 1px 8px;
border: 1px solid var(--blog-line-strong);
border-radius: var(--r-pill, 999px);
font-size: 0.6rem;
letter-spacing: 0.1em;
color: var(--blog-dim);
vertical-align: middle;
}
@media (max-width: 1080px){
.blog-sidebar-cta{ margin-top: 0; }
}
@media (max-width: 720px){
.blog-container{ padding: 0 16px; }
.blog-cta-banner{ padding: var(--blog-s4) var(--blog-s3); }
.blog-takeaways, .blog-callout, .blog-checklist{ padding: var(--blog-s2); }
.blog-table-wrap{ padding: var(--blog-s1) var(--blog-s2); }
.blog-page .blog-btn{ padding: 0.8rem 1.25rem; font-size: var(--fs-sm, .9375rem); letter-spacing: 0.02em; }
}
@media print{
.blog-page .navbar, .blog-page .footer{ display: none !important; }
.blog-page{ padding-top: 0; }
}
/* 52b. Poprawki układu po przeglądzie w przeglądarce */
.blog-content h2::before{ display: flex; width: fit-content; margin-bottom: 14px; }
@media (min-width: 1081px){ .blog-hero-grid{ grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.blog-hero h1{ font-size: clamp(1.9rem, 1.2rem + 2vw, 2.75rem); }
:root{ --blog-sidebar: 240px; }
.blog-sidebar-cta .blog-btn{ padding: 0.75rem 1rem; white-space: nowrap; font-size: 0.875rem; }
@media (max-width: 1080px){
.blog-hero-media img, .blog-hero-media .blog-image-placeholder{ aspect-ratio: 16 / 9; }
}
/* 52c. Tytuły kroków i osi czasu: semantycznie h3 (bez przeskoku H2→H4),
wizualnie jak h4 z szablonu. Generator: scripts/blog_build.py. */
.blog-content h3.blog-step-title{
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1.5;
margin: 0 0 var(--blog-s1);
}
.blog-cta-note{
max-width: 52ch;
margin: var(--blog-s2) auto 0 !important;
font-size: 0.8rem !important;
color: var(--blog-dim) !important;
}