/* theme.css — единый источник дизайн-токенов и темизации Bootstrap. Подключается на КАЖДОЙ странице порядком: Bootstrap → theme.css → nav.css. Компактная база включается постранично классом `ui-compact` на . */ /* ── Токены ─────────────────────────────────────────────── */ :root { /* Бренд: один фирменный синий вместо прежних #1a5cb8 / #1f6feb */ --brand: #1a5cb8; --brand-strong: #144b96; /* темнее — для hover и градиента шапки */ --brand-rgb: 26, 92, 184; --brand-strong-rgb: 20, 75, 150; /* rgb от --brand-strong — для градиентов шапки */ /* Статусы тепловой карты — доменная семантика карты, не success/danger Bootstrap */ --ok: #3b82f6; /* синий — есть возможность поднять цену */ --ok-bg: #dbeafe; --risk: #ef4444; /* красный — риск */ --risk-bg: #fee2e2; --risk-rgb: 239, 68, 68; /* rgb от --risk — для тинтов через rgba(var(--risk-rgb), α) */ --auto-on: #1cb454; /* зелёный «автоуправление включено» — тумблер шахматки и бейдж */ --auto-on-rgb: 28, 180, 84;/* rgb от --auto-on — для тинтов «заработано/включено» */ /* Серые и фон страниц */ --gray-100: #f8f9fa; --gray-200: #f3f4f6; --gray-300: #e5e7eb; --gray-400: #9ca3af; --gray-500: #6c757d; --gray-700: #374151; --gray-900: #212529; --surface: #f5f5f5; /* Радиусы и тени — единые вместо россыпи значений */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* крупные карточки: auth/оплата, объекты, биллинг */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, .07); --shadow-md: 0 4px 24px rgba(0, 0, 0, .12); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .1); /* приподнятая карточка логина/оплаты */ /* Потолок ширины контента списка/таблицы — на широких мониторах колонки не расползаются */ --content-max: 80rem; /* Запас под горизонтальный overlay-скроллбар (macOS). Берём толщину РАЗДУТОГО (на hover) бара, а не тонкого: иначе при наведении он всё равно накрывает контент под собой. Кто скроллит вбок — резервирует столько снизу padding'ом. */ --scrollbar-size: 16px; /* Шкала шрифта в rem (на компактной базе 14px). Низ не мельче ~11px. */ --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; /* Системный стек — быстрый, без сетевой зависимости */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } /* ── Темизация Bootstrap из токенов ─────────────────────── */ :root { --bs-primary: var(--brand); --bs-primary-rgb: var(--brand-rgb); --bs-link-color: var(--brand); --bs-link-color-rgb: var(--brand-rgb); --bs-link-hover-color: var(--brand-strong); --bs-border-radius: var(--radius-md); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-body-font-family: var(--font-sans); } /* Кнопки primary: в Bootstrap 5.3 цвет держится в локальных --bs-btn-*, поэтому перекрашиваем их, а не корневой --bs-primary. */ .btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-strong); --bs-btn-hover-border-color: var(--brand-strong); --bs-btn-active-bg: var(--brand-strong); --bs-btn-active-border-color: var(--brand-strong); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); } .btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); } /* ── Карточки: единое оформление вместо постраничного копипаста ──── */ /* Базовая карточка кабинета: без рамки, мягкая тень, единый радиус. Страницы задают только своё (внутренние отступы, спец-фоны), но не повторяют это. */ .card { border: none; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); } .card-header { background: #fff; border-bottom: 1px solid var(--gray-200); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } /* Приподнятая центрированная карточка для auth/оплаты (login-modal, forgot, reset, pay) */ .auth-card { border: none; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); max-width: 440px; } /* Шапка таблиц: компактная капс-подпись колонок — единый вид вместо постраничных копий. Шахматка использует свой класс .hm-table, поэтому под это правило не попадает. */ .table thead th { background: var(--gray-100); border-bottom: 2px solid var(--gray-300); font-weight: 600; font-size: var(--fs-xs); color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; } /* ── Компактная база за классом-гейтом ──────────────────── */ /* Включается постранично: class="ui-compact" на . Без класса страница на стандартных 16px и не «плывёт». Процент, а не 14px, чтобы масштаб уважал системный размер шрифта пользователя. */ html.ui-compact { font-size: 87.5%; } /* ── Текстовые поля ≥16px только на iOS Safari (против авто-зума) ── */ /* iOS Safari зумит страницу при фокусе на поле ВВОДА с font-size < 16px — это его особенность. На Android и десктопе зума нет, там поля остаются компактными. Детект iOS: @supports (-webkit-touch-callout) — фича есть только в iOS WebKit. Селекты (