/* ========================================================================= Дизайн-токены портала Бэбибум + Лавиани Источник: БРЕНДБУК БЭБИБУМ (Of Nuances Studio) + требования docs/01-vision.md Правила применения: docs/11-design-system.md Подключение: import './brand/tokens.css' (один раз, в корне приложения) Использование: color: var(--color-text); font-size: var(--text-body); Не хардкодьте цвета и размеры в компонентах — только переменные отсюда. ========================================================================= */ /* ---------- Шрифты ------------------------------------------------------ */ @font-face { font-family: 'Gramatika'; src: url('./fonts/Gramatika-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('./fonts/Gilroy-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('./fonts/Gilroy-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('./fonts/Gilroy-Semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('./fonts/Gilroy-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ======================================================================= 1. ЦВЕТА — сырая палитра брендбука Меняются только по согласованию с брендбуком. В компонентах используйте смысловые переменные из раздела 2. ===================================================================== */ /* Взрослая палитра (Лавиани, интерфейс, деловые разделы) */ --palette-cream: #FFFAF4; /* фон всего портала */ --palette-graphite: #2D2926; /* Pantone Black C — основной текст */ --palette-cadet: #226181; /* Pantone 4161 C — основной акцент */ --palette-slate: #B1C3D8; /* Light Slay Grey — рамки, спокойный фон */ --palette-feminine: #D56B91; /* Pantone 7423 C — женское направление */ /* Детская палитра (Бэбибум): яркий + бледный к каждому цвету */ --palette-lilac: #964EB8; /* Pantone 3559 C */ --palette-lilac-soft: #F7E7FE; --palette-orange: #FF8832; /* Pantone 1575 C */ --palette-orange-soft: #FECEAB; --palette-blue: #65BAE7; /* Pantone 2915 C */ --palette-blue-soft: #C8ECFF; --palette-yellow: #FFD338; /* Pantone 122 C */ --palette-yellow-soft: #FEEFB8; --palette-green: #229844; /* Pantone 7739 C */ --palette-green-soft: #E2F8E8; /* Служебные оттенки, выведенные из палитры (в брендбуке их нет) */ --palette-graphite-70: #6B6663; /* второстепенный текст, контраст 5.5:1 */ --palette-graphite-50: #767069; /* подписи, плейсхолдеры, контраст 4.7:1 */ --palette-graphite-25: #A8A4A1; /* ТОЛЬКО декор и выключенные элементы: для текста контраст 2.4:1 — не проходит */ --palette-line: #E8E0D6; /* разделители на кремовом фоне */ --palette-white: #FFFFFF; /* ======================================================================= 2. ЦВЕТА — смысловые. Их и используйте в компонентах. ===================================================================== */ --color-bg: var(--palette-cream); --color-surface: var(--palette-white); /* карточки, поля ввода */ --color-surface-muted: #F6F1EA; /* вложенные блоки */ --color-line: var(--palette-line); --color-line-strong: var(--palette-slate); --color-text: var(--palette-graphite); --color-text-secondary: var(--palette-graphite-70); --color-text-muted: var(--palette-graphite-50); --color-text-disabled: var(--palette-graphite-25); --color-text-inverse: var(--palette-cream); /* Какой текст класть на цветную плашку. Посчитано по норме 4.5:1. */ --color-on-accent: var(--palette-cream); /* на Cadet — 6.8:1 */ --color-on-lilac: var(--palette-white); /* на Lilac — 5.2:1 */ --color-on-danger: var(--palette-white); /* на Danger — 5.7:1 */ --color-on-orange: var(--palette-graphite); /* на Orange — 6.1:1 */ --color-on-blue: var(--palette-graphite); /* на Blue — 6.7:1 */ --color-on-yellow: var(--palette-graphite); /* на Yellow — 10:1 */ --color-on-soft: var(--palette-graphite); /* на бледных оттенках */ --color-accent: var(--palette-cadet); /* кнопки, ссылки, активное */ --color-accent-hover: #1A4E68; --color-accent-soft: #E7EFF4; /* фон активного пункта меню */ /* Статусы. Зелёный и оранжевый — из детской палитры, красный выведен отдельно: в брендбуке цвета ошибки нет, взят тёмный оттенок Feminine, чтобы не спорить с палитрой. Пара к каждому статусу: -bg — подложка, основной — иконка и рамка, -text — надпись (затемнён, чтобы читался на кремовом фоне). */ --color-success: var(--palette-green); --color-success-bg: var(--palette-green-soft); --color-success-text: #157033; /* контраст 6.0:1 */ --color-warning: var(--palette-orange); --color-warning-bg: var(--palette-orange-soft); --color-warning-text: #9A4500; /* контраст 6.3:1 */ --color-danger: #B33A5B; --color-danger-bg: #FBE6EC; --color-danger-text: #B33A5B; /* контраст 5.5:1 */ --color-info: var(--palette-cadet); --color-info-bg: var(--palette-blue-soft); --color-info-text: var(--palette-cadet); /* Цветовое кодирование разделов портала (см. docs/03-modules.md). Один раздел — один цвет, повторно не используется. */ --color-section-news: var(--palette-blue); --color-section-learning: var(--palette-lilac); --color-section-docs: var(--palette-cadet); --color-section-ideas: var(--palette-yellow); --color-section-assistant: var(--palette-green); --color-section-people: var(--palette-orange); /* Green и Feminine — средние по светлоте: текста на них не хватает контраста ни белого, ни графитового. Используем их только как заливку иконок, полосок и меток, без текста поверх. */ /* Юрлица */ --color-brand-kids: var(--palette-blue); /* Бэбибум */ --color-brand-adult: var(--palette-cadet); /* Лавиани */ --color-focus: var(--palette-cadet); /* кольцо фокуса */ /* ======================================================================= 3. ТИПОГРАФИКА Gramatika — заголовки (шрифт логотипа, лицензия Temporary State). Gilroy — интерфейс и текст: есть 4 начертания, Gramatika только одно. ===================================================================== */ --font-display: 'Gramatika', 'Gilroy', -apple-system, 'Segoe UI', sans-serif; --font-body: 'Gilroy', -apple-system, 'Segoe UI', Roboto, sans-serif; /* Размеры. Пропорции брендбука (x : 3x) пересчитаны под экран телефона и под сотрудников 45+: базовый текст 18 px, мельче 15 px не опускаемся. */ --text-h1: 32px; --text-h2: 26px; --text-h3: 22px; --text-lead: 20px; /* вводный абзац, ответ помощника */ --text-body: 18px; /* базовый текст портала */ --text-small: 16px; /* второстепенное */ --text-caption: 15px; /* подписи, даты — минимально допустимый размер */ /* На широком экране заголовки крупнее — см. медиазапрос ниже. */ --leading-tight: 1.15; /* крупные заголовки */ --leading-snug: 1.3; /* мелкие заголовки */ --leading-normal: 1.5; /* текст */ --leading-loose: 1.6; /* длинные статьи, база знаний */ --tracking-tight: -0.02em; /* заголовки на Gramatika */ --tracking-normal: 0; --tracking-wide: 0.04em; /* КАПС в подзаголовках */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ======================================================================= 4. РАЗМЕРЫ И ОТСТУПЫ — шаг 4 px ===================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --gutter: 16px; /* боковые поля на телефоне */ --gutter-wide: 32px; /* боковые поля на компьютере */ --content-max: 720px; /* ширина колонки текста */ --page-max: 1200px; /* ширина всей страницы */ /* Зоны нажатия. Минимум 48 px — требование из docs/01-vision.md. */ --tap-min: 48px; --control-h: 56px; /* кнопки и поля ввода по умолчанию */ --control-h-sm: 48px; /* компактные кнопки, нижняя граница */ --nav-h: 64px; /* нижнее меню PWA */ /* ======================================================================= 5. СКРУГЛЕНИЯ, ТЕНИ, ПРОЧЕЕ Брендбук: у графических фигур углы острые, у карточек палитры — мягкое скругление. В интерфейсе скругляем, фигуры оставляем острыми. ===================================================================== */ --radius-sm: 8px; --radius-md: 14px; /* кнопки, поля ввода */ --radius-lg: 20px; /* карточки */ --radius-xl: 28px; /* крупные блоки, модальные окна */ --radius-full: 999px; /* аватарки, теги */ --shadow-sm: 0 1px 2px rgba(45, 41, 38, 0.06); --shadow-md: 0 4px 16px rgba(45, 41, 38, 0.08); --shadow-lg: 0 12px 32px rgba(45, 41, 38, 0.12); --border-width: 1px; --focus-ring: 0 0 0 3px rgba(34, 97, 129, 0.35); --transition-fast: 120ms ease; --transition-base: 200ms ease; --z-header: 100; --z-nav: 200; --z-modal: 400; --z-toast: 500; } /* Крупный экран: заголовки и поля больше, ближе к пропорциям брендбука */ @media (min-width: 768px) { :root { --text-h1: 44px; --text-h2: 34px; --text-h3: 26px; --text-lead: 22px; --gutter: var(--gutter-wide); } } /* Режим «крупный текст» — переключатель в профиле (docs/01-vision.md). Ставится атрибутом на : */ :root[data-text-size='large'] { --text-h1: 38px; --text-h2: 30px; --text-h3: 25px; --text-lead: 23px; --text-body: 21px; --text-small: 19px; --text-caption: 17px; --control-h: 60px; --control-h-sm: 52px; } @media (min-width: 768px) { :root[data-text-size='large'] { --text-h1: 52px; --text-h2: 40px; --text-h3: 30px; } } /* Тёмной темы у портала нет: брендбук построен на кремовом фоне, а аудитория 45+ читает с телефона при дневном свете. Если понадобится — заводим отдельный набор значений здесь, а не правим палитру. */ /* ---------- Базовые стили страницы -------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0 0 var(--space-4); } h1 { font-size: var(--text-h1); } h2 { font-size: var(--text-h2); line-height: var(--leading-snug); } h3 { font-size: var(--text-h3); line-height: var(--leading-snug); } a { color: var(--color-accent); text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* =========================================================================== Тема «Лавиани». Включается атрибутом на : data-brand="laviani". Цвета взяты из брендбука стоматологии (brand-laviani/brandbook-laviani.pdf): #344E46 branded green, #010101 dark graphite, #FFFFFF pure white, #DBD6D2 beige. Брендбук даёт четыре цвета, интерфейсу нужно больше — остальные выведены из этих четырёх смешением и проверены на контраст. Ни одного постороннего оттенка не введено. =========================================================================== */ :root[data-brand='laviani'] { /* --- Фирменные цвета как есть --- */ --palette-lav-green: #344E46; /* branded green — основной фирменный */ --palette-lav-graphite: #010101; /* dark graphite — только текст */ --palette-lav-white: #FFFFFF; /* pure white — основной цвет №3 */ --palette-lav-beige: #DBD6D2; /* beige — основной цвет №2 */ --palette-lav-sage: #AFBFBB; /* встречается в макетах брендбука */ /* --- Поверхности --- */ --color-bg: var(--palette-lav-beige); --color-surface: var(--palette-lav-white); --color-surface-muted: #EBE8E6; /* бежевый, осветлённый белым на 45% */ --color-line: #C1BCB9; /* бежевый, затемнённый графитом на 12% */ --color-line-strong: var(--palette-lav-sage); /* --- Текст. Контраст посчитан к бежевому фону --- */ --color-text: var(--palette-lav-graphite); /* 14,5:1 */ --color-text-secondary: #545250; /* 5,4:1 */ --color-text-muted: #5E5C5A; /* 4,6:1 */ --color-text-disabled: #8C8986; /* только неактивное */ --color-text-inverse: var(--palette-lav-white); /* --- Акцент --- */ --color-accent: var(--palette-lav-green); /* 6,3:1 на фоне */ --color-accent-hover: #273B35; /* зелёный темнее на 25% */ --color-accent-soft: #E7EAE9; /* зелёный, осветлённый на 88% */ --color-on-accent: var(--palette-lav-white); /* 9,0:1 на кнопке */ --color-focus: var(--palette-lav-green); --focus-ring: 0 0 0 3px rgba(52, 78, 70, .35); /* --- Статусы. Оттенки затемнены: на бежевом фоне исходные не проходили --- */ --color-success-text: #146A30; /* было #157033 — 4,3:1, стало 4,6:1 */ --color-warning-text: #984400; /* было #9A4500 — 4,5:1 впритык */ --color-danger-text: #A13452; /* было #B33A5B — 4,0:1, стало 4,7:1 */ /* --- Шрифт заголовков. В файле только Regular, и этого достаточно: font-display применяется к заголовку раздела (400) и к цифрам, а подзаголовки и кнопки набираются вторым шрифтом. --- */ --font-display: 'TT Drugs', 'Gilroy', -apple-system, 'Segoe UI', sans-serif; } /* Шрифт стоматологии «Лавиани». Лицензия на веб-встраивание подтверждена. Формат woff2: вдвое легче исходного otf, кириллица полная. */ @font-face { font-family: 'TT Drugs'; src: url('/brand-laviani/TTDrugs-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; /* текст виден сразу, шрифт подменяется по загрузке */ }