/* ================================================================== LP Programa de Estágio AXIA Energia A linguagem gráfica sai do símbolo da marca — uma esfera de malha triangular. Daí vêm as três decisões que sustentam a página: 1. MALHA — vértices e fios ligando pontos, nas faixas escuras 2. NÓS — hexágonos (a célula da malha) no lugar de círculos 3. FIO — o cabo de transmissão que energiza as Etapas Cores e tipografia são as do site institucional (axia.com.br): azul AXIA #0015F8, navy #0A003C, off-white quente #FAF5F0 e DM Sans. Fotografia entra em duotone azul e abre em cor quando o mouse passa. Vermelho não existe na paleta e não entra em botão nem destaque. ================================================================== */ /* ------------- Espelho da paleta oficial (tailwind.config) ------------- */ :root { --azul: #0015F8; --vivo: #001FFF; --puro: #0000FF; --medio: #1726C8; --fundo: #0F1A8D; --navy: #0A003C; --gelo: #FAF5F0; --cinzaclr: #E8E5E3; --apoio: #A0B4D2; --texto: #3A3F46; --display: 'DM Sans', Arial, sans-serif; --rule-dark: rgba(10, 0, 60, .14); --rule-light: rgba(255, 255, 255, .18); --ease: cubic-bezier(.22, 1, .36, 1); --nav-h: 80px; } html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); } body { overflow-x: hidden; font-family: var(--display); font-weight: 400; font-size: 17px; } ::selection { background: var(--azul); color: #fff; } :focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; } .hero :focus-visible, .secao-escura :focus-visible, footer :focus-visible { outline-color: #fff; } /* ================================================================== TIPOGRAFIA ================================================================== */ /* Olho da seção: numeração + assunto, com o fio da marca antes */ .olho { display: flex; align-items: center; gap: .8rem; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--azul); margin-bottom: 1.1rem; } .olho::before { content: ''; width: 34px; height: 1px; background: currentColor; flex: 0 0 auto; } .olho--light { color: var(--apoio); } .section-title { font-weight: 300; font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.02; letter-spacing: -.04em; color: var(--navy); } .section-title strong { font-weight: 800; color: var(--azul); } .section-title--light { color: #fff; } .section-title--light strong { color: #fff; } /* Cabeçalho de seção: título e, logo abaixo, o texto de apoio. Antes o apoio ficava numa coluna à direita e a Jessica apontou em quatro seções que ele ficava "solto" — longe do título que ele explica. Embaixo, colado, ele lê como legenda do título. */ .bloco-cabecalho { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; } /* O apoio não acompanha a largura do título, que é enorme: ele se segura numa medida de leitura confortável. */ .bloco-cabecalho > .section-lead, .bloco-cabecalho > .section-sub, .bloco-cabecalho > .prose-p { max-width: 58ch; } .section-lead { font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 600; line-height: 1.35; color: var(--azul); letter-spacing: -.01em; } .section-sub { font-size: 1.0625rem; line-height: 1.7; color: var(--texto); max-width: 62ch; } .section-sub--light { color: var(--apoio); } /* Justificado a pedido da Jessica. A hifenização é obrigatória junto: sem ela, a justificação abre "rios" de espaço branco no meio da coluna. O lang="pt-BR" do é o que diz ao navegador onde pode separar as sílabas. */ .prose-p { font-size: 1.0625rem; line-height: 1.8; color: var(--texto); max-width: 62ch; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } /* Em tela estreita a coluna fica curta demais e o justificado passa a atrapalhar mais do que ajuda. */ @media (max-width: 479px) { .prose-p { text-align: left; hyphens: none; -webkit-hyphens: none; } } .prose-p--light { color: rgba(255, 255, 255, .88); } /* Frase-manifesto do escopo: o único texto em corpo grande da página */ .frase-manifesto { font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 300; line-height: 1.25; letter-spacing: -.03em; color: var(--navy); max-width: 18ch; padding-top: 1.5rem; border-top: 2px solid var(--azul); } /* ============================== BOTÕES ============================== */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-weight: 600; font-size: 14px; letter-spacing: .02em; padding: .85rem 2rem; border-radius: 45px; border: 2px solid transparent; overflow: hidden; isolation: isolate; transition: color .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease); } /* Preenchimento que sobe de baixo no hover — no lugar da troca seca de background-color. */ .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform .45s var(--ease); } .btn:hover::before { transform: translateY(0); } .btn-lg { font-size: 15px; padding: 1rem 2.5rem; } /* CTA do header: some no mobile, onde o hambúrguer assume. Classe própria — o .hidden do Tailwind empata em especificidade com .btn. */ .btn-header { display: none; } @media (min-width: 480px) { .btn-header { display: inline-flex; } } @media (max-width: 479px) { .btn-lg { font-size: 14px; padding: .9rem 1.6rem; } } .btn-solid { background: var(--azul); border-color: var(--azul); color: #fff; } .btn-solid::before { background: var(--navy); } .btn-solid:hover { border-color: var(--navy); color: #fff; } .btn-ghost { border-color: rgba(255, 255, 255, .55); color: #fff; } .btn-ghost::before { background: #fff; } .btn-ghost:hover { border-color: #fff; color: var(--azul); } .btn-onblue { background: var(--gelo); border-color: var(--gelo); color: var(--azul); } .btn-onblue::before { background: var(--azul); } .btn-onblue:hover { border-color: var(--azul); color: #fff; } /* ============================== HEADER ============================== */ #header { background: transparent; } /* A barra do topo tem que ficar acima do painel mobile: o #nav-mobile é filho do header e é fixed com z-index; a barra, estática, pintava por baixo dele — e junto ia o X, que é o mesmo burger virado. */ .header-bar { position: relative; z-index: 45; } #header .nav-link { color: #fff; } /* Assinatura em dois jogos no mesmo slot: a off-white vale sobre o hero, a azul entra junto com o fundo branco. Trocar por opacity evita o pulo de layout de um display:none. */ .logo-slot { position: relative; display: inline-flex; } .logo-lockup { display: inline-flex; align-items: center; gap: .7rem; transition: opacity .3s ease; } .logo-lockup .logo-simbolo { height: 34px; width: auto; } .logo-lockup .logo-letra { height: 11px; width: auto; } .logo-pos { position: absolute; inset: 0; opacity: 0; } .logo-neg { opacity: 1; } /* O símbolo gira meia-volta quando o mouse passa pela assinatura */ .logo-slot .logo-simbolo { transition: transform .8s var(--ease); } .logo-slot:hover .logo-simbolo { transform: rotate(180deg); } #header.is-scrolled { background: #fff; box-shadow: 0 1px 0 var(--cinzaclr); } #header.is-scrolled .logo-neg { opacity: 0; } #header.is-scrolled .logo-pos { opacity: 1; } #header.is-scrolled .nav-link { color: var(--navy); } #header.is-scrolled .burger-bar { background: var(--navy); } /* Painel mobile aberto: precisa vir DEPOIS do .is-scrolled, porque as duas têm a mesma especificidade. Com a página rolada o header fica branco e apagaria o X e o logo sobre o painel navy. */ #header.is-nav-aberto { background: transparent; box-shadow: none; } #header.is-nav-aberto .logo-neg { opacity: 1; } #header.is-nav-aberto .logo-pos { opacity: 0; } #header.is-nav-aberto .burger-bar { background: #fff; } .nav-link { position: relative; font-size: .95rem; font-weight: 500; transition: color .3s ease; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -7px; width: 0; height: 2px; background: currentColor; transition: width .35s var(--ease); } .nav-link:hover::after, .nav-link.is-active::after { width: 100%; } #header.is-scrolled .nav-link.is-active { color: var(--azul); } .burger-bar { display: block; width: 24px; height: 2px; background: #fff; transition: transform .3s ease, opacity .3s ease, background .3s ease; } #nav-toggle.is-open .burger-bar { background: #fff; } #nav-toggle.is-open .burger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } #nav-toggle.is-open .burger-bar:nth-child(2) { opacity: 0; } #nav-toggle.is-open .burger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } #nav-mobile.is-open { display: flex; animation: fadeIn .25s ease both; } .nav-mobile-link { color: #fff; font-size: 1.35rem; font-weight: 500; transition: color .3s ease; } .nav-mobile-link:hover { color: var(--apoio); } /* ================================================================== HERO Foto de ponta a ponta em duotone azul: a camada .hero-duotone entra em mix-blend-mode COLOR sobre a foto dessaturada, que é como se faz duotone sem gerar um segundo arquivo de imagem. ================================================================== */ .hero { position: relative; display: flex; align-items: flex-end; min-height: 100vh; min-height: 100svh; padding: calc(var(--nav-h) + 3rem) 0 5.5rem; overflow: hidden; background: var(--navy); } .hero-midia { position: absolute; inset: 0; z-index: 0; } .hero-midia img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; filter: grayscale(1) contrast(1.08) brightness(.62); } .hero-duotone { position: absolute; inset: 0; background: linear-gradient(160deg, var(--navy) 0%, var(--fundo) 45%, var(--azul) 100%); mix-blend-mode: color; opacity: .95; } /* Segunda camada, agora escurecendo por baixo do texto */ .hero-midia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 0, 60, .92) 0%, rgba(10, 0, 60, .45) 45%, rgba(10, 0, 60, .55) 100%); } /* Malha de vértices — o grafismo do símbolo aplicado ao fundo */ .hero-malha { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px); background-size: 34px 34px; opacity: .35; mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 72%); } /* Símbolo da marca: gira devagar e é empurrado pelo mouse. O deslocamento vem das variáveis --mx/--my, escritas pelo JS. */ .hero-esfera { position: absolute; top: 6%; right: 2%; width: min(32vw, 360px); height: auto; z-index: 1; opacity: .45; animation: giraEsfera 60s linear infinite; transform: translate3d(calc(var(--mx, 0) * 26px), calc(var(--my, 0) * 26px), 0); transition: transform .9s var(--ease); pointer-events: none; } @keyframes giraEsfera { to { rotate: 360deg; } } @media (max-width: 1023px) { .hero-esfera { top: 8%; right: -14%; width: 68vw; opacity: .32; } } .hero-inner { position: relative; z-index: 2; width: 100%; } .hero-kicker { display: flex; align-items: center; gap: .9rem; font-size: .82rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--apoio); } .hero-fio { display: block; width: 56px; height: 1px; background: currentColor; transform-origin: left; animation: fioEntra 1s var(--ease) .2s both; } @keyframes fioEntra { from { transform: scaleX(0); } to { transform: scaleX(1); } } .hero-title { margin-top: 1rem; line-height: .88; letter-spacing: -.045em; color: #fff; } .hero-title span { display: block; overflow: hidden; } .hero-l1 { font-weight: 800; font-size: clamp(3.4rem, 11vw, 8rem); } .hero-l2 { font-weight: 200; font-size: clamp(3.4rem, 11vw, 8rem); color: var(--gelo); } /* As duas linhas sobem de dentro do próprio recorte */ .hero-l1, .hero-l2 { animation: sobeLinha 1s var(--ease) both; } .hero-l1 { animation-delay: .15s; } .hero-l2 { animation-delay: .28s; } @keyframes sobeLinha { from { transform: translateY(105%); } to { transform: translateY(0); } } .hero-tagline { margin-top: 1.8rem; font-size: clamp(1.2rem, 2.4vw, 1.75rem); font-weight: 400; line-height: 1.3; color: #fff; max-width: 20ch; animation: fadeUp .9s var(--ease) .5s both; } .hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; animation: fadeUp .9s var(--ease) .62s both; } .hero-nota { margin-top: 2.4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-light); font-size: 1.0625rem; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, .9); max-width: 40ch; animation: fadeUp .9s var(--ease) .74s both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* Indicador de rolagem: um pulso desce por um fio, como corrente */ .hero-scroll { position: absolute; left: 50%; bottom: 26px; z-index: 3; transform: translateX(-50%); } .hero-scroll-trilho { display: block; position: relative; width: 1px; height: 52px; background: rgba(255, 255, 255, .28); overflow: hidden; } .hero-scroll-pulso { position: absolute; left: 0; width: 1px; height: 18px; background: #fff; animation: desce 1.9s var(--ease) infinite; } @keyframes desce { 0% { top: -18px; opacity: 0; } 25% { opacity: 1; } 100% { top: 52px; opacity: 0; } } @media (max-width: 767px) { .hero-scroll { display: none; } } /* ---- KV oficial (quando chegar) ---- Nasce escondido. A classe .tem-kv é posta pelo JS só depois que a arte baixa de verdade; enquanto o arquivo não existir, vale o hero acima e nada pisca na tela. */ .hero-kv { position: absolute; inset: 0; z-index: 20; display: none; justify-content: center; } #hero.tem-kv .hero-kv { display: flex; } #hero.tem-kv .hero-inner, #hero.tem-kv .hero-midia, #hero.tem-kv .hero-esfera, #hero.tem-kv .hero-scroll { display: none; } #hero.tem-kv { min-height: 0; height: min(100vh, 768px); padding: 0; } /* Largura conforme o padrão Hager: base de 1140px, acompanhando a tela a partir daí e travando em 2000px, o tamanho nativo do KV. A área segura de 1144px no centro da arte é o que sobrevive ao recorte. */ .hero-kv img { display: block; width: clamp(1140px, 100vw, 2000px); max-width: none; height: 100%; object-fit: cover; object-position: center; } @media (max-width: 767px) { .hero-kv img { width: 100%; } } /* ================================================================== SEÇÃO ESCURA — Benefícios e CTA Navy com a malha de vértices e um facho de luz que segue o cursor. ================================================================== */ .secao-escura { position: relative; overflow: hidden; color: #fff; background: var(--navy); } .secao-escura::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px); background-size: 30px 30px; opacity: .5; pointer-events: none; } /* Facho: acompanha o mouse pela seção (variáveis escritas pelo JS). Fora do alcance do ponteiro, fica parado no centro. */ .facho { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(560px circle at var(--fx, 50%) var(--fy, 40%), rgba(0, 21, 248, .55) 0%, rgba(0, 21, 248, 0) 62%); opacity: 0; transition: opacity .5s ease; } .secao-escura.tem-facho .facho { opacity: 1; } /* ======================= SOBRE O PROGRAMA ======================= */ .programa-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 1024px) { .programa-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } } /* Faixa de três fotos, a do meio mais larga */ .tiras { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .tiras { grid-template-columns: 1fr 1.45fr 1fr; gap: 1.25rem; } } .tira { margin: 0; aspect-ratio: 3 / 4; } /* A do meio ocupa uma coluna 1,45x mais larga. Para as três fecharem na mesma altura, a proporção dela tem que ser 1,45 x 3/4 = 1,09. Com aspect-ratio:auto ela crescia pela altura nativa da foto e sobrava para cima e para baixo das laterais. */ @media (min-width: 768px) { .tira--larga { aspect-ratio: 1.09 / 1; } } /* Chamada do escopo fechando a seção. Era uma caixa bege — e logo abaixo vem a seção de Pré-requisitos, também bege: dois blocos da mesma cor em sequência apagavam a chamada. Agora ela é um campo azul da marca, com a malha de vértices por cima. Corta a repetição e é o ponto mais vivo do trecho, que é o que a Jessica pediu. */ .chamada { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 1.75rem; text-align: center; padding: 3rem 1.5rem; border-radius: 24px; background: linear-gradient(120deg, var(--navy) 0%, var(--fundo) 55%, var(--azul) 100%); } .chamada::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px); background-size: 30px 30px; opacity: .55; pointer-events: none; } .chamada > * { position: relative; z-index: 1; } @media (min-width: 768px) { .chamada { padding: 3.5rem 2.5rem; } } .chamada-texto { font-size: clamp(1.35rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.2; letter-spacing: -.03em; color: #fff; max-width: 22ch; } /* ================================================================== FOTOGRAFIA As fotos entram em cor natural — sem véu azul. O que reage ao mouse é o movimento: a imagem cresce e desliza na direção do cursor, e a cantoneira se abre no canto. ================================================================== */ .js-foto { position: relative; overflow: hidden; border-radius: 20px; background: var(--cinzaclr); cursor: pointer; } .js-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02) translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -10px), 0); transition: transform .9s var(--ease); } /* Véu escuro discreto, só para a cantoneira branca ter onde apoiar. Ele SAI no hover — não é filtro de cor, é contraste de canto. */ .js-foto::before { content: ''; position: absolute; right: 0; bottom: 0; z-index: 2; width: 45%; height: 45%; background: linear-gradient(315deg, rgba(10, 0, 60, .45), transparent 70%); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; } /* Cantoneira que se abre no hover — marca a foto como algo "vivo" */ .js-foto::after { content: ''; position: absolute; right: 16px; bottom: 16px; z-index: 3; width: 26px; height: 26px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; opacity: 0; transform: translate(10px, 10px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none; } .js-foto:hover img, .js-foto:focus-within img { transform: scale(1.07) translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -14px), 0); } .js-foto:hover::before, .js-foto:focus-within::before { opacity: 1; } .js-foto:hover::after, .js-foto:focus-within::after { opacity: 1; transform: none; } /* ============================ PRÉ-REQUISITOS ============================ Linhas largas: o azul varre da esquerda para a direita no hover. */ .reqs-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 1024px) { .reqs-grid { grid-template-columns: 7fr 4fr; gap: 4rem; align-items: start; } } .reqs { list-style: none; margin: 0; padding: 0; } .req { position: relative; display: flex; align-items: flex-start; gap: 1.5rem; padding: 1.6rem 1.5rem 1.6rem 1.25rem; border-top: 1px solid var(--rule-dark); isolation: isolate; transition: color .45s var(--ease); } .req:last-child { border-bottom: 1px solid var(--rule-dark); } /* A varredura: um retângulo azul que entra pela esquerda */ .req::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--azul); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); } .req:hover::before { transform: scaleX(1); } .req-num { flex: 0 0 auto; font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--azul); padding-top: .35rem; transition: color .45s var(--ease); } .req-text { font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.55; font-weight: 500; color: var(--navy); transition: color .45s var(--ease); } .req:hover .req-num, .req:hover .req-text { color: #fff; } /* A foto acompanha a lista na rolagem. O recuo negativo sobe a foto acima do primeiro item da lista, como pedido em 25/08 — antes ela nascia alinhada ao número "01" e o bloco ficava pesado embaixo. */ .req-foto { margin: 0; aspect-ratio: 3 / 4; } @media (min-width: 1024px) { .req-foto { position: sticky; top: calc(var(--nav-h) + 1.5rem); margin-top: -3.5rem; aspect-ratio: 3 / 4.4; } } /* ============================== CARDS ============================== Vidro sobre o navy, inclinando com o mouse (--rx / --ry vêm do JS). */ .beneficios-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; } @media (min-width: 560px) { .beneficios-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .beneficios-grid { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; } } .card { position: relative; padding: 2.1rem 1.6rem 1.9rem; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); } .card:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .11); } /* Brilho que nasce no ponto onde o cursor está */ .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(220px circle at var(--cx, 50%) var(--cy, 50%), rgba(255, 255, 255, .18), transparent 65%); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .card:hover::before { opacity: 1; } .card-icon { display: block; color: #fff; margin-bottom: 1.4rem; transform: translateZ(24px); } .card-icon svg { width: 34px; height: 34px; } .card-text { font-size: 1.0625rem; line-height: 1.45; font-weight: 600; color: #fff; transform: translateZ(14px); } /* ========================= ÁREAS DE ATUAÇÃO ========================= Lista editorial. No hover a linha vira uma barra azul e a seta anda. */ .areas-rotulo { font-size: .95rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texto); } /* Duas colunas a partir do tablet. O grid preenche por COLUNA (grid-auto-flow: column + 7 linhas fixas), então a leitura fica 01–07 na esquerda e 08–13 na direita, na ordem do escopo — e não 01/02 lado a lado, que embaralharia a numeração. */ .areas-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; } @media (min-width: 768px) { .areas-lista { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(7, auto); grid-auto-flow: column; column-gap: 3.5rem; } /* O 8º item abre a segunda coluna: é ele que leva o fio de topo */ .area:nth-child(8) { border-top: 1px solid var(--rule-dark); } } .area { position: relative; display: flex; align-items: center; gap: 1.5rem; padding: 1.15rem 1.5rem 1.15rem 1.25rem; border-bottom: 1px solid var(--rule-dark); isolation: isolate; cursor: default; } .area:first-child { border-top: 1px solid var(--rule-dark); } .area::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--azul); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .area:hover::before { transform: scaleX(1); } .area-num { flex: 0 0 auto; width: 2.2rem; font-size: .78rem; font-weight: 800; letter-spacing: .08em; color: var(--azul); transition: color .4s var(--ease); } .area-nome { flex: 1 1 auto; font-size: clamp(1.1rem, 2.4vw, 1.6rem); font-weight: 500; letter-spacing: -.02em; color: var(--navy); transition: color .4s var(--ease), transform .5s var(--ease); } .area-seta { flex: 0 0 auto; font-size: 1.3rem; color: #fff; opacity: 0; transform: translateX(-14px); transition: opacity .4s var(--ease), transform .5s var(--ease); } .area:hover .area-num, .area:hover .area-nome { color: #fff; } .area:hover .area-nome { transform: translateX(10px); } .area:hover .area-seta { opacity: 1; transform: none; } /* ================================================================== ETAPAS — linha de transmissão Os cinco nós são hexágonos (a célula da malha do símbolo) ligados por um cabo com catenária. O cabo energiza conforme a rolagem (stroke-dashoffset escrito pelo JS) e cada nó acende na sequência. Um pulso corre pelo cabo o tempo todo, via . ================================================================== */ .linha { position: relative; padding-top: 4.5rem; margin-top: 3rem; } .linha-cabo { position: absolute; left: 0; right: 0; top: 84px; /* alinha o pico do cabo (y=30) ao centro do nó */ height: 120px; z-index: 0; overflow: visible; } .cabo-base, .cabo-ativo { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; } .cabo-base { stroke: rgba(10, 0, 60, .16); } /* Sem transition: quem move o traço é o quadro a quadro do JS. Interpolar por cima faria o ponto de luz descolar da ponta. */ .cabo-ativo { stroke: var(--azul); filter: drop-shadow(0 0 6px rgba(0, 21, 248, .55)); } .cabo-pulso { fill: #fff; filter: drop-shadow(0 0 7px rgba(255, 255, 255, .95)); } .linha-etapas { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; list-style: none; margin: 0; padding: 0; } .etapa { position: relative; text-align: center; opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--delay, 0ms); } .linha.is-active .etapa { opacity: 1; transform: none; } /* Numeral grande em contorno, atrás do nó */ .etapa-fundo { position: absolute; z-index: 1; /* acima do halo, abaixo do nó */ top: -62px; left: 50%; transform: translateX(-50%); font-size: 5.5rem; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(10, 0, 60, .13); pointer-events: none; transition: -webkit-text-stroke-color .5s var(--ease); } .etapa.is-on .etapa-fundo { -webkit-text-stroke-color: rgba(0, 21, 248, .35); } /* Halo azul que acende ATRÁS do hexágono. Fica fora do clip-path do nó — por isso é um elemento próprio, e não um box-shadow (sombra não escapa de um clip-path). */ .etapa-glow { position: absolute; left: 50%; top: 44px; /* centro do nó: metade dos 88px */ z-index: 0; width: 150px; height: 150px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(0, 21, 248, .5) 0%, rgba(0, 21, 248, 0) 68%); opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; } .etapa.is-on .etapa-glow { opacity: .75; } /* No nó 5 o halo é maior e respira — é a chegada da energia */ .etapa--final.is-on .etapa-glow { opacity: 1; width: 240px; height: 240px; background: radial-gradient(circle, rgba(0, 21, 248, .75) 0%, rgba(0, 21, 248, .28) 38%, rgba(0, 21, 248, 0) 70%); animation: respiraHalo 1.5s ease-in-out infinite; } @keyframes respiraHalo { 0%, 100% { transform: translate(-50%, -50%) scale(.86); opacity: .85; } 50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; } } /* O nó: hexágono, a célula da malha da marca. O z-index cria o contexto de empilhamento em que o ::after (miolo) pinta acima do fundo do próprio nó — que é o contorno — e abaixo do ícone. Um hexágono só, sem elemento extra. */ .etapa-no { position: relative; z-index: 2; width: 88px; height: 88px; margin: 0 auto 26px; display: flex; align-items: center; justify-content: center; color: var(--azul); background: rgba(10, 0, 60, .2); /* contorno */ clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); transition: color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease); } .etapa-no::after { content: ''; position: absolute; inset: 2px; z-index: -1; background: var(--gelo); /* miolo */ clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); transition: background .45s var(--ease); } .etapa.is-on .etapa-no { color: #fff; background: var(--azul); } .etapa.is-on .etapa-no::after { background: var(--azul); } .etapa-icone { width: 32px; height: 32px; position: relative; z-index: 1; } .etapa:hover .etapa-no { transform: scale(1.08); } .etapa-texto h3 { font-weight: 700; font-size: .98rem; line-height: 1.3; letter-spacing: -.01em; color: var(--navy); max-width: 15ch; margin: 0 auto 5px; } .etapa-texto p { font-size: .82rem; line-height: 1.5; color: var(--texto); } .etapa--final .etapa-no { color: var(--azul); } /* ---- Tablet: 3 colunas, sem cabo (ele só faz sentido em fila) ---- */ @media (max-width: 1100px) and (min-width: 861px) { .linha-etapas { grid-template-columns: repeat(3, 1fr); gap: 4.5rem 1.5rem; } .linha-cabo { display: none; } } /* ---- Mobile: a linha vira vertical ---- */ @media (max-width: 860px) { .linha { padding-top: 1rem; } .linha-cabo { display: none; } /* Cabo vertical, desenhado em CSS */ .linha::before { content: ''; position: absolute; left: 44px; top: 3.5rem; bottom: 3.5rem; width: 2px; background: rgba(10, 0, 60, .16); } .linha::after { content: ''; position: absolute; left: 44px; top: 3.5rem; width: 2px; height: var(--carga, 0%); opacity: var(--luz, 1); background: var(--azul); box-shadow: 0 0 10px rgba(0, 21, 248, .6); } .linha-etapas { grid-template-columns: 1fr; gap: 2.5rem; } .etapa { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 1.25rem; text-align: left; transform: translateX(-24px); } .linha.is-active .etapa { transform: none; } .etapa-fundo { top: 50%; left: auto; right: 0; transform: translateY(-50%); font-size: 4.5rem; } .etapa-no { margin: 0; } .etapa-texto h3 { font-size: 1.0625rem; max-width: none; margin-left: 0; } /* O nó saiu do centro e foi para a coluna da esquerda: o halo acompanha, senão ele acenderia no meio do texto. */ .etapa-glow { left: 44px; top: 50%; } } @media (max-width: 480px) { .etapa { grid-template-columns: 68px 1fr; gap: 1rem; } .etapa-no { width: 68px; height: 68px; } .etapa-icone { width: 26px; height: 26px; } .linha::before, .linha::after { left: 34px; } .etapa-fundo { font-size: 3.4rem; } .etapa-glow { left: 34px; width: 120px; height: 120px; } .etapa--final.is-on .etapa-glow { width: 180px; height: 180px; } } /* ========================= SOBRE A EMPRESA ========================= */ .empresa-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 1024px) { .empresa-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } } /* Faixa azul cheia, com letras brancas. Antes os números viviam em caixas claras que só ficavam bege ao passar o cursor — a Jessica pediu a cor fixa, para a faixa ter vida sem depender do mouse. Os fios divisores agora são brancos translúcidos. */ .numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-radius: 20px; overflow: hidden; background: var(--azul); } @media (min-width: 768px) { .numeros { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .numeros { grid-template-columns: repeat(6, 1fr); } } /* Coluna com a legenda empurrada para o rodapé: "cerca de 74 mil" quebra em duas linhas e, sem isso, a legenda dessa célula descia e saía do alinhamento das outras cinco. */ .numero { display: flex; flex-direction: column; padding: 1.9rem 1.2rem; box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .22); transition: background .4s var(--ease); } .numero:hover { background: var(--fundo); } .numero-valor { font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1; letter-spacing: -.035em; color: #fff; } .numero-desc { margin-top: auto; padding-top: .7rem; font-size: .92rem; line-height: 1.45; color: rgba(255, 255, 255, .82); } /* ---- Mosaico de fotos ---- */ .mosaico { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .mosaico { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } } /* Três fotos: uma alta ocupando a coluna da esquerda inteira e duas empilhadas na direita. Com três colunas sobrava um vão vazio. Quando as fotos que faltam chegarem, volta para três colunas. */ @media (min-width: 1024px) { .mosaico { grid-template-columns: 1fr 1.15fr; grid-auto-rows: 250px; } .mosaico-item { grid-row: span 1; } .mosaico-item--alto { grid-row: span 2; } .mosaico-item--largo { grid-column: span 2; } } .mosaico-item { margin: 0; aspect-ratio: 4 / 3; } @media (min-width: 1024px) { .mosaico-item { aspect-ratio: auto; height: 100%; } } /* ============================== CTA FINAL ============================== */ .cta { padding: 7rem 0 7.5rem; } .cta-esfera { position: absolute; left: 50%; top: 50%; z-index: 0; width: min(70vw, 620px); opacity: .13; transform: translate3d(calc(-50% + var(--mx, 0) * 22px), calc(-50% + var(--my, 0) * 22px), 0); transition: transform 1s var(--ease); animation: giraEsfera 80s linear infinite; pointer-events: none; } .cta-kicker { font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 400; color: var(--apoio); } .cta-title { margin-top: .9rem; font-weight: 200; font-size: clamp(2rem, 5.5vw, 3.6rem); line-height: 1.05; letter-spacing: -.04em; color: #fff; } .cta-title strong { display: block; font-weight: 800; } .cta-nota { margin-top: 1.6rem; font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, .88); max-width: 40ch; margin-inline: auto; } /* ================================ FOOTER ================================ */ .footer-strip { height: 5px; background: linear-gradient(90deg, var(--navy) 0%, var(--fundo) 33%, var(--azul) 66%, var(--apoio) 100%); } .footer-logos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2rem 3.5rem; } .footer-logo-axia { height: 84px; width: auto; } .footer-rule { display: block; width: 80px; height: 1px; background: rgba(255, 255, 255, .3); margin: 2.5rem auto; } .footer-suporte { font-size: 1.0625rem; line-height: 1.7; color: rgba(255, 255, 255, .88); max-width: 52ch; margin: 0 auto; text-wrap: balance; } .footer-mail { font-weight: 600; color: var(--apoio); transition: color .3s ease; } .footer-mail:hover { color: #fff; text-decoration: underline; } .footer-social { display: flex; justify-content: center; gap: .75rem; margin-top: 1.75rem; } .social { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(255, 255, 255, .1); color: #fff; transition: background-color .3s ease, transform .3s var(--ease); } .social:hover { background: var(--azul); transform: translateY(-3px); } .social svg { width: 18px; height: 18px; } .footer-bottom { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .12); } .footer-copy { font-size: .9rem; color: rgba(255, 255, 255, .6); } /* ========================= REVEAL ON SCROLL ========================= */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: .09s; } .reveal-delay-2 { transition-delay: .18s; } .reveal-delay-3 { transition-delay: .27s; } .reveal-delay-4 { transition-delay: .36s; } .reveal-delay-5 { transition-delay: .45s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ============================ ACESSIBILIDADE ============================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .etapa { opacity: 1; transform: none; transition: none; } .hero-esfera, .cta-esfera { animation: none; transform: none !important; } .hero-l1, .hero-l2, .hero-tagline, .hero-actions, .hero-nota, .hero-fio { animation: none; } .hero-scroll-pulso { animation: none; } .cabo-pulso { display: none; } .etapa--final.is-on .etapa-glow { animation: none; } .card { transform: none !important; } .js-foto img { transform: none !important; } .btn:hover { transform: none; } }