/* * Blog / eseje (Solertio studio). Prefiks 70 = ładowane po sekcjach, przed 90-polish. * Używa wyłącznie tokenów z 00-tokens.css, więc motyw jasny/ciemny działa bez zmian. * Dwa bloki językowe artykułu (.post-lang[data-post-lang]) przełącza 60-blog-lang.js * wg atrybutu lang na (spójnie z 50-i18n.js). Domyślnie widoczny EN; PL ma [hidden]. */ /* ---- Indeks bloga ---- */ .blog-index { padding-block: var(--space-8) var(--space-9); } .blog-index .section-inner { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--space-5); } .blog-index__eyebrow { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--space-3); } .blog-index__title { font-family: var(--font-display); font-size: var(--step-4); line-height: 1.02; margin: 0 0 var(--space-4); } .blog-index__desc { color: var(--text-muted); font-size: var(--step-1); max-width: 52ch; margin: 0 0 var(--space-8); } .post-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--space-6); } .post-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); } .post-card:hover { border-color: var(--accent); transform: translateY(-2px); } .post-card > a { display: grid; grid-template-rows: auto 1fr; height: 100%; color: inherit; text-decoration: none; } .post-card__media { aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; } .post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .post-card__body { padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; } .post-card__eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--accent); margin: 0; text-transform: uppercase; } .post-card__title { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; margin: 0; } .post-card__excerpt { color: var(--text-muted); font-size: var(--step--1); line-height: 1.6; margin: 0; } .post-card__meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); margin: 0; } /* ---- Pojedynczy esej ---- */ .post { padding-block: var(--space-7) var(--space-9); } .post-inner { max-width: 46rem; margin: 0 auto; padding-inline: var(--space-5); } .post-back { display: inline-block; font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-dim); text-decoration: none; margin-bottom: var(--space-6); } .post-back:hover { color: var(--accent); } .post-eyebrow { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em; color: var(--accent); text-transform: uppercase; margin: 0 0 var(--space-3); } .post-figure { margin: 0 0 var(--space-7); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); } .post-figure img { width: 100%; height: auto; display: block; } .post-figure figcaption { font-size: var(--step--1); color: var(--text-dim); padding: var(--space-3) var(--space-4); background: var(--surface); } .post-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-dim); margin: 0 0 var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; } /* Blok językowy */ .post-lang[hidden] { display: none; } /* Typografia treści eseju */ .post-lang h1 { font-family: var(--font-display); font-size: var(--step-4); line-height: 1.03; margin: 0 0 var(--space-5); letter-spacing: -0.01em; } .post-lang h2 { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.12; margin: var(--space-8) 0 var(--space-4); } .post-lang h3 { font-size: var(--step-1); line-height: 1.2; margin: var(--space-6) 0 var(--space-3); } .post-lead { font-size: var(--step-1); line-height: 1.55; color: var(--text); margin: 0 0 var(--space-6); } .post-lang p { font-size: var(--step-0); line-height: 1.75; color: var(--text-muted); margin: 0 0 var(--space-5); max-width: var(--maxw-prose); } .post-lang p strong, .post-lang li strong { color: var(--text); font-weight: 600; } .post-lang a { color: var(--accent); text-underline-offset: 2px; } .post-lang ul, .post-lang ol { margin: 0 0 var(--space-5) var(--space-5); padding: 0; display: grid; gap: var(--space-2); } .post-lang li { font-size: var(--step-0); line-height: 1.7; color: var(--text-muted); max-width: var(--maxw-prose); } .post-lang blockquote { margin: var(--space-6) 0; padding: var(--space-3) 0 var(--space-3) var(--space-5); border-left: 3px solid var(--accent); font-family: var(--font-display); font-size: var(--step-1); font-style: italic; color: var(--text); } .post-lang blockquote cite { display: block; font-family: var(--font-mono); font-style: normal; font-size: 0.78rem; color: var(--text-dim); margin-top: var(--space-2); } .post-lang code { font-family: var(--font-mono); font-size: 0.85em; color: var(--text); background: var(--bg-elev); padding: 0.05em 0.35em; border-radius: 4px; } /* Tabele w eseju */ .post-lang .table-wrap { overflow-x: auto; margin: var(--space-6) 0; border: 1px solid var(--border); border-radius: var(--radius); } .post-lang table { border-collapse: collapse; width: 100%; font-size: var(--step--1); } .post-lang th, .post-lang td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-soft); vertical-align: top; line-height: 1.5; } .post-lang thead th { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); background: var(--surface); } .post-lang tbody tr:last-child td { border-bottom: none; } /* Bibliografia */ .post-refs { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border); } .post-refs h2 { font-family: var(--font-mono); font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin: 0 0 var(--space-4); } .post-refs ol { margin: 0 0 0 var(--space-5); display: grid; gap: var(--space-3); } .post-refs li { font-size: var(--step--1); line-height: 1.6; color: var(--text-muted); } .post-refs .ref-kind { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin-right: 0.5em; } /* CTA na końcu eseju */ .post-cta { margin-top: var(--space-8); padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .post-cta p { margin: 0 0 var(--space-4); color: var(--text-muted); } @media (max-width: 560px) { .post-lang h1, .blog-index__title { font-size: var(--step-3); } } /* Blog topic filter (single-select pills) */ .blog-filter { display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0 0 var(--space-7); } .blog-filter__btn { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:var(--space-2) var(--space-4); cursor:pointer; transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .blog-filter__btn:hover { border-color:var(--accent); color:var(--text); } .blog-filter__btn.is-active { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); } .blog-filter__btn:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }