/** * ШвейМетрикс — улучшенная светлая тема (CSS custom properties). * Подключается только при отсутствии класса .dark на . * Тёмная тема не затрагивается. */ /* ============================================================================= 1. PRIMARY ACCENT — насыщенный синий (близко к HSL(220, 85%, 55%)) ============================================================================= */ :root { --sm-accent: hsl(220, 85%, 55%); --sm-accent-deep: hsl(220, 88%, 47%); --sm-accent-soft: hsl(218, 90%, 62%); --sm-accent-mid: hsl(219, 86%, 51%); --sm-accent-rgb: 44, 127, 255; --sm-accent-glow: 0 0 48px -8px rgba(var(--sm-accent-rgb), 0.55); --sm-accent-glow-strong: 0 0 72px -12px rgba(var(--sm-accent-rgb), 0.5); /* 2. TEXT — контраст ≥ 4.5:1 на типичных фонах */ --sm-text-primary: #1a1a2e; --sm-text-secondary: #4a4a5a; --sm-text-muted: #5c5c6e; --sm-text-on-accent: #ffffff; /* Иерархия заголовков / абзацев на светлой главной (поверх .text-white → primary) */ --sm-tier-h2: hsl(222, 48%, 13%); --sm-tier-h3: hsl(222, 42%, 22%); --sm-tier-lead: hsl(222, 14%, 36%); --sm-tier-body: hsl(222, 11%, 40%); --sm-tier-caption: hsl(222, 8%, 45%); --sm-tier-stat: hsl(220, 62%, 28%); --sm-tier-quote: hsl(222, 22%, 30%); /* 3. BACKGROUND LAYERS */ --sm-bg-page: #fafafa; --sm-bg-base: #ffffff; --sm-bg-muted: #f5f6fa; --sm-bg-elevated: #f0f2f8; --sm-bg-hover: #e8eaf0; --sm-bg-section-a: #f0f2f8; --sm-bg-section-b: #f5f6fa; --sm-bg-section-c: #f8f9fc; /* 4. BORDERS & DIVIDERS */ --sm-border-default: #e0e2e8; --sm-border-strong: #c8ccd6; --sm-border-accent: rgba(var(--sm-accent-rgb), 0.45); --sm-border-width: 1px; --sm-border-width-accent: 2px; /* 5. SHADOWS */ --sm-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.08); --sm-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12); --sm-shadow-strong: 0 8px 24px rgba(0, 0, 0, 0.16); --sm-shadow-card: var(--sm-shadow-subtle), 0 1px 0 rgba(255, 255, 255, 0.9) inset; /* 6. ICONS */ --sm-icon: #3a3a4a; --sm-icon-accent: hsl(220, 78%, 48%); /* 7. SEMANTIC */ --sm-success: #22a869; --sm-warning: #f59e0b; --sm-error: #ef4444; --sm-info: var(--sm-accent); /* 8. MESH / HERO — как в tailwind `mesh-opal`: те же 4 эллипса + второй «opal» оттенок (cyan) */ --sm-cyan-rgb: 100, 173, 255; /* Совпадают с тёмной темой по позициям/размерам; на светлом — сочные, но читаемые альфы */ --sm-mesh-opal: radial-gradient( ellipse 80% 60% at 20% 10%, rgba(var(--sm-accent-rgb), 0.26) 0%, transparent 55% ), radial-gradient( ellipse 70% 50% at 85% 15%, rgba(var(--sm-cyan-rgb), 0.2) 0%, transparent 50% ), radial-gradient( ellipse 60% 45% at 10% 80%, rgba(var(--sm-accent-rgb), 0.14) 0%, transparent 50% ), radial-gradient( ellipse 50% 40% at 70% 90%, rgba(var(--sm-cyan-rgb), 0.12) 0%, transparent 45% ); /* Те же 4 эллипса, что и `mesh-opal`, с пониженной непрозрачностью (как opacity-40 / opacity-30) */ --sm-mesh-opal-faint: radial-gradient( ellipse 80% 60% at 20% 10%, rgba(var(--sm-accent-rgb), 0.1) 0%, transparent 55% ), radial-gradient( ellipse 70% 50% at 85% 15%, rgba(var(--sm-cyan-rgb), 0.08) 0%, transparent 50% ), radial-gradient( ellipse 60% 45% at 10% 80%, rgba(var(--sm-accent-rgb), 0.056) 0%, transparent 50% ), radial-gradient( ellipse 50% 40% at 70% 90%, rgba(var(--sm-cyan-rgb), 0.048) 0%, transparent 45% ); --sm-mesh-opal-fainter: radial-gradient( ellipse 80% 60% at 20% 10%, rgba(var(--sm-accent-rgb), 0.078) 0%, transparent 55% ), radial-gradient( ellipse 70% 50% at 85% 15%, rgba(var(--sm-cyan-rgb), 0.06) 0%, transparent 50% ), radial-gradient( ellipse 60% 45% at 10% 80%, rgba(var(--sm-accent-rgb), 0.042) 0%, transparent 50% ), radial-gradient( ellipse 50% 40% at 70% 90%, rgba(var(--sm-cyan-rgb), 0.036) 0%, transparent 45% ); /* Лёгкий общий фон страницы (аналог глубины night-950 в тёмной теме) */ --sm-gradient-page: linear-gradient( 165deg, #fbfcff 0%, var(--sm-bg-page) 38%, #f5f7fd 72%, #fafafa 100% ); /* Нижний слой hero: плавный переход в фон + лёгкий «туман» акцента */ --sm-gradient-hero-fade: linear-gradient( 180deg, rgba(250, 250, 252, 0) 0%, rgba(232, 240, 255, 0.45) 42%, rgba(245, 247, 252, 0.92) 78%, var(--sm-bg-page) 100% ); /* Внутренний блок демо в hero — зеркало dark: `from-via-to` в светлых тонах */ --sm-gradient-demo-inner: linear-gradient( to bottom right, #ffffff 0%, #f0f4ff 42%, #e8eef8 100% ); /* Glassmorphism — карточки (размытие фона + полупрозрачный слой, как в dark .glass-panel) */ --sm-glass-blur: blur(20px) saturate(172%); --sm-glass-blur-hover: blur(26px) saturate(188%); --sm-glass-surface: linear-gradient( 155deg, rgba(255, 255, 255, 0.82) 0%, rgba(252, 253, 255, 0.58) 38%, rgba(246, 250, 255, 0.68) 100% ); --sm-glass-surface-hover: linear-gradient( 155deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 251, 255, 0.78) 45%, rgba(242, 248, 255, 0.84) 100% ); --sm-glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08), 0 2px 10px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(255, 255, 255, 0.2); --sm-glass-shadow-hover: 0 12px 44px rgba(15, 23, 42, 0.11), 0 4px 14px rgba(var(--sm-accent-rgb), 0.09), inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(255, 255, 255, 0.28); --sm-glass-border: rgba(255, 255, 255, 0.78); --sm-glass-border-edge: rgba(203, 213, 225, 0.55); /* Совместимость со старым именем */ --sm-gradient-glass: var(--sm-glass-surface); /* Секции с «полосой» — визуальный ритм как у border-y + bg-night в тёмной теме */ --sm-gradient-section-a: linear-gradient( 180deg, rgba(240, 244, 252, 0.85) 0%, var(--sm-bg-section-a) 50%, rgba(232, 238, 248, 0.75) 100% ); --sm-gradient-section-b: linear-gradient( 180deg, rgba(245, 247, 252, 0.9) 0%, var(--sm-bg-section-b) 48%, rgba(240, 242, 250, 0.85) 100% ); --sm-gradient-section-c: linear-gradient( 180deg, rgba(248, 250, 255, 0.95) 0%, var(--sm-bg-section-c) 55%, rgba(243, 245, 252, 0.9) 100% ); /* Футер: лёгкий вертикальный градиент */ --sm-gradient-footer: linear-gradient(180deg, #f3f5fb 0%, var(--sm-bg-muted) 55%, #eef1f8 100%); } /* ----------------------------------------------------------------------------- Base body ----------------------------------------------------------------------------- */ html:not(.dark) body { background-color: var(--sm-bg-page) !important; background-image: var(--sm-gradient-page) !important; color: var(--sm-text-primary) !important; } /* ----------------------------------------------------------------------------- Фоны секций (бывшие night-*) ----------------------------------------------------------------------------- */ html:not(.dark) .bg-night-950, html:not(.dark) .bg-night-950\/70, html:not(.dark) .bg-night-950\/50, html:not(.dark) .bg-night-900\/80, html:not(.dark) .bg-night-900\/40, html:not(.dark) .bg-night-900\/30 { background-color: var(--sm-bg-page) !important; } html:not(.dark) .bg-night-900\/40 { background-color: transparent !important; background-image: var(--sm-gradient-section-a) !important; } html:not(.dark) .bg-night-900\/30 { background-color: transparent !important; background-image: var(--sm-gradient-section-b) !important; } html:not(.dark) .bg-night-900\/25 { background-color: transparent !important; background-image: var(--sm-gradient-section-c) !important; } html:not(.dark) footer.bg-night-950, html:not(.dark) #contact.bg-night-950 { background-color: transparent !important; background-image: var(--sm-gradient-footer) !important; } /* ----------------------------------------------------------------------------- Текст: замена «белого» на тёмный (исключения ниже) ----------------------------------------------------------------------------- */ html:not(.dark) .text-white { color: var(--sm-text-primary) !important; } /* Демо-дашборд — без изменений */ html:not(.dark) .dashboard-preview .text-white { color: #ffffff !important; } /* Бейджи шагов и акцентные плашки: белый текст на насыщенном фоне */ html:not(.dark) .bg-opal-violetdeep\/35.text-white, html:not(.dark) .bg-opal-violetdeep\/35 .text-white { color: var(--sm-text-on-accent) !important; } html:not(.dark) .text-zinc-100 { color: var(--sm-text-primary) !important; } html:not(.dark) .text-zinc-200 { color: var(--sm-text-secondary) !important; } html:not(.dark) .dashboard-preview .text-zinc-200 { color: #e4e4e7 !important; } html:not(.dark) .text-zinc-300 { color: var(--sm-text-secondary) !important; } html:not(.dark) .text-zinc-400 { color: var(--sm-text-secondary) !important; } html:not(.dark) .text-zinc-500, html:not(.dark) .text-zinc-600 { color: var(--sm-text-muted) !important; } html:not(.dark) .text-slate-600 { color: var(--sm-text-secondary) !important; } html:not(.dark) .text-slate-500 { color: var(--sm-text-muted) !important; } /* Акцентные классы Tailwind opal → более сочные в светлой теме */ html:not(.dark) .text-opal-violetdeep, html:not(.dark) .hover\:text-opal-violetdeep:hover { color: var(--sm-accent-deep) !important; } html:not(.dark) .text-opal-violet, html:not(.dark) .text-opal-rose { color: var(--sm-accent-mid) !important; } html:not(.dark) .text-opal-cyan, html:not(.dark) .text-opal-cyan\/90 { color: hsl(210, 88%, 42%) !important; } html:not(.dark) .text-opal-mint\/90 { color: hsl(208, 75%, 38%) !important; } /* Иконки в шапке / интерфейсе */ html:not(.dark) .text-slate-700 { color: var(--sm-icon) !important; } /* ----------------------------------------------------------------------------- Границы и разделители ----------------------------------------------------------------------------- */ html:not(.dark) .border-white\/5, html:not(.dark) .border-white\/10, html:not(.dark) .border-white\/15, html:not(.dark) .border-white\/8 { border-color: var(--sm-border-default) !important; } html:not(.dark) .border-white\/10.pt-5, html:not(.dark) figure .border-white\/10 { border-color: var(--sm-border-default) !important; } html:not(.dark) .divide-white\/10 > :not([hidden]) ~ :not([hidden]) { border-color: var(--sm-border-default) !important; } html:not(.dark) footer .border-white\/10, html:not(.dark) footer .border-white\/5 { border-color: var(--sm-border-default) !important; } html:not(.dark) .border-slate-200\/80 { border-color: var(--sm-border-default) !important; } html:not(.dark) .ring-slate-200\/90 { --tw-ring-opacity: 1; --tw-ring-color: var(--sm-border-default) !important; } /* Кнопка меню (гамбургер) в шапке — нейтральный фон */ html:not(.dark) .page-home header details > summary.flex.h-11.w-11 { background-color: var(--sm-bg-muted) !important; border-color: var(--sm-border-default) !important; color: var(--sm-icon) !important; } /* ----------------------------------------------------------------------------- Glass panel — стекло (backdrop-blur + полупрозрачный градиент + блик) ----------------------------------------------------------------------------- */ html:not(.dark) .glass-panel { position: relative; background-color: rgba(255, 255, 255, 0.4) !important; background-image: var(--sm-glass-surface) !important; border-width: var(--sm-border-width) !important; border-style: solid !important; border-color: var(--sm-glass-border-edge) !important; box-shadow: var(--sm-glass-shadow) !important; backdrop-filter: var(--sm-glass-blur); -webkit-backdrop-filter: var(--sm-glass-blur); transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, background-image 0.25s ease, backdrop-filter 0.25s ease; } html:not(.dark) .glass-panel:hover { background-color: rgba(255, 255, 255, 0.55) !important; background-image: var(--sm-glass-surface-hover) !important; border-color: var(--sm-glass-border) !important; box-shadow: var(--sm-glass-shadow-hover) !important; backdrop-filter: var(--sm-glass-blur-hover); -webkit-backdrop-filter: var(--sm-glass-blur-hover); } @media (prefers-reduced-transparency: reduce) { html:not(.dark) .glass-panel { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(255, 255, 255, 0.97) !important; } html:not(.dark) .glass-panel:hover { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* About: сетка 2×2 — стекло с ~80% непрозрачности (виден blur фона страницы) */ html:not(.dark) #about .about-stat-grid > .glass-panel { background-color: rgba(255, 255, 255, 0.8) !important; background-image: linear-gradient( 155deg, rgba(255, 255, 255, 0.94) 0%, rgba(252, 254, 255, 0.82) 42%, rgba(245, 249, 255, 0.88) 100% ) !important; backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); } html:not(.dark) #about .about-stat-grid > .glass-panel:hover { background-color: rgba(255, 255, 255, 0.88) !important; background-image: linear-gradient( 155deg, rgba(255, 255, 255, 0.97) 0%, rgba(250, 252, 255, 0.88) 48%, rgba(242, 248, 255, 0.92) 100% ) !important; backdrop-filter: blur(26px) saturate(190%); -webkit-backdrop-filter: blur(26px) saturate(190%); } @media (prefers-reduced-transparency: reduce) { html:not(.dark) #about .about-stat-grid > .glass-panel, html:not(.dark) #about .about-stat-grid > .glass-panel:hover { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(255, 255, 255, 0.97) !important; background-image: none !important; } } /* ----------------------------------------------------------------------------- Кнопки primary / secondary ----------------------------------------------------------------------------- */ html:not(.dark) .btn-primary { background-image: linear-gradient( to right, var(--sm-accent-deep), var(--sm-accent-soft) ) !important; color: var(--sm-text-on-accent) !important; box-shadow: var(--sm-accent-glow) !important; border: var(--sm-border-width) solid transparent !important; } html:not(.dark) .btn-primary:hover { filter: brightness(1.12); box-shadow: var(--sm-accent-glow-strong) !important; } html:not(.dark) .btn-primary:focus { --tw-ring-color: rgba(var(--sm-accent-rgb), 0.45) !important; } html:not(.dark) .btn-secondary { background: var(--sm-bg-base) !important; color: var(--sm-accent-deep) !important; border-width: var(--sm-border-width) !important; border-color: var(--sm-border-accent) !important; box-shadow: var(--sm-shadow-subtle) !important; } html:not(.dark) .btn-secondary:hover { background: var(--sm-bg-hover) !important; border-color: var(--sm-accent) !important; color: var(--sm-accent-deep) !important; box-shadow: var(--sm-shadow-medium) !important; } html:not(.dark) .page-home .btn-primary, html:not(.dark) .page-home a.btn-primary, html:not(.dark) .page-home button.btn-primary { color: var(--sm-text-on-accent) !important; } /* * Вторичная CTA («Смотреть демо»): всегда читается как кнопка (стекло + рамка); * при hover — внешний outline + подсветка (как неон в dark). */ html:not(.dark) .page-home .btn-secondary { outline: none; background-color: rgba(255, 255, 255, 0.48) !important; background-image: linear-gradient( 165deg, rgba(255, 255, 255, 0.82) 0%, rgba(248, 251, 255, 0.58) 100% ) !important; border: 1px solid rgba(var(--sm-accent-rgb), 0.34) !important; box-shadow: 0 2px 14px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(12px) saturate(165%); -webkit-backdrop-filter: blur(12px) saturate(165%); color: var(--sm-accent-deep) !important; --tw-ring-width: 0; --tw-ring-offset-width: 0; --tw-ring-color: transparent; transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, background-image 0.25s ease, outline 0.25s ease, outline-offset 0.25s ease, backdrop-filter 0.25s ease; } @media (prefers-reduced-motion: reduce) { html:not(.dark) .page-home .btn-secondary { transition: none; } } @media (prefers-reduced-transparency: reduce) { html:not(.dark) .page-home .btn-secondary { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(255, 255, 255, 0.94) !important; } } html:not(.dark) .page-home .btn-secondary:hover { outline: 2px solid rgba(var(--sm-accent-rgb), 0.5); outline-offset: 3px; background-color: rgba(255, 255, 255, 0.62) !important; background-image: linear-gradient( 165deg, rgba(255, 255, 255, 0.92) 0%, rgba(232, 242, 255, 0.72) 100% ) !important; border-color: rgba(var(--sm-accent-rgb), 0.58) !important; color: var(--sm-accent-mid) !important; box-shadow: 0 0 0 1px rgba(var(--sm-accent-rgb), 0.22), 0 0 40px -5px rgba(var(--sm-accent-rgb), 0.48), 0 0 72px -10px rgba(var(--sm-cyan-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); } html:not(.dark) .page-home .btn-secondary:focus-visible { outline: 2px solid rgba(var(--sm-accent-rgb), 0.55); outline-offset: 3px; } html:not(.dark) .page-home .btn-secondary:focus-visible:hover { outline-color: rgba(var(--sm-accent-rgb), 0.65); } /* ----------------------------------------------------------------------------- Вспомогательные фоны и сетка hero ----------------------------------------------------------------------------- */ html:not(.dark) .bg-white\/5 { background-color: rgba(var(--sm-accent-rgb), 0.08) !important; } html:not(.dark) .bg-mesh-opal { background-image: var(--sm-mesh-opal) !important; } /* Секции why / pricing: тот же mesh, что в dark, но слабее (без filter — стабильный рендер) */ html:not(.dark) .bg-mesh-opal.opacity-40 { background-image: var(--sm-mesh-opal-faint) !important; } html:not(.dark) .bg-mesh-opal.opacity-30 { background-image: var(--sm-mesh-opal-fainter) !important; } html:not(.dark) .bg-hero-fade { background-image: var(--sm-gradient-hero-fade) !important; } /* Hero: цветные «орбы» blur — радиальные градиенты как свечение (в dark те же слои, другая яркость) */ html:not(.dark) #hero .bg-opal-violetdeep\/25 { background: radial-gradient( circle at 40% 40%, rgba(var(--sm-accent-rgb), 0.55) 0%, rgba(var(--sm-accent-rgb), 0.18) 45%, transparent 70% ) !important; } html:not(.dark) #hero .bg-opal-cyan\/20 { background: radial-gradient( circle at 50% 50%, rgba(var(--sm-cyan-rgb), 0.45) 0%, rgba(var(--sm-cyan-rgb), 0.12) 50%, transparent 72% ) !important; } /* Демо-блок в hero: как dark:bg-gradient-to-br from / via / to */ html:not(.dark) #hero .glass-panel .rounded-2xl.bg-white { background-color: transparent !important; background-image: var(--sm-gradient-demo-inner) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 0 rgba(var(--sm-accent-rgb), 0.04), 0 1px 0 rgba(var(--sm-accent-rgb), 0.05) !important; } /* Плашки под эмодзи / иконки: linear-gradient поверх полупрозрачного opal (как глубина в dark) */ html:not(.dark) .bg-opal-violetdeep\/30, html:not(.dark) .bg-opal-violetdeep\/25 { background-color: transparent !important; background-image: linear-gradient( 155deg, rgba(var(--sm-accent-rgb), 0.45) 0%, rgba(var(--sm-accent-rgb), 0.2) 100% ) !important; } html:not(.dark) .bg-opal-violetdeep\/35 { background-color: transparent !important; background-image: linear-gradient( 155deg, rgba(var(--sm-accent-rgb), 0.52) 0%, rgba(var(--sm-accent-rgb), 0.28) 100% ) !important; } html:not(.dark) .bg-opal-cyan\/20 { background-color: transparent !important; background-image: linear-gradient( 165deg, rgba(var(--sm-cyan-rgb), 0.38) 0%, rgba(var(--sm-cyan-rgb), 0.12) 100% ) !important; } html:not(.dark) .bg-opal-amber\/20, html:not(.dark) .bg-opal-mint\/20 { background-color: transparent !important; background-image: linear-gradient( 165deg, rgba(var(--sm-cyan-rgb), 0.28) 0%, rgba(var(--sm-accent-rgb), 0.18) 100% ) !important; } /* Mid CTA: декоративный blob — ближе к dark:bg-opal-violet/22 */ html:not(.dark) .glass-panel .rounded-full.bg-sky-100\/45 { background: radial-gradient( circle at 35% 35%, rgba(var(--sm-accent-rgb), 0.28) 0%, rgba(var(--sm-cyan-rgb), 0.18) 42%, rgba(186, 210, 255, 0.12) 100% ) !important; } /* Flash success: градиент + матовое стекло поверх страницы */ html:not(.dark) .flash-success.bg-gradient-to-br { background-color: rgba(255, 255, 255, 0.35) !important; background-image: linear-gradient( to bottom right, rgba(var(--sm-accent-rgb), 0.18) 0%, rgba(255, 255, 255, 0.75) 45%, rgba(var(--sm-cyan-rgb), 0.14) 100% ) !important; backdrop-filter: blur(16px) saturate(165%); -webkit-backdrop-filter: blur(16px) saturate(165%); box-shadow: var(--sm-glass-shadow), var(--sm-shadow-medium) !important; } @media (prefers-reduced-transparency: reduce) { html:not(.dark) .flash-success.bg-gradient-to-br { backdrop-filter: none; -webkit-backdrop-filter: none; } } html:not(.dark) .flash-success .bg-gradient-to-br.from-opal-violet.to-opal-violetdeep, html:not(.dark) .flash-success .from-opal-violet.to-opal-violetdeep { background-image: linear-gradient( to bottom right, var(--sm-accent-mid), var(--sm-accent-deep) ) !important; } /* Hero: акцентный градиент заголовка (inline-стили в шаблоне — усиливаем насыщенность) */ html:not(.dark) #hero h1 span[style*='linear-gradient'] { background-image: linear-gradient( 90deg, hsl(218, 92%, 58%) 0%, var(--sm-accent) 52%, hsl(210, 90%, 68%) 100% ) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0 22px rgba(var(--sm-accent-rgb), 0.42)); } /* ----------------------------------------------------------------------------- Форма заявки (светлая карточка) ----------------------------------------------------------------------------- */ html:not(.dark) .page-home .lead-form-input { background-color: var(--sm-bg-muted) !important; border-color: var(--sm-border-default) !important; color: var(--sm-text-primary) !important; } html:not(.dark) .page-home .lead-form-input::placeholder { color: var(--sm-text-muted) !important; } html:not(.dark) .page-home .lead-form-input:focus { border-color: var(--sm-accent) !important; --tw-ring-color: rgba(var(--sm-accent-rgb), 0.35) !important; } html:not(.dark) .page-home .lead-form-input:-webkit-autofill, html:not(.dark) .page-home .lead-form-input:-webkit-autofill:hover, html:not(.dark) .page-home .lead-form-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--sm-text-primary) !important; caret-color: var(--sm-text-primary) !important; transition: background-color 99999s ease-out; box-shadow: 0 0 0 1000px var(--sm-bg-muted) inset !important; } /* Ошибки формы — семантический красный */ html:not(.dark) .text-red-400 { color: var(--sm-error) !important; } html:not(.dark) .border-red-400\/30 { border-color: rgba(239, 68, 68, 0.35) !important; } html:not(.dark) .bg-red-500\/10 { background-color: rgba(239, 68, 68, 0.08) !important; } /* ----------------------------------------------------------------------------- Мобильное меню, тени CTA ----------------------------------------------------------------------------- */ html:not(.dark) .bg-night-900\/98 { background-color: rgba(255, 255, 255, 0.45) !important; background-image: var(--sm-glass-surface) !important; border-color: var(--sm-glass-border-edge) !important; box-shadow: var(--sm-glass-shadow), var(--sm-shadow-strong) !important; backdrop-filter: var(--sm-glass-blur); -webkit-backdrop-filter: var(--sm-glass-blur); } /* Мобильное бургер-меню: то же стекло ~80%, что и в тёмной теме по смыслу */ html:not(.dark) .mobile-nav-dropdown { background-color: rgba(255, 255, 255, 0.8) !important; background-image: var(--sm-glass-surface) !important; border-color: var(--sm-glass-border-edge) !important; box-shadow: var(--sm-glass-shadow), var(--sm-shadow-strong) !important; backdrop-filter: var(--sm-glass-blur); -webkit-backdrop-filter: var(--sm-glass-blur); } @media (prefers-reduced-transparency: reduce) { html:not(.dark) .bg-night-900\/98 { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(255, 255, 255, 0.98) !important; } html:not(.dark) .mobile-nav-dropdown { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(255, 255, 255, 0.98) !important; background-image: none !important; } } html:not(.dark) .shadow-xl.shadow-opal-violetdeep\/20 { box-shadow: var(--sm-shadow-medium), var(--sm-accent-glow) !important; } html:not(.dark) .shadow-glass { box-shadow: var(--sm-shadow-medium) !important; } /* Кнопка play в hero — градиент как у primary (dark: тоже «сочный» акцент) */ html:not(.dark) #open-dashboard-preview { background-color: transparent !important; background-image: linear-gradient( 145deg, var(--sm-accent-soft), var(--sm-accent) 52%, var(--sm-accent-deep) ) !important; box-shadow: var(--sm-shadow-medium), 0 0 0 1px rgba(var(--sm-accent-rgb), 0.22) !important; } html:not(.dark) #open-dashboard-preview:hover { filter: brightness(1.08) saturate(1.05); box-shadow: var(--sm-shadow-strong), var(--sm-accent-glow) !important; } /* ----------------------------------------------------------------------------- Фокус и доступность ----------------------------------------------------------------------------- */ html:not(.dark) a:focus-visible, html:not(.dark) button:focus-visible { outline: 2px solid var(--sm-accent); outline-offset: 2px; } /* FAQ: открытый блок — чуть плотнее «стекло» */ html:not(.dark) #faq details.glass-panel[open] { background-color: rgba(255, 255, 255, 0.52) !important; background-image: var(--sm-glass-surface-hover) !important; border-color: rgba(255, 255, 255, 0.88) !important; box-shadow: var(--sm-glass-shadow-hover) !important; backdrop-filter: var(--sm-glass-blur-hover); -webkit-backdrop-filter: var(--sm-glass-blur-hover); } @media (prefers-reduced-transparency: reduce) { html:not(.dark) #faq details.glass-panel[open] { backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(255, 255, 255, 0.99) !important; } } /* ----------------------------------------------------------------------------- Flash-сообщения (семантические цвета в светлой теме) ----------------------------------------------------------------------------- */ html:not(.dark) .flash-success { border-color: rgba(var(--sm-accent-rgb), 0.35) !important; --tw-ring-color: rgba(var(--sm-accent-rgb), 0.22) !important; } /* Ошибка / предупреждение: цветной полупрозрачный слой + размытие (карточный glass) */ html:not(.dark) .flash-message.border-amber-400\/30 { border-color: rgba(245, 158, 11, 0.45) !important; background-color: rgba(255, 251, 235, 0.45) !important; background-image: linear-gradient( 165deg, rgba(254, 243, 199, 0.55) 0%, rgba(255, 255, 255, 0.65) 100% ) !important; color: #92400e !important; backdrop-filter: blur(14px) saturate(155%); -webkit-backdrop-filter: blur(14px) saturate(155%); box-shadow: var(--sm-glass-shadow), var(--sm-shadow-medium) !important; } html:not(.dark) .flash-message.border-red-400\/25 { border-color: rgba(239, 68, 68, 0.4) !important; background-color: rgba(254, 242, 242, 0.45) !important; background-image: linear-gradient( 165deg, rgba(254, 226, 226, 0.55) 0%, rgba(255, 255, 255, 0.65) 100% ) !important; color: #991b1b !important; backdrop-filter: blur(14px) saturate(155%); -webkit-backdrop-filter: blur(14px) saturate(155%); box-shadow: var(--sm-glass-shadow), var(--sm-shadow-medium) !important; } @media (prefers-reduced-transparency: reduce) { html:not(.dark) .flash-message.border-amber-400\/30, html:not(.dark) .flash-message.border-red-400\/25 { backdrop-filter: none; -webkit-backdrop-filter: none; } } html:not(.dark) .flash-message.border-red-400\/25 button { color: #b91c1c !important; } html:not(.dark) .flash-message.border-amber-400\/30 button { color: #b45309 !important; } /* ============================================================================= Главная (.page-home) — различимые цвета: заголовки / лиды / тело / подписи ============================================================================= */ /* Секционные H2 (единый «уровень» заголовка секции) */ html:not(.dark) .page-home #about h2, html:not(.dark) .page-home #why h2, html:not(.dark) .page-home #capabilities h2, html:not(.dark) .page-home #how h2, html:not(.dark) .page-home #product-story h2, html:not(.dark) .page-home #testimonials h2, html:not(.dark) .page-home #pricing h2, html:not(.dark) .page-home #faq h2, html:not(.dark) .page-home #cta-mid h2 { color: var(--sm-tier-h2) !important; } /* Карточки и шаги: заголовок vs абзац */ html:not(.dark) .page-home #why article h3 { color: var(--sm-tier-h3) !important; } html:not(.dark) .page-home #why article:nth-child(1) h3 { color: hsl(262, 38%, 24%) !important; } html:not(.dark) .page-home #why article:nth-child(2) h3 { color: hsl(205, 42%, 26%) !important; } html:not(.dark) .page-home #why article:nth-child(3) h3 { color: hsl(32, 42%, 28%) !important; } html:not(.dark) .page-home #why article:nth-child(4) h3 { color: hsl(168, 38%, 24%) !important; } html:not(.dark) .page-home #why article p { color: var(--sm-tier-body) !important; } html:not(.dark) .page-home #capabilities h3 { color: var(--sm-tier-h3) !important; } html:not(.dark) .page-home #capabilities .glass-panel p { color: var(--sm-tier-body) !important; } html:not(.dark) .page-home #how ol li h3 { color: var(--sm-tier-h3) !important; } html:not(.dark) .page-home #how ol li:nth-child(1) h3 { color: hsl(262, 40%, 23%) !important; } html:not(.dark) .page-home #how ol li:nth-child(2) h3 { color: hsl(230, 42%, 24%) !important; } html:not(.dark) .page-home #how ol li:nth-child(3) h3 { color: hsl(205, 44%, 25%) !important; } html:not(.dark) .page-home #how ol li:nth-child(4) h3 { color: hsl(188, 38%, 24%) !important; } html:not(.dark) .page-home #how ol li:nth-child(5) h3 { color: hsl(220, 48%, 24%) !important; } html:not(.dark) .page-home #how ol li p { color: var(--sm-tier-body) !important; } html:not(.dark) .page-home #product-story .glass-panel h3 { color: var(--sm-tier-h3) !important; } html:not(.dark) .page-home #product-story .glass-panel p { color: var(--sm-tier-body) !important; } /* Блок «О компании»: лид + цифры в карточках */ html:not(.dark) .page-home #about .grid > div:first-child > p.text-zinc-400 { color: var(--sm-tier-lead) !important; } html:not(.dark) .page-home #about .glass-panel > p.text-3xl { color: var(--sm-tier-stat) !important; } html:not(.dark) .page-home #about .glass-panel > p.text-xs { color: var(--sm-tier-caption) !important; } /* Hero: подзаголовок и подписи в демо-блоке */ html:not(.dark) .page-home #hero p.text-slate-600 { color: var(--sm-tier-lead) !important; } html:not(.dark) .page-home #hero .glass-panel p.text-slate-500 { color: var(--sm-tier-caption) !important; } html:not(.dark) .page-home #hero .glass-panel p.text-slate-900 { color: var(--sm-tier-h3) !important; } /* Середина страницы CTA */ html:not(.dark) .page-home #cta-mid p { color: var(--sm-tier-lead) !important; } /* Product story: вводный абзац */ html:not(.dark) .page-home #product-story .grid > div:first-child > p.text-zinc-400 { color: var(--sm-tier-lead) !important; } /* Отзывы: цитата vs подпись vs подзаголовок секции */ html:not(.dark) .page-home #testimonials .mx-auto.max-w-3xl > p.text-zinc-400 { color: var(--sm-tier-lead) !important; } html:not(.dark) .page-home #testimonials blockquote { color: var(--sm-tier-quote) !important; } html:not(.dark) .page-home #testimonials figcaption { color: var(--sm-tier-caption) !important; } /* Pricing: подпись под формой */ html:not(.dark) .page-home #pricing form p.text-slate-500, html:not(.dark) .page-home #lead form p.text-slate-500 { color: var(--sm-tier-caption) !important; } /* FAQ: вопрос (summary) темнее ответа */ html:not(.dark) .page-home #faq summary { color: var(--sm-tier-h3) !important; } html:not(.dark) .page-home #faq details p { color: var(--sm-tier-body) !important; } /* Подвал: заголовки колонок vs строки */ html:not(.dark) .page-home #contact p.uppercase.text-zinc-500 { color: hsl(222, 25%, 38%) !important; } html:not(.dark) .page-home #contact .grid > div:first-child > p.text-zinc-400 { color: var(--sm-tier-lead) !important; } html:not(.dark) .page-home #contact ul.text-zinc-400 { color: var(--sm-tier-body) !important; } html:not(.dark) .page-home #contact > div > p.border-t.text-zinc-600 { color: var(--sm-tier-caption) !important; }