/* Estilos das telas de login, cadastro de usuário e recuperação de senha. Namespace próprio (.login-*), não incluído pelo pages/header.php padrão — essas telas montam seu próprio com theme.css + login.css. */ /* ── Fontes ── */ @font-face { font-family: 'Barlow'; font-weight: 300; src: url('../fonts/Barlow-Light.ttf'); } @font-face { font-family: 'Barlow'; font-weight: 400; src: url('../fonts/Barlow-Regular.ttf'); } @font-face { font-family: 'Barlow'; font-weight: 500; src: url('../fonts/Barlow-Medium.ttf'); } @font-face { font-family: 'BarlowCondensed'; font-weight: 700; src: url('../fonts/BarlowCondensed-Bold.ttf'); } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: 'Barlow', sans-serif; font-weight: 400; background-color: var(--login-bg); overflow-x: hidden; overflow-y: auto; } /* ── Animação ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .login-left__logo { animation: fadeUp .6s ease .0s both; } .login-left__eyebrow { animation: fadeUp .6s ease .1s both; } .login-left__heading { animation: fadeUp .6s ease .2s both; } .login-left__desc { animation: fadeUp .6s ease .3s both; } .login-left__stats { animation: fadeUp .6s ease .4s both; } .login-left__features { animation: fadeUp .6s ease .5s both; } .login-left__partners { animation: fadeUp .6s ease .6s both; } .login-card { animation: fadeUp .7s ease .3s both; } /* ── Fundo decorativo ── */ .login-bg-layer { position: fixed; inset: 0; z-index: 0; background: radial-gradient(ellipse 80% 60% at 15% 50%, rgba(var(--login-brand-rgb), .07) 0%, transparent 70%), radial-gradient(ellipse 60% 80% at 85% 20%, rgba(var(--login-brand-rgb), .05) 0%, transparent 65%); } .login-bg-grid { position: fixed; inset: 0; z-index: 0; background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px); background-size: 48px 48px; } /* ── Layout ── */ .painel-login { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 440px; min-height: 100vh; align-items: stretch; } /* ── Painel esquerdo ── */ .login-left { padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; border-right: 1px solid rgba(255, 255, 255, .08); } .login-left__logo-img { height: 44px; width: auto; object-fit: contain; } .login-left__hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px 0; } /* Eyebrow — texto simples, sem badge */ .login-left__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--login-brand); margin-bottom: 4px; } .login-left__heading { font-family: 'BarlowCondensed', sans-serif; font-weight: 700; font-size: clamp(40px, 4.5vw, 62px); line-height: 1.05; letter-spacing: -1px; color: #fff; margin-top: 12px; margin-bottom: 24px; } .login-left__heading em { font-style: normal; color: var(--login-brand); } .login-left__desc { font-weight: 300; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .55); max-width: 480px; margin-bottom: 44px; } /* Stats */ .login-left__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; overflow: hidden; margin-bottom: 44px; } .login-stat { background: rgba(255, 255, 255, .03); padding: 20px 22px; transition: background .2s; } .login-stat:hover { background: rgba(255, 255, 255, .06); } .login-stat__value { font-family: 'BarlowCondensed', sans-serif; font-weight: 700; font-size: 30px; color: #fff; line-height: 1; margin-bottom: 4px; } .login-stat__value span { color: var(--login-brand); } .login-stat__label { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, .45); text-transform: uppercase; letter-spacing: 1px; } /* Features */ .login-left__features { display: flex; flex-direction: column; gap: 14px; } .login-feature { display: flex; align-items: flex-start; gap: 14px; } .login-feature__icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; background: rgba(var(--login-brand-rgb), .1); border: 1px solid rgba(var(--login-brand-rgb), .2); display: flex; align-items: center; justify-content: center; } .login-feature__icon svg { width: 16px; height: 16px; stroke: var(--login-brand); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .login-feature__title { display: block; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .9); margin-bottom: 2px; } .login-feature__sub { font-size: 12px; color: rgba(255, 255, 255, .38); line-height: 1.5; margin: 0; } /* Partners */ .login-left__partners {} .login-partners__label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, .35); margin-bottom: 14px; } .login-partners__chips { display: flex; gap: 12px; flex-wrap: wrap; } .login-partner-chip { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px; padding: 5px 14px; letter-spacing: .5px; transition: color .2s, background .2s, border-color .2s; } .login-partner-chip:hover { color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .15); } /* ── Painel direito ── */ .login-right { background: #f0f3f8; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 40px; position: relative; overflow: hidden; min-height: min-content; } .login-right::before { content: ''; position: absolute; top: -60px; right: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(var(--login-brand-rgb), .06); } .login-right::after { content: ''; position: absolute; bottom: -80px; left: -60px; width: 300px; height: 300px; border-radius: 50%; background: rgba(26, 120, 200, .05); } /* ── Card ── */ .login-card { position: relative; z-index: 1; background: var(--form-card-bg); border-radius: 20px; padding: 44px 40px; width: 100%; max-width: 360px; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); } /* Logo no topo do card */ .login-card__logo { font-family: 'BarlowCondensed', sans-serif; font-weight: 700; font-size: 28px; color: var(--form-text); letter-spacing: -.5px; text-align: center; margin-bottom: 32px; } .login-card__logo span { color: var(--login-brand); } .login-card__title { font-family: 'BarlowCondensed', sans-serif; font-weight: 700; font-size: 22px; color: var(--form-text); letter-spacing: -.3px; margin-bottom: 4px; } .login-card__sub { font-size: 13px; color: var(--form-muted); line-height: 1.4; margin-bottom: 30px; } /* Campos */ .login-field { margin-bottom: 18px; } .login-field-label { display: block; font-size: 12px; font-weight: 500; color: var(--form-label-color); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 7px; } .login-field-hint { font-size: 11px; color: var(--form-muted); margin-top: 5px; } .form-control-light { width: 100%; height: 46px; background: var(--form-input-bg); border: 1.5px solid var(--form-border); border-radius: 10px; padding: 0 16px; font-family: 'Barlow', sans-serif; font-size: 14px; color: var(--form-text); transition: border-color .2s, box-shadow .2s; outline: none; } .form-control-light::placeholder { color: #b0bac9; } .form-control-light:focus { border-color: var(--login-brand); box-shadow: 0 0 0 3px rgba(var(--login-brand-rgb), .12); background: var(--form-card-bg); } .login-forgot { display: block; text-align: right; font-size: 12px; color: var(--login-brand); text-decoration: none; margin-top: -10px; margin-bottom: 24px; transition: color .2s; } .login-forgot:hover { color: var(--login-brand-light); } /* Botão */ .btn-login { width: 100%; height: 50px; background: var(--login-bg); color: #fff; border: none; border-radius: 10px; font-family: 'BarlowCondensed', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: background .2s, transform .1s; position: relative; overflow: hidden; } .btn-login::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--login-brand-rgb), .15) 0%, transparent 60%); opacity: 0; transition: opacity .3s; } .btn-login:hover { background: #253045; } .btn-login:hover::after { opacity: 1; } .btn-login:active { transform: scale(.985); } /* Divisor */ .login-divider { display: flex; align-items: center; gap: 12px; margin: 11px 0 22px 0; } .login-divider hr { flex: 1; border: none; border-top: 1px solid var(--form-border); } .login-divider span { font-size: 11px; color: var(--form-label-color); white-space: nowrap; text-align: center; width: 100%; } .login-divider--senha { margin: 10px 0 22px; justify-content: center; } .login-divider--senha .login-divider__link { font-size: 12.5px; color: var(--form-label-color); font-weight: 500; cursor: pointer; } .login-divider--senha .login-divider__link:hover { color: var(--login-brand); text-decoration: underline; } /* CTA */ .login-cta-strip { background: linear-gradient(135deg, #f0faf7 0%, #eaf4fd 100%); border: 1px solid rgba(var(--login-brand-rgb), .2); border-radius: 10px; padding: 14px 16px; text-align: center; } .login-cta-strip p { font-size: 12px; color: var(--form-label-color); line-height: 1.5; margin: 0; } .login-cta-strip a { color: var(--login-brand); font-weight: 500; text-decoration: none; } .login-cta-strip a:hover { text-decoration: underline; } /* Rodapé do card */ .login-card__footer { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 22px; font-size: 11px; color: #b0bac9; } .login-card__footer svg { flex-shrink: 0; display: block; } /* Alertas — layout base compartilhado */ .login-alert--error, .login-alert--success { margin-bottom: 18px; } .login-alert__shell { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; } .login-alert__icon { flex-shrink: 0; margin-top: 1px; } .login-alert__text { font-size: 13px; color: var(--form-text); margin: 0; } /* variante erro */ .login-alert--error .login-alert__shell { background: rgba(239, 68, 68, .07); border: 1px solid rgba(239, 68, 68, .2); } /* variante sucesso */ .login-alert--success .login-alert__shell { background: rgba(var(--login-brand-rgb), .08); border: 1px solid rgba(var(--login-brand-rgb), .25); } .login-alert--success .login-alert__icon { color: var(--login-brand); } /* ── Responsivo ── */ @media (max-width: 1280px) { .painel-login { grid-template-columns: 1fr 420px; } } @media (max-width: 1024px) { .painel-login { grid-template-columns: 1fr 400px; } .login-left { padding: 36px 40px; } .login-left__heading { font-size: clamp(34px, 3.8vw, 52px); } } @media (max-width: 820px) { .painel-login { grid-template-columns: 1fr 360px; } .login-left { padding: 32px 32px; } .login-right { padding: 32px 20px; } .login-card { padding: 36px 28px; } .login-left__features, .login-left__stats, .login-left__partners { display: none; } } @media (max-width: 640px) { .painel-login { display: block; } .login-left { display: none; } .login-right { min-height: 100vh; padding: 48px 20px; justify-content: center; } .login-card { max-width: 420px; padding: 36px 28px; } } @media (max-width: 380px) { .login-right { padding: 32px 14px; } .login-card { padding: 28px 18px; } } /* ── Modal recuperação de senha ── */ .modal-senha .modal-senha__content { background: var(--form-card-bg) !important; border: 1px solid var(--form-border) !important; border-radius: 20px !important; overflow: hidden; box-shadow: 0 32px 80px rgba(0, 0, 0, .25); position: relative; } /* posiciona o btn-close nativo do Bootstrap */ .modal-senha .btn-close { position: absolute; top: 16px; right: 16px; } .modal-senha__body { padding: 40px 36px 36px; } .modal-senha__btn-cancel { width: 100%; height: 44px; background: transparent; border: 1.5px solid var(--form-border); color: var(--form-muted); font-family: 'Barlow', sans-serif; font-size: 14px; border-radius: 10px; cursor: pointer; transition: border-color .2s, color .2s; } .modal-senha__btn-cancel:hover { border-color: var(--login-brand); color: var(--login-brand); }