Tráfego Pago
... repita os itens 2x para loop contínuo ...
────────────────────────────────────────────────────────── */
.criei-ticker {
overflow: hidden;
white-space: nowrap;
padding: 16px 0;
background: rgba(0,201,167,0.05);
border-top: 1px solid var(--criei-border);
border-bottom: 1px solid var(--criei-border);
position: relative;
z-index: 1;
}
.criei-ticker-inner {
display: inline-flex;
gap: 60px;
animation: criei-ticker 28s linear infinite;
will-change: transform;
}
.criei-ticker-item {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--criei-mint);
display: inline-flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
.criei-ticker-item::after {
content: '✦';
color: rgba(0,201,167,0.35);
font-size: 0.55rem;
}
/* Pausar ticker ao hover */
.criei-ticker:hover .criei-ticker-inner {
animation-play-state: paused;
}
/* ──────────────────────────────────────────────────────────
10. CARDS DE SERVIÇO (hover com barra superior animada)
Aplique .criei-svc-card nos containers de card
────────────────────────────────────────────────────────── */
.criei-svc-card {
background: var(--criei-surface) !important;
border: 1px solid var(--criei-border) !important;
border-radius: 16px !important;
transition: all 0.4s ease !important;
position: relative !important;
overflow: hidden !important;
}
.criei-svc-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--criei-mint), var(--criei-blue));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
z-index: 2;
}
.criei-svc-card:hover {
border-color: rgba(0,201,167,0.4) !important;
transform: translateY(-6px) !important;
box-shadow: 0 24px 60px rgba(0,0,0,0.35) !important;
}
.criei-svc-card:hover::before {
transform: scaleX(1);
}
/* ──────────────────────────────────────────────────────────
11. CARDS GENÉRICOS (superfície escura com borda mint)
Aplique .criei-card nos containers
────────────────────────────────────────────────────────── */
.criei-card {
background: var(--criei-surface) !important;
border: 1px solid var(--criei-border) !important;
border-radius: 16px !important;
transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.criei-card:hover {
border-color: rgba(0,201,167,0.35) !important;
box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
}
/* Card dourado (para seção de oferta) */
.criei-card-gold {
background: var(--criei-surface) !important;
border: 1px solid rgba(255,201,74,0.3) !important;
border-radius: 20px !important;
}
/* ──────────────────────────────────────────────────────────
12. BOTÕES PERSONALIZADOS
────────────────────────────────────────────────────────── */
/* Botão principal mint */
.criei-btn-primary,
.criei-btn-primary .elementor-button {
background: linear-gradient(135deg, var(--criei-mint), var(--criei-mint-d)) !important;
color: var(--criei-navy) !important;
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 700 !important;
font-size: 1rem !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
border-radius: 6px !important;
padding: 14px 36px !important;
border: none !important;
box-shadow: 0 6px 24px rgba(0,201,167,0.25) !important;
transition: all 0.3s ease !important;
}
.criei-btn-primary:hover .elementor-button,
.criei-btn-primary .elementor-button:hover {
transform: translateY(-3px) !important;
box-shadow: 0 14px 40px rgba(0,201,167,0.45) !important;
background: var(--criei-mint-g) !important;
}
/* Botão outline */
.criei-btn-outline,
.criei-btn-outline .elementor-button {
background: transparent !important;
color: var(--criei-light) !important;
border: 1px solid var(--criei-border) !important;
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
border-radius: 6px !important;
transition: all 0.3s ease !important;
}
.criei-btn-outline:hover .elementor-button,
.criei-btn-outline .elementor-button:hover {
border-color: var(--criei-mint) !important;
color: var(--criei-mint) !important;
}
/* Botão dourado (oferta) */
.criei-btn-gold,
.criei-btn-gold .elementor-button {
background: linear-gradient(135deg, var(--criei-gold), #c97a00) !important;
color: var(--criei-navy) !important;
font-family: 'Barlow Condensed', sans-serif !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
border-radius: 8px !important;
box-shadow: 0 6px 24px rgba(255,201,74,0.3) !important;
transition: all 0.3s ease !important;
}
.criei-btn-gold:hover .elementor-button,
.criei-btn-gold .elementor-button:hover {
transform: translateY(-3px) !important;
box-shadow: 0 14px 36px rgba(255,201,74,0.5) !important;
}
/* ──────────────────────────────────────────────────────────
13. REVEAL — ANIMAÇÃO AO ENTRAR NA TELA
Adicione a classe CSS .criei-reveal nos widgets/seções
desejados via Elementor > Avançado > Classe CSS
────────────────────────────────────────────────────────── */
.criei-reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.criei-reveal.criei-visible {
opacity: 1;
transform: translateY(0);
}
/* Variações de direção */
.criei-reveal-left {
opacity: 0;
transform: translateX(-40px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.criei-reveal-left.criei-visible {
opacity: 1;
transform: translateX(0);
}
.criei-reveal-right {
opacity: 0;
transform: translateX(40px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.criei-reveal-right.criei-visible {
opacity: 1;
transform: translateX(0);
}
/* Delays escalonados (aplique também ao elemento) */
.criei-delay-1 { transition-delay: 0.1s !important; }
.criei-delay-2 { transition-delay: 0.22s !important; }
.criei-delay-3 { transition-delay: 0.34s !important; }
.criei-delay-4 { transition-delay: 0.46s !important; }
.criei-delay-5 { transition-delay: 0.58s !important; }
/* ──────────────────────────────────────────────────────────
14. NÚMEROS / CONTADORES
Aplique .criei-counter nos widgets Heading com números
────────────────────────────────────────────────────────── */
.criei-counter .elementor-heading-title {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: -0.03em !important;
color: var(--criei-gold) !important;
}
.criei-counter-mint .elementor-heading-title {
color: var(--criei-mint) !important;
}
/* ──────────────────────────────────────────────────────────
15. ORBS DE FUNDO (esferas de luz desfocadas)
Cole um widget HTML com: