/* ==================================================== NOTCH LOGIN VARIANTS — 3 variações Para usar: altere data-login-variant="N" no do login.html Valores: 1 | 2 | 3 ==================================================== */ /* ---- BRAND TOKENS QUANTTA ---- */ :root { --quantta-navy: #0B2239; /* azul-marinho da marca */ --quantta-navy-deep: #081a2c; --quantta-teal: #1EAF93; /* verde/teal de destaque */ --quantta-teal-soft: rgba(30, 175, 147, 0.18); } /* ---- OVERRIDE DOS TOKENS MAD NO LOGIN ---- O form de login é renderizado com componentes (mad-card, mad-btn, mad-input-field), que leem as cores de --mad-primary / --mad-ring. Como este CSS só carrega na tela de login, reescrevemos os tokens aqui para vestir o form com a identidade Quantta (sem afetar o resto da aplicação). */ body[data-login-variant] { --mad-primary: var(--quantta-navy); --mad-primary-hover: #123a4a; --mad-primary-fg: #ffffff; --mad-ring: var(--quantta-teal-soft); --mad-accent: var(--quantta-teal); } /* Botão principal (ENTRAR) com o degradê navy→teal da marca */ body[data-login-variant] .mad-btn-primary { background: linear-gradient(135deg, var(--quantta-navy) 0%, #123a4a 100%) !important; border-color: var(--quantta-navy) !important; box-shadow: 0 1px 2px rgba(11,34,57,0.25) !important; transition: filter .15s ease, box-shadow .15s ease, transform .05s ease !important; } body[data-login-variant] .mad-btn-primary:hover { background: linear-gradient(135deg, #0e2c47 0%, var(--quantta-teal) 170%) !important; box-shadow: 0 4px 14px rgba(30,175,147,0.30) !important; } body[data-login-variant] .mad-btn-primary:active { transform: translateY(1px) !important; } /* Foco dos campos com o teal da marca (borda teal + glow) */ body[data-login-variant] .mad-input:focus, body[data-login-variant] .mad-select:focus, body[data-login-variant] .mad-textarea:focus { border-color: var(--quantta-teal) !important; box-shadow: 0 0 0 3px var(--quantta-teal-soft) !important; } /* Links secundários (criar conta / redefinir senha) — ghost buttons em teal */ body[data-login-variant] .mad-btn-ghost:hover { color: var(--quantta-teal) !important; } /* ---- RESET BASE SHARED ---- */ /* Remove estilos do panel-login que variam por variante */ body[data-login-variant] .container-login { font-family: 'Geist', 'Noto Sans', sans-serif; } /* Logo da marca (substitui o ícone+nome antigos) */ .login-brand-logo { height: 38px; width: auto; display: block; max-width: 220px; object-fit: contain; } /* Por padrão, esconde o logo dentro do login-content */ body[data-login-variant] .login-top-brand { display: none; } /* Reset do card da Adianti no login */ body[data-login-variant] .container-login .card.panel { margin-bottom: 0 !important; } /* Login nunca processa Notch header (excluído no JS). Esconde só o ícone do panel-title que Adianti adiciona */ body[data-login-variant] .container-login .card-header .panel-title i, body[data-login-variant] .container-login .card-header .card-title i { display: none !important; } /* Estilo shared da marca */ .login-brand { display: flex; align-items: center; gap: 10px; } .login-brand-name { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; } .login-brand-icon { display: flex; align-items: center; justify-content: center; } /* Quote */ .login-brand-quote { flex: 1; display: flex; align-items: flex-end; } .login-brand-quote blockquote { border: none; padding: 0; margin: 0; } .login-brand-quote blockquote p { font-size: 15px; line-height: 1.7; margin-bottom: 12px; font-style: italic; } .login-brand-quote blockquote cite { font-size: 13px; opacity: 0.7; font-style: normal; font-weight: 500; } /* ==================================================== VARIANT 1 — Centered white card (shadcn login-01) Card centralizado, fundo branco limpo ==================================================== */ body[data-login-variant="1"] .container-login { background: #ffffff !important; align-items: center !important; justify-content: center !important; } /* panel-login: wrapper transparente sem altura fixa */ body[data-login-variant="1"] .container-login .panel-login { flex-direction: column !important; width: 100% !important; max-width: 520px !important; height: auto !important; max-height: none !important; min-height: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; margin: auto !important; padding: 32px 24px !important; } /* Esconde painel lateral e logo interno */ body[data-login-variant="1"] .container-login .info-login { display: none !important; } body[data-login-variant="1"] .login-top-brand { display: none !important; } /* login-content: coluna stretch, sem padding (override application.css) */ body[data-login-variant="1"] .container-login .panel-login .login-content { background: transparent !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; flex: none !important; overflow: visible !important; } /* h1 "Bem-Vindo" — text-2xl font-bold como shadcn */ body[data-login-variant="1"] .container-login .login-content h1 { display: block !important; font-size: 24px !important; font-weight: 700 !important; color: #09090b !important; text-align: center !important; margin: 0 0 16px 0 !important; padding: 0 !important; line-height: 1.2 !important; letter-spacing: -0.3px !important; } /* ---- Card — rounded border shadow ---- */ body[data-login-variant="1"] .container-login .card.panel { border: 1px solid #e2e8f0 !important; border-radius: 16px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04) !important; background: #ffffff !important; overflow: hidden !important; width: 100% !important; margin-bottom: 0 !important; } /* ---- Card header — sem separador, padding generoso ---- */ body[data-login-variant="1"] .container-login .card-header, body[data-login-variant="1"] .container-login .panel-heading { background: transparent !important; border-bottom: none !important; padding: 32px 32px 8px 32px !important; border-radius: 0 !important; } body[data-login-variant="1"] .container-login .card-header .panel-title, body[data-login-variant="1"] .container-login .card-header .card-title, body[data-login-variant="1"] .container-login .panel-heading .panel-title, body[data-login-variant="1"] .container-login .panel-heading .card-title { font-size: 22px !important; font-weight: 700 !important; line-height: 1.2 !important; color: #09090b !important; margin: 0 !important; padding: 0 !important; border: none !important; text-align: left !important; } /* ---- Card body ---- */ body[data-login-variant="1"] .container-login .card-body, body[data-login-variant="1"] .container-login .panel-body { padding: 20px 32px 0 32px !important; } /* Espaçamento entre campos */ body[data-login-variant="1"] .container-login .form-group.tformrow { margin-bottom: 20px !important; } /* Labels */ body[data-login-variant="1"] .container-login label { font-size: 15px !important; font-weight: 600 !important; color: #09090b !important; margin-bottom: 8px !important; display: block !important; } /* Inputs */ body[data-login-variant="1"] .container-login .tfield { border: 1px solid #e4e4e7 !important; border-radius: 10px !important; font-size: 15px !important; height: 44px !important; background: #ffffff !important; color: #09090b !important; padding-left: 14px !important; } body[data-login-variant="1"] .container-login .tfield:focus { border-color: #a1a1aa !important; box-shadow: 0 0 0 3px rgba(9,9,11,0.05) !important; outline: none !important; } body[data-login-variant="1"] .container-login .tfield::placeholder { color: #a1a1aa !important; } /* ---- Card footer / botões ---- */ body[data-login-variant="1"] .container-login .card-footer, body[data-login-variant="1"] .container-login .panel-footer { background: transparent !important; border-top: none !important; padding: 12px 32px 32px 32px !important; } /* Todos os botões no login form — full-width, h-9 (36px) como shadcn */ body[data-login-variant="1"] .container-login [page-name="LoginForm"] .btn { width: 100% !important; height: 36px !important; border-radius: 6px !important; font-size: 14px !important; font-weight: 500 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 8px !important; background: #09090b !important; color: #ffffff !important; border: none !important; padding: 0 16px !important; line-height: 1 !important; } body[data-login-variant="1"] .container-login [page-name="LoginForm"] .btn span { color: #ffffff !important; font-size: 14px !important; font-weight: 500 !important; } body[data-login-variant="1"] .container-login [page-name="LoginForm"] .btn:hover { background: #27272a !important; opacity: 1 !important; } /* ---- Links abaixo do card ---- */ body[data-login-variant="1"] .login-sub-actions { text-align: center !important; padding: 16px 0 0 !important; font-size: 14px !important; color: #71717a !important; } body[data-login-variant="1"] .login-sub-actions a { color: #71717a !important; text-decoration: underline !important; text-underline-offset: 4px !important; margin: 0 8px !important; } body[data-login-variant="1"] .login-sub-actions a i { display: none !important; } /* ==================================================== VARIANT 2 — Split screen (shadcn login-02) Marca escura à esquerda, formulário branco à direita ==================================================== */ body[data-login-variant="2"] .container-login { background: #ffffff; align-items: stretch; } body[data-login-variant="2"] .panel-login { flex-direction: row !important; width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; margin: 0; } body[data-login-variant="2"] .info-login { display: flex !important; max-width: 50% !important; width: 50%; flex: 1; /* Gradiente navy→teal da marca Quantta + brilho ambiente */ background: radial-gradient(120% 80% at 85% 15%, var(--quantta-teal-soft) 0%, rgba(30,175,147,0) 55%), linear-gradient(160deg, var(--quantta-navy) 0%, var(--quantta-navy-deep) 70%, #0a2f3a 100%) !important; padding: 52px !important; flex-direction: column; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; } /* Filete teal no topo do painel de marca */ body[data-login-variant="2"] .info-login::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--quantta-teal) 0%, rgba(30,175,147,0) 80%); } body[data-login-variant="2"] .info-login .login-brand-logo { height: 42px; } body[data-login-variant="2"] .login-brand-quote blockquote p { color: rgba(255, 255, 255, 0.85); font-size: 16px; } body[data-login-variant="2"] .login-brand-quote blockquote cite { color: rgba(255, 255, 255, 0.55); } body[data-login-variant="2"] .info-login .login-image { display: none !important; } body[data-login-variant="2"] .login-content { background: #ffffff !important; flex: 1; display: flex !important; align-items: center; justify-content: center; padding: 52px !important; } /* ---- Card (mesmo estilo da variante 1) ---- */ body[data-login-variant="2"] .container-login .card.panel { border: 1px solid #e2e8f0 !important; border-radius: 16px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04) !important; background: #ffffff !important; overflow: hidden !important; width: 100% !important; margin-bottom: 0 !important; } body[data-login-variant="2"] .container-login .card-header, body[data-login-variant="2"] .container-login .panel-heading { background: transparent !important; border-bottom: none !important; padding: 32px 32px 8px 32px !important; } body[data-login-variant="2"] .container-login .card-header .panel-title, body[data-login-variant="2"] .container-login .card-header .card-title, body[data-login-variant="2"] .container-login .panel-heading .panel-title, body[data-login-variant="2"] .container-login .panel-heading .card-title { font-size: 22px !important; font-weight: 700 !important; color: #09090b !important; margin: 0 !important; padding: 0 !important; border: none !important; text-align: left !important; } body[data-login-variant="2"] .container-login .card-body, body[data-login-variant="2"] .container-login .panel-body { padding: 20px 32px 0 32px !important; } body[data-login-variant="2"] .container-login .form-group.tformrow { margin-bottom: 20px !important; } body[data-login-variant="2"] .container-login label { font-size: 15px !important; font-weight: 600 !important; color: #09090b !important; margin-bottom: 8px !important; } body[data-login-variant="2"] .container-login .tfield { border: 1px solid #e4e4e7 !important; border-radius: 10px !important; font-size: 15px !important; height: 44px !important; background: #ffffff !important; color: #09090b !important; padding-left: 14px !important; transition: border-color .15s ease, box-shadow .15s ease !important; } /* Foco com o teal da marca Quantta */ body[data-login-variant="2"] .container-login .tfield:focus, body[data-login-variant="2"] .container-login .tfield:focus-within { border-color: var(--quantta-teal) !important; box-shadow: 0 0 0 3px var(--quantta-teal-soft) !important; outline: none !important; } body[data-login-variant="2"] .container-login .card-footer, body[data-login-variant="2"] .container-login .panel-footer { background: transparent !important; border-top: none !important; padding: 12px 32px 32px 32px !important; } body[data-login-variant="2"] .container-login [page-name="LoginForm"] .btn { width: 100% !important; height: 44px !important; border-radius: 10px !important; font-size: 15px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 8px !important; /* Botão principal com a marca Quantta (navy → teal) */ background: linear-gradient(135deg, var(--quantta-navy) 0%, #123a4a 100%) !important; color: #ffffff !important; border: none !important; padding: 0 16px !important; line-height: 1 !important; opacity: 1 !important; box-shadow: 0 1px 2px rgba(11,34,57,0.25) !important; transition: filter .15s ease, box-shadow .15s ease, transform .05s ease !important; } body[data-login-variant="2"] .container-login [page-name="LoginForm"] .btn span { color: #ffffff !important; font-size: 15px !important; font-weight: 600 !important; } body[data-login-variant="2"] .container-login [page-name="LoginForm"] .btn:hover { background: linear-gradient(135deg, #0e2c47 0%, var(--quantta-teal) 160%) !important; box-shadow: 0 4px 14px rgba(30,175,147,0.30) !important; opacity: 1 !important; } body[data-login-variant="2"] .container-login [page-name="LoginForm"] .btn:active { transform: translateY(1px) !important; } body[data-login-variant="2"] .container-login .login-content h1 { display: block !important; font-size: 24px !important; font-weight: 700 !important; color: #09090b !important; text-align: center !important; margin: 0 0 16px 0 !important; padding: 0 !important; line-height: 1.2 !important; letter-spacing: -0.3px !important; } body[data-login-variant="2"] .login-sub-actions { display: flex !important; flex-direction: column !important; align-items: center !important; align-self: center !important; gap: 6px !important; margin-top: 16px !important; width: 100% !important; max-width: 400px !important; text-align: center !important; font-size: 13px !important; color: #71717a !important; } body[data-login-variant="2"] .login-sub-actions a { color: var(--quantta-navy) !important; font-weight: 500 !important; text-decoration: underline !important; text-underline-offset: 4px !important; transition: color .15s ease !important; } body[data-login-variant="2"] .login-sub-actions a:hover { color: var(--quantta-teal) !important; } body[data-login-variant="2"] .login-sub-actions a i { display: none !important; } /* ==================================================== VARIANT 3 — Two-column card (shadcn login-03) Fundo muted, card com form à esquerda + imagem à direita ==================================================== */ body[data-login-variant="3"] .container-login { background: #f1f5f9 !important; align-items: center !important; justify-content: center !important; } /* panel-login = o card externo de duas colunas */ body[data-login-variant="3"] .container-login .panel-login { flex-direction: row !important; width: 90% !important; max-width: 920px !important; height: auto !important; max-height: none !important; min-height: 520px !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04) !important; overflow: hidden !important; margin: auto !important; padding: 0 !important; } /* info-login = coluna da imagem (direita) */ body[data-login-variant="3"] .container-login .info-login { display: block !important; order: 2 !important; flex: 1 !important; max-width: 50% !important; padding: 0 !important; /* Imagem de fundo — troque a URL conforme desejado */ background-image: url('https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=800&q=80') !important; background-size: cover !important; background-position: center !important; position: relative !important; min-height: 520px !important; } /* Overlay escuro sutil sobre a imagem */ body[data-login-variant="3"] .container-login .info-login::after { content: '' !important; position: absolute !important; inset: 0 !important; background: linear-gradient(160deg, rgba(15,23,42,0.35) 0%, rgba(15,23,42,0.55) 100%) !important; } /* Oculta conteúdo de texto do info-login */ body[data-login-variant="3"] .container-login .info-login .login-brand, body[data-login-variant="3"] .container-login .info-login .login-brand-quote, body[data-login-variant="3"] .container-login .info-login .login-image { display: none !important; } /* Oculta logo interno */ body[data-login-variant="3"] .login-top-brand { display: none !important; } /* login-content = coluna do form (esquerda) */ body[data-login-variant="3"] .container-login .panel-login .login-content { order: 1 !important; flex: none !important; width: 50% !important; background: transparent !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; overflow: auto !important; } /* h1 "Bem-Vindo" */ body[data-login-variant="3"] .container-login .login-content h1 { display: block !important; font-size: 24px !important; font-weight: 700 !important; color: #09090b !important; text-align: center !important; margin: 0 0 12px 0 !important; padding: 0 !important; line-height: 1.2 !important; letter-spacing: -0.3px !important; } /* Remove card interno (panel-login já é o card) */ body[data-login-variant="3"] .container-login .card.panel { border: none !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important; width: 100% !important; margin-bottom: 0 !important; } /* Card header */ body[data-login-variant="3"] .container-login .card-header, body[data-login-variant="3"] .container-login .panel-heading { background: transparent !important; border-bottom: none !important; padding: 40px 40px 8px 40px !important; border-radius: 0 !important; } body[data-login-variant="3"] .container-login .card-header .panel-title, body[data-login-variant="3"] .container-login .card-header .card-title, body[data-login-variant="3"] .container-login .panel-heading .panel-title, body[data-login-variant="3"] .container-login .panel-heading .card-title { font-size: 22px !important; font-weight: 700 !important; color: #09090b !important; margin: 0 !important; padding: 0 !important; border: none !important; text-align: left !important; } /* Card body */ body[data-login-variant="3"] .container-login .card-body, body[data-login-variant="3"] .container-login .panel-body { padding: 20px 40px 0 40px !important; } body[data-login-variant="3"] .container-login .form-group.tformrow { margin-bottom: 20px !important; } body[data-login-variant="3"] .container-login label { font-size: 14px !important; font-weight: 500 !important; color: #09090b !important; margin-bottom: 6px !important; display: block !important; } body[data-login-variant="3"] .container-login .tfield { border: 1px solid #e4e4e7 !important; border-radius: 8px !important; font-size: 14px !important; height: 36px !important; background: #ffffff !important; color: #09090b !important; } /* Card footer */ body[data-login-variant="3"] .container-login .card-footer, body[data-login-variant="3"] .container-login .panel-footer { background: transparent !important; border-top: none !important; padding: 12px 40px 40px 40px !important; } /* Botão */ body[data-login-variant="3"] .container-login [page-name="LoginForm"] .btn { width: 100% !important; height: 36px !important; border-radius: 6px !important; font-size: 14px !important; font-weight: 500 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 8px !important; background: #09090b !important; color: #ffffff !important; border: none !important; padding: 0 16px !important; line-height: 1 !important; opacity: 1 !important; } body[data-login-variant="3"] .container-login [page-name="LoginForm"] .btn span { color: #ffffff !important; font-size: 14px !important; font-weight: 500 !important; } body[data-login-variant="3"] .container-login [page-name="LoginForm"] .btn:hover { background: #27272a !important; opacity: 1 !important; } /* Sub-actions */ body[data-login-variant="3"] .login-sub-actions { text-align: center !important; padding: 0 40px 24px !important; font-size: 13px !important; color: #71717a !important; } body[data-login-variant="3"] .login-sub-actions a { color: #71717a !important; text-decoration: underline !important; text-underline-offset: 4px !important; } body[data-login-variant="3"] .login-sub-actions a i { display: none !important; }