From 9948609a01e8d132a030b82694413d67aa6be822 Mon Sep 17 00:00:00 2001 From: soryu-co Date: Wed, 6 May 2026 12:58:43 +0000 Subject: Center hero on homepage, image-left text-right on mission/makima - Default homepage now uses single-column grid; the SORYU masthead is absolutely positioned in the upper-left of the cover frame, so the hero typewriter is genuinely centered on the page (verified taglineCenterX === pageCenter at 1280px). - Mission/MAKIMA on desktop (>=1025px) switch to a flex layout with the image absolutely positioned in a 360px left gutter and all body text (badge -> headline -> paragraphs) flowing on the right. - Mobile and tablet (<=1024px) keep the stacked layout; masthead returns to inline flow under the navbar. - MAKIMA badge uses flex `order: -1` so it appears above the headline visually, even though the JSX renders headline first. --- frontend/src/styles/heisei.css | 96 +++++++++++++++++++++++++++++++++++++++--- 1 file changed, 90 insertions(+), 6 deletions(-) (limited to 'frontend') diff --git a/frontend/src/styles/heisei.css b/frontend/src/styles/heisei.css index 4017f83..2500ff8 100644 --- a/frontend/src/styles/heisei.css +++ b/frontend/src/styles/heisei.css @@ -186,29 +186,59 @@ body { background: var(--hz-night); color: var(--hz-ink); } 3. Cover layout — breathe (top padding accounts for header + navbar) ---------------------------------------------------------------- */ -.modern-landing-page.manga-style .taisho-cover .cover-content { - grid-template-columns: 200px 1fr; +/* Default homepage: single column so the hero is genuinely page-centered. + The masthead is overlaid in the top-left corner of the cover frame. */ +.modern-landing-page.manga-style .taisho-cover:not(.mission-mode) .cover-content { + grid-template-columns: 1fr; grid-template-rows: 1fr; /* CTA is no longer in this grid */ - grid-template-areas: "masthead hero"; - gap: 40px; + grid-template-areas: "hero"; + gap: 0; + position: relative; /* anchor for absolutely-positioned masthead */ /* 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 */ +/* Hero spans the whole row in default mode */ +.modern-landing-page.manga-style .taisho-cover:not(.mission-mode) .hero { + grid-area: hero; +} + +/* Masthead: float above the hero in the upper-left corner of the frame */ +.modern-landing-page.manga-style .taisho-cover:not(.mission-mode) .masthead { + position: absolute; + top: 84px; /* matches cover-content padding-top */ + left: 56px; /* matches cover-content padding-left */ + z-index: 5; + pointer-events: auto; +} + +/* Mission / MAKIMA panels: keep the 2-col grid (masthead column + hero column) + so the SORYU branding column doesn't overlap the panel content. */ .modern-landing-page.manga-style .taisho-cover.mission-mode .cover-content { + grid-template-columns: 200px 1fr; + grid-template-rows: 1fr; + grid-template-areas: "masthead hero"; padding: 72px 56px 48px; /* 52 nav + 20 breathing */ gap: 32px; } @media (max-width: 1024px) { - .modern-landing-page.manga-style .taisho-cover .cover-content { + /* Restore stacked layout on tablet/phone: masthead above hero, in flow */ + .modern-landing-page.manga-style .taisho-cover:not(.mission-mode) .cover-content { grid-template-columns: 1fr; + grid-template-rows: auto 1fr; grid-template-areas: "masthead" "hero"; padding: 76px 24px 40px; /* 48 nav + 28 breathing */ gap: 28px; } + .modern-landing-page.manga-style .taisho-cover:not(.mission-mode) .masthead { + position: static; + top: auto; + left: auto; + } .modern-landing-page.manga-style .taisho-cover.mission-mode .cover-content { + grid-template-columns: 1fr; + grid-template-areas: "masthead" "hero"; padding: 64px 20px 28px; /* 48 nav + 16 breathing */ gap: 16px; } @@ -418,6 +448,60 @@ body { background: var(--hz-night); color: var(--hz-ink); } display: block; } +/* ----- Desktop (≥1025px): image on the left, copy on the right ----- */ +@media (min-width: 1025px) { + .mission-screen { + /* Override pc98's grid; use flex-column for the right-column text flow. + Image is absolutely positioned in the reserved left gutter. */ + display: flex !important; + flex-direction: column; + align-items: stretch; + gap: 0; + position: relative; + max-width: 980px; + padding-left: calc(360px + 32px) !important; + border-left: 0 !important; + min-height: clamp(220px, 44vh, 420px); + } + .mission-screen .mission-image { + position: absolute; + top: 0; + left: 0; + width: 360px; + height: clamp(220px, 44vh, 420px); + object-fit: cover; + /* Pc98 sets `grid-area: hero` etc — clear leftover row hints */ + grid-area: auto; + } + /* Right-column text: each block owns its own accent rule */ + .mission-screen .mission-headline, + .mission-screen .mission-paragraph { + padding-left: 18px; + border-left: 2px solid var(--hz-amber); + margin: 0; + } + .mission-screen .mission-headline + .mission-paragraph { + margin-top: 14px; + } + .mission-screen .mission-paragraph + .mission-paragraph { + margin-top: 8px; + } + /* Makima — magenta rule */ + .mission-screen.makima-screen .mission-headline, + .mission-screen.makima-screen .mission-paragraph { + border-left-color: var(--hz-mag); + } + /* Badge: align with the rule's left edge, sit above the headline. + JSX order is headline→badge→…; reorder visually with flex order. */ + .mission-screen.makima-screen .makima-badge { + align-self: flex-start; + margin: 0 0 12px 18px; + order: -1; + } + .mission-screen.makima-screen .mission-headline { order: 0; } + .mission-screen.makima-screen .mission-paragraph { order: 1; } +} + .mission-paragraph { font-family: 'Inter', 'Noto Sans JP', system-ui, sans-serif; font-size: 14px; -- cgit v1.2.3