/* * =========================================== * ESTILO JORGECHAN FRUTIGER AERO (WINDOWS VISTA - FINAL) * Foco: Aplicar o efeito Glass Verde-Ciano translúcido tanto no OP quanto nas Replies. * =========================================== */ :root { /* Cores Inspiradas no Wallpaper do Vista */ --vista-blue: #0080FF; --vista-cyan: #00FFFF; --vista-yellow: #FFFF66; --vista-green-highlight: #33CC33; /* Cores de Interface */ --vista-text-dark: #1A1A1A; --vista-glass-color: rgba(255, 255, 255, 0.3); /* VALOR FINAL DO VIDRO: Opacidade de 35% */ --vista-post-glass-final: rgba(100, 200, 200, 0.35); /* Efeitos Aero */ --aero-blur: blur(6px); --aero-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); --border-radius-aero: 10px; --spacing-unit: 20px; } /* --- 1. ESTILOS GLOBAIS (Fundo Gradiente de Vista) --- */ html, body { background: linear-gradient(180deg, var(--vista-blue) 0%, #00CCFF 30%, var(--vista-green-highlight) 80%, var(--vista-yellow) 100%); background-attachment: fixed; } /* --- 3. CONTAINER PRINCIPAL (Aero Glass Effect - Blur no container) --- */ .boardHeader, #divThreads, #postBox { /* O BLUR é aplicado aqui */ /* MUDANÇA CRÍTICA: background-color totalmente transparente para deixar o fundo do body visível */ background-color: transparent; backdrop-filter: var(--aero-blur); -webkit-backdrop-filter: var(--aero-blur); /* CORREÇÃO: Força composição da camada */ transform: translateZ(0); border-radius: var(--border-radius-aero); box-shadow: var(--aero-shadow); padding: var(--spacing-unit); margin: var(--spacing-unit) auto; max-width: 90%; } /* --- 5. THREADS E POSTS (OPCell e PostCell) --- */ /* OP POSTS (Fundo Verde/Ciano Glass) */ .opCell { /* USANDO O VALOR FINAL DO GLASS (0.35) */ background-color: var(--vista-post-glass-final); color: var(--vista-text-dark); /* Mantemos o blur sutilmente aqui também para garantir o efeito Aero */ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border: 2px solid rgba(0, 166, 213, 0.6); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); border-radius: var(--border-radius-aero); padding: var(--spacing-unit); margin-bottom: var(--spacing-unit); } /* REPLIES */ .divPosts { margin-left: var(--spacing-unit) * 2; border-left: 3px solid var(--vista-green-highlight); padding-left: var(--spacing-unit); } .postCell { /* CORREÇÃO: Aplica o valor de GLASS (0.35) nas replies */ background-color: var(--vista-post-glass-final); color: var(--vista-text-dark); /* Aplica o blur para garantir o efeito Aero Glass no postCell */ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); /* Força composição da camada para garantir visibilidade do fundo */ transform: translateZ(0); /* Borda sutil para separar posts */ border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 8px; padding: 10px; margin-top: 10px; } /* --- 6. CITAÇÕES E BOTÕES (GreenText, Links e Destaques) --- */ /* ... inalterado ... */ /* --- 7. LINKS --- */ /* ... inalterado ... */ /* --- 8. ESTILO AERO BUTTON (NOVO) --- */ /* Estilo Base do Botão Aero (extremamente realista) */ button:not(#formButton), input[type="button"], input[type="submit"][value] { /* Cores e Aparência Base */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(200, 220, 255, 0.6) 100%); border: 1px solid rgba(0, 128, 255, 0.8); color: var(--vista-text-dark); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); padding: 8px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; /* Efeito Sutil de Profundidade e Brilho Interno (Vista) */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), /* Brilho superior interno */ 0 1px 3px rgba(0, 0, 0, 0.2); /* Sombra externa suave */ /* Transições para o efeito de afundamento */ transition: transform 0.1s ease-out, box-shadow 0.1s ease-out; /* Efeito de Vidro Sutil */ backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* Estado Hover (leve levantamento e brilho) */ button:not(#formButton):hover, input[type="button"]:hover, input[type="submit"][value]:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(200, 220, 255, 0.7) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), /* Brilho superior interno mais forte */ 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra externa maior */ transform: translateY(-1px); } /* Estado Ativo/Clicado (Afundamento e Brilho Animado - Efeito Sonoro/Linhas) */ button:not(#formButton):active, input[type="button"]:active, input[type="submit"][value]:active { /* Afunda o botão */ transform: translateY(1px); /* Remove a sombra externa e inverte o brilho para simular afundamento */ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); /* A LÓGICA DO BRILHO/LINHAS (simulando som em forma de desenho) */ /* Criamos um brilho interno que simula linhas de energia/som */ background-image: /* 5 Linhas de 'Som' - Verde/Ciano/Azul */ radial-gradient(circle at 50% 50%, rgba(0, 255, 255, 0.4) 0%, transparent 10%), linear-gradient(90deg, transparent 0%, var(--vista-cyan) 5%, transparent 10%, var(--vista-green-highlight) 15%, transparent 20%, var(--vista-blue) 25%, transparent 30%), linear-gradient(-90deg, transparent 0%, var(--vista-cyan) 5%, transparent 10%, var(--vista-green-highlight) 15%, transparent 20%, var(--vista-blue) 25%, transparent 30%); background-color: var(--vista-post-glass-final); /* Fundo Glass quando ativo */ background-blend-mode: overlay; background-size: 200% 100%; /* Permite a animação da onda */ background-position: left; /* Animação para simular o 'som' se movendo */ animation: pulseWave 0.3s ease-out forwards; } /* Definição da Animação (Linhas Brilhantes) */ @keyframes pulseWave { 0% { background-position: left; opacity: 1; } 100% { background-position: right; opacity: 0.8; } }