:root{ /* 01.09: было почти чистым чёрным (#0a0a0a) — по прямой просьбе пользователя («не таким черным фоном а немного серым как в Клоде») поднято до тёмно-серого. Не тёплый серый, как у самого Клода — у Kaito своя циан/синяя акцентная пара (--accent1/--accent2 ниже), под неё лучше подходит нейтральный/чуть холодный серый, не бежевый. Действует сразу на все страницы (index/oferta/privacy/security и тёмную тему crm.html) — общий style.css, один :root на всех. */ --bg:#1c1d21; --surface:#26272b; --surface2:#2d2e33; --text:#f4f4f6; --muted:#c2c2cc; --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.20); --silver1:#f4f4f6; --silver2:#9a9aa3; /* 05.09: короткая попытка перевести на монохром отменена владельцем («не делай чёрно-белую CRM», нужен dark base + цветные AI-акценты) — возвращена исходная циан→синяя пара визуала Kaito. */ --accent1:#22d3ee; --accent2:#3b82f6; --accent1-rgb:34,211,238; --accent2-rgb:59,130,246; /* 24.09: шкала скруглений поднята под язык Seedance (навык seedance-design, реверс-инжиниринг seedance.ai) — было 10/14/18px, у Seedance дефолт на карточках/кнопках 1.75rem (28px). Действует в обеих темах — форма, не цвет, тёмная neon-тема её тоже наследует. */ --radius-sm:14px; --radius-md:20px; --radius-lg:28px; --surface-glass:rgba(20,22,28,.55); --surface-raised:var(--surface2); /* Семантические статусы — единая точка правды для error/success/warning, раньше были хардкод-хексами по всему crm.html. */ --success:#3ecf5e; --success-rgb:62,207,94; --warning:#f5a524; --warning-rgb:245,165,36; --danger:#e5484d; --danger-rgb:229,72,77; /* Типографическая шкала (Design System, Фаза 1) — референс WB Партнёры. Изначально задумывалась только для новых экранов («существующая вёрстка не переписывается»), но по запросу пользователя («текст везде побольше, как в WB Партнёры») применена везде: и сама шкала здесь подняли на +3px, и все хардкод-значения font-size в crm.html — тем же +3px одним проходом (см. 07-journal), чтобы вся типографика подросла согласованно, не только новые экраны. */ --fs-2xs:14px; --fs-xs:15.5px; --fs-sm:16.5px; --fs-md:18px; --fs-lg:21px; --fs-xl:27px; /* Семантические токены поверх шкалы --fs-* — крупные цифры на карточках статистики и заголовки экранов нуждаются в своём весе/кегле отдельно от --fs-xl, не задевая её текущих потребителей. --font-size-body/ -caption — алиасы на уже существующие --fs-sm/--fs-xs, чтобы новые экраны ссылались на осмысленное имя, не дублируя значение. */ /* 24.09: Inter первым в стеке — Seedance-язык (навык seedance-design), системный стек остаётся честным фолбэком, если шрифт не успел загрузиться/заблокирован. Подключение — Google Fonts в каждом HTML-файле, см. netlify.toml CSP (style-src/font-src). */ --font-family-base:'Inter',-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-size-display:33px; --font-weight-display:800; --font-size-h1:31px; --font-weight-h1:700; --font-size-body:var(--fs-sm); --font-size-caption:var(--fs-xs); /* Шкала отступов. */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:28px; /* Уровни теней — свели повторяющиеся значения (модалки/floating/drag). */ --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 8px 24px rgba(0,0,0,.5); --shadow-lg:0 20px 60px rgba(0,0,0,.6); /* Категорийная палитра CRM — вторичный акцент поверх основного cyan/blue Kaito (см. crm.html), по одному цвету на раздел карточки клиента, как в референсе с деревом ИИ-агентов (у каждого отдела свой цвет линии/узла). Намеренно не трогает #3ecf5e/#e5484d — те заняты семантикой «подключено»/«ошибка» по всему приложению. 05.09: краткий откат в градации серого отменён владельцем — вернули исходные цвета, каждый раздел снова различим по цвету, не только по светлоте. */ --cat-avito:#f5a524; --cat-avito-rgb:245,165,36; --cat-drive:#34d399; --cat-drive-rgb:52,211,153; --cat-profile:#a78bfa; --cat-profile-rgb:167,139,250; --cat-autopost:#3b82f6; --cat-autopost-rgb:59,130,246; --cat-logo:#ec4899; --cat-logo-rgb:236,72,153; --cat-content:#2dd4bf; --cat-content-rgb:45,212,191; --cat-campaigns:#fb7185; --cat-campaigns-rgb:251,113,133; --cat-social:#22d3ee; --cat-social-rgb:34,211,238; --cat-analytics:#fbbf24; --cat-analytics-rgb:251,191,36; --cat-tasks:#6366f1; --cat-tasks-rgb:99,102,241; --cat-media:#84cc16; --cat-media-rgb:132,204,22; --cat-tokens:#d946ef; --cat-tokens-rgb:217,70,239; } /* Тема — ДЕФОЛТНАЯ (24.09, ребрендинг под Seedance, см. план "unified-wiggling-puffin"). Переключается атрибутом data-theme="light" на , который стоит по умолчанию во всех 7 HTML-файлах — имя атрибута осталось "light" по историческим причинам (toggleTheme()/getTheme() в crm.html и localStorage-ключ kaitosmm_theme завязаны на строки "light"/ "dark", менять их — отдельная, не срочная уборка), но сами ЦВЕТА внутри с 24.09 тёмные. Причина: skillui (реверс-инжиниринг seedance.ai) прочитал светлые default-значения CSS-переменных из исходников сайта (похоже, дефолты shadcn/ui) и подписал "Primary theme: light" — но живой seedance.ai реально тёмный (чёрный фон, фиолетово-розовый градиент, неон), это статический анализ не увидел. Ошибку заметил владелец 24.09, сверили с живым скриншотом сайта — да, тёмный. Переделывать всю структуру (радиусы, Inter, группировку меню — Фаза 1, единый экран «Создать») не стали, только перевернули фон/текст сюда: фон #0a0a0a, текст #ffffff. Акцент остаётся синим/циан (#0ea5e9/#2563eb), не переключаем на настоящий фиолетовый Seedance — уже был сознательный выбор ради узнаваемости бренда Kaito, эта причина не изменилась. Категорийные --cat-* и брендовые цвета соцсетей по-прежнему не меняются между темами — акцентные точки, не фон/текст. */ html[data-theme="light"]{ --bg:#0a0a0a; --surface:#18181b; --surface2:#202024; --text:#ffffff; --muted:#a1a1aa; --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.08); --silver1:#ffffff; --silver2:#a1a1aa; --accent1:#0ea5e9; --accent2:#2563eb; --accent1-rgb:14,165,233; --accent2-rgb:37,99,235; --surface-glass:rgba(10,10,10,.82); --surface-raised:var(--surface2); --success:#2dd4bf; --success-rgb:45,212,191; --warning:#f59e0b; --warning-rgb:245,158,11; --danger:#ef4444; --danger-rgb:239,68,68; --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 4px 12px rgba(0,0,0,.4); --shadow-lg:0 12px 32px rgba(0,0,0,.5); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-family-base); line-height:1.6; -webkit-font-smoothing:antialiased; } .wrap{max-width:1120px;margin:0 auto;padding:0 24px;} /* Header */ header{ position:sticky;top:0;z-index:20; /* 24.09: было захардкожено rgba(28,29,33,.86) — работало только пока .kaito-neon header (ниже) её перекрывал на публичных страницах со скином; теперь светлая тема дефолтная и index.html больше не носит класс kaito-neon (см. Фазу 1 ребрендинга) — этот hardcode стал видимым багом (тёмная шапка на светлой странице). --surface-glass уже теме-зависимый токен, ровно для этого случая. */ background:var(--surface-glass); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px;} /* 05.09: настоящая причина переноса "KAITO-SMM" на две строки — не gap nav (это было лишь усугубляющим фактором после добавления 3 пунктов меню), а отсутствие white-space:nowrap здесь: браузер переносит текст по дефису "KAITO-SMM" → "KAITO-"/"SMM" при любом сжатии flex-строки. flex-shrink:0 — бренд не должен ужиматься вообще, при нехватке места пусть теснее сжимается nav (см. правки выше). */ .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);flex-shrink:0;} .brand img{height:24px;width:auto;display:block;} .brand span{font-size:16px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;white-space:nowrap;} /* 05.09: было gap:36px — хватало на 5 пунктов, после добавления Возможности/AI/Интеграции (стало 8) шапка переполнялась и обрезала бренд-логотип (см. 07-redesign-2026/SITE-PLAN.md). Не даём nav переноситься на вторую строку — header .wrap ниже фиксированной высоты, перенос обрежется — вместо этого просто сжимаем сильнее. */ nav{display:flex;gap:20px;} nav a{color:var(--muted);text-decoration:none;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;transition:color .2s;white-space:nowrap;} nav a:hover{color:var(--text);} /* 24.09: color было хардкод #0a0a0a — на тёмной теме давало приличный контраст (фон var(--text)=светлый, текст тёмный), но в новой светлой теме var(--text)=#000000, и кнопка стала чёрным на чёрном. var(--bg) — всегда корректная инверсия относительно var(--text) в обеих темах. */ .nav-cta{background:var(--text);color:var(--bg);padding:10px 22px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;font-weight:600;border-radius:var(--radius-sm);} .nav-cta:hover{opacity:.86;transform:translateY(-2px);} .nav-auth{display:flex;align-items:center;gap:14px;} .nav-login{border:1px solid var(--line2);padding:10px 22px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text);text-decoration:none;border-radius:var(--radius-sm);} .nav-login:hover{border-color:var(--text);background:rgba(255,255,255,.04);transform:translateY(-2px);} @media (max-width:860px){ .nav-login{display:none;} } /* 05.09: на мобильном раньше не было вообще никакого меню (nav{display: none} чуть ниже) — только обрезанная кнопка "Зарегистрироваться". Бургер + выпадающая панель со всеми пунктами и Войти/Регистрация внутри, по образцу komosstroy.ru. Кнопка скрыта на десктопе, видна только в мобильной media query вместе со скрытием инлайновых nav/.nav-auth. */ .nav-toggle{ display:none;align-items:center;justify-content:center; width:40px;height:40px;flex-shrink:0; background:none;border:1px solid var(--line2);border-radius:8px;cursor:pointer; position:relative;z-index:21; } .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{ content:"";display:block;width:18px;height:2px;border-radius:2px; background:var(--text);position:absolute;left:11px;top:19px; transition:transform .2s ease,opacity .2s ease,background .2s ease; } .nav-toggle span::before{top:-6px;} .nav-toggle span::after{top:6px;} .nav-toggle.open span{background:transparent;} .nav-toggle.open span::before{top:0;transform:rotate(45deg);} .nav-toggle.open span::after{top:0;transform:rotate(-45deg);} /* 06.09: настоящая боковая панель (по образцу komosstroy.ru), не выпадающий на всю ширину список, как было раньше — задвигается слева transform'ом (не display:none/flex — иначе анимация въезда невозможна), плюс затемняющая подложка позади с отдельным фейдом. nav-toggle остаётся видимым и кликабельным поверх (z-index выше панели/подложки) — уже превращается в крестик своими :hover/.open стилями выше, отдельная кнопка-крестик внутри панели не нужна. */ #mobile-menu-backdrop{ position:fixed;inset:0;z-index:28; background:rgba(10,10,12,.6); opacity:0;pointer-events:none; transition:opacity .3s ease; } #mobile-menu-backdrop.open{opacity:1;pointer-events:auto;} .nav-toggle{z-index:31;} #mobile-menu{ display:flex;flex-direction:column; position:fixed;top:0;left:0;bottom:0;z-index:29; width:min(320px,84vw); background:var(--surface); border-radius:0 var(--radius-lg) var(--radius-lg) 0; box-shadow:var(--shadow-lg); padding:96px 20px 32px;overflow-y:auto; transform:translateX(-100%); transition:transform .35s cubic-bezier(.32,.72,0,1); } #mobile-menu.open{transform:translateX(0);} /* 15.09: было плоским списком строк на тонких разделителях — «блеклое» по прямой оценке владельца. Каждый пункт теперь своя плитка (тот же язык, что у .card/.card-icon выше — скруглённый угол, тонкая рамка, циановая точка-маркер, сдвиг+свечение по наведению вместо просто смены цвета текста), плюс компактнее (было 16px паддинга). */ #mobile-menu .mm-link{ color:var(--text);text-decoration:none;font-size:14px;font-weight:600; text-transform:uppercase;letter-spacing:.06em; padding:13px 14px;margin-bottom:8px;border-radius:16px; background:var(--surface2);border:1px solid var(--line); display:flex;align-items:center;gap:10px; transition:color .2s,background .2s,border-color .2s,transform .2s,box-shadow .2s; } #mobile-menu .mm-link::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent1);box-shadow:0 0 8px rgba(34,211,238,.7);flex:none;} #mobile-menu .mm-link:hover{color:var(--accent1);border-color:var(--line2);background:var(--surface-raised);transform:translateX(4px);box-shadow:0 0 20px rgba(34,211,238,.15);} /* Цветовая гамма списков CRM (crm.html, .kaito-neon .list-row и т.п.) — тот же градиент, что теперь и у .kaito-neon .card выше, не плоский --surface2. */ .kaito-neon #mobile-menu .mm-link{ background:linear-gradient(180deg,rgba(26,40,64,.6),rgba(16,26,44,.65)); border-color:rgba(34,211,238,.45); box-shadow:0 0 0 1px rgba(34,211,238,.15),0 0 20px rgba(34,211,238,.2); } #mobile-menu .mm-auth{display:flex;flex-direction:column;gap:12px;margin-top:20px;} #mobile-menu .mm-auth .nav-login,#mobile-menu .mm-auth .nav-cta{ display:block;text-align:center;padding:14px; } @media (prefers-reduced-motion:reduce){ #mobile-menu,#mobile-menu-backdrop{transition:none;} } /* 05.09: белое фоновое свечение — тот же приём, что у ауры аватара Kaito в CRM (.kaito-avatar-glow: radial-gradient + blur + мягкая пульсация), но белое и не привязанное к аватару. #ambient-layer — один слой position:fixed на весь сайт (виден позади ЛЮБОГО текста/кнопки при скролле, не нужно вставлять свой div в каждую секцию); внутри модалки регистрации свой контейнер (см. .signup-modal) — там fixed-слой не виден из-за отдельного stacking context поверх оверлея. */ #ambient-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;} @keyframes ambient-glow-drift{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(22px,-18px) scale(1.08);} } .ambient-glow{ position:absolute;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 70%); filter:blur(4px);animation:ambient-glow-drift 16s ease-in-out infinite; } @media (prefers-reduced-motion:reduce){ .ambient-glow{animation:none;} } /* Свечение на кнопках по наведению/фокусу — внешний ореол (box-shadow), не внутренняя заливка: на .btn-primary (уже белый фон) внутреннее белое пятно было бы не видно, ореол снаружи виден на любом фоне кнопки. 06.09: единственное место, где объявлен transition для этих трёх классов — держит все переходы (включая hover-подъём transform) в одном списке, чтобы более специфичные правила ниже случайно не «съели» его целиком (transition — не аддитивное свойство между разными правилами). */ .btn,.nav-cta,.nav-login{transition:box-shadow .25s ease,opacity .2s ease,transform .2s ease,background .2s ease,border-color .2s ease;} .btn:hover,.nav-cta:hover,.nav-login:hover, .btn:focus-visible,.nav-cta:focus-visible,.nav-login:focus-visible{ box-shadow:0 0 28px 2px rgba(255,255,255,.28); } /* Цветной кружок-иконка перед заголовком карточки — тот же принцип категорийных цветов, что в CRM (--cat-*), для единого визуального языка сайт+CRM (см. 07-redesign-2026/SITE-PLAN.md, «Единый бренд»). 15.09: круг → скруглённый квадрат (тот же «иконка-плитка», что на сгенерированных неон-макетах сайта), плюс тонкое кольцо и свечение под .kaito-neon — по прямой просьбе «сделать поинтереснее». */ .card-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;font-size:17px;margin-right:10px;vertical-align:middle;flex:none;} .kaito-neon .card-icon{box-shadow:0 0 0 1px rgba(34,211,238,.4),0 0 18px rgba(34,211,238,.3);} /* Hero */ .hero{padding:120px 0 100px;text-align:center;position:relative;} .hero .wrap{position:relative;z-index:1;} .hero .kicker{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:28px;} .hero h1{ font-size:clamp(38px,6vw,76px); line-height:1.06; font-weight:600; letter-spacing:-.01em; margin:0 0 28px; } .hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--silver1),var(--silver2));-webkit-background-clip:text;background-clip:text;color:transparent;} .hero p{font-size:19px;color:var(--muted);max-width:620px;margin:0 auto 44px;} .hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;} .btn{ display:inline-block;padding:16px 36px;font-size:13px;letter-spacing:.16em;text-transform:uppercase; text-decoration:none;border-radius:var(--radius-sm); } /* 24.09: тот же фикс, что у .nav-cta — было #0a0a0a хардкод, ломалось на светлой теме (чёрное на чёрном). var(--bg) — верная инверсия в обеих. */ .btn-primary{background:var(--text);color:var(--bg);font-weight:600;} .btn-primary:hover{opacity:.86;transform:translateY(-2px);} .btn-ghost{border:1px solid var(--line2);color:var(--text);} .btn-ghost:hover{border-color:var(--text);transform:translateY(-2px);} .btn-vk{background:#0077ff;color:#fff;border:none;} .btn-vk:hover{opacity:.86;transform:translateY(-2px);} .hero-rings{margin:20px auto 36px;max-width:100%;} .hero-rings img{width:100%;height:auto;display:block;} .kaito-neon .hero-rings img{filter:drop-shadow(0 0 40px rgba(34,211,238,.35));} .hero-rings.hero-screenshot{max-width:100%;position:relative;} .hero-rings.hero-screenshot img{border-radius:22px;box-shadow:0 0 0 1px rgba(34,211,238,.3),0 20px 60px rgba(0,0,0,.4);} .hero-rings.hero-screenshot figcaption{text-align:center;margin-top:14px;color:var(--muted);font-size:14.5px;} /* 15.09: перерисованы через codex exec широкими (1600x900, было 340x700 узким телефонным силуэтом) по прямой просьбе «шире во всю ширину сайта» — теперь во всю ширину .wrap (1120px), не блок-карточка. */ figure.section-screenshot{max-width:100%;margin:0 auto 56px;} .section-screenshot img{ display:block;width:100%;height:auto;border-radius:22px; box-shadow:0 0 0 1px rgba(34,211,238,.3),0 20px 60px rgba(0,0,0,.4); } .section-screenshot figcaption{ text-align:center;margin-top:14px;color:var(--muted);font-size:14.5px; } /* Кнопка «Поручить Kaito», нарисованная на самой hero-картинке — сверху лежит настоящая прозрачная ссылка на той же позиции (в % от картинки, чтобы не съезжала при масштабировании), ведёт на ту же регистрацию, что и остальные CTA сайта. */ .hero-screenshot-cta{ position:absolute;left:56.5%;top:71%;width:31%;height:10%; display:block; } /* 15.09: бегущая строка площадок — тот же приём, что на сайте Kaito-Kargo (style.css там: .ticker/.ticker-track/@keyframes ticker), портирован сюда по прямой просьбе «такую же бегущую строку», только акцентный цвет точки — циан (--accent1) вместо фиолетового у Kargo. Разметку вставляет JS (initTicker() в index.html) сразу под
(в самый верх страницы, по просьбе), не хардкожена в HTML — тот же паттерн, что у Kargo (app.js), только другая точка вставки. */ .ticker{ overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:16px 0;background:rgba(255,255,255,.02); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .ticker-track{display:flex;gap:44px;width:max-content;animation:ticker 26s linear infinite;} .ticker-item{ font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.06em; color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:10px; } .ticker-item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent1);box-shadow:0 0 10px rgba(34,211,238,.7);} @keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-50%);}} .ticker:hover .ticker-track{animation-play-state:paused;} @media (prefers-reduced-motion:reduce){.ticker-track{animation:none;}} /* Section shell */ section{padding:100px 0;border-top:1px solid var(--line);} .section-head{max-width:640px;margin:0 auto 64px;text-align:center;} .section-head .kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;} .section-head h2{font-size:clamp(28px,4vw,44px);font-weight:600;letter-spacing:-.01em;margin:0 0 16px;} .section-head p{color:var(--muted);font-size:16px;margin:0;} /* Feature grid — 06.09: было полотно из ячеек на 1px-линиях (background: var(--line) под gap:1px имитировал сетку) — по просьбе владельца заменено на разнесённые скруглённые карточки со своей рамкой и подъёмом по наведению, в стиле CRM (--radius-md, см. style.css :root). */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} /* 15.09: точки-пагинация под каруселью .grid на мобильном (см. медиа- запрос ниже и initCardCarousels() в index.html) — по референсу c-baza.ru, спрятаны на десктопе, где .grid остаётся обычной сеткой. */ .grid-dots{display:none;} /* 25.09: сама точка осталась 7px, но кнопка вокруг неё была ровно такого же размера — попасть пальцем почти невозможно (измерено на 390x844: цели 7x7 и 9x9). Кнопка увеличена до 28x28 и прозрачна, видимую точку рисует ::after — внешний вид не меняется, меняется только область нажатия. */ .grid-dots .dot{width:28px;height:28px;border-radius:50%;background:none;border:none;padding:0;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;} .grid-dots .dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--line2); transition:background .2s,transform .2s,box-shadow .2s;} .grid-dots .dot.active::after{background:var(--accent1);transform:scale(1.3);box-shadow:0 0 8px rgba(34,211,238,.6);} /* 15.09: карточки были заметно крупнее и площе плиток на неон-макетах — по прямой просьбе «сделать меньше, более скруглёнными и поинтереснее» уменьшен паддинг, радиус увеличен с 14px до 16px (= реальный радиус карточек CRM, .kaito-neon .post-composer и т.п. в crm.html — не произвольное число), добавлен акцентный градиент-подложка и яркое циановое свечение по наведению (см. .kaito-neon .card ниже, а не здесь — общий .card остаётся нейтральным для страниц без неон-скина, oferta/privacy и т.п.). */ .card{ background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:26px 24px; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease; } .card:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:var(--shadow-md);} .card h3{font-size:18px;font-weight:600;margin:0 0 10px;letter-spacing:-.005em;display:flex;align-items:center;} .card p{color:var(--muted);font-size:14.5px;margin:0;} /* 14.09: «неон-стекло» скин, перенесённый из CRM (crm.html) — по прямой просьбе «применить всё то же на наш сайт». .kaito-neon переопределяет сами design-токены (--bg/--surface/--line и т.п.), которые и так везде используются в этом файле — тёмно-синий фон с голубым свечением подхватывается карточками/кнопками/секциями разом, без переписывания каждого правила. --accent1 (циан) не трогаем — не менялся и в CRM, там же и объяснение почему. Класс стоит на обеих страниц (crm.html и index.html) — здесь общий style.css, там ещё и локальный набор более точечных усилений поверх этих же токенов. */ .kaito-neon{ /* 15.09: «слишком тёмно, в CRM не так тёмно» — токены здесь (только на сайте, index.html/oferta/privacy и т.п.) были 1-в-1 скопированы из crm.html, но там плотная панель инструментов почти не оставляет видимого пустого фона, а на маркетинговом сайте между карточками много воздуха того же цвета — читается заметно темнее на практике. Подняты на 1-2 тона светлее (crm.html не трогали — своя отдельная копия токенов там же в файле, не эта). */ --bg:#101c30;--surface:#182844;--surface2:#203552;--surface-raised:#203552; --line:rgba(34,211,238,.18);--line2:rgba(34,211,238,.32); } .kaito-neon .card,.kaito-neon .plan{ box-shadow:0 0 0 1px rgba(34,211,238,.28),0 2px 18px rgba(34,211,238,.12); } .kaito-neon .plan.featured{box-shadow:0 0 0 1px rgba(34,211,238,.55),0 4px 26px rgba(34,211,238,.25);} /* 15.09: «плитки блеклые, сделать как на картинках/в CRM», затем «цветовая гамма не такая как в CRM» — первая попытка (160deg, rgba(22,38,64,...)) была придумана на глаз, не сверена с кодом. Реальная формула карточек CRM — crm.html, .kaito-neon .post-composer/.list-row/.cal-grid/ .social-card/.analytics-block/.support-item (строка ~1858): точно тот же градиент/радиус/тень скопированы сюда 1-в-1, не приблизительно. */ .kaito-neon .card{ background:linear-gradient(180deg,rgba(26,40,64,.6),rgba(16,26,44,.65)); border-radius:16px;border-color:rgba(34,211,238,.4); box-shadow:0 0 0 1px rgba(34,211,238,.35),0 0 28px rgba(34,211,238,.18); } .kaito-neon .card:hover{ border-color:rgba(34,211,238,.65); box-shadow:0 0 0 1px rgba(34,211,238,.65),0 0 36px rgba(34,211,238,.3); } .kaito-neon .btn,.kaito-neon .nav-cta{border-radius:999px;} .kaito-neon .btn-primary{ background:linear-gradient(90deg,#22d3ee,#3b82f6);color:#04121a; box-shadow:0 0 0 1px rgba(180,245,255,.5),0 3px 16px rgba(34,211,238,.45); } .kaito-neon .btn-ghost{border-color:rgba(34,211,238,.35);color:#7fe3f5;} /* header{} красит фон захардкоженным rgba(28,29,33,...) в обход общих токенов --bg/--surface — единственное место на сайте, которое не подхватывало неон-скин само по себе. */ .kaito-neon header{background:rgba(16,28,48,.86);border-bottom-color:rgba(34,211,238,.22);} /* Общее фоновое свечение — по живой жалобе «неона такого же нет, как в CRM»: в CRM плотная сетка карточек сама создаёт ощущение неона, тут текстовые секции — добавлено мягкое амбиентное свечение по всей странице (не только у кнопок), тем же приёмом, что .kaito-avatar-glow в CRM. */ body.kaito-neon{ background: radial-gradient(600px 400px at 50% 0%,rgba(34,211,238,.10),transparent 70%), radial-gradient(500px 500px at 90% 30%,rgba(59,130,246,.08),transparent 70%), var(--bg); } /* Partner section */ .partner{background:var(--surface);} .partner-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;} .partner-copy h2{font-size:clamp(26px,3.6vw,38px);font-weight:600;letter-spacing:-.01em;margin:0 0 20px;} .partner-copy p{color:var(--muted);font-size:16px;margin:0 0 28px;} .partner-list{list-style:none;padding:0;margin:0 0 32px;} .partner-list li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line);font-size:15px;} .partner-list li:last-child{border-bottom:1px solid var(--line);} .partner-list li b{color:var(--text);font-weight:600;min-width:150px;} .partner-list li span{color:var(--muted);} .tiers{display:flex;flex-direction:column;gap:10px;} .tier{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md); padding:26px 28px;display:flex;align-items:baseline;justify-content:space-between; transition:border-color .25s ease,transform .25s ease; } .tier:hover{border-color:var(--line2);transform:translateX(4px);} .tier .name{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);} .tier .val{font-size:22px;font-weight:600;} /* Pricing */ .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .pricing-grid.cols-4{grid-template-columns:repeat(4,1fr);} .plan{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md); padding:44px 32px;display:flex;flex-direction:column; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; } .plan:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:var(--shadow-md);} .plan.featured{background:var(--surface2);border-color:rgba(var(--accent1-rgb),.4);} .plan .plan-name{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;} .plan /* 25.09: цена не должна разрываться после слэша — «2490 ₽/» и «мес» на разных строках выглядели как ошибка вёрстки. */ .plan-price{font-size:34px;font-weight:600;margin-bottom:6px;white-space:nowrap;} .plan .plan-note{font-size:13px;color:var(--muted);margin-bottom:32px;} .plan ul{list-style:none;padding:0;margin:0 0 32px;flex:1;} .plan li{font-size:14px;color:var(--muted);padding:10px 0;border-top:1px solid var(--line);} .plan li:first-child{border-top:none;} .plan .btn{text-align:center;} /* FAQ */ .faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px;} .faq details{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md); padding:22px 26px;transition:border-color .2s ease; } .faq details:hover{border-color:var(--line2);} .faq summary{cursor:pointer;font-size:17px;font-weight:600;letter-spacing:-.005em;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";color:var(--muted);font-size:22px;font-weight:400;flex:none;transition:transform .2s ease;} .faq details[open] summary::after{content:"+";transform:rotate(45deg);} .faq details p{color:var(--muted);font-size:15px;margin:14px 0 0;max-width:680px;} /* CTA band */ .cta-band{border-top:1px solid var(--line);text-align:center;padding:110px 0;} .cta-band h2{font-size:clamp(30px,4.4vw,52px);font-weight:600;letter-spacing:-.01em;margin:0 0 20px;} .cta-band p{color:var(--muted);font-size:17px;margin:0 0 40px;} /* Footer */ /* 25.09: запас снизу под плавающую кнопку-маскот (index.html, .kaito-float-avatar, 72px + отступ 24px) — без него она закрывала последние строки футера с реквизитами ИП/ИНН/ОГРНИП. Проверено рендером на 360, 390, 768 и 1440. На страницах без этой кнопки (docs/privacy/security/оферта) лишний отступ внизу безвреден. */ footer{border-top:1px solid var(--line);padding:48px 0 116px;} footer .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;} footer .brand span{font-size:13px;letter-spacing:.2em;} footer .fine{color:var(--muted);font-size:13px;} .footer-socials{display:flex;gap:10px;} .soc-icon{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface2);color:var(--muted);text-decoration:none;font:700 11px/1 'JetBrains Mono',monospace;transition:background .2s,color .2s;} .soc-icon:hover{background:var(--accent1);color:#fff;} .soc-icon svg{width:16px;height:16px;} @media (max-width:860px){ nav{display:none;} .nav-auth{display:none;} .nav-toggle{display:flex;} /* 15.09: «сделать сайт компактным, не таким длинным» — .grid карточек (agent/features/ai/integrations/cases) вместо вертикального стека на весь экран каждая теперь горизонтальная карусель со scroll-snap, точки-пагинация под ней (.grid-dots, разметку добавляет initCardCarousels() в index.html), по референсу c-baza.ru. 15.09, по отдельной просьбе — «Тарифы» (.pricing-grid/.plan) тем же приёмом, тот же .grid-dots переиспользован (initCardCarousels() сам ищет и .card, и .plan). Партнёрку (.partner-grid) не трогали — не просили, там всего 2-3 крупных блока, не 4-6 мелких. */ .grid,.pricing-grid{ display:flex;grid-template-columns:none; gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; padding:2px 2px 6px;margin:0 -2px;-webkit-overflow-scrolling:touch; scrollbar-width:none; } .grid::-webkit-scrollbar,.pricing-grid::-webkit-scrollbar{display:none;} .grid .card,.pricing-grid .plan{flex:0 0 100%;scroll-snap-align:start;} .grid-dots{display:flex;justify-content:center;gap:8px;margin-top:4px;} .partner-grid{grid-template-columns:1fr;gap:40px;} /* 14.09: живая жалоба — 120px/100px паддинг hero (десктопный расчёт) на телефоне давал огромный пустой воздух сверху/между текстом и кнопками. Сжато под мобильный экран, робот в .hero-rings поднят ближе к тексту вместо отдельного блока с большим отступом. 15.09: та же логика теперь и у обычных секций (было 100px сверху/ снизу каждая — на телефоне с десятком секций подряд самая заметная причина «длинного» сайта) и у отступа над заголовком секции. */ .hero{padding:48px 0 56px;} .hero p{margin:0 auto 28px;} .hero-rings{margin:16px auto 28px;max-width:100%;} section{padding:56px 0;} .section-head{margin-bottom:36px;} figure.section-screenshot{margin-bottom:32px;} } @media (max-width:1100px) and (min-width:861px){ .pricing-grid.cols-4{grid-template-columns:repeat(2,1fr);} nav{gap:12px;} nav a{font-size:11.5px;} } /* 06.09: появление секций/карточек при скролле — IntersectionObserver в index.html добавляет .reveal каждому кандидату и снимает transition-delay после первого срабатывания (см. комментарий там). Класс сам по себе ничего не анимирует, пока JS не добавит .reveal-visible — на JS-less и уменьшенном движении (prefers-reduced-motion) всё остаётся видимым сразу, ничего не прячем безусловно в CSS. */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease;} .reveal.reveal-visible{opacity:1;transform:translateY(0);} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} } /* 25.09: шапка переполнялась на ВСЕХ десктопных ширинах, а не только на узких — .wrap ограничен 1120px, а бренд + 10 пунктов меню + две кнопки требуют ~1330px. Кнопка «Зарегистрироваться» уезжала за правый край экрана (проверено локальным рендером: при 1280px правый край шапки был на 1482px, при 1440px — на 1562px). Баг был и до добавления пункта «Рилсы», тот лишь увеличил переполнение на 71px. Лечим тремя шагами, не трогая общий брейкпоинт мобильной вёрстки (860px) — там завязаны карусели карточек и сетка тарифов: 1) шапке (и только ей) даём более широкий wrap; 2) чуть плотнее пункты меню; 3) ниже 1180px меню уезжает в уже существующее бургер-меню, где те же ссылки лежат с 05.09. Правила намеренно привязаны к #site-header (только лендинг): style.css общий с docs/security/privacy — там тоже