continuam todos no DOM ao
mesmo tempo (nenhum ganha aria-hidden), exatamente como a galeria —
quem navega por teclado/leitor de tela le os depoimentos em ordem,
sem depender de quais cards o scroll deixou visiveis.
==================================================================*/
.sf-depoimentos-area {
position: relative;
padding: 96px 0 88px;
background: var(--sf-branco);
}
/* o .sec-title do template reserva 68px embaixo para paragrafo de
apoio, que aqui nao existe */
.sf-depoimentos-area .sec-title { padding-bottom: 24px; }
/*------------------------------------------------------------------
Carrossel: seta - trilho - seta
Grid e nao flex de proposito: no celular (bloco 24.1) as duas setas
precisam ficar LADO A LADO numa faixa abaixo do card, e flex-direction
column empilharia cada item em sua propria linha — teria de embrulhar
as setas numa div extra so para agrupa-las. Com grid-template-areas
cada elemento (seta/trilho/seta) e posicionado direto pelo nome, sem
wrapper novo no HTML, nas tres larguras.
------------------------------------------------------------------*/
.sf-depoimentos-carrossel {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-areas: "anterior trilho proxima";
align-items: center;
gap: 20px;
}
.sf-depoimentos-seta.anterior { grid-area: anterior; }
.sf-depoimentos-seta.proxima { grid-area: proxima; }
.sf-depoimentos-trilho { grid-area: trilho; }
.sf-depoimentos-trilho {
display: flex;
gap: 24px;
/* cada card encaixa pela borda de inicio dele — com varios
visiveis de uma vez, "center" (usado quando era 1 por vez)
fazia o snap mirar o meio de um card do meio, nao a borda */
scroll-snap-type: x mandatory;
overflow-x: auto;
overflow-y: hidden;
margin: 0;
padding: 6px 2px;
list-style: none;
scroll-behavior: smooth;
scrollbar-width: none;
/* iOS: sem isto o arrasto engasga dentro da pagina */
-webkit-overflow-scrolling: touch;
}
.sf-depoimentos-trilho::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
.sf-depoimentos-trilho { scroll-behavior: auto; }
}
.sf-depoimentos-trilho:focus-visible {
outline: 3px solid var(--sf-verde-300);
outline-offset: 4px;
border-radius: 20px;
}
/* 3 por vez no desktop (>=992px, o padrao — telas menores sao
sobrescritas abaixo). 48px = 2 vaos de 24px entre os 3 cards. */
.sf-depoimento {
flex: 0 0 calc((100% - 48px) / 3);
scroll-snap-align: start;
display: flex;
flex-direction: column;
padding: 30px 30px 26px;
background: var(--sf-creme);
border: 1px solid var(--sf-verde-50);
border-radius: 18px;
}
.sf-depoimento blockquote {
position: relative;
/* o blockquote do template vem com barra lateral e recuo; aqui o
card ja e a moldura */
margin: 0;
padding: 22px 0 0;
border: 0;
background: none;
/* empurra a assinatura para a base do card mesmo quando um
depoimento e bem mais curto que o vizinho */
flex: 1 1 auto;
}
/* aspa decorativa. Em ::before de proposito: pseudo-elemento nao entra
na arvore de acessibilidade, entao o leitor de tela nao anuncia um
caractere solto antes da frase. */
.sf-depoimento blockquote::before {
content: "\201C";
position: absolute;
top: -10px;
left: -2px;
font-family: var(--sf-font-titulo);
font-size: 62px;
line-height: 1;
color: var(--sf-verde-300);
}
.sf-depoimento blockquote p {
margin: 0;
color: var(--sf-texto);
font-size: 17px;
line-height: 1.7;
}
.sf-depoimento-quem {
display: flex;
align-items: center;
gap: 14px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--sf-creme-300);
}
.sf-depoimento-inicial {
flex: 0 0 auto;
width: 46px;
height: 46px;
border-radius: 50%;
/* enquanto o conteudo for o placeholder [[INICIAL_N]] ele vazaria por
cima do nome; com o valor real (1 letra) isto nao tem efeito */
overflow: hidden;
background: var(--sf-verde-700);
color: var(--sf-branco);
font-family: var(--sf-font-titulo);
font-size: 20px;
font-weight: 700;
line-height: 46px;
text-align: center;
}
.sf-depoimento-nome strong {
display: block;
color: var(--sf-verde-900);
font-size: 17px;
font-weight: 700;
line-height: 1.3;
}
.sf-depoimento-nome span {
color: var(--sf-texto-2);
font-size: 14px;
}
/*------------------------------------------------------------------
Setas
Nascem [hidden] no HTML: sem depoimentos.js elas nao fariam nada, e
botao que nao faz nada e pior do que botao que nao existe. Tambem
nascem [disabled] quando nao ha para onde rolar — hoje e o caso do
desktop, com exatamente 3 depoimentos cabendo nos 3 slots.
Fora do trilho (grid, nao absolute) de proposito: um botao absoluto
encostado na quina, como na galeria, cairia em cima do texto da
citacao — na galeria quem esta por tras e uma foto, aqui e o
proprio corpo do card.
------------------------------------------------------------------*/
.sf-depoimentos-seta {
flex: 0 0 auto;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
color: var(--sf-verde-700);
background: var(--sf-branco);
border: 1px solid var(--sf-verde-50);
border-radius: 50%;
box-shadow: 0 8px 20px rgba(15, 46, 28, .12);
cursor: pointer;
transition: background .25s ease, color .25s ease, transform .25s ease, opacity .25s ease;
}
.sf-depoimentos-seta:hover {
background: var(--sf-verde-500);
color: var(--sf-branco);
transform: scale(1.06);
}
.sf-depoimentos-seta:focus-visible {
outline: 3px solid var(--sf-verde-300);
outline-offset: 3px;
}
/* ponta do trilho (ou os 3 cabendo de uma vez): o botao continua no
lugar, so para de responder — mesma regra da galeria */
.sf-depoimentos-seta[disabled] {
opacity: .3;
cursor: default;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.sf-depoimentos-seta { transition: none; }
.sf-depoimentos-seta:hover { transform: none; }
}
/*------------------------------------------------------------------
Barra de progresso
Mesma peca da galeria (bloco 23), recolorida para fundo claro: la o
fundo da secao e verde-escuro, aqui e branco. Preferida a pontinhos
porque "quantos pontos" dependeria de quantos cards cabem por vez
(3 no desktop, 2 no tablet, 1 no celular) — a barra so reflete a
fracao rolada, entao funciona igual nas tres larguras sem precisar
saber quantos "paginas" existem.
------------------------------------------------------------------*/
.sf-depoimentos-barra {
position: relative;
height: 4px;
max-width: 240px;
margin: 30px auto 0;
border-radius: 4px;
background: var(--sf-creme-300);
overflow: hidden;
}
.sf-depoimentos-progresso {
position: absolute;
inset: 0 auto 0 0;
width: 30%;
border-radius: 4px;
background: var(--sf-verde-500);
transition: transform .15s linear;
will-change: transform;
}
/* convite para o proximo depoimento: o unico jeito de a secao se
alimentar sozinha depois da entrega */
.sf-depoimentos-cta {
margin: 30px 0 0;
color: var(--sf-texto-2);
font-size: 17px;
text-align: center;
}
.sf-depoimentos-cta a {
color: var(--sf-verde-700);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.sf-depoimentos-cta a:hover {
color: var(--sf-verde-500);
}
/*------------------------------------------------------------------
24.1. Depoimentos em telas menores
------------------------------------------------------------------*/
/* tablet: 2 por vez. 24px = 1 vao entre os 2 cards visiveis */
@media only screen and (max-width: 991px) {
.sf-depoimentos-area { padding: 84px 0 80px; }
.sf-depoimento { flex: 0 0 calc((100% - 24px) / 2); }
}
/*------------------------------------------------------------------
Celular: 1 por vez, com as setas abaixo do card
As setas descem para uma faixa abaixo do card em vez de ficarem ao
lado do trilho: lado a lado, os dois botoes de 52px comeriam mais
de 100px dos ~345px uteis de um celular comum, deixando o card
estreito demais para o texto da citacao. Embaixo, card e citacao
ganham a largura toda e as setas continuam ao alcance do polegar —
mesma logica das setas da lupa (bloco 23), que tambem migram para
baixo no celular.
------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
.sf-depoimentos-area { padding: 70px 0 72px; }
.sf-depoimento { flex: 0 0 100%; }
/* card na largura toda numa linha, as duas setas lado a lado na
linha de baixo — perto uma da outra, entao centralizadas (nao
espalhadas nas pontas) */
.sf-depoimentos-carrossel {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"trilho trilho"
"anterior proxima";
row-gap: 18px;
column-gap: 16px;
}
.sf-depoimentos-seta.anterior { justify-self: end; }
.sf-depoimentos-seta.proxima { justify-self: start; }
.sf-depoimento {
padding: 26px 22px 22px;
}
.sf-depoimento blockquote p { font-size: 16px; }
}
/*==================================================================
25. Fotos da equipe: circulo maior
------------------------------------------------------------------
O template desenha o avatar em 220px, medida pensada para tres
pessoas na linha. A Sao Francisco tem duas, e nessa largura sobrava
espaco dos dois lados enquanto os rostos ficavam pequenos demais
para se reconhecer quem atende.
Os dois circulos brancos decorativos (.round-top e .round-bottom)
sao posicionados em px absolutos, calculados para os 220px do
template: mantidos como estavam, sairiam do lugar. Os valores
abaixo sao os mesmos percentuais do desenho original, recalculados
para 300px — por isso nao sao numeros redondos.
A foto e servida em 600x600, entao 276px de area util continua
dentro do 2x: nada de imagem esticada em tela retina.
==================================================================*/
.single-team-member .img-holder {
width: 300px;
height: 300px;
padding: 12px;
}
.single-team-member .img-holder .round-top {
top: -18px;
left: 109px;
width: 61px;
height: 61px;
}
.single-team-member .img-holder .round-bottom {
right: 27px;
width: 95px;
height: 95px;
}
/* No celular a largura util e ~345px: 300px de foto encostaria nas
bordas. Volta para um meio-termo, ainda maior que o template. */
@media only screen and (max-width: 575px) {
.single-team-member .img-holder {
width: 260px;
height: 260px;
}
.single-team-member .img-holder .round-top {
top: -15px;
left: 95px;
width: 53px;
height: 53px;
}
.single-team-member .img-holder .round-bottom {
right: 24px;
width: 82px;
height: 82px;
}
}
/*==================================================================
25.1. Equipe: sem o veu verde no hover
------------------------------------------------------------------
O template cobre a foto com `.overlay-style-one` (verde 90%) quando
o mouse passa, e pinta de verde os dois circulos decorativos. Com
foto de gente de verdade isso apaga o rosto justamente na hora em
que a pessoa parou para olhar — vale para uma foto de banco de
imagem, nao para o Leonardo e a Andrea.
Feito por CSS, e nao apagando a do HTML: mantem o markup do
template intacto e reversivel, do mesmo jeito que o resto desta
camada de marca.
==================================================================*/
.single-team-member .overlay-style-one,
.single-team-member:hover .overlay-style-one {
opacity: 0;
}
.single-team-member:hover .img-holder .round-top,
.single-team-member:hover .img-holder .round-bottom {
background: #ffffff;
}
/*==================================================================
25.2. Equipe: linha de CRMV abaixo do nome
------------------------------------------------------------------
Anuncio de estabelecimento veterinario tem que identificar quem
responde tecnicamente e o numero de inscricao no conselho
(Res. CFMV 1.071/2014). A linha entra abaixo do nome, e nao no
lugar do cargo, para o dado legal aparecer sem transformar o
bloco "quem atende voce" numa ficha de registro.
Tamanho menor e cinza-verde do corpo: o CRMV e informacao de
conferencia, nao chamada. Da 5.30:1 sobre o creme da secao
(#FBF7EF), acima do 4.5:1 do WCAG AA para texto normal.
==================================================================*/
.single-team-member .title-holder h3 {
margin-bottom: 5px;
}
.single-team-member .title-holder .sf-crmv {
margin: 0;
font-size: 14px;
line-height: 22px;
font-weight: 500;
color: var(--sf-texto-2);
letter-spacing: .01em;
}