/* ============================================================ BrainBild — Design Tokens Единый набор CSS-переменных для согласованного стиля на всех страницах сайта (psycholog/, чат, лендинги, фид). Подключение: Использование: .my-button { background: var(--bb-color-primary); border-radius: var(--bb-radius-md); box-shadow: var(--bb-shadow-button); } ============================================================ */ :root { /* ---- ЦВЕТА: Бренд (зелёный) ---- */ --bb-color-primary: #2bbf64; /* основной зелёный */ --bb-color-primary-dark: #25a557; /* для градиентов и hover */ --bb-color-primary-deep: #1d8443; /* hover для текстовых ссылок */ --bb-color-primary-light: #c8ecd5; /* outline-обводки */ --bb-color-primary-bg: #f0faf3; /* мягкий фон (verified-чипы) */ --bb-color-primary-text: #1a7d3f; /* тёмный зелёный для текста на bg */ --bb-gradient-primary: linear-gradient(135deg, #2bbf64 0%, #25a557 100%); /* ---- ЦВЕТА: Текст ---- */ --bb-color-text-strong: #1d2849; /* имена, цена, заголовки */ --bb-color-text-body: #2d3a5c; /* основной текст */ --bb-color-text-muted: #6b7793; /* метаданные */ --bb-color-text-subtle: #8a96b0; /* подсказки, label-uppercase */ --bb-color-text-faint: #b1bcd0; /* служебные иконки */ /* ---- ЦВЕТА: Поверхности ---- */ --bb-color-bg-page: #f6f9fd; /* фон страницы */ --bb-color-surface: #ffffff; /* карточки */ --bb-color-surface-soft: #f6f9fd; /* инпуты */ --bb-color-surface-tag: #eef3fb; /* теги-чипы */ --bb-color-surface-tag-soft: #f4f7fb; /* мягкие чипы */ /* ---- ЦВЕТА: Границы и разделители ---- */ --bb-color-border: #ecf0f8; /* основные границы */ --bb-color-border-strong: #d6dde9; /* кнопки secondary */ --bb-color-border-input: #e3eaf2; /* инпуты */ --bb-color-border-soft: #f0f3f8; /* тонкие разделители */ --bb-color-divider-hover: #d6e0ee; /* hover-граница */ /* ---- ЦВЕТА: Акценты ---- */ --bb-color-star: #f5a623; /* рейтинг ★ */ --bb-color-link: #2a7de1; /* синие ссылки */ --bb-color-danger: #e84a4a; /* ошибки/удаление */ /* ---- ТЕНИ ---- */ --bb-shadow-card: 0 1px 2px rgba(20, 30, 60, 0.04), 0 8px 24px rgba(20, 30, 60, 0.06); --bb-shadow-card-hover: 0 4px 8px rgba(20, 30, 60, 0.05), 0 16px 40px rgba(20, 30, 60, 0.10); --bb-shadow-avatar: 0 4px 12px rgba(20, 30, 60, 0.08); --bb-shadow-button: 0 4px 14px rgba(43, 191, 100, 0.30); --bb-shadow-button-hover: 0 6px 20px rgba(43, 191, 100, 0.40); --bb-shadow-button-sticky: 0 6px 24px rgba(43, 191, 100, 0.40); --bb-shadow-input-focus: 0 0 0 3px rgba(43, 191, 100, 0.12); --bb-shadow-modal: 0 -8px 32px rgba(20, 30, 60, 0.18); /* ---- РАДИУСЫ ---- */ --bb-radius-xs: 8px; /* мелкие элементы */ --bb-radius-sm: 12px; /* инпуты */ --bb-radius-md: 14px; /* кнопки */ --bb-radius-lg: 16px; /* аватар, медиа */ --bb-radius-xl: 18px; /* карточка mobile */ --bb-radius-2xl: 22px; /* карточка desktop, форма */ --bb-radius-modal: 24px 24px 0 0; /* bottom-sheet */ --bb-radius-pill: 999px; /* теги, бейджи */ --bb-radius-circle: 50%; /* круглые аватары */ /* ---- ОТСТУПЫ (на 4-px сетке) ---- */ --bb-space-xs: 4px; --bb-space-sm: 8px; --bb-space-md: 12px; --bb-space-lg: 16px; --bb-space-xl: 20px; --bb-space-2xl: 24px; --bb-space-3xl: 28px; --bb-space-4xl: 36px; /* ---- ТИПОГРАФИКА ---- */ --bb-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; --bb-font-icons: rcl-awesome, "Font Awesome 5 Free", "Font Awesome", FontAwesome; /* размеры */ --bb-text-xs: 0.78rem; /* подсказки */ --bb-text-sm: 0.85rem; /* мета, чипы */ --bb-text-base: 0.95rem; /* основной */ --bb-text-md: 1rem; /* кнопки */ --bb-text-lg: 1.2rem; /* подзаголовки, имя на mobile */ --bb-text-xl: 1.4rem; /* цена */ --bb-text-2xl: 1.55rem; /* имя на desktop */ /* специальные */ --bb-text-label: 0.74rem; /* uppercase label */ /* веса */ --bb-weight-medium: 500; --bb-weight-semibold: 600; --bb-weight-bold: 700; /* трекинг */ --bb-tracking-label: 0.06em; /* uppercase labels */ --bb-tracking-tight: -0.01em; /* большие заголовки */ /* высота строки */ --bb-leading-tight: 1.2; /* заголовки */ --bb-leading-normal: 1.4; /* кнопки, мета */ --bb-leading-relaxed: 1.6; /* биография */ /* ---- АНИМАЦИЯ ---- */ --bb-transition-fast: 0.15s ease; /* hover микро */ --bb-transition-base: 0.25s ease; /* стандарт */ --bb-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* bottom-sheet, спойлеры */ /* ---- Z-INDEX (стек) ---- */ --bb-z-trigger: 9997; --bb-z-backdrop: 9998; --bb-z-modal: 9999; /* ---- БРЕЙКПОИНТЫ (для справки в JS) ---- */ --bb-bp-mobile: 480px; --bb-bp-tablet: 760px; --bb-bp-desktop: 1024px; } /* ============================================================ Базовые утилиты — можно использовать классами на любых страницах ============================================================ */ /* Сглаживание шрифта */ .bb-font { font-family: var(--bb-font-family); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Карточка — стандарт */ .bb-card { background: var(--bb-color-surface); border: 1px solid var(--bb-color-border); border-radius: var(--bb-radius-2xl); box-shadow: var(--bb-shadow-card); padding: var(--bb-space-3xl); transition: transform var(--bb-transition-base), box-shadow var(--bb-transition-base), border-color var(--bb-transition-base); } .bb-card:hover { transform: translateY(-2px); box-shadow: var(--bb-shadow-card-hover); border-color: var(--bb-color-divider-hover); } /* Кнопка-primary */ .bb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--bb-space-sm); padding: 13px 24px; border-radius: var(--bb-radius-md); font-size: var(--bb-text-md); font-weight: var(--bb-weight-semibold); line-height: var(--bb-leading-normal); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: transform var(--bb-transition-fast), box-shadow var(--bb-transition-base), color var(--bb-transition-base), background-color var(--bb-transition-base), border-color var(--bb-transition-base); box-sizing: border-box; white-space: nowrap; font-family: inherit; } .bb-btn--primary { background: var(--bb-gradient-primary); color: #fff; box-shadow: var(--bb-shadow-button); } .bb-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--bb-shadow-button-hover); color: #fff; } .bb-btn--secondary { background: var(--bb-color-surface); color: var(--bb-color-text-body); border-color: var(--bb-color-border-strong); } .bb-btn--secondary:hover { border-color: var(--bb-color-primary-dark); color: var(--bb-color-primary-dark); background: #f6fcf8; } /* Чип / pill / тег */ .bb-chip { display: inline-flex; align-items: center; gap: var(--bb-space-xs); padding: 6px 13px; background: var(--bb-color-surface-tag); color: var(--bb-color-text-body); border-radius: var(--bb-radius-pill); font-size: var(--bb-text-sm); font-weight: var(--bb-weight-medium); line-height: var(--bb-leading-normal); } .bb-chip--verified { background: linear-gradient(135deg, var(--bb-color-primary-bg) 0%, #e6f5ec 100%); border: 1px solid var(--bb-color-primary-light); color: var(--bb-color-primary-text); font-weight: var(--bb-weight-semibold); } /* Uppercase label */ .bb-label { font-size: var(--bb-text-label); text-transform: uppercase; letter-spacing: var(--bb-tracking-label); color: var(--bb-color-text-subtle); font-weight: var(--bb-weight-semibold); } /* Инпут */ .bb-input { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1.5px solid var(--bb-color-border-input); border-radius: var(--bb-radius-sm); background: var(--bb-color-surface-soft); color: var(--bb-color-text-strong); font-size: var(--bb-text-base); line-height: var(--bb-leading-normal); transition: border-color var(--bb-transition-fast), background-color var(--bb-transition-fast), box-shadow var(--bb-transition-fast); font-family: inherit; } .bb-input:focus { outline: 0; background: var(--bb-color-surface); border-color: var(--bb-color-primary); box-shadow: var(--bb-shadow-input-focus); }