/* Интегра — дизайн-токены. Единственный источник цветов/размеров/радиусов. Тема переключается атрибутом data-portal="patient"|"doctor" на (проставляется в base_public.html из request.portal). См. брендбук. */ :root { /* Палитра бренда */ --brand-green: #3E9B4F; --brand-green-hover: #35894A; --brand-green-light: #4CB05E; --brand-blue: #4E8ECF; --brand-indigo: #4866C8; --brand-violet: #7A5AC9; --brand-orange: #D98B35; --brand-coral: #D76A5C; --brand-yellow: #F0B429; /* Семантика статусов — НЕ общие: значения ниже в блоках тем (ЭТАП 3, ТЗ №11). Один и тот же лёгкий акцент не может одновременно давать ≥4.5:1 на белом (пациент) и на тёмно-синем (врач) — поэтому у каждой темы свой набор, проверенный инструментом (WCAG-контраст), а не на глаз. См. также --surface-soft в блоках тем. */ /* Радиусы */ --r-card: 16px; --r-panel: 14px; --r-btn: 12px; --r-input: 12px; --r-cover: 10px; --r-pill: 999px; /* Отступы (шаг 4) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; /* Тени */ --shadow-raise: 0 12px 32px rgba(20, 40, 30, .12); --shadow-none: none; /* Движение */ --ease: cubic-bezier(.2, .8, .2, 1); --dur-fast: 150ms; --dur: 200ms; --dur-slow: 250ms; /* Сетка */ --container: 1200px; --read-width: 680px; --gutter: 24px; /* Типографика — семейства. Пара для чтения не утверждена заказчиком — по правилу брендбука (п.4.1) --font-read = --font-ui, размер чтения компенсируется через --fs-read/--lh-read в теме. */ --font-ui: 'Montserrat', 'Golos Text', Arial, sans-serif; --font-read: 'Montserrat', 'Golos Text', Arial, sans-serif; } /* ---------- Тема «Пациенты»: светлая, тёплая, крупнее ---------- */ :root, [data-portal="patient"] { --bg: #F4F6F5; --bg-hero: linear-gradient(180deg, #F4F6F5 0%, #E9F3EB 100%); --surface: #FFFFFF; --surface-soft: #EEF5F0; --text: #1B2E3E; --text-2: #5A6B62; --text-3: #9AA6A0; --line: #E4EAE6; --primary: var(--brand-green); --primary-hover: var(--brand-green-hover); --on-primary: #FFFFFF; --accent: var(--brand-green); /* Семантика статусов — затемнены относительно --brand-* ровно настолько, чтобы дать ≥4.5:1 и на белом --surface, и на собственном --*-bg (проверено WCAG-контрастом, см. ТЗ №11 п.3). */ --ok: #327C3F; --ok-bg: #EEF5F0; --info: #306FB0; --info-bg: #EAF2FA; --warn: #9C601D; --warn-bg: #FBF1E6; --err: #BF3F2F; --err-bg: #FDECEA; --locked: #637069; --locked-bg: #F0F2F1; --fs-display: 44px; --fs-h1: 34px; --fs-h2: 28px; --fs-h3: 22px; --fs-body: 17px; --fs-read: 18px; --fs-small: 15px; --fs-label: 13px; --lh-body: 1.55; --lh-read: 1.65; --btn-h: 52px; --input-h: 52px; --section-gap: 96px; } /* ---------- Тема «Врачи»: тёмная сине-зелёная, строгая, плотнее ---------- */ [data-portal="doctor"] { --bg: #12212E; --bg-hero: linear-gradient(180deg, #12212E 0%, #132A20 100%); --surface: #1B2E3E; --surface-soft: #16323F; --text: #F2F5F3; --text-2: #AEC4B8; --text-3: #7C8F86; --line: rgba(255, 255, 255, .08); --primary: var(--brand-green); --primary-hover: var(--brand-green-light); --on-primary: #FFFFFF; --accent: var(--brand-blue); /* Семантика статусов — осветлены относительно --brand-* и дополнены тёмными «-bg» (вместо бледных общих): бледный --*-bg не адаптирован под тёмный фон — баг найден на плашке замка (ТЗ №9), здесь чинится системно для всех пяти. Каждая пара проверена ≥4.5:1 на --bg, --surface, --surface-soft и на собственном --*-bg. */ --ok: #44AB57; --ok-bg: #15351B; --info: #639CD5; --info-bg: #15314D; --warn: #D98B35; --warn-bg: #492D0E; --err: #DC7D70; --err-bg: #551C15; --locked: #9AA6A0; --locked-bg: #333A37; --fs-display: 40px; --fs-h1: 32px; --fs-h2: 26px; --fs-h3: 20px; --fs-body: 16px; --fs-read: 17px; --fs-small: 14px; --fs-label: 12px; --lh-body: 1.55; --lh-read: 1.65; --btn-h: 48px; --input-h: 48px; --section-gap: 80px; } /* ---------- Мобильные переопределения ---------- */ @media (max-width: 768px) { [data-portal="patient"] { --fs-display: 32px; --fs-h1: 28px; --fs-h2: 24px; --section-gap: 56px; } [data-portal="doctor"] { --fs-display: 30px; --fs-h1: 26px; --fs-h2: 22px; --section-gap: 40px; } } /* ---------- Обратная совместимость (см. ЭТАП 1.5) ---------- Старые имена переменных из ранних ТЗ маппятся на новые токены — единственный ИСТОЧНИК значений здесь, ни одного захардкоженного hex в остальном CSS. Постепенно site.css переведён на новые имена напрямую; алиасы ниже — только на случай, если что-то было пропущено. */ :root { --color-bg: var(--bg); --color-surface: var(--surface); --color-surface-alt: var(--surface-soft); --color-text: var(--text); --color-text-muted: var(--text-2); --color-border: var(--line); --color-primary: var(--primary); --color-primary-dark: var(--primary-hover); --color-danger: var(--err); --color-accent: var(--accent); --radius: var(--r-card); --radius-sm: var(--r-btn); --shadow: var(--shadow-raise); --header-height: 62px; }