/* ПроЦифры (prodigits.ru) - токены из static/style.css продукта, дизайн-спека design-spec.md */ /* шрифты переехали в в (build.py) - @import грузился ПОСЛЕ парсинга этого файла, самым последним в цепочке, и поздний swap давал CLS 0.2+ на заголовках (wave1-frontend row 5) */ :root{ /* 17.09.2026: весь сайт (не только главная) переведён на графит+мяту главной - решение Никиты 07.09.2026 "давай все варианты только в нём" распространено на внутренние страницы (заход 3). Один набор токенов вместо светлого+тёмного - синий --accent больше нигде не остаётся. */ --bg:#1E1E1E; --card:#2A2A2A; --line:#3A3A3A; --text:#fff; --text-2:#DADADA; --muted:#B5B5B5; --accent:#71FED3; --accent-ink:#71FED3; --accent-ink-2:#5CE3BC; --accent-soft:#232B29; --field:#232322; --up:#6EE7A8; --down:#FF8A8A; --radius:16px; --radius-sm:10px; --shadow:0 1px 2px rgba(0,0,0,.24), 0 8px 24px rgba(0,0,0,.32); --modal-dim:rgba(10,12,20,.65); --dark-bg:#12162a; --dark-card:#1b2140; --dark-text:#e7eaf6; --dark-muted:#8b93b3; --blog-muted:#9A9A9A; --pad-card:24px; --rhythm:96px; /* 24.09.2026 (item 3) - реальная высота шапки: main.js syncHeaderHeightVar() перезаписывает сразу на load/resize, это значение - только запасной вариант до первого замера. */ --header-h:73px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--text); line-height:1.5; font-family:-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; } img,video{max-width:100%; height:auto; display:block} a{color:inherit; text-decoration:none} button{font:inherit; cursor:pointer} input,select{font:inherit} h1,h2,h3,p,ul,figure{margin:0} ul{padding:0; list-style:none} .wrap{max-width:1360px; margin:0 auto; padding:0 32px} @media (max-width:767px){ .wrap{ padding:0 16px } } .section{ padding:64px 0 } .section.section-alt{ background:var(--card) } @media (min-width:768px){ .section{ padding:80px 0 } } @media (min-width:1024px){ .section{ padding:var(--rhythm) 0 } } .card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; } @media (min-width:768px){ .card{ padding:20px } } @media (min-width:1024px){ .card{ padding:24px } } h1{ font-size:clamp(32px,5.4vw,52px); line-height:1.08; font-weight:800; letter-spacing:-.01em; overflow-wrap:break-word } h2{ font-size:clamp(24px,3.2vw,34px); line-height:1.15; font-weight:800 } .sec-h2{ font-size:28px; line-height:1.15; font-weight:800; letter-spacing:-.01em } @media (min-width:1024px){ .sec-h2{ font-size:34px } } @media (min-width:1440px){ .sec-h2{ font-size:44px } } h3{ font-size:18px; font-weight:700 } .lead{ font-size:18px; line-height:1.5; color:var(--text-2) } .muted{ color:var(--muted) } .eyebrow{ font-size:13px; font-weight:700; color:var(--accent-ink); text-transform:uppercase; letter-spacing:.04em } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--radius-sm); font-weight:700; font-size:15px; border:0; height:35px; padding:0 20px; transition:background-color 150ms,border-color 150ms,color 150ms; } @media (min-width:1440px){ .btn{ height:40px } } .btn.primary{ background:var(--accent-ink); color:#fff } .btn.primary:hover{ background:var(--accent-ink-2) } .btn.primary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px } .btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--line) } .btn.ghost:hover{ border-color:var(--accent); color:var(--accent) } .btn.ghost:focus-visible{ outline:2px solid var(--accent); outline-offset:2px } .btn.block{ width:100%; height:48px } .btn[disabled]{ opacity:.7; cursor:default } .spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:spin 800ms linear infinite; display:none; } .btn.is-loading .spinner{ display:inline-block } .btn.is-loading .btn-text::after{ content:"…" } @keyframes spin{ to{ transform:rotate(360deg) } } /* ================= header ================= */ .site-header{ position:sticky; top:0; z-index:40; height:56px; display:flex; align-items:center; background:transparent; transition:background-color 200ms,backdrop-filter 200ms; } @media (min-width:1024px){ .site-header{ height:64px } } .site-header.is-scrolled{ background:var(--bg); backdrop-filter:blur(12px) } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; width:100% } .brand{ display:flex; align-items:center; flex-shrink:0 } .brand img{ height:40px; width:auto } @media (min-width:1024px){ .brand img{ height:44px } } .site-nav{ display:none; gap:28px; } @media (min-width:1024px){ .site-nav{ display:flex } } .site-nav a{ font-size:15px; color:var(--text-2); transition:color 150ms } .site-nav a:hover{ color:var(--accent) } .site-nav a.is-active{ color:var(--accent); text-decoration:underline; text-underline-offset:4px } .header-center{ display:flex; align-items:center; gap:28px; min-width:0; overflow:hidden } .breadcrumb{ font-size:15px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 } .breadcrumb a{ color:var(--text-2) } .breadcrumb a:hover{ color:var(--accent) } /* внутренние страницы: крошки на мобильном/планшете, на десктопе (1024+) их место занимает полное меню - оба сразу в 6-пунктовый .site-nav не влезают без обрезки (page-lint "обрезано" на 1024, замер 6-22px на слове "Главная") (analyst-47, id 92) */ .header-center .site-nav{ flex-shrink:0 } @media (min-width:1024px){ .header-center .breadcrumb{ display:none } } /* На 1024 сам .site-nav (6 пунктов, 599px) шире отданного .header-center пространства (463px) - контейнер его обрезает ("Вопросы" на 75px). Скрываем ссылку на Telegram в шапке светлых внутренних страниц до 1280 - это единственный элемент шапки, который можно спрятать без потери функции (кнопка "Демо" остаётся) (wave1-frontend row 2) */ @media (min-width:1024px) and (max-width:1279px){ .site-header:not(.dark) .header-tg{ display:none } } .header-cta{ display:flex; align-items:center; gap:16px; flex-shrink:0 } /* тот же оверфлоу, что чинили на .site-header.dark (wave1-frontend row 1) - на светлой шапке внутренних страниц бургер (3 span) выходит за 320 на те же 26px */ @media (max-width:374px){ .header-cta{ gap:6px } .header-cta .btn{ padding:0 10px; font-size:13px } } .header-cta .btn{ padding:0 16px } @media (min-width:1024px){ .header-cta .btn{ padding:0 20px } } .header-tg{ display:none } @media (min-width:1024px){ .header-tg{ display:inline } } /* ---- мобильное меню (row 18) ---- */ .nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:4px; width:36px; height:36px; padding:0; border:0; background:transparent; cursor:pointer; flex-shrink:0; } /* тач-таргет 44px (agents/frontend.md): иконка остаётся 36x36 визуально, зона тапа расширена невидимым псевдоэлементом, чтобы не увеличивать сам значок и высоту шапки */ .nav-toggle{ position:relative } .nav-toggle::before{ content:""; position:absolute; inset:-4px } @media (min-width:1024px){ .nav-toggle{ display:none } } .nav-toggle span{ display:block; width:20px; height:2px; background:var(--text); margin:0 auto; transition:transform 150ms,opacity 150ms } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg) } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) } .nav-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px } .mobile-nav{ display:none; position:fixed; left:0; right:0; top:56px; bottom:0; z-index:39; background:var(--bg); flex-direction:column; padding:8px 24px 24px; overflow-y:auto; } .mobile-nav.is-open{ display:flex } .mobile-nav a{ padding:16px 0; border-bottom:1px solid var(--line); font-size:17px; color:var(--text) } @media (min-width:1024px){ .mobile-nav{ display:none !important } } body.nav-locked{ overflow:hidden } /* ================= footer ================= */ .site-footer{ margin-top:64px; padding-top:64px; padding-bottom:32px; background:var(--card); border-top:1px solid var(--line); } @media (min-width:1024px){ .site-footer{ margin-top:96px } } .site-footer .wrap{ display:flex; flex-direction:column; gap:24px; align-items:center; text-align:center } @media (min-width:1024px){ .site-footer .wrap{ flex-direction:row; flex-wrap:wrap; justify-content:space-between; text-align:left } } .footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; font-size:14px } .footer-nav a{ color:var(--muted); display:inline-block; padding:4px 0; min-height:24px } .footer-nav a:hover{ color:var(--accent) } @media (min-width:1024px){ .footer-nav{ justify-content:flex-start } } .footer-made{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px } .footer-made img{ height:18px; width:auto } .footer-legal{ display:flex; gap:16px; align-items:center; color:var(--muted); font-size:14px; flex-wrap:wrap; justify-content:center } .footer-legal a:hover{ color:var(--accent) } /* ================= mobile sticky CTA ================= */ .mobile-cta{ position:fixed; left:0; right:0; bottom:var(--cookie-h,0px); z-index:30; height:56px; background:var(--card); box-shadow:0 -4px 12px rgba(29,36,54,.08); display:flex; align-items:center; padding:0 16px; transform:translateY(100%); transition:transform 200ms, bottom 200ms; } .mobile-cta.is-visible{ transform:translateY(0) } .mobile-cta .btn{ flex:1 1 0 } @media (min-width:1024px){ .mobile-cta{ display:none } } /* 20.09.2026 (audit-fix-0918 4e, п.3 - реальная причина, не симптом): пока показан cookie-bar, .mobile-cta и cookie-bar - два независимых fixed;bottom:0 элемента, деляющих один и тот же нижний край экрана. 4d резервировал под оба сразу (--cookie-h добавлен и в JS zoneH, и в padding-bottom сцены #day) - карточка на тесном мобильном экране (headH+textH уже съедают большую часть высоты) душилась до --chat-scale ~0.05, т.е. до нечитаемого пятна 11-26px (см. report-frontend-4e.md, скрин day-390x844-cookie-step01.png). 21.09.2026 (audit-fix-0918 4f, п.1 - qa-7 defect 1): правило 4e было глобальным на весь сайт, а конфликт есть только внутри закреплённой (position:sticky, во весь экран) сцены #day - там, где applyChatScale (main.js) считает доступную высоту карточки под фиксированный резерв под .mobile-cta и НЕ ожидает второй fixed-элемент того же нижнего края одновременно. Пока страница НЕ на сцене #day (до неё, после неё, на внутренних страницах без #day вообще), такого второго резерва нет и конфликта нет - .mobile-cta там просто встаёт НАД баннером через bottom:var(--cookie-h) (см. выше), как и было до 4e. .day-pinned - класс на , который main.js держит true только пока scrollY внутри трека сцены (day-scene IIFE, frame()) - единственное окно, где скрытие оправдано этой причиной. */ html.has-cookie-bar.day-pinned .mobile-cta{ display:none } /* ================= popup ================= */ .modal-scrim{ position:fixed; inset:0; background:var(--modal-dim); z-index:100; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 200ms; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } .modal-scrim.is-open{ opacity:1; pointer-events:auto; backdrop-filter:blur(4px) } .modal{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); width:440px; max-width:calc(100vw - 32px); padding:24px; position:relative; } @media (max-width:1023px){ .modal-scrim{ align-items:flex-end } .modal{ width:100%; max-width:100%; border-radius:16px 16px 0 0; max-height:90vh; overflow-y:auto; transform:translateY(100%); transition:transform 300ms cubic-bezier(0,0,0,1); } .modal-scrim.is-open .modal{ transform:translateY(0) } } .modal-close{ position:absolute; top:8px; right:8px; width:44px; height:44px; z-index:2; display:flex; align-items:center; justify-content:center; background:none; border:0; color:var(--muted); } .modal-close:hover{ color:var(--text) } .modal h2{ font-size:22px; padding-right:32px; margin-bottom:16px } .field{ margin-bottom:12px } .field label{ display:block; font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:6px } .field label .req{ color:var(--down) } .field label .opt{ font-weight:400; color:var(--muted) } .field input, .field select{ width:100%; height:48px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--field); padding:0 14px; color:var(--text); } .field input:focus, .field select:focus{ outline:2px solid var(--accent-ink); outline-offset:2px; border-color:var(--accent-ink); } .field.has-error input{ border-color:var(--down) } .field .error{ color:var(--down); font-size:13px; margin-top:4px; display:none } .field.has-error .error{ display:block } .field.hp{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden } .modal-hint{ font-size:13px; color:var(--muted); text-align:center; margin-top:12px } .modal-banner{ display:none; background:var(--accent-soft); color:var(--down); font-size:14px; padding:10px 12px; border-radius:var(--radius-sm); margin-bottom:12px; } .modal-banner.is-visible{ display:block } .modal-success{ display:none; text-align:center; padding:24px 0 } .modal-success.is-visible{ display:block } .modal-success p{ font-size:16px; margin-bottom:16px } .modal.is-success .lead-form{ display:none } /* ================= HOME v5: графит (выбор Никиты 08.09.2026, landing-visual/v2) ================= */ :root{ --mint:#71FED3; --graphite:#1E1E1E; --graphite-2:#2A2A2A; --graphite-3:#23272E; --mint-plate:#45C9A4; --home-card-line:rgba(255,255,255,.08); --home-muted:#B5B5B5; --home-muted-2:#8A8A8A; --font-head:"Unbounded",sans-serif; --font-text:"Montserrat",sans-serif; /* Сквозная шкала типографики (design-spec.md "Сквозное: типографика", пачка 4a) - основной текст и подписи на тёмном фоне. Литеральный --home-muted (rgb(181,181,181)) оставлен как есть для секций пачки 4b; в hero/#day/шапке ниже используются новые токены напрямую. */ --text-2:#D6D6D6; --text-3:#9AA0AC; } body.page-home{ background:var(--graphite); color:#fff } .page-home h1,.page-home h2,.page-home h3{ font-family:var(--font-head) } .page-home,.page-home input,.page-home select,.page-home button{ font-family:var(--font-text) } .page-home main{ display:block } .page-home .section,body.page-home #day,body.page-home #compare, body.page-home #pos,body.page-home #features,body.page-home #proof,body.page-home #pricing-short, body.page-home #faq,body.page-home #start{ background:var(--graphite) } /* ---- header (out/header/G3.html) ---- */ .site-header.dark{ background:var(--graphite); border-bottom:1px solid #3A3A3A; height:auto; position:sticky; top:0 } .site-header.dark.is-scrolled{ background:var(--graphite); backdrop-filter:none } .site-header.dark .wrap{ flex-direction:column; align-items:stretch; gap:0; padding-top:0; padding-bottom:0 } .site-header.dark .row-top{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px } @media (min-width:1024px){ .site-header.dark .row-top{ height:72px } } .site-header.dark .brand img{ height:36px; width:auto } @media (min-width:1024px){ .site-header.dark .brand img{ height:auto; width:100px } } .site-header.dark .header-cta{ display:flex; align-items:center; gap:16px } @media (min-width:1024px){ .site-header.dark .header-cta{ gap:24px } } .site-header.dark .header-tg{ display:none; color:var(--home-muted); font-size:13px; font-weight:500 } @media (min-width:1024px){ .site-header.dark .header-tg{ display:inline; font-size:14px } } .site-header.dark .header-tg:hover{ color:#fff } .site-header.dark .btn.primary{ background:var(--mint); color:var(--graphite); height:40px; padding:0 20px } /* На 320 брэнд+кнопка «Посмотреть демо»+бургер не влезали в 288px строки: 3 span бургера выходили за вьюпорт на 28px (wave1-frontend row 1, лог называл виновником span right:338) */ @media (max-width:374px){ .site-header.dark .row-top{ gap:6px } .site-header.dark .header-cta{ gap:6px } .site-header.dark .btn.primary{ padding:0 10px; font-size:13px } } @media (min-width:1024px){ .site-header.dark .btn.primary{ height:44px; padding:0 26px } } .site-header.dark .btn.primary:hover{ background:#8bffdc } .site-header.dark .row-nav{ display:none } @media (min-width:1024px){ .site-header.dark .row-nav{ display:flex; justify-content:center; gap:40px; height:57px; border-top:1px solid #313131; margin:0 } .site-header.dark .row-nav a{ font-size:13px; font-weight:500; letter-spacing:.04em; color:#B5B5B5 } .site-header.dark .row-nav a:hover{ color:#fff } .site-header.dark .row-nav a.is-active{ color:#fff } } .site-header.dark .nav-toggle span{ background:#fff } .mobile-nav.dark{ background:var(--graphite) } .mobile-nav.dark a{ color:#fff; border-bottom-color:#333 } /* Мобилка: одна persistent точка входа "демо/заявка" вместо трёх (design-spec.md "Шапка и мобильные дубли", audit.md п.11 - было 73+56px двух одинаковых кнопок одновременно) - кнопка демо в шапке скрывается, липкая .mobile-cta остаётся единственной persistent-точкой */ @media (max-width:1023px){ .site-header.dark .header-cta .btn.primary{ display:none } } /* Крошка "Главная / Раздел" - только на внутренних страницах, одна функция шапки на всех (17.09.2026) */ .site-header.dark .header-crumb{ margin-right:auto; font-size:13px; color:var(--home-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px } .site-header.dark .header-crumb a{ color:var(--home-muted) } @media (hover:hover){ .site-header.dark .header-crumb a:hover{ color:#fff } } .mobile-nav-crumb{ padding:14px 20px; font-size:13px; color:var(--home-muted); border-bottom:1px solid #333 } .mobile-nav-crumb a{ color:var(--home-muted) } @media (hover:hover){ .mobile-nav-crumb a:hover{ color:#fff } } /* ---- footer (out/footer/B.html), упрощён под текущую DOM-структуру ---- */ .site-footer.dark{ background:var(--graphite); border-top:1px solid #333; color:#fff } .site-footer.dark .footer-nav a{ color:#DADADA } .site-footer.dark .footer-nav a:hover{ color:var(--mint) } .site-footer.dark .footer-contacts,.site-footer.dark .footer-contacts a, .site-footer.dark .footer-legal,.site-footer.dark .footer-legal a, .site-footer.dark .footer-legal-entity,.site-footer.dark .footer-made{ color:var(--home-muted) } .site-footer.dark .footer-contacts a:hover,.site-footer.dark .footer-legal a:hover, .site-footer.dark .footer-made:hover{ color:var(--mint) } /* ---- popup главной: пошаговая форма (out/popup/G2.html) ---- */ .modal--onboard{ background:var(--graphite-2); border:1px solid rgba(255,255,255,.08); padding:0; width:820px; max-width:calc(100vw - 32px); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); overflow:hidden } @media (max-width:1023px){ .modal--onboard{ display:flex; flex-direction:column; border-radius:16px 16px 0 0 } } .modal--onboard .plate{ background:var(--mint); padding:36px 32px; display:flex; align-items:flex-start; gap:16px } /* flex-item без min-width:0 не сжимается ниже содержимого в одну строку - на 320 заголовок и подзаголовок вылезали за плашку вместо переноса (wave1-frontend rows 1,3) */ .modal--onboard .plate > div{ min-width:0 } .modal--onboard .plate-logo{ height:44px; width:auto; flex:none; align-self:flex-start } @media (max-width:359px){ .modal--onboard .plate{ padding:28px 20px; gap:12px } } .modal--onboard .plate h2{ font-size:24px; color:var(--graphite); margin:0 0 8px } .modal--onboard .plate .sub{ font-size:14px; line-height:1.5; color:rgba(30,30,30,.72); max-width:260px; background:var(--mint-plate); display:inline-block; padding:6px 10px; border-radius:8px } .modal--onboard .formside{ padding:24px 18px } @media (min-width:640px){ .modal--onboard .formside{ padding:32px 36px } } .modal--onboard .modal-close{ color:#EDEDED; background:rgba(0,0,0,.18) } .modal--onboard .field label{ color:#D7D7D7 } .modal--onboard .field input,.modal--onboard .field select{ background:#232322; border-color:rgba(255,255,255,.14); color:#fff } .modal--onboard .field-check{ color:var(--home-muted) } .modal--onboard .field label .req{ color:#FF8A8A } .modal--onboard .field label .opt{ color:#B5B5B5 } .modal--onboard .modal-hint{ color:#C4C4C4 } .modal--onboard .field-check a{ color:#fff } /* (audit-fix-0918 4d) ~13 строк мёртвого CSS для убранного пошагового онбординга (.onboard-progress/.onboard-label/.onboard-step/.onboard-nav) удалены - разметка вышла из build.py ещё в предыдущем цикле, ponytail-review нашёл 0 совпадений (report-qa-6). */ /* ---- #top (out/top/P1.html) ---- */ #top{ position:relative; overflow:hidden; padding-top:56px; padding-bottom:56px } @media (min-width:1024px){ #top{ padding-top:72px; padding-bottom:80px } } .hero-head{ max-width:760px; margin:0 auto; text-align:center } /* 18.09.2026: H1/подзаголовок на 1440 упирались в 3 строки при лимите спека в 2 (Unbounded - широкая дисплейная гарнитура, 760px тесно для 44px текста) - расширяем колонку заголовка на широких экранах, кегль не трогаем (design-spec.md "кегль не уменьшай"). */ @media (min-width:1024px){ .hero-head{ max-width:920px } } .ref-bridge{ font-size:13px; font-weight:700; color:var(--graphite); background:var(--mint); display:inline-block; padding:6px 14px; border-radius:999px; margin:0 0 14px } .ref-bridge[hidden]{ display:none } /* Финальный проход (make-interfaces-feel-better, design-spec.md) - нажатие ощутимо на кнопках сайта; transition-property конкретный, не `all` (coding-style.md) */ .btn{ transition-property:transform,background-color,box-shadow; transition-duration:150ms; transition-timing-function:ease-out } /* мобильный тач-таргет (agents/frontend.md, 44px WCAG): база .btn 35px высотой ниже порога - поднимаем только до 1024, где ещё нет наведения мышью; более специфичные .hero-ctas/.pos-head/.pricing-cta .btn (48-56px) это правило не трогает */ @media (max-width:1023px){ .btn{ height:44px } } .btn:active{ transform:scale(.96) } .hero-badges{ display:flex; gap:10px; justify-content:center; margin:0 0 20px; flex-wrap:wrap } .hero-badges span{ font-size:13px; font-weight:600; background:var(--graphite-2); border:1px solid rgba(113,254,211,.28); color:var(--mint); padding:6px 13px; border-radius:100px } /* Кегли H1/подзаголовка - design-spec.md "Сквозное: типографика": 44px/1440, 30px/390; 768 - промежуточная ступень (спек даёт только крайние точки шкалы) */ .hero h1{ font-size:30px; line-height:1.15; font-weight:700; color:#fff; margin-bottom:18px; text-wrap:balance } @media (min-width:768px){ .hero h1{ font-size:38px } } @media (min-width:1440px){ .hero h1{ font-size:44px } } /* узкие телефоны (Никита 24.09.2026, дословно: "У тебя никогда не должно быть 4 строки заголовка. НИКОГДА") - на 360-414 текст этого H1 при 30px ложится в 4-5 строк; 30px оставлен для 415-767 и десктопа (там уже <=3 строки без правок, замерено). text-wrap:balance тоже снят только тут - на этой ширине он добавляет ещё одну строку сверх минимума переносов. */ @media (max-width:479px){ .hero h1{ font-size:22px; text-wrap:wrap } } /* верифицировано verify-site.sh (page-lint default включает 320): на 320-355px даже 22px даёт 4 строки - у этого текста перенос слов не масштабируется линейно с шириной колонки, замерено Playwright-свипом по 1px. 359px и шире уже хватает 22px (см. правило выше). */ @media (max-width:359px){ .hero h1{ font-size:19px } } .hero h1 .accent{ color:var(--mint) } .hero-sub{ font-size:15px; color:var(--text-2); margin-bottom:28px } @media (min-width:1440px){ .hero-sub{ font-size:16px } } .hero-cond{ display:none } .hero-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:40px } @media (max-width:767px){ .hero-ctas{ flex-direction:column } .hero-ctas .btn{ width:100%; height:48px } } .hero-ctas .btn.primary{ background:var(--mint); color:var(--graphite) } .hero-ctas .btn.primary:hover{ background:#8bffdc } .hero-ctas .btn.ghost{ background:transparent; color:#fff; border:1px solid #444 } .hero-shot{ display:flex; justify-content:center; flex-wrap:wrap; gap:16px; position:relative } /* 25.09.2026 (Никита: "слева тексты и кнопки, справа наш функционал") - на 1024+ hero становится двумя колонками: текст слева, дашборд справа занимает остаток (шире левой колонки на любой ширине >=1024, замерено clientWidth). Ниже 1024 - как было, столбиком (.hero-head/.hero-shot держат базовые центрированные правила выше). Контейнер общий .wrap 1360 на всех страницах (27.09.2026, доска #99) - до этой правки hero был расширен отдельно (#top .wrap 1360 против общего .wrap 1184), теперь то отдельное правило снято, числа ниже не меняются. Возврат 1 (25.09.2026, брифом): первый проход снижал H1 до 30px, чтобы влезть в левую колонку 460px - Никита вернул требование "не мельче 44/40/36px на 1440-1024, не крупнее 3 строк", но реализация того возврата держала кегль мягкими переносами (``) внутри слов разметки - на кадре это читалось как разрыв слова переносом ("отве-чает"), и Никита запретил переносы заголовков вообще (круг 25.09.2026 #2). Круг #2: `` убраны из `build.py`, H1 снижен на одну ступень (32/36/40px вместо 36/40/44), левая колонка пересчитана под целые слова без подсказок переноса - свип `explore.py` в _task/hero-split-0925/ на живом h1 без ``: минимальная ширина колонки, при которой текст ложится в 3 строки на нужном кегле - 465/530/590px для 32/36/40px, взято с запасом 470/530/590. Три ступени, а не одно число - иначе на 1024 колонка была бы шире правой (contentW там всего 960px минус gap, правая колонка перестаёт быть шире левой). `hyphens:auto` пробовали ещё в круге #1 и отказались - Playwright WebKit (наш прокси Safari) его для русского языка молча игнорирует (замер: порог не двигается без/с `hyphens:auto`, дал ложные "3 строки" только в Chromium), а сейчас непригоден и по смыслу - `hyphens:auto` сам вставляет дефис-перенос. Правая колонка остаётся шире левой на всех трёх ступенях (замер clientWidth): 1024 - 480/488 (см. паддинг ниже), 1280 - 530/654, 1440-1920 - 590/674 (капнуто max-width .wrap 1360, общий для всех страниц с 27.09.2026, до этого - отдельный #top .wrap). gap сужен до 16px только на 1024-1279 (тот же приём даёт запас без него не хватало 6px) - на 1280+ вернулся к 32px, там места достаточно. */ @media (min-width:1024px){ .hero .wrap{ display:grid; grid-template-columns:minmax(380px,480px) minmax(0,1fr); align-items:center; gap:16px } .hero-head{ max-width:none; margin:0; text-align:left } .hero-badges{ justify-content:flex-start } .hero h1{ font-size:32px } .hero-ctas{ justify-content:flex-start; margin-bottom:0 } .hero-shot{ justify-content:flex-end; margin:0 } .device{ max-width:none } } /* 1024-1279 тесная полоса: contentW тут всего 960px (viewport 1024 минус паддинг .wrap 2x32), а левой колонке при кегле 32px и целых словах (без ) нужно >=475px в WebKit (Safari- прокси, порог на 10px выше, чем в Chromium из-за разной ширины глифов) - 470px из старого расчёта на тут не хватает, WebKit даёт 4 строки вместо 3. При паддинге 32px 480px левой колонки не оставляет права колонке запаса шире левой (960-480-16=464<480). Сузили паддинг #top .wrap только в этой узкой полосе (32px -> 20px с каждой стороны, +24px contentW) - этого хватает и на новый порог, и на "право шире лева" с запасом 8px (960+24=984, 480+16+488=984). */ @media (min-width:1024px) and (max-width:1279px){ #top .wrap{ padding:0 20px } } @media (min-width:1280px){ .hero .wrap{ grid-template-columns:minmax(380px,530px) minmax(0,1fr); gap:32px } .hero h1{ font-size:36px } } @media (min-width:1440px){ .hero .wrap{ grid-template-columns:minmax(380px,590px) minmax(0,1fr) } .hero h1{ font-size:40px } } /* Задержка появления мокапа - CSS keyframe на загрузке страницы, а не IntersectionObserver- скролл (design-spec.md #top п.19: было >1с через .reveal-fade+revealOnce(threshold:0.2), та ждёт видимости 20% элемента; hero всегда в первом экране, фиксированная CSS-задержка ≤400мс надёжнее и не зависит от скролла). */ .hero-shot-in{ opacity:0; transform:translateY(12px); animation:heroShotIn .4s ease-out forwards; animation-delay:.05s } @keyframes heroShotIn{ to{ opacity:1; transform:translateY(0) } } @media (prefers-reduced-motion:reduce){ .hero-shot-in{ opacity:1; transform:none; animation:none } } /* 18.09.2026: min-height:420/260px (design-spec.md #top) убран - контент дашборда (табы+KPI+ график+топ) уже занимает у него почти всю заявленную высоту, а форсированный пол создавал НОВУЮ находку page-lint ("device выше своего содержимого") там, где реального пустого места нет: высота теперь равна реальному контенту, никогда не обрезается (block-height:auto). */ .device{ position:relative; width:100%; max-width:900px; border-radius:12px; overflow:hidden; background:#111; border:1px solid #333; box-shadow:0 24px 60px rgba(0,0,0,.45) } /* 21.09.2026 (Никита: "какая блять пустота... что за рандомная плашка с Что вчера больше всего брали") - .hero-chat снята целиком (решение Никиты: главный продукт веб, диалог из Telegram в hero не нужен и ничем не объяснён зрителю). Тот же диалог законно живёт в сцене #day шаг 2 - там не трогать. */ .device-bar{ display:flex; align-items:center; gap:8px; padding:9px 14px; background:#181818; border-bottom:1px solid #2C2C2C } .device-bar .dots{ display:flex; gap:5px } .device-bar .dots span{ width:7px; height:7px; border-radius:50%; background:#3B3B3B; display:block } .device-bar .url{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:#232323; border-radius:6px; color:#8C8C8C; font-size:13px; padding:4px 10px; text-align:center } .device-live{ display:flex; align-items:center; gap:5px; color:#8FD9C0; font-size:13px; font-weight:600; white-space:nowrap; flex:none } .device-live i{ width:5px; height:5px; border-radius:50%; background:#3DDC97; display:block } .dash{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:16px } /* 24.09.2026 (Никита: "ЗАчем строка обзор фудкост закупки отчеты в hero скролятся?") - overflow-x:auto по спеке CSS Overflow заодно превращает overflow-y в auto (нельзя оставить один visible-край при заданном другом), а flex-item с overflow!=visible получает "automatic minimum size" 0 вместо content-based - значит .dash-tabs как ребёнок flex-column .dash разрешалось сжимать ПОД высоту своего контента, и то, что должно было просто не влезать по горизонтали, начинало обрезаться/скроллиться и по вертикали тоже. Замер до правки (probe.py/probe2.py, Chromium+WebKit, 1440/390, все 4 вкладки): .dash-tabs уже имел scrollHeight(31) > clientHeight(30) на КАЖДОМ рендере - технически прокручиваемый контейнер по вертикали, просто на 1px, не считанный глазом; в реальном Safari (иные метрики шрифта/ округление DPI) тот же зазор больше и обрезает строку так, как увидел Никита. Фикс убирает сам механизм: flex-shrink:0 не даёт сжимать строку ниже контента, overflow-y:hidden не даёт вертикальной прокрутке появиться вовсе - горизонтальный скролл на узких экранах остаётся. */ .dash-tabs{ display:flex; flex-shrink:0; gap:22px; border-bottom:1px solid #2C2C2C; padding-bottom:10px; overflow-x:auto; overflow-y:hidden } .dash-tabs span{ font-size:13px; font-weight:600; color:#8C8C8C; white-space:nowrap } .dash-tabs span.on{ color:#fff; position:relative } .dash-tabs span.on::after{ content:""; position:absolute; left:0; right:0; bottom:-11px; height:2px; background:var(--mint) } /* 17.09.2026 (Никита: "Эту штуку бы кликабельной сделать") - вкладки мокапа переключают панели по клику/клавиатуре (main.js); курсор-указатель только на самих вкладках, не на служебной "Обновляется сама" рядом. */ .dash-tabs [role="tab"]{ cursor:pointer } /* тач-таргет 44px (agents/frontend.md): вкладки первого экрана были 20px строкой текста без своего паддинга - зона тапа расширена невидимо, ширстрока/кегль не трогаем */ .dash-tabs [role="tab"]{ position:relative } .dash-tabs [role="tab"]::before{ content:""; position:absolute; top:-12px; bottom:-12px; left:-6px; right:-6px } .dash-tabs [role="tab"]:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; border-radius:4px } .dash-panel{ display:none } .dash-panel.is-active{ display:block } /* Адресная строка мокапа снята (Никита 16.09.2026), «Обновляется сама» живёт справа в строке вкладок; `.dash-tabs span` перебивал бы её цвет и кегль */ .dash-tabs .device-live{ margin-left:auto; color:#8FD9C0; font-size:13px; align-self:center } .dash-tabs .device-live i{ width:5px; height:5px; border-radius:50%; background:#3DDC97; display:block } .kpi-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px } @media (min-width:640px){ .kpi-row{ grid-template-columns:repeat(4,minmax(0,1fr)) } } /* 24.09.2026 (разнос дизайна главной, Никита: "все вкладки должны выглядеть как первый раздел") - Фудкост/Закупки/Отчёты несут 3 kpi-карточки, а не 4 как "Обзор"; без этого боевая сетка на 4 колонки растягивает их только на 3/4 ширины, справа пустота. */ @media (min-width:640px){ .dash-panel[data-panel="foodcost"] .kpi-row, .dash-panel[data-panel="purchases"] .kpi-row, .dash-panel[data-panel="reports"] .kpi-row{ grid-template-columns:repeat(3,minmax(0,1fr)) } } .kpi{ background:#1D1D1D; border:1px solid #2A2A2A; border-radius:9px; padding:12px 14px; min-width:0 } .kpi .k-label{ font-size:13px; color:#8A8A8A; font-weight:600 } .kpi .k-val{ font-family:var(--font-head); font-size:16px; color:#fff; font-weight:700; margin-top:5px; font-variant-numeric:tabular-nums } /* mobile: 2-колоночный .kpi-row до 640px даёт всего ~131px на значение - «1 288 262 ₽» на 16px переносил «₽» на вторую строку на 360px (qa report-qa.md defect 3, 24.09.2026) */ @media (max-width:639px){ .kpi .k-val{ font-size:14px } } .kpi .k-delta{ font-size:13px; font-weight:600; margin-top:3px } .kpi .k-delta.up{ color:#6FE3B8 } .kpi .k-delta.down{ color:#F27878 } .kpi .k-delta.flat{ color:#9A9A9A } /* align-items:start (было) не давал .chart-card стретчиться до высоты .top-card в общем ряду grid, а .bars шёл фиксированной высотой 120px - под графиком оставалась пустая полоса фона девайса на всю разницу высот (~110px при трёх позициях в .top-card). 21.09.2026 (Никита "Что с версткой в hero блять", механизм в pairs/01-top.jpg - в макете дизайна .top-card ещё не было): grid тянет оба блока до одной высоты, .bars растёт во всё освободившееся место. */ /* 21.09.2026 (Никита: "ряд KPI врезается в верх карточек «Выручка по месяцам» и «Топ позиций»") - между .kpi-row и .dash-main не было ни gap на общем родителе, ни margin: замер зазора до правки - 0px на всех ширинах (hero-tarify-0921 выровнял высоты карточек ВНУТРИ ряда, но не заметил, что ряды сверху и снизу склеены). */ .kpi-row + .dash-main{ margin-top:16px } .dash-main{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-items:stretch } @media (min-width:640px){ .dash-main{ grid-template-columns:minmax(0,1fr) 220px } } .chart-card{ background:#1D1D1D; border:1px solid #2A2A2A; border-radius:9px; padding:14px 16px; min-width:0; display:flex; flex-direction:column } .chart-card .c-title{ font-size:13px; color:#9A9A9A; font-weight:600; margin-bottom:12px } .bars{ display:flex; align-items:flex-end; gap:6px; min-height:120px; flex:1 } .bars .bar{ flex:1; border-radius:3px 3px 0 0; background:#3A3A3A; position:relative; min-width:0 } .bars .bar.now{ background:var(--mint) } .bars .bar .val{ position:absolute; top:-22px; left:50%; transform:translateX(-50%); font-size:13px; color:var(--mint); font-weight:700; white-space:nowrap; background:var(--graphite); padding:2px 6px; border-radius:4px; font-variant-numeric:tabular-nums } /* последний столбик (bar.now) стоит у самого правого края .device{overflow:hidden} - центрированная плашка резалась им на 6-9px на 320-390 (audit-fix-0918 п.7в) */ .bars .bar:last-child .val{ left:auto; right:0; transform:none } /* 25.09.2026 - правая колонка hero на 1024-1279 уже, чем нужно 4-колоночному kpi-row/расстановке график+топ в ряд (замер: ~468px вместо ~560+ безопасных - тот же порог, что уже был найден для мобилки 24.09, "1 288 262 ₽" на 16px не помещается) - та же перестройка, что просит бриф: 2 колонки KPI, топ-карточка под графиком вместо ряда. Блок стоит ПОСЛЕ базовых .kpi-row/.dash-main выше (тот же порядок исходника при равной специфичности решает каскад) - иначе базовые правила их перебивают. С 1280 колонка достаточно широкая, вступает базовая раскладка. */ @media (min-width:1024px) and (max-width:1279px){ .kpi-row, .dash-panel[data-panel="foodcost"] .kpi-row, .dash-panel[data-panel="purchases"] .kpi-row, .dash-panel[data-panel="reports"] .kpi-row{ grid-template-columns:repeat(2,minmax(0,1fr)) } .kpi .k-val{ font-size:14px } .dash-main{ grid-template-columns:minmax(0,1fr) } } /* ---- Ф3 · живой график на фоне первого экрана (24.09.2026, разнос дизайна главной, Никита: "на бэкграунде нет никакой анимации") - перенесено из R2 (_task/rhythm-live-0923/build.py render_css), значения уже подобраны им (высота 33%, было 52% до правки). #top уже position:relative;overflow:hidden - .wrap поднят над фоном z-index'ом. max-width снят 27.09.2026 - контейнер теперь общий .wrap 1360 на всех страницах, отдельное значение здесь было бы дублем. ---- */ #top .wrap{ position:relative; z-index:1 } .hero-bg-f3{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none } .hero-bg-f3 .bars{ position:absolute; left:0; right:0; bottom:0; height:33%; display:flex; align-items:flex-end; gap:5px } .hero-bg-f3 .bars i{ flex:1; min-width:0; background:rgba(113,254,211,.08); border-radius:2px 2px 0 0 } .hero-bg-f3 svg{ position:absolute; inset:0; opacity:.5 } .hero-bg-f3 path{ fill:none; stroke:rgba(113,254,211,.35); stroke-width:2; stroke-dasharray:14 8; animation:f3dash 6s linear infinite } @keyframes f3dash{ to{ stroke-dashoffset:-220 } } @media (prefers-reduced-motion:reduce){ .hero-bg-f3 path{ animation:none!important } } /* ---- С2 · крупная бегущая строка (24.09.2026, разнос дизайна главной, Никита: "нет никаких бегущих строк") - значения уже тюнингом R2 (шрифт уменьшен, без паузы по ховеру - Никита: "шрифт надо уменьшить", "убрать остановку бегущей строки по ховеру"). Текст заполняет rhythm.js-эквивалент в main.js (RHYTHM_SKILLS/RHYTHM_QUESTIONS, build.py). Outline-начертание держится на отдельном статичном инстансе "Unbounded Outline" (24.09.2026, вернули из R2 - у обычного Unbounded буквы «е», «б», «с», «ю», «и» рисуются с внутренними перехлёстами контуров, и -webkit-text-stroke их обводит; в этом инстансе перехлёсты вырезаны). Файл - src/fonts/unbounded-700-outline.woff2. ---- */ @font-face{ font-family:"Unbounded Outline"; src:url("../fonts/unbounded-700-outline.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } .rhythm-strip{ overflow:hidden; position:relative; background:var(--graphite-2); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); height:128px; display:flex; align-items:center } .rhythm-strip .marq-track{ display:flex; width:max-content; white-space:nowrap; animation:rmarq-l 42s linear infinite } .rhythm-strip.reverse .marq-track{ animation-name:rmarq-r } .rhythm-strip .item{ font-family:"Unbounded",sans-serif; font-size:52px; font-weight:700; margin-right:40px; line-height:1 } .rhythm-strip .item.fill{ color:var(--mint) } .rhythm-strip .item.outline{ font-family:"Unbounded Outline","Unbounded",sans-serif; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.6) } @keyframes rmarq-l{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } } @keyframes rmarq-r{ from{ transform:translateX(-50%) } to{ transform:translateX(0) } } @media (prefers-reduced-motion:reduce){ .rhythm-strip .marq-track{ animation:none!important } } @media (max-width:767px){ .rhythm-strip{ height:80px } .rhythm-strip .item{ font-size:32px; margin-right:24px } } .top-card{ background:#1D1D1D; border:1px solid #2A2A2A; border-radius:9px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; min-width:0 } .top-card .c-title{ font-size:13px; color:#9A9A9A; font-weight:600 } .top-item{ display:flex; justify-content:space-between; align-items:center; padding-top:9px; border-top:1px solid #2A2A2A } .top-item:first-of-type{ border-top:none; padding-top:0 } .top-item .t-name{ font-size:13px; color:#fff; font-weight:600 } .top-item .t-sub{ font-size:13px; color:#8A8A8A; margin-top:2px } .top-item .t-fc{ font-size:13px; font-weight:700; color:#6FE3B8; white-space:nowrap } .top-item .t-fc.warn{ color:#F2B078 } /* #trial-strip снят целиком 17.09.2026 (Никита: "Зачем этот раздел? Ты то же самое написал на скрине 2") - CSS-блок убран вместе с разметкой (build.py). */ .reveal-fade{ opacity:0; transition:opacity 250ms } .reveal-fade.is-visible{ opacity:1 } /* ---- #day: полноэкранная сцена по прогрессу скролла (16.09.2026, замена ленты D2 - Никита забраковал прежний параллакс целиком: "во весь экран, и там будут появляться новые блоки этого дня"). Дефолт (без класса .is-enhanced - без JS, при prefers-reduced-motion, без поддержки position:sticky) - обычный вертикальный список, всё видно сразу, без анимации; main.js добавляет .is-enhanced и ведёт сцену через --progress/--local одним rAF-слушателем на scroll. ms-card/ms-row/ms-voice-* и т.п. ниже не тронуты - контент карточек переиспользован как есть. Прежний .day-head .eyebrow снят как мёртвое правило - в новой разметке .day-head такого элемента нет; лейблы (kicker/mark) набраны обычным регистром, капс не используется (правило "заголовки/кнопки без капса"). */ .day{ position:relative } .day-track{ position:relative } /* 21.09.2026 (Никита: "почему раздел лидер продаж проматывается сам по себе", "анимация паралакса стала уебищной") - откат укорочения трека волной 4a (620vh/460vh → 320vh/260vh, audit.md п.9 "5580px лишнего скролла"): вдвое короче зона на шаг - обычный скролл/трекпад- инерция перескакивает через 2+ шага за один жест, читается как самопрокрутка. Метрика "лишний скролл" больше не критерий (day-scene-0921/brief-frontend.md) - трек снова длинный, На мобиле трек всё равно получает запас снизу под .mobile-cta (56px + 16px), это отдельный и верный фикс той же волны - не трогаем. */ .day.is-enhanced .day-track{ height:620vh } @media (max-width:1023px){ .day.is-enhanced .day-track{ height:460vh; padding-bottom:72px } } .day-stage{ padding:64px 0 56px } @media (min-width:768px){ .day-stage{ padding:96px 0 80px } } /* 18.09.2026 (Никита: "А что блять с расстоянием снизу и сверху") - заход 2 прибил блок к верху (align-items:flex-start) без поправки на высоту липкого меню и без центровки: при коротком контенте вся нижняя половина 100vh пустовала. --nav-bottom - фактическая высота меню, замеряется в JS (day-scene measure(), main.js) через header.getBoundingClientRect(), не константа (высота меню разная на 1024+/мобиле и меняется при resize). Паддинги задают зону между низом меню и низом экрана с обязательными 32px по краям. 24.09.2026 (day-polish-0924, V2, Никита "v2 лучше всего по одному дню") - align-items:safe center отменён обратно на flex-start: разбор дефектов показал пустой верх сцены до 40% высоты экрана на каждом шаге (центровка короткого контента в 100vh), раздел, который Никита назвал единственным удачным, читался как самый пустой. Верх зоны, ровно +32px от меню, всегда - как в V1/V2; пустой низ на коротких шагах ("Итог дня") - принятый компромисс того же выбора, card уже не растягивается на пустоту (applyChatScale ниже её не раздувает). */ /* 18.09.2026 (audit-fix-0918 п.1, qa-5 «обломок карточки») ставил сюда --day-exit-opacity - плавно гасил содержимое сцены перед жёстким обрезом overflow:hidden на выходе. Снято 25.09.2026 (frontend-2b, Никита: "почему параллакс пропадает раньше, чем виден следующий раздел" - фейд создавал "пустые" кадры: контент уже невидим, а липкая сцена ещё занимает экран). Последний шаг теперь уезжает как обычный блок без фейда; #pos (см. правило .pos ниже) подтягивается на пустой хвост под коротким последним шагом через --pos-pull (main.js updatePosPull()), закрывая собой то, что раньше пряталось фейдом. */ .day.is-enhanced .day-stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; align-items:flex-start; padding-top:calc(var(--nav-bottom,57px) + 32px); padding-bottom:32px; box-sizing:border-box; background:var(--day-bg, var(--graphite)); } /* На мобиле липкая .mobile-cta (56px) лежит НАД сценой как fixed-оверлей, а zoneH в JS (applyChatScale, main.js) её высоту не вычитает - карточка могла центрироваться так, что заезжает под кнопку (design-spec.md #day: "на мобилке карточка не уходит под липкую кнопку"). Резервируем те же 56+16=72px снизу зоны сцены, а не только у трека (там - для длины скролла). */ @media (max-width:1023px){ /* 20.09.2026 (audit-fix-0918 4e): + var(--cookie-h) отсюда убран - в 4d он не измерил никакого эффекта (сам padding-bottom не влиял на cardBottom, см. report-frontend-4d.md п.3), а .mobile-cta теперь просто скрыт на время cookie-bar (html.has-cookie-bar выше), так что резервировать под него уже не нужно ни здесь, ни в JS zoneH. */ .day.is-enhanced .day-stage{ padding-bottom:calc(32px + 72px) } } .day.is-enhanced .day-stage-inner{ display:grid; grid-template-areas:"head-top chat" "text chat" "track chat"; grid-template-columns:minmax(0,5fr) minmax(0,6fr); grid-template-rows:auto auto auto; column-gap:40px; row-gap:32px; align-items:start; height:100%; max-height:100%; padding:56px 0; box-sizing:border-box; } @media (max-width:1023px){ .day.is-enhanced .day-stage-inner{ grid-template-areas:"head-top" "text" "track" "chat"; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto minmax(0,1fr); padding:20px 0 16px; row-gap:10px; } } /* 24.09.2026 (разнос дизайна главной, item 3 - Никита: "текст... должна быть над плашкой, а не под ней") - #dayHead разбит на .day-head-top (H2+лид+время) и #dayProgress (дорожка), дорожка теперь ПОСЛЕДНЯЯ строка левой колонки, а не первая: text-под-плашкой стало text-над-track. #dayHead получает display:contents и не участвует в гриде сам - main.js меряет day-head-top/#dayProgress по отдельности (см. main.js applyChatScale). */ .day-head{ max-width:680px; margin:0 0 32px } .day.is-enhanced #dayHead{ display:contents } .day.is-enhanced .day-head-top{ grid-area:head-top } .day-head .sec-h2{ font-size:30px; color:#fff } @media (min-width:768px){ .day-head .sec-h2{ font-size:38px } } @media (min-width:1440px){ .day-head .sec-h2{ font-size:44px } } /* заголовок и лид больше НЕ сжимаются и не прячутся по --head-t (17.09.2026, Никита: "заголовок и подзаголовок сжимается, перед тем как начинается параллакс" + "не обрезаются ни на какой высоте экрана") - на тесном экране по высоте ужимается карточка (--chat-scale ниже), не текст. */ .day-lead{ font-size:16px; line-height:1.6; color:var(--text-2); max-width:560px; margin-top:14px } /* часы + полоса прогресса дня - заменяют прежнюю ленту .ribbon, видны только в сцене */ .day-clock{ display:none } .day-progress{ display:none } .day.is-enhanced .day-clock{ display:block; font-family:var(--font-head); font-size:15px; font-weight:700; color:var(--mint); letter-spacing:.03em; margin-top:16px; font-variant-numeric:tabular-nums } .day.is-enhanced .day-progress{ display:block; grid-area:track; margin-top:0; max-width:none } .day-progress-bar{ position:relative; height:3px; background:#333; border-radius:2px; overflow:hidden } .day-progress-bar i{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--mint); border-radius:2px } /* 18.09.2026 (Никита: подпись "Себестоимость" касается "Итог дня") - flex+space-between с gap:6px и родительский max-width:420px сжимали 5 подписей до касания на узких вьюпортах; CSS grid с равными колонками даёт гарантированный (не "пол", который space-between мог перекрыть) зазор 12px, дорожка теперь на всю ширину текстовой колонки (max-width сняли выше). Длинные подписи переносятся в две строки в своей колонке - текст не менять. */ .day-marks{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:10px } /* 21.09.2026 (Никита: "Итоги вчера/Лидер продаж/Себестоимость в две строки, переносятся криво") - волна 4a подняла все мелкие подписи сайта до >=13px разом (report-frontend-4a.md строка 66); для этой конкретной дорожки размер был подобран под ширину колонки в комментарии 18.09.2026 ниже - на 13px "Себестоимость" (13 знаков, без пробелов) не влезала в свою из 5 колонок. Возврат к 10.5px тогда откатили это - 24.09.2026 (day-polish-0924, дефект 6, Никита "v2 лучше всего по одному дню") 10.5px оказался самым мелким текстом на всём сайте прямо под заголовком 44px. Слово "Себестоимость" в текущих подписях дорожки больше не встречается (актуальный набор - "Итоги вчера/Вопрос боту/Топ продаж/Фудкост/Итог дня", самое длинное слово "Фудкост" короче), overflow-wrap/hyphens остаются на случай будущей правки текста. */ .day-mark{ font-size:13px; line-height:1.25; letter-spacing:.02em; color:var(--text-3); font-weight:500; text-align:center; white-space:nowrap } /* 24.09.2026 (news-0924, Никита: "почему активный пункт становится высотой в 2 строки, хотя ничего кроме цвета не меняется") - причина была в .is-active ниже: font-weight:700 делает подпись шире того же текста весом 500, "Вопрос боту" переставало влезать в свою колонку и переносилось - полоса подписей прыгала по высоте на шаге 2. Активное состояние меняет только цвет; white-space:nowrap запрещает перенос при любом шаге. overflow-wrap/hyphens (были здесь 18.09.2026 на случай переноса) сняты как мёртвые - с nowrap перенос невозможен в принципе. */ .day-mark.is-active{ color:var(--mint) } .day-mark.is-done{ color:#B5B5B5 } @media (max-width:479px){ /* news-0924 frontend-3 (qa-verdict-2, дефект 2) - живой замер (getBoundingClientRect) на 5 колонках давал зазор 6px и выглядел исправным, но rect span'а - это РАСТЯНУТАЯ ячейка грида (justify-items:stretch по умолчанию), а не фактическая ширина глифов: с white-space:nowrap текст "Итоги вчера"/"Вопрос боту" (11 знаков) шире своей ~55-67px колонки на этой ширине и переливается поверх соседних ячеек мимо их границ - на живом кадре читалось слипшимся текстом "Итоги вчераВопрос ботТоп продажФудкост" (marks-zoom-step5-390.png), хотя числовой замер рамок показывал "зазор ок". Кегль 11-12px тут не помогает - те же 2 самых длинных подписи не влезают ни при каком разумном размере в 1/5 от 288-398px строки. Бриф разрешает вариант (2): на ≤479 видна только активная подпись (одна строка, без соседей - пересекаться не с чем), позицию показывает полоса прогресса выше. */ .day-marks{ display:block; text-align:center } .day-mark{ display:none; font-size:12px } .day-mark.is-active{ display:inline-block } /* news-0924 frontend-3 (qa-verdict-2, дефект 2): корешок колоды (.is-deck-1 .visual) на 320-430 садится на -2px ВЫШЕ строки подписей (замер: trackBottom+rowGap(10)+visual margin-top(20) - (day-peek 24 + day-gap 8) = trackBottom-2px). #dayProgress измеряется JS'ом живьём (main.js applyChatScale: trackElH = getBoundingClientRect().height), поэтому 10px добавлены именно padding-bottom'ом (входит в border-box высоту, JS сам пересчитает avail/--chat-scale под новую высоту), а не margin (margin-bottom в JS-замер не попадает - avail оказался бы завышен, карточка могла вылезти за низ зоны). Даёт ровно +8px зазора (замер после правки - таблица в report-frontend.md). */ .day.is-enhanced .day-progress{ padding-bottom:10px } } .day-rows{ display:flex; flex-direction:column; gap:32px } .day.is-enhanced .day-rows{ display:contents } .day-row{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:24px 16px; border-top:1px solid #2E2E2E } @media (min-width:768px){ .day-row{ grid-template-columns:minmax(0,44fr) minmax(0,56fr); gap:0 48px; align-items:center; min-height:320px; padding:32px 24px } } .day-row:first-child{ border-top:none } .day.is-enhanced .day-row{ display:contents } .day-kicker{ display:block; font-family:var(--font-head); font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--mint); margin-bottom:10px } .day.is-enhanced .day-kicker{ display:none } .day-row .content h3{ font-family:var(--font-head); font-size:20px; line-height:1.3; color:#fff; font-weight:600; margin-bottom:12px; max-width:460px; text-wrap:balance } @media (min-width:768px){ .day-row .content h3{ font-size:24px } } .day-row .content p{ font-size:16px; line-height:1.6; color:var(--text-2); max-width:460px } .day.is-enhanced .content{ grid-area:text; align-self:start; will-change:transform,opacity } .visual{ position:relative } .day.is-enhanced .visual{ grid-area:chat; align-self:center; justify-self:stretch; will-change:transform,opacity; transform-origin:center top } @media (max-width:1023px){ /* На мобиле карточка центрировалась по всей оставшейся зоне (align-self:center) - между текстом шага и карточкой получался разрыв ~200px (design-spec.md #day, audit.md п.10); раскладка на мобиле в один столбец (текст над карточкой), поэтому прижимаем карточку к тексту сверху вместо центрирования в большой пустой ячейке. */ .day.is-enhanced .visual{ align-self:start; margin-top:20px } /* 24.09.2026 (day-polish-0924/brief-frontend-2) - опять же следствие возврата вкладкам opacity:1 (см. #day .is-deck-1 .visual ниже): на мобиле вкладка-колода одна (.is-deck-1, main.js: "в колоде максимум 1 на мобиле"), translateY(-1 * var(--day-peek)) = -24px от верха ячейки .chat, а зазор между низом #dayProgress (дорожка шагов) и этой ячейкой был всего 10px (row-gap сетки) - вкладка перекрывала подписи шагов на 14px (замерено: measure_overlap_390.py, trackBottom - deckTop). margin-top:20px на .visual поднимает нижнюю границу зазора до ~30px, с деком выходит чистый просвет ~6px - без пересечения. Раньше вкладка была почти прозрачной (opacity:.35-.55) и пересечение текста не читалось; непрозрачная вкладка требует реального зазора, не оптической маскировки. */ } .day-chat-probe{ display:none } .day.is-enhanced .day-chat-probe{ display:block; grid-area:chat; align-self:stretch; visibility:hidden; pointer-events:none } .ms-card{ width:100%; box-sizing:border-box; border-radius:14px; background:linear-gradient(180deg,#181818,#101010); border:1px solid #2A2A2A; box-shadow:0 24px 60px rgba(0,0,0,.4); padding:22px 24px; color:#fff } @media (min-width:768px){ .ms-card{ padding:30px 32px } } /* ---- дискретные состояния шага #day (17.09.2026, брифа-степ) - JS только переключает класс .day-row.is-focus/is-next/is-deck-1/is-deck-2/is-gone/is-measuring, вся анимация здесь. Leave (текст ~220мс, карточка ~320мс) идёт в момент назначения "прошлого"/"будущего" класса, enter (текст ~320мс, карточка ~380мс) - в момент назначения .is-focus; JS (LEAVE_MS/ENTER_MS) ждёт более долгую фазу целиком, поэтому наложения текста двух шагов быть не может - следующая фаза стартует только после завершения предыдущей (см. main.js goTo()). */ :root{ --day-peek:34px; --day-gap:8px } @media (max-width:1023px){ :root{ --day-peek:24px } } .day.is-enhanced .day-row .content{ transition-property:transform,opacity; transition-timing-function:ease } .day.is-enhanced .day-row.is-focus .content{ transform:translateY(0); opacity:1; transition-duration:320ms } .day.is-enhanced .day-row.is-next .content{ transform:translateY(24px); opacity:0; transition-duration:220ms } .day.is-enhanced .day-row.is-deck-1 .content, .day.is-enhanced .day-row.is-deck-2 .content, .day.is-enhanced .day-row.is-gone .content{ transform:translateY(-24px); opacity:0; transition-duration:220ms } .day.is-enhanced .day-row .visual{ transition-property:transform,opacity; transition-timing-function:cubic-bezier(.2,.7,.2,1) } .day.is-enhanced .day-row.is-focus .visual{ transform:translateY(0) scale(var(--chat-scale,1)); opacity:1; transition-duration:380ms } .day.is-enhanced .day-row.is-next .visual{ transform:translateY(64px) scale(calc(.97 * var(--chat-scale,1))); opacity:0; transition-duration:320ms } @media (max-width:1023px){ .day.is-enhanced .day-row.is-next .visual{ transform:translateY(40px) scale(calc(.97 * var(--chat-scale,1))) } } /* V2 доводка (24.09.2026, day-polish-0924/brief-frontend-2, Никита: "v2 лучше всего по одному дню") - первый заход V2 оставил вкладки .94/.88 суженными transform:scale и притушенными opacity:.55/.35 - та же лесенка и низкий контраст подписи (.ms-cap на var(--home-muted)), что и дефект 3 до правки. Множитель scale убран (остаётся только var(--chat-scale,1), тот же, что у фокусной карточки - ширина вкладки теперь равна ширине активной карточки, не сужена); opacity вкладок 1 (глубина - только translateY-сдвиг ниже, без затемнения текста и рамки) - на непрозрачном фоне вкладки (var(--card fallback) #181818-#101010) .ms-cap (#B5B5B5) даёт ~9:1, было ~3.6:1 на #181818, размытом до opacity:.55 к фону сцены #1E1E1E. */ /* 24.09.2026 (news-0924, Никита: "обрезка уже проеханной плашки снизу" + "обрезка снизу и наезжание активной плашки") - формулы ниже раньше сажали вкладку ВПЛОТНУЮ к активной карточке (0px), это и читалось как наезд; на все три добавлен var(--day-gap) как реальный зазор. Расчёт: было cur-h/2 + peek/2 (нулевой зазор до активной), стало cur-h/2 + peek/2 + gap (столько же + один зазор); для deck-2/gone к прежнему шагу (peek + 6px) добавлен ещё один gap, тот же зазор между вкладками, что и до активной. */ .day.is-enhanced .day-row.is-deck-1 .visual{ transform:translateY(calc(-1 * (var(--cur-h,300px) / 2 + var(--day-peek) / 2 + var(--day-gap)))) scale(var(--chat-scale,1)); opacity:1; transition-duration:320ms; } .day.is-enhanced .day-row.is-deck-2 .visual{ transform:translateY(calc(-1 * (var(--cur-h,300px) / 2 + var(--day-peek) / 2 + var(--day-gap) + (var(--day-peek) + var(--day-gap))))) scale(var(--chat-scale,1)); opacity:1; transition-duration:320ms; } .day.is-enhanced .day-row.is-gone .visual{ transform:translateY(calc(-1 * (var(--cur-h,300px) / 2 + var(--day-peek) / 2 + var(--day-gap) + (var(--day-peek) + var(--day-gap)) * 1.4))) scale(var(--chat-scale,1)); opacity:0; transition-duration:320ms; } /* 24.09.2026 (day-polish-0924, дефект 5 - "карточка «Ответ Цифры» наезжает на текст шага на 390"): формула выше вычитает половину высоты ФОКУСНОЙ карточки (--cur-h/2) из нулевой позиции, потому что на 1024+ .visual вертикально центрирован в своей ячейке (align-self: center, style.css выше) - половина высоты уводит колоду ровно к верхнему краю фокусной карточки. На мобиле .visual прижат к верху ячейки (align-self:start, блок ниже) - нулевая позиция УЖЕ совпадает с верхом фокусной карточки, вычитать --cur-h/2 не нужно: старая формула уводила колоду ещё на ~cur-h/2 (100-300px) выше, что и пробивало насквозь текст шага и дорожку прогресса над ней (shots/now-w390-y06.png, дефект 5 разбора). Только --day-peek (высота вкладки) и такой же зазор 6px между вкладками, без cur-h/2. */ @media (max-width:1023px){ .day.is-enhanced .day-row.is-deck-1 .visual{ transform:translateY(calc(-1 * (var(--day-peek) + var(--day-gap)))) scale(var(--chat-scale,1)) } .day.is-enhanced .day-row.is-deck-2 .visual{ transform:translateY(calc(-1 * (var(--day-peek) + var(--day-gap) + (var(--day-peek) + var(--day-gap))))) scale(var(--chat-scale,1)) } .day.is-enhanced .day-row.is-gone .visual{ transform:translateY(calc(-1 * (var(--day-peek) + var(--day-gap) + (var(--day-peek) + var(--day-gap)) * 1.4))) scale(var(--chat-scale,1)) } } /* 21.09.2026 (Никита: "почему плашки стали высокими") - откат волн 4a/4e audit-fix-0918: потолок 72vh/560px + принудительный min-height растягивали ЛЮБОЙ шаг (даже "Итог дня" на 3 строки) до ~560-650px ради метрики "процент пустоты", которую этот бриф отменяет как критерий (day-scene-0921/brief-frontend.md). Возврат к --own-h - измеренной JS (main.js measure()) реальной высоте карточки текущего шага; короткий шаг остаётся компактным. 24.09.2026 (day-polish-0924, дефект 4, knowledge/design/web-ux/foundations/motion.md "Never animate layout-affecting properties") - transition по max-height/padding снят: смена шага переразмечивала всю сетку на каждом кадре (layout thrash). max-height/padding по-прежнему МЕНЯЮТСЯ (мгновенно, без transition) - card просто "прыгает" в новую высоту синхронно с fade/translate родительского .visual (transition-duration:380ms выше), который и несёт всю видимую анимацию перехода. */ .day.is-enhanced .day-row .ms-card{ max-height:var(--own-h,600px); overflow:visible } /* V2 (day-polish-0924, Никита "v2 лучше всего по одному дню") - колода из дефекта 3 ("бледные карточки-призраки похожи на баг") теперь настоящие подписанные вкладки: плоский верх (радиус только сверху, без нижней границы - визуально сливаются с карточкой под ними), контент карточки кроме подписи (.ms-cap) скрыт, а не обрезан посередине слова - раньше 10px паддинга оставляли на 34px-вкладку ~14px текста, подпись срезалась ровно по буквам и читалась как рендер-глюк. */ /* 24.09.2026 (news-0924, Никита: "обрезка уже проеханной плашки снизу" + "наезжание активной карточки") - радиус/бордер были сделаны под "слитный" верх без зазора (плоский верх, без нижней рамки), что и читалось глазами как жёсткий обрез снизу; с реальным зазором (--day-gap выше) вкладка теперь отдельная целая карточка - радиус на все 4 угла, нижняя рамка не снимается (наследуется от базового .ms-card border:1px solid #2A2A2A, здесь больше не отключена). Тень оставлена базовой (.ms-card box-shadow), своей верхней не нужно. */ .day.is-enhanced .day-row.is-deck-1 .ms-card, .day.is-enhanced .day-row.is-deck-2 .ms-card, .day.is-enhanced .day-row.is-gone .ms-card{ max-height:var(--day-peek); padding:0 24px; overflow:hidden; border-radius:14px; } .day.is-enhanced .day-row.is-deck-1 .ms-card > *:not(.ms-cap), .day.is-enhanced .day-row.is-deck-2 .ms-card > *:not(.ms-cap), .day.is-enhanced .day-row.is-gone .ms-card > *:not(.ms-cap){ display:none } .day.is-enhanced .day-row.is-deck-1 .ms-card .ms-cap, .day.is-enhanced .day-row.is-deck-2 .ms-card .ms-cap, .day.is-enhanced .day-row.is-gone .ms-card .ms-cap{ margin:0; line-height:var(--day-peek) } @media (max-width:1023px){ .day.is-enhanced .day-row.is-deck-1 .ms-card, .day.is-enhanced .day-row.is-deck-2 .ms-card, .day.is-enhanced .day-row.is-gone .ms-card{ padding:0 20px } } .day.is-enhanced .day-row.is-measuring .ms-card{ max-height:none !important; overflow:visible !important; transition:none !important } /* 18.09.2026 (правило no-caps-in-ui-text, Никита decisions-nikita.md п.19) - капс снят с подписей карточек и с остального UI-текста сцены #day (.ms-answer-t, .ms-ttk th ниже, .ms-kbju b span в конце файла); цвет и размер не трогал - контраст не менялся. */ .ms-cap{ font-family:var(--font-head); font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--home-muted); margin-bottom:14px } .ms-row{ display:flex; flex-direction:column; gap:10px } .ms-item{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; background:#1D1D1D; border:1px solid #2A2A2A; border-radius:10px; padding:12px 14px } .ms-l{ font-size:13px; color:#9A9A9A; flex:none } .ms-v{ font-family:var(--font-head); font-size:15px; font-weight:700; color:#fff; margin-left:auto; text-align:right } .ms-d{ font-size:13px; font-weight:700; flex:none } .ms-d.up{ color:#6FE3B8 } .ms-d.down{ color:#F27878 } .ms-d.flat{ color:#9A9A9A } .ms-flag{ margin-top:12px; background:var(--mint-plate); color:var(--graphite); border-radius:10px; padding:12px 14px; font-size:13px; font-weight:700 } /* 18.09.2026 (Никита: "внутри карточки голосового пустая область между подписью и вопросом") - причина не в карточке (.ms-card max-height:var(--own-h) её не клипует, overflow:visible), а в самой строке записи: .is-leaving только гасил opacity/transform, а блок оставался в потоке своей полной высотой (~56px) - между .ms-cap и .ms-voice-q зиял её пустой контур. Схлопываем max-height/padding вместе с opacity, чтобы после ухода строка не занимала места - максимум задан с запасом (реальная высота строки ~48-56px), .ms-card тогда просто садится по контенту (overflow:visible, никакого отдельного height-перехода не нужно). 24.09.2026 (day-polish-0924, дефект 4, тот же двойник что и .ms-card выше) - max-height/padding убраны из transition (были layout-affecting свойства в анимации); значения по-прежнему меняются на .is-leaving, но мгновенно, а не проигрываются 300ms - видимую часть ухода (300ms) несут opacity/transform, коллапс места под текстом происходит одним кадром, пока строка уже гаснет. */ .ms-voice-row{ display:flex; align-items:center; gap:12px; background:#2A2A2A; border-radius:24px; padding:12px 16px; align-self:flex-start; width:74%; min-width:220px; box-sizing:border-box; max-height:64px; overflow:hidden; transition:opacity 300ms ease, transform 300ms ease } .ms-voice-row.is-leaving{ opacity:0; transform:translateY(-4px); max-height:0; padding-top:0; padding-bottom:0 } .ms-mic{ font-size:18px } .ms-wave{ display:flex; align-items:center; justify-content:space-between; gap:3px; flex:1; min-width:0; height:20px } .ms-wave i{ display:block; flex:0 0 3px; height:100%; border-radius:2px; background:#6FE3B8; opacity:.85; transform:scaleY(.35); animation:ms-wave-pulse 1.1s ease-in-out infinite } .ms-wave i:nth-child(1){ animation-delay:0ms } .ms-wave i:nth-child(2){ animation-delay:80ms } .ms-wave i:nth-child(3){ animation-delay:160ms } .ms-wave i:nth-child(4){ animation-delay:240ms } .ms-wave i:nth-child(5){ animation-delay:320ms } .ms-wave i:nth-child(6){ animation-delay:400ms } .ms-wave i:nth-child(7){ animation-delay:480ms } .ms-wave i:nth-child(8){ animation-delay:560ms } .ms-wave i:nth-child(9){ animation-delay:640ms } .ms-wave i:nth-child(10){ animation-delay:720ms } .ms-wave i:nth-child(11){ animation-delay:800ms } .ms-wave i:nth-child(12){ animation-delay:880ms } @keyframes ms-wave-pulse{ 0%,100%{ transform:scaleY(.35) } 50%{ transform:scaleY(1) } } .ms-time{ font-size:13px; color:#9A9A9A; font-variant-numeric:tabular-nums } .ms-voice-q{ font-size:15.5px; color:#E6E6E6; line-height:1.4; margin-top:16px; font-family:var(--font-head); font-weight:600 } /* дефолт (без JS / prefers-reduced-motion) - вопрос виден сразу, весь шаг 2 читается статично списком; скрыт и анимирован только внутри прилипшей сцены, до вызова __dayVoiceTrigger() (qa-2 дефект 3a) */ .day.is-enhanced .ms-voice-q{ opacity:0; transform:translateY(4px); transition:opacity 300ms ease 100ms, transform 300ms ease 100ms } .day.is-enhanced .ms-voice-q.is-visible{ opacity:1; transform:translateY(0) } @media (prefers-reduced-motion: reduce){ .ms-wave i{ animation:none; transform:scaleY(.7) } .ms-voice-row.is-leaving{ opacity:1; transform:none; max-height:64px; padding-top:12px; padding-bottom:12px } .day.is-enhanced .ms-voice-q{ transition:none } } .ms-answer{ background:var(--mint-plate); border-radius:12px; padding:16px 18px; color:var(--graphite) } .ms-answer-t{ font-size:13px; font-weight:700; letter-spacing:.03em; opacity:.75; margin-bottom:3px } .ms-answer-v{ font-family:var(--font-head); font-size:15.5px; font-weight:700; margin-bottom:12px; line-height:1.3 } .ms-answer-sep{ height:1px; background:rgba(30,30,30,.18); margin-bottom:12px } .ms-ttk{ width:100%; border-collapse:collapse; font-size:13px; color:#C8C8C8 } .ms-ttk th{ font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--home-muted); text-align:right; padding:0 0 8px; border-bottom:1px solid #2A2A2A } .ms-ttk td{ padding:7px 0; border-bottom:1px solid #222; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums } .ms-ttk th:first-child,.ms-ttk td:first-child{ text-align:left } .ms-ttk td+td{ padding-left:12px } .ms-ttk tr.hi td{ color:#fff; font-weight:600 } .ms-ttk tr.hi td:first-child{ color:var(--mint) } .ms-ttk tfoot td{ border-bottom:none; padding-top:10px; color:#fff; font-weight:700 } .ms-ttk-kpi{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap } /* 20.09.2026 (audit-fix-0918 4e, page-lint "два div пустота 92px на 1024"): третий тайл (КБЖУ, 4 значения с переносом) в общем flex-ряду выше двух коротких (Цена в меню/Фудкост) - flex по умолчанию stretch тянет короткие тайлы под его высоту, а их текст без вертикального центрирования оставался у верхнего края, пустота проваливалась вниз. */ .ms-ttk-kpi div{ flex:1 1 90px; background:#1D1D1D; border:1px solid #2A2A2A; border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; justify-content:center } .ms-ttk-kpi .ms-l{ display:block; margin-bottom:4px } .ms-ttk-kpi .ms-v{ font-size:14px; margin:0 } .ms-ttk-note{ font-size:13px; color:#8FD9C0; margin-top:10px; line-height:1.4 } /* ---- #compare (out/compare/C3.html) ---- */ .compare{ padding:56px 0 64px } @media (min-width:768px){ .compare{ padding:80px 0 } } .cmp-split{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px } @media (min-width:900px){ .cmp-split{ grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:56px; align-items:start } } .cmp-left h2{ font-size:28px; line-height:1.18; color:#fff; font-weight:700 } @media (min-width:768px){ .cmp-left h2{ font-size:34px } } .cmp-left p{ margin-top:14px; font-size:15px; line-height:1.55; color:var(--home-muted); max-width:34ch } @media (max-width:767px){ .cmp-left p{ max-width:none } } .cmp-rows{ display:flex; flex-direction:column } .cmp-row{ display:flex; gap:16px; align-items:flex-start; padding:20px 16px; margin:0 -16px; border-top:1px solid #333; border-radius:12px; transition:background-color 180ms ease, transform 180ms ease } .cmp-row:first-child{ border-top:none } .cmp-row:not(.feature):hover{ background:var(--graphite-2); transform:translateY(-2px) } .cmp-row .num{ font-family:var(--font-head); font-size:13px; font-weight:700; color:#9E9E9E; flex:0 0 24px; padding-top:2px; transition:color 180ms ease } .cmp-row h3{ font-family:var(--font-head); font-size:16px; font-weight:600; color:#fff; margin-bottom:5px; transition:color 180ms ease } .cmp-row p{ font-size:14px; line-height:1.5; color:#A9A9A9 } .cmp-row:not(.feature):hover .num{ color:var(--mint) } .cmp-row:not(.feature):hover h3{ color:var(--mint) } .cmp-row.feature{ background:var(--mint-plate); border-radius:14px; padding:16px 14px; border-top:none; margin:6px 0 } @media (min-width:640px){ .cmp-row.feature{ padding:20px 22px } } @media (max-width:479px){ .cmp-row.feature{ padding:14px 12px } .cmp-row.feature .num{ display:none } } .cmp-row.feature .num{ color:var(--graphite) } .cmp-row.feature h3{ color:var(--graphite) } .cmp-row.feature p{ color:#1E1E1E; opacity:.82 } /* ---- #pos "Как подключиться" -> S2 (24.09.2026, _task/pos-s2-0924, разбор Никиты в чате) - прямой пунктир как в hero (.hero-bg-f3 path), но в 3 раза медленнее (18s против 6s), точки строго на оси пунктира. Эталон - _task/pos-s2-0924/mock.html (content-width 1120px, снят с эталона при контейнере .wrap 1184 - 2x32; с 27.09.2026 контейнер общий 1360, содержимое 1296, ряд шагов шире эталона - сетка `repeat(N,minmax(0,1fr))` тянется вместе с контейнером, разметка эталона не менялась). От 1024 - ряд (сетка repeat(3,1fr) max-content из эталона, порог спущен с 1184 до 1024 в возврате 1 - см. дефект 4 ниже), ниже 1024 шаги идут в столбец с вертикальным пунктиром слева и теми же точками на оси, а не ужимаются в ряд - решение frontend, не часть эталона. ---- */ /* 25.09.2026 (frontend-2b) - position:relative+z-index+margin-top наезжают #pos на пустой хвост липкой сцены #day (см. комментарий у .day-stage-inner выше); --pos-pull в px задаёт main.js (updatePosPull(), 0 по умолчанию до первого measure() - без JS/is-enhanced хвоста нет, margin остаётся 0). background дублирует body.page-home (тот же графит) - шва не видно, даже если #pos на миг перекрывает ещё не доскроллившую сцену. */ .pos{ padding:56px 0 64px; position:relative; z-index:2; background:var(--graphite); margin-top:calc(-1 * var(--pos-pull, 0px)) } @media (min-width:768px){ .pos{ padding:72px 0 88px } } .pos-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin:0 0 32px } @media (min-width:768px){ .pos-head{ margin-bottom:56px } } /* Возврат 1 (24.09.2026, дефект 1): было margin-bottom:16px - суммарно с .pos-track padding-top:40px и line top:7px зазор H2->пунктир получался ~23-25px против ~55-60px в эталоне (mock.html: .hd margin-bottom:48 + .trk padding-top:40 + .ln top:7 - те же числа использованы в .pos-track/.pos-track-line ниже, скопировано 1:1). */ @media (min-width:1024px){ .pos-head{ margin-bottom:48px } } .pos-head h2{ font-family:var(--font-head); font-size:28px; font-weight:700; color:#fff; margin:0 } @media (min-width:768px){ .pos-head h2{ font-size:38px } } .pos-head h2 .mint{ color:var(--mint) } .pos-head .btn{ display:inline-flex; margin:0; flex:0 0 auto } /* 24.09.2026 (frontend-2, Никита: "кнопку оставить заявку можно сделать громче") - #pos и pricing-cta делят одну и ту же крупную версию .btn: это те же главные CTA страницы, кнопки hero и шапки не трогаются. */ .pos-head .btn, .pricing-cta .btn{ height:48px; font-size:17px; padding:0 32px; box-shadow:0 10px 28px rgba(113,254,211,.25); } @media (min-width:1440px){ .pos-head .btn, .pricing-cta .btn{ height:56px; font-size:18px } } @media (hover:hover){ .pos-head .btn:hover, .pricing-cta .btn:hover{ box-shadow:0 14px 36px rgba(113,254,211,.4); } } /* База - <1024, столбец: вертикальный пунктир слева, точки на его оси. */ .pos-track{ position:relative; padding:0 0 0 28px } .pos-track-line{ position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:repeating-linear-gradient(180deg, rgba(113,254,211,.6) 0 14px, transparent 14px 22px); animation:pos-line-v 18s linear infinite; } @keyframes pos-line-v{ to{ background-position:0 220px } } @keyframes pos-line-h{ to{ background-position:220px 0 } } .pos-track-arrow{ position:absolute; left:0; bottom:-2px; transform:rotate(90deg) } .pos-track-row{ display:flex; flex-direction:column; gap:32px } .pos-track-step{ position:relative; min-width:0 } /* Центр точки задан через top + translateY(-50%) от одной и той же оси (как в эталоне) - размер точки у финального шага другой, а вертикальная привязка общая. */ .pos-track-step::before{ content:""; position:absolute; left:-28px; top:12px; transform:translateY(-50%); width:12px; height:12px; box-sizing:border-box; border:2px solid var(--mint); background:var(--graphite); border-radius:50%; } .pos-track-step.is-final::before{ left:-29px; width:14px; height:14px; border:0; background:var(--mint) } .pos-track-step h3{ font-size:18px; font-weight:600; line-height:1.3; color:#fff; margin:0 0 10px; white-space:nowrap } .pos-track-step p{ font-size:14px; line-height:1.55; color:var(--home-muted); margin:0; max-width:260px } /* >=1024 - ряд, горизонтальный пунктир сверху, метрики 1:1 из mock.html (порог был 1184). */ @media (min-width:1024px){ .pos-track{ padding:40px 0 0 } .pos-track-line{ left:6px; right:2px; top:7px; bottom:auto; width:auto; height:2px; background:repeating-linear-gradient(90deg, rgba(113,254,211,.6) 0 14px, transparent 14px 22px); animation-name:pos-line-h; } .pos-track-arrow{ left:auto; right:0; top:0; bottom:auto; transform:none } .pos-track-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) max-content; gap:0 } .pos-track-step::before{ left:0; top:-32px } .pos-track-step.is-final::before{ left:-1px } } /* Возврат 1 (24.09.2026, дефект 2): right:38px (было) вместо right:2px (эталон) обрывал линию на ~30-36px раньше стрелки - в mock.html линия заходит ПОД стрелку (right:2px при arw шириной 12px, right:0). */ /* Возврат 1 (24.09.2026, дефект 4): 1024-1183 у равных fr-колонок контентная ширина ~960px (.wrap 1024 - 2x32) - при базовых 18px "Данные в тот же день" (замер 221px) не оставлял >=28px запаса до следующей точки, а 4-я max-content колонка распухала до natural-width параграфа последнего шага (>260px по max-width базового правила), забирая место у первых трёх. 16px (замер Unbounded 600: 170/183/~221/182px) и max-width:200px на параграфе последнего шага возвращают >=28px запаса у каждой точки - числа в _task/pos-s2-0924/measure_pos.py. */ @media (min-width:1024px) and (max-width:1183px){ .pos-track-step h3{ font-size:16px } .pos-track-step.is-final p{ max-width:200px } } /* rule:heavy-animation-off-on-phones - на телефонах (<768, как и раньше у старой линии) и при prefers-reduced-motion дорожка неподвижна, но остаётся видимой (в отличие от прежнего варианта, который на мобильном просто скрывал .pos-track-line целиком). */ @media (max-width:767px), (prefers-reduced-motion:reduce){ .pos-track-line{ animation:none!important } } /* ---- #features (out/features/G2.html) ---- */ /* 24.09.2026 (news-0924, Никита: "у заголовка отступ снизу надо сделать больше" про #compare) - отступ h2->контент приведён к одной величине во всех разделах (features-head/pos-head/ pricing-head/cmp-h2 ниже): 32px на <768, 56px на >=768 (не меньше 56 на 1440, п.7 брифа). Там, где у контента под заголовком есть свой top-паддинг/margin (pos-track padding-top:32 на >=768, price-cards margin-top:8 всегда), головной margin-bottom уменьшен на эту же величину, чтобы СУММАРНЫЙ измеренный зазор (getBoundingClientRect) выходил одинаковым, а не только CSS-токен margin-bottom. */ .features-head{ margin-bottom:32px; max-width:680px } @media (min-width:768px){ .features-head{ margin-bottom:56px } } .features-head .sec-h2{ font-size:28px; line-height:1.15; color:#fff; font-weight:700 } @media (min-width:768px){ .features-head .sec-h2{ font-size:38px } } @media (min-width:1440px){ .features-head .sec-h2{ font-size:42px } } .sec-lead{ color:#D6D6D6; font-size:16px; line-height:1.55; margin:12px 0 0 } #features .grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px } @media (min-width:900px){ #features .grid{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px } } /* 20.09.2026 (audit-fix-0918 4e, page-lint "div.grid разнобой" 14-36px): пять типов карточек .plate/.frame/.card-b/.cell/.manager делили общий родитель #features .grid, но каждая несла свой padding - разница до 22px читалась как рваный ряд. --pad-card (:root, было объявлено, но нигде не применялось) - единый токен на все пять. */ /* 21.09.2026 (Никита: "Слишком токсично яркая плашка слева") - сплошная мятная плита под запретом (specs/site.md п.11 17.09.2026 "мята только акцент, сплошных мятных плит нет"; design-spec.md ~253 уже требовал заменить эту заливку - волна 4 не выполнила). Переводим на графит, как .card-b/.manager рядом, мята остаётся тонким акцентом на .role-eyebrow. */ #features .plate{ position:relative; background:var(--graphite-2); border:1px solid var(--home-card-line); border-radius:24px; padding:var(--pad-card); display:flex; flex-direction:column; justify-content:center; overflow:hidden } @media (min-width:900px){ #features .plate{ grid-column:span 5 } } #features .plate .idx{ position:absolute; top:8px; right:20px; font-family:var(--font-head); font-weight:800; font-size:100px; line-height:1; color:rgba(255,255,255,.04) } #features .plate .role-eyebrow{ font-family:var(--font-head); font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--mint); margin:0 0 12px; position:relative } #features .plate .role-h{ font-family:var(--font-head); font-size:21px; font-weight:700; color:#fff; line-height:1.2; margin:0 0 12px; position:relative } #features .plate .role-intro{ color:#D6D6D6; font-size:14.5px; line-height:1.5; margin:0 0 20px; position:relative } #features .role-list{ display:flex; flex-direction:column; gap:12px; position:relative } #features .role-list li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.5; font-weight:500 } #features .plate .role-list li{ color:#D6D6D6 } #features .plate .role-list .ic{ color:var(--mint); flex:0 0 auto; margin-top:2px } /* 17.09.2026 (Никита: "Почему разной высоты с дырами плашки") - в 12-колоночной сетке .frame и .card-b стоят в одном ряду, но .frame центрировал короткий список по высоте своей стретченной ячейки, оставляя пустоту сверху/снизу вместо равномерного заполнения - контент не меняем, только распределяем те же строки по всей высоте (align-items:stretch + justify-content: space-between на .mini-fc/.mini-dash ниже). */ #features .frame{ background:var(--graphite-2); border:1px solid var(--home-card-line); border-radius:24px; padding:var(--pad-card); box-shadow:0 24px 48px rgba(0,0,0,.35); display:flex; flex-direction:column; align-items:stretch } @media (min-width:900px){ #features .frame{ grid-column:span 7 } } /* 20.09.2026 (audit-fix-0918 4e, page-lint "div.frame снизу пусто 95px"): второй .frame (mini-fc + p.mock-cap, build.py) в 12-колоночной сетке растягивается по высоте соседнего .card-b (align-items:stretch родителя #features .grid), но ни .mini-dash, ни .mini-fc не росли вместе с ним - justify-content:space-between на них уже стоит (комментарий 17.09.2026 выше), но распределять нечего без flex-grow, вся лишняя высота проваливалась пустым хвостом ПОСЛЕ p.mock-cap. flex:1 - тот самый рост, которого не хватало. */ #features .frame > .mini-dash, #features .frame > .mini-fc{ flex:1 1 auto } #features .card-b{ background:var(--graphite-2); border:1px solid var(--home-card-line); border-radius:24px; padding:var(--pad-card); display:flex; flex-direction:column; position:relative; overflow:hidden } @media (min-width:900px){ #features .card-b{ grid-column:span 5 } } #features .card-b .idx{ position:absolute; top:0; right:16px; font-family:var(--font-head); font-weight:800; font-size:100px; line-height:1; color:rgba(255,255,255,.04) } #features .card-b .role-eyebrow{ color:var(--mint) } #features .card-b .role-h{ color:#fff; font-size:19px; font-weight:600 } #features .card-b .role-intro{ color:#D6D6D6; font-size:14.5px; line-height:1.5; margin:0 0 18px } #features .card-b .role-list li{ color:#D6D6D6 } #features .card-b .role-list .ic{ color:var(--mint); flex:0 0 auto; margin-top:2px } .mini-dash{ width:100%; display:flex; flex-direction:column; gap:14px; justify-content:space-between } .mini-dash-kpi{ display:flex; justify-content:space-between; align-items:baseline; background:#1D1D1D; border:1px solid #2A2A2A; border-radius:9px; padding:10px 14px } .mini-dash-kpi .l{ font-size:13px; color:#8A8A8A } .mini-dash-kpi .v{ font-family:var(--font-head); font-size:15px; font-weight:700; color:#fff } .mini-bars{ display:flex; align-items:flex-end; gap:6px; height:70px; flex:none } .mini-bars i{ flex:1; display:block; border-radius:3px 3px 0 0; background:#3A3A3A } .mini-bars i.now{ background:var(--mint) } .mini-fc{ width:100%; display:flex; flex-direction:column; gap:10px; justify-content:space-between } .mini-fc-row{ display:flex; justify-content:space-between; align-items:center; background:#1D1D1D; border:1px solid #2A2A2A; border-radius:9px; padding:12px 14px } .mini-fc-row .name{ font-size:13px; color:#fff; font-weight:600 } .mini-fc-row .fc{ font-size:13px; font-weight:700; color:#6FE3B8 } .mini-fc-row .fc.warn{ color:#F2B078 } #features .cell{ background:var(--graphite-2); border:1px solid var(--home-card-line); border-radius:20px; padding:var(--pad-card); display:flex; flex-direction:column; gap:10px; align-items:flex-start } @media (min-width:900px){ #features .cell{ grid-column:span 6 } } #features .cell .ic-wrap{ width:38px; height:38px; border-radius:11px; background:rgba(113,254,211,.12); display:flex; align-items:center; justify-content:center; color:var(--mint) } #features .cell h4{ font-family:var(--font-head); font-size:15px; font-weight:600; color:#fff; margin:6px 0 0 } #features .cell p{ color:#D6D6D6; font-size:13.5px; line-height:1.5; margin:0 } #features .manager{ background:var(--graphite-2); border:1px solid var(--home-card-line); border-radius:24px; padding:var(--pad-card) } @media (min-width:900px){ #features .manager{ grid-column:span 12 } } .manager-top{ margin-bottom:22px } #features .manager .role-eyebrow{ color:var(--mint) } #features .manager .role-h{ color:#fff; font-size:20px; font-weight:600; margin:0 } #features .manager .role-intro{ color:#D6D6D6; font-size:14.5px; line-height:1.5; margin:8px 0 0; max-width:420px } .manager-strip{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; padding:22px 16px 24px; border-top:1px solid var(--home-card-line) } @media (min-width:640px){ .manager-strip{ grid-template-columns:repeat(3,minmax(0,1fr)) } } .manager-strip li{ display:flex; flex-direction:column; gap:10px; align-items:flex-start } .manager-strip .ic-wrap{ width:34px; height:34px; border-radius:10px; background:rgba(113,254,211,.12); display:flex; align-items:center; justify-content:center; color:var(--mint) } .manager-strip span{ color:#D6D6D6; font-size:13.5px; line-height:1.45 } #features .bento-note{ background:transparent; border:1px solid var(--home-card-line); border-radius:16px; color:var(--home-muted-2); font-size:13.5px; line-height:1.6; margin:24px 0 0; padding:16px 14px; text-align:center } @media (min-width:640px){ #features .bento-note{ padding:18px 24px } } #features .bento-note b{ color:var(--mint); font-weight:600 } /* ---- #proof (out/proof/PR2.html) ---- */ .proof{ padding:56px 0 64px } @media (min-width:768px){ .proof{ padding:80px 0 } } .proof-head{ max-width:640px; margin:0 auto 32px; text-align:center } .proof-head h2{ font-size:26px; color:#fff; font-weight:700 } @media (min-width:768px){ .proof-head h2{ font-size:32px } } /* узкие телефоны (Никита 24.09.2026, дословно: "У тебя никогда не должно быть 4 строки заголовка. НИКОГДА") - тот же приём и та же граница, что у .hero h1 выше: на 360-414 этот H2 при 26px ложится в 4 строки, на 415-767 и десктопе уже <=3 без правок. */ @media (max-width:479px){ .proof-head h2{ font-size:20px } } /* тот же разрыв, что у .hero h1 выше - 320-358px даёт 4 строки при 20px, замерено тем же свипом */ @media (max-width:359px){ .proof-head h2{ font-size:17px } } .proof-lead{ color:#D6D6D6; font-size:16px; line-height:1.55; margin:12px 0 0 } .chain{ display:flex; align-items:center; justify-content:center; gap:0; margin:0 auto 36px; flex-wrap:wrap; max-width:920px } .pill{ display:flex; align-items:center; gap:10px; background:#232323; border:1px solid #333; border-radius:100px; padding:11px 18px 11px 12px; margin:4px } .pill-icon{ width:28px; height:28px; border-radius:50%; background:var(--mint-plate); display:flex; align-items:center; justify-content:center; flex:none } .pill-icon svg{ width:15px; height:15px; stroke:var(--graphite); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round } .pill span{ font-family:var(--font-head); font-size:13.5px; font-weight:600; color:#fff; white-space:nowrap } .chain-link{ width:24px; height:2px; background:#3A3A3A; flex:none } @media (max-width:520px){ .chain-link{ display:none } } .proof-copy{ max-width:680px; margin:0 auto; text-align:center } .proof-copy p{ font-size:15px; line-height:1.6; color:var(--home-muted) } .proof-copy p+p{ margin-top:12px } /* 24.09.2026 (news-0924, Никита: "явно просится форматирование текста... есть моменты, где нужен жирный шрифт") - слова текста не тронуты, только разметка (build.py). */ .proof-copy strong{ color:#fff; font-weight:600 } .proof-outro{ font-family:var(--font-head); font-weight:600; font-size:18px; color:#fff } @media (min-width:1440px){ .proof-outro{ font-size:23px } } .proof-outro .mint{ color:var(--mint) } .proof-photos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:900px; margin:32px auto 0 } @media (max-width:767px){ .proof-photos{ grid-template-columns:minmax(0,1fr); max-width:420px } } /* 21.09.2026 (Никита: "на кой хуй тут текст под фотками") - figcaption убран, фразы остались только в alt; карточка = само фото со скруглением. */ .proof-photo{ margin:0; background:var(--graphite-2); border:1px solid var(--home-card-line); border-radius:var(--radius); overflow:hidden } .proof-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block } /* .proof-shot (дубль дашборда) снят 24.09.2026 - см. build.py #proof item 3, правила были мёртвыми, удалены вместе с разметкой */ /* .info-answers* (раздел "Фудкост и касса: коротко по существу") снят целиком 24.09.2026 (news-0924, item 9) вместе с разметкой в build.py - решение Никиты 23.09.2026, specs/site.md:611. */ /* ---- #pricing-short (out/pricing-short/B.html) ---- */ #pricing-short{ padding:56px 0 64px } @media (min-width:768px){ #pricing-short{ padding:80px 0 } } .pricing-head{ display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; max-width:640px; margin:0 auto 32px } /* margin-bottom родителя и margin-top:8px у .price-cards ниже - соседние блочные margin, они СХЛОПЫВАЮТСЯ в максимум (не складываются), поэтому 8px у price-cards тут не нужно вычитать - замер (getBoundingClientRect) подтвердил: было 48px реального зазора при margin-bottom:40, не 40+8. */ @media (min-width:768px){ .pricing-head{ margin-bottom:56px } } /* 24.09.2026 (news-0924, item 1) - одна общая кнопка сразу под рядом карточек тарифа вместо кнопки в каждой карточке (build.py price_cards_html show_button=False + pricing_cta). */ .pricing-cta{ display:flex; justify-content:center; margin:24px 0 0 } .pricing-cta .btn{ min-width:260px } .pricing-h2{ font-family:var(--font-head); font-weight:700; font-size:28px; color:#fff; margin:0 } @media (min-width:768px){ .pricing-h2{ font-size:36px } } .pricing-lead{ font-size:15px; line-height:1.5; color:#DADADA; margin:0 } .price-row{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px } @media (min-width:768px){ .price-row{ grid-template-columns:repeat(3,minmax(0,1fr)) } } .price-row .price-card{ background:var(--graphite-2); border:1px solid #3A3A3A; border-radius:16px; padding:28px 24px; display:flex; flex-direction:column; gap:18px; box-shadow:none; opacity:1; transform:none } .price-row .price-card.accent{ border:1px solid var(--mint); box-shadow:0 0 0 1px rgba(113,254,211,.25), 0 24px 48px rgba(113,254,211,.08) } .price-card-top{ display:flex; flex-direction:column; gap:6px } .cap-top{ font-size:13.5px; color:var(--home-muted); font-weight:500 } .price-row .num{ font-family:var(--font-head); font-weight:700; font-size:28px; color:#fff; line-height:1.15 } @media (min-width:768px){ .price-row .num{ font-size:32px } } .price-row .num .unit{ font-family:var(--font-text); font-weight:600; font-size:15px; color:var(--home-muted); margin-left:4px } .price-row .price-card.accent .num{ color:var(--mint) } .price-list{ display:flex; flex-direction:column; gap:11px; padding:14px 16px 16px; border-top:1px solid #3A3A3A; flex:1 } .price-item{ display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; color:#DADADA } .price-item svg{ flex:none; margin-top:2px; color:var(--mint) } .price-row .badge{ position:absolute; top:-13px; left:22px; background:var(--mint); color:var(--graphite); font-weight:700; font-size:13px; letter-spacing:.02em; padding:5px 13px; border-radius:999px } .price-row .price-card{ position:relative } .price-row .btn{ border-radius:12px; font-weight:600; font-size:14px; padding:13px 18px; width:100%; height:auto } .price-row .btn.primary{ background:var(--mint); color:var(--graphite) } .price-row .btn.ghost{ background:transparent; color:#fff; border:1px solid #4A4A4A } /* ---- #faq вариант 2 (24.09.2026, разнос дизайна главной, Никита выбрал 23.09.2026: "Второй вариант фака берем") - слева заголовок+CTA (sticky на десктопе), справа аккордеон. Портировано из R2 (_task/rhythm-live-0923/build.py render_css), токены страницы, без своих цветов. ---- */ .faq-v2{ padding:56px 0 64px } @media (min-width:768px){ .faq-v2{ padding:80px 0 } } .faq-v2-grid{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:56px; align-items:start } @media (max-width:860px){ .faq-v2-grid{ grid-template-columns:1fr; gap:32px } } .faq-v2-left h2{ font-family:var(--font-head); font-weight:700; font-size:32px; margin:0 0 12px; color:#fff } /* 25.09.2026 (Никита, кадр: левая колонка съезжает ниже последнего вопроса) - липкость .faq-v2-left снята. Ячейка грида выше списка на резерв под самый длинный ответ (min-height из main.js) - липкая колонка доезжала в этот пустой низ. Секция влезает в экран целиком, липкость давала только артефакты (до этого - заголовок под шапкой). */ .faq-v2-left .lead{ font-size:15px; line-height:1.5; color:var(--home-muted); margin:14px 0 24px } .faq-v2-tg{ display:inline-flex } .faq-v2-item{ border-bottom:1px solid rgba(255,255,255,.08) } .faq-v2-item summary{ list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:14px; padding:20px 0 } .faq-v2-item summary::-webkit-details-marker{ display:none } .faq-v2-item .chev{ width:9px; height:9px; margin-top:6px; border-right:2px solid var(--mint); border-bottom:2px solid var(--mint); transform:rotate(45deg); transition:transform .2s ease; flex:0 0 auto } .faq-v2-item[open] .chev{ transform:rotate(-135deg); margin-top:10px } .faq-v2-item .q{ font-family:var(--font-text); font-weight:600; font-size:16px; line-height:1.4; color:#fff } .faq-v2-item .a{ font-size:14px; line-height:1.65; color:var(--home-muted); margin:0; padding:0 0 22px 23px } @media (max-width:767px){ .faq-v2-left h2{ font-size:26px } .faq-v2-item .q{ font-size:15px } } /* Аккордеон - build.py accordion_html() (24.09.2026: без живых вызовов после удаления /tarify/ и /kalkulyator-fudkosta/, единственных потребителей - оставлено как готовый компонент, элементов .accordion-item в сборке сейчас нет). Не было ни одного правила на .accordion-panel вне prefers-reduced-motion, все 5 ответов рендерились открытыми одновременно (wave1-frontend row 20). Закрыт grid-rows 0fr/1fr - тот же приём, что упомянут в комментарии accordion_html: рост сразу под контент, без measure в JS. */ .accordion-item{ border-bottom:1px solid var(--line) } .accordion-item:first-child{ border-top:1px solid var(--line) } .accordion-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 16px; background:none; border:0; text-align:left; cursor:pointer; font-family:var(--font-text); font-size:15px; font-weight:600; color:var(--text); } .accordion-q .chevron{ flex:none; position:relative; width:20px; height:20px } .accordion-q .chevron::before,.accordion-q .chevron::after{ content:""; position:absolute; left:3px; right:3px; top:9px; height:2px; background:var(--text-2); transition:transform 200ms ease; } .accordion-q .chevron::after{ transform:rotate(90deg) } .accordion-item.is-open .accordion-q .chevron::after{ transform:rotate(0deg) } .accordion-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 240ms ease } .accordion-item.is-open .accordion-panel{ grid-template-rows:1fr } .accordion-panel-inner{ overflow:hidden } .accordion-panel-inner p{ margin:0; padding:0 4px 18px; color:var(--text-2); font-size:14px; line-height:1.6 } @media (prefers-reduced-motion:reduce){ .accordion-panel{ transition:none } .accordion-q .chevron::before,.accordion-q .chevron::after{ transition:none } } /* ---- #start (out/start/S3b.html) ---- */ /* 24.09.2026 (разнос дизайна главной, финал f1 подтверждён Никитой "Форма - явно первый вариант") - паддинги подтянуты под тюнинг R2, разметка и тексты #start не меняются (Don't do: "Не менять тексты"). */ #start{ padding:56px 0 64px } @media (min-width:768px){ #start{ padding:80px 0 } } .rule-top{ border:none; border-top:1px solid #3A3A3A; margin:0 0 40px; width:100% } @media (min-width:768px){ .rule-top{ margin:0 0 52px } } .start-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:32px } @media (min-width:768px){ .start-grid{ grid-template-columns:minmax(0,1fr) 1px minmax(0,240px); column-gap:40px; align-items:center } } @media (min-width:1024px){ .start-grid{ column-gap:56px; grid-template-columns:minmax(0,1fr) 1px minmax(0,272px) } } .col-divider{ display:none; background:#3A3A3A; align-self:stretch } @media (min-width:768px){ .col-divider{ display:block } } .col-label{ display:flex; flex-direction:column; gap:14px } .col-label .eyebrow{ font-family:var(--font-head); font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--mint); text-transform:uppercase } .col-label .offer{ font-size:15px; line-height:1.6; color:var(--home-muted); max-width:260px } @media (max-width:767px){ .col-label .offer{ max-width:none } } .col-main{ display:flex; flex-direction:column; gap:24px } .start-h2{ font-size:26px; line-height:1.25; color:#fff; font-weight:700 } @media (max-width:359px){ .start-h2{ font-size:24px } } @media (min-width:768px){ .start-h2{ font-size:32px } } /* 768-899: .col-main - всего 303px (.start-grid резервирует до 240px+40 gap под колонку-лейбл), на 32px заголовок «Узнайте за 7 дней, где ресторан теряет деньги» уходил в 4 строки - прямое нарушение "никогда 4 строки заголовка" (Никита 24.09.2026, report-qa.md defect 4). С 900px колонка уже даёт 3 строки на 32px без правки. */ @media (min-width:768px) and (max-width:899px){ .start-h2{ font-size:24px } } @media (min-width:1440px){ .start-h2{ font-size:38px } } .start-h2 .num{ color:var(--mint) } .cta-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap } .cta-row .btn.primary{ border-radius:12px; font-weight:700; font-size:16px; padding:16px 36px; background:var(--mint); color:var(--graphite); height:auto } .cta-row .btn.primary:hover{ background:#8bffdf } @media (max-width:767px){ .cta-row .btn.primary{ width:100% } } .cta-row .sub{ font-size:13.5px; color:var(--home-muted) } /* ================= misc ================= */ .skip-link{ position:absolute; left:-9999px; top:0; background:var(--mint); color:var(--graphite); padding:8px 16px; z-index:200 } .skip-link:focus{ left:8px; top:8px } /* ================= тарифные карточки (.price-cards/.price-card, #pricing-short) ================= */ .price-cards{ display:grid; gap:20px; margin-top:8px; text-align:left } @media (min-width:1024px){ .price-cards{ grid-template-columns:repeat(3,minmax(0,1fr)) } } .price-card{ position:relative; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; opacity:0; transform:translateY(16px); transition:opacity 350ms cubic-bezier(0,0,0,1),transform 350ms cubic-bezier(0,0,0,1); } /* узкие телефоны (agents/frontend.md, «мобильный - не сжатый десктоп»): при 24px паддинга с обеих сторон текстовой колонке на 320-360px не хватало 2-16px до 80% ширины (240 из нужных 256px на 320) - тот же приём точечного паддинга на узкой ширине, что уже применён к .ms-card (padding-left/right:14px) в этом же файле */ @media (max-width:399px){ .price-card{ padding:24px 16px } } .price-card.is-visible{ opacity:1; transform:translateY(0) } .price-card:nth-child(2){ transition-delay:80ms } .price-card:nth-child(3){ transition-delay:160ms } .price-card.is-featured{ background:var(--graphite-2); border:1px solid var(--mint) } /* 21.09.2026 (Никита "Почему в тарифах только 1 карточка блять..."): 3 карточки вернули на место переключателя (audit-fix-0918 п.14, отменено - решение шло без гейта "Никита смотрит пачку 2"); бейдж карточки не был стилизован под голый .price-card - раньше существовал только у одиночной карточки-переключателя (.price-card--single .badge, синий-старая-палитра сняли 17.09 п.15), сюда перенесён в мятном виде без капса, без синего. */ .price-card .badge{ position:absolute; top:-13px; left:22px; display:inline-block; background:var(--mint); color:var(--graphite); font-weight:700; font-size:13px; letter-spacing:.02em; padding:5px 13px; border-radius:999px } .price-card .price-num{ font-size:28px; font-weight:800; display:block } /* price-cond идёт ДО price-num в разметке (подпись периода над ценой, pairs/05-pricing-short.jpg "было") - отступ снизу, не сверху */ .price-card .price-cond{ display:block; color:var(--text-2); font-size:14px; margin:0 0 6px } .price-card .price-total{ display:block; color:var(--text-2); font-size:13px; margin-bottom:16px } .price-card .price-total:empty{ display:none; margin:0 } .price-card.is-featured .price-total{ color:var(--text-2) } .price-card ul{ margin-bottom:20px } .price-card ul li{ font-size:14px; color:var(--text-2); padding-left:18px; position:relative; margin-bottom:8px } .price-card ul li::before{ content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--accent) } .price-card .btn{ width:100% } @media (prefers-reduced-motion:reduce){ .price-card{ opacity:1 !important; transform:none !important } } /* ================= policy ================= */ .policy-body{ max-width:720px; line-height:1.6; color:var(--text-2) } .policy-body h2{ font-size:20px; color:var(--text); margin:32px 0 12px } .policy-body h2:first-child{ margin-top:0 } .policy-body p{ margin-bottom:16px } .policy-body ul{ margin-bottom:16px } .policy-body ul li{ position:relative; padding-left:18px; margin-bottom:8px } .policy-body ul li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--muted) } .policy-date{ color:var(--text-2); font-size:14px; margin-bottom:24px } /* ---- /policy/ по виду шаблона агентства Креатек (crea-tec.ru/privacy-policy/), 17.09.2026: номерной бейдж-«уголок» слева от заголовка вместо номера в тексте, разделы разделены линией, cookie-раздел - двухколоночные инфо-карточки. Заголовки НЕ капсом (в отличие от эталона) - правило дома rule:no-caps-in-ui-text, расхождение с эталоном осознанное. */ .pol-intro{ margin-bottom:28px } .pol-section{ position:relative; padding:28px 0; border-top:1px solid var(--line) } .pol-section:first-of-type{ border-top:none; padding-top:0 } .pol-num{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; margin:0 0 10px; border:1px solid var(--mint); border-radius:8px; font-size:12.5px; font-weight:700; color:var(--mint) } .pol-section h2{ margin:0 0 14px } .pol-services{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0 0 16px } .pol-services > div{ padding:16px 18px; border:1px solid var(--line); border-radius:10px } .pol-services h3{ margin:0 0 8px; font-size:13px; font-weight:700; letter-spacing:.02em; color:#EDEDED } .pol-services p{ margin:0; font-size:14px; line-height:1.55; color:var(--home-muted) } @media (max-width:639px){ .pol-services{ grid-template-columns:minmax(0,1fr) } } /* ================= thanks ================= */ .thanks-block{ text-align:center; max-width:520px; margin:0 auto } .thanks-block p{ color:var(--text-2); margin:16px 0 28px } .thanks-block p a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px } /* ================= footer legal / contacts (row 10) ================= */ .footer-contacts{ display:flex; flex-wrap:wrap; gap:6px 16px; justify-content:center; color:var(--muted); font-size:14px } @media (min-width:1024px){ .footer-contacts{ justify-content:flex-start } } .footer-contacts a{ color:var(--muted) } .footer-contacts a:hover{ color:var(--accent) } .footer-legal-entity{ color:var(--muted); font-size:13px; line-height:1.5; max-width:720px; text-align:center } @media (min-width:1024px){ .footer-legal-entity{ text-align:left } } /* ================= header: telegram utility link (row 10) ================= */ .header-tg{ display:none; align-items:center; gap:6px; font-size:14px; color:var(--text-2); white-space:nowrap } /* --muted #6b7488 = 4.14:1, --text-2 #4a536b ≥ 4.5:1 (qa-wave1 дефект 1) */ @media (min-width:1024px){ .header-tg{ display:flex } } .header-tg:hover{ color:var(--accent) } /* ================= cookie consent bar (row 1) ================= */ .cookie-bar{ position:fixed; left:0; right:0; bottom:0; z-index:150; background:var(--graphite); color:#fff; padding:16px; box-shadow:0 -4px 24px rgba(0,0,0,.18); transform:translateY(110%); transition:transform 250ms ease } .cookie-bar.is-visible{ transform:translateY(0) } .cookie-bar .wrap{ display:flex; flex-direction:column; gap:14px; align-items:stretch; max-width:960px; margin:0 auto; padding:0 } @media (min-width:768px){ .cookie-bar .wrap{ flex-direction:row; align-items:center; justify-content:space-between; gap:24px } } .cookie-bar p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--home-muted) } .cookie-bar p a{ color:#fff; text-decoration:underline; text-underline-offset:3px } .cookie-bar-ctas{ display:flex; gap:10px; flex:0 0 auto } .cookie-bar .btn.ghost{ border-color:rgba(255,255,255,.3); color:#fff } @media (prefers-reduced-motion:reduce){ .cookie-bar{ transition:none } } /* ================= checkbox поля (row 9: согласие на обработку ПДн) ================= */ .field-hint{ margin-top:6px; font-size:12.5px; color:var(--text-2); line-height:1.4 } .field-check{ display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.5; color:var(--text-2) } .field-check input[type="checkbox"]{ margin-top:2px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--accent) } .field-check a{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px } /* qa-wave2 №5: на узких экранах крошка сжимается до 28px и режется - прячем до 480, навигация есть в бургере */ @media (max-width:479px){ .site-header .header-center{ display:none } } /* ================= reduced motion, consolidated (row 215) ================= */ @media (prefers-reduced-motion:reduce){ .modal-scrim, .modal, .accordion-panel, .accordion-q .chevron, .btn, .mobile-cta, .nav-toggle span { transition:none !important } } /* ================= print (row 264) ================= */ @media print{ .site-header, .mobile-cta, .modal-scrim, .trial-strip, .cookie-bar, .nav-toggle, .hero-shot::before, .footer-made, .accordion-q .chevron { display:none !important } * { box-shadow:none !important; text-shadow:none !important; background:#fff !important; color:#111 !important } a { text-decoration:underline } .wrap { max-width:100% !important; padding:0 !important } } /* Кнопки главной идут на мяту: глобальный --accent-ink синий и на графите читается как чужой (Никита 08.09.2026: «Почему кнопка синяя») */ .page-home .btn.primary{ background:var(--mint); color:var(--graphite) } .page-home .btn.primary:hover{ background:#5CE3BC } .page-home .btn.primary:focus-visible{ outline:2px solid var(--mint); outline-offset:2px } .page-home .btn.ghost{ color:#fff; border-color:rgba(255,255,255,.22) } .page-home .btn.ghost:hover{ border-color:var(--mint); color:var(--mint) } .page-home .btn.ghost:focus-visible{ outline:2px solid var(--mint); outline-offset:2px } .page-home .site-nav a:focus-visible,.page-home .header-tg:focus-visible, .page-home .nav-toggle:focus-visible{ outline:2px solid var(--mint); outline-offset:2px } /* Попап и мятные плиты: яркая мята заливкой режет глаза (сквозное решение Никиты 07.09.2026), а мятный знак на мятной плите сливается - виден только кусок «цифры» (Никита 08.09.2026) */ .modal--onboard .plate{ background:var(--mint-plate) } .modal--onboard .plate .sub{ background:rgba(30,30,30,.10); color:rgba(30,30,30,.86) } /* фокус и активные поля на главной - мятные, синий accent остаётся только на внутренних страницах */ .page-home input:focus,.page-home select:focus,.page-home textarea:focus, .modal--onboard input:focus,.modal--onboard select:focus,.modal--onboard textarea:focus{ outline:none; border-color:var(--mint); box-shadow:0 0 0 2px rgba(113,254,211,.35) } .modal--onboard .btn.primary{ background:var(--mint); color:var(--graphite) } .modal--onboard .btn.primary:hover{ background:#5CE3BC } /* Подпись «Сделано в Креатек» была мельче и другим шрифтом, чем остальной подвал */ .site-footer.dark .footer-made{ font-family:var(--font-text); font-size:15px; font-weight:500; gap:10px } .site-footer.dark .footer-made img{ height:22px } /* Ховер по пунктам «Чем Цифра отличается» (Никита 08.09.2026: «сюда определённо нужен ховер») */ #compare .cmp-row{ transition:background .18s ease, transform .18s ease; border-radius:14px } #compare .cmp-row:not(.feature):hover{ background:var(--graphite-2); transform:translateX(4px) } #compare .cmp-row:not(.feature):hover .num{ color:var(--mint) } #compare .cmp-row:not(.feature):hover h3{ color:#fff } /* Шапка 1:1 с утверждённым макетом out/header/G3.html: знак 120px, этажи 98 и 57, меню по центру с мятным подчёркиванием активного. Отличие от макета одно и вынужденное - у нас шапка липкая, поэтому первому экрану отдан отступ на её высоту, иначе она режет чипы. */ @media (min-width:1024px){ .site-header.dark .row-top{ height:72px; column-gap:24px } .site-header.dark .brand img{ height:auto; width:100px } .site-header.dark .header-cta{ gap:24px } .site-header.dark .header-tg{ font-size:14px; color:#C7CBCB } .site-header.dark .btn.primary{ height:44px; padding:0 26px; border-radius:6px; font-size:14px; font-weight:700 } .site-header.dark .row-nav{ height:57px; justify-content:center; border-top:1px solid #313131 } .site-header.dark .row-nav .site-nav,.site-header.dark .row-nav{ gap:40px } .site-header.dark .row-nav a{ position:relative; text-decoration:none; font-size:13px; font-weight:500; letter-spacing:.04em; color:#B5B5B5; padding-bottom:6px } .site-header.dark .row-nav a:hover,.site-header.dark .row-nav a.is-active{ color:#fff } .site-header.dark .row-nav a.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--mint) } /* padding-bottom под подчёркивание без пары сверху сдвигал текст на 3px выше центра строки (Никита 16.09.2026) */ .site-header.dark .row-nav a{ padding-top:6px } .page-home #top{ padding-top:40px } } .page-home #top{ padding-top:24px } .page-home section[id]{ scroll-margin-top:88px } @media (min-width:1024px){ .page-home section[id]{ scroll-margin-top:73px } } /* «Один день с Цифрой»: строка держала min-height 420px и центрировала пару, из-за чего между лентой шагов и контентом висела пустая полоса (Никита 08.09.2026: «отвратительно пустой») */ @media (min-width:768px){ .page-home .day-row{ min-height:0; padding:28px 24px; align-items:center } } /* Лента шагов «дня» липла к top:0 и пряталась под липкой шапкой - скролл-сюжет был не виден (Никита 08.09.2026: «почему скролла одного дня тут всё ещё не существует»). Теперь она встаёт ПОД шапкой и висит, пока идёт раздел. */ /* Линия над навигацией обрывалась по контенту (160..1280), в макете она идёт по краю контейнера (128..1312) - вытягиваем её на ширину wrap вместе с отступами */ @media (min-width:1024px){ .site-header.dark .row-nav{ margin-left:-32px; margin-right:-32px } } /* Самолётик рядом с «Написать в Telegram»: Никита просил починить значок, а не убирать его - контурная иконка в цвет текста, выровнена по строке, гаснет и загорается вместе со ссылкой */ @media (min-width:1024px){ /* на мобиле ссылка скрыта - inline-flex вне медиа включал её и рвал 375 */ .site-header .header-tg{ display:inline-flex; align-items:center; gap:8px } } .site-header .header-tg .tg-ico{ flex:none; opacity:.85 } .site-header .header-tg:hover .tg-ico{ opacity:1 } /* `.site-header.dark .header-tg{display:inline}` перебивал flex, и самолётик прилипал к тексту */ @media (min-width:1024px){ .site-header.dark .header-tg{ display:inline-flex; align-items:center; gap:8px } } /* Числовая сверка с макетом G3 (08.09.2026): первый этаж шёл по 160..1280, а линия второго - по 128..1312, этажи не совпадали по краю. Ссылки меню растягивались на всю высоту строки, из-за чего подчёркивание активного уезжало вниз. Кнопка теряла 11px ширины на padding. */ @media (min-width:1024px){ .site-header.dark .row-top{ margin-left:-32px; margin-right:-32px } .site-header.dark .row-nav{ align-items:center } .site-header.dark .row-nav a{ align-self:center; height:auto } .site-header.dark .btn.primary{ padding-left:26px; padding-right:26px } } /* Никита 09.09.2026: «нам нужно оставить только нижнюю часть header, где навигация» - решение не тронуто. 25.09.2026 (walk-0925 п.2/п.3, Никита: "в стикер-навигации нет кнопки заказать демо", "значок Телеграма тоже оставить") - top:-72px укатывал первый этаж (демо-кнопку и Telegram) ЗА экран вместе с логотипом: кнопки были в DOM, но не в кадре. Замена: top:-72px снят (шапка снова sticky top:0, как база), а первый и второй этаж на .is-scrolled (тот же класс, что красит фон при скролле, JS onScrollHeader) становятся display:contents - их дети собираются в ОДИН flex-ряд .wrap. Лого скрыт (как и раньше укатывался), бургер и так display:none на 1024+. Telegram-ссылка сжимается до иконки (font-size:0 гасит текстовый узел, svg 18x18 в атрибутах не зависит от font-size), паддинг 11px даёт зону клика 40x40. Демо-кнопка (.header-cta) уходит в конец строки (order+margin-left:auto). Непрокрученное состояние ни одно из этих правил не трогает - они все под .is-scrolled. Ни один элемент не добавлен/удалён (только display/order/font-size). */ @media (min-width:1024px){ .site-header.dark.is-scrolled .row-top, .site-header.dark.is-scrolled .row-nav{ display:contents } .site-header.dark.is-scrolled .wrap{ flex-direction:row; align-items:center; justify-content:flex-start; gap:40px } .site-header.dark.is-scrolled .brand{ display:none } .site-header.dark.is-scrolled .header-cta{ order:2; margin-left:auto; gap:16px } .site-header.dark.is-scrolled .header-tg{ font-size:0; gap:0; padding:11px } /* 25.09.2026 (frontend-3, Никита: "в стикер-навигации нет кнопки заказать демо. почему кнопка в стикере не там?" - причина оркестратора: полоса 45px, кнопка 44px, воздуха 0 сверху и снизу) - .wrap раньше не имел вертикального паддинга в прокрученном состоянии (базовое правило .site-header.dark .wrap даёт padding-top/bottom:0), полоса схлопывалась ровно по высоте кнопки. Паддинг 10px даёт >=8px до верха экрана и до низа полосы; кнопка ужата до 40px (в допуске 36-40px брифа), под icon header-tg (40x40 c padding:11px) - высота полосы 10+40+10=60px + бордер 1px = 61px, вписывается в потолок 64px. Непрокрученное состояние это правило не трогает. */ .site-header.dark.is-scrolled .wrap{ padding-top:10px; padding-bottom:10px } .site-header.dark.is-scrolled .btn.primary{ height:40px } } /* Волна 2 цикла v5 (10.09.2026), список ошибок Никиты */ /* id 44: переключатель срока и его правки на 320 сняты вместе с самим переключателем 21.09.2026 */ /* id 45: между карточкой тарифа и следующим блоком висело 350-400px пустоты на 1440 */ @media (min-width:1024px){ .price-cards{ margin-bottom:8px } } /* id 32: КБЖУ шло голыми числами через слэш - без подписей непонятно, что есть что */ .ms-kbju{ display:inline-flex; gap:8px; flex-wrap:wrap; justify-content:flex-end } .ms-kbju b{ font-weight:700; font-size:14px; color:#fff } /* 18.09.2026 (audit-fix-0918 п.5, qa-5 п.31): было 9.5px - ниже пола 13px для видимого текста; подписи единиц КБЖУ подняты до 13px, тег фиксированный весом/цветом не трогали. */ .ms-kbju b span{ font-size:13px; font-weight:600; letter-spacing:.03em; color:#8A8A8A; margin-left:2px } /* id 28: четыре строки #compare шли одинаковыми блоками «номер + заголовок + абзац» - решётка. Даём иерархию средствами вёрстки: первый аргумент крупнее, последние три компактнее и короче - список, а не три одинаковых карточки. Компактность рядов 3-5 не гейтится шириной (17.09.2026: находка держалась и на 320, и на 768 - размер убирал разницу только относительно 1-2 ряда, между собой 3-5 оставались одинаковыми "картами"); первый ряд укрупняется только от 768, где для этого есть простор по ширине. */ #compare .cmp-row:nth-child(n+3){ padding-top:14px; padding-bottom:14px; gap:12px } #compare .cmp-row:nth-child(n+3) h3{ font-size:15px; margin-bottom:2px } #compare .cmp-row:nth-child(n+3) p{ font-size:13px; opacity:.85 } #compare .cmp-row:nth-child(n+3) .num{ font-size:13px; flex:0 0 20px } @media (min-width:768px){ #compare .cmp-row:first-child h3{ font-size:26px; line-height:1.2 } #compare .cmp-row:first-child p{ font-size:16px; max-width:46em } } /* Хвост волны 2 (10.09.2026): что осталось в page-lint после первой пачки */ /* Содержимое раскрытого аккордеона и FAQ-плашек прилипало к краям */ .accordion-item.is-open .accordion-panel-inner{ padding:0 16px 16px } /* приёмка волн 2-3: боковой отступ вопроса был 4px против 24-32 у соседних плашек */ @media (min-width:768px){ .accordion-item.is-open .accordion-panel-inner{ padding:0 20px 18px } } /* id 28 (хвост): три оставшиеся строки сравнения по-прежнему шли одинаковым столбиком - разводим последние две в пару колонок, ритм перестаёт быть простынёй */ @media (min-width:900px){ #compare .cmp-rows{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px } #compare .cmp-row:first-child,#compare .cmp-row.feature{ grid-column:1 / -1 } } /* Волна 3 цикла v5 (10.09.2026): полировка по списку ошибок Никиты */ /* 62-64: плашки тянулись на всю высоту колонки и висели пустотой снизу - тогда лечили тем, что ОТКЛЮЧАЛИ стретч (align-self:start). 17.09.2026 Никита попросил обратное: "разной высоты с дырами плашки" - карточки в ряду ОДНОЙ высоты, без провалов. Снят конфликт: .frame снова тянется на всю строку (grid stretch по умолчанию + align-items:stretch, row647), а видимая пустота убрана не отключением стретча, а распределением того же контента на всю высоту (.mini-fc/.mini-dash justify-content:space-between, row665/672) - контент не менялся. .bento-note не задета - она не элемент грида (идёт после .grid), align-self на ней не работал. */ #features .bento-note{ min-height:0 } /* 65, 66: на 320-390 карточка техкарты и подпись под ней теряли правый отступ */ @media (max-width:479px){ .ms-card{ padding-left:14px; padding-right:14px } .ms-ttk-note{ padding-right:2px } } /* 17.09.2026 верификация: текстовой колонке в #faq/#features/#pos на 320-390 не хватало 4-10px из-за складывающихся отступов .wrap + плашки - режем плашку, не .wrap (он общий) */ @media (max-width:479px){ #faq .plate{ padding:0 14px } /* 20.09.2026 (audit-fix-0918 4e, page-lint "div.grid разнобой 14-40px"): эта медиа-правка резала padding только у .plate (текстовой колонке не хватало 4-10px, комментарий выше) - четыре других типа карточек #features .grid (.frame/.card-b/.cell/.manager) на узких экранах оставались на var(--pad-card)=24px, разница и была разнобоем. Тот же приём (20px 14px), но на всех пяти сразу - единый токен верен на любой ширине, не только 900+. */ #features .plate, #features .frame, #features .card-b, #features .cell, #features .manager{ padding:20px 14px } } /* 67: в открытом мобильном меню две трети экрана были пустыми - даём второе действие внизу */ .mobile-nav .mobile-nav-foot{ margin-top:auto; padding:20px 0 28px; border-top:1px solid #313131; display:flex; flex-direction:column; gap:12px } .mobile-nav .mobile-nav-foot a{ border-bottom:none; padding:0 } .mobile-nav .mobile-nav-foot .btn{ width:100% } /* 68: подсказке в попапе на 320 не хватало ширины из-за отступов родителя */ @media (max-width:359px){ .modal--onboard{ padding-left:14px; padding-right:14px } .modal-hint{ margin-left:-4px; margin-right:-4px } } /* Кнопка в подвале мобильного меню держала фиксированную высоту и резала текст в две строки */ .mobile-nav .mobile-nav-foot .btn{ height:auto; min-height:48px; padding:13px 16px; line-height:1.25; white-space:normal; text-align:center } .mobile-nav .mobile-nav-foot{ padding-bottom:36px } .mobile-nav .mobile-nav-foot a:not(.btn){ color:#DADADA; text-align:center } @media (min-width:768px){ .accordion-q{ padding-left:20px; padding-right:20px } } /* Никита 10.09.2026: «Синий цвет куков не подходит» - тёмно-синяя плашка на графитовой главной читалась как чужой элемент. Тот же графит и та же линия, что у шапки. */ .cookie-bar{ border-top:1px solid #3A3A3A } /* Никита 10.09.2026: «Посмотри на левую часть попапа - это выглядит отвратительно». Была сплошная мятная плита: синий знак на мятном, чёрный заголовок, белый текст на полупрозрачной зелёной подложке и пустая нижняя половина. Собираем колонку в тон правой половине: графит, мятный знак (штатная пара), белый заголовок, серый текст, мятный акцент-линия слева и три коротких факта вместо висящей подложки. */ .modal--onboard .plate{ background:linear-gradient(160deg,#232323,#191919); padding:32px 30px; flex-direction:column; align-items:stretch; gap:18px; position:relative; } .modal--onboard .plate::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--mint) } .modal--onboard .plate-logo{ height:38px } .modal--onboard .plate h2{ color:#fff; font-size:25px; line-height:1.15; margin:0 0 10px } .modal--onboard .plate .sub{ background:none; padding:0; border-radius:0; display:block; max-width:none; color:var(--home-muted); font-size:14px; line-height:1.55; } .modal--onboard .plate-facts{ list-style:none; margin:auto 0 0; padding:0; display:flex; flex-direction:column; gap:10px } .modal--onboard .plate-facts li{ display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.45; color:#DADADA } .modal--onboard .plate-facts li::before{ content:""; flex:none; width:6px; height:6px; margin-top:6px; border-radius:50%; background:var(--mint) } @media (max-width:1023px){ .modal--onboard .plate{ padding:22px 20px; gap:12px } .modal--onboard .plate-facts{ display:none } } /* Никита 10.09.2026: «Выбор кол-ва заведений базовый - это плохо», «нужен наш красивый кастомный». Нативный select рисуется системой и в тёмной теме выглядит чужим - подменяем своей кнопкой со списком; сам select остаётся в разметке и уезжает с глаз (форма и автозаполнение работают как раньше). */ .nice-select{ position:relative } .nice-select select{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px } .nice-select .ns-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--field); border:1px solid var(--field-line); border-radius:12px; padding:0 16px; height:52px; color:var(--text); font-family:var(--font-text); font-size:15px; text-align:left; cursor:pointer; transition:border-color 150ms; } .modal--onboard .nice-select .ns-btn{ background:#1B1B1B; border-color:#3A3A3A; color:#fff } .nice-select .ns-btn:hover{ border-color:var(--mint) } .nice-select .ns-btn:focus-visible{ outline:2px solid var(--mint); outline-offset:2px } .nice-select .ns-btn[aria-expanded="true"]{ border-color:var(--mint) } .nice-select .ns-btn.is-placeholder{ color:#8A8A8A } .nice-select .ns-caret{ flex:none; width:10px; height:10px; border-right:2px solid var(--mint); border-bottom:2px solid var(--mint); transform:rotate(45deg) translateY(-2px); transition:transform 180ms } .nice-select .ns-btn[aria-expanded="true"] .ns-caret{ transform:rotate(-135deg) translateY(-2px) } .nice-select .ns-list{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20; margin:0; padding:6px; list-style:none; background:#1B1B1B; border:1px solid #3A3A3A; border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.45); max-height:264px; overflow-y:auto; } .nice-select .ns-list[hidden]{ display:none } .nice-select .ns-list li{ padding:11px 12px; border-radius:8px; font-size:14.5px; color:#EDEDED; cursor:pointer; } .nice-select .ns-list li[aria-selected="true"]{ color:var(--graphite); background:var(--mint); font-weight:600 } .nice-select .ns-list li.is-cursor:not([aria-selected="true"]){ background:#2A2A2A } @media (prefers-reduced-motion:reduce){ .nice-select .ns-caret{ transition:none } } /* Никита 10.09.2026: «с отступами беда на третьем шаге + маска телефона обрезана». Согласие прижималось к полю, кнопки шли разной высоты, длинная надпись ломалась в две строки и вылезала за кнопку, плейсхолдер обрезался в узком поле. */ .modal--onboard .field-check{ margin:18px 0 16px; align-items:center } .modal--onboard input::placeholder{ text-overflow:ellipsis } /* Плейсхолдер «Не выбрано» подсвечивался мятным как настоящий выбор - гасим */ .nice-select .ns-list li[data-value=""][aria-selected="true"]{ background:transparent; color:#8A8A8A; font-weight:400 } /* ============ audit-fix-0918, пачка 4b - секции ниже сцены #day ============ */ /* подпись под мок-карточкой (не заголовок карточки) - #features блок 6 */ .mock-cap{ font-size:13px; color:var(--home-muted); text-align:center; margin:10px 0 0 } /* явный номер "03" на блоке "Управляющему" - раньше сквозная нумерация обрывалась на 02 */ #features .manager{ position:relative; overflow:hidden } #features .manager .idx{ position:absolute; top:0; right:16px; font-family:var(--font-head); font-weight:800; font-size:100px; line-height:1; color:rgba(255,255,255,.04) } /* #compare вариант A - три карточки "вручную / с Цифрой" (design-spec.md #compare) */ .cmp-h2{ text-align:center; margin-bottom:32px } @media (min-width:768px){ .cmp-h2{ margin-bottom:56px } } .cmp-frame{ text-align:center; max-width:640px; margin:0 auto 32px; font-size:15px; line-height:1.5; color:var(--home-muted) } .cmp-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px } @media (min-width:768px){ .cmp-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px } /* 25.09.2026 (walk-0925 п.9, Никита: "все пункты на разные высоты") - карточки уже были одной высоты (grid stretch), но у карточки 1 h3 в одну строку, у 2 и 3 - в две, поэтому "нет"/"да"-строки под заголовком стояли на разной высоте между карточками. subgrid подтягивает num/h3/no/yes-ряды одной карточки к общим строкам всех трёх карточек. */ /* 25.09.2026 (frontend-3, Никита: "чем Цифра отличается? ... опять на разные высоты, это пиздец" - вторая половина того же замечания про раздутый воздух) - subgrid наследует row-gap:32px родителя .cmp-grid между СВОИМИ строками (num/h3/строка1/строка2), это раздуло карточку 260 -> 355.5px. row-gap:0 возвращает исходные отступы через margin-bottom детей (num 12px, h3 16px, .cmp-line 8px) - выравнивание строк по subgrid не трогаем. */ .cmp-card{ display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:0 } } .cmp-card{ background:var(--graphite-2); border:1px solid var(--home-card-line); border-radius:16px; padding:28px } .cmp-card .num{ display:block; font-family:var(--font-head); font-size:13px; font-weight:700; color:#9E9E9E; margin-bottom:12px } .cmp-card h3{ font-family:var(--font-head); font-size:18px; font-weight:600; color:#fff; margin:0 0 16px; text-wrap:balance } /* 768-1023: 3 колонки дают карточке ~155px - "Показываем демо..."-класс дефекта (h3 в 4 строки, "никогда 4 строки", найдено собственным сквозным прогоном при сдаче, тот же механизм, что .pos-track-row--4 выше). */ @media (min-width:768px) and (max-width:1023px){ .cmp-card h3{ font-size:16px } } .cmp-line{ display:flex; align-items:flex-start; gap:8px; font-size:14px; line-height:1.5; margin-bottom:8px } .cmp-line .ic{ flex:none; margin-top:2px } .cmp-line.no{ color:var(--home-muted) } .cmp-line.no .ic{ color:var(--home-muted-2) } .cmp-line.yes{ color:#fff; font-weight:600 } .cmp-line.yes .ic{ color:var(--mint) } /* #info-answers - одна широкая карточка (GEO-ответ) + две узкие ссылки, без "решётки" */ .info-answers-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:stretch } @media (min-width:1024px){ .info-answers-grid{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:24px } } .info-answer--wide h3{ font-size:18px } /* 21.09.2026 (Никита: "абзац разорван на две колонки посреди предложения") - column-count:2 на 900+ рвал текст «...хорошо / продаётся...» пополам; убрано, абзац в одну колонку всегда. */ .info-answer--wide p{ column-count:1; max-width:none } .info-answer--narrow{ display:flex; flex-direction:column } .info-answer--narrow p{ margin-bottom:12px } /* #pricing-short - три карточки, тот же .price-cards/.price-card (переключатель периода снят 21.09.2026, свой одиночный вариант вместе с ним) */ /* 24.09.2026 (item 1, Никита: "3 текста подряд - такое") - строка про сети (была .pricing-caveat) плюс строка про оплату (перенесена дословно со снятой /tarify/) в одной плашке, в визуальном языке .price-card: та же подложка/рамка/скругление, без новых цветов (Никита 23.09.2026 запретил разные тона фона). */ .pricing-note{ display:flex; align-items:flex-start; gap:14px; max-width:720px; margin:28px auto 0; background:var(--graphite-2); border:1px solid #3A3A3A; border-radius:var(--radius); padding:20px 24px } @media (max-width:520px){ .pricing-note{ max-width:none } } /* <=479: padding 20/24 + mark(6)+gap(14) съедали текстовую колонку ниже 80% ширины вьюпорта на 414px (report-qa.md defect 5, audit.md п.4 закрыт не полностью). Точка-маркер декоративна (aria-hidden) - на узких телефонах прячем, текст получает всю ширину. */ @media (max-width:479px){ .pricing-note{ padding:16px 14px } .pricing-note-mark{ display:none } } .pricing-note-mark{ flex:0 0 auto; width:6px; height:6px; margin-top:8px; border-radius:50%; background:var(--mint) } .pricing-note-text p{ margin:0; font-size:14px; line-height:1.55; color:var(--home-muted); text-align:left } .pricing-note-text p + p{ margin-top:8px } /* 24.09.2026 (разнос дизайна главной, Никита: "нахуя такое количество одинакового текста") - список функций один раз под карточками, не в каждой (build.py _dedupe_pricing_features). Карточки одной высоты, кнопки на одной линии - flex-колонка + margin-top:auto на кнопке компенсирует разную длину price-total. Портировано из R2 один в один. */ #pricing-short .price-card{ display:flex; flex-direction:column } #pricing-short .price-card .btn{ margin-top:auto } #pricing-short .price-features{ margin-top:28px; padding-top:28px; border-top:1px solid var(--home-card-line,rgba(255,255,255,.08)) } #pricing-short .price-features h3{ font-family:var(--font-head); font-size:16px; font-weight:700; color:#fff; margin:0 0 16px } .price-features-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 24px; margin:0 } @media (max-width:860px){ .price-features-list{ grid-template-columns:repeat(2,minmax(0,1fr)) } } @media (max-width:520px){ .price-features-list{ grid-template-columns:1fr } } .price-features-list li{ font-size:14px; color:var(--text-2); padding-left:18px; position:relative; margin-bottom:0 } .price-features-list li::before{ content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--mint) } /* #start - инлайн-форма вместо попапа-подсказки (design-spec.md "#start"), правый столбец расширен под поля формы */ @media (min-width:768px){ .start-grid{ grid-template-columns:minmax(0,1fr) 1px minmax(0,320px) } } @media (min-width:1024px){ .start-grid{ grid-template-columns:minmax(0,1fr) 1px minmax(0,360px) } } .col-label .lead-form{ margin-top:20px } .col-label .lead-form .field label{ color:#D7D7D7 } .col-label .lead-form input{ background:#1E1E1E; border-color:rgba(255,255,255,.14); color:#fff } .col-label .field-check{ color:var(--home-muted) } .lead-form-success{ display:none; align-items:flex-start; gap:12px; margin-top:20px; color:#fff } .lead-form-success.is-visible{ display:flex } .lead-form-success svg{ flex:none; color:var(--mint); margin-top:2px } .lead-form-success p{ font-size:15px; line-height:1.5; margin:0 } /* hit-area чекбокса минимум 40x40 (make-interfaces-feel-better, финальный проход) */ .field-check{ position:relative; padding:8px 0 } .field-check input[type="checkbox"]{ width:16px; height:16px; flex:none; margin-top:2px; position:relative } .field-check input[type="checkbox"]::before{ content:""; position:absolute; inset:-12px } /* tabular nums на ценах, чтобы переключение периода не двигало соседний текст */ .price-num, .price-row .num{ font-variant-numeric:tabular-nums } /* 24.09.2026 (разнос дизайна главной, жалоба 21.09 "что с отступом под чекбоксом" - фикс из R2): .field-check жил на padding:8px 0 из глобального правила (меньше, чем .field{margin-bottom: 12px}) - только в #start выравниваем на те же 12px, глобальный hit-area 40x40 не трогаем. */ #start .field-check{ padding:0; margin-bottom:12px } /* concentric radius карточки формы #start: внешняя 14px, поля/чекбокс 8px */ .col-label .lead-form input, .col-label .lead-form .btn{ border-radius:8px }