fix(docs): correct OG font, mobile logo, and footer stacking

- switch the docs OG image title font from Geist to the site's real
  brand font (Season Sans), instantiated as a static TTF weight since
  Satori can't parse WOFF2 or variable fonts; served from /static/
  so the i18n proxy's matcher (which excludes static but not fonts)
  doesn't intercept it
- fix DocsLayout's nav.title (fumadocs' own mobile menu slot) to show
  the wordmark instead of the icon mark
- add an isolated stacking context + higher z-index to both the docs
  and sim app footers so fumadocs' sticky z-20 sidebar can't paint
  over the footer content or the peel reveal

Author: waleedlatif1

apps/docs/app/[lang]/layout.tsx

@@ -11,7 +11,7 @@ import {
 } from '@/components/docs-layout/sidebar-components'
 import { Footer } from '@/components/footer/footer'
 import { Navbar } from '@/components/navbar/navbar'
-import { SimLogoIcon } from '@/components/ui/sim-logo'
+import { SimWordmark } from '@/components/ui/sim-logo'
 import { i18n } from '@/lib/i18n'
 import { serializeJsonLd } from '@/lib/json-ld'
 import { source } from '@/lib/source'
@@ -102,7 +102,7 @@ export default async function Layout({ children, params }: LayoutProps) {
           <DocsLayout
             tree={source.pageTree[lang]}
             nav={{
-              title: <SimLogoIcon className='size-[22px]' />,
+              title: <SimWordmark className='h-[18px]' />,
             }}
             sidebar={{
               tabs: false,

apps/docs/app/api/og/route.tsx

@@ -22,7 +22,7 @@ const OG_CONTAINER_STYLE = {
   justifyContent: 'space-between',
   padding: '56px 64px',
   background: '#c3c3c3',
-  fontFamily: 'Geist',
+  fontFamily: 'Season',
 } satisfies CSSProperties
 const OG_HEADER_STYLE = {
   display: 'flex',
@@ -82,31 +82,29 @@ function wrapTitleLines(title: string, fontSize: number): string[] {
 }
 
 /**
- * Loads a Google Font dynamically by fetching the CSS and extracting the font URL.
+ * Loads a static (600/semibold) TTF instance of the site's own Season Sans
+ * font — the platform's real brand/body font, also used by the library/blog
+ * cover template this OG image matches. Instantiated from the variable font
+ * at `apps/docs/app/fonts/SeasonSansUprightsVF.woff2` (`fonttools
+ * varLib.instancer wght=600`, then flavor-stripped to plain TTF) rather than
+ * loading the variable WOFF2 directly: Satori (`next/og`'s renderer) can't
+ * parse variable fonts without excessive memory use, and can't parse WOFF2
+ * at all ("Unsupported OpenType signature wOF2") — it needs an uncompressed
+ * TTF/OTF. Fetched over HTTP since the edge runtime has no filesystem access
+ * — served from `/static/fonts/` (not `/fonts/`) so it isn't intercepted by
+ * the site's i18n proxy (`proxy.ts`), whose matcher excludes `static` but
+ * not `fonts`.
  */
-async function loadGoogleFont(font: string, weights: string, text: string): Promise<ArrayBuffer> {
-  const url = `https://fonts.googleapis.com/css2?family=${font}:wght@${weights}&text=${encodeURIComponent(text)}`
-  const cssResponse = await fetch(url, {
+async function loadSeasonFont(baseUrl: string): Promise<ArrayBuffer> {
+  const response = await fetch(new URL('/static/fonts/SeasonSans-600-static.ttf', baseUrl), {
     next: { revalidate: FONT_CACHE_REVALIDATE_SECONDS },
   })
 
-  if (!cssResponse.ok) {
-    throw new Error(`Failed to load font CSS: ${cssResponse.status} ${cssResponse.statusText}`)
+  if (!response.ok) {
+    throw new Error(`Failed to load font data: ${response.status} ${response.statusText}`)
   }
 
-  const css = await cssResponse.text()
-  const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)
-
-  if (resource) {
-    const response = await fetch(resource[1], {
-      next: { revalidate: FONT_CACHE_REVALIDATE_SECONDS },
-    })
-    if (response.ok) {
-      return await response.arrayBuffer()
-    }
-  }
-
-  throw new Error('Failed to load font data')
+  return await response.arrayBuffer()
 }
 
 /** "sim" wordmark, no icon — same brandbook workmark geometry as the docs navbar/landing OG cards. */
@@ -154,7 +152,7 @@ export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url)
   const title = searchParams.get('title') || 'Documentation'
 
-  const fontData = await loadGoogleFont('Geist', '400;500;600', title)
+  const fontData = await loadSeasonFont(request.url)
   const fontSize = getTitleFontSize(title)
   const titleLines = wrapTitleLines(title, fontSize)
 
@@ -176,9 +174,10 @@ export async function GET(request: NextRequest) {
       height: 630,
       fonts: [
         {
-          name: 'Geist',
+          name: 'Season',
           data: fontData,
           style: 'normal',
+          weight: 600,
         },
       ],
     }

apps/docs/components/footer/footer.tsx

@@ -130,9 +130,9 @@ function FooterColumn({ title, items }: { title: string; items: FooterItem[] })
 
 export function Footer() {
   return (
-    <div className='relative mt-[120px] pb-[320px] max-sm:mt-16 max-sm:pb-[200px] max-lg:mt-[88px]'>
+    <div className='relative isolate mt-[120px] pb-[320px] max-sm:mt-16 max-sm:pb-[200px] max-lg:mt-[88px]'>
       <FooterPeel />
-      <footer className='-mt-[320px] max-sm:-mt-[200px] relative z-10 w-full border-[var(--border)] border-t bg-[var(--bg)]'>
+      <footer className='-mt-[320px] max-sm:-mt-[200px] relative z-30 w-full border-[var(--border)] border-t bg-[var(--bg)]'>
         <div className='mx-auto w-full max-w-[1460px] px-20 pt-16 pb-16 max-sm:px-5 max-lg:px-8 max-lg:pt-12 max-lg:pb-12'>
           <nav
             aria-label='Footer navigation'

apps/docs/public/static/fonts/SeasonSans-600-static.ttf

@@ -135,9 +135,9 @@ export function Footer() {
     // The bottom padding here (matching FooterPeel's own height, `footer-peel.tsx`)
     // is the "reveal window": the extra scroll room, past the footer's own opaque
     // background, where the sticky-pinned peel image becomes visible.
-    <div className='relative mt-[120px] pb-[320px] max-sm:mt-16 max-sm:pb-[200px] max-lg:mt-[88px]'>
+    <div className='relative isolate mt-[120px] pb-[320px] max-sm:mt-16 max-sm:pb-[200px] max-lg:mt-[88px]'>
       <FooterPeel />
-      <footer className='-mt-[320px] max-sm:-mt-[200px] relative z-10 w-full border-[var(--border)] border-t bg-[var(--bg)]'>
+      <footer className='-mt-[320px] max-sm:-mt-[200px] relative z-30 w-full border-[var(--border)] border-t bg-[var(--bg)]'>
         <div className='mx-auto w-full max-w-[1460px] px-20 pt-16 pb-16 max-sm:px-5 max-lg:px-8 max-lg:pt-12 max-lg:pb-12'>
           <nav
             aria-label='Footer navigation'