marty/instantadpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Member area rebuilt as a back-office shell

Browse Source 
Fixed left sidebar (iconed menu with active accent, site links, user chip,
logout), sticky top bar with per-section title and rehearsal notice,
content region per pane. Mobile gets a hamburger off-canvas drawer that
closes on selection. Marketing nav no longer wraps the member area;
signed-out visitors get a centered auth page. All flows and pane IDs
preserved; verified on desktop and 390px. Assets v=20260904r.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-05 04:55:20 -05:00
parent c10af1d1e7
commit f848112e2d
6 changed files with 231 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/site.css
+35
View File
@@ -222,6 +222,41 @@ input[type=range]{padding:0;border:0;background:transparent;accent-color:var(--m
input:focus,select:focus{border-color:var(--mint)}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.hero-note{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:26px}
/* ── member back-office shell ─────────────────────────── */
.bo-body{background:var(--ground)}
.bo{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.bo-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:22px;
padding:22px 16px;background:rgba(10,18,15,.92);border-right:1px solid var(--line)}
.bo-side .logo{font-size:19px;padding:0 8px}
.bo-menu{display:flex;flex-direction:column;gap:4px}
.bo-menu button{display:flex;align-items:center;gap:11px;background:transparent;border:0;color:var(--muted);
font:600 14px var(--disp);padding:11px 12px;border-radius:11px;cursor:pointer;text-align:left;
border-left:3px solid transparent}
.bo-menu button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.bo-menu button:hover{color:var(--ink);background:rgba(67,232,195,.05)}
.bo-menu button.on{color:var(--mint);background:rgba(67,232,195,.09);border-left-color:var(--mint)}
.bo-links{display:flex;flex-direction:column;gap:2px;padding:14px 12px;border-top:1px solid var(--line)}
.bo-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.bo-links a{color:var(--muted);font-size:13.5px;padding:5px 0}
.bo-links a:hover{color:var(--ink);text-decoration:none}
.bo-foot{margin-top:auto;padding:14px 12px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px;overflow-wrap:anywhere}
.bo-main{min-width:0;display:flex;flex-direction:column}
.bo-top{display:flex;align-items:center;gap:16px;padding:16px 26px;border-bottom:1px solid var(--line);
background:rgba(6,10,8,.75);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}
.bo-top h2{font-size:20px}
#boBurger{display:none;background:transparent;border:1px solid var(--line-strong);color:var(--ink);
border-radius:9px;font-size:17px;padding:5px 11px;cursor:pointer}
.bo-rehearsal{margin-left:auto;color:var(--muted)}
.bo-rehearsal b{color:var(--mint)}
.bo-content{padding:26px;max-width:1060px;width:100%}
@media(max-width:959px){
.bo{grid-template-columns:1fr}
.bo-side{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:20;transform:translateX(-100%);
transition:transform .22s ease;height:100dvh}
.bo.side-open .bo-side{transform:none;box-shadow:0 0 60px rgba(0,0,0,.6)}
#boBurger{display:block}
.bo-content{padding:18px}
}
/* member sub-navigation */
.subnav{display:flex;gap:6px;flex-wrap:wrap;background:rgba(16,28,24,.7);border:1px solid var(--line);
border-radius:999px;padding:6px 8px;width:fit-content;margin:0 0 22px}