update

src/js/site.js

@@ -15,9 +15,17 @@ function injectChrome() {
     navHost.outerHTML = `
 <header class="site-nav" id="site-nav">
   <div class="nav-inner">
-    <a class="nav-brand" href="/">
-      <img src="/assets/logo/peardock-icon-64.png" alt="" width="32" height="32" />
-      peardock
+    <a class="nav-brand" href="/" aria-label="PearDock home">
+      <img
+        class="nav-brand-logo"
+        src="/assets/logo/peardock-icon-master.png"
+        srcset="/assets/logo/peardock-icon-512.png 1x, /assets/logo/peardock-icon-1024.png 2x"
+        alt=""
+        width="96"
+        height="96"
+        decoding="async"
+      />
+      <span class="nav-brand-text">peardock</span>
     </a>
     <button type="button" class="nav-toggle" aria-label="Menu" aria-expanded="false">☰</button>
     <ul class="nav-links">

src/styles/global.css

@@ -43,7 +43,17 @@
   --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
   --shadow-glow: 0 0 80px rgba(45, 212, 191, 0.15);
 
+  /* Compact bar; pear hangs below and is cradled by the bar bottom */
   --nav-h: 68px;
+  --brand-logo: 96px;
+  /* Keep leaf fully on-screen (no overflow above viewport top) */
+  --brand-top-inset: 6px;
+  /* How far the pear hangs past the bar bottom */
+  --brand-overhang: calc(var(--brand-logo) - var(--nav-h) + var(--brand-top-inset));
+  /* Bottom semicircle width — wraps pear under the bar only */
+  --brand-cradle: calc(var(--brand-logo) + 10px);
+  /* How far the cradle dips below the bar (pear hang + a little padding) */
+  --brand-cradle-depth: calc(var(--brand-overhang) + 8px);
   --max: 1200px;
   --max-wide: 1400px;
   /* Docs prose width is controlled in docs.css (--docs-content) */
@@ -564,8 +574,12 @@ tr:hover td {
   height: var(--nav-h);
   display: flex;
   align-items: center;
+  /* Pear hangs below the strip; keep overflow visible */
+  overflow: visible;
   transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
   border-bottom: 1px solid transparent;
+  /* Keep glass only on the bar strip; logo + cradle paint above it */
+  isolation: isolate;
 }
 
 .site-nav.scrolled {
@@ -584,36 +598,149 @@ tr:hover td {
   justify-content: space-between;
   gap: 1rem;
   min-width: 0;
+  height: 100%;
+  overflow: visible;
+  position: relative;
+  z-index: 1;
 }
 
 .nav-brand {
   display: flex;
   align-items: center;
-  gap: 0.65rem;
+  /* Tight: pear artwork already has transparent side padding */
+  gap: 0.15rem;
   color: var(--text);
   font-weight: 700;
-  font-size: 1.05rem;
+  font-size: 1.15rem;
   letter-spacing: -0.03em;
   flex-shrink: 0;
   min-width: 0;
+  position: relative;
+  z-index: 2;
+  /* Brand row matches bar; logo hangs from here */
+  height: var(--nav-h);
+}
+
+/*
+ * Bottom-only cradle: a semicircular extension of the nav bar that
+ * wraps under the floating pear. No top half ring — the curve starts
+ * at the bar’s bottom edge and returns to it on the other side.
+ */
+.nav-brand::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  /* Hang from the bar bottom; nudge up 1px so the curve joins the border */
+  top: 100%;
+  width: var(--brand-cradle);
+  height: var(--brand-cradle-depth);
+  margin-left: calc((var(--brand-logo) - var(--brand-cradle)) / 2);
+  margin-top: -1px;
+  z-index: 0;
+  pointer-events: none;
+  box-sizing: border-box;
+  /* Bowl shape: open top, rounded bottom */
+  border: 1px solid transparent;
+  border-top: none;
+  border-radius: 0 0 50% 50% / 0 0 100% 100%;
+  background: transparent;
+  box-shadow: none;
+  transition:
+    background 0.3s,
+    border-color 0.3s,
+    box-shadow 0.3s,
+    backdrop-filter 0.3s;
+}
+
+.site-nav.scrolled .nav-brand::after {
+  /* Same glass + border token as the bar — continuous chrome under the pear */
+  background: var(--bg-glass);
+  backdrop-filter: blur(16px) saturate(1.4);
+  -webkit-backdrop-filter: blur(16px) saturate(1.4);
+  border-color: var(--border);
+  border-top-color: transparent;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
+}
+
+/*
+ * Cover the straight nav border under the pear so only the cradle curve
+ * remains. Match the bar glass (not a solid dark strip).
+ */
+.site-nav.scrolled .nav-brand::before {
+  content: '';
+  position: absolute;
+  left: calc((var(--brand-logo) - var(--brand-cradle)) / 2 + 1px);
+  bottom: -1px;
+  width: calc(var(--brand-cradle) - 2px);
+  height: 2px;
+  z-index: 2;
+  pointer-events: none;
+  background: var(--bg-glass);
+  backdrop-filter: blur(16px) saturate(1.4);
+  -webkit-backdrop-filter: blur(16px) saturate(1.4);
+}
+
+.nav-brand-text {
+  line-height: 1;
+  white-space: nowrap;
+  /* Pull wordmark into the logo’s empty right margin */
+  margin-left: -0.35rem;
+  position: relative;
+  z-index: 1;
+}
+
+/*
+ * Free-floating pear — top stays inside the bar (no viewport clip);
+ * bottom hangs below and sits in the circular cradle.
+ */
+.nav-brand-logo {
+  width: var(--brand-logo);
+  height: var(--brand-logo);
+  max-width: none;
+  flex-shrink: 0;
+  display: block;
+  object-fit: contain;
+  object-position: center;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  position: relative;
+  z-index: 3;
+  align-self: flex-start;
+  margin: 0;
+  margin-top: var(--brand-top-inset);
+  margin-bottom: calc(-1 * var(--brand-overhang));
+  /* Soft depth so it reads over glass + page content */
+  filter:
+    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25))
+    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.4));
+  transition: transform 0.28s var(--ease), filter 0.28s var(--ease);
+  pointer-events: auto;
 }
 
 .nav-links {
   min-width: 0;
+  position: relative;
+  z-index: 1;
 }
 
 .nav-cta {
   flex-shrink: 0;
+  position: relative;
+  z-index: 1;
 }
 
 .nav-brand:hover {
   color: var(--text);
 }
 
-.nav-brand img {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
+.nav-brand:hover .nav-brand-logo {
+  /* Lift slightly but keep leaf on-screen (no negative translate past top) */
+  transform: translateY(-2px) scale(1.04);
+  filter:
+    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28))
+    drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45));
 }
 
 .nav-links {
@@ -829,12 +956,16 @@ body.docs-sidebar-open {
 @media (max-width: 900px) {
   :root {
     --nav-h: 60px;
+    --brand-logo: 76px;
+    --brand-top-inset: 4px;
+    --brand-cradle: calc(var(--brand-logo) + 12px);
   }
 
   .site-nav {
     height: auto;
     min-height: var(--nav-h);
     padding-top: env(safe-area-inset-top, 0);
+    overflow: visible;
   }
 
   .nav-inner {
@@ -846,10 +977,23 @@ body.docs-sidebar-open {
     flex-wrap: wrap;
     row-gap: 0;
     box-sizing: border-box;
+    overflow: visible;
   }
 
   .nav-brand {
     order: 1;
+    font-size: 1.1rem;
+    gap: 0.1rem;
+    height: calc(var(--nav-h) - 0px);
+    min-height: calc(var(--nav-h) - 8px);
+  }
+
+  .nav-brand-text {
+    margin-left: -0.25rem;
+  }
+
+  .nav-brand-logo {
+    margin-bottom: calc(-1 * var(--brand-overhang));
   }
 
   .nav-toggle {
@@ -871,6 +1015,8 @@ body.docs-sidebar-open {
     background: var(--bg-secondary);
     border-bottom-color: var(--border);
     max-height: min(100dvh, 100vh);
+    /* Drawer scrolls; pear may clip while open — ok vs closed overflow */
+    overflow-x: visible;
     overflow-y: auto;
     overscroll-behavior: contain;
   }
@@ -1035,13 +1181,19 @@ body.docs-sidebar-open {
 
 /* Very small phones */
 @media (max-width: 380px) {
-  .nav-brand {
-    font-size: 0.95rem;
+  :root {
+    --brand-logo: 64px;
+    --brand-top-inset: 4px;
+    --brand-cradle: calc(var(--brand-logo) + 10px);
   }
 
-  .nav-brand img {
-    width: 28px;
-    height: 28px;
+  .nav-brand {
+    font-size: 1rem;
+    gap: 0.05rem;
+  }
+
+  .nav-brand-text {
+    margin-left: -0.2rem;
   }
 
   .container,