/** * Firm.CompanyName 3.0 — app shell layout (left nav + sidebar footer + scrollable main). * Brand colors come from tokens-base.css defaults, overridden by 3.0-firm-theme.js from Firm.*. */ :root { --fe-sidebar-width: 260px; /** Narrow rail width when the user collapses the sidebar (icons + partner marks only). */ --fe-sidebar-width-collapsed: 72px; --fe-header-height: 60px; --fe-nav-bg: var(--bg-sidebar); --fe-nav-border: var(--bg-gray-100); --fe-main-bg: var(--bg-gray-50); } html.fe30-app-html, body.fe30-app-body { height: 100%; margin: 0; } body.fe30-app-body { overflow: hidden; font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink-primary); background: var(--fe-main-bg); } .fe30-root { display: flex; height: 100vh; width: 100%; overflow: hidden; } /* ---- Sidebar ---- */ .fe30-sidebar { width: var(--fe-sidebar-width); min-width: var(--fe-sidebar-width); flex-shrink: 0; background: var(--fe-nav-bg); border-right: 1px solid var(--fe-nav-border); display: flex; flex-direction: column; z-index: 20; transition: width 0.22s ease, min-width 0.22s ease; } /** * Collapsed primary rail — class on `` (applied early by fe30-sidebar-collapse-boot.js). * Inherits across `/3.0/*.html` shells via localStorage `fe30.sidebarCollapsed`. */ html.fe30-sidebar-collapsed { --fe-sidebar-width: var(--fe-sidebar-width-collapsed); } /** * Brand strip + collapse control — AdvisorCRM `leftnav` / Keen `app-sidebar-toggle` pattern. * WHY: Same mental model as AdvisorCRM Express (round control on the rail edge, icon-only). * PROMPT: Align with AdvisorCRM toggle; then move control below the brand header strip (seam with nav). * DATE: 2026-05-08 * WHAT: Toggle uses `top: 100%` + `translate(-50%,-50%)` so its center sits on the bottom edge of * `.fe30-sidebar-brand-wrap` (below the logo row), not mid-header (~15px from viewport top). * ASSUMPTIONS: No separate toolbar row; `aria-label` carries the action for assistive tech (no visible label span). * STACKING: `z-index` here so the collapse control (half outside the brand strip) paints above `.fe30-nav`, which * follows this block in the DOM and would otherwise receive paint/hit-testing on the overlap. */ .fe30-sidebar-brand-wrap { position: relative; z-index: 10; flex-shrink: 0; border-bottom: 1px solid var(--fe-nav-border); overflow: visible; } .fe30-sidebar-brand-wrap .fe30-sidebar-brand { padding-right: 22px; } .fe30-sidebar-collapse-toggle { position: absolute; /* Positioned 70px from the top of the brand wrap so the 30×30 control sits just below the brand strip border */ top: 70px; left: 100%; /* High value so the control stays above nav rows, hero chrome in the main column, and other shell layers. */ z-index: 100; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0; padding: 0; box-sizing: border-box; border: 1px solid var(--fe-nav-border); border-radius: 50%; background: var(--fe-nav-bg); color: var(--gray-600); cursor: pointer; transform: translate(-50%, -50%); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); } .fe30-sidebar-collapse-toggle:hover { color: var(--dark-navy); border-color: var(--gray-300); background: var(--bg-gray-100); } .fe30-sidebar-collapse-toggle:focus-visible { outline: none; box-shadow: var(--fe-focus-ring, 0 0 0 3px rgba(251, 106, 24, 0.25)); } .fe30-sidebar-collapse-toggle-icon { display: flex; align-items: center; justify-content: center; line-height: 0; } .fe30-sidebar-collapse-toggle-icon svg { display: block; transition: transform 0.2s ease; } html.fe30-sidebar-collapsed .fe30-sidebar-collapse-toggle-icon svg { transform: rotate(180deg); } html.fe30-sidebar-collapsed .fe30-sidebar-brand-wrap .fe30-sidebar-brand { padding-right: 8px; } html.fe30-sidebar-collapsed .fe30-sidebar-brand { justify-content: center; padding-left: 8px; padding-right: 8px; } html.fe30-sidebar-collapsed .fe30-sidebar-brand-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } html.fe30-sidebar-collapsed .fe30-sidebar-brand-logo { max-height: 36px; flex: 0 1 auto; } html.fe30-sidebar-collapsed .fe30-nav-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } html.fe30-sidebar-collapsed .fe30-sidebar-context { display: none; } html.fe30-sidebar-collapsed .fe30-nav-link, html.fe30-sidebar-collapsed .fe30-nav-link--logout { justify-content: center; padding-left: 10px; padding-right: 10px; gap: 0; } html.fe30-sidebar-collapsed .fe30-nav-link img.fe30-nav-partner-logo--wide { max-width: 44px; } html.fe30-sidebar-collapsed .fe30-nav { padding-left: 8px; padding-right: 8px; } .fe30-sidebar-brand { height: var(--fe-header-height); box-sizing: border-box; padding: 0 12px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-decoration: none; color: inherit; min-width: 0; } /* Firm logos are often wide (MainLogo) or a mark (LogoAlone); never lock to 28×28. */ .fe30-sidebar-brand-logo { display: block; max-height: 44px; max-width: 100%; width: auto; height: auto; object-fit: contain; object-position: left center; flex: 1 1 auto; min-width: 0; } /* Compact mark when the brand row uses only LogoAlone (theme adds this class). */ .fe30-sidebar-brand--mark-only .fe30-sidebar-brand-logo { max-height: 36px; max-width: 44px; flex: 0 0 auto; } .fe30-sidebar-brand-text { font-weight: 700; font-size: 15px; letter-spacing: -0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dark-navy); } /* Shown only when firm did not supply a usable logo URL (see 3.0-firm-theme.js). */ .fe30-sidebar-brand-fallback { flex: 1 1 auto; min-width: 0; } .fe30-sidebar-brand--has-logo .fe30-sidebar-brand-fallback { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /** * When the firm image is the only visible brand (wordmark is visually hidden), center the logo * in the sidebar header strip instead of flush-left. */ .fe30-sidebar-brand--has-logo { position: relative; justify-content: center; } .fe30-sidebar-brand--has-logo .fe30-sidebar-brand-logo { flex: 0 1 auto; object-position: center center; } /* Keep compact mark sizing when theme adds both --has-logo and --mark-only (higher specificity than rule above). */ .fe30-sidebar-brand--has-logo.fe30-sidebar-brand--mark-only .fe30-sidebar-brand-logo { flex: 0 0 auto; } /* Primary nav — structure from IAMS wireframe `.app-nav .navitems`; vertical layout + production tokens. */ .fe30-nav { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 14px 12px 16px; } .fe30-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .fe30-nav-footer { flex-shrink: 0; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--fe-nav-border); } .fe30-sidebar-context { padding: 0 12px 12px; } .fe30-sidebar-tenant { font-size: var(--text-xs); font-weight: 600; color: var(--gray-500); letter-spacing: 0.02em; line-height: var(--leading-snug); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fe30-sidebar-user { margin-top: 4px; font-size: var(--text-sm); font-weight: 500; color: var(--dark-navy); line-height: var(--leading-snug); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fe30-nav-link--logout { width: 100%; box-sizing: border-box; margin: 0; border: none; background: transparent; font: inherit; text-align: left; cursor: pointer; color: var(--gray-600); } .fe30-nav-link--logout:hover { background: var(--bg-gray-100); color: var(--dark-navy); } .fe30-nav-link--logout:focus-visible { outline: none; box-shadow: var(--fe-focus-ring, 0 0 0 3px rgba(251, 106, 24, 0.25)); } .fe30-nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--gray-600); text-decoration: none; transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); } .fe30-nav-link img { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.88; } .fe30-nav-logout-icon { flex-shrink: 0; opacity: 0.88; } /** * Custodian / partner marks (remote URLs; same sources as AdvisorCRM integrations UI). * Wide Schwab artwork needs a larger cap than the 18px square icons above. * NOTE: Must beat `.fe30-nav-link img { width: 18px }` for the wide logo. */ .fe30-nav-link img.fe30-nav-partner-logo { width: 18px; height: 18px; object-fit: contain; } .fe30-nav-link img.fe30-nav-partner-logo--wide { width: auto; height: 18px; max-width: 72px; } .fe30-nav-link:hover { background: var(--bg-gray-100); color: var(--dark-navy); } /* Active item — soft brand pill (no inset bar; reads calmer next to content). */ .fe30-nav-link.is-active { color: var(--dark-navy); font-weight: 600; background: var(--brand-orange-light); border-radius: var(--radius-pill); box-shadow: none; } .fe30-nav-link.is-active img { opacity: 1; } /* ---- Main column (top bar + scrollable content) ---- */ .fe30-main-column { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .fe30-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Beta banner — dismissible strip at the top of the header. */ .fe30-beta-banner { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 16px; margin-top: 8px; box-sizing: border-box; font-size: 13px; font-weight: 500; color: var(--dark-navy, #202f3d); background: var(--brand-orange-light, #fff4eb); border-bottom: 1px solid rgba(251, 106, 24, 0.18); border-radius: var(--radius-sm, 6px); } .fe30-beta-banner-icon { flex-shrink: 0; color: var(--brand-orange, #fb6a18); } .fe30-beta-banner span { flex: 1 1 auto; line-height: 1.4; } .fe30-beta-banner-close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: transparent; font-size: 16px; font-weight: 700; color: var(--gray-500, #6b7280); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .fe30-beta-banner-close:hover { background: rgba(251, 106, 24, 0.12); color: var(--dark-navy, #202f3d); } .fe30-beta-banner[hidden] { display: none !important; } /* Top bar — vertical stack: optional banner on top, search + user row below. */ .fe30-topbar { flex-shrink: 0; display: flex; flex-direction: column; box-sizing: border-box; padding: 0 24px; background: var(--surface-translucent); -webkit-backdrop-filter: var(--backdrop-saturate-blur); backdrop-filter: var(--backdrop-saturate-blur); border-bottom: 1px solid transparent; box-shadow: none; z-index: 30; transition: border-color var(--duration-base) var(--ease-standard); } .fe30-topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--fe-header-height); } .fe30-main-column.is-scrolled .fe30-topbar { border-bottom-color: var(--hairline); } .fe30-topbar-search-wrap { flex: 1 1 auto; max-width: 560px; min-width: 0; position: relative; } .fe30-topbar-search { position: relative; display: flex; align-items: center; width: 100%; } .fe30-search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: 320px; overflow-y: auto; margin: 0; padding: 8px 0; list-style: none; background: var(--bg-white); border: 1px solid var(--fe-nav-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 50; } .fe30-search-results li { padding: 10px 14px; font-size: 14px; color: var(--ink-primary); cursor: default; border-bottom: 1px solid var(--bg-gray-100); } .fe30-search-results li:last-child { border-bottom: none; } .fe30-search-results .fe30-search-results-meta { display: block; margin-top: 4px; font-size: 12px; color: var(--gray-500); } .fe30-search-results .fe30-search-results-empty { padding: 12px 14px; font-size: 13px; color: var(--gray-500); } .fe30-search-results ul { margin: 0; padding: 0; list-style: none; } .fe30-search-results li.fe30-search-results-clickable { cursor: pointer; } .fe30-search-results li.fe30-search-results-clickable:hover { background: var(--bg-gray-50); } .fe30-search-results li.fe30-search-results-clickable a { color: inherit; text-decoration: none; display: block; } .fe30-search-results li.fe30-search-results-closed { opacity: 0.6; } .fe30-search-results .fe30-search-results-title { display: block; font-weight: 500; } .fe30-topbar-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: 0.55; pointer-events: none; } .fe30-topbar-search-input { width: 100%; box-sizing: border-box; padding: 10px 16px 10px 42px; border: 1px solid var(--bg-gray-100); border-radius: var(--radius-md); background: var(--bg-gray-50); font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink-primary); transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); } .fe30-topbar-search-input::placeholder { color: var(--gray-500); } .fe30-topbar-search-input:focus { outline: none; border-color: var(--brand-orange); box-shadow: var(--fe-focus-ring, 0 0 0 3px rgba(251, 106, 24, 0.25)); background: var(--bg-white); } .fe30-topbar-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .fe30-user-menu { position: relative; } .fe30-user-menu-trigger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; background: transparent; cursor: pointer; transition: background var(--duration-base) var(--ease-standard); } .fe30-user-menu-trigger:hover, .fe30-user-menu-trigger:focus-visible { background: var(--bg-gray-100); outline: none; } .fe30-user-menu-trigger:focus-visible { box-shadow: var(--fe-focus-ring, 0 0 0 3px rgba(251, 106, 24, 0.25)); } /* Match express `.user-avatar`: 40px circle, initials or photo */ .fe30-user-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--gray-300); position: relative; } .fe30-user-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .fe30-user-avatar-img--hidden { display: none; } .fe30-user-initials { position: relative; z-index: 1; font-size: 0.9rem; font-weight: 700; line-height: 1; text-transform: uppercase; color: #fff; letter-spacing: 0.02em; } .fe30-user-avatar--has-photo .fe30-user-initials { display: none; } .fe30-user-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 260px; padding: 8px 0; background: var(--bg-white); border: 1px solid var(--bg-gray-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .fe30-user-menu-panel[hidden] { display: none !important; } .fe30-user-menu-info { padding: 12px 16px; } .fe30-user-menu-name { font-weight: 600; font-size: var(--text-md); color: var(--dark-navy); } .fe30-user-menu-email { margin-top: 4px; font-size: var(--text-sm); color: var(--gray-600); word-break: break-all; } .fe30-user-menu-sep { height: 1px; margin: 8px 0; background: var(--bg-gray-100); border: 0; } .fe30-user-menu-item { display: block; width: 100%; box-sizing: border-box; padding: 10px 16px; border: none; background: transparent; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--gray-700); text-align: left; cursor: pointer; } .fe30-user-menu-item:hover, .fe30-user-menu-item:focus-visible { background: var(--bg-gray-50); color: var(--dark-navy); outline: none; } /** * Buttons — selectors prefixed with `body.fe30-app-body` to outweigh Keen's * `style.bundle.css` (loaded after our shell CSS on PM/Trove pages) and any * stray `