/* ========================================================================== efeitos.css — biblioteca de efeitos de rolagem e interação (Comande Agente) Vale para as duas experiências (Essencial e Impacto). Só entra no comande.json (assets.css, depois do base.css) se alguma página usar data-ef; o efeitos.js vai no fim de cada página que usa, antes do site.js. Catálogo, marcação e quando usar: agente/conhecimento/12-efeitos.md Regras de todos os módulos: conteúdo visível sem JS, só transform/opacity/clip-path, versão para celular e toque, "reduzir movimento" desliga deslocamentos. ========================================================================== */ :root { --ef-curva: cubic-bezier(.22, 1, .36, 1); /* uma curva só para todos os efeitos */ --ef-topo: calc(var(--nav-height, 72px) + 16px); /* onde os blocos presos param, abaixo do menu */ } /* ---------- ETAPAS PRESAS COM IMAGEM (data-ef="etapas") ---------- Cada imagem existe uma vez, dentro do seu passo (editável no Comande). No computador o JS monta a coluna presa a partir delas (.ef-on); sem JS, no celular e com movimento reduzido, fica a lista empilhada com a imagem em cada passo. */ .ef-etapas { display: grid; gap: clamp(1.5rem, 6vw, 6rem); align-items: start; } .ef-etapas__fixo { display: none; } .ef-etapas__lista { list-style: none; margin: 0; padding: 0; position: relative; } .ef-etapas__lista::before, .ef-etapas__lista::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--border-subtle); } .ef-etapas__lista::after { background: var(--text-strong); transform-origin: top; transform: scaleY(var(--prog, 0)); } .ef-etapas__passo { padding: 0 0 clamp(2.5rem, 6vw, 5rem) clamp(1.375rem, 3vw, 2.75rem); } .ef-etapas__passo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-md); margin-top: 1.25rem; } .ef-etapas.ef-on { grid-template-columns: 1fr 1fr; } .ef-etapas.ef-on .ef-etapas__fixo { display: block; position: sticky; top: var(--ef-topo); } .ef-etapas.ef-on .ef-etapas__passo { min-height: 62vh; opacity: .3; transition: opacity .5s ease; } .ef-etapas.ef-on .ef-etapas__passo.ativo { opacity: 1; } .ef-etapas.ef-on .ef-etapas__passo img { display: none; } .ef-etapas__imgs { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-soft); } .ef-etapas__imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .6s ease, transform 1.1s var(--ef-curva); } .ef-etapas__imgs img.ativa { opacity: 1; transform: none; } .ef-etapas__cont { display: block; margin-top: .875rem; font-size: var(--fs-label); letter-spacing: .14em; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* ---------- GALERIA QUE ANDA DE LADO (data-ef="lateral") ---------- */ .ef-lateral { position: relative; } .ef-lateral__topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: clamp(1.75rem, 4vw, 3.5rem); } .ef-lateral__cont { font-size: var(--fs-label); letter-spacing: .14em; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .ef-lateral__trilho { display: flex; gap: clamp(.875rem, 2vw, 1.75rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ef-lateral__trilho::-webkit-scrollbar { display: none; } .ef-lateral__item { flex: 0 0 clamp(260px, 34vw, 480px); scroll-snap-align: start; } .ef-lateral__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-md); } .ef-lateral__barra { height: 1px; background: var(--border-subtle); margin-top: clamp(1.75rem, 4vw, 3.5rem); position: relative; } .ef-lateral__barra i { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--text-strong); transform-origin: left; transform: scaleX(0); } /* computador com mouse: a seção prende e o trilho anda conforme a rolagem */ .ef-lateral.ef-on .ef-lateral__fixo { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: var(--nav-height, 72px); } .ef-lateral.ef-on .ef-lateral__trilho { overflow: visible; scroll-snap-type: none; will-change: transform; } .ef-lateral.ef-on .ef-lateral__item { flex: 0 0 auto; width: calc(min(52vh, 540px) * .8); } .ef-lateral.ef-on .ef-lateral__item img { height: min(52vh, 540px); aspect-ratio: auto; } /* ---------- LISTA COM IMAGEM QUE SEGUE O CURSOR (data-ef="lista-imagem") ---------- */ .ef-lista { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border-subtle); } .ef-lista__link { display: grid; grid-template-columns: 4ch 1fr auto; gap: clamp(.75rem, 3vw, 2.5rem); align-items: baseline; padding: clamp(1.125rem, 2.6vw, 2.125rem) 0; border-top: 1px solid var(--border-subtle); color: var(--text-strong); text-decoration: none; transition: opacity .35s ease; } :where(.ef-lista__link:visited) { color: var(--text-strong); } .ef-lista__n, .ef-lista__d { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); } .ef-lista__t { font-family: var(--font-display); font-size: clamp(1.75rem, 1rem + 3.4vw, 4.5rem); line-height: 1; letter-spacing: -.03em; transition: transform .5s var(--ef-curva); } .ef-lista__link img { display: none; } .ef-lista-janela { position: fixed; left: 0; top: 0; width: clamp(220px, 24vw, 380px); aspect-ratio: 4 / 5; pointer-events: none; z-index: 1030; overflow: hidden; border-radius: var(--radius-md); clip-path: inset(50% 0 50% 0); transition: clip-path .5s var(--ef-curva); } .ef-lista-janela.aberta { clip-path: inset(0); } .ef-lista-janela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity .35s ease, transform .9s var(--ef-curva); } .ef-lista-janela img.ativa { opacity: 1; transform: none; } @media (hover: hover) and (pointer: fine) { .ef-lista:hover .ef-lista__link { opacity: .32; } .ef-lista .ef-lista__link:hover, .ef-lista .ef-lista__link:focus-visible { opacity: 1; } .ef-lista__link:hover .ef-lista__t { transform: translateX(clamp(8px, 1.4vw, 22px)); } } @media (hover: none), (max-width: 767.98px) { .ef-lista__link { grid-template-columns: 4ch 1fr; } .ef-lista__d { grid-column: 2; } .ef-lista__link img { display: block; grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-md); margin-top: .375rem; } .ef-lista-janela { display: none; } } /* ---------- CARTÕES QUE EXPANDEM (data-ef="expandem") ---------- */ .ef-expandem { display: flex; gap: clamp(.5rem, 1vw, .875rem); height: min(72vh, 600px); } .ef-expandem__item { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--radius-md); cursor: pointer; transition: flex-grow .8s var(--ef-curva); background: var(--bg-inverse); } .ef-expandem__item.ativo { flex-grow: 3.4; } .ef-expandem__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ef-expandem__item::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, color-mix(in srgb, var(--bg-inverse) 75%, transparent)); } .ef-expandem__txt { position: absolute; left: clamp(1rem, 2vw, 1.75rem); right: clamp(1rem, 2vw, 1.75rem); bottom: clamp(1rem, 2vw, 1.75rem); color: var(--text-on-inverse); z-index: 1; } .ef-expandem__txt h3 { color: inherit; white-space: nowrap; } .ef-expandem__txt p { max-width: 34ch; margin: .5rem 0 0; } .js .ef-expandem__txt p { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .6s var(--ef-curva); } .js .ef-expandem__item.ativo .ef-expandem__txt p { opacity: .92; transform: none; transition-delay: .25s; } @media (max-width: 767.98px) { .ef-expandem { flex-direction: column; height: min(130vh, 760px); } .ef-expandem__txt h3 { white-space: normal; } } /* ---------- IMAGEM QUE MUDA PELA LISTA (data-ef="abas-imagem") ---------- */ .ef-abas { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: center; } .ef-abas__lista { display: grid; border-bottom: 1px solid var(--border-subtle); } .ef-abas__aba { display: flex; gap: 1.125rem; align-items: baseline; width: 100%; min-height: 44px; padding: clamp(.875rem, 1.8vw, 1.5rem) 0; border: 0; border-top: 1px solid var(--border-subtle); background: none; text-align: left; cursor: pointer; font-family: var(--font-display); font-size: clamp(1.375rem, 1rem + 1.6vw, 2.375rem); letter-spacing: -.025em; color: var(--text-muted); transition: color .3s ease, transform .5s var(--ef-curva); } .ef-abas__aba span { font-size: var(--fs-label); letter-spacing: .14em; font-family: var(--font-body); } .ef-abas__aba.ativa { color: var(--text-strong); transform: translateX(clamp(8px, 1.2vw, 18px)); } .ef-abas__palco { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-soft); } .ef-abas__palco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.07); transition: opacity .5s ease, transform 1.1s var(--ef-curva); } .ef-abas__palco img.ativa { opacity: 1; transform: none; } @media (max-width: 991.98px) { .ef-abas { grid-template-columns: 1fr; } .ef-abas__palco { order: -1; aspect-ratio: 16 / 11; } } /* ---------- ANTES E DEPOIS (data-ef="antes-depois") ---------- */ .ef-ad { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-md); --p: 50%; touch-action: pan-y; margin: 0; } .ef-ad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ef-ad__antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); } .ef-ad input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; } .ef-ad__linha { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: var(--text-on-inverse); pointer-events: none; } .ef-ad__linha::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: var(--text-on-inverse); box-shadow: var(--shadow-md, 0 2px 14px color-mix(in srgb, var(--bg-inverse) 25%, transparent)); } .ef-ad__rot { position: absolute; bottom: 1rem; font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--text-on-inverse); pointer-events: none; } .ef-ad__rot--a { left: 1rem; } .ef-ad__rot--d { right: 1rem; } .ef-ad input:focus-visible ~ .ef-ad__linha::after { outline: 3px solid var(--focus-ring); outline-offset: 3px; } /* ---------- CARTÕES QUE EMPILHAM NA ROLAGEM (data-ef="empilha") ---------- */ .ef-empilha { display: grid; gap: clamp(1rem, 2vw, 1.75rem); } .ef-empilha__item { position: sticky; top: calc(var(--ef-topo) + var(--i, 0) * 14px); display: grid; grid-template-columns: 5ch 1fr 1.1fr; gap: clamp(1rem, 3vw, 3rem); align-items: start; background: var(--bg-page); border-top: 1px solid var(--text-strong); padding: clamp(1.125rem, 2.4vw, 2rem) 0 clamp(1.5rem, 3vw, 2.5rem); min-height: min(62vh, 520px); transform-origin: 50% 0; will-change: transform; } .section--soft .ef-empilha__item { background: var(--bg-soft); } .ef-empilha__n { font-size: var(--fs-label); letter-spacing: .14em; color: var(--text-muted); padding-top: .5em; } .ef-empilha__item img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: var(--radius-md); } @media (max-width: 767.98px) { .ef-empilha__item { grid-template-columns: 1fr; min-height: 0; top: calc(var(--ef-topo) + var(--i, 0) * 10px); } .ef-empilha__item img { aspect-ratio: 16 / 10; height: auto; min-height: 0; } } /* ---------- TROCA DE COR DE FUNDO POR SEÇÃO (data-ef-fundo="page|soft|inverse|brand") ---------- As seções marcadas ficam transparentes; o assume o fundo da seção que está no meio da tela. */ body { transition: background-color .7s ease, color .7s ease; } [data-ef-fundo] { background: transparent !important; } body.ef-fundo-page { background-color: var(--bg-page); color: var(--text-body); } body.ef-fundo-soft { background-color: var(--bg-soft); color: var(--text-body); } body.ef-fundo-inverse { background-color: var(--bg-inverse); color: var(--text-on-inverse); } body.ef-fundo-brand { background-color: var(--accent); color: var(--text-on-brand); } body:is(.ef-fundo-inverse, .ef-fundo-brand) [data-ef-fundo] :is(h1, h2, h3, h4, .section-title) { color: inherit; } /* ---------- IMAGEM REVELADA POR CORTINA (data-ef="cortina" | data-ef="cortina-lado") ---------- */ .ef-cortina { overflow: hidden; border-radius: var(--radius-md); margin: 0; } .ef-cortina img { width: 100%; height: 100%; object-fit: cover; } .js .ef-cortina img { clip-path: inset(0 0 100% 0); transform: scale(1.14); transition: clip-path 1.1s var(--ef-curva), transform 1.5s var(--ef-curva); } .js [data-ef="cortina-lado"].ef-cortina img { clip-path: inset(0 100% 0 0); } .js .ef-cortina.ef-on img { clip-path: inset(0); transform: none; } /* ---------- IMAGEM COM PARALLAX E ZOOM (data-ef="parallax") ---------- */ .ef-parallax { position: relative; overflow: hidden; height: clamp(360px, 80vh, 860px); margin: 0; } .ef-parallax img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; will-change: transform; } .ef-parallax figcaption { position: absolute; left: 0; right: 0; bottom: clamp(1.25rem, 4vw, 3rem); color: var(--text-on-inverse); } /* ---------- ABERTURA COM IMAGEM QUE CRESCE (data-ef="zoom") ---------- */ .ef-zoom { position: relative; height: 230vh; } .ef-zoom__fixo { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: grid; place-items: center; --p: 0; } .ef-zoom__img { position: absolute; inset: 0; clip-path: inset(calc((1 - var(--p)) * 24%) calc((1 - var(--p)) * 30%)); } .ef-zoom__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.18 - var(--p) * .18)); } .ef-zoom__titulo { position: relative; z-index: 1; display: flex; justify-content: space-between; width: 100%; margin: 0; opacity: calc(1 - var(--p) * 1.8); } .ef-zoom__depois { position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 5vw, 4rem); z-index: 1; color: var(--text-on-inverse); opacity: calc(var(--p) * 2 - 1); } .ef-zoom__depois p { max-width: 26ch; font-size: var(--fs-lead); } @media (max-width: 767.98px) { .ef-zoom__img { clip-path: inset(calc((1 - var(--p)) * 30%) calc((1 - var(--p)) * 12%)); } .ef-zoom__titulo { flex-direction: column; align-items: flex-start; gap: 38vh; } } /* ---------- MANIFESTO PRESO COM PALAVRA TROCANDO (data-ef="manifesto") ---------- */ .ef-manifesto { position: relative; } .ef-manifesto__fixo { position: sticky; top: 0; min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; } .ef-manifesto__troca { display: inline-grid; vertical-align: top; } .ef-manifesto__troca b { grid-area: 1 / 1; font-weight: inherit; color: var(--accent-text); } .js .ef-manifesto__troca b { opacity: 0; transform: translateY(.35em); transition: opacity .45s ease, transform .6s var(--ef-curva); } .js .ef-manifesto__troca b.ativa { opacity: 1; transform: none; } html:not(.js) .ef-manifesto__troca b + b { display: none; } /* ---------- TEXTO QUE ACENDE NA ROLAGEM (data-ef="revela") ---------- */ .js [data-ef="revela"] .ef-palavra { opacity: .16; transition: opacity .25s linear; } .js [data-ef="revela"] .ef-palavra.acesa { opacity: 1; } /* ---------- TÍTULO QUE ENTRA LINHA POR LINHA (data-ef="linhas") ---------- */ .ef-mascara { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; } .ef-mascara > span { display: inline-block; } .js [data-ef="linhas"] .ef-mascara > span { transform: translateY(108%); transition: transform .8s var(--ef-curva) calc(var(--l, 0) * 80ms); } .js [data-ef="linhas"].ef-on .ef-mascara > span { transform: none; } /* ---------- BARRA DE PROGRESSO DE LEITURA (data-ef="progresso") ---------- */ .ef-progresso { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 1040; pointer-events: none; } .ef-progresso i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); } /* ---------- BOTÕES E MENU ---------- .ef-rolo: texto do botão rola para cima no hover Pedir orçamento data-ef="ima": botão magnético (só com mouse) · data-ef="menu-fio" na