/* ========================================================================== CONVERGAS FUEL SYSTEMS — Design System HTML/CSS/JS vanilla. Dark premium. Future Mobility Engineering. ========================================================================== */ /* ---------- Tokens ---------- */ :root { /* Cores (briefing) */ --bg: #07111F; --bg-2: #0D1B2A; --bg-3: #102438; --blue-tech: #1B4D8C; --blue-future: #3FA9F5; --accent: #5CE1E6; --text: #FFFFFF; --text-2: #C2CCD9; /* clareado vs. #A8B2C1 para passar AA sobre #07111F */ --text-3: #8A97A8; --line: rgba(255,255,255,.08); --line-strong: rgba(92,225,230,.28); /* fundos translúcidos p/ o campo de partículas aparecer através das seções */ --section-alt-bg: rgba(13,27,42,.5); --footer-bg: rgba(13,27,42,.62); /* Gradientes / brilhos */ --grad-accent: linear-gradient(135deg, var(--blue-future), var(--accent)); --grad-deep: linear-gradient(160deg, var(--bg-2), var(--bg)); --glow-accent: 0 0 0 1px rgba(92,225,230,.35), 0 8px 40px rgba(63,169,245,.25); /* Tipografia */ --font-head: "Barlow Condensed", "Arial Narrow", sans-serif; --font-body: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* Escala de espaçamento */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* Raios / sombras / containers */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px; --shadow-card: 0 18px 50px -20px rgba(0,0,0,.7); --maxw: 1240px; --header-h: 76px; --ease: cubic-bezier(.22,.61,.36,1); --t-fast: .25s var(--ease); --t-med: .45s var(--ease); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; } body { font-family: var(--font-body); background: var(--bg); color: var(--text-2); line-height: 1.65; font-size: 1.0625rem; overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Campo de partículas global — fixo, atrás de todo o conteúdo */ #bg-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; transition: opacity .5s var(--ease); } /* durante a troca de aba, o campo some em fade (fica calmo atrás do vidro fosco) */ html.navigating #bg-field { opacity: 0; } /* Marca d'água fixa e estática — ícone da chama Convergas, grande e centralizado, ATRÁS das partículas animadas */ body::before { content: ""; position: fixed; z-index: -2; pointer-events: none; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(82vmin, 900px); aspect-ratio: 1; background: url(../../imagens/logo-icone.png) no-repeat center / contain; opacity: .08; } [data-theme="light"] body::before { opacity: .1; } /* Transição de página (slide) entre as abas .html — só o conteúdo desliza, o fundo de partículas fica fixo */ main.page-enter { animation: page-in .5s var(--ease) both; } main.page-leave { animation: page-out .38s var(--ease) both; } @keyframes page-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes page-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-64px); } } @media (prefers-reduced-motion: reduce) { main.page-enter, main.page-leave { animation: none !important; } } /* ========================================================================== TELA DE CARREGAMENTO (só na troca de aba) — caminhão SVG line-art Visível apenas quando está presente. ========================================================================== */ .loader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; /* fundo opaco em gradiente: cortina premium e SEM backdrop-filter (que travava na entrada) */ background: radial-gradient(135% 105% at 50% 34%, #0c2237 0%, #08131f 52%, #04090f 100%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s var(--ease), visibility .45s var(--ease); will-change: opacity; } [data-theme="light"] .loader { background: radial-gradient(135% 105% at 50% 34%, #ffffff 0%, #eef3f9 55%, #dae3ef 100%); } html.navigating .loader { opacity: 1; visibility: visible; pointer-events: auto; } .loader-scene { display: flex; flex-direction: column; align-items: center; gap: 22px; } .loader-label { font-family: var(--font-body); font-weight: 600; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: #5CE1E6; opacity: .85; } [data-theme="light"] .loader-label { color: #14708C; } html.navigating .loader-label { animation: ldr-pulse 1.6s ease-in-out infinite; } @keyframes ldr-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } .gauge-svg { width: clamp(118px, 22vw, 168px); height: auto; overflow: visible; color: #fff; filter: drop-shadow(0 8px 22px rgba(0,0,0,.4)); } [data-theme="light"] .gauge-svg { color: #0B1B2E; filter: drop-shadow(0 8px 22px rgba(0,0,0,.18)); } /* sem fade de entrada no mostrador: evita a "piscada" (base opaca x início da animação). A própria varredura do ponteiro + o arco preenchendo já são a entrada. */ .gauge-needle { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(-120deg); /* repousa no zero da escala */ will-change: transform; /* promove à GPU: ponteiro flui mesmo com a thread ocupada carregando */ filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); } /* arco de pressão: trilho colorido que preenche junto com o ponteiro (240° @ r=68 ≈ 284.84) */ .gauge-arc { stroke-dasharray: 284.84; stroke-dashoffset: 284.84; filter: drop-shadow(0 0 4px rgba(92,225,230,.55)); } /* animam SÓ na CHEGADA (nav-arriving), nunca na página de saída — evita a varredura começar, a navegação cortar e reiniciar do zero no destino */ html.nav-arriving .gauge-needle { animation: gauge-sweep 2s cubic-bezier(.45, .05, .2, 1) both; } html.nav-arriving .gauge-arc { animation: gauge-fill 2s cubic-bezier(.45, .05, .2, 1) both; } @keyframes gauge-sweep { from { transform: rotate(-120deg); } to { transform: rotate(120deg); } } @keyframes gauge-fill { from { stroke-dashoffset: 284.84; } to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .gauge-needle { animation: none !important; transform: rotate(120deg); } .gauge-arc { animation: none !important; stroke-dashoffset: 0; } html.navigating .loader-label { animation: none !important; } } /* ===== Tela de boas-vindas (entrada no site): logo + Bem-vindo, ~2s, dark puro ===== */ .intro-loader { position: fixed; inset: 0; z-index: 9999; background: #06090e; display: grid; place-items: center; animation: intro-out .6s var(--ease) 2s forwards; } html.no-intro .intro-loader { display: none; } .intro-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; animation: intro-in .9s var(--ease) both; } .intro-logo { width: 82px; height: auto; } .intro-brand { font-family: var(--font-body); font-weight: 700; font-size: 1.7rem; color: #fff; letter-spacing: -.01em; line-height: 1; } .intro-welcome { display: inline-grid; place-items: center; font-family: var(--font-body); font-weight: 600; font-size: .82rem; letter-spacing: .26em; text-transform: uppercase; color: #5CE1E6; } .intro-welcome .iw-word { grid-area: 1 / 1; will-change: opacity, transform, filter; } .iw-pt { animation: iw-leave .55s var(--ease) .95s both; } .iw-en { opacity: 0; animation: iw-enter .55s var(--ease) 1.25s forwards; } @keyframes iw-leave { 0% { opacity: 1; transform: none; filter: blur(0); } 100% { opacity: 0; transform: translateY(-.6em); filter: blur(3px); } } @keyframes iw-enter { 0% { opacity: 0; transform: translateY(.6em); filter: blur(3px); } 100% { opacity: 1; transform: none; filter: blur(0); } } @keyframes intro-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes intro-out { to { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .iw-pt { display: none; } .iw-en { opacity: 1; animation: none; } } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } ul { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ---------- Tipografia ---------- */ h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; color: var(--text); line-height: 1.05; letter-spacing: .5px; text-transform: none; } h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); } h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); } h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); } p { max-width: 65ch; } .eyebrow { font-family: var(--font-body); font-weight: 600; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: .6rem; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); display: inline-block; } .lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-2); } .text-grad { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- Layout ---------- */ .container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; } .section { padding: clamp(var(--sp-20), 12vh, var(--sp-32)) 0; position: relative; } .section--alt { background: var(--section-alt-bg); } .section-head { max-width: 720px; margin-bottom: var(--sp-12); } .section-head h2 { margin: var(--sp-3) 0 var(--sp-4); } .grid { display: grid; gap: var(--sp-6); } /* Linhas técnicas / grid de fundo discreto */ /* (fundo quadriculado removido a pedido) */ /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.5rem; border-radius: var(--r-pill); font-weight: 600; font-size: .98rem; letter-spacing: .01em; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); will-change: transform; } .btn svg { width: 18px; height: 18px; } .btn--primary { background: var(--grad-accent); color: #04121d; box-shadow: 0 8px 30px -8px rgba(63,169,245,.6); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 44px -10px rgba(92,225,230,.7); } .btn--ghost { color: var(--text); border: 1px solid var(--line-strong); } .btn--ghost:hover { background: rgba(92,225,230,.08); transform: translateY(-2px); box-shadow: var(--glow-accent); } .btn--block { width: 100%; justify-content: center; } /* Link com underline animado */ .link-anim { position: relative; color: var(--text); font-weight: 600; } .link-anim::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%; background: var(--grad-accent); transform: scaleX(0); transform-origin: right; transition: transform var(--t-fast); } .link-anim:hover::after { transform: scaleX(1); transform-origin: left; } /* ---------- Cards ---------- */ @property --angle { syntax: ""; initial-value: 0deg; inherits: false; } .card { position: relative; isolation: isolate; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-8); overflow: hidden; transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med); } /* anel de gradiente girando — surge no hover */ .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 1; background: conic-gradient(from var(--angle), transparent 8%, var(--blue-future) 22%, var(--accent) 33%, transparent 50%, transparent 58%, var(--accent) 72%, var(--blue-future) 83%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity var(--t-med); pointer-events: none; } .card:hover::before { opacity: 1; } /* brilho que segue o cursor */ .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(92,225,230,.12), transparent 60%); opacity: 0; transition: opacity var(--t-med); pointer-events: none; } .card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow-card); } .card:hover::after { opacity: 1; } /* conteúdo acima dos pseudo-elementos */ .card > * { position: relative; z-index: 2; } .card .ico { position: relative; overflow: hidden; width: 56px; height: 56px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: var(--sp-4); background: rgba(63,169,245,.12); color: var(--accent); border: 1px solid var(--line-strong); transition: transform var(--t-med), background var(--t-med), color var(--t-med), border-color var(--t-med), box-shadow var(--t-med); } .card .ico svg { width: 26px; height: 26px; transition: transform var(--t-med); } /* faixa de luz que cruza o ícone no hover */ .card .ico::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg); pointer-events: none; } .card:hover .ico { background: var(--grad-accent); color: #04121d; border-color: transparent; box-shadow: 0 10px 26px -10px rgba(63,169,245,.7); transform: translateY(-3px) rotate(-5deg); } .card:hover .ico svg { transform: scale(1.1); } .card h3 { margin-bottom: var(--sp-2); transition: color var(--t-med); } .card:hover h3 { color: var(--accent); } .card p { color: var(--text-2); font-size: .98rem; } @media (prefers-reduced-motion: no-preference) { .card:hover::before { animation: card-spin 4s linear infinite; } .card:hover .ico::after { animation: ico-shine .7s var(--ease); } /* pop do ícone quando o card entra na viewport */ [data-stagger].in .card .ico { animation: ico-pop .6s var(--ease); } } @keyframes card-spin { to { --angle: 360deg; } } @keyframes ico-shine { from { left: -130%; } to { left: 150%; } } @keyframes ico-pop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .35rem .7rem; border-radius: var(--r-pill); background: rgba(92,225,230,.12); color: var(--accent); border: 1px solid var(--line-strong); } .badge--dev { background: rgba(255,176,32,.12); color: #FFB020; border-color: rgba(255,176,32,.3); } /* ========================================================================== HEADER ========================================================================== */ /* Header "suspenso": barra flutuante (ilha de vidro) com pontas arredondadas */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding-top: 14px; pointer-events: none; } .site-header .container { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); height: 60px; padding: 0 .5rem 0 1.25rem; background: rgba(13,27,42,.5); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: 0 14px 40px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04); transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); } .site-header.scrolled .container { background: rgba(7,17,31,.8); border-color: var(--line-strong); box-shadow: 0 18px 50px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05); } .brand { display: flex; align-items: center; gap: .6rem; color: var(--text); } .brand .mark { width: 40px; height: 40px; object-fit: contain; flex: none; } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-name { font-family: var(--font-body); font-weight: 700; font-size: 1.34rem; letter-spacing: -.01em; color: var(--text); } .brand-tag { font-family: var(--font-body); font-weight: 600; font-size: .5rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); margin-top: 3px; } .nav { display: flex; align-items: center; gap: var(--sp-8); } .nav a { color: var(--text-2); font-size: .95rem; font-weight: 500; transition: color var(--t-fast); } .nav a:hover { color: var(--text); } .header-actions { display: flex; align-items: center; gap: var(--sp-3); } /* CTAs do header mais enxutos que os do conteúdo (hero) */ .header-actions .btn { padding: .56rem 1.1rem; font-size: .9rem; } /* "Entrar": ação secundária discreta (link com leve realce no hover) */ .header-actions .btn--login { color: var(--text-2); border-color: transparent; padding: .56rem .85rem; box-shadow: none; } .btn--login svg { width: 16px; height: 16px; opacity: .8; } .header-actions .btn--login:hover { color: var(--text); background: rgba(255,255,255,.06); border-color: var(--line); box-shadow: none; transform: none; } /* "Fale com um Especialista": primário, porém refinado (sem brilho neon) */ .header-actions .btn--primary { box-shadow: 0 4px 14px -8px rgba(63,169,245,.5); } .header-actions .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -10px rgba(63,169,245,.55); } /* Toggle de idioma */ .lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; } .lang-toggle button { padding: .35rem .7rem; font-size: .78rem; font-weight: 700; color: var(--text-3); letter-spacing: .05em; } .lang-toggle button[aria-pressed="true"] { background: var(--grad-accent); color: #04121d; } /* Toggle de tema (light/dark) */ .theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--text-2); transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); } .theme-toggle:hover { color: var(--accent); border-color: var(--line-strong); transform: translateY(-2px); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .ico-moon { display: none; } .theme-toggle .ico-sun { display: block; } [data-theme="light"] .theme-toggle .ico-moon { display: block; } [data-theme="light"] .theme-toggle .ico-sun { display: none; } /* Barra de progresso de scroll */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 101; background: var(--grad-accent); } /* Menu mobile */ .nav-toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 22px; height: 2px; background: var(--text); position: relative; transition: var(--t-fast); } .nav-toggle span { margin: 0 auto; } .nav-toggle span::before { position: absolute; top: -7px; } .nav-toggle span::after { position: absolute; top: 7px; } body.nav-open .nav-toggle span { background: transparent; } body.nav-open .nav-toggle span::before { transform: rotate(45deg); top: 0; } body.nav-open .nav-toggle span::after { transform: rotate(-45deg); top: 0; } /* ========================================================================== HERO ========================================================================== */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-start; overflow: hidden; } .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(48% 55% at 14% 38%, rgba(27,77,140,.28), transparent 62%), linear-gradient(90deg, var(--bg) 30%, rgba(7,17,31,.5) 60%, rgba(7,17,31,.2) 100%); } .hero .container { position: relative; z-index: 2; padding-top: var(--header-h); } .hero-grid { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: var(--sp-12); } .hero h1 { margin: var(--sp-4) 0 var(--sp-6); } .hero-sub { max-width: 52ch; margin: 0 0 var(--sp-5); color: var(--text-2); font-size: clamp(1rem, 1.45vw, 1.18rem); line-height: 1.55; } .hero-static .hero-copy h1 { margin-bottom: var(--sp-3); } .hero-video-info .hero-sub { text-shadow: 0 2px 18px rgba(0,0,0,.55); } .hero .lead { margin-bottom: var(--sp-8); max-width: 48ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-12); } .hero-badges { display: flex; flex-wrap: nowrap; gap: 1.1rem; } .hero-badges li { display: flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--text-2); white-space: nowrap; } .hero-badges svg { width: 16px; height: 16px; color: var(--accent); flex: none; } @media (max-width: 620px) { .hero-badges { flex-wrap: wrap; gap: .7rem 1.1rem; } } /* Caminhão tecnológico — card invisível para não cortar os efeitos/glow ao redor */ .hero-visual { position: relative; display: flex; align-items: center; justify-content: center; } .hero-visual::before { content: ""; position: absolute; inset: -8% -6%; z-index: 0; pointer-events: none; background: radial-gradient(50% 50% at 56% 46%, rgba(63,169,245,.22), transparent 70%); filter: blur(8px); animation: hero-glow 6s ease-in-out infinite; } .hero-truck { position: relative; z-index: 1; width: auto; max-width: 112%; height: clamp(420px, 92svh, 1000px); object-fit: contain; margin-inline: auto; transform: scale(1.3); transform-origin: center; /* zoom +30% (a foto tem muito espaço transparente em volta) */ filter: drop-shadow(0 26px 44px rgba(0,0,0,.45)); animation: hero-float 5.5s ease-in-out infinite; } @keyframes hero-float { 0%, 100% { transform: translateY(0) scale(1.3); } 50% { transform: translateY(-12px) scale(1.3); } } @keyframes hero-glow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hero-truck, .hero-visual::before { animation: none; } } /* Entrada do hero mais presente ("site se formando"): texto vem da esquerda, caminhão vem da direita — distância maior e duração mais longa que o reveal padrão */ .hero .hero-copy[data-reveal="left"] { transform: translateX(-82px); transition-duration: 1s; } .hero .hero-visual[data-reveal="right"] { transform: translateX(120px) scale(.94); transition-duration: 1.15s; transition-delay: .12s; } .hero .hero-copy.in, .hero .hero-visual.in { transform: none; } /* ===== Hero em vídeo (desktop = paisagem, mobile = retrato) ===== */ .hero-video { display: none; } .hero-static { display: block; } .hero.has-video .hero-video { display: grid; } .hero.has-video .hero-static { display: none; } .hero.has-video::after { display: none; } /* o véu navy era só do hero estático */ .hero-video { position: relative; place-items: center; width: 100%; min-height: 100svh; background: #06090e; } .hero-video-stage { position: relative; width: 100%; height: 100svh; overflow: hidden; } .hero-video-el { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .hv-desktop, .hv-mobile { display: none; } .hero-video-info { position: absolute; z-index: 2; display: flex; flex-direction: column; } /* CTAs do hero em vídeo: grupo posicionado via JS p/ o azul cobrir a marca d'água. Entrada própria. */ .hero-video .hero-cta { position: absolute; z-index: 4; right: 4%; bottom: 12%; /* fallback; JS reposiciona sobre a marca */ display: flex; flex-direction: row-reverse; gap: var(--sp-3); margin: 0; opacity: 0; transform: translateY(24px); filter: blur(7px); transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); } .hero-video .hero-cta .btn { white-space: nowrap; } .hero-video.revealed .hero-cta { opacity: 1; transform: none; filter: none; transition-delay: .5s; } /* entrada cinematográfica da copy (desfoque + sobe, escalonado) */ .hero-video-info > * { opacity: 0; transform: translateY(24px); filter: blur(7px); transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease); } .hero-video.revealed .hero-video-info > * { opacity: 1; transform: none; filter: none; } .hero-video.revealed .hero-video-info > *:nth-child(1) { transition-delay: .05s; } .hero-video.revealed .hero-video-info > *:nth-child(2) { transition-delay: .20s; } .hero-video.revealed .hero-video-info > *:nth-child(3) { transition-delay: .35s; } .hero-video.revealed .hero-video-info > *:nth-child(4) { transition-delay: .50s; } /* glow de transição no rodapé do vídeo p/ a seção de baixo (premium) */ .hero-video::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32svh; max-height: 300px; z-index: 3; pointer-events: none; background: radial-gradient(60% 90% at 50% 122%, rgba(63,169,245,.34), transparent 68%), radial-gradient(120% 70% at 50% 100%, rgba(92,225,230,.10), transparent 72%), linear-gradient(to bottom, transparent 24%, rgba(6,9,14,.65) 72%, #06090e 100%); } /* Light mode: copy/botões iguais ao dark (vídeo é escuro) — sem tocar na navbar */ [data-theme="light"] .hero-video { --text: #FFFFFF; --text-2: #C2CCD9; --text-3: #8A97A8; --line: rgba(255,255,255,.08); --line-strong: rgba(92,225,230,.28); --accent: #5CE1E6; --blue-future: #3FA9F5; } [data-theme="light"] .hero-video .btn--primary { color: #04121d; } /* Botão "Portfólio" — disfarça a marca d'água; posição via JS (segue o recorte cover) */ .hero-portfolio-btn { position: absolute; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-width: 200px; padding: .85rem 1.5rem; border-radius: var(--r-pill); background: rgba(9, 14, 22, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line-strong); color: #fff; font-weight: 600; font-size: .92rem; letter-spacing: .01em; box-shadow: 0 12px 32px -12px rgba(0,0,0,.75); opacity: 0; transform: translate(-50%, calc(-50% + 12px)); transition: opacity .7s var(--ease), transform .7s var(--ease), background var(--t-fast), border-color var(--t-fast); } .hero-video.revealed .hero-portfolio-btn { opacity: 1; transform: translate(-50%, -50%); transition-delay: .55s; } .hero-video.revealed .hero-portfolio-btn:hover { transform: translate(-50%, calc(-50% - 2px)); background: rgba(13,20,30,.92); border-color: var(--accent); } .hero-portfolio-btn svg { width: 18px; height: 18px; color: var(--accent); flex: none; } .hero-portfolio-btn .arr { width: 16px; height: 16px; color: #fff; transition: transform var(--t-fast); } .hero-portfolio-btn:hover .arr { transform: translateX(3px); } /* ---- Desktop (paisagem): vídeo desktop + texto no canto superior esquerdo (pose nova) ---- */ @media (min-width: 1025px) { .hv-desktop { display: block; } /* glow removido no desktop em ambos os temas (a "transição" ficava ruim) */ .hero-video::after { display: none; } .hero-video-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, rgba(6,9,14,.86) 0%, rgba(6,9,14,.46) 30%, transparent 56%); } .hero-video-info { left: 6%; top: 15%; width: 42%; } .hero-video-info h1 { margin: var(--sp-4) 0 0; } /* CTAs MAIORES (posição exata via JS → o azul cobre a marca d'água em qualquer recorte) */ .hero-video .hero-cta { gap: var(--sp-4); } .hero-video .hero-cta .btn { padding: 1.15rem 1.7rem; font-size: 1.02rem; } } /* ---- Mobile (retrato): vídeo mobile + texto no topo, CTAs em coluna ---- */ @media (max-width: 1024px) { /* altura fixa (svh) p/ o vídeo NÃO redimensionar durante o scroll (evita a marca d'água deslocar) */ .hero.has-video, .hero.has-video .hero-video { min-height: 100svh; } .hero-video-stage { height: 100svh; } .hv-mobile { display: block; } .hero-video-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(6,9,14,.9) 0%, rgba(6,9,14,.48) 34%, transparent 58%); } /* fade discreto no rodapé (sem banda escura sobre o caminhão) */ .hero-video::after { height: 14svh; background: linear-gradient(to bottom, transparent, #06090e 96%); } .hero-video-info { left: var(--sp-6); right: var(--sp-6); top: calc(var(--header-h) + var(--sp-6)); align-items: flex-start; text-align: left; } .hero-video-info .eyebrow { justify-content: flex-start; } .hero-video-info h1 { font-size: clamp(2.1rem, 8.5vw, 2.7rem); line-height: 1.06; margin: var(--sp-3) 0 0; } /* CTAs lado a lado, menores, em UMA linha (nowrap). row-reverse → azul (Especialista) à direita. Posição exata via JS para o azul cobrir a marca d'água. */ .hero-video .hero-cta { gap: var(--sp-2); } .hero-video .hero-cta .btn { padding: .72rem 1rem; font-size: .8rem; letter-spacing: 0; } } /* ========================================================================== ESTATÍSTICAS / COUNTERS ========================================================================== */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); margin-top: var(--sp-12); } .stat { padding: var(--sp-6); border-left: 2px solid var(--line-strong); } .stat .num { font-family: var(--font-head); font-size: clamp(2.6rem, 5vw, 3.6rem); color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .stat .num .text-grad { font: inherit; } .stat .lbl { color: var(--text-2); font-size: .92rem; margin-top: .35rem; } .stat-more { color: var(--accent); font-weight: 600; font-size: .92rem; } /* Logo 3D girando (model-viewer) acima dos stats — sem loading, sem interação */ .about-right { display: flex; flex-direction: column; } #sobre .about-grid { align-items: start; } .logo3d { width: 100%; height: clamp(200px, 28vh, 320px); margin-bottom: var(--sp-6); } .logo3d model-viewer { width: 100%; height: 100%; background: transparent; --poster-color: transparent; pointer-events: none; } .logo3d model-viewer::part(default-progress-bar) { display: none; } /* desktop maior; mobile vai pro topo (acima do título) */ .logo3d--desktop { height: clamp(300px, 36vh, 460px); } .logo3d--mobile { display: none; } @media (max-width: 1024px) { .logo3d--desktop { display: none; } .logo3d--mobile { display: block; height: clamp(210px, 48vw, 300px); max-width: 380px; margin: 0 auto var(--sp-6); } } /* Sobre layout */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; } /* Stats: variante 4 colunas + número curto (texto) */ .stats--4 { grid-template-columns: repeat(4, 1fr); } /* na grade de 4 colunas (mais estreitas) os números grandes cabem em 1 linha — evita o "pulo" do contador ao chegar em 1.000 */ .stats--4 .num:not(.num--sm) { font-size: clamp(1.8rem, 3vw, 2.4rem); } .stat .num--sm { font-size: clamp(1.5rem, 3vw, 2.1rem); } @media (max-width: 1024px) and (min-width: 761px) { .stats--4 { grid-template-columns: repeat(2, 1fr); } } /* Linha do tempo — trilho + linha de progresso animada + pontos que surgem em sequência */ .timeline-wrap { margin-top: var(--sp-16); } .timeline { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); position: relative; } .timeline::before { content: ""; position: absolute; top: 6px; left: 7px; right: 7px; height: 2px; background: var(--line); } .timeline::after { content: ""; position: absolute; top: 6px; left: 7px; right: 7px; height: 2px; background: linear-gradient(90deg, var(--blue-future), var(--accent)); transform: scaleX(0); transform-origin: left center; transition: transform 1.2s var(--ease) .15s; } .timeline.in::after { transform: scaleX(1); } .tl-item { position: relative; padding-top: var(--sp-8); } .tl-item::before { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-2); border: 3px solid var(--accent); box-shadow: 0 0 0 4px rgba(92,225,230,.12); z-index: 1; } .tl-item::after { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; } .tl-year { display: block; font-family: var(--font-head); font-size: 1.5rem; color: var(--accent); line-height: 1; } .tl-text { display: block; color: var(--text-2); font-size: .92rem; margin-top: .4rem; } @media (prefers-reduced-motion: no-preference) { .tl-item::before { transform: scale(0); } .timeline.in .tl-item::before { animation: tl-pop .55s var(--ease) both; } .timeline.in .tl-item::after { animation: tl-ping 1.1s var(--ease) both; } .timeline.in .tl-item:nth-child(1)::before, .timeline.in .tl-item:nth-child(1)::after { animation-delay: .30s; } .timeline.in .tl-item:nth-child(2)::before, .timeline.in .tl-item:nth-child(2)::after { animation-delay: .55s; } .timeline.in .tl-item:nth-child(3)::before, .timeline.in .tl-item:nth-child(3)::after { animation-delay: .80s; } .timeline.in .tl-item:nth-child(4)::before, .timeline.in .tl-item:nth-child(4)::after { animation-delay: 1.05s; } } @keyframes tl-pop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } } @keyframes tl-ping { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } } @media (max-width: 760px) { .timeline { grid-template-columns: 1fr; gap: 0; } .timeline::before, .timeline::after { left: 6px; right: auto; top: 4px; bottom: 4px; width: 2px; height: auto; } .timeline::after { background: linear-gradient(180deg, var(--blue-future), var(--accent)); transform: scaleY(0); transform-origin: top center; } .timeline.in::after { transform: scaleY(1); } .tl-item { padding: 0 0 var(--sp-8) var(--sp-8); } .tl-item::before, .tl-item::after { top: 2px; } } /* Abas — Missão / Visão / Valores (faixa de largura total, centralizada) */ /* Faixa M/V/V — azul com efeito glass (vidro fosco) */ .mvv-band { position: relative; isolation: isolate; transform: translateZ(0); will-change: transform; margin-top: var(--sp-16); padding: var(--sp-14, 3.5rem) 0; background: linear-gradient(135deg, rgba(63,169,245,.24), rgba(10,22,38,.55) 55%, rgba(92,225,230,.14)); -webkit-backdrop-filter: blur(10px) saturate(125%); backdrop-filter: blur(10px) saturate(125%); border-top: 1px solid rgba(140,200,255,.22); border-bottom: 1px solid rgba(140,200,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); color: #eaf2fb; } /* brilho difuso para dar profundidade ao vidro */ .mvv-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 120% at 18% 0%, rgba(63,169,245,.18), transparent 60%), radial-gradient(50% 120% at 90% 100%, rgba(92,225,230,.14), transparent 60%); } .mvv-band .tablist { border-bottom-color: rgba(255,255,255,.18); } .mvv-band .tab { color: rgba(234,242,251,.68); } .mvv-band .tab:hover { color: #fff; } .mvv-band .tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); } .mvv-band .tabpanel p { color: rgba(234,242,251,.92); } [data-theme="light"] .mvv-band { background: linear-gradient(135deg, rgba(26,79,138,.88), rgba(12,40,76,.92) 60%, rgba(14,154,162,.55)); border-top-color: rgba(255,255,255,.18); border-bottom-color: rgba(255,255,255,.14); color: #fff; } [data-theme="light"] .mvv-band::before { background: radial-gradient(60% 120% at 18% 0%, rgba(92,225,230,.20), transparent 60%), radial-gradient(50% 120% at 90% 100%, rgba(63,169,245,.22), transparent 60%); } [data-theme="light"] .mvv-band .tablist { border-bottom-color: rgba(255,255,255,.24); } [data-theme="light"] .mvv-band .tab { color: rgba(255,255,255,.74); } [data-theme="light"] .mvv-band .tab:hover { color: #fff; } [data-theme="light"] .mvv-band .tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--accent); } [data-theme="light"] .mvv-band .tabpanel p { color: rgba(255,255,255,.92); } .mvv { display: flex; flex-direction: column; align-items: center; text-align: center; } .mvv .tabs { width: 100%; max-width: 760px; margin-top: var(--sp-5); } .tablist { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; border-bottom: 1px solid var(--line); } .tab { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; color: var(--text-2); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t-fast), border-color var(--t-fast); } .tab-ico { display: inline-flex; width: 18px; height: 18px; transition: transform var(--t-med); } .tab-ico .ti { width: 18px; height: 18px; } .tab .ti-solid { display: none; } .tab[aria-selected="true"] .ti-line { display: none; } .tab[aria-selected="true"] .ti-solid { display: inline-block; } .tab[aria-selected="true"] .tab-ico { transform: scale(1.14); } .tab:hover { color: var(--text); } .tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); } .tabpanels { padding-top: var(--sp-6); width: 100%; } .tabpanel[hidden] { display: none; } .tabpanel p { color: var(--text-2); font-size: 1.08rem; max-width: 60ch; margin-inline: auto; line-height: 1.7; } @media (prefers-reduced-motion: no-preference) { .tabpanel:not([hidden]) { animation: exp-in .3s var(--ease); } } /* Texto corrido e listas institucionais */ .prose { max-width: 72ch; } .prose p { color: var(--text-2); font-size: 1.05rem; line-height: 1.7; margin-bottom: var(--sp-4); } .subhead { font-size: clamp(1.2rem, 2.4vw, 1.6rem); } .value-list { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: var(--sp-4); max-width: 80ch; } .value-list li { display: flex; gap: .8rem; color: var(--text-2); font-size: 1.02rem; line-height: 1.6; } .value-list svg { width: 22px; height: 22px; color: var(--accent); flex: none; margin-top: 2px; } .value-list strong { color: var(--text); } /* ---------- Diretrizes estratégicas — abas estilizadas (Missão/Visão/Valores) ---------- */ .section-head--center { text-align: center; margin-inline: auto; } .section-head--center .eyebrow { justify-content: center; } .dir { max-width: 880px; margin: var(--sp-8) auto 0; } .dir-tabs { width: 100%; max-width: none; margin: 0; } /* segmented control — pílula de vidro */ .dir-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; padding: .4rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0)), rgba(7, 17, 31, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--shadow-card); } .dir-seg .dir-tab { justify-content: center; gap: .5rem; padding: .85rem .7rem; border-radius: calc(var(--r-pill) - .3rem); border-bottom: 0; margin-bottom: 0; color: var(--text-2); font-weight: 700; letter-spacing: .01em; cursor: pointer; transition: color var(--t-fast), background var(--t-med), box-shadow var(--t-med), transform var(--t-fast); } .dir-seg .dir-tab:hover { color: var(--text); background: rgba(255, 255, 255, .045); } .dir-seg .dir-tab[aria-selected="true"] { color: #04121d; border-bottom-color: transparent; background: var(--grad-accent); box-shadow: 0 8px 22px rgba(92, 225, 230, .32); } .dir-seg .dir-tab[aria-selected="true"]:hover { color: #04121d; } .dir-tab-ico { display: inline-flex; width: 18px; height: 18px; transition: transform var(--t-med); } .dir-tab-ico svg { width: 18px; height: 18px; } .dir-tab[aria-selected="true"] .dir-tab-ico { transform: scale(1.1); } /* painel */ .dir-panels { padding-top: var(--sp-6); width: 100%; } .dir-panel { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(130% 150% at 100% 0%, rgba(27, 77, 140, .20), transparent 55%), var(--bg-3); padding: clamp(1.5rem, 3.2vw, 2.6rem); box-shadow: var(--shadow-card); } .dir-panel p { color: var(--text-2); font-size: 1.12rem; line-height: 1.78; max-width: 64ch; margin: 0; text-align: left; } .dir-ghost { position: absolute; top: -14px; right: -12px; width: 132px; height: 132px; color: var(--accent); opacity: .08; pointer-events: none; } /* lista de valores dentro do painel */ .dir-values { margin: 0; max-width: none; gap: .7rem; } .dir-values li { align-items: flex-start; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255, 255, 255, .025); transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); } .dir-values li:hover { border-color: var(--line-strong); background: rgba(92, 225, 230, .055); transform: translateX(3px); } .dir-values strong { color: var(--text); } /* tema claro */ [data-theme="light"] .dir-seg { background: linear-gradient(180deg, #fff, var(--bg-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--shadow-card); } [data-theme="light"] .dir-seg .dir-tab:hover { background: rgba(11, 27, 46, .05); } [data-theme="light"] .dir-values li { background: var(--bg-2); } [data-theme="light"] .dir-values li:hover { background: rgba(14, 154, 162, .08); } @media (max-width: 560px) { .dir-seg { gap: .2rem; padding: .3rem; } .dir-seg .dir-tab { padding: .7rem .3rem; gap: .35rem; font-size: .9rem; } .dir-tab-ico, .dir-tab-ico svg { width: 16px; height: 16px; } } /* ========================================================================== CARD DESTAQUE — INTEGRAÇÃO OEM (seção Diferenciais) ========================================================================== */ .card--oem { margin-top: var(--sp-8); } .card--oem > p { max-width: 70ch; } .oem-sum { display: flex; flex-direction: column; flex: 1; gap: 3px; } .oem-sum h3 { margin: 0; } .oem-strip { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 1rem; list-style: none; margin: 0; padding: var(--sp-2) var(--sp-6) var(--sp-6); } .oem-strip li { display: flex; align-items: center; gap: .5rem; white-space: nowrap; font-family: var(--font-head); letter-spacing: .01em; font-size: clamp(.85rem, 1.15vw, 1rem); color: var(--text); } .oem-ck { width: 17px; height: 17px; flex: none; color: var(--accent); transition: transform var(--t-fast); } .oem-strip li:hover .oem-ck { transform: scale(1.18); } @media (max-width: 760px) { .oem-strip { flex-wrap: wrap; justify-content: flex-start; gap: .9rem 1rem; } .oem-strip li { flex: 0 0 calc((100% - 2rem) / 3); font-size: .9rem; white-space: normal; align-items: flex-start; } .oem-strip li:last-child { flex: 0 0 auto; white-space: nowrap; align-items: center; } .oem-strip .oem-ck { margin-top: 2px; } .oem-strip li:last-child .oem-ck { margin-top: 0; } } /* ========================================================================== CARDS EXPANSÍVEIS — sanfona dos Diferenciais ========================================================================== */ .diff-grid { align-items: start; } .card--exp { padding: 0; background: var(--grad-deep); } .card--exp:hover { transform: none; } .card--exp > summary { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-6); cursor: pointer; list-style: none; user-select: none; } .card--exp > summary::-webkit-details-marker { display: none; } .card--exp > summary .ico { margin: 0; flex: none; } .card--exp > summary h3 { margin: 0; flex: 1; font-size: 1.06rem; } .exp-chevron { width: 20px; height: 20px; flex: none; color: var(--text-3); transition: transform var(--t-med), color var(--t-fast); } .card--exp[open] { border-color: var(--line-strong); box-shadow: var(--shadow-card); } .card--exp[open] .exp-chevron { transform: rotate(180deg); color: var(--accent); } .card--exp[open] > summary .ico { background: var(--grad-accent); color: #04121d; border-color: transparent; } .card--exp[open] > summary h3 { color: var(--accent); } .card--exp > p { margin: 0; padding: 0 var(--sp-6) var(--sp-6); color: var(--text-2); } @media (prefers-reduced-motion: no-preference) { .card--exp[open] > p, .card--exp[open] > .oem-strip { animation: exp-in .28s var(--ease); } } @keyframes exp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ========================================================================== EXPERIMENTO — glow (anel animado) AMARELO na seção Diferenciais Só o brilho ao redor do card é amarelo; o restante mantém o teal da marca. ========================================================================== */ .hl-eng { color: #FFD400; } [data-theme="light"] .hl-eng { color: #B07A00; } #diferenciais .card--exp::before { background: conic-gradient(from var(--angle), transparent 8%, #FFB200 20%, #FFE680 33%, transparent 50%, transparent 58%, #FFE680 72%, #FFB200 82%, transparent 96%); } #diferenciais .card--exp[open]::before { opacity: 1; } @media (prefers-reduced-motion: no-preference) { #diferenciais .card--exp[open]::before { animation: card-spin 5s linear infinite; } } #diferenciais .card--exp:hover, #diferenciais .card--exp[open] { border-color: rgba(255,212,0,.42); } [data-theme="light"] #diferenciais .card--exp:hover, [data-theme="light"] #diferenciais .card--exp[open] { border-color: rgba(176,122,0,.5); } /* ícones amarelos — repouso em contorno, preenchidos ao hover/abrir */ #diferenciais .card--exp .ico { background: rgba(255,212,0,.12); color: #FFD400; border-color: rgba(255,212,0,.45); } #diferenciais .card--exp:hover .ico, #diferenciais .card--exp[open] > summary .ico { background: linear-gradient(135deg, #FFB200, #FFD400); color: #1a1400; border-color: transparent; box-shadow: 0 10px 26px -10px rgba(255,200,0,.65); } [data-theme="light"] #diferenciais .card--exp .ico { background: rgba(176,122,0,.14); color: #B07A00; border-color: rgba(176,122,0,.5); } [data-theme="light"] #diferenciais .card--exp:hover .ico, [data-theme="light"] #diferenciais .card--exp[open] > summary .ico { background: linear-gradient(135deg, #C79200, #E0A800); color: #fff; border-color: transparent; box-shadow: 0 10px 26px -10px rgba(176,122,0,.55); } /* ========================================================================== GRIDS DE CARDS ========================================================================== */ .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* Tecnologias (home): cards azuis elegantes, lado a lado, com hierarquia */ .fuel-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); align-items: stretch; } .fuel-card { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: var(--sp-8) var(--sp-6) var(--sp-6); border: 1px solid rgba(120,190,255,.20); border-radius: var(--r-lg); background: radial-gradient(130% 90% at 0% 0%, rgba(63,169,245,.20), transparent 58%), linear-gradient(165deg, rgba(63,169,245,.10), rgba(8,18,31,.34)); } .fuel-card:hover { border-color: var(--accent); } .fuel-card .ico { width: 52px; height: 52px; border-radius: 14px; margin-bottom: var(--sp-4); background: linear-gradient(135deg, var(--blue-future), var(--accent)); color: #06131f; border: 0; box-shadow: 0 10px 22px -10px rgba(63,169,245,.65); } .fuel-card .ico svg { width: 24px; height: 24px; } .fuel-card h3 { font-size: 1.18rem; margin: 0 0 var(--sp-2); } .fuel-card p { font-size: .92rem; color: var(--text-2); line-height: 1.55; margin: 0; } .fuel-badge { position: absolute; top: var(--sp-4); right: var(--sp-4); font-size: .58rem; padding: .26rem .55rem; } .fuel-card--feature { border-color: rgba(92,225,230,.45); background: radial-gradient(130% 90% at 0% 0%, rgba(92,225,230,.22), transparent 58%), linear-gradient(165deg, rgba(63,169,245,.16), rgba(8,18,31,.38)); } .tech-more { margin-top: var(--sp-6); text-align: right; } .tech-more a { font-weight: 600; font-size: .95rem; } /* Luz contornando a borda, em sequência (card 1 -> 2 -> 3 -> 4) */ @media (prefers-reduced-motion: no-preference) { .fuel-card::before { opacity: 0; animation: card-spin 2.6s linear infinite, fuel-trace 10.4s linear infinite; } .fuel-cards .fuel-card:nth-child(1)::before { animation-delay: 0s, 0s; } .fuel-cards .fuel-card:nth-child(2)::before { animation-delay: 0s, 2.6s; } .fuel-cards .fuel-card:nth-child(3)::before { animation-delay: 0s, 5.2s; } .fuel-cards .fuel-card:nth-child(4)::before { animation-delay: 0s, 7.8s; } } @keyframes fuel-trace { 0% { opacity: 0; } 2% { opacity: 1; } 22% { opacity: 1; } 26% { opacity: 0; } 100% { opacity: 0; } } [data-theme="light"] .fuel-card { border-color: rgba(27,77,140,.18); background: radial-gradient(130% 90% at 0% 0%, rgba(63,169,245,.16), transparent 58%), linear-gradient(165deg, rgba(27,77,140,.08), rgba(255,255,255,.5)); } [data-theme="light"] .fuel-card--feature { border-color: rgba(14,154,162,.4); background: radial-gradient(130% 90% at 0% 0%, rgba(14,154,162,.16), transparent 58%), linear-gradient(165deg, rgba(27,77,140,.12), rgba(255,255,255,.55)); } @media (max-width: 900px) { .fuel-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .fuel-cards { grid-template-columns: 1fr; } } /* Segmentos */ .segment { display: flex; flex-direction: column; min-height: 300px; } .segment .seg-top { display: flex; justify-content: space-between; align-items: start; margin-bottom: var(--sp-6); } .segment ul.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--sp-4) 0; } .segment ul.tags li { font-size: .78rem; color: var(--text-2); padding: .25rem .6rem; border: 1px solid var(--line); border-radius: var(--r-pill); } .segment .more { margin-top: auto; padding-top: var(--sp-4); } /* Soluções */ .sol-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); } .sol-list li { display: flex; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--line); color: var(--text-2); } .sol-list li svg { width: 20px; height: 20px; color: var(--accent); flex: none; } /* ========================================================================== DIAGRAMA INTERATIVO ========================================================================== */ .diagram-wrap { display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-8); align-items: center; } .diagram-stage { position: relative; background: var(--grad-deep); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-8); overflow: hidden; } .hotspot { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgba(92,225,230,.18); border: 1px solid var(--accent); cursor: pointer; display: grid; place-items: center; transform: translate(-50%, -50%); transition: transform var(--t-fast), background var(--t-fast); } .hotspot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--accent); opacity: .5; animation: pulse 2.4s var(--ease) infinite; } .hotspot:hover, .hotspot[aria-expanded="true"] { background: var(--accent); transform: translate(-50%, -50%) scale(1.15); } .hotspot .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .hotspot[aria-expanded="true"] .dot { background: #04121d; } @keyframes pulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.8); opacity: 0; } 100% { opacity: 0; } } .diagram-info { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-8); min-height: 220px; } .diagram-info h3 { margin-bottom: var(--sp-2); } .diagram-info .num-tag { color: var(--accent); font-family: var(--font-head); font-size: 1.1rem; } /* ========================================================================== CALCULADORA ========================================================================== */ .calc { display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--sp-12); align-items: start; } /* card único: alterna formulário ↔ resultado */ .calc-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-8); box-shadow: var(--shadow-card); display: grid; align-items: start; } /* form e resultado ocupam a MESMA célula do grid: o card mantém sempre a altura do maior painel — não redimensiona ao calcular. Alternância via visibility/opacity. */ .calc-panel { grid-area: 1 / 1; min-width: 0; } .calc-panel--result { visibility: hidden; opacity: 0; pointer-events: none; } .calc-card.show-result .calc-panel--form { visibility: hidden; opacity: 0; pointer-events: none; } .calc-card.show-result .calc-panel--result { visibility: visible; opacity: 1; pointer-events: auto; animation: calc-in .45s var(--ease) both; } @keyframes calc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .field { margin-bottom: var(--sp-6); } .field label { display: block; font-size: .85rem; color: var(--text-2); margin-bottom: .4rem; font-weight: 600; } .field input, .field select, .field textarea { width: 100%; padding: .8rem 1rem; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: .98rem; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(92,225,230,.15); outline: none; } .field input.invalid, .field textarea.invalid { border-color: #ff6b6b; } .field .err { color: #ff8b8b; font-size: .78rem; margin-top: .3rem; display: none; } .field input.invalid + .err, .field textarea.invalid + .err { display: block; } /* Página de login / autenticação */ .auth { min-height: calc(100svh - var(--header-h, 76px)); display: grid; place-items: center; padding: var(--sp-8) var(--sp-4); } .auth-card { width: 100%; max-width: 420px; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-8); box-shadow: 0 24px 60px -24px rgba(0,0,0,.5); } .auth-head { text-align: center; margin-bottom: var(--sp-8); } .auth-head .eyebrow { justify-content: center; } .auth-head h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: .5rem 0; } .auth-head p { color: var(--text-2); font-size: .92rem; } .auth-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); font-size: .85rem; } .auth-row label { display: flex; align-items: center; gap: .4rem; color: var(--text-2); cursor: pointer; margin: 0; font-weight: 500; } .auth-row input[type=checkbox] { width: auto; accent-color: var(--accent); } .auth-row a { color: var(--accent); } .auth-foot { text-align: center; margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line); font-size: .88rem; color: var(--text-2); } .auth-foot a { color: var(--accent); font-weight: 600; } .auth-back { display: inline-block; margin-top: var(--sp-6); color: var(--text-3); font-size: .85rem; } .auth-back:hover { color: var(--text); } /* painel de resultado (dentro do card) */ .calc-res-eyebrow { justify-content: flex-start; } .calc-res-head { font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin: var(--sp-3) 0 var(--sp-4); } .calc-narr { color: var(--text-2); font-size: 1.02rem; line-height: 1.65; margin-bottom: var(--sp-6); min-height: 7.4em; } .calc-narr strong { color: var(--text); font-weight: 700; } .calc-metrics { background: var(--grad-deep); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 0 var(--sp-6); margin-bottom: var(--sp-6); } .calc-metric { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); } .calc-metric:last-child { border-bottom: 0; } .calc-metric .v { font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 2.8rem); color: var(--text); line-height: 1; } .calc-metric .k { color: var(--text-2); font-size: .9rem; margin-top: .15rem; } .calc-res-actions { display: flex; flex-direction: column; gap: var(--sp-4); align-items: center; } .calc-res-actions .btn { width: 100%; justify-content: center; } .calc-recalc { color: var(--text-2); font-weight: 600; font-size: .9rem; } .calc-recalc:hover { color: var(--accent); } .calc-note { font-size: .78rem; color: var(--text-3); margin-top: var(--sp-4); text-align: center; } /* copy persuasivo (direita no desktop, topo no mobile) */ .calc-copy { align-self: center; } .calc-copy h2 { margin: var(--sp-3) 0 var(--sp-4); } .calc-copy .lead { margin-bottom: var(--sp-8); } .calc-benefits { display: grid; gap: var(--sp-4); } .calc-benefits li { display: flex; gap: .7rem; align-items: flex-start; color: var(--text-2); font-size: 1rem; } .calc-benefits svg { width: 22px; height: 22px; color: var(--accent); flex: none; margin-top: 1px; } /* ====== Versão compacta: a seção da calculadora cabe em uma tela ====== Escopado em #calculadora (especificidade de ID) — não afeta o form de contato. */ #calculadora { padding-block: clamp(var(--sp-8), 5vh, var(--sp-12)); } #calculadora .calc { gap: var(--sp-8); } #calculadora .calc-card { padding: var(--sp-6); } #calculadora .field { margin-bottom: var(--sp-4); } #calculadora .field label { margin-bottom: .28rem; } #calculadora .field input, #calculadora .field select { padding: .58rem .9rem; font-size: .94rem; } #calculadora .calc-res-head { font-size: clamp(1.3rem, 2.6vw, 1.65rem); margin: var(--sp-2) 0 var(--sp-3); } #calculadora .calc-narr { font-size: .95rem; line-height: 1.5; min-height: 6em; margin-bottom: var(--sp-4); } #calculadora .calc-metrics { margin-bottom: var(--sp-4); } #calculadora .calc-metric { padding: var(--sp-3) 0; } #calculadora .calc-metric .v { font-size: clamp(1.5rem, 3vw, 2.1rem); } #calculadora .calc-metric .k { font-size: .82rem; } #calculadora .calc-res-actions { gap: var(--sp-3); } #calculadora .calc-note { margin-top: var(--sp-3); } #calculadora .calc-copy h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: var(--sp-2) 0 var(--sp-3); } #calculadora .calc-copy .lead { margin-bottom: var(--sp-6); } #calculadora .calc-benefits { gap: var(--sp-3); } #calculadora .calc-benefits li { font-size: .94rem; } /* formulário: cabeçalho + nota preenchem o card e o conjunto fica centralizado */ #calculadora .calc-panel--form { display: flex; flex-direction: column; justify-content: center; } .calc-form-head { margin-bottom: var(--sp-4); } .calc-form-title { font-size: clamp(1.2rem, 2.6vw, 1.5rem); margin-top: .35rem; line-height: 1.25; } #calculadora .calc-panel--form .calc-note { margin-top: var(--sp-4); margin-bottom: 0; } @media (max-width: 1024px) { .calc-copy { order: -1; align-self: stretch; } } /* ========================================================================== BENEFÍCIOS (infográfico barras) ========================================================================== */ .radials { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-6); } .radial { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); } .radial-ring { position: relative; width: clamp(118px, 13vw, 150px); aspect-ratio: 1; } .radial-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .radial-ring .ring-track { fill: none; stroke: var(--bg-3); stroke-width: 8; } .radial-ring .ring-prog { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 326.726; stroke-dashoffset: 326.726; transition: stroke-dashoffset 1.5s var(--ease); filter: drop-shadow(0 0 6px rgba(92,225,230,.45)); } .radial-val { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; line-height: 1; font-size: clamp(1.7rem, 4vw, 2.3rem); } .radial-lbl { color: var(--text-2); font-weight: 600; font-size: .92rem; max-width: 18ch; line-height: 1.3; } @media (max-width: 480px) { .radials { gap: var(--sp-6) var(--sp-4); } .radial-ring { width: clamp(92px, 32vw, 130px); } .radial-lbl { font-size: .82rem; } } /* Cases */ .cases { grid-template-columns: repeat(3, 1fr); text-align: center; } .case .num { font-family: var(--font-head); font-size: clamp(3rem, 7vw, 5rem); line-height: 1; } .case .lbl { color: var(--text-2); margin-top: var(--sp-2); } /* ========================================================================== LOGO WALL ========================================================================== */ .logos { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: center; justify-content: center; } .logo-item { flex: 1 1 200px; max-width: 240px; height: 110px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-3); color: var(--text-2); font-family: var(--font-head); font-size: 1.3rem; letter-spacing: .04em; transition: border-color var(--t-fast), color var(--t-fast); } .logo-item:hover { border-color: var(--line-strong); color: var(--text); } /* Esteira (marquee) de logos de clientes */ .logo-marquee { position: relative; max-width: 1180px; margin: 0 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .logo-track { display: flex; width: max-content; animation: logo-scroll 34s linear infinite; } .logo-marquee:hover .logo-track { animation-play-state: paused; } .logo-slot { flex: 0 0 auto; width: 210px; padding: 0 8px; box-sizing: border-box; } .logo-chip { display: grid; place-items: center; height: 140px; padding: 8px 10px; background: none; transition: transform var(--t-fast); } .logo-chip img { max-height: 90px; max-width: 100%; width: auto; height: auto; object-fit: contain; } /* dark (padrão) → logos brancas; light → logos escuras */ .logo-chip .logo-dark { display: none; } [data-theme="light"] .logo-chip .logo-light { display: none; } [data-theme="light"] .logo-chip .logo-dark { display: block; } .logo-slot:hover .logo-chip { transform: translateY(-4px); } @keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 760px) { .logo-marquee { max-width: 100%; } .logo-slot { width: 150px; padding: 0 6px; } .logo-chip { height: 110px; padding: 8px 8px; } .logo-chip img { max-height: 70px; } } @media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } } /* ========================================================================== PORTAL ========================================================================== */ .portal { position: relative; overflow: hidden; background: radial-gradient(70% 120% at 85% 10%, rgba(27,77,140,.45), transparent 55%), radial-gradient(50% 80% at 10% 90%, rgba(92,225,230,.18), transparent 60%), var(--section-alt-bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .portal-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-12); align-items: center; } .portal-features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: var(--sp-8) 0; } .portal-features li { display: flex; gap: .6rem; align-items: center; color: var(--text-2); font-size: .95rem; } .portal-features svg { width: 18px; height: 18px; color: var(--accent); flex: none; } /* logo grande flutuando; variante por tema (dark = logo clara, light = logo navy) */ .portal-mock { display: flex; } .portal-mock img { width: 100%; height: auto; display: block; animation: hero-glow 6s ease-in-out infinite; } .portal-mock .hl-light { display: none; } /* dark mode (padrão) → logo clara */ [data-theme="light"] .portal-mock .hl-dark { display: none; } [data-theme="light"] .portal-mock .hl-light { display: block; } .portal-mock .hl-dark { filter: drop-shadow(0 0 30px rgba(63,169,245,.30)) drop-shadow(0 18px 40px rgba(0,0,0,.4)); } .portal-mock .hl-light { filter: drop-shadow(0 14px 34px rgba(20,40,70,.18)); } /* ========================================================================== CONTATO ========================================================================== */ .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--sp-16); } .contact-info li { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); } .contact-info li:last-child { border-bottom: 0; } .contact-info .ico { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(63,169,245,.20), rgba(92,225,230,.08)); color: var(--accent); border: 1px solid var(--line-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); } .contact-info .ico svg { width: 22px; height: 22px; } .contact-info li:hover .ico { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 22px -12px rgba(63,169,245,.55); } .contact-info .ico--wa { color: #25D366; background: linear-gradient(145deg, rgba(37,211,102,.20), rgba(37,211,102,.06)); } .contact-info li:hover .ico--wa { border-color: #25D366; box-shadow: 0 10px 22px -12px rgba(37,211,102,.55); } .contact-info .k { font-size: .78rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; } .contact-info .v { color: var(--text); font-weight: 600; } /* card do formulário de contato (lado direito) */ .contact-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-8); box-shadow: var(--shadow-card); } .contact-card-head { margin-bottom: var(--sp-6); } .contact-card-title { font-size: clamp(1.2rem, 2.6vw, 1.5rem); } .contact-card-sub { color: var(--text-3); font-size: .9rem; margin-top: .3rem; } .contact-card textarea { resize: vertical; min-height: 120px; } .contact-card .field input:hover, .contact-card .field textarea:hover { border-color: var(--line-strong); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .form-success { display: none; padding: var(--sp-6); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: rgba(92,225,230,.08); color: var(--text); } .form-success.show { display: block; } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { background: var(--footer-bg); border-top: 1px solid var(--line); padding: var(--sp-16) 0 var(--sp-8); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-8); } .site-footer h4 { font-family: var(--font-body); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--sp-4); } .site-footer a { color: var(--text-2); font-size: .95rem; display: block; padding: .3rem 0; transition: color var(--t-fast); } .site-footer a:hover { color: var(--accent); } .footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); } .footer-social a { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; color: var(--text-2); border: 1px solid var(--line-strong); transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); } .footer-social a:hover { color: var(--accent); border-color: var(--accent); background: rgba(255,255,255,.05); transform: translateY(-2px); } .footer-social svg { width: 20px; height: 20px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--line); color: var(--text-3); font-size: .85rem; } /* WhatsApp flutuante */ .wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 10px 30px -6px rgba(37,211,102,.6); transition: transform var(--t-fast), opacity var(--t-med); } .wa-float:hover { transform: scale(1.08); } .wa-float svg { width: 30px; height: 30px; color: #04121d; } /* some enquanto o hero (tela home) está visível — não cobre os botões do rodapé do hero */ .wa-float.is-hidden { opacity: 0; transform: translateY(16px) scale(.85); pointer-events: none; } /* ===== FAB de contato (logo) com menu radial: Instagram / WhatsApp / E-mail ===== */ .contact-fab { position: fixed; right: 20px; bottom: 20px; z-index: 95; width: 60px; height: 60px; transition: opacity var(--t-med), transform var(--t-med); } .contact-fab.is-hidden { opacity: 0; transform: translateY(16px) scale(.85); pointer-events: none; } .cf-toggle { position: absolute; inset: 0; width: 60px; height: 60px; border-radius: 50%; background: #fff; border: 0; cursor: pointer; display: grid; place-items: center; /* dark mode: botão branco */ box-shadow: 0 10px 30px -8px rgba(0,0,0,.55); transition: transform var(--t-fast), box-shadow var(--t-fast); z-index: 3; } [data-theme="light"] .cf-toggle { background: #0B1B2E; box-shadow: 0 10px 30px -8px rgba(11,27,46,.45); } /* light mode: botão preto */ .cf-toggle:hover { transform: scale(1.06); } .cf-logo { width: 34px; height: 34px; object-fit: contain; transition: opacity var(--t-fast), transform var(--t-fast); } .cf-x { position: absolute; width: 22px; height: 22px; color: #0B1B2E; opacity: 0; transform: rotate(-90deg) scale(.6); transition: opacity var(--t-fast), transform var(--t-fast); } [data-theme="light"] .cf-x { color: #fff; } .contact-fab.open .cf-toggle { box-shadow: 0 12px 36px -10px rgba(0,0,0,.6); } .contact-fab.open .cf-logo { opacity: 0; transform: scale(.4); } .contact-fab.open .cf-x { opacity: 1; transform: rotate(0) scale(1); } .cf-item { position: absolute; left: 6px; bottom: 6px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; z-index: 2; box-shadow: 0 8px 22px -8px rgba(0,0,0,.6); opacity: 0; transform: translate(0, 0) scale(.4); pointer-events: none; transition: transform .38s var(--ease), opacity .3s var(--ease); } .cf-item svg { width: 22px; height: 22px; } .cf-ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); } .cf-fb { background: #1877F2; } .cf-li { background: #0A66C2; } .cf-wa { background: #25D366; } .cf-wa svg { color: #04121d; } .cf-mail { background: var(--blue-tech); } /* abertura em arco de 90° (cima → esquerda), 5 itens distribuídos, com leve atraso escalonado */ .contact-fab.open .cf-item { opacity: 1; pointer-events: auto; transition-delay: calc(var(--i) * .05s); } .contact-fab.open .cf-ig { transform: translate(0, -82px) scale(1); } .contact-fab.open .cf-fb { transform: translate(-31px, -76px) scale(1); } .contact-fab.open .cf-li { transform: translate(-58px, -58px) scale(1); } .contact-fab.open .cf-wa { transform: translate(-76px, -31px) scale(1); } .contact-fab.open .cf-mail { transform: translate(-82px, 0) scale(1); } /* Banner LGPD */ .cookie { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(100% - 2rem, 720px); z-index: 95; background: rgba(13,27,42,.95); backdrop-filter: blur(10px); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-6); display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; box-shadow: var(--shadow-card); } .cookie p { font-size: .85rem; flex: 1 1 280px; margin: 0; } .cookie.hide { display: none; } /* ========================================================================== ANIMAÇÕES (reveal via IntersectionObserver) ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); } [data-reveal="left"] { transform: translateX(-32px); } [data-reveal="right"] { transform: translateX(32px); } [data-reveal="scale"] { transform: scale(.94); } [data-reveal].in { opacity: 1; transform: none; } [data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); } [data-stagger].in > * { opacity: 1; transform: none; } /* ========================================================================== RESPONSIVO ========================================================================== */ @media (max-width: 1024px) { .hero-grid, .about-grid, .diagram-wrap, .calc, .portal-grid, .contact-grid { grid-template-columns: 1fr; } .diagram-wrap { gap: var(--sp-6); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .hero-visual { max-width: 480px; margin-inline: auto; } .hero-truck { width: 100%; height: auto; max-height: 70svh; } /* Portal: logo ABAIXO do texto, centralizada e menor (não sobrepõe o título) */ .portal-grid { gap: var(--sp-6); } .portal-mock { order: 2; justify-content: center; margin-top: var(--sp-2); } .portal-mock img { max-width: 320px; margin-inline: auto; } } /* Menu compacto (tablet + celular): hambúrguer + dropdown, controles movidos p/ dentro */ @media (max-width: 1024px) { .nav-toggle { display: block; } .nav { position: fixed; top: calc(14px + 60px + 8px); left: 1.25rem; right: 1.25rem; flex-direction: column; align-items: stretch; background: rgba(9,18,30,.92); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); padding: var(--sp-4) var(--sp-6) var(--sp-6); gap: 0; border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: 0 28px 70px -26px rgba(0,0,0,.9); transform-origin: top center; transform: translateY(-18px) scaleY(.96); opacity: 0; visibility: hidden; max-height: calc(100svh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; /* "cai" da navbar com leve overshoot */ transition: transform .42s cubic-bezier(.34, 1.4, .5, 1), opacity .28s ease, visibility .42s; } body.nav-open .nav { transform: translateY(0) scaleY(1); opacity: 1; visibility: visible; } /* itens entram em cascata depois do painel cair */ .nav > * { opacity: 0; transform: translateY(-10px); transition: opacity .3s ease, transform .4s var(--ease); } body.nav-open .nav > * { opacity: 1; transform: none; } body.nav-open .nav > *:nth-child(1) { transition-delay: .10s; } body.nav-open .nav > *:nth-child(2) { transition-delay: .15s; } body.nav-open .nav > *:nth-child(3) { transition-delay: .20s; } body.nav-open .nav > *:nth-child(4) { transition-delay: .25s; } body.nav-open .nav > *:nth-child(5) { transition-delay: .30s; } .nav > a { padding: 1.05rem .25rem; border-bottom: 1px solid var(--line); font-size: 1.12rem; font-weight: 600; color: var(--text); } .nav > a:hover { color: var(--accent); padding-left: .5rem; } /* controles realocados p/ dentro do menu (JS): a barra do topo fica só logo + hambúrguer */ .nav-extras { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-5, 1.25rem); margin-top: var(--sp-4); border-top: 1px solid var(--line); } .nav-extras-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .nav-extras .btn { width: 100%; justify-content: center; padding: .9rem 1.2rem; font-size: .98rem; } .nav-extras .btn--login { border-color: var(--line-strong); color: var(--text); } .nav-extras .btn--login span { display: inline; } .nav-extras .btn--login svg { width: 18px; height: 18px; opacity: 1; } .header-actions { gap: var(--sp-2); } /* o CTA primário não fica na barra (vai pro menu via JS; em páginas sem menu, some) */ .header-actions .btn--primary { display: none; } } @media (max-width: 760px) { .grid-2, .grid-4, .sol-cols, .cases, .stats, .portal-features, .form-row { grid-template-columns: 1fr; } .grid-3:not(.cards-hscroll) { grid-template-columns: 1fr; } .stat { border-left: 0; border-top: 2px solid var(--line-strong); padding-left: 0; } /* Cards em rolagem horizontal com o dedo (Diferenciais, Tecnologias) — maiores e com peek do próximo */ .cards-hscroll { display: flex; gap: var(--sp-4); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--sp-2) 0 var(--sp-6); scrollbar-width: none; } .cards-hscroll::-webkit-scrollbar { display: none; } .cards-hscroll > .card { flex: 0 0 82%; max-width: 340px; scroll-snap-align: center; padding: var(--sp-8) var(--sp-6); } } /* ========================================================================== PÁGINAS INTERNAS (deep pages) ========================================================================== */ .page-hero { position: relative; padding: calc(var(--header-h) + var(--sp-8)) 0 var(--sp-10, 2.5rem); background: radial-gradient(60% 80% at 80% 0%, rgba(27,77,140,.35), transparent 60%), var(--bg-2); border-bottom: 1px solid var(--line); overflow: hidden; } .page-hero h1 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); margin: var(--sp-2) 0 var(--sp-3); max-width: 18ch; } .page-hero p { font-size: clamp(.98rem, 1.35vw, 1.1rem); color: var(--text-2); max-width: 60ch; } .breadcrumb { font-size: .82rem; color: var(--text-3); margin-bottom: var(--sp-3); } .breadcrumb a { color: var(--text-2); } .breadcrumb a:hover { color: var(--accent); } .deep-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; padding: var(--sp-16) 0; border-bottom: 1px solid var(--line); } .deep-row:nth-child(even) .deep-media { order: -1; } .deep-media { aspect-ratio: 4/3; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--grad-deep); display: grid; place-items: center; color: var(--text-3); font-size: .85rem; text-align: center; padding: var(--sp-6); box-shadow: var(--shadow-card); } .deep-media--img { padding: 0; overflow: hidden; } .deep-media--img img { width: 100%; height: 100%; object-fit: cover; display: block; } .spec-list li { display: flex; gap: .7rem; padding: .55rem 0; color: var(--text-2); border-bottom: 1px solid var(--line); } .spec-list li svg { width: 20px; height: 20px; color: var(--accent); flex: none; } @media (max-width: 1024px) { .deep-row { grid-template-columns: 1fr; gap: var(--sp-8); } .deep-row:nth-child(even) .deep-media { order: 0; } } /* ========================================================================== PORTFÓLIO — visualizador 3D + grade de projetos ========================================================================== */ .pf-feature { display: grid; grid-template-columns: 1.25fr .85fr; gap: var(--sp-12); align-items: center; padding: var(--sp-16) 0; border-bottom: 1px solid var(--line); } /* Palco do modelo 3D */ .mv-stage { position: relative; width: 100%; height: clamp(420px, 64vh, 680px); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, rgba(27,77,140,.28), transparent 60%), var(--grad-deep); box-shadow: var(--shadow-card); } .mv-stage:fullscreen { height: 100%; border-radius: 0; } .mv-stage model-viewer { width: 100%; height: 100%; background: transparent; --poster-color: transparent; --progress-bar-color: transparent; } /* Barra de progresso custom */ .mv-progress { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); color: var(--text-2); font-size: .85rem; background: var(--grad-deep); transition: opacity var(--t-med), visibility var(--t-med); } .mv-progress.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .mv-progress span { max-width: min(86%, 460px); text-align: center; line-height: 1.5; } .mv-progress.is-error { color: #ffb4b4; } .mv-progress.is-error .mv-progress-track { display: none; } .mv-progress-track { width: min(60%, 240px); height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; } .mv-progress-fill { width: 0%; height: 100%; background: var(--grad-accent); transition: width .2s linear; } /* Dica de interação */ .mv-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .5rem; max-width: calc(100% - 28px); padding: .5rem .9rem; border-radius: var(--r-pill); background: rgba(7,17,31,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); color: var(--text-2); font-size: .78rem; text-align: center; transition: opacity var(--t-med), transform var(--t-med); } .mv-hint svg { width: 16px; height: 16px; color: var(--accent); flex: none; } .mv-hint.is-hidden { opacity: 0; transform: translateX(-50%) translateY(8px); pointer-events: none; } /* Botões de controle */ .mv-bar { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: .4rem; } .mv-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; color: var(--text); background: rgba(7,17,31,.55); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); } .mv-btn:hover { background: rgba(92,225,230,.12); border-color: var(--line-strong); transform: translateY(-1px); } .mv-btn svg { width: 16px; height: 16px; color: var(--accent); } .mv-btn[aria-pressed="false"] { color: var(--text-3); } .mv-btn[aria-pressed="false"] svg { color: var(--text-3); } .mv-ar { position: absolute; bottom: 14px; right: 14px; padding: .55rem 1rem; border-radius: var(--r-pill); font-weight: 600; font-size: .82rem; color: #04121d; background: var(--grad-accent); border: 0; cursor: pointer; } /* Painel de info do projeto em destaque */ .pf-info h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* Portfólios — rolagem horizontal (base: swipe nativo; desktop: pin + scroll-jack via JS) */ .pf-scroll { position: relative; padding: var(--sp-16) 0; } .pf-scroll-head { padding: 0 1.25rem; margin-bottom: var(--sp-8); } .pf-scroll-hint { display: none; } .pf-track { display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 1.25rem var(--sp-4); scrollbar-width: none; } .pf-track::-webkit-scrollbar { display: none; } .pf-slide { flex: 0 0 84%; max-width: 360px; scroll-snap-align: center; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t-med), box-shadow var(--t-med); } .pf-slide:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); } .pf-slide-media { aspect-ratio: 16/12; overflow: hidden; background: var(--grad-deep); } .pf-slide-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-med); } /* Frotas (#homeScroll): card acompanha a foto (quase quadrada) — sem corte e sem faixa */ #homeScroll .pf-slide-media { aspect-ratio: auto; height: auto; } #homeScroll .pf-slide-media img { width: 100%; height: auto; object-fit: contain; } @media (min-width: 1025px) { /* desktop (scroll-jack): foto menor e centralizada, sem sobrepor o cabeçalho */ #homeScroll.pf-pinned .pf-slide-media { width: auto; height: auto; max-width: 530px; max-height: 64vh; margin: 0 0 0 auto; } #homeScroll.pf-pinned .pf-slide-media img { width: auto; height: auto; max-width: 100%; max-height: 64vh; } } .pf-slide:hover .pf-slide-media img { transform: scale(1.04); } .pf-slide-body { padding: var(--sp-6); } .pf-slide-body .badge { margin-bottom: .6rem; } .pf-slide-body h3 { margin: .35rem 0 .5rem; } .pf-slide-body p { color: var(--text-2); font-size: .95rem; } .pf-3d-note { color: var(--text-3) !important; font-size: .85rem !important; margin-top: .85rem; } .pf-3d-note span { color: var(--accent); font-weight: 700; } /* ---------- Visualizador foto ↔ 3D (slide do caminhão) ---------- */ /* O modelo fica SOBREPOSTO ao card (sempre na tela = sempre renderizando); o botão "Ver em 3D" faz o cross-fade entre foto e 3D. */ .pf-viewer { position: relative; isolation: isolate; } .pf-layer { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; overflow: hidden; } .pf-layer--photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .pf-layer--model { background: radial-gradient(120% 90% at 50% 0%, rgba(27, 77, 140, .32), transparent 62%), var(--grad-deep); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility .5s ease; } .pf-viewer.is-3d .pf-layer--model { opacity: 1; visibility: visible; pointer-events: auto; } .pf-viewer.is-3d .pf-layer--photo { opacity: 0; transition: opacity .5s ease; } .pf-layer--photo { transition: opacity .5s ease; } .pf-mv { width: 100%; height: 100%; background: transparent; --poster-color: transparent; --progress-bar-color: transparent; } .pf-mv::part(default-progress-bar) { display: none; } /* skeleton discreto enquanto o 3D não termina de carregar (sem texto "carregando") */ .pf-mv-skel { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .5rem; background: transparent; transition: opacity .5s ease, visibility .5s ease; } .pf-mv-skel span { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: pfPulse 1s ease-in-out infinite; } .pf-mv-skel span:nth-child(2) { animation-delay: .15s; } .pf-mv-skel span:nth-child(3) { animation-delay: .3s; } .pf-mv-skel.is-done, .pf-mv-skel.is-soft { opacity: 0; visibility: hidden; pointer-events: none; } @keyframes pfPulse { 0%, 100% { transform: scale(.6); opacity: .3; } 50% { transform: scale(1); opacity: 1; } } /* dica "arraste para girar" */ .pf-mv-hint { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 8px); z-index: 3; display: inline-flex; align-items: center; padding: .42rem .8rem; border-radius: var(--r-pill); background: rgba(7, 17, 31, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); color: var(--text-2); font-size: .76rem; opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s; } .pf-mv-hint.is-on { opacity: 1; transform: translate(-50%, 0); } /* botão Ver em 3D / Ver foto (canto superior direito) */ .pf-3d-toggle { position: absolute; top: 12px; right: 12px; z-index: 5; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: var(--r-pill); font-size: .82rem; font-weight: 700; letter-spacing: .01em; cursor: pointer; color: var(--text); background: rgba(7, 17, 31, .58); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0, 0, 0, .28); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .pf-3d-toggle:hover { background: rgba(92, 225, 230, .16); border-color: var(--line-strong); transform: translateY(-1px); } .pf-3d-toggle:active { transform: translateY(0) scale(.97); } .pf-3d-toggle svg { width: 17px; height: 17px; color: var(--accent); flex: none; } .pf-3d-toggle .ico-photo, .pf-3d-toggle .t-photo { display: none; } .pf-viewer.is-3d .pf-3d-toggle .ico-cube, .pf-viewer.is-3d .pf-3d-toggle .t-3d { display: none; } .pf-viewer.is-3d .pf-3d-toggle .ico-photo, .pf-viewer.is-3d .pf-3d-toggle .t-photo { display: inline; } /* pulso sutil para chamar atenção quando o 3D já está pronto (e ainda em foto) */ .pf-viewer.is-3d-ready:not(.is-3d) .pf-3d-toggle { animation: pfReady 2.6s ease-in-out 1s 2; } @keyframes pfReady { 0%, 100% { box-shadow: 0 6px 20px rgba(0, 0, 0, .28); } 50% { box-shadow: 0 6px 26px rgba(92, 225, 230, .45); } } @media (prefers-reduced-motion: reduce) { .pf-layer, .pf-3d-toggle { transition: none; } .pf-viewer.is-3d-ready:not(.is-3d) .pf-3d-toggle { animation: none; } } @media (min-width: 1025px) { .pf-scroll-hint { display: block; color: var(--text-3); font-size: .85rem; margin-top: .35rem; } /* modo "pinned": a rolagem vertical move o trilho na horizontal (classe via JS) */ .pf-scroll.pf-pinned { padding: 0; } /* sticky em coluna: cabeçalho fixo no topo (sempre visível) + trilho ocupa o resto */ .pf-scroll.pf-pinned .pf-scroll-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; } .pf-scroll.pf-pinned .pf-scroll-head { position: static; flex: none; margin: 0; padding: calc(var(--header-h) + var(--sp-4)) 6vw var(--sp-2); z-index: 6; } .pf-scroll.pf-pinned .pf-scroll-head h2 { display: none; } .pf-scroll.pf-pinned .pf-track { flex: 1 1 auto; min-height: 0; overflow: visible; scroll-snap-type: none; flex-wrap: nowrap; padding: 0; gap: 0; align-items: stretch; will-change: transform; } /* cada projeto = um painel que ocupa a largura inteira da tela (respiro nas bordas) */ .pf-scroll.pf-pinned .pf-slide { flex: 0 0 100vw; max-width: none; scroll-snap-align: none; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.75rem); height: 100%; padding: var(--sp-6) 6vw var(--sp-12); box-sizing: border-box; } /* FOTO GRANDE à esquerda */ .pf-scroll.pf-pinned .pf-slide-media { aspect-ratio: auto; height: 100%; width: 100%; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); } .pf-scroll.pf-pinned .pf-slide:hover { box-shadow: none; } .pf-scroll.pf-pinned .pf-slide:hover .pf-slide-media img { transform: none; } /* TEXTO FLUTUANTE à direita (sem card) */ .pf-scroll.pf-pinned .pf-slide-body { padding: 0; max-width: 32vw; } .pf-scroll.pf-pinned .pf-slide-body .badge { margin-bottom: var(--sp-4); } .pf-scroll.pf-pinned .pf-slide-body h3 { font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.06; margin: 0 0 var(--sp-5, 1.25rem); } .pf-scroll.pf-pinned .pf-slide-body p { font-size: 1.1rem; line-height: 1.6; max-width: 40ch; } } @media (max-width: 1024px) { .pf-feature { grid-template-columns: 1fr; gap: var(--sp-8); } } @media (max-width: 760px) { .mv-bar { flex-direction: row; flex-wrap: wrap; top: auto; bottom: 12px; right: 12px; left: 12px; justify-content: center; } .mv-btn span { display: none; } .mv-btn { padding: .55rem; } .mv-hint { display: none; } .mv-ar { bottom: auto; top: 12px; right: 12px; } } /* ========================================================================== LIGHT MODE ========================================================================== */ [data-theme="light"] { --bg: #EEF3F9; --bg-2: #E3EBF4; --bg-3: #FFFFFF; --blue-tech: #1B4D8C; --blue-future: #1E78C8; /* mais escuro p/ contraste sobre claro */ --accent: #0E9AA2; /* teal mais escuro p/ AA sobre branco */ --text: #0B1B2E; --text-2: #3C4A5C; --text-3: #6A7787; --line: rgba(11,27,46,.12); --line-strong: rgba(27,77,140,.32); --grad-deep: linear-gradient(160deg, #FFFFFF, #E9EFF6); --shadow-card: 0 18px 50px -24px rgba(11,27,46,.30); --glow-accent: 0 0 0 1px rgba(14,154,162,.35), 0 8px 30px rgba(30,120,200,.18); --section-alt-bg: rgba(227,235,244,.55); --footer-bg: rgba(227,235,244,.66); color-scheme: light; } /* superfícies com cor fixa que precisam adaptar no claro */ [data-theme="light"] .site-header .container { background: rgba(255,255,255,.62); border-color: rgba(15,30,50,.1); } [data-theme="light"] .site-header.scrolled .container { background: rgba(255,255,255,.85); border-color: rgba(15,30,50,.16); } [data-theme="light"] .btn--login:hover { background: rgba(15,30,50,.05); border-color: rgba(15,30,50,.12); } [data-theme="light"] .btn--primary { color: #FFFFFF; } /* sombra do caminhão suave no claro (a preta forte era recortada na emenda hero/seção) */ [data-theme="light"] .hero-truck { filter: drop-shadow(0 12px 22px rgba(20, 40, 70, .12)); } [data-theme="light"] .cookie { background: rgba(255,255,255,.96); } [data-theme="light"] .hero-badges svg, [data-theme="light"] .card .ico { color: var(--blue-tech); } /* no light o gradiente do hover é escuro (azul/teal) — glifo branco p/ contrastar */ [data-theme="light"] .card:hover .ico { color: #fff; } [data-theme="light"] .badge { background: rgba(14,154,162,.12); } /* overlay do hero: trocar o véu navy fixo por um claro (corrige a "sombra escura" atrás do caminhão) */ [data-theme="light"] .hero::after { background: radial-gradient(48% 55% at 14% 38%, rgba(63,169,245,.14), transparent 62%), linear-gradient(90deg, var(--bg) 30%, rgba(227,235,244,.3) 60%, rgba(227,235,244,0) 100%); } /* Portal: trocar o glow navy forte (bom no escuro) por tons claros suaves no light mode */ [data-theme="light"] .portal { background: radial-gradient(70% 120% at 85% 10%, rgba(63,169,245,.12), transparent 55%), radial-gradient(50% 80% at 10% 90%, rgba(14,154,162,.08), transparent 60%), var(--section-alt-bg); } @media (max-width: 760px) { [data-theme="light"] .nav { background: rgba(255,255,255,.98); } } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; } }