/* ============================================================ BG5 COMPANY — RESET E BASE TIPOGRÁFICA ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* Trava do eixo horizontal. Precisa estar no também, não só no : com a regra apenas no body, o bloco contentor inicial continuava mais largo que a tela no mobile, o que deixava a página arrastável para o lado e fazia o header e o menu (ambos position: fixed) nascerem com a largura errada — menu aberto aparecia vazio porque o texto ficava fora da área visível. `clip` em vez de `hidden` de propósito: `hidden` transforma a raiz em contêiner de rolagem e quebra os `position: sticky` da página (cabeçalho da tabela, coluna de atributos, aside do método). `clip` não cria contêiner. O `hidden` fica antes como reserva para navegadores sem suporte a `clip`. */ html { max-width: 100%; overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--h-header) + var(--sp-5)); } body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol, fieldset, legend { margin: 0; padding: 0; } ul[class], ol[class] { list-style: none; } body { min-height: 100svh; max-width: 100%; overflow-x: hidden; overflow-x: clip; background-color: var(--c-void); color: var(--c-mist); font-family: var(--f-sans); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body); font-feature-settings: "kern" 1, "liga" 1, "cv05" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Textura de fundo: grão sutil + brilho azul no topo. Fixo e sem custo de repaint — não anima. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1200px 620px at 50% -12%, rgba(47, 107, 168, 0.16), transparent 68%), radial-gradient(900px 500px at 88% 8%, rgba(201, 169, 97, 0.05), transparent 60%); } img, picture, svg, video { display: block; max-width: 100%; } img, video { height: auto; } svg { fill: currentColor; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; cursor: pointer; } /* ---------- Títulos ---------- */ h1, h2, h3, h4 { color: var(--c-ice); font-family: var(--f-display); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); } h4 { font-family: var(--f-sans); font-size: var(--fs-h4); font-weight: 600; letter-spacing: 0; line-height: 1.4; } p { text-wrap: pretty; } strong, b { color: var(--c-ice); font-weight: 600; } /* Ênfase dourada — o gesto tipográfico das artes do Instagram */ .gold { color: var(--c-gold); } .ice { color: var(--c-ice); } em.gold, .gold em { font-style: italic; } /* ---------- Links ---------- */ a { color: inherit; text-decoration: none; transition: color var(--dur-1) var(--ease); } .link-inline { color: var(--c-gold); text-decoration: underline; text-decoration-color: var(--c-line-gold); text-underline-offset: 4px; text-decoration-thickness: 1px; } .link-inline:hover { text-decoration-color: var(--c-gold); } /* ---------- Foco visível (acessibilidade) ---------- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: var(--r-xs); } /* ---------- Seleção ---------- */ ::selection { background: rgba(201, 169, 97, 0.3); color: var(--c-ice); } /* ---------- Barra de rolagem (WebKit) ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--c-void); } ::-webkit-scrollbar-thumb { background: var(--c-navy-soft); border: 3px solid var(--c-void); border-radius: var(--r-full); } ::-webkit-scrollbar-thumb:hover { background: var(--c-gold-lo); } /* ---------- Utilitários ---------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: var(--z-top); padding: var(--sp-3) var(--sp-5); background: var(--c-gold); color: var(--c-void); font-size: var(--fs-sm); font-weight: 600; border-radius: var(--r-sm); transform: translateY(-160%); transition: transform var(--dur-2) var(--ease-expo); } .skip-link:focus-visible { transform: translateY(0); } .no-scroll { overflow: hidden; } /* ---------- Preferência por menos movimento ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }