— этот договор плюс своё; 3. НЕ объявлять :root. Свой блок токенов затеняет candidate.css — на /test4 так умерли все адаптивные значения, и это уже третий файл, который мог бы повторить ошибку. ─── ЛЕСТНИЦА ────────────────────────────────────────────────────────────── Только 1180 / 900 / 640 / 480 — та же, что у candidate.css. Своих брейкпойнтов страница функции не заводит: из-за них заголовок одного уровня оказывался разного кегля на соседних страницах. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Кнопки ──────────────────────────────────────────────────────────────── */ .p-feat .btn{ height:50px; line-height:1; padding:0 19px; border-radius:var(--c-r-control); border:1px solid #d9d2ca; background:var(--c-bg); color:var(--c-ink); display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:16px; font-weight:600; cursor:pointer; transition:.18s ease; white-space:nowrap; } .p-feat .btn:hover{ transform:translateY(-1px) } .p-feat .btn-orange{ background:var(--c-accent); border-color:var(--c-accent); color:#fff } .p-feat .btn-outline{ background:var(--c-bg) } /* ── 1. FunctionHero ───────────────────────────────────────────────────── Крошки → метка → H1 → подзаголовок → кнопки → три опорные точки, справа — слот под нарисованный интерфейс. */ .p-feat .fh{ padding:56px 0 34px; background:var(--c-bg) } .p-feat .fh-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:48px; align-items:start; } .p-feat .fh-grid > *{ min-width:0 } .p-feat .fh-copy{ display:flex; flex-direction:column; align-items:flex-start } .p-feat .fh-copy h1{ font-size:var(--c-fs-h1); line-height:var(--c-lh-h1); letter-spacing:var(--c-ls-h1); font-weight:var(--c-fw-head); margin:14px 0 18px; max-width:560px; text-wrap:balance; } /* h1 в этой колонке — var(--c-fs-h2), не var(--c-fs-h1): выше 1180px .fh-copy держит только .85fr сетки (464.5px на 1181 — самая узкая точка диапазона, растёт до 515 к 1440), и полноразмерный h1 (67px) кладёт «производственного» шире колонки САМОЙ ПО СЕБЕ, до переноса строк — 588px реального рендера (Range.getClientRects) против 464.5–515px колонки. На 51px то же слово — 447.8px, с запасом 16.7px даже на 1181. Шкала не нарушена: 51px — это h2, а не отдельная ступень. Ниже 1180 сетка становится однослойной на всю ширину, и токен сам уходит на свои 58/46/38px. Проверено Range.getClientRects на 1181/1200/1240/1280/1440 на всех пяти страницах шаблона, не только на концах диапазона. Ниже 1180 риска нет: сетка становится однослойной на всю ширину контейнера, а токен --c-fs-h1 уже даёт свои 58/46/38px по брейкпойнтам candidate.css. */ @media (min-width:1181px){ .p-feat .fh-copy h1{ font-size:var(--c-fs-h2) } } .p-feat .fh-copy > p{ margin:0; max-width:590px; font-size:18px; line-height:1.62; color:var(--c-muted); } .p-feat .fh-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px } .p-feat .fh-points{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:24px; max-width:610px; width:100%; } .p-feat .fh-points > div{ padding:13px 14px 14px; border:1px solid var(--c-line); border-radius:var(--c-r-tile); background:var(--c-bg); min-width:0; } .p-feat .fh-points strong{ display:block; font-size:15px; line-height:1.25 } .p-feat .fh-points span{ display:block; margin-top:4px; font-size:13px; color:var(--c-muted) } .p-feat .fh-media{ position:relative; min-width:0 } /* Крошки. Три уровня с публикацией /vozmozhnosti — см. комментарий в разметке страницы. */ .p-feat .crumbs{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 18px; font-size:13px; line-height:1.35; color:var(--c-muted-2); } .p-feat .crumbs a{ color:var(--c-muted); transition:.18s ease } .p-feat .crumbs a:hover{ color:var(--c-accent) } .p-feat .crumbs span:last-child{ color:var(--c-ink); font-weight:500 } /* Свечение под иллюстрацией. Декоративное: абсолютное, обрезается рамкой — проверка недостижимого содержимого обязана его пропускать. */ .p-feat .glow{ position:absolute; border-radius:50%; filter:blur(38px); opacity:.75; pointer-events:none } .p-feat .glow-a{ width:180px; height:180px; left:14px; bottom:30px; background:radial-gradient(circle,#ff8d68,transparent 68%) } .p-feat .glow-b{ width:210px; height:210px; right:8px; bottom:8px; background:radial-gradient(circle,#f4c0ff,transparent 68%) } /* ── 2. SectionHeader ──────────────────────────────────────────────────── Две колонки: слева метка и H2, справа поясняющий абзац. 1.4fr / 1fr — заголовок крупнее, ему и место. */ .p-feat .sec-head{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:var(--c-head-gap); align-items:start; margin-bottom:42px; } .p-feat .sec-head > *{ min-width:0 } .p-feat .sec-head h2{ font-size:var(--c-fs-h2); line-height:var(--c-lh-h2); letter-spacing:var(--c-ls-h2); font-weight:var(--c-fw-head); margin:0; max-width:780px; } .p-feat .sec-head > p{ font-size:18px; line-height:1.6; color:var(--c-muted); margin:0; padding-top:34px; max-width:570px; } .p-feat .sec-head--tight{ margin-bottom:34px } /* ── 3. FeatureBenefits ────────────────────────────────────────────────── Три-четыре результата до первого интерфейса: что человек получает, а не что умеет система. */ .p-feat .benefits{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px } .p-feat .benefit{ padding:26px; border:1px solid var(--c-line); border-radius:var(--c-r-card); background:var(--c-bg); min-width:0; } .p-feat .benefit h3{ font-size:var(--c-fs-card); line-height:var(--c-lh-card); letter-spacing:var(--c-ls-card); font-weight:var(--c-fw-head); margin:0 0 10px; } .p-feat .benefit p{ margin:0; font-size:16px; line-height:1.6; color:var(--c-muted) } /* ── 4. InteractiveFeatureDemo ─────────────────────────────────────────── ВСЕ состояния лежат в разметке, скрипт только переключает видимость. Страница обязана читаться поисковиком: содержимого, которое рисует скрипт, для него не существует. */ .p-feat .demo{ border:1px solid var(--c-line); border-radius:var(--c-r-frame); overflow:hidden; background:var(--c-soft); box-shadow:0 12px 42px rgba(38,25,13,.04); } .p-feat .demo-tabs{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); background:var(--c-bg); border-bottom:1px solid var(--c-line); } .p-feat .demo-tab{ /* Смена тега div → button приносит ВСЕ умолчания кнопки: своя ширина, text-align:center, buttonface, outset-рамка. Гасятся здесь разом. */ appearance:none; -webkit-appearance:none; min-width:0; padding:20px 22px; text-align:left; cursor:pointer; border:0; border-right:1px solid var(--c-line); background:var(--c-bg); color:inherit; font:inherit; position:relative; } .p-feat .demo-tab:last-child{ border-right:0 } .p-feat .demo-tab small{ display:block; color:var(--c-accent); font-size:12px; font-weight:600; letter-spacing:.12em; } .p-feat .demo-tab b{ display:block; margin-top:8px; font-size:20px; line-height:1.16; color:#7f7972 } .p-feat .demo-tab.active b{ color:var(--c-ink) } .p-feat .demo-tab.active:after{ content:""; height:3px; background:var(--c-accent); position:absolute; left:0; right:0; bottom:0; } .p-feat .demo-body{ display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:22px; padding:28px; } .p-feat .demo-body > *{ min-width:0 } .p-feat .demo-copy{ background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--c-r-card); padding:30px; display:flex; flex-direction:column; } .p-feat .demo-copy .demo-step{ color:var(--c-accent); font-size:12px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; } .p-feat .demo-copy h3{ font-size:var(--c-fs-h3); line-height:var(--c-lh-h3); letter-spacing:var(--c-ls-h3); font-weight:var(--c-fw-head); margin:18px 0 14px; } .p-feat .demo-copy > p{ margin:0; font-size:16px; line-height:1.58; color:var(--c-muted) } .p-feat .demo-copy ul{ margin:24px 0 0; padding:0; list-style:none; display:grid; gap:14px } .p-feat .demo-copy li{ position:relative; padding-left:22px; font-size:15px; line-height:1.5 } .p-feat .demo-copy li:before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--c-accent); position:absolute; left:0; top:7px; } .p-feat .demo-copy .demo-link{ margin-top:auto; padding-top:20px; color:var(--c-accent); font-weight:600 } .p-feat .demo-view{ min-width:0 } .p-feat .demo-copy[hidden], .p-feat .demo-view[hidden]{ display:none } /* ── 5. ProductUIFrame ─────────────────────────────────────────────────── Рамка вокруг нарисованного интерфейса. Внутренности рисует product-ui.css. Рамка владеет ВИДОМ; где она лежит — решает страница. Никаких min-width и position здесь: ровно на этом /test3 потерял 321px таблицы. */ .p-feat .ui-frame{ position:relative; background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--c-r-panel); overflow:hidden; box-shadow:0 18px 50px rgba(54,37,20,.07); } .p-feat .ui-frame-bar{ height:44px; padding:0 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--c-line); font-size:13px; color:var(--c-muted-2); } .p-feat .ui-frame-bar > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .p-feat .dots{ display:flex; gap:7px; flex:none } .p-feat .dots i{ width:8px; height:8px; border-radius:50%; background:#cbc5bd } /* ── 6. RelatedFeatures ────────────────────────────────────────────────── Четыре соседние функции. Существует, чтобы страницы НЕ объясняли чужую тему: назвать связь и увести ссылкой. */ .p-feat .rel-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px } .p-feat .rel-card{ padding:26px; border:1px solid var(--c-line); border-radius:var(--c-r-card); background:var(--c-bg); display:flex; flex-direction:column; min-height:220px; min-width:0; } .p-feat .rel-card h3{ font-size:var(--c-fs-card); line-height:var(--c-lh-card); letter-spacing:var(--c-ls-card); font-weight:var(--c-fw-head); margin:0 0 10px; } .p-feat .rel-card p{ margin:0; font-size:15px; line-height:1.6; color:var(--c-muted) } .p-feat .rel-card a{ margin-top:auto; padding-top:18px; color:var(--c-accent); font-weight:600 } /* Обратная связь «функция → хаб». Обычная текстовая ссылка под сеткой related-страниц — не конкурирует с акцентными .cap-link/.rel-card a (те цветные и жирные), поэтому взгляд сначала находит соседние функции, а хаб — рядом, тише. */ .p-feat .hub-more{ margin-top:22px; text-align:center } .p-feat .hub-more a{ font-size:15px; color:var(--c-muted-2) } .p-feat .hub-more a:hover{ color:var(--c-accent) } /* ── 7. LaunchSteps ──────────────────────────────────────────────────────── */ .p-feat .launch{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px } .p-feat .launch-step{ padding:28px; border:1px solid var(--c-line); border-radius:var(--c-r-card); background:var(--c-bg); min-width:0; } .p-feat .launch-num{ font-size:12px; color:var(--c-accent); font-weight:700; letter-spacing:.12em } .p-feat .launch-step h3{ font-size:var(--c-fs-card); line-height:var(--c-lh-card); letter-spacing:var(--c-ls-card); font-weight:var(--c-fw-head); margin:12px 0 8px; } .p-feat .launch-step p{ margin:0; font-size:16px; line-height:1.6; color:var(--c-muted) } .p-feat .launch-cta{ margin-top:26px; display:flex; gap:10px; flex-wrap:wrap; align-items:center } /* ── 8. FAQWithContact ───────────────────────────────────────────────────── */ .p-feat .faq{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:64px; align-items:start } .p-feat .faq > *{ min-width:0 } /* Заголовок раздела FAQ живёт в обычном SectionHeader НАД этой сеткой, а не в боковой колонке. Причина замерена: «Учёт производственных заказов» при 51px просит 444.4px, а колонка была 360 — и это ровно «самая узкая колонка на самой широкой ширине»: на 1024 сетка складывается и всё помещается, а разъезжается она на 1440. Класть заголовок раздела в сайдбар — значит заводить для него отдельный кегль и ловить это на каждой из четырёх страниц: русские составные слова тут норма. Сайдбар держит плашку связи. */ .p-feat .faq-contact{ padding:22px; border:1px solid var(--c-line); border-radius:var(--c-r-card); background:var(--c-soft); } .p-feat .faq-contact h3{ font-size:var(--c-fs-h4); line-height:1.15; font-weight:var(--c-fw-head); margin:0 } .p-feat .faq-contact p{ font-size:15px; line-height:1.55; color:var(--c-muted); margin:8px 0 0 } .p-feat .faq-contact .fh-actions{ margin-top:16px } .p-feat .faq-list details{ border-bottom:1px solid var(--c-line) } /* Голый текст внутри флекса — анонимный элемент, селектора у него нет. Поэтому значок выносится из потока, а не лечится min-width на summary. */ .p-feat .faq-list summary{ list-style:none; cursor:pointer; position:relative; padding:20px 30px 20px 0; font-size:18px; font-weight:600; line-height:1.35; } .p-feat .faq-list summary::-webkit-details-marker{ display:none } .p-feat .faq-list summary:after{ content:"+"; position:absolute; right:0; top:18px; font-size:22px; font-weight:400; color:#978f86; } .p-feat .faq-list details[open] summary:after{ content:"−" } .p-feat .faq-list details p{ font-size:15px; line-height:1.65; color:var(--c-muted); margin:0; padding:0 0 20px; max-width:880px; } /* ── 9. FinalCTA ─────────────────────────────────────────────────────────── */ .p-feat .final-cta{ text-align:center } .p-feat .final-cta h2{ font-size:var(--c-fs-h2); line-height:var(--c-lh-h2); letter-spacing:var(--c-ls-h2); font-weight:var(--c-fw-head); max-width:920px; margin:0 auto; } .p-feat .final-cta p{ font-size:18px; line-height:1.58; color:var(--c-muted); max-width:760px; margin:18px auto 0; } .p-feat .final-cta .fh-actions{ margin-top:28px; justify-content:center } .p-feat p, .p-feat li{ text-wrap:pretty } /* ═══ ЛЕСТНИЦА 1180 / 900 / 640 / 480 ═════════════════════════════════════ */ @media (max-width:1180px){ .p-feat .fh-grid, .p-feat .sec-head, .p-feat .faq{ grid-template-columns:1fr; gap:28px } .p-feat .sec-head > p{ padding-top:0; max-width:none } .p-feat .fh-copy h1{ max-width:740px } .p-feat .rel-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } .p-feat .demo-body{ grid-template-columns:1fr } } @media (max-width:900px){ .p-feat .fh-copy h1{ max-width:none } .p-feat .benefits, .p-feat .launch{ grid-template-columns:1fr } .p-feat .fh-points{ grid-template-columns:1fr } .p-feat .demo-tabs{ display:flex; overflow-x:auto; scrollbar-width:none } .p-feat .demo-tabs::-webkit-scrollbar{ display:none } .p-feat .demo-tab{ flex:0 0 205px } .p-feat .sec-head, .p-feat .faq{ gap:26px } } @media (max-width:640px){ .p-feat .fh{ padding-top:28px } .p-feat .fh-copy > p, .p-feat .sec-head > p{ font-size:16px } .p-feat .rel-grid{ grid-template-columns:1fr } .p-feat .demo-body{ padding:14px } .p-feat .demo-copy{ padding:18px } .p-feat .fh-actions, .p-feat .fh-points{ align-self:stretch; width:100% } .p-feat .faq-list summary{ font-size:17px } /* Цель нажатия: строчные ссылки на телефоне должны быть не меньше 44px. */ .p-feat .crumbs a, .p-feat .rel-card a, .p-feat .demo-copy .demo-link{ display:inline-flex; align-items:center; min-height:44px; } } /* ── Нижние 140px первого экрана мобильного (полоса cookie) ─────────────── .fh-points — три карточки в один столбец (правило выше, ≤900px) — отодвигал низ героя ниже 704px на 390×844 (было 878px) и ниже 672px на 375×812: полоса, поднимаясь снизу, реально закрывала блок, а не слегка подрезала. Резервирование места через --cc-h (landing.js/landing.css) эту зону не трогает — оно про последний экран прокрутки, а не про первый. Правка — в высоте самого героя, а не в компенсации полосы: три карточки встают в ряд (как на ≥901px), кегль и отступы уменьшены. На четырёх из пяти страниц шаблона низ .fh-points после этого — 640.8px что на 390, что на 375 (одинаковый перенос строк на обеих ширинах) — запас 63px до 704 и 31px до 672. У /kontrol-proizvodstva (test3.css) была пятая страница и своя, бо́льшая нехватка — см. правку там же, отдельно от этой. Все числа — getBoundingClientRect().bottom в трёх состояниях согласия (до/после «Принять»/после «Отозвать»): позиция не меняется ни в одном, так как --cc-h резервирует место в конце документа, а не перед .fh. */ @media (max-width:480px){ /* Третий уровень («Возможности») удлиняет крошки, и на странице с длинным именем функции («Планирование производства») это ломало их в ТРИ строки — не два: у .crumbs a стоит min-height:44px под цель нажатия (правило на ≤900px выше), и каждая перенесённая строка стоит не ~18px, а все 44px. Итог был 667.6px против 642px до третьего уровня — ещё не превышение порога (672 на 375), но запас упал до 4.4px. Строка вместо переноса едет вбок: высота одна и та же независимо от длины пути. */ .p-feat .crumbs{ margin-bottom:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; min-width:0; max-width:100%; } .p-feat .crumbs::-webkit-scrollbar{ display:none } .p-feat .crumbs > *{ flex:0 0 auto; white-space:nowrap } .p-feat .fh-copy h1{ margin:6px 0 8px } .p-feat .fh-actions{ margin-top:10px } .p-feat .fh-points{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin-top:8px; } .p-feat .fh-points > div{ padding:7px 6px } .p-feat .fh-points strong{ font-size:11px; line-height:1.15 } .p-feat .fh-points span{ font-size:9.5px; margin-top:2px; line-height:1.2 } } /* ── Фон разделов и плашки статуса ─────────────────────────────────────── Плашка статуса рисуется одним способом: бледная заливка + ТОТ ЖЕ цвет текстом, затемнённый до 4.5:1. Сам акцент на своей же заливке даёт 3.22 — в приложении ровно для этого заведён --accent-text, а здесь --c-*-ink. Не «яркая заливка + тёмный текст»: так продукт не рисует нигде. */ /* ЧЕРЕДОВАНИЕ ФОНОВ — ПРАВИЛО, А НЕ ВКУС АВТОРА. Подложку несут НЕЧЁТНЫЕ содержательные разделы: первый после героя, третий, пятый. FinalCTA в счёт не идёт и всегда без подложки. Записано, потому что четыре страницы, каждая со своим чередованием, дают четыре разных ритма при одинаковых компонентах — а это ровно то, из-за чего страницы читались как четыре сайта. */ .p-feat .section.soft{ background:var(--c-soft) } .p-feat .ui-pill{ background:var(--c-soft-2); color:#5b5550 } /* 6.53:1 */ .p-feat .ui-pill.orange{ background:var(--c-accent-soft); color:var(--c-accent-ink) } .p-feat .ui-pill.green{ background:var(--c-green-soft); color:var(--c-green-ink) } .p-feat .ui-pill.red{ background:var(--c-red-soft); color:var(--c-red-ink) } /* .yellow и .blue были заявлены в разметке (главная, /kontrol-proizvodstva — 8 мест) без правила здесь: плашки рисовались серым базовым .ui-pill, и «требует внимания» читалось как «неважно». Значения — не по имени токена, а замером фактической заливки под .p-ind, где та же пара уже используется: жёлтая 4.97:1, синяя 5.71:1. --c-yellow-ink НЕ используется намеренно: та же формула «токен на своей заливке» однажды уже дала 3.97:1 — ниже порога 4.5, хотя имя обещало обратное. --c-blue-ink токена вообще нет в candidate.css. */ .p-feat .ui-pill.yellow{ background:var(--c-yellow-soft); color:#8c5f0e } /* 4.97:1 */ .p-feat .ui-pill.blue{ background:var(--c-blue-soft); color:#2f56c4 } /* 5.71:1 */ .p-feat .top-chip.is-on{ background:var(--c-ink); color:var(--c-bg) }