/* ============================================================================ MILLENIUM TRANSPORTES — DESIGN TOKENS Millenium Transportes Especiais e Sensíveis Ltda v2.0 · 03/08/2026 · Fig Studio Esta versão substitui a v1.0 e é derivada do MANUAL DA MARCA oficial (Publiaty, 2021), recebido em 03/08/2026. O QUE MUDOU EM RELAÇÃO À v1.0 A v1.0 foi construída antes do manual e propunha uma paleta "Petróleo/Cobre". O manual define seis cores e determina: "Não deverá ser usada outras cores além destas para que não haja ruídos". A paleta proposta foi descartada. REGRA DE DERIVAÇÃO As seis cores oficiais estão marcadas com ★. Todos os demais valores são obtidos EXCLUSIVAMENTE por mistura das cores oficiais com branco ou preto — nenhum matiz novo é introduzido. Tons intermediários existem porque estados de interface (hover, foco, superfície, borda) não podem ser construídos com seis valores, mas nenhum deles é uma cor nova. ============================================================================ */ :root { /* ========================================================================== 1. PALETA OFICIAL — Manual da Marca, p. 11 ========================================================================== */ --marca-azul: #1F468E; /* ★ Pantone 7687 C · RGB 31 70 142 */ --marca-azul-claro: #8DD6F4; /* ★ Pantone 2975 C · RGB 141 214 244 */ --marca-cinza: #787878; /* ★ Cool Gray 9 · RGB 120 120 120 */ --marca-cinza-claro: #F1F2F2; /* ★ Cool Gray 1 · RGB 241 242 242 */ --marca-branco: #FFFFFF; /* ★ */ --marca-preto: #000000; /* ★ Neutral Black C */ /* ========================================================================== 2. RAMPAS DERIVADAS — não usar diretamente em componentes. ========================================================================== */ /* --- Azul institucional · derivado de #1F468E --------------------------- */ --az-950: #0D1D3C; --az-900: #122952; /* rodapé e superfícies de máxima profundidade */ --az-800: #173469; --az-700: #1B3D7C; --az-600: #1F468E; /* ★ OFICIAL — superfície de marca, hero, CTA no claro */ --az-500: #3C5E9D; --az-400: #627EB0; --az-300: #8FA2C6; --az-200: #BCC8DD; --az-100: #E0E5EF; --az-50: #F4F6F9; /* --- Azul claro · derivado de #8DD6F4 ----------------------------------- */ --ci-700: #4C7484; /* único tom da família legível como texto sobre branco */ --ci-600: #6194A8; --ci-500: #76B4CD; --ci-400: #8DD6F4; /* ★ OFICIAL — acento, CTA no escuro, pattern */ --ci-300: #ABE1F7; --ci-200: #C8EBFA; --ci-100: #E1F4FC; --ci-50: #F2FAFE; /* --- Cinza · derivado de #787878 e #F1F2F2 ------------------------------ */ --gr-900: #242424; --gr-800: #363636; --gr-700: #4A4A4A; --gr-600: #606060; --gr-500: #787878; /* ★ OFICIAL — ver restrição de contraste abaixo */ --gr-400: #9B9B9B; --gr-300: #BCBCBC; --gr-200: #D9D9D9; --gr-100: #F1F2F2; /* ★ OFICIAL */ --gr-50: #F7F8F8; --gr-000: #FFFFFF; /* ★ OFICIAL */ --preto: #000000; /* ★ OFICIAL */ /* ATENÇÃO — restrição de uso do Cool Gray 9 (#787878) Sobre branco ele entrega 4,42:1 e reprova em WCAG AA para texto normal. Fica permitido apenas em texto grande (≥24px, ou ≥19px em negrito), bordas e elementos gráficos. Para texto corrido secundário o sistema usa --gr-600 (6,29:1), que é o mesmo cinza oficial escurecido com preto. */ /* --- Estados funcionais ------------------------------------------------- Exceção consciente ao manual: validação de formulário exige vermelho e verde por convenção universal de usabilidade — indicar erro apenas com o azul da marca deixaria a mensagem indistinguível de uma nota comum. Restritos ao retorno de formulário; nunca em superfície, título ou elemento de marca. */ --sem-erro: #B00020; --sem-erro-bg: #FFF5F5; --sem-sucesso: #1E7A4B; --sem-sucesso-bg: #EEF7F1; --sem-info: #1F468E; --sem-info-bg: #F4F6F9; /* WhatsApp: marca de terceiro, permitida no ícone e no botão do canal por ser um selo de reconhecimento externo, não um elemento da identidade. */ --whatsapp-marca: #25D366; --whatsapp-acao: #0F7F41; --whatsapp-hover: #0C6B37; /* ========================================================================== 3. TOKENS SEMÂNTICOS — a camada que os componentes consomem. ========================================================================== */ /* --- Superfícies -------------------------------------------------------- */ --surface-base: var(--gr-000); --surface-sunken: var(--gr-100); /* ★ Cool Gray 1 — seções alternadas */ --surface-raised: var(--gr-000); --surface-brand-soft: var(--az-50); --surface-brand: var(--az-600); /* ★ hero e seções de marca */ --surface-brand-deep: var(--az-900); /* rodapé */ --surface-overlay: rgb(31 70 142 / .82); /* --- Texto -------------------------------------------------------------- */ --text-primary: var(--gr-900); --text-secondary: var(--gr-600); --text-tertiary: var(--gr-500); /* ★ apenas texto grande ou legenda */ --text-heading: var(--az-600); /* ★ títulos em azul, como no manual */ --text-brand: var(--az-600); --text-accent: var(--ci-700); --text-on-brand: var(--gr-000); --text-on-brand-soft: var(--ci-200); --text-on-brand-mute: var(--az-200); --text-label-dark: var(--ci-400); /* ★ eyebrow sobre azul */ --text-disabled: var(--gr-400); /* --- Bordas ------------------------------------------------------------- */ --border-subtle: var(--gr-100); --border-default: var(--gr-200); --border-strong: var(--gr-500); /* ★ contorno funcional de campo */ --border-brand: var(--az-600); --border-accent: var(--az-600); /* filetes sobre superfície clara */ --border-on-brand: rgb(255 255 255 / .22); /* --- Ação --------------------------------------------------------------- No claro o botão é o azul institucional com texto branco (9,03:1). No escuro ele inverte para o azul claro oficial com texto azul-900 (8,91:1). As duas cores são oficiais e, em qualquer superfície, o botão é sempre o elemento de maior contraste da tela. */ --action-primary: var(--az-600); --action-primary-hover: var(--az-700); --action-primary-active: var(--az-800); --action-primary-text: var(--gr-000); --action-secondary: transparent; --action-secondary-border: var(--az-600); --action-secondary-text: var(--az-600); --action-secondary-hover: var(--az-50); --action-solid: var(--az-800); --action-solid-hover: var(--az-700); --action-solid-text: var(--gr-000); --action-whatsapp: var(--whatsapp-acao); --action-whatsapp-hover: var(--whatsapp-hover); --focus-ring: var(--az-700); --focus-ring-dark: var(--ci-400); --focus-ring-width: 3px; --focus-ring-offset: 2px; /* ========================================================================== 4. TIPOGRAFIA ------------------------------------------------------------------------ Manual, p. 10: · Títulos e subtítulos → Helvetica Neue Heavy Condensed Oblique · Textos em geral → Calibri · Decorativa → Prescious Soul Nenhuma das três é licenciada para web. Substitutos adotados: Archivo → variável, com eixo de largura (semicondensada) e itálico. Reproduz peso, condensação e inclinação da Helvetica Neue Heavy Condensed Oblique. É a fonte dos títulos. Carlito → clone metricamente compatível com a Calibri: mesmas larguras e entrelinhas, de modo que impresso e site coincidem. Em máquinas com Calibri instalada, a própria Calibri é usada. Prescious Soul → não aplicada. É uma script de baixa legibilidade, descrita no manual como decorativa "para momentos especiais"; em uma página de conversão prejudicaria a leitura. Fica reservada a peças gráficas. ========================================================================== */ --font-display: "Archivo", "Helvetica Neue", "Arial Narrow", Arial, sans-serif; --font-text: Calibri, "Carlito", "Segoe UI", system-ui, sans-serif; /* Largura e inclinação que aproximam a Helvetica Neue Heavy Condensed Oblique */ --display-stretch: 87.5%; --display-style: italic; /* Em títulos condensados e inclinados, o espaço entre palavras encolhe junto com as letras e o texto passa a ser lido como um bloco único. Este token devolve o intervalo sem alargar a fonte. */ --display-word-spacing: 0.06em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; /* Escala modular 1.250, base 16px, fluida entre 360 e 1440px de viewport */ --fs-3xs: 0.6875rem; --fs-2xs: 0.75rem; --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: clamp(1.0625rem, 0.99rem + 0.31vw, 1.25rem); --fs-xl: clamp(1.25rem, 1.16rem + 0.39vw, 1.5rem); --fs-2xl: clamp(1.5rem, 1.34rem + 0.70vw, 1.953rem); --fs-3xl: clamp(1.875rem, 1.60rem + 1.17vw, 2.441rem); --fs-4xl: clamp(2.25rem, 1.79rem + 1.99vw, 3.052rem); --fs-5xl: clamp(2.625rem, 1.87rem + 3.26vw, 3.815rem); /* Título de card em grade de três colunas. A largura útil do card trava em ~306px; medido em Archivo 800 itálico 87,5%, o título mais longo do site pede 307px a 20px e 292px a 19px. Existe para manter todos em uma linha. */ --fs-card-title: clamp(1rem, 0.92rem + 0.36vw, 1.1875rem); --ws-card-title: 0.03em; /* Escalas de exibição do makeover - manchete do hero, statement de abertura de seção e marquee tipográfico do rodapé. Tetos contidos de propósito: a Archivo heavy condensada oblíqua já tem volume; acima de ~4.75rem a manchete passa de afirmação a grito. A manchete divide a linha com o texto de apoio desde a v2.5, então o teto caiu de 4.6rem para 3.5rem. */ --fs-hero: clamp(2rem, 1.5rem + 2.6vw, 3.5rem); --fs-statement: clamp(1.375rem, 1.05rem + 1.7vw, 2.375rem); --fs-marquee: clamp(2.75rem, 1.4rem + 7vw, 6rem); --fs-ticker: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem); --lh-tight: 1.14; --lh-snug: 1.24; --lh-normal: 1.45; --lh-relaxed: 1.6; /* A Archivo semicondensada já é estreita por desenho. Tracking negativo, que faria sentido numa grotesca de largura normal, fecha demais as contraformas e cola as palavras. Por isso a escala parte do zero. */ --ls-tighter: 0; --ls-tight: 0.004em; --ls-normal: 0; --ls-wide: 0.06em; --ls-widest: 0.14em; --measure-narrow: 46ch; --measure: 68ch; --measure-wide: 80ch; /* ========================================================================== 5. ESPAÇAMENTO ========================================================================== */ --sp-0: 0; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-11: 6rem; --sp-12: 8rem; --section-y: clamp(3.5rem, 2.2rem + 5.6vw, 7.5rem); --section-y-tight: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem); /* ========================================================================== 6. LAYOUT ========================================================================== */ --container-max: 1240px; --container-text: 760px; --container-pad: clamp(1.25rem, 0.85rem + 1.7vw, 2.5rem); --grid-cols: 12; --grid-gap: clamp(1rem, 0.7rem + 1.3vw, 2rem); --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* ========================================================================== 7. FORMA ------------------------------------------------------------------------ O símbolo da marca é um octógono de vértices retos. O sistema acompanha: raios pequenos, cantos definidos, nada arredondado por decoração. ========================================================================== */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px; --radius-xl: 14px; --radius-full: 999px; --border-width: 1px; --border-width-thick: 2px; --rule-accent: 3px; /* ========================================================================== 8. ELEVAÇÃO — sombras tingidas com o azul da marca, nunca preto puro. ========================================================================== */ --shadow-xs: 0 1px 2px rgb(18 41 82 / .06); --shadow-sm: 0 2px 6px rgb(18 41 82 / .08); --shadow-md: 0 6px 16px rgb(18 41 82 / .10); --shadow-lg: 0 14px 34px rgb(18 41 82 / .14); --shadow-xl: 0 26px 60px rgb(18 41 82 / .18); /* ========================================================================== 9. MOVIMENTO ========================================================================== */ --dur-instant: 90ms; --dur-fast: 150ms; --dur-normal: 240ms; --dur-slow: 400ms; --dur-reveal: 700ms; /* Movimento contínuo e coreografia de entrada (makeover FN). Marquees e tickers são ambiente, não chamada: quanto mais lentos, mais parecem estrutura e menos parecem anúncio. */ --dur-marquee: 46s; /* vitrine de logos */ --dur-marquee-tight: 34s; /* vitrine em telas estreitas */ --dur-ticker: 58s; /* faixa de texto entre seções */ --dur-marquee-foot: 28s; /* marquee tipográfico do rodapé */ --dur-hero-zoom: 22s; /* aproximação lenta da foto do hero */ --ease-standard: cubic-bezier(0.20, 0.00, 0.10, 1.00); --ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1.00); --ease-exit: cubic-bezier(0.40, 0.00, 1.00, 1.00); --transition-base: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); /* ========================================================================== 10. CAMADAS, ALVOS E MARCA ========================================================================== */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-dropdown: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-float-cta: 700; --touch-min: 44px; --touch-comfort: 48px; --field-height: 48px; /* Altura total da pilha fixa do topo: faixa de anúncio + respiro + cartão de navegação flutuante. Os deslocamentos de âncora, o sticky da intro de serviços e os heroes com sangria derivam todos deste valor. */ --header-height: clamp(96px, 88px + 1.8vw, 112px); --navcard-height: 64px; --navcard-height-tight: 56px; /* Marca — a área de proteção da p. 9 equivale à altura do símbolo. */ --logo-altura: clamp(30px, 26px + 1vw, 40px); --logo-clearspace: var(--sp-4); } /* ============================================================================ MOVIMENTO REDUZIDO ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-normal: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* ============================================================================ CONTEXTO DE MARCA (fundo azul institucional) Aplique .on-brand em qualquer bloco sobre o azul. Os tokens semânticos se reescrevem — os componentes internos não precisam de variante própria. ============================================================================ */ .on-brand { --surface-base: var(--az-600); --surface-sunken: var(--az-700); --surface-raised: var(--az-700); --text-primary: var(--gr-000); --text-secondary: var(--ci-200); --text-tertiary: var(--az-200); --text-heading: var(--gr-000); --text-brand: var(--ci-400); --text-accent: var(--ci-400); --border-subtle: rgb(255 255 255 / .12); --border-default: rgb(255 255 255 / .22); --border-strong: rgb(255 255 255 / .34); --border-accent: var(--ci-400); /* ★ filetes sobre o azul institucional */ --focus-ring: var(--ci-400); --action-primary: var(--ci-400); --action-primary-hover: var(--ci-300); --action-primary-active: var(--ci-500); --action-primary-text: var(--az-900); --action-secondary-border: rgb(255 255 255 / .38); --action-secondary-text: var(--gr-000); --action-secondary-hover: rgb(255 255 255 / .10); color: var(--text-primary); background-color: var(--surface-base); } /* Ilha clara dentro de um bloco de marca — cartão branco sobre o azul. Restaura os tokens do contexto claro para que o botão volte a ser o azul institucional sólido: um botão azul-claro sobre cartão branco entrega 1,6:1 contra a superfície e deixa de funcionar como chamada principal. */ .on-light { --surface-base: var(--gr-000); --surface-sunken: var(--gr-100); --surface-raised: var(--gr-000); --text-primary: var(--gr-900); --text-secondary: var(--gr-600); --text-tertiary: var(--gr-500); --text-heading: var(--az-600); --text-brand: var(--az-600); --text-accent: var(--ci-700); --border-subtle: var(--gr-100); --border-default: var(--gr-200); --border-strong: var(--gr-500); --border-accent: var(--az-600); --focus-ring: var(--az-700); --action-primary: var(--az-600); --action-primary-hover: var(--az-700); --action-primary-active: var(--az-800); --action-primary-text: var(--gr-000); --action-secondary-border: var(--az-600); --action-secondary-text: var(--az-600); --action-secondary-hover: var(--az-50); color: var(--text-primary); } /* Variante profunda — rodapé e blocos de fechamento. */ .on-brand-deep { --surface-base: var(--az-900); --surface-sunken: var(--az-950); --surface-raised: var(--az-800); background-color: var(--surface-base); } /* ============================================================================ BASE ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-text); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text-primary); background-color: var(--surface-base); font-feature-settings: "kern" 1, "liga" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Títulos reproduzem a Helvetica Neue Heavy Condensed Oblique do manual: condensada, pesada e inclinada — a mesma voz das aberturas do manual. Do h4 para baixo a inclinação sai, para não comprometer blocos densos. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); word-spacing: var(--display-word-spacing); color: var(--text-heading); margin: 0 0 var(--sp-4); text-wrap: balance; } h1, h2, h3 { font-style: var(--display-style); } h1 { font-size: var(--fs-4xl); font-weight: var(--fw-heavy); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); } h1, h2 { word-spacing: calc(var(--display-word-spacing) + 0.015em); } h2 { font-size: var(--fs-3xl); font-weight: var(--fw-heavy); line-height: var(--lh-tight); } h3 { font-size: var(--fs-2xl); } h4 { font-size: var(--fs-xl); font-weight: var(--fw-bold); } h5 { font-size: var(--fs-lg); font-weight: var(--fw-bold); } h6 { font-size: var(--fs-base); font-weight: var(--fw-bold); } p { margin: 0 0 var(--sp-4); max-width: var(--measure); text-wrap: pretty; } a { color: var(--text-brand); text-underline-offset: 0.18em; } a:hover { color: var(--az-700); } .on-brand a:hover { color: var(--ci-300); } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); } ::selection { background: var(--ci-400); color: var(--az-900); }