/* Loomah Login — botão Entrar/Sair + popup de acesso (front-end). Tudo guiado por variáveis (--lmlg-*) injetadas pelas configurações do plugin, com fallback para os tokens --lm-* do core e, por fim, a paleta Loomah. IMPORTANTE: o modal é movido para filho direto do pelo JS. Por isso convive com o CSS do tema/builder (Hello, Elementor, etc.), que costuma estilizar seletores genéricos `button` e `input`. As regras de RESET abaixo blindam o markup do plugin desse vazamento (bordas, sombras e tamanhos que apareciam "estourados"). */ /* ============================================================ RESET DEFENSIVO — neutraliza o que o tema injeta em button/input ============================================================ */ .lmlg-login-root, .lmlg-login-root *, .lmlg-modal, .lmlg-modal * { box-sizing: border-box; } .lmlg-login-root button, .lmlg-modal button { -webkit-appearance: none; appearance: none; margin: 0; min-height: 0; width: auto; line-height: normal; text-transform: none; letter-spacing: normal; box-shadow: none; text-shadow: none; } .lmlg-modal input[type="text"], .lmlg-modal input[type="password"], .lmlg-modal input[type="email"] { -webkit-appearance: none; appearance: none; margin: 0; min-height: 0; height: auto; box-shadow: none; text-transform: none; letter-spacing: normal; } .lmlg-modal input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; margin: 0; width: auto; height: auto; } /* ============================================================ BOTÃO DA PÁGINA (Entrar / Sair) — pílula configurável ============================================================ */ .lmlg-login-root { display: inline-block; } .lmlg-botao-wrap { display: inline-flex; align-items: center; gap: 10px; } .lmlg-botao-ola { font-size: 14px; font-weight: 500; color: var(--lm-texto, #1d2327); opacity: .85; } .lmlg-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: var(--lmlg-btn-pad, 10px 18px); border: 1px solid transparent; border-radius: var(--lmlg-btn-radius, var(--lm-radius, 8px)); background: var(--lmlg-btn-bg, var(--lm-primaria, #2271b1)); color: var(--lmlg-btn-fg, #fff); font: inherit; font-size: var(--lmlg-btn-fs, 14px); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: filter .15s ease, transform .05s ease, background .15s ease, color .15s ease; } .lmlg-botao:hover { filter: brightness(.94); color: var(--lmlg-btn-fg, #fff); } .lmlg-botao:active { transform: translateY(1px); } .lmlg-botao:focus-visible { outline: 3px solid color-mix(in srgb, var(--lmlg-btn-bg, #2271b1) 45%, transparent); outline-offset: 2px; } /* Variante contorno: fundo transparente, borda e texto na cor do botão. */ .lmlg-botao.lmlg-botao--contorno { background: transparent; color: var(--lmlg-btn-bg, var(--lm-primaria, #2271b1)); border-color: var(--lmlg-btn-bg, var(--lm-primaria, #2271b1)); } .lmlg-botao.lmlg-botao--contorno:hover { background: color-mix(in srgb, var(--lmlg-btn-bg, #2271b1) 10%, transparent); color: var(--lmlg-btn-bg, var(--lm-primaria, #2271b1)); filter: none; } /* Sair tem cores próprias (--lmlg-sair-*), seguindo tamanho/raio/estilo do botão. Como é um , blindamos contra o estilo de link do tema. */ .lmlg-login-root a.lmlg-botao, .lmlg-login-root a.lmlg-botao:hover, .lmlg-login-root a.lmlg-botao:focus, .lmlg-login-root a.lmlg-botao:visited { text-decoration: none; box-shadow: none; } .lmlg-botao-sair { background: var(--lmlg-sair-bg, var(--lmlg-btn-bg, #2271b1)); color: var(--lmlg-sair-fg, #fff); } .lmlg-botao-sair:hover, .lmlg-botao-sair:visited { color: var(--lmlg-sair-fg, #fff); } .lmlg-botao-sair:focus-visible { outline: 3px solid color-mix(in srgb, var(--lmlg-sair-bg, #2271b1) 45%, transparent); } /* Sair no estilo contorno: cor própria vira borda + texto. */ .lmlg-botao-sair.lmlg-botao--contorno, .lmlg-botao-sair.lmlg-botao--contorno:visited { background: transparent; color: var(--lmlg-sair-bg, var(--lm-primaria, #2271b1)); border-color: var(--lmlg-sair-bg, var(--lm-primaria, #2271b1)); } .lmlg-botao-sair.lmlg-botao--contorno:hover { background: color-mix(in srgb, var(--lmlg-sair-bg, #2271b1) 10%, transparent); color: var(--lmlg-sair-bg, var(--lm-primaria, #2271b1)); filter: none; } /* Botão cancelar (popup de confirmação) — cores e estilo próprios. */ .lmlg-botao-cancelar { background: var(--lmlg-cancelar-bg, #1d2327); color: var(--lmlg-cancelar-fg, #fff); } .lmlg-botao-cancelar:hover { color: var(--lmlg-cancelar-fg, #fff); } .lmlg-botao-cancelar:focus-visible { outline: 3px solid color-mix(in srgb, var(--lmlg-cancelar-bg, #1d2327) 45%, transparent); } /* Cancelar no estilo contorno. */ .lmlg-botao-cancelar.lmlg-botao--contorno, .lmlg-botao-cancelar.lmlg-botao--contorno:hover { background: transparent; color: var(--lmlg-cancelar-bg, #1d2327); border-color: var(--lmlg-cancelar-bg, #1d2327); } .lmlg-botao-cancelar.lmlg-botao--contorno:hover { background: color-mix(in srgb, var(--lmlg-cancelar-bg, #1d2327) 10%, transparent); filter: none; } .lmlg-botao .lmlg-icon { display: inline-flex; } /* Alinhamento ícone × texto: zera o line-height herdado do tema e centraliza cada filho, para o ícone não "flutuar" acima das letras. */ .lmlg-botao { line-height: 1; } .lmlg-botao > * { display: inline-flex; align-items: center; line-height: 1; } .lmlg-botao .lmlg-icon svg { width: var(--lmlg-btn-ic, 18px); height: var(--lmlg-btn-ic, 18px); fill: currentColor; display: block; } /* ============================================================ MODAL — overlay glass + card configurável ============================================================ */ .lmlg-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; } .lmlg-modal[hidden] { display: none; } /* Overlay escuro com desfoque (glass). Cor, opacidade e blur vêm da config. */ .lmlg-modal-backdrop { position: absolute; inset: 0; background: var(--lmlg-ov-bg, rgba(15, 23, 42, .55)); -webkit-backdrop-filter: blur(var(--lmlg-ov-blur, 8px)); backdrop-filter: blur(var(--lmlg-ov-blur, 8px)); animation: lmlg-fade .15s ease; } .lmlg-modal-card { position: relative; width: 100%; max-width: var(--lmlg-pop-w, 400px); background: var(--lmlg-pop-bg, var(--lm-fundo, #fff)); color: var(--lmlg-pop-fg, var(--lm-texto, #1d2327)); border-radius: var(--lmlg-pop-radius, calc(var(--lm-radius, 8px) + 6px)); box-shadow: 0 24px 60px rgba(0,0,0,.28); padding: 28px 26px 26px; animation: lmlg-pop .18s cubic-bezier(.16,.84,.44,1); font-family: var(--lm-fonte, 'Poppins', sans-serif); } /* Fechar (X) — só ícone, sem caixa: hover muda apenas a cor. */ .lmlg-modal .lmlg-modal-x { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--lmlg-x-cor, #9aa0a6); opacity: 1; cursor: pointer; transition: color .15s ease, transform .1s ease; } .lmlg-modal .lmlg-modal-x:hover { color: var(--lmlg-x-cor-hover, #1d2327); background: transparent; } .lmlg-modal .lmlg-modal-x:active { transform: scale(.9); } .lmlg-modal .lmlg-modal-x svg { width: 22px; height: 22px; fill: currentColor; display: block; } .lmlg-modal-titulo { margin: 0 0 18px; padding-right: 28px; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--lmlg-pop-fg, var(--lm-texto, #1d2327)); } /* ---------- Popup de confirmação (Sair) ---------- */ .lmlg-modal-card-confirm { max-width: min(var(--lmlg-pop-w, 400px), 420px); } .lmlg-modal-card:focus { outline: none; } .lmlg-modal-msg { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: var(--lmlg-pop-fg, var(--lm-texto, #1d2327)); opacity: .9; } .lmlg-modal-acoes { display: flex; gap: 10px; } .lmlg-modal-acoes .lmlg-botao { flex: 1 1 0; padding: 11px 16px; } /* Anel de foco idêntico nos dois botões do popup (Cancelar e Sair). */ .lmlg-modal-acoes .lmlg-botao:focus-visible { outline: 3px solid color-mix(in srgb, var(--lmlg-pop-acento, #2271b1) 45%, transparent); outline-offset: 2px; } .lmlg-modal-erro { margin: 0 0 14px; padding: 10px 12px; border: 1px solid #f5c2c7; background: #fde8ea; color: #842029; border-radius: 8px; font-size: 13px; line-height: 1.4; } /* ---------- Campos ---------- */ .lmlg-campo { display: block; margin-bottom: 14px; } .lmlg-campo-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--lmlg-pop-fg, var(--lm-texto, #1d2327)); opacity: .85; } .lmlg-campo-wrap { position: relative; display: flex; align-items: center; } .lmlg-campo-wrap .lmlg-campo-icone { position: absolute; left: 12px; display: inline-flex; pointer-events: none; opacity: .5; } .lmlg-campo-wrap .lmlg-campo-icone svg { width: 18px; height: 18px; fill: currentColor; display: block; } .lmlg-modal .lmlg-campo-wrap input { width: 100%; padding: 11px 12px 11px 38px; border: 1px solid var(--lm-input-bd, #dcdcde); border-radius: var(--lm-radius, 8px); background: #fff; color: #1d2327; font: inherit; font-size: 15px; line-height: 1.2; transition: border-color .15s ease, box-shadow .15s ease; } .lmlg-modal .lmlg-campo-wrap input:focus { outline: none; border-color: var(--lmlg-pop-acento, var(--lm-primaria, #2271b1)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lmlg-pop-acento, #2271b1) 22%, transparent); } .lmlg-modal .lmlg-campo-wrap input[name="pwd"] { padding-right: 42px; } /* Botão mostrar/ocultar senha — dimensões fixas para o tema não inflar. */ .lmlg-modal .lmlg-ver-senha { position: absolute; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #1d2327; opacity: .5; cursor: pointer; transition: opacity .15s ease; } .lmlg-modal .lmlg-ver-senha:hover { opacity: .9; } .lmlg-modal .lmlg-ver-senha svg { width: 18px; height: 18px; fill: currentColor; display: block; } /* ---------- Linha lembrar / esqueci ---------- */ .lmlg-modal-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 18px; font-size: 13px; } .lmlg-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--lmlg-pop-fg, var(--lm-texto, #1d2327)); opacity: .9; } .lmlg-check input { accent-color: var(--lmlg-pop-acento, var(--lm-primaria, #2271b1)); } .lmlg-modal-link { color: var(--lmlg-pop-acento, var(--lm-primaria, #2271b1)); text-decoration: none; font-weight: 600; } .lmlg-modal-link:hover { text-decoration: underline; } /* ---------- Botão enviar (largura total no modal) ---------- */ .lmlg-modal .lmlg-botao-enviar { width: 100%; padding: 12px 18px; font-size: 15px; background: var(--lmlg-pop-acento, var(--lm-primaria, #2271b1)); color: var(--lmlg-pop-btn-fg, #fff); border-color: transparent; } .lmlg-modal .lmlg-botao-enviar:hover { color: var(--lmlg-pop-btn-fg, #fff); } .lmlg-modal .lmlg-botao-enviar:focus-visible { outline: 3px solid color-mix(in srgb, var(--lmlg-pop-acento, #2271b1) 45%, transparent); } .lmlg-botao-enviar[aria-busy="true"] { cursor: progress; opacity: .85; } .lmlg-botao-enviar[aria-busy="true"] .lmlg-icon, .lmlg-botao-enviar[aria-busy="true"] .lmlg-enviar-txt { display: none; } .lmlg-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: lmlg-spin .7s linear infinite; } .lmlg-botao-enviar[aria-busy="true"] .lmlg-spinner { display: inline-block; } /* Trava de scroll do body com modal aberto */ body.lmlg-modal-aberto { overflow: hidden; } @keyframes lmlg-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes lmlg-pop { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } } @keyframes lmlg-spin { to { transform: rotate(360deg) } } @media (prefers-reduced-motion: reduce) { .lmlg-modal-backdrop, .lmlg-modal-card { animation: none; } } /* ============================================================ TOOLTIP (i) — dica ao lado do botão Entrar ============================================================ Gatilho focável (hover + foco/toque), sem JS. O balão usa cores próprias com fallback para a paleta Loomah/tokens --lm-*. */ .lmlg-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: help; color: var(--lmlg-tip-icone-cor, #cc3366); transition: color .15s ease; border-radius: 999px; -webkit-tap-highlight-color: transparent; } .lmlg-tip:hover, .lmlg-tip:focus, .lmlg-tip:focus-within, .lmlg-tip:active { color: var(--lmlg-tip-icone-cor-hover, #fff); } .lmlg-tip:focus { outline: none; } .lmlg-tip:focus-visible { outline: 3px solid color-mix(in srgb, var(--lmlg-btn-bg, #2271b1) 45%, transparent); outline-offset: 2px; } .lmlg-tip-icone { display: inline-flex; width: 18px; height: 18px; } .lmlg-tip-icone svg { width: 100%; height: 100%; fill: currentColor; } /* Balão */ .lmlg-tip-bolha { position: absolute; z-index: 10; width: max-content; max-width: 240px; padding: 8px 11px; background: var(--lmlg-tip-bg, var(--lm-texto, #1d2327)); color: var(--lmlg-tip-fg, #fff); font-size: 12.5px; font-weight: 500; line-height: 1.4; text-align: left; border-radius: 8px; box-shadow: 0 6px 20px rgba(15, 23, 42, .18); opacity: 0; visibility: hidden; transform: translateY(2px); transition: opacity .15s ease, transform .15s ease, visibility .15s; pointer-events: none; } .lmlg-tip:hover .lmlg-tip-bolha, .lmlg-tip:focus .lmlg-tip-bolha, .lmlg-tip:focus-within .lmlg-tip-bolha { opacity: 1; visibility: visible; transform: translateY(0); } /* Seta do balão */ .lmlg-tip-bolha::after { content: ""; position: absolute; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); } /* Posições */ .lmlg-tip--top .lmlg-tip-bolha { bottom: calc(100% + 9px); left: 50%; transform: translate(-50%, 2px); } .lmlg-tip--top:hover .lmlg-tip-bolha, .lmlg-tip--top:focus .lmlg-tip-bolha, .lmlg-tip--top:focus-within .lmlg-tip-bolha { transform: translate(-50%, 0); } .lmlg-tip--top .lmlg-tip-bolha::after { top: 100%; left: 50%; margin: -4px 0 0 -4px; } .lmlg-tip--bottom .lmlg-tip-bolha { top: calc(100% + 9px); left: 50%; transform: translate(-50%, -2px); } .lmlg-tip--bottom:hover .lmlg-tip-bolha, .lmlg-tip--bottom:focus .lmlg-tip-bolha, .lmlg-tip--bottom:focus-within .lmlg-tip-bolha { transform: translate(-50%, 0); } .lmlg-tip--bottom .lmlg-tip-bolha::after { bottom: 100%; left: 50%; margin: 0 0 -4px -4px; } .lmlg-tip--left .lmlg-tip-bolha { right: calc(100% + 9px); top: 50%; transform: translate(2px, -50%); } .lmlg-tip--left:hover .lmlg-tip-bolha, .lmlg-tip--left:focus .lmlg-tip-bolha, .lmlg-tip--left:focus-within .lmlg-tip-bolha { transform: translate(0, -50%); } .lmlg-tip--left .lmlg-tip-bolha::after { left: 100%; top: 50%; margin: -4px 0 0 -4px; } .lmlg-tip--right .lmlg-tip-bolha { left: calc(100% + 9px); top: 50%; transform: translate(-2px, -50%); } .lmlg-tip--right:hover .lmlg-tip-bolha, .lmlg-tip--right:focus .lmlg-tip-bolha, .lmlg-tip--right:focus-within .lmlg-tip-bolha { transform: translate(0, -50%); } .lmlg-tip--right .lmlg-tip-bolha::after { right: 100%; top: 50%; margin: -4px -4px 0 0; } @media (prefers-reduced-motion: reduce) { .lmlg-tip-bolha { transition: opacity .15s ease, visibility .15s; } }