/* Menu in basso semplificato solo dentro l'app Android (vedi mentium-app-android-menu.js). La classe mnt-in-app su la mette lo script, solo quando la pagina e' aperta dall'app. */ @media (max-width: 760px) { /* una sola riga da 5: Home, Lezioni, Analytics, Tutor, Altro (prima: due righe da 4, 109px) */ html.mnt-in-app .nav { height: 60px; flex-wrap: nowrap; align-content: stretch; align-items: center; gap: 3px; } html.mnt-in-app .nav .nav-link:not(.mnt-in-barra), html.mnt-in-app .nav .nav-right { display: none !important; } html.mnt-in-app .nav .nav-link.mnt-in-barra { flex: 1 1 0; width: auto; } html.mnt-in-app .nav .mnt-altro { order: 99; gap: 5px; } /* la barra resta sopra lo sfondo scuro, cosi' "Altro" richiude il ventaglio */ html.mnt-ventaglio-aperto .nav { z-index: 100002; } } @media (min-width: 761px) { .mnt-altro, .mnt-ventaglio, .mnt-ventaglio-sfondo { display: none !important; } } /* "Segnala" (e le altre azioni rapide di #mnt-mobile-dock): non piu' una barra larga a sinistra ma una pillola compatta a destra, sopra "Altro", a portata di pollice. Il menu ora e' alto 60px invece di 109px, quindi la pillola sta a 76px dal fondo. Con il video aperto restano valide le regole del sito (piu' specifiche). */ @media (max-width: 600px) { html.mnt-in-app #mnt-mobile-dock { left: auto; right: 17px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } html.mnt-in-app #mnt-mobile-dock > * { width: auto !important; height: 40px !important; padding: 0 14px 0 12px !important; border-radius: 999px !important; gap: 6px !important; } html.mnt-ventaglio-aperto #mnt-mobile-dock { visibility: hidden; } } .mnt-altro-freccia { display: inline-block; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(2px) rotate(-135deg); transition: transform 0.2s ease; } .mnt-altro[aria-expanded="true"] .mnt-altro-freccia { transform: translateY(-2px) rotate(45deg); } .mnt-ventaglio-sfondo { position: fixed; inset: 0; z-index: 100000; background: rgba(5, 9, 20, 0.55); opacity: 0; transition: opacity 0.2s ease; } .mnt-ventaglio-sfondo.is-aperto { opacity: 1; } /* contenitore di dimensione zero centrato su "Altro": le voci partono da li' e vanno sull'arco */ .mnt-ventaglio { position: fixed; width: 0; height: 0; z-index: 100003; } .mnt-ventaglio-voce { position: absolute; left: 0; top: 0; width: 80px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font-family: inherit; color: #fff; cursor: pointer; opacity: 0; transform: translate(-50%, -50%) scale(0.4); transition: transform 0.32s cubic-bezier(0.2, 1.3, 0.4, 1), opacity 0.2s ease; transition-delay: calc(var(--mnt-i, 0) * 35ms); -webkit-tap-highlight-color: transparent; } .mnt-ventaglio.is-aperto .mnt-ventaglio-voce { opacity: 1; transform: translate(-50%, -50%) translate(var(--mnt-dx, 0px), var(--mnt-dy, 0px)) scale(1); } .mnt-ventaglio-icona { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(9, 14, 32, 0.96); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); transition: background 0.15s ease, border-color 0.15s ease; } .mnt-ventaglio-voce--profilo .mnt-ventaglio-icona { background: linear-gradient(135deg, var(--blue, #539ae0), var(--blue-deep, #254A87)); font-size: 15px; font-weight: 800; } .mnt-ventaglio-voce.is-active .mnt-ventaglio-icona { background: #1c3b66; border-color: var(--blue, #539ae0); } .mnt-ventaglio-etichetta { max-width: 80px; padding: 2px 7px; border-radius: 8px; background: rgba(9, 14, 32, 0.85); font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; } .mnt-ventaglio-voce:focus-visible { outline: none; } .mnt-ventaglio-voce:focus-visible .mnt-ventaglio-icona { outline: 3px solid var(--blue, #539ae0); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .mnt-ventaglio-voce, .mnt-ventaglio-sfondo, .mnt-altro-freccia { transition: none; } }