1 files changed, 62 insertions, 0 deletions
diff --git a/frontend/src/styles/login.css b/frontend/src/styles/login.css
new file mode 100644
index 0000000..4592016
--- /dev/null
+++ b/frontend/src/styles/login.css
@@ -0,0 +1,62 @@
+.login-page {
+    background-image: url("../src/assets/map-blurred.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    height: 100vh;
+    width: 100vw;
+}
+
+/* Login Card */
+.login-card {
+    background-color: var(--card-bg);
+    backdrop-filter: blur(8px);
+    border-radius: var(--border-radius);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    padding: 40px;
+    text-align: center;
+    width: 360px;
+
+    & .subtitle {
+        color: var(--color-subtitle);
+        font-size: var(--text-small);
+        font-weight: bold;
+        margin-bottom: 25px;
+    }
+
+    @media screen and (max-width: 768px) {
+        .login-card {
+            margin: 0 1rem;
+        }
+    }
+}
+
+/* Form */
+.login-form {
+    text-align: left;
+}
+
+.form-group {
+    margin-bottom: 20px;
+
+    & label {
+        color: var(--color-label);
+        display: block;
+        font-size: var(--text-small);
+        font-weight: bold;
+        margin-bottom: var(--gap-small);
+    }
+}
+
+.loading-spinner-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 20px;
+    transform: scale(0.5);
+}