so news can reorder among siblings */ .myomr-mobile-retrofit .homepage-main { display: contents; } .myomr-mobile-retrofit .homepage-explore-omr { order: 1; } .myomr-mobile-retrofit .homepage-section--news { order: 2; } .myomr-mobile-retrofit .homepage-jobs-stats-bar { order: 10; } .myomr-mobile-retrofit .jobs-scroll-banner { order: 11; } .myomr-mobile-retrofit .events-homepage-strip { order: 12; } .myomr-mobile-retrofit .homepage-buysell-ad-row { order: 13; } .myomr-mobile-retrofit .classified-ads-homepage-section { order: 14; } .myomr-mobile-retrofit .elections-2026-homepage { order: 15; } .myomr-mobile-retrofit .homepage-main > .omr-ad-slot { order: 16; } .myomr-mobile-retrofit .homepage-section--ad { order: 17; } .myomr-mobile-retrofit .homepage-section--affiliate { order: 18; } .myomr-mobile-retrofit #subscribe.homepage-section { order: 19; } /* Tighter news block when promoted near top */ .myomr-mobile-retrofit .homepage-section--news .omr-newsroom { margin-top: 0; } .myomr-mobile-retrofit .homepage-explore-omr { padding-bottom: 0.5rem; } } /* ========================================================================== Megamenu: cleaner mobile top bar ========================================================================== */ @media (max-width: 767.98px) { .myomr-mobile-retrofit .megamenu-tagline { display: none; } .myomr-mobile-retrofit .megamenu-bar { padding: 0.5rem 0.75rem; min-height: 52px; } .myomr-mobile-retrofit .megamenu-toggle { min-width: 44px; min-height: 44px; } .myomr-mobile-retrofit .megamenu-logo img { width: 36px; height: 36px; } .myomr-mobile-retrofit .megamenu-site-name { font-size: 1.05rem; } } /* ========================================================================== Hero: compact on phone; hide search on mobile + tablet ========================================================================== */ @media (max-width: 991.98px) { .myomr-mobile-retrofit .hero-search-wrap { display: none !important; } } @media (max-width: 767.98px) { .myomr-mobile-retrofit .homepage-hero { padding: 1.25rem 1rem 1.75rem; } .myomr-mobile-retrofit .hero-inner { display: flex; flex-direction: column; align-items: stretch; } .myomr-mobile-retrofit .hero-badge { order: 1; align-self: center; margin-bottom: 0.65rem; font-size: 0.7rem; padding: 0.3rem 0.75rem; } .myomr-mobile-retrofit .hero-text-slider { order: 2; min-height: 108px; margin-bottom: 0.75rem; } .myomr-mobile-retrofit .hero-headline { font-size: clamp(1.45rem, 6vw, 1.85rem); margin-bottom: 0.35rem; } .myomr-mobile-retrofit .hero-subtitle { font-size: 0.92rem; line-height: 1.5; max-width: 100%; } .myomr-mobile-retrofit .hero-stats { order: 3; gap: 0.5rem 0.85rem; margin-bottom: 0.75rem; font-size: 0.78rem; } .myomr-mobile-retrofit .hero-quick-links { order: 4; gap: 0.4rem; margin-top: 0; } .myomr-mobile-retrofit .hero-quick-links a { font-size: 0.78rem; padding: 0.45rem 0.75rem; min-height: 36px; } .myomr-mobile-retrofit .hero-dots { order: 5; margin-top: 0.65rem; } .myomr-mobile-retrofit .hero-cta-wrap { order: 6; gap: 0.5rem; margin-top: 0.5rem; } .myomr-mobile-retrofit .homepage-hero .hero-cta, .myomr-mobile-retrofit .homepage-hero .hero-cta-wa, .myomr-mobile-retrofit .homepage-hero .hero-cta-fb { font-size: 0.85rem; padding: 0.55rem 1rem; min-height: 44px; justify-content: center; } } /* Search icon hidden on desktop (form visible desktop only) */ .myomr-mobile-retrofit .mobile-app-search__icon { display: none; } @media (max-width: 420px) { .myomr-mobile-retrofit .hero-quick-links { justify-content: flex-start; } .myomr-mobile-retrofit .hero-cta-wrap { flex-direction: column; align-items: stretch; } .myomr-mobile-retrofit .homepage-hero .hero-cta, .myomr-mobile-retrofit .homepage-hero .hero-cta-wa, .myomr-mobile-retrofit .homepage-hero .hero-cta-fb { width: 100%; } } /* ========================================================================== Explore OMR: compact 4-column app grid ========================================================================== */ @media (max-width: 767.98px) { .myomr-mobile-retrofit .homepage-explore-omr { padding: 1.25rem 1rem; } .myomr-mobile-retrofit .homepage-explore-omr__label { font-size: 0.65rem; margin-bottom: 0.75rem; } .myomr-mobile-retrofit .mobile-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; } .myomr-mobile-retrofit .homepage-explore-omr__card { align-items: center; text-align: center; padding: 0.65rem 0.35rem; border-radius: 10px; border-color: #eef2f0; box-shadow: none; gap: 0.25rem; } .myomr-mobile-retrofit .homepage-explore-omr__card-icon { font-size: 1.65rem; margin-bottom: 0.15rem; } .myomr-mobile-retrofit .homepage-explore-omr__card-title { font-size: 0.72rem; line-height: 1.25; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 100%; } .myomr-mobile-retrofit .homepage-explore-omr__card-subtitle { font-size: 0.58rem; letter-spacing: 0.02em; color: #9ca3af; line-height: 1.2; } .myomr-mobile-retrofit .homepage-explore-omr__card--highlight { box-shadow: 0 2px 8px rgba(0, 133, 82, 0.25); } } @media (max-width: 575.98px) { .myomr-mobile-retrofit .mobile-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; } } @media (max-width: 420px) { .myomr-mobile-retrofit .mobile-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; } .myomr-mobile-retrofit .homepage-explore-omr__card-title { font-size: 0.68rem; } } /* ========================================================================== Section headers: title row + View all link ========================================================================== */ .myomr-mobile-retrofit .mobile-section-header__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; flex: 1 1 100%; } .myomr-mobile-retrofit .mobile-section-viewall { display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0; font-family: var(--font-body, "Poppins", sans-serif); font-size: 0.85rem; font-weight: 600; color: var(--omr-green, #008552); text-decoration: none; white-space: nowrap; min-height: 44px; padding: 0.25rem 0; } .myomr-mobile-retrofit .mobile-section-viewall:hover, .myomr-mobile-retrofit .mobile-section-viewall:focus-visible { color: var(--omr-deep-green, #14532d); text-decoration: none; } .myomr-mobile-retrofit .mobile-section-viewall:focus-visible { outline: 2px solid var(--omr-green, #008552); outline-offset: 2px; border-radius: 4px; } /* ========================================================================== Mobile section headers (bold title + arrow affordance) ========================================================================== */ @media (max-width: 767.98px) { .myomr-mobile-retrofit .mobile-section-header, .myomr-mobile-retrofit .buy-sell-homepage-section__header, .myomr-mobile-retrofit .classified-ads-homepage-section__header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .myomr-mobile-retrofit .buy-sell-homepage-section__title, .myomr-mobile-retrofit .classified-ads-homepage-section__title, .myomr-mobile-retrofit .newsroom-header__title { font-size: 1.15rem; font-weight: 700; color: #111827; letter-spacing: -0.02em; } .myomr-mobile-retrofit .newsroom-header { align-items: center; padding-bottom: 0.75rem; margin-bottom: 1rem; border-bottom: 1px solid #f0f0f0; } .myomr-mobile-retrofit .newsroom-viewall, .myomr-mobile-retrofit .featured-news-section__header { font-weight: 600; color: var(--omr-green, #008552); } .myomr-mobile-retrofit .featured-news-section__header { justify-content: space-between; font-size: 1.1rem; color: #111827; } } /* ========================================================================== Live jobs stats bar — compact pill strip ========================================================================== */ @media (max-width: 767.98px) { .myomr-mobile-retrofit .homepage-jobs-stats-bar { margin: 0 1rem 0.75rem; padding: 0.75rem 1rem !important; border-radius: 12px !important; display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; text-align: center; } .myomr-mobile-retrofit .homepage-jobs-stats-bar__counts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; font-size: 0.9rem; } .myomr-mobile-retrofit .homepage-jobs-stats-bar__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .myomr-mobile-retrofit .homepage-jobs-stats-bar__actions .btn { min-height: 44px; flex: 1 1 auto; min-width: 140px; } } /* ========================================================================== Horizontal scroll rails (shared) ========================================================================== */ @media (max-width: 767.98px) { .myomr-mobile-retrofit .mobile-scroll-rail { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 1rem; gap: 0.75rem; padding: 0.25rem 1rem 0.5rem; margin: 0 -0.25rem; scrollbar-width: thin; } .myomr-mobile-retrofit .mobile-scroll-rail::-webkit-scrollbar { height: 4px; } .myomr-mobile-retrofit .mobile-rail-card { flex: 0 0 auto; scroll-snap-align: start; } } /* Jobs + Events strips */ @media (max-width: 767.98px) { .myomr-mobile-retrofit .jobs-scroll-banner, .myomr-mobile-retrofit .events-homepage-strip { border-radius: 0; margin-bottom: 0.25rem; } .myomr-mobile-retrofit .jobs-scroll-banner__track-wrap, .myomr-mobile-retrofit .events-homepage-strip__track-wrap { padding: 0; } .myomr-mobile-retrofit .jobs-scroll-banner__track, .myomr-mobile-retrofit .events-homepage-strip__track { display: flex; flex-wrap: nowrap; gap: 0.5rem; padding: 0 1rem 0.35rem; } .myomr-mobile-retrofit .jobs-scroll-banner__item, .myomr-mobile-retrofit .events-homepage-strip__item { flex: 0 0 auto; min-width: 220px; max-width: 280px; scroll-snap-align: start; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; padding: 0.55rem 0.75rem; flex-direction: column; align-items: flex-start; gap: 0.2rem; } .myomr-mobile-retrofit .jobs-scroll-banner__sep, .myomr-mobile-retrofit .events-homepage-strip__sep { display: none; } .myomr-mobile-retrofit .jobs-scroll-banner__cta, .myomr-mobile-retrofit .events-homepage-strip__cta { margin: 0 1rem; border-radius: 10px; background: rgba(255, 255, 255, 0.12); } } /* Buy & Sell + Classifieds rails */ @media (max-width: 767.98px) { .myomr-mobile-retrofit .buy-sell-homepage-section__cards.mobile-scroll-rail .buy-sell-homepage-section__card, .myomr-mobile-retrofit .classified-ads-homepage-section__cards.mobile-scroll-rail .classified-ads-homepage-section__card { min-width: 280px; max-width: 300px; } .myomr-mobile-retrofit .classified-ads-homepage-section__header { text-align: left; align-items: flex-start; } .myomr-mobile-retrofit .classified-ads-homepage-section__meta, .myomr-mobile-retrofit .classified-ads-homepage-section__ctas { justify-content: flex-start; } .myomr-mobile-retrofit .classified-ads-homepage-section__tagline { margin-left: 0; margin-right: 0; } } /* News medium row + Editor picks rails */ @media (max-width: 767.98px) { .myomr-mobile-retrofit .newsroom-medium-row.mobile-scroll-rail { padding-inline: 0; margin-bottom: 0.5rem; } .myomr-mobile-retrofit .newsroom-medium-row.mobile-scroll-rail .news-medium { min-width: 260px; max-width: 280px; } .myomr-mobile-retrofit .featured-news-section__grid.mobile-scroll-rail .featured-news-card { min-width: 260px; max-width: 300px; } } /* ========================================================================== Elections 2026 — compact mobile promo ========================================================================== */ @media (max-width: 767.98px) { .myomr-mobile-retrofit .elections-2026-homepage { margin: 1rem; padding: 1.25rem 1rem; border-radius: 16px; } .myomr-mobile-retrofit .elections-2026-homepage .el-title { font-size: 1.25rem; } .myomr-mobile-retrofit .elections-2026-homepage .el-lead { font-size: 0.9rem; margin-bottom: 1rem; } .myomr-mobile-retrofit .elections-2026-homepage .el-sidebar { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } } @media (max-width: 420px) { .myomr-mobile-retrofit .elections-2026-homepage .el-sidebar { grid-template-columns: 1fr; } .myomr-mobile-retrofit .elections-2026-homepage .el-action-card { min-height: 44px; } } /* ========================================================================== Subscribe — mobile-friendly form ========================================================================== */ @media (max-width: 767.98px) { .myomr-mobile-retrofit .homepage-subscribe { margin: 0 1rem; padding: 1.5rem 1.25rem; border-radius: 14px; } .myomr-mobile-retrofit .homepage-subscribe form { flex-direction: column !important; align-items: stretch !important; width: 100%; } .myomr-mobile-retrofit .homepage-subscribe .form-control { max-width: 100% !important; min-height: 48px; width: 100%; } .myomr-mobile-retrofit .homepage-subscribe .btn-subscribe { width: 100%; min-height: 48px; } } /* ========================================================================== Ads — prevent viewport overflow ========================================================================== */ @media (max-width: 767.98px) { .myomr-mobile-retrofit .omr-ad-slot, .myomr-mobile-retrofit .omr-ad-slot iframe, .myomr-mobile-retrofit .omr-ad-slot img, .myomr-mobile-retrofit .homepage-section--ad .container, .myomr-mobile-retrofit .homepage-section--affiliate .container { max-width: 100%; overflow-x: auto; } .myomr-mobile-retrofit .homepage-buysell-ad-row__right .omr-ad-slot { margin-left: auto; margin-right: auto; } } /* ========================================================================== Footer accordion (mobile homepage) ========================================================================== */ @media (max-width: 767.98px) { .myomr-mobile-retrofit .footer-main { padding: 1.5rem 1rem 2rem; } .myomr-mobile-retrofit .footer-brand__tagline { font-size: 0.85rem; line-height: 1.55; } .myomr-mobile-retrofit .mobile-footer-accordion .footer-nav { display: block; gap: 0; } .myomr-mobile-retrofit .mobile-footer-accordion .footer-nav__col { border-bottom: 1px solid var(--footer-border); } .myomr-mobile-retrofit .mobile-footer-accordion__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.85rem 0; background: none; border: none; color: var(--footer-heading); font-size: 0.95rem; font-weight: 600; font-family: inherit; text-align: left; cursor: pointer; min-height: 44px; } .myomr-mobile-retrofit .mobile-footer-accordion__trigger:focus-visible { outline: 3px solid var(--footer-accent); outline-offset: 2px; } .myomr-mobile-retrofit .mobile-footer-accordion__icon { font-size: 0.85rem; color: var(--footer-text-muted); transition: transform 0.2s ease; } .myomr-mobile-retrofit .mobile-footer-accordion__trigger[aria-expanded="true"] .mobile-footer-accordion__icon { transform: rotate(180deg); } .myomr-mobile-retrofit .mobile-footer-accordion__panel { overflow: hidden; max-height: 0; transition: max-height 0.25s ease; } .myomr-mobile-retrofit .mobile-footer-accordion__panel.is-open { max-height: 1200px; padding-bottom: 0.75rem; } .myomr-mobile-retrofit .mobile-footer-accordion .footer-nav__title { display: none; } .myomr-mobile-retrofit .mobile-footer-subscribe-accordion { margin-top: 0.75rem; padding: 0; background: transparent; border: none; border-radius: 0; border-top: 1px solid var(--footer-border); } .myomr-mobile-retrofit .mobile-footer-subscribe-accordion .footer-subscribe__title { display: none; } .myomr-mobile-retrofit .mobile-footer-subscribe-accordion .mobile-footer-accordion__trigger { padding: 0.85rem 0; } .myomr-mobile-retrofit .mobile-footer-subscribe-accordion .mobile-footer-accordion__panel.is-open { padding-bottom: 1rem; } .myomr-mobile-retrofit .mobile-footer-subscribe-accordion .footer-subscribe__desc { margin-bottom: 0.75rem; } .myomr-mobile-retrofit .mobile-footer-subscribe-accordion .footer-subscribe__form { flex-direction: column; } .myomr-mobile-retrofit .mobile-footer-subscribe-accordion .footer-subscribe__form input { border-radius: 10px 10px 0 0; } .myomr-mobile-retrofit .mobile-footer-subscribe-accordion .footer-subscribe__form button { border-radius: 0 0 10px 10px; min-height: 44px; } } /* Desktop: footer accordion triggers hidden, panels always open */ @media (min-width: 768px) { .myomr-mobile-retrofit .mobile-footer-accordion__trigger { display: none; } .myomr-mobile-retrofit .mobile-footer-accordion .footer-nav__title, .myomr-mobile-retrofit .mobile-footer-subscribe-accordion .footer-subscribe__title { display: block; } .myomr-mobile-retrofit .mobile-footer-accordion__panel { max-height: none !important; overflow: visible; padding-bottom: 0; } .myomr-mobile-retrofit .mobile-footer-subscribe-accordion .footer-subscribe__form { flex-direction: row; } } /* Desktop: hide bottom nav */ .mobile-bottom-nav { display: none; } /* ========================================================================== Fixed mobile bottom navigation ========================================================================== */ @media (max-width: 767.98px) { .mobile-bottom-nav { display: grid; grid-template-columns: repeat(6, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040; background: #fff; border-top: 1px solid #e5e7eb; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); padding-bottom: env(safe-area-inset-bottom, 0px); min-height: calc(56px + env(safe-area-inset-bottom, 0px)); } .mobile-bottom-nav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; padding: 0.4rem 0.15rem; min-height: 56px; text-decoration: none; color: #6b7280; font-size: 0.62rem; font-weight: 500; font-family: "Poppins", "Source Sans 3", sans-serif; border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mobile-bottom-nav__item i { font-size: 1.2rem; line-height: 1; } .mobile-bottom-nav__item.is-active, .mobile-bottom-nav__item:hover, .mobile-bottom-nav__item:focus-visible { color: var(--omr-green, #008552); } .mobile-bottom-nav__item:focus-visible { outline: 2px solid var(--omr-green, #008552); outline-offset: -2px; } } @media (max-width: 420px) { .mobile-bottom-nav__item { font-size: 0.58rem; padding: 0.35rem 0.1rem; } .mobile-bottom-nav__item i { font-size: 1.1rem; } } /* ========================================================================== Floating buttons — clear bottom nav ========================================================================== */ @media (max-width: 767.98px) { .myomr-mobile-retrofit .floating-social-wrap { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); right: 0.75rem; } .myomr-mobile-retrofit .floating-back-top { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); left: 0.75rem; } } @media (max-width: 600px) { .myomr-mobile-retrofit .floating-btn, .myomr-mobile-retrofit .floating-back-top { width: 42px; height: 42px; font-size: 1.1rem; } } /* ========================================================================== Tablet bridge (768px – 991.98px) ========================================================================== */ @media (min-width: 768px) and (max-width: 991.98px) { .myomr-mobile-retrofit .homepage-hero { padding: 2rem 1.5rem 2.5rem; } .myomr-mobile-retrofit .hero-text-slider { min-height: 120px; } .myomr-mobile-retrofit .mobile-category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.85rem; } .myomr-mobile-retrofit .homepage-explore-omr__card { padding: 0.85rem 0.5rem; } .myomr-mobile-retrofit .homepage-explore-omr__card-title { font-size: 0.82rem; } .myomr-mobile-retrofit .homepage-jobs-stats-bar { flex-direction: row !important; align-items: center; justify-content: space-between; text-align: left; gap: 0.75rem; } .myomr-mobile-retrofit .homepage-jobs-stats-bar__counts { justify-content: flex-start; } .myomr-mobile-retrofit .homepage-jobs-stats-bar__actions { justify-content: flex-end; flex-wrap: nowrap; } .myomr-mobile-retrofit .buy-sell-homepage-section__cards, .myomr-mobile-retrofit .classified-ads-homepage-section__cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; flex-wrap: unset !important; padding: 0 !important; margin: 0 !important; } .myomr-mobile-retrofit .newsroom-medium-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; } .myomr-mobile-retrofit .featured-news-section__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; } .myomr-mobile-retrofit .elections-2026-homepage { margin-left: 1.5rem; margin-right: 1.5rem; } .myomr-mobile-retrofit .elections-2026-homepage .el-layout { grid-template-columns: 1.5fr 1fr; align-items: start; } .myomr-mobile-retrofit .homepage-buysell-ad-row { padding-left: 1.5rem; padding-right: 1.5rem; } } /* ========================================================================== Minor desktop refinements (homepage only) ========================================================================== */ @media (min-width: 992px) { .myomr-mobile-retrofit .homepage-explore-omr__card { transition: box-shadow 0.2s ease, transform 0.2s ease; } .myomr-mobile-retrofit .homepage-explore-omr__card:hover { box-shadow: 0 6px 18px var(--omr-shadow); } .myomr-mobile-retrofit .buy-sell-homepage-section__inner, .myomr-mobile-retrofit .classified-ads-homepage-section__inner { box-shadow: 0 12px 32px rgba(20, 83, 45, 0.08); } } /* MyOMR Mobile App-like Retrofit - End */