/* * Telas de autenticação (login, recuperação, redefinição de senha). * A variação por marca vem da classe no montada no _AuthLayout: * .is-white-label troca o card translúcido da Valori pelo card sólido no tema do parceiro. */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Valori: card translúcido sobre a foto. */ .auth-page { --login-overlay: rgba(6, 45, 44, 0.2); --login-card-bg: rgba(0, 0, 0, 0.3); --login-card-border: rgba(255, 255, 255, 0.2); --login-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); --login-card-blur: blur(20px); --login-title: #FFFFFF; --login-title-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); --login-text: rgba(255, 255, 255, 0.85); --login-label: rgba(255, 255, 255, 0.9); --login-muted: rgba(255, 255, 255, 0.6); --login-input-bg: rgba(255, 255, 255, 0.2); --login-input-bg-focus: rgba(255, 255, 255, 0.25); --login-input-border: rgba(255, 255, 255, 0.3); --login-input-color: #FFFFFF; --login-input-blur: blur(10px); --login-autofill-action: #1d3331; --login-link: rgba(255, 255, 255, 0.85); --login-alert-bg: rgba(230, 57, 70, 0.22); --login-alert-border: rgba(230, 57, 70, 0.55); --login-alert-color: #ffffff; --login-warning-bg: rgba(255, 193, 7, 0.2); --login-warning-border: rgba(255, 193, 7, 0.55); --login-warning-color: #ffffff; --login-invalid: #ffb3ba; --login-success-bg: rgba(6, 214, 160, 0.18); --login-success-border: rgba(6, 214, 160, 0.5); --login-success-color: #ffffff; } /* White label: card sólido nas cores do tema da marca (_BrandTheme). */ .auth-page.is-white-label { --login-overlay: transparent; --login-card-bg: var(--vault-surface-1, #f0f3f1); --login-card-border: var(--vault-card-border, #ccd3d0); --login-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 20px 40px rgba(0, 0, 0, 0.08); --login-card-blur: none; --login-title: var(--bs-heading-color, #062D2C); --login-title-shadow: none; --login-text: var(--vault-text-muted, #5e716d); --login-label: var(--vault-text-soft, #3f5552); --login-muted: var(--vault-text-muted, #5e716d); --login-input-bg: var(--vault-input-bg, #f6f8f7); --login-input-bg-focus: var(--vault-input-bg, #f6f8f7); --login-input-border: var(--vault-input-border, #bfc7c3); --login-input-color: var(--bs-body-color, #1d3331); --login-input-blur: none; --login-autofill-action: var(--login-muted); --login-link: var(--vault-text-muted, #5e716d); --login-alert-bg: #f5d6d8; --login-alert-border: #d99ea4; --login-alert-color: #6b1f24; --login-warning-bg: #fff3cd; --login-warning-border: #ffda6a; --login-warning-color: #664d03; --login-invalid: #b02a37; --login-success-bg: #d4efe4; --login-success-border: #8fcfb3; --login-success-color: #0f4d36; } body.auth-page { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; min-height: 100vh; background: linear-gradient(135deg, #062D2C 0%, #06D6A0 100%); background-image: url('../imgs/login-background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; position: relative; } body.auth-page.is-white-label { background-color: var(--bs-body-bg, #e7ece9); background-image: radial-gradient(ellipse 1000px 500px at top, rgba(var(--valori-aqua-rgb, 6, 214, 160), 0.05), transparent 65%); background-attachment: fixed; } body::before { content: ''; position: absolute; inset: 0; background: var(--login-overlay); z-index: 0; } .login-card { position: relative; z-index: 1; width: 90%; max-width: 420px; background: var(--login-card-bg); backdrop-filter: var(--login-card-blur); -webkit-backdrop-filter: var(--login-card-blur); border-radius: 24px; padding: 50px 40px; box-shadow: var(--login-card-shadow); border: 1px solid var(--login-card-border); } .logo { text-align: center; margin-bottom: 10px; } .logo img { max-width: 230px; height: auto; } /* O logo da Valori é branco e ganha o dourado da marca; o do parceiro fica como veio. */ .auth-page:not(.is-white-label) .logo img { filter: brightness(0) saturate(100%) invert(73%) sepia(35%) saturate(644%) hue-rotate(358deg) brightness(92%) contrast(89%); } .app-title { font-size: 40px; font-weight: 700; color: var(--login-title); margin-bottom: 8px; text-align: center; text-shadow: var(--login-title-shadow); } .app-subtitle { font-size: 15px; color: var(--login-text); margin-bottom: 30px; text-align: center; font-weight: 400; } .form-group { margin-bottom: 20px; } .form-label { display: block; font-size: 14px; color: var(--login-label); margin-bottom: 8px; font-weight: 500; } .form-control { width: 100%; padding: 15px 18px; font-size: 15px; border: 1px solid var(--login-input-border); border-radius: 12px; transition: all 0.3s ease; background: var(--login-input-bg); backdrop-filter: var(--login-input-blur); color: var(--login-input-color); } .form-control::placeholder { color: var(--login-muted); } .form-control:focus { outline: none; border-color: var(--valori-aqua, #06D6A0); background: var(--login-input-bg-focus); box-shadow: 0 0 0 3px rgba(var(--valori-aqua-rgb, 6, 214, 160), 0.2); } .input-with-action { position: relative; } .input-with-action .form-control { padding-right: 52px; } .input-action { position: absolute; top: 0; right: 0; height: 100%; width: 48px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; color: var(--login-muted); font-size: 18px; line-height: 1; border-radius: 0 12px 12px 0; cursor: pointer; transition: color 0.2s ease; -webkit-tap-highlight-color: transparent; } .input-action:hover, .input-action:focus-visible { color: var(--valori-yellow, #FAA916); } .input-action:focus-visible { outline: 2px solid var(--valori-aqua, #06D6A0); outline-offset: -2px; } /* Campo preenchido pelo gerenciador de senhas: o navegador pinta o fundo claro por conta própria e não deixa trocar. O olho escurece junto para continuar visível. Duas regras de propósito: numa lista só, o navegador que não conhece um dos seletores descarta a regra inteira. */ .input-with-action .form-control:-webkit-autofill ~ .input-action:not(:hover):not(:focus-visible) { color: var(--login-autofill-action); } .input-with-action .form-control:autofill ~ .input-action:not(:hover):not(:focus-visible) { color: var(--login-autofill-action); } .form-control::-ms-reveal, .form-control::-ms-clear { display: none; } .btn-login { position: relative; width: 100%; padding: 15px; font-size: 16px; font-weight: 600; color: var(--vault-on-accent, #062D2C); background: var(--valori-yellow, #FAA916); border: none; border-radius: 12px; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; margin-top: 15px; box-shadow: 0 4px 15px rgba(var(--valori-yellow-rgb, 250, 169, 22), 0.3); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; } .btn-login:hover { background: var(--valori-yellow-hover, #E09810); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--valori-yellow-rgb, 250, 169, 22), 0.4); } .btn-login:active { transform: translateY(0); } a.btn-login { text-decoration: none; } .btn-login:disabled, .btn-login.is-loading { cursor: progress; transform: none !important; box-shadow: 0 4px 15px rgba(var(--valori-yellow-rgb, 250, 169, 22), 0.25); } .btn-login .btn-label { display: inline-flex; align-items: center; gap: 8px; transition: opacity 0.2s ease, transform 0.2s ease; } .btn-login.is-loading .btn-label { opacity: 0; transform: translateY(4px); } .btn-login .btn-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; color: var(--vault-on-accent, #062D2C); font-weight: 600; letter-spacing: 0.02em; } .btn-login.is-loading .btn-loader { opacity: 1; } .btn-login .spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(var(--valori-dark-green-rgb, 6, 45, 44), 0.18); border-top-color: var(--vault-on-accent, #062D2C); border-right-color: var(--vault-on-accent, #062D2C); animation: btnSpin 0.7s linear infinite; } .btn-login.is-loading::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%); transform: translateX(-100%); animation: btnShimmer 1.4s ease-in-out infinite; pointer-events: none; } @keyframes btnSpin { to { transform: rotate(360deg); } } @keyframes btnShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .login-progress { position: absolute; inset: -1px; border-radius: inherit; border-top: 3px solid transparent; background: linear-gradient(90deg, var(--valori-dark-green, #062D2C), var(--valori-aqua, #06D6A0), var(--valori-yellow, #FAA916), var(--valori-aqua, #06D6A0), var(--valori-dark-green, #062D2C)) border-box 0 0 / 250% 100%; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity 0.35s ease; animation: progressSlide 1.6s linear infinite; pointer-events: none; } .login-progress.is-active { opacity: 1; } @keyframes progressSlide { 0% { background-position: 0% 0; } 100% { background-position: 250% 0; } } .login-card.is-loading .form-control { opacity: 0.7; pointer-events: none; } .login-alert { background: var(--login-alert-bg); border: 1px solid var(--login-alert-border); border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; color: var(--login-alert-color); font-size: 14px; } /* Aviso, não erro: o pedido foi entendido, mas o limite segurou o envio. */ .login-alert.is-warning { background: var(--login-warning-bg); border-color: var(--login-warning-border); color: var(--login-warning-color); } .login-alert strong { display: block; margin-bottom: 2px; } .login-alert a { color: var(--valori-yellow, #FAA916); font-weight: 600; } .login-success { background: var(--login-success-bg); border: 1px solid var(--login-success-border); border-radius: 12px; padding: 16px; margin-bottom: 20px; color: var(--login-success-color); font-size: 14px; line-height: 1.45; text-align: center; } .login-success i { display: block; font-size: 32px; margin-bottom: 8px; color: var(--valori-aqua, #06D6A0); } .login-success strong { display: block; font-size: 16px; margin-bottom: 4px; } .field-validation-error { display: block; margin-top: 6px; font-size: 12.5px; color: var(--login-invalid); } .forgot-link { display: block; text-align: center; margin-top: 18px; color: var(--login-link); font-size: 14px; text-decoration: none; } .forgot-link:hover { color: var(--valori-yellow, #FAA916); } .security-badge { text-align: center; margin-top: 22px; color: var(--login-muted); font-size: 12px; } .security-badge i { margin-right: 5px; color: var(--valori-yellow, #FAA916); } @media (max-width: 768px) { .login-card { max-width: 90%; padding: 40px 30px; border-radius: 20px; } } @media (max-width: 480px) { .login-card { max-width: 95%; padding: 35px 25px; border-radius: 18px; } .logo img { max-width: 140px; } } .login-toast { position: fixed; top: 18px; right: 18px; z-index: 20; display: flex; align-items: flex-start; gap: 10px; max-width: min(22rem, calc(100vw - 36px)); padding: 12px 14px; border-radius: 12px; background: #fff8e6; border: 1px solid #e3b95a; color: #6b4a06; font-size: 0.88rem; line-height: 1.35; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); transition: opacity .3s ease, transform .3s ease; } .login-toast.is-gone { opacity: 0; transform: translateY(-8px); } .login-toast i { font-size: 1.05rem; line-height: 1.2; } .login-toast button { margin-left: auto; border: 0; background: transparent; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; } @media (max-width: 480px) { .login-toast { top: 12px; right: 12px; left: 12px; max-width: none; } }