diff options
Diffstat (limited to 'frontend/src')
| -rw-r--r-- | frontend/src/components/LandingPage.tsx | 40 | ||||
| -rw-r--r-- | frontend/src/styles/heisei.css | 43 |
2 files changed, 65 insertions, 18 deletions
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> diff --git a/frontend/src/styles/heisei.css b/frontend/src/styles/heisei.css index e12481d..356080e 100644 --- a/frontend/src/styles/heisei.css +++ b/frontend/src/styles/heisei.css @@ -34,6 +34,19 @@ body { background: var(--hz-night); color: var(--hz-ink); } +/* Reset the legacy 120px top offset (was matched to the old 120px header). + New header is 72px / 56px on mobile, so claim the full remaining viewport. */ +.modern-landing-page { + top: 72px !important; + height: calc(100vh - 72px) !important; +} +@media (max-width: 768px) { + .modern-landing-page { + top: 56px !important; + height: calc(100vh - 56px) !important; + } +} + .modern-landing-page.manga-style { background: /* horizon glow */ @@ -162,16 +175,27 @@ body { background: var(--hz-night); color: var(--hz-ink); } grid-template-rows: 1fr; /* CTA is no longer in this grid */ grid-template-areas: "masthead hero"; gap: 40px; - padding: 156px 56px 64px; /* 72 header + 52 nav + 32 breathing */ + /* wrapper is now top: 72px, so we only clear the 52px navbar + breathing */ + padding: 84px 56px 56px; +} + +/* Mission / MAKIMA panels: hug the navbar — no big void above the headline */ +.modern-landing-page.manga-style .taisho-cover.mission-mode .cover-content { + padding: 72px 56px 48px; /* 52 nav + 20 breathing */ + gap: 32px; } @media (max-width: 1024px) { .modern-landing-page.manga-style .taisho-cover .cover-content { grid-template-columns: 1fr; grid-template-areas: "masthead" "hero"; - padding: 140px 24px 48px; + padding: 76px 24px 40px; /* 48 nav + 28 breathing */ gap: 28px; } + .modern-landing-page.manga-style .taisho-cover.mission-mode .cover-content { + padding: 64px 20px 28px; /* 48 nav + 16 breathing */ + gap: 16px; + } } /* ---------------------------------------------------------------- @@ -449,6 +473,21 @@ body { background: var(--hz-night); color: var(--hz-ink); } } .taisho-cta:hover::before { left: 16px; right: 16px; } +/* Active panel button — persistent highlight (replaces "Close" label) */ +.cta-left .taisho-cta.is-active, +.cta-left .taisho-cta[aria-current="page"] { + color: var(--hz-amber); + opacity: 1; +} +.cta-left .taisho-cta.is-active::before, +.cta-left .taisho-cta[aria-current="page"]::before { + left: 16px; + right: 16px; + height: 2px; + background: var(--hz-amber); + box-shadow: 0 0 12px rgba(232, 184, 122, 0.35); +} + /* Login keeps a primary-action treatment, but compact for the bar */ .cta-right .taisho-cta { background: linear-gradient(180deg, rgba(232, 184, 122, 0.95) 0%, rgba(217, 106, 138, 0.85) 100%); |