UI polish: brand mark, button states, status styling

- purple gradient logo dot (matches the favicon) above the title,
  wrapped with h1 + tagline in a header block
- subtle radial page-background tint for depth
- button: soft shadow, hover lift, visible :focus-visible ring,
  and a spinner inside the working state (aria-busy)
- errors render in a soft red card instead of bare red text;
  success message gets a green ok state
- #status reserves 4rem so appearing text doesn't shift the layout
- focus rings on help links

Author: melvincarvalho

index.html

@@ -19,24 +19,45 @@
       --bg: #fafbfc;
       --fg: #1f2328;
       --accent: #6839e6;
+      --accent-2: #8b5cf6;
       --accent-hover: #5328d4;
       --muted: #656d76;
       --error: #cf222e;
+      --error-bg: #fff5f5;
+      --error-border: #ffd7d5;
+      --ok: #1a7f37;
     }
     * { box-sizing: border-box; }
     html, body {
       margin: 0; padding: 0; height: 100%;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
       background: var(--bg); color: var(--fg);
     }
+    body {
+      background:
+        radial-gradient(60rem 30rem at 50% -10%, rgba(104, 57, 230, 0.06), transparent 70%),
+        var(--bg);
+    }
     main {
       min-height: 100vh;
       display: flex; flex-direction: column;
       align-items: center; justify-content: center;
       padding: 2rem; gap: 2rem;
       text-align: center;
     }
-    h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); margin: 0; font-weight: 600; }
+    header {
+      display: flex; flex-direction: column;
+      align-items: center; gap: 0.9rem;
+    }
+    .logo {
+      width: 52px; height: 52px; border-radius: 50%;
+      background: radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent));
+      box-shadow: 0 8px 24px rgba(104, 57, 230, 0.3);
+    }
+    h1 {
+      font-size: clamp(1.5rem, 4vw, 2.5rem);
+      margin: 0; font-weight: 600; letter-spacing: -0.02em;
+    }
     p.tagline { color: var(--muted); margin: 0; max-width: 32rem; }
     button#signin {
       font-size: 1.25rem;
@@ -45,14 +66,45 @@
       border: none; border-radius: 999px;
       cursor: pointer;
       font-weight: 600;
-      transition: background 0.15s, transform 0.05s;
+      transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
       min-width: 14rem;
+      box-shadow: 0 2px 8px rgba(104, 57, 230, 0.25);
+    }
+    button#signin:hover {
+      background: var(--accent-hover);
+      transform: translateY(-1px);
+      box-shadow: 0 6px 16px rgba(104, 57, 230, 0.3);
+    }
+    button#signin:active { transform: translateY(0) scale(0.98); }
+    button#signin:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
+    button#signin:disabled {
+      opacity: 0.75; cursor: progress;
+      transform: none; box-shadow: 0 2px 8px rgba(104, 57, 230, 0.25);
+    }
+    button#signin[aria-busy="true"]::before {
+      content: '';
+      display: inline-block;
+      width: 1em; height: 1em;
+      margin-right: 0.6em;
+      vertical-align: -0.12em;
+      border: 2px solid rgba(255, 255, 255, 0.35);
+      border-top-color: white;
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+    #status {
+      color: var(--muted); font-size: 0.95rem;
+      min-height: 4rem; max-width: 32rem;
+    }
+    #status.error {
+      color: var(--error);
+      background: var(--error-bg);
+      border: 1px solid var(--error-border);
+      border-radius: 12px;
+      padding: 0.9rem 1.4rem;
     }
-    button#signin:hover { background: var(--accent-hover); }
-    button#signin:active { transform: scale(0.98); }
-    button#signin:disabled { opacity: 0.6; cursor: progress; }
-    #status { color: var(--muted); font-size: 0.95rem; min-height: 1.5em; max-width: 32rem; }
-    #status.error { color: var(--error); }
+    #status.ok { color: var(--ok); font-weight: 500; }
     #status ul.help-links {
       list-style: none; padding: 0; margin: 1rem 0 0;
       display: flex; flex-direction: column; gap: 0.5rem;
@@ -62,6 +114,7 @@
       text-underline-offset: 3px;
     }
     #status ul.help-links a:hover { color: var(--accent-hover); }
+    #status ul.help-links a:focus-visible { outline: 2px solid #c4b5fd; outline-offset: 2px; border-radius: 4px; }
     footer {
       margin-top: 2rem; color: var(--muted); font-size: 0.85rem;
     }
@@ -70,8 +123,11 @@
 </head>
 <body>
   <main>
-    <h1>Sign in to Solid</h1>
-    <p class="tagline">One click. We resolve your Nostr / WebID. You land at your pod.</p>
+    <header>
+      <div class="logo" aria-hidden="true"></div>
+      <h1>Sign in to Solid</h1>
+      <p class="tagline">One click. We resolve your Nostr / WebID. You land at your pod.</p>
+    </header>
     <button id="signin">Sign in</button>
     <div id="status" aria-live="polite"></div>
     <footer>

login.js

@@ -194,7 +194,7 @@ async function flow() {
     setStatus(`Could not build redirect URL from: ${base}`, 'error');
     return false;
   }
-  setStatus(`Found your WebID: ${webId}. Taking you to ${base}…`);
+  setStatus(`Found your WebID: ${webId}. Taking you to ${base}…`, 'ok');
   // Hopping to the user's own pod is instant; an app-supplied ?next=
   // destination stays on screen for a beat so the user sees where
   // they're being sent before leaving this origin.