/* ===================================================================== * TEMA DOURADO — Dal Cotone Brasília * --------------------------------------------------------------------- * Estilo visual premium PRETO + DOURADO usado nas telas públicas * (fora do painel logado). Atualmente importado por: * - /index.php (tela de entrada do sistema) * - /public/login.php (tela de login) * * Esse arquivo centraliza TUDO que é compartilhado entre as duas telas. * Coisas específicas de cada tela (ex: o grid de features do index, os * campos de input do login) continuam nos próprios arquivos PHP. * * Componentes reutilizáveis disponíveis: * .login-card → Card escuro com borda dourada, animação de * entrada e leve elevação no hover. * .btn-primary → Botão dourado (classe padrão do Bootstrap, já * .btn-gold reestilizada). Tem animação de "varredura de * luz" no hover. As duas classes viram o mesmo * botão — use qualquer uma. * .brand-divider → Linha fina horizontal com um diamante dourado * no centro. Separador decorativo. * .text-primary → Texto em dourado com letter-spacing premium. * * Animações disponíveis: * @keyframes cardIn → Fade + slide-up (usado automaticamente * em .login-card). * @keyframes haloPulse → Halo dourado pulsante (4s). Use em * elementos com posição `relative` + um * pseudo-elemento próprio. Exemplos já * implementados: .logo-wrap (index) e * .icon-circle (login). * * Efeitos automáticos (aplicados só por importar este arquivo): * - Fundo preto com gradiente radial e brilho dourado sutil. * - Dois "glows" dourados borrados nas bordas opostas da tela. * - Todo texto vira MAIÚSCULO (identidade visual do sistema). * ===================================================================== */ /* ============ 1. VARIÁVEIS DE COR ============ Centraliza a paleta em um lugar só. Trocar uma cor aqui reflete em todas as telas que importam este CSS. */ :root { --gold: #D4AF37; /* Dourado principal */ --gold-soft: #E5C158; /* Dourado claro (usado em gradientes) */ --gold-hover: #B8941F; /* Dourado escuro (reservado p/ hovers alternativos) */ --bg-dark: #0a0a0a; /* Preto do fundo da página */ --bg-dark-2: #151515; /* Preto levemente mais claro (gradiente) */ --card-dark: #1a1a1a; /* Fundo do card principal */ --text-light: #e5e5e5; /* Cor padrão de texto sobre fundo escuro */ } /* ============ 2. MAIÚSCULAS EM TUDO ============ Identidade do sistema. Exceção: inputs continuam normais (você não quer "LUISPRIME@GMAIL.COM" digitado durante o login). */ body, h1, h2, h3, h4, h5, h6, p, span, div, a, button { text-transform: uppercase !important; } /* ============ 3. FUNDO PREMIUM COM GRADIENTE + GRANULADO ============ Três camadas sobrepostas (de cima pra baixo): 1. Textura de granulado SVG (noise) — sensação de material físico tipo couro. Opacidade super baixa, quase imperceptível, mas o olhar capta. Evita a aparência "preto digital chapado". 2. Brilho dourado sutil vindo do centro — profundidade. 3. Transição de cinza escuro pra preto vindo do topo — elegância. `background-attachment: fixed` faz o fundo não rolar com a página (efeito "vitrine de loja de luxo"). */ body { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--text-light); min-height: 100vh; display: flex; flex-direction: column; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse at center, rgba(212, 175, 55, 0.08) 0%, transparent 60%), radial-gradient(ellipse at top, var(--bg-dark-2) 0%, var(--bg-dark) 70%); background-attachment: fixed; position: relative; overflow-x: hidden; } /* ============ 4. GLOWS DOURADOS NAS BORDAS ============ Dois círculos dourados borrados — um no canto superior esquerdo, outro no canto inferior direito. Ficam FIXOS (não rolam) e dão sensação de iluminação ambiente luxuosa. Opacidade baixa + blur alto = efeito sutil e elegante. */ body::before, body::after { content: ''; position: fixed; width: 350px; height: 350px; border-radius: 50%; pointer-events: none; /* não bloqueia cliques */ z-index: 0; filter: blur(100px); opacity: 0.15; } body::before { top: -100px; left: -100px; background: var(--gold); } body::after { bottom: -100px; right: -100px; background: var(--gold-soft); } /* Conteúdo principal sempre acima dos glows. */ main, footer, .login-wrapper { position: relative; z-index: 1; } /* ============ 5. TEXTO DOURADO COM DESTAQUE ============ Sobrescreve a cor "primary" do Bootstrap pra dourado. Letter-spacing maior dá ar tipográfico premium. */ .text-primary { color: var(--gold) !important; letter-spacing: 2px; } /* ============ 6. CARD PRINCIPAL ============ O card é o "palco" da tela. Recebe: • Borda dourada fina ao redor (sutil) • Borda dourada grossa no topo (destaque) • Três sombras sobrepostas (profundidade) • Animação de entrada (fade + slide) • Elevação no hover (micro-interação) */ .login-card { max-width: 460px; width: 100%; border-radius: 24px; border: 1px solid rgba(212, 175, 55, 0.15) !important; border-top: 3px solid var(--gold) !important; background-color: var(--card-dark) !important; color: var(--text-light); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), /* sombra geral escura */ 0 0 0 1px rgba(212, 175, 55, 0.05) inset, /* contorno dourado interno */ 0 30px 80px -20px rgba(212, 175, 55, 0.1) !important; /* brilho dourado abaixo */ animation: cardIn 0.7s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease; } .login-card:hover { transform: translateY(-4px); /* eleva 4px */ box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(212, 175, 55, 0.1) inset, 0 40px 100px -20px rgba(212, 175, 55, 0.18) !important; } /* Dentro do card tudo em maiúsculo, exceto inputs. */ .login-card, .login-card h3, .login-card label, .login-card button { text-transform: uppercase !important; } .login-card input { text-transform: none !important; } /* Animação de entrada do card — "aparece vindo de baixo". */ @keyframes cardIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ============ 7. DIVISOR COM DIAMANTE ============ Linha fina horizontal com um diamante dourado brilhante no centro. Bom pra separar o logo/título do restante do conteúdo sem ser chamativo demais. */ .brand-divider { position: relative; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 0 auto 1.5rem; opacity: 0.9; } .brand-divider::before { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); /* quadrado rotacionado 45° = diamante */ box-shadow: 0 0 10px rgba(212, 175, 55, 0.6); /* glow sutil */ } /* ============ 8. BOTÃO DOURADO ============ Estiliza tanto `.btn-primary` (usado no Bootstrap por padrão) quanto `.btn-gold` (classe custom). Ambas viram o mesmo botão. Destaques: • Gradiente 135° (clara variação de tom) • Texto preto em negrito (contraste alto) • Efeito "shine sweep" no hover: uma linha de luz branca atravessa o botão da esquerda pra direita • Eleva 2px + sombra dourada intensa no hover */ .btn-primary, .btn-gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%) !important; border: none !important; color: var(--bg-dark) !important; font-weight: 800 !important; letter-spacing: 1px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; /* esconde o efeito de luz que começa fora do botão */ z-index: 0; } /* Pseudo-elemento = linha de luz deslizante. */ .btn-primary::before, .btn-gold::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%); transform: translateX(-100%); /* começa escondida à esquerda */ transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; } .btn-primary:hover::before, .btn-gold:hover::before { transform: translateX(100%); /* sai pela direita */ } .btn-primary:hover, .btn-gold:hover { background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 100%) !important; /* inverte o gradiente */ color: var(--bg-dark) !important; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5) !important; } .btn-primary:active, .btn-gold:active { transform: translateY(0); } /* Estado desabilitado (usado no botão "ENTRAR" enquanto o login processa). */ .btn-gold:disabled { opacity: 0.7; cursor: not-allowed; transform: none !important; } .btn-gold:disabled::before { display: none; /* sem efeito de luz quando desabilitado */ } /* ============ 9. HALO PULSANTE (ANIMAÇÃO COMPARTILHADA) ============ Define APENAS a animação. Quem consome: - .logo-wrap no index.php (ao redor do logo principal) - .icon-circle no login.php (ao redor do favicon) Respira ciclicamente em 4 segundos: opacidade e escala variando. */ @keyframes haloPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.08); } } /* ============ 10. RIPPLE (ONDULAÇÃO DO CLIQUE) ============ Efeito de "ondinha" que emana do ponto onde o usuário clica no botão dourado. É adicionado dinamicamente via JavaScript (tema-dourado.js) — aqui só definimos o visual. A onda expande de 0 a 4x o tamanho e some em 0.6s. */ .btn-primary .ripple, .btn-gold .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transform: scale(0); animation: rippleExpand 0.6s linear; pointer-events: none; } @keyframes rippleExpand { to { transform: scale(4); opacity: 0; } } /* ============ 11. CURSOR DOURADO NOS INPUTS ============ O traço piscando quando digita em campos de formulário fica dourado (combinando com a marca) em vez do branco padrão. */ .login-card .form-control { caret-color: var(--gold) !important; } /* ============ 12. ESTADOS DE VALIDAÇÃO DE INPUT ============ Variantes visuais de borda para feedback em tempo real: .is-valid-gold → verde (dado correto, ex: email bem formado) .is-invalid-gold → vermelho (dado com problema óbvio) As classes são adicionadas/removidas via JavaScript enquanto o usuário digita. Sobrescrevem o foco dourado padrão. */ .login-card .form-control.is-valid-gold, .login-card .form-control.is-valid-gold:focus { border-color: #5cb85c !important; box-shadow: 0 0 0 0.2rem rgba(92, 184, 92, 0.2) !important; } .login-card .form-control.is-invalid-gold, .login-card .form-control.is-invalid-gold:focus { border-color: #dc3545 !important; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.2) !important; } /* ============ 13. ANIMAÇÃO DE SACUDIDA (SHAKE) ============ Chama atenção balançando o elemento lateralmente por 0.5s. Usada no card de login quando há mensagem de erro — dá feedback visual imediato de "algo deu errado, olha aqui". */ @keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } } .shake { animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97); }