/* NextGen Robot - WOW-слой (волна A аудита 19.08.2026): стили новых блоков конверсии и навигации. Каждая секция помечена ID правки из роадмапа. */ /* @section:announce (W-G4) */ /* Announcement-бар над строкой шапки. ВАЖНО про липкость: в этой сборке #site-header и ЕСТЬ .topbar (renderHeader вешает класс на сам
, пререндер кладёт headerHTML внутрь него), отдельного враппера нет. Если сделать бар соседом .topbar внутри общего родителя, у sticky не останется запаса хода (высота родителя = бар + строка), и шапка перестанет липнуть. Поэтому бар лежит первым элементом ВНУТРИ .topbar, а «уезжание» даёт отрицательный top: полоса уходит за верхний край, строка шапки остаётся на месте. Бар закрыт - смещения нет, top:0 как раньше. Проверено в браузере: вверху страницы строка шапки 36..104, при прокрутке она залипает на 0..68, бар уходит в -36..0. */ :root { --ngannc-h: 36px; } /* без рамки снизу: высота полосы должна ровно совпадать с --ngannc-h, иначе при залипании шапки от бара остаётся видимая полоска */ .ngannc { background: var(--ink); color: var(--white); } .ngannc[hidden] { display: none; } .ngannc__in { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--ngannc-h); padding-left: calc(var(--space-4) + 28px); padding-right: calc(var(--space-4) + 28px); } .ngannc__t { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--fs-3)/1.3 var(--font-body); } .ngannc__more { flex: none; color: var(--white); font: 600 var(--fs-3)/1.3 var(--font-body); text-decoration: underline; text-underline-offset: 2px; } .ngannc__more:hover { color: var(--accent-soft); } .ngannc__x { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: rgba(255, 255, 255, .72); font: 500 var(--fs-3)/1 var(--font-body); cursor: pointer; transition: background .15s ease, color .15s ease; } .ngannc__x:hover { background: rgba(255, 255, 255, .14); color: var(--white); } .ngannc__more:focus-visible, .ngannc__x:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; } .topbar:has(.ngannc:not([hidden])) { top: calc(-1 * var(--ngannc-h)); } @media (max-width: 720px) { .ngannc__tail { display: none; } /* на мобиле остаётся короткий «Новое: проект и избранное» */ .ngannc__in { padding-left: var(--space-3); padding-right: calc(var(--space-3) + 26px); } .ngannc__x { right: var(--space-2); } } @media (prefers-reduced-motion: reduce) { .ngannc__x { transition: none; } } /* @section:hero (W-H3, W-H12) */ /* W-H1 (второе действие первого экрана без заливки) снят по просьбе заказчика: кнопка «Все ИИ» осталась на общем .btn--ghost с белым фоном, чтобы совпадать со вторыми кнопками на остальных баннерах карусели. Класс .wh-btn-quiet больше нигде не используется и убран. */ /* W-H3: подписи ТТХ на рендере - ссылки на карточку модели. В market.css у .hero-mark выключены события мыши; включаем их только когда подпись видна (скан её зажёг, курсор на рендере или пришёл фокус с клавиатуры) - иначе над картинкой висели бы невидимые ловушки для кликов. */ a.hero-mark { text-decoration: none; cursor: pointer; } a.hero-mark.lit, #hero-scan-wrap:hover a.hero-mark, a.hero-mark:focus-visible { pointer-events: auto; } #hero-scan-wrap:hover a.hero-mark, a.hero-mark:focus-visible { opacity: 1; transform: none; } a.hero-mark::after { content: '→'; margin-left: 4px; opacity: .5; } a.hero-mark:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); } a.hero-mark:hover::after { opacity: 1; } /* W-H12: сноска-манифест под шагами консалтинга убрана вместе с чёрточкой над ней (замечание №138), стили больше не нужны. */ /* @section:form (W-H15, W-H17) */ /* W-H15: чипы над полем сообщения. Разметка - скрытый чекбокс/радио плюс стилизованный label: выбор уходит обычным POST и без JavaScript. */ .wh-chips { min-width: 0; margin: 0; padding: 0; border: 0; } .wh-chips legend { padding: 0; font: 500 var(--fs-3)/1.2 var(--font-body); color: var(--text-2); } .wh-chips__row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 6px; } /* форма выкладывает свои label колонкой - чипу нужна строка */ .contact-form .wh-chip { display: inline-flex; gap: 0; margin: 0; } .wh-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .wh-chip span { display: inline-block; padding: 8px 14px; cursor: pointer; font: 500 var(--fs-3)/1 var(--font-body); color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--pill); transition: background .15s ease, color .15s ease, border-color .15s ease; } .wh-chip:hover span { border-color: var(--text-3); } .wh-chip input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .wh-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } /* W-H17: срок ответа под кнопкой отправки. */ .wh-sla { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 var(--fs-3)/1.5 var(--font-body); color: var(--text-2); } .wh-sla::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .6; } @media (prefers-reduced-motion: reduce) { .wh-chip span { transition: none; } } /* @section:cases (W-H9, W-H10, W-C3, W-C4, W-C6) */ /* W-H9/W-H10: карточка кейса больше не один - внутри появилась вторая ссылка. Кликабельность всей плитки даёт растянутая ссылка заголовка, кнопка пересчёта лежит поверх этой растяжки. */ .ngm-case { position: relative; transition: box-shadow .15s ease; } .ngm-case:hover, .ngm-case:focus-within { box-shadow: var(--shadow-lift); } .ngm-case__link { color: inherit; text-decoration: none; } .ngm-case__link::after { content: ''; position: absolute; inset: 0; } .ngm-case__link:focus-visible { outline: none; } .ngm-case__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--r-m); } /* цифра-герой: её читают раньше заголовка */ .ngm-case__hero { margin: 0; display: flex; flex-direction: column; gap: 3px; } .ngm-case__hero-v { font: 700 var(--fs-9)/1 var(--font-mono); color: var(--good); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .ngm-case__hero-k { font-size: var(--fs-2); line-height: 1.3; color: var(--text-2); } /* Вместо строки «Экономия в год» на карточке стоит цена «от ...» в оформлении карточки ИИ-решения (замечание Петра Костина). Низ карточек ряда выравнивает теперь она, поэтому margin-top:auto переехал сюда. Дополнительный отступ сверху убран (замечание Петра Костина): расстояние от серого описания до цены теперь такое же, как в карточке ИИ-решения - только общий gap тела карточки (--space-2, 8px). Выравнивание низа ряда остаётся за margin-top:auto, поэтому в карточках с коротким названием свободная высота по-прежнему уходит над ценой. */ .ngm-case .mcard__price { margin-top: auto; } /* вторая ссылка карточки: вход в калькулятор нужного кейса */ .ngm-case__acts { position: relative; z-index: 1; margin: var(--space-3) 0 0; } /* Кнопка синяя и при наведении темнеет - как «В калькулятор» в карточке робота (замечание Петра Костина). */ .ngm-case__recalc { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 16px; border: 1px solid var(--accent); border-radius: var(--r-s); background: var(--accent); color: #fff; font: 600 var(--fs-3)/1 var(--font-body); text-decoration: none; transition: border-color .15s ease, background .15s ease; } .ngm-case__recalc::after { content: '→'; font: 400 var(--fs-3)/1 var(--font-mono); } .ngm-case__recalc:hover { border-color: var(--accent-dark); background: var(--accent-dark); } .ngm-case__recalc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* W-C3: открытая методика рядом с калькулятором */ .ngm-method { margin-top: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); box-shadow: var(--shadow-card); } .ngm-method__sum { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; padding: var(--space-3) var(--space-4); border-radius: var(--r-m); font: 600 var(--fs-5)/1.4 var(--font-display); color: var(--text); } .ngm-method__sum::-webkit-details-marker { display: none; } .ngm-method__sum::before { content: '+'; width: 1em; text-align: center; color: var(--accent); font: 400 var(--fs-6)/1 var(--font-mono); } .ngm-method[open] .ngm-method__sum::before { content: '−'; } .ngm-method__sum:hover { color: var(--accent); } .ngm-method__sum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .ngm-method__in { padding: 0 var(--space-4) var(--space-4); max-width: 82ch; } .ngm-method__in p { margin: 0 0 var(--space-3); font-size: var(--fs-4); line-height: 1.6; color: var(--text-2); } .ngm-method__in p:last-child { margin-bottom: 0; } .ngm-method__in b { color: var(--text); } /* W-C6: шеринг расчёта - кнопка появляется вместе с готовой сметой */ .ngm-share { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 0; } .ngm-share[hidden] { display: none; } .ngm-share__btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface); color: var(--accent); cursor: pointer; font: 600 var(--fs-3)/1 var(--font-body); transition: border-color .15s ease, background .15s ease, color .15s ease; } .ngm-share__btn:hover { border-color: var(--accent); background: var(--accent-soft); } .ngm-share__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ngm-share__btn--done { color: var(--good); border-color: var(--good); background: var(--good-soft); } .ngm-share__hint { font-size: var(--fs-2); color: var(--text-3); } .ngm-share__url { flex: 1 1 260px; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-s); background: var(--surface-2); font: 400 var(--fs-2)/1.3 var(--font-mono); color: var(--text-2); } .ngm-share__url[hidden] { display: none; } .ngm-share__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: no-preference) { .ngm-share:not([hidden]) { animation: ngm-share-in .22s ease-out both; } @keyframes ngm-share-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } } @media (prefers-reduced-motion: reduce) { .ngm-case, .ngm-case__recalc, .ngm-share__btn { transition: none; } } @media (max-width: 640px) { .ngm-case__hero-v { font-size: var(--fs-8); } .ngm-case__recalc, .ngm-share__btn { width: 100%; justify-content: center; } .ngm-method__in { padding: 0 var(--space-3) var(--space-3); } .ngm-method__sum { padding: var(--space-3); } } /* @section:catalog (W-K7) + @section:services (W-V2, W-S4) */ /* W-K7: SEO-блок каталога - таблица типов техники и FAQ (robots.html) */ .seoq__panel { margin-top: var(--space-4); } .seoq__panel + .seoq__panel { margin-top: var(--space-4); } .seoq__panel .panel__t { margin: 0 0 var(--space-3); } .seoq__scroll { overflow-x: auto; } .seoq__tbl { width: 100%; min-width: 520px; border-collapse: collapse; } .seoq__tbl th, .seoq__tbl td { text-align: left; vertical-align: top; padding: 11px var(--space-4) 11px 0; border-bottom: 1px solid var(--border); } .seoq__tbl th:last-child, .seoq__tbl td:last-child { padding-right: 0; } /* Строка заголовков колонок дублирует название панели, поэтому скрыта визуально: в разметке остаётся для скринридеров и разбора таблицы поисковиками */ .seoq__tbl thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Линия над первой строкой отделяет таблицу от заголовка панели так же, как строки отделены друг от друга */ .seoq__tbl tbody tr:first-child th, .seoq__tbl tbody tr:first-child td { padding-top: 11px; border-top: 1px solid var(--border); } .seoq__tbl tbody th { font: 600 var(--fs-4)/1.5 var(--font-body); color: var(--text); white-space: nowrap; } .seoq__tbl tbody th a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } .seoq__tbl tbody th a:hover { color: var(--accent); border-bottom-color: currentColor; } .seoq__tbl tbody td { font-size: var(--fs-4); line-height: 1.55; color: var(--text-2); } .seoq__tbl tbody tr:last-child th, .seoq__tbl tbody tr:last-child td { border-bottom: 0; } .seoq__c { white-space: nowrap; color: var(--text-3); font-size: var(--fs-3); } .seoq__n { font: 600 var(--fs-5)/1 var(--font-mono); color: var(--text); } .seoq__faq { display: grid; gap: 0 var(--space-6); align-items: start; } @media (min-width: 900px) { .seoq__faq { grid-template-columns: 1fr 1fr; } } .seoq__q { border-bottom: 1px solid var(--border); } .seoq__q > summary { display: flex; align-items: flex-start; gap: var(--space-3); padding: 13px 0; cursor: pointer; list-style: none; font: 600 var(--fs-5)/1.5 var(--font-body); color: var(--text); } .seoq__q > summary::-webkit-details-marker { display: none; } .seoq__q > summary:hover { color: var(--accent); } .seoq__q > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } /* «галочка» вместо иконки: маркер details отключён, состояние показываем поворотом */ .seoq__q > summary::after { content: ''; flex: none; width: 8px; height: 8px; margin: 6px 0 0 auto; border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3); transform: rotate(45deg); transition: transform .18s ease; } .seoq__q[open] > summary::after { transform: rotate(-135deg); } .seoq__q p { margin: 0 0 var(--space-3); max-width: 72ch; font-size: var(--fs-4); line-height: 1.65; color: var(--text-2); } @media (prefers-reduced-motion: reduce) { .seoq__q > summary::after { transition: none; } } /* Разделительная линия над строкой ссылок убрана по замечанию заказчика: FAQ выше уже отбит рамками, отступа достаточно */ .seoq__more { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; font-size: var(--fs-3); } .seoq__more a { color: var(--accent); text-decoration: none; } .seoq__more a:hover { text-decoration: underline; } /* W-V2: SLA таблицей + шаги инцидента (services.html) */ .slatab { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--space-4) var(--space-5); margin-top: var(--space-5); } .slatab__t { width: 100%; border-collapse: collapse; } .slatab__cap { caption-side: top; text-align: left; padding-bottom: var(--space-3); font: 600 var(--fs-1)/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } .slatab__t th, .slatab__t td { text-align: left; vertical-align: baseline; padding: 12px var(--space-4) 12px 0; border-bottom: 1px solid var(--border); } .slatab__t th:last-child, .slatab__t td:last-child { padding-right: 0; } .slatab__t thead th { padding-top: 0; font: 600 var(--fs-1)/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } .slatab__t tbody th { width: 32%; font: 600 var(--fs-5)/1.45 var(--font-body); color: var(--text); } .slatab__t tbody tr:last-child th, .slatab__t tbody tr:last-child td { border-bottom: 0; } .slatab__v { width: 22%; white-space: nowrap; font: 700 var(--fs-7)/1.15 var(--font-mono); letter-spacing: -0.01em; color: var(--text); } .slatab__f { font-size: var(--fs-4); line-height: 1.5; color: var(--text-2); } .slatab__lbl { display: none; } @media (max-width: 640px) { .slatab { padding: var(--space-4); } .slatab__t, .slatab__t tbody, .slatab__t tr, .slatab__t th, .slatab__t td { display: block; width: auto; } .slatab__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .slatab__t tbody tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); } .slatab__t tbody tr:first-child { padding-top: 0; } .slatab__t tbody tr:last-child { padding-bottom: 0; border-bottom: 0; } .slatab__t th, .slatab__t td { padding: 0; border-bottom: 0; } .slatab__v { margin: 2px 0 4px; } .slatab__lbl { display: inline; color: var(--text-3); } } .incflow { margin-top: var(--space-4); } .incflow__t { margin: 0 0 var(--space-3); font: 600 var(--fs-1)/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } .incflow__row { display: flex; align-items: stretch; gap: var(--space-4); list-style: none; margin: 0; padding: 0; } .incflow__step { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--space-3); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-s); padding: 12px var(--space-3); box-shadow: var(--shadow-card); } .incflow__n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 600 var(--fs-2)/24px var(--font-mono); text-align: center; } .incflow__s { min-width: 0; font-size: var(--fs-4); line-height: 1.4; color: var(--text-2); } /* стрелка живёт в зазоре между шагами - без лишних узлов в разметке */ .incflow__step:not(:last-child)::after { content: '→'; position: absolute; top: 50%; right: calc(var(--space-4) * -1); width: var(--space-4); transform: translateY(-50%); text-align: center; font-size: var(--fs-4); color: var(--text-3); } @media (max-width: 760px) { .incflow__row { flex-direction: column; } .incflow__step:not(:last-child)::after { content: '↓'; top: auto; right: auto; bottom: calc(var(--space-4) * -1); left: 50%; width: auto; height: var(--space-4); line-height: var(--space-4); transform: translateX(-50%); } } /* W-S4: осязаемые результаты аудита - иконка формата у каждого пункта (consulting.html) */ .delv li { align-items: flex-start; flex-wrap: wrap; gap: var(--space-2); } .delv__ic { flex: none; display: inline-flex; width: 18px; height: 18px; margin-top: 2px; color: var(--accent); } .delv__ic svg { display: block; width: 100%; height: 100%; } .delv__x { flex: 1 1 auto; min-width: 0; } .delv__fmt { flex: none; margin-top: 1px; padding: 4px 7px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--text-3); font: 600 var(--fs-1)/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; } /* @section:fixes - находки скриншот-диагностики 20.08.2026 */ /* Значение характеристики схлопывалось до нуля при длинном названии («Пропускная способность» съедала «300 шт/ч»): теперь значение всегда по контенту, длинное название честно обрезается многоточием. */ .prod__specs li { grid-template-columns: minmax(0, 1fr) auto; } .prod__specs li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .prod__specs li b { white-space: nowrap; } /*