/* Identidade das páginas públicas. * * Documento estático não passa pelo Tailwind: estas páginas existem fora do * bundle do aplicativo justamente para entregar HTML pronto ao buscador, sem * depender de JavaScript. A consequência é que a identidade precisa ser * reescrita à mão aqui, e a primeira versão errou nisso: nasceu com paleta * aproximada, sem a malha de fundo, sem a logo, sem os ícones e com fonte de * sistema. Parecia outro produto. * * Os valores abaixo saem de `tailwind.config.js` e de `src/index.css`, um a um. * Quando um token mudar lá, muda aqui. * * O tema segue o mesmo mecanismo do aplicativo: /theme-boot.js lê * localStorage.theme e põe `.dark` no antes de o CSS pintar. Escuro é o * padrão, como no app. */ /* A Inter volta, agora recortada. * * Ela tinha sido removida por peso: `Inter-Variable.ttf` tem 877 kB, TTF não * comprime como WOFF2 e o arquivo pesava sessenta e sete vezes o HTML da * página. Tirar resolveu o desempenho e custou a identidade, que é o oposto do * que se queria. * * O recorte resolve os dois: eixo de peso limitado a 400-700, alfabeto latino * mais a pontuação e os símbolos que estas páginas usam, saída em WOFF2. Dá * 71 kB num arquivo só, servido uma vez e reaproveitado nas onze páginas. Com * `font-display: swap` o texto pinta na hora com a pilha do sistema e troca * quando a fonte chega, então nada fica invisível esperando. */ @font-face { font-family: 'Inter g.geotools'; src: url('/fonts/Inter-Latin-400-700.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } /* A face do wordmark é outra coisa: 1,6 kB com os 11 glifos da marca. Não serve para texto corrido, e é assim que o aplicativo a trata. */ @font-face { font-family: 'Space Grotesk Wordmark'; src: url('/fonts/SpaceGrotesk-Wordmark.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ------------------------------------------------------------ paleta -- */ :root { /* Tokens de marca, amostrados da logo (ver DESIGN.md). */ --navy: #0f2246; --navy-700: #204894; --teal: #1a6073; --teal-400: #51bbd8; --brand-400: #818cf8; --brand-600: #4f46e5; --brand-700: #4338ca; /* Neutros, os mesmos slate do Tailwind que o aplicativo usa. */ --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-800: #1e293b; /* Papéis, tema claro. */ --fundo: #ffffff; --fundo-cartao: #ffffff; --fundo-chip: #f1f5f9; --fundo-chip-cartao: #f8fafc; --borda: #e2e8f0; --texto: #475569; --texto-forte: #1e293b; --texto-fraco: #64748b; --acao: #0f2246; --acao-hover: #204894; --acento: #1a6073; --malha: rgba(15, 23, 42, 0.05); } .dark { --fundo: #020617; --fundo-cartao: #0f172a; --fundo-chip: #f1f5f9; --fundo-chip-cartao: #020617; --borda: #1e293b; --texto: #94a3b8; --texto-forte: #f1f5f9; --texto-fraco: #94a3b8; --acao: #4f46e5; --acao-hover: #4338ca; /* Teal 400 no escuro, como no aplicativo: o teal cheio some no fundo. */ --acento: #51bbd8; --malha: rgba(241, 245, 249, 0.05); } * { box-sizing: border-box; } /* A malha de 32 px é assinatura da casa e vem de `.bg-grid` do aplicativo, com os mesmos dois gradientes e as mesmas opacidades por tema. */ body { margin: 0; background-color: var(--fundo); background-image: linear-gradient(to right, var(--malha) 1px, transparent 1px), linear-gradient(to bottom, var(--malha) 1px, transparent 1px); background-size: 32px 32px; color: var(--texto); font-family: 'Inter g.geotools', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; } .faixa { max-width: 48rem; margin: 0 auto; padding: 0 1rem; } /* ------------------------------------------------------------ cabeçalho -- */ .topo { border-bottom: 1px solid var(--borda); background: var(--fundo); } .topo .faixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 1rem; padding-bottom: 1rem; } .marca { display: flex; flex: none; align-items: center; gap: 0.55rem; text-decoration: none; min-width: 0; } /* Mesmo ícone e enquadramento do BrandMark do aplicativo. */ .marca-simbolo { width: 2.25rem; height: 2.25rem; flex: none; display: block; overflow: hidden; border-radius: 0.5rem; background: var(--slate-100); } .marca-simbolo img { width: 100%; height: 100%; display: block; object-fit: contain; transform: scale(1.5); } /* Wordmark em texto, como no aplicativo: a fonte esta recortada nos 11 glifos de "g.geotools" e pesa 1,6 kB. O ponto verde vem do crosshair da logo, e no tema claro precisa de um verde mais fechado para manter contraste. */ .marca-nome { font-family: 'Space Grotesk Wordmark', system-ui, sans-serif; font-weight: 700; font-size: 1.12rem; line-height: 1; letter-spacing: -0.02em; color: var(--navy); } .dark .marca-nome { color: #f8fafc; } .marca-ponto { color: #1a8f78; } .dark .marca-ponto { color: #53d5b1; } .topo nav { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; flex: none; } .topo nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--texto-fraco); text-decoration: none; } .topo nav a:hover { color: var(--texto-forte); } /* ---------------------------------------------------------------- texto -- */ main { padding: 2.75rem 0 3rem; } /* Chapéu em monoespaçada, caixa alta e entreletra larga, na cor de acento. É exatamente o tratamento que o aplicativo dá à categoria do produto, e o texto também é o mesmo: a categoria vem do catálogo em content/products.ts, para que a mesma ferramenta se chame da mesma coisa nos dois lugares. */ .chapeu { display: flex; align-items: center; gap: 0.5rem; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acento); margin: 0 0 0.7rem; } .chapeu svg { width: 1.05rem; height: 1.05rem; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Nome de produto não passa por caixa alta: `PPKg.geotag` vira `PPKG.GEOTAG`, que é outra marca. A alternância de caixa é parte da identidade. */ .chapeu .produto { text-transform: none; letter-spacing: 0.02em; color: var(--texto-forte); font-weight: 600; } .chapeu .produto::before { content: '·'; margin-right: 0.5rem; color: var(--texto-fraco); } h1 { font-size: clamp(1.6rem, 4.5vw, 1.95rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; color: var(--texto-forte); margin: 0 0 1rem; text-wrap: balance; } .resumo { font-size: 1.05rem; line-height: 1.7; color: var(--texto-fraco); margin: 0 0 2rem; } h2 { font-size: 1.3rem; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; color: var(--texto-forte); margin: 2.75rem 0 0.8rem; text-wrap: balance; } h3 { font-size: 1.03rem; font-weight: 650; color: var(--texto-forte); margin: 1.8rem 0 0.5rem; } p { margin: 0 0 1.05rem; } ul, ol { margin: 0 0 1.05rem; padding-left: 1.3rem; } li { margin-bottom: 0.5rem; } a { color: var(--acento); text-underline-offset: 0.2em; } a:hover { color: var(--texto-forte); } strong { color: var(--texto-forte); font-weight: 650; } code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.88em; background: var(--fundo-chip); border: 1px solid var(--borda); border-radius: 0.375rem; padding: 0.08rem 0.34rem; } .dark code { background: #1e293b; } :focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; border-radius: 0.25rem; } .dark :focus-visible { outline-color: var(--brand-400); } /* --------------------------------------------------------------- blocos -- */ /* Cartão com a mesma geometria de `.card` do aplicativo: canto de 1rem, borda de um pixel, sem sombra. Chapado por padrão, como manda o DESIGN.md. */ .aviso { border: 1px solid var(--borda); border-left: 3px solid var(--acento); background: var(--fundo-cartao); border-radius: 0 1rem 1rem 0; padding: 1.1rem 1.25rem; margin: 1.6rem 0; font-size: 0.95rem; } .aviso p:last-child { margin-bottom: 0; } .aviso strong { display: block; margin-bottom: 0.3rem; } .tabela-rolagem { overflow-x: auto; margin: 1.3rem 0; border: 1px solid var(--borda); border-radius: 1rem; background: var(--fundo-cartao); } table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 0.92rem; } th, td { border-bottom: 1px solid var(--borda); padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; } tr:last-child td { border-bottom: 0; } th { color: var(--texto-forte); font-weight: 650; font-size: 0.85rem; } /* Botão primário: navy no claro, indigo no escuro, canto de 0,75rem. Mesmos valores de `.btn-primary`. A Regra do Indigo Preservado vale aqui também. */ .acao { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; padding: 0.65rem 1.25rem; border-radius: 0.75rem; background: var(--acao); color: #ffffff; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: background-color 0.15s; } .acao:hover { background: var(--acao-hover); color: #ffffff; } /* Mesma peça, medida de cabeçalho. * * O seletor precisa incluir `.topo nav` porque a regra de link do cabeçalho * (`.topo nav a`, duas etiquetas e uma classe) vence `.acao` sozinha e pintava * o texto do botão de slate sobre indigo. Deu 2,45:1 e reprovou no Lighthouse. * Colisão de cascata não avisa: o botão continua parecendo um botão. */ .topo nav a.acao { margin-top: 0; padding: 0.4rem 0.85rem; font-size: 0.85rem; color: #ffffff; } .topo nav a.acao:hover { color: #ffffff; } .acao svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .leia-tambem { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--borda); font-size: 0.95rem; } .leia-tambem strong { display: block; margin-bottom: 0.6rem; } .leia-tambem ul { list-style: none; padding: 0; margin: 0; } .leia-tambem li { margin-bottom: 0.55rem; } /* --------------------------------------------------------------- índice -- */ /* Cartão de artigo, copiado do `ProductCard` do aplicativo: chip de 40 px com * borda e canto de 0,75rem, ícone em teal, fio teal de 56 px como divisor com * intenção, chapéu em versalete, e a linha de meta em monoespaçada. É a mesma * peça que a estante de instrumentos usa, e é assim que o índice de * documentação passa a pertencer ao mesmo produto. */ .secao-indice { margin-top: 2.75rem; } .secao-indice > h2 { margin-top: 0; margin-bottom: 0.35rem; } .secao-indice > p { color: var(--texto-fraco); font-size: 0.95rem; margin-bottom: 1.1rem; } .grade-artigos { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; } @media (min-width: 42rem) { .grade-artigos { grid-template-columns: 1fr 1fr; } .grade-artigos .destaque { grid-column: 1 / -1; } } .cartao-artigo { display: flex; flex-direction: column; gap: 0.75rem; height: 100%; padding: 1.25rem; border: 1px solid var(--borda); border-radius: 1rem; background: var(--fundo-cartao); text-decoration: none; transition: border-color 0.15s, transform 0.15s; } .cartao-artigo:hover { border-color: var(--acento); transform: translateY(-1px); } .cartao-artigo .simbolo-chip { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex: none; border: 1px solid var(--borda); border-radius: 0.75rem; background: var(--fundo-chip-cartao); color: var(--acento); } .cartao-artigo .simbolo-chip svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Fio teal curto, o mesmo divisor com intenção do cartão de produto. */ .cartao-artigo .fio { display: block; width: 3.5rem; height: 1px; background: var(--acento); } .cartao-artigo .categoria { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--acento); } .cartao-artigo h3 { margin: 0.35rem 0 0; font-size: 1.08rem; line-height: 1.35; font-weight: 650; color: var(--texto-forte); } .cartao-artigo .destaque-titulo { font-size: 1.22rem; } .cartao-artigo p { margin: 0; font-size: 0.9rem; line-height: 1.62; color: var(--texto-fraco); } .cartao-artigo .meta { margin-top: auto; padding-top: 0.35rem; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.03em; color: var(--texto-fraco); } /* Trilha de entrada: onde começar conforme o que a pessoa faz. */ .trilha { margin: 1.5rem 0 0; padding: 0; list-style: none; border: 1px solid var(--borda); border-radius: 1rem; background: var(--fundo-cartao); overflow: hidden; } .trilha li + li { border-top: 1px solid var(--borda); } .trilha a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; padding: 0.9rem 1.15rem; text-decoration: none; color: var(--texto); font-size: 0.94rem; transition: background-color 0.15s; } .trilha a:hover { background: var(--fundo-chip-cartao); } .trilha .situacao { flex: 1 1 16rem; } .trilha .destino { color: var(--acento); font-weight: 600; white-space: nowrap; } /* -------------------------------------------------------------- pranchas -- */ /* SVG escrito no próprio HTML, e não imagem referenciada. Herda a cor do tema, * não gera requisição e um erro se conserta mudando duas coordenadas. * * O conteúdo segue convenção de desenho técnico, que é o que o leitor de * documentação geodésica reconhece: linha de cota com seta, linha de extensão, * hachura de seção, chamada com quebra, símbolo em monoespaçada. O recipiente * segue a identidade do produto: canto de 1rem, borda de um pixel, fundo de * cartão. Foi aí que a primeira versão errou, deixando o desenho num quadro de * canto vivo que não pertencia a lugar nenhum. */ figure { margin: 2rem 0; } /* Rola em vez de encolher, pela mesma razão das tabelas: reduzido aos 335 px úteis de um celular, um desenho de 680 fica com rótulo de seis pixels. */ .figura-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: 1rem; background: var(--fundo-cartao); } .diagrama { display: block; width: 100%; min-width: 34rem; height: auto; } .diagrama .traco { fill: none; stroke: var(--texto-fraco); stroke-width: 1.4; } .diagrama .traco-forte { fill: none; stroke: var(--texto-forte); stroke-width: 1.8; } .diagrama .traco-acento { fill: none; stroke: var(--acento); stroke-width: 2.4; } .diagrama .guia { fill: none; stroke: var(--texto-fraco); stroke-width: 1; stroke-opacity: 0.45; } .diagrama .fantasma { fill: none; stroke: var(--texto-fraco); stroke-width: 1.6; stroke-opacity: 0.7; stroke-dasharray: 5 4; } .diagrama .painel { fill: none; stroke: var(--texto-fraco); stroke-opacity: 0.4; stroke-width: 1; } .diagrama .corpo { fill: var(--fundo-cartao); stroke: var(--texto-forte); stroke-width: 1.8; } .diagrama .cota { fill: none; stroke: var(--texto-forte); stroke-width: 1.1; } .diagrama .cota-acento { fill: none; stroke: var(--acento); stroke-width: 1.4; } .diagrama .extensao { fill: none; stroke: var(--texto-fraco); stroke-opacity: 0.55; stroke-width: 1; } .diagrama .ponta { fill: var(--texto-forte); stroke: none; } .diagrama .ponta-acento { fill: var(--acento); stroke: none; } .diagrama .chamada { fill: none; stroke: var(--texto-fraco); stroke-opacity: 0.6; stroke-width: 1; } .diagrama .marca-aberta { fill: var(--fundo-cartao); stroke: var(--acento); stroke-width: 2; } .diagrama .marca-cheia { fill: var(--acento); stroke: none; } .diagrama .ponto { fill: var(--texto-fraco); stroke: none; } .diagrama .seta { fill: var(--texto-fraco); stroke: none; } /* O conteúdo de um `pattern` recebe estilo por CSS como qualquer elemento, e é assim que a hachura acompanha o tema sem precisar de duas versões. */ .diagrama .hachura line { stroke: var(--texto-fraco); stroke-opacity: 0.5; stroke-width: 1; } .diagrama text { font-family: 'Inter g.geotools', system-ui, -apple-system, sans-serif; fill: var(--texto-fraco); font-size: 13px; } .diagrama .rotulo-forte { fill: var(--texto-forte); font-size: 14px; font-weight: 650; } .diagrama .rotulo-mini { font-size: 11.5px; } /* Grandeza medida em monoespaçada, como no visor do instrumento. */ .diagrama .simbolo { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; fill: var(--texto-forte); } .diagrama .simbolo-acento { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 15px; font-weight: 600; fill: var(--acento); } .diagrama .nota { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 10.5px; fill: var(--texto-fraco); fill-opacity: 0.75; letter-spacing: 0.04em; } figcaption { margin-top: 0.75rem; font-size: 0.87rem; line-height: 1.62; color: var(--texto-fraco); } figcaption .num { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.82rem; font-weight: 600; color: var(--texto-forte); letter-spacing: 0.04em; margin-right: 0.45rem; } /* --------------------------------------------------------------- rodapé -- */ .rodape { border-top: 1px solid var(--borda); margin-top: 2rem; background: var(--fundo); } .rodape-conteudo { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; padding-top: 1rem; padding-bottom: 1rem; } .rodape-marca { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: 'Space Grotesk Wordmark', system-ui, sans-serif; font-size: 1rem; font-weight: 700; color: var(--texto-forte); text-decoration: none; flex: none; padding: 0.75rem 0; } .rodape-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; font-size: 0.8125rem; } .rodape-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--texto); text-decoration: none; } .rodape a:hover { color: var(--acento); text-decoration: underline; } .rodape a:focus-visible { outline: 2px solid var(--acao); outline-offset: 4px; border-radius: 2px; } .rodape-links [aria-current="page"] { color: var(--texto-forte); font-weight: 600; } @media (max-width: 36rem) { .rodape-conteudo { align-items: flex-start; flex-direction: column; gap: 0; } .rodape-links { gap: 0.25rem 1.25rem; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }