/* ══════════════════════════════════════════════════════════════ ЭТАЛОН · НОВАЯ ТЕМА ══════════════════════════════════════════════════════════════ Здесь живёт новый дизайн. Файл подключён к каждой странице, но применяется ТОЛЬКО когда на стоит признак data-theme="next". Признак ставится сам: · на тестовом домене — всегда; · на рабочем — по адресу с ?next=1 (чтобы показать); · выключить на время — ?next=0. Почему так, а не копией сайта в отдельной папке: копии расходятся. Здесь код общий — тексты, статьи, расписание, калькуляторы правятся один раз и работают в обеих темах. Разъезжается только оформление, и оно всё в этом файле. Когда новый вид утвердим — содержимое переносится в etalon-fixes.css, признак убирается, файл удаляется. ══════════════════════════════════════════════════════════════ */ /* ─── ШКАЛА СКРУГЛЕНИЙ ──────────────────────────────────────── Замер показал россыпь: у кнопок шесть разных значений, у бейджей семь — от 6 пикселей до полной пилюли. Глаз такое не называет словами, но читает как неряшливость. Четыре ступени и два особых случая: --r-xs 6px мелкие метки внутри текста --r-sm 12px поля ввода, кнопки, картинки в карточках --r-md 16px карточки и плитки --r-lg 28px крупные блоки: подложки, секции-плашки пилюля только статусы: «Внимание», «Скоро» круг аватары и точки Главное правило: кнопка и поле в одной форме скруглены одинаково. Сейчас у поля 12, у кнопки 14 — и это видно, когда они стоят друг под другом. */ [data-theme="next"] { --r-xs: 6px; --r-sm: 12px; --r-md: 16px; --r-lg: 28px; --r-pill: 999px; } [data-chrome="next"] { --r-xs: 6px; --r-sm: 12px; --r-md: 16px; --r-lg: 28px; --r-pill: 999px; } /* кнопки и поля — одна ступень */ [data-theme="next"] .btn-primary, [data-theme="next"] .btn-secondary, [data-theme="next"] .form-submit-btn, [data-theme="next"] .cta-band-btn, [data-theme="next"] .gh-btn, [data-theme="next"] .gd-submit, [data-theme="next"] .epd-btn, [data-theme="next"] .cookie-accept, [data-theme="next"] .cookie-decline, [data-theme="next"] button:not(.epd-dot):not(.float-main-btn), [data-theme="next"] input:not([type="checkbox"]):not([type="radio"]), [data-theme="next"] select, [data-theme="next"] textarea { border-radius: var(--r-sm) !important; } [data-chrome="next"] .cookie-accept, [data-chrome="next"] .cookie-decline, [data-chrome="next"] button:not(.epd-dot):not(.float-main-btn) { border-radius: var(--r-sm) !important; } /* карточки и плитки */ [data-theme="next"] .blog-card, [data-theme="next"] .v-card, [data-theme="next"] .why-card, [data-theme="next"] .pod-card, [data-theme="next"] .bonus-card, [data-theme="next"] .faq-item, [data-theme="next"] .hero-form-card, [data-theme="next"] .card, [data-theme="next"] .mp-card, [data-theme="next"] .vac-card, [data-theme="next"] .ep-more-card { border-radius: var(--r-md) !important; } /* крупные блоки */ [data-theme="next"] .g-after, [data-theme="next"] .cookie-banner, [data-theme="next"] .gh, [data-theme="next"] .coupon, [data-theme="next"] .audit-block { border-radius: var(--r-lg) !important; } [data-chrome="next"] .cookie-banner { border-radius: var(--r-lg) !important; } /* картинки внутри карточек — на ступень мельче самой карточки, иначе они выглядят приклеенными к углу */ [data-theme="next"] .bc-thumb, [data-theme="next"] .pod-thumb, [data-theme="next"] .g-proof-img img, [data-theme="next"] .article img { border-radius: var(--r-sm) !important; } /* статусы — пилюля, это осознанный приём */ [data-theme="next"] .epd-badge, [data-theme="next"] .hero-tag, [data-theme="next"] .soon-badge, [data-theme="next"] .pop-badge, [data-theme="next"] .bc-tag { border-radius: var(--r-pill) !important; } /* мелкие метки в тексте */ [data-theme="next"] .section-tag, [data-theme="next"] .tag-sm, [data-theme="next"] .chip { border-radius: var(--r-xs) !important; } /* круглое остаётся круглым */ [data-theme="next"] .st-circle, [data-theme="next"] .avatar, [data-theme="next"] .float-main-btn, [data-theme="next"] .msg-opt-icon { border-radius: 50% !important; } [data-chrome="next"] .float-main-btn, [data-chrome="next"] .msg-opt-icon { border-radius: 50% !important; } /* ══════════════════════════════════════════════════════════════ НОВЫЙ ВИД ГЛАВНОЙ: первый экран, шапка, баннер, cookie Перенесено сюда из рабочего файла — на боевом сайте остаётся прежний вид, новый включается по ?next=1 ══════════════════════════════════════════════════════════════ */ /* ── Первый экран: заголовок мощнее, содержимое выше ───────── */ [data-theme="next"] .hero h1 { font-size: clamp(38px, 5.6vw, 82px) !important; line-height: .98 !important; letter-spacing: -.035em !important; max-width: 13ch; } [data-theme="next"] .hero { padding-top: clamp(16px, 2vw, 28px) !important; } [data-theme="next"] .hero-tag { margin-bottom: 14px !important; } [data-theme="next"] .hero h1 { margin-bottom: 14px !important; } [data-theme="next"] .hero-subtitle { margin-bottom: 22px !important; } @media (max-width: 820px) { [data-theme="next"] .hero { padding-top: 14px !important; } [data-theme="next"] .hero h1 { max-width: none; } } /* Шапка: прячем метку «встреча» и красную точку. Классы nav-dot и nav-new скрипт вешает на САМИ ссылки, а метки рисует псевдоэлементами. Поэтому скрываем только псевдоэлементы — иначе из меню пропадают целые пункты. */ [data-theme="next"] .nav a.nav-dot::after, [data-theme="next"] .nav a.nav-dot::before, [data-theme="next"] .nav a.nav-new::after, [data-theme="next"] .nav a.nav-new::before { content: none !important; display: none !important; } [data-chrome="next"] .nav a.nav-dot::after, [data-chrome="next"] .nav a.nav-dot::before, [data-chrome="next"] .nav a.nav-new::after, [data-chrome="next"] .nav a.nav-new::before { content: none !important; display: none !important; } /* ══ ПЕРВЫЙ ЭКРАН: БЕЗ ИЛЛЮСТРАЦИИ ═══════════════════════════ Убрали девушку. Она была нарисована под полное полотно и не давала первому экрану встать в общую колонку: при любом масштабировании налезала то на форму, то на заголовок. Что вместо неё: крупный заголовок слева, форма справа. Фон остаётся жёлтым градиентом во всю ширину окна, содержимое — в колонке 1440, как у остальных секций. */ [data-theme="next"] .hero { position: relative; overflow: hidden; } /* ══ ФОРМА НА ПЕРВОМ ЭКРАНЕ: ОТСТУПЫ ПО СМЫСЛУ ═══════════════ Замерил, как было: между чекбоксом и кнопкой 8 пикселей, а между полем и чекбоксом 32. Ритм перевёрнут — то, что должно быть рядом, разнесено, а то, что нужно разделить, слеплено. Раскладываем по группам. Внутри группы тесно, между группами просторно: заголовок и подпись пара, 8 подпись → поля начинается другая группа, 24 поле → поле одна группа, 16 поля → согласие смена смысла: ввод кончился, начинается правовое, 20 согласие → кнопка кнопка — действие, ей нужен воздух, чтобы не нажали случайно вместе с галочкой, 24 Внутренние отступы карточки: 32 на десктопе, 24 на телефоне. Поле и кнопка 52 пикселя — выше порога касания в 44. */ [data-theme="next"] .hero-form-card { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 32px !important; border-radius: 20px !important; } [data-theme="next"] .hero-form-card > h3 { margin: 0 0 8px !important; font-size: 21px !important; line-height: 1.25 !important; } [data-theme="next"] .hero-form-card > p { margin: 0 0 24px !important; font-size: 15px !important; line-height: 1.5 !important; } [data-theme="next"] .hero-form-card .form-group { margin: 0 0 16px !important; } /* На планшете и телефоне поле получало отступ сверху от чужого правила — он складывался с отступом подписи, и между ними выходило 32 вместо 20. Обнуляем верхний: вертикальный ритм в карточке задаётся только отступами снизу. */ @media (max-width: 1024px) { [data-theme="next"] .hero-form-card .form-group, [data-theme="next"] .hero-form-card .consent-row, [data-theme="next"] .hero-form-card > p, [data-theme="next"] .hero-form-card > h3 { margin-top: 0 !important; } [data-theme="next"] .hero-form-card > p { margin-bottom: 20px !important; } [data-theme="next"] .hero-form-card .form-group { margin-bottom: 14px !important; } [data-theme="next"] .hero-form-card .form-group:has(+ .consent-row) { margin-bottom: 18px !important; } [data-theme="next"] .hero-form-card .consent-row { margin-bottom: 20px !important; } } /* В карточке есть служебная строка form-note — она пустая, высотой ноль, но с отступом сверху 12. В гибкой раскладке пустой элемент всё равно занимает место, и этот отступ раздвигал соседей: между подписью и первым полем выходило 32 вместо 20. Снимаем отступ, пока строка пуста. */ [data-theme="next"] .hero-form-card .form-note:empty { margin: 0 !important; display: none !important; } /* Первый экран вплотную к баннеру: сама секция уже прижата, но внутри до метки оставалось 108 пикселей, а до формы 177 — воздух сидел в раскладке, а не в отступе. Снимаем его и выравниваем колонки по верху. */ [data-theme="next"] .hero-grid { align-items: start !important; padding-top: 0 !important; } [data-theme="next"] .hero-left, [data-theme="next"] .hero-form-card { margin-top: 0 !important; } [data-theme="next"] .hero-left > :first-child { margin-top: 0 !important; } [data-theme="next"] .hero { padding-top: 22px !important; padding-bottom: clamp(24px, 3vw, 44px) !important; } @media (max-width: 820px) { [data-theme="next"] .hero { padding-top: 18px !important; } } /* Между верхом секции и сеткой оставалось 59 пикселей — отступ, заданный первому экрану отдельным правилом. Перекрываем, иначе содержимое не прижать к баннеру. */ [data-theme="next"] section.hero { padding-top: 22px !important; } [data-theme="next"] .hero > .hero-grid { margin-top: 0 !important; padding-top: 0 !important; } /* Секции первого экрана задана высота 900 пикселей, а содержимое в ней центрировалось — сверху и снизу оставалось по 59 пикселей пустоты. Прижимаем к верху и снимаем навязанную высоту: пусть экран будет ровно такой, каким его делает содержимое. */ [data-theme="next"] section.hero { align-items: flex-start !important; min-height: 0 !important; padding-top: 44px !important; padding-bottom: clamp(32px, 3.6vw, 56px) !important; } @media (max-width: 820px) { [data-theme="next"] section.hero { padding-top: 30px !important; } } /* Первый экран ещё ближе к баннеру: между ними оставался заметный воздух, а баннер и заголовок читаются как одна верхняя зона. */ [data-theme="next"] .hero { padding-top: clamp(8px, 1vw, 14px) !important; } [data-theme="next"] .hero-tag { margin-bottom: 10px !important; } /* ══ ПОЛОСКИ ВМЕСТО ТОЧЕК В БАННЕРЕ ══════════════════════════ Точки стояли справа и не говорили, сколько ждать до смены слайда. Ставим по центру и делаем полосками, которые заполняются по мере показа — видно, сколько осталось. */ [data-theme="next"] .epd-nav { position: absolute !important; left: 50% !important; right: auto !important; transform: translateX(-50%); bottom: 10px !important; display: flex; gap: 8px; z-index: 3; } [data-theme="next"] .epd-dot { width: 42px !important; height: 3px !important; border-radius: 2px !important; background: rgba(255, 255, 255, .28) !important; border: 0 !important; padding: 0 !important; position: relative; overflow: hidden; } [data-theme="next"] .epd-dot::before { content: ''; position: absolute; inset: 0; width: 0; background: #fff; border-radius: 2px; } /* У активной полоски было растяжение по ширине — оттого она казалась шире соседних. Заполнение и так показывает, какая активна. */ [data-theme="next"] .epd-dot.is-on { transform: none !important; scale: none !important; } /* ── Вторая кнопка в баннере: без рамки ───────────────────── Обводка делала её похожей на равноценное действие, хотя это дополнительная ссылка. Оставляем текст со стрелкой. */ [data-theme="next"] .epd-link { border: 0 !important; border-bottom: 0 !important; background: transparent !important; padding: 10px 4px !important; text-decoration: none !important; } [data-theme="next"] .epd-link:hover { opacity: .75; } /* ══ БАННЕР НА ПЛАНШЕТЕ ══════════════════════════════════════ Текст жался в узкую колонку, кнопки лезли вбок. Раскладываем в столбик: заголовок, текст, кнопки во всю ширину. */ @media (min-width: 761px) and (max-width: 1100px) { [data-theme="next"] .epd-slide .epd-inner, [data-theme="next"] .epd-slide > div { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; } [data-theme="next"] .epd-text { flex: 1 1 auto !important; } [data-theme="next"] .epd-actions { flex-direction: row !important; align-items: center !important; width: 100%; gap: 14px !important; } [data-theme="next"] .epd-btn { min-height: 48px; padding: 12px 26px !important; } [data-theme="next"] .epd-nav { bottom: 8px !important; } } /* ── Вторая кнопка первого экрана: матовое стекло ─────────── Была прозрачной на жёлтом и читалась как подпись. Делаем стеклянной: полупрозрачная белизна, размытие фона под ней, тонкая светлая кромка сверху. Рядом с красной остаётся второстепенной, но перестаёт теряться. */ [data-theme="next"] .hero-actions .btn-secondary, [data-theme="next"] .hero-actions a:not(.btn-primary), [data-theme="next"] .hero-left .btn-outline { background: rgba(255, 255, 255, .42) !important; -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, .6) !important; color: #1A1A1A !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 4px 16px rgba(26, 26, 26, .1) !important; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; } [data-theme="next"] .hero-actions .btn-secondary:hover, [data-theme="next"] .hero-actions a:not(.btn-primary):hover, [data-theme="next"] .hero-left .btn-outline:hover { background: rgba(255, 255, 255, .62) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 6px 20px rgba(26, 26, 26, .14) !important; transform: translateY(-1px); } /* ══ ПОТОЛОК ШИРИНЫ 1440: ГЛАВНАЯ ЦЕЛИКОМ ════════════════════ До окна 1600 не меняется ничего. Выше содержимое перестаёт расти и встаёт по центру, а полосы цвета — жёлтая, тёмная, баннер — остаются во всю ширину окна. Отступ задаётся ОДИН раз, внешнему блоку. У внутренних свои отступы снимаем, иначе складываются и содержимое уезжает вдвое дальше. */ [data-theme="next"] { --cap: 1440px; --gutter: max(clamp(20px, 5vw, 72px), calc((100vw - var(--cap)) / 2)); } [data-chrome="next"] { --cap: 1440px; --gutter: max(clamp(20px, 5vw, 72px), calc((100vw - var(--cap)) / 2)); } /* ПЕРВЫЙ ЭКРАН ОСТАВЛЕН ВО ВСЮ ШИРИНУ. Его иллюстрация нарисована как цельная композиция под полное полотно: текст слева, девушка посередине, форма справа. Пробовали три способа загнать её в колонку 1440 — картинка каждый раз наезжает либо на форму, либо на заголовок. Чтобы вписать первый экран, нужна перерисовка. */ /* Подвал — в колонку, заодно с секциями. Шапка остаётся во всю ширину: она стоит над первым экраном, который тоже во всю ширину, и они читаются как одна верхняя зона. Если загнать шапку в колонку, логотип уедет на 560, а заголовок первого экрана останется на 80 — разрыв в полтысячи пикселей. */ [data-theme="next"] .footer { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } [data-chrome="next"] .footer { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } [data-theme="next"] .footer-grid, [data-theme="next"] .footer-bottom, [data-theme="next"] .footer-disclaimer, [data-theme="next"] .footer-copy, [data-theme="next"] .footer-legal { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } [data-chrome="next"] .footer-grid, [data-chrome="next"] .footer-bottom, [data-chrome="next"] .footer-disclaimer, [data-chrome="next"] .footer-copy, [data-chrome="next"] .footer-legal { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } [data-theme="next"] body > section:not(.hero) > div, [data-theme="next"] body > section > .bh-wrap, [data-theme="next"] body > section > .ph-head, [data-theme="next"] body > section > .ph-track, [data-theme="next"] .cta-band-inner, [data-theme="next"] .final-cta > *:not(.final-cta-bg), [data-theme="next"] .st-section > div { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } /* На телефоне у шапки свой отступ 12, а у содержимого 20 — логотип стоял левее заголовка. Выравниваем. */ @media (max-width: 820px) { [data-theme="next"] .header { padding-left: 20px !important; padding-right: 20px !important; } [data-chrome="next"] .header { padding-left: 20px !important; padding-right: 20px !important; } [data-theme="next"] .header-inner { padding-left: 0 !important; padding-right: 0 !important; } [data-chrome="next"] .header-inner { padding-left: 0 !important; padding-right: 0 !important; } /* у первого экрана свой отступ — приводим к общему 20, иначе логотип и заголовок стоят по разным линиям */ [data-theme="next"] .hero > div { padding-left: 20px !important; padding-right: 20px !important; } } /* В новой теме иллюстрации нет — она мешала первому экрану встать в общую колонку. На боевом остаётся как была. */ [data-theme="next"] .hero-bg { display: none !important; } [data-theme="next"] .hero > div { position: relative; z-index: 1; } /* Иллюстрация скрывалась только у самого слоя, но она же стоит фоном у секции — убираем и там, иначе снизу проглядывает. */ [data-theme="next"] .hero { background-image: none !important; } [data-theme="next"] .hero::before { display: none !important; } /* ══ ПЕРВЫЙ ЭКРАН НИЖЕ, ЦИФРЫ — В ЧЁРНУЮ ЛЕНТУ ═══════════════ Четыре цифры под кнопками (15+, 25+, 2 млн, 0) с линией над ними дублировали чёрную ленту ниже по странице и растягивали жёлтый экран. Убираем их из первого экрана, а ленту ставим сразу под жёлтым — это отдельная секция .hero-strip в разметке. На боевом она скрыта в etalon-fixes.css, а старая лента после блока «Знакомо?» остаётся на месте. В новой теме наоборот. Лента на страницах услуг не трогается: скрываем только ту, что идёт сразу за .pains, а она есть лишь на главной. */ [data-theme="next"] .hero-stats { display: none !important; } [data-theme="next"] .pains + .trust-strip { display: none !important; } [data-theme="next"] .hero-strip { display: block !important; } /* Жёлтый ниже: без цифр левая колонка короче формы, значит высоту экрана задаёт форма. Поджимаем воздух снизу и внутренние отступы карточки. */ [data-theme="next"] section.hero { padding-bottom: clamp(24px, 2.6vw, 40px) !important; } [data-theme="next"] .hero-form-card { padding: 28px !important; } [data-theme="next"] .hero-subtitle { margin-bottom: 20px !important; } [data-theme="next"] .hero-actions { margin-bottom: 0 !important; } @media (max-width: 820px) { [data-theme="next"] section.hero { padding-bottom: 24px !important; } [data-theme="next"] .hero-form-card { padding: 24px !important; } } /* Лента под жёлтым: вплотную, без зазора. Содержимое — в общей колонке 1440, фон во всю ширину. */ [data-theme="next"] .hero-strip { margin-top: 0 !important; } [data-theme="next"] .hero-strip .trust-value { white-space: nowrap; } /* У сетки первого экрана оставался отступ снизу 120 — от времён, когда под текстом стояла иллюстрация. Он и держал лишний жёлтый пояс под формой. */ [data-theme="next"] .hero > .hero-grid { padding-bottom: 0 !important; } /* Первый экран — в колонку 1440, как остальные секции. Раньше мешала иллюстрация; её больше нет. На 1920 заголовок стоял на 80, а лента под ним — на 240. Теперь одна линия. */ @media (min-width: 821px) { [data-theme="next"] .hero > .hero-grid { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } } /* Телефон и планшет: сетка 2×2 без рамок. В один столбик лента выходила в 500 пикселей — больше самой формы. */ @media (max-width: 820px) { [data-theme="next"] .hero-strip .trust-items { grid-template-columns: 1fr 1fr !important; gap: 22px 20px !important; padding-top: 26px !important; padding-bottom: 26px !important; } [data-theme="next"] .hero-strip .trust-item { padding: 0 !important; border: 0 !important; } [data-theme="next"] .hero-strip .trust-value { font-size: clamp(24px, 6.4vw, 34px) !important; } } /* ══ ЕДИНАЯ ШКАЛА СКРУГЛЕНИЙ: ДОБИВАЕМ ГЛАВНУЮ ═══════════════ Замер на 1920 нашёл вне шкалы: 8, 11, 14, 18, 20, 24 и пилюли там, где это не статус, а метка или карточка. Пилюли в баннере и над заголовком стояли рядом с кнопками (12) и выглядели чужими. Метки размера кнопки — 12, мелкие теги в карточках — 6, как «section-tag». Пилюлей остаются только служебные подписи поверх видео (длительность) и круглые иконки. */ /* кнопки и пункты меню: 14 и 11 → 12 */ [data-theme="next"] .btn-outline, [data-theme="next"] .tariff-btn, [data-theme="next"] .vh-btn, [data-theme="next"] .mm-consult, [data-theme="next"] .nav-menu a, [data-theme="next"] .kalc-ico, [data-theme="next"] .evc-cell, [data-theme="next"] .vh-demo-res { border-radius: var(--r-sm) !important; } [data-chrome="next"] .mm-consult, [data-chrome="next"] .nav-menu a { border-radius: var(--r-sm) !important; } /* метки размера кнопки: из пилюли в 12 */ [data-theme="next"] .epd-badge, [data-theme="next"] .hero-tag, [data-theme="next"] .vh-list > span { border-radius: var(--r-sm) !important; } /* мелкие теги в карточках: из пилюли и 8 в 6 */ [data-theme="next"] .bc-tag, [data-theme="next"] .bc-bank, [data-theme="next"] .ph-soon-badge, [data-theme="next"] .tariff-popular-tag, [data-theme="next"] .evc-fact { border-radius: var(--r-xs) !important; } /* карточки: 18 и 20 → 16. Cookie — тоже карточка, а не секция: 28 на ней выглядело надутым. Плашка встречи внизу была пилюлей высотой 64 — ставим как cookie. */ [data-theme="next"] .kalc-card, [data-theme="next"] .vh-demo, [data-theme="next"] .hero-form-card, [data-theme="next"] .cookie-banner, [data-theme="next"] .evf { border-radius: var(--r-md) !important; } [data-chrome="next"] .cookie-banner, [data-chrome="next"] .evf { border-radius: var(--r-md) !important; } /* крупные блоки: кейс был 24 → 28, как блок аудита */ [data-theme="next"] .case-block { border-radius: var(--r-lg) !important; } /* ══ ШАПКА В КОЛОНКУ 1440 ═══════════════════════════════════ Раньше шапку оставляли во всю ширину, потому что первый экран был во всю ширину. Теперь первый экран в колонке — на 1920 логотип стоял на 80, а заголовок под ним на 240. Фон шапки остаётся во всю ширину, содержимое — в колонке. Подвал уже в колонке (правило выше). */ @media (min-width: 821px) { [data-theme="next"] .header { padding-left: 0 !important; padding-right: 0 !important; } [data-chrome="next"] .header { padding-left: 0 !important; padding-right: 0 !important; } [data-theme="next"] .header-inner { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } [data-chrome="next"] .header-inner { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } } /* На телефоне и планшете шапка и первый экран стоят на 20, а подвал брал общий отступ 5vw — на 820 это 41. */ @media (max-width: 820px) { [data-theme="next"] .footer { padding-left: 20px !important; padding-right: 20px !important; } [data-chrome="next"] .footer { padding-left: 20px !important; padding-right: 20px !important; } } /* ══ ЦИФРЫ — ЧЁРНОЙ ПЛАШКОЙ НА ЖЁЛТОМ ═══════════════════════ Лента теперь внутри первого экрана (.hero > .hero-strip), поэтому жёлтый фон идёт под ней. Сама лента — закруглённая плашка крупного блока (28), в колонке, как форма над ней. Правила «ленты под жёлтым» выше перекрываются здесь. Первый экран — гибкий блок в строку; ставим в столбик, иначе плашка встаёт справа от сетки. */ [data-theme="next"] section.hero { flex-direction: column !important; align-items: stretch !important; } [data-theme="next"] .hero > .hero-strip { background: transparent !important; overflow: visible !important; width: 100%; box-sizing: border-box; margin-top: clamp(40px, 4.4vw, 64px) !important; padding: 0 var(--gutter) !important; } [data-theme="next"] .hero-strip .trust-items { background: var(--g900, #1A1A1A); border-radius: var(--r-lg); box-shadow: 0 18px 44px rgba(120, 72, 0, .18); overflow: hidden; } /* внутри плашки первой цифре нужен тот же отступ, что и остальным — прижимать её к краю больше не нужно */ @media (min-width: 821px) { /* у ленты был свой отступ страницы (72) — внутри плашки он лишний, поля задают сами ячейки */ [data-theme="next"] .hero-strip .trust-items { padding-left: 0 !important; padding-right: 0 !important; } [data-theme="next"] .hero-strip .trust-item { padding: clamp(18px, 1.9vw, 28px) clamp(22px, 2.4vw, 34px) !important; } } @media (max-width: 820px) { [data-theme="next"] .hero > .hero-strip { padding-left: 20px !important; padding-right: 20px !important; margin-top: 24px !important; } [data-theme="next"] .hero-strip .trust-items { border-radius: var(--r-md); padding: 22px 20px !important; } } /* ══ COOKIE ПО ЦЕНТРУ, ПО ШИРИНЕ КОЛОНКИ ═════════════════════ Края карточки совпадают с краями содержимого: те же отступы, что у секций, и потолок 1440. На телефоне — 20. */ [data-theme="next"] .cookie-banner { left: var(--gutter) !important; right: var(--gutter) !important; width: auto !important; max-width: none !important; bottom: 24px !important; } [data-chrome="next"] .cookie-banner { left: var(--gutter) !important; right: var(--gutter) !important; width: auto !important; max-width: none !important; bottom: 24px !important; } /* Прячется карточка сдвигом вниз, а показывает её скрипт классом show. Сдвиг на 100% оставлял бы над краем полоску высотой в нижний отступ — уводим с запасом. */ [data-theme="next"] .cookie-banner:not(.show) { transform: translateY(calc(100% + 48px)) !important; } [data-chrome="next"] .cookie-banner:not(.show) { transform: translateY(calc(100% + 48px)) !important; } [data-theme="next"] .cookie-banner.show { transform: translateY(0) !important; } [data-chrome="next"] .cookie-banner.show { transform: translateY(0) !important; } @media (max-width: 820px) { [data-theme="next"] .cookie-banner { left: 20px !important; right: 20px !important; bottom: 16px !important; } [data-chrome="next"] .cookie-banner { left: 20px !important; right: 20px !important; bottom: 16px !important; } } /* ══ ПЛАШКА ЦИФР: ЖИДКОЕ СТЕКЛО ══════════════════════════════ Как стеклянные панели в iOS. Затемнённый жёлтый сам по себе даёт оливковый — поэтому фон под стеклом сначала гасим по насыщенности, потом затемняем: выходит графит с тёплым отливом. Ощущение стекла дают блики: · кромка с переливом — светлее сверху-слева и снизу-справа (::after, рамка через маску); · глянец по верхней трети; · тонкий блик по самому верху. */ [data-theme="next"] .hero-strip .trust-items { position: relative; isolation: isolate; background: linear-gradient(180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, 0) 60%), rgba(24, 22, 20, .42) !important; -webkit-backdrop-filter: blur(26px) saturate(35%) brightness(.36); backdrop-filter: blur(26px) saturate(35%) brightness(.36); border: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -1px 0 rgba(255, 255, 255, .08), 0 24px 50px rgba(110, 55, 0, .26), 0 3px 8px rgba(60, 30, 0, .12) !important; } [data-theme="next"] .hero-strip .trust-items::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .12) 28%, rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .14) 80%, rgba(255, 255, 255, .42) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; z-index: 2; } [data-theme="next"] .hero-strip .trust-item { position: relative; z-index: 1; border-color: rgba(255, 255, 255, .10) !important; } [data-theme="next"] .hero-strip .trust-label { color: rgba(255, 255, 255, .72) !important; } /* без поддержки размытия — просто плотный графит */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-theme="next"] .hero-strip .trust-items { background: #232120 !important; } } /* ══ «БЕСПЛАТНЫЙ АУДИТ» — КАК МЕТКА «РАБОТАЕМ ПО ВСЕЙ РОССИИ» ═ Тот же приглушённый тёмный тон на жёлтом, без стекла. Вторая кнопка читается как спокойная пара к красной. */ [data-theme="next"] .hero-left .btn-outline, [data-theme="next"] .hero-actions a:not(.btn-primary) { background: rgba(26, 26, 26, .07) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid transparent !important; box-shadow: none !important; color: #1A1A1A !important; } [data-theme="next"] .hero-left .btn-outline:hover, [data-theme="next"] .hero-actions a:not(.btn-primary):hover { background: rgba(26, 26, 26, .13) !important; box-shadow: none !important; transform: none; } /* ══ ШАПКА: ПОЧТА ПОД ТЕЛЕФОНОМ ══════════════════════════════ Телефон и почта одним блоком, выровнены по правому краю. Ниже 1500 телефон уже скрыт (там бургер) — почта с ним. */ [data-theme="next"] .header-contact { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; gap: 3px; } [data-chrome="next"] .header-contact { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; gap: 3px; } [data-theme="next"] .header-mail { display: block; font-size: 12.5px; font-weight: 500; color: var(--g600, #6f6f6f); text-decoration: none; white-space: nowrap; } [data-chrome="next"] .header-mail { display: block; font-size: 12.5px; font-weight: 500; color: var(--g600, #6f6f6f); text-decoration: none; white-space: nowrap; } [data-theme="next"] .header-mail:hover { color: var(--red, #D6001C); } [data-chrome="next"] .header-mail:hover { color: var(--red, #D6001C); } @media (max-width: 1499px) { [data-theme="next"] .header-contact { display: none; } [data-chrome="next"] .header-contact { display: none; } } /* Кнопка «Консультация» ведёт к блоку аудита — под фиксированной шапкой ему нужен запас сверху. */ [data-theme="next"] #audit { scroll-margin-top: 96px; } /* ══ ВЫПАДАЮЩЕЕ МЕНЮ ═════════════════════════════════════════ Было: сплошной список, при наведении пункт уезжал вправо. Стало: · под каждым пунктом короткая подсказка — что там; · «Услуги» — в две колонки, восемь пунктов не тянутся простынёй, «Все услуги» — кнопкой во всю ширину; · наведение без сдвига: мягкая тёплая подложка и красная стрелка справа, которая показывает, куда нажимать; · открывается чуть заметнее — съезжает сверху и проявляется, а не просто мигает. */ [data-theme="next"] .nav-menu { padding: 8px !important; gap: 2px !important; min-width: 300px !important; border: 1px solid rgba(26, 26, 26, .07) !important; box-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 24px 56px rgba(20, 20, 20, .16) !important; transform: translate(-50%, 8px) !important; transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1), visibility .18s !important; } [data-chrome="next"] .nav-menu { padding: 8px !important; gap: 2px !important; min-width: 300px !important; border: 1px solid rgba(26, 26, 26, .07) !important; box-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 24px 56px rgba(20, 20, 20, .16) !important; transform: translate(-50%, 8px) !important; transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1), visibility .18s !important; } [data-theme="next"] .nav-drop:hover .nav-menu, [data-theme="next"] .nav-drop:focus-within .nav-menu { transform: translate(-50%, 0) !important; } [data-chrome="next"] .nav-drop:hover .nav-menu, [data-chrome="next"] .nav-drop:focus-within .nav-menu { transform: translate(-50%, 0) !important; } [data-theme="next"] .nav-menu a { display: grid !important; grid-template-columns: auto 1fr 16px; grid-template-areas: "t b go" "h h go"; align-items: center; column-gap: 8px !important; row-gap: 2px; padding: 10px 12px !important; font-size: 14.5px !important; font-weight: 600 !important; color: #1A1A1A !important; line-height: 1.25; white-space: normal !important; transition: background .16s ease, color .16s ease !important; } [data-chrome="next"] .nav-menu a { display: grid !important; grid-template-columns: auto 1fr 16px; grid-template-areas: "t b go" "h h go"; align-items: center; column-gap: 8px !important; row-gap: 2px; padding: 10px 12px !important; font-size: 14.5px !important; font-weight: 600 !important; color: #1A1A1A !important; line-height: 1.25; white-space: normal !important; transition: background .16s ease, color .16s ease !important; } [data-theme="next"] .nav-menu a .nm-badge { grid-area: b; justify-self: start; } [data-chrome="next"] .nav-menu a .nm-badge { grid-area: b; justify-self: start; } [data-theme="next"] .nav-menu .nm-hint { grid-area: h; display: block; font-size: 12.5px; font-weight: 500; color: #8a8a8a; line-height: 1.35; } [data-chrome="next"] .nav-menu .nm-hint { grid-area: h; display: block; font-size: 12.5px; font-weight: 500; color: #8a8a8a; line-height: 1.35; } /* стрелка справа — появляется при наведении */ [data-theme="next"] .nav-menu a::before { content: "" !important; display: block !important; grid-area: go; width: 8px; height: 8px; border-top: 2px solid var(--red, #D6001C); border-right: 2px solid var(--red, #D6001C); transform: rotate(45deg) translateX(-4px); opacity: 0; transition: opacity .16s ease, transform .16s ease; position: static !important; } [data-chrome="next"] .nav-menu a::before { content: "" !important; display: block !important; grid-area: go; width: 8px; height: 8px; border-top: 2px solid var(--red, #D6001C); border-right: 2px solid var(--red, #D6001C); transform: rotate(45deg) translateX(-4px); opacity: 0; transition: opacity .16s ease, transform .16s ease; position: static !important; } [data-theme="next"] .nav-menu a:hover, [data-theme="next"] .nav-menu a:focus-visible { background: #FFF7DA !important; color: #1A1A1A !important; padding-left: 12px !important; } [data-chrome="next"] .nav-menu a:hover, [data-chrome="next"] .nav-menu a:focus-visible { background: #FFF7DA !important; color: #1A1A1A !important; padding-left: 12px !important; } [data-theme="next"] .nav-menu a:hover::before, [data-theme="next"] .nav-menu a:focus-visible::before { opacity: 1; transform: rotate(45deg) translateX(0); } [data-chrome="next"] .nav-menu a:hover::before, [data-chrome="next"] .nav-menu a:focus-visible::before { opacity: 1; transform: rotate(45deg) translateX(0); } [data-theme="next"] .nav-menu a:hover .nm-hint { color: #6f5a10; } [data-chrome="next"] .nav-menu a:hover .nm-hint { color: #6f5a10; } /* текущий раздел: красное название, без подложки */ [data-theme="next"] .nav .nav-menu a.active { background: transparent !important; color: var(--red, #D6001C) !important; } [data-chrome="next"] .nav .nav-menu a.active { background: transparent !important; color: var(--red, #D6001C) !important; } [data-theme="next"] .nav .nav-menu a.active:hover { background: #FFF7DA !important; } [data-chrome="next"] .nav .nav-menu a.active:hover { background: #FFF7DA !important; } [data-theme="next"] .nav-menu .nm-sep { margin: 6px 8px !important; } [data-chrome="next"] .nav-menu .nm-sep { margin: 6px 8px !important; } /* «Услуги» — первая выпадайка: две колонки */ [data-theme="next"] .nav-drop:first-child .nav-menu { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 660px; min-width: 0 !important; } [data-chrome="next"] .nav-drop:first-child .nav-menu { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 660px; min-width: 0 !important; } [data-theme="next"] .nav-drop:first-child .nav-menu .nm-sep { grid-column: 1 / -1; } [data-chrome="next"] .nav-drop:first-child .nav-menu .nm-sep { grid-column: 1 / -1; } /* «Все услуги» — последняя ссылка, спокойной кнопкой */ [data-theme="next"] .nav-drop:first-child .nav-menu a:last-child { grid-column: 1 / -1; grid-template-columns: 1fr 16px; grid-template-areas: "t go"; justify-items: center; background: #F6F4EF !important; font-weight: 700 !important; } [data-chrome="next"] .nav-drop:first-child .nav-menu a:last-child { grid-column: 1 / -1; grid-template-columns: 1fr 16px; grid-template-areas: "t go"; justify-items: center; background: #F6F4EF !important; font-weight: 700 !important; } [data-theme="next"] .nav-drop:first-child .nav-menu a:last-child:hover { background: #FFF7DA !important; } [data-chrome="next"] .nav-drop:first-child .nav-menu a:last-child:hover { background: #FFF7DA !important; } /* у «Все услуги →» стрелка уже в тексте — вторая не нужна */ [data-theme="next"] .nav-drop:first-child .nav-menu a:last-child::before { opacity: 0 !important; } [data-chrome="next"] .nav-drop:first-child .nav-menu a:last-child::before { opacity: 0 !important; } [data-theme="next"] .nav-drop:first-child .nav-menu a:last-child { grid-template-columns: 1fr; grid-template-areas: "t"; } [data-chrome="next"] .nav-drop:first-child .nav-menu a:last-child { grid-template-columns: 1fr; grid-template-areas: "t"; } /* ── «Бесплатный аудит» чуть светлее метки ─────────────────── */ [data-theme="next"] .hero-left .btn-outline, [data-theme="next"] .hero-actions a:not(.btn-primary) { background: rgba(26, 26, 26, .045) !important; } [data-theme="next"] .hero-left .btn-outline:hover, [data-theme="next"] .hero-actions a:not(.btn-primary):hover { background: rgba(26, 26, 26, .09) !important; } /* ── Заголовок первого экрана на узких экранах ──────────────── При 0.98 строки на телефоне почти касались друг друга. */ @media (max-width: 820px) { [data-theme="next"] .hero h1 { line-height: 1.08 !important; } } /* ══ МОБИЛЬНОЕ МЕНЮ ═════════════════════════════════════════ Было: шестнадцать пунктов крупным шрифтом одной простынёй, крестик в пустоте. Стало, как в приложениях: · сверху закреплённая полоса с логотипом и крестиком; · пункты разложены по четырём группам с подписями; · каждая группа — карточка со скруглением 16, пункты внутри разделены тонкой линией, справа стрелка; · контакты — две плитки, кнопка «Получить консультацию» прилипает к низу экрана. Порядок в разметке не меняли (на боевом он прежний) — группы собираются через order. */ [data-theme="next"] .mobile-overlay { padding: 0 16px calc(96px + env(safe-area-inset-bottom)) !important; background: #F6F5F1 !important; gap: 0 !important; } [data-chrome="next"] .mobile-overlay { padding: 0 16px calc(96px + env(safe-area-inset-bottom)) !important; background: #F6F5F1 !important; gap: 0 !important; } [data-theme="next"] .mobile-overlay > * { order: 90; } [data-chrome="next"] .mobile-overlay > * { order: 90; } /* шапка */ [data-theme="next"] .mm-head { order: 0; display: flex; align-items: center; position: sticky; top: 0; z-index: 3; margin: 0 -16px 4px; padding: 0 72px 0 16px; height: 64px; background: rgba(246, 245, 241, .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(26, 26, 26, .06); } [data-chrome="next"] .mm-head { order: 0; display: flex; align-items: center; position: sticky; top: 0; z-index: 3; margin: 0 -16px 4px; padding: 0 72px 0 16px; height: 64px; background: rgba(246, 245, 241, .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(26, 26, 26, .06); } [data-theme="next"] .mobile-overlay a.mm-logo { display: flex; align-items: center; gap: 10px; padding: 0 !important; border: 0 !important; font-size: 16px !important; letter-spacing: 0 !important; } [data-chrome="next"] .mobile-overlay a.mm-logo { display: flex; align-items: center; gap: 10px; padding: 0 !important; border: 0 !important; font-size: 16px !important; letter-spacing: 0 !important; } [data-theme="next"] .mm-logo img { height: 40px; width: auto; display: block; } [data-chrome="next"] .mm-logo img { height: 40px; width: auto; display: block; } [data-theme="next"] .mm-logo-t { display: flex; flex-direction: column; line-height: 1.15; } [data-chrome="next"] .mm-logo-t { display: flex; flex-direction: column; line-height: 1.15; } [data-theme="next"] .mm-logo-t b { font-size: 15px; font-weight: 800; color: #1A1A1A; } [data-chrome="next"] .mm-logo-t b { font-size: 15px; font-weight: 800; color: #1A1A1A; } [data-theme="next"] .mm-logo-t span { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a8a8a; } [data-chrome="next"] .mm-logo-t span { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a8a8a; } [data-theme="next"] .mobile-close { position: fixed !important; top: 12px !important; right: 16px !important; z-index: 4; width: 40px !important; height: 40px !important; border-radius: var(--r-sm) !important; background: #fff !important; box-shadow: 0 1px 3px rgba(26, 26, 26, .08); } [data-chrome="next"] .mobile-close { position: fixed !important; top: 12px !important; right: 16px !important; z-index: 4; width: 40px !important; height: 40px !important; border-radius: var(--r-sm) !important; background: #fff !important; box-shadow: 0 1px 3px rgba(26, 26, 26, .08); } /* подписи групп */ [data-theme="next"] .mm-cap { display: block; margin: 20px 4px 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; } [data-chrome="next"] .mm-cap { display: block; margin: 20px 4px 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; } [data-theme="next"] .mm-cap--1 { order: 10; margin-top: 12px; } [data-chrome="next"] .mm-cap--1 { order: 10; margin-top: 12px; } [data-theme="next"] .mm-cap--2 { order: 20; } [data-chrome="next"] .mm-cap--2 { order: 20; } [data-theme="next"] .mm-cap--3 { order: 30; } [data-chrome="next"] .mm-cap--3 { order: 30; } [data-theme="next"] .mm-cap--4 { order: 40; } [data-chrome="next"] .mm-cap--4 { order: 40; } /* пункты — строки карточки */ [data-theme="next"] .mobile-overlay > a:not(.mm-consult) { position: relative; display: flex; align-items: center; min-height: 50px; padding: 12px 44px 12px 16px !important; background: #fff; border: 0 !important; font-size: 16.5px !important; font-weight: 600 !important; letter-spacing: -.01em !important; color: #1A1A1A; } [data-chrome="next"] .mobile-overlay > a:not(.mm-consult) { position: relative; display: flex; align-items: center; min-height: 50px; padding: 12px 44px 12px 16px !important; background: #fff; border: 0 !important; font-size: 16.5px !important; font-weight: 600 !important; letter-spacing: -.01em !important; color: #1A1A1A; } [data-theme="next"] .mobile-overlay > a:not(.mm-consult)::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; border-top: 2px solid #c4c1b9; border-right: 2px solid #c4c1b9; transform: translateY(-50%) rotate(45deg); } [data-chrome="next"] .mobile-overlay > a:not(.mm-consult)::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; border-top: 2px solid #c4c1b9; border-right: 2px solid #c4c1b9; transform: translateY(-50%) rotate(45deg); } /* разделитель внутри карточки — со сдвигом от края, как в iOS */ [data-theme="next"] .mobile-overlay > a:not(.mm-consult)::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: rgba(26, 26, 26, .07); } [data-chrome="next"] .mobile-overlay > a:not(.mm-consult)::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: rgba(26, 26, 26, .07); } [data-theme="next"] .mobile-overlay > a:not(.mm-consult):active { background: #FFF7DA; } [data-chrome="next"] .mobile-overlay > a:not(.mm-consult):active { background: #FFF7DA; } [data-theme="next"] .mobile-overlay > a.active { color: var(--red, #D6001C) !important; } [data-chrome="next"] .mobile-overlay > a.active { color: var(--red, #D6001C) !important; } [data-theme="next"] .mobile-overlay > a.active::after { border-color: var(--red, #D6001C); } [data-chrome="next"] .mobile-overlay > a.active::after { border-color: var(--red, #D6001C); } /* раскладка по группам */ [data-theme="next"] .mobile-overlay > a[href$="/uslugi/"] { order: 11; } [data-chrome="next"] .mobile-overlay > a[href$="/uslugi/"] { order: 11; } [data-theme="next"] .mobile-overlay > a[href$="#services"] { order: 12; } [data-chrome="next"] .mobile-overlay > a[href$="#services"] { order: 12; } [data-theme="next"] .mobile-overlay > a[href$="#tariffs"] { order: 13; } [data-chrome="next"] .mobile-overlay > a[href$="#tariffs"] { order: 13; } [data-theme="next"] .mobile-overlay > a[href$="/kalkulyatory/"]{ order: 21; } [data-chrome="next"] .mobile-overlay > a[href$="/kalkulyatory/"] { order: 21; } [data-theme="next"] .mobile-overlay > a[href$="/calendar/"] { order: 22; } [data-chrome="next"] .mobile-overlay > a[href$="/calendar/"] { order: 22; } [data-theme="next"] .mobile-overlay > a[href$="/vidzhety/"] { order: 23; } [data-chrome="next"] .mobile-overlay > a[href$="/vidzhety/"] { order: 23; } [data-theme="next"] .mobile-overlay > a[href$="/materialy/"] { order: 24; } [data-chrome="next"] .mobile-overlay > a[href$="/materialy/"] { order: 24; } [data-theme="next"] .mobile-overlay > a[href$="/novosti/"] { order: 31; } [data-chrome="next"] .mobile-overlay > a[href$="/novosti/"] { order: 31; } [data-theme="next"] .mobile-overlay > a[href$="/blog/"] { order: 32; } [data-chrome="next"] .mobile-overlay > a[href$="/blog/"] { order: 32; } [data-theme="next"] .mobile-overlay > a[href$="/podkast/"] { order: 33; } [data-chrome="next"] .mobile-overlay > a[href$="/podkast/"] { order: 33; } [data-theme="next"] .mobile-overlay > a[href$="/guides/"] { order: 34; } [data-chrome="next"] .mobile-overlay > a[href$="/guides/"] { order: 34; } [data-theme="next"] .mobile-overlay > a[href$="/meropriyatiya/"]{ order: 35; } [data-chrome="next"] .mobile-overlay > a[href$="/meropriyatiya/"] { order: 35; } [data-theme="next"] .mobile-overlay > a[href$="#why"] { order: 41; } [data-chrome="next"] .mobile-overlay > a[href$="#why"] { order: 41; } [data-theme="next"] .mobile-overlay > a[href$="#reviews"] { order: 42; } [data-chrome="next"] .mobile-overlay > a[href$="#reviews"] { order: 42; } [data-theme="next"] .mobile-overlay > a[href$="/vakansii/"] { order: 43; } [data-chrome="next"] .mobile-overlay > a[href$="/vakansii/"] { order: 43; } [data-theme="next"] .mobile-overlay > a[href$="#contacts"] { order: 44; } [data-chrome="next"] .mobile-overlay > a[href$="#contacts"] { order: 44; } /* первые и последние в группе — скругление карточки */ [data-theme="next"] .mobile-overlay > a[href$="/uslugi/"], [data-theme="next"] .mobile-overlay > a[href$="/kalkulyatory/"], [data-theme="next"] .mobile-overlay > a[href$="/novosti/"], [data-theme="next"] .mobile-overlay > a[href$="#why"] { border-radius: var(--r-md) var(--r-md) 0 0 !important; } [data-chrome="next"] .mobile-overlay > a[href$="/uslugi/"], [data-chrome="next"] .mobile-overlay > a[href$="/kalkulyatory/"], [data-chrome="next"] .mobile-overlay > a[href$="/novosti/"], [data-chrome="next"] .mobile-overlay > a[href$="#why"] { border-radius: var(--r-md) var(--r-md) 0 0 !important; } [data-theme="next"] .mobile-overlay > a[href$="/uslugi/"]::before, [data-theme="next"] .mobile-overlay > a[href$="/kalkulyatory/"]::before, [data-theme="next"] .mobile-overlay > a[href$="/novosti/"]::before, [data-theme="next"] .mobile-overlay > a[href$="#why"]::before { display: none; } [data-chrome="next"] .mobile-overlay > a[href$="/uslugi/"]::before, [data-chrome="next"] .mobile-overlay > a[href$="/kalkulyatory/"]::before, [data-chrome="next"] .mobile-overlay > a[href$="/novosti/"]::before, [data-chrome="next"] .mobile-overlay > a[href$="#why"]::before { display: none; } [data-theme="next"] .mobile-overlay > a[href$="#tariffs"], [data-theme="next"] .mobile-overlay > a[href$="/materialy/"], [data-theme="next"] .mobile-overlay > a[href$="/meropriyatiya/"], [data-theme="next"] .mobile-overlay > a[href$="#contacts"] { border-radius: 0 0 var(--r-md) var(--r-md) !important; } [data-chrome="next"] .mobile-overlay > a[href$="#tariffs"], [data-chrome="next"] .mobile-overlay > a[href$="/materialy/"], [data-chrome="next"] .mobile-overlay > a[href$="/meropriyatiya/"], [data-chrome="next"] .mobile-overlay > a[href$="#contacts"] { border-radius: 0 0 var(--r-md) var(--r-md) !important; } /* контакты — две плитки */ [data-theme="next"] .mm-contacts { order: 50; display: grid !important; grid-template-columns: 1fr; gap: 8px; margin: 20px 0 0 !important; padding: 0 !important; border: 0 !important; } [data-chrome="next"] .mm-contacts { order: 50; display: grid !important; grid-template-columns: 1fr; gap: 8px; margin: 20px 0 0 !important; padding: 0 !important; border: 0 !important; } [data-theme="next"] .mm-contacts a { display: flex !important; align-items: center; gap: 12px; padding: 12px 14px !important; background: #fff; border: 0 !important; border-radius: var(--r-md) !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0 !important; color: #1A1A1A; min-width: 0; } [data-chrome="next"] .mm-contacts a { display: flex !important; align-items: center; gap: 12px; padding: 12px 14px !important; background: #fff; border: 0 !important; border-radius: var(--r-md) !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0 !important; color: #1A1A1A; min-width: 0; } [data-theme="next"] .mm-contacts a.mm-mail { font-size: 14.5px !important; font-weight: 600 !important; overflow-wrap: anywhere; } [data-chrome="next"] .mm-contacts a.mm-mail { font-size: 14.5px !important; font-weight: 600 !important; overflow-wrap: anywhere; } [data-theme="next"] .mm-contacts .mm-ico { flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--r-sm) !important; background: #FFD100; display: flex; align-items: center; justify-content: center; } [data-chrome="next"] .mm-contacts .mm-ico { flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--r-sm) !important; background: #FFD100; display: flex; align-items: center; justify-content: center; } [data-theme="next"] .mm-contacts .mm-ico svg { width: 18px; height: 18px; } [data-chrome="next"] .mm-contacts .mm-ico svg { width: 18px; height: 18px; } /* кнопка прилипает к низу */ [data-theme="next"] .mobile-overlay a.mm-consult { order: 60; position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); margin: 20px 0 0 !important; min-height: 52px; display: flex !important; align-items: center; justify-content: center; border-radius: var(--r-sm) !important; box-shadow: 0 10px 24px rgba(214, 0, 28, .28); z-index: 2; } [data-chrome="next"] .mobile-overlay a.mm-consult { order: 60; position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); margin: 20px 0 0 !important; min-height: 52px; display: flex !important; align-items: center; justify-content: center; border-radius: var(--r-sm) !important; box-shadow: 0 10px 24px rgba(214, 0, 28, .28); z-index: 2; } /* У открытой панели сдвиг не нужен. Пока transform задан, «фиксированный» крестик привязан к панели и уезжает при прокрутке меню; с none — держится на экране. */ [data-theme="next"] .mobile-overlay.open { transform: none !important; } [data-chrome="next"] .mobile-overlay.open { transform: none !important; } /* ── «Все услуги» — подвал выпадайки ───────────────────────── Кнопкой внутри меню она стояла в 9 пикселях от края: скругление 12 внутри скругления 16 давало кривые углы, а линия над ней была короче самой кнопки. Теперь это полоса во всю ширину меню, прижатая к низу, с тем же скруглением снизу. Линия не нужна — полосу отделяет цвет. */ [data-theme="next"] .nav-drop:first-child .nav-menu { padding-bottom: 0 !important; overflow: hidden; } [data-chrome="next"] .nav-drop:first-child .nav-menu { padding-bottom: 0 !important; overflow: hidden; } [data-theme="next"] .nav-drop:first-child .nav-menu .nm-sep { display: none !important; } [data-chrome="next"] .nav-drop:first-child .nav-menu .nm-sep { display: none !important; } [data-theme="next"] .nav-drop:first-child .nav-menu a:last-child { margin: 8px -8px 0 !important; min-height: 52px; padding: 0 16px !important; border-radius: 0 !important; background: #FFF1B8 !important; border-top: 1px solid rgba(214, 160, 0, .18) !important; color: #1A1A1A !important; font-size: 14.5px !important; } [data-chrome="next"] .nav-drop:first-child .nav-menu a:last-child { margin: 8px -8px 0 !important; min-height: 52px; padding: 0 16px !important; border-radius: 0 !important; background: #FFF1B8 !important; border-top: 1px solid rgba(214, 160, 0, .18) !important; color: #1A1A1A !important; font-size: 14.5px !important; } [data-theme="next"] .nav-drop:first-child .nav-menu a:last-child:hover { background: #FFE680 !important; } [data-chrome="next"] .nav-drop:first-child .nav-menu a:last-child:hover { background: #FFE680 !important; } /* у меню overflow: hidden — стрелка-уголок над ним и мостик для мыши обрезались бы; у этого меню переносим их в тень от ссылки «Услуги», а мостик даёт отступ сверху */ [data-theme="next"] .nav-drop:first-child .nav-menu::after { display: none; } [data-chrome="next"] .nav-drop:first-child .nav-menu::after { display: none; } /* ── «Бесплатный аудит» — светлая стеклянная ─────────────── */ [data-theme="next"] .hero-left .btn-outline, [data-theme="next"] .hero-actions a:not(.btn-primary) { background: rgba(255, 255, 255, .5) !important; border: 1px solid rgba(255, 255, 255, .7) !important; } [data-theme="next"] .hero-left .btn-outline:hover, [data-theme="next"] .hero-actions a:not(.btn-primary):hover { background: rgba(255, 255, 255, .72) !important; } [data-theme="next"] .nav-drop:first-child .nav-menu a:last-child { align-content: center; } [data-chrome="next"] .nav-drop:first-child .nav-menu a:last-child { align-content: center; } /* скрытая стрелка занимала в сетке лишнюю строку снизу */ [data-theme="next"] .nav-drop:first-child .nav-menu a:last-child::before { display: none !important; } [data-chrome="next"] .nav-drop:first-child .nav-menu a:last-child::before { display: none !important; } /* ══ МОБИЛЬНОЕ МЕНЮ: ДОРАБОТКА ═══════════════════════════════ · Шапка сжималась до 41 пикселя: меню — гибкий столбец, и когда пункты не помещаются, браузер ужимает элементы. Крестик (40) при этом вылезал на линию. Запрещаем сжатие. · Подписи групп — обычные жирные заголовки, без капса. · У каждого пункта иконка на светло-жёлтой плитке: два слоя фона — контурный значок поверх скруглённой плитки. Разделитель начинается от текста, как в iOS. · Плашка встречи и кнопка связи не лежат поверх меню. */ [data-theme="next"] .mobile-overlay > * { flex-shrink: 0 !important; } [data-chrome="next"] .mobile-overlay > * { flex-shrink: 0 !important; } [data-theme="next"] .mm-head { height: 64px; min-height: 64px; } [data-chrome="next"] .mm-head { height: 64px; min-height: 64px; } [data-theme="next"] .mm-cap { margin: 26px 4px 10px !important; font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.01em !important; text-transform: none !important; color: #1A1A1A !important; } [data-chrome="next"] .mm-cap { margin: 26px 4px 10px !important; font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.01em !important; text-transform: none !important; color: #1A1A1A !important; } [data-theme="next"] .mm-cap--1 { margin-top: 16px !important; } [data-chrome="next"] .mm-cap--1 { margin-top: 16px !important; } [data-theme="next"] .mobile-overlay > a:not(.mm-consult):not(.mm-logo) { min-height: 56px; padding-left: 62px !important; background-color: #fff; background-repeat: no-repeat, no-repeat; background-position: 22px center, 14px center; background-size: 18px 18px, 34px 34px; } [data-chrome="next"] .mobile-overlay > a:not(.mm-consult):not(.mm-logo) { min-height: 56px; padding-left: 62px !important; background-color: #fff; background-repeat: no-repeat, no-repeat; background-position: 22px center, 14px center; background-size: 18px 18px, 34px 34px; } [data-theme="next"] .mobile-overlay > a:not(.mm-consult)::before { left: 62px !important; } [data-chrome="next"] .mobile-overlay > a:not(.mm-consult)::before { left: 62px !important; } [data-theme="next"] .mobile-overlay > a:not(.mm-consult):not(.mm-logo):active { background-color: #FFF7DA; } [data-chrome="next"] .mobile-overlay > a:not(.mm-consult):not(.mm-logo):active { background-color: #FFF7DA; } [data-theme="next"] .mobile-overlay > a[href$="/uslugi/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%277%27%20width%3D%2718%27%20height%3D%2713%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%207V5a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2M3%2013h18%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="/uslugi/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%277%27%20width%3D%2718%27%20height%3D%2713%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%207V5a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2M3%2013h18%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .mobile-overlay > a[href$="#services"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2018h6M10%2022h4M12%202a7%207%200%200%200-4%2012.7V17h8v-2.3A7%207%200%200%200%2012%202z%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="#services"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2018h6M10%2022h4M12%202a7%207%200%200%200-4%2012.7V17h8v-2.3A7%207%200%200%200%2012%202z%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .mobile-overlay > a[href$="#tariffs"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.6%2013.4l-7.2%207.2a2%202%200%200%201-2.8%200L3%2013V3h10l7.6%207.6a2%202%200%200%201%200%202.8z%27%2F%3E%3Ccircle%20cx%3D%277.5%27%20cy%3D%277.5%27%20r%3D%271.5%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="#tariffs"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.6%2013.4l-7.2%207.2a2%202%200%200%201-2.8%200L3%2013V3h10l7.6%207.6a2%202%200%200%201%200%202.8z%27%2F%3E%3Ccircle%20cx%3D%277.5%27%20cy%3D%277.5%27%20r%3D%271.5%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .mobile-overlay > a[href$="/kalkulyatory/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%272%27%20width%3D%2716%27%20height%3D%2720%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%206h8M8%2011h.01M12%2011h.01M16%2011h.01M8%2015h.01M12%2015h.01M16%2015h.01M8%2018.5h8%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="/kalkulyatory/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%272%27%20width%3D%2716%27%20height%3D%2720%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%206h8M8%2011h.01M12%2011h.01M16%2011h.01M8%2015h.01M12%2015h.01M16%2015h.01M8%2018.5h8%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .mobile-overlay > a[href$="/calendar/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M16%202v4M8%202v4M3%2010h18%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="/calendar/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2718%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M16%202v4M8%202v4M3%2010h18%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .mobile-overlay > a[href$="/vidzhety/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2018l6-6-6-6M8%206l-6%206%206%206%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="/vidzhety/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2018l6-6-6-6M8%206l-6%206%206%206%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .mobile-overlay > a[href$="/materialy/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202l10%205-10%205L2%207z%27%2F%3E%3Cpath%20d%3D%27M2%2017l10%205%2010-5M2%2012l10%205%2010-5%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="/materialy/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202l10%205-10%205L2%207z%27%2F%3E%3Cpath%20d%3D%27M2%2017l10%205%2010-5M2%2012l10%205%2010-5%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .mobile-overlay > a[href$="/novosti/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%204h13v16H6a2%202%200%200%201-2-2z%27%2F%3E%3Cpath%20d%3D%27M17%208h3v10a2%202%200%200%201-2%202M8%208h5M8%2012h5M8%2016h3%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="/novosti/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%204h13v16H6a2%202%200%200%201-2-2z%27%2F%3E%3Cpath%20d%3D%27M17%208h3v10a2%202%200%200%201-2%202M8%208h5M8%2012h5M8%2016h3%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .mobile-overlay > a[href$="/blog/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2020h9%27%2F%3E%3Cpath%20d%3D%27M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4z%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="/blog/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2020h9%27%2F%3E%3Cpath%20d%3D%27M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4z%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .mobile-overlay > a[href$="/podkast/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%279%27%20y%3D%272%27%20width%3D%276%27%20height%3D%2712%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M19%2010v1a7%207%200%200%201-14%200v-1M12%2018v4%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="/podkast/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%279%27%20y%3D%272%27%20width%3D%276%27%20height%3D%2712%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M19%2010v1a7%207%200%200%201-14%200v-1M12%2018v4%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .mobile-overlay > a[href$="/guides/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20V3H6.5A2.5%202.5%200%200%200%204%205.5z%27%2F%3E%3Cpath%20d%3D%27M4%2019.5A2.5%202.5%200%200%200%206.5%2022H20v-5%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="/guides/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20V3H6.5A2.5%202.5%200%200%200%204%205.5z%27%2F%3E%3Cpath%20d%3D%27M4%2019.5A2.5%202.5%200%200%200%206.5%2022H20v-5%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .mobile-overlay > a[href$="/meropriyatiya/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M2%2021a7%207%200%200%201%2014%200M16%204a4%204%200%200%201%200%208M22%2021a6%206%200%200%200-4-5.7%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="/meropriyatiya/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M2%2021a7%207%200%200%201%2014%200M16%204a4%204%200%200%201%200%208M22%2021a6%206%200%200%200-4-5.7%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .mobile-overlay > a[href$="#why"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202l3.1%206.3%206.9%201-5%204.9%201.2%206.8L12%2017.8%205.8%2021l1.2-6.8-5-4.9%206.9-1z%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="#why"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202l3.1%206.3%206.9%201-5%204.9%201.2%206.8L12%2017.8%205.8%2021l1.2-6.8-5-4.9%206.9-1z%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .mobile-overlay > a[href$="#reviews"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="#reviews"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .mobile-overlay > a[href$="/vakansii/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M2%2021a7%207%200%200%201%2014%200M19%208v6M16%2011h6%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="/vakansii/"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M2%2021a7%207%200%200%201%2014%200M19%208v6M16%2011h6%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .mobile-overlay > a[href$="#contacts"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2010c0%206-8%2012-8%2012S4%2016%204%2010a8%208%200%200%201%2016%200z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-chrome="next"] .mobile-overlay > a[href$="#contacts"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2010c0%206-8%2012-8%2012S4%2016%204%2010a8%208%200%200%201%2016%200z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2034%2034%27%3E%3Crect%20width%3D%2734%27%20height%3D%2734%27%20rx%3D%2712%27%20fill%3D%27%23FFF1B8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] body:has(.mobile-overlay.open) .evf, [data-theme="next"] body:has(.mobile-overlay.open) .float-messengers { display: none !important; } [data-chrome="next"] body:has(.mobile-overlay.open) .evf, [data-chrome="next"] body:has(.mobile-overlay.open) .float-messengers { display: none !important; } /* плитки контактов — в тон иконкам пунктов */ [data-theme="next"] .mm-contacts .mm-ico { background: #FFF1B8 !important; width: 34px; height: 34px; flex-basis: 34px; } [data-chrome="next"] .mm-contacts .mm-ico { background: #FFF1B8 !important; width: 34px; height: 34px; flex-basis: 34px; } /* ══ МОБИЛЬНОЕ МЕНЮ: КОЛОНКА, КРЕСТИК, КНОПКА ════════════════ Бургер появляется до 1500, и на планшете меню растягивалось на всё окно: крестик уезжал к правому краю, далеко от логотипа. Теперь: · содержимое — в колонке до 560 по центру; · полоса сверху во всю ширину, но логотип и крестик стоят по краям той же колонки; · крестик — своя кнопка внутри полосы (.mm-x), старый плавающий скрыт; · «Получить консультацию» — обычная кнопка в самом низу. */ [data-theme="next"] .mobile-overlay { --mm-col: min(560px, calc(100% - 32px)); padding: 0 0 calc(28px + env(safe-area-inset-bottom)) !important; align-items: center !important; } [data-chrome="next"] .mobile-overlay { --mm-col: min(560px, calc(100% - 32px)); padding: 0 0 calc(28px + env(safe-area-inset-bottom)) !important; align-items: center !important; } [data-theme="next"] .mobile-overlay > * { width: var(--mm-col); box-sizing: border-box; } [data-chrome="next"] .mobile-overlay > * { width: var(--mm-col); box-sizing: border-box; } [data-theme="next"] .mobile-overlay .mobile-close { display: none !important; } [data-chrome="next"] .mobile-overlay .mobile-close { display: none !important; } [data-theme="next"] .mm-head { width: 100% !important; margin: 0 0 4px !important; padding: 0 max(16px, calc((100% - 560px) / 2)) !important; justify-content: space-between; gap: 12px; } [data-chrome="next"] .mm-head { width: 100% !important; margin: 0 0 4px !important; padding: 0 max(16px, calc((100% - 560px) / 2)) !important; justify-content: space-between; gap: 12px; } [data-theme="next"] .mm-x { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-sm); background: #fff; color: #1A1A1A; box-shadow: 0 1px 3px rgba(26, 26, 26, .08); cursor: pointer; } [data-chrome="next"] .mm-x { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-sm); background: #fff; color: #1A1A1A; box-shadow: 0 1px 3px rgba(26, 26, 26, .08); cursor: pointer; } [data-theme="next"] .mm-x:active { background: #FFF7DA; } [data-chrome="next"] .mm-x:active { background: #FFF7DA; } [data-theme="next"] .mobile-overlay a.mm-consult { position: static !important; margin: 16px 0 0 !important; box-shadow: none !important; } [data-chrome="next"] .mobile-overlay a.mm-consult { position: static !important; margin: 16px 0 0 !important; box-shadow: none !important; } /* ══ ИСТОРИИ: ЛЕНТА ══════════════════════════════════════════ · Лента в общей колонке. У ряда был свой отступ 5vw, и он складывался с отступом колонки — кружки уезжали вправо. Отступ теперь один, у самого ряда: при прокрутке кружки уходят под край окна, а не обрезаются по колонке. · Кольцо как в соцсетях: непросмотренные — перелив от жёлтого к красному, между кольцом и картинкой белый зазор; просмотренные — спокойное серое. Пульсацию убрали. · На телефоне кружки меньше — в ряд входит больше историй. */ [data-theme="next"] .st-section { padding-top: clamp(20px, 2.6vw, 36px) !important; padding-bottom: clamp(8px, 1.2vw, 16px) !important; } /* правило «все секции в колонку» весит больше — перекрываем тем же весом */ [data-theme="next"] body > section.st-section:not(.hero) > div { padding-left: 0 !important; padding-right: 0 !important; } [data-theme="next"] .st-row { padding: 6px var(--gutter) 4px !important; scroll-padding-inline: var(--gutter); gap: clamp(14px, 1.8vw, 24px) !important; } [data-theme="next"] .st-circle { width: calc(var(--st-d) + 12px) !important; gap: 8px !important; --st-d: clamp(84px, 7.6vw, 108px); } [data-theme="next"] .st-thumb { width: var(--st-d) !important; height: var(--st-d) !important; padding: 3px; box-sizing: border-box; border-radius: 50%; background: conic-gradient(from 210deg, #FFD100, #FFA51F, #D6001C, #FFA51F, #FFD100); transition: transform .18s ease; } [data-theme="next"] .st-img { border: 3px solid #fff !important; box-sizing: border-box; filter: none !important; } [data-theme="next"] .st-circle.unviewed .st-thumb::after { display: none !important; } [data-theme="next"] .st-circle.viewed .st-thumb { background: #DDDAD3; } [data-theme="next"] .st-circle.viewed .st-img { opacity: .9; } [data-theme="next"] .st-circle:hover .st-thumb { transform: scale(1.04); } [data-theme="next"] .st-circle:focus-visible { outline: none; } [data-theme="next"] .st-circle:focus-visible .st-thumb { box-shadow: 0 0 0 3px rgba(214, 0, 28, .35); } [data-theme="next"] .st-label { font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.25 !important; color: #1A1A1A !important; max-width: 100% !important; } [data-theme="next"] .st-circle.viewed .st-label { color: #8a8a8a !important; } [data-theme="next"] .st-arr { border-radius: var(--r-sm) !important; } @media (max-width: 820px) { [data-theme="next"] .st-row { padding-left: 20px !important; padding-right: 20px !important; scroll-padding-inline: 20px; } [data-theme="next"] .st-circle { --st-d: 76px; } [data-theme="next"] .st-label { font-size: 12px !important; } } /* ══ ИСТОРИИ: ПРОСМОТР ═══════════════════════════════════════ · Карточки со скруглением 16, как все карточки сайта. · В нижней панели убран заголовок: он повторял подпись кружка и заголовок, нарисованный на самой картинке. Остаются текст (не больше трёх строк) и кнопка. · Панель плотнее и компактнее, кнопка — скругление 12. · Полоски прогресса толще и с просветом, как в соцсетях. */ [data-theme="next"] .st-slide { border-radius: var(--r-md) !important; } [data-theme="next"] .st-hudscrim { border-radius: var(--r-md) var(--r-md) 0 0 !important; height: 96px !important; } [data-theme="next"] .st-glass { left: 12px !important; right: 12px !important; bottom: 12px !important; padding: 14px !important; border-radius: var(--r-sm) !important; background: rgba(14, 14, 14, .58) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; backdrop-filter: blur(18px) saturate(140%) !important; border: 1px solid rgba(255, 255, 255, .12) !important; } [data-theme="next"] .st-glass .st-vtitle { display: none !important; } [data-theme="next"] .st-glass .st-vtext { margin: 0 0 12px !important; font-size: 14px !important; line-height: 1.45 !important; color: rgba(255, 255, 255, .9) !important; text-shadow: none !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } [data-theme="next"] .st-glass .st-vbtn { border-radius: var(--r-sm) !important; min-height: 48px; box-shadow: none !important; } [data-theme="next"] .st-hud .st-progress { top: 10px !important; left: 10px !important; right: 10px !important; gap: 5px !important; } [data-theme="next"] .st-pbar { height: 3px !important; background: rgba(255, 255, 255, .38) !important; } [data-theme="next"] .st-hud .st-vhead { top: 22px !important; } [data-theme="next"] .st-vclose, [data-theme="next"] .st-vsound { width: 36px !important; height: 36px !important; background: rgba(0, 0, 0, .32) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* ══ ИСТОРИИ: КОГДА ИХ МНОГО ═════════════════════════════════ · Прокрутка останавливается ровно по кружку, а не на половине. · Компьютер: лента обрезается по колонке 1440, у края, за которым есть ещё истории, — мягкое затухание. Стрелки стоят на краях колонки; неактивная скрывается, а не бледнеет. · Телефон: лента уходит под край экрана — так видно, что дальше есть ещё. */ [data-theme="next"] .st-row { scroll-snap-type: x proximity; scroll-behavior: smooth; } [data-theme="next"] .st-circle { scroll-snap-align: start; } @media (min-width: 821px) { [data-theme="next"] .st-scroller { margin: 0 var(--gutter); } [data-theme="next"] .st-row { padding-left: 0 !important; padding-right: 0 !important; scroll-padding-inline: 0; } [data-theme="next"] .st-scroller:has(.st-arr-r:not([disabled])) .st-row { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); } [data-theme="next"] .st-scroller:has(.st-arr-l:not([disabled])) .st-row { -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px); mask-image: linear-gradient(90deg, transparent, #000 72px); } [data-theme="next"] .st-scroller:has(.st-arr-l:not([disabled])):has(.st-arr-r:not([disabled])) .st-row { -webkit-mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, transparent, #000 72px, #000 calc(100% - 72px), transparent); } /* стрелки — по центру кружка, на краях колонки */ [data-theme="next"] .st-arr { top: calc(6px + var(--st-circle-d, 108px) / 2) !important; width: 40px !important; height: 40px !important; border: 1px solid rgba(26, 26, 26, .08) !important; box-shadow: 0 6px 18px rgba(26, 26, 26, .12) !important; transition: opacity .18s ease, background .18s ease !important; } [data-theme="next"] .st-arr-l { left: -20px !important; } [data-theme="next"] .st-arr-r { right: -20px !important; } [data-theme="next"] .st-arr[disabled] { opacity: 0 !important; pointer-events: none; } [data-theme="next"] .st-arr:hover { transform: translateY(-50%) !important; background: #FFF7DA !important; } } /* диаметр кружка нужен стрелкам — выносим на общий уровень */ [data-theme="next"] .st-scroller { --st-circle-d: clamp(84px, 7.6vw, 108px); } /* ══ ИСТОРИИ: СТРЕЛКИ ════════════════════════════════════════ Круглые кнопки из светлого матового стекла — по центру кружков, наполовину за краем колонки. Наведение: фирменный жёлтый и значок чуть сдвигается туда, куда поедет лента. Нажатие — короткое «вдавливание». Круг здесь осознанный: это кнопка-значок, как кнопка связи. */ @media (min-width: 821px) { [data-theme="next"] .st-arr { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: rgba(255, 255, 255, .78) !important; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(26, 26, 26, .07) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(26, 26, 26, .06), 0 10px 28px rgba(26, 26, 26, .14) !important; transition: opacity .2s ease, background .18s ease, box-shadow .18s ease, transform .12s ease !important; } [data-theme="next"] .st-arr-l { left: -24px !important; } [data-theme="next"] .st-arr-r { right: -24px !important; } [data-theme="next"] .st-arr svg { width: 22px !important; height: 22px !important; stroke: #1A1A1A !important; stroke-width: 2.4 !important; transition: transform .18s ease; } [data-theme="next"] .st-arr:hover { background: #FFD100 !important; border-color: #FFD100 !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .06), 0 12px 30px rgba(214, 150, 0, .32) !important; transform: translateY(-50%) !important; } [data-theme="next"] .st-arr-l:hover svg { transform: translateX(-2px); } [data-theme="next"] .st-arr-r:hover svg { transform: translateX(2px); } [data-theme="next"] .st-arr:active { transform: translateY(-50%) scale(.94) !important; } [data-theme="next"] .st-arr:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(214, 0, 28, .45) !important; } } /* общее правило «все кнопки — 12» весит больше; перекрываем */ [data-theme="next"] .st-scroller button.st-arr { border-radius: 50% !important; } /* ══ ВСТРЕЧА: ТИЛОВАЯ ПЛАШКА В КОЛОНКЕ ═══════════════════════ Было: светло-тиловый фон на всё окно, линии сверху и снизу. Стало: секция прозрачная, сам блок — плашка крупного блока (скругление 28) в колонке 1440, с лёгким переливом тилового и тонкой кромкой. У внутренней обёртки был свой потолок 1320 и отступ — снимаем, колонку задаёт общее правило. */ [data-theme="next"] .evc-sec { background: transparent !important; border: 0 !important; padding: 0 !important; margin-top: clamp(20px, 2.6vw, 36px) !important; } [data-theme="next"] .evc-in { max-width: none !important; } [data-theme="next"] .evc { position: relative; gap: 18px clamp(20px, 2.4vw, 32px) !important; padding: clamp(22px, 2.6vw, 36px) clamp(22px, 2.8vw, 40px); border-radius: var(--r-lg); background: radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #EEF6F5 0%, #DCEBE9 100%); border: 1px solid #D3E5E3; box-shadow: 0 1px 2px rgba(28, 54, 55, .04), 0 14px 36px rgba(28, 54, 55, .08); } [data-theme="next"] .evc-cell { border-radius: var(--r-sm) !important; } [data-theme="next"] .evc-btn { border-radius: var(--r-sm) !important; min-height: 48px; } [data-theme="next"] .evc-more { border-radius: var(--r-sm) !important; min-height: 48px; display: inline-flex; align-items: center; background: rgba(255, 255, 255, .7); } @media (max-width: 820px) { [data-theme="next"] .evc { border-radius: var(--r-md); padding: 20px; } } /* ══ ВСТРЕЧА И ИСТОРИИ: ОТСТУПЫ, КНОПКИ, МЕТКА ═══════════════ · От плашки цифр до кружков было около 80: низ жёлтого экрана плюс верх ленты. Поджимаем оба. · У секции встречи оставался отступ 58 сверху и снизу — его задаёт правило по #evcSec, оно весит больше класса. · «Подробнее» и «Зарегистрироваться» стояли через 32 — общий зазор блока. Кнопки — пара, между ними 10. · «До встречи · места ограничены» читалось непонятно. Скрипт подставляет сюда разные статусы («места ограничены», «встреча идёт сейчас», «даты объявим…»), а «До встречи ·» стояло перед любым. Теперь сверху спокойная метка «Живая встреча», статус — красным бейджем рядом. */ [data-theme="next"] section.hero { padding-bottom: clamp(24px, 2.2vw, 32px) !important; } [data-theme="next"] .st-section { padding-top: clamp(16px, 1.8vw, 24px) !important; } [data-theme="next"] #evcSec { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: clamp(16px, 2vw, 28px) !important; } @media (min-width: 781px) { [data-theme="next"] .evc-btn { margin-left: calc(10px - clamp(20px, 2.4vw, 32px)) !important; } } @media (max-width: 780px) { [data-theme="next"] .evc-btn { margin-top: -8px !important; } } [data-theme="next"] .evc-pre { display: none; } [data-theme="next"] .evc-t small { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px !important; } [data-theme="next"] .evc-t small::before { content: "Живая встреча"; color: #5E7A76; } [data-theme="next"] .evc-t small .evc-seats { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: var(--r-xs); background: #D6001C; color: #fff !important; font-size: 10.5px !important; letter-spacing: .06em !important; line-height: 1.3 !important; } [data-theme="next"] .evc-t small .evc-seats:empty { display: none; } /* ══ ВСТРЕЧА НА ПЛАНШЕТЕ ═════════════════════════════════════ Гибкая строка на 600–1180 переносилась как попало: кнопка «Зарегистрироваться» падала отдельной строкой, на 1024 текст сжимался в узкий столбик. Раскладку задаём сеткой: 901–1180 счётчик слева, текст справа, кнопки парой под текстом у правого края; 601–900 счётчик, под ним текст, внизу две кнопки поровну. */ @media (min-width: 601px) and (max-width: 1180px) { [data-theme="next"] .evc { display: grid !important; align-items: center; column-gap: clamp(20px, 2.4vw, 28px) !important; row-gap: 18px !important; } [data-theme="next"] .evc-num { grid-area: num; } [data-theme="next"] .evc-t { grid-area: t; min-width: 0 !important; } [data-theme="next"] .evc-more { grid-area: more; } [data-theme="next"] .evc-btn { grid-area: buy; } [data-theme="next"] .evc-btn, [data-theme="next"] .evc-more { margin: 0 !important; order: 0 !important; width: auto !important; justify-content: center; text-align: center; } } @media (min-width: 901px) and (max-width: 1180px) { [data-theme="next"] .evc { grid-template-columns: auto 1fr auto auto; grid-template-areas: "num t t t" "num . more buy"; column-gap: 10px !important; } [data-theme="next"] .evc-t { margin-left: clamp(10px, 1.4vw, 18px); } } @media (min-width: 601px) and (max-width: 900px) { [data-theme="next"] .evc { grid-template-columns: 1fr 1fr; grid-template-areas: "num num" "t t" "more buy"; column-gap: 10px !important; } [data-theme="next"] .evc-num { justify-self: start; } } /* заголовок встречи — строки поровну, без одинокого «всё» в конце */ [data-theme="next"] .evc-t strong { text-wrap: balance; } /* ══ «ЗНАКОМО?» ══════════════════════════════════════════════ Было: серые плитки слиплись в полосу, крупные «01–04» почти не видны, у первой карточки свой сдвиг, под карточками пустота, и карточки никуда не вели. Стало: · белые карточки со скруглением 16, между ними воздух; · вместо номера — иконка ситуации на красноватой плитке; · внизу ссылка на услугу, которая решает эту ситуацию; вся карточка нажимается; · наведение: карточка приподнимается, плитка иконки заливается красным; · компьютер — четыре в ряд, планшет — 2×2, телефон — лентой с прокруткой, как истории; · отступы секции плотнее, пустоты снизу нет. */ [data-theme="next"] .pains { padding: clamp(40px, 5vw, 72px) 0 clamp(20px, 2.6vw, 36px) !important; } [data-theme="next"] .pains-head { margin-bottom: clamp(20px, 2.4vw, 32px) !important; } [data-theme="next"] .pains-grid { gap: clamp(12px, 1.4vw, 20px) !important; background: transparent !important; } [data-theme="next"] .pains-grid > .pain-card { position: relative; display: flex; flex-direction: column; padding: clamp(20px, 1.9vw, 28px) !important; background: #fff !important; border: 1px solid rgba(26, 26, 26, .08) !important; border-radius: var(--r-md) !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .04); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; } [data-theme="next"] .pains-grid > .pain-card:hover { transform: translateY(-3px); border-color: rgba(214, 0, 28, .22) !important; box-shadow: 0 14px 34px rgba(26, 26, 26, .09); } [data-theme="next"] .pain-num { display: none !important; } [data-theme="next"] .pain-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: var(--r-sm); background: rgba(214, 0, 28, .08); color: #D6001C; transition: background .2s ease, color .2s ease; } [data-theme="next"] .pain-card:hover .pain-ico { background: #D6001C; color: #fff; } [data-theme="next"] .pain-card h4 { margin: 0 0 8px !important; font-size: clamp(16px, 1.15vw, 18px) !important; font-weight: 800 !important; line-height: 1.3 !important; color: #1A1A1A; text-wrap: balance; } [data-theme="next"] .pain-card p { margin: 0 0 18px !important; font-size: 14.5px !important; line-height: 1.55 !important; color: #6f6f6f !important; } [data-theme="next"] .pain-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(26, 26, 26, .07); font-size: 14.5px; font-weight: 700; color: #D6001C; text-decoration: none; } [data-theme="next"] .pain-link::after { content: "→"; transition: transform .18s ease; } [data-theme="next"] .pain-card:hover .pain-link::after { transform: translateX(3px); } /* вся карточка — ссылка */ [data-theme="next"] .pain-link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; } [data-theme="next"] .pain-link:focus-visible { outline: none; } [data-theme="next"] .pain-card:has(.pain-link:focus-visible) { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(214, 0, 28, .45); } @media (min-width: 601px) and (max-width: 1100px) { [data-theme="next"] .pains-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { [data-theme="next"] .pains-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding-bottom: 8px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; } [data-theme="next"] .pains-grid::-webkit-scrollbar { display: none; } [data-theme="next"] .pains-grid > .pain-card { flex: 0 0 78%; scroll-snap-align: start; } [data-theme="next"] .pains-grid > .pain-card:hover { transform: none; } } /* ══ ЕДИНЫЙ ОТСТУП ДО 820 ════════════════════════════════════ Шапка и первый экран на планшете и телефоне стоят на 20, а секции брали 5vw — на 820 это 41. Одна переменная на всё. */ @media (max-width: 820px) { [data-theme="next"] { --gutter: 20px; } [data-chrome="next"] { --gutter: 20px; } } /* стрелка — часть строки: при переносе остаётся после слова */ [data-theme="next"] .pain-link { display: block !important; } [data-theme="next"] .pain-link::after { display: inline-block; margin-left: 6px; } /* стрелка приклеена к последнему слову неразрывным пробелом */ [data-theme="next"] .pain-link::after { content: "\00a0→" !important; display: inline !important; margin-left: 0 !important; transform: none !important; } /* ══ «ЗНАКОМО?»: ВТОРАЯ ВЕРСИЯ КАРТОЧЕК ══════════════════════ · Сетка карточки: заголовок слева, иконка справа на его уровне; ниже текст; в самом низу — полоса-кнопка. · Иконки двухтоновые: контур и лёгкая заливка. Плитка белая, иконка — в цвете карточки. При наведении плитка заливается этим цветом, иконка белая. · У каждой карточки свой мягкий линейный градиент из цвета в белый: жёлтый, красный, тиловый, янтарный. · Кнопка — как «Все услуги» в выпадающем меню: светло- жёлтая полоса во всю ширину, прижата к низу, углы повторяют карточку. */ [data-theme="next"] .pains-grid > .pain-card { --pc-tint: #FFF1B8; --pc-accent: #B88600; display: grid !important; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; grid-template-areas: "h ico" "p p" "link link"; column-gap: 14px; padding: clamp(20px, 1.9vw, 26px) clamp(20px, 1.9vw, 26px) 0 !important; overflow: hidden; background: linear-gradient(150deg, var(--pc-tint) 0%, #fff 62%) !important; } [data-theme="next"] .pains-grid > .pain-card:nth-child(1) { --pc-tint: #FFF1B8; --pc-accent: #B88600; } [data-theme="next"] .pains-grid > .pain-card:nth-child(2) { --pc-tint: #FFE3E6; --pc-accent: #D6001C; } [data-theme="next"] .pains-grid > .pain-card:nth-child(3) { --pc-tint: #DCEDEB; --pc-accent: #2C5654; } [data-theme="next"] .pains-grid > .pain-card:nth-child(4) { --pc-tint: #FFE4C4; --pc-accent: #D2690A; } [data-theme="next"] .pains-grid > .pain-card:hover { border-color: color-mix(in srgb, var(--pc-accent) 30%, transparent) !important; } [data-theme="next"] .pain-card h4 { grid-area: h; align-self: center; margin: 0 !important; } [data-theme="next"] .pain-ico { grid-area: ico; align-self: start; width: 48px !important; height: 48px !important; margin: 0 !important; background: #fff !important; color: var(--pc-accent) !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .06), 0 6px 16px rgba(26, 26, 26, .06); } [data-theme="next"] .pain-card:hover .pain-ico { background: var(--pc-accent) !important; color: #fff !important; } [data-theme="next"] .pain-card p { grid-area: p; margin: 12px 0 20px !important; color: #5f5f5f !important; } [data-theme="next"] .pain-link { grid-area: link; display: flex !important; align-items: center; justify-content: center; min-height: 52px; margin: 0 calc(-1 * clamp(20px, 1.9vw, 26px)) !important; padding: 0 16px !important; background: #FFF1B8; border-top: 1px solid rgba(214, 160, 0, .18) !important; color: #1A1A1A !important; font-size: 14.5px; font-weight: 700; text-align: center; transition: background .18s ease; } [data-theme="next"] .pain-card:hover .pain-link { background: #FFE680; } /* полоса-кнопка — обычный блок: в гибком стрелка становилась отдельным элементом и отрывалась от текста при переносе */ [data-theme="next"] .pain-link { display: block !important; min-height: 0 !important; padding: 15px 16px !important; line-height: 22px !important; } /* ══ «ЗНАКОМО?»: ПОЛОСА-КНОПКА В ЦВЕТ КАРТОЧКИ ═══════════════ У каждой карточки полоса своего цвета: светлый оттенок, при наведении — насыщенный цвет с белым текстом. Жёлтая остаётся с тёмным текстом — на жёлтом белый не читается. */ [data-theme="next"] .pains-grid > .pain-card:nth-child(1) { --pc-strip: #FFF1B8; --pc-strip-h: #FFE680; --pc-strip-t: #1A1A1A; } [data-theme="next"] .pains-grid > .pain-card:nth-child(2) { --pc-strip: #FFD9DD; --pc-strip-h: #D6001C; --pc-strip-t: #fff; } [data-theme="next"] .pains-grid > .pain-card:nth-child(3) { --pc-strip: #CFE5E2; --pc-strip-h: #2C5654; --pc-strip-t: #fff; } [data-theme="next"] .pains-grid > .pain-card:nth-child(4) { --pc-strip: #FFDDB8; --pc-strip-h: #D2690A; --pc-strip-t: #fff; } [data-theme="next"] .pain-link { background: var(--pc-strip) !important; border-top-color: color-mix(in srgb, var(--pc-accent) 16%, transparent) !important; transition: background .18s ease, color .18s ease !important; } [data-theme="next"] .pain-card:hover .pain-link { background: var(--pc-strip-h) !important; color: var(--pc-strip-t) !important; } /* ══ ОТСТУП «ЗНАКОМО?» → «УСЛУГИ» ═══════════════════════════ Было 122: по 58 у обеих секций. Их задают правила по id — перекрываем тоже по id. */ [data-theme="next"] #services { padding-bottom: 0 !important; } [data-theme="next"] #uslugi { padding-top: clamp(40px, 4.4vw, 64px) !important; } /* ══ УСЛУГИ: МОЗАИКА ═════════════════════════════════════════ · Компьютер — сетка 4×3: главная услуга (первая карточка) занимает 2×2, остальные — по клетке, последнюю клетку закрывает плитка «Все услуги». · Карточки белые, скругление 16; фото внутри со своим скруглением 12 и отступом от краёв карточки. · Наведение: карточка приподнимается, фото чуть увеличивается, справа вверху появляется круглая стрелка. · Метка «Услуга» убрана — очевидна. «Выгодно с нами» осталась, она несёт смысл. · Планшет — 2 колонки, главная на всю ширину. · Телефон — лента с прокруткой; раньше там показывались только три услуги из восьми. */ [data-theme="next"] #uslugi .blog-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-rows: auto; gap: clamp(12px, 1.4vw, 20px) !important; } [data-theme="next"] #uslugi .blog-card { display: flex !important; } [data-theme="next"] #uslugi .blog-card:nth-child(n) { display: flex !important; } [data-theme="next"] #uslugi .blog-card { position: relative; flex-direction: column; padding: 10px 10px 18px !important; background: #fff !important; border: 1px solid rgba(26, 26, 26, .08) !important; border-radius: var(--r-md) !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .04) !important; text-decoration: none; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } [data-theme="next"] #uslugi .blog-card:hover { transform: translateY(-3px); border-color: rgba(26, 26, 26, .14) !important; box-shadow: 0 16px 36px rgba(26, 26, 26, .10) !important; } [data-theme="next"] #uslugi .bc-thumb { position: relative; aspect-ratio: 16 / 10; margin: 0 0 14px !important; border-radius: var(--r-sm) !important; overflow: hidden; } [data-theme="next"] #uslugi .bc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); } [data-theme="next"] #uslugi .blog-card:hover .bc-thumb > img { transform: scale(1.05); } [data-theme="next"] #uslugi .bc-tag:not(.bc-tag--hot) { display: none !important; } [data-theme="next"] #uslugi .bc-tag--hot { position: absolute; top: 20px; left: 20px; z-index: 2; margin: 0 !important; } [data-theme="next"] #uslugi .blog-card h3 { margin: 0 8px 6px !important; font-size: clamp(16px, 1.15vw, 18px) !important; font-weight: 800 !important; line-height: 1.28 !important; color: #1A1A1A !important; padding-right: 0 !important; } [data-theme="next"] #uslugi .blog-card p { margin: 0 8px !important; font-size: 14px !important; line-height: 1.5 !important; color: #6f6f6f !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* круглая стрелка на фото — появляется при наведении */ [data-theme="next"] #uslugi .blog-card::after { content: ""; position: absolute; top: 20px; right: 20px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center / 18px no-repeat, #FFD100; box-shadow: 0 6px 16px rgba(26, 26, 26, .18); opacity: 0; transform: scale(.8); transition: opacity .2s ease, transform .2s ease; } [data-theme="next"] #uslugi .blog-card:hover::after { opacity: 1; transform: none; } /* главная услуга — крупно */ @media (min-width: 1101px) { [data-theme="next"] #uslugi .blog-card:first-child { grid-column: span 2; grid-row: span 2; padding: 12px 12px 24px !important; } [data-theme="next"] #uslugi .blog-card:first-child .bc-thumb { aspect-ratio: auto; flex: 1 1 auto; min-height: 260px; margin-bottom: 20px !important; } [data-theme="next"] #uslugi .blog-card:first-child h3 { margin: 0 12px 8px !important; font-size: clamp(22px, 1.9vw, 30px) !important; letter-spacing: -.02em; } [data-theme="next"] #uslugi .blog-card:first-child p { margin: 0 12px !important; font-size: 15.5px !important; max-width: 52ch; } } /* плитка «Все услуги» */ [data-theme="next"] #uslugi .us-all { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 100%; padding: 22px; border-radius: var(--r-md); background: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, #FFDE59 0%, #FFA51F 100%); color: #1A1A1A; text-decoration: none; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; } [data-theme="next"] #uslugi .us-all:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(214, 120, 0, .28); } [data-theme="next"] .us-all-t { font-size: clamp(20px, 1.6vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } [data-theme="next"] .us-all-s { font-size: 14px; line-height: 1.45; color: rgba(26, 26, 26, .72); max-width: 24ch; } [data-theme="next"] .us-all-go { position: absolute; top: 18px; right: 18px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #1A1A1A; color: #FFD100; transition: transform .2s ease; } [data-theme="next"] #uslugi .us-all:hover .us-all-go { transform: rotate(-45deg); } @media (min-width: 601px) and (max-width: 1100px) { [data-theme="next"] #uslugi .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [data-theme="next"] #uslugi .blog-card:first-child { grid-column: span 2; } [data-theme="next"] #uslugi .blog-card:first-child .bc-thumb { aspect-ratio: 21 / 9; } [data-theme="next"] #uslugi .us-all { min-height: 180px; } } @media (max-width: 600px) { [data-theme="next"] #uslugi .blog-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding-bottom: 8px !important; scrollbar-width: none; } [data-theme="next"] #uslugi .blog-grid::-webkit-scrollbar { display: none; } [data-theme="next"] #uslugi .blog-card, [data-theme="next"] #uslugi .us-all { flex: 0 0 78%; scroll-snap-align: start; } [data-theme="next"] #uslugi .us-all { min-height: 0; justify-content: flex-end; padding-top: 90px; } [data-theme="next"] #uslugi .blog-card:hover { transform: none; } } /* карточки в ряду — одной высоты */ [data-theme="next"] #uslugi .blog-grid { align-items: stretch !important; } [data-theme="next"] #uslugi .blog-grid > * { align-self: stretch !important; height: auto !important; } /* ══ «ЗНАКОМО?»: КРАСНЫЕ КНОПКИ ══════════════════════════════ Полоса-кнопка у всех карточек — фирменный красный с белым текстом, при наведении темнее. Перекрывает цвета по карточкам из предыдущего шага. */ [data-theme="next"] .pains-grid > .pain-card .pain-link { background: #D6001C !important; color: #fff !important; border-top: 0 !important; } [data-theme="next"] .pains-grid > .pain-card:hover .pain-link { background: #B00017 !important; color: #fff !important; } /* ══ УСЛУГИ: ПЛИТКА «ВСЕ УСЛУГИ» ═════════════════════════════ Была пустой. Теперь: · фирменная текстура из гайда — контурные документы, проценты, монеты с рублём и искры поверх жёлтого градиента; · мягкое светлое пятно за текстом; · заголовок крупнее, подпись, белая кнопка «Смотреть все» внизу; · круглая стрелка в углу, при наведении поворачивается, текстура медленно смещается. */ [data-theme="next"] #uslugi .us-all { justify-content: flex-end !important; gap: 8px !important; padding: 24px !important; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27%23B86A00%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-opacity%3D%27.28%27%3E%3Cg%20transform%3D%27translate%2824%2026%29%27%3E%3Cpath%20d%3D%27M0%200h26l10%2010v36H0z%27%2F%3E%3Cpath%20d%3D%27M26%200v10h10M7%2020h20M7%2028h20M7%2036h12%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28150%2040%29%27%3E%3Cpath%20d%3D%27M4%2028L28%204%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%2725%27%20cy%3D%2725%27%20r%3D%275%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2892%20128%29%27%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2719%27%2F%3E%3Cpath%20d%3D%27M15%2030V11h8a5.5%205.5%200%200%201%200%2011h-11M12%2026h11%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28186%20150%29%27%3E%3Cpath%20d%3D%27M0%200h22l8%208v28H0z%27%2F%3E%3Cpath%20d%3D%27M22%200v8h8M6%2016h16M6%2023h16%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2830%20176%29%27%3E%3Cpath%20d%3D%27M4%2022L22%204%27%2F%3E%3Ccircle%20cx%3D%276%27%20cy%3D%276%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%274%27%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%27none%27%3E%3Cpath%20d%3D%27M112%2030l3%209%209%203-9%203-3%209-3-9-9-3%209-3z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%27.85%27%2F%3E%3Cpath%20d%3D%27M206%2096l2%206%206%202-6%202-2%206-2-6-6-2%206-2z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M58%20112l2.5%207%207%202.5-7%202.5-2.5%207-2.5-7-7-2.5%207-2.5z%27%20fill%3D%27%23FF8A1F%27%20fill-opacity%3D%27.55%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 240px 240px repeat, radial-gradient(70% 60% at 30% 70%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, #FFDE59 0%, #FFB52E 60%, #FFA51F 100%) !important; transition: transform .22s ease, box-shadow .22s ease, background-position .8s ease !important; } [data-theme="next"] #uslugi .us-all:hover { background-position: 24px -24px, 0 0, 0 0, 0 0 !important; } [data-theme="next"] .us-all-t { font-size: clamp(24px, 2vw, 32px) !important; line-height: 1.05 !important; } [data-theme="next"] .us-all-s { font-size: 14.5px !important; color: rgba(26, 26, 26, .78) !important; } [data-theme="next"] .us-all-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: stretch; min-height: 48px; margin-top: 10px; padding: 0 18px; border-radius: var(--r-sm); background: #fff; color: #1A1A1A; font-size: 14.5px; font-weight: 800; box-shadow: 0 6px 18px rgba(150, 80, 0, .18); transition: background .18s ease; } [data-theme="next"] .us-all-btn::after { content: "→"; } [data-theme="next"] #uslugi .us-all:hover .us-all-btn { background: #1A1A1A; color: #FFD100; } [data-theme="next"] .us-all-go { width: 48px !important; height: 48px !important; box-shadow: 0 8px 20px rgba(26, 26, 26, .22); } [data-theme="next"] #uslugi .us-all:hover .us-all-go { transform: rotate(45deg) !important; } /* ── «Выгодно с нами» — на красном ─────────────────────────── */ [data-theme="next"] #uslugi .bc-tag--hot { background: #D6001C !important; color: #fff !important; box-shadow: 0 4px 12px rgba(214, 0, 28, .3); } /* ══ КАЛЬКУЛЯТОР: ПЛАШКА С ПРЕВЬЮ ════════════════════════════ Был голый блок: заголовок, текст и кнопка, справа пусто. Стало: жёлтая плашка крупного блока (28) в колонке, с фирменной текстурой. Слева текст и кнопка, справа — превью калькулятора: белая карточка с параметрами и плавающая плашка про коммерческое предложение. Превью без цифр и цен — править его не придётся. */ [data-theme="next"] #calculator { padding-top: clamp(28px, 3.4vw, 48px) !important; padding-bottom: clamp(12px, 1.6vw, 20px) !important; } [data-theme="next"] .calc-plate { position: relative; } [data-theme="next"] .calc-plate::before { content: ""; position: absolute; inset: 0 var(--gutter); z-index: 0; border-radius: var(--r-lg); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27%23B86A00%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-opacity%3D%27.28%27%3E%3Cg%20transform%3D%27translate%2824%2026%29%27%3E%3Cpath%20d%3D%27M0%200h26l10%2010v36H0z%27%2F%3E%3Cpath%20d%3D%27M26%200v10h10M7%2020h20M7%2028h20M7%2036h12%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28150%2040%29%27%3E%3Cpath%20d%3D%27M4%2028L28%204%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%2725%27%20cy%3D%2725%27%20r%3D%275%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2892%20128%29%27%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2719%27%2F%3E%3Cpath%20d%3D%27M15%2030V11h8a5.5%205.5%200%200%201%200%2011h-11M12%2026h11%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28186%20150%29%27%3E%3Cpath%20d%3D%27M0%200h22l8%208v28H0z%27%2F%3E%3Cpath%20d%3D%27M22%200v8h8M6%2016h16M6%2023h16%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2830%20176%29%27%3E%3Cpath%20d%3D%27M4%2022L22%204%27%2F%3E%3Ccircle%20cx%3D%276%27%20cy%3D%276%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%274%27%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%27none%27%3E%3Cpath%20d%3D%27M112%2030l3%209%209%203-9%203-3%209-3-9-9-3%209-3z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%27.85%27%2F%3E%3Cpath%20d%3D%27M206%2096l2%206%206%202-6%202-2%206-2-6-6-2%206-2z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M58%20112l2.5%207%207%202.5-7%202.5-2.5%207-2.5-7-7-2.5%207-2.5z%27%20fill%3D%27%23FF8A1F%27%20fill-opacity%3D%27.55%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 240px 240px repeat, radial-gradient(60% 80% at 20% 30%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(135deg, #FFDE59 0%, #FFC42E 55%, #FFA51F 100%); box-shadow: 0 20px 50px rgba(180, 100, 0, .16); } [data-theme="next"] .calc-plate > * { position: relative; z-index: 1; } @media (min-width: 901px) { [data-theme="next"] .calc-plate { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; column-gap: clamp(24px, 3vw, 48px); } } [data-theme="next"] .calc-plate .calc-head { padding: clamp(28px, 3.6vw, 56px) 0 clamp(28px, 3.6vw, 56px) clamp(24px, 3.6vw, 56px) !important; margin: 0 !important; } [data-theme="next"] .calc-plate .section-tag { color: #1A1A1A !important; } [data-theme="next"] .calc-plate .section-tag::before { background: #D6001C !important; } [data-theme="next"] .calc-plate .section-heading-full { font-size: clamp(32px, 3.8vw, 60px) !important; line-height: 1 !important; } [data-theme="next"] .calc-plate .section-sub { color: rgba(26, 26, 26, .78) !important; max-width: 46ch !important; } [data-theme="next"] .calc-plate .section-sub br { display: none; } [data-theme="next"] .calc-plate .btn-primary { min-height: 52px; display: inline-flex; align-items: center; gap: 8px; padding: 0 28px !important; box-shadow: 0 10px 24px rgba(214, 0, 28, .28); } [data-theme="next"] .calc-plate .btn-primary::after { content: "→"; } /* превью */ [data-theme="next"] .calc-visual { display: block; position: relative; padding: clamp(24px, 3vw, 44px) clamp(24px, 3.6vw, 56px) clamp(24px, 3vw, 44px) 0; } [data-theme="next"] .cv-card { max-width: 420px; margin-left: auto; padding: 22px; border-radius: var(--r-md); background: #fff; box-shadow: 0 2px 4px rgba(26, 26, 26, .05), 0 24px 56px rgba(120, 60, 0, .22); transform: rotate(-1.5deg); font-size: 13px; color: #1A1A1A; } [data-theme="next"] .cv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } [data-theme="next"] .cv-title { font-size: 15px; font-weight: 800; } [data-theme="next"] .cv-bar { flex: 0 0 96px; height: 6px; border-radius: 3px; background: #F1EEE6; overflow: hidden; } [data-theme="next"] .cv-bar i { display: block; width: 45%; height: 100%; border-radius: 3px; background: #D6001C; } [data-theme="next"] .cv-q { margin: 12px 0 7px; font-size: 12px; font-weight: 600; color: #8a8a8a; } [data-theme="next"] .cv-chips { display: flex; flex-wrap: wrap; gap: 6px; } [data-theme="next"] .cv-chips span { padding: 7px 12px; border-radius: var(--r-xs); background: #F6F4EF; font-weight: 700; } [data-theme="next"] .cv-chips span.on { background: #1A1A1A; color: #FFD100; } [data-theme="next"] .cv-range { position: relative; height: 6px; margin: 12px 4px 4px; border-radius: 3px; background: #F1EEE6; } [data-theme="next"] .cv-range i { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; border-radius: 3px; background: #FFD100; } [data-theme="next"] .cv-range b { position: absolute; left: 38%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; border: 3px solid #1A1A1A; } [data-theme="next"] .cv-toggle { display: flex; align-items: center; gap: 10px; font-weight: 600; } [data-theme="next"] .cv-sw { position: relative; width: 36px; height: 20px; border-radius: 10px; background: #D6001C; } [data-theme="next"] .cv-sw i { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; } [data-theme="next"] .cv-res { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding: 14px 16px; border-radius: var(--r-sm); background: linear-gradient(135deg, #FFF4C7, #FFE89A); } [data-theme="next"] .cv-res span { font-weight: 600; color: #6b5010; } [data-theme="next"] .cv-res strong { font-size: 15px; font-weight: 800; } [data-theme="next"] .cv-note { position: absolute; left: clamp(-8px, -1vw, 0px); bottom: clamp(10px, 2vw, 28px); display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; border-radius: var(--r-sm); background: #1A1A1A; color: #fff; font-size: 12.5px; line-height: 1.3; box-shadow: 0 14px 32px rgba(26, 26, 26, .28); transform: rotate(2deg); } [data-theme="next"] .cv-note b { display: block; font-size: 13px; } [data-theme="next"] .cv-note-ico { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-xs); background: #FFD100; color: #1A1A1A; flex: 0 0 34px; } @media (max-width: 900px) { [data-theme="next"] .calc-plate .calc-head { padding: 28px 24px 8px !important; } [data-theme="next"] .calc-visual { padding: 12px 24px 28px; } [data-theme="next"] .cv-card { max-width: none; margin: 0; transform: none; } [data-theme="next"] .cv-note { position: static; margin-top: 12px; transform: none; } [data-theme="next"] .calc-plate .btn-primary { width: 100%; justify-content: center; } } @media (max-width: 820px) { [data-theme="next"] .calc-plate::before { border-radius: var(--r-md); } } @media (max-width: 480px) { [data-theme="next"] .calc-plate .calc-head { padding: 24px 20px 4px !important; } [data-theme="next"] .calc-visual { padding: 12px 20px 24px; } } /* плашка про КП — под карточкой, итог не закрывает */ @media (min-width: 901px) { [data-theme="next"] .cv-card { margin-bottom: 30px; } [data-theme="next"] .cv-note { bottom: clamp(14px, 1.6vw, 22px) !important; left: 0 !important; } } [data-theme="next"] .cv-res { flex-wrap: wrap; } @media (min-width: 901px) and (max-width: 1240px) { [data-theme="next"] .cv-card { margin-bottom: 52px; } [data-theme="next"] .cv-note { bottom: 16px !important; } } @media (min-width: 1241px) { [data-theme="next"] .cv-card { margin-bottom: 44px; } } /* ══ КАЛЬКУЛЯТОР: ТЁМНАЯ ПЛАШКА ══════════════════════════════ Жёлтого стало слишком много: картинки услуг жёлтые, и сразу под ними жёлтая плашка, а текстура мешала читать текст. Теперь плашка графитовая: · текстура — едва заметные светлые контуры и только справа, за превью; под текстом фон чистый; · за карточкой превью — тёплое янтарное свечение, оно держит связь с фирменным цветом; · заголовок белый, текст светло-серый, метка светлая с красной чертой; · плашка про КП — жёлтая, тёмная на тёмном терялась. */ [data-theme="next"] .calc-plate::before { background: radial-gradient(38% 60% at 78% 50%, rgba(255, 165, 31, .38) 0%, rgba(255, 165, 31, 0) 70%), radial-gradient(30% 50% at 70% 20%, rgba(214, 0, 28, .22) 0%, rgba(214, 0, 28, 0) 70%), linear-gradient(135deg, #232120 0%, #1A1A1A 55%, #141414 100%) !important; box-shadow: 0 24px 56px rgba(20, 20, 20, .22) !important; } [data-theme="next"] .calc-plate::after { content: ""; position: absolute; inset: 0 var(--gutter); z-index: 0; border-radius: var(--r-lg); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-opacity%3D%27.07%27%3E%3Cg%20transform%3D%27translate%2824%2026%29%27%3E%3Cpath%20d%3D%27M0%200h26l10%2010v36H0z%27%2F%3E%3Cpath%20d%3D%27M26%200v10h10M7%2020h20M7%2028h20M7%2036h12%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28150%2040%29%27%3E%3Cpath%20d%3D%27M4%2028L28%204%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%2725%27%20cy%3D%2725%27%20r%3D%275%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2892%20128%29%27%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2719%27%2F%3E%3Cpath%20d%3D%27M15%2030V11h8a5.5%205.5%200%200%201%200%2011h-11M12%2026h11%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28186%20150%29%27%3E%3Cpath%20d%3D%27M0%200h22l8%208v28H0z%27%2F%3E%3Cpath%20d%3D%27M22%200v8h8M6%2016h16M6%2023h16%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2830%20176%29%27%3E%3Cpath%20d%3D%27M4%2022L22%204%27%2F%3E%3Ccircle%20cx%3D%276%27%20cy%3D%276%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%274%27%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%27none%27%3E%3Cpath%20d%3D%27M112%2030l3%209%209%203-9%203-3%209-3-9-9-3%209-3z%27%20fill%3D%27%23FFD100%27%20fill-opacity%3D%27.35%27%2F%3E%3Cpath%20d%3D%27M206%2096l2%206%206%202-6%202-2%206-2-6-6-2%206-2z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%27.25%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 240px 240px repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 70%); mask-image: linear-gradient(90deg, transparent 0%, transparent 42%, #000 70%); pointer-events: none; } [data-theme="next"] .calc-plate .section-tag { color: rgba(255, 255, 255, .72) !important; } [data-theme="next"] .calc-plate .section-heading-full { color: #fff !important; } [data-theme="next"] .calc-plate .section-sub { color: rgba(255, 255, 255, .66) !important; } [data-theme="next"] .calc-plate .btn-primary { box-shadow: 0 10px 28px rgba(214, 0, 28, .4) !important; } [data-theme="next"] .cv-card { box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 30px 70px rgba(0, 0, 0, .45) !important; } [data-theme="next"] .cv-note { background: #FFD100 !important; color: #1A1A1A !important; box-shadow: 0 14px 32px rgba(0, 0, 0, .35) !important; } [data-theme="next"] .cv-note-ico { background: #1A1A1A !important; color: #FFD100 !important; } @media (max-width: 900px) { [data-theme="next"] .calc-plate::after { -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 45%, #000 75%); mask-image: linear-gradient(180deg, transparent 0%, transparent 45%, #000 75%); } [data-theme="next"] .calc-plate::before { background: radial-gradient(70% 40% at 50% 75%, rgba(255, 165, 31, .32) 0%, rgba(255, 165, 31, 0) 70%), linear-gradient(160deg, #232120 0%, #1A1A1A 55%, #141414 100%) !important; } } @media (max-width: 820px) { [data-theme="next"] .calc-plate::after { border-radius: var(--r-md); } } /* ── Калькулятор на телефоне и планшете: кнопка под превью ─── Порядок «заголовок → что внутри → действие»: сначала человек видит, что его ждёт, потом нажимает. Обёртка текста раскрывается (display: contents), и кнопка встаёт после превью; поля задаются самим элементам. */ @media (max-width: 900px) { [data-theme="next"] .calc-plate { display: flex !important; flex-direction: column; } [data-theme="next"] .calc-plate .calc-head { display: contents !important; } [data-theme="next"] .calc-plate .calc-head > * { position: relative; z-index: 1; } [data-theme="next"] .calc-plate .section-tag { order: 1; margin: 28px 24px 12px !important; } [data-theme="next"] .calc-plate .section-heading-full { order: 2; margin: 0 24px 10px !important; } [data-theme="next"] .calc-plate .section-sub { order: 3; margin: 0 24px !important; } [data-theme="next"] .calc-plate .calc-visual { order: 4; padding: 20px 24px 0 !important; } [data-theme="next"] .calc-plate .bh-actions { order: 5; margin: 16px 24px 28px !important; } } @media (max-width: 480px) { [data-theme="next"] .calc-plate .section-tag { margin: 24px 20px 10px !important; } [data-theme="next"] .calc-plate .section-heading-full, [data-theme="next"] .calc-plate .section-sub { margin-left: 20px !important; margin-right: 20px !important; } [data-theme="next"] .calc-plate .calc-visual { padding: 18px 20px 0 !important; } [data-theme="next"] .calc-plate .bh-actions { margin: 14px 20px 24px !important; } } /* ── Калькулятор: текст на телефоне во всю ширину ─────────── */ @media (max-width: 900px) { [data-theme="next"] .calc-plate .section-sub { max-width: none !important; } } /* ── Калькулятор на планшете: плашка КП ниже карточки ─────── */ @media (min-width: 901px) and (max-width: 1240px) { [data-theme="next"] .cv-card { margin-bottom: 84px !important; } } /* ══ ИНСТРУМЕНТЫ («СЧИТАЙТЕ САМИ») ═══════════════════════════ · Карточка «Стоимость бухгалтерии» повторяла калькулятор прямо над блоком — в новой теме скрыта (по адресу, а не по порядку: порядок может поменяться). · Карточки компактные: иконка слева, название и описание, стрелка справа. Компьютер — три колонки, планшет — две, телефон — списком. · Иконки были зелёные, синие, фиолетовые — вне фирменной палитры. Теперь все на светло-жёлтой плитке, при наведении — жёлтой. · «Открыть →» заменяет круглая стрелка. · Ряд и кнопка — в общей колонке. */ [data-theme="next"] .kalc-home { padding-top: clamp(44px, 5vw, 72px) !important; padding-bottom: clamp(20px, 2.6vw, 36px) !important; margin-bottom: 0 !important; } [data-theme="next"] .kalc-head, [data-theme="next"] .kalc-row, [data-theme="next"] .kalc-actions { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } [data-theme="next"] .kalc-head p { margin-bottom: clamp(20px, 2.4vw, 32px) !important; } [data-theme="next"] .kalc-row a.kalc-card[href$="/kalkulyator/"] { display: none !important; } [data-theme="next"] .kalc-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; overflow: visible !important; } [data-theme="next"] .kalc-row > .kalc-card { width: auto !important; margin: 0 !important; display: grid !important; grid-template-columns: 48px minmax(0, 1fr) 36px; grid-template-areas: "ico t go" "ico d go"; column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px 16px 16px 16px !important; min-height: 0 !important; background: #fff !important; border: 1px solid rgba(26, 26, 26, .08) !important; border-radius: var(--r-md) !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .04) !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease !important; } [data-theme="next"] .kalc-row > a.kalc-card:hover { transform: translateY(-2px); border-color: rgba(214, 160, 0, .35) !important; background: #FFFCF0 !important; box-shadow: 0 12px 28px rgba(26, 26, 26, .08) !important; } [data-theme="next"] .kalc-row .kalc-ico { grid-area: ico; align-self: start; width: 48px !important; height: 48px !important; margin: 0 !important; border-radius: var(--r-sm) !important; background: #FFF1B8 !important; color: #1A1A1A !important; display: flex !important; align-items: center; justify-content: center; transition: background .2s ease; } [data-theme="next"] .kalc-row .kalc-ico svg { width: 24px !important; height: 24px !important; } [data-theme="next"] .kalc-row > a.kalc-card:hover .kalc-ico { background: #FFD100 !important; } [data-theme="next"] .kalc-row .kalc-card b { grid-area: t; margin: 0 !important; font-size: 15.5px !important; font-weight: 800 !important; line-height: 1.25 !important; color: #1A1A1A; } [data-theme="next"] .kalc-row .kalc-desc { grid-area: d; margin: 0 !important; font-size: 13.5px !important; line-height: 1.4 !important; color: #7a7a7a !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-theme="next"] .kalc-row .kalc-go { grid-area: go; justify-self: end; width: 36px; height: 36px; margin: 0 !important; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat, #F4F2EC; font-size: 0 !important; color: transparent !important; transition: background-color .2s ease, transform .2s ease; } [data-theme="next"] .kalc-row > a.kalc-card:hover .kalc-go { background-color: #1A1A1A; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD100' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); transform: translateX(2px); } /* «Скоро»: карточки без ссылки — не кликаются и не подсвечиваются */ [data-theme="next"] .kalc-row > .kalc-card:not(a) .kalc-go { display: none; } [data-theme="next"] .kalc-actions { margin-top: clamp(16px, 2vw, 24px) !important; } [data-theme="next"] .kalc-actions .btn-primary { display: inline-flex !important; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px !important; background: #1A1A1A !important; color: #fff !important; box-shadow: none !important; } [data-theme="next"] .kalc-actions .btn-primary::after { content: "→"; } [data-theme="next"] .kalc-actions .btn-primary:hover { background: #333 !important; } @media (max-width: 1100px) { [data-theme="next"] .kalc-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { [data-theme="next"] .kalc-row { grid-template-columns: 1fr !important; gap: 8px !important; } [data-theme="next"] .kalc-row > .kalc-card { grid-template-columns: 44px minmax(0, 1fr) 32px; padding: 12px 12px 12px 12px !important; } [data-theme="next"] .kalc-row .kalc-ico { width: 44px !important; height: 44px !important; } [data-theme="next"] .kalc-row .kalc-go { width: 32px; height: 32px; } [data-theme="next"] .kalc-row > a.kalc-card:hover { transform: none; } [data-theme="next"] .kalc-actions .btn-primary { width: 100%; justify-content: center; } } /* планшет: если последняя карточка остаётся одна — на всю ширину (первая карточка скрыта, поэтому «одна в ряду» — при чётном номере последней) */ @media (min-width: 641px) and (max-width: 1100px) { [data-theme="next"] .kalc-row > .kalc-card:last-child:nth-child(even) { grid-column: 1 / -1; } } /* ══ ИНСТРУМЕНТЫ: ВТОРАЯ ВЕРСИЯ ══════════════════════════════ · Весь блок — светло-серая тёплая плашка (28) в колонке. · Шапка: слева заголовок и подпись, справа кнопка «Все калькуляторы»; на телефоне кнопка внизу. · Плитки белые, крупнее: сверху иконка на жёлтой плитке и круглая стрелка, снизу название и описание. · Компьютер — 3×3, планшет — 2 колонки, телефон — 2 колонки компактных плиток. Перекрывает первую версию выше. */ [data-theme="next"] .kalc-home { --kp: clamp(20px, 3.2vw, 48px); position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head act" "row row"; align-items: end; margin: clamp(28px, 3.6vw, 52px) 0 clamp(8px, 1.4vw, 20px) !important; padding: 0 !important; background: transparent !important; } [data-theme="next"] .kalc-home::before { content: ""; position: absolute; inset: 0 var(--gutter); z-index: 0; border-radius: var(--r-lg); background: radial-gradient(60% 80% at 100% 0%, rgba(255, 209, 0, .10) 0%, rgba(255, 209, 0, 0) 60%), #F3F1EC; border: 1px solid rgba(26, 26, 26, .05); } [data-theme="next"] .kalc-home > * { position: relative; z-index: 1; } [data-theme="next"] body > section.kalc-home > .kalc-head { grid-area: head; padding: var(--kp) 0 0 calc(var(--gutter) + var(--kp)) !important; } [data-theme="next"] .kalc-head h2 { margin: 10px 0 8px !important; font-size: clamp(32px, 3.8vw, 56px) !important; line-height: 1 !important; } [data-theme="next"] .kalc-head p { margin: 0 !important; color: #6f6f6f !important; max-width: 52ch !important; } [data-theme="next"] body > section.kalc-home > .kalc-actions { grid-area: act; margin: 0 !important; padding: var(--kp) calc(var(--gutter) + var(--kp)) 0 24px !important; align-self: end; } [data-theme="next"] body > section.kalc-home > .kalc-row { grid-area: row; padding: clamp(20px, 2.4vw, 32px) calc(var(--gutter) + var(--kp)) var(--kp) !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(10px, 1.2vw, 16px) !important; } /* плитка */ [data-theme="next"] .kalc-row > .kalc-card { position: relative; grid-template-columns: 1fr auto !important; grid-template-areas: "ico go" "t t" "d d" !important; grid-template-rows: auto 1fr auto; align-items: start !important; row-gap: 0 !important; min-height: 176px !important; padding: 20px !important; border: 0 !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .05), 0 1px 0 rgba(26, 26, 26, .02) !important; } [data-theme="next"] .kalc-row > a.kalc-card:hover { background: #fff !important; transform: translateY(-4px); box-shadow: 0 18px 40px rgba(26, 26, 26, .10) !important; } [data-theme="next"] .kalc-row .kalc-ico { width: 52px !important; height: 52px !important; border-radius: var(--r-sm) !important; background: #FFF1B8 !important; } [data-theme="next"] .kalc-row .kalc-ico svg { width: 26px !important; height: 26px !important; } [data-theme="next"] .kalc-row > a.kalc-card:hover .kalc-ico { background: #FFD100 !important; } [data-theme="next"] .kalc-row .kalc-card b { align-self: end; margin: 22px 0 6px !important; font-size: 17px !important; letter-spacing: -.01em; } [data-theme="next"] .kalc-row .kalc-desc { font-size: 13.5px !important; } [data-theme="next"] .kalc-row .kalc-go { align-self: start; width: 40px !important; height: 40px !important; background-color: #F3F1EC !important; background-size: 16px !important; transform: rotate(-45deg); } [data-theme="next"] .kalc-row > a.kalc-card:hover .kalc-go { background-color: #1A1A1A !important; transform: rotate(0deg) !important; } /* кнопка в шапке */ [data-theme="next"] .kalc-actions .btn-primary { white-space: nowrap; } @media (max-width: 1100px) { [data-theme="next"] body > section.kalc-home > .kalc-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 720px) { [data-theme="next"] .kalc-home { --kp: 20px; grid-template-columns: 1fr; grid-template-areas: "head" "row" "act"; } [data-theme="next"] .kalc-home::before { border-radius: var(--r-md); } [data-theme="next"] body > section.kalc-home > .kalc-head { padding: 24px calc(var(--gutter) + var(--kp)) 0 !important; } [data-theme="next"] body > section.kalc-home > .kalc-row { padding: 18px calc(var(--gutter) + var(--kp)) 0 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } [data-theme="next"] body > section.kalc-home > .kalc-actions { padding: 12px calc(var(--gutter) + var(--kp)) 24px !important; } [data-theme="next"] .kalc-actions .btn-primary { width: 100%; justify-content: center; } [data-theme="next"] .kalc-row > .kalc-card { min-height: 150px !important; padding: 14px !important; } [data-theme="next"] .kalc-row .kalc-ico { width: 42px !important; height: 42px !important; } [data-theme="next"] .kalc-row .kalc-ico svg { width: 22px !important; height: 22px !important; } [data-theme="next"] .kalc-row .kalc-go { width: 30px !important; height: 30px !important; background-size: 13px !important; } [data-theme="next"] .kalc-row .kalc-card b { margin: 14px 0 4px !important; font-size: 14.5px !important; } [data-theme="next"] .kalc-row .kalc-desc { font-size: 12.5px !important; -webkit-line-clamp: 3; } [data-theme="next"] .kalc-row > a.kalc-card:hover { transform: none; } } @media (max-width: 1100px) { [data-theme="next"] .kalc-row > .kalc-card:last-child:nth-child(even) { grid-column: 1 / -1; min-height: 0 !important; } } /* отступы секции задаёт правило по id — обнуляем, плашку определяют внутренние поля */ [data-theme="next"] #kalkulyatory { padding: 0 !important; } /* телефон: списком — иконка слева, текст, стрелка справа */ @media (max-width: 560px) { [data-theme="next"] body > section.kalc-home > .kalc-row { grid-template-columns: 1fr !important; } [data-theme="next"] .kalc-row > .kalc-card { grid-template-columns: 44px minmax(0, 1fr) 30px !important; grid-template-areas: "ico t go" "ico d go" !important; grid-template-rows: auto auto; column-gap: 12px !important; align-items: center !important; min-height: 0 !important; padding: 12px !important; grid-column: auto !important; } [data-theme="next"] .kalc-row .kalc-ico { align-self: center !important; } [data-theme="next"] .kalc-row .kalc-card b { align-self: end; margin: 0 0 2px !important; font-size: 15px !important; } [data-theme="next"] .kalc-row .kalc-desc { align-self: start; -webkit-line-clamp: 2 !important; } [data-theme="next"] .kalc-row .kalc-go { align-self: center !important; } } /* ══ ИНСТРУМЕНТЫ: ТРЕТЬЯ ВЕРСИЯ ══════════════════════════════ · Подложка — серая полоса во всю ширину экрана, содержимое в колонке. · Иконки свои, двухтоновые, на жёлтом круге. Заданы стилем по адресу калькулятора: разметку не трогаем, и tools/icons.php их не перезапишет. У калькулятора без своей иконки остаётся прежняя. · Плитки полупрозрачные светлые со светлой кромкой, в углу — крупный еле заметный «водяной знак» той же иконки. При наведении плитка белеет и приподнимается. */ [data-theme="next"] .kalc-home::before { inset: 0 !important; border-radius: 0 !important; border: 0 !important; background: radial-gradient(40% 70% at 95% 0%, rgba(255, 209, 0, .12) 0%, rgba(255, 209, 0, 0) 70%), radial-gradient(35% 60% at 0% 100%, rgba(255, 165, 31, .08) 0%, rgba(255, 165, 31, 0) 70%), #F2F0EA !important; } [data-theme="next"] .kalc-home { margin-bottom: 0 !important; } [data-theme="next"] body > section.kalc-home > .kalc-head { padding: clamp(40px, 4.6vw, 72px) 0 0 var(--gutter) !important; } [data-theme="next"] body > section.kalc-home > .kalc-actions { padding: 0 var(--gutter) 0 24px !important; } [data-theme="next"] body > section.kalc-home > .kalc-row { padding: clamp(24px, 2.6vw, 36px) var(--gutter) clamp(40px, 4.6vw, 72px) !important; gap: clamp(12px, 1.4vw, 18px) !important; } @media (max-width: 720px) { [data-theme="next"] body > section.kalc-home > .kalc-head { padding: 36px var(--gutter) 0 !important; } [data-theme="next"] body > section.kalc-home > .kalc-row { padding: 20px var(--gutter) 0 !important; } [data-theme="next"] body > section.kalc-home > .kalc-actions { padding: 14px var(--gutter) 36px !important; } } /* плитка */ [data-theme="next"] .kalc-row > .kalc-card { overflow: hidden; background: linear-gradient(160deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .42) 100%) !important; border: 1px solid rgba(255, 255, 255, .95) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 1px 2px rgba(60, 40, 0, .05) !important; } [data-theme="next"] .kalc-row > a.kalc-card:hover { background: #fff !important; box-shadow: 0 18px 40px rgba(60, 40, 0, .10) !important; } [data-theme="next"] .kalc-row > .kalc-card::after { content: ""; position: absolute; right: -18px; bottom: -22px; width: 124px; height: 124px; background: var(--kc-ic) center / contain no-repeat; opacity: .06; pointer-events: none; transition: opacity .25s ease, transform .35s ease; } [data-theme="next"] .kalc-row > a.kalc-card:hover::after { opacity: .1; transform: rotate(-8deg) scale(1.05); } [data-theme="next"] .kalc-row > .kalc-card > * { position: relative; z-index: 1; } /* иконка: жёлтый круг и своя картинка */ [data-theme="next"] .kalc-row > a.kalc-card[style], [data-theme="next"] .kalc-row > .kalc-card { --kc-ic: none; } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/nds/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Cpath%20d%3D%27M6%202.5h12v19l-2-1.3-2%201.3-2-1.3-2%201.3-2-1.3-2%201.3z%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M6%202.5h12v19l-2-1.3-2%201.3-2-1.3-2%201.3-2-1.3-2%201.3z%27%2F%3E%3Cpath%20d%3D%27M9%2015l6-6%27%2F%3E%3Ccircle%20cx%3D%279.6%27%20cy%3D%279.4%27%20r%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2714.4%27%20cy%3D%2714.6%27%20r%3D%271.3%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/usn/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Cpath%20d%3D%27M6.5%202.5H14l4.5%204.5v13a1.5%201.5%200%200%201-1.5%201.5H6.5A1.5%201.5%200%200%201%205%2020V4a1.5%201.5%200%200%201%201.5-1.5z%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M6.5%202.5H14l4.5%204.5v13a1.5%201.5%200%200%201-1.5%201.5H6.5A1.5%201.5%200%200%201%205%2020V4a1.5%201.5%200%200%201%201.5-1.5z%27%2F%3E%3Cpath%20d%3D%27M14%202.5V7h4.5%27%2F%3E%3Cpath%20d%3D%27M10.5%2018.5v-8h3a2.2%202.2%200%200%201%200%204.4h-4.3M9.2%2016.8h4.3%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/patent/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274%27%20width%3D%2719%27%20height%3D%2713%27%20rx%3D%271.5%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%272.5%27%20y%3D%274%27%20width%3D%2719%27%20height%3D%2713%27%20rx%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M6.5%208.5h7M6.5%2011.5h4.5%27%2F%3E%3Cpath%20d%3D%27M14.8%2017.3l-1%204.2%202.7-1.4%202.7%201.4-1-4.2%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%2714.5%27%20r%3D%273.2%27%20fill%3D%27%23FFFFFF%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%2714.5%27%20r%3D%273.2%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/ausn/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Cpath%20d%3D%27M13.5%202L5%2013.5h6.2L10%2022l8.8-12h-6.3z%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M13.5%202L5%2013.5h6.2L10%2022l8.8-12h-6.3z%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/vznosy-ip/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277.5%27%20r%3D%273.6%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277.5%27%20r%3D%273.6%27%2F%3E%3Cpath%20d%3D%27M2.8%2020.5c.5-3.8%203.1-6.3%206.2-6.3%201.3%200%202.5.4%203.4%201.1%27%2F%3E%3Ccircle%20cx%3D%2717.3%27%20cy%3D%2716.8%27%20r%3D%274.4%27%20fill%3D%27%23FFFFFF%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2717.3%27%20cy%3D%2716.8%27%20r%3D%274.4%27%2F%3E%3Cpath%20d%3D%27M16.1%2019v-4.4h1.8a1.3%201.3%200%200%201%200%202.6h-2.5M15.4%2018h2.6%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/summa-propisyu/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Cpath%20d%3D%27M14.5%204.5l5%205L10%2019H5v-5z%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M14.5%204.5l5%205L10%2019H5v-5z%27%2F%3E%3Cpath%20d%3D%27M12.3%206.7l5%205M3%2021.5h9%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/ndfl/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Crect%20x%3D%273%27%20y%3D%277%27%20width%3D%2718%27%20height%3D%2713.5%27%20rx%3D%272%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M5.5%207V5.8A2.3%202.3%200%200%201%208.4%203.6L17.5%206%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%277%27%20width%3D%2718%27%20height%3D%2713.5%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M21%2011.5h-4a2.3%202.3%200%200%200%200%204.6h4%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2713.8%27%20r%3D%27.9%27%20fill%3D%27%231A1A1A%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/alimenty/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%276%27%20r%3D%273.2%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%276%27%20r%3D%273.2%27%2F%3E%3Cpath%20d%3D%27M2.8%2021v-2.8A5.2%205.2%200%200%201%208%2013a5.2%205.2%200%200%201%203.6%201.4%27%2F%3E%3Ccircle%20cx%3D%2716.8%27%20cy%3D%2712%27%20r%3D%272.5%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2716.8%27%20cy%3D%2712%27%20r%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M12.6%2021v-1.3a4.2%204.2%200%200%201%208.4%200V21%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/vznosy-sotrudniki/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%278%27%20r%3D%273.2%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%278%27%20r%3D%273.2%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%278%27%20r%3D%273.2%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%278%27%20r%3D%273.2%27%2F%3E%3Cpath%20d%3D%27M2.5%2020a5.5%205.5%200%200%201%2011%200M11%2016.2a5.5%205.5%200%200%201%2010.5%203.8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row .kalc-ico { width: 56px !important; height: 56px !important; border-radius: 50% !important; background: #FFD100 var(--kc-ic) center / 30px no-repeat !important; box-shadow: 0 6px 16px rgba(214, 150, 0, .28); transition: transform .25s ease, box-shadow .25s ease !important; } [data-theme="next"] .kalc-row > a.kalc-card:hover .kalc-ico { background-color: #FFD100 !important; transform: rotate(-6deg) scale(1.04); box-shadow: 0 10px 22px rgba(214, 150, 0, .36); } /* своя картинка есть — старую прячем; нет — старая остаётся */ [data-theme="next"] .kalc-row > a.kalc-card[href*="/kalkulyatory/"] .kalc-ico svg { opacity: 0; } @media (max-width: 560px) { [data-theme="next"] .kalc-row .kalc-ico { width: 44px !important; height: 44px !important; background-size: 24px !important; } [data-theme="next"] .kalc-row > .kalc-card::after { width: 88px; height: 88px; right: -10px; bottom: -26px; } } @media (max-width: 560px) { [data-theme="next"] .kalc-row > .kalc-card::after { display: none; } } /* старое правило наведения задавало фон целиком и стирало картинку — возвращаем её явно */ [data-theme="next"] .kalc-row > a.kalc-card:hover .kalc-ico { background: #FFD100 var(--kc-ic) center / 30px no-repeat !important; } @media (max-width: 560px) { [data-theme="next"] .kalc-row > a.kalc-card:hover .kalc-ico { background-size: 24px !important; } } [data-theme="next"] .kalc-row > a.kalc-card:hover::after { opacity: .075 !important; } /* ── Инструменты: круг иконки без старых боковых отступов ──── От прежнего оформления остался отступ по бокам — круг растягивался в овал и заезжал на текст на узких экранах. */ [data-theme="next"] .kalc-row .kalc-ico { padding: 0 !important; box-sizing: border-box !important; flex: none !important; aspect-ratio: 1 / 1; justify-self: start; } /* ── «Все калькуляторы» — красная ───────────────────────────── */ [data-theme="next"] .kalc-actions .btn-primary { background: #D6001C !important; color: #fff !important; box-shadow: 0 10px 24px rgba(214, 0, 28, .24) !important; } [data-theme="next"] .kalc-actions .btn-primary:hover { background: #B00017 !important; } /* старое min-width: 58px не давало кругу сжаться */ [data-theme="next"] .kalc-row .kalc-ico { min-width: 0 !important; max-width: none !important; } /* ══ ИНСТРУМЕНТЫ: КРАСНЫЙ КОНТУР ПРИ НАВЕДЕНИИ ═══════════════ Поверх серого водяного знака — та же иконка красным контуром без заливки. При наведении проявляется снизу вверх (будто прорисовывается), серый знак гаснет. Карточке без своей иконки контур не рисуется. */ [data-theme="next"] .kalc-row > .kalc-card { --kc-ic-red: none; } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/nds/"] { --kc-ic-red: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%202.5h12v19l-2-1.3-2%201.3-2-1.3-2%201.3-2-1.3-2%201.3z%27%2F%3E%3Cpath%20d%3D%27M9%2015l6-6%27%2F%3E%3Ccircle%20cx%3D%279.6%27%20cy%3D%279.4%27%20r%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2714.4%27%20cy%3D%2714.6%27%20r%3D%271.3%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/usn/"] { --kc-ic-red: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6.5%202.5H14l4.5%204.5v13a1.5%201.5%200%200%201-1.5%201.5H6.5A1.5%201.5%200%200%201%205%2020V4a1.5%201.5%200%200%201%201.5-1.5z%27%2F%3E%3Cpath%20d%3D%27M14%202.5V7h4.5%27%2F%3E%3Cpath%20d%3D%27M10.5%2018.5v-8h3a2.2%202.2%200%200%201%200%204.4h-4.3M9.2%2016.8h4.3%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/patent/"] { --kc-ic-red: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274%27%20width%3D%2719%27%20height%3D%2713%27%20rx%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M6.5%208.5h7M6.5%2011.5h4.5%27%2F%3E%3Cpath%20d%3D%27M14.8%2017.3l-1%204.2%202.7-1.4%202.7%201.4-1-4.2%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%2714.5%27%20r%3D%273.2%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/ausn/"] { --kc-ic-red: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13.5%202L5%2013.5h6.2L10%2022l8.8-12h-6.3z%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/vznosy-ip/"] { --kc-ic-red: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277.5%27%20r%3D%273.6%27%2F%3E%3Cpath%20d%3D%27M2.8%2020.5c.5-3.8%203.1-6.3%206.2-6.3%201.3%200%202.5.4%203.4%201.1%27%2F%3E%3Ccircle%20cx%3D%2717.3%27%20cy%3D%2716.8%27%20r%3D%274.4%27%2F%3E%3Cpath%20d%3D%27M16.1%2019v-4.4h1.8a1.3%201.3%200%200%201%200%202.6h-2.5M15.4%2018h2.6%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/summa-propisyu/"] { --kc-ic-red: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14.5%204.5l5%205L10%2019H5v-5z%27%2F%3E%3Cpath%20d%3D%27M12.3%206.7l5%205M3%2021.5h9%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/ndfl/"] { --kc-ic-red: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5.5%207V5.8A2.3%202.3%200%200%201%208.4%203.6L17.5%206%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%277%27%20width%3D%2718%27%20height%3D%2713.5%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M21%2011.5h-4a2.3%202.3%200%200%200%200%204.6h4%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2713.8%27%20r%3D%27.9%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/alimenty/"] { --kc-ic-red: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%276%27%20r%3D%273.2%27%2F%3E%3Cpath%20d%3D%27M2.8%2021v-2.8A5.2%205.2%200%200%201%208%2013a5.2%205.2%200%200%201%203.6%201.4%27%2F%3E%3Ccircle%20cx%3D%2716.8%27%20cy%3D%2712%27%20r%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M12.6%2021v-1.3a4.2%204.2%200%200%201%208.4%200V21%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > a.kalc-card[href$="/kalkulyatory/vznosy-sotrudniki/"] { --kc-ic-red: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%278%27%20r%3D%273.2%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%278%27%20r%3D%273.2%27%2F%3E%3Cpath%20d%3D%27M2.5%2020a5.5%205.5%200%200%201%2011%200M11%2016.2a5.5%205.5%200%200%201%2010.5%203.8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] .kalc-row > .kalc-card::before { content: "" !important; display: block !important; position: absolute !important; right: -18px; bottom: -22px; left: auto !important; top: auto !important; width: 124px !important; height: 124px !important; background: var(--kc-ic-red) center / contain no-repeat !important; border: 0 !important; opacity: 0; clip-path: inset(100% 0 0 0); pointer-events: none; z-index: 0 !important; transition: clip-path .6s cubic-bezier(.4, 0, .2, 1), opacity .25s ease, transform .35s ease; } [data-theme="next"] .kalc-row > a.kalc-card:hover::before { opacity: .55; clip-path: inset(0 0 0 0); transform: rotate(-8deg) scale(1.05); } [data-theme="next"] .kalc-row > a.kalc-card:hover::after { opacity: 0 !important; } @media (max-width: 560px) { [data-theme="next"] .kalc-row > .kalc-card::before { display: none !important; } } @media (prefers-reduced-motion: reduce) { [data-theme="next"] .kalc-row > .kalc-card::before { transition: opacity .2s ease; } } [data-theme="next"] .kalc-row > a.kalc-card:hover::before { opacity: .38 !important; } /* контур — чистый фирменный красный, без прозрачности; линия тоньше, чтобы не перебивать текст */ [data-theme="next"] .kalc-row > a.kalc-card:hover::before { opacity: 1 !important; } /* ══ ПРЕИМУЩЕСТВА («ПОЧЕМУ ИМЕННО ЭТАЛОН») ═══════════════════ Было: белые карточки на серой подложке с кривыми полями, номера «01 —» и бледные метки «vs …». Стало: · компьютер — слева заголовок (закреплён при прокрутке), справа карточки в две колонки; · карточка: иконка на светло-красной плитке и подпись, заголовок, текст, внизу строка сравнения — крестик и зачёркнутый «конкурент»; · наведение: карточка приподнимается, плитка краснеет; · планшет — заголовок сверху, две колонки; телефон — лента с прокруткой. Номер и «vs» обёрнуты в разметке и здесь скрыты. */ [data-theme="next"] .why-us { padding-top: clamp(48px, 5.6vw, 88px) !important; padding-bottom: clamp(40px, 4.6vw, 72px) !important; background: #fff !important; } @media (min-width: 1101px) { [data-theme="next"] .why-us { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 72px); align-items: start; } [data-theme="next"] body > section.why-us > .why-head { position: sticky; top: 110px; padding-right: 0 !important; margin: 0 !important; } [data-theme="next"] body > section.why-us > .why-grid { padding-left: 0 !important; } } [data-theme="next"] .why-head .section-heading-full { font-size: clamp(34px, 4.4vw, 68px) !important; line-height: 1 !important; } [data-theme="next"] .why-head .section-sub br { display: none; } [data-theme="next"] .why-head { margin-bottom: clamp(20px, 2.4vw, 32px); } [data-theme="next"] .why-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(12px, 1.4vw, 18px) !important; background: transparent !important; margin: 0 !important; } [data-theme="next"] .why-grid > .why-card { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico num" "h h" "p p" "vs vs"; grid-template-rows: auto auto 1fr auto; column-gap: 12px; align-items: center; margin: 0 !important; padding: clamp(20px, 1.9vw, 26px) !important; background: #fff !important; border: 1px solid rgba(26, 26, 26, .08) !important; border-radius: var(--r-md) !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .04); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } [data-theme="next"] .why-grid > .why-card:hover { transform: translateY(-3px); border-color: rgba(214, 0, 28, .2) !important; box-shadow: 0 16px 36px rgba(26, 26, 26, .08); } [data-theme="next"] .why-ico { grid-area: ico; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: rgba(214, 0, 28, .08); color: #D6001C; transition: background .2s ease, color .2s ease; } [data-theme="next"] .why-card:hover .why-ico { background: #D6001C; color: #fff; } [data-theme="next"] .why-card-num { grid-area: num; margin: 0 !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase; color: #8a8a8a !important; } [data-theme="next"] .wcn-n { display: none; } [data-theme="next"] .why-card h4 { grid-area: h; margin: 18px 0 8px !important; font-size: clamp(17px, 1.3vw, 20px) !important; font-weight: 800 !important; line-height: 1.25 !important; color: #1A1A1A; text-wrap: balance; } [data-theme="next"] .why-card p { grid-area: p; align-self: start; margin: 0 0 18px !important; font-size: 14.5px !important; line-height: 1.55 !important; color: #6f6f6f !important; } [data-theme="next"] .why-vs { grid-area: vs; display: flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 14px 0 0 !important; border-top: 1px dashed rgba(26, 26, 26, .14); border-radius: 0 !important; background: transparent !important; font-size: 13.5px !important; font-weight: 600 !important; color: #9a9a9a !important; text-decoration: line-through; text-decoration-color: rgba(214, 0, 28, .55); text-decoration-thickness: 1.5px; } [data-theme="next"] .why-vs i { display: none; } [data-theme="next"] .why-vs::before { content: "✕"; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: #F4F2EC; color: #D6001C; font-size: 10px; font-weight: 800; text-decoration: none; } [data-theme="next"] .why-vs::before { text-decoration: none; display: inline-block; line-height: 20px; text-align: center; } @media (max-width: 1100px) { [data-theme="next"] .why-head .section-heading-full br { display: none; } } @media (max-width: 600px) { [data-theme="next"] .why-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding-bottom: 8px !important; scrollbar-width: none; } [data-theme="next"] .why-grid::-webkit-scrollbar { display: none; } [data-theme="next"] .why-grid > .why-card { flex: 0 0 80%; scroll-snap-align: start; } [data-theme="next"] .why-grid > .why-card:hover { transform: none; } } /* ══ ПРЕИМУЩЕСТВА: ЛЕВАЯ КОЛОНКА ═════════════════════════════ Под заголовком было пусто на всю высоту карточек. Теперь: фото офиса со стеклянной плашкой и красная карточка- действие «Проверим вашу бухгалтерию» → блок аудита. Планшет — фото и карточка рядом; телефон — только карточка. */ [data-theme="next"] .why-aside { display: grid; gap: 12px; margin-top: clamp(24px, 2.6vw, 36px); } [data-theme="next"] .why-photo { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: #F2F0EA; } [data-theme="next"] .why-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; transition: transform .8s cubic-bezier(.2, .8, .2, 1); } [data-theme="next"] .why-photo:hover img { transform: scale(1.04); } [data-theme="next"] .why-photo::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, .45) 100%); pointer-events: none; } [data-theme="next"] .why-photo-badge { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, .8); font-size: 13px; line-height: 1.35; color: #5f5f5f; } [data-theme="next"] .why-photo-badge b { display: block; font-size: 14.5px; color: #1A1A1A; } [data-theme="next"] .wpb-ico { flex: 0 0 38px; width: 38px; height: 38px; border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; background: #FFD100; color: #1A1A1A; } [data-theme="next"] .why-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 18px 22px; border-radius: var(--r-md); background: radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #E3061F 0%, #B00017 100%); color: rgba(255, 255, 255, .82); font-size: 14px; text-decoration: none; box-shadow: 0 12px 28px rgba(214, 0, 28, .24); transition: transform .2s ease, box-shadow .2s ease; } [data-theme="next"] .why-cta b { display: block; margin-bottom: 2px; font-size: 17px; color: #fff; } [data-theme="next"] .why-cta i { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: #D6001C; transition: transform .2s ease; } [data-theme="next"] .why-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(214, 0, 28, .32); } [data-theme="next"] .why-cta:hover i { transform: translateX(3px); } @media (min-width: 601px) and (max-width: 1100px) { [data-theme="next"] .why-aside { grid-template-columns: 1fr 1fr; align-items: stretch; } [data-theme="next"] .why-photo { aspect-ratio: auto; min-height: 200px; } [data-theme="next"] .why-cta { flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 22px; } } @media (max-width: 600px) { [data-theme="next"] .why-photo { display: none; } [data-theme="next"] .why-aside { margin-top: 18px; } } /* планшет: широкое фото, под ним карточка-действие */ @media (min-width: 601px) and (max-width: 1100px) { [data-theme="next"] .why-aside { grid-template-columns: 1fr !important; } [data-theme="next"] .why-photo { aspect-ratio: 21 / 9 !important; min-height: 0 !important; } [data-theme="next"] .why-photo img { object-position: 50% 45%; } [data-theme="next"] .why-cta { flex-direction: row !important; align-items: center !important; padding: 18px 18px 18px 22px !important; } } /* ══ ПРЕИМУЩЕСТВА: ТРЕТЬЯ РАСКЛАДКА ══════════════════════════ Закреплённая левая колонка не прижилась. Теперь: · шапка во всю ширину — слева метка и заголовок, справа подпись; · карточки 3×2 на всю колонку; · под ними широкая полоса: фото офиса | красная карточка «Проверим вашу бухгалтерию». Обёртка шапки раскрывается (display: contents), её части и полоса раскладываются сеткой секции. Иконки сразу на красной плитке. */ [data-theme="next"] section.why-us { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-areas: "tag tag" "title sub" "cards cards" "aside aside"; column-gap: clamp(24px, 4vw, 64px) !important; align-items: end !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } [data-theme="next"] body > section.why-us > .why-head { display: contents !important; position: static !important; } [data-theme="next"] .why-head .section-tag { grid-area: tag; justify-self: start; } [data-theme="next"] .why-head .section-heading-full { grid-area: title; margin: 0 !important; } [data-theme="next"] .why-head .section-heading-full br { display: inline !important; } [data-theme="next"] .why-head .section-sub { grid-area: sub; justify-self: end; align-self: end; max-width: 44ch !important; margin: 0 !important; padding-bottom: 6px; } [data-theme="next"] body > section.why-us > .why-grid { grid-area: cards; padding: 0 !important; margin-top: clamp(24px, 2.8vw, 40px) !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } [data-theme="next"] .why-aside { grid-area: aside; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(12px, 1.4vw, 18px) !important; margin-top: clamp(12px, 1.4vw, 18px) !important; } [data-theme="next"] .why-photo { aspect-ratio: auto !important; min-height: 240px; } [data-theme="next"] .why-photo img { object-position: 50% 45%; } /* красная карточка — крупная */ [data-theme="next"] .why-cta { position: relative; overflow: hidden; flex-direction: column !important; align-items: flex-start !important; justify-content: space-between !important; gap: 24px !important; padding: clamp(24px, 2.8vw, 40px) !important; font-size: 15px !important; } [data-theme="next"] .why-cta b { font-size: clamp(24px, 2.4vw, 36px) !important; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 10px !important; max-width: 16ch; } [data-theme="next"] .why-cta i { position: absolute; right: clamp(24px, 2.8vw, 40px); bottom: clamp(24px, 2.8vw, 40px); width: 56px !important; height: 56px !important; flex-basis: 56px !important; } [data-theme="next"] .why-cta::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; border: 40px solid rgba(255, 255, 255, .08); pointer-events: none; } /* иконки сразу красные */ [data-theme="next"] .why-ico { background: #D6001C !important; color: #fff !important; } [data-theme="next"] .why-card:hover .why-ico { background: #B00017 !important; } @media (max-width: 1100px) { [data-theme="next"] section.why-us { grid-template-columns: 1fr !important; grid-template-areas: "tag" "title" "sub" "cards" "aside"; } [data-theme="next"] .why-head .section-sub { justify-self: start; max-width: none !important; margin-top: 10px !important; } [data-theme="next"] .why-head .section-heading-full br { display: none !important; } [data-theme="next"] body > section.why-us > .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [data-theme="next"] .why-aside { grid-template-columns: 1fr !important; } [data-theme="next"] .why-photo { aspect-ratio: 21 / 9 !important; min-height: 0; } [data-theme="next"] .why-cta { min-height: 180px; } } @media (max-width: 600px) { [data-theme="next"] section.why-us { padding-left: 0 !important; padding-right: 0 !important; } [data-theme="next"] .why-head .section-tag, [data-theme="next"] .why-head .section-heading-full, [data-theme="next"] .why-head .section-sub, [data-theme="next"] .why-aside { margin-left: 20px !important; margin-right: 20px !important; } [data-theme="next"] body > section.why-us > .why-grid { display: flex !important; padding: 0 20px 8px !important; } [data-theme="next"] .why-cta { min-height: 0; } [data-theme="next"] .why-cta b { font-size: 22px !important; } [data-theme="next"] .why-cta i { width: 44px !important; height: 44px !important; } } /* высоту полосы задаёт красная карточка, фото заполняет место */ [data-theme="next"] .why-aside { grid-template-rows: minmax(240px, auto); } [data-theme="next"] .why-photo { min-height: 0 !important; height: auto; } [data-theme="next"] .why-photo img { position: absolute; inset: 0; } @media (max-width: 1100px) { [data-theme="next"] .why-aside { grid-template-rows: auto; } } /* ══ ПРЕИМУЩЕСТВА: БЕЗ ФОТО, НОВАЯ КРАСНАЯ ПЛАШКА ════════════ · Фото офиса убрано. · Плашка «Проверим вашу бухгалтерию» — на всю ширину: слева заголовок и подпись, в середине три пункта аудита с галочками, справа белая кнопка. На фоне — светлая фирменная текстура и кольцо. · Подпись под заголовком на компьютере — ровно две строки. */ [data-theme="next"] .why-photo { display: none !important; } [data-theme="next"] .why-aside { grid-template-columns: 1fr !important; grid-template-rows: auto !important; } [data-theme="next"] .why-cta { display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center !important; gap: clamp(20px, 3vw, 48px) !important; min-height: 0 !important; padding: clamp(24px, 2.6vw, 36px) clamp(24px, 3vw, 44px) !important; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-opacity%3D%27.07%27%3E%3Cg%20transform%3D%27translate%2824%2026%29%27%3E%3Cpath%20d%3D%27M0%200h26l10%2010v36H0z%27%2F%3E%3Cpath%20d%3D%27M26%200v10h10M7%2020h20M7%2028h20M7%2036h12%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28150%2040%29%27%3E%3Cpath%20d%3D%27M4%2028L28%204%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%2725%27%20cy%3D%2725%27%20r%3D%275%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2892%20128%29%27%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2719%27%2F%3E%3Cpath%20d%3D%27M15%2030V11h8a5.5%205.5%200%200%201%200%2011h-11M12%2026h11%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28186%20150%29%27%3E%3Cpath%20d%3D%27M0%200h22l8%208v28H0z%27%2F%3E%3Cpath%20d%3D%27M22%200v8h8M6%2016h16M6%2023h16%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2830%20176%29%27%3E%3Cpath%20d%3D%27M4%2022L22%204%27%2F%3E%3Ccircle%20cx%3D%276%27%20cy%3D%276%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%274%27%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%27none%27%3E%3Cpath%20d%3D%27M112%2030l3%209%209%203-9%203-3%209-3-9-9-3%209-3z%27%20fill%3D%27%23FFD100%27%20fill-opacity%3D%27.35%27%2F%3E%3Cpath%20d%3D%27M206%2096l2%206%206%202-6%202-2%206-2-6-6-2%206-2z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%27.25%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 240px 240px repeat, radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(120deg, #E3061F 0%, #C4001A 55%, #A50016 100%) !important; color: rgba(255, 255, 255, .82) !important; font-size: 15px !important; } [data-theme="next"] .why-cta i { display: none !important; } [data-theme="next"] .why-cta::after { right: -80px !important; top: auto !important; bottom: -120px; width: 300px !important; height: 300px !important; border-width: 48px !important; } [data-theme="next"] .wc-main { position: relative; z-index: 1; } [data-theme="next"] .wc-main b { font-size: clamp(24px, 2.2vw, 34px) !important; max-width: none !important; } [data-theme="next"] .wc-list { position: relative; z-index: 1; display: grid; gap: 10px; } [data-theme="next"] .wc-list em { display: flex; align-items: center; gap: 10px; font-style: normal; font-size: 14.5px; font-weight: 600; color: #fff; } [data-theme="next"] .wc-list em::before { content: ""; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6001C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat, #FFD100; } [data-theme="next"] .wc-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: var(--r-sm); background: #fff; color: #1A1A1A; font-size: 15.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 10px 24px rgba(80, 0, 10, .25); transition: background .18s ease, color .18s ease, transform .18s ease; } [data-theme="next"] .wc-btn::after { content: "→"; transition: transform .18s ease; } [data-theme="next"] .why-cta:hover .wc-btn { background: #FFD100; } [data-theme="next"] .why-cta:hover .wc-btn::after { transform: translateX(3px); } [data-theme="next"] .why-cta:hover { transform: translateY(-2px); } /* подпись — две строки на компьютере */ @media (min-width: 1101px) { [data-theme="next"] .why-head .section-sub { max-width: none !important; } [data-theme="next"] .why-head .section-sub br { display: inline !important; } } @media (min-width: 1241px) { [data-theme="next"] .why-head .section-sub { white-space: nowrap; } } @media (max-width: 1100px) { [data-theme="next"] .why-cta { grid-template-columns: 1fr 1fr !important; grid-template-areas: "main list" "btn btn"; min-height: 0 !important; } [data-theme="next"] .wc-main { grid-area: main; } [data-theme="next"] .wc-list { grid-area: list; } [data-theme="next"] .wc-btn { grid-area: btn; justify-content: center; } } @media (max-width: 600px) { [data-theme="next"] .why-cta { grid-template-columns: 1fr !important; grid-template-areas: "main" "list" "btn"; gap: 18px !important; padding: 22px !important; } [data-theme="next"] .wc-main b { font-size: 22px !important; } [data-theme="next"] .wc-btn { width: 100%; } } /* ══ ТАРИФЫ: МОЗАИКА ВМЕСТО КАРУСЕЛИ ═════════════════════════ Было: карусель, видно три тарифа из пяти, сдвинута от линии колонки, стрелка сбоку. Стало (компьютер): «Популярный» — тёмная карточка на два ряда слева; остальные — белые, сеткой справа. Все тарифы видны сразу, стрелки не нужны. Планшет — популярный на всю ширину, остальные по два. Телефон — лента с прокруткой. Галочки вместо точек: на тёмной — жёлтые, на белых — красные на светлом круге. */ [data-theme="next"] #tariffs { padding-top: clamp(48px, 5.6vw, 88px) !important; padding-bottom: clamp(48px, 5.6vw, 88px) !important; background: radial-gradient(40% 70% at 100% 0%, rgba(255, 209, 0, .10) 0%, rgba(255, 209, 0, 0) 70%), #F2F0EA !important; } [data-theme="next"] .tariffs-head { margin-bottom: clamp(24px, 2.8vw, 40px) !important; } [data-theme="next"] .tariffs-head .section-heading-full { font-size: clamp(34px, 4.4vw, 68px) !important; line-height: 1 !important; } [data-theme="next"] .tariffs-wrapper { margin: 0 !important; position: static !important; } [data-theme="next"] .tariffs-nav { display: none !important; } [data-theme="next"] .tariffs-grid { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; gap: clamp(12px, 1.4vw, 18px) !important; overflow: visible !important; padding: 0 !important; } [data-theme="next"] .tariffs-grid > .tariff-card { width: auto !important; margin: 0 !important; display: flex; flex-direction: column; padding: clamp(20px, 1.9vw, 28px) !important; background: #fff !important; border: 1px solid rgba(26, 26, 26, .06) !important; border-radius: var(--r-md) !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .04) !important; transition: transform .22s ease, box-shadow .22s ease; } [data-theme="next"] .tariffs-grid > .tariff-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(26, 26, 26, .09) !important; } [data-theme="next"] .tariff-name { font-size: clamp(19px, 1.5vw, 22px) !important; font-weight: 800 !important; letter-spacing: -.01em; color: #1A1A1A; } [data-theme="next"] .tariff-desc { margin: 4px 0 18px !important; font-size: 14px !important; color: #8a8a8a !important; } [data-theme="next"] .tariff-list { margin: 0 0 22px !important; padding: 18px 0 0 !important; border-top: 1px dashed rgba(26, 26, 26, .12); display: grid; gap: 10px; } [data-theme="next"] .tariff-list li { position: relative; padding: 0 0 0 30px !important; margin: 0 !important; font-size: 14.5px !important; line-height: 1.4 !important; color: #3f3f3f !important; } [data-theme="next"] .tariff-list li::before { content: "" !important; position: absolute !important; left: 0 !important; top: -1px !important; width: 20px !important; height: 20px !important; border-radius: 50% !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6001C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat, rgba(214, 0, 28, .09) !important; } [data-theme="next"] .tariffs-grid .tariff-btn { margin-top: auto !important; min-height: 48px; display: flex !important; align-items: center; justify-content: center; gap: 8px; background: transparent !important; color: #1A1A1A !important; border: 1.5px solid #1A1A1A !important; font-weight: 800 !important; transition: background .18s ease, color .18s ease !important; } [data-theme="next"] .tariffs-grid .tariff-btn::after { content: "→"; } [data-theme="next"] .tariffs-grid .tariff-btn:hover { background: #1A1A1A !important; color: #fff !important; } /* популярный — тёмный, на два ряда */ [data-theme="next"] .tariffs-grid > .tariff-card.popular { grid-row: span 2; position: relative; overflow: hidden; background: radial-gradient(60% 50% at 100% 0%, rgba(255, 165, 31, .28) 0%, rgba(255, 165, 31, 0) 70%), linear-gradient(160deg, #262422 0%, #1A1A1A 60%, #141414 100%) !important; border: 0 !important; box-shadow: 0 20px 44px rgba(26, 26, 26, .22) !important; padding: clamp(24px, 2.4vw, 36px) !important; } [data-theme="next"] .tariff-card.popular .tariff-popular-tag { position: static !important; align-self: flex-start; margin: 0 0 18px !important; padding: 6px 12px !important; background: #FFD100 !important; color: #1A1A1A !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .06em; transform: none !important; } [data-theme="next"] .tariff-card.popular .tariff-name { color: #fff; font-size: clamp(26px, 2.4vw, 36px) !important; line-height: 1.05; } [data-theme="next"] .tariff-card.popular .tariff-desc { color: rgba(255, 255, 255, .6) !important; font-size: 15.5px !important; } [data-theme="next"] .tariff-card.popular .tariff-list { border-top-color: rgba(255, 255, 255, .14); gap: 14px; } [data-theme="next"] .tariff-card.popular .tariff-list li { color: rgba(255, 255, 255, .88) !important; font-size: 15.5px !important; padding-left: 34px !important; } [data-theme="next"] .tariff-card.popular .tariff-list li::before { width: 22px !important; height: 22px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat, #FFD100 !important; } [data-theme="next"] .tariffs-grid .tariff-card.popular .tariff-btn { min-height: 56px; background: #D6001C !important; border-color: #D6001C !important; color: #fff !important; box-shadow: 0 12px 28px rgba(214, 0, 28, .35); } [data-theme="next"] .tariffs-grid .tariff-card.popular .tariff-btn:hover { background: #B00017 !important; border-color: #B00017 !important; } @media (max-width: 1100px) { [data-theme="next"] .tariffs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme="next"] .tariffs-grid > .tariff-card.popular { grid-row: auto; grid-column: 1 / -1; } } @media (max-width: 600px) { [data-theme="next"] body > section#tariffs > .tariffs-wrapper { padding: 0 !important; } [data-theme="next"] .tariffs-grid { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding: 4px 20px 12px !important; scrollbar-width: none; align-items: stretch; } [data-theme="next"] .tariffs-grid > .tariff-card { flex: 0 0 82% !important; width: auto !important; scroll-snap-align: start; } [data-theme="next"] .tariffs-grid > .tariff-card:hover { transform: none; } } /* ══ «ПЕРВЫЙ МЕСЯЦ — БЕСПЛАТНО» ══════════════════════════════ Плашка удачная, добавлено немного глубины: фирменная текстура на жёлтом, справа иллюстрация — календарь с подарком, кнопка крупнее. */ [data-theme="next"] .cta-band { position: relative; overflow: hidden; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27%23B86A00%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-opacity%3D%27.28%27%3E%3Cg%20transform%3D%27translate%2824%2026%29%27%3E%3Cpath%20d%3D%27M0%200h26l10%2010v36H0z%27%2F%3E%3Cpath%20d%3D%27M26%200v10h10M7%2020h20M7%2028h20M7%2036h12%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28150%2040%29%27%3E%3Cpath%20d%3D%27M4%2028L28%204%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%2725%27%20cy%3D%2725%27%20r%3D%275%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2892%20128%29%27%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2719%27%2F%3E%3Cpath%20d%3D%27M15%2030V11h8a5.5%205.5%200%200%201%200%2011h-11M12%2026h11%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28186%20150%29%27%3E%3Cpath%20d%3D%27M0%200h22l8%208v28H0z%27%2F%3E%3Cpath%20d%3D%27M22%200v8h8M6%2016h16M6%2023h16%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2830%20176%29%27%3E%3Cpath%20d%3D%27M4%2022L22%204%27%2F%3E%3Ccircle%20cx%3D%276%27%20cy%3D%276%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%274%27%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%27none%27%3E%3Cpath%20d%3D%27M112%2030l3%209%209%203-9%203-3%209-3-9-9-3%209-3z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%27.85%27%2F%3E%3Cpath%20d%3D%27M206%2096l2%206%206%202-6%202-2%206-2-6-6-2%206-2z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M58%20112l2.5%207%207%202.5-7%202.5-2.5%207-2.5-7-7-2.5%207-2.5z%27%20fill%3D%27%23FF8A1F%27%20fill-opacity%3D%27.55%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 240px 240px repeat, radial-gradient(50% 90% at 20% 30%, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(120deg, #FFDE59 0%, #FFC42E 55%, #FFA51F 100%) !important; } [data-theme="next"] .cta-band-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: clamp(20px, 3vw, 48px) !important; padding-top: clamp(32px, 3.6vw, 52px) !important; padding-bottom: clamp(32px, 3.6vw, 52px) !important; } [data-theme="next"] .cta-band h3 { font-size: clamp(30px, 3.4vw, 52px) !important; line-height: 1.02 !important; letter-spacing: -.03em; } [data-theme="next"] .cta-band-txt p { color: rgba(26, 26, 26, .75) !important; max-width: 52ch; } [data-theme="next"] .cb-art { display: block; width: clamp(120px, 11vw, 160px); line-height: 0; } [data-theme="next"] .cb-art svg { width: 100%; height: auto; transform: rotate(-6deg); filter: drop-shadow(0 12px 20px rgba(150, 80, 0, .25)); transition: transform .3s ease; } [data-theme="next"] .cta-band:hover .cb-art svg { transform: rotate(0deg) scale(1.04); } [data-theme="next"] .cta-band-btn { min-height: 56px; padding: 0 28px !important; box-shadow: 0 12px 28px rgba(26, 26, 26, .25); } @media (max-width: 900px) { [data-theme="next"] .cta-band-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "txt art" "btn btn"; text-align: left !important; } [data-theme="next"] .cta-band-txt { grid-area: txt; } [data-theme="next"] .cb-art { grid-area: art; width: 110px; } [data-theme="next"] .cta-band-btn { grid-area: btn; width: 100%; justify-content: center; } } @media (max-width: 480px) { [data-theme="next"] .cb-art { width: 84px; align-self: start; } } /* пункты — сверху, без растягивания по высоте карточки */ [data-theme="next"] .tariff-list { align-content: start; } [data-theme="next"] .tariff-list li::before { opacity: 1 !important; filter: none !important; } /* на белых карточках — сплошной красный кружок с белой галочкой */ [data-theme="next"] .tariffs-grid > .tariff-card:not(.popular) .tariff-list li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat, #D6001C !important; } [data-theme="next"] .tariffs-grid .tariff-btn { white-space: nowrap; } /* тёмный тариф: пустоту под списком заполняет светлая фирменная текстура, проявляется к низу */ [data-theme="next"] .tariffs-grid > .tariff-card.popular::after { content: ""; position: absolute; inset: 40% 0 0 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-opacity%3D%27.07%27%3E%3Cg%20transform%3D%27translate%2824%2026%29%27%3E%3Cpath%20d%3D%27M0%200h26l10%2010v36H0z%27%2F%3E%3Cpath%20d%3D%27M26%200v10h10M7%2020h20M7%2028h20M7%2036h12%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28150%2040%29%27%3E%3Cpath%20d%3D%27M4%2028L28%204%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%2725%27%20cy%3D%2725%27%20r%3D%275%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2892%20128%29%27%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2719%27%2F%3E%3Cpath%20d%3D%27M15%2030V11h8a5.5%205.5%200%200%201%200%2011h-11M12%2026h11%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28186%20150%29%27%3E%3Cpath%20d%3D%27M0%200h22l8%208v28H0z%27%2F%3E%3Cpath%20d%3D%27M22%200v8h8M6%2016h16M6%2023h16%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2830%20176%29%27%3E%3Cpath%20d%3D%27M4%2022L22%204%27%2F%3E%3Ccircle%20cx%3D%276%27%20cy%3D%276%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%274%27%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%27none%27%3E%3Cpath%20d%3D%27M112%2030l3%209%209%203-9%203-3%209-3-9-9-3%209-3z%27%20fill%3D%27%23FFD100%27%20fill-opacity%3D%27.35%27%2F%3E%3Cpath%20d%3D%27M206%2096l2%206%206%202-6%202-2%206-2-6-6-2%206-2z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%27.25%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 200px 200px repeat; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%); mask-image: linear-gradient(180deg, transparent 0%, #000 60%); opacity: 1.6; pointer-events: none; z-index: 0; } [data-theme="next"] .tariffs-grid > .tariff-card.popular > * { position: relative; z-index: 1; } @media (max-width: 1100px) { [data-theme="next"] .tariffs-grid > .tariff-card.popular::after { inset: 55% 0 0 0; } } /* ══ ТАРИФЫ: ИКОНКИ ПО СМЫСЛУ, БЕЗ ФОНА ══════════════════════ · Вместо одинаковых галочек — тонкие иконки по смыслу пункта (метка data-i в разметке): программа 1С, отправка отчётности, банк, карточка сотрудника, купюра, документ, чат, книга. Без кружков: красные на белых карточках, жёлтые на тёмной. · Блок на белом, карточки — с тонкой рамкой. · Отступ от «Преимуществ» выровнен. */ [data-theme="next"] #tariffs { background: #fff !important; padding-top: clamp(24px, 3vw, 44px) !important; } [data-theme="next"] .tariffs-grid > .tariff-card:not(.popular) { border: 1px solid rgba(26, 26, 26, .09) !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .04) !important; } [data-theme="next"] .tariff-list li { padding-left: 32px !important; } [data-theme="next"] .tariff-card.popular .tariff-list li { padding-left: 36px !important; } [data-theme="next"] .tariff-list li::before { width: 22px !important; height: 22px !important; top: -2px !important; border-radius: 0 !important; } [data-theme="next"] .tariffs-grid > .tariff-card:not(.popular) .tariff-list li[data-i="app"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3%208h18M8%2021h8M12%2018v3%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat !important; } [data-theme="next"] .tariffs-grid > .tariff-card.popular .tariff-list li[data-i="app"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23FFD100%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3%208h18M8%2021h8M12%2018v3%27%2F%3E%3C%2Fsvg%3E") center / 22px no-repeat !important; } [data-theme="next"] .tariffs-grid > .tariff-card:not(.popular) .tariff-list li[data-i="send"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%203L10%2014%27%2F%3E%3Cpath%20d%3D%27M21%203l-7%2018-4-7-7-4z%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat !important; } [data-theme="next"] .tariffs-grid > .tariff-card.popular .tariff-list li[data-i="send"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23FFD100%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%203L10%2014%27%2F%3E%3Cpath%20d%3D%27M21%203l-7%2018-4-7-7-4z%27%2F%3E%3C%2Fsvg%3E") center / 22px no-repeat !important; } [data-theme="next"] .tariffs-grid > .tariff-card:not(.popular) .tariff-list li[data-i="bank"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2010l9-6%209%206%27%2F%3E%3Cpath%20d%3D%27M5%2010v8M9.7%2010v8M14.3%2010v8M19%2010v8M3%2021h18%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat !important; } [data-theme="next"] .tariffs-grid > .tariff-card.popular .tariff-list li[data-i="bank"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23FFD100%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2010l9-6%209%206%27%2F%3E%3Cpath%20d%3D%27M5%2010v8M9.7%2010v8M14.3%2010v8M19%2010v8M3%2021h18%27%2F%3E%3C%2Fsvg%3E") center / 22px no-repeat !important; } [data-theme="next"] .tariffs-grid > .tariff-card:not(.popular) .tariff-list li[data-i="hr"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2711%27%20r%3D%272.3%27%2F%3E%3Cpath%20d%3D%27M5.8%2016c.5-1.6%201.7-2.5%203.2-2.5s2.7.9%203.2%202.5M15%2010h3M15%2013.5h3%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat !important; } [data-theme="next"] .tariffs-grid > .tariff-card.popular .tariff-list li[data-i="hr"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23FFD100%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2711%27%20r%3D%272.3%27%2F%3E%3Cpath%20d%3D%27M5.8%2016c.5-1.6%201.7-2.5%203.2-2.5s2.7.9%203.2%202.5M15%2010h3M15%2013.5h3%27%2F%3E%3C%2Fsvg%3E") center / 22px no-repeat !important; } [data-theme="next"] .tariffs-grid > .tariff-card:not(.popular) .tariff-list li[data-i="pay"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%276%27%20width%3D%2719%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M6%209.5v.01M18%2014.5v.01%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat !important; } [data-theme="next"] .tariffs-grid > .tariff-card.popular .tariff-list li[data-i="pay"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23FFD100%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%276%27%20width%3D%2719%27%20height%3D%2712%27%20rx%3D%272%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272.6%27%2F%3E%3Cpath%20d%3D%27M6%209.5v.01M18%2014.5v.01%27%2F%3E%3C%2Fsvg%3E") center / 22px no-repeat !important; } [data-theme="next"] .tariffs-grid > .tariff-card:not(.popular) .tariff-list li[data-i="doc"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z%27%2F%3E%3Cpath%20d%3D%27M14%203v5h5M9%2014l2%202%204-4%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat !important; } [data-theme="next"] .tariffs-grid > .tariff-card.popular .tariff-list li[data-i="doc"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23FFD100%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z%27%2F%3E%3Cpath%20d%3D%27M14%203v5h5M9%2014l2%202%204-4%27%2F%3E%3C%2Fsvg%3E") center / 22px no-repeat !important; } [data-theme="next"] .tariffs-grid > .tariff-card:not(.popular) .tariff-list li[data-i="chat"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2012a8%208%200%200%201-11.7%207.1L4%2020.5l1.4-4.6A8%208%200%201%201%2021%2012z%27%2F%3E%3Cpath%20d%3D%27M8.5%2012h.01M12%2012h.01M15.5%2012h.01%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat !important; } [data-theme="next"] .tariffs-grid > .tariff-card.popular .tariff-list li[data-i="chat"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23FFD100%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2012a8%208%200%200%201-11.7%207.1L4%2020.5l1.4-4.6A8%208%200%201%201%2021%2012z%27%2F%3E%3Cpath%20d%3D%27M8.5%2012h.01M12%2012h.01M15.5%2012h.01%27%2F%3E%3C%2Fsvg%3E") center / 22px no-repeat !important; } [data-theme="next"] .tariffs-grid > .tariff-card:not(.popular) .tariff-list li[data-i="book"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23D6001C%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20V3H6.5A2.5%202.5%200%200%200%204%205.5z%27%2F%3E%3Cpath%20d%3D%27M4%2019.5A2.5%202.5%200%200%200%206.5%2022H20v-5M9%207h7M9%2011h5%27%2F%3E%3C%2Fsvg%3E") center / 20px no-repeat !important; } [data-theme="next"] .tariffs-grid > .tariff-card.popular .tariff-list li[data-i="book"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23FFD100%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20V3H6.5A2.5%202.5%200%200%200%204%205.5z%27%2F%3E%3Cpath%20d%3D%27M4%2019.5A2.5%202.5%200%200%200%206.5%2022H20v-5M9%207h7M9%2011h5%27%2F%3E%3C%2Fsvg%3E") center / 22px no-repeat !important; } /* ══ «ПЕРВЫЙ МЕСЯЦ»: СПОКОЙНЕЕ ═══════════════════════════════ Текстура мешала читать — убрана. Поля сверху и снизу меньше. Кнопка — фирменная красная. */ [data-theme="next"] .cta-band { background: radial-gradient(50% 90% at 15% 20%, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(120deg, #FFDE59 0%, #FFC42E 55%, #FFA51F 100%) !important; } [data-theme="next"] .cta-band-inner { padding-top: clamp(20px, 2.2vw, 32px) !important; padding-bottom: clamp(20px, 2.2vw, 32px) !important; } [data-theme="next"] .cta-band-btn { background: #D6001C !important; color: #fff !important; box-shadow: 0 12px 28px rgba(214, 0, 28, .3) !important; } [data-theme="next"] .cta-band-btn:hover { background: #B00017 !important; } [data-theme="next"] .cb-art { width: clamp(100px, 8.5vw, 128px); } /* отступы: «Преимущества» → «Тарифы» как между остальными белыми секциями; у плашки «Первый месяц» свой отступ секции не нужен — поля задаёт внутренний блок */ [data-theme="next"] #why { padding-bottom: clamp(28px, 3vw, 44px) !important; } [data-theme="next"] #tariffs { padding-top: clamp(20px, 2.2vw, 28px) !important; } [data-theme="next"] section.cta-band { padding-top: 0 !important; padding-bottom: 0 !important; } /* ══ ТЕЛЕФОН: ЕДИНАЯ ШКАЛА ВНУТРЕННИХ ПОЛЕЙ ══════════════════ Замер на 360 и 390 показал разброс от 13 до 24 и тесные плашки (у «Первого месяца» 20 сверху и снизу). Сводим: карточки — 24 маленькие плитки инструментов — 16 плашки — 24 по бокам, 28–32 по высоте */ @media (max-width: 600px) { /* карточки — 24 */ [data-theme="next"] .evc { padding: 24px !important; } [data-theme="next"] .pains-grid > .pain-card { padding: 24px 24px 0 !important; } [data-theme="next"] .pain-link { margin-left: -24px !important; margin-right: -24px !important; } [data-theme="next"] .why-grid > .why-card { padding: 24px !important; } [data-theme="next"] .tariffs-grid > .tariff-card { padding: 24px !important; } [data-theme="next"] .tariffs-grid > .tariff-card.popular { padding: 28px 24px !important; } [data-theme="next"] .cv-card { padding: 22px !important; } /* плитки инструментов — 16 */ [data-theme="next"] .kalc-row > .kalc-card { padding: 16px !important; } /* плашки */ [data-theme="next"] .hero-strip .trust-items { padding: 26px 24px !important; } [data-theme="next"] .why-cta { padding: 28px 24px !important; } [data-theme="next"] .calc-plate .section-tag { margin: 32px 24px 12px !important; } [data-theme="next"] .calc-plate .section-heading-full, [data-theme="next"] .calc-plate .section-sub { margin-left: 24px !important; margin-right: 24px !important; } [data-theme="next"] .calc-plate .calc-visual { padding: 22px 24px 0 !important; } [data-theme="next"] .calc-plate .bh-actions { margin: 18px 24px 32px !important; } [data-theme="next"] .cta-band-inner { padding-top: 32px !important; padding-bottom: 32px !important; row-gap: 22px !important; } [data-theme="next"] body > section.kalc-home > .kalc-actions { padding-bottom: 40px !important; } [data-theme="next"] .cookie-inner { padding: 22px 24px !important; } [data-chrome="next"] .cookie-inner { padding: 22px 24px !important; } } @media (max-width: 600px) { [data-theme="next"] #uslugi .blog-card { padding: 12px 12px 24px !important; } [data-theme="next"] #uslugi .blog-card h3, [data-theme="next"] #uslugi .blog-card p { margin-left: 12px !important; margin-right: 12px !important; } [data-theme="next"] #uslugi .blog-card h3 { margin-top: 4px !important; margin-bottom: 8px !important; } } /* ══ РЕАЛЬНЫЙ КЕЙС ═══════════════════════════════════════════ · Карточка: текст слева с нормальными полями, тёмная панель справа на всю высоту — углы общие с карточкой. · «Но главное…» — с красной чертой, «Решение…» — жёлтая плашка-итог (по порядку абзацев: главное — предпоследний, решение — последний). · Панель: крупная жёлтая цифра, цитата с кавычкой, белая кнопка к аудиту. · Телефон: текст, под ним панель во всю ширину. */ [data-theme="next"] .case-study { padding-top: clamp(48px, 5.6vw, 88px) !important; padding-bottom: clamp(28px, 3.4vw, 48px) !important; } [data-theme="next"] .case-head { margin-bottom: clamp(24px, 2.8vw, 40px) !important; } [data-theme="next"] .case-head .section-heading-full { font-size: clamp(32px, 4.2vw, 64px) !important; line-height: 1.02 !important; } [data-theme="next"] .case-block { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important; margin: 0 !important; padding: 0 !important; overflow: hidden; background: #fff !important; border: 1px solid rgba(26, 26, 26, .09) !important; border-radius: var(--r-lg) !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .04) !important; } [data-theme="next"] .case-content { padding: clamp(28px, 3.4vw, 52px) !important; margin: 0 !important; } [data-theme="next"] .case-content h3 { margin: 0 0 18px !important; font-size: clamp(22px, 1.9vw, 30px) !important; line-height: 1.2 !important; letter-spacing: -.02em; text-wrap: balance; } [data-theme="next"] .case-content p { margin: 0 0 14px !important; font-size: 15.5px !important; line-height: 1.6 !important; color: #5f5f5f !important; } [data-theme="next"] .case-content p:nth-last-of-type(2) { padding-left: 16px; border-left: 3px solid #D6001C; color: #1A1A1A !important; font-weight: 600; } [data-theme="next"] .case-content p:last-of-type { margin: 20px 0 0 !important; padding: 14px 18px; border-radius: var(--r-sm); background: #FFF1B8; color: #1A1A1A !important; font-weight: 700; } [data-theme="next"] .case-highlight { position: relative; display: flex !important; flex-direction: column; justify-content: center; align-items: flex-start !important; gap: 0; margin: 0 !important; padding: clamp(28px, 3.4vw, 52px) !important; border-radius: 0 !important; text-align: left !important; background: radial-gradient(70% 60% at 100% 0%, rgba(255, 165, 31, .30) 0%, rgba(255, 165, 31, 0) 70%), radial-gradient(60% 50% at 0% 100%, rgba(214, 0, 28, .22) 0%, rgba(214, 0, 28, 0) 70%), linear-gradient(160deg, #262422 0%, #1A1A1A 60%, #141414 100%) !important; overflow: hidden; } [data-theme="next"] .case-number { font-size: clamp(48px, 5.2vw, 84px) !important; line-height: 1 !important; letter-spacing: -.03em; color: #FFD100 !important; white-space: nowrap; } [data-theme="next"] .case-number-label { margin: 10px 0 0 !important; font-size: 16px !important; color: rgba(255, 255, 255, .7) !important; text-align: left !important; } [data-theme="next"] .case-number-label br { display: none; } [data-theme="next"] .case-quote { position: relative; margin: clamp(24px, 2.6vw, 36px) 0 0 !important; padding: 20px 0 0 !important; border-top: 1px solid rgba(255, 255, 255, .12); font-style: normal !important; font-size: 15.5px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, .82) !important; text-align: left !important; } [data-theme="next"] .case-quote::before { content: "“"; display: block; margin-bottom: 6px; font-size: 56px; line-height: .6; font-weight: 800; color: #D6001C; } [data-theme="next"] .case-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; margin-top: 24px; padding: 0 22px; border-radius: var(--r-sm); background: #fff; color: #1A1A1A; font-size: 15px; font-weight: 800; text-decoration: none; transition: background .18s ease; } [data-theme="next"] .case-cta::after { content: "→"; transition: transform .18s ease; } [data-theme="next"] .case-cta:hover { background: #FFD100; } [data-theme="next"] .case-cta:hover::after { transform: translateX(3px); } @media (max-width: 900px) { [data-theme="next"] .case-block { grid-template-columns: 1fr !important; } [data-theme="next"] .case-head .section-heading-full br { display: none; } } @media (max-width: 600px) { [data-theme="next"] body > section.case-study > .case-block { margin: 0 20px !important; } [data-theme="next"] .case-block { border-radius: var(--r-md) !important; } [data-theme="next"] .case-content, [data-theme="next"] .case-highlight { padding: 28px 24px !important; } [data-theme="next"] .case-content h3 { font-size: 21px !important; } [data-theme="next"] .case-content p { font-size: 15px !important; } [data-theme="next"] .case-number { font-size: 48px !important; } [data-theme="next"] .case-cta { width: 100%; justify-content: center; } } /* карточка кейса — в колонке снаружи, без полей изнутри (общее правило секций давало ей поля внутри) */ [data-theme="next"] body > section.case-study > .case-block { padding: 0 !important; margin: 0 var(--gutter) !important; } /* ══ ОТСТУПЫ ОТ ЦВЕТНЫХ ПОЛОС ДО ЗАГОЛОВКА ═══════════════════ Было по-разному: 58 и 88. Единое значение — 64 на компьютере, 40 на телефоне. */ [data-theme="next"] #why { padding-top: clamp(40px, 4.4vw, 64px) !important; } [data-theme="next"] .case-study { padding-top: clamp(40px, 4.4vw, 64px) !important; } /* ══ БОНУСЫ — КУПОНЫ ═════════════════════════════════════════ · Тёплая серая полоса, на ней белые купоны. · Купон: верх — иконка и название; перфорация с полукруглыми вырезами по бокам; низ — описание. · «Бесплатно» — красный штамп в углу, слегка повёрнут. · Наведение: купон приподнимается, иконка краснеет. · Компьютер — 4 в ряд, планшет — 2, телефон — лента. */ [data-theme="next"] .bonuses { margin-top: clamp(28px, 3.4vw, 48px); padding-top: clamp(48px, 5vw, 76px) !important; padding-bottom: clamp(48px, 5vw, 76px) !important; background: radial-gradient(40% 70% at 0% 0%, rgba(255, 209, 0, .10) 0%, rgba(255, 209, 0, 0) 70%), #F2F0EA !important; } [data-theme="next"] .bonuses-head { margin-bottom: clamp(24px, 2.8vw, 40px) !important; } [data-theme="next"] .bonuses-head .section-heading-full { font-size: clamp(32px, 4.2vw, 64px) !important; line-height: 1.02 !important; } [data-theme="next"] .bonuses-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(12px, 1.4vw, 18px) !important; background: transparent !important; margin: 0 !important; } [data-theme="next"] .bonuses-grid > .bonus-card { --notch: 11px; --cut: 104px; position: relative; display: grid; grid-template-rows: var(--cut) 1fr; margin: 0 !important; padding: 0 !important; background: #fff !important; border: 0 !important; border-radius: var(--r-md) !important; box-shadow: none !important; filter: drop-shadow(0 1px 1px rgba(60, 40, 0, .06)) drop-shadow(0 6px 14px rgba(60, 40, 0, .05)); -webkit-mask: radial-gradient(circle var(--notch) at 0 var(--cut), transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% var(--cut), transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle var(--notch) at 0 var(--cut), transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% var(--cut), transparent 98%, #000) right / 51% 100% no-repeat; transition: transform .22s ease, filter .22s ease; } [data-theme="next"] .bonuses-grid > .bonus-card:hover { transform: translateY(-4px); filter: drop-shadow(0 2px 2px rgba(60, 40, 0, .06)) drop-shadow(0 16px 28px rgba(60, 40, 0, .10)); } /* перфорация */ [data-theme="next"] .bonuses-grid > .bonus-card::after { content: ""; position: absolute; left: calc(var(--notch) + 8px); right: calc(var(--notch) + 8px); top: var(--cut); border-top: 2px dashed rgba(26, 26, 26, .14); } /* верх купона */ [data-theme="next"] .bonus-ico { grid-row: 1; align-self: center; justify-self: start; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-left: 22px; border-radius: var(--r-sm); background: #FFF1B8; color: #1A1A1A; transition: background .2s ease, color .2s ease; } [data-theme="next"] .bonus-card:hover .bonus-ico { background: #D6001C; color: #fff; } [data-theme="next"] .bonus-card h4 { grid-row: 1; align-self: center; margin: 0 22px 0 88px !important; padding-right: 64px; font-size: clamp(16px, 1.2vw, 18px) !important; font-weight: 800 !important; line-height: 1.25 !important; color: #1A1A1A !important; text-wrap: balance; } /* низ купона */ [data-theme="next"] .bonus-card p { grid-row: 2; margin: 0 !important; padding: 20px 22px 24px; font-size: 14.5px !important; line-height: 1.55 !important; color: #6f6f6f !important; } /* штамп «Бесплатно» */ [data-theme="next"] .bonus-card .bonus-tag { position: absolute !important; top: 12px; right: 12px; z-index: 2; margin: 0 !important; padding: 4px 8px !important; border: 2px solid #D6001C !important; border-radius: var(--r-xs) !important; background: rgba(214, 0, 28, .04) !important; color: #D6001C !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .08em; text-transform: uppercase; transform: rotate(8deg); } @media (max-width: 1100px) { [data-theme="next"] .bonuses-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [data-theme="next"] .bonuses-head .section-heading-full br { display: none; } } @media (max-width: 600px) { [data-theme="next"] body > section.bonuses > .bonuses-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding: 4px 20px 12px !important; scrollbar-width: none; align-items: stretch; } [data-theme="next"] .bonuses-grid::-webkit-scrollbar { display: none; } [data-theme="next"] .bonuses-grid > .bonus-card { flex: 0 0 82%; scroll-snap-align: start; } [data-theme="next"] .bonuses-grid > .bonus-card:hover { transform: none; } [data-theme="next"] .bonus-card p { padding: 20px 24px 24px; } } /* купон — одна колонка; иконка и название в одной ячейке */ [data-theme="next"] .bonuses-grid > .bonus-card { grid-template-columns: minmax(0, 1fr) !important; min-width: 0; } [data-theme="next"] .bonus-ico, [data-theme="next"] .bonus-card h4 { grid-column: 1 !important; grid-row: 1 !important; } [data-theme="next"] .bonus-card p { grid-column: 1 !important; grid-row: 2 !important; } /* отступ кейс → бонусы как у остальных переходов к полосам */ [data-theme="next"] .bonuses { margin-top: 0 !important; } [data-theme="next"] .case-study { padding-bottom: clamp(40px, 4.4vw, 64px) !important; } [data-theme="next"] .bonus-card h4 { padding-right: 84px !important; } [data-theme="next"] .bonus-card .bonus-tag { top: 14px; right: 14px; } /* штамп — на линии перфорации справа: ничего не закрывает */ [data-theme="next"] .bonus-card h4 { padding-right: 0 !important; margin-right: 22px !important; } [data-theme="next"] .bonus-card .bonus-tag { top: calc(var(--cut) - 13px) !important; right: calc(var(--notch) + 16px) !important; background: #fff !important; transform: rotate(-6deg) !important; } /* длинные названия купонов не вылезают за край: перенос после «1С:» (в разметке), переносы по слогам и страховка */ [data-theme="next"] .bonus-card h4 { min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } /* ══ КАК МЫ РАБОТАЕМ — ТАЙМЛАЙН ══════════════════════════════ · Компьютер: красные круги с номерами на общей линии (переход красный → жёлтый), под кругом — светлая карточка. · Наведение: круг увеличивается, карточка белеет. · Планшет и телефон: вертикальная линия слева, круги на ней, текст справа. */ [data-theme="next"] .steps { padding-top: clamp(40px, 4.4vw, 64px) !important; padding-bottom: clamp(40px, 4.4vw, 64px) !important; background: #fff !important; } [data-theme="next"] .steps-head { margin-bottom: clamp(28px, 3vw, 44px) !important; } [data-theme="next"] .steps-head .section-heading-full { font-size: clamp(32px, 4.2vw, 64px) !important; line-height: 1.02 !important; } [data-theme="next"] body > section.steps > .steps-track { position: relative; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: clamp(12px, 1.4vw, 18px) !important; padding: 0 var(--gutter) !important; background: transparent !important; } /* линия */ [data-theme="next"] body > section.steps > .steps-track::before { content: ""; position: absolute; top: 25px; left: calc(var(--gutter) + 26px); right: calc(var(--gutter) + 26px); height: 3px; border-radius: 2px; background: linear-gradient(90deg, #D6001C 0%, #FFA51F 60%, #FFD100 100%); } [data-theme="next"] .step-card { position: relative; display: flex; flex-direction: column; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; } [data-theme="next"] .step-num { position: relative; z-index: 1; display: flex !important; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 0 18px !important; border-radius: 50%; background: #D6001C; color: #fff !important; font-size: 17px !important; font-weight: 800 !important; letter-spacing: 0 !important; line-height: 1 !important; box-shadow: 0 0 0 6px #fff, 0 8px 18px rgba(214, 0, 28, .25); transition: transform .22s ease; } [data-theme="next"] .step-card:last-child .step-num { background: #FFD100; color: #1A1A1A !important; box-shadow: 0 0 0 6px #fff, 0 8px 18px rgba(214, 150, 0, .3); } [data-theme="next"] .step-card:hover .step-num { transform: scale(1.08); } [data-theme="next"] .step-card h4, [data-theme="next"] .step-card p { position: relative; z-index: 1; } [data-theme="next"] .step-card::after { content: ""; position: absolute; inset: 70px 0 0 0; border-radius: var(--r-md); background: #F6F4EF; border: 1px solid transparent; transition: background .22s ease, box-shadow .22s ease, transform .22s ease; } [data-theme="next"] .step-card:hover::after { background: #fff; border-color: rgba(26, 26, 26, .08); box-shadow: 0 14px 32px rgba(26, 26, 26, .08); } [data-theme="next"] .step-card h4 { margin: 20px 20px 8px !important; font-size: clamp(16px, 1.2vw, 18px) !important; font-weight: 800 !important; line-height: 1.25 !important; text-wrap: balance; } [data-theme="next"] .step-card p { margin: 0 20px 22px !important; font-size: 14.5px !important; line-height: 1.55 !important; color: #6f6f6f !important; } @media (max-width: 1100px) { [data-theme="next"] body > section.steps > .steps-track { grid-template-columns: 1fr !important; gap: 14px !important; } [data-theme="next"] body > section.steps > .steps-track::before { top: 26px; bottom: 26px; left: calc(var(--gutter) + 25px); right: auto; width: 3px; height: auto; background: linear-gradient(180deg, #D6001C 0%, #FFA51F 60%, #FFD100 100%); } [data-theme="next"] .step-card { display: grid !important; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "num h" "num p"; column-gap: 16px; align-items: start; } [data-theme="next"] .step-num { grid-area: num; margin: 0 !important; } [data-theme="next"] .step-card::after { inset: 0 0 0 68px; } [data-theme="next"] .step-card h4 { grid-area: h; margin: 18px 20px 6px !important; } [data-theme="next"] .step-card p { grid-area: p; margin: 0 20px 18px !important; } } /* линия — отрезками от круга к следующему кругу: заканчивается ровно на последнем при любом числе шагов */ [data-theme="next"] body > section.steps > .steps-track::before { display: none !important; } [data-theme="next"] .steps-track { --st-gap: clamp(12px, 1.4vw, 18px); } [data-theme="next"] .step-card:not(:last-child)::before { content: ""; position: absolute; z-index: 0; top: 25px; left: 26px; width: calc(100% + var(--st-gap)); height: 3px; border-radius: 2px; background: linear-gradient(90deg, #D6001C, #E8400F); } [data-theme="next"] .step-card:nth-last-child(3)::before { background: linear-gradient(90deg, #E8400F, #FFA51F); } [data-theme="next"] .step-card:nth-last-child(2)::before { background: linear-gradient(90deg, #FFA51F, #FFD100); } @media (max-width: 1100px) { [data-theme="next"] .steps-track { --st-gap: 14px; } [data-theme="next"] .step-card:not(:last-child)::before { top: 26px; left: 24.5px; width: 3px; height: calc(100% + var(--st-gap)); background: linear-gradient(180deg, #D6001C, #E8400F); } [data-theme="next"] .step-card:nth-last-child(3)::before { background: linear-gradient(180deg, #E8400F, #FFA51F); } [data-theme="next"] .step-card:nth-last-child(2)::before { background: linear-gradient(180deg, #FFA51F, #FFD100); } } /* ════════════════════════════════════════════════════════════ ОСТАВШИЕСЯ БЛОКИ ГЛАВНОЙ — В ОБЩЕМ СТИЛЕ Единые правила: заголовки одного размера, карточки белые с тонкой рамкой (16), цветные полосы во всю ширину, крупные плашки в колонке (28), кнопки «Все …» тёмные, на телефоне — ленты с прокруткой и поля 24. У сеток был серый фон — вместе с полями колонки он давал серые кромки по краям. Фон сеток убран. ════════════════════════════════════════════════════════════ */ /* общие заголовки секций */ [data-theme="next"] .section-heading-full { font-size: clamp(32px, 4.2vw, 64px) !important; line-height: 1.02 !important; } @media (max-width: 1100px) { [data-theme="next"] .segments-head .section-heading-full br, [data-theme="next"] .reviews-head .section-heading-full br, [data-theme="next"] .team-head .section-heading-full br, [data-theme="next"] .geo-head .section-heading-full br { display: none; } } /* общие кнопки «Все …» — тёмные */ [data-theme="next"] #podcast .ph-actions .btn-primary, [data-theme="next"] #news .bh-actions .btn-primary, [data-theme="next"] #blog .bh-actions .btn-primary, [data-theme="next"] #materialy .bh-actions .btn-primary { display: inline-flex !important; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px !important; background: #1A1A1A !important; color: #fff !important; box-shadow: none !important; } [data-theme="next"] #podcast .ph-actions .btn-primary::after, [data-theme="next"] #news .bh-actions .btn-primary::after, [data-theme="next"] #blog .bh-actions .btn-primary::after, [data-theme="next"] #materialy .bh-actions .btn-primary::after { content: "→"; } [data-theme="next"] #podcast .ph-actions .btn-primary:hover, [data-theme="next"] #news .bh-actions .btn-primary:hover, [data-theme="next"] #blog .bh-actions .btn-primary:hover, [data-theme="next"] #materialy .bh-actions .btn-primary:hover { background: #333 !important; } @media (max-width: 600px) { [data-theme="next"] #podcast .ph-actions .btn-primary, [data-theme="next"] #news .bh-actions .btn-primary, [data-theme="next"] #blog .bh-actions .btn-primary, [data-theme="next"] #materialy .bh-actions .btn-primary { width: 100%; justify-content: center; } } /* ── ДЛЯ КОГО (тёмная полоса) ─────────────────────────────── */ [data-theme="next"] .segments { padding-top: clamp(48px, 5vw, 80px) !important; padding-bottom: clamp(48px, 5vw, 80px) !important; background: radial-gradient(40% 70% at 100% 0%, rgba(255, 165, 31, .16) 0%, rgba(255, 165, 31, 0) 70%), radial-gradient(35% 60% at 0% 100%, rgba(214, 0, 28, .14) 0%, rgba(214, 0, 28, 0) 70%), #161616 !important; } [data-theme="next"] .segments-head { margin-bottom: clamp(24px, 2.8vw, 40px) !important; } [data-theme="next"] .segments-head .section-sub { color: rgba(255, 255, 255, .6) !important; } [data-theme="next"] body > section.segments > .segments-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: clamp(10px, 1.2vw, 16px) !important; margin: 0 !important; background: transparent !important; } [data-theme="next"] .seg-card { margin: 0 !important; padding: 22px !important; background: rgba(255, 255, 255, .04) !important; border: 1px solid rgba(255, 255, 255, .09) !important; border-radius: var(--r-md) !important; transition: background .2s ease, border-color .2s ease, transform .2s ease; } [data-theme="next"] .seg-card:hover { background: rgba(255, 255, 255, .07) !important; border-color: rgba(255, 209, 0, .45) !important; transform: translateY(-3px); } [data-theme="next"] .seg-num { display: inline-flex !important; margin: 0 0 16px !important; padding: 5px 10px; border-radius: var(--r-xs); background: #FFD100; color: #1A1A1A !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .06em !important; } [data-theme="next"] .seg-card h4 { margin: 0 0 8px !important; font-size: 17px !important; line-height: 1.25 !important; color: #fff !important; text-wrap: balance; } [data-theme="next"] .seg-card p { margin: 0 !important; font-size: 14px !important; line-height: 1.55 !important; color: rgba(255, 255, 255, .6) !important; } @media (max-width: 1100px) { [data-theme="next"] body > section.segments > .segments-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [data-theme="next"] .seg-card:last-child { grid-column: 1 / -1; } } @media (max-width: 600px) { [data-theme="next"] body > section.segments > .segments-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding: 0 20px 8px !important; scrollbar-width: none; } [data-theme="next"] .seg-card { flex: 0 0 78%; scroll-snap-align: start; padding: 24px !important; } [data-theme="next"] .seg-card:hover { transform: none; } } /* ── ОТЗЫВЫ ───────────────────────────────────────────────── */ [data-theme="next"] .reviews { padding-top: clamp(40px, 4.4vw, 64px) !important; padding-bottom: clamp(40px, 4.4vw, 64px) !important; background: #fff !important; } [data-theme="next"] .reviews-head { margin-bottom: clamp(24px, 2.8vw, 40px) !important; } [data-theme="next"] body > section.reviews > .reviews-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(12px, 1.4vw, 18px) !important; margin: 0 !important; background: transparent !important; } [data-theme="next"] .review-card { position: relative; display: flex; flex-direction: column; margin: 0 !important; padding: 28px 24px 24px !important; background: #fff !important; border: 1px solid rgba(26, 26, 26, .09) !important; border-radius: var(--r-md) !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .04); } [data-theme="next"] .review-card::before { content: "“"; display: block; height: 30px; margin-bottom: 4px; font-size: 64px; font-weight: 800; line-height: .9; color: #D6001C; } [data-theme="next"] .review-quote { flex: 1; margin: 0 0 20px !important; font-size: 15.5px !important; font-style: normal !important; line-height: 1.6 !important; color: #3f3f3f !important; } [data-theme="next"] .review-author { padding-top: 16px; border-top: 1px solid rgba(26, 26, 26, .08); font-size: 15px !important; font-weight: 800 !important; color: #1A1A1A !important; } [data-theme="next"] .review-company { margin-top: 2px !important; font-size: 13px !important; color: #8a8a8a !important; } [data-theme="next"] body > section.reviews > .reviews-badges { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px !important; margin: clamp(16px, 2vw, 24px) 0 0 !important; border: 0 !important; } [data-theme="next"] .badge-item { display: flex !important; align-items: center; gap: 12px; margin: 0 !important; padding: 14px !important; background: #F6F4EF !important; border: 0 !important; border-radius: var(--r-sm) !important; } [data-theme="next"] .badge-icon { flex: 0 0 40px; width: 40px !important; height: 40px !important; border-radius: var(--r-xs) !important; } [data-theme="next"] .badge-text { font-size: 12.5px !important; line-height: 1.35 !important; min-width: 0; } [data-theme="next"] .badge-text strong { font-size: 13.5px !important; } [data-theme="next"] body > section.reviews > div:not([class]) { margin-top: clamp(32px, 3.6vw, 52px) !important; } [data-theme="next"] .reviews h3 { font-size: clamp(22px, 1.9vw, 30px) !important; letter-spacing: -.02em; } [data-theme="next"] body > section.reviews > .video-row { gap: clamp(12px, 1.4vw, 18px) !important; margin: 16px 0 0 !important; } [data-theme="next"] .video-card { border-radius: var(--r-md) !important; overflow: hidden; } [data-theme="next"] .video-card .play-btn { width: 60px !important; height: 60px !important; border-radius: 50% !important; box-shadow: 0 10px 24px rgba(214, 0, 28, .35); } @media (max-width: 1100px) { [data-theme="next"] body > section.reviews > .reviews-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme="next"] .badge-item:last-child { grid-column: 1 / -1; } } @media (max-width: 900px) { [data-theme="next"] body > section.reviews > .reviews-grid { grid-template-columns: 1fr !important; } } @media (max-width: 600px) { [data-theme="next"] body > section.reviews > .reviews-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding: 0 20px 8px !important; scrollbar-width: none; } [data-theme="next"] .review-card { flex: 0 0 82%; scroll-snap-align: start; } [data-theme="next"] body > section.reviews > .reviews-badges { grid-template-columns: 1fr; } } /* ── ПОДКАСТ (серая полоса) ───────────────────────────────── */ [data-theme="next"] .podcast-home { padding-top: clamp(48px, 5vw, 76px) !important; padding-bottom: clamp(48px, 5vw, 76px) !important; background: radial-gradient(40% 70% at 100% 0%, rgba(255, 209, 0, .10) 0%, rgba(255, 209, 0, 0) 70%), #F2F0EA !important; } [data-theme="next"] .ph-head { margin-bottom: clamp(20px, 2.4vw, 32px) !important; } [data-theme="next"] .ph-thumb { padding: 4px !important; border: 0 !important; background: conic-gradient(from 210deg, #FFD100, #FFA51F, #D6001C, #FFA51F, #FFD100) !important; } [data-theme="next"] .ph-thumb video, [data-theme="next"] .ph-thumb img { border: 4px solid #F2F0EA !important; border-radius: 50% !important; box-sizing: border-box; } [data-theme="next"] .ph-thumb--soon { background: #DDDAD3 !important; } [data-theme="next"] .ph-play { background: #D6001C !important; box-shadow: 0 8px 18px rgba(214, 0, 28, .35); } [data-theme="next"] .ph-dur { background: rgba(26, 26, 26, .8) !important; } [data-theme="next"] .ph-meta { color: #D6001C !important; } [data-theme="next"] .ph-card h3 { color: #1A1A1A !important; font-weight: 700 !important; } [data-theme="next"] .ph-actions { margin-top: clamp(16px, 2vw, 24px) !important; } [data-theme="next"] .podcast-home .ph-nav { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: rgba(255, 255, 255, .85) !important; border: 1px solid rgba(26, 26, 26, .08) !important; box-shadow: 0 10px 28px rgba(26, 26, 26, .12) !important; } [data-theme="next"] .podcast-home .ph-nav:hover { background: #FFD100 !important; } /* ── НОВОСТИ, БЛОГ, МАТЕРИАЛЫ: КАРТОЧКИ ───────────────────── */ [data-theme="next"] #news, [data-theme="next"] #blog { padding-top: clamp(40px, 4.4vw, 64px) !important; padding-bottom: clamp(20px, 2.4vw, 32px) !important; background: #fff !important; } [data-theme="next"] #blog { padding-top: clamp(20px, 2.4vw, 32px) !important; padding-bottom: clamp(40px, 4.4vw, 64px) !important; } [data-theme="next"] #news .blog-grid, [data-theme="next"] #blog .blog-grid, [data-theme="next"] #materialy .blog-grid { gap: clamp(12px, 1.4vw, 18px) !important; background: transparent !important; } [data-theme="next"] #news .blog-card, [data-theme="next"] #blog .blog-card, [data-theme="next"] #materialy .blog-card { display: flex !important; flex-direction: column; padding: 10px 10px 20px !important; background: #fff !important; border: 1px solid rgba(26, 26, 26, .08) !important; border-radius: var(--r-md) !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .04) !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } [data-theme="next"] #news .blog-card:hover, [data-theme="next"] #blog .blog-card:hover, [data-theme="next"] #materialy .blog-card:hover { transform: translateY(-3px); border-color: rgba(26, 26, 26, .14) !important; box-shadow: 0 16px 36px rgba(26, 26, 26, .09) !important; } [data-theme="next"] #news .bc-thumb, [data-theme="next"] #blog .bc-thumb, [data-theme="next"] #materialy .bc-thumb { margin: 0 0 14px !important; border-radius: var(--r-sm) !important; overflow: hidden; } [data-theme="next"] #news .bc-thumb img, [data-theme="next"] #blog .bc-thumb img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); } [data-theme="next"] #news .blog-card:hover .bc-thumb img, [data-theme="next"] #blog .blog-card:hover .bc-thumb img { transform: scale(1.04); } [data-theme="next"] #news .blog-card > :not(.bc-thumb), [data-theme="next"] #blog .blog-card > :not(.bc-thumb), [data-theme="next"] #materialy .blog-card > :not(.bc-thumb) { margin-left: 10px !important; margin-right: 10px !important; } [data-theme="next"] #news .bc-tag, [data-theme="next"] #blog .bc-tag, [data-theme="next"] #materialy .bc-tag { align-self: flex-start; margin-bottom: 8px !important; padding: 3px 8px !important; background: rgba(214, 0, 28, .08) !important; color: #D6001C !important; } [data-theme="next"] #news .blog-card h3, [data-theme="next"] #blog .blog-card h3, [data-theme="next"] #materialy .blog-card h3 { font-size: 17px !important; font-weight: 800 !important; line-height: 1.3 !important; color: #1A1A1A !important; } [data-theme="next"] #news .blog-card p, [data-theme="next"] #blog .blog-card p, [data-theme="next"] #materialy .blog-card p { font-size: 14px !important; line-height: 1.5 !important; color: #6f6f6f !important; } [data-theme="next"] #news .bc-more, [data-theme="next"] #blog .bc-more, [data-theme="next"] #materialy .bc-more { margin-top: auto !important; padding-top: 10px; font-weight: 800 !important; color: #D6001C !important; } [data-theme="next"] #news .bc-date, [data-theme="next"] #blog .bc-date { color: #9a9a9a !important; } @media (max-width: 600px) { [data-theme="next"] #news .blog-grid, [data-theme="next"] #blog .blog-grid, [data-theme="next"] #materialy .blog-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; margin: 0 -20px !important; padding: 4px 20px 12px !important; scrollbar-width: none; } [data-theme="next"] #news .blog-card, [data-theme="next"] #blog .blog-card, [data-theme="next"] #materialy .blog-card { flex: 0 0 80% !important; width: auto !important; scroll-snap-align: start; } [data-theme="next"] #news .blog-card:nth-child(n), [data-theme="next"] #blog .blog-card:nth-child(n), [data-theme="next"] #materialy .blog-card:nth-child(n) { display: flex !important; } [data-theme="next"] #news .blog-card:hover, [data-theme="next"] #blog .blog-card:hover, [data-theme="next"] #materialy .blog-card:hover { transform: none; } } /* материалы — серая полоса, миниатюры тёмные с красным */ [data-theme="next"] #materialy { padding-top: clamp(48px, 5vw, 76px) !important; padding-bottom: clamp(48px, 5vw, 76px) !important; background: radial-gradient(40% 70% at 0% 0%, rgba(255, 209, 0, .10) 0%, rgba(255, 209, 0, 0) 70%), #F2F0EA !important; } [data-theme="next"] #materialy .bc-thumb--mat { background: radial-gradient(80% 90% at 100% 100%, rgba(214, 0, 28, .9) 0%, rgba(214, 0, 28, 0) 70%), linear-gradient(135deg, #262422 0%, #1A1A1A 100%) !important; } [data-theme="next"] #materialy .bc-thumb--mat svg { transition: transform .3s ease; } [data-theme="next"] #materialy .blog-card:hover .bc-thumb--mat svg { transform: scale(1.12) rotate(-4deg); } /* ── ВИДЖЕТЫ ДЛЯ ПАРТНЁРОВ ────────────────────────────────── */ [data-theme="next"] .vidzhety-home { padding-top: clamp(40px, 4.4vw, 64px) !important; padding-bottom: clamp(40px, 4.4vw, 64px) !important; background: #fff !important; } [data-theme="next"] body > section.vidzhety-home > .vh-inner { max-width: none !important; margin: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px) !important; align-items: center; } [data-theme="next"] .vh-list span { border-radius: var(--r-xs) !important; background: #F6F4EF !important; border: 0 !important; font-weight: 700 !important; } [data-theme="next"] .vh-btn { min-height: 52px; display: inline-flex !important; align-items: center; } [data-theme="next"] .vh-right { padding: clamp(20px, 2.6vw, 36px); border-radius: var(--r-lg); background: radial-gradient(60% 70% at 100% 0%, rgba(255, 209, 0, .18) 0%, rgba(255, 209, 0, 0) 70%), #F2F0EA; } [data-theme="next"] .vh-code { border-radius: var(--r-md) !important; box-shadow: 0 16px 36px rgba(26, 26, 26, .18); } [data-theme="next"] .vh-demo { border: 0 !important; box-shadow: 0 16px 36px rgba(26, 26, 26, .10); } [data-theme="next"] .vh-demo-res { background: #FFD100 !important; } @media (max-width: 900px) { [data-theme="next"] body > section.vidzhety-home > .vh-inner { grid-template-columns: 1fr; } [data-theme="next"] .vh-right { border-radius: var(--r-md); } } /* ── БЕСПЛАТНЫЙ АУДИТ (плашка в колонке) ──────────────────── */ [data-theme="next"] .audit-section { padding: clamp(8px, 1vw, 16px) 0 clamp(40px, 4.4vw, 64px) !important; background: #fff !important; } [data-theme="next"] body > section.audit-section > .audit-block { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; margin: 0 var(--gutter) !important; padding: 0 !important; overflow: hidden; border-radius: var(--r-lg) !important; background: #fff !important; border: 1px solid rgba(26, 26, 26, .08) !important; box-shadow: 0 20px 50px rgba(26, 26, 26, .08) !important; } [data-theme="next"] .audit-left { position: relative; padding: clamp(28px, 3.6vw, 56px) !important; margin: 0 !important; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-opacity%3D%27.07%27%3E%3Cg%20transform%3D%27translate%2824%2026%29%27%3E%3Cpath%20d%3D%27M0%200h26l10%2010v36H0z%27%2F%3E%3Cpath%20d%3D%27M26%200v10h10M7%2020h20M7%2028h20M7%2036h12%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28150%2040%29%27%3E%3Cpath%20d%3D%27M4%2028L28%204%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%2725%27%20cy%3D%2725%27%20r%3D%275%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2892%20128%29%27%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2719%27%2F%3E%3Cpath%20d%3D%27M15%2030V11h8a5.5%205.5%200%200%201%200%2011h-11M12%2026h11%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28186%20150%29%27%3E%3Cpath%20d%3D%27M0%200h22l8%208v28H0z%27%2F%3E%3Cpath%20d%3D%27M22%200v8h8M6%2016h16M6%2023h16%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2830%20176%29%27%3E%3Cpath%20d%3D%27M4%2022L22%204%27%2F%3E%3Ccircle%20cx%3D%276%27%20cy%3D%276%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%274%27%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%27none%27%3E%3Cpath%20d%3D%27M112%2030l3%209%209%203-9%203-3%209-3-9-9-3%209-3z%27%20fill%3D%27%23FFD100%27%20fill-opacity%3D%27.35%27%2F%3E%3Cpath%20d%3D%27M206%2096l2%206%206%202-6%202-2%206-2-6-6-2%206-2z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%27.25%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 240px 240px repeat, radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #E3061F 0%, #C4001A 55%, #A50016 100%) !important; color: #fff; } [data-theme="next"] .audit-left h2 { font-size: clamp(30px, 3.2vw, 48px) !important; line-height: 1.02 !important; letter-spacing: -.03em; color: #fff !important; } [data-theme="next"] .audit-left p { color: rgba(255, 255, 255, .82) !important; } [data-theme="next"] .audit-left p br { display: none; } [data-theme="next"] .audit-list { display: grid; gap: 12px; margin-top: 24px !important; } [data-theme="next"] .audit-list li { position: relative; padding-left: 34px !important; color: #fff !important; font-weight: 600; font-size: 15px !important; } [data-theme="next"] .audit-list li::before { content: "" !important; position: absolute !important; left: 0 !important; top: -1px !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6001C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat, #FFD100 !important; opacity: 1 !important; } [data-theme="next"] .audit-right { padding: clamp(28px, 3.6vw, 56px) !important; margin: 0 !important; background: #fff !important; } [data-theme="next"] .audit-right h3 { font-size: clamp(22px, 1.9vw, 28px) !important; } [data-theme="next"] .audit-submit { min-height: 52px; box-shadow: 0 10px 24px rgba(214, 0, 28, .25); } @media (max-width: 900px) { [data-theme="next"] body > section.audit-section > .audit-block { grid-template-columns: 1fr !important; } } @media (max-width: 600px) { [data-theme="next"] body > section.audit-section > .audit-block { border-radius: var(--r-md) !important; } [data-theme="next"] .audit-left, [data-theme="next"] .audit-right { padding: 28px 24px !important; } } /* ── КОМАНДА ──────────────────────────────────────────────── */ [data-theme="next"] .team { padding-top: clamp(40px, 4.4vw, 64px) !important; padding-bottom: clamp(40px, 4.4vw, 64px) !important; background: #fff !important; } [data-theme="next"] .team-head { margin-bottom: clamp(24px, 2.8vw, 40px) !important; } [data-theme="next"] body > section.team > .team-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(12px, 1.4vw, 18px) !important; margin: 0 !important; background: transparent !important; } [data-theme="next"] .team-card { margin: 0 !important; padding: 28px 20px 24px !important; background: #F6F4EF !important; border: 1px solid transparent !important; border-radius: var(--r-md) !important; transition: background .22s ease, box-shadow .22s ease, transform .22s ease, border-color .22s ease; } [data-theme="next"] .team-card:hover { background: #fff !important; border-color: rgba(26, 26, 26, .08) !important; box-shadow: 0 16px 36px rgba(26, 26, 26, .08); transform: translateY(-3px); } [data-theme="next"] .team-photo { width: 104px !important; height: 104px !important; padding: 3px; box-sizing: border-box; border-radius: 50% !important; background: conic-gradient(from 210deg, #FFD100, #FFA51F, #D6001C, #FFA51F, #FFD100); } [data-theme="next"] .team-photo img { border: 3px solid #F6F4EF; border-radius: 50% !important; box-sizing: border-box; } [data-theme="next"] .team-card:hover .team-photo img { border-color: #fff; } [data-theme="next"] .team-card h4 { font-size: 17px !important; font-weight: 800 !important; } [data-theme="next"] .team-exp { color: #D6001C !important; font-weight: 700 !important; } [data-theme="next"] .team-badge { border-radius: var(--r-xs) !important; background: #fff !important; border: 1px solid rgba(214, 0, 28, .25) !important; } [data-theme="next"] body > section.team > .certs-row { margin: clamp(28px, 3vw, 44px) 0 0 !important; } [data-theme="next"] .certs-scroll { gap: 12px !important; } [data-theme="next"] .cert-thumb { border-radius: var(--r-sm) !important; box-shadow: 0 6px 16px rgba(26, 26, 26, .08); } [data-theme="next"] .certs-nav { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: rgba(255, 255, 255, .9) !important; box-shadow: 0 10px 24px rgba(26, 26, 26, .14) !important; } [data-theme="next"] .certs-nav:hover { background: #FFD100 !important; } @media (max-width: 900px) { [data-theme="next"] body > section.team > .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 600px) { [data-theme="next"] body > section.team > .team-grid { gap: 8px !important; } [data-theme="next"] .team-card { padding: 20px 12px !important; } [data-theme="next"] .team-photo { width: 84px !important; height: 84px !important; } [data-theme="next"] .team-card h4 { font-size: 15px !important; } [data-theme="next"] .team-card:hover { transform: none; } } /* ── ЧАСТЫЕ ВОПРОСЫ ───────────────────────────────────────── */ [data-theme="next"] .faq { padding-top: clamp(48px, 5vw, 76px) !important; padding-bottom: clamp(48px, 5vw, 76px) !important; background: radial-gradient(40% 70% at 100% 0%, rgba(255, 209, 0, .10) 0%, rgba(255, 209, 0, 0) 70%), #F2F0EA !important; } [data-theme="next"] .faq-head { margin-bottom: clamp(24px, 2.8vw, 40px) !important; border: 0 !important; } [data-theme="next"] body > section.faq > .faq-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; align-items: start; margin: 0 !important; max-width: none !important; border: 0 !important; } [data-theme="next"] .faq-item { margin: 0 !important; background: #fff !important; border: 1px solid rgba(26, 26, 26, .06) !important; border-radius: var(--r-md) !important; overflow: hidden; transition: box-shadow .2s ease; } [data-theme="next"] .faq-item.open { box-shadow: 0 14px 32px rgba(26, 26, 26, .08); } [data-theme="next"] .faq-q { min-height: 64px; padding: 18px 20px !important; font-size: 16px !important; font-weight: 800 !important; color: #1A1A1A !important; border-radius: 0 !important; } [data-theme="next"] .faq-q span { flex: 0 0 32px; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: #FFF1B8 !important; color: #1A1A1A !important; display: inline-flex !important; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease; } [data-theme="next"] .faq-item.open .faq-q span { background: #D6001C !important; color: #fff !important; } [data-theme="next"] .faq-a-inner { padding: 0 20px 20px !important; font-size: 15px !important; line-height: 1.6 !important; color: #5f5f5f !important; } @media (max-width: 900px) { [data-theme="next"] body > section.faq > .faq-list { grid-template-columns: 1fr; } } /* ── КОНТАКТЫ И ГЕОГРАФИЯ ─────────────────────────────────── */ [data-theme="next"] .geo { padding-top: clamp(40px, 4.4vw, 64px) !important; padding-bottom: clamp(40px, 4.4vw, 64px) !important; background: #fff !important; } [data-theme="next"] .geo-head { margin-bottom: clamp(24px, 2.8vw, 40px) !important; } [data-theme="next"] body > section.geo > .geo-media { margin: 0 var(--gutter) clamp(12px, 1.4vw, 18px) !important; padding: 0 !important; gap: clamp(12px, 1.4vw, 18px) !important; } [data-theme="next"] .geo-video, [data-theme="next"] .office-photo { border-radius: var(--r-md) !important; overflow: hidden; } [data-theme="next"] .geo-photos { gap: clamp(12px, 1.4vw, 18px) !important; } [data-theme="next"] body > section.geo > .geo-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 18px) !important; margin: 0 var(--gutter) !important; padding: 0 !important; background: transparent !important; } [data-theme="next"] .geo-cities, [data-theme="next"] .geo-contact { margin: 0 !important; padding: clamp(24px, 2.8vw, 40px) !important; border-radius: var(--r-lg) !important; } [data-theme="next"] .geo-cities { background: #F6F4EF !important; } [data-theme="next"] .geo-contact { background: radial-gradient(60% 60% at 100% 0%, rgba(255, 165, 31, .22) 0%, rgba(255, 165, 31, 0) 70%), linear-gradient(160deg, #262422 0%, #1A1A1A 60%, #141414 100%) !important; } [data-theme="next"] .geo-cities h3, [data-theme="next"] .geo-contact h3 { font-size: clamp(20px, 1.6vw, 24px) !important; } @media (max-width: 900px) { [data-theme="next"] body > section.geo > .geo-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { [data-theme="next"] .geo-cities, [data-theme="next"] .geo-contact { padding: 28px 24px !important; border-radius: var(--r-md) !important; } } /* ── правки после проверки ─────────────────────────────────── */ /* подкаст: у видео тёмная подложка (кольцо не просвечивает), стрелки — на краях колонки */ [data-theme="next"] .ph-thumb video { background: #1A1A1A; } [data-theme="next"] .podcast-home .ph-nav.prev { left: calc(var(--gutter) - 24px) !important; } [data-theme="next"] .podcast-home .ph-nav.next { right: calc(var(--gutter) - 24px) !important; } /* виджеты: отступ колонки был задан дважды — у секции и у блока */ [data-theme="next"] section.vidzhety-home { padding-left: 0 !important; padding-right: 0 !important; } /* аудит: без текстуры под текстом */ [data-theme="next"] .audit-left { background: radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 55%), radial-gradient(60% 60% at 100% 100%, rgba(80, 0, 10, .25) 0%, rgba(80, 0, 10, 0) 70%), linear-gradient(135deg, #E3061F 0%, #C4001A 55%, #A50016 100%) !important; } /* виджеты: колонки могут сжиматься, длинный заголовок переносится */ [data-theme="next"] .vh-inner > * { min-width: 0; } [data-theme="next"] .vh-left .section-heading-full { overflow-wrap: break-word; hyphens: auto; } /* подкаст: центр кольца — тёмный слоем фона, даже если видео ещё не загрузилось */ [data-theme="next"] .ph-thumb:not(.ph-thumb--soon) { background: radial-gradient(circle closest-side, #1A1A1A calc(100% - 8px), #F2F0EA calc(100% - 8px), #F2F0EA calc(100% - 4px), transparent calc(100% - 4px)), conic-gradient(from 210deg, #FFD100, #FFA51F, #D6001C, #FFA51F, #FFD100) !important; } /* слой кнопки воспроизведения — на весь кружок, без заливки */ [data-theme="next"] .ph-play { background: transparent !important; box-shadow: none !important; } /* кольцо подкаста — обводкой снаружи: видео растянуто на весь кружок и перекрывало внутреннее кольцо */ [data-theme="next"] .ph-thumb:not(.ph-thumb--soon) { background: #1A1A1A !important; padding: 0 !important; box-shadow: 0 0 0 3px #F2F0EA, 0 0 0 6px #D6001C, 0 12px 28px rgba(26, 26, 26, .18) !important; } [data-theme="next"] .ph-thumb video, [data-theme="next"] .ph-thumb img { border: 0 !important; } [data-theme="next"] .ph-thumb--soon { box-shadow: 0 0 0 3px #F2F0EA, 0 0 0 6px #DDDAD3 !important; } [data-theme="next"] .podcast-home button.ph-nav, [data-theme="next"] .team button.certs-nav { border-radius: 50% !important; } /* ════════════════════════════════════════════════════════════ ПРАВКИ ПО ЗАМЕЧАНИЯМ (16.09, вечер) ════════════════════════════════════════════════════════════ */ /* ── Для кого: иконка сферы справа от метки ───────────────── */ [data-theme="next"] .seg-card { position: relative; } [data-theme="next"] .seg-ico { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--r-sm); background: rgba(255, 209, 0, .12); color: #FFD100; transition: background .2s ease, color .2s ease; } [data-theme="next"] .seg-card:hover .seg-ico { background: #FFD100; color: #1A1A1A; } [data-theme="next"] .seg-num { margin-top: 10px !important; margin-bottom: 22px !important; } /* ── Отзывы: ссылки в плашках без увеличенной строки ──────── На узких экранах ссылкам в тексте дана высота 30 для нажатия — в плашках «ВКонтакте» и «Дзен» это раздувало межстрочный интервал. */ [data-theme="next"] .badge-text a { display: inline !important; min-height: 0 !important; line-height: inherit !important; padding: 4px 0 !important; margin: -4px 0 !important; } [data-theme="next"] .badge-text { line-height: 1.35 !important; } [data-theme="next"] .badge-text strong { display: block; margin-bottom: 2px; } [data-theme="next"] .badge-item { align-items: center !important; min-height: 68px; } /* ── Видео: отступ как у остальных переходов, пропорция 16:9 ─ Высоту на сайте задаёт сам ролик (постер); чтобы карточки были ровными, задаём 16:9, ролик вписывается целиком. */ [data-theme="next"] body > section.reviews > div:not([class]) { margin-top: clamp(40px, 4.4vw, 64px) !important; } [data-theme="next"] .reviews h3 { margin-bottom: 0 !important; } [data-theme="next"] .video-card { aspect-ratio: 16 / 9; background: #1A1A1A !important; } [data-theme="next"] .video-card video { width: 100%; height: 100%; object-fit: contain; display: block; } /* ── Блоки со списком карточек: кнопка «Все …» справа от заголовка, красная (как «Все калькуляторы»). На телефоне — под карточками во всю ширину. ─────────────────────────── */ [data-theme="next"] #podcast .ph-actions .btn-primary, [data-theme="next"] #news .bh-actions .btn-primary, [data-theme="next"] #blog .bh-actions .btn-primary, [data-theme="next"] #materialy .bh-actions .btn-primary { background: #D6001C !important; box-shadow: 0 10px 24px rgba(214, 0, 28, .24) !important; white-space: nowrap; } [data-theme="next"] #podcast .ph-actions .btn-primary:hover, [data-theme="next"] #news .bh-actions .btn-primary:hover, [data-theme="next"] #blog .bh-actions .btn-primary:hover, [data-theme="next"] #materialy .bh-actions .btn-primary:hover { background: #B00017 !important; } @media (min-width: 721px) { [data-theme="next"] #news .bh-wrap, [data-theme="next"] #blog .bh-wrap, [data-theme="next"] #materialy .bh-wrap { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head act" "grid grid"; align-items: end; column-gap: 24px; } [data-theme="next"] #news .bh-head, [data-theme="next"] #blog .bh-head, [data-theme="next"] #materialy .bh-head { grid-area: head; } [data-theme="next"] #news .blog-grid, [data-theme="next"] #blog .blog-grid, [data-theme="next"] #materialy .blog-grid { grid-area: grid; } [data-theme="next"] #news .bh-actions, [data-theme="next"] #blog .bh-actions, [data-theme="next"] #materialy .bh-actions { grid-area: act; margin: 0 0 clamp(18px, 2.2vw, 28px) !important; text-align: right !important; } [data-theme="next"] section.podcast-home { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head act" "track track"; align-items: end; column-gap: 24px; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; position: relative; } [data-theme="next"] body > section.podcast-home > .ph-head { grid-area: head; padding: 0 !important; } [data-theme="next"] body > section.podcast-home > .ph-actions { grid-area: act; margin: 0 0 clamp(20px, 2.4vw, 32px) !important; padding: 0 !important; text-align: right; } [data-theme="next"] body > section.podcast-home > .ph-track { grid-area: track; } } /* ── Подкаст: лента от левого края колонки, справа мягкое затухание вместо обрезки на полкружка ───────────────────── */ [data-theme="next"] body > section.podcast-home > .ph-track { padding: 8px 0 !important; margin: 0 !important; scroll-padding-inline: 0; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); } [data-theme="next"] body > section.podcast-home > .ph-track > :first-child { margin-left: 8px !important; } [data-theme="next"] .podcast-home .ph-nav { top: auto !important; } @media (max-width: 720px) { [data-theme="next"] body > section.podcast-home > .ph-track { padding: 8px 20px !important; scroll-padding-inline: 20px; -webkit-mask-image: none; mask-image: none; } } /* ── Материалы — на белом; виджеты — на серой полосе ─────── */ [data-theme="next"] #materialy { background: #fff !important; padding-top: clamp(40px, 4.4vw, 64px) !important; padding-bottom: clamp(40px, 4.4vw, 64px) !important; } [data-theme="next"] .vidzhety-home { padding-top: clamp(48px, 5vw, 76px) !important; padding-bottom: clamp(48px, 5vw, 76px) !important; background: radial-gradient(40% 70% at 0% 0%, rgba(255, 209, 0, .12) 0%, rgba(255, 209, 0, 0) 70%), #F2F0EA !important; } [data-theme="next"] .vh-right { background: #fff !important; box-shadow: 0 16px 40px rgba(60, 40, 0, .08); } [data-theme="next"] .vh-list span { background: #fff !important; } [data-theme="next"] .audit-section { padding-top: clamp(40px, 4.4vw, 64px) !important; } /* ── Аудит: иконки вместо галочек ───────────────────────── */ [data-theme="next"] .audit-list { gap: 14px !important; } [data-theme="next"] .audit-list li { padding-left: 48px !important; min-height: 34px; display: flex; align-items: center; } [data-theme="next"] .audit-list li::before { top: 50% !important; width: 34px !important; height: 34px !important; margin-top: -17px; border-radius: var(--r-sm) !important; } [data-theme="next"] .audit-list li[data-i="db"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%275.5%27%20rx%3D%277%27%20ry%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M5%205.5v13c0%201.4%203.1%202.5%207%202.5s7-1.1%207-2.5v-13M5%2012c0%201.4%203.1%202.5%207%202.5s7-1.1%207-2.5%27%2F%3E%3C%2Fsvg%3E") center / 18px no-repeat, rgba(255, 255, 255, .16) !important; } [data-theme="next"] .audit-list li[data-i="risk"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l9.5%2016.5h-19z%27%2F%3E%3Cpath%20d%3D%27M12%2010v4M12%2017h.01%27%2F%3E%3C%2Fsvg%3E") center / 18px no-repeat, rgba(255, 255, 255, .16) !important; } [data-theme="next"] .audit-list li[data-i="chart"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020V10M10%2020V4M16%2020v-7M22%2020H2%27%2F%3E%3C%2Fsvg%3E") center / 18px no-repeat, rgba(255, 255, 255, .16) !important; } [data-theme="next"] .audit-list li[data-i="idea"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%2018h6M10%2021.5h4M12%202.5a6.5%206.5%200%200%200-3.8%2011.8V16h7.6v-1.7A6.5%206.5%200%200%200%2012%202.5z%27%2F%3E%3C%2Fsvg%3E") center / 18px no-repeat, rgba(255, 255, 255, .16) !important; } [data-theme="next"] .audit-list li[data-i="doc"]::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z%27%2F%3E%3Cpath%20d%3D%27M14%203v5h5M9%2013h6M9%2017h4%27%2F%3E%3C%2Fsvg%3E") center / 18px no-repeat, rgba(255, 255, 255, .16) !important; } /* ── Аудит: форма с отступами как в первом экране ────────── заголовок → подпись 8, подпись → поля 24, поле → поле 16, поля → согласие 16, согласие → кнопка 24 (телефон: 20/14/18/20) */ [data-theme="next"] .audit-right > h3 { margin: 0 0 8px !important; line-height: 1.25 !important; } [data-theme="next"] .audit-right > p { margin: 0 0 24px !important; } [data-theme="next"] .audit-right .form-group { margin: 0 0 16px !important; } [data-theme="next"] .audit-right .form-group label { margin-bottom: 7px !important; } [data-theme="next"] .audit-right .consent-row { margin: 0 0 24px !important; } [data-theme="next"] .audit-right .audit-submit { margin: 0 !important; width: 100%; } @media (max-width: 600px) { [data-theme="next"] .audit-right > p { margin-bottom: 20px !important; } [data-theme="next"] .audit-right .form-group { margin-bottom: 14px !important; } [data-theme="next"] .audit-right .form-group:has(+ .consent-row) { margin-bottom: 18px !important; } [data-theme="next"] .audit-right .consent-row { margin-bottom: 20px !important; } } /* ── Команда: руководитель крупно, остальные карточками с фото, плитка «Сертификаты», лента сертификатов на плашке ─ */ [data-theme="next"] body > section.team > .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-rows: auto; } [data-theme="next"] .team-card { display: flex !important; flex-direction: column; align-items: flex-start !important; text-align: left !important; padding: 10px 10px 18px !important; background: #fff !important; border: 1px solid rgba(26, 26, 26, .08) !important; } [data-theme="next"] .team-photo { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; padding: 0 !important; margin: 0 0 14px !important; border-radius: var(--r-sm) !important; background: #F2F0EA !important; overflow: hidden; } [data-theme="next"] .team-photo img { width: 100% !important; height: 100% !important; object-fit: cover; border: 0 !important; border-radius: 0 !important; transition: transform .5s cubic-bezier(.2, .8, .2, 1); } [data-theme="next"] .team-card:hover .team-photo img { transform: scale(1.04); } [data-theme="next"] .team-card > :not(.team-photo) { margin-left: 8px !important; margin-right: 8px !important; } [data-theme="next"] .team-card h4 { margin-top: 0 !important; margin-bottom: 2px !important; } [data-theme="next"] .team-role { color: #8a8a8a !important; font-size: 13.5px !important; } [data-theme="next"] .team-exp { display: inline-flex; margin-top: 10px !important; padding: 4px 8px; border-radius: var(--r-xs); background: #FFF1B8; color: #1A1A1A !important; font-size: 12px !important; } [data-theme="next"] .team-badge { display: inline-flex !important; margin-top: 6px !important; } /* руководитель */ [data-theme="next"] .team-grid > .team-card:first-child { grid-row: span 2; padding: 12px 12px 22px !important; } [data-theme="next"] .team-grid > .team-card:first-child .team-photo { aspect-ratio: 4 / 5; flex: 1 1 auto; } [data-theme="next"] .team-grid > .team-card:first-child h4 { font-size: clamp(20px, 1.6vw, 24px) !important; } /* плитка «Сертификаты» */ [data-theme="next"] .team-certs-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 22px; border-radius: var(--r-md); background: radial-gradient(70% 60% at 100% 0%, rgba(255, 165, 31, .3) 0%, rgba(255, 165, 31, 0) 70%), linear-gradient(160deg, #262422 0%, #1A1A1A 60%, #141414 100%); color: rgba(255, 255, 255, .7); font-size: 14px; text-decoration: none; min-height: 220px; transition: transform .22s ease, box-shadow .22s ease; } [data-theme="next"] .team-certs-tile b { font-size: 19px; line-height: 1.2; color: #fff; } [data-theme="next"] .tct-ico { position: absolute; top: 22px; left: 22px; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r-sm); background: #FFD100; color: #1A1A1A; } [data-theme="next"] .team-certs-tile i { align-self: flex-start; margin-top: 12px; padding: 8px 14px; border-radius: var(--r-sm); background: #fff; color: #1A1A1A; font-style: normal; font-weight: 800; } [data-theme="next"] .team-certs-tile i::after { content: " ↓"; } [data-theme="next"] .team-certs-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(26, 26, 26, .2); } /* лента сертификатов на серой плашке */ [data-theme="next"] body > section.team > .certs-row { margin: clamp(16px, 2vw, 24px) var(--gutter) 0 !important; padding: clamp(20px, 2.4vw, 32px) !important; border-radius: var(--r-lg); background: #F2F0EA; } [data-theme="next"] .certs-label { margin: 0 0 16px !important; padding: 0 !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .06em; color: #1A1A1A !important; } [data-theme="next"] .certs-wrapper { position: relative; margin: 0 !important; padding: 0 !important; } [data-theme="next"] .certs-scroll { padding: 0 !important; scroll-padding-inline: 0 !important; } [data-theme="next"] .cert-thumb { background: #fff; } [data-theme="next"] .certs-nav.prev { left: -22px !important; } [data-theme="next"] .certs-nav.next { right: -22px !important; } @media (max-width: 1100px) { [data-theme="next"] body > section.team > .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } [data-theme="next"] .team-grid > .team-card:first-child { grid-row: span 2; } [data-theme="next"] .team-certs-tile { grid-column: span 2; min-height: 0; } } @media (max-width: 720px) { [data-theme="next"] body > section.team > .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [data-theme="next"] .team-grid > .team-card:first-child { grid-column: 1 / -1; grid-row: auto; flex-direction: row; align-items: center !important; gap: 14px; } [data-theme="next"] .team-grid > .team-card:first-child .team-photo { flex: 0 0 42%; aspect-ratio: 1 / 1; margin: 0 !important; } [data-theme="next"] .team-grid > .team-card:first-child > :not(.team-photo) { margin-left: 0 !important; } [data-theme="next"] .team-card { padding: 8px 8px 16px !important; } [data-theme="next"] .team-certs-tile { grid-column: 1 / -1; padding: 20px 20px 20px 90px; min-height: 0; } [data-theme="next"] .tct-ico { top: 50%; margin-top: -26px; left: 20px; } [data-theme="next"] .team-certs-tile i { display: none; } [data-theme="next"] body > section.team > .certs-row { margin-left: 20px !important; margin-right: 20px !important; padding: 20px !important; border-radius: var(--r-md); } [data-theme="next"] .certs-nav { display: none !important; } } /* wrapper с фото руководителя — flex-колонка, текст внизу */ [data-theme="next"] .team-grid > .team-card:first-child { justify-content: flex-end; } /* ── Частые вопросы: слева заголовок и карточка «Не нашли ответ?», справа список, разделённый линиями ───────────── */ [data-theme="next"] .faq-aside { display: none; } @media (min-width: 901px) { [data-theme="next"] section.faq { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 72px); align-items: start; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } [data-theme="next"] body > section.faq > .faq-head, [data-theme="next"] body > section.faq > .faq-list { padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; } } [data-theme="next"] .faq-aside { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 2.8vw, 36px); padding: 24px; border-radius: var(--r-md); background: radial-gradient(70% 60% at 100% 0%, rgba(255, 165, 31, .28) 0%, rgba(255, 165, 31, 0) 70%), linear-gradient(160deg, #262422 0%, #1A1A1A 60%, #141414 100%); color: rgba(255, 255, 255, .7); font-size: 14.5px; line-height: 1.5; } [data-theme="next"] .faq-aside b { flex: 1 0 100%; font-size: 20px; color: #fff; } [data-theme="next"] .faq-aside > span { flex: 1 0 100%; margin-bottom: 8px; } [data-theme="next"] .faq-aside-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .1); color: #fff; font-weight: 800; font-size: 14.5px; text-decoration: none; transition: background .18s ease; } [data-theme="next"] .faq-aside-btn:hover { background: rgba(255, 255, 255, .18); } [data-theme="next"] .faq-aside-btn--red { background: #D6001C; } [data-theme="next"] .faq-aside-btn--red:hover { background: #B00017; } [data-theme="next"] body > section.faq > .faq-list { grid-template-columns: 1fr !important; gap: 0 !important; padding: 8px 24px !important; background: #fff; border-radius: var(--r-lg); } [data-theme="next"] .faq-item { border: 0 !important; border-bottom: 1px solid rgba(26, 26, 26, .08) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } [data-theme="next"] .faq-item:last-child { border-bottom: 0 !important; } [data-theme="next"] .faq-q { padding: 20px 0 !important; font-size: 17px !important; gap: 16px; } [data-theme="next"] .faq-a-inner { padding: 0 48px 20px 0 !important; } [data-theme="next"] .faq-q span { transition: background .2s ease, transform .25s ease !important; } [data-theme="next"] .faq-item.open .faq-q span { transform: rotate(45deg); } @media (max-width: 900px) { [data-theme="next"] body > section.faq > .faq-list { margin: 0 20px !important; padding: 4px 20px !important; border-radius: var(--r-md); } [data-theme="next"] .faq-aside { margin: 16px 20px 0; } [data-theme="next"] .faq-q { font-size: 16px !important; } } @media (max-width: 900px) { [data-theme="next"] section.faq { display: flex !important; flex-direction: column; } [data-theme="next"] body > section.faq > .faq-head { display: contents !important; } [data-theme="next"] .faq-head > .section-tag, [data-theme="next"] .faq-head > .section-heading-full { margin-left: 20px !important; margin-right: 20px !important; } [data-theme="next"] .faq-head > .section-heading-full { margin-bottom: 20px !important; } [data-theme="next"] .faq-aside { order: 5; } } /* ── Контакты: вместо городов — «Работаем с любым городом» ─ */ [data-theme="next"] .geo-cities { display: none !important; } [data-theme="next"] .geo-remote { padding: clamp(24px, 2.8vw, 40px); border-radius: var(--r-lg); background: #F6F4EF; } [data-theme="next"] .geo-remote h3 { margin: 0 0 6px; font-size: clamp(20px, 1.6vw, 24px); font-weight: 800; color: #1A1A1A; } [data-theme="next"] .geo-remote > p { margin: 0 0 20px; font-size: 15px; line-height: 1.55; color: #6f6f6f; } [data-theme="next"] .geo-remote ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } [data-theme="next"] .geo-remote li { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: var(--r-md); background: #fff; font-size: 13.5px; line-height: 1.45; color: #7a7a7a; } [data-theme="next"] .geo-remote li b { font-size: 15px; color: #1A1A1A; } [data-theme="next"] .geo-remote li > span { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 10px; border-radius: var(--r-sm); background: #D6001C; color: #fff; } @media (max-width: 600px) { [data-theme="next"] .geo-remote { padding: 28px 24px; border-radius: var(--r-md); } [data-theme="next"] .geo-remote ul { grid-template-columns: 1fr; } [data-theme="next"] .geo-remote li { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; } [data-theme="next"] .geo-remote li > span { margin: 0; } [data-theme="next"] .geo-remote li b { flex: 1; } [data-theme="next"] .geo-remote li { font-size: 13px; } } /* ── Финальная заявка — прежний вид, только кнопка красная ── */ [data-theme="next"] .final-form button { min-height: 52px; background: #D6001C !important; color: #fff !important; box-shadow: 0 10px 24px rgba(214, 0, 28, .3); } [data-theme="next"] .final-form button:hover { background: #B00017 !important; } [data-theme="next"] .final-form input[type="tel"] { min-height: 52px; } /* ── Подкаст: скрипт заворачивает ленту и стрелки в .ph-wrap ── */ [data-theme="next"] body > section.podcast-home > .ph-wrap { grid-area: track; position: relative; padding: 0 !important; margin: 0 !important; min-width: 0; } [data-theme="next"] .podcast-home .ph-wrap > .ph-track { padding: 8px 0 !important; margin: 0 !important; scroll-padding-inline: 0; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); } [data-theme="next"] .podcast-home .ph-wrap > .ph-track > :first-child { margin-left: 8px !important; } [data-theme="next"] .podcast-home .ph-wrap > .ph-nav { top: 110px !important; transform: translateY(-50%) !important; } [data-theme="next"] .podcast-home .ph-wrap > .ph-nav.prev { left: -24px !important; } [data-theme="next"] .podcast-home .ph-wrap > .ph-nav.next { right: -24px !important; } @media (max-width: 720px) { [data-theme="next"] section.podcast-home { padding-left: 0 !important; padding-right: 0 !important; } [data-theme="next"] .podcast-home .ph-wrap > .ph-track { padding: 8px 20px !important; scroll-padding-inline: 20px; -webkit-mask-image: none; mask-image: none; } [data-theme="next"] .podcast-home .ph-wrap > .ph-track > :first-child { margin-left: 0 !important; } [data-theme="next"] body > section.podcast-home > .ph-actions { padding: 0 20px !important; margin-top: 16px !important; } [data-theme="next"] .podcast-home .ph-wrap > .ph-nav { display: none !important; } } /* ── Отзывы → «Видео»: у обёртки был свой отступ сверху ───── */ [data-theme="next"] body > section.reviews > div:not([class]) { padding-top: 0 !important; } /* ── Видео: три в ряд до 601, на телефоне — лента ─────────── */ [data-theme="next"] body > section.reviews > .video-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; padding: 0 !important; margin: 16px var(--gutter) 0 !important; } @media (max-width: 600px) { [data-theme="next"] body > section.reviews > .video-row { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; margin: 16px 0 0 !important; padding: 0 20px 8px !important; scroll-padding-inline: 20px; scrollbar-width: none; } [data-theme="next"] .video-card { flex: 0 0 82% !important; width: auto !important; } } @media (min-width: 601px) { [data-theme="next"] .video-card { width: auto !important; flex: none !important; } } @media (min-width: 601px) { [data-theme="next"] .video-row > .video-card { margin: 0 !important; } } [data-theme="next"] .geo-remote { display: block !important; } @media (max-width: 720px) { [data-theme="next"] .team-grid > .team-card:first-child .team-photo { width: 42% !important; flex: 0 0 42% !important; } /* «Сертификаты» — в свободную клетку рядом с последней карточкой */ [data-theme="next"] .team-certs-tile { grid-column: auto !important; padding: 76px 16px 16px !important; justify-content: flex-end; } [data-theme="next"] .team-certs-tile b { font-size: 16px; } [data-theme="next"] .team-certs-tile > span:not(.tct-ico) { font-size: 12.5px; } [data-theme="next"] .tct-ico { top: 16px !important; left: 16px !important; margin-top: 0 !important; width: 44px; height: 44px; } [data-theme="next"] .team-certs-tile i { display: inline-block !important; font-size: 13px; padding: 7px 12px; } /* сертификаты — по два в кадре */ [data-theme="next"] .certs-scroll > .cert-thumb { flex: 0 0 44% !important; width: auto !important; } } @media (max-width: 720px) { [data-theme="next"] .team-grid > .team-card:first-child { display: grid !important; grid-template-columns: 42% minmax(0, 1fr); grid-auto-rows: min-content; align-content: center; column-gap: 16px; row-gap: 4px; } [data-theme="next"] .team-grid > .team-card:first-child .team-photo { grid-row: 1 / span 6; width: 100% !important; align-self: stretch; } [data-theme="next"] .team-grid > .team-card:first-child > :not(.team-photo) { grid-column: 2; justify-self: start; margin: 0 !important; } [data-theme="next"] .team-grid > .team-card:first-child h4 { font-size: 19px !important; } } /* ── Отзывы: плашки доверия ровными рядами ────────────────── На 1101–1300 пять в ряд были слишком узкими — текст ломался, высота разная. Теперь: от 1300 — пять в ряд; 721–1299 — два ряда 3 + 2 на всю ширину; телефон — столбиком. В ряду плашки одной высоты. Тире перед текстом отзыва спрятано — его заменяет большая кавычка. */ [data-theme="next"] body > section.reviews > .reviews-badges { align-items: stretch !important; } [data-theme="next"] .badge-item { height: 100%; box-sizing: border-box; } @media (min-width: 721px) and (max-width: 1299px) { [data-theme="next"] body > section.reviews > .reviews-badges { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } [data-theme="next"] .reviews-badges > .badge-item { grid-column: span 2 !important; } [data-theme="next"] .reviews-badges > .badge-item:nth-child(n+4) { grid-column: span 3 !important; } } @media (max-width: 720px) { [data-theme="next"] body > section.reviews > .reviews-badges { grid-template-columns: 1fr !important; } [data-theme="next"] .reviews-badges > .badge-item { grid-column: auto !important; min-height: 0; } } [data-theme="next"] .rq-dash { display: none; } /* тире перед отзывом дорисовывал старый стиль — большая кавычка его заменяет */ [data-theme="next"] .review-quote::before { content: none !important; } /* ════════════════════════════════════════════════════════════ СИСТЕМА ВЕРТИКАЛЬНЫХ ОТСТУПОВ (фиксируем) --sec расстояние между блоками: 64 на компьютере, 40 на телефоне (плавно между ними) --band поля внутри цветной полосы: 76 / 48 Правила: · белая секция — сверху --sec, снизу 0; · цветная полоса — внутри --band сверху и снизу, снаружи сверху --sec (отрыв от белого блока над ней); · белая секция после полосы — сверху --sec. Итог: между любыми соседними блоками одинаково --sec, внутри полос одинаково --band. Первый экран, истории и плашка встречи — своя верхняя зона, в систему не входят. ════════════════════════════════════════════════════════════ */ [data-theme="next"] { --sec: clamp(40px, 4.4vw, 64px); --band: clamp(48px, 5.2vw, 76px); } [data-chrome="next"] { --sec: clamp(40px, 4.4vw, 64px); --band: clamp(48px, 5.2vw, 76px); } /* белые секции */ [data-theme="next"] body > section#services, [data-theme="next"] body > section#uslugi, [data-theme="next"] body > section#calculator, [data-theme="next"] body > section#why, [data-theme="next"] body > section#tariffs, [data-theme="next"] body > section.case-study, [data-theme="next"] body > section.steps, [data-theme="next"] body > section#reviews, [data-theme="next"] body > section#news, [data-theme="next"] body > section#blog, [data-theme="next"] body > section#materialy, [data-theme="next"] body > section#audit, [data-theme="next"] body > section#team, [data-theme="next"] body > section#contacts { padding-top: var(--sec) !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* цветные полосы */ [data-theme="next"] body > section#kalkulyatory, [data-theme="next"] body > section.bonuses, [data-theme="next"] body > section.segments, [data-theme="next"] body > section#podcast, [data-theme="next"] body > section.vidzhety-home, [data-theme="next"] body > section.faq, [data-theme="next"] body > section.cta-band, [data-theme="next"] body > section#zayavka { margin-top: var(--sec) !important; margin-bottom: 0 !important; } [data-theme="next"] body > section.bonuses, [data-theme="next"] body > section.segments, [data-theme="next"] body > section#podcast, [data-theme="next"] body > section.vidzhety-home, [data-theme="next"] body > section.faq, [data-theme="next"] body > section#zayavka { padding-top: var(--band) !important; padding-bottom: var(--band) !important; } /* «Инструменты» и «Первый месяц»: поля задают внутренние блоки */ [data-theme="next"] body > section#kalkulyatory > .kalc-head { padding-top: var(--band) !important; } [data-theme="next"] body > section#kalkulyatory > .kalc-row { padding-bottom: var(--band) !important; } @media (max-width: 720px) { [data-theme="next"] body > section#kalkulyatory > .kalc-row { padding-bottom: 0 !important; } [data-theme="next"] body > section#kalkulyatory > .kalc-actions { padding-bottom: var(--band) !important; } } /* последний белый блок перед финальной заявкой и подвал */ [data-theme="next"] body > section#zayavka { margin-bottom: 0 !important; } /* внутри секций — никаких добавочных отступов снизу у последних элементов */ [data-theme="next"] body > section.case-study > .case-block, [data-theme="next"] body > section#audit > .audit-block, [data-theme="next"] body > section#team > .certs-row, [data-theme="next"] body > section#contacts > .geo-grid { margin-bottom: 0 !important; } [data-theme="next"] #news .bh-wrap, [data-theme="next"] #blog .bh-wrap, [data-theme="next"] #materialy .bh-wrap, [data-theme="next"] #uslugi .bh-wrap { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* на телефоне кнопки «Все …» стоят под карточками — это последний элемент */ [data-theme="next"] #news .bh-actions, [data-theme="next"] #blog .bh-actions, [data-theme="next"] #materialy .bh-actions { margin-bottom: 0 !important; } @media (min-width: 721px) { [data-theme="next"] #news .bh-actions, [data-theme="next"] #blog .bh-actions, [data-theme="next"] #materialy .bh-actions { margin-bottom: clamp(18px, 2.2vw, 28px) !important; } } /* ── Кейс: содержимое тёмной панели на всю её ширину ──────── */ [data-theme="next"] .case-highlight > * { max-width: none !important; width: 100%; box-sizing: border-box; } [data-theme="next"] .case-highlight > .case-cta { width: auto; } @media (max-width: 600px) { [data-theme="next"] .case-highlight > .case-cta { width: 100%; } } /* ══ ПОДКАСТ: ЦЕЛОЕ ЧИСЛО КРУЖКОВ, БЕЗ ОБРЕЗКИ ═══════════════ Ширина кружка считается от колонки: от 1300 — шесть в ряд, 1101–1299 — пять, планшет — четыре. Стрелки листают дальше, лента останавливается ровно по кружку. Неактивная стрелка скрыта. На телефоне — лента под край экрана, как истории. */ @media (min-width: 721px) { [data-theme="next"] .podcast-home .ph-wrap > .ph-track { --ph-n: 6; --ph-gap: 24px; gap: var(--ph-gap) !important; padding: 8px !important; margin: 0 -8px !important; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; scroll-behavior: smooth; -webkit-mask-image: none !important; mask-image: none !important; } [data-theme="next"] .podcast-home .ph-wrap > .ph-track > * { flex: 0 0 calc((100% - (var(--ph-n) - 1) * var(--ph-gap)) / var(--ph-n)) !important; width: auto !important; margin: 0 !important; scroll-snap-align: start; } [data-theme="next"] .podcast-home .ph-thumb { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; } [data-theme="next"] .podcast-home .ph-wrap > .ph-nav { top: calc(8px + (100% - 16px) * 0 + 90px) !important; } [data-theme="next"] .podcast-home .ph-wrap > .ph-nav[disabled] { opacity: 0 !important; pointer-events: none; } } @media (min-width: 1101px) and (max-width: 1299px) { [data-theme="next"] .podcast-home .ph-wrap > .ph-track { --ph-n: 5; } } @media (min-width: 721px) and (max-width: 1100px) { [data-theme="next"] .podcast-home .ph-wrap > .ph-track { --ph-n: 4; --ph-gap: 20px; } } /* ══ НОВОСТИ, БЛОГ, МАТЕРИАЛЫ: ПОЛНЫЕ РЯДЫ И КНОПКА-ПОЛОСА ═══ · В разметке блога много статей, старые правила прятали лишние по-разному на разных ширинах (3, 4, 6) — ряды были неполными. Теперь в блоге всегда шесть: компьютер 3×2, планшет 2×3, телефон — лента из шести. · Колонки: от 901 — три, 601–900 — две. Если карточек нечётно, последняя растягивается и раскладывается горизонтально (картинка слева). · «Читать» / «Открыть» — красная полоса во всю ширину внизу карточки, как в «Знакомо?». */ [data-theme="next"] #blog .blog-grid > .blog-card:nth-child(-n+6) { display: flex !important; } [data-theme="next"] #blog .blog-grid > .blog-card:nth-child(n+7) { display: none !important; } [data-theme="next"] #news .blog-grid > .blog-card, [data-theme="next"] #materialy .blog-grid > .blog-card { display: flex !important; } @media (min-width: 901px) { [data-theme="next"] #news .blog-grid, [data-theme="next"] #blog .blog-grid, [data-theme="next"] #materialy .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (min-width: 601px) and (max-width: 900px) { [data-theme="next"] #news .blog-grid, [data-theme="next"] #blog .blog-grid, [data-theme="next"] #materialy .blog-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [data-theme="next"] #news .blog-grid > .blog-card:last-child:nth-child(odd), [data-theme="next"] #materialy .blog-grid > .blog-card:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid !important; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); column-gap: 18px; align-content: start; } [data-theme="next"] #news .blog-grid > .blog-card:last-child:nth-child(odd) > .bc-thumb, [data-theme="next"] #materialy .blog-grid > .blog-card:last-child:nth-child(odd) > .bc-thumb { grid-column: 1; grid-row: 1 / span 5; margin-bottom: 10px !important; align-self: start; } [data-theme="next"] #news .blog-grid > .blog-card:last-child:nth-child(odd) > :not(.bc-thumb):not(.bc-more), [data-theme="next"] #materialy .blog-grid > .blog-card:last-child:nth-child(odd) > :not(.bc-thumb):not(.bc-more) { grid-column: 2; margin-left: 0 !important; } [data-theme="next"] #news .blog-grid > .blog-card:last-child:nth-child(odd) > .bc-more, [data-theme="next"] #materialy .blog-grid > .blog-card:last-child:nth-child(odd) > .bc-more { grid-column: 1 / -1; } } /* кнопка-полоса */ [data-theme="next"] #news .blog-card, [data-theme="next"] #blog .blog-card, [data-theme="next"] #materialy .blog-card { padding-bottom: 0 !important; overflow: hidden; } [data-theme="next"] #news .bc-date, [data-theme="next"] #blog .bc-date { margin-top: auto !important; padding-top: 10px; margin-bottom: 14px !important; } [data-theme="next"] #news .bc-more, [data-theme="next"] #blog .bc-more, [data-theme="next"] #materialy .bc-more { display: block !important; margin: 0 -10px !important; padding: 15px 16px !important; background: #D6001C !important; color: #fff !important; font-size: 14.5px !important; font-weight: 700 !important; line-height: 22px !important; text-align: center; transition: background .18s ease !important; } [data-theme="next"] #news .bc-date + .bc-more, [data-theme="next"] #blog .bc-date + .bc-more { margin-top: 0 !important; } [data-theme="next"] #materialy .bc-more { margin-top: auto !important; } [data-theme="next"] #materialy .blog-card p { margin-bottom: 18px !important; } [data-theme="next"] #news .blog-card:hover .bc-more, [data-theme="next"] #blog .blog-card:hover .bc-more, [data-theme="next"] #materialy .blog-card:hover .bc-more { background: #B00017 !important; } [data-theme="next"] #news .blog-card > .bc-more, [data-theme="next"] #blog .blog-card > .bc-more, [data-theme="next"] #materialy .blog-card > .bc-more { margin-left: -10px !important; margin-right: -10px !important; margin-bottom: 0 !important; } [data-theme="next"] .blog-grid > .blog-card > .bc-tag { justify-self: start; } /* ════════════════════════════════════════════════════════════ КАРТОЧКИ МАТЕРИАЛОВ, КОМАНДА, ВОПРОСЫ (16.09, ночь) ════════════════════════════════════════════════════════════ */ /* ── Карточки новостей/статей/брифов: сетка с зонами ──────── Метка «Новость» / «Бриф» дублировала заголовок блока — скрыта. Под текстом строка: дата · время чтения · автор (у новостей без автора). Кнопка-полоса — спокойная: светлая, стрелка красная; краснеет при наведении. Красной остаётся одна кнопка «Все …». */ [data-theme="next"] #news .bc-tag, [data-theme="next"] #materialy .bc-tag { display: none !important; } [data-theme="next"] #news .blog-card, [data-theme="next"] #blog .blog-card, [data-theme="next"] #materialy .blog-card { display: grid !important; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "thumb thumb thumb" "tag tag tag" "title title title" "text text text" "date read author" "more more more"; grid-template-rows: auto auto auto 1fr auto auto; align-items: start; } [data-theme="next"] #news .blog-grid > .blog-card:nth-child(-n+99), [data-theme="next"] #materialy .blog-grid > .blog-card:nth-child(-n+99) { display: grid !important; } [data-theme="next"] #blog .blog-grid > .blog-card:nth-child(-n+6) { display: grid !important; } [data-theme="next"] .blog-card > .bc-thumb { grid-area: thumb; } [data-theme="next"] .blog-card > .bc-tag { grid-area: tag; } [data-theme="next"] .blog-card > h3 { grid-area: title; } [data-theme="next"] .blog-card > p { grid-area: text; } [data-theme="next"] .blog-card > .bc-date { grid-area: date; } [data-theme="next"] .blog-card > .bc-read { grid-area: read; } [data-theme="next"] .blog-card > .bc-author { grid-area: author; } [data-theme="next"] .blog-card > .bc-more { grid-area: more; } [data-theme="next"] #news .blog-card > .bc-date, [data-theme="next"] #blog .blog-card > .bc-date, [data-theme="next"] .blog-card > .bc-read, [data-theme="next"] .blog-card > .bc-author { display: block !important; margin: 12px 0 16px !important; padding: 0 !important; font-size: 12.5px !important; line-height: 1.3 !important; color: #9a9a9a !important; white-space: nowrap; } [data-theme="next"] #news .blog-card > .bc-date, [data-theme="next"] #blog .blog-card > .bc-date { margin-left: 10px !important; margin-right: 0 !important; } [data-theme="next"] .blog-card > .bc-read, [data-theme="next"] .blog-card > .bc-author { margin-left: 0 !important; margin-right: 0 !important; } [data-theme="next"] .blog-card > .bc-read::before, [data-theme="next"] .blog-card > .bc-author::before { content: "·"; margin: 0 6px; color: #c8c8c8; } [data-theme="next"] .blog-card > .bc-author { overflow: hidden; text-overflow: ellipsis; margin-right: 10px !important; } [data-theme="next"] #materialy .blog-card > p { margin-bottom: 18px !important; } [data-theme="next"] #news .blog-card > .bc-more, [data-theme="next"] #blog .blog-card > .bc-more, [data-theme="next"] #materialy .blog-card > .bc-more { background: #F6F4EF !important; color: #1A1A1A !important; border-top: 1px solid rgba(26, 26, 26, .06); } [data-theme="next"] #news .blog-card:hover > .bc-more, [data-theme="next"] #blog .blog-card:hover > .bc-more, [data-theme="next"] #materialy .blog-card:hover > .bc-more { background: #D6001C !important; color: #fff !important; } /* планшет: широкая последняя карточка — картинка слева */ @media (min-width: 601px) and (max-width: 900px) { [data-theme="next"] #news .blog-grid > .blog-card:last-child:nth-child(odd), [data-theme="next"] #materialy .blog-grid > .blog-card:last-child:nth-child(odd) { grid-template-columns: minmax(0, 44%) auto auto minmax(0, 1fr) !important; grid-template-areas: "thumb tag tag tag" "thumb title title title" "thumb text text text" "thumb date read author" "more more more more" !important; grid-template-rows: auto auto 1fr auto auto !important; column-gap: 0 !important; } [data-theme="next"] #news .blog-grid > .blog-card:last-child:nth-child(odd) > :not(.bc-thumb):not(.bc-more):not(.bc-read):not(.bc-author), [data-theme="next"] #materialy .blog-grid > .blog-card:last-child:nth-child(odd) > :not(.bc-thumb):not(.bc-more) { grid-column: auto !important; margin-left: 18px !important; } [data-theme="next"] .blog-grid > .blog-card:last-child:nth-child(odd) > .bc-thumb { grid-row: auto !important; grid-column: auto !important; } } /* телефон: карточки ленты одной высоты, кнопка «Все …» ближе */ @media (max-width: 600px) { [data-theme="next"] #news .blog-grid, [data-theme="next"] #blog .blog-grid, [data-theme="next"] #materialy .blog-grid { align-items: stretch !important; } [data-theme="next"] #news .blog-grid > .blog-card, [data-theme="next"] #blog .blog-grid > .blog-card, [data-theme="next"] #materialy .blog-grid > .blog-card { height: auto !important; align-self: stretch !important; } [data-theme="next"] #news .bh-actions, [data-theme="next"] #blog .bh-actions, [data-theme="next"] #materialy .bh-actions { margin-top: 12px !important; padding-top: 0 !important; } } /* ── Команда: портретные карточки ─────────────────────────── Фото на всю карточку (4:5), имя и должность — на тёмном градиенте поверх фото, стаж — жёлтой меткой вверху. Компьютер — шесть в ряд, планшет — 3×2, телефон — 2×3. Руководитель без отдельного размера, плитка «Сертификаты» убрана — лента сертификатов ниже на плашке. */ [data-theme="next"] .team-certs-tile { display: none !important; } [data-theme="next"] body > section.team > .team-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: clamp(10px, 1.2vw, 16px) !important; } [data-theme="next"] .team-grid > .team-card, [data-theme="next"] .team-grid > .team-card:first-child { position: relative; display: block !important; grid-row: auto !important; grid-column: auto !important; aspect-ratio: 4 / 5; padding: 0 !important; overflow: hidden; border: 0 !important; border-radius: var(--r-md) !important; background: #1A1A1A !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .06); transform: none; } [data-theme="next"] .team-grid > .team-card .team-photo, [data-theme="next"] .team-grid > .team-card:first-child .team-photo { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; margin: 0 !important; border-radius: 0 !important; flex: none !important; } [data-theme="next"] .team-grid > .team-card .team-photo img { object-position: 50% 20%; } [data-theme="next"] .team-grid > .team-card::after { content: ""; position: absolute; inset: 45% 0 0 0; background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, .55) 45%, rgba(20, 20, 20, .9) 100%); pointer-events: none; } [data-theme="next"] .team-grid > .team-card > :not(.team-photo) { position: absolute; z-index: 1; left: 14px !important; right: 14px !important; margin: 0 !important; } [data-theme="next"] .team-grid > .team-card h4, [data-theme="next"] .team-grid > .team-card:first-child h4 { bottom: 36px; font-size: clamp(15px, 1.1vw, 17px) !important; line-height: 1.2 !important; color: #fff !important; } [data-theme="next"] .team-grid > .team-card .team-role { bottom: 14px; font-size: 12.5px !important; color: rgba(255, 255, 255, .72) !important; } [data-theme="next"] .team-grid > .team-card .team-exp { top: 12px; left: 12px !important; right: auto !important; padding: 4px 8px; background: #FFD100 !important; color: #1A1A1A !important; font-size: 11.5px !important; } [data-theme="next"] .team-grid > .team-card .team-badge { top: 12px; left: auto !important; right: 12px !important; padding: 4px 8px !important; background: rgba(255, 255, 255, .92) !important; border: 0 !important; color: #D6001C !important; font-size: 11px !important; } [data-theme="next"] .team-grid > .team-card .team-badge ~ .team-badge { display: none !important; } [data-theme="next"] .team-grid > .team-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(26, 26, 26, .16); } [data-theme="next"] .team-grid > .team-card:hover .team-photo img { transform: scale(1.05); } @media (max-width: 1100px) { [data-theme="next"] body > section.team > .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 720px) { [data-theme="next"] body > section.team > .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [data-theme="next"] .team-grid > .team-card, [data-theme="next"] .team-grid > .team-card:first-child { display: block !important; } [data-theme="next"] .team-grid > .team-card h4, [data-theme="next"] .team-grid > .team-card:first-child h4 { grid-column: auto !important; } [data-theme="next"] .team-grid > .team-card > :not(.team-photo) { left: 12px !important; right: 12px !important; grid-column: auto !important; justify-self: auto !important; } [data-theme="next"] .team-grid > .team-card .team-badge { display: none !important; } [data-theme="next"] .team-grid > .team-card:hover { transform: none; } } /* ── Частые вопросы: на белом, вопросы — мягкими карточками ─ */ [data-theme="next"] body > section.faq { background: #fff !important; margin-top: 0 !important; padding-top: var(--sec) !important; padding-bottom: 0 !important; } [data-theme="next"] body > section.faq > .faq-list { display: grid !important; gap: 8px !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; } [data-theme="next"] .faq-item, [data-theme="next"] .faq-item:last-child { background: #F6F4EF !important; border: 1px solid transparent !important; border-radius: var(--r-md) !important; transition: background .2s ease, box-shadow .2s ease, border-color .2s ease !important; } [data-theme="next"] .faq-item:hover { background: #F1EEE6 !important; } [data-theme="next"] .faq-item.open { background: #fff !important; border-color: rgba(26, 26, 26, .08) !important; box-shadow: 0 16px 36px rgba(26, 26, 26, .08) !important; } [data-theme="next"] .faq-q { padding: 20px 22px !important; } [data-theme="next"] .faq-a-inner { padding: 0 70px 22px 22px !important; } [data-theme="next"] .faq-q span { background: #fff !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .08); } [data-theme="next"] .faq-item.open .faq-q span { background: #D6001C !important; color: #fff !important; } [data-theme="next"] .faq-item.open .faq-q { color: #D6001C !important; } @media (max-width: 900px) { [data-theme="next"] body > section.faq > .faq-list { margin: 0 20px !important; padding: 0 !important; } [data-theme="next"] .faq-q { padding: 18px !important; } [data-theme="next"] .faq-a-inner { padding: 0 18px 18px !important; } } /* после белых «Вопросов» белые «Контакты» — отступ как между белыми */ [data-theme="next"] body > section#contacts { padding-top: var(--sec) !important; } /* строка «дата · время · автор» — плотно, без растягивания колонок */ [data-theme="next"] #news .blog-card, [data-theme="next"] #blog .blog-card, [data-theme="next"] #materialy .blog-card { grid-template-columns: max-content max-content minmax(0, 1fr) !important; justify-content: stretch; } /* автор — своей строкой над «дата · время» */ [data-theme="next"] #news .blog-card, [data-theme="next"] #blog .blog-card, [data-theme="next"] #materialy .blog-card { grid-template-areas: "thumb thumb thumb" "tag tag tag" "title title title" "text text text" "author author author" "date read ." "more more more" !important; grid-template-rows: auto auto auto 1fr auto auto auto !important; } [data-theme="next"] .blog-card > .bc-author { margin: 12px 10px 0 !important; color: #1A1A1A !important; font-weight: 700; } [data-theme="next"] .blog-card > .bc-author::before { content: none !important; } [data-theme="next"] .blog-card > .bc-author ~ .bc-date, [data-theme="next"] .blog-card > .bc-date:has(~ .bc-author) { margin-top: 4px !important; } [data-theme="next"] .blog-card > .bc-date:has(~ .bc-author) ~ .bc-read { margin-top: 4px !important; } [data-theme="next"] #news .blog-card > .bc-date, [data-theme="next"] #news .blog-card > .bc-read { margin-top: 12px !important; } [data-theme="next"] #blog .blog-card > .bc-date, [data-theme="next"] #blog .blog-card > .bc-read { margin-top: 4px !important; } /* ── Новости на планшете: две в ряд, без широкой третьей ───── */ @media (min-width: 601px) and (max-width: 900px) { [data-theme="next"] #news .blog-grid > .blog-card:last-child:nth-child(odd) { display: none !important; } } /* ── Команда: Шорохова снята дальше — крупнее и выше ─────── */ [data-theme="next"] .team-photo img[src*="shorohova"] { transform: scale(1.35); transform-origin: 45% 30%; } [data-theme="next"] .team-grid > .team-card:hover .team-photo img[src*="shorohova"] { transform: scale(1.4); } /* ── Вопросы: подзаголовок ──────────────────────────────── */ [data-theme="next"] .faq-head .faq-sub { margin: 10px 0 0 !important; max-width: 40ch !important; } @media (max-width: 900px) { [data-theme="next"] .faq-head > .faq-sub { margin: -8px 20px 20px !important; max-width: none !important; } } [data-theme="next"] .faq-sub { display: block !important; } /* метка «1С Сертификат» — под стажем, чтобы не наезжала */ [data-theme="next"] .team-grid > .team-card .team-badge { top: 40px !important; left: 12px !important; right: auto !important; } /* ── Контакты: метки одной колонкой, «Отдел продаж» в две строки ── */ [data-theme="next"] .contact-line { display: grid !important; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; align-items: start; } [data-theme="next"] .contact-label { width: auto !important; min-width: 0 !important; white-space: normal !important; line-height: 1.35 !important; padding-top: 2px; } /* ── Команда: лицо Шороховой на уровне коллег ─────────────── Центр увеличения ниже лица — при увеличении лицо поднимается. */ [data-theme="next"] .team-photo img[src*="shorohova"] { transform: scale(1.35) !important; transform-origin: 50% 72% !important; } [data-theme="next"] .team-grid > .team-card:hover .team-photo img[src*="shorohova"] { transform: scale(1.4) !important; } /* ── «Удалённо — как будто рядом» на телефоне: иконка слева, справа название и под ним описание; слова не рвутся ──── */ @media (max-width: 600px) { [data-theme="next"] .geo-remote li { display: grid !important; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: start; word-break: normal !important; overflow-wrap: break-word !important; hyphens: manual !important; } [data-theme="next"] .geo-remote li > span { grid-row: 1 / span 2; margin: 0 !important; } [data-theme="next"] .geo-remote li b { grid-column: 2; flex: none !important; } } [data-theme="next"] .geo-remote, [data-theme="next"] .geo-remote * { word-break: normal !important; hyphens: manual !important; } /* фото, снятое с большего расстояния: помечено data-fit="far" */ [data-theme="next"] .team-photo img[data-fit="far"] { transform: scale(1.35) !important; transform-origin: 50% 72% !important; } [data-theme="next"] .team-grid > .team-card:hover .team-photo img[data-fit="far"] { transform: scale(1.4) !important; } [data-theme="next"] .team-photo img[data-fit="far"] { transform: scale(1.25) !important; transform-origin: 50% 80% !important; } [data-theme="next"] .team-grid > .team-card:hover .team-photo img[data-fit="far"] { transform: scale(1.3) !important; } /* ── Команда: метки не на лицах ───────────────────────────── Стаж — жёлтой меткой над именем (на тёмном градиенте). «1С Сертификат» — круглый значок с медалью в правом верхнем углу, текст скрыт визуально, но остаётся для экранных читалок и в подсказке. */ [data-theme="next"] .team-grid > .team-card .team-exp { top: auto !important; bottom: 60px !important; left: 14px !important; } [data-theme="next"] .team-grid > .team-card h4, [data-theme="next"] .team-grid > .team-card:first-child h4 { bottom: 34px !important; } [data-theme="next"] .team-grid > .team-card::after { inset: 40% 0 0 0 !important; } [data-theme="next"] .team-grid > .team-card .team-badge { top: 10px !important; right: 10px !important; left: auto !important; width: 32px; height: 32px; padding: 0 !important; border-radius: 50% !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6001C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.6 14l-1.6 7.5 5-2.6 5 2.6-1.6-7.5M9.8 9l1.5 1.5 2.9-2.9'/%3E%3C/svg%3E") center / 18px no-repeat, rgba(255, 255, 255, .92) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); font-size: 0 !important; color: transparent !important; overflow: hidden; } @media (max-width: 720px) { [data-theme="next"] .team-grid > .team-card .team-badge { display: block !important; width: 28px; height: 28px; background-size: 16px, auto !important; } [data-theme="next"] .team-grid > .team-card .team-exp { bottom: 54px !important; left: 12px !important; } [data-theme="next"] .team-grid > .team-card h4 { bottom: 30px !important; } } /* подпись карточки — стопкой снизу: имя в две строки поднимает метку стажа, а не наезжает на неё */ [data-theme="next"] .team-grid > .team-card, [data-theme="next"] .team-grid > .team-card:first-child { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: flex-start !important; padding: 14px !important; } [data-theme="next"] .team-grid > .team-card > .team-exp, [data-theme="next"] .team-grid > .team-card > h4, [data-theme="next"] .team-grid > .team-card > .team-role { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; z-index: 1; } [data-theme="next"] .team-grid > .team-card > .team-exp { order: 1; margin: 0 0 8px !important; } [data-theme="next"] .team-grid > .team-card > h4 { order: 2; margin: 0 0 2px !important; } [data-theme="next"] .team-grid > .team-card > .team-role { order: 3; margin: 0 !important; } [data-theme="next"] .team-grid > .team-card > .team-badge { position: absolute !important; order: 4; } @media (max-width: 720px) { [data-theme="next"] .team-grid > .team-card, [data-theme="next"] .team-grid > .team-card:first-child { padding: 12px !important; } } [data-theme="next"] .team-grid > .team-card:first-child > h4, [data-theme="next"] .team-grid > .team-card:first-child > .team-exp, [data-theme="next"] .team-grid > .team-card:first-child > .team-role { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; grid-column: auto !important; } [data-theme="next"] .team-grid > .team-card > h4:not(.team-photo), [data-theme="next"] .team-grid > .team-card > .team-exp:not(.team-photo), [data-theme="next"] .team-grid > .team-card > .team-role:not(.team-photo) { left: auto !important; right: auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* ── Белые секции — без собственного фона ──────────────────── Тени плашек (аудит, кейс, калькулятор) выходят за пределы своей секции, а белый фон следующей секции их перекрывал — на стыке была видна линия. Страница и так белая. */ [data-theme="next"] body { background: #fff; } [data-theme="next"] body > section#services, [data-theme="next"] body > section#uslugi, [data-theme="next"] body > section#calculator, [data-theme="next"] body > section#why, [data-theme="next"] body > section#tariffs, [data-theme="next"] body > section.case-study, [data-theme="next"] body > section.steps, [data-theme="next"] body > section#reviews, [data-theme="next"] body > section#news, [data-theme="next"] body > section#blog, [data-theme="next"] body > section#materialy, [data-theme="next"] body > section#audit, [data-theme="next"] body > section#team, [data-theme="next"] body > section.faq, [data-theme="next"] body > section#contacts { background: transparent !important; } /* на телефоне тень плашки аудита мягче */ @media (max-width: 600px) { [data-theme="next"] body > section.audit-section > .audit-block { box-shadow: 0 10px 28px rgba(26, 26, 26, .07) !important; } } /* ── Телефон: все кнопки на всю ширину ─────────────────────── */ @media (max-width: 600px) { [data-theme="next"] .vh-btn { display: flex !important; width: 100% !important; justify-content: center; box-sizing: border-box; } [data-theme="next"] .faq-aside-btn { flex: 1 0 100% !important; width: 100%; box-sizing: border-box; } } /* ── Бонусы: иконки на жёлтом градиенте, крупнее ─────────── */ [data-theme="next"] .bonus-ico { width: 56px !important; height: 56px !important; margin-left: 20px !important; border-radius: var(--r-sm) !important; background: linear-gradient(145deg, #FFE36B 0%, #FFC42E 55%, #FFA51F 100%) !important; color: #1A1A1A !important; box-shadow: 0 8px 18px rgba(214, 140, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .55); transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important; } [data-theme="next"] .bonus-ico svg { width: 30px; height: 30px; } [data-theme="next"] .bonus-card:hover .bonus-ico { background: linear-gradient(145deg, #FFE36B 0%, #FFC42E 55%, #FFA51F 100%) !important; color: #1A1A1A !important; transform: rotate(-6deg) scale(1.05); box-shadow: 0 12px 24px rgba(214, 140, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .55); } [data-theme="next"] .bonus-card h4 { margin-left: 92px !important; } /* ════════════════════════════════════════════════════════════ РАЗВОДЯЩАЯ /uslugi/ (body.uslugi-index) · первый экран — жёлтая полоса: крошки, заголовок, описание, две кнопки, четыре плашки-преимущества; · услуги — мозаика как на главной (стили #uslugi), последняя плитка «Не нашли нужное?» ведёт к форме; · «Услуги по этапам бизнеса» — четыре карточки со ссылками; · тёмная плашка «Не знаете, что выбрать?»; · финальная форма — как на главной. Отступы — по общей системе (--sec / --band). ════════════════════════════════════════════════════════════ */ [data-theme="next"] .uslugi-index article.ep-wrap { max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } /* первый экран */ [data-theme="next"] .uslugi-index .ux-top { position: relative; overflow: hidden; padding: calc(73px + clamp(20px, 2.4vw, 36px)) var(--gutter) clamp(36px, 4vw, 60px); background: radial-gradient(60% 90% at 15% 10%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(135deg, #FFDE59 0%, #FFD100 45%, #FFB52E 100%); } @media (max-width: 820px) { [data-theme="next"] .uslugi-index .ux-top { padding-top: calc(61px + 20px); } } [data-theme="next"] .uslugi-index .ux-top .crumbs { margin: 0 0 clamp(14px, 1.8vw, 22px) !important; color: rgba(26, 26, 26, .6) !important; } [data-theme="next"] .uslugi-index .ux-top .crumbs a { color: rgba(26, 26, 26, .6) !important; } [data-theme="next"] .uslugi-index .ux-top .crumbs a:hover { color: #D6001C !important; } [data-theme="next"] .uslugi-index .ux-top .section-tag { color: #1A1A1A !important; } [data-theme="next"] .uslugi-index .ux-top .ep-title { margin: 10px 0 14px !important; font-size: clamp(38px, 5.4vw, 80px) !important; line-height: .98 !important; letter-spacing: -.035em !important; color: #1A1A1A; } [data-theme="next"] .uslugi-index .ux-top .ep-meta { max-width: 56ch; margin: 0 !important; font-size: clamp(15px, 1.3vw, 19px) !important; line-height: 1.55 !important; color: rgba(26, 26, 26, .78) !important; } [data-theme="next"] .ux-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.6vw, 32px); } [data-theme="next"] .ux-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px !important; border-radius: var(--r-sm) !important; font-size: 15px !important; font-weight: 800 !important; text-decoration: none; box-sizing: border-box; transition: background .18s ease, color .18s ease, box-shadow .18s ease; } [data-theme="next"] .ux-btn.btn-primary { box-shadow: 0 10px 24px rgba(214, 0, 28, .26); } [data-theme="next"] .ux-btn--light { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8); color: #1A1A1A; } [data-theme="next"] .ux-btn--light:hover { background: rgba(255, 255, 255, .8); } [data-theme="next"] .ux-trust { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: clamp(28px, 3.4vw, 48px) 0 0; padding: 0; } [data-theme="next"] .ux-trust li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; line-height: 1.35; color: rgba(26, 26, 26, .65); } [data-theme="next"] .ux-trust li b { display: block; font-size: 15px; color: #1A1A1A; } [data-theme="next"] .ux-trust-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: #D6001C; color: #fff; } @media (max-width: 1100px) { [data-theme="next"] .ux-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { [data-theme="next"] .ux-actions .ux-btn { width: 100%; } [data-theme="next"] .ux-trust { grid-template-columns: 1fr; gap: 8px; } [data-theme="next"] .ux-trust li { padding: 12px 14px; } } /* сетка услуг: мозаика (стили #uslugi с главной) в колонке */ [data-theme="next"] .uslugi-index #uslugi .blog-grid { margin: var(--sec) 0 0 !important; padding: 0 var(--gutter) !important; } @media (max-width: 600px) { [data-theme="next"] .uslugi-index #uslugi .blog-grid { padding: 4px 20px 12px !important; } } /* плитка «Не нашли нужное?» — тёмная, чтобы не спорить с жёлтыми картинками */ [data-theme="next"] #uslugi .ux-ask { display: flex !important; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20viewBox%3D%270%200%20240%20240%27%20fill%3D%27none%27%20stroke%3D%27%23FFFFFF%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-opacity%3D%27.07%27%3E%3Cg%20transform%3D%27translate%2824%2026%29%27%3E%3Cpath%20d%3D%27M0%200h26l10%2010v36H0z%27%2F%3E%3Cpath%20d%3D%27M26%200v10h10M7%2020h20M7%2028h20M7%2036h12%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28150%2040%29%27%3E%3Cpath%20d%3D%27M4%2028L28%204%27%2F%3E%3Ccircle%20cx%3D%277%27%20cy%3D%277%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%2725%27%20cy%3D%2725%27%20r%3D%275%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2892%20128%29%27%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%2719%27%2F%3E%3Cpath%20d%3D%27M15%2030V11h8a5.5%205.5%200%200%201%200%2011h-11M12%2026h11%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28186%20150%29%27%3E%3Cpath%20d%3D%27M0%200h22l8%208v28H0z%27%2F%3E%3Cpath%20d%3D%27M22%200v8h8M6%2016h16M6%2023h16%27%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2830%20176%29%27%3E%3Cpath%20d%3D%27M4%2022L22%204%27%2F%3E%3Ccircle%20cx%3D%276%27%20cy%3D%276%27%20r%3D%274%27%2F%3E%3Ccircle%20cx%3D%2720%27%20cy%3D%2720%27%20r%3D%274%27%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%27none%27%3E%3Cpath%20d%3D%27M112%2030l3%209%209%203-9%203-3%209-3-9-9-3%209-3z%27%20fill%3D%27%23FFD100%27%20fill-opacity%3D%27.35%27%2F%3E%3Cpath%20d%3D%27M206%2096l2%206%206%202-6%202-2%206-2-6-6-2%206-2z%27%20fill%3D%27%23fff%27%20fill-opacity%3D%27.25%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 240px 240px repeat, radial-gradient(70% 60% at 100% 0%, rgba(255, 165, 31, .3) 0%, rgba(255, 165, 31, 0) 70%), linear-gradient(160deg, #262422 0%, #1A1A1A 60%, #141414 100%) !important; color: #fff !important; } [data-theme="next"] #uslugi .ux-ask .us-all-s { color: rgba(255, 255, 255, .7) !important; } [data-theme="next"] #uslugi .ux-ask .us-all-go { background: #FFD100 !important; color: #1A1A1A !important; } [data-theme="next"] #uslugi .ux-ask:hover .us-all-go { transform: none !important; } [data-theme="next"] #uslugi .ux-ask .us-all-btn { background: #D6001C; color: #fff; box-shadow: 0 10px 24px rgba(214, 0, 28, .3); } [data-theme="next"] #uslugi .ux-ask:hover .us-all-btn { background: #B00017; color: #fff; } [data-theme="next"] #uslugi .ux-ask .us-all-btn::after { content: "→"; } /* услуги по этапам */ [data-theme="next"] body > section.ux-stages { display: block; padding: var(--sec) 0 0 !important; background: transparent !important; } [data-theme="next"] .ux-stages-head { margin-bottom: clamp(24px, 2.8vw, 40px); } [data-theme="next"] .ux-stages-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); } [data-theme="next"] .ux-stage { position: relative; display: flex; flex-direction: column; padding: 24px 24px 12px; border-radius: var(--r-md); background: #fff; border: 1px solid rgba(26, 26, 26, .09); box-shadow: 0 1px 2px rgba(26, 26, 26, .04); transition: box-shadow .22s ease, transform .22s ease; } [data-theme="next"] .ux-stage:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(26, 26, 26, .08); } [data-theme="next"] .ux-stage-ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r-sm); background: linear-gradient(145deg, #FFE36B 0%, #FFC42E 55%, #FFA51F 100%); color: #1A1A1A; box-shadow: 0 8px 18px rgba(214, 140, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .55); } [data-theme="next"] .ux-stage-n { position: absolute; top: 24px; right: 24px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #b0b0b0; } [data-theme="next"] .ux-stage h3 { margin: 20px 0 6px; font-size: clamp(18px, 1.35vw, 20px); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: #1A1A1A; text-wrap: balance; } [data-theme="next"] .ux-stage p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: #6f6f6f; } [data-theme="next"] .ux-stage-links { margin-top: auto; display: flex; flex-direction: column; } [data-theme="next"] .ux-stage-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid rgba(26, 26, 26, .08); font-size: 14.5px; font-weight: 700; line-height: 1.3; color: #1A1A1A; text-decoration: none; transition: color .18s ease; } [data-theme="next"] .ux-stage-links a::after { content: ""; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6001C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat, rgba(214, 0, 28, .08); transition: background-color .18s ease, transform .18s ease; } [data-theme="next"] .ux-stage-links a:hover { color: #D6001C; } [data-theme="next"] .ux-stage-links a:hover::after { background-color: #D6001C; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); transform: translateX(2px); } @media (max-width: 1100px) { [data-theme="next"] .ux-stages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { [data-theme="next"] .ux-stages-grid { grid-template-columns: 1fr; gap: 10px; } [data-theme="next"] .ux-stage:hover { transform: none; } } /* не знаете, что выбрать — тёмная плашка в колонке */ [data-theme="next"] body > section.ux-help { display: block; padding: var(--sec) 0 0 !important; background: transparent !important; } [data-theme="next"] body > section.ux-help > .ux-help-plate { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 3vw, 48px); margin: 0 var(--gutter); padding: clamp(28px, 3.6vw, 56px) !important; border-radius: var(--r-lg); background: radial-gradient(45% 80% at 85% 50%, rgba(255, 165, 31, .30) 0%, rgba(255, 165, 31, 0) 70%), radial-gradient(30% 60% at 70% 10%, rgba(214, 0, 28, .22) 0%, rgba(214, 0, 28, 0) 70%), linear-gradient(135deg, #232120 0%, #1A1A1A 55%, #141414 100%); box-shadow: 0 24px 56px rgba(20, 20, 20, .18); } [data-theme="next"] .ux-help-text .section-tag { color: rgba(255, 255, 255, .72) !important; } [data-theme="next"] .ux-help-text h2 { margin: 10px 0 12px; font-size: clamp(30px, 3.4vw, 52px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; color: #fff; } [data-theme="next"] .ux-help-text p { margin: 0; max-width: 48ch; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .7); } [data-theme="next"] .ux-help-actions { display: grid; gap: 10px; justify-items: stretch; } [data-theme="next"] .ux-btn--ghost { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; } [data-theme="next"] .ux-btn--ghost:hover { background: rgba(255, 255, 255, .18); } [data-theme="next"] .ux-help-tel { justify-self: center; margin-top: 4px; font-size: 18px; font-weight: 800; color: #FFD100; text-decoration: none; } [data-theme="next"] .ux-help-tel:hover { color: #fff; } @media (max-width: 900px) { [data-theme="next"] body > section.ux-help > .ux-help-plate { grid-template-columns: 1fr; } } @media (max-width: 600px) { [data-theme="next"] body > section.ux-help > .ux-help-plate { margin: 0 20px; padding: 28px 24px !important; border-radius: var(--r-md); } } /* первый экран разводящей: коллаж иллюстраций справа (компьютер) */ [data-theme="next"] .ux-visual { display: none; } @media (min-width: 1101px) { [data-theme="next"] .uslugi-index .ux-top > :not(.ux-visual):not(.ux-trust) { position: relative; z-index: 1; max-width: 56%; } [data-theme="next"] .ux-visual { display: block; position: absolute; right: var(--gutter); top: calc(73px + 20px); width: min(40%, 520px); aspect-ratio: 5 / 4; pointer-events: none; } [data-theme="next"] .ux-visual img { position: absolute; width: 62%; height: auto; border: 6px solid #fff; border-radius: var(--r-md); box-shadow: 0 20px 44px rgba(150, 80, 0, .25); background: #fff; } [data-theme="next"] .ux-visual img:nth-child(1) { right: 0; top: 0; transform: rotate(4deg); z-index: 1; } [data-theme="next"] .ux-visual img:nth-child(2) { left: 0; top: 30%; transform: rotate(-5deg); z-index: 2; } [data-theme="next"] .ux-visual img:nth-child(3) { right: 8%; bottom: 0; transform: rotate(2deg); z-index: 3; } [data-theme="next"] .ux-trust { position: relative; z-index: 4; } } @media (min-width: 1101px) and (max-width: 1279px) { [data-theme="next"] .ux-visual { display: none !important; } } @media (min-width: 1280px) { [data-theme="next"] .ux-visual { top: calc(73px + 16px) !important; bottom: calc(clamp(36px, 4vw, 60px) + 96px) !important; width: auto !important; height: auto !important; aspect-ratio: 5 / 4; } } /* ════════════════════════════════════════════════════════════ РАЗВОДЯЩАЯ /uslugi/ — ВТОРАЯ ВЕРСИЯ · первый экран на белом: крошки, заголовок, подзаголовок, строка преимуществ; · услуги — ровная сетка 4×2 (без крупной первой), на планшете 2 колонки, на телефоне — компактные строки: картинка слева; · «Услуги по этапам бизнеса» — путь: иконки этапов на общей линии, под ними название, текст и ссылки-кнопки. ════════════════════════════════════════════════════════════ */ [data-theme="next"] .uslugi-index .ux-top { background: none !important; overflow: visible; padding: calc(73px + clamp(24px, 3vw, 44px)) var(--gutter) 0 !important; } @media (max-width: 820px) { [data-theme="next"] .uslugi-index .ux-top { padding-top: calc(61px + 24px) !important; } } [data-theme="next"] .uslugi-index .ux-top > * { max-width: none !important; } [data-theme="next"] .uslugi-index .ux-top .crumbs, [data-theme="next"] .uslugi-index .ux-top .crumbs a { color: #8a8a8a !important; } [data-theme="next"] .uslugi-index .ux-top .ep-title { margin: 0 0 12px !important; font-size: clamp(34px, 4.6vw, 64px) !important; line-height: 1.02 !important; } [data-theme="next"] .uslugi-index .ux-top .ep-meta { max-width: 64ch; color: #6f6f6f !important; } [data-theme="next"] .uslugi-index .ux-trust { margin-top: clamp(20px, 2.4vw, 32px) !important; } [data-theme="next"] .uslugi-index .ux-trust li { background: #F6F4EF !important; border-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* услуги: ровная сетка */ @media (min-width: 1101px) { [data-theme="next"] .uslugi-index #uslugi .blog-card:first-child { grid-column: auto !important; grid-row: auto !important; padding: 10px 10px 18px !important; } [data-theme="next"] .uslugi-index #uslugi .blog-card:first-child .bc-thumb { aspect-ratio: 16 / 10 !important; flex: none !important; min-height: 0 !important; margin-bottom: 14px !important; } [data-theme="next"] .uslugi-index #uslugi .blog-card:first-child h3 { margin: 0 8px 6px !important; font-size: clamp(16px, 1.15vw, 18px) !important; letter-spacing: 0; } [data-theme="next"] .uslugi-index #uslugi .blog-card:first-child p { margin: 0 8px !important; font-size: 14px !important; } } [data-theme="next"] .uslugi-index #uslugi .blog-grid { margin-top: clamp(28px, 3.2vw, 44px) !important; } @media (min-width: 601px) and (max-width: 1100px) { [data-theme="next"] .uslugi-index #uslugi .blog-card:first-child { grid-column: auto !important; } [data-theme="next"] .uslugi-index #uslugi .blog-card:first-child .bc-thumb { aspect-ratio: 16 / 10 !important; } } /* телефон: строки «картинка слева — текст справа» */ @media (max-width: 600px) { [data-theme="next"] .uslugi-index #uslugi .blog-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; overflow: visible !important; padding: 0 20px !important; } [data-theme="next"] .uslugi-index #uslugi .blog-card { display: grid !important; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; align-items: start; padding: 10px !important; flex: none !important; } [data-theme="next"] .uslugi-index #uslugi .blog-card .bc-thumb { grid-row: 1 / span 2; aspect-ratio: 1 / 1 !important; margin: 0 !important; } [data-theme="next"] .uslugi-index #uslugi .blog-card h3 { margin: 4px 0 4px !important; font-size: 16px !important; } [data-theme="next"] .uslugi-index #uslugi .blog-card p { margin: 0 !important; font-size: 13.5px !important; -webkit-line-clamp: 3; } [data-theme="next"] .uslugi-index #uslugi .bc-tag--hot { top: 14px !important; left: 14px !important; font-size: 9px !important; padding: 3px 6px !important; } [data-theme="next"] .uslugi-index #uslugi .bc-thumb .bc-bank { display: none; } [data-theme="next"] .uslugi-index #uslugi .blog-card::after { display: none; } } /* этапы — путь на одной линии */ [data-theme="next"] .ux-stages-grid { position: relative; gap: clamp(16px, 2vw, 28px) !important; } [data-theme="next"] .ux-stage, [data-theme="next"] .ux-stage:hover { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; } [data-theme="next"] .ux-stage-ico { position: relative; z-index: 1; width: 64px !important; height: 64px !important; border-radius: 50% !important; box-shadow: 0 0 0 8px #fff, 0 10px 22px rgba(214, 140, 0, .28) !important; } [data-theme="next"] .ux-stage-ico svg { width: 28px; height: 28px; } /* линия к следующему этапу */ [data-theme="next"] .ux-stage:not(:last-child)::before { content: ""; position: absolute; top: 31px; left: 64px; width: calc(100% - 64px + clamp(16px, 2vw, 28px)); height: 2px; background: repeating-linear-gradient(90deg, rgba(26, 26, 26, .22) 0 6px, transparent 6px 12px); } [data-theme="next"] .ux-stage-n { position: static !important; display: block; margin: 18px 0 4px; color: #D6001C !important; } [data-theme="next"] .ux-stage h3 { margin: 0 0 8px !important; } [data-theme="next"] .ux-stage p { margin-bottom: 14px !important; } [data-theme="next"] .ux-stage-links { gap: 8px; } [data-theme="next"] .ux-stage-links a { padding: 12px 12px 12px 16px !important; border: 1px solid rgba(26, 26, 26, .09) !important; border-radius: var(--r-sm); background: #fff; box-shadow: 0 1px 2px rgba(26, 26, 26, .04); transition: border-color .18s ease, box-shadow .18s ease, color .18s ease !important; } [data-theme="next"] .ux-stage-links a:hover { border-color: rgba(214, 0, 28, .3) !important; box-shadow: 0 8px 20px rgba(26, 26, 26, .07); } @media (max-width: 1100px) { [data-theme="next"] .ux-stages-grid { row-gap: 36px !important; } [data-theme="next"] .ux-stage:nth-child(2n)::before { display: none; } } @media (max-width: 600px) { [data-theme="next"] .ux-stages-grid { row-gap: 0 !important; } [data-theme="next"] .ux-stage { display: grid !important; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; padding-bottom: 28px !important; } [data-theme="next"] .ux-stage > .ux-stage-ico { grid-row: 1 / span 4; } [data-theme="next"] .ux-stage > :not(.ux-stage-ico) { grid-column: 2; } [data-theme="next"] .ux-stage-n { margin-top: 4px !important; } [data-theme="next"] .ux-stage:not(:last-child)::before, [data-theme="next"] .ux-stage:nth-child(2n):not(:last-child)::before { display: block; top: 64px; left: 31px; width: 2px; height: calc(100% - 64px); background: repeating-linear-gradient(180deg, rgba(26, 26, 26, .22) 0 6px, transparent 6px 12px); } } @media (max-width: 600px) { [data-theme="next"] .uslugi-index #uslugi .blog-card { grid-template-columns: 112px minmax(0, 1fr) !important; grid-template-areas: "thumb title" "thumb text" !important; grid-template-rows: auto 1fr !important; } [data-theme="next"] .uslugi-index #uslugi .blog-card > .bc-thumb { grid-area: thumb !important; } [data-theme="next"] .uslugi-index #uslugi .blog-card > h3 { grid-area: title !important; } [data-theme="next"] .uslugi-index #uslugi .blog-card > p { grid-area: text !important; } } [data-theme="next"] .ux-stage-links { margin-top: 0 !important; } /* ════════════════════════════════════════════════════════════ КРОШКИ — ЕДИНЫЙ ОТСТУП ОТ ШАПКИ (для всех страниц новой темы) --crumbs-top: шапка + 16 (компьютер) / шапка + 14 (телефон) от крошек до заголовка — 14 ════════════════════════════════════════════════════════════ */ [data-theme="next"] { --header-h: 73px; --crumbs-top: calc(var(--header-h) + 16px); --crumbs-gap: 14px; } @media (max-width: 820px) { [data-theme="next"] { --header-h: 61px; --crumbs-top: calc(var(--header-h) + 14px); } } [data-theme="next"] .crumbs, [data-theme="next"] .kcrumbs, [data-theme="next"] .uh-crumbs { font-size: 13px !important; line-height: 1.4 !important; margin-bottom: var(--crumbs-gap) !important; } /* разводящая: статья без отступов главной (у неё тот же id) */ [data-theme="next"] body.uslugi-index > article#uslugi { padding: 0 !important; margin: 0 !important; } [data-theme="next"] .uslugi-index .ux-top { padding-top: var(--crumbs-top) !important; } [data-theme="next"] .uslugi-index .ux-top .crumbs { margin: 0 0 var(--crumbs-gap) !important; } /* этап — красный бейдж */ [data-theme="next"] .ux-stage-n { display: inline-flex !important; align-self: flex-start; width: auto; margin: 20px 0 10px !important; padding: 4px 9px; border-radius: var(--r-xs); background: #D6001C; color: #fff !important; font-size: 11px !important; line-height: 1.3; letter-spacing: .06em !important; } @media (max-width: 600px) { [data-theme="next"] .ux-stage-n { justify-self: start; margin: 4px 0 8px !important; } } /* ── Сетка услуг на разводящей — под любое число карточек ──── 12 колонок, карточка — 3 (четыре в ряд). Последний неполный ряд растягивается: одна карточка — во всю ширину и горизонтально, две — по 6, три — по 4. На планшете (две в ряд) одинокая последняя — во всю ширину. */ @media (min-width: 1101px) { [data-theme="next"] .uslugi-index #uslugi .blog-grid { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; } [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card { grid-column: span 3 !important; } /* три в последнем ряду */ [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(4n+1):nth-last-child(3), [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(4n+1):nth-last-child(3) ~ .blog-card { grid-column: span 4 !important; } /* две */ [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(4n+1):nth-last-child(2), [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(4n+1):nth-last-child(2) ~ .blog-card { grid-column: span 6 !important; } /* одна */ [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(4n+1):last-child { grid-column: 1 / -1 !important; } } @media (min-width: 601px) and (max-width: 1100px) { [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(odd):last-child { grid-column: 1 / -1 !important; } } /* одинокая карточка во всю ширину — горизонтально */ @media (min-width: 1101px) { [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(4n+1):last-child { display: grid !important; grid-template-columns: minmax(0, 32%) minmax(0, 1fr); grid-template-areas: "thumb title" "thumb text"; grid-template-rows: auto 1fr; column-gap: 24px; align-items: center; padding: 10px !important; } } @media (min-width: 601px) and (max-width: 1100px) { [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(odd):last-child { display: grid !important; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); grid-template-areas: "thumb title" "thumb text"; grid-template-rows: auto 1fr; column-gap: 20px; align-items: center; padding: 10px !important; } } @media (min-width: 1101px) { [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(4n+1):last-child > .bc-thumb { grid-area: thumb; margin: 0 !important; } [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(4n+1):last-child > h3 { grid-area: title; align-self: end; margin: 0 0 6px !important; font-size: clamp(18px, 1.5vw, 22px) !important; } [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(4n+1):last-child > p { grid-area: text; align-self: start; margin: 0 !important; max-width: 60ch; } } @media (min-width: 601px) and (max-width: 1100px) { [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(odd):last-child > .bc-thumb { grid-area: thumb; margin: 0 !important; } [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(odd):last-child > h3 { grid-area: title; align-self: end; margin: 0 0 6px !important; font-size: 19px !important; } [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(odd):last-child > p { grid-area: text; align-self: start; margin: 0 !important; } } /* высота шапки меняется на 768 — отступ крошек вслед за ней */ @media (min-width: 769px) and (max-width: 820px) { [data-theme="next"] { --header-h: 73px; --crumbs-top: calc(var(--header-h) + 16px); } } @media (max-width: 768px) { [data-theme="next"] { --header-h: 61px; --crumbs-top: calc(var(--header-h) + 14px); } } /* широкая карточка: текст по центру по вертикали */ @media (min-width: 1101px) { [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(4n+1):last-child { grid-template-rows: 1fr auto auto 1fr !important; grid-template-areas: "thumb ." "thumb title" "thumb text" "thumb ." !important; } [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(4n+1):last-child > h3, [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(4n+1):last-child > p { align-self: auto !important; } } @media (min-width: 601px) and (max-width: 1100px) { [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(odd):last-child { grid-template-rows: 1fr auto auto 1fr !important; grid-template-areas: "thumb ." "thumb title" "thumb text" "thumb ." !important; } [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(odd):last-child > h3, [data-theme="next"] .uslugi-index #uslugi .blog-grid > .blog-card:nth-child(odd):last-child > p { align-self: auto !important; } } /* ── Полоса объявлений — сразу под шапкой на любой странице ── */ [data-theme="next"] body > section.epd-banner { margin-top: calc(var(--header-h) - 1px) !important; } [data-theme="next"] body > section.epd-banner + section.hero { margin-top: 0 !important; } /* ════════════════════════════════════════════════════════════ СТРАНИЦА УСЛУГИ (body.uslugi-page) — блоки главной + свои Порядок: полоса объявлений → первый экран с заявкой и цифрами → «Знакомо?» → что входит → шаги → [аудит] → [цены] → [первый месяц] → [партнёр] → [кейс] → [отзывы] → детали → вопросы → другие услуги → читайте также → нижняя форма. Блоки главной берут её стили; здесь — только отличия и новые блоки. ════════════════════════════════════════════════════════════ */ /* ── первый экран: крошки, преимущества под кнопками ─────── */ [data-theme="next"] .uslugi-page .u-hero .u-crumbs { margin: 0 0 var(--crumbs-gap) !important; font-size: 13px !important; line-height: 1.4 !important; color: rgba(26, 26, 26, .6) !important; } [data-theme="next"] .uslugi-page .u-hero .u-crumbs a { color: rgba(26, 26, 26, .6) !important; } [data-theme="next"] .uslugi-page .u-hero .u-crumbs a:hover { color: #D6001C !important; } [data-theme="next"] .uslugi-page .u-hero h1 { text-wrap: balance; } [data-theme="next"] .uslugi-page .u-points { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: clamp(24px, 2.8vw, 36px) 0 0; padding: 0; max-width: 640px; } [data-theme="next"] .uslugi-page .u-points li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; line-height: 1.35; color: rgba(26, 26, 26, .62); } [data-theme="next"] .uslugi-page .u-points li b { display: block; font-size: 15px; color: #1A1A1A; } [data-theme="next"] .uslugi-page .u-points-ico { flex: 0 0 38px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: #D6001C; color: #fff; } [data-theme="next"] .uslugi-page .u-points-ico svg { width: 20px !important; height: 20px !important; stroke: #fff !important; } [data-theme="next"] .uslugi-page #hero-form { scroll-margin-top: calc(var(--header-h) + 20px); } @media (max-width: 600px) { [data-theme="next"] .uslugi-page .u-points { grid-template-columns: 1fr; gap: 8px; } } /* ── отступы: свои белые блоки — сверху --sec ────────────── */ [data-theme="next"] body.uslugi-page > section.u-pains, [data-theme="next"] body.uslugi-page > section.u-incl, [data-theme="next"] body.uslugi-page > section.u-price, [data-theme="next"] body.uslugi-page > section.u-reviews, [data-theme="next"] body.uslugi-page > section.u-details, [data-theme="next"] body.uslugi-page > section.u-other, [data-theme="next"] body.uslugi-page > section.u-read, [data-theme="next"] body.uslugi-page > section.u-partner { padding-top: var(--sec) !important; padding-bottom: 0 !important; margin: 0 !important; background: transparent !important; } /* ── что входит: слева заголовок и тёмная карточка, справа пункты ── */ [data-theme="next"] body.uslugi-page > section.u-incl { display: grid !important; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(28px, 4vw, 64px); align-items: start; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } [data-theme="next"] body.uslugi-page > section.u-incl > .u-incl-head, [data-theme="next"] body.uslugi-page > section.u-incl > .u-incl-grid { padding: 0 !important; margin: 0 !important; } [data-theme="next"] .uslugi-page .u-incl-head { position: sticky; top: calc(var(--header-h) + 24px); } [data-theme="next"] .uslugi-page .u-incl-head .section-sub { margin-bottom: 0 !important; } [data-theme="next"] .uslugi-page .u-incl-cta { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: clamp(20px, 2.4vw, 32px); padding: 24px; border-radius: var(--r-md); background: radial-gradient(70% 60% at 100% 0%, rgba(255, 165, 31, .3) 0%, rgba(255, 165, 31, 0) 70%), linear-gradient(160deg, #262422 0%, #1A1A1A 60%, #141414 100%); color: rgba(255, 255, 255, .7); font-size: 14.5px; line-height: 1.5; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease; } [data-theme="next"] .uslugi-page .u-incl-cta b { font-size: 20px; line-height: 1.2; color: #fff; } [data-theme="next"] .uslugi-page .u-incl-cta i { align-self: flex-start; margin-top: 12px; padding: 11px 18px; border-radius: var(--r-sm); background: #D6001C; color: #fff; font-style: normal; font-weight: 800; font-size: 14.5px; } [data-theme="next"] .uslugi-page .u-incl-cta i::after { content: " →"; } [data-theme="next"] .uslugi-page .u-incl-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(26, 26, 26, .18); } [data-theme="next"] .uslugi-page .u-incl-cta:hover i { background: #B00017; } [data-theme="next"] .uslugi-page .u-incl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); } [data-theme="next"] .uslugi-page .u-incl-card { position: relative; padding: 22px 22px 22px 80px; border-radius: var(--r-md); background: #F6F4EF; border: 1px solid transparent; transition: background .22s ease, border-color .22s ease, box-shadow .22s ease; } [data-theme="next"] .uslugi-page .u-incl-card:hover { background: #fff; border-color: rgba(26, 26, 26, .08); box-shadow: 0 14px 30px rgba(26, 26, 26, .07); } [data-theme="next"] .uslugi-page .u-incl-n { position: absolute; left: 20px; top: 20px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: linear-gradient(145deg, #FFE36B 0%, #FFC42E 55%, #FFA51F 100%); box-shadow: 0 6px 14px rgba(214, 140, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .55); color: #1A1A1A; font-size: 15px; font-weight: 800; } [data-theme="next"] .uslugi-page .u-incl-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; line-height: 1.25; color: #1A1A1A; } [data-theme="next"] .uslugi-page .u-incl-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #6f6f6f; } /* нечётное число пунктов — последний во всю ширину */ [data-theme="next"] .uslugi-page .u-incl-card:nth-child(odd):last-child { grid-column: 1 / -1; } @media (max-width: 1100px) { [data-theme="next"] body.uslugi-page > section.u-incl { grid-template-columns: 1fr; } [data-theme="next"] .uslugi-page .u-incl-head { position: static; margin-bottom: clamp(24px, 2.8vw, 40px) !important; } [data-theme="next"] .uslugi-page .u-incl-cta { display: none; } } @media (max-width: 720px) { [data-theme="next"] body.uslugi-page > section.u-incl { padding-left: 20px !important; padding-right: 20px !important; } [data-theme="next"] .uslugi-page .u-incl-grid { grid-template-columns: 1fr; } [data-theme="next"] .uslugi-page .u-incl-card:nth-child(odd):last-child { grid-column: auto; } [data-theme="next"] .uslugi-page .u-incl-card { padding: 18px 18px 18px 72px; } [data-theme="next"] .uslugi-page .u-incl-n { left: 16px; top: 18px; } } /* ── шаги: ровно по числу шагов ──────────────────────────── */ @media (min-width: 1101px) { [data-theme="next"] .uslugi-page .u-steps .steps-track { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } } /* ── цены: на белом, тарифы карточками ───────────────────── */ [data-theme="next"] body.uslugi-page > section.u-price > .u-price-head { margin-bottom: clamp(24px, 2.8vw, 40px) !important; } [data-theme="next"] .uslugi-page .u-price-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); } [data-theme="next"] .uslugi-page .u-tier { position: relative; grid-column: span 3; display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-md); background: #fff; border: 1px solid rgba(26, 26, 26, .09); box-shadow: 0 1px 2px rgba(26, 26, 26, .04); transition: transform .22s ease, box-shadow .22s ease; } [data-theme="next"] .uslugi-page .u-tier:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(26, 26, 26, .08); } [data-theme="next"] .uslugi-page .u-tier-name { align-self: flex-start; margin: 0 0 16px; padding: 5px 10px; border-radius: var(--r-xs); background: #F6F4EF; font-size: 12.5px; font-weight: 700; color: #1A1A1A; } [data-theme="next"] .uslugi-page .u-tier-price { display: block; margin: 0 0 8px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: #1A1A1A; } [data-theme="next"] .uslugi-page .u-tier p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #6f6f6f; } [data-theme="next"] .uslugi-page .u-tier--main { border-color: transparent; background: radial-gradient(70% 60% at 100% 0%, rgba(255, 165, 31, .3) 0%, rgba(255, 165, 31, 0) 70%), linear-gradient(160deg, #262422 0%, #1A1A1A 60%, #141414 100%); box-shadow: 0 16px 36px rgba(26, 26, 26, .2); } [data-theme="next"] .uslugi-page .u-tier--main .u-tier-name { background: rgba(255, 255, 255, .12); color: #fff; } [data-theme="next"] .uslugi-page .u-tier--main .u-tier-price { color: #FFD100; } [data-theme="next"] .uslugi-page .u-tier--main p { color: rgba(255, 255, 255, .72); } [data-theme="next"] .uslugi-page .u-tier-mark { position: absolute; top: -10px; right: 16px; padding: 4px 10px; border-radius: var(--r-xs); background: #D6001C; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } /* под любое число тарифов */ [data-theme="next"] .uslugi-page .u-tier:first-child:nth-last-child(3), [data-theme="next"] .uslugi-page .u-tier:first-child:nth-last-child(3) ~ .u-tier { grid-column: span 4; } [data-theme="next"] .uslugi-page .u-tier:first-child:nth-last-child(2), [data-theme="next"] .uslugi-page .u-tier:first-child:nth-last-child(2) ~ .u-tier { grid-column: span 6; } [data-theme="next"] .uslugi-page .u-tier:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "name text" "price text"; column-gap: clamp(24px, 4vw, 64px); align-items: center; } [data-theme="next"] .uslugi-page .u-tier:only-child .u-tier-name { grid-area: name; } [data-theme="next"] .uslugi-page .u-tier:only-child .u-tier-price { grid-area: price; margin: 0; } [data-theme="next"] .uslugi-page .u-tier:only-child p { grid-area: text; font-size: 16px; } [data-theme="next"] .uslugi-page .u-price-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: clamp(18px, 2.2vw, 28px); padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px); border-radius: var(--r-md); background: #F6F4EF; } [data-theme="next"] .uslugi-page .u-price-foot p { margin: 0; font-size: 15px; line-height: 1.6; color: #4f4f4f; } [data-theme="next"] .uslugi-page .u-price-foot .btn-primary { display: inline-flex !important; align-items: center; gap: 8px; min-height: 52px; padding: 0 26px !important; white-space: nowrap; box-shadow: 0 10px 24px rgba(214, 0, 28, .24); } [data-theme="next"] .uslugi-page .u-price-foot .btn-primary::after { content: "→"; } @media (max-width: 1100px) { [data-theme="next"] .uslugi-page .u-tier, [data-theme="next"] .uslugi-page .u-tier:first-child:nth-last-child(3), [data-theme="next"] .uslugi-page .u-tier:first-child:nth-last-child(3) ~ .u-tier { grid-column: span 6; } [data-theme="next"] .uslugi-page .u-tier:nth-child(odd):last-child { grid-column: 1 / -1; } [data-theme="next"] .uslugi-page .u-price-grid { row-gap: 22px; } } @media (max-width: 720px) { [data-theme="next"] .uslugi-page .u-price-foot { grid-template-columns: 1fr; } [data-theme="next"] .uslugi-page .u-price-foot .btn-primary { width: 100%; justify-content: center; } } @media (max-width: 600px) { [data-theme="next"] .uslugi-page .u-price-grid { grid-template-columns: 1fr; } [data-theme="next"] .uslugi-page .u-tier, [data-theme="next"] .uslugi-page .u-tier:nth-child(n) { grid-column: auto !important; } [data-theme="next"] .uslugi-page .u-tier:only-child { display: flex; } [data-theme="next"] .uslugi-page .u-tier:hover { transform: none; } } /* ── партнёр: плашка в колонке ───────────────────────────── */ [data-theme="next"] body.uslugi-page > section.u-partner > .u-partner-box { margin: 0 var(--gutter) !important; border-radius: var(--r-lg) !important; } [data-theme="next"] .uslugi-page .u-partner-btn { border-radius: var(--r-sm) !important; } @media (max-width: 600px) { [data-theme="next"] body.uslugi-page > section.u-partner > .u-partner-box { margin: 0 20px !important; border-radius: var(--r-md) !important; } } /* ── кейс: кнопка «подробнее» в тёмной панели ────────────── */ [data-theme="next"] .uslugi-page .case-highlight .case-cta { display: inline-flex !important; } /* ── детали: памятки ────────────────────────────────────── */ [data-theme="next"] .uslugi-page .u-details-head { margin-bottom: clamp(24px, 2.8vw, 40px) !important; } [data-theme="next"] .uslugi-page .u-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); } [data-theme="next"] .uslugi-page .u-det { position: relative; padding: clamp(24px, 2.6vw, 36px); padding-top: calc(clamp(24px, 2.6vw, 36px) + 68px); border-radius: var(--r-lg); background: #F6F4EF; } [data-theme="next"] .uslugi-page .u-det::before { content: ""; position: absolute; top: clamp(24px, 2.6vw, 36px); left: clamp(24px, 2.6vw, 36px); width: 52px; height: 52px; border-radius: var(--r-sm); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21.5h4M12 2.5a6.5 6.5 0 0 0-3.8 11.8V16h7.6v-1.7A6.5 6.5 0 0 0 12 2.5z'/%3E%3C/svg%3E") center / 26px no-repeat, linear-gradient(145deg, #FFE36B 0%, #FFC42E 55%, #FFA51F 100%); box-shadow: 0 8px 18px rgba(214, 140, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .55); } [data-theme="next"] .uslugi-page .u-det:nth-child(2)::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 14l2 2 4-4'/%3E%3C/svg%3E") center / 26px no-repeat, linear-gradient(145deg, #FFE36B 0%, #FFC42E 55%, #FFA51F 100%); } [data-theme="next"] .uslugi-page .u-det:nth-child(3)::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E") center / 26px no-repeat, linear-gradient(145deg, #FFE36B 0%, #FFC42E 55%, #FFA51F 100%); } [data-theme="next"] .uslugi-page .u-det h3 { margin: 0 0 14px; font-size: clamp(20px, 1.6vw, 24px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: #1A1A1A; } [data-theme="next"] .uslugi-page .u-det p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: #4f4f4f; } [data-theme="next"] .uslugi-page .u-det p:last-child { margin-bottom: 0; } [data-theme="next"] .uslugi-page .u-det p.u-det-key { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-sm); background: #fff; } [data-theme="next"] .uslugi-page .u-det p.u-det-key b { display: block; margin-bottom: 2px; color: #D6001C; } [data-theme="next"] .uslugi-page .u-det:nth-child(odd):last-child:not(:first-child) { grid-column: 1 / -1; } @media (max-width: 900px) { [data-theme="next"] .uslugi-page .u-details-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { [data-theme="next"] .uslugi-page .u-det { border-radius: var(--r-md); padding: 24px; padding-top: 92px; } [data-theme="next"] .uslugi-page .u-det::before { top: 24px; left: 24px; } } /* ── другие услуги: заголовок слева, кнопка справа ───────── */ [data-theme="next"] .uslugi-page .u-other-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 2.8vw, 40px) !important; } [data-theme="next"] .uslugi-page .u-other-head .section-heading-full { margin-bottom: 0 !important; } [data-theme="next"] .uslugi-page .u-other-head .btn-primary { flex: 0 0 auto; display: inline-flex !important; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px !important; background: #D6001C !important; box-shadow: 0 10px 24px rgba(214, 0, 28, .24) !important; white-space: nowrap; } [data-theme="next"] .uslugi-page .u-other-head .btn-primary::after { content: "→"; } [data-theme="next"] body.uslugi-page > section.u-other > .blog-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(12px, 1.4vw, 18px) !important; margin: 0 !important; } [data-theme="next"] .uslugi-page .u-other .blog-card { position: relative; display: flex !important; flex-direction: column; padding: 10px 10px 20px !important; background: #fff !important; border: 1px solid rgba(26, 26, 26, .08) !important; border-radius: var(--r-md) !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .04) !important; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease !important; } [data-theme="next"] .uslugi-page .u-other .blog-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(26, 26, 26, .09) !important; } [data-theme="next"] .uslugi-page .u-other .bc-thumb { position: relative; margin: 0 0 14px !important; border-radius: var(--r-sm) !important; overflow: hidden; aspect-ratio: 16 / 10; } [data-theme="next"] .uslugi-page .u-other .bc-thumb > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); } [data-theme="next"] .uslugi-page .u-other .blog-card:hover .bc-thumb > img { transform: scale(1.04); } [data-theme="next"] .uslugi-page .u-other .bc-tag { display: none !important; } [data-theme="next"] .uslugi-page .u-other .bc-tag--hot { display: inline-block !important; position: absolute; top: 20px; left: 20px; z-index: 1; margin: 0 !important; padding: 4px 9px !important; border-radius: var(--r-xs) !important; background: #D6001C !important; color: #fff !important; font-size: 11px !important; } [data-theme="next"] .uslugi-page .u-other .blog-card h3 { margin: 0 8px 6px !important; font-size: 17px !important; font-weight: 800 !important; color: #1A1A1A !important; } [data-theme="next"] .uslugi-page .u-other .blog-card p { margin: 0 8px !important; font-size: 14px !important; line-height: 1.5 !important; color: #6f6f6f !important; } @media (max-width: 900px) { [data-theme="next"] body.uslugi-page > section.u-other > .blog-grid { grid-template-columns: 1fr !important; } [data-theme="next"] .uslugi-page .u-other .blog-card { display: grid !important; grid-template-columns: 112px minmax(0, 1fr) !important; grid-template-areas: "thumb title" "thumb text" !important; grid-template-rows: auto 1fr !important; column-gap: 14px; padding: 10px !important; } [data-theme="next"] .uslugi-page .u-other .blog-card > .bc-thumb { grid-area: thumb !important; aspect-ratio: 1 / 1; margin: 0 !important; } [data-theme="next"] .uslugi-page .u-other .blog-card > h3 { grid-area: title !important; margin: 4px 0 4px !important; font-size: 16px !important; } [data-theme="next"] .uslugi-page .u-other .blog-card > p { grid-area: text !important; margin: 0 !important; } [data-theme="next"] .uslugi-page .u-other .bc-bank { display: none; } [data-theme="next"] .uslugi-page .u-other .bc-tag--hot { top: 14px; left: 14px; font-size: 9px !important; padding: 3px 6px !important; } } @media (max-width: 600px) { [data-theme="next"] .uslugi-page .u-other-head { flex-direction: column; align-items: stretch; } [data-theme="next"] body.uslugi-page > section.u-other { display: flex !important; flex-direction: column; } [data-theme="next"] body.uslugi-page > section.u-other > .u-other-head { display: contents !important; } [data-theme="next"] .uslugi-page .u-other-head .u-other-title { order: 1; margin-bottom: 20px; } [data-theme="next"] body.uslugi-page > section.u-other > .blog-grid { order: 2; } [data-theme="next"] .uslugi-page .u-other-head .btn-primary { order: 3; margin: 16px 20px 0; justify-content: center; } [data-theme="next"] .uslugi-page .u-other .blog-card:hover { transform: none; } } @media (max-width: 600px) { [data-theme="next"] .uslugi-page .u-other-head .u-other-title { padding: 0 20px; } } /* ── читайте также: карточки материалов ──────────────────── */ [data-theme="next"] .uslugi-page .u-read-head { margin-bottom: clamp(20px, 2.4vw, 32px) !important; } [data-theme="next"] .uslugi-page .u-read-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(10px, 1.2vw, 16px); } [data-theme="next"] .uslugi-page .u-read-card { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "ico type" "ico title"; column-gap: 14px; align-items: center; padding: 18px 56px 18px 18px; border-radius: var(--r-md); background: #F6F4EF; border: 1px solid transparent; text-decoration: none; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; } [data-theme="next"] .uslugi-page .u-read-card:hover { background: #fff; border-color: rgba(26, 26, 26, .08); box-shadow: 0 14px 30px rgba(26, 26, 26, .07); } [data-theme="next"] .uslugi-page .u-read-ico { grid-area: ico; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-sm); background: #fff; color: #D6001C; } [data-theme="next"] .uslugi-page .u-read-card:hover .u-read-ico { background: #D6001C; color: #fff; } [data-theme="next"] .uslugi-page .u-read-ico svg { width: 22px; height: 22px; } [data-theme="next"] .uslugi-page .u-read-type { grid-area: type; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9a9a9a; } [data-theme="next"] .uslugi-page .u-read-card b { grid-area: title; font-size: 16px; line-height: 1.3; color: #1A1A1A; } [data-theme="next"] .uslugi-page .u-read-card::after { content: ""; position: absolute; right: 18px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6001C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat, #fff; transition: transform .2s ease; } [data-theme="next"] .uslugi-page .u-read-card:hover::after { transform: translateX(3px); } /* ── нижняя форма — отступ как перед полосой ─────────────── */ [data-theme="next"] body.uslugi-page > section#zayavka { margin-top: var(--sec) !important; } /* цены: пояснение с кнопкой — плашка в колонке (правило колонки главной давало ей поля внутри, и серый фон шёл во всю ширину) */ [data-theme="next"] body.uslugi-page > section.u-price > .u-price-foot { margin: clamp(18px, 2.2vw, 28px) var(--gutter) 0 !important; padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px) !important; } @media (max-width: 600px) { [data-theme="next"] body.uslugi-page > section.u-price > .u-price-foot { margin: 16px 20px 0 !important; } } /* первый экран: длинные слова в заголовке не распирают колонку */ [data-theme="next"] .uslugi-page .u-hero .hero-grid > * { min-width: 0; } [data-theme="next"] .uslugi-page .u-hero h1 { overflow-wrap: break-word; } @media (max-width: 420px) { [data-theme="next"] .uslugi-page .u-hero h1 { hyphens: auto; -webkit-hyphens: auto; } } @media (max-width: 1100px) { [data-theme="next"] .uslugi-page .u-hero .hero-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* ════════════════════════════════════════════════════════════ СТРАНИЦА УСЛУГИ — блоки главной один в один Старые стили страниц услуг (встроенные в шаблон и в etalon-fixes.css) меняли размеры и отступы блоков главной: ограничивали ширину плашки цифр, «Первого месяца» и заголовка нижней формы, добавляли отступы, уменьшали заголовки секций. Здесь возвращаем значения главной. Проверка: cmpblocks.py (сравнивает стили главной и услуги на 1800/1440/820/390). ════════════════════════════════════════════════════════════ */ [data-theme="next"] body.uslugi-page .section-tag { display: inline-flex !important; line-height: normal !important; } [data-theme="next"] body.uslugi-page .section-heading-full { font-size: clamp(32px, 4.2vw, 64px) !important; line-height: 1.02 !important; margin-bottom: clamp(8px, 1vw, 10px) !important; } [data-theme="next"] body.uslugi-page .hero-strip .trust-items { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } @media (min-width: 821px) { [data-theme="next"] body.uslugi-page .hero-strip .trust-items { padding-top: 0 !important; padding-bottom: 0 !important; } } [data-theme="next"] body.uslugi-page .audit-left h2 { margin-top: 0 !important; } [data-theme="next"] body.uslugi-page .audit-left, [data-theme="next"] body.uslugi-page .audit-right { padding-left: clamp(28px, 3.6vw, 56px) !important; padding-right: clamp(28px, 3.6vw, 56px) !important; } @media (max-width: 600px) { [data-theme="next"] body.uslugi-page .audit-left, [data-theme="next"] body.uslugi-page .audit-right { padding-left: 24px !important; padding-right: 24px !important; } } [data-theme="next"] body.uslugi-page .cta-band-inner { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } [data-theme="next"] body.uslugi-page .case-head, [data-theme="next"] body.uslugi-page .reviews-head { margin-bottom: clamp(24px, 2.8vw, 40px) !important; } [data-theme="next"] body.uslugi-page .final-cta h2 { max-width: none !important; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } [data-theme="next"] body.uslugi-page .final-cta .consent-row { max-width: none !important; } @media (max-width: 768px) { [data-theme="next"] body.uslugi-page .final-cta { padding-left: 20px !important; padding-right: 20px !important; } } /* «Читайте также»: тип материала — бейджем */ [data-theme="next"] body.uslugi-page .u-read-type { justify-self: start; align-self: end; margin-bottom: 6px; padding: 3px 8px; border-radius: var(--r-xs); background: #D6001C; color: #fff !important; font-size: 10.5px !important; letter-spacing: .06em; line-height: 1.3; } [data-theme="next"] body.uslugi-page .u-read-card { padding-top: 16px; padding-bottom: 16px; } /* ── партнёрские блоки: текст слева, кнопка справа ────────── */ [data-theme="next"] body.uslugi-page > section.u-partner > .u-partner-box { position: relative; overflow: hidden; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 4vw, 64px) !important; margin: 0 var(--gutter) !important; padding: clamp(28px, 3.6vw, 52px) !important; border-radius: var(--r-lg) !important; box-shadow: 0 20px 48px rgba(20, 60, 40, .14); } [data-theme="next"] body.uslugi-page .u-partner-box::after { z-index: 0; } [data-theme="next"] body.uslugi-page .u-partner-main { position: relative; z-index: 1; max-width: 720px !important; } [data-theme="next"] body.uslugi-page .u-partner-main b { display: block; margin-bottom: 12px; font-size: clamp(24px, 2.6vw, 38px) !important; line-height: 1.1 !important; letter-spacing: -.02em; } [data-theme="next"] body.uslugi-page .u-partner-p { max-width: 62ch; font-size: 16px !important; line-height: 1.6 !important; } [data-theme="next"] body.uslugi-page .u-partner-badge { margin-bottom: 18px !important; } [data-theme="next"] body.uslugi-page .u-partner-btn { position: relative; z-index: 1; display: inline-flex !important; align-items: center; gap: 10px; min-height: 56px !important; padding: 0 30px !important; border-radius: var(--r-sm) !important; font-size: 15.5px !important; font-weight: 800 !important; white-space: nowrap; box-shadow: 0 12px 28px rgba(0, 40, 20, .2) !important; } [data-theme="next"] body.uslugi-page .u-partner-btn::after { content: "→"; } /* свой продукт — тёмный тиловый с мягким светом и знаком вопроса */ [data-theme="next"] body.uslugi-page .u-partner--own .u-partner-box { background: radial-gradient(60% 90% at 0% 0%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 60%), radial-gradient(50% 80% at 100% 100%, rgba(214, 0, 28, .22) 0%, rgba(214, 0, 28, 0) 70%), linear-gradient(135deg, #24484A 0%, #1C3637 60%, #142728 100%) !important; } [data-theme="next"] body.uslugi-page .u-partner--own .u-partner-box::before { content: "?"; position: absolute; right: clamp(120px, 18vw, 300px); top: 50%; transform: translateY(-50%) rotate(12deg); font-size: clamp(160px, 18vw, 280px); font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .06); pointer-events: none; z-index: 0; } [data-theme="next"] body.uslugi-page .u-partner--own .u-partner-badge--text { display: inline-flex !important; padding: 6px 12px !important; border-radius: var(--r-xs) !important; background: #D6001C !important; color: #fff !important; font-size: 11.5px !important; } [data-theme="next"] body.uslugi-page .u-partner--own .u-partner-main b { color: #fff !important; } [data-theme="next"] body.uslugi-page .u-partner--own .u-partner-p { color: rgba(255, 255, 255, .78) !important; } @media (max-width: 900px) { [data-theme="next"] body.uslugi-page > section.u-partner > .u-partner-box { grid-template-columns: 1fr; } [data-theme="next"] body.uslugi-page .u-partner-btn { justify-self: start; } [data-theme="next"] body.uslugi-page .u-partner--own .u-partner-box::before { right: -20px; top: auto; bottom: -40px; transform: rotate(12deg); } } @media (max-width: 600px) { [data-theme="next"] body.uslugi-page > section.u-partner > .u-partner-box { margin: 0 20px !important; padding: 28px 24px !important; border-radius: var(--r-md) !important; } [data-theme="next"] body.uslugi-page .u-partner-btn { justify-self: stretch; justify-content: center; width: 100%; } } /* ── другие услуги: на планшете текст сразу под заголовком, на телефоне — картинка сверху, текст под ней ──────────── */ @media (max-width: 900px) { [data-theme="next"] body.uslugi-page .u-other .blog-card { grid-template-rows: auto 1fr !important; align-items: start !important; align-content: start !important; } [data-theme="next"] body.uslugi-page .u-other .blog-card > h3, [data-theme="next"] body.uslugi-page .u-other .blog-card > p { align-self: start !important; } } @media (max-width: 600px) { [data-theme="next"] body.uslugi-page > section.u-other > .blog-grid { grid-template-columns: 1fr !important; gap: 12px !important; padding: 0 20px !important; } [data-theme="next"] body.uslugi-page .u-other .blog-card { display: flex !important; flex-direction: column !important; padding: 10px 10px 18px !important; } [data-theme="next"] body.uslugi-page .u-other .blog-card > .bc-thumb { aspect-ratio: 16 / 9 !important; margin: 0 0 14px !important; width: 100%; } [data-theme="next"] body.uslugi-page .u-other .blog-card > h3 { margin: 0 8px 6px !important; font-size: 17px !important; } [data-theme="next"] body.uslugi-page .u-other .blog-card > p { margin: 0 8px !important; } [data-theme="next"] body.uslugi-page .u-other .bc-bank { display: inline-flex !important; } [data-theme="next"] body.uslugi-page .u-other .bc-tag--hot { top: 20px; left: 20px; font-size: 11px !important; padding: 4px 9px !important; } } /* заголовок услуги: названия длиннее, чем на главной — размер такой, чтобы самое длинное слово помещалось в колонку текста */ [data-theme="next"] body.uslugi-page .u-hero h1 { font-size: clamp(34px, 4.1vw, 62px) !important; line-height: 1.02 !important; } /* заголовок услуги — на всю ширину колонки текста (у главной заголовок ограничен ~9 символами; для длинных названий услуг это давало строки из одного слова: «Управленческий / учёт / …») */ [data-theme="next"] body.uslugi-page .u-hero h1 { max-width: none !important; } /* заголовок услуги: хвост без переноса, форма уже на средних экранах, на телефоне шрифт под самое длинное слово */ [data-theme="next"] body.uslugi-page .u-hero h1 { text-wrap: balance !important; } [data-theme="next"] body.uslugi-page .u-hero h1 .nw { white-space: nowrap; } @media (min-width: 1101px) and (max-width: 1280px) { [data-theme="next"] body.uslugi-page .u-hero .hero-grid { grid-template-columns: minmax(0, 1fr) 420px !important; } } @media (max-width: 420px) { [data-theme="next"] body.uslugi-page .u-hero h1 { font-size: clamp(26px, 8.1vw, 34px) !important; } } /* ════════════════════════════════════════════════════════════ МЕРОПРИЯТИЯ (body.ev-page) первый экран как на разводящей → ближайшая встреча (тил, как плашка встречи на главной) → расписание → шаги главной → условия → архив → вопросы главной → подписка → нижняя форма. Карточки встреч рисует скрипт страницы (кнопки data-buy ведут в оплату ticket.js) — здесь только их вид. ════════════════════════════════════════════════════════════ */ [data-theme="next"] body.ev-page > section { margin: 0 !important; } [data-theme="next"] body.ev-page > section.ev-hero, [data-theme="next"] body.ev-page > section.ev-next, [data-theme="next"] body.ev-page > section.ev-list, [data-theme="next"] body.ev-page > section.ev-terms, [data-theme="next"] body.ev-page > section.ev-past { display: block !important; max-width: none !important; padding: var(--sec) var(--gutter) 0 !important; background: transparent !important; } [data-theme="next"] body.ev-page > section.ev-hero { padding-top: var(--crumbs-top) !important; } [data-theme="next"] body.ev-page .ev-crumbs { margin: 0 0 var(--crumbs-gap) !important; color: #8a8a8a !important; } [data-theme="next"] body.ev-page .ev-crumbs a { color: #8a8a8a !important; } [data-theme="next"] body.ev-page .ev-hero h1 { margin: 0 0 12px !important; font-size: clamp(34px, 4.6vw, 64px) !important; font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -.035em !important; color: #1A1A1A !important; } [data-theme="next"] body.ev-page .ev-lead { max-width: 64ch; margin: 0 !important; font-size: clamp(15px, 1.3vw, 19px) !important; line-height: 1.55 !important; color: #6f6f6f !important; } [data-theme="next"] body.ev-page .ev-trust { margin-top: clamp(20px, 2.4vw, 32px) !important; } [data-theme="next"] body.ev-page .ev-trust li { background: #F6F4EF !important; border-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } [data-theme="next"] body.ev-page .ev-short { position: relative; margin-top: 12px; padding: 16px 20px 16px 20px; border-radius: var(--r-md); border: 1px dashed rgba(28, 54, 55, .25); font-size: 15px; line-height: 1.6; color: #3f4f4e; } [data-theme="next"] body.ev-page .ev-short b { display: inline-block; margin-right: 10px; padding: 3px 8px; border-radius: var(--r-xs); background: #1C3637; color: #fff; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; } [data-theme="next"] body.ev-page .ev-head { margin-bottom: clamp(24px, 2.8vw, 40px); } /* ── ближайшая встреча ───────────────────────────────────── */ [data-theme="next"] body.ev-page .ev-next[hidden] { display: none !important; } [data-theme="next"] body.ev-page .mp-next-card { position: relative; overflow: hidden; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 38%); gap: 0 !important; margin: 0 !important; padding: 0 !important; border-radius: var(--r-lg) !important; background: radial-gradient(60% 90% at 0% 0%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 60%), radial-gradient(50% 80% at 70% 100%, rgba(255, 209, 0, .16) 0%, rgba(255, 209, 0, 0) 70%), linear-gradient(135deg, #2C5654 0%, #1C3637 60%, #142728 100%) !important; box-shadow: 0 24px 56px rgba(20, 50, 50, .22) !important; color: #fff; } [data-theme="next"] body.ev-page .mp-next-card:not(:has(.mp-next-vis)) { grid-template-columns: 1fr; } [data-theme="next"] body.ev-page .mp-next-info { padding: clamp(28px, 3.6vw, 56px) !important; } [data-theme="next"] body.ev-page .mp-badge { display: inline-flex !important; padding: 5px 10px !important; border-radius: var(--r-xs) !important; background: #D6001C !important; color: #fff !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } [data-theme="next"] body.ev-page .mp-next-date { margin: 16px 0 8px !important; font-size: clamp(16px, 1.4vw, 19px) !important; font-weight: 800 !important; color: #FFD100 !important; } [data-theme="next"] body.ev-page .mp-next-card h2 { margin: 0 0 14px !important; font-size: clamp(26px, 3vw, 44px) !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -.025em !important; color: #fff !important; text-wrap: balance; } [data-theme="next"] body.ev-page .mp-next-card .mp-spk { max-width: 70ch; margin: 0 !important; font-size: 15.5px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, .78) !important; } [data-theme="next"] body.ev-page .mp-next-card .mp-spk a { color: #fff !important; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); } [data-theme="next"] body.ev-page .mp-meta { display: flex !important; flex-wrap: wrap; gap: 8px !important; margin: 22px 0 26px !important; } [data-theme="next"] body.ev-page .mp-meta span { display: inline-flex !important; align-items: center; gap: 8px; padding: 8px 12px !important; border-radius: var(--r-sm) !important; background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .14) !important; color: #fff !important; font-size: 14px !important; font-weight: 600 !important; } [data-theme="next"] body.ev-page .mp-meta svg { width: 18px !important; height: 18px !important; stroke: #FFD100 !important; } [data-theme="next"] body.ev-page .mp-btn { display: inline-flex !important; align-items: center; gap: 10px; min-height: 56px; padding: 0 28px !important; border: 0 !important; border-radius: var(--r-sm) !important; background: #D6001C !important; color: #fff !important; font-size: 16px !important; font-weight: 800 !important; cursor: pointer; box-shadow: 0 12px 28px rgba(214, 0, 28, .35) !important; transition: background .18s ease !important; } [data-theme="next"] body.ev-page .mp-btn:hover { background: #B00017 !important; } [data-theme="next"] body.ev-page .mp-btn svg { width: 18px !important; height: 18px !important; stroke: #fff !important; } [data-theme="next"] body.ev-page .mp-btn--soon { background: rgba(255, 255, 255, .12) !important; box-shadow: none !important; cursor: default; } [data-theme="next"] body.ev-page .mp-cond { display: inline-flex !important; align-items: center; gap: 8px; margin-left: 18px !important; color: rgba(255, 255, 255, .8) !important; font-size: 14.5px !important; font-weight: 600 !important; text-decoration: none !important; } [data-theme="next"] body.ev-page .mp-cond:hover { color: #fff !important; } [data-theme="next"] body.ev-page .mp-cond span { padding: 3px 7px !important; border-radius: var(--r-xs) !important; background: #FFD100 !important; color: #1A1A1A !important; font-size: 10.5px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .04em; } [data-theme="next"] body.ev-page .mp-next-vis { min-height: 100%; background-size: cover !important; background-position: 50% 20% !important; border-radius: 0 !important; } @media (max-width: 900px) { [data-theme="next"] body.ev-page .mp-next-card { grid-template-columns: 1fr; } [data-theme="next"] body.ev-page .mp-next-vis { order: -1; min-height: 0; aspect-ratio: 16 / 10; } } @media (max-width: 600px) { [data-theme="next"] body.ev-page > section.ev-hero, [data-theme="next"] body.ev-page > section.ev-next, [data-theme="next"] body.ev-page > section.ev-list, [data-theme="next"] body.ev-page > section.ev-terms, [data-theme="next"] body.ev-page > section.ev-past { padding-left: 20px !important; padding-right: 20px !important; } [data-theme="next"] body.ev-page .mp-next-card { border-radius: var(--r-md) !important; } [data-theme="next"] body.ev-page .mp-next-info { padding: 26px 22px !important; } [data-theme="next"] body.ev-page .mp-btn { width: 100%; justify-content: center; } [data-theme="next"] body.ev-page .mp-cond { display: flex !important; justify-content: center; margin: 14px 0 0 !important; } } /* ── карточки встреч: расписание и архив ──────────────────── */ [data-theme="next"] body.ev-page .mp-grid { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: clamp(12px, 1.4vw, 18px) !important; margin: 0 !important; } [data-theme="next"] body.ev-page .mp-card { grid-column: span 4; position: relative; display: flex !important; flex-direction: column; margin: 0 !important; padding: 24px 24px 0 !important; overflow: hidden; border-radius: var(--r-md) !important; background: #fff !important; border: 1px solid rgba(26, 26, 26, .09) !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .04) !important; transition: transform .22s ease, box-shadow .22s ease !important; } [data-theme="next"] body.ev-page .mp-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(26, 26, 26, .08) !important; } /* неполный последний ряд растягивается */ [data-theme="next"] body.ev-page .mp-card:nth-child(3n+1):last-child { grid-column: 1 / -1; } [data-theme="next"] body.ev-page .mp-card:nth-child(3n+1):nth-last-child(2), [data-theme="next"] body.ev-page .mp-card:nth-child(3n+1):nth-last-child(2) + .mp-card { grid-column: span 6; } [data-theme="next"] body.ev-page .mp-date { align-self: flex-start; display: inline-flex !important; margin: 0 0 14px !important; padding: 5px 10px !important; border-radius: var(--r-xs) !important; background: #D6001C !important; color: #fff !important; font-size: 12px !important; font-weight: 800 !important; } [data-theme="next"] body.ev-page .mp-card h3 { margin: 0 0 10px !important; font-size: clamp(18px, 1.4vw, 21px) !important; font-weight: 800 !important; line-height: 1.25 !important; color: #1A1A1A !important; text-wrap: balance; } [data-theme="next"] body.ev-page .mp-card .mp-spk { margin: 0 !important; font-size: 14.5px !important; line-height: 1.55 !important; color: #6f6f6f !important; } [data-theme="next"] body.ev-page .mp-spk-row { display: flex !important; gap: 12px !important; align-items: flex-start; } [data-theme="next"] body.ev-page .mp-spk-photo { flex: 0 0 56px; width: 56px !important; height: 56px !important; border-radius: 50% !important; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #FFD100; } [data-theme="next"] body.ev-page .mp-cmeta { display: flex !important; flex-wrap: wrap; gap: 6px !important; margin: 16px 0 20px !important; } [data-theme="next"] body.ev-page .mp-cmeta span { display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 10px !important; border-radius: var(--r-xs) !important; background: #F6F4EF !important; color: #1A1A1A !important; font-size: 13px !important; font-weight: 600 !important; } [data-theme="next"] body.ev-page .mp-cmeta svg { width: 16px !important; height: 16px !important; stroke: #D6001C !important; } [data-theme="next"] body.ev-page .mp-reg { margin: auto -24px 0 !important; display: flex !important; align-items: center; justify-content: center; gap: 8px; width: auto !important; min-height: 52px; padding: 0 20px !important; border: 0 !important; border-radius: 0 !important; background: #D6001C !important; color: #fff !important; font-size: 15px !important; font-weight: 800 !important; text-decoration: none !important; cursor: pointer; transition: background .18s ease !important; } [data-theme="next"] body.ev-page .mp-reg::after { content: "→"; } [data-theme="next"] body.ev-page .mp-reg:hover { background: #B00017 !important; } [data-theme="next"] body.ev-page .mp-reg.mp-btn--soon { background: #F6F4EF !important; color: #8a8a8a !important; cursor: default; } [data-theme="next"] body.ev-page .mp-reg.mp-btn--soon::after { content: none; } /* архив — спокойнее */ [data-theme="next"] body.ev-page .mp-card.arch { background: #F6F4EF !important; border-color: transparent !important; } [data-theme="next"] body.ev-page .mp-card.arch .mp-date { background: #1A1A1A !important; } [data-theme="next"] body.ev-page .mp-done { align-self: flex-start; margin: 16px 0 20px !important; padding: 4px 9px !important; border-radius: var(--r-xs) !important; background: #fff !important; color: #8a8a8a !important; font-size: 12px !important; font-weight: 700 !important; } [data-theme="next"] body.ev-page .mp-card.arch .mp-reg { background: #fff !important; color: #1A1A1A !important; border-top: 1px solid rgba(26, 26, 26, .06) !important; } [data-theme="next"] body.ev-page .mp-card.arch .mp-reg:hover { background: #D6001C !important; color: #fff !important; } [data-theme="next"] body.ev-page .mp-card.arch:not(:has(.mp-reg)) { padding-bottom: 4px !important; } [data-theme="next"] body.ev-page .mp-empty { grid-column: 1 / -1; padding: 24px !important; border-radius: var(--r-md) !important; background: #F6F4EF !important; color: #6f6f6f !important; } @media (max-width: 1100px) { [data-theme="next"] body.ev-page .mp-card, [data-theme="next"] body.ev-page .mp-card:nth-child(n) { grid-column: span 6 !important; } [data-theme="next"] body.ev-page .mp-card:nth-child(odd):last-child { grid-column: 1 / -1 !important; } } @media (max-width: 600px) { [data-theme="next"] body.ev-page .mp-grid { grid-template-columns: 1fr !important; gap: 10px !important; } [data-theme="next"] body.ev-page .mp-card, [data-theme="next"] body.ev-page .mp-card:nth-child(n) { grid-column: auto !important; } [data-theme="next"] body.ev-page .mp-card:hover { transform: none; } } /* ── шаги: четыре в ряд ──────────────────────────────────── */ @media (min-width: 1101px) { [data-theme="next"] body.ev-page .ev-steps .steps-track { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* ── условия участия ─────────────────────────────────────── */ [data-theme="next"] body.ev-page .ev-terms-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); } [data-theme="next"] body.ev-page .ev-term { grid-column: span 2; display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-md); background: #F6F4EF; } [data-theme="next"] body.ev-page .ev-term:nth-child(n+4) { grid-column: span 3; } [data-theme="next"] body.ev-page .ev-term-ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: var(--r-sm); background: linear-gradient(145deg, #FFE36B 0%, #FFC42E 55%, #FFA51F 100%); box-shadow: 0 8px 18px rgba(214, 140, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .55); color: #1A1A1A; } [data-theme="next"] body.ev-page .ev-term:nth-child(2) .ev-term-ico { background: #D6001C; color: #fff; box-shadow: 0 8px 18px rgba(214, 0, 28, .25); } [data-theme="next"] body.ev-page .ev-term b { margin-bottom: 6px; font-size: 17px; font-weight: 800; color: #1A1A1A; } [data-theme="next"] body.ev-page .ev-term p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #6f6f6f; } @media (max-width: 900px) { [data-theme="next"] body.ev-page .ev-terms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme="next"] body.ev-page .ev-term, [data-theme="next"] body.ev-page .ev-term:nth-child(n+4) { grid-column: auto; } [data-theme="next"] body.ev-page .ev-term:last-child { grid-column: 1 / -1; } } @media (max-width: 600px) { [data-theme="next"] body.ev-page .ev-terms-grid { grid-template-columns: 1fr; gap: 10px; } [data-theme="next"] body.ev-page .ev-term { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; padding: 18px; } [data-theme="next"] body.ev-page .ev-term-ico { grid-row: 1 / span 2; margin: 0; } } /* ── подписка: плашка в колонке ──────────────────────────── */ [data-theme="next"] body.ev-page > .sub-teaser { margin: var(--sec) var(--gutter) 0 !important; padding: 0 !important; background: transparent !important; } [data-theme="next"] body.ev-page > .sub-teaser .sub-widget { margin: 0 !important; max-width: none !important; border-radius: var(--r-lg) !important; background: #F6F4EF !important; border: 0 !important; box-shadow: none !important; } [data-theme="next"] body.ev-page > .sub-teaser .sub-tag { color: #D6001C !important; } [data-theme="next"] body.ev-page > .sub-teaser button[type=submit] { background: #D6001C !important; color: #fff !important; border-radius: var(--r-sm) !important; } @media (max-width: 600px) { [data-theme="next"] body.ev-page > .sub-teaser { margin: 40px 20px 0 !important; } [data-theme="next"] body.ev-page > .sub-teaser .sub-widget { border-radius: var(--r-md) !important; } } [data-theme="next"] body.ev-page > section#zayavka { margin-top: var(--sec) !important; } /* мероприятия: поля колонки у секции — внутренним блокам не дублировать */ [data-theme="next"] body.ev-page > section.ev-hero > div, [data-theme="next"] body.ev-page > section.ev-next > div, [data-theme="next"] body.ev-page > section.ev-list > div, [data-theme="next"] body.ev-page > section.ev-terms > div, [data-theme="next"] body.ev-page > section.ev-past > div { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } [data-theme="next"] body.ev-page .mp-card > .mp-reg { align-self: stretch !important; max-width: none !important; } /* мероприятия — правки после просмотра */ /* «Коротко»: поля внутри (правило колонки их обнуляло) */ [data-theme="next"] body.ev-page > section.ev-hero > .ev-short { padding: 16px 20px !important; margin-top: 12px !important; } /* карточки встреч: всегда по три в ряд, без растягивания */ @media (min-width: 1101px) { [data-theme="next"] body.ev-page .mp-grid > .mp-card, [data-theme="next"] body.ev-page .mp-grid > .mp-card:nth-child(n) { grid-column: span 4 !important; } } @media (min-width: 601px) and (max-width: 1100px) { [data-theme="next"] body.ev-page .mp-grid > .mp-card, [data-theme="next"] body.ev-page .mp-grid > .mp-card:nth-child(n) { grid-column: span 6 !important; } } /* условия участия: слева — для кого, справа — три правила */ [data-theme="next"] body.ev-page .ev-terms-box { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(12px, 1.4vw, 18px); align-items: stretch; } [data-theme="next"] body.ev-page .ev-who { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px); border-radius: var(--r-lg); background: radial-gradient(60% 80% at 0% 0%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(135deg, #2C5654 0%, #1C3637 60%, #142728 100%); color: #fff; } [data-theme="next"] body.ev-page .ev-who-ico { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: var(--r-sm); background: #FFD100; color: #1A1A1A; } [data-theme="next"] body.ev-page .ev-who > b { display: block; margin-bottom: 10px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; } [data-theme="next"] body.ev-page .ev-who > p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .75); } [data-theme="next"] body.ev-page .ev-who-no { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); } [data-theme="next"] body.ev-page .ev-who-no span { flex-basis: 100%; margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } [data-theme="next"] body.ev-page .ev-who-no i { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-xs); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-style: normal; font-size: 13.5px; color: rgba(255, 255, 255, .85); text-decoration: line-through; text-decoration-color: rgba(214, 0, 28, .9); text-decoration-thickness: 2px; } [data-theme="next"] body.ev-page .ev-rules { list-style: none; display: grid; gap: clamp(10px, 1.2vw, 14px); margin: 0; padding: 0; } [data-theme="next"] body.ev-page .ev-rules li { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "ico title" "ico text"; column-gap: 18px; align-items: center; padding: 22px 24px; border-radius: var(--r-md); background: #F6F4EF; } [data-theme="next"] body.ev-page .ev-rule-ico { grid-area: ico; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r-sm); background: linear-gradient(145deg, #FFE36B 0%, #FFC42E 55%, #FFA51F 100%); box-shadow: 0 8px 18px rgba(214, 140, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .55); color: #1A1A1A; } [data-theme="next"] body.ev-page .ev-rules li:last-child .ev-rule-ico { background: #D6001C; color: #fff; box-shadow: 0 8px 18px rgba(214, 0, 28, .25); } [data-theme="next"] body.ev-page .ev-rules b { grid-area: title; align-self: end; font-size: 18px; font-weight: 800; color: #1A1A1A; } [data-theme="next"] body.ev-page .ev-rules p { grid-area: text; align-self: start; margin: 2px 0 0; font-size: 14.5px; line-height: 1.55; color: #6f6f6f; } @media (max-width: 900px) { [data-theme="next"] body.ev-page .ev-terms-box { grid-template-columns: 1fr; } } @media (max-width: 600px) { [data-theme="next"] body.ev-page .ev-who { border-radius: var(--r-md); padding: 24px; } [data-theme="next"] body.ev-page .ev-rules li { padding: 18px; column-gap: 14px; } } /* мероприятия: старый приём дорисовывал на телефоне круглый портрет к заголовку ближайшей встречи и при отсутствии фото подставлял портрет с другой встречи. В новой теме фото — только своё. */ [data-theme="next"] body.ev-page .mp-next-card h2::after { content: none !important; display: none !important; } @media (max-width: 900px) { [data-theme="next"] body.ev-page .mp-next-vis { display: block !important; } } /* архив: «Завершено» — у нижнего края, над полосой */ [data-theme="next"] body.ev-page .mp-card.arch .mp-done { margin-top: auto !important; } /* условия: иконки крупнее */ [data-theme="next"] body.ev-page .ev-who-ico { width: 60px; height: 60px; } [data-theme="next"] body.ev-page .ev-rule-ico { width: 56px; height: 56px; } [data-theme="next"] body.ev-page .ev-rules li { grid-template-columns: 56px minmax(0, 1fr); } [data-theme="next"] body.ev-page .ev-rules li:last-child .ev-rule-ico svg circle[fill="#fff"] { fill: #D6001C; } [data-theme="next"] body.ev-page .mp-card.arch > .mp-reg { margin-top: 0 !important; } /* ════════════════════════════════════════════════════════════ ТЕХНИЧЕСКИЕ СТРАНИЦЫ (body.tech-page) — собирает tools/build-tech.php 404 · оплата · напоминания · спасибо за подписку · согласие · политика Карточка состояния — белая плашка в колонке; ссылки — плитки; документы — читаемый текст до 820px. ════════════════════════════════════════════════════════════ */ [data-theme="next"] body.tech-page > section.tp-hero, [data-theme="next"] body.tech-page > section.tp-links, [data-theme="next"] body.tech-page > section.tp-doc { display: block !important; margin: 0 !important; padding: var(--sec) var(--gutter) 0 !important; background: transparent !important; } [data-theme="next"] body.tech-page > section.tp-hero, [data-theme="next"] body.tech-page > section.tp-doc { padding-top: calc(var(--header-h) + clamp(28px, 4vw, 56px)) !important; } [data-theme="next"] body.tech-page > section > div { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0; margin-right: 0; max-width: none; } [data-theme="next"] body.tech-page > section#zayavka { margin-top: var(--sec) !important; } [data-theme="next"] body.tech-page > section:last-of-type:not(#zayavka) { padding-bottom: var(--sec) !important; } /* ── карточка состояния ──────────────────────────────────── */ [data-theme="next"] body.tech-page .tp-status { position: relative; overflow: hidden; max-width: 880px; margin: 0 auto !important; padding: clamp(32px, 4.4vw, 64px) clamp(24px, 4vw, 64px) !important; border-radius: var(--r-lg); background: radial-gradient(60% 70% at 100% 0%, rgba(255, 209, 0, .20) 0%, rgba(255, 209, 0, 0) 70%), #F6F4EF; text-align: center; } [data-theme="next"] body.tech-page .tp-status-ico { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 20px; border-radius: 20px; background: linear-gradient(145deg, #FFE36B 0%, #FFC42E 55%, #FFA51F 100%); box-shadow: 0 10px 24px rgba(214, 140, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .55); color: #1A1A1A; } [data-theme="next"] body.tech-page .tp-status-img { display: block; width: min(220px, 60%); height: auto; margin: 0 auto 18px; } [data-theme="next"] body.tech-page .tp-status h1 { margin: 14px auto 12px !important; max-width: 18ch; font-size: clamp(32px, 4.2vw, 56px) !important; font-weight: 800 !important; line-height: 1.04 !important; letter-spacing: -.03em !important; color: #1A1A1A !important; text-wrap: balance; } [data-theme="next"] body.tech-page .tp-lead { max-width: 56ch; margin: 0 auto !important; font-size: clamp(15px, 1.3vw, 18px) !important; line-height: 1.6 !important; color: #5f5f5f !important; } [data-theme="next"] body.tech-page .tp-badge, [data-theme="next"] body.tech-page .tp-status .badge { display: inline-flex !important; align-items: center; margin: 0 !important; padding: 5px 11px !important; border-radius: var(--r-xs) !important; background: #D6001C !important; color: #fff !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } [data-theme="next"] body.tech-page .tp-status .badge.wait { background: #FFA51F !important; color: #1A1A1A !important; } [data-theme="next"] body.tech-page .tp-status .badge:not(.err):not(.wait) { background: #1C3637 !important; } [data-theme="next"] body.tech-page .tp-status .badge.err { background: #D6001C !important; } [data-theme="next"] body.tech-page .tp-badge--ok { background: #1C3637 !important; } [data-theme="next"] body.tech-page .tp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(22px, 2.6vw, 32px); } [data-theme="next"] body.tech-page .tp-btn { display: inline-flex !important; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px !important; border-radius: var(--r-sm) !important; font-size: 15px !important; font-weight: 800 !important; text-decoration: none !important; transition: background .18s ease, color .18s ease, border-color .18s ease; } [data-theme="next"] body.tech-page .tp-btn.btn-primary { box-shadow: 0 10px 24px rgba(214, 0, 28, .24); } [data-theme="next"] body.tech-page .tp-btn--light { background: #fff; color: #1A1A1A !important; border: 1px solid rgba(26, 26, 26, .1); } [data-theme="next"] body.tech-page .tp-btn--light:hover { border-color: rgba(214, 0, 28, .4); color: #D6001C !important; } [data-theme="next"] body.tech-page .tp-order { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 16px; border-radius: var(--r-sm); background: #fff; font-size: 14px; color: #6f6f6f; } [data-theme="next"] body.tech-page .tp-order[hidden] { display: none; } [data-theme="next"] body.tech-page .tp-order b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; color: #1A1A1A; } [data-theme="next"] body.tech-page .tp-note { max-width: 56ch; margin: 20px auto 0; font-size: 14px; line-height: 1.6; color: #8a8a8a; } [data-theme="next"] body.tech-page .tp-note:empty { display: none; } [data-theme="next"] body.tech-page .tp-note a { color: #D6001C; font-weight: 700; } /* 404 — крупная цифра */ [data-theme="next"] body.tech-page .tp-big { font-size: clamp(110px, 18vw, 220px); font-weight: 800; line-height: .85; letter-spacing: -.06em; background: linear-gradient(145deg, #FFD100 0%, #FFA51F 60%, #D6001C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px; } /* спасибо — соцсети */ [data-theme="next"] body.tech-page .tp-msgs { margin-top: clamp(26px, 3vw, 40px); padding-top: 24px; border-top: 1px solid rgba(26, 26, 26, .08); } [data-theme="next"] body.tech-page .tp-msgs-title { margin-bottom: 14px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; } [data-theme="next"] body.tech-page .tp-msgs-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } [data-theme="next"] body.tech-page .tp-msg { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: var(--r-pill); background: #fff; border: 1px solid rgba(26, 26, 26, .08); color: #1A1A1A; font-size: 14.5px; font-weight: 700; text-decoration: none; transition: border-color .18s ease, transform .18s ease; } [data-theme="next"] body.tech-page .tp-msg:hover { border-color: rgba(214, 0, 28, .35); transform: translateY(-2px); } [data-theme="next"] body.tech-page .tp-msg .msg-ic { width: 32px; height: 32px; } @media (max-width: 600px) { [data-theme="next"] body.tech-page > section.tp-hero, [data-theme="next"] body.tech-page > section.tp-links, [data-theme="next"] body.tech-page > section.tp-doc { padding-left: 20px !important; padding-right: 20px !important; } [data-theme="next"] body.tech-page .tp-status { border-radius: var(--r-md); } [data-theme="next"] body.tech-page .tp-actions .tp-btn { width: 100%; } [data-theme="next"] body.tech-page .tp-msg { flex: 1 1 calc(50% - 8px); justify-content: flex-start; } } /* ── плитки ссылок ───────────────────────────────────────── */ [data-theme="next"] body.tech-page .tp-head { margin-bottom: clamp(24px, 2.8vw, 40px); } [data-theme="next"] body.tech-page .tp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); } [data-theme="next"] body.tech-page .tp-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 20px 22px; border-radius: var(--r-md); background: #fff; border: 1px solid rgba(26, 26, 26, .09); text-decoration: none; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } [data-theme="next"] body.tech-page .tp-card:hover { transform: translateY(-3px); border-color: rgba(214, 0, 28, .25); box-shadow: 0 16px 36px rgba(26, 26, 26, .08); } [data-theme="next"] body.tech-page .tp-card-ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: var(--r-sm); background: #F6F4EF; color: #D6001C; transition: background .2s ease, color .2s ease; } [data-theme="next"] body.tech-page .tp-card:hover .tp-card-ico { background: #D6001C; color: #fff; } [data-theme="next"] body.tech-page .tp-card b { font-size: 17px; font-weight: 800; color: #1A1A1A; } [data-theme="next"] body.tech-page .tp-card > span:last-child { font-size: 14px; line-height: 1.5; color: #6f6f6f; } [data-theme="next"] body.tech-page .tp-card::after { content: "→"; position: absolute; top: 20px; right: 20px; color: #D6001C; font-weight: 800; transition: transform .2s ease; } [data-theme="next"] body.tech-page .tp-card:hover::after { transform: translateX(3px); } @media (max-width: 1100px) { [data-theme="next"] body.tech-page .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { [data-theme="next"] body.tech-page .tp-grid { grid-template-columns: 1fr; gap: 8px; } [data-theme="next"] body.tech-page .tp-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; padding: 14px 44px 14px 14px; } [data-theme="next"] body.tech-page .tp-card-ico { grid-row: 1 / span 2; margin: 0; } [data-theme="next"] body.tech-page .tp-card::after { top: 50%; transform: translateY(-50%); } [data-theme="next"] body.tech-page .tp-card:hover { transform: none; } } /* ── документы: согласие и политика ──────────────────────── */ [data-theme="next"] body.tech-page > section.tp-doc { padding-top: var(--crumbs-top) !important; } [data-theme="next"] body.tech-page .tp-crumbs { margin: 0 0 var(--crumbs-gap) !important; color: #8a8a8a !important; } [data-theme="next"] body.tech-page .tp-crumbs a { color: #8a8a8a !important; } [data-theme="next"] body.tech-page .tp-doc h1 { max-width: 22ch; margin: 0 0 16px !important; font-size: clamp(32px, 4.4vw, 60px) !important; font-weight: 800 !important; line-height: 1.04 !important; letter-spacing: -.03em !important; color: #1A1A1A !important; } [data-theme="next"] body.tech-page .tp-doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: clamp(28px, 3.4vw, 48px); font-size: 14.5px; color: #6f6f6f; } [data-theme="next"] body.tech-page .tp-doc-meta a { margin-left: auto; color: #D6001C; font-weight: 700; text-decoration: none; } [data-theme="next"] body.tech-page .tp-prose { max-width: 820px; font-size: 16.5px; line-height: 1.7; color: #3a3a3a; } [data-theme="next"] body.tech-page .tp-prose h2 { margin: 40px 0 12px; padding-top: 24px; border-top: 1px solid rgba(26, 26, 26, .08); font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; line-height: 1.25; color: #1A1A1A; } [data-theme="next"] body.tech-page .tp-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } [data-theme="next"] body.tech-page .tp-prose p { margin: 0 0 14px; } [data-theme="next"] body.tech-page .tp-prose ul { margin: 0 0 16px; padding: 0; list-style: none; } [data-theme="next"] body.tech-page .tp-prose li { position: relative; margin-bottom: 8px; padding-left: 22px; } [data-theme="next"] body.tech-page .tp-prose li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: #D6001C; } [data-theme="next"] body.tech-page .tp-prose a { color: #D6001C; text-decoration: underline; text-decoration-color: rgba(214, 0, 28, .35); text-underline-offset: 3px; } [data-theme="next"] body.tech-page .tp-table { overflow-x: auto; margin: 8px 0 20px; border-radius: var(--r-md); background: #F6F4EF; } [data-theme="next"] body.tech-page .tp-table table { width: 100%; border-collapse: collapse; font-size: 15px; } [data-theme="next"] body.tech-page .tp-table th, [data-theme="next"] body.tech-page .tp-table td { padding: 12px 18px; border-bottom: 1px solid rgba(26, 26, 26, .06); text-align: left; vertical-align: top; } [data-theme="next"] body.tech-page .tp-table tr:last-child th, [data-theme="next"] body.tech-page .tp-table tr:last-child td { border-bottom: 0; } [data-theme="next"] body.tech-page .tp-table th { width: 34%; font-weight: 700; color: #1A1A1A; background: rgba(255, 255, 255, .45); } @media (max-width: 600px) { [data-theme="next"] body.tech-page .tp-doc-meta a { margin-left: 0; flex-basis: 100%; } [data-theme="next"] body.tech-page .tp-prose { font-size: 15.5px; } [data-theme="next"] body.tech-page .tp-table th, [data-theme="next"] body.tech-page .tp-table td { display: block; width: auto; padding: 8px 14px; } [data-theme="next"] body.tech-page .tp-table th { padding-top: 12px; border-bottom: 0; background: transparent; font-size: 13px; color: #8a8a8a; } } /* иконки соцсетей на «спасибо» (были во встроенных стилях старой страницы) */ [data-theme="next"] body.tech-page .msg-ic {width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} [data-theme="next"] body.tech-page .msg-ic svg {width:16px;height:16px;display:block} [data-theme="next"] body.tech-page .msg-ic.vk {background:#0077FF} [data-theme="next"] body.tech-page .msg-ic.vk svg {fill:#fff} [data-theme="next"] body.tech-page .msg-ic.tg {background:#28A8E9} [data-theme="next"] body.tech-page .msg-ic.tg svg {fill:#fff} [data-theme="next"] body.tech-page .msg-ic.max {background:linear-gradient(135deg,#4cf,#53e,#93d)} [data-theme="next"] body.tech-page .msg-ic.max svg {fill:#fff} [data-theme="next"] body.tech-page .msg-ic.dzen {background:#fff;border:1px solid var(--g200)} [data-theme="next"] body.tech-page .tp-msg .msg-ic { width: 32px; height: 32px; border-radius: 50%; } [data-theme="next"] body.tech-page .tp-msg .msg-ic svg { width: 18px; height: 18px; } [data-theme="next"] body.tech-page .tp-status-ico { display: flex !important; margin: 0 auto 18px !important; } [data-theme="next"] body.tech-page .tp-status h1 { overflow-wrap: break-word; } @media (max-width: 600px) { [data-theme="next"] body.tech-page .tp-status { padding: 28px 20px !important; } [data-theme="next"] body.tech-page .tp-status h1 { font-size: clamp(26px, 7.4vw, 32px) !important; } } [data-theme="next"] body.tech-page .tp-status.state-off .badge { background: #6f6f6f !important; } [data-theme="next"] body.tech-page .tp-status.state-off .tp-status-ico { background: #E9E6DF; box-shadow: none; } /* технические страницы — правки после просмотра: карточки состояния без подложки; плашка статуса на оплате и напоминаниях скрыта (скрипт по-прежнему пишет в неё); документы шире */ [data-theme="next"] body.tech-page .tp-status { background: transparent !important; padding-top: 0 !important; padding-bottom: 0 !important; } [data-theme="next"] body.tech-page .tp-status .badge[hidden] { display: none !important; } [data-theme="next"] body.tech-page .tp-status h1 { margin-top: 0 !important; } [data-theme="next"] body.tech-page .tp-badge + h1 { margin-top: 14px !important; } [data-theme="next"] body.tech-page .tp-prose { max-width: 1080px; } /* заголовок документа: на ПК в две строки */ [data-theme="next"] body.tech-page .tp-doc h1 { max-width: 1080px !important; text-wrap: balance; } /* ════════════════════════════════════════════════════════════ ПОИСК (body.ps-page) и ВАКАНСИИ (body.vc-page) первый экран — как на разводящей: крошки, заголовок, описание. ════════════════════════════════════════════════════════════ */ [data-theme="next"] body.ps-page > section.ps-hero, [data-theme="next"] body.ps-page > section.ps-sections, [data-theme="next"] body.vc-page > section.vc-hero, [data-theme="next"] body.vc-page > section.vc-list, [data-theme="next"] body.vc-page > section.vc-more { display: block !important; margin: 0 !important; max-width: none !important; padding: var(--sec) var(--gutter) 0 !important; background: transparent !important; } [data-theme="next"] body.ps-page > section.ps-hero, [data-theme="next"] body.vc-page > section.vc-hero { padding-top: var(--crumbs-top) !important; } [data-theme="next"] body.ps-page > section > div, [data-theme="next"] body.vc-page > section > div, [data-theme="next"] body.vc-page > section > article { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } [data-theme="next"] body.ps-page > section#zayavka, [data-theme="next"] body.vc-page > section#zayavka { margin-top: var(--sec) !important; } [data-theme="next"] body.ps-page .ps-crumbs, [data-theme="next"] body.vc-page .vc-crumbs { margin: 0 0 var(--crumbs-gap) !important; color: #8a8a8a !important; } [data-theme="next"] body.ps-page .ps-crumbs a, [data-theme="next"] body.vc-page .vc-crumbs a { color: #8a8a8a !important; } [data-theme="next"] body.ps-page .ps-hero h1, [data-theme="next"] body.vc-page .vc-hero h1 { margin: 0 0 12px !important; font-size: clamp(34px, 4.6vw, 64px) !important; font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -.035em !important; color: #1A1A1A !important; } [data-theme="next"] body.ps-page .ps-lead, [data-theme="next"] body.vc-page .vc-lead-top { max-width: 70ch; margin: 0 !important; font-size: clamp(15px, 1.3vw, 19px) !important; line-height: 1.55 !important; color: #6f6f6f !important; } [data-theme="next"] body.ps-page .ps-head, [data-theme="next"] body.vc-page .vc-head { margin-bottom: clamp(24px, 2.8vw, 40px); } @media (max-width: 600px) { [data-theme="next"] body.ps-page > section.ps-hero, [data-theme="next"] body.ps-page > section.ps-sections, [data-theme="next"] body.vc-page > section.vc-hero, [data-theme="next"] body.vc-page > section.vc-list, [data-theme="next"] body.vc-page > section.vc-more { padding-left: 20px !important; padding-right: 20px !important; } } /* ── поиск: поле, подсказки, результаты ──────────────────── */ [data-theme="next"] body.ps-page .ps-box { display: flex; align-items: center; gap: 14px; margin-top: clamp(22px, 2.6vw, 32px); padding: 8px 10px 8px 20px; border-radius: var(--r-md); background: #fff; border: 2px solid #1A1A1A; box-shadow: 0 16px 36px rgba(26, 26, 26, .08); cursor: text; transition: border-color .18s ease, box-shadow .18s ease; } [data-theme="next"] body.ps-page .ps-box:focus-within { border-color: #D6001C; box-shadow: 0 0 0 4px rgba(214, 0, 28, .12), 0 16px 36px rgba(26, 26, 26, .08); } [data-theme="next"] body.ps-page .ps-box-ico { flex: 0 0 auto; display: flex; color: #D6001C; } [data-theme="next"] body.ps-page .ps-box input { flex: 1; min-width: 0; height: 52px; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; font-family: inherit; font-size: clamp(16px, 1.5vw, 20px) !important; font-weight: 600; color: #1A1A1A; } [data-theme="next"] body.ps-page .ps-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } [data-theme="next"] body.ps-page .ps-chips span { margin-right: 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; } [data-theme="next"] body.ps-page .ps-chips a { padding: 8px 14px; border-radius: var(--r-pill); background: #F6F4EF; color: #1A1A1A; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .18s ease, color .18s ease; } [data-theme="next"] body.ps-page .ps-chips a:hover { background: #D6001C; color: #fff; } [data-theme="next"] body.ps-page .ps-count { margin: 22px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a8a8a; } [data-theme="next"] body.ps-page .ps-count:empty { margin: 0; } [data-theme="next"] body.ps-page .ps-results { display: grid !important; gap: 8px !important; max-height: none !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 0 !important; } [data-theme="next"] body.ps-page .ps-results:empty { display: none !important; } [data-theme="next"] body.ps-page .ps-results .sr-item { position: relative; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "kind title date" "kind desc desc"; column-gap: 16px; row-gap: 4px; align-items: start; padding: 18px 22px !important; border: 1px solid rgba(26, 26, 26, .08) !important; border-radius: var(--r-md) !important; background: #fff !important; text-decoration: none !important; transition: border-color .18s ease, box-shadow .18s ease; } [data-theme="next"] body.ps-page .ps-results .sr-item:hover, [data-theme="next"] body.ps-page .ps-results .sr-item.sel { border-color: rgba(214, 0, 28, .3) !important; box-shadow: 0 12px 28px rgba(26, 26, 26, .07); background: #fff !important; } [data-theme="next"] body.ps-page .ps-results .sr-kind { grid-area: kind; align-self: start; margin: 2px 0 0 !important; padding: 4px 9px !important; border-radius: var(--r-xs) !important; background: #D6001C !important; color: #fff !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .05em !important; text-transform: uppercase !important; white-space: nowrap; } [data-theme="next"] body.ps-page .ps-results .sr-title { grid-area: title; font-size: 17px !important; font-weight: 800 !important; line-height: 1.3 !important; color: #1A1A1A !important; } [data-theme="next"] body.ps-page .ps-results .sr-desc { grid-area: desc; font-size: 14.5px !important; line-height: 1.55 !important; color: #6f6f6f !important; } [data-theme="next"] body.ps-page .ps-results .sr-date { grid-area: date; font-size: 13px !important; color: #9a9a9a !important; white-space: nowrap; } [data-theme="next"] body.ps-page .ps-results mark { background: #FFE36B !important; color: inherit !important; border-radius: 3px; padding: 0 2px; } [data-theme="next"] body.ps-page .ps-results .sr-empty { display: flex !important; flex-direction: column; align-items: flex-start; gap: 6px; padding: 28px !important; border-radius: var(--r-lg) !important; background: #F6F4EF !important; text-align: left !important; } [data-theme="next"] body.ps-page .ps-results .sr-empty b { font-size: 22px; font-weight: 800; color: #1A1A1A; } [data-theme="next"] body.ps-page .ps-results .sr-empty > span { color: #6f6f6f; } [data-theme="next"] body.ps-page .ps-results .sr-pop { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px !important; } [data-theme="next"] body.ps-page .ps-results .sr-pop a { padding: 8px 14px !important; border-radius: var(--r-sm) !important; background: #fff !important; color: #1A1A1A !important; font-size: 14px; font-weight: 700; text-decoration: none; border: 1px solid rgba(26, 26, 26, .08); } [data-theme="next"] body.ps-page .ps-results .sr-pop a:hover { border-color: rgba(214, 0, 28, .35); color: #D6001C !important; } [data-theme="next"] body.ps-page .ps-results .sr-cta { display: inline-flex !important; margin-top: 6px; padding: 12px 20px !important; border-radius: var(--r-sm) !important; background: #D6001C !important; color: #fff !important; font-weight: 800; text-decoration: none; } [data-theme="next"] body.ps-page .ps-results .sr-cta-note { font-size: 13px; color: #8a8a8a; } @media (max-width: 600px) { [data-theme="next"] body.ps-page .ps-box { padding-left: 14px; } [data-theme="next"] body.ps-page .ps-results .sr-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kind" "title" "desc" "date"; padding: 16px !important; } [data-theme="next"] body.ps-page .ps-results .sr-kind { justify-self: start; } [data-theme="next"] body.ps-page .ps-results .sr-cta { width: 100%; justify-content: center; } } /* разделы */ [data-theme="next"] body.ps-page .ps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); } [data-theme="next"] body.ps-page .ps-tile { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); background: #F6F4EF; border: 1px solid transparent; color: #1A1A1A; text-decoration: none; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; } [data-theme="next"] body.ps-page .ps-tile:hover { background: #fff; border-color: rgba(214, 0, 28, .25); box-shadow: 0 12px 28px rgba(26, 26, 26, .07); } [data-theme="next"] body.ps-page .ps-tile-ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: #fff; color: #D6001C; transition: background .2s ease, color .2s ease; } [data-theme="next"] body.ps-page .ps-tile:hover .ps-tile-ico { background: #D6001C; color: #fff; } [data-theme="next"] body.ps-page .ps-tile b { font-size: 16px; font-weight: 800; } @media (max-width: 1100px) { [data-theme="next"] body.ps-page .ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { [data-theme="next"] body.ps-page .ps-grid { grid-template-columns: 1fr; gap: 8px; } } /* ── вакансии ────────────────────────────────────────────── */ [data-theme="next"] body.vc-page .vc-trust { margin-top: clamp(20px, 2.4vw, 32px) !important; } [data-theme="next"] body.vc-page .vc-trust li { background: #F6F4EF !important; border-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } [data-theme="next"] body.vc-page .vc-card { display: block !important; padding: clamp(24px, 3.4vw, 48px) !important; border-radius: var(--r-lg) !important; background: #fff !important; border: 1px solid rgba(26, 26, 26, .09) !important; box-shadow: 0 20px 48px rgba(26, 26, 26, .06) !important; } [data-theme="next"] body.vc-page .vc-card + .vc-card { margin-top: 16px !important; } [data-theme="next"] body.vc-page .vc-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px 32px; } [data-theme="next"] body.vc-page .vc-badge { display: inline-flex; padding: 5px 10px; border-radius: var(--r-xs); background: #1C3637; color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } [data-theme="next"] body.vc-page .vc-title h3 { margin: 12px 0 12px !important; font-size: clamp(26px, 3vw, 42px) !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -.025em !important; color: #1A1A1A !important; } [data-theme="next"] body.vc-page .vc-meta { display: flex; flex-wrap: wrap; gap: 8px; } [data-theme="next"] body.vc-page .vc-meta span { padding: 7px 12px; border-radius: var(--r-sm); background: #F6F4EF; font-size: 14px; font-weight: 600; color: #1A1A1A; } [data-theme="next"] body.vc-page .vc-actions { display: flex; flex-wrap: wrap; gap: 10px; } [data-theme="next"] body.vc-page .vc-btn { display: inline-flex !important; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px !important; border-radius: var(--r-sm) !important; font-size: 15px !important; font-weight: 800 !important; text-decoration: none !important; white-space: nowrap; } [data-theme="next"] body.vc-page .vc-btn.btn-primary { box-shadow: 0 10px 24px rgba(214, 0, 28, .24); } [data-theme="next"] body.vc-page .vc-btn--light { background: #fff; color: #1A1A1A !important; border: 1px solid rgba(26, 26, 26, .12); } [data-theme="next"] body.vc-page .vc-btn--light:hover { border-color: rgba(214, 0, 28, .4); color: #D6001C !important; } [data-theme="next"] body.vc-page .vc-lead { max-width: 80ch; margin: 24px 0 0 !important; font-size: 17px !important; line-height: 1.6 !important; color: #3f3f3f !important; } [data-theme="next"] body.vc-page .vc-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(24px, 3vw, 36px); } [data-theme="next"] body.vc-page .vc-col { padding: 24px; border-radius: var(--r-md); background: #F6F4EF; } [data-theme="next"] body.vc-page .vc-col h4 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px !important; font-size: 18px !important; font-weight: 800 !important; color: #1A1A1A !important; } [data-theme="next"] body.vc-page .vc-col-ico { flex: 0 0 44px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: linear-gradient(145deg, #FFE36B 0%, #FFC42E 55%, #FFA51F 100%); box-shadow: 0 6px 14px rgba(214, 140, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .55); color: #1A1A1A; } [data-theme="next"] body.vc-page .vc-col ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } [data-theme="next"] body.vc-page .vc-col li { position: relative; margin: 0 0 10px !important; padding-left: 20px !important; font-size: 15px; line-height: 1.55; color: #3f3f3f; } [data-theme="next"] body.vc-page .vc-col li:last-child { margin-bottom: 0 !important; } [data-theme="next"] body.vc-page .vc-col li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: #D6001C; } [data-theme="next"] body.vc-page .vc-more-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 40px); border-radius: var(--r-lg); background: radial-gradient(60% 90% at 100% 0%, rgba(255, 209, 0, .22) 0%, rgba(255, 209, 0, 0) 70%), #F6F4EF; } [data-theme="next"] body.vc-page .vc-more-box b { display: block; margin-bottom: 4px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 800; color: #1A1A1A; } [data-theme="next"] body.vc-page .vc-more-box span { display: block; max-width: 64ch; font-size: 15px; line-height: 1.55; color: #6f6f6f; } @media (max-width: 1100px) { [data-theme="next"] body.vc-page .vc-cols { grid-template-columns: 1fr; } } @media (max-width: 600px) { [data-theme="next"] body.vc-page .vc-card { border-radius: var(--r-md) !important; } [data-theme="next"] body.vc-page .vc-actions, [data-theme="next"] body.vc-page .vc-actions .vc-btn, [data-theme="next"] body.vc-page .vc-more-box .vc-btn { width: 100%; } [data-theme="next"] body.vc-page .vc-col { padding: 20px; } [data-theme="next"] body.vc-page .vc-more-box { border-radius: var(--r-md); } } /* поиск: разделы — плитки «Инструментов» главной, свои иконки */ [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/uslugi/"] { --kc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2' fill='%23FFFFFF' fill-opacity='.75' stroke='none'/%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8.5 7V5a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v2M3 12.5h18M10.5 12.5v2h3v-2'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/kalkulyatory/"] { --kc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2' fill='%23FFFFFF' fill-opacity='.75' stroke='none'/%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2'/%3E%3Crect x='8' y='5.5' width='8' height='4' rx='1'/%3E%3Cpath d='M8.5 13h.01M12 13h.01M15.5 13h.01M8.5 16.5h.01M12 16.5h.01M15.5 16.5h.01'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/calendar/"] { --kc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2' fill='%23FFFFFF' fill-opacity='.75' stroke='none'/%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3Cpath d='M8 13.5h2M14 13.5h2M8 17h2'/%3E%3Ccircle cx='15' cy='17' r='1.6'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/blog/"] { --kc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 2.5H14l4.5 4.5v13a1.5 1.5 0 0 1-1.5 1.5H6.5A1.5 1.5 0 0 1 5 20V4a1.5 1.5 0 0 1 1.5-1.5z' fill='%23FFFFFF' fill-opacity='.75' stroke='none'/%3E%3Cpath d='M6.5 2.5H14l4.5 4.5v13a1.5 1.5 0 0 1-1.5 1.5H6.5A1.5 1.5 0 0 1 5 20V4a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Cpath d='M14 2.5V7h4.5M8.5 12h7M8.5 15h7M8.5 18h4'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/novosti/"] { --kc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h13v15a2 2 0 0 0 2 2H6a2 2 0 0 1-2-2z' fill='%23FFFFFF' fill-opacity='.75' stroke='none'/%3E%3Cpath d='M4 4.5h13v15a2 2 0 0 0 2 2H6a2 2 0 0 1-2-2zM17 9h3v10.5a2 2 0 0 1-2 2'/%3E%3Crect x='7' y='7.5' width='7' height='4' rx='.8'/%3E%3Cpath d='M7 14.5h7M7 17.5h5'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/podkast/"] { --kc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='2.5' width='7' height='12' rx='3.5' fill='%23FFFFFF' fill-opacity='.75' stroke='none'/%3E%3Crect x='8.5' y='2.5' width='7' height='12' rx='3.5'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3.5M8.5 21.5h7M8.5 7h2M8.5 10h2'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/guides/"] { --kc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A2 2 0 0 1 6 2.5h13.5v15H6a2 2 0 0 0-2 2z' fill='%23FFFFFF' fill-opacity='.75' stroke='none'/%3E%3Cpath d='M4 19.5v-15a2 2 0 0 1 2-2h13.5v15H6a2 2 0 0 0-2 2 2 2 0 0 0 2 2h13.5v-4'/%3E%3Cpath d='M9 6.5h6M9 9.5h4'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/materialy/"] { --kc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3' width='17' height='18' rx='2' fill='%23FFFFFF' fill-opacity='.75' stroke='none'/%3E%3Crect x='3.5' y='3' width='17' height='18' rx='2'/%3E%3Cpath d='M7 8l1.3 1.3L10.5 7M7 13l1.3 1.3 2.2-2.3M7 18l1.3 1.3 2.2-2.3M13 8.5h4.5M13 13.5h4.5M13 18.5h3'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/meropriyatiya/"] { --kc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.4' fill='%23FFFFFF' fill-opacity='.75' stroke='none'/%3E%3Ccircle cx='9' cy='8' r='3.4'/%3E%3Cpath d='M2.5 20.5a6.5 6.5 0 0 1 13 0'/%3E%3Ccircle cx='17' cy='9' r='2.7'/%3E%3Cpath d='M15.8 14.2A5.5 5.5 0 0 1 21.5 19.5'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page > section.kalc-home { margin-top: var(--sec) !important; } /* вакансии: иконки колонок — жёлтый круг, как у плиток главной */ [data-theme="next"] body.vc-page .vc-col-ico { flex: 0 0 56px !important; width: 56px !important; height: 56px !important; border-radius: 50% !important; background: #FFD100 var(--vc-ic) center / 28px no-repeat !important; box-shadow: 0 6px 16px rgba(214, 150, 0, .28) !important; } [data-theme="next"] body.vc-page .vc-ico-duty { --vc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4' width='15' height='17.5' rx='2' fill='%23FFFFFF' fill-opacity='.75' stroke='none'/%3E%3Crect x='4.5' y='4' width='15' height='17.5' rx='2'/%3E%3Cpath d='M9 2.5h6v3.2H9z'/%3E%3Cpath d='M8 11l1.4 1.4L12 10M8 16l1.4 1.4L12 15M14 11.2h2.5M14 16.2h2.5'/%3E%3C/svg%3E"); } [data-theme="next"] body.vc-page .vc-ico-expect { --vc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='%23FFFFFF' fill-opacity='.75' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Ccircle cx='12' cy='12' r='5.5'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Cpath d='M12 2.5v3M21.5 12h-3'/%3E%3C/svg%3E"); } [data-theme="next"] body.vc-page .vc-ico-offer { --vc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11h16v10H4z' fill='%23FFFFFF' fill-opacity='.75' stroke='none'/%3E%3Cpath d='M4 11h16v10H4zM2.5 7h19v4h-19zM12 7v14'/%3E%3Cpath d='M12 7C10.8 4 7.5 2.8 7 4.8 6.6 6.4 9.5 7 12 7zM12 7c1.2-3 4.5-4.2 5-2.2.4 1.6-2.5 2.2-5 2.2z'/%3E%3C/svg%3E"); } [data-theme="next"] body.vc-page .vc-col h4 { gap: 14px !important; } [data-theme="next"] body.vc-page > section.vc-list { padding-bottom: var(--sec) !important; } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card, [data-theme="next"] body.ps-page .kalc-row > a.kalc-card * { text-decoration: none !important; } /* поиск: знак в углу плитки — маской по контуру, при наведении красный */ [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/uslugi/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8.5 7V5a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v2M3 12.5h18M10.5 12.5v2h3v-2'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/kalkulyatory/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2'/%3E%3Crect x='8' y='5.5' width='8' height='4' rx='1'/%3E%3Cpath d='M8.5 13h.01M12 13h.01M15.5 13h.01M8.5 16.5h.01M12 16.5h.01M15.5 16.5h.01'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/calendar/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2'/%3E%3Cpath d='M3 9.5h18M8 2.5v4M16 2.5v4'/%3E%3Cpath d='M8 13.5h2M14 13.5h2M8 17h2'/%3E%3Ccircle cx='15' cy='17' r='1.6'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/blog/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 2.5H14l4.5 4.5v13a1.5 1.5 0 0 1-1.5 1.5H6.5A1.5 1.5 0 0 1 5 20V4a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Cpath d='M14 2.5V7h4.5M8.5 12h7M8.5 15h7M8.5 18h4'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/novosti/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h13v15a2 2 0 0 0 2 2H6a2 2 0 0 1-2-2zM17 9h3v10.5a2 2 0 0 1-2 2'/%3E%3Crect x='7' y='7.5' width='7' height='4' rx='.8'/%3E%3Cpath d='M7 14.5h7M7 17.5h5'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/podkast/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='2.5' width='7' height='12' rx='3.5'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3.5M8.5 21.5h7M8.5 7h2M8.5 10h2'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/guides/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15a2 2 0 0 1 2-2h13.5v15H6a2 2 0 0 0-2 2 2 2 0 0 0 2 2h13.5v-4'/%3E%3Cpath d='M9 6.5h6M9 9.5h4'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/materialy/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3' width='17' height='18' rx='2'/%3E%3Cpath d='M7 8l1.3 1.3L10.5 7M7 13l1.3 1.3 2.2-2.3M7 18l1.3 1.3 2.2-2.3M13 8.5h4.5M13 13.5h4.5M13 18.5h3'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .kalc-row > a.kalc-card[href$="/meropriyatiya/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.4'/%3E%3Cpath d='M2.5 20.5a6.5 6.5 0 0 1 13 0'/%3E%3Ccircle cx='17' cy='9' r='2.7'/%3E%3Cpath d='M15.8 14.2A5.5 5.5 0 0 1 21.5 19.5'/%3E%3C/svg%3E"); } [data-theme="next"] body.ps-page .ps-kalc .kalc-row > .kalc-card::after { background: #1A1A1A !important; -webkit-mask: var(--kc-wm) center / contain no-repeat; mask: var(--kc-wm) center / contain no-repeat; opacity: .07 !important; transition: opacity .25s ease, transform .35s ease, background-color .25s ease !important; } [data-theme="next"] body.ps-page .ps-kalc .kalc-row > a.kalc-card:hover::after { background: #D6001C !important; opacity: .55 !important; } /* разделы на белом: плитки с тонкой рамкой */ [data-theme="next"] body.ps-page > section.kalc-home.ps-kalc { background: transparent !important; } [data-theme="next"] body.ps-page > section.kalc-home.ps-kalc::before { display: none !important; } [data-theme="next"] body.ps-page .ps-kalc .kalc-row > .kalc-card { background: #fff !important; border: 1px solid rgba(26, 26, 26, .09) !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .04) !important; } [data-theme="next"] body.ps-page .ps-kalc .kalc-row > a.kalc-card:hover { border-color: rgba(214, 0, 28, .25) !important; box-shadow: 0 16px 36px rgba(26, 26, 26, .08) !important; } /* «Ничего не нашлось» — на белом */ [data-theme="next"] body.ps-page .ps-results .sr-empty { background: transparent !important; padding: 8px 0 0 !important; border-radius: 0 !important; } [data-theme="next"] body.ps-page .ps-results .sr-pop a { background: #F6F4EF !important; border-color: transparent !important; } [data-theme="next"] body.ps-page .ps-results .sr-pop a:hover { background: #fff !important; border-color: rgba(214, 0, 28, .35) !important; } [data-theme="next"] body.ps-page .ps-results:not(:empty) { margin-top: 24px !important; } [data-theme="next"] body.ps-page .ps-count:not(:empty) + .ps-results { margin-top: 0 !important; } /* знак при наведении — фирменный красный без прозрачности (с прозрачностью читался розовым) */ [data-theme="next"] body.ps-page .ps-kalc .kalc-row > a.kalc-card:hover::after { background: #D6001C !important; opacity: 1 !important; } /* ════════════════════════════════════════════════════════════ КАЛЕНДАРЬ БУХГАЛТЕРА (body.cl-page) Сроки — из data/calendar-events.json (tools/build-calendar.php). Первый экран как на разводящей; вкладки и фильтры — плашки; ближайший срок — тёмная карточка с отсчётом; список и год — карточки; внизу тёмная плашка с консультацией. ════════════════════════════════════════════════════════════ */ [data-theme="next"] body.cl-page > section.cl-hero, [data-theme="next"] body.cl-page > section.cl-body, [data-theme="next"] body.cl-page > section.cl-help { display: block !important; margin: 0 !important; max-width: none !important; padding: var(--sec) var(--gutter) 0 !important; background: transparent !important; } [data-theme="next"] body.cl-page > section.cl-hero { padding-top: var(--crumbs-top) !important; } [data-theme="next"] body.cl-page > section.cl-help { padding-bottom: var(--sec) !important; } [data-theme="next"] body.cl-page > section > div { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } [data-theme="next"] body.cl-page > section.cl-body { padding-top: clamp(24px, 3vw, 40px) !important; } [data-theme="next"] body.cl-page .cl-crumbs { margin: 0 0 var(--crumbs-gap) !important; color: #8a8a8a !important; } [data-theme="next"] body.cl-page .cl-crumbs a { color: #8a8a8a !important; } [data-theme="next"] body.cl-page .cl-hero h1 { margin: 0 0 12px !important; font-size: clamp(34px, 4.6vw, 64px) !important; font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -.035em !important; color: #1A1A1A !important; } [data-theme="next"] body.cl-page .cl-lead { max-width: 70ch; margin: 0 !important; font-size: clamp(15px, 1.3vw, 19px) !important; line-height: 1.55 !important; color: #6f6f6f !important; } [data-theme="next"] body.cl-page > section.cl-hero > .cl-short { margin-top: 18px !important; padding: 14px 18px !important; border-radius: var(--r-md); border: 1px dashed rgba(26, 26, 26, .2); font-size: 15px; line-height: 1.6; color: #3f3f3f; } [data-theme="next"] body.cl-page .cl-short b { display: inline-block; margin-right: 10px; padding: 3px 8px; border-radius: var(--r-xs); background: #1A1A1A; color: #fff; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; } /* вкладки и фильтры */ [data-theme="next"] body.cl-page .cl-controls { display: flex !important; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px; margin-top: clamp(22px, 2.6vw, 32px) !important; padding: 20px 22px !important; border-radius: var(--r-lg); background: #F6F4EF; } [data-theme="next"] body.cl-page .cal-tabs { display: inline-flex !important; gap: 4px !important; margin: 0 !important; padding: 4px !important; border-radius: var(--r-sm) !important; background: #fff !important; border: 1px solid rgba(26, 26, 26, .08) !important; } [data-theme="next"] body.cl-page .cal-tabs button { min-height: 44px; padding: 0 18px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: #6f6f6f !important; font-family: inherit; font-size: 14.5px !important; font-weight: 800 !important; cursor: pointer; box-shadow: none !important; } [data-theme="next"] body.cl-page .cal-tabs button.active { background: #1A1A1A !important; color: #fff !important; } [data-theme="next"] body.cl-page .cal-filters { display: flex !important; flex-wrap: wrap; gap: 14px 24px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } [data-theme="next"] body.cl-page .cal-fgrp { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px !important; } [data-theme="next"] body.cl-page .cal-fgrp .lab { flex-basis: 100%; margin: 0 0 4px !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #8a8a8a !important; } [data-theme="next"] body.cl-page .cal-chip { min-height: 38px; padding: 0 14px !important; border: 1px solid rgba(26, 26, 26, .1) !important; border-radius: var(--r-pill) !important; background: #fff !important; color: #1A1A1A !important; font-family: inherit; font-size: 14px !important; font-weight: 700 !important; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; } [data-theme="next"] body.cl-page .cal-chip:hover { border-color: rgba(214, 0, 28, .4) !important; } [data-theme="next"] body.cl-page .cal-chip.active { background: #D6001C !important; border-color: #D6001C !important; color: #fff !important; } /* легенда */ [data-theme="next"] body.cl-page .cal-legend { display: flex !important; flex-wrap: wrap; gap: 8px 20px !important; margin: 0 0 16px !important; font-size: 14px !important; color: #6f6f6f !important; } [data-theme="next"] body.cl-page .cal-legend span { display: inline-flex; align-items: center; gap: 8px; } [data-theme="next"] body.cl-page .cal-legend i { width: 12px !important; height: 12px !important; border-radius: 50% !important; } [data-theme="next"] body.cl-page .cal-legend span:first-child i { background: #FFA51F !important; } /* ближайший срок */ [data-theme="next"] body.cl-page .cal-next { position: relative; overflow: hidden; display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 44px) !important; margin: 0 0 16px !important; padding: clamp(24px, 3vw, 40px) !important; border: 0 !important; border-radius: var(--r-lg) !important; background: radial-gradient(50% 90% at 0% 0%, rgba(255, 165, 31, .28) 0%, rgba(255, 165, 31, 0) 70%), radial-gradient(40% 70% at 100% 100%, rgba(214, 0, 28, .25) 0%, rgba(214, 0, 28, 0) 70%), linear-gradient(135deg, #262422 0%, #1A1A1A 60%, #141414 100%) !important; color: #fff !important; box-shadow: 0 24px 56px rgba(20, 20, 20, .18) !important; } [data-theme="next"] body.cl-page .cal-next .cd { display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: clamp(110px, 12vw, 150px); height: clamp(110px, 12vw, 150px); border-radius: 50% !important; background: #FFD100 !important; color: #1A1A1A !important; font-size: clamp(40px, 4.6vw, 60px) !important; font-weight: 800 !important; line-height: 1 !important; box-shadow: 0 0 0 8px rgba(255, 209, 0, .18); } [data-theme="next"] body.cl-page .cal-next .cd small { margin-top: 4px; font-size: 13px !important; font-weight: 700 !important; } [data-theme="next"] body.cl-page .cal-next .lbl { display: inline-flex !important; margin-bottom: 10px !important; padding: 4px 9px !important; border-radius: var(--r-xs) !important; background: #D6001C !important; color: #fff !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } [data-theme="next"] body.cl-page .cal-next h3 { margin: 0 0 8px !important; font-size: clamp(24px, 2.6vw, 38px) !important; font-weight: 800 !important; line-height: 1.1 !important; color: #fff !important; } [data-theme="next"] body.cl-page .cal-next p { margin: 0 !important; font-size: 15.5px !important; line-height: 1.6 !important; color: rgba(255, 255, 255, .75) !important; } /* список */ [data-theme="next"] body.cl-page .cal-list { display: grid !important; gap: 8px !important; margin: 0 !important; } [data-theme="next"] body.cl-page .cal-item { display: grid !important; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 18px !important; margin: 0 !important; padding: 14px 20px 14px 14px !important; border: 1px solid rgba(26, 26, 26, .08) !important; border-radius: var(--r-md) !important; background: #fff !important; box-shadow: none !important; transition: border-color .18s ease, box-shadow .18s ease; } [data-theme="next"] body.cl-page .cal-item:hover { border-color: rgba(214, 0, 28, .25) !important; box-shadow: 0 12px 28px rgba(26, 26, 26, .06) !important; } [data-theme="next"] body.cl-page .cal-idate { display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: 72px !important; height: 72px !important; border-radius: var(--r-sm) !important; background: #F6F4EF !important; color: #1A1A1A !important; } [data-theme="next"] body.cl-page .cal-idate .d { font-size: 28px !important; font-weight: 800 !important; line-height: 1 !important; } [data-theme="next"] body.cl-page .cal-idate .m { margin-top: 2px; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; color: #8a8a8a !important; } [data-theme="next"] body.cl-page .cal-ibody h4 { margin: 0 0 6px !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.35 !important; color: #1A1A1A !important; } [data-theme="next"] body.cl-page .cal-ibody { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } [data-theme="next"] body.cl-page .cal-ibody h4 { flex-basis: 100%; } [data-theme="next"] body.cl-page .cal-tag { display: inline-flex !important; padding: 3px 8px !important; border-radius: var(--r-xs) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .04em !important; text-transform: uppercase !important; } [data-theme="next"] body.cl-page .cal-tag.rep { background: #FFE9B8 !important; color: #8a5a00 !important; } [data-theme="next"] body.cl-page .cal-tag.pay { background: #D6001C !important; color: #fff !important; } [data-theme="next"] body.cl-page .cal-calc { font-size: 13.5px !important; font-weight: 700 !important; color: #D6001C !important; text-decoration: none !important; padding: 0 !important; } [data-theme="next"] body.cl-page .cal-calc::after { content: " →"; } [data-theme="next"] body.cl-page .cal-left { font-size: 13.5px !important; font-weight: 700 !important; color: #8a8a8a !important; white-space: nowrap; } [data-theme="next"] body.cl-page .cal-empty { padding: 24px !important; border-radius: var(--r-md) !important; background: #F6F4EF !important; color: #6f6f6f !important; } [data-theme="next"] body.cl-page .cal-empty b { display: block; margin-bottom: 4px; color: #1A1A1A; } /* весь год */ [data-theme="next"] body.cl-page .cal-year { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(10px, 1.2vw, 16px) !important; } [data-theme="next"] body.cl-page .cal-mon { overflow: hidden; border: 1px solid rgba(26, 26, 26, .08) !important; border-radius: var(--r-md) !important; background: #fff !important; } [data-theme="next"] body.cl-page .cal-mhead { display: flex !important; align-items: center; justify-content: space-between; padding: 14px 18px !important; background: #F6F4EF !important; border: 0 !important; } [data-theme="next"] body.cl-page .cal-mhead .mn { font-size: 17px !important; font-weight: 800 !important; color: #1A1A1A !important; } [data-theme="next"] body.cl-page .cal-mhead .cn { font-size: 12.5px !important; font-weight: 700 !important; color: #8a8a8a !important; } [data-theme="next"] body.cl-page .cal-mhead.hot { background: #1A1A1A !important; } [data-theme="next"] body.cl-page .cal-mhead.hot .mn { color: #fff !important; } [data-theme="next"] body.cl-page .cal-mhead.hot .cn { color: #FFD100 !important; } [data-theme="next"] body.cl-page .cal-mev { padding: 10px 18px 16px !important; } [data-theme="next"] body.cl-page .cal-mev .ev { display: grid !important; grid-template-columns: 26px 10px minmax(0, 1fr); align-items: start; gap: 8px !important; padding: 7px 0 !important; border-bottom: 1px solid rgba(26, 26, 26, .05); font-size: 13.5px !important; line-height: 1.45 !important; } [data-theme="next"] body.cl-page .cal-mev .ev:last-child { border-bottom: 0; } [data-theme="next"] body.cl-page .cal-mev .dt { font-weight: 800 !important; color: #1A1A1A !important; } [data-theme="next"] body.cl-page .cal-mev .dot { width: 8px !important; height: 8px !important; margin-top: 6px; border-radius: 50% !important; } [data-theme="next"] body.cl-page .cal-mev .dot.rep { background: #FFA51F !important; } [data-theme="next"] body.cl-page .cal-mev .dot.pay { background: #D6001C !important; } [data-theme="next"] body.cl-page .cal-mev .tx { color: #3f3f3f !important; } [data-theme="next"] body.cl-page .cal-mon-empty { padding: 8px 0; font-size: 13.5px; color: #9a9a9a; } /* помощь */ [data-theme="next"] body.cl-page .cl-help-plate { position: relative; overflow: hidden; display: grid !important; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 48px); padding: clamp(26px, 3.4vw, 52px) !important; border-radius: var(--r-lg); background: radial-gradient(45% 80% at 85% 50%, rgba(255, 165, 31, .30) 0%, rgba(255, 165, 31, 0) 70%), linear-gradient(135deg, #232120 0%, #1A1A1A 55%, #141414 100%); } [data-theme="next"] body.cl-page .cl-help-text .section-tag { color: rgba(255, 255, 255, .72) !important; } [data-theme="next"] body.cl-page .cl-help-text h2 { margin: 10px 0 10px; font-size: clamp(28px, 3.2vw, 46px); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; color: #fff; } [data-theme="next"] body.cl-page .cl-help-text p { margin: 0; max-width: 48ch; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .72); } [data-theme="next"] body.cl-page .cl-help-actions { display: grid; gap: 10px; } [data-theme="next"] body.cl-page .cl-btn { display: inline-flex !important; align-items: center; justify-content: center; min-height: 54px; padding: 0 26px !important; border-radius: var(--r-sm) !important; font-size: 15.5px !important; font-weight: 800 !important; text-decoration: none !important; } [data-theme="next"] body.cl-page .cl-btn.btn-primary { box-shadow: 0 12px 28px rgba(214, 0, 28, .35); } [data-theme="next"] body.cl-page .cl-btn--ghost { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #FFD100 !important; } [data-theme="next"] body.cl-page .cl-btn--ghost:hover { background: rgba(255, 255, 255, .18); } [data-theme="next"] body.cl-page .cal-note { max-width: 90ch; margin: 18px 0 0 !important; font-size: 13px !important; line-height: 1.6 !important; color: #8a8a8a !important; } @media (max-width: 1100px) { [data-theme="next"] body.cl-page .cal-year { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 900px) { [data-theme="next"] body.cl-page .cl-help-plate { grid-template-columns: 1fr; } } @media (max-width: 600px) { [data-theme="next"] body.cl-page > section.cl-hero, [data-theme="next"] body.cl-page > section.cl-body, [data-theme="next"] body.cl-page > section.cl-help { padding-left: 20px !important; padding-right: 20px !important; } [data-theme="next"] body.cl-page .cl-controls { padding: 16px !important; border-radius: var(--r-md); } [data-theme="next"] body.cl-page .cal-tabs { display: flex !important; width: 100%; } [data-theme="next"] body.cl-page .cal-tabs button { flex: 1; } [data-theme="next"] body.cl-page .cal-next { grid-template-columns: 1fr; text-align: left; border-radius: var(--r-md) !important; } [data-theme="next"] body.cl-page .cal-next .cd { width: 96px; height: 96px; font-size: 38px !important; } [data-theme="next"] body.cl-page .cal-item { grid-template-columns: 58px minmax(0, 1fr); padding: 12px !important; gap: 12px !important; } [data-theme="next"] body.cl-page .cal-idate { width: 58px !important; height: 58px !important; } [data-theme="next"] body.cl-page .cal-idate .d { font-size: 22px !important; } [data-theme="next"] body.cl-page .cal-left { grid-column: 2; margin-top: -4px; } [data-theme="next"] body.cl-page .cal-year { grid-template-columns: 1fr !important; } [data-theme="next"] body.cl-page .cl-help-plate { border-radius: var(--r-md); padding: 26px 22px !important; } [data-theme="next"] body.cl-page .cl-btn { width: 100%; } } [data-theme="next"] body.cl-page .cal-calc::before { content: none !important; display: none !important; } /* календарь: нижний блок — текст с преимуществами и карточка консультации */ [data-theme="next"] body.cl-page .cl-help-plate { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr) !important; align-items: stretch !important; } [data-theme="next"] body.cl-page .cl-help-text { align-self: center; } [data-theme="next"] body.cl-page .cl-help-points { list-style: none; display: grid; gap: 14px; margin: 26px 0 0; padding: 0; } [data-theme="next"] body.cl-page .cl-help-points li { display: flex; align-items: center; gap: 14px; } [data-theme="next"] body.cl-page .cl-help-ico { flex: 0 0 48px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #FFD100; color: #1A1A1A; box-shadow: 0 0 0 6px rgba(255, 209, 0, .12); } [data-theme="next"] body.cl-page .cl-help-points b { display: block; font-size: 16px; font-weight: 800; color: #fff; } [data-theme="next"] body.cl-page .cl-help-points span > span, [data-theme="next"] body.cl-page .cl-help-points li > span:last-child { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .65); } [data-theme="next"] body.cl-page .cl-help-card { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-md); background: #fff; box-shadow: 0 24px 48px rgba(0, 0, 0, .25); } [data-theme="next"] body.cl-page .cl-help-card > b { font-size: clamp(22px, 2vw, 28px); font-weight: 800; line-height: 1.15; color: #1A1A1A; } [data-theme="next"] body.cl-page .cl-help-card > span { font-size: 15px; line-height: 1.55; color: #6f6f6f; } [data-theme="next"] body.cl-page .cl-help-card .cl-btn { margin-top: 10px; width: 100%; } [data-theme="next"] body.cl-page .cl-help-phone { display: flex; flex-direction: column; align-items: center; margin-top: 6px; padding: 12px; border-radius: var(--r-sm); background: #F6F4EF; color: #1A1A1A; font-size: 20px; font-weight: 800; text-decoration: none; transition: background .18s ease, color .18s ease; } [data-theme="next"] body.cl-page .cl-help-phone small { font-size: 12px; font-weight: 700; color: #8a8a8a; } [data-theme="next"] body.cl-page .cl-help-phone:hover { background: #FFF1C2; color: #D6001C; } /* примечание — на всю ширину колонки */ [data-theme="next"] body.cl-page .cal-note { max-width: none !important; } @media (max-width: 900px) { [data-theme="next"] body.cl-page .cl-help-plate { grid-template-columns: 1fr !important; } } /* календарь: нижний блок на светлом жёлтом фоне, форма заявки */ [data-theme="next"] body.cl-page .cl-help-plate { background: radial-gradient(60% 90% at 10% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(135deg, #FFE36B 0%, #FFD100 45%, #FFB52E 100%) !important; box-shadow: 0 24px 56px rgba(214, 150, 0, .22); } [data-theme="next"] body.cl-page .cl-help-text .section-tag { color: #1A1A1A !important; } [data-theme="next"] body.cl-page .cl-help-text .section-tag::before { background: #D6001C !important; } [data-theme="next"] body.cl-page .cl-help-text h2 { color: #1A1A1A !important; } [data-theme="next"] body.cl-page .cl-help-text p { color: rgba(26, 26, 26, .75) !important; } [data-theme="next"] body.cl-page .cl-help-ico { background: #D6001C !important; color: #fff !important; box-shadow: 0 0 0 6px rgba(255, 255, 255, .45) !important; } [data-theme="next"] body.cl-page .cl-help-points b { color: #1A1A1A !important; } [data-theme="next"] body.cl-page .cl-help-points li > span:last-child { color: rgba(26, 26, 26, .68) !important; } [data-theme="next"] body.cl-page .cl-help-card { box-shadow: 0 24px 48px rgba(120, 80, 0, .18) !important; gap: 12px !important; } [data-theme="next"] body.cl-page .cl-field { display: grid; gap: 6px; margin-top: 4px; } [data-theme="next"] body.cl-page .cl-field span { font-size: 13px; font-weight: 700; color: #6f6f6f; } [data-theme="next"] body.cl-page .cl-field input { height: 54px; padding: 0 16px; border: 1px solid rgba(26, 26, 26, .14); border-radius: var(--r-sm); background: #fff; font-family: inherit; font-size: 17px; font-weight: 600; color: #1A1A1A; outline: 0; transition: border-color .18s ease, box-shadow .18s ease; } [data-theme="next"] body.cl-page .cl-field input:focus { border-color: #D6001C; box-shadow: 0 0 0 4px rgba(214, 0, 28, .12); } [data-theme="next"] body.cl-page .cl-help-card .consent-row { margin: 0 !important; font-size: 12px !important; line-height: 1.45 !important; color: #8a8a8a; } [data-theme="next"] body.cl-page .cl-help-card .consent-row a { color: #1A1A1A; } [data-theme="next"] body.cl-page .cl-help-card .cl-btn { margin-top: 2px !important; border: 0; cursor: pointer; font-family: inherit; } [data-theme="next"] body.cl-page .cl-help-phone { flex-direction: row !important; justify-content: center; gap: 6px; margin-top: 0 !important; padding: 10px !important; background: transparent !important; font-size: 14px !important; font-weight: 600 !important; color: #6f6f6f !important; } [data-theme="next"] body.cl-page .cl-help-phone b { color: #1A1A1A; font-weight: 800; } [data-theme="next"] body.cl-page .cl-help-phone:hover b { color: #D6001C; } /* даты в списке — яркие: отчёт жёлтым, платёж красным */ [data-theme="next"] body.cl-page .cal-item:has(.cal-tag.rep) .cal-idate { background: #FFD100 !important; color: #1A1A1A !important; } [data-theme="next"] body.cl-page .cal-item:has(.cal-tag.rep) .cal-idate .m { color: rgba(26, 26, 26, .65) !important; } [data-theme="next"] body.cl-page .cal-item:has(.cal-tag.pay) .cal-idate { background: #D6001C !important; color: #fff !important; } [data-theme="next"] body.cl-page .cal-item:has(.cal-tag.pay) .cal-idate .m { color: rgba(255, 255, 255, .8) !important; } [data-theme="next"] body.cl-page .cl-help-card > * { order: 0 !important; } /* ════════════════════════════════════════════════════════════ ТАРИФЫ — РАСЧЁТ СТОИМОСТИ (body.kk-page) первый экран как на разводящей → опросник слева, панель «Что входит» справа → результат и форма КП → шаги, подкасты и нижняя форма из главной. Цену считает /calc-price.php. ════════════════════════════════════════════════════════════ */ [data-theme="next"] body.kk-page > section.kalk-section { display: block !important; margin: 0 !important; max-width: none !important; padding: var(--crumbs-top) var(--gutter) 0 !important; background: transparent !important; } [data-theme="next"] body.kk-page > section.kalk-section > div { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } [data-theme="next"] body.kk-page .kk-crumbs { margin: 0 0 var(--crumbs-gap) !important; color: #8a8a8a !important; } [data-theme="next"] body.kk-page .kk-crumbs a { color: #8a8a8a !important; } [data-theme="next"] body.kk-page .kalk-head { text-align: left !important; padding: 0 !important; } [data-theme="next"] body.kk-page .kalk-head h1 { max-width: none !important; margin: 0 0 12px !important; font-size: clamp(34px, 4.6vw, 64px) !important; font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -.035em !important; color: #1A1A1A !important; text-align: left !important; } [data-theme="next"] body.kk-page .kalk-sub { max-width: 70ch; margin: 0 !important; font-size: clamp(15px, 1.3vw, 19px) !important; line-height: 1.55 !important; color: #6f6f6f !important; text-align: left !important; } [data-theme="next"] body.kk-page .kk-short { margin-top: 18px; padding: 14px 18px; border-radius: var(--r-md); border: 1px dashed rgba(26, 26, 26, .2); font-size: 15px; line-height: 1.6; color: #3f3f3f; } [data-theme="next"] body.kk-page .kk-short b { display: inline-block; margin-right: 10px; padding: 3px 8px; border-radius: var(--r-xs); background: #1A1A1A; color: #fff; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; } [data-theme="next"] body.kk-page .kk-trust { margin-top: 16px !important; } [data-theme="next"] body.kk-page .kk-trust li { background: #F6F4EF !important; border-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* две колонки: опросник и панель */ [data-theme="next"] body.kk-page .kalk-wrap { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: start; gap: clamp(16px, 2vw, 28px) !important; margin-top: clamp(24px, 3vw, 40px) !important; } [data-theme="next"] body.kk-page #kalk-quiz, [data-theme="next"] body.kk-page #kalk-result { grid-column: 1; grid-row: 1; } [data-theme="next"] body.kk-page .kalk-aside { grid-column: 2; grid-row: 1; } /* опросник */ [data-theme="next"] body.kk-page #kalk-quiz { margin: 0 !important; max-width: none !important; padding: clamp(24px, 3vw, 40px) !important; border: 1px solid rgba(26, 26, 26, .09) !important; border-radius: var(--r-lg) !important; background: #fff !important; box-shadow: 0 20px 48px rgba(26, 26, 26, .06) !important; } [data-theme="next"] body.kk-page .kalk-progress { height: 8px !important; margin: 0 0 10px !important; border-radius: var(--r-pill) !important; background: #F6F4EF !important; overflow: hidden; } [data-theme="next"] body.kk-page .kalk-progress-bar { height: 100% !important; border-radius: var(--r-pill) !important; background: linear-gradient(90deg, #D6001C, #FFA51F) !important; transition: width .35s ease; } [data-theme="next"] body.kk-page .kalk-stepcount { margin: 0 0 18px !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #8a8a8a !important; } [data-theme="next"] body.kk-page .kalk-q { margin: 0 0 6px !important; font-size: clamp(24px, 2.4vw, 34px) !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -.02em; color: #1A1A1A !important; } [data-theme="next"] body.kk-page .kalk-qsub { margin: 0 0 18px !important; font-size: 15px !important; line-height: 1.55 !important; color: #6f6f6f !important; } [data-theme="next"] body.kk-page .kalk-opts { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; margin-top: 18px !important; } [data-theme="next"] body.kk-page .kalk-opt { display: flex !important; align-items: center; gap: 14px !important; width: 100%; min-height: 64px; margin: 0 !important; padding: 14px 16px !important; border: 1px solid rgba(26, 26, 26, .1) !important; border-radius: var(--r-md) !important; background: #fff !important; text-align: left !important; font-family: inherit; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease !important; } [data-theme="next"] body.kk-page .kalk-opt:hover { border-color: rgba(214, 0, 28, .45) !important; box-shadow: 0 10px 24px rgba(26, 26, 26, .06) !important; transform: translateY(-1px); } [data-theme="next"] body.kk-page .kalk-opt.sel { border-color: #D6001C !important; background: #FFF3F4 !important; box-shadow: 0 0 0 3px rgba(214, 0, 28, .1) !important; } [data-theme="next"] body.kk-page .kalk-opt-check { flex: 0 0 22px; width: 22px !important; height: 22px !important; border: 2px solid rgba(26, 26, 26, .2) !important; border-radius: 50% !important; background: #fff !important; position: relative; } [data-theme="next"] body.kk-page .kalk-opt.sel .kalk-opt-check { border-color: #D6001C !important; background: #D6001C !important; } [data-theme="next"] body.kk-page .kalk-opt.sel .kalk-opt-check::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; } [data-theme="next"] body.kk-page .kalk-opt-label { display: block; font-size: 16px !important; font-weight: 800 !important; color: #1A1A1A !important; } [data-theme="next"] body.kk-page .kalk-opt-desc { display: block; margin-top: 2px; font-size: 13.5px !important; line-height: 1.45 !important; color: #6f6f6f !important; } [data-theme="next"] body.kk-page .kalk-input-wrap { position: relative; max-width: 320px; margin-top: 18px !important; } [data-theme="next"] body.kk-page .kalk-num { width: 100%; height: 60px; padding: 0 64px 0 18px !important; border: 2px solid #1A1A1A !important; border-radius: var(--r-md) !important; font-family: inherit; font-size: 22px !important; font-weight: 800 !important; color: #1A1A1A; outline: 0; } [data-theme="next"] body.kk-page .kalk-num:focus { border-color: #D6001C !important; box-shadow: 0 0 0 4px rgba(214, 0, 28, .12); } [data-theme="next"] body.kk-page .kalk-num-unit { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-weight: 700; color: #8a8a8a; } [data-theme="next"] body.kk-page .kalk-live { align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 22px !important; padding: 16px 20px !important; border-radius: var(--r-md) !important; background: #1A1A1A !important; color: #fff !important; } [data-theme="next"] body.kk-page .kalk-live[style*="flex"], [data-theme="next"] body.kk-page .kalk-live[style*="block"] { display: flex !important; } [data-theme="next"] body.kk-page .kalk-live-label { font-size: 13px !important; font-weight: 700 !important; color: rgba(255, 255, 255, .7) !important; } [data-theme="next"] body.kk-page .kalk-live-price { font-size: 26px !important; font-weight: 800 !important; color: #FFD100 !important; } [data-theme="next"] body.kk-page .kalk-nav { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px !important; } [data-theme="next"] body.kk-page .kalk-back { padding: 10px 0 !important; border: 0 !important; background: transparent !important; color: #6f6f6f !important; font-family: inherit; font-size: 15px !important; font-weight: 700 !important; cursor: pointer; } [data-theme="next"] body.kk-page .kalk-back:hover { color: #D6001C !important; } [data-theme="next"] body.kk-page .kalk-next { min-height: 54px; padding: 0 28px !important; border-radius: var(--r-sm) !important; font-size: 16px !important; font-weight: 800 !important; box-shadow: 0 10px 24px rgba(214, 0, 28, .24) !important; } [data-theme="next"] body.kk-page .kalk-next[disabled] { opacity: .45; box-shadow: none !important; } /* панель «Что входит» */ [data-theme="next"] body.kk-page .kalk-aside { position: sticky; top: calc(var(--header-h) + 20px); padding: clamp(24px, 2.6vw, 32px); border-radius: var(--r-lg); background: radial-gradient(60% 50% at 100% 0%, rgba(255, 165, 31, .3) 0%, rgba(255, 165, 31, 0) 70%), linear-gradient(160deg, #262422 0%, #1A1A1A 60%, #141414 100%); color: #fff; } [data-theme="next"] body.kk-page .kalk-aside .section-tag { color: rgba(255, 255, 255, .72) !important; } [data-theme="next"] body.kk-page .kalk-aside h2 { margin: 10px 0 18px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; line-height: 1.1; color: #fff; } [data-theme="next"] body.kk-page .kalk-aside ul { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; } [data-theme="next"] body.kk-page .kalk-aside li { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .65); } [data-theme="next"] body.kk-page .kalk-aside li b { display: block; font-size: 15px; font-weight: 800; color: #fff; } [data-theme="next"] body.kk-page .kk-check { flex: 0 0 26px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #FFD100; color: #1A1A1A; margin-top: 1px; } [data-theme="next"] body.kk-page .kalk-aside-gift { margin-top: 22px; padding: 16px; border-radius: var(--r-md); background: #D6001C; } [data-theme="next"] body.kk-page .kalk-aside-gift b { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 800; color: #fff; } [data-theme="next"] body.kk-page .kalk-aside-gift span { font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .85); } [data-theme="next"] body.kk-page .kalk-aside-phone { display: flex; flex-direction: column; margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, .6); text-decoration: none; } [data-theme="next"] body.kk-page .kalk-aside-phone b { font-size: 20px; font-weight: 800; color: #FFD100; } /* результат */ [data-theme="next"] body.kk-page #kalk-result { margin: 0 !important; max-width: none !important; } [data-theme="next"] body.kk-page .kalk-res-card { padding: clamp(24px, 3vw, 40px) !important; border: 1px solid rgba(26, 26, 26, .09) !important; border-radius: var(--r-lg) !important; background: #fff !important; box-shadow: 0 20px 48px rgba(26, 26, 26, .06) !important; text-align: left !important; } [data-theme="next"] body.kk-page .kalk-res-label { display: inline-flex !important; padding: 4px 9px !important; border-radius: var(--r-xs) !important; background: #1A1A1A !important; color: #fff !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } [data-theme="next"] body.kk-page .kalk-res-price { margin: 12px 0 6px !important; font-size: clamp(40px, 5vw, 64px) !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -.03em; color: #1A1A1A !important; } [data-theme="next"] body.kk-page .kalk-res-price b { color: #D6001C !important; } [data-theme="next"] body.kk-page .kalk-res-price em { font-style: normal; font-size: .45em; color: #6f6f6f; } [data-theme="next"] body.kk-page .kalk-res-note { max-width: 60ch; font-size: 15px !important; line-height: 1.55 !important; color: #6f6f6f !important; } [data-theme="next"] body.kk-page .kalk-compare { margin: 22px 0 !important; padding: 18px 20px !important; border-radius: var(--r-md) !important; background: #F6F4EF !important; } [data-theme="next"] body.kk-page .kalk-compare-row { display: grid !important; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: 14px !important; margin-bottom: 10px !important; font-size: 14px; } [data-theme="next"] body.kk-page .kalk-compare-row .bar { height: 10px !important; border-radius: var(--r-pill) !important; background: #fff !important; overflow: hidden; } [data-theme="next"] body.kk-page .kalk-compare-row .bar i { display: block; height: 100%; border-radius: inherit; } [data-theme="next"] body.kk-page .kalk-compare-row .bar-grey i { width: 100%; background: #bdbdbd !important; } [data-theme="next"] body.kk-page .kalk-compare-row .bar-red i { background: #D6001C !important; } [data-theme="next"] body.kk-page .kalk-save { margin-top: 6px !important; font-size: 14px !important; line-height: 1.5 !important; color: #3f3f3f !important; } [data-theme="next"] body.kk-page .kalk-save b { color: #D6001C; } [data-theme="next"] body.kk-page .kalk-breakdown { display: grid !important; margin: 0 0 22px !important; border-top: 1px solid rgba(26, 26, 26, .08); } [data-theme="next"] body.kk-page .kalk-bd-row { display: flex !important; justify-content: space-between; gap: 16px; padding: 12px 0 !important; border-bottom: 1px solid rgba(26, 26, 26, .08) !important; font-size: 14.5px !important; } [data-theme="next"] body.kk-page .kalk-bd-row span { color: #6f6f6f; } [data-theme="next"] body.kk-page .kalk-bd-row b { text-align: right; color: #1A1A1A; } [data-theme="next"] body.kk-page .kalk-vsbank { margin: 0 0 22px !important; padding: 20px !important; border-radius: var(--r-md) !important; background: #F6F4EF !important; border: 0 !important; } [data-theme="next"] body.kk-page .kalk-vsbank h4 { margin: 0 0 12px !important; font-size: 17px !important; font-weight: 800 !important; color: #1A1A1A !important; } [data-theme="next"] body.kk-page .kalk-vsbank-row { display: flex !important; align-items: flex-start; gap: 10px !important; margin-bottom: 10px !important; font-size: 14.5px !important; line-height: 1.5 !important; color: #3f3f3f !important; } [data-theme="next"] body.kk-page .kalk-vsbank-row svg circle { fill: #D6001C !important; } [data-theme="next"] body.kk-page .kalk-vsbank-row svg { flex: 0 0 18px; margin-top: 2px; } [data-theme="next"] body.kk-page .kalk-vsbank-note { font-size: 13px !important; line-height: 1.5 !important; color: #8a8a8a !important; } [data-theme="next"] body.kk-page .kalk-lead { padding: clamp(20px, 2.4vw, 28px) !important; border-radius: var(--r-md) !important; background: radial-gradient(60% 90% at 10% 0%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(135deg, #FFE36B 0%, #FFD100 45%, #FFB52E 100%) !important; border: 0 !important; } [data-theme="next"] body.kk-page .kalk-lead h3 { margin: 0 0 6px !important; font-size: clamp(20px, 2vw, 26px) !important; font-weight: 800 !important; color: #1A1A1A !important; } [data-theme="next"] body.kk-page .kalk-lead p { margin: 0 0 14px !important; font-size: 14.5px !important; line-height: 1.5 !important; color: rgba(26, 26, 26, .75) !important; } [data-theme="next"] body.kk-page .kalk-lead .kalk-input { width: 100%; height: 52px; margin: 0 0 10px !important; padding: 0 16px !important; border: 1px solid rgba(26, 26, 26, .12) !important; border-radius: var(--r-sm) !important; background: #fff !important; font-family: inherit; font-size: 16px !important; outline: 0; } [data-theme="next"] body.kk-page .kalk-lead .kalk-input:focus { border-color: #D6001C !important; box-shadow: 0 0 0 4px rgba(214, 0, 28, .12); } [data-theme="next"] body.kk-page .kalk-lead .consent-row { margin: 4px 0 12px !important; font-size: 12px !important; color: rgba(26, 26, 26, .7) !important; } [data-theme="next"] body.kk-page .kalk-submit { width: 100%; min-height: 54px; border-radius: var(--r-sm) !important; font-size: 16px !important; font-weight: 800 !important; } [data-theme="next"] body.kk-page .kalk-submit.is-disabled { opacity: .55; } [data-theme="next"] body.kk-page .kalk-restart { display: inline-flex !important; margin-top: 16px !important; color: #6f6f6f !important; font-weight: 700 !important; } [data-theme="next"] body.kk-page .kalk-restart:hover { color: #D6001C !important; } /* блоки главной ниже — отступы по системе */ [data-theme="next"] body.kk-page > section.steps { padding-top: var(--sec) !important; } @media (max-width: 1100px) { [data-theme="next"] body.kk-page .kalk-wrap { grid-template-columns: 1fr; } [data-theme="next"] body.kk-page .kalk-aside { grid-column: 1; grid-row: 2; position: static; } } @media (max-width: 600px) { [data-theme="next"] body.kk-page > section.kalk-section { padding-left: 20px !important; padding-right: 20px !important; } [data-theme="next"] body.kk-page #kalk-quiz, [data-theme="next"] body.kk-page .kalk-res-card { padding: 20px !important; border-radius: var(--r-md) !important; } [data-theme="next"] body.kk-page .kalk-opts { grid-template-columns: 1fr; } [data-theme="next"] body.kk-page .kalk-opt:hover { transform: none; } [data-theme="next"] body.kk-page .kalk-nav .kalk-next { flex: 1; } [data-theme="next"] body.kk-page .kalk-compare-row { grid-template-columns: 1fr auto; } [data-theme="next"] body.kk-page .kalk-compare-row .bar { grid-column: 1 / -1; grid-row: 2; } [data-theme="next"] body.kk-page .kalk-aside { border-radius: var(--r-md); } } [data-theme="next"] body.kk-page .kalk-wrap { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; } /* ── Липкие блоки на всём сайте ────────────────────────────── overflow-x: hidden у html/body делает body отдельной областью прокрутки, которая никогда не прокручивается, — position: sticky внутри перестаёт работать. clip прячет выход за край так же, но области прокрутки не создаёт. hidden — запасной вариант для старых браузеров без clip. */ html[data-theme="next"], [data-theme="next"] body { overflow-x: hidden !important; } @supports (overflow-x: clip) { html[data-theme="next"], [data-theme="next"] body { overflow-x: clip !important; overflow-y: visible !important; } } /* тарифы — правки: иконки панели, кнопка КП, подкасты, сравнение */ [data-theme="next"] body.kk-page .kk-check { flex: 0 0 36px !important; width: 36px !important; height: 36px !important; border-radius: var(--r-sm) !important; margin-top: -2px !important; } [data-theme="next"] body.kk-page .kalk-aside li { align-items: center !important; } /* кнопка КП: красная; пока нет согласия — тёмная (на жёлтом читается чётко) */ [data-theme="next"] body.kk-page .kalk-submit { background: #D6001C !important; color: #fff !important; border: 0 !important; opacity: 1 !important; box-shadow: 0 12px 28px rgba(214, 0, 28, .3) !important; cursor: pointer; } [data-theme="next"] body.kk-page .kalk-submit:hover { background: #B00017 !important; } [data-theme="next"] body.kk-page .kalk-submit.is-disabled { background: #1A1A1A !important; color: rgba(255, 255, 255, .85) !important; box-shadow: none !important; } [data-theme="next"] body.kk-page .kalk-submit.is-disabled::after { content: " — отметьте согласие"; font-weight: 600; color: rgba(255, 255, 255, .55); } /* подкасты на белом */ [data-theme="next"] body.kk-page > section.podcast-home { background: transparent !important; } [data-theme="next"] body.kk-page > section.podcast-home::before, [data-theme="next"] body.kk-page > section.podcast-home::after { display: none !important; } /* сравнение со штатным бухгалтером — две карточки и крупная экономия */ [data-theme="next"] body.kk-page .kalk-compare { padding: 0 !important; background: transparent !important; } [data-theme="next"] body.kk-page .kc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } [data-theme="next"] body.kk-page .kc-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 20px; border-radius: var(--r-md); } [data-theme="next"] body.kk-page .kc-card--staff { background: #F6F4EF; } [data-theme="next"] body.kk-page .kc-card--us { background: radial-gradient(70% 80% at 100% 0%, rgba(255, 165, 31, .35) 0%, rgba(255, 165, 31, 0) 70%), linear-gradient(160deg, #262422 0%, #1A1A1A 60%, #141414 100%); box-shadow: 0 14px 32px rgba(26, 26, 26, .2); } [data-theme="next"] body.kk-page .kc-lbl { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8a8a8a; } [data-theme="next"] body.kk-page .kc-card--us .kc-lbl { color: #FFD100; } [data-theme="next"] body.kk-page .kc-sum { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: #8a8a8a; text-decoration: line-through; text-decoration-color: rgba(214, 0, 28, .6); text-decoration-thickness: 2px; } [data-theme="next"] body.kk-page .kc-card--us .kc-sum { color: #fff; text-decoration: none; } [data-theme="next"] body.kk-page .kc-sub { font-size: 13px; line-height: 1.4; color: #8a8a8a; } [data-theme="next"] body.kk-page .kc-card--us .kc-sub { color: rgba(255, 255, 255, .65); } [data-theme="next"] body.kk-page .kc-card .bar { height: 8px !important; margin-top: 12px; border-radius: var(--r-pill) !important; background: rgba(26, 26, 26, .08) !important; overflow: hidden; } [data-theme="next"] body.kk-page .kc-card--us .bar { background: rgba(255, 255, 255, .12) !important; } [data-theme="next"] body.kk-page .kc-card .bar i { display: block; height: 100%; border-radius: inherit; } [data-theme="next"] body.kk-page .kc-card .bar-grey i { width: 100%; background: #bdbdbd !important; } [data-theme="next"] body.kk-page .kc-card .bar-red i { width: 0; background: linear-gradient(90deg, #D6001C, #FFA51F) !important; transition: width .8s cubic-bezier(.2, .8, .2, 1); } [data-theme="next"] body.kk-page .kalk-compare .kalk-save { display: flex !important; align-items: center; gap: 14px; margin-top: 10px !important; padding: 14px 18px !important; border-radius: var(--r-md); background: #FFF3F4; font-size: 14px !important; line-height: 1.45 !important; color: #3f3f3f !important; } [data-theme="next"] body.kk-page .kc-pct { flex: 0 0 auto; padding: 6px 12px; border-radius: var(--r-sm); background: #D6001C; color: #fff; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.02em; } @media (max-width: 600px) { [data-theme="next"] body.kk-page .kc-grid { grid-template-columns: 1fr; } [data-theme="next"] body.kk-page .kalk-compare .kalk-save { flex-direction: column; align-items: flex-start; } } @media (max-width: 1100px) { [data-theme="next"] body.kk-page .kalk-wrap { grid-template-columns: minmax(0, 1fr) !important; } } /* тарифы — 3-й круг */ [data-theme="next"] body.kk-page .kalk-submit.is-disabled::after { content: none !important; } /* «Чем лучше банка» — иконки по смыслу */ [data-theme="next"] body.kk-page .kalk-vsbank-row { align-items: center !important; gap: 12px !important; } [data-theme="next"] body.kk-page .kalk-vs-ico { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: #fff; color: #D6001C; box-shadow: 0 1px 2px rgba(26, 26, 26, .06); } /* «Пересчитать заново» — строка перед формой КП */ [data-theme="next"] body.kk-page .kalk-restart-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; padding: 12px 12px 12px 18px; border: 1px dashed rgba(26, 26, 26, .18); border-radius: var(--r-md); font-size: 14.5px; color: #6f6f6f; } [data-theme="next"] body.kk-page .kalk-restart { display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; margin: 0 !important; padding: 0 18px !important; border: 1px solid rgba(26, 26, 26, .12) !important; border-radius: var(--r-sm) !important; background: #fff !important; color: #1A1A1A !important; font-family: inherit; font-size: 14.5px !important; font-weight: 800 !important; text-decoration: none !important; cursor: pointer; transition: border-color .18s ease, color .18s ease; } [data-theme="next"] body.kk-page .kalk-restart:hover { border-color: rgba(214, 0, 28, .4) !important; color: #D6001C !important; } @media (max-width: 600px) { [data-theme="next"] body.kk-page .kalk-restart-row { padding: 12px; } [data-theme="next"] body.kk-page .kalk-restart { width: 100%; justify-content: center; } } /* «Из чего складывается цена» — четыре шага на всю ширину */ @media (min-width: 1101px) { [data-theme="next"] body.kk-page .steps-track { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; max-width: none !important; width: 100% !important; } } @media (min-width: 1101px) { [data-theme="next"] body.kk-page > section.steps > .steps-track.kalk-steps-track { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* тарифы: предварительная цена в панели */ [data-theme="next"] body.kk-page .kalk-aside-price[hidden] { display: none !important; } [data-theme="next"] body.kk-page .kalk-aside-price { display: flex; flex-direction: column; gap: 2px; margin: 0 0 22px; padding: 16px 18px; border-radius: var(--r-md); background: #FFD100; color: #1A1A1A; } [data-theme="next"] body.kk-page .kalk-aside-price > span { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: rgba(26, 26, 26, .65); } [data-theme="next"] body.kk-page .kalk-aside-price b { font-size: clamp(26px, 2.4vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: #1A1A1A; } [data-theme="next"] body.kk-page .kalk-aside-price small { font-size: 12.5px; color: rgba(26, 26, 26, .6); } [data-theme="next"] body.kk-page .kalk-aside-price.is-bump b { animation: kkBump .45s ease; } @keyframes kkBump { 0% { transform: scale(1); } 40% { transform: scale(1.06); color: #D6001C; } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { [data-theme="next"] body.kk-page .kalk-aside-price.is-bump b { animation: none; } } /* тарифы: степпер числа сотрудников */ [data-theme="next"] body.kk-page .kalk-input-wrap { display: flex !important; align-items: center; gap: 14px !important; max-width: none !important; margin-top: 20px !important; position: static !important; } [data-theme="next"] body.kk-page .kalk-stepper { display: inline-flex; align-items: stretch; height: 60px; border: 2px solid #1A1A1A; border-radius: var(--r-md); background: #fff; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease; } [data-theme="next"] body.kk-page .kalk-stepper:focus-within { border-color: #D6001C; box-shadow: 0 0 0 4px rgba(214, 0, 28, .12); } [data-theme="next"] body.kk-page .kalk-step-btn { flex: 0 0 56px; width: 56px; border: 0; background: #F6F4EF; color: #1A1A1A; font-family: inherit; font-size: 24px; font-weight: 700; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease; } @media (hover: hover) { [data-theme="next"] body.kk-page .kalk-step-btn:hover { background: #D6001C; color: #fff; } } [data-theme="next"] body.kk-page .kalk-step-btn:active { background: #D6001C; color: #fff; } [data-theme="next"] body.kk-page .kalk-stepper .kalk-num { flex: 0 0 96px; width: 96px !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 8px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: center; font-size: 24px !important; font-weight: 800 !important; -moz-appearance: textfield; } [data-theme="next"] body.kk-page .kalk-stepper .kalk-num:focus { box-shadow: none !important; } [data-theme="next"] body.kk-page .kalk-stepper .kalk-num::-webkit-inner-spin-button, [data-theme="next"] body.kk-page .kalk-stepper .kalk-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } [data-theme="next"] body.kk-page .kalk-num-unit { position: static !important; transform: none !important; font-size: 15px !important; font-weight: 700 !important; color: #6f6f6f !important; } [data-theme="next"] body.kk-page .kalk-step .kalk-input-wrap + .kalk-qsub { margin: 10px 0 0 !important; font-size: 13.5px !important; } /* тарифы: плашка «Примерная стоимость» — ровно по центру */ [data-theme="next"] body.kk-page .kalk-live { align-items: center !important; min-height: 64px; padding: 12px 22px !important; box-shadow: none !important; } [data-theme="next"] body.kk-page .kalk-live::before { display: none !important; } [data-theme="next"] body.kk-page .kalk-live-label { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; line-height: 1 !important; } [data-theme="next"] body.kk-page .kalk-live-price { line-height: 1 !important; margin: 0 !important; } @media (max-width: 600px) { [data-theme="next"] body.kk-page .kalk-input-wrap { flex-wrap: wrap; } [data-theme="next"] body.kk-page .kalk-stepper { flex: 1 1 auto; } [data-theme="next"] body.kk-page .kalk-stepper .kalk-num { flex: 1 1 auto; width: auto !important; } [data-theme="next"] body.kk-page .kalk-live { flex-direction: column; align-items: flex-start !important; gap: 6px !important; } } /* тарифы: цена без дублей — на ПК в панели, на планшете и телефоне под вопросом */ @media (min-width: 1101px) { [data-theme="next"] body.kk-page #kalk-live { display: none !important; } } @media (max-width: 1100px) { [data-theme="next"] body.kk-page .kalk-aside-price { display: none !important; } } /* цена в панели: цифры не разрываются, «₽/мес» мельче */ [data-theme="next"] body.kk-page .kalk-aside-price b { font-size: clamp(24px, 2vw, 30px) !important; white-space: nowrap; } [data-theme="next"] body.kk-page .kalk-aside-price b span { white-space: nowrap; } [data-theme="next"] body.kk-page .kalk-aside-price b em { font-style: normal; font-size: .55em; font-weight: 700; color: rgba(26, 26, 26, .65); } /* под вопросом: крупные суммы и «Индивидуальный расчёт» переносятся аккуратно */ [data-theme="next"] body.kk-page .kalk-live { flex-wrap: wrap; row-gap: 6px !important; } [data-theme="next"] body.kk-page .kalk-live-price { white-space: normal !important; overflow-wrap: anywhere; font-size: clamp(20px, 2.4vw, 26px) !important; } /* тарифы: подсказка в поле — тихий прочерк; неактивная «Далее» — серая, не розовая */ [data-theme="next"] body.kk-page .kalk-stepper .kalk-num::placeholder { color: #c4c0b8; font-weight: 700; } [data-theme="next"] body.kk-page .kalk-next[disabled], [data-theme="next"] body.kk-page .kalk-next.is-disabled { opacity: 1 !important; background: #E9E6DF !important; color: #9a9a9a !important; box-shadow: none !important; cursor: not-allowed; transform: none !important; } [data-theme="next"] body.kk-page .kalk-aside-price b span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; } [data-theme="next"] body.kk-page .kalk-aside-price b { text-transform: none; } /* ── тарифы: баннер Сбера над первым экраном ────────────────── Отдельный класс, не epd-banner: tools/epd-slides.php перезаписывает любые блоки epd-banner общими объявлениями. */ [data-theme="next"] body.kk-page > section.kk-sber-banner { position: relative; overflow: hidden; margin: calc(var(--header-h) - 1px) 0 0 !important; padding: 18px var(--gutter) !important; background: radial-gradient(40% 140% at 0% 50%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(100deg, #0E7A3A 0%, #1A9F4B 45%, #21A038 70%, #12A79B 100%) !important; color: #fff; } [data-theme="next"] body.kk-page .kk-sber-words { position: absolute; inset: 0; pointer-events: none; } [data-theme="next"] body.kk-page .kk-sber-words span { position: absolute; white-space: nowrap; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .10); } [data-theme="next"] body.kk-page .kk-sber-inner { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px clamp(18px, 2.4vw, 36px); max-width: none !important; margin: 0 !important; padding: 0 !important; } [data-theme="next"] body.kk-page .kk-sber-logo { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: var(--r-pill); background: #fff; box-shadow: 0 6px 16px rgba(0, 60, 20, .2); } [data-theme="next"] body.kk-page .kk-sber-logo img { display: block; width: 120px; height: auto; } [data-theme="next"] body.kk-page .kk-sber-text b { display: block; margin-bottom: 4px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; line-height: 1.2; color: #fff; } [data-theme="next"] body.kk-page .kk-sber-text span { display: block; max-width: 70ch; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .85); } [data-theme="next"] body.kk-page .kk-sber-actions { display: flex; align-items: center; gap: 18px; } [data-theme="next"] body.kk-page .kk-sber-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: var(--r-sm); background: #fff; color: #0E7A3A; font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 24px rgba(0, 60, 20, .25); transition: transform .18s ease, box-shadow .18s ease; } [data-theme="next"] body.kk-page .kk-sber-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 60, 20, .3); } [data-theme="next"] body.kk-page .kk-sber-link { color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; opacity: .9; } [data-theme="next"] body.kk-page .kk-sber-link:hover { opacity: 1; text-decoration: underline; } /* после баннера первый экран — с отступом, как у страниц с полосой объявлений */ [data-theme="next"] body.kk-page > section.kk-sber-banner + section.kalk-section { padding-top: 44px !important; } @media (max-width: 1100px) { [data-theme="next"] body.kk-page .kk-sber-inner { grid-template-columns: auto minmax(0, 1fr); } [data-theme="next"] body.kk-page .kk-sber-actions { grid-column: 1 / -1; } } @media (max-width: 600px) { [data-theme="next"] body.kk-page > section.kk-sber-banner { padding: 20px !important; } [data-theme="next"] body.kk-page .kk-sber-inner { grid-template-columns: 1fr; } [data-theme="next"] body.kk-page .kk-sber-logo { justify-self: start; } [data-theme="next"] body.kk-page .kk-sber-actions { flex-direction: column; align-items: stretch; gap: 10px; } [data-theme="next"] body.kk-page .kk-sber-btn { width: 100%; } [data-theme="next"] body.kk-page .kk-sber-link { text-align: center; } [data-theme="next"] body.kk-page > section.kk-sber-banner + section.kalk-section { padding-top: 30px !important; } } /* ── Плитки «Инструментов» на белом (модификатор kalc-home--white) ── Как на поиске: белые плитки в рамке, знак в углу — маской по контуру иконки, при наведении фирменный красный. */ [data-theme="next"] .kalc-home--white .kalc-row > a.kalc-card[href$="/kalkulyatory/nds/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' color='%231A1A1A'%3E%3Cpath d='M6 2.5h12v19l-2-1.3-2 1.3-2-1.3-2 1.3-2-1.3-2 1.3z'/%3E%3Cpath d='M9 15l6-6'/%3E%3Ccircle cx='9.6' cy='9.4' r='1.3'/%3E%3Ccircle cx='14.4' cy='14.6' r='1.3'/%3E%3C/svg%3E"); } [data-theme="next"] .kalc-home--white .kalc-row > a.kalc-card[href$="/kalkulyatory/usn/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' color='%231A1A1A'%3E%3Cpath d='M6.5 2.5H14l4.5 4.5v13a1.5 1.5 0 0 1-1.5 1.5H6.5A1.5 1.5 0 0 1 5 20V4a1.5 1.5 0 0 1 1.5-1.5z'/%3E%3Cpath d='M14 2.5V7h4.5'/%3E%3Cpath d='M10.5 18.5v-8h3a2.2 2.2 0 0 1 0 4.4h-4.3M9.2 16.8h4.3'/%3E%3C/svg%3E"); } [data-theme="next"] .kalc-home--white .kalc-row > a.kalc-card[href$="/kalkulyatory/patent/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' color='%231A1A1A'%3E%3Crect x='2.5' y='4' width='19' height='13' rx='1.5'/%3E%3Cpath d='M6.5 8.5h7M6.5 11.5h4.5'/%3E%3Cpath d='M14.8 17.3l-1 4.2 2.7-1.4 2.7 1.4-1-4.2'/%3E%3Ccircle cx='16.5' cy='14.5' r='3.2'/%3E%3C/svg%3E"); } [data-theme="next"] .kalc-home--white .kalc-row > a.kalc-card[href$="/kalkulyatory/ausn/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' color='%231A1A1A'%3E%3Cpath d='M13.5 2L5 13.5h6.2L10 22l8.8-12h-6.3z'/%3E%3C/svg%3E"); } [data-theme="next"] .kalc-home--white .kalc-row > a.kalc-card[href$="/kalkulyatory/vznosy-ip/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' color='%231A1A1A'%3E%3Ccircle cx='9' cy='7.5' r='3.6'/%3E%3Cpath d='M2.8 20.5c.5-3.8 3.1-6.3 6.2-6.3 1.3 0 2.5.4 3.4 1.1'/%3E%3Ccircle cx='17.3' cy='16.8' r='4.4'/%3E%3Cpath d='M16.1 19v-4.4h1.8a1.3 1.3 0 0 1 0 2.6h-2.5M15.4 18h2.6'/%3E%3C/svg%3E"); } [data-theme="next"] .kalc-home--white .kalc-row > a.kalc-card[href$="/kalkulyatory/summa-propisyu/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' color='%231A1A1A'%3E%3Cpath d='M14.5 4.5l5 5L10 19H5v-5z'/%3E%3Cpath d='M12.3 6.7l5 5M3 21.5h9'/%3E%3C/svg%3E"); } [data-theme="next"] .kalc-home--white .kalc-row > a.kalc-card[href$="/kalkulyatory/ndfl/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' color='%231A1A1A'%3E%3Cpath d='M5.5 7V5.8A2.3 2.3 0 0 1 8.4 3.6L17.5 6'/%3E%3Crect x='3' y='7' width='18' height='13.5' rx='2'/%3E%3Cpath d='M21 11.5h-4a2.3 2.3 0 0 0 0 4.6h4'/%3E%3Ccircle cx='17' cy='13.8' r='.9' fill='%231A1A1A' stroke='none'/%3E%3C/svg%3E"); } [data-theme="next"] .kalc-home--white .kalc-row > a.kalc-card[href$="/kalkulyatory/alimenty/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' color='%231A1A1A'%3E%3Ccircle cx='8' cy='6' r='3.2'/%3E%3Cpath d='M2.8 21v-2.8A5.2 5.2 0 0 1 8 13a5.2 5.2 0 0 1 3.6 1.4'/%3E%3Ccircle cx='16.8' cy='12' r='2.5'/%3E%3Cpath d='M12.6 21v-1.3a4.2 4.2 0 0 1 8.4 0V21'/%3E%3C/svg%3E"); } [data-theme="next"] .kalc-home--white .kalc-row > a.kalc-card[href$="/kalkulyatory/vznosy-sotrudniki/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' color='%231A1A1A'%3E%3Ccircle cx='8' cy='8' r='3.2'/%3E%3Ccircle cx='16.5' cy='8' r='3.2'/%3E%3Cpath d='M2.5 20a5.5 5.5 0 0 1 11 0M11 16.2a5.5 5.5 0 0 1 10.5 3.8'/%3E%3C/svg%3E"); } [data-theme="next"] .kalc-home--white .kalc-row > a.kalc-card[href$="/kalkulyatory/"] { --kc-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2.5' width='14' height='19' rx='2'/%3E%3Crect x='8' y='5.5' width='8' height='4' rx='1'/%3E%3Cpath d='M8.5 13h.01M12 13h.01M15.5 13h.01M8.5 16.5h.01M12 16.5h.01M15.5 16.5h.01'/%3E%3C/svg%3E"); } [data-theme="next"] body > section.kalc-home.kalc-home--white { background: transparent !important; } [data-theme="next"] body > section.kalc-home.kalc-home--white::before { display: none !important; } [data-theme="next"] .kalc-home--white .kalc-row > .kalc-card { background: #fff !important; border: 1px solid rgba(26, 26, 26, .09) !important; box-shadow: 0 1px 2px rgba(26, 26, 26, .04) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } [data-theme="next"] .kalc-home--white .kalc-row > a.kalc-card:hover { border-color: rgba(214, 0, 28, .25) !important; box-shadow: 0 16px 36px rgba(26, 26, 26, .08) !important; } [data-theme="next"] .kalc-home--white .kalc-row > .kalc-card::after { background: #1A1A1A !important; -webkit-mask: var(--kc-wm) center / contain no-repeat; mask: var(--kc-wm) center / contain no-repeat; opacity: .07 !important; transition: opacity .25s ease, transform .35s ease, background-color .25s ease !important; } [data-theme="next"] .kalc-home--white .kalc-row > a.kalc-card:hover::after { background: #D6001C !important; opacity: 1 !important; } [data-theme="next"] .kalc-home--white .kalc-row > a.kalc-card, [data-theme="next"] .kalc-home--white .kalc-row > a.kalc-card * { text-decoration: none !important; } /* ════════════════════════════════════════════════════════════ КАЛЬКУЛЯТОРЫ — РАЗВОДЯЩАЯ (body.kh-page) ════════════════════════════════════════════════════════════ */ [data-theme="next"] body.kh-page > section.kh-hero, [data-theme="next"] body.kh-page > section.kh-main, [data-theme="next"] body.kh-page > section.kh-cta, [data-theme="next"] body.kh-page > section.kh-how { display: block !important; margin: 0 !important; max-width: none !important; padding: var(--sec) var(--gutter) 0 !important; background: transparent !important; } [data-theme="next"] body.kh-page > section.kh-hero { padding-top: var(--crumbs-top) !important; } [data-theme="next"] body.kh-page > section.kh-main { padding-top: clamp(24px, 3vw, 40px) !important; } [data-theme="next"] body.kh-page > section > div, [data-theme="next"] body.kh-page > section > a { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } [data-theme="next"] body.kh-page > section.kh-hero > div, [data-theme="next"] body.kh-page > section.kh-cta > div, [data-theme="next"] body.kh-page > section.kh-how > div { padding-left: 0 !important; padding-right: 0 !important; } [data-theme="next"] body.kh-page .kh-crumbs { margin: 0 0 var(--crumbs-gap) !important; color: #8a8a8a !important; } [data-theme="next"] body.kh-page .kh-crumbs a { color: #8a8a8a !important; } [data-theme="next"] body.kh-page .kh-hero h1 { margin: 0 0 12px !important; font-size: clamp(34px, 4.6vw, 64px) !important; font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -.035em !important; color: #1A1A1A !important; } [data-theme="next"] body.kh-page .kh-lead { max-width: 70ch; margin: 0 !important; font-size: clamp(15px, 1.3vw, 19px) !important; line-height: 1.55 !important; color: #6f6f6f !important; } [data-theme="next"] body.kh-page > section.kh-hero > .kh-short { margin-top: 18px !important; padding: 14px 18px !important; border-radius: var(--r-md); border: 1px dashed rgba(26, 26, 26, .2); font-size: 15px; line-height: 1.6; color: #3f3f3f; } [data-theme="next"] body.kh-page .kh-short b { display: inline-block; margin-right: 10px; padding: 3px 8px; border-radius: var(--r-xs); background: #1A1A1A; color: #fff; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; } [data-theme="next"] body.kh-page .kh-trust { margin-top: 16px !important; } [data-theme="next"] body.kh-page .kh-trust li { background: #F6F4EF !important; border-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* главный калькулятор — жёлтая плашка */ [data-theme="next"] body.kh-page .khub-hero { position: relative; overflow: hidden; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: clamp(26px, 3.4vw, 48px) !important; border-radius: var(--r-lg) !important; background: radial-gradient(60% 90% at 10% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(135deg, #FFE36B 0%, #FFD100 45%, #FFB52E 100%) !important; box-shadow: 0 24px 56px rgba(214, 150, 0, .22) !important; border: 0 !important; text-decoration: none !important; color: #1A1A1A !important; transition: transform .22s ease, box-shadow .22s ease; } [data-theme="next"] body.kh-page .khub-hero:hover { transform: translateY(-3px); box-shadow: 0 30px 64px rgba(214, 150, 0, .3) !important; } [data-theme="next"] body.kh-page .kh-hero-tag { display: inline-flex; padding: 4px 9px; border-radius: var(--r-xs); background: #1A1A1A; color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } [data-theme="next"] body.kh-page .kh-hero-txt h2 { margin: 14px 0 10px !important; max-width: 22ch; font-size: clamp(26px, 3.2vw, 44px) !important; font-weight: 800 !important; line-height: 1.06 !important; letter-spacing: -.025em; color: #1A1A1A !important; } [data-theme="next"] body.kh-page .kh-hero-txt p { max-width: 56ch; margin: 0 0 22px !important; font-size: 16px !important; line-height: 1.55 !important; color: rgba(26, 26, 26, .75) !important; } [data-theme="next"] body.kh-page .kh-hero-btn { display: inline-flex; align-items: center; min-height: 54px; padding: 0 26px; border-radius: var(--r-sm); background: #D6001C; color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 12px 28px rgba(214, 0, 28, .3); } [data-theme="next"] body.kh-page .khub-hero:hover .kh-hero-btn { background: #B00017; } [data-theme="next"] body.kh-page .kh-hero-pic { width: clamp(140px, 16vw, 220px); } [data-theme="next"] body.kh-page .kh-hero-pic svg { width: 100%; height: auto; display: block; } /* группы — плитки с отступом по системе */ [data-theme="next"] body.kh-page > section.kalc-home.kh-group { margin-top: 0 !important; padding-top: var(--sec) !important; padding-bottom: 0 !important; } [data-theme="next"] body.kh-page > section.kalc-home.kh-group .kalc-actions { display: none !important; } /* призыв */ [data-theme="next"] body.kh-page .kh-cta-plate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 40px); border-radius: var(--r-lg); background: radial-gradient(45% 120% at 90% 50%, rgba(255, 165, 31, .3) 0%, rgba(255, 165, 31, 0) 70%), linear-gradient(135deg, #232120 0%, #1A1A1A 55%, #141414 100%); } [data-theme="next"] body.kh-page .kh-cta-plate b { display: block; margin-bottom: 4px; font-size: clamp(20px, 1.9vw, 26px); font-weight: 800; color: #fff; } [data-theme="next"] body.kh-page .kh-cta-plate span { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .72); } [data-theme="next"] body.kh-page .kh-cta-btn { min-height: 54px; padding: 0 28px !important; font-size: 15.5px !important; font-weight: 800 !important; box-shadow: 0 12px 28px rgba(214, 0, 28, .35) !important; } /* как пользоваться */ [data-theme="next"] body.kh-page .kh-head { margin-bottom: clamp(24px, 2.8vw, 40px); } [data-theme="next"] body.kh-page .kh-how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); } [data-theme="next"] body.kh-page .kh-how-card { padding: 24px; border-radius: var(--r-md); background: #F6F4EF; } [data-theme="next"] body.kh-page .kh-how-ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: var(--r-sm); background: linear-gradient(145deg, #FFE36B 0%, #FFC42E 55%, #FFA51F 100%); box-shadow: 0 8px 18px rgba(214, 140, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .55); color: #1A1A1A; } [data-theme="next"] body.kh-page .kh-how-card b { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 800; color: #1A1A1A; } [data-theme="next"] body.kh-page .kh-how-card p { margin: 0; font-size: 15px; line-height: 1.55; color: #6f6f6f; } [data-theme="next"] body.kh-page .calc-history:not([style*="none"]) { margin-top: clamp(16px, 2vw, 24px) !important; } [data-theme="next"] body.kh-page > section.faq, [data-theme="next"] body.kh-page > section.vpromo-wide { margin-top: 0 !important; } [data-theme="next"] body.kh-page > section.final-cta, [data-theme="next"] body.kh-page > section#zayavka { margin-top: var(--sec) !important; } @media (max-width: 900px) { [data-theme="next"] body.kh-page .kh-how-grid { grid-template-columns: 1fr; } [data-theme="next"] body.kh-page .khub-hero { grid-template-columns: 1fr; } [data-theme="next"] body.kh-page .kh-hero-pic { display: none; } } @media (max-width: 600px) { [data-theme="next"] body.kh-page > section.kh-hero, [data-theme="next"] body.kh-page > section.kh-main, [data-theme="next"] body.kh-page > section.kh-cta, [data-theme="next"] body.kh-page > section.kh-how { padding-left: 20px !important; padding-right: 20px !important; } [data-theme="next"] body.kh-page .khub-hero { border-radius: var(--r-md) !important; } [data-theme="next"] body.kh-page .kh-hero-btn, [data-theme="next"] body.kh-page .kh-cta-btn { width: 100%; justify-content: center; } [data-theme="next"] body.kh-page .kh-how-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; padding: 18px; } [data-theme="next"] body.kh-page .kh-how-ico { grid-row: 1 / span 2; margin: 0; } } /* калькуляторы — группы на белом без отступов серой полосы; неполный ряд растягивается */ [data-theme="next"] body.kh-page > section.kh-group > .kalc-head { padding: 0 var(--gutter) !important; margin: 0 0 clamp(24px, 2.8vw, 40px) !important; } [data-theme="next"] body.kh-page > section.kh-group > .kalc-row { padding: 0 var(--gutter) !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } [data-theme="next"] body.kh-page .kh-group .kalc-row > .kalc-card { grid-column: span 2 !important; } [data-theme="next"] body.kh-page .kh-group .kalc-row > .kalc-card:nth-child(3n+1):last-child { grid-column: 1 / -1 !important; } [data-theme="next"] body.kh-page .kh-group .kalc-row > .kalc-card:nth-child(3n+1):nth-last-child(2), [data-theme="next"] body.kh-page .kh-group .kalc-row > .kalc-card:nth-child(3n+1):nth-last-child(2) + .kalc-card { grid-column: span 3 !important; } @media (max-width: 1100px) { [data-theme="next"] body.kh-page .kh-group .kalc-row > .kalc-card, [data-theme="next"] body.kh-page .kh-group .kalc-row > .kalc-card:nth-child(n) { grid-column: span 3 !important; } [data-theme="next"] body.kh-page .kh-group .kalc-row > .kalc-card:nth-child(odd):last-child { grid-column: 1 / -1 !important; } } @media (max-width: 600px) { [data-theme="next"] body.kh-page > section.kh-group > .kalc-head, [data-theme="next"] body.kh-page > section.kh-group > .kalc-row { padding-left: 20px !important; padding-right: 20px !important; } [data-theme="next"] body.kh-page > section.kh-group > .kalc-row { grid-template-columns: 1fr !important; } [data-theme="next"] body.kh-page .kh-group .kalc-row > .kalc-card:nth-child(n) { grid-column: auto !important; } } /* ── калькуляторы: карточки в стиле услуг главной ─────────── */ [data-theme="next"] body.kh-page #uslugi .blog-grid { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; padding: 0 !important; } [data-theme="next"] body.kh-page #uslugi .blog-card { grid-column: span 3 !important; grid-row: auto !important; } [data-theme="next"] body.kh-page #uslugi .blog-card.kh-card--main { grid-column: span 6 !important; grid-row: span 2 !important; } /* неполный последний ряд: после главной (2 ряда × 6) и 4 плиток — ряды по 4 */ [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child { grid-column: 1 / -1 !important; } [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):nth-last-child(2), [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):nth-last-child(2) + .blog-card { grid-column: span 6 !important; } [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):nth-last-child(3), [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):nth-last-child(3) ~ .blog-card { grid-column: span 4 !important; } /* одиночная плитка во всю ширину — обложка слева */ @media (min-width: 1101px) { [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child { display: grid !important; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto auto 1fr; column-gap: 28px; align-items: start; } [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child > .bc-thumb { grid-row: 1 / span 3; margin: 0 !important; } [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child > h3 { margin: 18px 0 8px !important; font-size: 22px !important; } [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child > p { margin: 0 !important; font-size: 16px !important; } } [data-theme="next"] body.kh-page #uslugi .bc-thumb { position: relative; overflow: hidden; aspect-ratio: 16 / 9 !important; } [data-theme="next"] body.kh-page #uslugi .kc-cover { display: block; width: 100%; height: 100%; transition: transform .5s cubic-bezier(.2, .8, .2, 1); } [data-theme="next"] body.kh-page #uslugi .blog-card:hover .kc-cover { transform: scale(1.05); } [data-theme="next"] body.kh-page #uslugi .kh-card-tag { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 4px 9px; border-radius: var(--r-xs); background: #fff; color: #1A1A1A; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 4px 10px rgba(120, 70, 0, .15); } [data-theme="next"] body.kh-page #uslugi .blog-card, [data-theme="next"] body.kh-page #uslugi .blog-card * { text-decoration: none !important; } /* главная плитка */ [data-theme="next"] body.kh-page #uslugi .kh-card--main { display: flex !important; flex-direction: column; } [data-theme="next"] body.kh-page #uslugi .kh-card--main .bc-thumb { flex: 1 1 auto; aspect-ratio: auto !important; min-height: 240px; } [data-theme="next"] body.kh-page #uslugi .kh-card--main .kc-cover { position: absolute; inset: 0; } [data-theme="next"] body.kh-page #uslugi .kh-card--main .bc-tag--hot { position: absolute; top: 24px; left: 24px; z-index: 2; } [data-theme="next"] body.kh-page #uslugi .kh-card--main h3 { font-size: clamp(22px, 2vw, 30px) !important; line-height: 1.12 !important; margin: 18px 12px 8px !important; } [data-theme="next"] body.kh-page #uslugi .kh-card--main p { font-size: 15.5px !important; } [data-theme="next"] body.kh-page #uslugi .kh-card-btn { align-self: flex-start; display: inline-flex; align-items: center; margin: 16px 12px 0; min-height: 50px; padding: 0 24px; border-radius: var(--r-sm); background: #D6001C; color: #fff !important; font-size: 15.5px; font-weight: 800; box-shadow: 0 10px 24px rgba(214, 0, 28, .26); transition: background .18s ease; } [data-theme="next"] body.kh-page #uslugi .kh-card--main:hover .kh-card-btn { background: #B00017; } @media (max-width: 1100px) { [data-theme="next"] body.kh-page #uslugi .blog-card, [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(n) { grid-column: span 6 !important; grid-row: auto !important; } [data-theme="next"] body.kh-page #uslugi .blog-card.kh-card--main { grid-column: 1 / -1 !important; } [data-theme="next"] body.kh-page #uslugi .kh-card--main .bc-thumb { min-height: 0; aspect-ratio: 21 / 9 !important; } /* 9 плиток после главной: нечётная последняя — во всю ширину */ [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(even):last-child { grid-column: 1 / -1 !important; } } @media (max-width: 600px) { [data-theme="next"] body.kh-page #uslugi .blog-grid { grid-template-columns: 1fr !important; } [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(n) { grid-column: auto !important; } [data-theme="next"] body.kh-page #uslugi .kh-card--main .bc-thumb { aspect-ratio: 16 / 10 !important; } [data-theme="next"] body.kh-page #uslugi .kh-card-btn { align-self: stretch; justify-content: center; } } /* ── калькуляторы: отступы блоков ─────────────────────────── */ [data-theme="next"] body.kh-page > section.kh-cta > .kh-cta-plate { padding: clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 40px) !important; } [data-theme="next"] body.kh-page > section.faq { padding-bottom: 0 !important; } [data-theme="next"] body.kh-page > section.vpromo-wide { margin-top: var(--sec) !important; } [data-theme="next"] body.kh-page > section.vpromo-wide > .vpromo-in { padding-left: 0 !important; padding-right: 0 !important; } [data-theme="next"] body.kh-page > section.vpromo-wide + section#zayavka, [data-theme="next"] body.kh-page > section.vpromo-wide + section.final-cta { margin-top: 0 !important; } /* одиночная плитка во всю ширину: явные области */ @media (min-width: 1101px) { [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child { display: grid !important; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr) !important; grid-template-rows: 1fr auto auto 1fr !important; grid-template-areas: "thumb ." "thumb title" "thumb text" "thumb ." !important; align-items: start; } [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child > .bc-thumb { grid-area: thumb !important; grid-row: auto !important; } [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child > h3 { grid-area: title !important; margin-top: 0 !important; } [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child > p { grid-area: text !important; } [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child::before, [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child::after { position: absolute !important; } } @media (min-width: 1101px) { [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child { grid-template-rows: auto auto !important; grid-template-areas: "thumb title" "thumb text" !important; align-content: center !important; align-self: start !important; height: auto !important; } [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child > .bc-thumb { align-self: stretch; height: auto; } [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child > h3 { align-self: end; } [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child > p { align-self: start; } } @media (min-width: 1101px) { [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child { grid-template-rows: auto auto !important; } [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child > .bc-thumb { grid-row: 1 / 3 !important; } [data-theme="next"] body.kh-page #uslugi .blog-card:nth-child(4n+2):last-child > h3 { margin: 0 0 8px !important; } } /* ── калькуляторы: плитки с иконками (без обложек) ─────────── */ [data-theme="next"] body.kh-page > section.kh-list { display: block !important; margin: 0 !important; padding: var(--sec) var(--gutter) 0 !important; background: transparent !important; } [data-theme="next"] body.kh-page > section.kh-list > div { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } [data-theme="next"] body.kh-page .kh-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); } [data-theme="next"] body.kh-page .kh-tile { --c: #D6001C; position: relative; overflow: hidden; isolation: isolate; grid-column: span 3; display: flex; flex-direction: column; align-items: flex-start; min-height: 210px; padding: 22px 22px 24px; border: 1px solid rgba(26, 26, 26, .09); border-radius: var(--r-md); background: #fff; color: #1A1A1A; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } [data-theme="next"] body.kh-page .kh-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 16px 36px rgba(26, 26, 26, .08); } [data-theme="next"] body.kh-page .kh-tile-ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: var(--r-sm); background: var(--c); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 30%, transparent); } [data-theme="next"] body.kh-page .kh-tile-tag { margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c); } [data-theme="next"] body.kh-page .kh-tile > b { position: relative; z-index: 1; max-width: 75%; margin-bottom: 6px; font-size: 18px; font-weight: 800; line-height: 1.25; } [data-theme="next"] body.kh-page .kh-tile-desc { position: relative; z-index: 1; max-width: 78%; font-size: 14px; line-height: 1.5; color: #6f6f6f; } [data-theme="next"] body.kh-page .kh-tile-big { position: absolute; z-index: -1; right: -14px; bottom: -14px; width: 120px; height: 120px; color: var(--c); opacity: .16; transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1); } [data-theme="next"] body.kh-page .kh-tile-big * { fill-opacity: .55; } [data-theme="next"] body.kh-page .kh-tile:hover .kh-tile-big { opacity: .9; transform: translate(-6px, -6px) rotate(-6deg); } /* главная плитка — жёлтая */ [data-theme="next"] body.kh-page .kh-tile--main { --c: #D6001C; grid-column: span 6; grid-row: span 2; justify-content: flex-end; min-height: 100%; padding: clamp(24px, 3vw, 40px); border: 0; background: radial-gradient(60% 90% at 10% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(135deg, #FFE36B 0%, #FFD100 45%, #FFB52E 100%); box-shadow: 0 20px 48px rgba(214, 150, 0, .22); } [data-theme="next"] body.kh-page .kh-tile--main .kh-tile-tag { align-self: flex-start; padding: 4px 9px; border-radius: var(--r-xs); background: #1A1A1A; color: #fff; } [data-theme="next"] body.kh-page .kh-tile--main > b { max-width: 70%; margin: 10px 0 10px; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -.025em; } [data-theme="next"] body.kh-page .kh-tile--main .kh-tile-desc { max-width: 60%; font-size: 15.5px; color: rgba(26, 26, 26, .75); } [data-theme="next"] body.kh-page .kh-tile-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; margin-top: 20px; min-height: 52px; padding: 0 24px; border-radius: var(--r-sm); background: #D6001C; color: #fff; font-size: 15.5px; font-weight: 800; box-shadow: 0 12px 28px rgba(214, 0, 28, .3); transition: background .18s ease; } [data-theme="next"] body.kh-page .kh-tile--main:hover .kh-tile-btn { background: #B00017; } [data-theme="next"] body.kh-page .kh-tile--main .kh-tile-big { right: 4%; top: 50%; bottom: auto; width: clamp(160px, 18vw, 250px); height: auto; aspect-ratio: 1; color: #1A1A1A; opacity: .9; transform: translateY(-50%) rotate(8deg); } [data-theme="next"] body.kh-page .kh-tile--main .kh-tile-big * { fill: #fff; fill-opacity: .8; } [data-theme="next"] body.kh-page .kh-tile--main .kh-tile-big rect:first-child { fill: #fff; fill-opacity: .85; } [data-theme="next"] body.kh-page .kh-tile--main:hover .kh-tile-big { opacity: 1; transform: translateY(-52%) rotate(3deg); } /* неполный последний ряд: после главной (6×2) и 4 плиток — ряды по 4 */ [data-theme="next"] body.kh-page .kh-tile:nth-child(4n+2):last-child { grid-column: 1 / -1; } [data-theme="next"] body.kh-page .kh-tile:nth-child(4n+2):nth-last-child(2), [data-theme="next"] body.kh-page .kh-tile:nth-child(4n+2):nth-last-child(2) + .kh-tile { grid-column: span 6; } [data-theme="next"] body.kh-page .kh-tile:nth-child(4n+2):nth-last-child(3), [data-theme="next"] body.kh-page .kh-tile:nth-child(4n+2):nth-last-child(3) ~ .kh-tile { grid-column: span 4; } [data-theme="next"] body.kh-page .kh-tile:nth-child(4n+2):last-child { min-height: 150px; } [data-theme="next"] body.kh-page .kh-tile:nth-child(4n+2):last-child > b, [data-theme="next"] body.kh-page .kh-tile:nth-child(4n+2):last-child .kh-tile-desc { max-width: 70%; } @media (max-width: 1100px) { [data-theme="next"] body.kh-page .kh-tile, [data-theme="next"] body.kh-page .kh-tile:nth-child(n) { grid-column: span 6; grid-row: auto; } [data-theme="next"] body.kh-page .kh-tile--main { grid-column: 1 / -1 !important; min-height: 280px; } [data-theme="next"] body.kh-page .kh-tile:nth-child(even):last-child { grid-column: 1 / -1; } } @media (max-width: 600px) { [data-theme="next"] body.kh-page > section.kh-list { padding-left: 20px !important; padding-right: 20px !important; } [data-theme="next"] body.kh-page .kh-grid { grid-template-columns: 1fr; gap: 10px; } [data-theme="next"] body.kh-page .kh-tile:nth-child(n) { grid-column: auto !important; min-height: 0; } [data-theme="next"] body.kh-page .kh-tile:hover { transform: none; } [data-theme="next"] body.kh-page .kh-tile--main > b, [data-theme="next"] body.kh-page .kh-tile--main .kh-tile-desc { max-width: none; } [data-theme="next"] body.kh-page .kh-tile--main .kh-tile-big { width: 120px; top: 16px; right: -10px; transform: rotate(8deg); opacity: .35; } [data-theme="next"] body.kh-page .kh-tile-btn { align-self: stretch; justify-content: center; } } /* ── «Для вашего сайта» — плашкой в колонке ──────────────── */ [data-theme="next"] body.kh-page > section.vpromo-wide { margin: var(--sec) var(--gutter) 0 !important; padding: clamp(28px, 3.4vw, 48px) !important; border-radius: var(--r-lg) !important; overflow: hidden; } [data-theme="next"] body.kh-page > section.vpromo-wide + section#zayavka { margin-top: var(--sec) !important; } @media (max-width: 600px) { [data-theme="next"] body.kh-page > section.vpromo-wide { margin: 40px 20px 0 !important; padding: 24px 20px !important; border-radius: var(--r-md) !important; } } [data-theme="next"] body.kh-page > section.vpromo-wide { width: auto !important; max-width: none !important; box-sizing: border-box; } [data-theme="next"] body.kh-page > section.vpromo-wide > .vpromo-in { width: auto !important; max-width: none !important; } @media (min-width: 601px) { [data-theme="next"] body.kh-page .kh-tile--main > b { max-width: 58% !important; font-size: clamp(24px, 2.4vw, 36px) !important; } [data-theme="next"] body.kh-page .kh-tile--main .kh-tile-desc { max-width: 55% !important; } [data-theme="next"] body.kh-page .kh-tile--main .kh-tile-big { width: clamp(130px, 13vw, 190px) !important; right: 5% !important; } } /* калькуляторы: маленькие иконки — как «Инструменты» на главной (жёлтый круг) */ [data-theme="next"] body.kh-page .kh-tile[href$="/kalkulyatory/nds/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Cpath%20d%3D%27M6%202.5h12v19l-2-1.3-2%201.3-2-1.3-2%201.3-2-1.3-2%201.3z%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M6%202.5h12v19l-2-1.3-2%201.3-2-1.3-2%201.3-2-1.3-2%201.3z%27%2F%3E%3Cpath%20d%3D%27M9%2015l6-6%27%2F%3E%3Ccircle%20cx%3D%279.6%27%20cy%3D%279.4%27%20r%3D%271.3%27%2F%3E%3Ccircle%20cx%3D%2714.4%27%20cy%3D%2714.6%27%20r%3D%271.3%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] body.kh-page .kh-tile[href$="/kalkulyatory/usn/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Cpath%20d%3D%27M6.5%202.5H14l4.5%204.5v13a1.5%201.5%200%200%201-1.5%201.5H6.5A1.5%201.5%200%200%201%205%2020V4a1.5%201.5%200%200%201%201.5-1.5z%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M6.5%202.5H14l4.5%204.5v13a1.5%201.5%200%200%201-1.5%201.5H6.5A1.5%201.5%200%200%201%205%2020V4a1.5%201.5%200%200%201%201.5-1.5z%27%2F%3E%3Cpath%20d%3D%27M14%202.5V7h4.5%27%2F%3E%3Cpath%20d%3D%27M10.5%2018.5v-8h3a2.2%202.2%200%200%201%200%204.4h-4.3M9.2%2016.8h4.3%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] body.kh-page .kh-tile[href$="/kalkulyatory/patent/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274%27%20width%3D%2719%27%20height%3D%2713%27%20rx%3D%271.5%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Crect%20x%3D%272.5%27%20y%3D%274%27%20width%3D%2719%27%20height%3D%2713%27%20rx%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M6.5%208.5h7M6.5%2011.5h4.5%27%2F%3E%3Cpath%20d%3D%27M14.8%2017.3l-1%204.2%202.7-1.4%202.7%201.4-1-4.2%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%2714.5%27%20r%3D%273.2%27%20fill%3D%27%23FFFFFF%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%2714.5%27%20r%3D%273.2%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] body.kh-page .kh-tile[href$="/kalkulyatory/ausn/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Cpath%20d%3D%27M13.5%202L5%2013.5h6.2L10%2022l8.8-12h-6.3z%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M13.5%202L5%2013.5h6.2L10%2022l8.8-12h-6.3z%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] body.kh-page .kh-tile[href$="/kalkulyatory/vznosy-ip/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277.5%27%20r%3D%273.6%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277.5%27%20r%3D%273.6%27%2F%3E%3Cpath%20d%3D%27M2.8%2020.5c.5-3.8%203.1-6.3%206.2-6.3%201.3%200%202.5.4%203.4%201.1%27%2F%3E%3Ccircle%20cx%3D%2717.3%27%20cy%3D%2716.8%27%20r%3D%274.4%27%20fill%3D%27%23FFFFFF%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2717.3%27%20cy%3D%2716.8%27%20r%3D%274.4%27%2F%3E%3Cpath%20d%3D%27M16.1%2019v-4.4h1.8a1.3%201.3%200%200%201%200%202.6h-2.5M15.4%2018h2.6%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] body.kh-page .kh-tile[href$="/kalkulyatory/summa-propisyu/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Cpath%20d%3D%27M14.5%204.5l5%205L10%2019H5v-5z%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M14.5%204.5l5%205L10%2019H5v-5z%27%2F%3E%3Cpath%20d%3D%27M12.3%206.7l5%205M3%2021.5h9%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] body.kh-page .kh-tile[href$="/kalkulyatory/ndfl/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Crect%20x%3D%273%27%20y%3D%277%27%20width%3D%2718%27%20height%3D%2713.5%27%20rx%3D%272%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M5.5%207V5.8A2.3%202.3%200%200%201%208.4%203.6L17.5%206%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%277%27%20width%3D%2718%27%20height%3D%2713.5%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M21%2011.5h-4a2.3%202.3%200%200%200%200%204.6h4%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2713.8%27%20r%3D%27.9%27%20fill%3D%27%231A1A1A%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] body.kh-page .kh-tile[href$="/kalkulyatory/alimenty/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%276%27%20r%3D%273.2%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%276%27%20r%3D%273.2%27%2F%3E%3Cpath%20d%3D%27M2.8%2021v-2.8A5.2%205.2%200%200%201%208%2013a5.2%205.2%200%200%201%203.6%201.4%27%2F%3E%3Ccircle%20cx%3D%2716.8%27%20cy%3D%2712%27%20r%3D%272.5%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2716.8%27%20cy%3D%2712%27%20r%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M12.6%2021v-1.3a4.2%204.2%200%200%201%208.4%200V21%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] body.kh-page .kh-tile[href$="/kalkulyatory/vznosy-sotrudniki/"] { --kc-ic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231A1A1A%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20color%3D%27%231A1A1A%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%278%27%20r%3D%273.2%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%278%27%20r%3D%273.2%27%20fill%3D%27%23FFFFFF%27%20fill-opacity%3D%27.75%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%278%27%20r%3D%273.2%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%278%27%20r%3D%273.2%27%2F%3E%3Cpath%20d%3D%27M2.5%2020a5.5%205.5%200%200%201%2011%200M11%2016.2a5.5%205.5%200%200%201%2010.5%203.8%27%2F%3E%3C%2Fsvg%3E"); } [data-theme="next"] body.kh-page .kh-tile:not(.kh-tile--main) .kh-tile-ico { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: #FFD100 var(--kc-ic) center / 26px no-repeat !important; box-shadow: 0 6px 16px rgba(214, 150, 0, .28) !important; color: transparent !important; transition: transform .25s ease, box-shadow .25s ease; } [data-theme="next"] body.kh-page .kh-tile:hover .kh-tile-ico { transform: scale(1.06); box-shadow: 0 8px 20px rgba(214, 150, 0, .38) !important; } /* калькуляторы: главная плитка — тёмная, с шагами опроса */ [data-theme="next"] body.kh-page .kh-tile--main { justify-content: flex-start !important; background: radial-gradient(55% 60% at 100% 0%, rgba(255, 165, 31, .35) 0%, rgba(255, 165, 31, 0) 70%), radial-gradient(40% 50% at 0% 100%, rgba(214, 0, 28, .25) 0%, rgba(214, 0, 28, 0) 70%), linear-gradient(150deg, #2A2724 0%, #1A1A1A 55%, #121212 100%) !important; box-shadow: 0 24px 56px rgba(20, 20, 20, .22) !important; color: #fff !important; } [data-theme="next"] body.kh-page .kh-tile--main .kh-tile-tag { background: #FFD100 !important; color: #1A1A1A !important; } [data-theme="next"] body.kh-page .kh-tile--main > b { max-width: none !important; color: #fff !important; } [data-theme="next"] body.kh-page .kh-tile--main .kh-tile-desc { max-width: 46ch !important; color: rgba(255, 255, 255, .72) !important; } [data-theme="next"] body.kh-page .kh-main-steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; margin: auto 0 0; padding: 22px 0 0; } [data-theme="next"] body.kh-page .kh-main-steps li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); font-size: 13px; font-weight: 700; line-height: 1.25; color: rgba(255, 255, 255, .88); transition: background .25s ease, border-color .25s ease; } [data-theme="next"] body.kh-page .kh-main-steps i { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #FFD100; color: #1A1A1A; font-style: normal; font-size: 13px; font-weight: 800; } [data-theme="next"] body.kh-page .kh-main-steps li:last-child i { background: #D6001C; color: #fff; } [data-theme="next"] body.kh-page .kh-tile--main:hover .kh-main-steps li { background: rgba(255, 255, 255, .11); border-color: rgba(255, 209, 0, .35); } [data-theme="next"] body.kh-page .kh-tile--main .kh-tile-btn { margin-top: 18px !important; } @media (max-width: 1280px) and (min-width: 1101px) { [data-theme="next"] body.kh-page .kh-main-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { [data-theme="next"] body.kh-page .kh-main-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme="next"] body.kh-page .kh-main-steps li:last-child { grid-column: 1 / -1; } } /* калькуляторы: без шагов в главной плитке — кнопка внизу */ [data-theme="next"] body.kh-page .kh-tile--main .kh-tile-btn { margin-top: auto !important; } [data-theme="next"] body.kh-page .kh-tile--main .kh-tile-desc { margin-bottom: 24px; font-size: 16.5px !important; } [data-theme="next"] body.kh-page .kh-tile--main > b { font-size: clamp(28px, 3vw, 44px) !important; max-width: 16ch !important; } /* метки групп — бейджем: фон и рамка цвета калькулятора */ [data-theme="next"] body.kh-page .kh-tile:not(.kh-tile--main) .kh-tile-tag { display: inline-flex; align-items: center; margin-bottom: 10px; padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: var(--r-xs); background: color-mix(in srgb, var(--c) 10%, #fff); line-height: 1.4; } /* ── калькуляторы: баннер «Проверка расчёта» над первым экраном ── Отдельный класс, не epd-banner (его перезаписывает epd-slides.php). */ [data-theme="next"] body.kh-page > section.kh-check-banner { position: relative; overflow: hidden; margin: calc(var(--header-h) - 1px) 0 0 !important; padding: 18px var(--gutter) !important; background: radial-gradient(35% 160% at 0% 50%, rgba(255, 209, 0, .22) 0%, rgba(255, 209, 0, 0) 70%), radial-gradient(30% 140% at 100% 50%, rgba(214, 0, 28, .28) 0%, rgba(214, 0, 28, 0) 70%), linear-gradient(100deg, #232120 0%, #1A1A1A 55%, #141414 100%) !important; color: #fff; } [data-theme="next"] body.kh-page .kh-check-words { position: absolute; inset: 0; pointer-events: none; } [data-theme="next"] body.kh-page .kh-check-words span { position: absolute; white-space: nowrap; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .07); } [data-theme="next"] body.kh-page .kh-check-inner { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px clamp(18px, 2.4vw, 36px); max-width: none !important; margin: 0 !important; padding: 0 !important; } [data-theme="next"] body.kh-page .kh-check-ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #FFD100; color: #1A1A1A; box-shadow: 0 0 0 6px rgba(255, 209, 0, .15); } [data-theme="next"] body.kh-page .kh-check-ico svg circle { fill: #FFD100; } [data-theme="next"] body.kh-page .kh-check-text b { display: block; margin-bottom: 4px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; line-height: 1.2; color: #fff; } [data-theme="next"] body.kh-page .kh-check-text b em { font-style: normal; color: #FFD100; white-space: nowrap; } [data-theme="next"] body.kh-page .kh-check-text span { display: block; max-width: 72ch; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .72); } [data-theme="next"] body.kh-page .kh-check-actions { display: flex; align-items: center; gap: 18px; } [data-theme="next"] body.kh-page .kh-check-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: var(--r-sm); background: #D6001C; color: #fff; font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 24px rgba(214, 0, 28, .35); transition: background .18s ease, transform .18s ease; } [data-theme="next"] body.kh-page .kh-check-btn:hover { background: #B00017; transform: translateY(-2px); } [data-theme="next"] body.kh-page .kh-check-link { color: #FFD100; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; } [data-theme="next"] body.kh-page .kh-check-link:hover { text-decoration: underline; } [data-theme="next"] body.kh-page > section.kh-check-banner + section.kh-hero { padding-top: 44px !important; } [data-theme="next"] body.kh-page #spisok { scroll-margin-top: calc(var(--header-h) + 16px); } @media (max-width: 1100px) { [data-theme="next"] body.kh-page .kh-check-inner { grid-template-columns: auto minmax(0, 1fr); } [data-theme="next"] body.kh-page .kh-check-actions { grid-column: 1 / -1; } } @media (max-width: 600px) { [data-theme="next"] body.kh-page > section.kh-check-banner { padding: 20px !important; } [data-theme="next"] body.kh-page .kh-check-inner { grid-template-columns: 1fr; } [data-theme="next"] body.kh-page .kh-check-actions { flex-direction: column; align-items: stretch; gap: 10px; } [data-theme="next"] body.kh-page .kh-check-btn { width: 100%; } [data-theme="next"] body.kh-page .kh-check-link { text-align: center; } [data-theme="next"] body.kh-page > section.kh-check-banner + section.kh-hero { padding-top: 30px !important; } } /* ════════════════════════════════════════════════════════════ КАЛЬКУЛЯТОРЫ — СТРАНИЦЫ (body.kc-page) Только оформление: id полей, порядок элементов и скрипты не меняются (их читают расчёт, почта, напоминания, проверка, Excel, PDF и ссылка). Ставки — из админки (js/calc-config.js). ════════════════════════════════════════════════════════════ */ [data-theme="next"] body.kc-page article.kalk-page { display: block !important; margin: 0 !important; padding: 0 !important; max-width: none !important; background: transparent !important; } [data-theme="next"] body.kc-page article.kalk-page > .wrap { max-width: none !important; margin: 0 !important; padding: var(--crumbs-top) var(--gutter) 0 !important; } [data-theme="next"] body.kc-page .kcrumbs { margin: 0 0 var(--crumbs-gap) !important; font-size: 13px !important; color: #8a8a8a !important; } [data-theme="next"] body.kc-page .kcrumbs a { color: #8a8a8a !important; text-decoration: none; } [data-theme="next"] body.kc-page .kcrumbs a:hover { color: #D6001C !important; } [data-theme="next"] body.kc-page article.kalk-page > .wrap > .section-tag { display: none !important; } [data-theme="next"] body.kc-page h1.ep-title { margin: 0 0 12px !important; font-size: clamp(34px, 4.6vw, 64px) !important; font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -.035em !important; color: #1A1A1A !important; max-width: none !important; } [data-theme="next"] body.kc-page article.kalk-page .lead { max-width: 70ch; margin: 0 !important; font-size: clamp(15px, 1.3vw, 19px) !important; line-height: 1.55 !important; color: #6f6f6f !important; } [data-theme="next"] body.kc-page .kshort { margin: 18px 0 0 !important; padding: 14px 18px !important; max-width: none !important; border: 1px dashed rgba(26, 26, 26, .2) !important; border-left: 1px dashed rgba(26, 26, 26, .2) !important; border-radius: var(--r-md) !important; background: transparent !important; font-size: 15px !important; line-height: 1.6 !important; color: #3f3f3f !important; } [data-theme="next"] body.kc-page .kshort strong { display: inline-block; margin-right: 8px; padding: 3px 8px; border-radius: var(--r-xs); background: #1A1A1A; color: #fff; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; } /* ── карточка расчёта ─────────────────────────────────────── */ [data-theme="next"] body.kc-page .calc { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: 20px; align-items: start; max-width: none !important; margin: clamp(24px, 3vw, 40px) 0 0 !important; padding: clamp(22px, 3vw, 40px) !important; border: 1px solid rgba(26, 26, 26, .09) !important; border-radius: var(--r-lg) !important; background: #fff !important; box-shadow: 0 20px 48px rgba(26, 26, 26, .06) !important; } /* всё, что не поле ввода, — во всю ширину */ [data-theme="next"] body.kc-page .calc > *:not(.field), [data-theme="next"] body.kc-page .calc > .field:has(.switch button:nth-child(3)), [data-theme="next"] body.kc-page .calc > .field:has(.seg) { grid-column: 1 / -1; } [data-theme="next"] body.kc-page .calc > .pane { display: none !important; } [data-theme="next"] body.kc-page .calc > .pane.active { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: 20px; align-items: start; } [data-theme="next"] body.kc-page .calc > .pane > *:not(.field), [data-theme="next"] body.kc-page .calc > .pane > .field:has(.seg) { grid-column: 1 / -1; } [data-theme="next"] body.kc-page .calc [style*="display:none"], [data-theme="next"] body.kc-page .calc [style*="display: none"] { display: none !important; } [data-theme="next"] body.kc-page .calc .field { margin: 0 !important; padding: 0 !important; border: 0 !important; } [data-theme="next"] body.kc-page .calc .field > label { display: block; margin: 0 0 8px !important; font-size: 14.5px !important; font-weight: 800 !important; color: #1A1A1A !important; } [data-theme="next"] body.kc-page .calc .hint { margin-top: 8px !important; font-size: 13px !important; line-height: 1.5 !important; color: #8a8a8a !important; } [data-theme="next"] body.kc-page .calc .hint a { color: #D6001C; } /* поля ввода */ [data-theme="next"] body.kc-page .calc .input-row { position: relative; display: flex !important; align-items: center; } [data-theme="next"] body.kc-page .calc .input-row input, [data-theme="next"] body.kc-page .calc .field > input, [data-theme="next"] body.kc-page .calc .field input[type=date], [data-theme="next"] body.kc-page .calc .field select { width: 100%; height: 56px !important; padding: 0 44px 0 16px !important; border: 1.5px solid rgba(26, 26, 26, .14) !important; border-radius: var(--r-sm) !important; background: #fff !important; box-shadow: none !important; font-family: inherit; font-size: 18px !important; font-weight: 700 !important; color: #1A1A1A !important; outline: 0; transition: border-color .18s ease, box-shadow .18s ease; } [data-theme="next"] body.kc-page .calc .input-row input:focus, [data-theme="next"] body.kc-page .calc .field > input:focus, [data-theme="next"] body.kc-page .calc .field select:focus { border-color: #D6001C !important; box-shadow: 0 0 0 4px rgba(214, 0, 28, .12) !important; } [data-theme="next"] body.kc-page .calc .input-row .rub { position: absolute; right: 16px; font-weight: 700; color: #8a8a8a; pointer-events: none; } /* переключатели */ [data-theme="next"] body.kc-page .calc .switch, [data-theme="next"] body.kc-page .calc .seg { display: flex !important; flex-wrap: wrap; gap: 4px !important; width: fit-content; max-width: 100%; margin: 0 !important; padding: 4px !important; border: 0 !important; border-radius: var(--r-sm) !important; background: #F6F4EF !important; } [data-theme="next"] body.kc-page .calc .switch button, [data-theme="next"] body.kc-page .calc .seg button { flex: 1 1 auto; min-height: 44px; padding: 0 16px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important; color: #5f5f5f !important; font-family: inherit; font-size: 14.5px !important; font-weight: 700 !important; cursor: pointer; transition: background .15s ease, color .15s ease; } [data-theme="next"] body.kc-page .calc .switch button:hover, [data-theme="next"] body.kc-page .calc .seg button:hover { color: #1A1A1A !important; } [data-theme="next"] body.kc-page .calc .switch button.on, [data-theme="next"] body.kc-page .calc .seg button.on { background: #D6001C !important; color: #fff !important; box-shadow: 0 6px 14px rgba(214, 0, 28, .25) !important; } [data-theme="next"] body.kc-page .calc > .switch + .switch { margin-top: -8px !important; } /* результат */ [data-theme="next"] body.kc-page .calc .res { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; } [data-theme="next"] body.kc-page .calc .res-main { display: block !important; margin-top: 8px !important; padding: clamp(20px, 2.4vw, 28px) !important; border-radius: var(--r-md) !important; background: radial-gradient(60% 90% at 10% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(135deg, #FFE36B 0%, #FFD100 45%, #FFB52E 100%) !important; box-shadow: 0 14px 32px rgba(214, 150, 0, .2); } [data-theme="next"] body.kc-page .calc .res-main .res-row { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 0 !important; border: 0 !important; } [data-theme="next"] body.kc-page .calc .res-main .res-row span { font-size: 15px !important; font-weight: 800 !important; color: rgba(26, 26, 26, .75) !important; } [data-theme="next"] body.kc-page .calc .res-main .res-row b { font-size: clamp(30px, 3.6vw, 48px) !important; font-weight: 800 !important; line-height: 1.05 !important; letter-spacing: -.02em; color: #1A1A1A !important; } [data-theme="next"] body.kc-page .calc .res:not(.res-main) .res-row { display: flex !important; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 4px !important; border: 0 !important; border-bottom: 1px solid rgba(26, 26, 26, .07) !important; font-size: 15px !important; } [data-theme="next"] body.kc-page .calc .res:not(.res-main) .res-row span { color: #6f6f6f !important; } [data-theme="next"] body.kc-page .calc .res:not(.res-main) .res-row b { color: #1A1A1A !important; font-weight: 800 !important; text-align: right; white-space: nowrap; } [data-theme="next"] body.kc-page .calc .verdict { margin: 0 !important; padding: 16px 18px !important; border: 0 !important; border-radius: var(--r-sm) !important; background: #F6F4EF !important; font-size: 14.5px !important; line-height: 1.55 !important; color: #3f3f3f !important; } [data-theme="next"] body.kc-page .calc .verdict b { color: #1A1A1A; } /* инструменты */ [data-theme="next"] body.kc-page .calc .tools { display: flex !important; flex-wrap: wrap; gap: 8px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } [data-theme="next"] body.kc-page .calc .tools button { display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px !important; border: 1px solid rgba(26, 26, 26, .12) !important; border-radius: var(--r-sm) !important; background: #fff !important; color: #1A1A1A !important; box-shadow: none !important; font-family: inherit; font-size: 14px !important; font-weight: 700 !important; cursor: pointer; transition: border-color .18s ease, color .18s ease; } [data-theme="next"] body.kc-page .calc .tools button svg { width: 18px !important; height: 18px !important; color: #D6001C; } [data-theme="next"] body.kc-page .calc .tools button:hover { border-color: rgba(214, 0, 28, .4) !important; color: #D6001C !important; } [data-theme="next"] body.kc-page .calc .tools button.done { border-color: #1C3637 !important; color: #1C3637 !important; } [data-theme="next"] body.kc-page .calc .pdf-hint { grid-column: 1 / -1; padding: 12px 16px; border-radius: var(--r-sm); background: #FFF6D6; font-size: 13.5px; } /* почта и проверка — две карточки рядом */ [data-theme="next"] body.kc-page .calc > .kmail { grid-column: 1 / 2 !important; } [data-theme="next"] body.kc-page .calc > .kcheck { grid-column: 2 / 3 !important; } [data-theme="next"] body.kc-page .calc .kmail, [data-theme="next"] body.kc-page .calc .kcheck { align-self: stretch; margin: 8px 0 0 !important; padding: clamp(20px, 2.2vw, 26px) !important; border: 0 !important; border-radius: var(--r-md) !important; } [data-theme="next"] body.kc-page .calc .kmail { background: #F6F4EF !important; } [data-theme="next"] body.kc-page .calc .kcheck { display: flex !important; flex-direction: column; background: radial-gradient(60% 60% at 100% 0%, rgba(255, 165, 31, .3) 0%, rgba(255, 165, 31, 0) 70%), linear-gradient(160deg, #262422 0%, #1A1A1A 60%, #141414 100%) !important; color: #fff !important; } [data-theme="next"] body.kc-page .calc .kmail-head { display: flex !important; align-items: flex-start; gap: 14px; margin: 0 0 16px !important; } [data-theme="next"] body.kc-page .calc .kmail-head > svg { flex: 0 0 44px; width: 44px !important; height: 44px !important; padding: 10px; border-radius: 50%; background: #FFD100; color: #1A1A1A; stroke: #1A1A1A; } [data-theme="next"] body.kc-page .calc .kmail-head b { display: block; margin-bottom: 4px; font-size: 17px !important; font-weight: 800 !important; color: #1A1A1A !important; } [data-theme="next"] body.kc-page .calc .kmail-head span { display: block; font-size: 13.5px !important; line-height: 1.45 !important; color: #6f6f6f !important; } [data-theme="next"] body.kc-page .calc .kcheck .kmail-head b { color: #fff !important; } [data-theme="next"] body.kc-page .calc .kcheck .kmail-head span { color: rgba(255, 255, 255, .7) !important; } [data-theme="next"] body.kc-page .calc .kmail-form { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; } [data-theme="next"] body.kc-page .calc .kmail-form > input[type=email], [data-theme="next"] body.kc-page .calc .kmail-form > input[type=tel] { height: 50px !important; padding: 0 14px !important; border: 1px solid rgba(26, 26, 26, .12) !important; border-radius: var(--r-sm) !important; background: #fff !important; font-family: inherit; font-size: 15px !important; outline: 0; } [data-theme="next"] body.kc-page .calc .kmail-form > input.error { border-color: #D6001C !important; box-shadow: 0 0 0 3px rgba(214, 0, 28, .12) !important; } [data-theme="next"] body.kc-page .calc .kmail-form > .consent-row, [data-theme="next"] body.kc-page .calc .kmail-form > .btn-primary { grid-column: 1 / -1; } [data-theme="next"] body.kc-page .calc .kmail-form .consent-row { margin: 0 !important; } [data-theme="next"] body.kc-page .calc .kmail-form .consent-row label { font-size: 12px !important; line-height: 1.45 !important; color: #6f6f6f !important; } [data-theme="next"] body.kc-page .calc .kmail-remind label b { display: block; font-size: 14px; color: #1A1A1A; } [data-theme="next"] body.kc-page .calc .kmail-remind label span { display: block; font-size: 12.5px; color: #8a8a8a; } [data-theme="next"] body.kc-page .calc .kmail-form .btn-primary { justify-content: center; min-height: 50px; border-radius: var(--r-sm) !important; font-size: 15px !important; font-weight: 800 !important; } [data-theme="next"] body.kc-page .calc .kmail-msg { margin-top: 8px; font-size: 13.5px; } [data-theme="next"] body.kc-page .calc .kmail-msg.ok { color: #1C3637; font-weight: 700; } [data-theme="next"] body.kc-page .calc .kmail-msg.err { color: #D6001C; font-weight: 700; } [data-theme="next"] body.kc-page .calc .kcheck-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 52px; margin-top: auto !important; border: 0 !important; border-radius: var(--r-sm) !important; background: #FFD100 !important; color: #1A1A1A !important; font-family: inherit; font-size: 15.5px !important; font-weight: 800 !important; cursor: pointer; box-shadow: 0 10px 24px rgba(255, 209, 0, .25) !important; transition: background .18s ease; } [data-theme="next"] body.kc-page .calc .kcheck-btn:hover { background: #FFE14D !important; } [data-theme="next"] body.kc-page .calc .kcheck-note { margin-top: 10px !important; font-size: 12.5px !important; color: rgba(255, 255, 255, .55) !important; text-align: center; } [data-theme="next"] body.kc-page .calc > .note, [data-theme="next"] body.kc-page .calc .pane > .note { margin: 0 !important; font-size: 13.5px !important; line-height: 1.55 !important; color: #8a8a8a !important; } [data-theme="next"] body.kc-page .calc-disclaimer { margin: 14px 0 0 !important; font-size: 13px !important; line-height: 1.55 !important; color: #8a8a8a !important; } /* ── как считается ────────────────────────────────────────── */ [data-theme="next"] body.kc-page details.how { margin: var(--sec) 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: var(--r-lg) !important; background: #F6F4EF !important; overflow: hidden; } [data-theme="next"] body.kc-page details.how > summary { position: relative; display: block; list-style: none; cursor: pointer; padding: clamp(20px, 2.4vw, 28px) 64px clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px) !important; font-size: clamp(20px, 2vw, 26px) !important; font-weight: 800 !important; line-height: 1.2; color: #1A1A1A !important; } [data-theme="next"] body.kc-page details.how > summary::-webkit-details-marker { display: none; } [data-theme="next"] body.kc-page details.how > summary::after { content: "+"; position: absolute; right: clamp(20px, 2.6vw, 32px); top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: #D6001C; font-size: 22px; font-weight: 700; transition: transform .2s ease; } [data-theme="next"] body.kc-page details.how[open] > summary::after { content: "−"; } [data-theme="next"] body.kc-page details.how .how-body { padding: 0 clamp(20px, 2.6vw, 32px) clamp(20px, 2.6vw, 32px) !important; font-size: 15.5px !important; line-height: 1.7 !important; color: #3f3f3f !important; } [data-theme="next"] body.kc-page details.how .how-body p { margin: 0 0 12px !important; } [data-theme="next"] body.kc-page details.how code { padding: 2px 7px; border-radius: 6px; background: #fff; font-size: .92em; color: #1A1A1A; } /* ── частые вопросы — как на главной ──────────────────────── */ [data-theme="next"] body.kc-page h2.faq-h { margin: var(--sec) 0 clamp(20px, 2.4vw, 32px) !important; font-size: clamp(32px, 4.2vw, 64px) !important; font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -.035em !important; color: #1A1A1A !important; } [data-theme="next"] body.kc-page h2.faq-h::before { content: "FAQ"; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: #D6001C; } [data-theme="next"] body.kc-page article.kalk-page .acc { display: grid !important; gap: 8px !important; margin: 0 !important; border: 0 !important; } [data-theme="next"] body.kc-page article.kalk-page .acc details { padding: 0 !important; border: 0 !important; border-radius: var(--r-md) !important; background: #F6F4EF !important; overflow: hidden; } [data-theme="next"] body.kc-page article.kalk-page .acc summary { position: relative; list-style: none; cursor: pointer; padding: 20px 64px 20px 22px !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.35; color: #1A1A1A !important; } [data-theme="next"] body.kc-page article.kalk-page .acc summary::-webkit-details-marker { display: none; } [data-theme="next"] body.kc-page article.kalk-page .acc summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: #D6001C; font-size: 20px; font-weight: 700; } [data-theme="next"] body.kc-page article.kalk-page .acc details[open] summary::after { content: "−"; background: #D6001C; color: #fff; } [data-theme="next"] body.kc-page article.kalk-page .acc details p { margin: 0 !important; padding: 0 22px 20px !important; font-size: 15px !important; line-height: 1.65 !important; color: #5f5f5f !important; } /* ── другие калькуляторы ──────────────────────────────────── */ [data-theme="next"] body.kc-page .otherkalk { margin: var(--sec) 0 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } [data-theme="next"] body.kc-page .otherkalk > h2 { margin: 0 0 clamp(20px, 2.4vw, 32px) !important; font-size: clamp(28px, 3.4vw, 48px) !important; font-weight: 800 !important; line-height: 1.04 !important; letter-spacing: -.03em !important; color: #1A1A1A !important; } [data-theme="next"] body.kc-page .otherkalk > h2::before { content: "Ещё расчёты"; display: block; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #D6001C; } [data-theme="next"] body.kc-page .ok-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(10px, 1.2vw, 16px) !important; } [data-theme="next"] body.kc-page .ok-card { position: relative; display: flex !important; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 18px 20px !important; min-height: 150px; border: 1px solid rgba(26, 26, 26, .09) !important; border-radius: var(--r-md) !important; background: #fff !important; box-shadow: none !important; text-decoration: none !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } [data-theme="next"] body.kc-page .ok-card:hover { transform: translateY(-3px); border-color: rgba(214, 0, 28, .25) !important; box-shadow: 0 16px 36px rgba(26, 26, 26, .08) !important; } [data-theme="next"] body.kc-page .ok-ico { width: 44px !important; height: 44px !important; flex: 0 0 44px; display: flex !important; align-items: center; justify-content: center; border-radius: 50% !important; background: #FFD100 !important; color: #1A1A1A !important; } [data-theme="next"] body.kc-page .ok-ico svg { width: 22px !important; height: 22px !important; stroke: #1A1A1A !important; color: #1A1A1A !important; } [data-theme="next"] body.kc-page .ok-txt b { display: block; margin-bottom: 4px; font-size: 16px !important; font-weight: 800 !important; color: #1A1A1A !important; } [data-theme="next"] body.kc-page .ok-txt i { display: block; font-style: normal; font-size: 13.5px !important; line-height: 1.45 !important; color: #6f6f6f !important; } [data-theme="next"] body.kc-page .ok-arr { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; display: flex !important; align-items: center; justify-content: center; border-radius: 50%; background: #F6F4EF; color: #D6001C !important; font-weight: 800; } [data-theme="next"] body.kc-page .ok-card:hover .ok-arr { background: #D6001C; color: #fff !important; } [data-theme="next"] body.kc-page .ok-actions { margin-top: 20px !important; } [data-theme="next"] body.kc-page .ok-actions a, [data-theme="next"] body.kc-page .ok-actions .btn-primary { display: inline-flex !important; align-items: center; min-height: 50px; padding: 0 24px !important; border-radius: var(--r-sm) !important; font-weight: 800 !important; } /* ── промо виджетов — плашкой в колонке ───────────────────── */ [data-theme="next"] body.kc-page > section.vpromo-wide { width: auto !important; max-width: none !important; box-sizing: border-box; margin: var(--sec) var(--gutter) 0 !important; padding: clamp(28px, 3.4vw, 48px) !important; border-radius: var(--r-lg) !important; overflow: hidden; } [data-theme="next"] body.kc-page > section.vpromo-wide > .vpromo-in { width: auto !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* ── читайте также ────────────────────────────────────────── */ [data-theme="next"] body.kc-page > .ep-related { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px !important; max-width: none !important; margin: var(--sec) var(--gutter) 0 !important; padding: clamp(20px, 2.4vw, 28px) !important; border: 0 !important; border-radius: var(--r-lg) !important; background: #F6F4EF !important; } [data-theme="next"] body.kc-page > .ep-related h2 { flex: 0 0 auto; margin: 0 12px 0 0 !important; font-size: 18px !important; font-weight: 800 !important; color: #1A1A1A !important; } [data-theme="next"] body.kc-page > .ep-related a { display: inline-flex !important; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px !important; border: 1px solid rgba(26, 26, 26, .08) !important; border-radius: var(--r-sm) !important; background: #fff !important; color: #1A1A1A !important; font-size: 14.5px !important; font-weight: 700 !important; text-decoration: none !important; transition: border-color .18s ease, color .18s ease; } [data-theme="next"] body.kc-page > .ep-related a::after { content: "→"; color: #D6001C; } [data-theme="next"] body.kc-page > .ep-related a:hover { border-color: rgba(214, 0, 28, .35) !important; color: #D6001C !important; } [data-theme="next"] body.kc-page > section#zayavka { margin-top: var(--sec) !important; } /* ── адаптив ──────────────────────────────────────────────── */ @media (max-width: 1100px) { [data-theme="next"] body.kc-page .ok-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 760px) { [data-theme="next"] body.kc-page .calc, [data-theme="next"] body.kc-page .calc > .pane.active { grid-template-columns: minmax(0, 1fr) !important; } [data-theme="next"] body.kc-page .calc > .kmail, [data-theme="next"] body.kc-page .calc > .kcheck { grid-column: 1 / -1 !important; } [data-theme="next"] body.kc-page .calc .kmail-form { grid-template-columns: 1fr; } } @media (max-width: 600px) { [data-theme="next"] body.kc-page article.kalk-page > .wrap { padding-left: 20px !important; padding-right: 20px !important; } [data-theme="next"] body.kc-page .calc { padding: 18px !important; border-radius: var(--r-md) !important; } [data-theme="next"] body.kc-page .calc .switch, [data-theme="next"] body.kc-page .calc .seg { width: 100%; } [data-theme="next"] body.kc-page .calc .tools button { flex: 1 1 100%; justify-content: center; } [data-theme="next"] body.kc-page .ok-grid { grid-template-columns: 1fr !important; } [data-theme="next"] body.kc-page .ok-card { min-height: 0; } [data-theme="next"] body.kc-page .ok-card:hover { transform: none; } [data-theme="next"] body.kc-page > section.vpromo-wide { margin: 40px 20px 0 !important; padding: 24px 20px !important; border-radius: var(--r-md) !important; } [data-theme="next"] body.kc-page > .ep-related { margin: 40px 20px 0 !important; border-radius: var(--r-md) !important; } [data-theme="next"] body.kc-page > .ep-related h2 { flex-basis: 100%; margin: 0 0 4px !important; } [data-theme="next"] body.kc-page > .ep-related a { width: 100%; justify-content: space-between; } [data-theme="next"] body.kc-page .ok-actions a, [data-theme="next"] body.kc-page .ok-actions .btn-primary { width: 100%; justify-content: center; } } [data-theme="next"] body.kc-page .calc .kcheck > * { order: 0 !important; } @media (max-width: 760px) { [data-theme="next"] body.kc-page .calc .kcheck-btn { margin-top: 4px !important; } } /* скрипты калькуляторов прячут строки и поля через style="display:none" — это главнее оформления */ [data-theme="next"] body.kc-page article.kalk-page .calc .res .res-row[style*="none"], [data-theme="next"] body.kc-page article.kalk-page .calc .field[style*="none"], [data-theme="next"] body.kc-page article.kalk-page .calc [style*="display:none"], [data-theme="next"] body.kc-page article.kalk-page .calc [style*="display: none"] { display: none !important; } /* почта и проверка — всегда рядом и в конце карточки (порядок только визуальный) */ [data-theme="next"] body.kc-page .calc > .kmail, [data-theme="next"] body.kc-page .calc > .kcheck { order: 50; } [data-theme="next"] body.kc-page .calc > .note { order: 60; } [data-theme="next"] body.kc-page .calc:not(:has(> .kcheck)) > .kmail { grid-column: 1 / -1 !important; } [data-theme="next"] body.kc-page .calc:not(:has(> .kcheck)) > .kmail .kmail-form { grid-template-columns: repeat(4, minmax(0, 1fr)); } [data-theme="next"] body.kc-page .calc:not(:has(> .kcheck)) > .kmail .kmail-form > input[type=email], [data-theme="next"] body.kc-page .calc:not(:has(> .kcheck)) > .kmail .kmail-form > input[type=tel] { grid-column: span 2; } @media (max-width: 760px) { [data-theme="next"] body.kc-page .calc:not(:has(> .kcheck)) > .kmail .kmail-form { grid-template-columns: 1fr; } [data-theme="next"] body.kc-page .calc:not(:has(> .kcheck)) > .kmail .kmail-form > input { grid-column: auto; } }