/* public/assets/css/login.css
*
* Tela de Login / Cadastro / Recuperar senha — estilo glassmorphic
* sobre fundo de mapa-múndi animado. Tipografia premium (Inter 900).
* Inspirado em 21st.dev gaming-login + estilo "Acme" tipográfico.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
/*
*
* Estrutura HTML usada nas páginas:
*
*
*
*
*
*
* ...
*
*
*/
:root {
color-scheme: dark;
--bg-dark: #050507;
--accent: #ef4444;
--accent-2: #b91c1c;
--accent-3: #f87171;
--text: #f0f0f3;
--text-dim: rgba(255, 255, 255, 0.6);
--text-dim2: rgba(255, 255, 255, 0.4);
--stroke: rgba(255, 255, 255, 0.10);
--stroke-2: rgba(255, 255, 255, 0.16);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
background: var(--bg-dark);
color: var(--text);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'cv11', 'ss01', 'ss03';
}
.lg-body {
min-height: 100vh;
position: relative;
overflow-x: hidden;
}
/* ===================================================================
* FUNDO: mapa-múndi pontilhado + arcos animados + glow vermelho
* =================================================================== */
.lg-bg {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
background:
radial-gradient(900px 700px at 50% 40%, rgba(239, 68, 68, 0.16), transparent 60%),
radial-gradient(700px 600px at 15% 90%, rgba(239, 68, 68, 0.08), transparent 60%),
linear-gradient(180deg, #050507 0%, #02020a 100%);
}
/* WRAPPER do mapa — perspective 3D pra dar ilusão de globo */
.lg-bg__globe {
position: absolute;
inset: 0;
z-index: 1;
perspective: 1400px;
perspective-origin: center 45%;
overflow: hidden;
pointer-events: none;
}
/* Mapa pontilhado — gira sutilmente em Y/X dando sensação de planeta */
.lg-bg__map {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.55;
transform: scale(1.12) rotateX(8deg) rotateY(0deg);
transform-origin: 50% 50%;
transform-style: preserve-3d;
will-change: transform;
animation: globeSpin 30s ease-in-out infinite alternate;
mask-image:
linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
radial-gradient(ellipse 92% 86% at center, #000 60%, rgba(0,0,0,0.5) 95%, transparent 100%);
-webkit-mask-image:
linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
radial-gradient(ellipse 92% 86% at center, #000 60%, rgba(0,0,0,0.5) 95%, transparent 100%);
mask-composite: intersect;
-webkit-mask-composite: source-in;
pointer-events: none;
user-select: none;
}
@keyframes globeSpin {
0% { transform: scale(1.12) rotateX(8deg) rotateY(-6deg) translateX(-10px); }
50% { transform: scale(1.14) rotateX(10deg) rotateY(0deg) translateX(0); }
100% { transform: scale(1.12) rotateX(8deg) rotateY(6deg) translateX(10px); }
}
/* Sombreado esférico — escurece bordas pra reforçar a curvatura */
.lg-bg__globe-shade {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 80% 70% at center,
transparent 25%,
rgba(0, 0, 0, 0.30) 65%,
rgba(0, 0, 0, 0.75) 100%),
radial-gradient(ellipse 40% 30% at 35% 35%,
rgba(255, 255, 255, 0.04),
transparent 70%);
z-index: 1;
}
/* Orbs vermelhos flutuando — combinam animação CSS + parallax do mouse */
.lg-bg__orb {
--px: 0px;
--py: 0px;
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 2;
filter: blur(70px);
will-change: transform;
mix-blend-mode: screen;
transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lg-bg__orb--1 {
width: 460px; height: 460px;
background: radial-gradient(circle, rgba(239, 68, 68, 0.32), transparent 70%);
top: -120px; left: -120px;
animation: orbDrift1 22s ease-in-out infinite alternate;
}
.lg-bg__orb--2 {
width: 540px; height: 540px;
background: radial-gradient(circle, rgba(239, 68, 68, 0.22), transparent 70%);
bottom: -180px; right: -140px;
animation: orbDrift2 28s ease-in-out infinite alternate;
}
.lg-bg__orb--3 {
width: 340px; height: 340px;
background: radial-gradient(circle, rgba(248, 113, 113, 0.20), transparent 70%);
top: 40%; left: 58%;
animation: orbDrift3 19s ease-in-out infinite alternate;
}
@keyframes orbDrift1 {
from { transform: translate(calc(0px + var(--px)), calc(0px + var(--py))) scale(1); }
to { transform: translate(calc(120px + var(--px)), calc(90px + var(--py))) scale(1.15); }
}
@keyframes orbDrift2 {
from { transform: translate(calc(0px + var(--px)), calc(0px + var(--py))) scale(1); }
to { transform: translate(calc(-110px + var(--px)), calc(-70px + var(--py))) scale(1.08); }
}
@keyframes orbDrift3 {
0% { transform: translate(calc(0px + var(--px)), calc(0px + var(--py))) scale(1); }
50% { transform: translate(calc(70px + var(--px)), calc(-90px + var(--py))) scale(1.12); }
100% { transform: translate(calc(-90px + var(--px)), calc(70px + var(--py))) scale(0.95); }
}
/* Linha de scan vertical — passa de cima a baixo da tela em loop */
.lg-bg__scan {
position: absolute;
left: 0;
right: 0;
top: -10%;
height: 220px;
pointer-events: none;
z-index: 3;
background: linear-gradient(180deg,
transparent 0%,
rgba(239, 68, 68, 0.02) 30%,
rgba(239, 68, 68, 0.18) 50%,
rgba(239, 68, 68, 0.02) 70%,
transparent 100%);
border-top: 1px solid rgba(239, 68, 68, 0.0);
border-bottom: 1px solid rgba(239, 68, 68, 0.35);
box-shadow: 0 0 30px rgba(239, 68, 68, 0.25);
animation: scanSweep 9s linear infinite;
}
@keyframes scanSweep {
0% { top: -25%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { top: 110%; opacity: 0; }
}
/* Partículas subindo (geradas pelo JS dentro do container) */
.lg-bg__particles {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
overflow: hidden;
}
.lg-bg__particle {
position: absolute;
bottom: -10px;
width: 2px;
height: 2px;
background: radial-gradient(circle, rgba(248, 113, 113, 0.9), rgba(239, 68, 68, 0));
border-radius: 50%;
animation-name: particleRise;
animation-iteration-count: infinite;
animation-timing-function: linear;
filter: blur(0.5px);
}
@keyframes particleRise {
0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
10% { opacity: 1; }
50% { transform: translate(20px, -50vh) scale(1); opacity: 0.8; }
90% { opacity: 0.5; }
100% { transform: translate(-10px, -110vh) scale(0.3); opacity: 0; }
}
/* Vinheta escura sobre o mapa pra legibilidade do card */
.lg-bg::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(closest-side at 50% 50%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.60) 100%);
pointer-events: none;
z-index: 2;
}
/* Camada SVG com os arcos animados — ACIMA da vinheta */
.lg-bg__arcs {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
/* leve glow geral nos elementos vermelhos */
filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.45));
}
/* Linhas de grade sutis movendo lentamente (sensação "matrix") */
.lg-bg::before {
content: "";
position: absolute;
inset: -44px;
background-image:
linear-gradient(rgba(255,255,255,0.014) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(900px 800px at 50% 40%, #000 35%, transparent 80%);
-webkit-mask-image: radial-gradient(900px 800px at 50% 40%, #000 35%, transparent 80%);
pointer-events: none;
z-index: 4;
animation: gridScroll 18s linear infinite;
}
@keyframes gridScroll {
from { background-position: 0 0; }
to { background-position: 0 44px; }
}
/* Variante "anim": leve pulse no glow geral */
.lg-bg--anim {
animation: bgPulse 16s ease-in-out infinite alternate;
}
@keyframes bgPulse {
from { filter: brightness(1.0); }
to { filter: brightness(1.08); }
}
/* ===================================================================
* SHELL central
* =================================================================== */
.lg-shell {
position: relative;
z-index: 2;
min-height: 100vh;
display: grid;
place-items: center;
padding: 32px 18px;
}
/* ===================================================================
* CARD glassmorphic — com halo respirando + luz viajante na borda
* =================================================================== */
.lg-card {
--cx: 0px;
--cy: 0px;
width: 100%;
max-width: 370px;
padding: 28px 28px 22px;
background: rgba(13, 13, 16, 0.55);
backdrop-filter: blur(22px) saturate(140%);
-webkit-backdrop-filter: blur(22px) saturate(140%);
border: 1px solid var(--stroke);
border-radius: 22px;
box-shadow:
0 30px 90px rgba(0, 0, 0, 0.55),
0 0 60px -12px rgba(239, 68, 68, 0.18),
0 1px 0 rgba(255, 255, 255, 0.05) inset;
animation:
cardSlideIn 780ms cubic-bezier(0.22, 1, 0.36, 1),
cardHalo 7s ease-in-out 1000ms infinite;
position: relative;
isolation: isolate;
transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
transform: translate(var(--cx), var(--cy));
}
/* Luz viajante percorrendo a borda do card */
.lg-card::before {
content: "";
position: absolute;
inset: -1.5px;
border-radius: 23px;
padding: 1.5px;
background: conic-gradient(
from var(--edge-angle, 0deg),
transparent 0deg,
transparent 250deg,
rgba(239, 68, 68, 0.0) 270deg,
rgba(248, 113, 113, 0.9) 320deg,
rgba(239, 68, 68, 0.0) 360deg);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: -1;
animation: cardEdge 6s linear infinite;
}
@property --edge-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
@keyframes cardEdge {
from { --edge-angle: 0deg; }
to { --edge-angle: 360deg; }
}
/* Slide-in horizontal: card surge da direita, dramático, com leve rotate */
@keyframes cardSlideIn {
0% {
opacity: 0;
transform: translateX(280px) scale(0.90) rotate(2deg);
filter: blur(4px);
}
40% {
opacity: 1;
filter: blur(0);
}
100% {
opacity: 1;
transform: translateX(0) scale(1) rotate(0);
filter: blur(0);
}
}
/* Mantém o nome antigo por compat */
@keyframes lgIn {
from { opacity: 0; transform: translateX(80px) scale(0.96); }
to { opacity: 1; transform: none; }
}
@keyframes cardHalo {
0%, 100% {
box-shadow:
0 30px 90px rgba(0, 0, 0, 0.55),
0 0 60px -12px rgba(239, 68, 68, 0.12),
0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
50% {
box-shadow:
0 30px 90px rgba(0, 0, 0, 0.55),
0 0 80px -6px rgba(239, 68, 68, 0.28),
0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
}
/* Cascade de entrada dos itens do form */
.lg-card form > * {
animation: fieldIn 520ms var(--ease) both;
}
.lg-card form > *:nth-child(1) { animation-delay: 280ms; }
.lg-card form > *:nth-child(2) { animation-delay: 340ms; }
.lg-card form > *:nth-child(3) { animation-delay: 400ms; }
.lg-card form > *:nth-child(4) { animation-delay: 460ms; }
.lg-card form > *:nth-child(5) { animation-delay: 520ms; }
.lg-card form > *:nth-child(6) { animation-delay: 580ms; }
.lg-card form > *:nth-child(7) { animation-delay: 640ms; }
.lg-card form > *:nth-child(8) { animation-delay: 700ms; }
@keyframes fieldIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
/* ===================================================================
* BRAND — ícone em placa cinza + tipografia massiva embaixo
* =================================================================== */
.lg-brand {
--ix: 0deg;
--iy: 0deg;
text-align: center;
margin: -2px 0 18px;
perspective: 1000px;
}
/* Container do ícone — placa cinza pequena, logo praticamente preenche */
.lg-brand__icon {
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 16px;
margin: 0 auto 10px;
overflow: hidden;
background: #2b2b2b;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 14px 32px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.12) inset,
inset 0 2px 0 rgba(255, 255, 255, 0.4),
inset 0 -2px 0 rgba(0, 0, 0, 0.15),
0 0 30px rgba(239, 68, 68, 0.20);
position: relative;
transform: rotateX(var(--iy)) rotateY(var(--ix));
transform-origin: center center;
transform-style: preserve-3d;
animation: brandFloat 5.5s ease-in-out 600ms infinite;
transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
/* Halo vermelho pulsante atrás do ícone */
.lg-brand__icon::before {
content: "";
position: absolute;
inset: -14px;
border-radius: 26px;
background: radial-gradient(closest-side, rgba(239, 68, 68, 0.55), transparent 70%);
z-index: -1;
filter: blur(10px);
animation: brandHalo 3.6s ease-in-out infinite;
}
/* Reflexo de vidro diagonal sutil */
.lg-brand__icon::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.30) 0%, transparent 38%, transparent 62%, rgba(0, 0, 0, 0.10) 100%);
pointer-events: none;
}
/* Logo PNG ocupa praticamente todo o container */
.lg-brand__icon img,
.lg-brand__img {
width: 56px !important;
height: 56px !important;
max-width: 56px;
max-height: 56px;
object-fit: contain;
object-position: center;
display: block;
position: relative;
z-index: 1;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.30));
}
@keyframes brandFloat {
0%, 100% { transform: translateY(0) rotateX(var(--iy)) rotateY(var(--ix)); }
50% { transform: translateY(-5px) rotateX(calc(var(--iy) + 2deg)) rotateY(var(--ix)); }
}
@keyframes brandHalo {
0%, 100% { opacity: 0.45; transform: scale(0.92); }
50% { opacity: 0.85; transform: scale(1.10); }
}
/* Nome em fonte massiva estilo "Acme" — embaixo do ícone */
.lg-brand__name {
display: block;
font-family: 'Inter', sans-serif;
font-size: 44px;
font-weight: 900;
letter-spacing: -0.045em;
line-height: 0.95;
margin: 0;
background:
linear-gradient(120deg,
#ffffff 0%,
#ffffff 30%,
#fca5a5 55%,
#ffffff 75%,
var(--accent-3) 100%);
background-size: 250% 100%;
background-position: 0% 0%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow:
0 0 40px rgba(239, 68, 68, 0.25),
0 4px 20px rgba(0, 0, 0, 0.5);
animation: brandShimmer 4.5s ease-in-out infinite;
user-select: none;
}
@keyframes brandShimmer {
0%, 100% { background-position: 0% 0%; }
50% { background-position: 100% 0%; }
}
/* Tagline abaixo do nome */
.lg-brand__tagline {
margin: 6px 0 0;
font-family: 'Inter', sans-serif;
font-size: 11.5px;
font-weight: 500;
color: var(--text-dim);
letter-spacing: 0.02em;
line-height: 1.4;
}
.lg-brand__tagline {
margin: 8px 0 0;
font-size: 13px;
color: var(--text-dim);
letter-spacing: 0.01em;
line-height: 1.5;
}
/* ===================================================================
* FORM
* =================================================================== */
form {
display: flex;
flex-direction: column;
}
.lg-label {
display: block;
font-size: 10.5px;
color: var(--text-dim2);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.10em;
margin: 4px 2px 6px;
}
.lg-input {
position: relative;
margin-bottom: 10px;
}
.lg-input__icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-dim);
pointer-events: none;
display: grid;
place-items: center;
}
.lg-input__icon svg { width: 16px; height: 16px; }
.lg-input input {
width: 100%;
padding: 10px 40px 10px 40px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--stroke);
border-radius: 10px;
color: var(--text);
font: inherit;
font-size: 13.5px;
transition: border-color 160ms var(--ease),
box-shadow 160ms var(--ease),
background 160ms var(--ease);
}
.lg-input input::placeholder { color: var(--text-dim2); }
.lg-input input:focus {
outline: none;
border-color: rgba(239, 68, 68, 0.55);
background: rgba(255, 255, 255, 0.07);
box-shadow:
0 0 0 3px rgba(239, 68, 68, 0.15),
0 8px 24px -8px rgba(239, 68, 68, 0.25);
}
/* Brilho sutil quando o input tem valor */
.lg-input input:not(:placeholder-shown) {
background: rgba(255, 255, 255, 0.05);
border-color: var(--stroke-2);
}
.lg-input__toggle {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 0;
width: 28px;
height: 28px;
border-radius: 7px;
color: var(--text-dim);
cursor: pointer;
display: grid;
place-items: center;
transition: color 160ms var(--ease), background 160ms var(--ease);
}
.lg-input__toggle:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.05);
}
/* Variante "sem ícone esquerdo" (campo simples) */
.lg-input--plain input { padding-left: 14px; }
/* Erro inline abaixo de um campo */
.lg-err-inline {
color: #fca5a5;
font-size: 12px;
margin: -8px 2px 12px;
}
/* ===================================================================
* FORGOT link / Toggle remember
* =================================================================== */
.lg-forgot {
display: flex;
justify-content: flex-end;
margin: -2px 0 14px;
}
.lg-forgot a {
font-size: 12px;
color: var(--text-dim);
text-decoration: none;
transition: color 160ms var(--ease);
}
.lg-forgot a:hover { color: var(--accent-3); }
/* ===================================================================
* BOTÃO principal
* =================================================================== */
.lg-btn {
width: 100%;
padding: 11px 14px;
border: 0;
border-radius: 10px;
color: #fff;
font: inherit;
font-weight: 600;
font-size: 13.5px;
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
box-shadow:
0 12px 32px rgba(239, 68, 68, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
cursor: pointer;
transition: transform 120ms var(--ease),
box-shadow 180ms var(--ease);
letter-spacing: 0.02em;
position: relative;
overflow: hidden;
}
.lg-btn::after {
/* shine sutil */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
transform: translateX(-100%);
transition: transform 700ms var(--ease);
pointer-events: none;
}
.lg-btn:hover {
box-shadow:
0 14px 38px rgba(239, 68, 68, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.lg-btn:hover::after { transform: translateX(100%); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn[disabled] { opacity: 0.7; cursor: not-allowed; }
/* ===================================================================
* ERRO box / Sub texto
* =================================================================== */
.lg-err {
background: rgba(239, 68, 68, 0.10);
border: 1px solid rgba(239, 68, 68, 0.25);
color: #fca5a5;
padding: 10px 12px;
border-radius: 10px;
font-size: 12.5px;
margin-bottom: 14px;
text-align: center;
line-height: 1.45;
}
.lg-card h1 {
text-align: center;
font-size: 22px;
margin: 0 0 6px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text);
}
.lg-sub {
text-align: center;
color: var(--text-dim);
font-size: 13px;
line-height: 1.55;
margin: 0 0 22px;
}
.lg-sub strong { color: var(--text); font-weight: 500; }
/* ===================================================================
* RODAPÉ do card
* =================================================================== */
.lg-foot {
margin-top: 14px;
text-align: center;
font-size: 12.5px;
color: var(--text-dim);
}
.lg-foot a {
color: var(--text);
text-decoration: none;
font-weight: 600;
transition: color 160ms var(--ease);
}
.lg-foot a:hover { color: var(--accent-3); }
.lg-foot a.lg-link--strong { color: var(--accent); }
.lg-foot a.lg-link--strong:hover { color: var(--accent-3); }
.lg-foot--row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
/* ===================================================================
* BRAND/copyright fixo no rodapé da tela
* =================================================================== */
.lg-copy {
position: relative;
z-index: 2;
text-align: center;
padding: 14px 0 22px;
font-size: 11.5px;
color: var(--text-dim2);
letter-spacing: 0.04em;
}
.lg-copy strong { color: var(--text-dim); font-weight: 600; }
/* ===================================================================
* RESPONSIVO
* =================================================================== */
@media (max-width: 440px) {
.lg-card { padding: 30px 24px 24px; border-radius: 18px; }
.lg-brand__icon { width: 64px; height: 64px; border-radius: 16px; }
.lg-brand__icon img,
.lg-brand__img { width: 56px !important; height: 56px !important; max-width: 56px; max-height: 56px; }
.lg-brand__name { font-size: 42px; }
.lg-brand__tagline { font-size: 12px; }
}
/* Reduce motion — desliga TODAS as animações de fundo/brand */
@media (prefers-reduced-motion: reduce) {
.lg-card,
.lg-card::before,
.lg-btn::after,
.lg-bg--anim,
.lg-bg::before,
.lg-bg__map,
.lg-bg__orb,
.lg-bg__scan,
.lg-bg__particle,
.lg-brand__icon,
.lg-brand__icon::before,
.lg-brand__name,
.lg-card form > * {
animation: none !important;
}
.lg-bg__orb { opacity: 0.6; }
.lg-bg__scan { display: none; }
.lg-bg__particles { display: none; }
}