/* Estilos do site institucional PixMate. Compartilhado pela home e pelas páginas de segmento (/pix-para-*). Extraído do index.html para as páginas não divergirem visualmente. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* As variáveis do site derivam dos tokens da marca (/css/tokens.css, gerado de brand/tokens.css — o kit em si não é publicado). Não repetir HEX aqui: mudar a marca não deve exigir tocar neste arquivo. */ /* O site é CLARO, de ponta a ponta — o tema Papel, que é o padrão do manual. Houve uma versão com hero, contato e rodapé em grafite; foi testada e rejeitada. REGRA DO VERDE, que muda conforme a superfície: - PREENCHIMENTO (botão, badge de passo) → Verde PIX #10E29B, com texto grafite. É o botão canônico do manual. - TEXTO/LINK no ESCURO → Verde PIX #10E29B (11,3:1). - TEXTO/LINK no CLARO → Verde Texto #087351 (5,5:1 no Papel, 5,0:1 no pior fundo claro em uso). NÃO usar o Verde Fundo #0BA574 do manual como texto no claro: ele dá só 2,9:1 e REPROVA no WCAG AA. Ver --pm-verde-texto em brand/tokens.css. As tintas e sombras são tokens (--pix-tint, --shadow) porque mudam entre as duas superfícies. Nenhum rgba() cravado no componente. */ :root { --bg: var(--pm-papel); /* #F5F7F5 */ --surface: #FFFFFF; --surface-2: #EAEEEB; /* faixas */ --border: var(--pm-nevoa); /* #C7D0CC */ --text: var(--pm-grafite); /* #0C100E */ --muted: #55605B; --pix: var(--pm-verde-texto); /* #087351 — TEXTO no claro */ --pix-dark: #066043; /* hover de texto/fill */ --pix-fill: var(--pm-verde-pix); /* #10E29B — PREENCHIMENTO, sempre */ --green: var(--pm-verde-texto); --pix-tint: rgba(8,115,81,.10); /* lavagem de fundo */ --pix-tint-2: rgba(8,115,81,.28); /* borda da lavagem */ --shadow: 0 6px 24px rgba(12,16,14,.10); --shadow-lg: 0 14px 44px rgba(12,16,14,.13); --nav-bg: rgba(245,247,245,.90); /* o nav acompanha o Papel */ /* Contraste do texto sobre o verde: grafite, nunca branco */ --on-accent: var(--pm-grafite); } /* O site é claro DE PONTA A PONTA. Não há mais âncoras escuras: o hero e o rodapé em grafite foram testados e rejeitados. A única superfície que continua escura é o BLOCO DE CÓDIGO da seção de API — ele não é decoração, é um terminal, e um terminal claro seria mais estranho que a página escura. Se algum dia voltar uma seção escura, ela redeclara os tokens (--bg/--surface/--text/--pix/--pix-tint/--shadow) e os componentes se adaptam sozinhos. É para isso que a cor é token e não rgba() cravado. */ /* scroll-padding-top: com a barra fixa, uma âncora (#como-funciona) para o topo da viewport e o título fica ESCONDIDO debaixo do nav. O padding reserva a altura da barra em todo salto de âncora, o suave e o direto. */ html { scroll-behavior: smooth; scroll-padding-top: 5rem; } /* PADRAO DE LINK NO CORPO DO TEXTO. Sem isto, todo que cai num container sem regra propria herda o azul #0000EE do navegador. Ja aconteceu TRES vezes (e-mail do DPO no .callout, "politica de privacidade" no .form-note, "guia do vendedor" no .section-sub) — sempre passando batido, porque azul sobre branco PASSA no teste de contraste: o que falha e a marca, nao a legibilidade. Pintar um por um so adia a quarta vez. Seletor de elemento (especificidade 0,0,1): qualquer classe com cor propria — .btn-primary, .nav-cta, .int-chip, .crumbs — continua vencendo sem precisar de !important. */ main a { color: var(--pix); text-decoration: none; font-weight: 600; } main a:hover, main a:focus-visible { text-decoration: underline; } body { font-family: var(--pm-font-sans); background: var(--bg); color: var(--text); line-height: 1.6; } /* ── NAV ── `header nav`, e NAO `nav` solto: a trilha de breadcrumb tambem e um