/* ========================================================================== Login — restyle visual escopado (.login-area), carregado SÓ na tela de Login. Espelha a linguagem do Dashboard do cliente (customer-area.css) e do kit .ps-* do InviteLink: fundo escuro, Oswald, acento verde, card com blur. Não altera markup nem JS — reaproveita as classes/IDs já existentes (.panel, .form-control, .btn-success, .toggle-eye-password, #formPassword, #btnShowPassword, #inputSubmitLogin...). ========================================================================== */ /* Fundo escuro da página. Como este arquivo só é incluído no Login, mexer no body aqui não afeta as outras telas do MasterWithoutMenus. O !important vence a regra body{} inline do layout, que aparece depois no . */ body { background: #060606 !important; background-image: linear-gradient(180deg, #151515 0, #070707 42%, #050505 100%) !important; } /* Área do canvas de fundo. Este arquivo só carrega no Login, então mexer no #main aqui não afeta as outras telas do MasterWithoutMenus. */ #main { position: relative; min-height: 100vh; overflow: hidden; } /* Canvas atrás de tudo, sem capturar clique — o card fica por cima. */ .login-code-bg { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; } .login-area { --la-accent: #26ea8a; --la-panel: rgb(255 255 255 / .06); --la-border: rgb(255 255 255 / .16); --la-text: #fff; --la-muted: #b8b8b8; --la-soft: #dedede; position: relative; z-index: 1; padding: 6px 0 44px; color: var(--la-text); font-family: Oswald, sans-serif; } /* ---------- Card ---------- */ .login-area .panel.box-login-dark { width: 100%; margin-top: 24px; color: var(--la-text); border: 1px solid var(--la-border); border-radius: 12px; box-shadow: 0 20px 60px rgb(0 0 0 / .45); background-color: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(1px); } .login-area .panel-body { padding: 26px 26px 24px; } /* ---------- Logo ---------- */ .login-area .logo-animation { text-align: center; margin-bottom: 22px; margin-top: 1em; } .login-area .logo-animation img { width: 140px; height: auto; /* logo-dark.png é escuro; invert deixa o ícone branco no card escuro. */ filter: invert(1); } /* Signup usa .logo (Login usa .logo-animation) — mesmo tratamento do ícone. */ .login-area .logo { text-align: center; margin: 8px 0 18px; } .login-area .logo img { width: 140px; height: auto; filter: invert(1); } /* ---------- Labels ---------- */ .login-area .form-group { margin-bottom: 18px; } .login-area .control-label { display: block; margin-bottom: 7px; color: var(--la-soft); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } /* ---------- Inputs ---------- */ .login-area .form-control { height: auto; padding: 12px 14px; color: var(--la-text); background: rgb(0 0 0 / .35); border: 1px solid var(--la-border); border-radius: 8px; box-shadow: none; font-family: Oswald, sans-serif; font-size: 15px; } .login-area .form-control::placeholder { color: #8f8f8f; } .login-area .form-control:focus { border-color: var(--la-accent); box-shadow: none; outline: none; } /* ---------- Campo de senha com o "olho" (mantém #btnShowPassword do JS) ---------- */ .login-area .toggle-eye-password { position: relative; } .login-area .toggle-eye-password .form-control { padding-right: 44px; } /* Cobre o(s) ícone(s) de senha em ambos os estados (ico-eye-close/open) e os dois campos do Signup (#btnShowPassword e #btnShowPassword3). */ .login-area .toggle-eye-password i { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--la-muted); cursor: pointer; } .login-area .toggle-eye-password i:hover { color: #fff; } /* ---------- Link "esqueci a senha" ---------- */ .login-area .forgotPassword { color: var(--la-muted); font-size: 12px; } .login-area .forgotPassword:hover { color: var(--la-accent); } /* ---------- Botão principal (Entrar) ---------- */ .login-area .btn-success { padding: 12px 16px; color: #050505; background: var(--la-accent); border: 0; border-radius: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .login-area .btn-success:hover, .login-area .btn-success:focus { color: #050505; background: #34f299; } /* Loading do submit (mesmo padrão do Profile): o customer-form-loading.js adiciona .is-submitting e troca o texto pelo data-loading; aqui vem o visual. */ .login-area .is-submitting { pointer-events: none; opacity: .85; } .login-area .btn.is-submitting::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: la-spin .6s linear infinite; } @keyframes la-spin { to { transform: rotate(360deg); } } /* ---------- Botão secundário (Criar minha conta) ---------- */ .login-area .signup { margin-top: 14px; } .login-area .signup .btn { padding: 11px 16px; color: #fff; background: transparent; border: 1px solid var(--la-border); border-radius: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; transition: color .3s ease, background-color .3s ease, border-color .3s ease; } .login-area .signup .btn:hover, .login-area .signup .btn:focus { color: #050505; background: var(--la-accent); border-color: var(--la-accent); } /* ---------- Estado de erro (login inválido) ---------- */ .login-area .text-danger { color: #ffb4b4; } .login-area .list-group { margin-top: 6px; } .login-area .list-group-item { color: #ffb4b4; background: rgb(255 107 107 / .10); border: 1px solid rgb(255 107 107 / .30); border-radius: 8px; } /* ========================================================================== Signup — mesmos tokens/escopo do Login, complementos para os elementos próprios desta tela (título, links internos, validação, alerta). ========================================================================== */ .login-area h2 { color: #fff; font-size: 1em; } /* Links dentro do card (termos de uso, "já tenho conta"). O botão fantasma .signup .btn tem especificidade maior e não é afetado. */ .login-area .checkbox a, .login-area .signup a { color: var(--la-accent); font-weight: 600; } .login-area .checkbox a:hover, .login-area .signup a:hover { color: #34f299; } /* Erros de validação por campo */ .login-area .help-block { margin-top: 6px; color: #ffb4b4; font-size: 13px; } .login-area .has-error .control-label { color: #ffb4b4; } .login-area .has-error .form-control { border-color: rgb(255 107 107 / .55); } /* Aviso informativo (ex.: primeiro acesso) */ .login-area .alert-info { color: #cfe4ff; background: rgb(158 197 255 / .10); border: 1px solid rgb(158 197 255 / .30); border-radius: 8px; } .login-area .alert-danger { color: #ffb4b4; background: rgb(255 107 107 / .10); border: 1px solid rgb(255 107 107 / .30); border-radius: 8px; } .login-area .alert-danger ul { margin: 6px 0 0; padding-left: 18px; }