diff --git a/client/native-shell/fonts/museomoderno-latin-600.woff2 b/client/native-shell/fonts/museomoderno-latin-600.woff2 new file mode 100644 index 000000000..a892018ef Binary files /dev/null and b/client/native-shell/fonts/museomoderno-latin-600.woff2 differ diff --git a/client/native-shell/main.ts b/client/native-shell/main.ts index 9e6a73b3f..f4bf8b53d 100644 --- a/client/native-shell/main.ts +++ b/client/native-shell/main.ts @@ -197,7 +197,7 @@ function showWelcome(opts: { back?: boolean } = {}): void { 'div', {}, hero, - el('h1', { className: 'title' }, t('native.welcome.headline')), + el('h1', { className: 'title brand-title' }, t('native.welcome.headline')), el('p', { className: 'sub' }, t('native.welcome.sub')), connect, cloud, diff --git a/client/native-shell/shell.css b/client/native-shell/shell.css index 04ab19981..06bdbfdb4 100644 --- a/client/native-shell/shell.css +++ b/client/native-shell/shell.css @@ -31,6 +31,13 @@ font-display: swap; src: url('./fonts/poppins-latin-700.woff2') format('woff2'); } +@font-face { + font-family: 'MuseoModerno'; + font-style: normal; + font-weight: 600 700; + font-display: swap; + src: url('./fonts/museomoderno-latin-600.woff2') format('woff2'); +} :root { --bg: #09090b; @@ -346,6 +353,14 @@ body::after { /* Honour the newline in the headline string (e.g. "Deine Reisen.\nDein Plan."). */ white-space: pre-line; } +/* The welcome headline as the brand says it: MuseoModerno, lower case. */ +.brand-title { + font-family: 'MuseoModerno', 'Poppins', sans-serif; + font-weight: 700; + text-transform: lowercase; + letter-spacing: -0.01em; + line-height: 1.08; +} .title-sm { font-size: 1.5rem; line-height: 1.18; @@ -439,19 +454,18 @@ body::after { .demo-link { font: inherit; font-weight: 600; - font-size: 0.9rem; - align-self: center; + font-size: 0.95rem; + align-self: stretch; + width: 100%; margin-top: 2px; - padding: 11px 20px; - border-radius: 999px; + padding: 14px 18px; + min-height: 48px; + border-radius: var(--radius); border: 1px solid var(--edge); - background: var(--surface); + background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; - box-shadow: - 0 1px 2px rgba(0, 0, 0, 0.2), - inset 0 0 0 1px color-mix(in srgb, var(--ink) 3%, transparent); transition: color 0.2s, background 0.2s,