Login screen redesign

frontend/src/lib/components/ClientShell.svelte

@@ -2,6 +2,7 @@
   import { invalidateAll } from '$app/navigation';
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
+  import Lean101Logo from '$lib/components/Lean101Logo.svelte';
   import { clientSession, hasModuleAccess, sessionHydrated } from '$lib/session';
   import { onMount, tick } from 'svelte';
   import packageInfo from '../../../package.json';
@@ -216,6 +217,12 @@
     });
   });
 
+  $effect(() => {
+    if ($sessionHydrated && !$clientSession && !isRootRoute) {
+      goto('/', { replaceState: true });
+    }
+  });
+
   onMount(() => {
     syncViewport();
 
@@ -254,6 +261,19 @@
   <title>{pageTitle(page.url.pathname)} | Hunter Premium Produce</title>
 </svelte:head>
 
+{#if !$clientSession}
+  <div class="signed-out-shell">
+    {#if isRootRoute}
+      {@render children()}
+    {:else}
+      <section class="locked-card loading-card signed-out-card">
+        <p class="workspace-label">Checking Session</p>
+        <h2>Returning to the client login screen.</h2>
+        <p>Only authenticated client users can open workspace routes directly.</p>
+      </section>
+    {/if}
+  </div>
+{:else}
 <div class="app-shell">
   {#if showBottomNav && navOpen}
     <button aria-label="Close navigation" class="nav-backdrop" type="button" onclick={() => (navOpen = false)}></button>
@@ -263,8 +283,7 @@
     <aside class="sidebar">
       <div class="brand-row">
         <a class="brand" href="/">
-          <span class="brand-mark">HP</span>
-          <span>Hunter Premium Produce</span>
+          <Lean101Logo className="sidebar-logo" showTagline={false} />
         </a>
       </div>
 
@@ -440,19 +459,12 @@
     </header>
 
     <main class="content">
-      {#if !isRootRoute && (!$sessionHydrated || isRestoringSession)}
+      {#if !isRootRoute && isRestoringSession}
         <section class="locked-card loading-card">
           <p class="workspace-label">Checking Session</p>
           <h2>Restoring your client workspace.</h2>
           <p>Refreshing the current page with the saved browser session before deciding whether sign-in is required.</p>
         </section>
-      {:else if !isRootRoute && !$clientSession}
-        <section class="locked-card">
-          <p class="workspace-label">Client Sign-In Required</p>
-          <h2>Sign in on the Hunter Premium Produce home page to unlock workspace data.</h2>
-          <p>The client-facing routes stay empty until a valid client session is active.</p>
-          <a href="/">Return to sign-in</a>
-        </section>
       {:else}
         {@render children()}
       {/if}
@@ -624,7 +636,9 @@
   {/if}
 {/if}
 
-{#if paletteOpen}
+{/if}
+
+{#if $clientSession && paletteOpen}
   <div class="palette-overlay" role="presentation" onclick={() => (paletteOpen = false)}>
     <div
       class="palette"
@@ -720,6 +734,15 @@
     min-height: 100vh;
   }
 
+  .signed-out-shell {
+    min-height: 100vh;
+    padding: 1.5rem;
+  }
+
+  .signed-out-card {
+    margin: 0 auto;
+  }
+
   .nav-backdrop {
     display: none;
   }
@@ -753,14 +776,10 @@
   }
 
   .brand {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.68rem;
-    font-size: 1.08rem;
-    font-weight: 700;
+    display: block;
+    width: 100%;
   }
 
-  .brand-mark,
   .nav-icon {
     display: inline-flex;
     align-items: center;
@@ -773,10 +792,16 @@
     letter-spacing: 0.04em;
   }
 
-  .brand-mark {
-    width: 1.9rem;
-    height: 1.9rem;
-    border-radius: 0.68rem;
+  .sidebar :global(.sidebar-logo) {
+    width: min(100%, 12.2rem);
+  }
+
+  .sidebar :global(.sidebar-logo .logo-copy strong) {
+    font-size: 1.6rem;
+  }
+
+  .sidebar :global(.sidebar-logo .logo-mark) {
+    width: 2.6rem;
   }
 
   .nav-toggle,

frontend/src/lib/components/Lean101Logo.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  let { className = '', showTagline = true } = $props<{
+    className?: string;
+    showTagline?: boolean;
+  }>();
+</script>
+
+<div class={`lean101-logo ${className}`.trim()}>
+  <span class="logo-mark" aria-hidden="true">
+    <svg viewBox="0 0 320 320" preserveAspectRatio="xMidYMid meet" role="img" focusable="false">
+      <path
+        d="M82 18c4 0 8 1 11 3l82 48c7 4 11 12 11 20v16c0 6-3 11-8 14-5 3-11 3-16 0l-35-21c-12-7-27-7-39 0l-8 5c-12 7-19 20-19 34v107c0 8-4 16-11 20l-2 1c-5 3-11 3-16 0-5-3-8-8-8-14V42c0-9 5-17 13-21l34-20c3-1 7-2 10-2Z"
+        fill="#1672c5"
+      />
+      <path
+        d="M145 72c8-5 18-5 26 0l77 45c8 5 13 13 13 22v88c0 9-5 17-13 22l-77 45c-8 5-18 5-26 0l-77-45c-8-5-13-13-13-22v-88c0-9 5-17 13-22l77-45Zm4 29-49 29c-8 5-13 13-13 22v62c0 9 5 17 13 22l49 29c8 5 18 5 26 0l49-29c8-5 13-13 13-22v-62c0-9-5-17-13-22l-49-29c-8-5-18-5-26 0Z"
+        fill="#2e9df4"
+      />
+      <path
+        d="M238 201c0-14-7-27-19-34l-8-5c-12-7-27-7-39 0l-35 21c-5 3-11 3-16 0-5-3-8-8-8-14v-16c0-8 4-16 11-20l82-48c3-2 7-3 11-3 3 0 7 1 10 2l34 20c8 4 13 12 13 21v209c0 6-3 11-8 14-5 3-11 3-16 0l-2-1c-7-4-11-12-11-20V201Z"
+        fill="#1672c5"
+      />
+    </svg>
+  </span>
+
+  <span class="logo-copy">
+    <strong>LEAN 101</strong>
+    {#if showTagline}
+      <small>SMARTER IMPROVEMENT SOLUTIONS</small>
+    {/if}
+  </span>
+</div>
+
+<style>
+  .lean101-logo {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.7rem;
+    color: #0b76c8;
+    line-height: 1;
+  }
+
+  .logo-mark {
+    width: 3rem;
+    flex-shrink: 0;
+    line-height: 0;
+  }
+
+  .logo-mark svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  .logo-copy {
+    display: grid;
+    gap: 0.14rem;
+  }
+
+  .logo-copy strong {
+    color: #0b76c8;
+    font-size: 1.95rem;
+    font-weight: 800;
+    letter-spacing: 0.03em;
+  }
+
+  .logo-copy small {
+    color: #6a7680;
+    font-size: 0.54rem;
+    font-weight: 700;
+    letter-spacing: 0.13em;
+  }
+</style>