/* ========================================================================== INAEC · 00-TOKENS Fonte da verdade: Manual de Identidade Visual (MIV) v1.4 · Agosto 2026 https://inaec-miv.web.app/ >>> MIGRAÇÃO ELEMENTOR PRO Este arquivo é o espelho do painel Elementor → Configurações do Site → Cores Globais / Fontes Globais. Cadastre cada token abaixo como um "Global Color"/"Global Font" com o MESMO nome. Nenhuma cor ou fonte deve ser digitada manualmente dentro de um widget. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. CORES INSTITUCIONAIS (MIV · Paleta Primária) ---------------------------------------------------------------------- */ /* Verde INAEC — rege a identidade institucional. RGB 70·99·79 · CMYK 71·40·66·33 · Pantone 18-6114 TCX */ --inaec-verde: #46634F; /* Amarelo INAEC — acento de transformação. NUNCA como fundo de texto longo. RGB 255·207·54 · CMYK 0·19·83·0 · Pantone 13-0758 TCX */ --inaec-amarelo: #FFCF36; /* Azul Cruzeiro — uso EXCLUSIVO nas estrelas do símbolo. Registrado aqui apenas para fidelidade ao MIV; não usar em UI. RGB 2·40·173 · CMYK 99·84·0·0 · Pantone 286 C */ --inaec-azul-cruzeiro: #0228AD; /* ---------------------------------------------------------------------- 2. CORES DE APOIO E NEUTRAS (MIV) ---------------------------------------------------------------------- */ --inaec-verde-profundo: #2E4536; /* fundos densos, rodapés */ --inaec-oliva: #95A32E; /* meio do gradiente, gráficos */ --inaec-grafite: #231F20; /* texto principal */ --inaec-cinza-tecnico: #636466; /* legendas, notas, tabelas */ --inaec-nevoa: #EEF0EC; /* neutro institucional do MIV, faixas */ --inaec-branco: #FFFFFF; /* superfícies, reserva de marca */ /* Cinza do portal — ground neutro do site institucional. O MIV prevê Névoa (#EEF0EC) como fundo de página; para o portal web adotamos um cinza mais neutro e claro, que dá leitura mais limpa aos cards brancos e mantém todos os contrastes acima do exigido: Grafite 15.5:1 · Verde INAEC 6.1:1 · Cinza Técnico 5.4:1. Névoa permanece disponível como faixa alternada. */ --inaec-cinza-portal: #F5F5F7; /* ---------------------------------------------------------------------- 3. GRADIENTES OFICIAIS (MIV) ---------------------------------------------------------------------- */ /* Gradiente do Símbolo — exclusivo do anel e das setas da marca. NÃO aplicar em tipografia nem em blocos de conteúdo. */ --inaec-grad-simbolo: linear-gradient(90deg, #FDBC01 0%, #26895E 100%); /* Gradiente do Ciclo — faixas, cabeçalhos e divisores. Sem texto sobreposto. */ --inaec-grad-ciclo: linear-gradient(90deg, #FFCF36 0%, #95A32E 50%, #46634F 100%); /* ---------------------------------------------------------------------- 4. PAPÉIS SEMÂNTICOS (camada de aplicação) Widgets consomem SEMPRE estes tokens, nunca os brutos acima. Trocar um papel reveste o site inteiro sem tocar em componente. ---------------------------------------------------------------------- */ --color-bg: var(--inaec-cinza-portal); /* ground do portal */ --color-surface: var(--inaec-branco); /* cards e painéis */ --color-bg-alt: var(--inaec-nevoa); /* faixa alternada */ --color-bg-inverse: var(--inaec-grafite); /* rodapé institucional */ --color-text: var(--inaec-grafite); /* 14.21:1 sobre Névoa */ --color-text-muted: var(--inaec-cinza-tecnico);/* 5.16:1 sobre Névoa */ --color-text-inverse: var(--inaec-branco); /* 15.9:1 sobre Grafite */ --color-heading: var(--inaec-verde); /* 6.10:1 sobre o cinza do portal */ --color-accent: var(--inaec-amarelo); --color-on-accent: var(--inaec-grafite); /* 11.05:1 — obrigatório. Branco sobre Amarelo = 1.48:1 e é PROIBIDO. */ --color-border: color-mix(in srgb, var(--inaec-grafite) 14%, transparent); --color-border-strong: color-mix(in srgb, var(--inaec-verde) 32%, transparent); --color-border-inverse: color-mix(in srgb, var(--inaec-branco) 22%, transparent); --color-focus: var(--inaec-amarelo); /* ---------------------------------------------------------------------- 5. TIPOGRAFIA >>> DESVIO DELIBERADO DO MIV (decisão do cliente) O MIV define Mencken Std Head (serifada, alto contraste) como fonte de títulos, com Bodoni Moda como substituto digital homologado. Para este portal optou-se por remover integralmente a serifada e adotar uma sans-serif moderna, priorizando legibilidade em tela. Títulos: Plus Jakarta Sans — geométrica, próxima em espírito da Neulis Neue oficial, com boa presença em corpos grandes. Texto: Archivo — mantido, pois segue sendo o substituto homologado pelo MIV para a Neulis Neue. Para reverter ao MIV, basta repor a pilha serifada em --font-display. ---------------------------------------------------------------------- */ --font-display: "Plus Jakarta Sans", "Neulis Neue", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif; --font-body: "Neulis Neue", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif; /* Escala tipográfica — razão Major Third (1.25) a partir de 16px. 16 · 20 · 25 · 31 · 39 >>> DESVIO DELIBERADO DO MIV (decisão do cliente) A escala institucional do manual (Display 44px, Título 30px) foi desenhada para peças impressas. Em tela ela produzia títulos grandes demais para um portal de leitura. Reduzimos os topos para 40px (h1) e 32px (h2), mantendo hierarquia clara com muito menos ruído visual. Os pisos móveis (30px / 24px) preservam a legibilidade em telas estreitas sem exigir media query. */ /* ESCALA REVISADA — o problema não era o tamanho, era o INTERVALO. A escala anterior ia 40 → 32 → 24: o passo do h1 para o h2 (1,26×) era MENOR que o do h2 para o h3 (1,33×). Numa página com os dois próximos, o h2 parecia um h1 encolhido em vez de um nível abaixo, e o olho perdia a estrutura. Foi isso que produziu a impressão de "textos gigantes soltos". Agora o passo é constante — cerca de 1,35× entre os três níveis — e os topos caíram um degrau. Um portal de leitura não precisa de 40px para dizer que aquilo é o título da página; precisa que o nível seguinte seja visivelmente outro. */ --fs-display: clamp(1.75rem, 1.45rem + 1.30vw, 2.375rem); /* h1 · 28 → 38px */ --fs-title: clamp(1.375rem, 1.22rem + 0.65vw, 1.75rem); /* h2 · 22 → 28px */ --fs-subtitle: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);/* h3 · 18 → 21px */ /* A linha de apoio precisa se distinguir do corpo. A 17px contra 16px, ela lia como um parágrafo qualquer com um pouco mais de entrelinha. */ --fs-lead: clamp(1.0625rem, 1.01rem + 0.24vw, 1.1875rem); /* 17 → 19px */ --fs-body: 1rem; /* 16px */ --fs-legend: 0.875rem; /* 14px — legendas, metadados, notas */ --fs-label: 0.6875rem; /* 11px — MIV Label, com tracking +180 */ /* Entrelinhas — corpos menores pedem entrelinha relativa maior. MIV: mín. 1.5× em texto, 1.1× em títulos. */ /* Títulos menores pedem entrelinha proporcionalmente maior: a 38px, 1,25× ainda respira; a 21px, o mesmo valor aperta a segunda linha. */ --lh-display: 1.2; --lh-title: 1.28; --lh-subtitle:1.38; --lh-body: 1.65; --lh-legend: 1.55; --tracking-label: 0.18em; /* MIV: +180 */ /* O aperto óptico só se justifica em corpo grande. A -0,02em num h3 de 21px as letras começam a se tocar em palavras com "rr" e "ll". */ --tracking-display: -0.022em; --tracking-title: -0.015em; --tracking-tight: -0.008em; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; /* Peso dos títulos. A hierarquia vem da escala e do espaço em branco, não do peso: semibold (600) sustenta a leitura sem o ar pesado que o bold (700) dava em corpos grandes. */ --fw-heading: 600; /* Medida de leitura — MIV: 55 a 75 caracteres */ --measure: 68ch; /* ---------------------------------------------------------------------- 6. ESPAÇAMENTO — grade de 8px, derivada da grade de ícones de 24px (MIV) ---------------------------------------------------------------------- */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 1rem; /* 16px */ --space-sm: 1.5rem; /* 24px */ --space-md: 2rem; /* 32px */ --space-lg: 3rem; /* 48px */ --space-xl: 4rem; /* 64px */ --space-2xl: 6rem; /* 96px */ --space-3xl: 8rem; /*128px */ /* Respiro vertical padrão de seção (= padding do Container Elementor). Reduzido junto com a escala tipográfica: com títulos menores, o respiro anterior (64–128px) deixava as seções soltas demais. */ --section-padding-y: clamp(3.5rem, 6vw, 6rem); /* 56 → 96px */ /* ---------------------------------------------------------------------- 7. LAYOUT ---------------------------------------------------------------------- */ /* LARGURA DO SITE — dois valores, não um. A pergunta "qual a melhor largura" tem duas respostas, porque há dois tipos de conteúdo aqui e eles querem coisas opostas: · TEXTO CORRIDO quer linha CURTA. O ponto de legibilidade fica entre 60 e 75 caracteres; passar disso o olho perde a linha ao voltar para a esquerda. Alargar a prosa não melhora a leitura, piora. É `--measure`. · GRADE (cartões de especialista, artigos, papers, tabelas) quer largura. Ali cada item é lido isoladamente, e mais espaço significa mais colunas em vez de linhas mais longas. O aperto que se via vinha de aplicar a régua do texto ao site inteiro: 1240px de container com a prosa presa em 72ch deixava quase metade da tela vazia nas páginas de listagem. 1360px é o teto do container. Acima disso, o cabeçalho começa a espalhar o menu longe demais da marca e a grade de três colunas gera cartões mais largos que altos, que leem mal. */ --container-max: 1360px; --container-gutter: clamp(1.25rem, 4vw, 3rem); --header-height: 88px; --header-height-scrolled: 72px; /* Tamanhos mínimos de reprodução da marca (MIV · digital) */ --logo-horizontal-min: 150px; /* assinatura horizontal — rodapé */ --logo-simbolo-min: 32px; /* símbolo isolado — mínimo digital do MIV */ --logo-width: 168px; /* assinatura horizontal no rodapé */ --logo-simbolo: 48px; /* símbolo isolado no cabeçalho */ /* ---------------------------------------------------------------------- 8. FORMA, ELEVAÇÃO E MOVIMENTO MIV: marca nunca dentro de caixas/molduras; sem sombras sobre a marca. Os raios/sombras abaixo aplicam-se apenas a componentes de interface. ---------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(35, 31, 32, 0.06); --shadow-card: 0 1px 2px rgba(35, 31, 32, 0.05), 0 8px 24px -16px rgba(35, 31, 32, 0.22); --shadow-card-hover: 0 2px 4px rgba(35, 31, 32, 0.06), 0 18px 40px -20px rgba(35, 31, 32, 0.30); --shadow-md: 0 12px 32px -12px rgba(35, 31, 32, 0.24); /* Régua (faixa de gradiente) — MIV: 4 a 8px, horizontal, sem texto */ --regua-height: 6px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --duration: 260ms; --z-header: 1000; --z-drawer: 1100; } /* Respeita usuários que pedem menos movimento */ @media (prefers-reduced-motion: reduce) { :root { --duration: 1ms; } }