/* ============================================================ GRUPO WISH · HUB — design tokens ============================================================ */ :root { --gold: #daa520; --magenta: #e52f9e; --roxo: #402877; --roxo-profundo: #251949; --preto: #262626; --neon: #7a3ff2; --bg: #251949; /* interpolado via JS no scroll */ --ink: #f5f1fa; --ink-60: rgba(245, 241, 250, 0.6); --ink-38: rgba(245, 241, 250, 0.38); --line: rgba(245, 241, 250, 0.14); --grad-wish: linear-gradient( 120deg, #daa520 0%, #e52f9e 32%, #402877 68%, #251949 100% ); --grad-warm: linear-gradient(120deg, #daa520 0%, #e52f9e 100%); /* ------------------------------------------------------------ CORES DAS EMPRESAS — fonte unica ------------------------------------------------------------ Troque a cor aqui e ela muda em todos os lugares de uma vez: o nome na roleta, o painel da direita, os blocos da secao rede e as celulas do topo (o JS le estas variaveis). Cada empresa tem tres tokens: --emp- cor principal (a do Figma) --emp--claro ponta clara do degrade --emp--grad o degrade montado com as duas Formato: hex vindo direto do Figma. Serve qualquer cor de CSS (rgb, hsl, oklch) desde que --emp- continue sendo uma cor solida: o JS a le para pintar as celulas e o fio da rede, e degrade nao pinta ali. A ordem abaixo e a mesma da roleta. */ --emp-projetos: #a07dff; --emp-projetos-claro: #d5c2ff; --emp-projetos-grad: linear-gradient( 120deg, var(--emp-projetos-claro), var(--emp-projetos) ); --emp-criativa: #b36bff; --emp-criativa-claro: #e0c4ff; --emp-criativa-grad: linear-gradient( 120deg, var(--emp-criativa-claro), var(--emp-criativa) ); --emp-realizacoes: #ff5cb8; --emp-realizacoes-claro: #ffb3dd; --emp-realizacoes-grad: linear-gradient( 135deg, var(--emp-realizacoes-claro), var(--emp-realizacoes) ); --emp-obras: #ff9d4d; --emp-obras-claro: #ffd79a; --emp-obras-grad: linear-gradient( 120deg, var(--emp-obras-claro), var(--emp-obras) ); --emp-nodus: #62ea86; --emp-nodus-claro: #b6f7bb; --emp-nodus-grad: linear-gradient( 120deg, var(--emp-nodus-claro), var(--emp-nodus) ); --font-display: "Comfortaa", system-ui, sans-serif; --font-body: "Montserrat", system-ui, sans-serif; --wish-mask: url("data:image/webp;base64,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"); /* wish-script-nodot.png oficial (632×272) */ --gutter: clamp(1.25rem, 4vw, 4rem); --maxw: 1280px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color 0.8s ease; } ::selection { background: var(--magenta); color: #fff; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* luz ambiente da padronagem (formas orgânicas luminosas, bem contidas) */ .glow { position: fixed; pointer-events: none; z-index: 0; } .glow--a { width: 58vw; height: 58vw; top: -20vw; right: -18vw; background: radial-gradient( closest-side, rgba(218, 165, 32, 0.12), transparent ); } .glow--b { width: 70vw; height: 70vw; bottom: -30vw; left: -22vw; background: radial-gradient( closest-side, rgba(229, 47, 158, 0.09), transparent ); } main { position: relative; z-index: 1; } .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } /* ---------- sistema de labels ---------- */ .eyebrow { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-body); font-weight: 500; font-size: clamp(0.78rem, 1.05vw, 1rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-60); white-space: nowrap; } .eyebrow::before { content: ""; width: 44px; height: 1px; background: var(--grad-warm); flex: none; } .eyebrow .n { color: var(--gold); letter-spacing: 0.2em; white-space: nowrap; } /* Rotulo que abre uma secao: e a primeira coisa que a pessoa le ali, entao nao pode ter o mesmo corpo do rotulo de apoio do topo. Sobe de 9,9px para 14px no desktop, com o tracking um pouco menor — a 14px o espacamento de antes abria demais — e o risco mais longo para acompanhar. */ .section-head .eyebrow, .atu-copy .eyebrow { font-size: clamp(0.95rem, 1.28vw, 1.15rem); /* a 18px o espacamento de rotulo pequeno abre demais */ letter-spacing: 0.14em; color: var(--ink-72, rgba(245, 241, 250, 0.72)); } .section-head .eyebrow::before, .atu-copy .eyebrow::before { width: 56px; } @media (max-width: 760px) { .eyebrow { letter-spacing: 0.1em; font-size: 0.72rem; white-space: nowrap; } .section-head .eyebrow, .atu-copy .eyebrow { font-size: 0.95rem; letter-spacing: 0.1em; white-space: normal; } .section-head .eyebrow::before, .atu-copy .eyebrow::before { width: 40px; } } /* ---------- wordmark "Wish·" (asset oficial em máscara; o texto interno fica invisível e serve a leitores de tela) ---------- */ .wm { position: relative; display: inline-flex; align-items: baseline; line-height: 1; white-space: nowrap; } .wm-script { display: inline-block; width: 2.324em; height: 1em; overflow: hidden; background: var(--ink); color: transparent; line-height: 1; -webkit-mask: var(--wish-mask) center/contain no-repeat; mask: var(--wish-mask) center/contain no-repeat; } .wm-dot { /* posição oficial do "·": x 584–622, y 143–181 do asset 632×272 */ display: inline-block; width: 0.14em; height: 0.14em; border-radius: 50%; background: var(--grad-warm); margin-left: -0.177em; transform: translateY(-0.334em); animation: dotpulse 2.8s ease-in-out infinite; } .wm-word { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; margin-left: 0.42em; display: inline-block; transform: translateY(-0.1em); } @keyframes dotpulse { 0%, 100% { transform: translateY(-0.334em) scale(1); box-shadow: 0 0 0 0 rgba(229, 47, 158, 0.45); } 50% { transform: translateY(-0.334em) scale(1.18); box-shadow: 0 0 0.5em 0.12em rgba(218, 165, 32, 0.35); } } /* ---------- nav ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--gutter); transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease; } .nav.is-scrolled { background: rgba(21, 13, 40, 0.72); backdrop-filter: blur(14px); padding-block: 0.7rem; } .nav-logo { font-size: 1.35rem; color: var(--ink); } .nav-links { display: flex; align-items: center; gap: 2.2rem; list-style: none; } .nav-links a { font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; color: var(--ink-60); transition: color 0.3s; } .nav-links a:hover { color: var(--ink); } .nav-cta { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 0.65rem 1.4rem; position: relative; overflow: hidden; isolation: isolate; transition: border-color 0.3s, color 0.3s; } .nav-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-warm); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1); } .nav-cta:hover::before { transform: scaleX(1); } .nav-cta:hover { border-color: transparent; color: #fff; } /* ---------- navegação: gaveta no mobile, barra no desktop ---------- Base = telefone. O desktop é reconstruído em (min-width: 761px). */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.3s, background 0.3s; } .nav-toggle-box { position: relative; display: block; width: 18px; height: 12px; } .nav-toggle-bar { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 0.34s cubic-bezier(0.7, 0, 0.2, 1); } .nav-toggle-bar:nth-child(1) { top: 0; } .nav-toggle-bar:nth-child(2) { bottom: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(5.25px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { transform: translateY(-5.25px) rotate(-45deg); } .nav-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(12, 10, 18, 0.62); opacity: 0; transition: opacity 0.35s; } .nav-scrim.is-open { opacity: 1; } .nav-links { position: fixed; top: 0; right: 0; bottom: 0; z-index: 46; width: min(86vw, 360px); padding: 5.5rem var(--gutter) 2rem; display: flex; flex-direction: column; align-items: stretch; gap: 0; list-style: none; background: #2c1c52; border-left: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; transform: translateX(101%); visibility: hidden; /* visibility vira 'visible' na hora ao abrir (senão o foco não entra na gaveta) e só volta a 'hidden' depois que a saída termina */ transition: transform 0.42s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s linear 0.42s; } .nav-links.is-open { transform: none; visibility: visible; transition: transform 0.42s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s; } /* alvo de toque cheio: 52px de altura por item */ .nav-links > li > a:not(.nav-cta) { display: flex; align-items: center; min-height: 52px; font-size: 0.82rem; letter-spacing: 0.2em; border-bottom: 1px solid var(--line); -webkit-tap-highlight-color: transparent; } .nav-cta-li { margin-top: auto; padding-top: 1.6rem; } .nav-cta-li .nav-cta { display: flex; align-items: center; justify-content: center; min-height: 52px; } @media (min-width: 761px) { .nav-toggle, .nav-scrim { display: none; } .nav-links { position: static; width: auto; padding: 0; flex-direction: row; align-items: center; gap: 2.2rem; background: none; border-left: 0; overflow: visible; transform: none; visibility: visible; } .nav-links > li > a:not(.nav-cta) { /* inline-flex em vez de inline: padding-block só amplia a área de toque com display de caixa — em inline puro, a maioria dos navegadores nao reserva esse espaco no eixo de bloco. */ display: inline-flex; align-items: center; min-height: 0; padding-block: 0.5rem; font-size: 0.78rem; letter-spacing: 0.24em; border-bottom: 0; } .nav-cta-li { margin-top: 0; padding-top: 0; } .nav-cta-li .nav-cta { display: inline-block; min-height: 0; } } /* ---------- hero ---------- */ .hero { min-height: clamp(520px, 72svh, 820px); padding-top: clamp(5rem, 14svh, 8rem); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(2rem, 5vh, 4rem); position: relative; } .hero-inner { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vh, 2.5rem); } .hero .eyebrow { margin-bottom: 0.5rem; } .hero-wm { /* 12% e depois mais 15%: 25,2% abaixo do tamanho original (era 4.2 / 14vw / 13rem) */ font-size: clamp(3.15rem, 10.47vw, 9.72rem); color: var(--ink); /* Alinhamento optico. Duas coisas empurram o W para dentro: a tinta so comeca a 0,79% da largura da mascara, e a massa do traco grosso so aparece a 16% dela — a volta fina da entrada nao pesa no olho. Um titulo desse corpo precisa avancar sobre a margem para parecer alinhado com o texto abaixo. O puxao devolve o vao da mascara e mais 4% da altura da letra. */ margin-left: -0.055em; } .hero-wm .wm-script { font-size: 1em; } .hero-wm .wm-word { font-size: 0.289em; letter-spacing: 0.34em; font-weight: 500; color: var(--ink); margin-left: 0.35em; transform: translateY(-0.18em); display: inline-block; } /* frase principal do site: entra logo abaixo do wordmark e e a unica linha em destaque do topo. O texto de apoio (.hero-sub) fica um degrau abaixo, para nao disputar a leitura. */ .hero-frase { margin-top: clamp(0.6rem, 2vh, 1.1rem); max-width: 22ch; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); } .hero-sub { max-width: 34ch; font-size: clamp(1.02rem, 1.6vw, 1.3rem); font-weight: 300; color: var(--ink-60); line-height: 1.75; } .hero-sub strong { color: var(--ink); font-weight: 500; } /* ---------- topo no celular ---------- Na tela estreita o topo estava reservando meia tela de vazio: a altura minima empurrava o bloco para o rodape e o respiro do alto ficava sobrando. Aqui a altura passa a ser a do proprio conteudo, com folga suficiente para o texto nao nascer colado no menu. */ @media (max-width: 760px) { .hero { min-height: 0; justify-content: flex-start; /* so o bastante para limpar a barra fixa do menu */ padding-top: clamp(6rem, 13svh, 7.5rem); padding-bottom: clamp(2.2rem, 6vh, 3.4rem); } .hero-inner { gap: clamp(0.9rem, 2.2vh, 1.5rem); } .hero-frase { max-width: 17ch; } /* O rotulo nao quebra linha por padrao — e uma etiqueta curta. Frases longas como a do topo vazavam pela lateral no celular, entao aqui ele volta a quebrar. */ .hero .eyebrow { flex-wrap: wrap; white-space: normal; row-gap: 0.35rem; line-height: 1.5; } } /* ---------- marquee ---------- */ .marquee { border-block: 1px solid var(--line); padding-block: clamp(1rem, 2.4vh, 1.6rem); overflow: hidden; white-space: nowrap; } .marquee-track { display: inline-flex; gap: 0; animation: marquee 38s linear infinite; } /* a camada de composicao so enquanto a faixa esta na tela */ .marquee.na-tela .marquee-track { will-change: transform; } .marquee span { font-family: var(--font-display); font-weight: 500; text-transform: lowercase; font-size: clamp(1.5rem, 3.4vw, 2.6rem); color: rgba(245, 241, 250, 0.22); padding-inline: 0.9rem; } .marquee i { font-style: normal; color: var(--gold); font-size: clamp(1.5rem, 3.4vw, 2.6rem); } .marquee span:nth-child(4n) ~ i { color: var(--magenta); } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- seções ---------- */ .section { padding-block: clamp(5rem, 14vh, 9.5rem); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); } /* manifesto */ .manifesto-pergunta { font-family: var(--font-display); font-weight: 400; /* era clamp(0.8rem,3.5vw,1.3rem) + nowrap: o gancho narrativo da pagina renderizava menor que o paragrafo abaixo dele so para caber em uma linha. Agora quebra em 2 linhas no mobile — e o comportamento correto para uma pergunta de 42 caracteres. */ font-size: clamp(1.6rem, 4.6vw, 3rem); line-height: 1.3; letter-spacing: 0.01em; max-width: 18ch; text-wrap: balance; color: var(--ink-60); margin-bottom: clamp(1.6rem, 4vh, 2.6rem); } .manifesto p { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 2.3vw, 1.9rem); line-height: 1.55; max-width: 44ch; color: var(--ink); text-wrap: pretty; } .manifesto p + p { margin-top: clamp(2rem, 5vh, 3.2rem); } .manifesto .hl { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; } .manifesto .dim { color: var(--ink-60); } /* stats */ .stats { margin-top: clamp(4rem, 9vh, 6.5rem); display: grid; gap: 0.75rem; border-top: 1px solid var(--line); padding-top: clamp(2rem, 5vh, 3rem); max-width: 58rem; } .stats-line { margin: 0; } /* qualificado por .manifesto: senao a regra generica .manifesto p, de especificidade maior, define o tamanho e a cor das duas linhas. */ .manifesto .stats-line--lead { font-size: clamp(1.12rem, 1.85vw, 1.6rem); line-height: 1.35; letter-spacing: -0.04em; color: var(--ink); } .manifesto .stats-line--support { max-width: 42rem; font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.7; color: var(--ink-60); } @media (max-width: 640px) { .stats { gap: 0.9rem; } .manifesto .stats-line--lead { letter-spacing: -0.025em; } } /* ---------- roda das empresas (pinada, scroll gira) ---------- */ /* A secao pinta o proprio fundo com as duas pontas esmaecidas. E o que troca a cor ao longo de uma faixa de rolagem, em vez de numa linha: o roxo do topo vai virando o roxo da roda enquanto voce desce, e volta a ceder no fim. Sem isso a mudanca acontecia de uma vez so, e a tela inteira piscava de cor. */ .emp-section { position: relative; --fusao: clamp(140px, 24vh, 320px); background: linear-gradient( 180deg, rgba(33, 24, 56, 0) 0, rgb(33, 24, 56) var(--fusao), rgb(33, 24, 56) calc(100% - var(--fusao)), rgba(33, 24, 56, 0) 100% ); } .emp-pin { min-height: 100svh; position: relative; overflow: hidden; } .emp-head { position: absolute; /* a .nav fixa mede 81-85px em qualquer largura (medido); o piso de 6.5rem garante que o rotulo nunca nasce atras dela, mesmo em telas baixas onde 5vh sozinho ficava tao raso quanto 41px. */ top: max(clamp(1.6rem, 5vh, 3.4rem), 6.5rem); left: 0; right: 0; z-index: 3; } /* ---------- capas das empresas ---------- Fundo de ambiente que troca quando a roda para numa empresa. Regras que valem para todas as capas: · ficam atras de tudo (z-index 0) e nunca recebem clique; · entram e saem em fundido, com um leve zoom, para a troca nao piscar; · vem com um veu por cima. O veu e o que garante a leitura do nome da empresa e do painel, independentemente da foto. */ .emp-capas { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; /* A imagem tambem esmaece nas pontas, na mesma faixa em que a cor da secao troca. Sem isso a borda de cima da foto desenhava uma linha reta atravessando a tela na emenda. */ -webkit-mask-image: linear-gradient( 180deg, transparent 0, #000 var(--fusao), #000 calc(100% - var(--fusao)), transparent 100% ); mask-image: linear-gradient( 180deg, transparent 0, #000 var(--fusao), #000 calc(100% - var(--fusao)), transparent 100% ); } .emp-capa { position: absolute; inset: 0; opacity: 0; scale: 1.06; transition: opacity 1.1s ease, scale 2.4s ease-out; } .emp-capa.is-on { opacity: 1; scale: 1; } .emp-capa img { width: 100%; height: 100%; object-fit: cover; /* puxa o enquadramento para a parte mobiliada da cena */ object-position: 64% 58%; /* Cada capa chega com uma exposicao diferente — a mais escura tem quase metade da luz da mais clara. O --luz da propria no HTML acerta cada uma para todas pousarem no mesmo peso; quem nao declara nada fica como veio. Mesmo na capa mais corrigida o texto por cima se mantem acima de 4,5:1. */ filter: brightness(var(--luz, 1)) contrast(1.04); } /* veu: escuro a esquerda, onde gira o nome da empresa, e mais fechado ainda a direita, sob o painel de texto */ .emp-capas::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(33, 24, 56, 0.72) 0%, rgba(33, 24, 56, 0.18) 40%, rgba(33, 24, 56, 0.46) 100% ), radial-gradient( 62% 84% at 78% 50%, rgba(33, 24, 56, 0.4), transparent 76% ); } .wheel-stage { position: relative; z-index: 1; --R: min(46vw, 580px); position: relative; height: 100svh; display: flex; align-items: center; } .wheel-ring { position: absolute; left: calc(var(--R) * -0.42); top: 50%; width: calc(var(--R) * 2); height: calc(var(--R) * 2); transform: translate(-50%, -50%); border: 1px dashed rgba(245, 241, 250, 0.13); border-radius: 50%; pointer-events: none; } .wheel-ring::after { /* miolo da roda: o "·" da Wish */ content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--grad-warm); animation: dotpulse2 2.8s ease-in-out infinite; } @keyframes dotpulse2 { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 47, 158, 0.4); } 50% { box-shadow: 0 0 22px 6px rgba(218, 165, 32, 0.3); } } .wheel { position: absolute; left: calc(var(--R) * -0.42); top: 50%; width: 0; height: 0; z-index: 2; } .spoke { --acc: #e52f9e; display: flex; align-items: center; color: var(--acc); /* era 0.22 — as quatro frentes fora de foco ficavam ilegiveis, entao quem sai no meio da rolagem nunca chega a ver o grupo. */ opacity: 0.42; /* a apagada tambem faz parte da troca: transicao mais longa que a do painel, para os nomes cederem em vez de piscarem */ transition: opacity 0.7s ease; white-space: nowrap; } .spoke.is-active { opacity: 1; } /* fecho: ao chegar na ultima frente, as cinco acendem juntas por um instante antes de a fixacao soltar — o unico momento em que a roda prova "somos uma rede" em vez de so dizer. Sobe so a opacidade; o brilho/gradiente de .is-active continua exclusivo da frente em que se parou. */ .wheel.gran-final .spoke { opacity: 1; } .spoke:hover { opacity: 0.75; } .spoke.is-active:hover { opacity: 1; } .spoke .arm { display: inline-flex; align-items: baseline; } /* will-change promove cada elemento a uma camada propria de composicao. Isso ajuda enquanto a roda gira e so ocupa memoria depois — sao dez elementos. A promocao vale enquanto a secao esta por perto da tela, e o JS liga e desliga a classe. */ .wheel.em-movimento .spoke, .wheel.em-movimento .spoke .arm { will-change: transform; } .spoke-name { font-size: clamp(1.7rem, 4.4vw, 3.2rem); } .spoke .wm-script { background: var(--ink); font-size: 0.92em; } .spoke .wm-dot { background: var(--acc-grad, var(--grad-warm)); animation: none; } .spoke .wm-word { font-family: var(--spoke-font, var(--font-display)); font-size: 0.62em; letter-spacing: 0.2em; font-weight: 600; color: var(--acc); } .spoke.is-active .wm-word { background: var(--acc-grad, var(--grad-warm)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* neon suave: um halo curto na cor da propria frente, so na ativa. Navegador sem color-mix simplesmente ignora o filtro. */ .spoke.is-active .wm-word, .spoke.is-active .spoke-mono { filter: drop-shadow( 0 0 0.5rem color-mix(in srgb, var(--acc) 42%, transparent) ); } .spoke-mono { font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: clamp(1.1rem, 2.9vw, 2.1rem); letter-spacing: 0.14em; color: var(--acc); text-transform: uppercase; } .spoke-mono .cursor { animation: blink 1.1s steps(1) infinite; } .spoke-mono .spoke-sub { display: block; /* piso proprio em vez de em: o pai (.spoke-mono) trava em 1.1rem no mobile, e 0.44em disso caia a 7.7px — ilegivel. */ font-size: clamp(0.72rem, 1.7vw, 0.95rem); letter-spacing: 0.24em; font-weight: 500; margin-top: 0.35em; } @keyframes blink { 50% { opacity: 0; } } /* painel da empresa ativa */ .emp-info { position: absolute; left: min(56%, 820px); top: 50%; transform: translateY(-50%); width: min(34vw, 420px); z-index: 3; text-align: left; } /* o nicho no lugar do número: a cor vem do --acc da empresa ativa, então a faixa de texto muda junto com a roda. */ .emp-info-tag { filter: drop-shadow( 0 0 0.4rem color-mix(in srgb, var(--acc) 30%, transparent) ); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acc, var(--ink)); text-wrap: balance; min-height: 2.4em; } .emp-info-desc { margin-top: 0.9rem; font-size: 0.95rem; font-weight: 300; color: var(--ink-60); line-height: 1.7; min-height: 4.5em; } .emp-info-cta { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1.4rem; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 0.85rem 1.6rem; transition: border-color 0.35s, color 0.35s, box-shadow 0.35s; } .emp-info-cta:hover { border-color: currentColor; } .emp-info-cta[data-locked] { pointer-events: none; color: var(--ink-60); } .emp-hint { position: absolute; left: var(--gutter); bottom: clamp(1.4rem, 4vh, 2.6rem); z-index: 3; display: flex; align-items: center; gap: 0.9rem; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-60); } .emp-hint b { font-weight: 600; color: var(--ink-60); letter-spacing: 0.18em; } /* ============================================================ CLÍMAX DA TROCA DE EMPRESA ------------------------------------------------------------ Uma luz só, atravessando o palco da esquerda para a direita. Ela faz tres coisas, e por isso as tres leem como um evento e nao como tres efeitos: corta a capa nova para dentro, acende o nome ao cruzar o braço da roda e troca o texto do painel ao cruzar o painel. A fagulha e a parte dessa mesma luz que corre por dentro do braço — sem ela o nome acenderia sozinho, sem vir de lugar nenhum. A varredura e linear de proposito: luz nao desacelera. O tempo de cada acontecimento sai da posicao do elemento na tela, e quem calcula isso e o JS, que tambem escreve --varredura aqui. ============================================================ */ /* a capa nova entra por corte, nao por fundido: fica opaca desde o primeiro quadro e e a mascara que a revela */ .emp-capa.entrando { opacity: 1; z-index: 1; transition: scale 2.4s ease-out; animation: emp-corte var(--varredura, 0.95s) linear both; } @keyframes emp-corte { from { clip-path: polygon(-30% 0, -30% 0, -62% 100%, -62% 100%); } to { clip-path: polygon(-30% 0, 140% 0, 140% 100%, -62% 100%); } } /* a lamina: fina, inclinada e curta de brilho. O peso dela esta no movimento, nao na quantidade de luz. */ .emp-lamina { position: absolute; top: -10%; left: 0; width: 2px; height: 120%; z-index: 4; pointer-events: none; transform: skewX(-13deg); background: linear-gradient( 180deg, transparent, rgba(255, 255, 255, 0.9) 20%, var(--acc, #e52f9e) 50%, rgba(255, 255, 255, 0.9) 80%, transparent ); box-shadow: 0 0 1.4rem 0.14rem var(--acc, #e52f9e); /* some nas pontas junto com a capa: sem isso a lamina desenha uma risca dura atravessando a emenda da secao */ -webkit-mask-image: linear-gradient( 180deg, transparent 0, #000 var(--fusao), #000 calc(100% - var(--fusao)), transparent 100% ); mask-image: linear-gradient( 180deg, transparent 0, #000 var(--fusao), #000 calc(100% - var(--fusao)), transparent 100% ); animation: emp-varre var(--varredura, 0.95s) linear both; } @keyframes emp-varre { from { left: -8%; opacity: 0; } 10% { opacity: 0.85; } 86% { opacity: 0.85; } to { left: 112%; opacity: 0; } } /* a fagulha corre por dentro do braço e chega ao nome no mesmo instante em que a lamina cruza por ele */ .emp-fagulha { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; transform-origin: 6px 6px; pointer-events: none; background: radial-gradient( circle, #fff 0%, var(--acc, #e52f9e) 44%, transparent 72% ); } /* Ordem importa: o braço fica meia altura abaixo do eixo ANTES de girar — e em torno desse ponto que ele roda. Girar primeiro e descer depois jogaria a fagulha para fora do braço em todo angulo diferente de zero. */ @keyframes emp-corre { from { transform: translateY(var(--dy)) rotate(var(--ang)) translateX(0) scale(0.45); opacity: 0; } 18% { opacity: 1; } to { transform: translateY(var(--dy)) rotate(var(--ang)) translateX(var(--alvo)) scale(1.35); opacity: 0; } } /* o nome acende quando a luz chega nele e assenta logo em seguida: e um acender, nao um halo permanente */ .spoke.acende .arm { animation: emp-acende 0.62s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes emp-acende { 0% { filter: drop-shadow(0 0 0 transparent); } 16% { filter: drop-shadow(0 0 1rem var(--acc)) drop-shadow(0 0 0.3rem rgba(255, 255, 255, 0.8)); } 100% { filter: drop-shadow(0 0 0.4rem transparent); } } /* o painel e revelado pela mesma luz. Em CSS, e nao no GSAP, de proposito: uma animacao CSS sempre termina no estado de repouso, que aqui e o texto inteiro. Se a troca for interrompida no meio por uma rolagem rapida, o pior caso e o texto aparecer de uma vez — nunca ficar recortado e invisivel. */ .emp-info.revela .emp-info-tag, .emp-info.revela .emp-info-desc, .emp-info.revela .emp-info-cta { animation: emp-revela 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .emp-info.revela .emp-info-desc { animation-delay: 0.06s; } .emp-info.revela .emp-info-cta { animation-delay: 0.12s; } @keyframes emp-revela { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* Sem o climax — celular ou movimento reduzido — o painel so se refaz. Tambem em CSS, pela mesma razao: o estado de repouso e o texto inteiro, aconteca o que acontecer no meio do caminho. */ .emp-info.troca .emp-info-tag, .emp-info.troca .emp-info-desc, .emp-info.troca .emp-info-cta { animation: emp-entra 0.44s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .emp-info.troca .emp-info-desc { animation-delay: 0.05s; } .emp-info.troca .emp-info-cta { animation-delay: 0.1s; } @keyframes emp-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .emp-capa.entrando, .spoke.acende .arm, .emp-info.revela .emp-info-tag, .emp-info.revela .emp-info-desc, .emp-info.revela .emp-info-cta, .emp-info.troca .emp-info-tag, .emp-info.troca .emp-info-desc, .emp-info.troca .emp-info-cta { animation: none; } } /* ---------- roda no celular ---------- Na tela estreita a roda e o texto nao cabem lado a lado. Em vez de sobrepor um ao outro, a tela e dividida em dois andares: a roda gira em cima, o texto fica embaixo, e entre os dois ha um esmaecimento — os nomes somem no escuro em vez de passarem por tras de uma caixa. */ @media (max-width: 880px) { .wheel-stage { --R: min(88vw, 430px); /* roda encostada no alto: libera o rodape para o texto */ align-items: flex-start; padding-top: clamp(5.5rem, 16svh, 8rem); } .wheel, .wheel-ring { left: calc(var(--R) * -0.62); } .spoke-name { font-size: clamp(1.2rem, 5vw, 1.75rem); } .emp-info { left: var(--gutter); right: var(--gutter); top: auto; bottom: clamp(4.2rem, 11svh, 6rem); transform: none; width: auto; } /* Esmaecimento, nao caixa: um degrade que desce do transparente ate o fundo da secao. Ele extrapola a largura da tela de proposito, para nao existir borda visivel em canto nenhum. */ .emp-info::before { content: ""; position: absolute; inset: -7rem -50vw -100vh -50vw; z-index: -1; background: linear-gradient( 180deg, rgba(23, 18, 32, 0) 0%, rgba(23, 18, 32, 0.62) 26%, rgba(23, 18, 32, 0.92) 52%, rgb(23, 18, 32) 100% ); } .emp-info-tag { font-size: clamp(1.3rem, 6.4vw, 1.9rem); letter-spacing: 0.04em; /* reserva menos altura: no celular o nicho cabe em duas linhas */ min-height: 2.4em; } .emp-info-desc { margin-top: 0.7rem; font-size: 0.92rem; line-height: 1.6; min-height: 4.8em; max-width: 34ch; } .emp-info-cta { white-space: nowrap; margin-top: 1.1rem; font-size: 0.7rem; letter-spacing: 0.1em; padding: 0.8rem 1.35rem; } } /* fallback estático (sem JS / reduced-motion): empilha as empresas */ html:not(.js) .wheel { position: static; display: flex; flex-direction: column; gap: 1.6rem; padding-block: 6rem; } html:not(.js) .spoke { opacity: 1; } html:not(.js) .wheel-ring, html:not(.js) .emp-info, html:not(.js) .emp-hint { display: none; } html:not(.js) .emp-pin, html:not(.js) .wheel-stage { height: auto; min-height: 0; } /* ---------- rede: os blocos se aproximam no scroll ---------- O estado final e o padrao do CSS: sem JS, sem GSAP ou com movimento reduzido, a rede ja aparece formada e legivel. */ .rede { position: relative; } .rede-pin { min-height: 100svh; display: flex; align-items: center; overflow: hidden; } .rede-grid { display: grid; grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); width: 100%; } .rede-claim { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.22; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; } .rede-claim em { font-style: normal; color: var(--magenta); } .rede-canvas { position: relative; height: min(74svh, 40rem); } .rede-fio { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .rede-lista { list-style: none; position: absolute; inset: 0; } /* Cada bloco e posicionado pelas bordas, nao pelo centro: o GSAP anima transform, entao qualquer deslocamento proprio ali seria sobrescrito. Assim as fileiras tambem alinham entre si. */ .rede-no { position: absolute; left: var(--l); top: var(--t, auto); bottom: var(--b, auto); width: min(12rem, 20vw); text-align: center; } .rede-no h3 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); } /* cada bloco leva o degrade de uma frente do grupo. O recorte no texto so entra onde o navegador suporta: senao o titulo fica solido e legivel do mesmo jeito. */ @supports (background-clip: text) or (-webkit-background-clip: text) { .rede-no h3 { background-image: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } } .rede-no h3 { filter: drop-shadow( 0 0 0.45rem color-mix(in srgb, var(--tom) 38%, transparent) ); } .rede-no p { margin-top: 0.5rem; font-size: 0.83rem; font-weight: 300; line-height: 1.6; color: var(--ink-60); } @media (max-width: 880px) { .emp-capa img { object-position: center center; } .emp-capas::after { background: linear-gradient( 180deg, rgba(33, 24, 56, 0.72) 0%, rgba(33, 24, 56, 0.32) 45%, rgba(33, 24, 56, 0.8) 100% ); } } @media (prefers-reduced-motion: reduce) { .emp-capa { transition: opacity 0.4s linear; scale: 1; } } @media (max-width: 880px) { /* no celular a rede vira percurso: um fio desce ligando os blocos */ .rede-pin { min-height: 0; padding-block: clamp(4.5rem, 12vh, 7rem); } .rede-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.2rem, 7vh, 3.5rem); } .rede-canvas { height: auto; } .rede-fio { display: none; } .rede-lista { position: static; display: grid; gap: clamp(1.8rem, 5vh, 2.6rem); padding-left: 1.75rem; border-left: 1px solid var(--line); } .rede-no { position: static; width: auto; text-align: left; } .rede-no h3 { position: relative; } .rede-no h3::before { content: ""; position: absolute; left: -2.02rem; top: 0.52em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--grad); } } /* ---------- ATUACAO: mapa do Brasil ---------- O mapa e uma superficie inclinada: os 27 estados acendem em sequencia, comecando devagar na Paraiba e fechando em rajada. O desenho e decorativo (aria-hidden); quem le por leitor de tela recebe os numeros ao lado e a legenda com os estados. */ .atuacao { overflow: hidden; /* a inclinacao joga cantos para fora */ } .atu-grid { display: grid; grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; } .atu-numeros { display: grid; gap: clamp(1.3rem, 3.6vh, 2.2rem); margin-top: clamp(1.2rem, 3vh, 1.8rem); list-style: none; padding: 0; } .atu-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: 1; letter-spacing: -0.02em; /* tabular-nums trava a largura dos digitos: sem isso o numero treme enquanto o contador sobe */ font-variant-numeric: tabular-nums; background-image: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 1.2rem rgba(229, 47, 158, 0.28)); } .atu-rotulo { display: block; margin-top: 0.35rem; font-size: clamp(0.9rem, 1.1vw, 1rem); font-weight: 300; letter-spacing: 0.01em; color: var(--ink-60); } /* nota de fecho: separada dos numeros por um fio, em corpo de leitura. A segunda frase ganha tinta cheia por ser a tese. */ .atu-nota { max-width: 36ch; margin-top: clamp(1.8rem, 4.5vh, 2.6rem); padding-top: clamp(1.2rem, 3vh, 1.6rem); border-top: 1px solid var(--line); font-size: clamp(0.98rem, 1.2vw, 1.1rem); font-weight: 300; line-height: 1.7; color: var(--ink-60); text-wrap: pretty; } .atu-nota strong { font-weight: 500; color: var(--ink); } .atu-mapa { position: relative; margin: 0; } /* brilho difuso atras do mapa, para ele nao flutuar no vazio */ .atu-mapa::before { content: ""; position: absolute; inset: -18%; background: radial-gradient( 55% 50% at 50% 50%, rgba(229, 47, 158, 0.16), transparent 70% ); filter: blur(18px); pointer-events: none; } .atu-tela { position: relative; display: block; width: 100%; height: auto; /* A inclinacao fica no elemento, e nao no desenho: o canvas continua desenhando em coordenadas retas, e o navegador gira a camada pronta. Fica no e nao na figure porque o GSAP anima a figure e zeraria esta rotacao. */ rotate: -7deg; } .atu-mapa figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 880px) { .atu-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.4rem, 8vh, 3.6rem); } .atu-mapa { width: 90%; margin-inline: auto; } .atu-tela { /* menos inclinacao: na tela estreita o giro come as bordas */ rotate: -4deg; } } /* ---------- CTA ---------- */ .cta { text-align: center; } .cta .cta-lead { margin-inline: auto; } .cta .cta-row { justify-content: center; } .cta-big { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; } .cta-big .q { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; } /* .hero-sub ja da o tamanho/cor/largura da linha de apoio; falta so o espaco em relacao ao titulo acima dela. */ .cta-lead { margin-top: clamp(1.1rem, 3vh, 1.6rem); } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin-top: clamp(2rem, 5vh, 3rem); } .btn { display: inline-flex; align-items: center; gap: 0.8rem; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; padding: 1.05rem 2rem; border-radius: 999px; position: relative; overflow: hidden; isolation: isolate; border: 1px solid transparent; color: #fff; } .btn--primary { background: var(--grad-warm); } .btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-wish); opacity: 0; transition: opacity 0.5s; } .btn--primary:hover::after { opacity: 1; } .btn--ghost { border-color: var(--line); color: var(--ink-60); } .btn--ghost:hover { border-color: var(--ink); color: var(--ink); } .cta-note { margin-top: 1.4rem; font-size: 0.95rem; color: var(--ink-60); letter-spacing: 0.04em; } /* ---------- footer ---------- */ footer { border-top: 1px solid var(--line); padding: clamp(3rem, 8vh, 5rem) 0 2rem; position: relative; z-index: 1; } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; } .foot-brand .wm { font-size: 2.1rem; } .foot-brand .wm-word { font-size: 0.425em; } .foot-brand p { margin-top: 1.1rem; max-width: 28ch; font-size: 0.85rem; font-weight: 300; color: var(--ink-60); } .foot-col h4 { font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-60); font-weight: 600; margin-bottom: 1.1rem; } .foot-col ul { list-style: none; display: grid; gap: 0.55rem; } .foot-col a { display: inline-flex; align-items: center; /* alvo de toque: o texto sozinho fica bem abaixo de 44px */ padding-block: 0.5rem; font-size: 0.88rem; color: var(--ink-60); transition: color 0.3s; } .foot-col a:hover { color: var(--ink); } .foot-bottom { margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--ink-60); } @media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } } /* ---------- estados iniciais p/ animação (aplicados via JS; sem JS a página fica visível) ---------- */ /* crédito Nodus */ .nodus-credit { font-family: "JetBrains Mono", ui-monospace, "IBM Plex Mono", monospace; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.3s; } .nodus-credit i { font-style: normal; color: #7cdf81; } .nodus-credit { color: var(--ink-60); } .nodus-credit:hover { color: var(--ink); } /* textura de grão (quebra o flat digital; camada fixa, sem custo de scroll) */ .grain { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); background-size: 160px; } /* estados de foco e toque (teclado + feedback físico) */ a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .btn:active, .nav-cta:active, .plan-cta:active, .porte-cta:active, .emp-info-cta:active, .svc-btn:active { transform: scale(0.98); } /* rag limpo em títulos */ .hero-h1, .section-title, .cta-big { text-wrap: balance; } .js [data-reveal] { visibility: hidden; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; } .js [data-reveal] { visibility: visible; } } /* atalho de teclado: fora da tela ate receber foco */ .pular { position: fixed; left: 0.75rem; top: -4rem; z-index: 9999; padding: 0.7rem 1.1rem; border-radius: 0.5rem; background: var(--ink); color: var(--bg); font-size: 0.9rem; text-decoration: none; transition: top 0.18s ease; } .pular:focus { top: 0.75rem; } /* ultrawide (>=1600px): sem isto, --maxw/--R/.spoke-name travam no teto pensado para notebook e o resto da tela vira vazio — mais vazio a cada polegada. --R e a grade inteira sobem juntos para a secao da roda continuar preenchendo a largura, coerente com o resto da pagina. */ @media (min-width: 1600px) { :root { --maxw: 1520px; } .wheel-stage { --R: min(42vw, 720px); } .emp-info { left: min(56%, 980px); width: min(34vw, 520px); } .spoke-name { font-size: 4rem; } .spoke-mono { font-size: 2.6rem; } }