/* Identidade visual SENA — mesma paleta e mesmos elementos gráficos do sistema do cartório (portal/login.html do "Sena Escalável"). Usado pelas telas de autenticação (login / cadastro / esqueci-senha / redefinir-senha) dos dois produtos (Corretores e Advogados) e como base de cor pro resto do app (ver theme.js). Uma tela de auth só precisa: deste arquivo + + o markup .login-box de sempre. O nome do produto ("Corretores" / "Advogados") entra no HTML da página, não aqui. */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap'); :root { --sena-cor-primaria: #004b87; --sena-cor-intensa: #1d6aa8; --sena-cor-clara: #3d8bd4; --sena-cor-media: #6fb1e6; --sena-cor-suave: #b8d8f0; --sena-cor-pale: #dcebf8; --sena-bg: #f4f6f8; } body.sena-auth { font-family: 'Lato', sans-serif; background: var(--sena-bg); margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; position: relative; overflow: hidden; } /* ---------- fundo: manchas suaves flutuando ---------- */ .bg-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .bg-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.16; } .bg-blob.b1 { width: 420px; height: 420px; top: -12%; left: -8%; background: var(--sena-cor-primaria); animation: floatA 22s ease-in-out infinite; } .bg-blob.b2 { width: 380px; height: 380px; bottom: -14%; right: -6%; background: var(--sena-cor-clara); animation: floatB 26s ease-in-out infinite; animation-delay: -6s; } .bg-blob.b3 { width: 300px; height: 300px; top: 18%; right: 12%; background: var(--sena-cor-media); animation: floatC 19s ease-in-out infinite; animation-delay: -10s; } .bg-blob.b4 { width: 260px; height: 260px; bottom: 12%; left: 6%; background: var(--sena-cor-clara); animation: floatA 24s ease-in-out infinite; animation-delay: -14s; } .bg-blob.b5 { width: 220px; height: 220px; top: 46%; left: 42%; background: var(--sena-cor-primaria); animation: floatB 30s ease-in-out infinite; animation-delay: -4s; } .bg-blob.b6 { width: 240px; height: 240px; top: 65%; left: -6%; background: var(--sena-cor-suave); animation: floatC 21s ease-in-out infinite; animation-delay: -8s; } .bg-blob.b7 { width: 200px; height: 200px; top: 5%; left: 60%; background: var(--sena-cor-intensa); animation: floatA 27s ease-in-out infinite; animation-delay: -12s; } .bg-blob.b8 { width: 260px; height: 260px; bottom: 40%; right: 38%; background: var(--sena-cor-media); animation: floatB 23s ease-in-out infinite; animation-delay: -2s; } .bg-blob.b9 { width: 210px; height: 210px; top: 75%; right: 20%; background: var(--sena-cor-primaria); animation: floatC 25s ease-in-out infinite; animation-delay: -16s; } .bg-blob.b10 { width: 230px; height: 230px; top: 30%; left: 20%; background: var(--sena-cor-clara); animation: floatA 20s ease-in-out infinite; animation-delay: -9s; } .bg-blob.cursor { width: 90px; height: 90px; background: var(--sena-cor-clara); opacity: 0.22; left: 0; top: 0; will-change: transform; } @keyframes floatA { 0%,100% { transform: translate(0,0) scale(1); } 25% { transform: translate(18vw,8vh) scale(1.1); } 50% { transform: translate(6vw,20vh) scale(0.92); } 75% { transform: translate(-12vw,6vh) scale(1.05); } } @keyframes floatB { 0%,100% { transform: translate(0,0) scale(1); } 25% { transform: translate(-16vw,-10vh) scale(1.08); } 50% { transform: translate(-8vw,-22vh) scale(0.95); } 75% { transform: translate(14vw,-8vh) scale(1.04); } } @keyframes floatC { 0%,100% { transform: translate(0,0) scale(1); } 30% { transform: translate(-14vw,14vh) scale(1.06); } 60% { transform: translate(10vw,4vh) scale(0.9); } 85% { transform: translate(-6vw,-12vh) scale(1.1); } } /* ---------- cartão ---------- */ .login-box { position: relative; z-index: 1; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); border: 1px solid rgba(0, 75, 135, 0.08); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 75, 135, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04); padding: 28px 56px 24px; width: 100%; max-width: 460px; box-sizing: border-box; text-align: center; animation: brilhoQuadro 3.2s ease-in-out infinite; } .login-box.larga { max-width: 620px; } @keyframes brilhoQuadro { 0%, 100% { box-shadow: 0 14px 40px rgba(0,75,135,.12), 0 2px 8px rgba(0,0,0,.04), 0 0 0 rgba(61,139,212,0); } 50% { box-shadow: 0 14px 40px rgba(0,75,135,.12), 0 2px 8px rgba(0,0,0,.04), 0 0 26px 5px rgba(61,139,212,.4); } } @media (max-width: 560px) { .login-box { padding-left: 26px; padding-right: 26px; } } .login-box::before, .login-box::after { content: ''; position: absolute; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--sena-cor-primaria), var(--sena-cor-clara)); } .login-box::before { top: 0; border-radius: 14px 14px 0 0; } .login-box::after { bottom: 0; border-radius: 0 0 14px 14px; } .login-tagline { text-align: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sena-cor-primaria); margin: 0 0 18px; } .login-header { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; margin: 0 auto 34px; } .login-header::after { content: ''; position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); width: 56px; height: 3px; background: var(--sena-cor-clara); border-radius: 2px; opacity: 0.6; } .logo-wrap { position: relative; display: inline-flex; } .logo-wrap img { max-height: 96px; filter: drop-shadow(0 2px 6px rgba(0, 75, 135, 0.12)); } .login-box h1 { font-size: 2rem; color: var(--sena-cor-primaria); letter-spacing: 0.01em; margin: 0; display: inline-block; animation: brilhoEntrar 3.2s ease-in-out infinite; } .login-box h1 .sub { display: block; font-size: 0.9rem; font-weight: 400; color: #6b7885; letter-spacing: 0.04em; } @keyframes brilhoEntrar { 0%,100% { text-shadow: 0 0 0 rgba(61,139,212,0); } 50% { text-shadow: 0 0 14px rgba(61,139,212,.45); } } .login-box label { display: block; width: 100%; box-sizing: border-box; text-align: left; font-size: 0.88em; font-weight: 700; color: #48545f; margin: 16px 0 6px; } .campo-input { position: relative; width: 100%; margin: 0 auto; } .login-box input, .login-box select { width: 100%; padding: 11px 12px; border: 1.5px solid #d7dee5; border-radius: 6px; box-sizing: border-box; font-family: inherit; font-size: 1em; background: #fcfdfe; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .login-box input:focus, .login-box select:focus { outline: none; border-color: var(--sena-cor-clara); box-shadow: 0 0 0 3px rgba(61, 139, 212, 0.15); background: #fff; } .campo-input::after { content: ''; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0; background: linear-gradient(90deg, var(--sena-cor-primaria), var(--sena-cor-clara)); border-radius: 2px; transition: width 0.35s ease; } .campo-input:focus-within::after { width: 100%; } .login-box button.sena-btn { display: block; width: 100%; margin: 24px auto 0; padding: 13px; background: linear-gradient(180deg, var(--sena-cor-primaria), var(--sena-cor-intensa)); color: #fff; border: none; border-radius: 6px; font-size: 1em; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 75, 135, 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .login-box button.sena-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 75, 135, 0.32); filter: brightness(1.05); } .login-box button.sena-btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; } .erro { color: #c0392b; font-size: 0.9em; min-height: 1.2em; margin-top: 14px; } .msg-ok { color: #1e7e34; font-size: 0.9em; margin-top: 14px; } .login-box .rodape-links { margin-top: 22px; padding-top: 16px; border-top: 1px solid #eef1f4; font-size: 0.86em; } .login-box .rodape-links a { color: var(--sena-cor-primaria); font-weight: 600; text-decoration: none; } .login-box .rodape-links a:hover { text-decoration: underline; } .login-box .rodape-links p { margin: 0 0 8px; } .login-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .login-grid .full { grid-column: 1 / -1; } .frase-motivacional { position: relative; z-index: 1; max-width: 380px; margin: 20px auto 0; font-size: 1em; font-style: italic; color: #6b7885; text-align: center; line-height: 1.45; } .easter-egg { position: fixed; right: 22px; bottom: 14px; z-index: 1; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 1.6em; letter-spacing: 0.08em; color: var(--sena-cor-primaria); opacity: 0.35; filter: blur(4px); cursor: default; user-select: none; transition: filter 0.35s ease, opacity 0.35s ease; } .easter-egg:hover { filter: blur(0); opacity: 0.8; }