/* * Fontes auto-hospedadas — Instituto Comute * Fraunces (display/heading) + Inter (corpo). Nunca link de CDN (ver DESIGN.md § Typography). * Subset latin (cobre PT-BR) — arquivos em assets/fonts/. */ @font-face { font-family: 'Fraunces Comute'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/fraunces-600.woff2') format('woff2'); } @font-face { font-family: 'Fraunces Comute'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/fraunces-700.woff2') format('woff2'); } @font-face { font-family: 'Inter Comute'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); } @font-face { font-family: 'Inter Comute'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.woff2') format('woff2'); } @font-face { font-family: 'Inter Comute'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); } body { font-family: var(--cc-font-body); color: var(--cc-ink); } /* * O Astra envolve o conteúdo em containers próprios (#page, .site-content, * .ast-container) que costumam já vir com um background branco fixo do tema * pai — sem repetir o token nesses seletores, o fundo creme do body nunca * fica visível por trás deles. */ body, #page, .site-content, .ast-container, .site-footer, .site-below-footer-wrap, .ast-mobile-header-content, .ast-desktop-header-content, .ast-primary-header-bar { background-color: var(--cc-bg) !important; } /* * Camada de identidade (cor de texto/link) — o Astra gera CSS próprio (às * vezes estático, às vezes inline no via Customizer) pra vários * elementos com cores fixas pensadas pro tema claro dele: h1-h6 (#808285), * o nome do site (`.site-title a`, cor escura fixa) e o item de menu ativo * (`.current-menu-item > .menu-link`, azul do tema). Nenhuma dessas respeita * `prefers-color-scheme` nem os nossos tokens. Como não é viável prever ou * listar todo seletor que o Astra pode gerar, os resets abaixo usam * `!important` de propósito — é a única forma confiável de garantir que a * nossa identidade visual vença, independente de qual regra do Astra * aparece por último no HTML. */ h1, h2, h3, h4 { font-family: var(--cc-font-display); font-weight: 700; color: var(--cc-ink) !important; text-wrap: balance; } .site-title a, .site-title a:hover, .site-title a:focus, .site-title a:visited { color: var(--cc-ink) !important; } /* * Largura de leitura confortável (~65 caracteres, DESIGN.md § Typography) * pro corpo de texto de páginas/posts — sem isso, o parágrafo estica até a * borda do container e fica difícil de ler em telas largas. */ .entry-content > p, .entry-content > ul, .entry-content > ol, .entry-content > h2, .entry-content > h3, .entry-content > h4 { max-width: 65ch; } /* * Reset de cor de link no nível base — sem isso, o navegador aplica sua cor * padrão (azul/roxo) em links ainda não estilizados por um componente * específico, como aconteceu com um item de menu recém-visitado. */ a { color: var(--cc-ink) !important; text-decoration: none; } a:hover, a:focus { color: var(--cc-accent-strong) !important; } /* .cc-btn-primary/.cc-btn-secondary definem a própria cor (components.css) — como não são links "de texto" na prática, o reset acima não deveria competir com eles, mas por segurança contra o !important, reforçamos aqui. */ .cc-btn-primary, .cc-btn-primary:hover, .cc-btn-primary:focus { color: var(--cc-on-accent) !important; } .cc-btn-secondary, .cc-btn-secondary:hover, .cc-btn-secondary:focus { color: var(--cc-primary) !important; }