/** * Moto Hub — Design Tokens (variáveis CSS centralizadas). * * Carregue ANTES de qualquer outro CSS em todas as páginas. Outros CSS do * projeto leem essas variáveis via `var(--token)`. Trocar uma cor da marca * = trocar 1 linha aqui (em vez de caçar em 10+ arquivos). * * Inclui também o @font-face de 'moto sans' pra garantir que a tipografia * canônica esteja disponível em TODAS as páginas — home, comparativos, * portfolio, evolução, privacidade, termos. URLs relativas resolvem a * partir deste arquivo (css/), então `../fonts/...` aponta pra fonts/. * * Base: Motorola Global Brand Identity Guideline (Nov 2025) — Core Palette. * https://brand.motorola.com (interno). * * NÃO definir cores hardcoded nos outros CSS. Sempre referenciar via * var(--moto-black), var(--slate-blue), etc. Se faltar token pra algum uso * legítimo, adicione aqui e documente em qual seção (cor/espaço/raio/sombra). * * Compatibilidade: nomes históricos (--moto-black, --slate-blue, --frost) * mantidos como aliases pra não quebrar o CSS existente. Refator gradual. */ @font-face { font-family: 'moto sans'; src: url('../fonts/MotoSans-Regular.woff2') format('woff2'), url('../fonts/MotoSans-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'moto sans'; src: url('../fonts/MotoSans-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Gotham Medium'; src: url('../fonts/gotham-medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } :root { /* ============================================================ * CORE PALETTE — Motorola Brand VI Nov 2025 * Neutros que complementam a primary palette. * ============================================================ */ /* Black — fundo escuro principal (header, footer, CTAs primários) */ --moto-black: #131417; /* Pure White — fundo claro principal, texto sobre escuro */ --moto-white: #FFFFFF; /* Frost — fundo neutro azulado claro (cards, seções de respiro) */ --frost: #E9EAF2; /* Pearl — fundo neutro quente claro (alternativa ao frost) */ --pearl: #F0EDE9; /* Slate Blue — texto secundário, ícones, bordas sutis */ --slate-blue: #636880; /* Sandstone — variação neutra quente (acentos secundários) */ --sandstone: #7A7670; /* ============================================================ * CORES FUNCIONAIS (não-Motorola, padrões de UI) * ============================================================ */ --color-success: #25D366; /* verde WhatsApp/feedback positivo */ --color-warning: #f59e0b; /* amarelo aviso */ --color-error: #dc2626; /* vermelho erro/destrutivo */ --color-info: #3b82f6; /* azul informativo */ /* ============================================================ * Alias legado: --moto-indigo * Apesar do nome, NÃO é um azul puro tipo indigo (#0014C7) — desde * algum refactor anterior os 5 CSS principais (home, comparativo, * portfolio, evolucao, controle-de-ativos) redefinem como alias do * Slate Blue. A paleta Motorola Brand VI não tem um indigo separado; * destaques/CTAs usam Slate Blue. Mantido o nome aqui pra não quebrar * 50+ referências espalhadas no código. Refator gradual pode renomear * pra --slate-blue direto. * ============================================================ */ --moto-indigo: var(--slate-blue); /* ============================================================ * ESPAÇAMENTOS — escala 4px base * ============================================================ */ --space-2xs: 0.125rem; /* 2px */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ /* ============================================================ * BORDER RADIUS * ============================================================ */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-full: 999px; /* ============================================================ * SOMBRAS — opacidade baixa, alinhada com estética premium leve * ============================================================ */ --shadow-sm: 0 1px 3px rgba(19, 20, 23, 0.06); --shadow-md: 0 4px 12px rgba(19, 20, 23, 0.10); --shadow-lg: 0 12px 32px rgba(19, 20, 23, 0.15); --shadow-xl: 0 24px 64px rgba(19, 20, 23, 0.18); /* ============================================================ * TIPOGRAFIA — famílias canônicas * (alturas/pesos ficam nos CSS específicos por componente) * ============================================================ */ --font-moto-sans: 'moto sans', 'MotoSans-Regular', sans-serif; --font-gotham: 'Gotham Medium', 'GothamMedium', sans-serif; /* ============================================================ * TRANSIÇÕES — durações padrão * ============================================================ */ --transition-fast: 120ms ease; --transition-normal: 200ms ease; --transition-slow: 400ms ease; /* ============================================================ * LMS / GAMIFICAÇÃO — Fase 9 prep (28/05/2026) * ============================================================ * Tokens pre-carregados pra LMS futuro. Zero impacto visual no site * atual — nenhum componente atual referencia. Quando a Fase 9 chegar, * componentes de progresso/quiz/badge consomem direto via var(...). * * Princípios (alinhados com Motorola Brand VI): * - Tier metals NEUTROS, sem néon (gold/silver/bronze são tons sóbrios) * - Progress fill usa Slate Blue (já é a cor de destaque do brand) * - States seguem semântica universal (locked=cinza, active=brand, * completed=success) * - Motion mais curto que --transition-slow pra unlock parecer "responsivo" * - Dark mode prep (não-ativo) pra LMS poder ter modo escuro opcional */ /* Barra de progresso (trilhas, lições) */ --progress-track: #E5E7EB; --progress-fill: var(--slate-blue); /* Tiers de medalha/badge — tons sóbrios, sem brilho néon */ --tier-gold: #C9A961; --tier-silver: #A8AEB5; --tier-bronze: #B07248; /* Estados de lição/módulo na UI de trilha */ --state-active: var(--slate-blue); --state-completed: var(--color-success); --state-locked: #9CA3AF; /* Motion pra animações de unlock/transition entre lições */ --motion-entrance: 280ms cubic-bezier(0.16, 1, 0.3, 1); --motion-exit: 200ms cubic-bezier(0.7, 0, 0.84, 0); /* Backgrounds semânticos pra feedback de quiz (low-alpha fills) */ --semantic-success-bg: rgba(37, 211, 102, 0.12); --semantic-error-bg: rgba(220, 38, 38, 0.10); /* Dark mode prep — NÃO usar ainda. LMS poderá ativar via [data-theme="dark"] */ --dark-mode-black: #0B0C0E; --dark-mode-surface: #1A1C20; } /* ============================================================ * OVERRIDES GLOBAIS (este arquivo é carregado em TODAS as páginas) * ============================================================ */ /* Rodapé padrão — bloco inline (border-radius:24px) duplicado em index, blog, * comparativos, portfolio, evolucao, privacidade, termos. No mobile o * `padding: 48px 0` deixava o rodapé alto/espaçado demais. Reduz a altura * interna só no celular. Como o padding vem inline, precisa de !important. */ @media (max-width: 640px) { footer[style*="border-radius: 24px"] { padding-top: 16px !important; padding-bottom: 16px !important; } footer[style*="border-radius: 24px"] img { height: 18px !important; margin-bottom: 6px !important; } footer[style*="border-radius: 24px"] p { margin-top: 6px !important; } footer[style*="border-radius: 24px"] .moto-sans-text { font-size: 9.5px !important; } }