/* ========================================================= CRITICAL CSS — above-the-fold, render-blocking Inclui: tokens, reset, header, hero, footer base, botões e media queries para esses elementos. Carregado primeiro no . Tokens (:root) ficam aqui e são herdados via cascata por rest.css. ========================================================= */ /* Anti-CLS: fallback metrics que aproximam early-sans-variable (Adobe Typekit). Quando Typekit termina de carregar e o swap acontece, as metricas do fallback ja sao parecidas, eliminando reflow visivel. */ @font-face { font-family: 'early-sans-fallback'; src: local('Arial'); size-adjust: 100%; ascent-override: 92%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'sora-fallback'; src: local('Arial'); size-adjust: 100%; ascent-override: 96%; descent-override: 25%; line-gap-override: 0%; } /* ========================================================= 1. TOKENS DE DESIGN & RESET ========================================================= */ :root { /* Cores institucionais — Paleta Accerte 2026 */ --azul-profundo: #082764; /* Midnight Blue - principal */ --azul-medio: #0856B1; /* Royal Blue */ --azul-claro: #0096ff; /* Deep Sky Blue (acento; como TEXTO so passa AA sobre fundo ESCURO) */ --azul-deep: #051432; /* Space Blue - fundo deep */ /* Cores claras */ --offwhite: #f8fcff; /* Cloud White */ --branco-puro: #FFFFFF; --cinza-suave: #e6edf6; /* Acento CTA (Pacific Blue) - antigo "coral" mantido como alias */ --coral: #0097b2; /* Pacific Blue - CTA */ --coral-hover: #007a91; --coral-text: #007a91; /* coral acessivel p/ TEXTO/LINK em fundo claro (WCAG AA 5.01:1 sobre branco). --coral #0097b2 e so p/ fundo/icone/elemento grande. */ --coral-glow: rgba(0, 151, 178, 0.35); /* Tipografia */ --texto-escuro: #082764; --texto-claro: #f8fcff; --texto-sec-claro: #c4e9ff; --texto-sec-escuro: #4A5568; /* Fontes (com fallbacks metric-adjusted pra eliminar CLS de font swap) */ --font-display: 'Sora', 'sora-fallback', system-ui, sans-serif; --font-body: 'early-sans-variable', 'early-sans-fallback', system-ui, sans-serif; /* Tipografia — escala unificada (espelha a home) */ --fs-h1: clamp(30px, 3.4vw, 44px); /* Hero H1 */ --fs-h2: clamp(28px, 3.4vw, 36px); /* Titulos de secao */ --fs-h3: clamp(24px, 2.6vw, 30px); /* Subtitulos */ --fs-h4: clamp(20px, 2vw, 24px); /* Cards, mini-headlines */ --fs-display: clamp(34px, 3.8vw, 44px); /* CTA / display */ --fs-article-title: clamp(36px, 5vw, 60px); /* Titulo de artigo de blog (foco da pagina) */ --fs-numeral: clamp(56px, 7vw, 88px); /* Numerais massivos */ --fs-lead: 18px; --fs-body: 16px; --fs-meta: 13px; --fs-small: 12px; --fs-eyebrow: 11px; /* Sombras */ --shadow-md: 0 8px 24px rgba(15, 40, 71, 0.08); --shadow-lg: 0 16px 48px rgba(15, 40, 71, 0.15); --shadow-xl: 0 24px 60px rgba(15, 40, 71, 0.25); /* Curvas */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; background-color: var(--azul-deep); } body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--texto-escuro); background: var(--azul-profundo); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; border: none; background: none; } .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; } /* Skip link (a11y): hidden until focused, jumps keyboard users past nav */ .skip-link { position: absolute; top: 12px; left: 12px; z-index: 1000; padding: 12px 20px; background: var(--azul-profundo); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: 0.01em; border-radius: 8px; border: 2px solid transparent; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4); transform: translateY(-150%); transition: transform 0.2s ease; } .skip-link:focus { transform: translateY(0); outline: 2px solid var(--coral); outline-offset: 2px; } /* ========================================================= 2. UTILITÁRIOS ========================================================= */ .eyebrow { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--coral-text); margin-bottom: 24px; } .hero .eyebrow, .hero-text .eyebrow, .sobre-mapa .eyebrow, .home-cta-band--dark .eyebrow { color: var(--texto-sec-claro); } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; font-family: var(--font-display); font-weight: 600; font-size: 15px; border-radius: 8px; transition: all 0.3s var(--ease-out-expo); cursor: pointer; } .btn-primary { background: var(--coral-hover); color: white; box-shadow: 0 4px 14px var(--coral-glow); } .btn-primary:hover { background: var(--coral-hover); transform: translateY(-2px); box-shadow: 0 8px 24px var(--coral-glow); } .btn-ghost { background: transparent; color: white; border: 1px solid rgba(255, 255, 255, 0.2); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.4); } .btn-outline { background: transparent; color: white; border: 1px solid rgba(255, 255, 255, 0.25); padding: 10px 20px; font-size: 14px; } .btn-outline:hover { background: rgba(255, 255, 255, 0.06); } /* IndicAI brand button — gradiente laranja em todas as páginas */ .btn-indicai { background: linear-gradient(135deg, #D5740F 0%, #FB972E 100%); color: white; border: none; padding: 10px 20px; font-size: 14px; box-shadow: 0 4px 14px rgba(251, 151, 46, 0.35); } .btn-indicai:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(251, 151, 46, 0.45); filter: brightness(1.05); } /* ========================================================= 2b. ACESSIBILIDADE — foco visível para navegação por teclado ========================================================= */ :focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; } .btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible, .btn-outline:focus-visible, .btn-indicai:focus-visible, .cases-filter-btn:focus-visible, .nav-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 151, 178, 0.45), 0 0 0 5px var(--coral); } :focus:not(:focus-visible) { outline: none; } /* ========================================================= 3. HEADER ========================================================= */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background 0.3s ease, border-color 0.3s ease; } .header.scrolled { background: rgba(8, 39, 100, 0.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom-color: rgba(255, 255, 255, 0.08); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; position: relative; } .logo { display: flex; align-items: center; flex-shrink: 0; } .logo img { height: 30px; width: auto; display: block; } /* Nav absolutamente centrado — não depende do tamanho de logo ou botões */ .nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; } .nav > a { position: relative; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.82); padding: 7px 12px; border-radius: 8px; transition: color 0.2s, background 0.2s; white-space: nowrap; } .nav > a:hover { color: white; background: rgba(255,255,255,0.08); } .nav-item-dropdown { position: relative; } .nav-trigger { position: relative; display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; font-family: var(--font-body); color: rgba(255, 255, 255, 0.82); background: none; border: none; cursor: pointer; padding: 7px 12px; border-radius: 8px; transition: color 0.2s, background 0.2s; } .nav-trigger:hover { color: white; background: rgba(255,255,255,0.08); } /* Indicador ativo — barra coral abaixo do item ativo/hover */ .nav > a::after, .nav-trigger::after { content: ''; position: absolute; bottom: 2px; left: 22%; right: 22%; height: 2px; background: var(--coral); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--ease-out-expo); pointer-events: none; } .nav > a:hover::after, .nav-item-dropdown:hover .nav-trigger::after, .nav-item-dropdown.is-open .nav-trigger::after { transform: scaleX(1); } .nav-item-dropdown:hover .nav-trigger, .nav-item-dropdown.is-open .nav-trigger { color: white; background: rgba(255, 255, 255, 0.10); } .nav-trigger-arrow { font-size: 13px; opacity: 0.75; transition: transform 0.22s var(--ease-out-expo); display: inline-block; line-height: 1; } .nav-item-dropdown:hover .nav-trigger-arrow { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(-8px); width: 560px; background: rgba(255, 255, 255, 0.98); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid var(--cinza-suave); border-radius: 16px; box-shadow: var(--shadow-xl); overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 0.22s, transform 0.22s var(--ease-out-expo), visibility 0.22s; } .nav-item-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dropdown-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 8px; } .dropdown-list li.span-2 { grid-column: span 2; } /* Variante compacta — dropdown com poucos itens (ex.: Sobre nós) */ .dropdown.dropdown-sm { width: 380px; } .dropdown.dropdown-sm .dropdown-list { grid-template-columns: 1fr; } .dropdown-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; text-decoration: none; border: 1px solid transparent; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; } .dropdown-item:hover { background: rgba(0, 151, 178, 0.08); border-color: rgba(0, 151, 178, 0.22); box-shadow: 0 1px 0 rgba(0, 151, 178, 0.08), 0 6px 14px -8px rgba(8, 39, 100, 0.18); } .dropdown-item-icon { width: 44px; height: 44px; flex-shrink: 0; background: var(--offwhite); border: 1px solid var(--cinza-suave); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--azul-profundo); box-shadow: 0 1px 2px rgba(8, 39, 100, 0.06); transition: background 0.2s, border-color 0.2s, color 0.2s; } .dropdown-item:hover .dropdown-item-icon { background: rgba(0, 151, 178, 0.15); border-color: rgba(0, 151, 178, 0.3); color: var(--coral); } .dropdown-item-text { display: flex; flex-direction: column; gap: 2px; } .dropdown-item-title { font-size: 13px; font-weight: 600; color: var(--azul-profundo); } .dropdown-item-desc { font-size: 11px; color: var(--texto-sec-escuro); line-height: 1.4; } .dropdown-item.is-featured { background: linear-gradient(135deg, rgba(0, 151, 178, 0.18) 0%, rgba(0, 151, 178, 0.08) 100%); border: 1px solid rgba(0, 151, 178, 0.45); box-shadow: inset 3px 0 0 var(--coral), 0 2px 10px rgba(0, 151, 178, 0.18); position: relative; transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s; } .dropdown-item.is-featured:hover { background: linear-gradient(135deg, rgba(0, 151, 178, 0.28) 0%, rgba(0, 151, 178, 0.14) 100%); border-color: rgba(0, 151, 178, 0.7); box-shadow: inset 3px 0 0 var(--coral), 0 6px 18px rgba(0, 151, 178, 0.3); transform: translateY(-1px); } .dropdown-item.is-featured .dropdown-item-icon { background: var(--coral); border-color: var(--coral); color: white; box-shadow: 0 2px 10px rgba(0, 151, 178, 0.45); } .dropdown-item.is-featured .dropdown-item-title { color: var(--azul-profundo); font-weight: 700; } .dropdown-item.is-featured--azul { background: linear-gradient(135deg, rgba(8, 86, 177, 0.14) 0%, rgba(8, 86, 177, 0.06) 100%); border-color: rgba(8, 86, 177, 0.45); box-shadow: inset 3px 0 0 var(--azul-medio), 0 2px 10px rgba(8, 86, 177, 0.16); } .dropdown-item.is-featured--azul:hover { background: linear-gradient(135deg, rgba(8, 86, 177, 0.24) 0%, rgba(8, 86, 177, 0.12) 100%); border-color: rgba(8, 86, 177, 0.7); box-shadow: inset 3px 0 0 var(--azul-medio), 0 6px 18px rgba(8, 86, 177, 0.28); } .dropdown-item.is-featured--azul .dropdown-item-icon { background: var(--azul-medio); border-color: var(--azul-medio); box-shadow: 0 2px 10px rgba(8, 86, 177, 0.4); } .dropdown-footer { border-top: 1px solid var(--cinza-suave); padding: 11px 18px; font-size: 12px; color: var(--texto-sec-escuro); } .dropdown-footer a { color: var(--coral-text); font-weight: 500; text-decoration: none; } .dropdown-footer a:hover { text-decoration: underline; } /* SVG chevron — substitui o ▾ textual */ .nav-trigger-icon { opacity: 0.7; transition: transform 0.22s var(--ease-out-expo), opacity 0.2s; flex-shrink: 0; margin-top: 1px; } .nav-trigger:hover .nav-trigger-icon { opacity: 1; } .nav-item-dropdown:hover .nav-trigger-icon, .nav-item-dropdown.is-open .nav-trigger-icon { transform: rotate(180deg); opacity: 1; } .nav-item-dropdown.is-open .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ========================================================= MEGA DROPDOWN — Soluções (split: categorias | painéis) ========================================================= */ /* Posiciona o mega relativo ao .nav (centrado na página), não ao trigger. Evita overflow lateral com 880px. */ .nav-item-dropdown--mega { position: static; } .nav-item-dropdown--mega .dropdown.dropdown--mega { width: 880px; padding: 0; } .dropdown-mega-grid { display: grid; grid-template-columns: 280px 1fr; min-height: 360px; } .mega-cats { padding: 18px 12px 22px; border-right: 1px solid var(--cinza-suave); background: linear-gradient(180deg, rgba(248, 252, 255, 0.55) 0%, rgba(230, 237, 246, 0.45) 100%); display: flex; flex-direction: column; gap: 2px; } .mega-cats-label { font-family: var(--font-display); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(74, 85, 104, 0.6); padding: 6px 14px 14px; } .mega-cat { display: grid; grid-template-columns: 3px 1fr; gap: 12px; align-items: stretch; padding: 10px 12px 10px 11px; border: none; background: transparent; border-radius: 10px; cursor: pointer; text-align: left; font-family: inherit; transition: background 0.2s; position: relative; } .mega-cat-rail { width: 3px; border-radius: 2px; background: transparent; transition: background 0.2s; align-self: stretch; min-height: 100%; } .mega-cat-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .mega-cat-name { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--azul-profundo); line-height: 1.25; letter-spacing: -0.005em; } .mega-cat-count { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--texto-sec-escuro); opacity: 0.78; } .mega-cat:hover { background: rgba(8, 39, 100, 0.035); } .dropdown--mega[data-active-cat="infra"] .mega-cat[data-cat="infra"], .dropdown--mega[data-active-cat="seguranca"] .mega-cat[data-cat="seguranca"], .dropdown--mega[data-active-cat="ia"] .mega-cat[data-cat="ia"] { background: rgba(8, 39, 100, 0.05); } .dropdown--mega[data-active-cat="infra"] .mega-cat[data-cat="infra"] .mega-cat-rail, .dropdown--mega[data-active-cat="seguranca"] .mega-cat[data-cat="seguranca"] .mega-cat-rail, .dropdown--mega[data-active-cat="ia"] .mega-cat[data-cat="ia"] .mega-cat-rail { background: var(--coral); } .mega-panels { padding: 14px 14px 18px; position: relative; } .mega-panel { display: none; } .dropdown--mega[data-active-cat="infra"] .mega-panel[data-cat="infra"], .dropdown--mega[data-active-cat="seguranca"] .mega-panel[data-cat="seguranca"], .dropdown--mega[data-active-cat="ia"] .mega-panel[data-cat="ia"] { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; animation: mega-panel-fade 220ms var(--ease-out-expo); } @keyframes mega-panel-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .mega-link { display: grid; grid-template-columns: 38px 1fr 14px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; transition: background 0.2s, border-color 0.2s; border: 1px solid transparent; min-width: 0; } .mega-link:hover { background: rgba(0, 151, 178, 0.08); border-color: rgba(0, 151, 178, 0.22); box-shadow: 0 1px 0 rgba(0, 151, 178, 0.08), 0 6px 14px -8px rgba(8, 39, 100, 0.18); } .mega-link-icon { width: 38px; height: 38px; background: var(--offwhite); border: 1px solid var(--cinza-suave); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--azul-profundo); transition: background 0.2s, border-color 0.2s, color 0.2s; } .mega-link:hover .mega-link-icon { background: rgba(0, 151, 178, 0.14); border-color: rgba(0, 151, 178, 0.32); color: var(--coral); } .mega-link-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mega-link-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--azul-profundo); letter-spacing: -0.005em; } .mega-link-desc { font-size: 11.5px; color: var(--texto-sec-escuro); line-height: 1.4; } .mega-link-arrow { font-family: var(--font-display); font-size: 18px; font-weight: 400; line-height: 1; color: rgba(8, 39, 100, 0.25); transition: color 0.22s var(--ease-out-expo), transform 0.22s var(--ease-out-expo); justify-self: end; } .mega-link:hover .mega-link-arrow { color: var(--coral-text); transform: translateX(3px); } .mega-link--featured { background: linear-gradient(135deg, rgba(0, 151, 178, 0.10) 0%, rgba(0, 151, 178, 0.04) 100%); border-color: rgba(0, 151, 178, 0.22); } .mega-link--featured:hover { background: linear-gradient(135deg, rgba(0, 151, 178, 0.18) 0%, rgba(0, 151, 178, 0.07) 100%); border-color: rgba(0, 151, 178, 0.42); } .mega-link--featured .mega-link-icon { background: var(--coral); border-color: var(--coral); color: white; box-shadow: 0 2px 8px rgba(0, 151, 178, 0.35); } .mega-link--featured:hover .mega-link-icon { background: var(--coral-hover); border-color: var(--coral-hover); color: white; } /* Footer da mega — animação sutil do "→" no link */ .dropdown--mega .dropdown-footer a { display: inline-flex; align-items: center; gap: 5px; transition: gap 0.22s var(--ease-out-expo), color 0.2s; } .dropdown--mega .dropdown-footer a:hover { gap: 9px; color: var(--coral-hover); text-decoration: none; } .header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .header-actions .btn-primary { padding: 8px 18px; font-size: 13px; } .header-actions .btn-outline { padding: 8px 18px; font-size: 13px; } .header-actions .btn-indicai { padding: 8px 18px; font-size: 13px; } .mobile-toggle { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 5px; align-items: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; cursor: pointer; transition: background 0.2s; } .mobile-toggle:hover { background: rgba(255,255,255,0.12); } .mobile-toggle span { width: 18px; height: 2px; background: white; border-radius: 2px; display: block; transition: all 0.3s; } .mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu-overlay { display: none; position: fixed; top: 80px; left: 0; right: 0; bottom: 0; z-index: 99; background: rgba(8, 39, 100, 0.97); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border-top: 1px solid rgba(255,255,255,0.08); overflow-y: auto; flex-direction: column; } .mobile-menu-overlay.open { display: flex; } .mobile-menu-inner { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; padding: 16px 20px 32px; gap: 16px; } .mobile-nav-section { display: flex; flex-direction: column; gap: 2px; } .mobile-nav-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(211, 255, 255, 0.35); padding: 4px 10px; margin-top: 16px; margin-bottom: 2px; } .mobile-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; text-decoration: none; transition: background 0.2s; } .mobile-nav-item:hover { background: rgba(255,255,255,0.07); } .mobile-nav-item--featured { background: linear-gradient(135deg, rgba(0, 151, 178, 0.16) 0%, rgba(0, 151, 178, 0.06) 100%); border: 1px solid rgba(0, 151, 178, 0.28); } .mobile-nav-item--featured:hover { background: linear-gradient(135deg, rgba(0, 151, 178, 0.22) 0%, rgba(0, 151, 178, 0.08) 100%); border-color: rgba(0, 151, 178, 0.45); } .mobile-nav-item .dropdown-item-title { color: white; } .mobile-nav-item .dropdown-item-desc { color: rgba(196, 233, 255, 0.7); } .mobile-nav-item .dropdown-item-icon { width: 38px; height: 38px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: white; } .mobile-nav-item .dropdown-item-icon--teal { background: rgba(0, 151, 178, 0.18); border-color: rgba(0, 151, 178, 0.32); color: var(--coral); } .mobile-menu-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); } .mobile-menu-actions .btn { width: 100%; justify-content: center; } /* ========================================================= 4. HERO ========================================================= */ .hero { position: relative; padding: 140px 0 100px; background: radial-gradient(circle at 85% 30%, rgba(0, 151, 178, 0.12) 0%, transparent 50%), radial-gradient(circle at 10% 80%, rgba(8, 86, 177, 0.15) 0%, transparent 50%), var(--azul-profundo); overflow: hidden; } /* Padrão de grade sutil no fundo */ .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); pointer-events: none; } /* Texto gigante "ACCERTE" decorativo (estilo Payrot) */ .hero-watermark { position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 800; font-size: clamp(120px, 22vw, 320px); letter-spacing: -0.05em; color: rgba(255, 255, 255, 0.025); pointer-events: none; white-space: nowrap; line-height: 1; -webkit-user-select: none; user-select: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; z-index: 2; } .hero-text { max-width: 580px; } .hero-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.02em; color: white; margin-bottom: 28px; text-wrap: balance; } /* Destaque visual em "confiança" — sublinhado coral animado */ .hero-highlight { position: relative; display: inline-block; color: white; } .hero-highlight::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 8px; background: var(--coral); opacity: 0.85; z-index: -1; transform: scaleX(0); transform-origin: left; animation: underline-grow 1.2s 0.8s var(--ease-out-expo) forwards; } @keyframes underline-grow { to { transform: scaleX(1); } } .hero-subtitle { font-size: 17px; line-height: 1.6; color: var(--texto-sec-claro); margin-bottom: 40px; } .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; } .hero-proof { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .proof-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto-sec-claro); } .proof-item svg { flex-shrink: 0; color: var(--coral); } .proof-item strong { color: white; font-weight: 600; } /* ----- Hero visual: card central com badges flutuantes (estilo Aliança) ----- */ .hero-visual { position: relative; height: 540px; display: flex; align-items: center; justify-content: center; } .hero-card { position: relative; width: 100%; max-width: 480px; background: linear-gradient(135deg, #0856B1 0%, #082764 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 28px; box-shadow: var(--shadow-xl); animation: float-card 6s ease-in-out infinite; z-index: 0; } @keyframes float-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .card-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: white; } .card-live { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: #4ADE80; text-transform: uppercase; } .live-dot { width: 8px; height: 8px; background: #4ADE80; border-radius: 50%; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); animation: pulse-dot 2s infinite; } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); } 70% { box-shadow: 0 0 0 12px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } /* Gráfico SVG dentro do card */ .card-chart { width: 100%; height: 90px; margin-bottom: 20px; } .chart-line { fill: none; stroke: url(#grad-line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw-line 2.5s 0.5s var(--ease-out-expo) forwards; } .chart-area { fill: url(#grad-area); opacity: 0; animation: fade-in-area 1s 2s forwards; } @keyframes draw-line { to { stroke-dashoffset: 0; } } @keyframes fade-in-area { to { opacity: 1; } } /* Lista de status */ .card-status-list { display: flex; flex-direction: column; gap: 12px; } .status-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: rgba(255, 255, 255, 0.04); border-radius: 8px; font-size: 13px; transition: background 0.2s; } .status-row:hover { background: rgba(255, 255, 255, 0.07); } .status-label { display: flex; align-items: center; gap: 10px; color: var(--texto-sec-claro); } .status-dot { width: 8px; height: 8px; border-radius: 50%; } .status-dot.green { background: #4ADE80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.5); } .status-dot.amber { background: #FBBF24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); } .status-value { color: white; font-weight: 500; font-family: var(--font-display); } .card-footer { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--texto-sec-claro); } .refresh-icon { animation: rotate 4s linear infinite; } @keyframes rotate { to { transform: rotate(360deg); } } /* Badges flutuantes (estilo Aliança Construtora) */ .floating-badge { position: absolute; display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(8, 39, 100, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 100px; font-family: var(--font-display); font-size: 13px; font-weight: 500; color: white; box-shadow: var(--shadow-md); white-space: nowrap; z-index: 1; } .floating-badge svg { width: 16px; height: 16px; color: var(--coral); } .badge-1 { top: 16px; left: -90px; animation: float-badge-1 5s ease-in-out infinite; } .badge-2 { top: 42%; right: -90px; animation: float-badge-2 6s ease-in-out infinite; } .badge-3 { bottom: 40%; left: -90px; animation: float-badge-3 5.5s ease-in-out infinite; } .badge-4 { bottom: 16px; right: -90px; animation: float-badge-4 6.5s ease-in-out infinite; } @keyframes float-badge-1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes float-badge-2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes float-badge-3 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes float-badge-4 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Blob orgânico decorativo */ .hero-blob { position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, var(--coral) 0%, transparent 70%); opacity: 0.12; filter: blur(60px); top: 50%; right: -100px; transform: translateY(-50%); pointer-events: none; } /* ========================================================= 10. FOOTER (base — visível no fim do scroll mobile) ========================================================= */ .footer { background: radial-gradient(35% 128px at 50% 100%, rgba(255, 255, 255, 0.08), transparent), var(--azul-deep); color: white; padding: 80px 0 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0; position: relative; } /* Linha de brilho decorativa na base */ .footer::before { content: ""; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); width: 33%; height: 1px; background: rgba(255, 255, 255, 0.25); border-radius: 9999px; filter: blur(4px); pointer-events: none; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; margin-bottom: 64px; } .footer-col-title { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-sec-claro); margin-bottom: 20px; } .footer-tagline { font-size: 14px; color: var(--texto-sec-claro); margin: 16px 0 24px; max-width: 280px; line-height: 1.6; } .footer-social { display: flex; gap: 12px; } .social-link { width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; color: var(--texto-sec-claro); transition: all 0.2s; } .social-link:hover { background: var(--coral); color: white; border-color: var(--coral); transform: translateY(-2px); } .footer-list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .footer-list a { position: relative; display: inline-flex; align-items: center; padding-left: 14px; font-size: 14px; color: var(--texto-sec-claro); transition: color 0.2s ease, transform 0.2s ease; } .footer-list a::before { content: "›"; position: absolute; left: 0; color: var(--branco-puro); font-weight: 700; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s ease, transform 0.2s ease; } .footer-list a:hover { color: var(--branco-puro); transform: translateX(6px); } .footer-list a:hover::before { opacity: 1; transform: translateX(0); } .footer-contact { font-size: 14px; color: var(--texto-sec-claro); line-height: 1.8; } .footer-contact a:hover { color: var(--branco-puro); } .footer-bottom { padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--texto-sec-claro); } .footer-bottom-links { display: flex; gap: 24px; } .footer-bottom-links a:hover { color: var(--branco-puro); } /* ========================================================= HERO — animações de entrada (acima da dobra) ========================================================= */ @keyframes hero-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-fade-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes hero-card-in { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: translateX(0); } } @keyframes hero-badge-in { from { opacity: 0; } to { opacity: 1; } } .hero-text .eyebrow { animation: hero-fade-down 0.5s var(--ease-out-expo) both; } .hero-text .hero-h1 { animation: hero-fade-up 0.65s 0.1s var(--ease-out-expo) both; } .hero-text .hero-subtitle { animation: hero-fade-up 0.6s 0.25s var(--ease-out-expo) both; } .hero-text .hero-ctas { animation: hero-fade-up 0.55s 0.4s var(--ease-out-expo) both; } .hero-text .hero-proof { animation: hero-fade-up 0.5s 0.55s var(--ease-out-expo) both; } .hero-card { animation: hero-card-in 0.7s 0.2s var(--ease-out-expo) both, float-card 6s 0.9s ease-in-out infinite; } .badge-1 { animation: hero-badge-in 0.4s 0.45s both, float-badge-1 5s 0.9s ease-in-out infinite; } .badge-2 { animation: hero-badge-in 0.4s 0.55s both, float-badge-2 6s 1.0s ease-in-out infinite; } .badge-3 { animation: hero-badge-in 0.4s 0.65s both, float-badge-3 5.5s 1.1s ease-in-out infinite; } .badge-4 { animation: hero-badge-in 0.4s 0.75s both, float-badge-4 6.5s 1.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .hero-text .eyebrow, .hero-text .hero-h1, .hero-text .hero-subtitle, .hero-text .hero-ctas, .hero-text .hero-proof { animation: none; opacity: 1; transform: none; } .hero-card { animation: float-card 6s ease-in-out infinite; } .badge-1 { animation: float-badge-1 5s ease-in-out infinite; } .badge-2 { animation: float-badge-2 6s ease-in-out infinite; } .badge-3 { animation: float-badge-3 5.5s ease-in-out infinite; } .badge-4 { animation: float-badge-4 6.5s ease-in-out infinite; } } /* ========================================================= RESPONSIVIDADE (elementos acima da dobra) ========================================================= */ @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; gap: 80px; } .hero-visual { height: 480px; } .nav { display: none; } .mobile-toggle { display: flex; } } @media (max-width: 640px) { /* Previne overflow horizontal em todo o site */ html, body { overflow-x: hidden; max-width: 100vw; } .container { padding: 0 20px; } /* Hero */ .hero { padding: 100px 0 60px; overflow: hidden; } .hero-h1 { font-size: clamp(26px, 7vw, 34px); } .hero-highlight::after { height: 4px; bottom: 2px; } .hero-subtitle { font-size: 14px; } .hero-ctas { flex-direction: column; align-items: stretch; } .hero-ctas .btn { justify-content: center; } .hero-proof { gap: 12px; } .hero-visual { overflow: hidden; } /* Footer */ .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer { border-radius: 0; } /* Header */ .header-actions .btn-outline { display: none; } .header-actions .btn-indicai { display: none; } /* Hero visual em mobile: reorganiza badges em duas linhas (acima e abaixo do card) em vez de absolutas sobre ele. Resolve corte do título "Painel Accerte SOC" pelos badges "Banco de Dados" e "MultiCloud", e do footer pelos badges "SOC Shield" e "IA". */ .hero-visual { height: auto; overflow: visible; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; justify-content: center; } .floating-badge { position: static; inset: auto; width: calc(50% - 4px); max-width: none; font-size: 11px; padding: 8px 10px; justify-content: center; animation: none !important; transform: none !important; } .badge-1, .badge-2 { order: 1; } .hero-card { order: 2; width: 100%; max-width: 100%; animation: none !important; transform: none !important; } .badge-3, .badge-4 { order: 3; } } /* ========================================================= HERO DA HOME — regras estruturais (anti-CLS) Movidas de home.css pra evitar layout shift quando home.css (deferido) finalmente aplica position:absolute na imagem. So estrutura — cores, gradients e fonts ficam em home.css. ========================================================= */ .hm-hero { position: relative; overflow: hidden; padding: 130px 0 90px; background: #051536; } .hm-hero-bg { position: absolute; inset: 0; z-index: 0; display: block; } .hm-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; } .hm-hero-overlay, .hm-hero-grid-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hm-hero-inner { position: relative; z-index: 2; }