From 30bfe2149fdead196c08a8cfaf5bb5415e6ee7c4 Mon Sep 17 00:00:00 2001 From: soryu-co Date: Wed, 6 May 2026 12:39:02 +0000 Subject: Align mission/makima body, fix mobile bg, add typewriter hero rotator MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three fixes coming out of QA on staging (soryu.eirin.xyz): 1. Mission / MAKIMA body alignment - The amber/magenta accent rule + 18px indent used to live on .mission-headline only, so paragraphs (and the mission image) started 18px to the LEFT of the headline. - Move the rule + padding-left onto the .mission-screen wrapper itself. Headline, image, and all paragraph(s) now share one consistent column edge. - Tighten the makima-badge so it doesn't stretch the grid column (justify-self: start + width: max-content). Image gets explicit width: 100%; display: block to behave inside the column. 2. Mobile background coverage - pc98.css mobile-block override ('@media max-width:768px') reset .modern-landing-page to position: relative + margin-top: 100px, leaving a 100-156px band at the top where only the body color showed and pushing the wrapper bottom past the viewport. - Force position: fixed on the wrapper at every breakpoint with !important. Use 100dvh (dynamic viewport height) so the gradient follows iOS Safari's collapsing URL bar rather than getting clipped. - Mirror the dusk gradient onto as a fallback so any sub-pixel rounding gap shows the same colour, not white. 3. Typewriter hero rotator - New component (frontend/src/components/ TypewriterRotator.tsx) — types, holds, deletes, gaps, advances. Honours prefers-reduced-motion (renders the first phrase static). - LandingPage.tsx renders it inside a new .hero-tagline wrapper where the old static CSS ::after lived. Five phrases, all bilingual JP/EN in the same Heisei tactical voice: * 低遅延ストリーミング · LOW-LATENCY OBSERVABILITY * リアルタイム監視 · REAL-TIME SURVEILLANCE * ミッションクリティカル · MISSION-CRITICAL INFRASTRUCTURE * エンドツーエンド可視化 · END-TO-END VISIBILITY * 安全な意思決定 · SECURE DECISIONS AT THE EDGE - Hide the old .hero::after pseudo-tagline; .hero-tagline keeps the same centred position, amber colour, and tracking. - Caret blink animation (steps(1), 1s) — separate from the typing timing so it always blinks at human speed. npm run build passes (CSS 94 kB / 18.2 kB gzip, JS 238 kB / 75 kB gzip — +1.5 kB net for the rotator + new phrases). Verified at 1280x720 / 390x844 via Playwright DOM probe: - mission/makima: headline.x === paragraph.x === image.x ✓ - mobile: wrapper y=56, h=788, bottom=844 (full coverage) ✓ - typewriter: types, holds, deletes, advances to phrase 2 ✓ Screenshots in docs/heisei-screenshots/after-*.jpg refreshed. Staging at soryu.eirin.xyz updated via rsync. --- frontend/src/styles/heisei.css | 89 +++++++++++++++++++++++++++++++++++++----- 1 file changed, 80 insertions(+), 9 deletions(-) (limited to 'frontend/src/styles/heisei.css') diff --git a/frontend/src/styles/heisei.css b/frontend/src/styles/heisei.css index 356080e..4017f83 100644 --- a/frontend/src/styles/heisei.css +++ b/frontend/src/styles/heisei.css @@ -37,13 +37,29 @@ 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 { + position: fixed !important; top: 72px !important; - height: calc(100vh - 72px) !important; + left: 0 !important; + right: 0 !important; + width: 100vw !important; + height: calc(100dvh - 72px) !important; + margin-top: 0 !important; + min-height: 0 !important; + overflow: hidden !important; } @media (max-width: 768px) { .modern-landing-page { top: 56px !important; - height: calc(100vh - 56px) !important; + height: calc(100dvh - 56px) !important; + } + /* Body fallback so any rounding gap shows the same dusk gradient + instead of a flash of system-default white */ + body { + background: + radial-gradient(140% 70% at 50% 100%, rgba(232, 184, 122, 0.20) 0%, transparent 55%), + radial-gradient(120% 80% at 50% 0%, rgba(74, 58, 107, 0.55) 0%, transparent 60%), + linear-gradient(180deg, #0b1124 0%, #1a2548 35%, #3d3358 65%, #6b4d63 88%, #c87a8a 100%) !important; + background-attachment: fixed; } } @@ -303,27 +319,75 @@ body { background: var(--hz-night); color: var(--hz-ink); } opacity: 0.65; } .modern-landing-page.manga-style .hero::after { - content: '低遅延ストリーミング · LOW-LATENCY OBSERVABILITY'; + /* Replaced by the React TypewriterRotator component */ + display: none; +} + +/* Typewriter tagline — sits where the old static ::after lived */ +.hero-tagline { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: 'Noto Sans JP', 'Inter', sans-serif; - font-size: 11px; + font-size: 12px; font-weight: 400; letter-spacing: 0.3em; color: var(--hz-amber); - opacity: 0.75; + opacity: 0.92; white-space: nowrap; text-shadow: 0 0 12px rgba(232, 184, 122, 0.35); + text-align: center; + pointer-events: none; + max-width: 92%; + overflow: hidden; + text-overflow: ellipsis; + user-select: none; +} +.hero-tagline .tw-text { display: inline; } +.hero-tagline .tw-caret { + display: inline-block; + width: 8px; + height: 1.05em; + margin-left: 4px; + vertical-align: -0.18em; + background: var(--hz-amber); + box-shadow: 0 0 8px rgba(232, 184, 122, 0.45); + animation: hz-caret-blink 1s steps(1) infinite; +} +@keyframes hz-caret-blink { + 0%, 50% { opacity: 1; } + 51%, 100% { opacity: 0; } +} +@media (max-width: 768px) { + .hero-tagline { + font-size: 10px; + letter-spacing: 0.22em; + white-space: normal; /* allow wrap on narrow phones */ + line-height: 1.6; + max-width: 86%; + } + .hero-tagline .tw-caret { width: 6px; } +} +@media (prefers-reduced-motion: reduce) { + .hero-tagline .tw-caret { animation: none; opacity: 1; } } /* ---------------------------------------------------------------- 7. Mission / Makima screens — Heisei magazine column ---------------------------------------------------------------- */ +/* Move the accent rule + indent onto the wrapper so headline, image, + and body share one consistent column edge */ .mission-screen { gap: 20px; + padding-left: 18px; + border-left: 2px solid var(--hz-amber); + max-width: 720px; +} +.mission-screen.makima-screen { + border-left-color: var(--hz-mag); + gap: 14px; } .mission-headline { @@ -337,9 +401,9 @@ body { background: var(--hz-night); color: var(--hz-ink); } white-space: normal; text-overflow: clip; overflow: visible; - max-width: 56ch; - border-left: 2px solid var(--hz-amber); - padding-left: 18px; + margin: 0; + padding-left: 0; /* rule + indent now live on .mission-screen */ + border-left: 0; } .mission-image { @@ -350,6 +414,8 @@ body { background: var(--hz-night); color: var(--hz-ink); } 0 0 0 1px var(--hz-line); filter: saturate(0.85) brightness(0.92); height: clamp(180px, 36vh, 360px); + width: 100%; + display: block; } .mission-paragraph { @@ -359,14 +425,15 @@ body { background: var(--hz-night); color: var(--hz-ink); } line-height: 1.75; color: rgba(240, 234, 223, 0.86); letter-spacing: 0.01em; + margin: 0; max-width: 60ch; } +.mission-paragraph + .mission-paragraph { margin-top: 4px; } /* Makima panel — tactical accent */ .makima-headline { color: var(--hz-ink); letter-spacing: 0.04em; - border-left-color: var(--hz-mag); } .makima-badge { background: rgba(217, 106, 138, 0.10); @@ -377,6 +444,10 @@ body { background: var(--hz-night); color: var(--hz-ink); } font-size: 10px; letter-spacing: 0.22em; border-radius: 2px; + align-self: start; + justify-self: start; /* don't stretch across the grid column */ + width: max-content; + padding: 4px 10px; } .makima-logo { border: 0; -- cgit v1.2.3