/* ============================================================================ MM-MOBILE-CORE.CSS - Shared Mobile Utilities ============================================================================ Cross-cutting mobile concerns used by ALL pages and components. Import AFTER mm-tokens.css, BEFORE page-specific mobile files. SCSS migration: becomes _mobile-core.scss partial. Sections: 1. Mobile CSS variable overrides 2. Scroll-lock utilities 3. Touch-device hover fallbacks 4. Font-size floor enforcement 5. Touch-target enforcement 6. Responsive visibility helpers 7. Reduced-motion / accessibility ============================================================================ */ /* ============================================================================ 1. MOBILE CSS VARIABLE OVERRIDES Scoped to breakpoints so every file that reads these tokens gets mobile values automatically — no per-file duplication. ============================================================================ */ @media (max-width: 768px) { :root { --mm-mobile-padding: var(--mm-space-4); /* 1rem */ --mm-mobile-padding-sm: var(--mm-space-2); /* 0.5rem */ --mm-mobile-padding-lg: var(--mm-space-6); /* 1.5rem */ --mm-mobile-font: var(--mm-font-sm); /* 14px — readable floor */ --mm-mobile-font-sm: var(--mm-font-sm); /* 14px — NOT 12px */ --mm-mobile-font-lg: var(--mm-font-base); /* 16px */ --mm-mobile-radius: var(--mm-radius-md); /* 8px */ } } @media (max-width: 480px) { :root { --mm-mobile-padding: var(--mm-space-3); /* 0.75rem */ } } /* ============================================================================ 2. SCROLL-LOCK UTILITIES Apply these classes to when any modal/overlay opens. Each modal JS should add/remove the appropriate class. ============================================================================ */ body.mm-scroll-lock, body.mm-nav-open, body.mm-modal-open, body.preenroll-modal-open, body.sdm-modal-open { overflow: hidden; /* Prevent iOS Safari bounce-scroll behind modal */ position: fixed; width: 100%; /* JS should save/restore scrollY via: document.body.style.top = `-${window.scrollY}px`; then on unlock: window.scrollTo(0, parseInt(document.body.style.top || '0') * -1); document.body.style.top = ''; */ } /* ============================================================================ 3. TOUCH-DEVICE HOVER FALLBACKS Devices with no hover capability (phones, tablets) get :active feedback instead of :hover lift/shadow effects. ============================================================================ */ /* --- Only apply hover effects on devices that support hover --- */ @media (hover: hover) and (pointer: fine) { /* Interactive cards */ .music-lesson:hover { transform: translateY(-2px); } .music-lesson--enhanced:hover { transform: translateY(-3px); } /* Buttons with lift effect */ .preenroll-btn:hover, .preenroll-submit-btn:hover, .view-details-btn:hover, .reload-search-btn:hover { transform: translateY(-2px); } .more-info-btn:hover { transform: translateY(-1px); } } /* --- Touch devices: use :active for instant tap feedback --- */ @media (hover: none) { .music-lesson:active { transform: scale(0.98); transition: transform 0.1s ease; } .music-lesson--enhanced:active { transform: scale(0.98); transition: transform 0.1s ease; } .preenroll-btn:active, .preenroll-submit-btn:active, .view-details-btn:active, .more-info-btn:active, .reload-search-btn:active { transform: scale(0.97); transition: transform 0.1s ease; } /* Remove hover-only transforms that "stick" on touch */ .music-lesson:hover, .music-lesson--enhanced:hover, .preenroll-btn:hover, .preenroll-submit-btn:hover, .view-details-btn:hover, .more-info-btn:hover, .reload-search-btn:hover { transform: none; } } /* ============================================================================ 4. FONT-SIZE FLOOR ENFORCEMENT No text on any screen should fall below 14px (--mm-font-sm). The old 12px body at 320px and 11px table text are overridden here. ============================================================================ */ @media (max-width: 480px) { body { font-size: var(--mm-font-sm); /* 14px — NOT 12px */ } } @media (max-width: 320px) { body { font-size: var(--mm-font-sm); /* 14px floor even on tiny screens */ } .results-table { font-size: var(--mm-font-sm); /* was 11px — now 14px */ } } /* Small helper text: floor at 12px but prefer 13-14px */ .preenroll-form-group small, .sdm-fact-label, .verified-summary-label, .verified-open-status, .use-my-location-btn { font-size: max(0.8rem, 12px); } /* Nav labels were 0.7rem (11.2px) — raise to readable minimum */ @media (max-width: 768px) { .mm-nav-group-label { font-size: var(--mm-font-xs); /* 12px — acceptable for labels */ } .mm-account-label { font-size: var(--mm-font-xs); /* 12px */ } } /* ============================================================================ 5. TOUCH-TARGET ENFORCEMENT Anything tappable must be at least 44x44px on touch devices. ============================================================================ */ @media (max-width: 768px) { /* Delete button on result cards: was 32x32 */ .delete-result-btn { width: var(--mm-touch-min); /* 44px */ height: var(--mm-touch-min); /* 44px */ } /* Hamburger button: was 40x40 */ .mm-hamburger-btn { min-width: var(--mm-touch-min); min-height: var(--mm-touch-min); } /* Small icon-only buttons */ .mm-btn-icon { min-width: var(--mm-touch-min); min-height: var(--mm-touch-min); display: inline-flex; align-items: center; justify-content: center; } /* Modal close buttons */ .preenroll-close, .sdm-close, .compare-modal-close { min-width: var(--mm-touch-min); min-height: var(--mm-touch-min); display: inline-flex; align-items: center; justify-content: center; } } /* ============================================================================ 6. RESPONSIVE VISIBILITY HELPERS Use these classes in HTML to show/hide elements by breakpoint. ============================================================================ */ /* Hidden on screens ≤ 768px */ .mm-hide-mobile { display: initial; } /* Shown only on screens ≤ 768px */ .mm-show-mobile { display: none; } @media (max-width: 768px) { .mm-hide-mobile { display: none !important; } .mm-show-mobile { display: initial !important; } } /* Hidden on screens ≤ 480px */ .mm-hide-phone { display: initial; } @media (max-width: 480px) { .mm-hide-phone { display: none !important; } /* Existing classes — keep backward-compatible */ .desktop-only, .tablet-only { display: none !important; } } /* ============================================================================ 7. REDUCED MOTION / ACCESSIBILITY Centralized — individual component files don't need to repeat this. ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media (prefers-contrast: high) { /* Ensure all interactive elements have visible borders */ button, .btn, input, select, textarea { border: 2px solid currentColor; } }