/* ============================================ MOBILE ZOOM PREVENTION Fixes auto-zoom issues on iOS/Android ============================================ */ /* Prevent double-tap zoom on all interactive elements */ html { -ms-touch-action: manipulation; touch-action: manipulation; } /* Prevent iOS auto-zoom on input focus (requires 16px minimum) */ @media screen and (max-width: 991px) { input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], textarea, select { font-size: 16px !important; } } /* Prevent content overflow causing zoom */ body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } /* Disable user-scalable for problematic fixed elements */ @media screen and (max-width: 991px) { .header-wrapper, .header-mobile, .footer-bar, .sidebar-menu { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } } /* ============================================ END MOBILE ZOOM PREVENTION ============================================ */ /* Mobile Header */ .header-mobile { display: none; position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 65px; background: var(--bg-white); box-shadow: var(--shadow-md); z-index: 1050; /* Higher than desktop header to ensure it's on top */ padding: 0 15px; align-items: center; justify-content: space-between; overflow: visible; /* Changed from hidden to allow proper touch targets */ box-sizing: border-box; } /* Explicit sidebar toggle styling */ #sidebarToggle { appearance: none; -webkit-appearance: none; outline: none; } .header-mobile .header-icon { width: 48px; height: 48px; min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 22px; text-decoration: none; border-radius: 12px; transition: var(--transition-fast); background: transparent; border: none; /* Touch target optimization */ cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); touch-action: manipulation; user-select: none; -webkit-user-select: none; position: relative; z-index: 10; } .header-mobile .header-icon:active { transform: scale(0.95); background: rgba(14, 43, 72, 0.1); } .header-mobile .header-title { font-family: var(--font-primary); font-size: 18px; font-weight: 700; color: var(--primary-color); text-decoration: none; } .header-mobile .header-title span { color: var(--accent-color); } /* Footer Bar - Sticky Bottom Navigation */ .footer-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 70px; background: var(--bg-white); box-shadow: 0 -4px 20px rgba(10, 31, 68, 0.1); z-index: 1000; padding: 0 10px; padding-bottom: env(safe-area-inset-bottom, 0); align-items: center; justify-content: space-around; overflow: hidden; box-sizing: border-box; } .footer-item, a.footer-item, button.footer-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 12px; color: #4a5568 !important; /* CONTRAST FIX: Dark gray on white background */ text-decoration: none; font-size: 10px; font-weight: 600; transition: var(--transition-fast); border-radius: 10px; min-width: 56px; /* Touch target - WCAG 2.1 minimum */ min-height: 52px; /* Touch target - WCAG 2.1 minimum */ position: relative; /* Reset button defaults */ background: transparent; border: none; outline: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Focus visible state for keyboard navigation */ .footer-item:focus-visible, a.footer-item:focus-visible, button.footer-item:focus-visible { outline: 2px solid #FF1654; outline-offset: 2px; } .footer-item i, a.footer-item i, button.footer-item i { font-size: 20px; transition: var(--transition-fast); color: inherit; } .footer-item.active-nav, .footer-item:active, a.footer-item.active-nav, a.footer-item:active { color: #FF1654 !important; /* CONTRAST FIX: Use explicit coral */ } .footer-item.active-nav i, a.footer-item.active-nav i { color: #FF1654 !important; } /* No wrapper/background for active footer items */ .footer-item.active-nav { background: transparent; } /* No top accent bar for active footer items */ .footer-item.active-nav::before { display: none; } .footer-item:active { transform: scale(0.95); } /* WhatsApp Button - Green with Neon Pulse */ .footer-whatsapp, .footer-whatsapp span { color: #25D366 !important; } .footer-whatsapp i { color: #25D366 !important; animation: whatsappPulse 3s ease-in-out infinite; } @keyframes whatsappPulse { 0%, 70%, 100% { text-shadow: none; transform: scale(1); } 75% { text-shadow: 0 0 8px #25D366, 0 0 16px #25D366, 0 0 24px #25D366; transform: scale(1.1); } 80% { text-shadow: 0 0 4px #25D366, 0 0 10px #25D366; transform: scale(1.05); } 85% { text-shadow: none; transform: scale(1); } } .footer-whatsapp:active, .footer-whatsapp:active span { color: #128C7E !important; } .footer-whatsapp:active i { color: #128C7E !important; } /* Language Switcher Button */ .footer-lang-switch { background: rgba(14, 43, 72, 0.1) !important; border-radius: 8px !important; } .footer-lang-switch span { font-weight: 700 !important; font-size: 11px !important; } .footer-lang-switch i { color: var(--ot-primary, #1a5f7a) !important; } .footer-lang-switch:hover, .footer-lang-switch:active { background: rgba(14, 43, 72, 0.15) !important; } /* Sidebar Menu - Dark navy background for brand consistency */ /* ACCESSIBILITY: Forces dark background with white text for WCAG AA compliance */ .sidebar-menu { position: fixed; top: 0; left: -320px; width: 300px; max-width: 85vw; height: 100%; background: #0E2B48 !important; /* Solid navy - not transparent */ backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); z-index: 2000; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; overflow-x: hidden; box-shadow: var(--shadow-lg); /* CONTRAST FIX: Force light text vars for dark background */ --text-on-dark: #ffffff; --text-light: #ffffff; --accent-color: #FF1654; color: #ffffff; } .sidebar-menu.is-open { transform: translateX(320px); } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 25px 20px; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: var(--text-light); } .sidebar-title { font-family: var(--font-primary); font-size: 22px; font-weight: 700; } .sidebar-logo { display: flex; align-items: center; text-decoration: none; } .sidebar-logo img.sidebar-emblem { height: 56px; width: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); } .sidebar-brand { display: flex; flex-direction: column; margin-left: 12px; } .sidebar-brand-name { font-family: var(--font-primary); font-size: 18px; font-weight: 700; color: #ffffff; line-height: 1.2; } .sidebar-brand-name .brand-suffix { color: var(--accent-color); } .sidebar-tagline { font-family: var(--font-secondary); font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.8); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; } .sidebar-close { width: 48px; height: 48px; min-width: 48px; /* Touch target - WCAG 2.1 minimum */ min-height: 48px; /* Touch target - WCAG 2.1 minimum */ display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.15); border: none; border-radius: 12px; color: var(--text-light); font-size: 20px; cursor: pointer; transition: var(--transition-fast); } .sidebar-close:active { background: rgba(255,255,255,0.25); transform: scale(0.95); } .sidebar-nav { padding: 12px 0; display: flex; flex-direction: column; gap: 2px; } .sidebar-home-link { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: #ffffff; /* CONTRAST FIX: Explicit white */ text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: var(--transition-fast); border-left: 3px solid transparent; } .sidebar-home-link:hover, .sidebar-home-link:active { background: rgba(255, 255, 255, 0.08); border-left-color: var(--accent-color); } .sidebar-home-link i { width: 20px; color: var(--accent-color); } .sidebar-accordion-group { border-top: 1px solid rgba(255, 255, 255, 0.08); } .sidebar-accordion-group:first-of-type { border-top: none; } .sidebar-accordion-heading { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #ffffff !important; /* CONTRAST FIX: Explicit white */ background: transparent; border: none; cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; min-height: 56px; /* WCAG touch target */ } .sidebar-accordion-heading:hover, .sidebar-accordion-heading:focus, .sidebar-accordion-heading:active { background: rgba(255, 255, 255, 0.08); color: #ffffff !important; } .sidebar-accordion-heading:focus-visible { outline: 2px solid #FF1654; outline-offset: -2px; } /* Chevrons - High visibility */ .sidebar-accordion-heading .accordion-chevron { font-size: 0.9rem; color: #ffffff !important; /* CONTRAST FIX: White instead of faint */ opacity: 0.9; transition: transform 0.3s ease; } .sidebar-accordion-heading.is-open .accordion-chevron { transform: rotate(180deg); } .sidebar-accordion-panel { display: flex; flex-direction: column; max-height: 0; overflow: hidden; background: rgba(0, 0, 0, 0.15); transition: max-height 0.3s ease-out; } .sidebar-accordion-panel.is-open { max-height: 600px; } .sidebar-accordion-panel a { display: flex; align-items: center; padding: 14px 20px 14px 48px; color: #ffffff !important; /* CONTRAST FIX: Explicit white */ text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: all 0.2s ease; border-left: 3px solid transparent; min-height: 48px; /* WCAG touch target */ } .sidebar-accordion-panel a:hover, .sidebar-accordion-panel a:focus, .sidebar-accordion-panel a:active { background: rgba(255, 255, 255, 0.1); color: #ffffff !important; border-left-color: #FF1654; } .sidebar-accordion-panel a:focus-visible { outline: 2px solid #FF1654; outline-offset: -2px; } .sidebar-single-link { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: #ffffff; /* CONTRAST FIX: Explicit white */ text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: var(--transition-fast); border-left: 3px solid transparent; border-top: 1px solid rgba(255, 255, 255, 0.08); } .sidebar-single-link:hover, .sidebar-single-link:active { background: rgba(255, 255, 255, 0.08); border-left-color: var(--accent-color); } .sidebar-single-link i { width: 20px; color: var(--accent-color); } .sidebar-contact { padding: 25px 20px; border-top: 1px solid var(--border-color); } .sidebar-cta { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 16px 24px; background: var(--accent-color); color: var(--text-light); text-decoration: none; font-weight: 600; font-size: 15px; border-radius: 12px; margin-bottom: 12px; transition: var(--transition); box-shadow: 0 4px 15px rgba(227, 30, 36, 0.3); } .sidebar-cta:active { background: var(--accent-dark); transform: scale(0.98); } .sidebar-cta.secondary { background: rgba(255, 255, 255, 0.15); color: #ffffff; /* CONTRAST FIX: Explicit white */ box-shadow: none; } .sidebar-cta.secondary:active { background: var(--border-color); } .sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10, 31, 68, 0.6); z-index: 1999; opacity: 0; visibility: hidden; transition: var(--transition); backdrop-filter: blur(5px); } .sidebar-overlay.is-visible { opacity: 1; visibility: visible; } /* Search Overlay */ .search-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(10, 31, 68, 0.98), rgba(5, 15, 34, 0.98)); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: var(--transition); } .search-overlay.is-open { opacity: 1; visibility: visible; } .search-container { width: 90%; max-width: 500px; text-align: center; } .search-close { position: absolute; top: 25px; right: 25px; width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border: none; border-radius: 14px; color: var(--text-light); font-size: 26px; cursor: pointer; transition: var(--transition-fast); } .search-close:active { background: rgba(255,255,255,0.2); transform: scale(0.95); } .search-container h3 { color: var(--text-light); font-family: var(--font-primary); font-size: 26px; font-weight: 700; margin-bottom: 35px; } .quick-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; } .quick-links span { color: rgba(255,255,255,0.5); font-size: 14px; } .quick-links a { padding: 10px 20px; background: rgba(255,255,255,0.1); border-radius: 25px; color: var(--text-light); text-decoration: none; font-size: 14px; font-weight: 500; transition: var(--transition-fast); } .quick-links a:active { background: var(--accent-color); } /* Dark Theme */ body.theme-dark { --bg-white: #1a1a2e; --bg-light: #16213e; --text-dark: #ffffff; --text-muted: #a0a0b0; --border-color: #2a2a4a; } body.theme-dark .header-mobile, body.theme-dark .footer-bar { background: var(--bg-white); } body.theme-dark .sidebar-menu { background: rgba(11, 17, 26, 0.98); } body.theme-dark .header-mobile .header-title { color: var(--text-light); } body.theme-dark .header-mobile .header-icon { color: var(--text-light); background: transparent; } body.theme-dark .sidebar-nav ul li a { color: var(--text-light); } body.theme-dark .sidebar-nav ul li a:active { background: rgba(255,255,255,0.08); } /* Mobile-Only Responsive Breakpoint */ @media (max-width: 991px) { /* CRITICAL: Hide entire header-wrapper on mobile to prevent blocking touch events */ .header-wrapper { display: none !important; pointer-events: none !important; } /* Coral top bar also hidden on mobile */ .coral-top-bar { display: none !important; } .header-mobile { display: flex !important; pointer-events: auto !important; } .footer-bar { display: flex !important; } .main-content { padding-top: 65px; padding-bottom: 75px; } .hero-section { padding-top: 85px; min-height: auto; padding-bottom: 130px; } .hero-text { max-width: 100%; text-align: center; } .hero-subtitle { font-size: 18px; } .hero-cta { padding: 16px 32px; font-size: 15px; } .feature-cards-section { margin-top: -80px; padding-bottom: 70px; } .feature-cards { grid-template-columns: 1fr; gap: 20px; padding: 0 10px; } .feature-card { padding: 35px 28px; } .about-section { padding: 70px 0; } .about-grid { grid-template-columns: 1fr; gap: 50px; } .about-image::before { display: none; } .experience-badge { bottom: -20px; right: 20px; padding: 22px 30px; } .experience-badge .years { font-size: 40px; } .section-label { padding-left: 0; } .section-label::before { display: none; } .services-section, .why-section, .process-section, .testimonials-section, .faq-section, .contact-section { padding: 70px 0; } .section-title { font-size: 30px; } .services-grid { grid-template-columns: 1fr; gap: 20px; } .why-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .process-steps { flex-direction: column; gap: 25px; } .process-step { max-width: 100%; padding: 30px 25px; } .step-number { font-size: 56px; } /* Exodus Process Steps - Mobile */ .process-section.exodus-process { padding: 60px 0; } .process-steps.exodus-process-steps { grid-template-columns: 1fr; gap: 20px; margin-top: 35px; } .process-step.exodus-step { padding: 35px 25px; display: flex; flex-direction: column; align-items: center; } .exodus-step .step-header { flex-direction: row; gap: 20px; margin-bottom: 20px; width: 100%; justify-content: center; } .exodus-step .step-index { font-size: 18px; font-weight: 800; color: #ffffff; margin-bottom: 0; line-height: 1; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent-color, #FF1654) 0%, #ff4d7a 100%); border-radius: 50%; box-shadow: 0 4px 15px rgba(255, 22, 84, 0.35); } .exodus-step .step-icon { width: 64px; height: 64px; } .exodus-step .step-icon i { font-size: 26px; } .exodus-step .step-title { font-size: 18px; margin-bottom: 12px; } .exodus-step .step-desc { font-size: 14px; line-height: 1.6; } .testimonial-card { padding: 35px 28px; } .contact-form { padding: 30px 25px; } .form-row { grid-template-columns: 1fr; gap: 15px; } .contact-buttons { flex-direction: column; } .contact-btn { width: 100%; justify-content: center; } .footer { padding: 70px 0 0; } .footer-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; } .footer-social { justify-content: center; } .footer-links h4::after, .footer-services h4::after, .footer-contact h4::after { left: 50%; transform: translateX(-50%); } .footer-contact ul li { justify-content: center; } .footer-bottom { padding: 25px 0 90px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .back-to-top { bottom: 85px; right: 20px; } } @media (max-width: 575px) { .why-grid { grid-template-columns: 1fr; } .why-card { padding: 30px 25px; } .section-title { font-size: 26px; } .section-label { font-size: 12px; } .faq-question { padding: 20px 22px; font-size: 15px; } .faq-answer p { padding: 20px 22px; } } /* ============================================ RESPONSIVE GRID FIXES - Override inline styles ============================================ */ /* Mobile-first responsive grid override */ @media (max-width: 767px) { /* Force all inline grids to stack on mobile */ /* Crosslink grids */ /* Responsive grid utility class */ } @media (max-width: 575px) { /* Force 4-column grids to single column on very small screens */ /* Ensure card text fits */ [style*="grid-template-columns"] h4 { font-size: 14px !important; } [style*="grid-template-columns"] p { font-size: 13px !important; line-height: 1.5; } .stats-grid { grid-template-columns: 1fr; } .cta-banner h2 { font-size: 24px; } .cta-banner p { font-size: 15px; } } /* Exodus Overlap Cards - Mobile: NO OVERLAP, cards flow after hero */ @media (max-width: 992px) { .hero-section.exodus-hero { margin-bottom: 0; padding-bottom: 40px; } .overlap-cards-wrapper { position: relative !important; transform: none !important; bottom: auto !important; left: auto !important; right: auto !important; background: transparent; padding: 30px 15px; } .overlap-cards { grid-template-columns: 1fr; gap: 15px; max-width: 400px; margin: 0 auto; } .overlap-card { padding: 25px 22px; border-radius: 14px; opacity: 0.92; } .overlap-card-icon { width: 55px; height: 55px; margin-bottom: 14px; } .overlap-card-icon i { font-size: 22px; } .overlap-card-title { font-size: 14px; margin-bottom: 10px; } .overlap-card-desc { font-size: 13px; line-height: 1.5; } /* Unified Card Layout Mobile */ .overlap-card { flex-direction: row; align-items: flex-start; gap: 14px; text-align: left; text-decoration: none; color: inherit; } .overlap-card-content { gap: 4px; } .overlap-card-badge { font-size: 9px; margin-top: 4px; } /* Logo Pills Mobile */ } @media (max-width: 575px) { .hero-section.exodus-hero { padding-bottom: 35px; } .overlap-cards-wrapper { padding: 25px 15px; } .overlap-cards { max-width: 100%; gap: 12px; } .overlap-card { padding: 22px 18px; border-radius: 12px; } .overlap-card-icon { width: 50px; height: 50px; margin-bottom: 12px; } .overlap-card-icon i { font-size: 20px; } .overlap-card-title { font-size: 13px; letter-spacing: 0.08em; } .overlap-card-desc { font-size: 12px; } } /* ============================================ MOBILE HERO CONTENT SWITCHER Single H1 always accessible, visual content toggles per breakpoint ============================================ */ /* Default (Desktop): Show desktop content, hide mobile-only content */ .hero-section.exodus-hero .hero-eyebrow-mobile, .hero-section.exodus-hero .hero-lead-mobile, .hero-section.exodus-hero .hero-bullets-mobile, .hero-section.exodus-hero .hero-cta-secondary-mobile { display: none !important; } .hero-section.exodus-hero .hero-lead-desktop, .hero-section.exodus-hero .hero-bullets-desktop, .hero-section.exodus-hero .hero-cta-secondary-desktop { display: block; } /* Mobile: Show mobile content, hide desktop-only content */ @media (max-width: 992px) { .hero-section.exodus-hero .hero-lead-desktop, .hero-section.exodus-hero .hero-bullets-desktop, .hero-section.exodus-hero .hero-cta-secondary-desktop { display: none !important; } .hero-section.exodus-hero .hero-eyebrow-mobile, .hero-section.exodus-hero .hero-lead-mobile, .hero-section.exodus-hero .hero-bullets-mobile, .hero-section.exodus-hero .hero-cta-secondary-mobile { display: block !important; } /* Mobile H1 styling - uppercase transform */ .hero-section.exodus-hero .hero-title.exodus-title .title-line { text-transform: uppercase; font-size: 24px; line-height: 1.25; letter-spacing: 0.5px; } /* Mobile Eyebrow Text Styling */ .hero-section.exodus-hero .hero-eyebrow-mobile { font-family: var(--font-secondary, 'Open Sans', sans-serif); font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin-bottom: 12px; text-align: center; } /* Mobile Hero Title - Match exodus-title specificity */ .hero-section.exodus-hero .hero-title.exodus-title { margin-bottom: 16px; } /* Mobile Lead - Concise, scannable */ .hero-section.exodus-hero .hero-lead-mobile { font-size: 14px; line-height: 1.5; margin-bottom: 14px; text-align: center; } /* Mobile Bullets - Tighter spacing */ .hero-section.exodus-hero .hero-bullets-mobile { margin-bottom: 18px; padding: 0 5px; } .hero-section.exodus-hero .hero-bullets-mobile li { font-size: 13px; margin-bottom: 8px; line-height: 1.4; } .hero-section.exodus-hero .hero-bullets-mobile li i { min-width: 22px; font-size: 14px; } } /* Extra small screens - tighter spacing */ @media (max-width: 576px) { .hero-section.exodus-hero .hero-title.exodus-title .title-line { font-size: 20px; letter-spacing: 0.3px; } .hero-section.exodus-hero .hero-lead-mobile { font-size: 13px; } .hero-section.exodus-hero .hero-bullets-mobile li { font-size: 12px; margin-bottom: 6px; } } /* ============================================ SIDEBAR LANGUAGE SWITCHER EN/AR toggle in mobile sidebar ============================================ */ .sidebar-lang-switch { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); } .sidebar-lang-switch .lang-label { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; font-weight: 500; } .sidebar-lang-switch .lang-label i { color: var(--accent-color, #FF1654); font-size: 1rem; } /* Override pill styling for sidebar context */ .sidebar-lang-switch .lang-switcher { flex-shrink: 0; } .sidebar-lang-switch .lang-pill { background: rgba(255, 255, 255, 0.1); padding: 8px 14px; border-radius: 25px; } .sidebar-lang-switch .lang-option { padding: 4px 8px; font-size: 0.85rem; } .sidebar-lang-switch .lang-option.is-active { background: rgba(255, 255, 255, 0.15); border-radius: 4px; }