/* ============================================================ Genius Technology — folha de estilo compartilhada Uma só para todas as páginas. Antes o CSS vivia dentro do index.html; com o site em várias páginas, inline significaria seis cópias divergindo entre si. ============================================================ */ /* ───────────────────────────────────────────── RESET Remove margens e paddings padrão do navegador ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ───────────────────────────────────────────── VARIÁVEIS GLOBAIS Altere aqui para mudar cores e velocidades em todo o site de uma vez ───────────────────────────────────────────── */ :root { /* Fundos — do mais escuro ao mais claro */ --bg: #020B18; --bg2: #031023; --bg3: #051731; --bg4: #0C274D; /* Azul aço — cor de destaque da marca Genius */ --blue: #DA6F10; --blue2: #BE5F0A; --blue-glow: rgba(218, 111, 16, 0.10); --blue-line: rgba(218, 111, 16, 0.22); /* Textos */ --white: #F2F1EC; /* texto principal */ --white2: #C9C7BA; /* texto secundário */ --muted: #A4A08E; /* texto de apoio */ /* Bordas */ --border: rgba(242, 241, 236, 0.075); --border-h: rgba(218, 111, 16, 0.30); /* Utilitários */ --r: 10px; /* raio de borda padrão */ --r2: 16px; /* raio de borda maior (cards grandes) */ --t: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* transição padrão */ } /* ───────────────────────────────────────────── BASE Estilos globais do documento ───────────────────────────────────────────── */ html { scroll-behavior: smooth; /* rolagem suave ao clicar em âncoras */ /* A barra do topo é fixa: sem esta folga, uma âncora para com o cabeçalho da seção escondido atrás dela. Vale para links vindos de outra página (/#procura) e para os do próprio menu. */ scroll-padding-top: 110px; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); /* cor base sólida — fica atrás do canvas */ color: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; line-height: 1.65; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ───────────────────────────────────────────── ACESSIBILIDADE Link invisível para pular direto ao conteúdo (aparece apenas ao navegar com teclado) ───────────────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: 16px; background: var(--blue); color: #fff; padding: 8px 16px; border-radius: 6px; z-index: 9999; font-size: 0.85rem; font-weight: 600; } .skip-link:focus { top: 16px; } /* Destaque de foco visível para navegação por teclado */ *:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; } *:focus:not(:focus-visible) { outline: none; } /* ───────────────────────────────────────────── CANVAS DE FUNDO — Rede de pontos interativa O canvas fica fixo atrás de tudo. O JS anima os pontos e reage ao mouse. Nav, main e footer ficam acima com z-index:1 ───────────────────────────────────────────── */ #canvas-rede { position: fixed; inset: 0; pointer-events: none; /* não interfere nos cliques */ z-index: 0; } nav, main, footer { position: relative; z-index: 1; /* garante que o conteúdo fique acima do canvas */ } /* ───────────────────────────────────────────── NAVEGAÇÃO — Menu fixo no topo ───────────────────────────────────────────── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; /* A borda existe desde sempre, transparente. Se ela só nascesse no .scrolled, a transição animaria a largura de 0 para 1px partindo da cor padrão — que é `currentColor`, o creme do texto — e piscava uma linha clara embaixo do cabeçalho a cada rolagem. */ border-bottom: 1px solid transparent; /* Propriedades nomeadas em vez de `all`: `all` também animava o backdrop-filter, que borra a tela inteira enquanto interpola. */ transition: background var(--t), border-color var(--t); } /* Fundo fosco aparece ao rolar a página */ /* O fundo vai na