/* ────────────────────────────────────────────── BNB Wallet — "Graphite" theme (soft mode) Applied via from theme.js Not a real light theme — a softer, lighter dark variant so all existing white text, the yellow logo and crypto icons stay perfectly readable. ────────────────────────────────────────────── */ :root.theme-light, .theme-light { --bnb-bg: #1A1F25; /* graphite base — much softer than #0B0E11 */ --bnb-bg2: #242A32; --bnb-bg3: #2F3640; /* Text colors stay the same (light) — only surfaces change. */ } /* Body / common dark backgrounds */ .theme-light, .theme-light body, .theme-light [style*="background:#0B0E11"], .theme-light [style*="background: #0B0E11"], .theme-light [style*="background:var(--bnb-bg)"] { background: #1A1F25 !important; } /* Nav blur tone */ .theme-light .nav-blur { background: rgba(26,31,37,0.92) !important; border-bottom-color: rgba(255,255,255,0.05) !important; } /* Glass cards — slightly lighter than base, still glassy */ .theme-light .glass { background: rgba(46,53,62,0.7) !important; border-color: rgba(240,185,11,0.12) !important; } .theme-light .glass:hover { background: rgba(52,60,70,0.85) !important; border-color: rgba(240,185,11,0.28) !important; } .theme-light .glass-soft { background: linear-gradient(180deg, rgba(46,53,62,0.65) 0%, rgba(36,42,50,0.55) 100%) !important; border-color: rgba(240,185,11,0.1) !important; } /* Common inline dark surfaces */ .theme-light [style*="background:rgba(30,35,41,"], .theme-light [style*="background: rgba(30,35,41,"] { background: rgba(46,53,62,0.7) !important; } .theme-light [style*="background:rgba(11,14,17,"], .theme-light [style*="background: rgba(11,14,17,"] { background: rgba(26,31,37,0.92) !important; } /* Hero grid lines — slightly brighter on graphite */ .theme-light .hero-grid { background-image: linear-gradient(rgba(240,185,11,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(240,185,11,0.06) 1px, transparent 1px) !important; } /* Orbs glow */ .theme-light .orb { opacity: 0.22 !important; } /* Token / list rows */ .theme-light .token-row, .theme-light .stake-stat, .theme-light .status-row, .theme-light .wallet-list-row, .theme-light .skel-row, .theme-light .quest-card, .theme-light .lb-row, .theme-light .stat-card, .theme-light .offer, .theme-light .req-row { background: rgba(46,53,62,0.7) !important; border-color: rgba(255,255,255,0.07) !important; } .theme-light .token-row:hover, .theme-light .wallet-list-row:hover, .theme-light .offer:hover { background: rgba(52,60,70,0.85) !important; border-color: rgba(240,185,11,0.25) !important; } /* Modals */ .theme-light .deposit-modal { background: rgba(10,12,15,0.72) !important; } .theme-light .deposit-single, .theme-light .deposit-panel, .theme-light .asset-action-modal, .theme-light .send-modal, .theme-light .wallet-switch-modal, .theme-light .receive-bonus-modal, .theme-light .seed-backup-modal, .theme-light #aw-ob-card { background: linear-gradient(180deg, #2A3038 0%, #1F242B 100%) !important; border-color: rgba(240,185,11,0.22) !important; } /* Form inputs */ .theme-light .word-input, .theme-light .stake-input, .theme-light .send-input, .theme-light .ai-input, .theme-light .ai-select { background: rgba(36,42,50,0.9) !important; border-color: rgba(255,255,255,0.1) !important; color: #EAECEF !important; } .theme-light .word-input:focus, .theme-light .stake-input:focus, .theme-light .send-input:focus, .theme-light .ai-input:focus { background: rgba(240,185,11,0.06) !important; border-color: rgba(240,185,11,0.55) !important; box-shadow: 0 0 0 3px rgba(240,185,11,0.14) !important; } /* Trust chips on graphite */ .theme-light .trust-chip { background: rgba(46,53,62,0.85) !important; border-color: rgba(255,255,255,0.08) !important; color: #C0C7D0 !important; } /* FAQ details */ .theme-light details.q, .theme-light details.glass { background: rgba(46,53,62,0.7) !important; border-color: rgba(255,255,255,0.07) !important; } /* Icon buttons (Send/Receive/AI/Staking) */ .theme-light .icon-btn { background: rgba(240,185,11,0.1) !important; border-color: rgba(240,185,11,0.22) !important; } /* Wallet switch button */ .theme-light .wallet-switch-btn { background: rgba(240,185,11,0.07) !important; border-color: rgba(240,185,11,0.22) !important; } /* Scrollbar */ .theme-light * { scrollbar-color: rgba(240,185,11,0.4) rgba(255,255,255,0.04); } .theme-light ::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); } /* Theme toggle button itself */ .theme-toggle-btn { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(240,185,11,0.08); border: 1px solid rgba(240,185,11,0.2); color: #F0B90B; cursor: pointer; transition: all 0.2s; } .theme-toggle-btn:hover { background: rgba(240,185,11,0.15); border-color: rgba(240,185,11,0.35); } /* Bottom tabbar on graphite */ .theme-light #aw-tabbar { background: rgba(26,31,37,0.92) !important; border-color: rgba(240,185,11,0.22) !important; } .theme-light #aw-tabbar a { color: #A6AEB8 !important; } .theme-light #aw-tabbar a.active { color: #F0B90B !important; }