claude:design: bring out chain background svgs — drop grayscale, per-chain sizing, lvh anchor

kuco23 · claude · kuco23 · commit 2db6464bbd6e · 2026-05-28T14:38:42.000Z
Co-Authored-By: Claude &lt;noreply@anthropic.com&gt;
diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css
@@ -33,10 +33,9 @@
 /* CHAIN BACKGROUND ICON (root layout)
  *
  * The chain logo (FLR/SGB/AVAX) renders in a child .background-image
- * element rather than on .background itself, so we can apply a filter
- * that desaturates and darkens just the image without affecting content.
- * isolation: isolate keeps the negative z-index contained within the
- * .background stacking context — without it, z-index: -1 would push the
+ * element rather than on .background itself, so .background can own the
+ * stacking context. isolation: isolate keeps the negative z-index
+ * contained within .background — without it, z-index: -1 would push the
  * image behind <body> and disappear.
  */
 
@@ -47,16 +46,34 @@
 
 .background-image {
   position: fixed;
-  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  /* Pin to the largest viewport height (URL-bar-hidden state) so the
+     centered SVG doesn't shift as mobile browsers show/hide their
+     chrome during scroll. lvh > 100% on iOS/Android while the bar is
+     visible — the element overflows slightly off-screen at the bottom,
+     which is fine since z-index: -1 + pointer-events: none. */
+  height: 100lvh;
   background-size: auto 400px;
   background-position: center;
   background-repeat: no-repeat;
-  filter: grayscale(1) brightness(0.35);
-  opacity: 0.5;
+  opacity: 0.30;
   z-index: -1;
   pointer-events: none;
 }
 
+/* Per-chain size overrides — each symbol has different padding inside
+   its viewBox, so we tune render size per protocol so the three read at
+   a similar visual weight. */
+.background-image.bg-songbird {
+  background-size: auto 600px;
+}
+
+.background-image.bg-avalanche {
+  background-size: auto 520px;
+}
+
 /* NOTIFICATION BLOCK */
 
 .notification-block {
diff --git a/src/layout/root.tsx b/src/layout/root.tsx
@@ -29,6 +29,16 @@ function chainToBackgroundImage(chain: Chain): string {
   return ''
 }
 
+// Per-chain modifier class so each background can tune its own size /
+// position — the Songbird symbol has a transparent ring around the bird
+// so needs a bigger render size to match Flare/Avalanche visually.
+function chainToBackgroundClass(chain: Chain): string {
+  if (chain == Chain.FLARE) return 'bg-flare'
+  if (chain == Chain.SONGBIRD) return 'bg-songbird'
+  if (chain == Chain.AVALANCHE) return 'bg-avalanche'
+  return ''
+}
+
 const NavigationPreloader = () => {
   const navigation = useNavigation()
   const [show, setShow] = useState(false)
@@ -53,6 +63,7 @@ const RootLayout = () => {
   const chain = chainFromRoute(pathname)
   const chainId = chainToChainId(chain)
   const image = chainToBackgroundImage(chain)
+  const bgClass = chainToBackgroundClass(chain)
 
   const { setChain, setWallet, wallet } = useGlobalStore(
     useShallow(state => ({ setChain: state.setChain, setWallet: state.setWalletAddress, wallet: state.walletProvider }))
@@ -79,7 +90,7 @@ const RootLayout = () => {
       <NavigationPreloader />
       <Header />
       <div className='background'>
-        {image && <div className='background-image' style={{ backgroundImage: `url("${image}")` }} />}
+        {image && <div className={`background-image ${bgClass}`} style={{ backgroundImage: `url("${image}")` }} />}
         <CookiesProvider>
           <Outlet />
           {!hideCallToAction && <CallToAction />}
