/* ==========================================================================
ShopFlix Templates - ALIEN THEME Complete Redesign
========================================================================== */
/* Import Alien Font */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&display=swap');
/* Root Variables - ALIEN THEME */
:root {
/* Alien Colors */
--alien-green: #00ff88;
--alien-blue: #00d4ff;
--alien-purple: #8a2be2;
--alien-pink: #ff006e;
--neon-green: #39ff14;
--neon-cyan: #00ffff;
--neon-purple: #bf00ff;
--plasma-blue: #0080ff;
/* Dark Space Colors - Enhanced for Galaxy Effect */
--dark-space: #000002;
--dark-nebula: #0a0a0f;
--dark-void: #050508;
--space-black: #000000;
--cosmic-gray: #0d0d12;
--deep-purple: #1a0b2e;
/* Light Colors */
--white-alien: #e8f5e8;
--white-glow: #f0fff0;
--gray-alien: #7dd3fc;
--gray-medium: #475569;
--gray-dark: #1e293b;
/* Special Effects */
--ufo-silver: rgba(192, 192, 192, 0.3);
--alien-glass: rgba(0, 255, 136, 0.1);
--alien-glass-strong: rgba(0, 255, 136, 0.2);
--holographic-alien: linear-gradient(45deg, #00ff88, #00d4ff, #8a2be2, #ff006e);
/* Typography */
--font-primary: 'Orbitron', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 800;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--spacing-xxl: 4rem;
/* Borders */
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 12px;
--border-radius-xl: 16px;
/* Transitions */
--transition-fast: 0.2s ease-in-out;
--transition-medium: 0.3s ease-in-out;
--transition-slow: 0.5s ease-in-out;
/* Alien Shadows */
--shadow-sm: 0 2px 8px rgba(0, 255, 136, 0.2);
--shadow-md: 0 4px 16px rgba(0, 255, 136, 0.3);
--shadow-lg: 0 8px 32px rgba(0, 255, 136, 0.4);
--shadow-xl: 0 16px 64px rgba(0, 255, 136, 0.5);
--shadow-neon: 0 0 30px rgba(0, 255, 136, 0.8);
--shadow-glass: 0 8px 32px rgba(0, 212, 255, 0.3);
--shadow-holographic: 0 0 40px rgba(138, 43, 226, 0.6);
--shadow-ufo: 0 0 50px rgba(0, 255, 255, 0.7);
}
/* Reset and Base Styles - ALIEN */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
max-width: 100%;
cursor: url('data:image/svg+xml,') 16 16, auto;
}
html {
scroll-behavior: smooth;
font-size: 16px;
overflow-x: hidden;
max-width: 100vw;
}
body {
font-family: var(--font-primary);
line-height: 1.6;
color: var(--white-alien);
background: var(--space-black);
overflow-x: hidden;
min-height: 100vh;
position: relative;
max-width: 100vw;
box-sizing: border-box;
}
/* Remove all background effects */
body::before,
body::after {
display: none !important;
}
/* Remove all section background effects */
.hero::before,
.hero::after,
.features::before,
.features::after,
.cta-section::before,
.cta-section::after,
.footer::before,
.footer::after {
display: none !important;
}
/* Enhanced body with animated galaxy background */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
/* Galáxias em movimento mais visíveis */
radial-gradient(ellipse 1200px 600px at 30% 30%,
rgba(75, 0, 130, 0.12) 0%,
rgba(138, 43, 226, 0.08) 30%,
rgba(25, 25, 112, 0.04) 60%,
transparent 90%),
radial-gradient(ellipse 1000px 500px at 70% 70%,
rgba(0, 150, 75, 0.10) 0%,
rgba(0, 255, 136, 0.06) 40%,
rgba(0, 100, 50, 0.03) 70%,
transparent 95%),
radial-gradient(ellipse 800px 400px at 50% 20%,
rgba(0, 150, 200, 0.08) 0%,
rgba(0, 212, 255, 0.05) 50%,
rgba(0, 100, 150, 0.02) 80%,
transparent 100%),
/* Poeira cósmica brilhante */
linear-gradient(45deg,
transparent 0%,
rgba(255, 255, 255, 0.02) 20%,
rgba(0, 255, 136, 0.03) 40%,
rgba(138, 43, 226, 0.02) 60%,
rgba(0, 212, 255, 0.02) 80%,
transparent 100%);
animation: galaxyRotation 45s linear infinite;
z-index: -1;
}
@keyframes galaxyRotation {
0% {
opacity: 0.8;
transform: scale(1) rotate(0deg);
}
25% {
opacity: 0.6;
transform: scale(1.02) rotate(90deg);
}
50% {
opacity: 0.9;
transform: scale(1.05) rotate(180deg);
}
75% {
opacity: 0.7;
transform: scale(1.01) rotate(270deg);
}
100% {
opacity: 0.8;
transform: scale(1) rotate(360deg);
}
}
/* UFO Particles Animation */
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
/* Galáxias distantes adicionais */
radial-gradient(ellipse 300px 150px at 10% 20%,
rgba(255, 0, 110, 0.03) 0%,
rgba(139, 0, 69, 0.015) 70%,
transparent 100%),
radial-gradient(ellipse 400px 200px at 90% 80%,
rgba(0, 255, 136, 0.025) 0%,
rgba(0, 128, 64, 0.012) 60%,
transparent 95%),
radial-gradient(ellipse 250px 125px at 60% 90%,
rgba(138, 43, 226, 0.02) 0%,
rgba(75, 0, 130, 0.01) 80%,
transparent 100%),
/* Twinkling stars effect */
radial-gradient(1px 1px at 18% 32%, var(--white-glow), transparent),
radial-gradient(0.8px 0.8px at 32% 68%, var(--alien-green), transparent),
radial-gradient(1.2px 1.2px at 48% 18%, var(--alien-blue), transparent),
radial-gradient(0.6px 0.6px at 68% 82%, var(--alien-pink), transparent),
radial-gradient(1px 1px at 82% 48%, var(--alien-purple), transparent),
radial-gradient(0.9px 0.9px at 92% 12%, var(--neon-cyan), transparent);
animation: twinkleStars 8s ease-in-out infinite alternate;
z-index: -2;
}
@keyframes twinkleStars {
0% {
opacity: 0.4;
transform: scale(0.8);
}
50% {
opacity: 0.8;
transform: scale(1.1);
}
100% {
opacity: 0.6;
transform: scale(0.9);
}
}
/* UFO Particles Animation */
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
/* Galáxias distantes mais brilhantes */
radial-gradient(ellipse 500px 250px at 15% 25%,
rgba(255, 0, 110, 0.08) 0%,
rgba(200, 0, 80, 0.05) 50%,
rgba(139, 0, 69, 0.03) 80%,
transparent 100%),
radial-gradient(ellipse 600px 300px at 85% 75%,
rgba(0, 255, 136, 0.06) 0%,
rgba(0, 150, 75, 0.04) 40%,
rgba(0, 128, 64, 0.02) 70%,
transparent 100%),
radial-gradient(ellipse 400px 200px at 55% 85%,
rgba(138, 43, 226, 0.05) 0%,
rgba(100, 20, 180, 0.03) 60%,
rgba(75, 0, 130, 0.02) 90%,
transparent 100%),
/* Galáxia espiral adicional */
radial-gradient(ellipse 700px 350px at 5% 50%,
rgba(0, 212, 255, 0.04) 0%,
rgba(0, 150, 200, 0.02) 70%,
transparent 100%),
/* UFO Elements mais visíveis */
url('data:image/svg+xml,') 10% 20%,
url('data:image/svg+xml,') 80% 70%,
url('data:image/svg+xml,') 30% 80%;
background-size:
600px 300px,
700px 350px,
500px 250px,
800px 400px,
120px 120px,
100px 100px,
80px 80px;
animation: galaxyTwinkle 12s ease-in-out infinite;
pointer-events: none;
z-index: -2;
}
@keyframes galaxyTwinkle {
0% { opacity: 0.6; transform: scale(1); }
50% { opacity: 0.9; transform: scale(1.02); }
100% { opacity: 0.6; transform: scale(1); }
}
@keyframes ufoFloat {
0% { transform: translateX(-100px) translateY(-50px); }
25% { transform: translateX(50px) translateY(-20px); }
50% { transform: translateX(-30px) translateY(-80px); }
75% { transform: translateX(30px) translateY(-40px); }
100% { transform: translateX(-100px) translateY(-50px); }
}
/* Typography - ALIEN ENHANCED */
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-weight-bold);
line-height: 1.2;
margin-bottom: var(--spacing-sm);
color: var(--white-alien);
text-shadow: 0 0 20px var(--alien-green);
letter-spacing: 1px;
}
h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: var(--font-weight-black);
background: var(--holographic-alien);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: holographicGlow 3s ease-in-out infinite;
}
@keyframes holographicGlow {
0%, 100% { filter: brightness(1) hue-rotate(0deg); }
25% { filter: brightness(1.2) hue-rotate(90deg); }
50% { filter: brightness(1.4) hue-rotate(180deg); }
75% { filter: brightness(1.2) hue-rotate(270deg); }
}
h2 {
font-size: clamp(2rem, 4vw, 3rem);
color: var(--alien-green);
text-shadow: 0 0 30px var(--alien-green);
}
h3 {
font-size: clamp(1.5rem, 3vw, 2.5rem);
color: var(--alien-blue);
text-shadow: 0 0 25px var(--alien-blue);
}
p {
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: var(--spacing-md);
color: var(--white-glow);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
/* ========================================================================
LOADING SCREEN - ALIEN ENHANCED
======================================================================== */
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at center, var(--dark-nebula) 0%, var(--dark-space) 100%),
url('data:image/svg+xml,');
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loading-screen.hidden {
opacity: 0;
visibility: hidden;
}
.loading-content {
text-align: center;
max-width: 400px;
padding: 2rem;
position: relative;
}
.loading-logo {
position: relative;
margin-bottom: 3rem;
}
.loading-logo-img {
height: 80px;
width: auto;
filter: drop-shadow(0 0 30px var(--alien-green)) drop-shadow(0 0 50px var(--alien-blue));
animation: alienHolographicShimmer 3s ease-in-out infinite;
transition: all 0.3s ease;
}
.loading-logo h1 {
font-size: 3rem;
font-weight: var(--font-weight-black);
background: var(--holographic-alien);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: alienHolographicShimmer 3s ease-in-out infinite;
position: relative;
text-shadow: 0 0 30px var(--alien-green);
letter-spacing: 2px;
}
.loading-logo span {
color: var(--alien-green);
text-shadow: 0 0 40px var(--alien-green), 0 0 60px var(--alien-blue);
}
@keyframes alienHolographicShimmer {
0%, 100% { filter: hue-rotate(0deg) brightness(1); }
25% { filter: hue-rotate(90deg) brightness(1.2); }
50% { filter: hue-rotate(180deg) brightness(1.4); }
75% { filter: hue-rotate(270deg) brightness(1.2); }
}
.loading-spinner {
width: 120px;
height: 120px;
border: 3px solid var(--alien-glass);
border-top: 3px solid var(--alien-green);
border-right: 3px solid var(--alien-blue);
border-radius: 50%;
animation: alienSpin 2s linear infinite;
margin: 2rem auto; /* Adicionado 'auto' para centralizar horizontalmente */
position: relative;
box-shadow:
0 0 40px var(--alien-green),
inset 0 0 20px var(--alien-blue);
}
.loading-spinner::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border: 2px solid var(--alien-purple);
border-radius: 50%;
animation: alienSpinReverse 1.5s linear infinite;
}
.loading-spinner::after {
content: '👽';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
animation: alienFloat 3s ease-in-out infinite;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
line-height: 1;
}
@keyframes alienSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes alienSpinReverse {
0% { transform: translate(-50%, -50%) rotate(360deg); }
100% { transform: translate(-50%, -50%) rotate(0deg); }
}
@keyframes alienFloat {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -50%) scale(1.2);
}
}
.loading-text {
color: var(--alien-green);
font-size: 1.5rem;
font-weight: var(--font-weight-bold);
animation: alienTextGlow 2s ease-in-out infinite;
text-shadow: 0 0 20px var(--alien-green);
letter-spacing: 2px;
margin-top: 1rem;
}
@keyframes alienTextGlow {
0%, 100% {
opacity: 0.8;
text-shadow: 0 0 20px var(--alien-green);
}
50% {
opacity: 1;
text-shadow: 0 0 40px var(--alien-green), 0 0 60px var(--alien-blue);
}
}
/* ========================================================================
CINEMATIC HERO STYLES
======================================================================== */
/* Cinematic Background Effects */
.cinematic-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.cosmic-rays {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 30%, rgba(0, 255, 136, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(255, 0, 110, 0.1) 0%, transparent 50%);
animation: cosmicPulse 4s ease-in-out infinite;
}
.planet-glow {
position: absolute;
top: 10%;
right: 10%;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 255, 136, 0.2) 0%, rgba(0, 212, 255, 0.1) 40%, transparent 70%);
animation: planetRotation 20s linear infinite;
filter: blur(2px);
}
.asteroid-field {
position: absolute;
width: 100%;
height: 100%;
}
.asteroid-field::before,
.asteroid-field::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: var(--alien-green);
border-radius: 50%;
box-shadow:
20px 30px 0 rgba(0, 255, 136, 0.8),
40px 70px 0 rgba(0, 212, 255, 0.6),
60px 20px 0 rgba(255, 0, 110, 0.7),
80px 90px 0 rgba(0, 255, 136, 0.5),
120px 40px 0 rgba(0, 212, 255, 0.8),
160px 80px 0 rgba(255, 0, 110, 0.6);
animation: starTwinkle 3s ease-in-out infinite;
}
/* Cinematic Title */
.cinematic-title {
position: relative;
margin-bottom: 2rem;
z-index: 10;
}
.hero-title.typewriter {
font-size: clamp(3rem, 8vw, 8rem);
font-weight: 900;
line-height: 0.9;
text-align: center;
margin-bottom: 1rem;
font-family: 'Orbitron', monospace;
}
.hero-title .line-1,
.hero-title .line-2,
.hero-title .line-3 {
display: block;
background: linear-gradient(45deg, var(--alien-green), var(--alien-blue), var(--alien-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 40px rgba(0, 255, 136, 0.5);
animation: cinematicGlow 3s ease-in-out infinite;
}
.hero-title .line-1 { animation-delay: 0s; }
.hero-title .line-2 { animation-delay: 0.5s; }
.hero-title .line-3 { animation-delay: 1s; }
.title-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
background: radial-gradient(ellipse, rgba(0, 255, 136, 0.3) 0%, transparent 70%);
animation: titlePulse 4s ease-in-out infinite;
z-index: -1;
}
/* Glitch Text Effect */
.glitch-text {
font-size: 1.5rem;
font-weight: bold;
color: var(--alien-green);
text-align: center;
margin-bottom: 2rem;
position: relative;
animation: glitchEffect 3s infinite;
}
/* Urgency Timer */
.urgency-timer {
text-align: center;
margin-bottom: 3rem;
z-index: 10;
position: relative;
}
.timer-label {
color: var(--alien-red);
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 1rem;
animation: urgentFlash 1s ease-in-out infinite;
}
.countdown {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
}
.time-unit {
text-align: center;
background: rgba(0, 0, 0, 0.8);
border: 2px solid var(--alien-green);
border-radius: 10px;
padding: 1rem;
min-width: 80px;
position: relative;
overflow: hidden;
}
.time-unit::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 255, 136, 0.2), transparent);
animation: scanLine 2s infinite;
}
.time-number {
display: block;
font-size: 2.5rem;
font-weight: 900;
color: var(--alien-green);
font-family: 'Orbitron', monospace;
}
.time-label {
display: block;
font-size: 0.8rem;
color: var(--white-alien);
margin-top: 0.5rem;
}
/* Package Preview Cards */
.packages-preview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
z-index: 10;
position: relative;
}
.package-card {
background: rgba(0, 0, 0, 0.9);
border: 2px solid var(--alien-glass);
border-radius: 20px;
padding: 2rem;
text-align: center;
position: relative;
transition: all 0.3s ease;
overflow: hidden;
}
.package-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, var(--alien-green), var(--alien-blue), var(--alien-purple));
border-radius: 20px;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.package-card:hover::before {
opacity: 1;
}
.package-card.featured {
transform: scale(1.05);
border-color: var(--alien-green);
box-shadow: 0 10px 40px rgba(0, 255, 136, 0.3);
}
.package-card.premium {
border-color: var(--alien-purple);
}
.package-badge {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(45deg, var(--alien-green), var(--alien-blue));
color: var(--dark-space);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: bold;
}
.package-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.package-card h3 {
font-size: 1.5rem;
color: var(--white-alien);
margin-bottom: 1rem;
font-family: 'Orbitron', monospace;
}
.package-price {
margin-bottom: 1.5rem;
}
.old-price {
text-decoration: line-through;
color: var(--alien-red);
font-size: 1.2rem;
margin-right: 1rem;
}
.new-price {
color: var(--alien-green);
font-size: 2rem;
font-weight: bold;
font-family: 'Orbitron', monospace;
}
.package-features {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.package-features span {
color: var(--white-alien);
font-size: 0.9rem;
}
/* Cinematic CTA */
.cinematic-cta {
text-align: center;
z-index: 10;
position: relative;
}
.alien-btn-massive {
display: inline-flex;
flex-direction: column;
align-items: center;
background: linear-gradient(45deg, var(--alien-green), var(--alien-blue));
color: var(--dark-space);
padding: 2rem 3rem;
border-radius: 20px;
text-decoration: none;
font-weight: bold;
font-size: 1.5rem;
margin-bottom: 1rem;
position: relative;
overflow: hidden;
transform: perspective(1000px) rotateX(5deg);
box-shadow: 0 15px 50px rgba(0, 255, 136, 0.4);
}
.alien-btn-massive::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.alien-btn-massive:hover::before {
left: 100%;
}
.btn-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.btn-text {
font-family: 'Orbitron', monospace;
letter-spacing: 2px;
}
.btn-subtitle {
font-size: 0.9rem;
opacity: 0.8;
margin-top: 0.5rem;
}
.pulse-effect {
animation: massivePulse 2s ease-in-out infinite;
}
.cta-warning {
color: var(--alien-red);
font-size: 1rem;
font-weight: bold;
animation: urgentFlash 1.5s ease-in-out infinite;
}
/* Holographic Display */
.holographic-display {
position: absolute;
bottom: 10%;
right: 5%;
width: 200px;
height: 200px;
z-index: 5;
}
.holo-rings {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid var(--alien-blue);
border-radius: 50%;
opacity: 0.6;
animation: holoRotation 10s linear infinite;
}
.holo-rings::before,
.holo-rings::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid var(--alien-green);
border-radius: 50%;
animation: holoRotation 8s linear infinite reverse;
}
.holo-rings::before {
width: 80%;
height: 80%;
}
.holo-rings::after {
width: 60%;
height: 60%;
}
/* Keyframes para as animações cinematográficas */
@keyframes cosmicPulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.7; }
}
@keyframes planetRotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes starTwinkle {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
@keyframes cinematicGlow {
0%, 100% {
text-shadow: 0 0 40px rgba(0, 255, 136, 0.5);
filter: brightness(1);
}
50% {
text-shadow: 0 0 80px rgba(0, 255, 136, 0.8), 0 0 120px rgba(0, 212, 255, 0.6);
filter: brightness(1.2);
}
}
@keyframes titlePulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.6; }
}
@keyframes glitchEffect {
0%, 100% { transform: translateX(0); }
10% { transform: translateX(-2px); }
20% { transform: translateX(2px); }
30% { transform: translateX(-2px); }
40% { transform: translateX(2px); }
50% { transform: translateX(0); }
}
@keyframes urgentFlash {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
@keyframes scanLine {
0% { left: -100%; }
100% { left: 100%; }
}
@keyframes massivePulse {
0%, 100% { transform: perspective(1000px) rotateX(5deg) scale(1); }
50% { transform: perspective(1000px) rotateX(5deg) scale(1.05); }
}
@keyframes holoRotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ========================================================================
TEMPLATES SHOWCASE IN HERO
======================================================================== */
.templates-showcase {
margin: 3rem 0;
z-index: 10;
position: relative;
}
.showcase-title {
text-align: center;
margin-bottom: 2rem;
}
.showcase-title h2 {
font-size: clamp(2rem, 5vw, 3rem);
font-family: 'Orbitron', monospace;
font-weight: 900;
background: linear-gradient(45deg, var(--alien-green), var(--alien-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
animation: cinematicGlow 3s ease-in-out infinite;
}
.showcase-title p {
color: var(--white-alien);
font-size: 1.2rem;
opacity: 0.9;
margin-bottom: 1.5rem;
}
/* Template Count Highlight */
.template-count-highlight {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 2rem 0;
padding: 1.5rem 2rem;
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.85) 0%,
rgba(20, 20, 40, 0.9) 50%,
rgba(0, 0, 0, 0.85) 100%);
border: 2px solid var(--alien-green);
border-radius: 20px;
backdrop-filter: blur(15px);
overflow: hidden;
animation: countHighlight 3s ease-in-out infinite;
box-shadow:
0 10px 30px rgba(0, 255, 136, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.template-count-highlight::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, var(--alien-green), var(--alien-blue), var(--alien-purple), var(--alien-green));
border-radius: 20px;
z-index: -1;
animation: borderRotate 4s linear infinite;
}
.count-badge {
color: #ffffff;
font-size: 1.1rem;
font-weight: bold;
font-family: 'Orbitron', monospace;
letter-spacing: 1px;
text-shadow:
0 0 10px rgba(0, 255, 136, 0.8),
0 2px 4px rgba(0, 0, 0, 0.7);
}
.count-number {
font-size: clamp(3rem, 8vw, 5rem);
font-weight: 900;
font-family: 'Orbitron', monospace;
color: #ffffff;
text-shadow:
0 0 20px var(--alien-green),
0 0 40px var(--alien-green),
0 2px 8px rgba(0, 0, 0, 0.8);
animation: numberPulse 2s ease-in-out infinite;
position: relative;
-webkit-text-stroke: 1px rgba(0, 255, 136, 0.5);
}
.count-number::after {
content: '300';
position: absolute;
top: 0;
left: 0;
background: linear-gradient(45deg, var(--alien-red), var(--alien-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
opacity: 0;
animation: numberGlitch 3s ease-in-out infinite;
}
.count-label {
color: #ffffff;
font-size: 1.1rem;
font-weight: bold;
font-family: 'Orbitron', monospace;
letter-spacing: 2px;
text-shadow:
0 0 10px rgba(0, 212, 255, 0.8),
0 2px 4px rgba(0, 0, 0, 0.7);
}
.count-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
background: radial-gradient(ellipse, rgba(0, 255, 136, 0.3) 0%, transparent 70%);
border-radius: 50%;
animation: glowPulse 2.5s ease-in-out infinite;
z-index: -1;
}
/* Keyframes para as animações do contador */
@keyframes countHighlight {
0%, 100% {
box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
transform: scale(1);
}
50% {
box-shadow: 0 0 40px rgba(0, 255, 136, 0.8);
transform: scale(1.02);
}
}
@keyframes borderRotate {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes numberPulse {
0%, 100% {
transform: scale(1);
filter: brightness(1);
}
50% {
transform: scale(1.1);
filter: brightness(1.3);
}
}
@keyframes numberGlitch {
0%, 95%, 100% { opacity: 0; }
96%, 99% { opacity: 0.8; }
}
@keyframes glowPulse {
0%, 100% {
opacity: 0.3;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.7;
transform: translate(-50%, -50%) scale(1.2);
}
}
/* Override carousel styles for hero section */
.templates-showcase .netflix-carousel {
margin: 0;
padding: 0;
}
.templates-showcase .carousel-container {
position: relative;
overflow: hidden;
border-radius: 15px;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
border: 1px solid var(--alien-glass);
box-shadow: 0 10px 40px rgba(0, 255, 136, 0.2);
}
.templates-showcase .price-badge {
background: linear-gradient(45deg, var(--alien-red), var(--alien-purple));
animation: priceGlow 2s ease-in-out infinite;
}
@keyframes priceGlow {
0%, 100% {
box-shadow: 0 0 10px rgba(255, 0, 110, 0.5);
}
50% {
box-shadow: 0 0 20px rgba(255, 0, 110, 0.8);
}
}
/* ========================================================================
ICON FIXES - FontAwesome Visibility
======================================================================== */
/* Ensure FontAwesome icons are always visible */
.fas, .far, .fab, .fal, .fad {
color: inherit !important;
-webkit-text-fill-color: currentColor !important;
background-clip: initial !important;
-webkit-background-clip: initial !important;
text-shadow: none !important;
}
/* Specific fixes for carousel navigation icons */
.carousel-nav i {
color: var(--alien-green) !important;
-webkit-text-fill-color: var(--alien-green) !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
display: inline-block !important;
font-style: normal !important;
font-variant: normal !important;
text-rendering: auto !important;
line-height: 1 !important;
}
.carousel-nav:hover i {
color: var(--dark-space) !important;
-webkit-text-fill-color: var(--dark-space) !important;
}
/* Button icons fix */
.btn-play i, .btn-info i {
color: currentColor !important;
-webkit-text-fill-color: currentColor !important;
margin-right: 0.5rem;
}
/* General icon container fix */
button i, a i {
color: inherit !important;
-webkit-text-fill-color: inherit !important;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
}
/* ========================================================================
MOBILE OPTIMIZATIONS - COMPREHENSIVE + ENHANCED
======================================================================== */
/* Base mobile styles */
@media (max-width: 768px) {
/* Prevent horizontal overflow */
html {
overflow-x: hidden;
max-width: 100vw;
}
body {
overflow-x: hidden;
max-width: 100vw;
font-size: 14px; /* Base font size for mobile */
position: relative;
}
/* Global box-sizing fix */
* {
box-sizing: border-box;
}
/* Container adjustments */
.hero-container,
.nav-container {
max-width: 100%;
padding: 0 1rem;
margin: 0 auto;
}
/* Container universal */
.container {
padding: 0 1rem;
max-width: 100%;
}
/* Header optimizations */
.header {
top: 10px;
width: calc(100% - 20px);
max-width: calc(100vw - 20px);
left: 10px;
right: 10px;
border-radius: 15px;
margin: 0;
}
.nav-container {
padding: 0 1rem;
height: 50px;
justify-content: space-between;
}
.logo {
font-size: 1.2rem;
max-width: 100px;
width: auto;
height: 35px;
flex-shrink: 0;
}
.logo-img {
height: 100%;
max-height: 35px;
max-width: 100px;
width: auto;
}
/* Hero section mobile */
.hero {
padding-top: 80px;
min-height: 100vh;
padding-bottom: 2rem;
overflow: hidden;
width: 100%;
max-width: 100vw;
position: relative;
}
.hero-container {
width: 100%;
max-width: 100%;
padding: 0 var(--spacing-sm);
text-align: center;
position: relative;
z-index: 2;
overflow: hidden;
box-sizing: border-box;
}
/* Cinematic title mobile */
.cinematic-title {
position: relative;
margin-bottom: 1.5rem;
width: 100%;
overflow: hidden;
}
.hero-title {
font-size: clamp(1.8rem, 8vw, 3rem) !important;
line-height: 1.1 !important;
margin-bottom: 1rem;
padding: 0;
word-break: break-word;
hyphens: auto;
width: 100%;
text-align: center;
overflow-wrap: break-word;
letter-spacing: 1px;
}
.hero-title .line-1,
.hero-title .line-2,
.hero-title .line-3 {
display: block;
width: 100%;
word-break: break-word;
font-size: clamp(1.8rem, 8vw, 3rem);
line-height: 1.1;
margin: 0.2rem 0;
text-align: center;
}
.hero-subtitle {
font-size: clamp(0.8rem, 3.5vw, 1rem) !important;
padding: 0 0.5rem;
margin-bottom: 1.5rem;
line-height: 1.4;
word-break: break-word;
width: 100%;
text-align: center;
overflow-wrap: break-word;
box-sizing: border-box;
}
/* Countdown timer mobile */
.urgency-timer {
margin: 1.5rem auto;
padding: 0.5rem;
max-width: 100%;
overflow: hidden;
width: 100%;
box-sizing: border-box;
}
.timer-label {
font-size: clamp(0.7rem, 3vw, 0.9rem) !important;
margin-bottom: 1rem;
padding: 0 0.5rem;
word-break: break-word;
text-align: center;
line-height: 1.3;
overflow-wrap: break-word;
box-sizing: border-box;
}
.countdown {
display: flex;
justify-content: center;
align-items: center;
gap: 0.3rem;
flex-wrap: nowrap;
padding: 0 0.5rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.time-unit {
min-width: 60px;
max-width: 70px;
width: 60px;
padding: 0.6rem 0.3rem;
flex: 0 0 auto;
margin: 0.1rem;
border-radius: 8px;
box-sizing: border-box;
}
.time-number {
font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
line-height: 1;
display: block;
width: 100%;
text-align: center;
}
.time-label {
font-size: clamp(0.5rem, 2vw, 0.7rem) !important;
margin-top: 0.2rem;
display: block;
width: 100%;
text-align: center;
line-height: 1;
word-break: break-word;
}
/* Templates showcase mobile */
.templates-showcase {
margin: 2rem 0;
padding: 0 1rem;
}
.showcase-title {
padding: 0;
margin-bottom: 1.5rem;
}
.showcase-title h2 {
font-size: clamp(1.5rem, 6vw, 2rem);
margin-bottom: 0.75rem;
line-height: 1.3;
word-break: break-word;
}
.showcase-title p {
font-size: clamp(0.9rem, 3.5vw, 1rem);
line-height: 1.4;
word-break: break-word;
}
/* Template count highlight mobile */
.template-count-highlight {
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
margin: 1.5rem auto;
max-width: calc(100% - 2rem);
border-radius: 15px;
}
.count-badge,
.count-label {
font-size: clamp(0.8rem, 3vw, 1rem);
letter-spacing: 1px;
text-align: center;
}
.count-number {
font-size: clamp(2.5rem, 12vw, 4rem);
line-height: 1;
text-align: center;
}
/* Carousel mobile - Enhanced */
.netflix-carousel {
margin: 0 -0.5rem;
padding: 0 0.5rem;
}
.carousel-container {
max-width: 100%;
overflow: hidden;
}
.carousel-track {
padding: 1rem 0;
gap: 0.75rem;
}
.netflix-card {
min-width: calc(100vw - 4rem);
max-width: calc(100vw - 4rem);
height: auto;
aspect-ratio: 16/10;
flex: 0 0 auto;
}
.carousel-nav {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
/* Buttons mobile */
.alien-btn {
padding: 0.8rem 1.5rem; /* Padding otimizado para mobile */
font-size: clamp(0.75rem, 2.8vw, 0.85rem); /* Font-size responsivo */
min-width: 220px; /* Largura mínima para acomodar texto completo */
max-width: 280px; /* Largura máxima aumentada */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 800; /* Peso mais forte */
width: auto; /* Permite ajuste automático */
}
.alien-btn-primary,
.alien-btn-secondary {
padding: 1rem 1.5rem;
font-size: clamp(0.9rem, 3.5vw, 1rem);
margin: 0.5rem;
min-width: 120px;
max-width: 200px;
}
/* Hero CTA mobile */
.hero-cta {
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 0 1rem;
margin-top: 2rem;
}
/* Features grid mobile */
.features-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
/* Navigation menu mobile */
.nav-menu {
display: none;
}
/* Package cards mobile */
.packages-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
}
/* Extra small devices */
@media (max-width: 480px) {
.hero-container,
.nav-container {
padding: 0 0.75rem;
}
.header {
width: calc(100% - 15px);
left: 7.5px;
right: 7.5px;
top: 7.5px;
}
.nav-container {
padding: 0 0.75rem;
height: 45px;
}
.logo {
font-size: 1rem;
max-width: 80px;
height: 30px;
}
.logo-img {
max-height: 30px;
max-width: 80px;
}
.hero-title {
font-size: clamp(1.8rem, 12vw, 3rem);
margin-bottom: 0.75rem;
}
.time-unit {
min-width: 60px;
max-width: 70px;
padding: 0.5rem 0.25rem;
}
.time-number {
font-size: clamp(1.25rem, 8vw, 1.75rem);
}
.time-label {
font-size: clamp(0.5rem, 3vw, 0.7rem);
}
.netflix-card {
min-width: 250px;
max-width: 280px;
height: 350px;
}
.carousel-track {
padding: 0.75rem 0;
gap: 0.75rem;
}
.alien-btn {
padding: 0.7rem 1.2rem; /* Padding otimizado para telas pequenas */
font-size: 0.75rem; /* Font-size menor para mobile */
min-width: 200px; /* Largura mínima para acomodar texto */
max-width: 240px; /* Largura máxima otimizada */
font-weight: 800; /* Peso mais forte */
width: auto; /* Permite ajuste automático */
display: inline-block; /* Garante display correto */
}
.template-count-highlight {
padding: 0.75rem;
margin: 1rem auto;
}
.count-number {
font-size: clamp(2rem, 15vw, 3.5rem);
}
}
/* Ultra small devices - Enhanced */
@media (max-width: 360px) {
body {
font-size: 13px;
}
.container {
padding: 0 0.75rem;
}
.hero-title {
font-size: clamp(1.5rem, 14vw, 2.5rem);
}
.hero-subtitle {
font-size: clamp(0.8rem, 3.5vw, 1rem);
padding: 0 0.5rem;
}
.countdown {
gap: 0.25rem;
}
.time-unit {
min-width: 50px;
max-width: 60px;
padding: 0.4rem 0.2rem;
}
.netflix-card {
min-width: 220px;
max-width: 250px;
height: 320px;
}
}
/* ========================================================================
ALIEN FLOATING SHAPES
======================================================================== */
.floating-shapes {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
overflow: hidden;
}
.shape {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, var(--alien-green), var(--alien-blue));
filter: blur(2px);
animation: alienShapeFloat 20s infinite ease-in-out;
opacity: 0.15;
box-shadow: 0 0 40px var(--alien-green);
}
.shape-1 {
width: 120px;
height: 120px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.shape-2 {
width: 80px;
height: 80px;
top: 60%;
right: 15%;
animation-delay: -5s;
background: radial-gradient(circle, var(--alien-purple), var(--alien-pink));
box-shadow: 0 0 40px var(--alien-purple);
}
.shape-3 {
width: 150px;
height: 150px;
bottom: 20%;
left: 30%;
animation-delay: -10s;
background: radial-gradient(circle, var(--alien-blue), var(--neon-cyan));
box-shadow: 0 0 40px var(--alien-blue);
}
@keyframes alienShapeFloat {
0%, 100% {
transform: translate(0, 0) rotate(0deg) scale(1);
}
25% {
transform: translate(30px, -50px) rotate(90deg) scale(1.1);
}
50% {
transform: translate(-20px, -80px) rotate(180deg) scale(0.9);
}
75% {
transform: translate(-40px, -30px) rotate(270deg) scale(1.05);
}
}
/* ========================================================================
HEADER - ALIEN ENHANCED
======================================================================== */
.header {
position: fixed;
top: 15px; /* Padding do topo */
left: 50%;
transform: translateX(-50%);
width: 90%; /* Largura relativa menor */
max-width: 1000px; /* Largura máxima menor */
background: rgba(10, 10, 15, 0.9);
backdrop-filter: blur(20px);
border: 1px solid var(--alien-glass-strong);
border-radius: 20px; /* Bordas arredondadas */
z-index: 1000;
transition: all var(--transition-medium);
box-shadow: 0 4px 20px rgba(0, 255, 136, 0.2);
}
.header.scrolled {
background: rgba(10, 10, 15, 0.95);
box-shadow: 0 8px 40px rgba(0, 255, 136, 0.3);
border: 1px solid rgba(0, 255, 136, 0.3);
}
.nav-container {
margin: 0 auto;
padding: 0 var(--spacing-md); /* Padding menor para mais espaço */
display: flex;
align-items: center;
justify-content: space-between;
height: 70px; /* Altura aumentada para acomodar logo maior */
width: 100%; /* Garante largura total */
max-width: 100%; /* Remove limitação de largura */
}
.logo {
font-size: 1.6rem; /* Tamanho reduzido */
font-weight: var(--font-weight-black);
background: var(--holographic-alien);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-decoration: none;
transition: all var(--transition-medium);
letter-spacing: 1px;
max-width: 150px; /* Largura máxima aumentada para 150px */
width: 150px; /* Largura fixa 150px */
height: 50px; /* Altura aumentada para acomodar logo maior */
white-space: nowrap; /* Impede quebra de linha */
overflow: hidden; /* Esconde overflow se necessário */
text-overflow: ellipsis; /* Adiciona ... se necessário */
flex-shrink: 0; /* Não permite diminuir */
display: flex;
align-items: center;
justify-content: flex-start; /* Alinha logo à esquerda */
}
.logo-img {
height: 100%; /* Usa toda a altura disponível do container */
max-height: 50px; /* Altura máxima aumentada */
max-width: 150px; /* Largura máxima aumentada para 150px */
width: auto; /* Largura automática para manter proporção */
object-fit: contain; /* Mantém proporção */
transition: all var(--transition-medium);
filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.3)); /* Efeito alien */
}
.logo:hover {
transform: scale(1.05);
filter: brightness(1.2);
}
.logo:hover .logo-img {
filter: drop-shadow(0 0 15px rgba(0, 255, 136, 0.6)) brightness(1.1);
transform: scale(1.02);
}
.nav-menu {
display: flex;
align-items: center;
gap: var(--spacing-md); /* Gap aumentado para melhor espaçamento */
list-style: none;
flex: 1; /* Permite crescer */
justify-content: center; /* Centraliza os itens */
max-width: calc(100% - 270px); /* Deixa espaço para logo (150px) e botão (120px) */
}
.nav-item a {
color: var(--white-alien);
text-decoration: none;
font-weight: var(--font-weight-medium);
transition: all var(--transition-medium);
position: relative;
padding: 0.5rem 1rem; /* Padding normal */
border-radius: var(--border-radius-md);
font-size: 0.9rem; /* Tamanho de fonte normal */
white-space: nowrap; /* Impede quebra de linha */
}
.nav-item a:hover {
color: var(--alien-green);
text-shadow: 0 0 20px var(--alien-green);
background: var(--alien-glass);
}
.nav-item a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--alien-green);
transition: width var(--transition-medium);
box-shadow: 0 0 10px var(--alien-green);
}
.nav-item a:hover::after {
width: 100%;
}
.alien-btn {
background: linear-gradient(45deg, var(--alien-green), var(--alien-blue));
color: var(--dark-space);
padding: 0.8rem 2rem; /* Padding otimizado */
border: none;
border-radius: var(--border-radius-lg);
font-weight: var(--font-weight-bold);
text-decoration: none;
transition: all var(--transition-medium);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-neon);
letter-spacing: 1px;
font-size: 0.85rem; /* Font-size otimizado */
white-space: nowrap; /* Impede quebra de linha */
flex-shrink: 0; /* Não permite diminuir */
min-width: 240px; /* Largura mínima para acomodar texto completo */
max-width: 320px; /* Largura máxima aumentada */
text-align: center; /* Centraliza o texto */
font-weight: 800; /* Peso da fonte mais forte */
text-transform: uppercase; /* Texto em maiúsculas para mais impacto */
width: auto; /* Permite ajuste automático da largura */
display: inline-block; /* Garante comportamento correto */
}
.alien-btn:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: var(--shadow-ufo);
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.alien-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.alien-btn:hover::before {
left: 100%;
}
/* ========================================================================
MOBILE MENU - ALIEN STYLE
======================================================================== */
/* Mobile menu toggle button */
.mobile-menu-toggle {
display: none;
flex-direction: column;
justify-content: space-around;
width: 30px;
height: 25px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 1001;
transition: all var(--transition-medium);
}
.hamburger-line {
width: 100%;
height: 3px;
background: var(--alien-green);
border-radius: 2px;
transition: all var(--transition-medium);
box-shadow: 0 0 10px var(--alien-green);
}
.mobile-menu-toggle:hover .hamburger-line {
background: var(--alien-blue);
box-shadow: 0 0 15px var(--alien-blue);
}
/* Menu wrapper for mobile */
.nav-menu-wrapper {
display: flex;
align-items: center;
flex: 1;
justify-content: center;
}
/* Hide desktop CTA on mobile, show mobile CTA */
.desktop-cta {
display: block;
}
.mobile-cta {
display: none;
}
.mobile-btn {
width: 100%;
margin-top: var(--spacing-md);
font-size: 0.9rem;
padding: 1rem 2rem;
}
/* Mobile menu animations */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
background: var(--alien-pink);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
background: var(--alien-pink);
}
/* Mobile styles */
@media (max-width: 768px) {
.mobile-menu-toggle {
display: flex;
order: 3;
}
.desktop-cta {
display: none;
}
.mobile-cta {
display: block;
}
.nav-container {
justify-content: space-between;
position: relative;
}
.logo {
order: 1;
z-index: 1003;
}
.nav-menu-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(10, 10, 15, 0.98);
backdrop-filter: blur(20px);
display: flex;
align-items: center;
justify-content: center;
transform: translateX(-100%);
transition: transform var(--transition-medium);
z-index: 999;
border-right: 2px solid var(--alien-green);
box-shadow: 0 0 50px rgba(0, 255, 136, 0.3);
order: 2;
}
.nav-menu-wrapper.active {
transform: translateX(0);
}
.nav-menu {
flex-direction: column;
gap: var(--spacing-lg);
text-align: center;
max-width: none;
width: 100%;
padding: var(--spacing-lg);
justify-content: center;
}
.nav-item {
width: 100%;
}
.nav-item a {
display: block;
padding: 1.2rem 2rem;
font-size: 1.2rem;
border: 1px solid var(--alien-glass);
border-radius: var(--border-radius-lg);
background: var(--alien-glass);
transition: all var(--transition-medium);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: var(--font-weight-bold);
width: 100%;
box-sizing: border-box;
}
.nav-item a:hover {
background: var(--alien-glass-strong);
border-color: var(--alien-green);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(0, 255, 136, 0.4);
}
.nav-container {
position: relative;
z-index: 1002;
}
.header {
top: 10px;
width: 95%;
padding: 0 var(--spacing-sm);
}
.nav-container {
padding: 0 var(--spacing-md);
height: 60px;
}
.logo {
max-width: 120px;
width: 120px;
height: 40px;
}
.logo-img {
max-height: 40px;
max-width: 120px;
}
/* Ensure mobile menu doesn't interfere with other elements */
.nav-menu-wrapper:not(.active) {
visibility: hidden;
}
.nav-menu-wrapper.active {
visibility: visible;
}
}
/* Tablet adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
.nav-menu {
gap: var(--spacing-sm);
}
.nav-item a {
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
}
.alien-btn {
min-width: 200px;
font-size: 0.8rem;
padding: 0.7rem 1.5rem;
}
.header {
width: 95%;
}
}
/* Extra small mobile devices */
@media (max-width: 480px) {
/* Additional overflow prevention */
html, body {
overflow-x: hidden;
max-width: 100vw;
position: relative;
}
.header {
top: 5px;
width: 98%;
}
.nav-container {
height: 55px;
padding: 0 var(--spacing-sm);
}
.logo {
max-width: 100px;
width: 100px;
height: 35px;
}
.logo-img {
max-height: 35px;
max-width: 100px;
}
.mobile-menu-toggle {
width: 25px;
height: 20px;
}
/* Extra small hero adjustments */
.hero {
padding-top: 70px;
overflow: hidden;
width: 100%;
max-width: 100vw;
}
.hero-container {
padding: 0 0.5rem;
max-width: 100%;
width: 100%;
overflow: hidden;
}
.hero-title {
font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
line-height: 1.1 !important;
letter-spacing: 0.5px;
}
.hero-title .line-1,
.hero-title .line-2,
.hero-title .line-3 {
font-size: clamp(1.5rem, 7vw, 2.5rem);
line-height: 1.1;
margin: 0.1rem 0;
}
.hero-subtitle {
font-size: clamp(0.7rem, 3vw, 0.9rem) !important;
padding: 0 0.25rem;
line-height: 1.3;
}
.urgency-timer {
padding: 0.25rem;
margin: 1rem auto;
}
.timer-label {
font-size: clamp(0.6rem, 2.5vw, 0.8rem) !important;
padding: 0 0.25rem;
line-height: 1.2;
}
.countdown {
gap: 0.2rem;
padding: 0 0.25rem;
}
.time-unit {
min-width: 50px;
max-width: 60px;
width: 50px;
padding: 0.5rem 0.2rem;
}
.time-number {
font-size: clamp(1rem, 4vw, 1.3rem) !important;
}
.time-label {
font-size: clamp(0.4rem, 1.5vw, 0.6rem) !important;
}
.nav-item a {
font-size: 1.1rem;
padding: 1rem 1.5rem;
}
.mobile-btn {
font-size: 0.85rem;
padding: 0.9rem 1.5rem;
}
}
/* ========================================================================
HERO SECTION - ALIEN ENHANCED
======================================================================== */
.hero {
min-height: 80vh; /* Reduzido de calc(100vh - 100px) para 80vh */
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: transparent;
padding-top: 120px; /* Reduzido de 140px para 120px */
margin-top: 0; /* Remove margem pois header já tem padding */
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,') center center no-repeat;
background-size: 500px 500px;
animation: alienOrbit 20s linear infinite;
z-index: -1;
}
@keyframes alienOrbit {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.hero-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
text-align: center;
position: relative;
z-index: 2;
}
.hero-title {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: var(--font-weight-black);
margin-bottom: var(--spacing-lg);
background: var(--holographic-alien);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: alienTitleGlow 4s ease-in-out infinite;
line-height: 1.1;
letter-spacing: 2px;
}
@keyframes alienTitleGlow {
0%, 100% {
filter: brightness(1) hue-rotate(0deg);
transform: scale(1);
}
25% {
filter: brightness(1.2) hue-rotate(90deg);
transform: scale(1.02);
}
50% {
filter: brightness(1.4) hue-rotate(180deg);
transform: scale(1.05);
}
75% {
filter: brightness(1.2) hue-rotate(270deg);
transform: scale(1.02);
}
}
.hero-subtitle {
font-size: clamp(1.2rem, 3vw, 1.8rem);
color: var(--alien-blue);
margin-bottom: var(--spacing-xl);
text-shadow: 0 0 20px var(--alien-blue);
letter-spacing: 1px;
line-height: 1.6;
}
.hero-description {
font-size: 1.3rem;
color: var(--white-glow);
margin-bottom: var(--spacing-xxl);
max-width: 600px;
margin-left: auto;
margin-right: auto;
text-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
line-height: 1.8;
}
.hero-cta {
display: flex;
gap: var(--spacing-lg);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--spacing-xxl);
}
.alien-btn-primary {
background: linear-gradient(45deg, var(--alien-green), var(--neon-green));
color: var(--dark-space);
padding: 1.2rem 3rem;
border: none;
border-radius: var(--border-radius-xl);
font-size: 1.2rem;
font-weight: var(--font-weight-bold);
text-decoration: none;
transition: all var(--transition-medium);
position: relative;
overflow: hidden;
box-shadow: 0 0 40px rgba(0, 255, 136, 0.5);
letter-spacing: 1px;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.alien-btn-primary:hover {
transform: translateY(-4px) scale(1.05);
box-shadow: 0 0 60px rgba(0, 255, 136, 0.8), 0 20px 40px rgba(0, 255, 136, 0.3);
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.alien-btn-secondary {
background: rgba(0, 212, 255, 0.1);
color: var(--alien-blue);
border: 2px solid var(--alien-blue);
padding: 1.2rem 3rem;
border-radius: var(--border-radius-xl);
font-size: 1.2rem;
font-weight: var(--font-weight-bold);
text-decoration: none;
transition: all var(--transition-medium);
backdrop-filter: blur(10px);
box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
letter-spacing: 1px;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.alien-btn-secondary:hover {
background: var(--alien-blue);
color: var(--dark-space);
transform: translateY(-4px) scale(1.05);
box-shadow: 0 0 50px rgba(0, 212, 255, 0.8), 0 20px 40px rgba(0, 212, 255, 0.3);
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* ========================================================================
FEATURES SECTION - ALIEN ENHANCED
======================================================================== */
.features {
padding: var(--spacing-xxl) 0;
position: relative;
background: transparent;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
.section-title {
text-align: center;
margin-bottom: var(--spacing-xxl);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-xxl);
}
.feature-card {
background: var(--alien-glass);
backdrop-filter: blur(20px);
border: 1px solid var(--alien-glass-strong);
border-radius: var(--border-radius-xl);
padding: var(--spacing-xl);
text-align: center;
transition: all var(--transition-medium);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-glass);
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(0, 255, 136, 0.1), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.feature-card:hover::before {
transform: translateX(100%);
}
.feature-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: var(--shadow-neon);
border-color: var(--alien-green);
}
.feature-icon {
width: 80px;
height: 80px;
margin: 0 auto var(--spacing-lg);
background: linear-gradient(45deg, var(--alien-green), var(--alien-blue));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
animation: alienIconFloat 3s ease-in-out infinite;
}
@keyframes alienIconFloat {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-10px) scale(1.1); }
}
.feature-title {
color: var(--alien-green);
margin-bottom: var(--spacing-md);
font-size: 1.5rem;
}
.feature-description {
color: var(--white-glow);
line-height: 1.6;
}
/* ========================================================================
TEMPLATES CAROUSEL - ALIEN ENHANCED
======================================================================== */
.templates {
padding: var(--spacing-xxl) 0;
background:
radial-gradient(ellipse at 0% 50%, rgba(255, 0, 110, 0.05) 0%, transparent 70%),
radial-gradient(ellipse at 100% 0%, rgba(0, 212, 255, 0.05) 0%, transparent 70%);
}
.netflix-carousel {
position: relative;
margin-top: var(--spacing-xl);
}
.carousel-container {
position: relative;
overflow: hidden;
border-radius: var(--border-radius-xl);
background: var(--alien-glass);
backdrop-filter: blur(20px);
border: 1px solid var(--alien-glass-strong);
box-shadow: var(--shadow-holographic);
}
.carousel-track {
display: flex;
transition: transform 0.5s ease-in-out;
gap: var(--spacing-md);
padding: var(--spacing-lg);
}
.netflix-card {
min-width: 300px;
height: 400px;
border-radius: var(--border-radius-lg);
overflow: hidden;
position: relative;
background: transparent;
border: 1px solid var(--alien-glass-strong);
box-shadow: var(--shadow-glass);
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
touch-action: manipulation;
cursor: pointer;
}
.card-poster {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
background: linear-gradient(45deg, var(--dark-nebula), var(--dark-void));
display: flex;
align-items: center;
justify-content: center;
}
.poster-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(51, 51, 51, 0.95));
padding: var(--spacing-lg);
transform: translateY(0);
backdrop-filter: blur(10px);
pointer-events: auto;
z-index: 5;
}
.overlay-content {
color: var(--white-alien);
}
.overlay-content h3 {
margin-bottom: var(--spacing-sm);
font-size: 1.3rem;
}
.overlay-content p {
font-size: 0.9rem;
margin-bottom: var(--spacing-md);
}
.card-actions {
display: flex;
gap: var(--spacing-sm);
}
.btn-play, .btn-info {
padding: 0.5rem 1rem;
border: none;
border-radius: var(--border-radius-md);
font-weight: var(--font-weight-bold);
cursor: pointer;
transition: all var(--transition-fast);
display: flex;
align-items: center;
gap: 0.3rem;
position: relative;
z-index: 10;
pointer-events: auto;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
touch-action: manipulation;
}
.btn-play {
background: var(--alien-green);
color: var(--dark-space);
}
.btn-play:hover {
background: var(--neon-green);
box-shadow: 0 0 20px var(--alien-green);
}
.btn-info {
background: rgba(255, 255, 255, 0.2);
color: var(--white-alien);
border: 1px solid var(--alien-glass-strong);
}
.btn-info:hover {
background: var(--alien-glass-strong);
border-color: var(--alien-blue);
}
.price-badge {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
background: linear-gradient(45deg, var(--alien-purple), var(--alien-pink));
color: var(--white-alien);
padding: 0.5rem 1rem;
border-radius: var(--border-radius-lg);
font-weight: var(--font-weight-bold);
font-size: 0.9rem;
box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
}
.carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--alien-glass-strong);
border: 1px solid var(--alien-green);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-medium);
backdrop-filter: blur(10px);
z-index: 10;
color: var(--alien-green);
font-size: 1.2rem;
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}
.carousel-nav:hover {
background: var(--alien-green);
color: var(--dark-space);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 0 30px rgba(0, 255, 136, 0.6);
}
.carousel-nav.prev {
left: var(--spacing-md);
}
.carousel-nav.next {
right: var(--spacing-md);
}
.progress-bar {
height: 4px;
background: var(--alien-glass);
margin-top: var(--spacing-md);
border-radius: 2px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--alien-green), var(--alien-blue));
width: 0%;
transition: width 0.1s linear;
box-shadow: 0 0 10px var(--alien-green);
}
/* ========================================================================
UTILITY CLASSES - ALIEN
======================================================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.alien-glow {
text-shadow: 0 0 20px var(--alien-green);
animation: alienTextGlow 2s ease-in-out infinite;
}
.alien-border {
border: 1px solid var(--alien-green);
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}
.alien-bg {
background: var(--alien-glass);
backdrop-filter: blur(20px);
}
/* ========================================================================
CTA SECTION - ALIEN
======================================================================== */
.cta-section {
padding: 2rem 0; /* Reduzido de var(--spacing-xxl) que é 4rem */
background: transparent;
position: relative;
}
.cta-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.cta-content h2 {
font-size: clamp(2.5rem, 5vw, 3.5rem);
margin-bottom: var(--spacing-lg);
background: var(--holographic-alien);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: holographicGlow 4s ease-in-out infinite;
}
.cta-content p {
font-size: 1.3rem;
margin-bottom: var(--spacing-xxl);
color: var(--white-glow);
text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}
.cta-buttons {
display: flex;
gap: var(--spacing-lg);
justify-content: center;
flex-wrap: wrap;
}
.alien-btn-primary,
.alien-btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all var(--transition-medium);
position: relative;
overflow: hidden;
}
.alien-btn-primary {
background: linear-gradient(45deg, var(--alien-green), var(--alien-blue));
color: var(--dark-space);
border: 2px solid transparent;
box-shadow:
0 0 25px rgba(0, 255, 136, 0.4),
inset 0 0 25px rgba(255, 255, 255, 0.1);
}
.alien-btn-primary:hover {
transform: translateY(-3px) scale(1.05);
box-shadow:
0 10px 40px rgba(0, 255, 136, 0.6),
inset 0 0 35px rgba(255, 255, 255, 0.2);
text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.alien-btn-secondary {
background: transparent;
color: var(--alien-blue);
border: 2px solid var(--alien-blue);
backdrop-filter: blur(10px);
}
.alien-btn-secondary:hover {
background: var(--alien-blue);
color: var(--dark-space);
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 40px rgba(0, 212, 255, 0.4);
text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.alien-btn-primary::before,
.alien-btn-secondary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent);
transition: left 0.5s;
}
.alien-btn-primary:hover::before,
.alien-btn-secondary:hover::before {
left: 100%;
}
/* ========================================================================
FOOTER - ALIEN
======================================================================== */
.footer {
background: transparent;
border-top: 1px solid var(--alien-glass-strong);
padding: var(--spacing-xxl) 0 var(--spacing-lg);
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 20%, rgba(0, 255, 136, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
z-index: -1;
}
.footer-content {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: var(--spacing-xl);
}
.footer-main {
text-align: center;
max-width: 600px;
}
.footer-logo {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-md);
}
.footer-copyright {
color: var(--gray-alien);
font-size: 0.9rem;
opacity: 0.8;
margin-top: var(--spacing-md);
margin-bottom: 0;
font-family: 'Inter', sans-serif;
font-weight: 400;
letter-spacing: 0.3px;
}
.footer-logo-img {
height: 60px;
width: auto;
margin-bottom: var(--spacing-md);
filter: drop-shadow(0 0 15px var(--alien-green));
transition: all 0.3s ease;
}
.footer-logo-img:hover {
filter: drop-shadow(0 0 25px var(--alien-green)) drop-shadow(0 0 35px var(--alien-blue));
transform: scale(1.05);
}
.footer-logo h3 {
font-size: 2rem;
margin-bottom: var(--spacing-md);
color: var(--alien-green);
text-shadow: 0 0 25px var(--alien-green);
}
.footer-logo h3 span {
color: var(--alien-blue);
text-shadow: 0 0 25px var(--alien-blue);
}
.footer-logo p {
color: var(--white-glow);
line-height: 1.6;
opacity: 0.8;
margin-bottom: var(--spacing-lg);
}
.footer-section h3,
.footer-section h4 {
color: var(--alien-green);
margin-bottom: var(--spacing-md);
text-shadow: 0 0 20px var(--alien-green);
font-size: 1.2rem;
}
.footer-section p {
color: var(--white-glow);
line-height: 1.6;
opacity: 0.8;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: var(--spacing-sm);
}
.footer-section ul li a {
color: var(--gray-alien);
text-decoration: none;
transition: all var(--transition-medium);
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
}
.footer-section ul li a:hover {
color: var(--alien-blue);
text-shadow: 0 0 15px var(--alien-blue);
transform: translateX(5px);
}
.footer-section ul li a::before {
content: '🔸';
font-size: 0.8rem;
opacity: 0.6;
}
/* ========================================================================
RESPONSIVE FOOTER
======================================================================== */
@media (max-width: 768px) {
.footer-main {
padding: 0 var(--spacing-md);
}
.footer-logo {
gap: var(--spacing-sm);
}
.footer-logo-img {
height: 50px;
}
.footer-logo p {
font-size: 0.9rem;
}
.footer-copyright {
font-size: 0.8rem;
}
/* Loading screen mobile optimizations */
.loading-content {
padding: 1rem;
max-width: 350px;
}
.loading-logo-img {
height: 60px;
}
.loading-spinner {
width: 80px;
height: 80px;
}
.loading-text {
font-size: 0.9rem;
}
}
/* ========================================================================
ALIEN SPECIAL EFFECTS
======================================================================== */
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 30% 40%, rgba(255, 0, 110, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(138, 43, 226, 0.08) 0%, transparent 50%);
animation: alienPulse 8s ease-in-out infinite;
z-index: -1;
}
@keyframes alienPulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.05); }
}
.footer::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,
transparent,
var(--alien-green),
var(--alien-blue),
var(--alien-purple),
var(--alien-pink),
transparent
);
animation: alienBorder 3s linear infinite;
}
@keyframes alienBorder {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ==========================================================================
GHOST CLICK PREVENTION & INTERACTION IMPROVEMENTS
========================================================================== */
/* Prevent ghost clicks on carousel elements */
.carousel-container * {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Ensure buttons are always clickable */
.btn-play, .btn-info, .carousel-nav {
pointer-events: auto !important;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0, 255, 136, 0.3);
}
/* Prevent double-tap zoom on cards */
.netflix-card {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* Improve button visibility and interaction */
.card-actions {
position: relative;
z-index: 15;
}
.card-actions .btn-play,
.card-actions .btn-info {
position: relative;
z-index: 20;
min-height: 44px; /* Ensure minimum touch target size */
min-width: 44px;
}
/* Prevent event conflicts during transitions */
.netflix-card.transitioning {
pointer-events: none;
}
.netflix-card.transitioning .card-overlay {
pointer-events: none;
}
/* Active state for better feedback */
.btn-play:active,
.btn-info:active {
transform: scale(0.95);
transition: transform 0.1s ease;
}
/* Ensure carousel navigation is always accessible */
.carousel-nav {
z-index: 25 !important;
pointer-events: auto !important;
}
/* Prevent conflicts with alien cursor */
.alien-cursor {
pointer-events: none !important;
}
/* FORCE DISABLE ALL HOVER EFFECTS ON NETFLIX CARDS */
.netflix-card,
.netflix-card:hover,
.netflix-card:focus,
.netflix-card:active {
transform: none !important;
transition: none !important;
scale: 1 !important;
}
.poster-img,
.poster-img:hover,
.poster-img:focus,
.poster-img:active {
transform: none !important;
transition: none !important;
scale: 1 !important;
}
.card-overlay,
.card-overlay:hover,
.card-overlay:focus,
.card-overlay:active {
transform: translateY(0) !important;
transition: none !important;
}
/* ========================================================================
Promotional Card Styles
======================================================================== */
.promotional-card {
background: linear-gradient(135deg, var(--dark-nebula), var(--deep-purple));
border: 2px solid var(--alien-green);
box-shadow: 0 0 30px var(--alien-green), inset 0 0 20px rgba(0, 255, 136, 0.1);
}
.promotional-content {
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
padding: 2rem;
background: radial-gradient(circle at center, rgba(0, 255, 136, 0.1), transparent);
}
.promotional-text {
text-align: center;
color: var(--white-alien);
}
.promotional-text h3 {
font-family: var(--font-primary);
font-size: clamp(1.2rem, 3vw, 1.5rem);
font-weight: var(--font-weight-bold);
color: var(--alien-green);
margin-bottom: 0.5rem;
text-shadow: 0 0 10px var(--alien-green);
letter-spacing: 1px;
}
.promotional-text p {
font-family: var(--font-primary);
font-size: clamp(0.9rem, 2.5vw, 1.1rem);
font-weight: var(--font-weight-medium);
color: var(--white-alien);
margin-bottom: 1rem;
line-height: 1.4;
}
.alien-glow-effect {
font-size: 2rem;
animation: alienGlow 2s ease-in-out infinite alternate;
}
@keyframes alienGlow {
0% {
text-shadow: 0 0 10px var(--alien-green), 0 0 20px var(--alien-green), 0 0 30px var(--alien-green);
transform: scale(1);
}
100% {
text-shadow: 0 0 20px var(--alien-blue), 0 0 30px var(--alien-blue), 0 0 40px var(--alien-blue);
transform: scale(1.1);
}
}
/* ========================================================================
Mental Triggers Section - High Conversion Design
======================================================================== */
.mental-triggers-section {
padding: 1rem 0; /* Reduzido ainda mais para eliminar espaços */
background: linear-gradient(135deg, var(--dark-nebula), var(--deep-purple), var(--dark-space));
position: relative;
overflow: hidden;
margin: 0; /* Remove qualquer margem */
}
.mental-triggers-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(0, 255, 136, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.triggers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 1.5rem; /* Reduzido de 3rem para 1.5rem */
}
.trigger-card {
background: rgba(0, 0, 0, 0.6);
border: 2px solid transparent;
border-radius: 15px;
padding: 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
position: relative;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
overflow: hidden;
}
.trigger-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.trigger-card:hover::before {
left: 100%;
}
/* Different color themes for each trigger type */
.trigger-card.urgent {
border-color: #ff4444;
box-shadow: 0 0 20px rgba(255, 68, 68, 0.3);
}
.trigger-card.social {
border-color: var(--alien-blue);
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}
.trigger-card.authority {
border-color: #ffd700;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
.trigger-card.guarantee {
border-color: var(--alien-green);
box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}
.trigger-card.scarcity {
border-color: #ff6600;
box-shadow: 0 0 20px rgba(255, 102, 0, 0.3);
}
.trigger-card.bonus {
border-color: var(--alien-purple);
box-shadow: 0 0 20px rgba(138, 43, 226, 0.3);
}
.trigger-icon {
font-size: 2.5rem;
min-width: 60px;
text-align: center;
filter: drop-shadow(0 0 10px currentColor);
}
.trigger-content h3 {
font-family: var(--font-primary);
font-size: 1.3rem;
font-weight: var(--font-weight-bold);
color: var(--white-alien);
margin-bottom: 0.5rem;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.trigger-content p {
font-family: var(--font-primary);
font-size: 0.95rem;
color: var(--gray-alien);
line-height: 1.4;
margin: 0;
}
.trigger-content strong {
color: var(--alien-green);
font-weight: var(--font-weight-bold);
text-shadow: 0 0 5px var(--alien-green);
}
/* Main CTA after triggers */
.triggers-cta {
text-align: center;
padding: 3rem 2rem;
background: rgba(0, 0, 0, 0.4);
border-radius: 20px;
border: 2px solid var(--alien-green);
box-shadow: 0 0 40px rgba(0, 255, 136, 0.2);
position: relative;
}
.triggers-cta h2 {
font-family: var(--font-primary);
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: var(--font-weight-black);
color: var(--alien-green);
margin-bottom: 1rem;
text-shadow: 0 0 20px var(--alien-green);
animation: pulse 2s ease-in-out infinite;
}
.triggers-cta p {
font-size: clamp(1rem, 2.5vw, 1.2rem);
color: var(--white-alien);
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.alien-btn-primary.mega {
font-size: 1.3rem;
padding: 1.2rem 3rem;
margin-bottom: 1.5rem;
display: inline-block;
text-decoration: none;
background: linear-gradient(45deg, var(--alien-green), var(--alien-blue));
border: none;
border-radius: 50px;
color: var(--dark-space);
font-weight: var(--font-weight-bold);
font-family: var(--font-primary);
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 10px 30px rgba(0, 255, 136, 0.4);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.alien-btn-primary.mega::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.alien-btn-primary.mega:hover::before {
left: 100%;
}
.alien-btn-primary.mega:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0, 255, 136, 0.6);
}
.alien-btn-primary.mega span {
display: block;
font-size: 1.3rem;
}
.alien-btn-primary.mega small {
display: block;
font-size: 0.9rem;
opacity: 0.9;
margin-top: 0.3rem;
}
.trust-indicators {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.trust-indicators span {
font-family: var(--font-primary);
font-size: 0.9rem;
color: var(--gray-alien);
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Responsive Design - Enhanced */
@media (max-width: 768px) {
.mental-triggers-section {
padding: 1rem 0;
}
.triggers-grid {
grid-template-columns: 1fr;
gap: 1rem;
padding: 0 0.5rem;
}
.trigger-card {
padding: 1rem;
flex-direction: row;
text-align: left;
}
.trigger-icon {
font-size: 2rem;
min-width: 50px;
}
.trigger-content h3 {
font-size: 1.1rem;
}
.trigger-content p {
font-size: 0.85rem;
}
.triggers-cta {
padding: 2rem 1rem;
margin: 0 0.5rem;
}
.triggers-cta h2 {
font-size: clamp(1.5rem, 5vw, 2rem);
}
.triggers-cta p {
font-size: 0.95rem;
}
.trust-indicators {
flex-direction: column;
gap: 0.8rem;
}
.trust-indicators span {
font-size: 0.8rem;
}
.alien-btn-primary.mega {
font-size: 1rem;
padding: 1rem 1.5rem;
}
}
/* Animation for remaining spots counter */
@keyframes urgentPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
#remaining-spots {
animation: urgentPulse 1.5s ease-in-out infinite;
}
/* ========================================================================
Social Proof Section - Trust Building Design
======================================================================== */
.social-proof-section {
margin: 1rem 0; /* Reduzido de 3rem para 1rem */
padding: 2.5rem;
background: rgba(0, 0, 0, 0.4);
border-radius: 20px;
border: 1px solid rgba(0, 255, 136, 0.2);
backdrop-filter: blur(10px);
}
.social-proof-header {
text-align: center;
margin-bottom: 2.5rem;
}
.social-proof-header h3 {
font-family: var(--font-primary);
font-size: clamp(1.5rem, 3.5vw, 2rem);
font-weight: var(--font-weight-bold);
color: var(--alien-green);
margin-bottom: 0.5rem;
text-shadow: 0 0 15px var(--alien-green);
}
.social-proof-header p {
font-family: var(--font-primary);
font-size: 1.1rem;
color: var(--gray-alien);
margin: 0;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.testimonial-card {
background: rgba(0, 0, 0, 0.6);
border: 2px solid transparent;
border-radius: 15px;
padding: 1.5rem;
position: relative;
backdrop-filter: blur(5px);
transition: all 0.3s ease;
}
.testimonial-card:nth-child(1) {
border-color: var(--alien-green);
box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}
.testimonial-card:nth-child(2) {
border-color: var(--alien-blue);
box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}
.testimonial-card:nth-child(3) {
border-color: var(--alien-purple);
box-shadow: 0 0 20px rgba(138, 43, 226, 0.2);
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3);
}
.stars {
font-size: 1.2rem;
margin-bottom: 1rem;
filter: drop-shadow(0 0 5px #ffd700);
}
.testimonial-card p {
font-family: var(--font-primary);
font-size: 0.95rem;
line-height: 1.5;
color: var(--white-alien);
margin-bottom: 1.5rem;
font-style: italic;
}
.testimonial-card strong {
color: var(--alien-green);
font-weight: var(--font-weight-bold);
text-shadow: 0 0 5px var(--alien-green);
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
}
.author-avatar {
font-size: 2.5rem;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 255, 136, 0.1);
border-radius: 50%;
border: 2px solid var(--alien-green);
}
.author-info {
display: flex;
flex-direction: column;
}
.author-info .name {
font-family: var(--font-primary);
font-size: 0.9rem;
font-weight: var(--font-weight-bold);
color: var(--white-alien);
margin-bottom: 0.2rem;
}
.author-info .business {
font-family: var(--font-primary);
font-size: 0.8rem;
color: var(--gray-alien);
}
.social-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1.5rem;
padding-top: 2rem;
border-top: 1px solid rgba(0, 255, 136, 0.2);
}
.stat-item {
text-align: center;
padding: 1rem;
background: rgba(0, 255, 136, 0.05);
border-radius: 10px;
border: 1px solid rgba(0, 255, 136, 0.2);
transition: all 0.3s ease;
}
.stat-item:hover {
background: rgba(0, 255, 136, 0.1);
transform: translateY(-3px);
}
.stat-number {
font-family: var(--font-primary);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: var(--font-weight-black);
color: var(--alien-green);
text-shadow: 0 0 10px var(--alien-green);
margin-bottom: 0.5rem;
animation: countUp 2s ease-out;
}
.stat-label {
font-family: var(--font-primary);
font-size: 0.85rem;
color: var(--gray-alien);
font-weight: var(--font-weight-medium);
}
@keyframes countUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design for Social Proof - Enhanced */
@media (max-width: 768px) {
.social-proof-section {
margin: 1rem 0;
padding: 1rem;
}
.social-proof-header h3 {
font-size: clamp(1.2rem, 4vw, 1.5rem);
text-align: center;
}
.social-proof-header p {
font-size: 0.9rem;
text-align: center;
}
.testimonials-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.testimonial-card {
padding: 1rem;
}
.social-stats {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.stat-item {
padding: 0.8rem;
}
}
@media (max-width: 480px) {
.social-stats {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
EXPLOSIVE PRICING SECTION - ULTIMATE CONVERSION MACHINE
========================================================================== */
/* Urgency Alert */
.urgency-alert {
background: linear-gradient(45deg, #ff0040, #ff6b00);
border: 2px solid #ff0040;
border-radius: 15px;
padding: 15px 20px;
margin: 20px 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
animation: urgencyPulse 2s ease-in-out infinite;
box-shadow: 0 0 30px rgba(255, 0, 64, 0.5);
}
.alert-icon {
font-size: 24px;
animation: shake 0.5s ease-in-out infinite alternate;
}
.alert-text {
font-family: 'Poppins', sans-serif;
font-weight: 800;
color: #fff;
font-size: 18px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
letter-spacing: 0.5px;
}
@keyframes urgencyPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
@keyframes shake {
0% { transform: translateX(-2px); }
100% { transform: translateX(2px); }
}
/* Price Explosion Container */
.price-explosion {
background: linear-gradient(135deg, #000 0%, #0a0a0f 50%, #1a0b2e 100%);
border: 3px solid var(--alien-green);
border-radius: 25px;
padding: 30px;
margin: 25px 0;
position: relative;
overflow: hidden;
box-shadow:
0 0 50px rgba(0, 255, 136, 0.3),
inset 0 0 50px rgba(0, 255, 136, 0.1);
}
.price-explosion::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, var(--alien-green), transparent);
animation: rotate 4s linear infinite;
z-index: -1;
}
.price-explosion::after {
content: '';
position: absolute;
inset: 3px;
background: linear-gradient(135deg, #000 0%, #0a0a0f 50%, #1a0b2e 100%);
border-radius: 22px;
z-index: -1;
}
/* Price Comparison */
.price-comparison {
text-align: center;
margin-bottom: 20px;
}
.original-price {
position: relative;
margin-bottom: 15px;
}
.strike-through {
font-size: 24px;
color: #ff4444;
text-decoration: line-through;
text-decoration-color: #ff0040;
text-decoration-thickness: 3px;
font-family: 'Inter', sans-serif;
font-weight: 600;
position: relative;
letter-spacing: 0.5px;
}
.discount-label {
display: inline-block;
background: linear-gradient(45deg, #ff0040, #ff6b00);
color: #fff;
padding: 8px 15px;
border-radius: 50px;
font-size: 16px;
font-weight: 800;
margin-left: 15px;
animation: bounce 2s ease-in-out infinite;
box-shadow: 0 5px 15px rgba(255, 0, 64, 0.3);
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-8px); }
60% { transform: translateY(-4px); }
}
/* Current Price */
.current-price {
position: relative;
}
.price-label {
display: block;
color: var(--alien-green);
font-size: 18px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
margin-bottom: 10px;
text-shadow: 0 0 10px var(--alien-green);
letter-spacing: 1px;
}
.mega-price {
display: flex;
align-items: baseline;
justify-content: center;
gap: 5px;
margin-bottom: 15px;
animation: priceGlow 3s ease-in-out infinite;
}
.currency {
font-size: 40px;
color: var(--alien-green);
font-family: 'Poppins', sans-serif;
font-weight: 800;
letter-spacing: -1px;
}
.price-value {
font-size: 120px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 900;
text-shadow:
0 0 20px var(--alien-green),
0 0 40px var(--alien-green),
0 0 60px var(--alien-green);
line-height: 0.8;
letter-spacing: -3px;
}
.cents {
font-size: 50px;
color: var(--alien-green);
font-family: 'Poppins', sans-serif;
font-weight: 800;
letter-spacing: -1px;
}
@keyframes priceGlow {
0%, 100% { text-shadow: 0 0 20px var(--alien-green); }
50% { text-shadow: 0 0 40px var(--alien-green), 0 0 60px var(--alien-green); }
}
.savings-highlight {
background: linear-gradient(45deg, #ffd700, #ffed4e);
color: #000;
padding: 12px 20px;
border-radius: 25px;
font-size: 18px;
font-weight: 800;
font-family: 'Poppins', sans-serif;
display: inline-block;
animation: savingsShine 2s ease-in-out infinite;
box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
letter-spacing: 0.5px;
}
@keyframes savingsShine {
0%, 100% { transform: scale(1); box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3); }
50% { transform: scale(1.05); box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5); }
}
/* Scarcity Bar */
.scarcity-bar {
background: rgba(255, 0, 64, 0.1);
border: 2px solid #ff0040;
border-radius: 15px;
padding: 20px;
margin: 20px 0;
text-align: center;
}
.scarcity-text {
color: #ff0040;
font-size: 16px;
font-weight: 800;
font-family: 'Poppins', sans-serif;
margin-bottom: 15px;
animation: urgentBlink 1.5s ease-in-out infinite;
letter-spacing: 0.5px;
}
@keyframes urgentBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.scarcity-progress {
display: flex;
align-items: center;
gap: 15px;
justify-content: center;
}
.progress-bar-bg {
flex: 1;
max-width: 300px;
height: 12px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #ff0040, #ff6b00);
border-radius: 10px;
animation: progressPulse 2s ease-in-out infinite;
}
@keyframes progressPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
.remaining {
color: #ff0040;
font-size: 14px;
font-weight: 700;
font-family: 'Inter', sans-serif;
letter-spacing: 0.3px;
}
/* Bonus Stack */
.bonus-stack {
background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 212, 255, 0.1));
border: 2px solid var(--alien-green);
border-radius: 20px;
padding: 25px;
margin: 25px 0;
}
.bonus-title {
color: var(--alien-green);
font-size: 20px;
font-weight: 800;
font-family: 'Poppins', sans-serif;
text-align: center;
margin-bottom: 20px;
text-shadow: 0 0 10px var(--alien-green);
letter-spacing: 0.5px;
}
.bonus-items {
margin-bottom: 20px;
}
.bonus-item {
color: #fff;
font-size: 16px;
font-weight: 600;
font-family: 'Inter', sans-serif;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
letter-spacing: 0.3px;
}
.bonus-item:last-child {
border-bottom: none;
}
.total-value {
text-align: center;
color: #ffd700;
font-size: 22px;
font-weight: 900;
font-family: 'Poppins', sans-serif;
padding: 15px;
background: rgba(255, 215, 0, 0.1);
border-radius: 15px;
text-shadow: 0 0 15px #ffd700;
letter-spacing: 0.5px;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.price-value {
font-size: 80px;
}
.currency, .cents {
font-size: 30px;
}
.alert-text {
font-size: 16px;
}
.mega-price {
flex-direction: row;
align-items: baseline;
}
.price-explosion {
padding: 20px;
}
.bonus-stack {
padding: 20px;
}
}
@media (max-width: 480px) {
.price-value {
font-size: 60px;
}
.currency, .cents {
font-size: 24px;
}
.alert-text {
font-size: 14px;
}
.scarcity-progress {
flex-direction: column;
gap: 10px;
}
.progress-bar-bg {
max-width: 250px;
}
}
/* Ultra small devices (320px and below) */
@media (max-width: 320px) {
.hero-title {
font-size: clamp(1.3rem, 6vw, 2rem) !important;
letter-spacing: 0px;
}
.hero-title .line-1,
.hero-title .line-2,
.hero-title .line-3 {
font-size: clamp(1.3rem, 6vw, 2rem);
}
.hero-subtitle {
font-size: clamp(0.6rem, 2.8vw, 0.8rem) !important;
padding: 0;
}
.timer-label {
font-size: clamp(0.55rem, 2.2vw, 0.7rem) !important;
padding: 0;
}
.countdown {
gap: 0.15rem;
padding: 0;
}
.time-unit {
min-width: 45px;
max-width: 50px;
width: 45px;
padding: 0.4rem 0.15rem;
margin: 0.05rem;
}
.time-number {
font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
}
.time-label {
font-size: clamp(0.35rem, 1.2vw, 0.5rem) !important;
}
.hero-container {
padding: 0 0.25rem;
}
}