/* ═══════════════════════════════════════════════════════════════════ VedicHymns · mobile.css · v3.1 Complete mobile device optimisation — index.html loads this last so every rule here wins over existing CSS. v3.1 fix: removed overflow-x:hidden from (sections 1 + 27). iOS Safari bug: any overflow on creates a new scroll container and breaks native page scroll on content pages. The dashboard was unaffected (scroll managed inside containers). overflow-x:hidden is now on only — sufficient to prevent horizontal bleed without killing vertical scroll. v2.0 additions over v1.0: · h1 headline font scaling with clamp() · iOS overscroll-behavior: contain on body, modals, overlays · -webkit-overflow-scrolling:touch on all scrollable containers · Drag-handle ::before on modal + topup bottom sheets · will-change:transform on animated layers (GPU compositing) · Intro section image hidden on small phones · Dashboard height 100dvh (-webkit-fill-available fallback) · Nav mobile panel: safe-area-top + smooth iOS scroll · Chatbot widget safe-area bottom-right · Accordion panel iOS momentum scroll v3.0 additions over v2.0: · Secondary page navs safe-area (about/contact/technology) · Hero stat pill wrapping on phones ≤480px · Secondary page footer safe-area bottom · Chatbot page: input-row safe-area + iOS scroll + zoom prevent · Legal pages: hero padding, content safe-area, table scroll · Technology page: principle-box stack + promise block phone sizes Breakpoints used: 860px nav centre-links hide → hamburger must appear 767px dashboard flips to mobile-grid 600px dash nav wraps to 2 rows; modal/topup → bottom sheets 480px small phone sizing 420px very small phone tweaks 400px stack hero CTAs 360px minimum supported width ═══════════════════════════════════════════════════════════════════ */ /* ── 1. DOCUMENT BASE ──────────────────────────────────────────── */ /* NOTE: overflow-x:hidden must NOT be set on . iOS Safari treats any overflow on as a new scroll container, which breaks native page scroll on all content pages. Set it on only — that is sufficient. */ html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } body { overflow-x: hidden; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; } /* Remove 300 ms click delay everywhere */ button, a, [role="button"], input[type="submit"], label { touch-action: manipulation; } /* CSS safe-area helpers */ :root { --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); } /* ── 2. NAV — gate nav hamburger at 860 px ──────────────────────── */ /* Centre links vanish at 860 px, so the hamburger must take over */ @media(max-width:860px) { .hamburger { display:block !important; } .nav-trust-badge { display:none !important; } } /* Tablet: compress gate-nav buttons so logo + CTA + ☰ fit */ @media(max-width:760px) { .btn-nav-cta { font-size:0.76rem; padding:7px 14px; } } /* Small phone: hide Sign In, keep CTA + hamburger */ @media(max-width:420px) { .btn-nav-in { display:none !important; } .btn-nav-cta { font-size:0.74rem; padding:7px 12px; } } /* ── 3. DASHBOARD NAV (2-row at ≤600 px) ───────────────────────── */ @media(max-width:600px) { /* Tighten the stacked row */ #nav.dash-mode .nav-inner { gap:5px; padding:8px 14px; } /* Credits widget: drop label, keep number */ .util-credits { padding:3px 9px; } .util-credits-num { font-size:0.94rem; } .util-credits-label { display:none; } /* Compact action buttons */ .btn-topup { padding:6px 11px; font-size:0.74rem; } .btn-signout { padding:5px 10px; font-size:0.72rem; } .btn-switch-profile { max-width:80px; font-size:0.66rem; padding:3px 7px; } } /* Mobile hamburger — guaranteed 44 × 44 tap target */ @media(max-width:860px) { .hamburger { min-width:44px; min-height:44px; display:flex !important; align-items:center; justify-content:center; padding:10px; } } /* Mobile nav drawer — safe-area padding */ @media(max-width:600px) { #nav-mobile-panel { padding-top: max(20px, calc(16px + var(--safe-t))); padding-bottom: max(20px, calc(16px + var(--safe-b))); padding-right: max(20px, var(--safe-r)); } } @media(max-width:360px) { #nav-mobile-panel { width:min(280px,92vw); padding:16px; } } /* Nav drawer scrollability + close button tap target */ #nav-mobile-drawer { overscroll-behavior: contain; } #nav-mobile-panel { -webkit-overflow-scrolling: touch; overflow-y: auto; overscroll-behavior: contain; } .nav-mobile-close { min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; } /* ── 4. STICKY CTA — safe-area bottom ──────────────────────────── */ #sticky-cta { padding-bottom: calc(12px + var(--safe-b)); } @media(max-width:420px) { #sticky-cta { flex-wrap: wrap; padding: 10px 16px calc(10px + var(--safe-b)); gap: 8px; } .sticky-cta-text { order:1; flex:1 1 100%; } .sticky-cta-btn { order:2; flex:1; text-align:center; } .sticky-cta-dismiss { order:3; } } /* ── 5. HERO ───────────────────────────────────────────────────── */ @media(max-width:600px) { .lp-hero { padding:56px 16px 48px; } .hero-trust { font-size:0.64rem; padding:4px 11px; } .hero-sub { font-size:0.9rem; line-height:1.65; } .hero-note { font-size:0.68rem; } .btn-primary { padding:12px 24px; font-size:0.9rem; } .btn-secondary{ padding:10px 20px; font-size:0.85rem; } } /* Fluid h1 scaling — prevents overflow on narrow screens */ @media(max-width:600px) { .lp-hero h1 { font-size:clamp(1.9rem, 8vw, 3rem); line-height:1.2; } } @media(max-width:400px) { .lp-hero h1 { font-size:clamp(1.6rem, 7.5vw, 2.4rem); } } /* Stack CTAs vertically on very small screens */ @media(max-width:400px) { .lp-hero { padding:48px 14px 40px; } .hero-ctas { flex-direction: column; align-items: stretch; gap: 8px; } .hero-ctas .btn-primary, .hero-ctas .btn-secondary { text-align: center; justify-content: center; width: 100%; } } /* ── 6. TRADITIONS MARQUEE ──────────────────────────────────────── */ .traditions-marquee { overflow:hidden !important; } @media(max-width:480px) { .traditions-marquee-track { animation-duration:80s; } .tm-item { font-size:0.76rem; padding:4px 10px; } } /* ── 7. SECTION PADDING (global reduction on phones) ────────────── */ @media(max-width:480px) { .intro-section, .apps-rows-section, .how-section, .why-section, .proof-section, .testimonials-section, .pricing-section, .faq-section { padding-top:40px; padding-bottom:40px; padding-left:16px; padding-right:16px; } .bottom-cta { padding:56px 16px; } .section-h2 { font-size:1.5rem; } .section-sub { font-size:0.84rem; } .section-label { font-size:0.62rem; } } /* ── 8. INTRO SECTION — image handling on mobile ─────────────────── */ @media(max-width:600px) { .intro-inner { flex-direction: column; } .intro-image { max-height: 200px; overflow: hidden; border-radius: 12px; } .intro-image img { width: 100%; object-fit:cover; object-position:center top; } } @media(max-width:480px) { /* Drop decorative image on small phones — saves ~200px vertical space */ .intro-image { display:none; } } /* ── 9. APP CARDS v2 ───────────────────────────────────────────── */ @media(max-width:600px) { /* Accordion header: large touch area */ .acc-header { min-height:60px; padding:14px 12px; } /* Clamp long description to 2 lines */ .acc-desc { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* App cards */ .app-card-v2-img-wrap { min-height:180px; padding:10px; } .app-card-v2-body { padding:18px 16px; } .app-card-v2-name { font-size:1.2rem; } .app-card-v2-desc { font-size:0.83rem; line-height:1.65; } } @media(max-width:400px) { .app-card-v2-img-wrap { min-height:150px; padding:8px; } .app-card-v2-body { padding:14px 12px; gap:9px; } .app-card-v2-name { font-size:1.1rem; } .app-card-v2-desc { font-size:0.8rem; } .app-card-v2-specs span { font-size:0.6rem; padding:2px 7px; } /* CTA at bottom of accordion list: full-width button */ .accordion-bottom-cta .btn-primary { width:100%; justify-content:center; } } /* iOS momentum scroll inside open accordion panels */ @media(max-width:767px) { .acc-panel-inner { -webkit-overflow-scrolling: touch; } } /* ── 10. HOW IT WORKS — step cards ──────────────────────────────── */ @media(max-width:480px) { .step-card { padding:20px 16px; } .step-num { width:32px; height:32px; font-size:0.9rem; margin-bottom:10px; } .step-card h3{ font-size:0.96rem; } .step-card p { font-size:0.8rem; } } /* ── 11. PROOF SECTION ──────────────────────────────────────────── */ @media(max-width:480px) { /* Drop the decorative image — save vertical space */ .proof-image { display:none; } .pq { font-size:0.82rem; } } /* ── 12. TESTIMONIALS ───────────────────────────────────────────── */ @media(max-width:480px) { .tcard-v2 { padding:16px 14px; } .tcard-v2-text { font-size:0.8rem; } .tcard-v2-name { font-size:0.8rem; } .tcard-v2-stars { font-size:0.75rem; } } /* ── 13. PRICING ────────────────────────────────────────────────── */ @media(max-width:360px) { .packs-row { grid-template-columns:1fr 1fr; } .pack { padding:14px 10px; } .pack-price { font-size:1.2rem; } .pack-creds { font-size:0.72rem; } } /* ── 14. STATS ─────────────────────────────────────────────────── */ @media(max-width:480px) { .stat-num { font-size:1.8rem; } .stat-label { font-size:0.72rem; } } @media(max-width:360px) { .stats-inner { gap:16px; } } /* ── 15. FAQ ────────────────────────────────────────────────────── */ @media(max-width:480px) { .faq-q { padding:14px 16px; font-size:0.84rem; min-height:48px; } .faq-a { padding:0 16px 14px; font-size:0.81rem; } } /* ── 16. FOOTER ─────────────────────────────────────────────────── */ @media(max-width:480px) { .footer-inner { padding:36px 16px calc(max(20px, 16px + var(--safe-b))); } .footer-tagline { font-size:0.78rem; } .footer-address { font-size:0.7rem; } .footer-links li a { font-size:0.78rem; } .footer-contact a { font-size:0.78rem; } .footer-bottom { font-size:0.66rem; line-height:1.7; } } /* ── 17. MODAL — bottom sheet on mobile ─────────────────────────── */ @media(max-width:600px) { .modal-bg { align-items: flex-end; padding: 0; overscroll-behavior: contain; } .modal { border-radius: 22px 22px 0 0; max-width: 100%; width: 100%; padding: 32px 20px calc(24px + var(--safe-b)); transform: translateY(24px) !important; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; box-shadow: 0 -8px 40px rgba(0,0,0,0.3); will-change: transform; } /* Drag handle indicator */ .modal::before { content: ''; display: block; width: 36px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; margin: -18px auto 18px; } .modal-bg.on .modal { transform: translateY(0) !important; } .modal h2 { font-size:1.25rem; } .modal .modal-sub { font-size:0.78rem; } .modal-x { top:12px; right:12px; } } /* ── 18. TOPUP OVERLAY — bottom sheet on mobile ─────────────────── */ @media(max-width:600px) { #topup-overlay { right: 0 !important; left: 0 !important; top: auto !important; bottom: 0 !important; max-height: 88vh; max-width: 100% !important; border-radius: 22px 22px 0 0; border-left: none; border-top: 1px solid var(--border); padding-top: 20px; padding-bottom: calc(20px + var(--safe-b)); box-shadow: 0 -8px 40px rgba(0,0,0,0.25); /* Slide up instead of in from right */ transform: translateY(100%) !important; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; will-change: transform; } /* Drag handle indicator */ #topup-overlay::before { content: ''; display: block; width: 36px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 2px; margin: -8px auto 16px; } #topup-overlay.visible { transform: translateY(0) !important; } .topup-title { font-size:1.1rem; } .topup-packs { grid-template-columns:1fr 1fr; gap:8px; } .topup-pack { padding:12px 10px; } } /* ── 19. INPUT FONT SIZE — prevent iOS zoom (must be ≥16 px) ───── */ @media(max-width:600px) { input[type="email"], input[type="password"], input[type="text"], input[type="date"], input[type="time"], input[type="number"], select, textarea, .coupon-input, .prof-form-row input, .prof-form-row select { font-size:16px !important; } } /* ── 20. TOUCH TARGETS — minimum 44 × 44 px ─────────────────────── */ @media(max-width:767px) { .nav-mobile-link { min-height:48px; } .mob-cat-pill { min-height:36px; padding:7px 14px; } .faq-q { min-height:48px; } .product-card { min-height:90px; } .sidebar-item { min-height:42px; } .topup-buy { min-height:42px; } .btn-auth { min-height:48px; } .btn-google { min-height:48px; } .tab { min-height:36px; } .coupon-btn { min-height:42px; } .acc-header { min-height:60px; } .prof-enter-btn { min-height:44px; } } /* ── 21. PROFILE SELECTOR ───────────────────────────────────────── */ @media(max-width:480px) { #profile-selector { padding: 72px 12px calc(80px + var(--safe-b)); } .prof-sel-title { font-size:1.2rem; } .prof-sel-sub { font-size:0.72rem; } /* Collapse 3-col date/time fields to 2 + 1 */ .prof-form-row-3col { grid-template-columns: 1fr 1fr; } .prof-form-row-3col > div:last-child { grid-column:1/-1; } .prof-form { padding:14px 12px; } .prof-form h4 { font-size:0.98rem; } .prof-drawer-title { font-size:1rem; } #profile-editor-drawer { padding:16px 16px calc(40px + var(--safe-b)); } /* Profile cards: 2 columns */ #profile-cards-grid { grid-template-columns:1fr 1fr; } } /* ── 22. DASHBOARD MOBILE GRID ──────────────────────────────────── */ @media(max-width:767px) { /* Product cards — improve touch & readability */ .product-card { min-height:90px; padding:13px 8px 11px; display:flex; flex-direction:column; align-items:center; justify-content:center; } .card-icon { font-size:1.35rem; margin-bottom:5px; } .card-label { font-size:0.73rem; } .card-tagline { font-size:0.58rem; } /* Category pill bar */ .mob-cat-pill { min-height:34px; font-size:0.68rem; } .mobile-cat-pills { padding-left: max(16px, var(--safe-l)); padding-right: max(16px, var(--safe-r)); } /* Grid card container */ #product-grid-cards { padding-left: max(12px, var(--safe-l)); padding-right: max(12px, var(--safe-r)); } /* Header */ .mobile-grid-header { padding:14px 14px 0; } .mobile-grid-title { font-size:1.05rem; } .mobile-grid-sub { font-size:0.72rem; } /* Footer in mobile grid */ .mobile-footer { padding-bottom: calc(8px + var(--safe-b)); } /* Dash nav right row — tighter gap */ #nav-dash-right { gap:6px !important; } /* Desktop home grid (tablet landscape) */ .dash-home-grid { padding:20px 16px 60px; } .dhg-greeting { font-size:1.2rem; } .dhg-grid { grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:8px; } .dhg-card { padding:12px 8px 10px; } .dhg-card-icon { font-size:1.35rem; margin-bottom:5px; } .dhg-card-name { font-size:0.74rem; } } /* iOS momentum scroll + overscroll containment */ @media(max-width:767px) { #mobile-grid { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } #mobile-grid.visible { padding-bottom: calc(16px + var(--safe-b)); } #sidebar { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; will-change: transform; } } /* ── 23. MOBILE PRODUCT VIEW — safe-area + performance ──────────── */ #mobile-product-view.open { padding-bottom: var(--safe-b); will-change: transform; } /* Prevent iOS iframe bounce scroll bleeding to parent */ #mobile-product-iframe { overscroll-behavior: contain; } /* ── 24. SIDEBAR (mobile drawer) ────────────────────────────────── */ @media(max-width:767px) { .sidebar-item { min-height:42px; } .si-label { font-size:0.84rem; } } /* ── 25. PWA BANNERS ───────────────────────────────────────────── */ @media(max-width:600px) { #pwa-banner { padding-bottom: calc(10px + var(--safe-b)); padding-left: max(16px, var(--safe-l)); padding-right: max(16px, var(--safe-r)); } #pwa-ios-tip { padding-bottom: calc(14px + var(--safe-b)); padding-left: max(16px, var(--safe-l)); padding-right: max(16px, var(--safe-r)); } } /* ── 26. WHY GRID & MISC — extra small phones ───────────────────── */ @media(max-width:360px) { .why-grid { grid-template-columns:1fr !important; } .packs-row { grid-template-columns:1fr 1fr; } .stats-inner{ gap:16px; } } /* ── 27. GLOBAL OVERFLOW LOCK ──────────────────────────────────── */ /* IMPORTANT: must NOT have overflow-x:hidden — iOS Safari bug. Setting any overflow on creates a scroll container and breaks native page scroll on all content pages. only is sufficient. */ @media(max-width:767px) { body { overflow-x:hidden !important; } } /* ── 28. DASHBOARD — dynamic viewport height fix ─────────────────── */ /* 100vh on iOS doesn't account for the browser chrome. Use 100dvh */ /* with -webkit-fill-available as the legacy fallback. */ @media(max-width:767px) { #dashboard { height: -webkit-fill-available; height: 100dvh; } #profile-selector { min-height: -webkit-fill-available; min-height: 100dvh; } } /* ── 29. CHATBOT WIDGET — safe-area ──────────────────────────────── */ /* The chatbot FAB is fixed bottom-right; lift it above home indicator */ @media(max-width:600px) { /* Cover common chatbot class patterns used in chatbot-widget.js */ .chatbot-fab, .chatbot-trigger, #chatbot-fab, #chatbot-trigger { bottom: calc(72px + var(--safe-b)) !important; right: max(16px, var(--safe-r)) !important; } .chatbot-panel, #chatbot-panel { bottom: calc(140px + var(--safe-b)) !important; max-height: calc(70vh - var(--safe-b)); right: max(16px, var(--safe-r)) !important; left: max(16px, var(--safe-l)) !important; width: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } } /* ── 30. PERFORMANCE HINTS (GPU compositing on animated layers) ──── */ @media(max-width:767px) { /* Only hint will-change during animation windows; JS removes it after */ .nav-hidden { will-change: transform; } .modal { will-change: transform; } #topup-overlay { will-change: transform; } #mobile-product-view { will-change: transform; } } /* ═══════════════════════════════════════════════════════════════════ v3.0 — SECONDARY PAGES Sections 31-36 target about.html, contact.html, technology.html, chatbot.html, terms.html, privacy.html, refund.html. All these pages now link mobile.css so these rules are active. ═══════════════════════════════════════════════════════════════════ */ /* ── 31. SECONDARY PAGE NAVS (.about-nav, .c-nav, .t-nav) ────────── */ /* Safe-area l/r + CTA button sizing for about/contact/technology */ @media(max-width:600px) { .about-nav, .c-nav, .t-nav { padding-left: max(16px, var(--safe-l)); padding-right: max(16px, var(--safe-r)); } .about-nav-cta, .c-nav-cta, .t-nav-cta { padding:7px 14px; font-size:0.76rem; } } /* ── 32. STAT PILLS / STAT ROWS — wrapping on small phones ──────── */ @media(max-width:480px) { /* about.html hero stats */ .about-hero-stats { gap:8px; } .about-stat-pill { padding:8px 12px; } .about-stat-num { font-size:1.25rem; } /* technology.html hero stats */ .t-stat-row { gap:8px; } .t-stat { padding:10px 12px; min-width:90px; } .t-stat-num { font-size:1.4rem; } .t-stat-label { font-size:0.58rem; } } /* ── 33. SECONDARY PAGE FOOTERS — safe-area bottom ──────────────── */ @media(max-width:600px) { .about-footer, .c-footer, .t-footer { padding-bottom: calc(24px + var(--safe-b)); padding-left: max(24px, var(--safe-l)); padding-right: max(24px, var(--safe-r)); } /* Legal pages: .footer class (dark bar, cream pages) */ /* Target specifically so it doesn't affect landing .footer-inner */ .nav-back + * + * .footer, body > .footer { padding-bottom: calc(24px + var(--safe-b)); } } /* ── 34. CHATBOT PAGE — input safe-area + iOS scroll ─────────────── */ @media(max-width:767px) { /* Nav safe-area */ .cbot-nav { padding-left: max(16px, var(--safe-l)); padding-right: max(16px, var(--safe-r)); } /* Input row — lift above iOS home indicator */ .cbot-input-row { padding-bottom: calc(12px + var(--safe-b)); padding-left: max(12px, var(--safe-l)); padding-right: max(12px, var(--safe-r)); } /* Suggestions bar */ .cbot-suggestions-bar { padding-left: max(12px, var(--safe-l)); padding-right: max(12px, var(--safe-r)); } /* Message list iOS scroll */ .cbot-messages { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Prevent iOS auto-zoom on textarea */ .cbot-input { font-size:16px !important; } /* Wider bubbles on narrow phones */ .cbot-msg { max-width:88%; } /* Suggestion chips touch targets */ .cbot-sug { min-height:36px; display:inline-flex; align-items:center; } } /* ── 35. LEGAL PAGES (terms / privacy / refund) ─────────────────── */ /* Target .hero on legal pages without overriding .lp-hero on landing */ @media(max-width:600px) { .hero:not(.lp-hero) { padding: 40px 16px 32px; } .hero:not(.lp-hero) h1 { font-size: clamp(1.5rem, 6vw, 2.4rem); } /* Legal content block: add safe-area bottom padding */ .content { padding-bottom: calc(60px + var(--safe-b)); } /* Horizontally scrollable data tables */ .data-table-wrap { -webkit-overflow-scrolling: touch; overflow-x: auto; } /* Scenario cards — tighter on small phones */ .scenario-card { padding:16px; } } /* ── 36. TECHNOLOGY PAGE — principle boxes + promise block ─────── */ @media(max-width:480px) { .t-principle-box { flex-direction: column; gap: 10px; padding: 18px 16px; } .t-principle-icon { margin-top:0; } .t-promise { padding:24px 16px; } .t-promise h3 { font-size:1.2rem; } .t-promise p { font-size:0.82rem; } }