/* Esqueleto compartilhado pelas três páginas. Nenhuma cor de marca aqui: tudo vem das custom properties que cada css/.css define. Só as cores de estado (oficial / não consta) são fixas, porque o cartão de resultado é sempre uma superfície clara — assim o veredito tem o mesmo contraste em qualquer marca. */ *, *::before, *::after { box-sizing: border-box; } :root { /* Estados do veredito — tinta escura sobre fundo claro, testado em WCAG */ --ok-texto: #0B5F3A; --ok-fundo: #E4F4EC; --ok-borda: #12855A; --alerta-texto: #6B4300; --alerta-fundo: #FBF0D8; --alerta-borda: #A26A00; --perigo-texto: #8E1620; --perigo-fundo: #FBEAEA; --perigo-borda: #C0202C; --neutro-texto: #33405A; --neutro-fundo: #EDF1F7; --neutro-borda: #7C8AA5; --espaco: clamp(1rem, 0.6rem + 1.6vw, 2rem); } /* O gradiente fica no , não no : com background-attachment fixed no body, rolar a página descobre uma faixa branca acima do conteúdo. */ html { -webkit-text-size-adjust: 100%; min-height: 100%; background: var(--fundo); background-attachment: fixed; } body { margin: 0; min-height: 100vh; background: transparent; color: var(--texto); font-family: var(--fonte-corpo); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.6; letter-spacing: var(--tracking-corpo, 0); -webkit-font-smoothing: antialiased; } .pagina { width: min(64rem, 100% - 2 * var(--espaco)); margin-inline: auto; padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2rem, 1.5rem + 3vw, 4rem); display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 3rem); } /* --- topo ---------------------------------------------------------------- */ .topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } /* Altura por marca: os lockups têm proporções bem diferentes (CP Iuris 3.56:1, Registrando 4.71:1) e na mesma altura o wordmark do Registrando lê menor. */ .topo__logo { display: block; height: var(--altura-logo); width: auto; } .trocar-marca { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--texto-suave); } .trocar-marca a { color: var(--texto); text-decoration: none; padding: 0.35rem 0.75rem; border: 1px solid var(--borda-suave); border-radius: 999px; transition: background-color 0.15s ease, border-color 0.15s ease; } .trocar-marca a:hover { background: var(--realce-suave); border-color: var(--texto-suave); } /* --- abertura ------------------------------------------------------------ */ .abertura h1 { font-family: var(--fonte-display); font-weight: var(--peso-display); font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.25rem); line-height: 1.08; letter-spacing: var(--tracking-titulo, 0); margin: 0 0 0.6rem; max-width: 20ch; } /* Nível "subtítulo" da hierarquia dos guias: peso e tracking próprios, não o corpo de texto com outra cor. */ .abertura p { margin: 0; max-width: 56ch; color: var(--texto-suave); font-weight: var(--peso-subtitulo); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); letter-spacing: var(--tracking-subtitulo, 0); } /* --- verificador --------------------------------------------------------- */ .verificador { display: grid; gap: 0.75rem; grid-template-columns: 1fr auto; align-items: end; } .verificador__campo { grid-column: 1 / -1; display: grid; gap: 0.4rem; } .verificador label { font-size: 0.9375rem; font-weight: var(--peso-subtitulo); color: var(--texto); } .verificador input { width: 100%; padding: 0.9rem 1.1rem; font: inherit; font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--texto-superficie); background: var(--superficie); border: 2px solid var(--borda-campo); border-radius: var(--raio-campo); } .verificador input::placeholder { color: var(--texto-superficie-suave); } .botao { font: inherit; font-weight: 700; font-family: var(--fonte-display); padding: 0.9rem 1.6rem; color: var(--acento-texto); background: var(--acento); border: 2px solid transparent; border-radius: var(--raio-campo); cursor: pointer; transition: filter 0.15s ease, transform 0.1s ease; } /* brightness() empurraria o acento para fora da paleta; o hover é um token. */ .botao:hover { background: var(--acento-hover); } .botao:active { transform: translateY(1px); } .verificador .botao { grid-column: 1 / -1; } @media (min-width: 34rem) { .verificador { grid-template-columns: 1fr auto; } .verificador__campo { grid-column: 1; } .verificador .botao { grid-column: 2; } } .privacidade { margin: 0; font-size: 0.875rem; color: var(--texto-suave); } /* --- resultado ----------------------------------------------------------- */ .resultado:empty { display: none; } /* Flex, não grid: o número de blocos muda por estado e com linhas implícitas o selo não conseguia atravessar a coluna inteira sem empurrar o texto. */ .resultado__cartao { display: flex; align-items: flex-start; gap: 1rem; padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); border-radius: var(--raio-cartao); /* O estado já é dito pelo selo, pelo tom do cartão e pelo texto. Contorno inteiro em vez de faixa lateral. */ border: 1px solid var(--estado-borda); background: var(--estado-fundo); color: var(--estado-texto); } .resultado__marca { flex: 0 0 auto; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; } .resultado__conteudo { flex: 1 1 auto; min-width: 0; display: grid; gap: 0.35rem; } /* A forma do selo é assinatura de marca: cada css/.css redefine. */ .resultado__selo { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--estado-borda); color: var(--superficie); } .resultado__selo svg { width: 1.5rem; height: 1.5rem; display: block; } .resultado__titulo { margin: 0; font-family: var(--fonte-display); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); font-weight: var(--peso-titulo); line-height: 1.2; } .resultado__numero { margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--peso-titulo); } .resultado__texto { margin: 0; } .resultado__texto + .resultado__texto { margin-top: 0.5rem; } /* Sem sublinhado o único caminho de saída do cartão "é de outra marca" some dentro do parágrafo. */ .resultado__cartao a { color: inherit; font-weight: var(--peso-titulo); text-decoration: underline; text-underline-offset: 0.2em; } .resultado--oficial { --estado-texto: var(--ok-texto); --estado-fundo: var(--ok-fundo); --estado-borda: var(--ok-borda); } .resultado--oficial-outra, .resultado--incompleto { --estado-texto: var(--alerta-texto); --estado-fundo: var(--alerta-fundo); --estado-borda: var(--alerta-borda); } .resultado--nao-consta { --estado-texto: var(--perigo-texto); --estado-fundo: var(--perigo-fundo); --estado-borda: var(--perigo-borda); } .resultado--invalido, .resultado--vazio { --estado-texto: var(--neutro-texto); --estado-fundo: var(--neutro-fundo); --estado-borda: var(--neutro-borda); } /* --- lista de números ---------------------------------------------------- */ .lista h2 { font-family: var(--fonte-display); font-weight: var(--peso-titulo); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); letter-spacing: var(--tracking-titulo, 0); margin: 0 0 0.25rem; } .lista__intro { margin: 0 0 1.25rem; color: var(--texto-suave); } /* São doze números na maior marca: em coluna única a lista vira rolagem pura. Duas colunas quando há largura, uma no celular. */ .numeros { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } /* Sem wrap: com quebra, uns cartões ficavam de uma linha e outros de duas, e a grade saía com alturas desiguais. */ .numero { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.85rem clamp(1rem, 0.8rem + 0.6vw, 1.25rem); background: var(--superficie); color: var(--texto-superficie); border: 1px solid var(--superficie-borda); border-radius: var(--raio-cartao); } .numero__telefone { flex: 1 1 auto; font-family: var(--fonte-display); font-weight: var(--peso-titulo); font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--texto-superficie); text-decoration: none; } .numero__telefone:hover, .numero__telefone:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; } .copiar { flex: 0 0 auto; font: inherit; font-size: 0.875rem; font-weight: var(--peso-subtitulo); padding: 0.5rem 0.9rem; color: var(--texto-superficie); background: transparent; border: 1px solid var(--superficie-borda); border-radius: 999px; cursor: pointer; } .copiar:hover { background: var(--realce-superficie); } /* --- avisos e rodapé ----------------------------------------------------- */ /* Aviso permanente não pode usar o âmbar do veredito: nos estados "incompleto" e "é de outra marca" a página mostraria dois retângulos âmbar iguais, um sendo resposta e outro sendo recado fixo. */ .aviso { padding: 1rem 1.25rem; border-radius: var(--raio-cartao); background: var(--superficie); color: var(--texto-superficie); border: 1px dashed var(--superficie-borda); } .aviso strong { display: block; } .aviso p { margin: 0.25rem 0 0; } .rodape { border-top: 1px solid var(--borda-suave); padding-top: 1.5rem; font-size: 0.9rem; color: var(--texto-suave); display: grid; gap: 0.5rem; } .rodape a { color: var(--texto); } /* --- acessibilidade ------------------------------------------------------ */ :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; } /* O anel de foco é componente não-textual: WCAG 1.4.11 pede 3:1. O acento da marca cumpre isso sobre o fundo escuro e reprova sobre os cartões claros, então dentro deles o anel troca para o azul da marca. */ .numero :focus-visible, .resultado__cartao :focus-visible, .aviso :focus-visible, .marca:focus-visible { outline-color: var(--foco-superficie); } .so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }