fix(design): prose dark-mode fix + editorial typography overhaul

package.json

@@ -24,6 +24,9 @@
     "@astrojs/vue": "^7.0.1",
     "@fontsource-variable/fraunces": "^5.2.9",
     "@fontsource-variable/inter-tight": "^5.2.7",
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@fontsource-variable/newsreader": "^5.2.10",
+    "@fontsource-variable/schibsted-grotesk": "^5.2.8",
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.2",
     "astro": "^7.0.7",

src/components/Header.astro

@@ -13,30 +13,41 @@ const nav = [
 ]
 ---
 
-<header class="sticky top-0 z-50 backdrop-blur-xl bg-[var(--color-bg)]/80 border-b border-[var(--color-border)]">
-  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex h-14 items-center justify-between">
-    <a href="/" class="flex items-center gap-2 font-display text-base font-semibold tracking-tight">
-      <img src="/pubid-logo.svg" alt="PubID" class="h-7 w-7" />
-      <span>PubID</span>
+<header class="sticky top-0 z-50 backdrop-blur-xl bg-[var(--color-bg)]/75 border-b border-[var(--color-border)]">
+  <!-- Subtle accent strip at the very top edge -->
+  <div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--color-accent)] to-transparent opacity-30"></div>
+
+  <div class="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8 flex h-16 items-center justify-between gap-4">
+    <a href="/" class="group flex items-center gap-2.5">
+      <span class="relative">
+        <img src="/pubid-logo.svg" alt="PubID" class="h-7 w-7 transition-transform group-hover:scale-105" />
+        <span class="absolute -inset-1 -z-10 rounded-full bg-[var(--color-accent)] opacity-0 blur-md transition-opacity group-hover:opacity-20"></span>
+      </span>
+      <span
+        class="text-[1.3rem] leading-none tracking-tight text-[var(--color-text)]"
+        style="font-family: 'Schibsted Grotesk Variable', ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.025em;"
+      >
+        Pub<span class="font-medium text-[var(--color-accent)]">ID</span>
+      </span>
     </a>
 
-    <nav class="hidden md:flex items-center gap-1">
+    <nav class="hidden md:flex items-center gap-0.5">
       {nav.map(item => (
         <a
           href={item.href}
           class:list={[
-            'px-3 py-1.5 rounded-md text-sm transition-colors',
+            'relative px-3 py-1.5 rounded-md text-sm transition-all duration-200',
             isActive(item.href) || (item.href !== '/' && path.startsWith(item.href))
-              ? 'text-[var(--color-accent)] bg-[var(--color-accent-soft)]'
-              : 'text-[var(--color-text-2)] hover:text-[var(--color-text)]',
+              ? 'text-[var(--color-accent)] bg-[var(--color-accent-soft)] font-medium'
+              : 'text-[var(--color-text-2)] hover:text-[var(--color-text)] hover:bg-[var(--color-bg-raised)]',
           ]}
         >
           {item.label}
         </a>
       ))}
     </nav>
 
-    <div class="flex items-center gap-2">
+    <div class="flex items-center gap-1">
       <button
         id="theme-toggle"
         aria-label="Toggle theme"
@@ -74,4 +85,4 @@ const nav = [
     const current = document.documentElement.dataset.theme
     setTheme(current === 'dark' ? 'light' : 'dark')
   })
-</script>
+</script>

src/components/home/HomePage.vue

@@ -412,60 +412,84 @@ onMounted(() => {
 
       <div class="anatomy-breakdown">
         <div class="anatomy-identifier">
-          <span class="anatomy-segment" style="--seg-color: #4590cd">ISO</span><span class="anatomy-sep">/</span>
-          <span class="anatomy-segment" style="--seg-color: #059669">IEC</span><span class="anatomy-sep">&nbsp;</span>
-          <span class="anatomy-segment" style="--seg-color: #f87171">17031</span><span class="anatomy-sep">-</span>
-          <span class="anatomy-segment" style="--seg-color: #34d399">1</span><span class="anatomy-sep">:</span>
-          <span class="anatomy-segment" style="--seg-color: #fbbf24">2020</span><span class="anatomy-sep">/</span>
-          <span class="anatomy-segment" style="--seg-color: #2dd4bf">Amd</span><span class="anatomy-sep">&nbsp;</span>
-          <span class="anatomy-segment" style="--seg-color: #2dd4bf">1</span><span class="anatomy-sep">:</span>
-          <span class="anatomy-segment" style="--seg-color: #2dd4bf">2022</span>
+          <div class="anatomy-identifier-label">Example — ISO/IEC with Amendment</div>
+          <div class="anatomy-identifier-string">
+            <span class="anatomy-segment" style="--seg-color: #4590cd">ISO</span><span class="anatomy-sep">/</span>
+            <span class="anatomy-segment" style="--seg-color: #059669">IEC</span><span class="anatomy-sep">&nbsp;</span>
+            <span class="anatomy-segment" style="--seg-color: #f87171">17031</span><span class="anatomy-sep">-</span>
+            <span class="anatomy-segment" style="--seg-color: #34d399">1</span><span class="anatomy-sep">:</span>
+            <span class="anatomy-segment" style="--seg-color: #fbbf24">2020</span><span class="anatomy-sep">/</span>
+            <span class="anatomy-segment" style="--seg-color: #2dd4bf">Amd</span><span class="anatomy-sep">&nbsp;</span>
+            <span class="anatomy-segment" style="--seg-color: #2dd4bf">1</span><span class="anatomy-sep">:</span>
+            <span class="anatomy-segment" style="--seg-color: #2dd4bf">2022</span>
+          </div>
         </div>
 
-        <div class="anatomy-legend">
-          <div class="anatomy-legend-item">
-            <div class="anatomy-legend-chip" style="--seg-color: #4590cd">Publisher</div>
-            <div class="anatomy-legend-desc">
-              <strong>The issuing organization</strong> — ISO, IEC, IEEE, NIST, BSI, etc. Joint publications list multiple publishers separated by slashes.
+        <ol class="anatomy-legend">
+          <li class="anatomy-legend-item" style="--seg-color: #4590cd">
+            <span class="anatomy-legend-marker" aria-hidden="true"></span>
+            <div class="anatomy-legend-body">
+              <div class="anatomy-legend-title">Publisher</div>
+              <div class="anatomy-legend-desc">
+                <strong>The issuing organization</strong> — ISO, IEC, IEEE, NIST, BSI, etc. Joint publications list multiple publishers separated by slashes.
+              </div>
             </div>
-          </div>
-          <div class="anatomy-legend-item">
-            <div class="anatomy-legend-chip" style="--seg-color: #059669">Copublisher</div>
-            <div class="anatomy-legend-desc">
-              <strong>Jointly published with</strong> — a second publisher sharing responsibility. Written after the primary publisher, e.g. <code>ISO/IEC</code>, <code>IEC/IEEE</code>.
+          </li>
+          <li class="anatomy-legend-item" style="--seg-color: #059669">
+            <span class="anatomy-legend-marker" aria-hidden="true"></span>
+            <div class="anatomy-legend-body">
+              <div class="anatomy-legend-title">Copublisher</div>
+              <div class="anatomy-legend-desc">
+                <strong>Jointly published with</strong> — a second publisher sharing responsibility. Written after the primary publisher, e.g. <code>ISO/IEC</code>, <code>IEC/IEEE</code>.
+              </div>
             </div>
-          </div>
-          <div class="anatomy-legend-item">
-            <div class="anatomy-legend-chip" style="--seg-color: #dc2626">Stage</div>
-            <div class="anatomy-legend-desc">
-              <strong>Where in its lifecycle</strong> — WD (Working Draft), CD (Committee Draft), DIS (Draft International Standard), FDIS (Final Draft). Encodes development progress directly in the identifier.
+          </li>
+          <li class="anatomy-legend-item" style="--seg-color: #dc2626">
+            <span class="anatomy-legend-marker" aria-hidden="true"></span>
+            <div class="anatomy-legend-body">
+              <div class="anatomy-legend-title">Stage</div>
+              <div class="anatomy-legend-desc">
+                <strong>Where in its lifecycle</strong> — WD (Working Draft), CD (Committee Draft), DIS (Draft International Standard), FDIS (Final Draft). Encodes development progress directly in the identifier.
+              </div>
             </div>
-          </div>
-          <div class="anatomy-legend-item">
-            <div class="anatomy-legend-chip" style="--seg-color: #f87171">Number</div>
-            <div class="anatomy-legend-desc">
-              <strong>The unique numeric ID</strong> — assigned by the publisher. May include sub-parts (<code>800-53</code>), letter suffixes (<code>9001</code>), or prefixed sections (<code>JIS A 0001</code>).
+          </li>
+          <li class="anatomy-legend-item" style="--seg-color: #f87171">
+            <span class="anatomy-legend-marker" aria-hidden="true"></span>
+            <div class="anatomy-legend-body">
+              <div class="anatomy-legend-title">Number</div>
+              <div class="anatomy-legend-desc">
+                <strong>The unique numeric ID</strong> — assigned by the publisher. May include sub-parts (<code>800-53</code>), letter suffixes (<code>9001</code>), or prefixed sections (<code>JIS A 0001</code>).
+              </div>
             </div>
-          </div>
-          <div class="anatomy-legend-item">
-            <div class="anatomy-legend-chip" style="--seg-color: #fbbf24">Year</div>
-            <div class="anatomy-legend-desc">
-              <strong>Publication or revision year</strong> — typically separated by a colon (<code>:2015</code>) or hyphen (<code>-2018</code> depending on publisher convention).
+          </li>
+          <li class="anatomy-legend-item" style="--seg-color: #fbbf24">
+            <span class="anatomy-legend-marker" aria-hidden="true"></span>
+            <div class="anatomy-legend-body">
+              <div class="anatomy-legend-title">Year</div>
+              <div class="anatomy-legend-desc">
+                <strong>Publication or revision year</strong> — typically separated by a colon (<code>:2015</code>) or hyphen (<code>-2018</code> depending on publisher convention).
+              </div>
             </div>
-          </div>
-          <div class="anatomy-legend-item">
-            <div class="anatomy-legend-chip" style="--seg-color: #2dd4bf">Supplement</div>
-            <div class="anatomy-legend-desc">
-              <strong>Amendment or Corrigendum</strong> — a supplement identifier <em>contains</em> the base identifier. <code>Amd 1:2023</code> wraps the base standard, adding its own number and year.
+          </li>
+          <li class="anatomy-legend-item" style="--seg-color: #2dd4bf">
+            <span class="anatomy-legend-marker" aria-hidden="true"></span>
+            <div class="anatomy-legend-body">
+              <div class="anatomy-legend-title">Supplement</div>
+              <div class="anatomy-legend-desc">
+                <strong>Amendment or Corrigendum</strong> — a supplement identifier <em>contains</em> the base identifier. <code>Amd 1:2023</code> wraps the base standard, adding its own number and year.
+              </div>
             </div>
-          </div>
-          <div class="anatomy-legend-item">
-            <div class="anatomy-legend-chip" style="--seg-color: #34d399">Language</div>
-            <div class="anatomy-legend-desc">
-              <strong>Publication language</strong> — <code>en</code> (English), <code>fr</code> (French), <code>ru</code> (Russian), etc. Not all publishers include this.
+          </li>
+          <li class="anatomy-legend-item" style="--seg-color: #34d399">
+            <span class="anatomy-legend-marker" aria-hidden="true"></span>
+            <div class="anatomy-legend-body">
+              <div class="anatomy-legend-title">Language</div>
+              <div class="anatomy-legend-desc">
+                <strong>Publication language</strong> — <code>en</code> (English), <code>fr</code> (French), <code>ru</code> (Russian), etc. Not all publishers include this.
+              </div>
             </div>
-          </div>
-        </div>
+          </li>
+        </ol>
       </div>
 
       <div class="anatomy-mapping">

src/pages/about.astro

@@ -12,7 +12,8 @@ const description = entry.data.description || ''
 ---
 
 <BaseLayout title={title} description={description}>
-  <article class="mx-auto max-w-3xl px-6 py-16 prose prose-pubid">
+  <article class="mx-auto max-w-2xl px-6 pt-20 pb-24 prose">
+    <p class="eyebrow mb-4">About</p>
     <Content />
   </article>
 </BaseLayout>

src/pages/adopt/[...slug].astro

@@ -19,7 +19,8 @@ const title = item.data.title || 'Adopt'
 ---
 
 <BaseLayout title={title} description={item.data.description || ''}>
-  <article class="mx-auto max-w-3xl px-6 py-16 prose prose-pubid">
+  <article class="prose mx-auto max-w-3xl px-6 pt-20 pb-24">
+    <p class="eyebrow mb-4">Adopt</p>
     <Content />
   </article>
 </BaseLayout>

src/pages/adopt/index.astro

@@ -9,7 +9,8 @@ const title = entry.data.title || 'Adopt PubID'
 ---
 
 <BaseLayout title={title} description={entry.data.description || ''}>
-  <article class="mx-auto max-w-3xl px-6 py-16 prose prose-pubid">
+  <article class="prose mx-auto max-w-3xl px-6 pt-20 pb-24">
+    <p class="eyebrow mb-4">Adopt</p>
     <Content />
   </article>
 </BaseLayout>

src/pages/blog/[...slug].astro

@@ -19,26 +19,26 @@ const title = post.data.title || 'Untitled'
 ---
 
 <BaseLayout title={title} description={post.data.description || ''}>
-  <article class="mx-auto max-w-3xl px-6 py-16">
+  <article class="mx-auto max-w-3xl px-6 pt-20 pb-24">
     <header class="mb-10">
-      <div class="text-xs uppercase tracking-wide text-[var(--color-text-3)] mb-2">
+      <div class="eyebrow mb-3">
         <a href="/blog" class="hover:text-[var(--color-accent)]">Blog</a>
-        <span class="mx-2">·</span>
+        <span class="mx-2 text-[var(--color-text-3)]">·</span>
         <time datetime={date.toISOString()}>{formatDate(date)}</time>
-        <span class="mx-2">·</span>
+        <span class="mx-2 text-[var(--color-text-3)]">·</span>
         <span>{post.data.author}</span>
       </div>
-      <h1 class="font-display text-4xl font-bold tracking-tight">{title}</h1>
-      {post.data.description && <p class="text-lg text-[var(--color-text-2)] mt-2">{post.data.description}</p>}
+      <h1 class="font-display text-4xl font-semibold tracking-tight text-[var(--color-text)]">{title}</h1>
+      {post.data.description && <p class="text-lg text-[var(--color-text-2)] mt-3 leading-relaxed">{post.data.description}</p>}
     </header>
 
-    <div class="prose prose-pubid max-w-none">
+    <div class="prose max-w-none">
       <Content />
     </div>
 
     {post.data.tags.length > 0 && (
       <footer class="mt-12 pt-6 border-t border-[var(--color-border-subtle)]">
-        <div class="text-xs uppercase tracking-wide text-[var(--color-text-3)] mb-2">Tags</div>
+        <div class="eyebrow mb-3">Tags</div>
         <div class="flex flex-wrap gap-1.5">
           {post.data.tags.map(t => <span class="chip">{t}</span>)}
         </div>

src/pages/concepts/[slug].astro

@@ -17,8 +17,8 @@ const title = item.data.title || 'Concept'
 ---
 
 <BaseLayout title={title} description={item.data.description || ''}>
-  <article class="mx-auto max-w-3xl px-6 py-16 prose prose-pubid">
-    <h1>{title}</h1>
+  <article class="prose mx-auto max-w-3xl px-6 pt-20 pb-24">
+    <p class="eyebrow mb-4">Concept</p>
     <Content />
   </article>
 </BaseLayout>

src/pages/library/[...slug].astro

@@ -19,7 +19,8 @@ const title = item.data.title || 'Library'
 ---
 
 <BaseLayout title={title} description={item.data.description || ''}>
-  <article class="mx-auto max-w-3xl px-6 py-16 prose prose-pubid">
+  <article class="prose mx-auto max-w-3xl px-6 pt-20 pb-24">
+    <p class="eyebrow mb-4">Library</p>
     <Content />
   </article>
 </BaseLayout>

src/pages/library/index.astro

@@ -9,7 +9,8 @@ const title = entry.data.title || 'Library'
 ---
 
 <BaseLayout title={title} description={entry.data.description || ''}>
-  <article class="mx-auto max-w-3xl px-6 py-16 prose prose-pubid">
+  <article class="prose mx-auto max-w-3xl px-6 pt-20 pb-24">
+    <p class="eyebrow mb-4">Library</p>
     <Content />
   </article>
 </BaseLayout>

src/pages/specs/[...slug].astro

@@ -18,7 +18,8 @@ const title = item.data.title || 'Specification'
 ---
 
 <BaseLayout title={title} description={item.data.description || ''}>
-  <article class="mx-auto max-w-4xl px-6 py-16 prose prose-pubid">
+  <article class="prose mx-auto max-w-4xl px-6 pt-20 pb-24">
+    <p class="eyebrow mb-4">Specification</p>
     <Content />
   </article>
 </BaseLayout>

src/pages/specs/index.astro

@@ -9,7 +9,8 @@ const title = entry.data.title || 'Specifications'
 ---
 
 <BaseLayout title={title} description={entry.data.description || ''}>
-  <article class="mx-auto max-w-4xl px-6 py-16 prose prose-pubid">
+  <article class="prose mx-auto max-w-4xl px-6 pt-20 pb-24">
+    <p class="eyebrow mb-4">Specifications</p>
     <Content />
   </article>
 </BaseLayout>