/* base.css — reset, tipografia e primitivas de layout. * Não conhece nenhuma marca: só consome os tokens. */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--superficie); color: var(--texto); font-family: var(--fonte-texto); font-size: var(--t-md); line-height: var(--linha-texto); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, video, svg { display: block; max-width: 100%; } /* `height: auto` não é enfeite de reset: sem ele, o atributo height="" do * HTML — que a gente põe justamente pra evitar salto de layout — vira uma * altura fixa em px e ANULA qualquer aspect-ratio do CSS. A foto estica, * o recorte engole o assunto e a página cresce metros. Já quebrou uma vez. */ img, video { height: auto; } button, input, textarea, select { font: inherit; color: inherit; } h1, h2, h3 { font-family: var(--fonte-display); font-weight: var(--peso-display); line-height: var(--linha-titulo); letter-spacing: var(--entreletras-display); text-wrap: balance; } h1 { font-size: var(--t-3xl); } h2 { font-size: var(--t-2xl); } h3 { font-size: var(--t-xl); } p { text-wrap: pretty; } a { color: var(--acento-forte); text-underline-offset: 0.18em; } /* Foco visível em tudo que recebe teclado. Não remover: metade das * apresentações acontece com o notebook ligado numa TV e alguém tabulando. */ :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; } /* ---- primitivas de layout ------------------------------------------- */ .envolve { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem-lateral); } .envolve--estreito { max-width: var(--largura-estreita); } .secao { padding-block: var(--e-8); } .secao--faixa { background: var(--superficie-2); } /* pilha vertical com espaçamento uniforme */ .pilha { display: flex; flex-direction: column; gap: var(--e-4); } .pilha--g { gap: var(--e-6); } .centro { text-align: center; } .suave { color: var(--texto-suave); } .sobretitulo { font-family: var(--fonte-texto); font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); } .so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---- botões ---------------------------------------------------------- */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); padding: var(--e-3) var(--e-5); min-height: 46px; /* alvo de toque confortável */ border: 1px solid transparent; border-radius: var(--raio-pilula); font-weight: var(--peso-forte); text-decoration: none; cursor: pointer; transition: transform var(--transicao), background var(--transicao), box-shadow var(--transicao); } .botao:hover { transform: translateY(-1px); } .botao:active { transform: translateY(0); } /* Uma por tela. Ver CONVERSAO.md. */ .botao--primario { background: var(--acento); color: var(--sobre-acento); box-shadow: var(--sombra); } .botao--primario:hover { background: var(--acento-forte); box-shadow: var(--sombra-g); } .botao--fantasma { background: transparent; color: var(--texto); border-color: var(--borda); } .botao--fantasma:hover { background: var(--superficie-3); } /* ---- revelação ao rolar --------------------------------------------- * Só ativa se o JS marcar . Sem JS, tudo nasce visível. */ .js .revela { opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 500ms ease; } .js .revela.visivel { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .revela { opacity: 1; transform: none; transition: none; } }