/* ========================================================================== reset.css — reset + design tokens Paleta: b7aea5 / f77014 / e33c08 / 433d3d / 221d21 ========================================================================== */ :root { /* --- paleta base --- */ --areia: #b7aea5; --laranja: #f77014; --vermelho: #e33c08; --grafite: #433d3d; --preto: #221d21; /* --- papéis semânticos --- */ --bg: var(--preto); --bg-alt: #2b2529; --surface: var(--grafite); --surface-2: #514a4a; --texto: #f2ede9; --texto-suave: var(--areia); --texto-fraco: #8a827c; --acento: var(--laranja); --acento-2: var(--vermelho); --borda: rgba(183, 174, 165, 0.18); --borda-forte: rgba(183, 174, 165, 0.35); /* --- tipografia --- */ --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-titulo: "Sora", var(--font-base); /* --- layout --- */ --container: 1140px; --container-estreito: 760px; --header-h: 76px; --radius: 14px; --radius-sm: 8px; /* --- espaçamento --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 40px; --sp-6: 64px; --sp-7: 96px; /* --- sombras --- */ --sombra: 0 10px 40px rgba(0, 0, 0, 0.45); --sombra-sm: 0 4px 16px rgba(0, 0, 0, 0.35); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* NÃO usar scroll-behavior: smooth aqui. O GSAP (ScrollToPlugin) rola a página escrevendo a posição a cada quadro. Com o suavizador nativo ligado, o navegador aplica a PRÓPRIA suavização em cima de cada um desses quadros — a rolagem fica arrastada e continua deslizando depois que o tween já terminou. A suavidade vem do GSAP. */ scroll-behavior: auto; -webkit-text-size-adjust: 100%; /* a cor de fundo fica no html: o body precisa ser transparente para deixar aparecer o fundo animado, que é um elemento com z-index -1 */ background-color: var(--bg); } body { font-family: var(--font-base); background-color: transparent; color: var(--texto); line-height: 1.6; min-height: 100vh; /* NÃO declarar overflow-x aqui. Nem "hidden" nem "clip". No Safari, qualquer overflow não-visível no faz o navegador tratá-lo como um container de rolagem, e aí position: sticky dentro dele passa a se referenciar ao body em vez da janela — ou seja, para de grudar. Era isso que fazia a galeria do "sobre" continuar rolando e a foto sumir, só no Safari. O recorte não é mais necessário: quem podia transbordar na horizontal era a grade da galeria, e ela agora é limitada à largura da tela e recortada no próprio .galeria. Os elementos que ficam fora do enquadramento (painel do menu, retrato do início) são position: fixed e não aumentam a área rolável. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: var(--header-h); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-titulo); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; } img, video, svg, canvas { max-width: 100%; display: block; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--acento); color: var(--preto); } /* barra de rolagem */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--surface); border-radius: 10px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--surface-2); } /* acessibilidade: respeita quem pediu menos movimento */ @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; } }