fix: 侧栏顶部虚化遮罩与半透明卡片

- 新增固定侧栏遮罩层，滚动后淡入，blur(14px) + 透明渐变，不随吸底 transform 移动
- 侧栏资料/服务/导航卡改为 64% 半透明 + 毛玻璃
- 修正只输出 -webkit-backdrop-filter 导致不生效的问题
- 验证：遮罩 top=148、blur 生效、卡片 alpha=0.64

stash-web/src/App.css

@@ -1314,6 +1314,40 @@ a.entry-href:hover {
   will-change: transform;
 }
 
+.sidebar-wrap {
+  position: relative;
+}
+
+/* 侧栏进入滚动后，顶部做半透明虚化遮罩，避免内容被硬切 */
+.sidebar-fade {
+  position: fixed;
+  z-index: 20;
+  height: 56px;
+  pointer-events: none;
+  opacity: 0;
+  background: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--su-bg-page) 45%, transparent) 0%,
+    color-mix(in srgb, var(--su-bg-page) 20%, transparent) 55%,
+    transparent 100%
+  );
+  backdrop-filter: blur(14px) saturate(1.1);
+  transition: opacity var(--su-duration-fast) var(--su-ease-in-out);
+}
+
+.sidebar-fade.is-visible {
+  opacity: 1;
+}
+
+/* 左侧卡片半透明，露出页面背景 */
+.sidebar-home .profile-card,
+.sidebar-home .service-panel,
+.sidebar-home .nav-card {
+  background-color: color-mix(in srgb, var(--su-bg-card) 64%, transparent);
+  border-color: color-mix(in srgb, var(--su-card-border) 55%, transparent);
+  backdrop-filter: blur(14px) saturate(1.15);
+}
+
 .sidebar-divider {
   margin: var(--su-space-2) 0;
   border-top: 1px dashed var(--su-border-strong);

stash-web/src/AppNext.tsx

@@ -220,6 +220,22 @@ export default function AppNext() {
     }
 
     const onScroll = () => setScrolled(body.scrollTop > 4)
+
+    // 独立渐隐层：固定在滚动区顶部，不随侧栏 transform 移动
+    const fade = document.createElement('div')
+    fade.className = 'sidebar-fade'
+    fade.setAttribute('aria-hidden', 'true')
+    document.body.appendChild(fade)
+
+    const updateFade = () => {
+      if (!(sider instanceof HTMLElement)) return
+      const rect = sider.getBoundingClientRect()
+      fade.style.left = `${rect.left}px`
+      fade.style.width = `${rect.width}px`
+      fade.style.top = `${body.getBoundingClientRect().top}px`
+      fade.classList.toggle('is-visible', body.scrollTop > 4 && rect.width > 0)
+    }
+
     const updateSticky = () => {
       const viewport = body.clientHeight
       const maxLeft = Math.max(0, sider instanceof HTMLElement ? sider.offsetHeight - viewport : 0)
@@ -227,6 +243,7 @@ export default function AppNext() {
       if (sider instanceof HTMLElement) {
         sider.style.transform = offset > 0 ? `translateY(${offset}px)` : ''
       }
+      updateFade()
     }
 
     body.addEventListener('scroll', onScroll, { passive: true })
@@ -243,6 +260,7 @@ export default function AppNext() {
       body.removeEventListener('scroll', updateSticky)
       window.removeEventListener('resize', updateSticky)
       observer.disconnect()
+      fade.remove()
       body.id = ''
       body.style.overflowY = ''
       body.style.overflowX = ''
@@ -627,26 +645,28 @@ export default function AppNext() {
           />
         }
         sider={
-          <div className="sidebar sidebar-home">
-            {site.sidebar.show_profile !== false && <ProfileCard profile={site.profile} />}
-            {site.sidebar.show_service !== false && (
-              <ServicePanel
-                projects={projects}
-                live={live}
-                refreshing={refreshing}
-                onRefresh={refresh}
-              />
-            )}
-            <div className="nav-card">
-              <Menu
-                items={sidebarItems}
-                activeKey={activeKey}
-                itemHeight={39}
-                onSelect={(key) => {
-                  if (key === 'home') navigate('/')
-                  else navigate(`/g/${encodeURIComponent(key.slice(2))}`)
-                }}
-              />
+          <div className="sidebar-wrap">
+            <div className="sidebar sidebar-home">
+              {site.sidebar.show_profile !== false && <ProfileCard profile={site.profile} />}
+              {site.sidebar.show_service !== false && (
+                <ServicePanel
+                  projects={projects}
+                  live={live}
+                  refreshing={refreshing}
+                  onRefresh={refresh}
+                />
+              )}
+              <div className="nav-card">
+                <Menu
+                  items={sidebarItems}
+                  activeKey={activeKey}
+                  itemHeight={39}
+                  onSelect={(key) => {
+                    if (key === 'home') navigate('/')
+                    else navigate(`/g/${encodeURIComponent(key.slice(2))}`)
+                  }}
+                />
+              </div>
             </div>
           </div>
         }