/* ─────────────────────────────────────────────────────────────────────── * ts-nav.css — shared TokenSearch sidebar nav + brand tokens. * * Used by standalone pages (billing, tos, health, etc.) so the brand * (PNG logo + indigo→lavender gradient + Inter) and nav reads the same * across the whole site. The "main app" pages (deploy.html, index.html) * inline a slightly customized version with extra state (selected coin, * my-coins list) — this file is the canonical shape for standalone surfaces. * * Designed mobile-first: under 760px the sidebar hides off-canvas and a * hamburger button (rendered by ts-nav.js) opens it. * ─────────────────────────────────────────────────────────────────────── */ :root { --ts-bg: #080b14; --ts-panel: #111827; --ts-panel-2: #0d1322; --ts-line: #1e2838; --ts-line-2: #283449; --ts-text: #e7eaf3; --ts-text-dim: #8b97b0; --ts-text-faint: #5b6884; --ts-indigo: #818cf8; --ts-violet: #6366f1; --ts-lavender: #c084fc; --ts-grape: #a78bfa; --ts-sky: #60a5fa; --ts-green: #4ade80; --ts-amber: #fbbf24; --ts-red: #f87171; --ts-sidebar-w: 220px; --ts-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } /* Page-level shell when a sidebar is present. Pages including ts-nav.js automatically get `data-ts-nav` on which triggers this layout. */ body[data-ts-nav] { margin-left: var(--ts-sidebar-w); } /* ─── Sidebar ─── */ .ts-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--ts-sidebar-w); background: rgba(8, 11, 20, 0.92); border-right: 1px solid var(--ts-line); backdrop-filter: blur(14px); display: flex; flex-direction: column; padding: 18px 0 0; z-index: 20; overflow: hidden; /* scroll lives inside .ts-items-scroll */ font-family: var(--ts-display); } /* dev.89: items list scrolls; user-block + version stick to bottom. */ .ts-items-scroll { flex: 1 1 auto; overflow-y: auto; padding-bottom: 8px; } .ts-user-block { flex-shrink: 0; padding: 12px 16px 10px; border-top: 1px solid rgba(139, 92, 246, .25); display: flex; flex-direction: column; gap: 6px; } .ts-user-row { display: flex; align-items: center; gap: 10px; } .ts-user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(139, 92, 246, .4); flex-shrink: 0; } .ts-user-avatar-fallback { display: grid; place-items: center; background: linear-gradient(135deg, #818cf8, #c084fc); color: #0b1024; font-weight: 800; font-size: 13px; } .ts-user-name { font-weight: 700; color: #e7eaf3; font-size: .92rem; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ts-trial-pill { display: inline-block; align-self: flex-start; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4ade80; background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .28); padding: 3px 9px; border-radius: 999px; margin-left: 38px; } .ts-trial-pill-paid { color: #a5b4fc; background: rgba(99, 102, 241, .12); border-color: rgba(99, 102, 241, .3); } .ts-signout { display: flex; align-items: center; gap: 7px; padding: 6px 0 0 38px; color: var(--ts-ink-dim, #8b97b0); text-decoration: none; font-size: .82rem; font-weight: 500; transition: color .15s; } .ts-signout:hover { color: #e7eaf3; } .ts-signout-arrow { font-size: .9rem; opacity: .8; } .ts-version-block { flex-shrink: 0; padding: 8px 16px 14px 16px; border-top: 1px solid rgba(139, 92, 246, .15); } .ts-release-link { color: rgba(226, 232, 240, .55); text-decoration: none; font-size: .72rem; font-weight: 500; } .ts-release-link:hover { color: rgba(226, 232, 240, .85); } .ts-version-num { color: rgba(75, 90, 110, .9); font-size: .68rem; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em; margin-top: 3px; } .ts-logo { padding: 0 16px 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--ts-line); margin-bottom: 8px; text-decoration: none; } .ts-logo .mark { width: 30px; height: 30px; border-radius: 8px; background: transparent; object-fit: contain; box-shadow: 0 4px 14px rgba(129, 140, 248, 0.35); display: block; flex-shrink: 0; } .ts-logo .name { font-weight: 700; font-size: 14px; letter-spacing: -.01em; color: var(--ts-text); } .ts-logo .name b { background: linear-gradient(90deg, var(--ts-indigo), var(--ts-lavender)); -webkit-background-clip: text; background-clip: text; color: transparent; } .ts-section-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #a5b4fc; padding: 18px 16px 8px; } .ts-section-label.with-line { border-top: 1px solid rgba(139, 92, 246, .35); margin-top: 14px; } .ts-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; color: #fff; text-decoration: none; font-size: .84rem; font-weight: 600; transition: background .15s, color .15s; border: none; background: none; width: 100%; cursor: pointer; text-align: left; line-height: 1.4; font-family: inherit; } .ts-item:hover { background: rgba(129, 140, 248, .08); } .ts-item.active { background: linear-gradient(90deg, rgba(129, 140, 248, .16), rgba(192, 132, 252, .04)); box-shadow: inset 2px 0 0 var(--ts-indigo); } .ts-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex: 0 0 18px; } /* ─── Topbar (only visible under the breakpoint, holds the hamburger) ─── */ .ts-topbar { display: none; /* desktop hidden; flexed on mobile by the media query below */ align-items: center; gap: 10px; padding: 12px 14px; background: rgba(8, 11, 20, .92); border-bottom: 1px solid var(--ts-line); position: sticky; top: 0; z-index: 18; backdrop-filter: blur(14px); } .ts-hamburger { border: 1px solid var(--ts-line); background: rgba(15, 20, 34, .6); width: 38px; height: 38px; border-radius: 9px; color: var(--ts-text); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 38px; } .ts-hamburger svg { width: 18px; height: 18px; } .ts-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 19; opacity: 0; pointer-events: none; transition: opacity .22s; } .ts-scrim.open { opacity: 1; pointer-events: auto; } /* ─── Mobile ─── */ @media (max-width: 760px) { body[data-ts-nav] { margin-left: 0; } .ts-sidebar { transform: translateX(-100%); transition: transform .25s ease; width: 240px; box-shadow: 0 0 40px rgba(0, 0, 0, .6); } .ts-sidebar.open { transform: translateX(0); } .ts-topbar { display: flex; } }