/* Hub de modulos compartilhado pela home e pelo Plano Empresarial. As proporcoes correspondem ao viewBox 1040 x 420 dos feixes. .hubconn-frame adapta o desenho a largura disponivel, inclusive com sidebar. */ .hubconn-frame { container: hubconn / inline-size; } .hubconn-stage { --hubconn-border: rgba(36, 179, 136, 0.15); --hubconn-border-active: rgba(36, 179, 136, 0.3); --hubconn-text: rgba(255, 255, 255, 0.9); --hubconn-title: #ffffff; --hubconn-muted: rgba(255, 255, 255, 0.65); } [data-theme="light"] .hubconn-stage:not([data-theme="dark"]) { --hubconn-border: rgba(36, 179, 136, 0.2); --hubconn-border-active: rgba(36, 179, 136, 0.35); --hubconn-text: #1a4d4d; --hubconn-title: #0a3d3d; --hubconn-muted: #527575; } .hubconn-stage { position: relative; max-width: 1040px; height: 420px; margin: 0 auto; } .hubconn-beams { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .hubconn-beams .hub-beam { fill: none; vector-effect: none; stroke-width: 1.6; stroke-dasharray: 3 7; opacity: 0.55; } .hubconn-col { position: absolute; top: 0; bottom: 0; width: 210px; display: flex; flex-direction: column; justify-content: space-between; padding: 8px 0; z-index: 2; } .hubconn-col.esq { left: 0; } .hubconn-col.dir { right: 0; } .hubconn-chip { position: relative; height: 96px; overflow: hidden; background: linear-gradient(160deg, rgba(10, 47, 47, 0.85), rgba(4, 34, 34, 0.9)); border: 1px solid var(--hubconn-border); border-radius: 18px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s, box-shadow 0.35s, scale 0.28s cubic-bezier(0.16, 1, 0.3, 1); } /* O cartao nao e clicavel (as faces deixaram de ser ), entao nada de press nem de elevacao tipo botao: so uma ampliacao discreta para destacar o cartao que esta sendo lido junto com o tooltip. Enquanto estiver sob o ponteiro ou com o foco dentro, aquele cartao nao gira (initHubRotation no index.js). O :focus-within cobre o toque e o teclado, que e como o balao abre onde nao existe hover. */ .hubconn-chip:hover, .hubconn-chip:focus-within { scale: 1.04; border-color: var(--hubconn-border-active); } /* Sem anel no toque/clique, so na navegacao por teclado (mesmo criterio dos publicos do hero). O raio acompanha o do cartao, senao o anel sai quadrado dentro do canto arredondado. */ .hubconn-face:focus { outline: none; } .hubconn-face:focus-visible { outline: 2px solid var(--verde-criativo); outline-offset: -3px; border-radius: 18px; } /* O .has-tooltip do componente canonico (footer.css) carrega DEPOIS do index.css e traz position: relative + display: inline-flex. A face precisa continuar absoluta cobrindo o cartao, senao o conteudo desaba para o canto e as faces empilham. Dois seletores porque o :hover do global empata em especificidade com uma unica classe e venceria por ordem de arquivo. */ .hubconn-face.has-tooltip, .hubconn-face.has-tooltip:hover { position: absolute; display: flex; } /* Aparencia do tooltip do hero (.feature-tooltip) sobre o balao canonico: mesmo verde escuro, borda verde translucida, sombra funda e texto medium. Fica no proprio balao (nao num ancestral) porque o estilo-base.js o move para o no hover. Cor fixa nos dois temas, igual ao hero e ao .feature-tooltip dos planos. So a pintura muda: posicao, flip e animacao continuam com o componente. */ .modern-tooltip.hubconn-tip { min-width: 200px; background: rgba(4, 34, 34, 0.98); --tip-border-color: rgba(36, 179, 136, 0.2); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); color: rgba(255, 255, 255, 0.95); } .modern-tooltip.hubconn-tip .tooltip-header { padding: 12px 16px; font-weight: var(--font-weight-medium); line-height: 1.5; } /* Seta do hero: 13px e canto arredondado so na quina externa. O portal inverte as bordas quando o balao abre para baixo; aqui acompanhamos o arredondamento e o encaixe de 5% que esconde a emenda com o corpo. */ .modern-tooltip.hubconn-tip .tooltip-arrow { width: 13px; height: 13px; background: rgba(4, 34, 34, 0.98); border-radius: 0 0 4px 0; transform: translate(-50%, -55%) rotate(45deg); } .modern-tooltip.hubconn-tip.is-portal-down .tooltip-arrow { border-radius: 4px 0 0 0; transform: translate(-50%, -45%) rotate(45deg); } /* Faces rotativas do slot: a que sai encolhe desfocando ate sumir; a que entra chega grande e desfocada, assenta com um leve overshoot e o icone e o texto pousam em cascata (initHubRotation no index.js) */ .hubconn-face { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 16px; opacity: 0; pointer-events: none; z-index: 0; } .hubconn-face.is-active { opacity: 1; pointer-events: auto; z-index: 2; animation: hubface-in 0.95s cubic-bezier(0.22, 1, 0.36, 1) both; } .hubconn-face.is-leaving { z-index: 1; animation: hubface-out 0.7s cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes hubface-in { 0% { opacity: 0; transform: scale(1.12); filter: blur(5px); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1); filter: blur(0); } } @keyframes hubface-out { 0% { opacity: 1; transform: scale(1); filter: blur(0); } 100% { opacity: 0; transform: scale(0.93); filter: blur(4px); } } .hubconn-face.is-active .hubconn-chip-ic { animation: hubic-pop 0.85s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes hubic-pop { 0% { opacity: 0; transform: scale(0.86); } 100% { opacity: 1; transform: scale(1); } } .hubconn-face.is-active .hubconn-face-txt { animation: hubtxt-in 0.8s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes hubtxt-in { 0% { opacity: 0; transform: translateX(10px); } 100% { opacity: 1; transform: none; } } /* Flash de borda + varredura de brilho no cartao no instante da troca */ .hubconn-chip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgba(158, 255, 215, 0.12) 50%, transparent 68%); transform: translateX(-135%) skewX(-14deg); pointer-events: none; z-index: 3; } .hubconn-chip.is-swapping { border-color: var(--hubconn-border-active); box-shadow: 0 0 0 1px rgba(36, 179, 136, 0.18), 0 10px 34px -16px rgba(36, 179, 136, 0.35); transition: border-color 0.5s ease, box-shadow 0.5s ease; } /* A varredura tem que cruzar o cartao JUNTO com a troca de conteudo, nao depois. O crossfade termina em 0.7s (hubface-out) e a face nova ja esta opaca em 0.52s, entao a luz precisa passar pelo centro por volta de 0.35s: com esta curva o ponto medio do percurso cai em ~0.34s. O 0.1s de atraso saiu por atrasar a luz em relacao ao conteudo. A duracao tambem cabe agora dentro dos 850ms em que o initHubRotation (index.js) mantem o .is-swapping: antes eram 1.25s de animacao contra 850ms de classe, e a luz era cortada no meio do cartao. Ao mexer aqui, conferir o setTimeout de 850ms no index.js. */ .hubconn-chip.is-swapping::after { animation: hubshine 0.8s cubic-bezier(0.33, 0, 0.2, 1); } @keyframes hubshine { to { transform: translateX(135%) skewX(-14deg); } } /* Nucleo "sente" o pulso chegando: respiro discreto do logo e borda acesa */ .hubconn-core.is-ping { border-color: var(--hubconn-border-active); } .hubconn-core.is-ping img { animation: hubcore-ping 0.85s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes hubcore-ping { 0% { transform: scale(1); } 40% { transform: scale(1.06); filter: drop-shadow(0 0 20px rgba(36, 179, 136, 0.75)); } 100% { transform: scale(1); filter: drop-shadow(0 0 14px rgba(36, 179, 136, 0.55)); } } .hubconn-chip-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--hubconn-border); background: rgba(36, 179, 136, 0.08); color: var(--verde-criativo); } .hubconn-chip-ic svg { flex: none; } /* Mesmo verde criativo dos demais icones de ferramenta da pagina, nos dois temas ([data-theme] replica a especificidade da regra do .tool-icon img) */ [data-theme] .hubconn-chip-ic img { filter: brightness(0) saturate(100%) invert(67%) sepia(36%) saturate(654%) hue-rotate(115deg) brightness(92%) contrast(87%); opacity: 1; } .hubconn-face-txt { min-width: 0; } .hubconn-face-txt b { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--hubconn-text); line-height: 1.25; } .hubconn-face-txt > span { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--hubconn-muted); margin-top: 2px; hyphens: auto; overflow-wrap: break-word; } .hubconn-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 218px; padding: 30px 20px 26px; text-align: center; background: linear-gradient(160deg, rgba(13, 56, 56, 0.95), rgba(4, 34, 34, 0.98)); border: 1px solid var(--hubconn-border-active); border-radius: 24px; box-shadow: 0 0 60px rgba(36, 179, 136, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06); z-index: 3; animation: hubconn-breathe 4.5s ease-in-out infinite; } @keyframes hubconn-breathe { 0%, 100% { box-shadow: 0 0 46px rgba(36, 179, 136, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06); } 50% { box-shadow: 0 0 78px rgba(36, 179, 136, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06); } } .hubconn-core::before, .hubconn-core::after { content: ""; position: absolute; inset: -1px; border-radius: 24px; border: 1px solid rgba(36, 179, 136, 0.55); opacity: 0; pointer-events: none; animation: hubconn-pulse 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite; } .hubconn-core::after { animation-delay: 1.6s; } @keyframes hubconn-pulse { 0% { opacity: 0.75; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.14); } } .hubconn-core img { width: 56px; height: auto; margin: 0 auto 12px; filter: drop-shadow(0 0 14px rgba(36, 179, 136, 0.55)); } .hubconn-core b { display: block; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--hubconn-title); line-height: 1.25; } .hubconn-core span { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: var(--font-size-xs); color: var(--verde-criativo); font-weight: var(--font-weight-semibold); } .hubconn-core span i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde-criativo); box-shadow: 0 0 9px var(--verde-criativo); animation: hubconn-blink 2s infinite; } @keyframes hubconn-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @container hubconn (max-width: 700px) { /* Duas colunas, caindo para uma so em tela muito estreita. O minimo da trilha e o maior entre 140px e 45% do palco: o piso de 140px derruba para uma coluna abaixo de ~340px (em 320px sobrariam 62px para o nome e ate "Precificacao" quebraria no meio), e os 45% impedem que o auto-fit invente uma terceira coluna em tela larga, que viraria cinco colunas de 140px num tablet de 768px. Continua havendo um unico breakpoint. */ .hubconn-stage { height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(max(140px, 45%), 1fr)); gap: 12px; } .hubconn-beams { display: none; } .hubconn-core { position: static; transform: none; width: min(320px, 100%); margin: 0 auto 10px; grid-column: 1 / -1; order: -1; } /* As duas colunas se dissolvem na grade da stage: 6 chips em 2x3 */ .hubconn-col { display: contents; } .hubconn-chip { height: 104px; } /* Icone menor e respiros mais curtos para sobrar largura ao nome. O aperto e calculado no pior caso real: cartao de 144px (celular de 360px, o mais estreito que ainda fica em duas colunas) precisa segurar "Financiamento" (92px) e "Aposentadoria" (91px) sem quebrar. Com estes valores o bloco de texto sai com 94px, contra os 85px de antes. */ .hubconn-face { gap: 6px; padding: 0 8px; } .hubconn-chip-ic { width: 26px; height: 26px; } .hubconn-chip-ic :is(img, svg) { width: 16px; height: 16px; } /* Mesmo com o ganho acima, "Financiamento" (109px) nao cabe em meia tela de celular. Sem isto a palavra vaza e o overflow: hidden do cartao decepa a ultima letra. Com hifenizacao ela quebra com hifen (o declara lang="pt-BR"); o break-word cobre navegador sem dicionario. */ .hubconn-face-txt b { font-size: var(--font-size-sm); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } } /* Visao geral com seis areas fixas: icones acima dos nomes nas telas estreitas. Preserva duas colunas mesmo quando o palco ocupa menos que a tela inteira. */ @container hubconn (max-width: 420px) { .hubconn-stage--overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hubconn-stage--overview .hubconn-chip { height: 160px; } .hubconn-stage--overview .hubconn-face { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--spacing-2); padding: var(--spacing-3); } .hubconn-stage--overview .hubconn-chip-ic { width: 32px; height: 32px; } .hubconn-stage--overview .hubconn-chip-ic svg { width: 22px; height: 22px; } .hubconn-stage--overview .hubconn-face-txt { width: 100%; } } /* ----- Tema claro ----- */ [data-theme="light"] .hubconn-stage:not([data-theme="dark"]) .hubconn-chip { background: linear-gradient(160deg, #ffffff, #f0f7f5); box-shadow: 0 2px 10px rgba(4, 34, 34, 0.06); } [data-theme="light"] .hubconn-stage:not([data-theme="dark"]) .hubconn-core { background: linear-gradient(160deg, #ffffff, #eef6f3); box-shadow: 0 12px 40px rgba(4, 34, 34, 0.12), 0 0 46px rgba(36, 179, 136, 0.18); animation: hubconn-breathe-light 4.5s ease-in-out infinite; } @keyframes hubconn-breathe-light { 0%, 100% { box-shadow: 0 12px 40px rgba(4, 34, 34, 0.12), 0 0 34px rgba(36, 179, 136, 0.14); } 50% { box-shadow: 0 12px 40px rgba(4, 34, 34, 0.12), 0 0 62px rgba(36, 179, 136, 0.3); } } [data-theme="light"] .hubconn-stage:not([data-theme="dark"]) .hubconn-beams .hub-beam { opacity: 0.8; } [data-theme="light"] .hubconn-stage:not([data-theme="dark"]) .hubconn-beams circle[fill="#ffd677"] { fill: var(--color-accent-dark); } [data-theme="light"] .hubconn-stage:not([data-theme="dark"]) .hubconn-beams .hub-pulse { fill: #128a68; } [data-theme="light"] .hubconn-stage:not([data-theme="dark"]) .hubconn-chip::after { background: linear-gradient(115deg, transparent 30%, rgba(36, 179, 136, 0.2) 50%, transparent 70%); } @media (prefers-reduced-motion: reduce) { .hubconn-core, .hubconn-core::before, .hubconn-core::after, .hubconn-core span i { animation: none !important; } .hubconn-beams circle { display: none; } /* O destaque do hover fica so na borda (mesmo criterio do :active dos botoes de toggle mais abaixo neste arquivo). */ .hubconn-chip:hover, .hubconn-chip:focus-within { scale: 1; } .hubconn-face, .hubconn-face.is-active, .hubconn-face.is-leaving, .hubconn-face.is-active .hubconn-chip-ic, .hubconn-face.is-active .hubconn-face-txt, .hubconn-chip.is-swapping::after, .hubconn-core.is-ping img { animation: none !important; } }