/* ============================================================ BASE.CSS — Fundamentos globais do projeto Drone in Cena ------------------------------------------------------------ Este arquivo concentra os estilos básicos que afetam toda a aplicação: reset de propriedades nativas dos elementos, variáveis de cor (tokens de design), tipografia padrão do , comportamento de rolagem do e o overlay de "grain" cinematográfico aplicado em . ============================================================ */ /* ------------------------------------------------------------ 1) RESET UNIVERSAL Remove margens/padding herdados do user-agent e força o modelo de caixa border-box em todos os elementos. ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ------------------------------------------------------------ 2) DESIGN TOKENS (variáveis de cor) Centralizamos a paleta dourada/azul cinematográfica usada em todas as seções para facilitar manutenção e temas futuros. ------------------------------------------------------------ */ :root { --black: #06080a; /* fundo principal */ --dark: #0b0d10; /* fundos secundários (services, shop, about) */ --panel: #10131a; /* cards / painéis */ --gold: #c8840a; /* dourado base */ --gold2: #f0a820; /* dourado destaque */ --goldlight: #ffd060; /* dourado claro (hover) */ --navy: #1a2860; /* azul marinho (gradientes) */ --navy2: #263ba0; /* azul brilho (gradientes) */ --white: #f5f0e8; /* off-white para textos */ --muted: rgba(245,240,232,0.4); /* cinza translúcido */ --border: rgba(200,132,10,0.18); /* borda dourada sutil */ } /* ------------------------------------------------------------ 3) HTML / BODY Habilita scroll suave para âncoras e define o tipo padrão do projeto (Cormorant Garamond serif). O cursor padrão é removido pois usamos um cursor customizado (ver components.css). ------------------------------------------------------------ */ html { scroll-behavior: smooth; } body { background: var(--black); color: var(--white); font-family: 'Cormorant Garamond', serif; font-weight: 300; overflow-x: hidden; cursor: none; /* cursor nativo escondido — substituído por #cur */ } /* ------------------------------------------------------------ 4) GRAIN OVERLAY Cria uma camada de ruído SVG sobreposta a tudo (z-index alto, pointer-events none). Dá ao site a textura "cinema analógico" sem precisar carregar uma imagem externa. ------------------------------------------------------------ */ body::before { content: ""; position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; }