/* 1. Шрифты загружаются через в каждой страницы — быстрее чем @import */
:root {
/* Типографика */
--font-display: 'Unbounded', ui-sans-serif, sans-serif;
--font-ui: 'DM Sans', ui-sans-serif, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* Фон (тёмная тема — основная, совпадает с фоном логотипа) */
--bg: #141414;
--bg2: #1b1b1b;
--bg3: #212121;
--bg-elevated: #272727;
/* Текст */
--text: #fdfdfd;
--muted: #9a9a9a;
--hint: #5c5c5c;
/* Бренд / акцент — золото логотипа */
--gold: #f6bd3a;
--gold-soft: #ffd673;
--gold-bg: rgba(246, 189, 58, 0.10);
/* Adervis CRM — отдельный продукт, фирменный градиент (фиолетовый → сиреневый) */
--c-crm-1: #6c00ff;
--c-crm-2: #9b4dff;
--crm-gradient: linear-gradient(120deg, var(--c-crm-1) 0%, var(--c-crm-2) 100%);
--crm-bg: rgba(108, 0, 255, 0.10);
--glow-crm: 0 0 48px rgba(155, 77, 255, 0.38);
/* Спектр направлений (цвет-код услуг): видео — красный, дизайн — фиолетовый, фото — золото, ИИ — зелёный */
--c-video: #F52424;
--c-design: #7733FF;
--c-photo: #F5B72B;
--c-ai: #22CC54;
/* Структура */
--line: rgba(253, 253, 253, 0.10);
--glass: rgba(20, 20, 20, 0.85);
--shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
--glow-gold: 0 0 48px rgba(246, 189, 58, 0.28);
/* Отступы (шкала 4px) */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-14: 56px;
--sp-16: 64px;
/* Радиусы */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
}
/* ═══════════════════════════════════════════════════════════════
Светлая тема — чистый белый, не бежевый
═══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
/* Фон */
--bg: #ffffff;
--bg2: #f5f5f5;
--bg3: #eeeeee;
--bg-elevated: #ffffff;
/* Текст */
--text: #111111;
--muted: #555555;
--hint: #999999;
/* Структура */
--glass: rgba(255, 255, 255, 0.92);
--line: rgba(0, 0, 0, 0.08);
--shadow: 0 24px 64px rgba(0, 0, 0, 0.07);
/* Глоу мягче на светлом фоне */
--glow-gold: 0 0 48px rgba(246, 189, 58, 0.38);
--glow-crm: 0 0 48px rgba(108, 0, 255, 0.16);
/* home.css tokens (lh-*) */
--lh-bg: #ffffff;
--lh-s1: #f5f5f5;
--lh-s2: #eeeeee;
--lh-s3: #e5e5e5;
--lh-text: #111111;
--lh-muted: rgba(0, 0, 0, 0.50);
--lh-faint: rgba(0, 0, 0, 0.10);
--lh-border: rgba(0, 0, 0, 0.06);
}
/* Nav — цвета захардкожены, переопределяем явно */
[data-theme="light"] .pill-nav__link {
color: rgba(0, 0, 0, 0.50);
}
[data-theme="light"] .pill-nav__link:hover {
color: var(--text);
background: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .pill-nav__link.nav-active {
color: #111111;
}
[data-theme="light"] .pill-nav__menu {
background: rgba(255, 255, 255, 0.98);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .pill-nav__item {
color: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .pill-nav__item:hover {
color: var(--text);
background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .pill-nav__tubelight {
background: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .pill-nav__tubelight::after {
background: var(--gold);
box-shadow:
0 0 8px 3px rgba(246, 189, 58, 0.65),
0 0 18px 6px rgba(246, 189, 58, 0.35),
0 0 34px 10px rgba(246, 189, 58, 0.18);
}
[data-theme="light"] .site-header {
background: rgba(255, 255, 255, 0.88);
border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .site-header.is-scrolled {
background: rgba(255, 255, 255, 0.96);
}
[data-theme="light"] .nav-toggle {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .nav-toggle span {
background: rgba(0, 0, 0, 0.65);
}
@media (max-width: 860px) {
[data-theme="light"] .pill-nav {
background: rgba(255, 255, 255, 1);
box-shadow: none;
}
[data-theme="light"] .pill-nav__link {
color: rgba(0, 0, 0, 0.65);
}
[data-theme="light"] .pill-nav__menu {
background: rgba(0, 0, 0, 0.03);
border-color: rgba(0, 0, 0, 0.06);
}
}
/* ═══════════════════════════════════════════════════════════════
Кнопка переключения тёмной/светлой темы
═══════════════════════════════════════════════════════════════ */
.theme-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.09);
color: rgba(255, 255, 255, 0.65);
cursor: pointer;
padding: 0;
transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
flex-shrink: 0;
}
.theme-toggle:hover {
background: rgba(255, 255, 255, 0.11);
border-color: rgba(255, 255, 255, 0.16);
color: #fff;
transform: scale(1.07);
}
[data-theme="light"] .theme-toggle {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.10);
color: rgba(26, 24, 19, 0.60);
}
[data-theme="light"] .theme-toggle:hover {
background: rgba(0, 0, 0, 0.09);
color: var(--text);
transform: scale(1.07);
}
/* Иконки в кнопке — нужная видна, другая скрыта */
.theme-toggle__icon {
position: absolute;
transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="dark"] .theme-toggle__sun {
opacity: 0;
transform: scale(0.5) rotate(-60deg);
}
[data-theme="dark"] .theme-toggle__moon {
opacity: 1;
transform: scale(1) rotate(0deg);
}
[data-theme="light"] .theme-toggle__sun {
opacity: 1;
transform: scale(1) rotate(0deg);
}
[data-theme="light"] .theme-toggle__moon {
opacity: 0;
transform: scale(0.5) rotate(60deg);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-ui);
background: var(--bg);
color: var(--text);
line-height: 1.6;
min-height: 100vh;
}
/* Базовые элементы */
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0 0 var(--sp-4);
}
p {
margin: 0 0 var(--sp-4);
}
a {
color: inherit;
}
.container {
width: min(1400px, calc(100% - 48px));
margin: 0 auto;
}
.text-gradient {
color: var(--gold);
}
/* Кнопки */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 120px;
min-height: 44px;
padding: 12px 24px;
border-radius: var(--radius-md);
text-decoration: none;
font-weight: 600;
font-size: 14px;
border: 1px solid var(--line);
background: var(--bg3);
color: var(--text);
transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.btn.primary {
background: var(--gold);
border-color: transparent;
color: #141414;
}
.btn:hover {
transform: translateY(-2px);
border-color: rgba(246, 189, 58, 0.4);
}
.btn.primary:hover {
box-shadow: var(--glow-gold);
}
/* Обёртка хедера не должна формировать containing block для sticky-шапки —
иначе у неё нет «запаса высоты», чтобы прилипать при скролле (она остаётся в потоке) */
#header-placeholder {
display: contents;
}
/* ═══════════════════════════════════════════════════════════════
Шапка — сплошная solid-bar, видна с первого пикселя
═══════════════════════════════════════════════════════════════ */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
padding: 10px 32px;
pointer-events: none;
overflow: visible;
/* Нижняя граница — тонкая линия */
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(10, 10, 10, 0.82);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
transition: background 0.3s ease;
}
/* Gradient line — убрана, используем border-bottom */
.site-header::after { display: none; }
.site-header.is-scrolled {
background: rgba(8, 8, 8, 0.92);
}
.site-header.is-scrolled .site-header__bar {
padding: 4px 0;
}
.site-header__bar {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1400px;
width: 100%;
margin: 0 auto;
pointer-events: all;
gap: 20px;
}
/* pill-nav центрируется — занимает оставшееся место между лого и CTA */
/* Лого */
.brand {
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--text);
flex-shrink: 0;
}
.site-header__logo img {
height: 32px;
width: auto;
display: block;
filter: drop-shadow(0 0 16px rgba(246,189,58,0.22));
transition: filter 0.25s;
}
.brand:hover .site-header__logo img,
.site-header__logo:hover img {
filter: drop-shadow(0 0 22px rgba(246,189,58,0.45));
}
/* ─── Центральный pill — центрирован в шапке, без подложки ─── */
.pill-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
flex: 1;
position: relative; /* required — tubelight uses position:absolute */
border-radius: 100px;
padding: 5px 8px;
max-width: 700px;
}
.pill-nav__link {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 14px;
border-radius: 100px;
font-family: var(--font-display);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.52);
text-decoration: none;
transition: color 0.2s, background 0.2s;
white-space: nowrap;
cursor: pointer;
background: none;
border: none;
line-height: 1;
}
.pill-nav__link:hover {
color: #fff;
background: rgba(255, 255, 255, 0.07);
}
.pill-nav__link.nav-active {
color: var(--gold);
background: rgba(246, 189, 58, 0.10);
}
.pill-nav__arrow {
display: inline-block;
transition: transform 0.2s;
pointer-events: none;
}
/* ─── Dropdown ─── */
.pill-nav__dropdown {
position: relative;
}
.pill-nav__dropdown:hover .pill-nav__arrow,
.pill-nav__dropdown.is-open .pill-nav__arrow {
transform: rotate(180deg);
}
.pill-nav__menu {
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(-8px);
background: rgba(14, 14, 14, 0.96);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 8px;
min-width: 185px;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 10;
}
.pill-nav__menu::before {
content: '';
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 16px;
}
.pill-nav__dropdown:hover .pill-nav__menu,
.pill-nav__dropdown.is-open .pill-nav__menu {
opacity: 1;
pointer-events: all;
transform: translateX(-50%) translateY(0);
}
.pill-nav__item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
font-family: var(--font-ui);
font-size: 13px;
color: rgba(255, 255, 255, 0.60);
text-decoration: none;
border-radius: 10px;
transition: color 0.18s, background 0.18s;
}
.pill-nav__item:hover {
color: #fff;
background: rgba(255, 255, 255, 0.07);
}
.pill-nav__item-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
opacity: 0.85;
}
/* ═══════════════════════════════════════════════════════════════
Мега-дропдаун (image2 style) — вертикальный список с иконками
═══════════════════════════════════════════════════════════════ */
.nav-mega {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(-8px);
width: 320px;
background: rgba(10, 10, 10, 0.98);
backdrop-filter: blur(28px) saturate(1.4);
-webkit-backdrop-filter: blur(28px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
padding: 8px;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 10;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.04);
}
.nav-mega::before {
content: '';
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 18px;
}
.pill-nav__dropdown:hover .nav-mega,
.pill-nav__dropdown.is-open .nav-mega {
opacity: 1;
pointer-events: all;
transform: translateX(-50%) translateY(0);
}
/* Строка пункта */
.nav-mega__item {
display: flex;
align-items: center;
gap: 14px;
padding: 11px 14px;
border-radius: 12px;
text-decoration: none;
color: rgba(255, 255, 255, 0.62);
transition: background 0.16s, color 0.16s;
cursor: pointer;
position: relative;
}
.nav-mega__item:hover {
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
/* Разделитель между пунктами */
.nav-mega__item + .nav-mega__item {
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.nav-mega__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
transition: background 0.16s;
}
.nav-mega__item:hover .nav-mega__icon {
background: rgba(255, 255, 255, 0.09);
}
.nav-mega__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.nav-mega__name {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.88);
line-height: 1.2;
}
.nav-mega__sub {
font-family: var(--font-ui);
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-mega__count {
font-family: var(--font-mono);
font-size: 11px;
color: rgba(255, 255, 255, 0.28);
flex-shrink: 0;
}
.nav-mega__badge {
font-family: var(--font-ui);
font-size: 10px;
padding: 2px 8px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.38);
flex-shrink: 0;
}
.nav-mega__badge--live {
background: rgba(34, 197, 94, 0.14);
color: #22c55e;
}
/* Light theme overrides */
[data-theme="light"] .nav-mega {
background: rgba(245, 243, 238, 0.99);
border-color: rgba(0, 0, 0, 0.07);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .nav-mega__item {
color: rgba(26, 24, 19, 0.60);
}
[data-theme="light"] .nav-mega__item:hover {
background: rgba(0, 0, 0, 0.04);
color: var(--text);
}
[data-theme="light"] .nav-mega__item + .nav-mega__item {
border-top-color: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .nav-mega__icon {
background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .nav-mega__name {
color: rgba(26, 24, 19, 0.88);
}
[data-theme="light"] .nav-mega__sub {
color: rgba(26, 24, 19, 0.38);
}
[data-theme="light"] .nav-mega__count {
color: rgba(26, 24, 19, 0.30);
}
[data-theme="light"] .nav-mega__badge {
background: rgba(0, 0, 0, 0.05);
color: rgba(26, 24, 19, 0.40);
}
/* Mobile: мега-дропдаун как обычный список */
@media (max-width: 860px) {
.nav-mega {
position: static;
transform: none !important;
opacity: 1;
pointer-events: all;
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 14px;
margin-top: 4px;
display: none;
box-shadow: none;
backdrop-filter: none;
}
.pill-nav__dropdown.is-open .nav-mega { display: block; }
.nav-mega__icon { display: none; }
.nav-mega__sub { display: none; }
}
/* ─── Tubelight indicator ─── */
.pill-nav__tubelight {
position: absolute;
top: 5px;
left: 8px;
height: calc(100% - 10px);
width: 80px;
background: rgba(255, 255, 255, 0.07);
border-radius: 100px;
pointer-events: none;
z-index: 0;
opacity: 0; /* hidden until JS positions it — prevents top-left flash */
transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
width 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.18s ease;
transform: translateX(0);
}
/* Tube glow — светящаяся линия снизу активного пункта */
.pill-nav__tubelight::after {
content: '';
position: absolute;
bottom: -2px;
left: 20%;
right: 20%;
height: 2px;
background: rgba(108, 0, 255, 0.85);
border-radius: 100px;
box-shadow:
0 0 8px 3px rgba(108, 0, 255, 0.55),
0 0 18px 6px rgba(108, 0, 255, 0.30),
0 0 34px 10px rgba(108, 0, 255, 0.15);
opacity: 0.9;
}
/* Активная ссылка — отображается поверх индикатора */
.pill-nav__link {
position: relative;
z-index: 1;
}
/* Убираем старый solid-фон у nav-active (заменён tubelight) */
.pill-nav__link.nav-active {
color: #ffffff;
background: transparent;
}
/* Scroll-spy активная секция — чуть ярче текст */
.pill-nav__link.nav-spy-active {
color: var(--gold);
}
/* ─── CTA + правый блок ─── */
.site-header__end {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
/* Telegram — быстрый контакт в шапке */
.site-header__tg {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 13px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 100px;
color: var(--text);
font-size: 12px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s, border-color 0.2s;
flex-shrink: 0;
}
.site-header__tg:hover {
background: rgba(41,182,246,0.15);
border-color: rgba(41,182,246,0.4);
color: #29b6f6;
}
.site-header__tg svg { flex-shrink: 0; }
@media (max-width: 900px) { .site-header__tg span { display: none; } .site-header__tg { padding: 8px; } }
/* Telegram-иконку оставляем видимой на узких экранах — единственный быстрый контакт в шапке */
@media (max-width: 640px) { .site-header__tg { padding: 8px; } }
/* ADERVIS PLATFORM — CTA-кнопка с дропдауном продуктов */
.site-header__platform {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px 8px 16px;
background: var(--gold);
color: #141414;
font-family: var(--font-display);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
text-decoration: none;
border: none;
border-radius: 100px;
cursor: pointer;
white-space: nowrap;
transition: box-shadow 0.2s, transform 0.2s;
flex-shrink: 0;
}
.site-header__platform:hover {
box-shadow: 0 0 28px rgba(246,189,58,0.5);
transform: translateY(-1px);
}
.site-header__platform .pill-nav__arrow {
color: rgba(20,20,20,0.65);
}
/* Ресет button-тега для platform-кнопки */
button.site-header__platform {
font-family: var(--font-display);
font-size: 9.5px;
font-weight: 700;
}
/* Дропдаун с правым выравниванием (для элементов в site-header__end) */
.nav-mega--right {
left: auto;
right: 0;
transform: translateY(-8px);
}
.pill-nav__dropdown:hover .nav-mega--right,
.pill-nav__dropdown.is-open .nav-mega--right {
transform: translateY(0);
opacity: 1;
pointer-events: all;
}
/* ─── Мобильный бургер ─── */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
cursor: pointer;
padding: 0;
transition: background 0.2s;
}
.nav-toggle span {
display: block;
width: 18px;
height: 1.5px;
background: rgba(255,255,255,0.7);
border-radius: 2px;
transition: transform 0.25s, opacity 0.2s, width 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* ── Мобильная навигация: слайд-панель справа ── */
.nav-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
z-index: 299;
cursor: pointer;
}
.nav-backdrop.is-visible { opacity: 1; visibility: visible; }
@media (max-width: 860px) {
/* backdrop-filter создаёт containing block для position:fixed →
убираем на мобильных, иначе pill-nav не покрывает весь экран */
.site-header {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(10,10,10,0.97) !important;
}
/* nav-backdrop находится вне site-header (z-index:200) и сам имеет z-index:299.
backdrop-filter на нём размывает всё что ниже — включая pill-nav внутри header.
Убираем blur: тёмный rgba-overlay и так создаёт нужное затемнение. */
.nav-backdrop {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Скрываем floating CTA когда мобильное меню открыто */
body.nav-open .floating-cta {
display: none !important;
}
/* Бургер поверх всего меню */
.nav-toggle {
display: flex !important;
position: relative;
z-index: 1001;
}
.site-header__platform { display: none; }
.site-header__tg { display: none; }
#dropPlatform { display: none; }
#tubeIndicator { display: none; }
/* Полноэкранное меню — fade + slide up */
.pill-nav {
position: fixed;
inset: 0;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 0;
padding: 80px 24px 48px;
background: rgba(9,9,9,0.98);
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 1000;
overflow-y: auto;
}
.pill-nav.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: all;
}
.pill-nav__tubelight { display: none; }
/* Ссылки — крупные, по центру */
.pill-nav__link {
font-size: 22px;
font-weight: 700;
padding: 14px 24px;
border-radius: 12px;
color: rgba(255,255,255,0.75);
width: 100%;
max-width: 320px;
text-align: center;
letter-spacing: -0.02em;
transition: background 0.15s, color 0.15s;
}
.pill-nav__link:hover,
.pill-nav__link.nav-active { background: rgba(255,255,255,0.07); color: #fff; }
.pill-nav__dropdown { width: 100%; max-width: 320px; }
/* Аккордеон — Услуги */
.pill-nav__link--drop {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 320px;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 22px;
font-weight: 700;
color: rgba(255,255,255,0.75);
padding: 14px 24px;
border-radius: 12px;
letter-spacing: -0.02em;
transition: background 0.15s, color 0.15s;
}
.pill-nav__link--drop:hover { background: rgba(255,255,255,0.07); color: #fff; }
.pill-nav__arrow { transition: transform 0.22s; flex-shrink: 0; }
.pill-nav__dropdown.is-open .pill-nav__arrow { transform: rotate(180deg); }
/* nav-mega — аккордеон подменю */
.nav-mega {
position: static !important;
transform: none !important;
opacity: 1 !important;
pointer-events: all !important;
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
margin: 4px 0 8px;
display: none;
box-shadow: none;
backdrop-filter: none !important;
padding: 6px 0;
min-width: unset !important;
}
.pill-nav__dropdown.is-open .nav-mega { display: block; }
.nav-mega__item { padding: 12px 20px; gap: 12px; }
.nav-mega__item + .nav-mega__item { border-top: 1px solid rgba(255,255,255,0.05); }
.nav-mega__icon { width: 26px; height: 26px; flex-shrink: 0; }
.nav-mega__name { font-size: 15px; font-weight: 600; }
.nav-mega__sub { display: none; }
.nav-mega__badge { display: none; }
/* Platform-ссылка появляется только в мобильном меню */
.pill-nav__link--platform-mobile {
display: block;
margin-top: 4px;
font-size: 14px !important;
font-weight: 600 !important;
padding: 10px 24px !important;
letter-spacing: 0.02em !important;
opacity: 0.8;
}
.pill-nav__link--platform-mobile:hover { opacity: 1; }
}
/* Кастомный курсор скрываем на тач-устройствах */
@media (hover: none), (pointer: coarse) {
.cursor-ring, .cursor-dot { display: none !important; }
}
#header-placeholder { display: contents; }
/* Отступ под фиксированную шапку на inner-страницах */
.page-top { padding-top: 80px; }
/* Hero */
/* ─── Фоновое видео в hero (страница /video) ─── */
.hero-vbg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.hero-section .hero-vbg {
position: absolute; /* восстанавливаем — hero-section > * ставит relative */
z-index: 0;
}
.hero-vbg__video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: max(100%, 177.78vh);
height: max(100%, 56.25vw);
object-fit: cover;
opacity: 0.75;
}
/* Статичный фон-картинка (вместо видео) */
.hero-vbg--img {
background-size: cover;
background-position: center top;
opacity: 0.75;
}
.hero-vbg__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(to right, rgba(9,9,9,0.72) 15%, rgba(9,9,9,0.25) 70%),
linear-gradient(to top, rgba(9,9,9,0.92) 0%, transparent 35%),
linear-gradient(to bottom, rgba(9,9,9,0.55) 0%, transparent 18%);
}
@media (prefers-reduced-motion: reduce) {
.hero-vbg video { display: none; }
}
.hero-section {
position: relative;
overflow: hidden;
min-height: 100dvh;
display: flex;
flex-direction: column;
padding-top: var(--sp-16);
}
/* old gold aurora orbs removed — replaced by div.hero-aurora blobs in HTML */
.hero-section::before,
.hero-section::after { content: none; display: none; }
.hero-section > * {
position: relative;
z-index: 1;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: var(--sp-4);
}
.eyebrow::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 12px rgba(246, 189, 58, 0.7);
}
/* Hero eyebrow — minimal mono style to match dark tech background */
.hero-section .eyebrow {
gap: 10px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.10em;
color: rgba(255, 255, 255, 0.38);
}
.hero-section .eyebrow::before {
width: 20px;
height: 1px;
border-radius: 0;
background: var(--gold);
box-shadow: 0 0 8px rgba(246, 189, 58, 0.5);
}
.hero-section h1 {
font-size: clamp(38px, 5.8vw, 72px);
line-height: 1.06;
letter-spacing: -0.025em;
max-width: 700px;
}
.hero-section p {
color: rgba(255, 255, 255, 0.52);
font-size: 17px;
line-height: 1.7;
max-width: 520px;
margin-top: 20px;
}
/* ─── Hero Quiz — направление + подсказка + CTA (v2) ─── */
/* ─── Hero quiz v4: чипы на десктопе / список на мобайле ─── */
.hero-quiz {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 28px;
max-width: 560px;
}
/* Chips row — десктоп */
.hero-quiz__row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.hero-quiz__chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.hero-quiz__chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 13px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 100px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.45);
cursor: pointer;
transition: color 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.16s;
white-space: nowrap;
--cc: rgba(255,255,255,0.3);
}
.hero-quiz__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--cc);
flex-shrink: 0;
transition: box-shadow 0.22s, transform 0.22s;
}
.hero-quiz__chip:hover {
color: rgba(255,255,255,0.85);
background: rgba(255,255,255,0.07);
border-color: rgba(255,255,255,0.15);
transform: translateY(-1px);
}
.hero-quiz__chip.is-active {
color: #fff;
background: color-mix(in srgb, var(--cc) 12%, transparent);
border-color: color-mix(in srgb, var(--cc) 65%, transparent);
box-shadow: 0 0 18px -5px var(--cc);
}
.hero-quiz__chip.is-active .hero-quiz__dot {
box-shadow: 0 0 8px 2px var(--cc);
transform: scale(1.25);
}
/* CTA кнопка «Начать» */
.hero-quiz__cta {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
background: var(--gold);
color: #141414;
border-radius: 100px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
border: none;
cursor: pointer;
white-space: nowrap;
transition: box-shadow 0.22s, transform 0.18s;
flex-shrink: 0;
}
.hero-quiz__cta:hover:not(:disabled) {
box-shadow: var(--glow-gold);
transform: translateY(-1px);
}
.hero-quiz__cta:disabled {
opacity: 0.35;
cursor: not-allowed;
transform: none;
}
/* Мобильный список — скрыт на десктопе */
.hero-quiz__list {
display: none;
flex-direction: column;
gap: 5px;
}
.hero-quiz__list-item {
--cc: rgba(255,255,255,0.25);
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 10px;
cursor: pointer;
text-align: left;
color: var(--cc);
transition: background 0.2s, border-color 0.2s, transform 0.18s;
}
.hero-quiz__list-item span {
flex: 1;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: rgba(255,255,255,0.85);
}
.hero-quiz__list-arrow {
color: rgba(255,255,255,0.18);
flex-shrink: 0;
transition: color 0.18s, transform 0.18s;
}
.hero-quiz__list-item:hover {
background: color-mix(in srgb, var(--cc) 10%, transparent);
border-color: color-mix(in srgb, var(--cc) 50%, transparent);
transform: translateX(3px);
}
.hero-quiz__list-item:hover .hero-quiz__list-arrow {
color: var(--cc);
transform: translateX(2px);
}
/* Light theme */
[data-theme="light"] .hero-quiz__chip {
background: rgba(0,0,0,0.04);
border-color: rgba(0,0,0,0.08);
color: rgba(0,0,0,0.45);
}
[data-theme="light"] .hero-quiz__chip:hover { color: rgba(0,0,0,0.75); }
[data-theme="light"] .hero-quiz__chip.is-active { color: #000; }
[data-theme="light"] .hero-quiz__list-item {
background: rgba(0,0,0,0.03);
border-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .hero-quiz__list-item span { color: rgba(0,0,0,0.82); }
/* Переключение десктоп ↔ мобайл */
@media (max-width: 580px) {
.hero-quiz__row { display: none; }
.hero-quiz__list { display: flex; }
.hero-quiz { max-width: 100%; }
}
/* Platform-ссылка только для мобильного меню */
.pill-nav__link--platform-mobile {
display: none;
color: var(--gold) !important;
}
/* CTA button group — service page hero and contact sections */
.hero-buttons {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-3);
margin-top: var(--sp-6);
}
/* Inline KPI strip */
.hero-kpi-line {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 14px;
margin-top: 20px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.28);
}
.hero-kpi-line strong {
color: rgba(255, 255, 255, 0.55);
font-weight: 500;
}
.hero-kpi-sep {
color: rgba(255, 255, 255, 0.12);
user-select: none;
}
/* Light theme — hero quiz */
[data-theme="light"] .hero-quiz__label { color: rgba(0,0,0,0.38); }
[data-theme="light"] .hero-quiz__chip {
background: rgba(0,0,0,0.04);
border-color: rgba(0,0,0,0.08);
color: rgba(0,0,0,0.52);
}
[data-theme="light"] .hero-quiz__chip:hover {
color: #000;
background: rgba(0,0,0,0.07);
}
[data-theme="light"] .hero-quiz__chip.is-active { color: #000; }
[data-theme="light"] .hero-quiz__hint { color: rgba(0,0,0,0.40); }
[data-theme="light"] .hero-kpi-line { color: rgba(0,0,0,0.28); }
[data-theme="light"] .hero-kpi-line strong { color: rgba(0,0,0,0.55); }
[data-theme="light"] .hero-kpi-sep { color: rgba(0,0,0,0.12); }
/* Контент hero — мягкое появление снизу с каскадом */
@keyframes hero-in {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-section .eyebrow,
.hero-section h1,
.hero-section > .container p,
.hero-section .hero-buttons,
.hero-section .hero-quiz,
.hero-section .hero-kpi-line {
animation: hero-in 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.hero-section .eyebrow { animation-delay: 0ms; }
.hero-section h1 { animation-delay: 100ms; }
.hero-section > .container p { animation-delay: 200ms; }
.hero-section .hero-buttons { animation-delay: 300ms; }
.hero-section .hero-quiz { animation-delay: 320ms; }
.hero-section .hero-kpi-line { animation-delay: 440ms; }
/* Секции */
.section {
padding: var(--sp-16) 0;
border-top: 1px solid var(--line);
}
.section-head {
max-width: 640px;
margin-bottom: var(--sp-8);
}
.section-head .eyebrow {
margin-bottom: var(--sp-2);
}
.section-head h2 {
font-size: clamp(24px, 3vw, 32px);
}
.section-head p {
color: var(--muted);
font-size: 16px;
margin-bottom: 0;
}
/* Scroll-reveal анимация появления */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Лёгкий каскад появления карточек в сетках */
.stats-grid > .reveal:nth-child(2),
.services-grid > .reveal:nth-child(2),
.steps-grid > .reveal:nth-child(2),
.crm-feature-grid > .reveal:nth-child(2) { transition-delay: 90ms; }
.stats-grid > .reveal:nth-child(3),
.services-grid > .reveal:nth-child(3),
.steps-grid > .reveal:nth-child(3),
.crm-feature-grid > .reveal:nth-child(3) { transition-delay: 180ms; }
.stats-grid > .reveal:nth-child(4),
.services-grid > .reveal:nth-child(4),
.steps-grid > .reveal:nth-child(4),
.crm-feature-grid > .reveal:nth-child(4) { transition-delay: 270ms; }
/* Цифры о работе */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-6);
}
.stat-card {
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--sp-6);
transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card:hover {
border-color: rgba(246, 189, 58, 0.3);
transform: translateY(-4px);
}
.stat-number {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 32px;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: var(--gold);
margin-bottom: var(--sp-2);
}
.stat-label {
display: block;
color: var(--muted);
font-size: 14px;
line-height: 1.5;
}
/* Направления (карточки услуг) — цвет-код по DESIGN.md */
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-6);
}
.service-card {
--dir-color: var(--gold);
position: relative;
display: flex;
flex-direction: column;
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--sp-6);
color: var(--text);
text-decoration: none;
transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
/* Любой элемент с data-dir подхватывает цвет направления (карточки услуг, плейсхолдеры медиа и т.д.) */
[data-dir="video"] { --dir-color: var(--c-video); }
[data-dir="design"] { --dir-color: var(--c-design); }
[data-dir="photo"] { --dir-color: var(--c-photo); }
[data-dir="ai"] { --dir-color: var(--c-ai); }
.service-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, var(--dir-color), transparent 60%);
opacity: 0;
transition: opacity 0.25s ease;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.service-card:hover {
border-color: transparent;
transform: translateY(-4px);
box-shadow: 0 0 40px -12px var(--dir-color);
}
.service-card:hover::before {
opacity: 1;
}
.service-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--dir-color) 16%, transparent);
color: var(--dir-color);
margin-bottom: var(--sp-4);
}
.service-icon svg {
width: 22px;
height: 22px;
}
.service-card h3 {
font-size: 18px;
margin-bottom: var(--sp-2);
}
.service-card p {
color: var(--muted);
font-size: 14px;
line-height: 1.5;
flex-grow: 1;
margin: 0 0 var(--sp-4);
}
.service-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-size: 14px;
color: var(--dir-color);
}
.service-link svg {
width: 14px;
height: 14px;
transition: transform 0.2s ease;
}
.service-card:hover .service-link svg {
transform: translateX(3px);
}
/* Блок доверия / клиенты — реальные логотипы на светлых «чипах» (логотипы клиентов
приходят в разных цветах и стилях — от тёмных вордмарков до цветных эмблем,
светлая подложка одинаково хорошо показывает любой из них на тёмном фоне сайта) */
.trust-row {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
align-items: center;
padding-top: var(--sp-6);
margin-top: var(--sp-6);
border-top: 1px solid var(--line);
}
/* ═══════════════════════════════════════════════════════════════
Services 2×2 Editorial Grid (salo.uk-style)
═══════════════════════════════════════════════════════════════ */
.s4-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
border: 1px solid var(--line);
border-radius: 24px;
overflow: hidden;
min-height: 480px;
position: relative;
}
.s4-cell {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(24px, 3vw, 40px);
text-decoration: none;
color: var(--text);
border: 1px solid var(--line);
transition: background 0.25s, color 0.25s;
overflow: hidden;
}
.s4-cell:hover { background: var(--bg3); }
.s4-cell--video { grid-column: 1; grid-row: 1; }
.s4-cell--design { grid-column: 2; grid-row: 1; }
.s4-cell--photo { grid-column: 1; grid-row: 2; }
.s4-cell--ai { grid-column: 2; grid-row: 2; }
.s4-cell__color-bar {
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
opacity: 0;
transition: opacity 0.25s;
}
.s4-cell:hover .s4-cell__color-bar { opacity: 1; }
.s4-cell__body { flex: 1; }
.s4-cell__eyebrow {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
letter-spacing: 0.08em;
margin-bottom: 10px;
display: block;
}
.s4-cell__title {
font-family: var(--font-display);
font-size: clamp(22px, 2.5vw, 32px);
font-weight: 700;
line-height: 1.1;
margin: 0 0 12px;
letter-spacing: -0.02em;
}
.s4-cell__desc {
font-size: 13px;
line-height: 1.6;
color: var(--muted);
margin: 0 0 14px;
}
.s4-cell__services {
font-family: var(--font-mono);
font-size: 10px;
color: var(--hint);
letter-spacing: 0.06em;
}
.s4-cell__arrow {
align-self: flex-end;
font-size: 20px;
color: var(--muted);
transition: transform 0.2s, color 0.2s;
line-height: 1;
}
.s4-cell:hover .s4-cell__arrow {
transform: translate(4px, -4px);
color: var(--gold);
}
/* Центральный круглый бейдж — абсолютно поверх пересечения четырёх ячеек */
.s4-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 72px;
height: 72px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
transition: border-color 0.35s, box-shadow 0.35s;
}
.s4-center__ring {
position: absolute;
inset: -10px;
border-radius: 50%;
border: 1px solid rgba(246, 189, 58, 0.14);
animation: s4RingPulse 3s ease-in-out infinite;
transition: border-color 0.4s ease, box-shadow 0.4s ease;
pointer-events: none;
}
@keyframes s4RingPulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.12); opacity: 1; }
}
/* Бейдж и кольцо меняют цвет при наведении на ячейки */
.s4-center[data-hover="video"] { border-color: rgba(245, 36, 36, 0.55); box-shadow: 0 0 24px rgba(245, 36, 36, 0.30); }
.s4-center[data-hover="design"] { border-color: rgba(119, 51, 255, 0.60); box-shadow: 0 0 24px rgba(119, 51, 255, 0.34); }
.s4-center[data-hover="photo"] { border-color: rgba(245, 183, 43, 0.60); box-shadow: 0 0 24px rgba(245, 183, 43, 0.34); }
.s4-center[data-hover="ai"] { border-color: rgba(34, 204, 84, 0.55); box-shadow: 0 0 24px rgba(34, 204, 84, 0.30); }
.s4-center[data-hover="video"] .s4-center__ring { border-color: rgba(245, 36, 36, 0.30); }
.s4-center[data-hover="design"] .s4-center__ring { border-color: rgba(119, 51, 255, 0.35); }
.s4-center[data-hover="photo"] .s4-center__ring { border-color: rgba(245, 183, 43, 0.35); }
.s4-center[data-hover="ai"] .s4-center__ring { border-color: rgba(34, 204, 84, 0.30); }
/* SVG иконка — свечение цветом направления */
.s4-center__icon {
width: 32px;
height: 32px;
color: rgba(255,255,255,0.40);
position: relative;
z-index: 1;
transition: color 0.35s ease, filter 0.35s ease;
flex-shrink: 0;
}
.s4-center[data-hover="video"] .s4-center__icon { color: var(--c-video); filter: drop-shadow(0 0 8px var(--c-video)); }
.s4-center[data-hover="design"] .s4-center__icon { color: var(--c-design); filter: drop-shadow(0 0 8px var(--c-design)); }
.s4-center[data-hover="photo"] .s4-center__icon { color: var(--c-photo); filter: drop-shadow(0 0 8px var(--c-photo)); }
.s4-center[data-hover="ai"] .s4-center__icon { color: var(--c-ai); filter: drop-shadow(0 0 8px var(--c-ai)); }
@media (max-width: 860px) {
.s4-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
min-height: unset;
}
.s4-cell--video, .s4-cell--design, .s4-cell--photo, .s4-cell--ai {
grid-column: 1;
grid-row: auto;
}
.s4-center { display: none; }
}
/* ═══════════════════════════════════════════════════════════════
Сравнение вариантов (удалить после выбора)
═══════════════════════════════════════════════════════════════ */
.svc-compare-divider {
display: flex;
align-items: center;
gap: 20px;
width: min(1400px, calc(100% - 48px));
margin: 0 auto;
padding: 56px 0 0;
}
.svc-compare-divider::before,
.svc-compare-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--line);
}
.svc-compare-divider span {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
color: var(--gold);
white-space: nowrap;
padding: 5px 14px;
border: 1px solid rgba(246,189,58,0.28);
border-radius: 20px;
text-transform: uppercase;
}
/* ═══════════════════════════════════════════════════════════════
ВАРИАНТ 2 (Комбо): Premium Spotlight 2×2 + центральный логотип
═══════════════════════════════════════════════════════════════ */
.sv3-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
background: var(--line);
border-radius: 24px;
position: relative;
overflow: hidden;
}
.sv3-card {
position: relative;
display: flex;
flex-direction: column;
padding: clamp(28px, 4vw, 52px);
background: var(--bg);
min-height: 300px;
text-decoration: none;
color: var(--text);
overflow: hidden;
transition: background 0.4s;
}
.sv3-glow {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
}
.sv3-card--video .sv3-glow { background: radial-gradient(ellipse at 18% 88%, rgba(245,36,36,0.17), transparent 62%); }
.sv3-card--design .sv3-glow { background: radial-gradient(ellipse at 88% 18%, rgba(119,51,255,0.21), transparent 62%); }
.sv3-card--photo .sv3-glow { background: radial-gradient(ellipse at 18% 18%, rgba(245,183,43,0.17), transparent 62%); }
.sv3-card--ai .sv3-glow { background: radial-gradient(ellipse at 88% 88%, rgba(34,204,84,0.17), transparent 62%); }
.sv3-card:hover .sv3-glow { opacity: 1; }
.sv3-card--video:hover { box-shadow: inset 0 0 0 1px rgba(245,36,36,0.28); }
.sv3-card--design:hover { box-shadow: inset 0 0 0 1px rgba(119,51,255,0.32); }
.sv3-card--photo:hover { box-shadow: inset 0 0 0 1px rgba(245,183,43,0.30); }
.sv3-card--ai:hover { box-shadow: inset 0 0 0 1px rgba(34,204,84,0.28); }
.sv3-num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
margin-bottom: auto;
position: relative;
z-index: 1;
}
.sv3-card--video .sv3-num { color: var(--c-video); }
.sv3-card--design .sv3-num { color: var(--c-design); }
.sv3-card--photo .sv3-num { color: var(--c-photo); }
.sv3-card--ai .sv3-num { color: var(--c-ai); }
.sv3-title {
font-family: var(--font-display);
font-size: clamp(36px, 4.5vw, 60px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 0.92;
margin: auto 0 16px;
transition: color 0.3s;
position: relative;
z-index: 1;
}
.sv3-card--video:hover .sv3-title { color: var(--c-video); }
.sv3-card--design:hover .sv3-title { color: var(--c-design); }
.sv3-card--photo:hover .sv3-title { color: var(--c-photo); }
.sv3-card--ai:hover .sv3-title { color: var(--c-ai); }
.sv3-desc {
font-size: 13px;
color: var(--muted);
line-height: 1.55;
margin: 0 0 24px;
position: relative;
z-index: 1;
}
.sv3-footer {
display: flex;
align-items: flex-end;
gap: 12px;
position: relative;
z-index: 1;
}
.sv3-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sv3-pill {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.04em;
padding: 4px 10px;
border-radius: 20px;
border: 1px solid;
transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.sv3-card--video .sv3-pill { border-color: rgba(245,36,36,0.22); color: rgba(245,36,36,0.55); }
.sv3-card--design .sv3-pill { border-color: rgba(119,51,255,0.22); color: rgba(119,51,255,0.60); }
.sv3-card--photo .sv3-pill { border-color: rgba(245,183,43,0.22); color: rgba(245,183,43,0.60); }
.sv3-card--ai .sv3-pill { border-color: rgba(34,204,84,0.22); color: rgba(34,204,84,0.55); }
.sv3-card--video:hover .sv3-pill { background: rgba(245,36,36,0.15); color: #fff; border-color: rgba(245,36,36,0.50); }
.sv3-card--design:hover .sv3-pill { background: rgba(119,51,255,0.22); color: #fff; border-color: rgba(119,51,255,0.55); }
.sv3-card--photo:hover .sv3-pill { background: rgba(245,183,43,0.15); color: #fff; border-color: rgba(245,183,43,0.52); }
.sv3-card--ai:hover .sv3-pill { background: rgba(34,204,84,0.15); color: #fff; border-color: rgba(34,204,84,0.50); }
@media (max-width: 860px) {
.sv3-grid {
grid-template-columns: 1fr;
gap: 1px;
border-radius: 16px;
}
}
/* ═══════════════════════════════════════════════════════════════
КВИЗ — КП за 24 часа
═══════════════════════════════════════════════════════════════ */
/* Двухколоночный shell: левая — заголовок/прогресс, правая — шаги */
.quiz-shell {
display: grid;
grid-template-columns: 320px 1fr;
gap: 0;
border: 1px solid var(--line);
border-radius: var(--radius-xl);
overflow: hidden;
min-height: 420px;
}
/* Левая колонка */
.quiz-lhs {
display: flex;
flex-direction: column;
padding: clamp(32px, 4vw, 52px);
background: var(--bg2);
border-right: 1px solid var(--line);
position: relative;
}
.quiz-lhs__kicker {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
color: var(--gold);
letter-spacing: 0.04em;
margin: 0 0 20px;
display: flex;
align-items: center;
gap: 8px;
}
.quiz-lhs__kicker::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
}
.quiz-lhs__title {
font-family: var(--font-display);
font-size: clamp(22px, 2.2vw, 28px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
margin: 0 0 14px;
text-wrap: balance;
}
.quiz-lhs__desc {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
margin: 0;
flex: 1;
}
/* Прогресс-трек */
.quiz-track {
height: 2px;
background: var(--line);
border-radius: 1px;
margin-top: 32px;
overflow: hidden;
}
.quiz-track__fill {
height: 100%;
background: var(--gold);
border-radius: 1px;
transition: width 0.5s cubic-bezier(.4,0,.2,1);
}
.quiz-lhs__counter {
font-family: var(--font-ui);
font-size: 12px;
color: var(--hint);
margin: 10px 0 0;
}
.quiz-lhs__counter span {
color: var(--gold);
font-weight: 600;
}
/* Правая колонка */
.quiz-rhs {
padding: clamp(32px, 4vw, 52px);
background: var(--bg);
}
/* Шаги: скрыты по умолчанию, анимация при активации */
.quiz-step {
display: none;
}
.quiz-step.is-active {
display: block;
animation: quizSlide 0.32s cubic-bezier(.4,0,.2,1) both;
}
@keyframes quizSlide {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.quiz-step.is-active { animation: none; }
}
/* Кнопка «Назад» */
.quiz-back {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
padding: 0;
margin-bottom: 18px;
font-family: var(--font-ui);
font-size: 13px;
color: var(--hint);
cursor: pointer;
transition: color 0.2s;
}
.quiz-back:hover { color: var(--text); }
/* Вопрос */
.quiz-q {
font-family: var(--font-display);
font-size: clamp(18px, 2vw, 22px);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.25;
margin: 0 0 24px;
color: var(--text);
}
/* ── Шаг 1: карточки направлений (зеркало sv3-card) ── */
.quiz-dir-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
background: var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
}
.quiz-dc {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: clamp(18px, 3vw, 28px);
background: var(--bg);
border: none;
text-align: left;
cursor: pointer;
min-height: 130px;
overflow: hidden;
transition: background 0.3s;
}
.quiz-dc__glow {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.35s;
pointer-events: none;
}
.quiz-dc--video .quiz-dc__glow { background: radial-gradient(ellipse at 15% 85%, rgba(245,36,36,0.20), transparent 65%); }
.quiz-dc--design .quiz-dc__glow { background: radial-gradient(ellipse at 85% 15%, rgba(119,51,255,0.22), transparent 65%); }
.quiz-dc--photo .quiz-dc__glow { background: radial-gradient(ellipse at 15% 15%, rgba(245,183,43,0.20), transparent 65%); }
.quiz-dc--ai .quiz-dc__glow { background: radial-gradient(ellipse at 85% 85%, rgba(34,204,84,0.20), transparent 65%); }
.quiz-dc:hover .quiz-dc__glow,
.quiz-dc.is-selected .quiz-dc__glow { opacity: 1; }
.quiz-dc--video:hover, .quiz-dc--video.is-selected { box-shadow: inset 0 0 0 1px rgba(245,36,36,0.40); }
.quiz-dc--design:hover, .quiz-dc--design.is-selected { box-shadow: inset 0 0 0 1px rgba(119,51,255,0.45); }
.quiz-dc--photo:hover, .quiz-dc--photo.is-selected { box-shadow: inset 0 0 0 1px rgba(245,183,43,0.42); }
.quiz-dc--ai:hover, .quiz-dc--ai.is-selected { box-shadow: inset 0 0 0 1px rgba(34,204,84,0.40); }
.quiz-dc__num {
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 0.1em;
margin-bottom: auto;
position: relative;
z-index: 1;
}
.quiz-dc--video .quiz-dc__num { color: var(--c-video); }
.quiz-dc--design .quiz-dc__num { color: var(--c-design); }
.quiz-dc--photo .quiz-dc__num { color: var(--c-photo); }
.quiz-dc--ai .quiz-dc__num { color: var(--c-ai); }
.quiz-dc__title {
font-family: var(--font-display);
font-size: clamp(18px, 2.2vw, 24px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
color: var(--text);
display: block;
margin-bottom: 4px;
position: relative;
z-index: 1;
transition: color 0.3s;
}
.quiz-dc--video:hover .quiz-dc__title, .quiz-dc--video.is-selected .quiz-dc__title { color: var(--c-video); }
.quiz-dc--design:hover .quiz-dc__title, .quiz-dc--design.is-selected .quiz-dc__title { color: var(--c-design); }
.quiz-dc--photo:hover .quiz-dc__title, .quiz-dc--photo.is-selected .quiz-dc__title { color: var(--c-photo); }
.quiz-dc--ai:hover .quiz-dc__title, .quiz-dc--ai.is-selected .quiz-dc__title { color: var(--c-ai); }
.quiz-dc__sub {
font-size: 12px;
color: var(--muted);
line-height: 1.4;
position: relative;
z-index: 1;
}
/* ── Шаги 2–3: выбор из плиток ── */
.quiz-choice-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.quiz-choice {
padding: 16px 18px;
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
color: var(--text);
text-align: left;
cursor: pointer;
transition: border-color 0.2s, background 0.2s, color 0.2s;
line-height: 1.35;
}
.quiz-choice:hover {
border-color: rgba(246,189,58,0.35);
background: rgba(246,189,58,0.04);
}
.quiz-choice.is-selected {
border-color: var(--gold);
background: var(--gold-bg);
color: var(--text);
}
/* ── Шаг 4: форма ── */
.quiz-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
min-height: 0;
}
.quiz-tags:empty { display: none; }
.quiz-tags span {
font-size: 12px;
color: var(--muted);
background: var(--bg2);
border: 1px solid var(--line);
border-radius: 20px;
padding: 3px 12px;
}
.quiz-fields {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
}
.quiz-fields .lead-input { width: 100%; }
.quiz-cta {
width: 100%;
justify-content: center;
padding: 15px 24px;
font-size: 15px;
}
.quiz-legal {
margin-top: 10px;
font-size: 11px;
color: var(--hint);
text-align: center;
}
.quiz-legal a { color: var(--hint); text-decoration: underline; }
/* ── Шаг 5: успех ── */
.quiz-step--done { padding: 20px 0 10px; }
.quiz-done__icon {
display: block;
margin-bottom: 24px;
}
.quiz-done__ring {
transition: stroke-dashoffset 0.6s cubic-bezier(.4,0,.2,1) 0.1s;
}
.quiz-done__check {
transition: stroke-dashoffset 0.4s cubic-bezier(.4,0,.2,1) 0.55s;
}
.quiz-step--done.is-active .quiz-done__ring { stroke-dashoffset: 0; }
.quiz-step--done.is-active .quiz-done__check { stroke-dashoffset: 0; }
.quiz-done__title {
font-family: var(--font-display);
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 700;
letter-spacing: -0.025em;
margin: 0 0 10px;
}
.quiz-done__text {
font-size: 14px;
color: var(--muted);
line-height: 1.65;
max-width: 380px;
}
/* ── Мобильная адаптация ── */
@media (max-width: 860px) {
.quiz-shell {
grid-template-columns: 1fr;
}
.quiz-lhs {
border-right: none;
border-bottom: 1px solid var(--line);
padding: 28px 24px 24px;
}
.quiz-lhs__desc { display: none; }
.quiz-dir-grid { grid-template-columns: 1fr 1fr; }
.quiz-rhs { padding: 28px 24px; }
}
@media (max-width: 500px) {
.quiz-dir-grid, .quiz-choice-grid { grid-template-columns: 1fr; }
}
.trust-row img {
height: 56px;
width: auto;
max-width: 168px;
object-fit: contain;
background: #f4f4f4;
border: 1px solid transparent;
border-radius: var(--radius-md);
padding: 8px var(--sp-4);
opacity: 0.95;
transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Логотипы клиентов приходят разных цветов и тонов — кто-то рисован тёмным
(вордмарки, печати), кто-то светлым/белым (для тёмных поверхностей). Единая
светлая «подложка» топит светлые логотипы, поэтому показываем их на тёмной
карточке (--bg-elevated) — там они читаются так же чётко, как тёмные на
светлом чипе. Класс `.on-dark` ставится точечно по каждому файлу — см. DESIGN.md §10 */
.trust-row img.on-dark,
.logo-grid img.on-dark {
background: var(--bg-elevated);
border-color: var(--line);
}
.trust-row img:hover,
.logo-grid img:hover {
opacity: 1;
transform: translateY(-2px);
box-shadow: var(--glow-gold);
}
.trust-row img.on-dark:hover,
.logo-grid img.on-dark:hover {
border-color: rgba(246, 189, 58, 0.4);
}
@media (prefers-reduced-motion: reduce) {
.trust-row img,
.logo-grid img {
transition: none;
}
}
/* Анимируем угол конического градиента через @property —
элемент стоит на месте, вращаются только цвета по периметру 2px-рамки */
@property --crm-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
/* Внешняя рамка CRM-баннера — вращающийся конический градиент создаёт «живую» обводку */
.crm-banner-frame {
position: relative;
border-radius: calc(var(--radius-lg) + 2px);
padding: 2px;
isolation: isolate;
box-shadow: 0 32px 90px rgba(108, 0, 255, 0.36), 0 0 60px rgba(154, 77, 255, 0.2);
}
.crm-banner-frame::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: conic-gradient(
from var(--crm-angle),
#9b4dff,
#e060ff,
#4a00b0,
#7a1fff,
#c060e0,
#9b4dff
);
animation: crm-border-spin 5s linear infinite;
z-index: -1;
}
@keyframes crm-border-spin {
to { --crm-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.crm-banner-frame::before { animation: none; }
}
/* Баннер продукта Adervis CRM — фирменный градиент фиолетовый → синий */
.crm-banner {
position: relative;
overflow: hidden;
/* Насыщенная фиолетовая подложка из трёх слоёв: два смещённых радиальных пятна
поверх линейного градиента — все три двигаются по background-position
с разной фазой, создавая медленное «дыхание» цвета без смены оттенков
(тот же монохромный принцип, что и у --crm-gradient, но живой) */
background:
radial-gradient(ellipse 70% 70% at 18% 22%, rgba(220, 186, 255, 0.55), transparent 60%),
radial-gradient(ellipse 75% 75% at 82% 78%, rgba(124, 30, 255, 0.65), transparent 60%),
linear-gradient(135deg, #4a00b0 0%, #7a1fff 50%, #9b4dff 100%);
background-size: 180% 180%, 180% 180%, 220% 220%;
animation: crm-flow 18s ease-in-out infinite alternate;
border-radius: var(--radius-lg);
padding: var(--sp-12);
}
@keyframes crm-flow {
0% { background-position: 10% 20%, 90% 80%, 0% 50%; }
50% { background-position: 60% 70%, 40% 30%, 100% 50%; }
100% { background-position: 20% 90%, 80% 10%, 50% 100%; }
}
.crm-banner::before {
content: "";
position: absolute;
top: -180px;
right: -130px;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(228, 201, 255, 0.5), transparent 70%);
filter: blur(70px);
pointer-events: none;
z-index: 0;
animation: crm-pulse 9s ease-in-out infinite alternate;
}
.crm-banner::after {
content: "";
position: absolute;
bottom: -160px;
left: -120px;
width: 440px;
height: 440px;
background: radial-gradient(circle, rgba(108, 0, 255, 0.55), transparent 70%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
animation: crm-pulse 12s ease-in-out infinite alternate-reverse;
}
@keyframes crm-pulse {
from { transform: translate(0, 0) scale(1); opacity: 0.6; }
to { transform: translate(-46px, 38px) scale(1.22); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.crm-banner,
.crm-banner::before,
.crm-banner::after {
animation: none;
}
}
.crm-banner > * {
position: relative;
z-index: 1;
}
.crm-text {
max-width: 640px;
}
.crm-text h2,
.crm-text h3 {
font-size: clamp(22px, 3vw, 28px);
color: #fff;
}
.crm-text p {
color: rgba(255, 255, 255, 0.82);
font-size: 16px;
}
/* На насыщенной живой подложке фирменный градиент бейджа сливается с фоном —
меняем его на «стеклянный» вариант, чтобы бейдж читался поверх любой фазы анимации */
.crm-banner .badge-crm {
color: #fff;
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(8px);
}
.crm-banner .btn.crm {
background: #fff;
color: #4a00b0;
box-shadow: 0 16px 40px rgba(20, 0, 50, 0.35);
}
.crm-banner .btn.crm:hover {
box-shadow: 0 20px 52px rgba(20, 0, 50, 0.45);
}
.crm-banner .btn:not(.crm) {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.28);
color: #fff;
}
.crm-banner .btn:not(.crm):hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.45);
}
.badge {
display: inline-block;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gold);
background: var(--gold-bg);
border: 1px solid rgba(246, 189, 58, 0.3);
border-radius: var(--radius-sm);
padding: 5px 10px;
margin-bottom: var(--sp-4);
}
/* Бейдж продукта Adervis CRM — заливка фирменным градиентом */
.badge-crm {
display: inline-block;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #fff;
background: var(--crm-gradient);
border: 1px solid transparent;
border-radius: var(--radius-sm);
padding: 5px 10px;
margin-bottom: var(--sp-4);
}
/* Кнопка и градиентный текст продукта Adervis CRM */
.btn.crm {
background: var(--crm-gradient);
border-color: transparent;
color: #fff;
}
.btn.crm:hover {
box-shadow: var(--glow-crm);
}
.text-gradient-crm {
color: var(--c-crm-2);
}
/* Hero страницы /pro — те же дрейфующие пятна, но в цветах CRM */
.crm-hero::before {
background: radial-gradient(circle, rgba(108, 0, 255, 0.20), transparent 70%);
}
.crm-hero::after {
background: radial-gradient(circle, rgba(155, 77, 255, 0.18), transparent 70%);
}
/* Карточки возможностей Adervis CRM — гradient-обводка по hover, как у service-card */
.crm-feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-6);
}
.crm-feature-card {
position: relative;
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--sp-6);
overflow: hidden;
transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.crm-feature-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--crm-gradient);
opacity: 0;
transition: opacity 0.25s ease;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.crm-feature-card > * {
position: relative;
z-index: 1;
}
.crm-feature-card:hover {
border-color: transparent;
transform: translateY(-4px);
box-shadow: 0 0 40px -14px rgba(108, 0, 255, 0.5);
}
.crm-feature-card:hover::before {
opacity: 1;
}
.crm-feature-card .feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--crm-bg);
color: color-mix(in srgb, var(--c-crm-1) 55%, #fff);
margin-bottom: var(--sp-4);
}
.crm-feature-card .feature-icon svg {
width: 22px;
height: 22px;
}
.crm-feature-card h3 {
font-size: 18px;
}
.crm-feature-card p {
color: var(--muted);
font-size: 14px;
line-height: 1.5;
margin: 0;
}
/* Шаги процесса — переиспользуется на страницах направлений, карьере и /pro */
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--sp-6);
}
.step-card {
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--sp-6);
transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-card:hover {
border-color: rgba(246, 189, 58, 0.3);
transform: translateY(-4px);
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--gold-bg);
color: var(--gold);
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
margin-bottom: var(--sp-4);
}
.step-card h3 {
font-size: 16px;
}
.step-card p {
color: var(--muted);
font-size: 14px;
line-height: 1.5;
margin: 0;
}
/* Контактный CTA — premium card */
.contact-section {
text-align: center;
}
.contact-section .container {
background: linear-gradient(140deg, rgba(246,189,58,0.08) 0%, var(--bg2) 45%, var(--bg2) 70%, rgba(246,189,58,0.04) 100%);
border: 1px solid rgba(246,189,58,0.22);
border-radius: 28px;
padding: 72px 48px 64px;
position: relative;
overflow: hidden;
isolation: isolate;
}
.contact-section .container::before {
content: '';
position: absolute;
top: -140px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 360px;
background: radial-gradient(ellipse at center, rgba(246,189,58,0.13) 0%, transparent 68%);
pointer-events: none;
z-index: -1;
}
.contact-section .container::after {
content: '';
position: absolute;
bottom: -80px;
right: -80px;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(246,189,58,0.05) 0%, transparent 65%);
pointer-events: none;
z-index: -1;
}
.contact-section h2 {
font-size: clamp(28px, 4.5vw, 52px);
font-weight: 900;
letter-spacing: -0.035em;
line-height: 1.08;
margin-bottom: var(--sp-4);
}
.contact-section p {
color: var(--muted);
font-size: 16px;
max-width: 520px;
margin: 0 auto var(--sp-8);
line-height: 1.65;
}
.contact-section .hero-buttons {
margin-top: 0;
justify-content: center;
}
@media (max-width: 640px) {
.contact-section .container {
padding: 48px 24px 40px;
border-radius: 20px;
}
}
/* Форма заявки на КП — гейтит расчёт за минимальным действием (имя + контакт),
приземляется на mailto: по той же бессерверной схеме, что и калькулятор /video.
Поля переиспользуют .calc-field/.calc-field-label — те же подписи и отступы */
.lead-form {
display: flex;
flex-direction: column;
gap: var(--sp-6);
max-width: 640px;
margin: var(--sp-2) auto 0;
padding: var(--sp-8);
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
text-align: left;
}
.lead-form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-6);
}
.lead-input {
font-family: var(--font-ui);
font-size: 15px;
color: var(--text);
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 12px 16px;
transition: border-color 0.2s ease;
}
.lead-textarea {
resize: vertical;
line-height: 1.5;
}
.lead-input:hover,
.lead-input:focus-visible {
border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
outline: none;
}
/* Inline validation error state */
.lead-input.is-error {
border-color: var(--c-video);
box-shadow: 0 0 0 3px rgba(245, 36, 36, 0.12);
}
.field-error {
display: block;
font-size: 12px;
color: var(--c-video);
margin-top: 5px;
min-height: 16px;
line-height: 1.3;
}
.modal-consent-label.is-error,
.modal-consent-label.is-error * { outline: none !important; }
.consent-wrap.is-error .modal-consent-label {
outline: 2px solid var(--c-video);
border-radius: 4px;
}
.lead-form-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-4);
}
.lead-form-footer .btn {
flex-shrink: 0;
}
.lead-form-hint {
font-size: 12px;
line-height: 1.5;
color: var(--hint);
max-width: 38ch;
}
.lead-form-alt {
margin: var(--sp-6) 0 0;
font-size: 14px;
}
.lead-form-alt a {
color: var(--text);
text-decoration: none;
border-bottom: 1px solid var(--line);
transition: 0.2s ease;
}
.lead-form-alt a:hover {
color: var(--gold);
border-color: var(--gold);
}
@media (max-width: 640px) {
.lead-form-grid {
grid-template-columns: 1fr;
}
.lead-form {
padding: var(--sp-6);
}
}
/* ═══════════════════════════════════════════════════════════════
CTA CARD — двухколоночная форма заявки на главной (2025)
═══════════════════════════════════════════════════════════════ */
.cta-card {
display: grid;
grid-template-columns: 1fr 1.1fr;
background: var(--bg3);
border: 1px solid var(--line);
border-radius: 28px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
/* Тонкая золотая линия сверху */
.cta-card::before {
content: '';
position: absolute;
top: 0; left: 15%; right: 15%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(246,189,58,0.60) 40%, rgba(246,189,58,0.60) 60%, transparent);
pointer-events: none;
}
/* ─── Левая панель: оффер ─── */
.cta-card__info {
padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px);
background: linear-gradient(145deg, rgba(246,189,58,0.055) 0%, transparent 55%);
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 20px;
}
.cta-card__title {
font-family: var(--font-display);
font-size: clamp(24px, 2.6vw, 34px);
font-weight: 700;
line-height: 1.15;
color: var(--text);
margin: 0;
}
.cta-card__sub {
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.6;
color: var(--muted);
margin: 0;
}
.cta-perks {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 11px;
}
.cta-perks li {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-ui);
font-size: 14px;
color: var(--text);
line-height: 1.4;
}
.cta-perks li::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
box-shadow: 0 0 8px 1px rgba(246,189,58,0.40);
}
.cta-contacts {
margin-top: auto;
padding-top: 20px;
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 6px;
}
.cta-contact-link {
font-family: var(--font-ui);
font-size: 14px;
color: var(--muted);
text-decoration: none;
transition: color 0.2s;
}
.cta-contact-link:hover { color: var(--gold); }
/* ─── Правая панель: форма ─── */
.cta-card__form-wrap {
padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px);
display: flex;
flex-direction: column;
gap: 22px;
}
/* Чипы-направления внутри формы */
.cta-dir-chips {
display: flex;
flex-direction: column;
gap: 10px;
}
.cta-dir-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--hint);
}
.cta-dir-chips__row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.cta-dir-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: var(--bg2);
border: 1px solid var(--line);
border-radius: 100px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
color: rgba(255,255,255,0.40);
cursor: pointer;
transition: color 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
--cc: rgba(255,255,255,0.3);
}
.cta-dir-chip__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--cc);
flex-shrink: 0;
transition: box-shadow 0.22s;
}
.cta-dir-chip:hover {
color: rgba(255,255,255,0.75);
border-color: rgba(255,255,255,0.16);
}
.cta-dir-chip.is-active {
color: #fff;
background: color-mix(in srgb, var(--cc) 10%, transparent);
border-color: color-mix(in srgb, var(--cc) 58%, transparent);
}
.cta-dir-chip.is-active .cta-dir-chip__dot {
box-shadow: 0 0 6px 1px var(--cc);
}
/* Поля формы внутри карточки */
.cta-form-fields {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Кнопка отправки — широкая золотая */
.btn-submit-main {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 14px 28px;
background: var(--gold);
color: #141414;
border: none;
border-radius: 12px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: box-shadow 0.22s, transform 0.18s;
}
.btn-submit-main:hover {
box-shadow: var(--glow-gold);
transform: translateY(-1px);
}
.cta-form-footer {
display: flex;
flex-direction: column;
gap: 12px;
}
.cta-form-footer .lead-form-hint {
text-align: center;
max-width: none;
}
.cta-trust-badges {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
justify-content: center;
margin-top: 4px;
}
.cta-trust-badges span {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
}
/* Light theme */
[data-theme="light"] .cta-dir-chip {
color: rgba(0,0,0,0.45);
}
[data-theme="light"] .cta-dir-chip:hover { color: rgba(0,0,0,0.70); }
[data-theme="light"] .cta-dir-chip.is-active { color: #000; }
/* Responsive */
@media (max-width: 800px) {
.cta-card {
grid-template-columns: 1fr;
border-radius: 20px;
}
.cta-card__info {
border-right: none;
border-bottom: 1px solid var(--line);
}
.cta-contacts { margin-top: 0; }
}
/* Портфолио / кейсы (страницы направлений) */
.career-status-banner {
display: flex;
align-items: flex-start;
gap: 14px;
background: color-mix(in srgb, var(--gold) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
border-radius: var(--radius-lg);
padding: var(--sp-4) var(--sp-5);
margin-bottom: var(--sp-6);
}
.career-status-dot {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold);
margin-top: 6px;
}
.career-status-banner p {
margin: 0;
font-size: 15px;
color: var(--t2);
line-height: 1.6;
}
.career-status-banner strong { color: var(--t1); }
.career-status-banner a { color: var(--gold); text-decoration: underline; }
.career-status-banner a:hover { opacity: 0.8; }
.cases-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-6);
}
.case-group {
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--sp-6);
}
.case-group h3 {
font-size: 18px;
color: var(--gold);
}
.case-group ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.case-group li {
color: var(--muted);
font-size: 14px;
line-height: 1.5;
padding-bottom: var(--sp-2);
border-bottom: 1px solid var(--line);
}
.case-group li:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* Photo page — premium deliverables grid */
.photo-deliverables {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.photo-deliv-card {
position: relative;
background: linear-gradient(145deg, rgba(246,189,58,0.06) 0%, var(--bg2) 55%);
border: 1px solid rgba(246,189,58,0.18);
border-radius: 24px;
padding: 40px 36px 36px;
overflow: hidden;
}
.photo-deliv-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--gold) 0%, transparent 65%);
border-radius: 24px 24px 0 0;
}
.photo-deliv-num {
position: absolute;
top: 16px; right: 28px;
font-family: var(--font-display);
font-size: 80px;
font-weight: 900;
line-height: 1;
color: rgba(246,189,58,0.07);
pointer-events: none;
user-select: none;
}
.photo-deliv-card h3 {
font-size: 22px;
font-weight: 700;
color: var(--text);
line-height: 1.3;
margin: 0 0 28px;
}
.photo-deliv-list {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
}
.photo-deliv-list li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
font-size: 15px;
line-height: 1.5;
color: rgba(255,255,255,0.68);
}
.photo-deliv-list li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.photo-deliv-check {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 2px;
color: var(--gold);
}
.photo-deliv-check svg {
width: 100%;
height: 100%;
}
@media (max-width: 640px) {
.photo-deliverables {
grid-template-columns: 1fr;
}
.photo-deliv-card {
padding: 32px 24px 28px;
}
.photo-deliv-num {
font-size: 64px;
}
}
[data-theme="light"] .photo-deliv-card {
background: linear-gradient(145deg, rgba(246,189,58,0.06) 0%, #fff 60%);
}
[data-theme="light"] .photo-deliv-list li {
color: rgba(0,0,0,0.65);
border-bottom-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .photo-deliv-num {
color: rgba(246,189,58,0.12);
}
/* Сетка реальных логотипов клиентов внутри карточки портфолио */
.logo-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
align-items: center;
}
.logo-grid img {
height: 68px;
width: 100%;
object-fit: contain;
background: #f4f4f4;
border: 1px solid transparent;
border-radius: var(--radius-md);
padding: 10px var(--sp-3);
opacity: 0.95;
transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Шоурилы */
.showreel-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
}
.showreel-card {
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--sp-6);
transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.showreel-card:hover {
border-color: rgba(246, 189, 58, 0.3);
transform: translateY(-4px);
}
.showreel-card .badge {
margin-bottom: var(--sp-3);
}
.showreel-card h3 {
font-size: 20px;
}
.showreel-card p {
color: var(--muted);
font-size: 14px;
line-height: 1.5;
margin: 0;
}
/* Отзывы клиентов */
.review-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-6);
}
.review-card {
display: flex;
flex-direction: column;
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--sp-6);
transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.review-card:hover {
border-color: rgba(246, 189, 58, 0.25);
}
.review-quote {
color: var(--text);
font-size: 15px;
line-height: 1.6;
margin: 0 0 var(--sp-4);
}
.review-author {
display: block;
font-weight: 600;
font-size: 14px;
}
.review-role {
display: block;
color: var(--muted);
font-size: 13px;
margin-top: var(--sp-1);
}
/* ============================================================
Заглушки изображений портфолио (DESIGN.md §10 — TODO заказчика)
Промаркированный блок вместо реального кадра: подпись описывает,
что именно сюда нужно поставить (фото со съёмки, макет, кадр из ролика).
Цвет акцента подхватывает --dir-color направления через data-dir.
============================================================ */
/* Плейсхолдеры визуала — это «экраны», на которых студия показывает товар лицом,
поэтому они крупнее и живее обычных карточек: дрейфующий блик внутри намекает
на будущий кадр, а при наведении рамка мягко «оживает» — как кинопостер */
.media-frame {
--frame-accent: var(--dir-color, var(--gold));
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-4);
aspect-ratio: var(--ratio, 16 / 9);
width: 100%; /* constrain to parent column — prevents aspect-ratio+min-height from blowing out grid */
min-height: 260px;
border: 1px dashed var(--line);
border-radius: var(--radius-lg);
background: linear-gradient(160deg, color-mix(in srgb, var(--frame-accent) 14%, transparent), var(--bg2) 65%);
color: var(--hint);
text-align: center;
padding: var(--sp-8);
overflow: hidden;
isolation: isolate;
transition: border-color 0.3s ease, color 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease;
}
.media-frame::before {
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(circle, color-mix(in srgb, var(--frame-accent) 24%, transparent), transparent 65%);
opacity: 0.5;
filter: blur(48px);
animation: frame-glow 16s ease-in-out infinite alternate;
z-index: -1;
}
@keyframes frame-glow {
from { transform: translate(-8%, -6%) scale(1); }
to { transform: translate(8%, 8%) scale(1.18); }
}
.media-frame:hover {
border-color: color-mix(in srgb, var(--frame-accent) 55%, var(--line));
color: var(--muted);
transform: scale(1.015);
box-shadow: 0 28px 80px -24px color-mix(in srgb, var(--frame-accent) 42%, transparent);
}
.media-frame-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: color-mix(in srgb, var(--frame-accent) 16%, transparent);
color: color-mix(in srgb, var(--frame-accent) 65%, var(--muted));
transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.media-frame:hover .media-frame-icon {
transform: scale(1.08);
}
.media-frame-icon svg {
width: 26px;
height: 26px;
}
.media-frame-label {
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.01em;
line-height: 1.6;
max-width: 32ch;
}
.media-frame-tag {
position: absolute;
top: var(--sp-4);
left: var(--sp-4);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--hint);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 4px 8px;
background: var(--glass);
}
@media (prefers-reduced-motion: reduce) {
.media-frame,
.media-frame-icon { transition: none; }
.media-frame::before { animation: none; }
}
/* Сетка визуальных карточек портфолио — пара «изображение + подпись» */
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
}
.gallery-card {
display: flex;
flex-direction: column;
gap: var(--sp-4);
text-decoration: none;
color: inherit;
min-width: 0; /* grid items must be able to shrink below min-content */
}
.gallery-card h3 {
font-size: 16px;
margin-bottom: 0;
}
/* Шоурилы — три видео в ряд на главной */
.showreel-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
}
.showreel-card {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.showreel-card .video-wrap {
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--line);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.showreel-card:hover .video-wrap {
border-color: rgba(246, 189, 58, 0.3);
box-shadow: 0 0 40px -16px rgba(246, 189, 58, 0.4);
}
.showreel-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
text-align: center;
}
/* Showreel «скоро» — плейсхолдер-карточка */
.showreel-soon-frame {
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
border: 1px dashed rgba(246, 189, 58, 0.35);
background: linear-gradient(135deg, rgba(246,189,58,0.05) 0%, transparent 60%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px;
}
.showreel-soon__badge {
font-size: 11px;
font-family: var(--font-mono);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold);
background: rgba(246,189,58,0.12);
border: 1px solid rgba(246,189,58,0.25);
border-radius: 100px;
padding: 3px 10px;
}
.showreel-soon__title {
font-family: var(--font-display);
font-size: clamp(18px, 2vw, 26px);
font-weight: 700;
color: var(--text);
margin: 0;
}
.showreel-soon__sub {
font-size: 13px;
color: var(--muted);
margin: 0;
}
/* Отзывы клиентов — карточки с круглой фотографией */
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
}
.review-card {
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
padding: var(--sp-6);
display: flex;
flex-direction: column;
gap: var(--sp-4);
transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.review-card:hover {
border-color: rgba(246, 189, 58, 0.35);
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0,0,0,0.22);
}
.review-text {
color: var(--text);
font-size: 15px;
line-height: 1.65;
flex-grow: 1;
margin: 0;
font-style: italic;
}
.review-text::before {
content: '«';
color: var(--gold);
font-style: normal;
font-weight: 700;
margin-right: 2px;
}
.review-text::after {
content: '»';
color: var(--gold);
font-style: normal;
font-weight: 700;
margin-left: 2px;
}
.review-author {
display: flex;
align-items: center;
gap: var(--sp-3);
padding-top: var(--sp-4);
border-top: 1px solid var(--line);
}
.review-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--line);
flex-shrink: 0;
}
.review-avatar-placeholder {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--bg-elevated);
border: 2px solid var(--line);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--hint);
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
}
.review-author-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.review-author-name {
font-weight: 600;
font-size: 14px;
color: var(--text);
}
.review-author-role {
font-size: 12px;
color: var(--muted);
}
/* Слайдер отзывов */
.reviews-slider {
position: relative;
}
.reviews-track-outer {
/* clip only horizontal axis — lets the card hover translateY breathe */
overflow-x: clip;
overflow-y: visible;
/* padding fallback for browsers without overflow: clip support */
padding: 8px 0;
margin: -8px 0;
}
.reviews-track {
display: flex;
gap: 24px;
align-items: stretch;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.reviews-track .review-card {
flex-shrink: 0;
height: auto;
}
.reviews-nav {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-4);
margin-top: var(--sp-6);
}
.reviews-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--bg3);
color: var(--muted);
cursor: pointer;
transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
flex-shrink: 0;
}
.reviews-arrow:hover:not(:disabled) {
color: var(--gold);
border-color: rgba(246, 189, 58, 0.4);
background: rgba(246, 189, 58, 0.06);
}
.reviews-arrow:disabled {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
.reviews-dots {
display: flex;
align-items: center;
gap: 8px;
}
.reviews-dot {
width: 6px;
height: 6px;
border-radius: 3px;
background: var(--line);
border: none;
padding: 0;
cursor: pointer;
transition: width 0.25s ease, background 0.25s ease;
}
.reviews-dot.is-active {
background: var(--gold);
width: 22px;
}
.reviews-counter {
font-size: 12px;
font-weight: 600;
color: var(--hint);
letter-spacing: 0.04em;
font-family: var(--font-mono, monospace);
min-width: 36px;
text-align: center;
}
@media (max-width: 960px) {
.reviews-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.reviews-grid {
grid-template-columns: 1fr;
}
.showreel-grid {
grid-template-columns: 1fr;
}
/* Slider nav on mobile */
.reviews-nav {
gap: var(--sp-3);
margin-top: var(--sp-5);
}
.reviews-arrow {
width: 38px;
height: 38px;
}
.review-card {
padding: var(--sp-5);
}
.review-text {
font-size: 14px;
}
}
.gallery-card p {
color: var(--muted);
font-size: 14px;
line-height: 1.5;
margin: 0;
}
/* Витрина избранного проекта — крупный кадр доминирует над описанием:
это «киноэкран» страницы, текст рядом — лишь подпись к нему */
.spotlight {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: var(--sp-12);
align-items: center;
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
padding: var(--sp-12);
}
.spotlight .media-frame {
min-height: 340px;
}
.spotlight-text h3 {
font-size: clamp(20px, 2.4vw, 26px);
}
.spotlight-text p {
color: var(--muted);
font-size: 15px;
line-height: 1.6;
}
.spotlight-meta {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
list-style: none;
margin: var(--sp-4) 0 0;
padding: 0;
}
.spotlight-meta li {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.02em;
color: var(--muted);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 5px 10px;
}
/* ══════════════════════════════════════════════════════════
FAQ Visual — 2-колонка со sketch иллюстрацией
══════════════════════════════════════════════════════════ */
.fvs-grid {
display: grid;
grid-template-columns: 1fr 400px;
gap: 0;
align-items: start;
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
overflow: hidden;
}
/* ─── Левая панель ─── */
.fvs-left {
padding: 40px 40px 40px 40px;
border-right: 1px solid var(--line);
}
.fvs-header {
margin-bottom: 28px;
}
.fvs-title {
font-family: var(--font-display);
font-size: clamp(20px, 2vw, 28px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.025em;
color: var(--text);
margin: 8px 0 6px;
}
.fvs-sub {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
margin: 0;
}
/* Список вопросов */
.fvs-list {
display: flex;
flex-direction: column;
}
.fvs-item {
display: block;
width: 100%;
background: none;
border: none;
border-top: 1px solid var(--line);
padding: 18px 0;
cursor: pointer;
text-align: left;
color: var(--text);
position: relative;
transition: none;
}
.fvs-item:last-child { border-bottom: 1px solid var(--line); }
/* Золотая полоса слева у активного */
.fvs-item::before {
content: '';
position: absolute;
left: -40px;
top: 0;
bottom: 0;
width: 3px;
background: var(--gold);
opacity: 0;
transition: opacity 0.2s;
}
.fvs-item.is-active::before { opacity: 1; }
.fvs-item-top {
display: flex;
align-items: center;
gap: 12px;
}
.fvs-num {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
color: var(--hint);
flex-shrink: 0;
transition: color 0.2s;
}
.fvs-item.is-active .fvs-num { color: var(--gold); }
.fvs-q {
font-size: 15px;
font-weight: 600;
color: var(--text);
line-height: 1.35;
flex: 1;
margin: 0;
transition: color 0.2s;
}
.fvs-item.is-active .fvs-q { color: var(--gold); }
.fvs-arrow {
color: var(--hint);
flex-shrink: 0;
transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), color 0.2s;
}
.fvs-item.is-active .fvs-arrow { transform: rotate(180deg); color: var(--gold); }
/* Grid-rows trick — плавный accordion без max-height рывков */
.fvs-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.38s cubic-bezier(0.4,0,0.2,1);
}
.fvs-item.is-active .fvs-body { grid-template-rows: 1fr; }
.fvs-body-inner {
overflow: hidden;
}
.fvs-a {
font-size: 13px;
color: var(--muted);
line-height: 1.7;
padding-top: 10px;
padding-left: 22px;
margin: 0;
}
/* ─── Правая панель: иллюстрация ─── */
.fvs-right {
position: sticky;
top: 80px;
align-self: start;
background: var(--bg3);
}
.fvs-canvas {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: var(--radius-lg);
/* Плавный возврат к нейтральному положению */
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 0.6s ease;
cursor: default;
}
.fvs-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.5s ease, transform 0.5s ease;
transform: scale(1.03);
display: flex;
align-items: center;
justify-content: center;
}
.fvs-slide.is-active {
opacity: 1;
transform: scale(1);
}
.fvs-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform-origin: center;
will-change: transform;
/* scale(1.08) ставит JS — запас чтобы края не появлялись при наклоне */
}
/* Плейсхолдер — скрыт, иконки перенесены в caption-bar */
.fvs-slide .fvs-ph { display: none; }
.fvs-ph-icon {
width: 72px;
height: 72px;
border-radius: 50%;
border: 1px dashed rgba(246,189,58,0.3);
display: flex;
align-items: center;
justify-content: center;
color: rgba(246,189,58,0.45);
}
.fvs-ph-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--hint);
text-transform: uppercase;
text-align: center;
}
.fvs-ph-num {
font-family: var(--font-display);
font-size: 80px;
font-weight: 700;
letter-spacing: -0.05em;
color: rgba(246,189,58,0.06);
line-height: 1;
position: absolute;
bottom: 16px;
right: 20px;
user-select: none;
}
/* Каптион внутри canvas — прилипает к нижнему краю изображения */
.fvs-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 6;
background: rgba(10,10,10,0.80);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
will-change: transform;
}
.fvs-progress {
height: 2px;
background: rgba(255,255,255,0.08);
overflow: hidden;
}
.fvs-progress-bar {
height: 100%;
width: 20%;
background: var(--gold);
transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.fvs-caption-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
}
.fvs-ph { will-change: transform; }
.fvs-caption-icon {
display: flex;
align-items: center;
flex-shrink: 0;
color: var(--gold);
opacity: 0.75;
margin-right: 8px;
}
.fvs-caption-icon svg { display: block; }
.fvs-caption-text {
font-size: 11px;
color: rgba(255,255,255,0.55);
font-family: var(--font-mono);
letter-spacing: 0.06em;
}
.fvs-caption-counter {
font-size: 11px;
color: rgba(255,255,255,0.3);
font-family: var(--font-mono);
letter-spacing: 0.06em;
}
/* ─── Мобильный (≤760px): одна колонка ─── */
@media (max-width: 760px) {
.fvs-grid {
grid-template-columns: 1fr;
border-radius: var(--radius-lg);
}
.fvs-right {
position: static;
border-top: 1px solid var(--line);
}
.fvs-canvas { aspect-ratio: 16 / 9; }
.fvs-left {
padding: 24px 20px;
border-right: none;
}
.fvs-item::before { left: -20px; }
.fvs-q { font-size: 14px; }
}
/* FAQ — нативные /, разворачиваются без JS */
.faq-list {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.faq-item {
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 0 var(--sp-6);
transition: border-color 0.25s ease;
}
.faq-item[open] {
border-color: rgba(246, 189, 58, 0.3);
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
list-style: none;
cursor: pointer;
font-family: var(--font-display);
font-weight: 500;
font-size: 16px;
padding: var(--sp-4) 0;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary .faq-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--line);
color: var(--gold);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
}
.faq-item summary .faq-icon svg {
width: 14px;
height: 14px;
}
.faq-item[open] summary .faq-icon {
transform: rotate(45deg);
border-color: rgba(246, 189, 58, 0.4);
}
.faq-item p {
color: var(--muted);
font-size: 14px;
line-height: 1.6;
margin: 0;
padding: 0 0 var(--sp-4);
border-top: 1px solid var(--line);
padding-top: var(--sp-4);
}
@media (prefers-reduced-motion: reduce) {
.faq-item summary .faq-icon { transition: none; }
}
/* Калькулятор стоимости видео — лёгкий продающий инструмент: считает вилку
бюджета на лету и сразу собирает заявку с расчётом в одно письмо */
.calc-card {
display: flex;
flex-direction: column;
gap: var(--sp-8);
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
padding: var(--sp-8);
}
.calc-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-6);
}
.calc-field {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.calc-field-label {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--hint);
}
.calc-select {
font-family: var(--font-ui);
font-size: 15px;
color: var(--text);
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 12px 16px;
cursor: pointer;
transition: border-color 0.2s ease;
}
.calc-select:hover,
.calc-select:focus-visible {
border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
outline: none;
}
.calc-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-3);
border: none;
margin: 0;
padding: 0;
}
.calc-options legend {
grid-column: 1 / -1;
margin-bottom: calc(-1 * var(--sp-1));
padding: 0;
}
.calc-check {
display: flex;
align-items: center;
gap: var(--sp-3);
font-size: 14px;
color: var(--muted);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 12px 16px;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.calc-check:has(input:checked) {
color: var(--text);
border-color: color-mix(in srgb, var(--gold) 50%, var(--line));
background: var(--gold-bg);
}
.calc-check input {
accent-color: var(--gold);
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Шаги калькулятора — собираем больше данных и оставляем заявку «по пути»,
а не просто показываем цифру: видно прогресс, на финальном шаге — контакты */
.calc-progress {
display: flex;
align-items: center;
gap: var(--sp-2);
list-style: none;
margin: 0;
padding: 0;
}
.calc-progress-step {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: 13px;
color: var(--hint);
transition: color 0.2s ease;
}
.calc-progress-step span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex-shrink: 0;
border: 1px solid var(--line);
border-radius: 50%;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.calc-progress-step.is-active {
color: var(--text);
}
.calc-progress-step.is-active span,
.calc-progress-step.is-done span {
border-color: var(--gold);
color: var(--gold);
}
.calc-progress-step.is-done span {
background: var(--gold-bg);
}
.calc-progress-step:not(:last-child)::after {
content: "";
width: 28px;
height: 1px;
background: var(--line);
}
.calc-step {
display: none;
flex-direction: column;
gap: var(--sp-6);
}
.calc-step.is-active {
display: flex;
animation: calc-step-in 0.35s ease;
}
@keyframes calc-step-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.calc-nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sp-3);
padding-top: var(--sp-6);
border-top: 1px solid var(--line);
}
.calc-nav [data-calc-action="back"] {
margin-right: auto;
}
/* .btn задаёт свой display — без этого правила атрибут hidden не скрыл бы кнопки шагов */
.calc-nav .btn[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.calc-step.is-active {
animation: none;
}
}
.calc-result {
display: flex;
flex-direction: column;
gap: 4px;
}
.calc-result-label {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--hint);
}
.calc-result-value {
font-family: var(--font-display);
font-size: clamp(22px, 3vw, 30px);
font-weight: 500;
color: var(--gold);
}
.calc-result-hint {
font-size: 13px;
color: var(--muted);
max-width: 46ch;
}
@media (max-width: 720px) {
.calc-grid,
.calc-options {
grid-template-columns: 1fr;
}
.calc-progress-step span {
width: 22px;
height: 22px;
}
.calc-progress-step:not(:last-child)::after {
width: 16px;
}
.calc-nav {
flex-direction: column-reverse;
align-items: stretch;
}
.calc-nav .btn {
width: 100%;
margin-right: 0;
}
}
body.nav-open {
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.nav-toggle span,
.nav-backdrop { transition: none; }
}
@media (max-width: 960px) {
.stats-grid,
.services-grid,
.gallery-grid,
.apps-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Captioned gallery (photo page) keeps 3 columns — 3 equal cards, no orphan */
.gallery-grid--captioned {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 860px) {
/* backdrop-filter на .topbar создаёт containing block для position: fixed —
убираем его на мобильных, иначе выезжающее меню «прилипает» к шапке вместо экрана */
.topbar,
.topbar.is-scrolled {
flex-direction: row;
align-items: center;
padding: 12px 20px;
backdrop-filter: none;
}
.topbar-primary {
flex: 1;
padding: 0;
border-bottom: none;
}
.topbar.is-scrolled .topbar-primary {
padding: 0;
}
/* CRM-бейдж в первом ряду удалён — правило больше не нужно */
.nav-toggle {
display: inline-flex;
}
.nav {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(320px, 86vw);
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 96px var(--sp-6) var(--sp-8);
margin: 0;
background: var(--glass);
backdrop-filter: blur(22px);
border-left: 1px solid var(--line);
box-shadow: -32px 0 64px rgba(0, 0, 0, 0.45);
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
z-index: 100;
}
.nav.is-open {
transform: translateX(0);
}
.nav a {
margin-left: 0;
padding: var(--sp-4) 0;
font-size: 15px;
border-radius: 0;
border-bottom: 1px solid var(--line);
}
.nav a:hover {
background: transparent;
}
.nav-sep {
display: none;
}
/* «Продукты» — единая кнопка в мобильном меню, стиль как у nav-product на десктопе */
.nav .nav-product {
display: inline-flex;
margin: var(--sp-6) 0 0;
margin-left: 0;
align-self: flex-start;
padding: 7px 16px;
font-size: 13px;
border-radius: var(--radius-md);
border: 1px solid rgba(246, 189, 58, 0.3);
}
/* Тэглайн скрываем на мобиле — слишком тесно */
.brand-tagline { display: none; }
/* Соцсети в мобильном меню — горизонтальная строка снизу */
.nav-social {
margin: var(--sp-6) 0 0;
margin-left: 0;
gap: var(--sp-3);
padding-top: var(--sp-6);
border-top: 1px solid var(--line);
width: 100%;
}
.nav-social-icon {
width: 38px;
height: 38px;
}
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
.nav { transition: none; }
}
@media (max-width: 640px) {
.stats-grid,
.services-grid,
.cases-grid,
.showreel-grid,
.review-grid,
.crm-feature-grid,
.gallery-grid {
grid-template-columns: 1fr;
}
/* Reduce section vertical rhythm on mobile */
.section {
padding: var(--sp-10) 0;
}
.section-head {
margin-bottom: var(--sp-6);
}
.crm-banner {
padding: var(--sp-8);
}
.spotlight {
grid-template-columns: 1fr;
padding: var(--sp-6);
}
.to-top {
right: var(--sp-4);
bottom: var(--sp-4);
}
}
/* Заглушки внутренних страниц */
.page-section {
padding: 96px 0 64px;
min-height: 50vh;
}
.page-section h1 {
font-size: 32px;
}
.page-section p {
color: var(--muted);
font-size: 16px;
max-width: 640px;
}
/* Подвал */
.footer {
margin-top: 64px;
border-top: 1px solid var(--line);
padding: var(--sp-8) 0 var(--sp-6);
color: var(--muted);
font-size: 14px;
}
.footer-inner {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: var(--sp-8);
align-items: start;
}
.footer-brand .brand img {
height: 34px;
}
.footer-brand p {
margin-top: var(--sp-3);
max-width: 280px;
font-size: 13px;
line-height: 1.6;
}
/* Колонки навигации в футере — заголовок + список ссылок */
.footer-col,
.footer-nav,
.footer-contacts {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.footer-col-title {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hint);
margin-bottom: var(--sp-1);
}
.footer-col a,
.footer-nav a,
.footer-contacts a {
color: var(--muted);
text-decoration: none;
font-size: 14px;
transition: color 0.2s ease;
}
.footer-col a:hover,
.footer-nav a:hover,
.footer-contacts a:hover {
color: var(--gold);
}
.footer-social {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-top: var(--sp-3);
}
/* Иконки соцсетей в подвале — вместо текстовых ссылок «Behance/VK/Instagram»:
единый стиль badge (рамка + знак), Instagram читается как камера, Behance/VK — монограммой */
.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--muted);
transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.social-icon svg {
width: 28px;
height: 28px;
}
.social-icon svg text {
font-family: var(--font-display);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.01em;
text-anchor: middle;
fill: currentColor;
}
.social-icon:hover {
color: var(--gold);
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.social-icon {
transition: color 0.2s ease;
}
.social-icon:hover {
transform: none;
}
}
.footer-bottom {
margin-top: var(--sp-8);
padding-top: var(--sp-6);
border-top: 1px solid var(--line);
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-4);
}
.footer-legal {
display: flex;
gap: var(--sp-6);
}
.footer-legal a {
color: var(--hint);
text-decoration: none;
font-size: 11px;
transition: color 0.2s ease;
}
.footer-legal a:hover {
color: var(--muted);
}
/* Кнопка «наверх» — плавающая, появляется после прокрутки (DESIGN.md §9) */
.to-top {
position: fixed;
right: var(--sp-6);
bottom: var(--sp-6);
z-index: 90;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--glass);
backdrop-filter: blur(16px);
color: var(--text);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.to-top:hover {
color: var(--gold);
border-color: rgba(246, 189, 58, 0.4);
box-shadow: var(--glow-gold);
}
@media (prefers-reduced-motion: reduce) {
.to-top {
transition: opacity 0.01ms, visibility 0.01ms;
transform: none;
}
}
@media (max-width: 900px) {
.footer-inner {
grid-template-columns: 1fr 1fr;
}
.footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 480px) {
.footer-inner {
grid-template-columns: 1fr 1fr;
gap: var(--sp-6);
}
.footer-brand {
grid-column: 1 / -1;
}
}
/* ============================================================
Бегущая строка логотипов клиентов — на всех страницах.
Авто-прокрутка справа → налево, пауза и цвет при наведении.
============================================================ */
.clients-ticker-section {
padding: var(--sp-12) 0 var(--sp-8);
border-top: 1px solid var(--line);
/* overflow: hidden убран — section больше не обрезает логотипы по Y при hover-увеличении */
}
.clients-ticker-section .ticker-label {
text-align: center;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--hint);
margin-bottom: var(--sp-6);
}
.clients-ticker {
overflow: hidden;
padding-block: 14px; /* запас по Y для hover-увеличения, не обрезается */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #fff 10%, #fff 90%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #fff 10%, #fff 90%, transparent 100%);
cursor: grab;
}
.clients-ticker.is-dragging {
cursor: grabbing;
}
.clients-ticker-track {
display: flex;
width: max-content;
gap: var(--sp-4);
animation: ticker-scroll 80s linear infinite;
}
.clients-ticker:hover .clients-ticker-track {
animation-play-state: paused;
}
@keyframes ticker-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.clients-ticker-item {
flex-shrink: 0;
display: inline-flex;
align-items: center;
}
.clients-ticker-item img {
height: 72px;
width: auto;
max-width: 180px;
object-fit: contain;
border-radius: var(--radius-md);
padding: 8px 16px;
background: rgba(244, 244, 244, 0.10);
border: 1px solid rgba(255, 255, 255, 0.05);
filter: grayscale(1) opacity(0.42);
transition: filter 0.38s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
background 0.38s ease,
border-color 0.38s ease;
cursor: pointer;
}
.clients-ticker-item img.on-dark {
background: rgba(32, 32, 32, 0.55);
border-color: rgba(255, 255, 255, 0.07);
}
.clients-ticker-item:hover img {
filter: none;
transform: scale(1.18) translateY(-4px);
/* Фон прозрачный — логотип показывает свой собственный фон из файла,
так белые логотипы на тёмном (типа PERI) читаются корректно */
background: transparent;
border-color: rgba(246, 189, 58, 0.55);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(246, 189, 58, 0.18);
z-index: 2;
position: relative;
}
.clients-ticker-item:hover img.on-dark {
background: rgba(36, 36, 36, 0.94);
border-color: rgba(246, 189, 58, 0.45);
}
@media (prefers-reduced-motion: reduce) {
.clients-ticker-track { animation: none; }
.clients-ticker-item img { transition: none; }
}
/* ============================================================
Страница /docs — документы (политика и оферта)
============================================================ */
.docs-page {
padding: var(--sp-16) 0 80px;
}
.docs-tabs {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
margin-bottom: var(--sp-8);
border-bottom: 1px solid var(--line);
padding-bottom: 0;
}
.docs-tab {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 10px 20px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--muted);
text-decoration: none;
border-radius: var(--radius-md) var(--radius-md) 0 0;
border: 1px solid transparent;
border-bottom: none;
cursor: pointer;
background: none;
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
position: relative;
bottom: -1px;
}
.docs-tab:hover,
.docs-tab.is-active {
color: var(--text);
background: var(--bg3);
border-color: var(--line);
}
.docs-tab.is-active {
color: var(--gold);
}
.docs-panel {
display: none;
animation: docs-in 0.3s ease both;
}
.docs-panel.is-active {
display: block;
}
@keyframes docs-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.docs-doc {
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
padding: var(--sp-12);
max-width: 820px;
}
.docs-doc h2 {
font-size: clamp(18px, 2.5vw, 24px);
margin-bottom: var(--sp-6);
color: var(--gold);
}
.docs-doc h3 {
font-size: 16px;
color: var(--text);
margin: var(--sp-8) 0 var(--sp-3);
}
.docs-doc h3:first-of-type {
margin-top: var(--sp-6);
}
.docs-doc p,
.docs-doc li {
color: var(--muted);
font-size: 15px;
line-height: 1.75;
margin-bottom: var(--sp-3);
}
.docs-doc ul,
.docs-doc ol {
padding-left: var(--sp-6);
margin: 0 0 var(--sp-4);
}
.docs-doc li {
margin-bottom: var(--sp-2);
}
.docs-doc .docs-meta {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-6);
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
margin-top: var(--sp-8);
font-size: 14px;
color: var(--muted);
}
.docs-doc .docs-meta strong {
color: var(--text);
}
.docs-doc .docs-divider {
height: 1px;
background: var(--line);
margin: var(--sp-8) 0;
}
@media (max-width: 640px) {
.docs-doc {
padding: var(--sp-6);
}
}
/* ============================================================
«Для кого» — сетка проблемных сценариев
============================================================ */
.who-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-6);
}
.who-card {
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--sp-8);
position: relative;
overflow: hidden;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.who-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 0% 0%, rgba(246, 189, 58, 0.05), transparent 60%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.who-card:hover {
border-color: rgba(246, 189, 58, 0.18);
transform: translateY(-3px);
}
.who-card:hover::before {
opacity: 1;
}
.who-problem {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--text);
line-height: 1.4;
margin-bottom: var(--sp-4);
padding-left: var(--sp-4);
border-left: 2px solid var(--gold);
}
.who-card > p:not(.who-problem) {
color: var(--muted);
font-size: 14px;
line-height: 1.65;
margin: 0;
}
/* ============================================================
Процесс — горизонтальный таймлайн из четырёх шагов
============================================================ */
.process-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-6);
position: relative;
}
.process-row::before {
content: "";
position: absolute;
top: 28px;
left: calc(12.5% + 4px);
right: calc(12.5% + 4px);
height: 1px;
background: linear-gradient(90deg, var(--gold) 0%, rgba(246, 189, 58, 0.12) 100%);
pointer-events: none;
}
.process-step {
padding: 0 var(--sp-2);
text-align: center;
}
.process-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--bg3);
border: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 13px;
color: var(--gold-soft);
margin-bottom: var(--sp-6);
position: relative;
z-index: 1;
transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.process-step:hover .process-num {
border-color: rgba(246, 189, 58, 0.4);
background: var(--gold-bg);
color: var(--gold);
}
.process-step h3 {
font-size: 16px;
margin-bottom: var(--sp-3);
}
.process-step p {
color: var(--muted);
font-size: 14px;
line-height: 1.55;
margin: 0;
}
/* ============================================================
ADERVIS Platform — секция продуктов
============================================================ */
.apps-section {
background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
}
.apps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-6);
margin-top: var(--sp-2);
}
.app-card {
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--sp-8);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.app-card.is-live {
border-color: rgba(108, 0, 255, 0.22);
}
.app-card.is-live::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 100% 0%, rgba(108, 0, 255, 0.07), transparent 60%);
pointer-events: none;
}
.app-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
}
.app-card.is-live:hover {
border-color: rgba(108, 0, 255, 0.4);
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(108, 0, 255, 0.15);
}
.app-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 20px;
margin-bottom: var(--sp-4);
width: fit-content;
}
.app-status::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.app-status.live {
background: rgba(34, 197, 94, 0.1);
color: #4ade80;
border: 1px solid rgba(34, 197, 94, 0.25);
}
.app-status.dev {
background: rgba(246, 189, 58, 0.08);
color: var(--gold-soft);
border: 1px solid rgba(246, 189, 58, 0.22);
}
.app-status.soon {
background: rgba(255, 255, 255, 0.04);
color: var(--hint);
border: 1px solid var(--line);
}
.app-card h3 {
font-size: 20px;
margin-bottom: var(--sp-3);
position: relative;
z-index: 1;
}
.app-card > p {
color: var(--muted);
font-size: 14px;
line-height: 1.6;
flex-grow: 1;
margin: 0 0 var(--sp-6);
position: relative;
z-index: 1;
}
.app-card-footer {
display: flex;
align-items: center;
gap: var(--sp-4);
flex-wrap: wrap;
position: relative;
z-index: 1;
padding-top: var(--sp-4);
border-top: 1px solid var(--line);
}
.app-card-link {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
color: var(--gold-soft);
text-decoration: none;
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
transition: gap 0.2s ease, color 0.2s ease;
}
.app-card-link:hover {
gap: var(--sp-3);
color: var(--gold);
}
.app-card-link-secondary {
color: var(--muted);
text-decoration: none;
font-size: 13px;
transition: color 0.2s ease;
}
.app-card-link-secondary:hover {
color: var(--text);
}
.app-card-hint {
font-size: 13px;
color: var(--hint);
}
/* ============================================================
Каскад появления для новых сеток
============================================================ */
.who-grid > .reveal:nth-child(2),
.apps-grid > .reveal:nth-child(2) { transition-delay: 90ms; }
.who-grid > .reveal:nth-child(3),
.apps-grid > .reveal:nth-child(3) { transition-delay: 180ms; }
.who-grid > .reveal:nth-child(4) { transition-delay: 270ms; }
.process-row > .reveal:nth-child(2) { transition-delay: 90ms; }
.process-row > .reveal:nth-child(3) { transition-delay: 180ms; }
.process-row > .reveal:nth-child(4) { transition-delay: 270ms; }
/* Mobile для новых секций */
@media (max-width: 960px) {
.process-row {
grid-template-columns: repeat(2, 1fr);
row-gap: 40px;
}
.process-row::before {
display: none;
}
}
@media (max-width: 640px) {
.who-grid,
.apps-grid {
grid-template-columns: 1fr;
}
.process-row {
grid-template-columns: 1fr;
}
}
/* ============================================================
WOW-эффекты: улучшенный hover карточек, блеск на статах
============================================================ */
/* Пульсирующее золотое число при первом появлении */
@keyframes stat-pop {
0% { transform: scale(0.8); opacity: 0; }
70% { transform: scale(1.06); }
100% { transform: scale(1); opacity: 1; }
}
.stat-number.is-counting {
animation: stat-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* Shimmer-линия на service-card при hover */
.service-card::after {
content: "";
position: absolute;
top: -60%;
left: -60%;
width: 40%;
height: 200%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,0.04) 50%, transparent);
transform: skewX(-20deg);
transition: left 0.6s ease;
pointer-events: none;
z-index: 0;
}
.service-card:hover::after {
left: 140%;
}
/* Glow-ring на stat-card при hover */
.stat-card:hover {
box-shadow: 0 0 0 1px rgba(246, 189, 58, 0.2), 0 12px 40px rgba(246, 189, 58, 0.08);
}
/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal {
opacity: 1;
transform: none;
}
}
/* ============================================================
Toast-уведомление
============================================================ */
#adervis-toast {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--bg-elevated, #272727);
border: 1px solid var(--line);
color: var(--text);
font-size: 14px;
font-family: var(--font-ui);
padding: 12px 20px;
border-radius: 100px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
z-index: 9000;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
white-space: nowrap;
pointer-events: none;
}
#adervis-toast.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (max-width: 480px) {
#adervis-toast { font-size: 13px; padding: 10px 16px; bottom: 20px; max-width: 90vw; white-space: normal; text-align: center; }
}
/* ============================================================
Прогресс-бар прокрутки — тонкая золотая линия сверху
============================================================ */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
width: 0%;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 100%);
z-index: 200;
pointer-events: none;
transition: width 0.1s linear;
box-shadow: 0 0 10px rgba(246, 189, 58, 0.5);
}
/* ============================================================
Hero — точечная сетка и декоративный водяной знак
============================================================ */
.hero-section {
background-image: radial-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px);
background-size: 36px 36px;
}
.hero-bg-text {
position: absolute;
right: -1%;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(90px, 15vw, 192px);
letter-spacing: -0.04em;
color: transparent;
-webkit-text-stroke: 1px rgba(246, 189, 58, 0.042);
user-select: none;
pointer-events: none;
z-index: 0;
line-height: 1;
white-space: nowrap;
animation: hero-in 1.4s cubic-bezier(0.4, 0, 0.2, 1) 500ms both;
}
/* ============================================================
Бегущая строка направлений — между hero и статами
============================================================ */
.dir-marquee {
overflow: hidden;
padding: 13px 0;
background: var(--bg2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #fff 10%, #fff 90%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #fff 10%, #fff 90%, transparent 100%);
}
.dir-marquee-track {
display: inline-flex;
align-items: center;
width: max-content;
animation: dir-scroll 30s linear infinite;
}
@keyframes dir-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.dir-m-item {
font-family: var(--font-display);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--hint);
padding: 0 22px;
white-space: nowrap;
}
.dir-m-item.c-video { color: rgba(239, 68, 68, 0.52); }
.dir-m-item.c-design { color: rgba(139, 92, 246, 0.52); }
.dir-m-item.c-photo { color: rgba(246, 189, 58, 0.52); }
.dir-m-item.c-ai { color: rgba(34, 197, 94, 0.52); }
.dir-m-dot {
color: rgba(255, 255, 255, 0.1);
font-size: 18px;
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.dir-marquee-track { animation: none; }
}
/* ============================================================
Spotlight-эффект на карточках — пятно света за мышью
============================================================ */
.stat-card,
.service-card,
.who-card,
.app-card,
.step-card {
background-image: radial-gradient(
circle 280px at var(--mx, -400px) var(--my, -400px),
rgba(255, 255, 255, 0.022),
transparent 55%
);
}
/* stat-card и step-card нужен position: relative для возможных ::after */
.stat-card {
position: relative;
}
.step-card {
position: relative;
overflow: hidden;
}
/* ============================================================
Hero — двухколоночный layout с KPI-панелью справа
============================================================ */
.hero-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--sp-16);
align-items: center;
}
.hero-sidebar {
display: flex;
flex-direction: column;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
overflow: hidden;
min-width: 188px;
animation: hero-in 0.7s cubic-bezier(0.4, 0, 0.2, 1) 350ms both;
}
.hero-kpi {
display: flex;
flex-direction: column;
gap: 3px;
padding: var(--sp-5) var(--sp-6);
background: var(--bg2);
transition: background 0.2s ease;
}
.hero-kpi:hover {
background: var(--bg3);
}
.hero-kpi-num {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.02em;
line-height: 1;
color: var(--gold);
}
.hero-kpi-label {
font-size: 12px;
color: var(--muted);
line-height: 1.4;
}
@media (max-width: 900px) {
.hero-grid {
grid-template-columns: 1fr;
}
.hero-sidebar {
display: none;
}
}
/* ============================================================
Custom cursor — кольцо с лёгким запаздыванием за мышью
============================================================ */
.cursor-ring {
position: fixed;
width: 34px;
height: 34px;
border: 1.5px solid rgba(246, 189, 58, 0.45);
border-radius: 50%;
pointer-events: none;
z-index: 100000;
transform: translate(-50%, -50%);
will-change: left, top;
transition: width 0.28s ease, height 0.28s ease, border-color 0.28s ease, opacity 0.35s ease;
opacity: 0;
}
.cursor-dot {
position: fixed;
width: 5px;
height: 5px;
background: var(--gold);
border-radius: 50%;
pointer-events: none;
z-index: 100001;
transform: translate(-50%, -50%);
will-change: left, top;
transition: width 0.2s ease, height 0.2s ease, opacity 0.3s ease;
opacity: 0;
}
.cursor-ring.is-hover {
width: 54px;
height: 54px;
border-color: rgba(246, 189, 58, 0.28);
}
.cursor-dot.is-hover {
width: 3px;
height: 3px;
opacity: 0.4;
}
body.has-custom-cursor,
body.has-custom-cursor *:not(input):not(textarea):not(select):not([contenteditable]) {
cursor: none;
}
@media (prefers-reduced-motion: reduce) {
.cursor-ring,
.cursor-dot {
display: none;
}
}
/* ============================================================
Media frames — визуальные паттерны по типу направления
============================================================ */
/* Видео — вертикальные полосы как монтажная дорожка */
.media-frame[data-dir="video"] {
background-image:
repeating-linear-gradient(90deg, transparent 0, transparent 18px,
rgba(239, 68, 68, 0.045) 18px, rgba(239, 68, 68, 0.045) 19px),
linear-gradient(160deg, color-mix(in srgb, var(--c-video) 14%, transparent), var(--bg2) 65%);
}
/* Дизайн — сетка как макетная бумага */
.media-frame[data-dir="design"] {
background-image:
repeating-linear-gradient(0deg, transparent 0, transparent 22px,
rgba(139, 92, 246, 0.04) 22px, rgba(139, 92, 246, 0.04) 23px),
repeating-linear-gradient(90deg, transparent 0, transparent 22px,
rgba(139, 92, 246, 0.04) 22px, rgba(139, 92, 246, 0.04) 23px),
linear-gradient(160deg, color-mix(in srgb, var(--c-design) 14%, transparent), var(--bg2) 65%);
}
/* Фото — концентрические кольца диафрагмы */
.media-frame[data-dir="photo"] {
background-image:
radial-gradient(circle 28% at 50% 55%, transparent 94%,
rgba(246, 189, 58, 0.07) 95%, transparent 96%),
radial-gradient(circle 44% at 50% 55%, transparent 94%,
rgba(246, 189, 58, 0.05) 95%, transparent 96%),
radial-gradient(circle 60% at 50% 55%, transparent 94%,
rgba(246, 189, 58, 0.03) 95%, transparent 96%),
linear-gradient(160deg, color-mix(in srgb, var(--c-photo) 14%, transparent), var(--bg2) 65%);
}
/* ИИ — точечная матрица */
.media-frame[data-dir="ai"] {
background-image:
radial-gradient(circle 1.8px at 50% 50%, rgba(34, 197, 94, 0.08) 100%, transparent 100%),
linear-gradient(160deg, color-mix(in srgb, var(--c-ai) 14%, transparent), var(--bg2) 65%);
background-size: 28px 28px, 100% 100%;
}
/* ============================================================
AI-кейсы — видео и фото-кейсы на странице /ai
============================================================ */
.ai-cases {
display: flex;
flex-direction: column;
gap: var(--sp-8);
margin-top: var(--sp-12);
}
.ai-case-card {
background: var(--bg2);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
overflow: hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.ai-case-card:hover {
border-color: rgba(34, 197, 94, 0.22);
box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.08);
}
/* Responsive video 16:9 */
.video-wrap {
position: relative;
padding-bottom: 56.25%;
background: #0d0d0d;
}
.video-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
display: block;
}
/* Заглушка для VK-видео — загружает iframe только по клику */
.video-poster {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg3);
aspect-ratio: 16 / 9;
cursor: pointer;
}
.video-poster__thumb {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(135deg,
rgba(108, 0, 255, 0.18) 0%,
rgba(246, 189, 58, 0.12) 50%,
rgba(239, 68, 68, 0.15) 100%),
var(--bg3);
}
.video-poster__year {
position: absolute;
bottom: 14px;
left: 18px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.45);
}
.video-poster__play {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(8px);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
padding: 0;
}
.video-poster:hover .video-poster__play {
background: rgba(246, 189, 58, 0.85);
color: #141414;
transform: scale(1.08);
box-shadow: 0 0 24px rgba(246, 189, 58, 0.40);
}
/* После клика — разворачивается в iframe */
.video-poster iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
.ai-case-info {
padding: var(--sp-8);
}
.ai-eyebrow {
color: var(--c-ai) !important;
opacity: 0.85;
}
.ai-case-info h3 {
font-family: var(--font-display);
font-size: clamp(15px, 2vw, 21px);
font-weight: 700;
letter-spacing: -0.02em;
margin: var(--sp-3) 0 var(--sp-4);
line-height: 1.35;
}
.ai-case-info p {
color: var(--muted);
font-size: 15px;
line-height: 1.7;
margin: 0 0 var(--sp-3);
}
.ai-case-result {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: rgba(34, 197, 94, 0.07);
border: 1px solid rgba(34, 197, 94, 0.22);
border-radius: 100px;
font-size: 13px;
font-weight: 600;
color: var(--c-ai);
margin: var(--sp-2) 0 var(--sp-4);
}
.ai-case-tags {
list-style: none;
padding: 0;
margin: var(--sp-4) 0 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ai-case-tags li {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--hint);
background: var(--bg3);
border: 1px solid var(--line);
padding: 4px 12px;
border-radius: 100px;
}
/* BRAIT фото-кейс — сетка 3×3 */
.brait-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
}
.brait-photo {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--bg3);
}
.brait-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s ease;
}
.brait-photo:hover img {
transform: scale(1.06);
}
.brait-photo--placeholder {
background: linear-gradient(135deg, var(--bg3) 0%, var(--bg-elevated) 100%);
position: relative;
}
.brait-photo--placeholder::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg,
transparent 0,
transparent 9px,
rgba(34, 197, 94, 0.03) 9px,
rgba(34, 197, 94, 0.03) 10px
);
}
@media (max-width: 600px) {
.brait-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================================
"Нам доверяют" — скрываем тикер на страницах без направлений
============================================================ */
body.no-clients .clients-ticker-section {
display: none;
}
/* ============================================================
Process — WOW редизайн секции "Процесс" на главной
============================================================ */
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line);
border-radius: var(--radius-xl);
overflow: hidden;
margin-top: var(--sp-12);
}
.process-card {
background: var(--bg2);
padding: var(--sp-8) var(--sp-6);
position: relative;
overflow: hidden;
transition: background 0.3s ease;
}
.process-card:hover {
background: var(--bg3);
}
.process-card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 0;
background: linear-gradient(90deg, var(--gold), var(--gold-soft));
transition: width 0.45s ease;
}
.process-card:hover::after {
width: 100%;
}
.process-card-bg-num {
position: absolute;
bottom: -16px;
right: -4px;
font-family: var(--font-display);
font-size: 108px;
font-weight: 700;
color: rgba(255, 255, 255, 0.035);
line-height: 1;
pointer-events: none;
user-select: none;
letter-spacing: -0.04em;
}
.process-card-step {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--hint);
margin-bottom: var(--sp-6);
text-transform: uppercase;
}
.process-card-icon {
width: 42px;
height: 42px;
border-radius: var(--radius-md);
background: rgba(246, 189, 58, 0.07);
border: 1px solid rgba(246, 189, 58, 0.14);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
margin-bottom: var(--sp-6);
transition: background 0.25s, border-color 0.25s;
}
.process-card:hover .process-card-icon {
background: rgba(246, 189, 58, 0.13);
border-color: rgba(246, 189, 58, 0.28);
}
.process-card h3 {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
margin: 0 0 var(--sp-3);
line-height: 1.3;
}
.process-card p {
font-size: 14px;
color: var(--muted);
line-height: 1.65;
margin: 0;
}
@media (max-width: 760px) {
.process-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 460px) {
.process-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
Hero sidebar — редизайн KPI-панели
============================================================ */
.hero-sidebar-v2 {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--line);
border-radius: var(--radius-xl);
overflow: hidden;
min-width: 200px;
animation: hero-in 0.7s cubic-bezier(0.4, 0, 0.2, 1) 350ms both;
background: var(--bg2);
position: relative;
}
.hero-sidebar-v2::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: 0.5;
}
.hero-sidebar-header {
padding: 12px var(--sp-6) 10px;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
gap: 6px;
}
.hero-sidebar-header-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hint);
}
.hero-kpi-v2 {
display: flex;
align-items: center;
gap: var(--sp-4);
padding: 14px var(--sp-6);
border-bottom: 1px solid var(--line);
transition: background 0.2s ease;
position: relative;
overflow: hidden;
}
.hero-kpi-v2:last-of-type {
border-bottom: none;
}
.hero-kpi-v2:hover {
background: var(--bg3);
}
.hero-kpi-v2-num {
font-family: var(--font-display);
font-weight: 700;
font-size: 24px;
letter-spacing: -0.03em;
line-height: 1;
color: var(--gold);
min-width: 60px;
}
.hero-kpi-v2-label {
font-size: 12px;
color: var(--muted);
line-height: 1.35;
}
.hero-sidebar-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px var(--sp-6);
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 13px;
font-weight: 500;
cursor: pointer;
background: transparent;
border-left: none;
border-right: none;
border-bottom: none;
font-family: var(--font-ui);
transition: color 0.2s, background 0.2s;
width: 100%;
}
.hero-sidebar-cta:hover {
color: var(--gold);
background: rgba(246, 189, 58, 0.05);
}
.hero-sidebar-cta svg {
color: var(--c-video);
transition: transform 0.2s;
}
.hero-sidebar-cta:hover svg {
transform: scale(1.15);
}
@media (max-width: 900px) {
.hero-sidebar-v2 {
display: none;
}
}
/* ============================================================
Video gallery — табы и сетка карточек с VK видео
============================================================ */
.vg-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: var(--sp-8);
padding: var(--sp-4) 0;
border-bottom: 1px solid var(--line);
}
.vg-tab {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 18px;
border-radius: 100px;
border: 1px solid var(--line);
background: transparent;
color: var(--muted);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.vg-tab:hover {
color: var(--text);
border-color: rgba(239, 68, 68, 0.4);
}
.vg-tab.is-active {
background: var(--c-video);
border-color: var(--c-video);
color: #fff;
}
.vg-tab-count {
font-size: 11px;
font-weight: 400;
opacity: 0.65;
}
.vg-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
@media (max-width: 1100px) { .vg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .vg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .vg-grid { grid-template-columns: 1fr; } }
.vg-card {
cursor: pointer;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg2);
border: 1px solid var(--line);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.vg-card:hover {
transform: translateY(-4px);
border-color: rgba(239, 68, 68, 0.3);
box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.vg-card[data-hidden] { display: none; }
.vg-card[data-overflow] { display: none; }
.vg-show-more {
text-align: center;
padding: 36px 0 4px;
}
.vg-show-more .btn {
gap: 8px;
min-width: 200px;
}
.vg-thumb {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, #1a0a0a 0%, #2c1010 60%, #1a0808 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.vg-thumb::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 70% at 30% 40%, rgba(239,68,68,0.18) 0%, transparent 70%);
transition: opacity 0.3s ease;
}
.vg-thumb.has-thumb::before {
opacity: 0;
}
.vg-thumb.has-thumb {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.vg-thumb.has-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.28) 50%, rgba(0,0,0,0.22) 100%);
pointer-events: none;
z-index: 0;
}
.vg-play-btn {
position: relative;
z-index: 1;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255,255,255,0.07);
border: 1.5px solid rgba(255,255,255,0.14);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.75);
transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.vg-card:hover .vg-play-btn {
background: var(--c-video);
border-color: var(--c-video);
color: #fff;
transform: scale(1.15);
box-shadow: 0 0 24px rgba(245,36,36,0.55), 0 0 60px rgba(245,36,36,0.18);
}
.vg-cat-badge {
position: absolute;
top: 9px;
left: 9px;
z-index: 1;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.09);
padding: 3px 8px;
border-radius: 100px;
backdrop-filter: blur(4px);
}
.vg-info {
padding: 10px 13px 13px;
min-height: 54px; /* резервируем место на 2 строки — все карточки одной высоты */
}
.vg-info h4 {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
color: var(--text);
margin: 0;
line-height: 1.4;
letter-spacing: -0.01em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Категориальные цвета карточек */
.vg-card[data-cat="concert"] .vg-thumb { background: linear-gradient(135deg, #0e0a18 0%, #1c1230 60%, #0e0a18 100%); }
.vg-card[data-cat="concert"] .vg-thumb::before { background: radial-gradient(ellipse 70% 70% at 30% 40%, rgba(139,92,246,0.18) 0%, transparent 70%); }
.vg-card[data-cat="concert"]:hover { border-color: rgba(139,92,246,0.3); }
.vg-card[data-cat="event"] .vg-thumb { background: linear-gradient(135deg, #0a1410 0%, #0e2018 60%, #0a1410 100%); }
.vg-card[data-cat="event"] .vg-thumb::before { background: radial-gradient(ellipse 70% 70% at 30% 40%, rgba(34,197,94,0.15) 0%, transparent 70%); }
.vg-card[data-cat="event"]:hover { border-color: rgba(34,197,94,0.3); }
.vg-card[data-cat="clip"] .vg-thumb { background: linear-gradient(135deg, #141008 0%, #221a08 60%, #141008 100%); }
.vg-card[data-cat="clip"] .vg-thumb::before { background: radial-gradient(ellipse 70% 70% at 30% 40%, rgba(246,189,58,0.15) 0%, transparent 70%); }
.vg-card[data-cat="clip"]:hover { border-color: rgba(246,189,58,0.3); }
.vg-card[data-cat="clip"]:hover { border-color: rgba(246,189,58,0.3); }
/* Лайтбокс видео */
.video-lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(0,0,0,0.92);
backdrop-filter: blur(10px);
align-items: center;
justify-content: center;
padding: var(--sp-6);
}
.video-lightbox.is-open {
display: flex;
}
.vl-container {
position: relative;
width: 100%;
max-width: 1140px;
}
.vl-ratio {
position: relative;
padding-bottom: 56.25%;
background: #000;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 32px 96px rgba(0,0,0,0.7);
}
.vl-ratio iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
display: block;
}
.vl-close {
position: absolute;
top: -52px;
right: 0;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.7);
cursor: pointer;
font-size: 20px;
font-family: var(--font-ui);
transition: background 0.2s, color 0.2s;
}
.vl-close:hover {
background: rgba(255,255,255,0.16);
color: #fff;
}
/* ── Video page: selling enhancements ─────────────────────────── */
/* Hero — full-screen with cycling background images */
.vp-hero {
position: relative;
min-height: 100dvh;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.vp-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.vp-hero__bg-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.2s ease;
}
.vp-hero__bg-slide.is-active { opacity: 1; }
.vp-hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.25) 100%);
}
.vp-hero__content {
position: relative;
z-index: 2;
padding: var(--sp-16) 0 var(--sp-16);
display: flex;
flex-direction: column;
gap: var(--sp-5);
max-width: 720px;
}
.vp-hero__title {
font-size: clamp(36px, 5.5vw, 72px);
line-height: 1.06;
letter-spacing: -0.025em;
font-weight: 700;
}
.vp-hero__desc {
color: rgba(255,255,255,0.55);
font-size: 17px;
line-height: 1.7;
max-width: 560px;
}
/* ── Hero slide progress line ── */
.vp-hero__progress {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
z-index: 3;
display: flex;
gap: 5px;
padding: 0 32px;
}
.vp-hero__progress-track {
flex: 1;
height: 2px;
background: rgba(255,255,255,0.18);
border-radius: 2px;
overflow: hidden;
}
.vp-hero__progress-track::after {
content: '';
display: block;
height: 100%;
background: rgba(255,255,255,0.9);
transform: scaleX(0);
transform-origin: left;
}
.vp-hero__progress-track.is-active::after {
animation: vp-progress-fill 4s linear forwards;
}
.vp-hero__progress-track.is-done::after {
transform: scaleX(1);
}
@keyframes vp-progress-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.vp-hero__progress-track.is-active::after { animation: none; transform: scaleX(1); }
}
/* Process timeline */
.vp-process {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
}
.vp-step {
padding: var(--sp-8) var(--sp-6);
background: var(--bg2);
border-right: 1px solid var(--line);
transition: background 0.25s;
}
.vp-step:last-child { border-right: none; }
.vp-step:hover { background: var(--bg3); }
.vp-step__num {
display: block;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-video);
margin-bottom: var(--sp-4);
}
.vp-step__title {
font-size: 16px;
font-weight: 600;
margin-bottom: var(--sp-2);
color: var(--fg);
}
.vp-step__text {
font-size: 13.5px;
color: var(--muted);
line-height: 1.55;
margin: 0;
}
@media (max-width: 860px) {
.vp-process { grid-template-columns: repeat(2, 1fr); }
.vp-step:nth-child(2) { border-right: none; }
.vp-step:nth-child(1),
.vp-step:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 480px) {
.vp-process { grid-template-columns: 1fr; }
.vp-step { border-right: none; border-bottom: 1px solid var(--line); }
.vp-step:last-child { border-bottom: none; }
}
/* Featured showreel card — background image via ![]()
*/
.vp-featured__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 0;
}
/* Featured showreel card */
.vp-featured {
cursor: pointer;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
background: #120808;
aspect-ratio: 16 / 7;
margin-bottom: var(--sp-8);
display: flex;
align-items: flex-end;
justify-content: flex-start;
transition: border-color 0.3s;
outline: none;
}
.vp-featured::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.08) 32%, transparent 52%);
pointer-events: none;
}
.vp-featured:hover,
.vp-featured:focus-visible {
border-color: rgba(245,36,36,0.4);
}
/* Play button — center */
.vp-featured__btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--c-video);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
box-shadow: 0 0 48px rgba(245,36,36,0.5), 0 0 100px rgba(245,36,36,0.18);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}
.vp-featured:hover .vp-featured__btn,
.vp-featured:focus-visible .vp-featured__btn {
transform: translate(-50%, -50%) scale(1.12);
box-shadow: 0 0 70px rgba(245,36,36,0.65), 0 0 140px rgba(245,36,36,0.25);
}
/* Text — bottom left */
.vp-featured__inner {
position: absolute;
bottom: var(--sp-6);
left: var(--sp-6);
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.vp-featured__tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-video);
background: rgba(245,36,36,0.1);
border: 1px solid rgba(245,36,36,0.22);
border-radius: 20px;
padding: 4px 12px;
}
.vp-featured__text {
display: flex;
flex-direction: column;
gap: 8px;
}
.vp-featured__label {
font-size: 14px;
color: rgba(255,255,255,0.45);
max-width: 400px;
}
/* ── Backstage (bts) section ─────────────────────────────────── */
.bts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 10px;
margin-top: var(--sp-8);
}
.bts-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--bg3);
}
.bts-card--tall {
grid-row: span 2;
aspect-ratio: auto;
}
.bts-card--wide {
grid-column: span 2;
}
.bts-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
}
.bts-card:hover img { transform: scale(1.04); }
.bts-card__label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
color: rgba(255,255,255,0.75);
font-size: 12px;
font-family: var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 20px 16px 12px;
pointer-events: none;
}
.bts-facts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 10px;
}
.bts-fact {
background: var(--bg3);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--sp-6) var(--sp-4);
display: flex;
flex-direction: column;
gap: 4px;
}
.bts-fact strong {
font-family: var(--font-display);
font-size: clamp(22px, 2.8vw, 32px);
font-weight: 700;
color: var(--c-video);
line-height: 1;
}
.bts-fact span {
font-size: 13px;
color: var(--muted);
line-height: 1.45;
}
@media (max-width: 860px) {
.bts-grid { grid-template-columns: repeat(2, 1fr); }
.bts-card--tall { grid-row: span 1; aspect-ratio: 4/3; }
.bts-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.bts-grid { grid-template-columns: 1fr; }
.bts-card--wide { grid-column: span 1; }
.bts-facts { grid-template-columns: repeat(2, 1fr); }
}
/* ── Design page: liquid background ─────────────────────────────── */
.design-svg-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.design-flow-wrap {
position: absolute !important;
inset: 0;
z-index: 0 !important;
overflow: hidden;
pointer-events: none;
background: #050210;
}
.design-bg-base {
position: absolute;
inset: -15%; /* запас для параллакс-сдвига */
background: url('../design/BG_design.jpg') center / cover no-repeat;
opacity: 0.15; /* 15% — очень тонкая текстура */
will-change: transform;
}
.design-bg-fluid {
position: absolute;
inset: -20%;
/* 60% — сдвиг вправо от центра */
background: url('../design/BG-F.png') 60% center / cover no-repeat;
mix-blend-mode: screen;
opacity: 0.95;
filter: url(#design-liquid) saturate(1.6) brightness(1.15);
animation: designFluidDrift 32s ease-in-out infinite;
will-change: transform;
}
.design-bg-bottom-fade {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 55%;
z-index: 2;
background: linear-gradient(to bottom, transparent 0%, rgba(5, 2, 16, 0.98) 100%);
pointer-events: none;
}
@keyframes designFluidDrift {
0% { transform: translate( 0%, 0%) scale(1.18); }
25% { transform: translate( 2.5%, 1.5%) scale(1.22); }
50% { transform: translate(-1.5%, 2.5%) scale(1.15); }
75% { transform: translate(-2.5%, -1.5%) scale(1.20); }
100% { transform: translate( 0%, 0%) scale(1.18); }
}
.design-bg-vignette {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 110% 100% at 50% 45%,
transparent 25%,
rgba(5, 2, 16, 0.45) 65%,
rgba(5, 2, 16, 0.85) 100%
);
}
/* aurora скрываем — фон создаёт свою атмосферу */
.hero-section[data-dir="design"] .page-aurora { display: none; }
/* ── Design promo block ──────────────────────────────────────────── */
.design-promo-block {
position: relative;
overflow: hidden;
margin: 0;
}
.dpb-bg {
position: absolute;
inset: -8%;
background: url('../design/BG_1.jpg') center / cover no-repeat;
z-index: 0;
will-change: transform;
}
.dpb-shade {
position: absolute;
inset: 0;
z-index: 1; /* под BG_2.png */
background: rgba(4, 2, 12, 0.45);
}
.dpb-mid {
position: absolute;
inset: -12%;
background: url('../design/BG_2.png') center / cover no-repeat;
mix-blend-mode: screen;
filter: brightness(4.5) saturate(2.2) contrast(1.05);
z-index: 2; /* над shade — свет виден поверх затемнения */
will-change: transform;
}
/* Двухколоночная сетка: 38% текст / 62% макет */
.dpb-grid {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 38% 62%;
align-items: center;
gap: 0;
padding: clamp(64px, 10vh, 112px) 0;
min-height: 72vh;
}
.dpb-title {
font-family: var(--font-display);
font-size: clamp(30px, 6.2vw, 82px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.028em;
color: #fff;
margin: var(--sp-4) 0 var(--sp-5);
}
.dpb-accent { color: var(--c-design); }
.dpb-desc {
color: rgba(255, 255, 255, 0.58);
font-size: 16px;
line-height: 1.65;
max-width: 380px;
margin-bottom: var(--sp-8);
}
/* Правая колонка занимает всю высоту блока */
.dpb-visual {
position: relative;
align-self: stretch;
min-height: 500px;
}
/* Outer — JS cursor parallax (transform без анимации) */
.dpb-mockup-wrap {
position: absolute;
inset: -18% -8% -18% -12%; /* немного крупнее */
will-change: transform;
}
/* Inner — float анимация на изображении, не конфликтует с JS */
.dpb-mockup-float {
width: 100%;
height: 100%;
background: url('../design/BG_3.png') center / contain no-repeat;
animation: dpbFloat 9s ease-in-out infinite;
filter: drop-shadow(0 40px 90px rgba(119, 51, 255, 0.50));
}
@keyframes dpbFloat {
0%, 100% { transform: translateY(0) rotate(-1.5deg) scale(1.00); }
50% { transform: translateY(-20px) rotate( 0.8deg) scale(1.02); }
}
@media (max-width: 900px) {
.dpb-grid {
grid-template-columns: 1fr;
min-height: auto;
padding: clamp(48px, 7vh, 80px) 0;
}
.dpb-visual { display: none; }
.dpb-desc { max-width: 100%; }
}
@media (max-width: 540px) {
.dpb-title { font-size: clamp(26px, 7.5vw, 36px); }
.dpb-text .hero-buttons { flex-direction: column; }
.dpb-text .hero-buttons .btn { width: 100%; text-align: center; justify-content: center; }
}
/* ── Backstage video grid ──────────────────────────────────────── */
.bts-videos {
margin-top: var(--sp-10);
}
.bts-videos__label {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-bottom: var(--sp-5);
}
.bts-vid-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.bts-vid-card {
cursor: pointer;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg2);
border: 1px solid var(--line);
transition: transform 0.25s ease, border-color 0.25s ease;
}
.bts-vid-card:hover {
transform: translateY(-4px);
border-color: rgba(245, 36, 36, 0.3);
}
.bts-vid-card:hover .vg-play-btn {
background: var(--c-video);
border-color: var(--c-video);
color: #fff;
}
@media (max-width: 1100px) { .bts-vid-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .bts-vid-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .bts-vid-grid { grid-template-columns: 1fr; } }
/* Mid-page CTA banner */
.vp-cta-banner {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--sp-10);
background: linear-gradient(120deg, #151200 0%, #111 40%, #0d0d0d 100%);
border: 1px solid rgba(246,189,58,0.22);
border-radius: var(--radius-lg);
padding: var(--sp-14) var(--sp-10);
margin-top: var(--sp-10);
box-shadow: 0 0 80px rgba(246,189,58,0.05), inset 0 1px 0 rgba(246,189,58,0.12);
}
.vp-cta-banner::before {
content: '';
position: absolute;
top: -100px; left: -100px;
width: 500px; height: 400px;
background: radial-gradient(ellipse, rgba(246,189,58,0.13) 0%, transparent 65%);
pointer-events: none;
}
.vp-cta-banner::after {
content: '';
position: absolute;
bottom: -60px; right: 260px;
width: 260px; height: 260px;
background: radial-gradient(circle, rgba(246,189,58,0.05) 0%, transparent 65%);
pointer-events: none;
}
.vp-cta-banner__text {
position: relative;
z-index: 1;
}
.vp-cta-banner__text h3 {
font-size: clamp(28px, 3.6vw, 52px);
font-weight: 900;
line-height: 1.08;
margin-bottom: 14px;
letter-spacing: -0.03em;
color: #fff;
}
.vp-cta-banner__text p {
color: var(--muted);
font-size: 15px;
max-width: 460px;
margin: 0;
line-height: 1.6;
}
.vp-cta-banner__actions {
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
min-width: 200px;
position: relative;
z-index: 1;
}
.vp-cta-banner__actions .btn {
width: 100%;
justify-content: center;
text-align: center;
}
/* Contact trust line */
.vp-trust-line {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px 20px;
margin-top: var(--sp-8);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.42);
}
.vp-trust-line span { color: rgba(255,255,255,0.18); user-select: none; }
@media (max-width: 760px) {
.vp-cta-banner { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-10) var(--sp-6); }
.vp-cta-banner__actions { min-width: 0; width: 100%; }
}
@media (max-width: 680px) {
.vp-hero__content { padding: var(--sp-10) 0 var(--sp-10); gap: var(--sp-4); }
.vp-hero__title { font-size: clamp(30px, 7vw, 48px); }
.vp-hero__desc { font-size: 15px; }
}
@media (max-width: 480px) {
.vp-featured { aspect-ratio: 4 / 3; }
.vp-hero__content { padding: var(--sp-8) 0 var(--sp-8); }
}
[data-theme="light"] .vp-trust-line { color: rgba(0,0,0,0.40); }
[data-theme="light"] .vp-trust-line span { color: rgba(0,0,0,0.16); }
[data-theme="light"] .contact-section .container {
background: linear-gradient(140deg, rgba(246,189,58,0.07) 0%, var(--bg2) 45%, var(--bg2) 70%, rgba(246,189,58,0.03) 100%);
border-color: rgba(246,189,58,0.28);
}
[data-theme="light"] .vp-featured { background: linear-gradient(135deg, #f5e8e8 0%, #eddcdc 40%, #f5e8e8 100%); }
[data-theme="light"] .vp-featured::before { background: radial-gradient(ellipse 70% 80% at 50% 60%, rgba(200,50,50,0.07) 0%, transparent 70%); }
[data-theme="light"] .vp-step { background: var(--bg2); }
[data-theme="light"] .vp-step:hover { background: var(--bg3); }
/* ── Design portfolio bento grid ─────────────────────────────── */
.dp-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.dp-case {
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
background: var(--bg3);
border: 1px solid var(--line);
display: block;
aspect-ratio: 1;
}
.dp-case--wide {
grid-column: span 2;
aspect-ratio: 16 / 9;
}
.dp-case--full {
grid-column: 1 / -1;
aspect-ratio: 16 / 7;
}
@media (max-width: 700px) { .dp-case--full { aspect-ratio: 16 / 9; } }
.dp-case__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.dp-case:hover .dp-case__img {
transform: scale(1.04);
}
.dp-case__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%);
opacity: 0;
transition: opacity 0.3s;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
gap: 4px;
pointer-events: none;
}
.dp-case:hover .dp-case__overlay { opacity: 1; }
.dp-case__client {
font-size: 15px;
font-weight: 600;
color: #fff;
}
.dp-case__type {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-design);
}
.dp-brand {
background: #111;
border: 1px solid rgba(255,255,255,0.07);
border-radius: var(--radius-lg);
padding: 24px 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
transition: border-color 0.25s, transform 0.25s;
aspect-ratio: 1;
}
.dp-brand:hover {
border-color: rgba(119, 51, 255, 0.4);
transform: translateY(-3px);
}
.dp-brand__logo {
max-height: 48px;
max-width: 80%;
object-fit: contain;
filter: brightness(1);
transition: filter 0.25s;
}
.dp-brand:hover .dp-brand__logo { filter: brightness(1.15); }
.dp-brand__name {
font-size: 10px;
color: rgba(255,255,255,0.35);
text-align: center;
font-family: var(--font-mono);
letter-spacing: 0.05em;
text-transform: uppercase;
}
@media (max-width: 900px) {
.dp-grid { grid-template-columns: repeat(3, 1fr); }
.dp-case--wide { grid-column: span 3; aspect-ratio: 16 / 7; }
}
@media (max-width: 580px) {
.dp-grid { grid-template-columns: repeat(2, 1fr); }
.dp-case--wide { grid-column: span 2; }
.dp-brand { padding: 16px 12px; gap: 8px; }
.dp-brand__logo { max-height: 38px; }
}
/* ═══════════════════════════════════════════════════════════════
Lesse-style footer
═══════════════════════════════════════════════════════════════ */
.footer-lesse {
background: #090909;
border-top: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
}
.footer-lesse__top {
display: flex;
gap: 48px;
padding: clamp(48px,7vw,96px) clamp(32px,4vw,96px) clamp(40px,5vw,64px);
max-width: 1400px;
margin: 0 auto;
}
.footer-lesse__brand {
flex: 0 0 220px;
display: flex;
flex-direction: column;
gap: 16px;
}
.footer-lesse__tagline {
font-family: var(--font-ui);
font-size: 13px;
color: rgba(255,255,255,0.38);
line-height: 1.55;
margin: 0;
}
.footer-lesse__contacts {
display: flex;
flex-direction: column;
gap: 6px;
}
.footer-lesse__contacts a {
font-family: var(--font-ui);
font-size: 13px;
color: rgba(255,255,255,0.45);
text-decoration: none;
transition: color 0.2s;
}
.footer-lesse__contacts a:hover { color: var(--gold); }
.footer-lesse__cols {
flex: 1;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 32px;
}
.footer-lesse__col {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-lesse__col-title {
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold);
opacity: 0.85;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(246, 189, 58, 0.12);
}
.footer-lesse__col a {
font-family: var(--font-ui);
font-size: 13.5px;
color: rgba(255,255,255,0.52);
text-decoration: none;
transition: color 0.18s, padding-left 0.18s;
line-height: 1.45;
display: block;
}
.footer-lesse__col a:hover {
color: rgba(255,255,255,0.90);
padding-left: 4px;
}
/* Гигантский wordmark */
.footer-lesse__brand-block {
position: relative;
overflow: hidden;
}
.footer-lesse__wordmark {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(14vw, 18vw, 260px);
line-height: 0.82;
letter-spacing: -0.03em;
color: rgba(255,255,255,0.035);
margin: 0;
padding: 0 clamp(16px,3vw,48px);
user-select: none;
white-space: nowrap;
}
.footer-lesse__social-row {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
padding: 20px clamp(24px,5vw,80px) 14px;
border-top: 1px solid rgba(255,255,255,0.06);
flex-wrap: wrap;
}
.footer-lesse__social-row a {
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(255,255,255,0.38);
text-decoration: none;
transition: color 0.2s;
}
.footer-lesse__social-row a:hover { color: #fff; }
.footer-lesse__legal-row {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 0 clamp(24px,5vw,80px) 28px;
flex-wrap: wrap;
}
.footer-lesse__copy {
font-family: var(--font-ui);
font-size: 12px;
color: rgba(255,255,255,0.22);
}
.footer-lesse__legal-link {
font-family: var(--font-ui);
font-size: 12px;
color: rgba(255,255,255,0.22);
text-decoration: none;
transition: color 0.2s;
}
.footer-lesse__legal-link:hover { color: rgba(255,255,255,0.55); }
@media (max-width: 1100px) {
.footer-lesse__cols { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 760px) {
.footer-lesse__top { flex-direction: column; gap: 32px; }
.footer-lesse__brand { flex: none; }
.footer-lesse__cols { grid-template-columns: repeat(2,1fr); gap: 24px; }
.footer-lesse__wordmark { font-size: 22vw; }
.footer-lesse__social-row { gap: 18px; }
.footer-lesse__legal-row { gap: 12px; }
.footer-lesse__copy { width: 100%; text-align: center; }
}
/* ============================================================
3D HERO — Aurora background + Three.js canvas layer
Добавляет золотое свечение за прозрачным canvas с 3D лого
============================================================ */
/* Hero становится viewport-high для canvas */
.hero-section {
min-height: 100svh;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Aurora layer — behind canvas */
.hero-aurora {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.hero-aurora__blob {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
/* blob-1 — пурпурный (#6C00FF), верхний правый угол */
.hero-aurora__blob--1 {
width: min(900px, 72vw);
height: min(900px, 72vw);
background: radial-gradient(ellipse at 42% 36%,
rgba(108, 0, 255, 0.65) 0%,
rgba(108, 0, 255, 0.24) 40%,
transparent 68%);
filter: blur(80px);
top: -25%; right: -8%;
animation: heroAurora1 10s ease-in-out infinite;
}
/* blob-2 — красный (#F22822), нижний левый */
.hero-aurora__blob--2 {
width: min(620px, 54vw);
height: min(620px, 54vw);
background: radial-gradient(ellipse at 50% 50%,
rgba(242, 40, 34, 0.45) 0%,
rgba(108, 0, 255, 0.14) 48%,
transparent 70%);
filter: blur(90px);
bottom: -8%; left: 10%;
animation: heroAurora2 14s ease-in-out infinite;
}
/* blob-3 — пурпурный приглушённый, центрально-левый */
.hero-aurora__blob--3 {
width: min(380px, 32vw);
height: min(380px, 32vw);
background: radial-gradient(ellipse at 50% 50%,
rgba(108, 0, 255, 0.24) 0%,
transparent 65%);
filter: blur(70px);
top: 28%; left: -4%;
animation: heroAurora3 17s ease-in-out infinite;
}
/* blob-4 — красный (#F22822), правый низ — перекликается с blob-2 */
.hero-aurora__blob--4 {
width: min(460px, 40vw);
height: min(460px, 40vw);
background: radial-gradient(ellipse at 50% 50%,
rgba(242, 40, 34, 0.22) 0%,
transparent 68%);
filter: blur(80px);
bottom: 10%; right: 8%;
animation: heroAurora4 12s ease-in-out infinite;
}
@keyframes heroAurora1 {
0% { transform: translate(0, 0) scale(1); opacity: .85; }
25% { transform: translate(-5vw, 5vh) scale(1.12); opacity: .65; }
55% { transform: translate(4vw, -6vh) scale(0.92); opacity: 1; }
80% { transform: translate(-2vw, 3vh) scale(1.06); opacity: .78; }
100% { transform: translate(0, 0) scale(1); opacity: .85; }
}
@keyframes heroAurora2 {
0% { transform: translate(0, 0); opacity: .70; }
30% { transform: translate(6vw, -5vh); opacity: .95; }
65% { transform: translate(-4vw, 4vh); opacity: .60; }
100% { transform: translate(0, 0); opacity: .70; }
}
@keyframes heroAurora3 {
0% { transform: translate(0, 0) scale(1); opacity: .55; }
40% { transform: translate(5vw, -7vh) scale(1.18); opacity: .90; }
75% { transform: translate(-3vw, 4vh) scale(0.88); opacity: .65; }
100% { transform: translate(0, 0) scale(1); opacity: .55; }
}
@keyframes heroAurora4 {
0% { transform: translate(0, 0) scale(1); opacity: .50; }
35% { transform: translate(-5vw, -4vh) scale(1.15); opacity: .80; }
70% { transform: translate(4vw, 3vh) scale(0.90); opacity: .60; }
100% { transform: translate(0, 0) scale(1); opacity: .50; }
}
/* ─── Tech diagonal lines — технологичная сетка ─── */
.hero-tech-lines {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.045;
background-image:
repeating-linear-gradient(
-52deg,
rgba(255,255,255,0.6) 0px,
rgba(255,255,255,0.6) 1px,
transparent 1px,
transparent 72px
);
}
/* Маска — плавно исчезает к краям */
.hero-tech-lines::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 50%, transparent 30%, #141414 80%);
}
@media (prefers-reduced-motion: reduce) {
.hero-aurora__blob { animation: none !important; }
}
/* Three.js canvas — fills section, alpha:true shows aurora */
.hero-canvas {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 1 !important;
pointer-events: none !important;
display: block;
}
/* Existing hero-bg-text stays behind canvas */
.hero-bg-text { z-index: 0 !important; }
/* ── HTML-оверлей поверх 3D-иконки на видео-странице ── */
.video-hero__play {
position: absolute;
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
z-index: 10;
padding: 0;
outline: none;
/* Плавная анимация нажатия через CSS */
transition: opacity 0.2s;
}
.video-hero__play:focus-visible {
outline: 3px solid rgba(245, 36, 36, 0.7);
outline-offset: 6px;
}
.video-hero__play.is-pressing {
animation: vhp-press 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes vhp-press {
0% { transform: scale(1); }
25% { transform: scale(0.88); }
60% { transform: scale(1.10); }
100% { transform: scale(1); }
}
/* Hero content above canvas */
.hero-section .container {
position: relative;
z-index: 2;
}
/* Scroll hint — z-index only, position:absolute управляется ниже */
.hero-section .hero-scroll-hint {
z-index: 2;
}
/* Hero grid: text слева, 3D-иконка занимает правую половину */
.hero-section .hero-grid {
padding: clamp(40px, 6vh, 80px) 0;
/* Контент прижат влево — 3D-иконка сдвинута в JS вправо */
grid-template-columns: min(700px, 52vw) 1fr;
}
/* Текстовый блок в hero — максимум левая половина экрана */
.hero-section .hero-content {
max-width: min(660px, 50vw);
}
@media (max-width: 900px) {
.hero-section .hero-grid {
grid-template-columns: 1fr;
}
.hero-section .hero-content {
max-width: 100%;
}
/* На мобилке: контент прижимаем вверх (иначе 50% пустого пространства сверху) */
.hero-section {
justify-content: flex-start;
padding-top: 72px;
}
/* 3D-логотип уходит вниз и становится декоративным фоном */
.hero-canvas {
opacity: 0.5;
}
}
@media (max-width: 600px) {
/* На мелких экранах: чипы занимают всю строку, кнопка «Начать» отдельно */
.hero-quiz__row {
flex-direction: column;
align-items: flex-start;
}
.hero-quiz__cta {
margin-top: 2px;
}
/* Мелкие чипы чтобы все 4 влезли */
.hero-quiz__chip {
font-size: 11.5px;
padding: 6px 11px;
gap: 5px;
}
/* Компактнее на маленьких экранах — чтобы весь hero-контент влезал без скролла */
.hero-section {
padding-top: 60px;
}
.hero-section .hero-grid {
padding: clamp(24px, 4vh, 48px) 0;
}
.hero-kpi-line {
font-size: 11px;
gap: 6px;
}
}
/* Scroll hint — bottom center */
.hero-scroll-hint {
position: absolute;
bottom: clamp(18px, 3vh, 32px);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.25);
pointer-events: none;
animation: hero-in 0.8s ease 0.9s both;
}
.hero-scroll-hint svg {
opacity: 0.4;
animation: scrollBounce 2s ease-in-out 1.2s infinite;
}
@keyframes scrollBounce {
0%,100% { transform: translateY(0); opacity: 0.4; }
50% { transform: translateY(5px); opacity: 0.7; }
}
/* Bottom brand-block padding fix (no wordmark) */
.footer-lesse__brand-block {
padding-top: 0;
}
/* Footer light-theme overrides */
[data-theme="light"] .footer-lesse {
background: var(--bg2);
border-top-color: var(--line);
}
[data-theme="light"] .footer-lesse__tagline {
color: var(--muted);
}
[data-theme="light"] .footer-lesse__contacts a {
color: var(--muted);
}
[data-theme="light"] .footer-lesse__col a {
color: var(--muted);
}
[data-theme="light"] .footer-lesse__col a:hover {
color: var(--text);
}
[data-theme="light"] .footer-lesse__col-title {
border-bottom-color: rgba(246, 189, 58, 0.20);
}
[data-theme="light"] .footer-lesse__social-row {
border-top-color: var(--line);
}
[data-theme="light"] .footer-lesse__social-row a {
color: var(--muted);
}
[data-theme="light"] .footer-lesse__social-row a:hover {
color: var(--text);
}
[data-theme="light"] .footer-lesse__copy {
color: var(--hint);
}
[data-theme="light"] .footer-lesse__legal-link {
color: var(--hint);
}
[data-theme="light"] .footer-lesse__legal-link:hover {
color: var(--muted);
}
[data-theme="light"] .site-header__platform {
background: var(--gold);
color: #141414;
}
[data-theme="light"] .nav-mega {
background: rgba(255, 255, 255, 0.99);
border-color: rgba(0, 0, 0, 0.08);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .nav-mega__item {
color: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .nav-mega__item:hover {
background: rgba(0, 0, 0, 0.04);
color: var(--text);
}
[data-theme="light"] .nav-mega__name {
color: rgba(0, 0, 0, 0.85);
}
[data-theme="light"] .nav-mega__sub {
color: rgba(0, 0, 0, 0.38);
}
[data-theme="light"] .nav-mega__icon {
background: rgba(0, 0, 0, 0.04);
}
/* ═══════════════════════════════════════════════════════════════
LIGHT THEME — Hero fixes
═══════════════════════════════════════════════════════════════ */
/* Aurora — в светлой теме убираем тёмно-фиолетовый, делаем тёплые золотые блики */
[data-theme="light"] .hero-aurora__blob--1 {
background: radial-gradient(ellipse at 42% 36%,
rgba(246, 189, 58, 0.30) 0%,
rgba(246, 189, 58, 0.10) 40%,
transparent 68%);
}
[data-theme="light"] .hero-aurora__blob--2 {
background: radial-gradient(ellipse at 50% 50%,
rgba(246, 189, 58, 0.20) 0%,
rgba(246, 189, 58, 0.06) 48%,
transparent 70%);
}
[data-theme="light"] .hero-aurora__blob--3 {
background: radial-gradient(ellipse at 50% 50%,
rgba(246, 189, 58, 0.12) 0%,
transparent 65%);
}
[data-theme="light"] .hero-aurora__blob--4 {
opacity: 0.4;
}
/* Hero text — в светлой теме делаем тёмным */
[data-theme="light"] .hero-section h1 {
color: var(--text);
}
[data-theme="light"] .hero-section .eyebrow {
color: var(--muted);
}
[data-theme="light"] .hero-section p {
color: rgba(0, 0, 0, 0.58);
}
[data-theme="light"] .hero-kpi-line {
color: rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .hero-kpi-line strong {
color: var(--text);
}
/* Hero quiz chips — светлая тема */
[data-theme="light"] .hero-quiz__chip {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.10);
color: rgba(0, 0, 0, 0.70);
}
[data-theme="light"] .hero-quiz__chip:hover {
background: rgba(0, 0, 0, 0.08);
color: var(--text);
}
[data-theme="light"] .hero-quiz__chip.is-active {
background: color-mix(in srgb, var(--cc) 15%, transparent);
border-color: var(--cc);
color: var(--text);
}
/* Tech lines grid — скрыть в светлой теме (выглядит странно) */
[data-theme="light"] .hero-tech-lines {
opacity: 0.04;
}
/* Eyebrow line decoration — в светлой теме */
[data-theme="light"] .hero-section .eyebrow::before {
background: var(--gold);
}
/* ── Видео-страница hero (/video/) — тёмный overlay всегда,
текст должен быть белым независимо от темы ── */
[data-theme="light"] .vp-hero__title { color: #fff; }
[data-theme="light"] .vp-hero .hero-kpi-line { color: rgba(255,255,255,0.38); }
[data-theme="light"] .vp-hero .hero-kpi-line strong { color: rgba(255,255,255,0.65); }
[data-theme="light"] .vp-hero .hero-kpi-sep { color: rgba(255,255,255,0.16); }
[data-theme="light"] .vp-hero .btn:not(.primary) {
background: rgba(255,255,255,0.10);
color: rgba(255,255,255,0.88);
border-color: rgba(255,255,255,0.22);
}
/* ── Cases hero (/cases/) — тёмный overlay всегда (rgba(0,0,0,0.92)),
все тексты должны быть белыми, иначе нечитаемы ── */
[data-theme="light"] .chs-title { color: #fff; }
[data-theme="light"] .chs-desc { color: rgba(255,255,255,0.65); }
[data-theme="light"] .chs-stat-num { color: #fff; }
[data-theme="light"] .chs-stat-label { color: rgba(255,255,255,0.55); }
[data-theme="light"] .chs-stat-div { background: rgba(255,255,255,0.16); }
[data-theme="light"] .chs-stats { border-top-color: rgba(255,255,255,0.14); }
[data-theme="light"] .cases-hero .eyebrow { color: var(--gold); }
[data-theme="light"] .cases-hero .btn:not(.primary) {
background: rgba(255,255,255,0.10);
color: rgba(255,255,255,0.88);
border-color: rgba(255,255,255,0.22);
}
/* ═══════════════════════════════════════════════════════════════
Portfolio gallery — real images support
═══════════════════════════════════════════════════════════════ */
.media-frame__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
z-index: 0;
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gallery-card:hover .media-frame__img {
transform: scale(1.05);
}
.media-frame.has-img::before {
display: none;
}
.media-frame.has-img {
background: var(--bg3);
}
.media-frame.has-img::after {
content: '';
position: absolute;
inset: 0;
background: transparent;
z-index: 1;
border-radius: inherit;
pointer-events: none;
transition: background 0.35s ease, opacity 0.35s ease;
}
.media-frame.has-img .media-frame-tag,
.media-frame.has-img .media-frame-label {
position: relative;
z-index: 2;
}
/* Inside hover overlay — fix position (override 3-class rule) but keep pill styling */
.media-frame.has-img .media-frame__hover .media-frame-tag {
position: static !important;
top: auto !important;
left: auto !important;
z-index: auto !important;
}
/* Showreel poster images */
.video-poster__thumb {
background-size: cover !important;
background-position: center !important;
}
/* ═══════════════════════════════════════════════════════════════
Видео-отзывы — сетка 4+3 карточки + подпись под плеером
═══════════════════════════════════════════════════════════════ */
/* ─── Video Reviews Player ─── */
.vrp {
display: flex;
flex-direction: column;
gap: 0;
}
/* Строка: видео + правая панель */
.vrp__area {
display: flex;
gap: 32px;
align-items: stretch;
}
/* Main screen */
.vrp__screen {
position: relative;
flex: 1;
aspect-ratio: 16/9;
border-radius: 16px;
overflow: hidden;
background: #080808;
box-shadow: 0 8px 48px rgba(0,0,0,0.55);
}
.vrp__poster { position: absolute; inset: 0; }
.vrp__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.vrp__screen:hover .vrp__bg { transform: scale(1.025); }
.vrp__grad {
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(0,0,0,0.18) 0%, transparent 50%, rgba(0,0,0,0.55) 100%);
}
/* Meta-info overlay (name / company / counter) */
.vrp__meta {
position: absolute;
bottom: 16px;
left: 16px;
right: 60px;
z-index: 4;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 8px;
pointer-events: none;
}
.vrp__meta-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.vrp__meta-name {
font-size: 14px;
font-weight: 600;
color: #fff;
line-height: 1.3;
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.vrp__meta-company {
font-size: 12px;
color: rgba(255,255,255,0.65);
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.vrp__meta-idx {
font-size: 11px;
font-family: var(--font-mono);
color: rgba(255,255,255,0.45);
white-space: nowrap;
flex-shrink: 0;
}
/* Prev / Next controls strip on poster */
.vrp__controls {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
pointer-events: none;
z-index: 5;
}
.vrp__ctrl-btn {
pointer-events: all;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.22);
background: rgba(0,0,0,0.42);
backdrop-filter: blur(6px);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s, background 0.2s;
}
.vrp__poster:hover .vrp__ctrl-btn { opacity: 1; }
.vrp__ctrl-btn:hover { background: rgba(0,0,0,0.68); }
/* Play button */
.vrp__play {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
pointer-events: all;
}
.vrp__play-ring {
position: absolute;
width: 76px;
height: 76px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.22);
animation: vrp-pulse 2.8s ease-in-out infinite;
pointer-events: none;
}
@keyframes vrp-pulse {
0%, 100% { transform: scale(1); opacity: 0.6; }
50% { transform: scale(1.18); opacity: 0; }
}
.vrp__play svg {
position: relative;
z-index: 1;
background: rgba(0,0,0,0.42);
border: 1.5px solid rgba(255,255,255,0.7);
border-radius: 50%;
padding: 15px;
width: 60px;
height: 60px;
box-sizing: border-box;
transition: background 0.25s, border-color 0.25s, transform 0.25s;
backdrop-filter: blur(6px);
}
.vrp__play:hover svg {
background: var(--gold);
border-color: var(--gold);
color: #000;
transform: scale(1.1);
}
.vrp__frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: none;
border: none;
}
/* Caption row */
.vrp__caption {
padding: 16px 2px 0;
border-top: 1px solid var(--line);
margin-top: 16px;
}
.vrp__caption-text { display: flex; flex-direction: column; gap: 3px; }
.vrp__num {
font-size: 10px;
font-family: var(--font-mono, monospace);
color: var(--gold);
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.8;
}
.vrp__name {
font-size: clamp(16px, 1.6vw, 22px);
font-weight: 700;
color: var(--text);
margin: 0;
line-height: 1.2;
letter-spacing: -0.02em;
}
.vrp__company {
font-size: 12px;
color: var(--muted);
margin-top: 1px;
}
/* Right column — ровно высота видео */
.vrp__right {
width: 296px;
flex-shrink: 0;
display: flex;
flex-direction: column;
position: relative;
}
/* Gradient fade — всегда видимый, намекает на прокрутку */
.vrp__right::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 88px;
background: linear-gradient(to bottom, transparent 0%, var(--bg, #090909) 100%);
pointer-events: none;
z-index: 2;
border-radius: 0 0 12px 12px;
}
/* Кнопка-призрак поверх градиента */
.vrp__nav-btn {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 88px;
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 12px;
z-index: 3;
color: transparent;
transition: color 0.3s ease;
}
.vrp__nav-btn svg {
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.3s ease, transform 0.3s ease;
filter: drop-shadow(0 0 6px rgba(246,189,58,0.5));
}
.vrp__nav-btn:hover svg {
opacity: 1;
transform: translateY(0);
color: var(--gold);
}
/* Right panel — reviewer list */
.vrp__list {
display: flex;
flex-direction: column;
gap: 6px;
overflow-y: auto;
flex: 1;
min-height: 0;
scrollbar-width: none;
padding: 2px 2px 80px;
}
.vrp__list::-webkit-scrollbar { display: none; }
/* Card-style item inspired by 21st.dev minimal lists */
.vrp__item {
display: flex;
gap: 12px;
align-items: center;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.05);
background: rgba(255,255,255,0.03);
cursor: pointer;
opacity: 0.42;
transition: opacity 0.22s, border-color 0.22s, background 0.22s, transform 0.18s;
position: relative;
}
.vrp__item.is-active {
opacity: 1;
border-color: rgba(246,189,58,0.35);
background: rgba(246,189,58,0.06);
}
.vrp__item:hover:not(.is-active) {
opacity: 0.72;
border-color: rgba(255,255,255,0.1);
background: rgba(255,255,255,0.05);
transform: translateX(2px);
}
/* Gold left bar on active */
.vrp__item::before {
content: '';
position: absolute;
left: 0; top: 20%; bottom: 20%;
width: 2px;
border-radius: 0 2px 2px 0;
background: var(--gold);
transform: scaleY(0);
transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
transform-origin: center;
}
.vrp__item.is-active::before { transform: scaleY(1); }
.vrp__item-thumb {
width: 68px;
aspect-ratio: 3/2;
border-radius: 6px;
background-size: cover;
background-position: center top;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.vrp__item-info {
display: flex;
flex-direction: column;
gap: 2px;
overflow: hidden;
min-width: 0;
}
.vrp__item-num {
font-size: 9px;
font-family: var(--font-mono, monospace);
color: var(--gold);
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0;
transition: opacity 0.2s;
}
.vrp__item.is-active .vrp__item-num { opacity: 1; }
.vrp__item-name {
font-size: 12px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.01em;
}
.vrp__item-company {
font-size: 10px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (pointer: coarse) {
.vrp__ctrl-btn { opacity: 0.75; }
}
@media (max-width: 780px) {
.vrp__area { flex-direction: column; gap: 16px; }
.vrp__right { width: 100%; max-height: 160px; }
.vrp__list {
border-top: 1px solid var(--line);
padding: 10px 0 60px 0;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
gap: 8px;
}
.vrp__item {
flex-direction: column;
align-items: flex-start;
flex-shrink: 0;
width: 120px;
padding: 8px 10px;
transform: none !important;
}
.vrp__item::before {
left: 0; top: auto; bottom: 0;
width: 100%; height: 2px;
border-radius: 0;
transform: scaleX(0);
transform-origin: left;
}
.vrp__item.is-active::before { transform: scaleX(1); }
.vrp__item-thumb { width: 100%; aspect-ratio: 3/2; }
.vrp__nav-btn { display: none; }
.vrp__right::after { display: none; }
}
@media (max-width: 480px) {
.vrp__play svg { width: 52px; height: 52px; padding: 13px; }
.vrp__play-ring { width: 66px; height: 66px; }
.vrp__name { font-size: 16px; }
}
/* ═══════════════════════════════════════════════════════════════
Модальное окно — быстрая заявка с согласием 152-ФЗ
═══════════════════════════════════════════════════════════════ */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
.modal-overlay:not([hidden]) {
opacity: 1;
pointer-events: all;
}
.modal-overlay[hidden] {
display: flex !important; /* keep in DOM but invisible */
opacity: 0;
pointer-events: none;
}
.modal-box {
position: relative;
background: var(--bg2);
border: 1px solid var(--line);
border-radius: 24px;
padding: 40px 36px 36px;
width: 100%;
max-width: 520px;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55);
transform: translateY(12px) scale(0.98);
transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
opacity: 0;
}
.modal-overlay:not([hidden]) .modal-box {
transform: translateY(0) scale(1);
opacity: 1;
}
.modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg3);
border: 1px solid var(--line);
color: var(--muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, color 0.2s;
}
.modal-close:hover {
background: var(--bg-elevated);
color: var(--text);
}
.modal-head {
margin-bottom: 20px;
}
.modal-title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
color: var(--text);
margin: 0 0 6px;
line-height: 1.2;
}
.modal-sub {
font-size: 13px;
color: var(--muted);
margin: 0;
}
/* Чипы направления в модале */
.modal-dir-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.modal-dir-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border-radius: 100px;
font-size: 12px;
font-weight: 600;
background: var(--bg3);
border: 1px solid var(--line);
color: var(--muted);
cursor: pointer;
transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.modal-dir-chip__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--cc, var(--gold));
opacity: 0.5;
transition: opacity 0.18s;
flex-shrink: 0;
}
.modal-dir-chip.is-active {
background: color-mix(in srgb, var(--cc, var(--gold)) 14%, var(--bg3));
border-color: color-mix(in srgb, var(--cc, var(--gold)) 45%, transparent);
color: var(--text);
}
.modal-dir-chip.is-active .modal-dir-chip__dot {
opacity: 1;
}
.modal-fields {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.modal-footer {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Чекбокс согласия 152-ФЗ */
.modal-consent-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.modal-consent-check {
width: 16px;
height: 16px;
accent-color: var(--gold);
cursor: pointer;
flex-shrink: 0;
margin-top: 2px;
}
.modal-consent-label span {
font-size: 11px;
color: var(--muted);
line-height: 1.5;
}
.modal-consent-label a {
color: var(--gold);
text-decoration: underline;
}
.modal-consent-label a:hover {
text-decoration: none;
}
@media (max-width: 600px) {
.modal-box {
padding: 32px 20px 24px;
}
.modal-title {
font-size: 17px;
}
}
/* ═══════════════════════════════════════════════════════════════
Pain List — «Узнаёте себя?» editorial redesign
═══════════════════════════════════════════════════════════════ */
.pain-list {
display: flex;
flex-direction: column;
margin-top: var(--sp-10);
}
.pain-item {
display: grid;
grid-template-columns: 72px 1fr;
align-items: start;
gap: 32px;
padding: 32px 0;
border-bottom: 1px solid var(--line);
transition: background 0.2s;
}
.pain-item:first-child {
border-top: 1px solid var(--line);
}
.pain-num {
font-family: var(--font-display);
font-size: 52px;
font-weight: 700;
color: var(--gold);
line-height: 1;
letter-spacing: -0.04em;
opacity: 0.22;
transition: opacity 0.35s ease;
padding-top: 2px;
user-select: none;
}
.pain-item:hover .pain-num {
opacity: 0.75;
}
.pain-headline {
font-family: var(--font-display);
font-size: clamp(17px, 1.55vw, 22px);
font-weight: 600;
color: var(--text);
margin: 0 0 10px;
line-height: 1.3;
letter-spacing: -0.02em;
}
.pain-desc {
font-size: 15px;
color: var(--muted);
line-height: 1.65;
margin: 0;
}
@media (max-width: 600px) {
.pain-item {
grid-template-columns: 44px 1fr;
gap: 16px;
padding: 24px 0;
}
.pain-num {
font-size: 32px;
}
.pain-headline {
font-size: 16px;
}
}
/* ═══════════════════════════════════════════════════════════════
Gallery card hover-reveal (portfolio section)
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
Gallery cards — image + caption below
═══════════════════════════════════════════════════════════════ */
.gallery-card {
gap: 14px;
display: flex;
flex-direction: column;
}
/* Restore larger gap for captioned photo-page gallery */
.gallery-grid--captioned .gallery-card {
gap: var(--sp-4);
}
/* Direction color token on the card root */
.gallery-card[data-dir="video"] { --card-color: var(--c-video); }
.gallery-card[data-dir="design"] { --card-color: var(--c-design); }
.gallery-card[data-dir="photo"] { --card-color: var(--c-photo); }
.gallery-card[data-dir="ai"] { --card-color: var(--c-ai); }
/* Card border — subtle direction tint */
.gallery-card .media-frame.has-img {
border: 1px solid rgba(255,255,255,0.07);
transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.gallery-card[data-dir="video"] .media-frame.has-img { border-color: rgba(245, 36, 36, 0.2); }
.gallery-card[data-dir="design"] .media-frame.has-img { border-color: rgba(119, 51, 255, 0.2); }
.gallery-card[data-dir="photo"] .media-frame.has-img { border-color: rgba(245, 183, 43, 0.2); }
.gallery-card[data-dir="ai"] .media-frame.has-img { border-color: rgba(34, 204, 84, 0.2); }
.gallery-card:hover .media-frame.has-img {
border-color: var(--card-color, var(--gold));
box-shadow: 0 10px 44px -10px color-mix(in srgb, var(--card-color, var(--gold)) 40%, transparent);
}
/* Kill the base media-frame scale on hover — prevents glitch */
.gallery-card .media-frame.has-img:hover {
transform: none;
}
/* Subtle permanent vignette for number badge legibility */
.gallery-card .media-frame.has-img::after {
background: linear-gradient(to top, rgba(0,0,0,0.28) 0%, transparent 25%);
}
/* Image zoom inside frame on hover */
.gallery-card:hover .media-frame__img {
transform: scale(1.04);
}
/* Caption below the frame */
.gallery-card__info {
padding: 0 2px;
}
.gallery-card__dir {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--card-color, var(--gold));
margin-bottom: 5px;
opacity: 0.75;
transition: opacity 0.25s ease;
}
.gallery-card:hover .gallery-card__dir {
opacity: 1;
}
.gallery-card__title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: rgba(255,255,255,0.78);
margin: 0;
line-height: 1.35;
letter-spacing: -0.01em;
transition: color 0.25s ease;
}
.gallery-card:hover .gallery-card__title {
color: #fff;
}
.gallery-card__meta {
font-size: 12px;
color: var(--muted);
margin: 5px 0 0;
line-height: 1.5;
}
/* Number badge */
.media-frame__num {
position: absolute;
top: 14px;
right: 16px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.28);
z-index: 4;
pointer-events: none;
}
/* Hover overlay — still used by photo page gallery */
.media-frame__hover {
position: absolute;
inset: 0;
padding: 24px 22px;
background: linear-gradient(
to top,
rgba(0,0,0,0.90) 0%,
rgba(0,0,0,0.60) 38%,
rgba(0,0,0,0.15) 68%,
transparent 100%
);
opacity: 0;
transform: translateY(6px);
transition: opacity 0.38s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 3;
border-radius: inherit;
display: flex;
flex-direction: column;
justify-content: flex-end;
pointer-events: none;
}
.gallery-card:hover .media-frame__hover {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Tag inside hover overlay (photo page gallery cards) */
.media-frame__hover .media-frame-tag {
position: static;
top: auto;
left: auto;
background: none;
border: none;
border-radius: 0;
padding: 0;
margin: 0 0 7px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
backdrop-filter: none;
-webkit-backdrop-filter: none;
display: block;
white-space: nowrap;
}
[data-dir="video"] .media-frame__hover .media-frame-tag { color: var(--c-video); }
[data-dir="design"] .media-frame__hover .media-frame-tag { color: var(--c-design); }
[data-dir="photo"] .media-frame__hover .media-frame-tag { color: var(--c-photo); }
[data-dir="ai"] .media-frame__hover .media-frame-tag { color: var(--c-ai); }
.media-frame__title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
color: #fff;
margin: 0 0 6px;
line-height: 1.3;
letter-spacing: -0.01em;
}
.media-frame__meta {
font-size: 13px;
color: rgba(255,255,255,0.58);
margin: 0;
line-height: 1.45;
}
[data-theme="light"] .gallery-card__title {
color: rgba(0,0,0,0.75);
}
[data-theme="light"] .gallery-card:hover .gallery-card__title {
color: rgba(0,0,0,0.95);
}
/* ═══════════════════════════════════════════════════════════════
Review VK links
═══════════════════════════════════════════════════════════════ */
.review-avatar-link {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
text-decoration: none;
transition: opacity 0.2s ease, transform 0.25s ease;
}
.review-avatar-link:hover {
opacity: 0.82;
transform: scale(1.06);
}
.review-author-role--link {
text-decoration: none;
color: inherit;
transition: color 0.2s ease;
}
.review-author-role--link:hover {
color: var(--gold);
}
/* ═══════════════════════════════════════════════════════════════
BRAND UNIFICATION v4 — единый стиль всех страниц, June 2026
═══════════════════════════════════════════════════════════════ */
/* Cormorant Garamond — editorial serif для h1 внутренних страниц */
:root {
--font-serif: 'Cormorant Garamond', Georgia, serif;
}
/* Hero h1 на подстраницах — тот же Unbounded что на главной */
.hero-section[data-dir] h1 {
font-size: clamp(38px, 5.5vw, 68px);
max-width: 820px;
}
/* ─── Система цветовых акцентов по направлению ─── */
.hero-section[data-dir] { --hero-accent: var(--gold); }
.hero-section[data-dir="video"] {
--hero-accent: var(--c-video);
background-image:
radial-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.10) 50%, transparent 100%);
background-size: 36px 36px, cover;
background-position: center, center;
}
/* фоновый слой с параллакс-поддержкой */
.video-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
/* Kinescope iframe как фоновое видео */
.video-hero-bg__kine {
position: absolute;
inset: 0;
overflow: hidden;
}
.video-hero-bg__kine iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 177.78vh;
height: 56.25vw;
min-width: 100%;
min-height: 100%;
pointer-events: none;
border: none;
filter: brightness(0.18) saturate(1.0);
}
/* На мобиле iframe покрывает фон по высоте */
@media (max-width: 768px) {
.video-hero-bg__kine iframe {
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: none;
min-width: unset;
min-height: unset;
}
}
/* тёмный оверлей поверх видео */
.video-hero-bg__kine::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.68);
pointer-events: none;
}
/* ── AI hero: BG_video.jpg фон ── */
.ai-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.ai-hero-bg__img {
position: absolute;
inset: -25% 0;
background: url('../video/BG_video.jpg') center / cover no-repeat;
filter: brightness(2.2) saturate(3.0) contrast(0.92) blur(2.5px);
}
.ai-hero-bg__vignette {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 110% 95% at 52% 46%,
transparent 20%,
rgba(0, 0, 0, 0.50) 60%,
rgba(0, 0, 0, 0.88) 100%
);
}
.video-hero-bg__vignette {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 110% 95% at 52% 46%,
transparent 20%,
rgba(0, 0, 0, 0.50) 60%,
rgba(0, 0, 0, 0.88) 100%
);
pointer-events: none;
}
.hero-section[data-dir="design"] { --hero-accent: var(--c-design); }
.hero-section[data-dir="photo"] { --hero-accent: var(--c-photo); }
.hero-section[data-dir="ai"] { --hero-accent: var(--c-ai); }
/* Eyebrow: цветная линия-акцент по направлению */
.hero-section[data-dir] .eyebrow {
color: rgba(255, 255, 255, 0.68);
}
.hero-section[data-dir="video"] .eyebrow::before { background: var(--c-video); box-shadow: 0 0 10px rgba(245, 36, 36, 0.55); }
.hero-section[data-dir="design"] .eyebrow::before { background: var(--c-design); box-shadow: 0 0 10px rgba(119, 51, 255, 0.55); }
.hero-section[data-dir="photo"] .eyebrow::before { background: var(--c-photo); box-shadow: 0 0 10px rgba(245, 183, 43, 0.55); }
.hero-section[data-dir="ai"] .eyebrow::before { background: var(--c-ai); box-shadow: 0 0 10px rgba(34, 204, 84, 0.55); }
.hero-section[data-dir="careers"] .eyebrow::before,
.hero-section[data-dir="edu"] .eyebrow::before { background: var(--gold); box-shadow: 0 0 10px rgba(246, 189, 58, 0.55); }
.hero-section[data-dir="crm"] .eyebrow::before { background: var(--c-crm-2); box-shadow: 0 0 10px rgba(155, 77, 255, 0.55); }
.hero-section[data-dir="crm"] { --hero-accent: var(--c-crm-1); }
/* .text-gradient на dir-страницах использует цвет направления */
.hero-section[data-dir] .text-gradient { color: var(--hero-accent); }
/* ─── Page aurora — направленное свечение за hero подстраниц ─── */
.page-aurora {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.page-aurora__blob {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.hero-section[data-dir] .page-aurora__blob--1 {
width: min(900px, 75vw);
height: min(900px, 75vw);
background: radial-gradient(ellipse at 42% 36%, var(--hero-accent) 0%, transparent 65%);
opacity: 0.16;
filter: blur(90px);
top: -28%;
right: -14%;
animation: pageAurora1 15s ease-in-out infinite;
}
.hero-section[data-dir] .page-aurora__blob--2 {
width: min(520px, 46vw);
height: min(520px, 46vw);
background: radial-gradient(ellipse at 50% 50%, var(--hero-accent) 0%, transparent 65%);
opacity: 0.09;
filter: blur(72px);
bottom: 4%;
left: -8%;
animation: pageAurora2 22s ease-in-out infinite;
}
@keyframes pageAurora1 {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.16; }
50% { transform: translate(-4vw, 5vh) scale(1.12); opacity: 0.10; }
}
@keyframes pageAurora2 {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.09; }
50% { transform: translate(5vw, -4vh) scale(1.09); opacity: 0.14; }
}
/* Третий blob — нижний правый (только для dir-страниц с data-dir) */
.hero-section[data-dir] .page-aurora__blob--3 {
width: min(480px, 44vw);
height: min(480px, 44vw);
background: radial-gradient(ellipse at 50% 50%, var(--hero-accent) 0%, transparent 65%);
opacity: 0.08;
filter: blur(80px);
bottom: 5%; right: 4%;
animation: pageAurora1 19s ease-in-out infinite reverse;
}
/* Видео-страница: усиленная красная aurora */
.hero-section[data-dir="video"] .page-aurora__blob--1 { opacity: 0.28; }
.hero-section[data-dir="video"] .page-aurora__blob--2 { opacity: 0.18; }
.hero-section[data-dir="video"] .page-aurora__blob--3 { opacity: 0.18; }
@media (prefers-reduced-motion: reduce) {
.page-aurora__blob { animation: none !important; }
}
/* ─── Section divider — тонкая золотая линия ─── */
.section-divider {
width: min(800px, 78%);
height: 1px;
margin: 0 auto;
background: linear-gradient(90deg, transparent, rgba(246,189,58,0.32) 30%, rgba(246,189,58,0.55) 50%, rgba(246,189,58,0.32) 70%, transparent);
pointer-events: none;
}
/* ─── App cards — lift on hover ─── */
.app-card {
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.app-card:hover {
border-color: rgba(246,189,58,0.28);
transform: translateY(-4px);
box-shadow: 0 24px 64px -20px rgba(0,0,0,0.6);
}
/* ═══════════════════════════════════════════════════════════════
CASES — раздел кейсов /cases/ и страницы кейсов /cases/slug/
═══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
Кейсы: Split Hero — текст слева / мозаика справа
══════════════════════════════════════════════════ */
/* ══ Cases Hero — full-screen mosaic background ══ */
.cases-hero {
position: relative;
min-height: 100vh;
overflow: hidden;
display: flex;
align-items: flex-end;
padding-top: 72px;
}
.chs-content {
position: relative;
z-index: 2;
padding: 80px 0;
display: flex;
flex-direction: column;
gap: var(--sp-5);
max-width: 680px;
}
.chs-title {
font-family: var(--font-display);
font-size: clamp(36px, 4.2vw, 64px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.04em;
color: var(--text, #fdfdfd);
margin: 14px 0 20px;
}
.chs-desc {
font-size: clamp(14px, 1vw, 15px);
color: var(--muted, #9a9a9a);
line-height: 1.65;
max-width: 340px;
margin: 0 0 40px;
}
/* Статы */
.chs-stats {
display: flex;
align-items: center;
gap: 20px;
padding-top: 32px;
border-top: 1px solid var(--line, rgba(255,255,255,0.08));
}
.chs-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.chs-stat-num {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
color: var(--text, #fdfdfd);
line-height: 1;
letter-spacing: -0.03em;
}
.chs-stat-plus {
font-size: 18px;
color: var(--gold, #f6bd3a);
}
.chs-stat-label {
font-size: 11px;
color: var(--muted, #9a9a9a);
font-family: var(--font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.chs-stat-div {
width: 1px;
height: 32px;
background: var(--line, rgba(255,255,255,0.08));
}
/* Overlay */
.chs-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.60) 40%, rgba(0,0,0,0.15) 100%),
linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
pointer-events: none;
}
/* Mosaic background */
.chs-mosaic {
position: absolute;
inset: 0;
display: flex;
gap: 8px;
z-index: 0;
animation: chs-drift 35s linear infinite alternate;
}
@keyframes chs-drift {
from { transform: translateY(0); }
to { transform: translateY(-10%); }
}
@media (prefers-reduced-motion: reduce) {
.chs-mosaic { animation: none; }
}
.chs-col {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
min-width: 0;
}
.chs-col--offset {
margin-top: -90px;
}
.chs-col img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 8px;
display: block;
filter: brightness(0.9) saturate(0.9);
}
/* ── Мобильный ≤768px ── */
@media (max-width: 768px) {
.chs-content { padding: 48px 0; }
.chs-title { font-size: 34px; }
.chs-stats { gap: 16px; }
}
@media (max-width: 600px) {
.chs-col:nth-child(n+3) { display: none; }
.cases-hero { min-height: 100dvh; }
}
/* ══════════════════════════════════════════════════════
КЕЙСЫ — Full-Bleed Slideshow Hero
══════════════════════════════════════════════════════ */
/* ── Cases Hero ── */
.cases-hero {
position: relative;
width: 100%;
min-height: max(100dvh, 580px);
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
overflow: hidden;
background: #090909;
padding-top: 72px;
}
.ch-slides {
position: absolute;
inset: 0;
}
.ch-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1);
}
.ch-slide.is-active { opacity: 1; }
.ch-slide img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 40%;
transform: scale(1);
transition: transform 7s ease-out;
will-change: transform;
filter: contrast(1.1) saturate(1.08);
}
.ch-slide.is-active img { transform: scale(1.06); }
/* Оверлей: снизу + сверху + бока — скрывает артефакты краёв */
.ch-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(to top,
rgba(9,9,9,0.98) 0%,
rgba(9,9,9,0.62) 28%,
rgba(9,9,9,0.12) 55%,
transparent 72%
),
linear-gradient(to bottom,
rgba(9,9,9,0.70) 0%,
rgba(9,9,9,0.12) 22%,
transparent 38%
),
linear-gradient(to right,
rgba(9,9,9,0.50) 0%,
transparent 32%
),
linear-gradient(to left,
rgba(9,9,9,0.30) 0%,
transparent 28%
);
}
/* Контент поверх — растягивается по всей ширине через container */
.ch-inner {
position: relative;
z-index: 2;
padding-bottom: 32px;
}
.ch-inner-wrap {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.ch-head { display: flex; flex-direction: column; gap: 8px; }
.ch-title {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 72px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
color: #fff;
margin: 0;
}
.ch-sub {
font-size: 13px;
color: rgba(255,255,255,0.38);
font-family: var(--font-mono);
letter-spacing: 0.07em;
margin: 4px 0 0;
}
/* Счётчик справа */
.ch-counter {
font-family: var(--font-mono);
font-size: 13px;
letter-spacing: 0.08em;
color: rgba(255,255,255,0.35);
display: flex;
align-items: center;
gap: 4px;
padding-bottom: 6px;
flex-shrink: 0;
}
#chNum { color: #fff; font-size: 22px; font-weight: 600; }
.ch-counter-sep { margin: 0 4px; }
/* ── Нижняя навигация ── */
.ch-nav {
position: relative;
z-index: 2;
border-top: 1px solid rgba(255,255,255,0.09);
background: rgba(9,9,9,0.65);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.ch-nav .container {
/* container даёт правильные отступы по бокам */
}
.ch-nav-track {
display: flex;
align-items: stretch;
}
.ch-nav-item {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
padding: 18px 20px 0;
background: none;
border: none;
border-right: 1px solid rgba(255,255,255,0.06);
cursor: pointer;
text-align: left;
color: #fff;
transition: background 0.25s;
min-height: 76px;
position: relative;
}
.ch-nav-item:last-child { border-right: none; }
.ch-nav-item:hover { background: rgba(255,255,255,0.03); }
.ch-nav-item.is-active { background: rgba(255,255,255,0.04); }
.ch-nav-cat {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
transition: color 0.25s;
}
.ch-nav-item.is-active .ch-nav-cat { color: var(--gold, #f6bd3a); }
.ch-nav-item:hover .ch-nav-cat { color: rgba(255,255,255,0.6); }
.ch-nav-name {
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.45);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.25s;
line-height: 1.3;
}
.ch-nav-item.is-active .ch-nav-name { color: #fff; }
.ch-nav-item:hover .ch-nav-name { color: rgba(255,255,255,0.8); }
/* Прогресс-линия снизу каждого таба */
.ch-nav-bar {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: rgba(255,255,255,0.06);
overflow: hidden;
}
.ch-nav-fill {
display: block;
height: 100%;
width: 0;
background: var(--gold, #f6bd3a);
}
@keyframes ch-fill {
from { width: 0% }
to { width: 100% }
}
/* ── Мобильный ── */
@media (max-width: 680px) {
.ch-inner { padding-bottom: 20px; }
.ch-inner-wrap { flex-direction: column; gap: 16px; align-items: flex-start; }
.ch-title { font-size: 34px; }
.ch-nav-track { overflow-x: auto; scrollbar-width: none; }
.ch-nav-track::-webkit-scrollbar { display: none; }
.ch-nav-item { min-width: 130px; flex: 0 0 130px; }
}
/* ══════════════════════════════════════════════════════
КЕЙСЫ — Full-Bleed Slideshow Hero
══════════════════════════════════════════════════════ */
/* Лейбл варианта — оставляем на случай использования */
.cv-label {
background: var(--gold);
color: #0d0d0d;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 8px 20px;
display: inline-block;
margin: 0;
}
/* Общий контейнер варианта */
.cv {
width: 100%;
position: relative;
overflow: hidden;
background: var(--bg, #0d0d0d);
}
/* ─────────────────────────────────────────
ВАРИАНТ 1 — Spotlight: featured + grid
───────────────────────────────────────── */
.cv1 {
display: grid;
grid-template-columns: 1fr 440px;
min-height: 90vh;
padding-top: 72px;
}
.cv1-feature {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
}
.cv1-feature img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.7s ease;
}
.cv1-feature:hover img { transform: scale(1.04); }
.cv1-feature-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 55%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 32px;
gap: 10px;
}
.cv1-tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold, #f6bd3a);
background: rgba(246,189,58,0.12);
border: 1px solid rgba(246,189,58,0.25);
border-radius: 100px;
padding: 4px 12px;
width: fit-content;
}
.cv1-feature-title {
font-family: var(--font-display);
font-size: clamp(20px, 2vw, 28px);
font-weight: 700;
color: #fff;
line-height: 1.2;
margin: 0;
}
.cv1-right {
display: flex;
flex-direction: column;
padding: 56px 40px;
border-left: 1px solid var(--line, rgba(255,255,255,0.08));
gap: 40px;
}
.cv1-text h1 {
font-size: clamp(24px, 2.4vw, 36px);
margin: 10px 0 12px;
letter-spacing: -0.03em;
line-height: 1.15;
}
.cv1-text p { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 0; }
.cv1-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
flex: 1;
}
.cv1-thumb {
position: relative;
display: block;
overflow: hidden;
border-radius: 10px;
aspect-ratio: 4/3;
text-decoration: none;
}
.cv1-thumb img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
filter: brightness(0.8);
}
.cv1-thumb:hover img { transform: scale(1.06); filter: brightness(1); }
.cv1-thumb span {
position: absolute;
bottom: 8px; left: 10px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
}
/* ─────────────────────────────────────────
ВАРИАНТ 2 — Editorial Full-Bleed
───────────────────────────────────────── */
.cv2 {
min-height: 90vh;
padding-top: 72px;
display: flex;
align-items: flex-end;
}
.cv2-bg {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 30%;
}
.cv2-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.15) 100%),
linear-gradient(to right, rgba(0,0,0,0.3) 0%, transparent 60%);
}
.cv2-content {
position: relative;
z-index: 2;
width: 100%;
padding: 0 48px 56px;
display: flex;
flex-direction: column;
gap: 32px;
}
/* Ряд миниатюр */
.cv2-thumbs {
display: flex;
gap: 10px;
align-items: flex-end;
}
.cv2-thumb {
width: 100px;
aspect-ratio: 16/10;
border-radius: 8px;
overflow: hidden;
border: 2px solid transparent;
flex-shrink: 0;
opacity: 0.55;
transition: opacity 0.2s, border-color 0.2s;
}
.cv2-thumb--active {
opacity: 1;
border-color: var(--gold, #f6bd3a);
width: 130px;
}
.cv2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Текстовый блок */
.cv2-text h1 {
font-size: clamp(36px, 5vw, 72px);
margin: 10px 0 12px;
letter-spacing: -0.04em;
line-height: 1;
color: #fff;
max-width: 700px;
}
.cv2-text p { font-size: 15px; color: rgba(255,255,255,0.6); margin: 0; }
/* ─────────────────────────────────────────
ВАРИАНТ 3 — Diagonal Cut
───────────────────────────────────────── */
.cv3 {
display: flex;
min-height: 90vh;
padding-top: 72px;
}
.cv3-left {
flex-shrink: 0;
width: 420px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 72px 48px 72px 48px;
position: relative;
z-index: 2;
}
.cv3-left h1 {
font-size: clamp(32px, 3.5vw, 52px);
letter-spacing: -0.04em;
line-height: 1.08;
margin: 14px 0 18px;
}
.cv3-left p { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; }
.cv3-right {
flex: 1;
position: relative;
overflow: hidden;
display: flex;
gap: 8px;
padding-right: 0;
}
.cv3-col {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.cv3-col--up { margin-top: -60px; }
.cv3-col img {
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 8px;
display: block;
filter: brightness(0.85) saturate(0.9);
}
/* Диагональная маска — текст не перекрывается мозаикой */
.cv3-cut {
position: absolute;
inset: 0;
right: auto;
width: 160px;
background: linear-gradient(to right, var(--bg, #0d0d0d) 40%, transparent 100%);
pointer-events: none;
}
/* ─────────────────────────────────────────
ВАРИАНТ 4 — Cinematic Reel
───────────────────────────────────────── */
.cv4 {
padding-top: 72px;
padding-bottom: 0;
min-height: 90vh;
display: flex;
flex-direction: column;
}
.cv4-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: end;
padding: 64px 48px 40px;
}
.cv4-top-text h1 {
font-size: clamp(32px, 4vw, 60px);
letter-spacing: -0.04em;
line-height: 1.05;
margin: 10px 0 0;
}
.cv4-desc {
font-size: 15px;
color: var(--muted);
line-height: 1.65;
align-self: end;
margin: 0;
padding-bottom: 8px;
}
/* Горизонтальная кино-лента */
.cv4-reel {
flex: 1;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
padding: 0 48px 0;
-webkit-overflow-scrolling: touch;
cursor: grab;
}
.cv4-reel::-webkit-scrollbar { display: none; }
.cv4-reel:active { cursor: grabbing; }
.cv4-reel-track {
display: flex;
gap: 12px;
height: 42vh;
min-height: 280px;
padding-bottom: 48px;
width: max-content;
}
.cv4-card {
position: relative;
height: 100%;
aspect-ratio: 4/3;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
transition: transform 0.35s ease;
}
.cv4-card:hover { transform: translateY(-6px); }
.cv4-card img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.82);
transition: filter 0.3s;
}
.cv4-card:hover img { filter: brightness(1); }
.cv4-card-label {
position: absolute;
bottom: 12px; left: 14px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
pointer-events: none;
}
.cv4-card--cta {
background: rgba(246,189,58,0.08);
border: 1px dashed rgba(246,189,58,0.3);
display: flex;
align-items: center;
justify-content: center;
}
.cv4-cta-text {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--gold, #f6bd3a);
text-align: center;
line-height: 1.3;
}
/* Скролл-подсказка */
.cv4-reel::after {
content: '';
position: sticky;
right: 0;
top: 0;
width: 80px;
display: block;
background: linear-gradient(to right, transparent, var(--bg, #0d0d0d));
pointer-events: none;
}
/* ─── Мобильные адаптации ─── */
@media (max-width: 760px) {
.cv1 { grid-template-columns: 1fr; min-height: auto; }
.cv1-feature { height: 55vw; }
.cv1-right { padding: 28px 20px; gap: 24px; border-left: none; border-top: 1px solid var(--line); }
.cv2-content { padding: 0 20px 36px; }
.cv2-text h1 { font-size: 36px; }
.cv3 { flex-direction: column; }
.cv3-left { width: 100%; padding: 48px 24px 24px; }
.cv3-right { height: 50vw; }
.cv4-top { grid-template-columns: 1fr; padding: 48px 20px 28px; gap: 16px; }
.cv4-reel { padding: 0 20px; }
}
/* Фильтры направлений */
.cases-filters {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-bottom: var(--sp-10);
padding: var(--sp-1) 0;
}
.cases-filter {
padding: 8px 20px;
border-radius: 40px;
border: 1px solid var(--line);
background: transparent;
color: var(--muted);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.cases-filter:hover {
border-color: var(--gold);
color: var(--text);
}
.cases-filter.active {
background: var(--gold);
border-color: var(--gold);
color: #000;
}
/* Сетка кейсов */
.cases-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-8);
}
@media (max-width: 900px) {
.cases-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.cases-grid { grid-template-columns: 1fr; }
}
/* Карточка кейса */
.case-card {
display: flex;
flex-direction: column;
gap: var(--sp-4);
text-decoration: none;
color: var(--text);
}
.case-card__cover {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
border: 1px solid var(--line);
background: var(--surface);
aspect-ratio: 4 / 3;
transition: border-color 0.3s, box-shadow 0.3s;
}
.case-card:hover .case-card__cover {
border-color: rgba(246, 189, 58, 0.35);
box-shadow: 0 16px 48px -16px rgba(0,0,0,0.5);
}
.case-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
display: block;
}
.case-card:hover .case-card__img {
transform: scale(1.04);
}
.case-card__tag {
position: absolute;
top: var(--sp-3);
left: var(--sp-3);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(6px);
padding: 4px 10px;
border-radius: 20px;
border: 1px solid currentColor;
}
.case-card__body { display: flex; flex-direction: column; gap: 4px; }
.case-card__title {
font-size: 18px;
font-weight: 700;
margin: 0;
letter-spacing: -0.01em;
}
.case-card__meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
margin: 0;
}
.case-card--hidden { display: none; }
/* ─── Страница кейса ─── */
/* Мета-бар под hero */
.case-meta-bar {
display: flex;
flex-wrap: wrap;
gap: var(--sp-8);
padding: var(--sp-8) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-bottom: var(--sp-12);
}
.case-meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.case-meta-item__label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
.case-meta-item__value {
font-size: 15px;
font-weight: 600;
color: var(--text);
}
/* Задача и решение — 2 колонки */
.case-content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-12);
margin-bottom: var(--sp-16);
}
@media (max-width: 760px) {
.case-content-grid { grid-template-columns: 1fr; }
}
.case-content-block h3 {
font-size: 13px;
font-family: var(--font-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: var(--sp-4);
}
.case-content-block p {
font-size: 17px;
line-height: 1.65;
color: var(--text);
margin: 0;
}
/* ─── Галерея кейса — masonry columns + lightbox ─── */
.case-gallery {
columns: 3;
column-gap: 8px;
margin-bottom: var(--sp-16);
}
.case-gallery__item {
break-inside: avoid;
margin-bottom: 8px;
border-radius: 10px;
overflow: hidden;
cursor: zoom-in;
position: relative;
background: var(--surface);
display: block;
}
/* Hover overlay */
.case-gallery__item::after {
content: '';
position: absolute;
inset: 0;
background-color: rgba(0,0,0,0.36);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='M21 21l-4-4'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 40px 40px;
opacity: 0;
transition: opacity 0.22s ease;
border-radius: inherit;
}
.case-gallery__item:hover::after { opacity: 1; }
.case-gallery__item img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.case-gallery__item:hover img { transform: scale(1.04); }
@media (max-width: 720px) {
.case-gallery { columns: 2; column-gap: 6px; }
.case-gallery__item { margin-bottom: 6px; }
}
@media (max-width: 480px) {
.case-gallery { columns: 1; }
}
/* ─── Lightbox ─── */
.gallery-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease;
}
.gallery-lightbox.is-open {
opacity: 1;
pointer-events: all;
}
.gallery-lightbox__overlay {
position: absolute;
inset: 0;
background: rgba(8, 8, 8, 0.94);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.gallery-lightbox__img {
position: relative;
z-index: 1;
max-width: min(90vw, 1400px);
max-height: 90vh;
object-fit: contain;
border-radius: 6px;
transform: scale(0.94);
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
-webkit-user-drag: none;
}
.gallery-lightbox.is-open .gallery-lightbox__img { transform: scale(1); }
.gallery-lightbox__close,
.gallery-lightbox__prev,
.gallery-lightbox__next {
position: fixed;
background: rgba(255,255,255,0.09);
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.15s;
z-index: 2;
line-height: 1;
}
.gallery-lightbox__close {
top: 20px;
right: 20px;
width: 44px;
height: 44px;
font-size: 18px;
}
.gallery-lightbox__prev,
.gallery-lightbox__next {
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
font-size: 20px;
}
.gallery-lightbox__prev { left: 20px; }
.gallery-lightbox__next { right: 20px; }
.gallery-lightbox__close:hover { background: rgba(255,255,255,0.2); }
.gallery-lightbox__prev:hover { background: rgba(255,255,255,0.2); transform: translateY(-50%) scale(1.08); }
.gallery-lightbox__next:hover { background: rgba(255,255,255,0.2); transform: translateY(-50%) scale(1.08); }
.gallery-lightbox__counter {
position: fixed;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.5);
font-size: 13px;
letter-spacing: 0.08em;
z-index: 2;
font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
.gallery-lightbox__prev { left: 8px; width: 44px; height: 44px; }
.gallery-lightbox__next { right: 8px; width: 44px; height: 44px; }
}
/* Результаты — строка цифр */
.case-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-6);
padding: var(--sp-10) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-bottom: var(--sp-16);
}
@media (max-width: 760px) {
.case-stats { grid-template-columns: repeat(2, 1fr); }
}
.case-stat__num {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 48px);
font-weight: 700;
color: var(--gold);
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 6px;
}
.case-stat__label {
font-size: 13px;
color: var(--muted);
line-height: 1.4;
}
/* ─── Баги: defensive rules ─── */
/* Форма — убрать любой визуальный border вокруг group */
.lead-form-grid,
.cta-form-fields { border: none; outline: none; box-shadow: none; }
/* Process card — гарантия отсутствия нежелательного border */
.process-card { border: none !important; }
/* ─── Mobile improvements ─── */
@media (max-width: 600px) {
/* Кнопки hero — на всю ширину */
.hero-buttons {
flex-direction: column;
align-items: stretch;
}
.hero-buttons .btn {
text-align: center;
justify-content: center;
}
/* Submit кнопка формы */
.btn-submit-main {
width: 100%;
justify-content: center;
}
/* Prevent horizontal overflow от aurora */
.hero-section { overflow-x: hidden; }
}
@media (max-width: 480px) {
/* Tubelight слишком широкий на очень маленьких экранах */
.pill-nav__tubelight { display: none; }
/* Aurora clipped — нет горизонтального scroll */
.hero-aurora,
.page-aurora { clip-path: inset(0); }
}
/* ═══════════════════════════════════════════════════════════════
Hero background slideshow — плавно сменяющиеся фото кейса
═══════════════════════════════════════════════════════════════ */
.hero-slides {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.06);
animation: heroSlide 18s ease-in-out infinite;
will-change: opacity, transform;
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 6s; }
.hero-slide:nth-child(3) { animation-delay: 12s; }
@keyframes heroSlide {
0% { opacity: 0; transform: scale(1.06); }
6% { opacity: 0.38; transform: scale(1.03); }
27% { opacity: 0.38; transform: scale(1.0); }
34% { opacity: 0; transform: scale(1.0); }
100% { opacity: 0; transform: scale(1.06); }
}
/* Дополнительный тёмный оверлей поверх фото — текст читаем */
.hero-slides::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(9,9,9,0.72) 0%, rgba(9,9,9,0.38) 100%);
z-index: 1;
}
/* ═══════════════════════════════════════════════════════════════
Before / After Comparison Slider
═══════════════════════════════════════════════════════════════ */
.ba-wrap {
margin-bottom: var(--sp-16);
}
.ba-compare {
position: relative;
overflow: hidden;
border-radius: 14px;
cursor: ew-resize;
background: var(--surface);
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
/* After image — baseline full width */
.ba-after {
display: block;
width: 100%;
height: auto;
pointer-events: none;
}
/* Before overlay — clipped to left portion */
.ba-before {
position: absolute;
inset: 0;
overflow: hidden;
width: 50%;
}
.ba-before img {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: left center;
pointer-events: none;
}
/* Vertical divider */
.ba-divider {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex;
flex-direction: column;
align-items: center;
pointer-events: none;
}
.ba-divider__line {
width: 2px;
flex: 1;
background: rgba(255,255,255,0.9);
box-shadow: 0 0 12px rgba(0,0,0,0.5);
}
.ba-divider__btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: 2px solid rgba(255,255,255,0.9);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
color: #111;
pointer-events: all;
cursor: ew-resize;
flex-shrink: 0;
}
/* Labels До / После */
.ba-label {
position: absolute;
top: 16px;
padding: 5px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
z-index: 5;
backdrop-filter: blur(6px);
pointer-events: none;
}
.ba-label--before {
left: 16px;
background: rgba(0,0,0,0.55);
color: rgba(255,255,255,0.9);
border: 1px solid rgba(255,255,255,0.15);
}
.ba-label--after {
right: 16px;
background: var(--gold);
color: #000;
}
@media (max-width: 600px) {
.ba-divider__btn { width: 36px; height: 36px; }
}
/* ═══════════════════════════════════════════════════════════════
Case page — mobile UX
═══════════════════════════════════════════════════════════════ */
/* Мета-бар: 2 колонки на телефоне */
@media (max-width: 480px) {
.case-meta-bar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-5) var(--sp-6);
padding-bottom: var(--sp-6);
}
}
/* BA slider: min-height + лейблы ближе к краям + touch-action */
@media (max-width: 600px) {
.ba-compare {
min-height: 220px;
touch-action: none;
}
.ba-label {
font-size: 11px;
padding: 4px 8px;
top: 10px;
}
.ba-label--before { left: 10px; }
.ba-label--after { right: 10px; }
}
/* Подсказка свайпа под слайдером */
@media (max-width: 600px) {
.ba-wrap::after {
content: "← перетащите →";
display: block;
text-align: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.07em;
color: var(--muted);
margin-top: var(--sp-3);
}
}
/* Hero на кейс-странице: меньше высота и шрифт на маленьких экранах */
@media (max-width: 480px) {
.hero-section {
min-height: 88dvh;
padding-top: 96px;
}
.hero-section h1 {
font-size: clamp(26px, 7.5vw, 38px);
}
.hero-section p {
font-size: 15px;
}
}
/* Секции на кейс-странице: чуть тighter на очень маленьких */
@media (max-width: 380px) {
.case-stats {
gap: var(--sp-4);
}
.case-content-block p {
font-size: 15px;
}
}
/* ═══════════════════════════════════════════════════════════════
FLOATING MOBILE CTA
Появляется после прокрутки hero, исчезает у #contacts
═══════════════════════════════════════════════════════════════ */
.floating-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 880;
padding: 10px 16px;
padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
background: var(--glass);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--line);
display: flex;
gap: 10px;
align-items: center;
transform: translateY(110%);
transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.floating-cta.is-visible {
transform: translateY(0);
}
.floating-cta__call {
width: 48px;
min-width: 48px;
height: 48px;
border-radius: 50%;
background: var(--bg3);
border: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
text-decoration: none;
transition: background 0.2s, border-color 0.2s;
}
.floating-cta__call:hover {
background: var(--gold-bg);
border-color: rgba(246, 189, 58, 0.3);
}
.floating-cta__btn {
flex: 1;
height: 48px;
background: var(--gold);
color: #141414;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
transition: box-shadow 0.2s, transform 0.18s;
}
.floating-cta__btn:active {
transform: scale(0.97);
}
@media (min-width: 769px) {
.floating-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.floating-cta {
transition: opacity 0.2s;
transform: none !important;
}
.floating-cta:not(.is-visible) { opacity: 0; pointer-events: none; }
.floating-cta.is-visible { opacity: 1; }
}
/* ─── Hero quiz: direction-aware CTA button ─── */
.hero-quiz__cta.has-selection {
background: var(--quiz-cc, var(--gold));
box-shadow: 0 0 18px color-mix(in srgb, var(--quiz-cc, var(--gold)) 45%, transparent);
transition: background 0.25s, box-shadow 0.25s, transform 0.18s;
}
.hero-quiz__cta.has-selection:hover:not(:disabled) {
box-shadow: 0 0 36px color-mix(in srgb, var(--quiz-cc, var(--gold)) 60%, transparent);
transform: translateY(-1px);
}
/* ─── Form flash highlight при скролле от квиза ─── */
@keyframes cta-card-flash {
0% { box-shadow: 0 0 0 0 rgba(246,189,58,0); }
30% { box-shadow: 0 0 0 3px rgba(246,189,58,0.45); }
100% { box-shadow: 0 0 0 0 rgba(246,189,58,0); }
}
.cta-card.quiz-arrived {
animation: cta-card-flash 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes dir-chip-pop {
0% { transform: scale(1); }
40% { transform: scale(1.08); }
100% { transform: scale(1); }
}
.cta-dir-chip.quiz-popped {
animation: dir-chip-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
.cta-card.quiz-arrived,
.cta-dir-chip.quiz-popped { animation: none; }
}