/* ========================================================================== MobilityNearMe alignment defaults (2026-10-08) 1. Cards are centred at every width: words, icons, prices and buttons. Checklists inside a card keep their lines left (easier to scan) but the list itself sits in the middle of the card. 2. On phones (767px and narrower) headings, intros, heroes, call bands, section panels and the footer are centred too. Left on purpose, at every width: - long reading text: legal pages, blog posts, prose blocks - forms and anything inside them (labels, fields, errors) - the numbered timeline on How it works (the number rail needs it) - FAQ questions and answers, notices with an icon, lists of links with arrows (city lists), tables, cart, checkout and My account A section where someone picked "Left" in the Website editor (mnm-align--left) is never touched here: that choice always wins. !important is needed because many elements set their alignment on their own Bricks ID. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Cards, every width -------------------------------------------------------------------------- */ :is(.mnm-pcard__body, .mnm-clinic-card, .mnm-areas-card, .mnm-trustcard, .mnm-pp-card, .mnm-card):not(.mnm-align--left *) :is(h2, h3, h4, h5, p, .brxe-heading, .brxe-text-basic, .brxe-text):not(form *, li, li *) { text-align: center !important; } /* Blocks of words also sit in the middle. Spans are left alone: they sit in rows (price and "a week", an icon and its label) that are already built. */ :is(.mnm-pcard__body, .mnm-clinic-card, .mnm-areas-card, .mnm-trustcard, .mnm-pp-card, .mnm-card):not(.mnm-align--left *) :is(h2, h3, h4, h5, p, div.brxe-text-basic, div.brxe-text):not(form *, li, li *) { margin-left: auto; margin-right: auto; } /* Icons, titles and buttons stacked in a card line up on the middle. */ :is(.mnm-clinic-card, .mnm-areas-card__text, .mnm-pp-card):not(.mnm-align--left *) { align-items: center !important; } /* Checklists: lines stay left, the list block is centred. */ :is(.mnm-pcard__body, .mnm-pp-card, .mnm-card):not(.mnm-align--left *) :is(ul, .mnm-model__benefits) { width: fit-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; align-self: center; text-align: left; } /* The city pills in the "We deliver across Broward County" card: centred, and without the dot separators left over from the old inline list (the pills already separate themselves). */ .mnm-areas-card:not(.mnm-align--left *) .mnm-arealist { justify-content: center !important; } .mnm-areas-card .mnm-arealist__i::after { content: none !important; display: none !important; } /* A phone number never breaks at its dashes. */ #brx-content a[href^="tel:"], #brx-footer a[href^="tel:"] { white-space: nowrap; } /* The tick line under the search box ("Delivery across Broward County, with 24 hours notice"): the tick stays beside the words when they wrap. */ .mnm-hero-note { flex-wrap: nowrap !important; align-items: flex-start !important; } .mnm-hero-note > .mnm-i { margin-top: .2em; } .mnm-hero-note > :not(.mnm-i) { min-width: 0; } /* Notices (an icon beside a few lines) read left to right. */ #brx-content .mnm-notice, #brx-content .mnm-notice * { text-align: left !important; } /* -------------------------------------------------------------------------- 2. Phones -------------------------------------------------------------------------- */ @media (max-width: 767px) { /* Everything below skips the places that stay left (see the top). */ /* Hero: badge, headline, intro, buttons and chips. */ .mnm-hero__content:not(.mnm-align--left, .mnm-align--left *) { align-items: center !important; text-align: center !important; } .mnm-hero__content:not(.mnm-align--left *) :is(h1, h2, p, .brxe-heading, .brxe-text-basic):not(form *) { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .mnm-hero__content:not(.mnm-align--left *) :is(.mnm-badge, [class*="chips"], [class*="badges"], [class*="buttons"], [class*="ctas"], [class*="actions"]) { align-self: center !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; } /* Section headings and the intro line under them. */ #brx-content :is(h1, h2, .mnm-h2):not(:is(.mnm-legal, .mnm-prose, .brxe-post-content, .mnm-step, .mnm-steps, form, .mnm-chooser, .mnm-notice, details, .brxe-accordion, .brxe-accordion-nested, .mnm-align--left, .woocommerce-cart-form, .woocommerce-checkout, .woocommerce-MyAccount-content) *) { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } #brx-content :is(h1, h2, .mnm-h2):not(:is(.mnm-legal, .mnm-prose, .brxe-post-content, .mnm-step, .mnm-steps, form, .mnm-chooser, .mnm-notice, details, .brxe-accordion, .brxe-accordion-nested, .mnm-align--left) *) + :is(p, .brxe-text-basic):not(.mnm-notice, [class*="notice"]) { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* Product page: the short description under the photos, and its checklist (lines left, list centred). The spec chips beside icons and the booking box are left as built. */ .mnm-pp-info:not(.mnm-align--left *) > p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } .mnm-pp-info:not(.mnm-align--left *) > .mnm-trustlines { width: fit-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; align-self: center !important; } /* A "See the areas we deliver to" style link standing on its own line (links inside sentences are inside a paragraph, so they are not hit). */ #brx-content .brxe-block:not(.mnm-align--left, .mnm-align--left *) > .mnm-inline-link { align-self: center !important; text-align: center !important; } /* The blog search box fills its row instead of sitting at the left. */ #brx-content .mnm-hero-band .bricks-search-form { width: 100%; margin-left: auto; margin-right: auto; } #brx-content .mnm-hero-band .bricks-search-form input { width: 100% !important; flex: 1 1 auto; } /* Fields keep their words on the left, even inside a centred card. */ #brx-content :is(input, select, textarea) { text-align: left; } /* Results count on the rentals page. */ .mnm-results__count { text-align: center !important; align-self: center !important; margin-left: auto !important; margin-right: auto !important; } /* "Still have questions?" style call bands. */ .mnm-help__cta:not(.mnm-align--left, .mnm-align--left *) { align-items: center !important; text-align: center !important; } .mnm-help__cta:not(.mnm-align--left *) :is(.mnm-help__cta-title, .mnm-help__cta-text) { text-align: center !important; } .mnm-help__cta:not(.mnm-align--left *) .mnm-help__cta-links { justify-content: center !important; } /* Pairs of buttons (Call / Email and the like) stack at one width, so they read as a set and are easy to tap. */ #brx-content .mnm-help__cta-links:not(.mnm-align--left *) { flex-direction: column !important; align-items: stretch !important; width: 100%; max-width: 360px; margin-left: auto !important; margin-right: auto !important; } #brx-content .mnm-help__cta-links:not(.mnm-align--left *) > a { width: 100%; justify-content: center !important; text-align: center !important; } /* Service area panel: eyebrow, title and intro. */ .mnm-sapanel__head:not(.mnm-align--left *) { align-items: center !important; text-align: center !important; } .mnm-sapanel__head:not(.mnm-align--left *) :is(span, h2, p) { text-align: center !important; } /* "Cities we serve" header: icon on top, then title, line and count. */ .mnm-sacities__head:not(.mnm-align--left *) { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 6px !important; } .mnm-sacities__head:not(.mnm-align--left *) > * { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* "Check your ZIP code" card: icon on top, words centred. The form row itself stays as built. */ .mnm-sazip:not(.mnm-align--left *) { justify-items: center; text-align: center; } .mnm-sazip:not(.mnm-align--left *) > .mnm-sazip__icon { justify-self: center !important; margin-left: auto !important; margin-right: auto !important; } .mnm-sazip:not(.mnm-align--left *) > .mnm-sazip__form { justify-self: stretch !important; width: 100%; } .mnm-sazip:not(.mnm-align--left *) > a { justify-self: center !important; margin-left: auto !important; margin-right: auto !important; } .mnm-sazip__body:not(.mnm-align--left *) { align-items: center !important; text-align: center !important; width: 100%; } .mnm-sazip__body:not(.mnm-align--left *) :is(.mnm-sazip__eyebrow, .mnm-sazip__h, .mnm-sazip__p) { text-align: center !important; } /* "Which knee scooter is right for you?" rows: short, so centred. */ .mnm-chooser__row:not(.mnm-align--left *) { align-items: center !important; text-align: center !important; } .mnm-chooser__row:not(.mnm-align--left *) > * { text-align: center !important; } /* Footer: brand card, link columns and the bottom bar. */ #brx-footer .mnm-footer-brand { align-items: center !important; text-align: center !important; } #brx-footer .mnm-footer-logo { align-self: center !important; margin-left: auto !important; margin-right: auto !important; } #brx-footer .mnm-footer-blurb { text-align: center !important; } #brx-footer .mnm-footer-contact { align-items: center !important; width: 100%; } #brx-footer .mnm-fcontact { justify-content: center !important; text-align: center !important; align-self: center !important; } #brx-footer .mnm-footer-grid > .brxe-block { align-items: center !important; text-align: center !important; } #brx-footer .mnm-footer-colh { text-align: center !important; align-self: center !important; } #brx-footer .mnm-footer__list { align-items: center !important; text-align: center !important; } #brx-footer .mnm-footer__list > *, #brx-footer .mnm-footer__list .brxe-block { align-self: center !important; align-items: center !important; text-align: center !important; } #brx-footer .mnm-footer__list a { text-align: center !important; } #brx-footer .mnm-footer-barctn { align-items: center !important; text-align: center !important; } #brx-footer .mnm-footer-barctn > p { text-align: center !important; } #brx-footer .mnm-footer-legal { justify-content: center !important; flex-wrap: wrap; } }