hehe 2

assets/scripts/auth.js

@@ -68,6 +68,8 @@
     form.addEventListener("submit", async (event) => {
       event.preventDefault();
       const submit = form.querySelector("button[type='submit']");
+      form.classList.add("is-loading");
+      form.setAttribute("aria-busy", "true");
       if (submit) submit.disabled = true;
       if (message) message.textContent = "";
 
@@ -79,6 +81,8 @@
         if (message) message.textContent = error.message;
       } finally {
         if (submit) submit.disabled = false;
+        form.classList.remove("is-loading");
+        form.removeAttribute("aria-busy");
       }
     });
   }

assets/styles/misc.css

@@ -428,28 +428,163 @@ h2[id], h3[id], h4[id] { scroll-margin-top: 6.5rem; }
     /* border: 1px solid var(--border, #ccc); */
 }
 .auth-page {
-  min-height: 70vh;
+  min-height: min(760px, calc(100vh - 12rem));
   display: grid;
   place-items: center;
-  padding: 3rem 1rem;
+  padding: clamp(1.5rem, 4vw, 4rem) 1rem;
+  box-sizing: border-box;
+}
+
+.auth-panel {
+  width: min(100%, 440px);
+  overflow: hidden;
+  border: 1px solid color-mix(in oklab, var(--border) 86%, transparent);
+  border-radius: 8px;
+  background:
+    linear-gradient(180deg,
+      color-mix(in oklab, var(--surface) 96%, var(--accent) 4%),
+      var(--surface));
+  box-shadow: 0 22px 60px color-mix(in oklab, #000 16%, transparent);
+}
+
+.auth-intro {
+  padding: clamp(1.4rem, 4vw, 2rem) clamp(1.2rem, 4vw, 2rem) 1.1rem;
+  border-bottom: 1px solid color-mix(in oklab, var(--border) 76%, transparent);
+}
+
+.auth-kicker {
+  margin: 0 0 0.45rem;
+  color: var(--accent);
+  font-size: 0.76rem;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.auth-intro h1 {
+  margin: 0;
+  color: var(--fg);
+  font-size: clamp(1.8rem, 8vw, 2.45rem);
+  line-height: 1.05;
+}
+
+.auth-intro p:last-child {
+  max-width: 32ch;
+  margin: 0.8rem 0 0;
+  color: var(--muted);
+  line-height: 1.5;
 }
 
 .auth-form {
-  width: min(100%, 360px);
   display: grid;
-  gap: 0.8rem;
+  gap: 1rem;
+  padding: clamp(1.2rem, 4vw, 2rem);
 }
 
-.auth-form h1 {
-  margin: 0 0 0.5rem;
+.auth-field {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.auth-field label {
+  color: color-mix(in oklab, var(--fg) 82%, var(--muted) 18%);
+  font-size: 0.88rem;
+  font-weight: 800;
 }
 
 .auth-form input {
   width: 100%;
   box-sizing: border-box;
+  border: 1px solid color-mix(in oklab, var(--border) 92%, var(--fg) 8%);
+  border-radius: 7px;
+  background: color-mix(in oklab, var(--surface) 88%, var(--bg) 12%);
+  color: var(--fg);
+  font: inherit;
+  min-height: 3rem;
+  padding: 0.78rem 0.85rem;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
+}
+
+.auth-form input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
+  outline: none;
+}
+
+.auth-submit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
+  min-height: 3rem;
+  margin-top: 0.25rem;
+  border: 1px solid color-mix(in oklab, var(--accent) 72%, var(--fg) 28%);
+  border-radius: 7px;
+  background: color-mix(in oklab, var(--accent) 92%, #111 8%);
+  color: #fff;
+  cursor: pointer;
+  font: inherit;
+  font-weight: 800;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
+}
+
+.auth-submit:hover {
+  box-shadow: 0 12px 28px color-mix(in oklab, var(--accent) 28%, transparent);
+  filter: brightness(1.03);
+  transform: translateY(-1px);
+}
+
+.auth-submit:focus-visible {
+  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 24%, transparent);
+  outline: none;
+}
+
+.auth-submit:disabled {
+  cursor: progress;
+  filter: grayscale(0.2);
+  opacity: 0.78;
+  transform: none;
+}
+
+.auth-submit-spinner {
+  display: none;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid rgb(255 255 255 / 0.42);
+  border-top-color: #fff;
+  border-radius: 50%;
+}
+
+.auth-form.is-loading .auth-submit-spinner {
+  display: inline-block;
+  animation: auth-spin 0.8s linear infinite;
 }
 
 .auth-message {
   min-height: 1.4em;
+  margin: 0;
   color: #a33;
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+.auth-message:empty {
+  visibility: hidden;
+}
+
+@keyframes auth-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 600px) {
+  .auth-page {
+    min-height: calc(100vh - 10rem);
+    padding: 1rem 0;
+  }
+
+  .auth-panel {
+    width: 100%;
+  }
 }