/* OpenClaw landing: светлая тема по умолчанию + тёмная (data-theme на ) */ :root, html[data-theme="light"] { color-scheme: light; --oc-bg: #fafafa; --oc-surface: #ffffff; --oc-surface-muted: #f4f4f5; --oc-border: #e4e4e7; --oc-text: #18181b; --oc-text-muted: #52525b; --oc-text-soft: #71717a; --oc-text-faint: #a1a1aa; --oc-nav-bg: rgba(255, 255, 255, 0.94); --oc-nav-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.15); --oc-hero-overlay: linear-gradient(180deg, #ffe4e6 0%, #fef2f2 28%, var(--oc-bg) 72%, var(--oc-bg) 100%); --oc-cta-box: linear-gradient(135deg, #fef2f2 0%, #e4e4e7 100%); --oc-card-tint: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 100%); --oc-footer: #f4f4f5; --oc-summary-chevron: #71717a; --oc-theme-color: #dc2626; /* Зона шапки (nav + safe-area): компенсация hero, с запасом против налезания */ --oc-header-h: 6rem; } @media (min-width: 768px) { :root, html[data-theme="light"] { --oc-header-h: 6.25rem; } } html[data-theme="dark"] { color-scheme: dark; --oc-bg: #09090b; --oc-surface: #18181b; --oc-surface-muted: #27272a; --oc-border: #3f3f46; --oc-text: #fafafa; --oc-text-muted: #a1a1aa; --oc-text-soft: #71717a; --oc-text-faint: #52525b; --oc-nav-bg: rgba(9, 9, 11, 0.94); --oc-nav-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.55); --oc-hero-overlay: linear-gradient(180deg, #450a0a 0%, var(--oc-bg) 50%, var(--oc-bg) 100%); --oc-cta-box: linear-gradient(135deg, #450a0a 0%, #27272a 100%); --oc-card-tint: linear-gradient(135deg, #27272a 0%, #09090b 100%); --oc-footer: #09090b; --oc-summary-chevron: #71717a; --oc-theme-color: #09090b; } html { scroll-padding-top: calc(var(--oc-header-h, 6rem) + 0.5rem); background-color: var(--oc-bg); } body.oc-body { margin: 0; background-color: var(--oc-bg); color: var(--oc-text); padding: 0; } /* Шапка: safe-area только здесь, без полосы на body */ .oc-header-bar { padding-top: max(0.5rem, env(safe-area-inset-top, 0px)); } /* * Первый экран: градиент уходит под шапку (margin-top: -header), * а padding-top = header + header + отступ, чтобы первый текст был * строго ниже плавающей навигации (иначе -header + малый padding * оставляет контент под шапкой). */ .oc-hero-section { position: relative; margin-top: calc(-1 * var(--oc-header-h)); padding-top: calc(var(--oc-header-h) * 2 + 0.75rem); padding-bottom: 4rem; overflow-x: clip; } @media (min-width: 768px) { .oc-hero-section { padding-top: calc(var(--oc-header-h) * 2 + 1rem); padding-bottom: 4.5rem; } } .oc-hero-section .oc-hero-gradient { position: absolute; z-index: 0; left: 0; right: 0; top: calc(-1 * var(--oc-header-h) - env(safe-area-inset-top, 0px)); bottom: 0; pointer-events: none; } .oc-hero-inner { position: relative; z-index: 1; } /* Остальные секции: верхний отступ не нужен (даёт hero) */ main > section:not(.oc-hero-section) { position: relative; z-index: 1; } /* SVG-иконки вместо эмодзи (Heroicons-style, stroke) */ .oc-icon { display: block; width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: #dc2626; } html[data-theme="dark"] .oc-icon { color: #f87171; } .oc-check { display: flex; align-items: flex-start; justify-content: center; width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; flex-shrink: 0; color: #dc2626; } html[data-theme="dark"] .oc-check { color: #f87171; } .oc-check svg { width: 100%; height: 100%; } .oc-prose p { margin: 0 0 1rem; line-height: 1.65; font-size: 1rem; } .oc-prose p:last-child { margin-bottom: 0; } .oc-prose--lg p { font-size: 1.0625rem; } .oc-nav-shell { background: var(--oc-nav-bg); border: 1px solid color-mix(in srgb, var(--oc-border) 55%, transparent); box-shadow: var(--oc-nav-shadow); } /* Логотипы: b — тёмный на светлом фоне, w — светлый на тёмном */ .oc-logo-wrap { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; } .oc-logo-wrap .oc-logo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; } html[data-theme="light"] .oc-logo--w { opacity: 0; pointer-events: none; } html[data-theme="light"] .oc-logo--b { opacity: 1; } html[data-theme="dark"] .oc-logo--b { opacity: 0; pointer-events: none; } html[data-theme="dark"] .oc-logo--w { opacity: 1; } .oc-hero-gradient { background: var(--oc-hero-overlay); } .oc-cta-gradient { background: var(--oc-cta-box); } .oc-card-tint { background: var(--oc-card-tint); } .oc-surface { background-color: var(--oc-surface); } .oc-surface-muted { background-color: var(--oc-surface-muted); } .oc-border { border-color: var(--oc-border); } .oc-text { color: var(--oc-text); } .oc-text-muted { color: var(--oc-text-muted); } .oc-text-soft { color: var(--oc-text-soft); } .oc-text-faint { color: var(--oc-text-faint); } .oc-strong { color: var(--oc-text); font-weight: 600; } html[data-theme="dark"] .oc-strong { color: #e4e4e7; } .oc-nav-link { color: var(--oc-text-soft); transition: color 0.2s ease; } .oc-nav-link:hover { color: var(--oc-text); } .oc-footer { background-color: var(--oc-footer); } .oc-footer-link { color: var(--oc-text-soft); transition: color 0.2s ease; } .oc-footer-link:hover { color: var(--oc-text); } .oc-sidebar { background-color: var(--oc-bg); border-color: var(--oc-border); } .oc-sidebar-link { color: var(--oc-text-muted); } .oc-sidebar-link:hover { background-color: var(--oc-surface-muted); } .oc-btn-ghost { color: var(--oc-text-soft); } .oc-btn-ghost:hover { background-color: var(--oc-surface-muted); color: var(--oc-text); } .oc-btn-outline { border-color: var(--oc-border); color: var(--oc-text); transition: border-color 0.2s ease, color 0.2s ease; } .oc-btn-outline:hover { border-color: #dc2626; } .oc-hamburger span { background-color: var(--oc-text-muted); } .oc-theme-toggle { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 1px solid var(--oc-border); background: var(--oc-surface-muted); color: var(--oc-text); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .oc-theme-toggle:hover { border-color: #dc2626; background: var(--oc-surface); } .oc-theme-toggle svg { width: 1.125rem; height: 1.125rem; } /* FAQ summary chevron */ .oc-faq-chevron { color: var(--oc-summary-chevron); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s ease; } .oc-faq-chevron svg { width: 1.25rem; height: 1.25rem; } details[open] > summary .oc-faq-chevron { transform: rotate(180deg); } /* Мобильное меню: translate-x-full нет в продакшен-бандле Tailwind — делаем сами */ #mobile-sidebar { transform: translateX(100%); transition: transform 0.3s ease, visibility 0.3s ease; visibility: hidden; pointer-events: none; } #mobile-sidebar.oc-sidebar-open { transform: translateX(0); visibility: visible; pointer-events: auto; } #mobile-sidebar-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } #mobile-sidebar-backdrop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } @media (min-width: 1024px) { #mobile-sidebar, #mobile-sidebar-backdrop { display: none !important; } }