/* Раздел статей. Подключается ПОСЛЕ kac-site.css и перебивает его там, где нужно. Оглавление и футер живут здесь, а не в общем листе, хотя правила у них те же, что на правовых страницах и на лендинге. Причина: там они лежат инлайном в каждой странице, и перенос в общий лист означал бы правку пяти чужих файлов ради этой работы. Стилей .toc в общем листе нет вовсе, поэтому правило цели нажатия для .toc a обязано стоять здесь, рядом с ними: тач-проход общего листа поднимает до 44 px всё остальное, а оглавление обходит стороной (см. tests/test_site_toc_touch_target.py). */ /* ===== Шапка ===== */ /* kac-site.css не прячет ссылки шапки на узком экране: на лендинге это делает его собственный инлайновый блок вместе с бургер-меню. Бургера здесь нет — значит, ссылки просто уходят, а бренд и кнопки остаются; навигация в этих ширинах остаётся в подвале. Порог тот же, что на лендинге (1100), и он не произвольный: замер в браузере дал схлопывание названия «Конъюнктура» в ноль уже на 1000 px — бренду негде ужаться рядом с четырьмя ссылками и двумя кнопками. На 1100 px помещается. */ @media (max-width: 1100px) { .nav-links { display: none; } } /* ===== Заголовок ===== */ .blog-head { max-width: 920px; margin: 0 auto; padding: 44px 28px 0; } .blog-head h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.18; margin-top: 16px; } .blog-head .lead { font-size: 19px; color: var(--fg-muted); margin-top: 16px; line-height: 1.6; max-width: 620px; } .crumbs { font-size: 13px; color: var(--fg-muted); font-family: var(--font-mono); display: flex; gap: 8px; flex-wrap: wrap; } .crumbs a { color: var(--fg-muted); } .crumbs a:hover { color: var(--fg); } .blog-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; font-size: 14px; color: var(--fg-muted); font-family: var(--font-mono); } .blog-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-soft-fg); background: var(--accent-tint); border: 1px solid var(--accent-soft); padding: 4px 10px; border-radius: 999px; } /* ===== Раскладка статьи ===== */ .blog-main { max-width: 920px; margin: 0 auto; padding: 28px 28px 60px; display: grid; grid-template-columns: 222px 1fr; gap: 44px; align-items: start; } .blog-body { min-width: 0; max-width: 620px; } /* Обложки сохраняют исходные пропорции: предметы не обрезаются на телефоне. */ .article-cover { display: block; width: 100%; height: auto; margin-top: 24px; border-radius: 12px; } .post-cover { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; border-radius: 8px; } /* Пояснения набраны HTML-текстом и перестраиваются без уменьшения шрифта. */ .article-visual { margin: 28px 0; padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); } .blog-body .visual-title { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--fg); margin-bottom: 24px; text-wrap: balance; scroll-margin-top: 120px; } .article-visual figcaption { font-size: 13px; line-height: 1.55; color: var(--fg-muted); margin-top: 20px; } .blog-body .visual-label { font-size: 15px; font-weight: 600; color: var(--fg); margin: 0 0 14px; line-height: 1.4; } .blog-body .visual-note { font-size: 15px; line-height: 1.55; padding-top: 18px; margin: 20px 0 0; border-top: 1px solid var(--border); } .sheet-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .sheet-comparison > div { min-width: 0; } .sheet-line { padding: 10px 0; border-top: 1px solid var(--border); font-size: 15px; line-height: 1.4; } .sheet-line > span { text-decoration: line-through; text-decoration-color: var(--fg-muted); } .sheet-line small { display: block; font-size: 13px; color: var(--fg-muted); margin-top: 4px; } .sheet-line-refine > span { text-decoration: none; } .sheet-result { border-left: 1px solid var(--border); padding-left: 24px; } .blog-body .resource-name { font-size: 21px; font-weight: 650; line-height: 1.45; color: var(--accent-soft-fg); margin-bottom: 12px; overflow-wrap: anywhere; } .blog-body .resource-detail { font-size: 14px; line-height: 1.5; margin-bottom: 12px; } .resource-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 12px; } .resource-fields dt { font-size: 12px; color: var(--fg-muted); } .resource-fields dd { font-family: var(--font-mono); font-size: 23px; margin: 2px 0 0; color: var(--fg); } .vat-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; margin-bottom: 22px; color: var(--fg-2); } .vat-legend > span { display: flex; align-items: center; gap: 7px; } .vat-legend i { width: 12px; height: 12px; display: inline-block; } .vat-base { background: var(--accent); } .vat-tax { background: var(--fg-muted); } .vat-quote + .vat-quote { margin-top: 22px; } .vat-quote-title { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; font-size: 15px; margin-bottom: 8px; } .vat-quote-title > span { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .vat-bar { display: flex; height: 26px; border-left: 1px solid var(--border-strong); } .vat-bar > span { display: block; } .blog-body .vat-quote p { margin: 7px 0 0; font-size: 14px; line-height: 1.5; } .file-roles { margin: 0; } .file-roles > div { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); } .file-roles dt { font-family: var(--font-mono); color: var(--accent-soft-fg); font-size: 17px; padding-top: 1px; } .file-roles dd { margin: 0; font-size: 15px; line-height: 1.5; } .file-roles dd strong, .file-roles dd span { display: block; } .file-roles dd span { color: var(--fg-2); font-size: 14px; margin-top: 4px; } .blog-body .export-start { text-align: center; font-size: 16px; font-weight: 600; color: var(--fg); margin-bottom: 22px; } .export-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .export-branches > div { border-top: 1px solid var(--accent-soft-fg); padding-top: 14px; } .blog-body .export-format { font-size: 14px; font-family: var(--font-mono); color: var(--accent-soft-fg); margin-bottom: 10px; } .blog-body .export-branches p { font-size: 14px; line-height: 1.55; } .export-next { position: relative; text-align: center; padding: 18px 10px 0; margin-top: 24px; border-top: 1px solid var(--border-strong); } .export-next::before { content: ''; position: absolute; width: 8px; height: 8px; border-right: 1px solid var(--fg-muted); border-bottom: 1px solid var(--fg-muted); transform: rotate(45deg); top: -5px; left: calc(50% - 4px); background: var(--bg-2); } .export-next strong { display: block; font-size: 17px; line-height: 1.4; } .export-next span { display: block; margin-top: 8px; color: var(--fg-2); font-size: 14px; line-height: 1.55; } .export-final strong { color: var(--accent-soft-fg); font-size: 22px; } @media (max-width: 520px) { .article-visual { padding: 20px 16px; } .sheet-comparison, .export-branches { grid-template-columns: 1fr; gap: 24px; } .sheet-result { border-left: 0; border-top: 1px solid var(--border); padding: 20px 0 0; } .file-roles > div { grid-template-columns: 52px 1fr; gap: 12px; } } /* Проверка источников, реквизитов и дат: текст остаётся доступным без картинок. */ .source-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .source-comparison > div { min-width: 0; } .source-comparison .visual-label { min-height: 42px; } .source-papers { display: flex; gap: 10px; padding: 6px 0 18px; } .source-papers span { position: relative; display: grid; place-items: start center; padding-top: 10px; width: 56px; height: 74px; border: 1px solid var(--accent-soft-fg); border-radius: 4px; color: var(--accent-soft-fg); font-size: 17px; font-weight: 600; } .source-papers span::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 13px; height: 7px; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); } .blog-body .source-total { font-size: 23px; font-weight: 700; color: var(--fg); margin-bottom: 8px; } .blog-body .source-explanation { font-size: 15px; line-height: 1.55; margin-bottom: 0; } .quote-fields { margin: 0; } .quote-fields > div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 16px 0; } .quote-fields > div + div { border-top: 1px solid var(--border); } .quote-fields dt { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--fg); } .quote-fields dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg-2); } .blog-body .document-steps { list-style: none; counter-reset: doc-step; gap: 0; padding: 0; margin: 0; } .document-steps li { position: relative; counter-increment: doc-step; padding: 0 0 24px 48px; } .document-steps li::before { content: counter(doc-step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--accent-soft-fg); border-radius: 50%; color: var(--accent-soft-fg); font-family: var(--font-mono); font-size: 15px; } .document-steps li:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 36px; bottom: 6px; border-left: 1px solid var(--border-strong); } .document-steps li:last-child { padding-bottom: 0; } .document-steps strong, .document-steps span { display: block; } .document-steps strong { font-size: 17px; line-height: 1.45; } .document-steps span { margin-top: 6px; font-size: 15px; line-height: 1.55; } .blog-body .document-timeline { list-style: none; gap: 0; margin: 0; padding: 0 0 0 8px; } .document-timeline li { position: relative; display: grid; grid-template-columns: 128px 1fr; gap: 18px; padding: 0 0 24px 22px; font-size: 15px; line-height: 1.5; } .document-timeline li::before { content: ''; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border: 1px solid var(--accent-soft-fg); border-radius: 50%; background: var(--bg-2); } .document-timeline li:not(:last-child)::after { content: ''; position: absolute; left: -1px; top: 19px; bottom: 1px; border-left: 1px solid var(--border-strong); } .document-timeline time { font-family: var(--font-mono); font-size: 14px; color: var(--accent-soft-fg); font-variant-numeric: tabular-nums; } .date-conclusions { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; } .date-conclusions > div { border-top: 1px solid var(--border-strong); padding-top: 14px; } .date-conclusions strong { font-size: 16px; } .blog-body .date-conclusions p { font-size: 15px; line-height: 1.55; margin: 8px 0 0; } @media (max-width: 520px) { .source-comparison, .date-conclusions { grid-template-columns: 1fr; } .source-comparison .visual-label { min-height: 0; } .source-comparison > div + div { border-top: 1px solid var(--border); padding-top: 20px; } .quote-fields > div { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; } .document-timeline li { grid-template-columns: 1fr; gap: 4px; } } /* Хронология и пересчёт единиц: читаемые подписи вместо текста внутри картинки. */ .history-timeline strong, .history-timeline span { display: block; } .history-timeline strong { font-size: 17px; line-height: 1.45; } .history-timeline span { margin-top: 6px; font-size: 15px; line-height: 1.55; } .history-timeline li:last-child { padding-bottom: 0; } .unit-matrix { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .unit-matrix span { padding: 12px 0; text-align: center; border: 1px solid var(--accent-soft); border-radius: 4px; background: var(--accent-tint); color: var(--accent-soft-fg); font-family: var(--font-mono); font-size: 14px; } .blog-body .unit-equation { margin: 16px 0 22px; font-family: var(--font-mono); font-size: 16px; text-align: center; color: var(--fg); font-variant-numeric: tabular-nums; } .unit-price-result { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; } .unit-price-result > div { border-top: 1px solid var(--border-strong); padding-top: 14px; } .unit-price-result dt { font-size: 14px; line-height: 1.5; color: var(--fg-2); } .unit-price-result dd { margin: 7px 0 0; font-family: var(--font-mono); font-size: 24px; color: var(--fg); font-variant-numeric: tabular-nums; } .conversion-line { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: start; padding: 18px 0; border-top: 1px solid var(--border); } .conversion-line span { display: block; min-height: 44px; font-size: 14px; line-height: 1.5; color: var(--fg-2); } .conversion-line strong, .conversion-line b { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 23px; line-height: 1.4; font-weight: 600; font-variant-numeric: tabular-nums; } .conversion-line .conversion-action span, .conversion-line .conversion-action b { color: var(--accent-soft-fg); } @media (max-width: 520px) { .unit-matrix { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .unit-price-result { grid-template-columns: 1fr; gap: 16px; } .conversion-line { grid-template-columns: 1fr; gap: 16px; padding: 20px 0; } .conversion-line span { min-height: 0; } .conversion-action { padding-left: 18px; border-left: 1px solid var(--accent-soft-fg); } } /* ===== Оглавление ===== Разметка: