wip: make screen responsive for mobile and browser.

src/app/login/page.module.css

@@ -1,62 +1,75 @@
-.root {
-    width: 100vw;
-    height: 100vh;
-    
-  }
-
-.title {
-    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
-    font-family:
-        Greycliff CF,
-        var(--mantine-font-family);
-}
-  
-  
-  .mobileImage {
-    @media (min-width: 48em) {
-      display: none;
-    }
-  }
-  
-.desktopImage {
-    object-fit: cover;
-    width: 100%;
-    height: 100%;
-    @media (max-width: 47.99em) {
-      display: none;
-    }
-  }
-
-.carousel-wrapper {
-  width: 100%;
-  max-width: 800px;
-  margin: 0 auto;
-  overflow: hidden;
-}
- 
-.gradient-control {
-  width: 15%;
-  height: 100%;
-  position: absolute;
+.header {
+  position: fixed;
   top: 0;
-  z-index: 2;
-  background-color: transparent;
+  left: 0;
+  width: 100%;
+  z-index: 100;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+  background: linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%);
+  flex-wrap: wrap; /* allow wrapping on mobile */
+}
+
+.header-text {
+  display: flex;
+  flex-direction: column;
   justify-content: center;
-  opacity: 0.6;
+  flex: 1;
+  text-align: left;
+}
+
+/* Desktop text */
+.desktop-text {
   color: white;
-  pointer-events: all;
+  font-family: Roboto, sans-serif;
+  font-size: 1.5rem;
+  line-height: 1.2;
 }
- 
-/* First control is left */
-.gradient-control:first-of-type {
-  left: 0;
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
+
+.desktop-address {
+  font-family: Roboto, sans-serif;
+  color: white;
+  font-size: 0.9rem;
+  text-shadow: 1px 1px 2px blue;
+  margin-top: 0.25rem;
 }
- 
-/* Last control is right */
-.gradient-control:last-of-type {
-  right: 0;
-  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.0001));
+
+/* Mobile styles */
+.mobile-text {
+  color: white;
+  font-family: Roboto, sans-serif;
+  font-size: 1rem;
+  line-height: 1.2;
+  display: none;
+  text-align: center;
+}
+
+/* Media query for mobile */
+@media screen and (max-width: 768px) {
+  .header {
+    justify-content: center;
+    padding: 0.5rem 0.75rem;
+  }
+
+  .header-logo {
+    width: 50px;
+    margin-bottom: 0.5rem;
+  }
+
+  .header-text {
+    text-align: center;
+    flex-direction: column;
+  }
+
+  .desktop-text,
+  .desktop-address {
+    display: none;
+  }
+
+  .mobile-text {
+    display: block;
+    font-size: 0.9rem;
+  }
 }