/* ============================================================= THRILL THEME — global reskin for OutlawTK x Thrill Brand palette (from thrill.com brand hub): Dark Blue #1B1D29 — background, text Lime Green #5CFFC1 — buttons, highlight, text accents Purple #5956FF — secondary background / accents White #FFFFFF — text, icons Typeface: Oxanium (display + body) Loaded LAST in so it overrides per-template inline themes. ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;500;600;700;800&display=swap'); :root { /* Thrill core palette */ --thrill-navy: #1B1D29 !important; --thrill-navy-2: #20232F !important; /* raised surface */ --thrill-navy-3: #262A3A !important; /* card / hover surface */ --thrill-line: rgba(92, 255, 193, 0.14) !important; --thrill-lime: #5CFFC1 !important; --thrill-lime-dim: #3fe0a6 !important; --thrill-purple: #5956FF !important; --thrill-white: #FFFFFF !important; --thrill-muted: #9aa3b2 !important; /* Re-map the legacy theme variables the templates consume */ --primary: #5CFFC1 !important; --primary-dark: #3fe0a6 !important; --primary-light: #5956FF !important; --secondary: #5956FF !important; --accent: #5CFFC1 !important; --text: #FFFFFF !important; --background: #1B1D29 !important; --card-bg: rgba(38, 42, 58, 0.6) !important; --gradient-1: linear-gradient(135deg, #5CFFC1 0%, #5956FF 100%) !important; --gradient-2: linear-gradient(135deg, #20232F 0%, #15161F 100%) !important; } /* ---------- Base ---------- */ html, body { font-family: 'Oxanium', system-ui, sans-serif !important; background-color: #1B1D29 !important; color: #FFFFFF !important; } h1, h2, h3, h4, h5, h6, .hero-title, .font-bold, .font-extrabold, .font-semibold { font-family: 'Oxanium', system-ui, sans-serif !important; letter-spacing: -0.01em; } /* Gradient text helper retint */ .gradient-text { background: linear-gradient(135deg, #5CFFC1 0%, #5956FF 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } /* ---------- Accent color remaps (beat Tailwind utilities) ---------- */ .text-primary { color: #5CFFC1 !important; } .text-yellow-400, .text-yellow-500, .text-yellow-300, .text-amber-400, .text-amber-500 { color: #5CFFC1 !important; } .hover\:text-primary:hover { color: #5CFFC1 !important; } .bg-primary { background-color: #5CFFC1 !important; color: #1B1D29 !important; } .border-primary { border-color: #5CFFC1 !important; } /* FontAwesome ticket / coin icons that were gold */ .fa-ticket-alt, .fa-coins, .fa-star, .fa-trophy, .fa-crown { color: #5CFFC1 !important; } /* ---------- Header ---------- */ #sticky-header { background: rgba(20, 22, 31, 0.72) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border-bottom: 1px solid var(--thrill-line) !important; } .nav-item::after { background-color: #5CFFC1 !important; } .nav-item:hover, .nav-item[data-active="true"] { color: #5CFFC1 !important; } .nav-item:hover::after, .nav-item[data-active="true"]::after { width: 100% !important; } /* Brand wordmark injected in header */ .thrill-brand-logo { height: 26px !important; width: auto !important; display: block; } /* Sign-in / profile pill */ .login-area button, .login-area-mobile button { background-color: rgba(92, 255, 193, 0.10) !important; border: 1px solid rgba(92, 255, 193, 0.25) !important; color: #FFFFFF !important; } .login-area button:hover, .login-area-mobile button:hover { background-color: rgba(92, 255, 193, 0.20) !important; } /* Live indicator -> lime */ .live-indicator { background-color: #5CFFC1 !important; color: #1B1D29 !important; } .pulse-dot { background-color: #1B1D29 !important; } /* ---------- Buttons ---------- */ .glowing-btn, .previous-winners-btn, .cta-button, .btn-primary { background: linear-gradient(135deg, #5CFFC1 0%, #3fe0a6 100%) !important; color: #11131c !important; font-weight: 700 !important; border: none !important; box-shadow: 0 8px 24px rgba(92, 255, 193, 0.25) !important; } .glowing-btn:hover, .previous-winners-btn:hover, .cta-button:hover, .btn-primary:hover { box-shadow: 0 12px 30px rgba(92, 255, 193, 0.40) !important; transform: translateY(-3px); } /* ---------- Cards / surfaces ---------- */ .affiliates-card, .glass-card, .stat-card, .feature-card, .info-card { background: linear-gradient(160deg, #20232F 0%, #15161F 100%) !important; border: 1px solid var(--thrill-line) !important; border-radius: 18px !important; } /* Leaderboard rows (inline gradient from-[#363636] to-[#1c1c1c]) */ .leaderboard-card { background: linear-gradient(135deg, #232636 0%, #181a24 100%) !important; border: 1px solid var(--thrill-line) !important; border-radius: 14px !important; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .leaderboard-card:hover { border-color: rgba(92, 255, 193, 0.45) !important; box-shadow: 0 8px 26px rgba(92, 255, 193, 0.12) !important; transform: translateY(-2px); } .highlight-user { border: 1px solid #5CFFC1 !important; box-shadow: 0 0 0 1px rgba(92,255,193,0.4), 0 8px 30px rgba(92, 255, 193, 0.20) !important; background: linear-gradient(135deg, rgba(92,255,193,0.10) 0%, #181a24 100%) !important; } /* Podium / top-3 cards commonly use gold gradients -> lime/purple */ .podium-card, .top-card, .winner-card { border: 1px solid var(--thrill-line) !important; background: linear-gradient(160deg, #20232F 0%, #15161F 100%) !important; } /* ---------- Decorative blobs retint ---------- */ .hero-blob, .hero-blob-1 { background: radial-gradient(circle, rgba(92,255,193,0.18) 0%, transparent 70%) !important; } .hero-blob-2 { background: radial-gradient(circle, rgba(89,86,255,0.18) 0%, transparent 70%) !important; } /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #15161F; } ::-webkit-scrollbar-thumb { background: #2c3142; border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: #5CFFC1; } /* ---------- Links ---------- */ a.text-primary, a:hover.text-primary { color: #5CFFC1 !important; } /* Selection */ ::selection { background: #5CFFC1; color: #11131c; } /* ---------- Kill the page loader / preloader everywhere ---------- */ #pageLoader, .loader, .preloader, #preloader { display: none !important; }