/* Знак SorokinFit (медведь) вместо букв SF, 29.09. Картинка чёрная на прозрачном, поэтому рисуем её маской: цвет берётся из темы, в тёмной теме знак светлый. Волна 9: страница входа (login.html) грузит только этот файл. Остальная статика портала отдаётся после входа, поэтому всё, что нужно странице входа (переменные темы, поля, кнопки), лежит ниже под классом .lg-html (он есть только у страницы входа). Портал этот раздел не задевает. Волна 10: вход в два шага (пароль, потом телеграм), «Бот не отвечает?» с запасным кодом. */ .rail-logo { font-size: 0; background: none; box-shadow: none; } .rail-logo::before { content: ""; width: 30px; height: 33px; background: var(--text); -webkit-mask: url(/img/logo-128.png) center / contain no-repeat; mask: url(/img/logo-128.png) center / contain no-repeat; } /* Поле в колонке .field-row держит свою высоту: с flex: 1 оно сжималось до 10–18 px (форма владельца, вход) */ .field-row > .input:not(textarea) { flex: none; } /* ───────────── страница входа: переменные темы (как в app.css) ───────────── */ .lg-html { --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --h-sm: 30px; --h-md: 36px; --h-lg: 40px; --h-xl: 44px; --fs-2xs: 11.5px; --fs-xs: 12px; --fs-sm: 12.5px; --fs-md: 13.5px; --fs-lg: 14px; --fs-h2: 17px; --fs-h1: 22px; --lh-tight: 1.3; --lh-ui: 1.45; --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r: 14px; --r-lg: 18px; --r-pill: 999px; --bg: #f7f7f8; --surface: #ffffff; --surface-2: #fbfbfc; --surface-3: #f3f3f5; --hover: #efeff1; --line: #ececec; --line-2: #e0e0e4; --text: #17171b; --text-2: #55555f; --text-3: #8b8b96; --ink: #111113; --on-ink: #ffffff; --tg: #1677b3; --tg-text: #1d6fa5; --tg-soft: #e8f5fd; --red: #e5484d; --red-text: #c92a30; --red-soft: #fdeeee; --red-line: #f5c2c3; --amber-text: #8a4b08; --amber-soft: #fff6db; --amber-line: #f2d98b; --green-text: #15803d; --green-soft: #e8f7ee; --shadow-sm: 0 1px 2px rgba(17, 17, 26, .04), 0 1px 3px rgba(17, 17, 26, .05); --shadow-md: 0 6px 18px rgba(17, 17, 26, .07), 0 1px 3px rgba(17, 17, 26, .05); --focus-ring: #2b7ff7; --focus-soft: rgba(43, 127, 247, .16); color-scheme: light; background: var(--bg); } @media (prefers-color-scheme: dark) { .lg-html:not([data-theme="light"]) { --bg: #0e0e10; --surface: #161619; --surface-2: #1a1a1e; --surface-3: #212126; --hover: #25252b; --line: #26262c; --line-2: #34343c; --text: #ececf1; --text-2: #a8a8b3; --text-3: #777782; --ink: #f2f2f4; --on-ink: #111113; --tg: #1b7fbf; --tg-text: #6cc6f5; --tg-soft: #10273a; --red: #ef5358; --red-text: #ff8d91; --red-soft: #331a1c; --red-line: #6a2a2e; --amber-text: #f3c75a; --amber-soft: #2c2413; --amber-line: #5a4a1d; --green-text: #4ade80; --green-soft: #13281b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 6px 18px rgba(0, 0, 0, .45); --focus-ring: #5596f9; --focus-soft: rgba(85, 150, 249, .24); color-scheme: dark; } } .lg-html[data-theme="dark"] { --bg: #0e0e10; --surface: #161619; --surface-2: #1a1a1e; --surface-3: #212126; --hover: #25252b; --line: #26262c; --line-2: #34343c; --text: #ececf1; --text-2: #a8a8b3; --text-3: #777782; --ink: #f2f2f4; --on-ink: #111113; --tg: #1b7fbf; --tg-text: #6cc6f5; --tg-soft: #10273a; --red: #ef5358; --red-text: #ff8d91; --red-soft: #331a1c; --red-line: #6a2a2e; --amber-text: #f3c75a; --amber-soft: #2c2413; --amber-line: #5a4a1d; --green-text: #4ade80; --green-soft: #13281b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 6px 18px rgba(0, 0, 0, .45); --focus-ring: #5596f9; --focus-soft: rgba(85, 150, 249, .24); color-scheme: dark; } /* ───────────── страница входа: основа ───────────── */ .lg-html *, .lg-html *::before, .lg-html *::after { box-sizing: border-box; } .lg-html [hidden] { display: none !important; } .lg-html body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--text); font: var(--fs-lg)/var(--lh-ui) var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; overflow-x: hidden; } .lg-html button, .lg-html input { font: inherit; color: inherit; letter-spacing: inherit; } .lg-html button { cursor: pointer; } .lg-html button:disabled { cursor: default; } .lg-html a { color: inherit; text-decoration: none; } .lg-html :focus { outline: none; } .lg-html :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .lg-html .btn { --spin: var(--text-2); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); width: 100%; height: var(--h-md); padding: 0 var(--s-4); border-radius: var(--r-sm); border: 1px solid transparent; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; user-select: none; transition: background .15s, border-color .15s, color .15s, opacity .15s, box-shadow .15s; } .lg-html .btn-lg { height: var(--h-xl); font-size: var(--fs-lg); border-radius: var(--r-md); } .lg-html .btn-primary { --spin: var(--on-ink); background: var(--ink); color: var(--on-ink); } .lg-html .btn-primary:hover { opacity: .88; } .lg-html .btn-tg { --spin: #fff; background: var(--tg); color: #fff; } .lg-html .btn-tg:hover { filter: brightness(.95); } .lg-html .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line-2); box-shadow: var(--shadow-sm); } .lg-html .btn-secondary:hover { background: var(--surface-3); } .lg-html .btn:disabled { opacity: .5; } .lg-html .btn.is-busy { opacity: 1; } .lg-html .btn.is-busy > * { visibility: hidden; } .lg-html .btn.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--spin); border-right-color: var(--spin); animation: lg-spin .7s linear infinite; } .lg-html .btn .lg-ic { flex: none; width: 18px; height: 18px; } .lg-html .link-btn { border: 0; background: none; padding: 2px var(--s-1); font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; } .lg-html .link-btn:hover { color: var(--text); } .lg-html .input { width: 100%; height: var(--h-md); min-width: 0; padding: 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: var(--fs-md); transition: border-color .15s, box-shadow .15s; } .lg-html .input::placeholder { color: var(--text-3); } .lg-html .input:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--focus-soft); outline: none; } .lg-html .field-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .lg-html .field-label { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 650; color: var(--text); } .lg-html .field-hint { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--text-3); } .lg-html .adm-eye { margin-left: auto; font-weight: 600; } @keyframes lg-spin { to { transform: rotate(360deg); } } /* ───────────── страница входа: раскладка ───────────── */ body.lg-body { background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 70%), var(--bg); position: relative; } body.lg-body::before { content: ""; position: fixed; right: -120px; bottom: -140px; width: 520px; height: 570px; background: var(--ink); opacity: .045; pointer-events: none; -webkit-mask: url(/img/logo.png) center / contain no-repeat; mask: url(/img/logo.png) center / contain no-repeat; } .lg-wrap { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4); padding: var(--s-8) var(--s-4) calc(var(--s-8) + env(safe-area-inset-bottom)); } .lg-hero { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; position: relative; } .lg-mark { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: var(--ink); box-shadow: var(--shadow-md); } .lg-mark::before { content: ""; width: 50px; height: 55px; background: var(--on-ink); -webkit-mask: url(/img/logo-128.png) center / contain no-repeat; mask: url(/img/logo-128.png) center / contain no-repeat; } .lg-word { margin-top: var(--s-2); font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--text); } .lg-tag { font-size: var(--fs-sm); color: var(--text-3); line-height: var(--lh-ui); } .lg-card { position: relative; width: min(400px, 100%); display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); } .lg-titles { min-width: 0; text-align: center; } .lg-title { margin: 0; font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -.01em; } .lg-sub { margin: 4px 0 0; font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--text-3); text-wrap: balance; } .lg-form { display: flex; flex-direction: column; gap: var(--s-4); } .lg-err { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: var(--red-soft); border: 1px solid var(--red-line); color: var(--red-text); font-size: var(--fs-sm); line-height: var(--lh-ui); font-weight: 600; } .lg-err.is-warn { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber-text); } .lg-err.is-ok { background: var(--green-soft); border-color: transparent; color: var(--green-text); } .lg-err a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .lg-foot { margin: 0; font-size: var(--fs-xs); color: var(--text-3); text-align: center; max-width: 400px; line-height: var(--lh-ui); text-wrap: balance; } /* шаг 2 входа (волна 10): подтверждение в телеграме после пароля */ .lg-step { display: flex; flex-direction: column; gap: var(--s-4); } .lg-code { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); padding: var(--s-4) var(--s-3); border-radius: var(--r-md); background: var(--surface-3); } .lg-code-lbl { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); } .lg-code-val { font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: .28em; padding-left: .28em; color: var(--text); font-variant-numeric: tabular-nums; } .lg-code-hint { font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--text-3); text-align: center; text-wrap: balance; } .lg-status { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--text-2); } .lg-status .lg-dot { flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--tg); animation: lg-spin .8s linear infinite; } .lg-status.is-done .lg-dot { animation: none; border-color: var(--green-text); background: var(--green-text); } .lg-step-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 20px; font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; } .lg-note { padding: var(--s-3); border-radius: var(--r-md); background: var(--amber-soft); border: 1px solid var(--amber-line); color: var(--amber-text); font-size: var(--fs-sm); line-height: var(--lh-ui); font-weight: 600; text-align: center; text-wrap: balance; } .lg-step-foot .link-btn { padding-right: 0; } /* что делать: три коротких шага, номер по центру своей строки */ .lg-todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); } .lg-todo li { display: flex; align-items: flex-start; gap: var(--s-2); min-width: 0; font-size: var(--fs-sm); line-height: 20px; color: var(--text-2); } .lg-todo li > span:last-child { min-width: 0; overflow-wrap: anywhere; } .lg-todo-n { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-3); color: var(--text-2); font-size: var(--fs-2xs); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } /* «Бот не отвечает?»: запасной код из команды на сервере */ .lg-emerg { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); } .lg-emerg-toggle { font-weight: 600; } .lg-emerg-form { align-self: stretch; gap: var(--s-3); } .lg-emerg-hint { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--text-2); text-align: center; text-wrap: balance; } .lg-emerg-err { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-ui); font-weight: 600; color: var(--red-text); } .lg-html .lg-emerg-in { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; text-align: center; } .lg-html .lg-emerg-in::placeholder { text-transform: none; letter-spacing: .08em; } @media (max-width: 479px) { body.lg-body::before { width: 300px; height: 330px; right: -90px; bottom: -90px; } .lg-wrap { justify-content: flex-start; padding-top: var(--s-6); } .lg-card { padding: var(--s-5) var(--s-4); } .lg-mark { width: 64px; height: 64px; border-radius: 18px; } .lg-mark::before { width: 42px; height: 46px; } .lg-word { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { .lg-html .btn.is-busy::after, .lg-status .lg-dot { animation-duration: 2s; } }