:root {
--bg-dark: #030305;
--neon-red: #ff1e27;
--neon-red-dim: rgba(255, 30, 39, 0.15);
--text-light: #ffffff;
--font-head: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--bg-dark);
color: var(--text-light);
font-family: var(--font-body);
min-height: 100vh;
overflow-x: hidden;
display: flex;
flex-direction: column;
position: relative;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.bg-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 50px 50px;
background-position: center top;
z-index: -2;
pointer-events: none;
}
.bg-glow {
position: absolute;
border-radius: 50%;
filter: blur(150px);
z-index: -1;
pointer-events: none;
opacity: 0.5;
}
.glow-1 {
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(255, 30, 39, 0.15) 0%, rgba(3, 3, 5, 0) 70%);
top: -100px;
left: 50%;
transform: translateX(-50%);
}
.glow-2 {
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255, 30, 39, 0.1) 0%, rgba(3, 3, 5, 0) 70%);
bottom: -200px;
right: -100px;
}
.float-sym {
position: absolute;
font-family: var(--font-head);
font-size: clamp(1rem, 2vw, 2rem);
font-weight: 700;
color: var(--neon-red);
opacity: 0.2;
filter: blur(2px);
z-index: -1;
pointer-events: none;
}
.s1 { top: 15%; left: 10%; animation: float1 10s infinite ease-in-out; }
.s2 { top: 20%; right: 15%; animation: float2 12s infinite ease-in-out; }
.s3 { bottom: 25%; left: 15%; animation: float2 14s infinite ease-in-out; }
.s4 { bottom: 20%; right: 10%; animation: float1 11s infinite ease-in-out; }
.s5 { top: 50%; left: 5%; animation: float1 13s infinite ease-in-out; }
.s6 { top: 60%; right: 5%; animation: float2 15s infinite ease-in-out; }
.s7 { top: 10%; left: 50%; animation: float1 9s infinite ease-in-out; }
@keyframes float1 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(10deg); }
}
@keyframes float2 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(20px) rotate(-10deg); }
}
.navbar {
width: 100%;
padding: 40px 6%;
display: flex;
justify-content: center; /* Centrat pe desktop */
align-items: center;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.nav-logo {
height: 55px; /* Ușor mărit pentru poziția centrală */
width: auto;
object-fit: contain;
filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));
}
.hero-section {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
padding: 120px 5% 60px 5%;
z-index: 2;
}
.hero-title {
font-family: var(--font-head);
line-height: 1.05;
letter-spacing: -0.02em;
text-transform: uppercase;
margin-bottom: 50px;
}
.line-white {
font-size: clamp(2.5rem, 5vw, 6rem);
font-weight: 800;
color: var(--text-light);
text-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}
.line-red {
font-size: clamp(2.5rem, 5vw, 6rem);
font-weight: 900;
font-style: normal;
color: var(--neon-red);
text-shadow: 0 0 40px rgba(255, 30, 39, 0.5);
}
.line-huge {
font-size: clamp(3rem, 7vw, 8rem);
display: inline-block;
margin-top: 10px;
}
.btn-discord {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 24px 50px;
text-decoration: none;
background: rgba(15, 10, 10, 0.6);
border: 1px solid var(--neon-red);
border-radius: 100px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 0 25px rgba(255, 30, 39, 0.15);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.discord-icon {
width: 36px;
height: 36px;
color: var(--text-light);
transition: all 0.4s ease;
}
.btn-text {
font-family: var(--font-body);
font-size: clamp(1.1rem, 2vw, 1.4rem);
font-weight: 800;
letter-spacing: 0.05em;
color: var(--text-light);
}
.btn-discord:hover {
background: var(--neon-red-dim);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(255, 30, 39, 0.4), 0 0 20px rgba(255, 30, 39, 0.2) inset;
}
.btn-discord:hover .discord-icon {
color: var(--neon-red);
transform: scale(1.1) rotate(-5deg);
}
.fade-in {
opacity: 0;
animation: fadeIn 1s ease forwards;
}
.fade-in-up {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.delay-1 { animation-delay: 0.2s; }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
@media screen and (max-width: 768px) {
.navbar {
padding: 30px 5%;
}
.nav-logo {
height: 45px;
}
.hero-section {
padding-top: 100px;
}
.hero-title {
margin-bottom: 40px;
}
.btn-discord {
padding: 20px 35px;
gap: 15px;
width: 100%;
max-width: 350px;
}
.discord-icon {
width: 28px;
height: 28px;
}
}