/* ========================================================================== ДИЗАЙН-СИСТЕМА ========================================================================== ЕДИНСТВЕННОЕ МЕСТО, ГДЕ ЗАДАНЫ ЦВЕТА, ШРИФТЫ, РАДИУСЫ И ОТСТУПЫ. Поменять фирменный синий — поменять --navy здесь. Он изменится в шапке, кнопках, тёмных секциях и на всех девяти страницах сразу. Ни в одном другом файле цвета не прописаны напрямую. Значения перенесены из макета один в один. ========================================================================== */ :root { /* --- Основная палитра -------------------------------------------------- */ --navy: #0A2C56; /* фирменный синий: шапка, кнопки, тёмные секции */ --navy-deep: #061F3E; /* футер и верхняя строка */ --navy-menu: #072544; /* панель мобильного меню */ --blue-hover: #124A85; /* синий при наведении */ --accent: #2F6FD0; /* акцент, иконки */ --accent-soft: #7FAEF0; /* иконки на тёмном фоне */ --accent-light: #9FC5F5; /* иконки в плашках на тёмном */ /* --- Фоны -------------------------------------------------------------- */ --bg: #FFFFFF; /* белые секции */ --bg-soft: #F5F8FC; /* светло-серые секции через одну */ --bg-cta: #EAF1F9; /* блок призыва к действию */ --bg-icon: #EDF2F8; /* подложка иконок и заглушек фото */ --bg-icon-blue: #E8F0FC; /* подложка иконок с акцентом */ --bg-avatar: #E6EDF7; /* кружок с инициалами */ --bg-green: #E3F6EA; /* подложка иконки WhatsApp */ /* --- Линии и границы ---------------------------------------------------- */ --line: #E4EBF3; /* основная граница карточек */ --line-strong: #DCE5F0; /* граница кнопок-ссылок */ --line-soft: #EDF2F8; /* тонкий разделитель внутри карточек */ --line-input: #C6D4E6; /* граница полей ввода */ --line-input-2: #C7D4E4; /* граница полей на странице услуги */ --line-field: #D3DEEC; /* подчёркивание полей в форме */ --line-avatar: #D4E0EE; --line-card: #C3D5EC; /* граница карточки при наведении */ /* --- Текст на светлом --------------------------------------------------- */ --text: #0A2C56; /* заголовки и основной текст */ --text-body: #26405F; /* текст отзывов */ --text-muted: #5C6B84; /* вторичный текст */ --text-muted-2: #566885; /* подписи под заголовками */ --text-muted-3: #55637A; /* лиды в секциях */ --text-muted-4: #41526B; /* текст в фильтрах */ --text-muted-5: #33445E; /* города */ --text-dim: #8494AE; /* надзаголовки, даты */ --text-label: #8492AB; /* подписи полей формы */ --text-slot: #9FB1C8; /* текст в заглушках фото */ --text-placeholder: #9AA7BB; /* --- Текст на тёмном ---------------------------------------------------- */ --on-dark: #FFFFFF; --on-dark-lead: #B7C3D6; /* лид в тёмной шапке */ --on-dark-body: #A9B6CB; /* текст в тёмных карточках */ --on-dark-link: #C3CEDF; /* ссылки футера */ --on-dark-text: #A3B0C6; /* описание компании в футере */ --on-dark-nav: #D5DEEC; /* пункты меню в шапке */ --on-dark-dim: #7E8DA6; /* подписи на тёмном */ --on-dark-dim-2: #5D6C87; /* заголовки колонок футера */ --on-dark-bright: #E4EAF3; /* акцентный текст верхней строки */ --on-dark-slot: #6F81A0; /* подпись на месте фотографии, на тёмном */ /* --- Полупрозрачные слои на тёмном -------------------------------------- */ --glass: rgba(255, 255, 255, 0.07); --glass-2: rgba(255, 255, 255, 0.08); --glass-hover: rgba(255, 255, 255, 0.13); --glass-hover-2: rgba(255, 255, 255, 0.15); --glass-line: rgba(255, 255, 255, 0.14); --glass-line-2: rgba(255, 255, 255, 0.18); --glass-line-3: rgba(255, 255, 255, 0.10); --glass-card: rgba(255, 255, 255, 0.05); --glass-photo: rgba(255, 255, 255, 0.04); /* место под фото в тёмной карточке */ --glass-badge: rgba(10, 44, 86, 0.82); --logo-line: rgba(10, 44, 86, 0.40); /* --- Статусы и акценты --------------------------------------------------- */ --green: #1E8A5A; /* цены и подтверждения */ --green-hover: #19764C; /* он же при наведении */ --green-price: #1E8A4E; /* цены в составе работ */ --green-shield: #1E6B3A; /* замок «данные защищены» */ --green-wa-text: #7BE6A6; /* подпись WhatsApp в меню */ --whatsapp: #25D366; --whatsapp-hover: #1EBA57; --telegram: #229ED9; --telegram-hover: #1B8CC0; --mailru: #005FF9; /* фирменный синий Mail.Ru */ --max-blue: #2F6FD0; --max-blue-hover: #1A6BE6; --star: #D9A441; /* залитая звезда */ --star-off: #C7D4E4; /* пустая звезда */ /* --- Шрифты -------------------------------------------------------------- */ --font-head: 'Geologica', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; /* --- Радиусы ------------------------------------------------------------- */ --r-xs: 7px; --r-sm: 8px; --r: 10px; --r-11: 11px; --r-md: 12px; --r-lg: 14px; --r-xl: 16px; --r-2xl: 20px; --r-pill: 999px; /* --- Ритм страницы ------------------------------------------------------- */ /* Отступы «резиновые»: растут вместе с шириной экрана и упираются в максимум — ровно как было в макете (там это называлось cqw). */ --pad-x: clamp(16px, 4vw, 64px); /* поля секции по бокам */ --pad-y: clamp(40px, 5vw, 84px); /* поля секции сверху и снизу */ --pad-head: clamp(14px, 2vw, 22px); /* шапка */ --gap-head: clamp(24px, 3vw, 38px); /* отступ под заголовком секции */ --gap-grid: clamp(14px, 1.6vw, 24px); /* между карточками */ --gap-grid-s: clamp(12px, 1.4vw, 20px); /* между мелкими карточками */ --pad-card: clamp(16px, 1.7vw, 24px); /* внутри карточки */ /* Максимальная ширина содержимого. 1325px — это ровно та ширина, что была внутри макета на 1440. Фоны секций при этом тянутся на всю ширину экрана. */ --wrap: 1325px; /* --- Тени ---------------------------------------------------------------- */ --shadow-card: 0 16px 36px -24px rgba(10, 44, 86, 0.40); --shadow-post: 0 18px 40px -24px rgba(10, 44, 86, 0.40); --shadow-form: 0 24px 60px -30px rgba(3, 12, 26, 0.60); --shadow-form-2: 0 26px 64px -22px rgba(6, 14, 28, 0.65); --shadow-btn: 0 10px 22px -12px rgba(10, 44, 86, 0.85); --shadow-float: 0 10px 26px -8px rgba(6, 14, 28, 0.55); /* --- Прочее -------------------------------------------------------------- */ --tap: 44px; /* минимальная высота кликабельного элемента */ --tap-mobile: 48px; /* то же на телефоне */ --stripes: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0 14px, transparent 14px 28px); --ease: 0.18s ease; } /* ========================================================================== КОНТРОЛЬНЫЕ ТОЧКИ ========================================================================== В макете было четыре кнопки-пресета. Здесь — обычные медиазапросы: до 640px телефон (в макете «390») 641–1079px планшет (в макете «834») от 1080px компьютер (в макете «1280» и «1440») Эти же числа используются во всех остальных файлах стилей. ========================================================================== */ /* -------------------------------------------------------------------------- ШИРОКИЕ ЭКРАНЫ -------------------------------------------------------------------------- 1325px — это ширина содержимого в макете на 1440. На мониторе 1920 она оставляет по краям почти по 470px пустоты сверх полей секции: страница выглядит узкой колонкой посреди экрана, а карточки в ней — мелкими. Поэтому выше 1600px содержимому даём расти дальше. Не до края экрана: строка длиной во весь монитор читается плохо, и заголовок секции уезжал бы от текста под ним. Останавливаемся на 1560px. Ниже 1600px ничего не меняется — там всё как было. -------------------------------------------------------------------------- */ @media (min-width: 1600px) { :root { --wrap: 1440px; } } @media (min-width: 1880px) { :root { --wrap: 1560px; } }