/* ========================================================================== Syntis, design system do site institucional -------------------------------------------------------------------------- Fontes de verdade: • Identidade (cor, tipografia, logotipo, tema) → "Brand Book Syntis — 01 Visual Identity Foundations". Os tokens oficiais vivem em `syntis-tokens.css` (carregado ANTES desta folha) como var(--brand-*). • Comunicação e estrutura → "Brand Book Syntis — 03 Website & Marketing Guide" (§13: muito espaço em branco, hierarquia forte, poucas cores por peça, tipografia protagonista, interfaces como apoio). Esta folha é a camada semântica do site: mapeia os tokens de marca (var(--brand-*)) para os papéis usados pelos componentes (var(--color-*)). Nenhum componente referencia cor de marca ou fonte diretamente; trocar a identidade é trocar `syntis-tokens.css` e o bloco de primitivos abaixo. Sem build, sem dependência e sem CDN: as fontes são auto-hospedadas logo abaixo e o site não faz nenhuma requisição para fora do próprio domínio. ========================================================================== */ /* -------------------------------------------------------------------------- Fontes de marca auto-hospedadas (Brand Book 01, §12). Arquivos variáveis oficiais copiados de brand/fonts/. Nenhuma requisição sai do domínio. • Inter — corpo, UI e títulos de produto (§12). • Montserrat — display de marketing / títulos (§12, opcional adotado). • JetBrains Mono — dados técnicos e código (§12). São fontes variáveis; um arquivo cobre toda a faixa de pesos que o site usa. -------------------------------------------------------------------------- */ @font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/assets/fonts/inter-variable.woff2") format("woff2"); } @font-face{ font-family:"Montserrat"; font-style:normal; font-weight:100 900; font-display:swap; /* Subconjunto latin (pt-BR) do arquivo variável oficial: 216 KB → ~29 KB, eixo de peso preservado. Só o display (h1/h2) usa Montserrat; glifos fora do latin caem no fallback Inter. Regerar com: python -m fontTools.subset brand/fonts/montserrat-variable.woff2 --output-file=assets/fonts/montserrat-latin.woff2 --flavor=woff2 --unicodes="U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212" */ src:url("/assets/fonts/montserrat-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+2000-206F,U+2074,U+20AC,U+2122,U+2212; } @font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:100 800; font-display:swap; src:url("/assets/fonts/jetbrains-mono-variable.woff2") format("woff2"); } /* ========================================================================== 1. TOKENS ========================================================================== */ :root{ /* --- primitivos --------------------------------------------------------- TODA cor de marca vem de var(--brand-*), definidos em syntis-tokens.css (Brand Book 01, §23–24). Este site é fixado no tema claro via data-theme="light" no ; abaixo mapeamos os tokens de marca para os papéis semânticos do site. Nenhum hex de marca solto: só o azul (marca/ ação), os neutros oficiais e a escala navy da seção 22. Escala navy (§22): usada nas peças de fundo escuro (rodapé, seções de destaque) que permanecem escuras independentemente do tema. São os valores oficiais do tema escuro do Brand Book, aqui aplicados como paleta fixa. */ --navy-bg:#0B0F19; /* brand-background (escuro) */ --navy-surface:#111827; /* brand-surface (escuro) */ --navy-elevated:#1E293B; /* brand-surface-elevated */ --navy-border:#222C3E; /* brand-border (escuro) */ --navy-text:#F8FAFC; /* brand-text-primary (escuro)*/ --navy-text-2:#94A3B8; /* brand-text-secondary (esc.)*/ --navy-link:#60A5FA; /* brand-primary/ação (esc.) */ /* --- cor: superfícies --------------------------------------------------- Modelo de elevação do Brand Book (§22): página em #F8FAFC, cards/superf. sobem para #FFFFFF com borda, não com sombra forte. */ --color-bg:var(--brand-background); /* página #F8FAFC */ --color-surface:var(--brand-background); /* preenchimento sutil / hover */ --color-surface-raised:var(--brand-surface); /* card/painel #FFFFFF */ --color-surface-inverse:var(--navy-bg); --color-surface-inverse-raised:var(--navy-surface); /* --- cor: marca --------------------------------------------------------- Distinção do Brand Book (§22): brand-primary é TEXTO/AÇÃO e muda por tema (#013EEC no claro, #60A5FA no escuro); brand-primary-fill é PREENCHIMENTO e permanece #013EEC nos dois temas (com texto branco por cima, 7.24:1). Por isso o CTA sólido usa --color-brand-fill, não --color-brand. */ --color-brand:var(--brand-primary); /* texto/ação/link */ --color-brand-strong:var(--brand-primary-hover); /* Cor de link de conteúdo. No claro é o azul forte (passa sobre branco); no escuro vira o azul claro, porque o forte (#3B82F6) só alcança ~4:1 sobre as superfícies elevadas (#1E293B). Ver override no bloco do tema escuro. */ --color-link:var(--color-brand-strong); --color-brand-fill:var(--brand-primary-fill); /* CTA sólido #013EEC (fixo) */ --color-brand-fill-hover:var(--brand-primary-hover); /* hover do CTA (claro) */ /* Tinta pálida de marca, derivada do azul oficial: badges e faixa de ação. Uso de acento (§4 contenção cromática), nunca preenchimento saturado. */ --color-brand-subtle:color-mix(in srgb, var(--brand-primary) 10%, #ffffff); --color-brand-on-inverse:var(--navy-link); /* ação sobre navy #60A5FA */ /* --- cor: texto --------------------------------------------------------- */ --color-text:var(--brand-text-primary); /* #0B1320 */ --color-text-secondary:var(--brand-text-secondary); /* #64748B */ --color-text-muted:var(--brand-text-secondary); /* #64748B (AA em texto normal) */ --color-text-on-brand:#ffffff; /* branco sobre azul (7.24:1) */ --color-text-inverse:var(--navy-text-2); /* secundário sobre navy */ --color-text-inverse-strong:var(--navy-text); /* principal sobre navy */ /* --- cor: bordas -------------------------------------------------------- */ --color-border:var(--brand-border); /* #E2E8F0 separação */ --color-border-strong:var(--brand-text-secondary); /* #64748B: controles >=3:1 (1.4.11)*/ --color-border-inverse:var(--navy-border); /* --- cor: feedback ------------------------------------------------------ Cores principais vêm de var(--brand-feedback-*) (§10/§23). Os tons de fundo/borda sutis (badge, aviso) não existem na paleta de marca e são derivados aqui, harmonizados com o matiz frio. Success: checklist, badge, tabela; danger: validação do formulário. */ /* Texto: o verde de marca #15803D só alcança 5:1 em branco puro; sobre a tinta clara (badge) caía para 4.27:1. Escurecido ~15% só para TEXTO — o fundo e a borda continuam vindo do verde de marca puro. */ --color-success:color-mix(in srgb, var(--brand-feedback-success) 85%, #000000); --color-success-subtle:color-mix(in srgb, var(--brand-feedback-success) 12%, #ffffff); --color-success-border:color-mix(in srgb, var(--brand-feedback-success) 35%, #ffffff); /* Texto: mesmo caso do success — o âmbar de marca não alcança 4.5:1 sobre a própria tinta clara. Escurecido ~12% só para TEXTO; fundo/borda seguem no âmbar de marca puro. */ --color-warning:color-mix(in srgb, var(--brand-feedback-warning) 88%, #000000); --color-warning-subtle:color-mix(in srgb, var(--brand-feedback-warning) 12%, #ffffff); --color-warning-border:color-mix(in srgb, var(--brand-feedback-warning) 35%, #ffffff); /* Texto: mesmo tratamento de success/warning, para o vermelho passar em AA sobre tinta clara (badges, mensagens de erro). */ --color-danger:color-mix(in srgb, var(--brand-feedback-error) 85%, #000000); /* --- cor: foco ---------------------------------------------------------- */ --color-focus:var(--brand-focus); --color-focus-inverse:var(--navy-link); /* --- tipografia (Brand Book 01, §12) ------------------------------------ Inter no corpo/UI; Montserrat no display de marketing; JetBrains Mono em dados técnicos. O wordmark é arte fechada (SVG), não tipografia viva. */ --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --font-display:"Montserrat","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --fs-caption:.875rem; /* 14px, legendas, rodapé */ --fs-sm:.9375rem; /* 15px, corpo secundário */ --fs-body:1.0625rem; /* 17px, corpo */ --fs-lead:clamp(1.0625rem,2.2vw,1.28rem); /* apoio do título */ --fs-label:.9375rem; /* rótulo de formulário */ --fs-eyebrow:.8125rem; /* 13px, caixa alta + tracking */ --fs-h3:1.125rem; --fs-h2:clamp(1.55rem,3.4vw,2.2rem); --fs-h1:clamp(2rem,5.2vw,3.35rem); /* Inter e Montserrat são variáveis e cobrem toda a faixa; os pesos abaixo são reais da família, não sintetizados pelo navegador. */ --fw-normal:400; --fw-medium:500; --fw-bold:600; --fw-heavy:700; --fw-display:800; --lh-tight:1.2; /* títulos */ --lh-snug:1.4; /* leads */ --lh-body:1.6; /* corpo */ --tracking-tight:-.02em; --tracking-wide:.08em; --measure:62ch; /* largura máxima de leitura confortável */ --measure-narrow:52ch; --measure-heading:34ch; /* título não deve varrer o contêiner inteiro */ /* --- espaçamento (base 4) ----------------------------------------------- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --section-y:clamp(56px,8vw,104px); --panel-p:clamp(24px,3.4vw,38px); --panel-p-lg:clamp(28px,4vw,48px); /* --- forma -------------------------------------------------------------- */ --radius-sm:8px; --radius-md:10px; --radius-lg:14px; --radius-pill:999px; --border-width:1px; --control-h:56px; /* botão e input: alvo de toque confortável */ --control-h-sm:46px; /* topbar */ --touch-min:44px; /* mínimo WCAG 2.5.8 */ /* --- elevação (§13: usar com parcimônia) -------------------------------- */ --shadow-md:0 14px 40px -20px rgba(23,23,23,.25); --shadow-lg:0 18px 48px -18px rgba(23,23,23,.28); --shadow-inverse:0 22px 60px -22px rgba(0,0,0,.7); /* --- movimento (§21: "sem excesso de animações") ------------------------ */ --duration-fast:120ms; --ease-standard:ease; /* --- layout ------------------------------------------------------------- */ --wrap:1120px; --wrap-doc:720px; --gutter:20px; /* --- breakpoints (referência; media queries não aceitam var) ------------ sm 480px: telefone largo / compactação da topbar md 720px: 2 e 3 colunas lg 960px: hero em 2 colunas, grades densas xl 1200px: reservado ------------------------------------------------------------------------ */ } /* -------------------------------------------------------------------------- TEMA ESCURO (Brand Book 01, §22) — segundo tema oficial de primeira classe. Fixado por data-theme="dark" no (o seletor de tema persiste a escolha). Só os VALORES mudam; os componentes continuam lendo os mesmos --color-*. Regras de acessibilidade aplicadas: • Texto/ação de marca vira #60A5FA (#013EEC reprova sobre navy: 2.57:1). • O CTA sólido permanece --color-brand-fill #013EEC + branco (7.24:1). • As peças "inverse" (que no claro eram um momento navy sobre página clara) passam a ser superfícies ELEVADAS sobre a página escura, para não sumirem. -------------------------------------------------------------------------- */ :root[data-theme="dark"]{ /* superfícies: página #0B1320, cards #1E293B (elevação por cor, não sombra) */ --color-bg:var(--brand-background); /* #0B1320 */ --color-surface:var(--brand-background); /* preenchimento sutil/hover */ --color-surface-raised:var(--brand-surface); /* card/painel #1E293B */ --color-surface-inverse:var(--brand-surface); /* faixa de destaque #1E293B */ --color-surface-inverse-raised:var(--brand-surface-elevated); /* #273449 */ /* marca */ --color-brand:var(--brand-primary); /* #60A5FA texto/ação/link */ --color-brand-strong:var(--brand-primary-hover); --color-link:var(--color-brand); /* link acessível sobre elevado */ --color-brand-fill:var(--brand-primary-fill); /* #013EEC (fixo) */ --color-brand-fill-hover:#0130C4; /* hover do CTA sólido (fixo) */ /* 10% (não 22%): acima disso a tinta fica clara demais e o texto de marca (mesmo o #60A5FA) não alcança 4.5:1 como rótulo sobre ela no tema escuro. */ --color-brand-subtle:color-mix(in srgb, var(--brand-primary) 10%, var(--brand-surface)); --color-brand-on-inverse:var(--navy-link); /* texto */ --color-text:var(--brand-text-primary); /* #F8FAFC */ --color-text-secondary:var(--brand-text-secondary); /* #94A3B8 */ --color-text-muted:var(--brand-text-secondary); --color-text-on-brand:#ffffff; --color-text-inverse:var(--navy-text-2); --color-text-inverse-strong:var(--navy-text); /* bordas */ --color-border:var(--brand-border); /* #334155 */ --color-border-strong:var(--brand-text-secondary); /* #94A3B8 (>=3:1 no escuro) */ --color-border-inverse:var(--navy-border); /* feedback (§22, validados sobre navy) */ --color-success:var(--brand-feedback-success); /* #4ADE80 */ --color-success-subtle:color-mix(in srgb, var(--brand-feedback-success) 16%, var(--brand-surface)); --color-success-border:color-mix(in srgb, var(--brand-feedback-success) 40%, var(--brand-surface)); --color-warning:var(--brand-feedback-warning); /* #FBBF24 */ --color-warning-subtle:color-mix(in srgb, var(--brand-feedback-warning) 16%, var(--brand-surface)); --color-warning-border:color-mix(in srgb, var(--brand-feedback-warning) 40%, var(--brand-surface)); --color-danger:var(--brand-feedback-error); /* #F87171 */ /* foco */ --color-focus:var(--brand-focus); /* #60A5FA */ --color-focus-inverse:var(--navy-link); } /* -------------------------------------------------------------------------- Contraste no tema escuro: como TEXTO sobre as superfícies tingidas/elevadas escuras, o azul de ação --color-brand-strong (#3B82F6) não alcança 4.5:1. Nessas peças (rótulos de marca sobre tinta escura) o texto passa a usar --color-brand (#60A5FA), que com a tinta a 10% cumpre AA. Links sobre o fundo da página continuam em brand-strong, onde já passam. -------------------------------------------------------------------------- */ :root[data-theme="dark"] .badge-brand{color:var(--color-brand)} :root[data-theme="dark"] .step-num{color:var(--color-brand)} /* ========================================================================== 2. BASE ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} body{ margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; } img{max-width:100%; height:auto; display:block} a{color:var(--color-link)} a:hover{color:var(--color-brand)} /* Foco visível e consistente em tudo que recebe teclado (2.4.7 / 2.4.11). */ :where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{ outline:3px solid var(--color-focus); outline-offset:2px; border-radius:var(--radius-sm); } /* Em superfícies escuras o anel azul-600 perde contraste: usa o tom claro. */ .section-inverse :where(a,button,summary,[tabindex]):focus-visible, footer :where(a,button,[tabindex]):focus-visible{ outline-color:var(--color-focus-inverse); } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } } /* ========================================================================== 3. TIPOGRAFIA Escala única para todo o site. Não crie tamanhos novos nas páginas. ========================================================================== */ h1,h2,h3{margin:0; line-height:var(--lh-tight); letter-spacing:var(--tracking-tight)} /* Display de marketing em Montserrat (Brand Book 01, §12): títulos protagonistas e coerentes com o wordmark. h3 e abaixo seguem em Inter (títulos de produto). */ h1{font-family:var(--font-display); font-size:var(--fs-h1); font-weight:var(--fw-display)} h2{font-family:var(--font-display); font-size:var(--fs-h2); font-weight:var(--fw-heavy)} h3{font-size:var(--fs-h3); font-weight:var(--fw-bold)} p{margin:0} .lead{font-size:var(--fs-lead); line-height:var(--lh-snug); color:var(--color-text-secondary)} .body-sm{font-size:var(--fs-sm); color:var(--color-text-muted)} .caption{font-size:var(--fs-caption); color:var(--color-text-muted)} .muted{color:var(--color-text-muted)} .narrow{max-width:var(--measure)} .narrower{max-width:var(--measure-narrow)} /* ========================================================================== 4. LAYOUT ========================================================================== */ .wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)} section{padding:var(--section-y) 0; border-top:var(--border-width) solid var(--color-border)} section.plain{border-top:0} /* O cabeçalho é fixo: sem isto, o link de âncora esconde o título da seção debaixo dele. 72 px de topbar + respiro. */ :target,section[id],[id]{scroll-margin-top:88px} /* Banda alternada: superfície branca sobre a página #F8FAFC (§22). */ .section-tinted{background:var(--color-surface-raised)} .section-brand{background:var(--color-brand-subtle)} .section-inverse{background:var(--color-surface-inverse); color:var(--color-text-inverse-strong)} .section-inverse h2{color:var(--color-text-inverse-strong)} .section-inverse .lead{color:var(--navy-text-2)} /* Título de seção não varre a largura toda do contêiner: a hierarquia vem da escala e do respiro, não do comprimento da linha (Brand Book §13). */ section > .wrap > h2{max-width:var(--measure-heading)} /* Ritmo vertical dentro da seção: título → apoio → conteúdo. */ .section-lead{margin-top:var(--space-4)} .section-body{margin-top:var(--space-10)} /* Grade genérica de cartões. */ .grid{display:grid; gap:var(--space-5); grid-template-columns:1fr} @media (min-width:720px){ .grid.cols-2{grid-template-columns:repeat(2,1fr)} .grid.cols-3{grid-template-columns:repeat(3,1fr)} } /* ========================================================================== 5. ACESSIBILIDADE: utilitários ========================================================================== */ .sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0} .skip{position:absolute; left:-9999px} .skip:focus{ left:var(--space-4); top:var(--space-4); z-index:100; background:var(--color-brand-fill); color:var(--color-text-on-brand); padding:var(--space-3) var(--space-5); border-radius:var(--radius-sm); text-decoration:none; } /* Contêiner que rola na horizontal precisa ser alcançável por teclado: use junto de tabindex="0" e role="region" com aria-label. */ .scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch} .scroll-x:focus-visible{outline:3px solid var(--color-focus); outline-offset:2px} /* ========================================================================== 6. COMPONENTES: badge Um só componente para "eyebrow" e "tag": muda a variante, não o CSS. ========================================================================== */ .badge{ display:inline-block; font-size:var(--fs-eyebrow); font-weight:var(--fw-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; line-height:1.3; border-radius:var(--radius-pill); padding:var(--space-2) var(--space-4); border:var(--border-width) solid transparent; } .badge-brand{color:var(--color-brand-strong); background:var(--color-brand-subtle)} .badge-success{color:var(--color-success); background:var(--color-success-subtle); border-color:var(--color-success-border)} .badge-neutral{color:var(--color-text-muted); background:var(--color-surface-raised); border-color:var(--color-border-strong)} .badge-inverse{color:var(--color-brand-on-inverse); background:var(--color-surface-inverse-raised)} /* ========================================================================== 7. COMPONENTES: botão Variantes: primary (uma por seção, §8 do Brand Book) e ghost. Estados: default, hover, active, focus-visible, disabled. ========================================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3); min-height:var(--control-h); padding:0 var(--space-8); border:var(--border-width) solid transparent; border-radius:var(--radius-md); font-family:inherit; font-size:var(--fs-body); font-weight:var(--fw-bold); line-height:1.2; text-align:center; text-decoration:none; cursor:pointer; transition:background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } /* CTA sólido: sempre o preenchimento de marca (#013EEC) + texto branco nos dois temas (§22). Não usa --color-brand porque no escuro ele vira #60A5FA. */ .btn-primary{background:var(--color-brand-fill); color:var(--color-text-on-brand)} .btn-primary:hover{background:var(--color-brand-fill-hover); color:var(--color-text-on-brand)} .btn-primary:active{background:var(--color-brand-fill-hover)} .btn-ghost{background:var(--color-surface-raised); color:var(--color-text); border-color:var(--color-border-strong)} .btn-ghost:hover{background:var(--color-surface); color:var(--color-text)} .btn-ghost:active{background:var(--color-border)} .btn:disabled,.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; pointer-events:none; } .btn-block{width:100%} .btn-row{display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-8)} .btn-row-center{justify-content:center} /* ========================================================================== 8. COMPONENTES: cabeçalho e navegação ========================================================================== */ .topbar{ position:sticky; top:0; z-index:50; background:var(--color-surface-raised); border-bottom:var(--border-width) solid var(--color-border); } .topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:72px} .brand{ display:flex; align-items:center; gap:11px; font-weight:var(--fw-heavy); font-size:1.08rem; color:var(--color-text); text-decoration:none; white-space:nowrap; min-height:var(--touch-min); } .brand:hover{color:var(--color-text)} .brand small{ display:block; font-size:.72rem; font-weight:var(--fw-medium); color:var(--color-text-muted); letter-spacing:.04em; text-transform:uppercase; margin-top:1px; } /* Logotipo oficial em SVG vetorial (Brand Book 01, §6). Header/rodapé claro: lockup horizontal positivo; rodapé/seções navy: versão negativa. Assinatura horizontal mínima ~120 px (§7): a 30 px de altura a largura fica ~128 px. Nada de sombra, filtro ou recolorização (§7 usos incorretos). */ .brand-lockup{display:block; flex-shrink:0; height:30px; width:auto} /* Símbolo oficial (squircle já vem com os cantos arredondados no vetor). Usado como marca de produto no Syntis Comprova, ao lado do nome do produto. */ .mark{display:block; flex-shrink:0; width:34px; height:34px} .topbar nav{display:flex; align-items:center; gap:var(--space-1)} .topbar .link{ display:inline-flex; align-items:center; min-height:var(--touch-min); padding:0 var(--space-4); border-radius:var(--radius-sm); color:var(--color-text-secondary); text-decoration:none; font-weight:var(--fw-medium); font-size:var(--fs-sm); } .topbar .link:hover{background:var(--color-surface); color:var(--color-text)} .topbar .btn{min-height:var(--control-h-sm); padding:0 var(--space-5); font-size:var(--fs-sm)} /* Botão de alternância de tema (ícones Lucide outline, §15). Alvo de 44 px. */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:var(--touch-min); height:var(--touch-min); padding:0; border:var(--border-width) solid transparent; border-radius:var(--radius-sm); background:transparent; color:var(--color-text-secondary); cursor:pointer; } .theme-toggle:hover{background:var(--color-surface); color:var(--color-text)} .theme-toggle svg{width:20px; height:20px; display:block} /* Claro mostra a lua (ir para escuro); escuro mostra o sol (ir para claro). */ .theme-toggle .icon-sun{display:none} :root[data-theme="dark"] .theme-toggle .icon-moon{display:none} :root[data-theme="dark"] .theme-toggle .icon-sun{display:block} /* Lockup do cabeçalho troca de versão com o tema: positivo (texto navy) sobre cabeçalho claro; negativo (texto branco) sobre cabeçalho escuro. */ .brand-lockup-dark{display:none} :root[data-theme="dark"] .brand-lockup-light{display:none} :root[data-theme="dark"] .brand-lockup-dark{display:block} /* Abaixo de 960 px só ficam a marca, o acesso ao sistema e o CTA principal. Os links de seção continuam alcançáveis pela rolagem e pelo rodapé, nenhum recurso é removido, só a densidade do cabeçalho. */ @media (max-width:959px){ .topbar .hide-s{display:none} } /* Telas estreitas: encolhe o CTA sem sacrificar o alvo de toque de 44 px. */ @media (max-width:479px){ .topbar .wrap{padding:0 14px; gap:var(--space-2)} .brand{font-size:.98rem; gap:var(--space-2)} .brand small{display:none} .mark{width:30px; height:30px; font-size:.95rem} .topbar .link{padding:0 var(--space-2)} .topbar .btn{padding:0 14px; min-height:var(--touch-min)} /* Rótulos encurtam visualmente; o aria-label no elemento preserva o nome acessível completo (WCAG 2.5.3, o nome contém o texto visível). */ .topbar .full{display:none} } /* ========================================================================== 9. COMPONENTES: cartão Base + variantes. Não crie um cartão novo por página. ========================================================================== */ .card{ background:var(--color-surface-raised); border:var(--border-width) solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-6); } .card h3{margin-bottom:var(--space-2)} .card p{color:var(--color-text-muted); font-size:var(--fs-sm)} /* Destaque de produto: mais respiro, raio maior. */ .card-feature{border-radius:var(--radius-lg); padding:var(--panel-p)} .card-feature h3{font-size:clamp(1.3rem,2.6vw,1.7rem); margin:var(--space-4) 0 var(--space-3)} .card-feature p{font-size:var(--fs-body); color:var(--color-text-muted)} .card-feature p + p{margin-top:var(--space-3)} .card-feature .card-summary{font-size:var(--fs-lead); line-height:var(--lh-snug); color:var(--color-text-secondary)} /* Placeholder honesto: o que ainda não existe não finge ser produto. */ .card-outline{ background:var(--color-surface); border-style:dashed; border-color:var(--color-border-strong); border-radius:var(--radius-lg); padding:var(--panel-p); } .card-outline h3{margin:var(--space-4) 0 var(--space-3)} .card-outline p{font-size:var(--fs-body); color:var(--color-text-muted)} /* Problema: a barra lateral é recurso de leitura, para a pessoa varrer a lista, e por isso é neutra. Era âmbar, mas âmbar é `--color-warning`, uma cor com função de feedback definida; repetida em seis cartões seguidos virava decoração e deixava de significar "atenção" em qualquer outro lugar do site. Quem enuncia o problema é o texto em negrito, não a cor. */ .card-flag{border-left:3px solid var(--color-border-strong); padding:var(--space-5)} .card-flag strong{display:block; margin-bottom:var(--space-1)} .card-flag span{color:var(--color-text-muted); font-size:var(--fs-sm)} /* Painel: caixa de conversão (CTA final / formulário). */ .panel{ background:var(--color-surface-raised); border:var(--border-width) solid var(--color-border); border-radius:var(--radius-lg); padding:var(--panel-p-lg); box-shadow:var(--shadow-md); } /* ========================================================================== 10. COMPONENTES: etapa numerada Usado no método da home e na cadeia do Comprova. ========================================================================== */ .step{ background:var(--color-surface-raised); border:var(--border-width) solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-5); } .step h3{font-size:1rem; margin-bottom:var(--space-1)} .step p{font-size:var(--fs-sm); color:var(--color-text-muted)} .step-num{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--color-brand-subtle); color:var(--color-brand-strong); font-weight:var(--fw-heavy); font-size:var(--fs-sm); margin-bottom:var(--space-3); } /* ========================================================================== 11. COMPONENTES: listas ========================================================================== */ .checklist{list-style:none; padding:0; margin:var(--space-6) 0 0; display:grid; gap:11px} .checklist li{ display:flex; gap:11px; align-items:flex-start; font-size:var(--fs-sm); color:var(--color-text-secondary); } .checklist li::before{content:"✓"; color:var(--color-success); font-weight:var(--fw-heavy); flex-shrink:0} /* ========================================================================== 12. COMPONENTES: mídia (interface como prova, §13 do Brand Book) ========================================================================== */ .paper{ margin:0; background:var(--color-surface-raised); border:var(--border-width) solid var(--color-border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow-lg); } .paper img{width:100%} .paper figcaption{ padding:var(--space-4) var(--space-5); border-top:var(--border-width) solid var(--color-border); font-size:var(--fs-caption); color:var(--color-text-muted); background:var(--color-surface); } /* Sobre fundo escuro a moldura clara desaparece; a sombra faz o recorte. */ .section-inverse .paper{border-color:transparent; box-shadow:var(--shadow-inverse)} /* ========================================================================== 13. COMPONENTES: tabela comparativa ========================================================================== */ .table{width:100%; border-collapse:collapse; font-size:var(--fs-sm)} .table th,.table td{ text-align:left; padding:var(--space-4); vertical-align:top; border-bottom:var(--border-width) solid var(--color-border); } .table thead th{ font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); font-weight:var(--fw-bold); } .table tbody th{font-weight:var(--fw-medium); width:30%; min-width:180px} /* Estado positivo não fica só na cor: vem com ✓ (marcado no HTML como decorativo) e com o texto explicando o porquê. */ .table .yes{color:var(--color-success); font-weight:var(--fw-medium)} .tick{font-weight:var(--fw-heavy)} /* Abaixo de 720 px a tabela vira uma lista de comparações, uma por critério. Rolagem horizontal aqui esconderia justamente a última coluna, que é a informação que interessa. Os papéis ARIA estão declarados no HTML, então a troca de display não desmonta a semântica de tabela; o rótulo da coluna vem do atributo data-col. */ @media (max-width:719px){ .table,.table thead,.table tbody,.table tr,.table th,.table td{display:block; width:auto} .table thead{display:none} .table tr{ background:var(--color-surface-raised); border:var(--border-width) solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-5); margin-bottom:var(--space-3); } .table tbody th{ width:auto; min-width:0; padding:0 0 var(--space-3); font-size:var(--fs-body); font-weight:var(--fw-bold); color:var(--color-text); border-bottom:var(--border-width) solid var(--color-border); } .table td{padding:var(--space-3) 0 0; border:0} .table td::before{ content:attr(data-col); display:block; margin-bottom:2px; font-size:var(--fs-caption); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-muted); } /* Sem rolagem para rolar: o contêiner deixa de ser alvo de teclado. */ .scroll-x.table-adapts{overflow-x:visible} } /* ========================================================================== 14. COMPONENTES: perguntas frequentes ========================================================================== */ .faq{display:grid; gap:var(--space-3)} .faq details{ background:var(--color-surface-raised); border:var(--border-width) solid var(--color-border); border-radius:var(--radius-md); } .faq details[open]{border-color:var(--color-border-strong)} .faq summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:var(--control-h); padding:19px var(--space-6); font-weight:var(--fw-medium); cursor:pointer; list-style:none; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+"; font-size:1.4rem; color:var(--color-text-muted); line-height:1; flex-shrink:0} .faq details[open] summary::after{content:"−"} .faq summary:hover{background:var(--color-surface); border-radius:var(--radius-md)} .faq summary:focus-visible{outline-offset:-3px} .faq p{padding:0 var(--space-6) 21px; color:var(--color-text-muted); font-size:var(--fs-sm)} /* ========================================================================== 15. COMPONENTES: formulário Estados: default, hover, focus, inválido (após interação), desabilitado. ========================================================================== */ form{display:grid; gap:var(--space-4)} label{display:block; font-weight:var(--fw-medium); font-size:var(--fs-label); margin-bottom:var(--space-2)} input,select,textarea{ width:100%; min-height:52px; padding:0 var(--space-4); font-family:inherit; font-size:1rem; color:var(--color-text); background:var(--color-surface-raised); border:var(--border-width) solid var(--color-border-strong); border-radius:9px; } textarea{padding:var(--space-3) var(--space-4); min-height:120px; line-height:var(--lh-body)} select{padding-right:36px} input:hover,select:hover,textarea:hover{border-color:var(--color-text-muted)} input:focus,select:focus,textarea:focus{ outline:3px solid var(--color-focus); outline-offset:1px; border-color:var(--color-brand); } /* :user-invalid só marca depois que a pessoa interagiu, não pinta o formulário de vermelho ao carregar a página. */ input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--color-danger)} input:disabled,select:disabled,textarea:disabled{ background:var(--color-surface); color:var(--color-text-muted); cursor:not-allowed; } .field-error{display:flex; gap:var(--space-2); font-size:var(--fs-caption); color:var(--color-danger)} .field-error::before{content:"!"; font-weight:var(--fw-heavy)} /* Não há caixa de consentimento: o formulário não coleta nada, só monta a mensagem que a pessoa envia pelo WhatsApp dela. Se um dia voltar a existir coleta, o alvo do checkbox precisa ter no mínimo 24 px (WCAG 2.5.8). */ .form-note{font-size:var(--fs-caption); color:var(--color-text-muted)} input + .form-note,select + .form-note{margin-top:var(--space-2)} /* ========================================================================== 16. COMPONENTES: nota sobre superfície escura Existia aqui um `.notice` de fundo âmbar, usado pelo aviso de rascunho da política de privacidade. A política foi publicada, o aviso saiu e a classe foi removida junto para não virar estilo morto. Os tokens de warning continuam definidos, então recriar é questão de quatro linhas. ========================================================================== */ .notice-inverse{ margin-top:var(--space-8); padding:var(--space-5) var(--space-6); border:var(--border-width) solid var(--color-border-inverse); border-radius:var(--radius-md); background:var(--color-surface-inverse-raised); font-size:var(--fs-sm); color:var(--navy-text-2); } .notice-inverse strong{color:var(--color-text-inverse-strong)} .notice-inverse code{ font-family:var(--font-mono); font-size:var(--fs-caption); color:var(--color-brand-on-inverse); word-break:break-all; } /* ========================================================================== 17. COMPONENTES: documento em prosa (política, termos) ========================================================================== */ .prose{padding:var(--space-12) 0 var(--space-20)} .prose h1{font-size:2rem; margin-bottom:var(--space-2)} .prose h2{font-size:1.15rem; margin:var(--space-10) 0 var(--space-3)} .prose p,.prose li{color:var(--color-text-muted)} .prose ul{padding-left:var(--space-6); margin:0} .prose li{margin-bottom:var(--space-1)} /* Descendente, não filho direto: os parágrafos ficam dentro do .wrap, então `.prose > * + p` não alcançava nenhum e parágrafos seguidos colavam. */ .prose p + p, .prose ul + p, .prose p + ul{margin-top:var(--space-4)} /* ========================================================================== 18. COMPONENTES: rodapé ========================================================================== */ footer{ background:var(--color-surface-inverse); color:var(--color-text-inverse); padding:var(--space-12) 0 var(--space-10); font-size:var(--fs-sm); } footer a{color:var(--navy-text-2); text-decoration:none} footer a:hover{color:var(--color-text-inverse-strong); text-decoration:underline} footer .brand{color:var(--color-text-inverse-strong)} footer .brand:hover{color:var(--color-text-inverse-strong)} .foot-grid{display:flex; flex-wrap:wrap; gap:var(--space-6); justify-content:space-between; align-items:flex-start} /* Links do rodapé são uma lista de ações, não texto corrido: precisam de alvo de toque próprio (WCAG 2.5.8). */ .foot-col p a{display:inline-block; padding:var(--space-2) 0} .foot-col-brand{max-width:34ch} .foot-col-brand p{margin-top:var(--space-3)} .foot-col-brand p a{padding:0} .foot-col .titulo{color:var(--color-text-inverse-strong); font-weight:var(--fw-medium); margin-bottom:var(--space-3)} .foot-legal{ margin-top:var(--space-8); padding-top:var(--space-6); border-top:var(--border-width) solid var(--color-border-inverse); font-size:var(--fs-caption); } /* Rodapé leve, para páginas de documento. */ .footer-plain{ background:var(--color-bg); color:var(--color-text-muted); border-top:var(--border-width) solid var(--color-border); padding:var(--space-8) 0; font-size:var(--fs-caption); } .footer-plain a{color:var(--color-brand-strong)} .footer-plain a:hover{color:var(--color-brand)}