marty/rm-circle-team-router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
726bc24e0980fb21fce47e107d0572a92e6d6dd0
rm-circle-team-router/public/styles.css
T
martbost 7452490a78 Admin: group the fourteen panels into tabs 
The page was a fixed 1.5fr/.75fr split — ten tall panels on the left, four
short config forms on the right. The right column ran out about a quarter of
the way down, so the rest of the page scrolled past an empty gutter, and
finding anything meant scrolling through everything.

Five tabs now, each using the full width: Team (queue, add sponsor, coaching
radar, award capacity, messages), Traffic (conversions, org vs network),
Members (submissions, lookup, matrix), My Money (positions income), Settings
(AI chat, SendGrid, public page).

The panels themselves are untouched — same markup, same ids, same JS. Only
their grouping changed. Panes are moved in the HTML rather than by script, so
the layout does not depend on JS running; the tab file only toggles which
pane is visible and remembers the last one.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-30 06:16:05 -05:00

264 lines
31 KiB
CSS
Raw Blame History

: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-gen{color:var(--gold);font-weight:800;background:rgba(243,190,67,.12);border:1px solid rgba(243,190,67,.35);border-radius:6px;padding:1px 7px}
.tool-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow)}
.tool-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.tool-head h3{font-size:24px;margin:4px 0 4px}.tool-head p{color:var(--muted);font-size:15px;margin:0;line-height:1.5;max-width:640px}
.swipe{white-space:pre-wrap;background:#071827;border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-top:12px;color:var(--text);font-size:14.5px;line-height:1.55;font-family:inherit;overflow-x:auto}
.share-link{background:#071827;border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:var(--gold);font-size:14px;flex:1;min-width:200px;overflow:auto;white-space:nowrap}
.post-actions{margin-top:11px}
.brand-voice-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between;background:linear-gradient(145deg,#12233a,#0b1a2b);border:1px solid #2a4a63;border-radius:16px;padding:18px 22px;margin:6px 0 4px}
.brand-voice-cta .bv-txt{max-width:640px}.brand-voice-cta h3{margin:0 0 5px;font-size:20px}.brand-voice-cta p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.banner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;margin-top:8px}
.banner-cell{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px;display:flex;flex-direction:column}
.banner-cell .prev{background:#0b1420;border:1px solid #24303f;border-radius:9px;padding:10px;display:grid;place-items:center;min-height:128px;overflow:hidden}
.banner-cell .prev img{max-width:100%;height:auto;max-height:210px;display:block;border-radius:3px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.banner-cell .meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:12px 2px 0}
.banner-cell .sz{font-weight:800;color:var(--text);font-size:15px}.banner-cell .use{color:var(--muted);font-size:12px;text-align:right}
.banner-cell .acts{display:flex;gap:8px;margin-top:12px}.banner-cell .acts .btn{flex:1}
/* objection-handling accordion (team leaders) — native <details>, no JS */
.obj-wrap{display:grid;gap:12px;margin:6px 0 4px}
.obj{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.obj>summary{cursor:pointer;list-style:none;padding:16px 18px;display:flex;gap:12px;align-items:flex-start;font-weight:800;color:var(--text);font-size:16.5px;line-height:1.4}
.obj>summary::-webkit-details-marker{display:none}
.obj>summary::before{content:"\FF0B";color:var(--gold);font-weight:900;flex:none;font-size:18px;line-height:1.25}
.obj[open]>summary::before{content:"\2013"}
.obj[open]>summary{border-bottom:1px solid var(--line)}
.obj-body{padding:15px 18px 18px;display:grid;gap:14px}
.obj-truth .lab,.obj-say .lab{display:inline-block;font-size:11px;letter-spacing:.9px;text-transform:uppercase;font-weight:900;margin-bottom:7px}
.obj-truth .lab{color:var(--teal)}.obj-say .lab{color:var(--gold)}
.obj-truth p{color:var(--muted);margin:0;line-height:1.6;font-size:15px}
.obj-say-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:2px}
/* dashboard "My Next Step" plan panel + mini level ladder */
.ns-card{background:linear-gradient(150deg,#12293f,#0b1b2b);border:1px solid #2a4a63;border-radius:16px;padding:18px 20px;margin:0 0 22px}
.ns-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ns-eyebrow{color:var(--teal);text-transform:uppercase;letter-spacing:1.6px;font-weight:800;font-size:12px}
.ns-badge{font-size:12.5px;font-weight:800;padding:5px 11px;border-radius:999px;white-space:nowrap}
.ns-badge.ok{background:rgba(123,224,161,.12);color:var(--ok);border:1px solid rgba(123,224,161,.35)}
.ns-badge.no{background:rgba(243,190,67,.1);color:#f2c768;border:1px solid rgba(243,190,67,.3)}
.ns-h{font-size:20px;font-weight:900;letter-spacing:-.3px;margin:2px 0 6px}
.ns-p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0 0 15px}.ns-p strong{color:var(--text)}
.nladder{display:flex;gap:6px}
.nlv{flex:1;text-align:center;background:#0d2135;border:1px solid #203c53;border-radius:9px;padding:9px 3px;position:relative}
.nlv .nlvn{font-size:11.5px;font-weight:700;color:#b7c6d5;line-height:1.1;display:block}
.nlv .nlvc{display:block;font-size:9.5px;font-weight:700;color:#7f93a3;line-height:1.1;margin-top:3px;white-space:nowrap}
.nlv.you .nlvc{color:#3a2e12}.nlv.next .nlvc{color:#8fded6}
.nlv.done{opacity:.5}
.nlv.you{background:linear-gradient(160deg,#f3be43,#f7d074);border-color:#f3be43}.nlv.you .nlvn{color:#14202e}
.nlv.next{background:rgba(78,214,203,.12);border:1.5px solid var(--teal)}.nlv.next .nlvn{color:#7fe9df}
.nlvt{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:8.5px;font-weight:900;letter-spacing:.4px;padding:1.5px 6px;border-radius:99px;white-space:nowrap}
.nlv.you .nlvt{background:#14202e;color:#f3be43}.nlv.next .nlvt{background:var(--teal);color:#08222b}
@media(max-width:560px){.nladder{flex-wrap:wrap}.nlv{flex:0 0 calc(25% - 5px)}}
.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-more{display:block;margin:14px auto 0}
.pp-note{color:#8498aa;font-size:12.5px;margin-top:14px;line-height:1.5}
.pp-stack{position:fixed;left:16px;bottom:76px;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:72px}}
/* 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)}
.gs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gs-step{display:flex;gap:11px;align-items:flex-start;background:rgba(7,20,33,.5);border:1px solid rgba(78,214,203,.18);border-radius:12px;padding:13px 14px}
.gs-n{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:#173a52;border:1px solid #2a627b;color:var(--teal);font-weight:900;display:grid;place-items:center;font-size:14px}
.gs-step strong{display:block;font-size:15px;margin-bottom:3px}
.gs-step span{color:var(--muted);font-size:13px;line-height:1.45}
@media(max-width:640px){.gs-steps{grid-template-columns:1fr}}
/* two-purpose /my page: persistent context strip + tabs + pitch tab */
.mp-context{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(11,28,44,.6);border:1px solid var(--line);border-radius:14px;padding:11px 16px;margin-bottom:14px}
.mp-who{font-weight:800;font-size:15px}
.mp-switch{margin-left:auto}
.mp-tabs{display:flex;gap:8px;margin-bottom:22px}
.mp-tab{flex:1;text-align:center;background:#0b1b2b;border:1px solid var(--line);border-radius:13px;padding:13px 10px;cursor:pointer;font-weight:800;font-size:15px;color:var(--muted);transition:.15s;font-family:inherit}
.mp-tab span{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-top:3px}
.mp-tab.on{background:linear-gradient(160deg,#12293f,#0b1b2b);border-color:var(--teal);color:var(--text)}
.mp-tab.on span{color:var(--teal)}
.mp-panel{display:none}.mp-panel.on{display:block}
.pitch-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center;padding:10px 0 6px}
.pitch-hero-cta{display:flex;flex-direction:column;gap:12px;background:linear-gradient(150deg,rgba(243,190,67,.12),rgba(243,190,67,.03));border:1px solid rgba(243,190,67,.32);border-radius:18px;padding:24px 22px;text-align:center}
.pitch-hero-eye{color:var(--gold);text-transform:uppercase;letter-spacing:1.6px;font-weight:800;font-size:12px}
.pitch-hero-btn{font-size:22px;padding:18px 24px;font-weight:900;justify-content:center;box-shadow:0 12px 34px rgba(243,190,67,.3)}
.pitch-hero-hint{color:var(--muted);font-size:13px;line-height:1.5;margin:0}
.pitch-hero-dim{opacity:.7}
@media(max-width:760px){.pitch-hero{grid-template-columns:1fr;gap:18px}.pitch-hero-btn{font-size:20px;padding:16px 22px}}
.pitch-h1{font-size:clamp(30px,6vw,52px);line-height:1;letter-spacing:-1.5px;margin:12px 0 12px;font-weight:900}
.pitch-lede{font-size:clamp(16px,2.2vw,19px);color:var(--muted);line-height:1.55;max-width:640px;margin:0 0 22px}
.pitch-video{margin:2px 0 24px;text-align:center}
.pitch-video .promo{width:100%;max-width:700px;aspect-ratio:16/9;display:block;margin:0 auto;border-radius:16px;border:1px solid var(--line);box-shadow:0 18px 55px rgba(0,0,0,.5);background:#000}
.pitch-vcap{color:var(--muted);font-size:13.5px;margin-top:10px;font-weight:600}.pitch-vcap strong{color:var(--text)}
.pitch-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 22px}
.pitch-step{display:flex;gap:11px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 16px}
.pitch-n{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:#173a52;border:1px solid #2a627b;color:var(--teal);font-weight:900;display:grid;place-items:center;font-size:15px}
.pitch-step strong{display:block;font-size:16px;margin-bottom:4px}.pitch-step span{color:var(--muted);font-size:13.5px;line-height:1.45}
.pitch-proof{background:linear-gradient(150deg,rgba(78,214,203,.09),rgba(243,190,67,.05));border:1px solid #2c5f66;border-radius:16px;padding:20px 22px;margin:0 0 22px}
.pitch-proof .lab{color:var(--teal);text-transform:uppercase;letter-spacing:1.4px;font-weight:800;font-size:12px;margin-bottom:8px}
.pitch-proof h3{margin:0 0 14px;font-size:20px;font-weight:800}
.pitch-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pnum b{display:block;font-size:26px;font-weight:900}.pnum .ok{color:var(--ok)}.pnum .gd{color:var(--gold)}.pnum .tl{color:var(--teal)}
.pnum small{color:var(--muted);font-size:12px}
.pitch-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.pitch-cta .btn{padding:13px 22px;font-size:16px}
.pitch-l-lab{color:var(--muted);font-size:12.5px;font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.pitch-l-row{display:flex;justify-content:space-between;gap:12px;background:#0b1b2b;border:1px solid var(--line);border-radius:11px;padding:11px 14px;margin-bottom:7px;font-size:14px;color:#cfdcea}
.pitch-l-row b{color:var(--ok)}
@media(max-width:680px){.pitch-steps,.pitch-nums{grid-template-columns:1fr}}
/* 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;margin-bottom:34px}
.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);display:flex;flex-direction:column;align-items:center;justify-content:center}
.team-stat .num{width:100%;text-align:center}
.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}}
/* How-you-get-paid diagram page */
.pay-entry{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px 0}
.pay-node{background:#0d2236;border:1px solid #2a4a66;border-radius:14px;padding:16px 20px;text-align:center;font-weight:800;line-height:1.3}
.pay-you{border-color:var(--gold);color:var(--gold)}
.pay-join{color:var(--teal);border-color:rgba(78,214,203,.4)}
.pay-arrow-up{display:flex;flex-direction:column;align-items:center;color:var(--ok);font-weight:900;font-size:22px;line-height:1}
.pay-arrow-up span{font-size:13px;margin-bottom:2px;white-space:nowrap}
.pay-diagram-wrap{overflow-x:auto;margin-top:8px}
.pay-diagram{width:100%;min-width:640px;height:auto;display:block}
img.brand-mark{object-fit:cover;font-size:0}
/* Admin tabs — replaces the old fixed 1.5fr/.75fr admin-grid, which left the
right column empty for most of the page. */
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid #27445e;margin-bottom:18px}
.tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;color:#8da3b5;font:inherit;font-weight:800;font-size:14px;letter-spacing:.4px;padding:12px 17px;cursor:pointer;border-radius:10px 10px 0 0;transition:.15s ease}
.tab:hover{color:var(--text);background:rgba(255,255,255,.035)}
.tab.on{color:var(--gold);border-bottom-color:var(--gold);background:rgba(243,190,67,.07)}
.tab:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.tabpane{display:none;gap:18px;grid-template-columns:1fr;align-content:start}
.tabpane.on{display:grid}
.pane-split{display:grid;grid-template-columns:1.6fr .9fr;gap:18px;align-items:start}
#grantCard summary::-webkit-details-marker{display:none}
@media(max-width:900px){.pane-split{grid-template-columns:1fr}.tab{padding:10px 12px;font-size:13px}}
Reference in New Issue View Git Blame Copy Permalink