chore(release): 4.59.0 [skip ci]

## [4.59.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.58.2...v4.59.0) (2025-10-21)

### Features

* **homepage:** increase hero abacus size for better visibility ([7666b0a](7666b0aea9))

CHANGELOG.md

@@ -1,3 +1,57 @@
+## [4.59.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.58.2...v4.59.0) (2025-10-21)
+
+
+### Features
+
+* **homepage:** increase hero abacus size for better visibility ([7666b0a](https://github.com/antialias/soroban-abacus-flashcards/commit/7666b0aea949f2432a4d0f4648c1a366af3ea6d2))
+
+## [4.58.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.58.1...v4.58.2) (2025-10-21)
+
+
+### Code Refactoring
+
+* **navbar:** prevent subtitle wrap and remove abacus emoji ([a58f7b7](https://github.com/antialias/soroban-abacus-flashcards/commit/a58f7b78b0020c85da523c36fdf6d70ad069736a))
+
+## [4.58.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.58.0...v4.58.1) (2025-10-21)
+
+
+### Bug Fixes
+
+* **navbar:** apply glassmorphism to transparent mode, not scrolled mode ([8893675](https://github.com/antialias/soroban-abacus-flashcards/commit/8893675b36b1c1534c6fe7e57fa7e0cc55f198d6))
+
+## [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)
+
+
+### Bug Fixes
+
+* **navbar:** remove border artifact and add 10px bottom fade ([d5f60ce](https://github.com/antialias/soroban-abacus-flashcards/commit/d5f60ce9d2fbc2a870b3bb96f5365a0e04e0afc4))
+
+
+### Styles
+
+* **navbar:** improve theming to match homepage dark aesthetic ([284fc90](https://github.com/antialias/soroban-abacus-flashcards/commit/284fc90a53f5f4868a3e41421760ebc813be12b5))
+
+## [4.57.9](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.57.8...v4.57.9) (2025-10-21)
+
+
+### Bug Fixes
+
+* **homepage:** add overflow hidden to Your Journey section ([415a1fb](https://github.com/antialias/soroban-abacus-flashcards/commit/415a1fb1faa263c9d69b4e781ce22da235ca2b66))
+
+## [4.57.8](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.57.7...v4.57.8) (2025-10-21)
+
+
+### Bug Fixes
+
+* **homepage:** adjust responsive breakpoints to prevent skill card clipping ([62ff067](https://github.com/antialias/soroban-abacus-flashcards/commit/62ff067bb956b17a9b3569eadc2a32abd24c27b8))
+
 ## [4.57.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.57.6...v4.57.7) (2025-10-21)
 
 

apps/web/src/app/page.tsx

@@ -149,24 +149,24 @@ export default function HomePage() {
                 border: '1px solid',
                 borderColor: 'gray.700',
                 shadow: 'lg',
-                minW: '1400px',
+                minW: { base: '100%', xl: '1400px' },
                 mx: 'auto',
               })}
             >
               <div
                 className={css({
                   display: 'flex',
-                  flexDirection: { base: 'column', md: 'row' },
+                  flexDirection: { base: 'column', xl: 'row' },
                   gap: '8',
-                  alignItems: { base: 'center', md: 'flex-start' },
+                  alignItems: { base: 'center', xl: 'flex-start' },
                 })}
               >
                 {/* Tutorial on the left */}
                 <div
                   className={css({
                     flex: '1',
-                    minW: { base: '100%', md: '500px' },
-                    maxW: { base: '100%', md: '500px' },
+                    minW: { base: '100%', xl: '500px' },
+                    maxW: { base: '100%', xl: '500px' },
                   })}
                 >
                   <TutorialPlayer
@@ -397,7 +397,7 @@ export default function HomePage() {
             </section>
 
             {/* Progression Visualization */}
-            <section className={stack({ gap: '6', mb: '16' })}>
+            <section className={stack({ gap: '6', mb: '16', overflow: 'hidden' })}>
               <div className={css({ textAlign: 'center' })}>
                 <h2
                   className={css({

apps/web/src/components/AppNavBar.tsx

@@ -576,10 +576,11 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
     <Tooltip.Provider delayDuration={200}>
       <header
         className={css({
-          bg: isTransparent ? 'transparent' : 'white',
-          shadow: isTransparent ? 'none' : 'sm',
+          bg: isTransparent ? 'transparent' : 'rgba(0, 0, 0, 0.5)',
+          backdropFilter: isTransparent ? 'none' : 'blur(12px)',
+          shadow: isTransparent ? 'none' : 'lg',
           borderBottom: isTransparent ? 'none' : '1px solid',
-          borderColor: isTransparent ? 'transparent' : 'gray.200',
+          borderColor: isTransparent ? 'transparent' : 'rgba(139, 92, 246, 0.2)',
           position: 'fixed',
           top: 0,
           left: 0,
@@ -599,7 +600,7 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
                   flexDirection: 'column',
                   gap: '0',
                   textDecoration: 'none',
-                  _hover: { '& > .brand-name': { color: 'brand.900' } },
+                  _hover: { '& > .brand-name': { color: 'rgba(196, 181, 253, 1)' } },
                   opacity: 0,
                   animation: 'fadeIn 0.3s ease-out forwards',
                 })}
@@ -608,10 +609,10 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
                   className={css({
                     fontSize: 'xl',
                     fontWeight: 'bold',
-                    color: 'brand.800',
+                    color: 'rgba(255, 255, 255, 0.95)',
                   })}
                 >
-                  🧮 Abaci One
+                  Abaci One
                 </span>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
@@ -619,10 +620,11 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
                       className={css({
                         fontSize: 'xs',
                         fontWeight: 'medium',
-                        color: 'brand.600',
+                        color: 'rgba(196, 181, 253, 0.8)',
                         fontStyle: 'italic',
                         cursor: 'help',
-                        _hover: { color: 'brand.700' },
+                        whiteSpace: 'nowrap',
+                        _hover: { color: 'rgba(196, 181, 253, 1)' },
                       })}
                     >
                       {subtitle.text}
@@ -717,6 +719,9 @@ function NavLink({
   return (
     <Link
       href={href}
+      style={{
+        backdropFilter: isTransparent ? 'blur(8px)' : 'none',
+      }}
       className={css({
         px: { base: '4', md: '3' },
         py: { base: '3', md: '2' },
@@ -729,24 +734,33 @@ function NavLink({
             ? 'white'
             : 'rgba(255, 255, 255, 0.8)'
           : isActive
-            ? 'brand.700'
-            : 'gray.600',
+            ? 'rgba(196, 181, 253, 1)'
+            : 'rgba(209, 213, 219, 0.9)',
         bg: isTransparent
           ? isActive
-            ? 'rgba(255, 255, 255, 0.15)'
-            : 'transparent'
+            ? 'rgba(255, 255, 255, 0.2)'
+            : 'rgba(255, 255, 255, 0.08)'
           : isActive
-            ? 'brand.50'
+            ? 'rgba(139, 92, 246, 0.2)'
             : 'transparent',
+        border: isTransparent ? '1px solid' : 'none',
+        borderColor: isTransparent
+          ? isActive
+            ? 'rgba(255, 255, 255, 0.3)'
+            : 'rgba(255, 255, 255, 0.15)'
+          : 'transparent',
         rounded: 'lg',
         transition: 'all',
         textDecoration: 'none',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        boxShadow: isTransparent ? '0 2px 8px rgba(0, 0, 0, 0.2)' : 'none',
         _hover: {
-          color: isTransparent ? 'white' : isActive ? 'brand.800' : 'gray.900',
-          bg: isTransparent ? 'rgba(255, 255, 255, 0.2)' : isActive ? 'brand.100' : 'gray.50',
+          color: isTransparent ? 'white' : 'rgba(196, 181, 253, 1)',
+          bg: isTransparent ? 'rgba(255, 255, 255, 0.25)' : 'rgba(139, 92, 246, 0.25)',
+          borderColor: isTransparent ? 'rgba(255, 255, 255, 0.4)' : 'transparent',
+          boxShadow: isTransparent ? '0 4px 12px rgba(0, 0, 0, 0.3)' : 'none',
         },
       })}
     >

apps/web/src/components/HeroAbacus.tsx

@@ -131,7 +131,7 @@ export function HeroAbacus() {
       >
         <div
           className={css({
-            transform: { base: 'scale(2)', md: 'scale(3)', lg: 'scale(4)' },
+            transform: { base: 'scale(3)', md: 'scale(4.5)', lg: 'scale(6)' },
             transformOrigin: 'center center',
             transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
           })}

package.json

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