/* ─── VARIABLES ─── */ :root { --bg: #080808; --bg2: #0d0d0d; --card: #111111; --card-h: #161616; --border: #ffffff; --border-h: #ffffff; --text: #ffffff; --text2: #888888; --text3: #444444; --text-body: rgba(255,255,255,0.78); /* body/secondary text — theme-aware */ --text-dim: rgba(255,255,255,0.45); /* faint text — theme-aware */ --fh: 'Space Grotesk', system-ui, sans-serif; --fb: 'Manrope', system-ui, sans-serif; --fm: 'IBM Plex Mono', ui-monospace, monospace; --ease: 0.35s ease; --w: 1520px; } /* ─── LIGHT THEME (toggled via ) ─── */ html[data-theme="light"] { --bg: #f2f2f2; --bg2: #f2f2f2; --card: #f2f2f2; --card-h: #f2f2f2; --border: #0a0a0c; --border-h: #0a0a0c; --text: #0a0a0c; --text2: #55555c; --text3: #a0a0a8; --text-body: rgba(10,10,12,0.82); --text-dim: rgba(10,10,12,0.5); color-scheme: light; } /* Фон корневого элемента — тёмный (под цвет футера): это «подложка», видимая в зоне оверскролла (резинка при прокрутке вниз/вверх). body остаётся светлым, контент не меняется. */ /* Подложка (видна при overscroll-«резинке»). На светлых страницах — светлая, чтобы не портить вид сверху; на главной (тёмный hero) и тёмных страницах (админка) — чёрная. */ html { background: #f2f2f2; } html[data-theme="dark"], html:has(body.home) { background: #050505; } /* light-theme fixes for elements with hardcoded dark/white chrome */ /* Адаптивная шапка. Фон всегда полностью прозрачный — без полосы и блюра. Меняется только цвет текста: над светлым контентом (по умолчанию) — чёрный, над тёмными секциями (класс .on-dark ставит JS) — белый. */ .header { background: transparent; /* без цветной подложки — только размытие */ backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); border-bottom-color: transparent; color: var(--text); } .header.on-dark { --bg: #080808; --bg2: #0d0d0d; --card: #111111; --border: #ffffff; --border-h: #ffffff; --text: #ffffff; --text2: #888888; --text3: #444444; --text-body: rgba(255,255,255,0.78); --text-dim: rgba(255,255,255,0.45); color: var(--text); color-scheme: dark; } /* Частичная адаптация: блок формально светлый, но под одной половиной шапки — тёмная картинка («О нас» — справа под навигацией, главная «Аэросистем» — слева под логотипом). Никаких подложек/бордеров: стандартная прозрачная шапка с тем же размытием, перекрашиваем в белый только ту половину, что оказалась над тёмным. */ .header.logo-on-dark .nav__logo { color: #ffffff; } /* Поэлементная адаптация: каждый пункт меню белеет сам, когда доминирующий фон под ним тёмный (частичное перекрытие секцией/чёрным блоком/выделением текста). */ .header .nav__link.is-on-dark, .header .theme-toggle.is-on-dark { color: #ffffff; } .header .nav__burger.is-on-dark span { background: #ffffff; } .header.nav-on-dark .nav__menu { --text: #ffffff; --text2: #888888; --text3: #444444; --text-body: rgba(255,255,255,0.78); --text-dim: rgba(255,255,255,0.45); color: #ffffff; color-scheme: dark; } /* иконка-глаз убрана из логотипа (шапка) и из прелоадера */ .logo-icon { display: none; } html[data-theme="light"] .btn--outline, html[data-theme="light"] .btn--hero { border-color: #0a0a0c; } html[data-theme="light"] .consent a { border-bottom-color: #0a0a0c; } html[data-theme="light"] .news-tag-btn, html[data-theme="light"] .field { accent-color: #0a0a0c; } html[data-theme="light"] .consent input { border-color: #0a0a0c; } html[data-theme="light"] .consent input:checked { background: var(--text); border-color: var(--text); } /* theme toggle button (injected into header) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; cursor: pointer; color: var(--text-body); transition: color var(--ease), border-color var(--ease); } .theme-toggle:hover { color: var(--text); } .theme-toggle svg { width: 18px; height: 18px; } /* index hero sits on dark video in ANY theme → keep its text/controls light */ .hero .hero__title { color: #ffffff; } .hero .hero__sub { color: rgba(255,255,255,0.72); } html[data-theme="light"] .hero .btn--hero { border-color: #ffffff; color: #fff; background: transparent; } html[data-theme="light"] .hero .btn--hero:hover { background: #fff; color: #0a0a0c; border-color: #fff; } /* Сайт работает только в светлой теме → переключатель тем скрыт. */ .nav__theme { display: none; } /* Видео-герой главной — «тёмный островок»: локально тёмная палитра, чтобы ховеры (var(--text)/var(--bg)) и прочее вели себя как в тёмной теме поверх видео. */ html[data-theme="light"] .hero { --bg: #080808; --bg2: #0d0d0d; --card: #111111; --border: #ffffff; --border-h: #ffffff; --text: #ffffff; --text2: #888888; --text3: #444444; --text-body: rgba(255,255,255,0.78); --text-dim: rgba(255,255,255,0.45); color-scheme: dark; } /* На тёмных зонах главной (видео-герой, «Аегис CRM», «Последние новости») выделение остаётся «тёмным»: белый фон, тёмный текст — иначе тёмное выделение теряется на тёмном фоне. */ html[data-theme="light"] .hero ::selection, html[data-theme="light"] #about ::selection, html[data-theme="light"] #news ::selection { background: #ffffff; color: #0a0a0c; text-shadow: none; } html[data-theme="light"] .hero ::-moz-selection, html[data-theme="light"] #about ::-moz-selection, html[data-theme="light"] #news ::-moz-selection { background: #ffffff; color: #0a0a0c; text-shadow: none; } /* Утилита .dark-section — тёмный «островок» на светлой странице: тёмный фон, светлый текст (через локальную тёмную палитру) и адаптированное выделение. */ .dark-section { --bg: #080808; --bg2: #0d0d0d; --card: #111111; --border: #ffffff; --border-h: #ffffff; --text: #ffffff; --text2: #888888; --text3: #444444; --text-body: rgba(255,255,255,0.78); --text-dim: rgba(255,255,255,0.45); color: var(--text); color-scheme: dark; background: #080808; } .dark-section ::selection { background: #ffffff; color: #0a0a0c; text-shadow: none; } .dark-section ::-moz-selection { background: #ffffff; color: #0a0a0c; text-shadow: none; } /* кнопки-аутлайн на тёмной секции: обводка светлая (в светлой теме её красят в тёмную → теряется) */ html[data-theme="light"] .dark-section .btn--outline { border-color: #ffffff; } /* ─── RESET ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* overflow-x: hidden на КОРНЕ гасит горизонтальный перелив от полноширинных 100vw-элементов (100vw включает ширину скроллбара → иначе справа вылезала полоса фона на узких экранах). */ html { scroll-behavior: smooth; font-size: 16px; scrollbar-width: none; -ms-overflow-style: none; overflow-x: hidden; } /* переход из футера «Услуги» → к секции прайса/конфигуратора: отступ под фиксированную шапку */ #pricing { scroll-margin-top: 88px; } html::-webkit-scrollbar { width: 0; height: 0; display: none; } /* min-width: пол вёрстки — ниже 360px (все массовые телефоны шире: Android 360, iPhone SE 375) страница не сжимается дальше, а прокручивается по горизонтали, а не «крушится» в кашу. */ body { background: var(--bg); color: var(--text); font-family: var(--fb); line-height: 1.6; overflow-x: hidden; min-width: 360px; } body::-webkit-scrollbar { width: 0; height: 0; display: none; } /* блокировка прокрутки страницы под открытым бургер-меню: реальный скроллер — , поэтому overflow:hidden на body его не держит; фиксируем body и запоминаем позицию в JS */ body.nav-scroll-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } /* text selection: white highlight, dark text (instead of default blue) */ /* consent checkbox (lead forms + registration) */ .consent { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.2rem 0 1.2rem; font-size: 0.78rem; color: var(--text2); line-height: 1.5; cursor: pointer; } /* конклюдентное принятие Условий — мелким текстом под кнопкой отправки */ .form-fineprint { margin: 0.85rem 0 0; font-size: 0.72rem; line-height: 1.5; color: var(--text2); text-align: center; } .form-fineprint a { color: var(--text); border-bottom: 1px solid currentColor; } .form-fineprint a:hover { opacity: 0.7; } /* тёмные модалки (контактная + авторизация) на светлой теме — светлый текст */ html[data-theme="light"] .modal .form-fineprint { color: rgba(255,255,255,0.5); } html[data-theme="light"] .modal .form-fineprint a { color: rgba(255,255,255,0.82); } .consent input { appearance: none; -webkit-appearance: none; margin-top: 0.1rem; width: 16px; height: 16px; flex-shrink: 0; border: 1px solid #ffffff; border-radius: 4px; background: transparent; cursor: pointer; position: relative; transition: border-color var(--ease), background var(--ease); } .consent input:hover { border-color: var(--text); } .consent input:checked { background: var(--text); border-color: var(--text); } .consent input:checked::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); } .consent input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .consent a { color: var(--text); border-bottom: 1px solid #ffffff; transition: opacity var(--ease), border-color var(--ease); } .consent a:hover { opacity: 0.65; } .consent a:hover { border-bottom-color: var(--text); } ::selection { background: var(--text); color: var(--bg); text-shadow: none; } ::-moz-selection { background: var(--text); color: var(--bg); text-shadow: none; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { background: none; border: none; cursor: pointer; color: inherit; font: inherit; } img { max-width: 100%; display: block; } /* убираем стандартный drag-ghost у ссылок, кнопок, картинок и иконок */ a, button, img, svg { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; user-drag: none; } /* плавное появление догружающихся изображений (кешированные показываются сразу) */ .img-fade { opacity: 0; transition: opacity 0.5s ease; } .img-fade.img-ready { opacity: 1; } /* ─── cookie-уведомление (в нашем стиле, угол экрана) ─── */ .cookie-banner { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 9000; max-width: 360px; background: var(--card); border: 1px solid var(--border-h); padding: 1.15rem 1.25rem; opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s ease; } .cookie-banner.show { opacity: 1; transform: none; } .cookie-banner__t { font-family: var(--fb); font-size: 0.8rem; line-height: 1.65; color: var(--text2); margin: 0 0 1rem; } .cookie-banner__t a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner__btn { font-family: var(--fm); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; background: var(--text); color: var(--bg); border: 1px solid var(--text); padding: 0.6rem 1.5rem; cursor: pointer; transition: opacity var(--ease); } .cookie-banner__btn:hover { opacity: 0.85; } @media (max-width: 560px) { .cookie-banner { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; } } /* ─── LAYOUT ─── */ .container { max-width: var(--w); margin: 0 auto; padding: 0 2rem; } .section { padding: 5.5rem 0; } /* ─── TYPOGRAPHY ─── */ .section-label { display: block; font-family: var(--fh); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.28em; color: var(--text2); text-transform: uppercase; margin-bottom: 0.9rem; } .section-title { font-family: var(--fh); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .section-head { margin-bottom: 3.5rem; } .section-head--center { text-align: center; } /* ─── BUTTONS ─── */ .btn { display: inline-block; padding: 0.8rem 2.2rem; font-family: var(--fh); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; transition: all var(--ease); cursor: pointer; } .btn--outline { border: 1px solid #ffffff; color: var(--text); background: transparent; } .btn--outline:hover { background: var(--text); color: var(--bg); border-color: var(--text); } .btn--hero { border: 1px solid #ffffff; color: var(--text); background: transparent; } .btn--hero:hover { background: var(--text); color: var(--bg); border-color: var(--text); } /* ─── HEADER ─── */ .header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 1.15rem 0; /* фикс. высота (чуть выше, без «пружины» при скролле) */ transition: background var(--ease), color var(--ease), border-color var(--ease); border-bottom: 1px solid transparent; } /* .scrolled больше не меняет размер/фон (это давало «пружину» и перекрывало адаптивный цвет) */ .nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .nav__logo { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; } .logo-icon { width: 36px; height: 36px; } .logo-icon--sm { width: 30px; height: 30px; } .logo-text { font-family: var(--fh); font-size: 1rem; font-weight: 700; letter-spacing: 0.12em; transition: color var(--ease); } .nav__list { display: flex; align-items: center; gap: 2.2rem; } .nav__link { font-family: var(--fh); font-size: 0.92rem; font-weight: 400; letter-spacing: normal; /* без трекинга — читается как обычный текст; выделяется шрифтом (--fh), а не «растянутостью» */ color: var(--text-body); transition: color var(--ease); position: relative; } .nav__link::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1.5px; background: var(--text); transition: width var(--ease); } /* Анимируем ширину, а не transform:scaleX — масштабируемая трансформом 1px-линия при движении растрируется на GPU и выглядит размыто-толще, а в конце скачком становится чёткой. Через width линия остаётся ровно 1px на всём протяжении. */ .nav__link:hover { color: var(--text); } .nav__link:hover::after { width: 100%; } /* Пункт авторизации: три заранее отрендеренных варианта (гость / кабинет / админ-панель). Нужный показывается синхронно классом на (см. inline-скрипт в ), ещё до первой отрисовки и без перестроения DOM — убирает мелькание «Войти → Кабинет/Админ-панель» при загрузке страниц и SPA-переходах. */ .nav__auth .na-user, .nav__auth .na-admin { display: none; } html.is-authed .nav__auth .na-guest { display: none; } html.is-authed:not(.is-admin) .nav__auth .na-user { display: inline; } html.is-authed.is-admin .nav__auth .na-admin { display: inline; } .nav__burger { display: none; flex-direction: column; gap: 5px; width: 26px; z-index: 200; flex-shrink: 0; } .nav__burger span { display: block; height: 2px; /* 2px: у 1px/1.5px линий субпиксельное округление давало разную толщину на разных зумах/DPR */ background: var(--text); transition: all var(--ease); transform-origin: center; } /* фирменный штрих: нижняя линия в полширины (прижата влево — читается как последняя строка абзаца); на ховере дорастает до полной */ .nav__burger span:nth-child(3) { width: 50%; } .nav__burger:hover span:nth-child(3) { width: 100%; } .nav__burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav__burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav__burger.open span:nth-child(3) { width: 100%; transform: rotate(-45deg) translate(5px, -5px); } /* в кресте — полная, иначе крест кривой */ /* служебные элементы мобильной панели («НАВИГАЦИЯ», «ПОСЛЕДНИЕ НОВОСТИ») — только на мобильном */ .mnav-label, .mnav-news { display: none; } /* ─── HERO MAP ─── */ .hero__map { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.42; transform: scaleY(1.12); /* slight vertical stretch — fixes the squashed look */ transform-origin: center; } /* The map canvas paints a dark radial vignette (rgba(8,8,8,…)) meant for the dark theme. On the white light-theme background it reads as a grey blob, so hide the map entirely there. (Particles draw white → invisible on white.) */ html[data-theme="light"] .hero__map { display: none; } /* ─── HERO ─── */ .hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .hero__slider { position: relative; width: 100%; height: 100%; z-index: 2; } .hero__slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: clamp(9rem, 26vh, 17rem); opacity: 0; pointer-events: none; transition: opacity 0.9s ease; } .hero__slide.active { opacity: 1; pointer-events: auto; } /* ─── SCULPTURE ─── */ .hero__visual { width: 260px; height: 240px; position: relative; margin-bottom: 2rem; flex-shrink: 0; } .sculpture { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .s-outer, .s-mid, .s-core { position: absolute; border-radius: 50%; animation: morph1 14s ease-in-out infinite; } .s-outer { width: 210px; height: 220px; background: radial-gradient(ellipse at 40% 35%, rgba(160,160,160,0.09) 0%, rgba(80,80,80,0.04) 45%, transparent 70%); filter: blur(18px); animation-name: morph1; animation-duration: 16s; } .s-mid { width: 150px; height: 165px; background: radial-gradient(ellipse at 38% 32%, rgba(220,220,220,0.11) 0%, rgba(120,120,120,0.06) 40%, transparent 65%); filter: blur(8px); animation-name: morph2; animation-duration: 11s; } .s-core { width: 95px; height: 110px; background: radial-gradient(ellipse at 36% 30%, rgba(255,255,255,0.14) 0%, rgba(180,180,180,0.07) 35%, transparent 60%); filter: blur(3px); animation-name: morph3; animation-duration: 8s; } /* Each sculpture variant has a slightly different starting shape */ .s1 .s-outer { border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; } .s2 .s-outer { border-radius: 55% 45% 40% 60% / 45% 60% 40% 55%; } .s3 .s-outer { border-radius: 60% 40% 50% 50% / 55% 45% 55% 45%; } .s4 .s-outer { border-radius: 45% 55% 65% 35% / 50% 55% 45% 50%; } @keyframes morph1 { 0%,100% { border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; } 25% { border-radius: 55% 45% 40% 60% / 45% 60% 40% 55%; } 50% { border-radius: 60% 40% 50% 50% / 55% 45% 55% 45%; } 75% { border-radius: 45% 55% 65% 35% / 50% 55% 45% 50%; } } @keyframes morph2 { 0%,100% { border-radius: 55% 45% 40% 60% / 45% 60% 40% 55%; } 33% { border-radius: 40% 60% 60% 40% / 55% 45% 55% 45%; } 66% { border-radius: 65% 35% 45% 55% / 50% 50% 60% 40%; } } @keyframes morph3 { 0%,100% { border-radius: 45% 55% 55% 45% / 50% 50% 50% 50%; } 50% { border-radius: 55% 45% 45% 55% / 45% 55% 45% 55%; } } /* ─── HERO CONTENT ─── */ .hero__content { text-align: left; z-index: 2; width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 2rem; } .hero__title { font-family: var(--fh); font-size: clamp(3rem, 9.5vw, 7rem); font-weight: 900; letter-spacing: -0.01em; line-height: 0.98; margin-bottom: 1.4rem; min-height: 1.96em; /* резерв под 2 строки — слайды не скачут */ display: flex; flex-direction: column; justify-content: flex-end; } .hero__sub { font-family: var(--fb); font-size: clamp(0.95rem, 1.4vw, 1.15rem); font-weight: 400; letter-spacing: 0.02em; color: var(--text-dim); margin-bottom: 2.2rem; min-height: 5.1em; /* резерв под 3 строки — кнопки на одном уровне */ } /* eyebrow + actions (dark zone — всегда светлые) */ .hero__eyebrow { font-family: var(--fm); font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255,255,255,0.55); display: inline-flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; } .hero__eyebrow::before { content: ""; width: 28px; height: 1px; background: rgba(255,255,255,0.35); display: inline-block; } .hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; } .btn--hero-solid, html[data-theme="light"] .hero .btn--hero-solid { background: #fff; color: #0a0a0c; border-color: #fff; display: inline-flex; align-items: center; gap: 0.55rem; } .btn--hero-solid:hover, html[data-theme="light"] .hero .btn--hero-solid:hover { background: transparent; color: #fff; border-color: #fff; } .btn--hero-solid .btn-arr { transition: transform var(--ease); } .btn--hero-solid:hover .btn-arr { transform: translateX(4px); } /* slider nav: стрелки + полоски + счётчик */ .hero__nav { position: absolute; bottom: 2.4rem; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 1.4rem; width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 2rem; } .hero__bars { display: flex; align-items: center; gap: 0.5rem; } .hero__bar { width: 28px; height: 2px; background: rgba(255,255,255,0.25); border: none; padding: 0; cursor: pointer; transition: all 0.4s ease; } .hero__bar.active { width: 56px; background: #fff; } .hero__count { font-family: var(--fm); font-size: 0.72rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.5); margin-left: 0.4rem; } .hero__count span { color: #fff; } /* ─── SERVICES ─── */ .services { background: var(--bg2); } .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); } .scard { padding: 2.5rem 2rem 2.2rem; border-right: 1px solid var(--border); background: var(--card); display: flex; flex-direction: column; gap: 0.9rem; transition: background var(--ease); cursor: pointer; } .scard:last-child { border-right: none; } .scard:hover { background: var(--card-h); } .scard__icon { width: 44px; height: 44px; color: var(--text-body); } .scard__icon svg { width: 100%; height: 100%; } .scard__title { font-family: var(--fh); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .scard__text { font-size: 0.83rem; color: var(--text2); line-height: 1.65; flex: 1; } .scard__arrow { font-size: 1.1rem; color: var(--text-dim); display: inline-block; transition: color var(--ease), transform var(--ease); } .scard:hover .scard__arrow { color: var(--text); transform: translateX(5px); } /* ─── ABOUT ─── */ .about { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--bg); } /* Homepage: each major section fills the viewport so they breathe (matches the video block) */ .home > section.services, .home > section.fcase, .home > section.news, .home > section.cta { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } /* flex + margin-auto makes containers size to content; force full width so the news ticker (max-content track) can't blow the column past the viewport */ .home > section.services > .container, .home > section.fcase > .container, .home > section.news > .container, .home > section.cta > .container { width: 100%; } .news-marquee { max-width: 100%; } @media (max-width: 768px) { .home > section.services, .home > section.fcase, .home > section.news, .home > section.cta { min-height: auto; } } /* Pages flagged .tall-sections: each content section fills the viewport */ .tall-sections > section.section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } .tall-sections > section.section > .container { width: 100%; } /* «Наша история» — поднять выше центра (а не в самой середине секции) */ .tall-sections > section.story-section { justify-content: flex-start; padding-top: 15vh; padding-bottom: 8vh; } @media (max-width: 768px) { .tall-sections > section.story-section { padding-top: 0; } } @media (max-width: 768px) { .tall-sections > section.section { min-height: auto; } } .about-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; filter: grayscale(1) contrast(1.05); pointer-events: none; /* Dark placeholder so the hero never flashes flat black while the video buffers/decodes on navigation. The