From 8d3f550cef108dcbcdc3dd0ba926ce2b68402041 Mon Sep 17 00:00:00 2001
From: claude <claude@verso>
Date: Thu, 11 Jun 2026 16:16:28 +0000
Subject: [PATCH] =?UTF-8?q?Fix=20Lumi=C3=A8re=20notification=20colors,=20s?=
 =?UTF-8?q?tyle=20CTA=20button,=20and=20theme=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Warning notification: switch from teal to amber (#b45309) so it reads as
  a genuine warning and doesn't blend into the teal UI chrome
- Notification CTA button (.btn-secondary): style with teal tint so the
  'Send confirmation code' button matches the Lumière theme
- Footer: override dark footer on .project-list-lumiere with a light teal
  background (#edf7f5), dark text, teal section headings — selector has same
  specificity as the default-theme dark rule but appears later in the cascade

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../pages/project-list-lumiere.scss           | 47 +++++++++++++++++--
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
index bc47a47dbd..c556a0628a 100644
--- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
+++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
@@ -244,18 +244,17 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
 
   // ══════════════════════════════════════════════════════════════════════════
   // NOTIFICATIONS — Lumière palette
-  // Override the Bootstrap-orange warning and generic-blue info with teal tones
-  // so notification banners feel native to the Lumière theme.
   // ══════════════════════════════════════════════════════════════════════════
 
   .notification {
     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
     &.notification-type-warning {
-      --notification-bg-warning:     #{rgba($lum-teal, 0.08)};
-      --notification-border-warning: #{rgba($lum-teal, 0.28)};
-      --notification-icon-warning:   #{$lum-teal};
+      --notification-bg-warning:     rgba(217, 119, 6, 0.08);
+      --notification-border-warning: rgba(217, 119, 6, 0.30);
+      --notification-icon-warning:   #b45309;
     }
 
     &.notification-type-info {
@@ -263,6 +262,20 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
       --notification-border-info: #{rgba($lum-blue, 0.25)};
       --notification-icon-info:   #{$lum-blue};
     }
+
+    // Action buttons (e.g. "Send confirmation code") inside notification CTAs
+    .notification-cta .btn-secondary {
+      background-color: rgba($lum-teal, 0.08);
+      border-color: rgba($lum-teal, 0.28);
+      color: $lum-teal;
+
+      &:hover,
+      &:focus {
+        background-color: rgba($lum-teal, 0.15);
+        border-color: rgba($lum-teal, 0.45);
+        color: darken($lum-teal, 6%);
+      }
+    }
   }
 
   // ══════════════════════════════════════════════════════════════════════════
@@ -575,3 +588,27 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
     color: #7c4dff;
   }
 }
+
+// ── Footer — Lumière override ─────────────────────────────────────────────────
+// The default theme sets footer-dark on .project-ds-nav-page .fat-footer via
+// [data-theme='default'] (specificity 0,3,0). This selector matches at the same
+// specificity but appears later in the cascade so it wins.
+
+.project-list-lumiere.project-ds-nav-page .fat-footer {
+  --footer-background: #edf7f5;
+  --footer-content:    #{$lum-text};
+  --footer-link:       #{$lum-text-sub};
+  border-top: 1px solid $lum-border;
+
+  .footer-section-heading {
+    color: $lum-teal;
+  }
+
+  .fat-footer-base {
+    color: $lum-text-muted;
+
+    #language-picker-toggle {
+      color: $lum-text-sub;
+    }
+  }
+}