/* ============================================================ InvestFlow — Global Dark Theme v2.0 Premium Obsidian/Emerald/Gold Design System Override Include LAST in to override page-level styles ============================================================ */ /* ── CSS Variable Tokens ────────────────────────────────────── */ :root { --background: #ffffff; --foreground: #0a0a0a; --card: #ffffff; --card-foreground: #0a0a0a; --popover: #ffffff; --popover-foreground: #0a0a0a; --primary: #18181b; --primary-foreground: #fafafa; --secondary: #f4f4f5; --secondary-foreground: #18181b; --muted: #f4f4f5; --muted-foreground: #71717a; --accent: #f4f4f5; --accent-foreground: #18181b; --destructive: #ef4444; --destructive-foreground: #fafafa; --border: #e4e4e7; --input: #d4d4d8; --ring: #d4d4d8; --radius: 0.625rem; --chart-1: #ea580c; --chart-2: #0d9488; --chart-3: #164e63; --chart-4: #fbbf24; --chart-5: #f59e0b; /* Glowing Effect Defaults */ --start: 0; --active: 0; --spread: 40; } .dark, :root { /* Prioritize dark for this app */ --background: #0a0a0a; --foreground: #fafafa; --card: #0a0a0a; --card-foreground: #fafafa; --popover: #0a0a0a; --popover-foreground: #fafafa; --primary: #00E676; /* Overriding with Electric Emerald */ --primary-foreground: #18181b; --secondary: #27272a; --secondary-foreground: #fafafa; --muted: #18181b; --muted-foreground: #a1a1aa; --accent: #18181b; --accent-foreground: #fafafa; --destructive: #7f1d1d; --destructive-foreground: #fafafa; --border: #27272a; --input: #27272a; --ring: #52525b; } /* ── Body / Background ──────────────────────────────────────── */ html, body { background: var(--background) !important; color: var(--foreground) !important; font-family: var(--font-sans) !important; } /* Mouse-follow emerald glow */ body::after { content: ''; position: fixed; inset: 0; background: radial-gradient( 600px circle at var(--mouse-x) var(--mouse-y), rgba(0, 230, 118, 0.04), transparent 80% ); pointer-events: none; z-index: 0; } /* ── Header / Page Banner ───────────────────────────────────── */ .header { background: linear-gradient(160deg, #070B13 0%, #0B0F17 40%, #080C14 100%) !important; border: 1px solid rgba(51, 65, 85, 0.65) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; color: #F8FAFC !important; position: relative; overflow: hidden; } /* Gold → Emerald top shimmer */ .header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,0.55), rgba(0,230,118,0.35), transparent); } .header h1, .header p, .header-content h1, .header-content p { color: #F8FAFC !important; font-family: 'Manrope', 'Inter', sans-serif !important; } /* Page-header bar (transparent) */ .page-header { background: transparent !important; } /* ── Cards / Widgets ────────────────────────────────────────── */ .glowing-effect-container { position: relative; z-index: 1; } .glowing-effect-container::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; background: radial-gradient(circle at 40% 40%, #D4AF37 5%, transparent 30%), radial-gradient(circle at 60% 60%, #00E676 10%, transparent 40%), repeating-conic-gradient( from 236.84deg at 50% 50%, #F87171 0%, #D4AF37 20%, #00E676 40%, #3B82F6 60%, #F87171 100% ); background-attachment: fixed; mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff); mask-composite: exclude; -webkit-mask-composite: destination-out; opacity: var(--active); transition: opacity 0.4s ease; pointer-events: none; z-index: -1; filter: brightness(1.2) contrast(1.1); } /* Specific mask-image for the shimmer effect */ .glowing-effect-container::after { -webkit-mask-image: linear-gradient(#0000, #0000), conic-gradient(from calc((var(--start) - var(--spread)) * 1deg), transparent 0deg, #fff, transparent calc(var(--spread) * 2deg)); mask-image: linear-gradient(#0000, #0000), conic-gradient(from calc((var(--start) - var(--spread)) * 1deg), transparent 0deg, #fff, transparent calc(var(--spread) * 2deg)); -webkit-mask-composite: source-in, source-over; mask-composite: intersect; } .widget, .card, .section-wrap, .breakout-card { background: rgba(30, 41, 59, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-left: 2px solid rgba(212, 175, 55, 0.25) !important; /* Subtle Gold Border to match dashboard */ backdrop-filter: blur(16px) saturate(1.4) !important; -webkit-backdrop-filter: blur(16px) saturate(1.4) !important; color: #F8FAFC !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.50) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; border-radius: 12px; overflow: hidden; margin-bottom: 20px; } .widget:hover, .section-wrap:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(0,230,118,0.15) !important; } /* Econ cards */ .econ-card { background: rgba(15, 23, 42, 0.75) !important; border: 1px solid rgba(51, 65, 85, 0.55) !important; color: var(--text-main) !important; } .econ-card:hover { background: rgba(30, 41, 59, 0.80) !important; border-color: rgba(0, 230, 118, 0.28) !important; box-shadow: 0 4px 20px rgba(0, 230, 118, 0.08) !important; } .econ-card-val { color: #F8FAFC !important; font-family: 'JetBrains Mono', monospace !important; } .econ-card-lbl { color: var(--text-muted) !important; font-family: 'Inter', sans-serif !important; } /* ── Widget Internal Elements ───────────────────────────────── */ .widget-header, .widget-title { border-bottom-color: rgba(51, 65, 85, 0.50) !important; color: var(--text-main) !important; font-family: 'Manrope', 'Inter', sans-serif !important; font-weight: 700 !important; } .widget-title span { color: var(--text-muted) !important; } .widget-refresh { color: var(--text-muted) !important; } /* Tables inside widgets */ table { color: var(--text-main) !important; } th { background: rgba(9, 13, 20, 0.90) !important; color: #94A3B8 !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 0.70rem !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; } td { border-color: rgba(51, 65, 85, 0.25) !important; font-family: 'JetBrains Mono', monospace !important; font-size: 0.82rem !important; } tr:hover td, tr:nth-child(even) { background: rgba(0,230,118,0.02) !important; } /* ── Section Title ──────────────────────────────────────────── */ .section-title { color: #00E676 !important; font-family: 'Manrope', 'Inter', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.01em !important; } /* ── Back Button (fixed, top-left) ─────────────────────────── */ .back-btn { position: fixed !important; top: max(12px, env(safe-area-inset-top, 0px)) !important; left: max(12px, env(safe-area-inset-left, 0px)) !important; z-index: 10050 !important; padding: 8px 18px !important; background: linear-gradient(135deg, rgba(212,175,55,0.90), rgba(234,197,92,0.85)) !important; border: none !important; color: #0B0F17 !important; border-radius: 8px !important; cursor: pointer !important; font-size: 0.80rem !important; font-weight: 700 !important; font-family: 'Manrope', 'Inter', sans-serif !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; transition: all 0.2s !important; white-space: nowrap !important; box-shadow: 0 4px 14px rgba(212, 175, 55, 0.30) !important; letter-spacing: 0.02em !important; } .back-btn:hover { filter: brightness(1.08) !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(212, 175, 55, 0.45) !important; } /* Padding offset for fixed back-btn */ .header { padding-top: 48px !important; } /* ── Inputs / Selects ───────────────────────────────────────── */ input, select, textarea { background: rgba(15, 23, 42, 0.80) !important; border-color: rgba(51, 65, 85, 0.70) !important; color: var(--text-main) !important; font-family: 'Inter', sans-serif !important; } input::placeholder { color: #475569 !important; } input:focus, select:focus, textarea:focus { border-color: rgba(0, 230, 118, 0.45) !important; box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.08) !important; outline: none !important; } /* ── Text ───────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { color: #F8FAFC !important; font-family: 'Manrope', 'Inter', sans-serif !important; } p { color: var(--text-main) !important; } label { color: var(--text-muted) !important; } /* ── Dividers ───────────────────────────────────────────────── */ hr { border-color: rgba(51, 65, 85, 0.40) !important; } /* ── Scrollbar ──────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: rgba(9, 13, 20, 0.90); } ::-webkit-scrollbar-thumb { background: rgba(51, 65, 85, 0.70); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 230, 118, 0.40); } /* ── Selection & Focus ──────────────────────────────────────── */ ::selection { background: rgba(0, 230, 118, 0.20) !important; color: #F8FAFC !important; } :focus-visible { outline: 2px solid rgba(0, 230, 118, 0.45) !important; outline-offset: 2px !important; } /* ── Mobile Fixes ───────────────────────────────────────────── */ @media (max-width: 480px) { .back-btn { top: max(8px, env(safe-area-inset-top, 0px)) !important; left: max(8px, env(safe-area-inset-left, 0px)) !important; padding: 6px 12px !important; font-size: 0.74rem !important; } .header { padding-top: 44px !important; } .widget, .section-wrap, .econ-card, .breakout-card { overflow-x: hidden !important; word-break: break-word !important; } table { font-size: 0.74rem !important; } .widget-content, .section-wrap > div { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } } /* ── Mouse Glow Script Hook ─────────────────────────────────── */ /* JS: document.addEventListener('mousemove', e => { document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px'); document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px'); }); */