/* ================================================================
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 — solid plate so the dusk-pink horizon and
bokeh from the page background don't bleed through behind the
panel content. The panel reads as its own surface, not a tinted
overlay over the homepage. */
.modern-landing-page.manga-style .taisho-cover.mission-mode .cover-backdrop {
/* Near-opaque dark plate, uniform top-to-bottom (slight gradient kept
for depth so it doesn't read as flat-painted). */
background: linear-gradient(180deg, #0a1024 0%, #0b1530 100%);
/* Strong blur so even residual ambient bleed is fully diffused */
backdrop-filter: blur(20px) saturate(80%);
-webkit-backdrop-filter: blur(20px) saturate(80%);
}
/* ----------------------------------------------------------------
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: 0 24px 60px -24px rgba(8, 10, 24, 0.85);
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 */
/* SVG owns its frame — keep only the soft drop-shadow for elevation */
box-shadow: 0 24px 60px -24px rgba(8, 10, 24, 0.85);
}
/* 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: 0 24px 60px -24px rgba(8, 10, 24, 0.85);
}
/* ----------------------------------------------------------------
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; }
}
