MAXXBET Sportsbook & iGaming Cockpit
Consistência e coerência absoluta de ponta a ponta. Arquitetura dual: High-Velocity Cockpit (Modo Escuro com contraste cirúrgico) e Platinum Velocity (Modo Claro fintech de alta credibilidade), sem desvios estruturais ou visuais.
1. Células e Botões de Odds (.mxb-odds-box)
O átomo transacional da plataforma. Suporta números tabulares (`tnum`), resplendor ao selecionar e simulação de oscilação de cotação.
Boleta de Apostas (Betslip)
Terminal Caixa PIX Instantâneo
Aponte a câmera do seu banco ou copie o código Copia e Cola para creditar em menos de 3 segundos.
Matriz Canônica de Cores e Tokens
Mapeamento canônico entre o Modo Escuro (*High-Velocity Cockpit*) e o Modo Claro (*Platinum Velocity*).
Padrões Tipográficos Oficiais
| Nível | Família | Tamanho / Leading | Uso Estratégico | Exemplo Visual |
|---|---|---|---|---|
| Display Hero | Plus Jakarta Sans (800) | 48px / 56px | Banners promocionais e títulos de impacto | SUPER ODD TURBINADA |
| Headline XL | Plus Jakarta Sans (700) | 32px / 40px | Clubes em duelo, cabeçalhos de tela | Flamengo x Palmeiras |
| Odds Numbers | Inter (700) [tnum] | 14px / 18px | Cotações decimais e cotação combinada | 2.45 |
| Currency BRL | Inter (700) [tnum] | 14px–20px | Moeda brasileira (Real) com separador de milhar | R$ 14.850,50 |
Manual Canônico de Implementação — MAXXBET Brasil
Toda e qualquer nova funcionalidade, tela, modal ou componente desenvolvido neste repositório deve seguir estritamente as seguintes 5 regras de ouro:
Paridade Dual Sem Desvios
Nunca crie uma tela apenas para modo escuro. Toda maquete deve herdar as variáveis CSS canônicas de
tokens.css ou usar as classes do Tailwind com paridade em modo claro.
Figuras Tabulares Obrigatórias
Odds, relógios de jogo (ex: 72:14) e valores em Reais (R$ 1.500,00) devem
usar impreterivelmente font-feature-settings: 'tnum' para eliminar layout shift durante oscilações.
Micro-Bordas de 1px sem Sombras Borradas
A hierarquia visual é alcançada por empilhamento tonal (Tonal Stacking) e bordas cirúrgicas de 1px
(--mxb-border-subtle), sem sombras pretas difusas que poluem telas densas.
Formatação Brasileira Nativa
Todos os inputs e rótulos monetários usam vírgula para decimais e ponto para milhares, prefixados por
R$ fixo à esquerda (ex: R$ 14.850,50).