Design Language tweaks

src/routes/+layout.svelte

@@ -6,6 +6,8 @@
   import MobileBookBar from '$lib/components/MobileBookBar.svelte';
   import RouteSkeleton from '$lib/components/RouteSkeleton.svelte';
   import { isMobileCtaButtonEnabled } from '$lib/feature-flags';
+  import readex400Woff2 from '@fontsource/readex-pro/files/readex-pro-latin-400-normal.woff2?url';
+  import readex700Woff2 from '@fontsource/readex-pro/files/readex-pro-latin-700-normal.woff2?url';
   import '@fontsource/readex-pro/latin-400.css';
   import '@fontsource/readex-pro/latin-500.css';
   import '@fontsource/readex-pro/latin-600.css';
@@ -16,6 +18,8 @@
   import '@fontsource/noto-sans/latin-400.css';
   import '@fontsource/noto-sans/latin-500.css';
   import '@fontsource/noto-sans/latin-700.css';
+  import unbounded700Woff2 from '@fontsource/unbounded/files/unbounded-latin-700-normal.woff2?url';
+  import unbounded800Woff2 from '@fontsource/unbounded/files/unbounded-latin-800-normal.woff2?url';
   import '@fontsource/unbounded/latin-400.css';
   import '@fontsource/unbounded/latin-600.css';
   import '@fontsource/unbounded/latin-700.css';
@@ -36,6 +40,34 @@
   const mobileCtaButtonEnabled = isMobileCtaButtonEnabled();
 
   let revealObserver: IntersectionObserver | null = null;
+  const scrollStoragePrefix = 'goodwalk:scroll:';
+
+  function getScrollStorageKey(urlLike: string) {
+    const url = new URL(urlLike, 'http://goodwalk.local');
+    return `${scrollStoragePrefix}${url.pathname}${url.search}`;
+  }
+
+  function saveScrollPosition(urlLike = window.location.href) {
+    if (typeof window === 'undefined') return;
+
+    sessionStorage.setItem(getScrollStorageKey(urlLike), String(window.scrollY));
+  }
+
+  function restoreScrollPosition(urlLike = window.location.href) {
+    if (typeof window === 'undefined' || window.location.hash) return;
+
+    const saved = sessionStorage.getItem(getScrollStorageKey(urlLike));
+    if (!saved) return;
+
+    const top = Number(saved);
+    if (!Number.isFinite(top)) return;
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        window.scrollTo({ top, left: 0, behavior: 'auto' });
+      });
+    });
+  }
 
   function shouldAnimateAnchorBounce() {
     return typeof window !== 'undefined' && window.innerWidth > 768;
@@ -87,12 +119,40 @@
     initClickTracking();
     requestAnimationFrame(initReveal);
 
+    restoreScrollPosition();
+
     // Same-page hash clicks aren't caught by afterNavigate
     function onHashChange() {
       bounceSection(window.location.hash);
     }
+
+    function onPageHide() {
+      saveScrollPosition();
+    }
+
+    function onVisibilityChange() {
+      if (document.visibilityState === 'hidden') {
+        saveScrollPosition();
+      }
+    }
+
+    function onPageShow(event: PageTransitionEvent) {
+      if (event.persisted) {
+        restoreScrollPosition();
+      }
+    }
+
     window.addEventListener('hashchange', onHashChange);
-    return () => window.removeEventListener('hashchange', onHashChange);
+    window.addEventListener('pagehide', onPageHide);
+    window.addEventListener('pageshow', onPageShow);
+    document.addEventListener('visibilitychange', onVisibilityChange);
+
+    return () => {
+      window.removeEventListener('hashchange', onHashChange);
+      window.removeEventListener('pagehide', onPageHide);
+      window.removeEventListener('pageshow', onPageShow);
+      document.removeEventListener('visibilitychange', onVisibilityChange);
+    };
   });
 
   function shouldShowSkeleton() {
@@ -148,6 +208,13 @@
   });
 </script>
 
+<svelte:head>
+  <link rel="preload" href={readex400Woff2} as="font" type="font/woff2" crossorigin="anonymous" />
+  <link rel="preload" href={readex700Woff2} as="font" type="font/woff2" crossorigin="anonymous" />
+  <link rel="preload" href={unbounded700Woff2} as="font" type="font/woff2" crossorigin="anonymous" />
+  <link rel="preload" href={unbounded800Woff2} as="font" type="font/woff2" crossorigin="anonymous" />
+</svelte:head>
+
 <svelte:body class:mobile-cta-enabled={mobileCtaButtonEnabled} />
 
 <div class="layout-shell">