/* ============================================================ COXO B2B · ВАРИАНТ «Б СВЕТЛ» — компоновка варианта Б, палитра по брендбуку СОХО (COXO_guideline_2025-07): голубой #1C9DFF → акцентные слова, кнопки, иконки фуксия #E2007D → точки и метки апельсин #E96227 → вторичные акценты белый #FEFEFE → базовый фон Подключается ТРЕТЬИМ, после style.css и marketing-b.css: переопределяет только цвета, вся компоновка — из marketing-b.css. Область — . ============================================================ */ .mb-light { --mb-bg: #FFFFFF; --mb-bg-alt: #F2F7FC; --mb-card: #FFFFFF; --mb-card2: #F7FAFD; --mb-line: rgba(19,68,124,.16); --mb-line-soft: rgba(19,68,124,.09); --mb-text: #40516A; /* 7,4:1 на белом */ --mb-soft: #67768C; /* 4,6:1 на белом */ --mb-white: #10243A; /* «белый» тёмной темы → тёмный navy заголовков, 13,9:1 */ --mb-blue: #1C9DFF; /* брендбук */ --mb-pink: #E2007D; /* брендбук */ --mb-orange: #E96227; /* брендбук */ --mb-link: #0F6FC0; /* голубой для мелкого текста-ссылок — 4,6:1 на белом */ --mb-ondark-blue: #062032; /* текст на голубых пилюлях — 6,3:1 на #1C9DFF */ } .mb-light ::selection { background: rgba(28,157,255,.25); } /* ---------- Шапка ---------- */ .mb-light .sitehead.is-stuck .headbar { background: rgba(255,255,255,.9); } .mb-light .sitehead.is-stuck .navbar { background: rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(16,36,58,.12); } .mb-light .topbar { background: #F2F7FC; color: var(--mb-soft); } .mb-light .topbar a { color: var(--mb-soft); } .mb-light .topbar a:hover { color: var(--mb-white); } .mb-light .btn-partner { color: #2D1300 !important; } .mb-light .btn-partner:hover { background: #F07B2E; } .mb-light .headbar { border-bottom-color: var(--mb-line-soft); } .mb-light .logo { color: var(--mb-white); } .mb-light .search input { background: #FFFFFF; border-color: var(--mb-line); color: var(--mb-white); } .mb-light .search input::placeholder { color: #93A3B8; } .mb-light .search input:focus { border-color: var(--mb-blue); box-shadow: 0 0 0 3px rgba(28,157,255,.18); } .mb-light .search button { color: #2D1300; } .mb-light .search button:hover { background: #F07B2E; } .mb-light .head-phone a { color: var(--mb-white); } .mb-light .head-phone a:hover { color: var(--mb-link); } .mb-light .head-callback a { color: var(--mb-link); } .mb-light .navbar { border-bottom-color: var(--mb-line-soft); } .mb-light .nav a:hover { color: var(--mb-link); } .mb-light .nav a.active { color: var(--mb-white); } .mb-light .btn-cat:hover { background: #4FAEFF; } .mb-light .burger { background: #FFFFFF; border-color: var(--mb-line); color: var(--mb-white); } /* ---------- Кнопки ---------- */ .mb-light .btn.accent { box-shadow: 0 8px 22px rgba(28,157,255,.28); } .mb-light .btn.accent:hover { background: #4FAEFF; box-shadow: 0 10px 28px rgba(28,157,255,.38); } .mb-light .btn.ghost-light { color: var(--mb-white) !important; border-color: rgba(16,36,58,.32); } .mb-light .btn.ghost-light:hover { border-color: var(--mb-white); background: rgba(16,36,58,.05); color: var(--mb-white) !important; } /* ---------- Типографика и мелкий интерактив ---------- */ .mb-light .mb-all { color: var(--mb-link); border-bottom-color: rgba(15,111,192,.4); } .mb-light .mb-all:hover { color: var(--mb-white); border-color: var(--mb-white); } /* ---------- Первый экран ---------- */ .mb-light .mb-hero { background: radial-gradient(900px 520px at 78% 8%, rgba(28,157,255,.10), transparent 65%), radial-gradient(700px 460px at 8% 92%, rgba(226,0,125,.05), transparent 60%), var(--mb-bg); } .mb-light .mb-eyebrow { background: #F4F8FC; border-color: var(--mb-line); } .mb-light .mb-stage { box-shadow: 0 24px 60px rgba(16,36,58,.16), 0 0 0 1px rgba(19,68,124,.08), 0 0 70px rgba(28,157,255,.12); } .mb-light .mb-chip { background: rgba(255,255,255,.94); color: var(--mb-white); border-color: var(--mb-line); box-shadow: 0 10px 26px rgba(16,36,58,.14); } /* ---------- Задачи / мостик ---------- */ .mb-light .mb-scene:hover { border-color: rgba(28,157,255,.55); box-shadow: 0 16px 36px rgba(16,36,58,.14), 0 0 0 1px rgba(28,157,255,.22); } .mb-light .mb-scene-arrow { border-color: var(--mb-line); color: var(--mb-white); } .mb-light .mb-scene:hover .mb-scene-arrow { background: var(--mb-blue); border-color: var(--mb-blue); color: var(--mb-ondark-blue); } .mb-light .mb-bridge { background: linear-gradient(90deg, rgba(28,157,255,.10), rgba(226,0,125,.05)); border-color: rgba(28,157,255,.30); } /* ---------- Плитки и полка ---------- */ .mb-light .mb-cat:hover { border-color: rgba(28,157,255,.55); box-shadow: 0 12px 28px rgba(16,36,58,.13); } .mb-light .mb-pcard:hover { border-color: rgba(28,157,255,.45); box-shadow: 0 12px 28px rgba(16,36,58,.13); } .mb-light .mb-pcard-name:hover { color: var(--mb-link); } .mb-light .mb-pcard .btn-card { border-color: var(--mb-link); color: var(--mb-link); } .mb-light .mb-pcard .btn-card:hover { background: var(--mb-blue); border-color: var(--mb-blue); color: var(--mb-ondark-blue); } /* ---------- Проекты: плейсхолдер фото — светлый ---------- */ .mb-light .mb-case:hover { border-color: rgba(28,157,255,.4); box-shadow: 0 14px 34px rgba(16,36,58,.13); } .mb-light .mb-ph2 { background: repeating-linear-gradient(135deg, rgba(19,68,124,.04) 0 2px, transparent 2px 16px), radial-gradient(120% 130% at 20% 0%, #E7F0F9 0%, #F3F8FD 60%, #FAFCFE 100%); color: var(--mb-soft); } .mb-light .mb-ph2 figcaption { color: var(--mb-text); } .mb-light .mb-case-body .mb-more { color: var(--mb-link); } .mb-light .mb-case-body .mb-more:hover { color: var(--mb-white); } .mb-light .mb-note-line a { color: var(--mb-link); } /* ---------- Бренды: логотипы в исходном цвете ---------- */ .mb-light .mb-logo img { filter: none; opacity: .78; } .mb-light .mb-logo:hover img { opacity: 1; } .mb-light .brand-pause { border-color: var(--mb-line); color: var(--mb-text); } .mb-light .brand-pause:hover { border-color: var(--mb-blue); color: var(--mb-link); } /* ---------- Маршрут ---------- */ .mb-light .mb-route::before { border-top-color: rgba(19,68,124,.18); } @media (max-width: 767px) { .mb-light .mb-route::before { border-left-color: rgba(19,68,124,.18); } } /* ---------- Как начать / форма ---------- */ .mb-light .mb-start { background: radial-gradient(820px 480px at 12% 0%, rgba(28,157,255,.09), transparent 60%), var(--mb-bg-alt); } .mb-light .mb-contacts a:hover { color: var(--mb-link); } .mb-light .form { box-shadow: 0 18px 44px rgba(16,36,58,.12); } .mb-light .form label { color: var(--mb-text); } .mb-light .form input, .mb-light .form select, .mb-light .form textarea { background: #FFFFFF; border-color: var(--mb-line); color: var(--mb-white); } .mb-light .form input::placeholder, .mb-light .form textarea::placeholder { color: #93A3B8; } .mb-light .form input:focus, .mb-light .form textarea:focus, .mb-light .form select:focus { border-color: var(--mb-blue); box-shadow: 0 0 0 3px rgba(28,157,255,.16); } .mb-light .form a { color: var(--mb-link); } .mb-light .mb-brandpick { background: rgba(233,98,39,.09); border-color: rgba(233,98,39,.4); color: #9A4A0B; } .mb-light .mb-brandpick button { color: #9A4A0B; } /* ---------- Подвал ---------- */ .mb-light .footer { background: #F2F7FC; border-top-color: var(--mb-line-soft); } .mb-light .footer-blue { background: #FFFFFF; border-color: var(--mb-line-soft); } .mb-light .footer-contacts { border-color: var(--mb-line-soft); } .mb-light .footer-contacts .tel a { color: var(--mb-link); } .mb-light .footer-contacts .tel a:hover { color: var(--mb-white); } .mb-light .footer-blue a:hover { color: var(--mb-link); } /* ---------- Документы ---------- */ .mb-light .mb-docs { background: linear-gradient(90deg, rgba(28,157,255,.09), rgba(226,0,125,.045)); border-color: rgba(28,157,255,.32); } .mb-light .mb-docs:hover { border-color: var(--mb-blue); box-shadow: 0 14px 36px rgba(16,36,58,.14), 0 0 0 1px rgba(28,157,255,.25); } .mb-light .mb-docs svg { color: var(--mb-link); } .mb-light .mb-docs-go { color: var(--mb-link); } .mb-light .mb-docs:hover .mb-docs-go { color: var(--mb-white); } /* ---------- Спецификация ---------- */ .mb-light .spec-fab:hover { background: #4FAEFF; } /* ---------- Конфигураторы и команда ---------- */ .mb-light .mb-cfg-card { background: #FFFFFF; border-color: var(--mb-line); } .mb-light .mb-cfg-card:hover { border-color: var(--mb-blue); } .mb-light .mb-cfg-logo { filter: none; opacity: 1; } .mb-light .mb-cfg-ph { background: linear-gradient(160deg, #F7FAFE, #E3ECF6); } .mb-light .mb-role { background: #FFFFFF; border-color: var(--mb-line); } .mb-light .mb-team-note { border-color: rgba(19,68,124,.3); } .mb-light .mb-shot img { border-color: var(--mb-line); } .mb-light .mb-shot figcaption { color: #5a6472; } .mb-light .mb-cfg-multi { color: var(--mb-blue, #0F6FC0); background: rgba(28,157,255,.10); border-color: rgba(28,157,255,.30); } .mb-light .faq-item { background: #fff; border-color: var(--mb-line); } .mb-light .faq-item h3 { color: var(--mb-ink, #111); } .mb-light .faq-item p { color: #444; }