diff options
Diffstat (limited to 'frontend/src/styles/heisei.css')
| -rw-r--r-- | frontend/src/styles/heisei.css | 836 |
1 files changed, 836 insertions, 0 deletions
diff --git a/frontend/src/styles/heisei.css b/frontend/src/styles/heisei.css new file mode 100644 index 0000000..b532c02 --- /dev/null +++ b/frontend/src/styles/heisei.css @@ -0,0 +1,836 @@ +/* ================================================================ + Heisei Twilight — landing page theme override + ---------------------------------------------------------------- + Subtle late-Heisei (early 2000s–2010s) anime aesthetic for the + public landing screen. Inspired by Makoto Shinkai dusk skies, + GitS: SAC tactical UI hairlines, and CLAMP-era plate gradients. + + Scoped to `.modern-landing-page` and the floating header so the + internal VN/contracts/daemons screens are untouched. + + Loaded AFTER pc98.css so all selectors here win the cascade. + ================================================================ */ + +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@300;400;600;700&family=Inter:wght@300;400;500;600;700&display=swap'); + +:root { + --hz-night: #0b1124; + --hz-deep: #1a2548; + --hz-dusk: #4a3a6b; + --hz-rose: #c87a8a; + --hz-amber: #e8b87a; + --hz-paper: #f4ecdf; + --hz-ink: #f0eadf; + --hz-line: rgba(240, 234, 223, 0.18); + --hz-line-strong: rgba(240, 234, 223, 0.55); + --hz-cyan: #9ad7e0; /* desaturated tactical cyan */ + --hz-mag: #d96a8a; /* muted heisei magenta */ + --hz-shadow: 0 24px 60px -20px rgba(8, 10, 24, 0.65); +} + +/* ---------------------------------------------------------------- + 1. Page backdrop — replace busy GIF with twilight gradient + bokeh + ---------------------------------------------------------------- */ + +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; + 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(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; + } +} + +.modern-landing-page.manga-style { + background: + /* horizon glow */ + radial-gradient(140% 70% at 50% 100%, rgba(232, 184, 122, 0.20) 0%, transparent 55%), + /* upper dusk */ + radial-gradient(120% 80% at 50% 0%, rgba(74, 58, 107, 0.55) 0%, transparent 60%), + /* base sky */ + linear-gradient(180deg, #0b1124 0%, #1a2548 35%, #3d3358 65%, #6b4d63 88%, #c87a8a 100%); +} + +/* Hide the noisy background gif — twilight is the new backdrop */ +.modern-landing-page.manga-style .background-only { display: none; } + +/* Soft bokeh plates (very subtle) */ +.modern-landing-page.manga-style::before, +.modern-landing-page.manga-style::after { + content: ''; + position: absolute; + pointer-events: none; + border-radius: 50%; + filter: blur(60px); + z-index: 0; +} +.modern-landing-page.manga-style::before { + width: 380px; height: 380px; + top: 12%; right: -80px; + background: radial-gradient(circle, rgba(232, 184, 122, 0.28), transparent 70%); +} +.modern-landing-page.manga-style::after { + width: 480px; height: 480px; + bottom: -120px; left: -120px; + background: radial-gradient(circle, rgba(154, 215, 224, 0.18), transparent 70%); +} + +/* Faint scanlines — gentle, not CRT */ +.modern-landing-page.manga-style .taisho-cover .halftone-overlay, +.modern-landing-page.manga-style .taisho-cover .pattern-ichimatsu, +.modern-landing-page.manga-style .taisho-cover .paper-tone { + display: none; +} + +.modern-landing-page.manga-style .taisho-cover { + color: var(--hz-ink); +} +.modern-landing-page.manga-style .taisho-cover::before { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + z-index: 0; + background: repeating-linear-gradient( + 180deg, + rgba(255, 255, 255, 0.015) 0 1px, + transparent 1px 3px + ); +} + +/* Mission-mode backdrop — slightly translucent so the dusk ambient + (blue + bokeh) reads through, but alpha stays high enough at the + bottom that the pink horizon dissolves into deep blue. Strong blur + radius diffuses any residual into soft tone, never a band. */ +.modern-landing-page.manga-style .taisho-cover.mission-mode .cover-backdrop { + background: linear-gradient(180deg, + rgba(11, 17, 36, 0.72) 0%, + rgba(11, 17, 36, 0.78) 50%, + rgba(11, 17, 36, 0.84) 100% + ); + backdrop-filter: blur(28px) saturate(90%); + -webkit-backdrop-filter: blur(28px) saturate(90%); +} + +/* ---------------------------------------------------------------- + 2. Floating header — frosted glass + hairline + ---------------------------------------------------------------- */ + +.floating-header { + height: 72px; + padding: 0 32px; + background: linear-gradient(180deg, rgba(11, 17, 36, 0.82), rgba(11, 17, 36, 0.55)); + backdrop-filter: blur(14px) saturate(140%); + -webkit-backdrop-filter: blur(14px) saturate(140%); + border-bottom: 1px solid var(--hz-line); + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04); +} + +.floating-header .brand { top: 50%; left: 32px; transform: translateY(-50%); } +.floating-header .brand-mark { height: 28px !important; width: auto; opacity: 0.92; } + +.system-info { + top: 50%; right: 32px; + transform: translateY(-50%); + flex-direction: row; + gap: 22px; + font-family: 'Inter', system-ui, sans-serif; + font-size: 11px; + opacity: 1; + letter-spacing: 0.12em; +} +.info-item { gap: 8px; align-items: center; } +.info-label { + color: var(--hz-cyan); + font-family: 'Inter', system-ui, sans-serif; + font-size: 10px; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.18em; + opacity: 0.75; +} +.info-value { + color: var(--hz-ink); + font-family: 'Inter', system-ui, sans-serif; + font-size: 11px; + font-weight: 500; + letter-spacing: 0.1em; +} +.live-status { gap: 6px; } +.status-dot { width: 6px; height: 6px; } +.status-dot.standby { + background: var(--hz-cyan); + box-shadow: 0 0 8px rgba(154, 215, 224, 0.7); +} +.status-dot.live { + background: var(--hz-mag); + box-shadow: 0 0 8px rgba(217, 106, 138, 0.8); +} + +/* ---------------------------------------------------------------- + 3. Cover layout — breathe (top padding accounts for header + navbar) + ---------------------------------------------------------------- */ + +/* 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: "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; +} + +/* 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) { + /* 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; + } +} + +/* ---------------------------------------------------------------- + 4. Masthead — vertical kanji as a quiet column, not an arcade box + ---------------------------------------------------------------- */ + +.modern-landing-page.manga-style .masthead { + gap: 18px; + padding-top: 4px; +} + +.modern-landing-page.manga-style .masthead-vertical { + background: transparent; + border: 0; + border-left: 1px solid var(--hz-line-strong); + box-shadow: none; + color: var(--hz-ink); + padding: 6px 0 6px 18px; + letter-spacing: 0.5em; + font-family: 'Noto Serif JP', 'Hiragino Mincho Pro', serif; + font-weight: 400; +} +.modern-landing-page.manga-style .masthead-vertical::after { display: none; } +.modern-landing-page.manga-style .masthead-vertical .jp { + font-size: 32px; + font-weight: 400; + text-shadow: 0 1px 12px rgba(232, 184, 122, 0.18); + color: var(--hz-ink); + letter-spacing: 0.35em; +} +.modern-landing-page.manga-style .masthead-vertical .en { + font-size: 9px; + margin-top: 14px; + letter-spacing: 0.4em; + font-family: 'Inter', system-ui, sans-serif; + font-weight: 500; + color: var(--hz-amber); + opacity: 0.78; +} + +/* Mission-mode: gentle scale instead of glow swap */ +.modern-landing-page.manga-style .taisho-cover.mission-mode .masthead-vertical { + transform: translateX(-2px) scale(0.95); + box-shadow: none; +} + +/* ---------------------------------------------------------------- + 5. Issue badge — flat pill, no chunky borders + ---------------------------------------------------------------- */ + +.modern-landing-page.manga-style .issue-badge { + background: rgba(11, 17, 36, 0.55); + color: var(--hz-ink); + border: 1px solid var(--hz-line); + border-radius: 999px; + padding: 4px 12px; + font-family: 'Inter', system-ui, sans-serif; + font-size: 10px; + font-weight: 500; + letter-spacing: 0.16em; + text-transform: uppercase; + box-shadow: none; + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); +} +.modern-landing-page.manga-style .issue-badge::before { display: none; } +.modern-landing-page.manga-style .issue-badge .led-heart, +.modern-landing-page.manga-style .issue-badge .led-heart::before, +.modern-landing-page.manga-style .issue-badge .led-heart::after { + background: var(--hz-mag); + box-shadow: 0 0 6px rgba(217, 106, 138, 0.7); + transform: rotate(-45deg); + width: 6px; height: 6px; +} +.modern-landing-page.manga-style .issue-badge .led-heart { + animation: hz-heart-pulse 2.6s ease-in-out infinite; +} +@keyframes hz-heart-pulse { + 0%, 100% { opacity: 0.85; } + 50% { opacity: 1; filter: drop-shadow(0 0 4px rgba(217, 106, 138, 0.9)); } +} + +/* ---------------------------------------------------------------- + 6. Hero — empty default state gets a subtle tactical reticle + ---------------------------------------------------------------- */ + +.modern-landing-page.manga-style .hero { + position: relative; + min-height: 320px; +} +.modern-landing-page.manga-style .hero::before { + content: ''; + position: absolute; + inset: 0; + background: + /* corner brackets */ + linear-gradient(var(--hz-line-strong), var(--hz-line-strong)) 0 0/24px 1px no-repeat, + linear-gradient(var(--hz-line-strong), var(--hz-line-strong)) 0 0/1px 24px no-repeat, + linear-gradient(var(--hz-line-strong), var(--hz-line-strong)) 100% 0/24px 1px no-repeat, + linear-gradient(var(--hz-line-strong), var(--hz-line-strong)) 100% 0/1px 24px no-repeat, + linear-gradient(var(--hz-line-strong), var(--hz-line-strong)) 0 100%/24px 1px no-repeat, + linear-gradient(var(--hz-line-strong), var(--hz-line-strong)) 0 100%/1px 24px no-repeat, + linear-gradient(var(--hz-line-strong), var(--hz-line-strong)) 100% 100%/24px 1px no-repeat, + linear-gradient(var(--hz-line-strong), var(--hz-line-strong)) 100% 100%/1px 24px no-repeat; + opacity: 0.65; +} +.modern-landing-page.manga-style .hero::after { + /* 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: 12px; + font-weight: 400; + letter-spacing: 0.3em; + color: var(--hz-amber); + 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 + ---------------------------------------------------------------- */ + +/* No more wrapper-level accent rule — body text sits flat without a + coloured indent line (the SVG owns the only visible frame on the page) */ +.mission-screen { + gap: 20px; + padding-left: 0; + border-left: 0; + max-width: 720px; +} +.mission-screen.makima-screen { + gap: 14px; +} + +.mission-headline { + font-family: 'Noto Serif JP', 'Hiragino Mincho Pro', Georgia, serif; + font-weight: 400; + font-size: 30px; + line-height: 1.4; + color: var(--hz-ink); + letter-spacing: 0.02em; + text-shadow: 0 1px 16px rgba(11, 17, 36, 0.6); + white-space: normal; + text-overflow: clip; + overflow: visible; + margin: 0; + padding-left: 0; /* rule + indent now live on .mission-screen */ + border-left: 0; +} + +.mission-image { + border: 0; + border-radius: 0; /* no plate corners — image floats on backdrop */ + /* SVG already draws its own hairline frame + corner brackets at the + viewBox edge — drop the ring outline so we don't double-frame. */ + box-shadow: none; /* no outward halo around bounding box */ + filter: none; /* tactical SVG renders flat */ + height: clamp(180px, 36vh, 360px); + width: 100%; + display: block; + object-fit: contain; /* show full reticle, no crop */ + background: transparent; /* no dark plate behind letterboxed SVG */ + animation: none; /* kill pc98 mission-pan */ +} + +/* ----- 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; + /* Tactical SVG: render whole frame, no pan/crop, no filter */ + animation: none !important; + filter: none !important; + background: transparent; /* no dark rounded plate behind SVG */ + object-fit: contain; + object-position: center; + padding: 0; + border-radius: 0; /* no rounded plate corners */ + /* No box-shadow — outward halo on bounding box was bleeding past the SVG */ + box-shadow: none; + } + /* Right-column text: no accent rule — keep the layout clean. + The SVG image on the left supplies all the framing. */ + .mission-screen .mission-headline, + .mission-screen .mission-paragraph { + padding-left: 0; + border-left: 0; + margin: 0; + } + .mission-screen .mission-headline + .mission-paragraph { + margin-top: 14px; + } + .mission-screen .mission-paragraph + .mission-paragraph { + margin-top: 8px; + } + /* Badge: align with the rest of the right-column flow (no indent). */ + .mission-screen.makima-screen .makima-badge { + align-self: flex-start; + margin: 0 0 12px 0; + 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; + font-weight: 300; + 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; +} +.makima-badge { + background: rgba(217, 106, 138, 0.10); + border: 1px solid rgba(217, 106, 138, 0.45); + color: var(--hz-mag); + font-family: 'Inter', system-ui, sans-serif; + font-weight: 500; + 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; + border-radius: 0; + background: transparent; /* no dark plate behind small SVG icon */ + box-shadow: none; /* no outward halo around bounding box */ +} + +/* ---------------------------------------------------------------- + 8. CTA navbar — pinned below the floating header (desktop + mobile) + ---------------------------------------------------------------- */ + +/* Promote .cta-area from grid-bottom to a fixed top navbar. + Overrides pc98.css (`position: absolute; bottom: 0`) and + mobile.css (`position: fixed; bottom: 0`). */ +.cta-area { + position: fixed !important; + top: 72px; /* sits flush under .floating-header */ + left: 0 !important; + right: 0 !important; + bottom: auto !important; + z-index: 90; /* below header (100) but above content */ + display: flex; + flex-direction: row !important; + justify-content: space-between; + align-items: center; + gap: 16px; + padding: 8px 32px !important; + height: 52px; + background: linear-gradient(180deg, rgba(11, 17, 36, 0.78), rgba(11, 17, 36, 0.45)); + backdrop-filter: blur(12px) saturate(140%); + -webkit-backdrop-filter: blur(12px) saturate(140%); + border-top: 0; + border-bottom: 1px solid var(--hz-line); + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04); +} + +.cta-left { + display: flex !important; + flex-direction: row !important; + align-items: center; + gap: 4px; +} + +.cta-right { + display: flex; + align-items: center; +} + +/* Buttons themselves: ghost links inside the bar, not chunky boxes */ +.taisho-cta { + background: transparent; + color: var(--hz-ink); + border: 0 !important; + outline: 0; + padding: 8px 16px; + margin: 0 !important; /* nuke pc98.css mobile-block margin-top */ + font-family: 'Inter', system-ui, sans-serif; + font-weight: 500; + font-size: 11px; + letter-spacing: 0.22em; + text-transform: uppercase; + box-shadow: none !important; + transform: none !important; + border-radius: 2px; + backdrop-filter: none; + -webkit-backdrop-filter: none; + transition: color 180ms ease, background 180ms ease; + cursor: pointer; + position: relative; + overflow: hidden; + opacity: 0.82; +} +.taisho-cta::before { + content: ''; + position: absolute; + left: 50%; + right: 50%; + bottom: 4px; + height: 1px; + background: var(--hz-amber); + transition: left 200ms ease, right 200ms ease; +} +.taisho-cta:hover { + background: transparent; + color: var(--hz-amber); + opacity: 1; + transform: none !important; + box-shadow: none !important; +} +.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. + The hover effect avoids the amber drop-shadow halo (which read as + the same glow language as the active mission/makima nav buttons) + and uses an "inverted ink + chevron rule" treatment instead so it + stays clearly the primary CTA without overlapping signal. */ +.cta-right .taisho-cta { + background: linear-gradient(180deg, rgba(232, 184, 122, 0.95) 0%, rgba(217, 106, 138, 0.85) 100%); + border: 0 !important; + color: #1a1226; + font-weight: 600; + padding: 8px 22px; + opacity: 1; + letter-spacing: 0.18em; + border-radius: 2px; + /* Local positioning context for the chevron rule pseudo-element */ + position: relative; + isolation: isolate; + transition: + background 200ms ease, + color 200ms ease, + letter-spacing 240ms ease; +} +.cta-right .taisho-cta::before { display: none; } + +/* Top-edge tactical chevron rule: hidden by default, slides in on hover. + Uses ::after so it's independent of the existing ::before underline rule. */ +.cta-right .taisho-cta::after { + content: ''; + position: absolute; + inset: 0 0 auto 0; + height: 2px; + background: var(--hz-ink); + transform: scaleX(0); + transform-origin: left center; + transition: transform 220ms ease-out; + pointer-events: none; +} + +.cta-right .taisho-cta:hover { + /* Invert: dark plate, light ink — opposite of the resting state. + Reads as "armed / pressed" instead of "glowing". */ + background: #0b1124; + color: var(--hz-amber); + letter-spacing: 0.22em; /* subtle ink-spread */ + /* Explicitly cancel any inherited glow */ + box-shadow: none !important; + filter: none; +} +.cta-right .taisho-cta:hover::after { + transform: scaleX(1); +} +.cta-right .taisho-cta:active { + background: #1a2548; + color: var(--hz-ink); + letter-spacing: 0.20em; +} +.cta-right .taisho-cta:focus-visible { + outline: 1px solid var(--hz-amber); + outline-offset: 2px; +} + +.cta-icon { font-size: 10px; opacity: 0.85; margin-right: 2px; } +.cta-text { font-size: 11px; } + +/* ---------------------------------------------------------------- + 9. Bottom telemetry strip — GitS:SAC HUD pill + ---------------------------------------------------------------- */ + +.bottom-stats { bottom: 24px; } +.bottom-stats .rf-stats { + background: rgba(11, 17, 36, 0.55); + border: 1px solid var(--hz-line); + border-radius: 2px; + padding: 8px 18px; + display: flex; + gap: 28px; + font-family: 'Inter', system-ui, sans-serif; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + position: relative; +} +.bottom-stats .rf-stats::before, +.bottom-stats .rf-stats::after { + content: ''; + position: absolute; + width: 8px; + height: 8px; + border: 1px solid var(--hz-amber); + opacity: 0.7; +} +.bottom-stats .rf-stats::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } +.bottom-stats .rf-stats::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } + +.bottom-stats .rf-stat { + display: flex; + align-items: baseline; + gap: 8px; + font-size: 11px; + letter-spacing: 0.1em; +} +.bottom-stats .rf-stat .label { + color: var(--hz-cyan); + font-size: 9px; + letter-spacing: 0.22em; + text-transform: uppercase; + font-weight: 500; + opacity: 0.85; +} +.bottom-stats .rf-stat .value { + color: var(--hz-ink); + font-family: 'Inter', 'JetBrains Mono', monospace; + font-feature-settings: 'tnum'; + font-variant-numeric: tabular-nums; + font-weight: 500; + font-size: 12px; +} + +/* ---------------------------------------------------------------- + 10. Mobile refinements + ---------------------------------------------------------------- */ + +@media (max-width: 768px) { + .floating-header { height: 56px; padding: 0 16px; } + .floating-header .brand { left: 16px; } + .floating-header .brand-mark { height: 22px !important; } + .system-info { right: 16px; gap: 12px; } + .info-label { font-size: 9px; } + .info-value { font-size: 10px; } + + /* Mobile navbar — sits below the shorter mobile header */ + .cta-area { + top: 56px; + height: 48px; + padding: 0 14px !important; /* center via flex, not via padding */ + gap: 8px; + align-items: center !important; + } + .cta-left, + .cta-right { + height: auto !important; /* don't inherit any column-layout height */ + align-self: center !important; + align-items: center !important; + } + .cta-left { gap: 0; flex-direction: row !important; } + .taisho-cta { + padding: 0 10px; /* let height drive vertical centering */ + height: 32px; + line-height: 32px; + font-size: 10px; + letter-spacing: 0.18em; + align-self: center !important; + margin: 0 !important; /* kill pc98.css mobile margin-top: 20px */ + } + .cta-right .taisho-cta { padding: 0 14px; font-size: 10px; height: 32px; line-height: 32px; } + .cta-text { font-size: 10px; line-height: 32px; } + .cta-icon { font-size: 9px; line-height: 32px; } + + .modern-landing-page.manga-style .taisho-cover .cover-content { + padding: 124px 20px 28px; + gap: 22px; + } + + .modern-landing-page.manga-style .masthead-vertical .jp { font-size: 24px; } + .modern-landing-page.manga-style .masthead-vertical .en { font-size: 8px; } + + .mission-headline { font-size: 22px; padding-left: 0; } + .mission-paragraph { font-size: 13px; } + + .modern-landing-page.manga-style .hero::after { font-size: 9px; letter-spacing: 0.2em; } + + .bottom-stats { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } +} + +/* ---------------------------------------------------------------- + 11. Reduced-motion + ---------------------------------------------------------------- */ + +@media (prefers-reduced-motion: reduce) { + .modern-landing-page.manga-style .issue-badge .led-heart { animation: none; } + .mission-image { animation: none; } +} |