/* ───────────────────────────────────────────────────────────── 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. ───────────────────────────────────────────────────────────── */ /* universal box model + horizontal-overflow guard (padding no longer widens elements, so width:100% cards stop spilling off narrow phone screens) */ *,*::before,*::after{box-sizing:border-box} html,body{max-width:100%;overflow-x:hidden} /* visible keyboard-focus ring on every interactive element (mouse clicks stay clean via :focus-visible) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid #c65a2e; outline-offset: 2px; border-radius: 4px; } .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; /* pages set their own line-height/letter-spacing; the bar must not inherit it */ font-size:16px; line-height:1.2; letter-spacing:normal; text-align:left; box-shadow:0 1px 0 rgba(0,0,0,.25); } .ab-nav *{box-sizing:border-box; line-height:1.2; letter-spacing:normal} .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-nav .ab-links a, .ab-nav .ab-dropbtn{ display:flex; align-items:center; padding:8px 13px; border-radius:9px; margin:0; 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 */ /* flex, not inline-block: an inline-block button sits on the parent's text baseline, so any page with a taller line-height pushed "Objectives" out of line with the rest */ .ab-drop{position:relative; display:flex; align-items:center} .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; } /* invisible bridge across the gap so the menu survives the trip from button to list */ .ab-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} .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-dot.synced{background:var(--n-ok)} .ab-who{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:750;color:var(--n-fg)} /* admin area sub-navigation — one consistent tab bar across admin/design/pages */ .adminnav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line, #ddd3c0)} .adminnav a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-size:.88rem;font-weight:650; color:var(--slate, #5b6169);padding:8px 14px;border-radius:10px;border:1px solid transparent;transition:.12s} .adminnav a:hover{background:rgba(91,97,105,.1)} .adminnav a.active{background:var(--forest, #3f6b52);color:#fff} /* circular avatar — image or tinted initials, reused everywhere */ .ab-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%; background-size:cover;background-position:center;color:#fff;font-weight:800;overflow:hidden; line-height:1;text-transform:uppercase;letter-spacing:.3px} .ab-nav .ab-av{width:26px;height:26px;font-size:.66rem;box-shadow:0 0 0 1.5px rgba(255,255,255,.25)} /* notifications bell */ .ab-bellwrap{position:relative; display:flex; align-items:center} .ab-bell{position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:0; border-radius:9px; cursor:pointer; background:none; color:var(--n-dim); transition:background .14s, color .14s} .ab-bell:hover{background:rgba(255,255,255,.08); color:var(--n-fg)} .ab-bellwrap.open .ab-bell{background:rgba(255,255,255,.10); color:var(--n-fg)} .ab-badge{position:absolute; top:1px; right:1px; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:var(--n-accent); color:#fff; font-size:.62rem; font-weight:800; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--n-bg)} .ab-notes{position:absolute; top:calc(100% + 8px); right:0; width:320px; max-width:86vw; background:#35302a; color:var(--n-fg); border:1px solid var(--n-line); border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.42); overflow:hidden; display:none; z-index:1000} .ab-bellwrap.open .ab-notes{display:block} .ab-notes-hd{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 14px; border-bottom:1px solid var(--n-line); font-weight:800; font-size:.82rem} .ab-notes-hd button{background:none; border:0; color:var(--n-dim); font-size:.72rem; font-weight:700; cursor:pointer; padding:2px 4px; border-radius:6px} .ab-notes-hd button:hover{color:var(--n-fg); background:rgba(255,255,255,.08)} .ab-notes-body{max-height:60vh; overflow-y:auto} .ab-note{display:block; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.06); text-decoration:none; color:var(--n-fg); font-size:.84rem; line-height:1.35; cursor:pointer; transition:background .12s} .ab-note:hover{background:rgba(255,255,255,.05)} .ab-note:last-child{border-bottom:0} .ab-note.unread{background:rgba(198,90,46,.11)} .ab-note.unread:hover{background:rgba(198,90,46,.17)} .ab-note .ab-note-t{display:block} .ab-note .ab-note-time{display:block; margin-top:3px; font-size:.68rem; color:var(--n-dim); font-weight:600} .ab-notes-empty{padding:22px 14px; text-align:center; color:var(--n-dim); font-size:.82rem} .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} /* hamburger button (hidden on desktop) */ .ab-burger{display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:38px; padding:0 9px; margin-right:2px; background:none; border:0; cursor:pointer; flex:none} .ab-burger span{display:block; height:2px; border-radius:2px; background:var(--n-fg); transition:.2s} .ab-nav.mopen .ab-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .ab-nav.mopen .ab-burger span:nth-child(2){opacity:0} .ab-nav.mopen .ab-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* between tablet and desktop: let the bar scroll rather than wrap */ @media (max-width:1100px) and (min-width:821px){ .ab-nav-inner{overflow-x:auto; -webkit-overflow-scrolling:touch} .ab-nav-inner::-webkit-scrollbar{display:none} } /* phones: collapse the menu into a slide-down panel (dropdowns expand inline, never clipped) */ @media (max-width:820px){ .ab-burger{display:flex} .ab-nav-inner{flex-wrap:wrap; gap:4px; min-height:54px; overflow:visible; position:relative} .ab-brand{margin-right:auto; font-size:1rem} .ab-links{ order:10; flex-basis:100%; display:none; flex-direction:column; align-items:stretch; gap:2px; position:absolute; top:100%; left:0; right:0; z-index:1000; background:var(--n-bg); border-top:1px solid var(--n-line); padding:8px 14px 16px; box-shadow:0 16px 30px rgba(0,0,0,.4); max-height:80vh; overflow-y:auto; } .ab-nav.mopen .ab-links{display:flex} .ab-nav .ab-links a, .ab-nav .ab-dropbtn{width:100%; justify-content:space-between; padding:11px 12px; font-size:.98rem} .ab-drop{display:block; width:100%} .ab-drop-menu{position:static; display:none; min-width:0; margin:2px 0 6px 8px; padding:4px; background:rgba(255,255,255,.05); border:0; box-shadow:none} .ab-drop.open .ab-drop-menu{display:block} .ab-drop-menu a{color:var(--n-fg); font-size:.94rem; padding:10px 11px} .ab-drop-menu a:hover{background:rgba(255,255,255,.1); color:var(--n-fg)} .ab-drop-menu .ab-grp{color:var(--n-dim); border-top-color:var(--n-line)} .ab-drop-menu .ab-none{color:var(--n-dim)} .ab-drop-menu .ab-cnt{background:rgba(255,255,255,.16); color:var(--n-fg)} .ab-acct{gap:5px} .ab-acct a{padding:6px 9px; font-size:.8rem} .ab-who #abWhoName{display:none} /* avatar only on small screens */ } @media (max-width:420px){ .ab-acct #abAdmin{padding:6px 7px; font-size:.78rem} /* keep Admin visible, just tighter */ }