/* Главная в двух темах. Подключается только на маршрутах с 'theme' => 'switch' (см. inc/layout.php). Класс .pp-lt ставится на инлайновым скриптом в ещё до первой отрисовки, иначе светлая страница мигает тёмным. Одна вёрстка, два набора переменных. Тёмные значения объявлены на :root и повторяют исходную палитру главной, светлые перекрывают их в .pp-lt. Тёмное остаётся тёмным в обеих темах: герой, маркиза, остров «кейсы + отрасли», лид-магнит, финальный CTA и подвал. Светлые секции помечены в разметке классом .pp-lt-sec, по нему цепляются правила компонентов. */ :root { --pp-fg:#ecedf7; /* заголовки и основной текст */ --pp-fg-2:#c9cbe0; /* абзацы */ --pp-fg-3:#a4a6c2; /* вторичные абзацы */ --pp-fg-4:#9092ad; /* подписи */ --pp-fg-5:#8688a6; /* мелкие подписи */ --pp-fg-mute:#6e6f8e; /* приглушённая часть заголовка */ --pp-accent:#8047dd; /* акцент в мелком тексте */ --pp-surface:rgba(255,255,255,0.035); --pp-surface-v:linear-gradient(180deg,rgba(125,123,255,0.08),rgba(255,255,255,0.015)); --pp-card:linear-gradient(180deg,rgba(255,255,255,0.045),rgba(255,255,255,0.012)); --pp-card-v:linear-gradient(180deg,rgba(125,123,255,0.07),rgba(255,255,255,0.015)); --pp-card-b:linear-gradient(180deg,rgba(77,141,255,0.07),rgba(255,255,255,0.012)); --pp-card-line:rgba(255,255,255,0.08); --pp-card-line-v:rgba(255,255,255,0.08); --pp-card-line-b:rgba(255,255,255,0.08); --pp-line:rgba(255,255,255,0.08); --pp-line-2:rgba(255,255,255,0.1); --pp-line-3:rgba(255,255,255,0.12); --pp-line-4:rgba(255,255,255,0.16); --pp-band:linear-gradient(180deg,#06070e,#090a16,#06070e); --pp-band-2:linear-gradient(180deg,#06070e,#090a16,#06070e); --pp-shadow:none; --pp-blob-opacity:1; --pp-glow-a:radial-gradient(circle,rgba(125,123,255,0.18),transparent 70%); --pp-glow-b:radial-gradient(circle,rgba(77,141,255,0.18),transparent 70%); } .pp-lt { --pp-fg:#14151d; --pp-fg-2:#4b4d61; --pp-fg-3:#55576d; --pp-fg-4:#6a6c82; --pp-fg-5:#787a8f; --pp-fg-mute:#a6a8b9; --pp-accent:#6d2fc7; /* #8047dd на белом даёт всего 4.4:1 */ --pp-surface:#ffffff; --pp-surface-v:linear-gradient(180deg,#f7f3ff,#ffffff); --pp-card:#ffffff; --pp-card-v:linear-gradient(180deg,#f7f3ff,#ffffff); --pp-card-b:linear-gradient(180deg,#f1f6ff,#ffffff); --pp-card-line:rgba(18,19,32,0.09); --pp-card-line-v:rgba(128,71,221,0.16); --pp-card-line-b:rgba(77,141,255,0.18); --pp-line:rgba(18,19,32,0.09); --pp-line-2:rgba(18,19,32,0.1); --pp-line-3:rgba(18,19,32,0.11); --pp-line-4:rgba(18,19,32,0.14); --pp-band:#f4f5f9; --pp-band-2:#ffffff; --pp-shadow:0 1px 2px rgba(18,20,34,0.04), 0 10px 34px rgba(18,20,34,0.06); --pp-blob-opacity:0.55; --pp-glow-a:none; --pp-glow-b:none; } /* ===== Полотно ===== */ .pp-lt body { background:#ffffff; color:var(--pp-fg); } /* Контейнеры, которые тёмные всегда: в светлой теме возвращаем им светлый текст, иначе заголовки без собственного color наследуют тёмный из body. */ .pp-lt .pp-hero, .pp-lt .pp-marquee, .pp-lt .pp-island, .pp-lt .pp-cta-card, .pp-lt .pp-cta-card2, .pp-lt footer, .pp-lt #pp-mobile-menu, .pp-lt .pp-modal-card { color:#ecedf7; } /* ===== Переключатель темы в шапке ===== */ #pp-theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 auto; border-radius:11px; border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.05); color:#ecedf7; cursor:pointer; padding:0; } #pp-theme-toggle:hover { border-color:rgba(128,71,221,0.5); color:#fff; } #pp-theme-toggle .pp-th-moon { display:none; } .pp-lt #pp-theme-toggle .pp-th-sun { display:none; } .pp-lt #pp-theme-toggle .pp-th-moon { display:block; } .pp-lt header#pp-header.pp-shrink #pp-theme-toggle { border-color:rgba(18,19,32,0.14); background:rgba(18,19,32,0.04); color:#14151d; } .pp-lt header#pp-header.pp-shrink #pp-theme-toggle:hover { border-color:rgba(128,71,221,0.45); color:#6d2fc7; } /* ===== Шапка в светлой теме: прозрачная над героем, белая дальше ===== */ .pp-lt header#pp-header.pp-shrink { background:rgba(255,255,255,0.94) !important; border-bottom-color:rgba(18,19,32,0.08); box-shadow:0 10px 30px rgba(18,20,34,0.07) !important; } .pp-lt header#pp-header.pp-shrink nav { color:#3a3b4d !important; } .pp-lt header#pp-header.pp-shrink .pp-logo, .pp-lt header#pp-header.pp-shrink .pp-phone { color:#14151d !important; } .pp-lt header#pp-header.pp-shrink .pp-hv-nav:hover { color:#6d2fc7 !important; } .pp-lt header#pp-header.pp-shrink #pp-burger { border-color:rgba(18,19,32,0.14) !important; background:rgba(18,19,32,0.04) !important; color:#14151d !important; } .pp-lt header#pp-header.pp-shrink .pp-drop-panel { background:rgba(255,255,255,0.98) !important; border-color:rgba(18,19,32,0.1) !important; box-shadow:0 24px 60px rgba(18,20,34,0.12) !important; } .pp-lt header#pp-header.pp-shrink .pp-drop-link { color:#2a2b3a !important; } .pp-lt header#pp-header.pp-shrink .pp-drop-link:hover { background:rgba(128,71,221,0.1) !important; color:#6d2fc7 !important; } /* ===== Маркиза-шов ===== Базовая маска гасит по краям не только текст, но и сам тёмный фон полосы: на светлом полотне края «переливались». Фон делаем сплошным во всю ширину, растворение текста отдаём градиентам в цвет полосы. В тёмной теме выглядит ровно как раньше. */ .pp-marquee { position:relative; -webkit-mask-image:none; mask-image:none; } .pp-marquee::before, .pp-marquee::after { content:""; position:absolute; top:0; bottom:0; width:9%; z-index:1; pointer-events:none; } .pp-marquee::before { left:0; background:linear-gradient(90deg,#080912,rgba(8,9,18,0)); } .pp-marquee::after { right:0; background:linear-gradient(270deg,#080912,rgba(8,9,18,0)); } /* ===== Светлая зона: полосы и карточки ===== */ .pp-lt-sec.pp-section-bleed { background:var(--pp-band); } /* Две полосы подряд слились бы в одну длинную: вторую уводим на соседний тон */ .pp-lt-sec.pp-section-bleed + .pp-lt-sec.pp-section-bleed { background:var(--pp-band-2); } .pp-lt-sec .pp-card, .pp-lt-sec .pp-card34, .pp-lt-sec .pp-card36, .pp-lt-sec .pp-card38, .pp-lt-sec .pp-card-flat32, .pp-lt-sec .pp-card-flat34, .pp-lt-sec .pp-faq, .pp-lt-sec .pp-faq-item { background:var(--pp-card); border-color:var(--pp-card-line); box-shadow:var(--pp-shadow); } .pp-lt-sec .pp-card36-v, .pp-lt-sec .pp-card34-hi { background:var(--pp-card-v); border-color:var(--pp-card-line-v); box-shadow:var(--pp-shadow); } .pp-lt-sec .pp-card36-b { background:var(--pp-card-b); border-color:var(--pp-card-line-b); box-shadow:var(--pp-shadow); } /* ===== Светлая зона: типографика ===== */ .pp-lt-sec .pp-p165 { color:var(--pp-fg-2); } .pp-lt-sec .pp-p16, .pp-lt-sec .pp-p15a, .pp-lt-sec .pp-p15b, .pp-lt-sec .pp-p15c, .pp-lt-sec .pp-p145a, .pp-lt-sec .pp-p145b, .pp-lt-sec .pp-p145c, .pp-lt-sec .pp-li { color:var(--pp-fg-3); } .pp-lt-sec .pp-subhead { color:var(--pp-fg-4); } .pp-lt-sec .pp-cap125, .pp-lt-sec .pp-t14mute, .pp-lt-sec .pp-c-mute { color:var(--pp-fg-5); } .pp-lt-sec .pp-faq-sum { color:var(--pp-fg); } .pp-lt-sec .pp-eyebrow, .pp-lt-sec .pp-mono11, .pp-lt-sec .pp-mono13a, .pp-lt-sec .pp-c-accent, .pp-lt-sec .pp-num20r, .pp-lt-sec .pp-num26, .pp-lt-sec .pp-num40 { color:var(--pp-accent); } .pp-lt-sec .pp-pill, .pp-lt-sec .pp-pill2, .pp-lt-sec .pp-chip { background:var(--pp-surface); border-color:var(--pp-line-3); color:var(--pp-fg-2); } .pp-lt-sec .pp-input { background:var(--pp-surface); border-color:var(--pp-line-4); color:var(--pp-fg); } /* Свечение в углу карточек направлений: на чёрном это мягкий глоу, на белом грязное пятно, поэтому в светлой теме переменная гасится в none. ::after у .pp-hv-card уже занят курсорной подсветкой в pp-ux.css. */ #napravleniya .pp-hv-card::before { content:""; position:absolute; top:-40px; right:-40px; width:160px; height:160px; border-radius:50%; background:var(--pp-glow-a); pointer-events:none; } #napravleniya .pp-hv-card:nth-child(even)::before { background:var(--pp-glow-b); } /* Декоративные свечения рисовались под чёрный фон: на белом приглушаем */ .pp-lt-sec .pp-blob-b, .pp-lt-sec .pp-blob-c, .pp-lt-sec .pp-blob-d, .pp-lt-sec .pp-blob-e { opacity:var(--pp-blob-opacity); } /* ===== Ховеры: базовые правила рассчитаны на тёмный фон ===== */ .pp-lt .pp-lt-sec .pp-hv-nav:hover { color:#6d2fc7 !important; } .pp-lt .pp-lt-sec .pp-hv-chip:hover { color:#3f1d86 !important; background:rgba(128,71,221,0.09) !important; border-color:rgba(128,71,221,0.35) !important; } .pp-lt .pp-lt-sec .pp-hv-card:hover { border-color:rgba(128,71,221,0.35) !important; box-shadow:0 18px 44px rgba(77,99,255,0.14) !important; } .pp-lt .pp-lt-sec .pp-node.pp-node-on .pp-node-dot { background:rgba(128,71,221,0.1) !important; color:#6d2fc7 !important; box-shadow:0 0 0 6px rgba(128,71,221,0.08); } .pp-lt .pp-lt-sec .pp-node.pp-node-on .pp-node-lbl { color:#14151d !important; } .pp-lt .pp-lt-sec .pp-node:hover .pp-node-dot { color:#6d2fc7 !important; } .pp-lt .pp-lt-sec .pp-faq-item > summary:hover span:first-child { color:#6d2fc7; } /* ===== Тёмный остров и тёмные карты на светлом ===== */ .pp-island { position:relative; margin:0 20px; border-radius:44px; overflow:hidden; background:linear-gradient(180deg,#06070e,#0b0c1c 46%,#06070e); } .pp-island .pp-section { padding-top:110px; } .pp-lt .pp-cta-card { box-shadow:0 30px 80px rgba(18,20,34,0.22); } .pp-lt .pp-cta-card2 { box-shadow:0 24px 60px rgba(18,20,34,0.18); } @media (max-width:900px) { .pp-island { margin:0 12px; border-radius:28px; } .pp-island .pp-section { padding-top:80px; } }