chore(release): 4.58.0 [skip ci]

## [4.58.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.57.10...v4.58.0) (2025-10-21)

### Features

* **navbar:** add glassmorphism effect to nav links when scrolled ([89b9072](89b90723b7))

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [4.58.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.57.10...v4.58.0) (2025-10-21)
+
+
+### Features
+
+* **navbar:** add glassmorphism effect to nav links when scrolled ([89b9072](https://github.com/antialias/soroban-abacus-flashcards/commit/89b90723b7a3fc9ed12da3ba8718fccb6ce0760f))
+
 ## [4.57.10](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.57.9...v4.57.10) (2025-10-21)
 
 

apps/web/src/components/AppNavBar.tsx

@@ -575,12 +575,8 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
   return (
     <Tooltip.Provider delayDuration={200}>
       <header
-        style={{
-          background: isTransparent
-            ? 'transparent'
-            : 'linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) calc(100% - 10px), transparent 100%)',
-        }}
         className={css({
+          bg: isTransparent ? 'transparent' : 'rgba(0, 0, 0, 0.5)',
           backdropFilter: isTransparent ? 'none' : 'blur(12px)',
           shadow: isTransparent ? 'none' : 'lg',
           borderBottom: isTransparent ? 'none' : '1px solid',
@@ -722,6 +718,9 @@ function NavLink({
   return (
     <Link
       href={href}
+      style={{
+        backdropFilter: isTransparent ? 'none' : 'blur(8px)',
+      }}
       className={css({
         px: { base: '4', md: '3' },
         py: { base: '3', md: '2' },
@@ -741,17 +740,26 @@ function NavLink({
             ? 'rgba(255, 255, 255, 0.15)'
             : 'transparent'
           : isActive
-            ? 'rgba(139, 92, 246, 0.2)'
-            : 'transparent',
+            ? 'rgba(139, 92, 246, 0.25)'
+            : 'rgba(255, 255, 255, 0.08)',
+        border: isTransparent ? 'none' : '1px solid',
+        borderColor: isTransparent
+          ? 'transparent'
+          : isActive
+            ? 'rgba(139, 92, 246, 0.3)'
+            : 'rgba(255, 255, 255, 0.15)',
         rounded: 'lg',
         transition: 'all',
         textDecoration: 'none',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        boxShadow: isTransparent ? 'none' : '0 2px 8px rgba(0, 0, 0, 0.2)',
         _hover: {
           color: isTransparent ? 'white' : 'rgba(196, 181, 253, 1)',
-          bg: isTransparent ? 'rgba(255, 255, 255, 0.2)' : 'rgba(139, 92, 246, 0.25)',
+          bg: isTransparent ? 'rgba(255, 255, 255, 0.2)' : 'rgba(139, 92, 246, 0.3)',
+          borderColor: isTransparent ? 'transparent' : 'rgba(139, 92, 246, 0.4)',
+          boxShadow: isTransparent ? 'none' : '0 4px 12px rgba(139, 92, 246, 0.2)',
         },
       })}
     >

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soroban-monorepo",
-  "version": "4.57.10",
+  "version": "4.58.0",
   "private": true,
   "description": "Beautiful Soroban Flashcard Generator - Monorepo",
   "workspaces": [