← Biblioteca componentes/conversao/cta-dois-caminhos/ficha.md CódigoTela cheia
conversao/cta-dois-caminhos

CTA em dois caminhos

🟢 estavel complexidade baixa prefixo cam- cta fecho contato whatsapp escolha dois-blocos institucional sem javascript

Incluir · as linhas que se colam num site novo, depois do core (CLAUDE.md §10)

<link rel="stylesheet" href="componentes/conversao/cta-dois-caminhos/estilo.css">

markup.html · 60 linhas · 2,8 KB

<!-- ==========================================================================
     CTA EM DOIS CAMINHOS — duas portas de mesmo tamanho, a pessoa escolhe
     Prefixo: cam-
     Requer: core (tokens, base, motion.css, motion.js) + este estilo.css
     SEM JAVASCRIPT.

     O fecho de página em que o próximo passo não é um botão, são DOIS
     blocos grandes lado a lado, cada um um link inteiro: com hora marcada ou
     agora, por e-mail ou por telefone, para a família ou para a empresa.
     Quem ainda não decidiu COMO quer falar escolhe a porta em vez de ser
     empurrado para uma só.

     PESO IGUAL É LARGURA IGUAL. A regra já estava medida no
     overlay/aviso-cookies: mesmo estilo não basta, a pílula mais curta lê
     como a secundária. Aqui as duas colunas são 1fr e 1fr, sempre. A cor
     pode diferir (.cam-caminho--marca pinta um deles na cor de marca); o
     tamanho, nunca.

     O BLOCO INTEIRO É O LINK. Um <a> por caminho, com rótulo, título e apoio
     dentro — uma área de toque do tamanho do bloco, e um destino só.
     ========================================================================== -->

<section class="sec-dark sec-pad cam">
  <div class="wrap">

    <div class="cam-topo">
      <span class="eyebrow" data-rv>Próximo passo</span>
      <h2 class="sec-title ttl">Como você <em>prefere</em> começar?</h2>
    </div>

    <div class="cam-grade">
      <div class="cam-slot" data-rv>
        <a class="cam-caminho" href="#agendar">
          <span class="cam-rot">Com hora marcada</span>
          <span class="cam-corpo">
            <span class="cam-titulo">Agendar uma conversa</span>
            <span class="cam-apoio">Trinta minutos com um sócio, por vídeo ou no escritório.</span>
          </span>
          <span class="cam-seta" aria-hidden="true">
            <svg width="16" height="16" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10L10 4M5 4h5v5"/></svg>
          </span>
        </a>
      </div>

      <div class="cam-slot" data-rv data-d="1">
        <a class="cam-caminho cam-caminho--marca" href="https://wa.me/5511900000000" rel="noopener" target="_blank">
          <span class="cam-rot">Agora, sem agenda</span>
          <span class="cam-corpo">
            <span class="cam-titulo">(11) 90000-0000</span>
            <span class="cam-apoio">WhatsApp em horário comercial. Respondemos em até duas horas.</span>
          </span>
          <span class="cam-seta" aria-hidden="true">
            <svg width="16" height="16" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10L10 4M5 4h5v5"/></svg>
          </span>
        </a>
      </div>
    </div>

  </div>
</section>

estilo.css · 80 linhas · 3,2 KB

/* ==========================================================================
   CTA EM DOIS CAMINHOS — cam-
   Dois blocos de mesma largura, cada um um link inteiro.
   Tokens usados: --bg --fg --fg-2 --fg-muted --rule --rule-2 --accent
                  --dark --display --radius-media --radius-pill --ease
   ========================================================================== */

.cam-topo{max-inline-size:720px}

/* PESO IGUAL É LARGURA IGUAL: 1fr e 1fr, e nenhuma regra abaixo mexe nisso.
   Ver o cabeçalho do markup e o overlay/aviso-cookies. */
.cam-grade{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(32px,5vh,52px);
}
/* O slot existe por causa do §5: o reveal (data-rv) mora nele, e o link por
   dentro fica livre para ter caixa, véu e foco próprios. */
.cam-slot{display:flex}

