From 771ece20e5e669f93fc0aba0459ac1ff2fa0825b Mon Sep 17 00:00:00 2001
From: soryu-co <bot@soryu.co>
Date: Wed, 6 May 2026 11:30:27 +0000
Subject: Tighten mission/makima top space and use highlighted nav state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The CTA row is now a top navbar, so the old 'Close' label on the
active panel button is redundant — the button itself should look
like the current page. Two fixes here:

1. Replace 'Close' with a persistent active highlight.
   - LandingPage.tsx: button keeps its label ('Mission' / 'MAKIMA')
     and gains an is-active class + aria-current="page" when its
     panel is open. heisei.css renders the active state as a solid
     amber underline + amber text — same visual language as the
     hover indicator, just persistent.
   - The button still toggles the panel closed when clicked again,
     so the interaction is unchanged; only the labelling moved.

2. Remove the white-space band above mission content.
   - The legacy .modern-landing-page wrapper from pc98.css pinned
     itself at top: 120px and height: calc(100vh - 120px), matching
     the original 120px-tall floating header. The new header is
     72px (56px on mobile), which left ~50px of dead space below
     the navbar before the mission/makima content started.
   - Override the wrapper to top: 72px / height: calc(100vh - 72px)
     on desktop and 56px on mobile so it sits flush under the
     header.
   - Cover-content padding-top retuned for the new wrapper origin:
     desktop default 84px, mission-mode 72px (navbar 52 + 20 gap).
     Mobile default 76px, mission-mode 64px (navbar 48 + 16 gap).

Verified at 1280x720:
  navbar y=72-124 · mission headline starts y=144 · 20px gap ✓
  active Mission button: 'taisho-cta is-active', aria-current=page ✓

npm run build passes (CSS 92.6 kB / 18.1 kB gzip). Screenshots in
docs/heisei-screenshots/after-*.jpg refreshed against the tightened
layout.
---
 frontend/src/components/LandingPage.tsx | 40 ++++++++++++++++++++-------------
 1 file changed, 24 insertions(+), 16 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx
index f126d6f..931fe68 100644
--- a/frontend/src/components/LandingPage.tsx
+++ b/frontend/src/components/LandingPage.tsx
@@ -192,23 +192,31 @@ export function LandingPage({ onLogin }: LandingPageProps) {
               <div className="hero" />
             )}
 
-            {/* CTA row spanning full width: left Mission/MAKIMA, right Login */}
-            <div className="cta-area">
-              <div className="cta-left">
-                <button className="taisho-cta" onClick={handleMission}>
-                  <span className="cta-text">{activePanel === 'mission' ? 'Close' : 'Mission'}</span>
-                </button>
-                <button className="taisho-cta" onClick={handleMakimaPanel}>
-                  <span className="cta-text">{activePanel === 'makima' ? 'Close' : 'MAKIMA'}</span>
-                </button>
-              </div>
-              <div className="cta-right">
-                <button className="taisho-cta" onClick={handleLogin}>
-                  <span className="cta-icon">▶</span>
-                  <span className="cta-text">Login</span>
-                </button>
-              </div>
+          {/* CTA row spanning full width: left Mission/MAKIMA, right Login */}
+          <div className="cta-area">
+            <div className="cta-left">
+              <button
+                className={`taisho-cta${activePanel === 'mission' ? ' is-active' : ''}`}
+                aria-current={activePanel === 'mission' ? 'page' : undefined}
+                onClick={handleMission}
+              >
+                <span className="cta-text">Mission</span>
+              </button>
+              <button
+                className={`taisho-cta${activePanel === 'makima' ? ' is-active' : ''}`}
+                aria-current={activePanel === 'makima' ? 'page' : undefined}
+                onClick={handleMakimaPanel}
+              >
+                <span className="cta-text">MAKIMA</span>
+              </button>
             </div>
+            <div className="cta-right">
+              <button className="taisho-cta" onClick={handleLogin}>
+                <span className="cta-icon">▶</span>
+                <span className="cta-text">Login</span>
+              </button>
+            </div>
+          </div>
           </div>
         </div>
 
-- 
cgit v1.2.3