/* ================================================================\ CSS GLOBAL - APENAS O BÁSICO E MELHORES PRÁTICAS\ \ Conteúdo:\ - Variáveis CSS\ - Reset CSS\ - Scrollbar\ - Body e estrutura global\ - Botões padrão\ - Containers padrão\ - Margens por breakpoint\ - Margens específicas por seção\ - Layout de colunas com bordas destacadas\ ================================================================ */ /* ------------------------------------------------------------------------ */ /* @HD: ### Fontes ### */ /* ------------------------------------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap'); @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"); /* ------------------------------------------------------------------------ */ /* @HD: ### Reset CSS ### */ /* ------------------------------------------------------------------------ */ * { padding: 0; margin: 0; box-sizing: border-box; list-style: none; scroll-behavior: smooth; text-decoration: none; } /* Garantir que não haja texto riscado */ * { text-decoration-line: none !important; text-decoration-style: none !important; text-decoration-color: transparent !important; } /* Permitir underline apenas em links quando necessário */ a { text-decoration: underline; } a:hover { text-decoration: none; } /* ------------------------------------------------------------------------ */ /* @HD: ### Variáveis CSS Globais ### */ /* ------------------------------------------------------------------------ */ :root { /* Cores principais */ --text-color: #f5f5f5; --hover-color: #12f7ff; --bg-color: #0f062e; --secon-bg-color: #292e33; /* Tipografia */ --big-font: 2.5rem; --normal-font: 2rem; --h2-font: 3rem; /* Efeitos visuais */ --neon-box-shadow: 0 0 .5rem #22f7ff; --font-neon-text-shadow: 0 0 10px rgba(18, 247, 255, 0.3), 0 0 20px rgba(18, 247, 255, 0.3), 0 0 30px rgba(18, 247, 255, 0.3), 0 0 40px rgba(18, 247, 255, 0.3), 0 0 70px rgba(18, 247, 255, 0.3), 0 0 80px rgba(18, 247, 255, 0.3), 0 0 100px rgba(18, 247, 255, 0.3), 0 0 150px rgba(18, 247, 255, 0.3); /* Espaçamentos padronizados */ --espacamento-320px: 0.5rem; /* 8px */ --espacamento-480px: 1rem; /* 16px */ --espacamento-768px: 1.5rem; /* 24px */ --espacamento-992px: 2rem; /* 32px */ --espacamento-1200px: 3rem; /* 48px */ --espacamento-1400px: 4rem; /* 64px */ /* Breakpoints para uso em media queries */ --ponto-quebra-320px: 320px; --ponto-quebra-480px: 480px; --ponto-quebra-768px: 768px; --ponto-quebra-992px: 992px; --ponto-quebra-1200px: 1200px; --ponto-quebra-1400px: 1400px; /* Bordas e sombras */ --raio-borda-320px: 4px; --raio-borda-480px: 8px; --raio-borda-768px: 12px; --raio-borda-992px: 16px; --raio-borda-1200px: 20px; --raio-borda-1400px: 24px; /* Transições padrão */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; /* Z-index padrões */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; } /* ------------------------------------------------------------------------ */ /* @HD: ### Scrollbar ### */ /* ------------------------------------------------------------------------ */ ::-webkit-scrollbar { height: 0; width: .5rem; } ::-webkit-scrollbar-track { background: var(--secon-bg-color); } ::-webkit-scrollbar-thumb { background: var(--hover-color); border-radius: 5rem; } /* ------------------------------------------------------------------------ */ /* @HD: ### Body e Estrutura Global ### */ /* ------------------------------------------------------------------------ */ html, body { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; margin: 0 !important; padding: 0 !important; height: 100%; min-height: 100vh; } /* Garantir que o html tenha espaço para a barra de tarefas */ html { padding-bottom: 40px; min-height: calc(100vh - 40px); scroll-behavior: smooth; scroll-padding-top: 20px; /* Pequeno padding para compensar navbar */ } body { font-family: "Poppins", sans-serif !important; background-color: var(--bg-color) !important; color: var(--text-color) !important; position: relative; padding-bottom: 40px; min-height: calc(100vh - 40px); } /* ------------------------------------------------------------------------ */ /* @HD: ### Ajuste para Navbar Fixo ### */ /* ------------------------------------------------------------------------ */ .navbar-header { top: 0; left: 0; right: 0; z-index: var(--z-fixed); } /* ------------------------------------------------------------------------ */ /* @HD: ### Ajuste Especial para Primeira Seção ### */ /* ------------------------------------------------------------------------ */ /* Removido - movido para arquivo local da seção início */ /* ------------------------------------------------------------------------ */ /* @HD: ### Altura Mínima para Todas as Seções ### */ /* ------------------------------------------------------------------------ */ section { min-height: calc(100vh - 60px); display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; overflow: visible; position: relative; z-index: 1; scroll-margin-top: 50px; /* Pequeno margin para compensar navbar */ } /* ------------------------------------------------------------------------ */ /* @HD: ### Proteção para Containers Mobile ### */ /* ------------------------------------------------------------------------ */ /* Garantir que os containers mobile não sejam afetados pelo reset global */ .MOBILE_CONTAINER_SESSAO, .MOBILE_CONTAINER, .MOBILE_CONTAINER_COLUMN, .MOBILE_CONTAINER_ROW_01, .MOBILE_CONTAINER_ROW_02, .MOBILE_CONTAINER_ROW_03, .MOBILE_CONTAINER_ROW_04, .MOBILE_CONTAINER_ROW_05 { /* Reset não deve afetar os espaçamentos dos containers mobile */ /* Os espaçamentos são controlados pelas variáveis CSS do sistema de containers */ } /* Proteger seções mobile de regras globais de layout */ section.mobile_inicio, section.mobile_formacao, section.mobile_conhecimento, section.mobile_certificados, section.mobile_projetos, section.mobile_wiki { /* Permitir que os containers mobile controlem seu próprio layout */ justify-content: flex-start !important; align-items: flex-start !important; } /* Proteger margens dos containers mobile do reset global */ .MOBILE_CONTAINER_COLUMN { margin-top: var(--mobile-container-column-margem-topo, 10px) !important; margin-bottom: var(--mobile-container-column-margem-baixo, 10px) !important; margin-left: var(--mobile-container-column-margem-esquerda, 10px) !important; margin-right: var(--mobile-container-column-margem-direita, 10px) !important; } /* ------------------------------------------------------------------------ */ /* @HD: ### Altura Padrão para Seções com IDs (Início e Formação) ### */ /* ------------------------------------------------------------------------ */ /* section[id="inicio"] { min-height: calc(100vh - 80px); } section[id="formacao"] { min-height: calc(100vh - 80px); } */ /* ------------------------------------------------------------------------ */ /* @HD: ### Footer ### */ /* ------------------------------------------------------------------------ */ footer { position: relative; z-index: 100; background: var(--bg-color); border-top: 1px solid var(--hover-color); padding: var(--espacamento-992px); text-align: center; display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; box-sizing: border-box !important; margin-top: auto !important; /* margin-top: var(--espacamento-992px); */ /* margin-bottom: 40px; */ } footer p { margin-bottom: var(--espacamento-480px); } footer a { color: var(--hover-color); font-size: 1.5rem; transition: var(--transition-normal); } footer a:hover { color: var(--text-color); transform: translateY(-3px); }