/* ============================================================================ Экраны входа (логин + 2FA-код). Общий визуал для login.html и login_code.html. Дизайн: глассморфизм-карточка на размытом фоне «борда», 4 темы 1:1 с бордом (Полночь/Мята/Бумага/CRM), переключатель тем. Работает без JS; login.js добавляет OTP-ячейки, переключатель и спиннер (прогрессивное улучшение). Темы выбираются атрибутом data-theme на (как в борде); ключ — pa_theme. ========================================================================== */ /* ── Тема «Полночь» (база, без data-theme) ─────────────────────────────── */ :root { --bg:#080c14; --panel-solid:#0b1018; --accent:#4a72f5; --deep:#3551ce; --accent-rgb:74,114,245; --txt:#e8eef8; --txt2:#909cb3; --line:rgba(255,255,255,0.10); --btn-txt:#ffffff; --bar:rgba(255,255,255,0.15); --bar-soft:rgba(255,255,255,0.07); --panel-bg:rgba(255,255,255,0.05); --glass:rgba(19,25,36,0.58); --chrome:rgba(24,31,45,0.88); --glass-border:rgba(255,255,255,0.13); --card-shadow:0 32px 80px rgba(0,0,0,0.55); --input-bg:rgba(255,255,255,0.055); --input-focus-bg:rgba(255,255,255,0.08); --err-color:#f08a8a; --err-rgb:240,138,138; --board-opacity:0.92; --scrim:radial-gradient(130% 120% at 50% 40%, rgba(5,8,13,0.40) 0%, rgba(5,8,13,0.74) 100%); --glow:radial-gradient(circle at 50% 45%, rgba(74,114,245,0.30), transparent 68%); } /* ── «Мята» (светлая) ──────────────────────────────────────────────────── */ :root[data-theme="light"] { --bg:#e3f1ea; --panel-solid:#ffffff; --accent:#1f9d70; --deep:#157a56; --accent-rgb:31,157,112; --txt:#16271f; --txt2:#52665c; --line:rgba(16,50,36,0.14); --btn-txt:#ffffff; --bar:rgba(22,39,31,0.13); --bar-soft:rgba(22,39,31,0.07); --panel-bg:#ffffff; --glass:rgba(255,255,255,0.80); --chrome:rgba(255,255,255,0.93); --glass-border:rgba(22,39,31,0.10); --card-shadow:0 30px 64px rgba(20,30,45,0.16); --input-bg:rgba(22,39,31,0.05); --input-focus-bg:rgba(255,255,255,0.9); --err-color:#c0392b; --err-rgb:192,57,43; --board-opacity:0.96; --scrim:radial-gradient(130% 120% at 50% 40%, rgba(227,241,234,0.24) 0%, rgba(227,241,234,0.62) 100%); --glow:radial-gradient(circle at 50% 45%, rgba(31,157,112,0.24), transparent 68%); } /* ── «Бумага» ──────────────────────────────────────────────────────────── */ :root[data-theme="paper"] { --bg:#e9e2d2; --panel-solid:#fbf6ea; --accent:#b79a7e; --deep:#9c7f63; --accent-rgb:183,154,126; --txt:#3a2f22; --txt2:#7a6c57; --line:rgba(80,60,30,0.16); --btn-txt:#fbf6ea; --bar:rgba(58,47,34,0.13); --bar-soft:rgba(58,47,34,0.07); --panel-bg:#fbf6ea; --glass:rgba(251,246,234,0.80); --chrome:rgba(251,246,234,0.93); --glass-border:rgba(58,47,34,0.10); --card-shadow:0 30px 64px rgba(20,30,45,0.16); --input-bg:rgba(58,47,34,0.05); --input-focus-bg:rgba(255,255,255,0.9); --err-color:#c0392b; --err-rgb:192,57,43; --board-opacity:0.96; --scrim:radial-gradient(130% 120% at 50% 40%, rgba(233,226,210,0.24) 0%, rgba(233,226,210,0.62) 100%); --glow:radial-gradient(circle at 50% 45%, rgba(183,154,126,0.24), transparent 68%); } /* ── «CRM» (Битрикс24) ─────────────────────────────────────────────────── */ :root[data-theme="bitrix"] { --bg:#eef2f6; --panel-solid:#ffffff; --accent:#4f8fe6; --deep:#3f78cc; --accent-rgb:79,143,230; --txt:#17222e; --txt2:#56697a; --line:rgba(20,45,70,0.13); --btn-txt:#ffffff; --bar:rgba(23,34,46,0.13); --bar-soft:rgba(23,34,46,0.07); --panel-bg:#ffffff; --glass:rgba(255,255,255,0.80); --chrome:rgba(255,255,255,0.93); --glass-border:rgba(23,34,46,0.10); --card-shadow:0 30px 64px rgba(20,30,45,0.16); --input-bg:rgba(23,34,46,0.05); --input-focus-bg:rgba(255,255,255,0.9); --err-color:#c0392b; --err-rgb:192,57,43; --board-opacity:0.96; --scrim:radial-gradient(130% 120% at 50% 40%, rgba(238,242,246,0.24) 0%, rgba(238,242,246,0.62) 100%); --glow:radial-gradient(circle at 50% 45%, rgba(79,143,230,0.24), transparent 68%); } * { box-sizing: border-box; } html, body { margin:0; height:100%; background:var(--bg); } @keyframes auth-spin { to { transform: rotate(360deg); } } @keyframes auth-err-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } @keyframes auth-drift { from { transform:translate(0,0) scale(1.07); } to { transform:translate(-16px,-12px) scale(1.12); } } @keyframes auth-palette-in { from { opacity:0; transform:translateX(14px) scale(.95); } to { opacity:1; transform:none; } } .auth { position:relative; width:100%; min-height:100vh; overflow:hidden; background:var(--bg); color:var(--txt); font-family:'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; transition: background .5s ease, color .5s ease; } /* ── Размытый декоративный «борд» позади (без реальных данных) ──────────── */ .auth-board { position:absolute; top:-8%; left:-8%; width:116%; height:116%; display:flex; flex-direction:column; background:var(--bg); filter:blur(30px) saturate(1.1); opacity:var(--board-opacity); transform-origin:center; animation:auth-drift 44s ease-in-out infinite alternate; transition: background .5s ease, opacity .5s ease; pointer-events:none; } .auth-board-top { display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 26px; flex:0 0 auto; } .auth-board-top-l, .auth-board-top-r { display:flex; align-items:center; gap:12px; } .auth-board-cols { display:flex; gap:20px; padding:6px 26px 26px; flex:1 1 auto; min-height:0; } .auth-board-chats { flex:1.18 1 0; background:var(--panel-bg); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:16px; } .auth-board-tasks { flex:1 1 0; display:flex; flex-direction:column; gap:16px; } .auth-board-row { display:flex; align-items:center; gap:13px; } .auth-board-av { width:42px; height:42px; border-radius:12px; background:var(--bar); flex:0 0 auto; } .auth-board-card { position:relative; background:var(--panel-bg); border-radius:16px; padding:18px 18px 18px 22px; display:flex; flex-direction:column; gap:14px; overflow:hidden; } .auth-board-card::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg, var(--accent), var(--deep)); } .b-logo { width:32px; height:32px; border-radius:9px; background:linear-gradient(160deg, var(--accent), var(--deep)); } .b-bar { height:15px; border-radius:7px; background:var(--bar); } .b-pill { height:34px; border-radius:10px; background:var(--panel-bg); } .b-line { height:13px; border-radius:7px; background:var(--bar); } .b-line-soft { height:11px; border-radius:6px; background:var(--bar-soft); } .b-chip { height:28px; border-radius:9px; background:var(--bar-soft); } .b-head { height:42px; border-radius:11px; background:var(--bar-soft); } .auth-scrim { position:absolute; inset:0; background:var(--scrim); transition:background .5s ease; pointer-events:none; } .auth-glow { position:absolute; top:-6%; left:50%; transform:translateX(-50%); width:720px; height:520px; background:var(--glow); filter:blur(18px); transition:background .5s ease; pointer-events:none; } /* ── Центр: переключатель + карточка ───────────────────────────────────── */ .auth-center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:90px 24px 40px; } .auth-shell { position:relative; width:min(92vw, 384px); display:flex; flex-direction:column; } .auth-switch-row { position:relative; height:46px; margin-bottom:16px; display:flex; justify-content:flex-end; align-items:center; z-index:3; isolation:isolate; } .auth-switch-btn { position:relative; width:46px; height:46px; border-radius:14px; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--btn-txt); background:linear-gradient(160deg, var(--accent), var(--deep)); box-shadow:0 10px 24px rgba(var(--accent-rgb),0.45); transition: background .45s ease, box-shadow .45s ease; flex:0 0 auto; } .auth-palette { position:absolute; top:0; right:58px; height:46px; display:flex; align-items:center; gap:12px; padding:0 17px; border-radius:14px; background:var(--chrome); border:1px solid var(--glass-border); box-shadow:var(--card-shadow); animation:auth-palette-in .22s ease; transition: background .45s ease; } .auth-palette[hidden] { display:none; } .auth-swatch { width:24px; height:24px; border-radius:50%; border:none; padding:0; cursor:pointer; flex:0 0 auto; transition:transform .15s ease; box-shadow:0 0 0 2px transparent; } .auth-swatch:hover { transform:scale(1.12); } .auth-swatch.sel { box-shadow:0 0 0 2px var(--chrome), 0 0 0 4px var(--accent); } .auth-swatch.sw-midnight { background:linear-gradient(140deg, #4a72f5 0%, #080c14 105%); } .auth-swatch.sw-light { background:linear-gradient(140deg, #1f9d70, #157a56); } .auth-swatch.sw-paper { background:linear-gradient(140deg, #b79a7e, #9c7f63); } .auth-swatch.sw-bitrix { background:linear-gradient(140deg, #4f8fe6, #3f78cc); } /* ── Карточка ──────────────────────────────────────────────────────────── */ .auth-card { position:relative; border-radius:22px; background:var(--glass); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(26px) saturate(1.4); backdrop-filter:blur(26px) saturate(1.4); box-shadow:var(--card-shadow); overflow:hidden; transition: background .45s ease, border-color .45s ease, box-shadow .45s ease; } .auth-card-body { padding:34px 30px 30px; } .auth-title { font-size:21px; font-weight:600; margin:0 0 5px; letter-spacing:-0.01em; color:var(--txt); } .auth-sub { font-size:13.5px; line-height:1.5; color:var(--txt2); margin:0 0 22px; } .auth-form { margin:0; } .auth-label { display:block; font-size:12px; color:var(--txt2); margin:15px 0 7px; } .auth-input { width:100%; padding:12px 13px; border-radius:12px; border:1px solid var(--line); background:var(--input-bg); color:var(--txt); font-size:14.5px; outline:none; font-family:inherit; transition: border-color .18s ease, box-shadow .18s ease, background .5s ease; } .auth-input::placeholder { color:var(--txt2); opacity:.6; } .auth-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.18); background:var(--input-focus-bg); } /* OTP-ячейки (создаёт login.js; одиночное поле #code прячется) */ .auth-otp { display:flex; gap:9px; justify-content:space-between; } .auth-otp[hidden] { display:none; } /* без JS контейнер пуст и скрыт — видно одиночное #code */ .auth-otp-cell { width:46px; height:56px; border-radius:12px; border:1px solid var(--line); background:var(--input-bg); color:var(--txt); font-size:22px; font-weight:600; text-align:center; outline:none; font-family:inherit; transition: border-color .18s ease, box-shadow .18s ease, background .5s ease; } .auth-otp-cell:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.18); background:var(--input-focus-bg); } .auth-code-single { letter-spacing:.3em; text-align:center; font-size:18px; } .auth-btn { width:100%; margin-top:24px; height:48px; border:none; border-radius:13px; background:linear-gradient(180deg, var(--accent), var(--deep)); color:var(--btn-txt); font-weight:700; font-size:14.5px; font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 12px 28px rgba(var(--accent-rgb),0.38); transition: filter .15s ease, background .45s ease; } .auth-btn:hover { filter:brightness(1.07); } .auth-btn:active { filter:brightness(0.95); } .auth-btn[disabled] { opacity:.92; cursor:default; filter:none; } .auth-spin { width:19px; height:19px; border-radius:50%; border:2px solid rgba(255,255,255,0.32); border-top-color:var(--btn-txt); animation:auth-spin .7s linear infinite; } /* ── Ошибка (сервер вставляет
…
вместо {{ERROR}}) ── */ .err { display:flex; align-items:center; gap:9px; margin:0 0 18px; padding:11px 13px; border-radius:12px; background:rgba(var(--err-rgb),0.12); border:1px solid rgba(var(--err-rgb),0.4); color:var(--err-color); font-size:13px; line-height:1.4; animation:auth-err-in .3s ease; } .err::before { content:""; width:16px; height:16px; flex:0 0 auto; background-color:var(--err-color); -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cline%20x1='12'%20y1='8'%20x2='12'%20y2='12'/%3E%3Cline%20x1='12'%20y1='16'%20x2='12.01'%20y2='16'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cline%20x1='12'%20y1='8'%20x2='12'%20y2='12'/%3E%3Cline%20x1='12'%20y1='16'%20x2='12.01'%20y2='16'/%3E%3C/svg%3E") center/contain no-repeat; } /* ── Чекбокс «доверять устройству» (кастомный вид, работает без JS) ─────── */ .auth-trust { display:flex; align-items:center; gap:10px; margin-top:18px; color:var(--txt2); font-size:13px; cursor:pointer; user-select:none; } .auth-trust input { position:absolute; opacity:0; width:0; height:0; } .auth-trust-box { width:19px; height:19px; border-radius:6px; border:1px solid var(--line); background:transparent; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:all .15s ease; } .auth-trust-box::after { content:""; width:11px; height:11px; background-color:var(--btn-txt); opacity:0; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='3.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%206%209%2017%204%2012'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='3.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%206%209%2017%204%2012'/%3E%3C/svg%3E") center/contain no-repeat; } .auth-trust input:checked + .auth-trust-box { background:var(--accent); border-color:var(--accent); } .auth-trust input:checked + .auth-trust-box::after { opacity:1; } .auth-trust input:focus-visible + .auth-trust-box { box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.25); } .auth-link { display:block; text-align:center; margin-top:18px; font-size:12.5px; color:var(--txt2); text-decoration:none; cursor:pointer; transition:color .18s ease; } .auth-link:hover { color:var(--accent); } @media (prefers-reduced-motion: reduce) { .auth-board { animation:none; } .auth-spin { animation-duration:1.2s; } }