/* Gerado por deploy/css.py a partir de src. Não editar aqui. */ /* Home v4 — layout do Guilherme no Figma (prancha de 1920px). --u = 1px da prancha. No desktop as posições seguem o Figma; abaixo de 900px a página reflui em coluna. */ @font-face { font-family: "Cy Grotesk Key"; src: url("../fonts/cy-grotesk-key-bold.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "Archivo"; src: url("../fonts/display-provisoria-archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-var-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; } :root { --preto: #000; --claro: #f5f5f5; --cinza: #bbb; --azul: #0038ff; --grotesk: "Cy Grotesk Key", "Archivo", sans-serif; --archivo: "Archivo", "Inter", sans-serif; --inter: "Inter", system-ui, sans-serif; /* --x: 1px da prancha na horizontal (acompanha a largura da tela). --u: tamanhos e posições verticais = o menor entre largura e altura, para o hero (até os números) caber sempre na primeira tela. */ --x: calc(100cqw / 1920); --u: min(var(--x), calc(100svh / 1100)); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } /* cqw do body = largura útil sem a barra de rolagem; é a base de --u */ body { container-type: inline-size; margin: 0; background: var(--preto); color: var(--claro); font-family: var(--inter); font-size: 18px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } p, h1, h2, h3, ul, ol, dl, figure { margin: 0; padding: 0; } ul, ol { list-style: none; } [hidden] { display: none !important; } ::selection { background: var(--azul); color: #fff; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: #000; padding: 10px 14px; border-radius: 10px; } .skip:focus { left: 8px; } :focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; } /* Estado inicial das entradas: só esconde quando o JS está ativo e ainda não assumiu. */ html.js:not(.ready) [data-in], html.js:not(.ready) .hero__titulo, html.js:not(.ready) .hero__apoio, html.js:not(.ready) .numero, html.js:not(.ready) .abertura__luz, html.js:not(.ready) .abertura__marca p, html.js:not(.ready) .abertura__montanha img { visibility: hidden; } /* ---------- botão (Rectangle 8336: #f5f5f5, raio 15) ---------- */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: max(10px, calc(12 * var(--u))); height: max(42px, calc(46 * var(--u))); padding: 0 max(18px, calc(20 * var(--u))); border-radius: 15px; background: var(--claro); color: #000; font: 500 max(14px, calc(16 * var(--u))) / 1 var(--inter); white-space: nowrap; position: relative; overflow: hidden; isolation: isolate; transition: color .45s cubic-bezier(.7, 0, .2, 1); } /* hover: duas faixas na inclinação do A da Altvision atravessam o botão (a azul preenche, a clara vai na frente), o texto rola e a seta sai pelo canto para o A entrar no lugar */ .botao::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -45%; width: 190%; background: linear-gradient(90deg, var(--azul) 80%, #6f9bff 80% 87%, transparent 87%); transform: translateX(-100%) skewX(26.5deg); transition: transform .75s cubic-bezier(.7, 0, .2, 1); } .botao:not(.botao--off):hover::before { transform: translateX(0) skewX(26.5deg); } .botao:not(.botao--off):hover { color: #fff; } .botao--off::before { display: none; } .botao--off:hover { color: inherit; } .botao__txt { position: relative; display: inline-block; overflow: hidden; line-height: 1.25; } .botao__txt > span { display: inline-block; transition: transform .6s cubic-bezier(.7, 0, .2, 1); } .botao__txt > span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; } .botao:hover .botao__txt > span { transform: translateY(-100%); } /* seta: duas setas finas empilhadas; no hover a primeira sai pelo canto e a segunda entra */ .botao__seta { position: relative; display: inline-block; flex: none; width: 1em; height: 1em; overflow: hidden; } .botao__seta svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.6, 0, .2, 1); } .botao__seta svg + svg { padding: 1px; transform: translate(-110%, 110%) scale(.6); } .botao:hover .botao__seta svg:first-child { transform: translate(110%, -110%); } .botao:hover .botao__seta svg + svg { transform: translate(0, 0) scale(1); transition-delay: .12s; } .botao--g { height: max(48px, calc(54 * var(--u))); min-width: max(200px, calc(247 * var(--u))); font-size: max(15px, calc(18 * var(--u))); } /* ---------- cabeçalho: logo · Menu no meio · CTA, tudo na mesma linha central, sem faixa de fundo ---------- */ .cab { --tinta: #fff; --botao: var(--claro); --botao-txt: #000; position: fixed; inset: 0 0 auto; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: calc(64 * var(--u)) calc(88 * var(--x)) 0; color: var(--tinta); transition: transform .6s cubic-bezier(.2, .8, .2, 1), padding .5s cubic-bezier(.2, .8, .2, 1), color .35s; } .cab.claro { --tinta: #000; --botao: #000; --botao-txt: #fff; } .cab.solto { padding-top: 22px; } .cab.escondido { transform: translateY(-140%); } .cab__logo { justify-self: start; display: block; line-height: 0; } .cab__logo svg { display: block; width: max(140px, calc(206 * var(--u))); height: auto; } .cab__logo svg path { transition: fill .35s; } .cab__cta { justify-self: end; background: var(--botao); color: var(--botao-txt); transition: background .35s, color .35s; } .cab__cta:hover { background: var(--botao); opacity: .88; } .cab__menu { justify-self: center; position: relative; display: inline-flex; align-items: center; gap: 14px; height: max(42px, calc(46 * var(--u))); padding: 0 18px 0 20px; border-radius: 15px; border: 1px solid color-mix(in srgb, var(--tinta) 18%, transparent); background: color-mix(in srgb, var(--tinta) 6%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); color: inherit; font: 500 max(14px, calc(16 * var(--u))) / 1 var(--inter); letter-spacing: .01em; cursor: pointer; transition: border-color .4s, background .4s; } .cab__menu:hover { border-color: color-mix(in srgb, var(--tinta) 45%, transparent); background: color-mix(in srgb, var(--tinta) 10%, transparent); } .cab__menu-txt { display: grid; height: 1.15em; overflow: hidden; text-align: left; } .cab__menu-txt span { display: block; line-height: 1.15; transition: transform .6s cubic-bezier(.7, 0, .2, 1); } .cab__menu[aria-expanded="true"] .cab__menu-txt span { transform: translateY(-100%); } .cab__menu i { position: relative; display: block; width: 18px; height: 8px; } .cab__menu b { position: absolute; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .55s cubic-bezier(.7, 0, .2, 1), width .45s cubic-bezier(.2, .8, .2, 1), top .45s cubic-bezier(.7, 0, .2, 1); } .cab__menu b:first-child { top: 0; width: 18px; } .cab__menu b:last-child { top: 6.5px; width: 11px; } .cab__menu:hover b:last-child { width: 18px; } .cab__menu[aria-expanded="true"] b { top: 3.25px; width: 16px; } .cab__menu[aria-expanded="true"] b:first-child { transform: rotate(45deg); } .cab__menu[aria-expanded="true"] b:last-child { transform: rotate(-45deg); } /* ---------- ruído (granulado de filme), usado no hero e no menu ---------- */ .ruido { position: relative; } .ruido::after { content: ""; position: absolute; inset: -50%; z-index: 2; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: var(--ruido, .07); mix-blend-mode: overlay; animation: grao 1s steps(6) infinite; } @keyframes grao { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); } } .abertura.ruido::after { --ruido: .09; } /* ---------- linhas-guia finas atrás da página (desenhadas na entrada) ---------- */ .guias { display: none; } /* linhas-guia agora são o fundo de cada seção (_v4-secoes.css) */ .guias i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .075); transform-origin: 50% 0; } .guias i:nth-child(1) { left: calc(88 * var(--x)); } .guias i:nth-child(2) { left: calc(655 * var(--x)); } .guias i:nth-child(3) { left: calc(1265 * var(--x)); } .guias i:nth-child(4) { right: calc(88 * var(--x)); } html.menu-aberto .guias { opacity: 0; } /* ---------- menu aberto: vidro escuro com desfoque, ruído e divisórias; nasce do botão no meio ---------- */ .menu { position: fixed; inset: 0; z-index: 45; overflow: hidden; color: #fff; background: rgba(4, 6, 18, .62); -webkit-backdrop-filter: blur(28px) saturate(130%); backdrop-filter: blur(28px) saturate(130%); display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; padding: calc(190 * var(--u)) calc(88 * var(--x)) calc(72 * var(--u)); --ruido: .1; } .menu::before { content: ""; position: absolute; left: calc(88 * var(--x)); right: calc(88 * var(--x)); top: calc(150 * var(--u)); height: 1px; background: rgba(255, 255, 255, .14); transform-origin: 50% 0; } .menu__nav { position: relative; z-index: 3; display: grid; padding-right: 40px; } .menu__nav a { display: block; padding: calc(4 * var(--u)) 0; overflow: hidden; font: 500 clamp(36px, calc(84 * var(--u)), 96px) / 1.08 var(--archivo); letter-spacing: -.02em; } .menu__nav a span { display: inline-block; transition: transform .6s cubic-bezier(.2, .8, .2, 1), color .3s; } .menu__nav a:hover span { transform: translateX(18px); color: #7f98ff; } .menu__info { position: relative; z-index: 3; align-self: stretch; display: grid; align-content: end; gap: 26px; justify-items: end; padding-left: 40px; border-left: 1px solid rgba(255, 255, 255, .12); text-align: right; font-size: 16px; line-height: 1.5; color: var(--claro); } .menu__info small { display: block; margin-bottom: 4px; font-size: 13px; color: var(--cinza); } .menu__info a { display: block; } .menu__info a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .menu__redes { display: grid; justify-items: end; } .menu__serv { display: grid; justify-items: end; gap: 2px; } /* o símbolo da Altvision desenhado em linhas finas, em camadas, atrás do menu */ .menu__simbolo { position: absolute; z-index: 1; right: 24%; bottom: 0; width: min(120vh, 72vw); translate: 50% 52%; overflow: visible; pointer-events: none; } .menu__simbolo path { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1; vector-effect: non-scaling-stroke; } .menu__simbolo g:nth-child(2) path { stroke: rgba(255, 255, 255, .09); } .menu__simbolo g:nth-child(3) path { stroke: rgba(255, 255, 255, .05); } .menu__simbolo g:first-child path { stroke: rgba(111, 140, 255, .45); } html.menu-aberto { overflow: hidden; } /* ---------- abertura: luz + Altvision + montanha atrás do hero e do manifesto ---------- */ .abertura { position: relative; isolation: isolate; height: calc(1800 * var(--u)); overflow: hidden; background: #000; } /* fundo preto: o granulado (overlay) precisa de algo atrás para não acinzentar */ /* fim da prancha: a montanha some no preto antes da borda (em telas largas e baixas ela seria cortada a seco) */ .abertura::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(transparent, #000 78%); pointer-events: none; } .abertura__luz { position: absolute; left: -4%; top: -3%; width: 108%; height: calc(1573 * var(--u) + 3%); z-index: -3; } .luz-cod { position: absolute; inset: 0; overflow: hidden; transform-origin: 70% 20%; background: linear-gradient(100deg, #000 26%, #000816 46%, #001a52 64%, #00347e 80%, #0a5aa6 96%); } .luz-cod i { position: absolute; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; will-change: transform; } .luz-cod i:nth-child(1) { right: -18%; top: -22%; width: 56%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(0, 185, 232, .95), transparent); animation: luz-a 13s ease-in-out infinite alternate; } .luz-cod i:nth-child(2) { right: -16%; top: 36%; width: 62%; aspect-ratio: 1.15; background: radial-gradient(closest-side, rgba(196, 210, 218, .85), rgba(130, 160, 175, .35) 55%, transparent); animation: luz-b 16s ease-in-out -5s infinite alternate; } .luz-cod i:nth-child(3) { right: 14%; top: 34%; width: 46%; aspect-ratio: 1.3; background: radial-gradient(closest-side, rgba(0, 110, 135, .75), transparent); animation: luz-a 18s ease-in-out -9s infinite alternate-reverse; } .luz-cod i:nth-child(4) { right: 8%; top: -6%; width: 52%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(0, 56, 255, .55), transparent); animation: luz-b 14s ease-in-out -3s infinite alternate-reverse; } @keyframes luz-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-7%, 6%) scale(1.12); } } @keyframes luz-b { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(6%, -5%) scale(.94); } } .luz-cod canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .luz-cod.gl i { display: none; } .abertura__marca { position: absolute; left: 50%; top: calc(690 * var(--u)); width: calc(2116 * var(--x)); margin-left: calc(-1058 * var(--x)); z-index: -2; } .abertura__marca p { font: 400 calc(450 * var(--x)) / normal var(--grotesk); color: rgba(255, 255, 255, .1); text-align: center; white-space: pre; } .abertura__marca .letra { display: inline-block; } /* Montanha em preto e branco (tons de cinza já no arquivo). A luz azul fica atrás, só como contraste. Ocupa sempre a largura toda; a base preta cobre o fim da luz. */ .abertura__montanha { position: absolute; left: 0; top: calc(620 * var(--u)); width: 100%; aspect-ratio: 1920 / 953; min-height: calc(953 * var(--u)); z-index: -1; } .abertura__montanha img { width: 100.65%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 0; margin-left: -.01%; transform-origin: 50% 100%; } /* ---------- hero (0–1340 da prancha) ---------- */ .hero { position: absolute; inset: 0 0 auto; height: calc(1340 * var(--u)); } .hero__lado { position: absolute; font-size: max(12px, calc(18 * var(--u))); font-weight: 400; line-height: 1.2; color: var(--claro); } .hero__lado--esq { left: calc(88 * var(--x)); top: calc(308 * var(--u)); } .hero__lado--dir { right: calc(93 * var(--x)); top: calc(456 * var(--u)); text-align: right; } .hero__centro { position: absolute; left: calc(655 * var(--x)); top: calc(286 * var(--u)); width: max(330px, calc(650 * var(--u))); } .hero__titulo { font: 600 max(34px, calc(68 * var(--u))) / normal var(--archivo); font-stretch: 100%; color: #fff; white-space: nowrap; } .hero__titulo .char { display: inline-block; } .hero__apoio { margin-top: calc(24 * var(--u)); font-size: max(15px, calc(30 * var(--u))); line-height: 1.2; color: var(--cinza); } .hero__acoes { display: flex; align-items: center; gap: calc(28 * var(--u)); margin-top: calc(40 * var(--u)); } .hero__vagas { display: flex; align-items: center; gap: calc(15 * var(--u)); font-size: max(12px, calc(18 * var(--u))); color: var(--cinza); white-space: nowrap; } .hero__vagas img { width: max(11px, calc(15 * var(--u))); height: auto; } /* o ponto azul "respira": vagas abertas */ .hero__vagas { position: relative; } .hero__vagas::before { content: ""; position: absolute; left: 0; top: 50%; width: max(11px, calc(15 * var(--u))); aspect-ratio: 1; margin-top: calc(max(11px, calc(15 * var(--u))) / -2); border-radius: 50%; background: var(--azul); opacity: 0; animation: vaga 2.4s cubic-bezier(.2, .8, .2, 1) infinite 3s; } @keyframes vaga { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } } .numero { position: absolute; } .numero b { display: flex; font: 400 calc(100 * var(--u)) / 1.37 var(--grotesk); letter-spacing: calc(-5 * var(--u)); color: #fff; white-space: nowrap; } .numero__mais { display: inline-block; } /* contador em fita: cada dígito é uma coluna 0–9 que rola até o valor */ .odo { display: inline-flex; } .odo__col { position: relative; display: inline-block; height: 1.37em; margin: -.5em 0; padding: .5em 0; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 .5em, #000 calc(100% - .5em), transparent); mask-image: linear-gradient(transparent, #000 .5em, #000 calc(100% - .5em), transparent); box-sizing: content-box; } .odo__fant { visibility: hidden; } .odo__fita { position: absolute; left: 0; top: .5em; display: flex; flex-direction: column; } .odo__fita span { display: block; height: 1.37em; } .numero__rot { position: absolute; top: calc(69 * var(--u)); width: max(86px, calc(172 * var(--u))); font-size: max(12px, calc(22 * var(--u))); line-height: max(13px, calc(20 * var(--u))); color: var(--claro); } .numero--a { left: calc(153 * var(--x)); top: calc(795 * var(--u)); } .numero--b { left: calc(763 * var(--x)); top: calc(932 * var(--u)); } .numero--c { left: calc(1438 * var(--x)); top: calc(795 * var(--u)); } .numero--a .numero__rot { left: calc(222 * var(--u)); } .numero--b .numero__rot { left: calc(187 * var(--u)); } .numero--c .numero__rot { left: calc(158 * var(--u)); } /* ---------- manifesto (1340–1800 da prancha) ---------- */ .manifesto { position: absolute; left: 0; right: 0; top: calc(1340 * var(--u)); height: calc(460 * var(--u)); } .manifesto__lado { position: absolute; left: calc(210 * var(--x)); top: calc(99 * var(--u)); width: max(220px, calc(318 * var(--u))); } .manifesto__lado p { font-size: max(14px, calc(22 * var(--u))); line-height: 1.2; color: var(--claro); } .manifesto__lado .botao { margin-top: calc(136 * var(--u)); } .manifesto__frase { position: absolute; left: calc(825 * var(--x)); top: calc(95 * var(--u)); width: max(420px, calc(885 * var(--u))); text-indent: calc(111 * var(--u)); font: 500 max(28px, calc(60 * var(--u))) / normal var(--archivo); font-stretch: 100%; color: var(--claro); } .manifesto__frase .palavra { display: inline-block; text-indent: 0; } /* ---------- névoa: entra pelos dois lados, cobre a tela e vira o branco da próxima seção ---------- */ .nevoa { position: relative; height: 170vh; } .nevoa__tela { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; visibility: hidden; } .nevoa__gl { position: absolute; inset: 0; width: 100%; height: 100%; } .nevoa__veu { position: absolute; inset: 0; background: #fff; opacity: 0; } .nevoa__fim { position: absolute; left: 0; right: 0; top: 40%; bottom: 0; background: #fff; opacity: 0; } /* acende só com a névoa fechada (home-v4.js) */ html:not(.js) .nevoa { display: none; } .proxima { position: relative; min-height: 100vh; background: #fff; color: #000; } /* ---------- telas médias (900–1279): textos laterais e números ganham respiro ---------- */ @media (min-width: 900px) and (max-width: 1279px) { .hero__lado--esq { top: calc(240 * var(--u)); } .hero__centro { left: calc(560 * var(--x)); } .hero__lado--dir { top: calc(560 * var(--u)); } .manifesto__lado { left: calc(120 * var(--x)); } .manifesto__frase { left: calc(760 * var(--x)); } } /* ---------- celular e tablet em pé: coluna; o hero ocupa a primeira tela com os números no pé ---------- */ @media (max-width: 899px), (max-width: 1199px) and (orientation: portrait) { :root { --x: 1px; --u: 1px; } .cab { grid-template-columns: 1fr auto; padding: 18px 20px 0; } .cab.solto { padding-top: 14px; } .cab__logo svg { width: 136px; } .cab__cta { display: none; } .cab__menu { height: 40px; padding: 0 14px 0 16px; font-size: 14px; } .menu { grid-template-columns: 1fr; align-content: end; gap: 34px; padding: 100px 20px 32px; } .menu::before { left: 20px; right: 20px; top: 78px; } .menu__nav { padding-right: 0; } .menu { overflow-y: auto; } .menu__nav a { font-size: clamp(30px, 9vw, 46px); padding: 5px 0; } .menu__serv { display: none; } /* no celular os serviços ficam na página Serviços */ .menu__info { justify-items: start; text-align: left; gap: 18px; font-size: 15px; padding-left: 0; border-left: 0; grid-template-columns: 1fr 1fr; } .menu__redes { justify-items: start; } .menu__simbolo { right: 50%; top: auto; bottom: 0; width: 130vw; translate: 50% 55%; } .guias { display: none; } .abertura { height: auto; } /* no celular: a luz se espalha pelo topo como uma aurora, a montanha fica em cima e o texto desce para a base */ .abertura__luz { left: 0; right: 0; top: 0; width: 100%; height: 58svh; -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); } .abertura__marca { top: 22svh; width: 220vw; margin-left: -110vw; } .abertura__marca p { font-size: 36vw; } .abertura__montanha { top: 10svh; left: -45vw; width: 190vw; min-height: 0; } .hero, .manifesto { position: relative; inset: auto; height: auto; top: auto; } .hero { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; padding: 39svh 20px 30px; } .hero__lado, .hero__centro, .numero, .manifesto__lado, .manifesto__frase { position: static; width: auto; } .hero__lado--esq { order: -1; margin-bottom: 30px; font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .8); } .hero__lado--esq br { display: none; } .hero__titulo { font-size: clamp(34px, 10vw, 56px); line-height: 1.02; white-space: normal; } .hero__apoio { margin-top: 10px; font-size: clamp(15px, 4.1vw, 20px); max-width: 560px; } .hero__acoes { flex-wrap: nowrap; gap: 14px; margin-top: 22px; } .hero__acoes .botao { flex: none; min-width: 0; height: 44px; padding-inline: 18px; font-size: 14px; } .hero__vagas { min-width: 0; font-size: 12.5px; line-height: 1.3; gap: 8px; white-space: normal; } .hero__vagas::before { width: 11px; margin-top: -5.5px; } .hero__lado--dir { display: none; } .numeros { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px; margin-top: 26px; } .numero b { font-size: clamp(32px, 9.6vw, 64px); letter-spacing: -.05em; } .numero .numero__rot { position: static; display: block; width: auto; margin-top: 2px; font-size: 13px; line-height: 1.15; } .manifesto { padding: 72px 20px 96px; display: flex; flex-direction: column-reverse; gap: 36px; } .manifesto__frase { font-size: clamp(28px, 7.4vw, 44px); text-indent: 1.6em; } .manifesto__lado p { font-size: 16px; max-width: 300px; } .manifesto__lado .botao { margin-top: 22px; } } @media (max-width: 899px) and (max-height: 700px) { .hero { padding-top: 90px; } .hero__apoio { font-size: 15px; } } /* ===================================================================== Home v4 — seções depois da névoa. Mesma grade do hero do Figma: rótulo na coluna 88→655, conteúdo de 655 até 1832 (as linhas-guia). ===================================================================== */ .sec { --mudo: #6b6b6b; --linha: rgba(0, 0, 0, .12); --btn: #000; --btn-txt: #fff; position: relative; display: grid; grid-template-columns: calc(567 * var(--x)) minmax(0, 1fr); align-items: start; padding: calc(200 * var(--u)) calc(88 * var(--x)); } .sec--claro { background: #fff; color: #0a0a0a; } .sec--escuro { --mudo: var(--cinza); --linha: rgba(255, 255, 255, .14); --btn: var(--claro); --btn-txt: #000; background: #000; color: var(--claro); } .sec .botao { background: var(--btn); color: var(--btn-txt); } .sec__rot { grid-column: 1; padding-top: calc(16 * var(--u)); font-size: max(13px, calc(18 * var(--u))); line-height: 1.2; } .sec__corpo { grid-column: 2; } .sec__tit { max-width: calc(1000 * var(--u)); font: 500 max(30px, calc(60 * var(--u))) / 1.08 var(--archivo); font-stretch: 100%; letter-spacing: -.01em; text-wrap: balance; } .sec__txt { max-width: calc(640 * var(--u)); margin-top: calc(36 * var(--u)); font-size: max(15px, calc(22 * var(--u))); line-height: 1.4; color: var(--mudo); } /* ---------- problema → solução ---------- */ .pares { padding-top: calc(260 * var(--u)); } .pares__cab { display: grid; grid-template-columns: 1fr 1fr; margin-top: calc(110 * var(--u)); padding-bottom: calc(18 * var(--u)); font-size: max(12px, calc(15 * var(--u))); color: var(--mudo); } .pares__lista { border-top: 1px solid var(--linha); } .par { display: grid; grid-template-columns: 1fr 1fr; gap: calc(40 * var(--u)); padding: calc(34 * var(--u)) 0; border-bottom: 1px solid var(--linha); font: 500 max(18px, calc(32 * var(--u))) / 1.15 var(--archivo); font-stretch: 100%; } .par__antes { position: relative; align-self: start; justify-self: start; color: #a3a3a3; } .par__antes i { position: absolute; left: -2%; right: -2%; top: 54%; height: 2px; background: currentColor; transform-origin: 0 50%; } .par__depois { position: relative; padding-left: calc(30 * var(--u)); } .par__depois::before { content: ""; position: absolute; left: 0; top: .42em; width: calc(10 * var(--u)); min-width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--azul); } /* ---------- link discreto (texto + seta, sublinhado fino) ---------- */ .link-sutil { position: relative; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px; font-size: max(13px, calc(16 * var(--u))); letter-spacing: .02em; text-transform: uppercase; } .link-sutil .botao__seta { font-size: .9em; } /* o traço sai pela direita e volta pela esquerda */ .link-sutil::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: 0 50%; } .link-sutil:hover::after { animation: risco .9s cubic-bezier(.7, 0, .2, 1); } @keyframes risco { 0% { transform: scaleX(1); transform-origin: 100% 50%; } 45% { transform: scaleX(0); transform-origin: 100% 50%; } 46% { transform: scaleX(0); transform-origin: 0 50%; } 100% { transform: scaleX(1); transform-origin: 0 50%; } } .link-sutil:hover .botao__seta svg:first-child { transform: translate(110%, -110%); } .link-sutil:hover .botao__seta svg + svg { transform: translate(0, 0); } /* ---------- projetos: trilho horizontal; o projeto do centro é o destaque ---------- */ .projetos { --mudo: #6b6b6b; position: relative; background: #ededed; color: #0a0a0a; } .projetos__palco { position: relative; height: 100vh; height: 100svh; overflow: hidden; } .projetos__trilho { display: flex; align-items: center; gap: calc(70 * var(--u)); height: 100%; width: max-content; padding: calc(40 * var(--u)) calc(50vw - 380 * var(--u)) 0 calc(88 * var(--x)); will-change: transform; } .projetos__intro { flex: none; width: calc(520 * var(--x)); min-width: 280px; margin-right: calc(60 * var(--u)); } .projetos__intro .sec__rot { padding: 0 0 calc(30 * var(--u)); } .projetos__tit { font: 500 max(32px, calc(76 * var(--u))) / 1.02 var(--archivo); font-stretch: 100%; letter-spacing: -.02em; } .projetos__txt { max-width: calc(440 * var(--u)); margin-top: calc(34 * var(--u)); font-size: max(14px, calc(19 * var(--u))); line-height: 1.45; color: var(--mudo); } .proj { flex: none; width: calc(1240 * var(--u)); min-width: 300px; transform-origin: 50% 50%; } /* sem will-change: com ele o print fica rasterizado na escala menor e borra */ /* moldura reta com cruzes nos cantos, na linguagem das linhas-guia; a imagem fica dentro, levemente arredondada */ .proj__moldura { position: relative; padding: calc(18 * var(--u)); border: 1px solid rgba(0, 0, 0, .14); /* papel cinza com granulado em volta do print (estilo Orbus); fixo, sem animar, para não pesar */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px, linear-gradient(#ececec, #e4e4e4); background-blend-mode: soft-light, normal; } .proj__moldura::before, .proj__moldura::after { content: ""; position: absolute; width: 15px; height: 15px; background: linear-gradient(#0a0a0a, #0a0a0a) center / 100% 1px no-repeat, linear-gradient(#0a0a0a, #0a0a0a) center / 1px 100% no-repeat; } .proj__moldura::before { left: -8px; top: -8px; } .proj__moldura::after { right: -8px; bottom: -8px; } .proj__capa { position: relative; display: block; overflow: hidden; aspect-ratio: 3840 / 1840; border-radius: 8px; background: #e9e9e9; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); } .proj__capa img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: scale 1.2s cubic-bezier(.2, .7, .2, 1); } .proj:hover .proj__capa img { scale: 1.04; } /* grão bem leve sobre o print: une a imagem ao papel e tira a cara de captura de tela */ .proj__capa::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px; opacity: .14; mix-blend-mode: overlay; } .proj__rodape { display: flex; align-items: center; justify-content: space-between; gap: calc(40 * var(--u)); padding: calc(26 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)); } .proj__nome { font: 500 max(22px, calc(40 * var(--u))) / 1.05 var(--archivo); font-stretch: 100%; letter-spacing: -.01em; } .proj__txt { max-width: calc(640 * var(--u)); margin-top: calc(10 * var(--u)); font-size: max(14px, calc(18 * var(--u))); line-height: 1.4; color: #444; } .projetos__fim .botao { flex: none; background: #000; color: #fff; } .proj .link-sutil { flex: none; font-size: max(11px, calc(13 * var(--u))); } .proj__status { flex: none; font-size: max(12px, calc(14 * var(--u))); letter-spacing: .02em; text-transform: uppercase; color: var(--mudo); } .projetos__fim { flex: none; display: grid; justify-items: start; gap: calc(44 * var(--u)); width: calc(760 * var(--u)); min-width: 300px; padding-left: calc(70 * var(--u)); } .projetos__fim-tit { font: 500 max(30px, calc(72 * var(--u))) / 1.05 var(--archivo); font-stretch: 100%; letter-spacing: -.02em; } /* ---------- serviços: bento grid escuro. Cards com brilho sutil no topo, ilustração que se dissolve, texto embaixo ---------- */ .solucoes { z-index: 2; padding-bottom: calc(170 * var(--u)); box-shadow: 0 -40px 80px rgba(0, 0, 0, .35); } .solucoes__grade { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: calc(24 * var(--u)); margin-top: calc(100 * var(--u)); } .sol { --f: calc(10 * var(--u)); grid-column: span 4; position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: calc(450 * var(--u)); border: 1px solid rgba(255, 255, 255, .1); border-radius: 0; background: radial-gradient(90% 50% at 50% 0%, rgba(255, 255, 255, .02), transparent 65%), #020203; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); transition: border-color .6s; } .sol::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -20%), rgba(255, 255, 255, .045), transparent 60%); } .sol:hover { border-color: rgba(255, 255, 255, .22); } .sol::before { content: ""; position: absolute; z-index: 2; inset: -8px; pointer-events: none; opacity: .7; background: linear-gradient(#fff, #fff) 0 7px / 15px 1px no-repeat, linear-gradient(#fff, #fff) 7px 0 / 1px 15px no-repeat, linear-gradient(#fff, #fff) 100% calc(100% - 7px) / 15px 1px no-repeat, linear-gradient(#fff, #fff) calc(100% - 7px) 100% / 1px 15px no-repeat; } .sol__ilu { position: relative; flex: 1; min-height: calc(250 * var(--u)); overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent 96%); mask-image: linear-gradient(#000 55%, transparent 96%); } .serv__palco { position: absolute; inset: 0; display: grid; place-items: center; color: #ececee; } .sol .serv__palco { font-size: var(--f); transition: transform 1s cubic-bezier(.2, .8, .2, 1); } .sol:hover .serv__palco { transform: scale(1.03); } .sol__txt { display: grid; justify-items: start; gap: 8px; padding: 0 calc(30 * var(--u)) calc(30 * var(--u)); } .sol__nome { font: 500 max(19px, calc(24 * var(--u))) / 1.1 var(--archivo); font-stretch: 100%; letter-spacing: -.015em; color: #fff; } .sol__desc { max-width: calc(420 * var(--u)); font-size: max(14px, calc(15 * var(--u))); line-height: 1.5; color: rgba(255, 255, 255, .55); } .sol__tags { display: none; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .sol__tags li { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px; font-size: max(12px, calc(13 * var(--u))); color: rgba(255, 255, 255, .75); } .sol .link-sutil { margin-top: calc(10 * var(--u)); color: #fff; } /* card largo: texto à esquerda, ilustração à direita, com as tags */ .sol--automacao { grid-column: span 8; flex-direction: row-reverse; } .sol--automacao .sol__ilu { flex: 1.3; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 85%, transparent); } .sol--automacao .sol__txt { flex: 1; align-content: center; padding-top: calc(30 * var(--u)); } .sol--automacao .sol__tags { display: flex; } /* ajustes por ilustração */ .sol--apps { --f: calc(12 * var(--u)); } .sol--apps .d-fone { translate: 0 28%; } .sol--apps .d-aviso { width: 14em; } .sol--apps .d-aviso--1 { left: calc(50% - 1em); top: calc(50% - 9em); } .sol--apps .d-aviso--2 { left: calc(50% - 15em); top: calc(50% - 1.5em); } .sol--automacao { --f: calc(10 * var(--u)); } .sol--hospedagem { --f: calc(9 * var(--u)); } .sol--sites .serv__palco { top: calc(56 * var(--u)); --f: calc(9 * var(--u)); } .sol--sites .serv__palco { font-size: calc(9 * var(--u)); } .sol--sistemas .serv__palco { top: calc(34 * var(--u)); } .sol--ia .serv__palco { top: calc(40 * var(--u)); font-size: calc(9.4 * var(--u)); } /* ---------- ilustrações dos serviços (tema escuro, tudo em em) ---------- */ .serv__palco { --d-borda: rgba(255, 255, 255, .08); --d-mudo: #85858c; --d-azul: #3f7bff; --d-verde: #4ade80; } .serv__palco svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .serv__palco .d-a { fill: currentColor; stroke: none; } .serv__palco .d-a path { fill: currentColor; } .serv__palco b { font-weight: 600; } .serv__palco small { font-size: .78em; color: var(--d-mudo); } .d-card { position: relative; padding: 1.3em 1.4em; border: 1px solid var(--d-borda); border-radius: 1em; background: linear-gradient(180deg, #0c0c0e, #070708); box-shadow: 0 1.6em 3em -1.4em rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05); } .d-card > span { display: block; margin-top: .6em; font-size: .78em; color: var(--d-mudo); } .d-kpi > p b, .d-barras > p b, .d-uptime > p b { font: 600 2.1em / 1 var(--archivo); letter-spacing: -.02em; color: #fff; } .d-kpi > p small, .d-barras > p small, .d-uptime > p small { margin-left: .6em; } .serv__palco .d-area { stroke: none; } .d-linha { stroke: #fff; stroke-width: 1.6; vector-effect: non-scaling-stroke; } .d-flutua { position: absolute; z-index: 2; } /* sites */ .d-janela { position: relative; width: 36em; border: 1px solid var(--d-borda); border-radius: .9em; background: #08080a; overflow: hidden; box-shadow: 0 2em 4em -2em #000; } .d-janela__barra { display: flex; align-items: center; gap: .4em; height: 2.4em; padding: 0 1em; border-bottom: 1px solid var(--d-borda); } .d-janela__barra i { width: .55em; height: .55em; border-radius: 50%; background: #2c2c30; } .d-janela__barra span { margin: 0 auto; padding: .25em 1.4em; border-radius: 99px; background: #1b1b1e; font-size: .72em; color: var(--d-mudo); } .d-janela__corpo { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.4em; padding: 2em 1.6em 1.6em; } .d-esq { display: grid; align-content: center; gap: .65em; } .d-barra { display: block; width: var(--l); height: 1.1em; border-radius: .3em; background: #2b2b30; transform-origin: 0 50%; } .d-barra--fina { height: .5em; background: #202024; } .d-botao { display: block; width: 7em; height: 2em; margin-top: .7em; border-radius: 99px; background: var(--azul); } .d-bloco { height: 10em; border-radius: .6em; background: linear-gradient(135deg, #1e2a55, #0b1230); } .d-grade { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; } .d-grade b { height: 4.6em; border: 1px solid var(--d-borda); border-radius: .6em; background: #151518; } .d-nota { left: calc(50% + 11em); top: calc(50% - 15em); display: flex; align-items: center; gap: 1em; padding: 1em 1.4em 1em 1em; border: 1px solid var(--d-borda); border-radius: 1em; background: #141416; box-shadow: 0 1.6em 3em -1.4em #000; } .d-nota svg { width: 4.2em; height: 4.2em; rotate: -90deg; } .d-nota circle { stroke: #26262a; stroke-width: 6; } .d-nota .d-nota__arco { stroke: var(--d-verde); stroke-dasharray: 100; stroke-dashoffset: 100; } .d-nota b { display: block; font: 600 2em / 1 var(--archivo); color: #fff; } .d-nota span { font-size: .75em; color: var(--d-mudo); } .d-busca { left: calc(50% - 23em); top: calc(50% + 8.5em); display: flex; align-items: center; gap: 1em; padding: 1em 1.2em; border: 1px solid var(--d-borda); border-radius: 1em; background: #141416; box-shadow: 0 1.6em 3em -1.4em #000; } .d-busca__g { padding: .35em .6em; border-radius: .4em; background: #fff; color: #000; font-size: .72em; font-weight: 600; } .d-busca p small { display: block; font-size: .68em; color: #6ee7a0; } .d-busca p b { font-size: .86em; font-weight: 500; color: #9db8ff; } .d-busca em { padding: .3em .8em; border-radius: 99px; background: var(--azul); font: 600 .8em / 1 var(--inter); font-style: normal; color: #fff; } /* sistemas */ .d-painel { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; width: 40em; } .d-kpi svg { display: block; width: 100%; height: 4.4em; margin-top: 1em; } .d-kpi p small, .d-uptime p small { color: var(--d-verde); } .d-barras__col { display: flex; align-items: flex-end; gap: .45em; height: 5.4em; margin-top: 1em; } .d-barras__col i { flex: 1; height: var(--h); border-radius: .3em; background: #2c2c31; transform-origin: 50% 100%; } .d-barras__col i.on { background: #fff; } .d-barras p b { font-size: 1.6em; } .d-tabela { grid-column: 1 / -1; padding-block: .5em; } .d-tabela p { display: grid; grid-template-columns: 4.4em 1fr auto; align-items: center; padding: .75em 0; border-bottom: 1px solid var(--d-borda); font-size: .85em; } .d-tabela p:last-child { border-bottom: 0; } .d-tabela em, .d-dns em { justify-self: end; padding: .25em .75em; border-radius: 99px; background: #232327; font-size: .82em; font-style: normal; color: #cfcfd4; } .d-tabela em.az { background: rgba(0, 56, 255, .22); color: #9db8ff; } .d-tabela em.vd { background: rgba(74, 222, 128, .13); color: #6ee7a0; } /* apps */ .d-fone { position: relative; width: 17em; height: 33em; padding: 2.8em 1.1em 1.1em; border: .45em solid #1f1f23; border-radius: 2.6em; background: #0c0c0e; box-shadow: 0 2em 4em -1.5em #000; } .d-fone__ilha { position: absolute; left: 50%; top: .8em; width: 5em; height: 1.3em; translate: -50% 0; border-radius: 99px; background: #000; } .d-fone__oi small { display: block; } .d-fone__oi b { font: 600 1.5em / 1.1 var(--archivo); } .d-fone__saldo { margin: 1.1em 0 .6em; padding: 1.1em 1.2em; border-radius: 1em; background: linear-gradient(135deg, #0038ff, #2f6bff); } .d-fone__saldo small { display: block; color: rgba(255, 255, 255, .8); } .d-fone__saldo b { display: block; font: 600 2.6em / 1.05 var(--archivo); } .d-fone__saldo span { font-size: .72em; color: rgba(255, 255, 255, .8); } .d-fone__item { display: flex; align-items: center; gap: .8em; padding: .75em .2em; border-bottom: 1px solid var(--d-borda); } .d-fone__item i { flex: none; width: 2.1em; height: 2.1em; border-radius: .6em; background: #1d1d21; } .d-fone__item b { display: block; font-size: .8em; } .d-fone__item small { font-size: .66em; } .d-fone__nav { position: absolute; left: 1.4em; right: 1.4em; bottom: 1.1em; display: flex; justify-content: space-around; } .d-fone__nav i { width: .5em; height: .5em; border-radius: 50%; background: #333; } .d-fone__nav i.on { background: #fff; } .d-aviso { position: absolute; z-index: 2; display: flex; align-items: center; gap: .9em; width: 16em; padding: .9em 1.1em; border: 1px solid var(--d-borda); border-radius: 1em; background: rgba(24, 24, 27, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1.6em 3em -1.2em #000; } .d-aviso .d-a { flex: none; width: 1.7em; color: var(--d-azul); } .d-aviso b { display: block; font-size: .82em; } .d-aviso small { font-size: .7em; } .d-aviso--1 { left: calc(50% + 6em); top: calc(50% - 12.5em); } .d-aviso--2 { left: calc(50% - 23em); top: calc(50% + 4.5em); } /* automação */ .d-hub { position: relative; width: 44em; aspect-ratio: 600 / 400; } .d-hub__fios { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .d-fio { stroke: rgba(255, 255, 255, .13); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .serv__palco .d-pulso { stroke: var(--d-azul); stroke-width: 2.2; stroke-dasharray: .16 1.3; stroke-dashoffset: .16; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px #3f7bff); } .d-hub__centro { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 6.6em; aspect-ratio: 1; border: 1px solid rgba(63, 123, 255, .65); border-radius: 1.5em; background: radial-gradient(circle, #10204d, #0a0a0c 75%); box-shadow: 0 0 5em rgba(0, 56, 255, .5), inset 0 0 1.6em rgba(63, 123, 255, .3); } .d-hub__centro .d-a { width: 2.7em; color: #fff; } .d-hub__no { position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: .5em; } .d-hub__no span { display: grid; place-items: center; width: 3.4em; height: 3.4em; border: 1px solid var(--d-borda); border-radius: .9em; background: #121215; color: #d4d7de; transition: border-color .4s, color .4s; } .d-hub__no.on span { border-color: rgba(63, 123, 255, .7); color: #fff; box-shadow: 0 0 1.6em rgba(0, 56, 255, .45); } .d-hub__no svg { width: 1.45em; height: 1.45em; } .d-hub__no small { font-size: .7em; } .d-hub__log { position: absolute; left: 50%; bottom: -2.4em; translate: -50% 0; display: flex; align-items: center; gap: .6em; padding: .55em 1.1em; border: 1px solid var(--d-borda); border-radius: 99px; background: #121214; font-size: .74em; white-space: nowrap; color: #cfcfd4; } .d-hub__log i, .d-status i, .d-chat__topo small i { flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--d-verde); box-shadow: 0 0 .7em rgba(74, 222, 128, .7); } /* IA */ .d-chat { width: 33em; padding: 0; overflow: hidden; border: 1px solid var(--d-borda); border-radius: 1.1em; background: #08080a; box-shadow: 0 2em 4em -1.5em #000; } .d-chat__topo { display: flex; align-items: center; gap: .9em; padding: 1.1em 1.3em; border-bottom: 1px solid var(--d-borda); } .d-chat__av { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--azul); } .d-chat__av .d-a { width: 1.15em; color: #fff; } .d-chat__topo b { display: block; font-size: .9em; } .d-chat__topo small { display: flex; align-items: center; gap: .45em; } .d-chat__msgs { display: grid; align-content: start; gap: 1em; min-height: 16em; padding: 1.4em 1.3em; } .d-msg { max-width: 82%; padding: .9em 1.1em; font-size: .86em; line-height: 1.5; } .d-msg--eu { justify-self: end; border-radius: 1em 1em .3em 1em; background: var(--azul); color: #fff; } .d-msg--ia { border: 1px solid var(--d-borda); border-radius: 1em 1em 1em .3em; background: #19191c; } .d-digita { display: inline-flex; gap: .3em; } .d-digita i { width: .45em; height: .45em; border-radius: 50%; background: #8a8a90; animation: d-digita 1.1s infinite; } .d-digita i:nth-child(2) { animation-delay: .15s; } .d-digita i:nth-child(3) { animation-delay: .3s; } @keyframes d-digita { 0%, 60%, 100% { opacity: .3; translate: 0 0; } 30% { opacity: 1; translate: 0 -.2em; } } .d-fontes { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .8em; } .d-fontes small { padding: .25em .6em; border-radius: .4em; background: #242428; font-size: .8em; color: #a9a9b0; } .d-chat__campo { display: flex; align-items: center; justify-content: space-between; margin: 0 1.3em 1.3em; padding: .7em .7em .7em 1em; border: 1px solid var(--d-borda); border-radius: .8em; background: #0b0b0d; } .d-chat__campo span { font-size: .8em; color: var(--d-mudo); } .d-chat__campo i { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: #fff; color: #000; } .d-chat__campo svg { width: 1em; height: 1em; } /* hospedagem */ .d-painel--host { grid-template-columns: 1.35fr 1fr; width: 42em; } .d-uptime svg { display: block; width: 100%; height: 7em; margin: 1em 0; overflow: visible; } .d-uptime .d-linha { stroke: var(--d-azul); } .d-uptime__dias { display: flex; gap: .2em; } .d-uptime__dias i { flex: 1; height: 1.6em; border-radius: .2em; background: #2fbf71; transform-origin: 50% 100%; } .d-uptime__dias i.meio { background: #e6b422; } .d-status { align-self: start; padding-block: .4em; } .d-status p { display: flex; align-items: center; gap: .7em; padding: .8em 0; border-bottom: 1px solid var(--d-borda); font-size: .84em; } .d-status p:last-child { border-bottom: 0; } .d-status small { margin-left: auto; } /* e-mail e domínios */ .d-painel--email { width: 40em; } .d-dominio { grid-column: 1 / -1; } .d-dominio__campo { display: flex; align-items: center; padding: .85em 1.1em; border: 1px solid rgba(63, 123, 255, .5); border-radius: .7em; background: #0d0d10; font: 500 1.35em / 1.2 var(--archivo); } .d-dominio__campo span { color: #fff; } .d-dominio__campo span::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin: 0 .05em -.12em; background: #fff; animation: d-cursor 1s steps(1) infinite; } @keyframes d-cursor { 50% { opacity: 0; } } .d-dominio__campo em { font-style: normal; color: var(--d-mudo); } .d-dominio__ok { display: flex; align-items: center; gap: .6em; margin-top: .9em; font-size: .82em; color: #6ee7a0; } .d-dominio__ok i, .d-dns em { display: grid; place-items: center; width: 1.5em; height: 1.5em; padding: 0; border-radius: 50%; background: rgba(74, 222, 128, .14); } .d-dominio__ok svg, .d-dns em svg { width: .9em; height: .9em; stroke: #6ee7a0; stroke-width: 2.4; } .d-dns { padding-block: .4em; } .d-dns p { display: grid; grid-template-columns: 3.8em minmax(0, 1fr) 1.5em; align-items: center; gap: .4em; padding: .62em 0; border-bottom: 1px solid var(--d-borda); } .d-dns p:last-child { border-bottom: 0; } .d-dns b { font-size: .74em; letter-spacing: .05em; color: #9db8ff; } .d-dns span { overflow: hidden; font-size: .76em; white-space: nowrap; text-overflow: ellipsis; color: var(--d-mudo); } .d-caixa { align-self: start; display: flex; align-items: center; gap: .9em; } .d-caixa__av { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: 50%; background: #fff; color: #000; font-size: .8em; font-weight: 600; } .d-caixa b { display: block; font-size: .8em; } .d-caixa small { color: #6ee7a0; } /* suporte */ .d-painel--suporte { grid-template-columns: 1.3fr 1fr; width: 40em; } .d-rotina { grid-row: span 2; } .d-rotina__tit { margin-bottom: .5em; } .d-rotina__tit b { display: block; font-size: .95em; } .d-passo { display: flex; align-items: center; gap: .8em; padding: .8em 0; border-bottom: 1px solid var(--d-borda); font-size: .86em; } .d-passo:last-child { border-bottom: 0; } .d-passo i { display: grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border: 1px solid var(--d-borda); border-radius: 50%; background: #1b1b1e; transition: background .4s, border-color .4s; } .d-passo svg { width: .95em; height: .95em; stroke: #000; stroke-width: 2.6; opacity: 0; transition: opacity .3s; } .d-passo.feito i { border-color: #fff; background: #fff; } .d-passo.feito svg { opacity: 1; } .d-passo small { margin-left: auto; } .d-chaves { padding-block: .5em; } .d-chaves p { display: flex; align-items: center; justify-content: space-between; padding: .7em 0; font-size: .86em; } .d-chave { position: relative; width: 2.6em; height: 1.5em; border-radius: 99px; background: #2a2a2e; transition: background .4s; } .d-chave::after { content: ""; position: absolute; left: .2em; top: .2em; width: 1.1em; height: 1.1em; border-radius: 50%; background: #8a8a90; transition: left .45s cubic-bezier(.6, 0, .2, 1), background .4s; } .d-chave.on { background: #fff; } .d-chave.on::after { left: 1.3em; background: #000; } .d-relatorio { display: flex; align-items: center; gap: .8em; } .d-relatorio i { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--azul); } .d-relatorio svg { width: 1em; height: 1em; stroke: #fff; stroke-width: 2.4; } .d-relatorio b { display: block; font-size: .84em; } .d-relatorio small { font-size: .7em; } /* ---------- como trabalhamos: linhas de largura total; no hover a linha se enche de branco e o A aparece ---------- */ .processo { padding-bottom: calc(170 * var(--u)); } .processo__cab .sec__txt { max-width: calc(560 * var(--u)); } .passos { grid-column: 1 / -1; margin: calc(110 * var(--u)) calc(-88 * var(--x)) 0; border-top: 1px solid rgba(255, 255, 255, .14); } .passo { position: relative; isolation: isolate; display: grid; grid-template-columns: calc(479 * var(--x)) minmax(0, 1fr) calc(480 * var(--u)) calc(70 * var(--u)); align-items: center; column-gap: calc(30 * var(--u)); padding: calc(40 * var(--u)) calc(88 * var(--x)); border-bottom: 1px solid rgba(255, 255, 255, .14); color: #fff; transition: color .5s; } .passo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: rgba(255, 255, 255, .5); transform: scaleX(var(--traco, 1)); transform-origin: 0 50%; opacity: calc(1 - var(--traco, 1) * .7); pointer-events: none; } .passo::before { content: ""; position: absolute; z-index: -1; inset: 0; background: #fff; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.7, 0, .2, 1); } .passo__num { font: 500 max(14px, calc(18 * var(--u))) / 1 var(--inter); color: rgba(255, 255, 255, .5); transition: color .5s; } .passo__tit { font: 500 max(26px, calc(56 * var(--u))) / 1.05 var(--archivo); font-stretch: 100%; letter-spacing: -.02em; color: inherit; transition: translate .6s cubic-bezier(.7, 0, .2, 1); } .passo__txt { font-size: max(14px, calc(17 * var(--u))); line-height: 1.5; color: var(--cinza); transition: color .5s; } .passo__a { justify-self: end; display: grid; place-items: center; width: max(36px, calc(48 * var(--u))); aspect-ratio: 1; border-radius: 50%; background: var(--azul); opacity: 0; scale: .4; rotate: -90deg; transition: opacity .4s, scale .6s cubic-bezier(.2, .8, .2, 1), rotate .6s cubic-bezier(.2, .8, .2, 1); } .passo__a svg { width: 42%; fill: #fff; } @media (hover: hover) { .passo:hover { color: #000; } .passo:hover::before { transform: scaleY(1); } .passo:hover .passo__num { color: var(--azul); } .passo:hover .passo__tit { translate: calc(24 * var(--u)) 0; } .passo:hover .passo__txt { color: #444; } .passo:hover .passo__a { opacity: 1; scale: 1; rotate: 0deg; } } /* ---------- depoimentos: cartões num arco que gira; a seção de logos encosta embaixo e corta o arco ---------- */ .confia { position: relative; overflow: clip; background: #ededed; color: #0a0a0a; } /* corta nos dois sentidos: com muitos depoimentos o arco dá a volta e esticava a página por baixo */ .confia__cab { padding-bottom: calc(40 * var(--u)); background: none; color: inherit; } .arco__roda { position: relative; height: calc(640 * var(--u)); min-height: 440px; /* some nas laterais e na base, para os cartões se dissolverem no fundo em vez de serem cortados */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(#000 62%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(#000 62%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; cursor: grab; touch-action: pan-y; user-select: none; } .arco__roda.arrastando { cursor: grabbing; } .arco__card { position: absolute; left: 50%; top: calc(50 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; width: calc(440 * var(--u)); min-width: 260px; min-height: calc(440 * var(--u)); margin: 0; padding: calc(40 * var(--u)); border: 1px solid rgba(0, 0, 0, .06); border-radius: 15px; background: #fff; box-shadow: 0 40px 70px -45px rgba(0, 0, 0, .4); transform-origin: 50% calc(2400 * var(--u)); will-change: transform; } .arco__estrelas { font-size: max(13px, calc(16 * var(--u))); letter-spacing: .18em; color: var(--azul); } .arco__card blockquote { margin: calc(26 * var(--u)) 0 0; font: 500 max(20px, calc(34 * var(--u))) / 1.18 var(--archivo); font-stretch: 100%; letter-spacing: -.01em; } .arco__card figcaption { display: flex; align-items: center; gap: 14px; margin-top: calc(40 * var(--u)); font-size: max(13px, calc(16 * var(--u))); font-weight: 500; } .arco__card figcaption small { display: block; font-size: .9em; font-weight: 400; color: #6b6b6b; } .arco__av { display: grid; place-items: center; flex: none; width: max(36px, calc(46 * var(--u))); aspect-ratio: 1; border-radius: 50%; background: #0a0a0a; } .arco__av svg { width: 42%; fill: #fff; } /* ---------- logos dos clientes: pequenos, juntos e estáticos, com título pequeno ---------- */ .logos { position: relative; z-index: 1; padding: calc(20 * var(--u)) calc(88 * var(--x)) calc(150 * var(--u)); background: #ededed; color: #0a0a0a; text-align: center; } .logos__tit { font: 500 max(13px, calc(16 * var(--u))) / 1.2 var(--inter); color: #6b6b6b; } .logos__lista { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(26 * var(--u)) calc(40 * var(--u)); max-width: calc(1400 * var(--u)); margin: calc(36 * var(--u)) auto 0; } .logos__lista li { width: calc(var(--w) * var(--u)); min-width: calc(var(--w) * .55px); } .logos__lista img { width: 100%; height: auto; filter: brightness(0); opacity: .55; transition: opacity .35s; } .logos__lista li:hover img { opacity: .9; } /* ---------- quem faz: fundadores à esquerda, a ideia grande à direita, cruz no meio da linha ---------- */ .quem { --mudo: #8a8a8a; position: relative; padding: calc(170 * var(--u)) calc(88 * var(--x)) calc(150 * var(--u)); background: #000; color: var(--claro); } .quem__topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: calc(60 * var(--u)); align-items: start; } .quem__autores { display: flex; align-items: flex-start; gap: calc(30 * var(--u)); } .quem__fotos { display: flex; gap: calc(10 * var(--u)); } .quem__fotos img { width: calc(170 * var(--u)); min-width: 96px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .6s; } .quem__fotos img:hover { filter: none; } .quem__assina { padding-top: 2px; font-size: max(14px, calc(18 * var(--u))); line-height: 1.4; color: var(--mudo); } .quem__assina b { font-weight: 500; color: #fff; } .quem__frase { font: 500 max(26px, calc(52 * var(--u))) / 1.08 var(--archivo); font-stretch: 100%; letter-spacing: -.02em; color: #fff; } .quem__recuo { display: inline-block; width: calc(300 * var(--u)); } .quem__div { position: relative; height: 1px; margin: calc(130 * var(--u)) 0 calc(120 * var(--u)); background: rgba(255, 255, 255, .14); } .quem__div i { position: absolute; left: 50%; top: 0; width: 15px; height: 15px; translate: -50% -50%; background: linear-gradient(#fff, #fff) center / 100% 1px no-repeat, linear-gradient(#fff, #fff) center / 1px 100% no-repeat; } .quem__base { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; } .quem__resposta { max-width: calc(500 * var(--u)); min-width: 260px; font: 500 max(20px, calc(30 * var(--u))) / 1.18 var(--archivo); font-stretch: 100%; letter-spacing: -.01em; color: #fff; } .quem__resposta span { color: #8a8a8a; } .botao__play { width: .8em; height: .8em; fill: currentColor; } /* ---------- dúvidas: título à esquerda (fixo na rolagem), perguntas à direita ---------- */ .duvidas { border-top: 1px solid rgba(255, 255, 255, .1); } .duvidas__lado { grid-column: 1; position: sticky; top: 120px; display: grid; justify-items: start; padding-right: calc(80 * var(--u)); } .duvidas__lado .sec__rot { padding: 0 0 calc(30 * var(--u)); } .duvidas__tit { font: 500 max(30px, calc(60 * var(--u))) / 1.06 var(--archivo); font-stretch: 100%; letter-spacing: -.01em; text-wrap: balance; } .duvidas__lado .sec__txt { margin-top: calc(30 * var(--u)); } .duvidas__lado .botao { margin-top: calc(44 * var(--u)); } .duvidas__lista { grid-column: 2; border-top: 1px solid var(--linha); } .duvida { border-bottom: 1px solid var(--linha); } .duvida summary { display: grid; grid-template-columns: calc(70 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: calc(30 * var(--u)) 0; list-style: none; cursor: pointer; font: 500 max(18px, calc(30 * var(--u))) / 1.2 var(--archivo); font-stretch: 100%; } .duvida summary::-webkit-details-marker { display: none; } .duvida summary small { font: 400 max(12px, calc(15 * var(--u))) / 1 var(--inter); color: var(--mudo); } .duvida summary i { position: relative; flex: none; width: max(38px, calc(46 * var(--u))); aspect-ratio: 1; background: none; transition: color .4s; } .duvida summary i::before, .duvida summary i::after { content: ""; position: absolute; left: 32%; right: 32%; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .5s cubic-bezier(.7, 0, .2, 1); } .duvida summary i::after { transform: rotate(90deg); } .duvida[open] summary i { color: #8fb0ff; } .duvida[open] summary i::after { transform: rotate(0deg); } .duvida summary:hover span { color: #8fb0ff; } .duvida__r { overflow: hidden; } .duvida__r p { max-width: calc(780 * var(--u)); padding: 0 0 calc(32 * var(--u)) calc(70 * var(--u) + 20px); font-size: max(15px, calc(19 * var(--u))); line-height: 1.55; color: var(--mudo); } /* ---------- granulado nas seções: fica dentro da seção e mexe só a textura ---------- */ .ruido--sec::after { --ruido: .1; inset: 0; background-size: 220px; animation: grao-pos 1s steps(6) infinite; } @keyframes grao-pos { 0% { background-position: 0 0; } 20% { background-position: -30px 20px; } 40% { background-position: 25px -35px; } 60% { background-position: -15px 40px; } 80% { background-position: 35px 10px; } 100% { background-position: 0 0; } } /* ---------- onda: na troca entre seção clara e escura, a de baixo sobe por cima da anterior com a borda curva se endireitando ---------- */ .onda { position: absolute; z-index: 3; left: 0; right: 0; top: 1px; height: 26vh; translate: 0 -100%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: inherit; pointer-events: none; transform-origin: 50% 100%; } /* ---------- linhas-guia: no fundo de cada seção, abaixo de todo o conteúdo ---------- */ .sec, .projetos, .confia, .logos, .quem, .nevoa__fim { --guia: rgba(255, 255, 255, .075); isolation: isolate; } .sec--claro, .projetos, .confia, .logos, .nevoa__fim { --guia: rgba(0, 0, 0, .07); } .sec::before, .projetos::before, .confia::before, .logos::before, .quem::before, .nevoa__fim::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent calc(88 * var(--x)), var(--guia) 0, var(--guia) calc(88 * var(--x) + 1px), transparent 0, transparent calc(655 * var(--x)), var(--guia) 0, var(--guia) calc(655 * var(--x) + 1px), transparent 0, transparent calc(1265 * var(--x)), var(--guia) 0, var(--guia) calc(1265 * var(--x) + 1px), transparent 0, transparent calc(100% - 88 * var(--x) - 1px), var(--guia) 0, var(--guia) calc(100% - 88 * var(--x)), transparent 0); } /* ---------- chamada final: frase que se abre nos seis pilares (seção presa na rolagem) ---------- */ .chamada { position: relative; z-index: 3; isolation: isolate; overflow: hidden; background: rgba(0, 0, 0, 1); color: #fff; } /* o fundo some na abertura e o contato aparece por trás */ .chamada.ruido--sec::after { --ruido: var(--ch-ruido, .1); } .chamada__palco { position: relative; height: 100vh; height: 100svh; display: grid; place-items: center; padding-bottom: calc(150 * var(--u)); } .chamada__tit { position: absolute; z-index: 2; display: grid; justify-items: start; font: 500 max(34px, calc(116 * var(--u))) / .98 var(--archivo); font-stretch: 100%; letter-spacing: -.03em; text-transform: uppercase; } .chamada__tit > span { display: block; white-space: nowrap; will-change: transform; } .chamada__tit > span:nth-child(2) { padding-left: 1.1em; } .chamada__tit > span:nth-child(4) { padding-left: .55em; } .chamada__mapa { position: relative; width: min(calc(1200 * var(--u)), 92vw); aspect-ratio: 1000 / 700; } .chamada__simbolo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } /* só linhas, na linguagem da grade da página */ .chamada__guia { stroke: rgba(255, 255, 255, .08); stroke-width: 1; vector-effect: non-scaling-stroke; } .chamada__a path { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1; vector-effect: non-scaling-stroke; } .chamada__liga { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1; vector-effect: non-scaling-stroke; } .chamada__canto, .chamada__ponto { position: absolute; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; background: linear-gradient(#fff, #fff) center / 100% 1px no-repeat, linear-gradient(#fff, #fff) center / 1px 100% no-repeat; } .chamada__canto { opacity: .55; } .chamada__ponto { width: 23px; height: 23px; margin: -11.5px 0 0 -11.5px; } .chamada__ponto::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; animation: ponta-pulsa 2.4s ease-in-out infinite; } @keyframes ponta-pulsa { 50% { transform: scale(1.8); opacity: 0; } } .ponta { position: absolute; width: min(calc(330 * var(--u)), 28vw); } .ponta small { font-size: max(12px, calc(14 * var(--u))); letter-spacing: .04em; color: rgba(255, 255, 255, .5); } .ponta h3 { margin-top: calc(10 * var(--u)); font: 500 max(24px, calc(44 * var(--u))) / 1.05 var(--archivo); font-stretch: 100%; letter-spacing: -.02em; color: #fff; } .ponta p { margin-top: calc(12 * var(--u)); font-size: max(14px, calc(17 * var(--u))); line-height: 1.5; color: rgba(255, 255, 255, .72); } .ponta--topo { left: 65.5%; top: 2.6%; translate: 0 -40%; } .ponta--uniao { right: 78.5%; top: 74.3%; translate: 0 -40%; text-align: right; } .ponta--base { left: 85.5%; top: 85.7%; translate: 0 -40%; } /* ---------- contato: formulário em etapas, uma pergunta por vez ---------- */ .contato { z-index: 1; padding-bottom: calc(170 * var(--u)); transform-origin: 50% 30%; } /* só na home e só quando o JS montou a versão desktop (html.sobrepor): o contato surge atrás da chamada presa e os serviços sobem por cima dos projetos. Sem a classe (JS desligado ou página aberta no layout de celular) as seções seguem uma embaixo da outra. */ @media (min-width: 900px) and (orientation: landscape), (min-width: 1200px) { html.sobrepor body.home .contato, html.sobrepor body.home .solucoes { margin-top: -100vh; } } .contato__tit { font: 600 max(38px, calc(92 * var(--u))) / 1 var(--archivo); font-stretch: 100%; letter-spacing: -.03em; color: #fff; } .contato__lado { grid-column: 1; grid-row: 2; margin-top: calc(80 * var(--u)); padding-right: calc(60 * var(--u)); } .contato__lado .sec__txt { margin-top: 0; max-width: calc(440 * var(--u)); } .contato .tf { grid-column: 2; grid-row: 2; margin-top: calc(80 * var(--u)); } .contato__lado .contato__direto { grid-template-columns: minmax(0, 1fr); margin-top: calc(56 * var(--u)); } .contato__direto { margin-top: calc(70 * var(--u)); padding-top: calc(28 * var(--u)); gap: calc(18 * var(--u)) calc(30 * var(--u)); } .contato__direto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(26 * var(--u)) calc(40 * var(--u)); margin: calc(110 * var(--u)) 0 0; padding-top: calc(36 * var(--u)); border-top: 1px solid rgba(255, 255, 255, .12); } .contato__direto dt { font-size: max(12px, calc(14 * var(--u))); color: #8a8a8a; } .contato__direto dd { margin: 4px 0 0; font-size: max(15px, calc(18 * var(--u))); } .contato__direto a:hover { text-decoration: underline; text-underline-offset: 4px; } .tf { position: relative; } .tf__barra { height: 2px; margin-bottom: calc(60 * var(--u)); background: rgba(255, 255, 255, .12); } .tf__barra i { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.7, 0, .2, 1); } .tf__passos { position: relative; } .tf__passo { display: grid; gap: calc(34 * var(--u)); padding-bottom: calc(40 * var(--u)); } .tf.js .tf__passo:not(.ativo) { display: none; } .tf__q { display: flex; align-items: baseline; gap: calc(18 * var(--u)); font: 500 max(24px, calc(48 * var(--u))) / 1.12 var(--archivo); font-stretch: 100%; letter-spacing: -.015em; color: #fff; } .tf__q small { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 500 max(13px, calc(16 * var(--u))) / 1 var(--inter); letter-spacing: 0; color: #8fb0ff; } .tf__q small::after { content: "→"; } .tf__campo { width: 100%; padding: .35em 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .3); border-radius: 0; background: none; color: #8fb0ff; font: 500 max(20px, calc(34 * var(--u))) / 1.3 var(--archivo); font-stretch: 100%; transition: border-color .3s; } .tf__campo::placeholder { color: rgba(255, 255, 255, .28); } .tf__campo:focus { outline: 0; border-color: #fff; } textarea.tf__campo { resize: vertical; font-size: max(17px, calc(24 * var(--u))); } .tf__dupla { display: grid; grid-template-columns: 1fr 1fr; gap: calc(40 * var(--u)); } .tf__opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: calc(900 * var(--u)); } .tf__opcao { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: rgba(255, 255, 255, .03); font-size: max(15px, calc(19 * var(--u))); cursor: pointer; transition: border-color .3s, background .3s; } .tf__opcao:hover { border-color: rgba(255, 255, 255, .5); } .tf__opcao input { position: absolute; opacity: 0; pointer-events: none; } .tf__opcao kbd { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; font: 600 12px / 1 var(--inter); color: #fff; transition: background .3s, color .3s; } .tf__opcao:has(input:checked) { border-color: #8fb0ff; background: rgba(0, 56, 255, .22); } .tf__opcao:has(input:checked) kbd { background: #fff; color: #000; } .tf__opcao:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; } .tf__aceite { display: flex; gap: 12px; align-items: flex-start; max-width: 460px; font-size: max(13px, calc(15 * var(--u))); color: var(--mudo); cursor: pointer; } .tf__aceite input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--azul); } .tf__acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: calc(20 * var(--u)); } .tf__dica { font-size: max(12px, calc(14 * var(--u))); color: var(--mudo); } .tf__dica b { font-weight: 500; color: #fff; } .tf__nav { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: max(12px, calc(14 * var(--u))); color: var(--mudo); } .tf__nav span { margin-right: 6px; } .tf__nav button { width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; background: none; color: #fff; font-size: 15px; cursor: pointer; transition: background .3s; } .tf__nav button:hover { background: rgba(255, 255, 255, .1); } .tf__nav button:disabled { opacity: .3; cursor: default; } .tf:not(.js) .tf__ok, .tf:not(.js) .tf__nav, .tf:not(.js) .tf__dica, .tf:not(.js) .tf__barra { display: none; } .tf.js .form__enviar { display: none; } .tf.js.no-fim .form__enviar { display: inline-flex; } .tf.js.no-fim .tf__ok, .tf.js.no-fim .tf__dica { display: none; } .form__erro { margin-top: 18px; color: #ff9c9c; font-size: 15px; } .form__ok { display: grid; gap: 12px; } .form__ok p { font: 500 max(24px, calc(44 * var(--u))) / 1.1 var(--archivo); } .form__ok span { color: var(--mudo); } .form__ok .botao { justify-self: start; margin-top: 10px; } /* ---------- rodapé ---------- */ .rodape { --ruido: .11; --mudo: var(--cinza); position: relative; overflow: hidden; background: #000; color: var(--claro); border-top: 1px solid rgba(255, 255, 255, .1); } .rodape__grade { position: relative; z-index: 3; display: grid; grid-template-columns: calc(567 * var(--x)) repeat(3, minmax(0, 1fr)); gap: 30px 0; padding: calc(150 * var(--u)) calc(88 * var(--x)) calc(60 * var(--u)); } .rodape__marca { display: grid; align-content: start; gap: calc(34 * var(--u)); } .rodape__marca p { max-width: calc(440 * var(--u)); min-width: 220px; font: 500 max(20px, calc(34 * var(--u))) / 1.15 var(--archivo); font-stretch: 100%; } .rodape__marca .botao { justify-self: start; } .rodape__col { display: grid; align-content: start; gap: 10px; font-size: max(14px, calc(17 * var(--u))); } .rodape__col > p { margin-bottom: 8px; font-size: max(12px, calc(14 * var(--u))); color: var(--mudo); } .rodape__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .rodape__col address { font-style: normal; color: var(--mudo); line-height: 1.5; } .rodape__redes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; } .rodape__palco { position: relative; height: calc(480 * var(--x)); } /* luz do rodapé em CSS: três focos (azul, ciano e branco) que derivam devagar atrás da palavra */ .rodape__luz { position: absolute; inset: -95% -10% 0 28%; filter: blur(60px); opacity: .85; pointer-events: none; -webkit-mask-image: radial-gradient(80% 75% at 75% 65%, #000 30%, transparent 75%); mask-image: radial-gradient(80% 75% at 65% 55%, #000 40%, transparent 80%); } .rodape__luz i { position: absolute; border-radius: 50%; mix-blend-mode: screen; } .rodape__luz i:nth-child(1) { right: -5%; top: 15%; width: 80%; aspect-ratio: 1.4; background: radial-gradient(closest-side, rgba(0, 56, 255, .95), transparent); animation: rodape-luz 16s ease-in-out infinite alternate; } .rodape__luz i:nth-child(2) { right: 5%; top: 5%; width: 50%; aspect-ratio: 1.1; background: radial-gradient(closest-side, rgba(63, 184, 255, .8), transparent); animation: rodape-luz 12s ease-in-out -4s infinite alternate-reverse; } .rodape__luz i:nth-child(3) { right: 20%; top: 35%; width: 26%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(255, 255, 255, .5), transparent); animation: rodape-luz 10s ease-in-out -2s infinite alternate; } @keyframes rodape-luz { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-10%, 6%) scale(1.12); } 100% { transform: translate(-22%, -4%) scale(.92); } } .rodape__palavra { position: absolute; left: 0; right: 0; bottom: calc(-40 * var(--x)); z-index: 1; text-align: center; white-space: nowrap; font: 400 calc(380 * var(--x)) / 1 var(--grotesk); letter-spacing: -.02em; background: linear-gradient(180deg, #fff 10%, rgba(255, 255, 255, .08) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; } .rodape__palavra .letra { display: inline-block; background: inherit; -webkit-background-clip: text; background-clip: text; } .rodape__base { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: space-between; gap: 20px; padding: calc(26 * var(--u)) calc(88 * var(--x)); border-top: 1px solid rgba(255, 255, 255, .1); font-size: max(12px, calc(15 * var(--u))); color: var(--mudo); } .rodape__base a:hover { color: #fff; } .rodape__topo-mob { display: none; align-items: center; gap: 8px; margin-top: 14px; color: #fff; } /* ---------- WhatsApp fixo ---------- */ .zap { position: fixed; right: 28px; bottom: 28px; z-index: 44; display: flex; align-items: center; gap: 14px; opacity: 0; translate: 0 20px; transition: opacity .6s, translate .6s cubic-bezier(.2, .8, .2, 1); } .zap.visivel { opacity: 1; translate: 0 0; } html.menu-aberto .zap { opacity: 0; pointer-events: none; } .zap__btn { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 14px 34px -12px rgba(37, 211, 102, .7); transition: scale .4s cubic-bezier(.2, .8, .2, 1); } .zap__btn svg { width: 30px; height: 30px; } .zap__btn::before, .zap__btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: zap-pulso 2.6s cubic-bezier(.2, .8, .2, 1) infinite; } .zap__btn::after { animation-delay: 1.3s; } @keyframes zap-pulso { 0% { scale: 1; opacity: .7; } 100% { scale: 1.9; opacity: 0; } } .zap:hover .zap__btn { scale: 1.08; } .zap__balao { max-width: 270px; padding: 13px 17px; border-radius: 15px 15px 4px 15px; background: #fff; color: #0a0a0a; font: 500 14px / 1.35 var(--inter); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45); opacity: 0; translate: 12px 0; scale: .96; transform-origin: 100% 100%; pointer-events: none; transition: opacity .45s, translate .5s cubic-bezier(.2, .8, .2, 1), scale .5s cubic-bezier(.2, .8, .2, 1); } .zap:hover .zap__balao, .zap.falando .zap__balao { opacity: 1; translate: 0 0; scale: 1; } /* ---------- showreel ---------- */ .showreel { width: min(1280px, 92vw); padding: 0; border: 0; border-radius: 15px; background: #000; overflow: visible; } .showreel::backdrop { background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .showreel video { display: block; width: 100%; border-radius: 15px; } .showreel__fechar { position: absolute; right: 0; top: -52px; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 15px; background: none; color: #fff; font-size: 22px; cursor: pointer; } /* ---------- cursor próprio (só com mouse): ponto + anel em modo diferença, para aparecer no claro e no escuro ---------- */ html.cursor-proprio, html.cursor-proprio a, html.cursor-proprio button, html.cursor-proprio summary, html.cursor-proprio label, html.cursor-proprio .arco__roda { cursor: none; } .cursor { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .4s; } .cursor.ativo { opacity: 1; } .cursor i { position: absolute; left: 0; top: 0; display: grid; place-items: center; border-radius: 50%; -webkit-backdrop-filter: invert(1) grayscale(1); backdrop-filter: invert(1) grayscale(1); } .cursor__ponto { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; transition: opacity .3s; } /* anel vazado: só a borda inverte o que está atrás */ .cursor__anel { width: 38px; height: 38px; margin: -19px 0 0 -19px; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); transition: width .45s cubic-bezier(.2, .8, .2, 1), height .45s cubic-bezier(.2, .8, .2, 1), margin .45s cubic-bezier(.2, .8, .2, 1); } .cursor__anel span { font: 500 13px / 1 var(--inter); color: #fff; opacity: 0; transition: opacity .3s; } .cursor.link .cursor__anel { width: 64px; height: 64px; margin: -32px 0 0 -32px; -webkit-mask: none; mask: none; } .cursor.link .cursor__ponto { opacity: 0; } .cursor.ver .cursor__anel, .cursor.arrasta .cursor__anel { width: 92px; height: 92px; margin: -46px 0 0 -46px; -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: #0a0a0a; } .cursor.ver .cursor__anel span, .cursor.arrasta .cursor__anel span { opacity: 1; } .cursor.ver .cursor__ponto, .cursor.arrasta .cursor__ponto, .cursor.texto .cursor__anel { opacity: 0; } .cursor.aperta .cursor__anel { width: 28px; height: 28px; margin: -14px 0 0 -14px; } /* ---------- celular e tablet em pé ---------- */ @media (max-width: 899px), (max-width: 1199px) and (orientation: portrait) { .sec { grid-template-columns: minmax(0, 1fr); padding: 96px 20px; } .sec__rot, .sec__corpo { grid-column: 1; } .sec__rot { padding: 0 0 18px; font-size: 14px; } .sec__tit { font-size: clamp(30px, 8vw, 46px); max-width: none; } .sec__txt { font-size: 16px; margin-top: 20px; max-width: none; } .pares { padding-top: 120px; } .pares__cab { display: none; } .pares .sec__rot { margin-bottom: 14px; } .pares__lista { margin-top: 36px; } .par { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; font-size: 20px; } .par__depois { padding-left: 18px; } .projetos__palco { height: auto; overflow: visible; } .projetos__trilho { display: grid; width: auto; gap: 44px; padding: 96px 20px 90px; } .projetos__intro, .proj, .projetos__fim { width: auto; min-width: 0; margin: 0; } .projetos__fim { padding: 30px 0 0; border-top: 1px solid rgba(0, 0, 0, .12); } .proj__moldura { padding: 10px; } .proj__rodape { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px 4px 6px; } .projetos__tit { font-size: clamp(34px, 9vw, 52px); } .projetos__txt { font-size: 15px; } .projetos__fim-tit { font-size: clamp(30px, 8vw, 44px); } .proj__nome { font-size: 24px; } .proj__txt { font-size: 15px; } .zap { right: 16px; bottom: 16px; } .zap__btn { width: 54px; height: 54px; } .zap__balao { max-width: 210px; font-size: 13px; } .duvidas__lado { position: static; padding: 0; } .duvidas__tit { font-size: clamp(30px, 8vw, 46px); } .duvidas__lado .botao { margin-top: 26px; } .duvidas__lista { grid-column: 1; margin-top: 44px; } .duvida summary { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; font-size: 18px; padding: 20px 0; } .duvida__r p { padding-left: 0; font-size: 15px; } .confia__cab { padding-bottom: 10px; } .arco__roda { height: 400px; min-height: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .arco__card { top: 30px; width: 250px; min-height: 290px; padding: 24px; transform-origin: 50% 1400px; } .arco__card blockquote { font-size: 19px; } .logos { padding: 50px 20px 80px; } .logos__lista { gap: 18px 26px; max-width: none; } .logos__lista li { width: calc(var(--w) * .62px); min-width: 0; } .quem { padding: 96px 20px 90px; } .quem__topo { grid-template-columns: minmax(0, 1fr); gap: 40px; } .quem__autores { flex-wrap: wrap; gap: 16px; } .quem__fotos img { width: 104px; min-width: 0; } .quem__frase { font-size: 24px; text-wrap: wrap; } .quem__recuo { display: none; } .quem__div { margin: 56px 0; } .quem__base { flex-direction: column; align-items: flex-start; } .quem__resposta { min-width: 0; font-size: 20px; } .nevoa__fim::before, .sec::before, .projetos::before, .confia::before, .logos::before, .quem::before { display: none; } .duvidas { border-top: 1px solid rgba(255, 255, 255, .1); } .tf__barra { margin-bottom: 34px; } .tf__q { font-size: 24px; } .tf__campo { font-size: 20px; } .tf__dupla, .tf__opcoes { grid-template-columns: minmax(0, 1fr); gap: 10px; } .tf__dupla { gap: 24px; } .tf__nav { width: 100%; margin-left: 0; } .solucoes__grade { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 50px; } .sol, .sol--automacao { grid-column: auto; flex-direction: column; min-height: 0; --f: min(2.15vw, 8.5px); } .sol__ilu, .sol--automacao .sol__ilu { flex: none; height: 74vw; min-height: 0; -webkit-mask-image: linear-gradient(#000 55%, transparent 96%); mask-image: linear-gradient(#000 55%, transparent 96%); } .sol__txt, .sol--automacao .sol__txt { padding: 0 22px 26px; } .sol__nome { font-size: 22px; } .sol__desc { font-size: 15px; } .sol--apps { --f: min(2.9vw, 11px); } .passos { margin: 50px -20px 0; } .passo { grid-template-columns: 40px minmax(0, 1fr); gap: 8px 0; padding: 24px 20px; } .passo__num { padding-top: .35em; } .passo__tit { font-size: 24px; } .passo__txt { grid-column: 2; font-size: 15px; } .passo__a { display: none; } .so-desk { display: none; } .sol::before { inset: -6px; } .sol .serv__palco, .sol--sites .serv__palco, .sol--sistemas .serv__palco, .sol--ia .serv__palco { top: 22px; font-size: var(--f); } .contato__tit { font-size: clamp(34px, 10vw, 52px); } .contato { display: flex; flex-direction: column; } .contato__lado { display: contents; } .contato__lado .sec__txt { order: 2; margin-top: 22px; } .contato .tf { order: 3; } .contato__lado .contato__direto { order: 4; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); } .contato .sec__corpo { order: 1; } .contato .tf { margin-top: 50px; } .chamada__tit { font-size: clamp(30px, 9.6vw, 52px); } .chamada { background: #000; } .chamada__palco { height: auto; min-height: 70svh; display: grid; place-items: center; padding: 96px 20px 80px; } .chamada__tit { position: relative; } .chamada__mapa { width: 100%; aspect-ratio: auto; margin-top: 40px; } .chamada__simbolo { position: relative; inset: auto; height: auto; aspect-ratio: 1000 / 700; } .chamada__liga, .chamada__ponto, .chamada__canto, .chamada__guia { display: none; } .chamada__pontas { display: grid; gap: 28px; margin-top: 10px; } .ponta { position: static; translate: none; width: auto; text-align: left !important; } .ponta h3 { font-size: 26px; } .ponta p { font-size: 15px; } .rodape__grade { grid-template-columns: 1fr 1fr; gap: 40px 20px; padding: 80px 20px 40px; } .rodape__marca { grid-column: 1 / -1; } .rodape__palco { height: calc(30vw + 58px); } .rodape__palavra { font-size: 21vw; bottom: 46px; letter-spacing: -.03em; } .rodape__luz { inset: -160% -40% 0 -10%; } .rodape__topo-mob { display: inline-flex; } .rodape__base [data-topo] { display: none; } .rodape__base { flex-wrap: wrap; padding: 20px; } } /* ===================================================================== Páginas internas — mesma gramática da home: prancha de 1920 (--x/--u), rótulo na coluna 88→655, conteúdo a partir da 2ª linha-guia, preto/branco, linhas finas, cruzes nos cantos e o azul só no detalhe. ===================================================================== */ /* ---------- topo: a luz do hero, trilha à esquerda, título grande na 2ª coluna ---------- */ .topo { --guia: rgba(255, 255, 255, .075); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: calc(567 * var(--x)) minmax(0, 1fr); align-items: end; min-height: max(620px, 100svh); padding: calc(220 * var(--u)) calc(88 * var(--x)) calc(120 * var(--u)); background: #000; color: var(--claro); } .topo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent calc(88 * var(--x)), var(--guia) 0, var(--guia) calc(88 * var(--x) + 1px), transparent 0, transparent calc(655 * var(--x)), var(--guia) 0, var(--guia) calc(655 * var(--x) + 1px), transparent 0, transparent calc(1265 * var(--x)), var(--guia) 0, var(--guia) calc(1265 * var(--x) + 1px), transparent 0, transparent calc(100% - 88 * var(--x) - 1px), var(--guia) 0, var(--guia) calc(100% - 88 * var(--x)), transparent 0); } .topo.ruido::after { --ruido: .09; } .topo__luz { position: absolute; left: -4%; top: -6%; width: 108%; height: 112%; z-index: -2; -webkit-mask-image: linear-gradient(#000 55%, transparent 98%); mask-image: linear-gradient(#000 55%, transparent 98%); } .topo__trilha { grid-column: 1; align-self: end; display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 0 calc(40 * var(--u)) calc(14 * var(--u)) 0; font-size: max(13px, calc(16 * var(--u))); color: var(--cinza); } .topo__trilha a:hover { color: #fff; } .topo__trilha [aria-current] { color: #fff; } .topo__corpo { grid-column: 2; display: grid; justify-items: start; } .topo__tit { max-width: calc(1120 * var(--u)); font: 500 max(36px, calc(96 * var(--u))) / 1.02 var(--archivo); font-stretch: 100%; letter-spacing: -.03em; text-wrap: balance; } .topo__lead { max-width: calc(660 * var(--u)); margin-top: calc(40 * var(--u)); font-size: max(16px, calc(22 * var(--u))); line-height: 1.45; color: var(--cinza); } .topo__acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 18px calc(36 * var(--u)); margin-top: calc(50 * var(--u)); } .topo__acoes .link-sutil { color: #fff; } /* página de serviço: o título fica mais estreito e a ilustração viva do serviço ocupa a direita */ .topo--ilu .topo__tit { max-width: calc(620 * var(--u)); font-size: max(34px, calc(72 * var(--u))); } .topo--ilu .topo__lead { max-width: calc(540 * var(--u)); } .topo__ilu { position: absolute; z-index: 1; left: calc(1300 * var(--x)); right: calc(88 * var(--x)); top: calc(160 * var(--u)); bottom: calc(80 * var(--u)); -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(75% 70% at 50% 50%, #000 55%, transparent 100%); } .topo__ilu .serv__palco { font-size: calc(11 * var(--u)); } .topo__ilu .serv__palco.d-apps { font-size: calc(12.5 * var(--u)); } html.js:not(.ready) .topo__tit, html.js:not(.ready) .topo__lead, html.js:not(.ready) .topo__acoes, html.js:not(.ready) .topo__trilha, html.js:not(.ready) .topo__luz, html.js:not(.ready) .topo__ilu { visibility: hidden; } /* ---------- o que está incluído: quadros retos com cruzes, ícone fino, título e texto ---------- */ .inc__grade { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(24 * var(--u)); margin-top: calc(100 * var(--u)); } .inc { position: relative; display: grid; align-content: start; gap: calc(14 * var(--u)); min-height: calc(300 * var(--u)); padding: calc(40 * var(--u)); border: 1px solid rgba(255, 255, 255, .1); background: radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .025), transparent 70%), #020203; transition: border-color .6s; } .inc::before { content: ""; position: absolute; inset: -8px; pointer-events: none; opacity: .7; background: linear-gradient(#fff, #fff) 0 7px / 15px 1px no-repeat, linear-gradient(#fff, #fff) 7px 0 / 1px 15px no-repeat, linear-gradient(#fff, #fff) 100% calc(100% - 7px) / 15px 1px no-repeat, linear-gradient(#fff, #fff) calc(100% - 7px) 100% / 1px 15px no-repeat; } .inc:hover { border-color: rgba(255, 255, 255, .24); } .inc .icone { width: max(26px, calc(34 * var(--u))); height: auto; margin-bottom: calc(40 * var(--u)); color: #8fb0ff; transition: translate .6s cubic-bezier(.2, .8, .2, 1); } .inc:hover .icone { translate: 0 -4px; } .inc__tit { font: 500 max(20px, calc(28 * var(--u))) / 1.1 var(--archivo); font-stretch: 100%; letter-spacing: -.015em; color: #fff; } .inc__txt { font-size: max(14px, calc(16 * var(--u))); line-height: 1.5; color: rgba(255, 255, 255, .58); } /* formatos usa as linhas do "Como trabalhamos", logo abaixo do incluído */ .formatos { padding-top: calc(80 * var(--u)); } /* ---------- planos ---------- */ .planos__grade { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(24 * var(--u)); margin-top: calc(100 * var(--u)); } .plano { position: relative; display: flex; flex-direction: column; gap: calc(14 * var(--u)); padding: calc(40 * var(--u)) calc(34 * var(--u)); border: 1px solid rgba(0, 0, 0, .14); background: #fff; } .plano::before { content: ""; position: absolute; inset: -8px; pointer-events: none; background: linear-gradient(#0a0a0a, #0a0a0a) 0 7px / 15px 1px no-repeat, linear-gradient(#0a0a0a, #0a0a0a) 7px 0 / 1px 15px no-repeat, linear-gradient(#0a0a0a, #0a0a0a) 100% calc(100% - 7px) / 15px 1px no-repeat, linear-gradient(#0a0a0a, #0a0a0a) calc(100% - 7px) 100% / 1px 15px no-repeat; } .plano--destaque { border-color: #000; background: #000; color: #fff; } .plano__selo { position: absolute; right: calc(24 * var(--u)); top: calc(24 * var(--u)); padding: 5px 10px; border-radius: 99px; background: var(--azul); font-size: max(11px, calc(12 * var(--u))); color: #fff; } .plano__nome { font: 500 max(22px, calc(32 * var(--u))) / 1.05 var(--archivo); font-stretch: 100%; letter-spacing: -.02em; } .plano__para { min-height: 2.9em; font-size: max(14px, calc(16 * var(--u))); line-height: 1.45; color: var(--mudo); } .plano--destaque .plano__para, .plano--destaque .plano__itens { color: var(--cinza); } .plano__preco { display: flex; align-items: baseline; gap: 6px; margin-top: calc(16 * var(--u)); padding-top: calc(24 * var(--u)); border-top: 1px solid var(--linha); } .plano--destaque .plano__preco { border-color: rgba(255, 255, 255, .16); } .plano__preco b { font: 500 max(36px, calc(56 * var(--u))) / 1 var(--archivo); font-stretch: 100%; letter-spacing: -.03em; } .plano__preco small { font-size: max(13px, calc(15 * var(--u))); color: var(--mudo); } .plano__itens { display: grid; gap: 10px; margin: calc(10 * var(--u)) 0 calc(30 * var(--u)); font-size: max(14px, calc(16 * var(--u))); color: #444; } .plano__itens li { position: relative; padding-left: 20px; } .plano__cab { display: grid; gap: calc(14 * var(--u)); } /* quatro planos: a grade ocupa a largura toda da seção para os cartões caberem lado a lado */ .planos__grade--4 { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); } .plano__preco--consulta b { font-size: max(28px, calc(40 * var(--u))); } .plano__itens li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--azul); } .plano .botao { align-self: flex-start; margin-top: auto; } .sec .plano--destaque .botao { background: #fff; color: #000; } /* ---------- portfólio em grade ---------- */ .portfolio { padding-bottom: calc(170 * var(--u)); background: #ededed; } .portfolio__cab { display: grid; gap: calc(50 * var(--u)); } .portfolio__grade { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(90 * var(--u)) calc(50 * var(--u)); margin-top: calc(100 * var(--u)); } .portfolio__grade .proj { width: auto; min-width: 0; } .proj__seg { margin-bottom: calc(12 * var(--u)); font-size: max(12px, calc(14 * var(--u))); letter-spacing: .02em; text-transform: uppercase; color: var(--mudo); } .portfolio__fim { display: grid; align-content: center; justify-items: start; gap: calc(40 * var(--u)); padding: calc(60 * var(--u)); border: 1px dashed rgba(0, 0, 0, .2); } .portfolio__fim .botao { background: #000; color: #fff; } .portfolio--curto { background: #fff; } .portfolio--curto .portfolio__grade { margin-top: calc(80 * var(--u)); } .portfolio__todos { grid-column: 2; justify-self: start; margin-top: calc(70 * var(--u)); } .filtro { display: flex; flex-wrap: wrap; gap: 10px; } .filtro__op { padding: 10px 18px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 99px; background: none; color: inherit; font: 500 max(13px, calc(15 * var(--u))) / 1 var(--inter); cursor: pointer; transition: background .35s, color .35s, border-color .35s; } .filtro__op:hover { border-color: #000; } .filtro__op.ativo { border-color: #000; background: #000; color: #fff; } /* ---------- depoimentos em grade ---------- */ .depos { background: #ededed; } .depos__topo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: calc(24 * var(--u)); margin-top: calc(100 * var(--u)); } .depos__destaque { margin: 0; padding: calc(60 * var(--u)); background: #fff; border: 1px solid rgba(0, 0, 0, .06); } .depos__destaque blockquote { margin: calc(30 * var(--u)) 0 0; font: 500 max(20px, calc(34 * var(--u))) / 1.3 var(--archivo); font-stretch: 100%; letter-spacing: -.01em; } .depos__destaque figcaption, .depos__card figcaption { display: flex; align-items: center; gap: 14px; margin-top: calc(40 * var(--u)); font-size: max(13px, calc(16 * var(--u))); font-weight: 500; } .depos__destaque figcaption small { display: block; font-size: .9em; font-weight: 400; color: #6b6b6b; } .arco__av b { font: 600 max(15px, calc(18 * var(--u))) / 1 var(--archivo); color: #fff; } .depos__grade { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(24 * var(--u)); margin-top: calc(24 * var(--u)); } .depos__card blockquote { font-size: max(18px, calc(26 * var(--u))); line-height: 1.3; } .depos__card { position: relative; left: auto; top: auto; width: auto; min-width: 0; transform: none; } .depos__nota { display: grid; align-content: space-between; justify-items: start; gap: 14px; padding: calc(40 * var(--u)); background: #000; color: #fff; } .depos__num { font: 500 max(64px, calc(140 * var(--u))) / .9 var(--archivo); font-stretch: 100%; letter-spacing: -.05em; } .depos__fonte { font-size: max(14px, calc(17 * var(--u))); color: var(--cinza); } .depos__nota .link-sutil { color: #fff; } .depos__base { grid-column: 2; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; margin-top: calc(80 * var(--u)); padding-top: calc(36 * var(--u)); border-top: 1px solid var(--linha); } .depos__base p { max-width: calc(520 * var(--u)); font: 500 max(18px, calc(26 * var(--u))) / 1.2 var(--archivo); font-stretch: 100%; } /* ---------- outros serviços / caminhos: links grandes, um por linha ---------- */ .outros { position: relative; display: grid; grid-template-columns: calc(567 * var(--x)) minmax(0, 1fr); padding: calc(160 * var(--u)) calc(88 * var(--x)); background: #fff; color: #0a0a0a; } .outros__lista { grid-column: 2; border-top: 1px solid rgba(0, 0, 0, .12); } .outros__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: calc(40 * var(--u)); padding: calc(30 * var(--u)) 0; border-bottom: 1px solid rgba(0, 0, 0, .12); } .outros__item span { font: 500 max(22px, calc(44 * var(--u))) / 1.05 var(--archivo); font-stretch: 100%; letter-spacing: -.02em; transition: translate .6s cubic-bezier(.7, 0, .2, 1), color .4s; } .outros__item small { font-size: max(14px, calc(16 * var(--u))); line-height: 1.45; color: #6b6b6b; } .outros__item .botao__seta { font-size: max(16px, calc(22 * var(--u))); } .outros__item:hover span { translate: calc(20 * var(--u)) 0; color: var(--azul); } .outros__item:hover .botao__seta svg:first-child { transform: translate(110%, -110%); } .outros__item:hover .botao__seta svg + svg { transform: translate(0, 0); } /* ---------- sócios (Sobre): foto grande, papel, nome, um pouco de cada um e a frase ---------- */ .socios__grade { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(70 * var(--u)); margin-top: calc(100 * var(--u)); } .socio { display: grid; align-content: start; } .socio__foto { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #e5e5e5; } .socio__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.05); transition: filter .8s, scale 1.2s cubic-bezier(.2, .8, .2, 1); } .socio:hover .socio__foto img { filter: none; scale: 1.03; } .socio__foto::before, .socio__foto::after { content: ""; position: absolute; z-index: 1; width: 15px; height: 15px; background: linear-gradient(#fff, #fff) center / 100% 1px no-repeat, linear-gradient(#fff, #fff) center / 1px 100% no-repeat; } .socio__foto::before { left: 14px; top: 14px; } .socio__foto::after { right: 14px; bottom: 14px; } .socio__papel { margin-top: calc(30 * var(--u)); font-size: max(12px, calc(14 * var(--u))); letter-spacing: .02em; text-transform: uppercase; color: var(--mudo); } .socio__nome { margin-top: calc(10 * var(--u)); font: 500 max(26px, calc(44 * var(--u))) / 1.05 var(--archivo); font-stretch: 100%; letter-spacing: -.02em; } .socio__bio { max-width: calc(520 * var(--u)); margin-top: calc(20 * var(--u)); font-size: max(15px, calc(18 * var(--u))); line-height: 1.55; color: #444; } .socio__frase { position: relative; max-width: calc(520 * var(--u)); margin: calc(28 * var(--u)) 0 0; padding-left: calc(24 * var(--u)); border-left: 2px solid var(--azul); font: 500 max(17px, calc(22 * var(--u))) / 1.3 var(--archivo); font-stretch: 100%; } /* ---------- história com os números no fim ---------- */ .historia { padding-bottom: calc(150 * var(--u)); } .historia .sec__corpo { display: grid; justify-items: start; } .historia__tit { max-width: calc(1000 * var(--u)); font: 500 max(30px, calc(60 * var(--u))) / 1.08 var(--archivo); font-stretch: 100%; letter-spacing: -.01em; text-wrap: balance; } .historia__txt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(40 * var(--u)); margin-top: calc(70 * var(--u)); } .historia__txt p { font-size: max(15px, calc(18 * var(--u))); line-height: 1.6; color: var(--cinza); } .historia .botao { margin-top: calc(60 * var(--u)); } .historia__num { margin-top: calc(130 * var(--u)); border-color: rgba(255, 255, 255, .14); } .historia__num span { color: var(--cinza); } /* ---------- símbolo (Sobre): a frase se abre, o A é desenhado em linhas e a câmera passa por cada ponta ---------- */ .simbolo { position: relative; isolation: isolate; overflow: hidden; background: #000; color: #fff; } /* o conjunto (A + textos) fica no centro da tela: os textos da direita pesam mais, então o mapa recua um pouco */ .simbolo .chamada__palco { padding-bottom: 0; } .simbolo .chamada__mapa { width: min(calc(1100 * var(--u)), 80vw); left: calc(-40 * var(--u)); } /* left, e não translate: o GSAP cuida do transform no zoom */ /* ---------- números ---------- */ .faixa-num__lista { grid-column: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--linha); } .faixa-num__lista li { display: grid; gap: 10px; padding: calc(40 * var(--u)) calc(24 * var(--u)) 0 0; } .faixa-num__lista b { font: 500 max(44px, calc(96 * var(--u))) / 1 var(--archivo); font-stretch: 100%; letter-spacing: -.04em; } .faixa-num__lista span { font-size: max(14px, calc(17 * var(--u))); color: var(--mudo); } /* ---------- escritório ---------- */ .local__corpo { display: grid; justify-items: start; } .local__dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px calc(40 * var(--u)); width: 100%; margin: calc(80 * var(--u)) 0 calc(50 * var(--u)); padding-top: calc(36 * var(--u)); border-top: 1px solid var(--linha); } .local__dados dt { font-size: max(12px, calc(14 * var(--u))); color: var(--mudo); } .local__dados dd { margin: 6px 0 0; font-size: max(15px, calc(19 * var(--u))); line-height: 1.45; } /* mapa do endereço em preto e branco, na moldura reta com cruzes; ganha cor ao passar o mouse */ .local__mapa { grid-column: 2; position: relative; margin-top: calc(70 * var(--u)); padding: calc(14 * var(--u)); border: 1px solid rgba(0, 0, 0, .14); } .local__mapa::before, .local__mapa::after { content: ""; position: absolute; width: 15px; height: 15px; background: linear-gradient(#0a0a0a, #0a0a0a) center / 100% 1px no-repeat, linear-gradient(#0a0a0a, #0a0a0a) center / 1px 100% no-repeat; } .local__mapa::before { left: -8px; top: -8px; } .local__mapa::after { right: -8px; bottom: -8px; } .local__mapa iframe { display: block; width: 100%; aspect-ratio: 21 / 8; border: 0; filter: grayscale(1) contrast(1.15) brightness(.97); transition: filter .8s; } .local__mapa:hover iframe { filter: none; } /* ---------- texto corrido (privacidade, termos) ---------- */ .prosa { max-width: calc(1040 * var(--u)); font-size: max(16px, calc(21 * var(--u))); line-height: 1.65; color: #333; } .prosa > * + * { margin-top: 1em; } .prosa h2, .prosa h3 { margin-top: 1.8em; font: 500 max(22px, calc(36 * var(--u))) / 1.15 var(--archivo); font-stretch: 100%; color: #0a0a0a; } .prosa ul, .prosa ol { padding-left: 1.2em; list-style: disc; } .prosa a { text-decoration: underline; text-underline-offset: 3px; } /* política: índice, tabela de cookies e link em forma de botão */ .prosa__indice { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2em; } .prosa__indice a { padding: 8px 14px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 99px; font-size: max(13px, calc(14 * var(--u))); text-decoration: none; transition: border-color .3s, background .3s; } .prosa__indice a:hover { border-color: #000; } /* no desktop o índice vira uma lista presa na coluna da esquerda, e o texto ocupa a coluna da direita */ @media (min-width: 900px) and (orientation: landscape), (min-width: 1200px) { .prosa-sec { grid-template-rows: auto 1fr; } .prosa-sec .prosa { grid-row: 1 / span 2; } .prosa__indice { grid-column: 1; grid-row: 2; position: sticky; top: 120px; flex-direction: column; align-items: flex-start; gap: 0; margin: calc(40 * var(--u)) 0 0; padding-right: calc(60 * var(--u)); } .prosa__indice a { padding: calc(10 * var(--u)) 0; border: 0; border-radius: 0; font-size: max(14px, calc(17 * var(--u))); color: #6b6b6b; transition: color .3s; } .prosa__indice a:hover, .prosa__indice a.ativo { color: #000; } .prosa__indice a.ativo::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px; vertical-align: middle; background: #0038ff; } } .prosa h2[id] { scroll-margin-top: 110px; } .prosa strong { color: #0a0a0a; font-weight: 600; } .prosa__tabela { overflow-x: auto; border: 1px solid rgba(0, 0, 0, .12); } .prosa table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .88em; } .prosa th, .prosa td { padding: 12px 14px; border-bottom: 1px solid rgba(0, 0, 0, .1); text-align: left; vertical-align: top; } .prosa th { font-weight: 600; color: #0a0a0a; background: #f4f4f4; } .prosa tr:last-child td { border-bottom: 0; } .prosa code { font-size: .9em; } .prosa__link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* mapa bloqueado até a permissão para conteúdo de terceiros */ .local__mapa { min-height: 200px; } .local__mapa-aviso { position: absolute; inset: calc(14 * var(--u)); display: grid; place-content: center; justify-items: center; gap: 18px; padding: 20px; background: repeating-linear-gradient(135deg, #f2f2f2 0 12px, #ececec 12px 24px); text-align: center; } .local__mapa-aviso p { max-width: 380px; font-size: max(14px, calc(16 * var(--u))); line-height: 1.45; color: #444; } .local__mapa-aviso .botao { background: #000; color: #fff; } /* ---------- aviso de cookies: quadro escuro no canto, com cruzes, sem cobrir a página ---------- */ .botao--contorno { background: none !important; color: inherit !important; box-shadow: inset 0 0 0 1px currentColor; } .cookies { position: fixed; left: 24px; bottom: 24px; z-index: 60; display: grid; gap: 18px; width: min(440px, calc(100vw - 32px)); padding: 24px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(8, 8, 10, .94); color: #f5f5f5; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); opacity: 0; translate: 0 20px; transition: opacity .45s, translate .45s cubic-bezier(.2, .8, .2, 1); } .cookies.visivel { opacity: 1; translate: 0 0; } .cookies::before { content: ""; position: absolute; inset: -8px; pointer-events: none; background: linear-gradient(#fff, #fff) 0 7px / 15px 1px no-repeat, linear-gradient(#fff, #fff) 7px 0 / 1px 15px no-repeat, linear-gradient(#fff, #fff) 100% calc(100% - 7px) / 15px 1px no-repeat, linear-gradient(#fff, #fff) calc(100% - 7px) 100% / 1px 15px no-repeat; } .cookies__tit { font: 500 20px / 1.15 var(--archivo); } .cookies__txt { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #bdbdbd; } .cookies__txt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .cookies__pref { display: grid; border-top: 1px solid rgba(255, 255, 255, .12); } .cookies__op { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); cursor: pointer; } .cookies__op b { display: block; font-size: 14px; font-weight: 600; } .cookies__op small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: #9a9a9a; } .cookies__op input { position: absolute; opacity: 0; pointer-events: none; } .cookies__op i { position: relative; flex: none; width: 40px; height: 22px; border-radius: 99px; background: #333; transition: background .3s; } .cookies__op i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #9a9a9a; transition: left .35s cubic-bezier(.6, 0, .2, 1), background .3s; } .cookies__op input:checked + i { background: var(--azul); } .cookies__op input:checked + i::after { left: 21px; background: #fff; } .cookies__op input:disabled + i { opacity: .55; } .cookies__op input:focus-visible + i { outline: 2px solid #8fb0ff; outline-offset: 2px; } .cookies__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .cookies__acoes .botao { height: 40px; font-size: 14px; } .cookies__mais { padding: 0; border: 0; background: none; color: #fff; font: 500 14px / 1 var(--inter); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } html.menu-aberto .cookies { opacity: 0; pointer-events: none; } .rodape__cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } .rodape__cookies:hover { color: #fff; } /* ---------- pré-briefing: o contato da home com mais perguntas, na luz do hero ---------- */ .briefing { min-height: 100svh; padding-top: calc(220 * var(--u)); overflow: hidden; } .briefing .topo__luz { height: 70%; } .tf__nota { margin-top: calc(-14 * var(--u)); font-size: max(14px, calc(16 * var(--u))); color: var(--mudo); } .tf__aceite a { text-decoration: underline; text-underline-offset: 3px; } /* ---------- rodapé: endereço sem quebrar no meio ---------- */ .rodape__col address span { white-space: nowrap; } /* ---------- celular e tablet em pé ---------- */ @media (max-width: 899px), (max-width: 1199px) and (orientation: portrait) { .topo { grid-template-columns: minmax(0, 1fr); align-content: end; min-height: 0; padding: 140px 20px 64px; } .topo::before { display: none; } .topo__luz { left: 0; top: 0; width: 100%; height: 62%; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); } .topo__trilha, .topo__corpo { grid-column: 1; } .topo__trilha { order: -1; padding: 0 0 22px; font-size: 13px; } .topo__tit, .topo--ilu .topo__tit { max-width: none; font-size: clamp(32px, 9vw, 52px); line-height: 1.04; } .topo__lead, .topo--ilu .topo__lead { max-width: none; margin-top: 18px; font-size: 16px; } .topo__acoes { gap: 16px 22px; margin-top: 28px; } .topo--ilu { padding-top: 110px; } .topo__ilu { position: relative; order: 2; left: auto; right: auto; top: auto; bottom: auto; width: auto; height: 74vw; margin: 36px 0 0; } .topo__ilu .serv__palco { font-size: min(2vw, 8px); } /* as notas flutuantes da ilustração cabem dentro da tela */ .topo__ilu .serv__palco.d-apps { font-size: min(2.5vw, 10px); } .planos__grade { grid-column: 1; } .inc__grade, .planos__grade, .depos__grade, .depos__topo { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 44px; } .depos__grade { margin-top: 22px; } .depos__destaque { padding: 26px 22px; } .depos__destaque blockquote { font-size: 19px; } .inc { min-height: 0; padding: 26px 22px; } .inc::before { inset: -6px; } .inc .icone { margin-bottom: 18px; } .inc__tit { font-size: 21px; } .inc__txt { font-size: 15px; } .formatos { padding-top: 40px; } .plano { padding: 28px 22px; } .plano__para { min-height: 0; } .portfolio { padding-bottom: 96px; } .portfolio__cab { gap: 26px; } .portfolio__grade { grid-template-columns: minmax(0, 1fr); gap: 44px; margin-top: 40px; } .portfolio__fim { padding: 30px 22px; } .portfolio__todos { grid-column: 1; margin-top: 40px; } .filtro__op { padding: 9px 15px; font-size: 13px; } .depos__card { min-height: 0; } .depos__nota { padding: 28px 22px; } .depos__num { font-size: 72px; } .depos__base { grid-column: 1; margin-top: 44px; } .depos__base p { font-size: 19px; } .outros { grid-template-columns: minmax(0, 1fr); padding: 80px 20px; } .outros .sec__rot { grid-column: 1; padding: 0 0 18px; font-size: 14px; } .outros__lista { grid-column: 1; } .outros__item { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 20px 0; } .outros__item span { font-size: 22px; } .outros__item small { grid-row: 2; font-size: 14px; } .outros__item .botao__seta { grid-row: 1 / span 2; grid-column: 2; } .socios__grade { grid-column: 1; grid-template-columns: minmax(0, 1fr); gap: 56px; margin-top: 44px; } .socio__nome { font-size: 26px; } .socio__bio { font-size: 15px; } .socio__frase { font-size: 18px; padding-left: 16px; } .historia__tit { font-size: clamp(28px, 7.6vw, 42px); } .historia__txt { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 30px; } .historia__txt p { font-size: 15px; } .historia__num { margin-top: 60px; } .simbolo .chamada__mapa { width: 100%; left: 0; } .faixa-num__lista { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); } .faixa-num__lista li { padding: 26px 12px 0 0; } .faixa-num__lista b { font-size: 44px; } .local__dados { grid-template-columns: minmax(0, 1fr); margin: 36px 0 30px; } .local__mapa { grid-column: 1; margin-top: 10px; padding: 8px; } .local__mapa iframe { aspect-ratio: 4 / 3.4; } .prosa { font-size: 16px; } .rodape__col--contato { grid-column: 1 / -1; } .briefing { padding-top: 120px; } .briefing .topo__luz { height: 45%; } .cookies { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 20px; } .local__mapa-aviso { inset: 8px; } } /* ---------- página de links (bio das redes) ---------- */ .links { --guia: rgba(255, 255, 255, .09); position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; min-height: 100svh; padding: 96px 20px 72px; background: #000; color: #fff; } /* página solta: sem cabeçalho, menu, rodapé nem WhatsApp fixo */ .links-solo .cab, .links-solo .menu, .links-solo .rodape, .links-solo .zap, .pagina-solta .cab, .pagina-solta .menu, .pagina-solta .rodape, .pagina-solta .zap { display: none !important; } /* linhas-guia da home: as bordas da coluna e o eixo central, de cima a baixo (a seção corta o excesso) */ .links__col::before { content: ""; position: absolute; z-index: -1; top: -100vh; bottom: -100vh; left: 0; right: 0; pointer-events: none; border-inline: 1px solid var(--guia); background: linear-gradient(to right, transparent 50%, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .05) calc(50% + 1px), transparent 0); } /* corte: linha de ponta a ponta com cruzes onde cruza as guias */ .links__corte { position: relative; height: 1px; margin-top: 48px; } .links__corte::before { content: ""; position: absolute; left: -100vw; right: -100vw; top: 0; height: 1px; background: var(--guia); } .links__corte i { position: absolute; top: -7px; width: 15px; height: 15px; background: linear-gradient(#fff, #fff) 50% / 1px 100% no-repeat, linear-gradient(#fff, #fff) 50% / 100% 1px no-repeat; } .links__corte i:first-child { left: -7px; } .links__corte i:last-child { right: -8px; } .links .topo__luz { height: 70%; } .links__col { position: relative; width: min(100%, 560px); } .links__perfil { display: grid; justify-items: center; text-align: center; } .links__logo { color: #fff; line-height: 0; } .links__logo svg { width: min(230px, 62vw); height: auto; } .links__logo svg [fill]:not([fill="none"]) { fill: #fff; } /* logo inteiro em branco: o azul some sobre a luz */ .links__bio { max-width: 400px; margin-top: 26px; font-size: 16px; line-height: 1.5; color: var(--cinza); text-wrap: balance; } .links__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 34px; } .links__acoes .botao { justify-content: center; width: 100%; padding-inline: 14px; } .links__lista { margin-top: 0; } .links__item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 4px; border-bottom: 1px solid rgba(255, 255, 255, .14); transition: background .4s, padding .5s cubic-bezier(.7, 0, .2, 1); } .links__item .icone { width: 22px; color: var(--cinza); transition: color .4s; } .links__item b { display: block; font: 500 20px / 1.15 var(--archivo); font-stretch: 100%; letter-spacing: -.01em; } .links__item small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--cinza); } .links__item .botao__seta { font-size: 18px; } .links__item:hover { padding-inline: 14px; background: rgba(255, 255, 255, .05); } .links__item:hover .icone { color: var(--azul); } .links__item:hover .botao__seta svg:first-child { transform: translate(110%, -110%); } .links__item:hover .botao__seta svg + svg { transform: translate(0, 0); } .links__rot { margin-top: 36px; font-size: 13px; color: var(--cinza); } .links__serv { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .links__serv a { display: block; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 99px; font-size: 14px; transition: border-color .3s, background .3s, color .3s; } .links__serv a:hover { border-color: #fff; background: #fff; color: #000; } .links__depo { position: relative; display: grid; margin-top: 14px; padding: 26px 24px 30px; border: 1px solid rgba(255, 255, 255, .14); } .links__frase { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .7s, visibility .7s, translate .9s cubic-bezier(.2, .7, .2, 1); translate: 0 14px; } .links__frase.ativo { opacity: 1; visibility: visible; translate: 0 0; } .links__frase blockquote { margin: 0; font: 500 19px / 1.35 var(--archivo); font-stretch: 100%; letter-spacing: -.01em; } .links__frase figcaption { margin-top: 14px; font-size: 14px; color: var(--cinza); } .links__frase figcaption b { color: #fff; font-weight: 500; } .links__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .08); } .links__barra i { display: block; height: 100%; width: 100%; background: var(--azul); transform-origin: 0 50%; transform: scaleX(0); } .links__redes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; } .links__redes a { display: flex; justify-content: space-between; align-items: center; padding: 15px 16px; border: 1px solid rgba(255, 255, 255, .14); font-size: 15px; transition: border-color .3s; } .links__redes a:hover { border-color: #fff; } .links__redes a:hover .botao__seta svg:first-child { transform: translate(110%, -110%); } .links__redes a:hover .botao__seta svg + svg { transform: translate(0, 0); } .links__end { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 32px; font-size: 13px; color: var(--cinza); } .links__end a:hover { color: #fff; } @media (max-width: 420px) { .links__acoes { grid-template-columns: 1fr; } } /* ---------- blog: lista, categorias e cartões ---------- */ .blog-lista { padding-top: calc(120 * var(--u)); } .blog__cats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; } .blog__cats a { display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 16px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 99px; font-size: max(14px, calc(16 * var(--u))); transition: border-color .3s, background .3s, color .3s; } .blog__cats small { font-size: .8em; color: #8a8a8a; } .blog__cats a:hover { border-color: #000; } .blog__cats a[aria-current] { border-color: #000; background: #000; color: #fff; } .blog__cats a[aria-current] small { color: #aaa; } .blog__grade { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(70 * var(--u)) calc(32 * var(--u)); margin-top: calc(70 * var(--u)); } .blog-lista.blog--rel .blog__grade { margin-top: calc(90 * var(--u)); } .post { display: grid; align-content: start; gap: 14px; } .post__capa { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: #0a0a0a; } .post__capa img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s cubic-bezier(.2, .7, .2, 1); } .post:hover .post__capa img { scale: 1.05; } /* capa gerada: luz azul do hero no canto, a categoria e o A da marca */ .post__gerada { position: absolute; inset: 0; display: grid; align-content: space-between; padding: calc(28 * var(--u)); color: #fff; } .post__gerada i { position: absolute; inset: -30%; background: radial-gradient(45% 40% at 78% 18%, rgba(0, 56, 255, .85), transparent 70%), radial-gradient(30% 30% at 20% 90%, rgba(0, 56, 255, .25), transparent 70%); transition: translate 1.4s cubic-bezier(.2, .7, .2, 1); } .post:hover .post__gerada i { translate: -4% 6%; } .post__gerada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(255, 255, 255, .08) 0, rgba(255, 255, 255, .08) calc(50% + .5px), transparent 0), linear-gradient(transparent calc(50% - .5px), rgba(255, 255, 255, .08) 0, rgba(255, 255, 255, .08) calc(50% + .5px), transparent 0); } .post__gerada b { position: relative; z-index: 1; font-weight: 500; font-size: max(13px, calc(15 * var(--u))); } .post__gerada svg { position: relative; z-index: 1; justify-self: end; width: 18%; fill: #fff; opacity: .9; } .post__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: max(13px, calc(15 * var(--u))); color: #6b6b6b; } .post__meta a { color: var(--azul); } .post__tit { font: 500 max(20px, calc(28 * var(--u))) / 1.15 var(--archivo); font-stretch: 100%; letter-spacing: -.015em; text-wrap: balance; } .post__tit a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s cubic-bezier(.7, 0, .2, 1); } .post:hover .post__tit a { background-size: 100% 1px; } .post__resumo { font-size: max(15px, calc(17 * var(--u))); line-height: 1.5; color: #555; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* destaque: o artigo mais recente ocupa a largura toda, capa à esquerda e texto à direita */ .post--grande { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 14px calc(60 * var(--u)); padding-bottom: calc(70 * var(--u)); border-bottom: 1px solid rgba(0, 0, 0, .12); } .post--grande .post__capa { grid-row: 1 / span 4; aspect-ratio: 16 / 11; } .post--grande .post__tit { font-size: max(26px, calc(48 * var(--u))); } .post--grande .post__resumo { -webkit-line-clamp: 4; font-size: max(16px, calc(19 * var(--u))); } .post--grande .post__gerada svg { width: 12%; } .blog__pag { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: calc(90 * var(--u)); } .blog__pag > * { min-width: 44px; padding: 10px 16px; border: 1px solid rgba(0, 0, 0, .14); text-align: center; } .blog__pag .current { background: #000; border-color: #000; color: #fff; } .blog__vazio { grid-column: 2; margin-top: 60px; color: #6b6b6b; } /* ---------- artigo ---------- */ .artigo__topo { min-height: max(560px, 82svh); } .artigo__tit { max-width: calc(1080 * var(--u)); font-size: max(32px, calc(76 * var(--u))); } .artigo__atual { display: inline-block; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } .artigo__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: calc(40 * var(--u)); font-size: max(14px, calc(16 * var(--u))); color: var(--cinza); } .artigo__meta span:first-child { color: #fff; } .artigo__capa { margin: 0; background: #fff; padding: calc(80 * var(--u)) calc(88 * var(--x)) 0; } .artigo__capa img { width: 100%; max-height: 80vh; object-fit: cover; } .artigo .prosa h2 { scroll-margin-top: 110px; } .artigo .prosa h3 { margin-top: 1.4em; font-size: max(19px, calc(26 * var(--u))); } .artigo .prosa ol { list-style: decimal; } .artigo .prosa li + li { margin-top: .4em; } .artigo .prosa blockquote { padding-left: 1em; border-left: 2px solid var(--azul); color: #0a0a0a; font-style: normal; } .artigo .prosa a:not(.botao):not(.link-sutil) { color: var(--azul); } .prosa .nota { padding: 1.1em 1.3em; background: #f4f4f4; border-left: 2px solid #000; } .artigo__cta { position: relative; margin-top: 3em !important; padding: calc(50 * var(--u)) calc(46 * var(--u)); background: #000; color: #cfcfcf; overflow: hidden; isolation: isolate; } .artigo__cta::before { content: ""; position: absolute; z-index: -1; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(0, 56, 255, .7), transparent); } .artigo__cta-tit { font: 500 max(24px, calc(38 * var(--u))) / 1.1 var(--archivo); font-stretch: 100%; color: #fff; } .artigo__cta p + p { margin-top: .8em; } .artigo__cta-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 1.6em; } .artigo__cta .link-sutil { color: #fff; text-decoration: none; } .artigo__autor { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 2.4em !important; padding-top: 1.6em; border-top: 1px solid rgba(0, 0, 0, .12); } .artigo__autor img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; filter: grayscale(1); } .artigo__autor p { display: grid; line-height: 1.35; } .artigo__autor small { font-size: 13px; color: #8a8a8a; } .artigo__autor b { color: #0a0a0a; font-weight: 600; } .artigo__autor span { font-size: .85em; color: #6b6b6b; } .artigo__compartilhar { display: flex; gap: 8px; margin-left: auto; } .artigo__compartilhar a { padding: 8px 14px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 99px; font-size: 14px; text-decoration: none !important; color: #0a0a0a !important; } .artigo__compartilhar a:hover { border-color: #000; } @media (max-width: 899px), (max-width: 1199px) and (orientation: portrait) { .blog__grade { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 36px; } .post--grande { grid-template-columns: minmax(0, 1fr); padding-bottom: 48px; } .post--grande .post__capa { grid-row: auto; } .blog__cats { margin-top: 0; } .artigo__topo { min-height: 0; } .artigo__capa { padding: 28px 20px 0; } .artigo__cta { padding: 30px 22px; } .artigo__compartilhar { margin-left: 0; } .artigo__atual { max-width: 16ch; } } /* ---------- páginas por cidade e regiões atendidas ---------- */ .cidade__intro { max-width: calc(860 * var(--u)); margin-top: calc(40 * var(--u)); font-size: max(16px, calc(22 * var(--u))); line-height: 1.5; color: #444; } .cidade__setores { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(24 * var(--u)); margin-top: calc(90 * var(--u)); } /* quadro reto claro, com as mesmas cruzes nos cantos */ .inc--claro { border-color: rgba(0, 0, 0, .14); background: #fff; } .inc--claro::before { background: linear-gradient(#0a0a0a, #0a0a0a) 0 7px / 15px 1px no-repeat, linear-gradient(#0a0a0a, #0a0a0a) 7px 0 / 1px 15px no-repeat, linear-gradient(#0a0a0a, #0a0a0a) 100% calc(100% - 7px) / 15px 1px no-repeat, linear-gradient(#0a0a0a, #0a0a0a) calc(100% - 7px) 100% / 1px 15px no-repeat; } .inc--claro:hover { border-color: #000; } .inc--claro .icone { color: var(--azul); } .inc--claro .inc__tit { color: #0a0a0a; } .inc--claro .inc__txt { color: #555; } .cidade__clientes { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: calc(70 * var(--u)); padding-top: calc(30 * var(--u)); border-top: 1px solid rgba(0, 0, 0, .12); } .cidade__clientes-rot { font-size: max(13px, calc(15 * var(--u))); color: #6b6b6b; } .cidade__clientes ul { display: flex; flex-wrap: wrap; gap: 8px; } .cidade__clientes li { padding: 8px 14px; border: 1px solid rgba(0, 0, 0, .14); border-radius: 99px; font-size: max(14px, calc(16 * var(--u))); } .cidade__fatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: calc(70 * var(--u)); border-block: 1px solid rgba(0, 0, 0, .12); } .cidade__fatos li { display: grid; align-content: start; gap: 10px; padding: calc(36 * var(--u)) calc(30 * var(--u)) calc(36 * var(--u)) 0; } .cidade__fatos li + li { padding-left: calc(30 * var(--u)); border-left: 1px solid rgba(0, 0, 0, .12); } .cidade__fatos b { font: 500 max(26px, calc(44 * var(--u))) / 1 var(--archivo); font-stretch: 100%; letter-spacing: -.02em; } .cidade__fatos span { font-size: max(14px, calc(16 * var(--u))); color: #6b6b6b; } .outros--regiao + .outros--regiao { padding-top: 0; } @media (max-width: 899px), (max-width: 1199px) and (orientation: portrait) { .cidade__setores { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 44px; } .cidade__clientes { grid-column: 1; margin-top: 40px; } .cidade__fatos { grid-template-columns: minmax(0, 1fr); margin-top: 40px; } .cidade__fatos li, .cidade__fatos li + li { padding: 20px 0; border-left: 0; } .cidade__fatos li + li { border-top: 1px solid rgba(0, 0, 0, .12); } .outros--regiao + .outros--regiao { padding-top: 0; } } /* ---------- briefing de cliente (link privado): página solta, uma etapa por vez ---------- */ .bc { --guia: rgba(255, 255, 255, .075); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: auto auto 1fr; min-height: 100svh; padding: 0 calc(88 * var(--x)) 40px; background: #000; color: #fff; } .bc::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent calc(88 * var(--x)), var(--guia) 0, var(--guia) calc(88 * var(--x) + 1px), transparent 0, transparent calc(655 * var(--x)), var(--guia) 0, var(--guia) calc(655 * var(--x) + 1px), transparent 0, transparent calc(100% - 88 * var(--x) - 1px), var(--guia) 0, var(--guia) calc(100% - 88 * var(--x)), transparent 0); } .bc .topo__luz { opacity: .75; } .bc__topo { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 34px 0 26px; } .bc__logo { color: #fff; line-height: 0; } .bc__logo svg { width: 150px; height: auto; } .bc__logo svg [fill]:not([fill="none"]) { fill: #fff; } .bc__bloco { font-size: 14px; color: var(--cinza); text-align: right; } .bc__barra { height: 1px; background: rgba(255, 255, 255, .14); } .bc__barra i { display: block; width: 0; height: 100%; background: #8fb0ff; box-shadow: 0 0 12px rgba(0, 56, 255, .9); } .bc__palco { display: grid; grid-template-rows: 1fr auto; width: 100%; max-width: 860px; margin-left: calc(567 * var(--x)); padding-top: clamp(40px, 9vh, 110px); } .bc__tela { display: grid; align-content: start; gap: 18px; } .bc__tit { font: 500 clamp(30px, 4.2vw, 64px) / 1.06 var(--archivo); font-stretch: 100%; letter-spacing: -.02em; text-wrap: balance; } .bc__boas p, .bc__secao p, .bc__fim > p { max-width: 640px; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.55; color: var(--cinza); } .bc__assina { margin-top: 10px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 14px !important; color: #8fb0ff !important; } .bc__rot { font-size: 14px; color: #8fb0ff; } .bc__nota { max-width: 680px; padding: 28px 30px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .03); } .bc__nota h3 { font: 500 clamp(20px, 1.8vw, 28px) / 1.2 var(--archivo); font-stretch: 100%; margin-bottom: 12px; } .bc__nota p { color: var(--cinza); line-height: 1.55; } .bc__nota p + p { margin-top: 10px; } .bc__q { font: 500 clamp(24px, 2.8vw, 44px) / 1.14 var(--archivo); font-stretch: 100%; letter-spacing: -.015em; text-wrap: balance; } .bc__sub { font-size: 16px; line-height: 1.5; color: var(--cinza); } .bc__opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; } .bc__opcao { width: 100%; text-align: left; color: #fff; font-family: inherit; line-height: 1.35; } .bc__opcao[aria-pressed="true"] { border-color: #8fb0ff; background: rgba(0, 56, 255, .22); } .bc__opcao[aria-pressed="true"] kbd { background: #fff; color: #000; } .bc__campo { margin-top: 8px; font-size: clamp(19px, 1.8vw, 28px); } textarea.bc__campo { min-height: 3.5em; font-size: clamp(16px, 1.4vw, 22px); } .bc__outro { margin-top: 6px; font-size: 18px; } .bc__contato { display: grid; gap: 22px; margin-top: 10px; } .bc__campo-rot { display: grid; font-size: 14px; color: var(--cinza); } .bc__campo-rot small { opacity: .6; } .bc__ok { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #8fb0ff; border-radius: 50%; } .bc__ok svg { width: 20px; fill: none; stroke: #8fb0ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .bc__passos { display: grid; gap: 12px; margin-top: 10px; counter-reset: p; } .bc__passos li { display: flex; gap: 14px; align-items: baseline; color: #ddd; counter-increment: p; } .bc__passos li::before { content: counter(p); display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; font-size: 12px; } .bc__erro { min-height: 1.4em; margin-top: 18px; color: #ff9a9a; font-size: 15px; } .bc__acoes { display: flex; align-items: center; gap: 16px 26px; flex-wrap: wrap; padding: 26px 0 10px; } .bc__voltar { padding: 0; border: 0; background: none; color: var(--cinza); font: inherit; font-size: 15px; cursor: pointer; } .bc__voltar:hover { color: #fff; } .bc__dica { order: 3; font-size: 14px; color: #8a8a8a; } .bc__dica b { color: #ccc; font-weight: 500; } .bc__acoes .botao { order: 2; } .bc__vazio { padding: 120px 0; color: var(--cinza); } @media (max-width: 899px), (max-width: 1199px) and (orientation: portrait) { .bc { padding: 0 20px 24px; } .bc__topo { padding: 22px 0 18px; } .bc__logo svg { width: 120px; } .bc__bloco { font-size: 12px; } .bc__palco { margin-left: 0; padding-top: 36px; } .bc__opcoes { grid-template-columns: minmax(0, 1fr); } .bc__nota { padding: 22px 20px; } .bc__acoes { position: sticky; bottom: 0; margin: 0 -20px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, #000 30%); } .bc__acoes .botao { flex: 1; justify-content: center; } .bc__dica { display: none; } }