/* /css/base.css */ /* * ================================================================= * ARQUIVO BASE DE ESTILOS * ================================================================= */ /* * 1. Variáveis CSS Globais (Tema Padrão: Claro) */ :root { --cor-primaria: #007bff; --cor-primaria-hover: #0056b3; --cor-fundo: #f4f7f9; --cor-surface: #ffffff; --cor-texto: #212529; --cor-texto-claro: #ffffff; --cor-borda: #dee2e6; --fonte-principal: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --raio-borda: 8px; } /* * 2. Estilos para a tag */ body { font-family: var(--fonte-principal); background-color: var(--cor-fundo); color: var(--cor-texto); margin: 0; line-height: 1.6; transition: background-color 0.3s, color 0.3s; background-image: linear-gradient(120deg, #f8f9fa 0%, #e9ecef 100%); background-attachment: fixed; } body[data-theme] { background-image: none; } /* * 3. Estrutura Principal do Layout (Flexbox) */ .site-container { display: flex; flex-direction: column; min-height: 100vh; /* Garante que o conteúdo fique na frente do canvas */ position: relative; z-index: 1; /* Necessário para que o fundo do body não cubra o canvas */ background-color: transparent; } /* * 4. Contêiner de Conteúdo Principal */ .site-content { flex: 1; padding: 0.1rem 2rem; max-width: 96%px; margin: 0 auto; width: 100%; box-sizing: border-box; } /* * 5. Estilos para o Canvas do Fundo de Partículas * ----------------------------------------------------------------- */ #particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; /* Coloca o canvas atrás de todo o conteúdo */ display: none; /* Começa escondido por padrão */ } /* Mostra o canvas apenas em temas escuros para melhor efeito visual */ body[data-theme="escuro"] #particle-canvas, body[data-theme="galaxia"] #particle-canvas, body[data-theme="vidro"] #particle-canvas, body[data-theme="fogo"] #particle-canvas { display: block; }