/* ============================================================ Lyntrix — Веб-авторизация Общие стили для экранов: вход, регистрация, ввод кода, ошибка кода, приветствие. Светлая и тёмная тема. Тема переключается атрибутом data-theme на . ============================================================ */ /* ---- Дизайн-токены: светлая тема ---- */ :root { --bg:#EAEEEC; --surface:#FBFCFB; --raised:#E4E9E6; --border:#DBE2DF; --border-card:#E2E8E5; --t-strong:#16221E; --t-body:#42514B; --t-muted:#7E8E88; --brand:#0E9E72; --brand-press:#0B7E5B; --up:#E03B33; --drop-fg:#06754F; --drop-bg:#BFEFD4; --drop-bd:#97DBB7; --rise-fg:#B3261E; --rise-bg:#FBE0DE; --rise-bd:#F2B7B3; --btn2-bg:#FBFCFB; --btn2-bd:#DBE2DF; --btn2-fg:#42514B; --primary-fg:#FFFFFF; --btn-shadow:0 6px 16px rgba(14,158,114,.3); --focus-ring:0 0 0 3px rgba(14,158,114,.14); --shadow-card:0 1px 3px rgba(20,40,32,.08); --danger-soft:#FBE2E0; --danger-bd:#F0A9A4; --auth-panel-bg:linear-gradient(165deg,#0E9E72,#0A6B4E); --auth-panel-fg:#FFFFFF; --auth-panel-sub:rgba(255,255,255,.86); --auth-panel-card-bg:rgba(255,255,255,.13); --auth-panel-bd:rgba(255,255,255,.22); --auth-panel-thumb:rgba(255,255,255,.24); --lk-win-shadow:0 26px 64px rgba(20,40,32,.16); } /* ---- Дизайн-токены: тёмная тема ---- */ [data-theme="dark"] { --bg:#1E2429; --surface:#272E33; --raised:#323A40; --border:#404A51; --border-card:#404A51; --t-strong:#F4F7F9; --t-body:#CDD5DB; --t-muted:#939EA6; --brand:#2BD89F; --brand-press:#2BD89F; --up:#F2554D; --drop-fg:#3FE0AA; --drop-bg:rgba(63,224,170,.15); --drop-bd:rgba(63,224,170,.38); --rise-fg:#F2554D; --rise-bg:rgba(242,85,77,.16); --rise-bd:rgba(242,85,77,.4); --btn2-bg:#323A40; --btn2-bd:#485259; --btn2-fg:#CDD5DB; --primary-fg:#06281E; --btn-shadow:none; --focus-ring:0 0 0 3px rgba(43,216,159,.20); --shadow-card:0 1px 3px rgba(0,0,0,.3); --danger-soft:rgba(242,85,77,.13); --danger-bd:rgba(242,85,77,.42); --auth-panel-bg:linear-gradient(160deg,#2B343B,#1A2025); --auth-panel-fg:#F4F7F9; --auth-panel-sub:#A9B4BB; --auth-panel-card-bg:#323A40; --auth-panel-bd:#404A51; --auth-panel-thumb:#3C454C; --lk-win-shadow:0 26px 64px rgba(0,0,0,.4); } /* ---- База ---- */ * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: 'Manrope', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; background: var(--bg); min-height: 100vh; } .lx-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } a { color: inherit; } /* ---- Каркас: сплит «бренд-панель + форма» ---- */ .auth-shell { min-height: 100vh; display: flex; } .auth-brand { width: 44%; max-width: 560px; min-width: 400px; background: var(--auth-panel-bg); padding: 56px 52px; display: flex; flex-direction: column; } .auth-main { flex: 1; background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 56px; } .auth-form { width: 100%; max-width: 400px; } /* ---- Фоновые превью ЛК на страницах входного потока (login/verify) ---- Из макета web-auth/login.dc.html: два наклонённых «окна браузера» с личным кабинетом за формой + радиальная вуаль, чтобы форма читалась. Вся графика на токенах темы — работает в light/dark без отдельных ассетов. На экранах уже 1200px превью прячутся: в углах нет места. */ .auth-main { position: relative; overflow: hidden; } .auth-form { position: relative; z-index: 3; } .lk-decor { position: absolute; z-index: 1; pointer-events: none; user-select: none; width: 438px; opacity: .78; } .lk-decor--tl { top: -30px; left: -104px; transform: rotate(-4deg); } .lk-decor--br { bottom: -36px; right: -100px; transform: rotate(-4deg); } .auth-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(46% 50% at 50% 50%, var(--surface) 36%, color-mix(in srgb, var(--surface) 45%, transparent) 62%, transparent 88%); } .lk-win { background: var(--surface); border: 1px solid var(--border-card); border-radius: 16px; box-shadow: var(--lk-win-shadow); overflow: hidden; } .lk-bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--raised); border-bottom: 1px solid var(--border); } .lk-bar-title { margin-left: 7px; font-size: 11.5px; font-weight: 700; color: var(--t-muted); } .lk-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .lk-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); } .lk-row:first-of-type { border-top: none; } .lk-thumb { width: 40px; height: 40px; flex: none; border-radius: 10px; } .lk-name { font-size: 13px; font-weight: 700; color: var(--t-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lk-sub { font-size: 11px; font-weight: 600; color: var(--t-muted); margin-top: 2px; } .lk-price { font-size: 14px; font-weight: 800; color: var(--t-strong); text-align: right; } .lk-badge { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 800; border-radius: 6px; padding: 1px 6px; color: var(--drop-fg); background: var(--drop-bg); border: 1px solid var(--drop-bd); } .lk-badge--flat { color: var(--t-muted); background: var(--raised); border-color: var(--border); } @media (max-width: 1200px) { .lk-decor, .auth-veil { display: none; } } .auth-form--wide { max-width: 420px; } /* ---- Бренд-панель ---- */ .brand-lockup { display: flex; align-items: center; gap: 12px; } .brand-logo { width: 40px; height: 40px; flex: none; display: block; filter: brightness(0) invert(1); } .brand-name { font-size: 20px; font-weight: 800; color: var(--auth-panel-fg); } .brand-head { margin-top: 48px; } .brand-headline { font-size: 28px; font-weight: 800; line-height: 1.22; color: var(--auth-panel-fg); letter-spacing: -.01em; } .brand-sub { font-size: 14px; font-weight: 600; line-height: 1.55; color: var(--auth-panel-sub); margin-top: 14px; max-width: 380px; } .brand-spacer { flex: 1; } .brand-footer { font-size: 12px; font-weight: 600; color: var(--auth-panel-sub); } /* Юр-ссылки убраны из подвала бренд-панели: на экране входа они живут в строке согласия под формой (web/sessions/new), в кабинете — в «Настройках» (018). */ /* Карточка товара / инфо-карточка на панели */ .brand-cards { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; } .brand-cards .brand-card { margin-top: 0; } .brand-card { margin-top: 28px; background: var(--auth-panel-card-bg); border: 1px solid var(--auth-panel-bd); border-radius: 14px; padding: 14px; display: flex; align-items: center; gap: 12px; max-width: 380px; } .brand-card--info { padding: 16px; gap: 13px; } .brand-card-thumb { width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--auth-panel-thumb); color: var(--auth-panel-fg); display: flex; align-items: center; justify-content: center; } .brand-card-thumb--info { width: 40px; height: 40px; border-radius: 11px; } .brand-card-body { flex: 1; min-width: 0; } .brand-card-title { font-size: 13px; font-weight: 700; color: var(--auth-panel-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-card-meta { font-size: 11px; font-weight: 600; color: var(--auth-panel-sub); margin-top: 3px; } .brand-card-right { text-align: right; flex: none; } .brand-card-price { font-size: 16px; font-weight: 800; color: var(--auth-panel-fg); } .brand-note { font-size: 13px; font-weight: 600; color: var(--auth-panel-sub); line-height: 1.45; } .badge-drop { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 7px; color: var(--drop-fg); background: var(--drop-bg); border: 1px solid var(--drop-bd); } .badge-rise { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 7px; color: var(--rise-fg); background: var(--rise-bg); border: 1px solid var(--rise-bd); } /* Преимущества (регистрация) */ .brand-bullets { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; } .brand-bullet { display: flex; align-items: center; gap: 11px; } .bullet-check { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--auth-panel-card-bg); border: 1px solid var(--auth-panel-bd); color: var(--auth-panel-fg); display: flex; align-items: center; justify-content: center; } .bullet-text { font-size: 13px; font-weight: 600; color: var(--auth-panel-sub); } /* ---- Переключатель темы ---- */ .theme-toggle { position: fixed; top: 20px; right: 20px; z-index: 50; height: 38px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-card); cursor: pointer; font: 700 13px 'Manrope', sans-serif; color: var(--t-body); } .theme-toggle:hover { border-color: var(--brand); } .tt-state { display: none; align-items: center; gap: 7px; } [data-theme="light"] .tt-moon { display: inline-flex; } [data-theme="dark"] .tt-sun { display: inline-flex; } /* ---- Форма ---- */ .form-title { font-size: 28px; font-weight: 800; color: var(--t-strong); letter-spacing: -.01em; margin-bottom: 8px; } .form-sub { font-size: 14px; font-weight: 600; color: var(--t-muted); line-height: 1.55; margin-bottom: 28px; } .form-sub b { color: var(--t-strong); font-weight: 700; } .field-label { font-size: 13px; font-weight: 700; color: var(--t-body); margin-bottom: 8px; } .field { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color .15s, box-shadow .15s; } .field:focus-within { border-color: var(--brand); box-shadow: var(--focus-ring); } .field svg { color: var(--t-muted); flex: none; } .field input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; font: 600 15px 'Manrope', sans-serif; color: var(--t-strong); } .field input::placeholder { color: var(--t-muted); } .field-hint { font-size: 12px; font-weight: 600; color: var(--t-muted); } /* Кнопки */ .btn { width: 100%; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px 'Manrope', sans-serif; text-decoration: none; cursor: pointer; border: none; } .btn svg { flex: none; } .btn-primary { color: var(--primary-fg); background: var(--brand); box-shadow: var(--btn-shadow); transition: background .15s; } .btn-primary:hover { background: var(--brand-press); } .btn-yandex { color: #fff; background: #FC3F1D; transition: filter .15s; } .btn-yandex:hover { filter: brightness(.95); } .yandex-badge { width: 22px; height: 22px; border-radius: 6px; background: #fff; color: #FC3F1D; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; } /* Модалка подтверждения (009): та же механика, что в админке (Stimulus admin-modal), стили — на токенах темы, работают в light/dark. */ .modal-overlay { position: fixed; inset: 0; z-index: 50; padding: 20px; background: rgba(10, 16, 14, .5); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; } .modal-overlay.open { display: flex; } .modal { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border-card); border-radius: 16px; padding: 24px; box-shadow: 0 24px 64px rgba(0, 0, 0, .28); } .modal__title { font-size: 17px; font-weight: 800; color: var(--t-strong); margin-bottom: 8px; } .modal__body { font-size: 13.5px; font-weight: 600; color: var(--t-body); line-height: 1.55; margin-bottom: 20px; } .modal-actions { display: flex; gap: 10px; } .modal-actions .btn { height: 44px; font-size: 14px; } .btn-secondary { color: var(--btn2-fg); background: var(--btn2-bg); border: 1px solid var(--btn2-bd); transition: border-color .15s; } .btn-secondary:hover { border-color: var(--brand); } .btn-danger { color: #fff; background: var(--up); transition: filter .15s; } .btn-danger:hover { filter: brightness(.94); } /* Разделитель «или» */ .divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; } .divider .line { flex: 1; height: 1px; background: var(--border); } .divider span { font-size: 12px; font-weight: 600; color: var(--t-muted); } /* Низ формы */ .form-foot { text-align: center; font-size: 13px; font-weight: 600; color: var(--t-muted); margin-top: 24px; } .terms { text-align: center; font-size: 11px; font-weight: 600; color: var(--t-muted); line-height: 1.55; margin-top: 18px; } .a-brand { color: var(--brand); font-weight: 700; text-decoration: none; cursor: pointer; } .a-brand:hover { text-decoration: underline; } /* .a-brand на