131 lines
3.1 KiB
CSS
131 lines
3.1 KiB
CSS
.hero {
|
|
position: relative;
|
|
z-index: 10;
|
|
text-align: center;
|
|
padding: 140px 20px 120px;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
min-height: 70vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 140px;
|
|
font-weight: 900;
|
|
margin-bottom: 25px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
|
|
background-size: 200% 200%;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
letter-spacing: 18px;
|
|
text-transform: uppercase;
|
|
animation: titleAnimation 6s ease-in-out infinite, titleGlow 3s ease-in-out infinite alternate;
|
|
line-height: 1.1;
|
|
position: relative;
|
|
}
|
|
|
|
.hero-title::after {
|
|
content: '2048';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
filter: blur(20px);
|
|
opacity: 0.5;
|
|
z-index: -1;
|
|
animation: titleBlur 3s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes titleAnimation {
|
|
0%, 100% { background-position: 0% 50%; transform: scale(1); }
|
|
50% { background-position: 100% 50%; transform: scale(1.02); }
|
|
}
|
|
|
|
@keyframes titleGlow {
|
|
0% { filter: drop-shadow(0 0 25px rgba(0, 234, 255, 0.7)) drop-shadow(0 0 50px rgba(0, 234, 255, 0.5)); }
|
|
100% { filter: drop-shadow(0 0 40px rgba(255, 0, 255, 0.9)) drop-shadow(0 0 80px rgba(255, 0, 255, 0.6)); }
|
|
}
|
|
|
|
@keyframes titleBlur {
|
|
0% { opacity: 0.3; }
|
|
100% { opacity: 0.7; }
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 24px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 55px;
|
|
font-weight: 400;
|
|
letter-spacing: 6px;
|
|
text-transform: uppercase;
|
|
font-family: 'Exo 2', sans-serif;
|
|
animation: subtitleFade 2s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes subtitleFade {
|
|
0% { opacity: 0.7; transform: translateY(0); }
|
|
100% { opacity: 1; transform: translateY(-3px); }
|
|
}
|
|
|
|
.cta-buttons {
|
|
display: flex;
|
|
gap: 25px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
animation: buttonsSlideUp 1s ease-out;
|
|
}
|
|
|
|
@keyframes buttonsSlideUp {
|
|
from { opacity: 0; transform: translateY(30px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Floating Decoration Elements */
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -100px;
|
|
width: 300px;
|
|
height: 300px;
|
|
background: radial-gradient(circle, rgba(0, 234, 255, 0.15), transparent);
|
|
border-radius: 50%;
|
|
filter: blur(60px);
|
|
animation: floatLeft 8s ease-in-out infinite;
|
|
z-index: -1;
|
|
}
|
|
|
|
.hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 30%;
|
|
right: -100px;
|
|
width: 350px;
|
|
height: 350px;
|
|
background: radial-gradient(circle, rgba(255, 0, 255, 0.15), transparent);
|
|
border-radius: 50%;
|
|
filter: blur(60px);
|
|
animation: floatRight 10s ease-in-out infinite;
|
|
z-index: -1;
|
|
}
|
|
|
|
@keyframes floatLeft {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
50% { transform: translate(30px, -30px) scale(1.1); }
|
|
}
|
|
|
|
@keyframes floatRight {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
50% { transform: translate(-30px, 30px) scale(1.1); }
|
|
} |