diff --git a/app/globals.css b/app/globals.css index edfc9a9..c1cfd32 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,2 +1,487 @@ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&family=Rajdhani:wght@300;400;500;600;700&display=swap'); -/* See full CSS in repo files */ + +/* ── CSS Variables ──────────────────────────────────────────────────────── */ +:root { + --corp: #ff6b00; + --cyber: #00d4ff; + --lab: #00ff88; + --found: #4466ff; + --warn: #ffcc00; + --bg: #0a0c10; + --card: rgba(18, 22, 32, 0.92); + --border: rgba(255, 255, 255, 0.07); + --text: #e0e6f6; + --muted: #6a7a9a; +} + +/* ── Reset ──────────────────────────────────────────────────────────────── */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +html, body { + height: 100%; + overflow: hidden; + background: var(--bg); + color: var(--text); + font-family: 'Rajdhani', sans-serif; +} + +/* ── Layout ─────────────────────────────────────────────────────────────── */ +.broadcast-root { + display: grid; + grid-template-rows: 56px 1fr 36px; + grid-template-columns: 1fr 320px; + grid-template-areas: + "header header" + "main chat" + "trinity trinity"; + height: 100vh; + width: 100vw; +} + +/* ── Header ─────────────────────────────────────────────────────────────── */ +.broadcast-header { + grid-area: header; + display: flex; + align-items: center; + gap: 20px; + padding: 0 24px; + background: rgba(10, 12, 16, 0.97); + border-bottom: 1px solid var(--border); + z-index: 10; +} + +.header-logo { + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; +} + +.logo-hex { + font-size: 24px; + background: linear-gradient(90deg, var(--corp), var(--cyber)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.logo-name { + font-family: 'Orbitron', monospace; + font-size: 16px; + font-weight: 700; + letter-spacing: 2px; + color: var(--text); +} + +.logo-live { + color: var(--corp); + margin-left: 4px; +} + +.header-scene-pills { + display: flex; + gap: 6px; + flex: 1; +} + +.scene-pill { + padding: 4px 10px; + border: 1px solid var(--border); + border-radius: 16px; + background: transparent; + color: var(--muted); + font-family: 'Share Tech Mono', monospace; + font-size: 10px; + letter-spacing: 1.5px; + cursor: pointer; + transition: all 0.2s; + text-transform: uppercase; +} + +.scene-pill:hover { border-color: var(--corp); color: var(--corp); } +.scene-pill.active { border-color: var(--corp); color: var(--corp); background: rgba(255,107,0,0.1); } + +.header-meta { + display: flex; + align-items: center; + gap: 12px; + flex-shrink: 0; + font-family: 'Share Tech Mono', monospace; + font-size: 12px; +} + +.viewer-count { color: var(--muted); } + +.live-badge { + color: var(--corp); + animation: blink 1.5s infinite; + font-size: 11px; + letter-spacing: 1px; +} + +@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.4} } + +/* ── Main Scene ──────────────────────────────────────────────────────────── */ +.broadcast-main { + grid-area: main; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + background: var(--bg); +} + +/* Background grid */ +.broadcast-main::before { + content: ''; + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(255,107,0,0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,107,0,0.03) 1px, transparent 1px); + background-size: 60px 60px; + pointer-events: none; +} + +/* ── Scenes ──────────────────────────────────────────────────────────────── */ +.scene { + text-align: center; + padding: 40px; + max-width: 800px; + width: 100%; + position: relative; + z-index: 1; +} + +.scene-eyebrow { + font-family: 'Share Tech Mono', monospace; + font-size: 11px; + letter-spacing: 4px; + text-transform: uppercase; + margin-bottom: 12px; + opacity: 0.8; +} + +.scene-headline { + font-family: 'Orbitron', monospace; + font-size: clamp(36px, 6vw, 72px); + font-weight: 900; + line-height: 1; + margin-bottom: 16px; + letter-spacing: 2px; +} + +.scene-tagline { + font-size: 18px; + color: var(--muted); + font-family: 'Rajdhani', sans-serif; + font-weight: 400; + letter-spacing: 1px; +} + +.scene-body { + font-size: 15px; + color: var(--muted); + line-height: 1.7; +} + +.scene-body code { + background: rgba(255,255,255,0.06); + border: 1px solid var(--border); + padding: 2px 8px; + border-radius: 4px; + font-family: 'Share Tech Mono', monospace; + color: var(--cyber); +} + +/* Scene: Live */ +.live-embed { + width: 100%; + max-width: 800px; + aspect-ratio: 16/9; + border: none; + border-radius: 8px; + margin-top: 20px; +} + +/* Scene: Metrics */ +.metric-row { + display: flex; + gap: 16px; + justify-content: center; + margin-top: 24px; + flex-wrap: wrap; +} + +.metric-card { + background: var(--card); + border: 1px solid var(--border); + border-radius: 8px; + padding: 20px 28px; + min-width: 160px; + text-align: center; +} + +.metric-big { + font-family: 'Orbitron', monospace; + font-size: 32px; + font-weight: 700; +} + +.metric-label { + font-family: 'Share Tech Mono', monospace; + font-size: 9px; + letter-spacing: 2px; + color: var(--muted); + margin-top: 6px; + text-transform: uppercase; +} + +/* Scene: Links */ +.scene-links { + margin-top: 24px; + display: flex; + gap: 12px; + justify-content: center; + flex-wrap: wrap; +} + +.scene-link { + padding: 8px 20px; + border: 1px solid; + border-radius: 4px; + text-decoration: none; + font-family: 'Share Tech Mono', monospace; + font-size: 11px; + letter-spacing: 1.5px; + transition: background 0.2s; +} + +.scene-link:hover { background: rgba(255,255,255,0.05); } + +/* Scene: Forge Phases */ +.forge-phases { + display: flex; + flex-direction: column; + gap: 12px; + margin-top: 28px; + max-width: 480px; + margin-left: auto; + margin-right: auto; +} + +.forge-phase { + display: flex; + align-items: center; + gap: 16px; + background: var(--card); + border: 1px solid var(--border); + border-radius: 6px; + padding: 14px 20px; + text-align: left; +} + +.forge-num { + font-family: 'Orbitron', monospace; + font-size: 24px; + font-weight: 700; + color: var(--warn); + min-width: 40px; +} + +.forge-phase-name { + font-family: 'Share Tech Mono', monospace; + font-size: 13px; + letter-spacing: 2px; +} + +.forge-phase-desc { + font-size: 13px; + color: var(--muted); + margin-top: 2px; +} + +/* Scene: Offline */ +.scene-offline { padding: 60px 40px; } + +.offline-title { + font-family: 'Orbitron', monospace; + font-size: clamp(64px, 10vw, 120px); + font-weight: 900; + background: linear-gradient(135deg, var(--corp), var(--cyber), var(--lab)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + line-height: 1; + margin-bottom: 8px; +} + +.offline-tag { + font-family: 'Share Tech Mono', monospace; + font-size: 14px; + letter-spacing: 3px; + color: var(--muted); + margin-bottom: 20px; +} + +.offline-sub { + font-size: 15px; + color: var(--muted); + margin-bottom: 32px; +} + +.offline-sub code { + background: rgba(255,255,255,0.05); + border: 1px solid var(--border); + padding: 2px 8px; + border-radius: 4px; + font-family: 'Share Tech Mono', monospace; + color: var(--cyber); +} + +.offline-commands { + display: flex; + gap: 10px; + justify-content: center; + flex-wrap: wrap; +} + +.offline-cmd { + padding: 6px 14px; + border: 1px solid var(--border); + border-radius: 20px; + font-family: 'Share Tech Mono', monospace; + font-size: 11px; + color: var(--muted); + letter-spacing: 1px; +} + +/* Scene: KAEL */ +.kael-response { + margin-top: 32px; + background: var(--card); + border: 1px solid var(--cyber); + border-radius: 8px; + padding: 20px 28px; + text-align: left; + box-shadow: 0 0 20px rgba(0,212,255,0.1); +} + +.kael-label { + font-family: 'Share Tech Mono', monospace; + font-size: 10px; + letter-spacing: 3px; + color: var(--cyber); + margin-bottom: 8px; +} + +.kael-text { + font-size: 16px; + line-height: 1.7; + color: var(--text); +} + +/* ── Chat Overlay ────────────────────────────────────────────────────────── */ +.chat-overlay { + grid-area: chat; + display: flex; + flex-direction: column; + background: rgba(10, 12, 16, 0.92); + border-left: 1px solid var(--border); + overflow: hidden; +} + +.chat-messages { + flex: 1; + overflow-y: auto; + padding: 12px 10px; + display: flex; + flex-direction: column; + gap: 6px; +} + +.chat-messages::-webkit-scrollbar { width: 3px; } +.chat-messages::-webkit-scrollbar-track { background: transparent; } +.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } + +.chat-msg { + font-size: 12px; + line-height: 1.5; + word-break: break-word; +} + +.chat-msg.chat-cmd { opacity: 0.6; font-family: 'Share Tech Mono', monospace; } + +.chat-user { + color: var(--corp); + font-family: 'Share Tech Mono', monospace; + font-size: 10px; + margin-right: 6px; +} + +.chat-text { color: var(--text); } + +.chat-form { + display: flex; + border-top: 1px solid var(--border); + padding: 8px; + gap: 6px; +} + +.chat-input { + flex: 1; + background: rgba(255,255,255,0.04); + border: 1px solid var(--border); + border-radius: 4px; + padding: 6px 10px; + color: var(--text); + font-size: 12px; + font-family: 'Rajdhani', sans-serif; + outline: none; +} + +.chat-input:focus { border-color: var(--corp); } + +.chat-send { + background: var(--corp); + border: none; + border-radius: 4px; + color: #fff; + padding: 6px 12px; + cursor: pointer; + font-size: 14px; + transition: opacity 0.2s; +} + +.chat-send:hover { opacity: 0.8; } + +.chat-commands { + display: flex; + flex-wrap: wrap; + gap: 4px; + padding: 6px 8px; + border-top: 1px solid var(--border); +} + +.cmd-chip { + padding: 2px 8px; + border: 1px solid; + border-radius: 12px; + background: transparent; + font-family: 'Share Tech Mono', monospace; + font-size: 9px; + letter-spacing: 1px; + cursor: pointer; + transition: background 0.2s; +} + +.cmd-chip:hover { background: rgba(255,255,255,0.05); } + +/* ── Trinity Footer Bar ──────────────────────────────────────────────────── */ +.trinity-bar { + grid-area: trinity; + height: 36px; + background: linear-gradient(90deg, var(--found) 33.33%, var(--corp) 33.33% 66.66%, var(--lab) 66.66%); + opacity: 0.85; +}