Files
rm-circle-team-router/public/styles.css
T
martbost d805a33608 Add home "team by the numbers" showcase + why-a-winning-team-pays
Public /api/public/org-stats (from config.orgRootId, default 21) feeds a
prominent home-page band: share of the whole network, team size,
generations deep, and on-chain POL to the team — populated by bridge.js,
section hides itself if stats aren't ready. Paired with three mechanics
cards (spillover fills your matrix, depth pays as it climbs, the rotation
qualifies you) that make the "winning team" case honestly, plus the risk
caveat ("most participants may not profit") and a disclaimer link.
Live: 51.1% of members, 48 in the org, 10 generations, 25,423 POL.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-15 07:14:23 -05:00

145 lines
20 KiB
CSS

:root{
--bg:#071421;--bg2:#0b1d2e;--panel:#0d2236;--panel2:#10283f;--gold:#f3be43;--gold2:#d89b19;
--teal:#4ed6cb;--text:#f7f9fc;--muted:#aebdca;--danger:#ff7e6b;--ok:#7be0a1;--line:#27445e;
--shadow:0 20px 50px rgba(0,0,0,.28);--radius:20px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:
radial-gradient(circle at 20% 0%,rgba(78,214,203,.10),transparent 34%),radial-gradient(circle at 90% 5%,rgba(243,190,67,.10),transparent 28%),linear-gradient(180deg,var(--bg),#06101b 75%);color:var(--text);min-height:100vh}
a{color:inherit}.wrap{width:min(1160px,calc(100% - 32px));margin:auto}.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}.brand-mark{width:42px;height:42px;border:2px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-family:Georgia,serif;font-size:19px;box-shadow:inset 0 0 18px rgba(243,190,67,.13)}.brand span small{display:block;font-weight:600;color:var(--muted);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;margin-top:2px}.nav-actions{display:flex;gap:10px;align-items:center}.btn{appearance:none;border:0;border-radius:12px;padding:13px 18px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:8px;transition:.18s ease;font-size:15px}.btn:hover{transform:translateY(-1px)}.btn-primary{background:linear-gradient(135deg,var(--gold),#f7d173);color:#152033;box-shadow:0 10px 28px rgba(243,190,67,.18)}.btn-secondary{background:#132c43;color:var(--text);border:1px solid #294a65}.btn-teal{background:linear-gradient(135deg,var(--teal),#8ce9df);color:#0a1b27}.btn-danger{background:#3a2026;color:#ffb2a5;border:1px solid #6a3133}.btn-sm{padding:9px 11px;font-size:13px;border-radius:9px}.hero{padding:82px 0 70px;text-align:center}.eyebrow{color:var(--teal);text-transform:uppercase;letter-spacing:2.2px;font-weight:800;font-size:13px}.hero h1{font-size:clamp(42px,7vw,78px);line-height:.98;margin:14px auto 20px;max-width:1000px;letter-spacing:-3px}.gold{color:var(--gold)}.hero p{font-size:clamp(18px,2.3vw,23px);line-height:1.55;color:var(--muted);max-width:780px;margin:0 auto 30px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.micro{font-size:13px;color:#8498aa;margin-top:18px}.section{padding:46px 0}.section-head{max-width:760px;margin-bottom:26px}.section-head h2{font-size:clamp(28px,4vw,44px);margin:0 0 10px}.section-head p{color:var(--muted);font-size:17px;line-height:1.6;margin:0}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:linear-gradient(180deg,rgba(16,40,63,.94),rgba(9,27,43,.96));border:1px solid #23425d;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}.card-icon{width:45px;height:45px;border-radius:13px;display:grid;place-items:center;background:#143850;border:1px solid #27617a;color:var(--teal);font-size:21px;margin-bottom:18px}.card h3{margin:0 0 8px;font-size:20px}.card p{margin:0;color:var(--muted);line-height:1.58}.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:stretch}.flow-step{position:relative;padding:18px;border-radius:16px;background:#0d2236;border:1px solid #27445e}.flow-step b{display:block;color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:9px}.flow-step strong{font-size:17px}.flow-step p{font-size:13px;color:var(--muted);line-height:1.45}.flow-step:not(:last-child)::after{content:'→';position:absolute;right:-16px;top:50%;transform:translateY(-50%);color:var(--teal);font-weight:900;z-index:2}.matrix{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,2vw,25px);padding:24px 0}.matrix-group{text-align:center;color:var(--muted);font-size:13px}.people{display:flex;flex-wrap:wrap;max-width:220px;justify-content:center;gap:5px;margin-bottom:8px}.person{width:17px;height:22px;border-radius:10px 10px 6px 6px;background:linear-gradient(var(--teal),#1c918b);position:relative}.person::before{content:'';position:absolute;width:9px;height:9px;border-radius:50%;background:var(--gold);left:4px;top:-6px}.notice{border:1px solid #594b24;background:rgba(243,190,67,.08);border-radius:16px;padding:18px;color:#ecdcae;line-height:1.55}.disclaimer{border-top:1px solid #1f3649;margin-top:55px;padding:28px 0 38px;color:#7f93a5;font-size:12px;line-height:1.6}.sponsor-shell{padding:36px 0 70px}.sponsor-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}.sponsor-card{background:linear-gradient(145deg,#132d45,#0a1b2b);border:1px solid #38556b;border-radius:24px;padding:28px;box-shadow:var(--shadow);position:sticky;top:18px}.live-badge{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 10px;background:rgba(123,224,161,.09);color:var(--ok);border:1px solid rgba(123,224,161,.28);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.8px}.dot{width:8px;height:8px;background:var(--ok);border-radius:50%;box-shadow:0 0 12px var(--ok)}.sponsor-id{font-size:64px;color:var(--gold);font-weight:900;letter-spacing:-2px;margin:12px 0 2px}.sponsor-name{font-size:24px;font-weight:800;margin-bottom:18px}.progress-line{height:12px;border-radius:99px;background:#162f45;overflow:hidden;margin:9px 0 8px}.progress-line span{height:100%;display:block;background:linear-gradient(90deg,var(--teal),var(--gold));border-radius:99px}.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.fact{background:#0b1c2c;border:1px solid #203d55;padding:12px;border-radius:13px}.fact small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.8px}.fact strong{display:block;margin-top:4px}.instruction-list{display:grid;gap:14px}.instruction{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:18px;background:#0d2236;border:1px solid #233f56;border-radius:16px}.num{width:42px;height:42px;border-radius:12px;background:#183952;border:1px solid #29617b;color:var(--teal);font-weight:900;display:grid;place-items:center}.instruction h3{margin:0 0 6px}.instruction p{margin:0;color:var(--muted);line-height:1.55}.callout{padding:17px;border-radius:14px;background:rgba(78,214,203,.07);border:1px solid rgba(78,214,203,.23);color:#bdece8;line-height:1.55}.warning{background:rgba(255,126,107,.06);border-color:rgba(255,126,107,.22);color:#f0b4aa}.admin-bg{min-height:100vh;background:#06101a}.login-panel{width:min(430px,calc(100% - 32px));margin:12vh auto;background:#0e2235;border:1px solid #28465e;border-radius:22px;padding:30px;box-shadow:var(--shadow)}.login-panel h1{margin:0 0 8px}.login-panel p{color:var(--muted);margin-top:0}.input,.select{width:100%;background:#071827;color:var(--text);border:1px solid #29475f;border-radius:11px;padding:12px 13px;font:inherit;outline:none}.input:focus,.select:focus{border-color:var(--teal)}label{display:block;font-size:12px;color:#a7b8c6;text-transform:uppercase;letter-spacing:.7px;font-weight:800;margin:0 0 6px}.field{margin-bottom:14px}.admin{width:min(1300px,calc(100% - 30px));margin:auto;padding:24px 0 60px}.admin-top{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:22px}.admin-top h1{margin:0}.admin-grid{display:grid;grid-template-columns:1.5fr .75fr;gap:18px}.table-card{background:#0b1e30;border:1px solid #27445e;border-radius:18px;padding:18px;overflow:hidden}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:850px}.table th{text-align:left;color:#8da3b5;font-size:11px;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid #27445e;padding:10px}.table td{padding:12px 10px;border-bottom:1px solid #172f43;vertical-align:middle}.status{display:inline-block;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900;text-transform:uppercase}.status-active{background:rgba(123,224,161,.1);color:var(--ok)}.status-waiting{background:rgba(243,190,67,.1);color:#f2c768}.status-qualified{background:rgba(78,214,203,.1);color:var(--teal)}.actions{display:flex;flex-wrap:wrap;gap:6px}.stack{display:grid;gap:18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toast{position:fixed;right:20px;bottom:20px;background:#132d45;border:1px solid #31536d;padding:13px 16px;border-radius:11px;box-shadow:var(--shadow);display:none;z-index:20}.toast.show{display:block}.hidden{display:none!important}.empty{padding:20px;color:var(--muted);text-align:center}.footer-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:18px}.footer-links a{color:#9eb4c6;text-decoration:none;font-size:13px}.footer-links a:hover{color:var(--teal)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}.flow{grid-template-columns:1fr 1fr}.flow-step::after{display:none}.sponsor-grid,.admin-grid{grid-template-columns:1fr}.sponsor-card{position:static}.admin-top{align-items:flex-start;flex-direction:column}.hero{padding-top:48px}.hero h1{letter-spacing:-2px}.nav-actions .hide-mobile{display:none}}
@media(max-width:560px){.wrap{width:min(100% - 22px,1160px)}.nav{height:66px}.brand span{font-size:14px}.brand-mark{width:38px;height:38px}.hero{padding:40px 0 45px}.hero-actions{display:grid}.hero-actions .btn{width:100%}.flow{grid-template-columns:1fr}.facts{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.sponsor-id{font-size:54px}.section{padding:32px 0}.matrix{overflow:auto;justify-content:flex-start;padding-left:10px}.admin{width:calc(100% - 20px)}}
.select-inline{padding:6px 10px;font-size:13px;min-width:112px}
.roadmap-figure{margin:20px 0 30px;padding:12px 12px 6px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.roadmap-figure img{display:block;width:100%;height:auto;border-radius:12px}
.roadmap-figure figcaption{padding:12px 6px;color:var(--muted);font-size:14px;line-height:1.5;text-align:center}
.roadmap-figure figcaption strong{color:var(--teal)}
.funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}
.video-card{max-width:880px;margin:0 auto;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.video-frame{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:12px}
.chat-fab{position:fixed;right:18px;bottom:18px;width:58px;height:58px;border-radius:50%;background:var(--gold);color:#071421;border:0;box-shadow:var(--shadow);cursor:pointer;z-index:998;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.chat-fab:hover{transform:scale(1.07)}
.chat-panel{position:fixed;right:18px;bottom:18px;width:min(372px,calc(100vw - 24px));height:min(560px,calc(100vh - 90px));display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);z-index:999;overflow:hidden}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);background:rgba(243,190,67,.06)}
.chat-head strong{font-size:15px}
.chat-sub{color:var(--muted);font-size:12px;margin-top:2px}
.chat-close{background:none;border:0;color:var(--muted);font-size:22px;cursor:pointer;padding:0 4px;line-height:1}
.chat-close:hover{color:var(--text)}
.chat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.chat-msg{max-width:88%;padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.5;overflow-wrap:break-word}
.chat-msg.bot{background:rgba(78,214,203,.08);border:1px solid rgba(78,214,203,.18);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px}
.chat-msg.user{background:var(--gold);color:#071421;align-self:flex-end;border-bottom-right-radius:4px}
.chat-msg a{color:var(--teal)}
.chat-msg.user a{color:#071421}
.chat-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 8px}
.chat-chip{font-size:12px;padding:6px 11px;border-radius:999px;background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer}
.chat-chip:hover{color:var(--text);border-color:var(--teal)}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat-input input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:9px 12px;font-size:14px}
.chat-input input:focus{outline:none;border-color:var(--teal)}
.chat-foot{padding:8px 14px 12px;font-size:12px;color:var(--muted);text-align:center}
.chat-foot a{color:var(--teal)}
.chat-hidden{display:none}
.chat-typing{letter-spacing:3px;animation:chatpulse 1s infinite}
@keyframes chatpulse{50%{opacity:.35}}
.instruction{grid-template-columns:56px 1fr}
.num{width:56px;height:56px;font-size:28px;border-radius:14px}
/* On-chain payout proof feed + toasts */
.pp-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px}
.pp-feed{display:grid;gap:10px}
.pp-row{display:flex;align-items:center;gap:14px;background:#0d2236;border:1px solid #233f56;border-radius:14px;padding:14px 16px}
.pp-icon{font-size:22px;flex:0 0 auto}
.pp-body{flex:1 1 auto;min-width:0}
.pp-body strong{font-size:15px}
.pp-meta{color:var(--muted);font-size:12.5px;margin-top:3px}
.pp-passed{color:#f2c768;font-size:12px;margin-top:3px}
.pp-verify{flex:0 0 auto;font-size:13px;color:var(--teal);text-decoration:none;border:1px solid rgba(78,214,203,.35);border-radius:9px;padding:7px 10px;white-space:nowrap}
.pp-verify:hover{background:rgba(78,214,203,.1)}
.pp-note{color:#8498aa;font-size:12.5px;margin-top:14px;line-height:1.5}
.pp-stack{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.pp-toast{pointer-events:auto;display:block;width:min(330px,calc(100vw - 32px));background:linear-gradient(145deg,#132d45,#0a1b2b);border:1px solid #38556b;border-left:3px solid var(--ok);border-radius:14px;padding:13px 15px;box-shadow:var(--shadow);text-decoration:none;color:var(--text);opacity:0;transform:translateY(14px);transition:.4s ease}
.pp-toast.show{opacity:1;transform:none}
.pp-toast-head{display:block;font-weight:800;font-size:14px}
.pp-toast-sub{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
.pp-toast-verify{display:block;color:var(--teal);font-size:11.5px;margin-top:6px}
@media(max-width:560px){.pp-totals{grid-template-columns:1fr 1fr}.pp-row{flex-wrap:wrap}.pp-stack{left:10px;bottom:10px}}
/* Admin matrix tree */
.mt-tree,.mt-kids{list-style:none;margin:0;padding-left:0}
.mt-kids{padding-left:22px;border-left:1px solid #27445e;margin-left:8px}
.mt-node{padding:3px 0;font-size:13.5px}
.mt-node summary{cursor:pointer;list-style:none}
.mt-node summary::before{content:'▸ ';color:var(--teal)}
.mt-node details[open]>summary::before{content:'▾ '}
.mt-leaf{padding-left:14px}
.mt-id{font-weight:800;color:var(--gold)}
.mt-meta{color:var(--muted);font-size:12px}
.mt-badge{display:inline-block;width:16px;height:16px;line-height:16px;text-align:center;border-radius:5px;background:#183952;color:var(--teal);font-size:10px;font-weight:900}
.mt-badge.mt-prem{background:rgba(243,190,67,.15);color:var(--gold)}
/* Admin matrix pyramid view */
.mtp{display:flex;flex-direction:column;gap:14px;overflow-x:auto;padding:6px 2px 10px}
.mtp-row{display:flex;justify-content:center;gap:8px;min-width:max-content;margin:0 auto}
.mtp-card{appearance:none;font:inherit;cursor:pointer;text-align:center;background:#0d2236;border:1px solid #2a4a66;border-radius:12px;padding:9px 10px;min-width:104px;color:var(--text);display:flex;flex-direction:column;gap:2px;align-items:center;transition:.15s ease}
.mtp-card:hover{border-color:var(--teal);transform:translateY(-1px)}
.mtp-focus{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 8px 22px rgba(243,190,67,.12)}
.mtp-open{background:transparent;border:1px dashed #27445e;color:#5f7891;font-size:11px;justify-content:center;cursor:default;line-height:1.3}
.mtp-lvl{font-size:11px;color:var(--teal);text-transform:uppercase;letter-spacing:.5px;font-weight:800}
.mtp-sub{font-size:11px;color:var(--muted)}
.name-edit{appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.name-pencil{color:#5f7891;font-size:12px;opacity:0;transition:.15s}
.name-edit:hover .name-pencil{opacity:1}
.mtp-down{font-size:10.5px;color:var(--gold);border-top:1px solid #21405a;margin-top:4px;padding-top:4px;width:100%}
.mtp-down-none{color:#4e6578}
/* Qualification badges */
.q-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.8px;vertical-align:middle}
.q-yes{background:linear-gradient(135deg,rgba(243,190,67,.18),rgba(243,190,67,.08));color:var(--gold);border:1px solid rgba(243,190,67,.45);box-shadow:0 0 18px rgba(243,190,67,.15)}
.q-no{background:rgba(174,189,202,.08);color:var(--muted);border:1px solid #33506a}
.mtp-card{position:relative}
.mtp-qmark{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#f7d173);color:#152033;font-size:12px;font-weight:900;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.4)}
/* Hero QR — between the buttons on mobile (show-your-phone flow), tucked after them on desktop */
.qr-cta{display:flex;align-items:center;gap:12px;text-align:left}
.qr-cta img{background:#fff;padding:7px;border-radius:12px;display:block;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.qr-cta span{font-size:13px;font-weight:800;line-height:1.45}
.qr-cta small{color:var(--muted);font-weight:600}
@media(min-width:561px){.hero-actions{align-items:center}.qr-cta{order:3;flex-basis:100%;justify-content:center;margin-top:8px}}
@media(max-width:560px){.qr-cta{justify-content:center}}
.qr-img{width:120px;height:120px;background:#fff;padding:7px;border-radius:12px;display:block;flex:0 0 auto}
.qr-img svg,.qr-img img{width:100%;height:100%;display:block}
img.qr-img{object-fit:contain}
a.brand{text-decoration:none;color:inherit}
.mtp-spill{font-size:10px;color:var(--teal);width:100%;margin-top:3px}
.cold-intro{position:relative;background:linear-gradient(145deg,rgba(78,214,203,.08),rgba(243,190,67,.06));border:1px solid rgba(78,214,203,.3);border-radius:16px;padding:18px 40px 16px 20px;margin-bottom:20px}
.cold-intro-x{position:absolute;top:10px;right:12px;appearance:none;background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
.cold-intro-x:hover{color:var(--text)}
/* Eight-generation matrix illustration — compact icons so 256 stays tidy */
.matrix{overflow-x:auto;padding-bottom:10px}
.matrix .people{max-width:112px;gap:4px}
.matrix .person{width:12px;height:16px}
.matrix .person::before{width:6px;height:6px;left:3px;top:-4px}
.person-more{color:var(--teal);font-weight:900;align-self:center;font-size:15px;line-height:1;margin-left:2px}
/* Home "team by the numbers" showcase */
.team-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.team-stat{background:linear-gradient(180deg,rgba(16,40,63,.94),rgba(9,27,43,.96));border:1px solid #23425d;border-radius:var(--radius);padding:24px 18px;text-align:center;box-shadow:var(--shadow)}
.team-stat .num{font-size:clamp(32px,4.4vw,50px);font-weight:900;line-height:1;color:var(--gold);letter-spacing:-1px}
.team-stat .num.teal{color:var(--teal)}
.team-stat .num.ok{color:var(--ok)}
.team-stat small{display:block;color:var(--muted);margin-top:9px;font-size:13px;line-height:1.45}
@media(max-width:720px){.team-stats{grid-template-columns:1fr 1fr}}