/* ================================================ MOBILE.CSS - Responsive Mobile Styles for Salute Add this line to your index.html : ================================================ */ /* ================================================ HAMBURGER MENU STYLES ================================================ */ /* Hamburger button - hidden on desktop */ .mobile-menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1001; } .mobile-menu-toggle span { width: 28px; height: 3px; background-color: #F5F5F5; transition: all 0.3s ease; border-radius: 2px; } /* Hamburger animation when active */ .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); } .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } /* Mobile overlay backdrop */ .mobile-menu-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 998; opacity: 0; transition: opacity 0.3s ease; } .mobile-menu-overlay.active { opacity: 1; } /* ================================================ TABLET BREAKPOINT (768px - 1024px) ================================================ */ @media (max-width: 1024px) { /* Adjust font sizes for tablets */ .hero-text h1 { font-size: 48px !important; } .hero-text h2 { font-size: 28px !important; } .hero-signup-text { font-size: 24px !important; } .features-header h2 { font-size: 38px !important; } .features-header p { font-size: 28px !important; } .feature-item { max-width: 650px; width: 100%; } .transformation-left-section h2 { font-size: 38px !important; } .transformation-left-section p { font-size: 28px !important; } .transformation-right-tile h2 { font-size: 40px !important; } .transformation-right-tile p { font-size: 28px !important; } .excellence-left p, .excellence-list li { font-size: 30px !important; } .excellence-right h1 { font-size: 40px !important; } .excellence-right h2, .excellence-right p { font-size: 28px !important; } .faq-left { font-size: 40px !important; } .faq-question { font-size: 26px !important; } .faq-answer { font-size: 26px !important; } } /* ================================================ MOBILE BREAKPOINT (max-width: 768px) ================================================ */ @media (max-width: 768px) { /* Root spacing adjustments */ :root { --spacing-unit: 6px; } /* ================================================ HEADER & NAVIGATION ================================================ */ .main-header { position: sticky; top: 0; background: #0B1D37; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); padding: 12px 0; } .header-container { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } .logo { font-size: 28px !important; z-index: 1001; } /* Show hamburger menu on mobile */ .mobile-menu-toggle { display: flex; } /* Mobile navigation menu */ .main-nav { position: fixed; top: 0; right: -100%; width: 75%; max-width: 320px; height: 100vh; background: #0B1D37; flex-direction: column; padding: 80px 30px 30px; gap: 0; box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5); transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 999; overflow-y: auto; align-items: start; } .main-nav.active { right: 0; } .main-nav a { font-size: 22px !important; padding: 18px 0; border-bottom: 1px solid rgba(245, 245, 245, 0.1); color: #F5F5F5; transition: all 0.3s ease; } .main-nav a:hover, .main-nav a:active { color: #FFB300; padding-left: 10px; } .main-nav a:last-child { border-bottom: none; } /* ================================================ HERO SECTION ================================================ */ .hero-container { /* padding: 40px 20px !important; */ padding: 20px 20px 0px 20px !important; } .hero-content { flex-direction: column; gap: 30px; margin: 0 !important; } .hero-text { text-align: center; order: 1; } .hero-text h1 { font-size: 36px !important; line-height: 1.2; margin-bottom: 15px; min-width: unset; } .hero-text h2 { font-size: 20px !important; line-height: 1.4; margin-bottom: 15px; } .hero-signup-text { font-size: 18px !important; line-height: 1.6; margin: 0 0 25px 0 !important; padding-top: 0 !important; max-width: 100%; } .hero-image { order: 2; max-width: 320px; margin: 0 auto; } .hero-image img { /* max-width: 100%; */ /* width: 100%; */ zoom: 0.5; } .back { top: 0; } .front { top: 200px; } .join-btn { width: 100%; max-width: 320px; font-size: 18px !important; padding: 16px 28px !important; display: block; margin: 0 auto; } /* ================================================ FEATURES SECTION ================================================ */ #features { padding: 40px 0 !important; } .feature-container { padding: 0 20px; max-width: 100%; } .features-header { padding: 20px 15px 30px; } .features-header h2 { font-size: 32px !important; margin-bottom: 12px; } .features-header p { font-size: 18px !important; white-space: normal; line-height: 1.5; } .features-layout { flex-direction: column; gap: 30px; } .features-image { order: 2; max-width: 100%; margin: 0 auto; } .feature-picture { max-width: 320px; margin: 0 auto; display: block; /* Added */ zoom: 0.8; } .features-list { order: 1; gap: 15px; margin: 0; } .feature-item { width: 100% !important; max-width: 100%; padding: 25px 20px !important; margin: 0; } .feature-item h3 { font-size: 22px !important; margin-bottom: 10px; } .feature-item p { font-size: 18px !important; line-height: 1.5; } .indicators { margin-top: 20px; gap: 10px; padding-top: 20px; } .dot { width: 12px !important; height: 12px !important; } /* ================================================ TRANSFORMATION SECTION ================================================ */ #transformation { padding: 40px 0 !important; } .transformation-container { gap: 25px; padding: 0 20px; } .transformation-layout { flex-direction: column; gap: 20px; } .transformation-left-section { padding: 40px 25px; border-radius: 20px; } .transformation-left-section h2 { font-size: 28px !important; line-height: 1.3; margin-bottom: 15px; } .transformation-left-section p { font-size: 18px !important; line-height: 1.5; margin-bottom: 25px; } .transformation-btn { font-size: 18px !important; padding: 16px 32px !important; width: 100%; max-width: 100%; align-self: stretch; } .transformation-right-section { padding: 40px 25px; border-radius: 20px; } .transformation-carousel-container { max-width: 100%; } .transformation-right-tile h2 { font-size: 28px !important; margin-bottom: 20px; } .transformation-right-tile p { font-size: 18px !important; line-height: 1.5; padding-top: 25px; } .transformation-dots-container { margin-bottom: 30px; } .transformation-dot { width: 14px !important; height: 14px !important; } /* ================================================ FOUNDERS SECTION ================================================ */ .founders-section { padding: 40px 20px !important; text-align: center; } .founders-section h2 { font-size: 26px !important; line-height: 1.4; margin-bottom: 25px; } .founders-video { margin: 20px 0; } .founders-quote { font-size: 20px !important; padding: 0 10px; margin: 25px 0; line-height: 1.5; } .founders-name { font-size: 16px !important; } /* ================================================ EXCELLENCE SECTION ================================================ */ .excellence-section { padding: 40px 0 !important; } .excellence-container { flex-direction: column; padding: 0 20px; gap: 30px; } .excellence-left { order: 2; margin: 15px 0; padding: 20px 15px; } .excellence-left p { font-size: 26px !important; text-align: center; line-height: 1.3; } .excellence-left-first-lastparagraph { margin-top: 40px !important; } .excellence-list { padding-top: 20px; } .excellence-list li { font-size: 24px !important; margin: 18px 0; } .excellence-list li::before { width: 30px !important; height: 30px !important; } .excellence-right { order: 1; margin: 15px 0; padding: 30px 20px 0 20px; border-radius: 20px; } .excellence-right h1 { font-size: 32px !important; padding-bottom: 15px; } .excellence-right h2 { font-size: 24px !important; padding-bottom: 15px; line-height: 1.3; } .excellence-right p { font-size: 18px !important; line-height: 1.5; } .excellence-right-last { padding-top: 20px !important; } .excellence-cta { margin-top: 50px; padding: 40px 20px; border-radius: 20px; } .excellence-cta h1 { font-size: 24px !important; line-height: 1.4; margin-bottom: 20px; } .excellence-cta-btn { font-size: 18px !important; padding: 16px 32px !important; width: 100%; max-width: 320px; margin-top: 20px !important; margin-bottom: 20px !important; } /* ================================================ FAQ SECTION ================================================ */ .faq-section { flex-direction: column; padding: 40px 0 !important; gap: 20px; } .faq-left { font-size: 32px !important; margin: 0 20px 15px; text-align: center; } .faq-right { max-width: 100%; padding: 0 20px; } .faq-item { margin-bottom: 5px; } .faq-question { font-size: 20px !important; padding: 18px 0; line-height: 1.4; } .faq-answer { font-size: 18px !important; line-height: 1.6; } .faq-answer p { padding-bottom: 18px; } .icon-circle { width: 30px !important; height: 30px !important; flex-shrink: 0; margin-left: 10px; } /* ================================================ FINAL CTA SECTION ================================================ */ .final-cta-container { padding: 40px 20px !important; } .final-cta-content { flex-direction: column; gap: 30px; max-width: 100%; } .final-cta-text { order: 2; text-align: center; margin-left: 0 !important; flex: 1; } .final-cta-text h2 { font-size: 28px !important; margin-bottom: 15px; line-height: 1.3; } .final-cta-text p { font-size: 18px !important; line-height: 1.5; max-width: 100%; padding-top: 10px; } .final-cta-image { order: 1; max-width: 320px; margin: 0 auto 0 auto !important; } .final-cta-image img { zoom: 1; max-width: 100%; } .final-cta-block { padding: 40px 20px; text-align: center; border-radius: 20px; } .final-cta-block h1 { font-size: 26px !important; margin-bottom: 15px; line-height: 1.3; } .final-cta-block p { font-size: 18px !important; margin-bottom: 20px; line-height: 1.5; } .final-cta-btn { width: 100%; max-width: 320px; font-size: 16px !important; padding: 16px 28px !important; } /* ================================================ NOTIFY FORM ================================================ */ .notify-form { padding: 40px 20px !important; flex-direction: column; } .contact-card { padding: 30px 20px !important; max-width: 100%; } .notify-input { margin-bottom: 20px; } .notify-input label h5 { font-size: 18px !important; } .notify-form input[type="email"] { font-size: 16px !important; padding: 14px 18px !important; max-width: 100%; } .notify-btn { width: 100%; font-size: 18px !important; padding: 16px 28px !important; } /* ================================================ FOOTER ================================================ */ .footer-block { padding: 40px 20px !important; } .footer-container { flex-direction: column; gap: 30px; text-align: center; align-items: center; } .footer-left { order: 4; width: 100%; } .footer-copyright { font-size: 14px !important; margin-bottom: 20px; line-height: 1.5; } .social-icons { justify-content: center; gap: 20px; } .social-icon-link img { width: 36px; height: 36px; } .footer-right { margin: 0; width: 100%; } .footer-title { font-size: 20px !important; margin-bottom: 12px; font-weight: bold; } .footer-right p { font-size: 16px !important; margin-bottom: 10px; } .footer-right a { color: #F5F5F5; text-decoration: none; } /* ================================================ MODAL / QUESTIONNAIRE ================================================ */ .modal-overlay { padding: 15px; align-items: flex-start; padding-top: 30px; } .mymodal { width: 95% !important; max-width: 500px !important; padding: 30px 20px !important; margin: 0 auto; max-height: 90vh; overflow-y: auto; } .question-title { font-size: 24px !important; margin-bottom: 15px; line-height: 1.3; } .question-description { font-size: 14px !important; margin-bottom: 10px; } .progress-bar { height: 6px; margin-bottom: 20px; } .form-group { margin-bottom: 20px; } .form-group label { font-size: 16px !important; margin-bottom: 8px; } .form-group input, .form-group textarea { font-size: 16px !important; padding: 14px !important; width: 100%; } .gender-button { width: 90px !important; height: 90px !important; font-size: 36px !important; } .goal-grid { grid-template-columns: 1fr !important; gap: 12px; } .goal-card { padding: 20px !important; font-size: 18px !important; } .goal-card .emoji { font-size: 32px; margin-right: 10px; } .number-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .number-option { width: 100% !important; height: 65px !important; font-size: 22px !important; } .weight-input-container { flex-direction: column; gap: 12px; align-items: stretch; } .weight-input-container input { width: 100% !important; font-size: 18px !important; padding: 14px !important; } .unit-toggle { width: 100%; justify-content: center; display: flex; } .unit-btn { flex: 1; max-width: 120px; font-size: 16px !important; padding: 12px !important; } .modal-actions { flex-direction: column; gap: 12px; margin-top: 25px; } .modal-actions .btn { width: 100% !important; font-size: 18px !important; padding: 14px !important; } .modal-actions .btn-secondary { order: 2; } .modal-actions .btn-primary { order: 1; } /* ================================================ LOADING MODAL ================================================ */ .loading-modal { padding: 20px; } .loading-content { padding: 40px 20px; } .spinner-container { margin-bottom: 25px; } .spinner-double { width: 60px !important; height: 60px !important; } .loading-text { font-size: 20px !important; margin-bottom: 10px; } .loading-subtext { font-size: 14px !important; } .loading-dots { margin-top: 20px; } .loading-dots .dot { width: 10px !important; height: 10px !important; } /* ================================================ SUCCESS MODAL ================================================ */ .success-icon { width: 60px !important; height: 60px !important; font-size: 36px !important; margin-bottom: 20px; } .success-message h2 { font-size: 26px !important; } .success-message p { font-size: 16px !important; line-height: 1.5; } /* ================================================ UTILITY CLASSES ================================================ */ /* Prevent body scroll when mobile menu is open */ body.menu-open { overflow: hidden; } /* Hide elements on mobile */ .hide-mobile { display: none !important; } /* Show only on mobile */ .show-mobile { display: block !important; } } /* ================================================ SMALL MOBILE BREAKPOINT (max-width: 480px) ================================================ */ @media (max-width: 480px) { .hero-text h1 { font-size: 28px !important; } .hero-text h2 { font-size: 18px !important; } .hero-signup-text { font-size: 16px !important; } .features-header h2 { font-size: 26px !important; } .transformation-left-section h2 { font-size: 24px !important; } .transformation-left-section p { font-size: 16px !important; } .excellence-left p, .excellence-list li { font-size: 22px !important; } .excellence-right h1 { font-size: 28px !important; } .faq-left { font-size: 28px !important; } .faq-question { font-size: 18px !important; } .faq-answer { font-size: 16px !important; } .final-cta-text h2 { font-size: 24px !important; } .final-cta-block h1 { font-size: 22px !important; } } /* ================================================ LANDSCAPE MODE ON MOBILE ================================================ */ @media (max-width: 768px) and (orientation: landscape) { .hero-container { padding: 30px 20px !important; } .main-nav { max-height: 100vh; overflow-y: auto; } .modal-overlay { padding-top: 20px; } .mymodal { max-height: 85vh; } } /* ================================================ PRINT STYLES (BONUS) ================================================ */ @media print { .main-header, .mobile-menu-toggle, .join-btn, .notify-form, .footer-block, .modal-overlay, .loading-modal { display: none !important; } }