/* ==================================================================================================== PROJECT: INFINITY FLOW COMPUTERS FILE: about.css VERSION: 5.0 (BULLETPROOF EDITION) STEP 1 OF 5: CORE SYSTEM & VARIABLES ==================================================================================================== */ /* ========================================================================== 1.0 DESIGN TOKENS (VARIABLES) Мы используем CSS Variables для управления темой. Это работает быстрее, чем перерисовка классов JS-ом, и гарантирует синхронность изменений. ========================================================================== */ :root { /* DARK MODE (DEFAULT / OLED OPTIMIZED) Глубокий черный фон для экономии энергии на OLED экранах. */ --bg-core: #050505; /* Основной фон (Body) */ --bg-card: #0a0a0a; /* Фон карточек */ --bg-surface: rgba(255, 255, 255, 0.02); /* Интерактивные элементы */ --text-main: #ffffff; /* Основной текст */ --text-muted: #9ca3af; /* Второстепенный текст (Gray-400) */ --text-dim: #6b7280; /* Технический текст (Gray-500) */ --border-dim: rgba(255, 255, 255, 0.1); /* Еле заметные границы */ --border-light: rgba(255, 255, 255, 0.2); /* Границы при наведении */ --accent-primary: #a855f7; /* Purple-500 */ --selection-bg: rgba(168, 85, 247, 0.3); /* Цвет выделения текста */ /* Фильтры для логотипов и изображений */ --filter-logo: brightness(0) invert(1); /* Белый логотип */ --filter-noise: none; /* Шум стандартный */ } /* ========================================================================== 2.0 LIGHT MODE OVERRIDES Класс .light-mode вешается на через JS. Здесь мы инвертируем переменные для создания "бумажного" стиля. ========================================================================== */ html.light-mode, body.light-mode { /* LIGHT MODE (PAPER STYLE) Чистый белый фон и высокий контраст текста. */ --bg-core: #ffffff; --bg-card: #f9fafb; /* Gray-50 */ --bg-surface: #f3f4f6; /* Gray-100 */ --text-main: #111827; /* Gray-900 (Почти черный) */ --text-muted: #4b5563; /* Gray-600 */ --text-dim: #9ca3af; /* Gray-400 */ --border-dim: #e5e7eb; /* Gray-200 (Видимые границы) */ --border-light: #d1d5db; /* Gray-300 */ --accent-primary: #7c3aed; /* Purple-600 (Чуть темнее для контраста) */ --selection-bg: rgba(124, 58, 237, 0.2); /* Инверсия фильтров */ --filter-logo: none; /* Черный логотип (оригинал) */ --filter-noise: invert(1); /* Инвертируем шум, чтобы он был виден на белом */ } /* ========================================================================== 3.0 GLOBAL RESET & BASE STYLES Принудительное применение переменных ко всем элементам. ========================================================================== */ html { height: 100%; /* Предотвращение скачков скролла на iOS */ overflow-x: hidden; scroll-behavior: smooth; /* Резервный цвет фона до загрузки CSS */ background-color: var(--bg-core); } body { background-color: var(--bg-core) !important; color: var(--text-main) !important; /* Плавный переход темы (0.5s) */ transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1); width: 100%; min-height: 100%; position: relative; /* Улучшение рендеринга шрифтов */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* CUSTOM SELECTION Брендовое выделение текста. */ ::selection { background-color: var(--selection-bg); color: inherit; } /* ========================================================================== 4.0 SCROLLBAR STYLING Тонкий, ненавязчивый скроллбар, адаптирующийся под тему. ========================================================================== */ /* Webkit (Chrome, Safari, Edge) */ ::-webkit-scrollbar { width: 8px; height: 8px; /* Для горизонтального скролла */ } ::-webkit-scrollbar-track { background: var(--bg-core); } ::-webkit-scrollbar-thumb { background: var(--border-dim); border-radius: 4px; /* Отступ от края */ border: 2px solid var(--bg-core); } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--border-dim) var(--bg-core); } /* Скрытие скроллбара для горизонтальных таблиц (но возможность скролла остается) */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* END OF STEP 1 System Core Initialized. */ /* ==================================================================================================== PROJECT: INFINITY FLOW COMPUTERS FILE: about.css VERSION: 5.0 (BULLETPROOF EDITION) STEP 2 OF 5: TYPOGRAPHY & COMPONENTS ==================================================================================================== */ /* ========================================================================== 5.0 TEXT & BORDER MAPPING (THE MAGIC TRICK) Переопределение стандартных классов Tailwind для поддержки тем. Это позволяет не дублировать классы в HTML (dark:text-white и т.д.). ========================================================================== */ /* Основной текст (Заголовки, жирный текст) */ .text-white { color: var(--text-main) !important; } /* Второстепенный текст (Описания, подзаголовки) */ .text-gray-300, .text-gray-400 { color: var(--text-muted) !important; } /* Технический текст (Метки, даты, футер) */ .text-gray-500, .text-gray-600, .text-gray-700 { color: var(--text-dim) !important; } /* Границы (Borders) */ .border-white\/10, .border-white\/20, .border-white\/5 { border-color: var(--border-dim) !important; } /* Background Mapping Фоны блоков, которые должны быть "чуть светлее/темнее" основного фона. */ .bg-white\/5, .bg-white\/10, .bg-\[\#0a0a0a\], .bg-\[\#080808\], .bg-\[\#050505\] { background-color: var(--bg-card) !important; border-color: var(--border-dim) !important; } /* ========================================================================== 6.0 NAVIGATION CAPSULE Плавающее меню. В светлой теме оно становится полупрозрачно-белым. ========================================================================== */ .nav-capsule { /* Базовый стиль (Темная тема) */ background-color: rgba(5, 5, 5, 0.8) !important; /* Почти черный */ backdrop-filter: blur(12px); border: 1px solid var(--border-dim) !important; /* Плавная смена */ transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease; } /* Переопределение для Светлой темы */ body.light-mode .nav-capsule { background-color: rgba(255, 255, 255, 0.85) !important; /* Полупрозрачный белый */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Мягкая тень */ border-color: rgba(0, 0, 0, 0.05) !important; } /* ========================================================================== 7.0 LOGO & IMAGE HANDLING Инверсия цветов для SVG-логотипов. ========================================================================== */ /* Базовое состояние (Темная тема): Логотип (черный SVG) инвертируется в белый. */ img.filter { filter: brightness(0) invert(1); transition: filter 0.5s ease; } /* Светлая тема: Убираем инверсию, логотип становится оригинальным (черным). */ body.light-mode img.filter { filter: none !important; } /* Специальный класс для инверсии фона (если нужно) */ .invert-on-light { filter: invert(0); transition: filter 0.5s ease; } body.light-mode .invert-on-light { filter: invert(1); } /* ========================================================================== 8.0 UTILITY ANIMATIONS Вспомогательные анимации для интерфейса. ========================================================================== */ /* Плавное появление (Fade In Up) */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-up { animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } /* Бегущая строка (Ticker) */ @keyframes marquee-linear { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-marquee-linear { display: flex; width: max-content; /* Важно для контента */ animation: marquee-linear 30s linear infinite; will-change: transform; /* Оптимизация GPU */ } /* END OF STEP 2 Typography & Nav ready. */ /* ==================================================================================================== PROJECT: INFINITY FLOW COMPUTERS FILE: about.css VERSION: 5.0 (BULLETPROOF EDITION) STEP 3 OF 5: TRANSITION CURTAIN & VISUAL FX ==================================================================================================== */ /* ========================================================================== 10.0 NOISE TEXTURE (GRAIN) Эффект пленочного зерна или бумаги. ========================================================================== */ .noise-bg { position: fixed; inset: 0; z-index: -1; /* Позади контента, но перед фоновым цветом */ pointer-events: none; /* Пропускает клики */ /* SVG-фильтр шума (Base64 для производительности) */ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); /* Прозрачность для темной темы (белый шум на черном) */ opacity: 0.04; transition: opacity 0.5s ease, filter 0.5s ease; } /* Светлая тема: Инвертируем шум, чтобы он стал темным (черные точки на белом фоне). Чуть повышаем прозрачность для заметности. */ body.light-mode .noise-bg { filter: invert(1); opacity: 0.06; } /* ========================================================================== 11.0 HERO REVEAL ANIMATIONS Классы для GSAP-анимаций при загрузке страницы. ========================================================================== */ .hero-anim { /* Начальное состояние задается в CSS, чтобы избежать "мигания" до инициализации JS. */ opacity: 0; transform: translateY(20px); /* Улучшение производительности рендеринга */ will-change: opacity, transform; } /* Фолбек (Plan B): Если у пользователя отключен JS, показываем контент сразу. Класс .no-js висит на html теге и убирается скриптом. */ .no-js .hero-anim { opacity: 1 !important; transform: none !important; } /* ========================================================================== 12.0 GRADIENTS & ACCENTS Настройка градиентов для разных режимов. ========================================================================== */ /* Градиент в секции кейса (Ocypus) */ .bg-gradient-to-l { /* В темной теме он едва заметен */ --gradient-from: rgba(234, 179, 8, 0.03); /* Yellow-500 ultra low opacity */ --gradient-to: transparent; } body.light-mode .bg-gradient-to-l { /* В светлой теме делаем его чуть насыщеннее, чтобы он не терялся на белом */ --gradient-from: rgba(234, 179, 8, 0.1); } /* ========================================================================== 13.0 MOBILE MENU OVERLAY FIXES Гарантия того, что мобильное меню перекрывает интерфейс, но не шторку. ========================================================================== */ #mobile-menu { background-color: var(--bg-core) !important; /* Адаптивный фон */ z-index: 100 !important; /* Ниже шторки (99999), но выше навбара (50) */ } /* Текст в мобильном меню */ #mobile-menu a, #mobile-menu span { color: var(--text-main); } body.light-mode #mobile-menu a:hover { color: var(--accent-primary); } /* END OF STEP 3 Visuals & Transitions secured. */ /* ==================================================================================================== PROJECT: INFINITY FLOW COMPUTERS FILE: about.css VERSION: 5.0 (BULLETPROOF EDITION) STEP 4 OF 5: PRINT STYLES & ACCESSIBILITY ==================================================================================================== */ /* ========================================================================== 14.0 PRINT OPTIMIZATION (THE PAPER REPORT) Превращает сайт в строгий документ при печати/экспорте в PDF. ========================================================================== */ @media print { /* GLOBAL RESET Экономим чернила и убираем фон. */ @page { margin: 2cm; } html, body { background-color: #ffffff !important; color: #000000 !important; font-size: 12pt; line-height: 1.5; width: 100%; overflow: visible; } /* HIDE INTERACTIVE ELEMENTS Скрываем всё, что нельзя нажать на бумаге. */ nav, #navbar, #mobile-menu, #mobile-menu-btn, .nav-capsule, #transition-curtain, .noise-bg, button, .theme-toggle-btn, .hero-anim { display: none !important; } /* LAYOUT STABILIZATION Убираем темные фоны карточек, делаем их белыми с черной обводкой. */ section, div, article { background-color: transparent !important; color: #000000 !important; box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; } /* Границы для структурных блоков */ .border, .border-b, .border-r, .border-t { border-color: #000000 !important; border-width: 1px !important; border-style: solid !important; } /* TYPOGRAPHY FIXES Все тексты становятся черными. */ h1, h2, h3, h4, p, span, dt, dd { color: #000000 !important; opacity: 1 !important; /* Убираем прозрачность у muted текста */ } /* Инверсия логотипа обратно в черный (если он был белым) */ img.filter { filter: none !important; } /* LINK HANDLING Показываем URL ссылок, чтобы их можно было прочитать. */ a { text-decoration: underline; color: #000000 !important; } a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 0.8em; font-weight: normal; } /* BREAK MANAGEMENT Запрещаем разрывать таблицы и карточки посередине страницы. */ section, article, .grid, table { page-break-inside: avoid; break-inside: avoid; } /* Скрываем декоративные элементы, которые не нужны в печати */ [aria-hidden="true"], .absolute { /* Осторожно скрываем только декоративные абсолюты */ /* display: none !important; -> Это слишком агрессивно, лучше точечно в HTML */ } } /* ========================================================================== 15.0 ACCESSIBILITY (A11Y) Поддержка системных настроек пользователя. ========================================================================== */ /* REDUCED MOTION Отключаем анимации для тех, кого укачивает. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .hero-anim { opacity: 1 !important; transform: none !important; } } /* HIGH CONTRAST Для пользователей с нарушениями зрения. */ @media (prefers-contrast: more) { :root { --text-muted: #000000; /* Весь серый текст становится черным */ --border-dim: #000000; /* Границы становятся явными */ } .bg-white\/5, .bg-white\/10 { background-color: transparent !important; border: 2px solid currentColor !important; } .text-gray-300, .text-gray-400, .text-gray-500 { color: canvastext !important; } } /* ========================================================================== 16.0 TOUCH OPTIMIZATION Улучшение взаимодействия на тач-экранах. ========================================================================== */ @media (pointer: coarse) { /* Увеличение зон клика */ button, a.nav-link-liquid, .mobile-nav-link { min-height: 44px; /* Стандарт Apple Human Interface */ min-width: 44px; display: flex; align-items: center; justify-content: center; } /* Отключаем ховер-эффекты на таче, чтобы они не "залипали" */ .group:hover .group-hover\:opacity-100 { opacity: 1; /* Показываем контент сразу */ } .hover\:scale-105:hover { transform: none; } } /* END OF STEP 4 Ready for Final Polish. */ /* ==================================================================================================== PROJECT: INFINITY FLOW COMPUTERS FILE: about.css VERSION: 5.0 (BULLETPROOF EDITION) STEP 5 OF 5: SAFE AREAS, Z-INDEX & FINAL POLISH ==================================================================================================== */ /* ========================================================================== 17.0 SAFE AREA INSETS (IPHONE NOTCH SUPPORT) Гарантирует, что контент не спрячется за "челкой" или полоской "Home". ========================================================================== */ @supports (padding-top: env(safe-area-inset-top)) { /* Отступ для навигации */ .nav-capsule { margin-top: env(safe-area-inset-top); } /* Отступ для мобильного меню */ #mobile-menu { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* Отступ для футера */ footer { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); } } /* ========================================================================== 18.0 TEXT RENDERING OPTIMIZATION Делаем текст максимально четким на всех устройствах. ========================================================================== */ body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; /* Запрет авто-зума текста на iPhone при повороте */ } /* Переносы слов для узких экранов */ p, h1, h2, h3 { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } /* Новые CSS свойства для красоты текста (Chrome 114+) */ .text-balance { text-wrap: balance; /* Равномерное распределение строк в заголовках */ } .text-pretty { text-wrap: pretty; /* Избегание "висячих" слов в конце абзаца */ } /* ========================================================================== 19.0 Z-INDEX MAP (REFERENCE) Единый источник правды для слоев. Не меняйте эти значения хаотично в коде. ========================================================================== */ /* LAYER 5: SYSTEM OVERLAYS ------------------------ 99999 : #transition-curtain (Шторка загрузки) 9999 : Tooltips / Toasts (если будут) 100 : #mobile-menu (Меню на весь экран) LAYER 4: NAVIGATION & CONTROLS ------------------------------ 50 : #navbar (Плавающая капсула) 40 : Sticky Headers (в таблицах) LAYER 3: INTERACTIVE CONTENT ---------------------------- 30 : Modals / Popups 20 : Dropdowns 10 : Hero Text / Buttons (Relative z-10) LAYER 2: BASE CONTENT --------------------- 1 : Standard Text / Images 0 : Default LAYER 1: BACKGROUNDS -------------------- -1 : .noise-bg (Шум) -2 : Video / Canvas Backgrounds */ /* ========================================================================== 20.0 DEBUG UTILITIES (DEV ONLY) Помогают найти вылезающие элементы. ========================================================================== */ /* Раскомментируйте, чтобы увидеть границы всех элементов. Полезно, если появился горизонтальный скролл. */ /* * { outline: 1px solid rgba(255, 0, 0, 0.2) !important; } */ /* Сетка для проверки выравнивания */ .debug-grid { background-size: 20px 20px; background-image: linear-gradient(to right, rgba(128, 128, 128, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(128, 128, 128, 0.1) 1px, transparent 1px); pointer-events: none; z-index: 9999; } /* ========================================================================== 21.0 BROWSER SPECIFIC FIXES ========================================================================== */ /* Safari Fix: Убираем серый фон при тапе */ a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; } /* Chrome Autofill Fix: Убираем белый фон автозаполнения в темной теме */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px var(--bg-card) inset !important; -webkit-text-fill-color: var(--text-main) !important; transition: background-color 5000s ease-in-out 0s; } /* ========================================================================== END OF CSS The Bulletproof Style System is Complete. ========================================================================== */ /* ========================================================================== 22.0 HERO VISUAL FX (DUAL-MODE ENGINE) Адаптация атмосферных эффектов под Темную (OLED) и Светлую (Paper) темы. ========================================================================== */ /* 1. ФОНОВОЕ СВЕЧЕНИЕ (GLOW BLOBS) */ .hero-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; transition: opacity 0.5s ease, filter 0.5s ease, background-color 0.5s ease; } /* --- DARK MODE (NEON) --- */ .hero-glow-primary { background: var(--accent-primary); /* Фиолетовый неон */ top: -10%; left: -10%; width: 50vw; height: 50vw; opacity: 0.15; filter: blur(100px); mix-blend-mode: screen; /* Осветление черного фона */ } .hero-glow-secondary { background: #06b6d4; /* Циановый неон */ bottom: -10%; right: -10%; width: 40vw; height: 40vw; opacity: 0.1; filter: blur(100px); mix-blend-mode: screen; } /* --- LIGHT MODE (WATERCOLOR) --- */ body.light-mode .hero-glow-primary { background: #d8b4fe; /* Пастельный фиолетовый */ opacity: 0.4; /* Выше непрозрачность */ filter: blur(120px); mix-blend-mode: multiply; /* "Впитывание" в белую бумагу */ } body.light-mode .hero-glow-secondary { background: #a5f3fc; /* Пастельный циан */ opacity: 0.4; filter: blur(120px); mix-blend-mode: multiply; } /* 2. ТЕКСТОВЫЙ ГРАДИЕНТ (ANIMATED) */ .text-gradient-hero { background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gradientMove 6s ease infinite; } /* Dark Mode Gradient: Purple -> Cyan -> White */ body:not(.light-mode) .text-gradient-hero { background-image: linear-gradient(135deg, #ffffff 10%, #a855f7 50%, #22d3ee 90%); } /* Light Mode Gradient: Dark Purple -> Blue -> Black (High Contrast) */ body.light-mode .text-gradient-hero { background-image: linear-gradient(135deg, #1e1b4b 10%, #7c3aed 50%, #0891b2 90%); } @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* 3. ИНТЕРАКТИВНЫЕ КАРТОЧКИ (STAT CARDS) */ .stat-card { position: relative; overflow: hidden; transition: background-color 0.3s ease; /* CSS Var для цвета акцента */ --card-color: var(--text-muted); } /* Полоска слева */ .stat-card::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background-color: var(--card-color); transform: scaleY(0); transform-origin: bottom; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover::before { transform: scaleY(1); } /* Фон при наведении */ .stat-card:hover { /* Dark: Легкий белый налет */ background-color: rgba(255, 255, 255, 0.03); } body.light-mode .stat-card:hover { /* Light: Легкий черный налет (затемнение) */ background-color: rgba(0, 0, 0, 0.04); } /* Цвет цифр (Value) при наведении */ .stat-card:hover .stat-value { color: var(--card-color) !important; } /* 4. ТЕМАТИЧЕСКИЕ ПАЛИТРЫ (Dark vs Light) */ /* CYAN (Location) */ .theme-cyan { --card-color: #22d3ee; } /* Neon Cyan */ body.light-mode .theme-cyan { --card-color: #0891b2; } /* Deep Teal */ /* PURPLE (Scale) */ .theme-purple { --card-color: #a855f7; } /* Neon Purple */ body.light-mode .theme-purple { --card-color: #7c3aed; } /* Deep Violet */ /* GREEN (Team) */ .theme-green { --card-color: #4ade80; } /* Neon Green */ body.light-mode .theme-green { --card-color: #16a34a; } /* Deep Emerald */ /* 5. УТИЛИТЫ ДЛЯ СВЕТЛОЙ ТЕМЫ (BORDERS & BADGES) */ /* Обводка бейджа "EST 2024" */ .badge-hero { border: 1px solid rgba(168, 85, 247, 0.3); background: rgba(168, 85, 247, 0.1); color: #d8b4fe; } body.light-mode .badge-hero { border: 1px solid rgba(124, 58, 237, 0.2); /* Более четкая граница */ background: rgba(124, 58, 237, 0.05); /* Очень светлый фон */ color: #6d28d9; /* Темно-фиолетовый текст */ box-shadow: none; /* Убираем свечение в светлой теме */ } /* Watermark (IFC на фоне) */ [data-i18n="ab_watermark_text"] { color: rgba(255, 255, 255, 0.03); } body.light-mode [data-i18n="ab_watermark_text"] { color: rgba(0, 0, 0, 0.04); /* Черный прозрачный */ } /* ========================================================================== TRANSITION CURTAIN STYLES Перенос логики шторки с главной страницы ========================================================================== */ #transition-curtain { /* Гарантируем, что шторка перекрывает всё */ z-index: 99999 !important; /* Цвет фона шторки наследует тему */ background-color: var(--bg-core); } /* Логотип внутри шторки */ #transition-logo { /* В темной теме логотип белый (инверсия черного SVG) */ filter: brightness(0) invert(1); } /* LIGHT MODE OVERRIDE В светлой теме шторка белая, логотип черный. */ html.light-mode #transition-curtain { background-color: #ffffff; } html.light-mode #transition-logo { filter: none; /* Черный логотип */ } /* ========================================================================== BEAUTIFUL LIGHT MODE NAVBAR (PREMIUM GLASS) Вставьте это в конец style.css ========================================================================== */ /* 1. КОНТЕЙНЕР (КАПСУЛА) */ body.light-mode .nav-capsule { /* Полупрозрачный молочный фон */ background: rgba(255, 255, 255, 0.75) !important; /* Эффект "Кристального стекла" (Apple style) */ backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; /* Тончайшая граница для отделения от фона */ border: 1px solid rgba(0, 0, 0, 0.08) !important; /* Двухуровневая тень для объема */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), /* Близкая тень */ 0 12px 32px -4px rgba(0, 0, 0, 0.08) !important; /* Дальняя мягкая тень */ transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; } /* Эффект при наведении на капсулу - она становится чуть плотнее */ body.light-mode .nav-capsule:hover { background: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05), 0 20px 40px -4px rgba(0, 0, 0, 0.1) !important; transform: translateY(-1px); } /* 2. ССЫЛКИ МЕНЮ */ body.light-mode .nav-link-liquid, body.light-mode nav a[href*="#"] { /* Для ссылок в about.html */ color: #4b5563 !important; /* Gray-600 (Темно-серый, не черный) */ font-weight: 600 !important; transition: all 0.2s ease; } /* Ховер на ссылку - легкая плашка */ body.light-mode .nav-link-liquid:hover, body.light-mode nav a[href*="#"]:hover { color: #000000 !important; background-color: rgba(0, 0, 0, 0.05) !important; /* Легкий серый фон */ } /* 3. АКТИВНЫЙ ПУНКТ (Кнопка "О Компании" на скриншоте) */ /* Если это span (как в about.html) */ body.light-mode .nav-capsule span.px-4, /* Если это активный класс */ body.light-mode .nav-link-liquid.active { background-color: #ffffff !important; /* Чистый белый фон */ color: #000000 !important; /* Черный текст */ font-weight: 700 !important; /* Делаем активную кнопку "объемной" */ border: 1px solid rgba(0, 0, 0, 0.1) !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important; } /* 4. ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКОВ */ body.light-mode .lang-btn { color: #9ca3af !important; /* Светло-серый */ font-weight: 500 !important; } body.light-mode .lang-btn:hover { color: #7c3aed !important; /* Фиолетовый при наведении */ } body.light-mode .lang-btn.active { color: #000000 !important; /* Черный активный */ font-weight: 800 !important; text-decoration-color: #7c3aed !important; /* Фиолетовое подчеркивание */ text-underline-offset: 4px; } /* Разделители / */ body.light-mode .select-none.text-gray-700 { color: #e5e7eb !important; /* Очень светлый серый, чтобы не мешал */ } /* 5. КНОПКА ТЕМЫ (СОЛНЦЕ) */ body.light-mode .theme-toggle-btn { background: #ffffff !important; /* Белый фон */ border: 1px solid rgba(0, 0, 0, 0.1) !important; /* Тонкая рамка */ color: #f59e0b !important; /* Оранжевое солнце */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important; } body.light-mode .theme-toggle-btn:hover { background: #fef3c7 !important; /* Легкий желтоватый фон при наведении */ transform: rotate(15deg); } /* 6. ЛОГОТИП */ body.light-mode .nav-capsule img { /* Убеждаемся, что логотип контрастный */ filter: none !important; opacity: 1 !important; } /* ========================================================================== FIX: INSTANT LIGHT MODE (PREVENTS BROKEN RELOAD) Вставьте это в самый конец about.css и style.css ========================================================================== */ /* 1. ГЛОБАЛЬНЫЙ ФОН И ТЕКСТ (КРИТИЧНО) */ html.light-mode body { background-color: #ffffff !important; color: #111827 !important; } /* 2. НАВИГАЦИЯ (NAVBAR) */ html.light-mode .nav-capsule { background: rgba(255, 255, 255, 0.75) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 12px 32px -4px rgba(0, 0, 0, 0.08) !important; } html.light-mode .nav-capsule:hover { background: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05), 0 20px 40px -4px rgba(0, 0, 0, 0.1) !important; } /* Ссылки меню */ html.light-mode .nav-link-liquid, html.light-mode nav a[href*="#"] { color: #4b5563 !important; font-weight: 600 !important; } html.light-mode .nav-link-liquid:hover, html.light-mode nav a[href*="#"]:hover { color: #000000 !important; background-color: rgba(0, 0, 0, 0.05) !important; } /* Активный пункт */ html.light-mode .nav-capsule span.px-4, html.light-mode .nav-link-liquid.active { background-color: #ffffff !important; color: #000000 !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important; } /* Переключатели языка */ html.light-mode .lang-btn { color: #9ca3af !important; } html.light-mode .lang-btn.active { color: #000000 !important; } /* Логотип */ html.light-mode img.filter, html.light-mode .nav-capsule img { filter: none !important; opacity: 1 !important; } /* Кнопка темы */ html.light-mode .theme-toggle-btn { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; color: #f59e0b !important; } /* 3. HERO ЗАГОЛОВОК (СИСТЕМНЫЕ АРХИТЕКТОРЫ) */ /* Исправляет бледный текст на белом фоне */ html.light-mode h1, html.light-mode .hero-title-wrapper span { color: #111827 !important; /* Почти черный */ opacity: 1 !important; } /* Если используется градиентный текст */ html.light-mode .text-gradient-hero, html.light-mode .hero-text-chrome { background-image: linear-gradient(135deg, #1e1b4b 10%, #7c3aed 50%, #0891b2 90%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; filter: drop-shadow(0 2px 10px rgba(124, 58, 237, 0.2)) !important; } /* 4. КАРТОЧКИ СТАТИСТИКИ (HQ LOC, SCALE, TEAM) */ html.light-mode .stat-card { border-color: rgba(0, 0, 0, 0.1) !important; background-color: transparent !important; } html.light-mode .stat-card:hover { background-color: rgba(0, 0, 0, 0.03) !important; } /* ========================================================================== 🔥 GLOBAL LIGHT MODE RESCUE (THE "FIX EVERYTHING" PATCH) Переопределение Tailwind-классов для светлой темы. Вставьте в КОНЕЦ about.css ========================================================================== */ /* 1. ПРИНУДИТЕЛЬНАЯ ИНВЕРСИЯ ТЕКСТА */ /* Если в HTML написано text-white, в светлой теме он станет черным */ html.light-mode .text-white { color: #111827 !important; /* Насыщенный черный */ } /* Если написано text-gray-300 (обычно описание), станет темно-серым */ html.light-mode .text-gray-300, html.light-mode .text-gray-200 { color: #374151 !important; /* Читаемый темно-серый */ } /* Если написано text-gray-400/500 (второстепенный текст), станет средним серым */ html.light-mode .text-gray-400, html.light-mode .text-gray-500 { color: #6b7280 !important; /* Серый, но видимый на белом */ } /* 2. ИСПРАВЛЕНИЕ ГРАНИЦ И РАМОК */ /* border-white/10 (белая прозрачная рамка) станет черной прозрачной */ html.light-mode .border-white\/10, html.light-mode .border-white\/20, html.light-mode .border-white\/5, html.light-mode .border-r, html.light-mode .border-b, html.light-mode .border-t { border-color: rgba(0, 0, 0, 0.1) !important; } /* 3. ИСПРАВЛЕНИЕ ФОНОВ (Карточки статистики, блоки) */ html.light-mode .bg-white\/5, html.light-mode .bg-white\/10, html.light-mode .bg-white\/\[0\.005\], html.light-mode .bg-\[\#080808\], html.light-mode .bg-\[\#050505\] { background-color: transparent !important; /* Убираем черный фон */ /* Или можно сделать светло-серым: */ /* background-color: #f9fafb !important; */ } /* 4. БЕГУЩАЯ СТРОКА (НИЖНИЙ МАРКИ) */ /* Она сейчас совсем невидима */ html.light-mode .animate-marquee-linear { color: #9ca3af !important; /* Делаем видимым серым */ } html.light-mode .animate-marquee-linear span { color: inherit !important; } /* 5. РАЗДЕЛИТЕЛИ (Слеши ///) */ /* Чтобы они оставались цветными, но не белыми */ html.light-mode .text-purple-500 { color: #7c3aed !important; } html.light-mode .text-cyan-500 { color: #0891b2 !important; } html.light-mode .text-green-500 { color: #16a34a !important; } html.light-mode .text-yellow-500 { color: #d97706 !important; } /* 6. ЛОГОТИП (Инверсия обратно) */ html.light-mode img[src*="IFC"] { filter: none !important; /* Черный оригинал */ color: #000000 !important; opacity: 1 !important; } /* 7. ОПИСАНИЕ ПОД ЗАГОЛОВКОМ (Специфичный фикс) */ html.light-mode p[data-i18n="ab_hero_desc"] { color: #374151 !important; font-weight: 500 !important; } html.light-mode .nav-capsule img { /* brightness(0) делает изображение полностью черным */ filter: brightness(0) !important; opacity: 1 !important; } /* ========================================================================== FIX: MARQUEE TICKER (BLACK TEXT & INFINITE) Вставьте в конец about.css ========================================================================== */ /* 1. Цвет текста в белом режиме */ html.light-mode .animate-marquee-linear { color: #000000 !important; /* Насыщенный черный */ font-weight: 700 !important; /* Чуть жирнее для читаемости */ } /* Убеждаемся, что разделители /// тоже черные или цветные, но видные */ html.light-mode .animate-marquee-linear span { opacity: 1 !important; } /* 2. Фон полоски в белом режиме */ /* Ищем контейнер с классом overflow-hidden и bg-[#050505] */ html.light-mode .border-t.bg-\[\#050505\] { background-color: #ffffff !important; /* Белый фон */ border-top-color: rgba(0, 0, 0, 0.1) !important; /* Тонкая серая линия сверху */ } /* 1. Общий контейнер чертежа */ #infrastructure .aspect-\[1\/1\], #infrastructure .aspect-\[16\/9\] { border-radius: 2.5rem !important; /* Большой внешний радиус */ padding: 1.5rem !important; background: rgba(255, 255, 255, 0.015); box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5); } /* 2. Зоны (A, B, C) */ #infrastructure [class*="ZONE"] { border-radius: 1.5rem !important; /* Средний радиус для внутренних блоков */ transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } /* 3. Стеллажи внутри Зоны А (самые мелкие детали) */ #infrastructure .grid div[class*="bg-white/5"] { border-radius: 0.5rem !important; /* Мягкие углы у маленьких прямоугольников */ border: 1px solid rgba(255, 255, 255, 0.05) !important; } /* 4. Бейдж "ГЛАВА 01" */ [data-i18n="ab_chap_1_id"], [data-i18n="ab_chap_2_id"], [data-i18n="ab_chap_3_id"], [data-i18n="ab_chap_4_id"], [data-i18n="ab_chap_5_id"], [data-i18n="ab_chap_6_id"], [data-i18n="ab_chap_7_id"], [data-i18n="ab_chap_8_id"] { border-radius: 100vw !important; /* Превращаем в "пилюлю" */ padding-left: 1rem !important; padding-right: 1rem !important; } /* 5. Таблица характеристик (слева) */ #infrastructure dl { border-radius: 1.5rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); } #infrastructure dt+dd { font-variant-numeric: tabular-nums; } /* Эффект при наведении на зоны для "мягкости" */ #infrastructure [class*="ZONE"]:hover { background-color: rgba(255, 255, 255, 0.05) !important; box-shadow: 0 0 30px rgba(168, 85, 247, 0.1); } /* --- 1. ТИПОГРАФИКА --- */ #infrastructure h2 { letter-spacing: -0.05em; /* Плотный заголовок для стиля High-End */ background: linear-gradient(to bottom, #fff 40%, #888); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #infrastructure .font-mono { letter-spacing: 0.1em; font-size: 0.7rem; text-transform: uppercase; } /* Эффект "светящегося" значения в таблице */ #infrastructure dd { text-shadow: 0 0 15px rgba(255, 255, 255, 0.2); transition: all 0.3s ease; } #infrastructure div:hover dd { color: var(--accent-primary); text-shadow: 0 0 20px rgba(168, 85, 247, 0.4); } /* --- 2. ДЕТАЛИЗАЦИЯ КАРТЫ (BLUEPRINT) --- */ /* Добавляем "сканирующую" линию */ @keyframes scanning { 0% { top: 0%; opacity: 0; } 50% { opacity: 0.5; } 100% { top: 100%; opacity: 0; } } .blueprint-scan { position: absolute; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.2), transparent); animation: scanning 4s linear infinite; pointer-events: none; z-index: 5; } /* Углы-маркеры для эффекта прицела/чертежа */ .corner-mark::before, .corner-mark::after { content: ''; position: absolute; width: 10px; height: 10px; border-color: rgba(255, 255, 255, 0.2); border-style: solid; } /* Перекрестие в центре */ .blueprint-crosshair { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); opacity: 0.1; pointer-events: none; } .blueprint-crosshair::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #fff; } .blueprint-crosshair::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #fff; } /* --- 3. СТЕКЛО (GLASSMORPHISM) --- */ #infrastructure [class*="ZONE"] { background: rgba(255, 255, 255, 0.01) !important; backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.05) !important; } /* --- INFRASTRUCTURE PREMIER STYLES --- */ /* Заголовок с мягким градиентом */ #infrastructure h2 { background: linear-gradient(to bottom, #ffffff 40%, rgba(255, 255, 255, 0.4) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Скругление и FX для главного контейнера чертежа */ .corner-mark { box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(0, 0, 0, 0.8); } /* Анимация сканирующей линии */ @keyframes scanningLine { 0% { transform: translateY(-100%); opacity: 0; } 50% { opacity: 0.4; } 100% { transform: translateY(1000%); opacity: 0; } } .blueprint-scan { position: absolute; top: 0; left: 0; width: 100%; height: 100px; background: linear-gradient(to bottom, transparent, rgba(168, 85, 247, 0.05), transparent); animation: scanningLine 8s ease-in-out infinite; pointer-events: none; z-index: 1; } /* Прицел (Crosshair) */ .blueprint-crosshair { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); opacity: 0.1; pointer-events: none; } .blueprint-crosshair::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #fff; } .blueprint-crosshair::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #fff; } /* Плавные переходы для зон */ #infrastructure [class*="ZONE"] { transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } #infrastructure [class*="ZONE"]:hover { border-style: solid; border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 40px rgba(0, 0, 0, 0.3); } /* Мягкие тени для значений в таблице */ #infrastructure dd { text-shadow: 0 0 10px rgba(255, 255, 255, 0.1); } /* Цвет при наведении на ячейки в таблице */ #infrastructure .group\/row:hover dd { text-shadow: 0 0 15px rgba(255, 255, 255, 0.3); } /* Адаптивность для мобилок: уменьшаем радиус на маленьких экранах */ @media (max-width: 768px) { .corner-mark { border-radius: 1.5rem !important; } #infrastructure [class*="ZONE"] { border-radius: 1rem !important; } } /* ========================================================================== LIGHT MODE PATCH: INFRASTRUCTURE (BLUEPRINT) ========================================================================== */ html.light-mode #infrastructure { background-color: #ffffff !important; } /* 1. Заголовок и тексты */ html.light-mode #infrastructure h2 { background: linear-gradient(to bottom, #111827 40%, #6b7280 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } html.light-mode #infrastructure .text-gray-300 { color: #374151 !important; /* Темно-серый текст описания */ } /* 2. Таблица характеристик (слева) */ html.light-mode #infrastructure dl { border-color: rgba(0, 0, 0, 0.1) !important; background: #f9fafb; } html.light-mode #infrastructure dt { color: #6b7280 !important; } html.light-mode #infrastructure dd { color: #111827 !important; text-shadow: none; /* Убираем свечение, на белом оно грязнит */ } html.light-mode #infrastructure .group\/row:hover { background-color: rgba(0, 0, 0, 0.02); } /* 3. Контейнер чертежа (Карта) */ html.light-mode .corner-mark { background-color: #f3f4f6 !important; /* Светло-серый "инженерный" фон */ border-color: rgba(0, 0, 0, 0.08) !important; /* Инверсия тени: делаем её мягкой и глубокой */ box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.08), inset 0 0 40px rgba(255, 255, 255, 1) !important; } /* 4. Зоны A, B, C на карте */ html.light-mode #infrastructure [class*="ZONE"] { background-color: #ffffff !important; border-color: rgba(0, 0, 0, 0.1) !important; backdrop-filter: none; } html.light-mode #infrastructure [class*="ZONE"]:hover { background-color: #ffffff !important; border-color: var(--accent-primary) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); } /* 5. Маленькие стеллажи внутри Zone A */ html.light-mode #infrastructure .grid div { background-color: #f9fafb !important; border-color: rgba(0, 0, 0, 0.05) !important; } /* 6. Сканирующая линия и перекрестие */ html.light-mode .blueprint-scan { background: linear-gradient(to bottom, transparent, rgba(124, 58, 237, 0.1), /* Фиолетовый след */ transparent); } html.light-mode .blueprint-crosshair { opacity: 0.2; } html.light-mode .blueprint-crosshair::before, html.light-mode .blueprint-crosshair::after { background-color: #000 !important; /* Черный прицел */ } /* 7. Технические метки (координаты) */ html.light-mode #infrastructure span.text-gray-700 { color: #9ca3af !important; /* Делаем их чуть виднее */ } /* 8. Легенда (внизу карты) */ html.light-mode #infrastructure .text-gray-600 { color: #4b5563 !important; } html.light-mode #infrastructure .bg-purple-500\/40 { background-color: rgba(168, 85, 247, 0.4); } html.light-mode #infrastructure .bg-cyan-500\/40 { background-color: rgba(6, 182, 212, 0.4); } /* ========================================================================== B2B MANIFESTO SECTION STYLES ========================================================================== */ /* 1. Заголовок с градиентом */ .b2b-title-gradient { background: linear-gradient(135deg, #ffffff 40%, #a855f7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* 2. Контейнер карточки (Glassmorphism) */ .b2b-stats-card { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .b2b-stats-card:hover { transform: translateY(-10px) rotateX(2deg) rotateY(-2deg); } /* 3. Строки в карточке */ .b2b-row { display: flex; align-items: flex-end; padding: 1.5rem 0; transition: all 0.3s ease; border-radius: 1rem; position: relative; } .b2b-row:hover { padding-left: 1rem; padding-right: 1rem; background: rgba(255, 255, 255, 0.02); } /* --- LIGHT MODE ADAPTATION --- */ html.light-mode .b2b-title-gradient { background: linear-gradient(135deg, #111827 40%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } html.light-mode .inner-card { background-color: #ffffff !important; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.08); } html.light-mode .b2b-stats-card { background: linear-gradient(to bottom right, #e5e7eb, transparent) !important; } html.light-mode .b2b-row:hover { background: rgba(124, 58, 237, 0.05); /* Нежно-фиолетовый при наведении */ } html.light-mode .b2b-row span.text-white { color: #111827 !important; } html.light-mode .b2b-row span.text-gray-500 { color: #6b7280 !important; } html.light-mode .border-white\/10 { border-color: rgba(0, 0, 0, 0.06) !important; } html.light-mode .inner-card h4 { color: #9ca3af !important; } /* Фоновый текст в светлом режиме */ html.light-mode .absolute.text-white\/\[0\.02\] { color: rgba(0, 0, 0, 0.03) !important; } /* ========================================================================== PRODUCT MATRIX DASHBOARD STYLES ========================================================================== */ /* 1. Общий заголовок */ .matrix-title-glow { background: linear-gradient(to bottom, #ffffff 40%, rgba(255, 255, 255, 0.3) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 2. Фоновые буквы (Глубина) */ .matrix-bg-letter { position: absolute; top: -2rem; right: 0; font-size: 20rem; font-weight: 900; line-height: 1; color: rgba(255, 255, 255, 0.02); pointer-events: none; z-index: 0; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .matrix-panel:hover .matrix-bg-letter { transform: scale(1.1) translateX(-20px); color: rgba(255, 255, 255, 0.04); } /* 3. Стиль строк (Slabs) */ .matrix-row { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; padding: 1.25rem 1rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.03); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); cursor: default; } .matrix-row:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); transform: scale(1.02); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); z-index: 10; } /* Эффект для эксклюзивных брендов */ .matrix-row.exclusive:hover { border-color: var(--brand-color); box-shadow: 0 0 30px -10px var(--brand-color); } /* --- LIGHT MODE ADAPTATION --- */ html.light-mode #portfolio { background-color: #ffffff !important; } html.light-mode .matrix-title-glow { background: linear-gradient(to bottom, #111827 40%, #6b7280 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } html.light-mode .matrix-bg-letter { color: rgba(0, 0, 0, 0.03); } html.light-mode .matrix-row { background-color: #f9fafb; border-color: rgba(0, 0, 0, 0.05); } html.light-mode .matrix-row:hover { background-color: #ffffff; box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.08); } html.light-mode .matrix-row span.text-white { color: #111827 !important; } html.light-mode .matrix-row div.text-white { color: #111827 !important; } html.light-mode .matrix-panel.bg-white\/\[0\.01\] { background-color: #f3f4f6 !important; } /* ========================================================================== MARKETING CASE SECTION (CH 03) - PREMIER VIBE ========================================================================== */ /* 1. Заголовок и бейдж */ #case-study h2 { background: linear-gradient(to bottom, #ffffff 30%, rgba(245, 212, 80, 0.5) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } [data-i18n="ab_chap_3_id"] { background: rgba(245, 158, 11, 0.1) !important; border: 1px solid rgba(245, 158, 11, 0.2) !important; color: #f59e0b !important; border-radius: 100vw !important; } /* 2. Текст и цифры слева */ #case-study h3 { font-size: 2.5rem !important; letter-spacing: -0.04em; line-height: 1; } #case-study .text-gray-400 { font-weight: 300; line-height: 1.8; } /* Оформление метрик (16, 5, 1) */ #case-study .grid-cols-3>div { padding: 1.5rem 0.5rem; position: relative; } #case-study .text-yellow-500 { font-family: var(--font-mono); letter-spacing: -0.05em; filter: drop-shadow(0 0 15px rgba(245, 212, 80, 0.3)); font-weight: 800; } #case-study .text-yellow-500+span { font-size: 9px !important; letter-spacing: 0.2em; opacity: 0.5; } /* 3. Фото-галерея (Правая сторона) */ #case-study .lg\:col-span-7 { background-color: transparent !important; /* Убираем плоский серый фон */ } /* Главное фото (Showroom) */ #case-study .aspect-video, #case-study .aspect-auto { border-radius: 2rem !important; /* Скругляем всё */ border: 1px solid rgba(255, 255, 255, 0.08) !important; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8); } /* Имитация премиального фото-фильтра */ #case-study .bg-gradient-to-br.from-yellow-900\/20 { background: linear-gradient(225deg, rgba(245, 212, 80, 0.15) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.9) 100%) !important; opacity: 1 !important; } /* Малые фото */ #case-study .flex-col .bg-white\/\[0\.02\] { background: linear-gradient(135deg, #111, #050505) !important; } #case-study .group:hover { transform: translateY(-8px) scale(1.01); border-color: rgba(245, 212, 80, 0.3) !important; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.9); } #case-study .group:hover [data-i18n^="ab_ph_"] { color: #f5d450 !important; letter-spacing: 0.3em; } /* --- LIGHT MODE ADAPTATION --- */ html.light-mode #case-study { background-color: #ffffff !important; } html.light-mode #case-study h2 { background: linear-gradient(to bottom, #111827 40%, #f59e0b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } html.light-mode #case-study .text-gray-400 { color: #4b5563 !important; } /* Карточки в светлом режиме */ html.light-mode #case-study .aspect-video, html.light-mode #case-study .aspect-auto { background-color: #f3f4f6 !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.05); } html.light-mode #case-study .bg-gradient-to-br.from-yellow-900\/20 { background: linear-gradient(225deg, rgba(245, 212, 80, 0.1) 0%, #ffffff 60%, #f3f4f6 100%) !important; } html.light-mode #case-study .text-yellow-500 { color: #d97706 !important; /* Более темный для контраста */ filter: none; } html.light-mode #case-study .border-t.border-white\/10 { border-top-color: rgba(0, 0, 0, 0.1) !important; } /* ========================================================================== HUMAN CAPITAL SECTION (CH 04) - APPLE CORPORATE VIBE ========================================================================== */ /* 1. Заголовок раздела */ #team h2 { background: linear-gradient(to bottom, #ffffff 40%, rgba(255, 255, 255, 0.4) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.05em; } /* 2. Левая колонка (Философия) */ #team .lg\:col-span-4 { background-color: transparent !important; } #team h3 { font-size: 2rem !important; letter-spacing: -0.03em; font-weight: 800; } #team .text-gray-400 { font-weight: 300; line-height: 1.7; } /* Большое число "11" */ #team .text-3xl.md\:text-4xl { font-size: 5rem !important; font-family: var(--font-mono); letter-spacing: -0.05em; line-height: 1; background: linear-gradient(135deg, #fff, var(--accent-primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 900; margin-bottom: 0.5rem; } /* 3. Список юнитов (Карточки) */ #team .group.p-4.md\:p-5 { border-radius: 1.5rem !important; /* Увеличиваем скругление */ background: rgba(255, 255, 255, 0.01) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; padding: 1.5rem !important; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); margin-bottom: 0.75rem; } #team .group.p-4.md\:p-5:hover { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.1) !important; transform: translateX(10px) scale(1.01); box-shadow: -20px 20px 40px -10px rgba(0, 0, 0, 0.5); } /* Цветные метки юнитов (HQ_MNG, LOG_OPS и т.д.) */ #team span[class*="bg-"][class*="-500/10"] { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; border-radius: 0.5rem; padding: 0.5rem 0.75rem; min-width: 85px; } /* Индикатор ACTIVE */ #team .bg-green-500\/10 { background-color: rgba(34, 197, 94, 0.05) !important; border: 1px solid rgba(34, 197, 94, 0.2) !important; color: #4ade80 !important; font-weight: 800; letter-spacing: 0.15em; padding: 0.4rem 0.8rem !important; border-radius: 100vw !important; position: relative; overflow: hidden; } /* Эффект мерцания для ACTIVE */ #team .bg-green-500\/10::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.2), transparent); transform: translateX(-100%); animation: statusSlide 3s infinite; } @keyframes statusSlide { 100% { transform: translateX(100%); } } /* --- LIGHT MODE ADAPTATION --- */ html.light-mode #team { background-color: #ffffff !important; } html.light-mode #team h2 { background: linear-gradient(to bottom, #111827 40%, #6b7280 100%); -webkit-background-clip: text; } html.light-mode #team .group.p-4.md\:p-5 { background-color: #f9fafb !important; border-color: rgba(0, 0, 0, 0.05) !important; } html.light-mode #team .group.p-4.md\:p-5:hover { background-color: #ffffff !important; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1) !important; } html.light-mode #team h4 { color: #111827 !important; } html.light-mode #team .text-3xl.md\:text-4xl { background: linear-gradient(135deg, #111827, #7c3aed); -webkit-background-clip: text; } html.light-mode #team .bg-green-500\/10 { background-color: #dcfce7 !important; border-color: #86efac !important; color: #166534 !important; } /* ========================================================================== DIGITAL FOOTPRINT SECTION (CH 05) - SMM DASHBOARD PREMIER ========================================================================== */ /* 1. Заголовок и бейдж */ #digital h2 { background: linear-gradient(to bottom, #ffffff 40%, rgba(236, 72, 153, 0.4) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.05em; } [data-i18n="ab_chap_5_id"] { background: rgba(236, 72, 153, 0.1) !important; border: 1px solid rgba(236, 72, 153, 0.2) !important; color: #ec4899 !important; border-radius: 100vw !important; padding: 0.4rem 1rem !important; } /* 2. Главный показатель (>5M Views) */ #digital .text-5xl.md\:text-8xl { font-size: clamp(4rem, 10vw, 9rem) !important; font-weight: 900; letter-spacing: -0.07em; /* Максимально плотный трекинг как у Apple */ line-height: 0.8; background: linear-gradient(135deg, #ffffff 30%, #ec4899 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 10px 20px rgba(236, 72, 153, 0.2)); } #digital .text-pink-500.font-mono { font-weight: 700; letter-spacing: 0.3em; opacity: 0.8; text-transform: uppercase; } /* 3. Кнопки соцсетей (Платформы) */ #digital a.flex.items-center.justify-between { border-radius: 1.25rem !important; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; padding: 1.25rem !important; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } #digital a.flex.items-center.justify-between:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.15) !important; transform: translateX(8px); } /* 4. Правая колонка: Макет смартфона/поста */ #digital .lg\:col-span-7 { perspective: 1000px; /* Добавляем глубину для 3D эффекта */ } #digital .lg\:col-span-7>div { border-radius: 2.5rem !important; /* Углы как у iPhone */ background: #000 !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } #digital .lg\:col-span-7>div:hover { transform: rotateY(-5deg) rotateX(5deg) scale(1.02); } /* Стеклянный хедер внутри макета */ #digital .flex.items-center.justify-between.p-4.border-b { background: rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(10px); } /* Изображение внутри поста */ #digital .h-2\/3.bg-gradient-to-br { position: relative; } #digital .h-2\/3.bg-gradient-to-br::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.4)); } #digital h3[data-i18n="ab_smm_post_h"] { font-weight: 900; letter-spacing: -0.05em; text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } /* --- LIGHT MODE ADAPTATION --- */ html.light-mode #digital { background-color: #ffffff !important; } html.light-mode #digital h2 { background: linear-gradient(to bottom, #111827 40%, #ec4899 100%); -webkit-background-clip: text; } html.light-mode #digital .text-5xl.md\:text-8xl { background: linear-gradient(135deg, #111827 40%, #db2777 100%); -webkit-background-clip: text; filter: none; } html.light-mode #digital a.flex.items-center.justify-between { background: #f9fafb !important; border-color: rgba(0, 0, 0, 0.05) !important; } html.light-mode #digital a.flex.items-center.justify-between:hover { background: #ffffff !important; box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1) !important; } html.light-mode #digital .lg\:col-span-7>div { background: #ffffff !important; border-color: #e5e7eb !important; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.1); } html.light-mode #digital .flex.items-center.justify-between.p-4.border-b { background: #fdfdfd !important; } html.light-mode #digital .h-2\/3.bg-gradient-to-br { background: #f3f4f6 !important; } html.light-mode #digital h3[data-i18n="ab_smm_post_h"] { color: #111827 !important; text-shadow: none; } /* ========================================================================== LIGHT MODE FIX: DIGITAL FOOTPRINT (CH 05) ========================================================================== */ html.light-mode #digital { background-color: #ffffff !important; } /* 1. Исправляем темную левую колонку */ html.light-mode #digital .lg\:col-span-5 { background-color: #ffffff !important; /* Убираем темный фон */ background: #ffffff !important; backdrop-filter: none !important; border-right-color: rgba(0, 0, 0, 0.05) !important; } /* 2. Фон правой колонки (с постом) делаем чуть серым для объема */ html.light-mode #digital .lg\:col-span-7 { background-color: #f9fafb !important; } /* 3. Текст описания и разделительная линия */ html.light-mode #digital .text-gray-400 { color: #4b5563 !important; /* Темно-серый вместо белого */ } html.light-mode #digital .border-l-2.border-pink-500\/50 { border-left-color: #ec4899 !important; /* Делаем линию ярче */ } /* 4. Карточки платформ (Instagram / Telegram) */ html.light-mode #digital a.flex.items-center.justify-between { background-color: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important; } html.light-mode #digital a.flex.items-center.justify-between:hover { background-color: #ffffff !important; border-color: #ec4899 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important; } /* Имена платформ и юзернеймы */ html.light-mode #digital .text-gray-300 { color: #111827 !important; /* Черный текст */ } html.light-mode #digital .text-gray-500 { color: #6b7280 !important; /* Серый текст */ } /* 5. Заголовки ( views / views label ) */ html.light-mode #digital .text-pink-500.font-mono { color: #be185d !important; /* Темно-розовый для читаемости */ } /* 6. Сетка на фоне (Mesh) */ html.light-mode #digital .opacity-10.md\:opacity-20 { opacity: 0.05 !important; filter: invert(1); } /* ========================================================================== LEGAL REGISTRY SECTION (CH 06) - PREMIUM CERTIFICATE VIBE ========================================================================== */ /* 1. Заголовок и бейдж */ #legal h2 { font-size: clamp(2.5rem, 5vw, 4.5rem) !important; background: linear-gradient(to bottom, #ffffff 40%, rgba(34, 197, 94, 0.5) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.05em; line-height: 1; } [data-i18n="ab_chap_6_id"] { background: rgba(34, 197, 94, 0.1) !important; border: 1px solid rgba(34, 197, 94, 0.2) !important; color: #4ade80 !important; border-radius: 100vw !important; padding: 0.4rem 1.2rem !important; } /* 2. Кнопка скачивания (PDF) */ #legal a.group.flex.items-center { border-radius: 1.5rem !important; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; padding: 1.5rem !important; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); max-width: 380px; } #legal a.group:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(34, 197, 94, 0.4) !important; transform: translateY(-5px); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3); } #legal a.group:hover .bg-white\/10 { background-color: #16a34a !important; color: #fff !important; } /* 3. Юридическая карта (Requisites Card) */ #legal .lg\:col-span-8>div:last-child { border-radius: 2.5rem !important; padding: 3rem !important; /* Увеличиваем внутренние отступы */ background: linear-gradient(135deg, #0a0a0a 0%, #050505 100%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) inset; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; } #legal .lg\:col-span-8>div:last-child:hover { transform: scale(1.02) rotateX(2deg); } /* Эффект "платинового" отблеска на карте */ #legal .lg\:col-span-8>div:last-child::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 50%); pointer-events: none; } /* 4. Тексты внутри карты */ #legal .ab_leg_name { font-size: 1.75rem !important; letter-spacing: -0.02em; color: #fff !important; } #legal .font-mono.text-white { font-size: 1.25rem !important; /* Увеличиваем ИНН и Р/С */ letter-spacing: 0.15em; color: #fff !important; font-weight: 500; } #legal .text-gray-600 { font-size: 10px !important; letter-spacing: 0.2em; font-weight: 700; color: #4b5563 !important; } /* Статус НДС */ #legal .bg-green-500 { box-shadow: 0 0 15px #22c55e; animation: pulse-green 2s infinite; } @keyframes pulse-green { 0% { opacity: 0.5; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0.5; transform: scale(0.8); } } /* --- LIGHT MODE ADAPTATION --- */ html.light-mode #legal { background-color: #ffffff !important; } html.light-mode #legal h2 { background: linear-gradient(to bottom, #111827 40%, #16a34a 100%); -webkit-background-clip: text; } html.light-mode #legal .lg\:col-span-8>div:last-child { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.1) !important; } html.light-mode #legal .font-mono.text-white, html.light-mode #legal .ab_leg_name { color: #111827 !important; } html.light-mode #legal a.group.flex.items-center { background-color: #f9fafb !important; border-color: rgba(0, 0, 0, 0.05) !important; } html.light-mode #legal a.group:hover { background-color: #ffffff !important; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05); } /* ========================================================================== HISTORY TIMELINE SECTION (CH 07) - INTERACTIVE FLOW ========================================================================== */ /* 1. Заголовок */ #history h2 { font-size: clamp(2rem, 4vw, 3.5rem) !important; background: linear-gradient(to bottom, #ffffff 40%, rgba(255, 255, 255, 0.3) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.05em; text-transform: uppercase; } /* 2. Сама линия (Timeline Path) */ #history .relative.border-l { border-left: 1px solid rgba(255, 255, 255, 0.05) !important; position: relative; padding-bottom: 2rem; } /* Создаем эффект "движения" по линии через градиент */ #history .relative.border-l::before { content: ''; position: absolute; top: 0; left: -1px; width: 1px; height: 100%; background: linear-gradient(to bottom, transparent, rgba(168, 85, 247, 0.5) 20%, rgba(34, 197, 94, 0.8) 95%, transparent); z-index: 0; } /* 3. Элементы списка (Карточки событий) */ #history .group { transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); position: relative; z-index: 1; } #history .group:hover { transform: translateX(10px); } /* Точки (Узлы) */ #history .absolute.w-2\.5.h-2\.5 { width: 12px !important; height: 12px !important; background-color: #050505 !important; border: 2px solid rgba(255, 255, 255, 0.2) !important; box-shadow: 0 0 0 6px #050505; /* Отступ от линии */ transition: all 0.4s ease; } #history .group:hover .absolute.w-2\.5.h-2\.5 { background-color: #ffffff !important; border-color: #ffffff !important; box-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 0 0 0 6px #050505; transform: translate(-50%, -10%) scale(1.3); } /* 4. Текстовые блоки */ #history .font-mono.text-lg { font-size: 1.5rem !important; letter-spacing: -0.05em; font-weight: 800; } #history .text-\[10px\].text-gray-500 { letter-spacing: 0.3em; font-weight: 700; opacity: 0.6; } #history h3 { font-size: 1.25rem !important; font-weight: 700; margin-bottom: 0.5rem; color: #fff !important; } #history p.text-gray-400 { font-weight: 300; line-height: 1.6; max-width: 400px; } /* Спецэффект для пункта "NOW" */ #history .text-green-400.font-bold { background: linear-gradient(135deg, #4ade80, #22c55e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.3)); font-size: 1.75rem !important; } /* --- LIGHT MODE ADAPTATION --- */ html.light-mode #history { background-color: #ffffff !important; } html.light-mode #history h2 { background: linear-gradient(to bottom, #111827 40%, #6b7280 100%); -webkit-background-clip: text; } html.light-mode #history .relative.border-l::before { background: linear-gradient(to bottom, transparent, rgba(124, 58, 237, 0.3) 20%, rgba(22, 163, 74, 0.5) 95%, transparent); } html.light-mode #history .absolute.w-2\.5.h-2\.5 { background-color: #ffffff !important; border-color: #e5e7eb !important; box-shadow: 0 0 0 6px #ffffff; } html.light-mode #history .group:hover .absolute.w-2\.5.h-2\.5 { background-color: #111827 !important; border-color: #111827 !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 0 0 6px #ffffff; } html.light-mode #history .font-mono.text-lg, html.light-mode #history h3 { color: #111827 !important; } html.light-mode #history p.text-gray-400 { color: #4b5563 !important; } html.light-mode #history .text-green-400.font-bold { background: linear-gradient(135deg, #16a34a, #15803d); -webkit-background-clip: text; } /* ========================================================================== CONTACTS & REPORT FOOTER (CH 08) - COMMAND CENTER VIBE ========================================================================== */ /* 1. Заголовок раздела */ #contacts h2 { font-size: clamp(2.5rem, 5vw, 4rem) !important; background: linear-gradient(to bottom, #ffffff 50%, rgba(255, 255, 255, 0.3) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.06em; } /* 2. Сетка контактов (Тайлы) */ #contacts .lg\:col-span-9 { gap: 1rem; /* Добавляем расстояние между ячейками */ padding: 1rem; } #contacts .md\:grid-cols-3>* { border-radius: 2rem !important; /* Большое скругление */ background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; margin: 0.25rem; padding: 2.5rem !important; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } #contacts .md\:grid-cols-3>*:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.15) !important; transform: translateY(-10px) scale(1.02); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.8); z-index: 10; } /* Иконки в контактах */ #contacts .w-10.h-10 { width: 3.5rem !important; height: 3.5rem !important; border-radius: 1rem !important; background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); color: #fff !important; margin-bottom: 2rem !important; } #contacts *:hover .w-10.h-10 { background: var(--accent-primary); border-color: var(--accent-primary); transform: rotate(-10deg); } /* Тексты (Телефон, Email, Город) */ #contacts .text-lg.font-bold { font-size: 1.5rem !important; letter-spacing: -0.02em; font-family: var(--font-mono); } #contacts .text-purple-400 { font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 2px solid rgba(168, 85, 247, 0.3); } /* 3. Индикатор "LINES OPEN" */ #contacts .text-green-400 { font-weight: 800; letter-spacing: 0.2em; filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.4)); } /* 4. ФУТЕР ОТЧЕТА (END REPORT) */ footer[class*="border-t"] { background-color: #000 !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; } /* Огромный текст на фоне */ footer .text-\[12vw\] { font-weight: 900; letter-spacing: -0.05em; color: rgba(255, 255, 255, 0.03) !important; text-transform: uppercase; } /* Кнопка "ВЕРНУТЬСЯ НА ГЛАВНУЮ" */ footer a[data-i18n="ab_footer_back"] { background: #fff !important; color: #000 !important; padding: 1rem 2.5rem !important; font-weight: 800 !important; letter-spacing: 0.05em; border: none !important; transition: all 0.4s var(--ease-elastic); box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2); } footer a[data-i18n="ab_footer_back"]:hover { transform: scale(1.1) translateY(-5px); box-shadow: 0 20px 40px rgba(255, 255, 255, 0.3); background: var(--accent-primary) !important; color: #fff !important; } /* --- LIGHT MODE ADAPTATION --- */ html.light-mode #contacts { background-color: #ffffff !important; } html.light-mode #contacts h2 { background: linear-gradient(to bottom, #111827 50%, #6b7280 100%); -webkit-background-clip: text; } html.light-mode #contacts .md\:grid-cols-3>* { background: #f9fafb !important; border-color: rgba(0, 0, 0, 0.05) !important; } html.light-mode #contacts .md\:grid-cols-3>*:hover { background: #ffffff !important; box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.08); border-color: var(--accent-primary) !important; } html.light-mode #contacts .text-white { color: #111827 !important; } html.light-mode #contacts .w-10.h-10 { background: #fff; border-color: #e5e7eb; color: #111827 !important; } html.light-mode footer[class*="border-t"] { background-color: #f3f4f6 !important; border-top-color: #e5e7eb !important; } html.light-mode footer .text-\[12vw\] { color: rgba(0, 0, 0, 0.03) !important; } html.light-mode footer a[data-i18n="ab_footer_back"] { background: #111827 !important; color: #fff !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } /* Отмена инверсии для логотипа в футере */ footer img[src*="IFC.svg"] { filter: none !important; -webkit-filter: none !important; } /* В светлой теме, если хочешь, чтобы он оставался зеленым, ничего не меняй. Если хочешь, чтобы в светлой теме он стал черным, используй это: */ html.light-mode footer img[src*="IFC.svg"] { filter: brightness(0) !important; /* Сделает его идеально черным в светлой теме */ } /* Фикс мобильного меню для страницы About */ html.light-mode #mobile-menu .text-purple-500 { color: #7c3aed !important; border-bottom-color: #7c3aed !important; } html.light-mode #mobile-menu .text-gray-400 { color: #4b5563 !important; } /* ========================================================================== THEME VARIABLES - STANDARDIZED ========================================================================== */ :root { /* DARK MODE (Default) */ --bg-core: #050505; --bg-card: #0a0a0a; --text-main: #ffffff; --text-muted: #9ca3af; --text-dim: #6b7280; --border-dim: rgba(255, 255, 255, 0.1); --accent-primary: #a855f7; --filter-logo: brightness(0) invert(1); } /* ЭТОТ БЛОК ТЕПЕРЬ ГЛАВНЫЙ ДЛЯ СМЕНЫ ТЕМЫ */ html.light-mode { --bg-core: #ffffff; --bg-card: #f9fafb; --text-main: #111827; --text-muted: #4b5563; --text-dim: #9ca3af; --border-dim: rgba(0, 0, 0, 0.1); --accent-primary: #7c3aed; --filter-logo: brightness(0); /* Черный логотип */ } /* Применяем переменные к базовым тегам */ html, body { background-color: var(--bg-core) !important; color: var(--text-main) !important; transition: background-color 0.5s ease, color 0.5s ease; } /* ФИНАЛЬНЫЙ ФИКС ТЕКСТОВ ДЛЯ ABOUT LIGHT MODE */ html.light-mode .text-white { color: #111827 !important; } html.light-mode .text-gray-300, html.light-mode .text-gray-400 { color: #374151 !important; } html.light-mode .text-gray-500, html.light-mode .text-gray-600 { color: #6b7280 !important; } /* Инверсия логотипов в навигации и футере */ html.light-mode .nav-capsule img, html.light-mode footer img { filter: brightness(0) !important; opacity: 1 !important; } /* Исправление карточек статистики в Hero */ html.light-mode .stat-card { border-color: rgba(0, 0, 0, 0.1) !important; } html.light-mode .stat-card:hover { background-color: rgba(0, 0, 0, 0.03) !important; } /* Линии и разделители */ html.light-mode .border-white\/10, html.light-mode .border-r, html.light-mode .border-b, html.light-mode .border-t { border-color: rgba(0, 0, 0, 0.1) !important; } /* ========================================================================== CORE THEME ENGINE - ABOUT PAGE ========================================================================== */ /* 1. ПЕРЕМЕННЫЕ ПО УМОЛЧАНИЮ (DARK MODE) */ :root { --bg-core: #050505; --bg-card: #0a0a0a; --bg-surface: rgba(255, 255, 255, 0.03); --text-main: #ffffff; --text-muted: #9ca3af; /* Gray-400 */ --text-dim: #6b7280; /* Gray-500 */ --border-dim: rgba(255, 255, 255, 0.1); --accent-primary: #a855f7; --filter-logo: brightness(0) invert(1); } /* 2. ПЕРЕМЕННЫЕ ДЛЯ СВЕТЛОЙ ТЕМЫ */ html.light-mode { --bg-core: #ffffff; --bg-card: #f9fafb; --bg-surface: #f3f4f6; --text-main: #111827; --text-muted: #374151; /* Gray-700 */ --text-dim: #6b7280; --border-dim: rgba(0, 0, 0, 0.1); --accent-primary: #7c3aed; --filter-logo: brightness(0); } /* 3. ПРИМЕНЕНИЕ БАЗОВЫХ ЦВЕТОВ */ html, body { background-color: var(--bg-core) !important; color: var(--text-main) !important; margin: 0; padding: 0; transition: background-color 0.5s ease, color 0.5s ease; } /* Фикс для всех секций в About */ section, main { background-color: var(--bg-core) !important; color: var(--text-main) !important; } /* Добавьте это в конец style.css для страховки */ body:not(.lenis-stopped):not(:has(#mobile-menu.is-open)) { overflow-y: auto !important; } /* Специально для Андроида в Chrome */ @media screen and (max-width: 768px) { html, body { overflow-x: hidden; overflow-y: auto; } } /* ========================================================== ABOUT PAGE: FOOTER VISIBILITY FIX (LIGHT MODE) ========================================================== */ html.light-mode #footer { background-color: #ffffff !important; } /* 1. Тексты контактов и заголовков */ html.light-mode #footer .text-white, html.light-mode #footer a[href^="tel"], html.light-mode #footer a[href^="mailto"], html.light-mode #footer address p, html.light-mode #footer h4, html.light-mode #footer nav a { color: #111827 !important; /* Глубокий черный */ opacity: 1 !important; } /* 2. Подписи над контактами (Серые) */ html.light-mode #footer .text-gray-500, html.light-mode #footer .text-gray-400 { color: #6b7280 !important; } /* 3. Кнопка "В ТЕРМИНАЛ" (Центральная кнопка на скрине) */ html.light-mode #footer a[data-i18n="ab_footer_back"] { background-color: #000000 !important; color: #ffffff !important; border: none !important; padding: 1rem 2.5rem !important; border-radius: 100vw !important; font-weight: 800 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; } /* 4. Кнопка "СТАТЬ ПАРТНЕРОМ" (Черная с иконкой) */ html.light-mode #footer a.group.bg-white { background-color: #000000 !important; color: #ffffff !important; } html.light-mode #footer a.group.bg-white span { color: #ffffff !important; } /* 5. Карта (Маска) */ html.light-mode #footer .map-container { -webkit-mask-image: radial-gradient(circle at center, black 40%, rgba(0, 0, 0, 0.8) 70%, transparent 95%); mask-image: radial-gradient(circle at center, black 40%, rgba(0, 0, 0, 0.8) 70%, transparent 95%); filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.05)); } html.light-mode #footer .map-iframe { filter: grayscale(1) contrast(0.9) brightness(1.1) !important; } /* 6. Разделительные линии */ html.light-mode #footer .border-t, html.light-mode #footer .border-b { border-color: rgba(0, 0, 0, 0.1) !important; }