/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Ligo App-Shell — Bottom Tab Bar
Include on EVERY Ligo-branded surface.
Pairs with inline tab-bar HTML per page (5 .ligo-tab-item links).
Usage:
1.
2. Add class="has-tab-bar" to
3. Paste tab-bar HTML just before :
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── Tab bar container ────────────────────────────────────────────── */
.ligo-tab-bar {
position: fixed;
bottom: 0; left: 0; right: 0;
height: calc(58px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
background: rgba(8, 11, 16, 0.97);
-webkit-backdrop-filter: blur(22px);
backdrop-filter: blur(22px);
border-top: 1px solid rgba(196, 155, 60, 0.20);
display: flex;
align-items: stretch;
z-index: 800;
/* sit below sticky Winston pill (z-index 100) and dialogs */
}
/* ── Tab items ────────────────────────────────────────────────────── */
.ligo-tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 5px 4px 2px;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(176, 168, 152, 0.65);
text-decoration: none;
cursor: pointer;
border: none;
background: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: color 0.18s ease;
position: relative;
}
.ligo-tab-item:hover,
.ligo-tab-item.active {
color: #C49B3C; /* var(--gold) */
}
/* Active indicator dot */
.ligo-tab-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 2px;
background: #C49B3C;
border-radius: 2px 2px 0 0;
}
.ligo-tab-icon {
font-size: 1.25rem;
line-height: 1;
display: block;
}
.ligo-tab-label {
line-height: 1;
display: block;
white-space: nowrap;
}
/* Winston tab — green accent */
.ligo-tab-item.tab-winston {
color: rgba(5, 200, 120, 0.7);
}
.ligo-tab-item.tab-winston:hover,
.ligo-tab-item.tab-winston.active {
color: #05c878;
}
.ligo-tab-item.tab-winston.active::after {
background: #05c878;
}
/* ── Body padding so last section isn't hidden behind tab bar ─────── */
body.has-tab-bar {
padding-bottom: calc(58px + env(safe-area-inset-bottom) + 6px);
}
/* Push sticky-mobile-cta above the tab bar */
body.has-tab-bar #sticky-mobile-cta {
bottom: calc(58px + env(safe-area-inset-bottom));
}
/* Push sticky Winston pill above the tab bar */
body.has-tab-bar .sticky-winston {
bottom: calc(58px + env(safe-area-inset-bottom) + 10px) !important;
}
/* ── Desktop: hide tab bar — it's a mobile/app pattern ───────────── */
@media (min-width: 769px) {
.ligo-tab-bar { display: none; }
body.has-tab-bar { padding-bottom: 0; }
body.has-tab-bar #sticky-mobile-cta { bottom: 0; }
body.has-tab-bar .sticky-winston { bottom: 22px !important; }
}
/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.ligo-tab-item { transition: none; }
}