tweaks

frontend/src/routes/+page.svelte

@@ -42,7 +42,6 @@
   let loginFocusArmed = $state(true);
   const currentYear = new Date().getFullYear();
   const appVersion = `v${packageInfo.version}`;
-  const releaseStage = 'Beta';
 
   const monthLabels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'];
 
@@ -353,10 +352,7 @@
           <span class="powered-by-label">Powered by Lean 101</span>
         </div>
         <div class="auth-meta">
-          <span class="version-badge">
-            <span>{appVersion}</span>
-            <span class="release-pill">{releaseStage}</span>
-          </span>
+          <span class="version-badge">{appVersion}</span>
           <span>&copy; {currentYear} Hunter Premium Produce</span>
         </div>
       </div>
@@ -375,13 +371,12 @@
         </div>
         <div class="auth-status-row">
           <span class="auth-status-pill">Secure Workspace Access</span>
-          <span class="release-pill">{releaseStage}</span>
         </div>
       </div>
 
       <div class="auth-copy">
-        <h2>Login</h2>
-        <p>Enter your username & password below:</p>
+        <h2>Welcome back</h2>
+        <p>Sign in with your email and password to continue.</p>
       </div>
 
       <form class="signin-form auth-form" onsubmit={handleLogin}>
@@ -422,10 +417,7 @@
           <span class="powered-by-label">Powered by Lean 101</span>
         </div>
         <div class="auth-meta">
-          <span class="version-badge">
-            <span>{appVersion}</span>
-            <span class="release-pill">{releaseStage}</span>
-          </span>
+          <span class="version-badge">{appVersion}</span>
           <span>&copy; {currentYear} Lean 101</span>
         </div>
       </div>
@@ -806,25 +798,23 @@
     width: min(100%, 38rem);
     display: grid;
     gap: 1.35rem;
-    padding: 1.5rem;
-    border: 1px solid rgba(212, 226, 218, 0.95);
-    border-radius: 1.7rem;
-    background:
-      radial-gradient(circle at top left, rgba(115, 197, 146, 0.16), transparent 32%),
-      radial-gradient(circle at bottom right, rgba(33, 94, 60, 0.1), transparent 30%),
-      rgba(255, 255, 255, 0.96);
-    box-shadow: none;
-    backdrop-filter: blur(14px);
+    padding: 2.1rem 2rem 1.6rem;
+    border: 1px solid var(--color-border);
+    border-radius: 1.25rem;
+    background: var(--color-bg-surface);
     overflow: hidden;
   }
 
+  /* Crisp brand accent along the top edge, clipped to the card radius.
+     Replaces the old green radial glow, which read as a muddy shadow. */
   .auth-card::before {
     content: '';
     position: absolute;
-    inset: 0;
-    background:
-      linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 35%),
-      linear-gradient(180deg, transparent, rgba(238, 248, 242, 0.55));
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: var(--color-brand);
     pointer-events: none;
   }
 
@@ -913,21 +903,6 @@
     flex-wrap: wrap;
   }
 
-  .release-pill {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.28rem 0.62rem;
-    border: 1px solid color-mix(in srgb, var(--color-brand) 16%, transparent);
-    border-radius: 999px;
-    background: var(--color-brand-tint);
-    color: var(--color-success);
-    font-size: 0.72rem;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-  }
-
   .auth-copy {
     display: grid;
     gap: 0.55rem;
@@ -994,20 +969,25 @@
   }
 
   .auth-form input {
-    padding: 1rem 1.05rem;
-    border: 1px solid #d6e3db;
-    border-radius: 1rem;
-    background: rgba(248, 251, 249, 0.94);
+    padding: 0.95rem 1rem;
+    border: 1px solid var(--color-border);
+    border-radius: 0.7rem;
+    background: var(--color-bg-app);
+    color: var(--color-text-primary);
     transition:
       border-color 160ms ease,
       box-shadow 160ms ease,
       background-color 160ms ease;
   }
 
+  .auth-form input::placeholder {
+    color: var(--color-text-muted);
+  }
+
   .auth-form input:focus {
     outline: none;
     border-color: var(--color-brand);
-    box-shadow: 0 0 0 0.24rem color-mix(in srgb, var(--color-brand) 12%, transparent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 22%, transparent);
     background: #fff;
   }
 
@@ -1021,6 +1001,26 @@
     width: 100%;
     min-height: 3.35rem;
     margin-top: 0.2rem;
+    font-size: 1.02rem;
+    transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+
+  .auth-submit:hover:not(:disabled) {
+    background: #126a33;
+  }
+
+  .auth-submit:active:not(:disabled) {
+    background: #0f5a2b;
+  }
+
+  .auth-submit:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--color-brand) 45%, transparent);
+    outline-offset: 2px;
+  }
+
+  .auth-submit:disabled {
+    opacity: 0.7;
+    cursor: progress;
   }
 
   .auth-footer {
@@ -1221,23 +1221,20 @@
 
   .signin-form {
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 0.75rem;
-    width: min(100%, 38rem);
-  }
-
-  .signin-form input {
+    grid-template-columns: 1fr;
+    gap: 0.95rem;
     width: 100%;
-    padding: 0.9rem 0.95rem;
-    border: 1px solid var(--line-strong);
-    border-radius: 0.95rem;
-    background: var(--panel-soft);
-    color: var(--text);
   }
 
   .login-error {
-    color: #a03737;
+    margin: 0;
+    padding: 0.75rem 0.95rem;
+    border: 1px solid rgba(160, 55, 55, 0.3);
+    border-radius: 0.7rem;
+    background: #fdf2f2;
+    color: #8a1622;
     font-weight: 600;
+    font-size: 0.95rem;
   }
 
   .focus-card {
@@ -1905,8 +1902,8 @@
     }
 
     .auth-card {
-      padding: 1.15rem;
-      border-radius: 1.35rem;
+      padding: 1.5rem 1.15rem 1.15rem;
+      border-radius: 1.1rem;
     }
 
     .auth-header,