/* ═══════════════════════════════════════════════════════════════════════════ ОФОРМЛЕНИЕ ПО ОБРАЗЦУ. 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): сначала прячется надпись у знака, затем меню становится на ступень мельче. Меню НЕ обрезаем и не даём ему переноситься — обе замены хуже. */ /* 22.09: сначала меню на ступень мельче (название фирмы остаётся), и только если не хватило и этого — прячем надпись у знака. С пунктом «Contact» французское меню на 1440 иначе съедало название фирмы. */ .top--tight .nav { gap: 12px; } /* 24.09: 14→12 — «Partenaires» в меню fr на 1440 не хватало 10 px */ .top--tight .nav a { font-size: 17px; } .top--tighter .brand__name { display: none; } /* ═══ ЯЗЫКИ: КНОПКА С РАСКРЫВАЮЩИМСЯ СПИСКОМ ═════════════════════════════ Фаундер 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; } /* срок — отдельной строкой под ценой: «24 hours on working days» не влезает рядом (25.09) */ .tcard__price span { display: block; margin-top: 6px; font-size: 18px; line-height: 1.3; 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; } /* 03.10.2026 (PLAN №212): низкое окно ноутбука (1366×625 — настоящее окно экрана 1366×768). У нового посетителя полоса согласия занимает низ экрана с 554–565-й точки, а заголовок с нижней границей кегля 63–66 уводил кнопку первого экрана под неё: цены 578–623, «как это работает» 576–602 (замер 03.10, ×4 языка). На окне до 720 точек высотой заголовок — 52 точки (тот же приём, что у полосы партнёров ниже); тот же вес селектора, что у правил выше, — и ниже по файлу. Телефона не касается (там кегль от ширины, ≤ 700). */ @media (min-width: 1024px) and (max-height: 720px) { /* text-wrap: balance — на 50 точках «business» / «vendedor?» / «negócio» оставались одни на строке (замер 03.10); выравнивание раскладывает слова поровну, число строк и место кнопки не меняются. Браузер без него переносит как раньше. */ html[lang] .hero__text h1 { font-size: 50px; text-wrap: balance; } html[lang] .hero__text .lede { margin-top: 6px; } } /* Окно 600–640 точек высотой (1280×600, 1024×600): испанский и португальский заголовки цен в 4 строки — ещё ступень. */ @media (min-width: 1024px) and (max-height: 640px) { html[lang] .hero__text h1 { font-size: 46px; } } /* ═══ ПЕРВЫЙ ЭКРАН НА ТЕЛЕФОНЕ ══════════════════════════════════════════ 🔴 19.09.2026, замер кабинета Google Ads за 12–18.09: из 102 рекламных кликов 101 — С ТЕЛЕФОНА. Настольного рекламного трафика у нас нет. А замер живой страницы на 375×667 показал вот что: полоса согласия занимает низ экрана от 507-й точки, то есть видно всего 435 точек, и ОДИН заголовок съедал 340 из них. Кнопка заказа стояла на 862-й — почти две страницы вниз. Пришедший по рекламе человек видел логотип, заголовок в четыре строки и полторы строки подзаголовка. Ни цены, ни кнопки. Кегль заголовка задан выше от ВЫСОТЫ окна (6.4vh), и на телефоне он поэтому не уменьшался: 667 точек высоты дают те же 63. Здесь он идёт от ШИРИНЫ. Образец такого исключения уже был — французский на 420. Специфичность: правила выше весом «класс+класс+тег» (html[lang]), и правило с одним классом их бы не перебило. Поэтому здесь тот же вес и то же перечисление языков, только ниже по файлу. Ничего не прячем: `punch` и надпись над кнопкой не исчезают, а переставляются ПОД действие. На телефоне сначала «что это и почём», потом кнопка, потом пояснения. */ @media (max-width: 700px) { html[lang^="en"] .hero__text h1, html[lang^="es"] .hero__text h1, html[lang^="pt"] .hero__text h1, html[lang^="fr"] .hero__text h1, html[lang^="ru"] .hero__text h1, html[lang^="de"] .hero__text h1 { font-size: clamp(30px, 8.5vw, 46px); } /* 21.09.2026: 9vw → 8.5vw. Новые заголовки испанского и португальского на 375 точках ложились в ЧЕТЫРЕ строки: первая строка «¿Compra un negocio?» просила 347 точек при колонке 335 — на 12 больше. Четыре строки уталкивали обещание «денег сейчас не просят» под окно согласия (испанский недобирал 58 точек, португальский 31). Меньше на полпроцента ширины — и обе строки встают целиком. Английский остаётся в трёх строках, как был, французский — в двух. */ .hero__text .lede { font: 400 19px/1.4 var(--sans); } /* Строка «от вас нужно…» и надпись над кнопкой уходят ПОД кнопку: сама кнопка и обещание «денег сейчас не просят» обязаны попасть на первый экран, остальное человек дочитает прокруткой. */ .hero__text .punch { order: 8; font: 500 17px/1.45 var(--sans); } .hero__text .actblock .actline { order: 4; margin-top: 14px; font: 400 17px/1.4 var(--sans); } } /* 🔴 Здесь НЕТ правок отступов, высоты кнопки и кегля строки под ней, и это не забывчивость. Я их написал, померил computed style и увидел, что все девять проиграли: одноимённые правила лежат НИЖЕ по этому же файлу с тем же весом, а при равном весе побеждает последнее. Замер с одними только живыми строками уже даёт нужное — кнопка 368–440, обещание 452–502, обе выше полосы согласия (507) на 375×667. Мёртвое правило в файле хуже отсутствующего: оно выглядит как сделанная работа и уводит следующего в сторону. Понадобится тронуть отступы — переносить весь блок НИЖЕ правил `.hero__text .actblock` и `.actsmall`, а не поднимать вес. */ /* Верхнее поле панно 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; } /* СТРОКА «ЧТО НУЖНО ОТ ВАС» — ПОД КНОПКАМИ НА ЛЮБОЙ ШИРИНЕ (21.09.2026). На телефоне её переставили 19.09. На ноутбуке она стояла над кнопкой, и после того как испанский и французский получили её полной строкой (прежний экран держал её пустой), кнопка ушла под полосу согласия: на 1366×640 испанскому не хватало 42 точек, французскому 48. 🔴 Переставляем ТОЛЬКО эту строку. Пояснение прямо над кнопкой (`.actline`) на ноутбуке остаётся над ней — это решение фаундера от 05.09: «над кнопкой надпись», два блока одного строя. */ .hero__text .punch { order: 8; } .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; } /* СТРОКА ПОД КНОПКОЙ (наряд Ops/153, 19.09.2026). Кнопка первого экрана ведёт теперь прямо в форму заказа, и под ней стоит строка, снимающая страх: «денег сейчас не просят». 🔴 Порядок задан ЯВНО, как у кнопки выше: блок — колонка с явными номерами (надпись 1, кнопка 2), и без номера строка уехала бы наверх. 🔴 Исключение для страницы расширения не украшение: там уже есть своё правило `.actblock--stores .actsmall` весом в два класса, а это весит три и молча перебило бы его. Проверено на обеих страницах. 🔴 Ширина 720, а не 560, и это замер, а не вкус: при 560 строка ложилась в ДВЕ, её низ уходил на 603-ю точку, а полоса согласия внизу экрана занимает всё от 580-й. Половина обещания «денег сейчас не просят» была закрыта именно в ту минуту, когда полоса показана, — то есть у каждого, кто пришёл впервые. В одну строку она просит 639 точек. */ .actblock:not(.actblock--stores) .actsmall { order: 3; max-width: 720px; margin: 12px 0 0; color: #FFFFFF; font: 400 clamp(17px, 1.9vh, 21px)/1.45 var(--sans); } /* ЗАТЕМНЕНИЕ БЕЗ КРАЯ. Нужно единственно ради видимого края тёмной кнопки: на фотографии её край даёт 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); } /* 🔴 13.09.2026, наряд Ops/142. Полоса согласия висит внизу поверх страницы. У блоков высотой «во весь экран» отступ у тела не помогает: добавка уходит ПОД блок. Замер на странице входа: полоса на 810, ссылка «назад» до 857 — налезание 47 точек. Эти два блока считают высоту как экран МИНУС полоса; переменную ставит скрипт окна, без полосы она ноль. */ .hero { min-height: calc(100vh - var(--pd-consent-h, 0px)); } /* У страницы входа содержимое стоит по центру экрана, поэтому её лечит не урезание высоты, а НИЖНЕЕ поле: центр уезжает вверх ровно на половину полосы, и нижние ссылки выходят из-под неё. Замер 13.09: ссылка «назад» кончалась на 854 при полосе от 810. */ .lp { padding-bottom: calc(40px + var(--pd-consent-h, 0px)); } /* 🔴 13.09.2026, наряд Ops/140. Ссылки «то же в PDF» стоят на песочной полосе (rgb 171·152·126), и зелёный цвет ссылки дал контраст 2,54:1 при пороге 4,5 — замер поймал на всех шести ширинах. Тёмные чернила на том же фоне дают 4,79:1, подчёркивание оставлено: цвет не единственный признак ссылки. */ .startbox .small a { color: var(--ink); text-decoration: underline; } /* ═══ ОДНИ ГРАНИЦЫ НА ВЕСЬ САЙТ (21.09.2026, указание фаундера) ══════════ Фаундер по снимку образца €550: «узкое и длинное; содержимое — в границах от логотипа PD до конца кнопки Start my check; все страницы единообразны и симметричны». Замер при окне 1700: шапка 155..1531 (полоса 1440, поля 32). Содержимое стояло тремя разными способами, и ни один не совпадал с шапкой: первый экран 85..825 — левее логотипа на 70 точек; разделы 268..1418 — по центру, но уже шапки на 113 с каждой стороны; документы 268..916 — колонка 648 точек прижата влево, справа пусто. Лечится тем, что полоса содержимого получает ТЕ ЖЕ размеры, что полоса шапки, на всех ширинах, а документы снимают свою узкую меру. 🔴 ГЛАВНАЯ ИСКЛЮЧЕНА (фаундер 21.09, после выкладки): «Дизайн главной страницы не трогаем. Возвращай её прежний вид». Отсюда :not(.page-index) — метку ставит станок только на главной. */ body:not(.page-index) .band, body:not(.page-index) .hero > .band { max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; } .doc .doc__head, .doc .doc__body { max-width: none; } @media (max-width: 600px) { body:not(.page-index) .band, body:not(.page-index) .hero > .band { padding-left: 16px; padding-right: 16px; } } /* Ссылка «сравнить тарифы» в строке под кнопкой панно страницы цен (21.09.2026): цвет строки, подчёркнута — иначе на фотографии её не отличить от текста. */ .actsmall a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* ═══ СТРАНИЦА «ПАНЕЛЬ + МОЙ СПИСОК» (extension-and-list.html, 21.09.2026) ═══ Образец Hunter (выбор фаундера): сетка ОДИНАКОВЫХ карточек — кусочек интерфейса сверху, заголовок, две строки, ссылка-стрелка. Макет — Content/marketing/extension_block_design_2026-09-21/D_page_hunter/. */ .xl { padding-top: 88px; } @media (max-width: 1439px) { .xl { padding-top: 72px; } } .xl-hero { background: var(--head); color: #FFFFFF; padding: 64px 0 80px; } .xl-hero .band { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .xl-eyebrow { font: 600 14px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #F1CA7A; margin: 0 0 14px; } .xl-hero h1 { font: 700 52px/1.12 var(--sans); color: #FFFFFF; letter-spacing: -0.01em; margin: 0 0 18px; } .xl-lede { font: 400 19px/1.55 var(--sans); margin: 0 0 26px; color: #FFFFFF; } .xl-stores { display: flex; flex-wrap: wrap; gap: 12px; } .xl-here { margin: 0; font: 600 18px/1.4 var(--sans); color: inherit; } .xl-here a { color: inherit; text-decoration: underline; text-underline-offset: 4px; } .xl-here.xe-center { margin-top: 36px; } .pdx3__cta p.xl-here { margin: 0; font: 600 18px/1.4 var(--sans); color: #1F2A24; } .xl-small { font: 400 15px/1.45 var(--sans); color: #DDE9E6; margin: 14px 0 0; } .xl-aside { display: inline-block; margin-top: 20px; color: #FFFFFF; font: 600 18px/1.3 var(--sans); text-underline-offset: 5px; } .xl-shot { margin: 0; } .xl-shot img { display: block; width: 100%; height: auto; box-shadow: 0 18px 40px rgba(0,0,0,.25); } .xl-shot figcaption { font: 400 14px/1.45 var(--sans); color: #DDE9E6; margin-top: 10px; } .xl-sec { padding: 90px 0; } .xl-sec--alt { background: #FFFFFF; border-top: 1px solid #E4DFDA; border-bottom: 1px solid #E4DFDA; } .xl-head { text-align: center; max-width: 760px; margin: 0 auto 48px; } .xl-head .xl-eyebrow { color: #5A6169; margin-bottom: 10px; } .xl-head h2 { color: var(--head); font: 700 40px/1.2 var(--sans); margin: 0 0 12px; } .xl-head p { margin: 0; font: 400 18px/1.55 var(--sans); color: var(--ink); } .xl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .xl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .xl-card { background: #F7F8F9; border: 1px solid #E1E4E8; display: flex; flex-direction: column; } .xl-card .thumb { height: 196px; border-bottom: 1px solid #E1E4E8; overflow: hidden; position: relative; background-color: #F0F4EA; background-image: radial-gradient(rgba(31,98,92,.14) 1px, transparent 1.2px); background-size: 14px 14px; display: flex; align-items: center; justify-content: center; padding: 18px; } .xl-steps .thumb { padding-top: 52px; } .xl-card .body { padding: 32px 32px 36px; display: flex; flex-direction: column; flex: 1; } .xl-card h3 { font: 500 26px/1.25 var(--sans); margin: 0 0 12px; color: var(--ink); } .xl-steps h3 { font-size: 22px; } .xl-card .body p { margin: 0 0 18px; color: #4A5058; font: 400 17px/1.55 var(--sans); flex: 1; } .xl-card .go { color: var(--head); font: 600 17px/1.4 var(--sans); text-decoration: none; } .xl-card .go::after { content: " \2192"; } .xl-card .go:hover { text-decoration: underline; text-underline-offset: 4px; } .xl-motto { text-align: center; font: 600 26px/1.35 var(--sans); color: var(--head); margin: 40px auto 0; max-width: 760px; } .xl-order { padding: 44px 0 56px; text-align: center; border-top: 1px solid #E4DFDA; } .xl-order p { margin: 0; font: 400 19px/1.5 var(--sans); color: var(--ink); } .xl-order a { font-weight: 600; color: var(--head); text-underline-offset: 5px; white-space: nowrap; } /* кусочки интерфейса в картинках карточек */ .xl .ui { background: #FFFFFF; border: 1px solid #D9DEDB; width: 100%; max-width: 400px; font: 400 13px/1.35 var(--sans); color: var(--ink); box-shadow: 0 4px 14px rgba(31,98,92,.08); } .xl .ui-bar { background: var(--head); color: #FFFFFF; font: 600 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; display: flex; justify-content: space-between; gap: 10px; } .xl .ui-bar--dark { background: #2E2F34; } .xl .ui-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid #EEF0EE; } .xl .k { color: #5A6169; } .xl .sk { display: inline-block; height: 9px; background: #DCE3DF; width: 70px; } .xl .sk--s { width: 40px; } .xl .sk--l { width: 120px; } .xl .sk--d { background: #9FB8B4; } .xl .strike { text-decoration: line-through; color: #5A6169; } .xl .pill { font: 600 11px/1.3 var(--sans); padding: 2px 8px; border: 1px solid currentColor; white-space: nowrap; } .xl .pill--deep { color: var(--head); } .xl .pill--ink { color: #FFFFFF; background: #2E2F34; border-color: #2E2F34; } .xl .pill--warm { color: #8A4A06; background: #FBEBD0; border-color: #F1CA7A; } .xl .tick { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--head); margin-right: 8px; vertical-align: -1px; } .xl .tick--on { background: var(--head); } .xl .dots { display: grid; grid-template-columns: repeat(10, 9px); gap: 4px; } .xl .dots i { width: 9px; height: 9px; background: #D5DDD9; display: block; } .xl .dots i.r { background: #217A75; } .xl .dots i.p { background: var(--accent); } .xl .cap { font: 500 12px/1.3 var(--sans); margin-top: 10px; color: var(--ink); max-width: 130px; } .xl-norm { display: flex; gap: 34px; align-items: flex-start; } .xl-sites { display: flex; align-items: center; } .xl .cells { display: grid; grid-template-columns: repeat(10, 16px); gap: 4px; } .xl .cells i { width: 16px; height: 16px; display: block; background: #217A75; } .xl .cells i.x, .xl .lg-x { background: repeating-linear-gradient(45deg, #C9D2CE 0 2px, #FFFFFF 2px 5px); border: 1px solid #C9D2CE; } .xl .legend { font: 400 12px/1.3 var(--sans); color: var(--ink); display: grid; gap: 6px; margin-left: 22px; } .xl .legend b { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; } .xl .lg-r { background: #217A75; } .xl .lines p { margin: 0 0 6px; height: 8px; background: #E5E9E7; } .xl .lines p.d { background: #9FB8B4; } .xl-brk { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .xl-c { margin-bottom: 10px; } .xl-code { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; } .xl-code .sk { width: 26px; height: 26px; } .xl-erase { border: 1.5px solid var(--ink); text-align: center; padding: 9px; font-weight: 600; margin-top: 10px; } .xl-s1 { display: flex; width: 100%; max-width: 330px; gap: 8px; } .xl-s1 .ui:first-child { flex: 1.4; padding: 10px; } .xl-s1 .ui:last-child { flex: 1; } .xl .num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--head); color: #FFFFFF; font: 700 18px/1 var(--sans); position: absolute; top: 0; left: 0; } .xl .save { display: inline-flex; align-items: center; gap: 6px; background: var(--head); color: #FFFFFF; font: 600 12px/1.3 var(--sans); padding: 6px 12px; margin-top: 10px; } .xl .dn { color: var(--head); } @media (max-width: 1023px) { .xl-hero { padding: 36px 0 48px; } .xl-hero .band { grid-template-columns: 1fr; gap: 36px; } .xl-hero h1 { font-size: 38px; } .xl-sec { padding: 56px 0; } .xl-head { margin-bottom: 36px; } .xl-head h2 { font-size: 30px; } .xl-steps { grid-template-columns: 1fr; gap: 24px; } .xl-card .body { padding: 28px 28px 32px; } .xl-card h3 { font-size: 24px; } .xl-motto { font-size: 22px; } } @media (max-width: 759px) { .xl-grid { grid-template-columns: 1fr; gap: 24px; } .xl-stores .btn--store { width: 100%; justify-content: center; } } /* «Кто и как проверяет ваш бизнес» на how-it-works (21.09.2026): абзацы с отбивкой, как у соседних разделов; мера строки — общая --prose. */ .howwork__p { margin-top: var(--sp-1); } .howwork__p a { color: var(--head); text-underline-offset: 3px; } /* ═══ КНОПКИ И БЛОК РАСШИРЕНИЯ — ДИЗАЙН РАУНДА 2 (21.09.2026) ═════════════ Первую реализацию A/F фаундер забраковал: «кнопки — полный брак, стрелки вытянутые, текст не выровнен, контраст ужасен; пока дизайнеры не дадут не ниже 9,5/10 — не возвращайся». Три дизайнера, два независимых оценщика, четыре раунда; вариант d4 получил 9,5 у обоих (Content/landing/design/proposals/round2/d4/ + REVIEW_*.md). Кнопка: + + квадратик с рисунком стрелки #pd-arr (разметку достраивает станок, pd_buttons). Лестница: высота H, отступ квадратика r (сверху = справа = снизу), квадратик T = H − 2r, стрелка = T/2: S 44/6/32 (шапка) · M 52/8/36 (обычные) · L 60/10/40 (заказ, F блока). Надпись стоит по центру по высоте заглавных (text-box). Место и ширину кнопки по-прежнему задают правила мест (первый экран, карточки тарифов); ВИД — только этот слой, поэтому спорные свойства с !important: старые правила мест (.screen--tram .btn, .hero__text a.btn.btn--free …) иначе перебивали бы фон и тень, как это уже было с размером кнопки шапки. */ .btn.pdb { --h:52px; --r:8px; --t:36px; --fs:17px; --fw:600; --pl:20px; --gap:12px; --tr:8px; --bg:#CD4A01; --bg-h:#BD4401; --bg-a:#A83C00; --fg:#FFFFFF; --bd:0 0 #0000; --tile:rgba(255,255,255,.18); --tile-h:rgba(255,255,255,.26); --edge:rgba(150,52,0,.55); --tint:90,28,0; --sh:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px var(--edge), 0 1px 2px rgba(var(--tint),.22), 0 4px 10px -2px rgba(var(--tint),.24), 0 14px 28px -10px rgba(var(--tint),.34); --sh-h:inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px var(--edge), 0 2px 4px rgba(var(--tint),.22), 0 8px 16px -4px rgba(var(--tint),.3), 0 22px 36px -12px rgba(var(--tint),.42); --sh-a:inset 0 1px 2px rgba(var(--tint),.3), 0 0 0 1px var(--edge), 0 1px 2px rgba(var(--tint),.2); --ring:0 0 #0000; --focus:#15231A; --halo:0 0 0 2px #FFFFFF; position: relative; isolation: isolate; display: inline-flex !important; align-items: center !important; justify-content: space-between; gap: var(--gap); height: var(--h) !important; min-height: var(--h) !important; max-width: 100%; padding: 0 var(--r) 0 var(--pl) !important; border: 0 !important; border-radius: calc(var(--tr) + var(--r)) !important; background: var(--bg) !important; color: var(--fg) !important; box-shadow: var(--ring), var(--bd), var(--sh) !important; font: var(--fw) var(--fs)/1 var(--sans) !important; letter-spacing: -.005em !important; text-transform: none !important; white-space: nowrap; text-decoration: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, background-color .18s ease; } .btn.pdb::after { content: none !important; } /* снять стрелку-символ первой реализации */ /* 🔴 overflow: clip + 8 px запаса, НЕ hidden: text-box обрезает коробку надписи по высоте заглавных, и hidden срезал хвосты y/p/g («Start mu check») — брак нашёл оценщик на живом сайте 21.09; в макете d4 так и было. */ .pdb__label { display: block; min-width: 0; flex: 0 1 auto; overflow: clip; overflow-clip-margin: 8px; text-overflow: ellipsis; text-box: trim-both cap alphabetic; } @supports not (text-box: trim-both cap alphabetic) { .pdb__label { padding-top: .16em; } } .pdb__tile { flex: none; display: grid; place-items: center; width: var(--t); height: var(--t); border-radius: var(--tr); background: var(--tile); transition: background-color .18s ease; } .pdb__tile svg { width: calc(var(--t) / 2); height: calc(var(--t) / 2); overflow: visible; transition: transform .18s cubic-bezier(.2,.7,.2,1); } /* размеры */ .btn.pdb.btn--sm { --h:44px; --r:6px; --t:32px; --fs:15px; --pl:16px; --gap:10px; --tr:6px; } .hero__text .actblock .btn.pdb:not(.btn--store), .btn.pdb.xa__btn { --h:60px; --r:10px; --t:40px; --fs:19px; --fw:700; --pl:24px; --gap:14px; --tr:8px; } /* виды */ .btn.pdb.btn--free { --bg:#1F625C; --bg-h:#1B5752; --bg-a:#174A45; --edge:rgba(12,50,46,.55); --tint:10,40,36; } .hero__text .btn.pdb.btn--free { --edge:rgba(255,255,255,.2); } .btn.pdb.btn--ghost { --bg:transparent; --bg-h:rgba(31,98,92,.06); --bg-a:rgba(31,98,92,.12); --fg:#1F625C; --bd:inset 0 0 0 1.5px #1F625C; --sh:0 0 #0000; --sh-h:0 0 #0000; --sh-a:0 0 #0000; --tile:rgba(31,98,92,.1); --tile-h:rgba(31,98,92,.16); } .screen--tram .btn.pdb.btn--ghost { --fg:#15231A; --bd:inset 0 0 0 1.5px #15231A; --tile:rgba(21,35,26,.1); --tile-h:rgba(21,35,26,.16); } .screen--tram .btn.pdb:not(.btn--ghost) { --bg:#15231A; --bg-h:#1C2D23; --bg-a:#0E1711; --edge:rgba(0,0,0,.35); --tint:0,0,0; --tile:rgba(255,255,255,.14); --tile-h:rgba(255,255,255,.2); } /* F «Свечение» — только бесплатное: тёмная, в покое неподвижный золотой край 1,5 px; при наведении и фокусе кайма делает два оборота (~5 с) и гаснет. */ @property --pd-ang { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes pd-turn2 { 0% { --pd-ang: 0deg; opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { --pd-ang: 720deg; opacity: 0; } } .btn.pdb.pdb--f { --bg:transparent; --bg-h:transparent; --bg-a:transparent; --body:#15231A; --edge:rgba(0,0,0,.3); --tint:0,0,0; --tile:rgba(241,202,122,.16); --tile-h:rgba(241,202,122,.24); } .btn.pdb.pdb--f .pdb__tile { color: #F1CA7A; box-shadow: inset 0 0 0 1px rgba(241,202,122,.28); } .btn.pdb.pdb--f::after { content: "" !important; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 1.5px solid transparent; pointer-events: none; width: auto; height: auto; transform: none !important; background: linear-gradient(var(--body), var(--body)) padding-box, linear-gradient(#E3B458, #E3B458) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); } .btn.pdb.pdb--f::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1.5px; opacity: 0; pointer-events: none; animation: none; filter: drop-shadow(0 0 5px rgba(241,202,122,.55)); background: conic-gradient(from var(--pd-ang), #F1CA7A, #CD4A01 25%, #CD9015 50%, #3E9A8F 75%, #F1CA7A); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .btn.pdb.pdb--f:focus-visible::before { animation: pd-turn2 5s linear 1 both; } .btn.pdb.pdb--f:active { --body:#0E1711; } .btn.pdb .mk { flex: none; width: 20px !important; height: 20px !important; margin: 0 -2px 0 -2px; } .pdb__free { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: #F1CA7A; color: #15231A; font: 600 13px/1 var(--sans); margin-left: auto; } .pdb__free span { text-box: trim-both cap alphabetic; } .btn.pdb.btn--store { justify-content: flex-start; } /* состояния: наведение — только мышь; нажатие; фокус с клавиатуры */ @media (hover: hover) and (pointer: fine) { .btn.pdb:hover { background: var(--bg-h) !important; box-shadow: var(--ring), var(--bd), var(--sh-h) !important; transform: translateY(-1px); } .btn.pdb:hover .pdb__tile { background: var(--tile-h); } .btn.pdb:hover .pdb__tile svg { transform: translateX(3px); } .btn.pdb.pdb--f:hover::before { animation: pd-turn2 5s linear 1 both; } } .btn.pdb:active { background: var(--bg-a) !important; box-shadow: var(--ring), var(--bd), var(--sh-a) !important; transform: scale(.985); transition-duration: .06s; } .btn.pdb:focus { outline: none; } .btn.pdb:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px !important; --ring: var(--halo); } .hero .btn.pdb, .top--over .btn.pdb { --focus:#F1CA7A; --halo:0 0 0 9px rgba(241,202,122,.28); } @media (prefers-reduced-motion: reduce) { .btn.pdb, .btn.pdb *, .btn.pdb::before, .btn.pdb::after { transition: none !important; animation: none !important; } .btn.pdb:hover, .btn.pdb:active, .btn.pdb:hover .pdb__tile svg { transform: none !important; } } /* «Log in» в шапке — ссылка, но в строй кнопки S: 44, мягкие углы, обычные буквы */ .acts__list { height: 44px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 12px; text-transform: none; letter-spacing: -.005em; font: 600 15px/1 var(--sans); } .acts__list:focus-visible { outline: 3px solid #15231A; outline-offset: 2px; } .top--over .acts__list:focus-visible { outline-color: #F1CA7A; } /* ── блок расширения (d4) ───────────────────────────────────────────── */ .pdx { background: #FFFFFF; } .pdx__top { background: #CD9015; padding: 22px 16px 50px; } .pdx__badge { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: #15231A; color: #F1CA7A; font: 600 13px/1 var(--sans); white-space: nowrap; } .pdx__badge span { text-box: trim-both cap alphabetic; } .pdx__badge i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #F1CA7A; } .pdx__h { margin: 14px 0 0; color: #15231A; font: 700 32px/1.12 var(--sans); letter-spacing: -.01em; max-width: 18ch; text-wrap: balance; } .pdx__sheet { position: relative; margin-top: -28px; background: #FFFFFF; border-radius: 20px 20px 0 0; padding: 18px 16px 30px; } .pdx__tie { margin: 0 0 14px; font: 600 18px/1.35 var(--sans); color: #15231A; } .pdx__benefits { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; } .pdx__benefits li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; } .pdx__ico { width: 40px; height: 40px; border-radius: 10px; background: #FBF1DC; display: grid; place-items: center; color: #15231A; } .pdx__ico svg { width: 22px; height: 22px; } .pdx__ico path, .pdx__ico circle, .pdx__ico rect { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pdx__benefits h3 { margin: 1px 0 2px; font: 700 16px/1.3 var(--sans); color: #15231A; } .pdx__benefits p { margin: 0; font: 400 15px/1.42 var(--sans); color: #4A4F55; text-wrap: pretty; } .pdx__crops { display: grid; gap: 12px; margin: 0 0 18px; } .pdx__crop { display: grid; gap: 8px; } .pdx__cw { position: relative; } .pdx__ci { position: relative; overflow: hidden; border: 1px solid #E6E1D8; border-radius: 12px; background: #F3F4EB; box-shadow: 0 10px 24px -14px rgba(21,35,26,.3); } .pdx__cv { position: relative; overflow: hidden; } .pdx__cv img { width: 139.942%; max-width: none; height: auto; margin-left: -32.362%; display: block; } .pdx__crop--1 .pdx__cv { aspect-ratio: 343/250; } .pdx__crop--1 .pdx__cv img { margin-top: -32.653%; } .pdx__crop--2 .pdx__ci { padding: 8px 0 10px; } .pdx__crop--2 .pdx__cv { aspect-ratio: 343/57; } .pdx__crop--2 .pdx__cv img { margin-top: -206.414%; } .pdx__hl { position: absolute; border: 2px solid #CD4A01; border-radius: 8px; pointer-events: none; } .pdx__pin { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: #15231A; color: #FFFFFF; font: 700 13px/26px var(--sans); text-align: center; box-shadow: 0 0 0 2px #FFFFFF, 0 2px 6px rgba(0,0,0,.3); } .pdx__crop .pdx__pin { left: -7px; top: -7px; } .pdx__crop--2 .pdx__pin { top: 50%; margin-top: -13px; } .pdx__say { display: grid; grid-template-columns: 26px 1fr; gap: 10px; margin: 0; font: 400 15px/1.42 var(--sans); color: #4A4F55; text-wrap: pretty; } .pdx__say b { color: #15231A; font-weight: 700; } .pdx__say .n { width: 26px; height: 26px; border-radius: 50%; background: #15231A; color: #FFFFFF; font: 700 13px/26px var(--sans); text-align: center; } .pdx__crops .pdx__say { grid-template-columns: 1fr; } .pdx__shot, .pdx__notes { display: none; } .pdx__cta .btn.pdb { display: flex !important; width: 100%; } .pdx__cta p { margin: 8px 0 0; font: 400 14px/1.4 var(--sans); color: #4A4F55; text-align: center; text-wrap: balance; } @media (max-width: 399px) { .pdx__cta .btn.pdb { --h:52px; --r:8px; --t:36px; --fs:17px; --fw:600; --pl:20px; --gap:12px; --tr:8px; } } @media (min-width: 1000px) { .pdx__top { padding: 56px 32px 128px; } .pdx__top > div { max-width: 1216px; margin: 0 auto; } .pdx__badge { height: 34px; padding: 0 14px; font-size: 14px; } .pdx__h { font-size: 52px; line-height: 1.1; max-width: none; } .pdx__sheet { margin: -72px auto 0; max-width: 1280px; padding: 36px 32px 64px; box-shadow: 0 24px 48px rgba(21,35,26,.18); } .pdx__tie { font-size: 22px; margin: 0 0 24px; } .pdx__benefits { grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0 0 40px; } .pdx__benefits p { font-size: 16px; } .pdx__fig { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: stretch; } .pdx__crops { display: none; } .pdx__shot { display: block; margin: 0; border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(21,35,26,.1), 0 24px 48px rgba(21,35,26,.18); } .pdx__shot > div { position: relative; } .pdx__shot img { width: 100%; height: auto; display: block; } .pdx__notes { display: flex; flex-direction: column; justify-content: space-between; list-style: none; margin: 0; padding: 24px; gap: 24px; background: #FAF8F7; border: 1px solid #E6E1D8; border-radius: 14px; } .pdx__notes .pdx__say { font-size: 16px; } .pdx__cta { margin-top: 40px; display: flex; align-items: center; gap: 20px; } .pdx__cta .btn.pdb { display: inline-flex !important; width: auto; } .pdx__cta p { margin: 0; text-align: left; } } /* ТЕЛЕФОН ≤480: надпись кнопки переносится на вторую строку, а не обрезается многоточием и не выходит за экран (замеры 21.09: «What the ext…» на 360/375; es/fr «Abrir el informe de muestra completo» выходила на 20 и 11 точек). text-box оставлен: он обрезает верх первой и низ последней строки, центровка сохраняется и для одной строки, и для двух. */ .sample__cap { min-width: 0; } /* на любой ширине, не только на телефоне: на 1024 fr «Ouvrir l'exemple de rapport» тоже резался (замер 21.09); одна строка от правила не меняется — высота не меньше ступени лестницы, отступы те же */ .btn.pdb { white-space: normal; height: auto !important; min-height: var(--h) !important; padding-top: var(--r) !important; padding-bottom: var(--r) !important; } /* воздух перенесённой надписи — полем самой надписи, а не кнопки: отступ кнопки r+6 поднял ВСЕ кнопки на 12 точек (шапка снова 56 вместо 44 — поймал оценщик 21.09); поле надписи одной строке высоту не добавляет */ .btn.pdb .pdb__label { margin-block: 6px; } .btn.pdb .pdb__label { text-overflow: clip; line-height: 1.22; text-align: left; } /* перенесённая надпись не берёт центровку карточки */ @media (max-width: 400px) { .hero__text .actblock .btn.pdb, .btn.pdb.xa__btn { --fs:17px; --pl:18px; } } /* Кнопки магазинов на узком телефоне (≤399): «Installer dans Chrome» + метка «gratuit» выходили за экран на 3 точки при 360 (замер 21.09) — ужаты отступ, промежутки и кегль. */ @media (max-width: 399px) { .btn.pdb.btn--store { --pl:14px; --gap:8px; --fs:16px; } } /* Шапка на телефоне (≤400): кнопка заказа сжимала знак фирмы до 8–23 точек в es/fr/pt — знак не сжимается, у кнопки короткая надпись («Start», «Empezar», «Começar», «Commencer»). */ .btn.pdb .cta-sm { display: none; } .top .brand { flex: none; min-width: 40px; } @media (max-width: 400px) { .btn.pdb .cta-lg { display: none; } .btn.pdb .cta-sm { display: inline; } /* 03.10.2026 (PLAN №212): правило «на узком телефоне — только знак, название прятать» снято. Название фирмы в шапке видно всегда (правило фаундера 04.09); место под него находят ступени кегля из блока шапки посадочных ниже — с 03.10 они действуют на всех страницах, а не только на трёх посадочных. */ .top .acts { margin-left: auto; } } /* Рамка выбора с клавиатуры на тёмном фоне — светлая охра (замер 21.09: меню поверх фото и подвал 1,88:1, кнопки F на зелёной полосе 2,3:1). */ .top--over .nav a:focus-visible, .top--over .brand:focus-visible, .top--over .langs__btn:focus-visible, .foot a:focus-visible, .xl-hero a:focus-visible { outline: 3px solid #F1CA7A; outline-offset: 2px; border-radius: 6px; } .xl-hero .btn.pdb { --focus:#F1CA7A; --halo:0 0 0 9px rgba(241,202,122,.28); } /* Пункты выпадающего меню на телефоне — не ниже 44 точек (было 40). */ @media (max-width: 1439px) { .top .nav a { min-height: 48px !important; } } /* «Open My list →» — стрелка-рисунок вместо символа шрифта. */ .xl-aside { display: inline-flex; align-items: center; gap: 8px; } .xl-aside svg { width: 18px; height: 18px; transition: transform .18s cubic-bezier(.2,.7,.2,1); } @media (hover: hover) and (pointer: fine) { .xl-aside:hover svg { transform: translateX(3px); } } /* Карточки «The extension» / «The order desk» под первым экраном на телефоне: поля 60 точек оставляли кнопке 215 — надпись резалась или шла в три строки (замер оценщика 21.09). Поля 24, кнопка во всю ширину карточки. */ @media (max-width: 480px) { .duo__card { padding-left: 24px !important; padding-right: 24px !important; } .duo__card .btn.pdb { width: 100%; align-self: stretch; } } /* Кнопки магазинов на первом экране страницы расширения — размер M и своя ширина: под правилом крупной кнопки с потолком ширины надпись es/pt/fr обрезалась («Installer dans Chrome» + «gratuit», замер 21.09 на 1440). */ .hero__text .actblock--stores .btn.pdb.btn--store { width: auto !important; max-width: 100% !important; } /* Мелочи оценщика доступности до 9,5 (21.09): перенесённой надписи — воздух (отступ r+6: одна строка по-прежнему ровно высотой ступени, две — ~64); ссылки новой страницы — не ниже 24 точек; блок расширения на телефоне es/fr — не больше 1,8 экрана (было 1,9): плотнее шапка и выгоды. */ .xl-card .go, .xl-order a, .xl-aside { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 0; } @media (max-width: 999px) { .pdx__top { padding: 16px 16px 38px; } .pdx__h { font-size: 28px; line-height: 1.1; margin-top: 10px; } .pdx__sheet { padding: 16px 16px 24px; } .pdx__tie { font-size: 16px; margin-bottom: 10px; } .pdx__benefits { gap: 8px; margin-bottom: 16px; } .pdx__benefits p { font-size: 14px; line-height: 1.38; } .pdx__crops { gap: 10px; margin-bottom: 14px; } } /* ТЕЛЕФОН ≤767, шапка (фаундер 21.09): «А зачем на телефоне две start my check и нет входа в кабинет. Замени верхнюю кнопку на log in». Кнопка заказа в шапке на телефоне и раньше пряталась (.top .acts .btn--sm) — новый слой кнопок перебил это своим display:!important. Возвращено скрытие, вместо неё «Log in». */ @media (max-width: 767px) { .top .acts .btn.pdb.btn--sm { display: none !important; } .top .acts .acts__list { display: inline-flex !important; } } /* Кнопки заказа в шапке больше нет ни на одном экране (фаундер 21.09) — «Log in» стоит в шапке на всех ширинах, его дубль в выпадающем меню снят (раньше на 768–1099 он уходил в меню, освобождая место кнопке заказа). */ .top .acts .acts__list { display: inline-flex !important; } .top .nav .nav__list { display: none !important; } /* ── РАСШИРЕНИЕ И «МОЙ СПИСОК», ВЕРСИЯ 3 (аудит 21.09.2026) ───────────── Раскладка образца Hunter (классы xl-*) сохранена; картинки — настоящие снимки панели (assets/gen/panel-en-*.webp), не рисунки. Снимок не перекрашиваем: акценты только снаружи (рамка, тень). */ .xe-shot { margin: 0; justify-self: end; width: 100%; max-width: 440px; } .xe-shot img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 22px 48px rgba(0,0,0,.30); background: #FFFFFF; } .xe-shot figcaption { font: 400 14px/1.45 var(--sans); color: #DDE9E6; margin-top: 12px; } .xe .xl-hero { padding: 56px 0 72px; } .xe .xl-hero h1 { font-size: 48px; } .xe .xl-hero .band { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .xe-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .xe-card .xe-thumb { height: 300px; overflow: hidden; background: #EEF1EF; border-bottom: 1px solid #E1E4E8; padding: 24px 24px 0; position: relative; } .xe-card .xe-thumb img { display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0; box-shadow: 0 8px 22px rgba(21,35,26,.14); } .xe-card .xe-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(rgba(238,241,239,0), #EEF1EF); } .xe-card--text .body { padding: 30px 30px 32px; } .xe-card--text h3 { font-size: 22px; } .xe-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--head); color: #FFFFFF; font: 700 18px/1 var(--sans); margin-bottom: 16px; } .xe-how { max-width: 760px; margin: -12px auto 28px; text-align: center; font: 400 18px/1.55 var(--sans); color: var(--ink); } .xe-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; } .xe-link { display: inline-flex; align-items: center; min-height: 24px; color: var(--head); font: 600 18px/1.35 var(--sans); text-underline-offset: 5px; } .xe-link--light { color: #FFFFFF; } .xe-center { justify-content: center; text-align: center; } .xl-stores.xe-center { margin-top: 36px; } .xe-more { margin: 24px 0 0; } .xe-plines { list-style: none; margin: 0 auto 28px; padding: 0; max-width: 760px; display: grid; gap: 12px; } .xe-plines li { position: relative; padding-left: 34px; font: 400 19px/1.5 var(--sans); color: var(--ink); } .xe-plines li::before { content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 10px; border-left: 3px solid var(--head); border-bottom: 3px solid var(--head); transform: rotate(-45deg); } .xe-terms { max-width: 900px; margin: 0 auto; border-top: 1px solid #E4DFDA; padding-top: 18px; } .xe-terms summary { cursor: pointer; font: 600 18px/1.4 var(--sans); color: var(--head); min-height: 24px; } .xe-terms[open] summary { margin-bottom: 20px; } .xe-bridge { background: var(--head); color: #FFFFFF; padding: 80px 0; text-align: center; } .xe-bridge h2 { font: 700 40px/1.2 var(--sans); margin: 0 auto 18px; max-width: 900px; color: #FFFFFF; } .xe-bridge p { font: 400 19px/1.55 var(--sans); margin: 0 auto 30px; max-width: 760px; color: #E6EFEC; } .xe-bridge .xe-link { color: #FFFFFF; } .xc-hero .band { grid-template-columns: 1fr !important; } .xc-hero .xl-hero__text { max-width: 760px; } .xc-hero .xe-acts { justify-content: flex-start; } @media (max-width: 999px) { .xe .xl-hero .band { grid-template-columns: 1fr; } .xe .xl-hero h1 { font-size: 36px; } .xe-shot { justify-self: center; } .xe-grid3 { grid-template-columns: 1fr; gap: 24px; } .xe-card .xe-thumb { height: 260px; } .xe-bridge { padding: 56px 0; } .xe-bridge h2 { font-size: 28px; } .xe-plines li { font-size: 17px; } } /* Жёлтая полоса главной, версия 3: выгоды слева столбиком, снимок справа. */ .pdx__h2 { display: block; font-size: .56em; line-height: 1.25; font-weight: 600; margin-top: 8px; } .pdx3 { display: grid; gap: 24px; } .pdx--v3 .pdx__benefits { grid-template-columns: 1fr; margin: 0; } .pdx3__shot { margin: 0; } .pdx3__shot img { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; border: 1px solid #E6E1D8; border-radius: 14px; box-shadow: 0 14px 34px rgba(21,35,26,.16); } .pdx3__shot figcaption { font: 400 14px/1.45 var(--sans); color: #4A4F55; margin: 10px auto 0; max-width: 440px; } .pdx3__cta { margin-top: 28px; } .pdx3__cta .xl-stores { justify-content: center; } .pdx3__cta p { margin: 12px 0 0; font: 400 15px/1.5 var(--sans); color: #4A4F55; text-align: center; } .pdx3__cta .xe-link { font-size: 16px; } @media (min-width: 1000px) { .pdx3 { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; } .pdx--v3 .pdx__benefits { gap: 28px; } .pdx--v3 .pdx__benefits p { font-size: 17px; } .pdx--v3 .pdx__benefits h3 { font-size: 19px; } .pdx3__cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .pdx3__cta .xl-stores { justify-content: flex-start; } .pdx3__cta p { margin: 0; text-align: left; } } /* Версия 3, после первого показа: текст первого экрана — к верху кадра, а не по центру (иначе над заголовком пустота); заголовок в две строки; мост к платной проверке — на светлой охре, чтобы не сливался с зелёным подвалом. */ .xe .xl-hero .band { align-items: start; } .xe .xl-hero .xl-hero__text { padding-top: 24px; } .xe .xl-hero h1 { font-size: 44px; } .xe-bridge { background: #FBF1DC; color: #15231A; border-top: 1px solid #F1CA7A; } .xe-bridge h2 { color: #15231A; } .xe-bridge p { color: #3A3F45; } .xe-bridge .xe-link { color: var(--head); } @media (max-width: 999px) { .xe .xl-hero h1 { font-size: 34px; } .xe .xl-hero .xl-hero__text { padding-top: 0; } } /* Кнопки перехода на главной (фаундер 21.09): к странице расширения — на жёлтой полосе рядом с магазинами; к «Моему списку» — в его разделе. */ .xe-acts--start { justify-content: flex-start; margin-top: 28px; } .pdx3__cta .xl-stores { align-items: center; } .xe .xl-hero h1 { text-wrap: balance; } /* Круг 4 (дизайнер): без одного слова на последней строке; снимок выше на ноутбуке; испанский блок — одна карточка; справа в «Моём списке» — три вопроса текстом. */ .xl h1, .xl h2, .xl h3, .pdx__h, .screen h2 { text-wrap: balance; } .xe .xl-hero { padding-top: 40px; } .xe .xl-hero .xl-hero__text { padding-top: 8px; } .xe-wide { max-width: 900px; margin: 0 auto; } .xe-wide .body h3:not(:first-child) { margin-top: 24px; } .xc-hero .band { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important; align-items: center; } .xc-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .xc-qs li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 18px 22px; font: 600 24px/1.3 var(--sans); color: #FFFFFF; } .pdx3__main .pdx3__cta { margin-top: 32px; } .pdx3__main .pdx3__cta .xl-stores { justify-content: flex-start; } @media (max-width: 999px) { .xc-hero .band { grid-template-columns: 1fr !important; } .xc-qs li { font-size: 19px; padding: 14px 18px; } .pdx3__main .pdx3__cta .xl-stores { justify-content: center; } } @media (min-width: 1000px) { .pdx3__main .pdx3__cta { display: block; } .pdx3__main .pdx3__cta p { margin-top: 14px; } } /* Заголовок страницы расширения на ноутбуке — без одного слова на строке. */ @media (min-width: 1000px) { .xe .xl-hero .band { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } .xe .xl-hero h1 { font-size: 42px; } } /* Фаундер 21.09 (скриншот главной): «кнопки длинные и непропорциональные». Ширина 420–520 осталась от прежних кнопок высотой 72–92; у кнопок раунда 2 высота 60, и та же ширина растягивала их в полосу. На компьютере ширина — по надписи (не уже 280); на телефоне — прежнее правило во всю колонку. */ @media (min-width: 768px) { .hero__text .actblock .btn.pdb:not(.btn--store) { width: auto !important; min-width: 280px; max-width: 100%; } } /* Фаундер 21.09: «Кнопка see должна быть анимированной и яркой». btn--hot — яркая охра с тёмным текстом (#15231A на #FFC83D ≈ 11:1), живёт всё время: блик пробегает раз в 4 с, стрелка подталкивается, мягко дышит свечение. При «уменьшить движение» — без анимации (общее правило .btn.pdb выше). */ .btn.pdb.btn--hot { --bg:#FFC83D; --bg-h:#FFD260; --bg-a:#F2B71F; --fg:#15231A; --tile:rgba(21,35,26,.14); --tile-h:rgba(21,35,26,.22); --sh:0 6px 18px rgba(214,150,10,.38); --sh-h:0 10px 26px rgba(214,150,10,.48); position: relative; overflow: hidden; isolation: isolate; animation: pd-hot-glow 2.8s ease-in-out infinite; } .btn.pdb.btn--hot::after { content: "" !important; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; pointer-events: none; transform: skewX(-20deg); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0)); animation: pd-hot-sheen 4s ease-in-out infinite; } .btn.pdb.btn--hot .pdb__tile svg { animation: pd-hot-nudge 2.8s ease-in-out infinite; } @keyframes pd-hot-sheen { 0%, 55% { left: -60%; } 85%, 100% { left: 125%; } } @keyframes pd-hot-nudge { 0%, 60%, 100% { transform: translateX(0); } 75% { transform: translateX(4px); } } @keyframes pd-hot-glow { 0%, 100% { box-shadow: 0 6px 18px rgba(214,150,10,.35), 0 0 0 0 rgba(255,200,61,.55); } 50% { box-shadow: 0 8px 22px rgba(214,150,10,.45), 0 0 0 8px rgba(255,200,61,0); } } @media (prefers-reduced-motion: reduce) { .btn.pdb.btn--hot, .btn.pdb.btn--hot::after, .btn.pdb.btn--hot .pdb__tile svg { animation: none !important; } } .btn.pdb.btn--hot::after { width: 60%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 100%); animation-duration: 3.2s; } /* Фаундер 21.09: «сделай тёмно-зелёный фон и золотой шрифт». Анимация та же (блик, стрелка, свечение), свечение — золотое. #F1CA7A на #173F38 ≈ 8:1. */ .btn.pdb.btn--hot { --bg:#173F38; --bg-h:#1D4C44; --bg-a:#12332D; --fg:#F1CA7A; --tile:rgba(241,202,122,.16); --tile-h:rgba(241,202,122,.26); box-shadow: 0 0 0 1px rgba(241,202,122,.45) inset; animation-name: pd-hot-glow2; } .btn.pdb.btn--hot .pdb__tile { color: #F1CA7A; box-shadow: inset 0 0 0 1px rgba(241,202,122,.35); } .btn.pdb.btn--hot::after { background: linear-gradient(90deg, rgba(241,202,122,0) 0%, rgba(241,202,122,.38) 50%, rgba(241,202,122,0) 100%); } @keyframes pd-hot-glow2 { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(241,202,122,.45), 0 6px 18px rgba(21,35,26,.30), 0 0 0 0 rgba(241,202,122,.50); } 50% { box-shadow: inset 0 0 0 1px rgba(241,202,122,.60), 0 8px 22px rgba(21,35,26,.38), 0 0 0 8px rgba(241,202,122,0); } } /* Язык отчёта под кнопкой образца (фаундер 22.09). */ .sample__cap .sample__lang { font-weight: 600; margin-top: 4px; } /* Личный кабинет (22.09): статусы дела — те самые строки, что показывает кабинет. */ .xacc-status { list-style: none; counter-reset: st; max-width: 820px; margin: 0 auto; padding: 0; display: grid; gap: 12px; } .xacc-status li { counter-increment: st; position: relative; padding: 16px 20px 16px 64px; background: #FFFFFF; border: 1px solid #E1E4E8; border-radius: 12px; font: 500 18px/1.45 var(--sans); color: var(--ink); } .xacc-status li::before { content: counter(st); position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--head); color: #FFFFFF; display: grid; place-items: center; font: 700 15px/1 var(--sans); } .xacc .xe-plines + .xl-head { margin-top: 56px; } @media (max-width: 999px) { .xacc-status li { font-size: 16px; padding-left: 58px; } } /* Личный кабинет, версия 2 (22.09): справа — настоящие строки статусов; под каждым шагом — строка, которую кабинет покажет в этот момент. */ .xacc-side { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; padding: 22px 24px; } .xacc-side__l { margin: 0 0 12px; font: 600 13px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #F1CA7A; } .xacc-side ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; } .xacc-side li { counter-increment: s; position: relative; padding: 10px 14px 10px 46px; border-radius: 10px; background: rgba(255,255,255,.08); font: 500 16px/1.4 var(--sans); color: #FFFFFF; } .xacc-side li::before { content: counter(s); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: #F1CA7A; color: #15231A; display: grid; place-items: center; font: 700 13px/1 var(--sans); } .xacc-side__no { margin: 12px 0 0; font: 400 14px/1.4 var(--sans); color: #C9DAD6; } .xacc-st { margin: 16px 0 0 !important; padding-top: 14px; border-top: 1px dashed #D5DAD7; font: 500 15px/1.45 var(--sans) !important; color: var(--head) !important; flex: 0 !important; } .xacc-st span { display: block; font: 600 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #5A6169; margin-bottom: 4px; } .xacc-plain { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: 12px; } .xacc-plain li { position: relative; padding-left: 28px; font: 400 19px/1.5 var(--sans); color: var(--ink); } .xacc-plain li::before { content: "—"; position: absolute; left: 0; color: #5A6169; } .xacc-link { margin-top: 24px; font-weight: 600; } @media (min-width: 1000px) { .xacc .xc-hero .band { align-items: start; } } @media (max-width: 767px) { .xacc-steps { gap: 0; } .xacc-steps .xl-card { border: 0; border-bottom: 1px solid #E1E4E8; background: transparent; } .xacc-steps .xl-card .body { padding: 20px 0; } .xacc-side li { font-size: 15px; } .xacc-plain li { font-size: 17px; } } /* Кабинет, версия 3 (22.09): на телефоне статусы только в шагах (не дважды); ссылка «Log in» по центру кнопки; «Or: Not a fit» — прежним цветом. */ @media (max-width: 767px) { .xacc-side { display: none; } } .xe-acts { align-items: center; } .xe-acts > .btn.pdb { margin-top: 0 !important; margin-bottom: 0 !important; } .xe-acts > .xe-link { align-self: center; } .xacc-side__no { color: #DDE9E6; } /* Телефон (22.09): расширение ставится на компьютере — на телефоне вместо кнопок магазинов честная строка и письмо самому себе. На компьютере — как было. */ .xe-phone { display: none; } @media (max-width: 767px) { .xe-phone { display: block; margin: 8px 0 12px; } .xe-phone p { margin: 0 0 12px; font: 600 17px/1.45 var(--sans); } .xe .xl-hero .xl-stores, .pdx3__cta .xl-stores > .btn--store { display: none !important; } .pdx3__cta .xe-phone p { color: #15231A; } } /* Кнопка к странице кабинета в карточке главной (фаундер 22.09). */ .xacc-cardbtn { margin: 16px 0 0; } .xacc-link + .xe-acts--start { margin-top: 12px; } /* ═══ Рекламная посадочная «business for sale» (Ops/182, 24.09.2026) ═════ Первый экран v2 — слово фаундера 29.09.2026 «Да». Макет, замеры и тексты: Content/landing/design/bfs_first_screen_2026-09-29/v2 (правила bfs2_v2.css перенесены сюда, имена .bfs2-* → .bfs-*). Новых цветов нет: #1F625C (полоса), #FFFFFF, #DDE9E6 (мелкий текст), #F1CA7A (золото подсказки и галочек), оранжевая кнопка — одна, кнопка заказа. Порядок в разметке — порядок чтения на телефоне: заголовок → «что покажет отчёт» → поле + кнопка → «платите, только если возьмёмся» → любая страна, срок и язык, гарантия 4 частей → кто мы. На компьютере правая колонка: кто мы сверху, гарантии под ним. */ .bfs .xl-hero .band { grid-template-columns: 1fr; } .bfs-hero { padding: 40px 0 44px; } .bfs-hero h1 { font-size: 44px; line-height: 1.12; margin: 0 0 18px; } .bfs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px 56px; align-items: start; } .bfs-main { min-width: 0; } .bfs-sub { margin: 0 0 8px; font: 400 18px/1.4 var(--sans); color: #DDE9E6; } .bfs-get { list-style: none; margin: 0 0 20px; padding: 0; font: 600 19px/1.35 var(--sans); color: #FFFFFF; } .bfs-get li { position: relative; padding-left: 22px; } .bfs-get li + li { margin-top: 6px; } .bfs-get li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: #F1CA7A; } /* Подпись поля — только для чтения с экрана; в самом поле стоит «(необязательно)». */ .bfs-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .bfs-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .bfs-form__in { flex: 1 1 260px; min-width: 0; font: 400 16px/1.3 var(--sans); padding: 13px 14px; border: 1px solid rgba(255,255,255,.55); border-radius: 10px; background: #FFFFFF; color: #15231A; } .bfs-form__in::placeholder { color: #5E6B66; } .bfs-form .bfs-form__go { flex: 0 0 auto; margin: 0; } .bfs-hint { margin: 10px 0 0; font: 700 15px/1.4 var(--sans); color: #F1CA7A; } /* Строки с галочкой: «платите, только если…», любая страна, срок и язык, гарантия. */ .bfs-ok { position: relative; padding-left: 26px; } .bfs-ok::before { content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; background: #F1CA7A; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } .bfs-pay { margin: 14px 0 0; font: 700 16px/1.4 var(--sans); color: #FFFFFF; } .bfs-more { list-style: none; margin: 0; padding: 0; font: 400 15px/1.45 var(--sans); color: #DDE9E6; } .bfs-more li + li { margin-top: 10px; } .bfs-more b { color: #FFFFFF; font-weight: 700; } /* Кто мы: настоящее фото фаундера (assets/founder.jpg). */ .bfs-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .bfs-who { order: -1; display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); } .bfs-who img { flex: none; width: 76px; height: 91px; object-fit: cover; object-position: 50% 20%; border-radius: 8px; } .bfs-who p { margin: 0; font: 400 15px/1.4 var(--sans); color: #DDE9E6; min-width: 0; } .bfs-who b { display: block; font-size: 17px; color: #FFFFFF; } .bfs-who a { color: #FFFFFF; text-underline-offset: 3px; font-weight: 600; } .bfs-who .role { display: block; } .bfs-who .sep { display: none; } .bfs-who .nif { display: block; font-size: 13px; margin-top: 4px; } .bfs .xl-sec .band { max-width: 760px; } .bfs-lede2 { font: 400 19px/1.55 var(--sans); margin: 0 0 28px; } .bfs-list { margin: 16px 0 0; padding-left: 1.2em; font: 400 18px/1.55 var(--sans); } .bfs-list li + li { margin-top: 10px; } .bfs .xl-sec h2 { margin: 0 0 12px; } .bfs-ext { padding: 48px 0 0; } .bfs-foot { padding: 32px 0 64px; } @media (max-width: 1023px) { .bfs-grid { grid-template-columns: 1fr; gap: 0; } .bfs-hero { padding: 16px 0 22px; } .bfs-hero h1 { font-size: 26px; line-height: 1.2; margin: 0 0 8px; } .bfs-sub { font-size: 15px; line-height: 1.35; margin: 0 0 6px; } .bfs-get { font-size: 16px; line-height: 1.3; margin: 0 0 14px; } .bfs-get li { padding-left: 18px; } .bfs-get li::before { width: 7px; height: 7px; } .bfs-get li + li { margin-top: 5px; } .bfs-form__in { flex-basis: 100%; } .bfs-form .bfs-form__go { flex: 1 0 100%; } .bfs-pay { margin-top: 10px; font-size: 15px; line-height: 1.35; } .bfs-side { gap: 12px; margin-top: 8px; } .bfs-more { font-size: 13.5px; line-height: 1.4; } .bfs-more li + li { margin-top: 6px; } .bfs-ok { padding-left: 24px; } .bfs-ok::before { width: 15px; height: 15px; } .bfs-who { order: 0; padding: 10px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.2); border-radius: 0; background: none; gap: 12px; } .bfs-who img { width: 48px; height: 48px; border-radius: 50%; object-position: 50% 22%; } .bfs-who p { font-size: 14px; line-height: 1.35; } .bfs-who b { font-size: 15px; } .bfs-who .nif, .bfs-who .long { display: none; } .bfs-who .role, .bfs-who .sep { display: inline; } .bfs-lede2 { font-size: 17px; } .bfs-list { font-size: 16px; } .bfs-ext { display: none; } /* расширение — только на компьютере */ } /* Узкие телефоны: французская надпись кнопки (277 точек) не помещалась в одну строку на 375 и 360. Кегль на ступень мельче: на 375 помещается, на 360 по-французски остаётся перенос в две строки (кнопка допускает перенесённую надпись). */ @media (max-width: 380px) { .bfs .btn.pdb.bfs-form__go { --fs: 16px; } } /* ── Шапка телефона по макету посадочных v2 (решения фаундера 29.09) ───── До 03.10.2026 — только на трёх посадочных (body.bfs-page). С 03.10 (PLAN №212, «Делай все три правки») — на ВСЕХ страницах: название фирмы видно на телефоне везде. Португальский идёт ступенями английского и испанского («Entrar»). «Log in» стоит в шапке, как на всём сайте, — контурный, без заливки. Название фирмы у знака видно на всех ширинах (слово фаундера 04.09): общее правило «≤400 — прятать название» здесь отменено, место найдено сжатием ряда. Пункта «Start my check» в меню этих страниц нет (станок его не ставит). Показ названия — только до 767 точек: на компьютере шапку по-прежнему ведёт tighten() из motion.js (.top--tighter), и !important здесь её бы перебил. */ @media (max-width: 767px) { body .top .brand__name { display: inline !important; } } /* Телефон: постоянное сжатие, у всех языков одинаковое (замер 29.09, Onest): у ряда 360 − 2×16 = 328 точек, а знак 32 + название 204 (20px) + «Log in» 78 / 128 (FR) + меню 44 + зазоры не помещались. «Log in» 14px с полями 10 и ростом 40, зазоры 8, кнопка меню 40 шириной (черты выровнены по полю страницы отрицательным отступом). Переключатель языка на телефоне живёт в меню (motion.js переносит его при ≤1300); без скрипта он оставался бы в ряду и выдавливал кнопку меню за край, поэтому в ряду шапки телефона он спрятан — в меню, куда его переносит скрипт, правило не достаёт. */ @media (max-width: 767px) { body .top .row { gap: 8px; } body .top .brand { flex: 0 0 auto; min-width: 0; } body .top .acts { margin-left: auto; gap: 8px; } body .top .acts .langs { display: none; } body .top .acts .acts__list { height: 40px; min-height: 40px; padding: 0 10px; font-size: 14px; border-radius: 10px; } body .burger { width: 40px; padding: 8px; margin-right: -8px; } } /* Ступени кегля названия по ширине окна — работают и без скрипта. Пороги сняты замером 29.09 (Chromium, Onest, шаг 1 точка, 320–767): ступень — первая, при которой кнопка меню в пределах ряда и между названием и «Log in» не меньше 12 точек воздуха (то же условие, что у скрипта макета v2). Кегль 20 → 18 → 17 → 16, последней — название в две строки. По-французски «Se connecter» длиннее, и на телефонах 360–398 название стоит в две строки (фаундер 29.09 принял). Многоточием и прятанием название не режется ни на одной ступени. */ @media (max-width: 392px) { html[lang="en"] body .top .brand__name, html[lang="es"] body .top .brand__name, html[lang="pt"] body .top .brand__name { font-size: 18px; } } @media (max-width: 372px) { html[lang="en"] body .top .brand__name, html[lang="es"] body .top .brand__name, html[lang="pt"] body .top .brand__name { font-size: 17px; } } @media (max-width: 361px) { html[lang="en"] body .top .brand__name, html[lang="es"] body .top .brand__name, html[lang="pt"] body .top .brand__name { font-size: 16px; } } @media (max-width: 437px) { html[lang="fr"] body .top .brand__name { font-size: 18px; } } @media (max-width: 419px) { html[lang="fr"] body .top .brand__name { font-size: 17px; } } @media (max-width: 409px) { html[lang="fr"] body .top .brand__name { font-size: 16px; } } @media (max-width: 351px) { html[lang="en"] body .top .brand__name, html[lang="es"] body .top .brand__name, html[lang="pt"] body .top .brand__name { font-size: 17px; line-height: 1.02; white-space: normal; width: min-content; letter-spacing: -0.005em; } } @media (max-width: 398px) { html[lang="fr"] body .top .brand__name { font-size: 17px; line-height: 1.02; white-space: normal; width: min-content; letter-spacing: -0.005em; } } /* Французский на 320–330 (03.10, PLAN №212): даже с названием в две строки «Se connecter» выталкивал кнопку меню за поле на 2–8 точек — так было и на посадочной с 29.09. На самых узких экранах кнопка входа компактнее: кегль 13 и поля 6 (≈ 15 точек). */ @media (max-width: 330px) { html[lang="fr"] body .top .acts .acts__list { padding: 0 6px; font-size: 13px; } } /* Страховка скриптом (станок, HDR_SCRIPT): если с другим шрифтом ряд всё же не поместился, скрипт добавляет следующую ступень по замеру — тот же приём, что tighten() в motion.js на широком экране. */ html body .top.hdr-1 .brand__name { font-size: 18px; } html body .top.hdr-2 .brand__name { font-size: 17px; } html body .top.hdr-3 .brand__name { font-size: 16px; } html body .top.hdr-stack .brand__name { font-size: 17px; line-height: 1.02; white-space: normal; width: min-content; letter-spacing: -0.005em; } /* ═══ Входы на партнёрскую программу (задание ЯДРА S7, 24.09.2026) ═══════ «Partners» — обычный пункт меню шапки на всех ширинах (фаундер 24.09). es/fr (PLAN №88): при развёрнутом меню «Contact» уступает ряд шапки — он есть в подвале. */ .partner-line { margin: 18px 0 0; } @media (min-width: 1440px) { .top .nav .nav__contact--wide-off { display: none; } } /* Дизайнеры 24.09 (Content/landing/design/partners_header_2026-09-24/designer-*.md): развёрнутый ряд — тонкая черта перед «Partners» ВНУТРИ промежутка (ширины не добавляет): слева меню покупателя, справа служебное (Partners, язык, вход). Сложенное меню — «Partners» отдельной группой с серой строкой «кому это» под словом. */ .top .nav .nav__sub { display: none; } @media (min-width: 1440px) { .top .nav .nav__partners { position: relative; } .top .nav .nav__partners::before { content: ""; position: absolute; left: -9px; top: 50%; width: 1px; height: 20px; transform: translateY(-50%); background: currentColor; opacity: .45; } .top--tight .nav .nav__partners::before { left: -6px; height: 18px; } } @media (max-width: 1439px) { .top .nav .nav__partners { flex-direction: column; align-items: flex-start; justify-content: center; margin-top: 8px; border-top: 1px solid var(--rule-hair); } .top .nav .nav__sub { display: block; margin-top: 2px; font: 400 14px/1.3 var(--sans); color: var(--ink); opacity: .62; white-space: normal; } } /* Страница входа покупателя: строка партнёрам (фаундер 24.09, «Делай все три»). */ .lp__partner { margin: 18px 0 0; font: 400 14px/1.4 var(--sans); color: #5A6169; } .lp__partner a { color: #1F625C; font-weight: 600; } /* Ноутбуки < 1440 (меню сложено): язык и «Log in» прижаты вправо к кнопке меню, а не висят посреди шапки с пустотой справа (дизайнер 24.09; фаундер: «Делай все три»). */ @media (max-width: 1439px) { .top .acts { margin-left: auto; } } /* ═══ Бегущая строка логотипов партнёров на главной (Ops/184, фаундер PLAN №101) ═══ Разметку ставит воркер (deploy/site/partner-strip.js) только при ≥ 5 одобренных логотипах. Высота ряда задана заранее — страница не прыгает при загрузке картинок. Пауза при наведении и фокусе; при «уменьшить движение» — неподвижный ряд. */ .pstrip { padding: 40px 0 44px; border-top: 1px solid var(--rule-hair); } .pstrip__cap { max-width: 1376px; margin: 0 auto 18px; padding: 0 24px; text-align: center; font: 600 14px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #5A6169; } .pstrip__view { display: flex; overflow: hidden; height: 64px; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .pstrip__view:focus-visible { outline: 3px solid #F1CA7A; outline-offset: 2px; } .pstrip__track { display: flex; flex: none; align-items: center; gap: 56px; margin: 0; padding: 0 56px 0 0; list-style: none; animation: pstrip-move calc(var(--n, 6) * 4s) linear infinite; } .pstrip__track li { flex: none; display: flex; align-items: center; height: 64px; } .pstrip__track img { display: block; height: 40px; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1); opacity: .75; } .pstrip__view:hover .pstrip__track, .pstrip__view:focus-within .pstrip__track { animation-play-state: paused; } @keyframes pstrip-move { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .pstrip__view { height: auto; -webkit-mask-image: none; mask-image: none; justify-content: center; } .pstrip__track { animation: none; flex-wrap: wrap; justify-content: center; column-gap: 32px; row-gap: 8px; padding: 0 24px; flex: 1 1 auto; } .pstrip__track li { height: 52px; } .pstrip__track img { max-width: 140px; height: 32px; } .pstrip__copy { display: none; } } /* Дизайнер 25.09 (partner_strip_2026-09-25/designer-1-visual.md): обычный регистр подписи, ширина ≤ 1200, затухание краёв в точках, медленнее (5 с на логотип), серые логотипы без белых коробок и не пропадают; телефон — два логотипа в кадре; при «уменьшить движение» на узком экране — неподвижный ряд, листается пальцем. */ .pstrip__cap { text-transform: none; letter-spacing: 0; font-size: 15px; } .pstrip__view { max-width: 1200px; margin: 0 auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%); } .pstrip__track { animation-duration: calc(var(--n, 6) * 5s); background: var(--paper); } /* ряд — свой слой: белый фон логотипа сливается с ним, а не с пустотой */ .pstrip__track img { max-width: 160px; opacity: .8; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; } @media (max-width: 767px) { .pstrip { padding: 32px 0 36px; } .pstrip__view { height: 48px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); } .pstrip__track { gap: 40px; padding-right: 40px; } .pstrip__track li { height: 48px; } .pstrip__track img { height: 32px; max-width: 130px; } } @media (prefers-reduced-motion: reduce) { .pstrip__track .pstrip__rep { display: none; } /* сильнее, чем `.pstrip__track li` */ } @media (prefers-reduced-motion: reduce) and (max-width: 767px) { .pstrip__view { overflow-x: auto; justify-content: flex-start; scroll-snap-type: x proximity; } .pstrip__track { flex-wrap: nowrap; padding: 0 16px; column-gap: 32px; flex: none; } .pstrip__track li { scroll-snap-align: start; } } /* ═══ Лента партнёров на ПЕРВОМ экране — три варианта дизайнера 25.09 (фаундер: «должна обязательно присутствовать на главном экране»). Источник — partner_strip_2026-09-25/ first-screen/CONCEPTS.md, дословно. Фаундер выбрал вариант 1 (25.09, «деплой») — варианты 2 и 3 сняты. */ @media (prefers-reduced-motion: reduce) { .pstrip--top .pstrip__view { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; } .pstrip--top .pstrip__track { flex-wrap: nowrap; flex: none; padding: 0 16px; } } .pstrip--top { position: relative; z-index: 3; margin: 72px 0 0; height: 44px; padding: 0 24px; border: 0; background: var(--head); display: flex; align-items: center; gap: 24px; } .pstrip--top .pstrip__cap { flex: none; margin: 0; padding: 0; max-width: none; text-align: left; color: rgba(255,255,255,.85); font: 500 14px/1 var(--sans); white-space: nowrap; } .pstrip--top .pstrip__view { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; height: 44px; } .pstrip--top .pstrip__track { background: var(--head); gap: 48px; padding-right: 48px; } .pstrip--top .pstrip__track li { height: 44px; } .pstrip--top .pstrip__track img { height: 22px; max-width: 120px; opacity: .9; filter: grayscale(1) invert(1) contrast(1.3); mix-blend-mode: screen; } .pstrip--top + .hero { margin-top: 0; padding-top: 0; min-height: calc(100vh - 116px - var(--pd-consent-h, 0px)); } .pstrip--top + .hero > .band { padding-top: 14px; } .pstrip--top + .hero .hero__scrim { background: linear-gradient(to bottom, rgba(0,0,0,0) 220px, rgba(0,0,0,.66) 350px, rgba(0,0,0,.66) 100%); } @media (min-width: 1440px) { .pstrip--top { margin-top: 88px; padding: 0 32px; } .pstrip--top + .hero { min-height: calc(100vh - 132px - var(--pd-consent-h, 0px)); } } @media (min-width: 901px) and (max-height: 720px) { .pstrip--top + .hero .hero__text h1 { font-size: 52px; } .pstrip--top + .hero .hero__text .lede { margin-top: 6px; } .pstrip--top + .hero .hero__text .actblock { margin-top: 12px; } } @media (max-width: 900px) { .pstrip--top { display: block; height: 52px; padding: 5px 0 0; } .pstrip--top .pstrip__cap { padding: 0 16px; font: 500 12px/14px var(--sans); } .pstrip--top .pstrip__view, .pstrip--top .pstrip__track li { height: 33px; } .pstrip--top .pstrip__track { gap: 32px; padding-right: 32px; } .pstrip--top .pstrip__track img { height: 20px; max-width: 96px; } .pstrip--top + .hero > .band { padding-top: 10px; } } /* Вариант 1 — правки двух дизайнеров-критиков 25.09 (first-screen/critic-1-visual.md, critic-2-ux.md). */ .pstrip--top + .hero .hero__media { background: #151B19; } /* подложка на всякий случай */ .pstrip--top + .hero .hero__media img { top: -24px; } /* сдвиг кадра (±22) не открывает щель */ .pstrip--top { height: 52px; } .pstrip--top .pstrip__cap { font: 500 13px/1 var(--sans); color: rgba(255,255,255,.72); display: flex; align-items: center; gap: 16px; text-decoration: none; } .pstrip--top .pstrip__cap::after { content: ""; width: 1px; height: 24px; background: rgba(255,255,255,.25); } a.pstrip__cap:hover, a.pstrip__cap:focus-visible { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; } .pstrip--top .pstrip__view { height: 52px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); } .pstrip--top .pstrip__track { gap: 56px; padding-right: 56px; } .pstrip--top .pstrip__track li { height: 52px; } .pstrip--top .pstrip__track img { height: 28px; max-width: 150px; } .pstrip--top + .hero { min-height: calc(100vh - 124px - var(--pd-consent-h, 0px)); } @media (min-width: 1440px) { .pstrip--top + .hero { min-height: calc(100vh - 140px - var(--pd-consent-h, 0px)); } .pstrip--top + .hero > .band { padding-top: 20px; } } @media (max-width: 900px) { .pstrip--top { height: 58px; } .pstrip--top .pstrip__cap { display: block; font: 500 12px/14px var(--sans); } .pstrip--top .pstrip__cap::after { display: none; } .pstrip--top .pstrip__view, .pstrip--top .pstrip__track li { height: 39px; } .pstrip--top .pstrip__view { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } .pstrip--top .pstrip__track { gap: 36px; padding-right: 36px; } .pstrip--top .pstrip__track img { height: 24px; max-width: 120px; } } /* 25.09: подпись со стрелкой (fr — 367 точек) расширяла страницу на телефоне. Подпись 11 пт, и лента НИКОГДА не шире экрана: не влезла — многоточие, а не прокрутка вбок. */ .pstrip--top { max-width: 100%; overflow: hidden; } @media (max-width: 900px) { .pstrip--top .pstrip__cap { font-size: 11px; line-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* ═══ СТРАНИЦА «DUE DILIGENCE» (PLAN №156/157, 29.09.2026) ═══════════════ Английская статья в оболочке страниц-документов (main.doc). Своё здесь — строка автора, плашка с двумя кнопками, нумерованные списки и таблица, которая на телефоне прокручивается внутри своей рамки, а не двигает страницу вбок (наряд маркетинга, п. 5). */ .dd-by { margin-top: var(--sp-1); font: italic 400 18px/28px var(--serif); color: var(--muted); } .dd-by a { color: var(--link); text-underline-offset: 3px; } /* Общее «p > a:only-child — блоком» (site.css) рассчитано на абзац из одной ссылки, но :only-child не видит текста вокруг: ссылка посреди фразы становилась блоком и уносила точку на отдельную строку. Здесь — в строку. */ .dd .dd-by > a, .dd .doc__body > p:not(.dd-price) > a { display: inline; padding: 0; line-height: inherit; } .dd .doc__body ol { margin-top: var(--sp-1); padding-left: 2em; } .dd .doc__body li > ul { margin-top: 10px; } .dd .doc__body li > ul > li { margin-top: 8px; } .dd .doc__body li > p { margin-top: 10px; } .dd .dd-call { margin-top: var(--sp-1); padding: 20px 20px 24px; background: var(--ground); border-left: 3px solid var(--link); } .dd .dd-call p { margin-top: 0; } .dd .dd-acts { margin-top: 20px; } .dd .dd-price { margin-top: var(--sp-1); font-family: var(--sans); } .dd .dd-note { margin-top: var(--sp-1); font-size: 16px; line-height: 24px; color: var(--muted); } /* Общее правило «ниже 900 — .tblwrap { overflow: visible }» писано для таблицы сравнения, которая на телефоне становится карточками. Эта таблица остаётся таблицей, поэтому прокрутка вбок ей возвращается явно. */ .dd .dd-tblwrap { max-width: 100%; overflow-x: auto; margin-top: var(--sp-1); } .dd-tbl { min-width: 620px; margin-top: 0; } .dd-tbl th, .dd-tbl td { overflow-wrap: normal; padding-right: 16px; } .dd-tbl tbody th[scope="row"] { width: 24%; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--rule-hair); } /* ═══ СТАТЬИ ПОСТА (deploy/build-posts.py, PLAN №231, 04.10.2026) ════════ Оболочка — та же, что у статьи «Due diligence» (main.doc.dd): строка автора, плашка, таблица в своей рамке. Своё здесь: картинка в начале — целиком, без обрезки (сюжет согласован фаундером), шириной не больше 880 точек, иначе на ноутбуке она одна занимает экран; заголовок длиннее 60 знаков — мельче; цитата нормы; список источников мелким шрифтом. */ .post .post__h1--long { font-size: clamp(28px, 2.9vw, 42px); line-height: 1.2; } .post .post__fig { margin: var(--sp-1) 0 0; max-width: 880px; } .post .post__fig img { display: block; width: 100%; height: auto; } .post .doc__body { margin-top: var(--sp-1); } .post .doc__body h3 { margin-top: var(--sp-1); font: 700 22px/1.3 var(--sans); } .post .doc__body blockquote { margin: var(--sp-1) 0 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--rule-hair); } .post .doc__body blockquote p { margin-top: 0; font-style: italic; } .post .doc__body ol.post__src, .post .doc__body ul.post__src { font-size: 16px; line-height: 24px; } .post .doc__body ol.post__src li, .post .doc__body ul.post__src li { margin-top: 8px; overflow-wrap: anywhere; } /* Посты входа БЛОГ (08.11.2026): оглавление ведёт на заголовки с якорями — шапка фиксирована (88 px) и закрыла бы заголовок; длинный адрес в тексте не распирает строку. */ .post .doc__body [id] { scroll-margin-top: 104px; } .post .doc__body p, .post .doc__body li { overflow-wrap: break-word; } /* Имя тарифа в карточке страницы цен (PLAN №243, 04.10.2026): заголовок под ценой и сроком. h3 карточки — без общего отступа .tiers h3 (40px сверху), иначе имя отрывается от цены. */ .tiers .tcard .tcard__name { margin: 4px 0 12px; font: 700 22px/1.3 var(--sans); color: var(--head); } @media (max-width: 600px) { .tiers .tcard .tcard__name { font-size: 20px; } } /* Расширение, текст v6h (МАРКЕТИНГ 24.10, согласован фаундером). Свои классы pdx6* и xe6-*, чтобы не задеть страницы других языков со старым блоком. */ .pdx6 .pdx__h { max-width: 900px; } .pdx6 .pdx6__intro { font-weight: 400; } .pdx6 .pdx3__main > .pdx3__cta:first-child { margin-top: 0; } .pdx6 .pdx6__h { margin: 36px 0 14px; font: 700 22px/1.3 var(--sans); color: var(--head); } .pdx6 .pdx6__get { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .pdx6 .pdx6__get li { position: relative; padding-left: 30px; font: 400 17px/1.55 var(--sans); color: var(--ink); } .pdx6 .pdx6__get li::before { content: ""; position: absolute; left: 0; top: 7px; width: 15px; height: 8px; border-left: 3px solid var(--head); border-bottom: 3px solid var(--head); transform: rotate(-45deg); } .pdx6 .pdx6__get strong { color: var(--head); } .pdx6 .pdx6__deposit { margin: 22px 0 0; font: 600 17px/1.55 var(--sans); color: var(--ink); } .pdx6 .pdx6__more { margin: 16px 0 0; } .pdx6 .pdx6__more .xe-link { font-size: 17px; } .xe6 .xl-head h2 { margin-bottom: 0; } .xe6-card { margin-top: 24px; } .xe6-card .body p { font: 400 18px/1.6 var(--sans); color: var(--ink); margin: 12px 0 0; } .xe6-card .body h3 { margin-top: 0; } .xe6-card .body em { font-style: normal; font-weight: 700; color: var(--head); } .xe6-lines { margin: 14px 0 0; padding-left: 26px; columns: 2; column-gap: 40px; font: 400 17px/1.5 var(--sans); color: var(--ink); } .xe6-lines li { margin-bottom: 8px; break-inside: avoid; } .xe6-shot { margin: 24px 0 0; } .xe6-shot img { display: block; width: 100%; max-width: 376px; height: auto; border: 1px solid #E1E4E8; border-radius: 12px; box-shadow: 0 10px 26px rgba(21,35,26,.12); } .xe6-p { font: 400 19px/1.6 var(--sans); color: var(--ink); } .xe6 .xl-steps p { margin: 0; font: 400 18px/1.5 var(--sans); color: var(--ink); } .xe6 .xl-steps strong { color: var(--head); } .xe6 .xl-steps + .xe6-p { margin-top: 28px; } .xe6-private p { font: 400 18px/1.6 var(--sans); color: var(--ink); margin: 0 0 14px; } .xe6 .xe-terms + .small { margin-top: 16px; } @media (max-width: 767px) { .xe6-lines { columns: 1; } .xe6-card .body p, .xe6-private p, .xe6-p { font-size: 17px; } .pdx6 .pdx6__get li { font-size: 16px; } }