/* ============================================================ nyck.com.br — layout da página pública. NENHUM VALOR NASCE AQUI. Cor, tamanho, espaço, raio e sombra vêm de `@passaporte/design-tokens`, servido como `/tokens.css` ao lado deste arquivo. Se um valor faltar, ele falta lá — nunca aqui. Superfície: `operador` (papel), declarada em . Os pares usados e o contraste medido de cada um (WCAG 2.1, recalculado em `conformidade.test.ts` a partir dos tokens, não copiado de tabela): texto primário sobre fundo base .......... 17,53:1 ✅ texto texto secundário sobre fundo base .......... 7,18:1 ✅ texto texto primário sobre superfície elevada .. 19,02:1 ✅ texto texto secundário sobre superfície elevada .. 7,80:1 ✅ texto marca (ciano-700) sobre fundo base ......... 5,86:1 ✅ texto e gráfico `--nyck-text-muted` NÃO aparece nesta folha, e a ausência é deliberada: ele mede 4,34:1 sobre superfície elevada e reprova (IGA-98). Como quase todo texto de apoio desta página cai dentro de um cartão, o piso aqui é `--nyck-text-secondary` em toda parte — inclusive fora do cartão, para que ninguém mova um parágrafo para dentro de um e reprove sem perceber. Desenhado em 360 px. Toda consulta de mídia é `min-width`: o layout base é o do telefone, e o desktop é o acréscimo. ============================================================ */ /* `tokens.css` é folha de VALORES, não reset — ele declara o mínimo do `body` e para aí, de propósito. Sem esta linha, `max-width: var(--nyck-largura-conteudo)` somado ao `padding-inline` estoura o contêiner em `content-box`: medido, o documento ficava com 1280 px de rolagem numa janela de 1200 px, e o corpo da página passava a rolar na horizontal — que é justamente o que o DESIGN-SYSTEM.md proíbe. */ *, *::before, *::after { box-sizing: border-box; } /* ---------- atalho de teclado ---------- Primeiro elemento focável da página. Fica fora da tela até receber foco; `:where(a)` do tokens.css já garante os 44 px de alvo. */ .pular { position: absolute; left: var(--nyck-esp-4); top: calc(var(--nyck-esp-4) * -10); z-index: var(--nyck-z-suspenso); display: inline-flex; align-items: center; padding: 0 var(--nyck-esp-4); border: 1px solid var(--nyck-border-subtle); border-radius: var(--nyck-raio-sm); background: var(--nyck-bg-elevado); color: var(--nyck-text-primary); font-size: var(--nyck-size-apoio); text-decoration: none; transition: top var(--nyck-dur-rapida) var(--nyck-curva); } .pular:focus-visible { top: var(--nyck-esp-4); } /* ---------- moldura ---------- */ .cabecalho, .conteudo, .rodape { width: 100%; max-width: var(--nyck-largura-conteudo); margin-inline: auto; padding-inline: var(--nyck-esp-5); } .cabecalho { padding-block: var(--nyck-esp-6); } .conteudo { padding-block: var(--nyck-esp-8) var(--nyck-esp-14); } .rodape { padding-block: var(--nyck-esp-8); border-top: 1px solid var(--nyck-border-subtle); } @media (min-width: 768px) { .cabecalho, .conteudo, .rodape { padding-inline: var(--nyck-esp-10); } .conteudo { padding-block: var(--nyck-esp-14) var(--nyck-esp-20); } } /* ---------- assinatura ---------- Uma marca só na página, e ela é a anfitriã (APLICACAO-DA-MARCA.md). O respiro ao lado do símbolo é metade da largura dele — 14 px para um símbolo de 28 px —, então `--nyck-esp-4` (16 px) é o degrau da escala que respeita a regra sem inventar valor intermediário. */ .marca { display: flex; align-items: center; gap: var(--nyck-esp-4); margin: 0; } .marca__simbolo { display: block; } .marca__palavra { color: var(--nyck-text-primary); font-size: var(--nyck-size-titulo-2); font-weight: 700; letter-spacing: var(--nyck-ls-titulo); line-height: var(--nyck-lh-titulo); } /* ---------- capa ---------- A medida de texto corrido é 65 caracteres. Como `ch` resolve contra o tamanho de fonte do próprio elemento, o limite mora na seção (corpo, 15 px) e o título de 40 px herda a mesma caixa — que é o que dá as três linhas curtas do desenho. */ .capa { max-width: var(--nyck-largura-texto); } .etiqueta { margin: 0 0 var(--nyck-esp-4); color: var(--nyck-text-secondary); font-family: var(--nyck-font-mono); font-size: var(--nyck-size-etiqueta); font-weight: 500; letter-spacing: var(--nyck-ls-etiqueta); line-height: var(--nyck-lh-titulo); text-transform: uppercase; } .capa__titulo { margin: 0; color: var(--nyck-text-primary); font-size: var(--nyck-size-titulo-1); font-weight: 800; letter-spacing: var(--nyck-ls-titulo); line-height: var(--nyck-lh-titulo); } @media (min-width: 768px) { .capa__titulo { font-size: var(--nyck-size-display); } } .capa__linha { margin: var(--nyck-esp-5) 0 0; color: var(--nyck-text-secondary); font-size: var(--nyck-size-titulo-3); font-weight: 400; line-height: var(--nyck-lh-corpo); } /* Link dentro do texto: cor de marca (5,86:1 sobre o papel) e sublinhado. Cor sozinha nunca é o único sinal — o sublinhado fica. */ .conteudo a { color: var(--nyck-brand); text-decoration: underline; text-underline-offset: var(--nyck-esp-1); } /* ---------- blocos ---------- */ .bloco { margin-top: var(--nyck-esp-14); } .bloco__titulo { margin: 0 0 var(--nyck-esp-6); color: var(--nyck-text-primary); font-size: var(--nyck-size-titulo-2); font-weight: 700; letter-spacing: var(--nyck-ls-titulo); line-height: var(--nyck-lh-titulo); } .cartoes { display: grid; gap: var(--nyck-esp-4); margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .bloco { margin-top: var(--nyck-esp-20); } .cartoes { grid-template-columns: repeat(3, 1fr); gap: var(--nyck-esp-6); } } .cartao { padding: var(--nyck-esp-6); border: 1px solid var(--nyck-border-subtle); border-radius: var(--nyck-raio-md); background: var(--nyck-bg-elevado); box-shadow: var(--nyck-sombra); } .cartao__titulo { margin: 0 0 var(--nyck-esp-3); color: var(--nyck-text-primary); font-size: var(--nyck-size-titulo-3); font-weight: 700; letter-spacing: var(--nyck-ls-titulo); line-height: var(--nyck-lh-titulo); } .cartao__texto { margin: 0; max-width: var(--nyck-largura-texto); color: var(--nyck-text-secondary); line-height: var(--nyck-lh-corpo); } /* ---------- passos ---------- Lista ordenada de verdade (`
    `), então o número é semântico e o leitor de tela anuncia a ordem. O marcador nativo sai e o número volta por contador, para poder receber a marca e o tratamento tabular — que é a regra do DESIGN-SYSTEM.md para contagem. A folha de tokens já dá `tabular-nums` e a família mono a quem tem `data-nyck-num`; aqui só posicionamos. */ .passos { display: grid; gap: var(--nyck-esp-6); margin: 0; padding: 0; max-width: var(--nyck-largura-texto); list-style: none; counter-reset: passo; } /* `column-gap` e `row-gap` separados de propósito. Com um `gap` único, os 16 px valiam também entre o título e o texto do MESMO passo, e no navegador os dois se soltavam um do outro — o passo deixava de ler como uma unidade. Entre as colunas o respiro é necessário; dentro do passo, quem separa é a margem do parágrafo. */ .passo { display: grid; grid-template-columns: auto 1fr; column-gap: var(--nyck-esp-4); row-gap: 0; counter-increment: passo; } .passo::before { content: counter(passo); color: var(--nyck-brand); font-family: var(--nyck-font-mono); font-size: var(--nyck-size-titulo-3); font-variant-numeric: tabular-nums; line-height: var(--nyck-lh-titulo); } .passo__titulo { margin: 0; color: var(--nyck-text-primary); font-size: var(--nyck-size-titulo-3); font-weight: 700; letter-spacing: var(--nyck-ls-titulo); line-height: var(--nyck-lh-titulo); } .passo__texto { grid-column: 2; margin: var(--nyck-esp-2) 0 0; color: var(--nyck-text-secondary); line-height: var(--nyck-lh-corpo); } /* ---------- garantias ---------- Duas colunas a partir do tablet. O marcador é um traço curto na cor de marca (5,86:1 sobre o papel, acima dos 3:1 de elemento gráfico) — e ele nunca carrega significado sozinho: cada item começa por uma frase em negrito que diz a mesma coisa em texto. */ .garantias { display: grid; gap: var(--nyck-esp-6); margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .garantias { grid-template-columns: repeat(2, 1fr); gap: var(--nyck-esp-6) var(--nyck-esp-8); } } .garantia { max-width: var(--nyck-largura-texto); padding-top: var(--nyck-esp-3); border-top: 2px solid var(--nyck-brand); color: var(--nyck-text-secondary); line-height: var(--nyck-lh-corpo); } .garantia__titulo { display: block; color: var(--nyck-text-primary); font-weight: 600; } .bloco__linha { margin: 0; max-width: var(--nyck-largura-texto); color: var(--nyck-text-secondary); font-size: var(--nyck-size-titulo-3); line-height: var(--nyck-lh-corpo); } /* ---------- aviso ---------- A faixa é `--nyck-brand`: 5,86:1 sobre o papel, acima dos 3:1 de elemento gráfico. Âmbar e coral ficam de fora por regra — são cor de ESTADO (pendente, revogar), nunca destaque de peça. */ .aviso { margin-top: var(--nyck-esp-14); max-width: var(--nyck-largura-texto); padding: var(--nyck-esp-6); border: 1px solid var(--nyck-border-subtle); border-left: var(--nyck-esp-1) solid var(--nyck-brand); border-radius: var(--nyck-raio-md); background: var(--nyck-bg-elevado); box-shadow: var(--nyck-sombra); } @media (min-width: 768px) { .aviso { margin-top: var(--nyck-esp-20); } } .aviso__titulo { margin: 0 0 var(--nyck-esp-3); color: var(--nyck-text-primary); font-size: var(--nyck-size-titulo-3); font-weight: 700; letter-spacing: var(--nyck-ls-titulo); line-height: var(--nyck-lh-titulo); } .aviso__texto { margin: 0; color: var(--nyck-text-secondary); line-height: var(--nyck-lh-corpo); } /* ---------- rodapé ---------- */ .rodape__linha { margin: 0; color: var(--nyck-text-secondary); font-size: var(--nyck-size-apoio); }