.cam-caminho{
  position:relative;flex:1;
  display:grid;align-content:space-between;gap:clamp(40px,6vh,72px);
  min-block-size:clamp(240px,26vw,330px);
  padding:clamp(24px,3vw,40px);
  border:1px solid var(--rule);border-radius:var(--radius-media);
  background:color-mix(in srgb,var(--fg) 4%,var(--bg));
  color:var(--fg);
  isolation:isolate;
}
/* O realce de hover é um VÉU em opacidade, e não troca de background: uma
   transição sobre background que lê token de escopo não acompanha a troca
   do escopo (medido na prova/manchetes-imprensa). Nada se move (CLAUDE.md
   §6): o bloco só acende. */
.cam-caminho::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:currentColor;opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.cam-caminho:hover::before{opacity:.05}
.cam-caminho:hover{border-color:var(--rule-2)}
.cam-caminho:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* O caminho na cor de marca: fundo --accent e tinta --dark, a mesma dupla do
   .btn-primary do core — que é o par que o tema já garante legível. */
.cam-caminho--marca{
  background:var(--accent);border-color:var(--accent);color:var(--dark);
}
.cam-caminho--marca:hover{border-color:var(--accent)}
.cam-caminho--marca .cam-rot,
.cam-caminho--marca .cam-apoio{color:color-mix(in srgb,var(--dark) 72%,transparent)}

.cam-rot{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);
  padding-inline-end:56px;             /* não passa por baixo da seta */
}
.cam-corpo{display:grid;gap:12px}
.cam-titulo{
  font-family:var(--display);font-weight:700;
  font-size:clamp(26px,3.1vw,44px);line-height:1.06;letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.cam-apoio{font-size:15px;line-height:1.55;color:var(--fg-2);max-inline-size:42ch}

.cam-seta{
  position:absolute;inset-block-start:clamp(20px,2.6vw,32px);inset-inline-end:clamp(20px,2.6vw,32px);
  inline-size:40px;block-size:40px;display:grid;place-items:center;
  border:1px solid currentColor;border-radius:var(--radius-pill);
  opacity:.7;transition:opacity .3s var(--ease);
}
.cam-caminho:hover .cam-seta{opacity:1}

@media(prefers-reduced-motion:reduce){
  .cam-caminho::before,.cam-seta{transition:none}
}

@media(max-width:760px){
  .cam-grade{grid-template-columns:1fr}
  .cam-caminho{min-block-size:0}
}

O fecho em que o próximo passo não é um botão: são duas portas de mesma largura, lado a lado, cada uma um link inteiro. Rótulo pequeno com a condição ("Com hora marcada", "Agora, sem agenda"), o caminho em corpo de display — a ação ou o próprio dado, como o número do WhatsApp —, uma linha dizendo o que acontece do outro lado, e a seta no canto. Um dos dois pode vestir a cor de marca.

O problema que ela resolve: no fim da página, quem chegou até ali já quer falar — mas nem todo mundo quer falar do mesmo jeito. Um botão único de "Agendar" perde quem só queria mandar uma mensagem agora; um WhatsApp único perde quem precisa de hora marcada com um sócio. Duas portas grandes deixam a pessoa escolher sem ler nada.

Quando usar

Quando não usar

Padrão editorial

Slot Regra
Título 3 a 8 palavras, a pergunta da escolha. Opcional
Rótulo 2 a 4 palavras por caminho: a condição
Caminho 8 a 28 caracteres: a ação ou o próprio dado (número, e-mail)
Apoio 6 a 16 palavras: o que acontece do outro lado e em quanto tempo

O que mantém a peça: os dois caminhos respondem à mesma pergunta. "Agendar conversa" e "Falar agora" são duas respostas para "como começar?"; "Agendar conversa" e "Ler nosso blog" são dois assuntos, e a pessoa não sabe o que está escolhendo.

Especificação dos assets

Nenhum.

Como usar

<link rel="stylesheet" href="componentes/conversao/cta-dois-caminhos/estilo.css">

Ganchos

Gancho Papel
.cam-caminho--marca pinta um dos caminhos na cor de marca (--accent de fundo, --dark de tinta)
.cam-slot onde mora o data-rv, fora do link

Variações

Gotchas

Movimento reduzido / toque

Nada anda além do reveal do core; o véu de hover perde a transição. No toque, o bloco inteiro é o alvo.

Histórico

Origem Quando O quê
referência: wearedirect.co e outros da cta.gallery 2026-09-29 Clone de referência, reescrito do zero

Referências visuais: wearedirect.co (e-mail | mais trabalhos), greenboard.com (demo | telefone), transform9.com (ligação | demo), lockerland.com.au (por perfil). Nenhuma linha copiada. Registro consolidado em projetos/referencias-externas.md.