From 5de1eb8ecdfa1396b8d21d56bcc1518988dc8bc7 Mon Sep 17 00:00:00 2001 From: martbost Date: Sat, 15 Aug 2026 07:18:41 -0500 Subject: [PATCH] Loosen spacing in the home team-stats showcase MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- public/index.html | 2 +- public/styles.css | 86 +++++++++++++++++++++++------------------------ 2 files changed, 44 insertions(+), 44 deletions(-) diff --git a/public/index.html b/public/index.html index 8880be2..4da5d10 100644 --- a/public/index.html +++ b/public/index.html @@ -9,7 +9,7 @@
RM Circle Premium Team Build Roadmap — core strategy, step-by-step guide, premium levels, and duplication formula
The RM Circle is a team build project of the Crypto Team Build Network. This roadmap is the plan every member follows — tap to view full size.
Our team by the numbers

Why it pays to be on a winning team.

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.

Reading the blockchain…
-
↧

Spillover works for you

When your team keeps recruiting, the overflow spills down into your matrix — filling your structure with members you didn't personally enroll. A bigger, more active team means more spillover landing under you.

↑

Depth pays as it climbs

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.

★

You never build alone

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.

+
↧

Spillover works for you

When your team keeps recruiting, the overflow spills down into your matrix — filling your structure with members you didn't personally enroll. A bigger, more active team means more spillover landing under you.

↑

Depth pays as it climbs

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.

★

You never build alone

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.

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. Full disclaimers →

Watch first

See how simple this is.

A quick walkthrough of the team build in action. Watch this before you dive into the strategy below.

diff --git a/public/styles.css b/public/styles.css index b494072..a059b51 100644 --- a/public/styles.css +++ b/public/styles.css @@ -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-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}} + +/* 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: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 .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}}