.progress-wrapper-s {
width: 100%;
display: flex;
align-items: center;
gap: 16px;
padding: 16px 0;
box-sizing: border-box;
margin-bottom: 8px;
}
/* Seta */
.progress-icone-s {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
}
.progress-icone-s svg {
width: 24px;
height: 24px;
}
/* Trilho */
.progress-track-s {
position: relative;
width: 100%;
height: 14px;
border-radius: 999px;
background: #f1f5f9;
overflow: hidden;
}
/* Preenchimento fixo em 25% */
.progress-fill-s {
height: 100%;
width: 1%;
border-radius: 999px;
background: linear-gradient(90deg, #ef4444, #FF69B4);
}
/* Container externo para controlar os 80% */
.lovecupido-wrapper {
width: 100%;
display: flex;
justify-content: flex-start; /* Alinha à esquerda perto do mascote */
padding: 10px;
box-sizing: border-box;
}
/* O Balão de Conversa */
.lovecupido-bubble-final {
display: flex;
align-items: center;
background: #ffffff;
border: 2px solid #e2e8f0;
border-radius: 20px;
/* Altura e Espaçamento */
padding: 25px 50px 25px 25px;
/* Sombra mais intensa */
box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -5px rgba(0, 0, 0, 0.05);
position: relative;
font-family: ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif;
font-size: 18px;
color: #333;
/* Controle de Largura Responsiva */
width: 100%;
max-width: 80%; /* Ocupa até 80% do container pai */
margin-left: 25px; /* Espaço para o triângulo não sobrepor o mascote */
box-sizing: border-box;
}
/* Triângulo do Balão */
.lovecupido-bubble-final::before {
content: “”;
position: absolute;
left: -11px;
top: 50%;
transform: translateY(-50%);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #e2e8f0;
}
.lovecupido-bubble-final::after {
content: “”;
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #ffffff;
}
/* Fontes iguais para tudo */
.txt-static, .txt-anim {
font-weight: 500;
letter-spacing: 0.1px;
}
.txt-static {
margin-right: 6px;
flex-shrink: 0;
}
/* Animação Typewriter */
.txt-anim {
display: inline-block;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid transparent; /* Cursor invisível */
width: 0;
animation: typing-love 4s steps(40, end) infinite;
}
@keyframes typing-love {
0% { width: 0; }
40% { width: 100%; }
85% { width: 100%; }
100% { width: 0; }
}
/* — AJUSTES DE RESPONSIVIDADE — */
/* IPAD / TABLETS */
@media (max-width: 1024px) {
.lovecupido-bubble-final {
max-width: 85%; /* Aumenta um pouco em tablets para caber o texto */
font-size: 17px;
padding: 20px 40px 20px 20px;
}
}
/* MOBILE (CELULARES) */
@media (max-width: 768px) {
.lovecupido-wrapper {
justify-content: center; /* Centraliza no mobile se preferir */
padding: 5px;
}
.lovecupido-bubble-final {
max-width: 90%; /* Em telas pequenas, usa mais espaço lateral */
margin-left: 15px;
font-size: 15px; /* Diminui a fonte para o texto não vazar */
padding: 18px 30px 18px 15px;
border-radius: 15px;
}
.txt-anim {
/* Garante que o texto não force o balão a sair da tela */
animation: typing-love 4s steps(30, end) infinite;
}
}
/* CELULARES MUITO PEQUENOS (iPhone SE, etc) */
@media (max-width: 375px) {
.lovecupido-bubble-final {
font-size: 13px;
padding: 15px 20px 15px 12px;
}
}
Que
tipo de presente vamos criar?
Presente de Amor
Para namorado(a) ou cônjuge
+ Retrospectiva Wrapped
Continuar
Mais popular
Presente para Amiga
Surpreenda sua melhor amiga
+ Retrospectiva Wrapped
Continuar
Ou homenageie diretamente:
Chefe