/**
* O botão.
*
* Uma folha só, para todos os estilos. O que muda de um estilo para outro
* são as variáveis que o CB_Estilos imprime; as regras abaixo não sabem de
* cor nenhuma, só de onde a cor entra.
*
* O movimento, que é o que separa um botão comum de um botão bem feito, tem
* cinco peças, e cada uma diz uma coisa ao visitante:
*
* elevação o botão sobe 2px e a sombra cresce na cor dele: "isto é
* clicável e está respondendo a você";
* faixa de luz um reflexo atravessa o botão uma vez, na entrada do mouse:
* é o brilho de "preço de fábrica", e só acontece uma vez
* por passagem, para não virar enfeite;
* seta parada é um chevron; com o mouse vira uma seta inteira,
* apontando para onde o clique leva;
* ícone a etiqueta balança como etiqueta de verdade, com mola;
* toque no clique o botão afunda e encolhe 2%: o retorno físico
* que confirma o clique antes da página trocar.
*
* E um sexto, só no botão de preço: quando ele aparece na tela pela primeira
* vez, um anel se abre duas vezes à volta dele e some. Uma vez por visita,
* nunca em laço. Quem pediu ao sistema menos movimento não vê nada disso,
* só a troca de cor.
*
* Três correções sobre o botão do MaxButtons, que está quebrado no ar:
*
* altura mínima em vez de fixa. O MaxButtons fixa 59px e empurra o texto
* com padding-top. Rótulo de duas linhas vaza para fora do botão em tela
* estreita. Aqui o botão cresce;
*
* área de toque. 54px de altura mínima no tamanho médio, acima dos 44px
* recomendados para o dedo, e a linha inteira no celular;
*
* foco visível. O MaxButtons tira o contorno e não devolve nada; quem
* navega por teclado não vê onde está. Aqui tem anel de foco.
*/
.cb-botao {
/* Padrões de segurança: se a linha de variáveis do estilo não chegar, o
botão ainda aparece como botão. */
--cb-cor: #0b5ed7;
--cb-texto: #fff;
--cb-borda-cor: #0b5ed7;
--cb-cor-h: #0a51bd;
--cb-texto-h: #fff;
--cb-borda-cor-h: #0a51bd;
--cb-raio: 30px;
--cb-borda: 0px;
--cb-altura: 54px;
--cb-recuo: 26px;
--cb-corpo: 16px;
--cb-peso: 700;
--cb-caixa: uppercase;
--cb-espaco: .03em;
--cb-sombra: 0 0 #0000;
--cb-sombra-h: 0 0 #0000;
--cb-reflexo: 0 0 #0000;
/* As curvas. "saída" desacelera longo no fim, que é como objeto de
verdade para; "mola" passa um pouco do ponto e volta. */
--cb-saida: cubic-bezier(.16, 1, .3, 1);
--cb-mola: cubic-bezier(.34, 1.56, .64, 1);
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .65em;
box-sizing: border-box;
min-height: var(--cb-altura);
max-width: 100%;
padding: .7em var(--cb-recuo);
border: var(--cb-borda) solid var(--cb-borda-cor);
border-radius: var(--cb-raio);
background-color: var(--cb-cor);
box-shadow: var(--cb-reflexo), var(--cb-sombra);
color: var(--cb-texto);
font-size: var(--cb-corpo);
font-weight: var(--cb-peso);
line-height: 1.2;
text-align: center;
text-decoration: none;
/* Ao lado de uma imagem de botão antiga, que fica de pé na linha de
base com o reflexo embaixo, o botão alinha pelo topo e fica na altura
da pílula da imagem, e não meio botão abaixo dela. Sozinho na linha,
que é o caso comum, isto não muda nada. */
vertical-align: top;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transform: translateZ(0);
transition:
transform .26s var(--cb-saida),
box-shadow .26s var(--cb-saida),
background-color .18s ease,
border-color .18s ease,
color .18s ease;
}
/* O conteúdo fica acima da faixa de luz. */
.cb-botao > * {
position: relative;
z-index: 1;
}
/* A especificidade dupla vence o tema, que colore "a" dentro do conteúdo, e
o Betheme chega a usar !important em algumas variantes de link. */
.cb-botao.cb-botao,
.cb-botao.cb-botao:link,
.cb-botao.cb-botao:visited {
color: var(--cb-texto);
text-decoration: none;
}
.cb-botao.cb-botao:hover,
.cb-botao.cb-botao:focus-visible {
background-color: var(--cb-cor-h);
border-color: var(--cb-borda-cor-h);
color: var(--cb-texto-h);
box-shadow: var(--cb-reflexo), var(--cb-sombra-h);
text-decoration: none;
}
/* Elevação. Fica fora do estilo sem movimento. */
.cb-botao:not(.cb-botao--anim-nenhuma):hover,
.cb-botao:not(.cb-botao--anim-nenhuma):focus-visible {
transform: translateY(-2px);
}
/* Toque: afunda e encolhe, rápido, e volta com a mesma curva da subida. */
.cb-botao:not(.cb-botao--anim-nenhuma):active {
transform: translateY(0) scale(.98);
box-shadow: var(--cb-reflexo), var(--cb-sombra);
transition-duration: .08s;
}
/* Anel de foco só para quem chegou pelo teclado. */
.cb-botao.cb-botao:focus-visible {
outline: 3px solid var(--cb-borda-cor-h);
outline-offset: 3px;
}
/* ------------------------------------------------------------- relevo
*
* Um degradê de luz de cima para baixo e um fio claro na borda de cima: o
* botão deixa de ser um retângulo chapado e ganha volume. O degradê é
* branco sobre a cor, então serve para qualquer cor sem conta nenhuma. */
.cb-botao--relevo {
--cb-reflexo: inset 0 1px 0 rgba(255, 255, 255, .22);
background-image: linear-gradient(180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 58%);
}
/* -------------------------------------------------------- faixa de luz */
.cb-botao--anim-completa::before {
content: "";
position: absolute;
top: -2px;
bottom: -2px;
left: 0;
z-index: 0;
width: 42%;
background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, 0) 100%);
transform: translateX(-130%) skewX(-16deg);
pointer-events: none;
}
/* Curva simétrica, e não a de saída: a de saída faz o reflexo atravessar
quase tudo nos primeiros 150ms, rápido demais para o olho registrar. Com
a simétrica ele é visto passando pelo meio do botão, que é o ponto. */
.cb-botao--anim-completa:hover::before,
.cb-botao--anim-completa:focus-visible::before {
animation: cb-luz .9s cubic-bezier(.45, 0, .25, 1);
}
@keyframes cb-luz {
from {
transform: translateX(-130%) skewX(-16deg);
}
to {
transform: translateX(340%) skewX(-16deg);
}
}
/* -------------------------------------------------------------- texto */
.cb-botao__texto {
display: flex;
flex-direction: column;
align-items: center;
gap: .18em;
min-width: 0;
}
/* Quando a chamada não cabe numa linha (cartão estreito, celular), as duas
linhas saem do mesmo tamanho: "VER PREÇO / DE FÁBRICA", e não "VER PREÇO
DE / FÁBRICA". Navegador antigo ignora e quebra do jeito comum. */
.cb-botao__chamada {
display: block;
text-transform: var(--cb-caixa);
letter-spacing: var(--cb-espaco);
text-wrap: balance;
}
/*
* A linha de apoio reforça a chamada: a chamada promete, a linha diz por
* quê. Em 0.72em, peso médio e um pouco transparente, para ler como legenda
* e não disputar com a chamada.
*/
.cb-botao__apoio {
display: block;
font-size: .72em;
font-weight: 500;
letter-spacing: .01em;
text-transform: none;
opacity: .9;
}
/* Com duas linhas o botão já cresce pelo texto; o recuo vertical diminui. */
.cb-botao--duas-linhas {
padding-block: .55em;
}
/* -------------------------------------------------------------- ícone */
.cb-botao__icone {
flex: 0 0 auto;
width: 1.3em;
height: 1.3em;
transform-origin: 30% 30%;
transition: transform .5s var(--cb-mola);
}
.cb-botao__icone--whatsapp {
transform-origin: 50% 50%;
}
.cb-botao--anim-completa:hover .cb-botao__icone,
.cb-botao--anim-completa:focus-visible .cb-botao__icone {
transform: rotate(-12deg) scale(1.06);
}
/* --------------------------------------------------------------- seta */
.cb-botao__seta {
flex: 0 0 auto;
width: .8em;
height: .8em;
margin-left: .1em;
overflow: visible;
}
.cb-botao__haste {
opacity: 0;
transition: opacity .2s var(--cb-saida);
}
.cb-botao__ponta {
transition: transform .2s var(--cb-saida);
}
.cb-botao:not(.cb-botao--anim-nenhuma):hover .cb-botao__haste,
.cb-botao:not(.cb-botao--anim-nenhuma):focus-visible .cb-botao__haste {
opacity: 1;
}
.cb-botao:not(.cb-botao--anim-nenhuma):hover .cb-botao__ponta,
.cb-botao:not(.cb-botao--anim-nenhuma):focus-visible .cb-botao__ponta {
transform: translateX(3px);
}
/* Sem movimento, a seta fica inteira desde o começo. */
.cb-botao--anim-nenhuma .cb-botao__haste {
opacity: 1;
}
.cb-botao--anim-nenhuma .cb-botao__ponta {
transform: translateX(3px);
}
/* ---------------------------------------------------- chamar atenção
*
* A classe cb-botao--chamando entra pelo cb-botao.js quando o botão aparece
* na tela pela primeira vez, e sai quando a animação termina. Duas ondas e
* acabou. */
.cb-botao--chamando {
animation: cb-chamar 1.6s var(--cb-saida) .25s 2;
}
@keyframes cb-chamar {
0% {
box-shadow: var(--cb-reflexo), var(--cb-sombra), 0 0 0 0 color-mix(in srgb, var(--cb-cor) 55%, transparent);
}
75%,
100% {
box-shadow: var(--cb-reflexo), var(--cb-sombra), 0 0 0 14px color-mix(in srgb, var(--cb-cor) 0%, transparent);
}
}
/* -------------------------------------------------------------- largura */
.cb-botao--l-cheia {
display: flex;
width: 100%;
}
.cb-botao--l-meia {
width: 100%;
max-width: 22rem;
}
/* -------------------------------------------------------- um sobre o outro
*
* Dois botões em linhas seguidas do mesmo parágrafo, como o par orçamento e
* WhatsApp dos blocos de chamada: o wpautop põe um
entre eles, e sem
* isto um encosta no outro. Só nesse caso: botões lado a lado num contêiner
* flex já têm o espaço do gap, e margem ali os desalinharia. */
.cb-botao + br + .cb-botao {
margin-top: .75rem;
}
/* ------------------------------------------------------------ alinhamento
*
* Alinhar um inline-flex pede um bloco em volta, e é por isso que vira
* margem automática: assim funciona dentro de um do wpautop e da div
* button-container que os botões antigos já tinham. */
.cb-botao--a-centro {
display: flex;
width: fit-content;
margin-inline: auto;
}
.cb-botao--a-direita {
display: flex;
width: fit-content;
margin-inline-start: auto;
}
.cb-botao--a-esquerda {
display: flex;
width: fit-content;
margin-inline-end: auto;
}
/* ---------------------------------------------- dentro de caixa de código
*
* Shortcode colado com a formatação de código junto: o
ou o , que
* o Betheme desenha com fonte Consolas, listras e borda. No conteúdo dos
* posts, na descrição do produto e nos widgets de texto a caixa já sai antes
* de o botão ser desenhado (CB_Shortcode::fora_da_caixa_de_codigo); isto
* cobre o que não passa por esses filtros, como o construtor do tema. A
* fonte leva !important porque o Betheme marca assim a dele. */
pre:has(.cb-botao),
code:has(.cb-botao) {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: inherit;
font: inherit !important;
white-space: normal;
/* Tema que rola o na horizontal cortaria a sombra do botão. */
overflow: visible;
}
/* --------------------------------------------------------------- telas */
@media (max-width: 600px) {
/*
* No celular o botão ocupa a linha. O site hoje usa width: 90%, que deixa
* uma sobra assimétrica à direita. Linha inteira é mais previsível e dá
* mais área de toque.
*/
.cb-botao {
--cb-recuo: 18px;
display: flex;
width: 100%;
/* Teto no corpo do texto: "VER PREÇO DE FÁBRICA" a 19px quebra em
duas linhas num celular de 390px. */
font-size: min(var(--cb-corpo), 17px);
}
.cb-botao--l-meia {
max-width: none;
}
}
/* ---------------------------------------------------------- movimento */
@media (prefers-reduced-motion: reduce) {
.cb-botao,
.cb-botao__icone,
.cb-botao__seta,
.cb-botao__haste,
.cb-botao__ponta {
transition: none;
}
.cb-botao.cb-botao:hover,
.cb-botao.cb-botao:focus-visible,
.cb-botao.cb-botao:active {
transform: translateZ(0);
}
.cb-botao--anim-completa::before {
display: none;
}
.cb-botao--chamando {
animation: none;
}
.cb-botao .cb-botao__icone {
transform: none;
}
.cb-botao .cb-botao__haste {
opacity: 1;
}
.cb-botao .cb-botao__ponta {
transform: translateX(3px);
}
}
/* -------------------------------------------------------------- impressão
*
* No papel o botão não é clicável: vira um aviso de que há um endereço, sem
* fundo colorido, que gasta tinta e some no cinza. */
@media print {
.cb-botao {
background: none;
box-shadow: none;
color: #000;
}
.cb-botao::before,
.cb-botao__seta {
display: none;
}
}