img + cc-titulo
cc-rotulo + barra + cc-valores + cc-descricao
cc-valor + botão
--------------------------------------------------------- */
.cc-card {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
transition: transform .3s ease, box-shadow .3s ease;
}
.cc-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 44px rgba(227, 21, 111, .12);
}
.cc-foto {
position: relative;
height: 210px;
overflow: hidden;
background: #fdf2f7;
flex-shrink: 0;
}
.cc-foto img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.cc-foto::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 60%;
background: linear-gradient(transparent, rgba(0, 0, 0, .68));
pointer-events: none;
}
/* Quando a campanha não tem foto */
.cc-foto-vazia {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.cc-foto-vazia i { font-size: 3.4rem; color: var(--st-rosa); opacity: .28; }
.cc-selo {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--st-rosa);
color: #fff;
font-size: .74rem;
font-weight: 700;
padding: 5px 13px;
border-radius: 30px;
}
.cc-pet {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 5px;
background: #fff;
color: var(--st-rosa);
font-size: .74rem;
font-weight: 700;
padding: 5px 12px;
border-radius: 30px;
box-shadow: 0 3px 12px rgba(0, 0, 0, .14);
}
.cc-titulo {
position: absolute;
left: 16px;
right: 16px;
bottom: 12px;
z-index: 2;
margin: 0;
color: #fff;
font-size: 1.35rem;
font-weight: 800;
line-height: 1.2;
text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.cc-corpo {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 14px 18px 16px;
}
.cc-rotulo {
display: block;
color: var(--st-texto);
font-size: .92rem;
margin-bottom: 8px;
}
.cc-valores {
display: flex;
align-items: baseline;
gap: 7px;
margin: 9px 0 10px;
font-size: 1.16rem;
font-weight: 800;
}
.cc-valor-atual { color: var(--st-rosa); }
.cc-valor-sep,
.cc-valor-meta { color: var(--st-texto-fraco); font-weight: 700; }
.cc-meta-extra {
display: flex;
justify-content: space-between;
font-size: .8rem;
color: var(--st-texto-fraco);
margin: -4px 0 10px;
}
/* Sempre 3 linhas: corta o texto longo e reserva o espaço do curto.
Sem o min-height, uma campanha de uma linha encolheria o card e o
"Ler a história completa" subiria em relação aos vizinhos. */
.cc-descricao {
margin: 0;
color: var(--st-texto-medio);
font-size: .87rem;
line-height: 1.5;
min-height: calc(.87rem * 1.5 * 3);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cc-rodape { padding: 14px 18px 18px; }
/* Campo de valor: o "R$" fica dentro da caixa, à esquerda */
.cc-valor-campo {
position: relative;
margin-bottom: 10px;
}
.cc-valor-campo .cc-rs {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
font-weight: 700;
color: var(--st-texto-fraco);
pointer-events: none;
}
.cc-valor-campo input {
width: 100%;
height: 46px;
padding: 0 16px 0 42px;
border: 2px solid #ebe9ec;
border-radius: 12px;
font-size: 1rem;
color: var(--st-texto);
transition: border-color .2s ease, box-shadow .2s ease;
}
.cc-valor-campo input:focus {
outline: none;
border-color: var(--st-rosa);
box-shadow: 0 0 0 3px rgba(227, 21, 111, .12);
}
.cc-btn {
display: block;
width: 100%;
padding: 13px;
border: none;
border-radius: 30px;
background: var(--st-rosa);
color: #fff;
font-size: 1.02rem;
font-weight: 800;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: filter .18s ease, transform .18s ease;
}
.cc-btn:hover {
filter: brightness(1.06);
transform: translateY(-1px);
color: #fff;
text-decoration: none;
}
.cc-btn:disabled {
background: #ccc;
cursor: not-allowed;
filter: none;
transform: none;
}
.cc-erro {
display: none;
margin: 8px 0 0;
color: #dc3545;
font-size: .86rem;
}
.cc-seguro {
margin: 10px 0 0;
text-align: center;
font-size: .8rem;
color: var(--st-texto-fraco);
}
.cc-seguro i { color: #28a745; }
/* A área clicável vai só até a descrição: o rodapé tem campo de
valor e botão, que precisam do clique para eles mesmos.
Este link virou o filho direto do .cc-card, ocupando o lugar que
antes era do .cc-corpo. Sem o flex:1 abaixo ele não estica, e o
rodapé de cada card para onde o texto acabou — foi assim que os
botões "Apoiar" saíram de linha entre cards vizinhos. */
.cc-abrir {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.cc-abrir:hover { color: inherit; text-decoration: none; }
.cc-abrir:hover .cc-titulo { text-decoration: underline; }
.cc-abrir:focus-visible {
outline: 2px solid var(--st-rosa);
outline-offset: -2px;
}
.cc-mais {
display: inline-flex;
align-items: center;
/* Como item de um flex column, sem isto ele esticaria na largura
toda e o sublinhado do hover atravessaria o card. */
align-self: flex-start;
gap: 5px;
margin-top: auto; /* encosta na base do corpo, alinhado entre cards */
padding-top: 8px;
color: var(--st-rosa);
font-size: .84rem;
font-weight: 700;
}
.cc-abrir:hover .cc-mais { text-decoration: underline; }
/* ---------------------------------------------------------
JANELA DA CAMPANHA (aberta ao clicar no card)
Segue o mesmo padrão do modal de doação desta página: HTML
próprio e JS puro, sem depender da versão do Bootstrap.
--------------------------------------------------------- */
.cc-janela {
display: none;
position: fixed;
inset: 0;
z-index: 9998;
background: rgba(0, 0, 0, .55);
align-items: center;
justify-content: center;
padding: 20px;
}
.cc-janela.aberta { display: flex; }
.cc-janela-caixa {
position: relative;
background: #fff;
border-radius: 20px;
overflow: hidden;
width: 100%;
max-width: 620px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.cc-janela-foto {
position: relative;
height: 220px;
flex-shrink: 0;
background: #fdf2f7;
}
.cc-janela-foto img { width: 100%; height: 100%; object-fit: cover; }
.cc-janela-foto::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 60%;
background: linear-gradient(transparent, rgba(0, 0, 0, .68));
}
.cc-janela-titulo {
position: absolute;
left: 22px;
right: 22px;
bottom: 14px;
z-index: 2;
margin: 0;
color: #fff;
font-size: 1.42rem;
font-weight: 800;
line-height: 1.2;
text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.cc-janela-fechar {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
width: 34px;
height: 34px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
color: var(--st-texto);
font-size: .95rem;
cursor: pointer;
}
.cc-janela-fechar:hover { background: #fff; }
.cc-janela-corpo {
padding: 20px 24px;
overflow-y: auto;
}
/* Texto completo — sem corte, ao contrário do card */
.cc-janela-texto {
margin: 14px 0 0;
color: var(--st-texto-medio);
font-size: .95rem;
line-height: 1.65;
white-space: pre-line;
}
.cc-janela-rodape {
flex-shrink: 0;
padding: 14px 24px 20px;
border-top: 1px solid var(--st-linha);
}
@media (max-width: 575px) {
.cc-janela-foto { height: 170px; }
.cc-janela-titulo { font-size: 1.18rem; }
.cc-janela-corpo { padding: 16px 18px; }
}
/* --- Variante em destaque -----------------------------------
Mesmo card vertical das demais, só que maior e centralizado.
A versão deitada (foto à esquerda) foi abandonada: a coluna de
texto nunca enchia a altura da foto e sobrava um vão grande.
------------------------------------------------------------- */
.cc-card-destaque {
max-width: 680px;
margin: 0 auto 40px;
}
.cc-card-destaque .cc-foto { height: 300px; }
.cc-card-destaque .cc-titulo { font-size: 1.72rem; }
.cc-card-destaque .cc-corpo { padding: 18px 24px 0; }
.cc-card-destaque .cc-rodape { padding: 16px 24px 22px; }
.cc-card-destaque .cc-rotulo { font-size: 1rem; }
.cc-card-destaque .cc-valores { font-size: 1.32rem; }
/* No destaque a descrição pode respirar mais que nos cards menores */
.cc-card-destaque .cc-descricao {
font-size: .92rem;
-webkit-line-clamp: 5;
}
/* Valor e botão lado a lado — evita duas faixas soltas empilhadas */
@media (min-width: 576px) {
.cc-card-destaque .cc-acao-linha {
display: flex;
align-items: center;
gap: 10px;
}
.cc-card-destaque .cc-acao-linha .cc-valor-campo {
width: 160px;
flex-shrink: 0;
margin-bottom: 0;
}
.cc-card-destaque .cc-acao-linha .cc-btn { flex: 1 1 auto; }
}
/* ---------------------------------------------------------
CARTÃO DE FORMA DE DOAÇÃO
Usado na página "Faça uma doação". Todos os cartões nascem
iguais; o .cd-card-destaque é o único que puxa atenção —
por isso deve haver no máximo um por tela.
--------------------------------------------------------- */
.cd-card {
position: relative;
/* Coluna flex para que o CTA (que tem margin-top:auto) desça até o
rodapé. Lado a lado, o cartão mais curto acompanha a altura do
outro em vez de deixar um vão embaixo do botão. */
display: flex;
flex-direction: column;
background: #fff;
border: 2px solid transparent;
border-radius: 20px;
padding: 28px 30px;
box-shadow: 0 8px 30px rgba(0, 0, 0, .06);
height: 100%;
}
.cd-card-destaque {
border-color: var(--st-rosa);
box-shadow: 0 14px 44px rgba(227, 21, 111, .14);
padding-top: 34px;
}
/* Selo que cavalga a borda de cima */
.cd-selo {
position: absolute;
top: -13px;
left: 30px;
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--st-rosa);
color: #fff;
font-size: .76rem;
font-weight: 800;
letter-spacing: .3px;
padding: 5px 15px;
border-radius: 30px;
}
/* Valores sugeridos: três colunas iguais, sem depender de quantos
caracteres tem cada rótulo ("R$ 25" x "R$ 100/mês"). */
.cd-valores-grade {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 16px;
}
.cd-valores-grade .valor-rapido {
width: 100%;
text-align: center;
padding-left: 4px;
padding-right: 4px;
}
.cd-cabecalho {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.cd-icone {
width: 50px;
height: 50px;
flex-shrink: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #fdf2f7;
color: var(--st-rosa);
font-size: 1.3rem;
}
.cd-icone[data-tom="verde"] { background: #e6fff0; color: #28a745; }
.cd-icone[data-tom="cinza"] { background: #f2f1f3; color: var(--st-texto-medio); }
.cd-titulo {
margin: 0;
color: var(--st-texto);
font-size: 1.22rem;
font-weight: 800;
}
.cd-card-destaque .cd-titulo { font-size: 1.4rem; }
.cd-subtitulo {
margin: 2px 0 0;
color: var(--st-texto-fraco);
font-size: .9rem;
line-height: 1.45;
}
/* Frase curta que justifica o destaque */
.cd-argumento {
display: flex;
align-items: flex-start;
gap: 9px;
background: #fdf2f7;
border-radius: 12px;
padding: 11px 14px;
margin-bottom: 16px;
color: #8a3560;
font-size: .88rem;
line-height: 1.5;
}
.cd-argumento i { margin-top: 3px; color: var(--st-rosa); }
/* Nos cartões sem destaque o argumento não deve competir com o
principal — mesma forma, tom neutro. */
.cd-argumento[data-tom="neutro"] {
background: #f4f3f5;
color: var(--st-texto-medio);
}
.cd-argumento[data-tom="neutro"] i { color: var(--st-texto-fraco); }
@media (max-width: 575px) {
.cd-card { padding: 22px 20px; }
.cd-selo { left: 20px; }
}
/* ---------------------------------------------------------
MURAL DE APADRINHADOS
Reaproveita o cp-card (foto + nome sobreposto) e acrescenta
a lista de padrinhos daquele animal. A lista fica DENTRO do
card de propósito: é ela que mostra o vínculo entre quem
apadrinhou e quem foi apadrinhado.
--------------------------------------------------------- */
.cp-selo-ok {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 5px;
background: #e6f9ed;
color: #1c7a3d;
font-size: .73rem;
font-weight: 700;
padding: 5px 12px;
border-radius: 30px;
}
.cp-padrinhos-lista {
flex: 1 1 auto; /* cards lado a lado com listas de tamanhos diferentes */
padding: 12px 16px 16px;
}
.cp-padrinhos-titulo {
display: block;
color: var(--st-rosa);
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
/* Uma linha por padrinho — compacta o bastante para caber
duas ou três sem o card virar um vão branco. */
.cp-padrinho {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 0;
}
.cp-padrinho + .cp-padrinho { border-top: 1px solid var(--st-linha); }
.cp-padrinho-foto {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fce4ee;
}
.cp-padrinho-vazio {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #fce4ee;
color: var(--st-rosa);
font-size: .82rem;
}
.cp-padrinho-nome {
display: block;
color: var(--st-texto);
font-size: .9rem;
font-weight: 700;
line-height: 1.25;
}
.cp-padrinho-nome[data-anonimo] { color: var(--st-texto-fraco); font-style: italic; }
.cp-padrinho-desde {
display: block;
color: var(--st-texto-fraco);
font-size: .76rem;
}
/* ---------------------------------------------------------
GALERIA DA FICHA DO ANIMAL
Foto grande + tira de miniaturas. Substitui o carrossel com
bolinhas. A identidade dos cards (nome + pills + selo) vem
para cima da foto principal.
--------------------------------------------------------- */
/* Coluna flex de altura cheia: a foto acompanha a altura da
coluna de texto ao lado (row align-items-stretch), em vez de
ter uma altura fixa que cortava mal as fotos verticais. */
.ad-galeria {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.ad-principal {
position: relative;
flex: 1 1 auto;
min-height: 380px;
border-radius: 16px;
overflow: hidden;
background: #fdf2f7;
box-shadow: 0 12px 34px rgba(0, 0, 0, .1);
}
/* O link do lightbox precisa preencher o quadro para a imagem ter
contra o que medir 100% de altura. Sem isto a foto renderizava
no tamanho natural e a vertical estourava a div. */
.ad-principal > a {
display: block;
width: 100%;
height: 100%;
cursor: zoom-in;
}
.ad-principal img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%;
display: block;
}
/* Degradê só na base, para o nome ficar legível sobre a foto */
.ad-principal::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 45%;
background: linear-gradient(transparent, rgba(0, 0, 0, .62));
pointer-events: none;
}
.ad-selo {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
color: var(--st-texto);
font-size: .78rem;
font-weight: 700;
padding: 6px 13px;
border-radius: 30px;
box-shadow: 0 3px 12px rgba(0, 0, 0, .16);
}
.ad-selo i { color: #f0a500; }
.ad-identidade {
position: absolute;
left: 18px;
right: 18px;
bottom: 16px;
z-index: 2;
}
.ad-nome {
margin: 0 0 8px;
color: #fff;
font-size: 2rem;
font-weight: 800;
line-height: 1.1;
text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.ad-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-pill {
display: inline-flex;
align-items: center;
gap: 5px;
background: #fff;
color: var(--st-texto);
font-size: .82rem;
font-weight: 600;
line-height: 1;
padding: 6px 12px;
border-radius: 30px;
}
.ad-pill i { font-size: .78rem; }
.ad-pill[data-sexo="Fêmea"] i { color: var(--st-rosa); }
.ad-pill[data-sexo="Macho"] i { color: #2f80ed; }
/* Tira de miniaturas */
.ad-miniaturas {
display: flex;
gap: 8px;
margin-top: 10px;
}
.ad-miniatura {
flex: 1 1 0;
min-width: 0;
height: 72px;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
border: 2.5px solid transparent;
padding: 0;
background: #fdf2f7;
transition: border-color .18s ease;
}
.ad-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-miniatura.ativa { border-color: var(--st-rosa); }
.ad-miniatura:hover { border-color: #f4b6d1; }
@media (max-width: 991px) {
/* Empilhado no tablet/celular, a coluna não tem par para
acompanhar — volta a uma altura própria. */
.ad-galeria { height: auto; }
.ad-principal { min-height: 0; height: 380px; }
}
@media (max-width: 575px) {
.ad-principal { height: 320px; }
.ad-nome { font-size: 1.6rem; }
.ad-miniatura { height: 58px; }
}
/* ---------------------------------------------------------
BOTÕES DA FICHA DO ANIMAL
Verde = adotar (WhatsApp) · rosa = apadrinhar · contorno = voltar.
O verde do WhatsApp é mantido por convenção do canal.
--------------------------------------------------------- */
.ad-acoes {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
.ad-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 26px;
/* border/font zerados porque "Quero adotar" agora é um