/* certificadodigitalsp.org — componentes: header, faixa, cards, preço, passos, * tabela, FAQ e rodapé. * * Tokens, reset, tipografia, grade e primeira dobra vêm de base.css, que vai * inline no . Nenhum hex solto neste arquivo: se aparecer um, o * checar-contraste.mjs não o enxerga e a paleta deixa de ter garantia de AA. * * Sistema de superfícies, medido na página do parceiro emissor em 30/08/2026 e * aplicado aqui: seção clara e seção névoa se alternam SEM repetir, o cartão é * sempre papel, e a sombra tem três degraus — rente no repouso, média no hover, * alta reservada a um único elemento por página. */ /* ---------- botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e1); min-height: 48px; /* alvo de toque WCAG 2.5.8 */ padding: 0.75rem 1.375rem; border: 2px solid var(--c-marca); border-radius: var(--raio-p); background: var(--c-marca); color: var(--c-btn-texto); font-size: 1rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; text-align: center; text-decoration: none; box-shadow: var(--sombra-rente); transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; } /* Primário em AZUL de marca — o padrão do parceiro emissor. O rótulo NÃO pode * ser `#FFFFFF` fixo nem var(--c-papel): é um token próprio, para que uma * eventual volta do tema escuro não entregue branco sobre azul claro (2,3:1, * reprova AA). O par rótulo/marca é checado em checar-contraste.mjs. */ .btn:hover { background: var(--c-marca-escura); border-color: var(--c-marca-escura); box-shadow: var(--sombra); } .btn:active { transform: translateY(1px); box-shadow: var(--sombra-rente); } .btn--fantasma { background: transparent; color: var(--c-marca); box-shadow: none; } .btn--fantasma:hover { background: var(--c-nevoa); border-color: var(--c-marca); color: var(--c-marca-escura); box-shadow: none; } .btn--bloco { display: flex; width: 100%; } .btn-linha { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; } /* O botão não encolhe abaixo do próprio rótulo: quando dois não cabem lado a * lado, o segundo desce para a linha seguinte em vez de os dois virarem duas * linhas de texto cada. Era assim que o CTA da dobra ficava com 76px de altura. */ .btn-linha > .btn { flex: 0 0 auto; max-width: 100%; } /* ---------- filete da bandeira ---------- * Trio cromático (preto, branco, vermelho) como divisor abstrato. Reproduzir a * bandeira é vedado pela LPI 9.279/96 art. 124, I — três faixas não são a * bandeira (praca.json -> cores.bandeira_paulista). */ .filete { height: 4px; border: 0; background: linear-gradient( to right, var(--c-tinta) 0 33.33%, var(--c-borda) 33.33% 66.66%, var(--c-marca) 66.66% 100% ); } /* ---------- cabeçalho ---------- */ .topo { position: sticky; top: 0; z-index: 5; background: var(--c-papel); border-bottom: var(--borda-fina); } .topo__barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); min-height: 4rem; } .marca { display: inline-flex; align-items: center; gap: 0.625rem; margin-right: auto; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.2; text-decoration: none; white-space: nowrap; } .marca svg { width: 32px; height: 32px; flex: none; } .marca__sub { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-prosa); } .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: var(--borda-fina); border-radius: var(--raio-p); background: transparent; } .menu-btn svg { width: 22px; height: 22px; } .menu-btn[aria-expanded="true"] .menu-btn__abrir, .menu-btn[aria-expanded="false"] .menu-btn__fechar { display: none; } /* Sem JS o menu fica aberto e navegável — a classe `js` é posta por uma linha * inline no do shell, antes da pintura, então não há flash. */ .js .topo__nav[data-menu]:not([data-aberto]) { display: none; } /* flex-basis 100% joga a navegação para a linha de baixo em vez de espremê-la * entre o logotipo e o botão — sem isso cada link vira três linhas de texto. */ .topo__nav { flex: 1 0 100%; display: flex; flex-direction: column; gap: var(--e1); padding-block: var(--e2); border-top: var(--borda-fina); } .topo__nav a { padding: 0.5rem 0; font-size: 0.9375rem; font-weight: 500; text-decoration: none; color: var(--c-prosa); transition: color .15s ease; } .topo__nav a:hover, .topo__nav a[aria-current="page"] { color: var(--c-tinta); } .topo__fone { font-weight: 600; color: var(--c-tinta) !important; } @media (min-width: 60rem) { .menu-btn { display: none; } .js .topo__nav[data-menu]:not([data-aberto]), .topo__nav { flex: 0 1 auto; display: flex; flex-direction: row; align-items: center; gap: var(--e3); padding-block: 0; border-top: 0; } } /* ---------- migalhas ---------- */ .crumbs { padding-block: var(--e2) 0; font-size: 0.875rem; color: var(--c-prosa); } .crumbs ol { display: flex; flex-wrap: wrap; gap: 0.375rem; list-style: none; padding: 0; } .crumbs li + li::before { content: "/"; margin-right: 0.375rem; color: var(--c-borda); } /* ---------- faixa de aceitação ---------- * Fica logo abaixo da dobra e responde à única pergunta que o visitante faz * antes do preço: "isso funciona onde eu preciso?". Antes essa resposta só * existia em prosa, quatrocentas palavras adiante. Os símbolos são desenho * próprio e genérico — prédio, crachá, recibo —, nunca o logotipo do órgão. */ .faixa__titulo { margin-bottom: var(--e3); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-prosa); text-align: center; } .faixa { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e2) var(--e5); list-style: none; padding: 0; } .faixa li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; } .faixa svg { width: 22px; height: 22px; flex: none; color: var(--c-marca); } /* ---------- cards ---------- */ .card { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); border: var(--borda-fina); border-radius: var(--raio); background: var(--c-papel); box-shadow: var(--sombra-rente); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .card:hover { box-shadow: var(--sombra); transform: translateY(-2px); border-color: var(--c-marca); } .card > .btn { margin-top: auto; } /* UM destaque por página. A sombra alta e a borda de marca ficam reservadas * a ele: se todo cartão tem destaque, o olho não tem para onde ir. */ .card--destaque { border-color: var(--c-marca); box-shadow: var(--sombra-alta); } .card--produto { gap: var(--e2); padding: var(--e4) var(--e3) var(--e3); } .card__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); } .card__resumo { color: var(--c-prosa); font-size: 0.9375rem; } /* Chip do ícone: 44px, canto de 10px, névoa de fundo e traço de marca. Mesma * anatomia em card de produto, item de lista e cabeça de grupo — é o que faz * blocos diferentes parecerem o mesmo sistema. */ .card__icone, .item__icone, .grupo__icone { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--c-nevoa); color: var(--c-marca); } .card__icone svg, .item__icone svg, .grupo__icone svg { width: 24px; height: 24px; } .badge { display: inline-block; padding: 0.1875rem 0.5rem; border: 1px solid transparent; border-radius: var(--raio-pill); background: var(--c-nevoa); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; color: var(--c-marca-escura); } /* ---------- itens com ícone ---------- */ .itens { list-style: none; padding: 0; } .item { display: flex; flex-direction: column; gap: 0.625rem; padding: var(--e3); border: var(--borda-fina); border-radius: var(--raio); background: var(--c-papel); box-shadow: var(--sombra-rente); transition: border-color .18s ease, box-shadow .18s ease; } .item:hover { border-color: var(--c-marca); box-shadow: var(--sombra); } .item p { font-size: 0.9375rem; line-height: 1.6; color: var(--c-prosa); } .item p + p { margin-top: 0.5rem; } /* ---------- grupos e SKUs ---------- * "Escolha o seu certificado" tinha titular em h3 e SKU em h4, um embaixo do * outro, sem nada dizendo que o segundo pertence ao primeiro. Aqui o grupo é o * cartão e o SKU é uma caixa dentro dele: a hierarquia passa a ser visível. */ .grupo { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e4) var(--e3) var(--e3); border: var(--borda-fina); border-radius: var(--raio-g); background: var(--c-papel); box-shadow: var(--sombra-rente); } .grupo__cabeca { display: flex; align-items: center; gap: 0.875rem; } .grupo > p { color: var(--c-prosa); font-size: 0.9375rem; } .grupo__skus { display: grid; gap: var(--e2); margin-top: auto; padding-top: var(--e1); } .sku { padding: var(--e2) var(--e3); border: var(--borda-fina); border-radius: var(--raio); background: var(--c-nevoa); } .sku h4 { color: var(--c-marca-escura); } .sku p { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.55; color: var(--c-prosa); } /* ---------- lista de atributos ---------- */ .lista-check { display: grid; gap: 0.5rem; list-style: none; padding: 0; font-size: 0.9375rem; } .lista-check li { display: flex; align-items: flex-start; gap: 0.5rem; } .lista-check svg { width: 18px; height: 18px; flex: none; margin-top: 0.2rem; color: var(--c-marca); } /* ---------- preço ---------- * Enquanto decisoes.json tiver cartao_a_vista = null, só existe preço PIX e * ele vai SEMPRE rotulado. Não há classe de preço riscado neste arquivo, de * propósito: invariante 2 do PLANO (nunca preço de referência falso). */ .preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.375rem; font-family: var(--fonte-titulo); font-variant-numeric: tabular-nums; } .preco__valor { font-size: clamp(1.75rem, 4vw, 2.125rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; } .preco__nota { font-size: 0.875rem; font-weight: 500; color: var(--c-prosa); } /* ---------- tabela ---------- */ .tabela-rolagem { overflow-x: auto; border: var(--borda-fina); border-radius: var(--raio); background: var(--c-papel); } .tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .tabela caption { padding: var(--e2) var(--e3); font-size: 0.875rem; color: var(--c-prosa); text-align: left; border-bottom: var(--borda-fina); } .tabela th, .tabela td { padding: 0.875rem var(--e3); text-align: left; vertical-align: top; border-bottom: var(--borda-fina); } .tabela thead th { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--c-prosa); background: var(--c-nevoa); white-space: nowrap; } .tabela tbody tr:last-child td, .tabela tbody tr:last-child th { border-bottom: 0; } .tabela--comparativo tbody th { width: 1%; white-space: nowrap; font-weight: 600; } .tabela--comparativo tbody td { font-size: 0.9375rem; line-height: 1.55; color: var(--c-prosa); } .tabela--comparativo tbody tr:nth-child(even) th, .tabela--comparativo tbody tr:nth-child(even) td { background: var(--c-nevoa); } /* Em tela estreita a tabela empilha em vez de rolar na horizontal: o rótulo da * coluna vem do data-col, então não há segunda marcação para manter em dia. */ @media (max-width: 48rem) { /* `caption` entra na lista: numa tabela empilhada ele continua sendo * table-caption e encolhe até a largura da primeira célula — a legenda * virava uma coluna de duas palavras. */ .tabela--comparativo, .tabela--comparativo caption, .tabela--comparativo thead, .tabela--comparativo tbody, .tabela--comparativo tr, .tabela--comparativo th, .tabela--comparativo td { display: block; } .tabela--comparativo thead { display: none; } .tabela--comparativo tbody tr { border-bottom: var(--borda-fina); } .tabela--comparativo tbody tr:last-child { border-bottom: 0; } .tabela--comparativo tbody th { width: auto; white-space: normal; padding-bottom: 0; border-bottom: 0; background: none; font-size: 1rem; } .tabela--comparativo tbody td { padding-block: 0.5rem; border-bottom: 0; background: none; } .tabela--comparativo tbody td::before { content: attr(data-col); display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-marca-escura); } .tabela--comparativo tbody tr:last-child td:last-child { padding-bottom: var(--e2); } } /* ---------- passos ---------- * Três cartões numerados, ligados por um traço que só existe onde há um passo * seguinte. A numeração é estrutural, não decorativa: aqui a ordem é a * informação — pagar vem antes de agendar, que vem antes de emitir. */ .passos { counter-reset: passo; display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); list-style: none; padding: 0; } .passos li { counter-increment: passo; position: relative; padding: var(--e4) var(--e3) var(--e3); border: var(--borda-fina); /* A barra de topo é borda, não pseudo-elemento: assim o ::after fica livre * para o traço de ligação entre um passo e o seguinte. */ border-top: 3px solid var(--c-marca); border-radius: var(--raio); background: var(--c-papel); box-shadow: var(--sombra-rente); font-size: 0.9375rem; line-height: 1.6; color: var(--c-prosa); } .passos li::before { content: counter(passo); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: 0.75rem; border-radius: 50%; background: var(--c-marca); color: var(--c-btn-texto); font-family: var(--fonte-titulo); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; } .passos strong { display: block; margin-bottom: 0.25rem; font-family: var(--fonte-titulo); font-size: 1.125rem; font-weight: 700; color: var(--c-tinta); } /* O traço de ligação: só entre cartões, só quando eles estão lado a lado. * Atravessa o gap da grade na altura do número, ligando 1 -> 2 -> 3. Fundo não * pinta fora da caixa, então isto tem que ser elemento posicionado. */ @media (min-width: 52rem) { .passos li:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: calc(var(--e4) + 1.125rem); width: var(--e3); height: 2px; background: var(--c-marca); opacity: .35; } } /* ---------- FAQ ---------- *
/ nativo: abre, fecha e é acessível sem uma linha de JS. * O site.js só acrescenta "fecha os irmãos ao abrir" (ponytail: recurso nativo * antes de componente). Com JS off continua funcionando. */ .faq { padding-inline: var(--e3); border: var(--borda-fina); border-radius: var(--raio); background: var(--c-papel); } .faq details + details { border-top: var(--borda-fina); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: var(--e3) 0; font-family: var(--fonte-titulo); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer; transition: color .15s ease; } .faq summary:hover { color: var(--c-marca); } .faq summary::-webkit-details-marker { display: none; } /* O sinal fica numa chapa própria: sem ela o triângulo flutua no branco e o * alvo de clique some para quem tem pouca precisão. */ .faq summary::after { content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--c-nevoa); /* Duas linhas cruzadas desenhadas com gradiente: a horizontal some quando * abre, e o mais vira menos. Zero marcação extra, zero ícone baixado. */ background-image: linear-gradient(var(--c-marca), var(--c-marca)), linear-gradient(var(--c-marca), var(--c-marca)); background-size: 0.75rem 2px, 2px 0.75rem; background-position: center, center; background-repeat: no-repeat; } .faq details[open] summary::after { background-size: 0.75rem 2px, 2px 0; } @media (prefers-reduced-motion: no-preference) { .faq summary::after { transition: background-size .18s ease; } } .faq details > *:not(summary) { max-width: 72ch; margin-bottom: var(--e3); font-size: 0.9375rem; color: var(--c-prosa); } .faq details > p + p { margin-top: 0.75rem; } /* ---------- fechamento ---------- * O seletor por id é deliberado e é um só: `cta-final` é a âncora da seção de * fechamento e não muda. Ela é a última chance de conversão da página e, sem * tratamento, ficava com o mesmo peso de um parágrafo qualquer. */ #cta-final > .wrap { padding: var(--e5) var(--e4); border: var(--borda-fina); border-radius: var(--raio-g); background: var(--c-nevoa); } #cta-final .secao__cabeca { max-width: none; } /* ---------- cadeia ICP-Brasil ---------- * A prova que o texto ao lado promete: quem assina o certificado, de cima a * baixo. É o único lugar do site com numeração implícita por hierarquia, e a * ordem É a informação — a AC emissora vale porque a raiz a credenciou. */ .cadeia { counter-reset: elo; display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); list-style: none; padding: 0; } .cadeia li { counter-increment: elo; position: relative; padding: var(--e2) var(--e3); border: var(--borda-fina); border-left: 3px solid var(--c-marca); border-radius: var(--raio-p); background: var(--c-papel); } /* A seta só existe entre elos e some quando eles empilham. */ @media (min-width: 58rem) { .cadeia li:not(:last-child)::after { content: ""; position: absolute; left: calc(100% + 0.375rem); top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--c-marca); border-right: 2px solid var(--c-marca); opacity: .5; transform: translateY(-50%) rotate(45deg); } } .cadeia__no { display: block; font-family: var(--fonte-titulo); font-size: 0.9375rem; font-weight: 700; line-height: 1.3; } .cadeia__papel { display: block; margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.45; color: var(--c-prosa); } .cadeia__fonte { display: flex; align-items: flex-start; gap: 0.5rem; max-width: var(--medida); font-size: 0.875rem; color: var(--c-prosa); } .cadeia__fonte svg { width: 18px; height: 18px; flex: none; margin-top: 0.2rem; color: var(--c-marca); } /* ---------- transparência / fornecedor ---------- */ .declaracao { padding: var(--e3); border: var(--borda-fina); border-left: 4px solid var(--c-marca); border-radius: 0 var(--raio) var(--raio) 0; background: var(--c-papel); } .declaracao p + p { margin-top: var(--e2); } /* ---------- lista de cidades ---------- */ .lista-cidades { list-style: none; padding: 0; gap: 0 var(--e3); } .lista-cidades a { display: block; padding: 0.6875rem 0; border-bottom: var(--borda-fina); font-size: 0.9375rem; text-decoration: none; color: var(--c-prosa); transition: color .15s ease, padding-left .15s ease; } .lista-cidades a:hover { color: var(--c-marca); padding-left: 0.375rem; } /* ---------- rodapé ---------- */ .rodape { padding-block: var(--e6) var(--e4); border-top: var(--borda-fina); background: var(--c-nevoa); font-size: 0.9375rem; } .rodape h2, .rodape h3 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-prosa); } /* A coluna da marca carrega um parágrafo; as outras carregam links curtos. * Com todas do mesmo tamanho o texto vira uma tira de duas palavras por linha. */ @media (min-width: 60rem) { .rodape .grid > div:first-child { grid-column: span 2; } } .rodape ul { list-style: none; padding: 0; margin-top: var(--e1); } .rodape li { padding-block: 0.25rem; } .rodape a { text-decoration: none; } .rodape a:hover { text-decoration: underline; } /* Identificação do fornecedor — invariante 3 do PLANO (CDC art. 6º, III). * Bloco obrigatório: quem cobra (razão social + CNPJ), quem emite (AC) e a * declaração de revenda. Não é "letra miúda": fica em cor de texto normal. */ .rodape__fornecedor { margin-top: var(--e5); padding-top: var(--e3); border-top: var(--borda-fina); max-width: 78ch; color: var(--c-prosa); } .rodape__fornecedor p + p { margin-top: var(--e1); } .rodape__fornecedor strong { color: var(--c-tinta); } .rodape__legal { margin-top: var(--e2); font-size: 0.8125rem; color: var(--c-prosa); } /* ---------- movimento reduzido ---------- * Vai no fim do arquivo de propósito: mesma especificidade das regras que * anula, e ganha por vir depois — sem um `!important` sequer. Some o * deslocamento do cartão no hover e some toda transição; o estado final de cada * interação continua igual, o que muda é não haver percurso até ele. */ @media (prefers-reduced-motion: reduce) { .btn, .card, .item, .faq summary, .faq summary::after, .lista-cidades a, .topo__nav a, .pular { transition: none; } .card:hover, .item:hover { transform: none; } .lista-cidades a:hover { padding-left: 0; } }