/* * mfb-tokens.css — o design system do MFB, self-hosted. * * Junta o que no preview eram cinco arquivos ligados por @import * (tokens/colors, tokens/typography, tokens/spacing, base) mais as nove faces * da Inter. Vira um arquivo so por dois motivos: @import encadeado custa um * round-trip por nivel, e este arquivo precisa ser enfileirado tambem DENTRO do * editor do Elementor — la nao ha para carregar cinco links. * * As fontes deixam de vir do _ds/ e passam a sair de assets/fonts/ do tema. O * `../fonts/` dos @font-face continua literal de proposito: este arquivo mora * em assets/css/, entao o caminho relativo do design system ja aponta para o * lugar certo e o CSS segue sendo um estatico puro, sem passar por PHP. * * Ter a Inter aqui e o que permite desligar o Font Awesome e o Google Fonts do * Elementor sem a tipografia cair para a fallback do sistema. * * As faces sao WOFF2 subsetadas (latim + latim-estendido, sem os conjuntos * estilisticos), 28KB cada. Os TTF de origem tinham 336KB por peso e a home * baixava tres deles — 1MB de fonte, um sexto do LCP de 11s medido em producao * em 17/09/2026. A subsetagem sai de `python3 -m fontTools.subset` sobre os * TTF do design system em `static-preview/public/_ds/*/fonts/`; os TTF nao * ficam mais no tema. Refazer com a mesma lista de unicodes se um peso mudar. */ @font-face{font-family:'Inter';src:url('../fonts/Inter_24pt-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;} @font-face{font-family:'Inter';src:url('../fonts/Inter_24pt-LightItalic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap;} @font-face{font-family:'Inter';src:url('../fonts/Inter_24pt-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:'Inter';src:url('../fonts/Inter_24pt-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;} @font-face{font-family:'Inter';src:url('../fonts/Inter_24pt-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:'Inter';src:url('../fonts/Inter_24pt-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap;} @font-face{font-family:'Inter';src:url('../fonts/Inter_24pt-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;} @font-face{font-family:'Inter';src:url('../fonts/Inter_24pt-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:'Inter';src:url('../fonts/Inter_24pt-BoldItalic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap;} :root{ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'SFMono-Regular', Consolas, monospace; --fw-light: 300; /* @kind other */ --fw-regular: 400; /* @kind other */ --fw-medium: 500; /* @kind other */ --fw-bold: 700; /* @kind other */ --text-hero: clamp(40px,6vw,68px); --text-h1: clamp(40px,6vw,68px); --text-h2: clamp(28px,4vw,40px); --text-h3: 26px; --text-h4: 19px; --text-body-lg: 18px; --text-body: 17px; --text-caption: 13px; --text-eyebrow: 12px; --lh-tight: 1.03; /* @kind other */ --lh-snug: 1.1; /* @kind other */ --lh-body: 1.6; /* @kind other */ --tracking-tight: -0.02em; --tracking-eyebrow: 0.14em; } :root{ /* ===== PRIMARY PALETTE (BM&A green / yellow / blue) ===== */ --verde: #054900; --verde-tint: #9BB699; --verde-shade: #032F00; --amarelo: #E1DD19; --amarelo-tint: #F3F1A3; --amarelo-shade: #929010; --azul: #1A0088; --azul-tint: #A399CF; --azul-shade: #110058; /* ===== SECONDARY ===== */ --laranja: #FF5E32; --laranja-tint: #FFBFAD; --laranja-shade: #A63D20; /* ===== NEUTRALS ===== */ --areia: #EFE7D4; --areia-tint: #F9F5EE; --marrom: #211509; --preto: #101010; --branco: #FFFFFF; /* ===== SEMANTIC ALIASES ===== */ --bg-page: var(--areia-tint); --bg-surface: var(--branco); --bg-inverse: var(--preto); --text-body: var(--preto); --text-muted: rgba(16,16,16,.65); --text-faint: rgba(16,16,16,.5); --text-inverse: var(--branco); --text-inverse-muted: rgba(255,255,255,.72); --border-subtle: rgba(16,16,16,.08); --border-strong: rgba(16,16,16,.3); --action-primary: var(--azul); --action-primary-text: var(--branco); --action-accent: var(--laranja); --action-accent-text: var(--branco); --action-highlight: var(--amarelo); --action-highlight-text: var(--preto); --link: var(--azul); --link-hover: var(--azul-shade); } :root{ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-pill: 6px; --container-max: 1180px; --container-pad: 32px; --container-pad-mobile: 16px; --shadow-card: 0 8px 24px rgba(16,16,16,.06); } /* base.css do design system */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--font-body);background:var(--bg-page);color:var(--text-body);line-height:1.5;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block;border-radius:var(--radius-sm)} a{color:var(--link);text-decoration:none} /* DIVERGENCIA DELIBERADA do design system, 02/09/2026. * * O original declarava `a:hover{color:var(--link-hover);text-decoration:underline}`. * As duas declaracoes vazavam para TODO do site — inclusive os que sao * botao e os que sao so um icone — porque `a:hover` (0,1,1) vence o * `a{text-decoration:none}` (0,0,1) que o mfb.css declara logo depois. * * Foi o que produziu CINCO cartoes na revisao de arte de 01/09/2026: o * sublinhado e o "grifado" que a Ana pediu para tirar do menu, do rodape, do * "Ver todos" e dos cards; e o amarelo apagava o rotulo do botao que JA e * amarelo (`.mfb-btn--highlight`: amarelo sobre amarelo) e deixava o do botao * branco quase ilegivel. * * A regra inteira sai daqui. Hover deixou de ser generico: quem quer cor ou * sublinhado no hover pede por componente, em mfb.css, secao "Estados de hover * e de clique". */