/* ───────────────────────────────────────────────────────────── Alpine Base — universal stylesheet. Loaded by EVERY page. Owns the shared header/menu so the nav is byte-identical site-wide; only the active item differs. Palette is scoped to .ab-nav so a page's own CSS can't alter it. ───────────────────────────────────────────────────────────── */ .ab-nav{ --n-bg:#2f2b26; --n-fg:#efe9dd; --n-dim:#b7ad9c; --n-line:#46403a; --n-accent:#c65a2e; --n-ok:#5f9a74; position:sticky; top:0; z-index:900; /* full-bleed even on pages whose is width-constrained (e.g. pack.html) */ width:100vw; margin-left:calc(50% - 50vw); background:var(--n-bg); color:var(--n-fg); font-family:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif; box-shadow:0 1px 0 rgba(0,0,0,.25); } .ab-nav *{box-sizing:border-box} .ab-nav-inner{ max-width:1400px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:6px; min-height:58px; flex-wrap:nowrap; } /* brand */ .ab-brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.06rem; color:var(--n-fg); text-decoration:none; margin-right:12px; white-space:nowrap} .ab-brand svg{width:24px; height:24px; flex:none} /* menu links */ .ab-links{display:flex; align-items:center; gap:2px; flex-wrap:nowrap; overflow:visible} .ab-links a, .ab-dropbtn{ display:inline-block; padding:8px 13px; border-radius:9px; font-size:.9rem; font-weight:650; color:var(--n-dim); text-decoration:none; background:none; border:0; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .14s, color .14s; } .ab-links a:hover, .ab-dropbtn:hover{background:rgba(255,255,255,.08); color:var(--n-fg)} .ab-links a.active{background:var(--n-accent); color:#fff} .ab-links a.soon{opacity:.45; cursor:default; position:relative} .ab-links a.soon:hover{background:none; color:var(--n-dim)} .ab-links a.soon::after{content:"soon"; position:absolute; top:-4px; right:2px; font-size:.52rem; font-weight:800; background:var(--n-accent); color:#fff; padding:1px 4px; border-radius:6px; letter-spacing:.3px} /* objectives dropdown */ .ab-drop{position:relative} .ab-drop-menu{ position:absolute; top:calc(100% + 6px); left:0; min-width:190px; background:#faf6ee; border:1px solid #ddd3c0; border-radius:11px; padding:6px; box-shadow:0 14px 34px rgba(0,0,0,.28); display:none; } .ab-drop:hover .ab-drop-menu, .ab-drop.open .ab-drop-menu{display:block} .ab-drop-menu a{display:block; color:#2b2b2b; padding:8px 11px; border-radius:8px; font-size:.88rem} .ab-drop-menu a:hover{background:#efe9dd; color:#2b2b2b} .ab-drop-menu a.active{background:var(--n-accent); color:#fff} .ab-drop-menu .ab-grp{font-size:.6rem;font-weight:800;letter-spacing:.9px;text-transform:uppercase; color:#8a8272;padding:9px 11px 4px;border-top:1px solid #e6dfd2;margin-top:4px} .ab-drop-menu .ab-grp:first-child{border-top:0;margin-top:0;padding-top:5px} .ab-drop-menu .ab-none{padding:5px 11px 8px;font-size:.78rem;color:#a89e8c} .ab-drop-menu .ab-cnt{font-size:.66rem;font-weight:800;background:#e6dfd2;color:#5b6169;border-radius:20px;padding:1px 6px;margin-left:4px} .ab-drop-menu a.active .ab-cnt{background:rgba(255,255,255,.3);color:#fff} /* right-hand account cluster */ .ab-acct{margin-left:auto; display:flex; align-items:center; gap:8px; white-space:nowrap} .ab-acct a{font-size:.85rem; font-weight:650; color:var(--n-dim); text-decoration:none; padding:7px 11px; border-radius:9px; transition:background .14s,color .14s} .ab-acct a:hover{background:rgba(255,255,255,.08); color:var(--n-fg)} .ab-dot{width:9px;height:9px;border-radius:50%;background:var(--n-ok);flex:none} .ab-dot.dirty{background:#d8a43c} .ab-who{font-size:.85rem;font-weight:750;color:var(--n-fg)} .ab-out{border:1px solid var(--n-line) !important; color:#e8b6a2 !important} .ab-out:hover{background:rgba(198,90,46,.25) !important; color:#fff !important} /* small screens: let the bar scroll rather than wrap/break */ @media (max-width:1100px){ .ab-nav-inner{overflow-x:auto; -webkit-overflow-scrolling:touch} .ab-nav-inner::-webkit-scrollbar{display:none} }