Spaces:
Running
Running
File size: 2,577 Bytes
389ae80 a58d602 389ae80 a58d602 389ae80 a58d602 389ae80 a58d602 389ae80 a58d602 389ae80 a58d602 389ae80 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 |
/* Additional custom styles that complement Tailwind CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Inter', sans-serif;
}
/* Smooth scroll behavior */
html {
scroll-behavior: smooth;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}
/* Enhanced focus states */
button:focus, input:focus, textarea:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* Loading animation */
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Mobile menu animation */
.mobile-menu-enter {
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Card hover effects */
.feature-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-card:hover {
transform: translateY(-8px) scale(1.02);
}
/* Text selection */
::selection {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
/* Image lazy loading blur effect */
.lazy-image {
filter: blur(5px);
transition: filter 0.3s;
}
.lazy-image.loaded {
filter: blur(0);
}
/* Custom tooltip */
.tooltip {
position: relative;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
font-size: 0.875rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.tooltip:hover::after {
opacity: 1;
}
/* Responsive typography */
@media (max-width: 640px) {
h1 {
font-size: 2.5rem !important;
line-height: 1.2;
}
h2 {
font-size: 2rem !important;
}
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
.auto-dark {
background-color: #1a1a1a;
color: #ffffff;
}
}
/* Print styles */
@media print {
.no-print {
display: none !important;
}
} |