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/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-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}}