/* hub.css — estilos do hub "Lendas de Vidalia". COMPAT MÁXIMA (Maxthon 5 / Chromium antigo — o navegador que roda o Flash): - SEM CSS variables (var()) — Chromium <49 não tem; cores são literais. - SEM `inset` (usa top/right/bottom/left), SEM `gap` em flex (usa margins). - SEM grid/backdrop-filter no Day 1. Flexbox básico OK (Chromium 29+). Paleta de referência (NÃO usar var, só consulta): gold #f0c850 · gold-text #f5dc8a · gold-text-dim #e8d090 · gold-light #fff5d6 crystal #5aa0ff · crystal-light #d8f0ff · crystal-dark #1a3a8a bg-night #0a1438 · bg-card rgba(8,18,46,.85) · text #dfe7ff · text-dim #a8b8d0 text-muted #7a8aa0 · danger #c83c46 · border-gold rgba(240,200,80,.5) */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } body { font-family: "Segoe UI", Tahoma, sans-serif; background: #0a1438; color: #dfe7ff; min-height: 100vh; overflow-x: hidden; } .hub-card { background: rgba(8, 18, 46, 0.85); border: 1px solid rgba(240, 200, 80, 0.25); border-radius: 14px; padding: 18px; } .hub-btn { display: inline-block; background: linear-gradient(135deg, #2a5aa8, #1a3a7a, #2a5aa8); border: 2px solid #f0c850; border-radius: 14px; padding: 14px 28px; font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-weight: bold; color: #fff; letter-spacing: 4px; text-transform: uppercase; text-shadow: 0 0 14px rgba(174, 221, 255, 0.9), 0 2px 4px rgba(0, 0, 0, 0.6); box-shadow: 0 0 28px rgba(58, 120, 208, 0.6), inset 0 0 20px rgba(174, 221, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.4); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .hub-btn:hover { transform: translateY(-1px); } .hub-btn:active { transform: translateY(1px); } .hub-input { width: 100%; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(240, 200, 80, 0.5); border-radius: 28px; padding: 12px 18px; color: #dfe7ff; font-size: 14px; letter-spacing: 1px; } .hub-input:focus { outline: none; border-color: #f0c850; } .hub-shake { animation: hub-shake 0.4s ease; } @keyframes hub-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } } /* ===== Login overlay ===== */ /* Coluna + margin-top:auto no card = ancorado embaixo SEM o bug de flex-end (align-items:flex-end com overflow deixa o topo inalcançável; auto-margin não). overflow-y:auto é a rede de segurança do HUD: se alguma tela for menor que o conteúdo (tablet!), scrolla — nada fica fora de alcance. */ .login-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; text-align: center; overflow-y: auto; } .login-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background-color: #0a1438; /* Arte 16:9 via cover: preenche a tela inteira sem barras nem zoom (a arte tem a mesma proporção do monitor). Em telas de proporção diferente, corta só o "respiro" das bordas. Gradiente atrás = fallback se a imagem faltar. */ background-image: url('/brand/hero-bg.jpg'), linear-gradient(180deg, #3a5ba8 0%, #2a4a9a 35%, #1a2a6a 70%, #0a1438 100%); background-repeat: no-repeat, no-repeat; background-position: center top, center center; background-size: cover, cover; } /* Vídeo de fundo em loop por cima da arte jpg (que fica de fallback enquanto o vídeo baixa / se o browser não tocar mp4). object-position center top = mesmo enquadramento da imagem: a logomarca no topo nunca é cortada. */ .login-video { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* leve escurecida no rodapé pra leitura do footer sobre a arte (z-index 1 = continua por cima do vídeo) */ .login-bg:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, transparent, rgba(5,8,20,.55)); z-index: 1; } /* botão de ligar/desligar a música — sempre visível, acima do footer/card */ .login-music-btn { position: absolute; top: 16px; right: 16px; z-index: 5; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: rgba(8, 18, 46, 0.7); border: 1px solid rgba(240, 200, 80, 0.5); border-radius: 50%; color: #e8d090; cursor: pointer; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .login-music-btn:hover { border-color: #f0c850; box-shadow: 0 0 14px rgba(240,200,80,.35); } .login-music-btn.is-off { color: rgba(232,208,144,.45); } .login-particles { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 10% 18%, #fff, transparent), radial-gradient(1px 1px at 22% 38%, rgba(180,220,255,.9), transparent), radial-gradient(2px 2px at 38% 12%, rgba(255,235,180,.8), transparent), radial-gradient(1.5px 1.5px at 68% 18%, rgba(180,220,255,.9), transparent), radial-gradient(2px 2px at 90% 14%, #fff, transparent); } /* Painel compacto na faixa inferior central (print 2026-06-12): a arte do vídeo — logomarca, cristal, personagens — fica inteira visível acima. */ .login-center { position: relative; z-index: 2; width: 600px; max-width: 95%; text-align: center; margin-top: auto; /* empurra pro fundo do overlay (coluna) */ margin-bottom: 7vh; /* respiro acima do footer */ } .login-card { padding: 14px 16px 10px; border-radius: 16px; position: relative; background: linear-gradient(180deg, rgba(8,18,46,.85), rgba(14,24,58,.92)); box-shadow: 0 16px 64px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 2px rgba(240,200,80,.7), 0 0 32px rgba(80,140,220,.25); text-align: left; } /* usuário e senha lado a lado (empilham no media estreito) */ .login-fields { display: flex; } .login-fields .hub-input-wrap { flex: 1; } .login-fields .hub-input-wrap + .hub-input-wrap { margin-left: 10px; } .hub-input-wrap { display: flex; align-items: center; background: rgba(0,0,0,.5); border: 1px solid rgba(240,200,80,.5); border-radius: 24px; padding: 9px 14px; margin-bottom: 10px; } .hub-input-wrap .hub-input { background: transparent; border: 0; padding: 0; border-radius: 0; } .hub-input-icon { color: #e8d090; display: inline-flex; margin-right: 12px; } .hub-input-toggle { background: transparent; border: 0; color: #e8d090; cursor: pointer; opacity: .55; margin-left: 12px; display: inline-flex; } /* linha única de opções: lembrar · esqueceu · cadastre-se */ .login-options { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #a8b8d0; margin: 10px 2px 2px; letter-spacing: 1px; } .login-checkbox { display: inline-flex; align-items: center; cursor: pointer; } .login-checkbox input[type=checkbox] { margin-right: 6px; } .login-forgot { color: #e8d090; text-decoration: none; } .login-signup { color: #f0c850; font-weight: bold; text-decoration: none; letter-spacing: 2px; } .login-error { background: rgba(200,60,70,.15); border: 1px solid #c83c46; color: #ff9aa2; border-radius: 9px; padding: 8px 12px; font-size: 12px; margin-bottom: 12px; text-align: center; } /* ENTRAR + Google lado a lado: o Google é só o ícone (botão pequeno) */ .login-actions { display: flex; } .login-submit { flex: 1; font-size: 18px; letter-spacing: 5px; padding: 10px; text-align: center; } .login-google { display: flex; align-items: center; justify-content: center; width: 48px; margin-left: 10px; border-radius: 12px; background: #fff; text-decoration: none; border: 1px solid rgba(0,0,0,.15); } .login-google:hover { background: #f2f2f2; } /* register/forgot agora sao VIEWS do SPA (mesmo shell+midia do login) — os estilos que antes viviam no