/* * ═══════════════════════════════════════════════════════════════ * KMST — Style strony pojazdu (CPT: pojazd) i archiwum * Plik: kadence-child/kmst-pojazdy.css * Wersja: 3.3 — Claude Design "Industrial Heritage Editorial" * dostosowane do REALNEJ struktury HTML/ACF. * * Estetyka: ciepłe paper tło, dramatyczna typografia, klimat * starych plakatów MPK; zielony brand + czerwony akcent. * * Tryby: Jasny (domyślny) + Ciemny — przełączane przez * atrybut data-theme na . * Przełącznik w js/theme-switcher.js. * * Fonty: DIN 2014 (płatny — wymaga licencji ParaType), * z darmowym fallbackiem Barlow (Google Fonts). * Mono: JetBrains Mono / DM Mono (darmowe). * * Per-pojazd kolor wiodący: * PHP w single-pojazd.php czyta pole ACF * "kolor_wiodacy_pojazdu" i wstrzykuje inline style * nadpisujące zmienne --brand i pochodne na * kontenerze .kmst-pojazd. * * KOMPATYBILNOŚĆ Z SHORTCODE'AMI: * Plik zachowuje WSZYSTKIE klasy z poprzedniej wersji * kmst-pojazdy.css (.kmst-galeria, .kmst-dane-tabela, * .kmst-dokumentacja, .kmst-timeline, .kmst-tl-card etc.) * — shortcode'y [kmst_galeria_pojazdu] itd. działają * bez modyfikacji. * ═══════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════ 1. DESIGN TOKENS — paleta, typografia, siatka ════════════════════════════════════════════════════════════════ */ /* ── Tokeny GLOBALNE (jasny tryb domyślny) ── */ .kmst-pojazd, .kmst-archiwum, body.single-pojazd, body.post-type-archive-pojazd, body.tax-typ-pojazdu, body.tax-producent, body.tax-wlasnosc { /* — Paleta MPK-zielony (rdzeń marki) — */ --kmst-green-900: #1f4d1f; --kmst-green-800: #245c25; --kmst-green-700: #2a8045; /* główny brand (zgodne z Twoim) */ --kmst-green-600: #3d9c5a; --kmst-green-500: #6bb88c; --kmst-green-100: #e6f0e8; --kmst-green-50: #f3f7f4; /* — Akcenty (z plakatów MPK i kart taboru) — */ --kmst-red: #e63031; --kmst-red-dark: #c01f20; --kmst-orange: #e8722e; --kmst-yellow: #f2c13c; --kmst-blue: #4d87c4; --kmst-gold: #d4a030; /* — Neutralne (warm gray) — */ --ink: #1a1a1a; --ink-2: #3a3a3a; --ink-3: #6b6b6b; --ink-4: #9a9a9a; --line: #e5e2dd; --line-2: #cfcbc4; --paper: #faf8f3; --paper-2: #f2ede3; --white: #ffffff; /* — Semantyczne (jasny tryb) — */ --bg: var(--paper); --bg-alt: var(--white); --bg-dark: #1a2a1a; --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: var(--ink-3); --accent: var(--kmst-red); /* — Per-pojazd kolor wiodący (NADPISYWANE przez PHP) — Domyślne wartości = zielony KMST. PHP wstrzykuje inline style na .kmst-pojazd / .kmst-kafelek zmieniając te zmienne dla każdego pojazdu indywidualnie. Zachowane nazwy zgodne z istniejącym single-pojazd.php — */ --brand: #2a8045; --brand-lt: #3d9c5a; --brand-dim: rgba(42, 128, 69, 0.13); --brand-hover: rgba(42, 128, 69, 0.06); --brand-subtle: rgba(42, 128, 69, 0.15); --brand-glow: rgba(42, 128, 69, 0.25); --border: rgba(42, 128, 69, 0.20); --border-dim: rgba(42, 128, 69, 0.10); --border-strong: rgba(42, 128, 69, 0.35); --rail: rgba(42, 128, 69, 0.28); /* — Typografia — DIN 2014 jest płatny. Jeśli pliki .otf nie zostaną wgrane do /fonts/, automatycznie zadziała Barlow z Google Fonts. — */ --f-display: 'DIN 2014', 'Barlow', 'Helvetica Neue', system-ui, sans-serif; --f-cond: 'DIN 2014', 'Barlow Condensed', 'Arial Narrow', sans-serif; --f-sans: 'DIN 2014', 'Barlow', 'Helvetica Neue', system-ui, -apple-system, sans-serif; --f-mono: 'JetBrains Mono', 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* — Siatka i spacing — */ --container: 1200px; --gutter: 40px; /* — Promienie — */ --r-xs: 3px; --r-sm: 6px; --r-md: 14px; --r-lg: 24px; --r-pill: 999px; /* — Cienie — */ --shadow-sm: 0 1px 2px rgba(20, 40, 20, 0.06), 0 1px 1px rgba(20, 40, 20, 0.04); --shadow-md: 0 6px 20px rgba(20, 40, 20, 0.08), 0 2px 6px rgba(20, 40, 20, 0.06); --shadow-lg: 0 18px 50px rgba(20, 40, 20, 0.14), 0 6px 14px rgba(20, 40, 20, 0.08); /* — Animacje — */ --t-fast: 0.15s ease; --t-base: 0.25s ease; --t-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* ── Tryb CIEMNY — przełączany atrybutem data-theme="dark" ── */ [data-theme="dark"] .kmst-pojazd, [data-theme="dark"] .kmst-archiwum, [data-theme="dark"] body.single-pojazd, [data-theme="dark"] body.post-type-archive-pojazd, [data-theme="dark"] body.tax-typ-pojazdu, [data-theme="dark"] body.tax-producent, [data-theme="dark"] body.tax-wlasnosc { --bg: #121812; --bg-alt: #1a2418; --bg-dark: #0a100a; --paper: #121812; --paper-2: #1a2418; --fg: #f0ede5; --fg-2: #d8d4c8; --fg-muted: #a5a89f; --line: #2a3a28; --line-2: #3b4f38; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.6), 0 6px 14px rgba(0, 0, 0, 0.4); } /* ════════════════════════════════════════════════════════════════ 2. STYLE BAZOWE — w obrębie strony pojazdu i archiwum ════════════════════════════════════════════════════════════════ */ body.single-pojazd, body.post-type-archive-pojazd, body.tax-typ-pojazdu, body.tax-producent, body.tax-wlasnosc { background-color: var(--bg); color: var(--fg); font-family: var(--f-sans); transition: background-color var(--t-base), color var(--t-base); } body.single-pojazd .entry-title, body.single-pojazd .wp-block-post-title, body.post-type-archive-pojazd .entry-title { display: none; } .kmst-pojazd ::selection, .kmst-archiwum ::selection { background: var(--brand); color: white; } .kmst-pojazd { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) 80px; color: var(--fg); font-family: var(--f-sans); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (max-width: 768px) { .kmst-pojazd { padding: 0 20px 60px; } } /* ════════════════════════════════════════════════════════════════ 3. BREADCRUMB ════════════════════════════════════════════════════════════════ */ .kmst-breadcrumb { display: flex; align-items: center; gap: 8px; padding: 24px 0 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-muted); flex-wrap: wrap; } .kmst-breadcrumb a { color: var(--fg-muted); text-decoration: none; border-bottom: 1px dashed transparent; transition: color var(--t-fast), border-color var(--t-fast); } .kmst-breadcrumb a:hover { color: var(--brand); border-bottom-color: var(--brand); } /* Sąsiadujący separator "/" — szary, słabo widoczny */ .kmst-breadcrumb > span:not(:last-child) { opacity: 0.4; } .kmst-breadcrumb > span:last-child { color: var(--fg); font-weight: 500; opacity: 1; } /* ════════════════════════════════════════════════════════════════ 4. HERO — siatka 2-kolumnowa, foto LEWO / info PRAWO (zgodne z istniejącą strukturą single-pojazd.php) ════════════════════════════════════════════════════════════════ */ .kmst-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: stretch; padding: 32px 0 40px; } @media (max-width: 960px) { .kmst-hero { grid-template-columns: 1fr; gap: 36px; padding: 24px 0 32px; } } /* ─── 4a. LEWA KOLUMNA: Zdjęcie wyróżniające ─── */ .kmst-hero__foto { position: sticky; top: 88px; align-self: start; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); background: var(--paper-2); } @media (max-width: 960px) { .kmst-hero__foto { position: static; } } .kmst-hero__foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--t-slow), filter var(--t-base); } .kmst-hero__foto:hover img { transform: scale(1.02); filter: brightness(1.04); } /* ─── Przycisk "Galeria poniżej" — realny link (wcześniej dekoracyjny ::after który nie dawał się kliknąć) Widoczny zawsze, z delikatnym pulsowaniem uwagi; skacze do sekcji #kmst-sec-galeria pod stroną. */ .kmst-hero__do-galerii { position: absolute; bottom: 12px; right: 12px; display: inline-flex; align-items: center; padding: 9px 16px; background: rgba(0, 0, 0, 0.78); color: #fff; font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; border-radius: var(--r-pill); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); z-index: 2; } .kmst-hero__do-galerii:hover, .kmst-hero__do-galerii:focus-visible { background: var(--brand); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30); text-decoration: none; outline: none; } .kmst-hero__do-galerii:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Scroll-margin dla kotwicy — odsłania nagłówek sekcji spod sticky headera Kadence (ok. 80px). Dostosuj wartość jeśli Twój header ma inną wysokość. */ #kmst-sec-galeria, #kmst-sec-galeria-section { scroll-margin-top: 96px; } /* ─── 4b. PRAWA KOLUMNA: Info — eyebrow, tytuł, badges, tagi, fakty ─── */ .kmst-hero__info { display: flex; flex-direction: column; gap: 0; min-height: 100%; } /* Fakty wypychane na dół kolumny — tabelka zawsze wyrównuje się z dolną krawędzią zdjęcia, eliminuje pustkę pod nią. */ .kmst-hero__info .kmst-fakty { margin-top: auto; } /* Eyebrow: producent · rok */ .kmst-eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--brand); margin: 0 0 14px; display: flex; align-items: center; gap: 12px; font-weight: 700; } .kmst-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--brand); flex-shrink: 0; } /* Tytuł H1 — gigantyczny */ .kmst-title { font-family: var(--f-display); font-size: clamp(48px, 6.5vw, 96px); font-weight: 800; line-height: 0.92; letter-spacing: -0.035em; text-transform: uppercase; color: var(--fg); margin: 0 0 12px; text-wrap: balance; } /* Numer boczny — italic, akcent czerwony */ .kmst-numer { font-family: var(--f-display); font-size: clamp(18px, 1.8vw, 24px); font-style: italic; font-weight: 300; color: var(--fg-muted); margin: 0 0 22px; } .kmst-numer strong { font-weight: 700; font-style: normal; color: var(--brand); letter-spacing: -0.01em; margin-left: 6px; } /* ─── STATUS BADGE ─── */ .kmst-status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; font-family: var(--f-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--r-pill); margin: 0 6px 18px 0; border: 1px solid transparent; } .kmst-status__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .kmst-status--sprawny { background: #e8f4e8; color: #2d6b2d; border-color: rgba(58, 123, 58, 0.2); } .kmst-status--remont { background: #fff4e0; color: #a85d00; border-color: rgba(232, 114, 46, 0.25); } .kmst-status--eksponat { background: #f0e8f4; color: #4a2d6b; border-color: rgba(140, 100, 175, 0.25); } .kmst-status--magazyn { background: #e0eaf4; color: #2d4a6b; border-color: rgba(77, 135, 196, 0.25); } .kmst-status--wynajem { background: #fef0d8; color: #8a5a14; border-color: rgba(212, 168, 108, 0.3); } /* NOWE: badge wyrozniony — złoty z gradientem */ .kmst-status--wyrozniony { background: linear-gradient(135deg, #fde9b8, #f5d27a); color: #6b4a00; border-color: #d4a030; } [data-theme="dark"] .kmst-status--sprawny { background: rgba(58, 123, 58, 0.18); color: #7cc07c; } [data-theme="dark"] .kmst-status--remont { background: rgba(232, 114, 46, 0.18); color: #f5a060; } [data-theme="dark"] .kmst-status--eksponat { background: rgba(140, 100, 175, 0.18); color: #c8a8e0; } [data-theme="dark"] .kmst-status--magazyn { background: rgba(77, 135, 196, 0.18); color: #8ab8e0; } [data-theme="dark"] .kmst-status--wynajem { background: rgba(212, 168, 108, 0.18); color: #e8c08a; } [data-theme="dark"] .kmst-status--wyrozniony { background: linear-gradient(135deg, rgba(212,160,48,0.25), rgba(245,210,122,0.18)); color: #f5d27a; } /* ─── TAGI TAKSONOMII ─── */ .kmst-tagi { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 22px; } .kmst-tag { font-family: var(--f-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid transparent; transition: border-color var(--t-fast), background var(--t-fast); } .kmst-tag--typ { background: var(--brand-dim); color: var(--brand); border-color: var(--border); } .kmst-tag--prod { background: rgba(232, 114, 46, 0.10); color: #b5501c; border-color: rgba(232, 114, 46, 0.20); } .kmst-tag--wlasnosc { background: transparent; color: var(--fg-muted); border-color: var(--line-2); } /* ─── Warianty statusu jako tagi ────────────── Wyglądają jak pigułki "Tramwaj pasażerski"/"Producent" ale z kolorem zależnym od statusu. Zastępują duże badges .kmst-status--* w hero pod tagami typu/producenta. ────────────────────────────────────────────── */ .kmst-tag--status-sprawny { background: rgba(58, 123, 58, 0.10); color: #2d6b2d; border-color: rgba(58, 123, 58, 0.25); } .kmst-tag--status-remont { background: rgba(232, 114, 46, 0.10); color: #a85d00; border-color: rgba(232, 114, 46, 0.25); } .kmst-tag--status-eksponat { background: rgba(140, 100, 175, 0.10); color: #4a2d6b; border-color: rgba(140, 100, 175, 0.25); } .kmst-tag--status-magazyn { background: rgba(77, 135, 196, 0.10); color: #2d4a6b; border-color: rgba(77, 135, 196, 0.25); } .kmst-tag--wyrozniony { background: linear-gradient(135deg, rgba(253, 233, 184, 0.6), rgba(245, 210, 122, 0.4)); color: #6b4a00; border-color: #d4a030; } .kmst-tag--wynajem { background: rgba(212, 168, 108, 0.12); color: #8a5a14; border-color: rgba(212, 168, 108, 0.35); } [data-theme="dark"] .kmst-tag--status-sprawny { background: rgba(58, 123, 58, 0.18); color: #7cc07c; } [data-theme="dark"] .kmst-tag--status-remont { background: rgba(232, 114, 46, 0.18); color: #f5a060; } [data-theme="dark"] .kmst-tag--status-eksponat { background: rgba(140, 100, 175, 0.18); color: #c8a8e0; } [data-theme="dark"] .kmst-tag--status-magazyn { background: rgba(77, 135, 196, 0.18); color: #8ab8e0; } [data-theme="dark"] .kmst-tag--wyrozniony { background: linear-gradient(135deg, rgba(212,160,48,0.22), rgba(245,210,122,0.15)); color: #f5d27a; } [data-theme="dark"] .kmst-tag--wynajem { background: rgba(212, 168, 108, 0.18); color: #e8c08a; } .kmst-tag:hover { border-color: var(--brand); } [data-theme="dark"] .kmst-tag--typ { color: var(--brand-lt); } [data-theme="dark"] .kmst-tag--prod { background: rgba(232, 114, 46, 0.18); color: #f29560; } /* ─── KRÓTKI OPIS ─── */ .kmst-opis-krotki { font-family: var(--f-sans); font-size: clamp(16px, 1.4vw, 18px); font-weight: 400; line-height: 1.55; color: var(--fg-2); margin: 0 0 26px; max-width: 52ch; text-wrap: pretty; padding-left: 16px; border-left: 3px solid var(--border-strong); } /* ─── QUICK FACTS ─── */ .kmst-fakty { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 26px; } .kmst-fakt { background: var(--bg-alt); padding: 16px 18px; border-top: 3px solid var(--brand-dim); transition: background var(--t-fast), border-color var(--t-fast); } .kmst-fakt:hover { background: var(--brand-hover); border-top-color: var(--brand); } .kmst-fakt__lbl { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 6px; font-weight: 600; } .kmst-fakt__val { font-family: var(--f-display); font-size: 26px; font-weight: 700; color: var(--fg); line-height: 1; letter-spacing: -0.015em; } .kmst-fakt__val small { font-size: 14px; font-weight: 400; color: var(--fg-muted); letter-spacing: 0; margin-left: 4px; } .kmst-fakt__val--mono { font-family: var(--f-mono); font-size: 18px; color: var(--brand); font-weight: 600; } /* ─── PRZYCISKI AKCJI ─── */ .kmst-akcje { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .kmst-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-sans); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; padding: 12px 22px; text-decoration: none; border-radius: var(--r-pill); border: 1.5px solid transparent; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); box-shadow: var(--shadow-sm); } .kmst-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .kmst-btn--primary { background: var(--brand); color: white; border-color: var(--brand); } .kmst-btn--primary:hover { background: var(--brand-lt); border-color: var(--brand-lt); color: white; } .kmst-btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-2); box-shadow: none; } .kmst-btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-dim); } .kmst-btn--pdf { background: transparent; color: var(--fg-2); border-color: var(--line-2); font-size: 13px; box-shadow: none; } .kmst-btn--pdf:hover { border-color: var(--accent); color: var(--accent); background: rgba(230, 48, 49, 0.06); } /* ════════════════════════════════════════════════════════════════ 5. SEKCJE — wrapper i nagłówki ════════════════════════════════════════════════════════════════ */ .kmst-sekcja { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); } .kmst-sekcja:first-of-type { margin-top: 56px; } /* Eyebrow sekcji (opcjonalny) */ .kmst-sekcja__eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--brand); display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-weight: 700; } .kmst-sekcja__eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--brand); flex-shrink: 0; } .kmst-sekcja__tytul { font-family: var(--f-display); font-size: clamp(32px, 4vw, 56px); font-weight: 700; text-transform: uppercase; line-height: 0.95; color: var(--fg); margin: 0 0 32px; letter-spacing: -0.025em; text-wrap: balance; } /* ════════════════════════════════════════════════════════════════ 6. GALERIA ZDJĘĆ — wykorzystywana przez [kmst_galeria_pojazdu] ════════════════════════════════════════════════════════════════ */ .kmst-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .kmst-galeria__figura { margin: 0; background: var(--bg-alt); overflow: hidden; display: flex; flex-direction: column; } /* Pierwsze zdjęcie — większe (2x2) */ .kmst-galeria__figura:first-child { grid-column: span 2; grid-row: span 2; } .kmst-galeria__link { display: block; overflow: hidden; aspect-ratio: 4 / 3; position: relative; cursor: zoom-in; flex: 1; } /* Pierwsze zdjęcie wypełnia całość (bez sztywnego aspect-ratio) */ .kmst-galeria__figura:first-child .kmst-galeria__link { aspect-ratio: auto; height: 100%; min-height: 280px; } .kmst-galeria__link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow), opacity var(--t-base); } .kmst-galeria__link:hover img { transform: scale(1.05); opacity: 0.9; } /* Overlay z ikoną lupy */ .kmst-galeria__link::after { content: '⊕'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 32px; color: white; background: rgba(0, 0, 0, 0); transition: background var(--t-base); pointer-events: none; } .kmst-galeria__link:hover::after { background: rgba(0, 0, 0, 0.35); } /* Podpis pod miniaturą */ .kmst-galeria__podpis { padding: 8px 12px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.5px; line-height: 1.4; color: var(--fg-muted); border-top: 1px solid var(--line); background: var(--bg-alt); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 768px) { .kmst-galeria { grid-template-columns: repeat(2, 1fr); } .kmst-galeria__figura:first-child { grid-column: span 2; grid-row: span 1; } .kmst-galeria__figura:first-child .kmst-galeria__link { min-height: 200px; } } /* ────── Zdjęcie archiwalne (figure w sekcji historia) ────── */ .kmst-archiwalne { margin: 36px 0 0; background: var(--paper-2); border-radius: var(--r-md); overflow: hidden; max-width: 900px; } .kmst-archiwalne img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: sepia(0.25) contrast(1.05); transition: filter var(--t-base); } .kmst-archiwalne:hover img { filter: sepia(0) contrast(1); } .kmst-archiwalne figcaption { padding: 16px 22px; border-top: 4px solid var(--brand); font-family: var(--f-display); font-size: 15px; color: var(--fg-2); letter-spacing: 0.01em; font-style: italic; } /* Uwaga: pseudo-element ::before z napisem "Archiwum" został usunięty — etykieta "ARCHIWUM" jest już w .kmst-sidebar__naglowek nad figurą i duplikowanie wyglądało jak błąd. */ /* ════════════════════════════════════════════════════════════════ 7. HISTORIA POJAZDU — WYSIWYG ════════════════════════════════════════════════════════════════ */ /* ─── Nagłówek sekcji z ikoną pojazdu po prawej ─── Tytuł "Historia pojazdu" po lewej, ikona dosunięta do prawej krawędzi. Wysokość ikony = wysokość tekstu H2 (taki sam clamp). Przy małej szerokości (lub bardzo długiej ikonie SVG) — zmniejsza się dzięki max-width + object-fit. */ .kmst-historia__header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; } .kmst-historia__header .kmst-sekcja__tytul { margin-bottom: 0; flex: 1 1 auto; min-width: 0; } .kmst-historia__ikona { display: block; height: clamp(37px, 4.6vw, 64px); width: auto; max-width: min(35%, 260px); object-fit: contain; object-position: right center; flex-shrink: 1; opacity: 0.9; transition: opacity var(--t-fast); } .kmst-historia__ikona:hover { opacity: 1; } @media (max-width: 640px) { .kmst-historia__ikona { max-width: min(30%, 120px); } } .kmst-historia__tresc { font-family: var(--f-sans); max-width: 72ch; color: var(--fg-2); } /* Lead — pierwszy paragraf jako wyróżniony intro */ .kmst-historia__tresc > p:first-of-type { font-family: var(--f-sans); font-size: clamp(18px, 1.5vw, 21px); font-weight: 400; line-height: 1.5; color: var(--fg); margin: 0 0 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line); text-wrap: pretty; } .kmst-historia__tresc p { font-size: 17px; line-height: 1.7; color: var(--fg-2); margin: 0 0 20px; text-wrap: pretty; } .kmst-historia__tresc h2, .kmst-historia__tresc h3, .kmst-historia__tresc h4 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; color: var(--fg); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; margin: 36px 0 14px; } .kmst-historia__tresc h2 { font-size: 32px; } .kmst-historia__tresc h3 { font-size: 24px; color: var(--brand); } .kmst-historia__tresc h4 { font-size: 18px; color: var(--brand); } .kmst-historia__tresc strong { color: var(--fg); font-weight: 700; } .kmst-historia__tresc em { color: var(--brand); font-style: italic; } .kmst-historia__tresc a { color: var(--brand); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: text-decoration-color var(--t-fast); } .kmst-historia__tresc a:hover { text-decoration-color: var(--brand); } .kmst-historia__tresc ul, .kmst-historia__tresc ol { margin: 0 0 22px 22px; padding-left: 8px; } .kmst-historia__tresc li { margin-bottom: 8px; } .kmst-historia__tresc blockquote { margin: 32px 0; padding: 22px 28px; border-left: 4px solid var(--accent); background: var(--bg-alt); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-family: var(--f-display); font-size: 20px; line-height: 1.45; color: var(--fg); font-style: italic; font-weight: 400; } .kmst-historia__tresc blockquote cite { display: block; margin-top: 10px; font-family: var(--f-sans); font-size: 13px; color: var(--fg-muted); font-style: normal; font-weight: 600; letter-spacing: 0.02em; } .kmst-historia__tresc blockquote cite::before { content: '— '; } .kmst-historia__tresc img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: 16px 0; } /* ─── Układ 2-kolumnowy: historia 2/3 + sidebar 1/3 ─── Wzmocniona specyficzność (.kmst-pojazd przed klasą) + !important na display/grid-template-columns — żeby Kadence ani żaden plugin optymalizacyjny nie nadpisał układu. */ .kmst-pojazd .kmst-historia__uklad { display: grid !important; grid-template-columns: 2fr 1fr !important; gap: 48px; align-items: start; width: 100%; max-width: 100%; } /* Gdy nie ma sidebarowych danych — pełna szerokość */ .kmst-pojazd .kmst-historia__uklad--pelna { grid-template-columns: 1fr !important; max-width: 72ch; } @media (max-width: 960px) { .kmst-pojazd .kmst-historia__uklad { grid-template-columns: 1fr !important; gap: 36px; } /* Na mobile sidebar idzie PO tekście */ .kmst-pojazd .kmst-historia__sidebar { order: 2; } .kmst-pojazd .kmst-historia__tresc { order: 1; } } /* ─── Sidebar — pionowy stos bloków ─── */ .kmst-pojazd .kmst-historia__sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 88px; min-width: 0; /* pozwala flex-item się skurczyć w gridzie */ } @media (max-width: 960px) { .kmst-pojazd .kmst-historia__sidebar { position: static; } } .kmst-pojazd .kmst-sidebar__blok { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); } /* Wzmocniona specyficzność nagłówków sidebarowych — Kadence ma style dla .entry-content p które nadpisywały wygląd nagłówka. Dodajemy .kmst-pojazd .kmst-sidebar__blok + !important na kluczowych właściwościach. */ .kmst-pojazd .kmst-sidebar__blok .kmst-sidebar__naglowek, .kmst-pojazd p.kmst-sidebar__naglowek { font-family: var(--f-mono) !important; font-size: 11px !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: var(--brand) !important; font-weight: 700 !important; padding: 12px 18px !important; border-bottom: 1px solid var(--line); background: var(--paper-2); margin: 0 !important; line-height: 1.3 !important; } /* Tabela danych i lista dokumentów w sidebarze — usuwamy zewnętrzny border-radius (blok już go ma) */ .kmst-sidebar__blok .kmst-dane-tabela, .kmst-sidebar__blok .kmst-dokumentacja { border: none; border-radius: 0; max-width: 100%; } .kmst-sidebar__blok .kmst-dane-tabela caption { display: none; /* nagłówek zastępuje .kmst-sidebar__naglowek */ } /* Dokumentacja w sidebarze: 1 kolumna zamiast siatki */ .kmst-sidebar__blok .kmst-dokumentacja { grid-template-columns: 1fr; gap: 0; } .kmst-sidebar__blok .kmst-dokumentacja__link { border-radius: 0; border: none; border-bottom: 1px solid var(--line); grid-template-columns: 36px 1fr auto; padding: 12px 16px; } .kmst-sidebar__blok .kmst-dokumentacja li:last-child .kmst-dokumentacja__link, .kmst-sidebar__blok .kmst-dokumentacja__link:last-child { border-bottom: none; } /* Zdjęcie archiwalne w sidebarze — bez sztywnego aspect-ratio 16/9 */ .kmst-archiwalne--sidebar { margin: 0 !important; /* nadpisuje margin 36px z sekcji 6 */ border-radius: 0; max-width: 100%; } .kmst-archiwalne--sidebar img { aspect-ratio: 4 / 3; /* kwadratowsze — pasuje do wąskiej kolumny */ filter: sepia(0.30) contrast(1.05); } .kmst-archiwalne--sidebar figcaption { font-size: 13px; padding: 12px 16px; } /* ════════════════════════════════════════════════════════════════ 8. TABELA DANYCH TECHNICZNYCH — [kmst_dane_techniczne] ════════════════════════════════════════════════════════════════ */ .kmst-dane-tabela { width: 100%; max-width: 720px; border-collapse: separate; border-spacing: 0; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; font-family: var(--f-sans); } .kmst-dane-tabela caption { font-family: var(--f-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--brand); text-align: left; padding: 14px 20px; background: var(--paper-2); border-bottom: 1px solid var(--line); font-weight: 700; } .kmst-dane-tabela th, .kmst-dane-tabela td { padding: 13px 20px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.45; text-align: left; vertical-align: top; } .kmst-dane-tabela tr:last-child th, .kmst-dane-tabela tr:last-child td { border-bottom: none; } .kmst-dane-tabela th { width: 48%; font-weight: 500; color: var(--fg-muted); font-size: 13px; text-transform: none; letter-spacing: 0; } .kmst-dane-tabela td { font-weight: 600; color: var(--fg); font-family: var(--f-mono); font-size: 13px; text-align: right; } .kmst-dane-tabela tr { transition: background var(--t-fast); } .kmst-dane-tabela tbody tr:hover th, .kmst-dane-tabela tbody tr:hover td { background: var(--brand-hover); } .kmst-dane-tabela td.brand, .kmst-dane-tabela td .brand { color: var(--brand); font-weight: 700; } /* ════════════════════════════════════════════════════════════════ 9. DOKUMENTACJA — [kmst_dokumentacja] ════════════════════════════════════════════════════════════════ */ .kmst-dokumentacja { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; max-width: 900px; } .kmst-dokumentacja__link { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 14px 18px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--fg); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .kmst-dokumentacja__link:hover { border-color: var(--brand); background: var(--brand-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); } .kmst-dokumentacja__ikona { width: 44px; height: 44px; background: var(--brand-subtle); color: var(--brand); border: 1px solid var(--brand-dim); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; flex-shrink: 0; transition: background var(--t-fast), border-color var(--t-fast); } .kmst-dokumentacja__link:hover .kmst-dokumentacja__ikona { background: var(--brand-dim); border-color: var(--brand); } .kmst-dokumentacja__nazwa { font-family: var(--f-sans); font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--fg); transition: color var(--t-fast); display: block; margin-bottom: 3px; } .kmst-dokumentacja__link:hover .kmst-dokumentacja__nazwa { color: var(--brand); } .kmst-dokumentacja__meta { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.5px; color: var(--fg-muted); text-transform: uppercase; } .kmst-dokumentacja__ext { background: var(--brand-dim); color: var(--brand); padding: 2px 7px; border-radius: var(--r-xs); font-weight: 700; letter-spacing: 1px; font-size: 9px; } .kmst-dokumentacja__rozmiar { opacity: 0.7; } .kmst-dokumentacja__strzalka { font-family: var(--f-mono); font-size: 18px; color: var(--brand); opacity: 0; transform: translateX(-4px); transition: opacity var(--t-fast), transform var(--t-fast); } .kmst-dokumentacja__link:hover .kmst-dokumentacja__strzalka { opacity: 1; transform: translateX(0); } @media (max-width: 480px) { .kmst-dokumentacja { grid-template-columns: 1fr; } .kmst-dokumentacja__link { grid-template-columns: 36px 1fr; padding: 12px 14px; } .kmst-dokumentacja__strzalka { display: none; } .kmst-dokumentacja__meta { grid-column: 2; padding-top: 4px; } } /* ════════════════════════════════════════════════════════════════ 10. LINKI ZEWNĘTRZNE ════════════════════════════════════════════════════════════════ */ .kmst-linki { list-style: none; padding: 0; margin: 0; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; max-width: 720px; } .kmst-linki li { border-bottom: 1px solid var(--line); } .kmst-linki li:last-child { border-bottom: none; } .kmst-linki a { display: flex; align-items: center; gap: 14px; padding: 14px 20px; font-family: var(--f-sans); font-size: 14px; color: var(--fg); text-decoration: none; transition: background var(--t-fast), color var(--t-fast); position: relative; } .kmst-linki a::after { content: '→'; margin-left: auto; color: var(--brand); opacity: 0; transform: translateX(-6px); transition: opacity var(--t-fast), transform var(--t-fast); } .kmst-linki a:hover { background: var(--brand-hover); color: var(--brand); } .kmst-linki a:hover::after { opacity: 1; transform: translateX(0); } .kmst-linki__pdf { color: var(--accent) !important; font-weight: 600; } /* ════════════════════════════════════════════════════════════════ 11. OŚ CZASU — TIMELINE — [kmst_timeline] ════════════════════════════════════════════════════════════════ */ .kmst-timeline { position: relative; max-width: 920px; margin-top: 8px; padding-left: 56px; } /* Pionowa linia */ .kmst-timeline::before { content: ''; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 2px; background: var(--line-2); } .kmst-tl-item { position: relative; padding-bottom: 36px; } .kmst-tl-item:last-child { padding-bottom: 0; } /* Kółko na osi */ .kmst-tl-dot { position: absolute; left: -56px; top: 4px; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-alt); border: 2px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--fg-muted); font-family: var(--f-mono); font-size: 16px; font-weight: 700; z-index: 2; transition: transform var(--t-fast); box-shadow: var(--shadow-sm); } .kmst-tl-item:hover .kmst-tl-dot { transform: scale(1.1); } /* Warianty kolorystyczne kółek */ .kmst-tl-dot--kapitalny { background: var(--accent); border-color: var(--accent); color: white; } .kmst-tl-dot--biezacy { background: var(--kmst-orange); border-color: var(--kmst-orange); color: white; } .kmst-tl-dot--konserwacja { background: var(--brand); border-color: var(--brand); color: white; } .kmst-tl-dot--nabycie { background: var(--kmst-green-800); border-color: var(--kmst-green-800); color: white; } .kmst-tl-dot--wypadek { background: #c05040; border-color: #c05040; color: white; } .kmst-tl-dot--modernizacja { background: var(--kmst-blue); border-color: var(--kmst-blue); color: white; } .kmst-tl-dot--custom { background: var(--brand); border-color: var(--brand); color: white; } /* ─── Karta zdarzenia ─── */ .kmst-tl-card { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 24px; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); /* Grid: [rok + tytuł] po lewej, pigułka po prawej. Dzięki temu pigułka jest ZAWSZE dosunięta do prawej krawędzi karty — poza blokiem tekstu. */ display: grid; grid-template-columns: 1fr auto; column-gap: 18px; } .kmst-tl-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); } /* Header z rokiem i tytułem — zajmuje pierwszą kolumnę gridu. Rok po lewej, tytuł obok na tej samej wysokości (baseline). */ .kmst-tl-header { display: flex; align-items: baseline; gap: 20px; margin-bottom: 12px; flex-wrap: wrap; grid-column: 1; min-width: 0; } .kmst-tl-rok { font-family: var(--f-display); font-weight: 700; font-size: 32px; color: var(--fg); line-height: 1; flex-shrink: 0; letter-spacing: -0.025em; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } /* Wariant: rok ukryty (pole ACF ukryj_date = true). Pokazujemy tylko wypunktowanie "·" jako znacznik pozycji na osi czasu — żeby nie psuć wyrównania wizualnego. */ .kmst-tl-rok--ukryty { font-size: 20px; color: var(--fg-muted); opacity: 0.5; } .kmst-tl-rok__liczba { color: var(--fg); } .kmst-tl-rok__data { font-family: var(--f-display); font-size: 14px; font-weight: 700; letter-spacing: -0.015em; color: var(--fg-muted); text-align: right; } /* Tytuł idzie razem z rokiem w headerze — na tej samej linii. Baseline align sprawia, że litery tytułu i cyfry roku siedzą na tej samej linii pisma. */ .kmst-tl-header .kmst-tl-tytul { flex: 1 1 auto; min-width: 0; margin: 0; align-self: baseline; } /* Opis, foto i galeria — rozciągają się pod rokiem i badgem na całą szerokość karty. */ .kmst-tl-card > .kmst-tl-opis, .kmst-tl-card > .kmst-tl-foto, .kmst-tl-card > .kmst-tl-galeria { grid-column: 1 / -1; } /* Karta bez daty (ukryj_date = true) — tytuł startuje od lewej, bez pustego miejsca po roku. */ .kmst-tl-card--bez-daty .kmst-tl-header { gap: 0; } /* ─── Badge typu zdarzenia ─── */ .kmst-tl-badge { display: inline-block; font-family: var(--f-sans); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill); /* Pigułka w drugiej kolumnie gridu karty — dosunięta do prawej krawędzi, poza obszar tekstu tytułu i opisu. */ grid-column: 2; grid-row: 1; align-self: start; justify-self: end; white-space: nowrap; } .kmst-tl-badge--kapitalny { background: #fde8e8; color: #a01e1f; } .kmst-tl-badge--biezacy { background: #fdf0e0; color: #8a4a14; } .kmst-tl-badge--konserwacja { background: var(--kmst-green-100); color: var(--kmst-green-900); } .kmst-tl-badge--nabycie { background: #e0e4e0; color: #2a3a2a; } .kmst-tl-badge--wypadek { background: #fde8e0; color: #8a3020; } .kmst-tl-badge--modernizacja { background: #e0eaf4; color: #2d4a6b; } .kmst-tl-badge--custom { background: var(--brand-dim); color: var(--brand); } [data-theme="dark"] .kmst-tl-badge--kapitalny { background: rgba(230, 48, 49, 0.18); color: #f08070; } [data-theme="dark"] .kmst-tl-badge--biezacy { background: rgba(232, 114, 46, 0.18); color: #f5a060; } [data-theme="dark"] .kmst-tl-badge--konserwacja { background: rgba(58, 123, 58, 0.18); color: #7cc07c; } [data-theme="dark"] .kmst-tl-badge--nabycie { background: rgba(140, 140, 140, 0.15); color: #c0c8c0; } [data-theme="dark"] .kmst-tl-badge--wypadek { background: rgba(192, 80, 64, 0.18); color: #e08070; } [data-theme="dark"] .kmst-tl-badge--modernizacja { background: rgba(77, 135, 196, 0.18); color: #8ab8e0; } .kmst-tl-tytul { font-family: var(--f-display); font-size: 22px; font-weight: 700; text-transform: uppercase; color: var(--fg); line-height: 1.1; letter-spacing: -0.015em; margin: 0; } .kmst-tl-opis { font-family: var(--f-sans); font-size: 15px; font-weight: 400; color: var(--fg-2); line-height: 1.65; margin: 8px 0 0; max-width: 64ch; text-wrap: pretty; } /* ─── Zdjęcie główne z wydarzenia ─── */ .kmst-tl-foto { margin: 16px 0 0; overflow: hidden; border-radius: var(--r-sm); background: var(--paper-2); border: 1px solid var(--line); } .kmst-tl-foto__link { display: block; overflow: hidden; position: relative; cursor: zoom-in; } .kmst-tl-foto__link img { display: block; width: 100%; max-height: 360px; object-fit: cover; transition: transform var(--t-slow); } .kmst-tl-foto__link:hover img { transform: scale(1.03); } .kmst-tl-foto__link::after { content: '⊕'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 32px; color: white; background: rgba(0, 0, 0, 0); transition: background var(--t-base); pointer-events: none; } .kmst-tl-foto__link:hover::after { background: rgba(0, 0, 0, 0.3); } .kmst-tl-foto__podpis { padding: 10px 14px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.5px; line-height: 1.45; color: var(--fg-muted); border-top: 1px solid var(--line); } /* ─── Mini-galeria w karcie timeline ─── */ .kmst-tl-galeria { margin-top: 14px; } .kmst-tl-galeria .kmst-galeria { grid-template-columns: repeat(5, 1fr); gap: 4px; border-radius: var(--r-sm); } .kmst-tl-galeria .kmst-galeria__figura:first-child { grid-column: span 1; grid-row: span 1; } .kmst-tl-galeria .kmst-galeria__figura:first-child .kmst-galeria__link { aspect-ratio: 4 / 3; height: auto; min-height: unset; } @media (max-width: 768px) { .kmst-tl-galeria .kmst-galeria { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .kmst-tl-galeria .kmst-galeria { grid-template-columns: repeat(2, 1fr); } } /* Responsive timeline */ @media (max-width: 560px) { .kmst-timeline { padding-left: 36px; } .kmst-tl-dot { left: -36px; width: 32px; height: 32px; font-size: 13px; } .kmst-tl-rok { font-size: 26px; } .kmst-tl-card { padding: 16px 18px; } } /* ════════════════════════════════════════════════════════════════ 12. CTA — sekcja wsparcia na końcu strony pojazdu ════════════════════════════════════════════════════════════════ */ .kmst-cta { background: var(--bg-dark); color: white; padding: 64px 48px; margin: 64px 0 0; border-radius: var(--r-md); text-align: center; position: relative; overflow: hidden; } .kmst-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, var(--brand-glow), transparent 60%); opacity: 0.4; } .kmst-cta__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; } .kmst-cta__tytul { font-family: var(--f-display); font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; letter-spacing: -0.025em; margin: 0 0 14px; color: white; text-wrap: balance; text-transform: uppercase; } .kmst-cta__tekst { color: rgba(255, 255, 255, 0.78); font-size: 17px; line-height: 1.55; max-width: 56ch; margin: 0 auto 28px; text-wrap: pretty; } .kmst-cta .kmst-akcje { justify-content: center; } .kmst-cta .kmst-btn--primary { background: white; color: var(--brand); border-color: white; } .kmst-cta .kmst-btn--primary:hover { background: var(--brand-dim); color: white; border-color: white; } .kmst-cta .kmst-btn--ghost { color: white; border-color: rgba(255, 255, 255, 0.4); background: transparent; } .kmst-cta .kmst-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: white; border-color: white; } /* ════════════════════════════════════════════════════════════════ 13. NAWIGACJA POPRZEDNI / NASTĘPNY ════════════════════════════════════════════════════════════════ */ .kmst-nav-pojazdy { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-top: 56px; } @media (max-width: 560px) { .kmst-nav-pojazdy { grid-template-columns: 1fr; } } .kmst-nav-pojazdy > div { background: var(--bg-alt); } .kmst-nav-btn { display: flex; flex-direction: column; gap: 6px; padding: 22px 26px; background: var(--bg-alt); text-decoration: none; transition: background var(--t-fast); position: relative; overflow: hidden; border-top: 3px solid transparent; } .kmst-nav-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base); } .kmst-nav-btn:hover { background: var(--brand-hover); } .kmst-nav-btn:hover::before { transform: scaleX(1); } .kmst-nav-btn--next { text-align: right; } .kmst-nav-btn--next::before { transform-origin: right; } .kmst-nav-btn__dir { font-family: var(--f-mono); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--fg-muted); font-weight: 700; } .kmst-nav-btn__name { font-family: var(--f-display); font-size: 22px; font-weight: 700; text-transform: uppercase; color: var(--fg); line-height: 1.1; letter-spacing: -0.015em; transition: color var(--t-fast); } .kmst-nav-btn:hover .kmst-nav-btn__name { color: var(--brand); } .kmst-nav-btn__sub { font-family: var(--f-sans); font-size: 13px; color: var(--fg-muted); } /* ════════════════════════════════════════════════════════════════ 14. ARCHIWUM /tabor/ — siatka kafelków ════════════════════════════════════════════════════════════════ */ .kmst-archiwum { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) 80px; color: var(--fg); font-family: var(--f-sans); } @media (max-width: 768px) { .kmst-archiwum { padding: 0 20px 60px; } } .kmst-archiwum__header { padding: 48px 0 32px; border-bottom: 1px solid var(--line); margin-bottom: 36px; } .kmst-archiwum__eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; font-weight: 700; } .kmst-archiwum__eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--brand); flex-shrink: 0; } .kmst-archiwum__tytul { font-family: var(--f-display); font-size: clamp(48px, 7vw, 96px); font-weight: 800; text-transform: uppercase; line-height: 0.92; color: var(--fg); margin: 0 0 12px; letter-spacing: -0.035em; text-wrap: balance; } .kmst-archiwum__opis { font-family: var(--f-sans); font-size: 17px; line-height: 1.55; color: var(--fg-2); max-width: 60ch; margin: 0; } /* ─── Filtry ─── */ .kmst-filtry { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 32px; padding: 18px 0; border-bottom: 1px solid var(--line); } .kmst-filtry__label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--fg-muted); margin-right: 8px; flex-shrink: 0; font-weight: 700; } .kmst-filtr-btn { font-family: var(--f-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 7px 14px; background: transparent; color: var(--fg-2); border: 1px solid var(--line-2); border-radius: var(--r-pill); cursor: pointer; transition: all var(--t-fast); text-decoration: none; } .kmst-filtr-btn:hover { border-color: var(--brand); color: var(--brand); } .kmst-filtr-btn.active { background: var(--brand); color: white; border-color: var(--brand); } /* ─── Siatka kafelków ─── */ .kmst-siatka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 1024px) { .kmst-siatka { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .kmst-siatka { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 400px) { .kmst-siatka { grid-template-columns: 1fr; } } .kmst-kafelek { display: flex; flex-direction: column; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: var(--fg); position: relative; transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .kmst-kafelek:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand); } .kmst-kafelek::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base); z-index: 2; } .kmst-kafelek:hover::before { transform: scaleX(1); } .kmst-kafelek__foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); position: relative; } .kmst-kafelek__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .kmst-kafelek:hover .kmst-kafelek__foto img { transform: scale(1.06); } .kmst-kafelek__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; color: var(--line-2); opacity: 0.6; } /* Status dot na kafelku */ .kmst-kafelek__status { position: absolute; top: 12px; right: 12px; width: 12px; height: 12px; border-radius: 50%; z-index: 2; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .kmst-kafelek__status--sprawny { background: #3a7b3a; box-shadow: 0 0 8px rgba(58,123,58,0.5), 0 1px 3px rgba(0,0,0,0.2); } .kmst-kafelek__status--remont { background: var(--kmst-orange); } .kmst-kafelek__status--eksponat { background: #6b3a7b; } .kmst-kafelek__status--magazyn { background: var(--kmst-blue); } /* Wyrozniony badge na kafelku */ .kmst-kafelek__wyrozniony { position: absolute; top: 12px; left: 12px; background: linear-gradient(135deg, #fde9b8, #f5d27a); color: #6b4a00; padding: 4px 10px; border-radius: var(--r-pill); font-family: var(--f-sans); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid #d4a030; z-index: 2; } .kmst-kafelek__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .kmst-kafelek__producent { font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--brand); font-weight: 700; } .kmst-kafelek__nazwa { font-family: var(--f-display); font-size: 22px; font-weight: 700; text-transform: uppercase; line-height: 1.05; color: var(--fg); letter-spacing: -0.015em; transition: color var(--t-fast); margin: 0; } .kmst-kafelek:hover .kmst-kafelek__nazwa { color: var(--brand); } .kmst-kafelek__numer { font-family: var(--f-display); font-size: 14px; font-style: italic; font-weight: 400; color: var(--fg-muted); } .kmst-kafelek__numer strong { color: var(--accent); font-weight: 700; font-style: normal; } .kmst-kafelek__meta, .pojazd-meta { font-family: var(--f-mono); font-size: 11px; color: var(--fg-muted); line-height: 1.55; padding-top: 10px; border-top: 1px solid var(--line); margin-top: auto; letter-spacing: 0.03em; } .kmst-kafelek__meta strong, .pojazd-meta strong { color: var(--fg-2); font-weight: 600; } /* ─── Paginacja ─── */ .kmst-paginacja, body.post-type-archive-pojazd .pagination, body.post-type-archive-pojazd .nav-links { display: flex; justify-content: center; gap: 6px; margin-top: 48px; flex-wrap: wrap; } .kmst-paginacja a, .kmst-paginacja span, body.post-type-archive-pojazd .page-numbers { font-family: var(--f-sans); font-weight: 600; font-size: 13px; padding: 9px 14px; background: var(--bg-alt); color: var(--fg-2); text-decoration: none; border: 1px solid var(--line); border-radius: var(--r-sm); transition: all var(--t-fast); min-width: 38px; text-align: center; } .kmst-paginacja a:hover, body.post-type-archive-pojazd .page-numbers:hover { background: var(--brand); color: white; border-color: var(--brand); } .kmst-paginacja span.current, body.post-type-archive-pojazd .page-numbers.current { background: var(--brand); color: white; border-color: var(--brand); } /* ════════════════════════════════════════════════════════════════ 15. KADENCE POSTS BLOCK — nadpisania (jeśli używane) ════════════════════════════════════════════════════════════════ */ .kb-posts-items .kb-post-item { background: var(--bg-alt) !important; border: 1px solid var(--line) !important; border-radius: var(--r-md) !important; color: var(--fg) !important; overflow: hidden !important; transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base) !important; } .kb-posts-items .kb-post-item:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; border-color: var(--brand) !important; } .kb-posts-items .kb-post-item .kb-posts-item-title a { color: var(--fg) !important; font-family: var(--f-display) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: -0.015em !important; transition: color var(--t-fast) !important; } .kb-posts-items .kb-post-item:hover .kb-posts-item-title a { color: var(--brand) !important; } /* ════════════════════════════════════════════════════════════════ 16. ANIMACJE WEJŚCIA ════════════════════════════════════════════════════════════════ */ @keyframes kmst-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .kmst-pojazd .kmst-eyebrow, .kmst-pojazd .kmst-title, .kmst-pojazd .kmst-numer, .kmst-pojazd .kmst-status, .kmst-pojazd .kmst-tagi, .kmst-pojazd .kmst-opis-krotki, .kmst-pojazd .kmst-fakty, .kmst-pojazd .kmst-akcje, .kmst-pojazd .kmst-hero__foto { animation: kmst-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } .kmst-pojazd .kmst-hero__foto { animation-delay: 0.05s; } .kmst-pojazd .kmst-eyebrow { animation-delay: 0.10s; } .kmst-pojazd .kmst-title { animation-delay: 0.15s; } .kmst-pojazd .kmst-numer { animation-delay: 0.20s; } .kmst-pojazd .kmst-status { animation-delay: 0.25s; } .kmst-pojazd .kmst-tagi { animation-delay: 0.30s; } .kmst-pojazd .kmst-opis-krotki { animation-delay: 0.35s; } .kmst-pojazd .kmst-fakty { animation-delay: 0.40s; } .kmst-pojazd .kmst-akcje { animation-delay: 0.45s; } @media (prefers-reduced-motion: reduce) { .kmst-pojazd *, .kmst-archiwum * { animation: none !important; transition: none !important; } } /* ════════════════════════════════════════════════════════════════ 17. THEME TOGGLE BUTTON — opcjonalny styl ════════════════════════════════════════════════════════════════ */ .kmst-theme-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; border: 1px solid var(--line-2); color: var(--fg); cursor: pointer; font-size: 18px; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .kmst-theme-btn:hover { background: var(--brand-dim); color: var(--brand); border-color: var(--brand); transform: rotate(15deg); } /* ════════════════════════════════════════════════════════════════ 18. RESPONSYWNOŚĆ — dodatkowe ════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .kmst-fakty { grid-template-columns: 1fr; } .kmst-fakt { padding: 14px 16px; } .kmst-fakt__val { font-size: 22px; } .kmst-dane-tabela th { width: 50%; font-size: 12px; } .kmst-dane-tabela td { font-size: 13px; } .kmst-cta { padding: 48px 24px; } .kmst-nav-btn { padding: 18px 20px; } .kmst-nav-btn__name { font-size: 18px; } } /* ════════════════════════════════════════════════════════════════ 19. PRINT — wersja do druku ════════════════════════════════════════════════════════════════ */ @media print { body.single-pojazd { background: white !important; color: black !important; } .kmst-pojazd { --bg: white; --bg-alt: white; --bg-dark: white; --fg: black; --fg-2: #333; --fg-muted: #666; --line: #ddd; --line-2: #ccc; --brand: #1a5c2e; --brand-lt: #2a8045; max-width: 100%; padding: 0; } .kmst-hero__foto::after, .kmst-galeria__link::after, .kmst-tl-foto__link::after, .kmst-akcje, .kmst-nav-pojazdy, .kmst-cta, .kmst-filtry { display: none !important; } .kmst-hero__foto { position: static !important; } .kmst-dane-tabela { border: 1px solid #ccc; } .kmst-dane-tabela th, .kmst-dane-tabela td { border-bottom: 1px solid #eee; color: black; } a { color: black !important; text-decoration: none !important; } } /* ════════════════════════════════════════════════════════════════ 20. SHORTCODE [tabor_lista] — filtry, siatka, kafelek ════════════════════════════════════════════════════════════════ */ /* ─── Wrapper i filtry ─── */ .kmst-tabor-wrapper { margin: 24px auto 48px; max-width: var(--container, 1200px); } .kmst-tabor-filters { background: var(--bg-alt, #fff); border: 1px solid var(--line, #e5e2dd); border-radius: var(--r-md, 14px); padding: 18px 20px; margin-bottom: 28px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(20, 40, 20, .06)); } .kmst-tf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; align-items: end; } .kmst-tf-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .kmst-tf-group label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-muted, #6b6b6b); font-weight: 600; } .kmst-tf-group select, .kmst-tf-group input { width: 100%; padding: 9px 12px; background: var(--bg, #faf8f3); color: var(--fg, #1a1a1a); border: 1px solid var(--line, #e5e2dd); border-radius: var(--r-sm, 6px); font-family: var(--f-sans); font-size: 14px; line-height: 1.3; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .kmst-tf-group select:focus, .kmst-tf-group input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); } .kmst-tf-actions { justify-content: flex-end; } .kmst-tf-actions button { padding: 9px 16px; background: transparent; color: var(--brand); border: 1px solid var(--brand); border-radius: var(--r-sm, 6px); cursor: pointer; font-family: var(--f-sans); font-size: 13px; font-weight: 600; letter-spacing: .02em; transition: all var(--t-fast); } .kmst-tf-actions button:hover { background: var(--brand); color: #fff; } /* ─── Komunikaty ─── */ .kmst-tabor-count { font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-muted, #6b6b6b); margin: 0 0 16px; text-align: right; } .kmst-tabor-count strong { color: var(--brand); font-weight: 700; } .kmst-tabor-empty { text-align: center; padding: 48px 20px; color: var(--fg-muted, #6b6b6b); font-family: var(--f-display); font-size: 18px; font-style: italic; } .kmst-tabor-loading { text-align: center; padding: 32px 20px; color: var(--brand); font-family: var(--f-mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; } /* ─── Kafelek: nowe elementy i nadpisania ─── */ /* Zdjęcie 1:1 */ .kmst-kafelek__foto { aspect-ratio: 1 / 1; position: relative; } .kmst-kafelek__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 45%); pointer-events: none; } .kmst-kafelek__rok { position: absolute; left: 16px; bottom: 12px; z-index: 2; font-family: var(--f-display); font-size: 44px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); } /* Pigułka statusu */ .kmst-kafelek__status-pill { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 4px 10px; font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r-pill, 999px); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); } .kmst-kafelek__status-pill--sprawny { background: #3a7b3a; } .kmst-kafelek__status-pill--remont { background: var(--kmst-orange, #e8722e); } .kmst-kafelek__status-pill--eksponat { background: #6b3a7b; } .kmst-kafelek__status-pill--magazyn { background: var(--kmst-blue, #4d87c4); } /* Body — relative, żeby pigułka mogła być absolutna */ .kmst-kafelek__body { position: relative; display: flex; flex-direction: column; gap: 6px; flex: 1; } /* Pigułka "Do wynajmu" — absolutna, NIE wpływa na layout kolejnych linii */ .kmst-kafelek__wynajem { position: absolute; top: 22px; right: 20px; z-index: 2; background: linear-gradient(135deg, #fde9b8, #f5d27a); color: #6b4a00; padding: 3px 9px; border-radius: var(--r-pill, 999px); font-family: var(--f-sans); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border: 1px solid #d4a030; white-space: nowrap; } /* Nazwa — rezerwuje miejsce pod pigułkę po prawej (zawsze, niezależnie od jej obecności) */ .kmst-kafelek__nazwa { padding-right: 90px; min-height: 22px; /* żeby krótkie tytuły zachowały wysokość linii */ } /* Typ + numer taborowy — cienka czcionka tytułowa, spokojnie, bez kolorów */ .kmst-kafelek__typ-numer { font-family: var(--f-display); font-size: 17px; font-weight: 300; color: var(--fg-2, #3a3a3a); letter-spacing: -.005em; line-height: 1.25; margin-top: 4px; } /* Typ pojazdu (TRAMWAJ PASAŻERSKI) — zielony caps mono */ .kmst-kafelek__typ-pojazdu { font-family: var(--f-mono); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--brand, #2a8045); font-weight: 700; margin-top: 8px; } /* Producent/marka — zawsze 2 linie */ .kmst-kafelek__marka { font-family: var(--f-sans); font-size: 13px; font-weight: 500; color: var(--fg, #1a1a1a); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; margin-top: 2px; } /* Opis */ .kmst-kafelek__opis { font-family: var(--f-sans); font-size: 13px; line-height: 1.6; color: var(--fg-2, #3a3a3a); margin: 8px 0 0; } /* Link do dołu karty */ .kmst-kafelek__link { font-family: var(--f-sans); font-size: 13px; font-weight: 600; color: var(--brand, #2a8045); margin-top: auto; padding-top: 14px; letter-spacing: .01em; transition: color var(--t-fast); } .kmst-kafelek:hover .kmst-kafelek__link { color: var(--brand-lt, #3d9c5a); } /* ─── Responsywność filtrów ─── */ @media (max-width: 720px) { .kmst-tf-row { grid-template-columns: 1fr 1fr; } .kmst-tf-search, .kmst-tf-actions { grid-column: 1 / -1; } .kmst-tabor-count { text-align: left; } .kmst-kafelek__rok { font-size: 36px; } } @media (max-width: 400px) { .kmst-tf-row { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════ 21. STYLE GLOBALNE WORDPRESS (body, nagłówki, linki, zaznaczenie) Stosowane wszędzie poza stronami pojazdu, gdzie obowiązują style z sekcji 4–19. Scope przez body:not(.single-pojazd) etc. ════════════════════════════════════════════════════════════════ */ /* Tokeny globalne (bez scope'u do CPT pojazd) */ :root { --kmst-green-900: #1f4d1f; --kmst-green-800: #245c25; --kmst-green-700: #2a8045; --kmst-green-600: #3d9c5a; --kmst-green-500: #6bb88c; --kmst-green-100: #e6f0e8; --kmst-green-50: #f3f7f4; --kmst-red: #e63031; --kmst-red-dark: #c01f20; --kmst-orange: #e8722e; --kmst-yellow: #f2c13c; --kmst-blue: #4d87c4; --kmst-gold: #d4a030; --ink: #1a1a1a; --ink-2: #3a3a3a; --ink-3: #6b6b6b; --ink-4: #9a9a9a; --line: #e5e2dd; --line-2: #cfcbc4; --paper: #faf8f3; --paper-2: #f2ede3; --white: #ffffff; --bg: var(--paper); --bg-alt: var(--white); --fg: var(--ink); --fg-2: var(--ink-2); --fg-muted: var(--ink-3); --brand: var(--kmst-green-700); --brand-lt: var(--kmst-green-600); --accent: var(--kmst-red); --f-display: 'DIN 2014', 'Barlow', 'Helvetica Neue', system-ui, sans-serif; --f-cond: 'DIN 2014', 'Barlow Condensed', 'Arial Narrow', sans-serif; --f-sans: 'DIN 2014', 'Barlow', 'Helvetica Neue', system-ui, sans-serif; --f-mono: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace; --container: 1200px; --r-xs: 3px; --r-sm: 6px; --r-md: 14px; --r-lg: 24px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(20, 40, 20, .06); --shadow-md: 0 6px 20px rgba(20, 40, 20, .08); --shadow-lg: 0 18px 50px rgba(20, 40, 20, .14); --t-fast: .15s ease; --t-base: .25s ease; --t-slow: .4s cubic-bezier(.16, 1, .3, 1); } /* Tryb ciemny — globalny */ [data-theme="dark"]:root, html[data-theme="dark"] { --bg: #121812; --bg-alt: #1a2418; --paper: #121812; --paper-2: #1a2418; --fg: #f0ede5; --fg-2: #d8d4c8; --fg-muted: #a5a89f; --line: #2a3a28; --line-2: #3b4f38; } /* Zastosowanie tła dla całej strony w trybie ciemnym */ html[data-theme="dark"], html[data-theme="dark"] body { background: var(--bg); color: var(--fg); } /* Selection — globalny, tylko jeśli strona NIE jest pojazdem (tam ma własny) */ body:not(.single-pojazd):not(.post-type-archive-pojazd) ::selection { background: var(--brand); color: #fff; } /* Nagłówki w treści (wpisy, strony) — skala typograficzna */ body:not(.single-pojazd):not(.post-type-archive-pojazd):not(.tax-typ-pojazdu):not(.tax-producent):not(.tax-wlasnosc) .entry-content h1, body:not(.single-pojazd):not(.post-type-archive-pojazd):not(.tax-typ-pojazdu):not(.tax-producent):not(.tax-wlasnosc) .entry-content h2, body:not(.single-pojazd):not(.post-type-archive-pojazd):not(.tax-typ-pojazdu):not(.tax-producent):not(.tax-wlasnosc) .entry-content h3, body:not(.single-pojazd):not(.post-type-archive-pojazd):not(.tax-typ-pojazdu):not(.tax-producent):not(.tax-wlasnosc) .entry-content h4 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.015em; line-height: 1.1; color: var(--fg); margin: 1.6em 0 .6em; } .entry-content h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 800; } .entry-content h2 { font-size: clamp(28px, 3.5vw, 42px); } .entry-content h3 { font-size: clamp(22px, 2.5vw, 30px); } .entry-content h4 { font-size: clamp(18px, 2vw, 22px); } /* Tytuł strony/wpisu — jeśli wyświetlany */ .single .entry-title, .page:not(.post-type-archive-pojazd):not(.tax-typ-pojazdu):not(.tax-producent):not(.tax-wlasnosc) .entry-title, .archive:not(.post-type-archive-pojazd):not(.tax-typ-pojazdu):not(.tax-producent):not(.tax-wlasnosc) .page-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(36px, 6vw, 72px); letter-spacing: -.02em; line-height: 1.05; color: var(--fg); } /* Paragrafy */ .entry-content p { font-family: var(--f-sans); font-size: 17px; line-height: 1.7; color: var(--fg); margin: 0 0 1.2em; } .entry-content > p:first-of-type { font-size: 19px; color: var(--fg); } /* Linki w treści */ .entry-content a:not(.wp-block-button__link):not(.button):not(.btn) { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--t-fast); } .entry-content a:not(.wp-block-button__link):not(.button):not(.btn):hover { color: var(--brand-lt); } /* Listy */ .entry-content ul, .entry-content ol { font-size: 17px; line-height: 1.7; margin: 0 0 1.4em; padding-left: 28px; } .entry-content ul li, .entry-content ol li { margin: 0 0 .4em; } .entry-content ul li::marker { color: var(--brand); } /* Silne wyróżnienie */ .entry-content strong, .entry-content b { font-weight: 700; color: var(--fg); } .entry-content em, .entry-content i { font-style: italic; } /* Znaczniki i elementy specjalne */ .entry-content mark { background: linear-gradient(transparent 55%, rgba(42, 128, 69, .25) 55%); color: inherit; padding: 0 2px; } .entry-content abbr { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; } .entry-content kbd { font-family: var(--f-mono); font-size: 12px; background: var(--bg-alt); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; padding: 2px 6px; } /* Horyzontalna linia */ .entry-content hr { border: 0; height: 2px; margin: 48px 0; background: repeating-linear-gradient( to right, var(--line-2) 0 12px, transparent 12px 20px ); } /* ════════════════════════════════════════════════════════════════ 22. NAGŁÓWEK I NAWIGACJA KADENCE Stylizacja menu głównego: logo, linki, przyciski, tryb ciemny, responsywność. ════════════════════════════════════════════════════════════════ */ /* Kontener headera */ .site-header { background: var(--bg-alt); border-bottom: 1px solid var(--line); transition: background var(--t-base), border-color var(--t-base); } [data-theme="dark"] .site-header { background: var(--bg-alt); border-bottom-color: var(--line); } /* Logo / tytuł witryny */ .site-branding .site-title, .site-branding .site-title a { font-family: var(--f-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; text-transform: uppercase; color: var(--fg) !important; } .site-branding .site-description { font-family: var(--f-sans); font-size: 11px; letter-spacing: .02em; color: var(--fg-muted); text-transform: none; } /* Menu główne */ .header-navigation .menu > li > a, .header-main-navigation .menu > li > a, .site-header-item .menu > li > a { font-family: var(--f-sans); font-size: 15px; font-weight: 500; color: var(--fg); letter-spacing: 0; text-transform: none; padding: 10px 14px; transition: color var(--t-fast); position: relative; } .header-navigation .menu > li > a:hover, .header-main-navigation .menu > li > a:hover { color: var(--brand); } /* Podkreślenie pod aktywnym/hoverowanym linkiem */ .header-navigation .menu > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast); } .header-navigation .menu > li > a:hover::after, .header-navigation .menu > li.current-menu-item > a::after { transform: scaleX(1); } /* Submenu */ .header-navigation .sub-menu, .header-main-navigation .sub-menu { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 6px; min-width: 220px; } .header-navigation .sub-menu li a { font-family: var(--f-sans); font-size: 14px; color: var(--fg-2); padding: 8px 12px; border-radius: var(--r-xs); transition: background var(--t-fast), color var(--t-fast); } .header-navigation .sub-menu li a:hover { background: var(--paper-2); color: var(--brand); } /* Przycisk w nagłówku (np. "Wesprzyj") */ .header-button a, .header-html .kb-button, .header-mobile-button a { display: inline-flex !important; align-items: center; gap: 8px; padding: 10px 20px !important; background: var(--accent) !important; color: #fff !important; border-radius: var(--r-pill) !important; font-family: var(--f-sans) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .02em; border: none !important; transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast) !important; box-shadow: var(--shadow-sm); } .header-button a:hover, .header-html .kb-button:hover, .header-mobile-button a:hover { background: var(--kmst-red-dark) !important; transform: translateY(-1px); box-shadow: var(--shadow-md); } /* Mobile menu toggle (hamburger) */ .menu-toggle, .drawer-toggle { color: var(--fg) !important; border: 1px solid var(--line) !important; border-radius: var(--r-sm) !important; background: transparent !important; transition: all var(--t-fast) !important; } .menu-toggle:hover, .drawer-toggle:hover { border-color: var(--brand) !important; color: var(--brand) !important; } /* ════════════════════════════════════════════════════════════════ 23. BLOKI GUTENBERGA — stylizacja standardowych komponentów Stosuje się globalnie; na stronach pojazdu kolidujące elementy nadpisuje istniejący CSS sekcji 4–19. ════════════════════════════════════════════════════════════════ */ /* ─── Przyciski (wp-block-button) ─── */ .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; background: var(--brand); color: #fff; border-radius: var(--r-pill); font-family: var(--f-sans); font-size: 15px; font-weight: 600; letter-spacing: .01em; transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); box-shadow: var(--shadow-sm); text-decoration: none; border: none; } .wp-block-button__link:hover { background: var(--kmst-green-800); transform: translateY(-1px); box-shadow: var(--shadow-md); } .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); box-shadow: none; } .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--brand); color: #fff; } .wp-block-button.is-style-red .wp-block-button__link { background: var(--accent); } .wp-block-button.is-style-red .wp-block-button__link:hover { background: var(--kmst-red-dark); } /* ─── Cytaty (wp-block-quote, wp-block-pullquote) ─── */ .wp-block-quote { border-left: 4px solid var(--brand); padding: 8px 0 8px 28px; margin: 32px 0; font-family: var(--f-display); font-size: 22px; font-weight: 300; font-style: italic; line-height: 1.5; color: var(--fg-2); } .wp-block-quote p { font-size: inherit; line-height: inherit; margin: 0 0 .6em; } .wp-block-quote cite { display: block; margin-top: 12px; font-size: 11px; font-style: normal; color: var(--fg-muted); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; } .wp-block-pullquote { padding: 48px 24px; text-align: center; border-top: 3px solid var(--brand); border-bottom: 3px solid var(--brand); margin: 48px 0; background: var(--paper-2); border-radius: 0; } .wp-block-pullquote p { font-family: var(--f-display); font-size: clamp(22px, 3vw, 34px); font-weight: 300; line-height: 1.25; color: var(--fg); font-style: italic; } .wp-block-pullquote cite { display: block; margin-top: 16px; font-family: var(--f-mono); font-size: 11px; font-style: normal; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-muted); } /* ─── Kod (wp-block-code, inline code) ─── */ .entry-content code { font-family: var(--f-mono); font-size: .9em; background: var(--paper-2); color: var(--fg); padding: 2px 6px; border-radius: var(--r-xs); border: 1px solid var(--line); } .wp-block-code { background: var(--paper-2); padding: 20px 24px; border-radius: var(--r-sm); border: 1px solid var(--line); font-family: var(--f-mono); font-size: 13px; line-height: 1.6; color: var(--fg-2); margin: 28px 0; overflow-x: auto; } .wp-block-code code { background: transparent; border: 0; padding: 0; color: inherit; font-size: inherit; } .wp-block-preformatted { background: var(--paper-2); padding: 20px 24px; border-radius: var(--r-sm); font-family: var(--f-mono); font-size: 13px; line-height: 1.6; margin: 28px 0; overflow-x: auto; } /* ─── Separator (wp-block-separator) ─── */ .wp-block-separator { border: 0; background: var(--line-2); height: 1px; margin: 48px auto; max-width: 120px; } .wp-block-separator.is-style-wide { max-width: 100%; } .wp-block-separator.is-style-dots { height: auto; background: none; text-align: center; max-width: none; } .wp-block-separator.is-style-dots::before { content: "· · ·"; color: var(--fg-muted); font-size: 20px; letter-spacing: 1em; } /* ─── Tabela (wp-block-table) ─── */ .wp-block-table { margin: 32px 0; overflow-x: auto; } .wp-block-table table { border-collapse: collapse; width: 100%; font-family: var(--f-sans); font-size: 14px; } .wp-block-table th { background: var(--paper-2); text-align: left; padding: 12px 16px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--fg-2); border-bottom: 2px solid var(--line-2); } .wp-block-table td { padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--fg); } .wp-block-table tbody tr:hover { background: var(--bg-alt); } .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--paper-2); } .wp-block-table figcaption { font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-muted); margin-top: 12px; text-align: center; } /* ─── Obrazek (wp-block-image) ─── */ .wp-block-image { margin: 32px 0; } .wp-block-image img { border-radius: var(--r-md); display: block; width: 100%; height: auto; box-shadow: var(--shadow-sm); } .wp-block-image.is-style-rounded img { border-radius: 50%; } .wp-block-image figcaption { font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-muted); margin-top: 12px; text-align: center; font-weight: 500; } /* ─── Galeria (wp-block-gallery) ─── */ .wp-block-gallery.has-nested-images figure.wp-block-image { border-radius: var(--r-sm); overflow: hidden; margin: 0; } .wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: 0; box-shadow: none; } .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: #fff; padding: 20px 12px 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; } /* ─── Cover (wp-block-cover) ─── */ .wp-block-cover { min-height: 400px; margin: 48px 0; border-radius: var(--r-md); overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; } .wp-block-cover h1, .wp-block-cover h2, .wp-block-cover h3, .wp-block-cover p { color: #fff; margin: 0 0 .4em; } .wp-block-cover h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 4vw, 56px); letter-spacing: -.02em; line-height: 1.05; } /* ─── Columns (wp-block-columns) ─── */ .wp-block-columns { gap: 32px; margin: 32px 0; } @media (max-width: 768px) { .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: wrap; } } /* ─── Media + Text (wp-block-media-text) ─── */ .wp-block-media-text { margin: 48px 0; gap: 48px; align-items: center; background: transparent; border-radius: var(--r-md); overflow: hidden; } .wp-block-media-text .wp-block-media-text__media img { border-radius: var(--r-md); box-shadow: var(--shadow-md); } .wp-block-media-text .wp-block-media-text__content { padding: 16px 0; } /* ─── Wpisy (wp-block-latest-posts, archive) ─── */ .wp-block-latest-posts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin: 32px 0; } .wp-block-latest-posts > li { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .wp-block-latest-posts > li:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand); } .wp-block-latest-posts__post-title { font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -.015em; color: var(--fg); margin-bottom: 8px; display: block; text-decoration: none; } .wp-block-latest-posts__post-date { font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-muted); } .wp-block-latest-posts__post-excerpt { font-family: var(--f-sans); font-size: 14px; line-height: 1.6; color: var(--fg-2); margin-top: 10px; } /* ─── Search, details, meta ─── */ .wp-block-search .wp-block-search__input { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-alt); color: var(--fg); font-family: var(--f-sans); font-size: 14px; } .wp-block-search .wp-block-search__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim, rgba(42, 128, 69, .13)); } .wp-block-search .wp-block-search__button { padding: 10px 18px; background: var(--brand); color: #fff; border-radius: var(--r-sm); font-family: var(--f-sans); font-weight: 600; border: none; cursor: pointer; transition: background var(--t-fast); } .wp-block-search .wp-block-search__button:hover { background: var(--kmst-green-800); } .wp-block-details { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 20px; margin: 24px 0; } .wp-block-details summary { font-family: var(--f-sans); font-weight: 600; color: var(--fg); cursor: pointer; padding: 4px 0; } .wp-block-details summary:hover { color: var(--brand); } /* ─── Meta wpisu (data, autor, kategorie) ─── */ .entry-meta, .post-meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 16px; } .entry-meta a, .post-meta a { color: var(--fg-muted); text-decoration: none; border-bottom: 1px dashed transparent; transition: color var(--t-fast), border-color var(--t-fast); } .entry-meta a:hover, .post-meta a:hover { color: var(--brand); border-bottom-color: var(--brand); } /* ─── Komentarze ─── */ .comments-title { font-family: var(--f-display); font-weight: 700; font-size: 24px; margin: 48px 0 24px; } .comment-list { list-style: none; padding: 0; } .comment-body { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; margin-bottom: 16px; } .comment-meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 10px; } .comment-author .fn { color: var(--fg); font-family: var(--f-sans); font-weight: 700; text-transform: none; letter-spacing: 0; } .comment-reply-link { display: inline-block; margin-top: 8px; padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); font-family: var(--f-sans); font-size: 12px; font-weight: 600; color: var(--brand); text-decoration: none; transition: all var(--t-fast); } .comment-reply-link:hover { background: var(--brand); color: #fff; border-color: var(--brand); } /* ─── Paginacja ─── */ .pagination, .nav-links { display: flex; justify-content: center; gap: 6px; margin: 48px 0; flex-wrap: wrap; } .page-numbers { font-family: var(--f-sans); font-weight: 600; font-size: 13px; padding: 9px 14px; background: var(--bg-alt); color: var(--fg-2); text-decoration: none; border: 1px solid var(--line); border-radius: var(--r-sm); transition: all var(--t-fast); min-width: 38px; text-align: center; } .page-numbers:hover, .page-numbers.current { background: var(--brand); color: #fff; border-color: var(--brand); } /* ─── Ikony akcji (udostępnianie, ocena) ─── */ .wp-block-social-links .wp-social-link { background: var(--bg-alt) !important; transition: transform var(--t-fast), background var(--t-fast); } .wp-block-social-links .wp-social-link:hover { background: var(--brand) !important; transform: translateY(-2px); }