/* * Глобальная посадочная «Пробный урок» (/trial-lesson/). * Секции A-S1…A-S10. Mobile-first. Все стили заскоуплены префиксом trial-*, * чтобы не растекались на другие страницы. Опирается на примитивы base.css * (.hero/.hero-grid/.lead-card/.card/.chip/.faq/.final-grid/.btn) и токены. * Тёмная тема — через семантические токены (--surface/--line/--text…), * отдельных правил не требует; цветовые тинты берём через color-mix. */ /* ---------- Общий заголовок секции ---------- */ .trial-sec-head{max-width:46rem;margin:0 auto clamp(28px,4vw,44px);text-align:center;display:flex;flex-direction:column;align-items:center} .trial-sec-head .eyebrow{margin-bottom:12px} .trial-sec-head .sec-desc{margin-top:14px;max-width:60ch} /* короткие заголовки секций не должны переноситься по слогам на десктопе */ .trial-sec-head .sec-title, .trial-final-sec .sec-title, .trial-assure-title, .trial-cross-title{hyphens:manual;text-wrap:balance} /* ---------- A-S1 · Hero ---------- * Пропорция сплита выровнена с главной: 1fr/1fr вместо базовых 1.15fr/.85fr. * Причина та же, что описана в home.css:43-59 — глобальная точка входа с формой * в hero должна читаться одинаково на «/» и на «/trial-lesson/», иначе при * переходе между ними карточка заявки заметно «дышит» шириной. * * Базовый примитив base.css (.hero-grid / .final-grid) НЕ трогаем: его делят * десятки посадочных (курсы, программа, промо, языковые хабы) — правка там * разъехалась бы по всему сайту. Перебиваем локально: селекторы .trial-hero * .hero-grid и .trial-final-sec .final-grid имеют специфичность 0,2,0 против * 0,1,0 у базовых, поэтому выигрывают независимо от медиазапросов. * * ПОРОГ ДВУХ КОЛОНОК — 1000px, вслед за money-hero главной (13.08.2026). * * До этого здесь стояло 1200 с доводом «иначе на 1024–1199 trial уже в две * колонки, а главная ещё в одну». Довод был верен ровно до коммита 30a6cef, * которым порог money-hero главной и языковых хабов опустили 1200 → 1000 — * как раз чтобы закрыть мёртвую зону 1024, где лид-форма растягивается во всю * ширину и кнопка отправки уходит под сгиб. После него рассогласованность * получилась обратной и уже за счёт этой страницы: на 1024 главная показывала * сплит, а пробный урок — одну колонку с полупустой правой половиной и кнопкой * на 1135px при сгибе ноутбука 768. Возвращаем страницы на общий порог. * * Порог не назначен, а замерен — там же, на главной: при 960px колонка формы * 416px и строка «код страны + номер» держит 338px, то есть теснее, чем на * телефоне 480px, но ещё рабоче; запас до первой поломки берём один шаг сетки, * отсюда 1000. На этой странице замер подтверждён отдельно: см. блок про * диапазон 1000–1199 ниже. * * ФИНАЛЬНЫЙ CTA ОСТАЁТСЯ НА 1200 — и это то же решение, что на главной. * Его левая колонка несёт длинный H2 секции, а не короткий оффер hero, и на * 1000px разъезжается. Общий gap clamp(36px,3.4vw,52px) у обеих сеток сохранён, * поэтому карточка заявки в hero и карточка финального CTA по-прежнему стоят * по одной вертикали и занимают половину своей сетки — просто перелом у них * теперь разный. * * Ниже 1000 — одна колонка: H1 во всю ширину, форма следом (mobile-first). */ .trial-hero .hero-grid{grid-template-columns:1fr;align-items:start} .trial-final-sec .final-grid{grid-template-columns:1fr;align-items:start} @media(min-width:1000px){ .trial-hero .hero-grid{grid-template-columns:1fr 1fr;gap:clamp(36px,3.4vw,52px);align-items:start} } @media(min-width:1200px){ .trial-final-sec .final-grid{grid-template-columns:1fr 1fr;gap:clamp(36px,3.4vw,52px);align-items:start} } /* ─── ПЛАНШЕТНЫЙ ДИАПАЗОН 600–999: РЕШЕНИЕ ПРИНЯТО, ПРАВОК НЕ ЖДЁМ ─────────── * Замер после понижения порога (13.08.2026, обе локали): на 768×1024 кнопка * заявки стоит на 1114px, на 960×800 — на 1119px, то есть за сгибом. Понижение * порога до 1000 этот диапазон не задело и не могло: ниже 1000 hero остаётся * одноколоночным, а в одну колонку карточка высотой 561–580px под полноразмерным * H1 в фолд не помещается. * * Вылечить можно — уплотнением H1 и вертикального ритма на 600–1199, это около * 104px. РЕШЕНИЕ ВЛАДЕЛЬЦА ОТ 13.08.2026: НЕ УПЛОТНЯТЬ. Довод — планшетов в * платном трафике практически нет, все клики мобильные, и жертвовать видом * заголовка ради балла на пустой ширине не стоит. 768 сознательно остаётся * на 8/10 по конверсионному критерию первого экрана. * * Запись оставлена, чтобы следующий проход quality-gate не принял эту восьмёрку * за недоделку: вопрос обсуждён и закрыт, переоткрывать его — только с новыми * данными по доле планшетов. */ /* Потолок кегля H1 привязан к ширине окна, а не к абсолютному значению. * Базовый .hero h1 (base.css) упирается в 4.25rem = 68px уже на ~1180px, и с этого * момента кегль стоит, а колонка продолжает сжиматься к порогу 1200. Русскому * «Бесплатный» (10 знаков) этого хватает, украинскому «Безкоштовний» — нет: слово * требует 648px, а колонка на 1200px даёт 532px, и заголовок вылезал ИЗ КОЛОНКИ на * 116px, заезжая под карточку формы (на 1280 — на 77px, на 1366 — на 36px). * Перенести нельзя: hyphens:manual запрещает разрыв внутри слова — и правильно, * «Безкош-товний» в hero недопустимо. Значит масштабируем кегль: 4.5vw держит * самое длинное слово внутри колонки с запасом ~5% на всём диапазоне 1000–1510, * дальше вступает прежний потолок 4.25rem (колонка перестаёт расти на 1440 — * .wrap упирается в max-width). На русской локали видимых изменений нет: её H1 * и так не биндил меру. * * Правило действует с 1000px, а не с 1200: порог сплита опущен (см. выше), и на * 1000–1199 колонка ещё уже — 458px на 1000 против 532 на 1200. Без потолка там * работал бы базовый clamp (60px на 1000px окна), и «Безкоштовний» потребовал бы * 572px в колонке 458. С 4.5vw кегль на 1000px равен 45px, слову нужно 429px — * запас 6%, тот же порядок, что на широких. */ @media(min-width:1000px){ .trial-hero h1{font-size:min(4.25rem,4.5vw)} } .trial-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px} .trial-eyebrow svg{width:16px;height:16px;color:var(--primary);flex:none} /* ─── НИЗКОЕ ОКНО НА ДЕСКТОПЕ: КНОПКА ВЫШЕ СГИБА ──────────────────────────── * Гейт по ВЫСОТЕ окна, а не по ширине, и это не педантизм. После понижения * порога сплита до 1000 замеры дали ровно ту же картину, что на money-hero * главной: на 1440×900 и 1536×864 карточка укладывается сама (кнопка на 743), * а на 1000×768, 1024×768 и 1100×800 — нет (816, 818, 804), притом что ширина * там разная, а не хватает одного и того же — вертикали. Ноутбук с окном * 768–800px и есть типичный десктоп платного трафика. * * Карточка в узкой колонке ещё и выше, чем в широкой: 666px на 1024 против * 623 на 1199 и 581 на 1440 — юридический текст согласия RODO при 447px * колонки занимает на две строки больше. Сокращать его нельзя, поэтому * забираем воздух, который считался под просторный экран. * * Уплотнение мягче мобильного: поля 48px (против 44 на телефоне и 52 на * просторном экране), потому что мышь не палец и промахов здесь нет. Значения * взяты из money-hero (pages/home.css) — карточка заявки на сайте одна и на * одинаковых окнах должна выглядеть одинаково. * * Одна строка сверх набора главной — отбивка плашки 14 → 10px. На самом пороге * 1000×768 колонка формы 435px, и русский текст согласия занимает там на строку * больше украинского: карточка 617px против 598 и кнопка на 771 при сгибе 768. * Не хватало трёх пикселей, и забрать их дешевле всего у отбивки, которую * глазом не измерить. У главной этой строки нет: её карточка на 1000px ниже. * * Единая геометрия с финальным CTA этим не нарушается: тот стоит внизу * страницы, куда доскроллили сознательно, и борьбы за первый экран не ведёт. */ @media(min-width:1000px) and (max-height:849.98px){ .trial-hero .lead-card{padding:22px 24px 24px} .trial-hero .lead-ribbon{margin-bottom:10px} .trial-hero .lead-card .lead-sub{margin-bottom:14px} .trial-hero .lead-grid fieldset{gap:10px} .trial-hero .lead-grid input[type=text], .trial-hero .lead-grid input[type=tel], .trial-hero .lead-grid .ff-el-form-control, .trial-hero .lead-grid .eps-phone input, .trial-hero .lead-grid .eps-phone__country, .trial-hero .lead-grid .eps-phone__btn{min-height:48px;height:48px} .trial-hero .lead-grid .ff-btn-submit, .trial-hero .lead-grid .ff-btn{min-height:52px;height:52px} .trial-hero .lead-foot-note{margin-top:10px} } /* ---------- A-S1 · Порядок блоков: форма сразу под H1 на узких ширинах ------ * ads-structure §6.3.1. Ниже порога сплита колонка одна, и раньше форма оказывалась под * eyebrow, H1, лидом из 25 слов и четырьмя буллетами: 5,5% посетителей вообще * начинали её заполнять, притом что начавшие доводили до конца. Задача была не * «поднять форму», а сменить порядок. * * Порядок задан РАЗМЕТКОЙ (patterns/trial-hero.php): .hero-copy → .hero-lead → * .hero-aside. Мобильному правил не нужно вовсе. Здесь только сборка левой * колонки на десктопе grid-областями — без order и display:contents, чтобы * визуальный порядок совпадал с порядком чтения и таб-фокуса. * * Пустая строка с высотой 1fr поглощает лишнюю высоту карточки: .hero-lead * спанит все строки левой колонки, и без неё auto-строки растащило бы копи * и aside по вертикали. * * ГДЕ ПОГЛОЩАЕТСЯ РАЗНИЦА ВЫСОТ (вторая переделка 13.08.2026). Утром пустая * строка 1fr стояла внизу левой колонки: карточка была длиннее и «свисала», а * строка не давала auto-строкам растащить копи и aside. К вечеру знак разницы * сменился. Карточка заявки выровнена с остальными шестью карточками темы * (patterns/trial-hero.php), из неё ушёл хвост в 231px, и замеры дали: * * ширина карточка левая колонка (копи+aside) разница ru / uk * 1200 623 724 / 678 −102 / −56 * 1280 623 691 / 666 −69 / −44 * 1440 581 690 / 690 −110 / −110 * 1536 581 701 / 675 −121 / −95 * * То есть теперь короче ПРАВАЯ колонка, а не левая. Если бы хвост просто лёг в * .hero-aside, левая ушла бы на 940–974px и под карточкой открылась бы пустота * 293–370px — та же болезнь, что лечили утром, только зеркальная. * * Поэтому хвост вынесен третьей строкой во всю ширину: "copy lead" / "aside lead" / * "tail tail". Верхние две строки сходятся сами (разница −102…−121px — тот же * порядок, что признан нормой утром), а полоса .trial-tail подпирает hero снизу * сразу под обеими колонками, так что свисать некуда ни одной из них. Пустая * строка-поглотитель больше не нужна и убрана: её работу делает tail. * * От money-hero главной раскладка теперь отличается на одну строку, и это * осознанно: у главной хвоста под сплитом нет. * * Порядок в DOM не меняется ни при одной из раскладок: копи → карточка → aside → * хвост, и в разметке, и на экране, без order и display:contents. */ @media(min-width:1000px){ .trial-hero .hero-grid{ grid-template-areas:"copy lead" "aside lead" "tail tail"; grid-template-rows:auto auto auto; column-gap:clamp(36px,3.4vw,52px); row-gap:0; } .trial-hero .hero-grid>.hero-copy{grid-area:copy} .trial-hero .hero-grid>.hero-lead{grid-area:lead} .trial-hero .hero-grid>.hero-aside{grid-area:aside;margin-top:clamp(20px,2.2vw,28px);padding-bottom:clamp(8px,2vw,20px)} .trial-hero .hero-grid>.trial-tail{grid-area:tail} } .trial-hero .hero-aside{min-width:0} .trial-hero .hero-aside .hero-lede{margin-top:0} /* Плашка «Бесплатно · 60 минут» на самых узких экранах: украинская локализация * («БЕЗКОШТОВНО · 60 ХВИЛИН») на 15 символов длиннее русской и на 360px рвалась * на две строки — вместо пилюли получался прямоугольник в две строки капсом. * Базовое правило base.css поджимает её с 400px, но украинской строке этого не * хватает; добавляем вторую ступень. Русскую строку не задевает — она короче * и на этой ширине и так в одну строку. */ @media(max-width:389.98px){ .trial-hero .lead-ribbon{font-size:.69rem;gap:5px;padding-left:10px;padding-right:10px} .trial-hero .lead-ribbon svg{width:13px;height:13px} } /* Буллеты доверия ниже 1000px — одной компактной строкой через разделитель, * а не четырьмя строками с галочками: на 360px это экономит около 90px высоты, * а роль у них подтверждающая, а не повествовательная. */ /* На двух колонках те же четыре буллета — сеткой 2×2, а не flex-wrap строкой. * Строкой они ломались 3+1: три пункта в ряд, четвёртый висел один под ними и * читался как приписка, а не как часть набора. Сетка даёт ровный прямоугольник * под лидом, закрывает низ колонки и заодно на ~35px сокращает выступ карточки. */ @media(min-width:1000px){ .trial-hero .hero-assure{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-top:26px;padding-top:22px} .trial-hero .hero-assure-item{align-items:flex-start;font-size:.9rem;line-height:1.45} .trial-hero .hero-assure-item svg{margin-top:2px} } @media(max-width:999.98px){ .trial-hero .hero-assure{display:block;margin-top:16px;padding-top:14px} .trial-hero .hero-assure-item{display:inline;font-size:.82rem;line-height:1.6;font-weight:600;color:var(--text-muted)} .trial-hero .hero-assure-item svg{display:none} .trial-hero .hero-assure-item+.hero-assure-item::before{content:"·";margin:0 7px;font-weight:700} } /* ---------- A-S1 · «Что будет на пробном» — четыре строки под H1 ------------- * Живёт в .hero-copy, сразу под заголовком и выше формы (см. комментарий в * patterns/trial-hero.php: до 13.08.2026 блок стоял внутри .lead-card и делал её * вдвое выше левой колонки). Намеренно НЕ плитки с иконками: это не секция, а * четыре строки, объясняющие, за что человек отдаёт телефон. * * Вне карточки блок получает собственный верхний разделитель — он привязывает * список к H1 и не даёт ему слипнуться с карточкой формы, которая ниже. Кегль * поднят с .88 до .95rem: в карточке список был подписью к полям, в колонке * оффера он самостоятельный аргумент и читается наравне с лидом. * Иконка-галочка декоративная (aria-hidden), смысл несёт текст. */ .trial-what{position:relative;list-style:none;margin:clamp(20px,2.6vw,28px) 0 0;padding:clamp(16px,2vw,20px) 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px;max-width:54ch} .trial-what-item{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;line-height:1.55;color:var(--text)} .trial-what-item svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--green)} @media(min-width:480px){.trial-what-item{font-size:.95rem}} /* На двухколоночной раскладке список работает вместе с H1 как единый оффер: * чуть крупнее, интервал шире, мера по колонке (не по 54ch — колонка уже). */ @media(min-width:1000px){ .trial-what{gap:13px;max-width:none} .trial-what-item{font-size:1rem;line-height:1.6} .trial-what-item svg{width:18px;height:18px;margin-top:4px} } /* ─── БЮДЖЕТ ПЕРВОГО ЭКРАНА НА ТЕЛЕФОНЕ (≤600px) ───────────────────────────── * Цель приёмки одна и проверяемая: кнопка «Записаться на пробный урок» видна * без прокрутки на 360×640 — худшая реальная высота из записей платных сессий. * До правки кнопка стояла на 1129–1185px, то есть почти на два экрана ниже * сгиба; страница при этом — конверсионная цель №1 и общая точка входа пяти * языковых мини-сайтов. * * Арифметика (360×640, ru). Кнопка укладывается, если карточка формы начинается * не ниже ~270px: от её верха до низа кнопки ровно 370px — это уже измеренная * геометрия уплотнённой карточки (плашка + заголовок + три группы полей + сабмит). * До правки карточка начиналась на 588px. Значит снять надо ~320px, и снимаются * они не одним рычагом, а пятью, каждый со своим обоснованием: * * ~46px подступы: padding-block hero 36→8, отступ под крошками 14→8; * ~37px eyebrow «Бесплатно · Без обязательств» скрыт — в 30px под ним стоит * плашка карточки «Бесплатно · 60 минут», и слово «Бесплатно» на первом * экране печаталось дважды подряд. «Без обязательств» со страницы не * пропадает: тот же смысл несёт буллет .hero-assure под формой; * ~55px H1 с 1.85rem/4 строк до 1.4rem/2 строк (и снятая мера 18ch — она * и загоняла короткий заголовок в лишние строки); * ~150px список «что будет на пробном» — из четырёх строк с галочками в * компактную полосу-перечисление (см. ниже, содержание не тронуто); * ~16px зазор сетки hero 32→16; * ~235px уплотнение самой карточки — оно ниже отдельным блоком. * * Того же приёма, что на языковых хабах, здесь мало: там между H1 и карточкой * стоит одна короткая факт-строка (35px), а тут — обязательный по требованию * marketer список из четырёх утверждений, который человек должен прочитать ДО * ввода телефона. Он и остаётся выше формы, меняется только подача. * * Лид-абзац [data-eps-lang-sub] переносить не потребовалось: он и так лежит в * .hero-aside, то есть в DOM и на экране уже ПОСЛЕ формы. Атрибут и элемент * трогать нельзя — по нему entry-lead.js подменяет текст при ?tlang=… * * Порядок DOM не меняется ни на одной ширине: копи → карточка → aside → хвост. * Ни order, ни display:contents (WCAG 2.1 §1.3.2, §2.4.3). */ @media(max-width:599.98px){ /* Подступы к карточке: каждый пиксель здесь — пиксель, отнятый у кнопки. * Крошки остаются: это навигация и ориентир, а не украшение. */ .trial-hero{padding-block:8px clamp(24px,4vw,36px)} .trial-hero .crumbs{padding-bottom:6px;margin-bottom:6px} .trial-hero .hero-grid{gap:14px} /* Eyebrow — дубль плашки карточки, см. арифметику выше. display:none, а не * clip: элемента не должно остаться и в порядке чтения скринридера. */ .trial-eyebrow{display:none} /* H1: мера 18ch (base.css) рассчитана на длинные заголовки хабов и короткий * заголовок пробного разрывала на четыре строки шириной в полколонки. Снимаем * меру и опускаем кегль — «Бесплатный пробный урок онлайн» встаёт в две * плотные строки во всю ширину, украинский «Безкоштовний…» тоже. * text-wrap:wrap отключает балансировку: на телефоне важнее высота, чем * ровный правый край. */ .trial-hero h1{font-size:1.35rem;line-height:1.2;max-width:none;text-wrap:wrap} } /* ─── «Что будет на пробном» на телефоне: полоса-перечисление ──────────────── * Требование marketer сохранено дословно: все четыре утверждения читаются ДО * поля телефона, в том же порядке и тем же текстом. Меняется только подача — * вместо четырёх абзацев с галочками (233px на 360) одна плотная полоса (≈80px). * Ни одна строка не сокращена и не скрыта: это CSS-раскладка одного и того же * списка, разметка и i18n-строки общие с десктопом. * * Маркер — галочка, а не точка: она отличает эту полосу от буллетов доверия * .hero-assure, которые ниже формы набраны точно такой же строкой через «·», * и сохраняет за списком его смысл «отмеченные пункты». Семантика