Top Bar + Side Menu Completo
MAG7 Heatmap
/* ============ BOTTOM NAV ============ */
body{ padding-bottom:52px; } /* spazio di scorrimento generale */
/* —— struttura base —— */
.bottom-nav-red{
position:fixed;
bottom:0; left:0; width:100%;
display:flex;
background:#ff0000;
border-top:2px solid #fff;
z-index:9999;
white-space:nowrap; /* lasciamo, servirà solo su mobile */
}
/* singolo tab */
.bottom-nav-red .nav-item{
flex:1 1 0; /* tutti si allargano in modo uguale */
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:#fff;
font:12px/1 monospace;
padding:6px 4px 4px;
text-decoration:none;
text-shadow:1px 1px 2px #000;
border-right:1px solid rgba(255,255,255,.25);
}
.bottom-nav-red .nav-item:last-child{ border-right:none; }
.bottom-nav-red .nav-icon{
font-size:20px;
margin-bottom:2px;
}
/* stato hover / attivo */
.bottom-nav-red .nav-item:hover,
.bottom-nav-red .active{ color:#FF8200; }
.bottom-nav-red .active .nav-icon{ filter:drop-shadow(0 0 3px #FF8200); }
/* ---------- MOBILE (≤ 768 px) ---------- */
@media(max-width:768px){
body{ padding-bottom:48px; } /* barra più bassa */
.bottom-nav-red{
height:44px;
overflow-x:auto; /* ora può scorrere */
}
.bottom-nav-red .nav-item{
flex:0 0 auto; /* disattivo l’espansione */
min-width:80px; /* larghezza minima */
font-size:11px;
padding:4px 6px 3px;
}
.bottom-nav-red .nav-icon{ font-size:18px; }
/* scrollbar delicata */
.bottom-nav-red::-webkit-scrollbar { height:6px; }
.bottom-nav-red::-webkit-scrollbar-thumb { background:#0005; border-radius:3px; }
}
