/* ========================================================================== VRank — club theme on top of Bootstrap 5. Bootstrap runs in its dark mode (data-bs-theme="dark" on ); this file re-tints its variables and adds the handful of components the app needs. ========================================================================== */ :root { --vr-bg: #0a0b1a; --vr-bg-soft: #101228; --vr-surface: #14162f; --vr-surface-2: #1b1d3d; --vr-border: #262a52; --vr-text: #e8eaff; --vr-muted: #9aa0c7; --vr-primary: #7c5cff; --vr-primary-soft: rgba(124, 92, 255, .16); --vr-cyan: #22d3ee; --vr-pink: #f72585; --vr-green: #2ee6a8; --vr-amber: #ffc857; --vr-gold: #ffd60a; --vr-silver: #cbd5e1; --vr-bronze: #e08a4a; --vr-radius: 16px; --vr-radius-sm: 10px; --vr-shadow: 0 18px 40px -24px rgba(0, 0, 0, .9); --bs-body-bg: var(--vr-bg); --bs-body-color: var(--vr-text); --bs-primary: var(--vr-primary); --bs-border-color: var(--vr-border); --bs-link-color: #a894ff; --bs-link-hover-color: #c3b5ff; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ body { background: radial-gradient(900px 500px at 12% -10%, rgba(124, 92, 255, .18), transparent 60%), radial-gradient(800px 450px at 100% 0%, rgba(34, 211, 238, .12), transparent 55%), var(--vr-bg); background-attachment: fixed; color: var(--vr-text); font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; min-height: 100vh; } a { text-decoration: none; } a:hover { text-decoration: none; } .text-muted-2 { color: var(--vr-muted) !important; } .display-number { font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* -------------------------------------------------------------------------- Shell: sidebar + content -------------------------------------------------------------------------- */ .vr-shell { display: flex; min-height: 100vh; } .vr-sidebar { width: 260px; flex: 0 0 260px; background: rgba(16, 18, 40, .92); border-right: 1px solid var(--vr-border); padding: 1.25rem 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .vr-content { flex: 1 1 auto; min-width: 0; padding: 1.5rem clamp(1rem, 3vw, 2.25rem) 3rem; } .vr-brand { display: flex; align-items: center; gap: .65rem; font-weight: 700; font-size: 1.15rem; color: var(--vr-text); margin-bottom: 1.5rem; padding: .25rem; } .vr-brand__mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--vr-primary), var(--vr-cyan)); color: #0a0b1a; font-weight: 800; flex: 0 0 auto; } .vr-nav__section { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--vr-muted); margin: 1.25rem .5rem .4rem; } .vr-nav__link { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: var(--vr-radius-sm); color: var(--vr-muted); font-weight: 500; transition: background-color .15s ease, color .15s ease; } .vr-nav__link:hover { background: rgba(255, 255, 255, .05); color: var(--vr-text); } .vr-nav__link.is-active { background: var(--vr-primary-soft); color: #fff; box-shadow: inset 2px 0 0 var(--vr-primary); } .vr-nav__icon { width: 1.25rem; text-align: center; flex: 0 0 auto; } /* Off-canvas sidebar on small screens */ @media (max-width: 991.98px) { .vr-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1045; transform: translateX(-100%); transition: transform .2s ease; } .vr-sidebar.is-open { transform: translateX(0); } .vr-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 1040; } } .vr-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } /* -------------------------------------------------------------------------- Cards & panels -------------------------------------------------------------------------- */ .vr-card { background: linear-gradient(180deg, var(--vr-surface), var(--vr-bg-soft)); border: 1px solid var(--vr-border); border-radius: var(--vr-radius); box-shadow: var(--vr-shadow); } .vr-card__body { padding: 1.25rem; } .vr-card__header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--vr-border); display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .vr-card__title { font-size: 1rem; font-weight: 600; margin: 0; } .vr-stat { display: flex; flex-direction: column; gap: .35rem; } .vr-stat__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; color: var(--vr-muted); } .vr-stat__value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .vr-stat__hint { font-size: .8rem; color: var(--vr-muted); } /* The customer's headline XP panel */ .vr-hero { background: radial-gradient(600px 220px at 90% -30%, rgba(34, 211, 238, .25), transparent 60%), linear-gradient(135deg, rgba(124, 92, 255, .35), rgba(20, 22, 47, .9)); border: 1px solid var(--vr-border); border-radius: var(--vr-radius); padding: 1.5rem; } .vr-hero__xp { font-size: clamp(2.25rem, 6vw, 3.25rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(124, 92, 255, .55); } /* -------------------------------------------------------------------------- Avatars, badges, rank pills -------------------------------------------------------------------------- */ .vr-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--vr-surface-2); border: 1px solid var(--vr-border); display: inline-grid; place-items: center; font-weight: 700; color: var(--vr-text); flex: 0 0 auto; overflow: hidden; } .vr-avatar--sm { width: 32px; height: 32px; font-size: .8rem; } .vr-avatar--lg { width: 84px; height: 84px; font-size: 1.6rem; } .vr-level { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; } .vr-rank { display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem; border-radius: 10px; background: var(--vr-surface-2); border: 1px solid var(--vr-border); font-weight: 700; font-variant-numeric: tabular-nums; } .vr-rank--1 { background: rgba(255, 214, 10, .16); border-color: var(--vr-gold); color: var(--vr-gold); } .vr-rank--2 { background: rgba(203, 213, 225, .14); border-color: var(--vr-silver); color: var(--vr-silver); } .vr-rank--3 { background: rgba(224, 138, 74, .16); border-color: var(--vr-bronze); color: var(--vr-bronze); } .vr-row--me { background: var(--vr-primary-soft) !important; box-shadow: inset 3px 0 0 var(--vr-primary); } /* -------------------------------------------------------------------------- Progress -------------------------------------------------------------------------- */ .vr-progress { height: 10px; background: rgba(255, 255, 255, .07); border-radius: 999px; overflow: hidden; } .vr-progress__bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--vr-primary), var(--vr-cyan)); transition: width .6s ease; } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ .vr-table { --bs-table-bg: transparent; --bs-table-color: var(--vr-text); --bs-table-border-color: var(--vr-border); --bs-table-hover-bg: rgba(255, 255, 255, .04); --bs-table-hover-color: var(--vr-text); margin-bottom: 0; } .vr-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--vr-muted); font-weight: 600; border-bottom: 1px solid var(--vr-border); white-space: nowrap; } .vr-table td { vertical-align: middle; } .vr-table tbody tr:last-child td { border-bottom: 0; } .vr-amount { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .vr-amount--in { color: var(--vr-green); } .vr-amount--out { color: var(--vr-pink); } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .form-control, .form-select { background-color: rgba(10, 11, 26, .7); border-color: var(--vr-border); color: var(--vr-text); } .form-control:focus, .form-select:focus { background-color: rgba(10, 11, 26, .9); border-color: var(--vr-primary); color: var(--vr-text); box-shadow: 0 0 0 .2rem var(--vr-primary-soft); } .form-control::placeholder { color: #6b719b; } .form-label { font-size: .85rem; font-weight: 600; color: var(--vr-muted); } .form-text { color: var(--vr-muted); } .btn-primary { --bs-btn-bg: var(--vr-primary); --bs-btn-border-color: var(--vr-primary); --bs-btn-hover-bg: #6b4bef; --bs-btn-hover-border-color: #6b4bef; --bs-btn-active-bg: #5d3fe0; --bs-btn-disabled-bg: #4a3d8f; --bs-btn-disabled-border-color: #4a3d8f; } .btn-ghost { --bs-btn-color: var(--vr-muted); --bs-btn-border-color: var(--vr-border); --bs-btn-hover-color: var(--vr-text); --bs-btn-hover-bg: rgba(255, 255, 255, .06); --bs-btn-hover-border-color: var(--vr-primary); } /* Quick XP buttons on the customer profile */ .vr-preset { border: 1px solid var(--vr-border); background: rgba(255, 255, 255, .03); color: var(--vr-text); border-radius: var(--vr-radius-sm); padding: .55rem .85rem; font-weight: 600; font-size: .875rem; transition: border-color .15s ease, background-color .15s ease, transform .1s ease; } .vr-preset:hover { border-color: var(--vr-primary); background: var(--vr-primary-soft); } .vr-preset:active { transform: translateY(1px); } .vr-preset small { display: block; font-weight: 500; color: var(--vr-muted); } /* -------------------------------------------------------------------------- Rewards -------------------------------------------------------------------------- */ .vr-reward { height: 100%; display: flex; flex-direction: column; } .vr-reward__cost { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--vr-cyan); } .vr-reward--locked { opacity: .62; } .vr-reward__image { width: 100%; height: 140px; object-fit: cover; border-radius: var(--vr-radius-sm); background: var(--vr-surface-2); } /* -------------------------------------------------------------------------- Auth / error pages -------------------------------------------------------------------------- */ .vr-centered { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; } .vr-auth-card { width: 100%; max-width: 26rem; } /* -------------------------------------------------------------------------- Charts (inline SVG, no external library) -------------------------------------------------------------------------- */ .vr-chart { width: 100%; height: 170px; display: block; } .vr-chart__grid { stroke: var(--vr-border); stroke-width: 1; } .vr-chart__bar { fill: url(#vrBarGradient); } .vr-chart__bar:hover { fill: var(--vr-cyan); } .vr-chart__label { fill: var(--vr-muted); font-size: 9px; } /* -------------------------------------------------------------------------- Misc -------------------------------------------------------------------------- */ .vr-empty { text-align: center; padding: 2.5rem 1rem; color: var(--vr-muted); } .vr-empty__icon { font-size: 2rem; opacity: .7; display: block; margin-bottom: .5rem; } .vr-divider { height: 1px; background: var(--vr-border); margin: 1.25rem 0; } .page-link { background: var(--vr-surface); border-color: var(--vr-border); color: var(--vr-muted); } .page-link:hover { background: var(--vr-surface-2); color: var(--vr-text); } .page-item.active .page-link { background: var(--vr-primary); border-color: var(--vr-primary); color: #fff; } .page-item.disabled .page-link { background: var(--vr-bg-soft); color: #5b6091; } .alert { border: 1px solid transparent; } .badge-soft { background: rgba(255, 255, 255, .07); color: var(--vr-muted); font-weight: 600; } @media print { .vr-sidebar, .vr-topbar, .btn, .pagination { display: none !important; } body { background: #fff; color: #000; } }