/* ===================================================================== vc-toolbar.css — the site menu, for pages that are not part of the design system. The tools under /apps (and the car-screen pages) are self-contained documents with their own layouts and their own body styling. Loading vc.css into them would restyle them wholesale, so this file is deliberately narrow: every rule is scoped to .vcbar, and the only thing it touches outside itself is a top padding on so the fixed bar does not sit over the page. ===================================================================== */ body { padding-top: 52px; } .vcbar { position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000; height: 52px; box-sizing: border-box; display: flex; align-items: center; gap: 18px; padding: 0 16px; background: rgba(8, 19, 31, 0.94); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .vcbar::-webkit-scrollbar { display: none; } .vcbar a { text-decoration: none; } .vcbar .vcbar-logo { flex: none; display: flex; align-items: center; } .vcbar .vcbar-logo img { height: 30px; width: auto; display: block; } .vcbar nav { display: flex; align-items: center; gap: 2px; white-space: nowrap; } .vcbar nav a { display: block; padding: 7px 11px; border-radius: 8px; font-size: 0.86rem; font-weight: 450; line-height: 1.2; color: #93a9bf; transition: color 0.15s, background 0.15s; } .vcbar nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } .vcbar .vcbar-login { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.84rem; font-weight: 550; color: #e8f0f7; white-space: nowrap; transition: border-color 0.15s, color 0.15s; } .vcbar .vcbar-login:hover { border-color: #4da3ff; color: #4da3ff; } .vcbar .vcbar-login svg { width: 13px; height: 13px; } /* Below the width where the links fit, the bar scrolls sideways and the login button travels with it rather than being pinned. */ @media (max-width: 900px) { .vcbar { gap: 12px; } .vcbar .vcbar-login { margin-left: 8px; } } @media print { .vcbar { display: none; } body { padding-top: 0; } }