mirror of
https://github.com/PlatypusPus/MushroomEmpire.git
synced 2026-02-07 22:18:59 +00:00
47 lines
1.5 KiB
CSS
47 lines
1.5 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
html, body { height: 100%; }
|
|
body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
|
|
|
|
/* Custom utilities */
|
|
.container-max { @apply max-w-7xl mx-auto px-4; }
|
|
|
|
/* Smooth scrolling for in-page anchors */
|
|
html { scroll-behavior: smooth; }
|
|
|
|
/* Subtle hero background animations */
|
|
@keyframes drift {
|
|
0% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
|
|
50% { transform: translate3d(10px,-8px,0) scale(1.02) rotate(8deg); }
|
|
100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
|
|
}
|
|
|
|
.animate-drift-slow {
|
|
animation: drift 16s ease-in-out infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
.animate-drift-slower {
|
|
animation: drift 22s ease-in-out infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
/* Reveal on scroll */
|
|
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 600ms ease; }
|
|
.reveal-visible { opacity: 1; transform: translateY(0); }
|
|
|
|
/* Respect user motion preferences */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
.animate-drift-slow, .animate-drift-slower { animation: none !important; }
|
|
.reveal { opacity: 1; transform: none; transition: none; }
|
|
}
|
|
|
|
/* Performance: avoid rendering off-screen content until needed */
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
contain-intrinsic-size: 1px 1000px; /* reserve space to prevent big jumps */
|
|
}
|