/* ============================================================================
MAJESTIC UI — единые дизайн-токены для всех сервисов Leganor
============================================================================
Подключение:
Тема: ; без атрибута — по системной
(prefers-color-scheme). Переключатель обязан ставить атрибут.
Правило: компоненты НЕ используют hex напрямую — только var(--...).
Тогда светлая тема достаётся бесплатно.
Источник стиля: логотип Majestic (белый/чёрный + точка #FF014C→#FF5C8A),
подход Apple: материалы с blur, типографика с трекингом по размеру,
пружинная моторика, reduced-motion/transparency/contrast поддержаны здесь же.
========================================================================== */
/* ── 1. Палитра: тёмная тема (базовая) ─────────────────────────────────── */
:root {
color-scheme: dark;
/* фон и поверхности */
--page: #0A0B0F;
--surface: #14161C; /* карточка */
--surface-2: #1B1E27; /* приподнятая карточка, попап */
--surface-3: #232734; /* самый верхний слой (меню) */
--line: rgba(255, 255, 255, 0.07);
--line-strong: rgba(255, 255, 255, 0.14);
/* текст: три ступени + инверсия */
--ink: rgba(255, 255, 255, 0.94);
--ink-2: rgba(255, 255, 255, 0.62);
--ink-3: rgba(255, 255, 255, 0.40);
--ink-inverse: #0A0B0F;
/* фирменный акцент — точка логотипа */
--brand: #FF5C8A;
--brand-strong: #F80D53;
--brand-ink: #FFFFFF; /* текст на брендовой заливке */
--brand-dim: rgba(255, 92, 138, 0.14);
--brand-grad: linear-gradient(135deg, #FF5C8A 0%, #F80D53 100%);
/* функциональные цвета */
--good: #54E166;
--warn: #FFB454;
--bad: #FF5C6C;
--info: #6C8CFF;
--good-dim: rgba(84, 225, 102, 0.12);
--warn-dim: rgba(255, 180, 84, 0.12);
--bad-dim: rgba(255, 92, 108, 0.12);
--info-dim: rgba(108, 140, 255, 0.12);
/* цвета графиков (порядок фиксированный во всех сервисах) */
--chart-1: #FF5C8A;
--chart-2: #6C8CFF;
--chart-3: #54E166;
--chart-4: #FFB454;
--chart-5: #B39DFF;
--chart-6: #4DD6C1;
/* материалы (подход Apple: полупрозрачный слой, контент скроллится под ним) */
--material-bar: rgba(10, 11, 15, 0.72); /* шапки, тулбары */
--material-panel: rgba(20, 22, 28, 0.82); /* боковые панели */
--material-sheet: rgba(27, 30, 39, 0.88); /* модалки, дроверы */
--material-blur: saturate(160%) blur(20px);
--scrim: rgba(0, 0, 0, 0.55); /* затемнение под модалкой */
--edge-light: rgba(255, 255, 255, 0.06); /* «свет по верхней кромке» */
/* тени: чем больше поверхность, тем толще материал */
--shadow-chip: 0 1px 2px rgba(0, 0, 0, 0.25);
--shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35);
--shadow-sheet: 0 12px 48px rgba(0, 0, 0, 0.55);
/* логотип: в тёмной теме белый */
--logo-url: url("majestic-white.png");
/* геометрия */
--r-chip: 8px;
--r-card: 14px;
--r-sheet: 20px;
--r-pill: 999px;
/* моторика (Apple: damping 1.0 по умолчанию; bounce только после жеста) */
--t-press: 100ms cubic-bezier(0.2, 0, 0.4, 1); /* отклик на нажатие */
--t-fast: 180ms cubic-bezier(0.25, 0.1, 0.25, 1); /* ховеры, подсветки */
--t-move: 320ms cubic-bezier(0.32, 0.72, 0, 1); /* панели, дроверы */
--t-spring: 400ms cubic-bezier(0.34, 1.26, 0.64, 1);/* лёгкий переброс —
только после флика */
}
/* ── 2. Светлая тема ───────────────────────────────────────────────────── */
:root[data-theme="light"] {
color-scheme: light;
--page: #F4F5F8;
--surface: #FFFFFF;
--surface-2: #FFFFFF;
--surface-3: #FFFFFF;
--line: rgba(16, 18, 27, 0.08);
--line-strong: rgba(16, 18, 27, 0.16);
--ink: rgba(16, 18, 27, 0.94);
--ink-2: rgba(16, 18, 27, 0.60);
--ink-3: rgba(16, 18, 27, 0.38);
--ink-inverse: #FFFFFF;
--brand: #F80D53; /* на светлом — плотный, светлый розовый тонет */
--brand-strong: #D60644;
--brand-dim: rgba(248, 13, 83, 0.10);
--good: #1FA83A;
--warn: #C77700;
--bad: #D93A4C;
--info: #3D5AFE;
--good-dim: rgba(31, 168, 58, 0.10);
--warn-dim: rgba(199, 119, 0, 0.10);
--bad-dim: rgba(217, 58, 76, 0.10);
--info-dim: rgba(61, 90, 254, 0.10);
--chart-1: #F80D53;
--chart-2: #3D5AFE;
--chart-3: #1FA83A;
--chart-4: #C77700;
--chart-5: #7C4DFF;
--chart-6: #00897B;
--material-bar: rgba(244, 245, 248, 0.78);
--material-panel: rgba(255, 255, 255, 0.82);
--material-sheet: rgba(255, 255, 255, 0.90);
--scrim: rgba(16, 18, 27, 0.32);
--edge-light: rgba(255, 255, 255, 0.9);
--shadow-chip: 0 1px 2px rgba(16, 18, 27, 0.08);
--shadow-card: 0 4px 16px rgba(16, 18, 27, 0.08);
--shadow-sheet: 0 12px 48px rgba(16, 18, 27, 0.18);
--logo-url: url("majestic-black.png");
}
/* без явного data-theme следуем системной теме */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
color-scheme: light;
--page: #F4F5F8; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #FFFFFF;
--line: rgba(16,18,27,0.08); --line-strong: rgba(16,18,27,0.16);
--ink: rgba(16,18,27,0.94); --ink-2: rgba(16,18,27,0.60); --ink-3: rgba(16,18,27,0.38);
--ink-inverse: #FFFFFF;
--brand: #F80D53; --brand-strong: #D60644; --brand-dim: rgba(248,13,83,0.10);
--good: #1FA83A; --warn: #C77700; --bad: #D93A4C; --info: #3D5AFE;
--good-dim: rgba(31,168,58,0.10); --warn-dim: rgba(199,119,0,0.10);
--bad-dim: rgba(217,58,76,0.10); --info-dim: rgba(61,90,254,0.10);
--chart-1: #F80D53; --chart-2: #3D5AFE; --chart-3: #1FA83A;
--chart-4: #C77700; --chart-5: #7C4DFF; --chart-6: #00897B;
--material-bar: rgba(244,245,248,0.78); --material-panel: rgba(255,255,255,0.82);
--material-sheet: rgba(255,255,255,0.90); --scrim: rgba(16,18,27,0.32);
--edge-light: rgba(255,255,255,0.9);
--shadow-chip: 0 1px 2px rgba(16,18,27,0.08);
--shadow-card: 0 4px 16px rgba(16,18,27,0.08);
--shadow-sheet: 0 12px 48px rgba(16,18,27,0.18);
--logo-url: url("majestic-black.png");
}
}
/* ── 3. Типографика (Apple: трекинг зависит от размера) ────────────────── */
:root {
--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.t-display { /* крупные числа KPI, заголовки экранов */
font-size: 28px; line-height: 1.1; font-weight: 650;
letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.t-title { font-size: 17px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.t-body { font-size: 14px; line-height: 1.5; font-weight: 400; letter-spacing: 0; }
.t-label { font-size: 12px; line-height: 1.35; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-2); }
.t-caption { /* капс-подписи секций */
font-size: 11px; line-height: 1.3; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.t-num { font-variant-numeric: tabular-nums; }
/* ── 4. Фирменный лок-ап: Majestic + бокс сервиса под наклоном ─────────── */
/* 
Analytics![]()
. */
.mj-lockup { display: inline-flex; align-items: center; gap: 10px; }
.mj-logo { /* вариант без ![]()
: тянет нужный цвет по теме */
display: inline-block; width: 108px; height: 28px;
background: var(--logo-url) no-repeat center / contain;
}
img.mj-logo { width: 108px; height: auto; background: none; }
.mj-tag { /* скошенные углы: параллелограмм в наклон
курсива логотипа, углы скруглены */
display: inline-flex; align-items: center;
padding: 3px 10px 4px;
border-radius: 7px;
background: var(--brand-grad);
color: var(--brand-ink);
font-family: var(--font);
font-size: 11px; font-weight: 750; font-style: italic;
letter-spacing: 0.12em; text-transform: uppercase;
transform: skewX(-10deg);
box-shadow: 0 2px 8px rgba(248, 13, 83, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.mj-lockup--sm .mj-logo { width: 84px; height: 22px; }
.mj-lockup--sm .mj-tag { font-size: 9.5px; padding: 2px 7px 3px; border-radius: 6px; }
.mj-lockup--lg .mj-logo { width: 150px; height: 38px; }
.mj-lockup--lg .mj-tag { font-size: 13px; padding: 4px 12px 5px; border-radius: 9px; }
/* ── 5. Базовые компоненты ─────────────────────────────────────────────── */
.mj-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-card);
box-shadow: var(--shadow-card);
}
.mj-bar { /* шапка-материал: контент скроллится под ней */
position: sticky; top: 0; z-index: 30;
background: var(--material-bar);
-webkit-backdrop-filter: var(--material-blur);
backdrop-filter: var(--material-blur);
border-bottom: 1px solid var(--line);
}
/* стык контента с плавающей шапкой — градиентная маска вместо жёсткой черты */
.mj-bar::after {
content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px;
background: linear-gradient(var(--scrim), transparent);
opacity: 0.25; pointer-events: none;
}
.mj-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 40px; padding: 0 16px;
border-radius: 10px; border: 1px solid var(--line-strong);
background: var(--surface-2); color: var(--ink);
font: 500 14px/1 var(--font); letter-spacing: 0;
cursor: pointer; user-select: none;
transition: transform var(--t-press), background var(--t-fast),
border-color var(--t-fast);
}
.mj-btn:hover { border-color: var(--ink-3); }
.mj-btn:active { transform: scale(0.97); } /* отклик на нажатие, не на отпуск */
.mj-btn:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.mj-btn--brand {
background: var(--brand-grad); border-color: transparent; color: var(--brand-ink);
box-shadow: 0 2px 12px rgba(248, 13, 83, 0.30);
}
.mj-btn--brand:hover { filter: brightness(1.06); }
.mj-btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.mj-btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.mj-input {
min-height: 40px; padding: 0 12px; width: 100%;
border-radius: 10px; border: 1px solid var(--line-strong);
background: var(--page); color: var(--ink);
font: 400 14px/1.4 var(--font);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mj-input::placeholder { color: var(--ink-3); }
.mj-input:focus { outline: none; border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-dim); }
.mj-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: var(--r-pill);
font: 500 12px/1.4 var(--font);
background: var(--surface-2); color: var(--ink-2);
border: 1px solid var(--line);
}
.mj-pill--good { background: var(--good-dim); color: var(--good); border-color: transparent; }
.mj-pill--warn { background: var(--warn-dim); color: var(--warn); border-color: transparent; }
.mj-pill--bad { background: var(--bad-dim); color: var(--bad); border-color: transparent; }
.mj-pill--brand{ background: var(--brand-dim);color: var(--brand);border-color: transparent; }
.mj-sheet { /* модалка/дровер: самый толстый материал */
background: var(--material-sheet);
-webkit-backdrop-filter: var(--material-blur);
backdrop-filter: var(--material-blur);
border: 1px solid var(--line);
border-radius: var(--r-sheet);
box-shadow: var(--shadow-sheet), inset 0 1px 0 var(--edge-light);
}
.mj-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; }
/* переключатель темы: solar/lunar без эмодзи, чистый CSS */
.mj-theme-toggle {
width: 40px; height: 40px; border-radius: 10px;
border: 1px solid var(--line-strong); background: var(--surface-2);
cursor: pointer; position: relative;
transition: transform var(--t-press), border-color var(--t-fast);
}
.mj-theme-toggle:active { transform: scale(0.94); }
.mj-theme-toggle::before { /* луна в тёмной теме, солнце в светлой */
content: ""; position: absolute; inset: 50% auto auto 50%;
width: 16px; height: 16px; border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: inset -4px -3px 0 0 var(--ink-2);
transition: box-shadow var(--t-move), background var(--t-move);
}
:root[data-theme="light"] .mj-theme-toggle::before,
:root:not([data-theme]) .mj-theme-toggle::before { }
@media (prefers-color-scheme: light) {
:root:not([data-theme]) .mj-theme-toggle::before {
background: var(--warn); box-shadow: 0 0 0 3px var(--warn-dim);
}
}
:root[data-theme="light"] .mj-theme-toggle::before {
background: var(--warn); box-shadow: 0 0 0 3px var(--warn-dim);
}
/* ── 6. Доступность: три независимых сигнала ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
:root { --material-bar: var(--surface); --material-panel: var(--surface);
--material-sheet: var(--surface-2); --material-blur: none; }
}
@media (prefers-contrast: more) {
:root { --line: var(--line-strong); }
.mj-card, .mj-sheet { border-width: 2px; }
}