fix(alert): readable dark-gold alert card with capped scroll, tucked timestamp, breakable URLs

src/components/ServiceAlert.tsx

@@ -56,34 +56,38 @@ export function ServiceAlert({ alerts }: ServiceAlertProps) {
         >
           <div className="w-full px-5 py-4 md:px-6 flex items-start justify-between gap-3">
             <div className="flex items-start gap-2.5 flex-1 min-w-0">
-              <AlertTriangle className="h-5 w-5 text-smart-gold flex-shrink-0 mt-0.5" />
+              <AlertTriangle className="h-5 w-5 text-smart-gold-dark flex-shrink-0 mt-0.5" />
               <div className="flex-1 min-w-0">
-                <div className="flex items-center justify-between gap-2">
-                  <div className="font-semibold text-sm text-smart-gold">
-                    {alert.title ?? t("serviceAlert.sectionTitle")}
-                  </div>
-                  {alert.startsAt && (
-                    <p className="shrink-0 text-xs text-smart-gold/60">
-                      {new Date(alert.startsAt).toLocaleTimeString([], {
-                        hour: "numeric",
-                        minute: "2-digit",
-                      })}
-                    </p>
-                  )}
+                <div className="font-semibold text-sm text-smart-gold-dark break-words">
+                  {alert.title ?? t("serviceAlert.sectionTitle")}
                 </div>
                 {alert.message && (
-                  <p className="text-xs text-smart-gold/80 mt-1">{alert.message}</p>
+                  <p className="text-xs text-smart-gold-dark mt-1 max-h-32 overflow-y-auto overscroll-contain pr-1 break-words">
+                    {alert.message}
+                  </p>
                 )}
               </div>
             </div>
-            <button
-              type="button"
-              aria-label={t("serviceAlert.dismiss")}
-              onClick={() => dismissAlert(alert)}
-              className="shrink-0 -mr-2 -mt-2 -mb-2 p-3 rounded-lg text-smart-gold/70 hover:text-smart-gold hover:bg-smart-gold/10 active:bg-smart-gold/20 transition-colors"
-            >
-              <X className="h-5 w-5" />
-            </button>
+            {/* X + timestamp share a right-hand column so the time sits tucked
+                under the close button, right-aligned and clear of the text flow. */}
+            <div className="flex flex-col items-end gap-0.5 shrink-0 -mr-2 -mt-2">
+              <button
+                type="button"
+                aria-label={t("serviceAlert.dismiss")}
+                onClick={() => dismissAlert(alert)}
+                className="p-3 rounded-lg text-smart-gold-dark hover:bg-smart-gold/10 active:bg-smart-gold/20 transition-colors"
+              >
+                <X className="h-5 w-5" />
+              </button>
+              {alert.startsAt && (
+                <p className="text-xs text-smart-gold-dark pr-3 -mt-1">
+                  {new Date(alert.startsAt).toLocaleTimeString([], {
+                    hour: "numeric",
+                    minute: "2-digit",
+                  })}
+                </p>
+              )}
+            </div>
           </div>
         </SectionCard>
       ))}

src/index.css

@@ -42,6 +42,10 @@ All colors MUST be HSL.
     --smart-green: 143 72% 14%; /* #114533 from logo - kept for logo only */
     --smart-train-green: 157 82% 37%; /* #11ab75 - real train green for UI */
     --smart-gold: 36 69% 54%; /* rgb(216, 146, 63) */
+    /* Deeper gold for text that needs to read clearly on light surfaces (e.g.
+       the service-alert card). Darkened in light mode for contrast; the .dark
+       override below brightens it so it stays legible on dark backgrounds. */
+    --smart-gold-dark: 34 74% 38%; /* rgb(169, 107, 25) */
     /* Removed --smart-light-gold - now using direct HSL values for accent */
     --smart-dark-green: 143 72% 10%; /* Darker green for depth */
     --smart-light-green: 143 72% 20%; /* Lighter green for accents */
@@ -141,6 +145,9 @@ All colors MUST be HSL.
 
     /* SMART Train dark theme colors */
 
+    /* Brighter gold so alert text stays legible on the dark card. */
+    --smart-gold-dark: 40 85% 62%; /* rgb(240, 186, 76) */
+
     /* Brighter my-trip dot so it stays vivid against dark backgrounds. */
     --my-trip: 211 90% 60%;
 

tailwind.config.ts

@@ -86,6 +86,8 @@ export default {
           "train-green":
             "hsl(var(--smart-train-green))" /* #11ab75 - main UI */,
           gold: "hsl(var(--smart-gold))" /* rgb(216, 146, 63) */,
+          "gold-dark":
+            "hsl(var(--smart-gold-dark))" /* deeper gold for legible text */,
           "dark-green": "hsl(var(--smart-dark-green))",
           "light-green": "hsl(var(--smart-light-green))",
           neutral: "hsl(228deg 2.65% 45%)" /* default sheet header */,