/* Custom styles for AKI.IO European AI API Website */
/* Ensure full height */
html, body {
height: 100%;
scroll-behavior: smooth;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #6366f1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #4f46e5;
}
/* Hero section styling */
#europePointCloud {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
opacity: 0.1;
}
/* Animation for floating elements */
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
/* Custom button hover effects */
.btn {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn:hover {
transform: translateY(-2px);
}
/* Card hover effects */
.card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
transform: translateY(-8px);
}
/* Gradient text effects */
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Loading animation for point cloud */
.loading-dots {
display: inline-block;
}
.loading-dots::after {
content: '';
animation: loading-dots 1.5s infinite;
}
@keyframes loading-dots {
0%, 20% {
content: '';
}
40% {
content: '.';
}
60% {
content: '..';
}
80%, 100% {
content: '...';
}
}
/* Custom glass morphism effect */
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Typography improvements */
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
font-weight: 700;
}
.prose {
line-height: 1.7;
}
/* Smooth transitions for theme switching */
* {
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
/* Mobile responsiveness improvements */
@media (max-width: 768px) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.text-5xl {
font-size: 2.5rem;
}
.text-7xl {
font-size: 3.5rem;
}
}
/* Focus states for accessibility */
.btn:focus,
a:focus,
input:focus {
outline: 2px solid #6366f1;
outline-offset: 2px;
}
/* Custom badge styles */
.badge {
font-weight: 500;
}
/* Hero section background pattern */
.hero-pattern {
background-image:
radial-gradient(circle at 25px 25px, rgba(255,255,255,.2) 2%, transparent 0%),
radial-gradient(circle at 75px 75px, rgba(255,255,255,.2) 2%, transparent 0%);
background-size: 100px 100px;
}
/* Animation delays for staggered entrance effects */
.animate-delay-100 {
animation-delay: 100ms;
}
.animate-delay-200 {
animation-delay: 200ms;
}
.animate-delay-300 {
animation-delay: 300ms;
}
.animate-delay-400 {
animation-delay: 400ms;
}
.animate-delay-500 {
animation-delay: 500ms;
}
/* Custom shadows */
.shadow-glow {
box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
}
.shadow-glow-lg {
box-shadow: 0 0 40px rgba(99, 102, 241, 0.4);
}
/* Interactive elements */
.interactive:hover {
transform: scale(1.05);
transition: transform 0.2s ease;
}
/* Loading states */
.loading {
opacity: 0.7;
pointer-events: none;
}
/* Custom border animations */
.border-animate {
position: relative;
overflow: hidden;
}
.border-animate::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #6366f1, transparent);
animation: border-slide 2s infinite;
}
@keyframes border-slide {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* Utility classes */