/* ========================================================================== Base: reset, tipografia e utilitários de layout ========================================================================== */ /* -------------------------------- Reset --------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* * Base da escala tipográfica (todas as medidas em rem partem daqui). * * Em porcentagem, e não em px, para respeitar quem aumentou o tamanho da * fonte no navegador. Com a configuração padrão (16px): * desktop 112,5% = 18px * mobile 100% = 16px (bloco "Mobile compartilhado", abaixo) */ html { font-size: 112.5%; scroll-behavior: smooth; } body { font-family: 'Open Sans', sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--bg-1); } /* * Enquanto i18n.js aplica o idioma salvo de uma visita anterior, a página fica * invisível para o português não piscar. A classe é colocada por um script no * e sempre removida (no máximo em 2,5s, mesmo se o dicionário falhar). */ html.i18n-pending body { visibility: hidden; } /* Evita rolagem do fundo enquanto um modal está aberto. */ body.no-scroll { overflow: hidden; } img { max-width: 100%; display: block; } ul { list-style: none; } a { text-decoration: none; color: inherit; /* Todas as propriedades, como no CSS original: vários links animam cor, fundo e posição no hover sem declarar transição própria. */ transition: 0.3s; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } iframe { border: 0; } /* ------------------------------ Tipografia ------------------------------ */ h1, h2, h3, h4, .tagline { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--title-color); } p { margin: 10px 0; } /* * Chinês: Montserrat e Open Sans não têm ideogramas. Elas continuam na frente * para o texto latino (PampaFoods, números) e os ideogramas caem nas fontes * chinesas do sistema: PingFang (Apple), Microsoft YaHei (Windows) e * Noto Sans SC (Android e Linux). */ html:lang(zh) body { font-family: 'Open Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; } html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3, html:lang(zh) h4, html:lang(zh) .tagline, html:lang(zh) .site-footer { font-family: 'Montserrat', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; } /* A escrita chinesa não tem itálico; o navegador inclinaria os ideogramas. */ html:lang(zh) .hero-content p, html:lang(zh) .quote-box { font-style: normal; } /* Ideogramas quebram em qualquer caractere; equilibra as linhas do hero para não sobrar um caractere sozinho na última. */ html:lang(zh) .hero-content p { text-wrap: balance; } /* ------------------------------ Acessibilidade -------------------------- */ /* Link de pular navegação: só aparece ao receber foco pelo teclado. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: 12px 20px; background: var(--accent-color); color: var(--text-dark); font-weight: 600; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; } /* Conteúdo lido por leitores de tela, invisível na tela. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -------------------------------- Layout -------------------------------- */ .container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; } .section { padding: 80px 0; } .bg-2 { background-color: var(--bg-2); } .bg-3 { background-color: var(--bg-3); } .margin-top { margin-top: 25px; } /* --------------------------- Mobile compartilhado ----------------------- */ @media (max-width: 900px) { /* 16px: tamanho mínimo confortável para leitura no celular, e o que impede o iPhone de dar zoom ao tocar em um campo de formulário. */ html { font-size: 100%; } .container { max-width: var(--container-width-mobile); } .section { padding: 56px 0; } /* Quebra os títulos em linhas de tamanho parecido, sem palavra sozinha. */ h1, h2, h3 { text-wrap: balance; } }