right

assets/css/src/input.css

@@ -3,49 +3,146 @@
 @tailwind utilities;
 
 @layer components {
+    /* Button Styles */
     .btn-primary {
         @apply inline-flex items-center px-6 py-2.5 border border-transparent rounded-full shadow-md text-sm font-medium text-white bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50 transform hover:scale-105 transition-all;
     }
-    /* Default icon style (moon icon) */
-    #theme-toggle+.theme-toggle-btn i::before {
-        content: "\f186";
-        /* Moon icon */
-        font-family: "Font Awesome 5 Free";
-        font-weight: 900;
-        /* Solid icon */
-    }
     
-    /* Change to sun icon and color when checkbox is checked */
-    #theme-toggle:checked+.theme-toggle-btn i::before {
-        content: "\f185";
-        /* Sun icon */
-        color: theme('colors.yellow.400');
-        /* Tailwind yellow-400 color */
-    }
     .btn-secondary {
         @apply inline-flex items-center px-6 py-2.5 border border-gray-200 dark:border-gray-700 rounded-full shadow-md text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary/50 transform hover:scale-105 transition-all;
     }
+    /* [Previous styles remain unchanged until mobile menu section...] */
 
+    /* Mobile Menu */
+    #mobileMenu {
+        @apply overflow-hidden transition-all duration-300 ease-in-out opacity-0 max-h-0;
+    }
+
+    #mobileMenu.show {
+        @apply max-h-[300px] opacity-100;
+    }
+
+    #mobileMenu .space-y-4 {
+        @apply pb-6;
+    }
+
+    .mobile-nav-link {
+        @apply flex items-center justify-center px-6 py-3 text-gray-700 transition-all border border-transparent rounded-lg dark:text-gray-200 hover:bg-primary/10 dark:hover:bg-primary/20 hover:text-primary dark:hover:text-primary hover:border-primary/20 dark:hover:border-primary/30;
+    }
+
+    .mobile-nav-link i {
+        @apply text-xl transition-colors;
+    }
+
+    @media (max-width: 540px) {
+        .mobile-nav-link i {
+            @apply text-lg;
+        }
+    }
+
+    .mobile-nav-link.primary {
+        @apply text-white bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90;
+    }
+
+    .mobile-nav-link.primary i {
+        @apply mr-3 text-white;
+    }
+
+    .mobile-nav-link.secondary {
+        @apply text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600;
+    }
+
+    .mobile-nav-link.secondary i {
+        @apply mr-3 text-gray-500 dark:text-gray-400;
+    }
+
+    /* Theme Toggle */
+    #theme-toggle+.theme-toggle-btn i::before {
+        content: "\f186";
+        font-family: "Font Awesome 5 Free";
+        font-weight: 900;
+    }
+
+    #theme-toggle:checked+.theme-toggle-btn i::before {
+        content: "\f185";
+        color: theme('colors.yellow.400');
+    }
+
+    /* Navigation Components */
     .nav-link {
-        @apply flex items-center px-6 py-2.5 rounded-lg font-medium text-gray-700 dark:text-gray-200 hover:bg-primary/10 dark:hover:bg-primary/20 hover:text-primary dark:hover:text-primary transition-all border border-transparent hover:border-primary/20 dark:hover:border-primary/30;
+        @apply flex items-center text-gray-700 transition-all dark:text-gray-200;
+    }
+
+    /* Extra small screens (540px and below) */
+    @media (max-width: 540px) {
+        .nav-link {
+            @apply px-2 py-2 text-sm;
+        }
+        .nav-link i {
+            @apply mr-1 text-base;
+        }
+        .nav-link span {
+            @apply text-sm;
+        }
+        .site-logo {
+            @apply px-1 text-lg;
+        }
+        .nav-container {
+            @apply px-2;
+        }
+    }
+
+    /* Small screens (541px to 767px) */
+    @media (min-width: 541px) and (max-width: 767px) {
+        .nav-link {
+            @apply px-3 py-2;
+        }
+        .nav-link i {
+            @apply mr-2;
+        }
+        .site-logo {
+            @apply px-2 text-xl;
+        }
+        .nav-container {
+            @apply px-4;
+        }
+    }
+
+    /* Medium screens and up */
+    @media (min-width: 768px) {
+        .nav-link {
+            @apply px-6 py-2.5 rounded-lg font-medium border border-transparent hover:border-primary/20 dark:hover:border-primary/30;
+        }
+        .nav-link i {
+            @apply mr-3 text-lg;
+        }
+        .site-logo {
+            @apply px-3 text-2xl;
+        }
+        .nav-container {
+            @apply px-6;
+        }
+    }
+
+    .nav-link:hover {
+        @apply text-primary dark:text-primary bg-primary/10 dark:bg-primary/20;
     }
 
     .nav-link i {
-        @apply mr-3 text-lg text-gray-500 transition-colors dark:text-gray-400;
+        @apply text-gray-500 transition-colors dark:text-gray-400;
     }
 
     .nav-link:hover i {
         @apply text-primary;
     }
 
