Sebastian Krüger
36742949bd
🎯 Smooth Scroll Behavior: - Added smooth scroll CSS for seamless navigation - Scroll indicator now links to #tools section - Added hover states for scroll indicator - Accessibility: respects prefers-reduced-motion 🏷️ Tool Badges: - Added feature badges to each tool card - Vert: Privacy, Open Source, Free - Paint: Browser-Based, Free - Pastel: Open Source, WCAG, Free - Subtle glassmorphic badge design ⬆️ Back to Top Button: - Animated button appears after scrolling 300px - Smooth scroll to top on click - Hover tooltip with "Back to top" label - Scale animations on hover/tap - Progress bar at top showing scroll position - Gradient progress indicator ♿ Accessibility: - Added prefers-reduced-motion support - Proper ARIA labels - Keyboard accessible - Smooth animations respect user preferences 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
101 lines
2.2 KiB
CSS
101 lines
2.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
@source "../components/*.{js,ts,jsx,tsx}";
|
|
@source "../components/ui/*.{js,ts,jsx,tsx}";
|
|
@source "*.{js,ts,jsx,tsx}";
|
|
|
|
@theme {
|
|
--color-background: #0a0a0f;
|
|
--color-foreground: #ffffff;
|
|
|
|
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
|
|
/* Custom animations */
|
|
--animate-gradient: gradient 8s linear infinite;
|
|
--animate-float: float 3s ease-in-out infinite;
|
|
--animate-glow: glow 2s ease-in-out infinite alternate;
|
|
|
|
@keyframes gradient {
|
|
0%, 100% {
|
|
background-size: 200% 200%;
|
|
background-position: left center;
|
|
}
|
|
50% {
|
|
background-size: 200% 200%;
|
|
background-position: right center;
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-20px); }
|
|
}
|
|
|
|
@keyframes glow {
|
|
from {
|
|
box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
|
|
}
|
|
to {
|
|
box-shadow: 0 0 30px rgba(139, 92, 246, 0.6), 0 0 40px rgba(139, 92, 246, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
color: var(--color-foreground);
|
|
background: var(--color-background);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
@utility text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
@utility glass {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
@utility gradient-purple-blue {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
@utility gradient-cyan-purple {
|
|
background: linear-gradient(135deg, #2dd4bf 0%, #8b5cf6 100%);
|
|
}
|
|
|
|
@utility gradient-orange-pink {
|
|
background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
|
|
}
|
|
|
|
@utility gradient-green-teal {
|
|
background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
|
|
}
|
|
|
|
@utility gradient-indigo-purple {
|
|
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
|
|
}
|