/* pages.css — селекторы под конкретные страницы. Страница помечается атрибутом на : . Общее сюда не класть, ему место в components.css. */ /* ============================================================ ГЛАВНАЯ — концепция «Розрахунковий лист» ============================================================ Третий заход. Претензия к двум прошлым была верной: менялись кегль и радиусы, а скелет оставался один и тот же — «заголовок, абзац, сетка одинаковых карточек», шесть раз подряд. Это и читается как шаблон. Замер референсов (drafts/ref-harvest/probe.json + скриншоты) показал, что «сделанность» у них держится на трёх вещах, и ни одна из них не про размер шрифта: 1. ТЁПЛАЯ ОСНОВА. fingu — беж #DFD8CA, wiseadvice — крем #FBF9F5, moedelo — #F1F1F1. Ни у кого нет холодного сине-серого, а у нас был #F7F9FC. Холодный серо-синий — цвет дефолтного бутстрапа, он и давал ощущение «сгенерировано». 2. ЧИСЛА КАК ГРАФИКА. У wiseadvice отдельная тёмная полоса с «ТОП-3», «45 млн», «20 лет» набранными огромным кеглем. Число работает как изображение, а не как часть абзаца. 3. РАЗНАЯ ФОРМА У КАЖДОГО БЛОКА. Ни один из шести референсов не повторяет композицию секции дважды: сетка, затем полоса, затем асимметричный сплит, затем типографика без картинок. Отсюда идентичность: бухгалтерия, которая публикует прайс — значит страница должна выглядеть как опубликованный расчётный лист. Тёплая бумага, волосяные линейки как в разграфлённом бланке, табличные цифры, жёлтый маркер по ключевой сумме. Не SaaS-лендинг, а документ. Палитра посчитана и проверена в scripts/_palette-check.js: все пары «текст на фоне» проходят WCAG AA, ни один цвет не подобран на глаз. Всё ограничено [data-page='home']: остальные 27 страниц не трогаются до согласования. */ [data-page='home'] { /* --- Тёплая бумага вместо холодного сине-серого --- */ --color-ink: oklch(21% 0.008 75); /* #1A1814 17.7:1 на белом */ --color-ink-secondary: oklch(40% 0.012 72); /* #4C4741 9.19:1 */ --color-ink-muted: oklch(53% 0.014 74); /* #716B63 5.27:1, проходит AA */ --color-bg: oklch(97.4% 0.008 85); /* #F9F6F0 бумага */ --color-surface: oklch(100% 0 90); /* #FFFFFF лист на бумаге */ --color-bridge: oklch(95.2% 0.014 84); /* #F4EFE5 тёплая подложка врезок */ --color-border: oklch(90.5% 0.012 82); /* #E4DFD7 линейка бланка */ --color-border-strong: oklch(82% 0.018 80); /* #CAC3B7 */ /* Флаговый синий не тронут: он и был правильным, ему не хватало основы, на которой он читается как акцент, а не как весь корпоративный шаблон. */ --color-accent-soft: oklch(93.5% 0.028 252); /* #DDEBFC */ --color-success: oklch(50% 0.115 155); /* #167645 5.66:1 */ --color-danger: oklch(50% 0.16 28); /* #AC312A 6.51:1 */ /* Тёмная плоскость тёплая, а не сине-стальная: на бумажном фоне холодный графит выглядит как чужая деталь из другого макета. */ --plane: oklch(23% 0.012 76); /* #201C17 */ --plane-2: oklch(28% 0.014 76); /* #2D2821 */ --plane-ink: oklch(100% 0 90); --plane-muted: oklch(75% 0.014 78); --plane-line: oklch(100% 0 90 / 0.13); --r-card: 20px; --r-plane: 28px; --sec-pad: clamp(3.5rem, 7vw, 6.5rem); --gutter: 5.5rem; /* поле слева под номер секции */ } /* ============================================================ Типографика ============================================================ */ /* Потолок 52px, а не 56. Ровно медиана референсов (fingu 52, moedelo 52, diia 56, wiseadvice 56), и при этом «Бухгалтерське обслуговування» укладывается в одну строку левой колонки — заголовок читается тремя строками вместо четырёх. */ [data-page='home'] h1 { font-size: clamp(2.25rem, 1.5rem + 3.1vw, 3.25rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: var(--weight-bold); text-wrap: balance; } [data-page='home'] main > .section h2 { font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.75rem); line-height: 1.1; letter-spacing: -0.028em; font-weight: var(--weight-bold); text-wrap: balance; } [data-page='home'] h3 { font-size: var(--text-xl); line-height: 1.25; letter-spacing: -0.015em; font-weight: var(--weight-semibold); } /* --- Основной текст --- Мера считается в ЗНАКАХ, а не в пикселях: 75 знаков остаются пределом независимо от кегля. Поэтому расширить колонку можно только одним способом — увеличив сам шрифт, чтобы те же 75 знаков заняли больше места. 16px/68ch = 510px. 18px/72ch = 818px. 20px/76ch = 958px. В контентных 1096px последний вариант заполняет 87% ширины: от дыры в 340px, которую отметил клиент, остаётся 138px — обычное поле абзаца. Сужать сам контейнер до 1080 я пробовал: дыра падала до 57px, но ценой двух регрессий — четвёртая карточка групп срывалась на вторую строку, а H1 в колонке 500px уходил в четыре строки. Контейнер оставлен 1160, ширину добирает кегль. 76 знаков — на один сверх ориентира better-typography §9. Это осознанно: при кегле 20 и интерлиньяже 1.6 строка физически выше, и глаз находит начало следующей уверенно. Дальше не иду. */ /* :not([class]) обязателен — иначе правило накрывает и служебные абзацы .source-note / .price-note, и сноска под таблицей раздувается до кегля основного текста, теряя роль примечания. */ [data-page='home'] main > .section > .container > p:not([class]), [data-page='home'] main > .section > .container > ul:not([class]), [data-page='home'] main > .section > .container > ol:not([class]) { font-size: 1.25rem; line-height: 1.6; } /* Цифры в тексте — табличные и чуть плотнее: на странице, где число это товар, разнобой в ширине знаков читается как небрежность. */ [data-page='home'] .price-value, [data-page='home'] .rate-val, [data-page='home'] .table-wrap td, [data-page='home'] .stat-num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* ============================================================ Ритм: чередование плоскостей во всю ширину ============================================================ */ [data-page='home'] main > .section { padding-block: var(--sec-pad); background: var(--color-bg); } /* Белый лист под блоками, где содержимое само по себе табличное */ [data-page='home'] main > .section:has(#tarify), [data-page='home'] main > .section:has(#komu), [data-page='home'] main > .section:has(#faq-title) { background: var(--color-surface); } /* Единственная тёмная полоса на странице */ [data-page='home'] main > .section:has(#dystantsiino) { background: var(--plane); color: var(--plane-ink); } [data-page='home'] .section:has(#dystantsiino) h2, [data-page='home'] .section:has(#dystantsiino) h3, [data-page='home'] .section:has(#dystantsiino) strong { color: var(--plane-ink); } [data-page='home'] .section:has(#dystantsiino) p { color: var(--plane-muted); } [data-page='home'] .section:has(#dystantsiino) a { color: var(--plane-ink); text-decoration-color: var(--plane-line); } [data-page='home'] .section:has(#dystantsiino) a:hover { text-decoration-color: currentColor; } /* ============================================================ Заголовок секции: номер уходит в левое поле ============================================================ Приём печатного отчёта: колонцифра стоит на полях, а не над текстом. Даёт странице вертикальную ось и опознаётся как «документ», а не лендинг. */ [data-page='home'] main { counter-reset: home-section; } [data-page='home'] main > .section:not(:has(.cta-band)):not(:has(.sources)):not(:has(.related)) { counter-increment: home-section; } [data-page='home'] main > .section:not(:has(.cta-band)):not(:has(.sources)):not(:has(.related)) h2 { position: relative; padding-top: var(--space-5); margin-bottom: var(--space-5); } [data-page='home'] main > .section:not(:has(.cta-band)):not(:has(.sources)):not(:has(.related)) h2::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 1px; background: var(--color-border); } [data-page='home'] main > .section:not(:has(.cta-band)):not(:has(.sources)):not(:has(.related)) h2::after { content: counter(home-section, decimal-leading-zero); position: absolute; top: var(--space-3); inset-inline-start: 0; font-size: var(--text-xs); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; letter-spacing: 0.14em; color: var(--color-accent); } /* На широком экране номер выносится на поля слева от колонки текста. Ниже 1320px поля нет — номер возвращается над заголовком. */ @media (min-width: 1320px) { [data-page='home'] main > .section:not(:has(.cta-band)):not(:has(.sources)):not(:has(.related)) h2 { padding-top: 0; } [data-page='home'] main > .section:not(:has(.cta-band)):not(:has(.sources)):not(:has(.related)) h2::before { top: 0.85em; inset-inline: auto; inset-inline-start: calc(var(--gutter) * -1); width: 2.5rem; height: 2px; background: var(--color-flag-yellow); } [data-page='home'] main > .section:not(:has(.cta-band)):not(:has(.sources)):not(:has(.related)) h2::after { top: 0.2em; inset-inline-start: calc(var(--gutter) * -1); font-size: var(--text-sm); } } [data-page='home'] .section:has(#dystantsiino) h2::before { background: var(--plane-line); } [data-page='home'] .section:has(#dystantsiino) h2::after { color: var(--plane-ink); } @media (min-width: 1320px) { [data-page='home'] .section:has(#dystantsiino) h2::before { background: var(--color-flag-yellow); } } /* ============================================================ Открытие секции в две колонки ============================================================ Одной ширины текста мало: даже на 680px справа оставалась дыра. Вводный абзац поднят на одну строку с заголовком — верх каждой секции занимает всю ширину, и дальше колонка текста читается как осознанная мера, а не как обрубленный край. Ниже 1040px схлопывается в одну колонку: делить 500px на две — значит получить два нечитаемых столбца по 30 знаков. */ @media (min-width: 1040px) { /* Колонки неравные: заголовок набран крупно и укладывается в меньшую ширину, а вводному абзацу нужны читаемые 45+ знаков. При 1fr/1fr в контейнере 1080 лид сжимался до сорока знаков и рвался на клочки. */ [data-page='home'] main > .section > .container.stack { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: clamp(2rem, 4vw, 3.5rem); row-gap: var(--space-5); align-items: start; } /* Вертикальный ритм отдаём row-gap. Иначе к нему прибавляются марджины из .stack > * + * и интервалы разъезжаются по строкам сетки. */ [data-page='home'] main > .section > .container.stack > * + * { margin-top: 0; } /* По умолчанию всё во всю ширину — в две колонки встаёт только шапка */ [data-page='home'] main > .section > .container.stack > * { grid-column: 1 / -1; } [data-page='home'] main > .section > .container.stack > h2 { grid-column: 1; margin-bottom: 0; } [data-page='home'] main > .section > .container.stack > h2 + p { grid-column: 2; margin-top: 0; } } /* ============================================================ Герой ============================================================ Фотографий сотрудников у клиента нет, выдумывать их мы не будем, поэтому визуальный вес правой колонки несёт сам прайс. Он же главный аргумент: у всех шести референсов цена либо спрятана, либо «от договірної». */ [data-page='home'] .hero { position: relative; padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem); background: var(--color-bg); border-bottom: 1px solid var(--color-border); } /* Разграфлённый бланк: линейки в 1px через 2.25rem, почти на пороге различимости. Это фактура бумаги, а не декор — заметна, только когда ищешь её взглядом. */ [data-page='home'] .hero::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( to bottom, transparent 0, transparent calc(2.25rem - 1px), oklch(21% 0.008 75 / 0.04) calc(2.25rem - 1px), oklch(21% 0.008 75 / 0.04) 2.25rem ); pointer-events: none; } [data-page='home'] .hero > .container { position: relative; } [data-page='home'] .hero-grid { display: grid; gap: var(--space-7); align-items: start; } /* Перевес влево. В контейнере 1080 при равных долях заголовок получал 500px и уходил в четыре строки — это уже не заголовок, а колонка текста. Панели прайса 430px хватает: самая длинная строка в ней «від 4000». */ @media (min-width: 1000px) { [data-page='home'] .hero-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: clamp(2rem, 3.5vw, 3.5rem); } } /* min-width: 0 обязателен: grid-элемент по умолчанию не сжимается уже своего содержимого, длинное слово распирало бы колонку за края сетки. */ [data-page='home'] .hero-content { min-width: 0; } [data-page='home'] .hero-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-5); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-ink-secondary); font-size: var(--text-sm); font-weight: var(--weight-semibold); max-width: none; } /* Жёлтая точка — неинформационная метка. Контраст жёлтого на бумаге 1.40:1, текста он не несёт нигде (см. tokens.css и _palette-check.js). */ [data-page='home'] .hero-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-flag-yellow); flex: none; } [data-page='home'] .hero h1 { margin-bottom: var(--space-5); } /* Маркер по сумме. На тёплой бумаге жёлтый читается ровно тем, чем он и является в этой профессии: пометкой на распечатанном прайсе. */ [data-page='home'] .hero h1 .hl { white-space: nowrap; font-variant-numeric: tabular-nums; background-image: linear-gradient( to top, oklch(88.7% 0.182 95 / 0.75) 0.05em, oklch(88.7% 0.182 95 / 0.75) 0.3em, transparent 0.3em ); background-repeat: no-repeat; } [data-page='home'] .hero-lead { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.55; color: var(--color-ink-secondary); text-wrap: pretty; } [data-page='home'] .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } [data-page='home'] .hero-actions .btn-lg { min-height: 56px; padding-inline: var(--space-6); font-size: var(--text-lg); font-weight: var(--weight-semibold); } @media (max-width: 520px) { [data-page='home'] .hero-actions { flex-direction: column; align-items: stretch; } [data-page='home'] .hero-actions .btn { width: 100%; } } /* Разделителей между пунктами нет: при переносе строки вертикальная черта повисает в начале второй строки и читается как обрыв. */ [data-page='home'] .hero-trust { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: var(--space-7) 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--color-border); list-style: none; } [data-page='home'] .hero-trust li { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-ink-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); } [data-page='home'] .hero-trust svg { color: var(--color-success); width: 20px; height: 20px; } /* --- Панель прайса --- */ [data-page='home'] .hero-card { background: var(--plane); color: var(--plane-ink); border-radius: var(--r-plane); padding: clamp(1.5rem, 2.4vw, 2.25rem); box-shadow: 0 2px 4px oklch(21% 0.008 75 / 0.10), 0 16px 36px oklch(21% 0.008 75 / 0.18), 0 36px 72px oklch(21% 0.008 75 / 0.12); } [data-page='home'] .hero-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); margin-bottom: var(--space-2); border-bottom: 1px solid var(--plane-line); } [data-page='home'] .hero-card-title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--plane-ink); max-width: none; } [data-page='home'] .hero-card-badge { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--plane-muted); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } [data-page='home'] .hero-card-list { margin: 0; padding: 0; list-style: none; } [data-page='home'] .hero-card-list li { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--plane-line); } [data-page='home'] .hero-card-list li:last-child { border-bottom: 0; } /* Базовый тариф выделен подложкой и жёлтой засечкой. Синий акцент здесь не годится: #0057B7 на #201C17 даёт 1.9:1 и текст на нём нечитаем. */ [data-page='home'] .hero-card-list li.is-featured { background: oklch(100% 0 90 / 0.06); border-radius: var(--radius-md); margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); border-bottom-color: transparent; } [data-page='home'] .hero-card-list li.is-featured::before { content: ''; position: absolute; inset-inline-start: 0; top: var(--space-4); bottom: var(--space-4); width: 3px; border-radius: 3px; background: var(--color-flag-yellow); } [data-page='home'] .hero-card-list .lbl { color: var(--plane-muted); font-size: var(--text-sm); line-height: 1.4; } [data-page='home'] .hero-card-list li.is-featured .lbl { color: var(--plane-ink); } [data-page='home'] .hero-card-list .val { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--plane-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; } [data-page='home'] .hero-card-note { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--plane-line); font-size: var(--text-sm); line-height: 1.5; color: var(--plane-muted); max-width: none; } /* ============================================================ Определение — редакционный лид, а не плашка ============================================================ Раньше это был закрашенный прямоугольник, ещё одна коробка в череде коробок. Крупный текст с вертикальной линейкой отличает его по фактуре от всего остального на странице. */ [data-page='home'] .definition { background: none; border-radius: 0; border-inline-start: 3px solid var(--color-accent); padding: var(--space-1) 0 var(--space-1) var(--space-5); font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem); line-height: 1.5; letter-spacing: -0.012em; color: var(--color-ink); } [data-page='home'] .definition p { max-width: 58ch; } /* ============================================================ 01 — Тарифы ============================================================ */ [data-page='home'] .price-grid { gap: var(--space-4); } [data-page='home'] .price-card { display: flex; flex-direction: column; border-radius: var(--r-card); padding: clamp(1.25rem, 2vw, 1.75rem); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } [data-page='home'] .price-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); } /* Базовый тариф инвертирован. Приём wiseadvice: одна карточка в ряду ломает ритм и становится точкой входа, вместо того чтобы пять одинаковых прямоугольников соревновались за внимание. */ [data-page='home'] .price-card.is-featured { background: var(--plane); border-color: var(--plane); box-shadow: 0 2px 4px oklch(21% 0.008 75 / 0.10), 0 14px 30px oklch(21% 0.008 75 / 0.14); } [data-page='home'] .price-card.is-featured h3 { color: var(--plane-muted); } [data-page='home'] .price-card.is-featured .price { color: var(--plane-muted); } [data-page='home'] .price-card.is-featured .price-value { color: var(--plane-ink); } [data-page='home'] .price-card.is-featured .price-period { color: var(--plane-muted); } [data-page='home'] .price-card.is-featured .price-includes { border-top-color: var(--plane-line); } [data-page='home'] .price-card.is-featured .price-includes li { color: var(--plane-ink); } [data-page='home'] .price-card.is-featured .price-includes svg { color: var(--color-flag-yellow); } [data-page='home'] .price-card.is-featured .price-note { color: var(--plane-muted); } /* Бейдж НЕ жёлтый, хотя тёмная тёплая карточка это позволила бы по контрасту. RULE-THEMATIC-DESIGN держит флаговый цвет на интерактиве и тонких метках; заливка плашки жёлтым — это уже декоративное использование символики. Жёлтый на этой странице остаётся ровно в четырёх ролях: маркер по сумме в H1, точка в эйброу, линейка у номера секции и засечка базового тарифа. */ [data-page='home'] .price-card.is-featured .badge { background: oklch(100% 0 90 / 0.14); color: var(--plane-ink); } [data-page='home'] .price-card.is-featured .btn-primary { background: var(--color-surface); border-color: var(--color-surface); color: var(--plane); } [data-page='home'] .price-card.is-featured .btn-primary:hover { background: var(--color-bridge); border-color: var(--color-bridge); color: var(--plane); } /* Бейдж в потоке над ценой: цена теперь идёт первой, и абсолютный бейдж в правом верхнем углу наезжал бы на само число. Карточки без бейджа получают пустой слот той же высоты, иначе их цены поднимаются относительно соседей и ряд перестаёт читаться. */ [data-page='home'] .price-card .badge { position: static; order: 0; align-self: flex-start; height: 1.625rem; margin: 0 0 var(--space-4); } [data-page='home'] .price-card:not(:has(.badge))::before { content: ''; order: 0; display: block; height: 1.625rem; margin-bottom: var(--space-4); } [data-page='home'] .price-card:has(.badge) h3 { padding-inline-end: 0; } @media (max-width: 639px) { [data-page='home'] .price-card:not(:has(.badge))::before { display: none; } [data-page='home'] .price-card h3 { min-height: 0; } } [data-page='home'] .price-card h3 { order: 2; margin: 0 0 var(--space-4); font-size: var(--text-lg); color: var(--color-ink-secondary); font-weight: var(--weight-medium); letter-spacing: 0; min-height: calc(var(--text-lg) * 2 * 1.3); } /* Цена идёт первой в визуальном порядке: в разметке она ниже h3, но решение принимается по числу. order переставляет, не трогая разметку. */ [data-page='home'] .price-card .price { order: 1; margin: 0 0 var(--space-2); align-items: baseline; color: var(--color-ink-muted); } [data-page='home'] .price-card .price-value { font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: var(--weight-bold); letter-spacing: -0.035em; line-height: 1; } /* Единица измерения — flex-элемент, и по умолчанию он сжимается вместе с карточкой: в колонке 242px «грн/міс» разрывалось на «грн/» и «міс». Читается как две разные величины, поэтому запрещаем и сжатие, и перенос. */ [data-page='home'] .price-card .price-period { flex: none; white-space: nowrap; } [data-page='home'] .price-card .price-includes { order: 3; margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); } [data-page='home'] .price-card .price-includes li { font-size: var(--text-sm); line-height: 1.45; margin-bottom: var(--space-3); } [data-page='home'] .price-card .price-note { order: 4; margin: var(--space-2) 0 var(--space-5); font-size: var(--text-xs); line-height: 1.5; color: var(--color-ink-muted); } [data-page='home'] .price-card .btn { order: 5; margin-top: auto; justify-content: center; min-height: 48px; } /* Пятая карточка — разовые услуги: другой тип покупки, без подписки. В ряду из пяти она висела сиротой, поэтому уходит в широкую полосу. Блок обязан стоять ПОСЛЕ правил .price-card: специфичность одинаковая, решает порядок — выше по файлу display: grid проигрывал флексу. */ @media (min-width: 1000px) { [data-page='home'] .price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } [data-page='home'] .price-card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.7fr) auto; align-items: center; column-gap: clamp(1.5rem, 3vw, 3rem); background: var(--color-bridge); border-color: transparent; } [data-page='home'] .price-card-wide::before { display: none; } [data-page='home'] .price-card-wide .price { grid-column: 1; margin: 0 0 var(--space-1); } [data-page='home'] .price-card-wide h3 { grid-column: 1; margin: 0; min-height: 0; } [data-page='home'] .price-card-wide .price-note { grid-column: 1; margin: var(--space-2) 0 0; } [data-page='home'] .price-card-wide .price-includes { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: var(--space-3); padding: 0 0 0 clamp(1.5rem, 3vw, 3rem); border-top: 0; border-inline-start: 1px solid var(--color-border-strong); } [data-page='home'] .price-card-wide .price-includes li { margin: 0; } [data-page='home'] .price-card-wide .btn { grid-column: 3; grid-row: 1 / span 3; margin: 0; white-space: nowrap; } } /* ============================================================ 02 — Состав пакета: приложение к договору, а не сетка плиток ============================================================ Девять одинаковых коробок были ровно тем, за что страницу и ругали. Разграфлённый список в две колонки с номерами на полях — фактура документа, и она нигде больше на странице не повторяется. */ [data-page='home'] .check-grid { display: grid; grid-template-columns: 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); margin-block: var(--space-6); padding: 0; list-style: none; counter-reset: pkg; border-top: 1px solid var(--color-border); } @media (min-width: 760px) { [data-page='home'] .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } [data-page='home'] .check-grid li { counter-increment: pkg; position: relative; display: block; margin: 0; padding: var(--space-4) 0 var(--space-4) 3.25rem; border-bottom: 1px solid var(--color-border); font-size: var(--text-base); line-height: 1.5; background: none; } [data-page='home'] .check-grid li svg { display: none; } [data-page='home'] .check-grid li::before { content: counter(pkg, decimal-leading-zero); position: absolute; inset-inline-start: 0; top: var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: var(--color-accent); } /* ============================================================ Врезки ============================================================ Без рамки: коробка вокруг коробки утяжеляла страницу. Осталась вертикальная линейка цветом смысла и тёплая подложка. */ /* Врезка тянулась во всю ширину контейнера, а текст внутри упирался в старую меру 68ch при 16px — 650px в плашке шириной 1096. Внутри блока возникала та же дыра, что и в основном тексте. Ширина плашки приведена к правому краю колонки текста, кегль поднят до 18px. */ [data-page='home'] .callout { border: 0; border-inline-start: 3px solid var(--color-ink-muted); border-radius: 0; background: var(--color-bridge); padding: var(--space-5); max-width: 60rem; } [data-page='home'] .callout p:not(.callout-title) { font-size: var(--text-lg); line-height: 1.6; max-width: 76ch; } [data-page='home'] .callout-title { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--space-3); } [data-page='home'] .callout-title svg { width: 18px; height: 18px; } [data-page='home'] .callout p:not(.callout-title) { color: var(--color-ink); } [data-page='home'] .callout-info { border-inline-start-color: var(--color-accent); } [data-page='home'] .callout-warning { border-inline-start-color: var(--color-danger); } [data-page='home'] .callout-practice { border-inline-start-color: var(--color-flag-yellow); } /* ============================================================ 03 — Ставки 2026: таблица как табло, а не как список ============================================================ Здесь на странице живут самые крупные числа — лимиты дохода. Они уже есть в тексте, им просто не давали работать графикой. */ [data-page='home'] .table-wrap { border: 0; border-radius: 0; background: none; overflow-x: auto; } [data-page='home'] .table-wrap table { font-size: var(--text-base); } [data-page='home'] .table-wrap thead th { background: none; color: var(--color-ink-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.1em; text-transform: uppercase; padding: 0 var(--space-4) var(--space-3); border-bottom: 2px solid var(--color-ink); } [data-page='home'] .table-wrap th, [data-page='home'] .table-wrap td { padding: var(--space-4); border-bottom: 1px solid var(--color-border); } [data-page='home'] .table-wrap tbody th { font-weight: var(--weight-semibold); color: var(--color-ink); white-space: nowrap; } /* Лимит — первая колонка после названия группы. Она и есть число, ради которого предприниматель открыл эту таблицу. */ [data-page='home'] .table-wrap tbody td:first-of-type { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem); font-weight: var(--weight-bold); color: var(--color-ink); white-space: nowrap; } /* Подсветка строки тёплая. Холодный accent-soft на бумажном фоне выглядел как кусок из другого макета: синеватая плашка среди тёплых линеек. */ [data-page='home'] .table-wrap .is-highlight { background: var(--color-bridge); } [data-page='home'] .table-wrap .is-highlight th:first-child { box-shadow: inset 3px 0 0 var(--color-accent); } [data-page='home'] .table-wrap tbody tr:last-child td, [data-page='home'] .table-wrap tbody tr:last-child th { border-bottom: 1px solid var(--color-border); } [data-page='home'] .table-wrap caption { padding: var(--space-3) var(--space-4) 0; color: var(--color-ink-muted); } /* --- Карточки групп --- */ [data-page='home'] .card-grid { gap: var(--space-4); } [data-page='home'] .card { background: var(--color-bg); border: 0; border-top: 2px solid var(--color-ink); border-radius: 0; padding: var(--space-5) 0 0; transition: border-color var(--transition-fast); } [data-page='home'] .card:hover { border-top-color: var(--color-accent); } [data-page='home'] .card h3 { margin-bottom: var(--space-3); font-size: var(--text-lg); } [data-page='home'] .card p { font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-secondary); } [data-page='home'] .card ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; } [data-page='home'] .card li { margin: 0; } [data-page='home'] .card li a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; color: var(--color-ink); } [data-page='home'] .card li a::after { content: '→'; color: var(--color-accent); transition: translate var(--transition-fast); } [data-page='home'] .card li a:hover { color: var(--color-accent); } [data-page='home'] .card li a:hover::after { translate: 4px 0; } /* Секция «Кого ми обслуговуємо» стоит на белом листе — карточки групп должны отличаться от него подложкой, иначе сливаются с фоном. */ [data-page='home'] .section:has(#komu) .card { background: var(--color-bg); padding-inline: var(--space-5); padding-bottom: var(--space-5); } /* Четыре группы обязаны стоять в один ряд: это перечисление одного уровня, и четвёртая, упавшая на следующую строку, читается как отдельная категория. Базовый auto-fit с minmax(260px) в контентных 1016px даёт только три колонки — задаём число явно. */ @media (min-width: 1000px) { [data-page='home'] .section:has(#komu) .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ============================================================ 04 — Дистанционная работа: тёмная полоса ============================================================ */ /* Кружки шагов светлые, а не жёлтые: четыре жёлтых круга на тёмной полосе — это уже не акцент, а заливка символикой (потолок 5% площади). */ [data-page='home'] .section:has(#dystantsiino) .steps > li::before { background: var(--plane-ink); color: var(--plane); } [data-page='home'] .section:has(#dystantsiino) .steps > li:not(:last-child)::after { background: var(--plane-line); } /* Заголовок шага — это p.step-title, а не h3, и врезки в этой секции нет. Правила под .steps h3 и .callout здесь ничего не находили. */ [data-page='home'] .section:has(#dystantsiino) .step-title { color: var(--plane-ink); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: -0.012em; } /* ============================================================ 05 — Маршрут: крупная колонцифра как водяной знак ============================================================ */ [data-page='home'] .section:has(#marshrut) .card-grid { counter-reset: route; } [data-page='home'] .section:has(#marshrut) .card { counter-increment: route; position: relative; overflow: hidden; background: var(--color-surface); border-top-color: var(--color-accent); padding: var(--space-5); } [data-page='home'] .section:has(#marshrut) .card::before { content: counter(route, decimal-leading-zero); position: absolute; top: var(--space-2); inset-inline-end: var(--space-4); font-size: 4.5rem; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.05em; line-height: 1; color: var(--color-ink); opacity: 0.06; pointer-events: none; } /* ============================================================ 06 — FAQ: разграфлённый список без коробок ============================================================ */ [data-page='home'] .faq { display: block; border-top: 1px solid var(--color-border); } [data-page='home'] .faq-item { background: none; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; padding: 0; } [data-page='home'] .faq-item summary { padding-block: var(--space-5); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.35; letter-spacing: -0.015em; transition: color var(--transition-fast); } [data-page='home'] .faq-item summary:hover { color: var(--color-accent); } [data-page='home'] .faq-item[open] summary { color: var(--color-accent); } /* Ответы FAQ — такой же основной текст, как в секциях, поэтому и мера у них общая: иначе под каждым вопросом появляется своя дыра справа. */ [data-page='home'] .faq-item p { font-size: 1.25rem; line-height: 1.6; color: var(--color-ink-secondary); padding-bottom: var(--space-5); max-width: 76ch; } /* ============================================================ Конверсионная лента: цветная плоскость во всю ширину ============================================================ Единственное место, где флаговый синий занимает большую площадь, и он здесь несёт действие, а не украшает. Композиция асимметричная — она не повторяет ни одну секцию выше. */ [data-page='home'] main > .section:has(.cta-band) { background: var(--color-accent); color: var(--color-ink-inverse); } [data-page='home'] .cta-band { background: none; border: 0; border-radius: 0; padding: 0; text-align: start; display: grid; gap: var(--space-5); } /* Колонки неравные: при 1fr/1fr правая получала 508px, а две кнопки просят 510 — и вторая срывалась на новую строку из-за двух пикселей. */ @media (min-width: 900px) { [data-page='home'] .cta-band { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; column-gap: clamp(2.5rem, 5vw, 4rem); } [data-page='home'] .cta-band h2 { grid-row: 1 / span 2; margin: 0; } } [data-page='home'] .cta-band h2 { color: var(--color-ink-inverse); font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; margin: 0; max-width: 16ch; } [data-page='home'] .cta-band p { color: oklch(100% 0 90 / 0.88); font-size: var(--text-lg); line-height: 1.55; max-width: 46ch; margin-inline: 0; margin-bottom: 0; } [data-page='home'] .cta-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-3); margin: 0; } [data-page='home'] .cta-actions .btn { min-height: 52px; padding-inline: var(--space-6); font-size: var(--text-base); } [data-page='home'] .cta-band .btn-primary { background: var(--color-ink-inverse); border-color: var(--color-ink-inverse); color: var(--color-accent); } [data-page='home'] .cta-band .btn-primary:hover { background: var(--color-accent-soft); border-color: var(--color-accent-soft); color: var(--color-accent-hover); } [data-page='home'] .cta-band .btn-secondary { background: transparent; border-color: oklch(100% 0 90 / 0.5); color: var(--color-ink-inverse); } [data-page='home'] .cta-band .btn-secondary:hover { background: oklch(100% 0 90 / 0.12); border-color: var(--color-ink-inverse); color: var(--color-ink-inverse); } /* ============================================================ Читайте також ============================================================ */ /* «Читайте також» и «Джерела» — служебный хвост. Полная секционная отбивка у обоих давала около 200px пустоты подряд между двумя списками ссылок. */ [data-page='home'] main > .section:has(.related) { padding-block: var(--sec-pad) var(--space-6); } [data-page='home'] main > .section:has(.sources) { padding-block: var(--space-6) var(--sec-pad); } [data-page='home'] .related { border-top: 0; padding-top: 0; } [data-page='home'] .related-title { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--space-4); } [data-page='home'] .related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--color-border); } @media (min-width: 760px) { [data-page='home'] .related ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); } } [data-page='home'] .related li { margin: 0; } [data-page='home'] .related a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; background: none; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-ink); text-decoration: none; text-wrap: pretty; } [data-page='home'] .related a::after { content: '→'; color: var(--color-accent); flex: none; transition: translate var(--transition-fast); } [data-page='home'] .related a:hover { color: var(--color-accent); } [data-page='home'] .related a:hover::after { translate: 4px 0; } /* ============================================================ Джерела ============================================================ */ /* Селектор длинный намеренно: правило кегля выше бьёт по `main > .section h2` и по специфичности выигрывает у короткого `.sources h2` — «Джерела» рендерились сорок четвёртым кеглем. */ [data-page='home'] main > .section .sources h2 { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-muted); margin-bottom: var(--space-4); } [data-page='home'] .sources ol { font-size: var(--text-sm); line-height: 1.6; } @media (prefers-reduced-motion: reduce) { [data-page='home'] .card li a:hover::after, [data-page='home'] .related a:hover::after { translate: none; } } /* ============================================================ Контакты ============================================================ */ [data-page='kontakty'] .contact-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 900px) { [data-page='kontakty'] .contact-layout { grid-template-columns: 3fr 2fr; } } [data-page='kontakty'] .contact-info { font-size: 1.125rem; margin-bottom: 1.5rem; } [data-page='kontakty'] .contact-email { display: inline-flex; align-items: center; gap: var(--space-2); } /* ============================================================ 404 ============================================================ */ [data-page='404'] .section { text-align: center; } [data-page='404'] p { margin-inline: auto; }