/* ============================================================================= Meeddy — telas públicas (login, cadastro, recuperação de senha, avisos) Carregado DEPOIS do med-theme.css, que já resolve os componentes soltos (.form-control, .btn, .card) e define os tokens --med-*. O que falta — e é o que este arquivo faz — é o LAYOUT dessas telas: o tema base (Cuba) desenha um split com foto escura, cartão .login-dark e formulários lilás, que destoa do app depois da reformulação visual. Sempre no claro: template_public/template_pay definem BOO_DISABLE_DARK e o header_public não roda o script de tema, então o fica sem data-bs-theme e os tokens usados são os do bloco :root do med-theme. ========================================================================== */ /* --------------------------------------------------------------- estrutura */ /* A foto vem em atributo style="" na própria div (herança do tema), por isso o !important: sem ele a regra inline vence. */ .container-login { background: var(--med-bg) !important; min-height: 100vh; } .container-login > .row { margin: 0; min-height: 100vh; } /* ------------------------------------------- coluna de apresentação (esq.) */ /* Era foto + gradiente inline; agora é a mesma superfície quente da sidebar do app, separada do cartão por uma borda de 1px em vez de sombra. */ #bg-login { background: var(--med-sidebar) !important; border-right: 1px solid var(--med-border); padding: 48px 56px; min-height: 100vh; } /* emphasis.webp é uma imagem em branco herdada do tema base. Fica escondida por segurança: as views não a usam mais, mas uma cópia esquecida abriria um vão. */ #bg-login > img.bg-img-cover { display: none; } /* ------------------------------------------------------- cartão (direita) */ .login-card { background: transparent; padding: 40px 24px; } .login-card .logo { margin-bottom: 30px; } .login-card .logo img { max-height: 38px; width: auto; } /* A largura fica no wrapper, não no cartão: o .login-card é flex e o wrapper é um item de largura indefinida — com a largura só no .login-main, o max-width virava a largura do item e estourava a tela em < 480px. */ .login-card > div { width: 100%; max-width: 440px; } .login-card .login-main { width: 100%; max-width: 100%; padding: 40px; background: var(--med-surface); border: 1px solid var(--med-border); border-radius: var(--med-radius-lg); box-shadow: var(--med-shadow); } /* --------------------------------------------------------- tipografia ---- */ .login-main h1, .login-main h2, .login-main h4, .login-main .h1, .login-main .h2, .login-card .login-main .theme-form h4 { color: var(--med-text); font-weight: 600; letter-spacing: -.018em; margin-bottom: 6px; } .login-main h1, .login-main .h1 { font-size: 1.5rem; } .login-main h2, .login-main .h2, .login-card .login-main .theme-form h4 { font-size: 1.25rem; } /* O tema base usa .display-1/.display-5 nas telas de aviso ("Ops!"): em cartão de 440px aquilo estoura a largura. */ .login-main .display-1, .login-main .display-5 { font-size: 1.75rem; font-weight: 600; color: var(--med-text); } .login-main p, .login-card .login-main .theme-form p { color: var(--med-text-soft); font-size: .9375rem; line-height: 1.6; margin-bottom: 18px; } .login-main .lead { font-size: .9375rem; font-weight: 400; color: var(--med-text-soft); } .login-main .text-muted { color: var(--med-muted) !important; } .login-main small, .login-main .small { font-size: .8125rem; } /* ------------------------------------------------------------ formulários */ .login-card .login-main .theme-form label, .login-card .login-main .theme-form .col-form-label { color: var(--med-text-soft); font-size: .8125rem; font-weight: 500; letter-spacing: 0; margin-bottom: 6px; padding-bottom: 0; } /* O tema base pinta os inputs de lilás (#f3f3ff) e usa borda tracejada no hover, por seletor de elemento — daí repetir aqui o que o med-theme já faz no .form-control, alcançando também os inputs sem classe. */ .login-card .login-main .theme-form input:not([type="checkbox"]):not([type="radio"]), .login-card .login-main .theme-form textarea, .login-card .login-main .theme-form select { background-color: var(--med-surface) !important; border: 1px solid var(--med-border) !important; border-radius: var(--med-radius) !important; color: var(--med-text) !important; font-size: .9375rem; padding: 11px 14px; box-shadow: none !important; transition: border-color .15s ease, box-shadow .15s ease; } .login-card .login-main .theme-form input:hover, .login-card .login-main .theme-form textarea:hover { border: 1px solid var(--med-border-soft) !important; } .login-card .login-main .theme-form input:focus, .login-card .login-main .theme-form textarea:focus, .login-card .login-main .theme-form select:focus { border: 1px solid var(--med-accent) !important; box-shadow: 0 0 0 3px var(--med-accent-soft) !important; } .login-card .login-main .theme-form input::placeholder { color: var(--med-muted); } .login-card .login-main .theme-form .form-group { margin-bottom: 16px; } /* Olho de mostrar/ocultar a senha: o tema base o posiciona, aqui só a cor */ .login-main .show-hide span { color: var(--med-muted); } /* Mensagens de erro do validador. Sem mexer no display: o custom.css deixa o .error oculto e o JS o exibe — forçar block desenhava uma caixa vermelha vazia embaixo de cada campo. */ .login-main .error, .login-main .invalid-feedback { font-size: .8125rem; margin-top: 4px; border-radius: var(--med-radius); } .login-main .form-text { color: var(--med-muted); font-size: .8125rem; line-height: 1.55; } /* ------------------------------------------------------- botões e links */ .login-main .btn { border-radius: var(--med-radius) !important; font-weight: 600; font-size: .9375rem; padding: 12px 18px; box-shadow: none !important; } /* O .btn-lg do tema base é grande demais para o cartão */ .login-main .btn-lg { font-size: .9375rem; padding: 12px 18px; } /* Botão secundário ("Entrar com e-mail e senha" / "Criar conta com e-mail"): vinha com borda e fundo fixos no atributo style da view. */ .login-main .btn-outline-light { background: var(--med-surface) !important; border: 1px solid var(--med-border) !important; color: var(--med-text) !important; font-weight: 500; } .login-main .btn-outline-light:hover { background: var(--med-surface-2) !important; border-color: var(--med-border) !important; color: var(--med-text) !important; } .login-main a { color: var(--med-accent); text-decoration: none; } .login-main a:hover { color: var(--med-accent-hover); text-decoration: underline; } /* Os links das telas antigas embrulham o texto em ; o sublinhado passa a ser do :hover, como no resto do app. */ .login-main a u { text-decoration: none; } /* "Não tem conta?" / "Já tem conta?" — o tema base desenha uma linha de 65% de largura atrás do texto, que nasce torta fora do .theme-form. */ .login-main h6.or { font-size: .875rem; font-weight: 500; text-align: center; color: var(--med-muted) !important; margin-top: 26px !important; margin-bottom: 0; } .login-main h6.or:before { display: none; } .login-main h6.or + p { margin-top: 6px !important; text-align: center; } /* ------------------------------------------------------- divisor "ou" ---- */ /* Ficava em