/* Extracted from navbar.php */
html, body {
touch-action: manipulation;
-ms-touch-action: manipulation;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow-x: hidden;
width: 100%;
max-width: 100vw;
}
input, textarea {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
:root {
--pure-white: #ffffff;
--off-white: #f0f4ff;
--light-blue: #66b3ff;
--medium-blue: #3399ff;
--electric-blue: #0088ff;
--deep-blue: #0066cc;
--dark-blue: #004499;
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.2);
--glass-highlight: rgba(255, 255, 255, 0.1);
--transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(135deg, #000510 0%, #000d24 50%, #000820 100%);
min-height: 200vh;
overflow-x: hidden;
width: 100%;
max-width: 100vw;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 80%, rgba(0, 136, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
animation: subtlePulse 8s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
@keyframes subtlePulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.navbar-container {
position: fixed;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 30px);
max-width: 1300px;
z-index: 9999;
transition: all 0.4s var(--transition-smooth);
}
.navbar-container.scrolled {
top: 15px;
width: calc(100% - 30px);
max-width: 1300px;
}
.navbar-container.scrolled .navbar {
background: rgba(0, 5, 20, 0.8);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 50px;
padding: 10px 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 30px;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50px;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.3),
inset 0 1px 1px rgba(255, 255, 255, 0.05);
transition: all 0.3s var(--transition-smooth);
position: relative;
}
.navbar::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: linear-gradient(45deg,
rgba(255, 255, 255, 0.3),
rgba(0, 136, 255, 0.3),
rgba(255, 255, 255, 0.3),
rgba(51, 153, 255, 0.3));
background-size: 400% 400%;
border-radius: 51px;
z-index: -1;
animation: borderShine 6s ease infinite;
opacity: 0.5;
}
@keyframes borderShine {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.logo {
font-family: 'Righteous', 'Audiowide', 'Orbitron', sans-serif;
font-weight: 900;
font-size: 30px;
letter-spacing: 4px;
z-index: 10000;
flex-shrink: 0;
}
.logo a {
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
animation: logoZoom 3s ease-in-out infinite;
}
@keyframes logoZoom {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.logo-text-benja {
color: #ffffff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.logo-text-hex {
background: linear-gradient(135deg, #0088ff, #3399ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 10px rgba(0, 136, 255, 0.8));
}
.nav-links {
display: flex;
gap: 35px;
align-items: center;
list-style: none;
}
.nav-links a {
text-decoration: none;
color: rgba(255, 255, 255, 0.8);
font-family: 'Rajdhani', sans-serif;
font-weight: 700;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2.5px;
position: relative;
padding: 8px 0;
transition: all 0.4s var(--transition-smooth);
}
.nav-links a:hover, .nav-links a.active {
color: #ffffff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.nav-actions {
display: flex;
gap: 12px;
align-items: center;
}
.discord-btn {
background: rgba(255, 255, 255, 0.05);
color: #ffffff;
padding: 9px 18px;
border-radius: 50px;
text-decoration: none;
font-family: 'Rajdhani', sans-serif;
font-weight: 700;
font-size: 14px;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.4s;
display: flex;
align-items: center;
gap: 8px;
}
.signup-btn {
background: rgba(0, 136, 255, 0.2);
color: #ffffff;
padding: 10px 25px;
border-radius: 50px;
text-decoration: none;
font-family: 'Orbitron', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
border: 1px solid rgba(255, 255, 255, 0.4);
transition: all 0.4s;
}
.signup-btn:hover {
background: #0088ff;
box-shadow: 0 0 20px rgba(0, 136, 255, 0.6);
}
.menu-toggle {
display: none;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
font-size: 22px;
padding: 8px 10px;
border-radius: 10px;
cursor: pointer;
}
/* Mobile Menu */
.mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 5, 20, 0.95);
backdrop-filter: blur(30px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
opacity: 0;
pointer-events: none;
transition: all 0.5s;
z-index: 9998;
}
.mobile-menu.active {
opacity: 1;
pointer-events: all;
}
.mobile-menu a {
font-size: 24px;
color: white;
text-decoration: none;
font-family: 'Orbitron', sans-serif;
letter-spacing: 4px;
}
/* Responsive */
@media (max-width: 1100px) {
.nav-links, .nav-actions { display: none; }
.menu-toggle { display: block; }
.navbar { padding: 10px 20px; }
}
@media (max-width: 480px) {
.navbar-container { width: calc(100% - 20px); top: 10px; }
.navbar-container.scrolled { top: 10px; width: calc(100% - 20px); }
.logo { font-size: 22px; }
}