From 43ef515a3b7fccda8cab726e007b6d9f3f98dc82 Mon Sep 17 00:00:00 2001
From: Godopu <godopu16@gmail.com>
Date: Sun, 13 Sep 2026 20:22:08 +0900
Subject: [PATCH] feat(header): stack ANL wordmark in three lines and show
 desktop nav from 1000px

- Replace the "ANL" + "AI Agent Networking LAB" pair with a stacked
  "AI Agent / Networking / Laboratory" wordmark in Geist semibold; the
  cobalt initials spell out ANL.
- Add a header-only `nav` screen (1000px) so the inline desktop nav
  replaces the mobile menu earlier than the shared `desktop` (1240px)
  breakpoint, with compact tracking/padding between 1000px and 1239px.
  The masthead strip and project page layout still use `desktop`.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RcexqbEX5CnaLog2xNFQN7
---
 refer_landing_page/components/Header.tsx | 26 +++++++++++-------------
 refer_landing_page/tailwind.config.ts    |  2 ++
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/refer_landing_page/components/Header.tsx b/refer_landing_page/components/Header.tsx
index 091a77e..acf5a3d 100644
--- a/refer_landing_page/components/Header.tsx
+++ b/refer_landing_page/components/Header.tsx
@@ -134,7 +134,7 @@ export default function Header() {
         {/* Brand logo */}
         <Link
           href="/"
-          className="group flex items-center gap-3 min-w-0 desktop:shrink-0"
+          className="group flex items-center gap-3 min-w-0 nav:shrink-0"
           onClick={() => setOpen(false)}
         >
           <div className="relative flex items-center justify-center w-9 h-9 sm:w-10 sm:h-10 rounded-xl overflow-hidden shadow-sm border border-line group-hover:border-cobalt/40 group-hover:shadow-md group-hover:scale-105 transition-all duration-300 shrink-0">
@@ -162,18 +162,16 @@ export default function Header() {
             </svg>
           </div>
 
-          <div className="flex flex-col leading-none min-w-0">
-            <span className="headline-ko text-lg text-ink sm:text-xl font-bold tracking-tight group-hover:text-cobalt-dark transition-colors">
-              ANL
-            </span>
-            <span className="kicker mt-1 transition-colors group-hover:text-cobalt-dark truncate">
-              AI Agent Networking LAB
-            </span>
+          {/* Stacked wordmark — the cobalt initials spell out ANL */}
+          <div className="font-sans flex flex-col min-w-0 text-[0.8rem] sm:text-[0.875rem] font-semibold leading-[1.15] tracking-tight text-ink transition-colors group-hover:text-cobalt-dark">
+            <span className="whitespace-nowrap"><span className="text-cobalt">A</span>I Agent</span>
+            <span className="whitespace-nowrap"><span className="text-cobalt">N</span>etworking</span>
+            <span className="whitespace-nowrap"><span className="text-cobalt">L</span>aboratory</span>
           </div>
         </Link>
 
-        {/* Desktop nav — small caps, wide tracking (visible at >= 1240px) */}
-        <div className="hidden items-center gap-4 desktop:flex">
+        {/* Desktop nav — small caps, wide tracking (visible at >= 1000px; compact spacing below 1240px) */}
+        <div className="hidden items-center gap-3 nav:flex desktop:gap-4">
           <nav className="flex items-center gap-2" aria-label="Main Navigation">
             {navItems.map((item) => {
               const active = isActive(item.href);
@@ -182,7 +180,7 @@ export default function Header() {
                   key={item.href}
                   href={item.href}
                   aria-current={active ? "page" : undefined}
-                  className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-all px-3 py-1.5 rounded-md ${
+                  className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.1em] desktop:tracking-[0.18em] transition-all px-2 desktop:px-3 py-1.5 rounded-md ${
                     active
                       ? "bg-cobalt-dark text-white dark:text-ivory shadow-sm font-bold"
                       : "text-ink hover:text-cobalt-dark hover:bg-paper/60"
@@ -204,8 +202,8 @@ export default function Header() {
           <ThemeToggle />
         </div>
 
-        {/* Mobile controls (visible under 1240px) */}
-        <div className="flex items-center gap-2 desktop:hidden">
+        {/* Mobile controls (visible under 1000px) */}
+        <div className="flex items-center gap-2 nav:hidden">
           <ThemeToggle />
           <button
             type="button"
@@ -230,7 +228,7 @@ export default function Header() {
       {open && (
         <nav
           id="mobile-menu"
-          className="mobile-menu-panel border-t border-ink bg-ivory desktop:hidden"
+          className="mobile-menu-panel border-t border-ink bg-ivory nav:hidden"
           aria-label="Mobile Navigation"
         >
           <ul className="container-content flex flex-col py-2">
diff --git a/refer_landing_page/tailwind.config.ts b/refer_landing_page/tailwind.config.ts
index 8ba53c7..0895311 100644
--- a/refer_landing_page/tailwind.config.ts
+++ b/refer_landing_page/tailwind.config.ts
@@ -29,6 +29,8 @@ const config: Config = {
   theme: {
     extend: {
       screens: {
+        // Header swaps the mobile menu for the inline nav (compact spacing until `desktop`).
+        nav: "1000px",
         desktop: "1240px",
       },
       colors: {