/* ════════════════════════════════════════════════════════════════════ UNIFIED HUB NAVIGATION — bmarksworks.com "Switcher Lead" pattern: brand IS the dropdown trigger; section tabs sit in a slim secondary row underneath. USAGE: 1. Include this CSS in every hub's base.html (BEFORE hub-specific CSS). 2. Set . 3. Drop nav.html.template's markup into base.html, customizing per per-hub-config.md. 4. Include nav.js for dropdown + indicator behavior. ════════════════════════════════════════════════════════════════════ */ :root{ --bg-0:#0b0d12; --bg-1:#12151c; --bg-2:#1a1e28; --bg-3:#222733; --bg-hover:#262c3a; --border:rgba(255,255,255,0.06); --border-hover:rgba(255,255,255,0.14); --surface:rgba(255,255,255,0.025); --surface-raised:rgba(255,255,255,0.05); --text-1:#f0f2f5; --text-2:#9ca3af; --text-3:#4b5563; --c-the:#94a3b8; --c-trade:#f97316; --c-draft:#38bdf8; --c-devy:#a78bfa; --c-ranking:#fbbf24; --c-spear:#34d399; --r-sm:6px; --r-md:10px; --r-pill:100px; --nav-font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif; --nav-mono:'JetBrains Mono',ui-monospace,monospace; --shadow-lg:0 16px 48px rgba(0,0,0,0.6); --hub-c:var(--c-the); } body[data-hub="the"] { --hub-c: var(--c-the); } body[data-hub="trade"] { --hub-c: var(--c-trade); } body[data-hub="draft"] { --hub-c: var(--c-draft); } body[data-hub="devy"] { --hub-c: var(--c-devy); } body[data-hub="ranking"]{ --hub-c: var(--c-ranking); } body[data-hub="spear"] { --hub-c: var(--c-spear); } /* ──────────── NAV CONTAINER ──────────── */ .site-nav{ position:sticky;top:0;z-index:100; background:rgba(11,13,18,0.92); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); border-bottom:1px solid var(--border); display:flex;flex-direction:column; font-family:var(--nav-font); } .site-nav__primary{height:52px;display:flex;align-items:center;padding:0 18px;gap:14px} .site-nav__secondary{ height:38px;display:flex;align-items:center;padding:0 18px;gap:2px; border-top:1px solid var(--border);background:rgba(255,255,255,0.012); position:relative;overflow-x:auto;scrollbar-width:none; } .site-nav__secondary::-webkit-scrollbar{display:none} .site-nav__secondary::before{ content:'';position:absolute;left:0;top:-1px; width:var(--ind-w,0);transform:translateX(var(--ind-x,0)); height:1px;background:var(--hub-c); transition:width .25s ease, transform .25s ease;z-index:1; } /* ──────────── HUB MARK + DROPDOWN ──────────── */ .hub-mark-anchor{position:relative;flex-shrink:0;display:inline-flex;align-items:center} .hub-mark{ display:inline-flex;align-items:center;gap:9px; font-family:inherit;color:var(--text-1);background:none;border:none; font-size:14px;font-weight:800;letter-spacing:0.04em;line-height:1; cursor:pointer;padding:6px 4px; } .hub-mark__glyph{ width:24px;height:24px;border-radius:6px; display:inline-flex;align-items:center;justify-content:center; font-family:var(--nav-mono);font-size:10.5px;font-weight:800;letter-spacing:0; color:#0b0d12;background:var(--hub-c);flex-shrink:0;transition:background .2s; } .hub-mark__glyph svg{width:14px;height:14px} .hub-mark__name{display:inline-flex;align-items:baseline;gap:0} .hub-mark__name .hub{color:var(--hub-c);transition:color .2s} .hub-mark__name .hub-suffix{color:var(--text-3);font-weight:500} .hub-mark__caret{margin-left:2px;font-size:10px;color:var(--text-3);transition:transform .2s,color .15s} .hub-mark:hover .hub-mark__caret{color:var(--text-1)} .hub-mark[aria-expanded="true"] .hub-mark__caret{transform:rotate(180deg);color:var(--text-1)} .hub-panel{ position:absolute;top:calc(100% + 6px);left:-6px;width:280px; background:var(--bg-1);border:1px solid var(--border-hover); border-radius:var(--r-md);box-shadow:var(--shadow-lg); overflow:hidden;z-index:200; opacity:0;transform:translateY(-4px);pointer-events:none; transition:opacity .14s ease, transform .14s ease; } .hub-mark-anchor.is-open .hub-panel{opacity:1;transform:translateY(0);pointer-events:auto} .hub-panel__hdr{ padding:9px 12px;font-family:var(--nav-mono);font-size:9px;font-weight:800; letter-spacing:0.14em;color:var(--text-3);text-transform:uppercase; background:var(--bg-2);border-bottom:1px solid var(--border); } .hub-panel__list{padding:4px} .hub-row{ display:grid;grid-template-columns:24px 1fr auto;gap:11px;align-items:center; padding:8px 10px;border-radius:var(--r-sm);cursor:pointer; transition:background .12s;text-decoration:none;color:inherit; } .hub-row:hover{background:var(--bg-hover)} .hub-row--active{background:var(--bg-2)} .hub-row__glyph{ width:24px;height:24px;border-radius:5px; display:inline-flex;align-items:center;justify-content:center; font-family:var(--nav-mono);font-size:10px;font-weight:800;color:#0b0d12; background:var(--hub-row-c); } .hub-row__glyph svg{width:14px;height:14px} .hub-row__name{font-size:13px;font-weight:700;letter-spacing:0.02em;color:var(--text-1)} .hub-row__name .suf{color:var(--text-3);font-weight:500} .hub-row__desc{font-family:var(--nav-mono);font-size:9.5px;color:var(--text-3);margin-top:1px;letter-spacing:0.02em;font-weight:500} .hub-row__check{width:14px;height:14px;color:var(--hub-row-c);opacity:0} .hub-row--active .hub-row__check{opacity:1} .hub-panel__divider{height:1px;background:var(--border);margin:4px 8px} .hub-panel__footer{ padding:8px 12px;border-top:1px solid var(--border);background:var(--bg-2); display:flex;justify-content:space-between;align-items:center; font-family:var(--nav-mono);font-size:9.5px;color:var(--text-3);letter-spacing:0.04em; } .hub-panel__kbd{ padding:2px 6px;background:var(--bg-3);border:1px solid var(--border); border-radius:3px;font-family:var(--nav-mono);font-size:9px;color:var(--text-2);font-weight:700; } /* ──────────── SECTION TABS ──────────── */ .nav-tab{ padding:0 14px;height:38px;display:inline-flex;align-items:center;gap:6px; font-size:12.5px;font-weight:600;color:var(--text-3);letter-spacing:-0.005em; white-space:nowrap;transition:color .12s;position:relative; text-decoration:none; } .nav-tab:hover{color:var(--text-1)} .nav-tab.is-active{color:var(--text-1)} .nav-tab__badge{ font-family:var(--nav-mono);font-size:9px;font-weight:800; background:var(--bg-3);color:var(--text-2); padding:1px 5px;border-radius:99px;letter-spacing:0.04em; } .nav-tab.is-active .nav-tab__badge{background:var(--hub-c);color:#0b0d12} /* ──────────── TOOLS ──────────── */ .nav-spacer{flex:1;min-width:0} .nav-search{position:relative;flex:0 1 240px;min-width:0} .nav-search input{ width:100%;background:var(--bg-2);border:1px solid var(--border); border-radius:var(--r-pill);padding:7px 14px 7px 30px; font-size:12px;color:var(--text-1);outline:none;font-family:var(--nav-font); transition:border-color .15s, box-shadow .15s; } .nav-search input:focus{border-color:var(--hub-c);box-shadow:0 0 0 3px rgba(255,255,255,0.05)} .nav-search input::placeholder{color:var(--text-3)} .nav-search::before{ content:'';position:absolute;left:11px;top:50%;transform:translateY(-50%); width:12px;height:12px;background:var(--text-3); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z'/%3E%3C/svg%3E"); pointer-events:none; } .nav-search__kbd{ position:absolute;right:10px;top:50%;transform:translateY(-50%); padding:1px 5px;background:var(--bg-3);border:1px solid var(--border); border-radius:3px;font-family:var(--nav-mono);font-size:9px;color:var(--text-3); font-weight:700;letter-spacing:0.04em;pointer-events:none; } .nav-icon-btn{ width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center; border-radius:var(--r-sm);color:var(--text-3);background:none;border:none; transition:all .15s;flex-shrink:0;position:relative;cursor:pointer; } .nav-icon-btn:hover{color:var(--text-1);background:var(--surface-raised)} .nav-icon-btn svg{width:15px;height:15px} .nav-icon-btn .dot{ position:absolute;top:6px;right:6px;width:5px;height:5px; border-radius:50%;background:var(--hub-c);box-shadow:0 0 0 2px var(--bg-0); } .nav-fmt{display:flex;align-items:center;gap:6px;flex-shrink:0} .nav-fmt .lbl{ font-family:var(--nav-mono);font-size:9.5px;color:var(--text-3); letter-spacing:0.06em;text-transform:uppercase;font-weight:700; } .nav-fmt select{ background:var(--bg-2);border:1px solid var(--border);color:var(--text-1); font-size:11px;padding:5px 24px 5px 10px;border-radius:var(--r-pill); outline:none;font-weight:700;letter-spacing:0.04em;cursor:pointer; -webkit-appearance:none;appearance:none;font-family:inherit; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='%239ca3af'%3E%3Cpath d='M5 7L1 3h8z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 8px center; } .nav-divider{width:1px;height:20px;background:var(--border);flex-shrink:0} .nav-avatar{ width:28px;height:28px;border-radius:50%;background:var(--bg-3); display:inline-flex;align-items:center;justify-content:center; font-size:11.5px;font-weight:800;color:var(--text-2); flex-shrink:0;border:1px solid var(--border-hover);cursor:pointer; transition:border-color .15s;text-decoration:none; } .nav-avatar:hover{border-color:var(--hub-c)} .nav-search-mobile{display:none} /* Sync button (Draft Hub) */ .nav-sync-btn{ font-size:11px;font-weight:700;padding:5px 12px; border-radius:var(--r-pill);background:var(--bg-2);border:1px solid var(--border); color:var(--text-2);cursor:pointer;transition:all .15s; } .nav-sync-btn:hover{color:var(--text-1);border-color:var(--hub-c)} .nav-sync-btn--busy{opacity:0.6;pointer-events:none} /* Upload pill (Ranking Hub) */ .nav-upload-btn{ font-size:11px;font-weight:700;padding:5px 12px; border-radius:var(--r-pill);background:color-mix(in srgb, var(--hub-c) 14%, transparent); border:1px solid color-mix(in srgb, var(--hub-c) 28%, transparent); color:var(--hub-c);cursor:pointer;transition:all .15s;text-decoration:none; } .nav-upload-btn:hover{background:color-mix(in srgb, var(--hub-c) 22%, transparent)} @media (max-width:768px){ .site-nav__primary{height:48px;padding:0 12px;gap:8px} .site-nav__secondary{padding:0 12px;height:40px} .nav-search{display:none} .nav-search-mobile{display:inline-flex} .nav-fmt .lbl{display:none} .hub-mark{font-size:13px} .hub-mark__glyph{width:22px;height:22px} .hub-panel{position:fixed;left:8px;right:8px;top:54px;width:auto;max-height:calc(100vh - 80px);overflow-y:auto} .nav-tab{font-size:12px;padding:0 11px} }