From 30bfe2149fdead196c08a8cfaf5bb5415e6ee7c4 Mon Sep 17 00:00:00 2001
From: soryu-co <bot@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 <body> as a fallback so any
     sub-pixel rounding gap shows the same colour, not white.

3. Typewriter hero rotator
   - New <TypewriterRotator/> 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/components/LandingPage.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

(limited to 'frontend/src/components/LandingPage.tsx')

diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx
index 931fe68..708cbb1 100644
--- a/frontend/src/components/LandingPage.tsx
+++ b/frontend/src/components/LandingPage.tsx
@@ -1,6 +1,15 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { LoadingScreen } from './LoadingScreen'
 import { HeartLogo } from './HeartLogo'
+import { TypewriterRotator } from './TypewriterRotator'
+
+const HERO_PHRASES = [
+  '低遅延ストリーミング · LOW-LATENCY OBSERVABILITY',
+  'リアルタイム監視 · REAL-TIME SURVEILLANCE',
+  'ミッションクリティカル · MISSION-CRITICAL INFRASTRUCTURE',
+  'エンドツーエンド可視化 · END-TO-END VISIBILITY',
+  '安全な意思決定 · SECURE DECISIONS AT THE EDGE',
+]
 
 interface LandingPageProps {
   onLogin: () => void
@@ -189,7 +198,11 @@ export function LandingPage({ onLogin }: LandingPageProps) {
                 </p>
               </div>
             ) : (
-              <div className="hero" />
+              <div className="hero">
+                <div className="hero-tagline" aria-label="Soryu capabilities">
+                  <TypewriterRotator phrases={HERO_PHRASES} />
+                </div>
+              </div>
             )}
 
           {/* CTA row spanning full width: left Mission/MAKIMA, right Login */}
-- 
cgit v1.2.3

