chore(release): 4.48.2 [skip ci]

## [4.48.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.48.1...v4.48.2) (2025-10-20)

### Bug Fixes

* **nav:** ensure nav bar appears above tutorial tooltips ([cc31564](cc315645de))

### Styles

* **hero:** unify background with rest of homepage ([035d831](035d8312c7))

CHANGELOG.md

@@ -1,3 +1,44 @@
+## [4.48.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.48.1...v4.48.2) (2025-10-20)
+
+
+### Bug Fixes
+
+* **nav:** ensure nav bar appears above tutorial tooltips ([cc31564](https://github.com/antialias/soroban-abacus-flashcards/commit/cc315645de30218d1b034da3e130458fe2961a69))
+
+
+### Styles
+
+* **hero:** unify background with rest of homepage ([035d831](https://github.com/antialias/soroban-abacus-flashcards/commit/035d8312c707cbf5b0e2a725d7b1d8ff406f842d))
+
+## [4.48.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.48.0...v4.48.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **hero:** prevent SSR hydration mismatch for subtitle ([1bfde8f](https://github.com/antialias/soroban-abacus-flashcards/commit/1bfde8fb251b227ccd2528bfe1c47acffd79fa49))
+
+## [4.48.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.47.2...v4.48.0) (2025-10-20)
+
+
+### Features
+
+* **hero:** persist random subtitle per-session ([318f946](https://github.com/antialias/soroban-abacus-flashcards/commit/318f9469a0805c200c55ce4024a95fd7b8dbe6a2))
+
+## [4.47.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.47.1...v4.47.2) (2025-10-20)
+
+
+### Bug Fixes
+
+* **nav:** prevent thrashing by using fixed position always ([eff44b3](https://github.com/antialias/soroban-abacus-flashcards/commit/eff44b3ad1ea0535c6965ad58012f9275cb143ec))
+* **nav:** remove unnecessary borders from transparent nav ([8c2ddca](https://github.com/antialias/soroban-abacus-flashcards/commit/8c2ddca28dbdd7743227eed4d19a9a8f662a72b5))
+
+## [4.47.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.47.0...v4.47.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* **hero:** prevent nav thrashing with hysteresis ([71b1b93](https://github.com/antialias/soroban-abacus-flashcards/commit/71b1b933b598c0a6a8aef1bc9f8c598c1871b2eb))
+
 ## [4.47.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.46.2...v4.47.0) (2025-10-20)
 
 

apps/web/src/components/AppNavBar.tsx

@@ -580,11 +580,11 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
           shadow: isTransparent ? 'none' : 'sm',
           borderBottom: isTransparent ? 'none' : '1px solid',
           borderColor: isTransparent ? 'transparent' : 'gray.200',
-          position: isTransparent ? 'fixed' : 'sticky',
+          position: 'fixed',
           top: 0,
           left: 0,
           right: 0,
-          zIndex: 30,
+          zIndex: 1000,
           transition: 'all 0.3s ease',
         })}
       >
@@ -659,31 +659,9 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
               <div />
             )}
 
-            <div
-              className={css({
-                display: 'flex',
-                gap: '6',
-                alignItems: 'center',
-                px: isTransparent ? '4' : '0',
-                py: isTransparent ? '2' : '0',
-                rounded: isTransparent ? 'lg' : 'none',
-                border: isTransparent ? '1px solid' : 'none',
-                borderColor: isTransparent ? 'rgba(255, 255, 255, 0.3)' : 'transparent',
-                transition: 'all 0.3s ease',
-              })}
-            >
+            <div className={hstack({ gap: '6', alignItems: 'center' })}>
               {/* Navigation Links */}
-              <nav
-                className={css({
-                  display: 'flex',
-                  gap: '4',
-                  px: isTransparent ? '2' : '0',
-                  py: isTransparent ? '1' : '0',
-                  rounded: isTransparent ? 'md' : 'none',
-                  border: isTransparent ? '1px solid' : 'none',
-                  borderColor: isTransparent ? 'rgba(255, 255, 255, 0.2)' : 'transparent',
-                })}
-              >
+              <nav className={hstack({ gap: '4' })}>
                 <NavLink href="/create" currentPath={pathname} isTransparent={isTransparent}>
                   Create
                 </NavLink>
@@ -695,18 +673,8 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
                 </NavLink>
               </nav>
 
-              {/* Abacus Style Dropdown - with border when transparent */}
-              <div
-                className={css({
-                  px: isTransparent ? '2' : '0',
-                  py: isTransparent ? '1' : '0',
-                  rounded: isTransparent ? 'md' : 'none',
-                  border: isTransparent ? '1px solid' : 'none',
-                  borderColor: isTransparent ? 'rgba(255, 255, 255, 0.2)' : 'transparent',
-                })}
-              >
-                <AbacusDisplayDropdown isFullscreen={false} />
-              </div>
+              {/* Abacus Style Dropdown */}
+              <AbacusDisplayDropdown isFullscreen={false} />
             </div>
           </div>
         </div>

apps/web/src/components/HeroAbacus.tsx

@@ -6,7 +6,14 @@ import { css } from '../../styled-system/css'
 import { useHomeHero } from '../contexts/HomeHeroContext'
 
 export function HeroAbacus() {
-  const { subtitle, abacusValue, setAbacusValue, setIsHeroVisible, isAbacusLoaded } = useHomeHero()
+  const {
+    subtitle,
+    abacusValue,
+    setAbacusValue,
+    setIsHeroVisible,
+    isAbacusLoaded,
+    isSubtitleLoaded,
+  } = useHomeHero()
   const appConfig = useAbacusConfig()
   const heroRef = useRef<HTMLDivElement>(null)
 
@@ -52,8 +59,7 @@ export function HeroAbacus() {
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'space-between',
-        background:
-          'linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(88, 28, 135, 0.3) 50%, rgba(17, 24, 39, 1) 100%)',
+        bg: 'gray.900',
         position: 'relative',
         overflow: 'hidden',
         px: '4',
@@ -101,6 +107,8 @@ export function HeroAbacus() {
             color: 'purple.300',
             fontStyle: 'italic',
             marginBottom: '8',
+            opacity: isSubtitleLoaded ? 1 : 0,
+            transition: 'opacity 0.5s ease-in-out',
           })}
         >
           {subtitle.text}

apps/web/src/contexts/HomeHeroContext.tsx

@@ -3,7 +3,7 @@
 import type React from 'react'
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import type { Subtitle } from '../data/abaciOneSubtitles'
-import { getRandomSubtitle, subtitles } from '../data/abaciOneSubtitles'
+import { subtitles } from '../data/abaciOneSubtitles'
 
 interface HomeHeroContextValue {
   subtitle: Subtitle
@@ -12,6 +12,7 @@ interface HomeHeroContextValue {
   isHeroVisible: boolean
   setIsHeroVisible: (visible: boolean) => void
   isAbacusLoaded: boolean
+  isSubtitleLoaded: boolean
 }
 
 const HomeHeroContext = createContext<HomeHeroContextValue | null>(null)
@@ -21,10 +22,28 @@ export { HomeHeroContext }
 export function HomeHeroProvider({ children }: { children: React.ReactNode }) {
   // Use first subtitle for SSR, then select random one on client mount
   const [subtitle, setSubtitle] = useState<Subtitle>(subtitles[0])
+  const [isSubtitleLoaded, setIsSubtitleLoaded] = useState(false)
 
-  // Select random subtitle only on client side to avoid SSR mismatch
+  // Select random subtitle only on client side, persist per-session
   useEffect(() => {
-    setSubtitle(getRandomSubtitle())
+    // Check if we have a stored subtitle index for this session
+    const storedIndex = sessionStorage.getItem('heroSubtitleIndex')
+
+    if (storedIndex !== null) {
+      // Use the stored subtitle index
+      const index = parseInt(storedIndex, 10)
+      if (!Number.isNaN(index) && index >= 0 && index < subtitles.length) {
+        setSubtitle(subtitles[index])
+        setIsSubtitleLoaded(true)
+        return
+      }
+    }
+
+    // Generate a new random index and store it
+    const randomIndex = Math.floor(Math.random() * subtitles.length)
+    sessionStorage.setItem('heroSubtitleIndex', randomIndex.toString())
+    setSubtitle(subtitles[randomIndex])
+    setIsSubtitleLoaded(true)
   }, [])
 
   // Shared abacus value - always start at 0 for SSR/hydration consistency
@@ -91,8 +110,9 @@ export function HomeHeroProvider({ children }: { children: React.ReactNode }) {
       isHeroVisible,
       setIsHeroVisible,
       isAbacusLoaded,
+      isSubtitleLoaded,
     }),
-    [subtitle, abacusValue, isHeroVisible, isAbacusLoaded]
+    [subtitle, abacusValue, isHeroVisible, isAbacusLoaded, isSubtitleLoaded]
   )
 
   return <HomeHeroContext.Provider value={value}>{children}</HomeHeroContext.Provider>

package.json

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