/* DeltaBet -- Prediction Market for Micro-Drama Competitive Intelligence Design tokens derived from DESIGN-SPEC.md */ /* ============================================ GOOGLE FONTS (loaded in HTML ) Space Grotesk | Inter | JetBrains Mono ============================================ */ :root { /* ---- Colors (Dark Mode Default) ---- */ --bg-primary: #0B0E14; --bg-surface: #141821; --bg-surface-raised: #1C2130; --bg-surface-hover: #242938; --text-primary: #E8ECF4; --text-secondary: #8B95A8; --text-muted: #4A5268; --border-default: #1E2538; --border-emphasis: #2A3348; --accent-cobalt: #3B6FD4; --accent-cobalt-dim: #1E3A6E; --accent-warm: #D4A574; --accent-warm-dim: #8B6E48; --gain: #00D26A; --gain-bg: rgba(0, 210, 106, 0.08); --gain-muted: #0A7B42; --loss: #FF4757; --loss-bg: rgba(255, 71, 87, 0.08); --loss-muted: #A82835; --new-entry: #A855F7; --new-entry-bg: rgba(168, 85, 247, 0.08); --stable: #64748B; --stable-bg: rgba(100, 116, 139, 0.08); --tier-elite: #F59E0B; --tier-elite-bg: rgba(245, 158, 11, 0.12); --tier-strong: #3B6FD4; --tier-strong-bg: rgba(59, 111, 212, 0.12); --tier-average: #8B95A8; --tier-average-bg: rgba(139, 149, 168, 0.12); --tier-vulnerable: #D97706; --tier-vulnerable-bg: rgba(217, 119, 6, 0.12); --tier-critical: #EF4444; --tier-critical-bg: rgba(239, 68, 68, 0.12); --volume: #F59E0B; --closing-soon: #F97316; /* ---- Typography ---- */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-lg: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.75rem; --text-4xl: 3.5rem; --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.7; /* ---- Spacing ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---- Border Radius ---- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* ---- Shadows ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-glow-gain: 0 0 12px rgba(0, 210, 106, 0.15); --shadow-glow-loss: 0 0 12px rgba(255, 71, 87, 0.15); /* ---- Animation ---- */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; /* ---- Layout ---- */ --content-max-width: 1280px; --topbar-height: 56px; --bottombar-height: 64px; } /* ============================================ RESET & BASE ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background: var(--bg-primary); min-height: 100vh; } a { color: var(--accent-cobalt); text-decoration: none; transition: color var(--duration-fast) var(--ease-default); } a:hover { color: var(--text-primary); } button { cursor: pointer; font-family: var(--font-body); border: none; background: none; color: var(--text-primary); } input { font-family: var(--font-mono); background: var(--bg-surface-raised); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); outline: none; transition: border-color var(--duration-fast) var(--ease-default); } input:focus { border-color: var(--accent-cobalt); } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--border-emphasis); border-radius: 3px; } /* ============================================ LAYOUT ============================================ */ .app-container { min-height: 100vh; display: flex; flex-direction: column; } .content-wrapper { max-width: var(--content-max-width); width: 100%; margin: 0 auto; padding: 0 var(--space-4); padding-top: calc(var(--topbar-height) + var(--space-4)); } /* ============================================ TOP BAR ============================================ */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-height); background: var(--bg-surface); border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-4); z-index: 100; } .topbar-logo { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); } .topbar-logo .delta { color: var(--accent-cobalt); } .topbar-nav { display: flex; gap: var(--space-1); } .topbar-nav a, .topbar-nav button { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); border-radius: var(--radius-md); transition: all var(--duration-fast) var(--ease-default); font-weight: 500; text-decoration: none; background: none; border: none; cursor: pointer; } .topbar-nav a:hover, .topbar-nav button:hover { color: var(--text-primary); background: var(--bg-surface-hover); } .topbar-nav a.active, .topbar-nav button.active { color: var(--accent-cobalt); background: rgba(59, 111, 212, 0.08); } .topbar-right { display: flex; align-items: center; gap: var(--space-4); } .wallet-display { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--gain); background: var(--gain-bg); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); } .wallet-display .paper-label { font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; } /* ============================================ HERO BANNER ============================================ */ .hero-banner { background: linear-gradient(135deg, var(--accent-cobalt-dim) 0%, var(--bg-primary) 100%); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-8); margin-bottom: var(--space-6); position: relative; overflow: hidden; } .hero-banner::before { content: ''; position: absolute; top: -50%; right: -20%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(59,111,212,0.1) 0%, transparent 70%); pointer-events: none; } .hero-headline { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: var(--leading-tight); margin-bottom: var(--space-2); } .hero-subtext { font-size: var(--text-base); color: var(--text-secondary); margin-bottom: var(--space-5); } .hero-btn { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--accent-cobalt); color: #fff; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-weight: 600; font-size: var(--text-sm); transition: all var(--duration-fast) var(--ease-default); } .hero-btn:hover { filter: brightness(1.1); color: #fff; transform: translateY(-1px); } /* ============================================ SECTION HEADERS ============================================ */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .section-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; } .section-link { font-size: var(--text-sm); color: var(--accent-cobalt); font-weight: 500; } /* ============================================ MOVERS ROW ============================================ */ .movers-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-8); } .mover-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4); position: relative; transition: all var(--duration-normal) var(--ease-default); cursor: pointer; } .mover-card:hover { border-color: var(--border-emphasis); transform: translateY(-1px); box-shadow: var(--shadow-md); } .mover-card.gainer { border-left: 3px solid var(--gain); } .mover-card.loser { border-left: 3px solid var(--loss); } .mover-card .company-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-1); } .mover-card .category-badge { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-3); } .mover-card .delta-big { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700; } .mover-card .delta-big.positive { color: var(--gain); } .mover-card .delta-big.negative { color: var(--loss); } .mover-card .score-range { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-1); } .mover-card .signal-text { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================ MARKET CARDS ============================================ */ .markets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-8); } .market-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4); transition: all var(--duration-normal) var(--ease-default); cursor: pointer; display: flex; flex-direction: column; } .market-card:hover { border-color: var(--border-emphasis); transform: translateY(-1px); box-shadow: var(--shadow-md); } .market-card.closing-soon { border-top: 2px solid var(--closing-soon); } .market-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); } .type-badge { font-size: var(--text-xs); text-transform: uppercase; color: var(--accent-cobalt); background: rgba(59, 111, 212, 0.1); padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; letter-spacing: 0.03em; } .market-timer { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); } .market-timer.urgent { color: var(--closing-soon); } .market-question { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; line-height: var(--leading-tight); margin-bottom: var(--space-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 1; } .market-card-bottom { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); } .company-pills { display: flex; gap: var(--space-1); flex-wrap: wrap; } .company-pill { font-size: var(--text-xs); color: var(--text-secondary); background: var(--bg-surface-hover); padding: 1px 6px; border-radius: var(--radius-full); } /* ============================================ ODDS BAR ============================================ */ .odds-bar-container { margin-bottom: var(--space-3); } .odds-labels { display: flex; justify-content: space-between; margin-bottom: var(--space-1); } .odds-yes { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--gain); } .odds-no { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--loss); } .odds-bar { width: 100%; height: 8px; border-radius: 4px; background: var(--bg-surface-hover); display: flex; overflow: hidden; gap: 2px; } .odds-bar-yes { height: 100%; background: var(--gain); border-radius: 4px 0 0 4px; transition: width var(--duration-slow) var(--ease-default); } .odds-bar-no { height: 100%; background: var(--loss); border-radius: 0 4px 4px 0; transition: width var(--duration-slow) var(--ease-default); } /* ============================================ DELTA BADGE ============================================ */ .delta-badge { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-weight: 700; border-radius: var(--radius-full); min-width: 60px; justify-content: center; } .delta-badge.sm { font-size: var(--text-xs); padding: 2px 8px; } .delta-badge.md { font-size: var(--text-sm); padding: 4px 10px; } .delta-badge.positive { color: var(--gain); background: var(--gain-bg); } .delta-badge.negative { color: var(--loss); background: var(--loss-bg); } .delta-badge.neutral { color: var(--stable); background: var(--stable-bg); } .delta-badge.new-entry { color: var(--new-entry); background: var(--new-entry-bg); } /* ============================================ TIER BADGE ============================================ */ .tier-badge { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; } .tier-badge.circle { width: 28px; height: 28px; border-radius: 50%; font-size: 11px; } .tier-badge.pill { padding: 3px 10px; border-radius: var(--radius-full); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; } .tier-badge.tier-1 { color: var(--tier-elite); background: var(--tier-elite-bg); border: 1px solid rgba(245,158,11,0.3); } .tier-badge.tier-2 { color: var(--tier-strong); background: var(--tier-strong-bg); border: 1px solid rgba(59,111,212,0.3); } .tier-badge.tier-3 { color: var(--tier-average); background: var(--tier-average-bg); border: 1px solid rgba(139,149,168,0.3); } .tier-badge.tier-4 { color: var(--tier-vulnerable); background: var(--tier-vulnerable-bg); border: 1px solid rgba(217,119,6,0.3); } .tier-badge.tier-5 { color: var(--tier-critical); background: var(--tier-critical-bg); border: 1px solid rgba(239,68,68,0.3); } /* ============================================ LEADERBOARD TABLE ============================================ */ .leaderboard-container { margin-bottom: var(--space-8); } .leaderboard-filters { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; align-items: center; } .leaderboard-filters select, .leaderboard-filters input[type="text"] { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-family: var(--font-body); } .leaderboard-filters select:focus, .leaderboard-filters input[type="text"]:focus { border-color: var(--accent-cobalt); outline: none; } .tier-divider { padding: var(--space-2) var(--space-4); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid var(--border-default); margin-top: var(--space-3); display: flex; align-items: center; gap: var(--space-2); } .tier-divider.elite { color: var(--tier-elite); border-color: rgba(245,158,11,0.3); } .tier-divider.strong { color: var(--tier-strong); border-color: rgba(59,111,212,0.3); } .tier-divider.average { color: var(--tier-average); border-color: rgba(139,149,168,0.3); } .tier-divider.vulnerable { color: var(--tier-vulnerable); border-color: rgba(217,119,6,0.3); } .tier-divider.critical { color: var(--tier-critical); border-color: rgba(239,68,68,0.3); } .leaderboard-row { display: grid; grid-template-columns: 40px 1fr 80px 90px 40px 100px; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); transition: background var(--duration-fast) var(--ease-default); cursor: pointer; } .leaderboard-row:hover:not(.leaderboard-header) { background: var(--bg-surface-hover); } .lb-rank { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; color: var(--text-secondary); text-align: center; } .lb-company { display: flex; align-items: center; gap: var(--space-3); } .lb-logo { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; font-size: 14px; color: #fff; flex-shrink: 0; } .lb-company-info { display: flex; flex-direction: column; } .lb-company-name { font-weight: 600; font-size: var(--text-base); } .lb-company-category { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; } .lb-composite { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; text-align: right; } .lb-delta { text-align: center; } .lb-tier { text-align: center; } .lb-dimensions { display: flex; flex-direction: column; gap: 2px; } .dim-bar { height: 3px; border-radius: 2px; background: var(--bg-surface-hover); position: relative; } .dim-bar-fill { height: 100%; border-radius: 2px; transition: width var(--duration-slower) var(--ease-out); } /* Expanded row */ .lb-expanded { background: var(--bg-surface); border-bottom: 1px solid var(--border-default); padding: var(--space-4) var(--space-4) var(--space-4) 56px; display: none; grid-template-columns: 1fr 1fr; gap: var(--space-6); } .lb-expanded.open { display: grid; } .lb-expanded-radar { display: flex; justify-content: center; align-items: center; } .lb-expanded-info h4 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-2); } .lb-expanded-info .signal-text { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-3); line-height: var(--leading-relaxed); } .lb-expanded-info .rationale { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-4); line-height: var(--leading-relaxed); } .lb-expanded-info .markets-list { list-style: none; margin-bottom: var(--space-3); } .lb-expanded-info .markets-list li { padding: var(--space-1) 0; font-size: var(--text-sm); color: var(--accent-cobalt); cursor: pointer; } .lb-expanded-info .markets-list li:hover { text-decoration: underline; } /* ============================================ MARKET DETAIL ============================================ */ .market-detail-header { margin-bottom: var(--space-6); } .market-detail-header .type-badge { margin-bottom: var(--space-3); } .market-detail-question { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: var(--leading-tight); margin-bottom: var(--space-4); } .market-detail-meta { display: flex; gap: var(--space-6); font-size: var(--text-sm); color: var(--text-secondary); flex-wrap: wrap; } .market-detail-meta .meta-item { display: flex; align-items: center; gap: var(--space-1); } .market-detail-meta .meta-value { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); } .market-detail-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-6); } /* Price Chart */ .price-chart-container { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); } .price-chart-container h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-3); } .price-chart { width: 100%; height: 200px; } /* Resolution criteria */ .resolution-box { background: var(--bg-surface); border: 1px solid var(--border-default); border-left: 3px solid var(--accent-cobalt); border-radius: var(--radius-lg); padding: var(--space-4); } .resolution-box h4 { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-2); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .resolution-box p { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); } /* ============================================ ORDER PANEL ============================================ */ .order-panel { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-5); position: sticky; top: calc(var(--topbar-height) + var(--space-4)); } .side-selector { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-5); } .side-btn { padding: var(--space-3); border-radius: var(--radius-md); font-weight: 700; font-size: var(--text-base); text-align: center; transition: all var(--duration-fast) var(--ease-default); background: var(--bg-surface-hover); color: var(--text-secondary); } .side-btn.yes.active { background: var(--gain); color: #fff; } .side-btn.no.active { background: var(--loss); color: #fff; } .side-btn:hover:not(.active) { background: var(--bg-surface-raised); color: var(--text-primary); } .amount-input-group { margin-bottom: var(--space-4); } .amount-input-group label { font-size: var(--text-sm); color: var(--text-secondary); display: block; margin-bottom: var(--space-2); } .amount-input-wrapper { display: flex; align-items: center; gap: var(--space-2); } .amount-input { flex: 1; text-align: center; font-size: var(--text-xl); font-family: var(--font-mono); font-weight: 700; padding: var(--space-3); background: var(--bg-surface-raised); border: 1px solid var(--border-emphasis); border-radius: var(--radius-md); color: var(--text-primary); } .amount-input:focus { border-color: var(--accent-cobalt); } .amount-stepper { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--bg-surface-hover); color: var(--text-secondary); font-size: var(--text-lg); font-weight: 700; transition: all var(--duration-fast); } .amount-stepper:hover { background: var(--bg-surface-raised); color: var(--text-primary); } .quick-amounts { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; } .quick-amount-btn { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-sm); font-family: var(--font-mono); background: var(--bg-surface-hover); color: var(--text-secondary); transition: all var(--duration-fast); } .quick-amount-btn:hover { background: var(--bg-surface-raised); color: var(--text-primary); } .quick-amount-btn.active { background: var(--accent-cobalt); color: #fff; } .order-calculator { margin: var(--space-4) 0; border-top: 1px solid var(--border-default); padding-top: var(--space-4); } .calc-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-1) 0; } .calc-label { font-size: var(--text-sm); color: var(--text-secondary); } .calc-value { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); } .calc-value.highlight-gain { color: var(--gain); } .calc-value.highlight-loss { color: var(--loss); } .order-submit-btn { width: 100%; padding: var(--space-3); border-radius: var(--radius-md); font-weight: 700; font-size: var(--text-base); color: #fff; transition: all var(--duration-fast); } .order-submit-btn.buy-yes { background: var(--gain); } .order-submit-btn.buy-no { background: var(--loss); } .order-submit-btn:hover { filter: brightness(1.1); } .order-submit-btn:active { transform: scale(0.98); } .order-submit-btn:disabled { background: var(--bg-surface-hover); color: var(--text-muted); cursor: not-allowed; filter: none; } .order-balance { text-align: center; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); } .order-balance span { font-family: var(--font-mono); color: var(--text-secondary); } /* ============================================ PORTFOLIO ============================================ */ .portfolio-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .stat-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4); } .stat-card .stat-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); } .stat-card .stat-value { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700; } .stat-card .stat-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); } .portfolio-tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-default); } .portfolio-tab { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); border-bottom: 2px solid transparent; transition: all var(--duration-fast); } .portfolio-tab.active { color: var(--accent-cobalt); border-bottom-color: var(--accent-cobalt); } .portfolio-tab:hover:not(.active) { color: var(--text-primary); } .positions-table { width: 100%; border-collapse: collapse; } .positions-table th { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-default); font-weight: 600; } .positions-table td { padding: var(--space-3); border-bottom: 1px solid var(--border-default); font-size: var(--text-sm); } .positions-table tr:hover { background: var(--bg-surface-hover); } .positions-table .mono { font-family: var(--font-mono); font-weight: 600; } .side-badge { display: inline-flex; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; } .side-badge.yes { background: var(--gain-bg); color: var(--gain); } .side-badge.no { background: var(--loss-bg); color: var(--loss); } .sell-btn { padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 600; border: 1px solid var(--border-emphasis); color: var(--text-secondary); background: transparent; transition: all var(--duration-fast); } .sell-btn:hover { border-color: var(--loss); color: var(--loss); } /* ============================================ TRADE CONFIRMATION MODAL ============================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(11, 14, 20, 0.7); z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--duration-normal) var(--ease-default); } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal { background: var(--bg-surface); border: 1px solid var(--border-emphasis); border-radius: var(--radius-xl); padding: var(--space-6); max-width: 420px; width: 90%; transform: translateY(8px); transition: transform var(--duration-slow) var(--ease-out); } .modal-overlay.open .modal { transform: translateY(0); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); } .modal-header h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; } .modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-muted); font-size: var(--text-lg); } .modal-close:hover { background: var(--bg-surface-hover); color: var(--text-primary); } .modal-details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; padding: var(--space-4) 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); } .modal-details .detail-label { font-size: var(--text-sm); color: var(--text-secondary); } .modal-details .detail-value { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; text-align: right; } .modal-disclaimer { font-size: var(--text-xs); color: var(--text-muted); font-style: italic; margin-bottom: var(--space-4); text-align: center; } .modal-actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; } .modal-confirm-btn { width: 100%; padding: var(--space-3); border-radius: var(--radius-md); font-weight: 700; font-size: var(--text-base); color: #fff; } .modal-confirm-btn.yes { background: var(--gain); } .modal-confirm-btn.no { background: var(--loss); } .modal-confirm-btn:hover { filter: brightness(1.1); } .modal-cancel-btn { font-size: var(--text-sm); color: var(--text-secondary); padding: var(--space-2); } .modal-cancel-btn:hover { color: var(--text-primary); } /* ============================================ TOAST ============================================ */ .toast-container { position: fixed; top: calc(var(--topbar-height) + var(--space-4)); right: var(--space-4); z-index: 300; display: flex; flex-direction: column; gap: var(--space-2); } .toast { background: var(--bg-surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); max-width: 360px; font-size: var(--text-sm); animation: slideInRight 0.3s var(--ease-out); display: flex; align-items: center; gap: var(--space-3); } .toast.success { border-left: 3px solid var(--gain); } .toast.error { border-left: 3px solid var(--loss); } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ============================================ PAGE: HIDDEN / VISIBLE ============================================ */ .page { display: none; } .page.active { display: block; } /* ============================================ MARKET BROWSER FILTERS ============================================ */ .market-browser-filters { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; } .filter-pill { padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500; background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default); transition: all var(--duration-fast); } .filter-pill:hover { border-color: var(--border-emphasis); color: var(--text-primary); } .filter-pill.active { background: var(--accent-cobalt); color: #fff; border-color: var(--accent-cobalt); } .sort-dropdown { margin-left: auto; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-family: var(--font-body); } /* ============================================ FEATURED MARKET ============================================ */ .featured-market { background: linear-gradient(135deg, var(--accent-cobalt-dim) 0%, var(--bg-surface) 100%); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-6); margin-bottom: var(--space-6); cursor: pointer; transition: all var(--duration-normal); } .featured-market:hover { border-color: var(--border-emphasis); } .featured-market .market-question { font-size: var(--text-xl); -webkit-line-clamp: unset; } /* ============================================ BACK BUTTON ============================================ */ .back-btn { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4); padding: var(--space-2) 0; } .back-btn:hover { color: var(--text-primary); } /* ============================================ FOOTER ============================================ */ .footer { margin-top: auto; border-top: 1px solid var(--border-default); padding: var(--space-6) var(--space-4); text-align: center; font-size: var(--text-xs); color: var(--text-muted); } .footer a { color: var(--text-secondary); } /* ============================================ EMPTY STATE ============================================ */ .empty-state { text-align: center; padding: var(--space-12) var(--space-4); color: var(--text-muted); } .empty-state h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-2); color: var(--text-secondary); } /* ============================================ RADAR CHART SVG ============================================ */ .radar-chart-container { display: flex; justify-content: center; } /* ============================================ ANIMATIONS ============================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes glowGain { 0% { box-shadow: 0 0 0px var(--gain); } 50% { box-shadow: 0 0 12px var(--gain); } 100% { box-shadow: 0 0 0px var(--gain); } } @keyframes glowLoss { 0% { box-shadow: 0 0 0px var(--loss); } 50% { box-shadow: 0 0 12px var(--loss); } 100% { box-shadow: 0 0 0px var(--loss); } } .animate-fade-in { animation: fadeIn 0.3s var(--ease-out); } .animate-slide-up { animation: slideUp 0.3s var(--ease-out); } .animate-glow-gain { animation: glowGain 0.8s ease-out; } .animate-glow-loss { animation: glowLoss 0.8s ease-out; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { .market-detail-layout { grid-template-columns: 1fr; } .order-panel { position: static; } .leaderboard-row { grid-template-columns: 30px 1fr 70px 80px 32px; } .lb-dimensions { display: none; } } @media (max-width: 768px) { .topbar-nav { display: none; } .hero-headline { font-size: var(--text-xl); } .hero-banner { padding: var(--space-5); } .markets-grid { grid-template-columns: 1fr; } .movers-row { grid-template-columns: 1fr; } .leaderboard-row { grid-template-columns: 30px 1fr 60px 70px; } .lb-tier { display: none; } .lb-expanded { grid-template-columns: 1fr; padding-left: var(--space-4); } .portfolio-stats { grid-template-columns: repeat(2, 1fr); } .market-detail-meta { flex-direction: column; gap: var(--space-2); } .dashboard-bottom-grid { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { .content-wrapper { padding: 0 var(--space-3); padding-top: calc(var(--topbar-height) + var(--space-3)); } .stat-card .stat-value { font-size: var(--text-xl); } .market-detail-question { font-size: var(--text-xl); } } /* Mobile bottom nav */ .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottombar-height); background: var(--bg-surface); border-top: 1px solid var(--border-default); z-index: 100; } @media (max-width: 768px) { .mobile-nav { display: flex; justify-content: space-around; align-items: center; } .content-wrapper { padding-bottom: calc(var(--bottombar-height) + var(--space-4)); } } .mobile-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--text-muted); padding: var(--space-2); } .mobile-nav-item.active { color: var(--accent-cobalt); } .mobile-nav-item svg { width: 20px; height: 20px; }