diff --git a/client/native-shell/fonts/museomoderno-italic-600.woff2 b/client/native-shell/fonts/museomoderno-italic-600.woff2 new file mode 100644 index 000000000..3e8cd7beb Binary files /dev/null and b/client/native-shell/fonts/museomoderno-italic-600.woff2 differ diff --git a/client/native-shell/main.ts b/client/native-shell/main.ts index aa0ea3aa3..45cffbab0 100644 --- a/client/native-shell/main.ts +++ b/client/native-shell/main.ts @@ -303,7 +303,13 @@ function showCloud(opts: { back?: boolean } = {}): void { 'div', {}, topbar(() => showWelcome({ back: true })), - el('h1', { className: 'title-sm' }, t('native.cloud.title')), + el( + 'div', + { className: 'cloud-wordmark', role: 'img', ariaLabel: t('native.cloud.title') }, + el('img', { src: logoWhite, alt: '', className: 'on-dark' }), + el('img', { src: logoBlack, alt: '', className: 'on-light' }), + el('span', { className: 'cloud-tag' }, 'cloud') + ), el('p', { className: 'sub' }, t('native.cloud.sub')), el( 'div', diff --git a/client/native-shell/shell.css b/client/native-shell/shell.css index 26edaa738..4333f68df 100644 --- a/client/native-shell/shell.css +++ b/client/native-shell/shell.css @@ -38,6 +38,14 @@ font-display: swap; src: url('./fonts/museomoderno-latin-600.woff2') format('woff2'); } +/* Italic, subset to the letters of "cloud" — the wordmark's badge, nothing else. */ +@font-face { + font-family: 'MuseoModerno'; + font-style: italic; + font-weight: 600; + font-display: swap; + src: url('./fonts/museomoderno-italic-600.woff2') format('woff2'); +} :root { --bg: #09090b; @@ -366,6 +374,41 @@ body::after { letter-spacing: -0.01em; line-height: 1.08; } + +/* The TREK Cloud lockup (cloud intro screen): the wordmark plus the "cloud" + badge in italic MuseoModerno, an inverted pill, exactly as on liketrek.com. */ +.cloud-wordmark { + display: inline-flex; + align-items: center; + gap: 9px; +} +.cloud-wordmark img { + display: block; + height: 38px; + width: auto; +} +.cloud-wordmark .on-light { + display: none; +} +@media (prefers-color-scheme: light) { + .cloud-wordmark .on-dark { + display: none; + } + .cloud-wordmark .on-light { + display: block; + } +} +.cloud-tag { + font-family: 'MuseoModerno', system-ui, sans-serif; + font-style: italic; + font-weight: 600; + font-size: 0.95rem; + line-height: 1.35; + padding: 2px 11px; + border-radius: 999px; + color: var(--bg); + background: var(--ink); +} .title-sm { font-size: 1.5rem; line-height: 1.18; diff --git a/shared/src/i18n/de/native.ts b/shared/src/i18n/de/native.ts index b8137ed5c..0cf6bc9aa 100644 --- a/shared/src/i18n/de/native.ts +++ b/shared/src/i18n/de/native.ts @@ -26,8 +26,7 @@ const native: TranslationStrings = { 'native.settings.server': 'Server', // same-as-en 'native.settings.serverHint': 'Diese App ist mit {server} verbunden.', 'native.welcome.headline': 'Deine Reisen.\nDein Plan.', - 'native.welcome.sub': - 'Gemeinsam in Echtzeit planen: Touren, Budgets, Journal, Fotobuch — mit KI. Web, Handy, offline.', + 'native.welcome.sub': 'Gemeinsam in Echtzeit planen: Touren, Budgets, Journal, Fotobuch — mit KI.', 'native.welcome.connect': 'Mit deinem TREK verbinden', 'native.welcome.connectSub': 'Die Adresse öffnen, die du schon nutzt', 'native.welcome.getCloud': 'TREK Cloud holen', @@ -39,7 +38,7 @@ const native: TranslationStrings = { 'native.cloud.f2': 'In Minuten eingerichtet, Updates übernehmen wir', 'native.cloud.f3': 'Deine Daten bleiben deine — keine Werbung, kein Tracking', 'native.cloud.cta': 'Loslegen', - 'native.cloud.haveServer': 'Ich habe schon ein TREK', + 'native.cloud.haveServer': 'Ich habe schon einen TREK-Server', 'native.connecting': 'Verbinde mit {host}', 'native.back': 'Zurück', 'native.plans.title': 'Tarif wählen',