/* Room Profile — дизайн-система (токены). * * СОБРАНО АВТОМАТИЧЕСКИ из docs/design/export/tokens/ — РУКАМИ НЕ ПРАВИТЬ. * Источник истины — дизайн-проект в Claude Design. Порядок правок: * 1) меняем в дизайн-проекте 2) экспортируем в docs/design/export/ * 3) python scripts/sync_design_tokens.py * * Шрифт заголовков Onest подключается отдельно — static/css/onest.css (self-host). * Собрано из: colors.css, typography.css, fonts.css, spacing.css, radius-shadow.css */ /* ===== colors.css ===== */ /* Цвета Room Profile — схема v2 «оранжевый сигнальный». * Базовые ступени (--rp-ink-*, --rp-brand-*) + семантические алиасы (--rp-text-*, --rp-surface-*). * Правило акцента: оранжевый — ТОЛЬКО кнопки, активные состояния и акцент логотипа. Не заливать им площади. * Графит — рама интерфейса (шапка/подвал). Зелёный только «в наличии», красный только акция. Синий/бирюзу как декор НЕ вводим. */ :root { /* --- Графит: основной тёмный, «металл» --- */ --rp-ink-900: #0B1220; --rp-ink-800: #0F172A; /* базовый графит — шапка, плашка логотипа, заголовки */ --rp-ink-700: #1E293B; --rp-ink-600: #334155; --rp-ink-500: #475569; --rp-ink-400: #64748B; /* второстепенный текст */ --rp-ink-300: #94A3B8; /* подсказки */ --rp-ink-200: #CBD5E1; --rp-ink-100: #E2E8F0; /* границы */ --rp-ink-50: #F1F5F9; /* фон-подложка */ /* --- Оранжевый сигнальный: акцент, кнопки, активные состояния --- */ --rp-brand-700: #C2410C; /* нажатие */ --rp-brand-600: #EA580C; /* кнопки и текст на светлом (контраст 4.0+) */ --rp-brand-500: #F97316; /* базовый фирменный */ --rp-brand-400: #FB923C; /* акцент на тёмном фоне */ --rp-brand-100: #FFEDD5; /* заливка чипсов и бейджей */ --rp-brand-50: #FFF7ED; /* --- Служебные: смысл важнее красоты --- */ --rp-success: #16A34A; /* «в наличии» */ --rp-success-bg: #DCFCE7; --rp-success-ink: #14532D; --rp-danger: #DC2626; /* цена по акции, ошибки */ --rp-danger-bg: #FEE2E2; --rp-danger-ink: #7F1D1D; --rp-warning: #D97706; --rp-warning-bg: #FEF3C7; --rp-warning-ink: #78350F; --rp-info: #0284C7; /* редкие системные сообщения — не декор */ --rp-info-bg: #E0F2FE; /* --- Поверхности --- */ --rp-paper: #FFFFFF; /* карточки */ --rp-surface: #F8FAFC; /* фон страницы */ --rp-border: #E2E8F0; --rp-border-strong: #CBD5E1; /* --- Семантические алиасы текста --- */ --rp-text-strong: var(--rp-ink-800); /* заголовки */ --rp-text: var(--rp-ink-700); /* основной текст */ --rp-text-secondary: var(--rp-ink-600); --rp-text-muted: var(--rp-ink-400); /* второстепенный */ --rp-text-subtle: var(--rp-ink-300); /* подсказки, зачёркнутая цена */ --rp-text-inverse: #FFFFFF; --rp-text-link: var(--rp-brand-600); /* --- Семантические алиасы акцента --- */ --rp-accent: var(--rp-brand-500); --rp-accent-strong: var(--rp-brand-600); /* на светлом фоне */ --rp-accent-press: var(--rp-brand-700); --rp-accent-on-dark: var(--rp-brand-400); /* на графите */ --rp-accent-soft: var(--rp-brand-100); --rp-accent-tint: var(--rp-brand-50); --rp-accent-ink: #7C2D12; /* текст на brand-100 */ /* --- Семантические алиасы поверхностей --- */ --rp-surface-page: var(--rp-surface); --rp-surface-card: var(--rp-paper); --rp-surface-sunken: var(--rp-ink-50); --rp-surface-inverse: var(--rp-ink-800); /* графитовая рама: шапка/подвал */ --rp-surface-inverse-2: var(--rp-ink-700); /* --- Статусы товара --- */ --rp-stock: var(--rp-success); --rp-stock-bg: var(--rp-success-bg); --rp-sale: var(--rp-danger); --rp-sale-bg: var(--rp-danger-bg); } /* Откат фирменного цвета на старый индиго (v1) без переката кода. * Включается атрибутом: . Действует на компоненты на токенах. */ :root[data-design="v1"] { --rp-brand-700: #3730A3; --rp-brand-600: #4338CA; --rp-brand-500: #4F46E5; --rp-brand-400: #818CF8; --rp-brand-100: #E0E7FF; --rp-brand-50: #EEF2FF; } /* ===== typography.css ===== */ /* Типографика Room Profile. * Логотип — Archivo 800 (широкий индустриальный гротеск), но в SVG уже переведён в кривые: шрифт грузить НЕ нужно. * Интерфейс — системный стек: мгновенная отрисовка и нормальная кириллица на любом устройстве. * У Archivo нет кириллицы, поэтому весь UI-текст (в т.ч. крупные заголовки) — системный, набранный жирным с плотным трекингом. * Открытый вопрос из README репозитория: возможен отдельный кириллический дисплейный шрифт — тогда переопределить --rp-font-display. */ :root { --rp-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --rp-font-display: var(--rp-font-ui); /* крупные заголовки: тот же стек, вес 600–800, плотный трекинг */ --rp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* артикулы, цифры */ /* --- Шкала размеров --- */ --rp-text-xs: 12px; /* бейджи, подписи */ --rp-text-sm: 13px; /* вторичный текст, чипсы */ --rp-text-base: 15px; /* основной текст */ --rp-text-lg: 17px; --rp-text-xl: 20px; /* заголовок экрана (телефон) */ --rp-text-2xl: 24px; --rp-text-3xl: 30px; /* заголовок раздела (десктоп) */ --rp-text-4xl: 38px; /* герой */ --rp-text-5xl: 48px; /* крупный герой «продаём красивый ремонт» */ /* --- Насыщенность --- */ --rp-w-regular: 400; /* @kind font */ --rp-w-medium: 500; /* @kind font */ --rp-w-semibold: 600; /* @kind font */ --rp-w-bold: 700; /* @kind font */ --rp-w-display: 800; /* @kind font */ /* --- Межстрочный --- */ --rp-lh-tight: 1.1; /* @kind font */ --rp-lh-snug: 1.28; /* @kind font */ --rp-lh-normal: 1.55; /* @kind font */ --rp-lh-relaxed: 1.7; /* @kind font */ /* --- Трекинг: крупный текст сжимаем --- */ --rp-track-tight: -0.02em; /* @kind font */ --rp-track-snug: -0.015em; /* @kind font */ --rp-track-micro: -0.01em; /* @kind font */ --rp-track-normal: 0; /* @kind font */ --rp-track-wide: 0.02em; /* @kind font */ } /* ===== fonts.css ===== */ /* Дисплейный шрифт заголовков — Onest (кириллица, Google Fonts). Выбран заказчиком 20.07.2026. * Правка: заголовки чуть менее жирные — вес 600 (не 700/800). * Тело интерфейса, цифры и цены остаются системными (--rp-font-ui). * Self-host (опция): скачать Onest и заменить @import ниже на локальные @font-face. */ /* @import Google Fonts удалён при переносе: Onest у нас self-host, * см. static/css/onest.css и scripts/fetch_onest.sh */ :root { --rp-font-display: 'Onest', var(--rp-font-ui); --rp-w-heading: 600; /* @kind font */ } /* ===== spacing.css ===== */ /* Отступы и плотность Room Profile. * Плотнее первого черновика (правка Антона). Шаг сетки — 4px. */ :root { --rp-gap-xs: 4px; --rp-gap-sm: 8px; --rp-gap: 12px; /* базовый шаг между элементами */ --rp-gap-lg: 16px; --rp-gap-xl: 24px; --rp-gap-2xl: 32px; --rp-gap-3xl: 48px; /* --- Внутренние отступы по умолчанию --- */ --rp-pad-card: 12px; /* карточка товара (телефон) */ --rp-pad-card-lg: 16px; /* карточка товара (десктоп) */ --rp-pad-screen: 14px; /* поля экрана телефона */ /* --- Высота элементов управления: палец на телефоне --- */ --rp-tap-min: 44px; /* минимальная цель нажатия */ --rp-control-h: 38px; /* input, stepper */ --rp-control-h-sm: 32px; --rp-header-h: 56px; /* шапка приложения */ --rp-tabbar-h: 56px; /* нижнее меню */ /* --- Контейнер десктопа --- */ --rp-container: 1180px; --rp-container-pad: 28px; } /* ===== radius-shadow.css ===== */ /* Скругления и тени Room Profile. * Скругления умеренные (правка Антона «поменьше скругления»). * Тени только функциональные, без «мыла»: тонкая для карточек, заметнее — для наведения и оверлеев. */ :root { --rp-radius-sm: 6px; /* бейджи, мелкие кнопки */ --rp-radius: 8px; /* кнопки, инпуты, базовое */ --rp-radius-lg: 12px; /* карточки товара, панели */ --rp-radius-xl: 16px; /* нижние шторки */ --rp-radius-pill: 999px; /* чипсы категорий, аватар */ --rp-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --rp-shadow: 0 2px 8px rgba(15, 23, 42, .08); --rp-shadow-hover: 0 3px 12px rgba(15, 23, 42, .07); /* карточка при наведении */ --rp-shadow-lg: 0 12px 34px rgba(15, 23, 42, .16); /* оверлеи, окно помощника */ --rp-shadow-accent: 0 6px 18px rgba(234, 88, 12, .4); /* плавающая кнопка помощника */ /* Фокус с клавиатуры — доступность, видно всегда */ --rp-focus-ring: 0 0 0 2px var(--rp-surface-card), 0 0 0 4px var(--rp-brand-500); --rp-focus-outline: 2px solid var(--rp-brand-500); }