157 lines
2.4 KiB
CSS
157 lines
2.4 KiB
CSS
/* Remove all the complex mobile menu styles and keep only what's necessary */
|
|
@import 'tailwindcss';
|
|
|
|
/* Dark mode support for Tailwind CSS v4 */
|
|
/* https://tailwindcss.com/docs/dark-mode */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@layer base {
|
|
:root {
|
|
font-family: 'Inter', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
--theme-transition: 0.3s ease;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
scroll-padding-top: 5rem;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
body {
|
|
@apply min-h-screen bg-white text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Simple theme transition */
|
|
body,
|
|
a,
|
|
button {
|
|
transition:
|
|
background-color var(--theme-transition),
|
|
color var(--theme-transition),
|
|
border-color var(--theme-transition);
|
|
}
|
|
}
|
|
|
|
/* Minimal responsive styles */
|
|
@media (max-width: 640px) {
|
|
html {
|
|
scroll-padding-top: 4rem;
|
|
}
|
|
|
|
/* Better touch targets on mobile */
|
|
button,
|
|
a {
|
|
@apply min-h-[44px];
|
|
}
|
|
}
|
|
|
|
/* Add smooth animations */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
transform: translateY(20px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
transform: translateY(-20px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from {
|
|
transform: scale(0.95);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Apply animations to elements */
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.6s ease forwards;
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slideUp 0.6s ease forwards;
|
|
}
|
|
|
|
.animate-slide-down {
|
|
animation: slideDown 0.6s ease forwards;
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scaleIn 0.6s ease forwards;
|
|
}
|
|
|
|
/* Staggered animation delays */
|
|
.delay-100 {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.delay-200 {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.delay-300 {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.delay-400 {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
/* Smooth hover transitions */
|
|
a,
|
|
button {
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
a.hover:hover,
|
|
button:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Smooth page transitions */
|
|
.page-transition {
|
|
transition:
|
|
opacity 0.3s ease,
|
|
transform 0.3s ease;
|
|
}
|
|
|
|
.page-entering {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
.page-entered {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|