martbost
caeaf56127
A 2m35 tour of all 19 tools at 50,000 feet — what each one is, tier by tier, without opening any of them. It scrolls the wall as it names each level, so the viewer sees the thing being described. Recorded the same way as the per-tool walkthroughs: narration generated first in Marty's cloned voice, then the browser driven on the measured clip timings, so speech and scrolling cannot drift apart. Closes with the line that matters most: these tools make the work lighter, they do not do the work — getting your two and helping them get theirs is still the job. Same reason the individual walkthroughs carry their caveats out loud rather than only on the page. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
56 lines
5.2 KiB
HTML
56 lines
5.2 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex"><meta name="description" content="The Circle Suite — the marketing toolkit licensed to every paid position on our team. Connect your wallet and your level lights up your tools."><title>The Circle Suite | RM Circle Team Build</title><link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">
|
|
<style>
|
|
.su-wrap{max-width:1020px;margin:0 auto;padding:24px 20px 70px}
|
|
.su-hero{text-align:center;max-width:780px;margin:0 auto 10px}
|
|
.su-hero h1{font-size:clamp(30px,5vw,44px);margin:8px 0 10px}
|
|
.su-hero p{color:var(--muted);line-height:1.65}
|
|
#suPips{display:flex;gap:9px;justify-content:center;align-items:center;margin:18px 0 6px}
|
|
#suPips .lab{color:var(--muted);font-weight:800;font-size:12px;letter-spacing:2px;margin-right:4px}
|
|
.su-pip{width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.06);border:2px solid var(--line);opacity:.6}
|
|
.su-pip.on{background:var(--teal);border-color:var(--teal);opacity:1}
|
|
.su-pip.gold{background:var(--gold);border-color:var(--gold);opacity:1}
|
|
#suConnect{margin:16px auto 6px;display:block}
|
|
#suMe{display:none;border:2px solid var(--teal);border-radius:12px;padding:12px 18px;margin:14px auto 6px;max-width:640px;font-size:15px;line-height:1.6;text-align:center}
|
|
#suMe b{color:var(--gold)}
|
|
#suErr{display:none;color:#f0a05a;text-align:center;margin:10px auto;max-width:640px;font-size:14px}
|
|
.su-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:14px;margin-top:26px}
|
|
.su-tile{background:var(--card,#0d2236);border:1px solid var(--line,#24425d);border-radius:14px;padding:16px 18px;position:relative;
|
|
display:flex;flex-direction:column;gap:6px;min-height:150px;transition:border-color .2s}
|
|
.su-tile .ico{font-size:26px;line-height:1}
|
|
.su-tile h3{font-size:16.5px;margin:2px 0 0}
|
|
.su-tile p{font-size:13px;color:var(--muted);line-height:1.5;margin:0;flex:1}
|
|
.su-tile .badge{position:absolute;top:12px;right:12px;font-size:10px;font-weight:800;letter-spacing:.08em;
|
|
border-radius:999px;padding:2px 9px;border:1px solid var(--line);color:var(--muted)}
|
|
.su-tile.open{border-color:rgba(78,214,203,.55)}
|
|
.su-tile.open .badge{border-color:var(--teal);color:var(--teal)}
|
|
.su-tile.locked{opacity:.62}
|
|
.su-tile.locked .badge{border-color:var(--gold);color:var(--gold)}
|
|
.su-tile a.go{color:var(--teal);font-weight:700;font-size:13.5px;text-decoration:none;margin-top:4px}
|
|
.su-tile .dev{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:2px 9px;align-self:flex-start}
|
|
.su-lvhead{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-top:10px}
|
|
.su-lvhead .n{font-family:Georgia,serif;font-weight:700;color:var(--gold);font-size:20px}
|
|
.su-lvhead .nm{font-weight:800;letter-spacing:.12em;font-size:12.5px;color:var(--muted);text-transform:uppercase}
|
|
.su-lvhead .rule{flex:1;height:1px;background:var(--line)}
|
|
.su-foot{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.6;text-align:center}
|
|
</style></head>
|
|
<body>
|
|
<header class="wrap nav"><a class="brand" href="/"><img class="brand-mark" src="/logo.jpg" alt="The RM Circle" width="42" height="42"><span><span id="brandName">RM Circle</span><small>The Circle Suite</small></span></a><div class="nav-actions"><a class="btn btn-secondary hide-mobile" href="/tools">Promo Tools</a><a class="btn btn-primary" href="/">Home</a></div></header>
|
|
<main class="su-wrap">
|
|
<div class="su-hero">
|
|
<div class="eyebrow" style="color:var(--gold)">THE PRODUCT · YOUR POSITION IS YOUR LICENSE</div>
|
|
<h1>The Circle <span class="gold">Suite.</span></h1>
|
|
<p>Every paid position on our team is a license to this toolkit. Connect the wallet that holds your position — one free signature, it can't move funds — and your level lights up your tools. Each upgrade extends your license, automatically, straight from the contract.</p>
|
|
<div id="suPips"><span class="lab">YOUR LEVEL</span></div>
|
|
<button id="suConnect" class="btn btn-primary">🔑 Connect wallet — light up my tools</button>
|
|
<div id="suMe"></div>
|
|
<div id="suErr"></div>
|
|
</div>
|
|
<div id="suGrid" class="su-grid"></div>
|
|
<div class="su-foot">The Suite is included with team membership — never sold separately, never an extra cost. Tools marked "in development" ship in the order the team builds them; only what you can click today is promised today. Independent team resource · No income is guaranteed · Cryptocurrency involves risk. <a href="/how-pay-works#exact-costs" style="color:var(--teal)">Level costs, straight from the contract →</a></div>
|
|
</main>
|
|
<script src="/rmc-wallet.js"></script>
|
|
<script src="/inapp-browser.js"></script><script src="/suite.js"></script>
|
|
<script src="/tool-video.js" data-video="/tv/suite-overview.mp4" data-title="Watch the 2-minute tour of every tool" data-key="overview" data-secs="· 2 min 35" defer></script>
|
|
<script src="/chat.js" defer></script>
|
|
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|