/* ============================================================================ RANCH-SCHOOL «Qabul» — дизайн-токены (v3: aside-меню, мастер шагов, Manrope) Визуальный язык: продолжение сайта ranch.university (Urganch RANCH Texnologiya Universiteti). Значения взяты из :root сайта (index.css): --primary #FF0D0D, --primary-dark #cc0a0a, --heading-color #2e0a13, --default-color #212529, --bg-light #f8fafc, --border-color #e2e8f0, --success #059652, --error #ef4444, --warning #f59e0b, --info #3b82f6, --background-dark #252525, --footer-background #212529, радиусы 8/12/16/50, тени shadow-sm/md/lg/primary, кнопка .btn-primary-theme (градиент primary→primary-dark, pill, 12px 24px, weight 600, hover translateY(-2px)). Что нового в v4: --chart-* (дашборд), --drawer-w (карточка договора); html[data-role] управляет видимостью [data-role]. Что нового в v3 (см. docs/art-direction.md): - Шрифты: только Manrope (UI и цифры с tnum), локально; моно отключён, app/fonts/*.woff2, подключаются через @import ниже. Системный стек — только запасной. - Каркас: красный aside слева (--sidebar-*) + белая верхняя панель контента (--topbar-h 56) вместо двухстрочной шапки. - Мастер шагов: токены --stepper-*, --wizard-max-w. - Плотность: поле 44 px, строка таблицы 52 px, сетка полей gap 16/20. Подключать первым: Правила: - Компоненты берут цвета ТОЛЬКО из токенов (var(--...)), никаких литералов. - По умолчанию ВСЕГДА светлая тема. Тёмная — только ручной переключатель :root[data-theme="dark"]; prefers-color-scheme НЕ используется. - Контраст текста к фону проверен численно (scratchpad/contrast2.py), все текстовые пары ≥ 4.5:1 (WCAG AA), нетекстовые рамки ≥ 3:1; цифры указаны в комментариях. Единственное осознанное исключение — белый текст на фирменном #FF0D0D в верхней части aside (3.95:1): это цвет сайта заказчика; смягчён кеглем 14 px / weight 600, а низ aside и активный пункт лежат на более тёмном/белом (≥ 4.5:1). ========================================================================== */ /* ---- Шрифты: локальные woff2, сеть не нужна (CSP font-src 'self'). @import обязан стоять первым правилом файла. */ @import url("fonts/fonts.css"); /* JetBrains Mono больше не используется, файлы оставлены на случай возврата */ :root { color-scheme: light; /* ---- Бренд: красный RANCH — ГЛАВНЫЙ цвет действия, как на сайте --------- */ --primary: #FF0D0D; /* aside (верх), логотип, номер текущего шага, левая рамка «avto» */ --primary-dark: #CC0A0A; /* aside (низ градиента), конец градиента кнопки; белый на нём 5.8:1 */ --primary-mid: #E60C0C; /* середина aside, hover активного пункта; белый на нём 4.75:1 */ --primary-light: #FF4444; /* hover ссылок в тёмной теме, декоративные штрихи */ --primary-text: #C40A0A; /* красный ТЕКСТ на белом: ссылки, «tahrirlash», активный пункт aside: 6.2:1 / 5.9:1 на bg */ --primary-tint: #FFF0F0; /* = rgba(255,13,13,.06) на белом: активный фильтр, выделенная строка, «avto» */ --primary-tint-2: #FFE1E1; /* = rgba(255,13,13,.12): hover по красной строке/чипу */ --on-primary: #FFFFFF; /* текст на красном */ --on-primary-muted: rgba(255, 255, 255, 0.82); /* второстепенное в aside: подпись «Qabul · год», подписи карточки хранилища */ --on-primary-line: rgba(255, 255, 255, 0.22); /* разделители в aside */ /* Градиенты — ровно как .btn-primary-theme / .dac-card сайта */ --grad-primary: linear-gradient(135deg, #FF0D0D 0%, #CC0A0A 100%); /* кнопка, полоса карточки расчёта; белый на середине 4.75:1 */ --grad-header: linear-gradient(180deg, #FF0D0D 0%, #F00C0C 100%); /* v2: строка шапки; в v3 — мобильная панель с бургером */ /* ---- Aside (боковое меню) ------------------------------------------------ */ --sidebar-w: 248px; --sidebar-w-collapsed: 72px; --sidebar-bg: linear-gradient(180deg, #FF0D0D 0%, #E60C0C 55%, #CC0A0A 100%); /* как красная шапка сайта, глубже к низу */ --sidebar-text: #FFFFFF; /* пункты меню */ --sidebar-text-muted: rgba(255, 255, 255, 0.82); /* подписи «RANCH SCHOOL / Qabul», карточка хранилища */ --sidebar-hover: rgba(255, 255, 255, 0.12); /* hover пункта */ --sidebar-active-bg: #FFFFFF; /* активный пункт: белая плашка радиус 10 */ --sidebar-active-text: #C40A0A; /* текст/иконка активного: 6.2:1 на белом */ --sidebar-card-bg: rgba(255, 255, 255, 0.12); /* карточка статуса хранилища внизу */ --sidebar-card-border: rgba(255, 255, 255, 0.22); --sidebar-line: rgba(255, 255, 255, 0.22); /* разделители внутри aside */ --sidebar-shadow: 4px 0 24px rgba(204, 10, 10, 0.18); /* тень aside над контентом */ --sidebar-item-h: 48px; /* высота пункта меню */ --sidebar-icon: 20px; /* иконка пункта */ /* ---- Верхняя панель контента (белая, тонкая) ----------------------------- */ --topbar-h: 56px; /* заголовок раздела слева, статус/UZ/RU/тема справа */ --topbar-bg: #FFFFFF; --topbar-border: #E2E8F0; --topbar-shadow: 0 1px 0 rgba(33, 37, 41, 0.04); /* ---- Мастер шагов -------------------------------------------------------- */ --stepper-h: 64px; /* полоса stepper над карточкой шага */ --stepper-dot: 32px; /* кружок с номером / галочкой */ --stepper-line: 2px; /* соединительная линия между шагами */ --stepper-done: #059652; /* пройденный шаг: галочка (= --ok-border) */ --stepper-todo: #CBD5E1; /* недоступный/будущий шаг: рамка кружка и линия (нетекстовое, 1.5:1 — декор) */ --stepper-todo-text: #6B7280; /* подпись будущего шага: 4.8:1 */ --wizard-max-w: 760px; /* карточка текущего шага */ /* ---- Поверхности: белые карточки на светло-сером, как контент сайта ----- */ --bg: #F8FAFC; /* --bg-light сайта: фон области контента под карточками */ --surface: #FFFFFF; /* карточка-шаг, панель расчёта, поле, таблица */ --surface-2: #F1F5F9; /* шапка таблицы, неактивные чипы, полосы */ --surface-ro: #F8FAFC; /* поле «только для чтения» */ --overlay: rgba(33, 37, 41, 0.35); /* подложка диалогов и выезжающего aside на светлом фоне */ --footer-bg: #212529; /* --footer-background сайта */ --footer-text: #CED4DA; /* --footer-text-muted: 10.3:1 на footer-bg */ /* ---- Текст --------------------------------------------------------------- */ --text: #212529; /* --default-color сайта: 15.4:1 на surface, 14.7:1 на bg */ --heading: #2E0A13; /* --heading-color сайта: заголовки, «Jami»: 18:1 */ --text-2: #5B6472; /* подписи полей, вторичный (6.0:1 / 5.7:1) */ --text-3: #5B6472; /* = --text-2: в интерфейсе только два серых — текст и вторичный */ --text-inverse: #FFFFFF; /* ---- Границы ------------------------------------------------------------- */ --border: #E2E8F0; /* --border-color сайта: рамки карточек, разделители */ --border-light: rgba(0, 0, 0, 0.06); /* едва заметная рамка карточки */ --border-input: #8290A3; /* рамка поля ввода: 3.25:1 на белом (нетекстовый UI ≥ 3:1) */ --border-strong: #5B6472; /* рамка при hover поля */ /* ---- Семантика: цвет = смысл. fg (текст/иконка) · bg (подложка) · border -- */ --error: #B91C1C; /* текст ошибки: 6.5:1 на белом, 5.9:1 на error-bg */ --error-bg: #FEF2F2; --error-border: #EF4444; /* --error-color сайта; как рамка 3.8:1; красная точка на stepper */ --warn: #92400E; /* 7.1:1 / 6.8:1 */ --warn-bg: #FFFBEB; --warn-border: #F59E0B; --ok: #047A43; /* 5.4:1 / 5.2:1 */ --ok-bg: #ECFDF5; --ok-border: #059652; /* точка «Saqlangan», галочка пройденного шага, рамка 3.8:1 */ --info: #1D4ED8; /* 6.7:1 / 6.2:1 */ --info-bg: #EFF6FF; --info-border: #3B82F6; /* «Заполнено системой» — в цветах бренда */ --auto: #C40A0A; /* чип «avto»: 5.25:1 на auto-bg */ --auto-bg: #FFF0F0; --auto-border: #FF0D0D; /* ---- Аватар-инициалы (реестр, «найден родитель») -------------------------- */ --avatar-bg: #FFE1E1; /* = --primary-tint-2 */ --avatar-text: #C40A0A; /* 5.0:1 */ --avatar-size: 36px; /* ---- Графики дашборда (v4): один тихий тон для величины, красный — только акцент «сегодня» --------- */ --chart-bar: #7C8798; /* столбцы: нейтральный сине-серый, 3.6:1 на белом (нетекстовая метка ≥ 3:1) */ --chart-bar-hover: #5B6472; /* столбец под курсором */ --chart-grid: #E2E8F0; /* линии сетки — как --border */ --drawer-w: 520px; /* карточка договора справа */ /* ---- Фокус: красное кольцо + мягкая тень ---------------------------------- */ --focus-ring: #FF0D0D; --focus-width: 2px; --focus-offset: 1px; --focus-shadow: 0 0 0 3px rgba(255, 13, 13, 0.18); /* ---- Типографика --------------------------------------------------------- UI — Manrope (variable 400–800, латиница + кириллица, локально). Моно — JetBrains Mono, ТОЛЬКО для ЖШШИР, паспорта, свидетельства, телефона и сумм. Системные стеки — запасные, если woff2 не загрузились. */ --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Ubuntu, Arial, sans-serif; --font-sans: var(--font-ui); /* совместимость с v2-селекторами */ /* Моноширинный шрифт отключён по требованию заказчика: цифры и идентификаторы набираются тем же Manrope с табличными цифрами (tnum), без «кирпичного» вида. */ --font-mono: var(--font-ui); /* Шкала под Manrope (крупная x-высота: 14 читается как 15 у Roboto) */ --fs-2xs: 13px; /* минимальный кегль интерфейса: caps-надписи, шапка таблицы, чипы (меньше — только печать) */ --fs-xs: 13px; /* подсказки под полем (видны только в фокусе/ошибке), сноски */ --fs-sm: 14px; /* подписи полей (600), вторичный текст */ --fs-md: 16px; /* базовый: тело, поля ввода, пункты меню, кнопки */ --fs-lg: 18px; /* заголовок панели расчёта, имя в карточке «найден», кнопка Davom etish */ --fs-xl: 24px; /* заголовок шага, заголовок раздела в верхней панели */ --fs-2xl: 28px; /* заголовок экрана блокировки, счётчики реестра */ --fs-3xl: 32px; /* «Jami» — итоговая сумма договора */ --fs-table: 15px; /* ячейки таблицы реестра */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-base: 1.45; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* подписи полей, пункты меню, кнопки */ --fw-bold: 700; /* заголовки карточек, активный пункт, № договора */ --fw-extrabold: 800; /* заголовок раздела, «Jami», логотип-подпись */ --tracking-caps: 0.08em; /* надписи ЗАГЛАВНЫМИ 11–12 px */ --tracking-h1: -0.02em; /* заголовки ≥ 22 px (Manrope 700–800 плотнее без воздуха между буквами) */ --tracking-h2: -0.01em; /* заголовки 18 px */ --tracking-num: 0; /* суммы в моно — без трекинга */ /* ---- Шкала 4px ------------------------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ---- Сетка полей ---------------------------------------------------------- */ --grid-cols: 12; --grid-gap-x: 20px; /* между колонками */ --grid-gap-y: 16px; /* между строками полей */ /* ---- Размеры элементов --------------------------------------------------- */ --control-h: 48px; /* поле, select, кнопка */ --control-h-sm: 40px; /* сегмент-pill, чипы фильтров, мелкие кнопки */ --control-h-lg: 48px; /* главная pill-кнопка (= control-h) */ --control-px: var(--sp-3); --row-h: 56px; /* строка таблицы реестра — под аватар 36 + две строки 15px */ --panel-w: 380px; /* карточка расчёта справа от мастера */ --form-max-w: var(--wizard-max-w); --container-w: 1320px; /* макс. ширина контентной области */ --header-h: 64px; /* v2, не используется в v3 (удалить после миграции styles.css) */ --header-line: 3px; /* v2, см. выше */ --step-no: 32px; /* = --stepper-dot; кружок номера шага в сводке */ --heading-line-w: 40px; /* короткая красная черта под заголовком карточки (60×3 на сайте; здесь короче) */ --heading-line-h: 3px; --calc-stripe-h: 4px; /* красная полоса сверху карточки расчёта */ /* ---- Радиусы: как на сайте --------------------------------------------- */ --r-sm: 8px; /* поля, чипы, выпадающие списки */ --r-md: 12px; /* карточки, карточка «найден в базе», активный пункт aside (10) */ --r-lg: 16px; /* карточка расчёта, экран блокировки, диалоги */ --r-xl: 24px; /* крупные баннеры (редко) */ --r-pill: 50px; /* кнопки, чипы-фильтры, сегмент UZ/RU */ /* ---- Тени: shadow-sm/md/lg/primary сайта ------------------------------- */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 10px rgba(0, 0, 0, 0.06); /* карточка в покое (рамок у карточек нет) */ --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.10); /* карточка hover, выпадающие списки, tooltip */ --shadow-3: 0 10px 40px rgba(0, 0, 0, 0.12); /* карточка расчёта, экран блокировки */ --shadow-primary: 0 8px 25px rgba(255, 13, 13, 0.25); /* hover главной кнопки */ --shadow-header: 0 2px 12px rgba(204, 10, 10, 0.25); /* мобильная красная панель */ /* ---- Движение: как на сайте, но короче ---------------------------------- */ --dur-fast: 120ms; /* hover рамки, цвет */ --dur-base: 200ms; /* подъём кнопки, смена шага, сворачивание aside */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ---- Z-index -------------------------------------------------------------- */ --z-sticky: 10; --z-dropdown: 20; --z-topbar: 30; --z-sidebar: 40; --z-header: 50; /* v2-имя; мобильная панель с бургером */ --z-tooltip: 60; --z-lock: 100; } /* ============================================================================ Тёмная тема — ВТОРИЧНА, только ручной переключатель (#theme-toggle пишет data-theme на ). Основа — --background-dark сайта #252525. Aside остаётся красным (чуть глубже), контент темнеет. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --primary-text: #FF6B6B; /* 5.5:1 на bg, 4.9:1 на surface */ --primary-tint: #472A2A; --primary-tint-2: #5A2E2E; --grad-header: linear-gradient(180deg, #E60C0C 0%, #CC0A0A 100%); --sidebar-bg: linear-gradient(180deg, #E60C0C 0%, #CC0A0A 60%, #B00909 100%); --sidebar-active-bg: #FFFFFF; --sidebar-active-text: #C40A0A; --sidebar-shadow: 4px 0 24px rgba(0, 0, 0, 0.45); --topbar-bg: #2E2E2E; --topbar-border: #3F3F3F; --topbar-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); --stepper-todo: #4A4A4A; --stepper-todo-text: #9AA3AE; --bg: #252525; --surface: #2E2E2E; --surface-2: #383838; --surface-ro: #2A2A2A; --overlay: rgba(0, 0, 0, 0.6); --footer-bg: #1A1A1A; --footer-text: #CED4DA; --text: #F1F5F9; /* 12.4:1 на surface */ --heading: #FFFFFF; --text-2: #B3BCC8; /* 7.1:1 */ --text-3: #B3BCC8; /* = --text-2 (два серых) */ --text-inverse: #212529; --border: #3F3F3F; --border-light: rgba(255, 255, 255, 0.06); --border-input: #737D8A; /* 3.25:1 на surface */ --border-strong: #B3BCC8; --error: #FCA5A5; --error-bg: #3B1F1F; --error-border: #EF4444; --warn: #FBBF24; --warn-bg: #3A2E12; --warn-border: #F59E0B; --ok: #6EE7A8; --ok-bg: #173226; --ok-border: #059652; --info: #93C5FD; --info-bg: #1C2A44; --info-border: #3B82F6; --auto: #FF6B6B; --auto-bg: #472A2A; --auto-border: #FF0D0D; --avatar-bg: #5A2E2E; --avatar-text: #FF9A9A; /* 6.1:1 */ --chart-bar: #94A3B8; /* на #2E2E2E 4.6:1 */ --chart-bar-hover: #CBD5E1; --chart-grid: #3F3F3F; --focus-shadow: 0 0 0 3px rgba(255, 13, 13, 0.32); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 10px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-3: 0 10px 40px rgba(0, 0, 0, 0.6); --shadow-header: 0 2px 12px rgba(0, 0, 0, 0.5); } /* ============================================================================ Базовые правила, которые следуют из токенов (не компоненты — основа) ========================================================================== */ html { font-family: var(--font-ui); font-size: var(--fs-md); line-height: var(--lh-base); color: var(--text); background: var(--bg); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; /* цифры одной ширины и в Manrope (tnum) */ font-feature-settings: "tnum" 1; } body { margin: 0; background: var(--bg); color: var(--text); } h1, h2, h3, h4, legend { color: var(--heading); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-h2); text-wrap: balance; } h1, h2 { font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-h1); } /* Моноширинный — ТОЛЬКО идентификаторы и суммы (ЖШШИР, паспорт, свидетельство, телефон, деньги). Обычные текстовые поля — основным шрифтом. */ .num, .mono, input[data-kind="pinfl"], input[data-kind="passport"], input[data-kind="birthcert"], input[data-kind="phone"], input[data-kind="money"] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-num); } /* Единое кольцо фокуса для клавиатуры — красное, как бренд */ :focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); box-shadow: var(--focus-shadow); } :focus:not(:focus-visible) { outline: none; } /* На красном aside (и мобильной красной панели) кольцо фокуса — белое */ .sidebar :focus-visible, .site-header :focus-visible, .mobile-bar :focus-visible { outline-color: var(--on-primary); box-shadow: none; } ::selection { background: var(--primary-tint-2); color: var(--text); } ::placeholder { color: var(--text-3); opacity: 1; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; } *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } } /* Печать: только предпросмотр договора, чёрным по белому */ @media print { :root, :root[data-theme="dark"] { color-scheme: light; --bg: #FFFFFF; --surface: #FFFFFF; --text: #000000; --text-2: #000000; --heading: #000000; --border: #000000; } body { background: #FFFFFF; } body > *:not(.print-root) { display: none !important; } .no-print { display: none !important; } }