/** * BLOCK сервис — back-office login screen. * * Two-pane login (solid brand-red pane + form pane). Loaded only on * master/view/login.php, so it is fully self-contained; all rules are scoped * to #block-login. * * The page renders inside , so dc-theme.css is already in * scope: type comes from --dc-font and radii from --dc-radius (via --r-sm), * which is why this file loads no webfont of its own. The warm paper palette * below (--paper / --card / --ink) is local to the login and deliberate. */ #block-login { /* core palette — warm paper + BLOCK brand red */ --ink: #161413; --ink-soft: #5b5550; --ink-faint: #938b83; --paper: #f4f1ea; --card: #fffdf8; --line: #e2dccf; --line-strong: #d2c9b6; --red: #e11226; --red-deep: #861e28; --red-wash: #ffe5e7; --r-sm: var(--dc-radius, 9px); position: fixed; inset: 0; z-index: 9999; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--paper); color: var(--ink); font-family: var(--dc-font, system-ui, -apple-system, "Segoe UI", sans-serif); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-align: left; } /* Neutralise the surrounding back-office chrome while the login is shown. */ body { overflow: hidden; } #block-login *, #block-login *::before, #block-login *::after { box-sizing: border-box; } #block-login a { color: inherit; text-decoration: none; } #block-login ::selection { background: var(--red); color: #fff; } /* ============ brand pane ============ */ #block-login .tw-brandpane { position: relative; overflow: hidden; background: var(--red-deep); color: #fff; /* extra room at the bottom so .tw-lead clears the vendor credit, which is positioned against the page corner rather than inside this pane. */ padding: 56px 64px 68px; display: flex; flex-direction: column; } #block-login .tw-logo { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; } #block-login .tw-logo .tw-logo-img { display: block; height: 46px; width: auto; /* the wordmark logo sits on black/red text, so give it a white badge that reads as intentional against the dark brand pane. */ padding: 13px 18px; background: #fff; border-radius: var(--r-sm); } #block-login .tw-lead { margin-top: auto; position: relative; z-index: 2; } #block-login .tw-brandpane h1 { font-weight: 500; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -.02em; max-width: 15ch; margin: 0; } #block-login .tw-brandpane p.tw-sub { margin-top: 22px; font-size: 16px; color: #ffd8db; max-width: 44ch; line-height: 1.55; } /* ============ form pane ============ */ #block-login .tw-formpane { display: flex; align-items: center; justify-content: center; padding: 40px; overflow-y: auto; } #block-login .tw-formcard { width: 100%; max-width: 380px; } #block-login .tw-formcard h2 { font-weight: 600; font-size: 32px; letter-spacing: -.02em; margin: 0 0 4px; } #block-login .tw-muted { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 26px; } #block-login .tw-field { margin-bottom: 16px; } #block-login .tw-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--ink); } #block-login .tw-field input { width: 100%; padding: 13px 15px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--card); font-size: 15px; color: var(--ink); font-family: inherit; transition: border-color .15s, box-shadow .15s; } #block-login .tw-field input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 4px var(--red-wash); } #block-login .tw-formrow { display: flex; align-items: center; justify-content: flex-end; margin: 4px 0 24px; font-size: 13.5px; } #block-login .tw-formrow a { color: var(--red); font-weight: 600; } #block-login .tw-btn-primary { display: block; width: 100%; padding: 14px; border: none; border-radius: var(--r-sm); background: var(--red); color: #fff; font-family: inherit; font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; cursor: pointer; transition: background .15s; } #block-login .tw-btn-primary:hover { background: var(--red-deep); } #block-login .tw-foot { margin-top: 28px; font-size: 13px; color: var(--ink-faint); text-align: center; } #block-login .tw-foot b { color: var(--ink-soft); font-weight: 600; } /* ============ demo accounts (env demo=true) ============ */ #block-login .tw-demo { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); } #block-login .tw-demo-head { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; } #block-login .tw-demo-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; } #block-login .tw-demo-acc { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); cursor: pointer; transition: border-color .15s, background .15s, transform .05s; } #block-login .tw-demo-acc:hover { border-color: var(--red); background: var(--red-wash); } #block-login .tw-demo-acc:active { transform: translateY(1px); } #block-login .tw-demo-fio { font-size: 14px; font-weight: 600; color: var(--ink); } /* Метка полных прав рядом с ФИО: раньше администратора называли текстом под списком, теперь список строится из базы и права отмечаются по данным. */ #block-login .tw-demo-admin { display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 999px; background: var(--red-wash); color: var(--red); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; vertical-align: 1px; } #block-login .tw-demo-cred { font-size: 12.5px; color: var(--ink-faint); } #block-login .tw-demo-cred b { color: var(--ink-soft); font-weight: 600; } #block-login .tw-demo-note { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-faint); } /* ============ vendor credit ============ */ /* Anchored to the page corner, not to either pane, so it survives the brand pane being dropped at ≤860px (see the media query below). */ #block-login .tw-copy { position: absolute; left: 64px; bottom: 26px; z-index: 3; margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .72); } #block-login .tw-copy a { text-decoration: underline; text-underline-offset: 2px; } #block-login .tw-copy a:hover { color: #fff; } /* ============ responsive ============ */ @media (max-width: 860px) { #block-login { grid-template-columns: 1fr; } #block-login .tw-brandpane { display: none; } /* With the brand pane gone the credit lands on paper, over the form pane's own scroll — give it the page background and reserve room underneath. */ #block-login .tw-formpane { padding-bottom: 64px; } #block-login .tw-copy { left: 0; right: 0; bottom: 0; padding: 14px 20px; background: var(--paper); color: var(--ink-faint); } #block-login .tw-copy a:hover { color: var(--ink); } }