/* ============================================================ VH2 — folha de estilo compartilhada por todas as páginas Editar aqui altera o site inteiro. Não duplicar em página nenhuma. ============================================================ */ /* ------------------------------------------------------------ FONTES O briefing pede Aktiv Grotesk (licença paga, Dalton Maag). Ao licenciar, coloque os .woff2 na mesma pasta e descomente o bloco abaixo: a pilha em --font já tenta Aktiv Grotesk antes do fallback (Inter), então nada mais precisa mudar. ------------------------------------------------------------ */ /* Ao licenciar, apague estes comentários e ajuste o caminho: @font-face{font-family:"Aktiv Grotesk";src:url("AktivGrotesk-Light.woff2") format("woff2");font-weight:300;font-display:swap} @font-face{font-family:"Aktiv Grotesk";src:url("AktivGrotesk-Regular.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"Aktiv Grotesk";src:url("AktivGrotesk-Medium.woff2") format("woff2");font-weight:500;font-display:swap} */ /* ============================================================ TOKENS ============================================================ */ :root{ --accent:#C96442; /* cor da marca, extraída do logo.svg */ --bg:#FFFFFF; --ink:#0E0E0E; --ink-soft:rgba(14,14,14,.60); --line:rgba(14,14,14,.16); /* rede: presença de fundo, discreta */ --net-edge:rgba(14,14,14,.20); --net-node:rgba(14,14,14,.52); --net-live:rgba(14,14,14,.62); /* aresta acesa por um sinal */ --font:"Aktiv Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --head-h:94px; /* altura do cabeçalho; o painel do menu se alinha por ela */ /* VÃO entre o menu e "SERVIÇOS": é a altura da faixa da animação E o recuo do título. Um valor só, para as figuras nunca vazarem sobre o texto. */ --vao:clamp(46px,8vh,104px); --gutter:clamp(20px,5vw,72px); /* goteira do celular: mais estreita que a do site. Vale para a barra do topo e para o painel do menu, que precisam da mesma medida para o logo e os itens caírem na mesma vertical. */ --gutter-mob:clamp(13px,3.4vw,30px); --maxw:1560px; --ease:cubic-bezier(.22,.61,.36,1); } :root[data-theme="dark"]{ --bg:#0D0D0D; --ink:#F5F5F3; --ink-soft:rgba(245,245,243,.58); --line:rgba(245,245,243,.16); --net-edge:rgba(245,245,243,.18); --net-node:rgba(245,245,243,.50); --net-live:rgba(245,245,243,.62); } *,*::before,*::after{box-sizing:border-box} /* O também recebe a cor de fundo: é dela que o iOS tinge a área da barra de status quando o theme-color não é aplicado. Sem isto, o topo da tela fica branco mesmo com o site em escuro. */ html{ -webkit-text-size-adjust:100%;scroll-behavior:smooth; background:var(--bg); transition:background-color .45s var(--ease); } /* barra de rolagem na cor da marca */ html{scrollbar-color:var(--accent) color-mix(in srgb,var(--ink) 8%,transparent);scrollbar-width:thin} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:color-mix(in srgb,var(--ink) 6%,transparent)} ::-webkit-scrollbar-thumb{background:var(--accent);border-radius:999px} ::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--accent) 82%,#000)} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--font);font-weight:300; -webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background-color .45s var(--ease),color .45s var(--ease); } a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--accent);color:#fff} :focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px} section[id]{scroll-margin-top:100px} /* fora da tela, dentro do documento: para títulos que a página não precisa mostrar mas o leitor de tela e o buscador precisam ler */ .oculto-visual{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } /* ============================================================ CABEÇALHO — logo, menu, hambúrguer no mobile e seletor de versão ============================================================ */ .head{ position:fixed;inset:0 0 auto 0;z-index:60; background:color-mix(in srgb,var(--bg) 80%,transparent); backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1); transition:background-color .45s var(--ease); } /* Sem largura máxima: a barra acompanha a tela e respira só a goteira dos lados, a mesma medida que o menu do celular usa. Antes ela parava em 1560px e ficava centralizada — em monitor largo isso empurrava o logo para dentro e a margem do desktop não batia com a do celular. */ .head__in{ max-width:none;margin:0;padding-inline:var(--gutter); height:var(--h,var(--head-h));display:flex;align-items:center;gap:24px; transition:height .45s var(--ease); } .head.is-scrolled .head__in{--h:66px} /* LOGO — um só SVG. Proporções reais: completo 2636.02/832.78 = 3.16527 · símbolo 900/832.78 = 1.08079 No scroll só a largura muda; o símbolo não sai do lugar. */ .brand{display:flex;align-items:center;flex:0 0 auto;height:40px} .brand svg{ --lh:38px;display:block;height:var(--lh);width:calc(var(--lh) * 3.16527); overflow:hidden;transition:width .55s var(--ease); } .head.is-scrolled .brand svg{width:calc(var(--lh) * 1.08079)} .brand .rays path{fill:var(--accent)} .brand .ring{fill:none;stroke:var(--accent);stroke-width:6} .brand .word path{fill:currentColor} .brand .word{opacity:1;transition:opacity .28s var(--ease)} .head.is-scrolled .brand .word{opacity:0;transition-duration:.2s} /* entrada: símbolo, depois v · h · 2 */ .brand .mark{animation:markIn .8s var(--ease) .06s both} .brand .ltr{transform-box:view-box;animation:ltrIn .7s var(--ease) both} .brand .ltr--v{animation-delay:.30s} .brand .ltr--h{animation-delay:.38s} .brand .ltr--2{animation-delay:.46s} /* só opacidade: o grupo .mark carrega um transform de posicionamento no SVG, e um transform no CSS o substituiria, deslocando o símbolo */ @keyframes markIn{from{opacity:0}to{opacity:1}} @keyframes ltrIn{from{opacity:0}to{opacity:1}} /* menu — links no desktop, hambúrguer no mobile */ .nav{display:flex;align-items:center;gap:clamp(13px,1.35vw,24px);margin-left:auto} .nav a{ position:relative;font-size:13.5px;letter-spacing:-.005em;color:var(--ink-soft); white-space:nowrap;padding:6px 0;transition:color .25s; } /* o sublinhado é só dos links; .nav__t é um gatilho (span) e o .cta é botão */ .nav a:not(.cta)::after{ content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px; background:currentColor;transition:right .35s var(--ease); } .nav a:hover{color:var(--ink)} .nav a:not(.cta):hover::after{right:0} /* Desenvolvimento com submenu */ .nav__g{position:relative} .nav__t{ position:relative; display:flex;align-items:center;gap:6px;cursor:pointer;padding:6px 0; font-size:13.5px;letter-spacing:-.005em;color:var(--ink-soft);white-space:nowrap;transition:color .25s; } .nav__t::after{ content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-1px);opacity:.6;transition:transform .3s var(--ease); } /* o sublinhado do hover vem do ::before, deixando o ::after livre para a seta */ .nav__t::before{ content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:currentColor; transition:right .35s var(--ease); } .nav__g:hover .nav__t::before,.nav__g:focus-within .nav__t::before{right:18px} .nav__g:hover .nav__t,.nav__g:focus-within .nav__t{color:var(--ink)} .nav__g:hover .nav__t::after,.nav__g:focus-within .nav__t::after{transform:rotate(225deg) translateY(-2px)} .nav__sub{ position:absolute;top:100%;left:-14px;min-width:190px;padding:10px 0; display:flex;flex-direction:column; background:var(--bg);border:1px solid var(--line);border-radius:4px; box-shadow:0 12px 30px rgba(0,0,0,.10); opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .28s var(--ease),transform .3s var(--ease),visibility .3s; } .nav__g:hover .nav__sub,.nav__g:focus-within .nav__sub{opacity:1;visibility:visible;transform:none} .nav__sub a{padding:7px 16px;font-size:14px;color:var(--ink-soft)} .nav__sub a::after{display:none} .nav__sub a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)} /* abertura de chamados: único item em formato de botão */ .nav .cta,.sheet .cta{ color:#fff;background:var(--accent);border-radius:999px; padding:9px 17px;font-weight:400;white-space:nowrap; transition:opacity .25s var(--ease),transform .3s var(--ease); } .nav .cta{margin-left:4px} .nav .cta::after{display:none} .nav .cta:hover,.sheet .cta:hover{color:#fff;opacity:.88;transform:translateY(-1px)} .sheet .cta{align-self:flex-start;margin-top:18px;font-size:1.02rem;letter-spacing:-.01em;padding:11px 22px} .burger{ display:none;width:34px;height:34px;flex:0 0 auto; align-items:center;justify-content:center;color:var(--ink-soft);transition:color .25s; } .burger:hover{color:var(--ink)} .burger i{display:block;width:18px;height:1px;background:currentColor;position:relative;transition:transform .35s var(--ease)} .burger i::before,.burger i::after{ content:"";position:absolute;left:0;width:18px;height:1px;background:currentColor; transition:transform .35s var(--ease); } .burger i::before{top:-5px} .burger i::after{top:5px} body.menu-open .burger i{transform:rotate(45deg)} body.menu-open .burger i::before{transform:translateY(5px) rotate(-90deg)} body.menu-open .burger i::after{transform:translateY(-5px) rotate(-90deg)} /* O painel já ocupava a tela inteira; o que o apertava era a goteira do site nas laterais. Aqui ele usa uma goteira própria, menor, e ganha largura útil: os itens e as divisórias se esticam junto. Só o painel do celular muda — a barra do topo continua na goteira comum. */ .sheet{ position:fixed;inset:0;z-index:55;background:var(--bg); display:flex;flex-direction:column;justify-content:flex-start;gap:0; padding:calc(var(--head-h) + 18px) var(--gutter-mob) 40px; overflow-y:auto; opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s; } body.menu-open .sheet{opacity:1;visibility:visible} .sheet a{ /* Corpo menor que o original: com 1,35rem de piso, os itens ocupavam quase toda a altura do visor e o menu parecia gritar. O .cta fica de fora — ele tem regra própria, mais específica, e continua como está. */ font-size:clamp(1.08rem,4.4vw,1.5rem);letter-spacing:-.03em;font-weight:300;line-height:1.32; opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .45s var(--ease); } /* divisórias muito discretas entre os itens de primeiro nível */ .sheet>a:not(.cta),.sheet>.sheet__g{ padding:11px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent); } .sheet>a:not(.cta):first-child{padding-top:0} body.menu-open .sheet a{opacity:1;transform:none} body.menu-open .sheet a:nth-child(2){transition-delay:.04s} body.menu-open .sheet a:nth-child(3){transition-delay:.08s} body.menu-open .sheet a:nth-child(4){transition-delay:.12s} body.menu-open .sheet a:nth-child(5){transition-delay:.16s} body.menu-open .sheet a:nth-child(6){transition-delay:.20s} body.menu-open .sheet a:nth-child(7){transition-delay:.24s} body.menu-open .sheet a:nth-child(8){transition-delay:.28s} body.menu-open .sheet a:nth-child(9){transition-delay:.32s} .sheet__g{ opacity:0;transform:translateY(10px); transition:opacity .4s var(--ease),transform .45s var(--ease); } body.menu-open .sheet__g{opacity:1;transform:none;transition-delay:.12s} .sheet__t{ display:flex;align-items:center;gap:9px;cursor:pointer; /* mesmo corpo dos itens de primeiro nível: são irmãos na hierarquia */ font-size:clamp(1.08rem,4.4vw,1.5rem);letter-spacing:-.03em;font-weight:300;line-height:1.32; } .sheet__t::after{ content:"";width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .3s var(--ease); } .sheet__g.is-sub .sheet__t::after{transform:rotate(225deg) translateY(-3px)} .sheet__sub{ display:flex;flex-direction:column;padding-left:18px; max-height:0;overflow:hidden;opacity:0; transition:max-height .42s var(--ease),opacity .3s var(--ease); } .sheet__g.is-sub .sheet__sub{max-height:180px;opacity:1} .sheet__sub a{font-size:clamp(.92rem,3.5vw,1.14rem);color:var(--ink-soft);padding:4px 0;opacity:1;transform:none} /* seletor claro / escuro — discreto, só ícone */ .theme{ margin-left:6px;width:34px;height:34px;flex:0 0 auto; display:flex;align-items:center;justify-content:center;border-radius:50%; color:var(--ink-soft);transition:color .25s,background-color .25s; } .theme:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)} .theme svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round} .theme .i-moon{display:none} :root[data-theme="dark"] .theme .i-sun{display:none} :root[data-theme="dark"] .theme .i-moon{display:block} /* ============================================================ HERO — texto à esquerda, nuvem neural à direita ============================================================ */ .hero{ max-width:var(--maxw);margin:94px auto 0;padding:clamp(30px,5vh,70px) var(--gutter) clamp(40px,7vh,90px); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center;gap:clamp(28px,4vw,72px); } .hero__text h1{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1;font-size:clamp(2.1rem,4.4vw,4rem)} .hero__text blockquote{ margin:clamp(24px,3vw,40px) 0 0;padding:0;font-weight:200;letter-spacing:-.02em;line-height:1.35; font-size:clamp(1.05rem,1.75vw,1.6rem);max-width:32ch; } .hero__text blockquote span{color:var(--accent)} .hero__net{position:relative;height:clamp(400px,64svh,640px)} #net{position:absolute;inset:0;width:100%;height:100%;display:block} .svc{position:absolute;inset:0;z-index:3} /* cada âncora da nuvem: item simples (a) ou grupo com submenu (div) */ .svc>*{position:absolute;transform:translate(-50%,-50%)} .svc__i{ display:flex;align-items:center;gap:11px;white-space:nowrap; padding:7px 15px 7px 11px;border-radius:999px; font-size:clamp(.9rem,1.1vw,1.1rem);letter-spacing:-.02em;font-weight:400; background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px); transition:color .25s; } .svc__i::before{ content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto; box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent); transition:box-shadow .35s var(--ease); } .svc>*{opacity:0;pointer-events:none;transition:opacity .4s var(--ease)} .hero__net.is-open .svc>*,.hero__net.is-preview .svc>*{opacity:1} .hero__net.is-open .svc>*{pointer-events:auto} .svc__i:hover{color:var(--accent)} .svc a:hover::before,.svc a:focus-visible::before{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 20%,transparent)} .hero__net.is-open .svc a:nth-child(2),.hero__net.is-preview .svc a:nth-child(2){transition-delay:.05s} .hero__net.is-open .svc a:nth-child(3),.hero__net.is-preview .svc a:nth-child(3){transition-delay:.10s} .hero__net.is-open .svc a:nth-child(4),.hero__net.is-preview .svc a:nth-child(4){transition-delay:.15s} .hero__net.is-open .svc a:nth-child(5),.hero__net.is-preview .svc a:nth-child(5){transition-delay:.20s} .hero__net.is-open .svc a:nth-child(6),.hero__net.is-preview .svc a:nth-child(6){transition-delay:.25s} .hero__net.is-open .svc a:nth-child(7),.hero__net.is-preview .svc a:nth-child(7){transition-delay:.30s} /* ============================================================ PÁGINAS INTERNAS — sem hero, o conteúdo precisa de folga sob o cabeçalho fixo. Usado por _modelo.html e 404.html. ============================================================ */ .page{ max-width:var(--maxw);margin:0 auto; padding:calc(var(--head-h) + clamp(50px,9vh,120px)) var(--gutter) clamp(40px,7vh,90px); } .page h1{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1;font-size:clamp(2.1rem,5vw,4.2rem);max-width:20ch} .page__lead{ margin:clamp(22px,3vw,36px) 0 0;font-weight:200;letter-spacing:-.02em;line-height:1.4; font-size:clamp(1.05rem,1.75vw,1.6rem);max-width:46ch;color:var(--ink-soft); } .page__back{ display:inline-block;margin-top:clamp(24px,3vw,40px); font-size:15px;color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:2px; } .page--404{min-height:52svh} /* páginas em desenvolvimento: mesmo sistema, centro vertical para a página curta não ficar deslocada no alto */ .page--wip{min-height:58svh;display:flex;flex-direction:column;justify-content:center} .page--wip h1{max-width:none} .page--wip .dot{color:var(--accent)} .page--wip .page__lead{max-width:34ch} /* ============================================================ CORTINA DE CÓDIGO — entrada da página de Análise de dados Translúcida: deixa entrever o conteúdo por baixo desde o começo. Sai como cortina, subindo e desaparecendo dentro do menu — o recorte começa exatamente na base do cabeçalho (--head-h), então o pano é engolido pela barra em vez de simplesmente sumir. Fica ABAIXO do cabeçalho no empilhamento (50 contra 60), o que é o que permite esse efeito, e é decorativa: aria-hidden e sem interceptar toque. ============================================================ */ .codewall{ position:fixed;left:0;right:0;bottom:0;top:var(--head-h); z-index:50;pointer-events:none;overflow:hidden; } .cw__sheet{ height:100%; display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,44px); padding:clamp(20px,3vh,44px) var(--gutter) 0; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px); animation:cwSobe 2.4s cubic-bezier(.5,.03,.3,1) 2s forwards; } .cw__col{ margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:clamp(11px,.95vw,15px);line-height:1.7; color:var(--cw-base,var(--ink-soft));white-space:pre;overflow:hidden; padding-left:5px; /* folga para a onda: sem ela o recorte cortaria o primeiro caractere no ponto extremo do balanço */ /* as 34 linhas se distribuem pela altura disponível: com line-height fixo sobravam até 350px vazios no rodapé da cortina, e é esse vazio que fazia a animação parecer defeito em vez de efeito */ height:100%;display:flex;flex-direction:column;justify-content:space-between; } /* ONDA — cada linha oscila na horizontal e a fase avança com o índice, então a oscilação viaja coluna abaixo: o pano de código ondula como tecido antes de ser recolhido. A onda mexe em transform; a cascata de entrada mexe em opacidade e o pulso em cor — três propriedades diferentes, então as animações convivem sem se anular. */ .cw__l{ display:block;opacity:0; animation:cwLine .42s ease both, cwOnda 3.6s ease-in-out infinite; } .cw__l b{font-weight:400;color:var(--accent)} /* textos entre aspas */ .cw__l em{font-style:normal;color:var(--accent)} /* palavras reservadas */ .cw__l u{text-decoration:none;color:var(--accent);opacity:.75} /* números */ .cw__l strong{font-weight:500;color:var(--ink)} /* nomes de função */ .cw__l i{font-style:normal;opacity:.45} /* comentários */ /* MOVIMENTO — duas camadas discretas enquanto a cortina está na tela: cada coluna deriva devagar na vertical, em ritmo próprio, e uma linha em cada seis pulsa para a cor da marca e volta. Nada de opacidade aqui: a entrada em cascata já usa opacidade e as duas brigariam. */ .cw__col--1{animation:cwDeriva 11s ease-in-out infinite} .cw__col--2{animation:cwDeriva 14s ease-in-out -3.5s infinite} .cw__col--3{animation:cwDeriva 12.5s ease-in-out -7s infinite} @keyframes cwDeriva{ 0%,100%{transform:translateY(0)} 50% {transform:translateY(-9px)} } .cw__l--hot{ animation:cwLine .42s ease both, cwOnda 3.6s ease-in-out infinite, cwQuente var(--p,6s) ease-in-out infinite; } @keyframes cwQuente{ 0%,100%{color:var(--cw-base,var(--ink-soft))} 45% {color:var(--accent)} } /* Dois atrasos por linha: o primeiro escalona a entrada em cascata; o segundo é NEGATIVO e defasa a onda pelo índice, fazendo-a percorrer a coluna de cima para baixo. Cada coluna ondula fora de compasso. */ .cw__col--1 .cw__l{animation-delay:calc(var(--i,0) * .014s), calc(var(--i,0) * -.085s)} .cw__col--2 .cw__l{animation-delay:calc(.16s + var(--i,0) * .014s), calc(var(--i,0) * -.085s - .7s)} .cw__col--3 .cw__l{animation-delay:calc(.32s + var(--i,0) * .014s), calc(var(--i,0) * -.085s - 1.4s)} @keyframes cwLine{from{opacity:0}to{opacity:1}} @keyframes cwOnda{ 0% {transform:translateX(-4.5px)} 50% {transform:translateX(4.5px)} 100%{transform:translateX(-4.5px)} } /* sobe além do próprio topo: o recorte do pai a apaga na base do menu */ @keyframes cwSobe{to{transform:translateY(-102%)}} /* ============================================================ CORTINA DOS ROBÔS — entrada de Agentes de IA Mesma mecânica das outras: pano translúcido que deixa entrever a página e sai para cima, engolido pela barra do menu. Aqui há três robôs trabalhando sobre uma placa de circuito. Cada um tem um ritmo próprio de flutuação, piscada e farol. Se os três batessem juntos, pareceriam uma peça só balançando — é a defasagem que os faz parecer três seres ocupados. ============================================================ */ .rbwall{ position:fixed;left:0;right:0;bottom:0;top:var(--head-h); z-index:50;pointer-events:none;overflow:hidden; } .rb__sheet{ height:100%;display:grid;place-items:center; padding:clamp(20px,3vh,44px) var(--gutter); background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px); /* menos tempo em cena: os robôs entram até 2,2s e os dados começam a correr em 2,6s, então 4,6s já mostra a cena viva sem prender ninguém */ animation:rbSobe 2.4s cubic-bezier(.5,.03,.3,1) 4.6s forwards; } .rb__art{width:100%;height:100%;display:block} .rb__art--mob{display:none} /* ---- A PLACA ---- */ .pl path,.pl circle{ fill:none;stroke:color-mix(in srgb,var(--ink) 42%,transparent); stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; } .pl__risca{stroke-dasharray:100;stroke-dashoffset:100;animation:rbRisca .8s ease-in-out var(--d,0s) both} @keyframes rbRisca{to{stroke-dashoffset:0}} /* o furo é pintado com o fundo: sem isso a trilha atravessaria o miolo */ /* O furo é pintado com o fundo — sem isso a trilha atravessaria o miolo — e acende em laranja de tempos em tempos. Duração e atraso vêm inline, um por furo, sem divisor comum entre si: assim eles nunca voltam a acender juntos e a placa parece ter vida própria em vez de piscar em bloco. */ .pl__pad{ fill:var(--bg);opacity:0; animation:rbPad .4s var(--ease) var(--d,0s) both, rbAcende var(--t,3s) ease-in-out var(--a,0s) infinite; } @keyframes rbPad{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}} @keyframes rbAcende{ 0%,100%{fill:var(--bg)} 42%,58%{fill:var(--accent)} } /* Dados correndo pelas trilhas. Nascem invisíveis: atraso não esconde nada por si só, e sem isto cada tracinho ficaria parado e visível sobre a trilha desde o primeiro quadro. */ .pl__dado{ stroke:var(--accent)!important;stroke-width:3.2!important;stroke-linecap:round; stroke-dasharray:7 93;stroke-dashoffset:100;opacity:0; animation:rbDado 2.4s linear var(--p,0s) infinite, rbLiga .01s linear var(--p,0s) forwards; } @keyframes rbDado{to{stroke-dashoffset:0}} @keyframes rbLiga{to{opacity:1}} /* ---- OS ROBÔS ---- */ .rb path,.rb circle{ fill:none;stroke:var(--accent);stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round; } .rb__cheio{fill:var(--accent);stroke:none} .rb{ transform-box:fill-box;transform-origin:50% 100%; opacity:0;animation:rbEntra .6s cubic-bezier(.2,.8,.3,1.25) var(--d,0s) both; } @keyframes rbEntra{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}} /* flutuação: três amplitudes e três períodos, para não baterem juntos */ .rb__flutua{transform-box:fill-box;animation:rbBoia 3.4s ease-in-out infinite} .rb__flutua--alto{animation-duration:2.8s;animation-delay:-.7s} .rb__flutua--baixo{animation-duration:4.1s;animation-delay:-1.4s} @keyframes rbBoia{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .rb__cabeca{transform-box:fill-box;transform-origin:50% 90%;animation:rbCabeca 5.2s ease-in-out infinite} @keyframes rbCabeca{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg)}65%{transform:rotate(3deg)}} /* piscada: pausa longa e fechamento curto, como o olho de verdade */ .rb__olhos{transform-box:fill-box;transform-origin:center;animation:rbPisca 4.6s linear infinite} @keyframes rbPisca{0%,94%{transform:scaleY(1)}96%{transform:scaleY(.1)}98%,100%{transform:scaleY(1)}} /* A luz da antena pisca ENCOLHENDO, não desbotando. Baixar a opacidade sobre um pano claro faz o ponto tender ao branco, e a piscada saía esbranquiçada em vez de laranja. Mudando o tamanho, a cor fica cheia o tempo todo e o que varia é a presença. */ /* A LUPA pende da mão e balança sozinha, num período diferente do braço. Dois giros encaixados — ombro e punho — é o que dá o movimento de quem examina; com um só, o conjunto se move como um guindaste. */ .rb__lupa{transform-box:fill-box;animation:rbLupa 2.2s ease-in-out infinite} @keyframes rbLupa{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}} .rb__farol{ fill:var(--accent);stroke:none; transform-box:fill-box;transform-origin:center; animation:rbFarol 1.6s ease-in-out infinite; } .rb__farol--b{animation-delay:-.8s} @keyframes rbFarol{ 0%,100%{transform:scale(1);opacity:1} 50% {transform:scale(.5);opacity:.92} } /* BRAÇOS — todos se mexem. O eixo de giro vem inline em cada traço, em porcentagem da própria caixa, porque é sempre o ombro: à esquerda o canto direito do traço, à direita o esquerdo. Fixar um eixo único aqui faria uns girarem pelo cotovelo e outros descolarem do corpo. A duração também é inline: o operador digita rápido, o carregador balança os braços ao andar e o inspetor move a lupa devagar. */ .rb__braco{transform-box:fill-box;animation-name:rbBraco;animation-timing-function:ease-in-out;animation-iteration-count:infinite} @keyframes rbBraco{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}} /* CÓDIGO PISCANDO — registros de execução acendendo pela placa. Ficam em dentro do SVG, então acompanham a escala do desenho sozinhos. O ciclo é longo e os atrasos bem espaçados: se dois acendessem juntos, o olho leria como um bloco de texto em vez de eventos soltos. */ .rb__cod text{ /* laranja bem diluído: é textura de fundo, não informação a ser lida. Forte demais, os trechos competiam com os robôs. */ fill:color-mix(in srgb,var(--accent) 46%,transparent); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:-.01em;opacity:0; /* Ciclo curto com muitos trechos: cada um fica pouco mais de um segundo em cena, e os atrasos espaçados fazem sempre haver dois ou três acesos em pontos diferentes. É a troca constante que dá a sensação de atividade — um ciclo longo com poucos trechos parecia legenda. */ animation:rbCodigo 6s ease-in-out var(--c,0s) infinite; } @keyframes rbCodigo{ 0% {opacity:0} 8% {opacity:1} 22% {opacity:1} 32%,100%{opacity:0} } @keyframes rbSobe{to{transform:translateY(-102%)}} @media (min-width:1181px){ /* margem menor no pano e uma folga embaixo: com place-items:center, essa folga inferior é o que empurra a cena para cima sem tirá-la do eixo */ .rb__sheet{padding:clamp(14px,2vh,28px) clamp(16px,2.6vw,44px)} .rb__art--desk{margin-bottom:clamp(20px,5vh,64px)} } @media (max-width:1180px){ .rb__art--desk{display:none} .rb__art--mob{display:block} /* No retrato o pano cede quase toda a margem para a cena. A goteira do site serve ao texto, que precisa de respiro para ser lido; um desenho não precisa, e cada pixel devolvido aqui vira tamanho de figura. */ .rb__sheet{padding:clamp(10px,1.6vh,22px) clamp(8px,2.2vw,18px)} } /* ============================================================ CORTINA DO FLUXO — entrada de Automações Mesma mecânica das outras: pano translúcido que deixa entrever a página e sai para cima, engolido pela barra do menu. Muda o que está desenhado nele — um fluxo de automação que se monta e depois passa a rodar. A execução é sugerida por um tracinho que corre por dentro de cada ligação, em laço. É a leitura mais direta de "está acontecendo": movimento ao longo do caminho, e não piscar. ============================================================ */ .flwall{ position:fixed;left:0;right:0;bottom:0;top:var(--head-h); z-index:50;pointer-events:none;overflow:hidden; } .fl__sheet{ height:100%;display:grid;place-items:center; padding:clamp(20px,3vh,44px) var(--gutter); background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px); /* o encadeamento leva 4,3s até o último nó; os tracinhos correm por mais dois ciclos antes de o pano subir */ animation:flSobe 2.4s cubic-bezier(.5,.03,.3,1) 7.2s forwards; } .fl__art{width:100%;height:100%;display:block} .fl__art--mob{display:none} /* ---- LIGAÇÕES ---- */ .fl__elo{ fill:none;stroke:color-mix(in srgb,var(--accent) 45%,transparent); stroke-width:2.4;stroke-linecap:round; } .fl__risca{stroke-dasharray:100;stroke-dashoffset:100;animation:flRisca .7s ease-in-out var(--d,0s) both} @keyframes flRisca{to{stroke-dashoffset:0}} /* O tracinho que corre: um traço curto num tracejado longo, deslizando pelo caminho. Com pathLength="100" em todas as ligações, ele leva o mesmo tempo em qualquer uma — o comprimento real deixa de importar. */ .fl__pulso{ fill:none;stroke:var(--accent);stroke-width:3.4;stroke-linecap:round; stroke-dasharray:7 93;stroke-dashoffset:100; /* Invisível até a hora de correr. Sem isto, o atraso da animação deixava cada tracinho PARADO e visível sobre a curva desde o primeiro quadro — eram esses os pontinhos que apareciam esperando ser ligados. Um atraso não esconde nada por si só: o elemento continua sendo desenhado no estado que o CSS estático definiu. Daí a segunda animação, que serve só para acender no instante certo. */ opacity:0; animation:flPulso 2.6s linear var(--p,0s) infinite, flLiga .01s linear var(--p,0s) forwards; } @keyframes flPulso{to{stroke-dashoffset:0}} @keyframes flLiga{to{opacity:1}} /* ---- NÓS ---- */ .fl__no{ transform-box:fill-box;transform-origin:center; opacity:0;animation:flNo .55s cubic-bezier(.2,.8,.3,1.25) var(--d,0s) both; } @keyframes flNo{from{opacity:0;transform:scale(.78)}to{opacity:1;transform:none}} /* a caixa é pintada com o fundo da página: sem isso as ligações apareceriam atravessando o miolo dos nós */ .fl__caixa{fill:var(--bg);stroke:var(--ink-soft);stroke-width:2.2} .fl__icone path,.fl__icone circle,.fl__icone ellipse{ fill:none;stroke:var(--accent);stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round; } @keyframes flSobe{to{transform:translateY(-102%)}} @media (min-width:1181px){ /* Sobe a cena. Com place-items:center, uma folga na base é o que empurra o conteúdo para cima sem tirá-lo do eixo — mesmo recurso usado na cortina dos robôs. Só desktop: no retrato a composição já cabe. */ /* folga bem maior que a anterior: a cena precisa subir até acima da linha onde o título da página aparece por baixo do pano */ .fl__art--desk{margin-bottom:clamp(110px,20vh,260px)} } @media (max-width:1180px){ .fl__art--desk{display:none} .fl__art--mob{display:block} } /* ============================================================ CORTINA DO APLICATIVO — entrada de Aplicativos Mesma mecânica da cortina de código: pano translúcido que deixa entrever a página e sai para cima, engolido pela barra do menu. Muda o que está sobre ele — à esquerda a frase, à direita um aplicativo se desenhando na tela de um celular. Duas colunas no desktop, empilhadas no celular com a frase primeiro: é ela que carrega a mensagem, o desenho ilustra. ============================================================ */ .apwall{ position:fixed;left:0;right:0;bottom:0;top:var(--head-h); z-index:50;pointer-events:none;overflow:hidden; } .apw__sheet{ height:100%; display:grid; /* Colunas do tamanho do conteúdo, e o par centralizado na tela. Com frações, cada coluna ficava com metade da largura e o texto — que tem largura máxima própria — terminava muito antes do aparelho, abrindo um vão enorme no meio. Assim os dois andam juntos e a sobra vai para as bordas, onde não incomoda. */ grid-template-columns:auto auto; justify-content:center; gap:clamp(28px,4.5vw,88px);align-items:center; padding:clamp(20px,3vh,44px) var(--gutter); background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px); /* Espera folgada antes de recolher: com o botão no pano, o tempo precisa dar para ler a frase e alcançar o clique. O pano é translúcido e não intercepta o ponteiro, então quem quiser ir direto ao conteúdo já pode rolar e clicar por baixo desde o primeiro instante. */ animation:apwSobe 2.4s cubic-bezier(.5,.03,.3,1) 6.6s forwards; } /* ---- FRASE ---- */ /* o bloco de texto sobe até a linha do topo do aparelho: a coluna do desenho ocupa a altura toda, então alinhar ao início da faixa põe os dois na mesma altura em vez de deixar a frase boiando no meio */ .apw__texto{align-self:start} .apw__frase{ margin:0;font-weight:500;letter-spacing:-.035em;line-height:1.1; font-size:clamp(1.9rem,4.2vw,3.5rem); color:var(--ink);max-width:13ch; } /* Só o recebe a cor da marca. Antes o seletor era .apw__frase span, que pegava também os spans das duas linhas — e a frase inteira saía laranja. */ .apw__frase b{color:var(--accent);font-weight:inherit} /* sobe em duas partes: a afirmação e o que ela promete */ .apw__l1,.apw__l2{display:block;opacity:0;transform:translateY(14px)} .apw__l1{animation:apwEntra .8s var(--ease) .25s forwards} .apw__l2{animation:apwEntra .8s var(--ease) .75s forwards} @keyframes apwEntra{to{opacity:1;transform:none}} /* ---- O APLICATIVO ---- */ .apw__art{ width:100%;height:auto;max-height:100%;display:block; justify-self:center;max-width:min(320px,34vw); /* Depois que a interface termina de se montar, o aparelho passa a boiar de leve. Um desenho parado ao lado de um texto parado deixa a cortina com cara de imagem estática; o movimento mínimo mantém a cena viva sem pedir atenção. Começa aos 2,9s, quando a última figura já foi riscada. */ animation:apwBoia 4.2s ease-in-out 2.9s infinite; } @keyframes apwBoia{ 0%,100%{transform:translateY(0)} 50% {transform:translateY(-9px)} } .apw__art path,.apw__art circle,.apw__art rect{ fill:none;stroke:var(--accent);stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round; } /* o aparelho é o suporte; quem conduz é o que aparece na tela */ .apw__cel path{stroke:var(--ink-soft);stroke-width:3} /* pathLength="1" iguala o tempo de figuras de tamanhos muito diferentes, sem precisar medir nada em JavaScript */ .apw__risca{stroke-dasharray:1;stroke-dashoffset:1;animation:apwRisca .55s ease var(--d,0s) both} @keyframes apwRisca{to{stroke-dashoffset:0}} /* os blocos cheios não se riscam: entram crescendo do próprio centro */ .apw__pop{opacity:0;transform-box:fill-box;transform-origin:center; animation:apwPop .5s cubic-bezier(.2,.8,.3,1.2) var(--d,0s) both} @keyframes apwPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}} /* ---- BOTÃO PARA O WHATSAPP ---- O pano tem pointer-events:none para não bloquear a página por baixo. Este é o único elemento que reativa o ponteiro — sem isso o clique atravessaria e o botão seria decoração. Branco com borda na cor da marca: sobre um pano translúcido, um botão preenchido de laranja competiria com o destaque da frase. Vazado chama sem gritar, e ganha o preenchimento só no toque. A pulsação é um anel que nasce na borda e se dissolve para fora. Escala e sombra não mexem no fluxo da página, então o efeito não custa recálculo de layout a cada quadro. */ .apw__btn{ pointer-events:auto; display:inline-block;align-self:start; margin-top:clamp(20px,3.4vh,44px); padding:14px 34px;border-radius:999px; background:#fff;border:1.5px solid var(--accent);color:var(--accent); font-size:clamp(1rem,1.3vw,1.12rem);letter-spacing:-.01em;line-height:1; opacity:0;transform:translateY(12px); animation:apwBtnEntra .7s var(--ease) 2.9s forwards, apwPulsa 2.6s ease-out 3.7s infinite; transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease); } .apw__btn:hover,.apw__btn:focus-visible{ background:var(--accent);color:#fff;transform:translateY(-2px); } @keyframes apwBtnEntra{to{opacity:1;transform:none}} @keyframes apwPulsa{ 0% {box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent)} 70% {box-shadow:0 0 0 14px color-mix(in srgb,var(--accent) 0%,transparent)} 100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)} } @keyframes apwSobe{to{transform:translateY(-102%)}} @media (max-width:1180px){ .apw__sheet{ grid-template-columns:1fr;justify-content:stretch; /* alinhado ao topo, e não ao centro: assim o aparelho começa alto e sobra espaço embaixo para o texto e o botão respirarem */ align-content:start; gap:clamp(30px,5.5vh,64px); padding:clamp(20px,4vh,44px) var(--gutter) clamp(16px,2.5vh,32px); } .apw__frase{max-width:none;font-size:clamp(1.6rem,7vw,2.4rem)} /* o aparelho passa para cima e o texto para baixo; a ordem no documento continua sendo texto primeiro, que é como se lê sem folha de estilo */ .apw__art{max-width:min(190px,46%);margin-inline:auto;order:-1} .apw__texto{align-self:start} /* o botão sai do canto e vai para o meio da coluna. align-self não serve aqui: o bloco de texto é fluxo comum, não flex — quem centraliza é a margem automática dos dois lados, e para isso ele precisa ter a largura do próprio conteúdo. */ .apw__btn{ display:block;width:fit-content; margin:clamp(28px,4.5vh,52px) auto 0; padding:13px 32px; } } /* ============================================================ CORTINA DE DESENHO — entrada de Sites e landing pages Mesma mecânica da cortina de código: pano translúcido que deixa entrever a página e sai para cima, engolido pela barra do menu. Muda o que está desenhado nele — aqui um site nascendo como rascunho: a caixa do logo, o menu em traços soltos, o banner e o conteúdo em linhas irregulares. O traço é riscado por stroke-dashoffset. Cada figura declara pathLength="1" no SVG, o que normaliza o comprimento: um retângulo grande e um tracinho de menu levam o mesmo tempo para serem riscados, sem precisar medir nada em JavaScript. ============================================================ */ .drawwall{ position:fixed;left:0;right:0;bottom:0;top:var(--head-h); z-index:50;pointer-events:none;overflow:hidden; } .dw__sheet{ height:100%;position:relative; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px); animation:dwSobe 2.2s cubic-bezier(.5,.03,.3,1) 2.4s forwards; } /* O desenho ocupa toda a área da cortina e cresce até o maior tamanho que cabe inteiro. É "meet", não "slice": preencher sem sobra exigiria cortar, e o que sobrava para cortar era justamente o topo do rascunho — o logo decapitado e as caixas truncadas. Sem largura máxima aqui: era ela, e não o encaixe, que deixava margem sobrando no monitor grande. */ .dw__art{position:absolute;inset:0;width:100%;height:100%;display:block} .dw__art path{ fill:none;stroke:var(--ink-soft); stroke-linecap:round;stroke-linejoin:round; } /* NADA de vector-effect:non-scaling-stroke aqui. Ele move o traço para o espaço da tela enquanto o tracejado que risca as figuras (dasharray com pathLength) continua contando no espaço do desenho — os dois deixam de falar a mesma língua e o risco para no meio, deixando as caixas abertas. O erro cresce com a escala, por isso só o desktop quebrava: no celular a ampliação fica perto de 1 e o desencontro não aparece. A espessura é acertada à mão em cada rascunho, compensando a escala típica de cada um. */ .dw__art--desk path{stroke-width:2} .dw__art--mob path{stroke-width:2.6} /* as caixas — logo, banner e as três do conteúdo — na cor da marca; menu, divisória e linhas de texto ficam no tom suave */ .dw__art .dw__caixa{stroke:var(--accent)} /* dois rascunhos: um site de desktop e um de celular. Trocar o desenho é mais honesto que encolher o de desktop — no visor estreito ele viraria uma tira ilegível no meio da tela. */ .dw__art--mob{display:none} .dw__risca{stroke-dasharray:1;stroke-dashoffset:1;animation:dwRisca .5s ease var(--d,0s) forwards} @keyframes dwRisca{to{stroke-dashoffset:0}} .dw__rot{ fill:var(--ink);stroke:none;font-family:var(--font);font-weight:400; letter-spacing:-.02em;text-anchor:middle;opacity:0; transform-box:fill-box;transform-origin:center; animation:dwRot .45s var(--ease) var(--d,0s) forwards; } @keyframes dwRot{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} /* FERVURA — o tremor de linha do desenho animado feito à mão. Em degraus, nunca suave: a graça está no salto entre quadros, não na interpolação. */ .dw__ferve{animation:dwFerve .34s steps(1,end) .6s infinite} @keyframes dwFerve{ 0% {transform:translate(0,0)} 33% {transform:translate(1.2px,-1px)} 66% {transform:translate(-1px,1.2px)} } /* sobe além do próprio topo: o recorte do pai a apaga na base do menu */ @keyframes dwSobe{to{transform:translateY(-102%)}} /* ============================================================ PÁGINA DE SERVIÇO — abertura + seções numeradas com corpo longo Mesma gramática do bloco 01/02/03 da home: número, título e filete. A diferença é o corpo, que aqui admite parágrafos e listas. Namespace .doc para não colidir com .content/.row. ============================================================ */ .doc{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} .doc__open{ padding:calc(var(--head-h) + var(--vao)) 0 clamp(40px,6vh,80px); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:clamp(24px,4vw,64px);align-items:center; } .doc__open>div:first-child{min-width:0} /* abertura sem ilustração: uma coluna só, para não sobrar um vazio à direita */ .doc__open--solo{grid-template-columns:1fr} /* ------------------------------------------------------------ EMPURRANDO — desktop da Gestão e-commerce. Mesma mecânica das Lojas virtuais: o carrinho não sai do lugar, as rodas giram e o substrato corre para a esquerda, porque ele avança para a direita. O personagem empurra pela alça, alterna as pernas e, de tempo em tempo, vira o rosto para o usuário. No mobile esta cena some: lá continua o carrinho perseguido. ------------------------------------------------------------ */ .empurra{width:100%;height:auto;display:block;overflow:visible} .empurra path,.empurra circle,.empurra ellipse{ fill:none;stroke:var(--accent);stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round; } .empurra .pl__olho{fill:var(--accent);stroke:none} .empurra .ge__chao{ stroke-width:1.8; /* o chão corre e, depois que ele sai, se apaga — senão restaria uma linha deslizando sozinha na tela */ animation:plChao 3.2s linear infinite, geChaoSai .9s ease 7.6s forwards; } @keyframes geChaoSai{to{opacity:0}} .ge__roda{transform-box:fill-box;transform-origin:center;animation:plRoda .7s linear infinite} /* UM balanço só, para carrinho, personagem e carga: com dois ritmos diferentes as mãos se soltavam da alça durante o movimento */ .ge__balanco{transform-box:fill-box;transform-origin:center;animation:geBalanco .62s ease-in-out infinite} /* SAÍDA DE CENA — depois que o último pacote pousa (4,10s), ele empurra o carrinho para fora pela direita. Grupo próprio: o balanço já usa o transform do grupo de dentro. */ .ge__saida{ transform-box:fill-box;transform-origin:center; animation:geSai 3.2s cubic-bezier(.36,0,.62,1) 4.6s forwards; } @keyframes geSai{ 0% {transform:translateX(0);opacity:1} /* segue firme enquanto há chão sob os pés */ 62% {transform:translateX(190px);opacity:1} /* dissolve junto com o fim do traço, em vez de continuar sobre o nada */ 100%{transform:translateX(320px);opacity:0} } /* só a cabeça tem vida própria — está longe das mãos, então não desencaixa nada */ .ge__cabeca{transform-box:fill-box;transform-origin:center;animation:manoPula .34s ease-in-out infinite} .ge__passo--a{animation:passoA .34s steps(1,end) infinite} .ge__passo--b{animation:passoB .34s steps(1,end) infinite} /* CARGA — cai de cima e empilha em pirâmide dentro do cesto. Vive dentro do mesmo grupo que balança, então acompanha o carrinho depois de pousar. Silhueta cheia: vazada, se confundia com as listras do cesto. */ .pacotes .pk__cx,.empurra .pk__cx{fill:var(--accent);stroke:none} .pacotes .pk__fita,.empurra .pk__fita{fill:none;stroke:var(--bg);stroke-width:2;stroke-linecap:round} .pk{ transform-box:fill-box;transform-origin:center; animation:pkCai 1.15s cubic-bezier(.45,0,.75,1) both; } .pk1{animation-delay:.7s} .pk2{animation-delay:1.15s} .pk3{animation-delay:1.6s} .pk4{animation-delay:2.05s} .pk5{animation-delay:2.5s} .pk6{animation-delay:2.95s} /* cai acelerando, bate no fundo e dá um pulinho */ @keyframes geBalanco{ 0%,100%{transform:translateY(0) rotate(0deg)} 50% {transform:translateY(-1.6px) rotate(.3deg)} } @keyframes pkCai{ 0% {opacity:0;transform:translateY(-320px) rotate(var(--r,-10deg))} 8% {opacity:1} 72% {transform:translateY(0) rotate(0deg); animation-timing-function:ease-out} 84% {transform:translateY(-7px) rotate(-2deg)} 93% {transform:translateY(0) rotate(0deg)} 97% {transform:translateY(-2px)} 100%{transform:translateY(0) rotate(0deg)} } /* o carrinho antigo e o trilho pertencem ao mobile */ .cart,.trilho,.mano{display:none} .doc__art{position:relative} .cart *:not(.chao){ fill:none;stroke:var(--accent);stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:1; animation:cartDraw 1.15s ease .35s both; } .cart .chao{display:none} .cart__dot{ fill:var(--accent);stroke:none;stroke-dasharray:none; transform-box:fill-box;transform-origin:center; animation:dotIn .5s cubic-bezier(.2,1.3,.4,1) both; } @keyframes cartDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes dotIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}} /* animações da cena do mobile (carrinho perseguido) */ @keyframes artFim{to{visibility:hidden}} @keyframes cartTrip{ from{transform:translateX(-110px)} to {transform:translateX(calc(100vw + 20px))} } @keyframes manoTrip{ from{transform:translateX(-90px)} to {transform:translateX(calc(100vw + 40px))} } @keyframes trilhoRisca{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes trilhoSai{from{opacity:1}to{opacity:0}} @keyframes manoPula{ 0%,100%{transform:translateY(0)} 50% {transform:translateY(-1.6px)} } @keyframes passoA{0%,49.9%{opacity:1}50%,100%{opacity:0}} @keyframes passoB{0%,49.9%{opacity:0}50%,100%{opacity:1}} @keyframes cartRollOn{from{transform:rotate(0)}to{transform:rotate(8000deg)}} .doc__eyebrow{ margin:0 0 22px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-soft);display:flex;align-items:center;gap:10px; } .doc__eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)} .doc__open h1{ margin:0;font-weight:500;letter-spacing:-.038em;line-height:.98; font-size:clamp(2.3rem,6.2vw,5rem);max-width:18ch; } /* o
do título é intencional: define onde a linha quebra */ .doc__open h1 br{display:inline} /* título em uma linha só: nowrap garante que nunca quebre, e o corpo reduzido dá cerca de 20% de folga na coluna, mesmo na tela mais estreita */ .doc__open .doc__h1-uma{ white-space:nowrap;max-width:none; font-size:clamp(2.1rem,5.6vw,4.6rem); } .doc__sub{ margin:clamp(18px,2.4vw,30px) 0 0;font-weight:300;letter-spacing:-.025em;line-height:1.25; font-size:clamp(1.15rem,2.4vw,2.05rem);max-width:30ch;color:var(--accent); } .doc__intro{margin:clamp(30px,4.5vw,54px) 0 0;max-width:62ch;display:flex;flex-direction:column;gap:1.1em} .doc__intro p{ margin:0;font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.62;letter-spacing:-.008em; color:var(--ink-soft); } .doc__intro p:first-child{color:var(--ink);font-size:clamp(1.05rem,1.4vw,1.28rem)} /* ABERTURA EM LARGURA TOTAL (Análise de dados) Mesma estrutura empilhada do resto do site — título, subtítulo e os três parágrafos, um sob o outro. A única diferença é a ausência de limite de largura, para o texto ocupar a página de ponta a ponta. Precisa vir DEPOIS das regras base: os seletores têm a mesma especificidade, então quem decide é a ordem. */ .doc__open--wide{display:block} .doc__open--wide h1{max-width:none} .doc__intro--wide{max-width:none} /* seções numeradas */ .doc__block{ display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr); gap:clamp(20px,4vw,64px);align-items:start; padding:clamp(44px,6vw,86px) 0;border-top:1px solid var(--line); } /* sem filete no último bloco: o rodapé já traz o seu, e os dois juntos viravam uma linha dupla quando a página termina no conteúdo */ .doc__block:last-of-type{padding-bottom:clamp(56px,8vw,110px)} /* já quando existe uma frase de fechamento, ela precisa da separação */ .doc+.claim{border-top:1px solid var(--line)} .doc__label{position:sticky;top:calc(var(--head-h) + 24px)} .doc__n{ font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:500;letter-spacing:-.04em;line-height:1; color:var(--accent);margin-bottom:12px; } .doc__t{ margin:0;font-size:clamp(1.35rem,2.5vw,2.1rem);font-weight:500; letter-spacing:-.035em;line-height:1.06; } .doc__body{display:flex;flex-direction:column;gap:1.15em} .doc__body p{margin:0;font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.62;letter-spacing:-.008em} .doc__body ul{margin:0;padding:0;list-style:none;display:grid;gap:9px} .doc__body li{ position:relative;padding-left:20px; font-size:clamp(.96rem,1.12vw,1.06rem);line-height:1.5;letter-spacing:-.008em; color:var(--ink-soft); } .doc__body li::before{ content:"";position:absolute;left:0;top:.62em; width:6px;height:6px;border-radius:50%;background:var(--accent); } /* listas de duas colunas quando são longas */ .doc__body ul.is-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px clamp(20px,3vw,44px)} /* Variante que preenche COLUNA a coluna: desce a da esquerda, depois a da direita. Serve quando a lista tem pontuação encadeada — com ponto e vírgula nos itens e ponto no último, a ordem do documento precisa ser a mesma que o olho segue, senão o item que fecha a frase não é o que fecha a lista. As linhas são fixadas para o navegador saber onde quebrar. */ .doc__body ul.is-col{grid-auto-flow:column;grid-template-rows:repeat(4,auto)} /* ------------------------------------------------------------ VITRINE — ilustração da página Lojas virtuais. Mesma gramática do carrinho: traço curvo, cantos que passam do ponto, produtos abstraídos em pontos laranja. Desenha-se sozinha e o símbolo sobe da loja, atravessando o menu. Só no desktop: no mobile a coluna sai. ------------------------------------------------------------ */ /* ------------------------------------------------------------ PILOTO — o cliente no comando. É o perseguidor da Gestão e-commerce sentado num banco de carro, com o volante na mão, voltado para a direita, que é o lado para onde o carrinho segue. De tempo em tempo ele vira a cabeça para o usuário, entusiasmado. O carrinho não sai do lugar: as rodas giram e o conjunto balança. ------------------------------------------------------------ */ .piloto{width:100%;height:auto;display:block;overflow:hidden} /* path/circle/ellipse, e não `*`: o dentro do precisa manter o fill de degradê que vem do atributo. Com `*`, o fill:none zerava a máscara e o substrato sumia. */ .piloto path,.piloto circle,.piloto ellipse{ fill:none;stroke:var(--accent);stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round; } .piloto .pl__olho,.piloto .pl__cubo,.piloto .cart__dot{fill:var(--accent);stroke:none} .piloto .pl__aro{stroke-width:2.8} .piloto .pl__chao{ stroke-width:1.8; /* desloca exatamente um período (60): o laço não tem emenda visível */ animation:plChao 3.2s linear infinite; } .piloto .pl__cabeca *{stroke-width:2} /* traço do rosto, na escala da cabeça */ /* rodas girando sem parar */ .pl__roda{transform-box:fill-box;transform-origin:center;animation:plRoda .7s linear infinite} /* o conjunto sobe e desce, como quem passa por buracos */ .pl__balanco{transform-box:fill-box;transform-origin:center;animation:plBalanco .62s ease-in-out infinite} /* a cabeça acompanha o balanço com um leve atraso */ .pl__cabeca{transform-box:fill-box;transform-origin:center;animation:plCabeca .62s ease-in-out .08s infinite} /* o volante corrige o rumo devagar */ .pl__volante{transform-box:fill-box;transform-origin:center;animation:plVolante 2.8s ease-in-out infinite} /* OLHAR: quase todo o tempo para a frente; por um instante, para o usuário. As duas cabeças se alternam por opacidade, em degraus — é a troca seca de quadro do desenho animado, não um esmaecer. */ .pl__perfil{animation:plOlharF 6s steps(1,end) infinite} .pl__frente{animation:plOlharU 6s steps(1,end) infinite} @keyframes plOlharF{0%,66%{opacity:1} 67%,92%{opacity:0} 93%,100%{opacity:1}} @keyframes plOlharU{0%,66%{opacity:0} 67%,92%{opacity:1} 93%,100%{opacity:0}} @keyframes plChao{from{transform:translateX(0)}to{transform:translateX(-60px)}} @keyframes plRoda{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes plBalanco{ 0%,100%{transform:translateY(0) rotate(0deg)} 50% {transform:translateY(-2.2px) rotate(.5deg)} } @keyframes plCabeca{ 0%,100%{transform:translateY(0)} 50% {transform:translateY(-1.4px)} } @keyframes plVolante{ 0%,100%{transform:rotate(-7deg)} 50% {transform:rotate(7deg)} } /* ============================================================ SUPORTE — o sistema de chamados embutido, em largura total. Sem moldura: o sistema traz o próprio enquadramento, e a borda criava uma caixa dentro de outra. A altura quem resolve é o site.js, medindo o conteúdo por dentro. ============================================================ */ /* Sem título nem respiro: o sistema encosta na base do cabeçalho. O recuo de cima é só a altura do menu, que é fixo e ficaria por cima do quadro. */ .sup{padding:var(--head-h) 0 clamp(40px,6vh,80px)} /* De ponta a ponta, sem largura máxima e sem goteira: o sistema sangra até as bordas da tela, como aparece fora do site. O recuo lateral é zerado também por dentro do quadro, no site.js — bastava um dos dois ter sobrado para o sistema nascer mais estreito que o resto. */ .sup__caixa{width:100%} .sup__frame{ display:block;width:100%;border:0; height:760px; /* só até a primeira medição */ /* Invisível até o site.js terminar de vestir o conteúdo. O WordPress desenha primeiro com o contêiner centralizado do tema e só depois é reposicionado — sem isto, o salto acontece na frente do usuário. O site.js revela de qualquer jeito depois de 2,5s, então uma falha na injeção não deixa o quadro invisível para sempre. */ opacity:0;transition:opacity .28s var(--ease); } .sup__frame.is-pronto{opacity:1} /* parágrafo de fechamento em ênfase — no material de origem ele vinha destacado numa caixa; aqui o filete na cor da marca cumpre o papel sem quebrar o ritmo da página */ /* data de atualização: mesma família do texto de apoio, um degrau abaixo — é informação de referência, não parte do argumento da página */ .doc__data{ font-size:clamp(.9rem,1vw,.98rem); color:var(--ink-soft);opacity:.85; margin-top:.4em; } .doc__nota{ padding-left:clamp(14px,1.4vw,22px); border-left:1px solid var(--accent); color:var(--ink); } /* ============================================================ CONTENT — 01 / 02 / 03 ============================================================ */ .content{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} .row{ display:grid;grid-template-columns:.55fr 1.45fr 2fr;gap:clamp(20px,4vw,60px);align-items:center; padding:clamp(56px,8vw,120px) 0;border-top:1px solid var(--line); } .content .row:last-child{border-bottom:1px solid var(--line)} .row__n{font-size:clamp(2rem,3.4vw,2.9rem);font-weight:500;letter-spacing:-.04em;line-height:1;transition:color .3s} .row:hover .row__n{color:var(--accent)} .row__t{margin:0;font-size:clamp(1.5rem,3vw,2.6rem);font-weight:500;letter-spacing:-.035em;line-height:1.02} .row__d{margin:0;font-size:clamp(1rem,1.35vw,1.28rem);line-height:1.5;letter-spacing:-.01em} /* ============================================================ CLAIM ============================================================ */ .claim{max-width:var(--maxw);margin:0 auto;padding:clamp(110px,17vh,230px) var(--gutter)} .claim p{ margin:0 auto;text-align:center;font-weight:500;letter-spacing:-.035em;line-height:1.05; font-size:clamp(2rem,5.6vw,4.6rem);max-width:24ch; } /* ============================================================ FOOTER — segue o tema: branco com conteúdo preto no claro ============================================================ */ .foot{border-top:1px solid var(--line);padding-top:clamp(70px,10vh,130px);overflow:hidden} .foot__grid{ max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter); display:grid;grid-template-columns:1.15fr .95fr .6fr;gap:clamp(34px,5vw,60px); } .foot__nav{display:flex;flex-direction:column;gap:2px} .foot__nav a{ font-size:clamp(1.15rem,2.1vw,1.85rem);letter-spacing:-.03em;font-weight:300;line-height:1.3; width:fit-content;transition:color .25s,transform .35s var(--ease); } .foot__nav a:hover{color:var(--accent);transform:translateX(6px)} /* logo no lugar de "Página inicial": leva ao topo e abre a lista */ .foot__brand{margin:0 0 clamp(20px,2.6vw,34px)} .foot__brand:hover{transform:none} .foot__brand svg{display:block;height:38px;width:auto} .foot__brand .rays path{fill:var(--accent)} .foot__brand .ring{fill:none;stroke:var(--accent);stroke-width:6} .foot__brand .word path{fill:currentColor;transition:fill .25s} .foot__brand:hover .word path{fill:var(--accent)} .foot__t{ display:flex;align-items:center;gap:9px;cursor:pointer;width:fit-content; font-size:clamp(1.15rem,2.1vw,1.85rem);letter-spacing:-.03em;font-weight:300;line-height:1.3; transition:color .25s; } .foot__t:hover{color:var(--accent)} .foot__t::after{ content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .3s var(--ease); } .foot__g.is-sub .foot__t::after{transform:rotate(225deg) translateY(-3px)} /* fechado por padrão; abre no clique */ .foot__sub{ display:flex;flex-direction:column;padding-left:20px;border-left:1px solid var(--line); max-height:0;overflow:hidden;opacity:0;margin:0; transition:max-height .42s var(--ease),opacity .3s var(--ease),margin .42s var(--ease); } .foot__g.is-sub .foot__sub{max-height:180px;opacity:1;margin:6px 0 8px} .foot__sub a{font-size:clamp(.95rem,1.4vw,1.15rem);color:var(--ink-soft)} .foot__sub a:hover{color:var(--accent)} .foot h3{margin:0 0 13px;font-size:17px;font-weight:400;letter-spacing:-.012em} .foot__col p,.foot__col a{font-size:13.5px;line-height:1.62;color:var(--ink-soft);margin:0} .foot__col a{display:block;transition:color .25s} /* e-mail, telefone e abertura de chamados: laranja ao passar o mouse */ .foot__col a:hover{color:var(--accent)} .foot__block+.foot__block{margin-top:clamp(38px,6vh,74px)} /* redes sociais: dois ícones a traço, lado a lado, sem moldura. Sem o círculo o ícone pode crescer e ainda ocupar a mesma altura. */ .foot__social{display:flex;align-items:center;gap:18px} .foot__social a{ display:flex;align-items:center;justify-content:center; color:var(--ink-soft); transition:color .25s var(--ease),transform .3s var(--ease); } .foot__social a:hover{color:var(--accent);transform:translateY(-2px)} .foot__social svg{width:30px;height:30px;display:block} /* sem título, o bloco não precisa do mesmo respiro dos outros */ .foot__block--social{margin-top:clamp(24px,3.6vh,44px)!important} .foot__social svg *{ fill:none;stroke:currentColor;stroke-width:1.45; stroke-linecap:round;stroke-linejoin:round; } .foot__social svg .ponto{fill:currentColor;stroke:none} .conceito{display:block;width:100%;margin-top:clamp(48px,7vh,90px)} .conceito text{fill:var(--ink);font-family:var(--font);font-weight:400} .foot__base{max-width:var(--maxw);margin:0 auto;padding:22px var(--gutter) 30px} .foot__base p{ margin:0;font-size:12px;line-height:1.55;letter-spacing:.005em;color:var(--ink-soft); } /* ============================================================ LOCALIZAÇÃO E CONTATO — mapa e formulário lado a lado Duas colunas de largura igual no desktop; no celular empilham, com o mapa primeiro. Sem cortina: é uma página de ação, e a pessoa que chega aqui quer o endereço ou o formulário, não uma abertura. ============================================================ */ .ctt{ max-width:var(--maxw);margin:0 auto; padding:calc(var(--head-h) + var(--vao)) var(--gutter) clamp(48px,8vh,110px); } .ctt__top{margin-bottom:clamp(28px,4.5vh,56px)} .ctt__top h1{ margin:0;font-weight:500;letter-spacing:-.038em;line-height:1; font-size:clamp(2rem,4.4vw,3.4rem); } .ctt__grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,3.4vw,56px);align-items:start; } /* ---- MAPA ---- O filtro tira a cor do mapa do Google, que chega saturado e brigaria com a paleta do site. Um resto de saturação fica de propósito: em cinza absoluto, água e parque somem e o mapa perde a leitura. */ .ctt__mapa{ position:relative;width:100%;aspect-ratio:1/1; border:1px solid var(--line);border-radius:2px;overflow:hidden; background:color-mix(in srgb,var(--ink) 4%,transparent); } .ctt__mapa iframe{ position:absolute;inset:0;width:100%;height:100%;border:0;display:block; filter:grayscale(.92) contrast(1.06) brightness(1.02); } /* no escuro o mapa claro fica ofuscante ao lado do resto da página */ [data-theme="dark"] .ctt__mapa iframe{filter:grayscale(.92) invert(.9) hue-rotate(180deg) brightness(.95)} /* ---- FORMULÁRIO ---- */ .ctt__form{display:flex;flex-direction:column;gap:16px} .ctt__par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .campo{display:flex;flex-direction:column;gap:7px} .campo label{ font-size:.86rem;letter-spacing:.02em;color:var(--ink-soft); } .campo input,.campo select,.campo textarea{ width:100%;font-family:inherit;color:var(--ink); font-size:clamp(.98rem,1.1vw,1.04rem);line-height:1.45; background:transparent;border:1px solid var(--line);border-radius:2px; padding:12px 14px; transition:border-color .25s var(--ease),box-shadow .25s var(--ease); } .campo textarea{resize:vertical;min-height:150px} .campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none;border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); } .campo input::placeholder,.campo textarea::placeholder{color:rgba(14,14,14,.34)} [data-theme="dark"] .campo input::placeholder, [data-theme="dark"] .campo textarea::placeholder{color:rgba(255,255,255,.34)} /* a seta do select desenhada aqui: a nativa muda de forma em cada sistema e destoaria do resto */ .campo select{ appearance:none;-webkit-appearance:none; padding-right:38px;cursor:pointer; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 12px center;background-size:16px; } .campo select option{color:#0E0E0E;background:#fff} /* "Selecione" precisa parecer marcador de lugar, não escolha feita. Um