/* =============================================================================
meusimplesfiscal — design tokens (web)
-----------------------------------------------------------------------------
Fonte da verdade: manual de marca v1.0 (indigo #3A41D6 / verde #0EA572 /
ink #0E1430 / off-white #F5F6FB), com TODAS as correcoes das auditorias
07-a11y, 08-cro e 09-tecnico aplicadas. Onde a auditoria contraria a spec
original, vale a auditoria.
REGRA DE OURO: indigo AGE · verde APROVA · ink ESTRUTURA.
O verde e SELO. Nunca e fundo de botao, nunca e texto pequeno solto.
Este arquivo e o UNICO lugar do projeto onde pode existir hex literal.
`app.css` so consome var(--...).
Todos os pares de cor daqui sao verificados por `css/contrast-check.py`.
Trocar um hex sem rodar o script quebra o build — que e o objetivo.
============================================================================= */
/* =============================================================================
1. FONTES — arquivos REAIS do repo em /fonts/
-----------------------------------------------------------------------------
Nomes conferidos em site/src/main/resources/static/fonts/:
inter-400 inter-500 inter-600 inter-700
manrope-600 manrope-700 manrope-800
(a spec original citava "Inter-Regular.woff2"/"Manrope-ExtraBold.woff2" —
nomes que NAO existem; os 7 @font-face davam 404 e a pagina inteira
renderizava em fonte de sistema. Correcao da auditoria 08, item ALTA.)
O HTML deve precarregar EXATAMENTE 2 arquivos, os que pintam acima da dobra:
O `crossorigin` e obrigatorio mesmo em same-origin: fonte usa modo
CORS-anonimo e sem ele o browser baixa duas vezes.
============================================================================= */
/* --- Manrope: titulos, precos, numeros-heroi ------------------------------- */
@font-face {
font-family: "Manrope";
src: url("/fonts/manrope-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url("/fonts/manrope-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url("/fonts/manrope-800.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
/* --- Inter: corpo, UI, codigo de ativacao ---------------------------------- */
@font-face {
font-family: "Inter";
src: url("/fonts/inter-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* --- Fallbacks metricos: matam o CLS do `swap` no H1 do hero ---------------
Sem estes blocos, a troca de Segoe UI/Arial para Manrope ExtraBold desloca
o H1 de 64px em varios pixels e o CLS estoura. Os overrides ajustam as
metricas da fonte de sistema para casar com as da fonte de marca. */
@font-face {
font-family: "Manrope Fallback";
src: local("Segoe UI Semibold"), local("Segoe UI"), local("Arial Bold"),
local("Arial"), local("Helvetica");
size-adjust: 103%;
ascent-override: 96%;
descent-override: 26%;
line-gap-override: 0%;
}
@font-face {
font-family: "Inter Fallback";
src: local("Segoe UI"), local("Arial"), local("Helvetica");
size-adjust: 100%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
/* =============================================================================
2. :root — todos os tokens
============================================================================= */
:root {
color-scheme: light;
/* ---------------------------------------------------------------------------
2.1 CORES DE MARCA — vindas do manual. NAO ALTERAR.
------------------------------------------------------------------------- */
--msf-indigo: #3A41D6; /* CTA, foco, links, icones */
--msf-indigo-deep: #2E33B8; /* hover/pressed e texto de link */
--msf-indigo-on-dark: #8E9BFF; /* texto/link sobre Ink — 7.13:1 */
--msf-indigo-mark-dark: #6E78FF; /* simbolo e BORDA sobre Ink */
--msf-green: #0EA572; /* SELO. nunca texto, nunca CTA */
--msf-green-deep: #0B8F5E; /* so em arte >=24px. nao e texto */
--msf-green-on-dark: #16C58C; /* verde sobre Ink — 8.09:1 */
--msf-ink: #0E1430; /* base escura + texto maximo */
--msf-amber: #F59E0B; /* offline/contingencia — so FUNDO */
--msf-red: #E5484D; /* erro — so icone/fundo, nunca texto */
/* ---------------------------------------------------------------------------
2.2 DERIVADOS DE ACESSIBILIDADE
Existem porque o hex de marca REPROVA no papel indicado.
NAO EXISTE `--msf-green-action`. Foi removido de proposito (auditoria 08,
item BAIXA): ele institucionalizava um botao verde com texto branco, que o
manual §3.3 proibe e que a regra de ouro repete. A resposta correta para
"branco sobre botao verde" e NAO EXISTIR botao verde.
Teste de aceite: `grep -n "green-action" static/css/` deve voltar vazio.
------------------------------------------------------------------------- */
--msf-green-text: #0A8155; /* 4.90 s/ #FFFFFF · 4.54 s/ #F5F6FB */
--msf-green-ink: #07603F; /* 6.56 s/ tint indigo · 6.53 s/ tint verde */
--msf-amber-text: #7A4E05; /* 6.34 s/ amber-tint · 7.19 s/ branco */
--msf-red-strong: #C93C41; /* 4.63 s/ off-white · 4.99 s/ branco */
--msf-red-text: #B3282C; /* 5.52 s/ red-tint */
/* ---------------------------------------------------------------------------
2.3 NEUTROS E TINTS
------------------------------------------------------------------------- */
--msf-white: #FFFFFF;
--msf-off-white: #F5F6FB;
--msf-indigo-tint: #ECEDFB; /* superficie tintada / card destacado */
--msf-indigo-tint-deep: #E1E3F8; /* estado :active de controles claros */
--msf-green-tint: #DDF2EB;
--msf-amber-tint: #FDEFD8;
--msf-red-tint: #FCE9EA;
--msf-border: #DEE0EC; /* 1.22:1 — DECORATIVO. nunca fronteira
percebida de controle */
--msf-border-control: #7B8193; /* 3.89 s/ branco · 3.60 s/ off-white ·
3.34 s/ indigo-tint · 3.33 s/ green-tint */
--msf-ink-elevated: #1C223C; /* card dentro de secao Ink */
--msf-ink-divider: #252C55; /* divisoria e :active no escuro */
--msf-ink-border-control: #6E78FF; /* 4.99 s/ #0E1430 · 4.31 s/ #1C223C.
CORRECAO da auditoria 08 (ALTA): era #5862A8, que da 2.77:1 sobre o
ink-elevated e REPROVA o minimo de 3:1 de componente de UI (WCAG 1.4.11).
Qualquer input/checkbox/botao-outline dentro de card elevado em secao
escura ficava com fronteira invisivel. */
/* ---------------------------------------------------------------------------
2.4 SUPERFICIES (semanticas)
Sao as UNICAS cinco superficies claras + duas escuras da pagina. Nao existe
background-image, gradiente nem foto sob texto — e por isso que o
contrast-check.py consegue provar a conformidade da pagina inteira.
------------------------------------------------------------------------- */
--surface-page: var(--msf-off-white);
--surface-card: var(--msf-white);
--surface-sunken: var(--msf-indigo-tint);
--surface-accent: var(--msf-indigo-tint);
--surface-pressed: var(--msf-indigo-tint-deep);
--surface-success: var(--msf-green-tint);
--surface-warning: var(--msf-amber-tint);
--surface-warning-solid: var(--msf-amber);
--surface-danger: var(--msf-red-tint);
--surface-inverse: var(--msf-ink);
--surface-inverse-raised: var(--msf-ink-elevated);
--surface-inverse-pressed:var(--msf-ink-divider);
--surface-brand: var(--msf-indigo);
--surface-brand-hover: var(--msf-indigo-deep);
/* ---------------------------------------------------------------------------
2.5 TEXTO — cada token traz o ratio em que foi aprovado
------------------------------------------------------------------------- */
--text-strong: var(--msf-ink); /* 16.75 s/ off-white */
--text-body: var(--msf-ink); /* 18.08 s/ branco */
--text-muted: #5A6178; /* 5.70 s/ off-white */
--text-placeholder: #6A7186; /* 4.86 s/ BRANCO —
PISO ABSOLUTO do sistema. So vale sobre superficie branca ou off-white
(4.51). Sobre indigo-tint da 4.18 e REPROVA — por isso todo input do site
tem fundo branco, sem excecao. */
--text-link: var(--msf-indigo-deep); /* 8.53 s/ off-white */
--text-link-hover: var(--msf-ink);
/* --text-success: verde como TEXTO.
4.90 s/ #FFFFFF e 4.54 s/ #F5F6FB — VALIDO SOMENTE sobre essas duas.
Sobre superficie tintada REPROVA: 4.22 s/ #ECEDFB e 4.20 s/ #DDF2EB.
Sobre qualquer tint use --text-success-on-tint (#07603F).
(Correcao da auditoria 08, item MEDIA: o comentario original dizia
"4.54:1" como se fosse valor unico para as 4 superficies.) */
--text-success: var(--msf-green-text);
--text-success-on-tint: var(--msf-green-ink); /* 6.56 / 6.53 */
--text-warning: var(--msf-amber-text); /* 6.34 s/ amber-tint */
--text-danger: var(--msf-red-strong); /* 4.63 s/ off-white */
--text-danger-on-tint: var(--msf-red-text); /* 5.52 s/ red-tint */
--text-on-brand: var(--msf-white); /* 7.22 s/ indigo */
--text-on-warning-solid: var(--msf-ink); /* 8.42 s/ ambar */
--text-on-inverse: var(--msf-white); /* 18.08 s/ Ink */
--text-muted-on-inverse: #9AA0C8; /* 7.09 s/ Ink ·
6.13 s/ ink-elevated */
--text-link-on-inverse: var(--msf-indigo-on-dark);/* 7.13 s/ Ink */
--text-success-on-inverse:var(--msf-green-on-dark); /* 8.09 s/ Ink */
/* ---------------------------------------------------------------------------
2.6 BORDAS
------------------------------------------------------------------------- */
--border-subtle: 1px solid var(--msf-border);
--border-control: 1px solid var(--msf-border-control);
--border-control-2: 2px solid var(--msf-border-control);
--border-brand: 1px solid var(--msf-indigo);
--border-brand-2: 2px solid var(--msf-indigo);
--border-danger: 1px solid var(--msf-red-strong);
--border-inverse-subtle: 1px solid var(--msf-ink-divider);
--border-inverse-control: 1px solid var(--msf-ink-border-control);
/* ---------------------------------------------------------------------------
2.7 TIPOGRAFIA — familias
------------------------------------------------------------------------- */
--font-display: "Manrope", "Manrope Fallback", ui-sans-serif, system-ui,
"Segoe UI", Roboto, sans-serif;
--font-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui,
"Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
monospace;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
/* ---------------------------------------------------------------------------
2.8 ESCALA TIPOGRAFICA FLUIDA — ancorada em 375px -> 1440px, base 16px
------------------------------------------------------------------------- */
--fs-display: clamp(2.25rem, 1.591rem + 2.81vw, 4rem); /* 36 -> 64 */
--fs-h1: clamp(2rem, 1.624rem + 1.60vw, 3rem); /* 32 -> 48 */
--fs-h2: clamp(1.625rem, 1.390rem + 1.00vw, 2.25rem); /* 26 -> 36 */
--fs-h3: clamp(1.25rem, 1.156rem + 0.40vw, 1.5rem); /* 20 -> 24 */
--fs-h4: clamp(1.0625rem, 1.016rem + 0.20vw, 1.1875rem); /* 17 -> 19 */
--fs-lead: clamp(1.125rem, 1.031rem + 0.40vw, 1.375rem); /* 18 -> 22 */
--fs-body: clamp(1rem, 0.977rem + 0.10vw, 1.0625rem); /* 16 -> 17 */
--fs-body-sm: 1rem; /* 16px — PISO ABSOLUTO de prosa */
--fs-caption: 0.875rem; /* 14px — PISO de metadado. nunca prosa */
--fs-eyebrow: 0.875rem; /* 14px — CORRECAO da auditoria 08 (era 0.8125rem
/13px). O eyebrow nao e metadado: e o rotulo de categoria da secao, lido
por todo mundo. 13px + caixa alta + tracking largo e a combinacao menos
legivel possivel para o publico de 32-58 anos. */
--fs-price: clamp(2.25rem, 1.874rem + 1.60vw, 3.25rem); /* 36 -> 52 */
--fs-code: clamp(1.375rem, 1.234rem + 0.60vw, 1.75rem); /* 22 -> 28
codigo de ativacao — e o entregavel do funil inteiro */
/* line-height */
--lh-display: 1.05;
--lh-heading: 1.18;
--lh-h3: 1.30;
--lh-lead: 1.55;
--lh-body: 1.60; /* nunca abaixo de 1.5 (WCAG 1.4.12) */
--lh-tight: 1.40;
--lh-ui: 1.20;
/* tracking */
--ls-display: -0.022em;
--ls-heading: -0.014em;
--ls-body: 0em;
--ls-eyebrow: 0.06em; /* CORRECAO da auditoria 08 (era 0.09em): tracking
largo separa as letras alem do agrupamento
natural da palavra e piora a leitura em caixa alta */
--ls-code: 0.14em;
--ls-wordmark:-0.045em;
/* ---------------------------------------------------------------------------
MEDIDA DE LINHA — em `em`, nao em `ch`
CORRECAO da auditoria 08 (ALTA): `ch` e a largura do glifo "0" (0.6309em
em Inter), nao a largura media de caractere de prosa pt-BR (0.4814em).
Fator 1.31 — logo 68ch rendia ~89 caracteres por linha, estourando o teto
de 80 do WCAG 1.4.8 que a propria spec dizia perseguir. Em `em` a medida
e imune a troca de fonte.
------------------------------------------------------------------------- */
--measure-prose: 33em; /* ~68 caracteres — prosa corrida, FAQ, aviso legal */
--measure-lead: 25em; /* ~52 caracteres — lead do hero */
--measure-card: 22em; /* ~46 caracteres — texto dentro de card */
/* ---------------------------------------------------------------------------
2.9 ESPACAMENTO — base 4px
------------------------------------------------------------------------- */
--space-0: 0;
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.25rem; /* 20 */
--space-6: 1.5rem; /* 24 */
--space-8: 2rem; /* 32 */
--space-10: 2.5rem; /* 40 */
--space-12: 3rem; /* 48 */
--space-16: 4rem; /* 64 */
--space-20: 5rem; /* 80 */
--space-24: 6rem; /* 96 */
--space-32: 8rem; /* 128 */
--section-y: clamp(3.5rem, 2.5rem + 4.3vw, 6.5rem);
--gap-grid: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
/* layout */
--container-max: 75rem; /* 1200px */
--container-narrow: 46rem; /* 736px — formulario de cadastro */
--container-pad: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem);
--header-h: 4rem; /* 64px < 1024 */
--header-h-lg: 4.5rem; /* 72px >= 1024 */
/* alvos de toque (WCAG 2.5.5 / 2.5.8) */
--tap-min: 2.75rem; /* 44px */
--control-h: 3rem; /* 48px — inputs e botoes */
--control-h-lg: 3.5rem; /* 56px — CTA do hero e de secao */
/* ---------------------------------------------------------------------------
2.10 RAIO
------------------------------------------------------------------------- */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 10px; /* botoes, inputs */
--radius-lg: 14px; /* cards */
--radius-xl: 20px; /* card de plano, painel do hero */
--radius-2xl: 28px;
--radius-pill: 999px;
/* ---------------------------------------------------------------------------
2.11 SOMBRAS — sempre tintadas com Ink, nunca preto puro
------------------------------------------------------------------------- */
--shadow-xs: 0 1px 2px rgba(14, 20, 48, 0.06);
--shadow-sm: 0 1px 3px rgba(14, 20, 48, 0.08),
0 1px 2px rgba(14, 20, 48, 0.04);
--shadow-md: 0 4px 12px rgba(14, 20, 48, 0.08),
0 2px 4px rgba(14, 20, 48, 0.04);
--shadow-lg: 0 12px 32px rgba(14, 20, 48, 0.10),
0 4px 8px rgba(14, 20, 48, 0.05);
--shadow-xl: 0 24px 56px rgba(14, 20, 48, 0.14),
0 8px 16px rgba(14, 20, 48, 0.06);
--shadow-cta: 0 8px 20px rgba(58, 65, 214, 0.28);
--shadow-bar: 0 -4px 12px rgba(14, 20, 48, 0.10);
--shadow-inverse: 0 16px 40px rgba(0, 0, 0, 0.45);
/* ---------------------------------------------------------------------------
2.12 FOCO — visivel e nunca removido
------------------------------------------------------------------------- */
--focus-width: 3px;
--focus-offset: 2px;
--focus-color: var(--msf-indigo); /* >=6.18 em toda
superficie clara */
--focus-color-inverse: var(--msf-indigo-on-dark); /* 7.13 s/ Ink ·
6.17 s/ elevated */
--focus-halo: 0 0 0 4px rgba(58, 65, 214, 0.20);
--focus-halo-danger: 0 0 0 4px rgba(201, 60, 65, 0.22);
--focus-ring: var(--focus-width) solid var(--focus-color);
--focus-ring-inverse: var(--focus-width) solid var(--focus-color-inverse);
/* ---------------------------------------------------------------------------
2.13 MOVIMENTO
------------------------------------------------------------------------- */
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
/* ---------------------------------------------------------------------------
2.14 CAMADAS
------------------------------------------------------------------------- */
--z-base: 0;
--z-sticky: 100;
--z-header: 200;
--z-overlay: 800;
--z-modal: 900;
--z-toast: 1000;
}
/* =============================================================================
3. .on-ink — secoes escuras (S13 CTA final e o footer)
-----------------------------------------------------------------------------
Remapeia os tokens semanticos. Os componentes nao precisam saber em que
fundo estao: `.btn--secondary` dentro de `.on-ink` acerta sozinho.
============================================================================= */
.on-ink {
color-scheme: dark;
--surface-page: var(--msf-ink);
--surface-card: var(--msf-ink-elevated);
--surface-sunken: var(--msf-ink-elevated);
--surface-accent: var(--msf-ink-elevated);
--surface-pressed: var(--msf-ink-divider);
--text-strong: var(--msf-white); /* 18.08 */
--text-body: var(--msf-white); /* 18.08 */
--text-muted: var(--text-muted-on-inverse); /* 7.09 */
--text-placeholder: var(--text-muted-on-inverse); /* 7.09 */
--text-link: var(--msf-indigo-on-dark); /* 7.13 */
--text-link-hover: var(--msf-white);
--text-success: var(--msf-green-on-dark); /* 8.09 */
--text-success-on-tint: var(--msf-green-on-dark); /* 7.00 s/ elevated */
/* Bordas no escuro. #6E78FF, nunca #5862A8 — ver §2.3. */
--msf-border: var(--msf-ink-divider);
--msf-border-control: var(--msf-ink-border-control);
--focus-color: var(--focus-color-inverse);
--shadow-sm: var(--shadow-inverse);
--shadow-md: var(--shadow-inverse);
--shadow-lg: var(--shadow-inverse);
background-color: var(--surface-page);
color: var(--text-body);
}
/* =============================================================================
4. RESET MODERNO
============================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
/* ancora nao pode parar escondida atras do header sticky */
scroll-padding-top: calc(var(--header-h) + var(--space-4));
}
@media (min-width: 1024px) {
html { scroll-padding-top: calc(var(--header-h-lg) + var(--space-4)); }
}
body {
margin: 0;
min-height: 100svh;
background-color: var(--surface-page);
color: var(--text-body);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: var(--fw-bold);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
color: var(--text-strong);
text-wrap: balance;
}
p, li { text-wrap: pretty; }
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
/* Listas de prosa recuperam os marcadores explicitamente em app.css. */
a {
color: var(--text-link);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
img, svg, video, canvas, picture {
display: block;
max-width: 100%;
}
img, video { height: auto; }
button, input, select, textarea, optgroup {
font: inherit;
color: inherit;
margin: 0;
}
button { background: none; border: none; }
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
border: 0;
border-block-start: var(--border-subtle);
margin: 0;
}
/* text-align: justify e PROIBIDO nesta pagina (WCAG 1.4.8 — "rios" de espaco).
Alinhamento a esquerda sempre, inclusive no aviso legal do rodape. */
/* =============================================================================
5. FOCO GLOBAL — nunca `outline: none` sem substituto
-----------------------------------------------------------------------------
NAO existe `border-radius` aqui. CORRECAO da auditoria 08 (MEDIA):
`border-radius` nao e propriedade de outline — ela altera o raio REAL do
elemento enquanto ele esta focado. Com `--radius-xs` o `.plan` (20px) e o
`.chip` (pill) mudavam de forma no instante do foco por teclado. Os
navegadores atuais ja desenham o outline seguindo o raio do proprio
elemento, entao a declaracao nao resolvia nada e so criava o salto visual.
============================================================================= */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
}
/* =============================================================================
6. MOVIMENTO REDUZIDO
============================================================================= */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}