/* ============================================================ ТЕХНОВОЛГА — прототип (TV-REBIRTH-01) ------------------------------------------------------------ Единственный файл с отличиями от мастер-стилей. v2.css, v2.js и electric-field.* лежат побайтно как в мастере. Здесь только: 1. текстовый знак в шапке и подвале вместо растрового логотипа; 2. подгонка размера надписи в центре ядра под более длинное слово (сама сфера, её слои и размеры не трогаются); 3. мелочи для удалённых элементов. ============================================================ */ /* ---------- 1. Текстовый знак ---------- Типографика взята у надписи в ядре мастера (.core-label-main / .core-label-sub), чтобы шапка говорила тем же языком. Высота блока повторяет высоту прежнего логотипа: 42px, ниже 420px — 34px. */ .brand-text { text-decoration: none; } .brand-lockup { display: flex; flex-direction: column; justify-content: center; height: 42px; line-height: 1; } .brand-name { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 0.01em; color: var(--core-ink, var(--ink)); white-space: nowrap; } .brand-sub { margin-top: 5px; font-size: 9.5px; font-weight: 650; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; } :root[data-theme="light"] .brand-name { color: var(--ink); } @media (max-width: 420px) { .brand-lockup { height: 34px; } .brand-name { font-size: 18px; } .brand-sub { font-size: 8px; margin-top: 4px; } } /* Подвал: тот же знак, отступ — как у прежнего .footer-logo. */ .footer-lockup { height: 38px; margin-bottom: var(--space-4); } .footer-pending { color: var(--ink-faint); font-size: var(--step--1); } /* В мастере .footer-sub — латинская подпись «Business AI» разрядкой; юрлицо кириллицей в такой разрядке читается как набор букв. */ .footer-bottom .footer-legal-entity { letter-spacing: normal; text-transform: none; } /* ---------- 2. Надпись в центре ядра ---------- «ТЕХНОВОЛГА» длиннее исходной надписи ядра (10 знаков против 7) и набирается системным шрифтом: у Baloo 2 нет кириллицы. Без подгонки слово залезает на кольцо. Меняется только кегль надписи — множитель подобран замером так, чтобы ширина совпала с шириной исходной надписи в мастере. Замер (Chromium, все ширины): отношение ширин при равном кегле ≈ 1.8; точное совпадение даёт k ≈ 0.55. Принято 0.60: слово на ~7% шире мастера, но остаётся в спокойной зоне кольца и уравновешено с подписью BUSINESS AI. */ :root { --tv-label-k: 0.6; } .core-label-main { font-size: calc(clamp(19px, 2.1vw, 34px) * var(--tv-label-k)); } .fcore-label-main { font-size: calc(clamp(15px, 1.35vw, 21px) * var(--tv-label-k)); } .cc-label-main { font-size: calc(clamp(16px, 1.5vw, 23px) * var(--tv-label-k)); } .kn-core-main { font-size: calc(clamp(17px, 1.6vw, 25px) * var(--tv-label-k)); } .om-core-main { font-size: calc(clamp(15px, 1.4vw, 22px) * var(--tv-label-k)); } /* ============================================================ 3. ЭНЕРГЕТИЧЕСКИЙ ЗНАК В ШАПКЕ (TV-REBIRTH-01.1) ------------------------------------------------------------ Маленькая родственница ядра Hero: та же текстура core-ring-sm.webp и тот же рецепт слоёв (свечение → колодец → задний слой scale 1.1, blur, обратное вращение → передний слой), но медленнее и тише. Кейфреймы spin / spin-back — мастерские из v2.css. Исторический знак лежит поверх и НЕ анимируется. Только , без : мастерское `.brand img { height: 42px }` иначе растянуло бы слои. ============================================================ */ .brand-text { gap: 11px; } .brand-energy { --be-size: 56px; --be-glow-lo: 0.45; --be-glow-hi: 0.72; position: relative; flex-shrink: 0; width: var(--be-size); height: var(--be-size); /* Визуально 56px, в раскладке — 42px, как прежний логотип: высота шапки не меняется. */ margin-block: calc((42px - var(--be-size)) / 2); } .brand-energy > span { position: absolute; pointer-events: none; } .be-glow { inset: 2%; border-radius: 50%; background: radial-gradient(circle, var(--glow-core) 0%, var(--glow-soft) 40%, transparent 70%); filter: blur(7px); opacity: var(--be-glow-hi); animation: tv-be-breathe 9s ease-in-out infinite; } .be-well { inset: 20%; border-radius: 50%; background: radial-gradient(circle, var(--core-well-in) 0%, var(--core-well-mid) 60%, transparent 80%); } .be-ring { inset: 0; background: url("/core-ring-sm.webp?v=20260825-rc1") center / contain no-repeat; will-change: transform; } .be-ring-front { animation: spin 96s linear infinite; } .be-ring-back { opacity: 0.42; transform: scale(1.1); filter: blur(0.6px) saturate(1.15); animation: spin-back 150s linear infinite; } .be-mark { inset: 30%; background: url("/assets/technovolga-mark.png") center / contain no-repeat; filter: drop-shadow(0 0 2.5px var(--glow-core)); } @keyframes tv-be-breathe { 0%, 100% { opacity: var(--be-glow-lo); } 50% { opacity: var(--be-glow-hi); } } /* Светлая тема: колодец уже тёмный (токены мастера), свечение тише — на белом оно быстро становится грязным. */ :root[data-theme="light"] .brand-energy { --be-glow-lo: 0.22; --be-glow-hi: 0.4; } @media (max-width: 420px) { .brand-energy { --be-size: 46px; margin-block: calc((34px - var(--be-size)) / 2); } .brand-text { gap: 9px; } } @media (prefers-reduced-motion: reduce) { .be-glow, .be-ring { animation: none; } } /* ============================================================ 4. ТЕЛЕФОН В ШАПКЕ ------------------------------------------------------------ Язык — как у переключателя темы: стеклянная пилюля высотой 40px, тонкая граница. Иконка в фирменном синем, номер светлым. Не кнопка: главное действие остаётся «Обсудить внедрение». ============================================================ */ .nav-phone { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px 0 6px; border-radius: var(--radius-pill); background: var(--glass); border: 1px solid var(--border); color: var(--ink); font-size: var(--step--1); font-weight: 650; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .nav-phone:hover, .nav-phone:focus-visible { border-color: var(--border-strong); background: var(--glass-strong); } .nav-phone-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-soft); flex-shrink: 0; } .nav-phone-icon svg { width: 14px; height: 14px; } .nav-phone-call { display: none; } .nav-phone-top { display: none; } /* Свёрнутое меню (≤1080px, как в мастере): в выпадающем блоке — полноширинная строка «Позвонить +7 …». */ @media (max-width: 1080px) { .nav-actions .nav-phone { flex: 1 1 100%; justify-content: center; height: 46px; padding: 0 18px 0 8px; } .nav-actions .nav-phone-call { display: inline; color: var(--ink-muted); font-weight: 600; } } /* Планшет: в верхней строке хватает места — номер виден сразу, поэтому в выпадающем меню он не дублируется. */ @media (min-width: 721px) and (max-width: 1080px) { .nav-phone-top { display: inline-flex; } .nav-actions .nav-phone { display: none; } } /* Узкие ноутбуки (1081–1320px): полное меню + знак + телефон + тема + CTA в одну строку не помещаются. Сначала чуть плотнее расстояния в шапке, ниже порога — телефон становится круглой иконкой (tel: и aria-label с полным номером сохраняются). Порог подобран замером. */ /* 01.2: пороги пересчитаны под SHOP / Telegram / MAX — см. раздел 5. */ @media (min-width: 1081px) and (max-width: 1439px) { .nav { gap: 16px; } .nav-menu { gap: 14px; } } /* ============================================================ 5. ШАПКА: ГЕОМЕТРИЯ, SHOP, TELEGRAM, MAX (TV-REBIRTH-01.2) ------------------------------------------------------------ Шире становится только контейнер шапки: он берёт ширину Hero (--wrap-hero, 1440px) вместо общего --wrap (1160px), поля — мастерский --gutter (32px на десктопе). Знак встаёт ровно над левым краем H1, CTA — над правым краем Hero. Секции ниже живут в своём .wrap и не меняются. ============================================================ */ @media (min-width: 1081px) { .site-header > .wrap { max-width: var(--wrap-hero); } } /* ---------- SHOP ---------- Не пункт меню и не вторая главная кнопка: контурная стеклянная пилюля с лёгким синим оттенком. CTA остаётся единственной залитой. */ .nav-shop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px 0 16px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 6%, var(--glass)); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); color: var(--accent-soft); font-size: var(--step--1); font-weight: 750; letter-spacing: 0.12em; white-space: nowrap; text-decoration: none; flex-shrink: 0; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease); } .nav-shop:hover, .nav-shop:focus-visible { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 65%, transparent); background: color-mix(in srgb, var(--accent) 11%, var(--glass-strong)); box-shadow: 0 0 18px -4px color-mix(in srgb, var(--accent) 55%, transparent); } :root[data-theme="light"] .nav-shop { color: var(--accent); } :root[data-theme="light"] .nav-shop:hover, :root[data-theme="light"] .nav-shop:focus-visible { color: var(--accent); } .nav-shop-icon { width: 16px; height: 16px; display: none; flex-shrink: 0; } .nav-shop-ext { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.85; } .nav-shop-full { display: none; letter-spacing: 0.01em; } /* ---------- Telegram / MAX ---------- Круглые стеклянные кнопки 40px — тот же размер и язык, что у переключателя темы. На десктопе только иконка (подпись — в aria-label и title), в мобильном меню — иконка + подпись. */ .nav-msg { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 40px; height: 40px; padding: 0; border-radius: var(--radius-pill); background: var(--glass); border: 1px solid var(--border); color: var(--accent-soft); font-size: var(--step--1); font-weight: 650; white-space: nowrap; text-decoration: none; flex-shrink: 0; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease); } :root[data-theme="light"] .nav-msg { color: var(--accent); } a.nav-msg:hover, a.nav-msg:focus-visible { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--glass-strong); box-shadow: 0 0 16px -4px color-mix(in srgb, var(--accent) 60%, transparent); } .nav-msg-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav-msg-icon svg { width: 16px; height: 16px; transform: translateX(-1px); } /* Знак MAX: подтверждённого логотипа нет — типографская метка. */ .nav-max-glyph { font-family: var(--font-display); font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; line-height: 1; } .nav-msg-label, .nav-msg-note { display: none; } /* MAX без ссылки: явно неактивен — приглушён, без hover, курсор «нельзя». */ .nav-msg.is-pending { color: var(--ink-faint); border-style: dashed; opacity: 0.6; cursor: not-allowed; } /* ---------- Ноутбуки ---------- Приоритет сохранения (ТЗ): знак > CTA > SHOP > телефон > тема > пункты меню > TG/MAX. Поэтому первыми уходят иконки мессенджеров, затем телефон сворачивается в иконку (как в 01.1), затем уплотняются расстояния меню. Пороги подобраны замером. */ @media (min-width: 1081px) { /* На десктопе все дети .nav-utility скрыты (мобильные телефон, тема, бургер), но пустой блок съедал 40px: отступ + gap. */ .nav-utility { display: none; } } /* ≥1440: всё в строку, расстояния плотнее мастерских 24px. 02C-1: подписи меню стали длиннее («AI для владельца», «Решения») — промежутки уменьшены на минимум, нужный для запаса ≥ 9px. */ @media (min-width: 1440px) { .nav { gap: 16px; } .nav-menu { gap: 12px; } .nav-actions { gap: 8px; } .nav-shop { padding: 0 12px 0 14px; } } /* <1440: первыми уходят Telegram и MAX (в свёрнутом меню ≤1080 они снова есть). */ @media (min-width: 1081px) and (max-width: 1439px) { .nav-actions .nav-msg { display: none; } } /* <1360: телефон — круглая иконка (порог 01.1 был 1260; SHOP стоит выше телефона по приоритету и забирает место раньше). */ @media (min-width: 1081px) and (max-width: 1359px) { .nav-actions .nav-phone { width: 40px; padding: 0; justify-content: center; gap: 0; } .nav-actions .nav-phone-num { display: none; } } /* <1200: плотнее расстояния. */ @media (min-width: 1081px) and (max-width: 1199px) { .nav { gap: 12px; } .nav-menu { gap: 12px; } .nav-actions { gap: 6px; } } /* <1170: пункт «Вопросы» уходит из строки меню — по приоритету ТЗ подписи меню уступают раньше темы, телефона, SHOP и CTA. Раздел остаётся на странице; в бургере ≤1080 пункт есть. */ @media (min-width: 1081px) and (max-width: 1169px) { .nav-menu li:has(> a[href="#faq"]) { display: none; } } /* 02C-1: подписи меню длиннее — при 1081–1099px в строку не входят и «Интеграции» (тот же приоритет ТЗ). В бургере ≤1080 и в подвале пункт есть; сцена #connect на странице. */ @media (min-width: 1081px) and (max-width: 1099px) { .nav-menu li:has(> a[href="#connect"]) { display: none; } } /* ---------- Свёрнутое меню (≤1080px) ---------- Порядок в меню: «Позвонить», Telegram + MAX (пополам), «Интернет-магазин», затем CTA. */ @media (max-width: 1080px) { .nav-actions .nav-phone { order: 1; } .nav-actions .nav-msg { order: 2; } .nav-actions .nav-shop { order: 3; } .nav-actions .btn { order: 4; flex: 1 1 100%; } .nav-actions .nav-msg { flex: 1 1 calc(50% - var(--space-3) / 2); width: auto; height: 46px; padding: 0 16px; } .nav-actions .nav-msg-label { display: inline; color: var(--ink); } .nav-actions .nav-msg.is-pending .nav-msg-label { color: var(--ink-faint); } /* Знак MAX — та же надпись, что и подпись: в меню не дублируем. */ .nav-actions .nav-max-glyph { display: none; } .nav-actions .nav-msg-note { display: inline; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.04em; } .nav-actions .nav-msg-note::before { content: "· "; } .nav-actions .nav-shop { flex: 1 1 100%; height: 46px; letter-spacing: 0.01em; gap: 8px; } .nav-actions .nav-shop-label { display: none; } .nav-actions .nav-shop-full, .nav-actions .nav-shop-icon { display: inline; } } /* ============================================================ 6. HERO: БЕЗ ПЛАШКИ, ВЫХОДЫ ЯДРА (TV-REBIRTH-01.2) ------------------------------------------------------------ Плашка «ТЕХНОВОЛГА · Разработчик и интегратор…» удалена из разметки без замены. H1 поднимается на высоту плашки с её отступом; колонка выровнена по центру сетки, поэтому сам Hero визуально не проседает — компенсация не нужна. Выходы — тот же компонент .channel, что и входы, в пустой третьей колонке сетки. Линии рисует technovolga.js. ============================================================ */ .hero-outputs { position: relative; z-index: 2; display: flex; align-items: center; /* Отступ от ядра такой же, как у входов: пилюли стоят у ядра, правая часть колонки остаётся пустой — воздух сохраняется. */ padding-inline-start: clamp(8px, 2.4vw, 44px); min-width: 0; animation: hero-in 0.6s var(--ease) both; animation-delay: 0.18s; } .channels-out { gap: clamp(12px, 1.4vw, 20px); } /* Входы при наведении сдвигаются к ядру (влево); выходы — тоже к нему. */ .channels-out .channel:hover { transform: translateX(3px); } /* Слой линий выходов — во всю сетку Hero, под пиллами и ядром. */ .connections-out { z-index: 1; } /* Планшет (721–1080): оффер на всю ширину сверху, ниже ядро со входами слева и выходы справа — во второй колонке. */ @media (max-width: 1080px) { .hero-outputs { padding-inline-start: clamp(12px, 3vw, 40px); } } /* Без сдвига связка «входы – ядро – выходы» прижата влево и справа остаётся 120–280px пустоты. Сдвигаем её целиком на половину этого остатка — композиция встаёт по центру под оффером. Формула — линейная аппроксимация замера на 721/768/900/1024/1080 (остаток/2 = 59/70/99/127/140px). Через left, а не transform: transform занят мастерской анимацией появления hero-in. */ @media (min-width: 721px) and (max-width: 1080px) { .hero-scene, .hero-outputs { position: relative; left: calc(22vw - 99px); } } /* Мобильный: линии скрыты (мастер), входы рядом над ядром нет — у мастера они под ядром; выходы — сетка 2×2 под ними. */ @media (max-width: 720px) { .hero-outputs { padding-inline-start: 0; justify-content: center; margin-top: calc(-1 * var(--space-7) + var(--space-3)); } .channels-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); width: min(100%, 360px); } .channels-out .channel { justify-content: center; } } @media (prefers-reduced-motion: reduce) { .hero-outputs { animation: none; } } /* ============================================================ 7. КАРКАС СЦЕН 02–12 (TV-REBIRTH-02C-1) ------------------------------------------------------------ Композиция: одна мысль на сцену, крупный заголовок, много воздуха, минимум объектов. Без карточек и рамок по умолчанию; стекло — только для будущих интерфейсов (кейсы, формы). Сцены используют .section ради мастерской паузы анимаций вне экрана (.section:not(.is-ambient), v2.css) и общего фона --bg. Чередование --bg / --bg-alt не используется: страница — одно непрерывное пространство, сцены разделяет свет и воздух. ============================================================ */ .tv-scene { --tv-scene-y: clamp(96px, 11vw + 16px, 200px); --tv-light-x: 50%; position: relative; padding-block: var(--tv-scene-y); overflow: hidden; /* свет сцены не даёт горизонтальной прокрутки */ scroll-margin-top: 72px; /* липкая шапка (67px) не закрывает заголовок */ } .tv-scene__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; } /* Свет сцены: одно мягкое пятно над заголовком. Положение по горизонтали задаёт сама сцена (--tv-light-x), поэтому соседние сцены не повторяют друг друга. Свет «входит» сверху — оттуда же, откуда приходит линия маркера. */ .tv-scene-light { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .tv-scene-light::before { content: ""; position: absolute; top: calc(var(--tv-scene-y) * -0.35); left: var(--tv-light-x); width: min(880px, 110vw); aspect-ratio: 1.6; transform: translateX(-50%); background: radial-gradient(ellipse at center, var(--glow-ambient) 0%, transparent 68%); filter: blur(20px); } /* ---------- Типографика сцены: три уровня ---------- Метка (мастерский .eyebrow) → заголовок → одна фраза. */ .tv-scene__label { margin: 0 0 var(--space-5); } .tv-scene__title { max-width: 17ch; margin: 0; font-size: clamp(30px, 2.6vw + 14px, 54px); font-weight: 800; line-height: 1.06; letter-spacing: -0.022em; } /* Сцены-высказывания (переход к доказательствам) — крупнее. */ .tv-scene__title--statement { font-size: clamp(36px, 4vw + 14px, 76px); max-width: none; } .tv-scene__lead { max-width: 36ch; margin: var(--space-5) 0 0; font-size: var(--step-1); line-height: 1.55; color: var(--ink-muted); } .tv-scene__formula { margin: var(--space-6) 0 0; font-size: var(--step-2); font-weight: 650; letter-spacing: 0.01em; color: var(--ink); } .tv-scene__formula span { color: var(--accent); padding-inline: 0.35em; } .tv-scene__actions { margin-top: var(--space-7); display: flex; flex-wrap: wrap; gap: var(--space-3); } /* Центрированные сцены (владелец, контроль, аудит, контакт). */ .tv-scene--center .tv-scene__inner { align-items: center; text-align: center; } .tv-scene--center .tv-scene__title { max-width: none; } /* Переносы в заголовках сцен заданы в разметке (
): вторая строка — акцентная. Ограничение ширины в ch тогда только мешало, рвя акцентную строку посередине. На узком экране br остаётся: длинная строка переносится сама, а акцентная часть не отрывается от своего начала («а / не просто вопрос»). */ .tv-scene__title { max-width: none; } .tv-scene--center .tv-scene__lead { margin-inline: auto; } .tv-scene--center .tv-scene__actions { justify-content: center; } /* Ключевые сцены — больше воздуха и заголовок крупнее. */ .tv-scene--major { --tv-scene-y: clamp(112px, 13vw + 16px, 232px); } .tv-scene--major .tv-scene__title { font-size: clamp(32px, 3.2vw + 14px, 64px); } /* ---------- Маркер сцены ---------- Сквозной мотив страницы: короткая линия света приходит сверху и упирается в маленькое ядро — та же текстура core-ring-sm.webp, что в шапке и в Hero, но в 28px и тихо. Без JS и без измерений; вне экрана замирает вместе с .section (мастерская пауза). */ .tv-scene-marker { --tv-mk-core: 30px; --tv-mk-line: clamp(40px, 5vw, 72px); position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 0 var(--space-5); width: var(--tv-mk-core); } .tv-scene-marker--long { --tv-mk-line: clamp(64px, 9vw, 128px); } .tv-scene-marker__line { position: relative; width: 1px; height: var(--tv-mk-line); background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 55%, transparent)); overflow: hidden; } /* Импульс бежит вниз по линии — энергия «приходит» в сцену. */ .tv-scene-marker__line::after { content: ""; position: absolute; left: -1px; width: 3px; height: 18px; top: -18px; border-radius: 2px; background: linear-gradient(to bottom, transparent, var(--accent-soft)); animation: tv-mk-pulse 4.8s var(--ease) infinite; } .tv-scene-marker__core { position: relative; width: var(--tv-mk-core); height: var(--tv-mk-core); border-radius: 50%; background: radial-gradient(circle, var(--core-well-in) 0 34%, transparent 62%); } .tv-scene-marker__core::before { content: ""; position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, var(--glow-soft) 0%, transparent 65%); } .tv-scene-marker__core::after { content: ""; position: absolute; inset: 0; background: url("/core-ring-sm.webp?v=20260825-rc1") center / contain no-repeat; animation: spin 96s linear infinite; } .tv-scene--center .tv-scene-marker { align-self: center; } /* Светлая тема: свечение тише, линия плотнее — на белом иначе теряется. */ :root[data-theme="light"] .tv-scene-marker__core::before { opacity: 0.6; } :root[data-theme="light"] .tv-scene-marker__line { background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 70%, transparent)); } @keyframes tv-mk-pulse { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 70%, 100% { transform: translateY(calc(var(--tv-mk-line) + 18px)); opacity: 0; } } /* ---------- Резерв под визуальную сцену ---------- Только каркас: тонкая сетка мастерского языка, гаснущая к краям, и служебная подпись для локального просмотра (в ::after, поэтому не попадает ни в текст страницы, ни к скринридерам). Не интерактивен, не фокусируется. Пропорции свои на мобильном. */ .tv-stage { position: relative; width: 100%; margin-top: clamp(48px, 6vw, 88px); aspect-ratio: 16 / 7; border-radius: var(--radius-xl); background-image: linear-gradient(to right, var(--glow-ambient) 1px, transparent 1px), linear-gradient(to bottom, var(--glow-ambient) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 78%); pointer-events: none; } .tv-stage::after { content: attr(data-tv-stage); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; opacity: 0.8; } .tv-stage--wide { aspect-ratio: 16 / 6; } .tv-stage--band { aspect-ratio: 16 / 4; } .tv-stage--narrow { max-width: var(--wrap-narrow); aspect-ratio: 16 / 6; margin-inline: auto; } .tv-stage--case { margin-top: 0; aspect-ratio: 4 / 3; } /* ---------- 05 · Решения: две большие истории ---------- Не карточки: текст и будущий интерфейс работающей системы на одной оси, второй кейс зеркальный. Ширина — как у Hero. */ .tv-scene--solutions { --tv-scene-y: clamp(112px, 13vw + 16px, 232px); } .tv-scene--solutions .tv-scene-marker { margin-bottom: var(--space-6); } .tv-cases { position: relative; z-index: 1; max-width: var(--wrap-hero); display: flex; flex-direction: column; gap: clamp(96px, 11vw, 176px); margin-top: clamp(80px, 10vw, 160px); } .tv-case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; scroll-margin-top: 72px; } .tv-case--mirror { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .tv-case--mirror .tv-case__text { order: 2; } .tv-case__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-5); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .tv-case__kind { color: var(--accent); } .tv-status { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-muted); } .tv-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--glow-core); } .tv-case__title { margin: 0; font-size: clamp(26px, 1.8vw + 14px, 42px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .tv-case__lead { margin: var(--space-5) 0 0; max-width: 40ch; font-size: var(--step-1); line-height: 1.55; } /* ---------- 12 · Контакт: рабочие каналы ---------- */ .tv-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-6); list-style: none; margin: var(--space-7) 0 0; padding: 0; } .tv-contact__link { font-size: var(--step-2); font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; transition: color var(--dur) var(--ease); } a.tv-contact__link:hover { color: var(--accent); } .tv-contact__link.is-pending { color: var(--ink-faint); cursor: not-allowed; } /* ---------- Появление ---------- Скрываем только когда technovolga.js подтвердил, что сам и покажет (класс tv-reveal на ). Без JS, без IntersectionObserver и при reduced motion — всё видно сразу. Только opacity + translate: раскладка не сдвигается. */ .tv-reveal [data-tv-reveal] { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--tv-reveal-delay, 0s); } .tv-reveal [data-tv-reveal].is-revealed { opacity: 1; transform: none; } /* ---------- Адаптив ---------- */ @media (max-width: 1080px) { .tv-scene, .tv-case { scroll-margin-top: 96px; } /* шапка 91px */ .tv-case, .tv-case--mirror { grid-template-columns: minmax(0, 1fr); } .tv-case--mirror .tv-case__text { order: 0; } .tv-stage--case { aspect-ratio: 16 / 9; } } @media (max-width: 720px) { .tv-scene { --tv-scene-y: clamp(72px, 16vw, 104px); } .tv-scene--major, .tv-scene--solutions { --tv-scene-y: clamp(88px, 20vw, 120px); } .tv-scene-marker { --tv-mk-core: 26px; --tv-mk-line: 36px; } .tv-scene-marker--long { --tv-mk-line: 56px; } .tv-stage, .tv-stage--wide, .tv-stage--band, .tv-stage--narrow { aspect-ratio: 4 / 3; } .tv-stage--case { aspect-ratio: 4 / 3; } .tv-scene__formula span { padding-inline: 0.2em; } .tv-contact { flex-direction: column; align-items: center; gap: var(--space-4); } } @media (prefers-reduced-motion: reduce) { .tv-scene-marker__line::after { animation: none; opacity: 0; } .tv-scene-marker__core::after { animation: none; } .tv-reveal [data-tv-reveal] { opacity: 1; transform: none; transition: none; } } /* ============================================================ 8. СЦЕНА 02 · BUSINESS AI — СОБЫТИЕ (TV-REBIRTH-VD2-B) ------------------------------------------------------------ Сюжет: AI в отдельном окне → граница рассыпается → бизнес подключается → импульс → Business AI. Частицы, реки и импульс — в tv-universe.js (один холст мира), здесь — окно, ядро, подписи. Времена ниже (секунды от старта) повторяют таблицу TL в tv-universe.js (FIX1): вопрос 0.6, ответ 1.3, пауза на понимание до 3.4, потеря устойчивости кромки 3.4–4.5, распад рамки 4.5–5.5 (+стекло до 6.0), рост ядра 5.6 (1.7), реки 5.35–6.9 (свои старты в движке), пик 7.5, подпись 7.9. Разметка по умолчанию — конечное состояние; .is-armed ставит начало (только движок с WebGL и без reduced motion). ============================================================ */ .tv-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .tv-scene--bai { --tv-scene-y: clamp(72px, 7vw + 8px, 128px); } .tv-scene--bai .tv-scene-light::before { top: 12%; } .tv-bai-layout { display: grid; grid-template-columns: minmax(0, 4.7fr) minmax(0, 7.3fr); gap: clamp(24px, 3vw, 48px); align-items: center; } .tv-bai-layout__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; } .tv-bai-layout .tv-scene__title { font-size: clamp(30px, 2.1vw + 14px, 44px); } .tv-bai-layout .tv-scene__lead { max-width: 30ch; } .tv-scene__lead + .tv-scene__lead { margin-top: var(--space-4); } .tv-scene__lead--strong { color: var(--ink); } /* Визуал шире своей колонки — уходит к правому краю окна. */ .tv-bai { position: relative; z-index: 1; margin: 0; margin-right: calc(-1 * min(180px, max(0px, (100vw - var(--wrap)) / 2 + 8px))); } .tv-bai__stage { /* Центр ядра и размеры — общие для окна, ядра и движка (движок читает положение ядра и окна из раскладки). */ --cx: 56%; --cy: 50%; --cw: 32%; --ww: 58%; --wh: 80%; position: relative; width: 100%; aspect-ratio: 900 / 640; } /* Статичные реки — только без WebGL / без JS. */ .tv-bai__static { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: color-mix(in srgb, var(--accent) 34%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; } .tv-bai__static path { vector-effect: non-scaling-stroke; } .tv-bai__static--mob { display: none; } .tv-universe-on .tv-bai__static { display: none; } /* ---------- Окно изолированного AI ---------- */ @property --tv-sweep { syntax: ""; inherits: false; initial-value: 0deg; } .tv-bai__window { position: absolute; left: calc(var(--cx) - var(--ww) / 2); top: calc(var(--cy) - var(--wh) / 2); width: var(--ww); height: var(--wh); border-radius: 24px; z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; } .tv-bai__win-glass { position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--surface) 74%, transparent); backdrop-filter: blur(18px) saturate(0.9); -webkit-backdrop-filter: blur(18px) saturate(0.9); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85), inset 0 1px 0 var(--glass-strong); } :root[data-theme="light"] .tv-bai__win-glass { background: color-mix(in srgb, var(--surface) 78%, transparent); box-shadow: 0 40px 70px -36px rgba(15, 35, 70, 0.32), inset 0 1px 0 #fff; } /* Блик по стеклу — один раз во время паузы: стекло «материально». */ .tv-bai__win-glass::after { content: ""; position: absolute; inset: -20% -60%; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.07) 50%, transparent 58%); transform: translateX(-60%); opacity: 0; } :root[data-theme="light"] .tv-bai__win-glass::after { background: linear-gradient(105deg, transparent 42%, rgba(47, 123, 255, 0.07) 50%, transparent 58%); } .tv-bai.is-playing .tv-bai__win-glass::after { animation: tv-bai-sheen 1.6s var(--ease) 2.1s both; } @keyframes tv-bai-sheen { 0% { opacity: 0; transform: translateX(-60%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } } /* Рамка — отдельный слой: исчезает обходом по кругу (conic-маска), ровно там, где движок в этот момент зажигает частицы границы. */ .tv-bai__window::after { --tv-sweep: 0deg; content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid color-mix(in srgb, var(--accent-soft) 45%, var(--border-strong)); -webkit-mask: conic-gradient(from 0deg, transparent var(--tv-sweep), #000 var(--tv-sweep)); mask: conic-gradient(from 0deg, transparent var(--tv-sweep), #000 var(--tv-sweep)); } :root[data-theme="light"] .tv-bai__window::after { border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong)); } .tv-bai__win-bar { position: absolute; left: 18px; right: 18px; top: 14px; display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .tv-bai__win-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); opacity: 0.55; } .tv-bai__win-bar b { margin-left: auto; font-weight: 700; } .tv-bai__msg { position: absolute; max-width: calc(100% - 36px); padding: 10px 16px; font-size: 15px; font-weight: 600; line-height: 1.35; opacity: 0; } .tv-bai__msg--q { right: 22px; top: 58px; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); } .tv-bai__msg--a { left: 22px; bottom: 26px; border-radius: 14px 14px 14px 4px; background: var(--glass-strong); border: 1px solid var(--border); color: var(--ink-muted); } /* ---------- Ядро: тот же вид, что в Hero, роль — интеллект за работой ---------- */ .tv-bai__core { position: absolute; left: var(--cx); top: var(--cy); width: var(--cw); aspect-ratio: 1; display: grid; place-items: center; z-index: 2; transform: translate(-50%, -50%); } .tv-bai__core-glow { position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, var(--glow-core) 0%, var(--glow-soft) 38%, transparent 68%); filter: blur(26px); opacity: 0.85; } .tv-bai__core .core-img-front { animation-duration: 80s; } .tv-bai__core .core-img-back { animation-duration: 124s; } .tv-bai__core-label { position: relative; z-index: 3; font-size: clamp(10px, 0.78vw, 12.5px); font-weight: 750; letter-spacing: 0.26em; text-transform: uppercase; color: var(--core-ink, #EEF4FF); text-shadow: 0 0 14px var(--glow-core); white-space: nowrap; } /* ---------- Временные подписи рек ---------- */ .tv-bai__cap { position: absolute; z-index: 2; transform: translate(-50%, -50%); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; color: var(--ink-muted); text-shadow: 0 0 12px var(--bg), 0 0 4px var(--bg); opacity: 0; pointer-events: none; } .tv-bai.is-playing .tv-bai__cap { animation: tv-bai-cap 1.2s var(--ease) var(--d, 6s) both; } @keyframes tv-bai-cap { 0% { opacity: 0; transform: translate(-50%, calc(-50% + 5px)); } 18% { opacity: 1; transform: translate(-50%, -50%); } 68% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, calc(-50% - 4px)); } } /* ---------- Начало: изолированный AI ---------- */ .tv-bai.is-armed .tv-bai__window { opacity: 1; visibility: visible; } .tv-bai.is-armed .tv-bai__core { transform: translate(-50%, -50%) scale(0.36); filter: grayscale(0.6) brightness(0.72); } .tv-bai.is-armed .tv-bai__core-glow { opacity: 0.14; } .tv-bai.is-armed .tv-bai__core-label { opacity: 0; } /* ---------- Проигрывание ---------- */ .tv-bai.is-playing .tv-bai__msg--q { animation: tv-bai-msg 4.85s var(--ease) both; } .tv-bai.is-playing .tv-bai__msg--a { animation: tv-bai-msg-a 4.85s var(--ease) both; } @keyframes tv-bai-msg { 0%, 12% { opacity: 0; transform: translateY(8px); } 19%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } } @keyframes tv-bai-msg-a { 0%, 26% { opacity: 0; transform: translateY(8px); } 33%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } } .tv-bai.is-playing .tv-bai__win-bar { opacity: 0; transition: opacity 0.4s var(--ease) 4.5s; } /* Стекло теряет плотность только после того, как рамка начала распадаться на частицы — исчезновение читается как распад, а не как растворение. */ .tv-bai.is-playing .tv-bai__win-glass { opacity: 0; transition: opacity 1.1s var(--ease) 4.95s; } /* 3.4–4.5 с: кромка «заряжается» (вместе с бегущим по ней возмущением в движке), затем стирается обходом. */ .tv-bai.is-playing .tv-bai__window::after { animation: tv-bai-charge 1.1s var(--ease) 3.4s both, tv-bai-sweep 1s linear 4.5s both; } @keyframes tv-bai-charge { from { border-color: color-mix(in srgb, var(--accent-soft) 45%, var(--border-strong)); box-shadow: none; } to { border-color: color-mix(in srgb, var(--accent-soft) 85%, transparent); box-shadow: 0 0 18px -4px var(--glow-core), inset 0 0 14px -6px var(--glow-core); } } @keyframes tv-bai-sweep { from { --tv-sweep: 0deg; } to { --tv-sweep: 360deg; } } .tv-bai.is-playing .tv-bai__window { visibility: hidden; transition: visibility 0s linear 6.2s; } /* Ядро «думает» над вопросом, потом получает силу. */ .tv-bai.is-playing .tv-bai__core { transform: translate(-50%, -50%) scale(1); filter: none; transition: transform 1.7s cubic-bezier(0.45, 0, 0.2, 1) 5.6s, filter 1.4s var(--ease) 5.75s; } /* Слабое «дыхание» изолированного ядра в паузе → тишина, пока стоит граница → набор силы, когда реки дошли → вспышка на пике (7.5 с). */ .tv-bai.is-playing .tv-bai__core-glow { animation: tv-bai-glow 8.4s var(--ease) both; } @keyframes tv-bai-glow { 0% { opacity: 0.14; transform: scale(1); } 20% { opacity: 0.24; } 28% { opacity: 0.14; } 36% { opacity: 0.24; } 44% { opacity: 0.14; } 67% { opacity: 0.16; } 77% { opacity: 0.5; transform: scale(1); } 87% { opacity: 0.72; transform: scale(1.04); } 91% { opacity: 1; transform: scale(1.34); } 100% { opacity: 0.85; transform: scale(1); } } .tv-bai.is-playing .tv-bai__core-label { opacity: 1; transition: opacity 0.8s var(--ease) 7.9s; } /* Подписи рек — не список: разный кегль и плотность. */ .tv-bai__cap[data-river="1"] { font-size: 10.5px; opacity: 0; color: var(--ink-faint); } .tv-bai__cap[data-river="3"] { font-size: 10px; letter-spacing: 0.2em; } .tv-bai__cap[data-river="0"] { font-size: 12.5px; } /* ---------- Планшет: заголовок сверху, крупный мир снизу ---------- */ @media (max-width: 1080px) { .tv-bai-layout { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); } .tv-bai { margin-right: 0; width: 100%; max-width: 900px; margin-inline: auto; } .tv-bai-layout .tv-scene__lead { max-width: 44ch; } } /* ---------- Мобильный: вертикальная история ---------- */ @media (max-width: 720px) { .tv-bai__stage { --cx: 50%; --cy: 52%; --cw: 56%; --ww: 90%; --wh: 66%; aspect-ratio: 360 / 560; } .tv-bai__static--desk { display: none; } .tv-bai__static--mob { display: block; } .tv-universe-on .tv-bai__static--mob { display: none; } .tv-bai__msg { font-size: 14px; padding: 9px 13px; } .tv-bai__core-label { font-size: 10.5px; letter-spacing: 0.22em; } .tv-bai__cap { font-size: 11px; letter-spacing: 0.12em; } } @media (prefers-reduced-motion: reduce) { .tv-bai__core .core-img-front, .tv-bai__core .core-img-back { animation: none; } } /* ============================================================ 9. ЖИВАЯ ВСЕЛЕННАЯ БИЗНЕСА (TV-REBIRTH-VD2-A1) ------------------------------------------------------------ Холст создаёт tv-universe.js: фиксирован под всей страницей, декоративный, событий не принимает. Чтобы мир был виден сквозь сцены, их сплошной фон снимается — только у новых сцен .tv-scene (Hero и подвал не меняются). Без JS страница выглядит как раньше: фон тела тот же цвет. ============================================================ */ .tv-universe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; } .tv-scene { background: transparent; } /* Нет WebGL: спокойная статичная глубина из CSS. */ .tv-universe-fallback { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 70% 40% at 60% 64%, var(--glow-soft), transparent 70%), radial-gradient(ellipse 120% 60% at 50% 110%, var(--glow-ambient), transparent 70%); } .tv-universe-fallback::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: 0; height: 46%; background-image: linear-gradient(to right, var(--glow-ambient) 1px, transparent 1px), linear-gradient(to bottom, var(--glow-ambient) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(600px) rotateX(62deg); transform-origin: bottom; -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%); mask-image: linear-gradient(to top, #000 10%, transparent 90%); } /* ============================================================ 10. D2 · ОРБИТАЛЬНЫЙ НЕРВНЫЙ ЦЕНТР (TV-REBIRTH-VD2-D2) ------------------------------------------------------------ Сцена обычной высоты (экран), прокрутка страницы свободна. Мир — CSS 3D (perspective на сцене, preserve-3d в мире): ядро TECHNOVOLGA AI — плоскость в центре, поверхности ROS — плоскости на наклонном эллипсе вокруг него, поэтому «перед/за ядром» решает настоящая глубина, а не z-index. Положение, наклон, размытие, яркость и фокус считает technovolga.js; без JS — статичная композиция ниже. Глубина — вуалью и прозрачностью, без фильтров: фильтр в 3D-мире с крупными движущимися планами ронял кадр (замер M1). ============================================================ */ .tv-orb { position: relative; height: 100vh; height: 100svh; min-height: 680px; padding: 0; background: transparent; overflow: hidden; } .tv-orb__stage { position: absolute; inset: 0; z-index: 1; perspective: 1100px; perspective-origin: 50% 50%; touch-action: pan-y; /* вертикальный жест — всегда странице */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%); } .tv-orb__world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; } .tv-orb__flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* --- Ядро TECHNOVOLGA AI: тот же вид, что в Hero и сцене 02 --- */ .tv-orb__core { position: absolute; left: 0; top: 0; width: 720px; aspect-ratio: 1; display: grid; place-items: center; pointer-events: none; transform: translate3d(40px, 0, -950px) translate(-50%, -50%); } .tv-orb__core-glow { position: absolute; inset: -34%; border-radius: 50%; background: radial-gradient(circle, var(--glow-core) 0%, var(--glow-soft) 30%, transparent 62%); opacity: 0.8; animation: core-breathe 7s ease-in-out infinite; } /* Тело сферы — непрозрачный колодец: то, что идёт за ядром, им закрыто. */ .tv-orb__body { position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle, var(--core-well-in) 0 56%, color-mix(in srgb, var(--core-well-in) 80%, transparent) 66%, transparent 71%); pointer-events: auto; } /* Отклик на выбранную область: сторона ядра, обращённая к ней, светлее. */ .tv-orb__core-hi { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), rgba(140, 200, 255, 0.55), rgba(61, 139, 255, 0.18) 30%, transparent 56%); opacity: var(--hk, 0); transition: opacity 0.6s var(--ease); } .tv-orb__core .core-img-front { animation-duration: 90s; } .tv-orb__core .core-img-back { animation-duration: 140s; } .tv-orb__core .core-sweep { animation-duration: 14s; } .tv-orb__core-label { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 22px; font-weight: 750; letter-spacing: 0.34em; text-transform: uppercase; color: var(--core-ink, #EEF4FF); text-shadow: 0 0 18px var(--glow-core); white-space: nowrap; } .tv-orb__core-label b { font-size: 64px; font-weight: 800; letter-spacing: 0.16em; line-height: 1; } /* --- Поверхности на орбите --- */ .tv-orb__obj { position: absolute; left: 0; top: 0; width: 0; height: 0; /* точка орбиты: масштаб и повороты — вокруг неё */ transform-origin: 0 0; outline: none; cursor: pointer; will-change: transform, opacity; -webkit-tap-highlight-color: transparent; } .tv-orb__obj .tv-sp__surf { position: relative; transform: translate(-50%, -50%); } /* центр поверхности — в точке орбиты */ /* Вуаль глубины: дальняя поверхность темнее (днём — в дымке). Только opacity. */ .tv-orb__obj .tv-sp__surf::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--bg); opacity: var(--dim, 0); pointer-events: none; will-change: opacity; } .tv-orb__obj .tv-ui { transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease); } .tv-orb__obj.is-focus .tv-ui { border-color: rgba(170, 210, 255, 0.6); } .tv-orb__obj:focus-visible .tv-ui { outline: 3px solid var(--accent-soft); outline-offset: 8px; } .tv-orb__obj.is-locked .tv-sp__tag::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 10px var(--accent-soft); } .tv-orb__ghost { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; opacity: 0.3; } /* Метка области — над левым верхним углом поверхности; масштаб --ts держит её экранный размер примерно постоянным на любой глубине. */ .tv-sp__tag { --ts: 1; position: absolute; left: 0; bottom: 100%; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(8, 14, 28, 0.78); border: 1px solid rgba(140, 180, 255, 0.4); box-shadow: 0 0 30px -8px rgba(61, 139, 255, 0.6); font-size: 20px; font-weight: 700; color: #fff; white-space: nowrap; transform: scale(var(--ts)); transform-origin: left bottom; } /* Без JS: статичная композиция — та же, что у неподвижной орбиты при reduced motion (снята с technovolga.js, начальная фаза; OWNER-POLISH-1 — орбита −25 % и четыре сигнала владельца). */ .tv-orb__obj[data-area="now"] { transform: translate3d(571.9px, 18.4px, -238.4px) rotateY(-14.16deg) rotateX(4deg) scale(0.72); opacity: 0.968; } .tv-orb__obj[data-area="sig-avg"] { transform: translate3d(14.7px, 38.4px, -51.4px) rotateY(-3.87deg) rotateX(4deg) scale(0.72); opacity: 0.994; } .tv-orb__obj[data-area="sales"] { transform: translate3d(-524.2px, 88.1px, -274.5px) rotateY(6.08deg) rotateX(4deg) scale(0.72); opacity: 0.963; } .tv-orb__obj[data-area="team"] { transform: translate3d(-860.3px, -58.6px, -749.9px) rotateY(12.28deg) rotateX(4deg) scale(0.72); opacity: 0.898; } .tv-orb__obj[data-area="sig-fot"] { transform: translate3d(-579.9px, -172.9px, -1504.6px) rotateY(7.11deg) rotateX(4deg) scale(0.72); opacity: 0.794; } .tv-orb__obj[data-area="proc"] { transform: translate3d(-31.6px, -280.8px, -1848.1px) rotateY(-3.02deg) rotateX(4deg) scale(0.72); opacity: 0.746; } .tv-orb__obj[data-area="sig-price"] { transform: translate3d(549.2px, -363.3px, -1809.4px) rotateY(-13.74deg) rotateX(4deg) scale(0.72); opacity: 0.752; } .tv-orb__obj[data-area="comm"] { transform: translate3d(1001.6px, -156.9px, -1382.8px) rotateY(-22.09deg) rotateX(4deg) scale(0.72); opacity: 0.81; } .tv-orb__obj[data-area="sig-up"] { transform: translate3d(1040.2px, -149.2px, -755.2px) rotateY(-22.8deg) rotateX(4deg) scale(0.72); opacity: 0.897; } .tv-orb__ghost[data-g="0"] { transform: translate3d(-2300px, -1300px, -4200px) translate(-50%, -50%); } .tv-orb__ghost[data-g="1"] { transform: translate3d(2500px, -1500px, -4600px) translate(-50%, -50%); } .tv-orb__ghost[data-g="2"] { transform: translate3d(-2900px, 900px, -3800px) translate(-50%, -50%); } .tv-orb__ghost[data-g="3"] { transform: translate3d(2700px, 1100px, -4000px) translate(-50%, -50%); } /* --- Подписи сцены: не спорят с орбитой --- */ .tv-orb__hud { position: absolute; z-index: 3; left: max(var(--gutter), calc((100% - var(--wrap-hero)) / 2 + var(--gutter))); top: calc(67px + clamp(24px, 4.5vh, 52px)); max-width: 440px; pointer-events: none; } .tv-orb__hud::before { /* подложка: подпись читается поверх любой поверхности */ content: ""; position: absolute; inset: -90px -140px -80px -200px; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 94%, transparent) 45%, transparent); } .tv-orb__eyebrow { margin: 0; } .tv-orb__title { margin: 12px 0 12px; font-size: clamp(28px, 1.9vw + 10px, 42px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; text-shadow: 0 0 24px var(--bg); } .tv-orb__one { margin: 0 0 14px; font-size: clamp(16px, 0.6vw + 9px, 19px); font-weight: 650; line-height: 1.35; color: var(--ink-muted); text-shadow: 0 0 20px var(--bg); } .tv-orb__one .accent-text { font-weight: 750; } .tv-orb__disc { position: absolute; z-index: 3; left: max(var(--gutter), calc((100% - var(--wrap-hero)) / 2 + var(--gutter))); bottom: clamp(30px, 5.5vh, 62px); margin: 0; font-size: 12.5px; color: var(--ink-faint); pointer-events: none; } .tv-orb__hint { position: absolute; z-index: 3; right: max(var(--gutter), calc((100% - var(--wrap-hero)) / 2 + var(--gutter))); bottom: clamp(30px, 5.5vh, 62px); margin: 0; font-size: 12.5px; color: var(--ink-faint); pointer-events: none; transition: opacity 0.4s var(--ease); } .tv-orb__hint--touch { display: none; } @media (hover: none) { .tv-orb__hint--ptr { display: none; } .tv-orb__hint--touch { display: inline; } } .tv-orb__hud { transition: opacity 0.5s var(--ease); } .tv-orb--focus .tv-orb__hint, .tv-orb--focus .tv-orb__hud { opacity: 0; } /* осмотр: подписи уступают место поверхности */ /* --- Поверхности ROS (из D1, без изменений): один продукт, пять геометрий --- Цвета — через токены, светлая тема переопределяет только их. Отклонения в интерфейсе — приглушённый коралловый; тёплый янтарь зарезервирован для единственного сигнала в конце сцены. */ .tv-ui { --ui-strong: #FFFFFF; --ui-ink: #DCE7F8; --ui-muted: #93A9CA; --ui-faint: #7085A6; --ui-line: rgba(140, 180, 255, 0.13); --ui-tile: rgba(255, 255, 255, 0.035); --ui-tile-line: rgba(140, 180, 255, 0.11); --ui-accent: #6FA8FF; --ui-accent-bg: rgba(61, 139, 255, 0.18); --ui-track: rgba(255, 255, 255, 0.07); --ui-up: #6FD7A8; --ui-attn: #F29A8A; --ui-attn-bg: rgba(242, 154, 138, 0.1); --ui-attn-line: rgba(242, 154, 138, 0.38); border-radius: 22px; /* стекло: синий отражённый свет сверху-слева, глубина снизу */ background: radial-gradient(120% 70% at 0% 0%, rgba(90, 150, 255, 0.16), transparent 60%), linear-gradient(160deg, rgba(26, 45, 82, 0.96), rgba(12, 21, 40, 0.97) 55%, rgba(15, 27, 52, 0.97)); border: 1px solid rgba(150, 195, 255, 0.34); /* D2: радиусы теней короче, чем в D1, — у слоя с фильтром границы растут на радиус тени, а на орбите фильтр меняется на ходу. */ box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(200, 225, 255, 0.22) inset, /* световая кромка */ 0 0 0 1px rgba(61, 139, 255, 0.1), 0 0 44px -10px rgba(61, 139, 255, 0.5), 0 0 18px -6px rgba(111, 168, 255, 0.32); color: var(--ui-ink); padding: 24px 28px; font-size: 14px; } .tv-ui--now { width: 1040px; height: 620px; } .tv-ui--sales { width: 1260px; height: 560px; } .tv-ui--team { width: 600px; height: 770px; } .tv-ui--proc { width: 1320px; height: 470px; } .tv-ui--comm { width: 470px; height: 820px; } .tv-ui__bar { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--ui-line); } .tv-ui__logo { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; padding: 4px 8px; border-radius: 6px; background: var(--ui-accent-bg); color: var(--ui-accent); } .tv-ui__bar strong { font-size: 19px; font-weight: 700; color: var(--ui-strong); } .tv-ui__bar span { color: var(--ui-muted); font-size: 13.5px; } .tv-ui__live { margin-left: auto; font-style: normal; font-size: 13px; color: var(--ui-up); display: inline-flex; align-items: center; gap: 7px; } .tv-ui__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3FD39A; box-shadow: 0 0 10px #3FD39A; } .tv-ui__seg { margin-left: auto; display: flex; gap: 4px; font-style: normal; } .tv-ui__seg i { font-style: normal; font-size: 12.5px; padding: 5px 11px; border-radius: 8px; color: var(--ui-muted); } .tv-ui__seg i.on { background: var(--ui-accent-bg); color: var(--ui-strong); } .tv-ui__h { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-muted); display: flex; align-items: center; gap: 14px; } .tv-ui__h em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ui-muted); display: inline-flex; gap: 6px; align-items: center; margin-left: auto; } .tv-ui__h em i { width: 14px; height: 2px; display: inline-block; } .tv-ui__h em i.a { background: var(--ui-accent); } .tv-ui__h em i.b { background: var(--ui-faint); margin-left: 10px; } .tv-ui small { font-size: 12.5px; color: var(--ui-muted); } .tv-ui .up { color: var(--ui-up); font-style: normal; } .tv-ui .down { color: var(--ui-attn); font-style: normal; } .tv-ui__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; } .tv-ui__kpis > div { position: relative; padding: 14px 16px; border-radius: 14px; background: var(--ui-tile); border: 1px solid var(--ui-tile-line); display: flex; flex-direction: column; gap: 4px; } .tv-ui__kpis span { font-size: 12.5px; color: var(--ui-muted); } .tv-ui__kpis b { font-size: 28px; font-weight: 750; color: var(--ui-strong); letter-spacing: -0.01em; } .tv-ui__row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; height: 330px; } .tv-ui__panel { position: relative; padding: 16px 18px; border-radius: 14px; background: var(--ui-tile); border: 1px solid var(--ui-tile-line); display: flex; flex-direction: column; gap: 10px; } .tv-ui__panel svg { flex: 1; width: 100%; min-height: 0; color: #3D8BFF; } .tv-ui__panel svg polyline { fill: none; stroke: var(--ui-accent); stroke-width: 2.4; vector-effect: non-scaling-stroke; } .tv-ui__panel svg .area { fill: url(#tvg0); } .tv-ui__panel svg .prev { stroke: var(--ui-faint); stroke-dasharray: 6 6; stroke-width: 1.6; } .tv-ui__panel svg .now { fill: var(--ui-accent); } .tv-ui__panel svg .hl { fill: var(--ui-attn); } .tv-ui__axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ui-faint); } .tv-ui__axis i { font-style: normal; } .tv-ui__sig { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; background: var(--ui-tile); font-size: 14px; color: var(--ui-ink); } .tv-ui__sig i { width: 8px; height: 8px; border-radius: 50%; background: var(--ui-accent); flex-shrink: 0; } .tv-ui__sig--warn i { background: var(--ui-attn); } .tv-ui__sig--ok i { background: #3FD39A; } .tv-ui__sales { display: grid; grid-template-columns: 1.75fr 1fr; gap: 16px; height: 455px; margin-top: 18px; } .tv-ui__flag { position: absolute; left: 44%; top: 46%; padding: 6px 10px; border-radius: 8px; background: var(--ui-attn-bg); border: 1px solid var(--ui-attn-line); color: var(--ui-attn); font-size: 13px; font-weight: 600; } .tv-ui__cat { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--ui-line); font-size: 14.5px; } .tv-ui__cat b { font-weight: 600; color: var(--ui-ink); } .tv-ui__cat i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #3D8BFF var(--w), var(--ui-track) var(--w)); } .tv-ui__cat em { text-align: right; font-weight: 700; } .tv-ui__cat--hl { background: var(--ui-attn-bg); border-radius: 8px; } .tv-ui__cols { display: flex; justify-content: space-between; margin-top: 14px; font-size: 11.5px; color: var(--ui-faint); text-transform: uppercase; letter-spacing: 0.06em; } .tv-ui__people { display: flex; flex-direction: column; gap: 11px; margin-top: 10px; } .tv-ui__p { position: relative; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 6px; padding: 14px; border-radius: 14px; background: var(--ui-tile); border: 1px solid var(--ui-tile-line); } .tv-ui__p i { grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 50%; background: var(--ui-accent-bg); color: var(--ui-strong); font-style: normal; font-weight: 700; display: grid; place-items: center; } .tv-ui__p b { font-size: 15.5px; color: var(--ui-strong); } .tv-ui__p em { font-style: normal; font-size: 13px; color: var(--ui-muted); } .tv-ui__p s { height: 5px; border-radius: 3px; text-decoration: none; background: linear-gradient(90deg, var(--ui-accent) var(--w), var(--ui-track) var(--w)); } .tv-ui__p u { position: absolute; right: 14px; top: 14px; text-decoration: none; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--ui-attn-bg); color: var(--ui-attn); } .tv-ui__p u.good { background: rgba(63, 211, 154, 0.12); color: var(--ui-up); } .tv-ui__foot { display: block; margin-top: 16px; font-size: 13px; color: var(--ui-muted); } /* ЗАКУПКИ: операционная таблица, а не ещё один график. */ .tv-ui__table { margin-top: 14px; display: flex; flex-direction: column; } .tv-ui__tr { display: grid; grid-template-columns: 2.1fr 1.3fr 0.9fr 0.9fr 0.9fr; align-items: center; gap: 16px; padding: 15px 14px; border-bottom: 1px solid var(--ui-line); font-size: 15px; color: var(--ui-ink); font-variant-numeric: tabular-nums; } .tv-ui__tr > *:nth-child(n+3) { text-align: right; } .tv-ui__tr b { font-weight: 600; color: var(--ui-strong); } .tv-ui__tr span:nth-child(2) { color: var(--ui-muted); } .tv-ui__tr em { font-style: normal; font-weight: 700; color: var(--ui-muted); } .tv-ui__tr em.down { color: var(--ui-attn); } .tv-ui__tr em.up { color: var(--ui-up); } .tv-ui__tr--head { padding-block: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-faint); } .tv-ui__tr--head span:nth-child(2) { color: var(--ui-faint); } .tv-ui__tr--hl { border-radius: 10px; border-bottom-color: transparent; background: var(--ui-attn-bg); box-shadow: inset 3px 0 0 var(--ui-attn); } .tv-ui__tr--hl > span:nth-child(4), .tv-ui__tr--hl em { font-size: 17px; } .tv-ui__tr--hl > span:nth-child(4) { color: var(--ui-strong); font-weight: 700; } /* КОММУНИКАЦИИ: лента событий бизнеса, у каждого — область, к которой оно относится. */ .tv-ui__feed { position: relative; margin-top: 16px; display: flex; flex-direction: column; gap: 12px; } .tv-ui__feed::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 1px; background: var(--ui-line); } .tv-ui__ev { position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 4px; padding: 12px 14px 12px 0; } .tv-ui__ev time { grid-row: 1 / span 3; position: relative; z-index: 1; align-self: start; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ui-muted); background: var(--ui-tile); border: 1px solid var(--ui-tile-line); border-radius: 8px; padding: 4px 0; text-align: center; backdrop-filter: none; } .tv-ui__ev .src { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-accent); } .tv-ui__ev p { margin: 0; font-size: 15px; line-height: 1.35; color: var(--ui-ink); } .tv-ui__ev em { justify-self: start; font-style: normal; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--ui-tile); border: 1px solid var(--ui-tile-line); color: var(--ui-muted); } /* Янтарный сигнал — зерно сцены 04. Без текста и объяснений. */ .tv-ui__seed { position: absolute; right: 14px; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: #FFB547; box-shadow: 0 0 0 8px rgba(255, 181, 71, 0.22), 0 0 60px 16px rgba(255, 181, 71, 0.55); opacity: var(--seed, 0); } .tv-ui__seed::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255, 181, 71, 0.7); opacity: 0; } .tv-orb--seed .tv-ui__seed::after { animation: tv-seed 2.4s var(--ease) infinite; } .tv-ui__kpi--seed::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(255, 181, 71, 0.55); box-shadow: 0 0 40px -10px rgba(255, 181, 71, 0.5); opacity: var(--seed, 0); pointer-events: none; } @keyframes tv-seed { 0% { transform: scale(1); opacity: 0.9; } 70% { transform: scale(3.4); opacity: 0; } 100% { transform: scale(3.4); opacity: 0; } } /* Силуэты других интерфейсов в глубине мира. */ .tv-sp__ghost { transform: translate(-50%, -50%); border-radius: 18px; border: 1px solid rgba(140, 180, 255, 0.28); background: linear-gradient(160deg, rgba(40, 70, 120, 0.35), rgba(12, 22, 40, 0.5)); box-shadow: 0 0 60px -20px rgba(61, 139, 255, 0.4); padding: 26px; display: flex; flex-direction: column; gap: 18px; } .tv-sp__ghost i { display: block; height: 14px; border-radius: 7px; background: rgba(140, 180, 255, 0.13); box-shadow: 0 0 18px rgba(140, 180, 255, 0.12); } .tv-sp__ghost i:nth-child(2) { width: 70%; } .tv-sp__ghost i:nth-child(3) { width: 85%; height: 90px; } .tv-sp__ghost i:nth-child(4) { width: 45%; } .tv-sp__ghost--a { width: 620px; height: 380px; } .tv-sp__ghost--b { width: 880px; height: 420px; } .tv-sp__ghost--c { width: 420px; height: 560px; } /* --- Светлая тема: дневная вселенная, белое стекло, та же глубина --- */ :root[data-theme="light"] .tv-ui { --ui-strong: #0B1628; --ui-ink: #1B2B45; --ui-muted: #4F6282; --ui-faint: #6A7C99; --ui-line: rgba(15, 35, 70, 0.09); --ui-tile: rgba(47, 123, 255, 0.045); --ui-tile-line: rgba(15, 35, 70, 0.08); --ui-accent: #2F7BFF; --ui-accent-bg: rgba(47, 123, 255, 0.12); --ui-track: rgba(15, 35, 70, 0.08); --ui-up: #12936A; --ui-attn: #D2513F; --ui-attn-bg: rgba(210, 81, 63, 0.08); --ui-attn-line: rgba(210, 81, 63, 0.32); background: radial-gradient(120% 70% at 0% 0%, rgba(120, 190, 255, 0.22), transparent 60%), linear-gradient(170deg, rgba(255, 255, 255, 0.97), rgba(242, 247, 255, 0.95)); border-color: rgba(47, 123, 255, 0.28); box-shadow: 0 40px 60px -34px rgba(14, 40, 90, 0.45), 0 1px 0 #fff inset, 0 0 0 1px rgba(47, 123, 255, 0.08), 0 0 40px -14px rgba(0, 170, 255, 0.5); } :root[data-theme="light"] .tv-ui__cat i { background: linear-gradient(90deg, #2F7BFF var(--w), var(--ui-track) var(--w)); } :root[data-theme="light"] .tv-sp__tag { background: rgba(255, 255, 255, 0.9); color: #0B1628; border-color: rgba(47, 123, 255, 0.35); box-shadow: 0 10px 30px -12px rgba(14, 40, 90, 0.35); } :root[data-theme="light"] .tv-sp__tag i { color: #2F7BFF; } :root[data-theme="light"] .tv-sp__ghost { background: linear-gradient(170deg, rgba(255, 255, 255, 0.7), rgba(232, 241, 255, 0.55)); border-color: rgba(47, 123, 255, 0.25); box-shadow: 0 30px 60px -40px rgba(14, 40, 90, 0.4); } :root[data-theme="light"] .tv-sp__ghost i { background: rgba(47, 123, 255, 0.12); } :root[data-theme="light"] .tv-ui__seed { background: #F29A1F; box-shadow: 0 0 0 5px rgba(242, 154, 31, 0.2), 0 0 30px 6px rgba(242, 154, 31, 0.45); } :root[data-theme="light"] .tv-orb__core-hi { background: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), rgba(0, 170, 255, 0.45), rgba(47, 123, 255, 0.14) 30%, transparent 56%); } :root[data-theme="light"] .tv-orb__obj.is-focus .tv-ui { border-color: rgba(47, 123, 255, 0.5); } :root[data-theme="light"] .tv-orb__title { text-shadow: 0 0 24px var(--bg), 0 0 8px var(--bg); } /* --- Мобильный: поверхности в ширину экрана (раскладки D1), орбита меньше --- */ @media (max-width: 720px) { .tv-orb { min-height: 620px; } .tv-orb__stage { perspective: 800px; perspective-origin: 50% 56%; } .tv-orb__world { top: 56%; } .tv-orb__core { width: 380px; } .tv-orb__core-label { font-size: 15px; } .tv-orb__core-label b { font-size: 42px; } .tv-orb__hud { top: calc(89px + 14px); max-width: calc(100% - 2 * var(--gutter)); } .tv-orb__title { font-size: 26px; margin: 8px 0; } .tv-orb__disc { font-size: 11.5px; bottom: 46px; } .tv-orb__one { font-size: 15px; margin-bottom: 0; } .tv-orb__hint { left: max(var(--gutter), calc((100% - var(--wrap-hero)) / 2 + var(--gutter))); right: auto; bottom: 26px; font-size: 12px; } .tv-orb__ghost { display: none; } .tv-orb__obj[data-area="now"] { transform: translate3d(204.4px, 46.7px, -108px) rotateY(-17.5deg) rotateX(4deg) scale(0.62); opacity: 0.976; } .tv-orb__obj[data-area="sig-avg"] { transform: translate3d(16.8px, 32.9px, -77.4px) rotateY(-6.95deg) rotateX(4deg) scale(0.62); opacity: 0.982; } .tv-orb__obj[data-area="sales"] { transform: translate3d(-192.4px, 88.5px, -290.9px) rotateY(4.82deg) rotateX(4deg) scale(0.62); opacity: 0.938; } .tv-orb__obj[data-area="team"] { transform: translate3d(-346.7px, -21.8px, -623.2px) rotateY(13.5deg) rotateX(4deg) scale(0.62); opacity: 0.869; } .tv-orb__obj[data-area="sig-fot"] { transform: translate3d(-292px, -64.4px, -1080.2px) rotateY(10.43deg) rotateX(4deg) scale(0.62); opacity: 0.775; } .tv-orb__obj[data-area="proc"] { transform: translate3d(-111.9px, -123.3px, -1203.2px) rotateY(0.3deg) rotateX(4deg) scale(0.62); opacity: 0.75; } .tv-orb__obj[data-area="sig-price"] { transform: translate3d(95.1px, -193px, -1095.3px) rotateY(-11.35deg) rotateX(4deg) scale(0.62); opacity: 0.772; } .tv-orb__obj[data-area="comm"] { transform: translate3d(290.5px, -12.7px, -763px) rotateY(-22.34deg) rotateX(4deg) scale(0.62); opacity: 0.84; } .tv-orb__obj[data-area="sig-up"] { transform: translate3d(347px, -61.3px, -366.3px) rotateY(-25.52deg) rotateX(4deg) scale(0.62); opacity: 0.922; } .tv-ui { padding: 14px; font-size: 12px; border-radius: 16px; } .tv-ui--now { width: 88vw; height: auto; } .tv-ui--sales { width: 90vw; height: auto; } .tv-ui--team { width: 82vw; height: auto; } .tv-ui--proc { width: 90vw; height: auto; } .tv-ui--comm { width: 80vw; height: auto; } .tv-ui__bar { gap: 10px; padding-bottom: 12px; } .tv-ui__bar strong { font-size: 16px; } .tv-ui__bar span, .tv-ui__live, .tv-ui__seg { display: none; } .tv-ui__kpis { grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; } .tv-ui__kpis b { font-size: 20px; } .tv-ui__kpis span, .tv-ui small { font-size: 11.5px; } .tv-ui__row, .tv-ui__sales { grid-template-columns: 1fr; height: auto; gap: 10px; } .tv-ui__panel { padding: 12px; } .tv-ui__panel--chart svg, .tv-ui__panel--big svg { height: 90px; flex: none; } .tv-ui__h em { display: none; } .tv-ui__sig { font-size: 12.5px; padding: 9px 10px; } .tv-ui__panel--list, .tv-ui__cat:nth-child(n+5), .tv-ui__p:nth-child(n+4) { display: none; } .tv-ui__cat { font-size: 13px; padding: 9px 4px; } .tv-ui__flag { position: static; align-self: flex-start; font-size: 12px; } .tv-ui__p { padding: 11px; } .tv-ui__p b { font-size: 14px; } .tv-ui__p em { font-size: 12px; } .tv-ui__p u { position: static; justify-self: start; grid-column: 2; font-size: 11.5px; } .tv-ui__cols { display: none; } .tv-ui__foot { font-size: 12px; margin-top: 12px; } /* Закупки: таблица → позиция, цена «было → стало», изменение */ .tv-ui__tr { grid-template-columns: 1fr auto auto; gap: 10px; padding: 11px 8px; font-size: 13px; } .tv-ui__tr > span:nth-child(2), .tv-ui__tr > span:nth-child(3) { display: none; } .tv-ui__tr--hl > span:nth-child(4), .tv-ui__tr--hl em { font-size: 14px; } .tv-ui__tr:nth-child(n+5) { display: none; } /* Коммуникации: четыре события */ .tv-ui__feed { gap: 6px; margin-top: 10px; } .tv-ui__ev { grid-template-columns: 40px 1fr; padding: 8px 4px 8px 0; } .tv-ui__ev p { font-size: 13px; } .tv-ui__feed::before { left: 19px; } .tv-sp__tag { font-size: 15px; padding: 6px 12px; margin-bottom: 10px; } } @media (prefers-reduced-motion: reduce) { .tv-orb .tv-ui__seed::after { animation: none; opacity: 0.5; transform: scale(1.8); } .tv-orb__core-glow { animation: none; } } /* ============================================================ 11. E0 · AI ДЛЯ ВЛАДЕЛЬЦА (TV-REBIRTH-VD2-E0) ------------------------------------------------------------ Один сюжет по шагам: классы на корне сцены (technovolga.js) is-anomaly → is-notice → is-why → is-context → is-synth → is-final. Без JS (нет .tv-oa--js) и при reduced motion — сразу итог: все шаги видны одновременно. Позы поверхностей — CSS 3D, смена шага — transition transform/opacity (композитор, без фильтров). Янтарь — только «стоит посмотреть»: сигнал в «Сейчас», отклик ядра. ============================================================ */ .tv-oa { --oa-t: 1.4s; position: relative; padding: 0; background: transparent; overflow: hidden; } .tv-oa__stage { position: relative; height: 100vh; height: 100svh; min-height: 720px; perspective: 1200px; perspective-origin: 63% 52%; } .tv-oa__flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .tv-oa__world { position: absolute; left: 63%; top: 52%; width: 0; height: 0; transform-style: preserve-3d; } /* --- Ядро: тот же вид, что в D2 --- */ .tv-oa__core { position: absolute; left: 0; top: 0; width: 520px; aspect-ratio: 1; display: grid; place-items: center; transform: translate3d(0, 0, -460px) translate(-50%, -50%); } .tv-oa__core .tv-orb__core-glow { transition: opacity var(--oa-t) var(--ease), transform var(--oa-t) var(--ease); animation: none; opacity: var(--oa-glow, 0.8); transform: scale(var(--oa-gs, 1)); } .tv-oa__core .core-img-front { animation-duration: 90s; } .tv-oa__core .core-img-back { animation-duration: 140s; } .tv-oa__core .core-sweep { animation-duration: 14s; } .tv-oa__core .tv-orb__core-label { font-size: 15px; } .tv-oa__core .tv-orb__core-label b { font-size: 44px; } /* Янтарный отклик ядра: «стоит посмотреть», не тревога. */ .tv-oa__amber { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 181, 71, 0.6), rgba(255, 181, 71, 0.16) 36%, transparent 62%); opacity: var(--oa-amber, 0.12); transition: opacity var(--oa-t) var(--ease); } /* Память: часть контекста остаётся у ядра. */ .tv-oa__mem { position: absolute; left: 50%; top: 50%; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(140, 180, 255, 0.3); background: rgba(8, 14, 28, 0.62); font-size: 15px; font-weight: 650; color: var(--ink-muted); white-space: nowrap; transform: translate(-50%, -50%) rotate(var(--a)) translateX(320px) rotate(calc(-1 * var(--a))); opacity: var(--oa-mem, 0.8); transition: opacity var(--oa-t) var(--ease); } /* --- Поверхности: позы по шагам (мировые px) --- */ .tv-oa__obj { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; transform: translate3d(var(--x), var(--y), var(--z)) rotateY(var(--ry, -8deg)) rotateX(3deg); opacity: var(--o, 1); transition: transform var(--oa-t) var(--ease), opacity var(--oa-t) var(--ease); will-change: transform, opacity; } .tv-oa__obj > .tv-ui { position: relative; transform: translate(-50%, -50%); } .tv-oa__ui { padding: 18px 22px; } .tv-oa__obj[data-oa="now"] .tv-ui { width: 500px; } .tv-oa__obj[data-oa="sales"] .tv-ui { width: 540px; } .tv-oa__obj[data-oa="team"] .tv-ui { width: 490px; } .tv-oa__obj[data-oa="proc"] .tv-ui { width: 460px; } .tv-oa__obj[data-oa="comm"] .tv-ui { width: 420px; } .tv-oa__obj[data-oa="event"] .tv-ui { width: 340px; } /* Итог (по умолчанию): нужное — впереди, остальное — в глубине. */ .tv-oa__obj[data-oa="now"] { --x: -400px; --y: -330px; --z: -1000px; --ry: 8deg; --o: 0.85; } .tv-oa__obj[data-oa="sales"] { --x: 430px; --y: -200px; --z: -200px; --ry: -10deg; } .tv-oa__obj[data-oa="team"] { --x: 390px; --y: 240px; --z: -330px; --ry: -12deg; } .tv-oa__obj[data-oa="event"] { --x: -70px; --y: 370px; --z: -230px; --ry: -4deg; } .tv-oa__obj[data-oa="proc"] { --x: 140px; --y: -470px; --z: -2200px; --ry: -6deg; --o: 0.32; } .tv-oa__obj[data-oa="comm"] { --x: -720px; --y: 560px; --z: -2200px; --ry: 10deg; --o: 0.24; } /* Сюжет (JS): спокойный бизнес — все области на средней глубине. */ .tv-oa--js:not(.is-context) .tv-oa__obj[data-oa="now"] { --x: -250px; --y: -250px; --z: -650px; --o: 1; } .tv-oa--js:not(.is-context) .tv-oa__obj[data-oa="sales"] { --x: 440px; --y: -210px; --z: -900px; --o: 0.9; } .tv-oa--js:not(.is-context) .tv-oa__obj[data-oa="team"] { --x: 460px; --y: 250px; --z: -1000px; --o: 0.9; } .tv-oa--js:not(.is-context) .tv-oa__obj[data-oa="proc"] { --x: 60px; --y: -430px; --z: -1500px; --o: 0.7; } .tv-oa--js:not(.is-context) .tv-oa__obj[data-oa="comm"] { --x: -300px; --y: 290px; --z: -1100px; --o: 0.85; } .tv-oa--js:not(.is-context) .tv-oa__obj[data-oa="event"] { --x: -300px; --y: 290px; --z: -1120px; --o: 0; } .tv-oa--js.is-anomaly:not(.is-context) .tv-oa__obj[data-oa="now"] { --z: -480px; } /* Ядро по шагам: спокойно → янтарный отклик → внимание → активность → ясность. */ .tv-oa--js { --oa-amber: 0; --oa-glow: 0.55; --oa-gs: 0.94; --oa-mem: 0; } .tv-oa--js.is-anomaly { --oa-amber: 0.75; --oa-glow: 0.7; --oa-gs: 1; } .tv-oa--js.is-why { --oa-amber: 0.55; --oa-glow: 0.85; --oa-gs: 1.04; } .tv-oa--js.is-context { --oa-amber: 0.3; --oa-glow: 1; --oa-gs: 1.1; } .tv-oa--js.is-synth { --oa-amber: 0.14; --oa-glow: 0.85; --oa-gs: 1.02; } .tv-oa--js.is-final { --oa-mem: 0.8; } /* Сигнал в бизнесе: янтарь на «Среднем чеке». */ .tv-oa__kpis { grid-template-columns: repeat(3, 1fr); margin: 14px 0 0; } .tv-oa__kpi-seed::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(255, 181, 71, 0.6); box-shadow: 0 0 30px -8px rgba(255, 181, 71, 0.55); opacity: var(--oa-seed, 0.45); transition: opacity var(--oa-t) var(--ease); pointer-events: none; } .tv-oa__seed { position: absolute; right: 12px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: #FFB547; box-shadow: 0 0 0 5px rgba(255, 181, 71, 0.2), 0 0 24px 6px rgba(255, 181, 71, 0.5); opacity: var(--oa-seed, 0.45); transition: opacity var(--oa-t) var(--ease); } .tv-oa__dev { color: #FFC978 !important; opacity: calc(0.4 + var(--oa-seed, 0.45)); } .tv-oa--js { --oa-seed: 0; } .tv-oa--js.is-anomaly { --oa-seed: 1; } .tv-oa--js.is-synth { --oa-seed: 0.45; } /* Продажи: вечерний интервал. */ .tv-oa__chart { margin-top: 14px; gap: 8px; } .tv-oa__chart svg { height: 150px; flex: none; } .tv-oa__band { fill: rgba(242, 154, 138, 0.1); opacity: var(--oa-ev, 1); transition: opacity 0.8s var(--ease); } .tv-oa__flag { position: static; align-self: flex-start; padding: 6px 10px; border-radius: 8px; background: var(--ui-attn-bg); border: 1px solid var(--ui-attn-line); color: var(--ui-attn); font-size: 13.5px; font-weight: 650; opacity: var(--oa-ev, 1); transition: opacity 0.8s var(--ease); } /* Смена: структура продаж. */ .tv-oa__rows { display: flex; flex-direction: column; margin-top: 10px; } .tv-oa__row { display: grid; grid-template-columns: 180px 1fr 124px; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--ui-line); font-size: 14.5px; } .tv-oa__row b { font-weight: 600; color: var(--ui-ink); } .tv-oa__row i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ui-accent) var(--w), var(--ui-track) var(--w)); } .tv-oa__row em { text-align: right; font-style: normal; font-weight: 650; color: var(--ui-muted); } .tv-oa__row--hl { border-radius: 8px; border-bottom-color: transparent; background: rgba(242, 154, 138, calc(0.09 * var(--oa-ev, 1))); transition: background 0.8s var(--ease); } .tv-oa__row--hl em { color: var(--ui-attn); } /* Событие. */ .tv-oa__evt { display: grid; grid-template-columns: 50px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 18px; } .tv-oa__evt time { grid-row: 1 / span 2; font-size: 13px; color: var(--ui-muted); text-align: center; padding: 5px 0; border-radius: 8px; border: 1px solid var(--ui-tile-line); background: var(--ui-tile); } .tv-oa__evt .src { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-accent); } .tv-oa__evt p { margin: 0; font-size: 15.5px; color: var(--ui-ink); } /* Подсветка доказательств — по очереди. */ .tv-oa--js { --oa-ev: 0; } .tv-oa--js.is-ev1 .tv-oa__obj[data-oa="sales"], .tv-oa--js.is-ev2 .tv-oa__obj[data-oa="team"], .tv-oa--js.is-ev3 .tv-oa__obj[data-oa="event"] { --oa-ev: 1; } .tv-oa--js.is-ev3 .tv-oa__obj[data-oa="event"] { --o: 1; } /* --- Подписи сцены --- */ .tv-oa__hud { position: absolute; z-index: 3; left: max(var(--gutter), calc((100% - var(--wrap-hero)) / 2 + var(--gutter))); top: calc(67px + clamp(24px, 4.5vh, 52px)); max-width: 660px; pointer-events: none; } .tv-oa__eyebrow { margin: 0; } .tv-oa__title { margin: 12px 0 12px; font-size: clamp(30px, 1.9vw + 10px, 44px); font-weight: 800; line-height: 1.07; letter-spacing: -0.02em; } .tv-oa__lead { margin: 0; max-width: 440px; font-size: var(--step-1); color: var(--ink-muted); } /* --- Сигнал ассистента, «Почему?», объяснение --- */ .tv-oa__talk { position: absolute; z-index: 3; left: max(var(--gutter), calc((100% - var(--wrap-hero)) / 2 + var(--gutter))); top: calc(67px + clamp(24px, 4.5vh, 52px) + 214px); width: min(470px, 40vw); display: flex; flex-direction: column; gap: 14px; } .tv-oa__signal, .tv-oa__answer { position: relative; padding: 16px 20px 16px 22px; border-radius: 18px; background: linear-gradient(160deg, rgba(24, 40, 72, 0.9), rgba(10, 18, 34, 0.92)); border: 1px solid rgba(150, 195, 255, 0.28); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(200, 225, 255, 0.16) inset; color: var(--ink); } .tv-oa__signal { border-color: rgba(255, 181, 71, 0.42); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9), 0 0 34px -12px rgba(255, 181, 71, 0.45), 0 1px 0 rgba(255, 225, 180, 0.16) inset; } .tv-oa__signal::before, .tv-oa__answer::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: #FFB547; } .tv-oa__answer::before { background: var(--accent-soft); } .tv-oa__who { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } .tv-oa__who i { width: 8px; height: 8px; border-radius: 50%; background: #FFB547; box-shadow: 0 0 10px #FFB547; } .tv-oa__answer .tv-oa__who i { background: var(--accent-soft); box-shadow: 0 0 10px var(--accent-soft); } .tv-oa__msg { margin: 8px 0 6px; font-size: 19px; font-weight: 700; line-height: 1.3; } .tv-oa__answer .tv-oa__msg { font-size: 17px; font-weight: 600; } .tv-oa__meta { font-size: 13px; color: var(--ink-faint); } .tv-oa__next { margin: 8px 0 0; font-size: 15px; color: var(--ink-muted); } .tv-oa__next b { color: var(--ink); font-weight: 650; } .tv-oa__why { align-self: flex-end; display: inline-flex; align-items: baseline; gap: 10px; padding: 10px 18px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); font-size: 20px; font-weight: 750; color: var(--ink); } .tv-oa__why span { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } .tv-oa__control { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-muted); } .tv-oa__disc { position: absolute; z-index: 3; right: max(var(--gutter), calc((100% - var(--wrap-hero)) / 2 + var(--gutter))); bottom: 22px; margin: 0; font-size: 12.5px; color: var(--ink-faint); } /* Появление по шагам (JS). */ .tv-oa__signal, .tv-oa__why, .tv-oa__answer, .tv-oa__control { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .tv-oa--js .tv-oa__signal, .tv-oa--js .tv-oa__why, .tv-oa--js .tv-oa__answer, .tv-oa--js .tv-oa__control { opacity: 0; transform: translateX(28px); } .tv-oa--js .tv-oa__why { transform: translateY(10px); } .tv-oa--js.is-notice .tv-oa__signal, .tv-oa--js.is-why .tv-oa__why, .tv-oa--js.is-synth .tv-oa__answer, .tv-oa--js.is-final .tv-oa__control { opacity: 1; transform: none; } /* --- Как это устроено --- */ .tv-oa__tech { position: relative; z-index: 3; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(24px, 3vw, 48px); max-width: var(--wrap-hero); margin: 0 auto; padding: clamp(28px, 4vh, 48px) var(--gutter) clamp(72px, 10vh, 120px); border-top: 1px solid var(--border); } .tv-oa__tech h3 { margin: 0 0 10px; font-size: 18px; font-weight: 750; } .tv-oa__tech p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-muted); } .tv-oa__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px !important; } .tv-oa__chain span { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 13px; font-weight: 650; color: var(--ink); } .tv-oa__chain span + span::before { content: "→"; margin: 0 8px 0 -2px; color: var(--ink-faint); } .tv-oa__chain .is-opt { border-style: dashed; color: var(--ink-muted); } /* --- Светлая тема --- */ :root[data-theme="light"] .tv-oa__signal, :root[data-theme="light"] .tv-oa__answer { background: linear-gradient(170deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 255, 0.94)); border-color: rgba(47, 123, 255, 0.24); box-shadow: 0 24px 50px -32px rgba(14, 40, 90, 0.45), 0 1px 0 #fff inset; } :root[data-theme="light"] .tv-oa__signal { border-color: rgba(232, 146, 20, 0.5); box-shadow: 0 24px 50px -32px rgba(14, 40, 90, 0.45), 0 0 30px -14px rgba(232, 146, 20, 0.5); } :root[data-theme="light"] .tv-oa__signal::before, :root[data-theme="light"] .tv-oa__signal .tv-oa__who i { background: #E89214; box-shadow: none; } :root[data-theme="light"] .tv-oa__dev { color: #B86A00 !important; } :root[data-theme="light"] .tv-oa__seed { background: #E89214; box-shadow: 0 0 0 5px rgba(232, 146, 20, 0.18), 0 0 20px 4px rgba(232, 146, 20, 0.4); } :root[data-theme="light"] .tv-oa__kpi-seed::before { border-color: rgba(232, 146, 20, 0.6); } :root[data-theme="light"] .tv-oa__amber { background: radial-gradient(circle at 30% 30%, rgba(255, 170, 40, 0.6), rgba(255, 170, 40, 0.16) 36%, transparent 62%); } :root[data-theme="light"] .tv-oa__mem { background: rgba(255, 255, 255, 0.85); border-color: rgba(47, 123, 255, 0.3); } :root[data-theme="light"] .tv-oa__band { fill: rgba(210, 81, 63, 0.08); } /* Узкий десктоп: мир сцены мельче, чтобы доказательства не обрезались. */ @media (max-width: 1280px) { .tv-oa__world { transform: scale(0.86); } } /* --- Мобильный и планшет: та же история столбцом, шаги проявляются при прокрутке --- */ @media (max-width: 1100px) { .tv-oa__hud, .tv-oa__stage, .tv-oa__tech { max-width: 600px; margin-left: auto; margin-right: auto; } .tv-oa__world { transform: none; } .tv-oa__hud { position: relative; left: auto; top: auto; padding: 104px var(--gutter) 0; box-sizing: border-box; } .tv-oa__title { font-size: 30px; } .tv-oa__stage { height: auto; min-height: 0; perspective: none; display: flex; flex-direction: column; gap: 14px; padding: 18px var(--gutter) 24px; } .tv-oa__world, .tv-oa__talk { display: contents; } .tv-oa__flow { display: none; } .tv-oa__core { position: relative; transform: none; width: 220px; align-self: center; order: 1; margin: 4px 0 6px; } .tv-oa__core .tv-orb__core-label { font-size: 10px; } .tv-oa__core .tv-orb__core-label b { font-size: 26px; } .tv-oa__mem { display: none; } .tv-oa__obj { position: relative; width: auto; height: auto; transform: none; opacity: 1; } .tv-oa__obj > .tv-ui { transform: none; width: auto !important; } .tv-oa__obj[data-oa="now"], .tv-oa__obj[data-oa="proc"], .tv-oa__obj[data-oa="comm"] { display: none; } .tv-oa__signal { order: 2; } .tv-oa__why { order: 3; } .tv-oa__obj[data-oa="sales"] { order: 4; } .tv-oa__obj[data-oa="team"] { order: 5; } .tv-oa__obj[data-oa="event"] { order: 6; } .tv-oa__answer { order: 7; } .tv-oa__control { order: 8; } .tv-oa__disc { position: static; order: 9; } .tv-oa__chart svg { height: 100px; } .tv-oa__row { grid-template-columns: 1fr auto; padding: 10px 4px; font-size: 13.5px; } .tv-oa__row i { display: none; } .tv-oa__ui { padding: 14px; } .tv-oa__tech { grid-template-columns: 1fr; padding-top: 28px; } /* шаги на мобильном — проявление при прокрутке (не по времени) */ .tv-oa--mob .tv-oa__stage > *, .tv-oa--mob .tv-oa__world > *, .tv-oa--mob .tv-oa__talk > * { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .tv-oa--mob .is-hidden { opacity: 0 !important; transform: translateY(14px) !important; } } @media (prefers-reduced-motion: reduce) { .tv-oa__obj, .tv-oa__signal, .tv-oa__why, .tv-oa__answer, .tv-oa__control, .tv-oa__amber, .tv-oa__mem, .tv-oa__core .tv-orb__core-glow { transition: none; } } /* ============================================================ 12. СЦЕНА 02 · СМЫСЛ ПРЕВРАЩЕНИЯ (TV-REBIRTH-SCENE02-FIX2) ------------------------------------------------------------ Механика сцены 02 (раздел 8) не меняется. Здесь — только повествование слева и источники контекста у рек. Шаги истории привязаны к таблице времён сюжета (TL в tv-universe.js): b — распад границы (4.5 с), c — пик ядра (7.5 с). Пока сюжет не начался, виден шаг a; без сюжета (нет WebGL / reduced motion / нет :has) видны все три. ============================================================ */ .tv-bai-layout { grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); } .tv-bai-layout .tv-scene__title { font-size: clamp(34px, 2.5vw + 14px, 54px); } .tv-bai-story { position: relative; display: flex; flex-direction: column; gap: 22px; margin-top: clamp(20px, 2.4vw, 32px); padding-left: 22px; max-width: 34rem; } /* Тонкая направляющая: три шага — одна история, не три карточки. */ .tv-bai-story::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(to bottom, var(--border-strong), color-mix(in srgb, var(--accent) 60%, transparent)); } .tv-bai-step { position: relative; } .tv-bai-step::before { content: ""; position: absolute; left: -26px; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border-strong); } .tv-bai-step--c::before { background: var(--accent); border-color: var(--accent-soft); box-shadow: 0 0 12px var(--glow-core); } .tv-bai-step__lead { margin: 0 0 6px; font-size: clamp(18px, 0.7vw + 10px, 21px); font-weight: 750; line-height: 1.3; color: var(--ink); } .tv-bai-step__lead--final { font-size: clamp(21px, 0.9vw + 10px, 25px); } .tv-bai-step__text { margin: 0; font-size: var(--step-0, 16px); line-height: 1.55; color: var(--ink-muted); } .tv-bai-step__text b { color: var(--ink); font-weight: 700; } .tv-bai-step__caps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; font-weight: 600; color: var(--ink); } .tv-bai-step__caps li { display: inline-flex; align-items: center; gap: 8px; } .tv-bai-step__caps li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-soft); } .tv-bai-step__trust { margin: 12px 0 0; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-faint); } .tv-bai-step__trust::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; background: var(--accent-soft); transform: rotate(45deg); vertical-align: 2px; } /* Сюжет (только десктоп, где текст и превращение в одном кадре): до старта виден шаг a; затем b и c, пройденные — тише. */ @media (min-width: 1081px) { .tv-bai-layout:has(.tv-bai.is-armed) .tv-bai-step--b, .tv-bai-layout:has(.tv-bai.is-armed) .tv-bai-step--c { opacity: 0; transform: translateY(10px); } .tv-bai-layout:has(.tv-bai.is-playing) .tv-bai-step--a { animation: tv-bai-step-dim 0.8s var(--ease) 4.4s both; } .tv-bai-layout:has(.tv-bai.is-playing) .tv-bai-step--b { animation: tv-bai-step-in 0.9s var(--ease) 4.5s both, tv-bai-step-dim2 0.8s var(--ease) 7.6s forwards; } .tv-bai-layout:has(.tv-bai.is-playing) .tv-bai-step--c { animation: tv-bai-step-in 0.9s var(--ease) 7.5s both; } } @keyframes tv-bai-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes tv-bai-step-dim { to { opacity: 0.55; } } @keyframes tv-bai-step-dim2 { from { opacity: 1; transform: none; } to { opacity: 0.78; transform: none; } } /* Источники контекста: пять небольших поверхностей бизнеса у начала своих рек. Размеры — в долях ширины сцены (cqw), поэтому композиция одинакова на любой ширине. Слой лежит под окном и ядром: изолированное окно буквально «отгорожено» от бизнеса вокруг. Позиции — в долях сцены, у видимого начала реки (RIVERS.desk в tv-universe.js). */ .tv-bai__srcs { position: absolute; inset: 0; container-type: inline-size; pointer-events: none; } .tv-bai__src { --s: 1; --ry: 0deg; position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) perspective(900px) rotateY(var(--ry)) scale(var(--s)); padding: 1.3cqw 1.6cqw 1.4cqw; border-radius: 1.6cqw; background: linear-gradient(160deg, rgba(26, 45, 82, 0.9), rgba(12, 21, 40, 0.92)); border: 1px solid rgba(150, 195, 255, 0.42); box-shadow: 0 1.6cqw 3.4cqw -1.8cqw rgba(0, 0, 0, 0.85), 0 0 2.6cqw -0.6cqw rgba(61, 139, 255, 0.5), 0 1px 0 rgba(200, 225, 255, 0.18) inset; color: #DCE7F8; font-size: 1.75cqw; line-height: 1.35; white-space: nowrap; } .tv-bai__src-h { display: flex; align-items: center; gap: 0.7cqw; margin-bottom: 0.8cqw; font-size: 1.4cqw; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: #9CC3FF; } .tv-bai__src-h i { width: 0.8cqw; height: 0.8cqw; border-radius: 50%; background: #6FA8FF; box-shadow: 0 0 0.9cqw #6FA8FF; } .tv-bai__src small { display: block; font-size: 1.4cqw; color: #8DA3C4; } /* Данные: две метрики и линия тренда */ .tv-bai__src--data { --x: 82%; --y: -4%; --s: 1.04; --ry: -10deg; } .tv-bai__src-kpis { display: flex; gap: 2cqw; } .tv-bai__src-kpis b { display: block; font-size: 2.6cqw; font-weight: 750; color: #fff; letter-spacing: -0.01em; } .tv-bai__src-kpis em { font-style: normal; font-size: 1.4cqw; font-weight: 700; color: #6FD7A8; } .tv-bai__src--data svg { display: block; width: 100%; height: 2.4cqw; margin-top: 0.6cqw; } .tv-bai__src--data polyline { fill: none; stroke: #6FA8FF; stroke-width: 1.6; vector-effect: non-scaling-stroke; } /* Системы: подключённые системы компании */ .tv-bai__src--sys { --x: 84%; --y: 76%; --s: 0.96; --ry: -14deg; } .tv-bai__src-chips { display: flex; gap: 0.6cqw; } .tv-bai__src-chips span { display: inline-flex; align-items: center; gap: 0.5cqw; padding: 0.45cqw 0.9cqw; border-radius: 0.8cqw; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(140, 180, 255, 0.18); font-weight: 650; } .tv-bai__src-chips span::before { content: ""; width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: #3FD39A; } /* Процессы: работа движется по шагам */ .tv-bai__src--proc { --x: 74%; --y: 108%; --s: 1.04; --ry: -6deg; } .tv-bai__src-flow { display: flex; align-items: center; gap: 0.5cqw; font-weight: 650; } .tv-bai__src-flow span { padding: 0.4cqw 0.8cqw; border-radius: 0.8cqw; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(140, 180, 255, 0.16); color: #B9C8DF; } .tv-bai__src-flow span + span::before { content: "→"; margin: 0 0.6cqw 0 -0.2cqw; color: #6A7E9E; } .tv-bai__src-flow span.is-on { color: #fff; border-color: rgba(111, 168, 255, 0.55); background: rgba(61, 139, 255, 0.16); } .tv-bai__src-meta { margin-top: 0.7cqw; } /* Документы: файлы компании (дальний план — мельче) */ .tv-bai__src--docs { --x: 36%; --y: -5%; --s: 0.88; --ry: 10deg; } .tv-bai__src-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5cqw; } .tv-bai__src-files li { display: flex; align-items: center; gap: 0.8cqw; } .tv-bai__src-files b { display: inline-block; min-width: 3.2cqw; padding: 0.2cqw 0; border-radius: 0.5cqw; background: rgba(61, 139, 255, 0.18); color: #9CC3FF; font-size: 1.15cqw; font-weight: 800; text-align: center; letter-spacing: 0.04em; } /* Коммуникации: сообщение клиента — источник, а не чат с AI */ .tv-bai__src--comm { --x: 12%; --y: 24%; --s: 0.98; --ry: 14deg; } .tv-bai__src-msg { margin: 0; padding: 0.8cqw 1.1cqw; border-radius: 1.1cqw 1.1cqw 1.1cqw 0.3cqw; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(140, 180, 255, 0.16); font-weight: 600; color: #fff; } .tv-bai__src-msg small { margin-bottom: 0.3cqw; } .tv-bai__demo { position: absolute; left: 1%; bottom: -12%; font-size: 1.4cqw; color: var(--ink-faint); white-space: nowrap; } /* Сюжет: пока AI изолирован, источники есть, но не подключены (тише, нейтральная кромка); с началом своей реки — подключаются (r[12]). */ .tv-bai.is-armed .tv-bai__src { opacity: 0.5; border-color: var(--border); box-shadow: 0 1.6cqw 3.4cqw -1.8cqw rgba(0, 0, 0, 0.85); } .tv-bai.is-armed .tv-bai__src-h i { background: var(--ink-faint); box-shadow: none; } .tv-bai.is-playing .tv-bai__src { animation: tv-bai-src-link 0.9s var(--ease) var(--c) both; } .tv-bai.is-playing .tv-bai__src-h i { animation: tv-bai-src-dot 0.6s var(--ease) var(--c) both; } .tv-bai__src--data { --c: 5.35s; } .tv-bai__src--sys { --c: 6s; } .tv-bai__src--proc { --c: 6.35s; } .tv-bai__src--docs { --c: 5.65s; } .tv-bai__src--comm { --c: 6.6s; } @keyframes tv-bai-src-link { from { opacity: 0.5; border-color: var(--border); box-shadow: 0 1.6cqw 3.4cqw -1.8cqw rgba(0, 0, 0, 0.85); } to { opacity: 1; border-color: rgba(150, 195, 255, 0.42); box-shadow: 0 1.6cqw 3.4cqw -1.8cqw rgba(0, 0, 0, 0.85), 0 0 2.6cqw -0.6cqw rgba(61, 139, 255, 0.5), 0 1px 0 rgba(200, 225, 255, 0.18) inset; } } @keyframes tv-bai-src-dot { from { background: var(--ink-faint); box-shadow: none; } to { background: #6FA8FF; box-shadow: 0 0 0.9cqw #6FA8FF; } } :root[data-theme="light"] .tv-bai__src { background: linear-gradient(170deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 255, 0.94)); border-color: rgba(47, 123, 255, 0.32); color: #1B2B45; box-shadow: 0 1.6cqw 3.4cqw -2cqw rgba(14, 40, 90, 0.4), 0 0 2.4cqw -1cqw rgba(0, 170, 255, 0.45); } :root[data-theme="light"] .tv-bai__src-h { color: #2F7BFF; } :root[data-theme="light"] .tv-bai__src small { color: #5A6C8A; } :root[data-theme="light"] .tv-bai__src-kpis b, :root[data-theme="light"] .tv-bai__src-msg, :root[data-theme="light"] .tv-bai__src-flow span.is-on { color: #0B1628; } :root[data-theme="light"] .tv-bai__src-chips span, :root[data-theme="light"] .tv-bai__src-flow span, :root[data-theme="light"] .tv-bai__src-msg { background: rgba(47, 123, 255, 0.05); border-color: rgba(15, 35, 70, 0.1); } :root[data-theme="light"] .tv-bai__src-flow span { color: #4F6282; } :root[data-theme="light"] .tv-bai__src-kpis em { color: #12936A; } :root[data-theme="light"] .tv-bai__src-files b { background: rgba(47, 123, 255, 0.12); color: #2F7BFF; } /* Планшет и мобильный: одна колонка в порядке истории — заголовок, посылка, превращение, затем вывод (без таймера, всё видно). */ @media (max-width: 1080px) { .tv-bai-layout { grid-template-columns: minmax(0, 1fr); } .tv-bai-layout__text, .tv-bai-story { display: contents; } .tv-bai-layout > * , .tv-bai-layout__text > *, .tv-bai-story > * { max-width: 40rem; } .tv-bai-layout .tv-bai { max-width: 900px; } .tv-bai-story::before, .tv-bai-step::before { display: none; } .tv-bai-step--a { order: 1; } .tv-bai { order: 2; } .tv-bai-step--b { order: 3; } .tv-bai-step--c { order: 4; } .tv-bai-step--a, .tv-bai-step--b, .tv-bai-step--c { margin: 0; } .tv-bai-step--b { padding-top: 4px; } } @media (max-width: 720px) { .tv-bai-layout .tv-scene__title { font-size: 32px; } .tv-bai-step__lead { font-size: 18px; } .tv-bai-step__lead--final { font-size: 21px; } .tv-bai-step__text { font-size: 15px; } .tv-bai-step__caps { flex-direction: column; font-size: 14.5px; } /* Источники — читаемым столбиком под превращением */ .tv-bai { display: flex; flex-direction: column; } .tv-bai__stage { order: 1; } .tv-bai__srcs { order: 2; position: static; container-type: normal; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; } .tv-bai__src { position: relative; left: auto; top: auto; transform: none; padding: 11px 12px; border-radius: 12px; font-size: 13px; white-space: normal; } .tv-bai__src--data, .tv-bai__src--proc, .tv-bai__src--comm { grid-column: 1 / -1; } .tv-bai__src--data { order: 1; } .tv-bai__src--sys { order: 2; } .tv-bai__src--docs { order: 3; } .tv-bai__src--proc { order: 4; } .tv-bai__src--comm { order: 5; } .tv-bai__demo { order: 6; } .tv-bai__src-h { gap: 7px; margin-bottom: 7px; font-size: 10.5px; } .tv-bai__src-h i { width: 6px; height: 6px; box-shadow: none; } .tv-bai__src small { font-size: 11.5px; } .tv-bai__src-kpis { gap: 22px; } .tv-bai__src-kpis b { font-size: 19px; } .tv-bai__src-kpis em { font-size: 11.5px; } .tv-bai__src--data svg { height: 18px; margin-top: 6px; } .tv-bai__src-chips { flex-wrap: wrap; gap: 6px; } .tv-bai__src-chips span { gap: 5px; padding: 3px 8px; border-radius: 7px; } .tv-bai__src-chips span::before { width: 5px; height: 5px; } .tv-bai__src-flow { gap: 4px; flex-wrap: wrap; } .tv-bai__src-flow span { padding: 3px 8px; border-radius: 7px; } .tv-bai__src-flow span + span::before { margin: 0 5px 0 -2px; } .tv-bai__src-files { gap: 5px; } .tv-bai__src-files b { min-width: 30px; font-size: 9.5px; border-radius: 4px; } .tv-bai__src-msg { padding: 7px 9px; border-radius: 9px 9px 9px 3px; } .tv-bai__demo { position: static; grid-column: 1 / -1; font-size: 11.5px; } } /* ============================================================ 13. ЦИФРОВОЙ СОТРУДНИК (TV-REBIRTH-DIGITAL-EMPLOYEE-1) ------------------------------------------------------------ Смена ритма: спокойная рабочая поверхность, без сферы и орбиты. Материал и цвета — токены поверхностей ROS (.tv-ui). Шаги журнала и обращение «за пределами роли» получают классы is-active / is-done из technovolga.js; без них (нет JS / reduced motion / ≤1100px) — итоговое состояние: все шаги выполнены, обращение передано. Статусы — текстом и знаком (✓, «нет доступа»), не только цветом. ============================================================ */ .tv-de { position: relative; padding: clamp(56px, 7vh, 96px) 0 clamp(40px, 5vh, 72px); background: transparent; } .tv-de__layout, .tv-de__roles { max-width: 1320px; } .tv-de__layout { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: clamp(28px, 3.2vw, 52px); align-items: center; } .tv-de__eyebrow { margin: 0; } .tv-de__title { margin: 14px 0 18px; font-size: clamp(30px, 1.9vw + 14px, 44px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; } .tv-de__lead { margin: 0 0 10px; font-size: clamp(18px, 0.6vw + 11px, 21px); font-weight: 700; line-height: 1.35; color: var(--ink); } .tv-de__sub { margin: 0; max-width: 32rem; font-size: var(--step-0, 16px); line-height: 1.55; color: var(--ink-muted); } .tv-de__outro { margin-top: clamp(22px, 3vh, 34px); padding-top: 18px; border-top: 1px solid var(--border); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .tv-de__outro-h { margin: 0 0 10px; font-size: 18px; font-weight: 750; color: var(--ink); } .tv-de__outro-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--ink-muted); } .tv-de__outro-list li::before { content: "✓"; margin-right: 9px; color: var(--accent-soft); font-weight: 700; } /* --- Рабочая поверхность --- */ .tv-de__ws { position: relative; padding: 20px 22px 22px; font-size: 14px; } .tv-de__bar { gap: 12px; } .tv-de__mark { position: relative; width: 22px; height: 22px; border-radius: 50%; background: url("/core-ring-sm.webp?v=20260825-rc1") center / contain no-repeat; box-shadow: 0 0 12px -2px var(--glow-core); flex-shrink: 0; } .tv-de__bar strong { font-size: 16px; } .tv-de__state { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--ui-muted); } .tv-de__state i { width: 7px; height: 7px; border-radius: 50%; background: #3FD39A; } .tv-de__state-run { display: none; } .tv-de__demo { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--ui-faint); } .tv-de__body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; margin-top: 16px; } /* Журнал задачи: шаги на одной линии работы */ .tv-de__log { position: relative; list-style: none; margin: 0; padding: 0 0 0 26px; display: flex; flex-direction: column; gap: 10px; } .tv-de__log::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 14px; width: 1px; background: var(--ui-line); } .tv-de__step { position: relative; padding: 11px 14px 12px; border-radius: 12px; background: var(--ui-tile); border: 1px solid var(--ui-tile-line); transition: opacity 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease); } .tv-de__dot { position: absolute; left: -26px; top: 13px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: var(--ui-accent); color: #fff; font-size: 9px; font-weight: 800; } .tv-de__dot::after { content: "✓"; } .tv-de__k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui-muted); } .tv-de__ticket { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--ui-strong); } .tv-de__chips, .tv-de__rules, .tv-de__access { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; } .tv-de__chips span { padding: 3px 10px; border-radius: 8px; background: var(--ui-accent-bg); color: var(--ui-strong); font-size: 13px; font-weight: 650; } .tv-de__kv { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 8px 0 0; } .tv-de__kv div { display: flex; flex-direction: column; gap: 2px; } .tv-de__kv dt { font-size: 11.5px; color: var(--ui-faint); } .tv-de__kv dd { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ui-strong); white-space: nowrap; } .tv-de__access { gap: 5px 10px; margin-top: 9px; font-size: 11.5px; } .tv-de__access .ok { color: var(--ui-muted); } .tv-de__access .ok::before { content: "✓ "; color: var(--ui-up); font-weight: 700; } .tv-de__access .no { color: var(--ui-faint); opacity: 0.8; } .tv-de__access .no::before { content: "⊘ "; } .tv-de__rules span { font-size: 13.5px; font-weight: 600; color: var(--ui-up); } .tv-de__step--result { border-color: rgba(63, 211, 154, 0.35); background: rgba(63, 211, 154, 0.06); } .tv-de__reply { margin: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--ui-strong); } .tv-de__done { position: absolute; right: 12px; top: 10px; padding: 2px 9px; border-radius: 999px; background: rgba(63, 211, 154, 0.14); color: var(--ui-up); font-size: 11.5px; font-weight: 750; letter-spacing: 0.04em; } /* Договор роли и обращение за пределами роли */ .tv-de__side { display: flex; flex-direction: column; gap: 12px; } .tv-de__role { padding: 13px 15px; border-radius: 12px; border: 1px dashed var(--ui-tile-line); } .tv-de__role-h { font-size: 11.5px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-accent); } .tv-de__role dl { margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; } .tv-de__role dt { font-size: 11px; color: var(--ui-faint); text-transform: uppercase; letter-spacing: 0.06em; } .tv-de__role dd { margin: 1px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ui-ink); line-height: 1.35; } .tv-de__role-hand { padding: 7px 9px; margin: 0 -9px; border-radius: 8px; transition: background 0.5s var(--ease); } .tv-de__hand { padding: 12px 14px; border-radius: 12px; background: var(--ui-tile); border: 1px solid rgba(255, 181, 71, 0.4); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); } .tv-de__hand-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 9px 0 0; } .tv-de__need { padding: 3px 9px; border-radius: 999px; background: rgba(255, 181, 71, 0.14); color: #FFC978; font-size: 12px; font-weight: 750; } .tv-de__to { font-size: 13px; font-weight: 650; color: var(--ui-strong); transition: opacity 0.5s var(--ease); } /* --- Другие роли --- */ .tv-de__roles { margin-top: clamp(24px, 3.6vh, 44px); } .tv-de__roles-h { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .tv-de__roles ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); } .tv-de__roles li { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px 0 0; } .tv-de__roles li + li { padding-left: 18px; border-left: 1px solid var(--border); } .tv-de__roles b { font-size: 15px; font-weight: 700; color: var(--ink); } .tv-de__roles span { font-size: 13.5px; color: var(--ink-faint); } /* --- Сюжет (JS, десктоп): шаги ждут, становятся активными, выполняются --- */ .tv-de--js .tv-de__step:not(.is-active):not(.is-done) { opacity: 0.22; } .tv-de--js .tv-de__step:not(.is-done) .tv-de__dot { background: transparent; border: 1px solid var(--ui-faint); } .tv-de--js .tv-de__step:not(.is-done) .tv-de__dot::after { content: ""; } .tv-de--js .tv-de__step.is-active { border-color: rgba(111, 168, 255, 0.55); background: var(--ui-accent-bg); } .tv-de--js .tv-de__step.is-active .tv-de__dot { border-color: var(--ui-accent); box-shadow: 0 0 0 4px var(--ui-accent-bg); animation: tv-de-pulse 1.1s ease-in-out infinite; } .tv-de--js .tv-de__step--result:not(.is-done) .tv-de__done { opacity: 0; } .tv-de--js .tv-de__step[data-step="3"].is-active .tv-de__kv div { animation: tv-de-in 0.45s var(--ease) both; } .tv-de--js .tv-de__step[data-step="3"].is-active .tv-de__kv div:nth-child(2) { animation-delay: 0.25s; } .tv-de--js .tv-de__step[data-step="3"].is-active .tv-de__kv div:nth-child(3) { animation-delay: 0.5s; } .tv-de--js .tv-de__step[data-step="4"].is-active .tv-de__rules span { animation: tv-de-in 0.45s var(--ease) both; } .tv-de--js .tv-de__step[data-step="4"].is-active .tv-de__rules span + span { animation-delay: 0.35s; } .tv-de--js .tv-de__hand:not(.is-active):not(.is-done) { opacity: 0; transform: translateY(10px); } .tv-de--js .tv-de__hand:not(.is-done) .tv-de__to { opacity: 0; } .tv-de--js.is-hand .tv-de__role-hand { background: rgba(255, 181, 71, 0.1); } .tv-de--js:not(.is-done) .tv-de__state-run { display: inline; } .tv-de--js:not(.is-done) .tv-de__state-done { display: none; } .tv-de--js:not(.is-done) .tv-de__state i { background: var(--ui-accent); animation: tv-de-pulse 1.1s ease-in-out infinite; } .tv-de--js:not(.is-done) .tv-de__outro { opacity: 0; transform: translateY(10px); } @keyframes tv-de-pulse { 50% { opacity: 0.45; } } @keyframes tv-de-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* --- Светлая тема --- */ :root[data-theme="light"] .tv-de__need { background: rgba(232, 146, 20, 0.14); color: #A35F00; } :root[data-theme="light"] .tv-de__hand { border-color: rgba(232, 146, 20, 0.45); } :root[data-theme="light"] .tv-de__step--result { border-color: rgba(18, 147, 106, 0.35); background: rgba(18, 147, 106, 0.05); } :root[data-theme="light"] .tv-de__done { background: rgba(18, 147, 106, 0.12); } :root[data-theme="light"] .tv-de--js.is-hand .tv-de__role-hand { background: rgba(232, 146, 20, 0.1); } /* --- Планшет и мобильный: история столбцом --- */ @media (max-width: 1100px) { .tv-de__layout { grid-template-columns: minmax(0, 1fr); row-gap: 0; } .tv-de__text { display: contents; } .tv-de__ws { margin-top: 26px; } .tv-de__outro { margin-top: 26px !important; } .tv-de__eyebrow, .tv-de__title, .tv-de__lead, .tv-de__sub { max-width: 40rem; } .tv-de__ws { order: 1; } .tv-de__outro { order: 2; margin-top: 0; } .tv-de__roles ul { grid-template-columns: 1fr 1fr; gap: 14px 0; } .tv-de__roles li:nth-child(3) { padding-left: 0; border-left: 0; } } @media (max-width: 720px) { .tv-de__title { font-size: 32px; } .tv-de__ws { padding: 14px; } .tv-de__bar { flex-wrap: wrap; row-gap: 4px; } .tv-de__demo { margin-left: 0; width: 100%; } .tv-de__body { grid-template-columns: minmax(0, 1fr); } .tv-de__side { flex-direction: column-reverse; } .tv-de__done { position: static; display: inline-block; margin-top: 8px; } .tv-de__roles ul { grid-template-columns: 1fr; } .tv-de__roles li, .tv-de__roles li + li { padding: 12px 0 0; border-left: 0; } } @media (prefers-reduced-motion: reduce) { .tv-de__step, .tv-de__hand, .tv-de__outro, .tv-de__to { transition: none; } } /* ============================================================ 14. РЕШЕНИЯ · КАРТА БИЗНЕСА (TV-REBIRTH-SOLUTIONS-1) ------------------------------------------------------------ Шесть территорий бизнеса на одном поле, не сетка карточек: разная ширина, смещение по вертикали, свой рабочий фрагмент; граница территории — линия-«узел» сверху и лёгкая подсветка, без рамки. Наведение / фокус выделяет территорию (остальные тише) — ничего не скрыто. Движение — только дыхание знака Technovolga AI, на паузе вне экрана (.is-in от technovolga.js; без JS — неподвижно). ============================================================ */ .tv-sol { position: relative; padding: clamp(80px, 11vh, 140px) 0 clamp(72px, 10vh, 120px); background: transparent; overflow-x: clip; } .tv-sol__wrap { max-width: 1320px; } .tv-sol__head { max-width: 46rem; } .tv-sol__eyebrow { margin: 0; } .tv-sol__title { margin: 14px 0 18px; font-size: clamp(32px, 2.4vw + 12px, 52px); font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; } .tv-sol__lead { margin: 0; max-width: 40rem; font-size: var(--step-1); line-height: 1.55; color: var(--ink-muted); } /* Поле карты: точечная сетка с мягкой маской */ .tv-sol__map { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.6vw, 44px); row-gap: clamp(44px, 6vh, 72px); margin-top: clamp(48px, 7vh, 84px); padding: clamp(28px, 3vw, 44px) 0; } .tv-sol__map::before { content: ""; position: absolute; inset: -40px -60px; z-index: -1; background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent) 1px, transparent 1.6px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 80%); mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 20%, transparent 80%); opacity: 0.55; pointer-events: none; } .tv-sol__sig { position: absolute; right: 0; top: -14px; display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 750; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); } .tv-sol__sig i { width: 20px; height: 20px; border-radius: 50%; background: url("/core-ring-sm.webp?v=20260825-rc1") center / contain no-repeat; box-shadow: 0 0 12px -2px var(--glow-core); } .tv-sol.is-in .tv-sol__sig i { animation: tv-sol-breathe 5s ease-in-out infinite; } @keyframes tv-sol-breathe { 50% { box-shadow: 0 0 20px 0 var(--glow-core); } } /* Территории: место на карте */ .tv-sol__area--sales { grid-column: 1 / span 7; } .tv-sol__area--service { grid-column: 8 / span 5; margin-top: 64px; } .tv-sol__area--owner { grid-column: 1 / span 5; grid-row: 2; } .tv-sol__area--docs { grid-column: 6 / span 4; grid-row: 2; margin-top: 40px; } .tv-sol__area--comm { grid-column: 10 / span 3; grid-row: 2 / span 2; margin-top: 110px; } .tv-sol__area--ops { grid-column: 1 / span 9; grid-row: 3; margin-left: 6%; } .tv-sol__area { position: relative; padding-top: 18px; outline: none; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } /* Граница территории — линия с узлом, не рамка */ .tv-sol__area::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), var(--border) 40%, transparent); } .tv-sol__area::after { content: ""; position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--accent-soft); transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); } .tv-sol__area--sales, .tv-sol__area--ops { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; } .tv-sol__area--ops .tv-sol__frag { order: 2; } /* Рабочий фрагмент — малая стеклянная поверхность */ .tv-sol__frag { margin-bottom: 18px; padding: 13px 15px; border-radius: 14px; background: linear-gradient(160deg, rgba(26, 45, 82, 0.72), rgba(12, 21, 40, 0.78)); border: 1px solid rgba(150, 195, 255, 0.24); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(200, 225, 255, 0.12) inset; color: #DCE7F8; font-size: 13px; transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); } .tv-sol__area--sales .tv-sol__frag, .tv-sol__area--ops .tv-sol__frag { margin-bottom: 0; margin-top: 4px; } .tv-sol__fk { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8DA3C4; } .tv-sol__fq { margin: 5px 0 0; font-size: 14px; font-weight: 600; color: #fff; } .tv-sol__fchips, .tv-sol__fflow { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; } .tv-sol__fchips span { padding: 3px 9px; border-radius: 7px; background: rgba(61, 139, 255, 0.16); color: #CFE0FF; font-size: 12px; font-weight: 650; } .tv-sol__fchips span::before { content: "✓ "; color: #6FD7A8; } .tv-sol__fnext { margin: 9px 0 0; font-size: 12.5px; color: #9CC3FF; font-weight: 600; } .tv-sol__frow { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid rgba(140, 180, 255, 0.12); font-size: 12.5px; color: #CFDBEF; } .tv-sol__frow em { font-style: normal; font-weight: 700; white-space: nowrap; } .tv-sol__frow em.ok { color: #6FD7A8; } .tv-sol__frow em.hand { color: #FFC978; } .tv-sol__fmetric { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 0; } .tv-sol__fmetric b { font-size: 22px; font-weight: 750; color: #fff; } .tv-sol__fmetric small { font-size: 12px; color: #8DA3C4; } .tv-sol__frag svg { display: block; width: 100%; height: 30px; margin-top: 4px; } .tv-sol__frag polyline { fill: none; stroke: #6FA8FF; stroke-width: 1.6; vector-effect: non-scaling-stroke; } .tv-sol__fattn, .tv-sol__fexc { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: #FFC978; } .tv-sol__fattn i, .tv-sol__fexc i { width: 7px; height: 7px; border-radius: 50%; background: #FFB547; box-shadow: 0 0 8px #FFB547; flex-shrink: 0; } .tv-sol__ffiles, .tv-sol__fchan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .tv-sol__ffiles li, .tv-sol__fchan li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #CFDBEF; } .tv-sol__ffiles b { min-width: 30px; padding: 1px 0; border-radius: 4px; background: rgba(61, 139, 255, 0.18); color: #9CC3FF; font-size: 9.5px; font-weight: 800; text-align: center; } .tv-sol__fx { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid rgba(140, 180, 255, 0.12); font-size: 12.5px; color: #CFDBEF; } .tv-sol__fx b { color: #fff; } .tv-sol__fflow span { position: relative; padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(140, 180, 255, 0.16); font-size: 12.5px; font-weight: 600; color: #8DA3C4; } .tv-sol__fflow span.done { color: #CFDBEF; } .tv-sol__fflow span.done::before { content: "✓ "; color: #6FD7A8; } .tv-sol__fflow span.now { color: #fff; border-color: rgba(111, 168, 255, 0.55); background: rgba(61, 139, 255, 0.16); } .tv-sol__fchan b { min-width: 64px; font-size: 11px; font-weight: 750; color: #9CC3FF; } .tv-sol__fone { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid rgba(140, 180, 255, 0.12); font-size: 12.5px; font-weight: 650; color: #fff; } .tv-sol__fone::before { content: "◆"; margin-right: 7px; font-size: 8px; color: #6FA8FF; vertical-align: 2px; } /* Текст территории */ .tv-sol__text h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: clamp(19px, 0.6vw + 12px, 22px); font-weight: 750; color: var(--ink); } .tv-sol__text h3 span { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent-soft); } .tv-sol__pain { margin: 0 0 10px; font-size: 16px; line-height: 1.45; color: var(--ink); } .tv-sol__does { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--ink-muted); } .tv-sol__out { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); } .tv-sol__out b { color: var(--accent-soft); font-weight: 700; } /* Выделение: территория ближе, остальные тише */ @media (hover: hover) { .tv-sol__map:hover .tv-sol__area:not(:hover) { opacity: 0.55; } .tv-sol__area:hover { transform: translateY(-4px); } .tv-sol__area:hover .tv-sol__frag { border-color: rgba(150, 195, 255, 0.5); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.9), 0 0 30px -10px rgba(61, 139, 255, 0.55); } .tv-sol__area:hover::after { background: var(--accent-soft); box-shadow: 0 0 10px var(--accent-soft); } } .tv-sol__map:has(.tv-sol__area:focus-visible) .tv-sol__area:not(:focus-visible) { opacity: 0.55; } .tv-sol__area:focus-visible { transform: translateY(-4px); } .tv-sol__area:focus-visible::after { background: var(--accent-soft); box-shadow: 0 0 10px var(--accent-soft); } .tv-sol__area:focus-visible .tv-sol__frag { border-color: var(--accent-soft); } .tv-sol__area:focus-visible .tv-sol__text h3 { text-decoration: underline; text-decoration-color: var(--accent-soft); text-underline-offset: 5px; } /* Финал: позиционирование и вход */ .tv-sol__end { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(56px, 8vh, 96px); padding-top: clamp(32px, 4vh, 48px); border-top: 1px solid var(--border); } .tv-sol__pos-h { margin: 0 0 8px; font-size: clamp(22px, 1vw + 12px, 28px); font-weight: 800; line-height: 1.2; color: var(--ink); } .tv-sol__pos-t { margin: 0; max-width: 34rem; font-size: var(--step-1); line-height: 1.5; color: var(--ink-muted); } .tv-sol__pos-own { margin: 14px 0 0; font-size: 13px; color: var(--ink-faint); } .tv-sol__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .tv-sol__cta p { margin: 0; max-width: 26rem; font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); } /* --- Светлая тема --- */ :root[data-theme="light"] .tv-sol__frag { background: linear-gradient(170deg, rgba(255, 255, 255, 0.92), rgba(242, 247, 255, 0.9)); border-color: rgba(47, 123, 255, 0.2); color: #1B2B45; box-shadow: 0 18px 40px -30px rgba(14, 40, 90, 0.45); } :root[data-theme="light"] .tv-sol__fk, :root[data-theme="light"] .tv-sol__fmetric small { color: #5A6C8A; } :root[data-theme="light"] .tv-sol__fq, :root[data-theme="light"] .tv-sol__fmetric b, :root[data-theme="light"] .tv-sol__fx b, :root[data-theme="light"] .tv-sol__fone, :root[data-theme="light"] .tv-sol__fflow span.now { color: #0B1628; } :root[data-theme="light"] .tv-sol__frow, :root[data-theme="light"] .tv-sol__ffiles li, :root[data-theme="light"] .tv-sol__fchan li, :root[data-theme="light"] .tv-sol__fx, :root[data-theme="light"] .tv-sol__fflow span.done { color: #1B2B45; } :root[data-theme="light"] .tv-sol__fchips span { background: rgba(47, 123, 255, 0.1); color: #1B4FB0; } :root[data-theme="light"] .tv-sol__fnext, :root[data-theme="light"] .tv-sol__fchan b { color: #2F7BFF; } :root[data-theme="light"] .tv-sol__frow em.ok, :root[data-theme="light"] .tv-sol__fchips span::before, :root[data-theme="light"] .tv-sol__fflow span.done::before { color: #12936A; } :root[data-theme="light"] .tv-sol__frow em.hand, :root[data-theme="light"] .tv-sol__fattn, :root[data-theme="light"] .tv-sol__fexc { color: #A35F00; } :root[data-theme="light"] .tv-sol__fattn i, :root[data-theme="light"] .tv-sol__fexc i { background: #E89214; box-shadow: none; } :root[data-theme="light"] .tv-sol__ffiles b { background: rgba(47, 123, 255, 0.12); color: #2F7BFF; } :root[data-theme="light"] .tv-sol__fflow span { background: rgba(47, 123, 255, 0.04); border-color: rgba(15, 35, 70, 0.1); color: #5A6C8A; } :root[data-theme="light"] .tv-sol__frow, :root[data-theme="light"] .tv-sol__fx, :root[data-theme="light"] .tv-sol__fone { border-top-color: rgba(15, 35, 70, 0.1); } :root[data-theme="light"] .tv-sol__frag polyline { stroke: #2F7BFF; } /* --- Планшет: две колонки со сдвигом --- */ @media (max-width: 1100px) { .tv-sol__map { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tv-sol__area { grid-column: auto !important; grid-row: auto !important; margin-top: 0 !important; margin-left: 0 !important; } .tv-sol__area:nth-child(odd) { margin-top: 48px !important; } .tv-sol__area--sales, .tv-sol__area--ops { display: block; } .tv-sol__area--sales .tv-sol__frag, .tv-sol__area--ops .tv-sol__frag { margin: 0 0 18px; } .tv-sol__end { grid-template-columns: minmax(0, 1fr); } } /* --- Мобильный: одна колонка в порядке областей --- */ @media (max-width: 720px) { .tv-sol__title { font-size: 32px; } .tv-sol__map { grid-template-columns: minmax(0, 1fr); row-gap: 40px; margin-top: 40px; } .tv-sol__area:nth-child(odd) { margin-top: 0 !important; } .tv-sol__sig { position: static; margin-bottom: -8px; } .tv-sol__pain { font-size: 15.5px; } } @media (prefers-reduced-motion: reduce) { .tv-sol__area, .tv-sol__frag { transition: none; } .tv-sol.is-in .tv-sol__sig i { animation: none; } } /* ============================================================ 15. РЕАЛЬНАЯ РАБОТА · ДВА НАПРАВЛЕНИЯ (TV-REBIRTH-REAL-CASES-1) ------------------------------------------------------------ Редакционный ритм: текст | доказательство, во втором кейсе наоборот. Доказательство — коллаж из нескольких фрагментов рабочего интерфейса со смещением по глубине (не скриншот целиком). Движение — только пульс статуса «Работает», пока секция на экране (.is-in). Наведение / фокус выводит фрагмент вперёд — смысл от этого не зависит. ============================================================ */ .tv-rc { position: relative; padding: clamp(80px, 11vh, 140px) 0 clamp(72px, 10vh, 120px); background: transparent; overflow-x: clip; } .tv-rc__wrap { max-width: 1320px; } .tv-rc__head { max-width: 46rem; } .tv-rc__head .eyebrow { margin: 0; } .tv-rc__title { margin: 14px 0 18px; font-size: clamp(32px, 2.4vw + 12px, 52px); font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; } .tv-rc__lead { margin: 0; max-width: 40rem; font-size: var(--step-1); line-height: 1.55; color: var(--ink-muted); } .tv-rc__case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); align-items: center; margin-top: clamp(64px, 10vh, 120px); } .tv-rc__case--com { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .tv-rc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px; } .tv-rc__kind { font-size: 12.5px; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .tv-rc__status { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, #3FD39A 45%, transparent); font-size: 12px; font-weight: 700; color: var(--ink); } .tv-rc__status i { width: 7px; height: 7px; border-radius: 50%; background: #3FD39A; } .tv-rc.is-in .tv-rc__status i { animation: tv-rc-live 2.4s ease-in-out infinite; } @keyframes tv-rc-live { 50% { box-shadow: 0 0 0 4px rgba(63, 211, 154, 0.18); } } .tv-rc__h { margin: 0 0 14px; font-size: clamp(24px, 1.2vw + 14px, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); } .tv-rc__p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-muted); } .tv-rc__p b { color: var(--ink); font-weight: 700; } .tv-rc__works { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .tv-rc__works li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.45; color: var(--ink); } .tv-rc__works li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent-soft); font-weight: 700; } .tv-rc__note { margin: 12px 0 0; font-size: 13px; color: var(--ink-faint); } .tv-rc__out { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 16px; font-weight: 650; line-height: 1.5; color: var(--ink); } /* --- Доказательство: коллаж фрагментов --- */ .tv-rc__ev { position: relative; min-height: 560px; } .tv-rc__f { position: absolute; padding: 14px 16px; border-radius: 16px; background: linear-gradient(160deg, rgba(26, 45, 82, 0.94), rgba(12, 21, 40, 0.96)); border: 1px solid rgba(150, 195, 255, 0.3); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(200, 225, 255, 0.14) inset, 0 0 40px -18px rgba(61, 139, 255, 0.45); color: #DCE7F8; font-size: 13.5px; transition: transform 0.4s var(--ease), border-color 0.4s var(--ease); } @media (hover: hover) { .tv-rc__f:hover { transform: translateY(-4px); border-color: rgba(170, 210, 255, 0.55); z-index: 5; } } .tv-rc__fbar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(140, 180, 255, 0.13); } .tv-rc__fbar strong { font-size: 16px; color: #fff; } .tv-rc__fbar span { margin-left: auto; font-size: 11.5px; color: #7F93B3; } .tv-rc__fk { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: #8DA3C4; } .tv-rc__fk i.amber { width: 7px; height: 7px; border-radius: 50%; background: #FFB547; box-shadow: 0 0 8px #FFB547; } .tv-rc__f p { margin: 6px 0 0; line-height: 1.45; } /* Ресторан */ .tv-rc__f--main { left: 0; top: 30px; width: 70%; } .tv-rc__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; } .tv-rc__kpis div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(140, 180, 255, 0.1); } .tv-rc__kpis small { font-size: 11.5px; color: #8DA3C4; } .tv-rc__kpis b { font-size: 21px; font-weight: 750; color: #fff; } .tv-rc__kpis em { font-style: normal; font-size: 11.5px; color: #8DA3C4; } .tv-rc__kpis em.up { color: #6FD7A8; } .tv-rc__bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: 8px 2px 0; } .tv-rc__bars i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: linear-gradient(to top, rgba(61, 139, 255, 0.35), rgba(111, 168, 255, 0.8)); } .tv-rc__bars i.hl { background: linear-gradient(to top, rgba(61, 139, 255, 0.5), #9CC3FF); box-shadow: 0 0 14px -2px rgba(111, 168, 255, 0.8); } .tv-rc__axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #6A7E9E; } .tv-rc__axis i { font-style: normal; } .tv-rc__f--signal { right: 0; top: 0; width: 38%; border-color: rgba(255, 181, 71, 0.4); } .tv-rc__f--signal p { font-size: 14px; font-weight: 600; color: #fff; } .tv-rc__f--ask { right: 4%; top: 196px; width: 46%; } .tv-rc__q { font-size: 14px; font-weight: 650; color: #fff; } .tv-rc__a { display: flex; gap: 9px; padding: 10px 11px; margin-top: 9px !important; border-radius: 10px; background: rgba(61, 139, 255, 0.12); color: #CFDBEF; font-size: 13px; } .tv-rc__a span { flex-shrink: 0; height: fit-content; padding: 1px 6px; border-radius: 5px; background: rgba(61, 139, 255, 0.3); color: #fff; font-size: 10.5px; font-weight: 800; } .tv-rc__f--team { left: 8%; top: 370px; width: 42%; } .tv-rc__trow { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; margin-top: 8px !important; font-size: 12.5px; color: #CFDBEF; } .tv-rc__trow i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #6FA8FF var(--w), rgba(255, 255, 255, 0.07) var(--w)); } .tv-rc__f--team small { display: block; margin-top: 10px; font-size: 12px; color: #9CC3FF; font-weight: 650; } .tv-rc__disc { position: absolute; right: 0; bottom: 0; font-size: 12px; color: var(--ink-faint); } /* E-commerce */ .tv-rc__f--inbox { left: 0; top: 40px; width: 36%; } .tv-rc__conv { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 9px 10px; margin-top: 8px !important; border-radius: 10px; border: 1px solid rgba(140, 180, 255, 0.1); font-size: 12.5px; } .tv-rc__conv b { font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #9CC3FF; } .tv-rc__conv em { grid-column: 2; grid-row: 1; justify-self: end; font-style: normal; font-size: 11px; color: #6A7E9E; } .tv-rc__conv span { grid-column: 1 / -1; color: #CFDBEF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tv-rc__conv.is-on { background: rgba(61, 139, 255, 0.14); border-color: rgba(111, 168, 255, 0.45); } .tv-rc__f--dialog { left: 30%; top: 0; width: 58%; z-index: 2; } .tv-rc__msg { max-width: 88%; padding: 10px 12px; margin-top: 10px !important; border-radius: 12px 12px 12px 4px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(140, 180, 255, 0.14); color: #fff; font-weight: 600; } .tv-rc__draft { margin-top: 12px; padding: 11px 12px; border-radius: 12px; border: 1px dashed rgba(111, 168, 255, 0.5); background: rgba(61, 139, 255, 0.08); } .tv-rc__dk { font-size: 11px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: #9CC3FF; } .tv-rc__draft p { color: #DCE7F8; } .tv-rc__ops { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px !important; } .tv-rc__ops span { padding: 4px 11px; border-radius: 8px; border: 1px solid rgba(140, 180, 255, 0.22); font-size: 12px; font-weight: 650; color: #CFDBEF; } .tv-rc__ops span.send { background: var(--accent); border-color: var(--accent); color: #fff; } .tv-rc__ops em { font-style: normal; font-size: 11.5px; color: #8DA3C4; } .tv-rc__f--order { right: 0; top: 330px; width: 44%; } .tv-rc__orow { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; margin: 0 !important; border-bottom: 1px solid rgba(140, 180, 255, 0.1); font-size: 13px; color: #CFDBEF; } .tv-rc__orow b { color: #fff; font-weight: 650; } .tv-rc__ostat { display: inline-block; margin-top: 10px !important; padding: 2px 9px; border-radius: 999px; background: rgba(61, 139, 255, 0.16); color: #CFE0FF; font-size: 12px; font-weight: 700; } .tv-rc__ev--com .tv-rc__disc { left: 0; right: auto; } /* Финал секции */ .tv-rc__end { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(64px, 9vh, 110px); padding-top: clamp(32px, 4vh, 48px); border-top: 1px solid var(--border); } .tv-rc__bridge { margin: 0; font-size: clamp(22px, 1vw + 12px, 28px); font-weight: 800; line-height: 1.25; color: var(--ink); } .tv-rc__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .tv-rc__cta p { margin: 0; max-width: 26rem; font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); } /* --- Светлая тема --- */ :root[data-theme="light"] .tv-rc__f { background: linear-gradient(170deg, rgba(255, 255, 255, 0.97), rgba(242, 247, 255, 0.95)); border-color: rgba(47, 123, 255, 0.22); color: #1B2B45; box-shadow: 0 30px 60px -38px rgba(14, 40, 90, 0.5), 0 0 34px -20px rgba(0, 170, 255, 0.45); } :root[data-theme="light"] .tv-rc__f--signal { border-color: rgba(232, 146, 20, 0.45); } :root[data-theme="light"] .tv-rc__fbar strong, :root[data-theme="light"] .tv-rc__kpis b, :root[data-theme="light"] .tv-rc__f--signal p, :root[data-theme="light"] .tv-rc__q, :root[data-theme="light"] .tv-rc__msg, :root[data-theme="light"] .tv-rc__orow b { color: #0B1628; } :root[data-theme="light"] .tv-rc__fk, :root[data-theme="light"] .tv-rc__kpis small, :root[data-theme="light"] .tv-rc__kpis em, :root[data-theme="light"] .tv-rc__ops em, :root[data-theme="light"] .tv-rc__fbar span { color: #5A6C8A; } :root[data-theme="light"] .tv-rc__kpis div, :root[data-theme="light"] .tv-rc__conv, :root[data-theme="light"] .tv-rc__msg { background: rgba(47, 123, 255, 0.04); border-color: rgba(15, 35, 70, 0.1); } :root[data-theme="light"] .tv-rc__a, :root[data-theme="light"] .tv-rc__trow, :root[data-theme="light"] .tv-rc__conv span, :root[data-theme="light"] .tv-rc__draft p, :root[data-theme="light"] .tv-rc__orow { color: #1B2B45; } :root[data-theme="light"] .tv-rc__conv b, :root[data-theme="light"] .tv-rc__dk, :root[data-theme="light"] .tv-rc__f--team small { color: #2F7BFF; } :root[data-theme="light"] .tv-rc__ops span { color: #1B2B45; border-color: rgba(15, 35, 70, 0.15); } :root[data-theme="light"] .tv-rc__ops span.send { color: #fff; } :root[data-theme="light"] .tv-rc__kpis em.up { color: #12936A; } :root[data-theme="light"] .tv-rc__ostat { color: #1B4FB0; } /* --- Планшет и мобильный: кейс столбцом, доказательство после вводного текста --- */ @media (max-width: 1100px) { .tv-rc__case, .tv-rc__case--com { grid-template-columns: minmax(0, 1fr); gap: 0; } .tv-rc__text { display: contents; } .tv-rc__meta { order: 1; } .tv-rc__h { order: 2; } .tv-rc__p { order: 3; max-width: 44rem; } .tv-rc__ev { order: 4; margin: 28px 0 8px; } .tv-rc__works { order: 5; } .tv-rc__note { order: 6; } .tv-rc__out { order: 7; max-width: 44rem; } .tv-rc__end { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .tv-rc__title { font-size: 32px; } .tv-rc__ev { min-height: 0; display: flex; flex-direction: column; gap: 12px; } .tv-rc__f { position: relative; left: auto !important; right: auto !important; top: auto !important; width: auto !important; } .tv-rc__disc { position: static; } .tv-rc__kpis b { font-size: 18px; } .tv-rc__bars { height: 80px; } } @media (prefers-reduced-motion: reduce) { .tv-rc__f { transition: none; } .tv-rc.is-in .tv-rc__status i { animation: none; } } /* --- REAL-CASES-1-FIX1: E-commerce — коммерческий контур --- Заказ — центр коллажа; товар/импорт, экономика заказа и диалог — вокруг; «Развиваем дальше» — приглушённая пунктирная кромка (текстом, не только цветом). Старые правила E-commerce выше для этих классов переопределены здесь; ресторанный кейс не затронут. */ .tv-rc__ev--com { min-height: 660px; } .tv-rc__ev--com .tv-rc__f--prod { left: 0; top: 0; width: 46%; } .tv-rc__card { display: flex; gap: 12px; margin-top: 10px; } .tv-rc__ph { width: 58px; height: 58px; flex-shrink: 0; border-radius: 10px; background: linear-gradient(135deg, rgba(111, 168, 255, 0.35), rgba(61, 139, 255, 0.08)); border: 1px solid rgba(140, 180, 255, 0.25); } .tv-rc__card b { display: block; font-size: 14.5px; color: #fff; } .tv-rc__card small { display: block; margin-top: 2px; font-size: 12px; color: #8DA3C4; } .tv-rc__price { margin: 4px 0 0 !important; font-size: 17px; font-weight: 750; color: #fff; } .tv-rc__imp, .tv-rc__steps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px !important; } .tv-rc__imp span, .tv-rc__steps span { padding: 3px 9px; border-radius: 7px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(140, 180, 255, 0.16); font-size: 11.5px; font-weight: 650; color: #8DA3C4; } .tv-rc__imp span + span::before, .tv-rc__steps span + span::before { content: "→ "; color: #6A7E9E; } .tv-rc__imp span.done, .tv-rc__steps span.done { color: #CFDBEF; } .tv-rc__imp span.now, .tv-rc__steps span.now { color: #fff; border-color: rgba(111, 168, 255, 0.55); background: rgba(61, 139, 255, 0.16); } .tv-rc__ev--com .tv-rc__f--order { left: 12%; right: auto; top: 196px; width: 52%; z-index: 2; } .tv-rc__chip { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: rgba(61, 139, 255, 0.18); color: #CFE0FF; font-size: 12px; font-weight: 700; } .tv-rc__ev--com .tv-rc__orow em { font-style: normal; color: #fff; font-weight: 650; white-space: nowrap; } .tv-rc__ship { margin-top: 9px !important; font-size: 12px; color: #8DA3C4; } .tv-rc__ev--com .tv-rc__f--econ { right: 0; top: 56px; width: 33%; } .tv-rc__erow { display: flex; justify-content: space-between; gap: 10px; margin: 0 !important; padding: 7px 0; border-bottom: 1px solid rgba(140, 180, 255, 0.1); font-size: 12.5px; color: #CFDBEF; } .tv-rc__erow b { color: #fff; font-weight: 700; white-space: nowrap; } .tv-rc__erow b.neg { color: #F29A8A; } .tv-rc__erow--sum { border-bottom: 0; } .tv-rc__erow--sum span { font-weight: 700; color: #fff; } .tv-rc__erow--sum b { color: #6FD7A8; font-size: 14px; } .tv-rc__ev--com .tv-rc__f--dialog { left: auto; right: 0; top: 352px; width: 38%; z-index: 3; } .tv-rc__ev--com .tv-rc__msg { margin-top: 8px !important; padding: 8px 10px; font-size: 13px; } .tv-rc__ev--com .tv-rc__draft { margin-top: 9px; padding: 9px 10px; } .tv-rc__ev--com .tv-rc__draft p { font-size: 12.5px; } .tv-rc__next { position: absolute; left: 0; bottom: 32px; width: 54%; display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--border-strong); background: color-mix(in srgb, var(--bg) 55%, transparent); } .tv-rc__nk { font-size: 11px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } .tv-rc__nk::before { content: "◌ "; } .tv-rc__nf { font-size: 13.5px; font-weight: 650; color: var(--ink-muted); } .tv-rc__nf i { font-style: normal; font-weight: 500; color: var(--ink-faint); margin-left: 6px; } .tv-rc__group { margin: 20px 0 0; font-size: 11.5px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: #3FD39A; } .tv-rc__group + .tv-rc__works { margin-top: 10px; } .tv-rc__group--next { color: var(--ink-faint); } .tv-rc__nextp { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); } :root[data-theme="light"] .tv-rc__card b, :root[data-theme="light"] .tv-rc__price, :root[data-theme="light"] .tv-rc__erow b, :root[data-theme="light"] .tv-rc__erow--sum span, :root[data-theme="light"] .tv-rc__ev--com .tv-rc__orow em, :root[data-theme="light"] .tv-rc__imp span.now, :root[data-theme="light"] .tv-rc__steps span.now { color: #0B1628; } :root[data-theme="light"] .tv-rc__card small, :root[data-theme="light"] .tv-rc__ship, :root[data-theme="light"] .tv-rc__imp span, :root[data-theme="light"] .tv-rc__steps span { color: #5A6C8A; } :root[data-theme="light"] .tv-rc__imp span.done, :root[data-theme="light"] .tv-rc__steps span.done, :root[data-theme="light"] .tv-rc__erow { color: #1B2B45; } :root[data-theme="light"] .tv-rc__imp span, :root[data-theme="light"] .tv-rc__steps span { background: rgba(47, 123, 255, 0.04); border-color: rgba(15, 35, 70, 0.1); } :root[data-theme="light"] .tv-rc__erow b.neg { color: #D2513F; } :root[data-theme="light"] .tv-rc__erow--sum b, :root[data-theme="light"] .tv-rc__group { color: #12936A; } :root[data-theme="light"] .tv-rc__chip { color: #1B4FB0; } @media (max-width: 1100px) { /* E-commerce: «Работает сейчас» → доказательство → «Развиваем дальше» → итог */ .tv-rc__case--com .tv-rc__group, .tv-rc__case--com .tv-rc__works { order: 4; } .tv-rc__case--com .tv-rc__ev { order: 5; } .tv-rc__case--com .tv-rc__group--next, .tv-rc__case--com .tv-rc__nextp { order: 6; } .tv-rc__case--com .tv-rc__out { order: 7; } } @media (max-width: 720px) { .tv-rc__ev--com { min-height: 0; } .tv-rc__ev--com .tv-rc__f--order { order: -1; } .tv-rc__next { position: relative; left: auto; bottom: auto; width: auto; } } /* ============================================================ 16. ДАННЫЕ И ИНТЕГРАЦИИ (TV-REBIRTH-DATA-INTEGRATIONS-1) ------------------------------------------------------------ «Ткань данных»: источники → рабочий контекст роли → результат. Линии между ними — SVG от technovolga.js (без JS их нет, смысл — в тексте). Поток «нет доступа» обрывается у границы контекста. Бегущие по линиям импульсы — только при .is-in, без reduced motion. ============================================================ */ .tv-di { position: relative; padding: clamp(80px, 11vh, 140px) 0 clamp(72px, 10vh, 120px); background: transparent; overflow-x: clip; } .tv-di__wrap { max-width: 1320px; } .tv-di__head { max-width: 48rem; } .tv-di__head .eyebrow { margin: 0; } .tv-di__title { margin: 14px 0 18px; font-size: clamp(32px, 2.4vw + 12px, 52px); font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; } .tv-di__lead { margin: 0; max-width: 42rem; font-size: var(--step-1); line-height: 1.55; color: var(--ink-muted); } .tv-di__fabric { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 110px); align-items: center; margin-top: clamp(48px, 7vh, 84px); } .tv-di__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; } .tv-di__lines path { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1.2; } .tv-di__lines path.no { stroke: color-mix(in srgb, var(--ink-faint) 60%, transparent); stroke-dasharray: 3 5; } .tv-di__lines path.pulse { stroke: var(--accent-soft); stroke-width: 2; stroke-dasharray: 10 400; stroke-dashoffset: 410; opacity: 0; } .tv-di.is-in .tv-di__lines path.pulse { opacity: 1; animation: tv-di-pulse 4.2s linear infinite; animation-delay: var(--d, 0s); } @keyframes tv-di-pulse { to { stroke-dashoffset: 0; } } .tv-di__col { position: relative; z-index: 1; } .tv-di__ch { margin: 0 0 14px; font-size: 12px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } /* Источники */ .tv-di__srcs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .tv-di__src { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--border); } .tv-di__src b { font-size: 15px; font-weight: 700; color: var(--ink); } .tv-di__src span { font-size: 13px; color: var(--ink-muted); } .tv-di__src--no { border-style: dashed; opacity: 0.75; } .tv-di__src--no b::after { content: " · не для этой роли"; font-weight: 600; font-size: 12px; color: var(--ink-faint); } /* Рабочий контекст роли */ .tv-di__ctx { padding: 18px 20px; border-radius: 18px; background: linear-gradient(160deg, rgba(26, 45, 82, 0.94), rgba(12, 21, 40, 0.96)); border: 1px solid rgba(150, 195, 255, 0.38); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.9), 0 0 50px -18px rgba(61, 139, 255, 0.55), 0 1px 0 rgba(200, 225, 255, 0.16) inset; color: #DCE7F8; } .tv-di__ctx-k { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: #9CC3FF; } .tv-di__ctx-k i { width: 20px; height: 20px; border-radius: 50%; background: url("/core-ring-sm.webp?v=20260825-rc1") center / contain no-repeat; box-shadow: 0 0 12px -2px var(--glow-core); } .tv-di__role { margin: 12px 0 10px; font-size: 14px; color: #8DA3C4; } .tv-di__role b { color: #fff; font-weight: 700; } .tv-di__acc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .tv-di__acc li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; } .tv-di__acc li.ok { background: rgba(63, 211, 154, 0.07); color: #DCE7F8; } .tv-di__acc li.ok span { color: #6FD7A8; font-weight: 800; } .tv-di__acc li.no { border: 1px dashed rgba(140, 180, 255, 0.25); color: #8DA3C4; } .tv-di__acc li.no span { color: #8DA3C4; } .tv-di__tags { display: flex; gap: 6px; margin: 14px 0 0; } .tv-di__tags span { padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(140, 180, 255, 0.25); font-size: 11.5px; font-weight: 650; color: #9CC3FF; } .tv-di__rule { margin: 14px 4px 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); } /* Результат */ .tv-di__res { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .tv-di__res li { position: relative; padding-left: 24px; font-size: 16px; font-weight: 650; line-height: 1.4; color: var(--ink); } .tv-di__res li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent-soft); } .tv-di__res li:last-child::before { border-color: #FFB547; } .tv-di__value { margin: clamp(48px, 7vh, 80px) 0 0; max-width: 46rem; font-size: clamp(21px, 1vw + 12px, 27px); font-weight: 800; line-height: 1.3; color: var(--ink); } /* Основа: существующий контур, опыт, способы, оговорка */ .tv-di__base { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(36px, 5vh, 56px); padding-top: clamp(28px, 4vh, 40px); border-top: 1px solid var(--border); } .tv-di__exist h3 { margin: 0 0 8px; font-size: 18px; font-weight: 750; color: var(--ink); } .tv-di__exist p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-muted); } .tv-di__how { display: flex; flex-direction: column; gap: 12px; } .tv-di__how-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; margin: 0; align-items: baseline; } .tv-di__how-k { font-size: 11.5px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .tv-di__how-v { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); } .tv-di__honest { margin: 6px 0 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); font-size: 14px; line-height: 1.5; color: var(--ink-muted); } /* Светлая тема */ :root[data-theme="light"] .tv-di__ctx { background: linear-gradient(170deg, rgba(255, 255, 255, 0.97), rgba(242, 247, 255, 0.95)); border-color: rgba(47, 123, 255, 0.3); color: #1B2B45; box-shadow: 0 30px 60px -38px rgba(14, 40, 90, 0.5), 0 0 40px -20px rgba(0, 170, 255, 0.5); } :root[data-theme="light"] .tv-di__ctx-k, :root[data-theme="light"] .tv-di__tags span { color: #2F7BFF; } :root[data-theme="light"] .tv-di__role, :root[data-theme="light"] .tv-di__acc li.no, :root[data-theme="light"] .tv-di__acc li.no span { color: #5A6C8A; } :root[data-theme="light"] .tv-di__role b, :root[data-theme="light"] .tv-di__acc li.ok { color: #0B1628; } :root[data-theme="light"] .tv-di__acc li.ok { background: rgba(18, 147, 106, 0.07); } :root[data-theme="light"] .tv-di__acc li.ok span { color: #12936A; } :root[data-theme="light"] .tv-di__res li:last-child::before { border-color: #E89214; } /* Планшет и мобильный: вертикальный поток источники → контекст → результат */ @media (max-width: 1100px) { .tv-di__fabric { grid-template-columns: minmax(0, 1fr); gap: 34px; } .tv-di__lines { display: none; } .tv-di__col--ctx, .tv-di__col--res { position: relative; } .tv-di__col--ctx::before, .tv-di__col--res::before { content: "↓"; display: block; margin: -18px 0 12px 18px; font-size: 18px; color: var(--accent-soft); } .tv-di__base { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .tv-di__title { font-size: 32px; } .tv-di__how-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } .tv-di__res li { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .tv-di.is-in .tv-di__lines path.pulse { animation: none; opacity: 0; } } /* ============================================================ 17. КАК МЫ ВНЕДРЯЕМ (TV-REBIRTH-IMPLEMENTATION-1) ------------------------------------------------------------ Один путь из шести этапов: общая линия по центру, этапы чередуются над и под ней (зигзаг), у каждого — артефакт того же проекта на своей стадии. Без рамок-карточек у текста. Проявление слева направо при .is-in (JS); без JS — всё видно. ============================================================ */ .tv-im { position: relative; padding: clamp(80px, 11vh, 140px) 0 clamp(64px, 9vh, 110px); background: transparent; overflow-x: clip; } .tv-im__wrap { max-width: 1320px; } .tv-im__head { max-width: 48rem; } .tv-im__head .eyebrow { margin: 0; } .tv-im__title { margin: 14px 0 18px; font-size: clamp(32px, 2.4vw + 12px, 52px); font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; } .tv-im__lead { margin: 0; max-width: 42rem; font-size: var(--step-1); line-height: 1.55; color: var(--ink-muted); } /* Путь */ .tv-im__path { position: relative; list-style: none; margin: clamp(56px, 8vh, 96px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto 64px auto; column-gap: clamp(14px, 1.6vw, 26px); } .tv-im__path::before { content: ""; position: absolute; left: 0; right: 0; top: var(--line-y, 50%); height: 2px; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), var(--accent) 50%, var(--accent-soft)); transform-origin: left center; } .tv-im__st { display: contents; } .tv-im__st > * { grid-column: calc(var(--i) + 1); } /* Верстак: артефакты проекта — над линией, узел-номер — на линии, текст — под ней. */ .tv-im__st .tv-im__art { grid-row: 1; align-self: end; } .tv-im__st .tv-im__txt { grid-row: 3; align-self: start; } .tv-im__path { --art-h: 226px; --line-y: calc(var(--art-h) + 32px); grid-template-rows: var(--art-h) 64px auto; } .tv-im__art::after { content: ""; position: absolute; left: 50%; bottom: -33px; width: 1px; height: 32px; background: color-mix(in srgb, var(--accent) 50%, transparent); } .tv-im__txt { position: relative; padding: 0 2px; margin-top: -47px; text-align: left; } .tv-im__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink); margin: 0 0 12px calc(50% - 15px); position: relative; z-index: 1; } .tv-im__txt h3 { margin: 0 0 6px; font-size: clamp(16px, 0.5vw + 11px, 19px); font-weight: 750; line-height: 1.25; color: var(--ink); } .tv-im__txt p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); } /* Артефакты — одна и та же вещь, собирающаяся по ходу пути */ .tv-im__art { position: relative; padding: 12px 13px; border-radius: 14px; background: linear-gradient(160deg, rgba(26, 45, 82, 0.9), rgba(12, 21, 40, 0.94)); border: 1px solid rgba(150, 195, 255, 0.28); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(200, 225, 255, 0.12) inset; color: #DCE7F8; font-size: 12.5px; height: 100%; box-sizing: border-box; } .tv-im__art p { margin: 0; } .tv-im__ak { display: block; margin-bottom: 7px; font-size: 10.5px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: #9CC3FF; } .tv-im__art--biz { background: transparent; border-style: dashed; border-color: rgba(140, 180, 255, 0.22); box-shadow: none; } .tv-im__art--biz span { position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r)); padding: 4px 9px; margin: 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(140, 180, 255, 0.2); font-size: 12px; font-weight: 600; white-space: nowrap; color: #CFDBEF; } .tv-im__art--biz span.hl { border-color: rgba(255, 181, 71, 0.55); color: #FFC978; } .tv-im__chain { display: flex; flex-direction: column; gap: 4px; } .tv-im__chain span { padding: 4px 8px; border-radius: 7px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(140, 180, 255, 0.14); color: #CFDBEF; } .tv-im__chain span + span::before { content: "↓ "; color: #6A7E9E; } .tv-im__chain span:nth-child(n+2):nth-child(-n+3) { border-color: rgba(255, 181, 71, 0.45); } .tv-im__hit { display: flex; align-items: center; gap: 7px; margin-top: 8px !important; font-weight: 700; color: #FFC978; } .tv-im__hit i { width: 7px; height: 7px; border-radius: 50%; background: #FFB547; } .tv-im__art--role p { display: flex; flex-direction: column; padding: 4px 0; border-bottom: 1px solid rgba(140, 180, 255, 0.1); color: #fff; } .tv-im__art--role p b { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8DA3C4; } .tv-im__art--role p.hand b { color: #FFC978; } .tv-im__art--ctx p, .tv-im__art--dev p { display: flex; align-items: center; gap: 7px; padding: 6px 8px; margin-bottom: 5px !important; border-radius: 8px; } .tv-im__art--ctx p.ok { background: rgba(63, 211, 154, 0.08); color: #DCE7F8; } .tv-im__art--ctx p.ok span, .tv-im__art--dev p.done span { color: #6FD7A8; font-weight: 800; } .tv-im__art--ctx p.no { border: 1px dashed rgba(140, 180, 255, 0.25); color: #8DA3C4; } .tv-im__art--pilot { border-color: rgba(63, 211, 154, 0.4); } .tv-im__art--pilot p { padding: 4px 0; color: #DCE7F8; } .tv-im__live { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(63, 211, 154, 0.45); font-size: 12px; font-weight: 700; color: #9FE6C8; } .tv-im__live i { width: 7px; height: 7px; border-radius: 50%; background: #3FD39A; } .tv-im.is-in .tv-im__live i { animation: tv-rc-live 2.4s ease-in-out infinite; } .tv-im__art--dev p.done { background: rgba(63, 211, 154, 0.1); color: #fff; font-weight: 700; margin-bottom: 10px !important; } .tv-im__art--dev p.next { border: 1px dashed rgba(140, 180, 255, 0.3); color: #8DA3C4; } /* Принципы и вывод */ .tv-im__principles { list-style: none; margin: clamp(48px, 7vh, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border); } .tv-im__principles li { padding: 16px 20px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); } .tv-im__principles li + li { padding-left: 20px; border-left: 1px solid var(--border); } .tv-im__principles b { color: var(--ink); } .tv-im__end { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(48px, 7vh, 84px); } .tv-im__concl { margin: 0; font-size: clamp(26px, 1.6vw + 12px, 38px); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); } .tv-im__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .tv-im__cta p { margin: 0; max-width: 26rem; font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); } .tv-im__bridge { margin: clamp(44px, 6vh, 72px) 0 0; font-size: 13px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } .tv-im__bridge::after { content: " ↓"; color: var(--accent-soft); } /* Проявление по пути (только с JS и без reduced motion) */ .tv-im--js .tv-im__path::before { transform: scaleX(0); transition: transform 1.6s var(--ease); } .tv-im--js .tv-im__art, .tv-im--js .tv-im__txt { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(0.25s + var(--i) * 0.22s); } .tv-im--js.is-shown .tv-im__path::before { transform: none; } .tv-im--js.is-shown .tv-im__art, .tv-im--js.is-shown .tv-im__txt { opacity: 1; transform: none; } /* Светлая тема */ :root[data-theme="light"] .tv-im__art { background: linear-gradient(170deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 255, 0.94)); border-color: rgba(47, 123, 255, 0.24); color: #1B2B45; box-shadow: 0 24px 50px -34px rgba(14, 40, 90, 0.45); } :root[data-theme="light"] .tv-im__art--biz { background: transparent; box-shadow: none; } :root[data-theme="light"] .tv-im__art--biz span, :root[data-theme="light"] .tv-im__chain span { background: rgba(47, 123, 255, 0.05); border-color: rgba(15, 35, 70, 0.12); color: #1B2B45; } :root[data-theme="light"] .tv-im__art--biz span.hl, :root[data-theme="light"] .tv-im__hit, :root[data-theme="light"] .tv-im__art--role p.hand b { color: #A35F00; } :root[data-theme="light"] .tv-im__ak { color: #2F7BFF; } :root[data-theme="light"] .tv-im__art--role p, :root[data-theme="light"] .tv-im__art--dev p.done, :root[data-theme="light"] .tv-im__art--ctx p.ok, :root[data-theme="light"] .tv-im__art--pilot p { color: #0B1628; } :root[data-theme="light"] .tv-im__art--role p b, :root[data-theme="light"] .tv-im__art--ctx p.no, :root[data-theme="light"] .tv-im__art--dev p.next { color: #5A6C8A; } :root[data-theme="light"] .tv-im__art--ctx p.ok span, :root[data-theme="light"] .tv-im__art--dev p.done span { color: #12936A; } :root[data-theme="light"] .tv-im__live { color: #12936A; } /* Планшет и мобильный: вертикальный путь, линия слева */ @media (max-width: 1100px) { .tv-im__path { display: flex; flex-direction: column; gap: 30px; padding-left: 46px; } .tv-im__path::before { left: 14px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: center top; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, transparent), var(--accent) 50%, var(--accent-soft)); } .tv-im--js .tv-im__path::before { transform: scaleY(0); } .tv-im__st { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; } .tv-im__st > * { grid-column: auto !important; grid-row: auto !important; } .tv-im__st .tv-im__txt { order: 1; } .tv-im__st .tv-im__art { order: 2; } .tv-im__n { position: absolute; left: -46px; top: 0; margin: 0; } .tv-im__txt { margin-top: 0; } .tv-im__art { height: auto; } .tv-im__art::after { display: none; } .tv-im__principles { grid-template-columns: 1fr 1fr; row-gap: 18px; } .tv-im__principles li:nth-child(3) { padding-left: 0; border-left: 0; } .tv-im__end { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .tv-im__title { font-size: 32px; } .tv-im__st { grid-template-columns: minmax(0, 1fr); gap: 12px; } .tv-im__art { min-height: 0; } .tv-im__art--biz { min-height: 130px; } .tv-im__principles { grid-template-columns: minmax(0, 1fr); } .tv-im__principles li, .tv-im__principles li + li { padding: 14px 0 0; border-left: 0; } } @media (prefers-reduced-motion: reduce) { .tv-im.is-in .tv-im__live i { animation: none; } } /* IMPLEMENTATION-1: плотность артефактов (фрагменты внутри своих рамок) */ .tv-im__art--biz span { margin: 8px; } .tv-im__art--dev p { padding: 5px 8px; margin-bottom: 4px !important; } .tv-im__art--dev p.done { margin-bottom: 8px !important; } .tv-im__art--dev .tv-im__ak { margin-bottom: 5px; } @media (max-width: 1100px) { .tv-im__art--biz { height: 176px; } } /* ============================================================ 18. О ТЕХНОВОЛГА · С 2010 ГОДА (TV-REBIRTH-ABOUT-1) ------------------------------------------------------------ Вертикальный хребет времени (смена ритма после горизонтального «верстака»): слева — эпоха крупно, по центру — узел на линии, справа — тот же товар/заказ, обрастающий новым на каждом этапе. Янтарь — только 2010 и «Сегодня». Проявление эпох по одной при прокрутке (.is-seen от JS); без JS / reduced motion — всё сразу. ============================================================ */ .tv-ab { position: relative; padding: clamp(88px, 12vh, 150px) 0 clamp(72px, 10vh, 120px); background: transparent; overflow-x: clip; } .tv-ab__wrap { max-width: 1240px; } .tv-ab__head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; } .tv-ab__head .eyebrow { margin: 0; color: #FFB547; } .tv-ab__title { margin: 14px 0 20px; font-size: clamp(36px, 2.8vw + 14px, 60px); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; } .tv-ab__core { margin: 0; max-width: 36rem; font-size: clamp(18px, 0.6vw + 12px, 22px); font-weight: 650; line-height: 1.45; color: var(--ink); } .tv-ab__years { display: flex; align-items: baseline; gap: 16px; margin: 0 0 6px; padding-left: 26px; border-left: 2px solid rgba(255, 181, 71, 0.6); } .tv-ab__years b { font-size: clamp(76px, 5vw + 30px, 128px); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; color: var(--ink); } .tv-ab__years span { max-width: 10rem; font-size: 16px; font-weight: 650; line-height: 1.35; color: var(--ink-muted); } /* Хребет */ .tv-ab__eras { position: relative; list-style: none; margin: clamp(64px, 9vh, 110px) 0 0; padding: 0; } .tv-ab__eras::before { content: ""; position: absolute; left: calc(32% + 0px); top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, #FFB547, var(--accent) 18%, var(--accent) 82%, #FFB547); opacity: 0.75; } .tv-ab__era { position: relative; display: grid; grid-template-columns: 32% minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: auto auto; column-gap: clamp(28px, 3vw, 48px); padding: 0 0 clamp(36px, 5vh, 56px); } .tv-ab__era::before { content: ""; position: absolute; left: calc(32% - 7px); top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); } .tv-ab__era--pivot::before { border-color: #FFB547; box-shadow: 0 0 16px -2px rgba(255, 181, 71, 0.7); } .tv-ab__when { grid-column: 1; grid-row: 1 / span 2; text-align: right; padding-right: 34px; } .tv-ab__mark { display: block; font-size: 12px; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); } .tv-ab__era--pivot .tv-ab__mark { color: #FFB547; font-size: clamp(30px, 1.8vw + 10px, 44px); font-weight: 800; letter-spacing: -0.01em; line-height: 1; margin-bottom: 4px; } .tv-ab__era--now .tv-ab__mark { font-size: clamp(24px, 1.2vw + 10px, 32px); } .tv-ab__when h3 { margin: 6px 0 0; font-size: clamp(19px, 0.7vw + 12px, 24px); font-weight: 750; line-height: 1.2; color: var(--ink); } .tv-ab__txt { grid-column: 2; grid-row: 1; margin: 4px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-muted); } .tv-ab__obj { grid-column: 3; grid-row: 1 / span 2; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(160deg, rgba(26, 45, 82, 0.78), rgba(12, 21, 40, 0.86)); border: 1px solid rgba(150, 195, 255, 0.24); color: #DCE7F8; font-size: 13px; } .tv-ab__obj span, .tv-ab__obj small { padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(140, 180, 255, 0.18); font-weight: 650; white-space: nowrap; } .tv-ab__obj small { background: none; border: 0; padding: 0; color: #8DA3C4; font-weight: 500; } /* тот же товар и заказ — сквозные «персонажи» */ .tv-ab__prod { border-color: rgba(255, 181, 71, 0.5) !important; color: #FFE2B5 !important; } .tv-ab__obj--offline { border-style: dashed; background: transparent; } .tv-ab__obj--offline span:first-child { border-color: rgba(255, 181, 71, 0.5); color: #FFE2B5; } .tv-ab__browser { width: 34px; height: 24px; border-radius: 5px; border: 1px solid rgba(140, 180, 255, 0.4); background: linear-gradient(to bottom, rgba(140, 180, 255, 0.35) 0 5px, transparent 5px); } .tv-ab__ord { border-color: rgba(111, 168, 255, 0.55) !important; color: #fff; } .tv-ab__pay { color: #9FE6C8; border-color: rgba(63, 211, 154, 0.4) !important; } .tv-ab__link { width: 28px; height: 2px; background: linear-gradient(90deg, #6FA8FF, #9CC3FF); } .tv-ab__sys { color: #CFE0FF; } .tv-ab__ch { color: #CFDBEF; } .tv-ab__steps { display: inline-flex; gap: 5px; padding: 0 !important; border: 0 !important; background: none !important; } .tv-ab__steps i { font-style: normal; padding: 3px 8px; border-radius: 7px; background: rgba(61, 139, 255, 0.16); color: #CFE0FF; font-size: 12px; } .tv-ab__steps i + i::before { content: "→ "; color: #6A7E9E; } .tv-ab__obj--ai { border-color: rgba(255, 181, 71, 0.45); box-shadow: 0 0 40px -16px rgba(255, 181, 71, 0.45), 0 0 40px -18px rgba(61, 139, 255, 0.6); } .tv-ab__ctx { color: #fff; } .tv-ab__role { display: inline-flex; align-items: center; gap: 7px; color: #fff; } .tv-ab__role i { width: 16px; height: 16px; border-radius: 50%; background: url("/core-ring-sm.webp?v=20260825-rc1") center / contain no-repeat; } .tv-ab__hint { background: none !important; border: 0 !important; padding: 0 !important; color: #8DA3C4; font-weight: 500 !important; } /* Две стороны, продолжение, вывод */ .tv-ab__persp { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(28px, 4vh, 48px); padding-top: clamp(28px, 4vh, 44px); border-top: 1px solid var(--border); } .tv-ab__two { margin: 0; font-size: clamp(22px, 1.1vw + 12px, 30px); font-weight: 800; line-height: 1.25; color: var(--ink); } .tv-ab__why { margin: 4px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-muted); } .tv-ab__cont { margin: clamp(44px, 6vh, 72px) 0 0; padding: 22px 26px; border-radius: 16px; border: 1px solid rgba(255, 181, 71, 0.35); background: rgba(255, 181, 71, 0.05); font-size: clamp(19px, 0.8vw + 12px, 24px); font-weight: 750; line-height: 1.35; color: var(--ink); } .tv-ab__end { margin-top: clamp(40px, 6vh, 64px); } .tv-ab__concl { margin: 0; font-size: clamp(18px, 0.6vw + 12px, 22px); font-weight: 700; line-height: 1.45; color: var(--ink); } .tv-ab__concl span { color: var(--ink-muted); font-weight: 600; } .tv-ab__next { margin: 22px 0 0; font-size: 13px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } /* Проявление эпох */ .tv-ab--js .tv-ab__era { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .tv-ab--js .tv-ab__era.is-seen { opacity: 1; transform: none; } /* Светлая тема */ :root[data-theme="light"] .tv-ab__head .eyebrow, :root[data-theme="light"] .tv-ab__era--pivot .tv-ab__mark { color: #C27400; } :root[data-theme="light"] .tv-ab__obj { background: linear-gradient(170deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 255, 0.94)); border-color: rgba(47, 123, 255, 0.22); color: #1B2B45; } :root[data-theme="light"] .tv-ab__obj--offline { background: transparent; } :root[data-theme="light"] .tv-ab__obj span { background: rgba(47, 123, 255, 0.05); border-color: rgba(15, 35, 70, 0.12); color: #1B2B45; } :root[data-theme="light"] .tv-ab__prod, :root[data-theme="light"] .tv-ab__obj--offline span:first-child { color: #8A5200 !important; border-color: rgba(194, 116, 0, 0.45) !important; } :root[data-theme="light"] .tv-ab__pay { color: #12936A !important; } :root[data-theme="light"] .tv-ab__steps i { background: rgba(47, 123, 255, 0.1); color: #1B4FB0; } :root[data-theme="light"] .tv-ab__obj small, :root[data-theme="light"] .tv-ab__hint { color: #5A6C8A !important; } :root[data-theme="light"] .tv-ab__cont { background: rgba(232, 146, 20, 0.06); border-color: rgba(194, 116, 0, 0.35); } /* Планшет и мобильный: линия слева, эпохи столбцом */ @media (max-width: 1100px) { .tv-ab__head, .tv-ab__persp { grid-template-columns: minmax(0, 1fr); } .tv-ab__eras::before { left: 7px; } .tv-ab__era { grid-template-columns: minmax(0, 1fr); padding-left: 40px; row-gap: 10px; } .tv-ab__era::before { left: 0; } .tv-ab__when, .tv-ab__txt, .tv-ab__obj { grid-column: 1; grid-row: auto; text-align: left; padding-right: 0; } .tv-ab__obj { justify-self: start; } } @media (max-width: 720px) { .tv-ab__title { font-size: 36px; } .tv-ab__years b { font-size: 72px; } .tv-ab__obj span { white-space: normal; } } @media (prefers-reduced-motion: reduce) { .tv-ab--js .tv-ab__era { opacity: 1; transform: none; transition: none; } } /* ============================================================ 19. AI-АУДИТ БИЗНЕСА (TV-REBIRTH-AI-AUDIT-1) ------------------------------------------------------------ Финал главной. Слева — бриф из пяти вопросов на одной стеклянной поверхности (текущий вопрос подсвечен :focus-within, прошлые остаются видны), справа — «Ваш контекст» (липкая колонка, без перехвата прокрутки): только пересказ ответов. Ниже — что вы получите (пример помечен), что будет после отправки. Движение — только переходы состояний полей/брифа. ============================================================ */ .tv-au { position: relative; padding: clamp(88px, 12vh, 150px) 0 clamp(72px, 10vh, 120px); background: transparent; overflow-x: clip; } .tv-au__wrap { max-width: 1240px; } .tv-au__head { max-width: 50rem; } .tv-au__head .eyebrow { margin: 0; } .tv-au__title { margin: 14px 0 18px; font-size: clamp(34px, 2.6vw + 12px, 56px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; } .tv-au__lead { margin: 0; max-width: 42rem; font-size: var(--step-1); line-height: 1.55; color: var(--ink); } .tv-au__def { margin: 12px 0 0; max-width: 42rem; font-size: 15px; line-height: 1.55; color: var(--ink-muted); } .tv-au__facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; } .tv-au__facts li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--ink-muted); } .tv-au__facts li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--accent-soft); } .tv-au__facts b { color: var(--ink); font-weight: 700; } .tv-au__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 56px); align-items: start; margin-top: clamp(40px, 6vh, 64px); } /* Форма */ .tv-au__form { position: relative; padding: clamp(20px, 2.2vw, 32px); border-radius: 22px; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid var(--border-strong); box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.9); } .tv-au__progress { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; } .tv-au__pbar { display: inline-flex; gap: 5px; } .tv-au__pbar i { width: 26px; height: 4px; border-radius: 2px; background: var(--border-strong); transition: background 0.3s var(--ease); } .tv-au__pbar i.on { background: var(--accent-soft); } .tv-au__ptext { font-size: 12.5px; font-weight: 650; color: var(--ink-faint); letter-spacing: 0.02em; } .tv-au__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .tv-au__q { margin: 0; padding: 20px 0 22px; border: 0; border-bottom: 1px solid var(--border); transition: opacity 0.3s var(--ease); } .tv-au__q legend { display: flex; align-items: baseline; gap: 12px; padding: 0; margin-bottom: 12px; font-size: clamp(17px, 0.5vw + 12px, 20px); font-weight: 750; color: var(--ink); } .tv-au__qn { flex-shrink: 0; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--accent-soft); } .tv-au__q.is-done .tv-au__qn::after { content: " ✓"; color: #3FD39A; } .tv-au__q:focus-within legend { color: var(--ink); } .tv-au__form:focus-within .tv-au__q:not(:focus-within) { opacity: 0.78; } .tv-au__help { margin: -4px 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); } .tv-au__lbl { display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-muted); } .tv-au__lbl--sub { margin-top: 12px; font-size: 12.5px; color: var(--ink-faint); } .tv-au__req { margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); } .tv-au__form input[type="text"], .tv-au__form input[type="tel"], .tv-au__form input[type="email"], .tv-au__form textarea { display: block; width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 11px; background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--border-strong); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.45; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease); } .tv-au__form textarea { resize: vertical; min-height: 84px; } .tv-au__form input:hover, .tv-au__form textarea:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); } .tv-au__form input:focus-visible, .tv-au__form textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); background: color-mix(in srgb, var(--ink) 6%, transparent); } .tv-au__form [aria-invalid="true"] { border-color: #F29A8A !important; } .tv-au__chips { display: flex; flex-wrap: wrap; gap: 8px; } .tv-au__chip { position: relative; cursor: pointer; } .tv-au__chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .tv-au__chip span { display: inline-block; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 13.5px; font-weight: 600; color: var(--ink-muted); transition: all 0.2s var(--ease); } .tv-au__chip:hover span { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); color: var(--ink); } .tv-au__chip input:checked + span { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); color: var(--ink); } .tv-au__chip input:checked + span::before { content: "✓ "; } .tv-au__chip input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } .tv-au__sec { margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255, 181, 71, 0.35); background: rgba(255, 181, 71, 0.06); font-size: 13px; line-height: 1.45; color: var(--ink-muted); } .tv-au__err { margin: 6px 0 0; min-height: 0; font-size: 13px; font-weight: 600; color: #F29A8A; } .tv-au__err:empty { display: none; } .tv-au__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tv-au__row--3 { grid-template-columns: 1fr 1fr 1fr; margin-top: 12px; } .tv-au__privacy { padding: 18px 0 4px; } .tv-au__consent { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; line-height: 1.45; color: var(--ink); } .tv-au__consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex-shrink: 0; } .tv-au__priv { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); } .tv-au__submit { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 14px; } .tv-au__submit .btn[disabled] { opacity: 0.6; cursor: progress; } .tv-au__submit [data-au-submit][hidden] { display: none; } .tv-au__status:empty { display: none; } .tv-au__status { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-strong); font-size: 14px; line-height: 1.55; color: var(--ink); } .tv-au__status.is-warn { border-color: rgba(255, 181, 71, 0.45); background: rgba(255, 181, 71, 0.06); } .tv-au__status.is-ok { border-color: rgba(63, 211, 154, 0.45); background: rgba(63, 211, 154, 0.06); } .tv-au__status.is-err { border-color: rgba(242, 154, 138, 0.45); background: rgba(242, 154, 138, 0.06); } .tv-au__status a { color: var(--accent-soft); font-weight: 650; } .tv-au__status button { margin-top: 10px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border-strong); background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; } .tv-au__nojs { margin: 0; font-size: 14px; color: var(--ink-muted); } /* Ваш контекст */ .tv-au__brief { position: sticky; top: 96px; } .tv-au__bcard { padding: 20px 22px; border-radius: 20px; background: linear-gradient(160deg, rgba(26, 45, 82, 0.92), rgba(12, 21, 40, 0.95)); border: 1px solid rgba(150, 195, 255, 0.32); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.9), 0 0 50px -20px rgba(61, 139, 255, 0.5); color: #DCE7F8; } .tv-au__bk { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 11.5px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: #9CC3FF; } .tv-au__bk i { width: 20px; height: 20px; border-radius: 50%; background: url("/core-ring-sm.webp?v=20260825-rc1") center / contain no-repeat; } .tv-au__bl { margin: 0; display: flex; flex-direction: column; gap: 4px; } .tv-au__bl > div { position: relative; padding: 9px 0 9px 18px; border-bottom: 1px solid rgba(140, 180, 255, 0.1); } .tv-au__bl > div::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid rgba(140, 180, 255, 0.45); transition: all 0.3s var(--ease); } .tv-au__bl > div.is-on::before { background: #6FA8FF; border-color: #6FA8FF; box-shadow: 0 0 8px #6FA8FF; } .tv-au__bl dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8DA3C4; } .tv-au__bl dd { margin: 3px 0 0; font-size: 14px; line-height: 1.4; color: #6A7E9E; overflow-wrap: anywhere; } .tv-au__bl > div.is-on dd { color: #fff; } .tv-au__bstate { margin: 14px 0 0; font-size: 13px; font-weight: 700; } .tv-au__bstate .c { color: #9CC3FF; } .tv-au__bstate .r { display: none; color: #6FD7A8; } .tv-au__bstate[data-state="ready"] .c { display: none; } .tv-au__bstate[data-state="ready"] .r { display: inline; } .tv-au__bnext { margin: 6px 0 0; font-size: 12.5px; color: #8DA3C4; } /* Что вы получите */ .tv-au__get { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(56px, 8vh, 96px); padding-top: clamp(28px, 4vh, 44px); border-top: 1px solid var(--border); } .tv-au__get h3, .tv-au__after h3 { margin: 0 0 12px; font-size: clamp(20px, 0.8vw + 12px, 26px); font-weight: 800; color: var(--ink); } .tv-au__get-text p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; color: var(--ink-muted); } .tv-au__no { font-size: 17px !important; font-weight: 750; color: var(--ink) !important; } .tv-au__plain { padding-left: 14px; border-left: 2px solid var(--accent-soft); } .tv-au__map { padding: 16px 18px; border-radius: 18px; border: 1px dashed var(--border-strong); background: color-mix(in srgb, var(--bg) 60%, transparent); } .tv-au__mk { margin: 0 0 10px; font-size: 11.5px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .tv-au__mhead, .tv-au__mrow { display: grid; grid-template-columns: 1.35fr 1.1fr 1fr 1fr; gap: 12px; padding: 9px 4px; } .tv-au__mhead { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--border); } .tv-au__mrow { font-size: 13.5px; line-height: 1.4; color: var(--ink-muted); border-bottom: 1px solid var(--border); } .tv-au__mrow span:first-child { color: var(--ink); font-weight: 650; } .tv-au__mrow b { margin-right: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-soft); } .tv-au__mrow.is-rec { background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 8px; } .tv-au__mrow.is-plain span:nth-child(2) { color: var(--ink); font-weight: 650; } .tv-au__mrec { margin: 12px 4px 0; font-size: 14px; color: var(--ink); } /* Что будет после отправки */ .tv-au__after { margin-top: clamp(44px, 6vh, 72px); } .tv-au__steps { list-style: none; counter-reset: au; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 0; } .tv-au__steps li { counter-increment: au; position: relative; display: flex; align-items: center; gap: 10px; padding-right: 34px; font-size: 14.5px; font-weight: 600; color: var(--ink); } .tv-au__steps li::before { content: counter(au); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--accent-soft); font-family: var(--font-mono); font-size: 11px; color: var(--accent-soft); flex-shrink: 0; } .tv-au__steps li:not(:last-child)::after { content: "→"; position: absolute; right: 10px; color: var(--ink-faint); } .tv-au__link { margin: 22px 0 0; font-size: 14.5px; color: var(--ink-muted); } /* Светлая тема */ :root[data-theme="light"] .tv-au__form { background: rgba(255, 255, 255, 0.86); box-shadow: 0 40px 80px -60px rgba(14, 40, 90, 0.45); } :root[data-theme="light"] .tv-au__form input[type="text"], :root[data-theme="light"] .tv-au__form input[type="tel"], :root[data-theme="light"] .tv-au__form input[type="email"], :root[data-theme="light"] .tv-au__form textarea { background: #fff; } :root[data-theme="light"] .tv-au__bcard { background: linear-gradient(170deg, rgba(255, 255, 255, 0.97), rgba(242, 247, 255, 0.95)); border-color: rgba(47, 123, 255, 0.28); color: #1B2B45; box-shadow: 0 30px 60px -40px rgba(14, 40, 90, 0.5); } :root[data-theme="light"] .tv-au__bk { color: #2F7BFF; } :root[data-theme="light"] .tv-au__bl dt, :root[data-theme="light"] .tv-au__bnext { color: #5A6C8A; } :root[data-theme="light"] .tv-au__bl dd { color: #8A9AB4; } :root[data-theme="light"] .tv-au__bl > div.is-on dd { color: #0B1628; } :root[data-theme="light"] .tv-au__bstate .c { color: #2F7BFF; } :root[data-theme="light"] .tv-au__bstate .r { color: #12936A; } :root[data-theme="light"] .tv-au__err { color: #C2412D; } :root[data-theme="light"] .tv-au__form [aria-invalid="true"] { border-color: #C2412D !important; } /* Планшет и мобильный: одна колонка, контекст после вопросов */ @media (max-width: 1100px) { .tv-au__grid, .tv-au__get { grid-template-columns: minmax(0, 1fr); } .tv-au__brief { position: static; } } @media (max-width: 720px) { .tv-au__title { font-size: 32px; } .tv-au__row, .tv-au__row--3 { grid-template-columns: minmax(0, 1fr); } .tv-au__form { padding: 16px; } .tv-au__mhead { display: none; } .tv-au__mrow { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 11px 4px; } .tv-au__steps { flex-direction: column; } .tv-au__steps li::after { display: none; } .tv-au__form input, .tv-au__form textarea { font-size: 16px !important; } } @media (prefers-reduced-motion: reduce) { .tv-au__q, .tv-au__pbar i, .tv-au__bl > div::before, .tv-au__chip span { transition: none; } } /* ============================================================ 20. КОНТРОЛЬ (TV-REBIRTH-CONTROL-1) ------------------------------------------------------------ Пульт одной роли: профиль роли | задача проходит проверку | три исхода. Состояние несут текст и значок, цвет — только подсказка: может сам — зелёный, нужно решение — янтарный, нет доступа — приглушённый (без красной тревоги). Без JS вкладки скрыты, все три задачи открыты. ============================================================ */ .tv-ct { position: relative; padding: clamp(88px, 12vh, 150px) 0 clamp(80px, 11vh, 132px); background: transparent; overflow-x: clip; } .tv-ct__wrap { max-width: 1240px; } .tv-ct { --ct-a: #3FD39A; --ct-b: #FFB547; --ct-c: #9AABC6; } .tv-ct__head { max-width: 52rem; } .tv-ct__eyebrow { margin: 0; } .tv-ct__title { margin: 14px 0 18px; font-size: clamp(36px, 2.8vw + 12px, 60px); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; } .tv-ct__lead { margin: 0; max-width: 44rem; font-size: var(--step-1); line-height: 1.55; color: var(--ink-muted); } .tv-ct__panel { position: relative; margin-top: clamp(36px, 5vh, 56px); padding: clamp(18px, 2vw, 28px); display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.3fr) minmax(0, 0.92fr); grid-template-areas: "demo demo demo" "role tabs tabs" "role cases lanes"; grid-template-rows: auto auto 1fr; gap: 14px clamp(20px, 2.2vw, 34px); border-radius: 24px; background: linear-gradient(160deg, rgba(22, 38, 70, 0.78), rgba(9, 16, 32, 0.86)); border: 1px solid rgba(150, 195, 255, 0.24); box-shadow: 0 50px 90px -60px rgba(0, 0, 0, 0.95), 0 0 70px -40px rgba(61, 139, 255, 0.45); color: #DCE7F8; } .tv-ct__demo { grid-area: demo; margin: 0; font-size: 11.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: #7F95B8; } /* Профиль роли */ .tv-ct__role { grid-area: role; align-self: start; padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(140, 180, 255, 0.14); } .tv-ct__role-name { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 16px; font-weight: 800; color: #fff; } .tv-ct__role-name i { width: 22px; height: 22px; border-radius: 50%; background: url("/core-ring-sm.webp?v=20260825-rc1") center / contain no-repeat; flex-shrink: 0; } .tv-ct__role-dl { margin: 0; display: grid; gap: 12px; } .tv-ct__role-dl dt { margin: 0 0 5px; font-size: 11px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: #8DA3C4; } .tv-ct__role-dl dd { margin: 0; font-size: 14px; line-height: 1.4; color: #EAF1FC; } .tv-ct__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .tv-ct__tags li { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: rgba(61, 139, 255, 0.16); border: 1px solid rgba(111, 168, 255, 0.35); color: #DCE9FF; } .tv-ct__tags--no li { background: transparent; border-style: dashed; border-color: rgba(154, 171, 198, 0.4); color: #8496B3; } .tv-ct__tags--no li::before { content: "⊘ "; } .tv-ct__role-rule { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(140, 180, 255, 0.12); font-size: 13px; line-height: 1.5; color: #A9BBD6; } /* Вкладки */ .tv-ct__tabs { grid-area: tabs; display: flex; flex-wrap: wrap; gap: 8px; } .tv-ct__tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: #A9BBD6; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(140, 180, 255, 0.18); transition: color 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease); } .tv-ct__tab b { font-family: var(--font-mono); font-size: 11.5px; color: #6FA8FF; } .tv-ct__tab:hover { color: #fff; border-color: rgba(140, 180, 255, 0.4); } .tv-ct__tab[aria-selected="true"] { color: #fff; background: rgba(61, 139, 255, 0.2); border-color: rgba(111, 168, 255, 0.7); } .tv-ct__tab:focus-visible { outline: 2px solid #9CC3FF; outline-offset: 2px; } /* Задача и проверка */ .tv-ct__cases { grid-area: cases; position: relative; display: grid; gap: 14px; } .tv-ct__case { --st: var(--ct-a); padding: 18px 20px; border-radius: 16px; background: rgba(5, 10, 22, 0.55); border: 1px solid rgba(140, 180, 255, 0.14); } .tv-ct__case--b { --st: var(--ct-b); } .tv-ct__case--c { --st: var(--ct-c); } .tv-ct__case[hidden] { display: none; } /* С JS задачи лежат в одной ячейке: высота пульта не прыгает при переключении */ .tv-ct.is-js .tv-ct__cases { grid-template-areas: "x"; } .tv-ct.is-js .tv-ct__case { grid-area: x; } .tv-ct.is-js .tv-ct__case.is-off { visibility: hidden; } .tv-ct__in { margin: 0 0 14px; font-size: 16.5px; font-weight: 650; line-height: 1.4; color: #fff; } .tv-ct__in span, .tv-ct__msg span { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: #8DA3C4; } .tv-ct__checks { list-style: none; margin: 0; padding: 0 0 0 16px; position: relative; display: grid; gap: 9px; } .tv-ct__checks::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(rgba(111, 168, 255, 0.5), var(--st)); } .tv-ct__checks li { position: relative; font-size: 14px; line-height: 1.45; color: #DCE7F8; transition: opacity 0.35s var(--ease); } .tv-ct__checks li::before { content: ""; position: absolute; left: -16px; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: #6FA8FF; box-shadow: 0 0 8px rgba(111, 168, 255, 0.8); } .tv-ct__checks li:last-child::before { background: var(--st); box-shadow: 0 0 9px var(--st); } .tv-ct__ck { display: inline-block; min-width: 92px; margin-right: 8px; font-size: 11px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: #8DA3C4; } .tv-ct__out { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(140, 180, 255, 0.12); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); } .tv-ct__verdict { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--st); } .tv-ct__verdict i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: 13px; border: 1.5px solid var(--st); } .tv-ct__msg { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border-left: 2px solid var(--st); font-size: 14px; line-height: 1.5; color: #EAF1FC; } /* Проверка «проходит» при смене задачи */ .tv-ct.is-js .tv-ct__case.is-run .tv-ct__checks li { opacity: 0.35; } .tv-ct.is-js .tv-ct__case.is-run .tv-ct__out { opacity: 0; transform: translateY(6px); } .tv-ct.is-js .tv-ct__case.is-go .tv-ct__checks li { opacity: 1; } .tv-ct.is-js .tv-ct__case.is-go .tv-ct__checks li:nth-child(2) { transition-delay: 0.14s; } .tv-ct.is-js .tv-ct__case.is-go .tv-ct__checks li:nth-child(3) { transition-delay: 0.28s; } .tv-ct.is-js .tv-ct__case.is-go .tv-ct__out { opacity: 1; transform: none; transition-delay: 0.42s; } /* Три исхода: развилка от проверки */ .tv-ct__lanes { grid-area: lanes; list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; display: grid; gap: 12px; align-content: start; } .tv-ct__lanes::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 1px; background: rgba(140, 180, 255, 0.22); } .tv-ct__lane { --st: var(--ct-a); position: relative; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(140, 180, 255, 0.14); background: rgba(255, 255, 255, 0.025); transition: border-color 0.3s var(--ease), background 0.3s var(--ease), opacity 0.3s var(--ease); } .tv-ct__lane--b { --st: var(--ct-b); } .tv-ct__lane--c { --st: var(--ct-c); } .tv-ct__lane::before { content: ""; position: absolute; left: -18px; top: 50%; width: 18px; height: 1px; background: rgba(140, 180, 255, 0.22); transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); } .tv-ct__lk { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--st); } .tv-ct__lk i { font-style: normal; } .tv-ct__lt { margin: 0; font-size: 14px; line-height: 1.45; color: #DCE7F8; } .tv-ct__lane.is-on { border-color: var(--st); background: color-mix(in srgb, var(--st) 10%, transparent); } .tv-ct__lane.is-on::before { background: var(--st); box-shadow: 0 0 8px var(--st); } .tv-ct.is-js .tv-ct__lane:not(.is-on) { opacity: 0.72; } /* Итог */ .tv-ct__close { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px clamp(28px, 4vw, 64px); align-items: end; margin-top: clamp(44px, 6vh, 72px); } .tv-ct__own h3 { margin: 0 0 10px; font-size: clamp(22px, 1vw + 12px, 28px); font-weight: 800; color: var(--ink); } .tv-ct__own p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: var(--ink-muted); } .tv-ct__own .tv-ct__hitl { margin: 0; padding-left: 14px; border-left: 2px solid var(--accent-soft); color: var(--ink); font-weight: 650; } .tv-ct__final { margin: 0; font-size: clamp(22px, 1.2vw + 12px, 32px); font-weight: 800; line-height: 1.2; color: var(--ink); } .tv-ct__trust { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ink-faint); } /* Светлая тема */ :root[data-theme="light"] .tv-ct { --ct-a: #0F8F63; --ct-b: #B26B00; --ct-c: #5F6F88; } :root[data-theme="light"] .tv-ct__panel { background: linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(240, 246, 255, 0.92)); border-color: rgba(47, 123, 255, 0.25); color: #1B2B45; box-shadow: 0 40px 80px -56px rgba(14, 40, 90, 0.5); } :root[data-theme="light"] .tv-ct__demo, :root[data-theme="light"] .tv-ct__role-dl dt, :root[data-theme="light"] .tv-ct__in span, :root[data-theme="light"] .tv-ct__msg span, :root[data-theme="light"] .tv-ct__ck { color: #5A6C8A; } :root[data-theme="light"] .tv-ct__role, :root[data-theme="light"] .tv-ct__lane { background: rgba(255, 255, 255, 0.7); border-color: rgba(47, 90, 160, 0.16); } :root[data-theme="light"] .tv-ct__case { background: #fff; border-color: rgba(47, 90, 160, 0.16); } :root[data-theme="light"] .tv-ct__role-name, :root[data-theme="light"] .tv-ct__in { color: #0B1628; } :root[data-theme="light"] .tv-ct__role-dl dd, :root[data-theme="light"] .tv-ct__checks li, :root[data-theme="light"] .tv-ct__lt, :root[data-theme="light"] .tv-ct__msg { color: #1B2B45; } :root[data-theme="light"] .tv-ct__role-rule { color: #4A5C7A; border-color: rgba(47, 90, 160, 0.14); } :root[data-theme="light"] .tv-ct__tags li { background: rgba(47, 123, 255, 0.1); border-color: rgba(47, 123, 255, 0.35); color: #1C4FB0; } :root[data-theme="light"] .tv-ct__tags--no li { background: transparent; border-color: rgba(95, 111, 136, 0.45); color: #5F6F88; } :root[data-theme="light"] .tv-ct__tab { color: #3B4E6E; background: #fff; border-color: rgba(47, 90, 160, 0.2); } :root[data-theme="light"] .tv-ct__tab[aria-selected="true"] { color: #0B1628; background: rgba(47, 123, 255, 0.12); border-color: #2F7BFF; } :root[data-theme="light"] .tv-ct__tab b { color: #2F7BFF; } :root[data-theme="light"] .tv-ct__msg { background: rgba(47, 90, 160, 0.05); } :root[data-theme="light"] .tv-ct__out { border-color: rgba(47, 90, 160, 0.14); } :root[data-theme="light"] .tv-ct__lanes::before, :root[data-theme="light"] .tv-ct__lane::before { background: rgba(47, 90, 160, 0.25); } :root[data-theme="light"] .tv-ct__lane.is-on::before { background: var(--st); } /* Планшет: роль и исходы рядом, задача на всю ширину */ @media (max-width: 1100px) { .tv-ct__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "demo demo" "role lanes" "tabs tabs" "cases cases"; grid-template-rows: none; } .tv-ct__close { grid-template-columns: minmax(0, 1fr); } } /* Мобильный: заголовок → роль → выбор → задача → три исхода → итог */ @media (max-width: 720px) { .tv-ct__title { font-size: 34px; } .tv-ct__panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "demo" "role" "tabs" "cases" "lanes"; padding: 14px; border-radius: 20px; } .tv-ct__tabs { display: grid; grid-template-columns: minmax(0, 1fr); } .tv-ct__tab[hidden] { display: none; } .tv-ct__case { padding: 14px; } .tv-ct__ck { display: block; min-width: 0; margin: 0 0 2px; } } .tv-ct__tabs[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .tv-ct__tab, .tv-ct__checks li, .tv-ct__out, .tv-ct__lane, .tv-ct__lane::before { transition: none !important; } } /* ============================================================ 21. ВОПРОСЫ (TV-REBIRTH-FAQ-1, FIX1) ------------------------------------------------------------ Редакционный указатель: три дорожки в строке — номер | вопрос | «+/−». Тонкие линии между вопросами, у открытого — акцентная линия и яркий номер; ответ стоит под вопросом (дорожка номера пустая). Не карточки. Без JS (.tv-fq без .is-js) — все ответы открыты, значка «+/−» нет. С JS открыт один ответ; высота меняется сразу, ответ проявляется мягко. ============================================================ */ .tv-fq { --fq-n: 72px; --fq-c: 48px; --fq-gap: 16px; --fq-rule: color-mix(in srgb, var(--ink) 15%, transparent); position: relative; padding: clamp(96px, 13vh, 168px) 0 clamp(72px, 10vh, 120px); background: transparent; overflow-x: clip; } .tv-fq__wrap { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.6fr); gap: clamp(40px, 5.5vw, 104px); align-items: start; } .tv-fq__eyebrow { margin: 0; } .tv-fq__title { margin: 14px 0 18px; font-size: clamp(38px, 3vw + 12px, 64px); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; } .tv-fq__intro { margin: 0; max-width: 22rem; font-size: 16px; line-height: 1.55; color: var(--ink-muted); } .tv-fq__list { position: relative; } .tv-fq__item { position: relative; border-top: 1px solid var(--fq-rule); transition: border-color 0.25s var(--ease); } .tv-fq__item::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent) 70%, transparent); transition: width 0.45s var(--ease); } .tv-fq__item.is-open::before { width: 100%; } /* Строка: номер | вопрос | +/− */ .tv-fq__q { margin: 0; font-size: clamp(19px, 0.55vw + 13px, 23px); font-weight: 700; line-height: 1.32; letter-spacing: -0.006em; color: var(--ink); } .tv-fq__q, .tv-fq__btn { display: grid; grid-template-columns: var(--fq-n) minmax(0, 1fr) var(--fq-c); align-items: baseline; column-gap: var(--fq-gap); padding: 28px 0; } .tv-fq:not(.is-js) .tv-fq__q { grid-template-columns: var(--fq-n) minmax(0, 1fr); padding-bottom: 14px; } .tv-fq.is-js .tv-fq__q { padding: 0; display: block; } .tv-fq__btn { width: 100%; margin: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; border-radius: 4px; -webkit-tap-highlight-color: transparent; } .tv-fq__btn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 6px; } .tv-fq.is-js .tv-fq__item.is-open .tv-fq__btn { padding-bottom: 14px; } .tv-fq__n { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-faint); transition: color 0.25s var(--ease); } .tv-fq__t { color: color-mix(in srgb, var(--ink) 90%, transparent); transition: color 0.25s var(--ease); } .tv-fq__item.is-open .tv-fq__n { color: var(--accent-soft); } .tv-fq__item.is-open .tv-fq__t, .tv-fq:not(.is-js) .tv-fq__t { color: var(--ink); } .tv-fq__item:hover { border-top-color: color-mix(in srgb, var(--ink) 28%, transparent); } .tv-fq__btn:hover .tv-fq__t { color: var(--ink); } .tv-fq__btn:hover .tv-fq__n { color: var(--ink-muted); } .tv-fq__item.is-open .tv-fq__btn:hover .tv-fq__n { color: var(--accent-soft); } /* «+ / −» — две линии в своей дорожке справа */ .tv-fq__pm { position: relative; align-self: center; justify-self: end; width: 20px; height: 20px; margin-right: 4px; } .tv-fq__pm::before, .tv-fq__pm::after { content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 2px; border-radius: 1px; background: var(--ink-muted); transition: transform 0.3s var(--ease), background 0.25s var(--ease); } .tv-fq__pm::after { transform: rotate(90deg); } .tv-fq__btn:hover .tv-fq__pm::before, .tv-fq__btn:hover .tv-fq__pm::after { background: var(--ink); } .tv-fq__item.is-open .tv-fq__pm::before, .tv-fq__item.is-open .tv-fq__pm::after { background: var(--accent-soft); } .tv-fq__item.is-open .tv-fq__pm::after { transform: rotate(0deg); } /* Ответ — под вопросом, дорожка номера пустая */ .tv-fq__a { padding: 0 calc(var(--fq-c) + var(--fq-gap)) 36px calc(var(--fq-n) + var(--fq-gap)); } .tv-fq__in p { margin: 0 0 12px; max-width: 38rem; font-size: 16px; line-height: 1.65; color: var(--ink-muted); } .tv-fq__in p:last-child { margin-bottom: 0; } .tv-fq.is-js .tv-fq__a[hidden] { display: none; } .tv-fq.is-js .tv-fq__item.is-open .tv-fq__in { animation: tv-fq-in 0.35s var(--ease) both; } @keyframes tv-fq-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .tv-fq__bridge { margin: 0; padding: 28px 0 0 calc(var(--fq-n) + var(--fq-gap)); border-top: 1px solid var(--fq-rule); font-size: 15px; color: var(--ink-faint); } .tv-fq__bridge a { color: var(--accent-soft); font-weight: 650; text-decoration: none; } .tv-fq__bridge a:hover { text-decoration: underline; } :root[data-theme="light"] .tv-fq { --fq-rule: rgba(16, 36, 70, 0.16); } :root[data-theme="light"] .tv-fq__item:hover { border-top-color: rgba(16, 36, 70, 0.3); } :root[data-theme="light"] .tv-fq__item.is-open .tv-fq__n, :root[data-theme="light"] .tv-fq__item.is-open .tv-fq__btn:hover .tv-fq__n { color: #1F66E5; } :root[data-theme="light"] .tv-fq__item.is-open .tv-fq__pm::before, :root[data-theme="light"] .tv-fq__item.is-open .tv-fq__pm::after { background: #1F66E5; } @media (max-width: 1100px) { .tv-fq__wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; } .tv-fq__intro { max-width: 40rem; } } @media (max-width: 720px) { .tv-fq { --fq-n: 30px; --fq-c: 24px; --fq-gap: 12px; } .tv-fq__title { font-size: 36px; } .tv-fq__q { font-size: 18px; } .tv-fq__q, .tv-fq__btn { padding: 22px 0; } .tv-fq.is-js .tv-fq__item.is-open .tv-fq__btn { padding-bottom: 12px; } .tv-fq__n { font-size: 12px; letter-spacing: 0.04em; } .tv-fq__pm { width: 18px; height: 18px; margin-right: 2px; } .tv-fq__pm::before, .tv-fq__pm::after { width: 18px; top: 8px; } .tv-fq__a { padding: 0 0 28px calc(var(--fq-n) + var(--fq-gap)); } .tv-fq__in p { font-size: 15.5px; } } @media (prefers-reduced-motion: reduce) { .tv-fq__item, .tv-fq__item::before, .tv-fq__pm::before, .tv-fq__pm::after, .tv-fq__n, .tv-fq__t { transition: none; } .tv-fq.is-js .tv-fq__item.is-open .tv-fq__in { animation: none; } } /* ============================================================ 22. КОНТАКТ И ПОДВАЛ (TV-REBIRTH-CONTACT-1) ------------------------------------------------------------ Прибытие: крупный заголовок, много воздуха, три строки-канала на всю ширину (номер · канал · адрес · действие) с тонкими линиями. Не карточки, не форма. Hover — яркость, линия и сдвиг стрелки на пару пикселей; без масштаба и свечения. Подвал продолжает тот же фон, отделён одной линией. ============================================================ */ .tv-cn { --cn-rule: color-mix(in srgb, var(--ink) 15%, transparent); position: relative; padding: clamp(104px, 14vh, 184px) 0 clamp(88px, 12vh, 150px); background: transparent; overflow-x: clip; } .tv-cn__wrap { max-width: 1240px; } .tv-cn__head { max-width: 46rem; } .tv-cn__eyebrow { margin: 0; } .tv-cn__title { margin: 16px 0 20px; font-size: clamp(44px, 4.6vw + 10px, 92px); font-weight: 800; line-height: 1; letter-spacing: -0.025em; } .tv-cn__lead { margin: 0; max-width: 34rem; font-size: var(--step-1); line-height: 1.55; color: var(--ink-muted); } .tv-cn__list { list-style: none; margin: clamp(48px, 7vh, 80px) 0 0; padding: 0; border-bottom: 1px solid var(--cn-rule); } .tv-cn__list li { position: relative; border-top: 1px solid var(--cn-rule); } .tv-cn__list li::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent) 70%, transparent); transition: width 0.45s var(--ease); pointer-events: none; } .tv-cn__list li:hover::before, .tv-cn__list li:focus-within::before { width: 100%; } .tv-cn__row { display: grid; grid-template-columns: 72px minmax(140px, 0.6fr) minmax(0, 1.4fr) 48px; align-items: baseline; column-gap: 16px; min-height: 44px; padding: clamp(22px, 3vh, 32px) 0; color: var(--ink); text-decoration: none; border-radius: 4px; -webkit-tap-highlight-color: transparent; } .tv-cn__row:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 6px; } .tv-cn__n { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-faint); transition: color 0.25s var(--ease); } .tv-cn__k { font-size: 13px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); transition: color 0.25s var(--ease); } .tv-cn__v { font-size: clamp(24px, 1.5vw + 12px, 38px); font-weight: 750; line-height: 1.15; letter-spacing: -0.01em; color: color-mix(in srgb, var(--ink) 92%, transparent); white-space: nowrap; transition: color 0.25s var(--ease); } .tv-cn__go { justify-self: end; align-self: center; font-size: 24px; line-height: 1; color: var(--ink-muted); transition: transform 0.3s var(--ease), color 0.25s var(--ease); } .tv-cn__row:hover .tv-cn__v, .tv-cn__row:focus-visible .tv-cn__v { color: var(--ink); } .tv-cn__row:hover .tv-cn__n, .tv-cn__row:focus-visible .tv-cn__n, .tv-cn__row:hover .tv-cn__go, .tv-cn__row:focus-visible .tv-cn__go { color: var(--accent-soft); } .tv-cn__row:hover .tv-cn__k, .tv-cn__row:focus-visible .tv-cn__k { color: var(--ink); } .tv-cn__row:hover .tv-cn__go, .tv-cn__row:focus-visible .tv-cn__go { transform: translateX(4px); } .tv-cn__alt { margin: 28px 0 0 88px; font-size: 15px; color: var(--ink-faint); } .tv-cn__alt a { color: var(--accent-soft); font-weight: 650; text-decoration: none; } .tv-cn__alt a:hover { text-decoration: underline; } .tv-cn__alt a:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 4px; border-radius: 3px; } /* Подвал: тот же фон, что и у страницы, — энергия «оседает» без чёрного блока */ .tv-ft { background: transparent; border-top-color: color-mix(in srgb, var(--ink) 12%, transparent); } .tv-ft__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 0.8fr); } .tv-ft .footer-brand p { margin: 0; } .tv-ft .tv-ft__shop { margin-top: 14px; } .tv-ft__shop a { font-size: var(--step--1); color: var(--ink-muted); font-weight: 650; } .tv-ft__shop a:hover { color: var(--accent); } .tv-ft__sections ul { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 32px; row-gap: 9px; } .tv-ft a:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 3px; } .tv-ft__bottom { flex-wrap: wrap; } .tv-ft__entity { color: var(--ink-faint); } @media (max-width: 1100px) { .tv-cn__row { grid-template-columns: 56px minmax(120px, 0.5fr) minmax(0, 1.5fr) 40px; } .tv-cn__alt { margin-left: 72px; } .tv-ft__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tv-ft__grid .footer-brand { grid-column: 1 / -1; } } @media (max-width: 720px) { .tv-cn__title { font-size: 44px; } .tv-cn__row { grid-template-columns: 30px minmax(0, 1fr) 24px; grid-template-areas: "n k go" ". v go"; column-gap: 12px; row-gap: 6px; padding: 20px 0; } .tv-cn__n { grid-area: n; font-size: 12px; letter-spacing: 0.04em; } .tv-cn__k { grid-area: k; font-size: 12px; } .tv-cn__v { grid-area: v; font-size: clamp(22px, 6.4vw, 28px); } .tv-cn__go { grid-area: go; font-size: 22px; } .tv-cn__alt { margin-left: 42px; } .tv-ft__grid { grid-template-columns: minmax(0, 1fr); } .tv-ft__bottom { flex-direction: column; gap: 6px; } .tv-ft__bottom .footer-legal { margin-left: 0; text-align: left; } /* Касание: строки подвала и ссылка на аудит — не меньше 44 px */ .tv-cn__alt a { display: inline-block; padding: 12px 0; } .tv-ft .footer-nav ul { row-gap: 0; } .tv-ft .footer-nav a, .tv-ft__shop a { display: inline-block; padding: 13px 0; } .tv-ft .tv-ft__shop { margin-top: 4px; } } @media (prefers-reduced-motion: reduce) { .tv-cn__list li::before, .tv-cn__n, .tv-cn__k, .tv-cn__v, .tv-cn__go { transition: none; } } /* ============================================================ 23. НАВИГАЦИЯ V1 (TV-REBIRTH-HOMEPAGE-FINAL-FIX-1) В строке шапки — пять пунктов; «О компании» только в свёрнутом меню (≤1080), где есть место по вертикали. Меню стало на пункт длиннее — запас высоты раскрытия увеличен. ============================================================ */ @media (min-width: 1081px) { .nav-menu .nav-menu-compact { display: none; } } @media (max-width: 1080px) { .nav-links.is-open { max-height: 640px; } } /* ============================================================ 24. ДОВОДКА ВЛАДЕЛЬЦА (TV-REBIRTH-HOMEPAGE-OWNER-POLISH-1) ------------------------------------------------------------ Сцена 02: последний акт «что даёт бизнесу» — четыре результата в пустом нижнем левом поле сцены. Появляются после активации ядра (8.4–9.3 с) и выходят со стороны ядра — причинность видна движением. Без сюжета — сразу итог. ============================================================ */ .tv-bai__outs { position: absolute; inset: 0; container-type: inline-size; pointer-events: none; z-index: 1; } .tv-bai__outs-h { position: absolute; left: 2%; top: 64%; margin: 0; font-size: max(10px, 1.35cqw); font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; color: #6FD7A8; } .tv-bai__outs-list { position: absolute; left: 2%; top: 69%; width: 46%; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; } .tv-bai__out { padding: 1cqw 1.3cqw 1.1cqw; border-radius: 1.3cqw; background: linear-gradient(160deg, rgba(20, 52, 64, 0.9), rgba(10, 22, 36, 0.92)); border: 1px solid rgba(111, 215, 168, 0.4); box-shadow: 0 1.4cqw 3cqw -1.8cqw rgba(0, 0, 0, 0.85), 0 0 2.2cqw -0.8cqw rgba(63, 211, 154, 0.45); font-size: max(12px, 1.62cqw); line-height: 1.3; color: #DCE7F8; } .tv-bai__out b { display: flex; align-items: center; gap: 0.6cqw; margin-bottom: 0.45cqw; font-size: max(10px, 1.2cqw); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #8FE6C0; } .tv-bai__out b::before { content: "✓"; font-size: 1.2cqw; letter-spacing: 0; } /* Сюжет (только там, где результаты лежат в сцене, >720px): до активации результатов нет; после — выходят со стороны ядра. На мобильном они стоят столбиком под сценой и видны всегда. */ @media (min-width: 721px) { .tv-bai.is-armed .tv-bai__outs-h, .tv-bai.is-armed .tv-bai__out { opacity: 0; } .tv-bai.is-playing .tv-bai__outs-h { animation: tv-bai-out-h 0.7s var(--ease) 8.4s both; } .tv-bai.is-playing .tv-bai__out { animation: tv-bai-out 0.9s var(--ease) var(--o) both; } } .tv-bai__out--sales { --o: 8.5s; --fx: 9cqw; --fy: -8cqw; } .tv-bai__out--service { --o: 8.75s; --fx: 4cqw; --fy: -8cqw; } .tv-bai__out--analytics { --o: 9s; --fx: 9cqw; --fy: -12cqw; } .tv-bai__out--auto { --o: 9.25s; --fx: 4cqw; --fy: -12cqw; } @keyframes tv-bai-out { from { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.82); } to { opacity: 1; transform: none; } } @keyframes tv-bai-out-h { from { opacity: 0; } to { opacity: 1; } } :root[data-theme="light"] .tv-bai__out { background: linear-gradient(170deg, rgba(255, 255, 255, 0.97), rgba(236, 250, 244, 0.95)); border-color: rgba(18, 147, 106, 0.35); color: #1B2B45; box-shadow: 0 1.4cqw 3cqw -2cqw rgba(14, 40, 90, 0.4); } :root[data-theme="light"] .tv-bai__out b, :root[data-theme="light"] .tv-bai__outs-h { color: #0F7A57; } @media (max-width: 720px) { .tv-bai__outs { order: 3; position: static; container-type: normal; margin-top: 14px; } .tv-bai__outs-h { position: static; margin: 0 0 8px; font-size: 10.5px; } .tv-bai__outs-list { position: static; width: auto; gap: 10px; } .tv-bai__out { padding: 10px 12px; border-radius: 12px; font-size: 13px; } .tv-bai__out b { gap: 6px; margin-bottom: 4px; font-size: 10.5px; } .tv-bai__out b::before { font-size: 11px; } } @media (prefers-reduced-motion: reduce) { .tv-bai.is-playing .tv-bai__out, .tv-bai.is-playing .tv-bai__outs-h { animation: none; } } /* Сцена «Весь бизнес — в одном контексте»: сигналы ассистента владельца на той же орбите, что поверхности ROS. Размеры — мировые px (орбита сама масштабирует). Уровень — словом в метке (важно / внимание / норма), цвет только подсказывает. */ .tv-sig { width: 460px; padding: 24px 28px 26px; border-radius: 22px; background: linear-gradient(160deg, rgba(26, 45, 82, 0.94), rgba(12, 21, 40, 0.95)); border: 1.5px solid rgba(150, 195, 255, 0.4); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 50px -16px rgba(61, 139, 255, 0.45); color: #DCE7F8; } .tv-sig__k { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #9CC3FF; } .tv-sig__k i { width: 11px; height: 11px; border-radius: 50%; background: #6FA8FF; box-shadow: 0 0 12px #6FA8FF; } .tv-sig__h { display: block; margin: 12px 0 10px; font-size: 27px; font-weight: 750; line-height: 1.22; color: #fff; } .tv-sig__a { display: block; font-size: 18px; line-height: 1.4; color: #A9BBD6; } .tv-sig__a::before { content: "→ "; color: #6FA8FF; } .tv-sig--imp { border-color: rgba(255, 181, 71, 0.55); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 50px -16px rgba(255, 181, 71, 0.35); } .tv-sig--imp .tv-sig__k { color: #FFC56E; } .tv-sig--imp .tv-sig__k i { background: #FFB547; box-shadow: 0 0 12px #FFB547; } .tv-sig--ok .tv-sig__k { color: #8FE6C0; } .tv-sig--ok .tv-sig__k i { background: #3FD39A; box-shadow: 0 0 12px #3FD39A; } .tv-orb__obj.is-focus .tv-sig { border-color: rgba(170, 210, 255, 0.7); } .tv-orb__obj:focus-visible .tv-sig { outline: 3px solid var(--accent-soft); outline-offset: 8px; } :root[data-theme="light"] .tv-sig { background: linear-gradient(170deg, rgba(255, 255, 255, 0.97), rgba(242, 247, 255, 0.95)); border-color: rgba(47, 123, 255, 0.3); color: #1B2B45; box-shadow: 0 30px 60px -36px rgba(14, 40, 90, 0.45); } :root[data-theme="light"] .tv-sig__k { color: #2F7BFF; } :root[data-theme="light"] .tv-sig__h { color: #0B1628; } :root[data-theme="light"] .tv-sig__a { color: #4A5C7A; } :root[data-theme="light"] .tv-sig--imp { border-color: rgba(178, 107, 0, 0.45); } :root[data-theme="light"] .tv-sig--imp .tv-sig__k { color: #A15F00; } :root[data-theme="light"] .tv-sig--ok .tv-sig__k { color: #0F7A57; } @media (max-width: 720px) { .tv-sig { width: 380px; padding: 22px 24px 24px; } .tv-sig__h { font-size: 26px; } }