/* ═══════════════════════════════════════════════════════════════════ CHM Finance — Global Styles ═══════════════════════════════════════════════════════════════════ */ /* --- Design Tokens --- */ :root { --bg-primary: #0A0A0A; --bg-secondary: #050505; --bg-card: rgba(255, 255, 255, 0.03); --bg-card-solid: #0F0F0F; --bg-input: rgba(255, 255, 255, 0.04); --border: rgba(255, 255, 255, 0.08); --border-light: rgba(255, 255, 255, 0.14); --text-primary: #FFFFFF; --text-secondary: rgba(255, 255, 255, 0.62); --text-muted: rgba(255, 255, 255, 0.38); } /* Light theme overrides — triggered by from shell.js. * Using !important across the board because many dashboard pages hardcode * dark colors inline (bg-slate-800/50, linear-gradient, etc) and we want * the theme flip to win unconditionally. */ html.light { --bg-primary: #F5F6F8; --bg-secondary: #EDEEF2; --bg-card: rgba(0, 0, 0, 0.04); --bg-card-solid: #FFFFFF; --bg-input: rgba(0, 0, 0, 0.04); --border: rgba(0, 0, 0, 0.1); --border-light: rgba(0, 0, 0, 0.18); --text-primary: #0A0A0A; --text-secondary: rgba(0, 0, 0, 0.7); --text-muted: rgba(0, 0, 0, 0.5); color-scheme: light; } html.light body { color: #0A0A0A !important; background: #F5F6F8 !important; } /* Sidebar + topbar — they hardcode #0A0A0A gradients, override hard */ html.light .sidebar { background: linear-gradient(180deg, #FFFFFF 0%, #F5F6F8 100%) !important; border-right-color: rgba(0, 0, 0, 0.08) !important; } html.light .sidebar-logo, html.light .sidebar-logo a { color: #0A0A0A !important; } html.light .sidebar-link { color: rgba(0, 0, 0, 0.65) !important; } html.light .sidebar-link:hover { color: #0A0A0A !important; background: rgba(0, 0, 0, 0.05) !important; } html.light .sidebar-link.active { color: #0A0A0A !important; background: rgba(255,90,31, 0.1) !important; } html.light .sidebar-sub-badge { background: rgba(255,90,31, 0.08) !important; color: #FF5A1F !important; border-color: rgba(255,90,31, 0.2) !important; } html.light .topbar { background: rgba(255, 255, 255, 0.85) !important; border-bottom-color: rgba(0, 0, 0, 0.08) !important; backdrop-filter: blur(20px); } html.light .topbar-search input, html.light .topbar-search { background: rgba(0, 0, 0, 0.04) !important; color: #0A0A0A !important; } html.light .topbar-username { color: rgba(0, 0, 0, 0.8) !important; } /* Cards + stats */ html.light .card, html.light .stat-card { background: #FFFFFF !important; border-color: rgba(0, 0, 0, 0.08) !important; color: #0A0A0A !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 10px 20px -10px rgba(0, 0, 0, 0.08) !important; } html.light .stat-card-label { color: rgba(0, 0, 0, 0.55) !important; } html.light .stat-card-value { color: #0A0A0A !important; } /* Utility text colors */ html.light .text-white { color: #0A0A0A !important; } html.light .text-slate-300 { color: rgba(0, 0, 0, 0.75) !important; } html.light .text-slate-400 { color: rgba(0, 0, 0, 0.55) !important; } html.light .text-slate-500 { color: rgba(0, 0, 0, 0.45) !important; } html.light .text-slate-600 { color: rgba(0, 0, 0, 0.35) !important; } /* Utility bg-slate-*/*, bg-indigo-500/10, etc — normalise dashboard cards */ html.light [class*="bg-slate-800"] { background: rgba(0, 0, 0, 0.04) !important; } html.light [class*="bg-slate-900"] { background: rgba(0, 0, 0, 0.06) !important; } html.light [class*="border-slate-700"], html.light [class*="border-slate-800"] { border-color: rgba(0, 0, 0, 0.1) !important; } /* Inputs */ html.light input, html.light select, html.light textarea { background: #FFFFFF !important; color: #0A0A0A !important; border-color: rgba(0, 0, 0, 0.12) !important; } html.light input::placeholder, html.light textarea::placeholder { color: rgba(0, 0, 0, 0.4) !important; } /* Headings */ html.light h1, html.light h2, html.light h3, html.light h4 { color: #0A0A0A !important; } :root { --accent-blue: #FF5A1F; --accent-blue-light: #FF8C5A; --accent-cyan: #FF8C5A; --accent-purple: #FF5A1F; --accent-green: #2B5936; --accent-green-light: #66876E; --accent-red: #522525; --accent-red-light: #826262; --accent-yellow: #826262; --accent-orange: #826262; --gradient-primary: linear-gradient(180deg, #FF7840 0%, #FF5A1F 60%, #C44610 100%); --gradient-cyan: linear-gradient(180deg, #FF8C5A, #FF5A1F); --gradient-green: linear-gradient(180deg, #66876E, #2B5936); --shadow-glow: 0 8px 32px rgba(255,90,31, 0.18), 0 0 0 1px rgba(255,140,90, 0.18); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3); --shadow-deep: 0 2px 4px rgba(0, 0, 0, 0.5), 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 30px 60px rgba(0, 0, 0, 0.4); --shadow-emboss-light: inset 0 1px 1px rgba(255, 255, 255, 0.28), inset 0 -1px 3px rgba(0, 0, 0, 0.6); --shadow-emboss-dark: inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -2px 6px rgba(0, 0, 0, 0.7); --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-full: 9999px; --radius-pill: 9999px; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --blur: 24px; --transition-fast: 150ms ease; --transition-normal: 300ms ease; --transition-slow: 500ms cubic-bezier(.16,1,.3,1); --ease: cubic-bezier(.16,1,.3,1); } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-sans); font-weight: 500; font-size: 14px; color: var(--text-primary); background: var(--bg-primary); line-height: 1.5; letter-spacing: -0.005em; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; color: #fff; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; font-weight: 500; } input, select, textarea { font-family: inherit; font-weight: 500; font-size: 14px; background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; outline: none; transition: border-color var(--transition-fast), background var(--transition-fast); } input:focus, select:focus, textarea:focus { border-color: var(--accent-blue-light); background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 3px rgba(255,90,31, 0.18); } input::placeholder, textarea::placeholder { color: var(--text-muted); } img { max-width: 100%; display: block; } ::selection { background: rgba(255,90,31, 0.4); color: #fff; } /* --- Utility Classes --- */ .container { width: min(1280px, 92%); margin: 0 auto; } .container-sm { width: min(960px, 92%); margin: 0 auto; } .text-center { text-align: center; } .text-muted { color: var(--text-secondary); } .text-green { color: var(--accent-green); } .text-red { color: var(--accent-red); } .text-cyan { color: var(--accent-cyan); } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 2rem; } .text-4xl { font-size: 2.5rem; } .font-bold { font-weight: 700; } .font-medium { font-weight: 500; } .font-mono { font-family: var(--font-mono); } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .gap-2 { gap: 0.5rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .flex-wrap { flex-wrap: wrap; } .grid { display: grid; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .hidden { display: none !important; } .relative { position: relative; } .overflow-hidden { overflow: hidden; } .w-full { width: 100%; } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-full { border-radius: var(--radius-full); } /* --- Buttons (pill family with embossed inset highlights) --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border-radius: var(--radius-pill); font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: 0; border: 0; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color: rgba(255, 255, 255, 0.92); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 2px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.4); transition: transform .25s var(--ease), filter .25s var(--ease), background .25s var(--ease); white-space: nowrap; cursor: pointer; } .btn:hover { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.98); } .btn:focus-visible { outline: 2px solid var(--accent-blue-light); outline-offset: 3px; } .btn-primary { background: var(--gradient-primary); color: #fff; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.28), inset 0 -1px 3px rgba(0, 0, 0, 0.6), 0 4px 8px -2px rgba(0, 0, 0, 0.6), 0 12px 24px -6px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255,90,31, 0.35); } .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); background: var(--gradient-primary); } .btn-ghost { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color: rgba(255, 255, 255, 0.92); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 2px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.4); } .btn-ghost:hover { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); } .btn-success { background: linear-gradient(180deg, #66876E 0%, #2B5936 60%, #1E3E26 100%); color: #fff; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), inset 0 -1px 3px rgba(0, 0, 0, 0.5), 0 4px 8px -2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(43, 89, 54, 0.4); } .btn-success:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn-danger { background: linear-gradient(180deg, #826262 0%, #522525 60%, #391A1A 100%); color: #fff; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22), inset 0 -1px 3px rgba(0, 0, 0, 0.5), 0 4px 8px -2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(82, 37, 37, 0.4); } .btn-danger:hover { filter: brightness(1.1); transform: translateY(-1px); } .btn-sm { padding: 6px 16px; font-size: 12px; line-height: 16px; } .btn-lg { padding: 14px 28px; font-size: 15px; line-height: 22px; } .btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; } /* --- Cards (glass surface with deep shadow stack) --- */ .card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)); backdrop-filter: blur(var(--blur)) saturate(1.3); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.3); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.06); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); } .card:hover { border-color: var(--border-light); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1); } .card-glow:hover { border-color: rgba(255,140,90, 0.35); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 30px 60px rgba(255,90,31, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.12); } /* --- Badges --- */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.04em; border: 1px solid transparent; } .badge-blue { background: rgba(255,90,31, 0.18); color: #FF8C5A; border-color: rgba(255,140,90, 0.25); } .badge-green { background: rgba(43, 89, 54, 0.28); color: #99AF9F; border-color: rgba(102, 135, 110, 0.3); } .badge-red { background: rgba(82, 37, 37, 0.32); color: #C8B9B9; border-color: rgba(130, 98, 98, 0.3); } .badge-cyan { background: rgba(255,90,31, 0.14); color: #FF8C5A; border-color: rgba(255,140,90, 0.22); } .badge-yellow { background: rgba(130, 98, 98, 0.22); color: #C8B9B9; border-color: rgba(130, 98, 98, 0.3); } .badge-purple { background: rgba(255,90,31, 0.18); color: #FF8C5A; border-color: rgba(255,140,90, 0.25); } /* --- Sidebar (Dashboard pages) --- */ .sidebar { position: fixed; top: 0; left: 0; width: 260px; height: 100vh; background: linear-gradient(180deg, #0A0A0A 0%, #050505 100%); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 50; /* Smooth collapse/expand: width animates in 240 ms with the same ease curve we use on the topbar shift, so the rail and the content slide together. transform stays for the mobile slide-in. */ transition: transform var(--transition-normal), width 240ms cubic-bezier(.4, 0, .2, 1); will-change: width; } .sidebar-logo { padding: 22px 24px; font-family: var(--font-sans); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: #fff; border-bottom: 1px solid var(--border); } .sidebar-logo span { color: var(--accent-blue-light); } .sidebar-nav { flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; } .sidebar-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius-sm); color: var(--text-secondary); font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; transition: color var(--transition-fast), background var(--transition-fast); border: none; background: transparent; width: 100%; text-align: left; } .sidebar-link:hover { color: #fff; background: rgba(255, 255, 255, 0.04); } .sidebar-link.active { color: #fff; background: linear-gradient(180deg, rgba(255,90,31, 0.22), rgba(255,90,31, 0.06)); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255,140,90, 0.25); } .sidebar-link svg { width: 20px; height: 20px; flex-shrink: 0; } .sidebar-footer { padding: 16px; border-top: 1px solid var(--border); } /* Sidebar promo — 3Commas-style teaser card above the footer. Upsell (non-Elite) or Academy link (Elite). Injected by shell.js. */ /* Sidebar AI-assistant entry — sits at TOP of .sidebar-nav, above Dashboard.