/* ============================================================ RALLY PORTAL SHELL Net-new portal chrome for full-page Rally screens. Link AFTER cobalt-tokens.css + cobalt-components.css: this file only adds what the component library does not already carry, and reads every color and size through the cobalt tokens. REUSED from cobalt-components.css (not restyled here): .topbar .theme-toggle .wordmark top chrome + brand .shell-side .sbrand .venue-pick .snav .shell-me .rolechip staff sidebar kit (the <=900px rules in cobalt-components.css already reflow .shell-side into a horizontal strip - the staff shell below leans on that instead of re-implementing it) .scroll-x .card .btn .seg .badge .av etc. everything else ADDED here: .shell-customer + .toplinks + .shell-foot customer shell .shell-staff + .shell-main + .workbar staff shell .page-head shared page header .frame / .frame.reading / .frame.ops content frame ============================================================ */ /* ============================================================ CUSTOMER SHELL Phone-first: the reused sticky .topbar carries the wordmark, primary links (.toplinks) and account; content sits in .frame. Body scrolls; the shell never scrolls sideways. ============================================================ */ .shell-customer{min-height:100dvh; display:flex; flex-direction:column} .toplinks{display:flex; align-items:center; gap:2px; min-width:0; max-width:100%; overflow-x:auto; scrollbar-width:none} .toplinks::-webkit-scrollbar{display:none} .toplinks a{display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 13px; border-radius:var(--r-full); font-size:14px; font-weight:650; color:var(--ink-2); white-space:nowrap; transition:.15s; flex:0 0 auto} .toplinks a:hover{background:var(--surface-2); color:var(--ink)} .toplinks a.on{background:var(--brand-tint); color:var(--brand-ink)} .toplinks a .ic{width:17px; height:17px} /* account button: a tappable avatar at the end of the topbar */ .acct{border:0; background:transparent; padding:2px; border-radius:50%; display:inline-flex} .acct:focus-visible{outline:none; box-shadow:var(--ring)} .shell-foot{margin-top:auto; border-top:1px solid var(--line)} .shell-foot .frame{display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px; padding-top:20px; padding-bottom:28px; color:var(--ink-3); font-size:var(--fs-xs); font-weight:600} .shell-foot .grow{flex:1} @media (max-width:640px){ /* two-row top nav: brand + account stay up, links get their own full-width scrollable row with big tap targets */ .shell-customer>.topbar .toplinks{order:9; flex-basis:100%} } /* ============================================================ STAFF SHELL Desktop-dense: reused .shell-side as a real sticky sidebar + a net-new .workbar (context + actions) over the content frame. >=1101px full sidebar, collapsible to an icon rail (persisted on via localStorage 'rally-nav') · 768-1100px always the icon rail · <=767px the sidebar goes off-canvas behind a burger button in the workbar and slides in as a drawer over a scrim (portal-ui.js drives all of it). Wrap the whole thing in .density-ops. ============================================================ */ .shell-staff{display:flex; min-height:100dvh; align-items:stretch} .shell-staff>.shell-side{position:sticky; top:0; height:100dvh; overflow-y:auto; scrollbar-width:thin} .shell-main{flex:1; min-width:0; display:flex; flex-direction:column} /* venue-pick is now an back to the club home (box/background/color still come from cobalt-components.css) - just undo default link styling so it renders identically to the old div */ a.venue-pick{text-decoration:none; color:inherit; cursor:pointer} .workbar{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; padding:9px clamp(12px,2vw,20px); background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line)} .workbar .crumb{display:flex; align-items:center; gap:7px; min-width:0; font-size:12.5px; font-weight:650; color:var(--ink-3); white-space:nowrap} .workbar .crumb b{color:var(--ink); font-weight:750} .workbar .crumb .ic{width:14px; height:14px; color:var(--ink-3)} .workbar .wactions{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap} /* burger: leading workbar control, phones only */ .nav-burger{display:none; align-items:center; justify-content:center; flex:0 0 auto; width:36px; height:36px; padding:0; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink-2); cursor:pointer; transition:.15s} .nav-burger .ic{width:18px; height:18px} .nav-burger:hover{border-color:var(--brand); color:var(--brand-ink)} .nav-burger:focus-visible{outline:none; box-shadow:var(--ring)} /* collapse chevron: lives in the sidebar brand row, desktop only */ .nav-collapse{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; margin-left:auto; width:28px; height:28px; padding:0; border:0; border-radius:var(--r-xs); background:transparent; color:var(--nt-chrome-ink3); cursor:pointer; transition:.15s} .nav-collapse .ic{width:16px; height:16px; transition:transform .22s ease} .nav-collapse:hover{background:rgba(255,255,255,.08); color:var(--nt-chrome-ink)} .nav-collapse:focus-visible{outline:none; box-shadow:var(--ring)} @media (max-width:1100px){ .nav-collapse{display:none} } /* drawer scrim: only ever shown while html[data-drawer="open"] (phones) */ .nav-scrim{position:fixed; inset:0; z-index:70; background:var(--overlay); opacity:0; pointer-events:none; transition:opacity .24s ease} html[data-drawer="open"] .nav-scrim{opacity:1; pointer-events:auto} html[data-drawer="open"]{overflow:hidden} @media (min-width:768px){ .nav-scrim{display:none} } /* sidebar width animates between full and rail on desktop */ @media (min-width:768px){ .shell-staff>.shell-side{transition:width .22s ease, flex-basis .22s ease, padding .22s ease} } /* undo the cobalt <=900px horizontal-strip layout: the staff shell keeps the vertical sidebar column at every width (drawer or rail) */ @media (max-width:900px){ .shell-staff>.shell-side{flex-direction:column; align-items:stretch; gap:2px; padding:16px 12px; overflow-x:hidden} .shell-staff .sbrand{padding:4px 8px 14px} .shell-staff .venue-pick{margin-bottom:14px} .shell-staff .snav{flex-direction:column; align-items:stretch; gap:2px} .shell-staff .snav .grp{padding:14px 10px 5px} .shell-staff .snav a{padding:8.5px 10px} .shell-staff .shell-me{margin-top:auto; margin-left:0; padding:10px 8px 2px; border-top:1px solid rgba(255,255,255,.07)} } /* phones: off-canvas drawer over a scrim */ @media (max-width:767px){ .shell-staff{display:block} .shell-staff>.shell-side{position:fixed; top:0; bottom:0; left:0; z-index:80; width:min(304px,86vw); flex:none; height:100dvh; overflow-y:auto; transform:translateX(-105%); transition:transform .24s ease} html[data-drawer="open"] .shell-staff>.shell-side{transform:none; box-shadow:var(--shadow-3)} .nav-burger{display:inline-flex} } /* icon rail: labels collapse, icons and grouping dividers stay. 768-1100px: always the rail · >=1101px: only when collapsed. */ @media (min-width:768px) and (max-width:1100px){ .shell-staff>.shell-side{width:68px; flex:0 0 68px; padding:14px 8px; align-items:center} .shell-staff .sbrand{padding:2px 0 12px} .shell-staff .sbrand .wm{display:none} .shell-staff .venue-pick{font-size:0; gap:0; padding:6px; justify-content:center; width:44px; margin-bottom:14px} .shell-staff .venue-pick small{display:none} .shell-staff .venue-pick .vic{font-size:11px} .shell-staff .snav{width:100%} .shell-staff .snav a{justify-content:center; gap:0; font-size:0; padding:11px 0} .shell-staff .snav a .ic{width:19px; height:19px} .shell-staff .snav .grp{font-size:0; padding:0; margin:8px 6px 6px; border-top:1px solid rgba(255,255,255,.09)} .shell-staff .shell-me{justify-content:center; padding:12px 0 2px} .shell-staff .shell-me>div,.shell-staff .shell-me .rolechip{display:none} } @media (min-width:1101px){ html[data-nav="collapsed"] .shell-staff>.shell-side{width:68px; flex:0 0 68px; padding:14px 8px; align-items:center} html[data-nav="collapsed"] .shell-staff .sbrand{flex-direction:column; gap:10px; padding:2px 0 12px} html[data-nav="collapsed"] .shell-staff .sbrand .wm{display:none} html[data-nav="collapsed"] .shell-staff .nav-collapse{margin-left:0} html[data-nav="collapsed"] .shell-staff .nav-collapse .ic{transform:rotate(180deg)} html[data-nav="collapsed"] .shell-staff .venue-pick{font-size:0; gap:0; padding:6px; justify-content:center; width:44px} html[data-nav="collapsed"] .shell-staff .venue-pick small{display:none} html[data-nav="collapsed"] .shell-staff .venue-pick .vic{font-size:11px} html[data-nav="collapsed"] .shell-staff .snav{width:100%} html[data-nav="collapsed"] .shell-staff .snav a{justify-content:center; gap:0; font-size:0; padding:11px 0} html[data-nav="collapsed"] .shell-staff .snav a .ic{width:19px; height:19px} html[data-nav="collapsed"] .shell-staff .snav .grp{font-size:0; padding:0; margin:8px 6px 6px; border-top:1px solid rgba(255,255,255,.09)} html[data-nav="collapsed"] .shell-staff .shell-me{justify-content:center; padding:12px 0 2px} html[data-nav="collapsed"] .shell-staff .shell-me>div, html[data-nav="collapsed"] .shell-staff .shell-me .rolechip{display:none} } @media (prefers-reduced-motion:reduce){ .shell-staff>.shell-side,.nav-scrim,.nav-collapse .ic{transition:none} } /* ============================================================ SHARED PAGE HEADER Title + subtitle + primary actions. Works in both densities: consumer pages get the big clamp, .density-ops tightens it to the ops scale used across staff boards. ============================================================ */ .page-head{display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px 16px; margin:2px 0 clamp(16px,2.5vw,22px)} .page-head .titles{min-width:0} .page-head h1{margin:0; font-size:clamp(23px,3.4vw,29px); font-weight:800; letter-spacing:-.03em; line-height:1.15} .page-head .sub{color:var(--ink-2); font-size:var(--fs-sm); font-weight:600; margin-top:3px} .page-head .actions{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap} .density-ops .page-head h1{font-size:22px; letter-spacing:-.025em} .density-ops .page-head .sub{color:var(--ink-3); font-size:12px; margin-top:2px} @media (max-width:640px){ .page-head{flex-direction:column; align-items:stretch} .page-head .actions{margin-left:0} } /* ============================================================ CONTENT FRAME The responsive content container both shells share. Default is the portal canvas; .reading narrows for consumer reading flows; .ops is the dense staff variant used inside .shell-main. Wide artifacts still go inside their own .scroll-x. ============================================================ */ .frame{width:100%; max-width:1200px; margin:0 auto; padding:clamp(18px,3.5vw,30px) clamp(14px,3.5vw,24px) clamp(48px,8vw,84px)} .frame.reading{max-width:820px} .frame.ops{max-width:1440px; margin:0; padding:14px clamp(12px,2vw,22px) 40px}