From 2c576418cb3b3c5b5a49a2a1cd4e22d815c3552b Mon Sep 17 00:00:00 2001
From: l0ng-ai <24760907+l0ng-ai@users.noreply.github.com>
Date: Tue, 27 Oct 2026 17:16:25 +0800
Subject: [PATCH] fix(splash): Keep the wordmark still until the splash fades

The splash named Inter, but the font faces and antialiasing came with the app CSS,
which the dev server injects only once the bundle runs: the wordmark switched from
the system font to Inter, moving up and changing weight, just before the fade. The
font faces are now linked from index.html and the splash sets its own smoothing.
The splash also stays on one compositing layer, so the fade-out doesn't re-snap
the centred text.
---
 index.html           | 1 +
 public/splash.css    | 5 +++++
 src/styles/fonts.css | 4 ++++
 3 files changed, 10 insertions(+)
 create mode 100644 src/styles/fonts.css

diff --git a/index.html b/index.html
index 4ccd1bda..a8060de6 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>OpenIDEA</title>
     <script src="/boot.js"></script>
+    <link rel="stylesheet" href="/src/styles/fonts.css" />
     <link rel="stylesheet" href="/splash.css" />
   </head>
   <body>
diff --git a/public/splash.css b/public/splash.css
index 0a8e561e..217b6cb7 100644
--- a/public/splash.css
+++ b/public/splash.css
@@ -19,11 +19,16 @@ body, .splash { background: #e9eaee; }
   box-sizing: border-box;
   font: 500 15px/1.2 "Inter Variable", Inter, system-ui, -apple-system, sans-serif;
   color: #6c707e;
+  /* As on body: picking it up when the app CSS arrives would change the wordmark's weight. */
+  -webkit-font-smoothing: antialiased;
   -webkit-user-select: none;
   user-select: none;
   cursor: default;
   animation: splash-in 240ms ease-out 120ms both;
   transition: opacity 160ms ease-out;
+  /* One compositing layer for its whole life: WebKit layers it only while the opacity animates,
+     and the fade-out's fresh layer re-snaps the centred text, which then jumps up half a pixel. */
+  will-change: opacity;
 }
 .splash.splash-out { opacity: 0; pointer-events: none; }
 :root[data-theme^="dark"] .splash { color: #8c8f95; }
diff --git a/src/styles/fonts.css b/src/styles/fonts.css
new file mode 100644
index 00000000..b51f53f4
--- /dev/null
+++ b/src/styles/fonts.css
@@ -0,0 +1,4 @@
+/* Linked from index.html rather than imported by global.css, so the faces are known before the
+   splash first paints: the dev server injects the app CSS only once the bundle runs. */
+@import "@fontsource-variable/inter";
+@import "@fontsource-variable/jetbrains-mono";