/* ============================================================================= Tokens do sistema visual Meio Norte Express FONTE ÚNICA DA VERDADE. Carrega antes de todas as outras folhas. O QUE ESTE ARQUIVO RESOLVE --------------------------- Havia três paletas concorrendo: styles.css declarava azul #1e40af, styles-enhanced.css sobrescrevia com petróleo #1a5f7a (era esta que chegava à tela) e paginas.css introduziu navy #1a365d, o mesmo dos e-mails. Quem percorria home → cotação → e-mail atravessava duas identidades. Some a isso seis cinzas de duas rampas diferentes (`gray` e `slate` do Tailwind misturados). Agora a paleta é definida uma vez, aqui. As outras folhas consomem. A COR DE AÇÃO É O PETRÓLEO, E NÃO A MENTA ------------------------------------------ A menta #57c5b6 era fundo de botão com texto branco: contraste de 2,09:1, contra os 4,5:1 que a WCAG AA exige. A família inteira reprova (#3da89a dá 2,89, #159895 dá 3,53). O petróleo #1a5f7a — que já era o --primary-color — dá 7,09:1. Não é rebrand: é trocar o papel de cada cor. A menta continua na marca, como acento decorativo, onde ela funciona bem. ============================================================================= */ :root { /* --------------------------------------------------------------------- COR — MARCA E AÇÃO --------------------------------------------------------------------- */ --primary-color: #1a5f7a; /* AÇÃO: botões, links, foco — 7,09:1 no branco */ --primary-dark: #0f3d52; /* cabeçalho, rodapé, hover — 11,60:1 */ --primary-light: #2a7fa0; /* realce sobre fundo escuro */ --secondary-color: #159895; /* decorativo sobre escuro */ --secondary-forte: #0f766e; /* texto sobre branco — 5,47:1 */ --accent-color: #57c5b6; /* DECORATIVO: filete, ícone sobre escuro. Nunca como fundo de texto branco. */ --accent-dark: #3da89a; /* --------------------------------------------------------------------- COR — O LARANJA DA MARCA Amostrado da própria logomarca (marca-512.png): o pixel laranja dominante é #f5a204. Ele estava desenhado no símbolo e em lugar nenhum da interface, o que fazia a logo parecer colada num site de outra empresa. São três papéis, porque um laranja só não atende os três fundos: --marca-laranja #f5a204 o tom da logo. 5,55:1 sobre o petróleo escuro e 7,68:1 sobre o quase-preto: aprova como TEXTO sobre superfície escura. Sobre branco dá 2,09:1 — nunca como texto ali. --marca-laranja-claro #ffb627 mesma família, mais luminosa: 6,62:1 sobre o escuro. Para o realce que precisa saltar sobre foto. --marca-laranja-forte #b35c00 mesmo matiz escurecido, 4,72:1 sobre branco. É esta que assina texto e ícone laranja em fundo claro, e é fundo de botão com texto branco (4,72:1). Como PREENCHIMENTO, o #f5a204 aceita texto escuro (--gray-900) a 7,68:1 — é assim que ele vira selo e numeral, sem inventar tom novo. --------------------------------------------------------------------- */ --marca-laranja: #f5a204; --marca-laranja-claro: #ffb627; --marca-laranja-forte: #b35c00; --marca-laranja-veu: rgba(245, 162, 4, .16); --marca-laranja-linha: rgba(245, 162, 4, .42); /* O véu resolve para #fdf0d7 sobre branco. Ali o --marca-laranja-forte cai para 4,19:1 — abaixo da linha. Sobre o véu, portanto, o texto é NEUTRO (--gray-900 dá 14,22:1) e o laranja fica só no preenchimento e na borda. */ /* Compatibilidade com o nome antigo usado em styles.css */ --secondary: var(--secondary-color); /* --------------------------------------------------------------------- COR — ESTADO Separada da marca de propósito: estado precisa significar a mesma coisa em toda tela e não pode competir com a cor de ação. Cada par passa em contraste como texto escuro sobre o fundo claro. --------------------------------------------------------------------- */ --success-color: #14684a; --success-light: #e8f4ef; --info-color: #1d5e8a; --info-light: #eaf2f8; /* O âmbar era #a8620a: 4,75:1 no branco, mas só 4,29:1 sobre o PRÓPRIO fundo claro do par — que é onde ele de fato aparece, nos selos de "aguardando". Escurecido dá 5,42:1 ali e 6,01:1 no branco. */ --warning-color: #925408; --warning-light: #fbf2e5; --danger-color: #a52218; --danger-light: #fbeceb; /* --------------------------------------------------------------------- COR — NEUTROS Uma rampa só, com viés frio para conversar com o petróleo. Substitui as duas rampas que estavam misturadas. --------------------------------------------------------------------- */ --white-color: #ffffff; --white: #ffffff; --gray-50: #f8fafa; --gray-100: #f0f4f5; --gray-200: #e4e9eb; --gray-300: #d3dade; --gray-400: #9dabb2; --gray-500: #6d7d85; --gray-600: #5d6c74; /* legendas e rótulos */ --gray-700: #33454f; /* texto corrido */ --gray-800: #22323b; --gray-900: #16232b; /* títulos */ --light-color: var(--gray-50); --dark-color: var(--gray-900); /* --------------------------------------------------------------------- TIPOGRAFIA Oito degraus, três pesos, entrelinha por PAPEL do texto. A entrelinha vinha junto do tamanho, e por isso o mesmo corpo de 17px aparecia com quatro valores diferentes. Aqui ela é função do papel: título aperta, corpo respira. --------------------------------------------------------------------- */ --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Códigos que a pessoa confere caractere a caractere — localizador, protocolo, placa, chave. Em Poppins, 0/O e 1/l são quase idênticos. */ --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace; --font-size-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12 → 13 */ --font-size-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); /* 14 → 15 */ --font-size-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* 16 → 17 */ --font-size-lg: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem); /* 18 → 20 */ --font-size-xl: clamp(1.25rem, 1.17rem + 0.4vw, 1.5rem); /* 20 → 24 */ --font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); /* 24 → 32 */ --font-size-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.5rem); /* 30 → 40 */ --font-size-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3.5rem); /* 36 → 56 */ --font-size-5xl: var(--font-size-4xl); /* nome antigo, mesmo teto */ /* Só três pesos. Qualquer outro valor o navegador sintetiza — texto artificialmente engordado, que borra na tela. */ --peso-corpo: 400; --peso-enfase: 600; --peso-titulo: 700; --lh-titulo: 1.15; --lh-sub: 1.3; --lh-corpo: 1.65; --lh-apoio: 1.55; --lh-rotulo: 1; /* Medida de leitura: acima disso o olho perde a linha no retorno. */ --medida-leitura: 68ch; /* --------------------------------------------------------------------- ESPAÇO — grade de 8 --------------------------------------------------------------------- */ --space-1: 0.25rem; --spacing-1: 0.25rem; --space-2: 0.5rem; --spacing-2: 0.5rem; --space-3: 0.75rem; --spacing-3: 0.75rem; --space-4: 1rem; --spacing-4: 1rem; --space-5: 1.25rem; --spacing-5: 1.25rem; --space-6: 1.5rem; --spacing-6: 1.5rem; --space-8: 2rem; --spacing-8: 2rem; --space-10: 2.5rem; --spacing-10: 2.5rem; --space-12: 3rem; --spacing-12: 3rem; --space-16: 4rem; --spacing-16: 4rem; --space-20: 5rem; --spacing-20: 5rem; --space-24: 6rem; /* Ritmo entre blocos: proporcional à hierarquia, não uniforme. */ /* Reduzidos: as seções alternam cor de fundo e foto, o que já as separa. O respiro anterior somava altura sem acrescentar leitura. */ --gap-secao: clamp(2.25rem, 4.5vw, 3.75rem); --gap-bloco: clamp(1.5rem, 2.8vw, 2.25rem); /* --------------------------------------------------------------------- RAIO A tela renderizava 7 valores diferentes (6, 8, 10, 12, 14, 16, 50%) porque os componentes escreviam o número à mão. São quatro. --------------------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px; /* Nomes antigos, apontando para os quatro degraus */ --radius-xl: var(--radius-lg); --radius-2xl: var(--radius-lg); /* --------------------------------------------------------------------- ELEVAÇÃO Havia 8 definições com três tonalidades diferentes — neutra, petróleo e menta. São três, todas com o mesmo viés frio da tinta. --------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(22, 35, 43, .06); --shadow-md: 0 1px 2px rgba(22, 35, 43, .06), 0 4px 12px rgba(22, 35, 43, .06); --shadow-lg: 0 2px 4px rgba(22, 35, 43, .06), 0 12px 28px rgba(22, 35, 43, .10); --shadow-xs: var(--shadow-sm); --shadow: var(--shadow-sm); --shadow-xl: var(--shadow-lg); --shadow-2xl: var(--shadow-lg); /* --------------------------------------------------------------------- MOVIMENTO --------------------------------------------------------------------- */ --transition-fast: 150ms cubic-bezier(.4, 0, .2, 1); --transition-base: 250ms cubic-bezier(.4, 0, .2, 1); --transition-slow: 350ms cubic-bezier(.4, 0, .2, 1); --transition: var(--transition-base); --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --ease-in-out-expo: cubic-bezier(.87, 0, .13, 1); /* Referência para leitura; media query não aceita variável. */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; /* --------------------------------------------------------------------- CAMADAS --------------------------------------------------------------------- */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; } /* ============================================================================= Utilitários que dependem dos tokens ============================================================================= */ /* Números que se comparam em coluna — prazo, peso, valor, data. Sem isso os dígitos têm larguras diferentes e a coluna dança. */ .num-tabular, td.num, .valor, .prazo { font-variant-numeric: tabular-nums; } /* Códigos conferidos caractere a caractere */ .codigo, .protocolo, .localizador-code { font-family: var(--font-mono); letter-spacing: .04em; } /* ============================================================================= Superfícies escuras Regra genérica de elemento vence herança: `p { color: var(--gray-700) }` ganhava de `.footer-bottom { color: var(--gray-400) }`, porque a primeira mira o

e a segunda só pinta o pai. O resultado era o copyright em #33454f sobre #22323b — contraste de 1,33:1, praticamente invisível. Em vez de caçar cada caso, qualquer texto dentro de uma superfície escura volta a herdar a cor dela. ============================================================================= */ .footer, .footer-bottom, .mne-header, .mne-footer, .superficie-escura { color: var(--gray-200); } .footer p, .footer li, .footer span, .footer-bottom p, .footer-bottom span, .mne-footer p, .mne-footer li, .superficie-escura p, .superficie-escura li, .superficie-escura span { color: inherit; } .footer a, .mne-footer a, .superficie-escura a { color: var(--white-color); } .footer h1, .footer h2, .footer h3, .footer h4, .mne-footer h1, .mne-footer h2, .mne-footer h3, .mne-footer h4, .superficie-escura h1, .superficie-escura h2, .superficie-escura h3, .superficie-escura h4 { color: var(--white-color); } /* ============================================================================= Entrelinha por papel do texto O mesmo corpo de 17px renderizava com 1.5, 1.6 e 1.7; o 15px com quatro valores; o título de 38px com 1.2 e 1.6 — este último frouxo demais, o título perdia a unidade de bloco. Aqui a entrelinha deixa de ser propriedade do TAMANHO e passa a ser propriedade do PAPEL: título aperta para virar um bloco só, corpo respira para a leitura corrida, rótulo não tem entrelinha porque tem uma linha. ============================================================================= */ h1, h2, .hero-title, .section-title, .display { line-height: var(--lh-titulo); text-wrap: balance; } h3, h4, h5, .service-title, .card-title { line-height: var(--lh-sub); text-wrap: balance; } body, p, li, dd, .section-subtitle, .hero-description { line-height: var(--lh-corpo); } small, .small, figcaption, .nota, .legenda, .meta { line-height: var(--lh-apoio); } .rotulo, .label, .badge, .selo, .chip, .btn, button { line-height: var(--lh-rotulo); } /* Texto corrido não passa da medida de leitura. Parágrafos iam até a largura do contêiner (1280px), o que dá mais de 120 caracteres por linha — o olho erra o retorno e relê a mesma linha. */ p, .section-subtitle, .hero-description, .about-text, .service-description { max-width: var(--medida-leitura); } /* Dentro de cartão e grade a medida já é o próprio contêiner. */ .card p, .service-card p, .cartao p, .footer p, .grade-cidades p, [class*="grid"] p, [class*="col"] p { max-width: none; } /* Números de destaque (5+, 1000+, 100+) são rótulo de uma linha, não texto corrido: herdavam a entrelinha do corpo e ficavam com 63px de altura de linha num tipo de 38px, abrindo um buraco acima e abaixo do número. */ .stat-number, .numero-destaque, .destaque__valor { line-height: var(--lh-rotulo); font-variant-numeric: tabular-nums; }