/* landing-dark.css — общий тёмный слой лендинга. Первый экран, сравнение, «Знакомо?», «Что внутри» и галерея нарисованы тёмными жёстко. Чтобы остальные секции не выбивались, весь лендинг переводим на одну тёмно-синюю палитру: компоненты собраны на переменных темы, поэтому достаточно переопределить их на . Тексты и разметка при этом не меняются — только оформление. */ body.lp-dark { --page: #05070c; --surface: #0b0e15; --ink: #eef2f8; --ink-2: #a9b8cc; --muted: #7b8ca3; --grid: #17212f; --axis: #22303f; --border: rgba(255, 255, 255, .09); --blue: #4a94ec; --blue-soft: rgba(47, 127, 224, .16); --aqua: #2ec5a4; --aqua-soft: rgba(46, 197, 164, .14); --violet: #9c92ec; --violet-soft: rgba(156, 146, 236, .15); --yellow: #e3ad4e; --yellow-soft: rgba(227, 173, 78, .15); --red: #e66767; --red-soft: rgba(230, 103, 103, .14); --green: #2ec5a4; --glass: rgba(255, 255, 255, .028); --grad-brand: linear-gradient(120deg, #2f8ef0, #2ec5a4); --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 22px 48px -30px rgba(0, 0, 0, .95); background: #05070c; color: var(--ink); } /* фон страницы — спокойное синее свечение вместо цветных пятен темы */ body.lp-dark .bg-mesh { inset: 0; position: fixed; background: radial-gradient(50vmax 42vmax at 8% 4%, rgba(38, 98, 190, .34), transparent 62%), radial-gradient(44vmax 38vmax at 92% 20%, rgba(30, 112, 175, .26), transparent 64%), radial-gradient(56vmax 48vmax at 74% 82%, rgba(40, 84, 180, .26), transparent 66%), radial-gradient(44vmax 38vmax at 16% 76%, rgba(32, 96, 165, .22), transparent 66%), #05070c; animation: none; } /* переключатель темы на лендинге ничего не меняет — он тут всегда тёмный */ body.lp-dark .theme-toggle { display: none; } /* ---------- заголовки секций ---------- */ /* только по вертикали: короткая запись обнуляла боковые поля у элементов, где .section и .wrap-narrow/.wrap-wide висят на одном узле, — текст статьи прилипал к краям экрана */ body.lp-dark .section { padding-top: clamp(60px, 7.2vw, 118px); padding-bottom: clamp(60px, 7.2vw, 118px); } body.lp-dark .section h2 { padding: 0; font-size: clamp(27px, 3.1vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; color: #fff; } body.lp-dark .section h2::before { content: none; } /* маркер-полоска — стиль курса, не лендинга */ /* крошка над заголовком — как на первом экране: без плашки, одной строкой */ body.lp-dark .eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; padding: 0; font: 700 11.5px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #8fa3bd; background: none; border: none; border-radius: 0; } body.lp-dark .section .lead { font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.62; color: #9fb0c6; } /* «маркерное» подчёркивание — приём материалов курса; на лендинге оно только рябит, оставляем просто акцент цветом */ body.lp-dark p b, body.lp-dark li b { background: none; padding: 0; border-radius: 0; color: #dce6f3; } body.lp-dark .st-price { background: none; padding: 0; color: #8fc2ff; } /* ---------- кнопки ---------- */ body.lp-dark .btn-solid { background: linear-gradient(160deg, #3a97f2 0%, #1e6ed2 100%); box-shadow: 0 0 26px -6px rgba(45, 140, 240, .55), 0 14px 30px -18px rgba(0, 0, 0, .9); } body.lp-dark .btn-solid:hover { background: linear-gradient(160deg, #4aa3fb 0%, #2477dc 100%); } body.lp-dark .btn-ghost { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); color: #dbe6f4; } body.lp-dark .btn-ghost:hover { border-color: #4a94ec; color: #fff; } /* ---------- общий вид карточек ---------- */ body.lp-dark .pg-card, body.lp-dark .bl-card, body.lp-dark .st-card, body.lp-dark .rev-card, body.lp-dark .team-card, body.lp-dark .faq-item, body.lp-dark .price-card, body.lp-dark .legal-card, body.lp-dark .tg-join, body.lp-dark .bl-more, body.lp-dark .rev-avg-box { background: linear-gradient(160deg, #0b0e15 0%, #08090f 100%); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 22px 48px -34px rgba(0, 0, 0, .95); } body.lp-dark .pg-card, body.lp-dark .bl-card, body.lp-dark .st-card, body.lp-dark .rev-card, body.lp-dark .team-card, body.lp-dark .faq-item { border-radius: 16px; } body.lp-dark .pg-card:hover, body.lp-dark .bl-card:hover, body.lp-dark .team-card:hover { border-color: color-mix(in srgb, var(--c, var(--blue)) 48%, transparent); transform: translateY(-2px); } /* цветная подсветка угла — как у плиток «Что внутри» */ body.lp-dark .pg-card, body.lp-dark .bl-card, body.lp-dark .st-card { background: radial-gradient(110% 95% at 0% 0%, color-mix(in srgb, var(--c, var(--blue)) 16%, transparent), transparent 60%), linear-gradient(160deg, #0b0e15 0%, #08090f 100%); border-color: color-mix(in srgb, var(--c, var(--blue)) 26%, rgba(255, 255, 255, .06)); transition: border-color .18s ease, transform .18s ease; } /* ---------- точечно ---------- */ body.lp-dark .pg-n, body.lp-dark .st-n { color: #fff; background: color-mix(in srgb, var(--c, var(--blue)) 62%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--blue)) 45%, transparent); } body.lp-dark .pg-card b, body.lp-dark .st-card b { color: #fff; } body.lp-dark .pg-fx { color: color-mix(in srgb, var(--c, var(--blue)) 40%, transparent); opacity: .5; } body.lp-dark .bl-year { color: #fff; } body.lp-dark .bl-tag { color: color-mix(in srgb, var(--c, var(--blue)) 80%, #fff); background: color-mix(in srgb, var(--c, var(--blue)) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--blue)) 36%, transparent); } body.lp-dark .bl-open { color: color-mix(in srgb, var(--c, var(--blue)) 82%, #fff); } /* снимки оформляем как окна — тот же приём, что в галерее «Загляни внутрь» */ body.lp-dark .nom-shot { position: relative; padding: 34px 0 0; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, #10141c 0%, #090b11 100%); box-shadow: 0 24px 54px -36px rgba(0, 0, 0, .95); } body.lp-dark .nom-shot::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 34px; border-bottom: 1px solid rgba(255, 255, 255, .06); background: radial-gradient(circle 4.5px at 16px 17px, #ff5f57 96%, transparent 100%), radial-gradient(circle 4.5px at 32px 17px, #febc2e 96%, transparent 100%), radial-gradient(circle 4.5px at 48px 17px, #28c840 96%, transparent 100%), rgba(255, 255, 255, .02); } body.lp-dark .nom-shot img { display: block; width: 100%; height: auto; border: none; border-radius: 0; } body.lp-dark .nom-shot figcaption { padding: 13px 16px 15px; color: #8b9bb0; } body.lp-dark .price-card { border-radius: 20px; } body.lp-dark .price-amount { color: #fff; } body.lp-dark .price-card ul li::before { color: #2ec5a4; } body.lp-dark .faq-item summary { color: #eaf1fa; } body.lp-dark .faq-item.faq-hot { border-color: rgba(74, 148, 236, .45); background: radial-gradient(120% 100% at 0% 0%, rgba(47, 127, 224, .14), transparent 62%), linear-gradient(160deg, #0b0e15 0%, #08090f 100%); } body.lp-dark .team-role { color: #8fb4e6; } body.lp-dark .rev-name { color: #fff; } body.lp-dark .rev-pg { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); } body.lp-dark .pl-chip { background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .1); color: #c3d3e6; } body.lp-dark .pl-chip.on { color: #fff; border-color: transparent; background: linear-gradient(160deg, #3a97f2 0%, #1e6ed2 100%); box-shadow: 0 0 22px -6px rgba(45, 140, 240, .6); } /* подписи и сноски — чуть холоднее, чем нейтральный muted */ body.lp-dark .disclaimer-note, body.lp-dark .st-cta-note, body.lp-dark .legal-req-note, body.lp-dark .rev-note, body.lp-dark .hero-note { color: #7e8fa6; } /* ---------- единая синяя акцентная линия ---------- */ /* бирюзово-синий градиент дизайн-системы курса на лендинге заменяем на синий: он совпадает с кнопками первого экрана и плиток */ body.lp-dark .rf-chip.on, body.lp-dark .rev-pg.on, body.lp-dark .faq-badge, body.lp-dark .price-badge { background: linear-gradient(160deg, #3a97f2 0%, #1e6ed2 100%); border-color: transparent; color: #fff; } body.lp-dark .rf-chip { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .1); color: #c3d3e6; } body.lp-dark .price-card::after { background: linear-gradient(90deg, #3a97f2, #2ec5a4); } body.lp-dark .pl-chip.on small { color: rgba(255, 255, 255, .82); } /* аватар-заглушка отзыва остаётся сине-бирюзовой — это единственное цветное пятно в ленте отзывов, и оно помогает отличать авторов */ body.lp-dark .rev-fallback { background: linear-gradient(140deg, #2ec5a4, #3a97f2); } /* ---------- появление блоков при прокрутке ---------- */ /* класс навешивает site.js; до входа в кадр элемент чуть ниже и прозрачный */ body.lp-dark .apx { opacity: 0; transform: translateY(20px); transition: opacity .65s var(--ease), transform .65s var(--ease); will-change: opacity, transform; } body.lp-dark .apx.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { body.lp-dark .apx { opacity: 1; transform: none; transition: none; } } /* Секция вопросов — единственная текстовая на лендинге: её колонка уже остальных блоков, поэтому ставим её по центру, иначе справа остаётся пустая половина экрана и блок читается как недовёрстанный. */ body.lp-dark #faq .wrap-wide { max-width: 960px; } body.lp-dark #faq .faq-list { max-width: none; } /* Принудительные переносы в абзацах свёрстаны под широкий экран: на телефоне они рвут строки посреди фразы — там абзац переносится сам. */ @media (max-width: 640px) { body.lp-dark .ci-lead br, body.lp-dark .cb-sub br { display: none; } } /* ---------- кабинет ---------- */ /* Кабинет собран на одной акцентной переменной --aqua: на тёмно-синем макете бирюза читается как остаток прежнего оформления. Переводим акцент кабинета на синий лендинга; сам лендинг правило не задевает — там нет page-cabinet. */ body.page-cabinet.lp-dark { --aqua: #4a94ec; --aqua-soft: rgba(47, 127, 224, .16); } /* ---------- общий контейнер ---------- */ /* Шапка идёт по 1640px, а .wrap-wide — по 1120: при переходе с лендинга на билеты или вход контент прыгал вправо относительно логотипа. Расширяем контейнер до тех же полей, а длину строки держим за счёт текстовых блоков. */ body.lp-dark .wrap-wide { max-width: 1640px; /* только боковые поля: у .section вертикальные свои, и короткая запись padding их обнуляла — блок прилипал к шапке */ padding-left: clamp(20px, 4.2vw, 76px); padding-right: clamp(20px, 4.2vw, 76px); } body.lp-dark .wrap-wide > p, body.lp-dark .wrap-wide > ul, body.lp-dark .wrap-wide > ol, body.lp-dark .wrap-wide > h2, body.lp-dark .wrap-wide > h3, body.lp-dark .wrap-wide > h4, body.lp-dark .wrap-wide > .lead, body.lp-dark .wrap-wide > .small, body.lp-dark .wrap-wide > .price-note, body.lp-dark .wrap-wide > .callout, body.lp-dark .wrap-wide > .muted-note { max-width: 80ch; } /* ---------- шапка на лендинге ---------- */ /* логотип уходит к левому краю страницы, меню и кнопка группируются справа */ body.lp-dark .site-nav-inner { max-width: 1640px; padding: 12px clamp(20px, 4.2vw, 76px); padding-right: clamp(96px, 9vw, 150px); gap: 18px; } body.lp-dark .site-nav-links { margin-left: auto; gap: clamp(16px, 1.6vw, 26px); } body.lp-dark .site-nav-cta { margin-left: clamp(14px, 1.6vw, 26px); } /* На телефоне шапку раскладывает site.css (логотип + бургер, меню выпадает вниз). Правила выше специфичнее медиазапросов оттуда и запирали меню в узкую колонку — возвращаем мобильной раскладке её поля. */ @media (max-width: 760px) { body.lp-dark .site-nav-inner { padding: 18px 16px; gap: 10px; row-gap: 14px; } body.lp-dark .site-nav-links, body.lp-dark .site-nav-cta { margin-left: 0; } } @media (max-width: 400px) { body.lp-dark .site-nav-inner { padding: 17px 12px; gap: 14px 8px; } } /* ---------- страницы входа и регистрации ---------- */ /* На лендинге кнопки синие и почти квадратные — приводим формы к тому же виду, иначе переход с лендинга на вход выглядит как другой сайт. */ body.lp-dark .au-btn, body.lp-dark .au-new-main { border-radius: 4px; background: linear-gradient(160deg, #3a97f2 0%, #1e6ed2 100%); box-shadow: 0 0 26px -10px rgba(45, 140, 240, .8), 0 14px 30px -18px rgba(0, 0, 0, .9); } body.lp-dark .au-new-ghost { border-radius: 4px; } body.lp-dark .au-card, body.lp-dark .au-side { border-radius: 18px; background: linear-gradient(160deg, #0b0e15 0%, #08090f 100%); } body.lp-dark .au-input input { border-radius: 8px; } body.lp-dark .au-card h1::before, body.lp-dark .au-card h2::before, body.lp-dark .au-side h1::before, body.lp-dark .au-side h2::before { content: none; } /* ---------- кнопки: как на первом экране, со скруглением 4px ---------- */ body.lp-dark .btn, body.lp-dark .bk-btn, body.lp-dark .bk-btn2, body.lp-dark .bk-band-btn, body.lp-dark .sf-btn, body.lp-dark .pn-band-btn, body.lp-dark .pr-tg-btn, body.lp-dark .ci-btn, body.lp-dark .c2-btn, body.lp-dark .cb-btn, body.lp-dark .nav-profile, body.lp-dark .rev-pg { border-radius: 4px; } body.lp-dark .pr-card .btn-solid, body.lp-dark .pr-card .btn-tg, body.lp-dark .pr-card .btn-ghost { border-radius: 4px; }