diff options
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/src/main.tsx | 1 | ||||
| -rw-r--r-- | frontend/src/styles/heisei.css | 524 |
2 files changed, 525 insertions, 0 deletions
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 04b8cde..ba2e16b 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -9,6 +9,7 @@ import { DaemonList } from './components/DaemonList' import { DaemonDetail } from './components/DaemonDetail' import './styles/pc98.css' import './styles/mobile.css' +import './styles/heisei.css' // Route configuration: // - /contracts - List all contracts diff --git a/frontend/src/styles/heisei.css b/frontend/src/styles/heisei.css new file mode 100644 index 0000000..fa42c95 --- /dev/null +++ b/frontend/src/styles/heisei.css @@ -0,0 +1,524 @@ +/* ================================================================ + 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); } + +.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 — softer, less black-curtain */ +.modern-landing-page.manga-style .taisho-cover.mission-mode .cover-backdrop { + background: linear-gradient(180deg, rgba(11, 17, 36, 0.62) 0%, rgba(11, 17, 36, 0.85) 100%); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); +} + +/* ---------------------------------------------------------------- + 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 + ---------------------------------------------------------------- */ + +.modern-landing-page.manga-style .taisho-cover .cover-content { + grid-template-columns: 200px 1fr; + gap: 40px; + padding: 110px 56px 120px; +} + +@media (max-width: 1024px) { + .modern-landing-page.manga-style .taisho-cover .cover-content { + grid-template-columns: 1fr; + padding: 100px 24px 140px; + gap: 28px; + } +} + +/* ---------------------------------------------------------------- + 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 { + content: '低遅延ストリーミング · LOW-LATENCY OBSERVABILITY'; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + font-family: 'Noto Sans JP', 'Inter', sans-serif; + font-size: 11px; + font-weight: 400; + letter-spacing: 0.3em; + color: var(--hz-amber); + opacity: 0.75; + white-space: nowrap; + text-shadow: 0 0 12px rgba(232, 184, 122, 0.35); +} + +/* ---------------------------------------------------------------- + 7. Mission / Makima screens — Heisei magazine column + ---------------------------------------------------------------- */ + +.mission-screen { + gap: 20px; +} + +.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; + max-width: 56ch; + border-left: 2px solid var(--hz-amber); + padding-left: 18px; +} + +.mission-image { + border: 0; + border-radius: 2px; + box-shadow: + 0 24px 60px -24px rgba(8, 10, 24, 0.85), + 0 0 0 1px var(--hz-line); + filter: saturate(0.85) brightness(0.92); + height: clamp(180px, 36vh, 360px); +} + +.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; + max-width: 60ch; +} + +/* 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); + 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; +} +.makima-logo { + border: 0; + border-radius: 2px; + background: + radial-gradient(circle at 30% 30%, rgba(217, 106, 138, 0.18), transparent 50%), + rgba(11, 17, 36, 0.55); + box-shadow: + 0 24px 60px -24px rgba(8, 10, 24, 0.85), + 0 0 0 1px var(--hz-line); +} + +/* ---------------------------------------------------------------- + 8. CTAs — flat tactical buttons, hairline borders + ---------------------------------------------------------------- */ + +.cta-area { + padding: 0 56px 48px !important; + gap: 12px; +} + +.taisho-cta { + background: rgba(11, 17, 36, 0.55); + color: var(--hz-ink); + border: 1px solid var(--hz-line-strong) !important; + outline: 0; + padding: 12px 24px; + font-family: 'Inter', system-ui, sans-serif; + font-weight: 500; + font-size: 12px; + letter-spacing: 0.22em; + text-transform: uppercase; + box-shadow: none !important; + transform: none !important; + border-radius: 2px; + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + transition: all 180ms ease; + cursor: pointer; + position: relative; + overflow: hidden; +} +.taisho-cta::before { + content: ''; + position: absolute; + left: 0; top: 0; bottom: 0; + width: 2px; + background: var(--hz-amber); + transform: scaleY(0); + transform-origin: bottom; + transition: transform 200ms ease; +} +.taisho-cta:hover { + background: rgba(74, 58, 107, 0.35); + border-color: var(--hz-amber) !important; + color: var(--hz-amber); + transform: translateY(-1px) !important; + box-shadow: 0 8px 24px -12px rgba(232, 184, 122, 0.4) !important; +} +.taisho-cta:hover::before { transform: scaleY(1); transform-origin: top; } + +/* Right-side login gets the warm accent */ +.cta-right .taisho-cta { + background: linear-gradient(180deg, rgba(232, 184, 122, 0.95) 0%, rgba(217, 106, 138, 0.85) 100%); + border-color: transparent !important; + color: #1a1226; + font-weight: 600; +} +.cta-right .taisho-cta::before { background: rgba(11, 17, 36, 0.5); } +.cta-right .taisho-cta:hover { + background: linear-gradient(180deg, rgba(232, 184, 122, 1) 0%, rgba(217, 106, 138, 1) 100%); + color: #0b1124; + box-shadow: 0 12px 32px -10px rgba(232, 184, 122, 0.55) !important; +} + +.cta-icon { font-size: 11px; opacity: 0.85; } +.cta-text { font-size: 12px; } + +.cta-left { flex-direction: row !important; gap: 12px; } + +/* ---------------------------------------------------------------- + 9. Bottom telemetry strip — GitS:SAC HUD pill + ---------------------------------------------------------------- */ + +.bottom-stats { bottom: 96px; } +.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; } + + .modern-landing-page.manga-style .taisho-cover .cover-content { + padding: 80px 20px 200px; + 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: 14px; } + .mission-paragraph { font-size: 13px; } + + .modern-landing-page.manga-style .hero::after { font-size: 9px; letter-spacing: 0.2em; } + + .cta-area { padding: 12px !important; } + .taisho-cta { padding: 14px 20px; font-size: 11px; } + .cta-left { flex-direction: column !important; } + .bottom-stats { bottom: calc(220px + 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; } +} |