/* ═══════════════════════════════════════════════════ Сотри Границы — единый источник стилей сайтового слоя Используется: site/*.html () apps/web/(site)/layout.tsx (import прямой) Шрифты: Unbounded + Manrope (Google Fonts или next/font) ═══════════════════════════════════════════════════ */ /* ── Токены ─────────────────────────────────────── */ :root { /* Тёмная зона (навигация, hero, footer, dark-band) */ --d-bg:#0F1A24; --d-bg-2:#0B141C; --d-surface:#162130; --d-surface-2:#1C2B3D; --d-border:rgba(255,255,255,.08); --d-border-hi:rgba(255,255,255,.16); --d-t1:#f0f6fc; --d-t2:#a8c8e0; --d-t3:#6e90a8; /* Светлая зона (контентные секции) */ --l-bg:#F4F7FA; --l-surface:#ffffff; --l-surface-2:#EEF3F8; --l-border:#E2E9F0; --l-border-hi:#D0DAE5; --l-t1:#0F1A24; --l-t2:#46586B; --l-t3:#8499AB; /* Акцент */ --acc:#5B63E6; --acc-hi:#4951d6; --acc-soft:#818cf8; --acc-bg:rgba(91,99,230,.10); --acc-border:rgba(91,99,230,.26); --acc-glow:rgba(129,140,248,.30); /* Зоны развития */ --z-phys:#3B82F6; --z-cog:#8B5CF6; --z-speech:#EC4899; --z-soc:#10B981; --z-beh:#F59E0B; --z-emo:#EF4444; /* Система */ --green:#16a34a; --green-soft:#22c55e; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-2xl:28px; --r-full:9999px; --shadow:0 1px 2px rgba(15,26,36,.04),0 8px 24px rgba(15,26,36,.06); --shadow-lg:0 24px 60px -20px rgba(15,26,36,.20); --spring:cubic-bezier(.22,1.5,.36,1); --ease:cubic-bezier(.22,.61,.36,1); } /* ── .sg-site: базовые стили + алиасы платформенных переменных ─ Всё, что было в селекторах body, *, h1, a — скопировано сюда, чтобы: 1. не ломать Next.js платформу глобальным сбросом; 2. в Next.js переопределить platform-vars на site-тёмные значения независимо от темы платформы (sg-theme=light/dark не влияет). */ .sg-site { /* Алиасы платформенных переменных — форсируем тёмный режим сайта */ --bg: var(--d-bg); --text-1: var(--d-t1); --text-2: var(--d-t2); --text-3: var(--d-t3); --accent: var(--acc-soft); --accent-hi: #a5b4fc; --sphere-cognitive: var(--z-cog); --sphere-speech: var(--z-speech); --sphere-physical: var(--z-phys); --blue: var(--z-phys); --yellow: var(--z-beh); --red: var(--z-emo); --green: var(--z-soc); --orange: #F97316; --chrome-text: #ffffff; --font-manrope: 'Manrope'; --font-unbounded: 'Unbounded'; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; /* margin:0 — сам body. Reset `.sg-site *{margin:0}` бьёт только потомков, не сам элемент, поэтому без этого UA-дефолт body{margin:8px} давал «белую рамку» (фон html) вокруг сайта. */ margin: 0; background: var(--l-bg); color: var(--l-t1); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .sg-site *, .sg-site *::before, .sg-site *::after { box-sizing: border-box; margin: 0; padding: 0; } .sg-site h1, .sg-site h2, .sg-site h3, .sg-site .uh { font-family: var(--font-unbounded, 'Unbounded'), 'Manrope', sans-serif; letter-spacing: -.02em; line-height: 1.12; } .sg-site a { color: inherit; text-decoration: none; } /* ── Утилиты ─────────────────────────────────────── */ .ic { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; } .ic svg { width:100%; height:100%; } .wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 28px; } /* ── Анимации ────────────────────────────────────── */ @keyframes drift { to { transform:translate(60px,-44px) scale(1.16); } } @keyframes up { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } } @keyframes ldIn { from { opacity:0; transform:translateY(8px) scale(.96); } to { opacity:1; transform:none; } } /* ── Reveal (IntersectionObserver) ───────────────── */ .js .reveal { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .js .reveal.in { opacity:1; transform:none; } .reveal[data-d="1"] { transition-delay:.1s; } .reveal[data-d="2"] { transition-delay:.2s; } .reveal[data-d="3"] { transition-delay:.3s; } /* ── Навигация ───────────────────────────────────── */ .sg-site nav { position:relative; z-index:5; } nav.top { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(15,26,36,0); border-bottom:1px solid transparent; transition:background .3s, border-color .3s; } nav.top.scrolled { background:rgba(15,26,36,.84); backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid var(--d-border); } .nav-inner { height:72px; display:flex; align-items:center; justify-content:space-between; } .brand { display:flex; align-items:center; gap:11px; color:#fff; font-weight:800; font-size:16px; font-family:var(--font-unbounded,'Unbounded'); } .brand-mark { width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,var(--acc-soft),var(--z-cog)); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px -6px var(--acc-glow); } .brand-mark .ic { width:19px; height:19px; color:#fff; } .nav-cta { display:flex; align-items:center; gap:16px; } .nav-link { color:var(--d-t3); font-size:14px; font-weight:600; transition:color .2s; } .nav-link:hover { color:#fff; } .nav-login { color:var(--d-t2); font-size:14px; font-weight:700; } .nav-login:hover { color:var(--acc-soft); } /* Навигация над тёмным hero: брэнд/ссылки/кнопка — это , а `.sg-site a{color:inherit}` (0,1,1) перебивает одноклассовые .brand/.nav-link/… (0,1,0) → они наследуют светлый базовый цвет страницы и становятся тёмными на тёмном hero. Возвращаем цвета через .sg-site-префикс (0,2,0). */ .sg-site .brand { color:#fff; } .sg-site .nav-link { color:var(--d-t3); } .sg-site .nav-login { color:var(--d-t2); } .sg-site .btn-watch { color:#fff; } .btn-watch { display:inline-flex; align-items:center; gap:8px; background:var(--acc); color:#fff; font-size:14px; font-weight:700; padding:9px 20px; border-radius:var(--r-full); box-shadow:0 10px 24px -8px var(--acc-glow); transition:transform .25s var(--spring), background .2s; } .btn-watch:hover { background:var(--acc-hi); transform:translateY(-2px); } .btn-watch .ic { width:15px; height:15px; } .sect-chip { display:inline-flex; align-items:center; gap:7px; margin-left:6px; font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:var(--r-full); border:1px solid; } .sect-chip .ic { width:13px; height:13px; } /* ── Кнопки ──────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:700; padding:14px 24px; border-radius:var(--r-full); border:1px solid transparent; cursor:pointer; transition:transform .25s var(--spring), box-shadow .25s, background .2s; white-space:nowrap; } .btn .ic { width:18px; height:18px; } .btn-primary { background:var(--acc); color:#fff; box-shadow:0 10px 28px -8px var(--acc-glow); } .btn-primary:hover { background:var(--acc-hi); transform:translateY(-2px); } .btn-ghost-dark { background:rgba(255,255,255,.06); color:#fff; border-color:var(--d-border-hi); } .btn-ghost-dark:hover { background:rgba(255,255,255,.12); transform:translateY(-2px); } .btn-full { width:100%; justify-content:center; } /* ── Лид-форма ───────────────────────────────────── */ .lead-form { display:flex; flex-direction:column; gap:10px; text-align:left; } .lf-in { width:100%; background:var(--d-bg); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-full); padding:11px 17px; font-size:14px; color:var(--d-t1); outline:none; font-family:inherit; transition:border-color .2s; } .lf-in:focus { border-color:rgba(129,140,248,.5); } .lf-in::placeholder { color:#46586b; } .lf-area { border-radius:var(--r-lg); resize:vertical; min-height:56px; line-height:1.5; } .lf-submit { display:inline-flex; align-items:center; justify-content:center; width:100%; gap:9px; background:var(--acc); color:#fff; font-size:15px; font-weight:700; padding:13px 24px; border-radius:var(--r-full); border:none; cursor:pointer; box-shadow:0 10px 28px -8px var(--acc-glow); transition:transform .25s var(--spring), background .2s; font-family:inherit; } .lf-submit:hover { background:var(--acc-hi); transform:translateY(-2px); } .lf-err { display:none; font-size:12.5px; font-weight:600; color:#fda4af; text-align:center; } .lf-err.show { display:block; } .lead-done { display:none; flex-direction:column; align-items:center; gap:9px; padding:14px 0 4px; } .lead-done.show { display:flex; animation:ldIn .45s var(--spring); } .ld-ic { width:46px; height:46px; border-radius:50%; background:rgba(34,197,94,.15); color:var(--green-soft); display:flex; align-items:center; justify-content:center; } .ld-ic .ic { width:22px; height:22px; } .lead-done b { font-size:16.5px; color:#fff; } .lead-done span { font-size:13px; color:var(--d-t2); } .lf-tg { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; padding:11px; border-radius:var(--r-full); background:rgba(91,99,230,.10); color:var(--acc-soft); font-size:13px; font-weight:700; transition:background .2s, color .2s; } .lf-tg:hover { background:rgba(91,99,230,.2); color:#a5b4fc; } .lf-tg .ic { width:14px; height:14px; } /* ── Блок «Также на платформе» + Footer ─────────── */ .nbrs { background:var(--d-bg-2); border-top:1px solid var(--d-border); padding:20px 0; } .nbrs-row { display:flex; justify-content:center; align-items:center; gap:18px; color:var(--d-t3); font-size:13px; flex-wrap:wrap; } .nbrs-row a { display:inline-flex; align-items:center; gap:7px; color:var(--d-t2); font-weight:600; transition:color .2s; } .nbrs-row a:hover { color:var(--acc-soft); } .nbrs-row .ic { width:14px; height:14px; } /* `.sg-site footer` (0,1,1), НЕ `footer` (0,0,1): reset `.sg-site *{padding:0}` (0,1,0) перебивает тип-селектор и обнуляет паддинг → копирайт прилипал к низу. */ .sg-site footer { background:var(--d-bg-2); color:var(--d-t2); padding:64px 0 44px; } .foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; margin-bottom:48px; } .foot-brand-link { font-size:15px !important; font-weight:800 !important; font-family:'Unbounded' !important; display:flex !important; align-items:center !important; gap:11px !important; color:#fff !important; } .foot-brand-mark { width:32px !important; height:32px !important; } .foot-brand-mark .ic { width:17px !important; height:17px !important; } .foot-brand p { font-size:13.5px; color:var(--d-t3); margin-top:14px; max-width:280px; font-family:'Manrope'; } .foot-col h4 { font-size:12.5px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; font-family:'Manrope'; } .foot-col a { display:block; font-size:13.5px; color:var(--d-t2); margin-bottom:10px; transition:color .2s; font-family:'Manrope'; } .foot-col a:hover { color:var(--acc-soft); } .foot-bottom { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-top:32px; border-top:1px solid var(--d-border); font-size:12.5px; color:var(--d-t3); gap:10px; font-family:'Manrope'; }