sem o JS do
Swiper: as setas eram mortos, os slides viravam inline
e o bloco do texto tinha height:200px + overflow-y:scroll (scrollbar dentro
do card). A secao foi reescrita em HTML proprio; o comportamento vive em
assets/js/reviews-carousel.js e o estado sem JS e um scroller horizontal
nativo, que ja funciona sozinho.
Tokens vindos do design original: painel #e7f4ff, card branco r=40,
pill azul #2945b8.
------------------------------------------------------------------------ */
.reviews {
--reviews-bg: #e7f4ff;
--reviews-ink: #13161d;
--reviews-brand: #2945b8;
--reviews-brand-dark: #192c7c;
--reviews-hairline: #e9f4ff;
--reviews-gap: 24px;
--reviews-pad-inline: 30px;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
box-sizing: border-box;
width: 100%;
margin: 0 auto 20px;
padding: 100px 0 40px;
background-color: var(--reviews-bg);
border-radius: 80px;
/* o track rola por dentro; nada pode vazar do painel arredondado */
overflow: hidden;
}
/* -- cabecalho ---------------------------------------------------------- */
.reviews__header {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 720px;
padding: 0 var(--reviews-pad-inline);
text-align: center;
}
.reviews__title {
margin: 0;
font-family: Lora, serif;
font-size: 54px;
font-weight: 500;
line-height: 60px;
letter-spacing: -0.02em;
color: var(--reviews-ink);
}
.reviews__intro {
margin: 0;
font-family: Red Hat Text, sans-serif;
font-size: 18px;
line-height: 28px;
color: rgba(19, 22, 29, 0.65);
}
/* -- viewport + fades --------------------------------------------------- */
.reviews__viewport {
position: relative;
width: 100%;
}
/* dica visual de que ha mais card fora da tela; so acende quando ha overflow */
.reviews__viewport::before,
.reviews__viewport::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 60px;
z-index: 2;
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease;
}
.reviews__viewport::before {
left: 0;
background: linear-gradient(90deg, var(--reviews-bg) 10%, rgba(231, 244, 255, 0) 100%);
}
.reviews__viewport::after {
right: 0;
background: linear-gradient(270deg, var(--reviews-bg) 10%, rgba(231, 244, 255, 0) 100%);
}
.reviews__viewport[data-overflow-start]::before,
.reviews__viewport[data-overflow-end]::after {
opacity: 1;
}
/* -- track -------------------------------------------------------------- */
.reviews__track {
display: flex;
gap: var(--reviews-gap);
align-items: stretch;
margin: 0;
/* padding lateral = respiro do primeiro/ultimo card; o bottom cabe a sombra */
padding: 6px var(--reviews-pad-inline) 24px;
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-left: var(--reviews-pad-inline);
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track:focus-visible {
outline: 3px solid var(--reviews-brand);
outline-offset: -3px;
border-radius: 40px;
}
/* Ate 899px o card e menor que a tela de proposito: o pedaco do proximo
card aparecendo e o que avisa que da pra arrastar.
min-width:0 e obrigatorio - sem ele o min-content do card (a pill "VIEW
PRODUCT" nao quebra linha) segurava o slide em ~344px e estourava a tela
em aparelhos de 320px. */
.reviews__slide {
display: flex;
flex: 0 0 min(420px, 84vw);
min-width: 0;
max-width: 100%;
scroll-snap-align: start;
}
/* Daqui pra cima o card e calculado pra caber um numero exato de colunas -
largura fixa deixava o ultimo card cortado por alguns pixels. */
@media (min-width: 900px) {
.reviews__slide { flex-basis: calc((100% - var(--reviews-gap)) / 2); }
}
@media (min-width: 1280px) {
.reviews__slide { flex-basis: calc((100% - 2 * var(--reviews-gap)) / 3); }
}
/* -- card --------------------------------------------------------------- */
.review-card {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
box-sizing: border-box;
padding: 40px;
background-color: #fff;
border-radius: 40px;
box-shadow: 0 9px 11px 0 rgba(0, 0, 0, 0.05);
}
.review-card__quote-block {
display: flex;
flex: 1;
flex-direction: column;
gap: 20px;
margin: 0;
}
.review-card__stars {
width: 128px;
height: auto;
max-width: 100%;
}
/* min-height alinha os cards mesmo com textos de tamanhos diferentes, sem
voltar ao height fixo com scrollbar interna do snapshot */
.review-card__quote {
flex: 1;
min-height: 168px;
margin: 0;
font-family: Lora, serif;
font-size: 18px;
line-height: 30px;
color: var(--reviews-ink);
}
.review-card__quote p { margin: 0; }
.review-card__quote p + p { margin-top: 12px; }
.review-card__author {
display: flex;
align-items: center;
gap: 16px;
margin: 0;
}
.review-card__avatar {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 900px;
object-fit: cover;
background-color: var(--reviews-hairline);
}
.review-card__name {
font-family: Red Hat Display, sans-serif;
font-size: 18px;
font-weight: 700;
font-style: normal;
color: var(--reviews-ink);
}
/* linha separando o depoimento do produto que ele cita */
.review-card__product {
display: flex;
align-items: center;
gap: 20px;
padding-top: 24px;
border-top: 1px solid var(--reviews-hairline);
}
.review-card__product-img {
flex-shrink: 0;
width: 85px;
height: 85px;
border-radius: 20px;
object-fit: contain;
}
.review-card__product-info {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
min-width: 0;
}
.review-card__product-name {
margin: 0;
font-family: Red Hat Display, sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--reviews-ink);
}
.review-card__cta {
display: inline-flex;
align-items: center;
box-sizing: border-box;
padding: 12px 24px;
background-color: var(--reviews-hairline);
border: 2px solid var(--reviews-hairline);
border-radius: 40px;
font-family: Red Hat Display, sans-serif;
font-size: 12px;
font-weight: 800;
line-height: 16px;
letter-spacing: 1.8px;
white-space: nowrap;
text-decoration: none;
color: var(--reviews-brand);
cursor: pointer;
}
.review-card__cta:focus-visible {
outline: 3px solid var(--reviews-brand);
outline-offset: 2px;
}
/* -- controles ---------------------------------------------------------- */
/* [hidden] precisa vencer o display:flex - o JS esconde a barra quando todos
os cards cabem na tela */
.reviews__controls[hidden] { display: none; }
.reviews__controls {
display: flex;
align-items: center;
gap: 20px;
padding: 0 var(--reviews-pad-inline);
}
.reviews__nav {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 71px;
height: 47px;
padding: 0;
background-color: var(--reviews-brand);
border: 0;
border-radius: 900px;
color: #fff;
cursor: pointer;
transition: background-color 200ms ease, opacity 200ms ease;
}
.reviews__nav svg { width: 22px; height: 22px; }
.reviews__nav:hover { background-color: var(--reviews-brand-dark); }
.reviews__nav:focus-visible {
outline: 3px solid var(--reviews-brand-dark);
outline-offset: 2px;
}
.reviews__nav:disabled {
opacity: 0.3;
cursor: default;
background-color: var(--reviews-brand);
}
.reviews__dots {
display: flex;
align-items: center;
gap: 8px;
}
.reviews__dot {
width: 10px;
height: 10px;
padding: 0;
background-color: rgba(41, 69, 184, 0.25);
border: 0;
border-radius: 900px;
cursor: pointer;
transition: width 200ms ease, background-color 200ms ease;
}
.reviews__dot[aria-current="true"] {
width: 28px;
background-color: var(--reviews-brand);
}
.reviews__dot:focus-visible {
outline: 3px solid var(--reviews-brand);
outline-offset: 3px;
}
.reviews__guarantee {
display: inline-flex;
align-items: center;
padding: 12px 24px;
background-color: #fff;
border-radius: 40px;
font-family: Red Hat Text, sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.8px;
white-space: nowrap;
text-decoration: none;
color: var(--reviews-ink);
cursor: pointer;
}
.reviews__guarantee:focus-visible {
outline: 3px solid var(--reviews-brand);
outline-offset: 2px;
}
/* -- responsivo --------------------------------------------------------- */
@media (max-width: 1024px) {
.reviews { padding-top: 72px; }
.reviews__title { font-size: 46px; line-height: 54px; }
}
@media (max-width: 767px) {
.reviews {
--reviews-gap: 16px;
--reviews-pad-inline: 20px;
padding: 56px 0 32px;
border-radius: 40px;
gap: 32px;
}
.reviews__title { font-size: 40px; line-height: 48px; }
.reviews__intro { font-size: 16px; line-height: 24px; }
.reviews__slide { flex-basis: min(340px, 86vw); }
.review-card { padding: 28px; border-radius: 32px; gap: 20px; }
.review-card__quote { min-height: 0; font-size: 17px; line-height: 28px; }
.review-card__product { gap: 16px; }
.review-card__product-img { width: 72px; height: 72px; }
.reviews__viewport::before,
.reviews__viewport::after { width: 24px; }
}
/* telas bem estreitas: a pill desce pra linha de baixo em vez de esticar o card */
@media (max-width: 479px) {
.review-card { padding: 24px; }
.review-card__product { flex-wrap: wrap; }
.review-card__cta { padding: 12px 18px; letter-spacing: 1.2px; }
}
@media (prefers-reduced-motion: reduce) {
.reviews__track { scroll-behavior: auto; }
.reviews__nav,
.reviews__dot,
.reviews__viewport::before,
.reviews__viewport::after { transition: none; }
}