From 664a5399e8d400ba61307bade0bbb1a4876b83c1 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Thu, 5 Nov 2026 22:29:15 +0100
Subject: [PATCH] feat(native): use the full TREK wordmark on the welcome
 screen, per scheme

---
 client/native-shell/main.ts   | 10 +++++++++-
 client/native-shell/shell.css | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/client/native-shell/main.ts b/client/native-shell/main.ts
index c68e7db1d..50895fd7b 100644
--- a/client/native-shell/main.ts
+++ b/client/native-shell/main.ts
@@ -3,6 +3,8 @@ import { Haptics, ImpactStyle, NotificationType } from '@capacitor/haptics';
 import { SplashScreen } from '@capacitor/splash-screen';
 import { StatusBar, Style } from '@capacitor/status-bar';
 import logoUrl from '../public/icons/icon-white.svg';
+import logoBlack from '../public/logo-dark.svg'; // #000 wordmark, for light backgrounds
+import logoWhite from '../public/logo-light.svg'; // #fff wordmark, for dark backgrounds
 import { getIapClient, productIdFor, type Purchase } from '../src/native/iap';
 import { CLOUD_URL, PRIVACY_URL, SERVER_DOCS_URL } from '../src/native/links';
 import { probeDemo, probeServer, type ProbeFailure, type ProbeGet } from '../src/native/serverAddress';
@@ -147,7 +149,13 @@ function topbar(onBack: () => void): HTMLElement {
 
 // ── Welcome ─────────────────────────────────────────────────────────────────
 function showWelcome(opts: { back?: boolean } = {}): void {
-  const hero = el('img', { src: logoUrl, alt: '', className: 'hero-mark' });
+  // The full TREK wordmark, in the variant that reads on the current scheme.
+  const hero = el(
+    'span',
+    { className: 'hero-logo' },
+    el('img', { src: logoWhite, alt: 'TREK', className: 'on-dark' }),
+    el('img', { src: logoBlack, alt: '', className: 'on-light' })
+  );
 
   const connect = el(
     'button',
diff --git a/client/native-shell/shell.css b/client/native-shell/shell.css
index 93579e982..5b2bf04cf 100644
--- a/client/native-shell/shell.css
+++ b/client/native-shell/shell.css
@@ -275,6 +275,41 @@ body::after {
   filter: drop-shadow(0 14px 36px color-mix(in srgb, var(--wash-1) 90%, transparent))
     drop-shadow(0 6px 16px color-mix(in srgb, var(--ink) 22%, transparent));
 }
+
+/* The full TREK wordmark on the welcome screen, in the variant that reads on the scheme. */
+.hero-logo {
+  display: block;
+  margin-bottom: 22px;
+  filter: drop-shadow(0 14px 36px color-mix(in srgb, var(--wash-1) 90%, transparent))
+    drop-shadow(0 6px 16px color-mix(in srgb, var(--ink) 22%, transparent));
+  animation: logoRise 0.7s var(--ease) both;
+}
+.hero-logo img {
+  display: block;
+  height: 46px;
+  width: auto;
+}
+.hero-logo .on-light {
+  display: none;
+}
+@media (prefers-color-scheme: light) {
+  .hero-logo .on-dark {
+    display: none;
+  }
+  .hero-logo .on-light {
+    display: block;
+  }
+}
+@keyframes logoRise {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
 @keyframes floaty {
   0%,
   100% {