wip tailwind theme

assets/css/app.css

@@ -1,10 +1,121 @@
 @import "tailwindcss";
-
 @import "header.css";
 
-body {
-    background: #fdfdff;
+/* Modern Design System */
+:root {
+  --primary-blue: #3b82f6;
+  --primary-blue-dark: #2563eb;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
 }
+
+/* Base Styles */
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #fdfdff;
+  color: var(--gray-800);
+  line-height: 1.6;
+}
+
+/* Gradient Backgrounds */
+.gradient-bg {
+  background: linear-gradient(120deg, #f0f9ff 0%, #e0f2fe 100%);
+}
+
+.gradient-bg-dark {
+  background: linear-gradient(120deg, #1e293b 0%, #334155 100%);
+}
+
+/* Component Styles */
+.article-card {
+  transition: all 0.3s ease;
+  transform: translateY(0);
+}
+
+.article-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.featured-article {
+  transition: transform 0.3s ease;
+}
+
+.featured-article:hover {
+  transform: scale(1.02);
+}
+
+/* Tag Styles */
+.tag {
+  transition: all 0.2s ease;
+}
+
+.tag:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+/* Button Styles */
+.btn-primary {
+  background: var(--primary-blue);
+  color: white;
+  transition: background-color 0.2s ease;
+}
+
+.btn-primary:hover {
+  background: var(--primary-blue-dark);
+}
+
+/* Responsive Typography */
+@media (max-width: 768px) {
+  .text-hero {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+}
+
+/* Newsletter Styles */
+.newsletter-form {
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+/* Footer Styles */
+.footer-section {
+  background: var(--gray-900);
+  color: white;
+}
+
+.footer-link {
+  color: #9ca3af;
+  transition: color 0.2s ease;
+}
+
+.footer-link:hover {
+  color: white;
+}
+
+/* Mobile Menu Styles */
+.mobile-menu {
+  transition: all 0.3s ease;
+}
+
+.mobile-menu-enter {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.mobile-menu-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+}
+
 /* Breadcrumb Styles */
 .breadcrumb-nav {
   width: 100%;
@@ -33,54 +144,34 @@ body {
   display: flex;
   align-items: center;
   font-size: 0.875rem;
-  color: #64748b;
+  color: var(--gray-600);
 }
 
 .breadcrumb-item a {
-  color: #64748b;
+  color: var(--gray-600);
   text-decoration: none;
   transition: color 0.2s ease;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
 }
 
 .breadcrumb-item a:hover {
-  color: #3b82f6;
+  color: var(--primary-blue);
 }
 
 .breadcrumb-item:not(:last-child)::after {
   content: "/";
   margin: 0 0.5rem;
-  color: #cbd5e1;
+  color: var(--gray-300);
 }
 
 .breadcrumb-item.active {
-  color: #3b82f6;
+  color: var(--primary-blue);
   font-weight: 500;
 }
 
-.breadcrumb-item i {
-  font-size: 0.75rem;
-}
-
-/* Responsive styles */
+/* Responsive Utilities */
 @media (max-width: 768px) {
-  .breadcrumb-list {
-    padding: 0.5rem 0.75rem;
-  }
-  
-  .breadcrumb-item {
-    font-size: 0.8125rem;
-  }
-  
-  .breadcrumb-item:not(:last-child)::after {
-    margin: 0 0.25rem;
+  .container {
+    padding-left: 1rem;
+    padding-right: 1rem;
   }
 }
-
-/* @media (max-width: 480px) {
-  .breadcrumb-item:nth-last-child(2):not(.active) {
-    display: none;
-  }
-} */