/* ============================================================================
Tier Partners — Design Tokens
----------------------------------------------------------------------------
Source of truth: tier partners/marketing/styles.css,
tier partners/portal/_shell.css,
tier partners/portal/admin/_shell-admin.css
Drop this file into any new page and you have the full Tier visual language.
========================================================================= */
/* ─── 1. Base tokens ─────────────────────────────────────────────────────── */
:root {
/* Surfaces */
--bg: #fafafa; /* marketing body background */
--bg-app: #f5f5f5; /* portal body background */
--surface: #ffffff; /* cards, inputs */
--surface-alt: #f9f9f9; /* read-only inputs, table header bg */
/* Sidebar (only large dark surface in the system) */
--sidebar-bg: #111111;
--sidebar-text: #e5e5e5;
--sidebar-muted: #888888;
--sidebar-hover: rgba(255, 255, 255, 0.06);
--sidebar-divider: rgba(255, 255, 255, 0.08);
--sidebar-active-bg:rgba(217, 119, 6, 0.12);
/* Foreground */
--text: #111111; /* body, headings */
--muted: #666666; /* sub-copy, table headers */
--muted-2: #888888; /* even lighter ghosting */
--placeholder: #aaaaaa;
/* Borders */
--border: #e5e5e5; /* every card, every input */
/* Brand */
--accent: #d97706; /* amber-600 — primary brand color */
--accent-hover: #b45309; /* amber-700 — primary hover */
--accent-tint: rgba(217, 119, 6, 0.12); /* nav-active background */
--accent-faint: #fffbeb; /* warning banner background */
--accent-faint-border: #fcd34d; /* warning banner border */
--accent-faint-text:#92400e; /* warning banner text */
--row-hover: #fffbf0; /* admin table row hover */
/* Secondary accents (low-key, used to break up amber) */
--teal: #0d9488; /* teal-600 — secondary signal */
--teal-tint: rgba(13, 148, 136, 0.10);
--teal-faint: #f0fdfa;
--indigo: #4f46e5; /* indigo-600 — tertiary */
--indigo-tint: rgba(79, 70, 229, 0.10);
--slate: #475569; /* slate-600 — neutral text accent */
--slate-tint: rgba(71, 85, 105, 0.08);
/* Status semantics (always used as bg + text pairs) */
--success-bg: #dcfce7;
--success-bg-2: #f0fdf4;
--success-border: #86efac;
--success-text: #166534;
--warn-bg: #fef3c7;
--warn-border: #fcd34d;
--warn-text: #92400e;
--info-bg: #dbeafe;
--info-border: #93c5fd;
--info-text: #1e40af;
--danger: #dc2626;
--danger-bg: #fee2e2;
--danger-bg-2: #fff1f2;
--danger-border: #fca5a5;
--danger-text: #991b1b;
--neutral-bg: #f3f4f6;
--neutral-text: #6b7280;
/* Tier colors */
--rank-bronze-bg: #f1e6d4; --rank-bronze-text: #87571f;
--rank-silver-bg: #eceff2; --rank-silver-text: #4a5564;
--rank-gold-bg: #fbeec6; --rank-gold-text: #876214;
--rank-diamond-bg: #dcecfb; --rank-diamond-text: #1f5a9c;
--rank-emerald-bg: #d6efe1; --rank-emerald-text: #11664a;
--rank-unranked-bg: #f3f4f6; --rank-unranked-text:#6b7280;
/* Radii */
--radius-sm: 6px; /* sidebar nav links, small inputs */
--radius: 8px; /* default — cards, inputs, buttons, alerts */
--radius-lg: 12px; /* login card, modals */
--radius-pill: 99px; /* badges, status pills, rank chips */
--radius-circle: 50%; /* avatars */
/* Spacing ladder (8 / 12 / 16 / 20 / 24 / 32 px — stay on the rungs) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-18: 72px;
--space-24: 96px;
/* Layout */
--sidebar-w: 240px; /* portal */
--sidebar-w-admin: 220px; /* admin (denser) */
--container-mkt: 960px;
--container-app: 1200px;
--container-admin: 1280px;
/* Shadows (there is exactly ONE) */
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08),
0 1px 2px rgba(0, 0, 0, 0.04);
/* Motion */
--transition: 0.15s;
--transition-fast: 0.12s;
--transition-slow: 0.4s;
--ease: ease;
/* Z-index ladder */
--z-topbar: 10;
--z-sidebar: 50;
--z-modal: 100;
--z-toast: 1000;
/* Type — families */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
"Inter", "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;
/* Type — sizes */
--fs-11: 11px;
--fs-12: 12px;
--fs-12-5: 12.5px;
--fs-13: 13px;
--fs-13-5: 13.5px;
--fs-14: 14px;
--fs-15: 15px;
--fs-16: 16px;
--fs-17: 17px;
--fs-18: 18px;
--fs-20: 20px;
--fs-22: 22px;
--fs-24: 24px;
--fs-26: 26px;
--fs-28: 28px;
--fs-32: 32px;
--fs-36: 36px;
--fs-display: clamp(48px, 8vw, 80px);
}
/* ─── 2. Semantic type roles ─────────────────────────────────────────────── */
.t-display {
font-family: var(--font-sans);
font-size: var(--fs-display);
font-weight: 800;
line-height: 1.05;
letter-spacing: -2px;
color: var(--text);
}
.t-h1 {
font-family: var(--font-sans);
font-size: var(--fs-32);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.5px;
color: var(--text);
}
.t-h2 {
font-family: var(--font-sans);
font-size: var(--fs-24);
font-weight: 700;
line-height: 1.3;
color: var(--text);
}
.t-h3 {
font-family: var(--font-sans);
font-size: var(--fs-17);
font-weight: 600;
color: var(--text);
}
.t-topbar-title {
font-family: var(--font-sans);
font-size: var(--fs-16);
font-weight: 600;
color: var(--text);
}
.t-card-value {
font-family: var(--font-sans);
font-size: var(--fs-28);
font-weight: 700;
line-height: 1.1;
letter-spacing: -1px;
color: var(--text);
}
.t-card-value-sm {
font-family: var(--font-sans);
font-size: var(--fs-26);
font-weight: 700;
line-height: 1.1;
letter-spacing: -1px;
color: var(--text);
}
.t-card-label {
font-family: var(--font-sans);
font-size: var(--fs-11);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--muted);
}
.t-body {
font-family: var(--font-sans);
font-size: var(--fs-14);
font-weight: 400;
line-height: 1.6;
color: var(--text);
}
.t-body-lg {
font-family: var(--font-sans);
font-size: var(--fs-17);
font-weight: 400;
line-height: 1.6;
color: var(--text);
}
.t-muted {
font-family: var(--font-sans);
font-size: var(--fs-13);
font-weight: 400;
color: var(--muted);
line-height: 1.6;
}
.t-helper {
font-family: var(--font-sans);
font-size: var(--fs-12);
font-weight: 400;
color: var(--muted);
}
.t-label {
font-family: var(--font-sans);
font-size: var(--fs-12-5);
font-weight: 500;
color: var(--text);
}
.t-badge {
font-family: var(--font-sans);
font-size: var(--fs-11);
font-weight: 600;
letter-spacing: 0.3px;
}
.t-mono {
font-family: var(--font-mono);
font-size: var(--fs-12);
font-weight: 400;
}
.t-ref-code {
font-family: var(--font-mono);
font-size: var(--fs-36);
font-weight: 700;
letter-spacing: 6px;
color: var(--text);
}
.t-logo {
font-family: var(--font-sans);
font-size: var(--fs-20);
font-weight: 700;
letter-spacing: -0.5px;
}
/* ─── 3. Document defaults (apply this stylesheet's tokens to bare HTML) ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
font-family: var(--font-sans);
font-size: var(--fs-14);
line-height: 1.6;
color: var(--text);
background: var(--bg);
}
a { color: inherit; }
button { font-family: inherit; }
:root {
--sidebar-w: 240px;
--topbar-h: 60px;
}
html, body { height: 100%; }
body {
font-family: var(--font-sans);
font-size: 14px;
color: var(--text);
background: var(--bg-app);
display: flex;
min-height: 100vh;
}
/* ── Sidebar ───────────────────────────────────────────────────────────── */
.shell-sidebar {
width: var(--sidebar-w);
min-width: var(--sidebar-w);
background: var(--sidebar-bg);
display: flex;
flex-direction: column;
position: fixed;
inset: 0 auto 0 0;
z-index: 50;
overflow-y: auto;
}
.sidebar-logo {
padding: 22px 20px 18px;
border-bottom: 1px solid var(--sidebar-divider);
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar-logo-mark {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: #fff;
}
.sidebar-logo-mark .wordmark {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.5px;
color: #fff;
}
.sidebar-logo-mark .glyph {
width: 22px; height: 22px;
flex-shrink: 0;
}
.sidebar-version {
font-size: 10px;
color: var(--sidebar-muted);
letter-spacing: 0.4px;
text-transform: uppercase;
}
.sidebar-nav {
flex: 1;
padding: 14px 10px 18px;
display: flex;
flex-direction: column;
gap: 2px;
}
.nav-group { margin-top: 14px; }
.nav-group:first-child { margin-top: 4px; }
.nav-group-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--sidebar-muted);
padding: 4px 12px 8px;
}
.nav-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 6px;
color: var(--sidebar-text);
text-decoration: none;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
border: none;
background: transparent;
text-align: left;
width: 100%;
font-family: inherit;
transition: background var(--transition-fast), color var(--transition-fast);
position: relative;
}
.nav-link svg { flex-shrink: 0; opacity: 0.7; }
.nav-link:hover { background: var(--sidebar-hover); color: #fff; }
.nav-link:hover svg { opacity: 1; }
.nav-link.active {
color: var(--accent);
background: var(--sidebar-active-bg);
}
.nav-link.active svg { opacity: 1; }
.nav-link .badge-dot {
margin-left: auto;
background: var(--accent);
color: #fff;
font-size: 10px;
font-weight: 700;
height: 16px;
min-width: 16px;
padding: 0 5px;
border-radius: 99px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sidebar-footer {
border-top: 1px solid var(--sidebar-divider);
padding: 14px 14px 16px;
}
.sidebar-user {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.sidebar-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sidebar-user-name {
font-size: 13px;
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 6px;
}
.sidebar-user-email {
font-size: 11px;
color: var(--sidebar-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-signout {
width: 100%;
padding: 7px;
background: transparent;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 6px;
color: var(--sidebar-muted);
font-size: 12.5px;
cursor: pointer;
font-family: inherit;
transition: border-color var(--transition-fast), color var(--transition-fast);
}
.sidebar-signout:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
/* ── Main + topbar ──────────────────────────────────────────────────────── */
.shell-main {
margin-left: var(--sidebar-w);
flex: 1;
min-width: 0; /* canonical flex-overflow fix — let wide SVG/tables shrink */
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Same fix at the inner level: charts/tables inside cards never widen their parent */
.card, .card-flush, .shell-page { min-width: 0; }
.shell-page { max-width: 100%; }
.shell-topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 14px 32px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 10;
height: var(--topbar-h);
}
.topbar-left {
display: flex; align-items: baseline; gap: 14px;
}
.topbar-left h1 { font-size: 16px; font-weight: 600; }
.topbar-left .crumb {
font-size: 12.5px; color: var(--muted);
}
.topbar-right {
display: flex; align-items: center; gap: 12px;
}
.topbar-search {
position: relative;
width: 280px;
}
.topbar-search input {
width: 100%;
padding: 7px 12px 7px 32px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-app);
font-size: 13px;
font-family: inherit;
color: var(--text);
transition: border-color var(--transition);
}
.topbar-search input:focus { outline: none; border-color: var(--accent); }
.topbar-search svg {
position: absolute;
left: 10px; top: 50%;
transform: translateY(-50%);
color: var(--muted);
}
.topbar-icon-btn {
background: transparent;
border: 1px solid var(--border);
border-radius: 8px;
width: 32px; height: 32px;
cursor: pointer;
color: var(--muted);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
transition: background var(--transition), color var(--transition);
}
.topbar-icon-btn:hover { background: var(--bg-app); color: var(--text); }
.topbar-icon-btn .ping {
position: absolute;
top: 6px; right: 7px;
width: 6px; height: 6px;
border-radius: 99px;
background: var(--accent);
border: 1.5px solid var(--surface);
}
/* ════════════════════════════════════════════════════════════════════════
RESPONSIVE — container scaling
----------------------------------------------------------------------
Philosophy: fill the screen on wide displays, don't center a narrow
column. Content max-width grows with viewport up to ~3200px, side
padding scales fluidly via clamp(), and page-specific grids gain
density at each breakpoint (see "RESPONSIVE — grid density" below).
════════════════════════════════════════════════════════════════════════ */
.shell-page {
width: 100%;
max-width: none;
margin: 0 auto;
padding: 24px clamp(20px, 2.4vw, 40px) 56px;
}
@media (min-width: 1280px) {
.shell-page { padding: 28px clamp(28px, 2.6vw, 48px) 64px; }
}
@media (min-width: 1600px) {
:root { --sidebar-w: 260px; }
.shell-page { padding: 32px clamp(36px, 2.8vw, 64px) 72px; max-width: none; }
}
@media (min-width: 1920px) {
.shell-page { padding: 36px clamp(44px, 3vw, 80px) 80px; }
}
/* Ultrawide breakpoints: open up the page so it actually uses the screen.
At 2400+ (QHD halves / 4K halves) the page reaches 2400px wide; at
3000+ (3440 ultrawides) it reaches 2800px. The default page grids
(dash-hero, dash-main, catv-grid, inv-grid, py-section, ...) all use
auto-fit/auto-fill or fr-based columns and absorb the extra room
gracefully — cards stay sensibly sized (262-330px) because the grids
add more columns instead of stretching individual cells. */
@media (min-width: 2400px) {
:root { --sidebar-w: 280px; }
.shell-page {
padding: 44px clamp(56px, 3.2vw, 96px) 96px;
max-width: 2400px;
margin-left: auto;
margin-right: auto;
}
.shell-topbar { padding: 16px clamp(40px, 2.5vw, 64px); }
}
@media (min-width: 3000px) {
:root { --sidebar-w: 300px; }
.shell-page { padding: 52px clamp(72px, 3.4vw, 120px) 112px; max-width: 2800px; }
}
/* Topbar density */
@media (max-width: 1280px) { .shell-topbar { padding: 14px 24px; } .topbar-search { width: 220px; } }
@media (max-width: 1080px) { :root { --sidebar-w: 220px; } .topbar-search { width: 180px; } }
@media (max-width: 960px) { .topbar-search { display: none; } }
@media (max-width: 720px) {
:root { --sidebar-w: 0px; }
.shell-sidebar { display: none; }
.shell-main { margin-left: 0; }
.shell-topbar { padding: 12px 18px; }
.shell-page { padding: 18px 16px 48px; }
}
/* ── Page header (inside page) ──────────────────────────────────────────── */
.page-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 22px;
gap: 16px;
flex-wrap: wrap;
}
.page-title {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.12;
color: var(--text);
}
.page-subtitle {
font-size: 14px;
color: var(--muted);
margin-top: 6px;
line-height: 1.55;
max-width: 62ch;
}
.page-header-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Wide screens: bigger title, more breathing room */
@media (min-width: 1700px) {
.page-title { font-size: 32px; }
.page-subtitle { font-size: 14.5px; }
.page-header { margin-bottom: 28px; }
}
@media (min-width: 2400px) {
.page-title { font-size: 38px; }
.page-subtitle { font-size: 15.5px; max-width: 70ch; }
.page-header { margin-bottom: 32px; }
}
/* Tablet & smaller already handled by main responsive block (line ~1100/720) */
/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 22px;
box-shadow: var(--card-shadow);
}
.card-tight { padding: 18px 20px; }
.card-flush { padding: 0; overflow: hidden; }
.card-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--muted);
}
.card-value {
font-size: 28px;
font-weight: 700;
letter-spacing: -1px;
line-height: 1.05;
}
.card-sub { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.card-header h3 { font-size: 14px; font-weight: 600; }
.card-header .card-sub { margin-top: 2px; }
/* ── KPI card with delta ───────────────────────────────────────────────── */
.kpi {
display: flex;
flex-direction: column;
gap: 8px;
}
.kpi-head {
display: flex; justify-content: space-between; align-items: center;
}
.kpi-value {
font-size: 28px; font-weight: 700; letter-spacing: -1px; line-height: 1.05;
margin-top: 10px;
}
.kpi-icon-box {
width: 32px; height: 32px;
border-radius: 8px;
background: var(--accent-tint);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
}
.kpi-delta {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 99px;
}
.kpi-delta.up { background: var(--success-bg-2); color: var(--success-text); }
.kpi-delta.down { background: var(--danger-bg-2); color: var(--danger-text); }
.kpi-delta.flat { background: var(--neutral-bg); color: var(--neutral-text); }
.kpi-foot {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: var(--muted);
}
/* ── Grids ──────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-12-8 { grid-template-columns: 1.5fr 1fr; }
.grid-8-4 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-12-8, .grid-8-4 { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
/* Catalog/inventory grids drop a column when sidebar still steals space */
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.proj-grid { grid-template-columns: repeat(2, 1fr); }
.pkg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
text-decoration: none;
font-family: inherit;
transition: background var(--transition), border-color var(--transition);
white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg-app); }
.btn-dark { background: #111; color: #fff; border-color: #111; }
.btn-dark:hover { background: #000; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 12px 22px; font-size: 14px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* ── Form ───────────────────────────────────────────────────────────────── */
.form-row { display: grid; gap: 6px; }
.form-row label { font-size: 12.5px; font-weight: 500; color: var(--text); }
.form-input, .form-select, .form-textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 13.5px;
font-family: inherit;
background: var(--surface);
color: var(--text);
transition: border-color var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none; border-color: var(--accent);
}
.form-input[readonly] { background: var(--surface-alt); color: var(--muted); }
.form-helper { font-size: 12px; color: var(--muted); }
/* ── Rank badge ─────────────────────────────────────────────────────────── */
.rank-badge {
font-size: 11px;
font-weight: 600;
padding: 3px 9px 3px 7px;
border-radius: 99px;
letter-spacing: 0.3px;
display: inline-flex;
align-items: center;
gap: 5px;
line-height: 1;
white-space: nowrap;
}
.rank-badge svg { flex-shrink: 0; }
.rank-badge-lg {
font-size: 12.5px;
padding: 5px 12px 5px 9px;
gap: 7px;
}
.rank-unranked { background: var(--rank-unranked-bg); color: var(--rank-unranked-text); }
.rank-bronze { background: var(--rank-bronze-bg); color: var(--rank-bronze-text); }
.rank-silver { background: var(--rank-silver-bg); color: var(--rank-silver-text); }
.rank-gold { background: var(--rank-gold-bg); color: var(--rank-gold-text); }
.rank-diamond { background: var(--rank-diamond-bg); color: var(--rank-diamond-text); }
.rank-emerald { background: var(--rank-emerald-bg); color: var(--rank-emerald-text); }
/* ── Rank crest (large tile, for Rewards page) ─────────────────────────── */
.rank-crest {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
flex-shrink: 0;
position: relative;
border: 1px solid transparent;
}
.rank-crest.rank-bronze { background: var(--rank-bronze-bg); color: var(--rank-bronze-text); }
.rank-crest.rank-silver { background: var(--rank-silver-bg); color: var(--rank-silver-text); }
.rank-crest.rank-gold { background: var(--rank-gold-bg); color: var(--rank-gold-text); }
.rank-crest.rank-diamond { background: var(--rank-diamond-bg); color: var(--rank-diamond-text); }
.rank-crest.rank-emerald { background: var(--rank-emerald-bg); color: var(--rank-emerald-text); }
.rank-crest.rank-unranked{ background: var(--rank-unranked-bg);color: var(--rank-unranked-text); }
.rank-crest.locked {
background: var(--bg-app);
color: #c4c4c4;
border: 1px dashed var(--border);
}
.rank-crest.locked svg { opacity: 0.6; }
/* ── Status badge ──────────────────────────────────────────────────────── */
.status-badge {
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 99px;
letter-spacing: 0.2px;
display: inline-flex;
align-items: center;
gap: 5px;
}
.status-badge::before {
content: "";
width: 6px; height: 6px;
border-radius: 99px;
background: currentColor;
}
.status-paid { background: var(--success-bg); color: var(--success-text); }
.status-completed { background: var(--success-bg-2);color: var(--success-text); }
.status-pending { background: var(--warn-bg); color: var(--warn-text); }
.status-eligible { background: var(--info-bg); color: var(--info-text); }
.status-reversed { background: var(--danger-bg); color: var(--danger-text); }
.status-scheduled { background: var(--neutral-bg); color: var(--neutral-text); }
/* ── Progress bar ──────────────────────────────────────────────────────── */
.progress-bar {
height: 6px; border-radius: 99px;
background: var(--border);
overflow: hidden;
margin-top: 10px;
}
.progress-fill {
height: 100%; border-radius: 99px;
background: var(--accent);
transition: width var(--transition-slow) var(--ease);
}
/* ── Table ──────────────────────────────────────────────────────────────── */
.table-wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--card-shadow);
overflow: hidden;
}
.table-toolbar {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 20px; border-bottom: 1px solid var(--border);
gap: 12px; flex-wrap: wrap;
}
.tabs {
display: inline-flex; background: var(--bg-app);
border: 1px solid var(--border); border-radius: 8px;
padding: 3px;
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button { white-space: nowrap; flex-shrink: 0; }
.tabs button {
background: transparent;
border: none;
padding: 6px 14px;
border-radius: 6px;
font-size: 12.5px;
font-weight: 500;
color: var(--muted);
cursor: pointer;
font-family: inherit;
transition: background var(--transition), color var(--transition);
}
.tabs button.active {
background: var(--surface);
color: var(--text);
box-shadow: var(--card-shadow);
}
.tabs button:hover:not(.active) { color: var(--text); }
/* Wrapper around every data table so wide content scrolls inside the
card instead of expanding the whole page. */
.table-scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-scroll table.data { min-width: 640px; }
/* ════════════════════════════════════════════════════════════════════════
DASHBOARD — premium SaaS layout (hero + chart/rail + activity + banner)
----------------------------------------------------------------------
Each breakpoint gets an intentionally different composition, not just
reflow. See bottom of this block for the breakpoint table.
════════════════════════════════════════════════════════════════════════ */
/* ── Hero band (greeting + metrics) ────────────────────────────────── */
.dash-hero {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
gap: 36px;
align-items: center;
padding: 32px 36px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--card-shadow);
margin-bottom: 18px;
}
.dash-hero-greet { min-width: 0; }
.dash-hero-eyebrow {
display: inline-block;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.dash-hero-title {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.08;
color: var(--text);
margin: 8px 0 0;
}
.dash-hero-line {
font-size: 14px;
color: var(--muted);
line-height: 1.55;
margin: 10px 0 0;
max-width: 52ch;
}
.dash-hero-line strong { color: var(--text); font-weight: 600; }
.dash-hero-actions {
display: flex;
gap: 8px;
margin-top: 18px;
flex-wrap: wrap;
}
.dash-hero-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.dash-metric {
background: var(--surface);
padding: 18px 20px;
min-width: 0;
transition: background 160ms ease;
}
.dash-metric:hover { background: var(--surface-alt); }
.dash-metric-lbl {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.dash-metric-val {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
margin-top: 8px;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.dash-metric-primary .dash-metric-val { font-size: 26px; }
.dash-metric-trend {
font-size: 12px;
color: var(--muted);
margin-top: 8px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
line-height: 1.4;
}
.trend-pill {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
font-weight: 600;
padding: 2px 7px 2px 6px;
border-radius: 6px;
letter-spacing: 0;
}
.trend-pill.up { background: var(--success-bg-2); color: var(--success-text); }
.trend-pill.down { background: var(--danger-bg-2); color: var(--danger-text); }
.trend-pill.neutral { background: var(--bg-app); color: var(--text); border: 1px solid var(--border); }
/* ── Main grid: chart + rank rail + pending rail ────────────────────── */
.dash-main {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 18px;
margin-bottom: 18px;
}
.dash-chart-card { display: flex; flex-direction: column; min-width: 0; }
.dash-chart-body { padding: 18px 14px 12px; flex: 1; min-height: 320px; }
.dash-rank-card,
.dash-pending-card {
display: flex;
flex-direction: column;
min-width: 0;
}
.dash-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.dash-rank-line {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
}
.dash-card-note {
font-size: 12.5px;
color: var(--muted);
line-height: 1.55;
margin: 14px 0 0;
}
.dash-card-note strong { color: var(--text); font-weight: 600; }
.dash-progress-row { display: grid; gap: 14px; margin-top: 16px; }
.dash-progress-head {
display: flex;
justify-content: space-between;
font-size: 12px;
margin-bottom: 6px;
}
.dash-progress-lbl { font-weight: 500; }
.dash-pending-amt {
font-size: 30px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
margin-top: 6px;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.dash-pending-stats {
display: grid;
gap: 8px;
font-size: 13px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.dash-pending-stats > div {
display: flex;
justify-content: space-between;
}
.dash-pending-stats .lbl { color: var(--muted); }
.dash-pending-stats .val { font-weight: 600; }
.dash-card-cta {
margin-top: auto;
padding-top: 14px;
width: 100%;
justify-content: center;
}
.dash-card-cta { margin-top: 16px !important; }
.dash-rank-card > .dash-card-cta,
.dash-pending-card > .dash-card-cta { margin-top: 14px; }
/* ── Activity feed ──────────────────────────────────────────────────── */
.dash-activity { margin-bottom: 18px; }
/* ── Referral banner (dark, distinct from cards) ────────────────────── */
.dash-refer-banner {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: 36px;
align-items: center;
padding: 32px 36px;
background: #0a0a0a;
color: #fafafa;
border-radius: 16px;
box-shadow: 0 8px 24px -16px rgba(217, 119, 6, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.dash-refer-banner::before {
content: '';
position: absolute;
top: -40%; right: -10%;
width: 480px; height: 480px;
background: radial-gradient(closest-side, rgba(217, 119, 6, 0.18), transparent 70%);
pointer-events: none;
}
.dash-refer-banner-text { position: relative; z-index: 1; min-width: 0; }
.dash-refer-banner-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
}
.dash-refer-banner-title {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.25;
margin: 10px 0 0;
color: #fff;
max-width: 22ch;
}
.dash-refer-banner-sub {
font-size: 13px;
color: rgba(250, 250, 250, 0.65);
line-height: 1.55;
margin: 10px 0 0;
max-width: 48ch;
}
.dash-refer-banner-action {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.dash-refer-banner-code {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 700;
letter-spacing: 0.32em;
color: #fff;
padding: 6px 0 2px;
}
.dash-refer-banner-share {
display: flex;
gap: 8px;
align-items: stretch;
min-width: 0;
}
.dash-refer-banner-input {
flex: 1;
min-width: 0;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
padding: 9px 12px;
font-size: 12.5px;
font-family: var(--font-mono);
color: rgba(255, 255, 255, 0.85);
outline: none;
}
.dash-refer-banner-input:focus { border-color: rgba(217, 119, 6, 0.55); }
.dash-refer-banner-copy {
appearance: none;
font-family: inherit;
background: var(--accent);
color: #fff;
border: none;
border-radius: 8px;
padding: 0 14px;
height: 38px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
transition: background 140ms ease, transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dash-refer-banner-copy:hover { background: var(--accent-hover); }
.dash-refer-banner-copy:active { transform: scale(0.97); }
.dash-refer-banner-kit {
appearance: none;
font-family: inherit;
background: transparent;
color: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 8px;
padding: 9px 14px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
justify-content: center;
width: 100%;
transition: background 140ms ease, border-color 140ms ease;
}
.dash-refer-banner-kit:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
/* ────────────────────────────────────────────────────────────────────
DASHBOARD RESPONSIVE — five distinct layouts
--------------------------------------------------------------------
≥2000px · 4-metric strip, 3-col main grid, full activity feed below
1500-2000· same composition, slightly tighter spacing
1100-1500· hero stacks (greeting above metrics), main becomes 2-col
(chart + rank/pending stacked rail)
720-1100 · hero greeting + 2x2 metric grid, all main cards stacked
<720 · single-column everything, hero compresses, banner tightens
──────────────────────────────────────────────────────────────────── */
/* Tablet — hero stacks, main becomes 2-col with rail */
@media (max-width: 1500px) {
.dash-hero {
grid-template-columns: 1fr;
gap: 28px;
padding: 28px 32px;
}
.dash-hero-greet { max-width: 640px; }
.dash-main {
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
grid-template-areas:
"chart rank"
"chart pending";
}
.dash-chart-card { grid-area: chart; }
.dash-rank-card { grid-area: rank; }
.dash-pending-card { grid-area: pending; }
}
/* Tablet — main becomes single column when chart-card width gets tight */
@media (max-width: 1100px) {
.dash-main {
grid-template-columns: 1fr;
grid-template-areas: "chart" "rank" "pending";
}
.dash-hero-metrics { grid-template-columns: repeat(2, 1fr); }
.dash-refer-banner {
grid-template-columns: 1fr;
gap: 24px;
padding: 28px 32px;
}
}
/* Mobile-tablet — tighter density on phones */
@media (max-width: 720px) {
.dash-hero {
padding: 22px 22px 24px;
gap: 22px;
border-radius: 14px;
}
.dash-hero-title { font-size: 24px; }
.dash-hero-line { font-size: 13px; }
.dash-hero-metrics { grid-template-columns: repeat(2, 1fr); }
.dash-metric { padding: 14px 14px; }
.dash-metric-val { font-size: 19px; }
.dash-metric-primary .dash-metric-val { font-size: 22px; }
.dash-chart-body { padding: 14px 8px 8px; min-height: 240px; }
.dash-rank-card, .dash-pending-card { padding: 20px; }
.dash-pending-amt { font-size: 26px; }
.dash-refer-banner { padding: 24px 22px; border-radius: 14px; }
.dash-refer-banner::before { width: 320px; height: 320px; }
.dash-refer-banner-title { font-size: 19px; }
.dash-refer-banner-code { font-size: 18px; letter-spacing: 0.24em; }
}
/* Very small — single column metrics, more compressed */
@media (max-width: 440px) {
.dash-hero-metrics { grid-template-columns: 1fr; }
.dash-hero-title { font-size: 22px; }
.dash-hero-actions .btn { flex: 1; justify-content: center; }
.dash-refer-banner-share { flex-direction: column; }
.dash-refer-banner-copy { width: 100%; height: 38px; }
}
/* Wide — bigger numbers, more breathing room */
@media (min-width: 1700px) {
.dash-hero { padding: 40px 44px; gap: 44px; }
.dash-hero-title { font-size: 38px; }
.dash-metric-val { font-size: 24px; }
.dash-metric-primary .dash-metric-val { font-size: 30px; }
.dash-chart-body { min-height: 340px; }
.dash-refer-banner { padding: 40px 44px; gap: 44px; }
.dash-refer-banner-title { font-size: 26px; }
}
/* Ultra-wide — split the dash into a richer composition */
@media (min-width: 2200px) {
.dash-main {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "chart rank pending";
}
.dash-hero {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
padding: 48px 52px;
}
.dash-hero-title { font-size: 44px; }
.dash-metric { padding: 22px 24px; }
.dash-metric-val { font-size: 28px; }
.dash-metric-primary .dash-metric-val { font-size: 36px; }
.dash-chart-body { min-height: 380px; }
.dash-refer-banner-title { font-size: 30px; }
}
/* 4K — go even bigger */
@media (min-width: 3000px) {
.dash-hero-title { font-size: 52px; }
.dash-metric-val { font-size: 32px; }
.dash-metric-primary .dash-metric-val { font-size: 42px; }
.dash-pending-amt { font-size: 40px; }
}
table.data {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
table.data thead th {
text-align: left;
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--muted);
background: var(--surface-alt);
padding: 11px 20px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
table.data tbody td {
padding: 13px 20px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td { background: var(--row-hover); }
table.data .mono { font-family: var(--font-mono); font-size: 12.5px; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .num.pos { color: var(--success-text); font-weight: 600; }
/* ── Member row (in tables) ────────────────────────────────────────────── */
.member-cell {
display: flex; align-items: center; gap: 10px;
}
.avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 12px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar.lg { width: 44px; height: 44px; font-size: 15px; }
.avatar.ring {
box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent);
}
.avatar img { display: block; }
.avatar.dark { background: #111; }
.avatar.muted { background: var(--muted); }
.avatar.elite { background: #059669; }
.avatar.pro { background: #2563eb; }
.avatar.rookie { background: #b45309; }
.avatar.unranked { background: var(--neutral-text); }
.member-name { font-weight: 600; font-size: 13px; }
.member-meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
/* ── Activity feed ─────────────────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; }
.feed-row {
display: flex;
gap: 12px;
padding: 13px 0;
border-bottom: 1px solid var(--border);
align-items: flex-start;
}
.feed-row:last-child { border-bottom: none; }
.feed-icon {
width: 32px; height: 32px; border-radius: 8px;
background: var(--bg-app);
color: var(--muted);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.feed-icon.accent { background: var(--accent-tint); color: var(--accent); }
.feed-icon.success { background: var(--success-bg-2); color: var(--success-text); }
.feed-icon.info { background: var(--info-bg); color: var(--info-text); }
.feed-text {
flex: 1; min-width: 0;
}
.feed-line {
font-size: 13px; line-height: 1.45;
}
.feed-meta {
font-size: 11.5px; color: var(--muted); margin-top: 2px;
}
.feed-amount {
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 600;
color: var(--success-text);
}
/* ── Warning banner ─────────────────────────────────────────────────────── */
.banner-warn {
display: flex; gap: 12px; align-items: flex-start;
background: var(--accent-faint);
border: 1px solid var(--accent-faint-border);
color: var(--accent-faint-text);
border-radius: 8px;
padding: 12px 16px;
font-size: 13px;
}
.banner-warn svg { flex-shrink: 0; margin-top: 1px; }
/* ── Network tree ──────────────────────────────────────────────────────── */
.tree {
position: relative;
padding: 32px 8px 16px;
min-height: 280px;
}
.tree-svg { position: absolute; inset: 0; pointer-events: none; }
.tree-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.tree-row + .tree-row { margin-top: 56px; }
.node-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 14px;
display: flex;
align-items: center;
gap: 10px;
min-width: 180px;
box-shadow: var(--card-shadow);
position: relative;
z-index: 2;
}
.node-card.you {
border-color: #111;
background: #111;
color: #fff;
}
.node-card.you .node-meta,
.node-card.you .node-name-row { color: #fff; }
.node-card.you .node-meta { color: rgba(255,255,255,0.55); }
.node-card .node-name { font-weight: 600; font-size: 13px; }
.node-card .node-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
/* ── Referral / QR ─────────────────────────────────────────────────────── */
.ref-hero {
background: #111;
color: #fff;
border-radius: 12px;
padding: 32px;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 32px;
align-items: center;
position: relative;
overflow: hidden;
}
.ref-hero::before {
/* subtle amber accent line */
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--accent);
}
.ref-hero h2 {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.6px;
margin-bottom: 8px;
}
.ref-hero .ref-hero-sub {
color: rgba(255,255,255,0.65);
font-size: 13.5px;
margin-bottom: 18px;
max-width: 360px;
}
.ref-code-block {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
padding: 16px 20px;
margin-bottom: 12px;
}
.ref-code-block .label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: rgba(255,255,255,0.5);
font-weight: 600;
}
.ref-code {
font-family: var(--font-mono);
font-size: 28px;
font-weight: 700;
letter-spacing: 6px;
margin-top: 6px;
}
.ref-url-row {
display: flex;
gap: 8px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
padding: 8px 10px;
align-items: center;
}
.ref-url-row code {
font-family: var(--font-mono);
font-size: 12px;
color: rgba(255,255,255,0.75);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ref-url-row button {
background: var(--accent);
color: #fff;
border: none;
padding: 7px 14px;
border-radius: 6px;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.ref-url-row button:hover { background: var(--accent-hover); }
.qr-frame {
background: #fff;
border-radius: 12px;
padding: 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.qr-frame svg { display: block; }
.qr-frame .qr-cap {
font-size: 11px;
color: var(--muted);
text-align: center;
letter-spacing: 0.3px;
}
.share-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.share-tile {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 16px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
transition: background var(--transition), border-color var(--transition);
text-align: center;
font-family: inherit;
color: var(--text);
}
.share-tile:hover { background: var(--bg-app); }
.share-tile .icon-box {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--bg-app);
display: flex; align-items: center; justify-content: center;
color: var(--text);
}
.share-tile .name { font-size: 12.5px; font-weight: 600; }
.share-tile .hint { font-size: 11px; color: var(--muted); }
/* ── Compliance footer ─────────────────────────────────────────────────── */
.compliance-foot {
margin-top: 36px;
font-size: 11.5px;
color: var(--muted);
text-align: center;
letter-spacing: 0.2px;
}
/* ── Toast ─────────────────────────────────────────────────────────────── */
.shell-toast {
position: fixed; bottom: 24px; right: 24px;
padding: 11px 18px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
z-index: 1000; pointer-events: none;
background: #111; color: #fff;
display: flex; align-items: center; gap: 8px;
opacity: 0; transform: translateY(6px);
transition: opacity 0.2s, transform 0.2s;
box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.shell-toast.visible { opacity: 1; transform: none; }
.shell-toast .dot {
width: 8px; height: 8px; border-radius: 99px;
background: var(--accent);
}
/* ── Chart helpers ─────────────────────────────────────────────────────── */
.chart-legend {
display: flex; gap: 16px; align-items: center;
font-size: 12px; color: var(--muted);
}
.chart-legend .swatch {
display: inline-block;
width: 10px; height: 10px;
border-radius: 2px;
margin-right: 6px;
vertical-align: middle;
}
.chart-legend .lbl { color: var(--text); font-weight: 500; }
/* ── Donut number overlay ──────────────────────────────────────────────── */
.donut-stack { position: relative; display: inline-block; }
.donut-stack .center {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
}
.donut-stack .center .v { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.donut-stack .center .l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
/* ── Settings tabs ─────────────────────────────────────────────────────── */
.settings-shell {
display: grid;
grid-template-columns: 220px 1fr;
gap: 24px;
}
@media (max-width: 900px) {
.settings-shell { grid-template-columns: 1fr; }
}
.settings-nav {
display: flex;
flex-direction: column;
gap: 2px;
}
.settings-nav button {
background: transparent;
border: none;
text-align: left;
padding: 9px 12px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: var(--muted);
cursor: pointer;
font-family: inherit;
}
.settings-nav button:hover { color: var(--text); background: var(--surface); }
.settings-nav button.active {
color: var(--text); background: var(--surface);
border: 1px solid var(--border);
}
.setting-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
padding: 16px 0;
border-top: 1px solid var(--border);
align-items: center;
}
.setting-row:first-child { border-top: none; padding-top: 0; }
.setting-row .name { font-size: 13.5px; font-weight: 600; }
.setting-row .desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; max-width: 480px; }
/* ── Switch ────────────────────────────────────────────────────────────── */
.switch {
position: relative;
display: inline-block;
width: 40px; height: 22px;
cursor: pointer;
flex-shrink: 0;
}
.switch input { display: none; }
.switch .track {
position: absolute; inset: 0;
background: var(--border);
border-radius: 99px;
transition: background var(--transition);
}
.switch .knob {
position: absolute;
top: 2px; left: 2px;
width: 18px; height: 18px;
border-radius: 99px;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
transition: transform var(--transition);
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track + .knob { transform: translateX(18px); }
/* ── Misc ──────────────────────────────────────────────────────────────── */
.divider {
height: 1px; background: var(--border); border: none;
margin: 16px 0;
}
.row-flex { display: flex; align-items: center; gap: 12px; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
/* Empty state */
.empty-state {
text-align: center;
padding: 56px 24px;
color: var(--muted);
}
.empty-state svg { margin-bottom: 14px; opacity: 0.35; }
.empty-state h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty-state p { font-size: 13.5px; max-width: 360px; margin: 0 auto 18px; }
/* Stat strip — refined Linear/Notion-style cell grid */
.stat-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--card-shadow);
overflow: hidden;
margin-bottom: 18px;
}
.stat-strip > div {
padding: 18px 22px;
border-right: 1px solid var(--border);
min-width: 0;
transition: background 160ms ease;
}
.stat-strip > div:last-child { border-right: none; }
.stat-strip > div:hover { background: var(--surface-alt); }
.stat-strip .lbl {
font-size: 11px; font-weight: 600; text-transform: uppercase;
color: var(--muted); letter-spacing: 0.06em;
}
.stat-strip .v {
font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
margin-top: 6px; line-height: 1.12;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.stat-strip .s { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
/* Wide — bigger numbers, more padding */
@media (min-width: 1700px) {
.stat-strip > div { padding: 22px 26px; }
.stat-strip .v { font-size: 28px; }
}
@media (min-width: 2400px) {
.stat-strip > div { padding: 26px 30px; }
.stat-strip .v { font-size: 32px; }
.stat-strip .lbl { font-size: 11.5px; }
}
/* Tablet — 2x2 grid; restore borders that border-right disabled */
@media (max-width: 900px) {
.stat-strip { grid-template-columns: repeat(2, 1fr); }
.stat-strip > div { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stat-strip > div:nth-child(2n) { border-right: none; }
.stat-strip > div:nth-last-child(-n+2) { border-bottom: none; }
}
/* Mobile — stack; restore borders */
@media (max-width: 560px) {
.stat-strip { grid-template-columns: 1fr; }
.stat-strip > div { border-right: none !important; border-bottom: 1px solid var(--border); padding: 14px 18px; }
.stat-strip > div:last-child { border-bottom: none; }
.stat-strip .v { font-size: 20px; }
}
/* ───────────────────────────────────────────────────────────────────────────
Rewards page — v3, highly detailed premium pass
─────────────────────────────────────────────────────────────────────────── */
/* ── Reveal animations ────────────────────────────────────────────────── */
.reveal {
opacity: 0;
transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);
will-change: opacity, transform;
}
.reveal-up { transform: translateY(18px); }
.reveal-down { transform: translateY(-12px); }
.reveal-fade { transform: none; }
.reveal-zoom { transform: scale(0.96); }
.reveal-tilt { transform: translateY(20px) rotate(-1.5deg); }
.reveal.in { opacity: 1; transform: none; }
/* ── Spotlight cursor wash on hover ───────────────────────────────────── */
.spotlight { position: relative; isolation: isolate; }
.spotlight::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
var(--spot-size, 240px) circle at var(--mx, 50%) var(--my, 50%),
var(--spot-color, rgba(217,119,6,0.08)),
transparent 70%
);
opacity: var(--mo, 0);
transition: opacity 0.25s;
pointer-events: none;
z-index: 0;
}
.spotlight > * { position: relative; z-index: 1; }
/* ── Parallax on the hero (applied to gift box + amount) ─────────────── */
.r-hero { --px: 0; --py: 0; }
.r-hero-gift {
transform: translate(calc(var(--px, 0) * -1.6px), calc(var(--py, 0) * -1.2px));
transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.r-hero-display .amount {
transform: translate(calc(var(--px, 0) * 0.4px), calc(var(--py, 0) * 0.3px));
transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
/* ── Hero — anchored on next bonus + gift box with progress ring ──────── */
.r-hero {
position: relative;
background: #0d0d0e;
color: #fff;
border-radius: 16px;
padding: clamp(28px, 2.6vw, 44px);
display: grid;
grid-template-columns: 1fr auto;
gap: clamp(20px, 2.4vw, 32px);
align-items: center;
overflow: hidden;
margin-bottom: 36px;
box-shadow:
0 1px 3px rgba(0,0,0,0.10),
0 1px 2px rgba(0,0,0,0.05);
}
/* Top amber stripe */
.r-hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent);
}
/* Atmospheric amber wash from the right */
.r-hero::after {
content: '';
position: absolute;
right: -180px; bottom: -180px;
width: 460px; height: 460px;
background: radial-gradient(circle, rgba(217,119,6,0.22), transparent 60%);
pointer-events: none;
}
/* Subtle dot grid texture */
.r-hero-bg {
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 0);
background-size: 22px 22px;
pointer-events: none;
mask-image: linear-gradient(135deg, black, transparent 70%);
-webkit-mask-image: linear-gradient(135deg, black, transparent 70%);
}
/* Hairline accent corners */
.r-hero .corner {
position: absolute;
width: 24px; height: 24px;
border-color: rgba(255,255,255,0.18);
pointer-events: none;
}
.r-hero .corner.tl { top: 16px; left: 16px; border-top: 1px solid; border-left: 1px solid; }
.r-hero .corner.tr { top: 16px; right: 16px; border-top: 1px solid; border-right: 1px solid; }
.r-hero .corner.bl { bottom: 16px; left: 16px; border-bottom: 1px solid; border-left: 1px solid; }
.r-hero .corner.br { bottom: 16px; right: 16px; border-bottom: 1px solid; border-right: 1px solid; }
.r-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
position: relative;
z-index: 2;
}
.r-hero-eyebrow .pulse {
width: 6px; height: 6px;
border-radius: 99px;
background: var(--accent);
position: relative;
}
.r-hero-eyebrow .pulse::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 99px;
background: var(--accent);
opacity: 0.25;
animation: pulse-ring 1.8s cubic-bezier(0,.55,.45,1) infinite;
}
@keyframes pulse-ring {
0% { transform: scale(0.6); opacity: 0.35; }
100% { transform: scale(2.2); opacity: 0; }
}
.r-hero-eyebrow .dot-sep { color: rgba(255,255,255,0.3); }
.r-hero-display {
position: relative;
z-index: 2;
margin-top: 22px;
}
.r-hero-display .small-lead {
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,0.55);
letter-spacing: 0.2px;
}
.r-hero-display .amount {
font-size: clamp(64px, 7vw, 104px);
font-weight: 800;
letter-spacing: -4.5px;
line-height: 0.95;
margin-top: 4px;
font-variant-numeric: tabular-nums;
color: #fff;
display: inline-block;
position: relative;
}
.r-hero-display .amount sup {
font-size: 28px;
font-weight: 700;
letter-spacing: 0;
color: var(--accent);
vertical-align: super;
margin-left: 4px;
top: -0.4em;
}
.r-hero-display .post {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
font-size: 14px;
color: rgba(255,255,255,0.7);
font-weight: 500;
}
.r-hero-display .chip-rank {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
background: rgba(217,119,6,0.16);
color: #fdba74;
padding: 4px 10px;
border-radius: 99px;
}
.r-hero-progress {
position: relative;
z-index: 2;
margin-top: 26px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.08);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
max-width: 580px;
}
.r-hero-progress > div {
padding: 0 24px;
border-left: 1px solid rgba(255,255,255,0.08);
}
.r-hero-progress > div:first-child { padding-left: 0; border-left: none; }
.r-hero-progress .lbl {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.7px;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
.r-hero-progress .val {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.5px;
font-variant-numeric: tabular-nums;
margin-top: 4px;
color: #fff;
}
.r-hero-progress .val .pct {
color: var(--accent);
font-size: 16px;
font-weight: 700;
margin-left: 4px;
}
/* Gift box + ring */
.r-hero-gift {
position: relative;
width: clamp(200px, 18vw, 280px);
height: clamp(200px, 18vw, 280px);
flex-shrink: 0;
z-index: 2;
}
.r-hero-gift .ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.r-hero-gift .ring .track {
fill: none;
stroke: rgba(255,255,255,0.08);
stroke-width: 2;
}
.r-hero-gift .ring .arc {
fill: none;
stroke: var(--accent);
stroke-width: 3;
stroke-linecap: round;
filter: drop-shadow(0 0 8px rgba(217,119,6,0.6));
transition: stroke-dasharray 1.2s cubic-bezier(.2,.8,.2,1);
}
.r-hero-gift .ring .tick {
fill: rgba(255,255,255,0.15);
}
.r-hero-gift .ring .tick.active {
fill: var(--accent);
}
.r-hero-gift .ring .tick-label {
font-family: var(--font-mono);
font-size: 8px;
fill: rgba(255,255,255,0.45);
letter-spacing: 0.6px;
}
.r-hero-gift .gift-img {
position: absolute;
inset: 16%;
display: block;
width: 68%;
height: 68%;
filter: drop-shadow(0 20px 30px rgba(217,119,6,0.22))
drop-shadow(0 6px 16px rgba(0,0,0,0.5));
animation: r-gift-float 5s ease-in-out infinite;
}
@keyframes r-gift-float {
0%, 100% { transform: translateY(0) rotate(-1.5deg); }
50% { transform: translateY(-6px) rotate(1.5deg); }
}
@media (max-width: 1100px) {
.r-hero { grid-template-columns: 1fr; padding: 32px; }
.r-hero-display .amount { font-size: 72px; letter-spacing: -3px; }
.r-hero-gift { width: 200px; height: 200px; margin: 0 auto; }
.r-hero-progress { max-width: none; }
}
/* ── Section heading ──────────────────────────────────────────────────── */
.r-section { margin-bottom: 40px; }
.r-section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 20px;
gap: 20px;
flex-wrap: wrap;
}
.r-section-head .eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
}
.r-section-head .eyebrow::before {
content: '';
width: 12px;
height: 1px;
background: var(--accent);
}
.r-section-head h2 {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.5px;
line-height: 1.2;
}
.r-section-head .sub {
font-size: 13px;
color: var(--muted);
margin-top: 6px;
max-width: 540px;
line-height: 1.55;
}
/* ── Journey stepper — cinematic ──────────────────────────────────────── */
.r-journey {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 26px 32px 22px;
margin-bottom: 18px;
box-shadow: var(--card-shadow);
position: relative;
overflow: hidden;
}
/* Subtle dot grid in the journey card */
.r-journey::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(17,17,17,0.04) 1px, transparent 0);
background-size: 20px 20px;
pointer-events: none;
mask-image: linear-gradient(135deg, black, transparent 55%);
-webkit-mask-image: linear-gradient(135deg, black, transparent 55%);
z-index: 0;
}
.r-journey > * { position: relative; z-index: 1; }
.r-journey-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 28px;
gap: 24px;
flex-wrap: wrap;
}
.r-journey-head .l {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.r-journey-head .h {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.3px;
}
.r-journey-head .total-block {
text-align: right;
position: relative;
}
.r-journey-head .total-pre {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--muted);
}
.r-journey-head .total-amt {
font-size: 36px;
font-weight: 800;
letter-spacing: -1.2px;
font-variant-numeric: tabular-nums;
color: var(--text);
line-height: 1;
margin-top: 4px;
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 8px;
}
.r-journey-head .total-amt .accent { color: var(--accent); }
.r-journey-head .total-cap {
font-size: 12px;
color: var(--muted);
margin-top: 6px;
}
/* The rail */
.r-journey-rail {
position: relative;
padding: 0 4%;
margin-top: 10px;
}
.r-journey-rail .bonus-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-bottom: 12px;
position: relative;
z-index: 2;
/* push pills to sit centered above each gap between nodes */
}
.r-journey-bonus {
display: inline-flex;
align-items: center;
gap: 5px;
justify-self: center;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
font-variant-numeric: tabular-nums;
background: var(--surface);
border: 1px solid var(--border);
padding: 5px 11px;
border-radius: 99px;
color: var(--text);
position: relative;
transition: border-color 0.25s, color 0.25s, transform 0.25s;
}
.r-journey-bonus::after {
/* down-pointing chevron tucks into the rail */
content: '';
position: absolute;
bottom: -5px;
left: 50%;
width: 8px; height: 8px;
transform: translateX(-50%) rotate(45deg);
background: var(--surface);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.r-journey-bonus.earned {
color: var(--accent);
border-color: var(--accent);
}
.r-journey-bonus.earned::after { border-color: var(--accent); }
.r-journey-bonus.current {
color: #fff;
background: var(--accent);
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(217,119,6,0.25);
}
.r-journey-bonus.current::after { background: var(--accent); border-color: var(--accent); }
.r-journey-bonus.locked { opacity: 1; color: var(--teal); border-color: rgba(13, 148, 136, 0.40); background: var(--teal-tint); }
.r-journey-bonus.locked::after { border-color: rgba(13, 148, 136, 0.40); background: var(--teal-tint); }
.r-journey-track {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: center;
padding: 18px 0 4px;
}
.r-journey-track::before {
content: '';
position: absolute;
top: 28px;
left: 10%;
right: 10%;
height: 4px;
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: 99px;
}
.r-journey-fill {
position: absolute;
top: 28px;
left: 10%;
height: 4px;
background: var(--accent);
border-radius: 99px;
box-shadow: 0 0 12px rgba(217,119,6,0.4);
transition: width 1.4s cubic-bezier(.2,.8,.2,1);
}
.r-journey-node {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
z-index: 2;
}
.r-journey-node .crest {
width: 44px; height: 44px;
border-radius: 99px;
background: var(--surface);
border: 2px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: transform 0.25s, border-color 0.25s, background 0.25s;
}
.r-journey-node.earned .crest { border-color: var(--accent); background: var(--accent); }
.r-journey-node.earned .crest svg { color: #fff; }
.r-journey-node.current .crest {
border-color: var(--accent);
background: #fff;
box-shadow:
0 0 0 4px rgba(217,119,6,0.18),
0 4px 12px rgba(217,119,6,0.25);
}
.r-journey-node.current .crest::after {
content: '';
position: absolute;
inset: -6px;
border-radius: 99px;
border: 1px solid var(--accent);
opacity: 0.5;
animation: jpulse 2s ease-in-out infinite;
}
@keyframes jpulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.15); opacity: 0; }
}
.r-journey-node:hover .crest { transform: scale(1.08); }
.r-journey-node .nm {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--text);
margin-top: 14px;
}
.r-journey-node.locked .nm { color: var(--muted); }
.r-journey-node.current .nm { color: var(--accent); }
.r-journey-node .nm-sub {
font-size: 10px;
font-weight: 500;
color: var(--muted);
margin-top: 3px;
letter-spacing: 0.3px;
}
.r-journey-node.current .nm-sub { color: var(--accent); font-weight: 600; }
/* ── Rank tier cards ──────────────────────────────────────────────────── */
.r-ladder {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
}
@media (max-width: 1100px) { .r-ladder { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .r-ladder { grid-template-columns: repeat(2, 1fr); } }
.r-tier {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 22px 18px 18px;
display: flex;
flex-direction: column;
position: relative;
min-height: 380px;
box-shadow: var(--card-shadow);
transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s, border-color 0.22s;
overflow: hidden;
--mx: 50%; --my: 50%; --mo: 0;
}
/* Spotlight wash that follows cursor */
.r-tier::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
260px circle at var(--mx) var(--my),
rgba(217,119,6,0.10),
transparent 70%
);
opacity: var(--mo);
transition: opacity 0.25s;
pointer-events: none;
z-index: 0;
}
.r-tier > * { position: relative; z-index: 1; }
.r-tier:hover:not(.locked) {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
}
.r-tier .mark-stage {
display: flex;
justify-content: center;
align-items: flex-end;
height: 100px;
margin-bottom: 8px;
position: relative;
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.r-tier:hover:not(.locked) .mark-stage { transform: translateY(-2px); }
.r-tier .mark-stage::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 64px;
height: 8px;
transform: translateX(-50%);
background: radial-gradient(ellipse, rgba(0,0,0,0.12), transparent 70%);
pointer-events: none;
}
.r-tier .tier-status {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
text-align: center;
color: var(--muted);
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.r-tier .tier-status.current { color: var(--accent); }
.r-tier .tier-status.earned { color: var(--muted); }
.r-tier .tier-name {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.4px;
text-align: center;
margin-top: 6px;
color: var(--text);
}
.r-tier .tier-tagline {
text-align: center;
font-size: 11.5px;
font-style: italic;
color: var(--muted);
margin-top: 6px;
line-height: 1.4;
min-height: 32px;
}
.r-tier .bonus {
margin-top: 14px;
padding: 13px 10px;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 8px;
text-align: center;
position: relative;
}
.r-tier.locked .bonus { background: transparent; border: 1px dashed var(--border); }
.r-tier .bonus .amt {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.8px;
font-variant-numeric: tabular-nums;
color: var(--text);
line-height: 1;
font-family: var(--font-sans);
}
.r-tier .bonus .lbl {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--muted);
margin-top: 7px;
font-family: var(--font-mono);
}
.r-tier .bonus.none .amt { color: var(--muted-2); font-size: 16px; letter-spacing: 0; font-weight: 700; }
.r-tier.locked .bonus .amt { opacity: 0.72; }
.r-tier .req {
margin-top: 14px;
display: grid;
gap: 6px;
text-align: center;
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.r-tier .req .pair {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--text);
}
.r-tier .req svg { color: var(--muted); }
.r-tier .req .or {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 1.4px;
color: var(--muted-2);
font-weight: 700;
}
.r-tier .req .or::before,
.r-tier .req .or::after {
content: '';
display: inline-block;
width: 22px; height: 1px;
background: var(--border);
vertical-align: middle;
margin: 0 8px;
}
.r-tier .foot {
margin-top: auto;
padding-top: 14px;
border-top: 1px dashed var(--border);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
font-size: 11px;
font-variant-numeric: tabular-nums;
}
.r-tier .foot .stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.r-tier .foot .stat .l {
color: var(--muted);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.r-tier .foot .stat .v { font-weight: 700; color: var(--text); font-size: 13px; }
.r-tier .foot .stat .v.zero { color: var(--muted-2); }
.r-tier .foot .stat.right { text-align: right; }
/* Current state */
.r-tier.current {
border-color: var(--accent);
background: var(--surface);
position: relative;
}
.r-tier.current::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 12px;
border: 1px solid var(--accent);
pointer-events: none;
opacity: 0.4;
box-shadow: 0 0 0 4px rgba(217,119,6,0.08);
}
.r-tier.current .bonus {
background: var(--surface-alt);
border-color: var(--border);
}
.r-tier.current .bonus .amt { color: var(--text); }
.r-tier.current .bonus::before {
content: 'Already earned';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
background: var(--surface);
color: var(--muted);
padding: 0 6px;
font-family: var(--font-mono);
}
/* Locked tier that IS the next-target (just above current) — the lure */
.r-tier.next-target .bonus {
background: rgba(217,119,6,0.06);
border: 1px solid rgba(217,119,6,0.35);
}
.r-tier.next-target .bonus .amt { color: var(--accent); }
.r-tier.next-target .bonus .lbl { color: var(--accent); opacity: 0.85; }
.r-tier.next-target .bonus::before {
content: 'You\'re next';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
background: var(--accent);
color: #fff;
padding: 2px 8px;
border-radius: 99px;
font-family: var(--font-mono);
box-shadow: 0 2px 4px rgba(217,119,6,0.25);
}
/* Locked subtle effect */
.r-tier.locked { background: var(--surface); }
.r-tier.locked .tier-tagline { color: var(--muted-2); }
.r-tier.locked .tier-name { color: var(--text); }
.r-tier.locked:hover { border-color: var(--teal); }
.r-tier.locked:hover .bonus { border-color: var(--teal); border-style: solid; background: var(--teal-tint); }
.r-tier.locked:hover .bonus .amt { color: var(--teal); }
/* Highest two tiers (Master / Legend) — indigo signal */
.r-tier.locked.elite-tier .tier-name {
display: inline-flex;
align-items: center;
gap: 6px;
}
.r-tier.locked.elite-tier .tier-name::after {
content: '';
display: inline-block;
width: 6px; height: 6px;
border-radius: 99px;
background: var(--indigo);
box-shadow: 0 0 6px rgba(79,70,229,0.5);
vertical-align: middle;
}
/* Earned state */
.r-tier.earned .mark-stage { opacity: 0.92; }
.r-tier.earned .tier-status::before {
content: '';
width: 12px; height: 12px;
border-radius: 99px;
background: var(--success-bg-2);
display: inline-flex;
}
/* ── Milestones — compact: shelf + in-progress cards ──────────────────── */
.r-milestones-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 12px;
}
.r-milestones-tabs {
display: inline-flex;
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: 8px;
padding: 3px;
}
.r-milestones-tabs button {
background: transparent;
border: none;
padding: 5px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
color: var(--muted);
cursor: pointer;
font-family: inherit;
transition: background 0.15s, color 0.15s;
}
.r-milestones-tabs button.active {
background: var(--surface);
color: var(--text);
box-shadow: var(--card-shadow);
}
/* Earned shelf — trophy case row */
.r-shelf {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 18px;
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.r-shelf .head {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--muted);
min-width: 100px;
}
.r-shelf .head .count {
color: var(--text);
font-size: 18px;
letter-spacing: -0.3px;
display: block;
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.r-shelf .head .count strong { color: var(--accent); font-weight: 800; }
.r-shelf .row {
display: flex;
gap: 10px;
flex: 1;
flex-wrap: wrap;
align-items: center;
}
.r-shelf .pin {
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--bg-app);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: #111;
position: relative;
transition: transform 0.2s, border-color 0.2s, background 0.2s;
cursor: default;
}
.r-shelf .pin::after {
content: attr(data-name);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: #111;
color: #fff;
font-size: 11px;
font-weight: 500;
padding: 4px 10px;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s, transform 0.15s;
z-index: 4;
}
.r-shelf .pin:hover {
border-color: var(--accent);
background: var(--surface);
transform: translateY(-2px);
}
.r-shelf .pin:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* In-progress milestones — 3 cards */
.r-progress-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 14px;
}
@media (max-width: 1000px) { .r-progress-grid { grid-template-columns: 1fr; } }
.r-prog {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s, border-color 0.22s;
--mx: 50%; --my: 50%; --mo: 0;
}
.r-prog::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(220px circle at var(--mx) var(--my), rgba(217,119,6,0.08), transparent 70%);
opacity: var(--mo);
transition: opacity 0.25s;
pointer-events: none;
z-index: 0;
}
.r-prog > * { position: relative; z-index: 1; }
.r-prog:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,0.06), var(--card-shadow);
border-color: rgba(217,119,6,0.4);
}
.r-prog .top {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.r-prog .mark {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--bg-app);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: #111;
}
.r-prog .pct {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 800;
letter-spacing: -0.5px;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.r-prog .pct sup { font-size: 12px; color: var(--muted); font-weight: 700; }
.r-prog .name {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.1px;
line-height: 1.2;
}
.r-prog .desc {
font-size: 12px;
color: var(--muted);
line-height: 1.5;
}
.r-prog .meter {
height: 5px;
background: var(--border);
border-radius: 99px;
overflow: hidden;
margin-top: auto;
}
.r-prog .meter > div {
height: 100%;
background: var(--text);
border-radius: 99px;
transition: width 1.2s cubic-bezier(.2,.8,.2,1);
}
.r-prog .meta {
font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--muted);
display: flex;
justify-content: space-between;
}
/* Featured (first card) */
.r-prog.featured {
background: #0d0d0e;
color: #fff;
border-color: #0d0d0e;
}
.r-prog.featured::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent);
}
.r-prog.featured .mark { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: var(--accent); }
.r-prog.featured .name { color: #fff; font-size: 17px; }
.r-prog.featured .desc { color: rgba(255,255,255,0.6); }
.r-prog.featured .pct { color: var(--accent); }
.r-prog.featured .pct sup { color: rgba(255,255,255,0.5); }
.r-prog.featured .meter { background: rgba(255,255,255,0.10); }
.r-prog.featured .meter > div { background: var(--accent); }
.r-prog.featured .meta { color: rgba(255,255,255,0.55); }
.r-prog.featured .badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--accent);
background: rgba(217,119,6,0.16);
padding: 4px 9px;
border-radius: 99px;
margin-bottom: 8px;
width: fit-content;
}
/* ── Pool + Challenges ────────────────────────────────────────────────── */
.r-pool-row {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 16px;
}
@media (max-width: 1000px) { .r-pool-row { grid-template-columns: 1fr; } }
.r-pool {
background: #0d0d0e;
color: #fff;
border: 1px solid #0d0d0e;
border-radius: 14px;
padding: 28px 30px;
position: relative;
overflow: hidden;
}
.r-pool::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent);
}
.r-pool::after {
content: '';
position: absolute;
right: -120px; top: -100px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(217,119,6,0.18), transparent 65%);
pointer-events: none;
}
.r-pool .corner-grid {
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
background-size: 22px 22px;
pointer-events: none;
mask-image: linear-gradient(135deg, black, transparent 60%);
-webkit-mask-image: linear-gradient(135deg, black, transparent 60%);
}
.r-pool > * { position: relative; z-index: 1; }
.r-pool .card-label { color: rgba(255,255,255,0.5); }
.r-pool .card-sub { color: rgba(255,255,255,0.5); }
.r-pool .pool-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
}
.r-pool .pool-amt {
font-size: 56px;
font-weight: 800;
letter-spacing: -2px;
font-variant-numeric: tabular-nums;
line-height: 1;
margin-top: 8px;
color: #fff;
}
.r-pool .pool-est-wrap {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 14px 18px;
text-align: right;
min-width: 180px;
}
.r-pool .pool-est {
font-size: 26px;
font-weight: 800;
letter-spacing: -0.8px;
font-variant-numeric: tabular-nums;
color: var(--accent);
line-height: 1;
margin-top: 4px;
}
.r-pool .pool-est .pre {
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
display: block;
text-align: right;
margin-bottom: 4px;
}
.r-pool .pool-rows {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.r-pool .pool-rows > div {
padding: 11px 0;
display: flex;
justify-content: space-between;
font-size: 13px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.r-pool .pool-rows > div:last-child { border-bottom: none; }
.r-pool .pool-rows .l { color: rgba(255,255,255,0.55); }
.r-pool .pool-rows .v { font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; }
.r-pool .pool-rows .v.up { color: #5eead4; display: inline-flex; align-items: center; gap: 4px; }
.r-pool .pool-rows .v .sub { color: rgba(255,255,255,0.45); font-weight: 400; font-size: 11.5px; margin-left: 6px; }
.r-chal {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 22px;
}
.r-chal-row { padding: 14px 0; border-bottom: 1px solid var(--border); }
.r-chal-row:last-child { border-bottom: none; padding-bottom: 0; }
.r-chal-row:first-child { padding-top: 0; }
.r-chal-row .head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
gap: 10px;
}
.r-chal-row .name {
font-size: 13.5px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 8px;
}
.r-chal-row .reward {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--accent);
background: rgba(217,119,6,0.10);
padding: 3px 8px;
border-radius: 99px;
}
.r-chal-row .desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
.r-chal-row .meter {
height: 4px;
background: var(--border);
border-radius: 99px;
margin-top: 10px;
overflow: hidden;
}
.r-chal-row .meter > div { height: 100%; background: var(--accent); border-radius: 99px; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.r-chal-row .meta {
font-size: 11px;
color: var(--muted);
margin-top: 6px;
font-variant-numeric: tabular-nums;
display: flex;
justify-content: space-between;
}
/* ── Leaderboard ──────────────────────────────────────────────────────── */
.r-lb {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.r-lb-row {
display: grid;
grid-template-columns: 44px 1fr auto auto;
align-items: center;
gap: 14px;
padding: 14px 22px;
border-top: 1px solid var(--border);
transition: background 0.15s;
}
.r-lb-row:first-child { border-top: none; }
.r-lb-row:hover { background: var(--row-hover); }
.r-lb-row .rk {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.r-lb-row.podium-1 {
background: linear-gradient(90deg, rgba(217,119,6,0.06), transparent 60%);
position: relative;
}
.r-lb-row.podium-1::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--accent);
}
.r-lb-row.podium-1 .rk { color: var(--accent); font-weight: 800; }
.r-lb-row.podium-2 .rk { color: #6b7280; }
.r-lb-row.podium-3 .rk { color: #92400e; }
.r-lb-row.you { background: rgba(217,119,6,0.05); }
.r-lb-row.you:hover { background: rgba(217,119,6,0.08); }
.r-lb-row.you .rk { color: var(--accent); }
.r-lb-row .vol {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: 13.5px;
font-weight: 700;
}
/* ───────────────────────────────────────────────────────────────────────────
Payouts page — mirrors the Rewards design DNA
─────────────────────────────────────────────────────────────────────────── */
/* Countdown ring — replaces the gift box on the payouts hero */
.p-countdown {
position: relative;
width: 260px;
height: 260px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.p-countdown .ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.p-countdown .ring .track {
fill: none;
stroke: rgba(255,255,255,0.08);
stroke-width: 2;
}
.p-countdown .ring .arc {
fill: none;
stroke: var(--accent);
stroke-width: 3;
stroke-linecap: round;
filter: drop-shadow(0 0 8px rgba(217,119,6,0.6));
transition: stroke-dasharray 1.2s cubic-bezier(.2,.8,.2,1);
}
.p-countdown .center {
text-align: center;
position: relative;
z-index: 2;
}
.p-countdown .center .days {
font-size: 80px;
font-weight: 800;
letter-spacing: -3px;
line-height: 1;
font-variant-numeric: tabular-nums;
color: #fff;
}
.p-countdown .center .days sup {
font-size: 22px;
font-weight: 700;
color: var(--accent);
vertical-align: super;
margin-left: 2px;
top: -0.5em;
position: relative;
}
.p-countdown .center .lbl {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin-top: 6px;
}
.p-countdown .center .date {
font-size: 11.5px;
color: rgba(255,255,255,0.65);
margin-top: 4px;
font-weight: 500;
}
/* Source breakdown — segmented bar + cards row */
.p-breakdown {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 26px;
box-shadow: var(--card-shadow);
position: relative;
overflow: hidden;
}
.p-breakdown::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(17,17,17,0.04) 1px, transparent 0);
background-size: 20px 20px;
pointer-events: none;
mask-image: linear-gradient(135deg, black, transparent 55%);
-webkit-mask-image: linear-gradient(135deg, black, transparent 55%);
}
.p-breakdown > * { position: relative; z-index: 1; }
.p-breakdown-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 22px;
gap: 20px;
flex-wrap: wrap;
}
.p-breakdown-head .total {
text-align: right;
}
.p-breakdown-head .total .pre {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--muted);
}
.p-breakdown-head .total .v {
font-size: 26px;
font-weight: 800;
letter-spacing: -0.8px;
font-variant-numeric: tabular-nums;
color: var(--text);
margin-top: 4px;
line-height: 1;
}
/* The big segmented bar */
.p-segbar {
display: flex;
height: 18px;
border-radius: 99px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--bg-app);
}
.p-segbar .seg {
height: 100%;
position: relative;
transition: width 1.4s cubic-bezier(.2,.8,.2,1);
}
.p-segbar .seg:not(:last-child) {
border-right: 1px solid rgba(255,255,255,0.35);
}
/* Source cards grid */
.p-source-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 20px;
}
@media (max-width: 900px) { .p-source-grid { grid-template-columns: repeat(2, 1fr); } }
.p-source {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
transition: border-color 0.2s, transform 0.2s;
}
.p-source:hover {
border-color: var(--text);
transform: translateY(-2px);
}
.p-source .top {
display: flex;
justify-content: space-between;
align-items: center;
}
.p-source .swatch {
width: 28px;
height: 28px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
}
.p-source .pct {
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 700;
color: var(--muted);
font-variant-numeric: tabular-nums;
padding: 3px 8px;
background: var(--bg-app);
border-radius: 99px;
}
.p-source .lbl {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--muted);
}
.p-source .amt {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.6px;
font-variant-numeric: tabular-nums;
color: var(--text);
line-height: 1.05;
}
/* Method card */
.p-method {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 22px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 20px;
}
.p-method-icon {
width: 56px;
height: 56px;
border-radius: 12px;
background: var(--bg-app);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
}
.p-method-name {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.1px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.p-method-addr {
font-size: 12.5px;
color: var(--muted);
margin-top: 4px;
font-family: var(--font-mono);
}
.p-method-meta {
font-size: 11.5px;
color: var(--muted);
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.p-method-meta .verified {
color: var(--teal);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
}
/* History table polish */
.p-history-row .receipt-btn {
opacity: 0;
transition: opacity 0.2s;
}
.p-history-row:hover .receipt-btn { opacity: 1; }
.p-history-row .id-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--muted);
padding: 2px 8px;
background: var(--bg-app);
border-radius: 6px;
border: 1px solid var(--border);
}
/* Lifetime stats row */
.p-lifetime {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 900px) { .p-lifetime { grid-template-columns: repeat(2, 1fr); } }
.p-lifetime .kpi {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 22px;
position: relative;
overflow: hidden;
transition: border-color 0.2s, transform 0.2s;
}
.p-lifetime .kpi:hover {
border-color: var(--text);
transform: translateY(-2px);
}
.p-lifetime .kpi .lbl {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--muted);
}
.p-lifetime .kpi .v {
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
font-variant-numeric: tabular-nums;
line-height: 1.05;
margin-top: 8px;
}
.p-lifetime .kpi .s {
font-size: 12px;
color: var(--muted);
margin-top: 6px;
}
.p-lifetime .kpi .ico {
position: absolute;
top: 18px;
right: 18px;
color: var(--muted-2);
opacity: 0.4;
}
/* Section spacing tweak for payouts (more breathing room) */
.r-section.compact { margin-bottom: 24px; }
/* ── REWARDS HERO v5 — "Cash stack" ─────────────────────────────────────
Full-width dark panel. No split layout. Top: headline + sub. Bottom:
horizontal bar chart of the four cash bonuses, scaled by sqrt of dollar
amount, treated like currency strips. Current target is the visual anchor.
─────────────────────────────────────────────────────────────────────── */
.r-hero.r-vault {
display: block;
grid-template-columns: none;
padding: 32px 40px 28px;
background:
radial-gradient(circle at 1px 1px, rgba(255,255,255,0.025) 1px, transparent 0),
linear-gradient(180deg, #0e0e10 0%, #08080a 100%);
background-size: 32px 32px, 100% 100%;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 14px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 1px 3px rgba(0,0,0,0.10);
}
.r-hero.r-vault::before {
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
opacity: 0.6;
}
/* Tech ticker bar above the chart */
.r-vault-ticker {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 26px;
padding: 9px 14px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 6px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.4px;
color: rgba(255,255,255,0.5);
position: relative;
z-index: 2;
overflow: hidden;
flex-wrap: wrap;
backdrop-filter: blur(8px);
}
.r-vault-ticker::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255,255,255,0.04), transparent 30%);
pointer-events: none;
}
.r-vault-ticker .item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.r-vault-ticker .item .lbl {
color: rgba(255,255,255,0.35);
text-transform: uppercase;
letter-spacing: 0.7px;
font-weight: 600;
}
.r-vault-ticker .item .val {
color: rgba(255,255,255,0.92);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.r-vault-ticker .item .val.amber { color: var(--accent); }
.r-vault-ticker .item .val.teal { color: #5eead4; }
.r-vault-ticker .item .live {
display: inline-flex;
align-items: center;
gap: 5px;
color: #5eead4;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.r-vault-ticker .item .live::before {
content: '';
width: 6px; height: 6px;
border-radius: 99px;
background: var(--teal);
box-shadow: 0 0 8px rgba(13, 148, 136, 0.7);
animation: live-blink 1.6s ease-in-out infinite;
}
@keyframes live-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.r-vault-ticker .sep {
width: 1px;
height: 14px;
background: rgba(255,255,255,0.08);
}
.r-vault-top {
display: grid;
grid-template-columns: 1fr auto;
align-items: flex-end;
gap: 32px;
margin-bottom: 36px;
position: relative;
z-index: 2;
}
.r-vault-headline {
font-size: 48px;
font-weight: 700;
letter-spacing: -1.6px;
line-height: 0.98;
color: #fff;
font-variant-numeric: tabular-nums;
margin-top: 14px;
text-wrap: balance;
}
.r-vault-headline .amt {
color: #fff;
font-weight: 800;
letter-spacing: -2px;
position: relative;
display: inline-block;
}
.r-vault-headline .amt::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 4px;
height: 8px;
background: var(--accent);
opacity: 0.18;
z-index: -1;
border-radius: 2px;
}
.r-vault-headline .at-top {
color: rgba(255,255,255,0.50);
font-weight: 500;
font-size: 32px;
letter-spacing: -0.8px;
}
.r-vault-sub {
font-size: 14px;
color: rgba(255,255,255,0.62);
line-height: 1.55;
max-width: 480px;
margin-top: 12px;
}
.r-vault-sub strong { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.r-vault-meta {
text-align: right;
white-space: nowrap;
}
.r-vault-meta .ml {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.r-vault-meta .mv {
font-size: 20px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #fff;
margin-top: 4px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.r-vault-meta .mv .crest {
width: 24px; height: 24px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 99px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ── Chart of cash bars ─────────────────────────────────────────────── */
.r-vault-chart {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
align-items: end;
position: relative;
z-index: 2;
padding: 0 4px 36px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Faint horizontal gridlines like a cash counter ledger */
.r-vault-chart::before {
content: '';
position: absolute;
inset: 0 0 36px 0;
background-image:
linear-gradient(to top, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 100% 50px;
background-position: 0 100%;
pointer-events: none;
}
.r-vault-bar {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
height: 100%;
position: relative;
cursor: default;
}
.r-vault-bar .cap {
text-align: center;
margin-bottom: 8px;
position: relative;
height: 56px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.r-vault-bar .cap .amt {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.5px;
font-variant-numeric: tabular-nums;
color: rgba(255,255,255,0.78);
line-height: 1;
}
.r-vault-bar .cap .stamp {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin-top: 6px;
}
.r-vault-bar .cap .stamp.earned { color: var(--accent); }
.r-vault-bar .cap .stamp.next {
color: #fff;
background: var(--accent);
padding: 3px 9px 3px 7px;
border-radius: 3px;
display: inline-flex;
align-items: center;
gap: 5px;
box-shadow: 0 2px 6px rgba(217,119,6,0.30), inset 0 1px 0 rgba(255,255,255,0.18);
position: relative;
font-size: 9px;
letter-spacing: 1.2px;
}
.r-vault-bar .cap .stamp.next::after {
content: '';
position: absolute;
bottom: -3px;
left: 50%;
width: 5px; height: 5px;
transform: translateX(-50%) rotate(45deg);
background: var(--accent);
}
/* The actual bar */
.r-vault-bar .body {
flex: 0 0 auto;
border-radius: 4px 4px 0 0;
position: relative;
overflow: hidden;
transition: height 1.4s cubic-bezier(.2,.8,.2,1);
}
.r-vault-bar.earned .body {
background:
linear-gradient(180deg, rgba(217,119,6,0.42) 0%, rgba(217,119,6,0.28) 100%);
border: 1px solid rgba(217,119,6,0.55);
border-bottom: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.r-vault-bar.current .body {
background:
linear-gradient(180deg, #e8881e 0%, #c46a05 100%);
border: 1px solid var(--accent);
border-bottom: none;
box-shadow:
0 -16px 40px -8px rgba(217,119,6,0.45),
inset 0 1px 0 rgba(255,255,255,0.22);
}
.r-vault-bar.current .body::after {
/* subtle texture lines, like banknote strips */
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
to bottom,
transparent 0 7px,
rgba(255,255,255,0.05) 7px 8px
);
pointer-events: none;
}
.r-vault-bar.earned .body::after {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
to bottom,
transparent 0 7px,
rgba(255,255,255,0.04) 7px 8px
);
pointer-events: none;
}
.r-vault-bar.locked .body {
background: var(--teal-tint);
border: 1px dashed rgba(13, 148, 136, 0.45);
border-bottom: none;
}
.r-vault-bar.locked .body::after {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
-45deg,
transparent 0 6px,
rgba(13, 148, 136, 0.08) 6px 7px
);
pointer-events: none;
}
.r-vault-bar.locked .denom { color: rgba(255,255,255,0.42); }
.r-vault-bar.locked .cap .stamp {
color: #5eead4;
letter-spacing: 1.6px;
}
/* Bar denomination label inside the bar */
.r-vault-bar .denom {
position: absolute;
bottom: 12px;
left: 0; right: 0;
text-align: center;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
z-index: 2;
}
.r-vault-bar.earned .denom { color: rgba(255,255,255,0.7); }
.r-vault-bar.current .denom { color: rgba(255,255,255,0.95); }
.r-vault-bar.locked .denom { color: rgba(255,255,255,0.35); }
/* Foot — rank name + crest */
.r-vault-bar .foot {
margin-top: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: rgba(255,255,255,0.7);
}
.r-vault-bar.current .foot { color: #fff; }
.r-vault-bar.locked .foot { color: rgba(255,255,255,0.45); }
.r-vault-bar .foot .nm {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.r-vault-bar .foot .crest {
width: 22px; height: 22px;
border-radius: 99px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
display: flex; align-items: center; justify-content: center;
}
.r-vault-bar.current .foot .crest {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.35);
}
/* Status footer below chart */
.r-vault-foot {
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12.5px;
color: rgba(255,255,255,0.65);
flex-wrap: wrap;
gap: 12px;
position: relative;
z-index: 2;
}
.r-vault-foot strong { color: #fff; font-weight: 600; }
.r-vault-foot .nextline {
display: inline-flex;
align-items: center;
gap: 8px;
}
.r-vault-foot .nextline .dot {
width: 6px; height: 6px;
border-radius: 99px;
background: var(--accent);
box-shadow: 0 0 8px rgba(217,119,6,0.6);
}
@media (max-width: 900px) {
.r-vault-headline { font-size: 44px; letter-spacing: -1.6px; }
.r-vault-top { grid-template-columns: 1fr; gap: 18px; }
.r-vault-meta { text-align: left; }
.r-vault-chart { gap: 10px; }
.r-vault-bar .cap .amt { font-size: 16px; }
}
.r-climb {
position: relative;
width: 380px;
height: 300px;
flex-shrink: 0;
z-index: 2;
}
.r-climb svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.r-climb path.trail-earned {
stroke: var(--accent);
stroke-width: 2.5;
fill: none;
stroke-linecap: round;
filter: drop-shadow(0 0 6px rgba(217,119,6,0.55));
}
.r-climb path.trail-locked {
stroke: rgba(255,255,255,0.16);
stroke-width: 1.5;
fill: none;
stroke-dasharray: 5 5;
}
.r-climb-node {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
transform: translate(-50%, -50%);
z-index: 3;
cursor: default;
}
.r-climb-node .crest {
width: 40px; height: 40px;
border-radius: 99px;
background: rgba(255,255,255,0.06);
border: 1.5px solid rgba(255,255,255,0.14);
display: flex; align-items: center; justify-content: center;
position: relative;
transition: transform 0.25s;
}
.r-climb-node.earned .crest { background: var(--accent); border-color: var(--accent); }
.r-climb-node.current .crest {
background: #fff;
border-color: var(--accent);
width: 52px; height: 52px;
box-shadow: 0 0 0 4px rgba(217,119,6,0.20), 0 0 24px rgba(217,119,6,0.45);
}
.r-climb-node.current .crest::after {
content: '';
position: absolute;
inset: -8px;
border-radius: 99px;
border: 1px solid var(--accent);
opacity: 0.55;
animation: jpulse 2.2s ease-in-out infinite;
}
.r-climb-node.locked .crest {
border-style: dashed;
background: rgba(255,255,255,0.03);
}
.r-climb-node:hover .crest { transform: scale(1.08); }
.r-climb-node .name {
position: absolute;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
margin-top: 8px;
color: rgba(255,255,255,0.85);
white-space: nowrap;
top: calc(100% + 4px);
}
.r-climb-node.locked .name { color: rgba(255,255,255,0.42); }
.r-climb-node.current .name { color: var(--accent); }
.r-climb-node .pin {
position: absolute;
bottom: calc(100% + 8px);
font-size: 9px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #fff;
background: var(--accent);
padding: 3px 7px;
border-radius: 99px;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(217,119,6,0.4);
}
.r-climb-node .pin::after {
content: '';
position: absolute;
bottom: -3px;
left: 50%;
width: 6px; height: 6px;
transform: translateX(-50%) rotate(45deg);
background: var(--accent);
}
.r-climb-chip {
position: absolute;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.85);
padding: 3px 8px;
border-radius: 99px;
white-space: nowrap;
transform: translate(-50%, -50%);
z-index: 4;
display: inline-flex;
align-items: center;
gap: 4px;
}
.r-climb-chip.earned { color: var(--accent); border-color: var(--accent); background: rgba(217,119,6,0.10); }
.r-climb-chip.current {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 4px 14px rgba(217,119,6,0.35);
}
/* ── Footnote (shared) ────────────────────────────────────────────────── */
.r-footnote {
margin-top: 32px;
padding-top: 18px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--muted);
line-height: 1.6;
}
.r-footnote strong { color: var(--text); font-weight: 600; }
/* ── Polish — text balance + interpolation ───────────────────────────── */
.page-title { text-wrap: balance; }
.r-section-head h2,
.cat-hero-headline,
.pkg-featured-name,
.pkg-card-name { text-wrap: balance; }
/* ── Polish — focus rings ────────────────────────────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ── Polish — smooth scroll behavior ────────────────────────────────── */
html { scroll-behavior: smooth; }
/* ── Polish — subtle scrollbar styling on dark surfaces ─────────────── */
.shell-sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
.shell-sidebar::-webkit-scrollbar { width: 6px; }
.shell-sidebar::-webkit-scrollbar-track { background: transparent; }
.shell-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; }
.shell-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }
/* ───────────────────────────────────────────────────────────────────────────
Wholesale-platform pages — Catalog, Inventory, Fulfillments, Tier projection
─────────────────────────────────────────────────────────────────────────── */
/* ── Catalog banner ───────────────────────────────────────────────────── */
.cat-banner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 18px;
padding: 16px 22px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
margin-bottom: 18px;
box-shadow: var(--card-shadow);
position: relative;
overflow: hidden;
}
.cat-banner::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3px;
background: var(--accent);
}
.cat-banner-icon {
flex-shrink: 0;
}
.cat-banner-eyebrow {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 4px;
}
.cat-banner-line {
font-size: 14.5px;
font-weight: 500;
color: var(--text);
}
.cat-banner-line strong {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.5px;
color: var(--accent);
margin-right: 6px;
vertical-align: -1px;
}
/* ── Catalog filters ─────────────────────────────────────────────────── */
.cat-filters {
display: flex;
align-items: center;
gap: 22px;
margin-bottom: 18px;
padding: 14px 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
flex-wrap: wrap;
}
.cat-filter-group {
display: inline-flex;
align-items: center;
gap: 8px;
}
.cat-filter-lbl {
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--muted);
font-family: var(--font-mono);
}
.cat-select {
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 26px 6px 10px;
font-size: 12.5px;
font-family: inherit;
cursor: pointer;
color: var(--text);
}
.cat-pill-row {
display: inline-flex;
gap: 4px;
flex-wrap: wrap;
}
.cat-pill {
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
padding: 5px 10px;
border-radius: 99px;
font-size: 11.5px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.cat-pill:hover { border-color: var(--text); color: var(--text); }
.cat-pill.active { background: #111; border-color: #111; color: #fff; }
.cat-pill.active.rarity-common { background: #94a3b8; border-color: #94a3b8; }
.cat-pill.active.rarity-uncommon { background: #0d9488; border-color: #0d9488; }
.cat-pill.active.rarity-rare { background: #2563eb; border-color: #2563eb; }
.cat-pill.active.rarity-epic { background: #7c3aed; border-color: #7c3aed; }
.cat-pill.active.rarity-legendary { background: #b45309; border-color: #b45309; }
.cat-view-toggle {
display: inline-flex;
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: 8px;
padding: 3px;
}
.cat-view-toggle button {
background: transparent;
border: none;
padding: 6px 10px;
border-radius: 5px;
color: var(--muted);
cursor: pointer;
font-family: inherit;
}
.cat-view-toggle button.active {
background: var(--surface);
color: var(--text);
box-shadow: var(--card-shadow);
}
/* ── Catalog cards (grid) ─────────────────────────────────────────────── */
.cat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
gap: 16px;
margin-bottom: 28px;
}
.cat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s, border-color 0.22s;
position: relative;
--mx: 50%; --my: 50%; --mo: 0;
}
.cat-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(220px circle at var(--mx) var(--my), rgba(217,119,6,0.06), transparent 70%);
opacity: var(--mo);
transition: opacity 0.25s;
pointer-events: none;
z-index: 2;
}
.cat-card > * { position: relative; z-index: 1; }
.cat-card:hover {
transform: translateY(-3px);
border-color: var(--accent);
box-shadow: 0 10px 24px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
}
.cat-card-image {
position: relative;
aspect-ratio: 16 / 10;
background: #111;
display: block;
}
.cat-rarity {
position: absolute;
top: 8px; right: 8px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 4px;
font-family: var(--font-mono);
background: rgba(255,255,255,0.95);
color: #111;
border: 1px solid rgba(0,0,0,0.06);
z-index: 2;
}
.cat-rarity.sm { font-size: 9px; padding: 2px 7px; }
.cat-rarity.rarity-common { background: #f1f5f9; color: #475569; }
.cat-rarity.rarity-uncommon { background: #ecfdf5; color: #065f46; }
.cat-rarity.rarity-rare { background: #eff6ff; color: #1e40af; }
.cat-rarity.rarity-epic { background: #f5f3ff; color: #6b21a8; }
.cat-rarity.rarity-legendary { background: #fef3c7; color: #92400e; }
.cat-stock-flag {
position: absolute;
bottom: 8px; left: 8px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 4px;
font-family: var(--font-mono);
background: var(--danger);
color: #fff;
z-index: 2;
}
.cat-card-body {
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.cat-card-game {
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--muted);
font-family: var(--font-mono);
}
.cat-card-name {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.2px;
line-height: 1.25;
}
.cat-card-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2px;
}
.cat-card-id {
font-size: 10.5px;
color: var(--muted-2);
font-weight: 500;
}
.cat-card-trend {
font-size: 10.5px;
font-weight: 600;
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
}
.trend-up { color: var(--teal); }
.trend-down { color: var(--danger); }
.trend-flat { color: var(--muted); }
.cat-card-prices {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--border);
}
.cat-card-prices .price-line {
display: flex;
align-items: baseline;
gap: 8px;
}
.cat-card-prices .price-now {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.6px;
font-variant-numeric: tabular-nums;
}
.cat-card-prices .price-was {
font-size: 12px;
color: var(--muted-2);
text-decoration: line-through;
font-variant-numeric: tabular-nums;
}
.cat-card-prices .price-save {
font-size: 10.5px;
font-weight: 600;
color: var(--accent);
margin-top: 2px;
letter-spacing: 0.4px;
font-family: var(--font-mono);
}
.cat-card-foot {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 11px;
color: var(--muted);
}
.cat-foot-item {
display: inline-flex;
align-items: center;
gap: 5px;
font-variant-numeric: tabular-nums;
}
.cat-foot-item .dot {
width: 6px; height: 6px;
border-radius: 99px;
background: var(--teal);
}
.cat-foot-item.cat-stock-low .dot { background: var(--accent); }
.cat-foot-item.cat-stock-critical .dot { background: var(--danger); }
.cat-card-cta {
margin-top: 12px;
width: 100%;
justify-content: center;
}
.cat-list-thumb {
width: 32px; height: 32px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
border: 1px solid var(--border);
}
/* ── Fulfillments grid ────────────────────────────────────────────────── */
.fulf-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 14px;
margin-bottom: 20px;
}
.fulf-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 0.2s, transform 0.2s;
position: relative;
}
.fulf-card:hover { transform: translateY(-2px); border-color: var(--text); }
.fulf-card.fulf-risk { border-color: rgba(220,38,38,0.4); background: #fffbfb; }
.fulf-card.fulf-risk::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--danger);
border-radius: 12px 12px 0 0;
}
.fulf-card-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.fulf-card-row {
display: flex;
align-items: center;
gap: 16px;
}
.fulf-card-body { flex: 1; min-width: 0; }
.fulf-card-item { font-size: 14px; font-weight: 700; letter-spacing: -0.1px; }
.fulf-card-buyer { font-size: 12px; color: var(--muted); margin-top: 4px; }
.fulf-card-eta { font-size: 11px; color: var(--accent); margin-top: 4px; font-weight: 600; }
.fulf-card.fulf-risk .fulf-card-eta { color: var(--danger); }
.fulf-card-foot {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
padding-top: 10px;
border-top: 1px dashed var(--border);
}
.fulf-card-foot span { display: inline-flex; align-items: center; gap: 5px; }
/* ── Tier savings projection ──────────────────────────────────────────── */
.proj-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
@media (max-width: 1100px) { .proj-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } }
.proj-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 18px 16px;
display: flex;
flex-direction: column;
gap: 6px;
transition: border-color 0.2s, transform 0.2s;
}
.proj-card:hover { border-color: var(--text); transform: translateY(-2px); }
.proj-card.current {
border-color: var(--accent);
background: rgba(217,119,6,0.04);
}
.proj-card.earned .proj-amt { color: var(--muted); }
.proj-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.proj-name {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.1px;
}
.proj-sub {
font-size: 11px;
color: var(--muted);
margin-top: 1px;
font-family: var(--font-mono);
}
.proj-amt {
font-size: 28px;
font-weight: 800;
letter-spacing: -1px;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.proj-card.current .proj-amt { color: var(--accent); }
.proj-lbl {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
font-family: var(--font-mono);
letter-spacing: 0.4px;
text-transform: uppercase;
}
.proj-foot {
font-size: 11.5px;
margin-top: auto;
padding-top: 10px;
border-top: 1px dashed var(--border);
}
/* ── Modal ────────────────────────────────────────────────────────────── */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(17,17,17,0.42);
backdrop-filter: blur(4px);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: modal-fade 0.2s ease-out;
}
.modal {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
max-width: 560px;
width: 100%;
max-height: 90vh;
overflow: auto;
box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
animation: modal-rise 0.25s cubic-bezier(.2,.8,.2,1);
}
@keyframes modal-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modal-rise {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: none; }
}
.modal-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 22px 26px 14px;
border-bottom: 1px solid var(--border);
}
.modal-head .eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
font-family: var(--font-mono);
}
.modal-head h3 {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.3px;
}
.modal-close {
background: transparent;
border: 1px solid var(--border);
border-radius: 6px;
width: 28px; height: 28px;
color: var(--muted);
cursor: pointer;
font-family: inherit;
font-size: 14px;
}
.modal-close:hover { color: var(--text); border-color: var(--text); }
.modal-body { padding: 20px 26px; }
.modal-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 16px 26px 22px;
border-top: 1px solid var(--border);
}
/* ── id-chip — small mono inline chip for IDs ────────────────────────── */
.id-chip {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 600;
padding: 2px 8px;
border-radius: 6px;
background: var(--bg-app);
border: 1px solid var(--border);
color: var(--text);
}
/* ───────────────────────────────────────────────────────────────────────────
Catalog — packages-only, premium card design
─────────────────────────────────────────────────────────────────────────── */
/* ── Catalog hero ─────────────────────────────────────────────────────── */
.cat-hero {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: clamp(20px, 2.4vw, 40px);
align-items: center;
background: #0d0d0e;
color: #fff;
border-radius: 16px;
padding: clamp(26px, 2.4vw, 40px) clamp(28px, 2.6vw, 48px);
margin-bottom: 28px;
border: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 3px rgba(0,0,0,0.1);
}
.cat-hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
opacity: 0.6;
}
.cat-hero::after {
content: '';
position: absolute;
right: -160px; bottom: -160px;
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(217,119,6,0.20), transparent 60%);
pointer-events: none;
}
.cat-hero-bg {
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
background-size: 28px 28px;
pointer-events: none;
mask-image: linear-gradient(135deg, black, transparent 60%);
-webkit-mask-image: linear-gradient(135deg, black, transparent 60%);
}
.cat-hero-left { position: relative; z-index: 2; }
.cat-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin-bottom: 14px;
font-family: var(--font-mono);
}
.cat-hero-eyebrow .pulse {
width: 6px; height: 6px;
border-radius: 99px;
background: var(--accent);
position: relative;
}
.cat-hero-eyebrow .pulse::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 99px;
background: var(--accent);
opacity: 0.25;
animation: pulse-ring 1.8s cubic-bezier(0,.55,.45,1) infinite;
}
.cat-hero-eyebrow .dot-sep { color: rgba(255,255,255,0.3); }
.cat-hero-headline {
font-size: clamp(32px, 3.4vw, 48px);
font-weight: 800;
letter-spacing: -1.6px;
line-height: 0.98;
color: #fff;
margin-bottom: 12px;
}
.cat-hero-headline .amt {
background: rgba(217,119,6,0.22);
padding: 0 6px;
border-radius: 4px;
}
.cat-hero-sub {
color: rgba(255,255,255,0.62);
font-size: 14px;
line-height: 1.6;
max-width: 560px;
}
.cat-hero-sub strong { color: #fff; font-weight: 600; }
.cat-hero-ticker {
display: flex;
align-items: center;
gap: 18px;
margin-top: 22px;
padding: 9px 14px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
font-family: var(--font-mono);
font-size: 10.5px;
color: rgba(255,255,255,0.55);
flex-wrap: wrap;
}
.cat-hero-ticker .item { display: inline-flex; align-items: center; gap: 6px; }
.cat-hero-ticker .lbl {
color: rgba(255,255,255,0.35);
text-transform: uppercase;
letter-spacing: 0.7px;
font-weight: 600;
}
.cat-hero-ticker .val {
color: rgba(255,255,255,0.92);
font-weight: 600;
}
.cat-hero-ticker .val.amber { color: var(--accent); }
.cat-hero-ticker .val.teal { color: #5eead4; }
.cat-hero-ticker .live {
display: inline-flex;
align-items: center;
gap: 5px;
color: #5eead4;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.cat-hero-ticker .live::before {
content: '';
width: 6px; height: 6px;
border-radius: 99px;
background: var(--teal);
box-shadow: 0 0 8px rgba(13, 148, 136, 0.7);
animation: live-blink 1.6s ease-in-out infinite;
}
.cat-hero-ticker .sep {
width: 1px;
height: 14px;
background: rgba(255,255,255,0.08);
}
/* ── Hero vault illustration ─────────────────────────────────────────── */
.hero-vault {
width: clamp(260px, 24vw, 340px);
height: clamp(220px, 22vw, 280px);
position: relative;
display: block;
}
.hero-vault svg { display: block; width: 100%; height: 100%; }
@keyframes crest-spin {
to { transform: rotate(360deg); }
}
.vault-orbit {
animation: vault-orbit 32s linear infinite;
}
@keyframes vault-orbit {
to { transform: rotate(360deg); }
}
/* Update cat-hero-right to use the new vault */
.cat-hero-right .hero-vault { z-index: 2; }
@media (max-width: 1000px) {
.cat-hero { grid-template-columns: 1fr; padding: 28px; }
.cat-hero-headline { font-size: 36px; }
.cat-hero-right { align-items: flex-start; }
}
/* ── Featured package ─────────────────────────────────────────────────── */
.pkg-featured {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: clamp(22px, 2vw, 32px);
margin-bottom: 36px;
overflow: hidden;
box-shadow: var(--card-shadow);
--mx: 50%; --my: 50%; --mo: 0;
transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s;
}
.pkg-featured::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--pkg-accent, var(--accent));
}
.pkg-featured::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
400px circle at var(--mx) var(--my),
color-mix(in srgb, var(--pkg-accent, var(--accent)) 8%, transparent),
transparent 70%
);
opacity: var(--mo);
transition: opacity 0.25s;
pointer-events: none;
}
.pkg-featured:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(0,0,0,0.06), var(--card-shadow);
}
.pkg-featured-flag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--accent);
background: rgba(217,119,6,0.10);
border: 1px solid rgba(217,119,6,0.25);
padding: 5px 12px;
border-radius: 99px;
margin-bottom: 18px;
font-family: var(--font-mono);
position: relative;
z-index: 2;
}
.pkg-featured-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.5fr) minmax(260px, 0.9fr);
gap: clamp(20px, 2vw, 36px);
align-items: stretch;
}
@media (max-width: 1280px) {
.pkg-featured-grid { grid-template-columns: 1fr 1fr; }
.pkg-featured-stack { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
.pkg-featured-grid { grid-template-columns: 1fr; }
}
.pkg-featured-stack {
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-height: 280px;
}
/* Token stack — 4×3 grid of tokens with subtle staircase rise */
.token-stack {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
width: 100%;
position: relative;
}
.token-stack-grid {
display: grid;
grid-template-columns: repeat(4, 56px);
gap: 8px;
justify-content: center;
}
.token-tile {
width: 56px; height: 56px;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--border);
background: var(--bg-app);
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
position: relative;
animation: tile-rise 0.6s cubic-bezier(.2,.8,.2,1) backwards;
transition: transform 0.18s, box-shadow 0.18s;
}
.token-tile:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 8px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
z-index: 5;
}
@keyframes tile-rise {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
.token-tile.rarity-legendary { border-color: rgba(252,211,77,0.5); box-shadow: 0 0 0 1px rgba(252,211,77,0.2), 0 1px 2px rgba(0,0,0,0.04); }
.token-tile.rarity-epic { border-color: rgba(192,132,252,0.4); }
.token-tile.rarity-rare { border-color: rgba(96,165,250,0.35); }
.token-tile.rarity-uncommon { border-color: rgba(13,148,136,0.30); }
.token-tile-more {
background: var(--surface);
border-style: dashed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -0.4px;
color: var(--text);
}
.token-tile-more .lbl {
font-size: 8px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--muted);
margin-top: 2px;
}
.token-stack-caption {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 6px;
}
.token-stack-count {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.6px;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.token-stack-lbl {
font-size: 11px;
font-weight: 500;
color: var(--muted);
font-family: var(--font-mono);
letter-spacing: 0.4px;
text-transform: uppercase;
}
/* Featured body — copy + contents */
.pkg-featured-body {
display: flex;
flex-direction: column;
gap: 14px;
}
.pkg-featured-head {
display: flex;
align-items: center;
gap: 14px;
}
.pkg-featured-crest {
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pkg-featured-eyebrow {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
font-family: var(--font-mono);
}
.pkg-featured-name {
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 800;
letter-spacing: -0.8px;
color: var(--text);
line-height: 1.05;
margin-top: 2px;
}
.pkg-featured-tagline {
font-size: 14.5px;
font-style: italic;
color: var(--muted);
line-height: 1.4;
}
.pkg-featured-summary {
font-size: 13.5px;
color: var(--text);
line-height: 1.55;
}
.pkg-contents-lg li {
font-size: 13px;
padding: 4px 0;
}
.pkg-featured-meta {
display: flex;
gap: 18px;
font-size: 12px;
color: var(--muted);
padding-top: 12px;
border-top: 1px dashed var(--border);
flex-wrap: wrap;
}
.pkg-featured-meta span {
display: inline-flex;
align-items: center;
gap: 5px;
}
/* Featured price column — vertically prominent */
.pkg-featured-price {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 20px 22px;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 14px;
position: relative;
overflow: hidden;
}
.pkg-featured-price::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 3px;
background: var(--pkg-accent, var(--accent));
}
.pkg-featured-list {
font-size: 14px;
color: var(--muted-2);
text-decoration: line-through;
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: baseline;
gap: 8px;
}
.pkg-featured-list-lbl {
font-size: 9.5px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--muted);
font-family: var(--font-mono);
font-weight: 600;
}
.pkg-featured-now {
font-size: clamp(40px, 4.4vw, 60px);
font-weight: 800;
letter-spacing: -2.4px;
font-variant-numeric: tabular-nums;
line-height: 1;
color: var(--text);
margin-top: 6px;
display: flex;
align-items: baseline;
}
.pkg-featured-now .dollar { font-size: 26px; margin-right: 2px; color: var(--muted); font-weight: 700; }
.pkg-featured-savings {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 700;
color: var(--accent);
margin-top: 10px;
font-family: var(--font-mono);
letter-spacing: 0.4px;
}
.pkg-featured-breakdown {
display: grid;
gap: 4px;
font-size: 11.5px;
color: var(--muted);
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed var(--border);
}
.pkg-featured-breakdown .row {
display: flex;
justify-content: space-between;
}
.pkg-featured-breakdown .mono {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--text);
font-weight: 600;
}
.pkg-featured-cta {
margin-top: 18px;
width: 100%;
justify-content: center;
padding: 12px 14px;
font-size: 14px;
}
.pkg-featured-pay {
margin-top: 8px;
font-size: 11px;
text-align: center;
color: var(--muted);
font-family: var(--font-mono);
letter-spacing: 0.4px;
}
/* ── All-packages grid ────────────────────────────────────────────────── */
.pkg-section { margin-bottom: 28px; }
.pkg-section-head { margin-bottom: 22px; }
.pkg-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(12px, 1vw, 20px);
}
@media (min-width: 1700px) { .pkg-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
@media (max-width: 1380px) { .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .pkg-grid { grid-template-columns: 1fr; } }
.pkg-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 0;
display: flex;
flex-direction: column;
position: relative;
transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s, border-color 0.22s;
--mx: 50%; --my: 50%; --mo: 0;
overflow: hidden;
}
.pkg-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--pkg-accent, var(--accent));
opacity: 0.7;
z-index: 3;
}
.pkg-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
260px circle at var(--mx) var(--my),
color-mix(in srgb, var(--pkg-accent, var(--accent)) 6%, transparent),
transparent 70%
);
opacity: var(--mo);
transition: opacity 0.25s;
pointer-events: none;
z-index: 1;
}
.pkg-card > * { position: relative; z-index: 2; }
.pkg-card:hover {
transform: translateY(-3px);
border-color: var(--pkg-accent, var(--text));
box-shadow: 0 12px 26px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
}
.pkg-card-stack {
padding: 22px 22px 0;
display: flex;
justify-content: center;
position: relative;
height: 96px;
align-items: flex-end;
}
.token-stack-mini {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 72px;
margin-bottom: -8px;
}
.token-mini {
width: 56px;
height: 56px;
border-radius: 10px;
border: 1.5px solid var(--surface);
background: var(--bg-app);
box-shadow: 0 2px 4px rgba(0,0,0,0.06);
overflow: hidden;
transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
}
.pkg-card:hover .token-mini { transform: translateY(-2px) rotate(0deg) translateX(0) !important; }
.pkg-card:hover .token-mini:nth-child(1) { transform: translateY(-2px) translateX(-44px) rotate(-6deg) !important; }
.pkg-card:hover .token-mini:nth-child(2) { transform: translateY(-4px) translateX(-22px) rotate(-3deg) !important; }
.pkg-card:hover .token-mini:nth-child(3) { transform: translateY(-6px) translateX(0) rotate(0deg) !important; }
.pkg-card:hover .token-mini:nth-child(4) { transform: translateY(-4px) translateX(22px) rotate(3deg) !important; }
.pkg-card:hover .token-mini:nth-child(5) { transform: translateY(-2px) translateX(44px) rotate(6deg) !important; }
.token-mini.rarity-legendary { border-color: rgba(252,211,77,0.6); }
.token-mini.rarity-epic { border-color: rgba(192,132,252,0.45); }
.token-mini.rarity-rare { border-color: rgba(96,165,250,0.4); }
.token-mini.rarity-uncommon { border-color: rgba(13,148,136,0.35); }
.token-mini-more {
background: var(--surface);
border-style: dashed;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
font-family: var(--font-mono);
color: var(--muted);
}
.pkg-card-body {
padding: 20px 22px 22px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.pkg-card-head {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
}
.pkg-card-crest {
width: 36px;
height: 36px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pkg-card-eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
font-family: var(--font-mono);
}
.pkg-card-name {
font-size: 18px;
font-weight: 800;
letter-spacing: -0.4px;
color: var(--text);
line-height: 1.15;
margin-top: 2px;
}
.pkg-card-tagline {
font-size: 12.5px;
font-style: italic;
color: var(--muted);
line-height: 1.4;
}
.pkg-contents-more {
font-size: 11px;
color: var(--muted);
font-family: var(--font-mono);
letter-spacing: 0.4px;
padding-top: 2px;
font-style: normal;
text-transform: lowercase;
}
.pkg-card-meta {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 11px;
color: var(--muted);
padding-top: 10px;
border-top: 1px dashed var(--border);
flex-wrap: wrap;
}
.pkg-card-price {
margin-top: 6px;
padding: 14px;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 10px;
position: relative;
}
.pkg-card-price::before {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0;
width: 2px;
background: var(--pkg-accent, var(--accent));
}
.pkg-card-list {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 11.5px;
}
.pkg-card-list .strike {
color: var(--muted-2);
text-decoration: line-through;
font-variant-numeric: tabular-nums;
}
.pkg-card-list .save-pct {
display: inline-block;
padding: 2px 7px;
background: var(--pkg-accent, var(--accent));
color: #fff;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.6px;
border-radius: 4px;
font-family: var(--font-mono);
}
.pkg-card-now {
font-size: 28px;
font-weight: 800;
letter-spacing: -1px;
font-variant-numeric: tabular-nums;
margin-top: 2px;
line-height: 1;
}
.pkg-card-save {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
font-weight: 700;
color: var(--accent);
margin-top: 6px;
font-family: var(--font-mono);
letter-spacing: 0.4px;
}
.pkg-card-cta {
width: 100%;
justify-content: center;
}
/* ── pkg-contents (shared between featured + card) ────────────────────── */
.pkg-contents {
list-style: none;
padding: 0;
display: grid;
gap: 6px;
margin: 0;
padding-top: 12px;
border-top: 1px dashed var(--border);
}
.pkg-contents li {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 8px;
font-size: 12px;
}
.pkg-contents .pkg-qty {
font-family: var(--font-mono);
font-weight: 700;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.pkg-contents .pkg-item {
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── How-it-works strip ──────────────────────────────────────────────── */
.pkg-how {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
gap: 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px 26px;
margin-top: 4px;
}
@media (max-width: 900px) {
.pkg-how { grid-template-columns: 1fr; gap: 18px; }
.pkg-how-arrow { display: none; }
}
.pkg-how-step {
display: flex;
flex-direction: column;
gap: 4px;
}
.pkg-how-num {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.6px;
font-family: var(--font-mono);
color: var(--accent);
margin-bottom: 4px;
}
.pkg-how-title {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.2px;
}
.pkg-how-desc {
font-size: 12.5px;
color: var(--muted);
line-height: 1.5;
}
.pkg-how-arrow {
color: var(--muted-2);
}
/* ── Help page ────────────────────────────────────────────────────────── */
.help-search {
position: relative;
display: flex;
align-items: center;
gap: 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 18px 22px;
margin-bottom: 14px;
box-shadow: var(--card-shadow);
transition: border-color 0.15s, box-shadow 0.15s;
}
.help-search:focus-within {
border-color: var(--text);
box-shadow: 0 0 0 4px rgba(17,17,17,0.05), var(--card-shadow);
}
.help-search svg { color: var(--muted); flex-shrink: 0; }
.help-search input {
flex: 1;
border: none;
background: transparent;
outline: none;
font-size: 16px;
color: var(--text);
font-family: inherit;
}
.help-search input::placeholder { color: var(--muted); }
.help-search .clear {
background: var(--bg-app);
border: 1px solid var(--border);
color: var(--muted);
font-size: 11px;
font-weight: 600;
padding: 5px 10px;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
}
.help-search .clear:hover { color: var(--text); border-color: var(--text); }
.help-chips {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
color: var(--muted);
margin-bottom: 28px;
}
.help-chips .lbl {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
font-family: var(--font-mono);
margin-right: 2px;
}
.help-chips .chip {
font-size: 12px;
font-weight: 500;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
padding: 5px 11px;
border-radius: 99px;
cursor: pointer;
font-family: inherit;
transition: border-color 0.15s, background 0.15s;
}
.help-chips .chip:hover { border-color: var(--text); background: var(--bg-app); }
/* Topic grid */
.help-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.help-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 18px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: border-color 0.15s, transform 0.15s;
--mx: 50%; --my: 50%; --mo: 0;
}
.help-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(220px circle at var(--mx) var(--my), rgba(217,119,6,0.06), transparent 70%);
opacity: var(--mo);
transition: opacity 0.25s;
pointer-events: none;
}
.help-card > * { position: relative; z-index: 1; }
.help-card:hover { border-color: var(--text); transform: translateY(-2px); }
.help-icon {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--bg-app);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
color: var(--text);
margin-bottom: 12px;
}
.help-title {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.1px;
line-height: 1.3;
}
.help-desc {
font-size: 12.5px;
color: var(--muted);
margin-top: 4px;
line-height: 1.5;
min-height: 36px;
}
.help-cta {
font-size: 11.5px;
font-weight: 600;
color: var(--accent);
margin-top: 14px;
display: inline-flex;
align-items: center;
gap: 5px;
text-transform: uppercase;
letter-spacing: 0.6px;
font-family: var(--font-mono);
}
/* Contact card */
.help-contact {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.help-contact .contact-row {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
border-top: 1px solid var(--border);
}
.help-contact .contact-row:first-child { border-top: none; }
.help-contact .contact-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: var(--bg-app);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
color: var(--text);
flex-shrink: 0;
}
.help-contact .grow { flex: 1; min-width: 0; }
.help-contact .contact-title { font-size: 13.5px; font-weight: 700; }
.help-contact .contact-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.help-contact .status-pill {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 99px;
font-family: var(--font-mono);
}
.help-contact .status-pill.ok {
color: var(--teal);
background: var(--teal-tint);
border: 1px solid rgba(13, 148, 136, 0.30);
}
.help-contact .status-pill .status-dot {
width: 6px; height: 6px;
border-radius: 99px;
background: var(--teal);
box-shadow: 0 0 6px rgba(13,148,136,0.6);
}
.help-contact .status-pill.locked {
color: var(--muted);
background: var(--bg-app);
border: 1px solid var(--border);
}
/* ════════════════════════════════════════════════════════════════════════
INVENTORY PAGE — v3 (premium SaaS · restrained palette · single accent)
Design rules:
· Neutrals carry the layout; amber is used sparingly as the one accent
· No gradient blends across hues — solid fills only
· Typography hierarchy > color hierarchy
· Photography fills card thumbnails; chrome stays out of the way
════════════════════════════════════════════════════════════════════════ */
/* ── Hero summary ───────────────────────────────────────────────────── */
.inv-hero {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 32px;
align-items: center;
padding: 32px 36px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--card-shadow);
margin-bottom: 20px;
}
.inv-hero-headline { min-width: 0; }
.inv-hero-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.inv-hero-val {
font-size: 48px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.02;
color: var(--text);
margin-top: 8px;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum', 'ss01';
}
.inv-hero-sub {
font-size: 13.5px;
color: var(--muted);
margin: 10px 0 0;
line-height: 1.55;
}
.inv-hero-bar {
margin-top: 20px;
height: 4px;
width: 100%;
max-width: 360px;
background: var(--border);
border-radius: 99px;
overflow: hidden;
}
.inv-hero-bar-fill {
height: 100%;
width: 0;
background: var(--accent);
border-radius: inherit;
transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.inv-hero[data-inview] .inv-hero-bar-fill { width: var(--target); }
.inv-hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.inv-hero-stat {
padding: 16px 18px;
background: var(--surface);
min-width: 0;
}
.inv-hero-stat-lbl {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.inv-hero-stat-val {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
margin-top: 6px;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.inv-hero-stat-of {
font-size: 13px;
color: var(--muted-2);
font-weight: 500;
letter-spacing: -0.01em;
}
@media (max-width: 1080px) {
.inv-hero { grid-template-columns: 1fr; padding: 28px; gap: 24px; }
.inv-hero-val { font-size: 40px; }
}
@media (max-width: 640px) {
.inv-hero-stats { grid-template-columns: repeat(2, 1fr); }
}
/* ── Filter bar ─────────────────────────────────────────────────────── */
.inv-filter-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 22px;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--card-shadow);
margin-bottom: 18px;
}
.inv-filter-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inv-filter-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.inv-pills { display: inline-flex; gap: 2px; flex-wrap: wrap; padding: 3px; background: var(--bg-app); border-radius: 8px; }
.inv-pill {
appearance: none;
border: 1px solid transparent;
background: transparent;
color: var(--muted);
font-size: 12.5px;
font-weight: 500;
font-family: inherit;
padding: 5px 12px;
border-radius: 6px;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.inv-pill:hover { color: var(--text); }
.inv-pill.is-active {
background: var(--surface);
color: var(--text);
font-weight: 600;
box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 0 0 1px var(--border);
}
.inv-filter-count {
margin-left: auto;
font-size: 12px;
color: var(--muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
@media (max-width: 1100px) {
.inv-filter-count { margin-left: 0; }
}
/* ── Card grid ──────────────────────────────────────────────────────────
Auto-fill with a 240px minimum: the grid adds as many columns as fit,
each card sized between 240px and 1fr. This scales naturally with
viewport — 2 cols on tablets, 4 on laptops, 6-7 on QHD desktops, 10
on ultrawides — without needing a fixed media-query ladder.
Individual cards get tighter internals below so they take less
vertical room too (more items per row AND more rows visible). */
.inv-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
/* Mobile gets a single full-width column for thumb visibility. */
@media (max-width: 480px) { .inv-grid { grid-template-columns: 1fr; } }
/* ── Card ───────────────────────────────────────────────────────────── */
.inv-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 200ms ease;
will-change: transform;
/* container-type lets us adapt the card internals based on its own
rendered width, independent of viewport. Narrow cards (≤ 280px,
i.e. when the grid packs densely on ultrawide) hide the verbose
description and tighten typography. */
container-type: inline-size;
}
.inv-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px -16px rgba(17, 17, 17, 0.18),
0 2px 6px -2px rgba(17, 17, 17, 0.06);
border-color: #d4d4d4;
}
/* ── Thumbnail — solid black with subtle radial glow on hover ───────── */
.inv-thumb {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #0a0a0a;
}
.inv-thumb-glow {
position: absolute;
inset: 0;
background: radial-gradient(
60% 80% at 50% 50%,
rgba(255, 255, 255, 0.06) 0%,
transparent 70%
);
opacity: 0;
transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.inv-card:hover .inv-thumb-glow { opacity: 1; }
.inv-card[data-status="unlisted"] .inv-thumb { background: #1a1a1a; }
/* ── Body ───────────────────────────────────────────────────────────── */
.inv-body {
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
flex: 1;
gap: 0;
}
/* ── Platform highlight — the hero line of every card ───────────────── */
.inv-platform {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px 6px 6px;
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 10px;
transition: border-color 200ms ease, background 200ms ease;
}
.inv-card:hover .inv-platform {
border-color: #d4d4d4;
background: #fafafa;
}
.inv-platform-mark {
width: 28px;
height: 28px;
border-radius: 7px;
background: var(--text);
color: var(--surface);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
letter-spacing: -0.02em;
flex-shrink: 0;
}
.inv-card[data-status="unlisted"] .inv-platform-mark {
background: var(--muted);
}
.inv-platform-text {
display: flex;
flex-direction: column;
line-height: 1.15;
min-width: 0;
flex: 1;
}
.inv-platform-lbl {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.inv-platform-name {
font-size: 13.5px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inv-status {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--muted);
padding: 4px 9px 4px 8px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 99px;
white-space: nowrap;
text-transform: uppercase;
}
.inv-status-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--muted-2);
box-shadow: 0 0 0 2px rgba(136, 136, 136, 0.18);
}
.inv-status-listed { color: #15803d; border-color: rgba(34, 197, 94, 0.35); background: #f0fdf4; }
.inv-status-listed .inv-status-dot {
background: #22c55e;
box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22);
}
.inv-head { display: flex; align-items: flex-start; gap: 10px; }
.inv-name {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.3;
margin: 0;
color: var(--text);
}
.inv-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
font-size: 12px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.inv-meta-sep { color: var(--border); }
.inv-qty { color: var(--text); font-weight: 500; }
.inv-meta-muted { color: var(--muted); }
.inv-desc {
font-size: 12.5px;
color: var(--muted);
margin: 8px 0 0;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* No min-height — short or absent descriptions don't reserve space. */
}
/* ── P&L row ────────────────────────────────────────────────────────── */
.inv-pl {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 12px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.inv-pl-cell { min-width: 0; }
.inv-pl-cell-margin { text-align: right; }
.inv-pl-lbl {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.inv-pl-val {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.015em;
margin-top: 3px;
color: var(--text);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.inv-pl-val-accent { color: var(--accent); }
.inv-pl-pct {
font-size: 11px;
font-weight: 500;
color: var(--muted);
margin-left: 4px;
}
/* ── Margin bar — single solid accent ───────────────────────────────── */
.inv-bar {
margin-top: 10px;
height: 3px;
background: var(--border);
border-radius: 99px;
overflow: hidden;
}
.inv-bar-fill {
height: 100%;
width: 0;
background: var(--accent);
border-radius: inherit;
transition: width 1s cubic-bezier(0.22, 1, 0.36, 1) 100ms;
}
.inv-card[data-inview] .inv-bar-fill { width: var(--target); }
/* ── Footer ─────────────────────────────────────────────────────────── */
.inv-foot {
display: flex;
gap: 6px;
margin-top: 12px;
}
/* ── Density via container queries ──────────────────────────────────
When the card itself is narrow (≤ 280px — i.e. the grid is dense on
wide screens) hide the verbose description and tighten typography
so the card stays compact. Wider cards (laptops, tablets where the
grid stretches) still show the full description. */
@container (max-width: 280px) {
.inv-desc { display: none; }
.inv-name { font-size: 14px; }
.inv-platform-lbl { display: none; }
.inv-platform { padding: 4px 8px; margin-bottom: 8px; }
.inv-platform-name { font-size: 12.5px; }
.inv-platform-mark { width: 22px; height: 22px; font-size: 11.5px; }
.inv-meta { font-size: 11.5px; margin-top: 4px; }
.inv-pl { gap: 8px; padding-top: 8px; margin-top: 10px; }
.inv-pl-val { font-size: 13px; }
.inv-pl-pct { display: none; }
.inv-foot { margin-top: 10px; }
.inv-cta { padding: 8px 10px; font-size: 12px; }
}
.inv-cta {
flex: 1;
appearance: none;
font-family: inherit;
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
height: 36px;
padding: 0 14px;
border-radius: 8px;
border: 1px solid transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.inv-cta:active { transform: scale(0.985); }
.inv-cta-primary {
background: var(--text);
color: var(--surface);
}
.inv-cta-primary:hover { background: #000; }
.inv-cta-ghost {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}
.inv-cta-ghost:hover { background: var(--bg-app); border-color: #d4d4d4; }
.inv-icon-btn {
appearance: none;
background: var(--surface);
border: 1px solid var(--border);
width: 36px;
height: 36px;
border-radius: 8px;
color: var(--muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
flex-shrink: 0;
}
.inv-icon-btn:hover { background: var(--bg-app); color: var(--text); border-color: #d4d4d4; }
/* ── Empty state ────────────────────────────────────────────────────── */
.inv-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 72px 28px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: var(--card-shadow);
color: var(--muted);
}
.inv-empty-icon {
width: 56px;
height: 56px;
border-radius: 12px;
background: var(--bg-app);
border: 1px solid var(--border);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--muted);
margin-bottom: 16px;
}
.inv-empty-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.015em;
}
.inv-empty-sub {
font-size: 13px;
color: var(--muted);
margin: 6px 0 18px;
max-width: 360px;
}
/* ── Pre-animation state (Motion overrides via inline styles) ────────── */
@media (prefers-reduced-motion: no-preference) {
.inv-card:not([data-motion-done]) { opacity: 0; transform: translateY(14px); }
.inv-hero:not([data-motion-done]) { opacity: 0; transform: translateY(10px); }
.inv-hero-stat:not([data-motion-done]) { opacity: 0; transform: translateY(6px); }
.inv-filter-bar:not([data-motion-done]) { opacity: 0; transform: translateY(6px); }
.inv-pill:not([data-motion-done]) { opacity: 0; transform: translateY(4px); }
.inv-card [data-inv-platform]:not([data-motion-done]) { opacity: 0; transform: translateX(-8px); }
}
/* ════════════════════════════════════════════════════════════════════════
RESPONSIVE — grid density
----------------------------------------------------------------------
Each breakpoint adds columns to every page's primary grid so wide
monitors don't just see 3 fat cards. Pages affected: Dashboard,
Catalog, Inventory, Orders, Sales, Rewards, Payouts, Network,
Referral, Settings.
════════════════════════════════════════════════════════════════════════ */
/* ── 1500px — kick in dense mode early ───────────────────────────────── */
@media (min-width: 1500px) {
.grid-3 { grid-template-columns: repeat(4, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* .inv-grid uses auto-fill (see ~line 5694) and adapts naturally. */
.pkg-grid { grid-template-columns: repeat(4, 1fr); }
.proj-grid { grid-template-columns: repeat(4, 1fr); }
}
/* ── 1700px — five-column strips, denser inventory & catalog ─────────── */
@media (min-width: 1700px) {
.grid-4 { grid-template-columns: repeat(5, 1fr); }
.pkg-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.proj-grid { grid-template-columns: repeat(5, 1fr); }
.stat-strip { grid-template-columns: repeat(4, 1fr); }
.p-source-grid { grid-template-columns: repeat(4, 1fr); }
.p-lifetime { grid-template-columns: repeat(4, 1fr); }
.r-ladder { grid-template-columns: repeat(5, 1fr); }
.inv-hero-stats { grid-template-columns: repeat(4, 1fr); }
}
/* ── 2000px — page-header & hero adapt; gallery grids fill more ──────── */
@media (min-width: 2000px) {
.grid-3 { grid-template-columns: repeat(5, 1fr); }
.grid-4 { grid-template-columns: repeat(6, 1fr); }
.pkg-grid { grid-template-columns: repeat(5, 1fr); }
.proj-grid { grid-template-columns: repeat(6, 1fr); }
.stat-strip { grid-template-columns: repeat(5, 1fr); }
.r-ladder { grid-template-columns: repeat(5, 1fr); }
/* Heros get bigger numbers + more breathing room */
.inv-hero { gap: 40px; padding: 36px 44px; }
.inv-hero-val { font-size: 56px; }
.r-hero { padding: 40px; }
.cat-hero { padding: 40px; }
}
/* ── 2400px — split dashboard wide-row into 3 panels of equal weight ─── */
@media (min-width: 2400px) {
.grid-12-8 { grid-template-columns: 1.4fr 1fr 1fr; }
.grid-8-4 { grid-template-columns: 1fr 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(6, 1fr); }
.grid-4 { grid-template-columns: repeat(6, 1fr); }
.pkg-grid { grid-template-columns: repeat(6, 1fr); }
.proj-grid { grid-template-columns: repeat(6, 1fr); }
.stat-strip { grid-template-columns: repeat(6, 1fr); }
}
/* ── 3000px — ultrawide / 4K push, six+ column grids ─────────────────── */
@media (min-width: 3000px) {
.grid-3 { grid-template-columns: repeat(6, 1fr); }
.grid-4 { grid-template-columns: repeat(8, 1fr); }
.pkg-grid { grid-template-columns: repeat(7, 1fr); }
.proj-grid { grid-template-columns: repeat(8, 1fr); }
.stat-strip { grid-template-columns: repeat(8, 1fr); }
.r-ladder { grid-template-columns: repeat(5, 1fr); }
}
/* ════════════════════════════════════════════════════════════════════════
RESPONSIVE — tablet + mobile backfill
----------------------------------------------------------------------
Below 1200px many of the page-specific heros / strips were missing
collapse rules. This block fills them in so no page ever renders
broken at narrow widths.
════════════════════════════════════════════════════════════════════════ */
/* ── 1200px — page-header and dense strips relax ─────────────────────── */
@media (max-width: 1200px) {
.page-title { font-size: 22px; }
.stat-strip { grid-template-columns: repeat(2, 1fr); }
.p-source-grid { grid-template-columns: repeat(2, 1fr); }
.p-lifetime { grid-template-columns: repeat(2, 1fr); }
.r-ladder { grid-template-columns: repeat(3, 1fr); }
.inv-hero { grid-template-columns: 1fr; gap: 24px; padding: 26px; }
}
/* ── 900px — hero panels stack, side strips become two-up ────────────── */
@media (max-width: 900px) {
.page-header { align-items: flex-start; }
.inv-hero-stats { grid-template-columns: repeat(2, 1fr); }
.pkg-featured-grid { grid-template-columns: 1fr; }
.inv-filter-bar { padding: 10px; }
.inv-filter-bar .inv-filter-count { width: 100%; text-align: right; }
.cat-hero { padding: 22px; }
.r-hero { padding: 24px; }
}
/* ── 720px — tables scroll, cards go single-column, layouts collapse ── */
@media (max-width: 720px) {
/* Tabs scroll horizontally instead of overflowing */
.tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { white-space: nowrap; flex-shrink: 0; }
/* Mobile scroll cue: hint horizontally-scrollable surfaces with a soft
right-edge fade so users know to swipe. Applied to data tables, the
settings tab rail, and the small ".tabs" rows. The fade uses an
inset right shadow keyed to var(--bg-app) so it blends with the page
bg in both light and dark themes. */
.table-scroll,
.settings-shell .settings-nav,
.tabs {
box-shadow: inset -22px 0 18px -18px var(--bg-app);
}
.table-scroll table.data { /* keep table edge crisp against the cue */
background: var(--surface);
}
/* Any inline "1fr auto" grid layouts collapse to a single column */
.p-method { grid-template-columns: 1fr; }
.p-method > button { justify-self: start; }
/* Section + page headers wrap cleanly */
.table-toolbar { flex-wrap: wrap; gap: 10px; }
.section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.shell-topbar { height: auto; padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
.topbar-left h1 { font-size: 15px; }
.topbar-left .crumb { display: none; }
.page-title { font-size: 20px; letter-spacing: -0.5px; }
.page-subtitle { font-size: 12.5px; }
.card { padding: 18px; border-radius: 10px; }
.card-tight { padding: 14px 16px; }
.grid { gap: 12px; }
/* .inv-grid handled by its own 480px rule (single column on phones). */
.pkg-grid { grid-template-columns: 1fr; }
.proj-grid { grid-template-columns: 1fr; }
.r-ladder { grid-template-columns: repeat(2, 1fr); }
.stat-strip { grid-template-columns: 1fr; }
.p-source-grid { grid-template-columns: 1fr; }
.p-lifetime { grid-template-columns: 1fr; }
/* Tables stay tabular but scroll horizontally inside their card */
.table-scroll { padding-bottom: 4px; }
.inv-hero-val { font-size: 34px; }
.inv-hero { padding: 22px; }
.inv-filter-bar { flex-direction: column; align-items: stretch; }
.inv-filter-bar .inv-filter-group { justify-content: space-between; }
.inv-pills { width: 100%; justify-content: flex-start; overflow-x: auto; }
}
/* ── 480px — pocket size, simplify chrome ───────────────────────────── */
@media (max-width: 480px) {
.shell-page { padding: 14px 12px 40px; }
.page-header { margin-bottom: 16px; }
.page-title { font-size: 18px; }
.kpi-value, .card-value { font-size: 22px; }
.btn { padding: 7px 12px; font-size: 12.5px; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.inv-platform { padding: 6px 8px 6px 6px; }
.inv-platform-mark { width: 24px; height: 24px; font-size: 12px; }
.inv-cta { height: 32px; font-size: 12.5px; padding: 0 12px; }
.inv-icon-btn { width: 32px; height: 32px; }
}
/* ════════════════════════════════════════════════════════════════════════
CATALOG — premium B2B SaaS redesign (v2)
----------------------------------------------------------------------
Hero strip + featured top-performer card + smart toolbar (rarity pills +
sort dropdown + grid/list toggle) + refined product cards with sales
velocity bars. List view is an alternate dense table.
Visual rules — same as the rest of the site:
· Whites dominate; amber is the only accent
· No multi-hue gradients; only single-hue radial glows
· Typography hierarchy > color hierarchy
· Per-breakpoint composition changes, not just reflow
════════════════════════════════════════════════════════════════════════ */
/* ── Hero strip ─────────────────────────────────────────────────────── */
.cat-hero {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
gap: 36px;
align-items: center;
padding: 32px 36px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--card-shadow);
margin-bottom: 18px;
}
.cat-hero-text { min-width: 0; }
.cat-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.cat-hero-eyebrow svg { color: var(--accent); }
.cat-hero-title {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--text);
margin: 8px 0 0;
}
.cat-hero-sub {
font-size: 14px;
color: var(--muted);
line-height: 1.6;
margin: 12px 0 0;
max-width: 56ch;
}
.cat-hero-sub strong { color: var(--text); font-weight: 600; }
.cat-hero-actions {
display: flex;
gap: 8px;
margin-top: 18px;
flex-wrap: wrap;
}
.cat-hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.cat-hero-stat {
background: var(--surface);
padding: 18px 20px;
min-width: 0;
transition: background 160ms ease;
}
.cat-hero-stat:hover { background: var(--surface-alt); }
.cat-hero-stat-lbl {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.cat-hero-stat-val {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
margin-top: 8px;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.cat-hero-stat-unit {
font-size: 16px;
font-weight: 600;
color: var(--muted-2);
margin-left: 1px;
}
.cat-hero-stat-sub {
font-size: 11.5px;
color: var(--muted);
margin-top: 4px;
}
/* ── Tag badges (starter / popular / premium) ──────────────────────── */
.cat-tag-starter { background: rgba(99, 102, 241, 0.16); color: #c4cafe; border: 1px solid rgba(99, 102, 241, 0.36); }
.cat-tag-popular { background: rgba(217, 119, 6, 0.20); color: #fdba74; border: 1px solid rgba(217, 119, 6, 0.40); }
.cat-tag-premium { background: rgba(34, 197, 94, 0.16); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.36); }
/* ── Featured (top performer) card — 2-column with structured body ──
Art panel left, body right. Body is a single column that flows
eyebrow/title/desc → 4-cell pricing strip → action row. The right
side stays filled at every breakpoint because the body owns it. */
.cat-featured {
display: grid;
grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
gap: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
margin-bottom: 18px;
transition: box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 200ms ease;
}
.cat-featured:hover {
border-color: #d4d4d4;
box-shadow: 0 18px 40px -22px rgba(17, 17, 17, 0.18),
0 2px 6px -2px rgba(17, 17, 17, 0.06);
}
/* Art panel — dark with the dollar amount as the visual hero */
.cat-featured-art {
position: relative;
background: #0a0a0a;
display: flex;
flex-direction: column;
padding: 28px 30px;
min-height: 320px;
overflow: hidden;
color: #fff;
}
.cat-featured-art-glow {
position: absolute;
inset: -25% -25% auto auto;
width: 460px;
height: 460px;
background: radial-gradient(closest-side, rgba(217, 119, 6, 0.42), transparent 70%);
filter: blur(10px);
pointer-events: none;
opacity: 0.75;
transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-featured-art-code {
position: relative; z-index: 1;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.5);
}
.cat-featured-art-tag {
position: absolute;
top: 24px;
right: 24px;
z-index: 1;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 99px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.cat-featured-art-amount {
position: relative; z-index: 1;
display: flex;
align-items: baseline;
gap: 12px;
margin-top: auto;
}
.cat-featured-art-num {
font-size: clamp(56px, 5.2vw, 92px);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 0.94;
color: #fff;
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 30px rgba(217, 119, 6, 0.35);
}
.cat-featured-art-lbl {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
padding-bottom: 8px;
}
.cat-featured-art-meta {
position: relative; z-index: 1;
margin-top: 14px;
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.02em;
}
/* Body panel — single column flow */
.cat-featured-body {
padding: 30px 36px;
display: flex;
flex-direction: column;
gap: 24px;
min-width: 0;
}
.cat-featured-head { min-width: 0; }
.cat-featured-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
}
.cat-featured-title {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.16;
color: var(--text);
margin: 10px 0 0;
}
.cat-featured-desc {
font-size: 14px;
color: var(--muted);
line-height: 1.6;
margin: 12px 0 0;
max-width: 60ch;
}
/* Pricing strip — Notion-style 1px-gap grid */
.cat-featured-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.cat-featured-stat {
background: var(--surface);
padding: 16px 18px;
min-width: 0;
transition: background 160ms ease;
}
.cat-featured-stat:hover { background: var(--surface-alt); }
.cat-featured-stat-lbl {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.cat-featured-stat-val {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.12;
margin-top: 8px;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.cat-featured-stat-val.accent { color: var(--accent); }
.cat-featured-stat-sub {
font-size: 11px;
color: var(--muted);
margin-top: 4px;
}
/* Action row — proper button sizing */
.cat-featured-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.cat-featured-actions .cat-cta-primary {
flex: 0 1 280px;
height: 44px;
font-size: 13.5px;
}
.cat-featured-actions .cat-cta-ghost {
height: 44px;
font-size: 13.5px;
}
/* ── Smart toolbar (rarity pills + sort + view toggle) ─────────────── */
.cat-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 18px;
padding: 12px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--card-shadow);
margin-bottom: 18px;
}
.cat-toolbar-section {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
flex-wrap: wrap;
}
.cat-toolbar-controls { gap: 14px; }
.cat-toolbar-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
}
.cat-pills {
display: inline-flex;
gap: 2px;
flex-wrap: wrap;
padding: 3px;
background: var(--bg-app);
border-radius: 8px;
}
.cat-pill {
appearance: none;
border: 1px solid transparent;
background: transparent;
color: var(--muted);
font-size: 12.5px;
font-weight: 500;
font-family: inherit;
padding: 5px 12px;
border-radius: 6px;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.cat-pill:hover { color: var(--text); }
.cat-pill.is-active {
background: var(--surface);
color: var(--text);
font-weight: 600;
box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 0 0 1px var(--border);
}
.cat-sort { display: inline-flex; align-items: center; gap: 8px; }
.cat-sort-select {
appearance: none;
background: var(--bg-app) url("data:image/svg+xml;utf8,") no-repeat right 10px center;
border: 1px solid var(--border);
border-radius: 8px;
padding: 7px 32px 7px 12px;
font-size: 12.5px;
font-weight: 500;
font-family: inherit;
color: var(--text);
cursor: pointer;
transition: border-color 140ms ease;
}
.cat-sort-select:hover { border-color: #d4d4d4; }
.cat-sort-select:focus { outline: none; border-color: var(--accent); }
.cat-view-toggle {
display: inline-flex;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
padding: 2px;
background: var(--bg-app);
}
.cat-view-btn {
appearance: none;
background: transparent;
border: none;
color: var(--muted);
width: 32px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 6px;
transition: background 140ms ease, color 140ms ease;
}
.cat-view-btn:hover { color: var(--text); }
.cat-view-btn.is-active {
background: var(--surface);
color: var(--text);
box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 0 0 1px var(--border);
}
.cat-toolbar-count {
font-size: 12px;
color: var(--muted);
font-variant-numeric: tabular-nums;
margin-left: 4px;
}
/* ── Horizontal auto-scrolling row ──────────────────────────────────
Cards flow in a single row that drifts left continuously. Hovering
pauses the drift and lets the user scroll with wheel or trackpad.
Cards inside use a fixed width so the row has predictable rhythm.
See `widgets.js` for the rAF loop + seamless wrap-around. */
.cat-scroller {
position: relative;
border-radius: 16px;
/* Tail-edge fades suggest "more content"; pointer-events:none so they
don't block scroll/click on the cards underneath. */
}
.cat-scroller-edge {
position: absolute;
top: 0;
bottom: 0;
width: clamp(40px, 5vw, 100px);
pointer-events: none;
z-index: 3;
transition: opacity 200ms ease;
}
.cat-scroller-edge-l {
left: -1px;
background: linear-gradient(90deg, var(--bg-app) 0%, var(--bg-app) 10%, transparent 100%);
}
.cat-scroller-edge-r {
right: -1px;
background: linear-gradient(-90deg, var(--bg-app) 0%, var(--bg-app) 10%, transparent 100%);
}
.cat-scroller-inner {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding: 4px 4px 24px; /* room for hover-lift shadow + scroll hint */
}
.cat-scroller-inner::-webkit-scrollbar { display: none; }
.cat-scroller-track {
display: flex;
gap: 16px;
width: max-content;
will-change: transform;
}
/* Pause state — JS sets this attribute on hover to stop the rAF drift */
.cat-scroller[data-cat-scroller-paused] .cat-scroller-edge {
opacity: 0.6;
}
/* When in scroller, cards become fixed-width flex children */
.cat-scroller .cat-card {
flex: 0 0 320px;
width: 320px;
}
/* Hint at the bottom — "Hover to pause · scroll to explore" */
.cat-scroller::after {
content: 'Hover to pause · scroll to explore';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--muted);
pointer-events: none;
opacity: 0.7;
transition: opacity 200ms ease;
}
.cat-scroller[data-cat-scroller-paused]::after {
opacity: 1;
color: var(--text);
}
@media (max-width: 720px) {
.cat-scroller .cat-card { flex: 0 0 280px; width: 280px; }
.cat-scroller::after { display: none; }
}
@media (min-width: 1700px) {
.cat-scroller .cat-card { flex: 0 0 340px; width: 340px; }
}
@media (min-width: 2400px) {
.cat-scroller .cat-card { flex: 0 0 360px; width: 360px; }
}
.cat-card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 200ms ease;
}
.cat-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 32px -18px rgba(17, 17, 17, 0.2),
0 2px 6px -2px rgba(17, 17, 17, 0.06);
border-color: #d4d4d4;
}
/* Art zone — dark panel with the big cash numeral as the visual */
.cat-card-art {
position: relative;
height: 140px;
background: #0a0a0a;
padding: 14px;
overflow: hidden;
color: #fff;
}
.cat-card-art-glow {
position: absolute;
inset: -30% -20% auto auto;
width: 240px;
height: 240px;
background: radial-gradient(closest-side, rgba(217, 119, 6, 0.32), transparent 70%);
filter: blur(6px);
pointer-events: none;
opacity: 0.85;
transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-card:hover .cat-card-art-glow { transform: scale(1.15) translate(-12px, 10px); }
.cat-card-art-code {
position: relative;
z-index: 1;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.5);
}
.cat-card-tag {
position: absolute;
top: 14px;
right: 14px;
z-index: 1;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 99px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.cat-card-art-amount {
position: absolute;
z-index: 1;
bottom: 16px;
left: 16px;
right: 16px;
display: flex;
align-items: baseline;
gap: 8px;
}
.cat-card-art-num {
font-size: clamp(34px, 2.4vw + 18px, 50px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 0.95;
color: #fff;
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 24px rgba(217, 119, 6, 0.35);
}
.cat-card-art-lbl {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
padding-bottom: 4px;
}
.cat-card-body {
padding: 18px 18px 18px;
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.cat-card-name {
font-size: 15.5px;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.3;
margin: 0;
color: var(--text);
}
.cat-card-desc {
font-size: 12.5px;
color: var(--muted);
line-height: 1.55;
margin: 6px 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.7em;
}
.cat-card-price-row {
display: grid;
grid-template-columns: auto auto;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.cat-card-price .lbl,
.cat-card-margin .lbl {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.cat-card-price .val {
font-size: 19px;
font-weight: 700;
letter-spacing: -0.02em;
margin-top: 3px;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.cat-card-margin { text-align: right; }
.cat-card-margin .val {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
margin-top: 3px;
color: var(--accent);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.cat-card-margin .pct {
font-size: 11.5px;
font-weight: 500;
color: var(--muted);
}
/* Value-per-1k pill */
.cat-card-value-row { margin-top: 12px; }
.cat-card-value-pill {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 500;
color: var(--muted);
padding: 4px 9px;
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: 99px;
font-variant-numeric: tabular-nums;
}
.cat-card-value-pill svg { color: var(--muted-2); }
.cat-card-value-pill.is-best {
color: var(--success-text);
background: var(--success-bg-2);
border-color: var(--success-border);
}
.cat-card-value-pill.is-best svg { color: var(--success-text); }
.cat-card-velocity {
margin-top: 14px;
}
.cat-card-velocity-track {
height: 3px;
background: var(--border);
border-radius: 99px;
overflow: hidden;
}
.cat-card-velocity-fill {
height: 100%;
width: 0;
background: var(--accent);
border-radius: inherit;
transition: width 1s cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}
.cat-card[data-inview] .cat-card-velocity-fill { width: var(--target); }
.cat-card-velocity-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 7px;
font-size: 11.5px;
color: var(--muted);
}
.cat-card-velocity-label strong { color: var(--text); font-weight: 600; }
.cat-card-velocity-pill {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10.5px;
font-weight: 600;
padding: 2px 7px;
border-radius: 99px;
color: var(--accent);
background: var(--accent-tint);
letter-spacing: 0;
}
.cat-card-actions {
display: flex;
gap: 8px;
margin-top: 16px;
}
/* ── Buttons (catalog-scoped, premium look) ─────────────────────────── */
.cat-cta-primary {
flex: 1;
appearance: none;
font-family: inherit;
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
height: 38px;
padding: 0 14px;
border-radius: 8px;
border: 1px solid transparent;
background: var(--text);
color: var(--surface);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: background 140ms ease, transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-cta-primary:hover { background: #000; }
.cat-cta-primary:active { transform: scale(0.985); }
.cat-cta-sm { height: 34px; font-size: 12.5px; }
.cat-cta-xs { height: 30px; font-size: 12px; padding: 0 12px; flex: 0 0 auto; }
.cat-cta-ghost {
appearance: none;
font-family: inherit;
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
height: 38px;
padding: 0 14px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 140ms ease, border-color 140ms ease, transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-cta-ghost:hover { background: var(--bg-app); border-color: #d4d4d4; }
.cat-cta-ghost:active { transform: scale(0.985); }
.cat-icon-btn {
appearance: none;
background: var(--surface);
border: 1px solid var(--border);
width: 34px;
height: 34px;
border-radius: 8px;
color: var(--muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
flex-shrink: 0;
}
.cat-icon-btn:hover { background: var(--bg-app); color: var(--text); border-color: #d4d4d4; }
/* ── List view (dense alternate) ────────────────────────────────────── */
.cat-list-card { margin-bottom: 18px; }
.cat-list-table thead th {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
padding: 14px 18px;
}
.cat-list-table tbody td { padding: 16px 18px; vertical-align: middle; }
.cat-list-item { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cat-list-art {
position: relative;
width: 56px;
height: 56px;
border-radius: 10px;
background: #0a0a0a;
overflow: hidden;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cat-list-art::before {
content: '';
position: absolute;
inset: -30% -30% auto auto;
width: 110px; height: 110px;
background: radial-gradient(closest-side, rgba(217, 119, 6, 0.35), transparent 70%);
filter: blur(4px);
opacity: 0.8;
}
.cat-list-art-num {
position: relative; z-index: 1;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.025em;
color: #fff;
font-variant-numeric: tabular-nums;
}
.cat-list-meta { min-width: 0; }
.cat-list-name {
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.cat-list-tag {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 99px;
}
.cat-list-tag-hot {
color: var(--accent);
background: var(--accent-tint);
border: 1px solid transparent;
}
.cat-list-sub {
font-size: 12px;
color: var(--muted);
margin-top: 2px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cat-list-margin { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.cat-list-velocity { display: inline-flex; align-items: center; gap: 10px; }
.cat-list-velocity .track {
width: 80px;
height: 4px;
background: var(--border);
border-radius: 99px;
overflow: hidden;
}
.cat-list-velocity .fill {
height: 100%;
background: var(--accent);
border-radius: inherit;
transition: width 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* ── Pre-animation state (Motion overrides via inline) ────────────── */
@media (prefers-reduced-motion: no-preference) {
.cat-hero:not([data-motion-done]) { opacity: 0; transform: translateY(10px); }
.cat-hero-stat:not([data-motion-done]) { opacity: 0; transform: translateY(6px); }
.cat-featured:not([data-motion-done]) { opacity: 0; transform: translateY(12px); }
.cat-toolbar:not([data-motion-done]) { opacity: 0; transform: translateY(6px); }
.cat-pill:not([data-motion-done]) { opacity: 0; transform: translateY(4px); }
.cat-card:not([data-motion-done]) { opacity: 0; transform: translateY(14px); }
}
/* ════════════════════════════════════════════════════════════════════
CATALOG RESPONSIVE — distinct layouts per breakpoint
──────────────────────────────────────────────────────────────────── */
/* Wide — bigger hero, art panel grows, 4-col grid */
@media (min-width: 1700px) {
.cat-hero { padding: 40px 44px; gap: 44px; }
.cat-hero-title { font-size: 38px; }
.cat-hero-stat-val { font-size: 28px; }
.cat-featured { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }
.cat-featured-art { min-height: 360px; padding: 32px 36px; }
.cat-featured-body { padding: 36px 44px; gap: 28px; }
.cat-featured-title { font-size: 32px; }
.cat-featured-stat-val { font-size: 24px; }
/* scroller handles its own card sizing */
}
/* Ultra-wide — 5 cards/row, bigger featured panels */
@media (min-width: 2000px) {
.cat-grid { grid-template-columns: repeat(5, 1fr); }
.cat-featured { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }
.cat-featured-art { min-height: 400px; padding: 40px; }
.cat-featured-body { padding: 44px 52px; gap: 32px; }
.cat-featured-title { font-size: 36px; }
.cat-featured-stat-val { font-size: 26px; }
.cat-featured-stat { padding: 20px 22px; }
}
/* 4K — 6 cards/row */
@media (min-width: 2800px) {
.cat-grid { grid-template-columns: repeat(6, 1fr); }
.cat-featured-stat-val { font-size: 30px; }
}
/* Laptop — hero stacks, featured stays 2-col but narrower */
@media (max-width: 1280px) {
.cat-hero { grid-template-columns: 1fr; gap: 28px; padding: 28px 32px; }
.cat-hero-text { max-width: 640px; }
.cat-featured { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.cat-featured-art { padding: 26px 28px; }
.cat-featured-body { padding: 28px 32px; gap: 22px; }
.cat-featured-title { font-size: 26px; }
}
/* Tablet — featured stacks vertically; grid drops to 2 */
@media (max-width: 1080px) {
.cat-grid { grid-template-columns: repeat(2, 1fr); }
.cat-featured { grid-template-columns: 1fr; }
.cat-featured-art { min-height: 220px; padding: 26px 28px; }
.cat-featured-body { padding: 26px 28px; gap: 20px; }
.cat-featured-stats { grid-template-columns: repeat(2, 1fr); }
.cat-featured-actions .cat-cta-primary { flex: 1; }
}
/* Smaller tablet — toolbar wraps cleanly */
@media (max-width: 900px) {
.cat-toolbar { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px; }
.cat-toolbar-section { width: 100%; justify-content: space-between; }
.cat-toolbar-count { margin-left: auto; }
.cat-hero-stats { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile — single column grid, hero compresses */
@media (max-width: 640px) {
.cat-hero { padding: 22px; border-radius: 14px; }
.cat-hero-title { font-size: 26px; }
.cat-hero-sub { font-size: 13px; }
.cat-hero-stats { grid-template-columns: 1fr; }
.cat-featured { border-radius: 14px; }
.cat-featured-art { min-height: 200px; padding: 22px; }
.cat-featured-art-num { font-size: clamp(46px, 14vw, 70px); }
.cat-featured-body { padding: 22px; gap: 18px; }
.cat-featured-title { font-size: 24px; }
.cat-featured-stats { grid-template-columns: repeat(2, 1fr); }
.cat-featured-stat-val { font-size: 18px; }
.cat-featured-actions { flex-direction: column; }
.cat-featured-actions .cat-cta-primary,
.cat-featured-actions .cat-cta-ghost { width: 100%; flex: none; }
.cat-grid { grid-template-columns: 1fr; }
.cat-card-art { height: 140px; }
.cat-card-art-num { font-size: clamp(38px, 11vw, 52px); }
.cat-toolbar-section.cat-toolbar-controls { gap: 10px; flex-wrap: wrap; }
.cat-pills { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
.cat-pill { white-space: nowrap; flex-shrink: 0; }
}
/* ════════════════════════════════════════════════════════════════════════
SETTINGS — wide-screen polish
──────────────────────────────────────────────────────────────────────
At ultrawide, the settings shell (220px sidebar + form) wastes space.
Give the form a max-width and center the column so it stays readable.
════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1700px) {
.settings-shell { grid-template-columns: 260px minmax(0, 880px); justify-content: center; gap: 56px; }
}
@media (min-width: 2400px) {
.settings-shell { grid-template-columns: 300px minmax(0, 1000px); gap: 72px; }
}
/* ════════════════════════════════════════════════════════════════════════
BANNER WARN — refined typography & padding per breakpoint
════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1700px) {
.banner-warn { padding: 20px 24px; font-size: 14px; }
}
/* ════════════════════════════════════════════════════════════════════════
COMPLIANCE FOOTER — give it more breathing room on wide screens
════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1700px) {
.compliance-foot { font-size: 12.5px; margin-top: 28px; }
}
@media (max-width: 720px) {
.compliance-foot { font-size: 11.5px; line-height: 1.6; }
}
/* ════════════════════════════════════════════════════════════════════════
MOBILE BOTTOM NAV + MORE SHEET (visible only at <720px)
──────────────────────────────────────────────────────────────────────
Pattern: 3 primary tabs + 'More' button. Tapping More opens a
bottom-sheet drawer with the remaining nav items, profile, and sign
out. Mirrors the iOS/Android app pattern so the demo feels native.
════════════════════════════════════════════════════════════════════════ */
.mb-nav, .mb-sheet, .mb-sheet-backdrop { display: none; }
@media (max-width: 720px) {
.mb-nav {
display: grid;
grid-template-columns: repeat(4, 1fr);
position: fixed;
left: 0; right: 0; bottom: 0;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
border-top: 1px solid var(--border);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
z-index: 50;
box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.18);
}
.mb-tab {
appearance: none;
background: transparent;
border: none;
font-family: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 8px 4px 6px;
border-radius: 10px;
color: var(--muted);
cursor: pointer;
transition: color 140ms ease, background 140ms ease;
min-width: 0;
}
.mb-tab svg { width: 22px; height: 22px; }
.mb-tab-label {
font-size: 10.5px;
font-weight: 500;
letter-spacing: -0.005em;
white-space: nowrap;
}
.mb-tab:active { background: var(--bg-app); }
.mb-tab.is-active {
color: var(--accent);
font-weight: 600;
}
.mb-tab.is-active .mb-tab-label { font-weight: 600; }
/* Add bottom padding to shell-page so content isn't hidden behind nav */
.shell-page { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
.compliance-foot { padding-bottom: 14px; }
/* ── Sheet backdrop ───────────────────────────────────────────── */
.mb-sheet-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(10, 10, 10, 0.42);
opacity: 0;
pointer-events: none;
transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
z-index: 55;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.mb-sheet-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
/* ── Sheet drawer ─────────────────────────────────────────────── */
.mb-sheet {
display: flex;
flex-direction: column;
position: fixed;
left: 0; right: 0; bottom: 0;
background: var(--surface);
border-top-left-radius: 22px;
border-top-right-radius: 22px;
max-height: 82vh;
overflow: hidden;
transform: translateY(100%);
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
z-index: 60;
box-shadow: 0 -16px 48px -16px rgba(0, 0, 0, 0.22);
padding-bottom: env(safe-area-inset-bottom);
}
.mb-sheet.is-open { transform: translateY(0); }
.mb-sheet-handle {
width: 38px;
height: 4px;
margin: 10px auto 6px;
border-radius: 99px;
background: var(--border);
}
.mb-sheet-head {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 20px 14px;
border-bottom: 1px solid var(--border);
}
.mb-sheet-user {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.mb-sheet-user .avatar { width: 36px; height: 36px; flex-shrink: 0; }
.mb-sheet-user-text { min-width: 0; flex: 1; }
.mb-sheet-user-name {
font-size: 14px; font-weight: 600;
letter-spacing: -0.015em;
color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb-sheet-user-meta {
font-size: 12px; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb-sheet-close {
appearance: none;
background: var(--bg-app);
border: 1px solid var(--border);
width: 32px; height: 32px;
border-radius: 99px;
color: var(--muted);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transform: rotate(45deg); /* turn + into × */
transition: background 140ms ease;
}
.mb-sheet-close:active { background: var(--border); }
.mb-sheet-items {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px; /* breathing room between page buttons — they
had backgrounds (especially in dark mode) but
stacked flush so the drawer read as one solid
block instead of a list of choices. */
padding: 10px 12px;
}
.mb-sheet-item {
display: grid;
grid-template-columns: 36px 1fr auto auto;
align-items: center;
gap: 12px;
width: 100%;
padding: 13px 14px;
border-radius: 12px;
background: var(--surface-alt);
border: 1px solid var(--border);
font-family: inherit;
color: var(--text);
cursor: pointer;
text-align: left;
transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
}
.mb-sheet-item:hover { border-color: var(--border-strong, var(--border)); }
.mb-sheet-item:active { transform: scale(0.99); background: var(--bg-app); }
.mb-sheet-item:active { background: var(--bg-app); }
.mb-sheet-item.is-active {
background: var(--accent-tint);
color: var(--accent);
font-weight: 600;
}
.mb-sheet-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 9px;
background: var(--bg-app);
color: var(--text);
border: 1px solid var(--border);
}
.mb-sheet-item.is-active .mb-sheet-icon {
background: rgba(217, 119, 6, 0.16);
color: var(--accent);
border-color: rgba(217, 119, 6, 0.3);
}
.mb-sheet-label {
font-size: 14.5px;
font-weight: 500;
letter-spacing: -0.01em;
}
.mb-sheet-item.is-active .mb-sheet-label { font-weight: 600; }
.mb-sheet-item svg:last-child { color: var(--muted-2); }
.mb-sheet-badge {
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 99px;
background: var(--accent);
color: #fff;
}
.mb-sheet-signout {
margin: 8px 16px 16px;
height: 42px;
border: 1px solid var(--border);
background: var(--surface);
border-radius: 10px;
font-family: inherit;
font-size: 13.5px;
font-weight: 500;
color: var(--muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: background 140ms ease, color 140ms ease;
}
.mb-sheet-signout svg { transform: rotate(180deg); }
.mb-sheet-signout:active { background: var(--bg-app); color: var(--text); }
}
/* ════════════════════════════════════════════════════════════════════════
SALES — premium SaaS layout with capped chart
════════════════════════════════════════════════════════════════════════ */
.sales-hero {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--card-shadow);
margin-bottom: 18px;
overflow: hidden;
}
.sales-hero-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
padding: 28px 32px 22px;
flex-wrap: wrap;
}
.sales-hero-titles { min-width: 0; flex: 1; }
.sales-hero-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted);
}
.sales-hero-eyebrow svg { color: var(--accent); }
.sales-hero-title {
font-size: 30px; font-weight: 700;
letter-spacing: -0.025em; line-height: 1.1;
margin: 8px 0 0;
}
.sales-hero-sub {
font-size: 14px; color: var(--muted);
line-height: 1.55; margin: 10px 0 0;
max-width: 64ch;
}
.sales-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sales-hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border-top: 1px solid var(--border);
}
.sales-hero-stat {
background: var(--surface);
padding: 20px 24px;
min-width: 0;
transition: background 160ms ease;
}
.sales-hero-stat:hover { background: var(--surface-alt); }
.sales-hero-stat-primary { background: var(--accent-faint); }
.sales-hero-stat-lbl {
font-size: 11px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted);
}
.sales-hero-stat-val {
font-size: 22px; font-weight: 700;
letter-spacing: -0.02em; line-height: 1.15;
margin-top: 8px;
font-variant-numeric: tabular-nums;
}
.sales-hero-stat-primary .sales-hero-stat-val { color: var(--accent); font-size: 26px; }
.sales-hero-stat-sub {
font-size: 12px; color: var(--muted);
margin-top: 4px;
}
/* Chart card — capped height regardless of viewport */
.sales-chart-card {
margin-bottom: 18px;
overflow: hidden;
}
.sales-chart-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 14px; padding: 18px 22px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.sales-chart-title {
font-size: 15px; font-weight: 600;
letter-spacing: -0.015em;
margin: 0;
}
.sales-chart-sub {
font-size: 12.5px; color: var(--muted);
margin: 4px 0 0;
}
.sales-chart-body {
padding: 18px 14px 12px;
/* Cap the chart so it doesn't stretch hideously on wide screens */
max-height: 280px;
display: flex;
align-items: stretch;
}
.sales-chart-body > svg {
width: 100%;
max-width: 100%;
max-height: 240px;
height: auto;
display: block;
}
/* Toolbar + pagination polish */
.sales-toolbar-right { display: flex; gap: 8px; align-items: center; }
.sales-pagination {
display: flex; justify-content: space-between; align-items: center;
margin-top: 14px;
font-size: 12.5px; color: var(--muted);
flex-wrap: wrap;
gap: 12px;
}
.sales-pagination-btns { display: flex; gap: 6px; }
@media (min-width: 1700px) {
.sales-hero-head { padding: 32px 40px 26px; }
.sales-hero-title { font-size: 36px; }
.sales-hero-stat { padding: 24px 28px; }
.sales-hero-stat-val { font-size: 26px; }
.sales-hero-stat-primary .sales-hero-stat-val { font-size: 32px; }
.sales-chart-body { max-height: 320px; }
.sales-chart-body > svg { max-height: 280px; }
}
@media (min-width: 2400px) {
.sales-hero-stat-val { font-size: 30px; }
.sales-hero-stat-primary .sales-hero-stat-val { font-size: 38px; }
/* Limit absolute chart height even on huge monitors — looks intentional */
.sales-chart-body { max-height: 360px; }
.sales-chart-body > svg { max-height: 320px; }
}
@media (max-width: 1000px) {
.sales-hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
/* Stack title + actions vertically — title needs full width */
.sales-hero-head { flex-direction: column; align-items: stretch; }
.sales-hero-actions { width: 100%; }
.sales-hero-actions .btn { flex: 1; justify-content: center; }
}
@media (max-width: 720px) {
.sales-hero-head { padding: 22px 22px 18px; gap: 16px; }
.sales-hero-title { font-size: 24px; }
.sales-hero-sub { font-size: 13px; }
.sales-hero-stat { padding: 14px 16px; }
.sales-hero-stat-val { font-size: 18px; }
.sales-hero-stat-primary .sales-hero-stat-val { font-size: 22px; }
.sales-chart-head { padding: 14px 16px; }
.sales-chart-body { padding: 12px 4px; max-height: 220px; }
.sales-chart-body > svg { max-height: 200px; }
}
@media (max-width: 480px) {
.sales-hero-stats { grid-template-columns: 1fr; }
.sales-hero-stat { border-bottom: 1px solid var(--border); padding: 12px 16px; }
.sales-hero-stat:last-child { border-bottom: none; }
.sales-hero-actions .btn { flex: 1; justify-content: center; }
}
/* Pre-anim states */
@media (prefers-reduced-motion: no-preference) {
.sales-hero:not([data-motion-done]) { opacity: 0; transform: translateY(10px); }
.sales-chart-card:not([data-motion-done]) { opacity: 0; transform: translateY(8px); }
.sales-table:not([data-motion-done]) { opacity: 0; transform: translateY(6px); }
}
/* ════════════════════════════════════════════════════════════════════════
REWARDS HERO v5 — "The Climb" · dark, cinematic, progress-ring centric
════════════════════════════════════════════════════════════════════════ */
.rwh {
position: relative;
background: #0b0b0d;
border: 1px solid #1c1c20;
border-radius: 20px;
overflow: hidden;
margin-bottom: 22px;
box-shadow: 0 18px 48px -24px rgba(0, 0, 0, 0.5);
color: #fafafa;
}
/* Ambient amber glow + faint grid texture */
.rwh-glow {
position: absolute;
top: -45%; right: -8%;
width: 620px; height: 620px;
background: radial-gradient(closest-side, rgba(217, 119, 6, 0.34), transparent 72%);
pointer-events: none;
filter: blur(12px);
z-index: 0;
}
.rwh::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
background-size: 46px 46px;
pointer-events: none;
z-index: 0;
mask-image: linear-gradient(135deg, #000 0%, transparent 62%);
-webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 62%);
}
.rwh-grid, .rwh-stats { position: relative; z-index: 1; }
.rwh-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 320px);
gap: 40px;
padding: 36px 40px 30px;
align-items: center;
}
/* ── Left column ──────────────────────────────────────────────────────── */
.rwh-left { min-width: 0; }
.rwh-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.rwh-eyebrow svg { color: var(--accent); }
.rwh-title {
font-size: clamp(26px, 2.5vw, 38px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.12;
margin: 14px 0 0;
color: #fff;
}
.rwh-accent {
color: #fbbf24;
white-space: nowrap;
}
.rwh-sub {
font-size: 14px;
line-height: 1.62;
color: rgba(255, 255, 255, 0.6);
margin: 14px 0 0;
max-width: 56ch;
}
.rwh-sub strong { color: #fff; font-weight: 600; }
/* OR-path progress bars */
.rwh-paths {
display: flex;
align-items: flex-end;
gap: 16px;
margin-top: 22px;
}
.rwh-path { flex: 1; min-width: 0; }
.rwh-path-head {
display: flex; justify-content: space-between; align-items: baseline;
gap: 10px;
font-size: 12px;
color: rgba(255, 255, 255, 0.62);
margin-bottom: 8px;
}
.rwh-path-head .mono {
font-family: var(--font-mono);
font-size: 11.5px;
color: rgba(255, 255, 255, 0.92);
font-variant-numeric: tabular-nums;
}
.rwh-path-or {
font-size: 10px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.32);
padding-bottom: 5px;
}
.rwh-bar {
height: 6px;
background: rgba(255, 255, 255, 0.09);
border-radius: 99px;
overflow: hidden;
}
.rwh-bar-fill {
height: 100%;
width: var(--w, 0%); /* Motion sweeps from 0; CSS default = target */
background: linear-gradient(90deg, #d97706, #fbbf24);
border-radius: 99px;
}
.rwh-bar-fill.alt {
background: rgba(255, 255, 255, 0.34);
}
/* ── Right column — progress ring ─────────────────────────────────────── */
.rwh-right {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.rwh-ring {
position: relative;
width: 220px; height: 220px;
}
.rwh-ring-svg {
width: 100%; height: 100%;
transform: rotate(-90deg);
}
.rwh-ring-track {
fill: none;
stroke: rgba(255, 255, 255, 0.08);
stroke-width: 13;
}
.rwh-ring-prog {
fill: none;
stroke: url(#rwhGrad);
stroke-width: 13;
stroke-linecap: round;
filter: drop-shadow(0 0 6px rgba(217, 119, 6, 0.55));
}
.rwh-ring-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
}
.rwh-ring-crest {
width: 46px; height: 46px;
display: flex; align-items: center; justify-content: center;
color: #fbbf24;
margin-bottom: 4px;
}
.rwh-ring-pct {
font-size: 38px;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: #fff;
font-variant-numeric: tabular-nums;
}
.rwh-ring-pct span { font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.5); }
.rwh-ring-cap {
font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-top: 3px;
}
/* Reward callout under the ring */
.rwh-reward {
display: flex;
align-items: baseline;
gap: 8px;
padding: 10px 18px;
background: rgba(217, 119, 6, 0.12);
border: 1px solid rgba(217, 119, 6, 0.32);
border-radius: 99px;
}
.rwh-reward-l {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.rwh-reward-v {
font-size: 18px; font-weight: 800;
letter-spacing: -0.02em;
color: #fbbf24;
font-variant-numeric: tabular-nums;
}
.rwh-reward-s { font-size: 12px; color: rgba(255, 255, 255, 0.55); }
/* ── Bottom stat strip ────────────────────────────────────────────────── */
.rwh-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.rwh-stat {
padding: 16px 40px;
border-right: 1px solid rgba(255, 255, 255, 0.07);
display: flex;
flex-direction: column;
gap: 4px;
}
.rwh-stat:last-child { border-right: none; }
.rwh-stat .l {
font-size: 11px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
.rwh-stat .v {
font-size: 19px; font-weight: 700;
letter-spacing: -0.02em;
color: #fff;
font-variant-numeric: tabular-nums;
display: inline-flex; align-items: center; gap: 8px;
}
.rwh-stat .v svg { color: #fbbf24; }
/* ── Responsive ───────────────────────────────────────────────────────── */
@media (min-width: 1700px) {
.rwh-grid { padding: 44px 48px 36px; gap: 52px; }
.rwh-ring { width: 248px; height: 248px; }
.rwh-stat { padding: 18px 48px; }
}
@media (max-width: 1040px) {
.rwh-grid {
grid-template-columns: 1fr;
gap: 28px;
padding: 30px 30px 26px;
}
.rwh-right { order: -1; }
.rwh-stats { grid-template-columns: repeat(3, 1fr); }
.rwh-stat { padding: 14px 30px; }
}
@media (max-width: 640px) {
.rwh { border-radius: 16px; }
.rwh-grid { padding: 24px 22px 22px; gap: 22px; }
.rwh-ring { width: 180px; height: 180px; }
.rwh-ring-pct { font-size: 32px; }
.rwh-paths { flex-direction: column; align-items: stretch; gap: 14px; }
.rwh-path-or { display: none; }
.rwh-stats { grid-template-columns: 1fr; }
.rwh-stat {
padding: 13px 22px;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
flex-direction: row; justify-content: space-between; align-items: center;
}
.rwh-stat:last-child { border-bottom: none; }
}
@media (prefers-reduced-motion: no-preference) {
.rwh:not([data-motion-done]) { opacity: 0; transform: translateY(12px); }
}
/* ════════════════════════════════════════════════════════════════════════
NETWORK — hero band + polished tables
════════════════════════════════════════════════════════════════════════ */
.net-hero {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--card-shadow);
margin-bottom: 18px;
overflow: hidden;
}
.net-hero-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
padding: 28px 32px 22px;
flex-wrap: wrap;
}
.net-hero-text { min-width: 0; flex: 1; }
.net-hero-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted);
}
.net-hero-eyebrow svg { color: var(--accent); }
.net-hero-title {
font-size: 30px; font-weight: 700;
letter-spacing: -0.025em; line-height: 1.1;
margin: 8px 0 0;
}
.net-hero-sub {
font-size: 14px; color: var(--muted);
line-height: 1.55; margin: 10px 0 0;
max-width: 60ch;
}
.net-hero-sub strong { color: var(--text); font-weight: 600; }
.net-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.net-hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border-top: 1px solid var(--border);
}
.net-hero-stat {
background: var(--surface);
padding: 20px 24px;
min-width: 0;
transition: background 160ms ease;
}
.net-hero-stat:hover { background: var(--surface-alt); }
.net-hero-stat-accent { background: var(--accent-faint); }
.net-hero-stat-lbl {
font-size: 11px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted);
}
.net-hero-stat-val {
font-size: 24px; font-weight: 700;
letter-spacing: -0.02em; line-height: 1.15;
margin-top: 8px;
font-variant-numeric: tabular-nums;
}
.net-hero-stat-accent .net-hero-stat-val { color: var(--accent); font-size: 28px; }
.net-hero-stat-sub {
font-size: 12px; color: var(--muted);
margin-top: 4px;
}
@media (min-width: 1700px) {
.net-hero-head { padding: 32px 40px 26px; }
.net-hero-title { font-size: 36px; }
.net-hero-stat { padding: 24px 28px; }
.net-hero-stat-val { font-size: 28px; }
.net-hero-stat-accent .net-hero-stat-val { font-size: 32px; }
}
@media (max-width: 1000px) {
.net-hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
/* Stack title + actions below 900 — title needs full width */
.net-hero-head { flex-direction: column; align-items: stretch; }
.net-hero-actions { width: 100%; }
.net-hero-actions .btn { flex: 1; justify-content: center; }
}
@media (max-width: 720px) {
.net-hero-head { padding: 22px 22px 18px; gap: 16px; }
.net-hero-title { font-size: 24px; }
.net-hero-sub { font-size: 13px; }
.net-hero-stat { padding: 14px 16px; }
.net-hero-stat-val { font-size: 18px; }
.net-hero-stat-accent .net-hero-stat-val { font-size: 22px; }
}
@media (max-width: 480px) {
.net-hero-stats { grid-template-columns: 1fr; }
.net-hero-stat { border-bottom: 1px solid var(--border); }
.net-hero-stat:last-child { border-bottom: none; }
}
@media (prefers-reduced-motion: no-preference) {
.net-hero:not([data-motion-done]) { opacity: 0; transform: translateY(10px); }
}
/* Referral page entrance pre-state */
@media (prefers-reduced-motion: no-preference) {
.ref-hero:not([data-motion-done]) { opacity: 0; transform: translateY(10px); }
}
/* ════════════════════════════════════════════════════════════════════════
SETTINGS — refined hero + sidebar with icons & descriptions
════════════════════════════════════════════════════════════════════════ */
.set-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
gap: 32px;
align-items: center;
padding: 28px 32px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--card-shadow);
margin-bottom: 18px;
}
.set-hero-text { min-width: 0; }
.set-hero-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted);
}
.set-hero-eyebrow svg { color: var(--accent); }
.set-hero-title {
font-size: 30px; font-weight: 700;
letter-spacing: -0.025em; line-height: 1.1;
margin: 8px 0 0;
}
.set-hero-sub {
font-size: 14px; color: var(--muted);
line-height: 1.55; margin: 10px 0 0;
max-width: 56ch;
}
.set-hero-profile {
display: flex; align-items: center; gap: 14px;
padding: 16px 18px;
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: 12px;
min-width: 0;
}
.set-hero-profile .avatar { width: 48px; height: 48px; flex-shrink: 0; }
.set-hero-profile-text { min-width: 0; flex: 1; }
.set-hero-profile-name {
font-size: 14.5px; font-weight: 600;
letter-spacing: -0.015em;
display: inline-flex; align-items: center; gap: 8px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.set-hero-profile-meta {
font-size: 12.5px; color: var(--muted);
margin-top: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Override settings-nav for a richer sidebar */
.settings-shell .settings-nav {
display: flex;
flex-direction: column;
gap: 4px;
}
.settings-shell .settings-nav button {
appearance: none;
background: transparent;
border: 1px solid transparent;
font-family: inherit;
width: 100%;
padding: 12px 14px;
border-radius: 10px;
cursor: pointer;
display: grid;
grid-template-columns: 36px 1fr auto;
align-items: center;
gap: 12px;
color: var(--text);
text-align: left;
transition: background 140ms ease, border-color 140ms ease;
}
.settings-shell .settings-nav button:hover {
background: var(--bg-app);
}
.settings-shell .settings-nav button.active {
background: var(--accent-tint);
border-color: rgba(217, 119, 6, 0.22);
}
.set-nav-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 9px;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
}
.settings-shell .settings-nav button.active .set-nav-icon {
background: rgba(217, 119, 6, 0.18);
color: var(--accent);
border-color: rgba(217, 119, 6, 0.32);
}
.set-nav-text { display: flex; flex-direction: column; min-width: 0; }
.set-nav-label {
font-size: 13.5px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
}
.settings-shell .settings-nav button.active .set-nav-label { color: var(--accent); }
.set-nav-desc {
font-size: 11.5px;
color: var(--muted);
margin-top: 2px;
}
.settings-shell .settings-nav button svg:last-child {
color: var(--muted-2);
transition: transform 140ms ease;
}
.settings-shell .settings-nav button:hover svg:last-child {
transform: translateX(2px);
color: var(--text);
}
.settings-shell .settings-nav button.active svg:last-child { color: var(--accent); }
/* Responsive */
@media (min-width: 1700px) {
.set-hero { padding: 32px 40px; }
.set-hero-title { font-size: 36px; }
}
@media (max-width: 1100px) {
.set-hero { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 900px) {
.settings-shell { grid-template-columns: 1fr; gap: 18px; }
.settings-shell .settings-nav {
flex-direction: row;
overflow-x: auto;
scrollbar-width: none;
padding: 4px;
gap: 6px;
}
.settings-shell .settings-nav::-webkit-scrollbar { display: none; }
.settings-shell .settings-nav button {
flex-shrink: 0;
grid-template-columns: 28px auto;
padding: 8px 12px;
width: auto;
}
.settings-shell .settings-nav button .set-nav-icon { width: 28px; height: 28px; }
.settings-shell .settings-nav button .set-nav-desc { display: none; }
.settings-shell .settings-nav button svg:last-child { display: none; }
}
@media (max-width: 720px) {
.set-hero { padding: 22px; gap: 16px; }
.set-hero-title { font-size: 24px; }
.set-hero-sub { font-size: 13px; }
}
@media (prefers-reduced-motion: no-preference) {
.set-hero:not([data-motion-done]) { opacity: 0; transform: translateY(10px); }
[data-set-nav]:not([data-motion-done]) { opacity: 0; transform: translateY(6px); }
[data-set-content]:not([data-motion-done]) { opacity: 0; transform: translateY(6px); }
}
/* Referral hero — responsive: stack at narrow widths, hide QR */
@media (max-width: 720px) {
.ref-hero {
grid-template-columns: 1fr;
padding: 24px;
gap: 18px;
}
.ref-hero h2 { font-size: 20px; }
.ref-hero .ref-hero-sub { font-size: 13px; }
.ref-code { font-size: 22px; letter-spacing: 4px; }
.qr-frame { display: none; }
.ref-url-row { flex-wrap: wrap; gap: 6px; }
.ref-url-row code { min-width: 0; width: 100%; }
.ref-url-row button { width: 100%; }
}
@media (max-width: 480px) {
.ref-hero { padding: 20px; }
.ref-code { font-size: 18px; letter-spacing: 3px; }
}
/* ════════════════════════════════════════════════════════════════════════
REWARDS v4 — premium section headers, connected ladder, clean milestones
════════════════════════════════════════════════════════════════════════ */
/* ── Section header (text + optional right-side stat) ──────────────────── */
.r-sec-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 28px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.r-sec-head-text { min-width: 0; flex: 1; }
.r-sec-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted);
}
.r-sec-eyebrow svg { color: var(--accent); }
.r-sec-title {
font-size: 24px; font-weight: 700;
letter-spacing: -0.025em; line-height: 1.18;
margin: 8px 0 0; color: var(--text);
}
.r-sec-sub {
font-size: 13.5px; color: var(--muted);
line-height: 1.55; margin: 8px 0 0;
max-width: 64ch;
}
.r-sec-sub strong { color: var(--text); font-weight: 600; }
.r-sec-stat {
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 20px;
text-align: right;
flex-shrink: 0;
}
.r-sec-stat-lbl {
font-size: 10.5px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--muted);
}
.r-sec-stat-val {
font-size: 26px; font-weight: 700;
letter-spacing: -0.025em; line-height: 1.1;
color: var(--accent);
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.r-sec-stat-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* ── Connected ladder — progress track row above the tier cards ───────── */
.r-ladder-wrap { position: relative; }
.r-ladder-track {
position: relative;
height: 40px;
margin-bottom: 6px;
}
.r-ladder-track-line {
position: absolute;
top: 50%;
left: 10%; right: 10%;
height: 3px;
transform: translateY(-50%);
background: var(--border);
border-radius: 99px;
overflow: hidden;
}
.r-ladder-track-fill {
height: 100%;
width: var(--frac, 0%); /* Motion sweeps this from 0 on reveal */
background: var(--accent);
border-radius: inherit;
}
.r-ladder-node {
position: absolute;
top: 50%;
width: 22px; height: 22px;
border-radius: 50%;
transform: translate(-50%, -50%);
display: flex; align-items: center; justify-content: center;
background: var(--surface);
border: 2px solid var(--border);
color: #fff;
z-index: 1;
}
.r-ladder-node:nth-child(2) { left: 10%; }
.r-ladder-node:nth-child(3) { left: 30%; }
.r-ladder-node:nth-child(4) { left: 50%; }
.r-ladder-node:nth-child(5) { left: 70%; }
.r-ladder-node:nth-child(6) { left: 90%; }
.r-ladder-node.earned { background: var(--accent); border-color: var(--accent); }
.r-ladder-node.current { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.14); }
.r-ladder-node-pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
animation: r-ladder-pulse 2s ease-in-out infinite;
}
@keyframes r-ladder-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.35); opacity: 0.7; }
}
@media (max-width: 1100px) {
/* Ladder wraps to 3/2 columns — the 5-node track no longer maps */
.r-ladder-track { display: none; }
}
/* ── Milestones — clean list (replaces inline-styled "All" view) ──────── */
.r-mile-list {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--card-shadow);
}
.r-mile-row {
display: grid;
grid-template-columns: 44px 1fr auto auto;
gap: 16px;
align-items: center;
padding: 14px 22px;
border-top: 1px solid var(--border);
transition: background 140ms ease;
}
.r-mile-row:first-child { border-top: none; }
.r-mile-row:hover { background: var(--surface-alt); }
.r-mile-row:not(.is-done) { opacity: 0.72; }
.r-mile-row-mark {
width: 38px; height: 38px;
border-radius: 9px;
background: var(--bg-app);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
color: var(--muted-2);
}
.r-mile-row.is-done .r-mile-row-mark { color: var(--text); }
.r-mile-row-text { min-width: 0; }
.r-mile-row-name {
font-size: 13.5px; font-weight: 600;
letter-spacing: -0.01em; color: var(--text);
}
.r-mile-row-desc {
font-size: 12px; color: var(--muted);
margin-top: 1px;
}
.r-mile-row-meta {
font-size: 11.5px; color: var(--muted);
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
.r-mile-row-badge {
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.04em; text-transform: uppercase;
padding: 4px 10px;
border-radius: 99px;
border: 1px solid var(--border);
color: var(--muted);
display: inline-flex; align-items: center; gap: 4px;
white-space: nowrap;
}
.r-mile-row-badge.is-done {
color: var(--success-text);
background: var(--success-bg-2);
border-color: var(--success-border);
}
@media (max-width: 640px) {
.r-mile-row { grid-template-columns: 38px 1fr auto; gap: 12px; padding: 12px 16px; }
.r-mile-row-meta { display: none; }
}
/* ── Section header responsive ─────────────────────────────────────────── */
@media (min-width: 1700px) {
.r-sec-title { font-size: 28px; }
.r-sec-stat-val { font-size: 30px; }
}
@media (max-width: 720px) {
.r-sec-head { gap: 14px; margin-bottom: 16px; }
.r-sec-title { font-size: 20px; }
.r-sec-sub { font-size: 13px; }
.r-sec-stat { width: 100%; text-align: left; padding: 12px 16px; }
}
/* ── Motion pre-states for Rewards sections ────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
[data-rw-section]:not([data-motion-done]) { opacity: 0; transform: translateY(14px); }
[data-rw-block]:not([data-motion-done]) { opacity: 0; transform: translateY(10px); }
/* Dashboard pre-states */
[data-dash-hero]:not([data-motion-done]) { opacity: 0; transform: translateY(10px); }
[data-dash-metric]:not([data-motion-done]) { opacity: 0; transform: translateY(8px); }
[data-dash-card]:not([data-motion-done]) { opacity: 0; transform: translateY(14px); }
[data-dash-activity]:not([data-motion-done]) { opacity: 0; transform: translateY(10px); }
[data-dash-banner]:not([data-motion-done]) { opacity: 0; transform: translateY(12px); }
/* Orders pre-states */
[data-orders-header]:not([data-motion-done]) { opacity: 0; transform: translateY(8px); }
[data-orders-stats]:not([data-motion-done]) { opacity: 0; transform: translateY(8px); }
[data-orders-stat]:not([data-motion-done]) { opacity: 0; transform: translateY(6px); }
[data-orders-table]:not([data-motion-done]) { opacity: 0; transform: translateY(10px); }
[data-orders-row]:not([data-motion-done]) { opacity: 0; transform: translateY(6px); }
}
/* ════════════════════════════════════════════════════════════════════════════
REWARDS — PREMIUM REDESIGN
Appended overrides — higher specificity takes effect last.
════════════════════════════════════════════════════════════════════════════ */
/* ── Global rhythm ─────────────────────────────────────────────────────── */
.r-section { margin-bottom: 56px; }
.r-section.compact { margin-bottom: 28px; }
/* ── Section headers ───────────────────────────────────────────────────── */
.r-sec-head { margin-bottom: 28px; align-items: flex-start; gap: 28px; }
.r-sec-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--accent);
background: rgba(217,119,6,0.09);
border-radius: 99px;
padding: 4px 11px 4px 9px;
margin-bottom: 12px;
border: none;
}
.r-sec-eyebrow svg { color: var(--accent); }
.r-sec-title {
font-size: 27px;
font-weight: 800;
letter-spacing: -0.045em;
line-height: 1.15;
color: var(--text);
}
.r-sec-sub {
font-size: 14px;
color: var(--muted);
line-height: 1.65;
margin-top: 8px;
max-width: 54ch;
}
.r-sec-sub strong { color: var(--text); font-weight: 600; }
.r-sec-stat {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
padding: 18px 26px 20px;
min-width: 190px;
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.r-sec-stat-lbl {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-2);
margin-bottom: 6px;
}
.r-sec-stat-val {
font-size: 34px;
font-weight: 900;
letter-spacing: -0.055em;
color: var(--accent);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.r-sec-stat-sub { font-size: 11px; color: var(--muted-2); margin-top: 5px; }
/* ── Hero ──────────────────────────────────────────────────────────────── */
.rwh {
background: #060609;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 24px;
margin-bottom: 44px;
box-shadow:
0 1px 0 rgba(255,255,255,0.055) inset,
0 36px 72px -24px rgba(0,0,0,0.75),
0 0 0 1px rgba(0,0,0,0.4);
}
.rwh-glow {
top: -40%;
right: -6%;
width: 75%;
height: 120%;
background: radial-gradient(ellipse at 60% 40%,
rgba(217,119,6,0.25) 0%,
rgba(180,83,9,0.10) 42%,
transparent 68%
);
filter: blur(54px);
}
.rwh::before {
background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
background-size: 26px 26px;
mask-image: radial-gradient(ellipse 55% 85% at 88% 25%, black 0%, transparent 65%);
-webkit-mask-image: radial-gradient(ellipse 55% 85% at 88% 25%, black 0%, transparent 65%);
}
.rwh-grid {
padding: 50px 60px 42px;
gap: 68px;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 260px);
align-items: center;
}
.rwh-eyebrow {
font-size: 10.5px;
letter-spacing: 0.12em;
color: rgba(255,255,255,0.38);
}
.rwh-eyebrow svg { color: var(--accent); }
.rwh-title {
font-size: clamp(28px, 3.1vw, 46px);
font-weight: 800;
letter-spacing: -0.055em;
line-height: 1.07;
margin-top: 18px;
color: #fff;
}
.rwh-accent { color: #fbbf24; white-space: nowrap; }
.rwh-sub {
font-size: 14.5px;
color: rgba(255,255,255,0.48);
line-height: 1.68;
margin-top: 18px;
}
.rwh-sub strong { color: rgba(255,255,255,0.82); font-weight: 600; }
.rwh-paths { margin-top: 30px; gap: 22px; align-items: flex-end; }
.rwh-path-head { font-size: 11.5px; color: rgba(255,255,255,0.48); margin-bottom: 9px; }
.rwh-path-head .mono {
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,0.88);
font-variant-numeric: tabular-nums;
}
.rwh-path-or {
font-size: 9.5px;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.24);
padding-bottom: 6px;
}
.rwh-bar { height: 4px; background: rgba(255,255,255,0.07); border-radius: 99px; overflow: hidden; }
.rwh-bar-fill {
background: linear-gradient(90deg, #b45309 0%, #f59e0b 55%, #fde68a 100%);
border-radius: 99px;
}
.rwh-bar-fill.alt {
background: linear-gradient(90deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.44) 100%);
}
/* Ring */
.rwh-grid { align-items: stretch; grid-template-columns: minmax(0, 1.5fr) minmax(0, 340px); padding: 0 60px; }
.rwh-left { padding: 50px 0 42px; }
.rwh-right { gap: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 20px 0; }
.rwh-ring { height: 100%; width: auto; aspect-ratio: 1; max-height: 380px; min-height: 160px; }
.rwh-ring-track { fill: none; stroke: rgba(255,255,255,0.055); stroke-width: 9; }
.rwh-ring-prog {
fill: none;
stroke-width: 9;
stroke-linecap: round;
filter: drop-shadow(0 0 9px rgba(251,191,36,0.55)) drop-shadow(0 0 2px rgba(251,191,36,0.9));
}
.rwh-ring-center { gap: 0; }
.rwh-ring-crest { width: 42px; height: 42px; color: #fbbf24; margin-bottom: 3px; }
.rwh-ring-pct {
font-size: 46px;
font-weight: 900;
letter-spacing: -0.07em;
line-height: 1;
color: #fff;
}
.rwh-ring-pct span { font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.38); }
.rwh-ring-cap {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.32);
margin-top: 5px;
}
/* Next-reward callout */
.rwh-reward {
background: rgba(0,0,0,0.38);
border: 1px solid rgba(217,119,6,0.22);
border-radius: 14px;
padding: 15px 26px 16px;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1px;
width: 100%;
}
.rwh-reward-l {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.32);
}
.rwh-reward-v {
font-size: 28px;
font-weight: 900;
letter-spacing: -0.05em;
color: #fbbf24;
line-height: 1.1;
font-variant-numeric: tabular-nums;
margin-top: 3px;
}
.rwh-reward-s { font-size: 11px; color: rgba(255,255,255,0.32); margin-top: 2px; }
/* Stat strip */
.rwh-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid rgba(255,255,255,0.055);
}
.rwh-stat {
padding: 22px 60px;
border-right: 1px solid rgba(255,255,255,0.055);
display: flex;
flex-direction: column;
gap: 5px;
}
.rwh-stat:last-child { border-right: none; }
.rwh-stat .l {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.33);
}
.rwh-stat .v {
font-size: 25px;
font-weight: 800;
letter-spacing: -0.045em;
color: #fff;
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
gap: 8px;
}
.rwh-stat .v svg { color: #fbbf24; }
/* ── Ladder track ──────────────────────────────────────────────────────── */
.r-ladder-wrap { margin-top: 10px; }
.r-ladder { gap: 13px; }
.r-ladder-track { margin-bottom: 20px; }
.r-ladder-track-line {
height: 3px;
background: #ebebec;
border-radius: 99px;
position: absolute;
top: 50%;
left: 10%; right: 10%;
transform: translateY(-50%);
}
.r-ladder-track-fill {
background: linear-gradient(90deg, var(--accent) 0%, #fbbf24 100%);
height: 100%;
border-radius: 99px;
left: 0;
position: absolute;
width: calc(var(--frac, 0) * 100%);
}
.r-ladder-node {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #ddd;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
transition: transform 0.2s, box-shadow 0.2s;
}
.r-ladder-node.earned {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 1px 6px rgba(217,119,6,0.35);
}
.r-ladder-node.current {
background: #fff;
border-color: var(--accent);
border-width: 2px;
box-shadow: 0 0 0 5px rgba(217,119,6,0.14), 0 0 0 10px rgba(217,119,6,0.05), 0 2px 8px rgba(217,119,6,0.3);
}
/* ── Tier cards ────────────────────────────────────────────────────────── */
.r-tier {
background: #fff;
border: 1px solid #e8e8ea;
border-radius: 18px;
padding: 26px 22px 22px;
min-height: 410px;
box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.04);
transition: transform 0.2s cubic-bezier(.2,.8,.2,1), box-shadow 0.2s, border-color 0.2s;
}
.r-tier:hover:not(.locked) {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);
}
.r-tier::after { border-radius: 18px; }
.r-tier > * { position: relative; z-index: 1; }
.r-tier .mark-stage { height: 112px; margin-bottom: 12px; }
.r-tier .mark-stage::after {
width: 80px; height: 10px;
background: radial-gradient(ellipse, rgba(0,0,0,0.09), transparent 68%);
}
.r-tier .tier-status {
font-size: 9.5px;
letter-spacing: 0.13em;
font-weight: 700;
color: var(--muted-2);
text-transform: uppercase;
height: 18px;
}
.r-tier .tier-status.current { color: var(--accent); }
.r-tier .tier-status.earned { color: var(--muted-2); }
.r-tier .tier-name {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.04em;
margin-top: 8px;
color: var(--text);
}
.r-tier .tier-tagline {
font-size: 11.5px;
font-style: normal;
color: var(--muted);
margin-top: 7px;
line-height: 1.45;
min-height: 32px;
}
.r-tier .bonus {
margin-top: 16px;
padding: 14px 12px 13px;
border-radius: 11px;
border: 1px solid #ebebed;
background: #f9f9fa;
text-align: center;
position: relative;
overflow: visible;
}
.r-tier .bonus .amt {
font-size: 26px;
font-weight: 900;
letter-spacing: -0.055em;
color: var(--text);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.r-tier .bonus .lbl {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-2);
margin-top: 6px;
font-family: var(--font-mono);
}
.r-tier .bonus.none .amt { color: var(--muted-2); font-size: 15px; letter-spacing: 0; font-weight: 600; }
.r-tier .req {
margin-top: 16px;
gap: 5px;
font-size: 12px;
}
.r-tier .req .pair { gap: 5px; }
.r-tier .req svg { color: var(--muted-2); }
.r-tier .req .or {
font-size: 9px;
letter-spacing: 0.14em;
color: var(--muted-2);
}
.r-tier .req .or::before,
.r-tier .req .or::after { width: 18px; background: #e8e8ea; }
.r-tier .foot {
border-top: 1px solid #ebebed;
padding-top: 14px;
margin-top: auto;
}
.r-tier .foot .stat .l { font-size: 9px; letter-spacing: 0.08em; color: var(--muted-2); }
.r-tier .foot .stat .v { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.r-tier .foot .stat .v.zero { color: var(--muted-2); }
/* Current rank */
.r-tier.current {
background: linear-gradient(155deg, #fffef9 0%, #fff 55%);
border-color: rgba(217,119,6,0.38);
box-shadow:
0 0 0 1px rgba(217,119,6,0.12),
0 4px 20px rgba(217,119,6,0.10),
0 1px 4px rgba(0,0,0,0.04);
}
.r-tier.current::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 18px;
border: 1.5px solid rgba(217,119,6,0.4);
pointer-events: none;
opacity: 1;
box-shadow: none;
}
.r-tier.current .bonus {
background: rgba(217,119,6,0.07);
border-color: rgba(217,119,6,0.22);
}
.r-tier.current .bonus .amt { color: #92400e; }
.r-tier.current .bonus::before {
content: 'Already earned';
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
background: #fff;
border: 1px solid rgba(217,119,6,0.22);
border-radius: 99px;
color: var(--muted);
padding: 2px 8px;
font-family: var(--font-mono);
top: -9px;
}
.r-tier.current .foot { border-top-color: rgba(217,119,6,0.14); }
.r-tier.current .tier-status::before { display: none; }
/* Next target */
.r-tier.next-target {
background: linear-gradient(155deg, #fffdf6 0%, #fff 60%);
border-color: rgba(217,119,6,0.5);
box-shadow:
0 0 0 1px rgba(217,119,6,0.16),
0 6px 26px rgba(217,119,6,0.12),
0 1px 4px rgba(0,0,0,0.04);
}
.r-tier.next-target .bonus {
background: rgba(217,119,6,0.08);
border-color: rgba(217,119,6,0.28);
border-style: solid;
}
.r-tier.next-target .bonus .amt { color: var(--accent); font-size: 28px; }
.r-tier.next-target .bonus .lbl { color: rgba(217,119,6,0.8); }
.r-tier.next-target .bonus::before {
content: "You're next";
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
background: var(--accent);
color: #fff;
padding: 3px 10px;
border-radius: 99px;
font-family: var(--font-mono);
box-shadow: 0 2px 6px rgba(217,119,6,0.32);
top: -9px;
}
/* Locked */
.r-tier.locked {
background: #fcfcfd;
border-color: #ebebee;
box-shadow: none;
}
.r-tier.locked .tier-name { color: #a0a0a8; }
.r-tier.locked .tier-tagline { color: #c0c0c8; font-style: normal; }
.r-tier.locked .bonus {
background: transparent;
border: 1px dashed #dddde0;
}
.r-tier.locked .bonus .amt { color: #c0c0c8; font-size: 24px; }
.r-tier.locked .bonus .lbl { color: #d0d0d5; }
.r-tier.locked .req .pair { color: #c0c0c8; }
.r-tier.locked .req svg { color: #d0d0d5; }
.r-tier.locked .req .or { color: #d8d8dc; }
.r-tier.locked .foot { border-top-color: #ebebee; }
.r-tier.locked .foot .stat .l{ color: #c8c8ce; }
.r-tier.locked .foot .stat .v{ color: #d0d0d5; }
.r-tier.locked:hover {
border-color: rgba(217,119,6,0.28);
background: #fffdf8;
box-shadow: 0 4px 18px rgba(217,119,6,0.07);
}
.r-tier.locked:hover .bonus {
border-color: rgba(217,119,6,0.28);
border-style: dashed;
background: rgba(217,119,6,0.04);
}
.r-tier.locked:hover .bonus .amt { color: var(--accent); }
.r-tier.locked.elite-tier .tier-name::after { display: none; }
/* Earned */
.r-tier.earned {
background: #f9f9fa;
border-color: #eaeaec;
box-shadow: none;
}
.r-tier.earned .mark-stage { opacity: 0.72; filter: grayscale(35%); }
.r-tier.earned .tier-name { color: var(--muted); }
.r-tier.earned .tier-tagline { color: var(--muted-2); font-style: normal; }
.r-tier.earned .bonus { background: #f3f3f5; border-color: #e8e8ea; }
.r-tier.earned .bonus .amt { color: var(--muted); }
.r-tier.earned .foot { border-top-color: #eaeaec; }
.r-tier.earned .foot .stat .v{ color: var(--muted); }
.r-tier.earned .tier-status::before { display: none; }
/* ── Journey stepper ───────────────────────────────────────────────────── */
.r-journey {
background: #fff;
border: 1px solid #eaeaec;
border-radius: 20px;
padding: 30px 38px 28px;
margin-bottom: 24px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
}
.r-journey::after { display: none; }
.r-journey-head { margin-bottom: 36px; }
.r-journey-head .l {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--muted-2);
margin-bottom: 5px;
}
.r-journey-head .h {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.045em;
color: var(--text);
}
.r-journey-head .total-block { text-align: right; }
.r-journey-head .total-pre {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--muted-2);
}
.r-journey-head .total-amt {
font-size: 40px;
font-weight: 900;
letter-spacing: -0.065em;
line-height: 1;
margin-top: 4px;
color: var(--text);
}
.r-journey-head .total-amt .accent { color: var(--accent); }
.r-journey-head .total-cap { font-size: 11px; color: var(--muted-2); margin-top: 5px; }
/* Track */
.r-journey-track::before {
background: #eaeaec;
height: 2px;
border-radius: 99px;
}
.r-journey-fill {
background: linear-gradient(90deg, var(--accent) 0%, #fbbf24 100%);
height: 2px;
top: calc(50% + 6px);
border-radius: 99px;
}
/* Nodes */
.r-journey-node .crest {
width: 54px;
height: 54px;
border-radius: 50%;
background: #f5f5f6;
border: 2px solid #e8e8ea;
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.22s, box-shadow 0.22s;
}
.r-journey-node.earned .crest {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 3px 12px rgba(217,119,6,0.32);
}
.r-journey-node.earned .crest svg { color: #fff; }
.r-journey-node.current .crest {
background: #fff;
border-color: var(--accent);
border-width: 2px;
box-shadow: 0 0 0 5px rgba(217,119,6,0.12), 0 3px 14px rgba(217,119,6,0.28);
}
.r-journey-node.current .crest::after { border-color: transparent; background: transparent; }
.r-journey-node.locked .crest { opacity: 0.42; }
.r-journey-node .nm {
font-size: 13px;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--text);
}
.r-journey-node.locked .nm { color: var(--muted-2); }
.r-journey-node.current .nm { color: var(--accent); font-weight: 800; }
.r-journey-node .nm-sub {
font-size: 10px;
color: var(--muted-2);
margin-top: 2px;
letter-spacing: 0;
}
.r-journey-node.current .nm-sub { color: var(--accent); font-weight: 600; opacity: 0.9; }
.r-journey-node:hover .crest { transform: scale(1.07); }
/* Bonus chips */
.r-journey-bonus {
font-size: 11px;
font-weight: 700;
letter-spacing: -0.01em;
padding: 4px 11px;
border-radius: 99px;
background: #f4f4f6;
border: 1px solid #e8e8ea;
color: #9696a0;
display: inline-flex;
align-items: center;
gap: 4px;
margin-bottom: 12px;
}
.r-journey-bonus.earned {
background: rgba(217,119,6,0.09);
border-color: rgba(217,119,6,0.22);
color: var(--accent);
}
.r-journey-bonus.earned::after { display: none; }
.r-journey-bonus.current {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 2px 8px rgba(217,119,6,0.38);
}
.r-journey-bonus.current::after { display: none; }
.r-journey-bonus.locked {
background: #f5f5f7;
border-color: #e8e8ea;
color: #c0c0c8;
opacity: 1;
}
.r-journey-bonus.locked::after { display: none; }
.r-journey-bonus::after { display: none; }
/* ── Milestones tabs ───────────────────────────────────────────────────── */
.r-milestones-tabs {
display: inline-flex;
align-items: center;
background: #f2f2f4;
border-radius: 10px;
padding: 3px;
gap: 2px;
border: none;
flex-shrink: 0;
}
.r-milestones-tabs button {
font-size: 12px;
font-weight: 600;
color: var(--muted);
background: transparent;
border: none;
border-radius: 7px;
padding: 7px 17px;
cursor: pointer;
letter-spacing: 0;
transition: background 0.14s, color 0.14s, box-shadow 0.14s;
white-space: nowrap;
line-height: 1;
}
.r-milestones-tabs button.active {
background: #fff;
color: var(--text);
box-shadow: 0 1px 4px rgba(0,0,0,0.10), 0 0 0 0.5px rgba(0,0,0,0.08);
}
.r-milestones-tabs button:hover:not(.active) {
color: var(--text);
background: rgba(0,0,0,0.04);
}
/* ── Earned shelf ──────────────────────────────────────────────────────── */
.r-shelf {
background: #fff;
border: 1px solid #eaeaec;
border-radius: 18px;
padding: 22px 26px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.r-shelf .head {
font-size: 13px;
font-weight: 600;
color: var(--muted);
margin-bottom: 18px;
letter-spacing: 0;
display: flex;
align-items: baseline;
gap: 6px;
}
.r-shelf .head .count { font-weight: 400; font-size: 13px; }
.r-shelf .head .count strong { color: var(--text); font-weight: 800; }
.r-shelf .row { display: flex; flex-wrap: wrap; gap: 8px; }
.r-shelf .pin {
width: 48px;
height: 48px;
border-radius: 13px;
border: 1px solid #e8e8ea;
background: #f5f5f7;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s, background 0.18s;
}
.r-shelf .pin:hover {
background: #fff;
border-color: rgba(217,119,6,0.38);
transform: translateY(-2px) scale(1.08);
box-shadow: 0 5px 14px rgba(217,119,6,0.16);
}
.r-shelf .pin::after {
box-shadow: 0 4px 14px rgba(0,0,0,0.12);
border-radius: 10px;
font-size: 11.5px;
font-weight: 600;
}
/* ── Progress grid (milestones in-progress) ────────────────────────────── */
.r-progress-grid { gap: 14px; }
.r-prog {
background: #fff;
border: 1px solid #eaeaec;
border-radius: 16px;
padding: 22px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
display: flex;
flex-direction: column;
gap: 14px;
}
.r-prog::after { border-radius: 16px; }
.r-prog > * { position: relative; z-index: 1; }
.r-prog:hover {
border-color: #d8d8da;
box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.r-prog .top { display: flex; align-items: flex-start; justify-content: space-between; }
.r-prog .mark {
width: 46px;
height: 46px;
border-radius: 12px;
border: 1px solid #e8e8ea;
background: #f5f5f7;
display: flex;
align-items: center;
justify-content: center;
}
.r-prog .pct {
font-size: 32px;
font-weight: 900;
letter-spacing: -0.065em;
color: var(--text);
line-height: 1;
}
.r-prog .pct sup { font-size: 13px; color: var(--muted-2); font-weight: 700; }
.r-prog .name { font-size: 14px; font-weight: 700; letter-spacing: -0.025em; color: var(--text); }
.r-prog .desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 3px; }
.r-prog .meter {
height: 5px;
background: #f0f0f1;
border-radius: 99px;
overflow: hidden;
}
.r-prog .meter > div {
height: 100%;
background: linear-gradient(90deg, var(--accent) 0%, #fbbf24 100%);
border-radius: 99px;
transition: width 1.2s cubic-bezier(.2,.8,.2,1);
}
.r-prog .meta {
font-size: 11px;
color: var(--muted-2);
display: flex;
justify-content: space-between;
margin-top: 4px;
}
.r-prog .meta span:last-child { font-weight: 700; color: var(--text); }
/* Featured (next-to-unlock) card — dark */
.r-prog.featured {
background: linear-gradient(145deg, #0d0d12 0%, #181824 100%);
border-color: rgba(255,255,255,0.06);
box-shadow: 0 4px 24px rgba(0,0,0,0.24), 0 0 0 1px rgba(217,119,6,0.09);
}
.r-prog.featured .mark {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.10);
color: var(--accent);
}
.r-prog.featured .name { color: #fff; font-size: 17px; }
.r-prog.featured .desc { color: rgba(255,255,255,0.48); }
.r-prog.featured .pct { color: var(--accent); }
.r-prog.featured .pct sup { color: rgba(255,255,255,0.35); }
.r-prog.featured .meter { background: rgba(255,255,255,0.08); }
.r-prog.featured .meter > div { background: linear-gradient(90deg, #d97706 0%, #fbbf24 100%); }
.r-prog.featured .meta { color: rgba(255,255,255,0.42); }
.r-prog.featured .meta span:last-child { color: rgba(255,255,255,0.78); }
.r-prog.featured .badge {
background: rgba(217,119,6,0.18);
border: 1px solid rgba(217,119,6,0.32);
color: #fbbf24;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
padding: 4px 11px;
border-radius: 99px;
display: inline-flex;
align-items: center;
gap: 5px;
width: fit-content;
}
/* ── Milestone list (all tab) ──────────────────────────────────────────── */
.r-mile-list {
background: #fff;
border: 1px solid #eaeaec;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.r-mile-row {
display: grid;
grid-template-columns: 44px 1fr 90px auto;
align-items: center;
gap: 14px;
padding: 14px 22px;
border-top: 1px solid #f2f2f4;
transition: background 0.12s, opacity 0.12s;
}
.r-mile-row:first-child { border-top: none; }
.r-mile-row:not(.is-done) { opacity: 0.6; }
.r-mile-row:hover { background: #fafafa; opacity: 1; }
.r-mile-row-mark {
width: 40px;
height: 40px;
border-radius: 11px;
background: #f5f5f7;
border: 1px solid #e8e8ea;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted-2);
}
.r-mile-row.is-done .r-mile-row-mark {
background: rgba(217,119,6,0.09);
border-color: rgba(217,119,6,0.2);
color: var(--accent);
}
.r-mile-row-name { font-size: 13.5px; font-weight: 700; letter-spacing: -0.025em; color: var(--text); }
.r-mile-row-desc { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.r-mile-row-meta { font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.r-mile-row-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
padding: 4px 11px;
border-radius: 99px;
background: #f2f2f4;
color: var(--muted-2);
white-space: nowrap;
border: 1px solid transparent;
}
.r-mile-row-badge.is-done {
background: rgba(217,119,6,0.09);
color: var(--accent);
border-color: rgba(217,119,6,0.18);
}
/* ── Pool + challenges ─────────────────────────────────────────────────── */
.r-pool-row { gap: 16px; }
.r-pool {
background: #07070b;
border: 1px solid rgba(255,255,255,0.065);
border-radius: 20px;
padding: 32px 34px;
box-shadow:
0 1px 0 rgba(255,255,255,0.05) inset,
0 20px 48px rgba(0,0,0,0.38);
}
.r-pool::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 65% 75% at 85% 15%, rgba(217,119,6,0.20) 0%, transparent 62%);
pointer-events: none;
}
.r-pool::after { display: none; }
.r-pool .corner-grid { display: none; }
.r-pool > * { position: relative; z-index: 1; }
.r-pool .card-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: rgba(255,255,255,0.32);
}
.r-pool .card-sub { font-size: 12px; color: rgba(255,255,255,0.36); }
.r-pool .pool-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
}
.r-pool .pool-amt {
font-size: 60px;
font-weight: 900;
letter-spacing: -0.065em;
line-height: 1;
margin-top: 10px;
color: #fff;
font-variant-numeric: tabular-nums;
}
.r-pool .pool-est-wrap {
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 16px 20px;
text-align: right;
min-width: 180px;
flex-shrink: 0;
}
.r-pool .pool-est-wrap .pre {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.38);
display: block;
margin-bottom: 5px;
}
.r-pool .pool-est {
font-size: 30px;
font-weight: 900;
letter-spacing: -0.05em;
color: #fbbf24;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.r-pool .pool-rows {
margin-top: 26px;
padding-top: 22px;
border-top: 1px solid rgba(255,255,255,0.055);
gap: 0;
}
.r-pool .pool-rows > div {
padding: 11px 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.r-pool .pool-rows > div:last-child { border-bottom: none; }
.r-pool .pool-rows .l { color: rgba(255,255,255,0.44); font-size: 12.5px; }
.r-pool .pool-rows .v { color: #fff; font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.r-pool .pool-rows .v.up { color: #5eead4; }
.r-pool .pool-rows .v .sub { color: rgba(255,255,255,0.35); font-size: 11px; font-weight: 400; margin-left: 5px; }
/* Challenges */
.r-chal {
background: #fff;
border: 1px solid #eaeaec;
border-radius: 20px;
padding: 28px 30px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.r-chal .card-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--muted-2);
margin-bottom: 20px;
display: block;
}
.r-chal-row {
padding: 18px 0;
border-bottom: 1px solid #f2f2f4;
}
.r-chal-row:first-child { padding-top: 0; }
.r-chal-row:last-child { border-bottom: none; padding-bottom: 0; }
.r-chal-row .head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
gap: 10px;
}
.r-chal-row .name {
font-size: 13.5px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
display: inline-flex;
align-items: center;
gap: 6px;
}
.r-chal-row .name svg { color: var(--accent); }
.r-chal-row .reward {
font-size: 11px;
font-weight: 700;
color: var(--accent);
background: rgba(217,119,6,0.09);
border: 1px solid rgba(217,119,6,0.18);
border-radius: 99px;
padding: 3px 11px;
white-space: nowrap;
flex-shrink: 0;
letter-spacing: 0;
}
.r-chal-row .desc { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.r-chal-row .meter {
height: 6px;
background: #f0f0f2;
border-radius: 99px;
overflow: hidden;
}
.r-chal-row .meter > div {
height: 100%;
background: linear-gradient(90deg, var(--accent) 0%, #fbbf24 100%);
border-radius: 99px;
transition: width 1.2s cubic-bezier(.2,.8,.2,1);
}
.r-chal-row .meta {
font-size: 11px;
color: var(--muted-2);
display: flex;
justify-content: space-between;
margin-top: 6px;
}
.r-chal-row .meta span:last-child { font-weight: 700; color: var(--text); }
/* ── Leaderboard ───────────────────────────────────────────────────────── */
.r-lb {
background: #fff;
border: 1px solid #eaeaec;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.r-lb-row {
display: grid;
grid-template-columns: 40px 1fr auto auto;
align-items: center;
gap: 16px;
padding: 15px 26px;
border-top: 1px solid #f4f4f6;
transition: background 0.12s;
position: relative;
}
.r-lb-row:first-child { border-top: none; }
.r-lb-row:hover { background: #fafafa; }
.r-lb-row .rk {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 800;
color: #c8c8ce;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
}
.r-lb-row .vol {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: 13.5px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
}
/* Podium 1 — gold */
.r-lb-row.podium-1 {
background: linear-gradient(90deg, rgba(217,119,6,0.06) 0%, transparent 55%);
}
.r-lb-row.podium-1::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
border-radius: 0 2px 2px 0;
}
.r-lb-row.podium-1 .rk { color: var(--accent); font-size: 13px; }
.r-lb-row.podium-1 .vol { color: var(--accent); }
/* Podium 2 — silver */
.r-lb-row.podium-2::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, #d1d5db 0%, #9ca3af 100%);
border-radius: 0 2px 2px 0;
}
.r-lb-row.podium-2 .rk { color: #9ca3af; }
/* Podium 3 — bronze */
.r-lb-row.podium-3::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, #d4a26a 0%, #b87333 100%);
border-radius: 0 2px 2px 0;
}
.r-lb-row.podium-3 .rk { color: #b45309; }
/* You row */
.r-lb-row.you { background: rgba(217,119,6,0.04); }
.r-lb-row.you:hover { background: rgba(217,119,6,0.07); }
.r-lb-row.you .rk { color: var(--accent); }
.r-lb-row.you .vol { color: var(--accent); }
/* ── Footnote ──────────────────────────────────────────────────────────── */
.r-footnote {
background: #f9f9fa;
border: 1px solid #eaeaec;
border-radius: 14px;
padding: 16px 22px;
font-size: 12.5px;
color: var(--muted);
line-height: 1.65;
margin-top: 16px;
}
.r-footnote strong { color: var(--text); font-weight: 700; }
/* ── Responsive overrides ──────────────────────────────────────────────── */
@media (min-width: 1700px) {
.rwh-grid { padding: 56px 68px 48px; gap: 80px; }
.rwh-ring { width: 256px; height: 256px; }
.rwh-stat { padding: 26px 68px; }
}
@media (max-width: 1040px) {
.rwh-grid { grid-template-columns: 1fr; gap: 32px; padding: 34px 34px 28px; }
.rwh-right { order: -1; }
.rwh-stats { grid-template-columns: repeat(3, 1fr); }
.rwh-stat { padding: 18px 34px; }
}
@media (max-width: 640px) {
.rwh { border-radius: 18px; margin-bottom: 32px; }
.rwh-grid { padding: 28px 26px 22px; gap: 24px; }
.rwh-ring { width: min(100%, 220px); max-width: 220px; }
.rwh-ring-pct { font-size: 38px; }
.rwh-paths { flex-direction: column; gap: 14px; }
.rwh-path-or { display: none; }
.rwh-stats { grid-template-columns: 1fr; }
.rwh-stat {
border-right: none;
border-bottom: 1px solid rgba(255,255,255,0.055);
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 14px 26px;
}
.rwh-stat:last-child { border-bottom: none; }
.r-tier { min-height: 370px; }
.r-journey { padding: 22px 22px 20px; }
.r-pool, .r-chal { padding: 22px; }
.r-lb-row { padding: 13px 18px; }
.r-sec-title { font-size: 22px; }
}
@media (max-width: 720px) {
.r-sec-head { gap: 16px; margin-bottom: 18px; }
.r-sec-stat { width: 100%; text-align: left; }
}
/* ════════════════════════════════════════════════════════════════════════════
PORTAL — FUNCTIONAL POLISH
Modal system, danger button, scroll lock, dropdown panels.
════════════════════════════════════════════════════════════════════════════ */
/* Danger button (used by destructive confirm dialogs) */
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
/* Body scroll lock while a modal is open */
body.modal-open { overflow: hidden; }
/* Modal close button — sized for the × glyph */
.modal-close {
font-size: 20px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.modal-close:hover { background: var(--bg-app); }
.modal-wide { max-width: 720px; }
.modal-body p:first-child { margin-top: 0; }
.modal-body p:last-child { margin-bottom: 0; }
/* Form fields stack with comfortable spacing inside modals */
.modal-form { display: grid; gap: 14px; }
.modal-form .form-row label { font-weight: 600; }
.modal-note {
font-size: 12px;
color: var(--muted);
line-height: 1.55;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
}
.modal-list { display: grid; gap: 8px; }
.modal-list-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
font-size: 13px;
}
.modal-list-row .meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.modal-list-row .modal-list-now {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--teal);
background: var(--teal-tint);
border-radius: 99px;
padding: 3px 9px;
}
@media (max-width: 560px) {
.modal-backdrop { padding: 0; align-items: flex-end; }
.modal {
max-width: none;
max-height: 92vh;
border-radius: 16px 16px 0 0;
animation: modal-sheet-rise 0.28s cubic-bezier(.2,.8,.2,1);
}
@keyframes modal-sheet-rise {
from { transform: translateY(100%); }
to { transform: none; }
}
.modal-head { padding: 18px 20px 12px; }
.modal-body { padding: 16px 20px; }
.modal-foot { padding: 14px 20px 20px; }
}
/* ── Dropdown panel (notifications, help, account, search results) ─────── */
.panel-pop {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 320px;
max-width: calc(100vw - 32px);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
box-shadow: 0 16px 44px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.06);
z-index: 120;
overflow: hidden;
animation: panel-pop-in 0.16s ease-out;
}
@keyframes panel-pop-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
.panel-pop-head {
padding: 13px 16px;
border-bottom: 1px solid var(--border);
font-size: 13px;
font-weight: 700;
letter-spacing: -0.01em;
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-pop-head .count {
font-size: 10.5px;
font-weight: 700;
color: var(--accent);
background: var(--accent-tint);
border-radius: 99px;
padding: 2px 8px;
}
.panel-pop-body { max-height: 340px; overflow-y: auto; }
.panel-row {
display: flex;
gap: 11px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
font-size: 12.5px;
line-height: 1.5;
text-decoration: none;
color: var(--text);
}
.panel-row:last-child { border-bottom: none; }
.panel-row:hover { background: var(--bg-app); }
.panel-row .panel-dot {
width: 7px; height: 7px;
border-radius: 99px;
background: var(--accent);
flex-shrink: 0;
margin-top: 4px;
}
.panel-row .panel-dot.read { background: var(--border); }
.panel-row-title { font-weight: 600; }
.panel-row-time { font-size: 11px; color: var(--muted-2); margin-top: 1px; }
.panel-empty {
padding: 28px 16px;
text-align: center;
font-size: 12.5px;
color: var(--muted);
}
.panel-pop-foot {
padding: 10px 16px;
border-top: 1px solid var(--border);
text-align: center;
}
.panel-pop-foot button {
background: none;
border: none;
font: inherit;
font-size: 12px;
font-weight: 600;
color: var(--accent);
cursor: pointer;
}
.topbar-icon-wrap { position: relative; }
/* Notification dot on the bell */
.has-dot { position: relative; }
.has-dot::after {
content: '';
position: absolute;
top: 6px; right: 6px;
width: 7px; height: 7px;
border-radius: 99px;
background: var(--accent);
border: 1.5px solid var(--surface);
}
/* Topbar search results dropdown */
.search-pop { width: 380px; left: 0; right: auto; }
.search-pop .panel-row-kind {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted-2);
}
/* Invalid form field */
.form-input.invalid, .form-select.invalid, .form-textarea.invalid {
border-color: var(--danger);
background: var(--danger-bg-2);
}
.field-error {
font-size: 11.5px;
color: var(--danger-text);
margin-top: 3px;
}
/* panel-row works as a