/* Базовые стили для сайта CleverSphere */ /* Сбрасываем некоторые стандартные отступы браузера */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Глобальные переменные + тема по умолчанию: СВЕТЛАЯ. Тёмная тема включается атрибутом data-theme="dark" на (см. js/main.js). */ :root { /* Смещение прокрутки для якорей (обновляется JS на основе высоты sticky header) */ --header-offset: 96px; /* Мягкое голубое радиальное свечение (в стиле Gemini): насыщеннее в центре, затухает к почти-белым краям. Закреплено к вьюпорту (см. body). */ --bg: radial-gradient(1200px 760px at 50% 38%, #ccdfff 0%, #dde9ff 24%, #ebf2fd 50%, #f5f8fc 78%); --text: #0b1020; --text-muted: rgba(11, 16, 32, 0.55); --text-muted-strong: rgba(11, 16, 32, 0.75); --label-text: #0b1020; --header-bg: rgba(255, 255, 255, 0.9); --footer-bg: #e9edf6; --dropdown-bg: #ffffff; --panel: #ffffff; --panel-soft: #e9edf6; --section-alt-bg: transparent; /* в светлой теме полосы убираем — виден фон-свечение */ --panel-2: #eef1f7; --panel-3: #f0f3f9; --icon-bg: rgba(11, 16, 32, 0.04); --field-bg: #ffffff; --chip-bg: rgba(11, 16, 32, 0.05); --border: rgba(11, 16, 32, 0.10); --hairline: rgba(11, 16, 32, 0.08); --border-strong: rgba(11, 16, 32, 0.20); --shadow: rgba(11, 16, 32, 0.14); --accent: #14b8a6; /* акцент-заливка */ --accent-hover: #0f9e8e; --accent-ink: #ffffff; /* текст на акцентной заливке */ --accent-text: #0d9488; /* акцент-текст (ссылки, hover) — читаемо на белом */ --accent-tint: rgba(13, 148, 136, 0.12); --accent-line: rgba(13, 148, 136, 0.28); --accent-soft: rgba(13, 148, 136, 0.5); --accent-2: #4f57d8; --focus: rgba(13, 148, 136, 0.4); --hero-grad-1: rgba(20, 184, 166, 0.16); --hero-grad-2: rgba(79, 90, 216, 0.12); --err-line: rgba(214, 69, 69, 0.45); --err-bg: rgba(214, 69, 69, 0.10); } /* Тёмная тема (исходная палитра parent-сайта) */ :root[data-theme="dark"] { --bg: #0b1020; --text: #f5f5f5; --text-muted: rgba(245, 245, 245, 0.55); --text-muted-strong: rgba(245, 245, 245, 0.75); --label-text: rgba(245, 245, 245, 0.92); --header-bg: rgba(5, 8, 20, 0.95); --footer-bg: rgba(5, 8, 20, 0.95); --dropdown-bg: rgba(5, 8, 20, 0.98); --panel: rgba(5, 8, 20, 0.70); --panel-soft: rgba(5, 8, 20, 0.55); --section-alt-bg: rgba(5, 8, 20, 0.55); /* тёмная тема: полосы как раньше */ --panel-2: rgba(5, 8, 20, 0.40); --panel-3: rgba(5, 8, 20, 0.28); --icon-bg: rgba(5, 8, 20, 0.35); --field-bg: rgba(245, 245, 245, 0.06); --chip-bg: rgba(245, 245, 245, 0.06); --border: rgba(245, 245, 245, 0.10); --hairline: rgba(245, 245, 245, 0.08); --border-strong: rgba(245, 245, 245, 0.22); --shadow: rgba(0, 0, 0, 0.28); --accent: #4fd1c5; --accent-hover: #44c3b8; --accent-ink: #071019; --accent-text: #4fd1c5; --accent-tint: rgba(79, 209, 197, 0.12); --accent-line: rgba(79, 209, 197, 0.25); --accent-soft: rgba(79, 209, 197, 0.55); --accent-2: #627eff; --focus: rgba(79, 209, 197, 0.35); --hero-grad-1: rgba(79, 209, 197, 0.22); --hero-grad-2: rgba(98, 126, 255, 0.22); --err-line: rgba(255, 99, 99, 0.35); --err-bg: rgba(255, 99, 99, 0.10); } /* Базовые настройки документа */ html { scroll-behavior: smooth; /* Плавный скролл к якорям */ scroll-padding-top: var(--header-offset); /* Чтобы header не перекрывал якоря при переходах */ } /* Настраиваем базовый шрифт и фон страницы */ body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* background (а не background-color), чтобы --bg мог быть градиентом. fixed — свечение остаётся по центру экрана при прокрутке (как у Gemini). */ background: var(--bg); background-attachment: fixed; background-repeat: no-repeat; color: var(--text); line-height: 1.5; /* Базовая читабельность текста */ transition: color 160ms ease; } /* Нормализация изображений (чтобы не "вылезали" за контейнер) */ img { max-width: 100%; height: auto; display: block; } /* Делаем фокус заметным для клавиатурной навигации */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* Контейнер для выравнивания основного контента по центру */ .site-wrapper { min-height: 100vh; display: flex; flex-direction: column; } /* Шапка сайта */ .site-header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; /* На узких экранах меню может переноситься */ padding: 0.5rem 2rem; /* Уменьшаем высоту верхнего блока */ background-color: var(--header-bg); /* Полупрозрачный фон для хедера */ border-bottom: 1px solid var(--hairline); position: sticky; /* Фиксируем хедер сверху при прокрутке */ top: 0; z-index: 100; backdrop-filter: blur(10px); /* Лёгкое размытие фона за хедером */ } /* Логотип (прижимает остальные элементы шапки вправо) */ .logo { margin-right: auto; } .logo img { height: 64px; /* Уменьшили на ~20% (было 80px) */ } /* Основное навигационное меню */ .main-nav ul { list-style: none; display: flex; gap: 1.5rem; flex-wrap: wrap; /* Разрешаем перенос пунктов меню */ align-items: center; } .main-nav a { color: var(--text); text-decoration: none; font-weight: 500; display: inline-block; padding: 0.25rem 0; /* Небольшая зона клика, без изменения высоты хедера */ } .main-nav a:hover { color: var(--accent-text); /* Акцентный цвет для навигации при наведении */ } /* Кнопка бургер-меню (показываем только на мобильных) */ .nav-toggle { display: none; align-items: center; justify-content: center; padding: 0.55rem 0.8rem; border-radius: 12px; background: var(--chip-bg); border: 1px solid var(--border); color: var(--text); font-weight: 800; cursor: pointer; } .nav-toggle:hover { border-color: var(--accent-soft); color: var(--accent-text); } /* Переключатель темы (светлая/тёмная) — виден всегда */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--chip-bg); border: 1px solid var(--border); color: var(--text); font-size: 1.05rem; line-height: 1; cursor: pointer; } .theme-toggle:hover { border-color: var(--accent-soft); color: var(--accent-text); } /* Кнопка раскрытия подменю (caret) — нужна для мобильных, где нет hover */ .submenu-toggle { display: none; width: 34px; height: 34px; border-radius: 10px; background: var(--chip-bg); border: 1px solid var(--border); color: var(--text); cursor: pointer; } .submenu-toggle::before { content: "▾"; display: inline-block; transform: translateY(-1px); } /* Визуально показываем состояние "открыто" (стрелка вверх) */ .has-submenu.submenu-open > .submenu-toggle::before { transform: rotate(180deg); } .submenu-toggle:hover { border-color: var(--accent-soft); color: var(--accent-text); } /* Элемент меню, содержащий выпадающий список */ .has-submenu { position: relative; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; /* Позволяем подменю занимать следующую строку (важно на мобильных) */ } /* Ссылка About Us занимает доступную ширину (чтобы рядом поместилась кнопка caret) */ .has-submenu > a { flex: 1 1 auto; } /* Кнопка caret не растягивается */ .has-submenu > .submenu-toggle { flex: 0 0 auto; } /* Подменю должно занимать всю ширину под пунктом About Us */ .has-submenu > .submenu { flex-basis: 100%; } /* Выпадающее меню About Us скрыто по умолчанию. Используем более специфичный селектор, чтобы переопределить display:flex из .main-nav ul */ .main-nav ul.submenu { position: absolute; top: 100%; left: 0; display: none; flex-direction: column; /* Располагаем пункты подменю столбцом */ gap: 0; /* Убираем gap от .main-nav ul */ list-style: none; background-color: var(--dropdown-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; padding: 0.35rem 0; min-width: 200px; z-index: 200; /* Поверх контента страницы */ } /* Элементы внутри выпадающего меню */ .submenu li { padding: 0; } /* Ссылки в выпадающем меню растягиваем на всю ширину */ .submenu a { display: block; padding: 0.6rem 1rem; } /* Ховер-эффект для пунктов выпадающего меню */ .submenu a:hover { background: var(--chip-bg); } /* Показываем выпадающее меню при наведении на пункт About Us (подменю остаётся открытым, пока курсор внутри блока li) */ .has-submenu:hover .submenu { display: flex; /* Включаем flex, чтобы работал flex-direction: column */ } /* Утилита-контейнер: ограничиваем ширину контента как на типичных сайтах-визитках */ .container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 2rem; /* Единые боковые отступы как у шапки */ } /* Типографические утилиты */ .lead { font-size: 1.125rem; line-height: 1.6; max-width: 60ch; } .muted { opacity: 0.8; /* Приглушаем второстепенный текст */ } /* Кнопки (CTA) */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1rem; border-radius: 10px; text-decoration: none; font-weight: 600; border: 1px solid transparent; transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease; } .btn:active { transform: translateY(1px); } .btn-primary { background-color: var(--accent); /* Акцент */ color: var(--accent-ink); } .btn-primary:hover { background-color: var(--accent-hover); } .btn-secondary { background-color: transparent; border-color: var(--border-strong); color: var(--text); } .btn-secondary:hover { border-color: var(--accent-soft); color: var(--accent-text); } .text-link { color: var(--accent-text); text-decoration: none; font-weight: 600; } .text-link:hover { text-decoration: underline; } /* Секции страницы */ .section { padding: 3rem 0; } .section-alt { background: var(--section-alt-bg); /* Лёгкое отличие фона между секциями (в светлой теме — прозрачно) */ } .section-title { font-size: 1.75rem; margin-bottom: 0.75rem; } .section-subtitle { margin-bottom: 1.5rem; max-width: 80ch; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } /* Hero */ .hero { padding: 2.5rem 0 1.5rem; /* Уменьшаем верхний блок по вертикали */ background: radial-gradient(800px 400px at 20% 10%, var(--hero-grad-1), transparent 60%), radial-gradient(700px 450px at 80% 0%, var(--hero-grad-2), transparent 55%); } .hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2rem; align-items: start; } /* Лейбл-эйброу над главным заголовком hero-блока */ .hero-eyebrow { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted-strong); margin-bottom: 0.75rem; } .hero-eyebrow-icon { width: 1rem; height: 1rem; color: var(--accent-text); flex-shrink: 0; } .hero-copy h1 { font-size: 2.5rem; line-height: 1.15; margin-bottom: 0.5rem; } /* Короткий слоган под главным заголовком hero-блока */ .hero-copy .tagline { font-size: 1rem; color: var(--accent-text); margin-bottom: 1rem; } .hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; } .hero-highlight { background-color: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; } /* Enterprise-иллюстрация в hero (единый стиль/палитра) */ .hero-illustration { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--icon-bg); margin-bottom: 0.9rem; } .hero-highlight h2 { font-size: 1.25rem; margin-bottom: 0.5rem; } /* Список внутри hero-highlight (например "At a glance"): глобальный сброс убирает стандартный отступ маркеров списка, возвращаем небольшой отступ слева */ .hero-highlight ul { padding-left: 1.25rem; } .hero-highlight li + li { margin-top: 0.3rem; } /* Плашки статуса (например "Engine in production") под списком в hero-highlight: больше отступ сверху (отделить от списка), меньше снизу (не удваивать padding блока) */ .hero-highlight .tags { margin-top: 0.9rem; margin-bottom: 0; } /* Компактный "hero": визуальный вес заголовка страницы как в .hero-copy h1, но без второй колонки, иллюстрации и CTA-кнопок — для вводных блоков About Us / Latest News / Contact Us / Privacy Policy / Products */ section.page-intro { padding: 2.5rem 0 1.5rem; /* как в .hero */ } .page-intro h1 { font-size: 2.5rem; line-height: 1.15; margin-bottom: 0.5rem; } .page-intro .section-subtitle { font-size: 1.125rem; line-height: 1.6; max-width: 60ch; } /* Карточки */ .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card { background-color: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; /* Enterprise ощущение: лёгкая интерактивность без "игрушечности" */ transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease; } .card:hover { transform: translateY(-2px); border-color: var(--accent-line); } /* Заголовок карточки услуги: иконка + title в одну линию */ .card-head { display: flex; align-items: center; /* Центрируем заголовок по вертикали относительно иконки */ gap: 0.85rem; margin-bottom: 0.65rem; } /* Иконки в карточках услуг (enterprise) */ .card-icon { width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--border); background: var(--icon-bg); flex: 0 0 auto; } /* Когда h3 находится в .card-head — убираем лишние маргины */ .card-head h3 { margin: 0; font-size: 1.125rem; } /* Старый стиль h3 оставляем для остальных карточек, где нет .card-head */ .card h3 { margin: 0.5rem 0 0.5rem; font-size: 1.125rem; } /* Доп. пометка в заголовке карточки (например, "(acquired by Evolution)"): второй строкой, мельче и приглушённее основного названия. */ .card-note { display: block; margin-top: 0.15rem; font-size: 0.8rem; font-weight: 600; color: var(--accent-text); opacity: 0.85; } /* Список преимуществ */ .bullets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .bullet { background-color: var(--panel-2); border: 1px solid var(--hairline); border-radius: 14px; padding: 1rem; } .bullet h3 { margin-bottom: 0.5rem; } /* Steps (How we work) */ .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .step { background-color: var(--panel-2); border: 1px solid var(--hairline); border-radius: 14px; padding: 1rem; } .step-number { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-tint); border: 1px solid var(--accent-line); color: var(--accent-text); font-weight: 800; margin-bottom: 0.75rem; } /* CTA блок */ .cta { padding: 2.5rem 0; } .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 16px; padding: 1.5rem; } /* Подвал сайта */ .site-footer { margin-top: auto; padding: 1rem 2rem; text-align: center; background-color: var(--footer-bg); border-top: 1px solid var(--hairline); font-size: 0.875rem; } /* Базовый отступ для основного контента */ .site-main { padding: 0; /* Основные отступы задаём секциями, чтобы упростить вертикальный ритм */ } /* Элементы "персона" (карточки команды) */ .person { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; } /* Аватар-заглушка для карточек команды */ .avatar { width: 52px; /* Чуть крупнее для enterprise-впечатления */ height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-tint); border: 1px solid var(--accent-line); color: var(--accent-text); font-weight: 800; } /* Фото-аватар (если в team.json задано поле photo) */ .avatar-photo { /* Для img переопределяем flex-поведение, чтобы работал object-fit */ display: block; object-fit: cover; object-position: center; background: var(--icon-bg); } /* Social proof: логотипы клиентов на главной */ .trusted-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; } .trusted-logo { background: var(--panel-soft); border: 1px solid var(--border); border-radius: 14px; padding: 0.75rem; display: flex; align-items: center; justify-content: center; min-height: 78px; } .trusted-logo img { width: 100%; height: 42px; object-fit: contain; opacity: 0.9; } /* Теги (например, отрасли клиентов) */ .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; } .tag { padding: 0.35rem 0.6rem; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--border); font-size: 0.9rem; } /* Фильтры на странице новостей (пока без JS-логики) */ .filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .filter { padding: 0.45rem 0.75rem; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--border); color: var(--text); font-weight: 600; cursor: pointer; } .filter:hover { border-color: var(--accent-soft); color: var(--accent-text); } .filter.is-active { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-text); } /* Сетка новостей */ .news-grid { display: grid; grid-template-columns: 1fr; /* По референсу — листинг в одну колонку */ gap: 1rem; } /* Карточка новости: лэйаут "дата | thumb | текст" */ .news-row { display: grid; grid-template-columns: 92px 200px 1fr; gap: 1rem; align-items: start; } /* Без thumb-колонки (категории отключены и нет обложки, см. NEWS_SHOW_CATEGORIES в main.js): текст занимает место thumb-колонки вместо пустого пробела */ .news-row.news-row-no-thumb { grid-template-columns: 92px 1fr; } /* Дата слева (плашка) */ .news-date { background: var(--panel-soft); border: 1px solid var(--border); border-radius: 14px; padding: 0.75rem 0.65rem; text-align: center; } .news-date-day { font-size: 1.6rem; font-weight: 900; line-height: 1; } .news-date-month-year { margin-top: 0.25rem; font-size: 0.85rem; opacity: 0.8; } /* Thumb по центру: "пятно" категории + (опционально) обложка поверх */ .news-thumb { position: relative; width: 200px; height: 140px; border-radius: 16px; /* Контейнер может оставаться с лёгкой рамкой — сами blob-иконки без контура */ background: var(--panel-3); border: 1px solid var(--border); overflow: hidden; } /* Базовый слой — всегда blob категории (без контура/текста) */ .news-thumb-icon { position: absolute; inset: -14px; /* Делаем blob визуально крупнее */ width: calc(100% + 28px); height: calc(100% + 28px); object-fit: cover; opacity: 0.95; transform: rotate(-6deg); } /* Текст категории поверх blob (показываем, когда у новости нет картинки) */ .news-thumb-label { position: absolute; left: 14px; bottom: 14px; /* Плашка-лейбл как в enterprise карточках */ display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.35rem 0.6rem; border-radius: 999px; background: var(--panel-soft); border: 1px solid var(--border); font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.72rem; color: var(--label-text); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.30); pointer-events: none; } /* Обложка (если задано поле image) кладётся поверх, но НЕ перекрывает blob полностью */ .news-thumb-image { position: absolute; inset: 18px; /* Оставляем больше "краёв" blob вокруг изображения */ width: calc(100% - 36px); height: calc(100% - 36px); object-fit: cover; border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 8px 18px var(--shadow); } /* Когда есть картинка — делаем blob более фоновым */ .news-card.has-image .news-thumb-icon { opacity: 0.55; transform: rotate(-6deg) scale(1.02); } /* Когда есть картинка — метку категории скрываем (если она есть, например при fallback) */ .news-card.has-image .news-thumb-label { display: none; } /* Текстовый блок справа */ .news-body h2 { font-size: 1.25rem; margin: 0.1rem 0 0.5rem; } .news-body p { margin: 0; } /* Кликабельная новость (есть url): вся карточка ведёт по ссылке */ .news-card.is-link { cursor: pointer; } /* Заголовок-ссылка: наследует цвет, подчёркивается/акцентируется при наведении */ .news-body h2 a { color: inherit; text-decoration: none; } .news-card.is-link:hover .news-body h2 a, .news-body h2 a:hover { color: var(--accent-text); text-decoration: underline; } /* Встроенный CTA блок внутри секции */ .cta-inline { background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 16px; padding: 1.5rem; } /* Contact page layout */ .contact-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 1rem; align-items: start; } /* Поля формы */ .field { margin-top: 0.9rem; } /* Сообщения статуса формы (успех/ошибка) */ .form-result { margin-top: 0.9rem; padding: 0.75rem 0.85rem; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); min-height: 44px; /* Чтобы блок не прыгал при появлении текста */ } .form-result.is-success { border-color: var(--accent-soft); background: var(--accent-tint); } .form-result.is-error { border-color: var(--err-line); background: var(--err-bg); } .field label { display: block; font-weight: 700; margin-bottom: 0.35rem; } .field input, .field select, .field textarea { width: 100%; padding: 0.75rem 0.85rem; border-radius: 12px; background: var(--field-bg); border: 1px solid var(--border); color: var(--text); outline: none; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-tint); } .field textarea { resize: vertical; } /* Чекбокс */ .field.checkbox { display: flex; gap: 0.6rem; align-items: flex-start; } .field.checkbox input { width: 18px; height: 18px; margin-top: 0.2rem; } .field.checkbox label { font-weight: 600; margin: 0; } /* Список контактов */ .details { list-style: none; margin-top: 1rem; } .details li { margin-top: 0.75rem; } .details a { color: var(--accent-text); text-decoration: none; font-weight: 700; } .details a:hover { text-decoration: underline; } /* Ссылка на Privacy Policy в чекбоксе формы: приглушённый цвет, без изменений после посещения */ .card .field.checkbox a, .card .field.checkbox a:visited, .card .field.checkbox a:link { color: var(--text-muted); text-decoration: underline; } .card .field.checkbox a:hover { color: var(--text-muted-strong); text-decoration: underline; } /* Списки внутри карточек: отступ, чтобы маркеры не выходили за границы */ .card ul { padding-left: 2rem; } /* Ссылки на странице Privacy Policy — фирменный акцентный цвет */ .card a, .card a:visited, .card a:link { color: var(--accent-text); text-decoration: none; } .card a:hover { text-decoration: underline; } /* Кнопки (.btn) внутри карточек не должны наследовать акцентный цвет текста ссылок выше — сохраняем обычные цвета .btn-primary/.btn-secondary */ .card a.btn-primary, .card a.btn-primary:visited, .card a.btn-primary:link { color: var(--accent-ink); } .card a.btn-secondary, .card a.btn-secondary:visited, .card a.btn-secondary:link { color: var(--text); } .card a.btn:hover { text-decoration: none; } /* Вертикальный отступ-разделитель */ .spacer { height: 1.25rem; } /* Карточки продуктов: прижимаем CTA-кнопку к нижнему краю карточки, даже если описание в соседней карточке длиннее (карточки уже одной высоты за счёт grid stretch) */ .card-product { display: flex; flex-direction: column; } /* Без этого flex-контейнер растягивает кнопку на всю ширину карточки (align-items: stretch по умолчанию) */ .card-product .btn { align-self: flex-start; } .card-product .spacer { margin-top: auto; } /* Адаптивность */ @media (max-width: 900px) { .container { padding: 0 1rem; /* Более компактные отступы на мобильных */ } .site-header { padding: 0.5rem 1rem; /* Сжимаем хедер на мобильных */ } /* Мобильное меню: показываем бургер и скрываем nav по умолчанию */ .nav-toggle { display: inline-flex; } .main-nav { display: none; width: 100%; } /* Когда пользователь открыл меню — показываем nav */ body.nav-open .main-nav { display: block; } .main-nav ul { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding-top: 0.75rem; } /* На мобильных подменю открываем только кнопкой .submenu-toggle */ .submenu-toggle { display: inline-flex; align-items: center; justify-content: center; } .has-submenu { width: 100%; justify-content: space-between; } .main-nav ul.submenu { position: static; border: none; background: transparent; padding: 0.25rem 0 0.25rem 1rem; min-width: auto; display: none; } /* Отключаем hover-раскрытие подменю на мобильных */ .has-submenu:hover .submenu { display: none; } /* Раскрываем подменю по классу, который ставит JS */ .has-submenu.submenu-open > .submenu { display: flex; } .hero-grid { grid-template-columns: 1fr; } .cards { grid-template-columns: 1fr; /* На мобильных все карточки в один столбец */ } .cards-3 { grid-template-columns: 1fr; } /* На мобильных логотипы показываем сеткой 2xN, чтобы не сжимать до нечитаемости */ .trusted-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bullets { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; /* На мобильных шаги тоже в один столбец */ } .news-grid { grid-template-columns: 1fr; /* На мобильных новости в один столбец */ } /* На мобильных лэйаут новостей делаем вертикальным (дата → thumb → текст) */ .news-row { grid-template-columns: 1fr; } /* Специфичность .news-row-no-thumb (2 класса) выше, чем у .news-row выше — без этого override на мобильных no-thumb карточки остались бы в 2 колонки */ .news-row.news-row-no-thumb { grid-template-columns: 1fr; } .news-date { display: flex; align-items: baseline; justify-content: flex-start; gap: 0.5rem; text-align: left; } /* baseline-выравнивание уже опускает "Jun 2026" к нижней линии цифры дня; десктопный margin-top (для столбика) в строке не нужен */ .news-date-month-year { margin-top: 0; } .news-thumb { width: 100%; height: 180px; } .news-thumb-image { inset: 20px; width: calc(100% - 40px); height: calc(100% - 40px); } .contact-grid { grid-template-columns: 1fr; /* На мобильных форма и контакты в один столбец */ } .cta-inner { flex-direction: column; align-items: flex-start; } }