/* * ================================================================ * MOBILE-FIX.CSS — Patch navigazione mobile * Prof. Antonio Adinolfi | antonioadinolfi.it * Da aggiungere IN FONDO a styles.css (oppure come * separato nell' DOPO styles.css) * ================================================================ * * PROBLEMI RISOLTI: * 1. Tab nav: su 768px il grid è 3 colonne → "Didattica" finisce * da sola e occupa tutta la riga → ora 2x2 * 2. Tab "Bacheca" e "Glossario" perdono il testo su schermi * molto stretti (< 360px) → nasconde il testo, mostra solo icona * 3. Weekly toolbar: i bottoni nav + label + select si accatastano * → layout colonna, bottoni full-width * 4. Didattica subnav su mobile: le voci a 50% su 980px * diventano troppo compresse su 700px → 1 colonna con scroll snap * 5. Hero clean su 980-640px: foto e testo impilati ma la foto * prende troppo spazio → ridotta e con padding corretto * 6. Tabs-nav sticky: su mobile il top era 74px ma l'header * cresce → gestito con top:0 + position:sticky corretto * 7. Touch target: tutti i tab-btn e link di navigazione portati * a min 44×44px (standard WCAG 2.5.5) * ================================================================ */ /* --------------------------------------------------------------- 1. TABS NAV — griglia 2×2 su mobile (invece di 3+1) --------------------------------------------------------------- */ @media (max-width: 768px) { .tabs-nav { /* Sovrascrive il grid 3-colonne precedente */ display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; padding: 10px 14px !important; position: sticky !important; top: 66px !important; /* altezza .clean-topbar a 640px */ z-index: 100 !important; background: rgba(4, 13, 34, 0.88) !important; backdrop-filter: blur(12px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .tab-btn { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; min-height: 52px !important; /* touch target ≥ 44px */ padding: 10px 8px !important; border-radius: 12px !important; border-bottom: 0 !important; border: 1px solid rgba(255, 255, 255, 0.10) !important; background: rgba(255, 255, 255, 0.05) !important; font-size: 10px !important; line-height: 1.2 !important; color: #94a3b8 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } .tab-btn i { font-size: 17px !important; color: inherit !important; } .tab-btn.active { background: rgba(56, 189, 248, 0.14) !important; border-color: rgba(56, 189, 248, 0.40) !important; color: #ffffff !important; box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12) inset !important; } } /* --------------------------------------------------------------- 2. TABS NAV — su schermi strettissimi (<= 360px) nasconde il testo e mostra solo l'icona --------------------------------------------------------------- */ @media (max-width: 360px) { .tabs-nav { top: 60px !important; } .tab-btn { min-height: 44px !important; padding: 8px 4px !important; } /* Nasconde il testo del tab, mantiene l'icona leggibile */ .tab-btn > :not(i) { display: none !important; } .tab-btn i { font-size: 20px !important; } } /* --------------------------------------------------------------- 3. WEEKLY TOOLBAR — layout a colonna su mobile --------------------------------------------------------------- */ @media (max-width: 768px) { .weekly-toolbar { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } .weekly-nav-group { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: center !important; } .weekly-nav-btn { flex: 1 1 auto !important; justify-content: center !important; min-height: 44px !important; font-size: 13px !important; } .weekly-week-label { width: 100% !important; text-align: center !important; order: -1 !important; /* etichetta settimana sopra i bottoni */ font-size: 15px !important; } .weekly-filter-group { display: flex !important; align-items: center !important; gap: 10px !important; } .weekly-filter-group label { font-weight: 700 !important; white-space: nowrap !important; color: #94a3b8 !important; font-size: 13px !important; } #weekly-class-filter { flex: 1 !important; min-height: 44px !important; border-radius: 12px !important; padding: 0 12px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: #fff !important; font-size: 14px !important; } } /* --------------------------------------------------------------- 4. DIDATTICA SUBNAV — scroll orizzontale compatto su mobile --------------------------------------------------------------- */ @media (max-width: 700px) { .didattica-layout { grid-template-columns: 1fr !important; gap: 14px !important; } .didattica-subnav { position: relative !important; top: auto !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; /* Firefox */ gap: 8px !important; padding: 12px !important; border-radius: 16px !important; } /* Nasconde scrollbar in Chrome/Safari */ .didattica-subnav::-webkit-scrollbar { display: none !important; } .didattica-subnav-title { display: none !important; /* non serve in riga orizzontale */ } .didattica-subnav a { flex: 0 0 auto !important; white-space: nowrap !important; padding: 10px 14px !important; font-size: 13px !important; min-height: 44px !important; border-radius: 12px !important; justify-content: center !important; } } /* --------------------------------------------------------------- 5. HERO CLEAN — ottimizzazione foto/testo su tablet/mobile --------------------------------------------------------------- */ @media (max-width: 980px) { .hero-clean-inner { grid-template-columns: 1fr !important; min-height: auto !important; padding: 24px 5% 16px !important; gap: 12px !important; } .hero-clean-copy { text-align: center !important; order: 1 !important; } .hero-clean-photo-wrap { order: 2 !important; justify-content: center !important; min-height: auto !important; } .hero-clean-photo { width: min(76vw, 380px) !important; max-height: 200px !important; } } @media (max-width: 640px) { .hero-clean-copy h1 { font-size: clamp(2rem, 10vw, 2.8rem) !important; letter-spacing: -0.03em !important; } .hero-clean-copy p { font-size: clamp(1rem, 4.5vw, 1.3rem) !important; } .hero-clean-photo { width: min(72vw, 300px) !important; max-height: 170px !important; } } /* --------------------------------------------------------------- 6. PROFILE DASHBOARD — una colonna su mobile --------------------------------------------------------------- */ @media (max-width: 768px) { .profile-dashboard { grid-template-columns: 1fr !important; gap: 14px !important; } .profile-side-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .profile-feature-card { padding: 20px !important; } /* Bottoni azione a piena larghezza */ .feature-actions { flex-direction: column !important; } .feature-actions .hero-btn { width: 100% !important; justify-content: center !important; min-height: 48px !important; } } /* --------------------------------------------------------------- 7. WEEKLY DETAIL — padding più stretto su mobile --------------------------------------------------------------- */ @media (max-width: 768px) { .weekly-detail { padding: 16px !important; border-radius: 16px !important; margin-top: 12px !important; } .weekly-detail-actions { flex-direction: column !important; gap: 10px !important; } .weekly-detail-actions .btn-stem { width: 100% !important; justify-content: center !important; min-height: 46px !important; } } /* --------------------------------------------------------------- 8. WEEKLY LEGEND — a capo su mobile, leggibile --------------------------------------------------------------- */ @media (max-width: 640px) { .weekly-legend { flex-direction: column !important; gap: 8px !important; font-size: 12px !important; } } /* --------------------------------------------------------------- 9. FOOTER — una colonna su mobile (già in parte presente, ma con gap ridotto per spazi stretti) --------------------------------------------------------------- */ @media (max-width: 640px) { footer { padding: 28px 16px !important; } .footer-top, .footer-bottom { flex-direction: column !important; gap: 14px !important; text-align: center !important; } .footer-bottom > div:last-child { justify-content: center !important; } } /* --------------------------------------------------------------- 10. TOUCH TARGET GLOBALE — garantisce min 44px su tutti i link e bottoni interattivi principali (WCAG 2.5.5) --------------------------------------------------------------- */ @media (max-width: 768px) { .btn-stem, .btn-lesson, .btn-exercise, .btn-panquiz-primary, .btn-panquiz-secondary, .btn-python-primary, .btn-python-secondary, .didattica-dashboard-btn, .hero-btn, .calendar-nav, .weekly-nav-btn { min-height: 44px !important; min-width: 44px !important; } }