/* ========================================================================== base.css — общий фундамент всех вариантов: токены, сброс, каркас секций, шапка, прелоадер, форма, подвал. Характер варианта (шрифты, ритм, карточки, hero) живёт в theme-*.css. Цвета — из палитры клиента: фон #050018, акцент #f8f1b4. ========================================================================== */ /* -------------------------------------------------------------------------- ПАЛИТРЫ Три набора фона на одном и том же коде. Переключаются параметром ?p= в адресе (см. инлайновый скрипт в ), поэтому сравнивать их можно не пересобирая страницы и не плодя копии. Почему их три, а не одна из брифа. В брифе указан #050018 — это rgb(5, 0, 24), и красный канал в нём даёт фиолетовый отлив. Фон логотипа, который прислал клиент, — #000119, то есть rgb(0, 1, 25): та же глубина, но красного ноль, и фиолетового не читается вовсе. (по умолчанию) brief #050018 — как написано в ТЗ ?p=logo #000119 — снято пипеткой с логотипа клиента ?p=graphite #08080a — глубокий чёрно-серый, золото на графите --ink-rgb хранит тот же цвет числами: из него собираются вуали поверх фотографий (rgb(var(--ink-rgb) / 0.7)), иначе при смене палитры затемнение осталось бы от старой. -------------------------------------------------------------------------- */ :root { --ink-rgb: 5 0 24; --ink: #050018; --ink-soft: #0a0327; --ink-lift: #0d0530; --gold: #f8f1b4; --gold-dim: rgba(248, 241, 180, 0.55); --hairline: rgba(248, 241, 180, 0.20); --hairline-2: rgba(248, 241, 180, 0.10); --white: #ffffff; --muted: rgba(255, 255, 255, 0.68); --muted-2: rgba(255, 255, 255, 0.45); --shell: min(1280px, 100% - 2 * var(--gutter)); --gutter: clamp(1.25rem, 4vw, 4rem); --section-y: clamp(4.5rem, 9vw, 9rem); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --nav-h: 76px; } /* Палитра логотипа: красного нет совсем — тот же тёмно-синий, но без фиолета. */ :root[data-palette="logo"] { --ink-rgb: 0 1 25; --ink: #000119; --ink-soft: #01062a; --ink-lift: #020b38; } /* Графит: глубокий чёрно-серый, золото читается контрастнее всего. */ :root[data-palette="graphite"] { --ink-rgb: 8 8 10; --ink: #08080a; --ink-soft: #101013; --ink-lift: #17171b; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Якорь не должен уезжать под липкую шапку. */ scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--ink); color: var(--white); /* Никаких подделок начертаний. У части гарнитур (например, Marcellus) нет курсива вовсе, и браузер по умолчанию рисует его наклоном — на заголовке первого экрана это видно сразу и выглядит дёшево. Лучше прямое начертание, чем поддельное. */ font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video, svg { display: block; max-width: 100%; } /* Коробку задаёт , картинка внутри её заполняет — иначе строчный по умолчанию схлопнулся бы по содержимому и утащил за собой раскладку. */ picture { display: block; } picture > img { width: 100%; height: 100%; object-fit: cover; } img, video { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p { margin: 0; text-wrap: pretty; } h1, h2, h3 { text-wrap: balance; font-weight: 400; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .shell { width: var(--shell); margin-inline: auto; } .section { position: relative; padding-block: var(--section-y); } .rule { height: 1px; background: var(--hairline); border: 0; margin: 0; } .gold { color: var(--gold); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ГРАДИЕНТЫ — ТОЛЬКО ПОВЕРХ ИЗОБРАЖЕНИЙ. Фон страницы ровный #050018 из палитры клиента, без свечений и подложек. Градиент в проекте выполняет ровно одну работу: гасит фотографию или кадр видео, чтобы по нему читался текст. Своего фонового градиента у секций нет — раньше здесь стояли радиальные пятна, и они уводили цвет в фиолетовый мимо палитры. Если снова захочется «оживить» фон — это не сюда. */ /* -------------------------------------------------------------------------- Прелоадер: знак прорисовывается линией, затем занавес уходит вверх. Это ответ на «красивое начало» у образца — у них Lottie на 200 КБ, здесь CSS. -------------------------------------------------------------------------- */ .preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--ink); transition: transform 0.9s var(--ease) 0.15s, visibility 0s linear 1.05s; } .preloader__mark { width: clamp(120px, 18vw, 190px); color: var(--gold); } /* Длина кривой объявлена в SVG как pathLength="100", поэтому здесь ровно 100 и никакой подгонки под настоящий периметр эллипса. */ .preloader__mark ellipse { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 1.5s var(--ease) forwards; } .preloader__mark ellipse:nth-child(1) { animation-delay: 0.00s; } .preloader__mark ellipse:nth-child(2) { animation-delay: 0.10s; } .preloader__mark ellipse:nth-child(3) { animation-delay: 0.20s; } .preloader__mark ellipse:nth-child(4) { animation-delay: 0.30s; } .preloader__mark ellipse:nth-child(5) { animation-delay: 0.40s; } .preloader__mark ellipse:nth-child(6) { animation-delay: 0.50s; } /* У вариантов знака число эллипсов разное (3, 5, 6, 8) — задержки с запасом, иначе лишние кривые стартовали бы все разом на нулевой секунде. */ .preloader__mark ellipse:nth-child(7) { animation-delay: 0.60s; } .preloader__mark ellipse:nth-child(8) { animation-delay: 0.70s; } .preloader__mark ellipse:nth-child(9) { animation-delay: 0.80s; } .preloader__mark ellipse:nth-child(10) { animation-delay: 0.90s; } .preloader__mark ellipse:nth-child(11) { animation-delay: 1.00s; } .preloader__mark ellipse:nth-child(12) { animation-delay: 1.10s; } .preloader__word { margin-top: 1.5rem; text-align: center; font-size: clamp(0.72rem, 1.4vw, 0.9rem); letter-spacing: 0.42em; text-indent: 0.42em; color: var(--gold-dim); opacity: 0; animation: fade 0.8s var(--ease) 1.05s forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes fade { to { opacity: 1; } } body.is-loaded .preloader { transform: translateY(-101%); visibility: hidden; } @media (prefers-reduced-motion: reduce) { .preloader { display: none; } } /* -------------------------------------------------------------------------- Шапка -------------------------------------------------------------------------- */ .nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; transition: background 0.4s var(--ease), border-color 0.4s var(--ease); border-block-end: 1px solid transparent; } .nav.is-stuck { background: rgb(var(--ink-rgb) / 0.82); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-block-end-color: var(--hairline-2); } .nav__inner { width: var(--shell); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .brand { display: flex; align-items: center; gap: 0.7rem; color: var(--gold); } .brand svg { width: 34px; height: 34px; flex: none; } .brand__word { font-size: 0.78rem; letter-spacing: 0.3em; text-indent: 0.3em; white-space: nowrap; color: var(--white); } .nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); } .nav__link { position: relative; padding-block: 0.4rem; font-size: 0.82rem; letter-spacing: 0.09em; color: var(--muted); transition: color 0.25s var(--ease); } .nav__link::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 0.3s var(--ease); } .nav__link:hover { color: var(--white); } .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; } .nav__link.is-active { color: var(--gold); } .nav__burger { display: none; width: 34px; height: 34px; position: relative; } .nav__burger span { position: absolute; inset-inline: 4px; height: 1px; background: var(--white); transition: transform 0.3s var(--ease), opacity 0.2s var(--ease); } .nav__burger span:nth-child(1) { top: 12px; } .nav__burger span:nth-child(2) { top: 21px; } body.is-menu-open .nav__burger span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); } body.is-menu-open .nav__burger span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); } @media (max-width: 900px) { .nav__burger { display: block; } .nav__links { position: fixed; inset: var(--nav-h) 0 0; z-index: 49; flex-direction: column; justify-content: center; gap: 1.75rem; background: rgb(var(--ink-rgb) / 0.97); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s; } .nav__link { font-size: 1.15rem; } body.is-menu-open .nav__links { opacity: 1; visibility: visible; } body.is-menu-open { overflow: hidden; } } /* -------------------------------------------------------------------------- Заголовок секции -------------------------------------------------------------------------- */ .sec-head { position: relative; z-index: 1; margin-block-end: clamp(2.5rem, 5vw, 4rem); } .sec-head__eyebrow { display: flex; align-items: center; gap: 0.9rem; font-size: 0.7rem; letter-spacing: 0.34em; text-indent: 0.34em; color: var(--gold-dim); margin-block-end: 1.1rem; } .sec-head__eyebrow::before { content: ""; width: clamp(24px, 4vw, 56px); height: 1px; background: var(--gold); flex: none; } .sec-head__intro { max-width: 48ch; margin-block-start: 1.1rem; color: var(--muted); line-height: 1.65; } /* -------------------------------------------------------------------------- Появление блоков по скроллу -------------------------------------------------------------------------- */ /* Прятать блок можно ТОЛЬКО когда есть кому его показать обратно: класс .js ставится инлайновым скриптом в . Без скриптов (или если файл не доехал) страница остаётся полностью читаемой — она уходит инвесторам ссылкой, пустая страница здесь дороже любой анимации. */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } /* Прелоадер по той же причине: нет JS — нет и занавеса. */ html:not(.js) .preloader { display: none; } /* -------------------------------------------------------------------------- Форма (сверх ТЗ — добавлена нами) -------------------------------------------------------------------------- */ .form { display: grid; gap: 1.4rem; } .form__row { display: grid; gap: 1.4rem; grid-template-columns: 1fr 1fr; } @media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } } .field { position: relative; } .field input, .field textarea { width: 100%; padding: 0.95rem 0 0.7rem; color: var(--white); background: none; border: 0; border-block-end: 1px solid var(--hairline); font: inherit; font-size: 0.95rem; border-radius: 0; transition: border-color 0.3s var(--ease); } .field textarea { resize: vertical; min-height: 100px; } .field input:focus, .field textarea:focus { outline: none; border-block-end-color: var(--gold); } .field label { position: absolute; inset-block-start: 0.95rem; inset-inline-start: 0; font-size: 0.95rem; color: var(--muted-2); pointer-events: none; transition: transform 0.25s var(--ease), font-size 0.25s var(--ease), color 0.25s var(--ease); } .field input:focus + label, .field textarea:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-1.15rem); font-size: 0.68rem; letter-spacing: 0.16em; color: var(--gold-dim); } .btn { display: inline-flex; align-items: center; gap: 0.75rem; align-self: start; padding: 0.9rem 1.9rem; border: 1px solid var(--gold); color: var(--gold); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; transition: background 0.3s var(--ease), color 0.3s var(--ease); } .btn:hover { background: var(--gold); color: var(--ink); } .btn svg { width: 14px; transition: transform 0.3s var(--ease); } .btn:hover svg { transform: translateX(4px); } .form__note { font-size: 0.78rem; color: var(--muted-2); } /* Ловушка для ботов. Не display:none и не hidden: часть спам-скриптов такие поля как раз пропускает. Поле физически на странице, но вынесено за пределы экрана, не занимает места и не участвует в раскладке. */ .form__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* -------------------------------------------------------------------------- Подвал -------------------------------------------------------------------------- */ .footer { padding-block: 2.5rem; border-block-start: 1px solid var(--hairline-2); } .footer__inner { width: var(--shell); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted-2); } /* Плейсхолдер обязан быть заметным, чтобы не уехать в сдачу незамеченным. */ .placeholder { border-block-end: 1px dashed rgba(248, 241, 180, 0.5); color: var(--gold-dim); } /* Ленты на мобиле — нативный scroll-snap вместо библиотеки-карусели. На десктопе прокруток нет, как требует ТЗ. */ @media (max-width: 760px) { .snap { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; } .snap::-webkit-scrollbar { display: none; } .snap > * { flex: 0 0 78%; scroll-snap-align: start; } }