diff options
Diffstat (limited to 'frontend/src/styles/pc98.css')
| -rw-r--r-- | frontend/src/styles/pc98.css | 323 |
1 files changed, 0 insertions, 323 deletions
diff --git a/frontend/src/styles/pc98.css b/frontend/src/styles/pc98.css index e591cdc..7ec0d1c 100644 --- a/frontend/src/styles/pc98.css +++ b/frontend/src/styles/pc98.css @@ -4680,326 +4680,3 @@ button:focus-visible { .capacity-fill.high { background: #ffcc66; } .capacity-fill.full { background: #ff4466; } .refresh-indicator { font-size: 11px; color: rgba(255, 255, 255, 0.3); margin-left: auto; } - -/* ================== Professional Landing Page ================== */ - -/* ── Header ── */ - -.pro-header { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 100; - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - background: rgba(10, 14, 28, 0.85); - border-bottom: 1px solid rgba(0, 200, 255, 0.15); -} - -.pro-header-content { - max-width: 1100px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.6rem 1.5rem; -} - -.pro-header-left { - display: flex; - align-items: center; - gap: 0.65rem; -} - -.pro-crane-logo { - display: block; -} - -.pro-company-name { - font-family: var(--font-family, 'IBM Plex Mono', 'MS Gothic', monospace); - font-size: 1rem; - font-weight: 600; - letter-spacing: 0.18em; - color: #e0e8f0; -} - -.pro-header-center { - display: flex; - align-items: center; - justify-content: center; -} - -.pro-header-nav { - display: flex; - align-items: center; - gap: 0.25rem; -} - -.pro-nav-link { - background: none; - border: 1px solid transparent; - color: #8fa8c8; - font-family: var(--font-family, 'IBM Plex Mono', 'MS Gothic', monospace); - font-size: 0.8rem; - letter-spacing: 0.08em; - padding: 0.35rem 0.75rem; - cursor: pointer; - border-radius: 3px; - transition: color 0.2s, border-color 0.2s; -} - -.pro-nav-link:hover { - color: #00c8ff; - border-color: rgba(0, 200, 255, 0.3); -} - -.pro-nav-login { - color: #00c8ff; - border-color: rgba(0, 200, 255, 0.35); - margin-left: 0.5rem; -} - -.pro-nav-login:hover { - background: rgba(0, 200, 255, 0.08); - border-color: #00c8ff; -} - -/* ── Landing Container ── */ - -.pro-landing { - min-height: 100vh; - background: #080c1a; - color: #c8d4e0; - font-family: var(--font-family, 'IBM Plex Mono', 'MS Gothic', monospace); - overflow-x: hidden; -} - -/* ── Hero ── */ - -.pro-hero { - display: flex; - align-items: center; - justify-content: center; - min-height: 100vh; - padding: 6rem 1.5rem 4rem; - text-align: center; - position: relative; -} - -.pro-hero::before { - content: ''; - position: absolute; - inset: 0; - background: - radial-gradient(ellipse 60% 50% at 50% 40%, rgba(0, 100, 180, 0.08) 0%, transparent 100%), - radial-gradient(ellipse 40% 30% at 50% 60%, rgba(0, 200, 255, 0.04) 0%, transparent 100%); - pointer-events: none; -} - -.pro-hero-inner { - position: relative; - max-width: 700px; -} - -.pro-hero-tagline-jp { - font-size: 0.85rem; - letter-spacing: 0.5em; - color: rgba(0, 200, 255, 0.45); - margin-bottom: 1.5rem; - text-transform: uppercase; -} - -.pro-hero-headline { - font-size: clamp(1.8rem, 4vw, 2.8rem); - font-weight: 600; - line-height: 1.25; - color: #e8f0fa; - margin: 0 0 1.25rem; - letter-spacing: -0.01em; -} - -.pro-hero-sub { - font-size: 1rem; - line-height: 1.7; - color: #8fa8c8; - margin: 0 auto 2.5rem; - max-width: 520px; -} - -.pro-hero-cta { - display: flex; - gap: 1rem; - justify-content: center; - flex-wrap: wrap; -} - -.pro-btn-primary, -.pro-btn-secondary { - font-family: var(--font-family, 'IBM Plex Mono', 'MS Gothic', monospace); - font-size: 0.85rem; - letter-spacing: 0.06em; - padding: 0.65rem 1.5rem; - border-radius: 3px; - cursor: pointer; - transition: all 0.2s; -} - -.pro-btn-primary { - background: rgba(0, 200, 255, 0.1); - color: #00c8ff; - border: 1px solid rgba(0, 200, 255, 0.35); -} - -.pro-btn-primary:hover { - background: rgba(0, 200, 255, 0.18); - border-color: #00c8ff; -} - -.pro-btn-secondary { - background: transparent; - color: #8fa8c8; - border: 1px solid rgba(140, 170, 200, 0.25); -} - -.pro-btn-secondary:hover { - color: #e0e8f0; - border-color: rgba(140, 170, 200, 0.5); -} - -.pro-btn-icon { - margin-right: 0.35rem; - font-size: 0.75rem; -} - -/* ── Content Grid ── */ - -.pro-content-grid { - max-width: 1100px; - margin: 0 auto; - padding: 0 1.5rem 5rem; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); - gap: 2rem; -} - -.pro-card { - background: rgba(12, 18, 36, 0.7); - border: 1px solid rgba(0, 200, 255, 0.12); - border-radius: 4px; - overflow: hidden; - scroll-margin-top: 5rem; - transition: border-color 0.3s ease, box-shadow 0.3s ease; -} - -.pro-card:hover { - border-color: rgba(0, 200, 255, 0.28); - box-shadow: 0 0 20px rgba(0, 200, 255, 0.06); -} - -.pro-card-header { - padding: 1.25rem 1.5rem 0.75rem; - display: flex; - align-items: center; - gap: 0.75rem; - flex-wrap: wrap; -} - -.pro-card-title { - font-size: 1.1rem; - font-weight: 600; - letter-spacing: 0.12em; - color: #e0e8f0; - margin: 0; - text-transform: uppercase; -} - -.pro-card-badge { - font-size: 0.65rem; - letter-spacing: 0.1em; - text-transform: uppercase; - padding: 0.2rem 0.5rem; - background: rgba(0, 200, 255, 0.1); - border: 1px solid rgba(0, 200, 255, 0.25); - border-radius: 2px; - color: #00c8ff; -} - -.pro-card-accent { - flex: 1; - height: 1px; - background: linear-gradient(90deg, rgba(0, 200, 255, 0.3), transparent); -} - -.pro-card-body { - padding: 0.75rem 1.5rem 1.5rem; -} - -.pro-card-subtitle { - font-size: 0.95rem; - font-weight: 500; - color: #c0d0e0; - margin: 0 0 0.75rem; - line-height: 1.5; -} - -.pro-card-text { - font-size: 0.85rem; - line-height: 1.7; - color: #7a90a8; - margin: 0 0 0.6rem; -} - -.pro-card-text:last-child { - margin-bottom: 0; -} - -.pro-makima-logo { - display: block; - width: 64px; - height: 64px; - margin-bottom: 1rem; - opacity: 0.75; -} - -/* ── Footer ── */ - -.pro-footer { - border-top: 1px solid rgba(0, 200, 255, 0.1); - padding: 1.5rem; - text-align: center; -} - -.pro-footer-inner { - font-size: 0.75rem; - color: #4a6080; - letter-spacing: 0.08em; -} - -.pro-footer-brand { - letter-spacing: 0.18em; - color: #5a7898; -} - -.pro-footer-sep { - margin: 0 0.5rem; - opacity: 0.4; -} - -.pro-footer-text { - color: #4a6080; -} - -/* ── Shared transitions ── */ - -.pro-landing.hidden, -.pro-header.hidden { - opacity: 0; - pointer-events: none; -} - -.pro-landing.fade-in, -.pro-header.fade-in { - opacity: 1; - transition: opacity 0.8s ease; -} |
