/* ══ BASEPOKER GTO — shared site navigation ═══════════════════════════════ SINGLE SOURCE OF TRUTH for the site chrome. Markup comes from assets/nav.js. No page may re-declare .site-nav / .site-links styles. IA — 4 top-level destinations, 2 levels deep: Home · Charts ▾ · Play · Tools ▾ ├ All in or Fold ├ Timer ├ Spin & Cash └ Shot Clock ├ NLH └ Tournament Modes — set on : full (default) desktop top bar · mobile 60px header + 58px bottom tab bar compact page owns the bottom edge (play): sticky top bar + ☰ sheet bare fixed-height app shell (shot): static top bar + ☰ sheet Design tokens (--bg-*, --text-*, --accent*, --border*) come from the page. ═════════════════════════════════════════════════════════════════════════ */ /* ── bar ─────────────────────────────────────────────────────────────── */ .site-nav{position:sticky;top:0;z-index:500;display:flex;align-items:center;gap:18px; padding:12px 24px;background:rgba(10,22,40,.85);backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)} body[data-nav="bare"] .site-nav{position:relative;flex:none} .site-brand{display:flex;align-items:center;gap:9px; font-family:'Yellix','Apple SD Gothic Neo',sans-serif;font-weight:700;font-size:16px; letter-spacing:-.01em;color:var(--text-primary);text-decoration:none;white-space:nowrap} .site-brand svg{display:block;height:18px;width:auto} .site-brand .tag{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--accent); padding:2px 7px;border:1px solid var(--accent);border-radius:6px} /* current page name — compact / bare modes, where there is no visible tab row */ .nav-here{font-size:13px;font-weight:600;color:var(--text-secondary);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .nav-here::before{content:'·';margin-right:9px;color:var(--text-muted)} /* ── top-level items ─────────────────────────────────────────────────── */ .site-links{display:flex;align-items:center;gap:6px;margin-left:auto} .nav-item{display:flex;align-items:center;gap:6px; font-family:'Yellix','Apple SD Gothic Neo',sans-serif;font-size:12px;font-weight:500; letter-spacing:.04em;color:var(--text-secondary);text-decoration:none; padding:6px 12px;border-radius:6px;border:1px solid transparent;background:none; cursor:pointer;white-space:nowrap;transition:color .15s,background .15s,border-color .15s} .nav-item:hover{color:var(--text-primary);background:var(--bg-2)} .nav-item.active{color:var(--accent);border-color:var(--accent);background:var(--accent-glow)} .nav-item .tab-ico{display:none} .nav-item .tab-ico svg{width:18px;height:18px;display:block} .nav-home{display:none} /* desktop: the brand IS the home link */ .nav-caret{font-size:9px;opacity:.75;transition:transform .15s} .nav-group[data-open="1"] .nav-caret{transform:rotate(180deg)} .nav-burger svg{width:17px;height:17px;display:block} /* ── dropdown / sheet ────────────────────────────────────────────────── */ .nav-group{position:relative} /* max-height: on a landscape phone the viewport is ~390px tall and the full destination list is taller than that — without this the bottom entries fall off-screen and cannot be tapped. */ .nav-menu{display:none;position:absolute;top:calc(100% + 9px);right:0;min-width:250px;z-index:610; max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain; background:var(--bg-1);border:1px solid var(--border-active);border-radius:11px;padding:6px; box-shadow:0 18px 48px rgba(0,0,0,.55)} .nav-group[data-open="1"] .nav-menu{display:block} .nav-menu a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px; color:var(--text-secondary);text-decoration:none;transition:background .12s,color .12s} .nav-menu a:hover{background:var(--bg-2);color:var(--text-primary)} .nav-menu a.active{color:var(--accent);background:var(--accent-glow)} .nav-menu a svg{width:19px;height:19px;flex:none} .nav-menu .mi{display:flex;flex-direction:column;gap:2px;min-width:0} .nav-menu .mi b{font-family:'Yellix','Apple SD Gothic Neo',sans-serif;font-size:13px; font-weight:700;letter-spacing:-.01em} .nav-menu .mi i{font-style:normal;font-size:11px;color:var(--text-muted);white-space:nowrap} .nav-menu-title{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--text-muted);padding:10px 10px 5px} .nav-menu-title:first-child{padding-top:5px} /* Catches the outside click. Invisible for a desktop dropdown; dims only when the menu becomes a mobile sheet. z-index MUST stay below .site-nav (500). .site-nav is positioned with a z-index, so it opens a stacking context: .nav-menu's z-index:610 is clamped inside that 500 layer and cannot rise above a sibling scrim. A scrim above 500 therefore covers the menu and swallows every click on it. Below 500 it still covers the page content, which is all it needs to do. */ .nav-scrim{position:fixed;inset:0;z-index:495;background:transparent; opacity:0;pointer-events:none;transition:opacity .15s} .nav-scrim.on{opacity:1;pointer-events:auto} /* ── second level: chart sub-tabs (the 4 chart pages) ────────────────── */ .chart-tabs{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none; padding:9px 24px;background:rgba(13,27,43,.92);border-bottom:1px solid var(--border)} .chart-tabs::-webkit-scrollbar{display:none} .chart-tabs a{flex:none;font-family:'Yellix','Apple SD Gothic Neo',sans-serif; font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--text-secondary); text-decoration:none;padding:6px 14px;border-radius:999px;border:1px solid var(--border); transition:color .15s,background .15s,border-color .15s} .chart-tabs a:hover{color:var(--text-primary);border-color:var(--border-active)} .chart-tabs a.active{color:#04120b;background:var(--accent);border-color:var(--accent-bright)} /* ── mobile ──────────────────────────────────────────────────────────── */ @media (max-width:560px){ /* basepoker mobile header: 60px, no border, solid navy */ .site-nav{min-height:60px;padding:0 16px 0 24px;gap:10px;background:var(--bg-0); border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none} .site-brand{font-size:15px} .site-brand svg{height:20px} .nav-here{font-size:12px} .nav-scrim{background:rgba(0,0,0,.5)} /* ── full mode: fixed header + 58px bottom tab bar, icon over label ── */ body[data-nav="full"]{padding-top:60px;padding-bottom:64px} body[data-nav="full"] .site-nav{position:fixed;top:0;left:0;right:0} body[data-nav="full"] .site-links{position:fixed;left:0;right:0;bottom:0;z-index:600;margin:0; display:flex;justify-content:space-around;align-items:stretch;gap:0; height:58px;background:var(--bg-deep);padding:0 6px} body[data-nav="full"] .nav-group{flex:1;display:flex} body[data-nav="full"] .nav-item{flex:1;flex-direction:column;align-items:center; justify-content:center;gap:4px;border:0;border-radius:0;background:none; padding:6px 2px;color:var(--text-secondary)} body[data-nav="full"] .nav-item .tab-ico{display:block} body[data-nav="full"] .nav-item .tab-txt{font-size:11px;font-weight:600;letter-spacing:0; line-height:1.1;white-space:nowrap} body[data-nav="full"] .nav-item.active{color:var(--accent);background:none;border:0} body[data-nav="full"] .nav-home{display:flex} body[data-nav="full"] .nav-caret{display:none} /* the dropdown becomes a sheet sitting above the tab bar */ body[data-nav="full"] .nav-menu{position:fixed;left:8px;right:8px;bottom:66px;top:auto; min-width:0;border-radius:14px;padding:7px} body[data-nav="full"] .nav-menu a{padding:12px 11px} /* sub-tabs dock right under the fixed header */ body[data-nav="full"] .chart-tabs{position:sticky;top:60px;z-index:490;padding:8px 14px} /* ── compact / bare: no bottom bar, the page owns that edge. The menu stays anchored to the ☰ (right:0 on .nav-group) — never give it both left:0 and right:0, that collapses it to the button's own width. ── */ body[data-nav="compact"] .nav-menu, body[data-nav="bare"] .nav-menu{min-width:min(268px,calc(100vw - 24px)); max-width:calc(100vw - 24px)} }