/* Base do site: o que o quadro do protótipo fazia e o site precisa fazer sozinho. */ html, body { margin: 0; background: #F6FAFB; overflow-x: clip; } x-if { display: contents; } x-if[hidden] { display: none; } /* O layout foi desenhado em 1280px: centraliza, e as faixas escuras vão até a borda da tela (a sombra estende o fundo; o clip-path deixa a sombra só nas laterais). */ [data-raiz] { max-width: 1280px; margin: 0 auto; overflow: visible !important; } /* Só acima de 1280px: abaixo disso a coluna já ocupa a tela toda, e o recorte (clip-path) cortava o que sai da faixa, como o painel do menu do celular. */ @media (min-width: 1281px) { [data-raiz] > section[style*="background:#0F2830"], [data-raiz] > .leg-topo, [data-raiz] > .rod { box-shadow: 0 0 0 100vmax #0F2830; clip-path: inset(0 -100vmax); } /* topo claro (Planos): o fundo branco do menu também vai até a borda */ [data-raiz] > header.nav { box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); } } /* Balão do comercial: no site a página rola, então ele é fixo no canto (sem o cálculo do quadro). */ .wab { position: fixed !important; top: auto !important; bottom: 24px; } /* Entrada: o topo fica invisível até o movimento começar (js/dc.js tira a classe; o tem um limite de 1,5 s para nunca deixar a página em branco). */ .mv-pre [data-raiz] > section:first-of-type, .mv-pre [data-raiz] > header { opacity: 0; } @media (prefers-reduced-motion: reduce) { .mv-pre [data-raiz] > section:first-of-type, .mv-pre [data-raiz] > header { opacity: 1; } } /* O índice (01, 02…) e o nome da seção lado a lado em todas as páginas. */ .eyebrow { display: inline-flex; align-items: center; } /* A textura de grão cobre a tela inteira (no quadro cobria só a coluna de 1280px e o centro ficava mais escuro que as laterais). */ [data-pg]::after { position: fixed !important; } /* Rodapé: a EXI Sistemas com link para o site dela e os perfis nas redes (os mesmos do sameAs dos dados estruturados — é assim que o Google liga o ExiZap à empresa que ele já conhece). */ .rod-marca p a { color: #CDD8DC; text-decoration: underline; text-decoration-color: rgba(205,216,220,.35); text-underline-offset: 3px; transition: color .2s; } .rod-marca p a:hover { color: #fff; } .rod-redes { display: flex; gap: 10px; } .rod-redes a { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #CDD8DC; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: color .2s, background .2s, border-color .2s; } .rod-redes a:hover { color: #fff; background: rgba(53,208,222,.16); border-color: rgba(53,208,222,.5); } /* Campos do formulário do comercial com 16px: abaixo disso o iPhone dá zoom na página ao tocar. */ .wab .wab-in { font-size: 16px; } /* Menu do celular e do tablet (até 900px). No computador o menu fica no topo; abaixo disso ele sumia, e com ele o "Entrar": o cliente não achava o login no celular.
abre sem script; o script da Base só fecha ao tocar fora, num link ou no Esc. */ .menu-m { display: none; } @media (max-width: 900px) { .nav { position: relative; } .nav:has(.menu-m[open]) { z-index: 60 !important; } .menu-m { display: block; flex-shrink: 0; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; } /* Planos estiliza todo
(as perguntas) */ .menu-m > summary { list-style: none; width: 44px; height: 44px; box-sizing: border-box; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); } .menu-m > summary::-webkit-details-marker { display: none; } .menu-m > summary:focus-visible { outline: 2px solid #35D0DE; outline-offset: 2px; } header.nav[style*="background:#fff"] .menu-m > summary { color: #16211F; background: #F6FAFB; border-color: #E1E9EC; } .menu-m svg path { transition: transform .25s ease, opacity .2s ease; transform-box: fill-box; transform-origin: center; } .menu-m[open] .mm-a { transform: translateY(5px) rotate(45deg); } .menu-m[open] .mm-b { opacity: 0; } .menu-m[open] .mm-c { transform: translateY(-5px) rotate(-45deg); } .menu-m-painel { position: fixed; top: 74px; left: 12px; right: 12px; max-height: calc(100vh - 90px); overflow-y: auto; z-index: 60; /* fixo: as faixas do topo têm overflow:hidden */ display: flex; flex-direction: column; padding: 8px; border-radius: 18px; background: #0F2830; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); } .menu-m-painel a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 12px; font-size: 16px; font-weight: 600; color: #E6EEF0; text-decoration: none; } .menu-m-painel a:hover, .menu-m-painel a:focus-visible { background: rgba(255,255,255,.08); color: #fff; } .menu-m-painel .menu-m-entrar { margin-top: 6px; justify-content: center; border: 1px solid rgba(255,255,255,.24); } } /* Celular: o topo usa a mesma margem de 18px do conteúdo (antes somava a da seção e a do topo, e em 360px o botão do menu encostava na borda da tela). */ @media (max-width: 560px) { .nav { gap: 10px !important; } section > header.nav { padding: 0 !important; } [data-raiz] > header.nav { padding: 0 18px !important; } } /* Abas de segmento no computador: pediam 626px numa coluna de 540–560px e cada aba quebrava em duas linhas ("Para / empresas"). Mais compactas, cabem numa linha (529px). Até 1180px elas rolam de lado. */ @media (min-width: 1181px) { .seg-nav a { white-space: nowrap; padding: 9px 10px; font-size: 13px; } }