/* ═══════════════════════════════════════════════════════════════════════════ ОФОРМЛЕНИЕ ПО ОБРАЗЦУ. 31.08.2026. Фаундер выбрал baton.com: «Хочу практически такой же, но с другим содержимым. Нравится всё: от колористической гаммы и шрифтов до концепции и фото. Центральное панно — городской пейзаж Лиссабона, в том же стиле, с движущимися людьми и горожанами.» ЧИСЛА И ЦВЕТА СНЯТЫ С ЖИВОГО САЙТА, а не описаны по памяти: фон #FAF8F7 текст #2E2F34 светлая полоса #F0F4EA тёмная полоса #1F625C и #217A75 кнопка #CD4A01, углы прямые заголовок 67 px, начертание 700, гарнитура без засечек Файл идёт ПОСЛЕ site.css и переопределяет то, что меняется. Так видно, что именно пришло от образца, и это можно отменить одной строкой. ═══════════════════════════════════════════════════════════════════════════ */ /* ── ОСНОВА ─────────────────────────────────────────────────────────────── Образец набран одной гарнитурой без засечек. Переводим на неё всё, кроме сплошного текста правовых страниц: там длинные абзацы, и засечка держит строку лучше. */ /* Строка тела 30, а не 28: рельс проекта построен на 30, и отбивки 30/60/90/120 обязаны быть ей кратны. */ body { background: var(--paper); color: var(--ink); font: 400 19px/32px var(--sans); letter-spacing: -0.01em; } h1, h2, h3, .lede, .punch, .wordmark, .person__name, .notes__t, .tier__price, .doc__head h1 { font-family: var(--sans); } h1 { font: 700 clamp(46px, 5vw, 70px)/1.06 var(--sans); letter-spacing: -0.02em; } h2, .screen h2, .doc__body h2 { font: 700 clamp(32px, 2.8vw, 42px)/1.15 var(--sans); letter-spacing: -0.01em; } .wordmark { font: 700 23px/32px var(--sans); letter-spacing: -0.01em; } /* Сплошной текст условий и приватности остаётся засечным. */ .doc__body p, .doc__body li, .plain, .facts dd { font-family: var(--serif); } /* ── ПАННО: фотография во всю ширину, текст поверх ──────────────────────── Прежняя конструкция ставила текст слева, а кадр отдельной колонкой справа. У образца иначе: снимок занимает всё окно, текст лежит на нём. */ .hero { position: relative; padding: 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } /* Замер образца 31.08: панно baton.com занимает 900 точек при окне 900, то есть ВЕСЬ экран, и шапка лежит поверх него. У нас было 660 — отсюда «панно не такого размера». */ .hero > .band { position: relative; z-index: 2; width: 100%; padding-top: var(--sp-4); padding-bottom: var(--sp-4); } .hero__media { position: absolute; inset: 0; min-height: 0; z-index: 0; } .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Растяжка нужна не для красоты. Белый текст на фотографии даёт непредсказуемый контраст: на светлом небе он исчезает. Растяжка гарантирует тёмную подложку под текстом при любом кадре. */ .hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(20,26,24,.88) 0%, rgba(20,26,24,.74) 38%, rgba(20,26,24,.28) 68%, rgba(20,26,24,.10) 100%), linear-gradient(180deg, rgba(20,26,24,.42) 0%, rgba(20,26,24,0) 40%); } /* display НЕ переопределяем: site.css ставит здесь flex, и на нём держатся девятнадцать правил порядка блоков «кнопка выше сгиба». Строка display:block делала их все мёртвыми — проверено через getComputedStyle, было block вместо flex. */ .hero__text { max-width: 740px; padding: 0; } .hero__text h1 { color: #FFFFFF; } .hero__text .lede { color: #FFFFFF; font: 400 clamp(23px, 2.3vh, 30px)/1.44 var(--sans); margin-top: var(--sp-1); max-width: 46ch; opacity: .92; } .hero__text .punch{ color: #FFFFFF; font: 500 clamp(19px,1.5vw,22px)/1.5 var(--sans); margin-top: var(--sp-half); border: 0; padding: 0; max-width: 46ch; } .hero__text .who { color: #FFFFFF; font: 400 18px/26px var(--sans); margin-top: var(--sp-1); opacity: .82; max-width: 52ch; } .hero__text .btn { margin-top: var(--sp-2); } /* ── КНОПКА: оранжевая заливка, прямые углы ────────────────────────────── Оранжевый только заливкой. Текстом по листу он даёт 4,33:1, то есть ниже порога 4,5. Белым по нему — 4,59:1, проходит. */ .btn { background: var(--accent); color: #FFFFFF; border: 0; font: 700 18px/1 var(--sans); letter-spacing: 0.06em; min-height: 56px; padding: 0 28px; text-decoration: none; border-radius: var(--radius); } .btn:hover { background: #B03F00; } /* ── БЛОК ЗАКАЗА ПОД ПАННО ─────────────────────────────────────────────── У образца действие живёт и на панно, и отдельным блоком ниже. Форма переехала сюда: на панно осталась кнопка, ведущая к ней. */ .screen--form { background: var(--ground); } .startbox { max-width: 620px; } .startbox h2 { margin-bottom: var(--sp-1); } /* ── ПОЛОСЫ РАЗДЕЛОВ ───────────────────────────────────────────────────── Ритм образца: белая, тёплая, бледно-зелёная, тёмно-бирюзовая. Это и даёт ощущение собранного сайта, а не сваленных блоков. */ .screen { background: var(--paper); } .screen--deep { background: var(--deep); color: #FFFFFF; } .screen--deep h2, .screen--deep .lede-sm { color: #FFFFFF; } /* ── КАРТОЧКИ И ТАБЛИЦЫ ──────────────────────────────────────────────── */ .tier { background: var(--card); padding: var(--sp-2); border: 1px solid var(--rule-hair); } .tier__price { font: 700 42px/1.1 var(--sans); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; } .tbl th { color: var(--muted); font-family: var(--sans); } .tbl td { font: 400 18px/28px var(--sans); } .tbl tbody tr:hover { background: var(--ground); } /* Таблица индекса рынка печатает машинные имена полей вида `states_years_left_on_lease`. Слово без пробелов не переносится и держит таблицу шире экрана: на 320 точках страница вылезала на 24. Разрешаем переносить в любом месте — данные видны целиком, без бокового смыка. */ .tbl th, .tbl td { overflow-wrap: anywhere; } /* ── ССЫЛКИ ────────────────────────────────────────────────────────────── Текстом идёт бирюза (7,09:1), а не оранжевый: оранжевый текстом порог не проходит. */ a { color: var(--link); } .nav a, .langs a, .doc__body a, .foot__col a { color: var(--ink); } .doc__body a { color: var(--link); } /* ── ПОЛЕ ВВОДА ───────────────────────────────────────────────────────── Белое поле на тёплом листе — единственное чисто белое пятно в форме, поэтому взгляд сам находит, куда писать. */ .field input { background: var(--card); border: var(--field-border); } .field input:focus { box-shadow: inset 0 0 0 1.5px var(--ink); } /* ── ПОДВАЛ ───────────────────────────────────────────────────────────── У образца подвал тёмный. Берём глубокую бирюзу: белым по ней 7,09:1. */ .foot { background: var(--deep); color: #FFFFFF; border-top: 0; margin-top: 0; padding-top: var(--sp-3); padding-bottom: var(--sp-3); } .foot__t { color: rgba(255,255,255,.66); } .foot__col a { color: #FFFFFF; } .foot__line { color: rgba(255,255,255,.66); } /* ── ТЕЛЕФОН ──────────────────────────────────────────────────────────── На узком экране растяжка идёт снизу вверх: текст встаёт под кадром, и слева его подпирать нечем. */ @media (max-width: 1023px) { .hero { min-height: 0; padding: 0; } .hero > .band { padding-top: var(--sp-3); padding-bottom: var(--sp-3); } .hero__veil { background: linear-gradient(180deg, rgba(20,26,24,.34) 0%, rgba(20,26,24,.82) 46%, rgba(20,26,24,.92) 100%); } .hero__text { max-width: none; } } /* ── НИЗКИЙ ЭКРАН ──────────────────────────────────────────────────────── Замер 31.08: на 1366×660 кнопка панно вставала на 670 — десять точек за сгибом. Ужимаем отбивки панно и высоту: заголовок, обещание и действие обязаны помещаться без прокрутки. */ @media (max-height: 760px) and (min-width: 1024px) { .hero { min-height: 0; } .hero > .band { padding-top: var(--sp-2); padding-bottom: var(--sp-2); } .hero__text .who { display: none; } /* уезжает: ниже оно повторено */ .hero__text .btn { margin-top: var(--sp-1); } } /* ═══ СТРАНИЦА ТАРИФОВ ПО ОБРАЗЦУ baton.com/pricing ═══════════════════════ Устройство образца, снятое со страницы: строчка-надзаголовок · крупный заголовок · пояснение · ДВЕ КАРТОЧКИ рядом, у второй пометка «самый популярный» · ниже большая таблица С ГРУППАМИ СТРОК · вопросы-ответы. */ .eyebrow { font: 600 17px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-1); } .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap); margin-top: var(--sp-2); align-items: start; } .plan { background: var(--card); border: 1px solid var(--rule-hair); padding: var(--sp-2); position: relative; } .plan--pop { border: 2px solid var(--deep); } .plan__badge { position: absolute; top: -13px; left: var(--sp-2); background: var(--deep); color: #FFFFFF; font: 600 18px/28px var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 0 12px; } .plan__name { font: 600 19px/1.3 var(--sans); color: var(--muted); } .plan__price { font: 700 clamp(40px,3.4vw,54px)/1.05 var(--sans); letter-spacing: -0.02em; margin-top: var(--sp-half); font-variant-numeric: lining-nums tabular-nums; } .plan__unit { font: 400 18px/1.4 var(--sans); color: var(--muted); margin-top: 4px; } .plan__lede { margin-top: var(--sp-1); font: 400 18px/28px var(--sans); } .plan__list { list-style: none; padding: 0; margin: var(--sp-1) 0 0; } .plan__list li { padding: 8px 0 8px 26px; position: relative; font: 400 18px/26px var(--sans); border-top: 1px solid var(--rule-hair); } .plan__list li::before { content: "✓"; position: absolute; left: 0; top: 8px; color: var(--deep); font-weight: 700; } .plan .btn { margin-top: var(--sp-2); width: 100%; } .plan__note { margin-top: var(--sp-half); font: 400 17px/22px var(--sans); color: var(--muted); } /* Таблица с группами: строка-группа набирается как надзаголовок. */ .tbl--cmp tr.grp th, .tbl--cmp tr.grp td { background: var(--ground); font: 600 18px/28px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); border-top: 2px solid var(--deep); } .tbl--cmp td { text-align: center; } .tbl--cmp th[scope="row"] { text-align: left; font-weight: 400; color: var(--ink); } .tbl--cmp .yes { color: var(--deep); font-weight: 700; } /* Вопросы-ответы: раскрывающиеся строки, как у образца. */ .faq { margin-top: var(--sp-2); border-top: 1px solid var(--rule-hair); } .faq details { border-bottom: 1px solid var(--rule-hair); } .faq summary { cursor: pointer; padding: var(--sp-1) 0; font: 600 19px/28px var(--sans); list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; float: right; color: var(--deep); font-weight: 700; } .faq details[open] summary::after { content: "–"; } .faq p { padding-bottom: var(--sp-1); max-width: 72ch; font: 400 18px/28px var(--sans); } /* ═══ РЯД ФОТОГРАФИЙ ОТРАСЛЕЙ ════════════════════════════════════════════ Фаундер: «хочу, чтобы мы разбавляли текст картинками разных отраслей бизнеса из разных уголков мира». Ряд карточек, как у образца на странице продажи бизнеса: четыре кадра 340×364 в строку. */ /* ═══ ВЫСОТА КАДРА ВСЕГДА СВОБОДНА ═══════════════════════════════════════ Пойман фаундером 31.08 (скриншот ряда отраслей): кадр «Пошив» на 152 точки выше соседей, подписи из-за этого на разной высоте. Откуда взялось. Сборка стала писать в разметку НАСТОЯЩИЕ размеры кадров — и атрибут height у картинки действует как указание браузеру наравне со стилями. Кадр с настоящей высотой 1219 стал высотой 1219 точек, сосед с 1067 — 1067. А правило пропорции 4/5 молча отключилось: оно действует только пока высота свободна. Пока у всех кадров стояло одинаковое ВЫДУМАННОЕ число, ряд был ровным — размеры врали, но врали хором. Честные размеры и вскрыли дыру. Лечение: высоту всегда отдаём потоку. Атрибуты остаются в разметке — по ним браузер резервирует прямоугольник до загрузки кадра, прыжка макета нет. А видимую высоту задают только правила пропорций. Кому нужна высота от родителя (панно, кадр в duo) — те задают её своим правилом, оно точнее и побеждает. */ img { height: auto; } .trades { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); margin-top: var(--sp-2); } .trade { background: var(--card); } .trade img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; } .trade__cap { padding: var(--sp-1); font: 400 18px/24px var(--sans); } .trade__cap b { display: block; font: 600 18px/26px var(--sans); margin-bottom: 2px; } /* Широкий кадр внутри раздела: текст слева, снимок справа. */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: center; margin-top: var(--sp-2); } .split img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .split--flip .split__text { order: 2; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--sp-2); } .split--flip .split__text { order: 0; } } /* ═══ БЛОК «ФОТОГРАФИЯ + ДВЕ КАРТОЧКИ» ═══════════════════════════════════ Фаундер прислал снимок блока «We bring buyers and sellers together» с baton.com и попросил такое же оформление для выбора тарифа. Устройство образца, снятое со снимка: полоса-фотография со скруглением, поверх неё мелкий надзаголовок и крупный белый заголовок по центру, а две БЕЛЫЕ карточки заходят на нижний край снимка. У каждой карточки сверху квадратный значок, под ним мелкая надпись, зелёный заголовок, три коротких строки и кнопка с оранжевым контуром. Скругление здесь отступает от общего правила «радиус 0»: у образца углы скруглены, и фаундер просил «один в один». Отступление живёт только внутри этого блока. */ .duo { position: relative; margin-top: var(--sp-2); } .duo__media { position: relative; border-radius: 18px; overflow: hidden; min-height: 420px; } .duo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .duo__veil { position: absolute; inset: 0; background: rgba(20,26,24,.46); } .duo__head { position: relative; z-index: 2; text-align: center; padding: var(--sp-3) var(--sp-2) 200px; } .duo__eyebrow { font: 600 18px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.82); } .duo__title { font: 700 clamp(30px,3vw,44px)/1.18 var(--sans); color: #FFFFFF; letter-spacing: -0.01em; margin-top: var(--sp-1); max-width: 20ch; margin-left: auto; margin-right: auto; } .duo__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); margin-top: -170px; position: relative; z-index: 3; padding: 0 var(--sp-2); } .duo__card { background: var(--card); border-radius: 14px; padding: var(--sp-3) var(--sp-2) var(--sp-2); text-align: center; position: relative; box-shadow: 0 2px 18px rgba(20,26,24,.10); /* Столбец, а не поток: кнопка прижимается к общей нижней линии, а не к своему тексту. Фаундер 31.08 (второй раз): текст в карточках разной длины, и кнопки стояли на разной высоте. Сетка равняет карточки, столбец равняет кнопки. */ display: flex; flex-direction: column; } .duo__icon { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: var(--ground); box-shadow: 0 2px 10px rgba(20,26,24,.10); } .duo__kicker { font: 600 18px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .duo__name { font: 700 clamp(26px,2.2vw,34px)/1.2 var(--sans); color: var(--deep); margin-top: var(--sp-half); letter-spacing: -0.01em; } .duo__price { font: 700 42px/1.1 var(--sans); color: var(--ink); margin-top: var(--sp-half); font-variant-numeric: lining-nums tabular-nums; } .duo__card p { margin-top: var(--sp-1); font: 400 18px/28px var(--sans); } .duo__card p b { font-weight: 700; } .btn--ghost { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); border-radius: 999px; font: 600 17px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; min-height: 48px; padding: 0 24px; } .btn--ghost:hover { background: var(--accent); color: #FFFFFF; } .duo__card .btn { margin-top: auto; align-self: center; } /* Наименьшая отбивка между текстом и кнопкой живёт на тексте: margin-top: auto съедает любую отбивку сверху на самой кнопке. */ .duo__card p:last-of-type { margin-bottom: var(--sp-2); } @media (max-width: 860px) { .duo__head { padding-bottom: var(--sp-3); } /* minmax(0, 1fr), а не 1fr: у колонки `1fr` нижняя граница равна ширине самого длинного неразрывного содержимого, и на 320 точках блок вылезал на 28. Нашлось на немецком, где длинные слова — норма; правило нужно всем языкам. Тот же случай, что и с сеткой `.facts` 01.09.2026. */ .duo__cards { grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-2); padding: 0; } .duo__media { min-height: 260px; } } /* Действия в блоке кабинета: две кнопки в ряд. */ .startbox__acts { display: flex; flex-wrap: wrap; gap: var(--gap); margin-top: var(--sp-2); align-items: center; } /* ═══ СТРАНИЦА РАСШИРЕНИЯ ════════════════════════════════════════════════ */ .steps { counter-reset: st; list-style: none; padding: 0; margin-top: var(--sp-2); } .steps li { counter-increment: st; position: relative; padding: var(--sp-1) 0 var(--sp-1) 56px; border-top: 1px solid var(--rule-hair); font: 400 19px/30px var(--sans); } .steps li::before { content: counter(st); position: absolute; left: 0; top: var(--sp-1); width: 34px; height: 34px; border-radius: 50%; background: var(--deep); color: #FFFFFF; font: 700 18px/36px var(--sans); text-align: center; } .notice { border-left: 3px solid var(--accent); padding: var(--sp-1) 0 var(--sp-1) var(--gap); margin-top: var(--sp-2); max-width: 72ch; background: var(--ground); } .notice b { color: var(--accent); font-weight: 700; } /* ═══ ТАБЛИЦА СРАВНЕНИЯ: ВЫРАВНИВАНИЕ ════════════════════════════════════ Фаундер: «не отцентрована и выглядит несимметрично». ПРИЧИНА, найденная в вёрстке: таблице не задана раскладка колонок. Браузер раздаёт ширину по содержимому — первая колонка ужимается и рвёт заголовки строк надвое, вторая выходит узкой, третья и четвёртая широкими. Плюс vertical-align: top при разной высоте рядов даёт рваный низ, а короткая линейка под первой колонкой выглядит обрывом. ЛЕЧИТСЯ: фиксированная раскладка с явными ширинами, выравнивание по середине, одинаковая линейка на всю ширину ряда. */ .tbl--cmp { table-layout: fixed; width: 100%; min-width: 860px; } .tbl--cmp col.c1 { width: 34%; } .tbl--cmp col.cx { width: 22%; } .tbl--cmp th, .tbl--cmp td { vertical-align: middle; padding: 14px var(--gap); border-top: 1px solid var(--rule-hair); border-bottom: 0; text-align: center; } .tbl--cmp th[scope="row"] { text-align: left; font-weight: 400; color: var(--ink); font: 400 18px/26px var(--sans); } .tbl--cmp thead th { border-top: 0; padding-bottom: 10px; font: 700 22px/1.2 var(--sans); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; } .tbl--cmp thead th:first-child { text-align: left; } /* Строка-группа: одна плашка во всю ширину, а не четыре разных ячейки. */ .tbl--cmp tr.grp th, .tbl--cmp tr.grp td { background: var(--ground); border-top: 2px solid var(--deep); font: 600 18px/24px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); padding-top: 16px; padding-bottom: 16px; } .tbl--cmp tr.grp th[scope="row"] { font-weight: 700; } /* «Да» — знаком, а не словом: глаз считывает столбец за один проход. */ .tbl--cmp td.yes { color: var(--deep); font-weight: 700; font-size: 22px; } .tbl--cmp td.no { color: var(--muted); } @media (max-width: 900px) { .tbl--cmp th, .tbl--cmp td { padding: 12px 10px; } .tbl--cmp th[scope="row"] { font-size: 18px; } } /* ═══ ПОЛОСЫ РАЗДЕЛОВ: ПОЧИНКА ═══════════════════════════════════════════ 🔴 ДЕФЕКТ, найденный аудитом 31.08 и проверенный через getComputedStyle: бледно-зелёная полоса не появлялась НИ РАЗУ. Правило .screen объявлено ниже .screen--form, вес у обоих одинаковый (0,1,0) — побеждает то, что стоит позже. По факту чередовались #FAF8F7 и #FFFFFF: разница в светлоте 1,3 %, глаз её не берёт. Отсюда и ощущение «сайт сырой»: пять разделов подряд одинакового веса на одном фоне через одинаковые 240 точек. Плюс :nth-of-type считал ВСЕ section подряд, а не только .screen — вставка одного раздела меняла местами все полосы. ЛЕЧИТСЯ: полоса задаётся КЛАССОМ, а не порядком тегов. */ .screen { background: var(--paper); border-top: 0; } .screen--form { background: var(--ground); } .screen--tint { background: var(--card); box-shadow: inset 0 1px 0 var(--rule-hair), inset 0 -1px 0 var(--rule-hair); } .screen--deep { background: var(--deep); color: #FFFFFF; } .screen--deep h2, .screen--deep .lede-sm, .screen--deep .five strong, .screen--deep .five b { color: #FFFFFF; } .screen--deep .small { color: rgba(255,255,255,.72); } .screen--deep .five li { border-bottom-color: rgba(255,255,255,.22); color: rgba(255,255,255,.92); } .screen--deep .five li:hover { background: rgba(255,255,255,.06); } .screen--deep .five .n { color: rgba(255,255,255,.6); } /* ═══ ЗАСЕЧНЫЙ ОСТРОВ ════════════════════════════════════════════════════ «Пять ответов» и ссылки подвала остались набраны Source Serif среди Inter — единственные чужие куски на странице. Проверено: font-family у .five li это "Source Serif 4", у body — Inter. */ .five li, .foot__col a, .steps li, .duo__card p, .faq p, .plain, .facts dd { font-family: var(--sans); } .five li { font: 400 19px/32px var(--sans); } .foot__col a { font: 400 18px/32px var(--sans); } /* ═══ ОДНА КНОПКА — ОДНА ФОРМА ══════════════════════════════════════════ Рядом стояли кнопка 56 точек с прямыми углами и «пилюля» 48 точек со скруглением 999. Это две разные системы в одном ряду. */ .btn, .btn--ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border-radius: 0; font: 700 18px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; } .btn--ghost { background: transparent; color: #A03A00; border: 1.5px solid #A03A00; } .btn--ghost:hover { background: #A03A00; color: #FFFFFF; } /* Оранжевый текстом: #CD4A01 даёт 4,33:1, ниже порога 4,5. #A03A00 по листу — 6,2:1, проходит. Заливка кнопки остаётся #CD4A01. */ .notice b, .plain b, .person__role, .door summary { color: #A03A00; } /* ═══ МЕРА СТРОКИ ═══════════════════════════════════════════════════════ На странице расширения шаги шли во всю полосу 1128 — это 130 знаков в строке, читать нельзя. */ .steps li, .faq p, .notice p { max-width: 66ch; } .steps li { max-width: calc(66ch + 56px); } /* ═══ ВОЗДУХ ════════════════════════════════════════════════════════════ Отбивка была одинаковой между любыми двумя разделами: 120 сверху и 120 снизу, пять раз подряд. Связь между разделами не выражалась ничем. */ .screen { padding-top: var(--sp-3); padding-bottom: var(--sp-3); } .screen--open { padding-top: var(--sp-4); } .duo__cards { gap: var(--sp-2); } /* ═══ ЗАГОЛОВКИ БИРЮЗОЙ, КАК У ОБРАЗЦА ═══════════════════════════════════ Замер baton.com: заголовки и подводки на светлом набраны #1F625C, а не чёрным. У нас стояло #2E2F34. Это одно из главных отличий, которое читается как «не похоже на образец». */ h1, h2, h3, .screen h2, .doc__body h2, .doc__head h1 { color: var(--head); } .hero__text h1, .screen--deep h2, .screen--deep h3, .duo__title { color: #FFFFFF; } /* ═══ ЗАГОЛОВОК ПРАВОВЫХ СТРАНИЦ ════════════════════════════════════════ Было 60 на 60: межстрочное равно кеглю, и двухстрочный заголовок склеивался на шести страницах. Проверено на «Условиях». */ .doc__head h1 { font: 700 clamp(38px, 3.9vw, 54px)/1.15 var(--sans); letter-spacing: -0.02em; } /* ═══ НАДПИСЬ НА КНОПКЕ ══════════════════════════════════════════════════ Фаундер прислал снимок: заливка есть, надписи нет. Цвет задаётся ЯВНО здесь, в последнем блоке про кнопки, а не наследуется из более раннего правила, которое легко перебить любой добавленной строкой. Белым по #CD4A01 — 4,59:1, порог 4,5 пройден. */ .btn, a.btn, button.btn { color: #FFFFFF; } .btn--ghost, a.btn--ghost { color: #A03A00; } .btn:hover, a.btn:hover { color: #FFFFFF; } .btn--ghost:hover, a.btn--ghost:hover { color: #FFFFFF; } /* ═══ ТРИ УРОВНЯ ПАНЕЛИ ══════════════════════════════════════════════════ Ops/87 §2.2: полный разбор · базовый на любой площадке · панель молчит. */ .lvl { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); margin-top: var(--sp-2); } .lvl__card { background: var(--card); border: 1px solid var(--rule-hair); padding: var(--sp-2); } .lvl__where { font: 600 18px/1.2 var(--sans); letter-spacing: .06em; text-transform: none; color: var(--muted); } .lvl__name { font: 700 23px/1.25 var(--sans); color: var(--head); margin-top: 6px; } .lvl__card p:last-child { margin-top: var(--sp-1); font: 400 18px/28px var(--sans); } .screen--deep .lvl__card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); } .screen--deep .lvl__name { color: #FFFFFF; } .screen--deep .lvl__where { color: rgba(255,255,255,.66); } /* Перечень «чего панель не делает»: не галочки, а прочерки. */ .nolist { list-style: none; padding: 0; margin-top: var(--sp-2); } .nolist li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--rule-hair); font: 400 19px/30px var(--sans); max-width: 72ch; } .nolist li::before { content: "\2014"; position: absolute; left: 0; top: 12px; color: var(--muted); } /* Пары «что — почему» на тёмной полосе. */ .screen--deep .facts dt { color: rgba(255,255,255,.72); border-top-color: rgba(255,255,255,.2); } .screen--deep .facts dd { color: #FFFFFF; border-top-color: rgba(255,255,255,.2); } .screen--deep .steps li { border-top-color: rgba(255,255,255,.2); color: rgba(255,255,255,.92); } .screen--deep .nolist li { border-top-color: rgba(255,255,255,.2); color: rgba(255,255,255,.92); } /* ═══ КНОПКА НА ПАННО: МЕСТО И ШИРИНА ════════════════════════════════════ 🔴 Регресс, который увидел фаундер: кнопка встала НАД заголовком и растянулась во всю ширину колонки. Причина. site.css делает .hero__text флексом и раздаёт порядок: h1 = 1, подзаголовок = 2, ударная = 3, «кто читает» = 4, форма = 5. Эти правила писались под ПРЕЖНЕЕ панно, где действие жило внутри формы. Кнопки в списке нет — значит у неё порядок 0, то есть первая. А флекс-ребёнок по умолчанию растягивается на всю поперечную ось. Пока .hero__text ошибочно был block, этого не было видно: порядок не действовал вовсе. Починил display — вылез порядок. */ .hero__text .btn { order: 4; /* после ударной строки, перед «кто читает» */ align-self: flex-start; /* по содержимому, а не во всю ширину */ width: auto; } .hero__text .who { order: 5; } /* На низком экране «кто читает» уезжает, кнопка остаётся сразу под ударной строкой. */ @media (max-height: 760px) and (min-width: 1024px) { .hero__text .btn { order: 4; margin-top: var(--sp-1); } } /* ═══ ШАПКА ПО ОБРАЗЦУ ═══════════════════════════════════════════════════ Фаундер: «Что за ужасная шапка? Что это за линия с точкой? Где наш логотип? Сделай точь в точь как у образца и чтобы шапка двигалась вместе со скролом». ЗАМЕР baton.com, снят с живого сайта: положение fixed, top 0 высота 88 точек фон #FFFFFF тень rgba(0,0,0,.2) 2px 2px 15px логотип надпись 114×34 слева На первом экране шапка прозрачная поверх фотографии, а как только панно прокручено — становится белой с тенью. ЧТО УБРАНО. Дуга с точкой («росчерк фирмы») читалась как дефект вёрстки, а не как знак. Вместо неё — наша настоящая круглая эмблема с мостом и буквами PD, которая уже стоит фавиконом на проде. */ .top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 88px; display: flex; align-items: center; background: transparent; border: 0; padding: 0; transition: background 220ms ease, box-shadow 220ms ease; } .top .band { width: 100%; } .top .row { display: flex; align-items: center; gap: var(--sp-2); justify-content: space-between; } /* ── ЗНАК ФИРМЫ ─────────────────────────────────────────────────────── */ .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; } .brand__mark { width: 40px; height: 40px; display: block; border-radius: 50%; } .brand__name { font: 700 23px/1.2 var(--sans); letter-spacing: -0.01em; white-space: nowrap; } /* ── МЕНЮ И ДЕЙСТВИЯ ────────────────────────────────────────────────── */ .top .nav { display: flex; gap: 22px; flex-wrap: nowrap; } .top .nav a { font: 700 19px/1.2 var(--sans); white-space: nowrap; text-decoration: none; } .acts { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; } .langs { position: relative; display: flex; align-items: center; } .langs__off, .langs__on { font: 500 18px/1.2 var(--sans); min-width: 0; } .btn--sm { min-height: 40px; padding: 0 18px; font: 700 18px/1 var(--sans); } /* ── НАД ПАННО: прозрачная, надписи белые ───────────────────────────── */ .top--over .brand__name, .top--over .nav a, .top--over .langs__btn { color: #FFFFFF; } .top--over .brand__mark { box-shadow: 0 0 0 1px rgba(255,255,255,.35); } /* ── ПРОКРУЧЕНО: белая с тенью, надписи тёмные ──────────────────────── */ .top--solid { background: var(--card); box-shadow: rgba(0,0,0,.12) 0 2px 15px; } .top--solid .brand__name { color: var(--head); } .top--solid .nav a, .top--solid .langs__btn { color: var(--ink); } /* Панно уходит под шапку целиком, как у образца. Страницы без панно получают отступ ровно в высоту шапки. */ .hero { margin-top: -88px; padding-top: 88px; } .doc { padding-top: calc(88px + var(--sp-3)); } @media (max-width: 1439px) { .top { height: 72px; } .hero { margin-top: -72px; padding-top: 72px; } .doc { padding-top: calc(72px + var(--sp-2)); } .top .nav { display: none; } /* меню уезжает: связь идёт подвалом */ .brand__name { font-size: 21px; } } /* ═══ ШАПКА: РЯД НЕ ВЛЕЗАЛ В СТРОКУ ══════════════════════════════════════ Замер: ряд шапки 170 точек при высоте 88. Знак 246 + меню 759 + действия 305 = 1310 при ширине полосы 1176. Всё переносилось на три строки — это и была «ужасная шапка» на снимке. Лечится тремя вещами: полоса шапки шире, меню короче, действия не переносятся. */ .top .band { max-width: 1440px; padding-left: 32px; padding-right: 32px; } .top .row { flex-wrap: nowrap; gap: 24px; } .top .nav { gap: 18px; min-width: 0; } .top .nav a { font-size: 18px; } .acts { flex-wrap: nowrap; gap: 14px; } .brand__name { font-size: 21px; } /* ═══ ШАПКА: СТУПЕНИ, КОГДА НЕ ПОМЕЩАЕТСЯ ════════════════════════════════ 🔴 01.09.2026, снимки фаундера: на ru, fr, de, pt меню шире своего блока на 57–132 точки и закрашивало переключатель языка и кнопку. Ряд ограничен 1376 точками при любом окне, а знак + меню на 19px жирным + действия дают до 1569 — не помещается, сколько окно ни тяни. Классы ставит скрипт по замеру (motion.js): сначала прячется надпись у знака, затем меню становится на ступень мельче. Меню НЕ обрезаем и не даём ему переноситься — обе замены хуже. */ .top--tight .brand__name { display: none; } .top--tighter .nav { gap: 14px; } .top--tighter .nav a { font-size: 17px; } /* ═══ ЯЗЫКИ: КНОПКА С РАСКРЫВАЮЩИМСЯ СПИСКОМ ═════════════════════════════ Фаундер 31.08: «Сделай языковую панель в виде меню с раскрывающимся списком. Так мы увеличим пространство в шапке». Ряд из шести языков занимал 195 точек, кнопка занимает около 60 — шапке вернулись ~135. Кнопка показывает ТЕКУЩИЙ язык и галку-уголок. Список выпадает вниз на белой подложке — и над панно тоже: там прозрачная шапка, и полу- прозрачный список поверх фотографии нечитаем. Пункты 44 точки — WCAG 2.2. Переводы не собраны, поэтому пункты пока неактивны; появится файл — строки станут ссылками, вёрстка не изменится. */ .langs__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; min-width: 44px; padding: 4px 8px; margin: 0; border: 0; background: none; cursor: pointer; font: 500 17px/1.2 var(--sans); color: var(--ink); } /* min-width: правило доступности site.css «.langs span { min-width: 44 }» писалось для НАДПИСЕЙ ряда и распирало галку до 24 точек — фаундер увидел её растянутой в косую черту. Галка — не цель нажатия, цель здесь вся кнопка. */ /* Селектор с кнопкой: правило носителя «.langs span» специфичнее голого класса и продолжало распирать галку и красить её в цвет надписей ряда. Цвет наследуем явно — галка всегда одного цвета с буквами кнопки. */ .langs__btn .langs__mark { width: 0; height: 0; flex: 0 0 auto; min-width: 0; color: inherit; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform 200ms cubic-bezier(.22,.61,.36,1); } .langs__btn[aria-expanded="true"] .langs__mark { transform: rotate(180deg); } .langs__list { position: absolute; top: 100%; right: 0; z-index: 30; margin: 0; padding: 6px 0; list-style: none; min-width: 92px; background: var(--card); border-radius: 10px; box-shadow: 0 12px 28px rgba(20,26,24,.18); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; } .langs.open .langs__list { visibility: visible; opacity: 1; transform: none; transition: opacity 180ms ease, transform 180ms ease, visibility 0s; } .langs__off, .langs__on { display: flex; align-items: center; min-height: 44px; padding: 0 18px; } .langs__on { color: var(--ink); font-weight: 700; } .langs__off { color: var(--muted); } .langs__on::after { content: ""; width: 5px; height: 9px; margin-left: auto; border-right: 1.5px solid var(--deep); border-bottom: 1.5px solid var(--deep); transform: rotate(45deg); } @media (prefers-reduced-motion: reduce) { .langs__list, .langs__mark { transition: none !important; } } /* ═══ КНОПКА В ШАПКЕ: ОТБИВКА СВЕРХУ ═════════════════════════════════════ Замер: у кнопки шапки margin-top 30 точек — унаследован от общего правила кнопок, которое писалось для кнопки внутри формы. Из-за неё блок действий вырастал до 70 точек вместо 40, и кнопка стояла на 10 ниже переключателя языков. Это и увидел фаундер. Обнуляем ТОЛЬКО в шапке: в форме и в карточках отбивка нужна. */ .top .btn, .top .acts .btn { margin: 0; } .top .row > * { align-self: center; } .acts { align-items: center; } /* ═══ МЕЛКИЕ ЦЕЛИ В ШАПКЕ ════════════════════════════════════════════════ Проверка геометрии 31.08: ссылки верхнего меню 17 точек высотой на ВСЕХ пятнадцати страницах. Требование WCAG 2.2 (SC 2.5.8) — не меньше 24. Человек с неточным нажатием в них не попадает. Лечится отбивкой: сама надпись не меняется, растёт область нажатия. */ .top .nav a { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 0; } /* ═══ ОТБИВКА КНОПОК В РЯДУ ДЕЙСТВИЙ ═════════════════════════════════════ Тот же дефект, что был в шапке: общее правило кнопок несёт отбивку сверху 30, написанную для кнопки под текстом формы. В ряду из двух кнопок она сдвигает обе вниз и распирает блок. */ .startbox__acts .btn, .startbox__acts .btn--ghost { margin: 0; } /* ═══ МЕНЮ НА УЗКОМ ЭКРАНЕ ═══════════════════════════════════════════════ Проверка геометрии 31.08 на трёх ширинах (390, 768, 1024): у пяти ссылок верхнего меню высота НОЛЬ на всех пятнадцати страницах. Правило `.top .nav { display: none }` уводило меню, а замены ему не было — кнопки меню на сайте не существовало. То есть с телефона верхняя навигация отсутствовала целиком. Отдельно важно: страница «Кто мы» стоит ТОЛЬКО в верхнем меню (слово фаундера 31.08 — «Мне не нужна эта страница снизу. Только сверху!!!»). Значит на телефоне она была недостижима вообще ниоткуда. Лечим кнопкой: три черты, по нажатию меню опускается полосой под шапкой. Не всплывающее окно и не перекрытие всего экрана — читателю видно, где он находится. */ .burger { display: none; width: 44px; height: 44px; padding: 10px; margin: 0; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; } .burger__l { display: block; height: 2px; width: 24px; background: var(--ink); border-radius: 1px; transition: transform 220ms cubic-bezier(.22,.61,.36,1), opacity 160ms ease; } .top--over .burger__l { background: #fff; } /* Крестик: верхняя и нижняя черта сходятся, средняя гаснет. */ .burger[aria-expanded="true"] .burger__l:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] .burger__l:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger__l:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Открытое меню белое, значит и черты крестика тёмные. */ .top--over .burger[aria-expanded="true"] .burger__l { background: var(--ink); } @media (max-width: 1439px) { .burger { display: flex; } /* Меню больше не пропадает: оно закрыто и открывается кнопкой. Держим его в потоке документа, а не в position:fixed — иначе на коротком экране до нижних пунктов не добраться. */ .top .nav { display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); box-shadow: 0 12px 24px rgba(0,0,0,.14); max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 260ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 260ms; } .top .nav.open { max-height: 70vh; overflow-y: auto; visibility: visible; transition: max-height 260ms cubic-bezier(.22,.61,.36,1), visibility 0s; } .top .nav a { color: var(--ink); font-size: 18px; min-height: 48px; padding: 12px 24px; border-bottom: 1px solid var(--rule-hair); } /* Над панно шапка прозрачная и надписи белые — но выехавшее меню лежит на своей белой подложке, и там надпись обязана быть тёмной. */ .top--over .nav a { color: var(--ink); } .top { position: fixed; } .top .band { position: relative; } } /* ═══ ШАПКА НА ТЕЛЕФОНЕ: КНОПКА МЕНЮ УЕЗЖАЛА ЗА ЭКРАН ════════════════════ 🔴 Замер 01.09.2026, ширина 390: ряду шапки нужно 410 точек, а есть 326. Знак 225 + кнопка «Кабинет» 93 + кнопка меню 44 + два отступа по 24. Сжиматься нечему — надпись знака не переносится, обе кнопки заданы размером, — поэтому лишнее выдавливало последнего в ряду: кнопка меню вставала на 52 точки ПРАВЕЕ края экрана. С телефона вся навигация сайта была недоступна, и до правила 14 замер этого не видел. Лечим не выбрасыванием, а сжатием: на узком экране ужимаются поля полосы, отступы ряда, знак и поля кнопки. Ничего не пропадает. */ @media (max-width: 600px) { .top .band { padding-left: 16px; padding-right: 16px; } .top .row { gap: 10px; } .brand { gap: 8px; } .brand__mark { width: 32px; height: 32px; } .brand__name { font-size: 20px; } .top .acts .btn--sm { padding: 0 12px; } } /* СНЯТО 04.09 — ЧЕТВЁРТАЯ по счёту заплатка, прятавшая название фирмы. Здесь оно уходило ниже 400, чтобы дать место кнопке меню. Причина была не в названии, а в кнопке действия, занимавшей ряд: её убрали, и место нашлось. Правило было мёртвым (его перебивало правило телефона ниже), но мёртвое правило, противоречащее слову фаундера, — это мина: хватит переставить блоки местами, и вывеска снова исчезнет. */ /* Страховка от арифметики. Считать ширины в уме — тот же способ, каким дефект и появился: стоит шрифту не загрузиться и подмениться запасным, как ряд снова разопрёт. Поэтому знак получает право сжиматься, а надпись — обрезаться многоточием. Тогда лишнее давит на НАДПИСЬ, а не выдавливает кнопку меню за экран: ряд чинит себя сам при любой ширине и любом шрифте. */ .brand { flex: 0 1 auto; min-width: 0; } .brand__name { overflow: hidden; text-overflow: ellipsis; } /* Настройка «уменьшить движение» выключает и раскрытие меню: оно открывается мгновенно, но открывается. */ @media (prefers-reduced-motion: reduce) { .burger__l, .top .nav { transition: none !important; } } /* Переключатель языков, переехавший в меню (скрипт переставляет узел). */ @media (max-width: 1439px) { /* Кнопка раскрытия здесь не нужна: меню уже выпало, второй ярус раскрытия внутри него только путает. Список лежит плоским рядом. */ .top .nav .langs { padding: 4px 24px 14px; } .top .nav .langs__btn { display: none; } /* Видимость НАСЛЕДУЕТСЯ от выпавшего меню, а не включается намертво: жёсткое visible держало пункты «видимыми» и в закрытом меню — обход геометрии поймал их лежащими под текстом страницы. */ .top .nav .langs__list { position: static; visibility: inherit; opacity: 1; transform: none; box-shadow: none; border-radius: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; } .top .nav .langs__off, .top .nav .langs__on { min-height: 44px; min-width: 44px; justify-content: center; padding: 0 10px; font-size: 18px; } .top .nav .langs__on::after { display: none; } } /* Дословный блок (обещание, поданное в магазин расширений): отчерчен, но не притушен — это обязательство, а не сноска. */ .doc .verbatim { margin-top: var(--sp-1); padding: 4px 0 4px var(--sp-1); border-left: 2px solid var(--deep); } .doc .verbatim p { margin-top: 12px; font: 400 18px/26px var(--sans); } .doc .verbatim p:first-child { margin-top: 0; } /* ═══ ПОЛОСА ПОД ПАННО — ЦВЕТОМ С ПАННО ЭТОЙ СТРАНИЦЫ ════════════════════ Фаундер 31.08: полосу главной — цветом трамвая («замерь цвет»), затем «подкрась полосы на других страницах цветом с их панно». САМ ЦВЕТ здесь не живёт: его меряет сборка по пикселям кадра каждой страницы (band_color в build-site-pages.py) и ставит на секцию строкой style. Замер уже осветлён до читаемости чернил 4,5:1. Здесь — только что происходит с текстом на цветном поле: заголовок и обводная кнопка переводятся в чернила, потому что бирюзовый на янтарном давал 3,1:1 (впритык), а оранжевая обводка сливалась (2,0 при пороге границ 3,0). */ .screen--tram h2, .screen--tram .startbox p { color: var(--ink); } .screen--tram .btn--ghost { color: var(--ink); border-color: var(--ink); } .screen--tram .btn--ghost:hover { background: var(--ink); color: #FFFFFF; } /* ═══ КНОПКИ: ЗАЛИВКА И БЕЛАЯ НАДПИСЬ ═══════════════════════════════════ Фаундер 31.08, после проб с зелёным полем и цветными надписями: «Оставь как раньше кнопки красным, шрифт белым». Возвращён исходный вид — заливка --accent #CD4A01, надпись белая, 4,59:1 (порог 4,5). Пробы никуда не делись, они лежат токенами и включаются одним словом: --tram #CD9015 (трамвай с панно), --tram-lite #F1CA7A (он же читаемый), --flag #DA291C (красный флага Португалии), --flag-lite #F7C5C1. Замеры каждого — в самих токенах. Форма кнопки на цветных полосах: заливка против полосы 2,7–3,3:1 при пороге границ 3,0 — часть полос ниже. Кольцо чернилами оставлено: чернила на полосах гарантированно 4,5, полосы для того и осветлялись при замере. У обводной кнопки своя рамка, ей кольцо не нужно. */ .screen--tram .btn:not(.btn--ghost) { box-shadow: inset 0 0 0 1.5px var(--ink); } /* На цветных полосах обводная кнопка идёт чернилами: оранжевым по полосе 2,0:1 при пороге границ 3,0. */ .screen--tram .btn--ghost, .screen--tram a.btn--ghost { color: var(--ink); border-color: var(--ink); } .screen--tram .btn--ghost:hover, .screen--tram a.btn--ghost:hover { background: var(--ink); color: #FFFFFF; } /* ── Страница цен, третья редакция (02.09.2026, Ops/101): две карточки ── */ .tiers h3 { margin: 40px 0 12px; } .tiers__cards { display: grid; gap: 24px; margin: 32px 0 24px; } /* Тарифов стало три (Custom заведён 06.09.2026 по слову фаундера). На широком экране три колонки, на среднем две — третья карточка тогда встаёт во всю ширину, а не висит сиротой в полстроки. */ @media (min-width: 900px) { .tiers__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tcard:nth-child(3):last-child { grid-column: 1 / -1; } } @media (min-width: 1180px) { .tiers__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tcard:nth-child(3):last-child { grid-column: auto; } } /* 07–08.09.2026, слово фаундера: «блоки узкие и вытянутые, остаётся уйма места на экране; расширить и сделать симметричными с одинаковыми отступами и между блоками, и до краёв» и «таблицу сразу под блоками, остальной текст расширить и поместить после таблицы». Одна ширина на три ряда — карточки, таблица сравнения и текст под ней. Отступ до краёв РАВЕН промежутку между карточками: это одно число. Уменьшен с 96 до 48, иначе карточки остаются узкими, а текст в них растягивается по высоте — на это фаундер и указал. */ @media (min-width: 1180px) { .wide { /* 🔴 100vw считает и полосу прокрутки, которой на экране нет: без поправки ряд выходит на 15 точек шире видимой части и поля становятся неравными. */ --edge: clamp(20px, 2.8vw, 48px); --bar: 17px; --row: min(1760px, calc(100vw - 2 * var(--edge) - var(--bar))); width: var(--row); margin-left: calc(50% - var(--row) / 2); } /* Промежуток между карточками = отступ до краёв: одно число. `--edge` объявлен на `.wide` и наследуется внутрь ряда. */ .wide .tiers__cards { gap: var(--edge); } } /* Карточка — колонка, ряд с кнопкой прижат к низу: у Custom текста меньше, и без этого его кнопка висела бы выше двух остальных. Прежде кнопки держались на одной линии только потому, что у обеих карточек совпадала высота содержимого. */ .tcard { border: 1px solid rgba(0, 0, 0, .14); border-radius: 18px; padding: 28px 28px 24px; background: #fff; display: flex; flex-direction: column; } .tcard__acts { margin-top: auto; } .tcard__price { font-size: 34px; line-height: 1.1; font-weight: 700; margin: 0 0 10px; } .tcard__price span { font-size: 20px; font-weight: 500; opacity: .7; } .tcard__stage { margin: 0 0 12px; } .tcard__example { border-left: 4px solid currentColor; padding-left: 14px; margin: 12px 0; } .tcard__h { font-weight: 700; margin: 16px 0 6px; } .tcard__list { margin: 0 0 12px 20px; padding: 0; } .tcard__list li { margin: 0 0 8px; } .tcard__refund { font-weight: 700; margin: 14px 0 6px; } .tcard__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; } .tcard__nopay { opacity: .75; } .tcard__sample { text-decoration: underline; } .tiers__steps { margin: 0 0 24px 22px; padding: 0; } .tiers__steps li { margin: 0 0 10px; } .mail { font-size: 1.15em; text-decoration: underline; } /* замер 02.09 (ru/pricing, ru/contact, 320–1440): кнопки карточек на одной линии, длинная кнопка шапки на узком экране, почта не вылезает за край */ .tcard { display: flex; flex-direction: column; } .tcard__acts { margin-top: auto; padding-top: 18px; } @media (max-width: 420px) { .brand__mark { width: 34px; height: 34px; } } .mail { color: inherit; font-weight: 700; overflow-wrap: anywhere; word-break: break-all; } /* СНЯТО 04.09. Здесь пряталось САМО НАЗВАНИЕ ФИРМЫ ниже 420, чтобы дать место кнопке шапки, и кегль кнопки жался дважды (02.09). Фаундер прислал снимок с телефона: «убрать кнопку сверху, чтобы она не загораживала название компании». Лечили не с той стороны — уступала вывеска, а не кнопка. Теперь на телефоне уходит кнопка, а название остаётся. */ /* замер 02.09, второй проход: подпись «денег сейчас не просим» отдельной строкой под кнопкой — ряд с кнопкой одной высоты в обеих карточках; на экранах уже 360 кнопка шапки уходит, остаются бургер и кнопка обложки */ .tcard__nopay { display: block; width: 100%; } /* замер 02.09, третий проход (de, 1024): ряд с кнопкой одной высоты в обеих карточках, кнопка тарифа в одну строку */ @media (min-width: 900px) { .tcard__acts { min-height: 96px; align-content: flex-start; } .tcard__acts .btn { white-space: nowrap; } } /* на узких экранах кнопка тарифа переносится: без переноса fr/de вылезали за край на 320–390 */ /* ── Образец на главной (шаг 2, 02.09.2026): настоящая страница отчёта, переключатель 550 / 950 без скриптов (radio + :checked) ── */ .sample { } .sample__tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 20px; } .sample__tabs input { position: absolute; opacity: 0; width: 0; height: 0; } .sample__tabs label { cursor: pointer; border: 1px solid rgba(0,0,0,.25); border-radius: 999px; padding: 10px 18px; font-weight: 700; } .sample__panel { display: none; } #smp-550:checked ~ .sample__panels .sample__panel--550, #smp-950:checked ~ .sample__panels .sample__panel--950 { display: grid; } #smp-550:checked ~ .sample__tabs label[for="smp-550"], #smp-950:checked ~ .sample__tabs label[for="smp-950"] { background: #1f1f1f; color: #fff; border-color: #1f1f1f; } .sample__panel { gap: 24px; align-items: start; } @media (min-width: 900px) { .sample__panel { grid-template-columns: 3fr 2fr; } } .sample__page { border: 1px solid rgba(0,0,0,.14); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.10); background: #fff; display: block; width: 100%; height: auto; } .sample__cap p { margin: 0 0 12px; } .tcard__head { display: flex; gap: 16px; align-items: flex-start; } .tcard__thumb { width: 84px; height: auto; flex: 0 0 84px; border: 1px solid rgba(0,0,0,.14); border-radius: 6px; } /* замер 02.09 (образец на главной): переключатели-radio стоят перед .sample__tabs, а не внутри — прежний селектор их не прятал, и они торчали точками 13×13 */ .sample > input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* Ops/102: живые слова покупателя под образцом на главной */ .sample__stake { margin: 22px 0 0; font-size: 1.1em; } .sample__stake .small { display: block; margin-top: 4px; opacity: .7; } /* ── Шаг 6: поле объекта на первом экране ── */ .objbox { margin: 18px 0 14px; max-width: 640px; } .objbox__l { display: block; margin: 0 0 8px; font-weight: 700; } .objbox__row { display: flex; gap: 10px; flex-wrap: wrap; } .objbox__in { flex: 1 1 260px; min-width: 0; font: inherit; padding: 12px 14px; border: 1px solid rgba(0,0,0,.3); border-radius: 10px; background: #fff; } .tiers__you { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid currentColor; } /* Порог складывания меню 1300 → 1439 (02.09.2026, ночь): в ряду теперь шесть заголовков («Мой список» вернулся по слову фаундера) и две кнопки; замер по шести языкам — русская шапка вылезает на 28 точек при 1400, португальская на 4, все шесть влезают от 1440. Ниже — кнопка меню. */ /* ═══ «МОЙ СПИСОК» В ШАПКЕ (02.09.2026) ══════════════════════════════════ Фаундер: «Куда делся личный кабинет?» На шаге 1 плана ссылка в шапке уступила место кнопке действия, и живой кабинет остался достижим только со страницы-описания. Возвращён текстовой ссылкой слева от кнопки; в сложенном меню (≤1300) — последним пунктом, а ссылка в ряду прячется, потому что на телефоне ряду и так не хватает ширины (замер 01.09). */ /* Фаундер 02.09 (ночь): «где кнопка регистрации личного кабинета?» — текстовой ссылки ему мало; до шага 1 здесь стояла кнопка. Теперь это контурная кнопка того же роста, что и оранжевая: над панно белая, на светлой шапке цветом кнопок; подпись «Личный кабинет» (nav_list). */ .acts__list { font: 700 18px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; text-decoration: none; color: #A03A00; border: 1.5px solid currentColor; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; box-sizing: border-box; } .acts__list:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; } .top--over .acts__list { color: #FFFFFF; } .top--over .acts__list:hover { background: var(--accent); border-color: var(--accent); } .top .nav .nav__list { display: none; } /* Кнопка «Личный кабинет» остаётся в ряду и при сложенном меню (ноутбуки 1100–1439): фаундер просил кнопку наверху, а не пункт в списке. Ниже 1100 ряду не хватает ширины — кнопка уходит в сложенное меню последним пунктом. */ @media (max-width: 1099px) { .acts__list { display: none; } .top .nav .nav__list { display: inline-flex; } } /* ═══ ВХОД В КАБИНЕТ v2 (Ops/105, 02.09.2026) — за флагом CABINET_V2 ═══════════ Карточка как у образца baton: обещание сохранности НАД полями, заголовок, два действия одной формой (войти / зарегистрироваться), «забыли пароль» свёрнуто. Поля наследуют .form/.field/.lbl/.hint — своего у карточки только рамка, отбивки и ряд кнопок. */ .signin2 { max-width: 46ch; } .signin2__trust { margin: 0 0 20px; padding: 12px 16px; border-left: 4px solid var(--accent); background: rgba(255,255,255,.55); font: 400 var(--meta)/var(--body-lh) var(--sans); } .signin2__h { margin: 0 0 4px; color: var(--ink); } /* зелёный заголовок на тёмной полосе давал 2,6:1 */ @media (max-width: 420px) { /* Две кнопки в ряд не влезают на 320: 30 точек за рамкой и прокрутка страницы. */ .signin2__acts { flex-direction: column; align-items: stretch; } /* «ЗАРЕГИСТРИРОВАТЬСЯ» прописными с разрядкой шире 280 точек — пусть переносится и сжимается. */ .signin2__acts .btn, .signin2__acts .btn--ghost { white-space: normal; padding-left: 12px; padding-right: 12px; font-size: 15px; letter-spacing: .04em; min-width: 0; } } .signin2__sub { margin: 0 0 12px; color: var(--muted); font: 500 var(--label)/var(--label-lh) var(--sans); } .signin2__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } .signin2__acts .btn, .signin2__acts .btn--ghost { margin: 0; } .signin2__forgot { margin-top: 20px; } .signin2__forgot summary { cursor: pointer; font: 500 var(--label)/var(--label-lh) var(--sans); color: var(--ink); } .signin2__forgot .form { margin-top: 12px; } .signin2 .signin__msg { margin-top: 12px; } /* ═══ ЭКРАН ВХОДА ПО ЭТАЛОНУ (Content/cabinet/LOGIN_CARD_REFERENCE.html, 02.09 ночь) ═══ Значения эталона перенесены как есть: белая карточка 430, скругление 12, поля с рамкой волоса, широкая оранжевая кнопка-пилюля, разделитель «или» линиями, соцкнопки-пилюли со знаком 18. Меняются только подписи. */ .lc { width: 100%; max-width: 430px; background: #FFFFFF; border: 1px solid #E4DFDA; border-radius: 12px; padding: 38px 36px 34px; box-shadow: 0 1px 2px rgba(46,47,52,.04); color: #2E2F34; font: 400 16px/1.55 var(--sans); } .lc__mark { text-align: center; font: 400 19px/1.3 var(--serif); color: #1F625C; margin: 0 0 22px; letter-spacing: .01em; } .lc__h { font: 500 27px/1.2 var(--serif); text-align: center; margin: 0 0 4px; color: #2E2F34; } .lc__with { text-align: center; color: #5A6169; font-size: 14px; margin: 0 0 20px; } .lc__lbl { display: block; font-size: 13px; color: #5A6169; margin: 14px 0 5px; } .lc__in { width: 100%; padding: 13px 14px; font: inherit; color: #2E2F34; border: 1px solid #E4DFDA; border-radius: 8px; background: #FFFFFF; box-sizing: border-box; } .lc__in:focus { outline: 2px solid #1F625C; outline-offset: 1px; border-color: #1F625C; } .lc__hint { margin: 8px 0 0; font-size: 13px; color: #5A6169; } .lc__go { width: 100%; margin-top: 22px; padding: 13px 16px; font: inherit; font-weight: 600; color: #FFFFFF; background: #CD4A01; border: 1px solid #CD4A01; border-radius: 999px; cursor: pointer; } .lc__switch { display: block; text-align: center; margin: 14px 0 0; padding: 4px 0; min-height: 24px; font-size: 15px; color: #1F625C; } .lc__or { display: flex; align-items: center; gap: 12px; margin: 24px 0 18px; color: #5A6169; font-size: 14px; } .lc__or::before, .lc__or::after { content: ""; flex: 1; height: 1px; background: #E4DFDA; } .lc__social { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; padding: 12px 16px; border: 1px solid #E4DFDA; border-radius: 999px; color: #2E2F34; text-decoration: none; background: #FFFFFF; } .lc__social:hover { border-color: #1F625C; } .lc .mk { width: 18px; height: 18px; flex: 0 0 18px; } /* Официальная кнопка LinkedIn (эталон 63db7a8): картинка вместо пилюли, при наведении подменяется вторым файлом — правила эталона как есть. */ .lc__social--li { padding: 0; border: 0; background: none; margin-top: 12px; } .lc__social--li img { display: block; width: 215px; height: 41px; max-width: 100%; } .lc__social--li .li-h { display: none; } .lc__social--li:hover .li-d { display: none; } .lc__social--li:hover .li-h { display: block; } .lc__msg { margin: 0 0 18px; padding: 11px 13px; border-radius: 8px; font-size: 14px; background: #F0F4EA; color: #2E2F34; } .lc__msg[hidden], .lc__pane[hidden] { display: none; } .lc__note { margin: 22px 0 0; font-size: 13px; color: #5A6169; text-align: center; } .lc__note a { color: #1F625C; display: inline-block; padding: 4px 0; } @media (max-width: 480px) { .lc { padding: 26px 18px 24px; } } /* ═══ СТРАНИЦА ВХОДА login.html — оболочка эталона (02.09, ночь) ═══════════ Ровный светлый фон, карточка по центру во всю высоту окна, ничего вокруг. */ .lp-body { margin: 0; background: #FAF8F7; color: #2E2F34; } .lp { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; box-sizing: border-box; } .lp .lc { margin: 0; } .lp__back { margin: 18px 0 0; font: 400 14px/1.4 var(--sans); } .lp__back a { color: #5A6169; text-decoration: none; } .lp__back a:hover { color: #1F625C; } /* Компактное окно входа на cabinet.html: те же поля и кнопка, без знака, заголовка и соцкнопок — они на полной странице входа. */ .lc--compact { max-width: 46ch; padding: 22px 22px 20px; } .lc--compact .lc__lbl:first-of-type { margin-top: 0; } .lc--compact .lc__go { margin-top: 18px; } .lc--compact .lc__switch { margin-top: 12px; font-size: 14px; } /* ═══ ТЕЛЕФОН: В ШАПКЕ ТОЛЬКО ВЫВЕСКА, ЯЗЫК И МЕНЮ ═══════════════════════ Фаундер 04.09, снимок с телефона: кнопка действия в ряду шапки жала название до «Provena…». Слово: «убрать кнопку сверху, чтобы она не загораживала название компании». Что делаем. До 767 включительно кнопка действия и ссылка входа уходят из ряда — в ряду остаются вывеска, язык и кнопка меню. Действие не теряется: в сложенном меню оно стоит ПЕРВЫМ пунктом (.nav__cta), и вход — последним (.nav__list, было и раньше). Почему 767, а не 420. На 420 ряд уже переполнен: вывеска 200+, кнопка 150+, язык 64, меню 44 — при доступных ~330. Прошлые заходы двигали порог вниз (420 → 360) и по дороге пожертвовали вывеской. Порог взят там, где ряд перестаёт вмещать четыре предмета, а не там, где ломается. Выше 767 всё как было: кнопка в ряду, пункт меню спрятан. */ .top .nav .nav__cta { display: none; } @media (max-width: 767px) { .top .acts .btn--sm { display: none; } .top .acts__list { display: none; } .brand__name { display: inline; } /* Пункт действия в сложенном меню — первым и в цвете кнопки, чтобы его не приняли за обычную строку списка. */ .top .nav .nav__cta { display: flex; order: -1; color: var(--accent); font-weight: 700; } } /* Самые узкие телефоны (320): даже без кнопки вывеска не влезала целиком — замер показал 167 точек при нужных 204. Уменьшается КЕГЕЛЬ, а не сама вывеска: название фирмы на месте, просто набрано мельче. */ @media (max-width: 340px) { .brand__name { font-size: 16px; } } /* ═══ ПЕРВЫЙ ЭКРАН: ДВА БЛОКА ОДНОГО СТРОЯ ═══════════════════════════════ Указание фаундера 05.09.2026: блок расширения стоит на первом экране главной, в левом низу панно; кнопки одинакового размера; всё симметрично относительно других объектов. ПОЧЕМУ БЛОК, А НЕ РЯД. У каждого действия своё пояснение СВЕРХУ и своя кнопка под ним — так просил фаундер («над кнопкой надпись…»). Блоки уравнены по высоте: под пояснение отведены две строки и прижато оно к низу, поэтому расстояние от пояснения до своей кнопки везде 15. РИТМ ПО ШКАЛЕ САЙТА, а не на глаз: 15 внутри куска, 30 между кусками, 60 между блоками. Прежние 24 / 12 / 72 не стояли на шкале вовсе. ШИРИНА КНОПКИ 380 ЗАМЕРЕНА: самая длинная надпись при кегле 20 занимает около 320 точек плюс внутренние отступы. Ширина одна на обе кнопки — иначе они перестают быть одинаковыми на вид, оставаясь одинаковыми по числу. */ /* ═══ КЕГЛЬ ЗАГОЛОВКА ПАННО — СВОЙ НА ЯЗЫК ═══════════════════════════════ Решение фаундера 05.09.2026 (вариант 1). Латиница шире кириллицы при том же кегле, поэтому один размер на все языки даёт разное число строк: по-русски заголовок ложился в три строки, по-английски в четыре, и блок расширения уезжал за нижний край экрана на 244 точки. Числа НЕ подобраны, а замерены на отрисованной странице: для каждого языка взята самая широкая строка заголовка и найден кегль, при котором она помещается в колонку 660 без переноса. Межстрочное расстояние — в той же пропорции, что у образца (82 к 69). язык самая широкая строка кегль en You didn't see its past. 706 → 63 es No ha visto su pasado. 709 → 63 pt Não viu o passado dele. 745 → 60 fr Vous avez vu l'affaire. 683 → 66 ru Вы не видели его прошлого. 922 → 48 de Sie haben den Betrieb gesehen. 998 → 45 У трёх ЖИВЫХ языков падение малое: 68 → 63, 63 и 60. Крупный размер, который просил фаундер, сохранён. Сильно уменьшаться приходится русскому и немецкому — но они с сайта сняты и посетителю не показываются. Селектор по языку страницы, а не по классу: язык уже стоит в , и заводить второй источник той же правды незачем. Португальский помечен pt-PT, поэтому сравнение по началу строки. */ html[lang^="en"] .hero__text h1 { font-size: clamp(63px, 6.4vh, 84px); line-height: 1.08; } html[lang^="es"] .hero__text h1 { font-size: clamp(63px, 6.4vh, 84px); line-height: 1.08; } html[lang^="pt"] .hero__text h1 { font-size: clamp(60px, 6.1vh, 80px); line-height: 1.08; } html[lang^="fr"] .hero__text h1 { font-size: clamp(66px, 6.7vh, 88px); line-height: 1.08; } /* 🔴 На 320 слово «l'entreprise» при кегле 66 занимает 338 точек при видимых 305 и распирает страницу на 12. Ниже 420 кегль идёт от ширины экрана: 13vw даёт 44 на 320 — слово помещается. */ @media (max-width: 420px) { html[lang^="fr"] .hero__text h1 { font-size: clamp(40px, 13vw, 66px); } } html[lang^="ru"] .hero__text h1 { font-size: clamp(48px, 4.9vh, 64px); line-height: 1.08; } html[lang^="de"] .hero__text h1 { font-size: clamp(45px, 4.6vh, 60px); line-height: 1.08; } /* Верхнее поле панно 104 вместо 120. Ниже опускать нельзя: замер показал, что при 80 заголовок заезжает под шапку (его верх 152 при нижнем крае шапки 160). Эти 16 точек — весь запас сверху. */ .hero > .band { padding-top: 78px; } .hero__text .lede { margin-top: 12px; } .hero__text .actblock { margin-top: 24px; } .hero__text .actblock--free { margin-top: 28px; } .actblock { display: flex; flex-direction: column; align-items: flex-start; order: 6; margin: 0; } .actblock--free { order: 7; position: relative; z-index: 2; } .actline { order: 1; max-width: 700px; margin: 0; min-height: 32px; display: flex; align-items: flex-end; color: #FFFFFF; font: 400 clamp(23px, 2.3vh, 30px)/1.4 var(--sans); } /* 🔴 Порядок и ширина заданы ЯВНО. Правило .hero__text .btn { order: 4 } действует и на кнопку внутри блока: без явного порядка она уезжала в конец, а без flex-basis ужималась по длине надписи. */ .hero__text .actblock .btn { order: 2; flex: 0 0 auto; width: clamp(420px, 31vw, 520px); min-height: clamp(72px, 7.1vh, 92px); font-size: clamp(26px, 2.6vh, 34px); margin: 12px 0 0; white-space: nowrap; } .hero__text a.btn.btn--free { background: #217A75; color: #FFFFFF; } .hero__text a.btn.btn--free:hover { background: #1F625C; color: #FFFFFF; } /* ЗАТЕМНЕНИЕ БЕЗ КРАЯ. Нужно единственно ради видимого края тёмной кнопки: на фотографии её край даёт 1,7–2,4:1, на затемнении 3,7:1. Само затемнение фигурой не читается — у него нет границы, вклад вдоль маски меняется плавно. Маска гасит его к 880-й точке, поэтому трамвая оно не касается: замер показал изменение яркости 0,00 %. */ .hero__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,0) 356px, rgba(0,0,0,.66) 486px, rgba(0,0,0,.66) 100%); -webkit-mask-image: linear-gradient(to right, #000 0 830px, rgba(0,0,0,0) 960px); mask-image: linear-gradient(to right, #000 0 830px, rgba(0,0,0,0) 960px); } @media (prefers-reduced-motion: reduce) { } @media (max-width: 900px) { .actline { min-height: 0; display: block; } .hero__text .actblock .btn { width: 100%; max-width: 380px; white-space: normal; } .hero__scrim { display: none; } } /* ═══ ПАННО СТРАНИЦЫ РАСШИРЕНИЯ: ДВЕ МАГАЗИННЫЕ КНОПКИ ═════════════ Решение фаундера 06.09.2026. Прежде тут стояла одна кнопка «как это работает» — единственная ссылка панно, и она уводила со страницы, ради которой человек пришёл. Кнопки одинаковы между собой, как и на главной; ширина уже, чем 380 главной, потому что их две в ряд. */ .actblock--stores .storerow { order: 2; display: flex; flex-wrap: wrap; gap: 16px; margin: 15px 0 0; } .hero__text .actblock--stores .btn--store { width: clamp(320px, 24vw, 360px); min-height: clamp(64px, 7.1vh, 84px); font-size: clamp(20px, 2.4vh, 26px); margin: 0; white-space: nowrap; background: #14161A; color: #FFFFFF; } .hero__text .actblock--stores .btn--store:hover { background: #23262B; } .actblock--stores .actsmall { order: 3; margin: 15px 0 0; max-width: 620px; color: #FFFFFF; font: 400 clamp(18px, 2.1vh, 22px)/1.4 var(--sans); } @media (max-width: 900px) { .actblock--stores .storerow { flex-direction: column; } .hero__text .actblock--stores .btn--store { width: 100%; max-width: 344px; white-space: normal; } } /* Затемнение страницы расширения — слева, а не снизу: строки кончаются там, где начинается светлое море, и замер по пикселям дал 3,7–4,3:1 при пороге 4,5. Правую часть кадра не трогает. */ .hero__scrim--side { background: linear-gradient(to right, rgba(0,0,0,.50) 0, rgba(0,0,0,.40) 700px, rgba(0,0,0,0) 1060px); -webkit-mask-image: none; mask-image: none; } /* У Custom в месте цены стоит не сумма, а строка «цена после разбора»: запрет исходника на любую названную цену остаётся в силе. Кегль ниже ценового, иначе строка ломает ряд карточек. */ .tcard__price--words { font-size: 26px; line-height: 34px; } /* 08.09.2026, слово фаундера: «таблица должна быть по ширине на все три блока с крупным, хорошо читаемым текстом». Ширину держал общий потолок таблиц 1128 (ширина полосы сайта) — обёртка была 1577, а таблица упиралась в него. Потолок снят ТОЛЬКО внутри широкого ряда, таблицы других страниц не тронуты. 🔴 Кегль задаётся сокращённой формой (размер и междустрочие разом): в исходных правилах он записан так же, и правка только размера оставляла крупный текст в тесных строках. */ .wide .tbl--cmp { max-width: none; } @media (min-width: 900px) { .wide .tbl--cmp th, .wide .tbl--cmp td { padding: 18px var(--gap); } .wide .tbl--cmp td { font: 400 21px/30px var(--sans); } .wide .tbl--cmp th[scope="row"] { font: 500 21px/30px var(--sans); } .wide .tbl--cmp thead th { font: 700 25px/1.25 var(--sans); } .wide .tbl--cmp tr.grp th, .wide .tbl--cmp tr.grp td { font: 600 21px/29px var(--sans); } .wide .tbl--cmp .yes { font-size: 25px; } .wide .tbl--cmp .no { font-size: 21px; } } /* 08.09.2026. Текст под таблицей: заголовки по центру и кегль не меньше табличного — слово фаундера. Раньше заголовки стояли слева, а текст был 17–18 при табличном 21, и раздел читался как приписка. 🔴 Обёртка таблицы с `overflow-x: auto` резервирует внутри себя место под вертикальную полосу и ужимает таблицу на 15 точек. Снимаем это ТОЛЬКО на широком экране: на узком таблица шире окна, и прокрутка ей нужна — без неё страница вылезала за край на 575 точек при 320. */ /* Соразмерность не зависит от ширины экрана, поэтому правила ниже действуют везде. 08.09.2026 они сначала стояли внутри порога 1180, и на телефоне указание фаундера не выполнялось: текст 19 при таблице 21, заголовок слева. */ .tiers__rest h3 { text-align: center; } /* Заголовок раздела таблицы и строка под ним — по центру: под ними широкий ряд, и заголовок слева читался как подпись не к тому. */ .screen--center > .band > h2, .screen--center > .band > .lede-sm { text-align: center; } .screen--center > .band > .lede-sm { margin-left: auto; margin-right: auto; } .tiers__rest .prose, .tiers__rest .tiers__steps li, .tiers__rest .faq summary, .tiers__rest .faq p { font: 400 21px/30px var(--sans); } .tiers__rest .faq summary { font-weight: 600; } .tiers__rest > .small { font-size: 19px; line-height: 28px; text-align: center; } @media (min-width: 1180px) { .tblwrap.wide { overflow: visible; } .tiers__rest .prose, .tiers__rest .tiers__steps, .tiers__rest .faq { max-width: 1100px; margin-left: auto; margin-right: auto; } .tiers__rest > .small { max-width: none; } } /* 08.09.2026, слово фаундера: «кнопки должны быть крупнее на 30% и находиться по центру каждого блока». Было 223x56 при кегле 18 и полях 28, стояла слева. Стало: кегль 23, высота 73, поля 36 — те же +30 %. `max-width` держит кнопку внутри карточки на узком экране, где на длинных языках надпись шире самой карточки. */ /* 🔴 Ширину карточке задаёт ряд, а не её содержимое: без этого на французском при 320 карточка держалась 297 при месте 265 — её не пускала стать уже собственная кнопка (минимум 239 при месте 209). */ .tcard { min-width: 0; } .tcard .tcard__acts { justify-content: center; text-align: center; } .tcard .tcard__acts .btn { font-size: 23px; min-height: 73px; padding: 0 36px; max-width: 100%; } .tcard .tcard__nopay { text-align: center; } /* 🔴 Запрет переноса надписи ставили 02.09 при кегле 18. При кегле 23 он распирал колонку: немецкая кнопка требовала 414 точек там, где колонке полагалось 385, и ряд вылезал за край окна. */ .tcard .tcard__acts .btn { white-space: normal; } /* 🔴 08.09.2026, осмотр прода на экране 375. Таблица сравнения показывала ТОЛЬКО левую колонку: ответы уехали вправо за край, шапка со словами «Бесплатно · 550 · 950» осталась выше и при сдвиге пропадает. Прокрутка вбок есть, но её ничто не подсказывает. Приёмка молчала и не могла заговорить: таблица едет ВНУТРИ своей рамки, значит страница не шире окна — гейт мерит переполнение, а не читаемость. Ниже 900 таблица перестаёт быть таблицей: строка = карточка, сверху её подпись, под ней три ответа, у каждого свой заголовок столбца из `data-col`. Прокрутка вбок больше не нужна. */ @media (max-width: 899px) { .tbl--cmp, .tbl--cmp tbody, .tbl--cmp tr, .tbl--cmp td, .tbl--cmp th { display: block; width: auto; min-width: 0; } .tbl--cmp colgroup, .tbl--cmp thead { display: none; } .tblwrap { overflow: visible; } .tbl--cmp tr { border: 1px solid rgba(0, 0, 0, .14); border-radius: 14px; padding: 4px 16px 14px; margin: 0 0 14px; background: #fff; } .tbl--cmp th[scope="row"] { padding: 14px 0 10px; border: 0; font: 700 20px/1.3 var(--sans); } .tbl--cmp td { padding: 0 0 12px; border: 0; font: 400 19px/28px var(--sans); text-align: left; } .tbl--cmp td:last-child { padding-bottom: 2px; } .tbl--cmp td::before { content: attr(data-col); display: block; font: 600 15px/1.4 var(--sans); opacity: .7; margin: 0 0 2px; } /* Галочка и прочерк — знаки, а не слова: в столбике им нужна подпись, иначе строка «Бесплатно ✓» превращается в «✓» без адреса. */ .tbl--cmp td.yes, .tbl--cmp td.no { font-size: 21px; } /* Правила строк-разделов весят больше моих и в столбике мешают: плашка раздела тянет серый фон внутрь карточки, а кегль уходит в 18 полужирных. В столбике раздела нет — каждая строка и так карточка. */ .tbl--cmp tr.grp th, .tbl--cmp tr.grp td { background: none; border-top: 0; padding-top: 0; padding-bottom: 12px; } .tbl--cmp tr.grp td { font: 400 19px/28px var(--sans); } .tbl--cmp tr.grp th[scope="row"] { font: 700 20px/1.3 var(--sans); padding: 14px 0 10px; } } /* Телефон: надпись на кнопке рвалась на две строки («START FOR» / «€550») — при карточке 320 кнопке оставалось 262, а поля съедали 72. Кнопка занимает ширину карточки, поля 14: надпись встаёт в одну строку. */ @media (max-width: 479px) { .tcard .tcard__acts .btn { width: 100%; padding: 0 14px; } } /* 08.09.2026, проверка телефона по 18 страницам: 53 находки, все четырёх видов, и все — про палец. Ширины хватает, не хватает высоты, поэтому добавляются поля, а кегль не трогается. Порог 40 — общий минимум цели нажатия у Apple и Google. */ @media (max-width: 899px) { /* вывеска в шапке: она же ссылка на главную, была 34 на всех страницах */ .brand { padding: 5px 0; } /* одиночная ссылка в своём абзаце: «смотреть образец», правовые страницы, записки. Строка остаётся 30, рамка нажатия становится 44. */ p > a:only-child, .tcard__sample { padding: 7px 0; } /* страница входа: подписи полей были 13 — мельче порога чтения */ .lc__lbl { font-size: 14px; } .lc__switch { padding: 10px 0; min-height: 44px; } /* «Забыли пароль?» — не примечание, а единственный выход для того, кто не может войти. Было 13 при цели нажатия 21. */ .lc__note { font-size: 14px; } .lc__note a { padding: 11px 0; } .lc--compact .lc__switch { font-size: 15px; } } /* ═══ CUSTOM — МАРШРУТ БЕЗ ЦЕНЫ ═══════════════════════════════════ Заведено 06.09.2026 по слову фаундера, тексты из исходника тарифов §5 (25.08). Нарочно НЕ карточка тарифа: у него нет цены, и рядом с 550 и 950 он читался бы как третий тариф, которого не существует. Две колонки — «с чем приходят» и «чего не сделаем»: отказ виден ДО письма, а не после. */ .custom { margin-top: var(--sp-2); padding: var(--sp-2); background: var(--card); border: 1px solid var(--rule-hair); } .custom h3 { margin: 0 0 12px; } .custom__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-1); } .custom__h { margin: 0 0 10px; font: 600 19px/26px var(--sans); } .custom__list { margin: 0; padding-left: 22px; font: 400 19px/29px var(--sans); } .custom__list li { margin: 8px 0; } .custom__list--no { color: var(--muted); } .custom__price { margin-top: var(--sp-1); max-width: var(--prose); } .custom__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: var(--sp-1); } .custom__free { color: var(--muted); font: 400 18px/26px var(--sans); } @media (max-width: 900px) { .custom { padding: var(--sp-1); } .custom__cols { grid-template-columns: 1fr; gap: var(--sp-1); } } /* ═══ СТРАНИЦА РАСШИРЕНИЯ: СРАВНЕНИЕ «БЕЗ ПАНЕЛИ / С ПАНЕЛЬЮ» ══════ Переделано 06.09.2026 по слову фаундера «ничего толком не видно». Блок больше не наследует вёрстку таблицы тарифов: там четыре узкие колонки, здесь две широкие, и общий воздух превращался в пустоту. */ /* Пустоты над таблицей было 120 точек — вдвое больше шкалы сайта. */ .tblwrap--vs { margin-top: 30px; } .tbl--vs { table-layout: fixed; width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--rule-hair); background: var(--card); } .tbl--vs col.c1 { width: 24%; } .tbl--vs col.cv { width: 38%; } /* Заголовки половин — на тёмной полосе: взгляд сразу видит границу. */ .tbl--vs thead th { background: var(--deep); color: #FFFFFF; font: 600 19px/26px var(--sans); text-align: left; padding: 14px 20px; } /* Ярлык строки — своим весом, а не серым курсивом. */ .tbl--vs tbody th[scope="row"] { text-align: left; vertical-align: top; padding: 16px 20px; background: var(--ground); font: 600 19px/27px var(--sans); color: var(--ink); border-top: 1px solid var(--rule-hair); } .tbl--vs tbody td { vertical-align: top; padding: 16px 20px; font: 400 20px/29px var(--sans); border-top: 1px solid var(--rule-hair); } /* Половина «без панели» — приглушена и на бледной подложке. */ .tbl--vs .vs__no { background: var(--paper); color: var(--muted); } /* Половина «с панелью» — на белом листе, тёмным текстом, с линейкой фирменного цвета слева: тот же приём, что у находки в отчёте. */ .tbl--vs .vs__yes { background: var(--card); color: var(--ink); box-shadow: inset 3px 0 0 var(--deep); } .tbl--vs tbody tr:hover { background: transparent; } .tbl--vs tbody tr:hover .vs__yes { background: var(--ground); } @media (max-width: 900px) { .tbl--vs { min-width: 0; } .tbl--vs thead th, .tbl--vs tbody th[scope="row"], .tbl--vs tbody td { padding: 12px 14px; font-size: 18px; line-height: 26px; } } /* Две магазинные кнопки в синем блоке под панно — на месте кнопки, которая вела к оплате. */ .startbox__acts--stores .btn { min-width: 260px; } /* Кнопка кабинета под перечнем: отступ по шкале сайта. */ .actswrap { margin: 30px 0 0; } /* Знаки браузеров на магазинных кнопках. Файлы официальные и не перерисованы; знак стоит слева от надписи и не мешает ей переноситься. */ .btn--store { display: inline-flex; align-items: center; justify-content: center; gap: 12px; } .btn--store .mk { flex: 0 0 auto; display: block; width: clamp(28px, 3.2vh, 36px); height: clamp(28px, 3.2vh, 36px); }