/* * Cores Base: Roxo/Azul do Fundo, Roxo Escuro para Containers, Ultra Glossy para Botões. */ :root { /* Cores Dark/Roxo */ --main-bg-dark: #1e1b2e; /* Roxo escuro para o fundo principal (Fallback) */ --container-bg-dark: #2a2640; /* Roxo ligeiramente mais claro para cards/containers */ --purple-highlight: #7c4dff; /* Roxo vibrante para acentos e botões */ --purple-light-aero: #9575ff; /* Roxo claro e brilhante (Aero) */ --text-color-light: #e0e0e0; /* Texto claro */ --text-color-soft: #b0b0b0; /* Texto secundário */ /* Cores Frutiger Aero para 3D */ --aero-shadow-dark: 0 10px 25px rgba(0, 0, 0, 0.6); /* Sombra pesada 3D nos containers */ --aero-highlight-strong: rgba(255, 255, 255, 0.7); /* Brilho de Cima Forte */ --aero-inner-shadow-dark: rgba(0, 0, 0, 0.4); /* Sombra interna escura */ /* Espaçamentos e Bordas */ --border-radius-large: 12px; --border-radius-medium: 8px; --spacing-unit: 12px; } /* --- ESTILOS GLOBAIS (Fundo da Imagem) --- */ html, body { margin: 0; padding: 0; font-family: 'Segoe UI', Arial, sans-serif; line-height: 1.6; color: var(--text-color-light); background-color: #0d0c1b; /* Cor base escura da imagem */ background-image: url('fundo-futurista.jpg'); /* <<<< VOCÊ PRECISA MUDAR ESTA URL >>>> */ background-size: cover; background-attachment: fixed; /* Fixa o fundo enquanto o conteúdo rola */ background-position: center; } /* --- ELEMENTOS DE CONTAINER PRINCIPAL (Bordas Mais 3D) --- */ body > div#wrapper, body > div.main-container, body > .page-content, #content { max-width: 1000px; margin: 30px auto; padding: 20px; background-color: rgba(42, 38, 64, 0.9); /* Roxo dark semi-transparente para ver o fundo */ border-radius: var(--border-radius-large); /* 1. Borda Dupla (3D Forte) */ border: 3px solid rgba(255, 255, 255, 0.1); /* Borda interna clara (reflexo) */ outline: 1px solid rgba(0, 0, 0, 0.5); /* Borda externa escura (definição) */ /* 2. Sombra Ultra Profunda */ box-shadow: var(--aero-shadow-dark), /* Sombra externa principal */ 0 0 30px rgba(149, 117, 255, 0.2) inset; /* Brilho interno sutil (Glow) */ } /* --- HEADER / NAVEGAÇÃO (Ultra Glossy) --- */ .header, #header { /* Gradiente Roxo Forte para o Efeito Glossy */ background: linear-gradient(to bottom, var(--purple-light-aero) 0%, var(--purple-highlight) 100%); color: white; padding: var(--spacing-unit) calc(var(--spacing-unit) * 2); border-radius: var(--border-radius-large); margin-bottom: var(--spacing-unit) * 3; box-shadow: var(--aero-shadow-dark); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Borda 3D */ border: 3px solid rgba(255, 255, 255, 0.3); /* Borda mais grossa */ position: sticky; top: 0; z-index: 100; } /* --- POSTS / THREADS (Cards 3D) --- */ .post, .thread, .reply, .op-post, .reply-container { background-color: #3b3756; /* Borda Dupla 3D para posts */ border: 2px solid rgba(255, 255, 255, 0.08); outline: 1px solid rgba(0, 0, 0, 0.3); border-radius: var(--border-radius-large); padding: var(--spacing-unit) * 1.5; margin-bottom: var(--spacing-unit) * 2; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .post:hover, .thread:hover, .reply:hover { transform: translateY(-4px); /* Levanta ainda mais */ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7); /* Sombra mega intensa */ } /* --- BOTÕES (EXTREMAMENTE 3D / AERODYNAMIC) --- */ button, input[type="submit"], .button, .btn, .submit-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; font-size: 1em; font-weight: bold; color: white; /* GRADIENTE FORTE (Super Glossy) */ background: linear-gradient(to bottom, var(--purple-light-aero) 0%, var(--purple-highlight) 100%); /* Borda 3D Intensa */ border: 2px solid rgba(255, 255, 255, 0.6); /* Borda de brilho forte */ border-bottom: 3px solid #5a3f9e; /* Borda inferior mais escura e grossa */ border-radius: var(--border-radius-medium); cursor: pointer; text-decoration: none; /* SOMBRA 3D MÁXIMA */ box-shadow: 0 3px 0 var(--aero-highlight-strong) inset, /* Brilho de cima muito forte e grosso */ 0 -3px 0 var(--aero-inner-shadow-dark) inset, /* Sombra interna forte e grossa */ 0 15px 25px rgba(0, 0, 0, 0.5), /* Sombra externa de profundidade */ 0 3px 8px rgba(255, 255, 255, 0.2); /* Brilho leve ao redor do botão */ text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8); transition: all 0.2s ease; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Efeito de Clique/Hover (Pressiona o Botão) */ button:hover, input[type="submit"]:hover, .button:hover, .btn:hover, .submit-btn:hover { background: linear-gradient(to bottom, #a48aff 0%, #8b68ff 100%); box-shadow: 0 1px 0 var(--aero-highlight-strong) inset, 0 -1px 0 var(--aero-inner-shadow-dark) inset, 0 5px 10px rgba(0, 0, 0, 0.45); transform: translateY(3px); /* Desce 3px para simular um clique profundo */ } /* --- LINKS e Citações --- */ a { color: var(--purple-light-aero); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--purple-highlight); text-decoration: underline; } blockquote, pre { background-color: #3b3756; border-left: 5px solid var(--purple-highlight); padding: var(--spacing-unit); margin: var(--spacing-unit) 0; border-radius: var(--border-radius-medium); color: var(--text-color-soft); font-style: italic; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) inset; } /* --- FORMS / INPUTS (Dark Glass) --- */ input[type="text"], input[type="password"], input[type="email"], textarea, select { /* ... (manter estilo do input) ... */ width: calc(100% - 24px); padding: var(--spacing-unit); margin-bottom: var(--spacing-unit); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--border-radius-medium); background-color: rgba(255, 255, 255, 0.08); /* Ligeiramente mais claro para contraste */ color: var(--text-color-light); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset; transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit; font-size: 1em; } input[type="text"]:focus, textarea:focus { outline: none; border-color: var(--purple-light-aero); box-shadow: 0 0 0 4px rgba(149, 117, 255, 0.4); }