/* ========================================= Ana Pessoa — Espinha de identidade ----------------------------------------- Tokens compartilhados pelos DOIS registros visuais: · institucional (editorial, claro-dominante) — index.html · venda (escuro, persuasivo) — codigo-de-impacto/, aura/ Carregar ANTES do styles.css de cada página. O que é invariante entre registros está aqui. O que pode divergir (fundo dominante, densidade, arsenal de conversão, tom) fica no styles.css de cada página. Referência: .claude/docs/estudo-identidade-visual.md §8 openspec/specs/brand-design-system/ ========================================= */ :root { /* --------------------------------------- Cor de marca --------------------------------------- */ --ap-roxo: #2c1557; /* cor de marca. creme sobre ele = 14,15:1 */ --ap-roxo-medio: #4a3b66; /* cards sobre roxo, botão secundário */ --ap-roxo-claro: #5d4e7a; /* suporte, hover de botão secundário */ /* Base escura — arroxeada, nunca preto neutro. A audiência reconhece a marca como roxo; o preto neutro é onde ela fica menos reconhecível. Ver design.md da change. */ --ap-ink: #17121c; /* fundo dominante do registro de venda */ --ap-ink-suave: #241a3a; /* alternância de seção escura */ --ap-creme: #f6f4f1; /* seções claras. NUNCA branco puro. */ /* --------------------------------------- Ouro — um papel, três realizações. Cada token declara sobre qual fundo é válido. Não existe "o ouro certo": um ouro legível sobre creme parece marrom sobre escuro, e um ouro que brilha sobre escuro some sobre creme. --------------------------------------- */ --ap-ouro: #b78c25; /* TEXTO sobre escuro. 5,02:1 sobre --ap-roxo */ --ap-ouro-claro: #d4a94a; /* ênfase sobre escuro. 7,08:1 sobre --ap-roxo */ --ap-ouro-sobre-claro:#7a5c1a; /* ÚNICO ouro válido como TEXTO sobre creme. 5,67:1 (--ap-ouro sobre creme dá 2,82:1 e falha) */ --ap-ouro-profundo: #8d6819; /* ornamento: bordas, gradiente de botão */ --ap-ouro-pale: #f1d891; /* ornamento: brilho, inset, highlight */ /* Ouro como ORNAMENTO (borda, divider, ícone, fundo de botão) não está restrito: o piso para elemento gráfico é 3:1, não 4,5:1. A restrição acima vale para ouro COMO TEXTO. */ /* --------------------------------------- Escala tipográfica — fechada. 8 degraus. Respiro é espaçamento, não tamanho de fonte: não inventar degraus intermediários. --------------------------------------- */ --fs-1: 0.75rem; /* 12px — piso absoluto de texto */ --fs-2: 0.875rem; /* 14px */ --fs-3: 1rem; /* 16px — corpo */ --fs-4: 1.125rem; /* 18px */ --fs-5: 1.5rem; /* 24px */ --fs-6: 2rem; /* 32px */ --fs-7: 2.75rem; /* 44px */ --fs-8: 3.75rem; /* 60px — display */ /* 4 pesos. Dois foram aposentados nesta unificação: 800 — aparecia 14x em kickers, onde 700 resolve. 300 — 38 usos de corpo na página de venda, desenhados com Inter. Montserrat Light é bem mais fina; sobre fundo escuro o texto perdia legibilidade. Promovido a 400. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Piso de legibilidade. Tom apagado nunca abaixo disto, e sempre medido contra a SUPERFÍCIE em que o elemento vive (o card), não contra o fundo da seção. */ --fs-min-apagado: 0.75rem; /* 12px */ /* --------------------------------------- Forma --------------------------------------- */ --ap-radius-button: 12px; --ap-radius-card: 18px; --ap-radius-panel: 28px; /* --------------------------------------- Sombra --------------------------------------- */ --ap-shadow-soft: 0 18px 56px rgba(44, 21, 87, 0.10); --ap-shadow-gold: 0 12px 34px rgba(154, 117, 32, 0.28), 0 2px 0 rgba(255, 255, 255, 0.18) inset; /* --------------------------------------- Acessibilidade --------------------------------------- */ --ap-touch-min: 44px; /* WCAG 2.5.8 pede 24px; 44px é o alvo confortável */ /* --------------------------------------- Compatibilidade — nomes antigos do institucional. Mantidos como alias para não quebrar CSS já escrito. Não usar em código novo. --------------------------------------- */ --ap-brand-deep: var(--ap-roxo); --ap-brand-primary: var(--ap-roxo-medio); --ap-brand-light: var(--ap-creme); --ap-gold-deep: var(--ap-ouro-profundo); --ap-gold: var(--ap-ouro); --ap-gold-light: var(--ap-ouro-claro); --ap-gold-pale: var(--ap-ouro-pale); } /* ========================================= Alvo de toque mínimo (WCAG 2.5.8) ----------------------------------------- Links inline de navegação e rodapé mediam 16–20px de altura. Todos estão em linhas horizontais, então a área ativa sobe para 44px por pseudo-elemento: o hit area cresce, o layout visual não muda em nada. Exclui qualquer coisa com classe de botão — .btn-gold e .cta-gold já usam ::after para o shimmer, e sobrescrever quebraria a animação. ========================================= */ nav a:not([class*="btn-"]):not([class*="cta-"]), footer a:not([class*="btn-"]):not([class*="cta-"]), #mobile-menu a:not([class*="btn-"]):not([class*="cta-"]), #cookie-banner a:not([class*="btn-"]):not([class*="cta-"]) { position: relative; } nav a:not([class*="btn-"]):not([class*="cta-"])::after, footer a:not([class*="btn-"]):not([class*="cta-"])::after, #mobile-menu a:not([class*="btn-"]):not([class*="cta-"])::after, #cookie-banner a:not([class*="btn-"]):not([class*="cta-"])::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: var(--ap-touch-min); min-width: var(--ap-touch-min); pointer-events: auto; } /* O skip-link mede 1x1 enquanto está sr-only — é assim que ele deve ser. Ao receber foco vira visível e ganha a área do próprio padding. */ a.sr-only::after { content: none; }