-    .mobile-nav-link {
+    @media (min-width: 1024px) {
-        @apply flex items-center px-6 py-3 text-gray-700 transition-all border border-transparent rounded-lg dark:text-gray-200 hover:bg-primary/10 dark:hover:bg-primary/20 hover:text-primary dark:hover:text-primary hover:border-primary/20 dark:hover:border-primary/30;
+        #mobileMenu {
-    }
+            @apply hidden !important;
-
+        }
-    .mobile-nav-link i {
-        @apply mr-3 text-lg text-gray-500 dark:text-gray-400;
     }
 
+    /* Menu Items */
     .menu-item {
         @apply flex items-center w-full px-4 py-3 text-sm text-gray-700 transition-all dark:text-gray-200 hover:bg-primary/10 dark:hover:bg-primary/20 hover:text-primary dark:hover:text-primary first:rounded-t-lg last:rounded-b-lg;
     }
@@ -54,6 +151,7 @@
         @apply mr-3 text-base text-gray-500 dark:text-gray-400;
     }
 
+    /* Form Components */
     .form-input {
         @apply w-full px-4 py-3 text-gray-900 transition-all border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary;
     }
@@ -70,7 +168,7 @@
         @apply mt-2 text-sm text-red-600 dark:text-red-400;
     }
 
-    /* Status Badge Styles */
+    /* Status Badges */
     .status-badge {
         @apply inline-flex items-center px-3 py-1 text-sm font-medium rounded-full;
     }
@@ -87,7 +185,7 @@
         @apply text-yellow-800 bg-yellow-100 dark:bg-yellow-600 dark:text-yellow-50;
     }
 
-    /* Auth Card Styles */
+    /* Auth Components */
     .auth-card {
         @apply w-full max-w-md p-8 mx-auto border shadow-xl bg-white/90 dark:bg-gray-800/90 rounded-2xl backdrop-blur-sm border-gray-200/50 dark:border-gray-700/50;
     }
@@ -130,6 +228,7 @@
         @apply text-gray-700 bg-white border-gray-200 hover:bg-gray-50 shadow-gray-200/50 dark:shadow-gray-900/50;
     }
 
+    /* Alert Components */
     .alert {
         @apply p-4 mb-4 shadow-lg rounded-xl backdrop-blur-sm;
     }
@@ -150,6 +249,32 @@
         @apply text-blue-800 border border-blue-200 bg-blue-100/90 dark:bg-blue-800/30 dark:text-blue-100 dark:border-blue-700;
     }
 
