/* ============================================================ COXO B2B · ВАРИАНТ Б главной — тёмная презентационная тема Настроение — DTW Networks: тёмная база, крупная типографика, пилюли-кнопки, карточки со скруглениями, логолента, маршрут. Цвета — строго брендбук СОХО: фуксия #E2007D → точки и метки голубой #1C9DFF → акцентные слова, кнопки, иконки апельсин #E96227 → вторичные акценты Подключается ВТОРЫМ, после style.css. Все правила живут в области .mb-page (класс на ) — style.css и другие страницы не затрагиваются. ============================================================ */ .mb-page { --mb-bg: #0A0E15; /* базовый тёмный */ --mb-bg-alt: #0D1320; /* чередующиеся секции */ --mb-card: #121A2A; /* карточки */ --mb-card2: #0F1624; /* карточки, второй тон */ --mb-line: rgba(255,255,255,.09); --mb-line-soft: rgba(255,255,255,.06); --mb-text: #A9B6C9; /* основной текст — 8,9:1 на --mb-bg */ --mb-soft: #7E8CA1; /* вторичный — 5,2:1 на --mb-bg */ --mb-white: #F4F8FD; --mb-blue: #1C9DFF; /* акценты: слова, кнопки, иконки */ --mb-pink: #E2007D; /* точки и метки */ --mb-orange: #E96227; /* вторичные акценты */ --mb-ondark-blue: #062032; /* текст на голубых пилюлях — 8,5:1 */ --mb-radius: 22px; background: var(--mb-bg); color: var(--mb-text); font-weight: 400; /* без Thin/ExtraLight: текст Regular/Medium */ } /* Шире стандартного wrap: 1360–1440px, комфортные отступы */ .mb-page .wrap { max-width: 1400px; padding: 0 32px; } .mb-page ::selection { background: rgba(28,157,255,.35); } /* ---------- Шапка в тёмной теме ---------- */ .mb-page .sitehead.is-stuck .headbar { background: rgba(10,14,21,.85); } .mb-page .sitehead.is-stuck .navbar { background: rgba(10,14,21,.85); box-shadow: 0 8px 24px rgba(0,0,0,.45); } .mb-page .topbar { background: #070A10; color: var(--mb-soft); } .mb-page .topbar a { color: var(--mb-soft); } .mb-page .topbar a:hover { color: var(--mb-white); } .mb-page .btn-partner { background: var(--mb-orange); color: #1D0E02 !important; } .mb-page .btn-partner:hover { background: #F07B2E; } .mb-page .headbar { background: var(--mb-bg); border-bottom: 1px solid var(--mb-line-soft); } .mb-page .logo { color: var(--mb-white); } .mb-page .logo .b2b { background: var(--mb-blue); color: var(--mb-ondark-blue); } .mb-page .search input { background: #101724; border-color: rgba(255,255,255,.16); color: var(--mb-white); } .mb-page .search input::placeholder { color: var(--mb-soft); } .mb-page .search input:focus { border-color: var(--mb-blue); box-shadow: 0 0 0 3px rgba(28,157,255,.25); } .mb-page .search button { background: var(--mb-orange); color: #1D0E02; } .mb-page .search button:hover { background: #F07B2E; } .mb-page .head-phone a { color: var(--mb-white); } .mb-page .head-phone a:hover { color: var(--mb-blue); } .mb-page .head-callback a { color: var(--mb-blue); } .mb-page .head-hours { color: var(--mb-soft); } .mb-page .navbar { background: var(--mb-bg); border-bottom: 1px solid var(--mb-line-soft); } .mb-page .nav a { color: var(--mb-text); } .mb-page .nav a:hover { color: var(--mb-blue); } .mb-page .nav a.active { color: var(--mb-white); } .mb-page .btn-cat { background: var(--mb-blue); color: var(--mb-ondark-blue) !important; border-radius: 999px; } .mb-page .btn-cat:hover { background: #4FAEFF; } .mb-page .burger { background: #101724; border-color: var(--mb-line); color: var(--mb-white); } /* ---------- Кнопки-пилюли ---------- */ .mb-page .btn { border-radius: 999px; padding: 15px 30px; font-size: 15px; font-weight: 700; transition: var(--tr); } .mb-page .btn.accent { background: var(--mb-blue); color: var(--mb-ondark-blue) !important; box-shadow: 0 8px 26px rgba(28,157,255,.30); } .mb-page .btn.accent:hover { background: #4FAEFF; box-shadow: 0 10px 32px rgba(28,157,255,.45); } .mb-page .btn.ghost-light { background: transparent; color: var(--mb-white) !important; border: 1.5px solid rgba(255,255,255,.35); } .mb-page .btn.ghost-light:hover { border-color: var(--mb-white); background: rgba(255,255,255,.08); color: var(--mb-white) !important; } /* ---------- Секции и ритм ---------- */ .mb-sec { position: relative; padding: clamp(20px, 2.1vw, 32px) 0; background: var(--mb-bg); color: var(--mb-text); } .mb-sec--alt { background: var(--mb-bg-alt); } .mb-sec > .wrap { position: relative; z-index: 2; } section[id] { scroll-margin-top: 130px; } /* Кикер: метка с малиновой точкой */ .mb-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mb-soft); margin: 0 0 16px; } .mb-kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mb-pink); } /* Точки/метки — малиновые */ .mb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mb-pink); flex: none; } .mb-dot--blue { background: var(--mb-blue); } .mb-dot--orange { background: var(--mb-orange); } /* Заголовки: очень крупные, SemiBold/ExtraBold, акцентные слова цветом; внутри одного заголовка смешиваем насыщенность (жирное + лёгкое). */ .mb-h2 { font-size: clamp(1.8rem, 2.9vw, 2.5rem); font-weight: 800; line-height: 1.14; color: var(--mb-white); margin: 0 0 14px; letter-spacing: -.02em; /* Ширину НЕ ограничиваем: при контейнере 1336 px и кегле 2,5rem в строку входит ~66 знаков, и заголовок укладывается в одну-две строки вместо четырёх. Ограничение остаётся только там, где рядом стоит ссылка «все …» — см. .mb-sec-head .mb-h2 (замечание владельца 04.09.2026). */ max-width: none; } .mb-h2--sm { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 700; margin-bottom: 20px; } .mb-acc-blue { color: var(--mb-blue); font-weight: 600; } .mb-acc-pink { color: var(--mb-pink); font-weight: 600; } .mb-acc-orange { color: var(--mb-orange); font-weight: 600; } /* Лид: 62ch давали лишний перенос и пустоту справа, «во всю ширину» — нечитаемо длинную строку. 78ch — компромисс: на строку меньше, мера ещё комфортная. */ .mb-lead { font-size: clamp(15.5px, 1.3vw, 18px); color: var(--mb-soft); margin: 0 0 22px; max-width: 78ch; } /* Шапка секции с ссылкой «все …» справа */ .mb-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 26px; margin-bottom: 16px; flex-wrap: wrap; } /* Заголовок тянется, ссылка «все …» прижата вправо: иначе между ними зияло пустое поле в половину экрана (замечание владельца 04.09.2026). */ .mb-sec-head .mb-h2 { flex: 1 1 auto; max-width: 44ch; } .mb-sec-head .mb-h2 { margin-bottom: 0; } .mb-all { font-size: 15px; font-weight: 700; color: var(--mb-blue); white-space: nowrap; border-bottom: 1px solid rgba(28,157,255,.4); padding-bottom: 2px; } .mb-all:hover { color: var(--mb-white); border-color: var(--mb-white); text-decoration: none; } /* ---------- 01 · Первый экран ---------- */ .mb-hero { padding: clamp(26px, 2.8vw, 42px) 0 clamp(22px, 2.2vw, 32px); background: radial-gradient(900px 520px at 78% 8%, rgba(28,157,255,.16), transparent 65%), radial-gradient(700px 460px at 8% 92%, rgba(226,0,125,.07), transparent 60%), var(--mb-bg); } .mb-hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(32px, 4vw, 72px); align-items: center; } .mb-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; font-size: 13px; font-weight: 500; color: var(--mb-text); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 18px; } .mb-eyebrow img { height: 15px; width: auto; } .mb-h1 { font-size: clamp(2.35rem, 4.4vw, 4.1rem); line-height: 1.06; font-weight: 800; color: var(--mb-white); margin: 0 0 24px; letter-spacing: -.025em; max-width: 17ch; } .mb-h1-soft { display: block; color: var(--mb-blue); font-weight: 500; letter-spacing: -.01em; } .mb-hero-lead { font-size: clamp(16px, 1.4vw, 19.5px); line-height: 1.6; color: var(--mb-text); margin: 0 0 24px; max-width: 54ch; } .mb-cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; } /* Сцена с одним крупным фото реального оборудования */ .mb-stage { position: relative; margin: 0; background: radial-gradient(70% 60% at 50% 42%, #FFFFFF 0%, #E9F1FA 58%, #D5E2F1 100%); border-radius: 30px; padding: clamp(30px, 3.4vw, 54px); box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.10), 0 0 90px rgba(28,157,255,.16); } .mb-stage-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 34px rgba(10,20,40,.35)); } .mb-chip { position: absolute; display: inline-flex; align-items: center; gap: 9px; background: rgba(10,15,24,.92); color: var(--mb-white); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-size: 13px; font-weight: 500; padding: 9px 16px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 26px rgba(0,0,0,.4); } .mb-chip--tl { top: 22px; left: -18px; } .mb-chip--br { bottom: 24px; right: -18px; } /* Плашка подтверждённых цифр */ .mb-figs { /* три показателя: оборот, поставщики, позиции в каталоге (10.09.2026 — плитка доли госсектора убрана, см. комментарий в index.html) */ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(24px, 2.6vw, 38px); border-top: 1px solid var(--mb-line); } .mb-fig { padding: 26px 26px 4px 0; } .mb-fig + .mb-fig { border-left: 1px solid var(--mb-line-soft); padding-left: 26px; } .mb-fig .n { font-size: clamp(26px, 2.6vw, 40px); font-weight: 800; line-height: 1.05; color: var(--mb-white); letter-spacing: -.02em; } .mb-fig .l { font-size: 13.5px; color: var(--mb-soft); margin-top: 8px; max-width: 24ch; } /* ---------- 02 · Кто мы: типографика + четыре опоры без карточек ---------- */ /* Число активных клиентов: одна проверяемая цифра под тезисом «кто мы». Крупная — но не плакатом: рядом стоят четыре опоры блока, и цифра не должна их перебивать. */ .mb-clients { margin: clamp(14px, 1.6vw, 22px) 0 0; font-size: clamp(15px, 1.15vw, 17px); color: var(--mb-text); line-height: 1.5; } .mb-clients b { font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; color: var(--mb-white); letter-spacing: -.02em; margin-right: 10px; } .mb-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 32px); margin-top: clamp(18px, 2vw, 28px); } .mb-who-item { border-top: 2px solid rgba(28,157,255,.35); padding-top: 20px; } .mb-who-item h3 { display: flex; align-items: baseline; gap: 10px; font-size: 16.5px; font-weight: 700; color: var(--mb-white); margin: 0 0 10px; line-height: 1.35; } .mb-who-item h3 .mb-dot { transform: translateY(-1px); } .mb-who-item p { font-size: 14.5px; color: var(--mb-text); margin: 0; line-height: 1.55; } /* ---------- 03 · Задачи: крупные кликабельные карточки ---------- */ .mb-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .mb-scene { position: relative; display: flex; flex-direction: column; background: linear-gradient(165deg, var(--mb-card) 0%, var(--mb-card2) 100%); border: 1px solid var(--mb-line); border-radius: var(--mb-radius); padding: 26px 26px 24px; min-height: 218px; color: var(--mb-text); text-decoration: none; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .mb-scene:hover { transform: translateY(-4px); border-color: rgba(28,157,255,.55); box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(28,157,255,.25); text-decoration: none; } .mb-scene-num { font-size: 15px; font-weight: 800; letter-spacing: .08em; color: var(--mb-blue); font-variant-numeric: tabular-nums; margin-bottom: auto; } .mb-scene-arrow { position: absolute; top: 20px; right: 20px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); color: var(--mb-white); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: var(--tr); } .mb-scene:hover .mb-scene-arrow { background: var(--mb-blue); border-color: var(--mb-blue); color: var(--mb-ondark-blue); } .mb-scene h3 { font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; color: var(--mb-white); margin: 26px 0 8px; line-height: 1.3; } .mb-scene p { font-size: 14px; color: var(--mb-soft); margin: 0; line-height: 1.55; } /* Мостик «не знаю, что нужно» */ .mb-bridge { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center; background: linear-gradient(90deg, rgba(28,157,255,.14), rgba(226,0,125,.08)); border: 1px solid rgba(28,157,255,.28); border-radius: var(--mb-radius); padding: clamp(24px, 2.8vw, 36px) clamp(24px, 3vw, 40px); } .mb-bridge h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: var(--mb-white); margin: 0 0 8px; font-weight: 700; } .mb-bridge p { margin: 0; color: var(--mb-text); font-size: 15px; max-width: 68ch; } /* ---------- 04 · Категории: плитки с реальным фото товара ---------- */ .mb-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .mb-cat { display: flex; flex-direction: column; gap: 14px; background: var(--mb-card); border: 1px solid var(--mb-line); border-radius: 18px; padding: 14px; text-decoration: none; transition: var(--tr); } .mb-cat:hover { border-color: rgba(28,157,255,.55); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.4); text-decoration: none; } .mb-cat-ph { background: linear-gradient(160deg, #F7FAFE, #DFE9F4); border-radius: 12px; height: 118px; display: flex; align-items: center; justify-content: center; padding: 12px; } .mb-cat-ph img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .mb-cat-name { font-size: 15px; font-weight: 700; color: var(--mb-white); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 4px; } .mb-cat-name::after { content: '→'; color: var(--mb-blue); font-weight: 700; } /* ---------- 05 · Полка ходовых позиций ---------- */ .mb-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .mb-pcard { display: flex; flex-direction: column; background: var(--mb-card); border: 1px solid var(--mb-line); border-radius: 18px; padding: 16px; transition: var(--tr); } .mb-pcard:hover { border-color: rgba(28,157,255,.45); box-shadow: 0 14px 34px rgba(0,0,0,.4); } .mb-pcard-ph { display: block; background: linear-gradient(160deg, #F7FAFE, #E3ECF6); border-radius: 12px; height: 150px; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; padding: 14px; } .mb-pcard-ph img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .mb-pcard-name { font-size: 14.5px; font-weight: 600; color: var(--mb-white); line-height: 1.4; margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mb-pcard-name:hover { color: var(--mb-blue); text-decoration: none; } .mb-pcard-meta { font-size: 12px; color: var(--mb-soft); margin: 0 0 10px; font-variant-numeric: tabular-nums; } .mb-pcard-avail { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mb-text); margin: 0 0 10px; } .mb-pcard-avail .mb-dot--blue { width: 7px; height: 7px; } .mb-pcard-avail .mb-dot--orange { width: 7px; height: 7px; } .mb-pcard-price { display: flex; align-items: baseline; gap: 8px; margin: auto 0 12px; } .mb-pcard-price .pprice { font-size: 19px; font-weight: 800; color: var(--mb-white); letter-spacing: -.01em; } .mb-pcard-price small { font-size: 11.5px; color: var(--mb-soft); } .mb-page .mb-pcard .btn-card { border-radius: 999px; border: 1.5px solid var(--mb-blue); background: transparent; color: var(--mb-blue); font-size: 13.5px; padding: 10px 14px; } .mb-page .mb-pcard .btn-card:hover { background: var(--mb-blue); color: var(--mb-ondark-blue); } /* ---------- 06 · Проекты: асимметричная сетка ---------- */ .mb-cases { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px; } .mb-case { display: flex; flex-direction: column; background: var(--mb-card); border: 1px solid var(--mb-line); border-radius: var(--mb-radius); overflow: hidden; transition: var(--tr); } .mb-case:hover { border-color: rgba(255,255,255,.22); box-shadow: 0 16px 40px rgba(0,0,0,.45); } .mb-case--lead { grid-row: 1 / 3; } .mb-case--lead .mb-ph2 { flex: 1.6; min-height: 340px; } /* Тёмный плейсхолдер под фото объекта — не серая заглушка */ .mb-ph2 { position: relative; margin: 0; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 16px), radial-gradient(120% 130% at 20% 0%, #14233C 0%, #0D1424 60%, #0A101D 100%); border-bottom: 1px solid var(--mb-line); color: rgba(255,255,255,.45); } .mb-ph2 svg { width: 40px; height: 40px; } .mb-ph2 figcaption { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); } .mb-case-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .mb-case-body h3 { font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; color: var(--mb-white); margin: 0; line-height: 1.3; } .mb-case-task { font-size: 14px; color: var(--mb-soft); margin: 0; line-height: 1.55; } .mb-case-num { font-size: clamp(2.2rem, 3.4vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; color: var(--mb-white); line-height: 1.05; margin-top: 6px; } .mb-case--lead .mb-case-num { font-size: clamp(2.8rem, 4.6vw, 4.4rem); } .mb-case-chips { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--mb-text); } .mb-case-chips span { display: inline-flex; align-items: center; gap: 8px; } .mb-case-body .mb-more { margin-top: auto; padding-top: 12px; font-weight: 700; font-size: 14px; color: var(--mb-blue); } .mb-case-body .mb-more:hover { color: var(--mb-white); text-decoration: none; } .mb-note-line { margin: 22px 0 0; font-size: 13.5px; color: var(--mb-soft); } .mb-note-line a { color: var(--mb-blue); } /* ---------- 07 · Бренды: чистая marquee-лента ---------- */ .mb-brands { padding: clamp(26px, 2.8vw, 42px) 0; } .mb-page .brand-strip::before { background: linear-gradient(90deg, var(--mb-bg-alt), transparent); width: 110px; } .mb-page .brand-strip::after { background: linear-gradient(-90deg, var(--mb-bg-alt), transparent); width: 110px; } .mb-page .mb-logos { gap: 0; } .mb-logo { display: flex; align-items: center; justify-content: center; padding: 20px 34px; margin-right: 26px; text-decoration: none; } .mb-logo img { height: 30px; width: auto; max-width: 130px; object-fit: contain; display: block; /* Тёмный фон: любой логотип приводим к белому силуэту — один визуальный вес */ filter: brightness(0) invert(1); opacity: .72; transition: var(--tr); } .mb-logo:hover img { opacity: 1; } .mb-page .brand-pause { background: transparent; border-color: rgba(255,255,255,.25); color: var(--mb-text); } .mb-page .brand-pause:hover { border-color: var(--mb-blue); color: var(--mb-blue); } /* ---------- 08 · Как мы работаем: маршрут ---------- */ .mb-route { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); margin: clamp(18px, 2vw, 28px) 0 0; padding: 0; list-style: none; } .mb-route::before { content: ''; position: absolute; top: 7px; left: 3%; right: 3%; border-top: 2px dashed rgba(255,255,255,.16); } .mb-route-step { position: relative; padding-top: 30px; } .mb-route-step::before { content: ''; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--mb-bg); border: 3px solid var(--mb-pink); } .mb-route-step:nth-child(even)::before { border-color: var(--mb-blue); } .mb-route-step .n { font-size: clamp(2.6rem, 4.2vw, 4rem); font-weight: 800; line-height: 1; color: var(--mb-white); letter-spacing: -.03em; margin-bottom: 12px; } .mb-route-step:first-child .n { color: var(--mb-blue); } .mb-route-step h3 { font-size: 17px; font-weight: 700; color: var(--mb-white); margin: 0 0 8px; } .mb-route-step p { font-size: 13.5px; color: var(--mb-soft); margin: 0; line-height: 1.55; max-width: 26ch; } /* ---------- 09 · Как начать ---------- */ .mb-start { background: radial-gradient(820px 480px at 12% 0%, rgba(28,157,255,.12), transparent 60%), var(--mb-bg-alt); } /* Блок «Как начать» разложен горизонтально (замечание владельца 04.09.2026): раньше слева стояла короткая колонка текста, справа — узкая длинная форма, и слева оставалась пустота во весь блок. Теперь шапка и контакты идут строкой сверху, форма — на всю ширину под ними. */ /* Двухколоночная раскладка осталась ТОЛЬКО ради архивного варианта главной (private/_archive/variants_homepage/index-b.html): он хранится для сравнения дизайнов и должен рендериться как раньше. На боевой главной класс больше не используется — блок «Как начать» разложен горизонтально (04.09.2026). */ .mb-start-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(28px, 4vw, 72px); align-items: start; } .mb-start-head { margin-bottom: clamp(18px, 2vw, 28px); } .mb-start-head .mb-lead { margin-bottom: 18px; } /* Контакты — в строку: четыре колонки вместо вертикального списка. */ .mb-contacts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px clamp(20px, 2.4vw, 34px); } .mb-contacts li { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: baseline; gap: 6px 12px; border-top: 1px solid var(--mb-line-soft); padding-top: 12px; } .mb-contacts .mb-dot { transform: translateY(-1px); } .mb-contacts a { font-size: 17px; font-weight: 700; color: var(--mb-white); } .mb-contacts a:hover { color: var(--mb-blue); text-decoration: none; } /* Подпись уходит во вторую строку своей ячейки, а не в третью колонку */ .mb-contacts li > span { grid-column: 2; font-size: 13.5px; color: var(--mb-soft); line-height: 1.45; } .mb-addr { font-size: 13.5px; color: var(--mb-soft); margin: 0; max-width: none; } /* Форма во всю ширину: три коротких поля в ряд, согласие и кнопка — в строку. */ .mb-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 clamp(16px, 2vw, 28px); } .mb-field { min-width: 0; } .mb-field .hint { margin-top: 6px; } .mb-form-send { display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 2.4vw, 32px); flex-wrap: wrap; margin-top: 6px; } .mb-form-send .consent { margin: 0; flex: 1 1 420px; } .mb-form-send .btn { flex: 0 0 auto; } /* Форма в тёмной теме */ .mb-page .form { background: var(--mb-card); border: 1px solid var(--mb-line); border-radius: var(--mb-radius); padding: clamp(24px, 2.6vw, 36px); box-shadow: 0 24px 60px rgba(0,0,0,.35); } .mb-form-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--mb-white); } .mb-formnote { font-size: 13px; color: var(--mb-soft); margin: 0 0 18px; } .mb-page .form label { color: #C6D0DE; } .mb-page .form input, .mb-page .form select, .mb-page .form textarea { background: #0B101B; border: 1px solid rgba(255,255,255,.14); color: var(--mb-white); border-radius: 10px; } .mb-page .form input::placeholder, .mb-page .form textarea::placeholder { color: #5C6B81; } .mb-page .form input:focus, .mb-page .form textarea:focus, .mb-page .form select:focus { border-color: var(--mb-blue); box-shadow: 0 0 0 3px rgba(28,157,255,.22); } .mb-page .form .hint, .mb-page .form .note { color: var(--mb-soft); } .mb-page .form label.consent { color: var(--mb-text); } .mb-page .form a { color: var(--mb-blue); } .mb-brandpick { display: none; align-items: flex-start; gap: 10px; margin: 0 0 16px; font-size: 13.5px; background: rgba(233,98,39,.12); border: 1px solid rgba(233,98,39,.45); border-radius: 10px; padding: 10px 14px; color: #F5C391; } .mb-brandpick.show { display: flex; } .mb-brandpick button { margin-left: auto; background: none; border: 0; color: #F5C391; font-weight: 700; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; } /* ---------- Подвал в тёмной теме ---------- */ .mb-page .footer { background: #070A10; margin-top: 0; padding: clamp(40px, 4.5vw, 64px) 0 0; border-top: 1px solid var(--mb-line-soft); } .mb-page .footer-blue { background: var(--mb-card2); border-radius: 18px 0 0 18px; border: 1px solid var(--mb-line-soft); border-right: 0; } .mb-page .footer-blue .footer-h { color: var(--mb-white); } .mb-page .footer-blue a { color: var(--mb-text); } .mb-page .footer-blue a:hover { color: var(--mb-blue); text-decoration: none; } .mb-page .footer-contacts { background: transparent; border: 1px solid var(--mb-line-soft); border-radius: 0 18px 18px 0; } .mb-page .footer-contacts .copy { color: var(--mb-white); } .mb-page .footer-contacts .tel a { color: var(--mb-blue); } .mb-page .footer-contacts .tel a:hover { color: var(--mb-white); } .mb-page .footer-contacts .mail a { color: var(--mb-text); } .mb-page .footer-contacts .addr { color: var(--mb-soft); } .mb-page .footer-contacts .disc { color: var(--mb-soft); } .mb-page .footer-bottom { border-top-color: var(--mb-line-soft); color: var(--mb-soft); } /* Документы для закупок: заметный кликабельный блок */ .mb-docs { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 2.4vw, 30px); margin-bottom: clamp(28px, 3vw, 44px); background: linear-gradient(90deg, rgba(28,157,255,.13), rgba(226,0,125,.07)); border: 1px solid rgba(28,157,255,.35); border-radius: var(--mb-radius); padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.8vw, 36px); text-decoration: none; transition: var(--tr); } .mb-docs:hover { border-color: var(--mb-blue); box-shadow: 0 16px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(28,157,255,.3); text-decoration: none; } .mb-docs svg { width: 46px; height: 46px; color: var(--mb-blue); } .mb-docs-txt b { display: block; font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; color: var(--mb-white); margin-bottom: 5px; } .mb-docs-txt span { font-size: 14px; color: var(--mb-text); } .mb-docs-go { font-size: 15px; font-weight: 700; color: var(--mb-blue); white-space: nowrap; } .mb-docs:hover .mb-docs-go { color: var(--mb-white); } /* Плавающая кнопка спецификации */ .mb-page .spec-fab { background: var(--mb-blue); color: var(--mb-ondark-blue); box-shadow: 0 6px 22px rgba(28,157,255,.4); } .mb-page .spec-fab:hover { background: #4FAEFF; } /* ============================================================ Адаптив: 1100 / 1023 / 767 / 560 ============================================================ */ @media (max-width: 1100px) { .mb-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mb-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mb-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mb-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mb-route { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; } .mb-route::before { display: none; } } @media (max-width: 1023px) { .mb-hero-grid { grid-template-columns: minmax(0, 1fr); } .mb-start-grid { grid-template-columns: minmax(0, 1fr); } /* архивный вариант */ .mb-stage { max-width: 560px; } .mb-chip--tl { left: 12px; } .mb-chip--br { right: 12px; } .mb-cases { grid-template-columns: minmax(0, 1fr); } .mb-case--lead { grid-row: auto; } .mb-bridge { grid-template-columns: minmax(0, 1fr); } .mb-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; padding-bottom: 26px; } .mb-fig + .mb-fig { border-left: 0; padding-left: 0; } .mb-docs { grid-template-columns: auto minmax(0, 1fr); } .mb-docs-go { grid-column: 2; } } @media (max-width: 767px) { .mb-page .wrap { padding: 0 20px; } .mb-route { grid-template-columns: minmax(0, 1fr); } .mb-route::before { display: block; top: 8px; bottom: 8px; left: 7px; right: auto; border-top: 0; border-left: 2px dashed rgba(255,255,255,.16); } .mb-route-step { padding: 0 0 0 34px; } .mb-route-step::before { top: 4px; } .mb-route-step .n { font-size: 2.2rem; margin-bottom: 6px; } .mb-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mb-contacts li { grid-template-columns: 12px minmax(0, 1fr); } .mb-contacts span { grid-column: 2; } } @media (max-width: 560px) { .mb-figs { grid-template-columns: minmax(0, 1fr); } .mb-scenes { grid-template-columns: minmax(0, 1fr); } .mb-who { grid-template-columns: minmax(0, 1fr); } .mb-cta .btn { width: 100%; text-align: center; } .mb-docs { grid-template-columns: minmax(0, 1fr); } .mb-docs-go { grid-column: auto; } .mb-chip { font-size: 11.5px; padding: 7px 12px; } } /* ---------- Конфигураторы и команда (01.09, по замечаниям владельца) ---------- */ .mb-cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .mb-cfg-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: #121A2A; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; text-decoration: none; color: var(--mb-text); transition: border-color .15s, transform .15s; } .mb-cfg-card:hover { border-color: var(--mb-blue); transform: translateY(-2px); } .mb-cfg-logo { height: 28px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; } /* Бейдж вместо логотипа там, где вендоров несколько (карточка СХД). */ .mb-cfg-multi { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; align-self: flex-start; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--mb-white); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); filter: none; opacity: 1; } /* Подложка — на обёртке, а не на самой картинке. mix-blend-mode смешивает элемент с тем, что ПОЗАДИ него; собственный фон элемента подложкой не считается, и белая рамка миниатюры на градиенте оставалась (14.09.2026). */ /* 14.09.2026: 84 → 110 px, кадры серверов читались мелко. */ .mb-cfg-ph { display: block; height: 110px; padding: 10px; border-radius: 12px; background: linear-gradient(160deg, #F7FAFE, #E3ECF6); } .mb-cfg-photo { display: block; width: 100%; height: 100%; object-fit: contain; background: none; padding: 0; } .mb-cfg-name { font-weight: 800; font-size: 17px; } .mb-cfg-note { color: var(--mb-soft); font-size: 13.5px; } .mb-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 8px; } .mb-role { padding: 20px; background: #121A2A; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; } .mb-role h3 { font-size: 16.5px; font-weight: 800; margin: 14px 0 6px; } .mb-role p { color: var(--mb-soft); font-size: 14px; line-height: 1.45; margin: 0; } .mb-team-note { color: var(--mb-soft); font-size: 13px; border: 1px dashed rgba(255,255,255,.25); border-radius: 999px; padding: 6px 14px; white-space: nowrap; } .mb-ava { display: block; width: 72px; height: 56px; border-radius: 14px; background: radial-gradient(circle at 50% 34%, #fff 0 9px, transparent 10px), radial-gradient(circle at 50% 108%, #fff 0 26px, transparent 27px), #0B2036; } .mb-ava--blue { background-color: #0b3c66; } .mb-ava--pink { background-color: #4d0a2e; } .mb-ava--orange { background-color: #5c2f0e; } .mb-ava--deep { background-color: #1d2a44; } /* ---------- Карусель-баннер первого экрана (hero_carousel.js) ---------- */ .mb-carousel { overflow: hidden; } /* Чипы сидят с отрицательным вылетом за край сцены — внутри карусели с overflow:hidden их режет; возвращаем вовнутрь. */ .mb-carousel .mb-chip--tl { left: 18px; } .mb-carousel .mb-chip--br { right: 18px; } .mb-car-track { position: relative; width: 100%; aspect-ratio: 1 / 1; } .mb-car-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; text-decoration: none; } .mb-car-slide.is-on { opacity: 1; visibility: visible; z-index: 1; } /* Широкие фото (мини-ПК, коммутаторы) не тянем на всю ширину сцены — вписываем с сохранением пропорций, иначе кадр «плывёт». */ .mb-car-slide .mb-stage-img { width: auto; height: auto; max-width: 92%; max-height: 92%; object-fit: contain; } /* Логотип производителя — правый верхний угол картинки */ .mb-car-logo { position: absolute; top: 18px; right: 18px; z-index: 2; background: rgba(255,255,255,.94); border: 1px solid var(--mb-line); border-radius: 999px; padding: 8px 16px; display: inline-flex; align-items: center; box-shadow: 0 8px 20px rgba(16,36,58,.12); } .mb-car-logo img { height: 22px; width: auto; display: block; } .mb-carousel .mb-chip { z-index: 4; } .mb-car-prev, .mb-car-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.94); border: 1px solid var(--mb-line); color: var(--mb-white); font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: var(--tr); } .mb-car-prev { left: 14px; } .mb-car-next { right: 14px; } .mb-car-prev:hover, .mb-car-next:hover { border-color: var(--mb-blue); color: var(--mb-blue); } .mb-car-prev:focus-visible, .mb-car-next:focus-visible { outline: 2px solid var(--mb-blue); outline-offset: 2px; } .mb-car-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 4; display: flex; gap: 8px; justify-content: center; } .mb-car-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(16,36,58,.22); transition: var(--tr); } .mb-car-dot.is-on { background: var(--mb-blue); transform: scale(1.3); } .mb-car-dot:focus-visible { outline: 2px solid var(--mb-blue); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .mb-car-slide { transition: none; } } /* Фотополоса «Кто мы»: склад, магазин, сервисный центр (11.09.2026). Три кадра в строку, на планшете — два, на телефоне — один. */ .mb-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(18px, 2vw, 28px); } .mb-shot { margin: 0; } .mb-shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); } .mb-shot figcaption { margin-top: 8px; font-size: 13.5px; color: var(--mb-soft); line-height: 1.4; } @media (max-width: 900px) { .mb-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .mb-shots { grid-template-columns: minmax(0, 1fr); } } /* Карточка проекта с настоящим фото: сама плитка уже задаёт рамку и пропорции, фотографии остаётся их заполнить (11.09.2026). */ .mb-ph2--photo { padding: 0; display: block; } .mb-ph2--photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* ================================================================== Миниатюры товара приходят от дистрибьюторов на белой подложке, а плитки под ними — на светлом сине-сером градиенте: внутри плитки получался белый прямоугольник (замечание владельца 14.09.2026, главная: карточки конфигураторов, «Ходовые позиции», сцена первого экрана). Режим наложения multiply делает белое прозрачным, не трогая сам товар: тёмные пиксели не меняются вовсе, светлые едва окрашиваются в тон подложки — белый корпус МФУ выглядит стоящим на поверхности, а не вырезанным. Вырезать фон у 473 тысяч файлов не нужно, правило одно. Категории (.mb-cat-ph) уже с прозрачным фоном — им правило не вредит. ================================================================== */ .mb-cat-ph img, .mb-pcard-ph img, .mb-cfg-photo { mix-blend-mode: multiply; } /* Сцена первого экрана. Слайд карусели — position:absolute с z-index и переходом прозрачности, то есть отдельный контекст наложения. Правило на картинке внутри него смешивалось с пустотой слайда, а до градиента сцены не дотягивалось: белая рамка оставалась (14.09.2026). Поэтому смешивается сам слайд — как единое целое с .mb-stage. Бейдж логотипа при этом теряет белую подложку и остаётся логотипом на градиенте. */ /* 14.09.2026, вторая итерация: кадры сцены вырезаны в прозрачные (assets/content/hero), наложение сцене больше не нужно — бейдж логотипа остаётся белым, а тень ложится по силуэту товара. */ /* FAQ на главной — карточки в тоне страницы. */ .mb-page .faq-item { background: var(--mb-card); border: 1px solid var(--mb-line); border-radius: 16px; padding: 20px; } .mb-page .faq-item h3 { color: var(--mb-white); } .mb-page .faq-item p { color: var(--mb-soft); }