/*
* ubc-brand.css — единый бренд-стандарт UPGRADE BUSINESS CONSULTING
* Версия: 1.0 · 2026-04-30
* Источник истины: библиотека/бренд-стандарт-ubc.md
*
* Подключение в КАЖДОЙ страницы сайта:
*
*
* Google Fonts подключать отдельно (перед этим файлом):
*
*
*
*/
/* ============================================================
1. CSS-ПЕРЕМЕННЫЕ (§2 бренд-стандарта)
============================================================ */
:root {
/* --- Брендовая палитра --- */
--ubc-navy: #03122F; /* самый тёмный: футер главной, премиум-блоки */
--ubc-dark: #0A2466; /* тёмные градиенты, hero-секции */
--ubc-deep: #1e3a8a; /* ⭐ ГЛАВНЫЙ ФИРМЕННЫЙ: заголовки, акценты, шапка */
--ubc-blue: #1d4ed8; /* hover primary-кнопок, ссылки */
--ubc-primary: #2563eb; /* primary CTA-кнопки */
--ubc-bright: #3b82f6; /* декоративные акценты, иконки 2-го уровня */
--ubc-light: #60a5fa; /* иконки на тёмном фоне, gradient stop */
--ubc-soft: #A6C8FF; /* только логотип и premium-tier на тёмном */
/* --- Нейтральная палитра --- */
--text-deep: #0f172a; /* H1, H2 на светлом фоне */
--text-main: #334155; /* основной текст */
--text-muted: #64748b; /* вторичный текст, подписи, метки */
--text-subtle: #94a3b8; /* микроподписи, плейсхолдеры */
--bg-base: #ffffff; /* базовый фон контента */
--bg-soft: #f8fafc; /* подложка карточек */
--bg-cool: #f1f5f9; /* фон страницы dashboard */
--bg-dark: #0f172a; /* тёмные блоки, футер */
--border-light: #e2e8f0; /* стандартные границы карточек, инпутов */
--border-soft: #cbd5e1; /* пунктирные разделители, hover-границы */
/* --- Семантические цвета (§2.3) --- */
--color-success: #16a34a;
--bg-success: #f0fdf4;
--border-success: #86efac;
--color-warning: #d97706;
--bg-warning: #fffbeb;
--border-warning: #fbbf24;
--color-danger: #dc2626;
--bg-danger: #fef2f2;
--border-danger: #fca5a5;
--color-info: #1d4ed8;
--bg-info: #eff6ff;
--border-info: #7dd3fc;
--color-amber: #eab308;
--bg-amber: #fef9c3;
--border-amber: #fde68a;
/* --- Спецсервисы (§2.4) --- */
--color-telegram: #0088cc;
--color-ai: #8b5cf6;
--bg-ai: #f5f3ff;
--color-email: #10b981;
--color-pdf: #ef4444;
/* --- Шрифты (§3.1) --- */
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--font-display: 'Montserrat', 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* --- Радиусы (§4.2) --- */
--radius-sm: 6px; /* мелкие кнопки, чипы, теги */
--radius-md: 10px; /* карточки личного кабинета */
--radius-lg: 20px; /* большие карточки сайта */
--radius-xl: 24px; /* hero-плашки, баннеры */
--radius-pill: 40px; /* CTA pill-кнопки */
--radius-input: 8px; /* поля ввода */
/* --- Тени (§4.3) --- */
--shadow-soft: 0 1px 3px rgba(0,0,0,0.05);
--shadow-card: 0 10px 30px rgba(0,0,0,0.03);
--shadow-card-hover: 0 20px 40px rgba(30,58,138,0.10);
--shadow-cta: 0 10px 20px rgba(37,99,235,0.20);
--shadow-cta-hover: 0 15px 25px rgba(37,99,235,0.30);
--shadow-header: 0 4px 20px rgba(0,0,0,0.05);
--shadow-premium: 0 2px 20px rgba(1,9,26,0.50);
/* --- Переходы --- */
--transition: all 0.3s ease;
/* --- Контейнер --- */
--container-max: 1200px;
--container-pad: 24px;
}
/* ============================================================
2. БАЗОВЫЙ СБРОС И BODY
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: var(--font-body);
color: var(--text-main);
background-color: var(--bg-base);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--text-deep);
line-height: 1.2;
}
/* Если родитель — Tailwind .text-white или другие светлые утилиты,
h1-h6 наследует цвет (иначе тёмный --text-deep перебивает белый родителя). */
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.text-slate-50 h1, .text-slate-50 h2, .text-slate-50 h3,
.text-slate-100 h1, .text-slate-100 h2, .text-slate-100 h3,
.text-gray-50 h1, .text-gray-50 h2, .text-gray-50 h3,
.text-gray-100 h1, .text-gray-100 h2, .text-gray-100 h3 {
color: inherit !important;
}
a {
color: var(--ubc-blue);
text-decoration: none;
transition: var(--transition);
}
a:hover {
color: var(--ubc-deep);
}
/* ============================================================
3. КОНТЕЙНЕР
============================================================ */
.ubc-container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
width: 100%;
}
/* ============================================================
4. КНОПКИ (§5.1)
============================================================ */
/* Primary CTA — pill, синий */
.ubc-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--ubc-primary);
color: #ffffff;
padding: 16px 40px;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
border: none;
cursor: pointer;
box-shadow: var(--shadow-cta);
transition: var(--transition);
text-decoration: none;
white-space: nowrap;
}
.ubc-btn-primary:hover {
background: var(--ubc-blue);
color: #ffffff;
transform: translateY(-2px);
box-shadow: var(--shadow-cta-hover);
}
/* Secondary — прозрачный с рамкой */
.ubc-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: var(--text-main);
padding: 14px 32px;
border-radius: 30px;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 500;
border: 1px solid var(--border-soft);
cursor: pointer;
transition: var(--transition);
text-decoration: none;
white-space: nowrap;
}
.ubc-btn-secondary:hover {
border-color: var(--ubc-deep);
color: var(--ubc-deep);
transform: translateY(-2px);
}
/* Tab-кнопка (личный кабинет) */
.ubc-btn-tab {
background: transparent;
color: var(--text-muted);
padding: 10px 20px;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
border: none;
cursor: pointer;
transition: var(--transition);
}
.ubc-btn-tab.active,
.ubc-btn-tab:hover {
background: #ffffff;
color: var(--ubc-deep);
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* Кнопки экспорта (§2.4) */
.ubc-btn-pdf { background: var(--color-pdf); color: #fff; }
.ubc-btn-docx { background: var(--ubc-primary); color: #fff; }
.ubc-btn-email { background: var(--color-email); color: #fff; }
.ubc-btn-telegram { background: var(--color-telegram); color: #fff; }
.ubc-btn-pdf,
.ubc-btn-docx,
.ubc-btn-email,
.ubc-btn-telegram {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
border: none;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
}
.ubc-btn-pdf:hover,
.ubc-btn-docx:hover,
.ubc-btn-email:hover,
.ubc-btn-telegram:hover {
opacity: 0.88;
transform: translateY(-1px);
}
/* ============================================================
5. КАРТОЧКИ (§5.2)
============================================================ */
.ubc-card {
background: var(--bg-base);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 40px 30px;
box-shadow: var(--shadow-card);
transition: var(--transition);
}
.ubc-card:hover {
transform: translateY(-5px);
border-color: var(--ubc-deep);
box-shadow: var(--shadow-card-hover);
}
/* Компактная карточка (личный кабинет) */
.ubc-card-sm {
background: var(--bg-base);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 20px;
box-shadow: var(--shadow-soft);
transition: var(--transition);
}
/* ============================================================
6. ПОЛЯ ВВОДА (§5.4)
============================================================ */
.ubc-input,
.ubc-select,
.ubc-textarea {
width: 100%;
border: 0.5px solid #bdd0f5;
border-radius: var(--radius-input);
padding: 8px 12px;
background: var(--bg-base);
font-family: var(--font-body);
font-size: 13px;
color: var(--text-main);
transition: var(--transition);
outline: none;
}
.ubc-input:focus,
.ubc-select:focus,
.ubc-textarea:focus {
border-color: var(--ubc-primary);
box-shadow: 0 0 0 2px rgba(37,99,235,0.12);
}
.ubc-input::placeholder,
.ubc-textarea::placeholder {
color: var(--text-subtle);
}
/* ============================================================
7. ТАБЛИЦЫ (§5.5)
============================================================ */
.ubc-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: 14px;
background: var(--bg-base);
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: var(--shadow-soft);
}
.ubc-table th {
background: var(--bg-soft);
color: var(--ubc-deep);
font-family: var(--font-body);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 14px 15px;
border: 1px solid var(--border-light);
text-align: left;
}
.ubc-table td {
padding: 12px 15px;
border: 1px solid var(--border-light);
color: var(--text-main);
}
.ubc-table tr:nth-of-type(even) td {
background: #fbfcfd;
}
/* ============================================================
8. ШАПКА САЙТА
============================================================ */
.ubc-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-light);
transition: var(--transition);
}
.ubc-header.scrolled {
box-shadow: var(--shadow-header);
}
.ubc-header-inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
/* Логотип-блок (Command Center: квадрат UBC 45×45) */
.ubc-logo-badge {
width: 45px;
height: 45px;
background: var(--ubc-deep);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-family: var(--font-display);
font-size: 14px;
font-weight: 900;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.ubc-logo-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.ubc-logo-text-title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
color: var(--ubc-deep);
}
.ubc-logo-text-sub {
font-family: var(--font-body);
font-size: 9px;
font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ============================================================
9. НАВИГАЦИЯ
============================================================ */
.ubc-nav {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.ubc-nav a {
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
padding: 8px 14px;
border-radius: var(--radius-sm);
transition: var(--transition);
text-decoration: none;
}
.ubc-nav a:hover,
.ubc-nav a.active {
color: var(--ubc-deep);
background: var(--bg-soft);
}
/* ============================================================
10. ФУТЕР
============================================================ */
.ubc-footer {
background: var(--ubc-navy);
color: rgba(255,255,255,0.65);
padding: 60px 0 30px;
}
.ubc-footer a {
color: rgba(255,255,255,0.65);
transition: var(--transition);
}
.ubc-footer a:hover {
color: #ffffff;
}
.ubc-footer-brand {
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
color: #ffffff;
letter-spacing: 0.03em;
}
.ubc-footer-tagline {
font-size: 13px;
color: rgba(255,255,255,0.5);
margin-top: 4px;
}
.ubc-footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: 40px;
padding-top: 24px;
font-size: 12px;
color: rgba(255,255,255,0.35);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
/* ============================================================
11. СЕКЦИИ (§4.1)
============================================================ */
.ubc-section {
padding-block: 100px;
}
.ubc-section-title {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 2.7rem);
font-weight: 800;
color: var(--text-deep);
letter-spacing: -0.5px;
margin-bottom: 16px;
}
.ubc-section-sub {
font-size: 1.1rem;
color: var(--text-muted);
max-width: 600px;
line-height: 1.6;
}
@media (max-width: 768px) {
.ubc-section { padding-block: 60px; }
}
@media (max-width: 480px) {
.ubc-section { padding-block: 40px; }
}
/* ============================================================
12. СЕМАНТИЧЕСКИЕ БЕЙДЖИ / СТАТУСЫ
============================================================ */
.ubc-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ubc-badge-success { background: var(--bg-success); color: var(--color-success); border: 1px solid var(--border-success); }
.ubc-badge-warning { background: var(--bg-warning); color: var(--color-warning); border: 1px solid var(--border-warning); }
.ubc-badge-danger { background: var(--bg-danger); color: var(--color-danger); border: 1px solid var(--border-danger); }
.ubc-badge-info { background: var(--bg-info); color: var(--color-info); border: 1px solid var(--border-info); }
.ubc-badge-ai { background: var(--bg-ai); color: var(--color-ai); border: 1px solid var(--color-ai); }
/* ============================================================
13. AI-БЛОКИ
============================================================ */
.ubc-ai-block {
border: 1px solid var(--color-ai);
border-radius: var(--radius-md);
background: var(--bg-ai);
padding: 16px 20px;
}
.ubc-ai-block-header {
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
color: var(--color-ai);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 8px;
}
/* ============================================================
14. ГРАДИЕНТЫ (§2.5)
============================================================ */
.ubc-gradient-brand {
background: linear-gradient(135deg, #1d4ed8 0%, #0A2466 100%);
}
.ubc-gradient-hero {
background: linear-gradient(135deg, #03122F 0%, #0A2466 60%, #163272 100%);
}
.ubc-gradient-page {
background: radial-gradient(circle at top right, #1e293b, #0f172a);
}
/* Текст с gradient clip (цифры в статистике §3.3) */
.ubc-stat-number {
font-family: var(--font-display);
font-weight: 800;
background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ============================================================
15. УТИЛИТЫ
============================================================ */
.ubc-text-deep { color: var(--ubc-deep) !important; }
.ubc-text-muted { color: var(--text-muted) !important; }
.ubc-bg-soft { background: var(--bg-soft) !important; }
.ubc-bg-cool { background: var(--bg-cool) !important; }
.ubc-divider {
border: none;
border-top: 1px solid var(--border-light);
margin-block: 24px;
}
.ubc-divider-dashed {
border: none;
border-top: 1px dashed var(--border-soft);
margin-block: 24px;
}
/* Eyebrow-метка (Label, §3.2) */
.ubc-eyebrow {
font-family: var(--font-body);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ubc-primary);
}
/* ============================================================
16. НОРМАЛИЗАЦИЯ ШАПОК ЛИДОГЕНЕРАТОРОВ
Применяется через класс .ubc-page-header на всех
публичных страницах (кроме главной у которой своя шапка)
============================================================ */
.ubc-page-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-light);
box-shadow: var(--shadow-header);
transition: box-shadow 0.3s ease;
}
/* Логотип: единый размер 40×40 */
.ubc-page-header img[alt*="UBC"],
.ubc-page-header img[alt*="Logo"],
.ubc-page-header img[alt*="logo"] {
width: 40px !important;
height: 40px !important;
object-fit: contain;
}
/* Заголовки используют Montserrat на всех страницах */
h1, h2, h3 {
font-family: var(--font-display);
}
/* CTA-кнопки: приводим тени к стандарту бренда */
.ubc-page-header a[class*="bg-blue"],
.ubc-page-header button[class*="bg-blue"] {
box-shadow: var(--shadow-cta) !important;
transition: var(--transition) !important;
}
.ubc-page-header a[class*="bg-blue"]:hover,
.ubc-page-header button[class*="bg-blue"]:hover {
box-shadow: var(--shadow-cta-hover) !important;
transform: translateY(-1px);
}
/* === Mobile overflow protection (применяется ко всем страницам, использующим ubc-brand.css) === */
/* Корневые правила — html/body не выходят за viewport */
html, body {
overflow-x: hidden;
max-width: 100vw;
}
/* Все position: fixed/sticky обёртки — строго в пределах viewport */
@media (max-width: 768px) {
header[style*="fixed"],
header[style*="sticky"],
.header,
.ubc-page-header,
[class*="sticky"][class*="top-"] {
width: 100vw;
max-width: 100vw;
box-sizing: border-box;
}
/* Любая обёртка с padding — учитывает padding внутри ширины (а не добавляет к ней) */
.container,
[class*="max-w-"] {
box-sizing: border-box;
max-width: 100% !important;
}
/* Изображения, видео, iframe — никогда не выходят за родителя */
img, iframe, video, svg.responsive-svg {
max-width: 100%;
height: auto;
}
}
/* Узкие экраны (≤480px): защита от переполнения flex-карточек с фиксированным flex-basis */
@media (max-width: 480px) {
/* Flex-формы которые не должны застревать на min-width 350-400px */
[class*="contact-form"],
[class*="lead-magnet"],
[class*="form-card"],
form[style*="flex"] {
box-sizing: border-box;
max-width: 100% !important;
min-width: 0 !important;
flex-basis: auto !important;
overflow: hidden;
}
/* Cloudflare Turnstile widget — никогда не вылезает */
.cf-turnstile {
max-width: 100% !important;
box-sizing: border-box;
overflow: hidden;
}
.cf-turnstile iframe {
max-width: 100% !important;
}
/* Footer на лидогенераторах — на мобильном 4 строки с одинаковым межстрочным расстоянием 10px.
Структура: 2 wrapper'а (info + legal), у каждого gap:10px между детьми; и общий gap 10px
между wrapper'ами через margin-top на legal (равный gap внутри). */
.ubc-footer-info {
flex-direction: column !important;
gap: 10px !important;
}
.ubc-footer-legal {
flex-direction: column !important;
gap: 10px !important;
margin-top: 10px !important;
}
}