/**
* login.html — экран входа, GrowoAI design system.
* Фирменные элементы: лого-аватар + wordmark Growo·AI, mint-слоган,
* emerald-подчёркивание хедера (как в письмах), контраст WCAG AA+
* (placeholder --text-tertiary ≥ 4.5:1 в обеих темах, ошибки/успех — читаемые).
* Темы: все цвета — через tokens.css (data-theme на , pre-paint в login.html);
* dark — эталон прода, light — премиальная светлая (см. :root[data-theme="light"]).
*/
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Шрифт Geist объявлен в tokens.css через относительный url('fonts/…') —
корректно для любого префикса монтирования админки; @font-face здесь
дублировал его с захардкоженным /platform-префиксом и ломался на on-prem. */
/* !important обязателен: ниже в файле .success-msg/.error-msg задают
display:flex той же специфичности — без !important «Ссылка отправлена!»
виден при каждой загрузке (P0: каскадный конфликт) */
.fm-u-none { display: none !important; }
body {
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
min-height: 100vh; display: flex; align-items: center; justify-content: center;
background: var(--bg-primary); color: var(--text-primary); padding: 24px;
-webkit-font-smoothing: antialiased;
}
/* Сцена: emerald/mint свечения бренда (без чужого фиолетового).
Декоративные орбы — не токенизируются: в dark нужны глубокие свечения
на тёмном (эталон прода), в light переопределены мягкими аналогами
(канон tokens.css body::before: emerald-600 с меньшей альфой). */
.login-scene {
position: fixed; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 55% 45% at 18% 22%, rgba(5, 150, 105, 0.16) 0%, transparent 60%),
radial-gradient(ellipse 45% 40% at 85% 75%, rgba(52, 211, 153, 0.10) 0%, transparent 55%),
radial-gradient(ellipse 35% 30% at 55% 100%, rgba(34, 211, 238, 0.07) 0%, transparent 50%);
}
:root[data-theme="light"] .login-scene {
background:
radial-gradient(ellipse 55% 45% at 18% 22%, rgba(5, 150, 105, 0.08) 0%, transparent 60%),
radial-gradient(ellipse 45% 40% at 85% 75%, rgba(5, 150, 105, 0.05) 0%, transparent 55%),
radial-gradient(ellipse 35% 30% at 55% 100%, rgba(6, 182, 212, 0.04) 0%, transparent 50%);
}
.login-card {
position: relative; z-index: 1;
width: 100%; max-width: 420px; padding: 2rem 2.25rem 1.75rem;
background: var(--bg-card);
border: 1px solid var(--glass-border);
border-radius: 20px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
animation: cardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Light: чёрная тень 0.45 и белый инсет-блик — атрибуты тёмной темы;
мягкая слоистая --shadow-xl из tokens.css (warm paper, деликатная глубина) */
:root[data-theme="light"] .login-card { box-shadow: var(--shadow-xl); }
/* Light: рамки полей/кнопок усиливаем до канона платформы (.fm-input ≥3:1 UI-
контраст --border-input; oauth — вторичная кнопка --btn-secondary-border);
в dark рамка --border-secondary пиксельно равна прод-эталону (0.12) */
:root[data-theme="light"] .input-field:not(.input-invalid) { border-color: var(--border-input); }
:root[data-theme="light"] .oauth-btn { border-color: var(--btn-secondary-border); }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* ── Бренд-хедер ─────────────────────────────────────────────── */
.login-brand {
display: flex; align-items: center; gap: 12px;
padding-bottom: 16px; margin-bottom: 20px;
border-bottom: 3px solid var(--color-brand); /* фирменное emerald-подчёркивание */
}
.login-avatar {
width: 44px; height: 44px; border-radius: 12px;
box-shadow: 0 6px 20px -6px rgba(5, 150, 105, 0.55); /* emerald-glow вокруг лого: инвариантен, виден на любой поверхности */
}
.login-wordmark { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.login-wordmark span { color: var(--color-emerald-light); } /* Growo·AI — emerald: 20px/700 = large text, AA в обеих темах */
.login-tagline { font-size: 12px; color: var(--accent-text); } /* акцентный текст: #34d399 dark / #047857 light (AA 5.24:1) */
/* GitVerse-канон (gitverse-premium): дисплейный Onest 500, контраст кеглем — не жирностью */
h1 { font-family: var(--gp-font-display, 'Onest', inherit); font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.35rem; }
.subtitle { color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 1.5rem; }
/* ── Сообщения (контрастные) ─────────────────────────────────── */
.error-msg, .success-msg {
padding: 0.625rem 0.875rem; border-radius: 10px; font-size: 0.85rem;
margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; line-height: 1.4;
}
/* Плашки: заливка — статус-токены (темизируются), рамка — цветной rgba:
красный/зелёный бордер одинаково читается на тёмном и светлом. */
.error-msg { background: var(--status-error-bg); border: 1px solid rgba(239, 68, 68, 0.4); color: var(--badge-error-text); }
.success-msg { background: var(--status-ok-bg); border: 1px solid rgba(16, 185, 129, 0.35); color: var(--status-ok); }
/* ── Поля ────────────────────────────────────────────────────── */
.input-wrap { position: relative; margin-bottom: 1rem; }
.input-label {
display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 6px;
}
.input-field {
width: 100%; padding: 0.8125rem 1rem 0.8125rem 2.75rem;
background: var(--bg-inset); border: 1px solid var(--border-secondary);
border-radius: 12px; color: var(--text-primary); font-size: 16px;
font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; outline: none;
}
/* WCAG: --text-tertiary (#94a3b8 dark ≈ 7:1 на поле; #64748b light = 4.76:1) */
.input-field::placeholder { color: var(--text-tertiary); }
.input-field:focus { border-color: var(--color-emerald-light); box-shadow: 0 0 0 3px var(--accent-bg-strong); }
.input-field.input-invalid, .input-field.input-invalid:focus {
border-color: var(--status-error); box-shadow: 0 0 0 3px var(--status-error-bg);
}
.input-icon { position: absolute; left: 0.875rem; bottom: 0.8125rem; color: var(--text-tertiary); transition: color 0.2s; }
.input-wrap:focus-within .input-icon { color: var(--color-emerald-light); }
/* Поле ключа: глаз — системный компонент input[data-secret="eye"]
(fm-secret.css: для пароля копирование выключено) */
#tokenInput { padding-right: 3.25rem; }
/* CapsLock-хинт: мягкий, не пугает — экономит попытку входа */
.caps-hint {
position: absolute; right: 3rem; bottom: -1.05rem;
font-size: 11px; color: var(--badge-warn-text); letter-spacing: 0.02em;
pointer-events: none;
}
/* Кнопка в работе: спиннер в строке (текст «Отправляем…» рядом).
Живёт на постоянно тёмной emerald-кнопке — белый инвариантен в обеих темах. */
.btn-spinner {
width: 16px; height: 16px; border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: var(--text-on-accent);
animation: loginSpin 0.7s linear infinite;
}
@keyframes loginSpin { to { transform: rotate(360deg); } }
/* ── Кнопки ──────────────────────────────────────────────────── */
/* GitVerse-канон: градиент emerald 600→700 (dark: #059669→#047857 пиксельно;
light: оба эндпоинта 700-шаг — AA 5.49:1 под белым), hover = свет, не подъём */
.submit-btn {
width: 100%; padding: 0.875rem 1rem;
background: linear-gradient(135deg, var(--color-emerald) 0%, var(--accent-solid) 100%);
color: var(--text-on-accent); border: none; border-radius: 12px;
font-size: 0.95rem; font-weight: 600; cursor: pointer;
transition: transform 0.15s, box-shadow 0.2s; font-family: inherit;
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
box-shadow: 0 4px 16px -4px rgba(5, 150, 105, 0.45);
}
.submit-btn:hover { transform: none; box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), 0 8px 32px rgba(5, 150, 105, 0.40); } /* hover = свет, не подъём */
.submit-btn:active { transform: scale(0.97); }
.submit-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }
.submit-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.submit-btn svg { width: 18px; height: 18px; }
/* ── OAuth ───────────────────────────────────────────────────── */
.divider {
display: flex; align-items: center; gap: 12px;
color: var(--text-tertiary); font-size: 12px; margin: 1.1rem 0 0.8rem;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border-secondary); }
.oauth-row { display: flex; gap: 10px; }
.oauth-btn {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 0.6875rem 0.75rem; border-radius: 12px;
background: var(--bg-card-hover); border: 1px solid var(--border-secondary);
color: var(--btn-secondary-text); font-size: 0.875rem; font-weight: 600; text-decoration: none;
transition: border-color 0.2s, transform 0.15s;
}
.oauth-btn:hover { border-color: var(--border-accent); color: var(--text-primary); transform: translateY(-1px); }
.oauth-mark { display: inline-flex; align-items: center; justify-content: center; }
/* Логотип MAX — растровый бренд-ассет (img, не SVG-глиф) */
.oauth-btn img.oauth-mark { display: block; width: 18px; height: 18px; border-radius: var(--radius-sm); }
.oauth-yandex {
width: 18px; height: 18px; border-radius: 50%;
background: #d93010; color: var(--text-on-accent); font-size: 12px; font-weight: 800; /* бренд-плашка Яндекс ID: #d93010 = 4.79:1 (a11y, выверено 03.09) */
}
/* ── Прочее ──────────────────────────────────────────────────── */
.toggle-mode { text-align: center; margin-top: 1.1rem; font-size: 0.85rem; }
.toggle-mode a { color: var(--text-secondary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.toggle-mode a:hover { color: var(--accent-text); }
/* a11y: переключатели режима — настоящие кнопки (были без href,
не фокусировались с клавиатуры); наследуют вид ссылок */
.toggle-mode button.mode-toggle {
background: none; border: none; padding: 0;
font: inherit; cursor: pointer;
color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px;
}
.toggle-mode button.mode-toggle:hover { color: var(--accent-text); }
.toggle-mode button.mode-toggle:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 4px; }
.footer {
margin-top: 1.5rem; padding-top: 1rem;
border-top: 1px solid var(--border-primary);
text-align: center; font-size: 12px; color: var(--text-tertiary);
}
.footer a { color: var(--text-secondary); text-decoration: none; }
.footer a:hover { color: var(--accent-text); }
@media (max-width: 480px) {
.login-card { padding: 1.5rem 1.25rem 1.25rem; }
.oauth-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
.login-card { animation: none; }
.submit-btn:hover, .oauth-btn:hover { transform: none; }
}