/* ========================================================================== 02 — BASE Reset, elementos nus e tipografia raiz. Sem classes de componente aqui. ========================================================================== */ /* ========================================================================== FONTE DISPLAY, AUTO-HOSPEDADA Clash Display, da Indian Type Foundry, sob a ITF Free Font License: uso comercial liberado. Os arquivos estão em assets/fonts/ e não em CDN de terceiro, por três motivos: tira um round-trip do caminho crítico da primeira dobra, não depende de um domínio que não é nosso para o título da página aparecer, e não vaza visita para lugar nenhum. Só três pesos. Cada peso é um arquivo que a pessoa baixa, e a página usa 500 na assinatura, 600 em título de seção e 700 na manchete. Um quarto peso seria 15 KB para uma diferença que ninguém vê. swap e não optional: a manchete é o conteúdo mais importante da página, e vale mais ela trocar de fonte na frente da pessoa do que ficar a visita inteira na fonte de reserva. Cobertura verificada para português: os 28 diacríticos, o cifrão, as aspas curvas, o travessão e o ponto médio estão todos no arquivo. ========================================================================== */ @font-face{ font-family:'Clash Display'; src:url('../../assets/fonts/clash-display-500.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap; } @font-face{ font-family:'Clash Display'; src:url('../../assets/fonts/clash-display-600.woff2') format('woff2'); font-weight:600;font-style:normal;font-display:swap; } @font-face{ font-family:'Clash Display'; src:url('../../assets/fonts/clash-display-700.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:swap; } *{box-sizing:border-box;margin:0;padding:0} /* Rolagem suave nativa, para quando o Lenis não estiver de pé: sem JS, com a biblioteca fora do ar, ou sob prefers-reduced-motion, onde o rolagem.js desiste de propósito. É o piso, não o acabamento. */ html{scroll-behavior:smooth} /* ---------- o que o Lenis precisa do CSS ---------- A biblioteca põe estas classes em sozinha; as regras é que têm de existir. Normalmente vêm do lenis.css, que seriam mais 1 KB e um segundo pedido de rede para cinco linhas. scroll-behavior:auto é a mais importante. Com a suavização nativa ligada ao mesmo tempo que a do Lenis, as duas disputam a mesma rolagem: a página ganha um repique no fim de cada âncora clicada, como se batesse e voltasse. Quem manda na rolagem tem de ser um só. */ html.lenis, html.lenis body{height:auto} /* html.lenis e não .lenis-smooth. O lenis.css oficial pendura esta regra em .lenis-smooth, mas nesta versão da biblioteca essa classe só existe DURANTE uma rolagem em curso: medido no navegador, em repouso o fica só com "lenis", e vira "lenis lenis-scrolling lenis-smooth" enquanto anda. Preso ali, o conserto só valeria depois de o conflito já ter começado. html.lenis está no elemento o tempo todo em que a biblioteca está no comando, que é exatamente a condição que a regra quer descrever. */ html.lenis{scroll-behavior:auto} html.lenis-stopped{overflow:hidden} /* elemento com rolagem própria dentro da página não pode passar o resto do embalo para o documento quando chega ao fim */ html.lenis [data-lenis-prevent]{overscroll-behavior:contain} body{ font-family:var(--ff-corpo); font-size:var(--fs-corpo); background:var(--black); color:var(--ink); overflow-x:hidden; line-height:var(--lh-corpo); -webkit-font-smoothing:antialiased; /* Números de mesma largura no corpo do texto. A página é cheia de valor medido (R$ 1,27, 6.820, 4,30%), e algarismo de largura variável faz coluna de número parecer desalinhada mesmo quando está certa. */ font-variant-numeric:tabular-nums; } ::selection{background:rgba(212,175,55,.28);color:#fff} /* Entreletras negativo é o que faz título grande parecer título e não texto ampliado. Só que ele aperta também o espaço ENTRE palavras, e tanto a Sora quanto a Clash Display entregam um espaço curto de fábrica. Somando as duas coisas, em "Perguntas Frequentes" o F encostava no s e as duas palavras liam como uma só. O word-spacing devolve o que o letter-spacing tirou e mais um pouco. Fica aqui, na regra base, porque a causa é a mesma em todo título do site, e não uma correção de uma página. Vale para o conteúdo inteiro do título: word-spacing é herdado, então alcança também as palavras que o reveal.js separa em spans. */ h1,h2,h3,.display{font-family:var(--ff-display);font-weight:700; line-height:var(--lh-display); letter-spacing:var(--ls-display);word-spacing:var(--ws-display)} /* ---------- texto corrido na fonte display ---------- Frase de efeito, citação, bordão, número de manchete: coisas que não são título mas usam a display mesmo assim. Elas precisam do mesmo --ws-display que o título, e por um motivo pior: parágrafo tem muito mais espaços por linha que uma manchete de cinco palavras, então o aperto aparece em toda linha em vez de uma vez só. Sem isto, em "Não mostramos números para impressionar" as palavras encostavam e a frase lia como uma palavra comprida. A lista é o preço de não poder perguntar ao CSS qual fonte um elemento acabou usando. Quem acrescentar um elemento com --ff-display acrescenta o seletor aqui: é a mesma disciplina que os tokens de camada já pedem. :where() para a regra entrar com especificidade zero e não ganhar de ninguém: ela é um conserto de fonte, não uma decisão de estilo, e cada seção continua dona do seu próprio entreletras. */ :where( .hero-num b, .prova-num, .prova-fecho p, .problema-virada, .problema-cadeia b, .posic-nos strong, .posic-assinatura, .sobre-ritmo, .sobre-num b, .bloco-destaque p, .grafico-numero, .rodape-marca .tagline, .resumo-item b, .case-numero, .faq-fecho p, .erro-codigo, .manifesto .fecho, .depoimento-texto blockquote, .artigo-cta p ){word-spacing:var(--ws-display)} /* h3 é título de card, não manchete: entrelinha e aperto de título, não de display, senão as duas linhas de "Posicionamento" colam uma na outra. */ h3{font-size:var(--fs-titulo);line-height:var(--lh-titulo); letter-spacing:var(--ls-titulo)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* foco visível para navegação por teclado (a11y) */ :focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px} /* pula direto pro conteúdo — só aparece ao dar Tab */ .skip-link{position:absolute;left:-9999px;top:0;z-index:100; background:var(--gold);color:#1a1405;padding:12px 20px;border-radius:0 0 var(--r-sm) 0; font-weight:600;font-family:'Sora',sans-serif} .skip-link:focus{left:0} /* leitor de tela apenas */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}