marty/rm-circle-team-router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Loosen spacing in the home team-stats showcase

Browse Source 
Bump the stat-tile grid gap 16→22px and the gap to the mechanics cards
24→32px so the boxes breathe.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-08-15 07:18:41 -05:00
parent d805a33608
commit 5de1eb8ecd
2 changed files with 44 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+1 -1
View File
@@ -9,7 +9,7 @@
<figure class="roadmap-figure" style="margin-top:34px"><a href="/roadmap.webp" target="_blank" rel="noopener"><img src="/roadmap.webp" alt="RM Circle Premium Team Build Roadmap — core strategy, step-by-step guide, premium levels, and duplication formula" width="1149" height="1369"></a><figcaption>The RM Circle is a team build project of the <strong>Crypto Team Build Network</strong>. This roadmap is the plan every member follows — tap to view full size.</figcaption></figure></section> <figure class="roadmap-figure" style="margin-top:34px"><a href="/roadmap.webp" target="_blank" rel="noopener"><img src="/roadmap.webp" alt="RM Circle Premium Team Build Roadmap — core strategy, step-by-step guide, premium levels, and duplication formula" width="1149" height="1369"></a><figcaption>The RM Circle is a team build project of the <strong>Crypto Team Build Network</strong>. This roadmap is the plan every member follows — tap to view full size.</figcaption></figure></section>
<section class="section" id="teamstats" style="padding-top:38px"><div class="wrap"><div class="section-head" style="max-width:880px"><div class="eyebrow">Our team by the numbers</div><h2>Why it pays to be on a <span class="gold">winning team.</span></h2><p>Every figure below is read live from the Polygon blockchain — anyone can verify it. These are historical on-chain facts, not a promise of future income.</p></div> <section class="section" id="teamstats" style="padding-top:38px"><div class="wrap"><div class="section-head" style="max-width:880px"><div class="eyebrow">Our team by the numbers</div><h2>Why it pays to be on a <span class="gold">winning team.</span></h2><p>Every figure below is read live from the Polygon blockchain — anyone can verify it. These are historical on-chain facts, not a promise of future income.</p></div>
<div id="teamStatGrid" class="team-stats"><div class="empty">Reading the blockchain…</div></div> <div id="teamStatGrid" class="team-stats"><div class="empty">Reading the blockchain…</div></div>
<div class="grid-3" style="margin-top:24px"><article class="card"><div class="card-icon">↧</div><h3>Spillover works for you</h3><p>When your team keeps recruiting, the overflow spills <em>down</em> into your matrix — filling your structure with members you didn't personally enroll. A bigger, more active team means more spillover landing under you.</p></article><article class="card"><div class="card-icon">↑</div><h3>Depth pays as it climbs</h3><p>Your income comes from your team upgrading through the levels, and every upgrade travels up the matrix. The deeper and more active your side, the more upgrade payments flow toward your position — if you stay qualified and keep your level ahead.</p></article><article class="card"><div class="card-icon">★</div><h3>You never build alone</h3><p>The team rotation points everyone's effort at helping the next person get their two. Join the momentum and the team works to qualify you — instead of grinding solo.</p></article></div> <div class="grid-3" style="margin-top:32px;gap:22px"><article class="card"><div class="card-icon">↧</div><h3>Spillover works for you</h3><p>When your team keeps recruiting, the overflow spills <em>down</em> into your matrix — filling your structure with members you didn't personally enroll. A bigger, more active team means more spillover landing under you.</p></article><article class="card"><div class="card-icon">↑</div><h3>Depth pays as it climbs</h3><p>Your income comes from your team upgrading through the levels, and every upgrade travels up the matrix. The deeper and more active your side, the more upgrade payments flow toward your position — if you stay qualified and keep your level ahead.</p></article><article class="card"><div class="card-icon">★</div><h3>You never build alone</h3><p>The team rotation points everyone's effort at helping the next person get their two. Join the momentum and the team works to qualify you — instead of grinding solo.</p></article></div>
<p class="micro" style="margin-top:16px">Blockchain data can lag or contain display errors — always verify on-chain. Participation involves cryptocurrency risk and no income is guaranteed; most participants may not profit. <a href="/disclaimer" style="color:var(--teal)">Full disclaimers →</a></p> <p class="micro" style="margin-top:16px">Blockchain data can lag or contain display errors — always verify on-chain. Participation involves cryptocurrency risk and no income is guaranteed; most participants may not profit. <a href="/disclaimer" style="color:var(--teal)">Full disclaimers →</a></p>
</div></section> </div></section>
<section class="section" style="padding-bottom:0"><div class="wrap"><div class="section-head"><div class="eyebrow">Watch first</div><h2>See how simple this is.</h2><p>A quick walkthrough of the team build in action. Watch this before you dive into the strategy below.</p></div><div class="video-card" style="max-width:880px;margin:0 auto"><iframe class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9" width="880" height="495" src="https://www.youtube-nocookie.com/embed/VOhwBiAO7to" title="RM Circle Premium team build walkthrough video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div></div></section> <section class="section" style="padding-bottom:0"><div class="wrap"><div class="section-head"><div class="eyebrow">Watch first</div><h2>See how simple this is.</h2><p>A quick walkthrough of the team build in action. Watch this before you dive into the strategy below.</p></div><div class="video-card" style="max-width:880px;margin:0 auto"><iframe class="video-frame" style="display:block;width:100%;height:auto;aspect-ratio:16/9" width="880" height="495" src="https://www.youtube-nocookie.com/embed/VOhwBiAO7to" title="RM Circle Premium team build walkthrough video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div></div></section>
public/styles.css
+43 -43
View File
@@ -99,46 +99,46 @@ a{color:inherit}.wrap{width:min(1160px,calc(100% - 32px));margin:auto}.nav{heigh
.mtp-down{font-size:10.5px;color:var(--gold);border-top:1px solid #21405a;margin-top:4px;padding-top:4px;width:100%} .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} .mtp-down-none{color:#4e6578}
/* Qualification badges */ /* 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-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-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} .q-no{background:rgba(174,189,202,.08);color:var(--muted);border:1px solid #33506a}
.mtp-card{position:relative} .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)} .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 */ /* 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{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 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 span{font-size:13px;font-weight:800;line-height:1.45}
.qr-cta small{color:var(--muted);font-weight:600} .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(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}} @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{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} .qr-img svg,.qr-img img{width:100%;height:100%;display:block}
img.qr-img{object-fit:contain} img.qr-img{object-fit:contain}
a.brand{text-decoration:none;color:inherit} a.brand{text-decoration:none;color:inherit}
.mtp-spill{font-size:10px;color:var(--teal);width:100%;margin-top:3px} .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{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{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)} .cold-intro-x:hover{color:var(--text)}
/* Eight-generation matrix illustration — compact icons so 256 stays tidy */ /* Eight-generation matrix illustration — compact icons so 256 stays tidy */
.matrix{overflow-x:auto;padding-bottom:10px} .matrix{overflow-x:auto;padding-bottom:10px}
.matrix .people{max-width:112px;gap:4px} .matrix .people{max-width:112px;gap:4px}
.matrix .person{width:12px;height:16px} .matrix .person{width:12px;height:16px}
.matrix .person::before{width:6px;height:6px;left:3px;top:-4px} .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} .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 */ /* Home "team by the numbers" showcase */
.team-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .team-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.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{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{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.teal{color:var(--teal)}
.team-stat .num.ok{color:var(--ok)} .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} .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}} @media(max-width:720px){.team-stats{grid-template-columns:1fr 1fr}}