:root {
--font-display: "Outfit", sans-serif;
--font-sans: "Plus Jakarta Sans", sans-serif;
--font-mono: "JetBrains Mono", monospace;
}
body, html, .font-sans {
font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif !important;
background-color: #0A0A0A !important;
color: #f3f4f6 !important;
} .custom-logo,
a.custom-logo-link img,
.custom-logo-link img,
img.custom-logo {
max-height: 2.25rem !important; height: 2.25rem !important;
width: auto !important;
max-width: 150px !important;
object-fit: contain !important;
display: block !important;
}
.custom-logo-link {
display: inline-flex !important;
align-items: center !important;
height: 2.25rem !important;
max-height: 2.25rem !important;
width: auto !important;
vertical-align: middle !important;
}
.font-display {
font-family: "Outfit", ui-sans-serif, system-ui, sans-serif !important;
}
.font-mono {
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace !important;
} #navbar-container nav ul {
display: flex;
align-items: center;
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}
#navbar-container nav ul li a,
.nav-link {
font-family: "Outfit", sans-serif !important;
font-size: 0.875rem !important; text-transform: uppercase !important;
letter-spacing: 0.1em !important; color: #9ca3af !important; transition: color 0.3s ease !important;
}
#navbar-container nav ul li a:hover,
.nav-link:hover,
.nav-link.active {
color: #c084fc !important; } #mobile-menu-drawer nav ul {
display: flex;
flex-direction: column;
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
}
#mobile-menu-drawer nav .menu {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
#mobile-menu-drawer nav ul li a,
#mobile-menu-drawer nav a,
.nav-link-mobile {
font-family: "Outfit", sans-serif !important;
font-size: 1.25rem !important; text-transform: uppercase !important;
letter-spacing: 0.1em !important; color: #9ca3af !important; display: block !important;
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
transition: color 0.3s ease !important;
}
#mobile-menu-drawer nav ul li a:hover,
#mobile-menu-drawer nav a:hover,
.nav-link-mobile:hover {
color: #c084fc !important; } ::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0A0A0A;
}
::-webkit-scrollbar-thumb {
background: #27272a;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
background: #a855f7;
} .bg-grid-pattern {
background-size: 40px 40px;
background-image: 
linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}
.glow-purple {
text-shadow: 0 0 10px rgba(168, 85, 247, 0.6), 0 0 20px rgba(168, 85, 247, 0.4);
}
.glow-cyan {
text-shadow: 0 0 10px rgba(6, 182, 212, 0.6), 0 0 20px rgba(6, 182, 212, 0.4);
}
.box-glow-purple {
box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}
.box-glow-cyan {
box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
} .reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
.delay-100 { transition-delay: 100ms; }
.delay-150 { transition-delay: 150ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; } @keyframes vinyl-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.vinyl-record-container {
transform: translateX(0px);
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.playing .vinyl-record-container {
transform: translateX(25px);
}
.vinyl-record-disc {
transition: transform 0.5s ease;
}
.playing .vinyl-record-disc {
animation: vinyl-spin 8s linear infinite;
} @keyframes wave-bounce {
0%, 100% {
transform: scaleY(0.35);
}
50% {
transform: scaleY(1.15);
}
}
.waveform-bar {
transform-origin: bottom;
transform: scaleY(0.5);
transition: transform 0.2s ease-in-out;
}
.playing .waveform-bar {
animation: wave-bounce 1.2s ease-in-out infinite;
} input[type="range"] {
-webkit-appearance: none;
appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 10px;
background: #a855f7;
border-radius: 0px;
cursor: pointer;
box-shadow: 0 0 8px #a855f7;
}
input[type="range"]::-moz-range-thumb {
width: 10px;
height: 10px;
background: #a855f7;
border-radius: 0px;
cursor: pointer;
border: none;
box-shadow: 0 0 8px #a855f7;
}