/* ============================================================================ MAERMIN — Modern dark-fintech UI Global base + shared component styles. Per-component colors come from the JS theme tokens (currentTheme.*); the values here match the dark theme so CSS-only chrome (scrollbars, palette, toasts, modals) stays consistent. ========================================================================== */ :root { --gold: #f5a524; --gold-soft: rgba(245, 165, 36, 0.12); --bg: #080b11; --surface: #10151f; --surface-2: #161c28; --border: rgba(255, 255, 255, 0.08); --text: #e9edf4; --text-dim: #8b94a7; --radius: 14px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'tnum'; overflow: auto; height: 100vh; /* Redesign: soft radial wash on near-black instead of a flat fill */ background: radial-gradient(1200px 720px at 50% -16%, #19212f 0%, #0c111a 54%, #080b11 100%) fixed, var(--bg); color: var(--text); letter-spacing: -0.01em; } /* Redesign type system: Space Grotesk for headings & key figures, JetBrains Mono for monospace. Body text inherits Hanken Grotesk from . */ h1, h2, h3, h4, .metric-value, .greek-value, .stat-value, .kpi-value { font-family: 'Space Grotesk', 'Hanken Grotesk', -apple-system, sans-serif; letter-spacing: -0.02em; } /* Tabular numbers everywhere figures appear keeps columns aligned */ table, input, .metric-value, .greek-value, kbd { font-variant-numeric: tabular-nums; } /* ---- Selection ---------------------------------------------------------- */ ::selection { background: rgba(245, 165, 36, 0.30); color: #fff; } /* ---- Custom scrollbars -------------------------------------------------- */ * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.26); background-clip: content-box; } /* ---- Accessible focus ring --------------------------------------------- */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; } button, a, input, select, textarea { outline: none; } /* Buttons get a subtle, consistent press/hover feel without overriding the per-component inline colors. */ button { transition: transform 0.08s ease, filter 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } button:active { transform: translateY(0.5px); } /* ============================================================================ Loading screen ========================================================================== */ #loading { position: fixed; inset: 0; background: radial-gradient(800px 500px at 50% -10%, rgba(245,165,36,0.10) 0%, transparent 60%), radial-gradient(1100px 700px at 50% 110%, #11161f 0%, #080b11 70%); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; color: #fff; transition: opacity 0.5s ease-out; } #loading.hidden { opacity: 0; pointer-events: none; } #loading h1 { font-size: 4rem; margin-bottom: 0.5rem; font-weight: 800; letter-spacing: -0.05em; background: linear-gradient(135deg, #ffd479 0%, #f5a524 55%, #d97706 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: pulse 2.4s ease-in-out infinite; } #loading .subtitle { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 2rem; letter-spacing: 0.18em; text-transform: uppercase; } #loading .version-badge { background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(245, 165, 36, 0.30); padding: 0.35rem 0.9rem; border-radius: 2rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 1rem; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .loader { margin-top: 2rem; width: 44px; height: 44px; border: 3px solid rgba(255, 255, 255, 0.10); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #module-status { margin-top: 1.75rem; font-size: 0.8rem; color: var(--text-dim); min-height: 1.5rem; text-align: center; letter-spacing: 0.02em; } /* ============================================================================ Command Palette ========================================================================== */ .command-palette-overlay { position: fixed; inset: 0; background: rgba(4, 6, 10, 0.62); display: flex; justify-content: center; padding-top: 14vh; z-index: 10000; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: overlayIn 0.16s ease-out; } @keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } } .command-palette { width: 620px; max-width: 92vw; height: fit-content; background: rgba(20, 26, 37, 0.96); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 32px 70px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255,255,255,0.02) inset; overflow: hidden; max-height: 64vh; display: flex; flex-direction: column; animation: paletteIn 0.18s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes paletteIn { from { opacity: 0; transform: translateY(-8px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .command-palette-input { width: 100%; padding: 1.1rem 1.4rem; font-size: 1.05rem; background: transparent; border: none; color: var(--text); outline: none; border-bottom: 1px solid var(--border); letter-spacing: -0.01em; } .command-palette-input::placeholder { color: var(--text-dim); } .command-palette-results { overflow-y: auto; flex: 1; padding: 0.4rem; } .command-result { padding: 0.6rem 0.85rem; display: flex; align-items: center; gap: 0.85rem; cursor: pointer; border-radius: 10px; transition: background 0.1s; } .command-result:hover, .command-result.selected { background: rgba(255, 255, 255, 0.06); } .command-result.selected { box-shadow: inset 2px 0 0 var(--gold); } .command-result-icon { width: 30px; height: 30px; background: var(--gold-soft); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; } .command-result-content { flex: 1; min-width: 0; } .command-result-label { color: var(--text); font-weight: 500; } .command-result-description { color: var(--text-dim); font-size: 0.82rem; } .command-result-shortcut, .command-palette-footer kbd, .shortcut-keys kbd { color: var(--text-dim); font-size: 0.72rem; padding: 0.18rem 0.45rem; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); border-radius: 6px; font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace; } .command-palette-footer { padding: 0.7rem 1.4rem; border-top: 1px solid var(--border); display: flex; gap: 1.4rem; font-size: 0.72rem; color: var(--text-dim); } .command-palette-footer kbd { margin: 0 0.2rem; } /* ============================================================================ Toasts ========================================================================== */ .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; z-index: 10002; } .toast { padding: 0.9rem 1.25rem; background: rgba(22, 28, 40, 0.97); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.55); color: var(--text); display: flex; align-items: center; gap: 0.75rem; font-size: 0.88rem; backdrop-filter: blur(6px); animation: slideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .toast.success { border-left: 3px solid #34d399; } .toast.error { border-left: 3px solid #f87171; } .toast.warning { border-left: 3px solid #fb923c; } .toast.info { border-left: 3px solid var(--gold); } @keyframes slideIn { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ============================================================================ Analysis cards / metrics / tables (shared chrome) ========================================================================== */ .analysis-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1rem; } .analysis-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .analysis-card-title { font-size: 1.05rem; font-weight: 650; color: var(--text); letter-spacing: -0.01em; } .analysis-badge { padding: 0.25rem 0.7rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 600; } .analysis-badge.positive { background: rgba(52, 211, 153, 0.16); color: #34d399; } .analysis-badge.negative { background: rgba(248, 113, 113, 0.16); color: #f87171; } .analysis-badge.neutral { background: rgba(139, 148, 167, 0.16); color: #8b94a7; } .analysis-badge.warning { background: rgba(251, 146, 60, 0.16); color: #fb923c; } .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .metric-item { text-align: center; padding: 1.1rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; } .metric-value { font-size: 1.5rem; font-weight: 750; color: var(--text); letter-spacing: -0.02em; } .metric-label { font-size: 0.72rem; color: var(--text-dim); margin-top: 0.3rem; text-transform: uppercase; letter-spacing: 0.06em; } /* Tab bars */ .tab-bar, .workspace-tabs { display: flex; gap: 0.25rem; padding: 0.3rem; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 1rem; flex-wrap: wrap; } .tab-btn, .workspace-tab { padding: 0.5rem 1rem; background: transparent; border: none; color: var(--text-dim); cursor: pointer; border-radius: 9px; font-size: 0.86rem; font-weight: 500; transition: all 0.16s; } .tab-btn:hover, .workspace-tab:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); } .tab-btn.active, .workspace-tab.active { background: var(--gold-soft); color: var(--gold); } /* Data tables */ .data-table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td { padding: 0.8rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border); } .data-table th { color: var(--text-dim); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; } .data-table td { color: var(--text); } .data-table tbody tr { transition: background 0.12s; } .data-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); } /* Progress bars */ .progress-bar { height: 8px; background: rgba(255, 255, 255, 0.08); border-radius: 6px; overflow: hidden; } .progress-bar-fill { height: 100%; border-radius: 6px; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .progress-bar-fill.green { background: #34d399; } .progress-bar-fill.red { background: #f87171; } .progress-bar-fill.blue { background: #60a5fa; } .progress-bar-fill.purple { background: var(--gold); } /* Section nav (pills) */ .section-nav { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .section-nav-btn { padding: 0.55rem 1.1rem; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; border-radius: 10px; font-size: 0.85rem; font-weight: 500; transition: all 0.16s; } .section-nav-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); } .section-nav-btn.active { background: var(--gold); border-color: var(--gold); color: #13110a; font-weight: 600; } /* Greeks */ .greek-display { display: flex; gap: 1.5rem; flex-wrap: wrap; } .greek-item { text-align: center; } .greek-symbol { font-size: 1.5rem; font-weight: bold; color: var(--gold); } .greek-value { font-size: 1.125rem; color: var(--text); } .greek-label { font-size: 0.72rem; color: var(--text-dim); } /* Correlation heatmap */ .correlation-heatmap { display: grid; gap: 1px; background: var(--border); border-radius: 10px; overflow: hidden; } .correlation-cell { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: transform 0.1s; } .correlation-cell:hover { transform: scale(1.1); z-index: 1; } .correlation-label { background: var(--surface-2); color: var(--text); font-weight: 600; } /* Monte Carlo chart area */ .monte-carlo-chart { position: relative; height: 400px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } /* Scenario cards */ .scenario-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; cursor: pointer; transition: all 0.18s; } .scenario-card:hover { background: var(--surface-2); border-color: rgba(245, 165, 36, 0.35); transform: translateY(-1px); } .scenario-card.selected { border-color: var(--gold); background: var(--gold-soft); } .scenario-impact { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .scenario-impact-badge { padding: 0.25rem 0.5rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; } .scenario-impact-badge.negative { background: rgba(248, 113, 113, 0.18); color: #f87171; } .scenario-impact-badge.positive { background: rgba(52, 211, 153, 0.18); color: #34d399; } /* Import dropzone */ .import-dropzone { border: 2px dashed var(--border); border-radius: 14px; padding: 3rem; text-align: center; cursor: pointer; transition: all 0.18s; } .import-dropzone:hover, .import-dropzone.dragover { border-color: var(--gold); background: var(--gold-soft); } /* Shortcuts modal */ .shortcuts-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 700px; max-width: 92vw; max-height: 80vh; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 32px 70px -20px rgba(0, 0, 0, 0.7); overflow: hidden; z-index: 10001; } .shortcuts-modal-header { padding: 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .shortcuts-modal-header h2 { color: var(--text); font-size: 1.2rem; font-weight: 700; } .shortcuts-modal-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1.4rem; padding: 0.4rem; border-radius: 8px; } .shortcuts-modal-close:hover { background: rgba(255,255,255,0.06); color: var(--text); } .shortcuts-modal-content { padding: 1.5rem; overflow-y: auto; max-height: 60vh; } .shortcuts-category { margin-bottom: 1.5rem; } .shortcuts-category h3 { color: var(--gold); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; } .shortcut-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; color: var(--text); } .shortcut-keys { display: flex; gap: 0.25rem; } /* Subtle entrance used by main views */ .maermin-main > * { animation: viewIn 0.22s ease-out; } @keyframes viewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================================ PWA: installed (standalone) safe-area + mobile-first safety net Full mobile redesign is Epic 10; this keeps the CSS-defined chrome usable on phones and respects notches when launched as an installed app. ========================================================================== */ @media (display-mode: standalone) { body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } } @media (max-width: 640px) { /* Section tabs scroll horizontally instead of wrapping into tall stacks. */ .section-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 1rem; padding-bottom: 4px; } .section-nav::-webkit-scrollbar { display: none; } .section-nav-btn { flex: 0 0 auto; white-space: nowrap; } /* KPI tiles go single/!double column rather than cramming to 150px. */ .metric-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem; } }