/* Блог: оформление страниц статей. Собрано на существующих токенах сайта (tokens.css) — ни одного нового цвета и ни одного нового шрифта. Файл едет в корень сайта рядом со styles.css. Причина отдельного файла, а не правки styles.css: страницы услуг менять не требуется, а отдельный файл откатывается удалением одной строки в . */ .post__inner { /* Контейнер сайта — 1120px; для сплошного текста это слишком широко, строка перестаёт читаться. Ограничиваем меру строки, а не контейнер. margin-inline: auto обязателен — .container центрирует себя, но не своё содержимое, и без этого колонка текста прижимается к левому краю. */ max-width: 72ch; margin-inline: auto; } .breadcrumbs { padding-block: var(--space-6) 0; font-size: var(--text-sm); color: var(--color-ink-soft); } .breadcrumbs a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .post h1 { /* H1 статьи меньше, чем H1 hero: там заголовок — плакат, здесь — заголовок. */ font-size: clamp(1.6rem, 4.6vw, 2.4rem); margin-block: var(--space-4) var(--space-3); } .post__lead { font-size: var(--text-lg); line-height: var(--leading-body); color: var(--color-ink); } .post__meta { margin-block: var(--space-4) var(--space-8); padding-block-end: var(--space-4); border-block-end: 1px solid var(--color-line); font-size: var(--text-sm); color: var(--color-ink-soft); } .post__author { font-weight: 600; color: var(--color-ink); } .post__body > * + * { margin-block-start: var(--space-4); } .post__body h2 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin-block-start: var(--space-8); } .post__body h3 { margin-block-start: var(--space-6); } .post__body ul, .post__body ol { padding-inline-start: 1.4em; } .post__body li + li { margin-block-start: var(--space-2); } .post__body a { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .post__body a:hover { text-decoration-color: var(--color-accent); } .post__body blockquote { margin-inline: 0; padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--color-accent); color: var(--color-ink-soft); } /* Таблицы на телефоне не переносятся и не сжимаются — они прокручиваются внутри своей обёртки. Иначе страница уезжает горизонтально целиком. */ .table-wrap { overflow-x: auto; } .post__body table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); } .post__body th, .post__body td { padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--color-line); text-align: start; } .post__body th { font-weight: 600; white-space: nowrap; } .post__faq { padding-block: var(--space-8) 0; } .post__faq h2 { font-size: clamp(1.3rem, 3.4vw, 1.7rem); margin-bottom: var(--space-4); } .post__related { margin-block-start: var(--space-8); padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-bg-soft); } .post__related h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); } .post__related ul { margin: 0; padding-inline-start: 1.2em; } .post__related a { text-decoration: underline; text-underline-offset: 3px; } .post__cta { margin-block: var(--space-8) var(--space-12); padding-block-start: var(--space-8); border-block-start: 1px solid var(--color-line); } .post__cta h2 { font-size: var(--text-lg); margin-bottom: var(--space-4); } /* Листинг блога */ .blog-list { list-style: none; margin: var(--space-8) 0 var(--space-12); padding: 0; } .blog-list__item + .blog-list__item { margin-block-start: var(--space-6); padding-block-start: var(--space-6); border-block-start: 1px solid var(--color-line); } .blog-list__item h2 { font-size: clamp(1.2rem, 3.2vw, 1.5rem); margin-bottom: var(--space-2); } .blog-list__item h2 a { text-decoration: underline; text-underline-offset: 3px; } .blog-list__item h2 a:hover { text-decoration-color: var(--color-accent); } .blog-list__item p { color: var(--color-ink-soft); } .blog-list__meta { font-size: var(--text-sm); }