/* ============================================================ Taulau — тёмная тема лендинга v3 «restraint» (Linear / Raycast). Принцип: почти-чёрный матовый фон, декор едва заметен и позади, типографика решает всё, акценты маленькие и точные, никаких кричащих свечений. Класс .cyber на ТОЛЬКО index.html. ============================================================ */ body.cyber { --bg: #101114; --bg-alt: #0B0C0E; --bg-dark: #08090A; --ink: #f7f8f8; --ink-2: rgba(255, 255, 255, .62); --ink-3: rgba(255, 255, 255, .38); --accent: #7A4FF2; /* фиолетовый из логотипа-горы */ --line: rgba(255, 255, 255, .07); --green: #8a8f98; /* галочки — приглушённые, не кричат */ color: var(--ink); font-family: 'Inter', -apple-system, 'SF Pro Text', 'Segoe UI', sans-serif; background: #08090A; -webkit-font-smoothing: antialiased; } /* ---------- типографика ---------- */ body.cyber .display, body.cyber .headline { font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: -0.028em; color: #f7f8f8; } body.cyber .display { font-size: clamp(32px, 4.6vw, 62px); line-height: 1.06; } /* компактнее, чтобы однострочные заголовки не переносились на ноутбуках */ body.cyber .headline { font-size: clamp(23px, 2.4vw, 33px); white-space: nowrap; } /* длинным заголовкам (безопасность и пр.) перенос всё же разрешён */ body.cyber .stat-panel .headline, body.cyber .faq .headline { white-space: normal; } @media (max-width: 900px) { body.cyber .headline { white-space: normal; } } body.cyber .sub { font-size: 17px; line-height: 1.6; color: var(--ink-2); } body.cyber .eyebrow { color: #8a8f98 !important; text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; font-weight: 600; } body.cyber .gradient-text { background: linear-gradient(120deg, #b3a6ff 0%, #8fd0f4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- кнопки: прямоугольные, спокойные ---------- */ body.cyber .btn { border-radius: 10px; font-weight: 500; letter-spacing: -0.01em; } body.cyber .btn-primary { background: #7A4FF2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 3px rgba(0, 0, 0, .4); transition: background .18s ease, transform .18s ease; } body.cyber .btn-primary:hover { background: #6B42D9; transform: none; } body.cyber .btn-breathe { animation: none; } body.cyber .btn-ghost { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: var(--ink-2); } body.cyber .btn-ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .16); } body.cyber .btn-dark { background: #1a1e24; color: #fff; } /* ---------- навигация ---------- */ body.cyber .nav { background: rgba(8, 9, 10, .7); border-bottom: 1px solid rgba(255, 255, 255, .06); } body.cyber .nav-logo { color: #f7f8f8; } body.cyber .nav-links a { color: var(--ink-2); font-size: 14px; } body.cyber .nav-links a:hover { color: #fff; } /* CTA в наве — акцентная, светится фирменным цветом */ body.cyber .nav-cta { background: #7A4FF2; border: 1px solid rgba(255, 255, 255, .12); color: #fff; box-shadow: 0 0 16px rgba(122, 79, 242, .45); } body.cyber .nav-cta:hover { background: #6B42D9; box-shadow: 0 0 24px rgba(122, 79, 242, .65); } /* scrollspy: подчёркивание пункта текущей секции */ body.cyber .nav-links a { position: relative; } body.cyber .nav-links a.spy-active { color: #fff; } body.cyber .nav-links a.spy-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: #7A4FF2; border-radius: 2px; } /* ---------- hero: декор позади и едва заметен ---------- */ body.cyber .hero { position: relative; overflow: hidden; background: transparent; padding-top: 150px; } body.cyber .hero > .wrap { position: relative; z-index: 1; } .hero-mountain { position: absolute; left: -4%; right: -4%; bottom: 0; top: auto; height: 96%; z-index: 0; pointer-events: none; opacity: .68; transition: transform .25s ease-out; will-change: transform; animation: mt-in 1.6s cubic-bezier(.16, 1, .3, 1) both; } @keyframes mt-in { from { opacity: 0; transform: translateY(28px); } to { opacity: .68; transform: none; } } /* лёгкая цветная дымка — глубоко позади, как у Raycast */ body.cyber .hero::before { content: ""; position: absolute; width: 980px; height: 700px; left: 50%; top: 4%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(122, 79, 242, .17), rgba(122, 79, 242, .06) 55%, transparent 78%); pointer-events: none; } /* ступенчатое, но быстрое появление hero-контента: текст виден почти сразу */ body.cyber .hero .wrap > .reveal { transition-duration: .45s; } body.cyber .hero .wrap > *:nth-child(2) { transition-delay: .05s; } body.cyber .hero .wrap > *:nth-child(3) { transition-delay: .1s; } body.cyber .hero .wrap > *:nth-child(4) { transition-delay: .15s; } body.cyber .hero .wrap > *:nth-child(5) { transition-delay: .2s; } body.cyber .hero-proof { margin-top: 34px; } body.cyber .hero-proof span { color: var(--ink-3); font-size: 13px; } body.cyber .hero-proof span::before { color: #8a8f98; } body.cyber .hero-secondary { color: var(--ink-2); font-size: 14px; } body.cyber .hero-secondary:hover { color: #fff; text-decoration: none; } body.cyber .nda-note { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; } body.cyber a.nda-note:hover { color: #fff; } /* ---------- секции: плотнее по вертикали, тексты на всю ширину, выключка влево ---------- */ body.cyber .section { background: transparent; position: relative; padding: 64px 22px; } body.cyber .hero { padding-bottom: 56px; } body.cyber .section .sub { max-width: none !important; } body.cyber .live-demo { margin-top: 36px; } /* NDA-чекбокс в форме заявки */ body.cyber .nda-accept { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; cursor: pointer; color: var(--ink-2); font-size: 14px; line-height: 1.5; } body.cyber .nda-accept input { margin-top: 3px; accent-color: #7A4FF2; } body.cyber .nda-accept a { color: #b39df7; } body.cyber .section-alt { background: #0d0e11; } body.cyber .section-dark { background: #0B0C0E; border-top: 1px solid rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .05); } body.cyber .how-head { padding-bottom: 24px; } /* появление контента: мягче и медленнее, как у Linear */ body.cyber .reveal { transition-duration: .6s; transition-timing-function: cubic-bezier(.16, 1, .3, 1); } /* навигация по якорям: мгновенный переход (Linear-стиль) вместо долгой прокрутки */ html:has(body.cyber) { scroll-behavior: auto; } /* заголовки секций не прячутся под навом и лентой при переходе из меню */ body.cyber section[id], body.cyber .stat-panel[id] { scroll-margin-top: 84px; } /* sticky-лента живёт только внутри своей зоны и отлипает после неё */ .how-zone { position: relative; } /* тарифы всегда в один ряд на десктопе */ @media (min-width: 641px) { body.cyber .pricing { grid-template-columns: repeat(3, 1fr); } } /* выделенный тариф - Solo с бейджем «Большинство начинают здесь» */ body.cyber .price-badge.badge-solo { background: #7A4FF2; color: #fff; } /* персонаж в живом демо: лёгкая виньетка-подсветка, чтобы не терялся на тёмном */ body.cyber .ld-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 62%, transparent 55%, rgba(0, 0, 0, .28) 100%); } body.cyber .ld-frame { position: relative; } /* вариация в середине страницы: «Экономика» на чуть более светлой подложке */ body.cyber #economics { background: #101216; border-top: 1px solid rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .06); } /* ---------- карточки: поверхность + волосяная рамка ---------- */ body.cyber .card, body.cyber .price-card, body.cyber .proj-card, body.cyber .dir-card, body.cyber .team-card, body.cyber .acc-item, body.cyber .vibe-strip, body.cyber .apply-form, body.cyber .compare-cell { background: #121417; border: 1px solid rgba(255, 255, 255, .07); box-shadow: none; transition: border-color .2s ease, background .2s ease; } body.cyber .card:hover, body.cyber .dir-card:hover, body.cyber .proj-card:hover, body.cyber .team-card:hover { border-color: rgba(255, 255, 255, .16); background: #14171b; transform: none; } body.cyber .card-dark { background: #121417; } body.cyber .card .icon { background: rgba(255, 255, 255, .05); } body.cyber .icon svg, body.cyber .d-ic svg { color: #b39df7; } body.cyber .dir-card { border-top: 1px solid rgba(255, 255, 255, .07); } body.cyber .proj-card .p-tag { background: rgba(122, 79, 242, .15); color: #a7aef0; } body.cyber .team-card .t-role { color: #8a8f98; text-transform: uppercase; font-size: 11px; letter-spacing: .08em; } /* ---------- лента «Как это работает» ---------- */ /* ---------- модальная заявка: форма доступна с любой кнопки «Занять место» ---------- */ .apply-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 18px; } .apply-modal[hidden] { display: none; } .am-backdrop { position: absolute; inset: 0; background: rgba(5, 6, 8, .72); backdrop-filter: blur(6px); } .am-box { position: relative; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; background: #101114; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 28px 26px 24px; box-shadow: 0 24px 80px rgba(0, 0, 0, .5); } .am-box h3 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: #f7f8f8; } .am-sub { color: var(--ink-2); font-size: 14px; margin: 8px 0 18px; } .am-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; background: rgba(255, 255, 255, .06); border: 0; border-radius: 9px; color: var(--ink-2); font-size: 15px; cursor: pointer; } .am-close:hover { color: #fff; background: rgba(255, 255, 255, .12); } /* в модалке форма видима сразу — reveal-анимация секции здесь не действует */ .am-box .reveal { opacity: 1 !important; transform: none !important; } .am-box .apply-form { margin-top: 0; } /* полоса вкладок НЕ прилипает при скролле — требование ПМ от 20.08 */ body.cyber .stats { background: #0B0C0E; border-top: 1px solid rgba(255, 255, 255, .07); border-bottom: 1px solid rgba(255, 255, 255, .07); gap: 1px; position: static; } body.cyber button.stat { background: #101114; padding: 34px 22px; transition: background .2s ease, box-shadow .2s ease, padding .25s ease; } body.cyber button.stat b { color: #f7f8f8; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: -0.015em; } body.cyber button.stat span { color: var(--ink-3); font-size: 13.5px; } body.cyber button.stat:hover { background: #14161a; } body.cyber .stat-arrow { color: var(--ink-3); font-style: normal; font-weight: 300; font-size: 18px; transition: transform .3s ease, color .2s ease; } body.cyber button.stat:hover .stat-arrow { color: #fff; } /* активная вкладка сливается с панелью: общий фон + одна индиго-линия СНИЗУ, переходящая в панель (двух параллельных полос быть не должно) */ body.cyber button.stat.active { background: #12141a; box-shadow: inset 0 -2px 0 #7A4FF2; } body.cyber button.stat.active b { color: #fff; } body.cyber button.stat.active .stat-arrow { transform: rotate(45deg); color: #b39df7; } body.cyber .stat-panel, body.cyber .stat-panel.section-alt, body.cyber .stat-panel.section-dark { background: #12141a; border-bottom: 1px solid rgba(255, 255, 255, .07); position: relative; padding: 48px 22px 56px; } body.cyber .stat-panel .reveal { opacity: 1; transform: none; } /* вложенность: суб-блок мельче основного, текст на всю ширину */ body.cyber .stat-panel .headline { font-size: clamp(21px, 2.2vw, 29px); } body.cyber .stat-panel .sub { font-size: 15px; max-width: none !important; } body.cyber .stat-panel .acc-title b { font-size: 15.5px; } body.cyber .stat-panel .acc-body { font-size: 14.5px; } /* аккордеон станций */ body.cyber .acc-item[open] > summary { background: rgba(255, 255, 255, .04); } body.cyber .acc-num { background: rgba(255, 255, 255, .06); color: #a7aef0; } body.cyber .acc-item[open] .acc-num { background: #7A4FF2; color: #fff; } body.cyber .acc-title span { color: var(--ink-2); } body.cyber .tl-artifact { color: #b39df7; } body.cyber .cp-chip { color: #d3a95d; border-color: rgba(211, 169, 93, .35); } /* сравнение «не курс» */ body.cyber .compare-no { background: #0d0e11; color: var(--ink-3); } body.cyber .compare-yes { background: #121417; color: #f7f8f8; } body.cyber .compare-yes b { color: #b39df7; } /* ---------- живое демо ---------- */ body.cyber .ld-frame { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 80px rgba(0, 0, 0, .5); border-radius: 12px; } body.cyber .ld-note { color: var(--ink-3); font-size: 13.5px; } /* ---------- тарифы ---------- */ body.cyber .price-card.featured { border-color: rgba(122, 79, 242, .55); box-shadow: 0 0 0 1px rgba(122, 79, 242, .35); } body.cyber .price-badge { background: #7A4FF2; } body.cyber .price-card li { border-bottom-color: rgba(255, 255, 255, .06); } body.cyber .price-card li .tick { color: #8a8f98; } body.cyber .price-card .amount { color: #f7f8f8; } /* ---------- FAQ ---------- */ body.cyber .faq details { border-bottom-color: rgba(255, 255, 255, .08); } body.cyber .faq summary { font-size: 17px; } /* ---------- форма ---------- */ body.cyber .field input, body.cyber .field textarea, body.cyber .field select { background: #0B0C0E; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; color: #f7f8f8; } body.cyber .field input:focus, body.cyber .field textarea:focus, body.cyber .field select:focus { border-color: #7A4FF2; box-shadow: 0 0 0 3px rgba(122, 79, 242, .22); } body.cyber .field input::placeholder, body.cyber .field textarea::placeholder { color: var(--ink-3); } body.cyber .field select option { background: #121417; } body.cyber .field label { color: var(--ink-2); font-size: 13.5px; } /* ---------- вайб-чек и футер ---------- */ body.cyber .vibe-strip b { color: #f7f8f8; } body.cyber .footer { background: #08090A; border-top: 1px solid rgba(255, 255, 255, .06); color: var(--ink-3); } @media (max-width: 768px) { .hero-mountain { transform: none !important; } } /* ---------- мобильная полировка ---------- */ @media (max-width: 640px) { body.cyber .display { font-size: clamp(26px, 7.4vw, 30px); line-height: 1.12; } body.cyber .display br { display: none; } /* переносы решает экран, а не разметка */ body.cyber .headline { font-size: clamp(22px, 6vw, 26px); } body.cyber .sub { font-size: 15.5px; } body.cyber .hero { padding: 132px 18px 40px; } body.cyber .hero .sub { margin-top: 18px; } body.cyber .hero-cta { margin-top: 26px; } body.cyber .section { padding: 44px 18px; } body.cyber .btn-lg { padding: 13px 22px; font-size: 15.5px; } /* гора на телефоне: meet масштабирует по ширине, поэтому делаем контейнер шире экрана и сажаем в центр hero — пирамида крупная, а не полоска внизу */ .hero-mountain { opacity: .58; left: -30%; right: -30%; top: 34px; bottom: auto; height: 104vw; } @keyframes mt-in { from { opacity: 0; transform: translateY(28px); } to { opacity: .58; transform: none; } } body.cyber .hero-proof { gap: 8px 18px; margin-top: 24px; } /* липкая лента на телефоне съедает пол-экрана — отключаем прилипание */ body.cyber .stats { position: static; } body.cyber button.stat { padding: 22px 14px; } body.cyber .stat-panel { padding: 34px 18px 40px; } } @media (prefers-reduced-motion: reduce) { .hero-mountain { animation: none; } .hero-mountain #ascentPath, .hero-mountain .peak-node { animation: none !important; } } /* Тариф в форме заявки: пришёл с карточки - показываем строкой, а не селектом, чтобы не переспрашивать человека о том, что он только что выбрал. */ body.cyber .af-tariff-set { margin: 4px 0 2px; padding: 10px 14px; border-radius: 10px; background: rgba(122, 79, 242, .12); border: 1px solid rgba(122, 79, 242, .35); font-size: 14px; color: #cfd3e6; } body.cyber .af-tariff-set b { color: #fff; } body.cyber .af-tariff-change { margin-left: 10px; padding: 0; border: none; background: none; cursor: pointer; font: inherit; font-size: 13px; color: #a98cf7; text-decoration: underline; } body.cyber .af-tariff-change:hover { color: #b3b8ff; } /* ---------- переключатель языка ---------- */ body.cyber .lang-switch { display: inline-flex; gap: 2px; margin-left: 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 2px; } body.cyber .lang-switch button { border: none; background: none; cursor: pointer; font: inherit; font-size: 12.5px; color: #9aa0ae; padding: 4px 10px; border-radius: 999px; line-height: 1.4; } body.cyber .lang-switch button:hover { color: #fff; } body.cyber .lang-switch button.on { background: #7A4FF2; color: #fff; } /* ---------- арабский: зеркальная вёрстка ---------- Меняем только направление и то, что жёстко прижато к левому краю. Латиница и цифры внутри арабского текста разворачиваются сами по правилам двунаправленного письма - вручную их трогать не нужно. */ [dir="rtl"] body, [dir="rtl"] .wrap, [dir="rtl"] .wrap-narrow { text-align: right; } /* ⚠️ row-reverse при dir=rtl НЕ нужен: flex сам течёт справа налево, а row-reverse поверх этого возвращает латинский порядок */ [dir="rtl"] .lang-switch { margin-left: 0; margin-right: 14px; } [dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 18px; } [dir="rtl"] .price-card ul li, [dir="rtl"] .hero-proof span, [dir="rtl"] .acc-item { text-align: right; } [dir="rtl"] .tick { margin-left: 8px; margin-right: 0; } [dir="rtl"] .acc-num { margin-left: 14px; margin-right: 0; } [dir="rtl"] .nda-accept, [dir="rtl"] .field label { text-align: right; } [dir="rtl"] .nda-accept input { margin-left: 8px; margin-right: 0; } [dir="rtl"] .af-tariff-change { margin-left: 0; margin-right: 10px; } /* центрированные блоки остаются центрированными */ [dir="rtl"] .center, [dir="rtl"] .hero, [dir="rtl"] .hero .wrap { text-align: center; } /* раскрытая панель ленты и аккордеона: текст вправо, бордеры зеркально */ [dir="rtl"] .live-detail, [dir="rtl"] .acc-body { text-align: right; } [dir="rtl"] .faq-q { text-align: right; } [dir="rtl"] .sub, [dir="rtl"] .eyebrow { text-align: inherit; }