/* Outliyr Member Sidebar. Toggled visible by [data-outliyr-member="true"] on . */ .outliyr-member-sidebar, .oms-mobile-toggle { display: none; } /* Logged-in members get the rail. */ [data-outliyr-member="true"] .outliyr-member-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; background: var(--oms-bg, #ffffff); border-right: 1px solid var(--oms-border, #e7e7e7); padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; /* desktop floor per brand visual minimums */ box-sizing: border-box; } [data-outliyr-member="true"] .outliyr-member-sidebar .oms-logo { display: block; padding: 4px 8px 16px; } [data-outliyr-member="true"] .outliyr-member-sidebar .oms-logo svg { width: 32px; height: 32px; display: block; } [data-outliyr-member="true"] .outliyr-member-sidebar .oms-nav { display: flex; flex-direction: column; gap: 2px; } [data-outliyr-member="true"] .outliyr-member-sidebar .oms-link { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 4px; /* brand visual minimum: 4-5px max */ color: var(--oms-text, #1a1a1a); text-decoration: none; font-size: 14px; line-height: 1.2; } [data-outliyr-member="true"] .outliyr-member-sidebar .oms-link:hover { background: var(--oms-hover-bg, rgba(0, 0, 0, 0.05)); } [data-outliyr-member="true"] .outliyr-member-sidebar .oms-link.is-active { background: var(--oms-active-bg, #1f6feb); color: var(--oms-active-text, #ffffff); } [data-outliyr-member="true"] .outliyr-member-sidebar .oms-icon { width: 18px; height: 18px; flex: 0 0 18px; display: inline-flex; align-items: center; justify-content: center; } [data-outliyr-member="true"] .outliyr-member-sidebar .oms-icon svg { width: 18px; height: 18px; display: block; } [data-outliyr-member="true"] .outliyr-member-sidebar .oms-ask { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 4px; background: var(--oms-ask-bg, #1f6feb); color: #ffffff; border: 0; cursor: pointer; font-size: 14px; font-family: inherit; text-align: left; } [data-outliyr-member="true"] .outliyr-member-sidebar .oms-ask:hover { background: var(--oms-ask-hover-bg, #1a5fcb); } /* Push the page content right so the sidebar doesn't overlap. */ [data-outliyr-member="true"] body { padding-left: 240px; } /* Tablet: collapse to icon-only rail. */ @media (max-width: 1024px) { [data-outliyr-member="true"] .outliyr-member-sidebar { width: 64px; padding: 16px 8px; } [data-outliyr-member="true"] .outliyr-member-sidebar .oms-label { display: none; } [data-outliyr-member="true"] .outliyr-member-sidebar .oms-link, [data-outliyr-member="true"] .outliyr-member-sidebar .oms-ask { justify-content: center; padding: 10px 0; } [data-outliyr-member="true"] body { padding-left: 64px; } } /* Mobile: hide rail by default, slide in as overlay. */ @media (max-width: 640px) { [data-outliyr-member="true"] .outliyr-member-sidebar { width: 100%; max-width: 280px; padding: 16px 12px; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12); } [data-outliyr-member="true"] .outliyr-member-sidebar.is-open { transform: translateX(0); } [data-outliyr-member="true"] .outliyr-member-sidebar .oms-label { display: inline; } [data-outliyr-member="true"] .outliyr-member-sidebar .oms-link, [data-outliyr-member="true"] .outliyr-member-sidebar .oms-ask { justify-content: flex-start; padding: 8px 12px; font-size: 13px; /* mobile floor per brand visual minimums */ } [data-outliyr-member="true"] body { padding-left: 0; } /* Floating top-left toggle pill that opens the drawer. */ [data-outliyr-member="true"] .oms-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 12px; left: 12px; z-index: 10000; padding: 8px 14px; font-size: 13px; font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--oms-ask-bg, #1f6feb); color: #ffffff; border: 0; border-radius: 4px; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); } }