/* ============================================================================ MaxiFlow Intelligence — Home institucional (plan_00046, DEC-006) Tokens: este arquivo consome o vocabulário OFICIAL do projeto, `static/css/branding/maxiflow_tokens.css`, que implementa o brand-kit §17.1 e é carregado por `templates/base/base_home.html`. Nenhum valor de marca é decisão desta página: se um valor precisar mudar, muda-se o arquivo de tokens, não este. Escopo: todo seletor é prefixado por `.home`. O `` da home carrega `class="home"`. `base_home.html` é usado exclusivamente por `pages/home/home.html`, mas o prefixo é mantido para que o arquivo continue seguro caso esse base venha a ser compartilhado. Não alterar `static/css/default.css`: é consumido por outras páginas. ============================================================================ */ /* Únicos tokens próprios desta página: o brand-kit §8.4 define a cor de texto do "card premium" (fundo navy), mas ela não está no arquivo oficial. */ :root { --home-text-on-inverse: #D8E3F0; --home-topbar-height: 64px; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } body.home { margin: 0; font-family: var(--font-sans); font-size: var(--font-size-body); line-height: 1.55; /* brand-kit §6.2, Body */ color: var(--color-text-primary); background: var(--color-bg-page); -webkit-font-smoothing: antialiased; } .home img, .home svg { max-width: 100%; } /* Escala tipográfica: brand-kit §6.2, via tokens oficiais. O clamp reduz em telas pequenas sem ultrapassar o topo definido pelo guia. */ .home h1, .home h2, .home h3 { margin: 0 0 var(--space-4); color: var(--color-text-primary); text-wrap: balance; } .home h1 { font-size: clamp(2rem, 4vw, var(--font-size-h1)); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .home h2 { font-size: clamp(1.5rem, 3vw, var(--font-size-h2)); font-weight: 700; line-height: 1.2; } .home h3 { font-size: var(--font-size-h3); font-weight: 700; line-height: 1.25; } .home p { margin: 0 0 var(--space-4); } .home-container { width: 100%; max-width: var(--layout-content-max); margin-inline: auto; padding-inline: var(--space-6); } /* Alvos de âncora: a topbar é sticky e cobria o título de destino. Sem isto, "Solicitar demonstração" levava o

do formulário para y=33. / :target, #demo, #form-demo, #video-principal { scroll-margin-top: calc(var(--home-topbar-height) + var(--space-4)); } .home-section { padding-block: var(--space-20); } .home-section--tight { padding-block: var(--space-12); } .home-section--alt { background: var(--color-bg-soft); } / Seção centralizada por inteiro: título, parágrafo e mídia no mesmo eixo. `.home p` é (0,1,1) e zeraria a margem lateral do lead, então a regra abaixo usa duas classes, (0,2,0), para vencer. / .home-section--center { text-align: center; } .home-section--center .home-lead { margin-inline: auto; } / O ícone do card é `display: block`, então `text-align: center` não o move. Precisa de margem automática para acompanhar o texto centralizado. / .home-section--center .home-cardicon { margin-inline: auto; } / Inversão sobre navy — "card premium" do brand-kit §8.4. O hero compartilha o tratamento: sem isso, os títulos herdariam `--color-text-primary` (navy) e ficariam invisíveis sobre navy. / .home-section--navy { background: var(--color-bg-inverse); color: var(--home-text-on-inverse); } .home-section--navy h1, .home-section--navy h2, .home-section--navy h3, .home-hero h1, .home-hero h2, .home-hero h3 { color: var(--color-text-inverse); } / Sobrelinha: texto pequeno (14px), então NÃO usar `--maxiflow-blue`. O brand-kit §5.2 aprova #0A92D5 só para texto grande — 3.45:1 sobre branco e 4.13:1 sobre navy. Aqui usamos tons que passam AA em texto normal. / .home-eyebrow { font-size: var(--font-size-small); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--maxiflow-metallic-blue); margin: 0 0 var(--space-3); } .home-hero .home-eyebrow, .home-section--navy .home-eyebrow { color: var(--home-text-on-inverse); } .home-lead { font-size: 1.125rem; max-width: var(--layout-text-max); } / `.home p` é (0,1,1) e vencia `.home-lead--center` (0,1,0), zerando a margem lateral: o parágrafo ficava com a caixa encostada à esquerda enquanto título, botão e microcopy centravam em 600. Duas classes elevam para (0,2,0). / .home .home-lead--center { margin-inline: auto; } .home-prose { max-width: var(--layout-text-max); } / Seção-declaração: bloco curto, sem elementos de apoio. Centralizado, o texto lê como afirmação; à esquerda num container de 1200px, sobravam 480px vazios à direita e a seção parecia desequilibrada. / .home-prose--center { margin-inline: auto; text-align: center; } / Cabeçalho centralizado do bloco de CTA final / .home-cta-head { text-align: center; margin-bottom: var(--space-12); } / Foco visível. Não redefinir `border-radius` aqui: isso alterava o raio do próprio elemento durante o foco (botão de 6px virava 4px). O anel duplo atende o "contorno adicional" pedido pelo brand-kit §5.3. / .home :is(a, button, input, textarea, [tabindex]):focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; box-shadow: 0 0 0 1px var(--color-bg-page); } / ---------- Botões — brand-kit §8.2 ---------- / .home-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--button-height-md); padding: 0 var(--space-5); border-radius: var(--button-radius); border: 1px solid transparent; font: inherit; font-size: var(--font-size-body); font-weight: var(--button-font-weight); text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .home-btn--primary { background: var(--color-action-primary); color: var(--color-text-inverse); } .home-btn--primary:hover { background: var(--color-action-primary-hover); color: var(--color-text-inverse); } .home-btn--secondary { background: var(--color-action-secondary); color: var(--color-text-inverse); } .home-btn--secondary:hover { background: var(--color-action-secondary-hover); color: var(--color-text-inverse); } .home-btn--tertiary { background: var(--color-bg-card); color: var(--color-action-secondary); border-color: var(--color-action-secondary); } .home-btn--tertiary:hover { background: var(--color-info-bg); } / Tertiary sobre navy: inverte para permanecer legível / .home-section--navy .home-btn--tertiary, .home-hero .home-btn--tertiary { background: transparent; color: var(--color-text-inverse); border-color: rgba(255, 255, 255, 0.6); } .home-section--navy .home-btn--tertiary:hover, .home-hero .home-btn--tertiary:hover { background: rgba(255, 255, 255, 0.1); } .home-btn[disabled], .home-btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; pointer-events: none; } .home-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } .home-actions--center { justify-content: center; } .home-microcopy { margin: var(--space-3) 0 0; font-size: var(--font-size-small); line-height: 1.45; color: var(--color-text-secondary); } .home-section--navy .home-microcopy, .home-hero .home-microcopy { color: var(--home-text-on-inverse); } / ---------- Barra superior ---------- / .home-topbar { position: sticky; top: 0; z-index: 10; background: var(--color-bg-page); border-bottom: 1px solid var(--color-border-subtle); } .home-topbarinner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--home-topbar-height); padding-block: var(--space-3); } .home-topbarlogo { display: flex; align-items: center; } / Altura calibrada para respeitar o mínimo de 120px de largura do lockup horizontal (brand-kit §3, "Tamanho mínimo"): 252×78 → 44px ≈ 142px. / .home-topbarlogo img { height: 44px; width: auto; display: block; } / ---------- Hero ---------- / .home-hero { background: var(--color-bg-inverse); color: var(--home-text-on-inverse); } .home-heroinner { display: grid; gap: var(--space-10); align-items: center; } .home-hero p { color: var(--home-text-on-inverse); } @media (min-width: 900px) { .home-heroinner { grid-template-columns: 1.15fr 0.85fr; } } .home-heroaside { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--card-radius); padding: var(--card-padding); background: rgba(255, 255, 255, 0.04); } .home-heroaside h2 { font-size: var(--font-size-h4); margin-bottom: var(--space-4); } .home-heropillars { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); } .home-heropillars li { display: flex; gap: var(--space-3); align-items: flex-start; } .home-heropillars svg { flex: 0 0 auto; margin-top: 2px; } / ---------- Espaço de vídeo (componente reutilizável) ---------- / .home-video { max-width: 960px; margin-inline: auto; } / Espaço secundário, embutido no fim de uma seção que já tem conteúdo. Herda a centralização de `.home-video`: a seção que o contém usa `.home-section--center`, então título, parágrafo e vídeo compartilham o mesmo eixo. Foi assim que o desalinhamento de 96px entre o cabeçalho da seção e o bloco de vídeo foi resolvido. / .home-video--inline { margin-top: var(--space-16); } .home-videohead { text-align: center; margin-bottom: var(--space-6); } .home-videohead p { color: var(--color-text-secondary); max-width: 640px; margin-inline: auto; } .home-section--navy .home-videohead p { color: var(--home-text-on-inverse); } / aspect-ratio reserva a altura final: sem layout shift quando o vídeo entrar / .home-videoframe { position: relative; aspect-ratio: 16 / 9; border-radius: var(--card-radius); overflow: hidden; background: var(--color-bg-inverse); border: 1px solid var(--card-border); } .home-videoposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } / Player injetado pelo facade no clique. Ocupa a caixa 16:9 já reservada, então a troca de poster para player não desloca o layout. / .home-videoiframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .home-videooverlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; padding: var(--space-6); / opacidade alta o bastante para o texto não competir com o poster / background: rgba(7, 44, 76, 0.88); } .home-videoplay { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.12); color: var(--color-text-inverse); cursor: pointer; } .home-videoplay[disabled] { opacity: 0.55; cursor: not-allowed; } .home-videonote { color: var(--color-text-inverse); margin: 0; font-weight: 600; } .home-videohint { color: var(--home-text-on-inverse); margin: 0; font-size: var(--font-size-small); } .home-videooverlay a { color: var(--color-text-inverse); } .home-videocaption { margin: var(--space-3) 0 0; text-align: center; font-size: var(--font-size-small); line-height: 1.45; color: var(--color-text-secondary); } .home-section--navy .home-video__caption { color: var(--home-text-on-inverse); } / Selo textual — estado nunca comunicado só por cor (brand-kit §5.2) / .home-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-size-small); font-weight: 600; background: var(--color-info-bg); color: var(--color-info-text); } / ---------- Cards — brand-kit §8.4 ---------- / .home-grid { display: grid; gap: var(--space-6); margin-top: var(--space-8); } / 4 passos: `auto-fit` produzia [3,1] em 768px, deixando "Medir" órfão. Colunas explícitas garantem 4 / 2×2 / 1 — as leituras equilibradas. / .home-grid--4 { grid-template-columns: 1fr; } @media (min-width: 640px) { .home-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .home-grid--4 { grid-template-columns: repeat(4, 1fr); } } / Grade de 3 colunas em flex, não em grid: com 5 itens o `auto-fit` produzia 4 + 1, deixando um card órfão em telas largas. Aqui a linha final fica centralizada e os cards mantêm a mesma largura, qualquer que seja a contagem. Também serve à futura faixa de produtos (DEC-002), que terá 5 itens. / .home-grid--3 { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); } .home-grid--3 > { flex: 1 1 280px; } @media (min-width: 640px) and (max-width: 999px) { .home-grid--3 > * { max-width: calc((100% - var(--space-6)) / 2); } } @media (min-width: 1000px) { .home-grid--3 > * { max-width: calc((100% - 2 * var(--space-6)) / 3); } } .home-card { background: var(--color-bg-card); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: var(--card-padding); box-shadow: var(--shadow-soft); } /* Título de card usa a escala H4 (brand-kit §6.2: "Subseção e card"), mantendo

por hierarquia semântica de headings. / .home-card h3 { font-size: var(--font-size-h4); font-weight: 600; line-height: 1.3; color: var(--color-text-primary); margin-bottom: var(--space-2); } .home-card p { margin: 0; color: var(--color-text-secondary); } .home-cardicon { color: var(--maxiflow-blue); margin-bottom: var(--space-4); display: block; } .home-stepnum { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-info-bg); color: var(--color-info-text); font-weight: 700; font-size: var(--font-size-small); margin-bottom: var(--space-4); } / CTA de meio de página (fim da seção "Como funciona") / .home-midcta { margin-top: var(--space-10); text-align: center; } .home-midcta p { margin-bottom: var(--space-4); } / ---------- Formulário (estado "Em Construção") — brand-kit §8.3 ---------- / .home-form-block { background: var(--color-bg-card); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: var(--space-8); max-width: var(--layout-text-max); margin-inline: auto; color: var(--color-text-primary); } / Card claro dentro de seção navy: restaura a cor do título, que senão herdaria o branco de `.home-section--navy h3` e sumiria no fundo claro. / .home-form-block h3 { margin-bottom: var(--space-3); color: var(--color-text-primary); } .home-formnote { color: var(--color-text-secondary); } .home-form { display: grid; gap: var(--space-4); margin-top: var(--space-6); } .home-formrow { display: grid; gap: var(--space-4); } @media (min-width: 640px) { .home-formrow { grid-template-columns: 1fr 1fr; } } .home-field { display: grid; gap: var(--space-2); } .home-field label { font-size: var(--font-size-small); font-weight: 600; color: var(--color-text-primary); } .home-field :is(input, textarea) { height: var(--input-height-md); padding: 0 var(--input-padding-x); border: 1px solid var(--input-border); border-radius: var(--input-radius); background: var(--color-bg-card); color: var(--color-text-primary); font: inherit; font-size: var(--font-size-body); } .home-field textarea { height: auto; min-height: 88px; padding-block: var(--space-2); resize: vertical; } .home-field :is(input, textarea)::placeholder { color: var(--color-text-muted); } .home-field :is(input, textarea):focus { border-color: var(--color-action-secondary); } .home-field :is(input, textarea)[disabled] { opacity: 0.6; cursor: not-allowed; background: var(--color-bg-soft); } / Alternativa funcional: vem logo após o formulário na ordem do DOM / .home-formfallback { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--card-border); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); justify-content: space-between; } .home-formfallback p { margin: 0; color: var(--color-text-secondary); } / ---------- Utilitário ---------- / .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } / ---------- Responsivo ---------- / @media (max-width: 640px) { / Token de componente, não mutação de `--space-20`: alterar o token da escala afetaria qualquer outro uso, não só o padding de seção. / .home-section { padding-block: var(--space-16); } .home-container { padding-inline: var(--space-4); } .home-form-block { padding: var(--space-5); } .home-actions .home-btn { width: 100%; } .home-formfallback { flex-direction: column; align-items: stretch; } } @media (prefers-reduced-motion: reduce) { .home , .home ::before, .home ::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }