/* GradeOS — Enterprise app shell A persistent left nav rail + top bar injected by gradeos-app-shell.js. Theme-aware: dark by default, follows html.gx-light for the white-glass app. Additive: include the css + js; the shell offsets content and hides the legacy floating nav strip so there is exactly one navigation. */ :root{ --shell-rail: 244px; --shell-top: 56px; --shell-bg: #0b0b0d; --shell-panel: #101014; --shell-line: rgba(255,255,255,.07); --shell-line-2: rgba(255,255,255,.12); --shell-text: #e8e8ea; --shell-dim: #9a9aa3; --shell-faint: #63636d; --shell-accent: #c8ff00; --shell-accent-ink: #0a0a0b; --shell-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } html.gx-light{ --shell-bg: #f4f6f1; --shell-panel: #ffffff; --shell-line: rgba(10,12,10,.09); --shell-line-2: rgba(10,12,10,.16); --shell-text: #14170f; --shell-dim: #5a5d52; --shell-faint: #8a8d80; } body.gx-shelled{ padding-left: var(--shell-rail) !important; padding-top: var(--shell-top) !important; } /* legacy floating nav strip + kchip are replaced by the shell */ body.gx-shelled .gx-navstrip, body.gx-shelled .gx-navclu, body.gx-shelled #gxNavStrip, body.gx-shelled .gx-kchip{ display:none !important; } /* ── left rail ── */ .gxs-rail{position:fixed !important;left:0 !important;top:0 !important;bottom:0 !important;width:var(--shell-rail);z-index:9000; background:var(--shell-panel);border-right:1px solid var(--shell-line); display:flex;flex-direction:column;font-family:'Geist',-apple-system,system-ui,sans-serif} .gxs-brand{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--shell-line)} .gxs-brand svg{width:26px;height:26px;flex:0 0 auto} .gxs-brand b{font-size:15px;font-weight:800;letter-spacing:.04em;color:var(--shell-text);font-family:var(--shell-mono)} .gxs-brand b i{color:var(--shell-accent);font-style:normal} .gxs-ws{margin:12px 12px 6px;padding:9px 11px;border:1px solid var(--shell-line);border-radius:9px; display:flex;align-items:center;gap:9px;cursor:default} .gxs-ws .dot{width:7px;height:7px;border-radius:50%;background:var(--shell-accent)} .gxs-ws .n{font-size:11.5px;color:var(--shell-text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gxs-ws .n small{display:block;color:var(--shell-faint);font-weight:400;font-size:10px;letter-spacing:.05em;text-transform:uppercase;margin-top:1px} .gxs-nav{position:static !important;inset:auto !important;flex:1;overflow-y:auto;padding:8px 10px 16px;width:auto;height:auto;background:transparent;box-shadow:none;z-index:auto !important} .gxs-group{margin-top:14px} .gxs-group .lbl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-faint);padding:6px 10px 4px} .gxs-link{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;text-decoration:none; color:var(--shell-dim);font-size:13px;font-family:'Geist',-apple-system,system-ui,sans-serif;letter-spacing:0;position:relative;transition:background .12s ease,color .12s ease} .gxs-link svg{width:15px;height:15px;flex:0 0 auto;opacity:.85} .gxs-link:hover{background:var(--shell-line);color:var(--shell-text)} .gxs-link.on{background:var(--shell-line-2);color:var(--shell-text);font-weight:600} .gxs-link.on::before{content:'';position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--shell-accent)} .gxs-link .badge{margin-left:auto;font-size:9.5px;background:var(--shell-accent);color:var(--shell-accent-ink); border-radius:99px;padding:1px 7px;font-weight:700} .gxs-foot{border-top:1px solid var(--shell-line);padding:12px} /* GX/E v2 — system-status strip (healthz-backed; also styled in gradeos-enterprise.css) */ .gxs-sys{display:flex;align-items:center;gap:8px;padding:0 8px 10px; font:600 8.5px var(--shell-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--shell-faint)} .gxs-sys .d{width:6px;height:6px;border-radius:50%;background:var(--shell-faint);flex:none} .gxs-sys.ok{color:#6dde8f}.gxs-sys.ok .d{background:#6dde8f;box-shadow:0 0 6px #6dde8f} .gxs-sys.warn{color:#ffb547}.gxs-sys.warn .d{background:#ffb547;box-shadow:0 0 6px #ffb547} .gxs-sys.err{color:#ff5a5a}.gxs-sys.err .d{background:#ff5a5a;box-shadow:0 0 6px #ff5a5a} .gxs-user{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;cursor:pointer;text-decoration:none} .gxs-user:hover{background:var(--shell-line)} .gxs-user .av{width:28px;height:28px;border-radius:7px;background:var(--shell-accent);color:var(--shell-accent-ink); display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:0 0 auto} .gxs-user .who{overflow:hidden} .gxs-user .who b{display:block;font-size:11.5px;color:var(--shell-text);font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .gxs-user .who small{color:var(--shell-faint);font-size:9.5px} /* ── top bar ── */ .gxs-top{position:fixed !important;top:0 !important;left:var(--shell-rail) !important;right:0 !important;height:var(--shell-top);z-index:8999; background:color-mix(in srgb, var(--shell-panel) 88%, transparent);backdrop-filter:blur(12px); border-bottom:1px solid var(--shell-line);display:flex;align-items:center;gap:16px;padding:0 22px; font-family:'Geist',-apple-system,system-ui,sans-serif} .gxs-scrim{display:none;position:fixed;inset:var(--shell-top) 0 0;z-index:8998;border:0;background:rgba(4,7,8,.72);padding:0;cursor:pointer} .gxs-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--shell-dim)} .gxs-crumb b{color:var(--shell-text);font-weight:600} .gxs-crumb .sep{color:var(--shell-faint)} .gxs-search{margin-left:8px;flex:1;max-width:420px;display:flex;align-items:center;gap:9px; background:color-mix(in srgb,var(--shell-bg) 85%,transparent);border:1px solid var(--shell-line);border-radius:9px;padding:7px 12px;cursor:text;color:var(--shell-faint)} .gxs-search:hover{border-color:var(--shell-line-2)} .gxs-search svg{width:14px;height:14px} .gxs-search span{font-size:12.5px;color:var(--shell-faint)} .gxs-search kbd{margin-left:auto;font-family:var(--shell-mono);font-size:10px;color:var(--shell-dim); border:1px solid var(--shell-line-2);border-radius:5px;padding:1px 6px} .gxs-top-right{margin-left:auto;display:flex;align-items:center;gap:6px} .gxs-ibtn{width:34px;height:34px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--shell-dim); display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative} .gxs-ibtn:hover{background:var(--shell-line);color:var(--shell-text)} .gxs-link:focus-visible,.gxs-user:focus-visible,.gxs-search:focus-visible,.gxs-ibtn:focus-visible{ outline:2px solid var(--shell-accent);outline-offset:2px } .gxs-ibtn svg{width:16px;height:16px} .gxs-ibtn .ping{position:absolute;top:7px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--shell-accent)} .gxs-live{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;letter-spacing:0;color:var(--shell-dim); border:1px solid var(--shell-line);border-radius:99px;padding:5px 11px;text-transform:none} .gxs-live .d{width:6px;height:6px;border-radius:50%;background:var(--shell-accent);animation:gxsPulse 2s ease-in-out infinite} @keyframes gxsPulse{0%,100%{opacity:1}50%{opacity:.3}} @media(max-width:1000px){ :root{--shell-rail:0px} /* --shell-rail collapses to 0 for the body/topbar offset, so the rail MUST get an explicit off-canvas width here — width:var(--shell-rail) would be 0px and translateX(-100%) of 0 leaves a visible sliver (brand text + nav icons overflowing down the left edge). */ .gxs-rail{width:280px !important;transform:translateX(-102%);transition:transform .2s; box-shadow:none;visibility:hidden;transition:transform .2s, visibility 0s .2s} .gxs-rail.open{transform:none;visibility:visible;box-shadow:0 0 60px rgba(0,0,0,.5); transition:transform .2s, visibility 0s 0s} .gxs-scrim.open{display:block} body.gxs-nav-open{overflow:hidden} .gxs-top{left:0} body.gx-shelled{padding-left:0 !important} .gxs-burger{display:flex !important} } /* phone widths: the top bar must actually fit — shrink chrome, drop extras */ @media(max-width:640px){ .gxs-top{gap:8px;padding:0 10px} .gxs-crumb{min-width:0} .gxs-crumb b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw} .gxs-search{flex:1;min-width:0;max-width:none;padding:7px 10px} .gxs-search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gxs-search kbd{display:none} .gxs-live{display:none} .gxs-top-right{gap:2px} } .gxs-burger{display:none} /* ═══════════════════════════════════════════════════════════════ Legacy chrome suppression + enterprise animation layer ═══════════════════════════════════════════════════════════════ */ body.gx-shelled #gxNavTrigger, body.gx-shelled #gxTopBar, body.gx-shelled header.nav, body.gx-shelled .gxSyncStrip{ display:none !important; } /* — page-enter: content settles in once the shell is mounted — */ @keyframes gxsRise{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } @keyframes gxsFade{ from{opacity:0} to{opacity:1} } body.gx-shelled.gxs-ready .wrap, body.gx-shelled.gxs-ready main, body.gx-shelled.gxs-ready > section{ animation:gxsRise .5s cubic-bezier(.16,1,.3,1) both; } /* — rail entrance + staggered nav links — */ .gxs-rail{ animation:gxsFade .4s ease both; } .gxs-link{ animation:gxsRise .4s cubic-bezier(.16,1,.3,1) both; } .gxs-group:nth-child(1) .gxs-link:nth-child(2){animation-delay:.02s} .gxs-group:nth-child(1) .gxs-link:nth-child(3){animation-delay:.04s} .gxs-group:nth-child(1) .gxs-link:nth-child(4){animation-delay:.06s} .gxs-group:nth-child(2) .gxs-link{animation-delay:.08s} .gxs-group:nth-child(3) .gxs-link{animation-delay:.10s} .gxs-group:nth-child(4) .gxs-link{animation-delay:.12s} .gxs-link svg{ transition:transform .18s cubic-bezier(.16,1,.3,1); } .gxs-link:hover svg{ transform:translateX(1px) scale(1.06); } .gxs-link.on svg{ color:var(--shell-accent); } /* — route transition: quick fade veil on internal nav — */ #gxsVeil{position:fixed;inset:0;z-index:9500;background:var(--shell-bg);opacity:0;pointer-events:none; transition:opacity .18s ease} #gxsVeil.on{opacity:1;pointer-events:all} /* — [data-anim] reveal utility for page content — */ [data-anim]{opacity:0} body.gxs-ready [data-anim]{animation:gxsRise .55s cubic-bezier(.16,1,.3,1) both} body.gxs-ready [data-anim="1"]{animation-delay:.04s} body.gxs-ready [data-anim="2"]{animation-delay:.08s} body.gxs-ready [data-anim="3"]{animation-delay:.12s} body.gxs-ready [data-anim="4"]{animation-delay:.16s} body.gxs-ready [data-anim="5"]{animation-delay:.20s} /* — skeleton shimmer — */ .gxs-skel{position:relative;overflow:hidden;background:var(--shell-line);border-radius:8px;color:transparent!important} .gxs-skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--shell-accent) 14%,transparent),transparent); animation:gxsShimmer 1.3s infinite} @keyframes gxsShimmer{100%{transform:translateX(100%)}} /* — count-up numbers get tabular figures so they don't jitter — */ .gxs-count{font-variant-numeric:tabular-nums} /* — top-bar entrance — */ .gxs-top{ animation:gxsFade .45s .05s ease both; } @media (prefers-reduced-motion: reduce){ body.gx-shelled.gxs-ready .wrap, body.gx-shelled.gxs-ready main, body.gx-shelled.gxs-ready > section, .gxs-rail, .gxs-link, .gxs-top, body.gxs-ready [data-anim]{ animation:none !important; opacity:1 !important; } [data-anim]{opacity:1} #gxsVeil{display:none} } /* Customer workspace finish — quiet industrial chrome, no decorative motion. */ :root{ --shell-bg:#0d1214; --shell-panel:#101517; --shell-line:rgba(113,128,133,.22); --shell-line-2:rgba(154,154,163,.28); --shell-faint:#718085; } .gxs-ws,.gxs-link,.gxs-user,.gxs-user .av,.gxs-search,.gxs-search kbd, .gxs-ibtn,.gxs-live,.gxs-skel{border-radius:2px} .gxs-rail,.gxs-top,.gxs-link{animation:none!important} .gxs-link,.gxs-link svg,.gxs-ibtn,#gxsVeil{transition:none!important} .gxs-link:hover svg{transform:none} .gxs-live .d{animation:none} .gxs-sys.ok .d,.gxs-sys.warn .d,.gxs-sys.err .d{box-shadow:none} .gxs-link.on::before{border-radius:0;width:2px} @media(max-width:640px){ .gxs-top{height:56px} .gxs-ibtn{width:44px;height:44px} .gxs-search{display:none} .gxs-crumb{flex:1} .gxs-crumb b{max-width:50vw} }