/* ── Токены бренда: база для ЛЮБОЙ новой страницы ── Новая страница подключает chrome.css и строится на этих переменных; свои цвета не вводить (свод, раздел 6). */ :root{ color-scheme:light; /* нативные контролы (чекбоксы, скроллбары) — по теме */ --red:#E93223; --red-deep:#C81E12; --red-tint:#fdeceb; --ink:#16181d; --soft:#5b6068; --muted:#8b919c; --line:#e6e8eb; --card:#fff; --card-2:#eef0f3; --wash:#f6f7f8; --bg:#fff; --maxw:1120px; --r:14px; --r-sm:10px; --r-pill:999px; /* единственная тень сайта — мягкая, из блока форматов (дизайн-система 21.09) */ --shadow:0 1px 2px rgba(20,23,28,.04), 0 4px 14px rgba(20,23,28,.05); --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* материал плавающего слоя (по мотивам Liquid Glass, 21.09): один рецепт для шапки, куки-полосы, липкой кнопки и оверлеев. Контент остаётся чистым — стекло только над ним. */ --glass-bg:rgba(255,255,255,.82); --glass-border:rgba(20,23,28,.1); --glass-edge:rgba(255,255,255,.55); /* спекулярная кромка */ --glass-blur:blur(14px) saturate(1.4); } /* .dark ПОСЛЕ :root: у селекторов равная специфичность, побеждает поздний — тёмные значения обязаны идти последними. */ .dark{ color-scheme:dark; --ink:#e7e9ec; --soft:#b9bec6; --muted:#9aa1ac; /* muted на тёмном чуть светлее — контраст */ --line:#2f3540; --card:#1e232b; --card-2:#262c36; --wash:#1a1d23; --bg:#15171c; --red-tint:rgba(233,50,35,.14); /* исторический баг закрыт системно: страничный --ink-soft теперь переопределяется в тёмной для ВСЕХ страниц */ --ink-soft:#b9bec6; --shadow:none; /* тени в тёмной не работают — границы вместо них (правило 8) */ --glass-bg:rgba(21,23,28,.82); --glass-border:rgba(231,233,236,.12); --glass-edge:rgba(255,255,255,.08); } /* ============================================================ ХРОМ САЙТА: единые шапка и подвал для всех страниц. Разметку вшивает tools/chrome.py (партиалы), стили живут здесь и подключаются ПОСЛЕ страничного css — выигрывают каскадом. Решения: шапка липкая со стеклом (как главная), высота одна, палитра — токены бренда. Тёмная тема через .dark на . ============================================================ */ /* Явный фон body на всех страницах (правило 8): страница не смеет полагаться на цвет canvas браузера — при системной тёмной теме он тёмный, и «прозрачный» сайт становится чёрным. */ body{ background:var(--bg,#fff); color:var(--ink,#16181d); } /* Контейнер хрома — здесь же: страницы без lp-вёрстки (главная, политика) иначе получают шапку без полей. */ .lp-container{ width:100%; max-width:1120px; margin:0 auto; padding:0 20px; } .lp-header{ position:sticky; top:0; z-index:40; background:var(--glass-bg,rgba(255,255,255,.82)); border-bottom:1px solid var(--glass-border,rgba(20,23,28,.1)); } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ .lp-header{ -webkit-backdrop-filter:var(--glass-blur,blur(14px)); backdrop-filter:var(--glass-blur,blur(14px)); } } /* Ряд шапки живёт на ОДНОМ элементе с .lp-container: боковые поля надо повторить, иначе шорткат padding обнуляет их и бургер/иконки липнут к кромке экрана (заметно на мобильной, Денис 21.09). */ .lp-header__row{ display:flex; align-items:center; gap:16px; padding:14px 20px; } .lp-logo{ font-weight:800; font-size:19px; letter-spacing:-.02em; color:#16181d; text-decoration:none; } .dark .lp-logo{ color:#e7e9ec; } .lp-logo span{ color:#E93223; } /* Меню по центру шапки (замечание Дениса 21.09): auto-поля с обеих сторон; на главной телефон и бургер сдвигают композицию сами. */ .lp-nav{ margin-left:auto; margin-right:auto; display:flex; gap:18px; } .lp-nav + .lp-header__tel{ margin-left:0; } .lp-nav a{ font-size:14px; font-weight:600; color:#16181d; text-decoration:none; } .dark .lp-nav a{ color:#e7e9ec; } .lp-nav a:hover{ color:#E93223; } .lp-nav a[aria-current="page"]{ color:#E93223; } .lp-theme{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-left:auto; border:1px solid rgba(20,23,28,.14); border-radius:10px; background:transparent; cursor:pointer; } .lp-nav + .lp-theme{ margin-left:0; } .lp-header__tel + .lp-theme{ margin-left:0; } /* пара телефон+тумблер справа */ .dark .lp-theme{ border-color:rgba(231,233,236,.18); } .lp-theme:hover{ background:rgba(20,23,28,.06); } .dark .lp-theme:hover{ background:rgba(231,233,236,.08); } .lp-theme img{ display:block; } /* Инверсии нет: sun.svg нарисован белым (для тёмной), moon.svg чёрным (для светлой) — файлы свапают страничные скрипты через __theme.onChange. invert(1) делал белое солнце чёрным — «иконку не видно» (21.09). */ @media (max-width:640px){ .lp-nav{ display:none } } /* ── Футер: подложка --wash, бренд-блок с фирменным фактом, колонки, мета-строка. Водяной wordmark снят дизайн-системой 21.09. ── */ .lp-footer{ position:relative; overflow:hidden; background:var(--wash,#f6f7f8); border-top:1px solid var(--line,#e3e6ea); padding:46px 0 20px; font-size:14px; } /* Колонки распределяются по всей ширине: у изолированного футера (гайд) блоков два, и без этого они кучковались слева с дырой справа (22.09). */ .lp-footer__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:34px 64px; margin-bottom:34px; } .lp-footer__brand{ max-width:300px; } .lp-footer__brand .lp-logo{ font-size:21px; } .lp-footer__fact{ margin:12px 0 0; font-weight:500; font-size:13.5px; line-height:1.55; color:var(--soft,#5b6068); } .lp-footer__col{ display:flex; flex-direction:column; gap:9px; min-width:180px; } .lp-footer__h{ margin:0 0 4px; font-weight:700; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:#8a9099; } .lp-footer a{ color:var(--soft,#5b6068); text-decoration:none; font-weight:500; } .lp-footer a:hover{ color:var(--red,#E93223); } .lp-footer__ttt{ background:none; border:0; padding:0; margin:0; cursor:pointer; font:inherit; font-size:13px; color:#8a9099; } .lp-footer__ttt:hover{ color:var(--red,#E93223); } /* строка-дорога на главную из изолированного футера (посадочная) */ .lp-footer__site a{ color:inherit; text-decoration:underline; text-underline-offset:3px; } .lp-footer__site a:hover{ color:var(--red,#E93223); } .lp-footer__row{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; padding-top:16px; border-top:1px solid var(--line,#e3e6ea); color:#8a9099; font-size:13px; } /* политика — к правому краю: мета слева, юридическое справа */ .lp-footer__row > a:last-child{ margin-left:auto; } /* Телефон в шапке главной (вариант home; основной номер) */ .lp-header__tel{ margin-left:auto; margin-right:10px; display:inline-flex; align-items:center; padding:9px 14px; border:1.5px solid var(--line,#e6e8eb); border-radius:var(--r-sm,10px); font-weight:700; font-size:15px; color:var(--ink,#16181d); text-decoration:none; white-space:nowrap; transition:border-color .2s, color .2s; } .dark .lp-header__tel{ color:var(--ink,#e7e9ec); } .lp-header__tel:hover{ border-color:var(--ink,#16181d); } .dark .lp-header__tel:hover{ border-color:var(--ink,#e7e9ec); } .lp-nav ~ .lp-header__tel{ margin-left:0; } .lp-header .nav-icon{ margin-right:6px; } @media (min-width:641px){ .lp-header .nav-icon{ display:none; } } .lp-header__tel-ico{ display:none; } /* Планшет: шапке ГЛАВНОЙ (меню + телефон + тумблер) не хватает 768px — тумблер вылетал за край (аудит 22.09). Телефон складывается в кнопку- трубку уже на ≤900, но только там, где рядом меню (~ .lp-nav). */ @media (max-width:900px){ .lp-nav ~ .lp-header__tel .lp-header__tel-text{ display:none; } .lp-nav ~ .lp-header__tel{ justify-content:center; width:42px; height:42px; padding:0; margin-right:8px; border:1px solid rgba(20,23,28,.14); border-radius:10px; } .dark .lp-nav ~ .lp-header__tel{ border-color:rgba(231,233,236,.18); } .lp-nav ~ .lp-header__tel .lp-header__tel-ico{ display:block; } } @media (max-width:640px){ /* На узких номер не влезает текстом — кнопка-трубка 42x42, как тумблер. Прятать телефон на рекламной странице нельзя: звонок там — один тап. */ .lp-header__tel-text{ display:none; } .lp-header__tel{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-right:8px; border:1px solid rgba(20,23,28,.14); border-radius:10px; } .dark .lp-header__tel{ border-color:rgba(231,233,236,.18); } .lp-header__tel-ico{ display:block; } /* Меню скрыто — его авто-поля не работают, и иконки повисали в центре (Денис, 21.09). Правый край держат сами иконки: одиночному тумблеру и телефону — auto, паре телефон+тумблер — auto только телефону. */ .lp-header__row .lp-theme{ margin-left:auto; } .lp-header__row .lp-header__tel{ margin-left:auto; margin-right:8px; } .lp-header__row .lp-header__tel + .lp-theme{ margin-left:0; } } /* Запас под плавающие панели встроенных браузеров (Telegram и пр.): их бары ложатся ПОВЕРХ контента и накрывали согласие форм. */ @media (max-width:640px){ body{ padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)); } html.has-cookie-bar body{ padding-bottom:calc(var(--cookie-bar-h, 44px) + 72px + env(safe-area-inset-bottom, 0px)); } } /* ═══════════════════════════════════════════════════════════════ КАНОН КНОПОК (правило 21.09). Новым страницам — классы .btn*. Ниже — нормализационный слой: существующие кнопки всех страниц приводятся к канону ЗДЕСЬ, в одном месте, поверх страничных css. Меняешь вид кнопок — меняешь этот блок, а не десять файлов. Осознанные исключения: sticky-btn__btn (pill), cookie-bar__ok (служебная тёмная), hw-preset/hw-toggle (карточки и переключатели). ═══════════════════════════════════════════════════════════════ */ .btn-core, .hero-cta--primary, .hero-cta--ghost, .mform__btn, .form__btn, .cta-btn, .btn--red, .btn--fill, .btn--ghost, .btn--light, .nf__btn, .contacts__item-btn, .mini-guide__btn, .lead-form__btn, .pain__cta-btn{ display:inline-block; box-sizing:border-box; font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px; line-height:1.2; text-decoration:none; text-align:center; cursor:pointer; padding:13px 26px; border-radius:var(--r-sm,10px); transition:background .2s, color .2s, border-color .2s, transform .2s; } /* primary: красная обводка, hover — заливка */ .hero-cta--primary, .mform__btn, .form__btn, .cta-btn, .btn--red, .btn--fill, .nf__btn:not(.nf__btn--ghost), .contacts__item-btn, .mini-guide__btn, .lead-form__btn, .pain__cta a.pain__cta-btn, .dark .hero-cta--primary, .dark .dark .mform__btn, .dark .form__btn, .dark .cta-btn, .dark .btn--red, .dark .contacts__item-btn{ background:transparent; color:var(--red,#E93223); border:2px solid var(--red,#E93223); box-shadow:none; } .hero-cta--primary:hover, .mform__btn:hover, .form__btn:hover, .cta-btn:hover, .btn--red:hover, .btn--fill:hover, .nf__btn:not(.nf__btn--ghost):hover, .contacts__item-btn:hover, .mini-guide__btn:hover, .lead-form__btn:hover, .pain__cta a.pain__cta-btn:hover{ background:var(--red,#E93223); color:#fff; border-color:var(--red,#E93223); } /* quiet: нейтральная рамка, hover — чернильная */ .hero-cta--ghost, .btn--ghost, .btn--light, .nf__btn--ghost{ background:transparent; color:var(--ink,#16181d); border:1.5px solid var(--line,#d8dce1); } .dark .hero-cta--ghost, .dark .btn--ghost, .dark .nf__btn--ghost{ color:var(--ink,#e7e9ec); border-color:var(--line,#3a4048); } .hero-cta--ghost:hover, .btn--ghost:hover, .btn--light:hover, .nf__btn--ghost:hover{ border-color:var(--ink,#16181d); color:var(--ink,#16181d); background:transparent; } .dark .hero-cta--ghost:hover, .dark .btn--ghost:hover, .dark .nf__btn--ghost:hover{ border-color:var(--ink,#e7e9ec); color:var(--ink,#e7e9ec); } .sticky-btn__btn{ border-radius:999px; } /* ═══ КАНОН МОДАЛОК И ОВЕРЛЕЕВ: поверхность и текст — токенами. В тёмной теме светлых поверхностей нет (правило 8) — карточка модалки красится ступенью тёмного, тексты идут от --ink/--soft. Жёсткие цвета в модалках страниц запрещены. ═══ */ .modal__container, .ttt__card{ background:var(--card,#fff); color:var(--ink,#16181d); } /* Страница под открытой модалкой не прокручивается (вешают скрипты модалок) */ body.noscroll{ overflow:hidden; } /* ── Пасхалка «Сыграй с системой»: с 21.09 на всех страницах, поэтому стили живут в хроме. Кнопку выводит футер-партиал (tools/chrome.py), разметку строит js/ttt.js. Клетки в тёмной — ступень СВЕТЛЕЕ карты (интерактив приподнят), см. правило 8. ── */ .ttt{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:20px; } .ttt[hidden]{ display:none; } .ttt__backdrop{ position:absolute; inset:0; background:rgba(20,23,28,.55); } @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .ttt__backdrop{ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } } .ttt__card{ position:relative; z-index:1; width:min(400px,100%); border:1px solid var(--line,#e6e8eb); border-radius:20px; padding:28px 26px 24px; box-shadow:0 24px 70px rgba(0,0,0,.35); text-align:center; } .ttt__close{ position:absolute; top:12px; right:14px; border:0; background:transparent; cursor:pointer; font-size:16px; font-weight:700; color:var(--muted,#7a808a); padding:6px; border-radius:8px; transition:color .2s, transform .25s; } .ttt__close:hover{ color:var(--red,#E93223); transform:rotate(90deg); } .ttt__title{ font-weight:800; font-size:22px; letter-spacing:-.02em; color:var(--ink,#16181d); margin-bottom:8px; } .ttt__sub{ font-size:14px; line-height:1.5; color:var(--ink-soft,#5b6068); margin:0 0 18px; } .ttt__board{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:min(264px,100%); margin:0 auto 16px; } .ttt__cell{ aspect-ratio:1; border:0; border-radius:14px; background:var(--wash,#f6f7f8); font-family:inherit; font-weight:800; font-size:34px; line-height:1; cursor:pointer; color:var(--ink,#16181d); transition:background .2s, transform .15s; } .ttt__cell:hover:not(:disabled):not(.is-x):not(.is-o){ background:var(--card-2,#eef0f3); transform:scale(1.04); } .ttt__cell:disabled{ cursor:default; } .dark .ttt__cell{ background:var(--card-2,#262c36); } .dark .ttt__cell:hover:not(:disabled):not(.is-x):not(.is-o){ background:#2c333e; } .ttt__cell.is-x{ color:var(--red,#E93223); } .ttt__cell.is-o{ color:var(--ink,#16181d); } .ttt__result{ font-weight:600; font-size:14.5px; line-height:1.5; color:var(--ink,#16181d); margin:0 0 14px; } .ttt__actions{ display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; } .ttt__again{ border:1.5px solid var(--line,#e6e8eb); background:transparent; cursor:pointer; font-family:inherit; font-weight:700; font-size:14px; color:var(--ink,#16181d); padding:10px 22px; border-radius:999px; transition:border-color .2s; } .ttt__again:hover{ border-color:var(--red,#E93223); } .ttt__cta{ font-weight:700; font-size:14px; color:var(--red,#E93223); text-decoration:none; border-bottom:2px solid transparent; transition:border-color .2s; } .ttt__cta:hover{ border-color:var(--red,#E93223); } @supports not (aspect-ratio: 1){ .ttt__cell{ height:80px; } } /* ── Цены .prices26 — компонент дизайн-кода (hero главной и посадочной): колонки между линиями, пример под каждой ценой. Переехал 22.09. ── */ .prices26{ display:grid; grid-template-columns:repeat(3,auto); gap:28px; justify-content:start; margin:28px 0 4px; padding:20px 0; border-top:1px solid var(--line,#e6e8eb); border-bottom:1px solid var(--line,#e6e8eb); } @media (max-width:640px){ .prices26{ grid-template-columns:1fr 1fr; gap:16px; } } .prices26 b{ display:block; font-size:22px; letter-spacing:-.01em; } .prices26 span{ font-size:13px; color:var(--muted,#8b919c); } /* пример задачи под ценой (Ильяхов: абстракции без примера не живут, 22.09) */ .prices26__ex{ display:block; font-style:normal; font-size:12px; line-height:1.4; color:var(--muted,#8b919c); opacity:.85; margin-top:3px; max-width:24ch; } /* ── Голова секции .head — компонент дизайн-кода: h2 слева, лид справа (1.2/1.4), без лида — вся ширина. Переехал из style.css 22.09. ── */ .head{ display:grid; grid-template-columns:1.2fr 1.4fr; gap:40px; align-items:end; margin-bottom:40px; } /* нет лида — заголовку вся ширина, без пустой колонки-тюрьмы */ .head:not(:has(.lead)){ grid-template-columns:1fr; } /* заголовок + навигация слайдера на одной линии */ .head--nav{ grid-template-columns:1fr auto !important; } .head h2{ margin:0; text-align:left; } .head--tight{ margin:56px 0 28px; } @media (max-width:820px){ .head{ grid-template-columns:1fr; gap:12px; } } /* ── Моно-надзаголовок .k и манифест-список .rules26 — компоненты дизайн-кода (главная, гайд). Переехали из style.css 22.09. ── */ .k{ font-family:var(--mono,monospace); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--red,#E93223); margin:0 0 14px; } .rules26{ columns:2; column-gap:56px; padding:0; margin:0; list-style:none; counter-reset:rule; } @media (max-width:820px){ .rules26{ columns:1; } } .rules26 li{ break-inside:avoid; counter-increment:rule; position:relative; padding:18px 0 18px 46px; border-top:1px solid var(--line,#e6e8eb); font-size:19px; font-weight:700; line-height:1.35; letter-spacing:-.01em; color:var(--ink,#16181d); text-wrap:balance; } .rules26 li::before{ content:counter(rule, decimal-leading-zero); position:absolute; left:0; top:23px; font-family:var(--mono,monospace); font-weight:400; font-size:13px; letter-spacing:.08em; color:var(--muted,#8b919c); } /* точка бренда живёт в заголовках; в строках правил - перебор (21.09) */ /* ── Строка списка .pt26 — компонент дизайн-кода: линия сверху, чернильный заголовок, серое пояснение. Переехал из style.css 22.09: текст не живёт вне компонента — факты и примечания встают строкой. ── */ .pt26{ padding:22px 0; border-top:1px solid var(--line,#e6e8eb); } .pt26 b{ display:block; margin-bottom:4px; font-size:17px; } .pt26 span{ display:block; color:var(--soft,#5b6068); font-size:15px; line-height:1.55; } /* ── Цифры доверия .stats26 — компонент дизайн-кода (hero главной, hero партнёрки): карточки-факты сеткой 2x2. Переехал из style.css 21.09, когда понадобился второй странице. ── */ .stats26{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width:900px) and (min-width:521px){ .stats26{ grid-template-columns:repeat(4,1fr); } } @media (max-width:520px){ .stats26{ grid-template-columns:1fr 1fr; } } .stat26{ background:var(--card,#fff); border:1px solid var(--line,#e6e8eb); border-radius:var(--r,14px); padding:22px 20px; box-shadow:var(--shadow,none); } .stat26 b{ display:block; font-size:34px; line-height:1; letter-spacing:-.02em; margin-bottom:8px; } .stat26 span{ font-size:14px; line-height:1.45; display:block; color:var(--soft,#5b6068); } /* ── FAQ .faq26 — компонент дизайн-кода (главная, партнёрка): две колонки, список с линиями, шевроны, раскрытие grid-rows. Переехал из style.css 22.09. ── */ .faq26{ display:grid; grid-template-columns:1fr 1.7fr; gap:48px; } @media (max-width:820px){ .faq26{ grid-template-columns:1fr; gap:20px; } } .faq26 .faq-content{ margin:0; } .faq26 .faq-item{ border-top:1px solid var(--line,#e6e8eb); } .faq26 .faq-item:last-child{ border-bottom:1px solid var(--line,#e6e8eb); } .faq26 .faq-q{ margin:0; } .faq26 .faq-item-header{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 0; background:none; border:0; cursor:pointer; text-align:left; font-family:inherit; } .faq26 .faq-item-title{ font-size:17px; font-weight:700; line-height:1.35; color:var(--ink,#16181d); } .faq26 .faq-toggle{ flex:none; width:9px; height:9px; margin-right:6px; border-right:2px solid var(--muted,#8b919c); border-bottom:2px solid var(--muted,#8b919c); transform:rotate(45deg); transition:transform .2s; } .faq26 .faq-item.is-open .faq-toggle{ transform:rotate(-135deg); } .faq26 .faq-item-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; } .faq26 .faq-item.is-open .faq-item-body{ grid-template-rows:1fr; } .faq26 .faq-item-body > .faq-item-text{ overflow:hidden; min-height:0; } .faq26 .faq-item-text{ margin:0; max-width:62ch; font-size:15px; line-height:1.6; color:var(--soft,#5b6068); } .faq26 .faq-item.is-open .faq-item-text{ padding-bottom:20px; } .faq26 .faq-item-text a{ color:var(--red,#E93223); font-weight:600; text-decoration:none; } .faq26 .faq-item-text a:hover{ text-decoration:underline; } /* ── Контактные чипы .alt26/.chip26 — компонент дизайн-кода: «Или связаться сразу:» + круглые иконки-логотипы. ── */ .alt26{ margin:14px 0 0; font-size:15px; color:var(--muted,#8b919c); } .alt26 a{ color:var(--ink,#16181d); text-decoration:underline; text-underline-offset:3px; } .alt26 a:hover{ color:var(--red,#E93223); } .chip26{ display:inline-flex; align-items:center; border:1px solid var(--line,#e6e8eb); border-radius:var(--r-pill,999px); padding:7px 14px; font-size:14px; font-weight:600; color:var(--ink,#16181d); text-decoration:none; transition:border-color .2s; } .chip26:hover{ border-color:var(--ink,#16181d); } @media (prefers-reduced-motion:no-preference){ .chip26, .reviews__more, .link-act{ transition:transform .12s ease, border-color .2s; } .chip26:active, .reviews__more:active, .link-act:active{ transform:scale(.96); } } .chip26--ico{ width:34px; height:34px; padding:0; justify-content:center; border-radius:50%; } .chip26--ico img{ display:block; } .chip26--mini{ width:28px; height:28px; vertical-align:middle; margin-top:-2px; } .alt26 .chip26{ text-decoration:none; } /* ── Контактный блок .contact26/.clist26 — компонент дизайн-кода (главная, партнёрка): слева k+заголовок+лид+CTA+чипы, справа список телефон/почта/каналы с линиями. Переехал из style.css 22.09. ── */ .contact26{ display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:start; } @media (max-width:820px){ .contact26{ grid-template-columns:1fr; gap:28px; } } .contact26 .contacts__sub{ margin:0 0 24px; } .clist26 > div{ padding:18px 0; border-top:1px solid var(--line,#e6e8eb); } .clist26 > div:first-child{ padding-top:0; border-top:0; } .clist26 b{ display:block; font-size:17px; } .clist26 b a{ color:inherit; text-decoration:none; } .clist26 b a:hover{ color:var(--red,#E93223); } .clist26 span{ display:block; font-size:14px; color:var(--muted,#8b919c); margin-top:2px; } /* заголовок пункта + иконки каналов в одну строку */ .clist26__row{ display:flex; align-items:center; gap:10px; } .clist26__row b{ margin-right:2px; } /* ── Лёгкая модалка .gmodal — общий компонент хрома (гайд «Как мы работаем», форма партнёрки). Карточка и текст — токенами (канон модалок), оверлей — вуаль с лёгким блюром (glass-канон). Разметку каждая страница держит свою, открытие — страничным скриптом. ── */ .gmodal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:20px; } .gmodal[hidden]{ display:none; } .gmodal__backdrop{ position:absolute; inset:0; background:rgba(20,23,28,.55); } @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .gmodal__backdrop{ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } } .gmodal__card{ position:relative; width:100%; max-width:560px; max-height:min(86vh,660px); overflow:auto; background:var(--card,#fff); color:var(--ink,#16181d); border:1px solid var(--line,#e6e8eb); border-radius:16px; padding:30px 28px; } .gmodal__close{ position:absolute; top:12px; right:12px; width:36px; height:36px; border:0; background:none; color:var(--soft,#5b6068); font-size:17px; cursor:pointer; transition:color .2s, transform .25s; } .gmodal__close:hover{ color:var(--red,#E93223); transform:rotate(90deg); } .gmodal__k{ font-family:var(--mono,monospace); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--red,#E93223); margin:0 0 10px; } .gmodal__title{ font-weight:800; font-size:22px; letter-spacing:-.02em; line-height:1.2; margin:0 0 16px; } .gmodal__s{ font-size:14.5px; line-height:1.5; color:var(--soft,#5b6068); margin:-6px 0 16px; } @media (max-width:560px){ .gmodal__card{ padding:26px 20px; } } /* третий тип канона: ссылка-действие со стрелкой (жест блока форматов). Красная — главное действие, чернильная — соседнее тихое. */ .link-act{ display:inline-block; font-weight:700; font-size:16px; color:var(--red,#E93223); text-decoration:none; } .link-act:hover{ text-decoration:underline; text-underline-offset:3px; } .link-act--ink{ color:var(--ink,#16181d); } .link-act--ink:hover{ color:var(--red,#E93223); text-decoration:none; } /* отклик на нажатие (жест Liquid Glass): лёгкий «пресс» кнопочной семьи */ @media (prefers-reduced-motion:no-preference){ .hero-cta--primary:active, .hero-cta--ghost:active, .mform__btn:active, .form__btn:active, .cta-btn:active, .btn--red:active, .btn--fill:active, .btn--ghost:active, .btn--light:active, .nf__btn:active, .contacts__item-btn:active, .mini-guide__btn:active, .lead-form__btn:active, .lp-theme:active, .lp-header__tel:active, .sticky-btn__btn:active{ transform:scale(.98); } } /* ═══════════════════════════════════════════════════════════════ КАНОН ПОЛЕЙ ФОРМ (этап 1 единого стиля, 21.09): рамка --line, радиус --r-sm, фон по теме. Нормализация поверх страничных css — как канон кнопок. Фокус остаётся страничным (красный outline). ═══════════════════════════════════════════════════════════════ */ /* Чекбокс согласия — канон для ВСЕХ форм: нативный вид принудительно (страничные сбросы appearance его прятали) + фирменный accent. */ .mform__consent input[type=checkbox], .form__consent input[type=checkbox], .lead-form__consent input[type=checkbox], .mini-guide__consent input[type=checkbox], .diag-form__consent input[type=checkbox]{ -webkit-appearance:auto; appearance:auto; width:16px; height:16px; flex:none; accent-color:var(--red,#E93223); } .mform__input, .form__input, .lead-form__input, .diag-form__input, .mini-guide__input, .dark .mform__input, .dark .form__input, .dark .lead-form__input, .dark .diag-form__input, .dark .mini-guide__input{ border:1px solid var(--line,#e6e8eb); border-radius:var(--r-sm,10px); background:var(--bg,#fff); color:var(--ink,#16181d); }