@font-face { font-family: 'Neue Montreal'; src: url('../fonts/NeueMontreal-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Montreal'; src: url('../fonts/NeueMontreal-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Montreal'; src: url('../fonts/NeueMontreal-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Neue Montreal'; src: url('../fonts/NeueMontreal-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { --font-sans: 'Neue Montreal', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --reveal-x: 50%; --reveal-y: 50%; --reveal-width: min(34vw, 440px); --reveal-height: clamp(82px, 12vw, 144px); --ink: #0c1211; /* Cinza de apoio para textos secundários sobre fundo claro (4,8:1) */ --ink-soft: #6e7472; /* Base do trecho escuro. Tudo entre a hero e a faixa de logos parte deste tom: é a cor do fundo contínuo e o alvo de qualquer dissolução. */ --bg-deep: #191310; --white: #f4f6f4; --paper: #fffde2; /* Cor de destaque do CTA (verde-acinzentado). Token global: trocar aqui repercute em qualquer elemento de destaque futuro. */ --accent: #829792; --padding-x: clamp(1.2rem, 2.8vw, 3.2rem); } * { box-sizing: border-box; } html { font-size: 62.5%; } html, body { min-height: 100%; margin: 0; font-family: var(--font-sans); font-weight: 400; color: var(--ink); } /* A cor de base fica só no : ela é promovida à tela do navegador e pintada antes de tudo. Se o também a tivesse, o fundo dele seria pintado como o de um bloco comum — ou seja, por cima da camada contínua (z-index -1), que deixaria de aparecer. */ html { background: var(--bg-deep); } body { font-size: 1.6rem; overflow-x: hidden; background: transparent; } /* ============================================================ FUNDO CONTÍNUO — uma única camada para todo o trecho escuro Antes, "sobre" e "método" desenhavam cada um o seu vidro fosco e "soluções" não tinha nenhum: três fundos diferentes, emendados por faixas que dissolviam tudo em #191310 chapado. Aqui existe uma camada só, fixa na tela e atrás de todas as seções (z-index negativo), então não há emenda possível entre elas — o fundo simplesmente não termina. As seções escuras ficam transparentes e deixam esta camada passar; as claras (logos e finalização) são opacas e a cobrem naturalmente. ============================================================ */ .site-bg { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; background: var(--bg-deep); } /* O vidro é a mesma imagem da hero desfocada, o que amarra o topo do site ao resto. `inset` negativo + `scale` escondem as bordas que o blur esvazia. */ .site-bg__glass { position: absolute; inset: -14%; background-image: linear-gradient( 180deg, rgba(25, 19, 16, 0.7) 0%, rgba(25, 19, 16, 0.82) 48%, rgba(25, 19, 16, 0.88) 100% ), url('../images/Agrupar 8.2.jpg'); background-size: cover; background-position: center; filter: blur(70px) saturate(1.12); transform: scale(1.12) translate3d(0, calc(var(--flow, 0) * -3.2%), 0); will-change: transform; } /* Brilho quente que atravessa o trecho escuro de cima para baixo conforme a página anda. Como a camada é fixa, sem esta deriva o fundo ficaria imóvel por seis telas de rolagem. Só o `transform` muda — o desfoque pesado do vidro continua em cache, e a deriva não custa repintura. */ .site-bg__glow { position: absolute; left: 50%; top: -46vh; width: 165vmax; height: 128vh; background: radial-gradient(52% 50% at 50% 50%, rgba(255, 253, 226, 0.13), transparent 68%); transform: translate3d(-50%, calc(var(--flow, 0) * 128vh), 0); will-change: transform; } /* Grão único, fixo, por cima de tudo (abaixo apenas da navbar). Antes cada palco escuro tinha o seu, todos na mesma intensidade — o que deixava a textura nascer de repente na primeira emenda, já que a hero não tinha nenhum. Sendo uma camada só e presa à tela, ela não tem onde começar nem terminar. Em soft-light o grão não altera as seções brancas do fim. */ .site-grain { position: fixed; z-index: 80; inset: 0; pointer-events: none; opacity: 0.16; background-image: radial-gradient(rgba(255, 253, 226, 0.7) 0.5px, transparent 0.5px), radial-gradient(rgba(255, 253, 226, 0.5) 0.5px, transparent 0.5px); background-size: 3px 3px, 4px 4px; background-position: 0 0, 1px 1px; mix-blend-mode: soft-light; } a { color: inherit; text-decoration: none; } /* ============================================================ NAVBAR — barra flutuante fixa no centro inferior da tela Proporção da referência preservada (~8,7:1), em escala reduzida, com o CTA encostado na borda direita e recuado apenas pelo respiro de 6px. Cantos: mesma lógica do CTA — raio externo = raio do botão + recuo + borda (10 + 6 + 1 = 17px), o que deixa as curvas interna e externa concêntricas. Tipografia e cores vindas das variáveis globais (var(--font-sans), var(--white), var(--accent)). ============================================================ */ .navbar { position: fixed; z-index: 90; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 2rem; /* Alargada o suficiente para o terceiro item ("Soluções") sem perder a proporção da referência: o vão entre a logo e os links encolhe, a faixa quase não. */ width: min(520px, calc(100vw - 40px)); height: 56px; /* Assimétrico de propósito: à esquerda o respiro da logo; à direita só a folga de 6px que emoldura o CTA, como na referência. */ padding: 0 6px 0 24px; border-radius: 17px; font-family: var(--font-sans); background: rgba(244, 246, 244, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(12px) saturate(1.12); -webkit-backdrop-filter: blur(12px) saturate(1.12); box-shadow: 0 18px 46px rgba(5, 9, 8, 0.34); transition: opacity 280ms ease, transform 280ms ease, visibility 0s linear 0s; } /* No bloco de finalização a barra sai de cena. `visibility` entra só depois do fade (e volta na hora), para que ela não fique focável por teclado enquanto está invisível. */ .navbar.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(14px); transition: opacity 280ms ease, transform 280ms ease, visibility 0s linear 280ms; } .navbar__logo { display: flex; align-items: center; } .navbar__logo img { display: block; width: auto; height: 18px; /* Mesmo tratamento da logo da hero: vira branca sobre fundo escuro */ filter: brightness(0) invert(1); } .navbar__links { display: flex; align-items: center; gap: 22px; } .navbar__link { font-size: 1.5rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1; color: var(--white); text-decoration: none; transition: opacity 180ms ease; } .navbar__link:hover { opacity: 0.66; } .navbar__cta { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 22px; /* Mantém a curvatura relativa da referência (~1/4 da altura do botão) */ border-radius: 10px; font-size: 1.5rem; /* Mesmo peso do link "Home" */ font-weight: 500; letter-spacing: 0.01em; line-height: 1; color: #ffffff; background: var(--accent); transition: transform 180ms ease, filter 180ms ease; } .navbar__cta:hover { transform: translateY(-1px); filter: brightness(1.12); } .navbar__link:focus-visible, .navbar__cta:focus-visible, .navbar__logo:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; } @media (max-width: 560px) { .navbar { width: calc(100vw - 24px); max-width: 420px; gap: 1rem; height: 48px; padding: 0 5px 0 14px; /* Concêntrico também aqui: 9px do CTA + 5px de recuo + 1px de borda */ border-radius: 15px; } .navbar__links { gap: 14px; } .navbar__link, .navbar__cta { font-size: 1.3rem; } .navbar__logo img { height: 16px; } .navbar__cta { height: 36px; padding: 0 14px; border-radius: 9px; } } .hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; cursor: none; } .hero__base, .hero__reveal { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; /* A foto não termina numa linha nem num degradê para uma cor chapada: ela perde opacidade no rodapé e entrega a camada contínua que está atrás de todo o site. Como essa camada é a mesma imagem desfocada, a hero parece sair de foco em vez de acabar — não há emenda a esconder. A máscara pega só as camadas de imagem, então o texto e o botão da hero continuam com opacidade cheia. */ -webkit-mask-image: linear-gradient( 180deg, #000 54%, rgba(0, 0, 0, 0.62) 76%, rgba(0, 0, 0, 0.18) 92%, transparent 100% ); mask-image: linear-gradient( 180deg, #000 54%, rgba(0, 0, 0, 0.62) 76%, rgba(0, 0, 0, 0.18) 92%, transparent 100% ); } .hero__base { z-index: -3; background-image: url('../images/Agrupar 8.2.jpg'); } .hero__base::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(232, 240, 238, 0.42), rgba(232, 240, 238, 0.1) 36%, transparent 58%, rgba(232, 240, 238, 0.26)), linear-gradient(180deg, rgba(245, 250, 248, 0.04), rgba(5, 11, 10, 0.1)); } .hero__reveal { z-index: -2; background-image: url('../images/Agrupar 8.jpg'); opacity: 0; clip-path: inset(50% 50% 50% 50% round 2px); filter: saturate(1.06) contrast(1.04); transition: opacity 220ms ease, clip-path 80ms linear; } .hero.is-active .hero__reveal { opacity: 1; } .hero__cursor { position: absolute; z-index: 2; left: var(--reveal-x); top: var(--reveal-y); width: var(--reveal-width); height: var(--reveal-height); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 180ms ease; mix-blend-mode: screen; } .hero.is-active .hero__cursor { opacity: 1; } .hero__cursor::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.34); box-shadow: 0 0 32px rgba(255, 255, 255, 0.16), inset 0 0 18px rgba(255, 255, 255, 0.12); } .hero__corner { position: absolute; width: 32px; height: 22px; border-color: rgba(255, 255, 255, 0.92); border-style: solid; filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.35)); } .hero__corner--tl { left: -8px; top: -8px; border-width: 2px 0 0 2px; } .hero__corner--tr { right: -8px; top: -8px; border-width: 2px 2px 0 0; } .hero__corner--bl { left: -8px; bottom: -8px; border-width: 0 0 2px 2px; } .hero__corner--br { right: -8px; bottom: -8px; border-width: 0 2px 2px 0; } .hero__copy { position: absolute; z-index: 3; left: clamp(20px, 4.2vw, 72px); top: 50%; width: min(54.4rem, 41vw); transform: translateY(-50%); isolation: isolate; } .hero__copy::before { display: none; } .hero__logo { display: block; width: auto; height: clamp(26px, 2.4vw, 34px); margin: 0 0 18px; filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35)); } .hero h1 { max-width: 11.8em; margin: 0; font-size: 4.72rem; font-weight: 500; line-height: 1.02; letter-spacing: -0.015em; color: #ffffff; -webkit-text-stroke: 0.4px rgba(3, 6, 5, 0.86); paint-order: stroke fill; } .hero__button { display: inline-flex; align-items: center; justify-content: center; min-width: clamp(190px, 24vw, 300px); height: clamp(46px, 5.2vw, 70px); margin-top: clamp(20px, 3.2vw, 36px); padding: 0 28px; border-radius: 999px; font-size: 1.504rem; font-weight: 500; letter-spacing: 0.01em; color: rgba(11, 15, 14, 0.82); background: rgba(247, 249, 248, 0.92); border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: 0 16px 42px rgba(16, 31, 29, 0.16); transition: transform 180ms ease, background-color 180ms ease; } .hero__button:hover { transform: translateY(-2px); background: #fff; } .hero__benefits { position: absolute; z-index: 3; right: clamp(10px, 1vw, 22px); bottom: clamp(38px, 7vw, 96px); width: min(26vw, 380px); font-size: clamp(1.6rem, 1vw + 0.9rem, 2rem); font-weight: 400; line-height: 1.4; letter-spacing: 0; color: #ffffff; -webkit-text-stroke: 0.32px rgba(3, 6, 5, 0.82); paint-order: stroke fill; isolation: isolate; } .hero__benefits::before { display: none; } .hero__benefits p { margin: 0; } .hero__benefits p + p { margin-top: 0.26em; } @media (min-width: 1500px) { .hero h1 { font-size: 5.68rem; } .hero__benefits { font-size: 2.1rem; } } @media (max-width: 1100px) { .hero h1 { font-size: 4.08rem; } } @media (max-width: 760px) { :root { --reveal-width: min(72vw, 360px); --reveal-height: 96px; } /* No celular o vidro fica parado: mover uma camada desfocada de tela cheia custa caro e o brilho quente, que não tem filtro, já dá o movimento. */ .site-bg__glass { transform: scale(1.12); } body { overflow: auto; } .hero { min-height: 100svh; cursor: auto; } .hero__base, .hero__reveal { background-position: 57% center; } .hero__copy { left: 50%; top: 40%; bottom: auto; width: min(96vw, 54.4rem); text-align: center; transform: translate(-50%, -50%); } .hero__logo { height: 28px; margin-left: auto; margin-right: auto; } .hero h1 { max-width: 100%; margin: 0 auto; font-size: clamp(3.2rem, 8.7vw, 3.872rem); line-height: 0.98; } .hero__button { min-width: min(72vw, 292px); } .hero__benefits { left: 50%; right: auto; bottom: clamp(56px, 12svh, 84px); width: min(92vw, 440px); font-size: clamp(1.5rem, 3.4vw, 1.8rem); font-weight: 400; line-height: 1.4; color: #ffffff; -webkit-text-stroke: 0.32px rgba(3, 6, 5, 0.82); text-align: center; transform: translateX(-50%); } .hero__benefits::before { display: none; } } @media (max-width: 430px) { .hero h1 { max-width: 100%; } .hero__button { font-size: 1.408rem; } } /* ============================================================ SOBRE A EMPRESA — palco fixado com revelação sequencial do texto Sem fundo próprio: quem pinta é a camada contínua (.site-bg). ============================================================ */ .about { position: relative; width: 100%; height: 100svh; min-height: 100svh; overflow: hidden; isolation: isolate; background: transparent; color: #ffffff; } .about__stage { position: relative; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; padding: 0 var(--padding-x); } /* Etapas empilhadas na mesma célula do grid: todas centradas e sobrepostas, o que permite o cruzamento fade-out / fade-in sem deslocar o layout. */ .about__steps { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; place-items: center; width: min(96rem, 88vw); min-height: clamp(18rem, 30vh, 28rem); } /* Mesma fonte, mesmo corpo e mesmo peso em todas as etapas — os blocos variam apenas em número de linhas. */ .about__step { grid-area: 1 / 1; max-width: 100%; margin: 0; font-size: clamp(2.6rem, 2.4vw + 1rem, 4.4rem); font-weight: 400; line-height: 1.22; letter-spacing: -0.02em; text-align: center; text-wrap: balance; opacity: 0; will-change: opacity, transform; } /* Fallback sem pin: GSAP ausente ou movimento reduzido. O texto passa a fluir normalmente, todas as etapas visíveis. */ .about.is-static { height: auto; min-height: 0; padding: clamp(9rem, 18vh, 16rem) 0; } .about.is-static .about__stage { height: auto; } .about.is-static .about__steps { min-height: 0; row-gap: clamp(2.4rem, 5vh, 4.4rem); } .about.is-static .about__step { grid-area: auto; opacity: 1; transform: none; } @media (max-width: 767px) { .about__stage { padding: 0 1.6rem; } .about__steps { width: min(90vw, 46rem); } .about__step { font-size: clamp(2.2rem, 6.2vw, 2.9rem); } } /* ============================================================ MÉTODO EM QUATRO ETAPAS — bloco editorial escuro (pós-hero) Fonte: Neue Montreal (var(--font-sans)); pesos 400/500 no lugar de 600. ============================================================ */ .method { position: relative; background: transparent; color: #ffffff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Palco fixado (pin) com a pilha de cards --- */ /* Sem vidro próprio e sem dissolução no rodapé: o palco é transparente e o fundo que aparece ao redor dos cards é a mesma camada contínua que vem da seção anterior e segue para a próxima. */ .team-scroll { position: relative; width: 100%; height: 100svh; min-height: 100svh; background: transparent; overflow: hidden; --progress: 0; --scroll-velocity: 0; --total-items: 4; } .team-content { position: relative; z-index: 2; top: 0; left: 0; width: 100vw; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 0 var(--padding-x); isolation: isolate; } .team-index { position: absolute; top: clamp(5rem, 9.8vw, 9.2rem); left: 50%; transform: translateX(-50%); display: flex; gap: 0.72rem; align-items: baseline; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: #ffffff; mix-blend-mode: difference; z-index: 8; } .team-index-number { opacity: 0.62; } .team-cards { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; width: var(--width); height: var(--height); position: relative; z-index: 3; --width: min(50.4rem, 39vw, 62vh); --height: min(55rem, 42.5vw, 67.5vh); --stack-gap: clamp(1.8rem, 2.2vw, 3.2rem); } .team-card { grid-column: 1 / -1; grid-row: 1 / -1; position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #1e1712; transform: translate3d(0, 0, 0); will-change: transform; } .team-card-scene { position: relative; width: 100%; height: 100%; overflow: clip; background-position: center; background-size: cover; } .team-card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; filter: grayscale(100%); opacity: 0.3; transform: translateX(calc(var(--scroll-velocity) * 0.9px)) translateY(calc(var(--scroll-velocity) * 0.9px)) translateZ(0) scale(1.1); transition: filter 1.4s ease, opacity 1.4s ease; } .team-card.is-active .team-card-image { filter: grayscale(0%); opacity: 1; } .team-info { position: absolute; inset: 0; z-index: 5; pointer-events: none; padding: 0 var(--padding-x); } .team-description { position: absolute; top: clamp(18rem, 26.1vh, 26.7rem); right: clamp(2.4rem, 8.8vw, 12rem); width: min(24rem, calc(100vw - 4.8rem)); margin: 0; color: #ffffff; font-size: clamp(1.5rem, 1.25vw, 1.8rem); font-weight: 400; line-height: 1.4; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: normal; opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; } .team-description.is-active { opacity: 1; transform: translateY(0); } .team-counter { position: absolute; bottom: clamp(4.8rem, 8vh, 7.6rem); left: clamp(6rem, 12.5vw, 18rem); z-index: 5; pointer-events: none; display: flex; align-items: baseline; gap: clamp(1.2rem, 1.8vw, 2.4rem); color: #ffffff; font-size: clamp(12rem, 16.6vw, 24rem); font-weight: 500; line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase; } .team-counter-value { display: block; will-change: opacity, transform; } .team-counter-title { font-size: clamp(1.6rem, 1.1vw + 0.7rem, 2.2rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; text-transform: none; white-space: nowrap; color: #ffffff; opacity: 0.9; will-change: opacity, transform; } /* ============================================================ NOSSAS SOLUÇÕES — um painel por serviço, trocados pela rolagem. Herda o mesmo fundo contínuo do método, sem emenda no topo. Estrutura da referência (abas em faixa, frase + CTA à esquerda, tópicos na base, imagem à direita) com a tipografia e as cores do site: Neue Montreal, tinta branca e var(--accent) no destaque da aba ativa. Navegação: a seção é propositalmente alta — uma tela para o primeiro serviço mais um trecho de --sol-step por serviço seguinte — e o palco (.solutions__inner) fica grudado no topo com `position: sticky`. O que o visitante rola dentro dessa altura é o curso que o JS traduz em qual painel está ativo; o palco em si não sai do lugar. Mesma ideia do método, mas resolvida em CSS puro: sem GSAP, se o CDN falhar a seção continua andando. ============================================================ */ .solutions { /* --sol-steps é reescrito pelo JS a partir do número de abas: incluir um sétimo serviço no HTML já alonga a seção sozinho. */ --sol-steps: 6; /* Rolagem gasta em cada troca de serviço. Abaixo de ~70svh a troca fica nervosa; acima de ~100svh a seção começa a parecer travada. */ --sol-step: 84svh; position: relative; z-index: 1; min-height: calc(100svh + (var(--sol-steps) - 1) * var(--sol-step)); padding: 0 var(--padding-x); background: transparent; color: #ffffff; isolation: isolate; } /* Última emenda do trecho escuro. Os depoimentos são blocos de cor cheia e o primeiro abre em #191310 chapado, então o fundo contínuo se dissolve nesse tom ao longo do rodapé da seção em vez de encostar nele por uma linha reta. Fica abaixo do conteúdo (z-index 2) e do grão (3). */ .solutions::before { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: clamp(16rem, 32svh, 40rem); pointer-events: none; background: linear-gradient( 180deg, rgba(25, 19, 16, 0) 0%, rgba(25, 19, 16, 0.58) 56%, var(--bg-deep) 100% ); } /* O palco: uma tela de altura, grudado no topo enquanto a seção passa por baixo. O respiro de baixo é maior que o de cima porque a navbar flutua ali — sem ele o último tópico da lista ficaria atrás da barra. `safe center` é uma rede de proteção para telas muito baixas: se o painel não couber na tela, a centralização passa a alinhar pelo topo em vez de cortar as duas pontas (navegadores antigos ignoram o valor e ficam com o `center` da linha anterior). */ .solutions__inner { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; justify-content: safe center; width: min(132rem, 100%); min-height: 100vh; min-height: 100svh; margin: 0 auto; padding: clamp(5rem, 9svh, 9rem) 0 clamp(9rem, 14svh, 13rem); } /* Mesmo rótulo miúdo do índice do método */ .solutions__eyebrow { margin: 0 0 clamp(2rem, 3.4vh, 3.2rem); font-size: 1.2rem; font-weight: 500; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; color: #ffffff; opacity: 0.62; } /* --- Faixa de abas: colunas iguais, como na referência. Com a rolagem no comando, ela é antes de tudo um indicador de onde o visitante está; o clique continua valendo como atalho e leva a rolagem até o serviço. --- */ .solutions__tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.8rem, 1vw, 1.4rem); } .solutions__tab { display: flex; align-items: center; justify-content: center; min-height: 5.2rem; padding: 1rem 1.2rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; font-family: inherit; font-size: clamp(1.1rem, 0.55vw + 0.6rem, 1.3rem); font-weight: 500; letter-spacing: 0.08em; line-height: 1.1; text-align: center; text-transform: uppercase; color: #ffffff; background: rgba(255, 255, 255, 0.05); cursor: pointer; transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease; } .solutions__tab:hover { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.1); } /* Aba ativa no verde de destaque do site (mesmo token do CTA da navbar), com tinta escura para o contraste que a referência dá ao amarelo. */ .solutions__tab.is-active { color: #101816; background: var(--accent); border-color: var(--accent); } .solutions__tab:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } /* --- Trilho de progresso: a única peça que se move junto com a rolagem, em vez de saltar de serviço em serviço. É ele que diz que a seção está sendo percorrida e não travada. O JS escreve --sol-progress (0 a 1) e nada mais; sem transição de propósito, já que o valor chega quadro a quadro. --- */ .solutions__progress { position: relative; /* Sem conteúdo dentro, é o único item do palco que o flex encolheria até sumir se o painel apertasse a tela. */ flex: 0 0 auto; height: 2px; margin-top: clamp(1.2rem, 1.8vh, 1.8rem); overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.12); } .solutions__progress-bar { position: absolute; inset: 0; transform: scaleX(var(--sol-progress, 0)); transform-origin: left center; background: var(--accent); } /* --- Painéis empilhados na mesma célula: a altura fica presa ao maior deles, então a troca de serviço não sacode a página. --- */ .solutions__panels { /* Sentido da rolagem, escrito pelo JS: 1 descendo, -1 subindo. É o que mantém o gesto e a animação apontando para o mesmo lado — descendo, o painel novo sobe pela base e o antigo sai por cima; subindo, o inverso. */ --sol-dir: 1; display: grid; grid-template-columns: 1fr; margin-top: clamp(2.8rem, 5vh, 5.6rem); } /* Duração longa e curva de saída suave: a troca precisa parecer uma dissolução contínua, não um corte, já que acontece no meio de um gesto de rolagem. `visibility` só entra depois do fade para o painel oculto não roubar cliques nem parar o leitor de tela no meio do caminho. */ .solutions__panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(3.2rem, 5vw, 7rem); align-items: stretch; opacity: 0; visibility: hidden; transform: translate3d(0, calc(var(--sol-dir) * 3.4rem), 0) scale(0.985); pointer-events: none; transition: opacity 620ms cubic-bezier(0.33, 0, 0.2, 1), transform 780ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 780ms; } /* O painel que está saindo vai para o lado oposto ao de quem entra: os dois se cruzam em vez de partirem da mesma borda. */ .solutions__panel.is-leaving { transform: translate3d(0, calc(var(--sol-dir) * -3.4rem), 0) scale(0.985); } .solutions__panel.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 620ms cubic-bezier(0.33, 0, 0.2, 1), transform 780ms cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s; } /* Frase e CTA no topo, tópicos na base — a distância entre eles é o que a referência usa para separar a promessa do detalhamento. */ .solutions__copy { display: flex; flex-direction: column; gap: clamp(2.8rem, 5vh, 4.8rem); } .solutions__title { max-width: 18em; margin: 0; font-size: clamp(2.6rem, 2.4vw + 1rem, 4.4rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; } .solutions__cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; align-self: flex-start; /* Vale para o empilhado do celular, onde o botão vira item de grade */ justify-self: start; height: 4.8rem; padding: 0 2.4rem; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; font-size: 1.5rem; font-weight: 500; line-height: 1; color: #191310; background: #ffffff; transition: transform 180ms ease, border-color 180ms ease; } .solutions__cta svg { width: 18px; height: 18px; transition: transform 180ms ease; } /* Com o botão já em branco puro, o hover se dá pela subida e pela seta, não por mais clareamento. */ .solutions__cta:hover { transform: translateY(-2px); border-color: #ffffff; } /* A seta acompanha o próprio ângulo: 45° para cima e para a direita */ .solutions__cta:hover svg { transform: translate(2px, -2px); } .solutions__cta:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } /* Empurra os tópicos para o pé da coluna, na altura em que a imagem termina */ .solutions__list { margin: auto 0 0; padding: 0; list-style: none; display: grid; gap: clamp(0.9rem, 1.4vh, 1.4rem); font-size: clamp(1.5rem, 0.7vw + 0.9rem, 1.8rem); line-height: 1.35; letter-spacing: -0.01em; } .solutions__list li { display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline; } /* Ponto desenhado em vez de escrito: acompanha a entrelinha sem entrar na leitura do texto. A bolinha não tem texto dentro, então a linha de base que o `align-items: baseline` do item usaria é a própria base da caixa — ela cairia no pé das letras. Daí o `align-self: start` e a centragem manual na primeira linha: metade da entrelinha (1,35em) menos metade do diâmetro. */ .solutions__list li::before { content: ""; align-self: start; width: 0.5rem; height: 0.5rem; margin-top: calc(0.675em - 0.25rem); border-radius: 50%; background: currentColor; opacity: 0.5; } /* A imagem acompanha a coluna de texto de ponta a ponta: começa na linha do topo da frase e termina no pé do último tópico. Por isso ela estica em vez de guardar uma proporção fixa — o `stretch` a leva à altura do painel, que é a mesma da coluna de texto (a lista já é empurrada para a base pelo `margin: auto 0 0`). Como os painéis são empilhados na mesma célula, essa altura é a do maior deles, e todas as abas mostram a foto no mesmo tamanho. Sem `aspect-ratio` aqui: com largura e altura definidas ela seria ignorada, e mantê-la só confundiria a leitura da regra. O recorte fica por conta do `object-fit: cover` da imagem. */ .solutions__media { position: relative; align-self: stretch; width: 100%; overflow: hidden; border-radius: 14px; background: #1e1712; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } /* Fora do fluxo de propósito: a moldura estica para acompanhar a coluna de texto, e uma imagem em fluxo com `height: 100%` contra essa altura ainda indefinida cairia na proporção original do arquivo — uma foto em retrato esticaria o painel inteiro. Absoluta, ela não opina sobre a altura; só preenche a moldura já medida. */ /* A foto entra um pouco maior e assenta no tamanho certo ao longo da troca: mais lento que o painel de propósito, para o movimento continuar por um instante depois que o texto já parou. */ .solutions__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.07); transition: transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1); } .solutions__panel.is-active .solutions__media img { transform: scale(1); } /* Sem largura para seis colunas, a faixa deixa de ser grade e vira um trilho que corre na horizontal: duas linhas de abas custariam altura que o palco fixado não tem para gastar. O JS mantém a aba ativa centralizada nele. */ @media (max-width: 1100px) { .solutions__tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; /* Sangra até as bordas da tela para a primeira e a última aba não parecerem cortadas no meio do respiro lateral. */ margin-inline: calc(var(--padding-x) * -1); padding-inline: var(--padding-x); overscroll-behavior-x: contain; } .solutions__tabs::-webkit-scrollbar { display: none; } .solutions__tab { flex: 0 0 auto; min-height: 4.4rem; padding: 0.9rem 1.6rem; scroll-snap-align: center; } } @media (max-width: 860px) { .solutions__panel { grid-template-columns: minmax(0, 1fr); gap: clamp(1.8rem, 3vh, 3rem); /* Sem isto a sobra de altura do painel mais alto seria dividida entre as quatro linhas do empilhado, abrindo vãos entre frase, botão e tópicos. */ align-content: start; } /* No empilhado a imagem vem depois da frase e antes dos tópicos, para o bloco não abrir com um retângulo antes de dizer do que se trata. */ .solutions__copy { display: contents; } .solutions__title { order: 1; max-width: 100%; } .solutions__cta { order: 2; } /* No empilhado não há coluna de texto ao lado para acompanhar, então a foto volta a ser uma faixa de proporção fixa — com teto de altura, porque aqui ela divide uma tela só com a frase, o botão e os tópicos. Passando do teto, quem cede é a proporção: o `object-fit: cover` da imagem recorta. */ .solutions__media { order: 3; align-self: start; aspect-ratio: 16 / 10; max-height: 28svh; } /* Duas fotos em retrato, com o assunto fora do centro: nessa faixa larga e baixa o `center` do desktop corta a de audiovisual no meio do rosto (o homem fica sem cabeça e a câmera encosta na borda) e some de vez com o notebook da de social media. O recorte desce em cada uma até o que interessa — a câmera com o estabilizador numa, o notebook na outra. A porcentagem é medida sobre a sobra da imagem, não sobre ela inteira, e a sobra muda com a altura da faixa: daí os ajustes nos dois cortes de tela abaixo. */ .solutions__media--camera img { object-position: 50% 60%; } /* Encostada na base: o notebook já é cortado pela borda de baixo da própria foto, então qualquer valor menor o partiria no meio outra vez. */ .solutions__media--laptop img { object-position: 50% 100%; } .solutions__list { order: 4; margin: 0; } } @media (max-width: 560px) { /* Tela baixa: o painel inteiro precisa caber numa tela só, então tudo encolhe junto — passo de rolagem, respiros do palco, foto e tópicos. */ .solutions { --sol-step: 76svh; } .solutions__inner { padding: clamp(3.2rem, 6svh, 6rem) 0 clamp(8rem, 13svh, 11rem); } .solutions__tab { min-height: 4rem; padding: 0.8rem 1.3rem; } .solutions__cta { height: 4.4rem; padding: 0 2rem; font-size: 1.4rem; } .solutions__media { max-height: 24svh; } .solutions__media--camera img { object-position: 50% 64%; } .solutions__list { font-size: 1.4rem; gap: 0.8rem; } .solutions__list li { grid-template-columns: 1.8rem 1fr; } } /* Telas curtas de celular (retrato em aparelhos menores): a foto e os tópicos cedem primeiro, senão o último item da lista termina atrás da navbar. */ @media (max-width: 860px) and (max-height: 720px) { .solutions__title { font-size: clamp(2rem, 5.4vw, 2.4rem); } .solutions__cta { height: 4rem; } .solutions__media { max-height: 19svh; } /* Faixa curta demais para escolher: é o único valor em que a câmera cabe inteira, do topo das mãos ao motor do estabilizador. */ .solutions__media--camera img { object-position: 50% 56%; } .solutions__list { font-size: 1.3rem; gap: 0.6rem; } } /* Abaixo disto (celular deitado, janela achatada) não há tela que comporte um painel inteiro de uma vez: o palco deixa de ser fixado, a seção volta à altura do conteúdo e as abas voltam a trocar o serviço por clique. O JS lê o `position` deste bloco para saber em qual dos dois modos está — é o CSS que decide, num lugar só. */ @media (max-height: 560px) { .solutions { min-height: 0; padding-block: clamp(5rem, 9vh, 8rem) clamp(9rem, 15vh, 12rem); } .solutions__inner { position: static; min-height: 0; padding: 0; } .solutions__progress { display: none; } } /* Quem pede menos movimento continua com a rolagem trocando os serviços — o que sai é o deslocamento e o zoom. As durações já são zeradas pela regra geral no fim desta folha, então aqui só restam os `transform`. */ @media (prefers-reduced-motion: reduce) { .solutions__panel, .solutions__panel.is-leaving, .solutions__media img { transform: none; } } /* ============================================================ DEPOIMENTOS — faixa de cor cheia com uma avaliação por vez. Cada item leva sua dupla de cores no HTML (data-bg / data-ink); o JS só move esses valores para --voice-bg / --voice-ink e a transição acontece aqui. Detalhes (setas e pontos) herdam currentColor, então acompanham a troca sem precisar de regra por slide. ============================================================ */ /* Cores iniciais iguais às da primeira avaliação, para que a faixa já nasça no tom certo antes de o JS assumir. */ .voices { --voice-bg: var(--bg-deep); --voice-ink: #ffffff; --dir: 1; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: clamp(0.4rem, 2vw, 2.4rem); /* Faixa baixa e larga, na proporção da referência (~3,5:1 em desktop) */ min-height: min(46svh, 420px); padding: clamp(4rem, 7vh, 5.6rem) clamp(1rem, 3vw, 3.2rem); overflow: hidden; isolation: isolate; color: var(--voice-ink); background: var(--voice-bg); transition: background-color 620ms ease, color 620ms ease; } .voices__stage { position: relative; z-index: 2; flex: 0 1 auto; width: min(88rem, 66vw); touch-action: pan-y; } /* Todas as avaliações ocupam a mesma célula: a saída de uma e a entrada da outra se cruzam sem empurrar o layout. Sem JS a célula é uma grid comum e a altura fica presa ao maior depoimento — nada some da tela, mas os curtos sobram num vão vazio. Com JS (.is-fluid) os itens saem do fluxo e a lista recebe a altura do item ativo, medida a cada troca, então a faixa encolhe junto com o depoimento em vez de manter o buraco do mais longo. */ .voices__list { position: relative; display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; } .voices__item { grid-area: 1 / 1; opacity: 0; transform: translateX(calc(var(--dir) * 2.4rem)); transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1); pointer-events: none; } /* Mesma duração e curva do crossfade: a altura viaja junto com o texto */ .voices.is-fluid .voices__list { height: 0; transition: height 520ms cubic-bezier(0.22, 0.61, 0.36, 1); } .voices.is-fluid .voices__item { position: absolute; inset: 0 0 auto 0; } .voices__item.is-active { opacity: 1; transform: none; pointer-events: auto; } /* O item que sai vai para o lado oposto ao da entrada */ .voices__item.is-leaving { transform: translateX(calc(var(--dir) * -2.4rem)); } .voices__client { margin: 0 0 clamp(1.6rem, 2.6vh, 2.6rem); font-size: 1.3rem; font-weight: 500; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; opacity: 0.72; } .voices__quote { margin: 0; } .voices__quote p { margin: 0; font-size: clamp(2.2rem, 1.7vw + 1.1rem, 3.6rem); font-weight: 400; line-height: 1.24; letter-spacing: -0.02em; text-wrap: pretty; } /* Em `em` para o respiro acompanhar o corpo do texto, que é fluido */ .voices__quote p + p { margin-top: 0.62em; } /* Depoimento de vários parágrafos: no corpo cheio ele passaria do dobro da altura dos curtos e esticaria demais a faixa. Um degrau abaixo na escala segura a proporção baixa e larga da referência; a entrelinha abre um pouco para compensar a linha mais longa. */ .voices__quote--long p { font-size: clamp(1.8rem, 0.9vw + 1.1rem, 2.6rem); line-height: 1.34; letter-spacing: -0.015em; } .voices__dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: clamp(2.4rem, 4.2vh, 3.6rem); } .voices__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 9999px; background: currentColor; opacity: 0.3; cursor: pointer; transition: opacity 240ms ease, width 240ms ease; } .voices__dot:hover { opacity: 0.6; } .voices__dot.is-active { width: 20px; opacity: 1; } /* Setas sem moldura, como na referência: só o traço, encostado nas bordas */ .voices__nav { flex: 0 0 auto; z-index: 2; display: grid; place-items: center; width: clamp(40px, 5vw, 56px); height: clamp(40px, 5vw, 56px); padding: 0; border: 0; border-radius: 9999px; color: inherit; background: transparent; opacity: 0.55; cursor: pointer; transition: opacity 200ms ease, transform 200ms ease; } .voices__nav svg { width: clamp(22px, 2.4vw, 30px); height: clamp(22px, 2.4vw, 30px); } .voices__nav:hover { opacity: 1; } .voices__nav--prev:hover { transform: translateX(-3px); } .voices__nav--next:hover { transform: translateX(3px); } .voices__nav:focus-visible, .voices__dot:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; opacity: 1; } @media (max-width: 900px) { .voices__stage { width: min(100%, 62rem); } } @media (max-width: 560px) { .voices { gap: 0; min-height: 0; padding: clamp(3.6rem, 7vh, 5rem) 0.6rem; } .voices__nav { width: 34px; height: 34px; } .voices__nav svg { width: 20px; height: 20px; } .voices__client { font-size: 1.2rem; } .voices__quote p { font-size: clamp(1.9rem, 5.4vw, 2.4rem); } /* O mesmo degrau abaixo aplicado no desktop. A regra acima tem a mesma especificidade e vem depois no arquivo, então sem esta linha o depoimento longo voltava ao corpo cheio justamente onde a coluna é mais estreita — e no celular ele passava do dobro da altura dos curtos. */ .voices__quote--long p { font-size: clamp(1.6rem, 4.3vw, 2rem); } } /* ============================================================ FAIXA DE CLIENTES — carrossel com setas e desfoque nas pontas. As logos vêm de assets/images/clients/, já normalizadas em tom e escala: 360px de altura, tinta em cinza puro com o tom principal em 56 e largura igual a 250 x proporção^0,65 — a regra que iguala o peso visual entre uma logo larga e uma vertical. A tela vem cortada rente à tinta, sem margem embutida, para que o espaçamento fique todo a cargo do gap aqui embaixo. ============================================================ */ .clients { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.4rem); padding: clamp(4rem, 7vh, 6.5rem) clamp(1.4rem, 3.4vw, 4.4rem); background: #ffffff; } .clients__stage { position: relative; flex: 1; min-width: 0; } .clients__viewport { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; } .clients__viewport::-webkit-scrollbar { display: none; } .clients__track { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; /* Com as telas cortadas rente à tinta, este intervalo é todo o respiro que existe entre uma logo e a seguinte — e vale igual para todas. */ gap: clamp(4.8rem, 8.4vw, 12rem); } /* A altura é que é fixa, não a largura. Cada arquivo tem 360px de altura e a largura da própria tinta, então a célula acompanha o formato da logo em vez de ser sempre a mesma caixa larga. Antes, com largura fixa na proporção 1000/360, uma logo vertical ocupava menos de um quarto da célula e os outros três quartos viravam vão — a separação ia de 120px a 253px conforme os vizinhos. A escala óptica continua intacta: ela está na altura da tinta dentro dos 360px, que não mudou. */ .clients__item { flex: 0 0 auto; height: clamp(68px, 7.6vw, 112px); } .clients__item img { display: block; width: auto; height: 100%; } /* As pontas desfocam o que passa por baixo e dissolvem no branco. A máscara faz o desfoque perder força em direção ao centro, em vez de cortar seco. */ .clients__fade { position: absolute; top: 0; bottom: 0; width: clamp(64px, 12%, 160px); pointer-events: none; backdrop-filter: blur(3.5px); -webkit-backdrop-filter: blur(3.5px); } .clients__fade--left { left: 0; background: linear-gradient(90deg, #ffffff 16%, rgba(255, 255, 255, 0)); -webkit-mask-image: linear-gradient(90deg, #000 52%, transparent); mask-image: linear-gradient(90deg, #000 52%, transparent); } .clients__fade--right { right: 0; background: linear-gradient(270deg, #ffffff 16%, rgba(255, 255, 255, 0)); -webkit-mask-image: linear-gradient(270deg, #000 52%, transparent); mask-image: linear-gradient(270deg, #000 52%, transparent); } .clients__nav { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 9999px; border: 1px solid rgba(12, 18, 17, 0.22); background: transparent; color: var(--ink-soft); cursor: pointer; transition: color 180ms ease, border-color 180ms ease, opacity 180ms ease; } .clients__nav svg { width: 15px; height: 15px; } .clients__nav:hover:not(:disabled) { color: var(--ink); border-color: rgba(12, 18, 17, 0.5); } .clients__nav:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .clients__nav:disabled { opacity: 0.26; cursor: default; } @media (max-width: 560px) { .clients { gap: 0.8rem; padding: clamp(4rem, 8vh, 6rem) 1rem; } .clients__nav { width: 34px; height: 34px; } .clients__fade { width: clamp(40px, 14%, 80px); } } /* ============================================================ BLOCO DE FINALIZAÇÃO — fundo branco, logo grande, ações e o leque de cards saindo pela base da tela. ============================================================ */ .closing { --card-h: clamp(240px, 27vw, 400px); position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: 100svh; overflow: hidden; padding: clamp(5rem, 8vh, 8rem) var(--padding-x) calc(var(--card-h) * 0.66); background: #ffffff; color: var(--ink); text-align: center; } .closing__inner { position: relative; z-index: 2; } .closing__logo { margin: 0; line-height: 0; } .closing__logo img { display: block; width: min(62rem, 46vw); height: auto; margin: 0 auto; /* O SVG não declara fill, então já renderiza preto: sem filtro aqui. Compensação ótica: o ® estica a caixa para a direita sem acrescentar peso visual equivalente, então o centroide de tinta cai 1,88% da largura à esquerda do centro geométrico. O deslocamento devolve o centroide ao eixo da página. */ transform: translateX(1.88%); } .closing__lead { max-width: 34em; margin: clamp(2.4rem, 4vh, 4rem) auto 0; font-size: clamp(1.5rem, 0.9vw + 0.9rem, 1.9rem); font-weight: 400; line-height: 1.5; letter-spacing: -0.005em; color: var(--ink-soft); } .closing__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(2.4rem, 4vh, 3.6rem); } .closing__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 26px; border-radius: 10px; border: 1px solid rgba(12, 18, 17, 0.18); font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--ink); background: transparent; transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease; } .closing__btn:hover { transform: translateY(-1px); border-color: rgba(12, 18, 17, 0.4); } .closing__btn--primary { border-color: var(--ink); color: #ffffff; background: var(--ink); } .closing__btn--primary:hover { border-color: var(--ink); background: #1c2523; } .closing__arrow { font-size: 1.4rem; transition: transform 180ms ease; } .closing__btn--primary:hover .closing__arrow { transform: translateX(3px); } /* --- Rodapé em três colunas --- */ .closing__meta { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; margin-top: clamp(4rem, 8vh, 8rem); font-size: 1.4rem; color: var(--ink-soft); } /* Cada ícone leva à sua própria rede, então o bloco virou só o agrupador: o realce de hover mora no link individual, para o ponteiro indicar qual das três redes vai abrir. */ .closing__social { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); } .closing__icons { display: inline-flex; align-items: center; gap: 8px; } .closing__icon { display: block; color: inherit; border-radius: 5px; transition: color 180ms ease; } .closing__icon:hover { color: var(--ink); } .closing__icon:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .closing__icons svg { display: block; width: 18px; height: 18px; } .closing__handle { line-height: 1; } .closing__copy { margin: 0; } .closing__pill { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border-radius: 9999px; border: 1px solid rgba(12, 18, 17, 0.18); font-size: 1.4rem; font-weight: 500; line-height: 1; color: var(--ink-soft); transition: color 180ms ease, border-color 180ms ease; } .closing__pill:hover { color: var(--ink); border-color: rgba(12, 18, 17, 0.4); } /* --- Leque de cards: sai pela base e é cortado pelo overflow da seção --- */ .closing__deck { position: absolute; z-index: 1; left: 50%; bottom: calc(var(--card-h) * -0.38); display: flex; align-items: flex-end; justify-content: center; transform: translateX(-50%); pointer-events: none; } /* A pose de cada card mora nestas variáveis em vez de num `transform` próprio: assim o realce do ponteiro soma levantada e escala ao mesmo encadeamento, sem apagar a rotação que forma o leque. A levantada vem primeiro, então acontece no eixo da tela — reto para cima, e não inclinada como o card. */ .closing__card { --rot: 0deg; --ty: 0%; --lift: 0px; --grow: 1; width: calc(var(--card-h) * 0.92); height: var(--card-h); /* Sobreposição de ~30% da largura entre cards vizinhos, o que mantém o leque dentro da tela em vez de vazar pelas laterais. */ margin: 0 calc(var(--card-h) * -0.155); border-radius: 14px; overflow: hidden; background: #e9e9e7; /* O container do leque não recebe ponteiro, para a caixa dele não capturar cliques do rodapé; só os retângulos dos cards respondem. */ pointer-events: auto; transform-origin: bottom center; transform: translateY(var(--lift)) rotate(var(--rot)) translateY(var(--ty)) scale(var(--grow)); /* O fio evita que um card de topo claro se dissolva no fundo branco */ box-shadow: 0 -8px 30px rgba(12, 18, 17, 0.14), inset 0 0 0 1px rgba(12, 18, 17, 0.08); /* A sobra na curva dá o repique do dock: passa um pouco do alvo e volta */ transition: transform 340ms cubic-bezier(0.34, 1.42, 0.64, 1), box-shadow 340ms ease; } .closing__card img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Os --ty compensam a rotação: girando em torno da base, a caixa do card cresce para cima (~8,5% em 15°, ~5% em 7,5°), então sem empurrar as pontas para baixo o arco sairia invertido — pontas acima do centro. */ .closing__card:nth-child(1) { z-index: 1; --rot: -15deg; --ty: 17%; } .closing__card:nth-child(2) { z-index: 2; --rot: -7.5deg; --ty: 9%; } .closing__card:nth-child(3) { z-index: 3; } .closing__card:nth-child(4) { z-index: 2; --rot: 7.5deg; --ty: 9%; } .closing__card:nth-child(5) { z-index: 1; --rot: 15deg; --ty: 17%; } /* --- Magnificação no estilo do dock do macOS --- O card sob o ponteiro é o pico, e o efeito decai nos vizinhos em vez de dar um salto isolado: é esse degradê que faz o leque parecer uma superfície só. Cada nível precisa de dois seletores porque a mira alcança irmãos dos dois lados — `+` cobre quem vem depois do card em foco, e `:has()` cobre quem vem antes, que nenhum combinador tradicional consegue apontar. A ordem importa: os seletores de vizinho têm especificidade maior que a do recuo geral abaixo, então prevalecem sobre ele. */ .closing__deck:hover .closing__card { --grow: 0.98; } .closing__card:hover { --grow: 1.16; --lift: -26px; z-index: 10; box-shadow: 0 -20px 48px rgba(12, 18, 17, 0.26), inset 0 0 0 1px rgba(12, 18, 17, 0.1); } .closing__card:hover + .closing__card, .closing__card:has(+ .closing__card:hover) { --grow: 1.08; --lift: -13px; z-index: 6; } .closing__card:hover + .closing__card + .closing__card, .closing__card:has(+ .closing__card + .closing__card:hover) { --grow: 1.03; --lift: -5px; z-index: 4; } @media (max-width: 900px) { .closing__logo img { width: min(52rem, 72vw); } .closing__meta { flex-direction: column; gap: 1.8rem; text-align: center; } } @media (max-width: 560px) { .closing { --card-h: clamp(180px, 48vw, 240px); } .closing__lead { font-size: 1.5rem; } .closing__btn { height: 44px; padding: 0 20px; font-size: 1.4rem; } } /* Tablet */ @media (max-width: 1199px) { .team-cards { --width: min(74vw, 33.3rem, 42vh); --height: min(81vw, 36.4rem, 46vh); } .team-description { top: auto; right: auto; left: 50%; bottom: clamp(4.8rem, 8vh, 7rem); width: min(82vw, 32rem); font-size: clamp(1.3rem, 3.8vw, 1.5rem); text-align: center; transform: translateX(-50%) translateY(18px); } .team-description.is-active { transform: translateX(-50%) translateY(0); } .team-counter { top: clamp(7rem, 13vh, 10rem); bottom: auto; left: var(--padding-x); font-size: clamp(5.8rem, 18vw, 10rem); } .team-counter-value { opacity: 0.42; } .team-card-image { transform: translateX(calc(var(--scroll-velocity) * 0.45px)) translateY(calc(var(--scroll-velocity) * 0.45px)) translateZ(0) scale(1.08); } } /* Mobile */ @media (max-width: 767px) { .team-content { padding: 0 1.6rem; } .team-cards { --width: min(82vw, 25.5rem, 38vh); --height: min(calc(var(--width) * 1.09), 43vh); } .team-counter-title { white-space: normal; max-width: 46vw; font-size: 1.4rem; line-height: 1.15; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }