UI overhault

app/globals.css

@@ -1,7 +1,137 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
-li {
+@layer base {
+  li {
     list-style-type: none;
+  }
+
+  /* Better focus visibility */
+  *:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  *:focus-visible {
+    outline: 2px solid rgb(59 130 246);
+    outline-offset: 2px;
+  }
+
+  /* Better text rendering */
+  body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* Screen reader only class */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
+@layer components {
+  /* Skeleton Loading Animation */
+  .skeleton {
+    background: linear-gradient(
+      90deg,
+      rgb(229 231 235) 0%,
+      rgb(243 244 246) 50%,
+      rgb(229 231 235) 100%
+    );
+    background-size: 200% 100%;
+    animation: skeleton-loading 1.5s ease-in-out infinite;
+    border-radius: 0.375rem;
+  }
+
+  @keyframes skeleton-loading {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  /* Enhanced focus ring */
+  .focus-ring:focus-visible {
+    outline: 2px solid rgb(59 130 246);
+    outline-offset: 2px;
+  }
+
+  /* Fade in animation */
+  .fade-in {
+    animation: fadeIn 0.3s ease-out;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Staggered list animation */
+  .fade-in-stagger > *:nth-child(1) { animation: fadeIn 0.3s ease-out 0ms backwards; }
+  .fade-in-stagger > *:nth-child(2) { animation: fadeIn 0.3s ease-out 50ms backwards; }
+  .fade-in-stagger > *:nth-child(3) { animation: fadeIn 0.3s ease-out 100ms backwards; }
+  .fade-in-stagger > *:nth-child(4) { animation: fadeIn 0.3s ease-out 150ms backwards; }
+  .fade-in-stagger > *:nth-child(5) { animation: fadeIn 0.3s ease-out 200ms backwards; }
+  .fade-in-stagger > *:nth-child(n+6) { animation: fadeIn 0.3s ease-out 250ms backwards; }
+
+  /* Button hover effect */
+  .button-hover-lift:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
+  }
+
+  .button-hover-lift:active {
+    transform: translateY(0);
+  }
+}
+
+@layer utilities {
+  /* Reduce motion for accessibility */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
+
+/* Print styles for email content */
+@media print {
+  nav, button, .no-print {
+    display: none !important;
+  }
+
+  body {
+    background: white;
+    color: black;
+  }
+
+  .email-content a::after {
+    content: " (" attr(href) ")";
+    font-size: 9pt;
+    color: #6b7280;
+  }
+
+  * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
 }