/* ============================================================================= * PropertyConnector — Mobile Action Bar * * A slim bar pinned to the bottom of the viewport on phones: compact icon * buttons for the phone (call / text), then the primary call to action taking * the remaining width. Phones only; hidden entirely from 769px up. * * Two separate gates, on purpose: * * - The bar and its spacer style themselves off their own classes. The module * only prints that markup when the bar should render, so presence is the * condition, and the bar still works on a theme that never calls * body_class(). * - --pc-mobile-bar-offset is published on body.pc-has-mobile-bar, which the * module adds through body_class. The comparison tray, Saved Listings * widget, Saved Listings identify toast and cookie consent banner each add * it to their own `bottom`. That one has to be conditional because it moves * other modules' elements; off the bar, or on desktop, it is undefined and * all four fall back to 0px, so nothing moves. Worst case on an unusual * theme is that those four keep their normal positions — the bar itself * still renders. * * Colours come from the v1.10.36 branding variables, so the bar follows whatever * palette the realtor picked on the Display tab: * --pc-primary primary / navy → the utility phone buttons * --pc-primary-color accent → the action button * * @since 1.14.171 * ========================================================================== */ .pc-mobile-bar, .pc-mobile-bar-spacer { display: none; } @media (max-width: 768px) { :root { /* Plain constant — safe to publish whether or not the bar renders. */ --pc-mobile-bar-height: 56px; } body.pc-has-mobile-bar { /* Bar height plus the iOS home-indicator inset when there is one. Conditional, because this is what shifts the other four bottom-fixed surfaces upwards. Inherited by descendants from . */ --pc-mobile-bar-offset: calc(var(--pc-mobile-bar-height) + env(safe-area-inset-bottom, 0px)); } /* --------------------------------------------------------------------- Spacer --------------------------------------------------------------------- Printed into wp_footer at priority 20, i.e. after the Compliance footer's REALTOR® / MLS® trademark attribution. It adds exactly the bar's own height to the end of the document so that, scrolled all the way down, the bar covers this rather than covering real content. Deliberately unfilled: on a page shorter than the viewport the spacer sits directly under the footer rather than under the bar, so a background of its own would show as a stray stripe mid-screen. --------------------------------------------------------------------- */ .pc-mobile-bar-spacer { display: block; height: calc(var(--pc-mobile-bar-height) + env(safe-area-inset-bottom, 0px)); } /* --------------------------------------------------------------------- The bar --------------------------------------------------------------------- z-index sits just below the Saved Listings widget and toast (9998), the cookie banner (99999) and the comparison tray (2147483000). All four are offset above the bar by --pc-mobile-bar-offset, so they never overlap it in practice — but if a theme ever breaks that inheritance, the more important surface is the one that stays visible. The 1px gap over a translucent-white container background renders as a crisp hairline between buttons, which keeps the divider logic uniform however many buttons there are. --------------------------------------------------------------------- */ .pc-mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9997; gap: 1px; background: rgba(255, 255, 255, 0.16); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08), 0 -10px 28px -14px rgba(15, 23, 42, 0.55); } .pc-mobile-bar__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* Comfortably past the 44px minimum touch target in both the Apple HIG and WCAG 2.5.5. */ min-height: var(--pc-mobile-bar-height); padding: 0 16px; /* Themes restyle anchors aggressively — colour, underline and weight all need asserting or the bar inherits body-link styling. */ color: #ffffff !important; text-decoration: none !important; font-family: var(--pc-font, inherit); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; -webkit-tap-highlight-color: transparent; transition: filter 0.15s ease; } /* Phone buttons: compact utilities, sized to their own label. */ .pc-mobile-bar__btn--call, .pc-mobile-bar__btn--text { flex: 0 0 auto; background: var(--pc-primary, #1e3a5f); } /* Action button: takes the remaining width, which both signals the hierarchy and gives a long label room. min-width:0 lets the flex item shrink below its content width so the ellipsis below can engage. */ .pc-mobile-bar__btn--cta { flex: 1 1 auto; min-width: 0; background: var(--pc-primary-color, #0170b9); } .pc-mobile-bar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pc-mobile-bar__icon { flex: 0 0 auto; } /* Tactile press feedback with no layout shift. */ .pc-mobile-bar__btn:active { filter: brightness(0.92); } /* Inset ring — an outset outline would fall outside the viewport on a bar flush to the bottom edge. */ .pc-mobile-bar__btn:focus-visible { outline: 2px solid #ffffff; outline-offset: -5px; } /* --------------------------------------------------------------------- Three buttons --------------------------------------------------------------------- Call + Text + action on a 375px screen leaves the action label about 169px once both phone labels are drawn, and the default "Free Home Evaluation" needs more than that — it would sit permanently truncated. So at three buttons the phone controls go icon-only, which is the same trade .pc-compare-button makes on small cards, and hands the action roughly 285px instead. The icons stay above the 44px minimum touch target, and each button's aria-label already carries the full meaning for anyone not reading the glyph. --------------------------------------------------------------------- */ .pc-mobile-bar--3 .pc-mobile-bar__btn--call .pc-mobile-bar__label, .pc-mobile-bar--3 .pc-mobile-bar__btn--text .pc-mobile-bar__label { /* Visually hidden rather than display:none — the label is the accessible name for these buttons. */ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .pc-mobile-bar--3 .pc-mobile-bar__btn--call, .pc-mobile-bar--3 .pc-mobile-bar__btn--text { gap: 0; padding: 0 18px; } /* On a listing page the action button is an in-page jump to the contact panel. Themes with a sticky header would otherwise land the heading underneath it. */ body.pc-has-mobile-bar #pc-contact-heading { scroll-margin-top: 90px; } } /* ============================================================================= Respect a reduced-motion preference. The only transition here is the press brightness, but the plugin's other stylesheets all carry this block and consistency is cheaper than an exception. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .pc-mobile-bar__btn { transition-duration: 0.01ms; } } /* ============================================================================= Windows High Contrast / forced colours — drop the brand fills and use the system button palette, with a border so the buttons stay distinguishable. ========================================================================== */ @media (forced-colors: active) { .pc-mobile-bar { background: Canvas; box-shadow: none; border-top: 1px solid CanvasText; } .pc-mobile-bar__btn, .pc-mobile-bar__btn--call, .pc-mobile-bar__btn--text, .pc-mobile-bar__btn--cta { background: ButtonFace; color: ButtonText !important; border: 1px solid ButtonBorder; } } /* ============================================================================= Print — fixed chrome has no place on paper. ========================================================================== */ @media print { .pc-mobile-bar, .pc-mobile-bar-spacer { display: none !important; } }