/** * File Path: /assets/css/app.css * STAKR — Ultra-modern SaaS design system. * Dark-first. Nigerian sports-betting meets fintech. * Typography: Syne (display) + Inter (body) loaded in HTML head. * Theme switching via [data-theme="light"] on . */ /* ─── Font Import ─────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800;900&family=Inter:wght@400;500;600;700&display=swap'); /* ─── Dark Theme (default) ────────────────────────────────────────────────── */ :root { /* Backgrounds */ --bg: #080810; --bg-1: #0e0e1a; --bg-2: #13131f; --surface: #18182a; --surface-2: #1e1e30; --surface-3: #252538; /* Borders */ --border: rgba(255,255,255,.07); --border-2: rgba(255,255,255,.12); /* Brand */ --accent: #f59e0b; --accent-2: #fbbf24; --accent-dark: #d97706; --accent-glow: rgba(245,158,11,.18); /* Semantic */ --yes: #10b981; --yes-dark: #059669; --yes-glow: rgba(16,185,129,.15); --no: #f43f5e; --no-dark: #e11d48; --no-glow: rgba(244,63,94,.15); /* Text */ --text: #f0f0ff; --text-2: #9898b8; --text-3: #5a5a7a; /* Fonts */ --font-display: 'Inter', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Radius */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 24px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --shadow: 0 4px 16px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3); --shadow-lg: 0 20px 60px rgba(0,0,0,.5); --shadow-glow:0 0 0 1px var(--accent-glow), 0 8px 32px rgba(245,158,11,.1); /* Gradients */ --grad-wallet: linear-gradient(135deg, #1a1a35 0%, #0f0f22 100%); --grad-share: linear-gradient(135deg, #1a1a35 0%, #0a0a18 100%); --grad-jury: rgba(14,165,233,.08); --grad-jury-border: rgba(14,165,233,.25); /* Theme toggle */ --theme-icon: "☀️"; --transition: 0.22s ease; } /* ─── Light Theme ─────────────────────────────────────────────────────────── */ [data-theme="light"] { --bg: #f6f6fb; --bg-1: #efeff8; --bg-2: #e8e8f5; --surface: #ffffff; --surface-2: #f4f4fc; --surface-3: #ebebf8; --border: rgba(0,0,0,.07); --border-2: rgba(0,0,0,.13); --accent: #d97706; --accent-2: #f59e0b; --accent-dark: #b45309; --accent-glow: rgba(217,119,6,.14); --yes: #059669; --yes-dark: #047857; --yes-glow: rgba(5,150,105,.1); --no: #e11d48; --no-dark: #be123c; --no-glow: rgba(225,29,72,.1); --text: #12122a; --text-2: #4a4a6a; --text-3: #9898b0; --grad-wallet: linear-gradient(135deg, #eef0ff 0%, #e8ecff 100%); --grad-share: linear-gradient(135deg, #fdf8ec 0%, #fef3d0 100%); --grad-jury: rgba(14,165,233,.06); --grad-jury-border: rgba(14,165,233,.2); --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); --shadow: 0 4px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06); --shadow-lg: 0 20px 60px rgba(0,0,0,.12); --theme-icon: "🌙"; } /* ─── Smooth transitions ──────────────────────────────────────────────────── */ html { transition: background-color var(--transition), color var(--transition); } *, *::before, *::after { box-sizing: border-box; } /* ─── Base ────────────────────────────────────────────────────────────────── */ body.stakr-body { background-color: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); transition: color var(--transition); } a:hover { color: var(--accent-2); } /* ─── Scrollbar ───────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-1); } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-2); } /* ─── Navigation ──────────────────────────────────────────────────────────── */ .stakr-nav { background: var(--bg-1) !important; border-bottom: 1px solid var(--border); padding: 0 0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); height: 60px; display: flex; align-items: center; } .stakr-logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; color: var(--accent) !important; letter-spacing: -1px; line-height: 1; } .stakr-balance-badge { background: var(--surface-2); border: 1px solid var(--border-2); color: var(--accent-2); font-weight: 700; font-size: 0.82rem; padding: 5px 12px; border-radius: 20px; letter-spacing: 0.3px; transition: background var(--transition), border-color var(--transition); } .stakr-balance-badge:hover { border-color: var(--accent); background: var(--surface-3); } /* ─── Theme Toggle ────────────────────────────────────────────────────────── */ .stakr-theme-toggle { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); border-radius: 20px; padding: 5px 12px; font-size: 0.82rem; cursor: pointer; line-height: 1; transition: all var(--transition); user-select: none; white-space: nowrap; font-family: var(--font-body); } .stakr-theme-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-3); } .stakr-theme-toggle .theme-icon::before { content: var(--theme-icon); } /* ─── Buttons ─────────────────────────────────────────────────────────────── */ .stakr-btn-primary { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 700; font-family: var(--font-body); transition: background var(--transition), transform 0.1s, box-shadow var(--transition); border-radius: var(--r-sm); } .stakr-btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #000; box-shadow: 0 0 24px var(--accent-glow); transform: translateY(-1px); } .stakr-btn-primary:active { transform: translateY(0); } .stakr-btn-yes { background: var(--yes); border-color: var(--yes); color: #fff; font-weight: 700; border-radius: var(--r-sm); transition: all var(--transition); } .stakr-btn-yes:hover { background: var(--yes-dark); border-color: var(--yes-dark); color: #fff; box-shadow: 0 0 20px var(--yes-glow); } .stakr-btn-no { background: var(--no); border-color: var(--no); color: #fff; font-weight: 700; border-radius: var(--r-sm); transition: all var(--transition); } .stakr-btn-no:hover { background: var(--no-dark); border-color: var(--no-dark); color: #fff; box-shadow: 0 0 20px var(--no-glow); } /* ─── Cards ───────────────────────────────────────────────────────────────── */ .stakr-bet-card, .stakr-section-card, .stakr-sidebar-card, .stakr-profile-card, .stakr-bet-detail-card, .stakr-wallet-balance-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.1rem; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); } .stakr-bet-card { position: relative; overflow: hidden; transition: border-color var(--transition), transform 0.15s, box-shadow var(--transition); cursor: default; } .stakr-bet-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.015) 0%, transparent 60%); pointer-events: none; } .stakr-bet-card:hover { border-color: var(--accent); box-shadow: var(--shadow-glow); transform: translateY(-2px); } .stakr-wallet-balance-card { background: var(--grad-wallet); border-color: var(--accent); box-shadow: var(--shadow-glow); } /* ─── Sidebar ─────────────────────────────────────────────────────────────── */ .stakr-sidebar-card { background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--border); } /* ─── Feed Tabs ───────────────────────────────────────────────────────────── */ .stakr-feed-tabs { border-bottom: 1px solid var(--border); gap: 4px; } .stakr-feed-tabs .nav-link { color: var(--text-2); border: none; border-bottom: 2px solid transparent; background: transparent; padding: 0.55rem 1rem; font-weight: 600; font-size: 0.88rem; letter-spacing: 0.2px; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color var(--transition), border-color var(--transition), background var(--transition); } .stakr-feed-tabs .nav-link:hover { color: var(--text); background: var(--surface-2); } .stakr-feed-tabs .nav-link.active { color: var(--accent-2); border-bottom-color: var(--accent); background: transparent; } /* ─── Bet Side Boxes ──────────────────────────────────────────────────────── */ .bet-side-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 0.85rem; transition: border-color var(--transition), box-shadow var(--transition); } .bet-side-yes { border-left: 3px solid var(--yes); background: linear-gradient(to right, var(--yes-glow), transparent); } .bet-side-no { border-left: 3px solid var(--no); background: linear-gradient(to right, var(--no-glow), transparent); } .bet-side-box:hover { border-color: var(--accent); } .stakr-side-detail { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem; transition: all var(--transition); } .yes-side { border-top: 3px solid var(--yes); } .no-side { border-top: 3px solid var(--no); } .winner-side { box-shadow: 0 0 0 2px var(--accent), 0 4px 20px var(--accent-glow); } /* ─── Criteria Box ────────────────────────────────────────────────────────── */ .stakr-criteria-box { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 0.9rem 1rem; font-size: 0.88rem; } /* ─── Status Badges ───────────────────────────────────────────────────────── */ .status-live { background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.25); } .status-locked { background: rgba(245,158,11,.12); color: #fbbf24; border: 1px solid rgba(245,158,11,.25); } .status-resolving { background: rgba(139,92,246,.12); color: #a78bfa; border: 1px solid rgba(139,92,246,.25); } .status-jury { background: rgba(14,165,233,.12); color: #38bdf8; border: 1px solid rgba(14,165,233,.25); } .status-resolved { background: rgba(59,130,246,.12); color: #93c5fd; border: 1px solid rgba(59,130,246,.25); } .status-void, .status-cancelled { background: rgba(107,114,128,.1); color: #9ca3af; border: 1px solid rgba(107,114,128,.2); } [data-theme="light"] .status-live { background: #d1fae5; color: #065f46; border-color: #6ee7b7; } [data-theme="light"] .status-locked { background: #fef3c7; color: #78350f; border-color: #fcd34d; } [data-theme="light"] .status-resolving { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; } [data-theme="light"] .status-jury { background: #e0f2fe; color: #0c4a6e; border-color: #7dd3fc; } [data-theme="light"] .status-resolved { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; } [data-theme="light"] .status-void, [data-theme="light"] .status-cancelled { background: #f3f4f6; color: #374151; border-color: #d1d5db; } /* ─── Evidence & Comments ─────────────────────────────────────────────────── */ .stakr-evidence-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); } .evidence-flagged { border-color: var(--accent); background: rgba(245,158,11,.05); } [data-theme="light"] .evidence-flagged { background: #fef3c7; } .stakr-comment { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); transition: border-color var(--transition); } .stakr-comment:hover { border-color: var(--border-2); } .pinned-comment { border-color: var(--accent); background: linear-gradient(to right, var(--accent-glow), transparent); } [data-theme="light"] .pinned-comment { background: #fef9ec; } /* ─── Profile ─────────────────────────────────────────────────────────────── */ .stakr-profile-card { text-align: center; } .avatar-sm { width: 32px; height: 32px; border-radius: 50%; } /* ─── Leaderboard ─────────────────────────────────────────────────────────── */ .stakr-leaderboard-row { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); transition: border-color var(--transition), box-shadow var(--transition); } .stakr-leaderboard-row:hover { border-color: var(--accent); box-shadow: var(--shadow-glow); } .leaderboard-rank { font-size: 1rem; font-family: var(--font-display); min-width: 2rem; text-align: center; } /* ─── Wallet ──────────────────────────────────────────────────────────────── */ .stakr-txn-row { border-bottom: 1px solid var(--border); transition: background var(--transition); } .stakr-txn-row:hover { background: var(--surface-2); } .stakr-txn-row:last-child { border-bottom: none; } /* ─── Jury ────────────────────────────────────────────────────────────────── */ .stakr-jury-instruction { background: var(--grad-jury); border: 1px solid var(--grad-jury-border); border-radius: var(--r); color: var(--text); } .stakr-jury-side-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); } /* ─── Modals ──────────────────────────────────────────────────────────────── */ .stakr-modal { background: var(--surface); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); } .stakr-modal .modal-header { border-bottom: 1px solid var(--border); } .stakr-modal .modal-footer { border-top: 1px solid var(--border); } [data-theme="light"] .modal-content { background-color: var(--surface); color: var(--text); border-color: var(--border-2); } [data-theme="light"] .btn-close { filter: none; } /* ─── Forms ───────────────────────────────────────────────────────────────── */ .stakr-input, .stakr-select { background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); border-radius: var(--r-sm); font-family: var(--font-body); transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } .stakr-input:focus, .stakr-select:focus { background: var(--surface-3); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px var(--accent-glow); outline: none; } .stakr-input::placeholder { color: var(--text-3); } [data-theme="light"] .form-control, [data-theme="light"] .form-select { background-color: var(--surface-2); color: var(--text); border-color: var(--border-2); } [data-theme="light"] .form-control:focus, [data-theme="light"] .form-select:focus { background-color: var(--surface-3); color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } /* ─── Category Buttons ────────────────────────────────────────────────────── */ .stakr-cat-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; transition: all var(--transition); font-family: var(--font-body); cursor: pointer; } .stakr-cat-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-3); } .stakr-cat-btn.active { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 700; box-shadow: 0 2px 12px var(--accent-glow); } /* ─── Stats Row ───────────────────────────────────────────────────────────── */ .stakr-stat-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.83rem; color: var(--text-2); } .stakr-stat-row:last-child { border-bottom: none; } .stakr-stat-row .fw-bold { color: var(--text); } /* ─── Bet Row ─────────────────────────────────────────────────────────────── */ .stakr-bet-row { color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); transition: border-color var(--transition), box-shadow var(--transition); } .stakr-bet-row:hover { border-color: var(--accent); color: var(--text); box-shadow: var(--shadow-glow); } /* ─── Links ───────────────────────────────────────────────────────────────── */ .stakr-link { color: var(--accent); transition: color var(--transition); } .stakr-link:hover { color: var(--accent-2); } /* ─── Share Card ──────────────────────────────────────────────────────────── */ .stakr-share-card { background: var(--grad-share); border: 1px solid var(--accent); border-radius: var(--r-lg); } /* ─── Spinner & Accents ───────────────────────────────────────────────────── */ .text-warning { color: var(--accent-2) !important; } .spinner-border.text-warning { color: var(--accent-2) !important; } .text-success { color: var(--yes) !important; } .text-danger { color: var(--no) !important; } /* ─── Bootstrap overrides ─────────────────────────────────────────────────── */ [data-theme="light"] .text-muted { color: var(--text-2) !important; } [data-theme="light"] .text-light { color: var(--text) !important; } [data-theme="light"] .border-secondary { border-color: var(--border-2) !important; } [data-theme="light"] .alert-warning { background: #fef3c7; border-color: #fcd34d; color: #78350f; } [data-theme="light"] .alert-danger { background: #fee2e2; border-color: #fca5a5; color: #7f1d1d; } [data-theme="light"] .alert-success { background: #d1fae5; border-color: #6ee7b7; color: #065f46; } [data-theme="light"] .alert-secondary { background: var(--surface-2); border-color: var(--border-2); color: var(--text); } /* Navbar tweaks for light mode */ [data-theme="light"] .stakr-nav .nav-link, [data-theme="light"] .stakr-nav .btn-outline-light { color: var(--text) !important; border-color: var(--border-2) !important; } [data-theme="light"] .stakr-nav .btn-outline-light:hover { background-color: var(--surface-2) !important; color: var(--text) !important; } /* ─── Pool progress bar ───────────────────────────────────────────────────── */ .progress { background: var(--surface-3); border-radius: 4px; overflow: hidden; } .progress-bar.bg-success { background-color: var(--yes) !important; } .progress-bar.bg-danger { background-color: var(--no) !important; } /* ─── Admin-specific (admin portal only) ─────────────────────────────────── */ .admin-table th { background: var(--surface-2); color: var(--text-2); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; border-color: var(--border) !important; padding: 10px 14px; } .admin-table td { border-color: var(--border) !important; color: var(--text); font-size: 0.85rem; vertical-align: middle; padding: 10px 14px; } [data-theme="light"] .table-dark { --bs-table-bg: var(--surface); --bs-table-color: var(--text); } /* ─── Notification dot ────────────────────────────────────────────────────── */ .notif-pulse { display: inline-block; width: 8px; height: 8px; background: var(--no); border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.8); } } /* ─── Glow text for display numbers ──────────────────────────────────────── */ .stat-highlight { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--accent); letter-spacing: -0.5px; } /* ─── Toast ───────────────────────────────────────────────────────────────── */ .stakr-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(0); padding: 11px 22px; border-radius: 10px; font-weight: 600; font-size: 0.875rem; z-index: 99999; box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); max-width: 90vw; text-align: center; transition: opacity 0.2s, transform 0.2s; font-family: var(--font-body); } /* ─── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .stakr-bet-card { padding: 0.85rem; border-radius: var(--r); } .stakr-logo { font-size: 1.3rem; } .display-5 { font-size: 1.9rem; } .stakr-theme-toggle .theme-label { display: none; } .stat-highlight { font-size: 1.4rem; } } @media (max-width: 480px) { body.stakr-body { font-size: 14px; } .stakr-nav { height: 54px; } }