Fix Lumière visual regressions: login, footer, logo, notifications

- Login: centre logo (display:block + margin:auto, max-width 300px) and
  increase h1 from 1.4rem to 1.75rem
- Sidebar logo: switch from width:120%/margin-left:-10% to transform:scale(1.2)
  so the image scales symmetrically from centre and isn't cut on the left
- Footer: use !important on background-color/color to beat the dark-theme
  selector's higher specificity (:root [data-theme] = 0,4,0 vs our 0,3,0)
- Notifications: replace near-transparent rgba backgrounds with solid
  opaque colours so the teal page gradient can't bleed through; make the
  CTA button neutral slate-grey (not teal) with border-radius:8px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

services/web/frontend/stylesheets/pages/login-register.scss

@@ -43,6 +43,12 @@
   background-repeat: repeat, no-repeat, no-repeat;
   background-color: #f0faf8;
   min-height: 100vh;
+
+  .verso-login-logo {
+    display: block;
+    margin: 0 auto;
+    max-width: 300px;
+  }
 }
 
 .login-lumiere-card {
@@ -75,7 +81,7 @@
     margin-top: 0;
 
     h1 {
-      font-size: 1.4rem;
+      font-size: 1.75rem;
       font-weight: 700;
       color: #1a5c52;
       margin: 0;

services/web/frontend/stylesheets/pages/project-list-ds-nav.scss

@@ -259,9 +259,10 @@ body {
 
         img {
           display: block;
-          width: 120% !important;
+          width: 100% !important;
-          margin-left: -10%;
           height: auto;
+          transform: scale(1.2);
+          transform-origin: center center;
         }
       }
 

services/web/frontend/stylesheets/pages/project-list-lumiere.scss

@@ -250,30 +250,36 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
     border-radius: 10px;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 
-    // Warning stays amber so it's visually distinct from all the teal UI
+    // Warning: solid amber-tinted white so the teal page background can't bleed
+    // through. !important needed to beat :root [data-theme='default'] specificity.
     &.notification-type-warning {
-      --notification-bg-warning:     rgba(217, 119, 6, 0.08);
+      background-color: #fffbf0 !important;
-      --notification-border-warning: rgba(217, 119, 6, 0.30);
+      border-color: rgba(217, 119, 6, 0.35) !important;
-      --notification-icon-warning:   #b45309;
+
+      .notification-icon { color: #b45309 !important; }
     }
 
+    // Info: solid blue-tinted white for the same reason
     &.notification-type-info {
-      --notification-bg-info:     #{rgba($lum-blue, 0.07)};
+      background-color: #f0f6fd !important;
-      --notification-border-info: #{rgba($lum-blue, 0.25)};
+      border-color: rgba($lum-blue, 0.28) !important;
-      --notification-icon-info:   #{$lum-blue};
+
+      .notification-icon { color: $lum-blue !important; }
     }
 
-    // Action buttons (e.g. "Send confirmation code") inside notification CTAs
+    // Action buttons (e.g. "Send confirmation code") — neutral slate-grey,
+    // rounded-square to match the Lumière button style.
     .notification-cta .btn-secondary {
-      background-color: rgba($lum-teal, 0.08);
+      background-color: rgba(100, 116, 139, 0.10) !important;
-      border-color: rgba($lum-teal, 0.28);
+      border-color: rgba(100, 116, 139, 0.28) !important;
-      color: $lum-teal;
+      color: $lum-text !important;
+      border-radius: 8px !important;
 
       &:hover,
       &:focus {
-        background-color: rgba($lum-teal, 0.15);
+        background-color: rgba(100, 116, 139, 0.18) !important;
-        border-color: rgba($lum-teal, 0.45);
+        border-color: rgba(100, 116, 139, 0.38) !important;
-        color: darken($lum-teal, 6%);
+        color: $lum-text !important;
       }
     }
   }
@@ -590,25 +596,30 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
 }
 
 // ── Footer — Lumière override ─────────────────────────────────────────────────
-// The default theme sets footer-dark on .project-ds-nav-page .fat-footer via
+// The dark theme rule is :root [data-theme='default'] .project-ds-nav-page
-// [data-theme='default'] (specificity 0,3,0). This selector matches at the same
+// .fat-footer with specificity (0,4,0), which beats a plain class selector.
-// specificity but appears later in the cascade so it wins.
+// We use !important on actual properties to guarantee the light-teal look
+// regardless of the user's theme preference.
 
-.project-list-lumiere.project-ds-nav-page .fat-footer {
+.project-list-lumiere .fat-footer {
-  --footer-background: #edf7f5;
+  background-color: #e6f4f1 !important;
-  --footer-content:    #{$lum-text};
+  color: $lum-text !important;
-  --footer-link:       #{$lum-text-sub};
   border-top: 1px solid $lum-border;
 
   .footer-section-heading {
-    color: $lum-teal;
+    color: $lum-teal !important;
   }
 
   .fat-footer-base {
-    color: $lum-text-muted;
+    color: $lum-text-muted !important;
 
     #language-picker-toggle {
-      color: $lum-text-sub;
+      color: $lum-text-sub !important;
     }
   }
+
+  // Links override
+  --link-color: #{$lum-text-sub};
+  --link-hover-color: #{$lum-teal};
+  --link-visited-color: #{$lum-text-sub};
 }