/* ============================================================================ ПЛОТНЫЙ ЭКРАН АВТОРИЗАЦИИ cp.lv — вход, регистрация, восстановление пароля. Макет утверждён владельцем 04.09.2026: https://claude.ai/code/artifact/8dff80f1-b837-41df-917c-bc9cb7c938a7 (пункт G1 в hostbill/panel-design/UI-AUDIT.md — там же таблица чисел). ⚠️ ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ cplv-panel.css. Страницы авторизации рисует вёрстка САЙТА: login.tpl / signup.tpl / passreminder.tpl — самостоятельные HTML-страницы с /assets/css/style.css. А cplv-panel.css приходит из custom/auth.tpl, который печатается ДО (auth.tpl включён в header.tpl), то есть ПЕРЕД стилями сайта и проигрывает им по каскаду. Правила плотного экрана пришлось бы писать через !important. Этот файл подключается последним в каждой страницы авторизации — и просто выигрывает по порядку. Лежит в templates/cp-lv/custom/, значит уже покрыт строкой `templates/cp-lv/*` в auto-upgrade-exclude. ⚠️ ЭКРАНЫ ВСЕГДА СВЕТЛЫЕ (правило от 04.09.2026, пункты 74 и 83 журнала): тело этих страниц без классов темы, тёмные токены панели сюда не доходят. Поэтому цвета зашиты числами — те же, что в панели: полотно #f6f7f9, блок #fff, контур #e2e5ea, текст #14181f, подписи #6b7280, действие #3f8f57, GitHub #181717, Google #d75959. ⚠️ Размеры в ПИКСЕЛЯХ, а не в rem: у темы сайта корневой размер 20px, и любое значение в rem здесь выходило бы в полтора раза крупнее макета. ============================================================================ */ .cplv-auth { display: grid; grid-template-columns: 1fr 1fr; /* ровно пополам */ min-height: 100vh; background: #fff; } /* ---------------------------------------------------------------- ПРОМО --- */ /* Картинка — из языковой строки c1_login_img_bg (её правит владелец в панели), поверх неё градиент к низу: без него белый заголовок ложится на светлые участки рисунка и теряется. */ .cplv-auth__promo { position: relative; display: flex; align-items: flex-end; padding: 32px; overflow: hidden; background: #0f1a17 center / cover no-repeat; color: #fff; } .cplv-auth__promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 17, 15, 0) 40%, rgba(11, 17, 15, .88) 100%); } /* ⚠️ Ширину текста НЕ ограничиваем: половина и так узкая, а ограничение в 38ch рвало заголовок пополам — «Серверы на AMD EPYC и / NVMe» висело в две строки при пустом месте справа (замечание владельца 05.09.2026). */ .cplv-auth__promo-in { position: relative; z-index: 1; width: 100%; } body .cplv-auth__promo-in h2 { margin: 0 0 8px; font-size: 25px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; color: #fff; } body .cplv-auth__promo-in p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .72); } /* ----------------------------------------------------------------- ФОРМА --- */ /* 32/40 вместо прежних 60 со всех сторон: 60 съедало треть экрана ноутбука. */ /* Половину теперь делит на части .cplv-auth__mid: центрировать содержимое самой панелью нельзя — иначе блок поддержки центрируется вместе с формой вместо того, чтобы стоять у нижнего края. */ .cplv-auth__pane { display: flex; flex-direction: column; padding: 32px 40px; background: #fff; color: #14181f; } /* Середина половины: растягивается на всё свободное место и держит форму по центру, а блок поддержки уходит под ней к нижнему краю (просьба владельца 05.09.2026). Раньше поддержка шла сразу за ссылками внутри карточки и читалась с ними одним абзацем. */ .cplv-auth__mid { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; } /* Ограничение ширины: половина широкого монитора — это 700+ px, поле ввода такой длины читается как строка таблицы, а не как форма. В макете (окно 1180) половина за вычетом отступов давала как раз около 480. */ .cplv-auth__card { width: 100%; max-width: 480px; margin: 0 auto; } body .cplv-auth__h { margin: 0 0 6px; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: #14181f; } body .cplv-auth__lead { margin: 0 0 16px; color: #6b7280; font-size: 14px; line-height: 1.45; } /* Сообщения об ошибке входа печатает сюда скрипт страницы (#alert_errors). Пустой контейнер не должен занимать высоту — отступ только у содержимого. */ .cplv-auth__alerts:empty { display: none; } .cplv-auth__alerts .alert { margin-bottom: 12px; font-size: 14px; } /* --------------------------------------------------------- СОЦКНОПКИ --- */ /* Разметку кнопок даёт штатный виджет входа HostBill ({clientwidget module="login" section="widgets"}) — это колонки Bootstrap .col-12.col-md-5 со ссылками .btn. Мы их не трогаем (файлы модулей SSO — ядро), а раскладываем сеткой и приводим к высоте панели. */ .cplv-auth__social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ⚠️ ПОРЯДОК КНОПОК: Google первой, GitHub второй (решение владельца 05.09.2026). Виджет печатает их в порядке модулей HostBill (GitHub, потом Google), и в самом виджете этот порядок не задаётся — переставляем раскладкой. Опознаём кнопки по классу цвета, который проставляет модуль: .btn-red — Google, .btn-dark — GitHub. Браузер без :has() (до 2023 года) просто оставит порядок виджета — вёрстка при этом не ломается. */ .cplv-auth__social > * { order: 3; } .cplv-auth__social > *:has(.btn-red) { order: 1; } .cplv-auth__social > *:has(.btn-dark) { order: 2; } .cplv-auth__social > * { flex: none; width: auto; max-width: none; min-width: 0; padding: 0; margin: 0; } body .cplv-auth__social .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 44px; min-height: 44px; padding: 0 16px; margin: 0; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; /* у темы кнопки заглавными — в макете обычный регистр */ } /* у виджета знак отбит классом me-4: при корневых 20px это 30px, вместо него gap */ body .cplv-auth__social .btn i { margin: 0 !important; font-size: 17px; } body .cplv-auth__social .btn span { font-weight: 600; } /* ⚠️ ЦВЕТА КНОПОК ЗАДАЁМ ЗДЕСЬ, а не полагаемся на .btn-dark/.btn-red из cplv-panel.css. Тот файл печатается ДО (он в custom/auth.tpl), и на странице подтверждения e-mail его токены до правил не доходили: кнопка выходила светло-зелёной #9ccd7e из темы вместо #3f8f57, а var(--cplv-green) вычислялся в пустоту. Страницы авторизации должны быть самодостаточны — иначе цвет главного действия зависит от порядка, в котором HostBill склеил страницу. */ body .cplv-auth__social .btn-dark { background-color: #181717; border-color: #181717; color: #fff; } body .cplv-auth__social .btn-dark:hover { background-color: #2b2b2b; border-color: #2b2b2b; color: #fff; } body .cplv-auth__social .btn-red { background-color: #d75959; border-color: #d75959; color: #fff; } body .cplv-auth__social .btn-red:hover { background-color: #c44e4e; border-color: #c44e4e; color: #fff; } /* ------------------------------------------------------------ «ИЛИ» --- */ /* Было 141 px на разделитель (отступы 30 + пустые блоки), стало 14 + 14. */ .cplv-auth__or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: #9aa1ad; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .cplv-auth__or::before, .cplv-auth__or::after { content: ""; flex: 1 1 auto; height: 1px; background: #e2e5ea; } /* ------------------------------------------------------------ ПОЛЯ --- */ body .cplv-auth__field { display: block; width: 100%; height: 44px; padding: 0 14px; margin: 0 0 10px; background: #f6f7f9; border: 1px solid #e2e5ea; border-radius: 8px; color: #14181f; font-family: inherit; font-size: 15px; line-height: 42px; } body .cplv-auth__field::placeholder { color: #9aa1ad; opacity: 1; } body .cplv-auth__field:focus { background: #fff; border-color: #3f8f57; outline: 2px solid rgba(63, 143, 87, .25); outline-offset: 0; } /* «Забыли пароль?» — в строке с полем пароля, справа: там о ней и вспоминают, и это экономит целую строку под кнопкой. */ .cplv-auth__forgot { display: flex; justify-content: flex-end; margin: -4px 0 12px; } .cplv-auth__forgot a { color: #6b7280; font-size: 13px; text-decoration: none; border-bottom: 1px solid #e2e5ea; } .cplv-auth__forgot a:hover { color: #14181f; } /* Проверочный код: картинка и поле в один ряд, поле не растягивается на всю ширину — вводят 4–6 знаков. */ .cplv-auth__captcha { margin: 0 0 10px; } .cplv-auth__captcha-row { display: flex; align-items: center; gap: 10px; } .cplv-auth__captcha-row img { height: 44px; border-radius: 8px; cursor: pointer; } body .cplv-auth__captcha-row .cplv-auth__field { margin: 0; } .cplv-auth__label { display: block; margin: 0 0 6px; color: #6b7280; font-size: 13px; } .cplv-auth__hint { display: block; margin: 6px 0 0; color: #9aa1ad; font-size: 12.5px; } /* ---------------------------------------------------------- КНОПКА --- */ body .cplv-auth__btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; min-height: 46px; padding: 0 16px; margin: 0; /* ⚠️ У кнопки НЕТ классов темы (.btn .btn-green): правило темы .btn.btn-green — это два класса, оно сильнее нашего одиночного, и на странице подтверждения e-mail кнопка выходила светло-зелёной #9ccd7e. Раньше её перекрывал body .btn-green{…!important} из cplv-panel.css, но тот файл печатается ДО и до этой страницы не доходил. Свой класс и свой цвет — и вид кнопки больше не зависит от того, как HostBill склеил страницу. Цвет — числом, по той же причине, что и у соцкнопок выше */ background-color: #3f8f57; border: 1px solid #3f8f57; border-radius: 8px; color: #fff; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; cursor: pointer; } body .cplv-auth__btn:hover { background-color: #35784a; border-color: #35784a; color: #fff; } /* Поле кода подтверждения: по центру и вразрядку — код набирают глазами по одному знаку, сплошная строка мелким кеглем для этого не годится. Регистр не поднимаем: код у модуля чувствителен к нему. */ body .cplv-auth__field--code { text-align: center; font-size: 17px; font-weight: 600; letter-spacing: .18em; } body .cplv-auth__field--code::placeholder { font-size: 15px; font-weight: 400; letter-spacing: 0; } /* Пояснение под кнопкой («письмо не пришло — проверьте спам») — подпись, а не абзац: оно объясняет ссылки, которые идут следом. */ body .cplv-auth__note { margin: 12px 0 0; color: #9aa1ad; font-size: 12.5px; line-height: 1.5; } /* Строка под кнопкой: «Нет аккаунта? Зарегистрироваться» — вместо прежнего подвала на 240 px. */ body .cplv-auth__foot { margin: 14px 0 0; color: #6b7280; font-size: 13.5px; } /* Две равноправные ссылки в ряд (подтверждение e-mail: «отправить снова» и «выйти»). Промежуток 16 — не меньше 8, как требует правило отступов для соседних нажимаемых элементов. */ body .cplv-auth__foot--links { display: flex; flex-wrap: wrap; gap: 16px; } .cplv-auth__foot a { color: #35784a; font-weight: 600; text-decoration: none; } .cplv-auth__foot a:hover { text-decoration: underline; } /* Согласие с условиями — мелкой строкой, как и было. */ body .cplv-auth__tos { margin: 10px 0 0; color: #9aa1ad; font-size: 12.5px; } .cplv-auth__tos a { color: #6b7280; } /* ------------------------------------------------------- ПОДДЕРЖКА --- */ /* Строка по центру и три знака без подписей (решение владельца 04.09.2026): кнопки с подписями спорили за внимание с «Войти», а подпись повторяла то, что и так говорит знак. Название остаётся в title и aria-label — знак без подписи обязан называться хотя бы для чтения с экрана. Область нажатия 34×34 при знаке 18: попасть пальцем по 18 px невозможно. Отступ сверху 22 — как между блоками во всей панели. */ .cplv-auth__help { flex: 0 0 auto; /* стоит у нижнего края половины и не сжимается */ margin-top: 22px; color: #9aa1ad; font-size: 12.5px; line-height: 1.5; text-align: center; } body .cplv-auth__help p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; } .cplv-auth__help-ic { display: flex; justify-content: center; gap: 6px; margin-top: 4px; } .cplv-auth__help-ic a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: #6b7280; text-decoration: none; } .cplv-auth__help-ic a:hover { background: #f6f7f9; color: #14181f; } body .cplv-auth__help-ic a i { font-size: 18px; line-height: 1; } .cplv-auth a:focus-visible, .cplv-auth button:focus-visible { outline: 2px solid #3f8f57; outline-offset: 2px; } /* -------------------------------------------------------- ТЕЛЕФОН --- */ /* Ниже 992 промо-половина уходит: на 390 px она занимала бы пол-экрана картинкой, а войти всё равно нужно в форме. */ @media (max-width: 991.98px) { .cplv-auth { grid-template-columns: 1fr; } .cplv-auth__promo { display: none; } body .cplv-auth__pane { padding: 28px 16px; } } @media (max-width: 479.98px) { .cplv-auth__social { grid-template-columns: 1fr; } }