/* ============================================================
SKE Importadora — effects.css v1.0
Consolidado de todos os efeitos visuais (Efeitos 1-12)
─────────────────────────────────────────────────────────────
Incluir no APÓS Bootstrap e style.css:
CDN adicional necessário (AOS):
Variáveis: todas definidas em style.css (:root)
Este arquivo referencia as variáveis via var(--xxx)
============================================================ */
/* ═══════════════════════════════════════════════════════════════
EFEITO 01 — HERO: VÍDEO, TYPEWRITER, SHIMMER, SCROLL
═══════════════════════════════════════════════════════════════ */
/* Vídeo como fundo fullscreen da seção hero */
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
/* Fallback estático (exibido quando vídeo falha) */
.hero-fallback {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
display: none;
}
/* Overlay gradiente sobre vídeo/imagem */
.hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(22, 32, 57, 0.97) 0%,
rgba(22, 32, 57, 0.85) 100%
);
z-index: 1;
pointer-events: none;
}
/* ── Cursor typewriter piscante em dourado ─────────────────── */
.tw-cursor {
display: inline-block;
color: #C4955A;
font-weight: 300;
margin-left: 2px;
opacity: 1;
}
.tw-cursor--blink {
animation: tw-pisca 0.8s step-end infinite;
}
@keyframes tw-pisca {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* ── Hero bottom (subtítulo + botões): aparecem juntos após typewriter ── */
.hero-bottom {
opacity: 0;
transform: translateY(12px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.hero-bottom--visivel {
opacity: 1;
transform: translateY(0);
}
/* ── CTA shimmer: brilho deslizando da esquerda para direita ── */
.btn-shimmer {
position: relative;
overflow: hidden;
}
.btn-shimmer::after {
content: '';
position: absolute;
top: 0;
left: -80%;
width: 60%;
height: 100%;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255, 255, 255, 0.25) 50%,
transparent 100%
);
animation: shimmer-deslizar 2.8s ease infinite;
pointer-events: none;
}
@keyframes shimmer-deslizar {
0% { left: -80%; }
60%, 100% { left: 140%; }
}
/* ── Scroll indicator: bounce suave ─────────────────────────── */
.hero-scroll {
animation: hero-bounce 2s ease-in-out infinite;
cursor: pointer;
transition: opacity 0.2s ease;
}
.hero-scroll:hover {
opacity: 0.7;
}
@keyframes hero-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(8px); }
}
/* ═══════════════════════════════════════════════════════════════
EFEITO 02 — PARTÍCULAS TSPARTICLES
═══════════════════════════════════════════════════════════════ */
/* Container das partículas (injetado via JS no hero) */
#hero-particulas {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
/* Canvas do tsParticles nunca captura cliques */
#hero-particulas canvas {
pointer-events: none !important;
}
@media (max-width: 767px) {
#hero-particulas {
display: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════
EFEITO 03 — CONTADORES ANIMADOS
═══════════════════════════════════════════════════════════════ */
/* Estado inicial: oculto e deslocado para baixo */
.impact-item {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Linha dourada decorativa de 3px acima do número */
.impact-item::before {
content: '';
display: block;
width: 0;
height: 3px;
background: #C4955A;
margin-bottom: 14px;
transition: width 0.6s ease 0.2s;
}
/* Quando ativado via JS (.contado) */
.impact-item.contado {
opacity: 1;
transform: translateY(0);
}
.impact-item.contado::before {
width: 40px;
}
/* Stagger: cada item atrasa 150ms a mais */
.impact-item:nth-child(1) { transition-delay: 0ms; }
.impact-item:nth-child(2) { transition-delay: 150ms; }
.impact-item:nth-child(3) { transition-delay: 300ms; }
.impact-item:nth-child(4) { transition-delay: 450ms; }
/* Sufixo (+, mil, %) em Barlow Condensed dourado */
.impact-sufixo {
font-family: 'Barlow Condensed', sans-serif;
color: #C4955A;
font-weight: 700;
font-size: 0.72em;
vertical-align: super;
line-height: 1;
}
/* ═══════════════════════════════════════════════════════════════
EFEITO 04 — PARALLAX
═══════════════════════════════════════════════════════════════ */
/* Elemento de fundo com parallax */
.parallax-bg {
will-change: transform;
backface-visibility: hidden;
transform-style: preserve-3d;
}
/* Seção com parallax: overflow hidden para não vazar */
.parallax-secao {
overflow: hidden;
position: relative;
}
/* ═══════════════════════════════════════════════════════════════
EFEITO 05 — AOS: ANIMAÇÕES DE ENTRADA
═══════════════════════════════════════════════════════════════ */
/* Animação customizada para a linha dourada (AOS não anima width) */
[data-aos="linha-dourada"] {
width: 0 !important;
transition-property: width !important;
}
[data-aos="linha-dourada"].aos-animate {
width: 40px !important;
}
/* Linha dourada base (use junto com data-aos="linha-dourada") */
.linha-gold {
width: 40px;
height: 3px;
background: #C4955A;
margin: 12px 0 0;
border-radius: 0; /* angular — identidade SKE */
}
.linha-gold--centro {
margin-left: auto;
margin-right: auto;
}
.linha-gold--longa {
width: 80px;
}
/* ═══════════════════════════════════════════════════════════════
EFEITO 06 — TILT 3D (VANILLA TILT)
═══════════════════════════════════════════════════════════════ */
/* Preparação para tilt 3D */
[data-tilt] {
transform-style: preserve-3d;
transform: perspective(1200px);
will-change: transform;
}
/* Hover: borda intensifica de #C4955A para #D4AA70 (via JS) */
.card-ske[data-tilt]:hover,
.card-produto[data-tilt]:hover,
.card-service[data-tilt]:hover {
border-color: #D4AA70;
}
/* Customiza o glare do VanillaTilt para dourado SKE */
.card-ske .vanilla-tilt-glare,
.card-produto .vanilla-tilt-glare,
.card-service .vanilla-tilt-glare {
background: radial-gradient(
circle at 50% 0%,
rgba(196, 149, 90, 0.15) 0%,
transparent 70%
) !important;
}
/* ═══════════════════════════════════════════════════════════════
EFEITO 07 — BOTÕES MAGNÉTICOS
═══════════════════════════════════════════════════════════════ */
/* Botão com efeito magnético: will-change para GPU */
.btn-magnetico,
.btn-ske-primary,
.whatsapp-float {
will-change: transform;
}
/* Texto interno com movimento independente */
.btn-texto {
display: inline-block;
will-change: transform;
}
/* ═══════════════════════════════════════════════════════════════
EFEITO 08 — GRADE GEOMÉTRICA ANIMADA
═══════════════════════════════════════════════════════════════ */
.fundo-grade {
position: relative;
overflow: hidden;
}
.fundo-grade::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(45deg, rgba(196, 149, 90, 0.06) 1px, transparent 1px),
linear-gradient(-45deg, rgba(196, 149, 90, 0.06) 1px, transparent 1px);
background-size: 60px 60px;
animation: grade-mover 25s linear infinite;
pointer-events: none;
z-index: 0;
}
.fundo-grade > .container-ske,
.fundo-grade > .container,
.fundo-grade > [class*="container"],
.fundo-grade > .geo-bg {
position: relative;
z-index: 1;
}
@keyframes grade-mover {
to { background-position: 60px 60px; }
}
/* ═══════════════════════════════════════════════════════════════
EFEITO 09 — SEPARADORES DIAGONAIS
═══════════════════════════════════════════════════════════════ */
.secao-diagonal {
clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
padding-bottom: calc(8vw + 40px);
}
.secao-diagonal-inv {
clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 100%);
padding-top: calc(4vw + 40px);
}
.secao-diagonal-dupla {
clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
padding-top: calc(5vw + 40px);
padding-bottom: calc(5vw + 40px);
}
/* SVG separadores */
.sep-svg {
display: block;
width: 100%;
height: 60px;
margin: -1px 0;
overflow: visible;
}
.sep-svg--alto { height: 80px; }
.sep-svg--baixo { height: 40px; }
/* Linha dourada horizontal entre seções */
.sep-linha-dourada {
width: 100%;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(196, 149, 90, 0.3) 20%,
rgba(196, 149, 90, 0.3) 80%,
transparent 100%
);
border: none;
margin: 0;
}
/* ═══════════════════════════════════════════════════════════════
EFEITO 10 — CARROSSEL INFINITO DE PARCEIROS
═══════════════════════════════════════════════════════════════ */
.parceiros-secao {
background: #0D1626;
padding: 48px 0;
overflow: hidden;
}
.parceiros-titulo {
text-align: center;
font-family: 'Barlow Condensed', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
margin-bottom: 32px;
}
.logos-wrapper {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.logos-track {
display: flex;
align-items: center;
width: max-content;
animation: scroll-logos 28s linear infinite;
}
.logos-wrapper:hover .logos-track {
animation-play-state: paused;
}
@keyframes scroll-logos {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.logos-item {
flex-shrink: 0;
padding: 0 36px;
display: flex;
align-items: center;
justify-content: center;
}
.logos-item img {
height: 36px;
width: auto;
max-width: 120px;
object-fit: contain;
filter: grayscale(1) brightness(1.8);
opacity: 0.65;
transition: filter 0.4s ease, opacity 0.4s ease;
display: block;
}
.logos-item:hover img {
filter: grayscale(0) brightness(1);
opacity: 1;
}
.logos-sep {
flex-shrink: 0;
width: 1px;
height: 28px;
background: rgba(196, 149, 90, 0.2);
align-self: center;
}
/* ═══════════════════════════════════════════════════════════════
EFEITO 11 — LOADING SCREEN
═══════════════════════════════════════════════════════════════ */
#ske-loading {
position: fixed;
inset: 0;
z-index: 99999;
background: #162039;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
transition: opacity 0.4s ease;
}
#ske-loading .loading-logo {
width: 180px;
max-width: 60vw;
height: auto;
opacity: 0;
transform: scale(0.95);
animation: loading-logo-aparecer 0.5s ease 0.1s forwards;
}
#ske-loading .loading-linha {
width: 0;
height: 2px;
background: #C4955A;
margin-top: 16px;
animation: loading-linha-crescer 0.4s ease 0.4s forwards;
}
@keyframes loading-logo-aparecer {
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes loading-linha-crescer {
to { width: 180px; }
}
/* Fade-out: classe .saindo adicionada via JS */
#ske-loading.saindo {
opacity: 0;
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════
EFEITO 12 — NAVBAR APRIMORADA
═══════════════════════════════════════════════════════════════ */
/* Navbar: sólido em ambos os estados — evita visual de "faixa" */
#navbar {
background: var(--bg-footer);
transition:
background 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease;
}
/* Estado após 80px de scroll */
#navbar.scrolled {
background: var(--bg-footer);
border-bottom: 1px solid rgba(196, 149, 90, 0.3);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
/* Link ativo por seção (classe .secao-ativa adicionada pelo efeito-12-navbar.js) */
.navbar-links a.secao-ativa {
color: #C4955A !important;
position: relative;
}
.navbar-links a.secao-ativa::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: #C4955A;
border-radius: 0;
}
/* Menu mobile aberto: sidebar com fundo #0D1626 */
@media (max-width: 991px) {
.navbar-links.open {
background: #0D1626 !important;
border-top: 1px solid rgba(196, 149, 90, 0.15);
}
/* Links no sidebar em Bebas Neue grande */
.navbar-links.open a {
font-family: 'Bebas Neue', sans-serif !important;
font-size: 28px !important;
letter-spacing: 0.06em;
padding: 12px 24px !important;
display: block;
}
}
/* ═══════════════════════════════════════════════════════════════
ACESSIBILIDADE — prefers-reduced-motion
═══════════════════════════════════════════════════════════════
Remove todas as animações para usuários que preferem sem movimento.
Mantém apenas transições de estado essenciais (hover, active).
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
/* Typewriter */
.tw-cursor--blink { animation: none !important; }
/* Subtítulo: visível imediatamente */
[data-hero-subtitle] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* CTA shimmer */
.btn-shimmer::after { display: none !important; }
/* Scroll indicator */
.hero-scroll { animation: none !important; }
/* Contadores: visíveis imediatamente */
.impact-item {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.impact-item::before {
width: 40px !important;
transition: none !important;
}
/* Grade geométrica */
.fundo-grade::before { animation: none !important; }
/* Carrossel */
.logos-track { animation: none !important; }
/* Loading screen */
#ske-loading .loading-logo { animation: none !important; opacity: 1 !important; transform: none !important; }
#ske-loading .loading-linha { animation: none !important; width: 180px !important; }
}
/* ═══════════════════════════════════════════════════════════════
PERFORMANCE MOBILE (max-width: 767px)
Desativa ou reduz efeitos pesados em telas pequenas
═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* Grade: animação mais lenta para economizar bateria */
.fundo-grade::before { animation-duration: 45s; }
/* Carrossel: mais rápido para parecer fluido em tela menor */
.logos-track { animation-duration: 18s; }
.logos-item { padding: 0 20px; }
.logos-item img { height: 28px; }
/* Parallax: desativado (via JS, mas garante via CSS também) */
.parallax-bg { transform: none !important; }
/* Tilt: desativado via JS, mas garante pelo CSS */
[data-tilt] { transform: none !important; }
}