/* ============================================================================ Mobile Home Engine — css/pages/home-mobile.css Loaded via so desktop never parses this. All selectors scoped to .rwd-mobile or the .mhe-* prefix. ============================================================================ */ /* ── Hero Flip Carousel ──────────────────────────────────────────────────── */ /* .hero-carousel-section picks up horizontal section padding meant for regular content sections; the mobile flip carousel is full-bleed, so strip it here rather than fight it with width:calc() on the child. !important because a same-specificity global rule (loaded after this file in source order) was still winning without it. */ .hero-carousel-section { padding-inline: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .mhe-hero-flip, .mhe-hero-flip * { touch-action: pan-y; } .mhe-hero-flip { position: relative; width: 100%; /* body has padding-top: var(--nav-height-mobile) (68px, navigation.css) to clear the fixed navbar -- the previous hardcoded 64px here was a stale approximation of that same value, four pixels short, meaning this hero's bottom edge (and its nav dots) sat 4px below the fold on top of stacking with body's own reserved space. Reference the actual variable so this can never drift from the real nav height again. */ /* dvh, not a JS-computed value: dvh is a browser-native unit the layout engine recalculates immediately as the address bar shows/hides during scroll. A JS-computed viewport height (tried here and removed) updates via a debounced resize listener, which can lag behind the address bar's own animation and leave a gap where the next section peeks in below the hero before its actual bottom edge -- exactly the bug this was meant to fix, but on a real device the debounce made it worse. */ height: calc(100dvh - var(--nav-height-mobile, 68px)); overflow: clip; /* clip≠scroll-container → touch-scroll propagates to body on iOS */ } .mhe-hero-flip__viewport { position: relative; width: 100%; height: calc(100% - 48px); } .mhe-hero-flip__track { display: flex; height: 100%; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } .mhe-hero-flip__item { flex: 0 0 100%; width: 100%; height: 100%; perspective: 1200px; flex-shrink: 0; } .mhe-hero-flip__card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s ease; will-change: transform; } .mhe-hero-flip__card--flipped { transform: rotateY(180deg); } .mhe-hero-flip__face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; /* Top-aligned (not centered): when content is tall enough to nearly fill the card, centering left almost no top margin, so the eyebrow/title rendered directly under the "More" button and visually collided with it. Starting content below the button's reserved zone and letting any overflow land at the bottom (now safely covered by that same "More" button) avoids the collision regardless of how much content a slide has. */ justify-content: flex-start; align-items: center; padding: 3rem 1.25rem 1.5rem; overflow: clip; text-align: center; } .mhe-hero-flip__more-btn { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 5; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.35); color: #ffffff; font-size: 0.7rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(4px); } .mhe-hero-flip__more-btn:active { background: rgba(0, 0, 0, 0.5); } .mhe-hero-flip__face--back { transform: rotateY(180deg); background: var(--color-bg-card, #1a1a2e); } .mhe-hero-flip__face--front { background: var(--color-bg-base, #0f0f23); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); } .mhe-hero-flip__face .hero-carousel__eyebrow { font-size: 0.7rem; margin-bottom: 0.5rem; } .mhe-hero-flip__face .hero-carousel__title { font-size: clamp(1.2rem, 5vw, 1.6rem); line-height: 1.25; margin-bottom: 0.75rem; } .mhe-hero-flip__face .hero-carousel__subtitle { font-size: 0.78rem; line-height: 1.45; margin-bottom: 0.75rem; } .mhe-hero-flip__face .hero-carousel__cta { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .mhe-hero-flip__face .hero-carousel__cta .btn { font-size: 0.8rem; padding: 0.5rem 1rem; } .mhe-hero-flip__face .hero-trust-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin-top: 0.75rem; font-size: 0.7rem; } .mhe-hero-flip__face .hero__images { display: flex; gap: 0.5rem; justify-content: center; align-items: center; max-height: 60%; overflow: clip; } .mhe-hero-flip__face .hero__card-img { max-height: 160px; width: auto; object-fit: contain; } .mhe-hero-flip__face .hero-carousel__stats-card { transform: scale(0.75); transform-origin: center; } .mhe-hero-flip__face .team__grid { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; overflow-y: auto; max-height: 80%; } .mhe-hero-flip__face .team__card { display: flex; gap: 0.75rem; align-items: center; background: var(--color-bg-elevated, rgba(255,255,255,0.05)); border-radius: 0.75rem; padding: 0.75rem; } .mhe-hero-flip__face .team__card-image { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .mhe-hero-flip__face .team__photo { width: 100%; height: 100%; object-fit: cover; } .mhe-hero-flip__face .team__bio { display: none; } .mhe-hero-flip__tap-hint { position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%); font-size: 0.65rem; color: var(--color-text-muted, rgba(255,255,255,0.4)); pointer-events: none; transition: opacity 0.3s; } .mhe-hero-flip__nav { position: absolute; bottom: 0; left: 0; right: 0; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--color-bg-overlay, rgba(0,0,0,0.3)); } .mhe-hero-flip__dot { width: 6px; height: 6px; min-height: 6px !important; min-width: 6px !important; border-radius: 50%; border: none; background: var(--color-text-muted, rgba(255,255,255,0.3)); cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; } .mhe-hero-flip__dot--active { background: var(--color-text-primary, #fff); transform: scale(1.2); } /* ── Mobile hero flip: force white text (desktop selectors don't match here) */ .mhe-hero-flip__face--front .hero-carousel__title, .mhe-hero-flip__face--front .hero-carousel__title * { color: #ffffff !important; } .mhe-hero-flip__face--front .hero-carousel__subtitle { color: rgba(255, 255, 255, 0.92) !important; } .mhe-hero-flip__face--front .hero-trust-badge, .mhe-hero-flip__face--front .hero-trust-badge * { color: #ffffff !important; } /* Re-pin per-slide accent colours after the * wildcard above */ .mhe-hero-flip__item:nth-child(1) .heading-accent { color: #c4b5fd !important; } .mhe-hero-flip__item:nth-child(2) .hero-carousel__title-accent { color: #6ee7b7 !important; } .mhe-hero-flip__item:nth-child(3) .hero-carousel__title-accent { color: #fde68a !important; } /* ── Services Slide Carousel ─────────────────────────────────────────────── */ .rwd-mobile .services__description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rwd-mobile #servicesCarousel { padding: 0; } .rwd-mobile #services .container { padding-inline: 0; } .rwd-mobile .services__header { padding-inline: 1rem; } .mhe-svc-slide { position: relative; overflow: hidden; width: 100%; padding: 0 0 48px; } .mhe-svc-slide, .mhe-svc-slide * { touch-action: pan-y; } .mhe-svc-slide__viewport { overflow: hidden; width: 100%; } .mhe-svc-slide__track { display: flex; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } .mhe-svc-slide__card { flex: 0 0 100%; width: 100%; padding: 0 1rem; box-sizing: border-box; } .mhe-svc-slide__card-inner { background: var(--color-bg-card, #1a1a2e); border-radius: 1rem; overflow: hidden; border: 1px solid var(--border-color, rgba(255,255,255,0.08)); } .mhe-svc-slide__img { width: 100%; height: 200px; object-fit: cover; display: block; } .mhe-svc-slide__body { padding: 1.25rem; } .mhe-svc-slide__name { font-size: 1.15rem; font-weight: 700; color: var(--color-text-primary, #fff); margin: 0 0 0.75rem; } .mhe-svc-slide__bullets { list-style: none; padding: 0; margin: 0 0 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; } .mhe-svc-slide__bullets li { font-size: 0.85rem; color: var(--color-text-secondary, rgba(255,255,255,0.7)); display: flex; align-items: center; gap: 0.5rem; } .mhe-svc-slide__bullets li::before { content: '✓'; color: var(--accent-color, #10b981); font-weight: 700; flex-shrink: 0; } .mhe-svc-slide__more-btn { background: none; border: none; color: var(--accent-color, #10b981); font-size: 0.82rem; font-weight: 600; cursor: pointer; padding: 0.25rem 0; text-decoration: underline; text-underline-offset: 2px; } .mhe-svc-slide__footer { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; border-top: 1px solid var(--border-color, rgba(255,255,255,0.08)); } .mhe-svc-slide__badge { height: 28px; width: auto; opacity: 0.7; } .mhe-svc-slide__see-more { background: var(--color-bg-elevated, rgba(255,255,255,0.07)); border: 1px solid var(--border-color, rgba(255,255,255,0.15)); color: var(--color-text-primary, #fff); font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.9rem; border-radius: 6px; cursor: pointer; transition: background 0.2s; } .mhe-svc-slide__see-more:active { background: rgba(255,255,255,0.15); } .mhe-svc-slide__nav { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; } .mhe-svc-slide__dot { width: 5px; height: 5px; min-height: 5px !important; min-width: 5px !important; border-radius: 50%; border: none; background: var(--color-text-muted, rgba(255,255,255,0.25)); cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; } .mhe-svc-slide__dot--active { background: var(--accent-color, #10b981); transform: scale(1.2); } /* ── All-Services Modal ──────────────────────────────────────────────────── */ .mhe-all-svc-list { display: flex; flex-direction: column; gap: 0.75rem; } .mhe-all-svc-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.75rem; background: var(--color-bg-elevated, rgba(255,255,255,0.05)); } .mhe-all-svc-item__icon { font-size: 1.5rem; flex-shrink: 0; } .mhe-all-svc-item__info { flex: 1; min-width: 0; } .mhe-all-svc-item__name { font-size: 0.92rem; font-weight: 600; color: var(--color-text-primary, #fff); margin: 0 0 0.15rem; } .mhe-all-svc-item__desc { font-size: 0.78rem; color: var(--color-text-secondary, rgba(255,255,255,0.6)); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Quick Bar (replaces Team+AI+Testimonials section) ───────────────────── */ .mhe-quick-bar { display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--color-bg-elevated, rgba(255,255,255,0.03)); border-top: 1px solid var(--border-color, rgba(255,255,255,0.06)); border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06)); } .mhe-quick-bar__btn { display: inline-flex !important; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem !important; border-radius: 6px; border: 1px solid var(--border-color, rgba(255,255,255,0.15)); background: var(--color-bg-card, #1a1a2e); color: var(--color-text-primary, #fff); font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: background 0.2s; min-height: unset !important; white-space: nowrap; } .mhe-quick-bar__btn:active { background: rgba(255,255,255,0.1); } .mhe-quick-bar__btn svg { width: 12px; height: 12px; flex-shrink: 0; } /* ── Testimonials Modal ──────────────────────────────────────────────────── */ .mhe-test-modal__list { display: flex; flex-direction: column; gap: 1rem; } .mhe-test-card { padding: 1rem; border-radius: 0.75rem; background: var(--color-bg-elevated, rgba(255,255,255,0.04)); border: 1px solid var(--border-color, rgba(255,255,255,0.06)); } .mhe-test-card__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; } .mhe-test-card__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-color, #10b981); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; flex-shrink: 0; } .mhe-test-card__name { font-size: 0.85rem; font-weight: 600; color: var(--color-text-primary, #fff); } .mhe-test-card__role { font-size: 0.7rem; color: var(--color-text-secondary, rgba(255,255,255,0.5)); } .mhe-test-card__body { font-size: 0.82rem; color: var(--color-text-secondary, rgba(255,255,255,0.75)); line-height: 1.6; } .mhe-test-card__media { margin-top: 0.75rem; } .mhe-test-card__media video, .mhe-test-card__media audio { width: 100%; border-radius: 0.5rem; } .mhe-test-modal__pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-color, rgba(255,255,255,0.08)); } .mhe-test-modal__page-btn { background: var(--color-bg-elevated, rgba(255,255,255,0.07)); border: 1px solid var(--border-color, rgba(255,255,255,0.15)); color: var(--color-text-primary, #fff); font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.9rem; border-radius: 6px; cursor: pointer; transition: opacity 0.2s; } .mhe-test-modal__page-btn:disabled { opacity: 0.3; cursor: not-allowed; } .mhe-test-modal__page-info { font-size: 0.78rem; color: var(--color-text-secondary, rgba(255,255,255,0.5)); } /* ── ISP Section (International Student Package) ─────────────────────────── */ .rwd-mobile .mhe-isp-tag { font-size: 0.92rem; color: var(--color-text-secondary, #4b5563); max-width: 340px; margin: 0 auto; line-height: 1.5; text-align: center; } .rwd-mobile .mhe-isp-more-btn { display: inline-block; margin-top: 1rem; padding: 0.65rem 1.5rem; border-radius: 8px; border: 1px solid var(--color-primary, #4f46e5); background: transparent; color: var(--color-primary, #4f46e5); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.2s; } .rwd-mobile .mhe-isp-more-btn:active { background: color-mix(in srgb, var(--color-primary, #4f46e5) 8%, transparent); } .mhe-isp-modal__cards { display: flex; flex-direction: column; gap: 0.75rem; pointer-events: none; } .mhe-isp-modal__card { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem; border-radius: 0.75rem; background: var(--color-bg-elevated, rgba(255,255,255,0.04)); } .mhe-isp-modal__card-icon { font-size: 1.4rem; flex-shrink: 0; } .mhe-isp-modal__card-name { font-size: 0.88rem; font-weight: 600; color: var(--color-text-primary, #fff); margin: 0 0 0.2rem; } .mhe-isp-modal__card-desc { font-size: 0.78rem; color: var(--color-text-secondary, rgba(255,255,255,0.6)); margin: 0; line-height: 1.5; } .mhe-isp-modal__cta { pointer-events: auto; text-align: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-color, rgba(255,255,255,0.08)); } .mhe-isp-modal__cta a { display: inline-block; background: var(--color-primary, #4f46e5); color: #fff; font-weight: 700; font-size: 0.92rem; padding: 0.75rem 1.75rem; border-radius: 10px; text-decoration: none; } .mhe-isp-modal__cta p { font-size: 0.72rem; color: var(--color-text-secondary, rgba(255,255,255,0.45)); margin: 0.5rem 0 0; } /* ── Newsletter Compaction ────────────────────────────────────────────────── */ .rwd-mobile #newsletter { padding-block: 1.5rem !important; } .rwd-mobile .newsletter__container { gap: 0.5rem; } .rwd-mobile .newsletter__title { font-size: 1.05rem !important; margin-bottom: 0.4rem; } .rwd-mobile .newsletter__subtext { font-size: 0.75rem; line-height: 1.4; margin-top: 0.4rem; } .rwd-mobile .newsletter__bg-img { max-height: 160px; object-fit: cover; } .rwd-mobile .newsletter__input-group { flex-direction: column; gap: 0.5rem; } .rwd-mobile .newsletter__input { font-size: 0.85rem; } .rwd-mobile .newsletter__btn { font-size: 0.82rem; padding: 0.6rem; } /* ── Desktop-element hiding on mobile ────────────────────────────────────── */ .rwd-mobile .mhe-desktop-hide { display: none !important; } .mhe-mobile-show { display: none; } .rwd-mobile .mhe-mobile-show { display: block; } /* ── Reduced motion ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .mhe-hero-flip__card { transition: opacity 0.3s ease !important; } .mhe-hero-flip__card--flipped { transform: none !important; } .mhe-svc-slide__track { transition: none !important; } }