/* SourceVault design system. Colour axes: tier RANK colours (t1..t6), region colours (us/au/eu/ww), green/red reserved exclusively for source status. Themes: system preference by default, manual override via data-theme on . */ :root { --bg: #f4f4f8; --surface: #ffffff; --surface-2: #ecedf3; --line: #d8dae3; --text: #1c2230; --text-dim: #5b6272; --shadow: 0 1px 2px rgba(20, 24, 35, 0.06), 0 8px 24px rgba(20, 24, 35, 0.08); --up: #17a05c; --up-soft: rgba(23, 160, 92, 0.14); --down: #d63b41; --down-soft: rgba(214, 59, 65, 0.10); --t1: #0d9488; --t1-soft: rgba(13, 148, 136, 0.12); --t1-grad: linear-gradient(135deg, #2dd4bf, #14b8a6); --t2: #7c3aed; --t2-soft: rgba(124, 58, 237, 0.11); --t2-grad: linear-gradient(135deg, #c4b5fd, #a78bfa); --t3: #d97706; --t3-soft: rgba(217, 119, 6, 0.12); --t3-grad: linear-gradient(135deg, #fcd34d, #fbbf24); --t4: #e11d48; --t4-soft: rgba(225, 29, 72, 0.10); --t4-grad: linear-gradient(135deg, #fda4af, #fb7185); --t5: #4f46e5; --t5-soft: rgba(79, 70, 229, 0.11); --t5-grad: linear-gradient(135deg, #a5b4fc, #818cf8); --t6: #65a30d; --t6-soft: rgba(101, 163, 13, 0.12); --t6-grad: linear-gradient(135deg, #bef264, #a3e635); --us: #2563eb; --us-soft: rgba(37, 99, 235, 0.11); --au: #ea580c; --au-soft: rgba(234, 88, 12, 0.11); --eu: #c026d3; --eu-soft: rgba(192, 38, 211, 0.10); --ww: #0891b2; --ww-soft: rgba(8, 145, 178, 0.11); --ww-grad: linear-gradient(180deg, #06b6d4, #8b5cf6, #f59e0b); --candy-text: #14171f; --rainbow: linear-gradient(90deg, #0d9488, #2563eb, #7c3aed, #c026d3, #ea580c, #d97706); --lock-veil: rgba(244, 244, 248, 0.55); --neon: #00a884; --steel-hi: #eef1f5; --steel-mid: #c3cad2; --steel-lo: #8a94a0; /* member accent: remapped by JS to the member's tier colour */ --accent: var(--t2); --accent-soft: var(--t2-soft); --accent-grad: var(--t2-grad); --display: "Avenir Next", "Avenir", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; --body: system-ui, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; } @media (prefers-color-scheme: dark) { :root { --bg: #101219; --surface: #191c26; --surface-2: #222633; --line: #2f3444; --text: #eaecf2; --text-dim: #9ba2b4; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.35); --up: #34d17d; --up-soft: rgba(52, 209, 125, 0.16); --down: #f0565c; --down-soft: rgba(240, 86, 92, 0.14); --t1: #2dd4bf; --t1-soft: rgba(45, 212, 191, 0.14); --t2: #a78bfa; --t2-soft: rgba(167, 139, 250, 0.14); --t3: #fbbf24; --t3-soft: rgba(251, 191, 36, 0.13); --t4: #fb7185; --t4-soft: rgba(251, 113, 133, 0.13); --t5: #818cf8; --t5-soft: rgba(129, 140, 248, 0.13); --t6: #a3e635; --t6-soft: rgba(163, 230, 53, 0.13); --us: #60a5fa; --us-soft: rgba(96, 165, 250, 0.13); --au: #fb923c; --au-soft: rgba(251, 146, 60, 0.13); --eu: #e879f9; --eu-soft: rgba(232, 121, 249, 0.12); --ww: #22d3ee; --ww-soft: rgba(34, 211, 238, 0.13); --ww-grad: linear-gradient(180deg, #22d3ee, #a78bfa, #fbbf24); --rainbow: linear-gradient(90deg, #2dd4bf, #60a5fa, #a78bfa, #e879f9, #fb923c, #fbbf24); --lock-veil: rgba(16, 18, 25, 0.55); --neon: #2bffd6; --steel-hi: #505a6b; --steel-mid: #2d3442; --steel-lo: #14181f; } } :root[data-theme="dark"] { --bg: #101219; --surface: #191c26; --surface-2: #222633; --line: #2f3444; --text: #eaecf2; --text-dim: #9ba2b4; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.35); --up: #34d17d; --up-soft: rgba(52, 209, 125, 0.16); --down: #f0565c; --down-soft: rgba(240, 86, 92, 0.14); --t1: #2dd4bf; --t1-soft: rgba(45, 212, 191, 0.14); --t2: #a78bfa; --t2-soft: rgba(167, 139, 250, 0.14); --t3: #fbbf24; --t3-soft: rgba(251, 191, 36, 0.13); --t4: #fb7185; --t4-soft: rgba(251, 113, 133, 0.13); --t5: #818cf8; --t5-soft: rgba(129, 140, 248, 0.13); --t6: #a3e635; --t6-soft: rgba(163, 230, 53, 0.13); --us: #60a5fa; --us-soft: rgba(96, 165, 250, 0.13); --au: #fb923c; --au-soft: rgba(251, 146, 60, 0.13); --eu: #e879f9; --eu-soft: rgba(232, 121, 249, 0.12); --ww: #22d3ee; --ww-soft: rgba(34, 211, 238, 0.13); --ww-grad: linear-gradient(180deg, #22d3ee, #a78bfa, #fbbf24); --rainbow: linear-gradient(90deg, #2dd4bf, #60a5fa, #a78bfa, #e879f9, #fb923c, #fbbf24); --lock-veil: rgba(16, 18, 25, 0.55); --neon: #2bffd6; --steel-hi: #505a6b; --steel-mid: #2d3442; --steel-lo: #14181f; } :root[data-theme="light"] { --bg: #f4f4f8; --surface: #ffffff; --surface-2: #ecedf3; --line: #d8dae3; --text: #1c2230; --text-dim: #5b6272; --shadow: 0 1px 2px rgba(20, 24, 35, 0.06), 0 8px 24px rgba(20, 24, 35, 0.08); --up: #17a05c; --up-soft: rgba(23, 160, 92, 0.14); --down: #d63b41; --down-soft: rgba(214, 59, 65, 0.10); --t1: #0d9488; --t1-soft: rgba(13, 148, 136, 0.12); --t2: #7c3aed; --t2-soft: rgba(124, 58, 237, 0.11); --t3: #d97706; --t3-soft: rgba(217, 119, 6, 0.12); --t4: #e11d48; --t4-soft: rgba(225, 29, 72, 0.10); --t5: #4f46e5; --t5-soft: rgba(79, 70, 229, 0.11); --t6: #65a30d; --t6-soft: rgba(101, 163, 13, 0.12); --us: #2563eb; --us-soft: rgba(37, 99, 235, 0.11); --au: #ea580c; --au-soft: rgba(234, 88, 12, 0.11); --eu: #c026d3; --eu-soft: rgba(192, 38, 211, 0.10); --ww: #0891b2; --ww-soft: rgba(8, 145, 178, 0.11); --ww-grad: linear-gradient(180deg, #06b6d4, #8b5cf6, #f59e0b); --rainbow: linear-gradient(90deg, #0d9488, #2563eb, #7c3aed, #c026d3, #ea580c, #d97706); --lock-veil: rgba(244, 244, 248, 0.55); --neon: #00a884; --steel-hi: #eef1f5; --steel-mid: #c3cad2; --steel-lo: #8a94a0; } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font-family: var(--body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; position: relative; min-height: 100vh; } /* moving blurred colour field behind every page */ body::before { content: ""; position: fixed; inset: -25%; pointer-events: none; z-index: 0; background: radial-gradient(38% 38% at 12% 8%, color-mix(in srgb, var(--t1) 26%, transparent), transparent 70%), radial-gradient(42% 42% at 88% 14%, color-mix(in srgb, var(--t2) 24%, transparent), transparent 70%), radial-gradient(46% 46% at 62% 96%, color-mix(in srgb, var(--t3) 24%, transparent), transparent 70%), radial-gradient(34% 34% at 28% 72%, color-mix(in srgb, var(--eu) 18%, transparent), transparent 70%); filter: blur(34px); animation: bg-drift 26s ease-in-out infinite alternate; } @keyframes bg-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(1.6%, 1.2%, 0) scale(1.07); } 100% { transform: translate3d(-1.6%, -1%, 0) scale(1.03); } } .frame { max-width: 1060px; margin: 0 auto; padding: 0 20px 64px; position: relative; z-index: 1; } .site-footer { margin-top: 26px; text-align: center; font-size: 13px; color: var(--text-dim); } .site-footer a { font-weight: 650; } button { font: inherit; color: inherit; cursor: pointer; position: relative; overflow: hidden; } input, select { font: inherit; color: inherit; } a { color: var(--accent); } button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: 0.25; transform: scale(0); animation: ripple 0.55s ease-out forwards; } @keyframes ripple { to { transform: scale(3.2); opacity: 0; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---------- member tier topline (pulsating, colour = member's level) ---------- */ .tier-topline { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; background: var(--accent-grad); animation: topline-pulse 2.2s ease-in-out infinite; } @keyframes topline-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 12px 0 var(--accent); } 50% { opacity: 0.55; box-shadow: 0 0 2px 0 transparent; } } /* ---------- top bar ---------- */ .topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 28px; } .brand { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; color: inherit; } .brand-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--rainbow); display: grid; place-items: center; overflow: hidden; border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--accent); } .brand-mark img { width: 100%; height: 100%; object-fit: cover; } .brand-mark span { width: 10px; height: 10px; border-radius: 50%; background: #fff; display: block; box-shadow: 0 0 6px rgba(255,255,255,0.9); } .brand-name { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: 0.02em; } .nav-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .btn { border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 8px 16px; font-weight: 650; font-size: 13.5px; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: border-color 0.15s, transform 0.12s, box-shadow 0.2s; } .btn:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); } .btn:active { transform: scale(0.96); } .btn-primary { border: none; background: var(--accent-grad); color: var(--candy-text); } .btn-danger { border-color: var(--down); color: var(--down); background: transparent; } .btn-danger:hover { border-color: var(--down); background: var(--down-soft); box-shadow: none; } .btn-candy { border: none; border-radius: 10px; padding: 12px; background: var(--accent-grad); color: var(--candy-text); font-weight: 700; transition: transform 0.12s, filter 0.15s, box-shadow 0.2s; } .btn-candy:hover { filter: saturate(1.15); box-shadow: 0 8px 22px -6px var(--accent); } .btn-candy:active { transform: scale(0.96); } .theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; font-size: 16px; transition: transform 0.2s, border-color 0.15s; } .theme-toggle:hover { border-color: var(--accent); transform: rotate(20deg); } .theme-toggle:active { transform: scale(0.9); } /* level pill in the header: pulsates in the member's tier colour */ .tier-pill { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tc, var(--accent)); background: var(--tc-soft, var(--accent-soft)); border: 1px solid var(--tc, var(--accent)); border-radius: 999px; padding: 3px 11px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .tier-pill svg { width: 12px; height: 12px; flex-shrink: 0; } .level-pill { animation: pill-pulse 2.2s ease-in-out infinite; font-weight: 700; } @keyframes pill-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--tc-soft, var(--accent-soft)); } 50% { box-shadow: 0 0 0 7px transparent; } } .page-head { margin-bottom: 24px; } .page-head h1 { font-family: var(--display); font-size: 27px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; text-wrap: balance; background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; } .page-head p { margin: 0; color: var(--text-dim); max-width: 62ch; } .eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; } /* ---------- landing hero ---------- */ .hero { position: relative; text-align: center; padding: 56px 12px 44px; } .hero .orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.35; pointer-events: none; z-index: -1; } .orb-1 { width: 260px; height: 260px; background: var(--t1); top: -40px; left: 4%; animation: float-a 8s ease-in-out infinite alternate; } .orb-2 { width: 300px; height: 300px; background: var(--t2); top: 20px; right: 2%; animation: float-b 10s ease-in-out infinite alternate; } .orb-3 { width: 200px; height: 200px; background: var(--t3); bottom: -60px; left: 30%; animation: float-a 9s ease-in-out infinite alternate-reverse; } .orb-4 { width: 160px; height: 160px; background: var(--eu); bottom: 0; right: 26%; animation: float-b 7s ease-in-out infinite alternate-reverse; } @keyframes float-a { to { transform: translate(30px, 24px) scale(1.12); } } @keyframes float-b { to { transform: translate(-34px, 18px) scale(0.9); } } .hero-title { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 6vw, 58px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 14px; text-wrap: balance; background: var(--rainbow); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow-slide 7s ease-in-out infinite alternate; } @keyframes rainbow-slide { from { background-position: 0% 0; } to { background-position: 100% 0; } } .hero-sub { color: var(--text-dim); font-size: 17px; max-width: 56ch; margin: 0 auto 24px; text-wrap: balance; } .hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .hero-ctas .btn-candy { padding: 13px 26px; font-size: 15px; } /* flashing but classy: gradient sweep + glow breathing, no strobe */ .weekly-banner { display: flex; justify-content: center; margin: 6px 0 26px; } .weekly-banner span { font-family: var(--mono); font-weight: 700; font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; padding: 10px 22px; border-radius: 999px; color: var(--candy-text); background: linear-gradient(100deg, #fcd34d, #fb7185, #a78bfa, #fcd34d); background-size: 300% 100%; animation: banner-sweep 3s linear infinite, banner-glow 2.2s ease-in-out infinite; } @keyframes banner-sweep { to { background-position: -300% 0; } } @keyframes banner-glow { 0%, 100% { box-shadow: 0 0 24px -4px rgba(251, 113, 133, 0.8); transform: scale(1); } 50% { box-shadow: 0 0 8px -4px rgba(251, 113, 133, 0.3); transform: scale(1.025); } } /* ---------- pricing VFX (escalating by rank) ---------- */ .price-stage { position: relative; padding: 6px 0 10px; } .price-stage .beam { position: absolute; width: 380px; height: 380px; border-radius: 50%; filter: blur(80px); opacity: 0.16; pointer-events: none; } .beam-1 { background: var(--t1); top: -70px; left: -50px; animation: drift-a 9s ease-in-out infinite alternate; } .beam-2 { background: var(--t2); top: -50px; left: 38%; animation: drift-b 11s ease-in-out infinite alternate; } .beam-3 { background: var(--t3); right: -50px; bottom: -70px; animation: drift-a 10s ease-in-out infinite alternate; } @keyframes drift-a { to { transform: translate(45px, 30px) scale(1.18); } } @keyframes drift-b { to { transform: translate(-55px, 25px) scale(0.88); } } .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; position: relative; align-items: stretch; } .price-shell { position: relative; border-radius: 18px; padding: 2px; overflow: hidden; transition: transform 0.2s ease-out, box-shadow 0.3s; will-change: transform; } .price-shell:hover { box-shadow: 0 26px 60px -20px var(--tc); } .price-shell .spin { position: absolute; inset: -150%; background: conic-gradient( transparent 0turn 0.08turn, var(--tc) 0.22turn, transparent 0.36turn 0.58turn, var(--tc) 0.72turn, transparent 0.86turn 1turn); animation: orbit 6.5s linear infinite; } @keyframes orbit { to { transform: rotate(1turn); } } /* the higher the rank, the more alive the card */ .price-shell.rank-2 .spin { animation-duration: 4.6s; } .price-shell.rank-3 .spin, .price-shell.rank-up .spin { animation-duration: 3.2s; background: conic-gradient( transparent 0turn 0.06turn, var(--tc) 0.16turn, rgba(255,255,255,0.9) 0.2turn, var(--tc) 0.24turn, transparent 0.34turn 0.56turn, var(--tc) 0.66turn, rgba(255,255,255,0.9) 0.7turn, var(--tc) 0.74turn, transparent 0.84turn 1turn); } .price-shell.rank-2 { box-shadow: 0 10px 34px -18px var(--tc); } .price-shell.rank-3, .price-shell.rank-up { box-shadow: 0 14px 44px -16px var(--tc); } .price-card { position: relative; border-radius: 16px; height: 100%; background: linear-gradient(180deg, var(--tc-soft), transparent 45%), var(--surface); border: 1px solid var(--line); padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; } /* aurora sheen for the top ranks */ .rank-3 .price-card::after, .rank-up .price-card::after { content: ""; position: absolute; inset: -60% -30%; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.14) 50%, transparent 58%); animation: aurora 4.5s ease-in-out infinite; } @keyframes aurora { 0% { transform: translateX(-35%); } 100% { transform: translateX(35%); } } .price-card .glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.25s; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 35%), rgba(255, 255, 255, 0.16), transparent 65%); } .price-shell:hover .glare { opacity: 1; } .price-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .price-card .tier-pill { background: var(--tc-grad); color: var(--candy-text); border: none; font-weight: 700; padding: 4px 13px; } .tier-icon { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--tc-soft); color: var(--tc); display: grid; place-items: center; animation: bob 3s ease-in-out infinite; } .tier-icon svg { width: 20px; height: 20px; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .rank-3 .tier-icon, .rank-up .tier-icon { background: var(--tc-grad); color: var(--candy-text); box-shadow: 0 0 18px -2px var(--tc); animation: bob 2.2s ease-in-out infinite; } .price-card .amount { line-height: 1; } .price-card .amount .num { font-family: var(--display); font-size: 46px; font-weight: 800; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, var(--tc) 25%, color-mix(in srgb, var(--tc) 30%, #fff) 45%, var(--tc) 65%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 3.4s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: 125% 0; } 100% { background-position: -125% 0; } } .price-card .amount small { font-size: 14px; font-weight: 500; color: var(--text-dim); } .price-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; color: var(--text-dim); font-size: 14px; } .price-card li::before { content: "●"; color: var(--tc); margin-right: 8px; font-size: 9px; vertical-align: 1px; } .sparkle { position: absolute; pointer-events: none; color: var(--tc); opacity: 0; animation: floaty 3s ease-in-out infinite; } @keyframes floaty { 0% { opacity: 0; transform: translateY(8px) scale(0.5); } 30% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-26px) scale(1.15) rotate(25deg); } } .subscribe { margin-top: auto; border: none; border-radius: 10px; padding: 12px; background: var(--tc-grad); color: var(--candy-text); font-weight: 700; transition: transform 0.12s, filter 0.15s, box-shadow 0.2s; } .subscribe::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-20deg); transition: left 0.45s ease; } .subscribe:hover { filter: saturate(1.15); box-shadow: 0 8px 22px -6px var(--tc); } .subscribe:hover::after { left: 130%; } .subscribe:active { transform: scale(0.96); } /* ---------- member stats header ---------- */ .stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; border-left: 4px solid var(--accent); padding: 14px 16px; box-shadow: var(--shadow); } .stat .stat-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; } .stat .stat-value { font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 7px; } .stat .stat-value .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--up); animation: pulse 2.4s infinite; } .stat .stat-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; } /* NEW tag on freshly added sources */ .new-tag { margin-left: 7px; font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; padding: 1px 6px; border-radius: 999px; color: var(--candy-text); background: var(--t3-grad); vertical-align: 1px; animation: newglow 1.8s ease-in-out infinite; } @keyframes newglow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 10px 0 var(--t3); } } /* ---------- dashboard search + region filter ---------- */ .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .filter-bar .search { flex: 1 1 220px; max-width: 340px; position: relative; } .filter-bar .search input { padding-left: 34px; } .filter-bar .search::before { content: "⌕"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: 17px; } .region-filter { display: flex; gap: 6px; flex-wrap: wrap; } .region-filter .chip.region-us { --cc: var(--us); --cc-soft: var(--us-soft); } .region-filter .chip.region-au { --cc: var(--au); --cc-soft: var(--au-soft); } .region-filter .chip.region-eu { --cc: var(--eu); --cc-soft: var(--eu-soft); } .region-filter .chip.region-ww { --cc: var(--ww); --cc-soft: var(--ww-soft); } .region-filter .chip.all { --cc: var(--accent); --cc-soft: var(--accent-soft); } .cat-card.filtered-out { display: none; } .src-btn.filtered-out { display: none; } .no-results { text-align: center; color: var(--text-dim); font-size: 14px; padding: 30px; border: 1px dashed var(--line); border-radius: 12px; } /* ---------- analytics ---------- */ .analytics-section { margin-bottom: 30px; } .analytics-section > h2 { font-family: var(--display); font-size: 15px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 9px; } .analytics-section > h2::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--sec, var(--accent)); } .sec-members { --sec: var(--t1); } .sec-revenue { --sec: var(--t3); } .sec-sources { --sec: var(--us); } .sec-engagement { --sec: var(--t2); } .sec-catalogue { --sec: var(--eu); } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; border-top: 3px solid var(--sec, var(--accent)); padding: 14px 15px; box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.2s; } .kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px var(--sec, var(--accent)), var(--shadow); } .kpi .k-name { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 5px; } .kpi .k-val { font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--sec, var(--text)); } .kpi .k-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; } .panel-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); margin-top: 12px; } .panel-card h3 { margin: 0 0 12px; font-family: var(--display); font-size: 14px; font-weight: 700; } .two-col { display: grid; gap: 12px; } @media (min-width: 720px) { .two-col { grid-template-columns: 1fr 1fr; } } .bar-list { display: grid; gap: 9px; } .bar-row { display: grid; grid-template-columns: 120px 1fr 46px; gap: 10px; align-items: center; font-size: 12.5px; } .bar-row .bar-label { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-track { height: 9px; border-radius: 6px; background: var(--surface-2); overflow: hidden; } .bar-fill { height: 100%; border-radius: 6px; background: var(--sec, var(--accent)); min-width: 2px; transition: width 0.5s ease; } .bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .spark { display: flex; align-items: flex-end; gap: 3px; height: 84px; } .spark .spark-bar { flex: 1; min-height: 3px; border-radius: 3px 3px 0 0; background: var(--sec, var(--accent)); opacity: 0.85; transition: height 0.5s ease; } .spark .spark-bar:hover { opacity: 1; } .spark-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); margin-top: 6px; font-family: var(--mono); } .rank-table { width: 100%; border-collapse: collapse; font-size: 13px; } .rank-table th { text-align: left; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); padding: 6px 8px; border-bottom: 1px solid var(--line); } .rank-table td { padding: 8px; border-bottom: 1px solid var(--line); } .rank-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; } .rank-table tr:last-child td { border-bottom: none; } .rank-empty { color: var(--text-dim); font-size: 13px; padding: 14px 4px; } .protected-note { font-size: 13px; color: var(--text-dim); border: 1px solid var(--line); border-left: 4px solid var(--neon); border-radius: 9px; padding: 12px 14px; background: var(--surface-2); } .protected-note strong { color: var(--neon); } /* ---------- simplified category editor ---------- */ .level-choice-wrap { margin: 0 0 16px; } .level-choice { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .btn-subtle { padding: 6px 12px; font-size: 12.5px; } /* ---------- members management ---------- */ .member-list { display: grid; gap: 8px; } .member-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); } .member-row .m-email { font-weight: 650; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .member-row .m-meta { font-size: 12px; color: var(--text-dim); } .member-detail { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--surface-2); } .member-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; } .member-actions .field-label { margin: 0; } .open-log { max-height: 260px; overflow: auto; border-radius: 8px; } /* ---------- analytics toolbar + range ---------- */ .analytics-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; } .range-switch { display: flex; gap: 6px; flex-wrap: wrap; } .range-switch .chip { --cc: var(--accent); --cc-soft: var(--accent-soft); } .section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .section-head > h2 { margin: 0; } .csv-btn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; padding: 5px 12px; } @media print { .topbar, .analytics-toolbar, .csv-btn, .theme-toggle { display: none !important; } body::before { display: none; } .kpi, .panel-card, .analytics-section { break-inside: avoid; } .frame { max-width: none; } } /* ---------- affiliates ---------- */ .aff-list { display: grid; gap: 14px; } .aff-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; border-left: 4px solid var(--text-dim); padding: 16px 18px; box-shadow: var(--shadow); } .aff-card.status-pending { border-left-color: var(--t3); } .aff-card.status-approved { border-left-color: var(--up); } .aff-card.status-rejected { border-left-color: var(--down); opacity: 0.8; } .aff-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; } .aff-name { font-family: var(--display); font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .aff-meta { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; } .aff-desc { font-size: 13.5px; color: var(--text); margin: 10px 0; padding: 10px 12px; background: var(--surface-2); border-radius: 9px; } .aff-status { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; font-weight: 700; } .badge-pending { background: var(--t3-soft); color: var(--t3); } .badge-approved { background: var(--up-soft); color: var(--up); } .badge-rejected { background: var(--down-soft); color: var(--down); } .aff-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin: 12px 0; } .aff-stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; } .aff-stat-val { font-family: var(--display); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; margin-top: 2px; } .aff-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; } .aff-controls .text-input { width: auto; min-width: 120px; } .aff-controls .aff-pct, .aff-controls .aff-pct2 { max-width: 90px; } /* ---------- colour key ---------- */ .colour-key { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; font-size: 12.5px; color: var(--text-dim); } .colour-key .k-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } .k-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } .k-swatch { width: 11px; height: 11px; border-radius: 4px; flex-shrink: 0; } .k-sep { width: 1px; height: 16px; background: var(--line); } /* ---------- dashboard ---------- */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; user-select: none; -webkit-user-select: none; } .cat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0 18px 18px; position: relative; box-shadow: var(--shadow); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; } .cat-card:not(.locked):hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px var(--tc-soft), var(--shadow); } .cat-card .strip { height: 4px; margin: 0 -18px 14px; background: var(--tc-grad); } .cat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; } .cat-card h3 { margin: 0; font-family: var(--display); font-size: 16.5px; font-weight: 700; } .src-list { display: grid; gap: 8px; } .src-btn { --rc: var(--us); --rc-soft: var(--us-soft); --rc-stripe: var(--us); display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; padding: 10px 12px 10px 16px; text-align: left; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: border-color 0.15s, transform 0.12s, box-shadow 0.2s, background 0.15s; } .src-btn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rc-stripe); transition: width 0.15s; } .src-btn.region-us { --rc: var(--us); --rc-soft: var(--us-soft); --rc-stripe: var(--us); } .src-btn.region-au { --rc: var(--au); --rc-soft: var(--au-soft); --rc-stripe: var(--au); } .src-btn.region-eu { --rc: var(--eu); --rc-soft: var(--eu-soft); --rc-stripe: var(--eu); } .src-btn.region-ww { --rc: var(--ww); --rc-soft: var(--ww-soft); --rc-stripe: var(--ww-grad); } .src-btn:hover:not(.disabled) { border-color: var(--rc); box-shadow: 0 8px 20px -8px var(--rc); transform: translateY(-2px); } .src-btn:hover:not(.disabled)::before { width: 7px; } .src-btn:hover:not(.disabled) .flag { transform: scale(1.25) rotate(-8deg); } .src-btn:hover:not(.disabled) .src-thumb { transform: scale(1.12); } .src-btn:hover:not(.disabled) .name { color: var(--rc); } .src-btn:hover:not(.disabled) .go { opacity: 1; transform: none; } .src-btn:active:not(.disabled) { transform: translateY(0) scale(0.98); } .src-btn .flag { font-size: 15px; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: var(--rc-soft); display: grid; place-items: center; transition: transform 0.15s ease; } .src-btn .src-thumb { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; object-fit: cover; border: 1px solid var(--line); transition: transform 0.15s ease; } .src-btn .meta { display: flex; flex-direction: column; min-width: 0; } .src-btn .region { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rc); font-weight: 600; } .src-btn .name { font-weight: 650; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.15s; } .src-btn .go { margin-left: 2px; color: var(--rc); font-weight: 700; font-size: 13px; opacity: 0; transform: translateX(-5px); transition: opacity 0.15s, transform 0.15s; } .status { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .dot { width: 9px; height: 9px; border-radius: 50%; } .status .word { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; font-weight: 700; } .is-up .dot { background: var(--up); animation: pulse 2.4s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--up-soft), 0 0 0 0 var(--up); } 70% { box-shadow: 0 0 0 7px transparent, 0 0 0 3px transparent; } 100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; } } .is-up .status .word { color: var(--up); } .is-down .dot { background: var(--down); box-shadow: 0 0 0 3px var(--down-soft); animation: blink 1.4s ease-in-out infinite; } @keyframes blink { 50% { opacity: 0.45; } } .is-down .status .word { color: var(--down); } .src-btn.is-down { background: var(--down-soft); } .cat-card.locked .src-list { filter: blur(3px) saturate(0.6); opacity: 0.45; pointer-events: none; } .lock-veil { position: absolute; inset: 0; border-radius: 14px; background: var(--lock-veil); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px; } .lock-veil .lock-msg { font-weight: 650; font-size: 14px; } .lock-veil .unlock { border: none; background: var(--tc-grad); color: var(--candy-text); border-radius: 9px; padding: 9px 18px; font-weight: 700; font-size: 13px; animation: breathe 2.6s ease-in-out infinite; transition: transform 0.12s; } @keyframes breathe { 50% { box-shadow: 0 0 0 8px var(--tc-soft); } } .lock-veil .unlock:hover { transform: scale(1.06); } .lock-veil .unlock:active { transform: scale(0.95); } /* ---------- forms / auth cards ---------- */ .auth-wrap { display: grid; place-items: center; min-height: 60vh; } .auth-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); display: grid; gap: 14px; } .auth-card h1 { font-family: var(--display); font-size: 22px; font-weight: 700; margin: 0; background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; } .auth-card p { margin: 0; color: var(--text-dim); font-size: 14px; } .field-label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 5px; } .text-input, .select-input { width: 100%; border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 10px 12px; font-size: 14px; transition: border-color 0.15s, box-shadow 0.15s; } .text-input:hover, .select-input:hover { border-color: var(--text-dim); } .text-input:focus, .select-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; } .form-error { color: var(--down); font-size: 13px; font-weight: 600; min-height: 18px; margin: 0; } /* ---------- admin ---------- */ .admin-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } @media (min-width: 900px) { .admin-grid { grid-template-columns: 3fr 2fr; align-items: start; } } .admin-col { display: grid; gap: 20px; align-content: start; } .admin-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); } .admin-card h3 { margin: 0 0 4px; font-family: var(--display); font-size: 16px; font-weight: 700; } .admin-card .sub { font-size: 13px; color: var(--text-dim); margin: 0 0 16px; } .cat-picker { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; } .cat-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } /* drag-to-reorder */ [data-sortable] { cursor: default; } [data-drag-handle] { cursor: grab; touch-action: none; } [data-drag-handle]:active { cursor: grabbing; } .dragging { opacity: 0.45; } .drag-handle { display: inline-grid; place-items: center; width: 22px; height: 26px; color: var(--text-dim); font-size: 15px; line-height: 1; flex-shrink: 0; border-radius: 6px; border: 1px solid transparent; } .drag-handle:hover { color: var(--accent); border-color: var(--line); background: var(--surface); } .chip[data-drag-handle] { cursor: grab; } .chip[data-drag-handle]:active { cursor: grabbing; } .chip { --cc: var(--text-dim); --cc-soft: var(--surface-2); border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 650; color: var(--text-dim); transition: all 0.15s; } .chip:hover { border-color: var(--cc); color: var(--cc); transform: translateY(-1px); } .chip:active { transform: scale(0.93); } .chip[aria-pressed="true"] { background: var(--cc-soft); border-color: var(--cc); color: var(--cc); } .add-btn { border: 1.5px dashed var(--line); background: transparent; border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 650; color: var(--text-dim); transition: all 0.15s; } .add-btn:hover { border-color: var(--up); color: var(--up); transform: translateY(-1px); } .add-btn.block { width: 100%; border-radius: 10px; padding: 11px; } .cat-tools { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: end; margin-bottom: 16px; } .cat-tools .grow { min-width: 0; } .src-editor { display: grid; gap: 12px; } .src-row { --rc: var(--us); --rc-stripe: var(--us); display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px 12px 16px; background: var(--surface-2); position: relative; overflow: hidden; } .src-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rc-stripe); } .src-row.region-us { --rc: var(--us); --rc-stripe: var(--us); } .src-row.region-au { --rc: var(--au); --rc-stripe: var(--au); } .src-row.region-eu { --rc: var(--eu); --rc-stripe: var(--eu); } .src-row.region-ww { --rc: var(--ww); --rc-stripe: var(--ww-grad); } .src-row .field-label { color: var(--rc); } .src-row-top { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 10px; align-items: center; } .src-row .inputs { display: grid; gap: 8px; min-width: 0; } .img-uploader { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .img-uploader .thumb { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; border: 1px solid var(--line); background: var(--surface); } .img-uploader .thumb.empty { display: grid; place-items: center; color: var(--text-dim); font-size: 18px; } .switch { width: 46px; height: 25px; border-radius: 999px; border: 1px solid var(--line); background: var(--down-soft); position: relative; padding: 0; transition: background 0.2s; overflow: visible; } .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--down); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s; } .switch:hover { border-color: var(--text-dim); } .switch[aria-checked="true"] { background: var(--up-soft); } .switch[aria-checked="true"]::after { transform: translateX(21px); background: var(--up); } .switch-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; } .switch-word { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; font-weight: 700; } .switch-word.w-up { color: var(--up); } .switch-word.w-down { color: var(--down); } .price-editor { display: grid; gap: 10px; } .price-row { display: grid; grid-template-columns: 1fr 100px auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-left: 4px solid var(--tc, var(--accent)); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); } .price-row .who { font-size: 13.5px; min-width: 0; } .price-row .who small { display: block; color: var(--text-dim); } .money { position: relative; } .money::before { content: "$"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--tc, var(--accent)); font-family: var(--mono); font-size: 13px; font-weight: 700; } .money input { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 8px 8px 8px 24px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; transition: border-color 0.15s, box-shadow 0.15s; } .money input:focus { border-color: var(--tc, var(--accent)); box-shadow: 0 0 0 3px var(--tc-soft, var(--accent-soft)); outline: none; } /* ---------- toast ---------- */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 80px); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-left: 5px solid var(--tc, var(--accent)); border-radius: 12px; padding: 12px 18px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow); z-index: 70; opacity: 0; transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.25s; max-width: min(90vw, 480px); } .toast.show { transform: translate(-50%, 0); opacity: 1; } .toast small { display: block; font-weight: 400; color: var(--text-dim); } .protect-note { margin-top: 18px; font-size: 12.5px; color: var(--text-dim); display: flex; align-items: baseline; gap: 8px; } .protect-note::before { content: "▸"; color: var(--accent); } /* ---------- neon admin button (admins only, every page) ---------- */ .btn-neon { background: transparent; border: 1px solid var(--neon); color: var(--neon); font-weight: 700; letter-spacing: 0.04em; text-shadow: 0 0 10px var(--neon); box-shadow: 0 0 12px -3px var(--neon), inset 0 0 10px -6px var(--neon); animation: neon-pulse 2.1s ease-in-out infinite; } .btn-neon:hover { border-color: var(--neon); box-shadow: 0 0 22px -2px var(--neon), inset 0 0 14px -4px var(--neon); transform: translateY(-1px); } @keyframes neon-pulse { 0%, 100% { box-shadow: 0 0 12px -3px var(--neon), inset 0 0 10px -6px var(--neon); } 50% { box-shadow: 0 0 22px -1px var(--neon), inset 0 0 14px -4px var(--neon); } } .admin-badge { cursor: default; pointer-events: none; } /* ---------- the vault ---------- */ .vault-stage { position: relative; width: min(400px, 84vw); margin: 34px auto 8px; perspective: 1200px; } .vault-stage::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -30px; height: 36px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45), transparent 70%); } .vault { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; cursor: pointer; border: none; padding: 0; background: none; overflow: visible; } /* bold outer rim: metallic ring + hard edge + accent trim */ .vault-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, var(--steel-hi), var(--steel-mid) 14%, var(--steel-lo) 25%, var(--steel-hi) 40%, var(--steel-mid) 55%, var(--steel-lo) 66%, var(--steel-hi) 82%, var(--steel-mid)); box-shadow: inset 0 3px 3px rgba(255, 255, 255, 0.3), inset 0 -22px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent), 0 34px 66px -22px rgba(0, 0, 0, 0.65); } /* engraved inner channel that the bolts sit in */ .vault-ring::after { content: ""; position: absolute; inset: 13%; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35), inset 0 0 18px rgba(0,0,0,0.4); background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.05) 0deg 6deg, rgba(0,0,0,0.06) 6deg 12deg); } .bolt { position: absolute; top: 50%; left: 50%; width: 5.4%; aspect-ratio: 1; margin: -2.7% 0 0 -2.7%; border-radius: 50%; background: radial-gradient(circle at 35% 28%, var(--steel-hi), var(--steel-lo) 90%); box-shadow: inset 0 -1.5px 2px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0,0,0,0.5); } .bolt::after { content: ""; position: absolute; inset: 32%; border-radius: 1px; background: linear-gradient(45deg, transparent 44%, rgba(0,0,0,0.45) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, rgba(0,0,0,0.45) 44% 56%, transparent 56%); } .vault-inside { position: absolute; inset: 8.5%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 42%, var(--accent-soft) 0%, rgba(8, 10, 16, 0.95) 78%); box-shadow: inset 0 0 40px rgba(0,0,0,0.7); display: grid; place-items: center; } .vault-inside .rays { position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0deg 24deg, var(--accent-soft) 30deg, transparent 36deg 84deg, var(--accent-soft) 90deg, transparent 96deg 144deg, var(--accent-soft) 150deg, transparent 156deg 204deg, var(--accent-soft) 210deg, transparent 216deg 264deg, var(--accent-soft) 270deg, transparent 276deg 324deg, var(--accent-soft) 330deg, transparent 336deg); animation: rays-spin 14s linear infinite; opacity: 0.9; } @keyframes rays-spin { to { transform: rotate(1turn); } } .vault-inside .inside-mark { position: relative; width: 34%; opacity: 0.95; border-radius: 50%; overflow: hidden; } .vault-inside .inside-mark img { width: 100%; display: block; } .vault-door { position: absolute; inset: 8.5%; border-radius: 50%; z-index: 2; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 8%, rgba(0,0,0,0.16) 8% 8.6%, transparent 8.6% 16%), radial-gradient(circle at 38% 30%, var(--steel-hi), var(--steel-mid) 55%, var(--steel-lo)); box-shadow: inset 0 3px 3px rgba(255, 255, 255, 0.25), inset 0 -18px 32px rgba(0, 0, 0, 0.45), inset 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 0 0 6px rgba(0,0,0,0.25); transform-origin: 4% 50%; transition: transform 1.2s cubic-bezier(0.6, 0.05, 0.22, 1); display: grid; place-items: center; backface-visibility: hidden; } .vault.open .vault-door { transform: rotateY(-106deg); } .vault-wheel { width: 52%; color: var(--steel-lo); transition: transform 1.25s cubic-bezier(0.5, 0.05, 0.3, 1); filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.45)); } :root[data-theme="dark"] .vault-wheel { color: #6b7687; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vault-wheel { color: #6b7687; } } .vault.opening .vault-wheel, .vault.open .vault-wheel { transform: rotate(2.5turn); } .vault.opening .vault-door { animation: vault-shake 0.5s ease-in-out 0.85s; } @keyframes vault-shake { 25% { translate: -3px 0; } 75% { translate: 3px 0; } } .vault-burst { position: absolute; inset: -12%; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, var(--accent) 0%, transparent 62%); } .vault.open .vault-burst { animation: burst 1s ease-out 0.3s; } @keyframes burst { 0% { opacity: 0; transform: scale(0.55); } 30% { opacity: 0.5; } 100% { opacity: 0; transform: scale(1.55); } } .vault:hover:not(.open) .vault-wheel { transform: rotate(14deg); } .vault:active:not(.open) .vault-wheel { transform: rotate(30deg) scale(0.98); } .vault-hint { text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin: 34px 0 0; animation: hint-bounce 2.4s ease-in-out infinite; } @keyframes hint-bounce { 50% { transform: translateY(-3px); } } /* levels sprouting out of the open vault */ .vault-spark { position: absolute; left: 50%; top: 50%; z-index: 3; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--tc-grad); color: var(--candy-text); display: grid; place-items: center; pointer-events: none; box-shadow: 0 6px 18px -6px var(--tc); animation: sprout 1.25s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; } .vault-spark svg { width: 19px; height: 19px; } @keyframes sprout { 0% { transform: translate(0, 0) scale(0.3); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(var(--dx, 0px), var(--dy, 120px)) scale(1.05); opacity: 0; } } /* pricing stays hidden until the vault opens (JS gates only when motion is allowed) */ .gated { opacity: 0; transform: translateY(34px); pointer-events: none; } body.vault-open .gated { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.6s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1); } /* ---------- admin site check ---------- */ .check-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .check-list li { display: flex; gap: 9px; align-items: baseline; font-size: 13px; color: var(--text-dim); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; background: var(--surface-2); } .check-list li.warn { border-left: 4px solid var(--t3); } .check-list li.warn::before { content: "⚠"; color: var(--t3); } .check-list li.ok { border-left: 4px solid var(--up); color: var(--up); font-weight: 600; } .check-list li.ok::before { content: "✓"; } /* ============================================================ Round 6: tri-state status, ratings, coach fields, banned sellers, richer editor, animated landing ============================================================ */ /* yellow = "not responding" health state, across both themes */ :root { --slow: #c98a00; --slow-soft: rgba(201, 138, 0, 0.14); } @media (prefers-color-scheme: dark) { :root { --slow: #fbbf24; --slow-soft: rgba(251, 191, 36, 0.16); } } :root[data-theme="dark"] { --slow: #fbbf24; --slow-soft: rgba(251, 191, 36, 0.16); } :root[data-theme="light"] { --slow: #c98a00; --slow-soft: rgba(201, 138, 0, 0.14); } .is-slow .dot { background: var(--slow); box-shadow: 0 0 0 3px var(--slow-soft); animation: blink 1.4s ease-in-out infinite; } .is-slow .status .word { color: var(--slow); } .src-btn.is-slow { background: var(--slow-soft); } /* rating badge: greenness scales with the score (colour set inline in JS) */ .rating-badge { font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: 0.02em; padding: 2px 7px; border-radius: 6px; color: #fff; white-space: nowrap; text-shadow: 0 1px 1px rgba(0,0,0,0.35); } .src-btn .rating-badge { margin-left: 8px; } /* emoji icon used in place of a flag/photo */ .src-emoji { font-size: 18px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--rc-soft, var(--surface-2)); } .src-vendor { font-size: 11px; color: var(--text-dim); } /* ---------- banned sellers widget (site-wide, bottom-left) ---------- */ .banned-widget { position: fixed; left: 16px; bottom: 16px; z-index: 80; width: min(330px, 84vw); font-family: var(--body); filter: drop-shadow(0 12px 28px rgba(0,0,0,0.28)); } .banned-head { display: flex; align-items: center; gap: 9px; background: var(--down); color: #fff; border-radius: 11px; padding: 10px 13px; cursor: pointer; font-weight: 800; letter-spacing: 0.03em; border: 1px solid rgba(255,255,255,0.25); animation: banned-flash 1.15s steps(1, end) infinite; } @keyframes banned-flash { 50% { background: #7d1216; } } .banned-head .warn-ico { font-size: 16px; } .banned-head .count { margin-left: auto; background: #fff; color: var(--down); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 800; } .banned-head .chev { transition: transform 0.2s; } .banned-widget.min .banned-head { border-radius: 11px; } .banned-widget.min .chev { transform: rotate(180deg); } .banned-body { background: var(--surface); border: 1.5px solid var(--down); border-top: none; border-radius: 0 0 11px 11px; max-height: 48vh; overflow: auto; padding: 11px; } .banned-widget.min .banned-body { display: none; } .banned-item { border-left: 3px solid var(--down); background: var(--down-soft); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; position: relative; } .banned-item .bn { font-weight: 750; font-size: 13.5px; } .banned-item .br { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .banned-item .bx { position: absolute; top: 6px; right: 6px; border: none; background: none; color: var(--text-dim); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: 6px; } .banned-item .bx:hover { background: var(--down-soft); color: var(--down); } .banned-empty { font-size: 12.5px; color: var(--text-dim); padding: 8px 4px; } .banned-disclaimer { font-size: 10px; line-height: 1.5; color: var(--text-dim); border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 6px; } .banned-add { display: grid; gap: 6px; margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; } .banned-add input { padding: 7px 9px; font-size: 13px; } .banned-add button { padding: 8px; font-size: 13px; } /* ---------- richer, less-squashed source editor ---------- */ .src-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow); position: relative; } .src-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--rc-stripe, var(--us)); } .src-card.region-us { --rc: var(--us); --rc-soft: var(--us-soft); --rc-stripe: var(--us); } .src-card.region-au { --rc: var(--au); --rc-soft: var(--au-soft); --rc-stripe: var(--au); } .src-card.region-eu { --rc: var(--eu); --rc-soft: var(--eu-soft); --rc-stripe: var(--eu); } .src-card.region-ww { --rc: var(--ww); --rc-soft: var(--ww-soft); --rc-stripe: var(--ww-grad); } .src-card-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px 11px 18px; background: linear-gradient(90deg, var(--rc-soft), transparent 60%); border-bottom: 1px solid var(--line); } .src-card-head .drag-handle { cursor: grab; } .src-card-head .src-emoji-btn { font-size: 20px; width: 40px; height: 40px; border-radius: 10px; border: 1px dashed var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; } .src-card-head .src-emoji-btn:hover { border-color: var(--accent); } .src-card-head .head-title { font-weight: 700; font-size: 14.5px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .src-card-body { padding: 14px 14px 14px 18px; display: grid; gap: 14px; } @media (min-width: 640px) { .src-card-body { grid-template-columns: 1fr 1fr; } } .field-group { display: grid; gap: 8px; align-content: start; } .field-group > .group-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .field-row { display: grid; gap: 4px; } .field-row label { font-size: 11px; color: var(--text-dim); } .src-card-foot { padding: 12px 14px 14px 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* tri-state status segmented control */ .status-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; } .status-seg button { border: none; background: var(--surface-2); padding: 7px 12px; font-size: 12px; font-weight: 700; color: var(--text-dim); } .status-seg button[data-s="up"][aria-pressed="true"] { background: var(--up); color: #fff; } .status-seg button[data-s="slow"][aria-pressed="true"] { background: var(--slow); color: #fff; } .status-seg button[data-s="down"][aria-pressed="true"] { background: var(--down); color: #fff; } /* 1-10 quality rating: slider + box that greens up */ .rating-control { display: flex; align-items: center; gap: 10px; } .rating-control input[type="range"] { flex: 1; accent-color: var(--rate-c, var(--up)); } .rating-box { width: 46px; height: 40px; border-radius: 9px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 16px; color: #fff; background: var(--rate-c, var(--line)); text-shadow: 0 1px 1px rgba(0,0,0,0.3); } .rating-box.empty { background: var(--surface-2); color: var(--text-dim); text-shadow: none; } .comment-input { min-height: 58px; resize: vertical; font-family: var(--body); } /* ---------- audit log ---------- */ .audit-list { display: grid; gap: 6px; max-height: 340px; overflow: auto; } .audit-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; font-size: 12.5px; border-bottom: 1px solid var(--line); padding: 7px 2px; } .audit-row .a-act { font-family: var(--mono); font-size: 10.5px; color: var(--accent); font-weight: 700; } .audit-row .a-detail { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .audit-row .a-time { color: var(--text-dim); font-size: 11px; white-space: nowrap; } /* ---------- bolder, animated landing background ---------- */ body.landing::before { background: radial-gradient(50% 40% at 12% 8%, var(--t1-soft), transparent 60%), radial-gradient(45% 40% at 88% 12%, var(--t2-soft), transparent 60%), radial-gradient(50% 45% at 70% 95%, var(--t3-soft), transparent 62%), radial-gradient(40% 40% at 25% 90%, var(--eu-soft), transparent 60%); animation: bg-drift 24s ease-in-out infinite alternate; } @keyframes bg-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(1.5%, -1.5%) scale(1.06); } 100% { transform: translate(-1.5%, 1%) scale(1.03); } } /* a second, slower colour wash unique to the landing */ .landing .bg-aurora { position: fixed; inset: -20%; z-index: 0; pointer-events: none; opacity: 0.5; background: conic-gradient(from 0deg at 50% 50%, var(--t1-soft), var(--t2-soft), var(--t3-soft), var(--eu-soft), var(--us-soft), var(--t1-soft)); filter: blur(120px); animation: aurora-spin 40s linear infinite; } @keyframes aurora-spin { to { transform: rotate(1turn); } } /* bolder vault */ .vault-ring { box-shadow: inset 0 3px 3px rgba(255,255,255,0.3), inset 0 -22px 40px rgba(0,0,0,0.45), 0 30px 60px -18px rgba(0,0,0,0.6); } .vault-door { box-shadow: inset 0 3px 3px rgba(255,255,255,0.25), inset 0 -18px 34px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3); } .vault-inside .rays { opacity: 1; } .vault::after { content: ""; position: absolute; inset: -6%; border-radius: 50%; z-index: -1; background: radial-gradient(circle, var(--accent-soft), transparent 65%); animation: topline-pulse 3s ease-in-out infinite; } .site-footer { text-align: center; color: var(--text-dim); font-size: 13px; margin-top: 22px; } /* ---------- mobile performance: kill the GPU-heavy continuous animations on small screens so the landing page loads and scrolls smoothly on phones. The static gradients stay, so it still looks the same, just not animating. */ @media (max-width: 760px) { .bg-aurora { display: none; } body::before { animation: none; } .price-stage .beam { animation: none; } .hero .orb { animation: none; } .price-shell .spin { animation: none; opacity: 0.55; } .weekly-banner span { animation: banner-glow 2.2s ease-in-out infinite; } .vault::after { animation: none; } } /* member-facing seller review (from the source comment) */ .src-btn .src-review { font-size: 12px; color: var(--text-dim); line-height: 1.4; white-space: normal; margin-top: 3px; max-width: 100%; } /* ---------- text auto-fit: nothing ever leaks out of its box, no matter how long the admin's text is. Long single-line text truncates with an ellipsis; multi-line areas wrap and clip to their box's height. ---------- */ .src-btn .name, .src-vendor, .tier-pill, .head-title, .m-email, .m-meta, .audit-row .a-detail, .who strong, .who small, .bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .src-review, .check-list li, .rank-empty, .field-row textarea, .comment-input { overflow-wrap: anywhere; word-break: break-word; } .src-review { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* any label/value pair in a fixed-width row shrinks its text rather than push the box wider */ .field-row, .price-row .who, .member-row, .audit-row, .bar-row { min-width: 0; } .field-row input, .field-row select, .field-row textarea { max-width: 100%; box-sizing: border-box; } /* text inputs never grow past their container even if the value is huge */ .text-input, .select-input { max-width: 100%; box-sizing: border-box; } textarea.text-input { resize: vertical; max-height: 220px; } /* candy-red "become an affiliate" CTA, placed below pricing on the landing page */ .affiliate-cta { display: flex; justify-content: center; margin: 30px 0 8px; } .btn-affiliate { display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(135deg, #ff5c6a, #e11d2e); color: #fff; font-weight: 800; font-size: 15px; letter-spacing: 0.01em; padding: 14px 28px; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 26px -8px rgba(225, 29, 46, 0.55), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease; } .btn-affiliate:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 14px 32px -8px rgba(225, 29, 46, 0.65), inset 0 1px 0 rgba(255,255,255,0.25); } .btn-affiliate:active { transform: translateY(0) scale(0.97); }