/* MIRAVO - tokens visuais compartilhados (core). * * Cor primaria = Azul oficial da marca (ver ativos/04_Base_Conhecimento_CMO/ * base_conhecimento/marca.md). Antes era um placeholder (cyan #01A7D9); * atualizado para o valor definitivo da identidade visual. * * Este arquivo é servido pelo core em /static/core/design-tokens.css. Todo * módulo referencia esse caminho fixo - nunca copia ou redefine estas * variáveis localmente (ver ARQUITETURA_INTEGRACAO_MIRAVO.md, secao 4). */ :root { --miravo-cor-primaria: #0A86E0; --miravo-cor-texto: #4d4d4d; --miravo-cor-texto-forte: #2a2e33; --miravo-cor-borda: #e2e6ea; --miravo-cor-texto-fraco: #7a818a; --miravo-cor-fundo: #eef1f4; --miravo-cor-fundo-card: #ffffff; --miravo-fonte: 'Segoe UI', system-ui, Arial, sans-serif; --miravo-raio-borda: 10px; --miravo-sombra-card: 0 8px 30px rgba(0,0,0,.07); } /* Tamanho da logo no cabecalho, definido aqui (nao via JS do shell.js) de * proposito: este arquivo carrega e bloqueia a renderizacao ANTES da pagina * pintar na tela (link rel=stylesheet no ), enquanto o shell.js so * roda depois - se o tamanho so viesse do JS, a logo aparecia gigante (no * tamanho original da imagem) por uma fracao de segundo antes de encolher. * Todo modulo que segue o contrato (header > img:first-child = logo) ganha * isso de graca, sem precisar declarar nada. */ header > img:first-child { height: 53.41px; display: block; } /* Titulo do modulo na barra fixa (ex.: "DataHub"), controlado aqui no core * pra valer em TODOS os modulos de uma vez. 26px = +30% sobre os 20px que * cada modulo definia localmente. A especificidade `body header .ttl` * (0,1,2) vence o `.ttl`/`header .ttl` que os modulos ainda declaram no * proprio CSS, sem precisar de !important nem editar cada modulo. */ body header .ttl { font-size: 26px; } /* Barra fixa ja' em grafite no PRIMEIRO quadro (mesma razao da logo/titulo * acima): o shell.js so' pinta a barra de grafite depois de rodar, entao sem * isto ela aparece branca por uma fracao de segundo e "pisca" ao trocar de * modulo / voltar pra area de trabalho. Aqui ela ja' nasce grafite, com a * altura certa e o titulo branco. A especificidade `body header` (0,0,2) vence * o `header` local do modulo (0,0,1); o shell.js reafirma com !important depois * (mesmos valores, sem conflito visual). */ body header { background: #3a3a3a; border-bottom: 1px solid #2b2b2b; min-height: 63px; box-sizing: border-box; } body header .ttl { color: #fff; } /* Suaviza o "flash" branco do navegador ao navegar entre paginas/modulos: o * fundo base ja' e' o cinza da area de trabalho, nao branco puro. */ html { background: var(--miravo-cor-fundo); } /* Pendente: modo escuro (ver KICKOFF_MIGRACAO_VSCODE.md, secao 9) */