/* ========================================================================== MAGA MORGANA — Oráculos Autorais Identidade: preto profundo, vermelho sangue, dourado envelhecido, marfim. Editorial, oracular, sofisticado. Sem excessos góticos. ========================================================================== */ /* VARIÁVEIS CSS (CSS Custom Properties) O seletor :root representa o elemento mais "alto" do documento (na prática, equivale ao ). Declarar propriedades ali dentro faz com que elas fiquem disponíveis para TODO o site. Propriedades que começam com "--" não são propriedades CSS de verdade (como "color" ou "padding") — são VARIÁVEIS que nós mesmos criamos. Exemplo: --gold: #b6892f; Depois, em qualquer lugar do CSS, podemos usar: color: var(--gold); Isso é enorme para manutenção: se um dia a Maga Morgana quiser mudar o tom do dourado da marca, basta alterar o valor de --gold aqui em cima UMA vez, em vez de procurar e trocar a mesma cor espalhada em dezenas de seletores pelo arquivo inteiro. */ :root { /* Cores base — extraídas das artes de referência da marca */ --black-abs: #050403; --black: #0a0806; --black-soft: #120e0c; --wine: #2a0a0a; --red-deep: #6e1414; --red: #8f1c1f; --red-bright: #b5222c; --gold: #b6892f; --gold-light: #d7b567; --ivory: #ebe1cd; --ivory-dim: #c9bfa9; /* Tipografia — nomes das três famílias de fonte carregadas no */ --font-display: "Cinzel", serif; --font-serif: "Cormorant Garamond", serif; --font-body: "Lato", sans-serif; /* Espaçamento --section-pad usa clamp(), uma função explicada com detalhes mais abaixo, na primeira vez que ela aparece em um contexto de layout. Resumindo aqui: ela cria um valor "elástico", que cresce ou encolhe conforme o tamanho da tela, mas sem nunca passar dos limites definidos. */ --section-pad: clamp(4.5rem, 9vw, 8rem); --container-w: 1200px; --container-narrow: 780px; /* Efeitos --ease guarda uma "curva de aceleração" personalizada, usada em quase toda transição do site (troque para "ease" ou "linear" em qualquer transition e sinta a diferença) — é o que dá aquela sensação suave, "elegante", em vez de um movimento mecânico. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --radius-soft: 2px; } /* ---------- Reset ---------- Cada navegador vem com estilos padrão próprios para títulos, listas, links etc., o que causa pequenas inconsistências entre eles. Um "reset" zera essas diferenças, para o site começar do mesmo ponto de partida em qualquer navegador — depois disso, definimos nós mesmos cada espaçamento e comportamento, com controle total. */ /* box-sizing: border-box; Por padrão, o navegador soma padding e border a largura/altura que você define. Com border-box, padding e border passam a ficar DENTRO da largura/altura declarada — assim, um elemento com width: 200px continua com exatamente 200px de largura total, mesmo que ganhe um padding depois. Isso evita muita dor de cabeça calculando tamanhos manualmente. */ *, *::before, *::after { box-sizing: border-box; } /* scroll-behavior: smooth; Faz a página rolar suavemente até o destino quando clicamos em um link de âncora (href="#algum-id"), em vez de "pular" instantaneamente. */ html { scroll-behavior: smooth; } /* @media (prefers-reduced-motion: reduce) Alguns sistemas operacionais têm uma opção de acessibilidade para reduzir animações (útil para quem sente enjoo ou desconforto com movimento na tela). Esta media query detecta essa preferência e, quando ativa, praticamente elimina a duração de animações e transições no site inteiro — respeitando a escolha da pessoa, sem que ela precise configurar nada dentro do nosso site. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Remove a margem padrão que navegadores aplicam a esses elementos. */ body, h1, h2, h3, p, ul, ol, figure { margin: 0; } /* Listas (