/* Ticker */ .ticker-wrap{ position:fixed; top:0; left:0; width:100%; height:36px; background: rgba(11,16,32,0.92); z-index:9999; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.4); } .ticker{ display:inline-block; white-space:nowrap; will-change:transform; animation: ticker 28s linear infinite; padding-left:100%; } .ticker:hover{ animation-play-state: paused; } .ticker-item{ display:inline-block; padding:8px 18px; font-family:'Press Start 2P',cursive; font-size:11px; color:#cbd5ff; opacity:0.95; } .ticker-item.buy{ color:#22c55e; } .ticker-item.sell{ color:#ef4444; } @keyframes ticker{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-100%);} } /* offset hero a bit since ticker is fixed */ .hero{ padding-top: 64px; } /* Chip and delta styles */ .chip{ background:#0e1430; color:#cbd5ff; border:1px solid rgba(34,211,238,0.35); padding:6px 10px; border-radius:999px; font-size:11px; font-family:'Press Start 2P',cursive; } .delta{ margin-left:8px; font-size:10px; color:#22d3ee; opacity:0; transition:opacity .3s, transform .3s; font-family: 'Press Start 2P', cursive; text-shadow: 1px 1px 0px rgba(0,0,0,0.8); } .delta.show{ opacity:1; transform:translateY(-2px) } .delta.pos{ color:#22d3ee; text-shadow: 0 0 6px #22d3ee; } .delta.neg{ color:#ef4444; text-shadow: 0 0 6px #ef4444; } /* Money rain (from nancymoneysite) */ .money-rain{ position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:-1; } .money{ position:absolute; width:30px; height:15px; background:url('data:image/svg+xml;utf8,$') no-repeat center/contain; opacity:.4; animation:rain linear infinite; } @keyframes rain{ 0%{ transform: translateY(-100vh) rotate(0deg);} 100%{ transform: translateY(100vh) rotate(360deg);} } /* Background animation from nancymoneysite */ .animated-background { position: fixed; top:0; left:0; width:100%; height:100%; z-index:-2; background: var(--bg); overflow:hidden; } .animated-wave { width:100%; height:100%; } .wave { fill:none; stroke:#22d3ee; stroke-width:1; stroke-opacity:0.18; animation: chartMove 6s ease-in-out infinite; filter: drop-shadow(0 0 5px rgba(34,211,238,0.25)); } .wave2 { stroke-opacity:0.12; animation-delay:-2s; } .wave3 { stroke-opacity:0.08; animation-delay:-1s; } @keyframes chartMove { 0% { d: path("M0,90 L20,85 L40,80 L60,85 L80,70 L100,75"); } 50% { d: path("M0,85 L20,70 L40,50 L60,30 L80,20 L100,10"); } 100% { d: path("M0,90 L20,85 L40,80 L60,85 L80,70 L100,75"); } } /* Hero pot */ .hero-pot { display:flex; align-items:center; justify-content:center; gap:16px; margin: 12px 0 8px; } .hero-pot .amount { font-family:'Press Start 2P',cursive; font-size:34px; color:#fff; text-shadow:0 0 12px rgba(124,58,237,0.8); } .hero-pot .timer { color: var(--muted); font-size:10px; font-family: 'Press Start 2P', cursive; } /* Tabs */ .tabs .tabs-nav { display:flex; gap:8px; margin-bottom:8px; } .tabs .tab { background:#0e1430; color:#cbd5ff; border:1px solid rgba(124,58,237,0.25); padding:8px 12px; border-radius:8px; cursor:pointer; font-family:'Press Start 2P',cursive; font-size:11px; } .tabs .tab.active { background: linear-gradient(135deg, rgba(124,58,237,0.5), rgba(34,211,238,0.35)); color:#0b1020; } .tab-content { margin-top:8px; } .tab-content.active { display:block; } /* Numbers */ .big { font-size: 26px; font-family:'Press Start 2P',cursive; } /* 8-bit headings */ h2, h3, h4 { font-family: 'Press Start 2P', cursive; color: var(--accent); text-shadow: 2px 2px 0px rgba(0,0,0,0.5); } h2 { font-size: 14px; margin: 0 0 12px 0; } h3 { font-size: 12px; margin: 0 0 8px 0; } p { font-family: 'Press Start 2P', cursive; font-size: 10px; line-height: 1.6; } /* Select styling */ select { background: #0e1430; color: var(--text); border: 1px solid rgba(124,58,237,0.25); border-radius: 8px; padding: 10px; font-family: 'Press Start 2P', cursive; font-size: 10px; } /* Link styling */ a { color: var(--accent); text-decoration: none; font-family: 'Press Start 2P', cursive; font-size: 10px; } a:hover { color: #fff; text-shadow: 0 0 8px var(--accent); } /* 8-bit Dark Theme */ :root { --bg: #0b1020; --panel: #151b2e; --text: #dbe4ff; --muted: #8ea0c7; --primary: #7c3aed; --accent: #22d3ee; } *{box-sizing:border-box} body { margin:0; background:var(--bg); color:var(--text); font-family: 'Press Start 2P', cursive; font-size: 11px; line-height: 1.6; } .hero { padding: 48px 0 28px; background: radial-gradient(1200px 600px at 50% -10%, rgba(124,58,237,0.35), transparent 60%), #0b1020; text-align:center; } .hero h1 { font-family:'Press Start 2P', cursive; margin:0 0 8px; font-size: 28px; letter-spacing: 1px; } .hero .sub { color: var(--muted); margin:0; font-family: 'Press Start 2P', cursive; font-size: 10px; } .wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; } .panel { background: var(--panel); border:1px solid rgba(124,58,237,0.15); border-radius: 12px; padding: 16px; margin: 16px 0; box-shadow: 0 8px 30px rgba(124,58,237,0.10); } .row { display:flex; gap:16px; flex-wrap:wrap; } .col { flex:1 1 420px; } .grid2 { display:grid; grid-template-columns: 180px 1fr; gap:8px 12px; align-items:center; } .label { color: var(--muted); font-size: 10px; font-family: 'Press Start 2P', cursive; text-transform: uppercase; } .input { background:#0e1430; color:var(--text); border:1px solid rgba(124,58,237,0.25); border-radius:8px; padding:10px; width:100%; font-family: 'Press Start 2P', cursive; font-size: 10px; } .wallet-row { display:flex; gap:8px; margin: 8px 0 12px; } .btn { background: var(--primary); color:#fff; border:0; border-radius:8px; padding:10px 14px; font-family:'Press Start 2P', cursive; box-shadow:0 0 0 3px #000, 0 8px 0 0 #000; cursor:pointer; } .btn:active { position:relative; top:2px; box-shadow:0 0 0 3px #000, 0 6px 0 0 #000; } .btn.alt { background: var(--accent); color:#0b1020; } .btn.danger { background:#ef4444; } .muted { color: var(--muted); font-family: 'Press Start 2P', cursive; font-size: 10px; } .log { background:#060912; border:1px solid rgba(124,58,237,0.15); border-radius:8px; padding:12px; min-height:160px; font-family: ui-monospace, Menlo, Monaco, Consolas, 'Courier New', monospace; overflow:auto; } .foot { display:flex; justify-content:space-between; align-items:center; padding: 16px 0 48px; color: var(--muted); font-family: 'Press Start 2P', cursive; font-size: 10px; } @media (max-width: 720px){ .grid2{grid-template-columns:1fr; gap:12px;} .label{font-size:9px; margin-bottom:4px;} h2{font-size:12px;} .hero h1{font-size:20px;} .hero-pot .amount{font-size:24px;} .btn{font-size:9px; padding:8px 10px;} .input{font-size:9px;} }