/* ==================================================== NOTCH LOGIN VARIANTS — 3 variações Para usar: altere data-login-variant="N" no do login.html Valores: 1 | 2 | 3 ==================================================== */ /* ---- 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; } /* 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; background: #0f172a !important; padding: 52px !important; flex-direction: column; justify-content: space-between; align-items: flex-start; } body[data-login-variant="2"] .info-login .login-brand .login-brand-name { color: #ffffff; font-size: 18px; } body[data-login-variant="2"] .info-login .login-brand-icon svg rect { fill-opacity: 0.2; } body[data-login-variant="2"] .info-login .login-brand-icon svg path { stroke: #ffffff; } 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; } 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: 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="2"] .container-login [page-name="LoginForm"] .btn span { color: #ffffff !important; font-size: 14px !important; font-weight: 500 !important; } body[data-login-variant="2"] .container-login [page-name="LoginForm"] .btn:hover { background: #27272a !important; opacity: 1 !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: #71717a !important; text-decoration: underline !important; text-underline-offset: 4px !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; }