/* ============================================================ Desktop top bar — sticky chrome above .main (≥1024px only) ------------------------------------------------------------ Mobile (≤1023px) keeps using the floating pill header from pill-header.css and the viobar bottom nav from nav.css. The `.fv-topbar` element is rendered in the DOM but is hidden by the media query below, so layout for small viewports is byte-for-byte unchanged. Tokens come from :root in base.html — no hex codes here. ============================================================ */ .fv-topbar { position: sticky; top: 0; z-index: 90; /* below sidebar (200), above content */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 520px) auto; align-items: center; gap: 1rem; height: 64px; /* Flush with the sidebar's right edge so the two pieces of chrome read as one continuous L-shape. .main keeps its 300px offset so the content body still has a 24px breathing gap below the bar. */ margin-left: 276px; padding: 0 1.5rem; background: var(--panel); border-bottom: 1px solid var(--border); } /* When the sidebar collapses (sbc class on ) the topbar tracks it. */ .sbc .fv-topbar { margin-left: 88px; } /* ── Page title (replaces the old Workspace › X breadcrumb) ─── The topbar now renders the active page's title instead of a breadcrumb chain — the sidebar already shows hierarchy and the chain was duplicating that. Block name `topbar_breadcrumb` is kept for backward compatibility with existing page-template overrides. */ .fv-topbar-titlebar { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; white-space: nowrap; overflow: hidden; } .fv-topbar-title { font-family: 'Public Sans', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; color: var(--text); line-height: 1.15; margin: 0; overflow: hidden; text-overflow: ellipsis; } /* Masteradmin company eyebrow — shows which company the masteradmin has scoped into. Mono uppercase, sits above the page title. */ .fv-topbar-crumb-co { font-family: var(--font-mono, 'Archivo Narrow', ui-monospace, monospace); font-size: .68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--linq-orange, #EA6A2C); line-height: 1; } /* ── Legacy breadcrumb classes — kept as alias selectors so any page-override that still emits an Workspace chain doesn't visually shatter; everything just renders inline-muted on a single line until those overrides are migrated to `.fv-topbar-title`. */ .fv-topbar-crumb { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .9rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fv-topbar-crumb a { color: var(--text-muted); text-decoration: none; transition: color .15s ease; } .fv-topbar-crumb a:hover { color: var(--text); } .fv-topbar-sep { color: var(--text-faint); font-size: .9rem; } .fv-topbar-here { color: var(--text); font-weight: 600; } /* ── Search ──────────────────────────────────────────────────── */ .fv-topbar-search { position: relative; display: flex; align-items: center; gap: .5rem; height: 38px; padding: 0 .65rem 0 .85rem; background: var(--panel-soft); border: 1px solid transparent; border-radius: var(--radius-md); transition: border-color .15s ease, background .15s ease; } .fv-topbar-search:focus-within { background: var(--panel); border-color: var(--border-strong); box-shadow: 0 0 0 4px var(--brand-tint-bg); } .fv-topbar-search-icon { color: var(--text-faint); font-size: .95rem; flex-shrink: 0; } .fv-topbar-search-input { flex: 1; border: none; background: transparent; outline: none; font: inherit; font-size: .9rem; color: var(--text); min-width: 0; } .fv-topbar-search-input::placeholder { color: var(--text-faint); } .fv-topbar-kbd { flex-shrink: 0; font-family: var(--font-mono); font-size: .7rem; font-weight: 600; color: var(--text-faint); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .15rem .4rem; letter-spacing: .02em; } /* Results dropdown — same primitive used by the legacy sidebar cmdbar. Empty by default; future search JS will populate it. */ .fv-topbar .cmdbar-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.12); max-height: 60vh; overflow-y: auto; display: none; z-index: 95; } .fv-topbar .cmdbar-results:not(:empty) { display: block; } /* ── Actions (bell + CTA) ────────────────────────────────────── */ .fv-topbar-actions { display: flex; align-items: center; gap: .65rem; } .fv-topbar-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--linq-ink, #0F1623); border: 1px solid var(--linq-ink, #0F1623); color: var(--linq-cream, #F2EBDF); text-decoration: none; cursor: pointer; outline: none; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } .fv-topbar-bell:hover { background: var(--linq-ink-2, #1B2230); border-color: var(--linq-ink-2, #1B2230); color: var(--linq-cream, #F2EBDF); } .fv-topbar-bell:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(234, 106, 44, 0.35); } .fv-topbar-bell i { font-size: 1rem; } /* Incoming-call state — applied to the dialer topbar button by dialer.js when Twilio.Device fires `incoming`. Signal background + Bone glyph + shake. Cleared on accept/decline. */ .fv-topbar-bell.is-incoming { background: #EA6A2C; border-color: #EA6A2C; color: #F2EBDF; animation: fv-topbar-bell-shake 0.7s cubic-bezier(.36,.07,.19,.97) infinite; } @keyframes fv-topbar-bell-shake { 0%, 100% { transform: translateX(0) rotate(0); } 10% { transform: translateX(-2px) rotate(-3deg); } 30% { transform: translateX(2px) rotate(3deg); } 50% { transform: translateX(-1px) rotate(-2deg); } 70% { transform: translateX(1px) rotate(2deg); } 90% { transform: translateX(-1px) rotate(-1deg); } } /* Numbered orange badge — sits at the top-right edge of the bell, hanging slightly off so it reads as a notification count. JS poller in base.html sets `el.textContent = count` and toggles the `hidden` attribute when there are unread notifications. */ .fv-topbar-bell-badge { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--linq-orange, #EA6A2C); border: 2px solid var(--linq-off-white, #FAF6EE); color: #fff; font-family: 'Archivo Narrow', ui-monospace, Menlo, monospace; font-size: 10px; font-weight: 700; line-height: 1; display: none; align-items: center; justify-content: center; } .fv-topbar-bell-badge:not([hidden]) { display: inline-flex; } .fv-topbar-cta { display: inline-flex; align-items: center; gap: .35rem; height: 38px; padding: 0 1rem; background: var(--text); color: var(--on-text); font-size: .875rem; font-weight: 600; border-radius: var(--radius-md); text-decoration: none; transition: filter .15s ease, transform .1s ease; } .fv-topbar-cta:hover { filter: brightness(1.18); } .fv-topbar-cta:active { transform: translateY(1px); } .fv-topbar-cta i { font-size: 1rem; line-height: 1; } /* Secondary CTA — same shape as the primary, but a teal/ghost outline rather than the solid black so it sits next to "+ New job" without competing for attention. Used for "+ Add Receipt" on finance pages. */ .fv-topbar-cta--ghost { background: transparent; color: var(--text); border: 1px solid var(--card-border, rgba(0,0,0,0.10)); } .fv-topbar-cta--ghost:hover { filter: none; background: rgba(13, 115, 119, 0.06); border-color: rgba(13, 115, 119, 0.30); color: #0D7377; } /* ── "+ New" dropdown CTA — three-item create menu (job/invoice/lead). */ .fv-topbar-create { position: relative; } .fv-topbar-cta--dropdown { appearance: none; border: 0; cursor: pointer; font-family: inherit; background: var(--signal, #EA6A2C); /* signal-orange so it pops */ color: #fff; } .fv-topbar-cta--dropdown:hover { filter: brightness(1.06); } .fv-topbar-cta-chev { margin-left: 2px; font-size: .8rem; transition: transform .15s ease; } .fv-topbar-create[data-state="open"] .fv-topbar-cta-chev { transform: rotate(180deg); } .fv-topbar-create-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: #fff; border: 1px solid rgba(15,22,35,.10); border-radius: 12px; box-shadow: 0 12px 32px -12px rgba(15,22,35,.25), 0 4px 12px -4px rgba(15,22,35,.10); padding: 6px; z-index: 100; display: none; } .fv-topbar-create-menu:not([hidden]) { display: block; } .fv-topbar-create-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font: 500 14px/1 'Public Sans', system-ui, sans-serif; color: var(--text, #0F1623); text-decoration: none; transition: background .12s; } .fv-topbar-create-item:hover { background: rgba(15,22,35,.04); color: var(--text, #0F1623); } .fv-topbar-create-item i { font-size: 16px; color: var(--text, #0F1623); width: 18px; text-align: center; } /* ── Mobile / tablet (≤1023px): hide the desktop bar entirely. Pill header + viobar take over, exactly as before. ──────── */ @media (max-width: 1023px) { .fv-topbar { display: none; } }