/* DropletExplore Theme Inline Styles (extracted from header.php) */
body {
font-family: 'Inter', sans-serif;
background-color: #050505;
color: #F0F0F0;
}
.font-heading {
font-family: 'Barlow Condensed', sans-serif;
}
.font-mono {
font-family: 'JetBrains Mono', monospace;
}
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #080808;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #CCFF00;
}
.text-acid {
color: #CCFF00;
}
.bg-acid {
background-color: #CCFF00;
}
.border-acid {
border-color: #CCFF00;
}
.selection-acid::selection {
background: #CCFF00;
color: black;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.animate-marquee {
animation: marquee 40s linear infinite;
}
.bg-grid {
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);
}
.glass-panel {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.8s ease forwards;
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(204, 255, 0, 0.3); }
50% { box-shadow: 0 0 40px rgba(204, 255, 0, 0.6); }
}
.pulse-glow {
animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.float-anim {
animation: float 3s ease-in-out infinite;
}
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.hover-scale {
transition: transform 0.3s ease;
}
.hover-scale:hover {
transform: scale(1.05);
}
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}