/* ============================================================ LeanAgent · фон сайта: звёздное небо v24 от 2026-10-17. Против v23: добавлен раздел «SEO и доступность» — по находкам дизайн-аудита D-12 и D-07. Карточки остаются полностью прозрачными (решение владельца), без подложки и размытия. Заливка карточек лежит на первом потомке группы (.tn-atom): #rec… .tn-elem[data-elem-id="…"] .tn-atom{background-color:#181818} Снимаем фон с группы и её ПЕРВОГО потомка. Брать всех потомков нельзя: внутри группы лежат кнопки со своей заливкой. ============================================================ */ html { background-color: #000000 !important; background-image: radial-gradient(60vw 60vw at 15% 8%, rgba(68, 120, 186, 0.24), transparent 62%), radial-gradient(55vw 55vw at 88% 72%, rgba(135, 173, 221, 0.17), transparent 62%); background-attachment: fixed; background-repeat: no-repeat; } /* ---------- прозрачность: фон проекта и все обёртки ---------- */ body, #allrecords, .t-body, .t-records, .t-rec, .t396, .t396__artboard, .t396__carrier, .t396__filter, .t-container { background-color: transparent !important; } .t396__artboard { background-image: none !important; } /* ---------- карточки: фон снят полностью ---------- */ [class*="tn-group__"], [class*="tn-group__"] > div:first-child { background-color: transparent !important; } .t396 div.tn-atom { background-color: transparent !important; } /* ---------- SEO и доступность (находки D-12, D-07) ---------- В первом экране заголовок живёт в двух копиях: мобильной и десктопной. Лишнюю копию прятали через left:5000 — элемент оставался в разметке, дублировал текст заголовка и был доступен тапом с клавиатуры. Прячем через display:none. */ /* десктопный заголовок не нужен на телефонах */ @media screen and (max-width: 479px) { #rec2146111671 .tn-elem[data-elem-id="1776108347443000001"] { display: none !important; } } /* мобильный дубль не нужен на широких экранах */ @media screen and (min-width: 480px) { #rec2146111671 .tn-elem[data-elem-id="1775890675911000007"] { display: none !important; } } /* Меню на телефонах уведено за край (left 2581px) и было недоступно глазу, но доступно тапом. Прячем честно. */ @media screen and (max-width: 479px) { #rec2146111671 [data-group-id="1775890675913000016"] { display: none !important; } } /* Телефон на телефонах был уведён за край и не показывался вообще. Возвращаем в шапку, рядом с подписью о партнёрстве. */ @media screen and (max-width: 479px) { #rec2146111671 .tn-elem[data-elem-id="1775890675913000022"] { left: 150px !important; top: 44px !important; } } /* ---------- картинки со вшитым чёрным фоном ---------- */ .tn-elem[data-elem-id="1775890675909000001"], .tn-elem[data-elem-id="1776410250052"] { filter: url(#lg-key-black); } /* ---------- звёзды: два слоя ---------- */ html::before, html::after { content: ''; position: fixed; top: 0; left: 0; width: 200vw; height: 200vh; z-index: -1; pointer-events: none; background-repeat: repeat; will-change: transform; } html::before { opacity: 0.9; background-size: 300px 300px; background-image: radial-gradient(1.9px 1.9px at 30px 45px, rgba(255,255,255,0.92), transparent 50%), radial-gradient(1.6px 1.6px at 115px 95px, rgba(169,200,239,0.82), transparent 50%), radial-gradient(1.9px 1.9px at 200px 35px, rgba(255,255,255,0.72), transparent 50%), radial-gradient(1.6px 1.6px at 260px 160px, rgba(255,255,255,0.62), transparent 50%), radial-gradient(1.9px 1.9px at 65px 215px, rgba(169,200,239,0.68), transparent 50%), radial-gradient(1.6px 1.6px at 165px 250px, rgba(255,255,255,0.57), transparent 50%), radial-gradient(1.9px 1.9px at 275px 275px, rgba(255,255,255,0.68), transparent 50%), radial-gradient(1.6px 1.6px at 20px 280px, rgba(169,200,239,0.57), transparent 50%), radial-gradient(1.6px 1.6px at 235px 100px, rgba(255,255,255,0.62), transparent 50%), radial-gradient(1.7px 1.7px at 90px 140px, rgba(255,255,255,0.52), transparent 50%); animation: lg-stars-far 120s linear infinite; } html::after { opacity: 1; background-size: 400px 400px; background-image: radial-gradient(3.6px 3.6px at 55px 25px, rgba(255,255,255,0.99), transparent 50%), radial-gradient(2.6px 2.6px at 165px 125px, rgba(255,255,255,0.87), transparent 50%), radial-gradient(3.1px 3.1px at 260px 65px, rgba(169,200,239,0.92), transparent 50%), radial-gradient(4.2px 4.2px at 105px 195px, rgba(255,255,255,0.82), transparent 50%), radial-gradient(3.1px 3.1px at 335px 240px, rgba(169,200,239,0.77), transparent 50%), radial-gradient(3.4px 3.4px at 25px 320px, rgba(255,255,255,0.77), transparent 50%), radial-gradient(2.6px 2.6px at 210px 335px, rgba(255,255,255,0.72), transparent 50%), radial-gradient(3.6px 3.6px at 365px 125px, rgba(169,200,239,0.67), transparent 50%), radial-gradient(2.6px 2.6px at 310px 360px, rgba(255,255,255,0.67), transparent 50%), radial-gradient(3.4px 3.4px at 150px 290px, rgba(255,255,255,0.62), transparent 50%); animation: lg-stars-near 60s linear infinite, lg-twinkle 7s ease-in-out infinite alternate; } @keyframes lg-stars-far { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-300px, -150px, 0); } } @keyframes lg-stars-near { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-400px, -200px, 0); } } @keyframes lg-twinkle { from { opacity: 1; } to { opacity: 0.75; } } @media (prefers-reduced-motion: reduce) { html::before, html::after { animation: none; } } /* ---------- что остаётся непрозрачным ---------- */ .t-popup, .t-popup .t396__artboard { background-color: #000000 !important; } /* ===== КОНЕЦ ЧАСТИ 1 (проектный CSS, как был) — далее планшетные заплатки ===== */ /* ===== ПЛАНШЕТНЫЕ ЗАПЛАТКИ 481–1199px (t7 + t9) ===== */ /* ============================================================================ LeanAgent · планшетная заплатка для первого экрана и шапки Файл: leanagent-tablet-hero.css Блок: #rec2146111671 (главная, pageid 132498966, projectid 23014766) Куда: Tilda → Настройки сайта → Ещё → HTML-код для вставки внутрь HEAD (то есть в тот же проект-стейт, где уже лежит правило снятия фона с карточек: html{…}, html::before, [class*="tn-group__"]{…}). Ниже правил проекта или выше — не важно: все объявления с !important. ЗАЧЕМ ЭТО НУЖНО У блока #rec2146111671 есть только две раскладки: • десктоп — контейнер 1200px (действует от 1200px и шире); • мобильная — ключи -res-320, а это @media (max-width:479px), контейнер 320px. Диапазон 481–1199px в блоке не настроен. Tilda такую сетку не пересобирает: элементы остаются в пикселях, привязанные к центру окна (left: calc(50% - <контейнер> + X)), а артборд имеет overflow:hidden. По сгенерированному CSS блока это даёт на 768px: персонаж (left 862) → x = 926 → целиком за правым краем; список умений (left 714/715) → x = 778 → за краем; телефон (left 1000, 142px) → x ≈ 1064 → за краем; пункты меню 3–5 → за краем (видны только «О компании» и «Преимущества»). То есть на планшете и на ноутбуке 1024–1199px первый экран теряет и продающий список умений, и телефон, и часть навигации. ЧТО ДЕЛАЕТ ЭТОТ ФАЙЛ Пересобирает шапку и первый экран на ширинах 481–1199px только стилями: • шапка в две строки: лого + телефон (строка 1), бейдж B24U + меню (строка 2); • левая колонка: h1 → строка конверсии → кнопка → подпись про 15 минут; • персонаж — правый верхний угол, сжимается вместе с экраном (ниже 640px сходит на нет, см. «СКРЫТЫЕ ЭЛЕМЕНТЫ»); • список умений (7 пунктов + 7 точек) — полноширинный блок под кнопкой. ЧЕГО ЭТОТ ФАЙЛ НЕ ДЕЛАЕТ Не меняет ничего вне 481–1199px: при ≥1200px и при ≤480px ни одно правило не применяется, десктопная и мобильная раскладки остаются ровно как есть. Блоки в редакторе Tilda не правятся — это чистое переопределение стилей. ГРАНИЦЫ ДОСТОВЕРНОСТИ Живой рендер посмотреть нельзя (в окружении нет vision-провайдера), поэтому все координаты посчитаны из данных блока (get_zero_block) и сгенерированного CSS. Ширина строки шрифта Unbounded/Manrope в браузере точно неизвестна — оценка: строка «для сайта, который» при 44px ≈ 450px (≈10.2em). Поэтому: • ширина h1 сделана с запасом ≥30% (обёртка строки не сломает раскладку); • между h1 и строкой конверсии заложена высота 4.3 строки вместо 3 строк (запас на перенос ~1 строка); • высота артборда посчитана с нижним запасом ≈20–40px. Что именно осталось неизвестным — перечислено в конце файла. Совместимость: clamp()/min()/max()/calc()+var() — Chrome 79+, Safari 13.1+, Firefox 75+. Если браузер их не понимает, объявление отбрасывается целиком и элемент остаётся в текущем (сломанном) планшетном виде — то есть хуже текущего состояния не станет. ============================================================================ */ @media (min-width:481px) and (max-width:1199px) { /* ========================================================================== 1. ПЕРЕМЕННЫЕ РАСКЛАДКИ Все считаются от ширины артборда (100% = ширина окна без полосы прокрутки). Клиентские свойства объявлены на артборде и наследуются всеми элементами. ========================================================================== */ #rec2146111671 .t396__artboard { /* кегли */ --lg-h1fs: clamp(26px, 4.2vw, 44px) !important; /* h1: 26px @481 … 44px @1047+ */ --lg-cfs: clamp(17px, 2.4vw, 28px) !important; /* «Конверсия в заявки +79%» */ --lg-pfs: clamp(15px, 1.7vw, 20px) !important; /* подпись «Настраивается…» */ --lg-skfs: clamp(12px, 1.5vw, 14px) !important; /* список умений */ /* ширина персонажа: 0 при ≤640px, дальше растёт до 240px и упирается в потолок. Левый край персонажа при этом всегда ≥620px, поэтому кнопка (правый край 364) с ним не пересекается ни на одной ширине диапазона. */ --lg-charw: min(240px, max(0px, 100% - 640px)) !important; /* вертикальный ритм */ --lg-cvtop: calc(128px + 4.3 * var(--lg-h1fs)) !important; --lg-btntop: calc(var(--lg-cvtop) + 1.2 * var(--lg-cfs) + 26px) !important; --lg-subtop: calc(var(--lg-btntop) + 93px + 16px) !important; --lg-sktop: calc(var(--lg-subtop) + 3.6 * var(--lg-pfs) + 24px) !important; /* высота артборда = верх списка умений + 6 шагов по 40px + 54px запаса снизу */ --lg-arth: calc(var(--lg-sktop) + 240px + 54px) !important; } /* ========================================================================== 2. ВЫСОТА АРТБОРДА При 481px ≈ 767px, при 768px ≈ 796px, при 960px ≈ 841px, при 1199px ≈ 876px. (Десктоп 670px, мобильная 830px.) ========================================================================== */ #rec2146111671 .t396__artboard, #rec2146111671 .t396__filter, #rec2146111671 .t396__carrier { height: var(--lg-arth) !important; } /* ========================================================================== 3. ШАПКА Строка 1: лого (слева) + телефон (справа). Строка 2: бейдж «Официальный партнёр B24U» (слева) + меню по центру. На 481px шапка занимает 20…461px, меню 36…444px — влезает с запасом. ========================================================================== */ /* 3.1 Логотип «LeanAgent». line-height переопределяем: в блоке стоит 0.44 при кегле 32px (высота бокса 14px) — это работает на десктопе, но для пересобранной шапки нужна нормальная строка. */ #rec2146111671 .tn-elem[data-elem-id="1775890675912000009"] { left: 20px !important; top: 10px !important; width: 210px !important; height: auto !important; text-align: left !important; /* в блоке text-align:center */ } #rec2146111671 .tn-elem[data-elem-id="1775890675912000009"] .tn-atom { font-size: 28px !important; line-height: 1.1 !important; white-space: nowrap !important; } /* 3.2 Бейдж «Официальный партнёр B24U» — под логотипом. */ #rec2146111671 .tn-elem[data-elem-id="1775890675911000006"] { left: 20px !important; top: 44px !important; width: 210px !important; height: auto !important; text-align: left !important; } #rec2146111671 .tn-elem[data-elem-id="1775890675911000006"] .tn-atom { font-size: 12px !important; letter-spacing: 0.5px !important; line-height: 1.15 !important; white-space: nowrap !important; } /* 3.3 Телефон — прижат к правому краю. left:auto + right:20px вместо пиксельного left:1000px из блока. */ #rec2146111671 .tn-elem[data-elem-id="1775890675913000022"] { left: auto !important; right: 20px !important; top: 18px !important; width: auto !important; height: auto !important; } #rec2146111671 .tn-elem[data-elem-id="1775890675913000022"] .tn-atom { font-size: 16px !important; line-height: 1.2 !important; white-space: nowrap !important; text-align: right !important; } /* 3.4 Группа меню. В блоке группа шириной 552px стоит на left:calc(50% - 600px + 324px); сжимаем её до 408px и центрируем. */ #rec2146111671 .tn-group[data-group-id="1775890675913000016"] { left: calc(50% - 204px) !important; top: 74px !important; width: 408px !important; height: 38px !important; } /* 3.5 Пункты меню внутри группы: left/width пересчитаны так, чтобы 5 пунктов уложились в 408px (зазор 12px). Кегль 14px оставлен как в блоке — при 14px самая длинная надпись («Преимущества» ≈79px) влезает в 92px. */ #rec2146111671 .tn-elem[data-elem-id="1775890675913000017"] { /* О компании */ left: 0px !important; width: 78px !important; } #rec2146111671 .tn-elem[data-elem-id="1775890675913000018"] { /* Преимущества */ left: 90px !important; width: 92px !important; } #rec2146111671 .tn-elem[data-elem-id="1775890675913000019"] { /* Интеграции */ left: 194px !important; width: 80px !important; } #rec2146111671 .tn-elem[data-elem-id="1775890675913000020"] { /* Кейсы */ left: 286px !important; width: 46px !important; } #rec2146111671 .tn-elem[data-elem-id="1775890675913000021"] { /* Контакты */ left: 344px !important; width: 64px !important; } #rec2146111671 .tn-elem[data-elem-id="1775890675913000017"], #rec2146111671 .tn-elem[data-elem-id="1775890675913000018"], #rec2146111671 .tn-elem[data-elem-id="1775890675913000019"], #rec2146111671 .tn-elem[data-elem-id="1775890675913000020"], #rec2146111671 .tn-elem[data-elem-id="1775890675913000021"] { height: 38px !important; top: 0px !important; /* позицию задаёт сама группа */ text-align: center !important; } #rec2146111671 .tn-elem[data-elem-id="1775890675913000017"] .tn-atom, #rec2146111671 .tn-elem[data-elem-id="1775890675913000018"] .tn-atom, #rec2146111671 .tn-elem[data-elem-id="1775890675913000019"] .tn-atom, #rec2146111671 .tn-elem[data-elem-id="1775890675913000020"] .tn-atom, #rec2146111671 .tn-elem[data-elem-id="1775890675913000021"] .tn-atom { font-size: 14px !important; line-height: 1.17 !important; white-space: nowrap !important; text-align: center !important; } /* ========================================================================== 4. ЛЕВАЯ КОЛОНКА ПЕРВОГО ЭКРАНА h1 → строка конверсии → кнопка → подпись. Ширина текста ограничена так, чтобы между текстом и персонажем всегда оставалось 28px: width = 100% − 48px − ширина персонажа. ========================================================================== */ /* 4.1 h1 «AI чат-бот для сайта, который ОТВЕЧАЕТ 24/7». Переносы строк стоят в тексте (
), поэтому ширина с запасом: при 481px = 433px против строки ≈265px, при 1199px = 911px против ≈450px. */ #rec2146111671 .tn-elem[data-elem-id="1776108347443000001"] { left: 20px !important; top: 128px !important; width: calc(100% - 48px - var(--lg-charw)) !important; height: auto !important; text-align: left !important; } #rec2146111671 .tn-elem[data-elem-id="1776108347443000001"] .tn-atom { font-size: var(--lg-h1fs) !important; line-height: 1.2 !important; } /* 4.2 «Конверсия в заявки +79%». */ #rec2146111671 .tn-elem[data-elem-id="1792165000000000993"] { left: 20px !important; top: var(--lg-cvtop) !important; width: calc(100% - 48px - var(--lg-charw)) !important; height: auto !important; text-align: left !important; } #rec2146111671 .tn-elem[data-elem-id="1792165000000000993"] .tn-atom { font-size: var(--lg-cfs) !important; line-height: 1.2 !important; } /* 4.3 Кнопка «Записаться» (картинка Group_8.svg). left:8px оставлен как в блоке: видимый край кнопки внутри SVG сдвинут вправо относительно бокса, поэтому 8px дают визуальное выравнивание по 20px. Размер 356×93 не меняем — на 481px она занимает 8…364px и влезает. */ #rec2146111671 .tn-elem[data-elem-id="1776107975993"] { left: 8px !important; top: var(--lg-btntop) !important; width: 356px !important; height: 93px !important; } /* 4.4 Подпись «Настраивается за 15 мин. после сканирования вашего сайта». В блоке она стоит справа от кнопки (left:373px) — на 481px это уже за краем, поэтому переносим её под кнопку, в ту же левую колонку. */ #rec2146111671 .tn-elem[data-elem-id="1775890675912000010"] { left: 20px !important; top: var(--lg-subtop) !important; width: 288px !important; height: auto !important; text-align: left !important; } #rec2146111671 .tn-elem[data-elem-id="1775890675912000010"] .tn-atom { font-size: var(--lg-pfs) !important; line-height: 1.25 !important; } /* ========================================================================== 5. ПЕРСОНАЖ — правый верхний угол Пропорции берём из файла: 2072 / 1284 = 1.6137 (в блоке 518 / 321 = то же). Ширину и высоту меняем на самом элементе: картинка вписана в него через object-fit:contain, поэтому масштабируется без искажений. ========================================================================== */ #rec2146111671 .tn-elem[data-elem-id="1775890675909000001"] { left: calc(100% - 20px - var(--lg-charw)) !important; top: 128px !important; width: var(--lg-charw) !important; height: calc(var(--lg-charw) * 1.6137) !important; } /* ========================================================================== 6. СПИСОК УМЕНИЙ — полноширинный блок под кнопкой (7 текстов + 7 точек) Точки лежат на 20px левее текстов: точка left:20px, текст left:48px. Шаг строк 40px (вторая строка списка «Консультирую по продукту / как эксперт» всегда занимает 2 строки: 2 × 1.3 × 14px ≈ 36.4px < 40px — не наезжает). Порядок сверху вниз совпадает и с десктопом, и с мобильной версией: 1 Работаю 24/7 без праздников и выходных 2 Консультирую по продукту как эксперт 3 Отвечаю мгновенно — не заставляю ждать 4 Выявляю потребности и веду к заявке 5 Я умный IQ 150+ в «мозге» ИИ 6 Собираю контакты и передаю лиды в CRM 7 Говорю на 25 языках мира ========================================================================== */ #rec2146111671 .tn-elem[data-elem-id="1776194614876000008"], #rec2146111671 .tn-elem[data-elem-id="1776194661772000010"], #rec2146111671 .tn-elem[data-elem-id="1776194523048000004"], #rec2146111671 .tn-elem[data-elem-id="1776194486496000003"], #rec2146111671 .tn-elem[data-elem-id="1776194573909000006"], #rec2146111671 .tn-elem[data-elem-id="1776194683084000012"], #rec2146111671 .tn-elem[data-elem-id="1776194443642"] { left: 48px !important; width: calc(100% - 68px) !important; height: auto !important; text-align: left !important; } #rec2146111671 .tn-elem[data-elem-id="1776194614876000008"] .tn-atom, #rec2146111671 .tn-elem[data-elem-id="1776194661772000010"] .tn-atom, #rec2146111671 .tn-elem[data-elem-id="1776194523048000004"] .tn-atom, #rec2146111671 .tn-elem[data-elem-id="1776194486496000003"] .tn-atom, #rec2146111671 .tn-elem[data-elem-id="1776194573909000006"] .tn-atom, #rec2146111671 .tn-elem[data-elem-id="1776194683084000012"] .tn-atom, #rec2146111671 .tn-elem[data-elem-id="1776194443642"] .tn-atom { font-size: var(--lg-skfs) !important; line-height: 1.3 !important; white-space: normal !important; } /* построчно: шаг 40px */ #rec2146111671 .tn-elem[data-elem-id="1776194614876000008"] { top: var(--lg-sktop) !important; } #rec2146111671 .tn-elem[data-elem-id="1776194661772000010"] { top: calc(var(--lg-sktop) + 40px) !important; } #rec2146111671 .tn-elem[data-elem-id="1776194523048000004"] { top: calc(var(--lg-sktop) + 80px) !important; } #rec2146111671 .tn-elem[data-elem-id="1776194486496000003"] { top: calc(var(--lg-sktop) + 120px) !important; } #rec2146111671 .tn-elem[data-elem-id="1776194573909000006"] { top: calc(var(--lg-sktop) + 160px) !important; } #rec2146111671 .tn-elem[data-elem-id="1776194683084000012"] { top: calc(var(--lg-sktop) + 200px) !important; } #rec2146111671 .tn-elem[data-elem-id="1776194443642"] { top: calc(var(--lg-sktop) + 240px) !important; } /* точки-маркеры: 14px вместо 20px, на 2px ниже верха строки (оптическое выравнивание) */ #rec2146111671 .tn-elem[data-elem-id="1776368336382"], #rec2146111671 .tn-elem[data-elem-id="1776404215697000001"], #rec2146111671 .tn-elem[data-elem-id="1776404222453000002"], #rec2146111671 .tn-elem[data-elem-id="1776404228562000003"], #rec2146111671 .tn-elem[data-elem-id="1776404233563000004"], #rec2146111671 .tn-elem[data-elem-id="1776404237547000005"], #rec2146111671 .tn-elem[data-elem-id="1776404242673000006"] { left: 20px !important; width: 14px !important; height: 14px !important; } #rec2146111671 .tn-elem[data-elem-id="1776368336382"] { /* Работаю 24/7 */ top: calc(var(--lg-sktop) + 2px) !important; } #rec2146111671 .tn-elem[data-elem-id="1776404215697000001"] { /* Консультирую */ top: calc(var(--lg-sktop) + 42px) !important; } #rec2146111671 .tn-elem[data-elem-id="1776404222453000002"] { /* Отвечаю мгновенно */ top: calc(var(--lg-sktop) + 82px) !important; } #rec2146111671 .tn-elem[data-elem-id="1776404228562000003"] { /* Выявляю потребности */ top: calc(var(--lg-sktop) + 122px) !important; } #rec2146111671 .tn-elem[data-elem-id="1776404233563000004"] { /* Я умный IQ */ top: calc(var(--lg-sktop) + 162px) !important; } #rec2146111671 .tn-elem[data-elem-id="1776404237547000005"] { /* Собираю контакты */ top: calc(var(--lg-sktop) + 202px) !important; } #rec2146111671 .tn-elem[data-elem-id="1776404242673000006"] { /* Говорю на 25 языках */ top: calc(var(--lg-sktop) + 242px) !important; } /* ========================================================================== 7. МОБИЛЬНЫЙ ДУБЛЬ ЗАГОЛОВКА — явно скрываем (см. «СКРЫТЫЕ ЭЛЕМЕНТЫ») ========================================================================== */ #rec2146111671 .tn-elem[data-elem-id="1775890675911000007"] { display: none !important; } } /* /@media (min-width:481px) and (max-width:1199px) */ /* ============================================================================ СКРЫТЫЕ ЭЛЕМЕНТЫ (в диапазоне 481–1199px) — и почему ---------------------------------------------------------------------------- 1. #rec2146111671 .tn-elem[data-elem-id="1775890675911000007"] Мобильный дубль заголовка («AI чат-бот / для сайта, / который ОТВЕЧАЕТ / 24/7», 36px, тег не h1). В блоке он спрятан через left:5000px и должен показываться только на ≤479px. В планшетном диапазоне он не нужен и всё равно уезжал за край, но оставлять «невидимку» через left:5000px — плохая практика (элемент остаётся в DOM и в табе клавиатуры), поэтому здесь он задавлен явно через display:none. На ≤480px правило не действует — мобильная версия цела. 2. #rec2146111671 .tn-elem[data-elem-id="1775890675909000001"] (персонаж) Скрыт НЕ полностью: с 640px он показывается в правом верхнем углу и растёт вместе с экраном (128px при 768px, 240px при 880px и шире). Ширина считается как min(240px, max(0px, 100% - 640px)), поэтому при 481–640px она равна нулю: картинка схлопывается в 0×0 и не рисуется. Причина: на 481–639px свободной правой колонки нет — h1 пришлось бы сжать до ≈18px, чтобы отдать 240px под иллюстрацию, а это хуже читаемости заголовка. Персонаж — декор, поэтому по приоритету он уступает (в ТЗ: «можно скрыть или увести ниже»). Важно: ниже 640px элемент остаётся в DOM (не display:none) — если понадобится убрать его совсем, скажите, добавлю display:none для 481–640px. 3. Список умений (7 текстов + 7 точек) — НЕ скрыт, а перенесён ниже кнопки полноширинным блоком: это не декор, а продающий текст, и на планшете он читается лучше, чем справа от персонажа (там он налезал на иллюстрацию). ЧТО ИМЕННО ПОПРАВЛЕНО И КАК ЭТО ПРОВЕРЯТЬ ---------------------------------------------------------------------------- Поправлено (только #rec2146111671): • высота артборда/фильтра/карриера — формула от кеглей (767–876px); • шапка: лого 20/10 28px; бейдж 20/44 12px; телефон прижат к правому краю (right:20px, кегль 16px); группа меню 408px по центру на top:74px; 5 пунктов меню перенарезаны в 408px (left 0/90/194/286/344); • h1 — left 20, top 128, ширина = 100% − 48px − персонаж, кегль 26–44px; • строка конверсии — под h1, кегль 17–28px; • кнопка — left 8, размер 356×93, top считается от кеглей h1/строки; • подпись про 15 минут — перенесена ПОД кнопку (была справа), кегль 15–20px; • персонаж — прижат к правому краю, масштабируется вместе с окном; • список умений — полноширинный, шаг 40px, кегль 12–14px, точки 14px. Как проверять (ширины из ТЗ и вокруг них): 768px — ключевая: лого 20…185, телефон 606…748, меню 180…588 (строка 2), h1 20…592 (3 строки, кегль 32px), кнопка 8…364, персонаж 620…748, список умений 48…748 семью строками, артборд ≈796px. 960px — лого/телефон 1037…1179, меню 276…684, h1 20…672 (кегль 40px), кнопка 8…364, персонаж 700…940 (240×387), артборд ≈841px. Дополнительно посмотреть: 481px (нижняя граница — меню 36…444, персонажа нет), 640px (персонаж появляется с нуля), 900px, 1199px (верхняя граница) и обязательно оба края: 480px и 1200px — там ничего не должно измениться. На что смотреть: (1) h1 не переносится на 4-ю строку и не налезает на персонажа; (2) телефон не наезжает на лого; (3) меню стоит строкой и все 5 пунктов на месте; (4) кнопка не подлезает под персонажа; (5) список умений целиком ниже кнопки; (6) на 1200px и 480px — десктопная и мобильная картинки как раньше. ЧЕГО Я НЕ МОГ ПРОВЕРИТЬ / ГДЕ ДАННЫХ НЕ ХВАТИЛО ---------------------------------------------------------------------------- 1. Нет рендера и скриншотов (нет vision-провайдера в рабочем окружении), поэтому ширина строк Unbounded при 26–44px и Manrope при 12–28px оценена аналитически (≈0.62–0.72em на знак), а не измерена. Запасы заложены, но при первом просмотре в браузере проверьте именно переносы строк h1. 2. Точный `background-size` у кнопки-картинки 1776107975993 в сгенерированном CSS не подтверждён. Видимая кнопка внутри SVG 393×120 занимает 357×83.5 и имеет внутренние поля 18px, поэтому при background-size:cover видимый край смещён на ≈16px внутрь бокса, при contain — на ≈26px. left:8px взят как в блоке (то есть авторская компенсация). Если после проверки кнопка «не по колонке» — скорректируйте в одном месте: left у 1776107975993. 3. Высота строки второй строки списка «Консультирую по продукту
как эксперт» всегда 2 строки; при кегле 14px и line-height 1.3 это 36.4px против шага 40px. Запас 3.6px — если в браузере шрифт даст больше, строки 2 и 3 сблизятся; тогда шаг поднимается до 42px тем же способом (14 значений top: top у 7 текстов и 7 точек — правится поиском по «40px»/«42px»). 4. У блока есть «якорная» тонкость: у части текстовых элементов Tilda в медиазапросах пишет невалидное `width:px` (пустое значение), поэтому ширина наследуется от базы. Мои правила ширину переопределяют !important — на этом конфликте ничего не держится. 5. Мобильные значения блока с момента моего аудита изменились (у подписи стало top-res-320:315, у строки конверсии 275 — то есть наложение на ≤479px, похоже, уже поправлено автором). Этот файл диапазон ≤479px не затрагивает ни одним символом, так что проверка мобильной версии остаётся отдельной задачей. 6. Кнопки-картинки остаются картинками: CSS не может поставить им текстовую подпись или aria-label. Пустой aria-label у 1776107975993 (и у кнопок в шагах и контактах) лечится только в самом блоке Tilda — это вне рамок CSS-заплатки. КОНТРОЛЬ КООРДИНАТ — «не уехало ли за край» ---------------------------------------------------------------------------- О СИСТЕМЕ КООРДИНАТ. Артборд Tilda — это .t396__artboard с position:relative и width:100%, то есть его левый край совпадает с левым краем контентной области окна. Значит `left` в этих правилах отсчитывается ОТ КРАЯ ОКНА, а не от какого-то центрированного контейнера: правило CSS не складывается с правилом Tilda, а ПОЛНОСТЬЮ его заменяет (поэтому все объявления и помечены !important). Именно поэтому в файле нет и не должно быть значений вида `left: -580px`: отрицательное число, полученное вычитанием половины контейнера (20 − 600), увело бы элемент за левый край экрана. Все «голые» left в файле — малые положительные и проверены ниже. Там, где нужна привязка к центру или к правому краю, используется calc: • меню (группа) — left: calc(50% − 204px) → центр окна; • персонаж — left: calc(100% − 20px − charw) → правый край; • телефон — left: auto + right: 20px → правый край; • ширина текста — calc(100% − 48px − charw). Пункты меню имеют left 0/90/194/286/344 — это координаты ВНУТРИ группы (группа position:absolute, поэтому она сама является содержащим блоком для своих пунктов), они складываются в ровно 408px = ширину группы: 0…78, 90…182, 194…274, 286…332, 344…408 (зазоры по 12px). ПРОВЕРКА 0 ≤ left и left + width ≤ V для V = 481…1199px (charw = min(240px, max(0px, 100% − 640px)); у правопривязанных правый край = V−20): элемент left width правый край лого, бейдж 20px 210px 230 ✓ h1 20px V−48−charw V−28−charw ✓ строка конверсии 20px V−48−charw V−28−charw ✓ кнопка 8px 356px 364 ✓ (и при V=481) подпись 20px 288px 308 ✓ точки-маркеры 20px 14px 34 ✓ тексты умений 48px V−68 V−20 ✓ персонаж V−20−charw charw V−20 ✓ телефон right:20px 142px (auto) V−20 ✓ меню (группа) calc(50% − 204px) 408px V/2+204 → 444.5 при 481, 803.5 при 1199 ✓ пункты меню 0…344 (в группе) 46…92px 408 = ширина группы ✓ Итог: ни на одной ширине диапазона ни один элемент не выходит за 0…V. ПОЧЕМУ НЕ ФОРМА calc(50% − 480px + X) С «РОДНЫМ» X ИЗ БЛОКА. Такая форма нужна, когда требуется сохранить положение элемента ОТНОСИТЕЛЬНО центрированного контейнера Tilda (960/640/480). Но именно она и есть причина дефекта: персонаж в блоке стоит на X=862, и при контейнере 960 (ширины 960–1199) он попадает на x = V/2 − 480 + 862, то есть правее правого края на любой ширине примерно до 1400px — элемент исчезает ровно так же, как сейчас. Чтобы починить правую часть через X, своё X пришлось бы задавать на каждую ширину (X зависит от V), а одной константой это невыразимо. Поэтому правая часть привязана к правому краю окна (calc(100% − …) и right:20px), а левая — к левому краю. Бонус: такая раскладка непрерывно стыкуется с десктопом — при 1200px контейнер Tilda равен ширине окна, и десктопный h1 стоит на тех же 20px, что и здесь; в форме 50%−480+20 на 1199px он оказался бы на 139px и «прыгнул» на 20px при 1200. Если всё же нужна контейнерная форма — это другая композиция и другие X для каждого из трёх поддиапазонов (960–1199 / 640–959 / 481–639), то есть три отдельных @media-блока вместо одного. Скажите — переделаю. ============================================================================ */ /* ===== КОНЕЦ ЧАСТИ 2 (hero, t7 + правка t13) — далее cards ===== */ /* ===================================================================================== leanagent.ru — Планшетная заплатка для карточных секций Zero Block Диапазон: 481–1199px. ВЕРСИЯ 3 (задача t9 — модель привязки к краям окна) Файл только описывает правила. НА САЙТЕ НИЧЕГО НЕ ИЗМЕНЕНО. Подключение (делает ведущий): Настройки сайта → Ещё → CSS-код проекта. Стиль и модель совпадают с leanagent-tablet-hero.css (t7), чтобы заплатки можно было подключать и читать как одну систему. ===================================================================================== СИСТЕМА КООРДИНАТ (главное, что нужно понять перед чтением правил) ------------------------------------------------------------------------------------- Артборд Tilda (.t396__artboard) — это position:relative; width:100%: его левый край совпадает с левым краем контентной области окна. Значит `left` в этих правилах отсчитывается ОТ КРАЯ ОКНА. Правило CSS не складывается с правилом Tilda, а ПОЛНОСТЬЮ его заменяет (поэтому все объявления с !important). Отсюда два запрета, из-за которых сломались версии 1 и 2 этого файла: • НЕТ значений вида `left: -580px` — отрицательное число, полученное вычитанием половины контейнера (20 − 600), уводит элемент за ЛЕВЫЙ край экрана; • НЕТ формы `calc(50% − 480px + X)` с «родным» X из блока — X подобран под контейнер 1200, а Tilda на разных ширинах подставляет контейнеры 960/640/480, поэтому элемент с большим X уезжает за ПРАВЫЙ край и дефект сохраняется (разбор этой ловушки — в leanagent-tablet-hero.css, раздел «КОНТРОЛЬ КООРДИНАТ»). Вместо этого используется привязка к краям окна: • левая колонка — left: 20px (или 8px, если так компенсирует сам блок); • правая колонка — left: calc(50% + 10px) ← ровно половина окна; • полноширинный текст — left: 20px; width: calc(100% - 40px); • прижатое к правому — left: auto; right: 20px. Бонус такой формы: раскладка НЕПРЕРЫВНА с десктопом. При 1200px контейнер Tilda равен ширине окна, и десктопные карточки стоят от того же края 20px, что и здесь — перехода «прыжок на 139px» на стыке 1199→1200 не возникает. ДВА ПОДДИАПАЗОНА, ПОТОМУ ЧТО НА 481px ДВЕ КОЛОНКИ НЕ ВЛЕЗАЮТ ------------------------------------------------------------------------------------- • 640–1199px — ДВЕ КОЛОНКИ: левая left:20px, правая left:calc(50% + 10px), ширина каждой calc(50% - 30px). Зазор 20px, правый отступ 20px. Проверка на 640 (худшая точка этого поддиапазона): 20…290 и 330…600 ✓ • 481–639px — ОДНА КОЛОНКА: карточка left:20px, width:calc(100% - 40px). Проверка на 481: 20…461 ✓. Две колонки здесь дали бы по ≈210px — текст 14px разваливался бы на 3–4 слова в строке, поэтому одна колонка (как и в мобильной версии самих блоков на ≤479px: Tilda тоже переводит карточки в одну колонку). ВЕРТИКАЛЬ --------- Tilda сама поднимает высоту артбордов на узких экранах (блок 1: 1093 → 2450px на ≤479px), потому что текст переносится. Здесь то же самое: на 481px абзац в одну колонку занимает больше строк, поэтому высоты артбордов заданы с запасом, а содержимому карточек дан увеличенный зазор между заголовком и абзацем. Для каждого блока указан нижний элемент. ЧЕГО ЗДЕСЬ НЕТ (осознанно) --------------------------- • Блок тарифов 4871041501 и блок кейсов 4873543501 не упомянуты — у них полный адаптив. • Диапазон ≤479px не упомянут ни одним символом — там штатные правила -res-320. • Дефект данных блока (абзац 1775891956509000026, width=1227px вместо 317px) не правится: исправляется отдельно в редакторе Tilda, здесь ему задана нормальная ширина. • Тексты, ссылки (в т.ч. #popup:myform), картинки и z-index не меняются — только геометрия. ===================================================================================== */ /* ===================================================================================== БЛОК 1 / 5 — «Какие проблемы мы решаем?», recordid 2146825651 Десктоп: 3 колонки карточек 360px (X = 20 / 420 / 820, Y = 159 / 612), 6 карточек. Новая схема: 640–1199px — две колонки × три ряда; 481–639px — одна колонка × шесть рядов. Внутри карточки: иконка +20px от края карточки, заголовок +20px от иконки, абзац от того же отступа с правым отступом 20px. Соответствие «карточка → её содержимое» (по данным блока): Карточка 1: рамка 1775891956508000003 | иконка 1775891956508000007 заголовок 1775891956508000006 | абзац 1775891956508000004 | точка 1776157246435000001 Карточка 2: рамка 1775891956508000008 | иконка 1775891956508000015 заголовок 1775891956508000010 | абзац 1775891956508000009 | точка 1776157259698000002 Карточка 3: рамка 1775891956508000011 | иконка 1775891956508000016 заголовок 1775891956508000014 | абзац 1775891956508000012 | точка 1776157344191000003 Карточка 4: рамка 1775891956508000017 | иконка 1775891956509000029 заголовок 1775891956508000020 | абзац 1775891956508000018 | точка 1776157356462000004 Карточка 5: рамка 1775891956508000021 | иконка 1775891956509000030 заголовок 1775891956509000023 | абзац 1775891956509000022 | точка 1776157356462000005 Карточка 6: рамка 1775891956509000024 | иконка 1775891956509000031 заголовок 1775891956509000028 | абзац 1775891956509000026 | точка 1776157356462000006 Высота карточки 400px: при 481px абзац при ширине 421px даёт ≈11 строк (198px) плюс заголовок в одну строку (24px) — итого ≈224px, запас ≈170px. В двух колонках на 640px карточка 290px, заголовок встаёт в две строки — запас всё равно >100px. Нижний элемент (две колонки): карточка 6, Y 970 + 400 = 1370 → артборд 1920px. Нижний элемент (одна колонка): карточка 6, Y 2280 + 400 = 2680 → артборд 3120px. ===================================================================================== */ @media (min-width:640px) and (max-width:1199px) { #rec2146825651 .t396__artboard, #rec2146825651 .t396__filter, #rec2146825651 .t396__carrier { height: 1920px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000002"] { left: 20px !important; top: 40px !important; width: calc(100% - 40px) !important; height: auto !important; } /* Левая колонка (X 20) */ #rec2146825651 .tn-elem[data-elem-id="1775891956508000003"] { left: 20px !important; top: 130px !important; width: calc(50% - 30px) !important; height: 400px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000007"] { left: 40px !important; top: 152px !important; width: 52px !important; height: 52px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000006"] { left: 98px !important; top: 158px !important; width: calc(50% - 118px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000004"] { left: 40px !important; top: 212px !important; width: calc(50% - 60px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1776157246435000001"] { left: 14px !important; top: 140px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000011"] { left: 20px !important; top: 550px !important; width: calc(50% - 30px) !important; height: 400px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000016"] { left: 40px !important; top: 572px !important; width: 52px !important; height: 52px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000014"] { left: 98px !important; top: 578px !important; width: calc(50% - 118px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000012"] { left: 40px !important; top: 632px !important; width: calc(50% - 60px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1776157344191000003"] { left: 14px !important; top: 560px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000021"] { left: 20px !important; top: 970px !important; width: calc(50% - 30px) !important; height: 400px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000030"] { left: 40px !important; top: 992px !important; width: 56px !important; height: 56px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000023"] { left: 98px !important; top: 998px !important; width: calc(50% - 118px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000022"] { left: 40px !important; top: 1052px !important; width: calc(50% - 60px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1776157356462000005"] { left: 14px !important; top: 980px !important; } /* Правая колонка — от середины окна */ #rec2146825651 .tn-elem[data-elem-id="1775891956508000008"] { left: calc(50% + 10px) !important; top: 130px !important; width: calc(50% - 30px) !important; height: 400px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000015"] { left: calc(50% + 30px) !important; top: 152px !important; width: 52px !important; height: 52px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000010"] { left: calc(50% + 88px) !important; top: 158px !important; width: calc(50% - 118px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000009"] { left: calc(50% + 30px) !important; top: 212px !important; width: calc(50% - 60px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1776157259698000002"] { left: calc(50% + 4px) !important; top: 140px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000017"] { left: calc(50% + 10px) !important; top: 550px !important; width: calc(50% - 30px) !important; height: 400px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000029"] { left: calc(50% + 30px) !important; top: 572px !important; width: 60px !important; height: 60px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000020"] { left: calc(50% + 88px) !important; top: 578px !important; width: calc(50% - 118px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000018"] { left: calc(50% + 30px) !important; top: 632px !important; width: calc(50% - 60px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1776157356462000004"] { left: calc(50% + 4px) !important; top: 560px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000024"] { left: calc(50% + 10px) !important; top: 970px !important; width: calc(50% - 30px) !important; height: 400px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000031"] { left: calc(50% + 30px) !important; top: 992px !important; width: 60px !important; height: 60px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000028"] { left: calc(50% + 88px) !important; top: 998px !important; width: calc(50% - 118px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000026"] { left: calc(50% + 30px) !important; top: 1052px !important; width: calc(50% - 60px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1776157356462000006"] { left: calc(50% + 4px) !important; top: 980px !important; } } /* --- Блок 1: 481–639px, ОДНА колонка (две не влезают: по ≈210px на карточку) --- */ @media (min-width:481px) and (max-width:639px) { #rec2146825651 .t396__artboard, #rec2146825651 .t396__filter, #rec2146825651 .t396__carrier { height: 3120px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000002"] { left: 20px !important; top: 40px !important; width: calc(100% - 40px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000003"] { left: 20px !important; top: 130px !important; width: calc(100% - 40px) !important; height: 400px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000007"] { left: 40px !important; top: 152px !important; width: 52px !important; height: 52px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000006"] { left: 98px !important; top: 158px !important; width: calc(100% - 118px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000004"] { left: 40px !important; top: 212px !important; width: calc(100% - 60px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1776157246435000001"] { left: 14px !important; top: 140px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000008"] { left: 20px !important; top: 560px !important; width: calc(100% - 40px) !important; height: 400px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000015"] { left: 40px !important; top: 582px !important; width: 52px !important; height: 52px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000010"] { left: 98px !important; top: 588px !important; width: calc(100% - 118px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000009"] { left: 40px !important; top: 642px !important; width: calc(100% - 60px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1776157259698000002"] { left: 14px !important; top: 570px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000011"] { left: 20px !important; top: 990px !important; width: calc(100% - 40px) !important; height: 400px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000016"] { left: 40px !important; top: 1012px !important; width: 52px !important; height: 52px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000014"] { left: 98px !important; top: 1018px !important; width: calc(100% - 118px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000012"] { left: 40px !important; top: 1072px !important; width: calc(100% - 60px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1776157344191000003"] { left: 14px !important; top: 1000px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000017"] { left: 20px !important; top: 1420px !important; width: calc(100% - 40px) !important; height: 400px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000029"] { left: 40px !important; top: 1442px !important; width: 60px !important; height: 60px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000020"] { left: 98px !important; top: 1448px !important; width: calc(100% - 118px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000018"] { left: 40px !important; top: 1502px !important; width: calc(100% - 60px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1776157356462000004"] { left: 14px !important; top: 1430px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956508000021"] { left: 20px !important; top: 1850px !important; width: calc(100% - 40px) !important; height: 400px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000030"] { left: 40px !important; top: 1872px !important; width: 56px !important; height: 56px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000023"] { left: 98px !important; top: 1878px !important; width: calc(100% - 118px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000022"] { left: 40px !important; top: 1932px !important; width: calc(100% - 60px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1776157356462000005"] { left: 14px !important; top: 1860px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000024"] { left: 20px !important; top: 2280px !important; width: calc(100% - 40px) !important; height: 400px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000031"] { left: 40px !important; top: 2302px !important; width: 60px !important; height: 60px !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000028"] { left: 98px !important; top: 2308px !important; width: calc(100% - 118px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1775891956509000026"] { left: 40px !important; top: 2362px !important; width: calc(100% - 60px) !important; height: auto !important; } #rec2146825651 .tn-elem[data-elem-id="1776157356462000006"] { left: 14px !important; top: 2290px !important; } } /* ===================================================================================== БЛОК 2 / 5 — «Преимущества» (плитки метрик), recordid 2146819281 Десктоп: 4 плитки 314×182 (X 55/407 × Y 50/285) + мокап 381×533 (X 785). Новая схема: 640–1199px — плитки 2×2; 481–639px — плитки в один столбец. Текст плитки выровнен по центру и растянут на всю ширину плитки (как в десктопе). Соответствие: Плитка 1: рамка 1775891563797000004 + текст 1775891563796000001 («260 %») + точка 1775891563797000007 Плитка 2: рамка 1775891563797000005 + текст 1775891563796000003 («72 %») + точка 1775891563798000009 Плитка 3: рамка 1775891563797000006 + текст 1775891563796000002 («24/7») + точка 1775891563798000008 Плитка 4: рамка 1775891563798000011 + текст 1775891563798000010 («IQ 150») + точка 1775891563798000013 Мокап: 1775891563798000012 | Сноска: 1775891563798000014 Мокап (пропорция 714×1280 = 1.79) в двух колонках ставится ПОД сетку по центру (left: calc(50% - 120px), 240×430), в одну колонку — тоже под плитки, по центру. Высота плитки: в двух колонках плитка 320px, текст «знает всё о вашем продукте» встаёт в 3 строки — хватает 190px; в одну колонку плитка 441px и текст может дать 6 строк — поэтому там 200px. Нижний элемент (две колонки): сноска Y 1010 → артборд 1040px. Нижний элемент (одна колонка): сноска Y 1400 → артборд 1440px. ===================================================================================== */ @media (min-width:640px) and (max-width:1199px) { #rec2146819281 .t396__artboard, #rec2146819281 .t396__filter, #rec2146819281 .t396__carrier { height: 1040px !important; } /* Плитка 1 (левая, верх) */ #rec2146819281 .tn-elem[data-elem-id="1775891563797000004"] { left: 20px !important; top: 60px !important; width: calc(50% - 30px) !important; height: 190px !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563796000001"] { left: 20px !important; top: 86px !important; width: calc(50% - 30px) !important; height: auto !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563797000007"] { left: 24px !important; top: 70px !important; } /* Плитка 3 (левая, низ) */ #rec2146819281 .tn-elem[data-elem-id="1775891563797000006"] { left: 20px !important; top: 300px !important; width: calc(50% - 30px) !important; height: 190px !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563796000002"] { left: 20px !important; top: 326px !important; width: calc(50% - 30px) !important; height: auto !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563798000008"] { left: 24px !important; top: 310px !important; } /* Плитка 2 (правая, верх) */ #rec2146819281 .tn-elem[data-elem-id="1775891563797000005"] { left: calc(50% + 10px) !important; top: 60px !important; width: calc(50% - 30px) !important; height: 190px !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563796000003"] { left: calc(50% + 10px) !important; top: 86px !important; width: calc(50% - 30px) !important; height: auto !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563798000009"] { left: calc(50% + 14px) !important; top: 70px !important; } /* Плитка 4 (правая, низ) */ #rec2146819281 .tn-elem[data-elem-id="1775891563798000011"] { left: calc(50% + 10px) !important; top: 300px !important; width: calc(50% - 30px) !important; height: 190px !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563798000010"] { left: calc(50% + 10px) !important; top: 326px !important; width: calc(50% - 30px) !important; height: auto !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563798000013"] { left: calc(50% + 14px) !important; top: 310px !important; } /* Мокап: 240×430, по центру окна */ #rec2146819281 .tn-elem[data-elem-id="1775891563798000012"] { left: calc(50% - 120px) !important; top: 560px !important; width: 240px !important; height: 430px !important; } /* Сноска: от левого края, на всю ширину */ #rec2146819281 .tn-elem[data-elem-id="1775891563798000014"] { left: 20px !important; top: 1010px !important; width: calc(100% - 40px) !important; height: auto !important; } } /* --- Блок 2: 481–639px, плитки в один столбец --- */ @media (min-width:481px) and (max-width:639px) { #rec2146819281 .t396__artboard, #rec2146819281 .t396__filter, #rec2146819281 .t396__carrier { height: 1440px !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563797000004"] { left: 20px !important; top: 60px !important; width: calc(100% - 40px) !important; height: 200px !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563796000001"] { left: 20px !important; top: 96px !important; width: calc(100% - 40px) !important; height: auto !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563797000007"] { left: 24px !important; top: 70px !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563797000005"] { left: 20px !important; top: 280px !important; width: calc(100% - 40px) !important; height: 200px !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563796000003"] { left: 20px !important; top: 316px !important; width: calc(100% - 40px) !important; height: auto !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563798000009"] { left: 24px !important; top: 290px !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563797000006"] { left: 20px !important; top: 500px !important; width: calc(100% - 40px) !important; height: 200px !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563796000002"] { left: 20px !important; top: 536px !important; width: calc(100% - 40px) !important; height: auto !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563798000008"] { left: 24px !important; top: 510px !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563798000011"] { left: 20px !important; top: 720px !important; width: calc(100% - 40px) !important; height: 200px !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563798000010"] { left: 20px !important; top: 756px !important; width: calc(100% - 40px) !important; height: auto !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563798000013"] { left: 24px !important; top: 730px !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563798000012"] { left: calc(50% - 120px) !important; top: 960px !important; width: 240px !important; height: 430px !important; } #rec2146819281 .tn-elem[data-elem-id="1775891563798000014"] { left: 20px !important; top: 1400px !important; width: calc(100% - 40px) !important; height: auto !important; } } /* ===================================================================================== БЛОК 3 / 5 — «3 шага до бесплатного запуска машины продаж», recordid 2155015001 Десктоп: 3 карточки 341×242 (X 20/420/820, Y 191) + кнопка 356×93 + подпись. Новая схема: 640–1199px — шаги 1 и 2 в две колонки, шаг 3 на всю ширину (у него самый длинный текст, в колонку он даёт 6 строк); 481–639px — все три шага в одну колонку. Подпись сдвинута вплотную к шагу 3 (в блоке между ними 200px пустоты — см. Y 478 против низа карточки 433). Соответствие: Шаг 1 (/01 «Оставьте заявку»): рамка 1775892636674000002 | номер 1775892636674000004 подзаголовок 1775892636675000006 | абзац 1775892636674000005 | точка 1776157607950000001 Шаг 2 (/02 «Рассчитайте ROI»): рамка 1775892636675000009 | номер 1775892636675000011 подзаголовок 1775892636675000007 | абзац 1775892636675000012 | точка 1776157607951000002 Шаг 3 (/03 «Начните бесплатно»): рамка 1775892636675000013 | номер 1775892636675000015 подзаголовок 1775892636675000008 | абзац 1775892636675000016 | точка 1776157607951000003 Подпись «Готовы начать за 15 минут?»: 1775892636675000017 Кнопка (фигура со ссылкой #popup:myform): 1776109087659000001 Высота шага 260px: в две колонки абзац при ширине 260px даёт 7 строк (137px) плюс заголовок — ≈205px; в одну колонку абзац шире (421px, 5 строк), запас ещё больше. Нижний элемент (две колонки): кнопка Y 700 + 93 = 793 → артборд 840px. Нижний элемент (одна колонка): кнопка Y 1040 + 93 = 1133 → артборд 1280px. ===================================================================================== */ @media (min-width:640px) and (max-width:1199px) { #rec2155015001 .t396__artboard, #rec2155015001 .t396__filter, #rec2155015001 .t396__carrier { height: 840px !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636674000001"] { left: 20px !important; top: 30px !important; width: calc(100% - 40px) !important; height: auto !important; } /* Шаг 1 (левая колонка) */ #rec2155015001 .tn-elem[data-elem-id="1775892636674000002"] { left: 20px !important; top: 130px !important; width: calc(50% - 30px) !important; height: 260px !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636674000004"] { left: 40px !important; top: 152px !important; width: 40px !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000006"] { left: 40px !important; top: 190px !important; width: calc(50% - 60px) !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636674000005"] { left: 40px !important; top: 232px !important; width: calc(50% - 60px) !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1776157607950000001"] { left: 14px !important; top: 140px !important; } /* Шаг 2 (правая колонка) */ #rec2155015001 .tn-elem[data-elem-id="1775892636675000009"] { left: calc(50% + 10px) !important; top: 130px !important; width: calc(50% - 30px) !important; height: 260px !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000011"] { left: calc(50% + 30px) !important; top: 152px !important; width: 40px !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000007"] { left: calc(50% + 30px) !important; top: 190px !important; width: calc(50% - 60px) !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000012"] { left: calc(50% + 30px) !important; top: 232px !important; width: calc(50% - 60px) !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1776157607951000002"] { left: calc(50% + 4px) !important; top: 140px !important; } /* Шаг 3 — на всю ширину */ #rec2155015001 .tn-elem[data-elem-id="1775892636675000013"] { left: 20px !important; top: 420px !important; width: calc(100% - 40px) !important; height: 200px !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000015"] { left: 40px !important; top: 442px !important; width: 40px !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000008"] { left: 40px !important; top: 480px !important; width: calc(50% - 60px) !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000016"] { left: 40px !important; top: 522px !important; width: calc(100% - 80px) !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1776157607951000003"] { left: 14px !important; top: 430px !important; } /* Подпись и кнопка */ #rec2155015001 .tn-elem[data-elem-id="1775892636675000017"] { left: 20px !important; top: 650px !important; width: calc(100% - 40px) !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1776109087659000001"] { left: calc(50% - 178px) !important; top: 700px !important; width: 356px !important; height: 93px !important; } } /* --- Блок 3: 481–639px, все три шага в одну колонку --- */ @media (min-width:481px) and (max-width:639px) { #rec2155015001 .t396__artboard, #rec2155015001 .t396__filter, #rec2155015001 .t396__carrier { height: 1280px !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636674000001"] { left: 20px !important; top: 30px !important; width: calc(100% - 40px) !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636674000002"] { left: 20px !important; top: 130px !important; width: calc(100% - 40px) !important; height: 250px !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636674000004"] { left: 40px !important; top: 152px !important; width: 40px !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000006"] { left: 40px !important; top: 190px !important; width: calc(100% - 80px) !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636674000005"] { left: 40px !important; top: 232px !important; width: calc(100% - 80px) !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1776157607950000001"] { left: 14px !important; top: 140px !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000009"] { left: 20px !important; top: 410px !important; width: calc(100% - 40px) !important; height: 250px !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000011"] { left: 40px !important; top: 432px !important; width: 40px !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000007"] { left: 40px !important; top: 470px !important; width: calc(100% - 80px) !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000012"] { left: 40px !important; top: 512px !important; width: calc(100% - 80px) !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1776157607951000002"] { left: 14px !important; top: 420px !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000013"] { left: 20px !important; top: 690px !important; width: calc(100% - 40px) !important; height: 250px !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000015"] { left: 40px !important; top: 712px !important; width: 40px !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000008"] { left: 40px !important; top: 750px !important; width: calc(100% - 80px) !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000016"] { left: 40px !important; top: 792px !important; width: calc(100% - 80px) !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1776157607951000003"] { left: 14px !important; top: 700px !important; } #rec2155015001 .tn-elem[data-elem-id="1775892636675000017"] { left: 20px !important; top: 990px !important; width: calc(100% - 40px) !important; height: auto !important; } #rec2155015001 .tn-elem[data-elem-id="1776109087659000001"] { left: calc(50% - 178px) !important; top: 1040px !important; width: 356px !important; height: 93px !important; } } /* ===================================================================================== БЛОК 4 / 5 — «Интеграции», recordid 2156817731 Десктоп: картинка-ассистент 429×389 (X 57) + 3 строки списка ~430px (X 645) с двумя разделителями. Это НЕ карточки, а две колонки — структуру сохраняем на 640px и выше; на 481–639px картинка уходит вниз (в две колонки строка с тринадцатью каналами сжалась бы до ≈210px — это 3 слова в строке). Соответствие: Заголовок «Интеграции» 1775892636674000001 | Подзаголовок 1776157813631 Картинка-ассистент 1776410250052 Строка «Каналы связи» 1776157877848000001 + её разделитель 1776157993960 Строка «CRM и управление лидами» 1776157905857000002 + её разделитель 1776158035945000004 Строка «Аналитика и автоматизация» 1776157909393000003 Высота строки: в блоке 72px, но на планшете текст переносится (при 481px строка с 13 каналами — 6 строк ≈ 130px), поэтому строке задано 160px, а разделители пересчитаны вместе со своими строками. Текст прижат к верху (vertical-align). Нижний элемент (две колонки): строка 3 Y 560 + 160 = 720 → артборд 880px. Нижний элемент (одна колонка): картинка Y 800 + 290 = 1090 → артборд 1560px (запас оставлен на случай, если строка с 13 каналами займёт больше 6 строк). ===================================================================================== */ @media (min-width:640px) and (max-width:1199px) { #rec2156817731 .t396__artboard, #rec2156817731 .t396__filter, #rec2156817731 .t396__carrier { height: 880px !important; } #rec2156817731 .tn-elem[data-elem-id="1775892636674000001"] { left: 20px !important; top: 30px !important; width: calc(100% - 40px) !important; height: auto !important; } #rec2156817731 .tn-elem[data-elem-id="1776157813631"] { left: 20px !important; top: 92px !important; width: calc(100% - 40px) !important; height: auto !important; } /* Картинка-ассистент — левая колонка */ #rec2156817731 .tn-elem[data-elem-id="1776410250052"] { left: 20px !important; top: 170px !important; width: calc(50% - 30px) !important; height: 400px !important; } /* Список — правая колонка: 3 строки по 160px и 2 разделителя между ними */ #rec2156817731 .tn-elem[data-elem-id="1776157877848000001"] { left: calc(50% + 10px) !important; top: 170px !important; width: calc(50% - 30px) !important; height: 160px !important; } #rec2156817731 .tn-elem[data-elem-id="1776157993960"] { left: calc(50% + 10px) !important; top: 345px !important; width: calc(50% - 30px) !important; } #rec2156817731 .tn-elem[data-elem-id="1776157905857000002"] { left: calc(50% + 10px) !important; top: 365px !important; width: calc(50% - 30px) !important; height: 160px !important; } #rec2156817731 .tn-elem[data-elem-id="1776158035945000004"] { left: calc(50% + 10px) !important; top: 540px !important; width: calc(50% - 30px) !important; } #rec2156817731 .tn-elem[data-elem-id="1776157909393000003"] { left: calc(50% + 10px) !important; top: 560px !important; width: calc(50% - 30px) !important; height: 160px !important; } } /* --- Блок 4: 481–639px, список на всю ширину, картинка уходит под него --- */ @media (min-width:481px) and (max-width:639px) { #rec2156817731 .t396__artboard, #rec2156817731 .t396__filter, #rec2156817731 .t396__carrier { height: 1560px !important; } #rec2156817731 .tn-elem[data-elem-id="1775892636674000001"] { left: 20px !important; top: 30px !important; width: calc(100% - 40px) !important; height: auto !important; } #rec2156817731 .tn-elem[data-elem-id="1776157813631"] { left: 20px !important; top: 92px !important; width: calc(100% - 40px) !important; height: auto !important; } #rec2156817731 .tn-elem[data-elem-id="1776157877848000001"] { left: 20px !important; top: 170px !important; width: calc(100% - 40px) !important; height: 160px !important; } #rec2156817731 .tn-elem[data-elem-id="1776157993960"] { left: 20px !important; top: 345px !important; width: calc(100% - 40px) !important; } #rec2156817731 .tn-elem[data-elem-id="1776157905857000002"] { left: 20px !important; top: 365px !important; width: calc(100% - 40px) !important; height: 160px !important; } #rec2156817731 .tn-elem[data-elem-id="1776158035945000004"] { left: 20px !important; top: 540px !important; width: calc(100% - 40px) !important; } #rec2156817731 .tn-elem[data-elem-id="1776157909393000003"] { left: 20px !important; top: 560px !important; width: calc(100% - 40px) !important; height: 160px !important; } /* Картинка под списком, по центру; 429×389 → 320×290 */ #rec2156817731 .tn-elem[data-elem-id="1776410250052"] { left: calc(50% - 160px) !important; top: 800px !important; width: 320px !important; height: 290px !important; } } /* ===================================================================================== БЛОК 5 / 5 — «Контакты», recordid 2146852021 Десктоп: шапка (X 85 и X 522), контакты (X 85), соцсети (X 85/132/179), кнопка 306×102 (X 519), подпись (X 842), 4 юридические ссылки (X 341 и X 820). Новая схема: 640–1199px — телефон и реквизиты слева, почта под телефоном, кнопка в правом верхнем углу (left:auto + right:20px, как телефон в шапке t7); 481–639px — одна колонка, кнопка прижата к правому краю, под ней ничего не теснится. Кнопка задана через right, чтобы она не зависела от ширины окна. Соответствие: Заголовок «Контакты» 1775892835116000002 | Подзаголовок 1775892835116000003 Телефон 1775892835117000006 | Почта 1775892835118000007 | Реквизиты 1775892835118000010 Соцсети: MAX 1776403109363, TenChat 1776403149734000001, Telegram 1776403524116000002 Кнопка (#popup:myform) 1776109431482000001 | Подпись 1775892835117000005 4 юридические ссылки (1775892835118000011/12, 1776109515156000003/04) НЕ переопределяются: на узкой ширине они ломаются, их место — подвал страницы. Готовые правила — в конце блока. Высота артборда: 380px (две колонки) — почта в 280px даёт 1 строку, реквизиты в 260px — 3 строки, соцсети на Y 300; 480px (одна колонка) — реквизиты в 260px дают 2 строки, кнопка уходит под них на Y 355, подпись на Y 470. ===================================================================================== */ @media (min-width:640px) and (max-width:1199px) { #rec2146852021 .t396__artboard, #rec2146852021 .t396__filter, #rec2146852021 .t396__carrier { height: 380px !important; } #rec2146852021 .tn-elem[data-elem-id="1775892835116000002"] { left: 20px !important; top: 20px !important; width: calc(100% - 40px) !important; height: auto !important; } #rec2146852021 .tn-elem[data-elem-id="1775892835116000003"] { left: 20px !important; top: 66px !important; width: calc(100% - 350px) !important; height: auto !important; } /* Левая колонка: телефон, почта, реквизиты, соцсети */ #rec2146852021 .tn-elem[data-elem-id="1775892835117000006"] { left: 20px !important; top: 120px !important; width: 260px !important; height: auto !important; } #rec2146852021 .tn-elem[data-elem-id="1775892835118000007"] { left: 20px !important; top: 148px !important; width: calc(100% - 360px) !important; height: auto !important; } #rec2146852021 .tn-elem[data-elem-id="1775892835118000010"] { left: 20px !important; top: 210px !important; width: 260px !important; height: auto !important; } #rec2146852021 .tn-elem[data-elem-id="1776403109363"] { left: 20px !important; top: 300px !important; width: 30px !important; height: 30px !important; } #rec2146852021 .tn-elem[data-elem-id="1776403149734000001"] { left: 60px !important; top: 300px !important; width: 30px !important; height: 30px !important; } #rec2146852021 .tn-elem[data-elem-id="1776403524116000002"] { left: 100px !important; top: 300px !important; width: 30px !important; height: 30px !important; } /* Кнопка и подпись — к правому краю окна */ #rec2146852021 .tn-elem[data-elem-id="1776109431482000001"] { left: auto !important; right: 20px !important; top: 120px !important; width: 306px !important; height: 102px !important; } #rec2146852021 .tn-elem[data-elem-id="1775892835117000005"] { left: auto !important; right: 20px !important; top: 240px !important; width: 306px !important; height: auto !important; } } /* --- Блок 5: 481–639px, одна колонка --- */ @media (min-width:481px) and (max-width:639px) { #rec2146852021 .t396__artboard, #rec2146852021 .t396__filter, #rec2146852021 .t396__carrier { height: 480px !important; } #rec2146852021 .tn-elem[data-elem-id="1775892835116000002"] { left: 20px !important; top: 20px !important; width: calc(100% - 40px) !important; height: auto !important; } #rec2146852021 .tn-elem[data-elem-id="1775892835116000003"] { left: 20px !important; top: 66px !important; width: calc(100% - 40px) !important; height: auto !important; } #rec2146852021 .tn-elem[data-elem-id="1775892835117000006"] { left: 20px !important; top: 120px !important; width: 220px !important; height: auto !important; } #rec2146852021 .tn-elem[data-elem-id="1775892835118000007"] { left: 20px !important; top: 148px !important; width: calc(100% - 40px) !important; height: auto !important; } #rec2146852021 .tn-elem[data-elem-id="1775892835118000010"] { left: 20px !important; top: 200px !important; width: 260px !important; height: auto !important; } #rec2146852021 .tn-elem[data-elem-id="1776403109363"] { left: 20px !important; top: 290px !important; width: 30px !important; height: 30px !important; } #rec2146852021 .tn-elem[data-elem-id="1776403149734000001"] { left: 60px !important; top: 290px !important; width: 30px !important; height: 30px !important; } #rec2146852021 .tn-elem[data-elem-id="1776403524116000002"] { left: 100px !important; top: 290px !important; width: 30px !important; height: 30px !important; } #rec2146852021 .tn-elem[data-elem-id="1776109431482000001"] { left: auto !important; right: 20px !important; top: 355px !important; width: 306px !important; height: 102px !important; } #rec2146852021 .tn-elem[data-elem-id="1775892835117000005"] { left: 20px !important; top: 470px !important; width: calc(100% - 40px) !important; height: auto !important; } } /* ===================================================================================== ЮРИДИЧЕСКИЕ ССЫЛКИ В БЛОКЕ 5 (по умолчанию выключены) Четыре ссылки (/ps, /sv, /of, /cookie) в блоке стоят ниже кнопки. Если их нужно показать внутри секции, раскомментируйте блок ниже. Ссылки лежат в очереди табуляции, поэтому «спрятать» их через left:5000px неправильно, а display:none здесь не нужен: переопределения left/width, заданные только для 640–1199px, на ≤479px не действуют, и мобильная версия остаётся как есть. 1775892835118000011 — Политика конфиденциальности 1775892835118000012 — Согласие на обработку персональных данных 1776109515156000003 — Договор оферты 1776109515156000004 — Политика использования cookie-файлов ===================================================================================== */ /* @media (min-width:640px) and (max-width:1199px) { #rec2146852021 .tn-elem[data-elem-id="1775892835118000011"] { left: 20px !important; top: 350px !important; width: calc(50% - 30px) !important; height: auto !important; } #rec2146852021 .tn-elem[data-elem-id="1775892835118000012"] { left: 20px !important; top: 372px !important; width: calc(50% - 30px) !important; height: auto !important; } #rec2146852021 .tn-elem[data-elem-id="1776109515156000003"] { left: calc(50% + 10px) !important; top: 350px !important; width: calc(50% - 30px) !important; height: auto !important; } #rec2146852021 .tn-elem[data-elem-id="1776109515156000004"] { left: calc(50% + 10px) !important; top: 372px !important; width: calc(50% - 30px) !important; height: auto !important; } } */ /* ===================================================================================== ОБЩИЕ ПРАВИЛА ДЛЯ ВСЕХ ПЯТИ СЕКЦИЙ (481–1199px) Снимаем ограничение ширины текста: на ≤479px Tilda ставит width:320px при контейнере 320px, поэтому внутри карточки абзац сжимался бы до 320px и не совпадал с её шириной. Текст в карточках прижимаем к верху: в блоке он был выровнен по центру абзаца, и при переносе на планшете это давало «плавающие» заголовки. ===================================================================================== */ @media (min-width:481px) and (max-width:1199px) { #rec2146825651 .tn-elem[data-elem-type="text"] .tn-atom, #rec2146819281 .tn-elem[data-elem-type="text"] .tn-atom, #rec2155015001 .tn-elem[data-elem-type="text"] .tn-atom, #rec2156817731 .tn-elem[data-elem-type="text"] .tn-atom, #rec2146852021 .tn-elem[data-elem-type="text"] .tn-atom { white-space: normal !important; word-break: normal !important; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } #rec2146825651 .tn-atom__img, #rec2146819281 .tn-atom__img, #rec2155015001 .tn-atom__img, #rec2156817731 .tn-atom__img, #rec2146852021 .tn-atom__img { object-fit: contain !important; } /* Блок 4: строки списка заданы высокими (160px) под перенос текста, поэтому текст прижимаем к верху — иначе он «плавал» бы по центру между разделителями. */ #rec2156817731 .tn-elem[data-elem-id="1776157877848000001"] .tn-atom, #rec2156817731 .tn-elem[data-elem-id="1776157905857000002"] .tn-atom, #rec2156817731 .tn-elem[data-elem-id="1776157909393000003"] .tn-atom { vertical-align: top !important; } } /* ===================================================================================== КОНТРОЛЬ КООРДИНАТ — «не уехало ли за край» ------------------------------------------------------------------------------------- Система координат: артборд имеет position:relative и width:100%, его левый край совпадает с левым краем контентной области окна. Значит `left` отсчитывается ОТ КРАЯ ОКНА. В файле нет ни одного отрицательного left и нет формы calc(50% − Npx + X). Проверка 0 ≤ left и left + width ≤ V для V = 481 / 640 / 768 / 960 / 1024 / 1199: элемент left width правый край ── БЛОК 1, две колонки (640–1199) ─────────────────────────────────────────────────── заголовок 20px 100% − 40px V − 20 ✓ карточка, левая 20px 50% − 30px V/2 − 10 ✓ карточка, правая 50% + 10px 50% − 30px V − 20 ✓ иконка, левая колонка 40px 52px 92 ✓ (и при 481) заголовок карточки 98px 50% − 118px V/2 − 20 ✓ абзац карточки 40px 50% − 60px V/2 − 20 ✓ точки 14px 13px 27 ✓ ── БЛОК 1, одна колонка (481–639) ────────────────────────────────────────────────── карточка 20px 100% − 40px V − 20 ✓ абзац карточки 40px 100% − 60px V − 20 ✓ ── БЛОК 2 ────────────────────────────────────────────────────────────────────────── плитка, левая 20px 50% − 30px V/2 − 10 ✓ плитка, правая 50% + 10px 50% − 30px V − 20 ✓ мокап (обе схемы) 50% − 120px 240px V/2 + 120 ✓ (481: 120.5…360.5) сноска 20px 100% − 40px V − 20 ✓ ── БЛОК 3 ────────────────────────────────────────────────────────────────────────── шаг 3 (на всю ширину) 20px 100% − 40px V − 20 ✓ абзац шага 3 40px 100% − 80px V − 40 ✓ кнопка 50% − 178px 356px V/2 + 178 ✓ (481: 62.5…418.5) ── БЛОК 4 ────────────────────────────────────────────────────────────────────────── картинка (две колонки) 20px 50% − 30px V/2 − 10 ✓ строка списка (две колонки) 50% + 10px 50% − 30px V − 20 ✓ строка списка (одна колонка) 20px 100% − 40px V − 20 ✓ картинка (одна колонка) 50% − 160px 320px V/2 + 160 ✓ (481: 80.5…400.5) ── БЛОК 5 ────────────────────────────────────────────────────────────────────────── подзаголовок (две колонки) 20px 100% − 350px V − 330 ✓ (640: 310) почта (две колонки) 20px 100% − 360px V − 340 ✓ (640: 300) кнопка left:auto, right:20px, 306px V − 20 ✓ (640: 334…620) кнопка (одна колонка) left:auto, right:20px, 306px V − 20 ✓ (481: 155…461) Итог: ни на одной ширине диапазона ни один элемент не выходит за 0…V. ЧТО ПРОВЕРИТЬ В БРАУЗЕРЕ (рендер в момент написания недоступен) ------------------------------------------------------------------------------------- • 481, 640, 768, 960, 1024, 1199 — по одной ширине в каждой зоне; • 479 — убедиться, что штатная мобильная версия не пострадала (её не трогаем); • в каждой карточке иконка, заголовок и абзац стоят вместе, внутри рамки; • ничего не обрезано справа и снизу (высоты артбордов: блок 1 — 1920/3120, блок 2 — 1040/1440, блок 3 — 840/1280, блок 4 — 880/1560, блок 5 — 380/480; первое число — 640–1199px, второе — 481–639px). ГДЕ ДАННЫХ НЕ ХВАТИЛО ------------------------------------------------------------------------------------- 1. Ширина строк шрифтов Unbounded/Manrope в браузере не измерена (рендера нет), поэтому высоты карточек и зазоры взяты с запасом: карточка блока 1 — 400px против расчётных ≈224px на 481px. Если при проверке окажется, что абзац не укладывается, увеличивать нужно только height у рамки нужной карточки (правится в одном месте, поиском по data-elem-id). 2. Три текста в блоке 5 на 481–530px шире своей колонки и переносятся на две строки (overflow на 3–34px — штатный перенос слова, не обрезка, потому что у артборда overflow:hidden по горизонтали, а текст переносится): • подзаголовок «Готовы увеличить конверсию?» — 254px в 214px; • реквизиты «ИП Гмир Павел Викторович / ИНН / ОГРНИП» — 221px в 213px; • почта «Почта: gmir.pavel@yandex.ru» — 213px в 214px (влезает в строку). Если не нравится перенос — уменьшить кегль этих трёх элементов на 1–2px в правилах для 481–639px (data-elem-id 1775892835116000003, 1775892835118000010, 1775892835118000007). 3. Ширина кнопок-картинок внутри SVG неизвестна: у кнопки блока 3 использован размер 356×93 из блока (у t7 тот же кадр дал видимый край 357×83.5). Если кнопка встанет не по центру — правится одним правилом (left у 1776109087659000001). 4. Горизонтальное выравнивание текста внутри карточек не менялось (в блоке text-align:center у части заголовков) — при переносе на планшете заголовок может выглядеть центрированным в широкой карточке. Это косметика; при желании правится `text-align: left` на конкретные data-elem-id. ===================================================================================== */ /* ===== КОНЕЦ ЧАСТИ 3 (cards, t9). Всего три части: проектный CSS + hero + cards ===== */