/* =============================================================================================
* Perfforma — folha de estilo do site institucional (apps/site/assets/site.css)
*
* O QUE É
* A ÚNICA folha que desenha as quatro páginas publicadas: index, privacidade, excluir-conta e
* a página de erro. Carregada por , sempre DEPOIS de /assets/tokens.css (V-06).
*
* DE ONDE VÊM OS VALORES
* De brand/design-system/tokens.css, publicado aqui como cópia byte-idêntica em
* /assets/tokens.css e provado por apps/web/src/site-assets.test.ts. Toda cor, tamanho, raio,
* sombra, duração e espaço abaixo é var(--token). Nada foi medido a olho.
*
* O QUE É PROIBIDO, E POR QUÊ (travado por apps/web/src/site-css.test.ts)
* - A regra at- que inclui um CSS de dentro de outro CSS. Ela funciona em
* apps/web/src/index.css:2 só porque o Vite a resolve no build. Este diretório não tem build
* (D-00a): em produção ela daria 404 e a página ficaria sem estilo em silêncio. Aqui os
* tokens chegam por no , antes desta folha (C-1).
* - #hex cru. O primeiro verde colado à mão é drift permanente da identidade: brand/ muda, o
* site não muda, e ninguém percebe (T-11-02-01).
* - px cru fora do bloco marcado logo abaixo e das condições @media. A lista de exceções é
* FECHADA e vive em 11-UI-SPEC.md §Spacing Scale → Exceções.
* - Declarar qualquer custom property que tokens.css já declare. Todo nome daqui carrega o
* prefixo --site- e por isso não consegue sombrear a marca.
* - --text-subtle (4,14:1) e --brand (2,24:1) como tinta de texto. O verde que pode ser texto é
* --success (4,94:1); --brand é fundo, borda, contorno de foco e bullet (T-11-02-02).
* - Qualquer gancho de JS. O site publica zero script autoral (V-03): não há alternador de tema
* nem estado "seção atual" no menu — os dois exigiriam JS.
*
* POR QUE OS DOIS PRIMEIROS PROIBIDOS NÃO ESTÃO SOLETRADOS ACIMA
* O gate que os proíbe é busca crua sobre ESTE arquivo. Um comentário que cita o literal
* proibido inutiliza o gate — o documento derruba o controle que ele descreve. Mesma disciplina
* já aplicada em apps/site/_headers (11-01-SUMMARY, desvio 1).
*
* VOCABULÁRIO DE CLASSES (o que o HTML de 11-06/11-07 pode usar)
* layout .container · .band .band--hero .band--alt .band--privacy .band--dark
* (.band > .container já empilha os blocos irmãos com respiro — as grades abaixo vão
* num FILHO do .container, nunca na mesma tag)
* chrome .skip-link · .site-header .site-header--legal .site-header__inner
* .site-header__logo--compact .site-header__logo--horizontal .site-header__back
* .site-nav · .site-footer .site-footer__grid .site-footer__title .site-footer__logo
* .site-footer__tagline .site-footer__bar
* conteúdo .eyebrow .subhead .meta .badges .section__head · .card .card--muted
* .step .step__number · .figure--browser .figure--phone .figure__caption
* .callout--warning · .list--privacy · .legal-toc .legal-toc__title .prose
* grades .hero__grid .hero__copy .hero__actions .showcase .grid--modules .grid--steps
* ação .btn .btn--primary .btn--ghost .btn--on-dark
* ============================================================================================= */
:root {
/* ── site-local layout tokens — NÃO existem em brand/design-system/tokens.css ──────────── */
--site-max: 72rem; /* 1152 — largura máxima do container do one-pager */
--site-measure: 68ch; /* medida de leitura das páginas legais (~72 caracteres) */
--site-gutter: var(--space-4); /* alargado para var(--space-6) a partir de 45rem */
--site-section-y: clamp(var(--space-12), 8vw, calc(var(--space-16) + var(--space-8)));
--site-header-h: var(--space-16); /* altura do header sticky */
--site-anchor-pad: calc(var(--site-header-h) + var(--space-4)); /* scroll-margin-top */
--site-tap: 44px; /* alvo mínimo de toque (WCAG 2.5.8 / HIG) — não existe token */
--site-border-w: 1px; /* a marca não tem escala de espessura de traço */
--site-focus-w: 3px; /* anel de foco */
/* ─────────────────────────────────────────────────────────────────────────────────────── */
}
/* === Fontes — auto-hospedadas ===============================================================
* Nada de fonts.googleapis.com/fonts.gstatic.com: um terceiro recebendo o IP de cada visitante
* seria um operador que a política de privacidade aprovada não nomeia (D-00e), e o CSP do
* _headers já está fechado em 'self' para style-src e font-src. Instâncias estáticas por peso,
* subset latin, 39,3 KB no total (11-01-SUMMARY §Fontes).
* ========================================================================================== */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/plus-jakarta-sans-400.woff2') format('woff2');
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/plus-jakarta-sans-700.woff2') format('woff2');
}
@font-face {
font-family: 'Sora';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/sora-700.woff2') format('woff2');
}
/* === Reset mínimo e base ================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
/* O dark de tokens.css vive sob [data-theme="dark"], atributo que só JS seta — e o site não
* tem JS. Declarar light é o que impede o auto-dark do Chrome Android de re-tingir a página
* por conta própria e destruir todos os contrastes medidos na UI-SPEC (Q-03). */
color-scheme: light;
}
html {
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: 1.6;
color: var(--text);
background: var(--bg);
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
min-block-size: 100vh;
}
/* O header sticky comeria o título recém-navegado sem isto — é o defeito clássico do one-pager
* com âncora, e o menu do site é inteiramente feito de âncoras. */
[id] {
scroll-margin-block-start: var(--site-anchor-pad);
}
img,
svg {
max-inline-size: 100%;
block-size: auto;
}
ul,
ol {
margin: 0;
padding: 0;
}
p {
margin: 0;
}
hr {
border: 0;
border-block-start: var(--site-border-w) solid var(--border);
margin: 0;
}
/* Foco: `outline: none` sem substituto é proibido. --success dá 4,94:1 contra branco, acima do
* mínimo de 3:1 de WCAG 1.4.11. Nas faixas escuras o contorno é trocado adiante — --success
* sobre --g900 mede só 2,53:1 e desapareceria justamente onde está o CTA. */
:focus-visible {
outline: var(--site-focus-w) solid var(--success);
outline-offset: var(--space-1);
}
a {
color: var(--success);
text-underline-offset: var(--space-1);
transition: color var(--dur-fast) var(--ease);
}
a:hover {
color: var(--success-strong);
}
/* === Tipografia — quatro papéis, duas famílias, duas espessuras ============================
* Display · Heading · Body · Meta. --text-lg, --text-xl, --text-4xl, --text-xs e --font-mono
* não são usados neste site, e as espessuras 600/800 também não: são 3 arquivos de fonte, não 6.
* ========================================================================================== */
h1,
h2,
h3 {
font-family: var(--font-display);
font-weight: 700;
color: var(--text);
margin: 0;
}
h1 {
font-size: clamp(var(--text-3xl), 4.5vw, var(--text-5xl));
line-height: 1.1;
letter-spacing: -0.02em;
}
h2 {
font-size: var(--text-2xl);
line-height: 1.25;
}
/* Título de card e de passo: distingue-se pela família e pela espessura, não por um quinto
* tamanho. */
h3 {
font-size: var(--text-base);
line-height: 1.4;
}
.eyebrow {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: 700;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--success);
margin: 0;
}
.subhead {
color: var(--text-muted);
max-inline-size: var(--site-measure);
}
.meta {
font-size: var(--text-sm);
line-height: 1.4;
color: var(--text-muted);
}
/* === Layout ================================================================================
* Mobile-first. Dois breakpoints, e só: 45rem e 67,5rem. Eles são literais porque uma custom
* property é ILEGAL dentro de uma condição @media — limitação da linguagem, não escolha.
* ========================================================================================== */
.container {
inline-size: 100%;
max-inline-size: var(--site-max);
margin-inline: auto;
padding-inline: var(--site-gutter);
}
.band {
padding-block: var(--site-section-y);
}
/* Ritmo vertical entre os blocos irmãos de uma seção. O reset zera as margens de p/ul/h*, então
* sem isto a lista, a linha de links e o callout da seção de privacidade encostam uns nos outros.
* ⚠️ COMPOSIÇÃO: as grades (.hero__grid, .showcase, .grid--modules, .grid--steps) vão num FILHO
* do .container, nunca na mesma tag — senão dois `gap` disputam o mesmo elemento. */
.band > .container {
display: grid;
gap: var(--space-8);
align-content: start;
}
.band--hero {
background: linear-gradient(180deg, var(--g50), var(--bg));
}
.band--alt {
background: var(--surface-2);
}
.band--privacy {
background: var(--success-soft);
}
.band--dark {
background: var(--g900);
color: var(--g100);
}
.band--dark h2,
.band--dark h3 {
color: var(--g50);
}
/* Nas faixas escuras o anel de --success sumiria (2,53:1 sobre --g900). --g200 mede 8,7:1 e é o
* mesmo tom que a UI-SPEC já usa para meta sobre --g900. */
.band--dark :focus-visible,
.site-footer :focus-visible {
outline-color: var(--g200);
}
/* Sem margem própria: o ritmo até o bloco seguinte é o `gap` de `.band > .container`. Duas fontes
* de espaçamento no mesmo eixo somariam e dobrariam o respiro da seção. */
.section__head {
display: grid;
gap: var(--space-4);
}
/* === Skip link ==============================================================================
* clip-path, nunca display:none: o link precisa continuar focável para o primeiro Tab revelá-lo.
* ========================================================================================== */
.skip-link {
position: absolute;
inset-block-start: var(--space-2);
inset-inline-start: var(--space-4);
z-index: 20;
display: inline-flex;
align-items: center;
min-block-size: var(--site-tap);
padding-inline: var(--space-4);
border-radius: var(--radius-full);
background: var(--surface);
border: var(--site-border-w) solid var(--border-strong);
color: var(--text);
font-size: var(--text-sm);
font-weight: 700;
text-decoration: none;
white-space: nowrap;
clip-path: inset(50%);
}
.skip-link:focus-visible {
clip-path: none;
}
/* === Header ================================================================================ */
.site-header {
position: sticky;
inset-block-start: 0;
z-index: 10;
background: var(--surface);
border-block-end: var(--site-border-w) solid var(--border);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-block-size: var(--site-header-h);
}
/* As páginas legais alinham o trilho do header ao trilho de leitura: o logo cai exatamente sobre
* a primeira letra do texto. Elas não têm menu de âncoras — o "Voltar ao site" é a navegação. */
.site-header--legal .container {
max-inline-size: var(--site-measure);
}
/* ⚠️ VARIANTE DE LOGO — o sufixo nomeia o FUNDO, não o traço. Conferido no e nos fills
* dos próprios SVGs: -dark desenha o wordmark em BRANCO (para fundo escuro) e -light desenha em
* quase-preto (para fundo claro). brand/design-system/README.md:50 afirma o inverso e está
* errado — seguir o README põe wordmark quase-preto sobre --g900 e o logo desaparece.
* ⚠️ As duas variantes do header vivem dentro do MESMO : em dois irmãos, o que está oculto
* continua sendo um item flex de largura zero e injeta um `gap` fantasma antes do logo. Portanto:
* header (fundo --surface, claro) → perfforma-horizontal-light.svg / perfforma-compact-light.svg;
* rodapé (fundo --g900, escuro) → perfforma-compact-dark.svg.
* Escolher pelo arquivo, nunca recolorir o logo. */
.site-header__logo--compact {
block-size: var(--space-8);
inline-size: auto;
}
.site-header__logo--horizontal {
display: none;
block-size: var(--space-10);
inline-size: auto;
}
.site-header__back {
display: inline-flex;
align-items: center;
min-block-size: var(--site-tap);
min-inline-size: var(--site-tap);
font-size: var(--text-sm);
color: var(--text-muted);
text-decoration: none;
}
.site-header__back:hover {
color: var(--text);
}
/* Abaixo de 45rem o menu some e a navegação vira a própria rolagem: hambúrguer exigiria JS
* (contradiz V-03) ou o truque do checkbox, que é markup falso e péssimo em leitor de tela.
* O rodapé repete a navegação inteira. */
.site-nav {
display: none;
}
.site-nav ul {
display: flex;
align-items: center;
gap: var(--space-6);
list-style: none;
}
/* O alvo de toque precisa de 44 na MENOR dimensão — num link curto como "Início" a menor é a
* largura, não a altura, então min-block-size sozinho deixaria um alvo de 35 de largura. */
.site-nav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-block-size: var(--site-tap);
min-inline-size: var(--site-tap);
font-size: var(--text-sm);
color: var(--text-muted);
text-decoration: none;
}
.site-nav a:hover {
color: var(--text);
}
/* === Botões ================================================================================
* A tinta do primário NUNCA muda no hover/active — --btn-ink existe exatamente por isso
* (regra registrada no próprio token, vinda do 06-UAT).
* ========================================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-block-size: var(--site-tap);
padding: var(--space-3) var(--space-6);
border: var(--site-border-w) solid transparent;
border-radius: var(--radius-full);
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.btn--primary {
background: var(--brand);
color: var(--btn-ink);
}
.btn--primary:hover {
background: var(--g400);
color: var(--btn-ink);
}
.btn--primary:active {
background: var(--g300);
}
.btn--ghost {
background: transparent;
border-color: var(--border-strong);
color: var(--text);
}
.btn--ghost:hover {
background: var(--surface-2);
color: var(--text);
}
.btn--ghost.btn--on-dark {
border-color: var(--g700);
color: var(--g50);
}
.btn--ghost.btn--on-dark:hover {
background: var(--g800);
color: var(--g50);
}
/* === Cards e passos ======================================================================== */
.card {
background: var(--surface);
border: var(--site-border-w) solid var(--border);
border-block-start: calc(var(--site-border-w) * 3) solid var(--brand);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--s1);
display: grid;
gap: var(--space-2);
align-content: start;
}
.card p,
.card dd {
color: var(--text-muted);
margin: 0;
}
.card--muted {
background: var(--surface-2);
}
.step {
display: grid;
grid-template-columns: var(--space-10) 1fr;
gap: var(--space-4);
align-items: start;
}
.step__number {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--space-10);
block-size: var(--space-10);
border-radius: var(--radius-full);
background: var(--brand);
color: var(--btn-ink);
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 700;
line-height: 1;
}
.step p {
color: var(--text-muted);
margin-block-start: var(--space-2);
}
/* === Molduras de captura — CSS puro, nenhum mockup de terceiro ============================= */
.figure--browser,
.figure--phone {
margin: 0;
overflow: hidden;
background: var(--surface);
box-shadow: var(--s3);
}
.figure--browser {
border: var(--site-border-w) solid var(--border);
border-radius: var(--radius-lg);
}
/* A barra de janela do navegador é desenhada, não fotografada. */
.figure--browser::before {
content: '';
display: block;
block-size: var(--space-6);
background: var(--surface-3);
border-block-end: var(--site-border-w) solid var(--border);
}
.figure--phone {
max-inline-size: 17.5rem;
margin-inline: auto;
border: calc(var(--site-border-w) * 4) solid var(--border-strong);
border-radius: var(--radius-2xl);
}
.figure--browser img,
.figure--phone img {
display: block;
inline-size: 100%;
block-size: auto;
}
.figure__caption {
font-size: var(--text-sm);
line-height: 1.4;
color: var(--text-muted);
margin-block-start: var(--space-2);
}
/* === Callout =============================================================================== */
/* Âmbar, nunca --danger: nenhuma ação irreversível acontece nesta página, e vermelho aqui
* mentiria sobre o que ela faz. */
.callout--warning {
background: var(--warning-soft);
border: var(--site-border-w) solid var(--warning-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
color: var(--text);
}
/* === Lista da seção de privacidade ==========================================================
* O bullet é desenhado com background: --brand pode ser superfície, nunca tinta de texto — e
* ::marker só é colorizável por `color`, que é exatamente o que a regra de contraste proíbe.
* ========================================================================================== */
.list--privacy {
list-style: none;
display: grid;
gap: var(--space-4);
color: var(--text-muted);
}
.list--privacy li {
position: relative;
padding-inline-start: var(--space-6);
}
.list--privacy li::before {
content: '';
position: absolute;
inset-inline-start: 0;
inset-block-start: var(--space-2);
inline-size: var(--space-2);
block-size: var(--space-2);
border-radius: var(--radius-full);
background: var(--brand);
}
/* === Grades ================================================================================ */
.hero__grid,
.showcase,
.grid--modules,
.grid--steps,
.site-footer__grid {
display: grid;
gap: var(--space-8);
}
.hero__grid,
.showcase {
align-items: center;
}
.hero__copy {
display: grid;
gap: var(--space-6);
justify-items: start;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
/* A partir de 45rem `.hero__actions` centraliza — mas isso é amarração do HERO, que naquela faixa
* centraliza o bloco inteiro (copy, botões e selos). A faixa de CTA reusa a mesma fila de botões e
* NÃO centraliza o texto: entre 45rem e 67,5rem o título ficava alinhado ao início e os botões no
* meio, desencontrados do próprio parágrafo que os anuncia. Medido no Chromium (11-07), não
* deduzido. Aqui o alinhamento da ação segue o do texto, em toda largura. */
.band--dark .hero__actions {
justify-content: flex-start;
}
.badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-6);
list-style: none;
font-size: var(--text-sm);
line-height: 1.4;
color: var(--text-muted);
}
/* === Páginas legais ======================================================================== */
.prose {
max-inline-size: var(--site-measure);
margin-inline: auto;
padding-inline: var(--site-gutter);
padding-block: var(--site-section-y);
display: grid;
gap: var(--space-6);
}
/* Documento jurídico não precisa de manchete: o h1 legal fixa no piso do clamp, e assim nenhum
* quinto tamanho tipográfico entra no site. */
.prose h1 {
font-size: var(--text-3xl);
letter-spacing: -0.02em;
}
/* O respiro entre seções é o que torna um texto jurídico varrível. */
.prose h2 {
margin-block-start: var(--space-12);
}
/* Um h2 dentro de uma superfície TITULA A CAIXA — não abre uma seção nova. O respiro declarado
* acima é o que separa uma seção da anterior; herdado dentro do callout ou do card ele empurraria o
* título um --space-12 inteiro para baixo do próprio padding e a caixa nasceria torta. Medido no
* Chromium (11-06), não deduzido: o aviso "Desativar não é excluir" de excluir-conta.html é
* exatamente esse caso. O valor não é soletrado em unidade porque o gate V-23 é busca crua sobre
* este arquivo — um comentário que cita o literal proibido derruba o controle que ele descreve. */
.prose .callout--warning h2,
.prose .card h2 {
margin-block-start: 0;
}
.prose section {
display: grid;
gap: var(--space-4);
}
.prose p,
.prose li,
.prose dd {
font-size: var(--text-base);
line-height: 1.7;
color: var(--text-muted);
}
.prose ul,
.prose ol {
display: grid;
gap: var(--space-2);
padding-inline-start: var(--space-6);
}
.prose dl {
display: grid;
gap: var(--space-4);
margin: 0;
}
.prose dt {
font-size: var(--text-base);
font-weight: 700;
color: var(--text);
}
.prose dd {
margin: 0;
}
.prose__brand {
display: flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-display);
font-weight: 700;
color: var(--text);
}
.prose__brand img {
block-size: var(--space-6);
inline-size: auto;
}
.legal-toc {
background: var(--surface);
border: var(--site-border-w) solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
/* "Nesta página" é um parágrafo, não um heading: é navegação, e um heading a mais poluiria a
* hierarquia que V-08 verifica. */
.legal-toc__title {
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 700;
color: var(--text);
margin-block-end: var(--space-4);
}
.legal-toc ul {
list-style: none;
display: grid;
gap: var(--space-2);
}
/* === Rodapé ================================================================================ */
.site-footer {
background: var(--g900);
color: var(--g200);
border-block-start: var(--site-border-w) solid var(--g700);
padding-block: var(--site-section-y);
}
.site-footer__logo {
block-size: var(--space-10);
inline-size: auto;
}
.site-footer__tagline {
color: var(--g200);
font-size: var(--text-sm);
line-height: 1.4;
margin-block-start: var(--space-4);
}
.site-footer__title {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 700;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--g50);
margin-block-end: var(--space-2);
}
.site-footer ul {
list-style: none;
display: grid;
}
/* Mesmo mínimo de toque do menu; alinhado ao início para que links curtos e longos compartilhem
* a mesma margem esquerda dentro da coluna. */
.site-footer a {
display: inline-flex;
align-items: center;
justify-content: flex-start;
min-block-size: var(--site-tap);
min-inline-size: var(--site-tap);
padding-block: var(--space-2);
font-size: var(--text-sm);
color: var(--g100);
text-decoration: none;
}
.site-footer a:hover {
color: var(--g50);
text-decoration: underline;
}
.site-footer__bar {
border-block-start: var(--site-border-w) solid var(--g700);
margin-block-start: var(--space-8);
padding-block-start: var(--space-6);
font-size: var(--text-sm);
line-height: 1.4;
color: var(--g200);
}
/* === Breakpoint 1 — 45rem (o menu volta, a grade abre em duas colunas) ===================== */
@media (min-width: 45rem) {
:root {
--site-gutter: var(--space-6);
}
.site-header__logo--compact {
display: none;
}
.site-header__logo--horizontal {
display: block;
}
.site-nav {
display: block;
}
.hero__copy {
max-inline-size: var(--site-measure);
margin-inline: auto;
justify-items: center;
text-align: center;
}
.hero__actions,
.badges {
justify-content: center;
}
.grid--modules,
.grid--steps,
.site-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* === Breakpoint 2 — 67,5rem (duas colunas no hero, três nos módulos, quatro no rodapé) ===== */
@media (min-width: 67.5rem) {
.hero__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hero__copy {
max-inline-size: none;
margin-inline: 0;
justify-items: start;
text-align: start;
}
.hero__actions,
.badges {
justify-content: flex-start;
}
.showcase {
grid-template-columns: 2fr 1fr;
}
/* 5 cards em 3 colunas = 3 + 2, como a UI-SPEC prevê. */
.grid--modules {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--steps,
.site-footer__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* === Movimento reduzido ====================================================================
* O site não tem animação de entrada, parallax nem autoplay — nada disso é possível sem JS e
* nada disso serve a esta página. Sobram as transições de hover/foco e a rolagem suave das
* âncoras, que é justamente o que enjoa quem pediu menos movimento (T-11-02-04).
* ========================================================================================== */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* === Impressão =============================================================================
* A página legal é lida em papel e anexada a processo. Some o chrome, o texto ganha a folha
* inteira e todo link externo imprime o próprio endereço — sem isso, um PDF da política vira um
* documento com referências que ninguém consegue seguir.
* ========================================================================================== */
@media print {
@page {
margin: 2cm;
}
.site-header,
.site-footer,
.legal-toc,
.skip-link {
display: none;
}
body {
background: none;
}
.prose {
max-inline-size: none;
padding-block: 0;
padding-inline: 0;
}
a[href^='http']::after,
a[href^='mailto']::after {
content: ' (' attr(href) ')';
}
section {
break-inside: avoid;
}
}