/* * Meritza Classes Mobile PWA Experience * Mobile-first app shell + Rocket-inspired Home * * IMPORTANT: * This file only affects mobile/PWA view. * Desktop website styling remains unchanged. */ .mc-pwa-mobile-topbar, .mc-mobile-pwa-nav { display: none; } /* ========================================================== MOBILE / PWA ========================================================== */ @media (max-width: 767.98px) { :root { --mc-pwa-navy: #0A1946; --mc-pwa-purple: #5146E5; --mc-pwa-purple-light: #7075F4; --mc-pwa-gold: #D4AF37; --mc-pwa-bg: #FFFFFF; --mc-pwa-muted: #71809A; --mc-pwa-border: #E7EBF2; --mc-pwa-nav-height: 68px; } /* ====================================================== GLOBAL MOBILE CANVAS ====================================================== */ html, body { background: #FFFFFF !important; background-image: none !important; background-color: #FFFFFF !important; overflow-x: hidden !important; } body { padding-bottom: calc( var(--mc-pwa-nav-height) + env(safe-area-inset-bottom) + 8px ) !important; } /* ====================================================== REMOVE DESKTOP WEBSITE ELEMENTS ====================================================== */ .mc-navbar, .mc-public-footer, .mc-footer, .mc-breadcrumbs, .breadcrumb, .breadcrumbs, .mc-page-title, .mc-page-description, .mc-admin-eyebrow, .mc-admin-heading h1, .mc-admin-heading p, .mc-parent-heading h1, .mc-parent-heading p, .mc-tutor-module-eyebrow, .mc-tutor-module-heading h1, .mc-tutor-module-heading p, .mc-module-eyebrow, .mc-module-heading h1, .mc-module-heading p { display: none !important; } /* ====================================================== COMPACT PWA TOP BAR ====================================================== */ .mc-pwa-mobile-topbar { position: sticky; top: 0; z-index: 10020; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 58px; height: 58px; padding: 8px 14px; background: #FFFFFF !important; background-image: none !important; border-bottom: 1px solid #E8ECF3; box-shadow: 0 2px 12px rgba(10, 25, 70, 0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .mc-pwa-mobile-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--mc-pwa-navy) !important; text-decoration: none !important; font-family: Poppins, Inter, sans-serif; font-size: 15px; font-weight: 600; } .mc-pwa-mobile-brand-icon { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--mc-pwa-purple) !important; } .mc-pwa-mobile-brand-icon img { width: 19px; height: 19px; object-fit: cover; border-radius: 50%; } .mc-pwa-mobile-notification { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #F0F2F8 !important; color: var(--mc-pwa-navy) !important; text-decoration: none !important; } .mc-pwa-mobile-notification i { font-size: 17px; } .mc-pwa-mobile-notification-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border: 2px solid #F0F2F8; border-radius: 50%; background: #F0445A; } /* ====================================================== PERSISTENT BOTTOM NAVIGATION ====================================================== */ .mc-mobile-pwa-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10030; display: grid; grid-template-columns: repeat( 4, minmax(0, 1fr) ); min-height: var(--mc-pwa-nav-height); padding: 5px 8px calc( 5px + env(safe-area-inset-bottom) ); background: linear-gradient( 135deg, #0A1946 0%, #123563 52%, #184879 100% ) !important; background-image: linear-gradient( 135deg, #0A1946 0%, #123563 52%, #184879 100% ) !important; border-top: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 -5px 18px rgba(10, 25, 70, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .mc-mobile-pwa-nav a { min-width: 0; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 13px; color: rgba(255, 255, 255, 0.78) !important; background: transparent !important; text-decoration: none !important; font-family: Poppins, Inter, sans-serif; font-size: 9px; font-weight: 500; line-height: 1.1; -webkit-tap-highlight-color: transparent; } .mc-mobile-pwa-nav a i { font-size: 19px; line-height: 1; } .mc-mobile-pwa-nav a.active { color: #FFFFFF !important; font-weight: 700; } .mc-mobile-pwa-nav a.active i { transform: translateY(-1px); } .mc-mobile-pwa-nav .mc-pwa-install-mobile[hidden] { display: none !important; } .mc-mobile-pwa-nav .mc-pwa-install-mobile { cursor: pointer; } /* * The Install App item is hidden by default and after the * app has been installed. In that state the four regular * navigation items must use the full available width. * * When the browser exposes the install prompt, the button * becomes visible and the navigation expands to five equal * columns. */ .mc-mobile-pwa-nav:has( .mc-pwa-install-mobile:not([hidden]) ) { grid-template-columns: repeat( 5, minmax(0, 1fr) ); } /* ====================================================== GENERIC MOBILE PAGES ====================================================== */ main, .mc-admin-page, .mc-parent-page, .mc-tutor-module-page, .mc-student-module-page { padding-top: 0 !important; background: #FFFFFF !important; background-image: none !important; } .mc-admin-container, .mc-parent-container { width: min( calc(100% - 24px), 1180px ) !important; } /* ====================================================== PUBLIC HOME ====================================================== */ .mc-home-page.mc-pwa-mobile { padding: 0 0 18px !important; background: #FFFFFF !important; background-image: none !important; background-color: #FFFFFF !important; } /* Every direct section on Home is white. */ .mc-home-page.mc-pwa-mobile > section { background: #FFFFFF !important; background-image: none !important; background-color: #FFFFFF !important; } /* Generic Home section wrappers. */ .mc-home-page.mc-pwa-mobile .mc-home-section, .mc-home-page.mc-pwa-mobile .mc-home-stats, .mc-home-page.mc-pwa-mobile .mc-subjects, .mc-home-page.mc-pwa-mobile .mc-featured-tutors, .mc-home-page.mc-pwa-mobile .mc-final-cta { background: #FFFFFF !important; background-image: none !important; background-color: #FFFFFF !important; } /* * Remove decorative backgrounds from Home sections. * This catches gradients/background artwork applied * through pseudo elements or inherited wrappers. */ .mc-home-page.mc-pwa-mobile section::before, .mc-home-page.mc-pwa-mobile section::after, .mc-home-page.mc-pwa-mobile .mc-home-section::before, .mc-home-page.mc-pwa-mobile .mc-home-section::after, .mc-home-page.mc-pwa-mobile .mc-subjects::before, .mc-home-page.mc-pwa-mobile .mc-subjects::after, .mc-home-page.mc-pwa-mobile .mc-featured-tutors::before, .mc-home-page.mc-pwa-mobile .mc-featured-tutors::after, .mc-home-page.mc-pwa-mobile .mc-final-cta::before, .mc-home-page.mc-pwa-mobile .mc-final-cta::after { background: transparent !important; background-image: none !important; box-shadow: none !important; } /* ====================================================== HERO ====================================================== */ /* * Hero remains coloured. * This is the ONLY major Home background that * intentionally remains coloured. */ .mc-home-page.mc-pwa-mobile .mc-hero-shell { height: 152px !important; min-height: 152px !important; margin: 6px 13px 0 !important; border-radius: 20px !important; overflow: hidden !important; background: linear-gradient( 135deg, #0A1946 0%, #123563 52%, #184879 100% ) !important; background-image: linear-gradient( 135deg, #0A1946 0%, #123563 52%, #184879 100% ) !important; box-shadow: 0 10px 24px rgba(10, 25, 70, 0.20); } .mc-home-page.mc-pwa-mobile .mc-hero { min-height: 152px !important; height: 152px !important; padding: 12px 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; background-image: none !important; } .mc-home-page.mc-pwa-mobile .mc-hero .mc-container { width: 100% !important; max-width: none !important; padding: 0 !important; } .mc-home-page.mc-pwa-mobile .mc-hero-content { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .mc-home-page.mc-pwa-mobile .mc-hero-background, .mc-home-page.mc-pwa-mobile .mc-hero-academic-bg, .mc-home-page.mc-pwa-mobile .mc-hero-badge, .mc-home-page.mc-pwa-mobile .mc-hero-description { display: none !important; } .mc-home-page.mc-pwa-mobile .mc-hero .mc-title-line, .mc-home-page.mc-pwa-mobile .mc-hero .mc-title-highlight, .mc-home-page.mc-pwa-mobile .mc-hero h1 { display: block !important; margin: 0 !important; color: #FFFFFF !important; font-size: 25px !important; font-weight: 800 !important; line-height: 1.03 !important; letter-spacing: -0.6px !important; } .mc-home-page.mc-pwa-mobile .mc-hero .mc-title-highlight { color: #FFE16A !important; } /* ====================================================== HERO BUTTONS ====================================================== */ /* * Only Book Free Counselling remains. * Explore Tutors is removed. */ .mc-home-page.mc-pwa-mobile .mc-hero-actions .mc-hero-btn-gold, .mc-home-page.mc-pwa-mobile .mc-hero-actions a[href*="/tutors"] { display: none !important; } .mc-home-page.mc-pwa-mobile .mc-hero-actions { display: flex !important; gap: 7px !important; margin-top: 10px !important; } .mc-home-page.mc-pwa-mobile .mc-hero-actions .mc-hero-btn-light { width: 100% !important; justify-content: center !important; text-align: center !important; min-height: 38px !important; height: 38px !important; font-size: 11px !important; } .mc-home-page.mc-pwa-mobile .mc-hero-btn { min-height: 34px !important; height: 34px !important; padding: 0 12px !important; border-radius: 999px !important; font-size: 9px !important; font-weight: 700 !important; } /* ====================================================== STATS ====================================================== */ .mc-home-page.mc-pwa-mobile .mc-home-stats { padding: 10px 13px 4px !important; background: #FFFFFF !important; background-image: none !important; } .mc-home-page.mc-pwa-mobile .mc-stats-card { display: grid !important; grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; border-radius: 16px !important; } .mc-home-page.mc-pwa-mobile .mc-stats-card .mc-stat-item { min-height: 64px !important; padding: 9px 7px !important; } .mc-home-page.mc-pwa-mobile .mc-stats-card .mc-stat-item:nth-child(3)::before { display: none !important; } .mc-home-page.mc-pwa-mobile .mc-stats-card .mc-stat-item:nth-child(odd)::after { content: '' !important; position: absolute; right: 0; top: 22%; width: 1px; height: 56%; background: rgba( 255, 255, 255, 0.16 ) !important; } .mc-home-page.mc-pwa-mobile .mc-stats-card .mc-stat-item strong { font-size: 17px !important; } .mc-home-page.mc-pwa-mobile .mc-stats-card .mc-stat-item span { margin-top: 4px !important; font-size: 8px !important; } /* ====================================================== HIDE HEAVY WEBSITE SECTIONS ====================================================== */ .mc-home-page.mc-pwa-mobile .mc-why-meritza, .mc-home-page.mc-pwa-mobile .mc-how-it-works, .mc-home-page.mc-pwa-mobile .mc-study-levels, .mc-home-page.mc-pwa-mobile .mc-testimonials, .mc-home-page.mc-pwa-mobile .mc-institute-marquee, .mc-home-page.mc-pwa-mobile .mc-faq { display: none !important; } /* ====================================================== SUBJECTS ====================================================== */ .mc-home-page.mc-pwa-mobile .mc-subjects { padding: 10px 13px 6px !important; background: #FFFFFF !important; background-image: none !important; background-color: #FFFFFF !important; } .mc-home-page.mc-pwa-mobile .mc-subjects * { background-image: none !important; } .mc-home-page.mc-pwa-mobile .mc-subjects-header { margin: 0 auto 4px !important; background: transparent !important; background-image: none !important; } .mc-home-page.mc-pwa-mobile .mc-subjects-eyebrow { margin-bottom: 7px !important; gap: 8px !important; } .mc-home-page.mc-pwa-mobile .mc-subjects-eyebrow-text { font-size: 9px !important; letter-spacing: .12em !important; } .mc-home-page.mc-pwa-mobile .mc-subjects-header .mc-section-title, .mc-home-page.mc-pwa-mobile .mc-subjects-header .mc-section-description { display: none !important; } .mc-home-page.mc-pwa-mobile .mc-subjects-layout { display: block !important; min-height: 0 !important; background: #FFFFFF !important; background-image: none !important; } .mc-home-page.mc-pwa-mobile .mc-subjects-visual { display: none !important; } .mc-home-page.mc-pwa-mobile .mc-subjects-content { width: 100% !important; background: #FFFFFF !important; background-image: none !important; } .mc-home-page.mc-pwa-mobile .mc-subject-item { min-height: 62px !important; padding: 8px 3px !important; display: grid !important; grid-template-columns: 48px minmax(0, 1fr) 14px !important; gap: 9px !important; align-items: center !important; border-bottom: 1px solid rgba( 81, 110, 145, 0.18 ) !important; background: #FFFFFF !important; background-image: none !important; } .mc-home-page.mc-pwa-mobile .mc-subject-icon { width: 44px !important; height: 44px !important; min-width: 44px !important; border-width: 2px !important; } .mc-home-page.mc-pwa-mobile .mc-subject-info h3 { margin: 0 !important; font-size: 16px !important; line-height: 1.1 !important; } .mc-home-page.mc-pwa-mobile .mc-subject-info p { display: none !important; margin: 0 !important; } /* ====================================================== FEATURED TUTORS ====================================================== */ .mc-home-page.mc-pwa-mobile .mc-featured-tutors { padding: 8px 13px 10px !important; background: #FFFFFF !important; background-image: none !important; background-color: #FFFFFF !important; } .mc-home-page.mc-pwa-mobile .mc-featured-tutors * { background-image: none !important; } .mc-home-page.mc-pwa-mobile .mc-featured-tutors-header { margin-bottom: 0 !important; background: transparent !important; background-image: none !important; } .mc-home-page.mc-pwa-mobile .mc-featured-tutors-eyebrow, .mc-home-page.mc-pwa-mobile .mc-featured-tutors-title, .mc-home-page.mc-pwa-mobile .mc-featured-tutors-description { display: none !important; margin: 0 !important; } .mc-home-page.mc-pwa-mobile .mc-featured-tutors-grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; gap: 10px !important; background: #FFFFFF !important; background-image: none !important; } .mc-home-page.mc-pwa-mobile .mc-featured-tutor-card { border-radius: 18px !important; min-height: 0 !important; } .mc-home-page.mc-pwa-mobile .mc-featured-tutor-image-wrap { height: 135px !important; } .mc-home-page.mc-pwa-mobile .mc-featured-tutor-image { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; } .mc-home-page.mc-pwa-mobile .mc-featured-tutor-content { padding: 10px !important; background: #FFFFFF !important; background-image: none !important; } .mc-home-page.mc-pwa-mobile .mc-featured-tutor-name { font-size: 17px !important; line-height: 1.08 !important; } .mc-home-page.mc-pwa-mobile .mc-featured-tutor-academic, .mc-home-page.mc-pwa-mobile .mc-featured-tutor-subjects { font-size: 10px !important; line-height: 1.3 !important; margin-top: 5px !important; } .mc-home-page.mc-pwa-mobile .mc-featured-tutor-link { margin-top: 10px !important; font-size: 11px !important; } .mc-home-page.mc-pwa-mobile .mc-featured-tutors-footer { padding: 12px 0 2px !important; background: #FFFFFF !important; background-image: none !important; } .mc-home-page.mc-pwa-mobile .mc-featured-tutors-explore { font-size: 13px !important; } /* ====================================================== FINAL CTA ====================================================== */ .mc-home-page.mc-pwa-mobile .mc-final-cta { padding: 14px 13px 4px !important; background: #FFFFFF !important; background-image: none !important; background-color: #FFFFFF !important; } .mc-home-page.mc-pwa-mobile .mc-final-cta-inner { border-radius: 20px !important; padding: 24px 16px !important; } .mc-home-page.mc-pwa-mobile .mc-final-cta-title { font-size: 25px !important; line-height: 1.06 !important; } .mc-home-page.mc-pwa-mobile .mc-final-cta-description { font-size: 11px !important; line-height: 1.4 !important; } .mc-home-page.mc-pwa-mobile .mc-final-cta-actions { gap: 8px !important; } .mc-home-page.mc-pwa-mobile .mc-final-cta-primary, .mc-home-page.mc-pwa-mobile .mc-final-cta-secondary { min-height: 44px !important; font-size: 11px !important; } /* ====================================================== FINAL NUCLEAR WHITE OVERRIDE Only mobile/PWA Home. ====================================================== */ html:has( main.mc-home-page.mc-pwa-mobile ), body:has( main.mc-home-page.mc-pwa-mobile ) { background: #FFFFFF !important; background-image: none !important; background-color: #FFFFFF !important; } main.mc-home-page.mc-pwa-mobile { background: #FFFFFF !important; background-image: none !important; background-color: #FFFFFF !important; } main.mc-home-page.mc-pwa-mobile > section:not( .mc-hero-shell ) { background: #FFFFFF !important; background-image: none !important; background-color: #FFFFFF !important; } main.mc-home-page.mc-pwa-mobile > section:not( .mc-hero-shell )::before, main.mc-home-page.mc-pwa-mobile > section:not( .mc-hero-shell )::after { background: transparent !important; background-image: none !important; opacity: 0 !important; } /* ====================================================== DESKTOP ====================================================== */ } @media (min-width: 768px) { .mc-pwa-mobile-topbar, .mc-mobile-pwa-nav { display: none !important; } } /* ========================================================== MERITZA PWA - UNIVERSAL MOBILE WHITE CANVAS Applies consistently across all mobile/tablet widths. Keeps the hero banner coloured. ========================================================== */ @media screen and (max-width: 1024px) { html, body { background-color: #FFFFFF !important; background-image: none !important; } body { background: #FFFFFF !important; } /* * Main PWA container */ #mc-app, #mc-app main, main.mc-home-page, main.mc-home-page.mc-pwa-mobile { background-color: #FFFFFF !important; background-image: none !important; } /* * ALL Home sections. * * This intentionally overrides the original desktop * gradients regardless of which mobile width is used. */ main.mc-home-page.mc-pwa-mobile > section, main.mc-home-page.mc-pwa-mobile section.mc-home-section, main.mc-home-page.mc-pwa-mobile section.mc-subjects, main.mc-home-page.mc-pwa-mobile section.mc-featured-tutors, main.mc-home-page.mc-pwa-mobile section.mc-home-stats, main.mc-home-page.mc-pwa-mobile section.mc-final-cta { background-color: #FFFFFF !important; background-image: none !important; } /* * Catch nested wrappers which may contain the original * gradient/background. */ main.mc-home-page.mc-pwa-mobile .mc-subjects, main.mc-home-page.mc-pwa-mobile .mc-subjects-layout, main.mc-home-page.mc-pwa-mobile .mc-subjects-content, main.mc-home-page.mc-pwa-mobile .mc-subjects-header, main.mc-home-page.mc-pwa-mobile .mc-featured-tutors, main.mc-home-page.mc-pwa-mobile .mc-featured-tutors-header, main.mc-home-page.mc-pwa-mobile .mc-featured-tutors-grid, main.mc-home-page.mc-pwa-mobile .mc-featured-tutors-footer, main.mc-home-page.mc-pwa-mobile .mc-home-stats { background-color: #FFFFFF !important; background-image: none !important; } /* * Remove decorative pseudo-element backgrounds. */ main.mc-home-page.mc-pwa-mobile > section::before, main.mc-home-page.mc-pwa-mobile > section::after, main.mc-home-page.mc-pwa-mobile .mc-subjects::before, main.mc-home-page.mc-pwa-mobile .mc-subjects::after, main.mc-home-page.mc-pwa-mobile .mc-featured-tutors::before, main.mc-home-page.mc-pwa-mobile .mc-featured-tutors::after, main.mc-home-page.mc-pwa-mobile .mc-home-stats::before, main.mc-home-page.mc-pwa-mobile .mc-home-stats::after, main.mc-home-page.mc-pwa-mobile .mc-final-cta::before, main.mc-home-page.mc-pwa-mobile .mc-final-cta::after { background: transparent !important; background-image: none !important; opacity: 1 !important; } /* * Subject rows remain white. */ main.mc-home-page.mc-pwa-mobile .mc-subject-item { background: #FFFFFF !important; background-color: #FFFFFF !important; background-image: none !important; } /* * Tutor card content remains white. */ main.mc-home-page.mc-pwa-mobile .mc-featured-tutor-content { background: #FFFFFF !important; background-color: #FFFFFF !important; background-image: none !important; } /* * Keep the hero coloured. * The hero is an intentional contained banner. */ main.mc-home-page.mc-pwa-mobile .mc-hero-shell { background-image: linear-gradient( 135deg, #0A1946 0%, #123563 52%, #184879 100% ) !important; background-color: #0A1946 !important; } main.mc-home-page.mc-pwa-mobile .mc-hero { background: transparent !important; background-image: none !important; } /* * Bottom navigation must remain white too. */ .mc-mobile-pwa-nav { background: linear-gradient( 135deg, #0A1946 0%, #123563 52%, #184879 100% ) !important; background-color: #0A1946 !important; background-image: linear-gradient( 135deg, #0A1946 0%, #123563 52%, #184879 100% ) !important; } } /* ========================================================== EXTRA SMALL PHONES ========================================================== */ @media screen and (max-width: 480px) { html, body, #mc-app, #mc-app main, main.mc-home-page.mc-pwa-mobile { background: #FFFFFF !important; background-color: #FFFFFF !important; background-image: none !important; } main.mc-home-page.mc-pwa-mobile > section:not( .mc-hero-shell ) { background: #FFFFFF !important; background-color: #FFFFFF !important; background-image: none !important; } } /* ========================================================== SMALL PHONES ========================================================== */ @media screen and (min-width: 481px) and (max-width: 767px) { html, body, #mc-app, #mc-app main, main.mc-home-page.mc-pwa-mobile { background: #FFFFFF !important; background-color: #FFFFFF !important; background-image: none !important; } main.mc-home-page.mc-pwa-mobile > section:not( .mc-hero-shell ) { background: #FFFFFF !important; background-color: #FFFFFF !important; background-image: none !important; } } /* ========================================================== LARGE PHONES / SMALL TABLETS ========================================================== */ @media screen and (min-width: 768px) and (max-width: 1024px) { html, body, #mc-app, #mc-app main, main.mc-home-page.mc-pwa-mobile { background: #FFFFFF !important; background-color: #FFFFFF !important; background-image: none !important; } main.mc-home-page.mc-pwa-mobile > section:not( .mc-hero-shell ) { background: #FFFFFF !important; background-color: #FFFFFF !important; background-image: none !important; } /* * Still show the mobile/PWA navigation. */ .mc-mobile-pwa-nav { display: grid !important; } /* ========================================================== MERITZA PWA - COUNSELLING PAGE FINAL MOBILE FIX ========================================================== */ @media screen and (max-width: 1024px) { /* ------------------------------------------------------ REMOVE COUNSELLING BREADCRUMBS ------------------------------------------------------ */ body:has( .mc-book-counselling-page ) .mc-breadcrumbs, body:has( .mc-book-counselling-page ) .breadcrumb, body:has( .mc-book-counselling-page ) .breadcrumbs, body:has( .mc-book-counselling-page ) nav[aria-label="breadcrumb"], body:has( .mc-book-counselling-page ) [aria-label="Breadcrumb"] { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } /* ------------------------------------------------------ REMOVE EMPTY SPACE ABOVE COUNSELLING CARD ------------------------------------------------------ */ body:has( .mc-book-counselling-page ) .mc-book-counselling-page { margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 8px !important; } body:has( .mc-book-counselling-page ) .mc-book-session { margin-top: 0 !important; padding-top: 5px !important; padding-bottom: 8px !important; } /* ------------------------------------------------------ REMOVE POSSIBLE BREADCRUMB WRAPPER SPACE ------------------------------------------------------ */ body:has( .mc-book-counselling-page ) .mc-breadcrumb-wrapper, body:has( .mc-book-counselling-page ) .breadcrumb-wrapper, body:has( .mc-book-counselling-page ) .breadcrumbs-wrapper { display: none !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------------ COUNSELLING CONTAINER ------------------------------------------------------ */ body:has( .mc-book-counselling-page ) .mc-book-session .mc-container { margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ------------------------------------------------------ COUNSELLING CARD ------------------------------------------------------ */ body:has( .mc-book-counselling-page ) .mc-booking-card { margin-top: 0 !important; margin-bottom: 0 !important; } /* ------------------------------------------------------ REDUCE BOTTOM SPACE SO CARD SITS CLOSE TO NAV ------------------------------------------------------ */ body:has( .mc-book-counselling-page ) { padding-bottom: calc( var(--mc-pwa-nav-height, 68px) + env(safe-area-inset-bottom) + 2px ) !important; } /* ------------------------------------------------------ PREVENT EXTRA FOOTER SPACE ------------------------------------------------------ */ body:has( .mc-book-counselling-page ) footer { display: none !important; } /* ------------------------------------------------------ KEEP PWA BOTTOM NAV ------------------------------------------------------ */ body:has( .mc-book-counselling-page ) .mc-mobile-pwa-nav { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; display: grid !important; z-index: 10030 !important; } } /* ========================================================== SMALL PHONES ========================================================== */ @media screen and (max-width: 480px) { body:has( .mc-book-counselling-page ) .mc-book-session { padding-top: 2px !important; padding-bottom: 5px !important; } body:has( .mc-book-counselling-page ) .mc-book-counselling-page { padding-bottom: 5px !important; } } .mc-pwa-mobile-topbar { display: flex !important; } /* ========================================================== HOME HERO - FINAL MOBILE/PWA ALIGNMENT This is intentionally last so no earlier mobile rule can override the Hero colour or content centering. ========================================================== */ main.mc-home-page.mc-pwa-mobile .mc-hero-shell { background: linear-gradient( 135deg, #0A1946 0%, #123563 52%, #184879 100% ) !important; background-image: linear-gradient( 135deg, #0A1946 0%, #123563 52%, #184879 100% ) !important; background-color: #0A1946 !important; } main.mc-home-page.mc-pwa-mobile .mc-hero { display: flex !important; align-items: center !important; justify-content: center !important; padding: 12px 15px !important; } main.mc-home-page.mc-pwa-mobile .mc-hero .mc-container, main.mc-home-page.mc-pwa-mobile .mc-hero-content { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; margin: 0 auto !important; } main.mc-home-page.mc-pwa-mobile .mc-hero-content { width: 100% !important; max-width: 100% !important; padding: 0 !important; } } /* ========================================================== MOBILE PWA NOTIFICATION / LOGOUT UI ========================================================== */ @media screen and (max-width: 1024px) { .mc-dashboard-notification-dropdown { display: none !important; } .mc-dashboard-notification-wrap { display: none !important; } .mc-pwa-mobile-topbar { position: sticky !important; top: 0 !important; z-index: 10050 !important; } .mc-pwa-mobile-header-actions { display: flex !important; align-items: center !important; gap: 7px !important; } .mc-pwa-mobile-notification, .mc-pwa-mobile-logout { position: relative !important; width: 38px !important; height: 38px !important; min-width: 38px !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 50% !important; background: #F0F2F8 !important; color: #0A1946 !important; text-decoration: none !important; cursor: pointer !important; } .mc-pwa-mobile-notification-count[hidden] { display: none !important; } .mc-pwa-mobile-notification-count { position: absolute !important; top: -2px !important; right: -2px !important; min-width: 17px !important; height: 17px !important; padding: 0 4px !important; display: grid !important; place-items: center !important; border: 2px solid #FFFFFF !important; border-radius: 999px !important; background: #E5455C !important; color: #FFFFFF !important; font: 700 8px/1 Poppins, Inter, sans-serif !important; } .mc-pwa-mobile-notification-panel { position: fixed !important; top: 64px !important; left: 10px !important; right: 10px !important; z-index: 10060 !important; max-height: calc(100vh - 82px) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; background: #FFFFFF !important; border: 1px solid #E4E8F0 !important; border-radius: 18px !important; box-shadow: 0 16px 40px rgba(10,25,70,.16) !important; } .mc-pwa-mobile-notification-panel[hidden] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .mc-pwa-mobile-notification-panel:not(.is-open) { display: none !important; } .mc-pwa-mobile-notification-panel-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 14px 10px !important; border-bottom: 1px solid #EEF1F5 !important; background: #FFFFFF !important; } .mc-pwa-mobile-notification-panel-head strong { display: block !important; color: #0A1946 !important; font: 700 15px/1.2 Poppins, Inter, sans-serif !important; } .mc-pwa-mobile-notification-panel-head span { display: block !important; margin-top: 3px !important; color: #7A8699 !important; font: 400 9px/1.3 Poppins, Inter, sans-serif !important; } .mc-pwa-mobile-notification-close { width: 32px !important; height: 32px !important; display: grid !important; place-items: center !important; border: 0 !important; border-radius: 50% !important; background: #F1F3F7 !important; color: #0A1946 !important; cursor: pointer !important; } .mc-pwa-mobile-notification-actions { display: flex !important; gap: 7px !important; padding: 9px 12px !important; border-bottom: 1px solid #EEF1F5 !important; background: #FFFFFF !important; } .mc-pwa-mobile-notification-actions button { flex: 1 1 0 !important; min-height: 34px !important; padding: 0 8px !important; border: 1px solid #E1E6EF !important; border-radius: 9px !important; background: #FFFFFF !important; color: #0A1946 !important; font: 600 9px/1 Poppins, Inter, sans-serif !important; cursor: pointer !important; } .mc-pwa-mobile-notification-actions button.is-enabled { background: #F3F1FF !important; border-color: #D9D4FF !important; color: #5146E5 !important; } .mc-pwa-mobile-notification-list { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; background: #FFFFFF !important; } .mc-pwa-mobile-notification-item { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px !important; color: inherit !important; text-decoration: none !important; background: #FFFFFF !important; border-bottom: 1px solid #EEF1F5 !important; } .mc-pwa-mobile-notification-item-icon { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; display: grid !important; place-items: center !important; border-radius: 10px !important; background: #F1F0FF !important; color: #5146E5 !important; } .mc-pwa-mobile-notification-item-copy { min-width: 0 !important; display: block !important; } .mc-pwa-mobile-notification-item-copy strong { display: block !important; color: #0A1946 !important; font: 600 11px/1.3 Poppins, Inter, sans-serif !important; } .mc-pwa-mobile-notification-item-copy small { display: block !important; margin-top: 3px !important; color: #71809A !important; font: 400 9px/1.35 Poppins, Inter, sans-serif !important; } .mc-pwa-mobile-notification-empty { min-height: 120px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 7px !important; color: #8792A4 !important; background: #FFFFFF !important; font: 400 10px/1.3 Poppins, Inter, sans-serif !important; } .mc-pwa-mobile-notification-empty i { font-size: 22px !important; } } /* ========================================================== MERITZA PWA - LOGGED-OUT TOP NAVBAR Blue navbar + actual website logo ========================================================== */ @media screen and (max-width: 1024px) { .mc-pwa-mobile-topbar { background: linear-gradient( 135deg, #0A1946 0%, #123563 52%, #184879 100% ) !important; background-image: linear-gradient( 135deg, #0A1946 0%, #123563 52%, #184879 100% ) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 3px 14px rgba(10, 25, 70, 0.18) !important; } .mc-pwa-mobile-brand { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; color: #FFFFFF !important; text-decoration: none !important; } .mc-pwa-mobile-brand-logo { display: block !important; width: auto !important; height: 34px !important; max-width: 155px !important; max-height: 34px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; } /* * The old circular favicon container and text * are no longer used by the PWA topbar. */ .mc-pwa-mobile-brand-icon, .mc-pwa-mobile-brand-name { display: none !important; } /* * Logged-out profile/login button. * Keep the existing profile-button appearance, * but make it work cleanly against the blue navbar. */ .mc-pwa-mobile-topbar > .mc-pwa-mobile-notification { background: #F0F2F8 !important; color: #0A1946 !important; } /* * Logged-in notification/logout controls remain * functionally unchanged. */ .mc-pwa-mobile-header-actions .mc-pwa-mobile-notification, .mc-pwa-mobile-header-actions .mc-pwa-mobile-logout { background: #F0F2F8 !important; color: #0A1946 !important; } } /* ========================================================== MERITZA PWA - HIDE DESKTOP NAVBAR ON TABLET / PWA WIDTHS Keeps the desktop navbar untouched above 1024px. ========================================================== */ @media screen and (max-width: 1024px) { .mc-navbar { display: none !important; } .mc-pwa-mobile-topbar { display: flex !important; } } /* ========================================================== MERITZA PWA - COMPACT HOME SECTIONS Mobile/PWA only. Subjects keep only the eyebrow. Featured Tutors keeps only the tutor cards. ========================================================== */ @media screen and (max-width: 1024px) { /* ------------------------------------------------------ EXPLORE YOUR SUBJECTS Keep only the eyebrow. ------------------------------------------------------ */ main.mc-home-page.mc-pwa-mobile .mc-subjects { padding-bottom: 6px !important; } main.mc-home-page.mc-pwa-mobile .mc-subjects-header { margin-bottom: 4px !important; } main.mc-home-page.mc-pwa-mobile .mc-subjects-header .mc-section-title, main.mc-home-page.mc-pwa-mobile .mc-subjects-header .mc-section-description, main.mc-home-page.mc-pwa-mobile .mc-subject-info p { display: none !important; margin: 0 !important; } /* ------------------------------------------------------ FEATURED TUTORS Keep eyebrow, hide heading and description. Keep cards and existing functionality. ------------------------------------------------------ */ main.mc-home-page.mc-pwa-mobile .mc-featured-tutors { padding-top: 8px !important; } main.mc-home-page.mc-pwa-mobile .mc-featured-tutors-header { margin-bottom: 8px !important; } main.mc-home-page.mc-pwa-mobile .mc-featured-tutors-eyebrow { display: flex !important; margin-bottom: 6px !important; } main.mc-home-page.mc-pwa-mobile .mc-featured-tutors-title, main.mc-home-page.mc-pwa-mobile .mc-featured-tutors-description { display: none !important; margin: 0 !important; } }