/* Стили по методологии БЭМ, нотация своя: блок-элемент--модификатор, слова внутри имён — snake_case (edit_lang_bar-label, btn--secondary). Дефис однозначен: встречается только как разделитель блока и элемента. Базовые (element-level) стили — нормализация и типографика. */ /* Палитра. Вся цветовая схема выводится из одной «ручки» --hue (0–359): личный тон пользователя или фирменный тон компании переопределяют её инлайн-стилем на (см. stores/theme.js и инлайн-скрипт в index.html). Токен объявлен дважды: сначала запасной hex под стандартный синий — для браузеров без oklch() (старые Android WebView, Samsung Internet), где тон не учитывается; затем в @supports — рабочее значение от --hue. Двойное объявление в одном блоке не годится: кастомное свойство не проверяется при разборе, победило бы последнее, а var() с oklch() стал бы невалидным. Тёмная схема — тот же набор под префиксом --dark-, подставляется ниже по prefers-color-scheme (color-scheme: light dark = «как в системе») или по data-theme на — явному выбору пользователя; light-dark() не используется — в браузерах без него не было бы тем вовсе. Статусные цвета (зелёный/красный/янтарный) — семантика, от тона не зависят. */ :root { color-scheme: light dark; --hue: 263; /* стандартный синий (бывший #1d4ed8) */ /* Акцент: кнопки, ссылки, бренд. */ --accent: #2055ca; --dark-accent: #82aaf7; --accent-strong: #143e9c; --dark-accent-strong: #a9c8ff; --on-accent: #ffffff; --dark-on-accent: #0e182b; --accent-soft: #dde8fd; --dark-accent-soft: #23304a; --accent-soft-strong: #cfdffd; --dark-accent-soft-strong: #2c3d5d; /* Поверхности и текст, слегка подкрашены тоном. */ --bg: #f5f7fb; --dark-bg: #10141b; --card: #ffffff; --dark-card: #1b1f28; --text: #161b24; --dark-text: #e5e8ed; --muted: #636975; --dark-muted: #9da2ab; --border: #dee1e7; --dark-border: #31353d; --neutral-soft: #edeef1; --dark-neutral-soft: #2e3036; /* Статусы. */ --green: #007c32; --dark-green: #61da92; --green-soft: #d9f8e0; --dark-green-soft: #1e3a26; --red: #cc2827; --dark-red: #ff958d; --red-soft: #ffe8e6; --dark-red-soft: #462623; --amber: #a15c00; --dark-amber: #f3bd5c; --amber-soft: #fff0d0; --dark-amber-soft: #422f13; } /* Рабочие значения от тона. Hex выше — те же цвета при --hue: 263; при правке пары обновлять обе (client/lib/color.js oklch_to_hex) */ @supports (color: oklch(0.5 0.1 200)) { :root { --accent: oklch(0.49 0.19 var(--hue)); --dark-accent: oklch(0.74 0.12 var(--hue)); --accent-strong: oklch(0.4 0.16 var(--hue)); --dark-accent-strong: oklch(0.83 0.09 var(--hue)); --dark-on-accent: oklch(0.21 0.04 var(--hue)); --accent-soft: oklch(0.93 0.03 var(--hue)); --dark-accent-soft: oklch(0.31 0.05 var(--hue)); --accent-soft-strong: oklch(0.9 0.045 var(--hue)); --dark-accent-soft-strong: oklch(0.36 0.06 var(--hue)); --bg: oklch(0.975 0.006 var(--hue)); --dark-bg: oklch(0.19 0.015 var(--hue)); --dark-card: oklch(0.24 0.018 var(--hue)); --text: oklch(0.22 0.02 var(--hue)); --dark-text: oklch(0.93 0.008 var(--hue)); --muted: oklch(0.52 0.02 var(--hue)); --dark-muted: oklch(0.71 0.015 var(--hue)); --border: oklch(0.91 0.008 var(--hue)); --dark-border: oklch(0.33 0.015 var(--hue)); --neutral-soft: oklch(0.95 0.004 var(--hue)); --dark-neutral-soft: oklch(0.31 0.01 var(--hue)); /* Светлые варианты green/amber подобраны под контраст ≥4.5:1 (WCAG AA для мелкого кегля) и на своих soft-фонах, и на белой карточке */ --green: oklch(0.51 0.15 150); --dark-green: oklch(0.8 0.15 155); --green-soft: oklch(0.95 0.045 152); --dark-green-soft: oklch(0.32 0.05 152); --red: oklch(0.55 0.2 27); --dark-red: oklch(0.78 0.13 25); --red-soft: oklch(0.95 0.025 25); --dark-red-soft: oklch(0.31 0.05 25); --amber: oklch(0.54 0.14 70); --dark-amber: oklch(0.83 0.13 80); --amber-soft: oklch(0.96 0.045 85); --dark-amber-soft: oklch(0.32 0.05 75); } } /* Тёмная схема: системная (если пользователь не выбрал светлую явно) и явный выбор. Селекторы специфичнее :root — берут верх над обоими наборами выше независимо от порядка; список подмен один и тот же */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --accent: var(--dark-accent); --accent-strong: var(--dark-accent-strong); --on-accent: var(--dark-on-accent); --accent-soft: var(--dark-accent-soft); --accent-soft-strong: var(--dark-accent-soft-strong); --bg: var(--dark-bg); --card: var(--dark-card); --text: var(--dark-text); --muted: var(--dark-muted); --border: var(--dark-border); --neutral-soft: var(--dark-neutral-soft); --green: var(--dark-green); --green-soft: var(--dark-green-soft); --red: var(--dark-red); --red-soft: var(--dark-red-soft); --amber: var(--dark-amber); --amber-soft: var(--dark-amber-soft); } } :root[data-theme='dark'] { color-scheme: dark; --accent: var(--dark-accent); --accent-strong: var(--dark-accent-strong); --on-accent: var(--dark-on-accent); --accent-soft: var(--dark-accent-soft); --accent-soft-strong: var(--dark-accent-soft-strong); --bg: var(--dark-bg); --card: var(--dark-card); --text: var(--dark-text); --muted: var(--dark-muted); --border: var(--dark-border); --neutral-soft: var(--dark-neutral-soft); --green: var(--dark-green); --green-soft: var(--dark-green-soft); --red: var(--dark-red); --red-soft: var(--dark-red-soft); --amber: var(--dark-amber); --amber-soft: var(--dark-amber-soft); } /* Явная светлая перекрывает системную тёмную: :not() выше её не трогает, остаётся только схема элементов управления */ :root[data-theme='light'] { color-scheme: light; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Форм-контролы: у голых select / date / number браузерные дефолты со своими шрифтом и паддингами — высоты разъезжаются. Единая база + явная высота: селект игнорирует line-height, у даты иконка календаря выше строки. 42.5px = высота .btn (22.5 строка + 20 паддингов). */ input:where(:not([type='checkbox'], [type='radio'], [type='range'])), select, textarea { font: inherit; font-size: 15px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); } input:where(:not([type='checkbox'], [type='radio'], [type='range'])), select { height: 42.5px; } /* iOS Safari зумит страницу при фокусе в поле мельче 16px — на узких экранах кегль контролов 16px (высота: 24 строка + 20 паддингов) */ @media (max-width: 640px) { input:where(:not([type='checkbox'], [type='radio'], [type='range'])), select, textarea { font-size: 16px; } input:where(:not([type='checkbox'], [type='radio'], [type='range'])), select { height: 46px; } } h1 { font-size: 28px; margin: 0 0 12px; } h2 { font-size: 22px; margin: 0 0 12px; } h3 { margin: 0 0 8px; } /* Утилита: приглушённый текст. */ .text--muted { color: var(--muted); } /* Блок: page (каркас страницы). */ .page { display: flex; flex-direction: column; min-height: 100vh; } .page-main { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 28px 20px 48px; } .page-footer { text-align: center; padding: 18px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); background: var(--card); } /* Блок: nav (верхняя панель). Высота — минимум, не фиксация: на узком экране пункты переносятся, и жёсткие 60px обрезали бы второй ряд */ .nav { display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; min-height: 60px; row-gap: 4px; background: var(--card); border-bottom: 1px solid var(--border); flex-wrap: wrap; } .nav-brand { font-weight: 700; font-size: 18px; color: var(--accent-strong); } .nav-brand:hover { text-decoration: none; } /* Базовая линия, а не центр: пункты разного кегля (ссылки 16px, имя 14px) при центрировании визуально «плавают» по вертикали */ .nav-menu { display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; } .nav-user { color: var(--muted); font-size: 14px; } /* Кнопка-действие в меню, выглядит как ссылка. */ .nav-link--button { background: none; border: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; } .nav-link--button:hover { text-decoration: underline; } /* Блок: card. */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .card--auth { max-width: 420px; margin: 32px auto; } /* Блок: grid. */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } /* Блок: row (горизонтальная раскладка). */ .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* Блок: btn. */ .btn { display: inline-block; background: var(--accent); color: var(--on-accent); border: none; padding: 10px 18px; border-radius: 8px; font: inherit; /* у