/* ========================================================================== base.css — variaveis, reset e tipografia Nada de layout aqui. Layout mora em layout.css, peca isolada em components.css. A divisao e para a aula: da para mostrar uma folha por vez sem rolar a tela procurando. ========================================================================== */ :root { /* --- cores ------------------------------------------------------------- Paleta escura e quente. Preto puro (#000) endurece a imagem e faz a foto parecer recortada; #100f0d tem um resto de marrom que casa com a madeira que aparece em quase todas as fotos da casa. */ --fundo: #100f0d; --fundo-alto: #1a1815; /* blocos que precisam se destacar do fundo */ --tinta: #f2efe9; /* branco quebrado, nao #fff: #fff vibra no escuro */ --tinta-fraca: #a49d92; --realce: #b99a5b; /* latao envelhecido */ --linha: rgba(242, 239, 233, 0.14); /* --- tipografia -------------------------------------------------------- Sem Google Fonts de proposito. Mesma razao de GSAP e Lenis estarem versionados: a aula precisa rodar sem internet. Georgia existe em Windows, macOS e Android; a pilha cobre o resto. */ --fonte-titulo: Georgia, "Times New Roman", "Noto Serif", serif; --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Escala fluida com clamp(minimo, ideal, maximo). O valor do meio usa vw, entao o texto acompanha a largura da janela sem media query. O minimo e o maximo evitam o extremo ridiculo dos dois lados. */ --t-gigante: clamp(3.5rem, 13vw, 8rem); /* teto baixado de 9,5rem: ver .hero__veu em layout.css */ --t-grande: clamp(2rem, 5vw, 3.5rem); --t-medio: clamp(1.15rem, 2vw, 1.4rem); --t-corpo: clamp(1rem, 1.2vw, 1.125rem); --t-miudo: 0.8125rem; /* --- ritmo -------------------------------------------------------------- */ --gutter: clamp(1.25rem, 5vw, 4rem); --largura-max: 1240px; /* Curva de saida usada em toda animacao CSS. A mesma ideia do power3.out do GSAP: comeca rapido e desacelera. Movimento que desacelera parece fisico; movimento linear parece de maquina. */ --curva: cubic-bezier(0.16, 1, 0.3, 1); } /* --- reset minimo -------------------------------------------------------- Nao e um reset completo de biblioteca. Sao as quatro linhas que resolvem 99% dos problemas e cabem numa explicacao. */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; } /* display:block mata o espaco fantasma embaixo da imagem (a e inline por padrao e reserva espaco para as "pernas" das letras, tipo o p e o g). */ img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } html { /* scroll-behavior fica FORA daqui de proposito. Quem faz a rolagem suave e o Lenis. Ligar os dois e pedir para o navegador e a biblioteca disputarem a mesma posicao de scroll. */ -webkit-text-size-adjust: 100%; } body { background: var(--fundo); color: var(--tinta); font-family: var(--fonte-texto); font-size: var(--t-corpo); line-height: 1.6; -webkit-font-smoothing: antialiased; /* overflow-x: clip em vez de hidden. hidden no cria um contexto de rolagem que quebra position: sticky mais adiante — e o tour inteiro depende de sticky. clip nao cria. */ overflow-x: clip; } h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 400; /* Georgia em peso normal ja e densa; bold vira bloco */ line-height: 1.05; text-wrap: balance; /* ignorado por navegador antigo, sem prejuizo */ } /* --- utilidades ---------------------------------------------------------- */ /* Visivel para leitor de tela, invisivel na tela. display:none nao serve: leitor de tela tambem pula. */ .sr-apenas { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pular-para-conteudo { position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 100; padding: 0.75rem 1.5rem; background: var(--tinta); color: var(--fundo); text-decoration: none; transition: transform 0.2s var(--curva); } .pular-para-conteudo:focus-visible { transform: translate(-50%, 0); } /* Foco visivel e obrigacao, nao enfeite. O padrao do navegador some no fundo escuro, entao redesenhamos — nunca outline: none sem substituto. */ :focus-visible { outline: 2px solid var(--realce); outline-offset: 3px; } /* --- prefers-reduced-motion ---------------------------------------------- Rede de seguranca global: qualquer animacao ou transicao que escapar vira praticamente instantanea. 0.01ms em vez de 0s porque duracao zero cancela o evento transitionend, e codigo que espera esse evento trava. As decisoes de verdade sobre movimento reduzido (o Lenis nao subir, o tour nao baixar frame nenhum) estao no JavaScript, em js/motion.js. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }