/* ib-rail.css — universal desktop protocol rail. * * A persistent left sidebar shown on every surface EXCEPT guides (and /account, * which keeps its own in-page rail, plus /admin and /embed). Desktop-only: it only * appears at >=1200px and reserves a 280px left gutter by insetting #ib-app, so the * rail sits full-height on the left with the nav + page content to its right. * * Built + populated by ib-rail.js (framework-agnostic, loaded via ib-nav.js so it * rides along on both Next.js routes and the static calculator/home pages). */ /* Hidden by default; only reveal + reserve space on desktop when the rail is "on" (ib-rail.js adds .ib-rail-on to for non-excluded paths). */ .ib-uni-rail { display: none; } @media (min-width: 1200px) { html.ib-rail-on .ib-uni-rail { display: flex; } /* Reserve the gutter on (present on every surface). #ib-app only exists on Next routes — static calculator/home pages have no such wrapper, so padding it left the fixed rail overlapping their content. Fixed nodes (backdrop, the rail itself, chat FAB) ignore body padding, so only the page content shifts right. */ html.ib-rail-on body { padding-left: 280px; } /* The calculator SPA (app.js) renders its own desktop protocol rail (aside.ib-proto-rail); the universal rail replaces it, so hide it to avoid a double rail. Its cards are still portaled into the mobile nav drawer. */ html.ib-rail-on .ib-proto-rail { display: none !important; } } .ib-uni-rail { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 80; /* under the sticky nav (100) + drawers, over content */ flex-direction: column; gap: 18px; padding: 20px 18px 24px; /* profile sits at the top, beside the nav bar */ overflow-y: auto; overflow-x: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; border-right: 1px solid rgba(255,255,255,0.06); background: rgba(14,14,16,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; } .ib-uni-rail::-webkit-scrollbar { width: 7px; } .ib-uni-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; } .ib-uni-rail::-webkit-scrollbar-track { background: transparent; } /* profile header */ .ib-uni-prof { display: flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; } .ib-uni-prof-av { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, #2a3f3d, #16201f); border: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; color: #0fbcad; font-weight: 800; font-size: 15px; } .ib-uni-prof-av img { width: 100%; height: 100%; object-fit: cover; display: block; } .ib-uni-prof-meta { min-width: 0; display: flex; flex-direction: column; } .ib-uni-prof-name { display: block; font-weight: 700; font-size: 15px; color: #f0f0f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ib-uni-prof-sub { display: block; font-size: 12px; color: rgba(240,240,242,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* section eyebrow */ .ib-uni-eyebrow { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(240,240,242,0.25); margin-bottom: 11px; } .ib-uni-list { display: flex; flex-direction: column; gap: 10px; } /* frosted-glass protocol card */ .ib-uni-card { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 13px; border-radius: 13px; cursor: pointer; overflow: hidden; text-decoration: none; background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.035)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.13); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 18px rgba(0,0,0,0.3); transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease; } .ib-uni-card:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.22); } .ib-uni-glow { position: absolute; left: -26px; top: 50%; transform: translateY(-50%); width: 74px; height: 74px; border-radius: 50%; opacity: 0.16; filter: blur(22px); pointer-events: none; } /* Faint full-card wash of the protocol's accent colour, over the glass surface. */ .ib-uni-tint { position: absolute; inset: 0; pointer-events: none; } .ib-uni-ic { position: relative; width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); } .ib-uni-ic-dot { width: 9px; height: 9px; border-radius: 50%; } .ib-uni-card-body { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .ib-uni-card-label { font-size: 13.5px; font-weight: 600; color: #f0f0f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ib-uni-card-meta { font-size: 11px; color: rgba(240,240,242,0.5); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ib-uni-card-chev { position: relative; font-size: 15px; color: rgba(240,240,242,0.25); flex-shrink: 0; } /* cycle-plotter tick box — coloured to the card's accent (--cc); glows when on */ .ib-uni-check { position: relative; width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; border: 1.5px solid var(--cc, #0fbcad); background: transparent; transition: background 0.15s ease, box-shadow 0.15s ease; } .ib-uni-check.on { background: var(--cc, #0fbcad); box-shadow: 0 0 11px -1px var(--cc, #0fbcad); } .ib-uni-check.on::after { content: ''; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 9px; border: solid #0e0e10; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* + New protocol CTA */ .ib-uni-cta { display: block; margin-top: 12px; font-size: 12px; color: #0fbcad; text-decoration: none; background: linear-gradient(140deg, rgba(15,188,173,0.05), rgba(15,188,173,0.015)); border: 1px solid rgba(15,188,173,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); border-radius: 8px; padding: 9px 12px; text-align: center; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .ib-uni-cta:hover { background: linear-gradient(140deg, rgba(15,188,173,0.1), rgba(15,188,173,0.04)); border-color: rgba(15,188,173,0.4); } /* empty / signed-out states */ .ib-uni-empty { font-size: 12px; color: rgba(240,240,242,0.5); line-height: 1.5; margin-bottom: 12px; } .ib-uni-signin-card { display: block; text-decoration: none; border-radius: 13px; padding: 16px 15px; background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.035)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.13); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 18px rgba(0,0,0,0.3); } .ib-uni-signin-title { font-size: 14px; font-weight: 700; color: #f0f0f2; margin-bottom: 5px; } .ib-uni-signin-sub { font-size: 11.5px; color: rgba(240,240,242,0.5); line-height: 1.5; margin-bottom: 12px; } .ib-uni-signin-btn { display: inline-block; font-size: 12px; font-weight: 600; color: #0fbcad; background: linear-gradient(140deg, rgba(15,188,173,0.14), rgba(15,188,173,0.06)); border: 1px solid rgba(15,188,173,0.4); border-radius: 8px; padding: 8px 14px; } /* ── light theme ── */ [data-theme="light"] .ib-uni-rail { background: rgba(244,244,246,0.7); border-right-color: rgba(0,0,0,0.08); } [data-theme="light"] .ib-uni-prof-name { color: #1a1a1e; } [data-theme="light"] .ib-uni-prof-sub { color: rgba(20,20,28,0.55); } [data-theme="light"] .ib-uni-eyebrow { color: rgba(20,20,28,0.35); } [data-theme="light"] .ib-uni-card { background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.45)); border-color: rgba(0,0,0,0.1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 6px 18px rgba(0,0,0,0.08); } [data-theme="light"] .ib-uni-card:hover { border-color: rgba(0,0,0,0.18); } [data-theme="light"] .ib-uni-card-label { color: #1a1a1e; } [data-theme="light"] .ib-uni-card-meta { color: rgba(20,20,28,0.55); } [data-theme="light"] .ib-uni-card-chev { color: rgba(20,20,28,0.3); } [data-theme="light"] .ib-uni-empty, [data-theme="light"] .ib-uni-signin-sub { color: rgba(20,20,28,0.55); } [data-theme="light"] .ib-uni-signin-card { background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.45)); border-color: rgba(0,0,0,0.1); } [data-theme="light"] .ib-uni-signin-title { color: #1a1a1e; }