/* ═══════════════════════════════════════════════════════════════ Capital Sterling — UNIFIED DESIGN SYSTEM (dashboard) Base: Terminal aesthetic — Bloomberg meets crypto exchange Light pastel default + optional dark mode (data-theme on ) Fonts: JetBrains Mono (data), DM Sans (UI) ═══════════════════════════════════════════════════════════════ */ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap"); @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"); /* ── DESIGN TOKENS ── Light pastel is the DEFAULT; dark mode is an optional switch. The theme is controlled by a data-theme attribute on . */ :root, html[data-theme="light"] { --bg: #f4f7fb; --bg1: #ffffff; --bg2: #ffffff; --bg3: #e9eef7; --bg4: #dbe4f2; --border: rgba(24,54,104,0.08); --border2: rgba(24,54,104,0.15); --teal: #0e9c94; --teal-dim: rgba(14,156,148,0.10); --teal-glow: rgba(14,156,148,0.18); --green: #0aa76a; --green-dim: rgba(10,167,106,0.10); --red: #e5484d; --red-dim: rgba(229,72,77,0.10); --amber: #d08a00; --text: #16223c; --text2: #5b6b88; --text3: #8391ac; --muted: var(--text2); --mono: 'JetBrains Mono', monospace; --sans: 'DM Sans', sans-serif; --r: 10px; --r-lg: 14px; --shadow: 0 4px 20px rgba(24,54,104,0.08); --shadow-lg: 0 10px 40px rgba(24,54,104,0.13); } html[data-theme="dark"] { --bg: #0b0e14; --bg1: #0f1319; --bg2: #141923; --bg3: #1a2030; --bg4: #202840; --border: rgba(255,255,255,0.06); --border2: rgba(255,255,255,0.11); --teal: #00e5cc; --teal-dim: rgba(0,229,204,0.10); --teal-glow: rgba(0,229,204,0.20); --green: #00d084; --green-dim: rgba(0,208,132,0.12); --red: #ff4757; --red-dim: rgba(255,71,87,0.12); --amber: #f0a500; --text: #e8eaf0; --text2: #8b95a8; --text3: #4a5568; --muted: var(--text2); --shadow: 0 4px 24px rgba(0,0,0,0.45); --shadow-lg: 0 8px 40px rgba(0,0,0,0.55); } /* Smooth theme transition on surfaces */ body, .interface, .stat-card, footer, .modal, .method-card, .field-input, .menu-toggle, .scrollable-table-container th { transition: background-color .35s ease, color .35s ease, border-color .35s ease; } /* ── Dashboard theme toggle (sidebar) ── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bg3); border: 1px solid var(--border); color: var(--text2); cursor: pointer; margin-left: auto; flex-shrink: 0; transition: color .2s, border-color .2s, transform .25s, background .2s; } .theme-toggle:hover { color: var(--teal); border-color: var(--teal); transform: rotate(15deg); } .theme-toggle i { font-size: .95rem; line-height: 1; } [data-theme="light"] .theme-ico-light { display: inline; } [data-theme="light"] .theme-ico-dark { display: none; } [data-theme="dark"] .theme-ico-light { display: none; } [data-theme="dark"] .theme-ico-dark { display: inline; } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; text-decoration: none; border: none; outline: none; scroll-behavior: smooth; } html { font-size: 15px; -webkit-font-smoothing: antialiased; } body { font-family: var(--sans); background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; } /* Scanline texture */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.022) 2px, rgba(0,0,0,0.022) 4px ); } a { color: var(--text); text-decoration: none; } /* ══════════════════════════════════════════ PAGE SHELL ══════════════════════════════════════════ */ .user_main { display: flex; flex-direction: row; min-height: 100vh; position: relative; z-index: 1; align-items: stretch; } /* ══════════════════════════════════════════ SIDEBAR ══════════════════════════════════════════ */ .interface { width: 215px; min-width: 215px; height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; background: var(--bg1); border-right: 1px solid var(--border); padding: 0; overflow-y: auto; scrollbar-width: none; z-index: 100; transition: transform 0.28s cubic-bezier(.4,0,.2,1); } .interface::-webkit-scrollbar { display: none; } /* teal left-edge strip */ .interface::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--teal) 0%, transparent 70%); opacity: 0.4; pointer-events: none; } /* ── Sidebar brand strip ── */ .sidebar-brand { display: flex; align-items: center; gap: 0.55rem; padding: 1.25rem 1.1rem 1rem; border-bottom: 1px solid var(--border); } .sidebar-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px var(--teal); animation: pulse-dot 2s infinite; flex-shrink: 0; } @keyframes pulse-dot { 0%,100% { opacity:1; box-shadow: 0 0 8px var(--teal); } 50% { opacity:.5; box-shadow: 0 0 4px var(--teal); } } .sidebar-brand-text { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--text2); letter-spacing: 0.12em; text-transform: uppercase; } /* ── Sidebar top section ── */ .interface-top { display: flex; flex-direction: column; padding: 0.9rem 0.85rem 0.5rem; flex: 1; gap: 0; } .interface-top h3 { font-family: var(--mono); font-size: 0.72rem; color: var(--text2); letter-spacing: 0.05em; text-transform: uppercase; padding-bottom: 0.75rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--border); } .interface-top h3 span { color: var(--teal); font-weight: 700; } .highlight_text_green { color: var(--teal); font-weight: 700; } /* Deposit button */ .deposit_btn { width: 100%; padding: 0.6rem; background: var(--teal-dim); color: var(--teal); border: 1px solid rgba(0,229,204,0.22); border-radius: var(--r); font-family: var(--mono); font-size: 0.71rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; margin: 0.55rem 0 0.85rem; transition: all 0.18s ease; text-align: center; display: block; } .deposit_btn:hover { background: rgba(0,229,204,0.17); box-shadow: 0 0 18px rgba(0,229,204,0.12); } /* Nav lists */ .interface-top ul, .interface-bottom ul { list-style: none; display: flex; flex-direction: column; gap: 0.1rem; } .interface-top li, .interface-bottom li { display: flex; align-items: center; gap: 0.65rem; padding: 0.52rem 0.6rem; border-radius: 8px; cursor: pointer; transition: background 0.14s ease; color: var(--text2); font-size: 0.83rem; font-weight: 400; } .interface-top li:hover, .interface-bottom li:hover { background: var(--bg3); color: var(--text); } .interface-top li i, .interface-bottom li i { font-size: 0.95rem; color: var(--text3); transition: color 0.14s; width: 17px; flex-shrink: 0; } .interface-top li:hover i, .interface-bottom li:hover i { color: var(--teal); } .interface-top li a, .interface-bottom li a { color: inherit; font-size: inherit; line-height: 1; } /* ── Sidebar bottom section ── */ .interface-bottom { padding: 0.6rem 0.85rem 1.1rem; border-top: 1px solid var(--border); margin-top: auto; } /* ══════════════════════════════════════════ MAIN CONTENT AREA ══════════════════════════════════════════ */ .overview { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; z-index: 1; } /* Footer inside .overview — margin-top auto pushes it to the bottom */ .overview > footer { margin-top: auto; } /* ══════════════════════════════════════════ MOBILE HAMBURGER ══════════════════════════════════════════ */ .menu-toggle { display: none; position: fixed; top: 0.85rem; left: 0.85rem; z-index: 1200; cursor: pointer; background: var(--bg2); border: 1px solid var(--border2); border-radius: 8px; padding: 0.42rem 0.5rem; flex-direction: column; gap: 4px; } .menu-toggle .bar { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.22s ease; } /* ══════════════════════════════════════════ SHARED CARDS ══════════════════════════════════════════ */ .stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.35rem 1.5rem; box-shadow: var(--shadow); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: rgba(0,229,204,0.10); } /* ══════════════════════════════════════════ SECTION TITLE ══════════════════════════════════════════ */ .section-title { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text3); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .section-title::before { content: ''; display: inline-block; width: 3px; height: 12px; background: var(--teal); border-radius: 2px; box-shadow: 0 0 8px var(--teal); } /* ══════════════════════════════════════════ LOADER ══════════════════════════════════════════ */ .loader-container { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 1; transition: opacity 0.8s ease; } .welcome-text { text-align: center; font-family: var(--mono); font-size: 1.1rem; color: var(--text2); animation: fadeIn 0.6s ease forwards; } .welcome-text h1 { font-size: 1.7rem; color: var(--text); margin-bottom: 0.4rem; } .welcome-text h1 span { color: var(--teal); } @keyframes fadeIn { from {opacity:0;transform:translateY(8px)} to {opacity:1;transform:translateY(0)} } /* ══════════════════════════════════════════ TRANSACTION TABLE (used on history page) ══════════════════════════════════════════ */ .scrollable-table-container { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bg3) transparent; } .scrollable-table-container::-webkit-scrollbar { width: 4px; } .scrollable-table-container::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 4px; } .scrollable-table-container table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.77rem; } .scrollable-table-container th { background: var(--bg1); color: var(--text3); font-weight: 600; padding: 0.6rem 0.9rem; text-align: left; position: sticky; top: 0; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.65rem; border-bottom: 1px solid var(--border2); } .scrollable-table-container td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--border); color: var(--text); } .scrollable-table-container tr:hover { background: rgba(0,229,204,0.03); } /* colour helpers */ .deposit, .top, .pnl-pos { color: var(--green) !important; } .withdrawal, .withdraw, .pnl-neg { color: var(--red) !important; } .trade { color: var(--teal) !important; } /* ══════════════════════════════════════════ FOOTER ══════════════════════════════════════════ */ footer { background: var(--bg1); border-top: 1px solid var(--border); padding: 1rem 2rem; text-align: center; position: relative; z-index: 1; } footer p { font-family: var(--mono); font-size: 0.62rem; color: var(--text3); letter-spacing: 0.03em; } /* ══════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════ */ @media (max-width: 900px) { .interface { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); height: 100vh; z-index: 1100; } .interface.active { transform: translateX(0); box-shadow: 8px 0 48px rgba(0,0,0,0.7); } .menu-toggle { display: flex; } .dashboard-container { padding-top: 4.5rem !important; padding-left: 1.1rem !important; padding-right: 1.1rem !important; } } @media (max-width: 480px) { .dashboard-container { padding-top: 4rem !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } }