/* ========================================================== TERMINAL CSS — Phase 4: Backend + Terminal Chrome AnalysisBro Portfolio Terminal Bloomberg data density × Revolut fintech polish ========================================================== */ /* 1. Fonts — loaded via in terminal.html for parallel loading */ /* ========================================================== 2. Design Tokens ========================================================== */ :root { --bg: #020c18; --panel: #040f20; --elevated: #071628; --border: #1e3a5f; --accent: #f5a623; --action: #60a5fa; --text: #c8cdd4; --muted: #9aabb8; --green: #39d353; --red: #ff4444; --grid: #132840; /* Typography scale */ --fs-overline: 10px; --fs-ticker: 11px; --fs-caption: 12px; --fs-body: 13px; --fs-sub: 14px; --fs-data: 22px; } /* ========================================================== 3. Global Reset and Body ========================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.55; overflow: hidden; height: 100vh; display: flex; flex-direction: column; } /* ========================================================== 4. Terminal Layout ========================================================== */ .terminal { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .tab-bar { display: flex; flex-direction: row; height: 40px; background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0; position: relative; } .panel-container { flex: 1; position: relative; overflow: hidden; } .status-bar { height: 32px; background: rgba(4, 15, 32, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--border); display: flex; align-items: center; padding: 0 8px; flex-shrink: 0; justify-content: space-between; } /* ========================================================== 5. Tab Styles (CHROME-01, CHROME-03) ========================================================== */ .tab { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--panel); border: none; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; padding: 0 8px; transition: color 150ms ease, background 150ms ease; border-bottom: 2px solid transparent; user-select: none; -webkit-user-select: none; } .tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); } .tab.active { color: var(--accent); background: rgba(245, 166, 35, 0.06); } /* ========================================================== 6. Panel Styles (CHROME-07, opacity switching — NEVER display:none) ========================================================== */ .panel { position: absolute; inset: 0; opacity: 0; pointer-events: none; overflow-y: scroll; padding: 16px; transition: opacity 200ms ease; } .panel.active { opacity: 1; pointer-events: auto; } /* Data panels: scroll + padding handled by .panel-main — no outer padding needed */ #panel-f1, #panel-f2, #panel-f3, #panel-f4, #panel-f6 { overflow: hidden; padding: 0; } /* Panel placeholder content */ .panel-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 8px; } .panel-placeholder h2 { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; color: var(--accent); } .panel-placeholder p { color: var(--muted); font-size: 13px; } /* ========================================================== 7. Custom Scrollbar (CHROME-07 — 4px always-visible) ========================================================== */ .panel::-webkit-scrollbar { width: 4px; } .panel::-webkit-scrollbar-track { background: transparent; } .panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .panel::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* Firefox */ .panel { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* ========================================================== 8. Status Bar Slots ========================================================== */ .status-left { display: flex; align-items: center; gap: 8px; } .status-center { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); } .status-right { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); } .connection-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .connection-dot.connecting { background: var(--accent); } .connection-dot.online { background: var(--green); } .connection-dot.offline { background: var(--muted); } .connection-label { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--muted); border-radius: 4px; padding: 2px 6px; } /* ========================================================== 9. Numeric Utility Class (CHROME-06) ========================================================== */ .numeric { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; text-align: right; } /* ========================================================== 10. KPI Card — Glassmorphism Base (for Phase 5) ========================================================== */ .kpi-card { background: rgba(7, 22, 40, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 4px; border: 1px solid rgba(30, 58, 95, 0.6); padding: 16px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(245, 166, 35, 0.04); } /* ========================================================== 11. Landing Page (HOME panel) ========================================================== */ .lp { max-width: 760px; margin: 0 auto; padding: 8px 0 32px; } .lp-hero { text-align: center; padding: 20px 0 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; } .lp-badge { display: inline-block; background: rgba(245, 166, 35, 0.08); border: 1px solid rgba(245, 166, 35, 0.25); color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; padding: 3px 12px; border-radius: 4px; margin-bottom: 12px; } .lp-title { font-family: 'JetBrains Mono', monospace; color: var(--accent); font-size: 28px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 8px; } .lp-tagline { color: var(--text); font-size: 14px; letter-spacing: 0.02em; margin-bottom: 10px; line-height: 1.6; } .lp-desc { color: var(--muted); font-size: 13px; line-height: 1.9; max-width: 560px; margin: 0 auto; } .lp-sh { color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .lp-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; } .lp-cap { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid rgba(245, 166, 35, 0.2); border-radius: 4px; padding: 12px; transition: background 150ms ease, border-left-color 150ms ease; } .lp-cap:hover { background: var(--elevated); border-left-color: var(--accent); } .lp-cap-tag { color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; margin-bottom: 4px; opacity: 0.7; } .lp-cap-title { color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 5px; } .lp-cap-body { color: var(--muted); font-size: 12px; line-height: 1.8; } .lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; } .lp-step { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 14px 12px; } .lp-step-n { color: rgba(245, 166, 35, 0.25); font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 700; line-height: 1; margin-bottom: 6px; } .lp-step-t { color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 5px; } .lp-step-b { color: var(--muted); font-size: 12px; line-height: 1.8; } .lp-engine { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 4px 0; align-items: center; margin-bottom: 24px; } .lp-el { color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 6px; margin-left: 6px; } .lp-el:first-child { margin-left: 0; } .lp-ei { color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 8px; background: rgba(245, 166, 35, 0.07); border: 1px solid rgba(245, 166, 35, 0.18); border-radius: 4px; margin: 2px 2px; } .lp-cta { text-align: center; background: rgba(245, 166, 35, 0.05); border: 1px solid rgba(245, 166, 35, 0.2); border-radius: 4px; padding: 18px 24px; } .lp-cta-btn { background: var(--accent); color: var(--bg); font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; border: none; border-radius: 4px; padding: 10px 32px; cursor: pointer; transition: background 150ms ease; display: block; margin: 0 auto 10px; } .lp-cta-btn:hover { background: #ffc04d; } .lp-cta-sub { color: var(--muted); font-size: 12px; line-height: 1.9; } /* ========================================================== 12. Responsive Breakpoints (U6) ========================================================== */ @media (max-width: 700px) { .tab { font-size: 10px; letter-spacing: 0.04em; padding: 0 4px; } .lp-caps { grid-template-columns: 1fr; } .lp-steps { grid-template-columns: 1fr; } .lp { padding: 8px 8px 32px; } .lp-title { font-size: 20px; } .panel { padding: 8px; } } /* === PHASE 6: Sliding Tab Indicator (ANIM-02) === */ #tab-indicator { position: absolute; bottom: 0; height: 2px; background: #f5a623; pointer-events: none; } /* ========================================================== AUTH UI (Phase 4) ========================================================== */ .auth-area { display: flex; align-items: center; margin-left: auto; padding: 0 12px; flex-shrink: 0; } .auth-signin-btn { background: none; border: 1px solid var(--border); color: var(--action); font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 4px 12px; cursor: pointer; border-radius: 3px; transition: border-color 0.2s, color 0.2s; } .auth-signin-btn:hover { border-color: var(--action); color: #fff; } .auth-user-menu { position: relative; } .auth-user-btn { background: none; border: 1px solid var(--border); color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 4px 10px; cursor: pointer; border-radius: 3px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .auth-user-btn:hover { border-color: var(--accent); } .auth-dropdown { position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--elevated); border: 1px solid var(--border); border-radius: 4px; min-width: 160px; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } .auth-dropdown-item { display: block; width: 100%; background: none; border: none; color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 8px 12px; cursor: pointer; text-align: left; } .auth-dropdown-item:hover { background: rgba(96,165,250,0.1); color: #fff; } .auth-dropdown-signout { color: var(--red); } .auth-dropdown-signout:hover { background: rgba(255,68,68,0.1); } /* Auth Modal */ .auth-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } .auth-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); } .auth-modal-content { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 32px; width: 360px; max-width: 90vw; box-shadow: 0 16px 48px rgba(0,0,0,0.6); } .auth-modal-wide { width: 520px; } .auth-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; } .auth-modal-close:hover { color: #fff; } .auth-modal-title { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: 8px; letter-spacing: 1px; } .auth-modal-desc { color: var(--muted); font-size: 12px; margin-bottom: 20px; line-height: 1.5; } .auth-email-input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 13px; outline: none; margin-bottom: 12px; } .auth-email-input:focus { border-color: var(--action); } .auth-send-btn { width: 100%; background: var(--action); border: none; border-radius: 4px; padding: 10px; color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; cursor: pointer; letter-spacing: 0.5px; } .auth-send-btn:hover { background: #4a8fe0; } .auth-send-btn:disabled { opacity: 0.6; cursor: not-allowed; } .auth-error { color: var(--red); font-size: 11px; margin-top: 8px; font-family: 'JetBrains Mono', monospace; } .auth-sent-icon { font-size: 36px; text-align: center; margin-bottom: 12px; } .auth-sent-msg { color: var(--text); font-size: 13px; text-align: center; line-height: 1.6; margin-bottom: 16px; } .auth-back-btn { display: block; margin: 0 auto; background: none; border: 1px solid var(--border); color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 6px 16px; cursor: pointer; border-radius: 3px; } .auth-back-btn:hover { color: var(--text); border-color: var(--text); } /* Portfolio List */ .portfolio-list { max-height: 400px; overflow-y: auto; } .portfolio-loading, .portfolio-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 24px; font-family: 'JetBrains Mono', monospace; } .portfolio-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(30,58,95,0.4); } .portfolio-row:last-child { border-bottom: none; } .portfolio-row-main { flex: 1; min-width: 0; } .portfolio-tickers { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .portfolio-strategy { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; margin-top: 2px; } .portfolio-row-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 12px; } .portfolio-date { font-size: 10px; color: var(--muted); font-family: 'JetBrains Mono', monospace; } .portfolio-load-btn { background: var(--action); border: none; color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 4px 10px; border-radius: 3px; cursor: pointer; font-weight: 700; } .portfolio-load-btn:hover { background: #4a8fe0; }