/* ═══════════════════════════════════════════════════════════════════════ prorecept-landing.css — правки вёрстки публичных страниц: / и /kurs/… prorecept.css заморожен (см. CLAUDE.md): все правки лендинга живут здесь. Новых классов не вводим — селекторы опираются на уже существующие .hero / .tiers / .tier и на разметку, которую выдаёт src/Content/Landing/LandingParser. ПРАВИЛО ПЕРЕОПРЕДЕЛЕНИЯ. Файл грузится ПОСЛЕ prorecept.css и при равной специфичности побеждает. Поэтому перед каждым правилом проверяем, есть ли у переопределяемого СВОЙСТВА медиа-вариант в замороженном файле: — есть -> правило обязано быть заперто в непересекающийся брейкпойнт, иначе перебьёт базовое (случай .tiers, см. ниже); — нет -> безусловное правило корректно (случай .hero h1). ═══════════════════════════════════════════════════════════════════════ */ /* ─── HERO: потолок кегля заголовка ──────────────────────────────────── prorecept.css:220 задаёт font-size: clamp(40px, 5.6vw, 80px). Средний член растёт от вьюпорта, а колонка .hero .left упирается в --maxw (1100px у .shell). Выше этого порога колонка замирает, шрифт продолжает расти до 80px, и overflow: hidden на .hero .left срезает хвост строки. Потолок = сколько дал бы 5.6vw при вьюпорте, равном --maxw: 1100 × 0.056 = 61.6px. Коэффициент тот же, что в 5.6vw, — связь видна прямо в коде, и при смене --maxw потолок поедет следом. Ширина под текст при окне >= 1100px: контент .shell 1020px -> левая колонка 1.3fr из 1.3fr 1fr = ~576px -> минус padding 44px×2 = 486px. Замерено (scrollWidth - clientWidth, шрифт Bitter загружен): окно 1100px: кегль 61.6px, вынос 13px <- потолок ещё не задействован окно 1280px: было 71.68px / 95px -> стало 61.6px / 13px окно 1920px: было 80px / 162px -> стало 61.6px / 13px Вынос 13px уходит в правый padding 44px и до рамки-орнамента (::after, inset 14px, т.е. 30px от края текста) не достаёт. Слово «КОНДИТЕРСКИЕ» шире content-box на всех ширинах и до правки (30px на 420px, 24px на 1000px) — потолок этого не создаёт и не лечит. Правило безусловное: у .hero h1 font-size медиа-варианта нет — единственный @media на hero (prorecept.css:241) меняет только grid-template-columns и границы. На ширинах <= --maxw значение clamp по-прежнему даёт 5.6vw, потолок не достигается, и вёрстка совпадает с прежней пиксель в пиксель. */ .hero h1 { font-size: clamp(40px, 5.6vw, calc(var(--maxw) * 0.056)); } /* ─── HERO: пол кегля на телефонах (QA ISSUE-003) ────────────────────── Зеркальная проблема потолка: нижний предел clamp 40px шире колонки на узких экранах — «КОНДИТЕРСКИЕ» (~8.05px ширины на 1px кегля, Bitter 900) срезалось overflow:hidden уже на 430px и уродовало первый экран на 390. Бюджет ширины: вьюпорт − паддинги .shell (40) − паддинги .left (88), плюс невидимый запас ~30px (padding 44 минус рамка-орнамент inset 14). clamp(22px, 8.3vw, 40px): 480→39.8 (стык с базовым правилом), 390→32.4, 360→29.9, 320→26.6 — везде в бюджете. Замерено скриншотами 320/390. Каскад: правило ниже базового в ЭТОМ файле, специфичность равная — на <=480px побеждает оно; замороженный файл font-size в media не трогает. */ @media (max-width: 480px) { .hero h1 { font-size: clamp(22px, 8.3vw, 40px); } } /* ─── TIER: кнопка покупки в карточке (QA ISSUE-001) ─────────────────── LandingParser (buy: Текст | href [| style]) кладёт в карточку — лендинговую плашку. В замороженном файле у .btn нет width/ margin и медиа-вариантов, у .tier нет display — правила безусловно корректны. Карточка становится flex-колонкой, кнопка прижата к низу: в ряду разной высоты все кнопки стоят на одной линии. */ .tier { display: flex; flex-direction: column; } .tier .btn { display: block; text-align: center; margin-top: auto; font-size: 16px; padding: 10px 18px; } .tier ul { margin-bottom: 14px; } /* ─── TIERS: сетка тарифных карточек ─────────────────────────────────── Лестница «Орешков» выросла до четырёх ступеней, а .tiers в замороженном файле — repeat(3, 1fr): четвёртая карточка падала во второй ряд на треть ширины, «Экстра» как :last-child теряла рамку, а «Высший сорт» — последний в первом ряду — рисовал свою поверх внешней рамки секции. У grid-template-columns медиа-вариант ЕСТЬ (prorecept.css:263, одна колонка на <= 760px), поэтому безусловных правил на .tiers здесь быть не должно — перебили бы мобильную раскладку. Диапазон <= 760px намеренно оставлен замороженному файлу. */ /* Широкий экран: четыре карточки в один ряд. Границы пересобирать не нужно — ряд один, и базовое .tier:last-child отрабатывает верно. Кегли подрезаны под ~211px текста (255px колонка минус padding 22px×2). */ @media (min-width: 1001px) { .tiers { grid-template-columns: repeat(4, 1fr); } .tier .name { font-size: 19px; } .tier .price { font-size: 30px; } } /* Средние ширины: сетка 2×2. Здесь :last-child уже недостаточно — рамку справа теряет каждая вторая карточка, а первому ряду нужна нижняя граница. Кегли остаются исходными: карточки шире. */ @media (min-width: 761px) and (max-width: 1000px) { .tiers { grid-template-columns: repeat(2, 1fr); } .tier:nth-child(2n) { border-right: none; } .tier:nth-child(-n+2) { border-bottom: 1.5px solid var(--ink); } } /* ─── SECTION: содержательные секции лендинга ────────────────────────── landing/*.md верстают продающие блоки inline-HTML под существующие классы замороженного файла:
+ .sec-head (num/kicker/title), .course-toc для программы, .lock для бейджа тарифа. Внутри секции — только теги без классов:
карточки,
инфографика,
    шаги, и обёртка
    без класса для двух колонок «текст | картинка» — тот же приём, что у prorecept-nav.css с обёртками из _sidebar.html.twig. Новых классов нет. Проверка по правилу переопределения: у .section в замороженном файле только margin-bottom, у .course-toc — ни одного @media, у figure/dl/ol/h3 правил нет вовсе. Правила ниже безусловны, кроме собственных брейкпойнтов двух колонок и программы. */ .section[id], .tiers[id] { scroll-margin-top: 16px; } .section > p, .section > ul { max-width: 72ch; } .section > p { margin: 0 0 20px; } /* Заголовки третьего уровня (FAQ) — в display-гарнитуре. */ .section h3 { font-family: var(--display); font-weight: 900; font-size: 19px; line-height: 1.25; text-transform: uppercase; letter-spacing: -0.01em; margin: 28px 0 8px; } .section h3 + p { margin-top: 0; } /* Две колонки «текст | инфографика»: обёртка
    без класса. Всё, что не
    , встаёт в левую колонку друг под другом;
    — в правую, с первой строки и на все строки текста (span с запасом: пустые неявные строки нулевой высоты, row-gap поэтому 0 — отступы дают margin'ы). */ .section > div:not([class]) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 36px; align-items: start; margin: 0 0 28px; } .section > div:not([class]) > :not(figure) { grid-column: 1; } .section > div:not([class]) > figure { grid-column: 2; grid-row: 1 / span 20; } .section > div:not([class]) > p { margin: 0 0 16px; } .section > div:not([class]) > p:last-of-type { margin-bottom: 0; } .section > div:not([class]) > figure, .section > div:not([class]) > dl, .section > div:not([class]) > .course-toc { margin-bottom: 0; } .section > div:not([class]) dl { grid-template-columns: 1fr; } @media (max-width: 760px) { .section > div:not([class]) { grid-template-columns: 1fr; } .section > div:not([class]) > :not(figure) { grid-column: auto; } .section > div:not([class]) > figure { grid-column: auto; grid-row: auto; margin-top: 20px; } } /* Карточки:
    — сетка с «рамкой через зазор»: фон — чернила, gap 1.5px. */ .section dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5px; margin: 0 0 28px; padding: 1.5px; background: var(--ink); } .section dl > div { background: var(--cream); padding: 20px 22px 22px; min-width: 0; } .section dt { font-family: var(--display); font-weight: 900; font-size: 18px; line-height: 1.2; text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 10px; } .section dd { margin: 0; font-size: 15px; line-height: 1.5; } .section dd + dd { margin-top: 10px; } .section dd figure { margin: 14px 0 0; } .section dd figure img { max-height: 360px; object-fit: contain; } /* Шаги:
      прямым потомком секции — карточки с крупной цифрой. */ .section > ol { list-style: none; counter-reset: step; margin: 0 0 28px; padding: 1.5px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5px; background: var(--ink); } .section > ol > li { counter-increment: step; background: var(--cream); padding: 18px 20px 20px; font-size: 15px; line-height: 1.5; } .section > ol > li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; color: var(--bordeaux); letter-spacing: -0.03em; margin-bottom: 10px; } /* Инфографика:
      с подписью в моно-кикере. */ .section figure { margin: 0 0 28px; } .section figure img { display: block; width: 100%; height: auto; border: 1.5px solid var(--ink); background: var(--cream); } .section figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); padding: 8px 0 0; } /* Программа курса: .course-toc с текстом вместо ссылок и бейджем тарифа. */ .section .course-toc { margin: 0 0 20px; } .section .course-toc li .name { font-size: 15px; line-height: 1.45; } .section .course-toc li .name b { font-family: var(--display); font-weight: 800; font-size: 16px; } .section .course-toc li .lock { align-self: start; margin-top: 4px; white-space: nowrap; } @media (max-width: 560px) { .section .course-toc li { grid-template-columns: 36px 1fr; } .section .course-toc li .lock { grid-column: 2; justify-self: start; margin-top: 8px; } } /* CTA после текста секции и примечание под тарифами. */ .section > .btn { margin: 4px 0 8px; } .section > .tiers { margin-bottom: 14px; } .section > .tiers + p { font-size: 14px; color: var(--ink-soft); max-width: none; } /* ─── STICKY CTA: кнопка «Купить курс», прибитая к низу экрана ───────── Разметка в landing/kurs-oreshki.md: прямым потомком
      , в потоке ПЕРЕД секцией тарифов. position: sticky; bottom: 0 — пока естественное место обёртки ниже вьюпорта, она висит у нижнего края; когда пользователь доскроллил до тарифов, обёртка встаёт на своё место над заголовком «Тарифы» и уезжает вверх вместе с контентом. Поэтому она никогда не перекрывает ни кнопки «Купить» в карточках, ни подвал — без JS и без padding-bottom у body. Сдерживающий блок sticky —
      (весь контент), у его предков overflow не задан. Селектор без нового класса: обёртка-div без класса + якорь на #tariffs (контракт якоря тарифов). Обёртка прозрачна и не ловит клики — кликается только кнопка. У .btn в замороженном файле нет box-shadow/width и медиа- вариантов — правила безусловны, кроме собственного мобильного. */ main > div:not([class]):has(> a.btn[href="#tariffs"]) { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: center; padding: 12px 0 16px; margin: 0 0 24px; pointer-events: none; } main > div:not([class]) > a.btn[href="#tariffs"] { pointer-events: auto; box-shadow: 0 6px 18px rgba(26, 22, 18, 0.28); } @media (max-width: 760px) { main > div:not([class]) > a.btn[href="#tariffs"] { width: 100%; text-align: center; } }