+    /* Layout Components */
+    .card {
+        @apply p-6 bg-white border rounded-lg shadow-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50;
+    }
+
+    .card-hover {
+        @apply transition-transform transform hover:-translate-y-1;
+    }
+
+    .grid-cards {
+        @apply grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3;
+    }
+
+    /* Typography */
+    .heading-1 {
+        @apply mb-6 text-3xl font-bold text-gray-900 dark:text-white;
+    }
+
+    .heading-2 {
+        @apply mb-4 text-2xl font-bold text-gray-900 dark:text-white;
+    }
+
+    .text-body {
+        @apply text-gray-600 dark:text-gray-300;
+    }
+
     /* Turnstile Widget */
     .turnstile {
         @apply flex items-center justify-center my-4;

static/css/tailwind.css

@@ -1386,6 +1386,8 @@ select {
   left: 0;
 }
 
+/* Button Styles */
+
 .btn-primary {
   display: inline-flex;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1435,25 +1437,6 @@ select {
   --tw-ring-offset-width: 2px;
 }
 
-/* Default icon style (moon icon) */
-
-#theme-toggle+.theme-toggle-btn i::before {
-  content: "\f186";
-  /* Moon icon */
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-  /* Solid icon */
-}
-
-/* Change to sun icon and color when checkbox is checked */
-
-#theme-toggle:checked+.theme-toggle-btn i::before {
-  content: "\f185";
-  /* Sun icon */
-  color: #facc15;
-  /* Tailwind yellow-400 color */
-}
-
 .btn-secondary {
   display: inline-flex;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1513,67 +1496,32 @@ select {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
-.nav-link {
+/* [Previous styles remain unchanged until mobile menu section...] */
-  display: flex;
+
-  align-items: center;
+/* Mobile Menu */
-  border-radius: 0.5rem;
+
-  border-width: 1px;
+#mobileMenu {
-  border-color: transparent;
+  max-height: 0px;
-  padding-left: 1.5rem;
+  overflow: hidden;
-  padding-right: 1.5rem;
+  opacity: 0;
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
-  font-weight: 500;
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
   transition-property: all;
+  transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
 }
 
-.nav-link:hover {
+#mobileMenu.show {
-  border-color: rgb(79 70 229 / 0.2);
+  max-height: 300px;
-  background-color: rgb(79 70 229 / 0.1);
+  opacity: 1;
-  --tw-text-opacity: 1;
-  color: rgb(79 70 229 / var(--tw-text-opacity));
 }
 
-.nav-link:is(.dark *) {
+#mobileMenu .space-y-4 {
-  --tw-text-opacity: 1;
+  padding-bottom: 1.5rem;
-  color: rgb(229 231 235 / var(--tw-text-opacity));
-}
-
-.nav-link:hover:is(.dark *) {
-  border-color: rgb(79 70 229 / 0.3);
-  background-color: rgb(79 70 229 / 0.2);
-  --tw-text-opacity: 1;
-  color: rgb(79 70 229 / var(--tw-text-opacity));
-}
-
-.nav-link i {
-  margin-right: 0.75rem;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.nav-link i:is(.dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
-}
-
-.nav-link:hover i {
-  --tw-text-opacity: 1;
-  color: rgb(79 70 229 / var(--tw-text-opacity));
 }
 
 .mobile-nav-link {
   display: flex;
   align-items: center;
+  justify-content: center;
   border-radius: 0.5rem;
   border-width: 1px;
   border-color: transparent;
@@ -1608,18 +1556,250 @@ select {
 }
 
 .mobile-nav-link i {
-  margin-right: 0.75rem;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+@media (max-width: 540px) {
+  .mobile-nav-link i {
     font-size: 1.125rem;
     line-height: 1.75rem;
+  }
+}
+
+.mobile-nav-link.primary {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+  --tw-gradient-to: #e11d48 var(--tw-gradient-to-position);
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.mobile-nav-link.primary:hover {
+  --tw-gradient-from: rgb(79 70 229 / 0.9) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+  --tw-gradient-to: rgb(225 29 72 / 0.9) var(--tw-gradient-to-position);
+}
+
+.mobile-nav-link.primary i {
+  margin-right: 0.75rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.mobile-nav-link.secondary {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.mobile-nav-link.secondary:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
+.mobile-nav-link.secondary:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.mobile-nav-link.secondary:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
+.mobile-nav-link.secondary i {
+  margin-right: 0.75rem;
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
-.mobile-nav-link i:is(.dark *) {
+.mobile-nav-link.secondary i:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+/* Theme Toggle */
+
+#theme-toggle+.theme-toggle-btn i::before {
+  content: "\f186";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+}
+
+#theme-toggle:checked+.theme-toggle-btn i::before {
+  content: "\f185";
+  color: #facc15;
+}
+
+/* Navigation Components */
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.nav-link:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+/* Extra small screens (540px and below) */
+
+@media (max-width: 540px) {
+  .nav-link {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .nav-link i {
+    margin-right: 0.25rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .nav-link span {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .site-logo {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
+  .nav-container {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+}
+
+/* Small screens (541px to 767px) */
+
+@media (min-width: 541px) and (max-width: 767px) {
+  .nav-link {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .nav-link i {
+    margin-right: 0.5rem;
+  }
+
+  .site-logo {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .nav-container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+/* Medium screens and up */
+
+@media (min-width: 768px) {
+  .nav-link {
+    border-radius: 0.5rem;
+    border-width: 1px;
+    border-color: transparent;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+    font-weight: 500;
+  }
+
+  .nav-link:hover {
+    border-color: rgb(79 70 229 / 0.2);
+  }
+
+  .nav-link:hover:is(.dark *) {
+    border-color: rgb(79 70 229 / 0.3);
+  }
+
+  .nav-link i {
+    margin-right: 0.75rem;
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+
+  .site-logo {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .nav-container {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+.nav-link:hover {
+  background-color: rgb(79 70 229 / 0.1);
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity));
+}
+
+.nav-link:hover:is(.dark *) {
+  background-color: rgb(79 70 229 / 0.2);
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity));
+}
+
+.nav-link i {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.nav-link i:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.nav-link:hover i {
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity));
+}
+
+@media (min-width: 1024px) {
+  #mobileMenu {
+    display: none !important;
+  }
+}
+
+/* Menu Items */
+
 .menu-item {
   display: flex;
   width: 100%;
@@ -1677,6 +1857,8 @@ select {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+/* Form Components */
+
 .form-input {
   width: 100%;
   border-radius: 0.5rem;
@@ -1768,7 +1950,7 @@ select {
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
-/* Status Badge Styles */
+/* Status Badges */
 
 .status-badge {
   display: inline-flex;
@@ -1825,7 +2007,7 @@ select {
   color: rgb(254 252 232 / var(--tw-text-opacity));
 }
 
-/* Auth Card Styles */
+/* Auth Components */
 
 .auth-card {
   margin-left: auto;
@@ -2015,6 +2197,8 @@ select {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+/* Alert Components */
+
 .alert {
   margin-bottom: 1rem;
   border-radius: 0.75rem;
@@ -2095,6 +2279,96 @@ select {
   color: rgb(219 234 254 / var(--tw-text-opacity));
 }
 
+/* Layout Components */
+
+.card {
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-color: rgb(229 231 235 / 0.5);
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding: 1.5rem;
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.card:is(.dark *) {
+  border-color: rgb(55 65 81 / 0.5);
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.card-hover {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.card-hover:hover {
+  --tw-translate-y: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.grid-cards {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .grid-cards {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .grid-cards {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+/* Typography */
+
+.heading-1 {
+  margin-bottom: 1.5rem;
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.heading-1:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.heading-2 {
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.heading-2:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-body {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.text-body:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
 /* Turnstile Widget */
 
 .turnstile {
@@ -2260,6 +2534,10 @@ select {
   height: 2rem;
 }
 
+.max-h-\[300px\] {
+  max-height: 300px;
+}
+
 .min-h-\[calc\(100vh-16rem\)\] {
   min-height: calc(100vh - 16rem);
 }
@@ -2296,6 +2574,10 @@ select {
   max-width: 48rem;
 }
 
+.max-w-lg {
+  max-width: 32rem;
+}
+
 .max-w-md {
   max-width: 28rem;
 }
@@ -2386,18 +2668,6 @@ select {
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-x-6 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-8 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(2rem * var(--tw-space-x-reverse));
-  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2564,6 +2834,10 @@ select {
   background-color: rgb(220 252 231 / 0.9);
 }
 
+.bg-primary\/10 {
+  background-color: rgb(79 70 229 / 0.1);
+}
+
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -2654,6 +2928,11 @@ select {
   padding: 2rem;
 }
 
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2878,6 +3157,10 @@ select {
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2939,14 +3222,6 @@ select {
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
-.transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2965,6 +3240,14 @@ select {
   transition-duration: 150ms;
 }
 
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .content-\[\'\'\] {
   --tw-content: '';
   content: var(--tw-content);
@@ -3041,6 +3324,11 @@ select {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -3093,11 +3381,6 @@ select {
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
-.focus\:border-primary:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(79 70 229 / var(--tw-border-opacity));
-}
-
 .focus\:underline:focus {
   text-decoration-line: underline;
 }
@@ -3266,6 +3549,11 @@ select {
   color: rgb(220 252 231 / var(--tw-text-opacity));
 }
 
+.dark\:text-primary:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity));
+}
+
 .dark\:text-red-100:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(254 226 226 / var(--tw-text-opacity));
@@ -3310,11 +3598,6 @@ select {
   --tw-ring-color: rgb(250 204 21 / 0.3);
 }
 
-.dark\:hover\:bg-gray-600:hover:is(.dark *) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-}
-
 .dark\:hover\:bg-gray-700:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -3338,6 +3621,18 @@ select {
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1rem * var(--tw-space-x-reverse));
+    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .sm\:space-x-6 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-x-reverse: 0;
+    margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+    margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+  }
 }
 
 @media (min-width: 768px) {
@@ -3345,14 +3640,6 @@ select {
     margin-top: 0px;
   }
 
-  .md\:flex {
-    display: flex;
-  }
-
-  .md\:hidden {
-    display: none;
-  }
-
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3393,6 +3680,14 @@ select {
     grid-column: span 2 / span 2;
   }
 
+  .lg\:flex {
+    display: flex;
+  }
+
+  .lg\:hidden {
+    display: none;
+  }
+
   .lg\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }

static/js/main.js

@@ -36,15 +36,50 @@ document.addEventListener('submit', (e) => {
     }
 });
 
-// Mobile menu toggle
+// Mobile menu toggle with transitions
-const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+document.addEventListener('DOMContentLoaded', () => {
-const mobileMenu = document.getElementById('mobileMenu');
+    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
+    const mobileMenu = document.getElementById('mobileMenu');
 
-if (mobileMenuBtn && mobileMenu) {
+    if (mobileMenuBtn && mobileMenu) {
-    mobileMenuBtn.addEventListener('click', () => {
+        let isMenuOpen = false;
-        mobileMenu.classList.toggle('hidden');
+
+        const toggleMenu = () => {
+            isMenuOpen = !isMenuOpen;
+            mobileMenu.classList.toggle('show', isMenuOpen);
+            mobileMenuBtn.setAttribute('aria-expanded', isMenuOpen.toString());
+            
+            // Update icon
+            const icon = mobileMenuBtn.querySelector('i');
+            icon.classList.remove(isMenuOpen ? 'fa-bars' : 'fa-times');
+            icon.classList.add(isMenuOpen ? 'fa-times' : 'fa-bars');
+        };
+
+        mobileMenuBtn.addEventListener('click', toggleMenu);
+
+        // Close menu when clicking outside
+        document.addEventListener('click', (e) => {
+            if (isMenuOpen && !mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
+                toggleMenu();
+            }
         });
-}
+
+        // Close menu when pressing escape
+        document.addEventListener('keydown', (e) => {
+            if (isMenuOpen && e.key === 'Escape') {
+                toggleMenu();
+            }
+        });
+
+        // Handle viewport changes
+        const mediaQuery = window.matchMedia('(min-width: 1024px)');
+        mediaQuery.addEventListener('change', (e) => {
+            if (e.matches && isMenuOpen) {
+                toggleMenu();
+            }
+        });
+    }
+});
 
 // User dropdown toggle
 const userMenuBtn = document.getElementById('userMenuBtn');

templates/account/login.html

@@ -8,25 +8,34 @@
 
 {% block content %}
 <div class="flex items-center justify-center min-h-[calc(100vh-16rem)]">
-    <div class="w-full max-w-md">
+  <div class="w-full max-w-lg">
     <div class="auth-card">
       <h1 class="auth-title">{% trans "Welcome Back" %}</h1>
 
       {% get_providers as socialaccount_providers %}
-            
       {% if socialaccount_providers %}
       <div class="space-y-3">
         {% for provider in socialaccount_providers %}
-                        <a href="{% provider_login_url provider.id process='login' %}"
+        <a
+          href="{% provider_login_url provider.id process='login' %}"
           class="btn-social {% if provider.id == 'discord' %}btn-discord{% elif provider.id == 'google' %}btn-google{% endif %}"
           role="button"
           tabindex="0"
-                           onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }">
+          onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }"
+        >
           {% if provider.id == 'google' %}
-                                <img src="{% static 'images/google-icon.svg' %}" alt="Google" class="w-5 h-5 mr-3">
+          <img
+            src="{% static 'images/google-icon.svg' %}"
+            alt="Google"
+            class="w-5 h-5 mr-3"
+          />
           <span>Continue with Google</span>
           {% elif provider.id == 'discord' %}
-                                <img src="{% static 'images/discord-icon.svg' %}" alt="Discord" class="w-5 h-5 mr-3">
+          <img
+            src="{% static 'images/discord-icon.svg' %}"
+            alt="Discord"
+            class="w-5 h-5 mr-3"
+          />
           <span>Continue with Discord</span>
           {% endif %}
         </a>
@@ -40,7 +49,6 @@
 
       <form class="space-y-6" method="POST" action="{% url 'account_login' %}">
         {% csrf_token %}
-                
         {% if form.non_field_errors %}
         <div class="alert alert-error">
           <div class="text-sm">{{ form.non_field_errors }}</div>
@@ -51,9 +59,14 @@
           <label for="id_login" class="form-label">
             {% trans "Username or Email" %}
           </label>
-                    <input type="text" name="login" id="id_login" required
+          <input
+            type="text"
+            name="login"
+            id="id_login"
+            required
             autocomplete="username email"
-                           class="form-input">
+            class="form-input"
+          />
           {% if form.login.errors %}
           <p class="form-error">{{ form.login.errors }}</p>
           {% endif %}
@@ -63,9 +76,14 @@
           <label for="id_password" class="form-label">
             {% trans "Password" %}
           </label>
-                    <input type="password" name="password" id="id_password" required
+          <input
+            type="password"
+            name="password"
+            id="id_password"
+            required
             autocomplete="current-password"
-                           class="form-input">
+            class="form-input"
+          />
           {% if form.password.errors %}
           <p class="form-error">{{ form.password.errors }}</p>
           {% endif %}
@@ -73,26 +91,38 @@
 
         <div class="flex items-center justify-between">
           <div class="flex items-center">
-                        <input type="checkbox" name="remember" id="id_remember"
+            <input
-                               class="w-4 h-4 border-gray-300 rounded text-primary focus:ring-primary/50 dark:border-gray-700">
+              type="checkbox"
-                        <label for="id_remember" class="block ml-2 text-sm text-gray-700 dark:text-gray-300">
+              name="remember"
+              id="id_remember"
+              class="w-4 h-4 border-gray-300 rounded text-primary focus:ring-primary/50 dark:border-gray-700"
+            />
+            <label
+              for="id_remember"
+              class="block ml-2 text-sm text-gray-700 dark:text-gray-300"
+            >
               {% trans "Remember me" %}
             </label>
           </div>
 
           <div class="text-sm">
-                        <a href="{% url 'account_reset_password' %}" 
+            <a
+              href="{% url 'account_reset_password' %}"
               class="font-medium transition-colors text-primary hover:text-primary/80 focus:outline-none focus:underline"
-                           onkeydown="if(event.key === 'Enter') { this.click(); }">
+              onkeydown="if(event.key === 'Enter') { this.click(); }"
+            >
               {% trans "Forgot Password?" %}
             </a>
           </div>
         </div>
 
         {% turnstile_widget %}
-
         {% if redirect_field_value %}
-                    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}">
+        <input
+          type="hidden"
+          name="{{ redirect_field_name }}"
+          value="{{ redirect_field_value }}"
+        />
         {% endif %}
 
         <div>
@@ -106,9 +136,11 @@
       <div class="mt-6 text-sm text-center">
         <p class="text-gray-600 dark:text-gray-400">
           {% trans "Don't have an account?" %}
-                    <a href="{% url 'account_signup' %}" 
+          <a
+            href="{% url 'account_signup' %}"
             class="ml-1 font-medium transition-colors text-primary hover:text-primary/80 focus:outline-none focus:underline"
-                       onkeydown="if(event.key === 'Enter') { this.click(); }">
+            onkeydown="if(event.key === 'Enter') { this.click(); }"
+          >
             {% trans "Sign up" %}
           </a>
         </p>

templates/account/signup.html

@@ -8,7 +8,7 @@
 
 {% block content %}
 <div class="flex items-center justify-center min-h-[calc(100vh-16rem)]">
-  <div class="w-full max-w-md">
+  <div class="w-full max-w-lg">
     <div class="auth-card">
       <h1 class="auth-title">{% trans "Create Account" %}</h1>
 
@@ -24,10 +24,18 @@
           onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }"
         >
           {% if provider.id == 'google' %}
-          <img src="{% static 'images/google-icon.svg' %}" alt="Google" class="w-5 h-5 mr-3">
+          <img
+            src="{% static 'images/google-icon.svg' %}"
+            alt="Google"
+            class="w-5 h-5 mr-3"
+          />
           <span>Continue with Google</span>
           {% elif provider.id == 'discord' %}
-          <img src="{% static 'images/discord-icon.svg' %}" alt="Discord" class="w-5 h-5 mr-3">
+          <img
+            src="{% static 'images/discord-icon.svg' %}"
+            alt="Discord"
+            class="w-5 h-5 mr-3"
+          />
           <span>Continue with Discord</span>
           {% endif %}
         </a>
@@ -136,7 +144,6 @@
         </div>
 
         {% turnstile_widget %}
-
         {% if redirect_field_value %}
         <input
           type="hidden"

templates/accounts/turnstile_widget.html

@@ -1,4 +1,22 @@
-<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+<script
+  src="https://challenges.cloudflare.com/turnstile/v0/api.js"
+  async
+  defer
+></script>
 <div class="turnstile">
-    <div class="cf-turnstile" data-sitekey="{{ site_key }}" data-theme="light"></div>
+  <div
+    id="turnstile-widget"
+    class="cf-turnstile"
+    data-sitekey="{{ site_key }}"
+  ></div>
 </div>
+
+<script>
+  // Apply theme to the Turnstile widget based on the retrieved theme
+  document.addEventListener("DOMContentLoaded", function () {
+    const turnstileWidget = document.getElementById("turnstile-widget");
+    if (turnstileWidget) {
+      turnstileWidget.setAttribute("data-theme", theme);
+    }
+  });
+</script>

templates/base/base.html

@@ -1,11 +1,13 @@
 {% load static %}
 <!DOCTYPE html>
 <html lang="en">
+  <!-- [Previous head content remains unchanged...] -->
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{% block title %}ThrillWiki{% endblock %}</title>
 
+    <!-- [Previous head content remains unchanged...] -->
     <!-- Google Fonts -->
     <link
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
@@ -14,7 +16,6 @@
 
     <!-- Prevent flash of wrong theme -->
     <script>
-      // Get theme from localStorage or system preference
       let theme = localStorage.getItem("theme");
       if (!theme) {
         theme = window.matchMedia("(prefers-color-scheme: dark)").matches
@@ -22,7 +23,6 @@
           : "light";
         localStorage.setItem("theme", theme);
       }
-      // Apply theme immediately before page loads
       if (theme === "dark") {
         document.documentElement.classList.add("dark");
       }
@@ -41,86 +41,63 @@
     />
 
     {% block extra_head %}{% endblock %}
-
-    <style>
-      /* Smooth theme transitions */
-      :root {
-        --theme-transition-duration: 200ms;
-      }
-
-      body {
-        transition: background-color var(--theme-transition-duration) ease-in-out,
-          color var(--theme-transition-duration) ease-in-out;
-      }
-
-      /* Ensure theme toggle button has consistent size */
-      #theme-toggle {
-        width: 40px;
-        height: 40px;
-        align-items: center;
-        justify-content: center;
-      }
-    </style>
   </head>
-  <body
+  <body class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950 dark:text-white">
-    class="flex flex-col min-h-screen text-gray-900 bg-gradient-to-br from-white via-blue-50 to-indigo-50 dark:from-gray-950 dark:via-indigo-950 dark:to-purple-950 dark:text-white"
-  >
     <!-- Header -->
-    <header
+    <header class="border-b shadow-lg bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50">
-      class="border-b shadow-lg bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
+      <nav class="container mx-auto nav-container">
-    >
-      <nav class="container px-6 py-4 mx-auto">
         <div class="flex items-center justify-between">
           <!-- Logo -->
           <div class="flex items-center">
             <a
               href="{% url 'home' %}"
-              class="px-3 text-2xl font-bold text-transparent transition-transform bg-gradient-to-r from-primary to-secondary bg-clip-text hover:scale-105"
+              class="font-bold text-transparent transition-transform site-logo bg-gradient-to-r from-primary to-secondary bg-clip-text hover:scale-105"
             >
               ThrillWiki
             </a>
           </div>
 
-          <!-- Desktop Navigation -->
+          <!-- Navigation Links (Always Visible) -->
-          <div class="items-center hidden space-x-8 md:flex">
+          <div class="flex items-center space-x-2 sm:space-x-4">
-            <a href="{% url 'parks:park_list' %}" class="nav-link group">
+            <a href="{% url 'parks:park_list' %}" class="nav-link">
               <i class="fas fa-map-marker-alt"></i>
               <span>Parks</span>
             </a>
-            <a href="{% url 'rides:ride_list' %}" class="nav-link group">
+            <a href="{% url 'rides:ride_list' %}" class="nav-link">
               <i class="fas fa-rocket"></i>
               <span>Rides</span>
             </a>
           </div>
 
           <!-- Search Bar -->
-          <div class="flex-1 hidden max-w-md mx-8 md:flex">
+          <div class="flex-1 hidden max-w-md mx-8 lg:flex">
             <form action="{% url 'search' %}" method="get" class="w-full">
               <div class="relative">
                 <input
                   type="text"
                   name="q"
                   placeholder="Search parks and rides..."
-                  class="w-full px-4 py-2 text-gray-900 transition-all border border-gray-200 rounded-full dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm dark:text-white focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  class="form-input"
                 />
               </div>
             </form>
           </div>
 
           <!-- Right Side Menu -->
-          <div class="flex items-center space-x-6">
+          <div class="flex items-center space-x-2 sm:space-x-6">
             <!-- Theme Toggle -->
             <label for="theme-toggle" class="cursor-pointer">
               <input type="checkbox" id="theme-toggle" class="hidden" />
               <div
-                class="inline-flex items-center justify-center p-2 text-gray-500 transition-all bg-white border border-gray-200 rounded-lg theme-toggle-btn hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-600"
+                class="inline-flex items-center justify-center p-2 text-gray-500 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary theme-toggle-btn"
                 role="button"
                 aria-label="Toggle dark mode"
               >
-                <i class="text-lg fas"></i>
+                <i class="text-xl fas"></i>
               </div>
             </label>
 
+            <!-- [Rest of the content remains unchanged...] -->
             <!-- User Menu -->
             {% if user.is_authenticated %}
             <div class="relative">
@@ -135,9 +112,7 @@
                   class="w-8 h-8 rounded-full ring-2 ring-primary/20"
                 />
                 {% else %}
-                <div
+                <div class="flex items-center justify-center w-8 h-8 text-white rounded-full bg-gradient-to-br from-primary to-secondary">
-                  class="flex items-center justify-center w-8 h-8 text-white rounded-full bg-gradient-to-br from-primary to-secondary"
-                >
                   {{ user.username.0|upper }}
                 </div>
                 {% endif %}
@@ -146,10 +121,7 @@
               <!-- Dropdown Menu -->
               <div id="userDropdown" class="dropdown-menu">
                 <div class="py-1">
-                  <a
+                  <a href="{% url 'user_profile' user.username %}" class="menu-item">
-                    href="{% url 'user_profile' user.username %}"
-                    class="menu-item"
-                  >
                     <i class="w-5 fas fa-user"></i>
                     <span>Profile</span>
                   </a>
@@ -174,7 +146,8 @@
               </div>
             </div>
             {% else %}
-            <div class="flex space-x-3">
+            <!-- Login/Register (Desktop) -->
+            <div class="hidden space-x-3 lg:flex">
               <a href="{% url 'account_login' %}" class="btn-secondary">
                 <i class="mr-2 fas fa-sign-in-alt"></i>
                 Login
@@ -189,45 +162,51 @@
             <!-- Mobile Menu Button -->
             <button
               id="mobileMenuBtn"
-              class="p-2 text-gray-500 rounded-lg md:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
+              class="p-2 text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-400"
+              aria-label="Toggle mobile menu"
             >
-              <i class="fas fa-bars"></i>
+              <i class="text-2xl fas fa-bars"></i>
             </button>
           </div>
         </div>
 
         <!-- Mobile Menu -->
-        <div
+        <div id="mobileMenu">
-          id="mobileMenu"
+          <div class="space-y-4">
-          class="hidden py-2 mt-4 md:hidden bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg rounded-xl"
+            <!-- Search (Mobile) -->
-        >
+            <form action="{% url 'search' %}" method="get" class="mb-4">
-          <a href="{% url 'parks:park_list' %}" class="mobile-nav-link">
-            <i class="w-5 fas fa-map-marker-alt"></i>
-            <span>Parks</span>
-          </a>
-          <a href="{% url 'rides:ride_list' %}" class="mobile-nav-link">
-            <i class="w-5 fas fa-rocket"></i>
-            <span>Rides</span>
-          </a>
-          <form action="{% url 'search' %}" method="get" class="px-4 py-2">
               <input
                 type="text"
                 name="q"
                 placeholder="Search parks and rides..."
-              class="w-full px-4 py-2 text-gray-900 border border-gray-200 rounded-full dark:border-gray-700 bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm dark:text-white"
+                class="form-input"
               />
             </form>
+
+            {% if not user.is_authenticated %}
+            <!-- Login/Register (Mobile) -->
+            <div class="flex items-center space-x-3">
+              <a href="{% url 'account_login' %}" class="flex-1 mobile-nav-link secondary">
+                <i class="fas fa-sign-in-alt"></i>
+                <span>Login</span>
+              </a>
+              <a href="{% url 'account_signup' %}" class="flex-1 mobile-nav-link primary">
+                <i class="fas fa-user-plus"></i>
+                <span>Register</span>
+              </a>
+            </div>
+            {% endif %}
+          </div>
         </div>
       </nav>
     </header>
 
+    <!-- [Rest of the content remains unchanged...] -->
     <!-- Flash Messages -->
     {% if messages %}
     <div class="container px-6 mx-auto mt-4">
       {% for message in messages %}
-      <div
+      <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">
-        class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}"
-      >
         {{ message }}
       </div>
       {% endfor %}
@@ -240,9 +219,7 @@
     </main>
 
     <!-- Footer -->
-    <footer
+    <footer class="mt-auto border-t bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50">
-      class="mt-auto border-t bg-white/90 dark:bg-gray-800/90 backdrop-blur-lg border-gray-200/50 dark:border-gray-700/50"
-    >
       <div class="container px-6 py-6 mx-auto">
         <div class="flex items-center justify-between">
           <div class="text-gray-600 dark:text-gray-400">
@@ -252,13 +229,11 @@
             <a
               href="{% url 'terms' %}"
               class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
-              >Terms</a
+            >Terms</a>
-            >
             <a
               href="{% url 'privacy' %}"
               class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-primary"
-              >Privacy</a
+            >Privacy</a>
-            >
           </div>
         </div>
       </div>

thrillwiki/settings.py

@@ -12,7 +12,7 @@ SECRET_KEY = 'django-insecure-=0)^0#h#k$0@$8$ys=^$0#h#k$0@$8$ys=^'
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = ['localhost', '127.0.0.1']
+ALLOWED_HOSTS = ['localhost', '127.0.0.1', 'thrillwiki.com']
 
 # Application definition
 INSTALLED_APPS = [