/* =================================================================== Fontes do design system — auto-hospedadas (subset latin), como o handoff exige: nada de fonte carregada por link externo. =================================================================== */ @font-face { font-family: 'Source Serif 4'; font-weight: 600; font-display: swap; src: url(/static/fonts/SourceSerif4-600.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(/static/fonts/IBMPlexSans-400.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(/static/fonts/IBMPlexSans-500.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(/static/fonts/IBMPlexSans-600.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-weight: 700; font-display: swap; src: url(/static/fonts/IBMPlexSans-700.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(/static/fonts/IBMPlexMono-400.woff2) format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(/static/fonts/IBMPlexMono-500.woff2) format('woff2'); } /* =================================================================== Método Kata — camada de tokens do design system. Fonte única: docs/design/handoff-plataforma/README.md (Passo 0). Console, portal e landing consomem DAQUI. Trocar um valor aqui muda o produto inteiro — foi assim que a migração de agosto rodou sem reescrever regra por regra. NÃO acrescentar cor nova. A paleta é fechada e tem contraste medido. =================================================================== */ :root { /* ---------- Cor ---------- */ --surface-base: #042D42; /* petróleo — fundo de página */ --surface-deep: #021A27; /* petróleo escurecido — barras fixas */ --surface-raised: #002234; /* naval — cards, painéis */ --surface-break: #E6E6D9; /* areia — fundo de seção de quebra */ --surface-light: #FFFFFF; --text-primary: #E6E6D9; /* areia sobre petróleo: 11,4:1 (AAA) */ --text-secondary: rgba(230, 230, 217, .72); --text-muted: rgba(230, 230, 217, .55); --accent-action: #C4760C; /* botão, borda, régua, barra. NUNCA fundo de seção */ --accent-label: #D98A1F; /* SÓ texto ≤18px sobre escuro — 5,2:1 (AA) */ --accent-on-light:#8A5108; /* rótulo sobre areia/branco — 5,1:1 (AA) */ --line: rgba(230, 230, 217, .14); --line-strong: rgba(230, 230, 217, .28); --accent-wash: rgba(196, 118, 12, .12); --accent-ring: rgba(196, 118, 12, .20); /* Texto sobre o botão laranja é NAVAL, não branco. Branco sobre laranja dá 3,5:1 e reprova; naval dá 4,7:1. */ --on-accent: var(--surface-raised); /* ---------- Tipografia (auto-hospedada acima) ---------- */ --font-titulo: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; --font-corpo: 'IBM Plex Sans', 'Inter', 'Segoe UI', system-ui, sans-serif; --font-dado: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace; /* ---------- Espaço (escala de 4) ---------- */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 28px; --e7: 40px; --e8: 52px; --e9: 64px; --largura-conteudo: 1180px; --largura-app: 430px; /* telas do mentorado */ --gutter: 20px; /* ---------- Forma ---------- Chanfro é a marca de forma do sistema, no lugar de raio simples. */ --chanfro: 10px; --chanfro-bloco: 14px; --chanfro-ficha: 8px; --pilula: 999px; --alvo: 48px; /* alvo mínimo de toque */ --altura-botao: 54px; /* ---------- Sombra ---------- */ --sombra-flat: 0 1px 2px rgba(0, 0, 0, .35); --sombra-raised: 0 8px 22px rgba(0, 0, 0, .37); --sombra-overlay: 0 18px 40px rgba(0, 0, 0, .5); /* ---------- Movimento: uma curva só ---------- */ --curva: cubic-bezier(.16, 1, .3, 1); --t-hover: 300ms; --t-press: 160ms; --t-revela: 650ms; } /* Chanfro reutilizável. Usar a classe, não repetir o polygon. */ .chanfro { clip-path: polygon( var(--chanfro) 0, 100% 0, 100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%, 0 100%, 0 var(--chanfro) ); } .chanfro-bloco { --chanfro: var(--chanfro-bloco); } .chanfro-ficha { --chanfro: var(--chanfro-ficha); } /* Régua tracejada — divisor do sistema. */ .regua { height: 1px; border: 0; background: repeating-linear-gradient( 90deg, rgba(230, 230, 217, .30) 0 2px, transparent 2px 9px); } /* Rótulo HUD — o rótulo pequeno que aparece em toda tela. */ .hud { font: 600 11px/1.45 var(--font-corpo); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-label); font-variant-numeric: tabular-nums; } /* Número/métrica — sempre mono e tabular, para não dançar ao atualizar. */ .dado { font-family: var(--font-dado); font-variant-numeric: tabular-nums; } /* ---------- Textura: grão + halo ---------- Obrigatórios para o clima do sistema. O grão é SVG inline em data-URI: sem requisição, sem arquivo. */ body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 60vh; z-index: 0; pointer-events: none; background: radial-gradient(circle at 13% 0%, rgba(196, 118, 12, .095), transparent 37%); } /* ---------- Revelação na entrada ---------- Estado final é o visível: se a animação não rodar, a página aparece igual. Nada de opacity:0 dependendo de observer. */ @keyframes om-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes om-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .revela { animation: om-in var(--t-revela) var(--curva) both; } .cresce { transform-origin: left; animation: om-grow var(--t-revela) var(--curva) both; } @media (prefers-reduced-motion: reduce) { .revela, .cresce { animation: none; } * { transition-duration: 1ms !important; } }