.fl-node-izvfyspt2rqa.fl-row-default-height > .fl-row-content-wrap, .fl-node-izvfyspt2rqa.fl-row-full-height > .fl-row-content-wrap, .fl-node-izvfyspt2rqa.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-node-izvfyspt2rqa > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } @media ( max-width: 992px ) { .fl-node-izvfyspt2rqa.fl-row > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } } @media ( max-width: 768px ) { .fl-node-izvfyspt2rqa.fl-row > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-ncbsj2q6v9tu > .fl-row-content-wrap { background-color: var(--fl-global-navy); border-top-width: 1px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px; } .fl-node-ncbsj2q6v9tu.fl-row-default-height > .fl-row-content-wrap, .fl-node-ncbsj2q6v9tu.fl-row-full-height > .fl-row-content-wrap, .fl-node-ncbsj2q6v9tu.fl-row-custom-height > .fl-row-content-wrap { align-items: center; justify-content: center; } .fl-node-ncbsj2q6v9tu > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } @media ( max-width: 992px ) { .fl-node-ncbsj2q6v9tu.fl-row > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } } @media ( max-width: 768px ) { .fl-node-ncbsj2q6v9tu.fl-row > .fl-row-content-wrap { padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px; } } .fl-builder-row-settings #fl-field-separator_position { display: none !important; } .fl-node-vfaygo1demk5 { width: 100%; } .fl-module-box:before, .fl-module-box:after { position: absolute; } a.fl-module-box { text-decoration: none; } /* Zero margins for child modules */ .fl-module-box :where( .fl-module ), .fl-module-box :where( .fl-module-content ), .fl-module-box.fl-block > * { margin: 0; } /* Prevent sliders and carousels from blowing out flex layouts */ :where(.fl-module-box:has( [class*="slide"], [class*="carousel"], [class*="swiper"] )) { min-width: 0; } .fl-builder-content-111233 .fl-node-6nxfdovul43w { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 30px; } img.mfp-img { padding-bottom: 40px !important; } /* Support for object-fit */ .fl-builder-edit .fl-fill-container img { transition: object-position .5s; } .fl-fill-container :is(.fl-module-content, .fl-photo, .fl-photo-content, img) { height: 100% !important; width: 100% !important; } @media (max-width: 768px) { /* Mobile Photo */ .fl-photo-content, .fl-photo-img { max-width: 100%; } }.fl-node-gp05sr9acyxe, .fl-node-gp05sr9acyxe .fl-photo { text-align: left; } .fl-node-gp05sr9acyxe .fl-photo-content, .fl-node-gp05sr9acyxe .fl-photo-img { width: 83px; } /* ── pardee-mobile-menu module ─────────────────────────────── */ /* Relies on canonical .pardee-btn / .pardee-btn--on-dark and .icon-pp-arrow-right (see _components.scss) for the sticky footer's CTA button. Everything else — the bar, burger, overlay shell, accordion, and call link — is bespoke: there is no equivalent nav component in the shared kit. Visibility: the design switches between the desktop bar and this one at 920px (pardee-nav.css "Breakpoint switch"), which is not a BB breakpoint — so the swap point lives here rather than in BB's Responsive Display setting, and patch-header-layout.php clears that setting on both nav modules so the two mechanisms cannot disagree. */ /* ── Breakpoint switch — design pardee-nav.css ─────────────── */ /* The Box wrapping this module in the Themer header (class added by patch-header-layout.php) has to go too, not just the module: an empty flex child still takes a slot in the bar's space-between layout and a share of its gap, which strands the right-hand utilities short of the edge. */ @media (min-width: 921px) { .fl-module-pardee-mobile-menu, .pardee-header-mobile-slot { display: none !important; } } .pardee-mobmenu * { box-sizing: border-box; } /* ── Bar ──────────────────────────────────────────────────── */ .pardee-mobmenu__bar { display: flex; align-items: center; justify-content: flex-end; gap: 18px; height: 64px; padding: 0 20px; position: relative; z-index: 20; } /* Saved Homes heart + count badge — design .pgn-mbar__heart / .pgn-util__badge */ .pardee-mobmenu__heart { position: relative; display: flex; padding: 1px; margin: -1px; color: var(--pp-cream); } /* 24px target (WCAG 2.5.8) round the 22px icon; the negative margin keeps the layout */ .pardee-mobmenu__heart:hover { color: var(--pp-cream); } /* (0,2,0): above a page stylesheet's bare a:hover colour */ .pardee-mobmenu__badge { position: absolute; top: -5px; right: -7px; /* 6px above and 8px right of the icon, measured from the heart's 1px padding box */ min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; background: var(--pp-terracotta); color: var(--pp-cream); border-radius: 999px; font-family: var(--font-body); font-size: 10px; font-weight: var(--pardee-w-bold, 700); line-height: 16px; text-align: center; letter-spacing: 0; } .pardee-mobmenu__burger { background: none; border: 0; cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--pp-cream); } /* The word is justified across the bars' width rather than letter-spaced, so M and U line up with the rules' ends exactly as in the design (.pgn-burger__word). Typography sits on the span, not the button: the BB reset below must keep `font: inherit !important` and would flatten it. */ .pardee-mobmenu__burger-word { display: flex; justify-content: space-between; width: 30px; font-family: var(--font-display); font-size: 11px; font-weight: 400; font-style: normal; text-transform: uppercase; line-height: 1; letter-spacing: 0; } .pardee-mobmenu__burger-word i { font-style: normal; } .pardee-mobmenu__burger-bars { display: flex; flex-direction: column; gap: 6px; width: 30px; } .pardee-mobmenu__burger-bars i { display: block; height: 1.5px; background: currentColor; transition: transform .25s var(--ease-soft, ease); } .pardee-mobmenu__burger[aria-expanded="true"] .pardee-mobmenu__burger-bars i:first-child { transform: translateY(3.75px) rotate(45deg); } .pardee-mobmenu__burger[aria-expanded="true"] .pardee-mobmenu__burger-bars i:last-child { transform: translateY(-3.75px) rotate(-45deg); } /* ── Overlay shell ────────────────────────────────────────── */ .pardee-mobmenu__overlay { position: fixed; inset: 0; z-index: 300; background: var(--pp-ink); display: flex; flex-direction: column; visibility: hidden; opacity: 0; transition: opacity var(--dur-base, 280ms) var(--ease-soft, ease), visibility 0s linear var(--dur-base, 280ms); } .pardee-mobmenu__overlay.is-open { visibility: visible; opacity: 1; transition: opacity var(--dur-base, 280ms) var(--ease-soft, ease), visibility 0s; } /* The Themer sticky header carries an inline `transform: translate(0, -px)` once the page is scrolled. A transformed ancestor becomes the containing block of a position:fixed descendant, so the overlay would be only as tall as the header, and the header's z-index (100) would put it under the sticky CTA bar (150) and the quick-links bar (140). While the menu is open the header takes its place with `top` instead (same spot) and rises above those bars. */ html.pardee-mobmenu-open .fl-builder-content[data-type="header"].fl-theme-builder-header-sticky { transform: none !important; top: 0; z-index: 400; } /* Links in the bar and the overlay inherit cream: the theme's `a:hover { color: unset }` (0,1,1) outranks the single-class link colours here, so a hovered or tapped link takes the inherited colour. */ .pardee-mobmenu__bar, .pardee-mobmenu__overlay { color: var(--pp-cream); } .pardee-mobmenu__scroll { overscroll-behavior: contain; } /* Sit below the WP admin bar instead of under it, matching core's own breakpoint for the admin bar's height change (46px at <=782px, 32px above). */ body.admin-bar .pardee-mobmenu__overlay { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .pardee-mobmenu__overlay { top: 46px; } } @media (prefers-reduced-motion: reduce) { .pardee-mobmenu__overlay, .pardee-mobmenu__panel, .pardee-mobmenu__chev, .pardee-mobmenu__burger-bars i { transition: none !important; } } .pardee-mobmenu__head { flex: 0 0 auto; height: 64px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 246, 240, 0.14); } /* No logo set → the close button still sits hard right (design .pgn-mobile__head). */ .pardee-mobmenu__head > :only-child { margin-left: auto; } .pardee-mobmenu__logo { display: flex; align-items: center; } .pardee-mobmenu__logo img { height: 26px; width: auto; display: block; } .pardee-mobmenu__close { background: none; border: 0; cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--pp-cream); } /* Same reason as the burger word — the label carries its own type (design .pgn-mobile__close span: 11px, .22em, uppercase) so the button reset's `font: inherit` cannot flatten it. */ .pardee-mobmenu__close-label { font-family: var(--font-display); font-size: 11px; font-weight: 400; font-style: normal; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; } /* 24px box with 1.5px strokes matches the design's 24px lucide X at stroke-width 1.5. */ .pardee-mobmenu__close-x { position: relative; width: 24px; height: 24px; } .pardee-mobmenu__close-x i { position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: currentColor; } .pardee-mobmenu__close-x i:first-child { transform: translateY(-50%) rotate(45deg); } .pardee-mobmenu__close-x i:last-child { transform: translateY(-50%) rotate(-45deg); } /* ── Accordion ────────────────────────────────────────────── */ .pardee-mobmenu__scroll { flex: 1 1 auto; overflow-y: auto; padding: 8px 22px 24px; } .pardee-mobmenu__empty { color: var(--fg-on-dark-muted); font-family: var(--font-body); font-size: 14px; line-height: 1.6; padding: 20px 0; } .pardee-mobmenu__acc { border-bottom: 1px solid rgba(255, 246, 240, 0.12); } .pardee-mobmenu__acc-btn { width: 100%; background: none; border: 0; cursor: pointer; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; } .pardee-mobmenu__acc-label { font-family: var(--font-display); font-size: 23px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pp-cream); line-height: 1.1; } .pardee-mobmenu__chev { flex: 0 0 auto; width: 10px; height: 10px; margin-right: 4px; border-right: 1.5px solid var(--pp-cream); border-bottom: 1.5px solid var(--pp-cream); transform: rotate(45deg); transition: transform var(--dur-base, 280ms) var(--ease-soft, ease); } .pardee-mobmenu__acc.is-open .pardee-mobmenu__chev { transform: rotate(225deg); } /* A collapsed section's links leave the tab order: visibility turns hidden once the close slide has finished. */ .pardee-mobmenu__panel { overflow: hidden; max-height: 0; visibility: hidden; transition: max-height .3s var(--ease-soft, ease), visibility 0s linear .3s; } .pardee-mobmenu__acc.is-open .pardee-mobmenu__panel { max-height: 640px; visibility: visible; transition: max-height .3s var(--ease-soft, ease), visibility 0s; } .pardee-mobmenu__panel-link { display: block; padding: 11px 0 11px 14px; margin-top: 2px; border-left: 1px solid rgba(255, 246, 240, 0.18); font-family: var(--font-body); font-weight: var(--pardee-w-regular); font-size: 15px; letter-spacing: 0.02em; color: var(--pp-cream); text-decoration: none; } .pardee-mobmenu__panel-link:last-child { margin-bottom: 6px; } .pardee-mobmenu__panel-link.current-menu-item, .pardee-mobmenu__acc.current-menu-ancestor > .pardee-mobmenu__acc-btn .pardee-mobmenu__acc-label { color: var(--pp-tan); } /* ── Log In / Saved pair — design .pgn-mobile__auth ────────── */ .pardee-mobmenu__auth { display: flex; gap: 12px; margin-top: 24px; } .pardee-mobmenu__auth a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; border: 1px solid rgba(255, 246, 240, 0.55); color: var(--pp-cream); border-radius: 4px; padding: 14px 0; font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } /* ── Sticky footer ────────────────────────────────────────── */ /* Not CSS position:sticky — the overlay is a fixed-height flex column with only .pardee-mobmenu__scroll scrolling, so this footer stays pinned to the bottom of the viewport for the life of the open menu. */ .pardee-mobmenu__foot { flex: 0 0 auto; padding: 16px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-on-dark); background: var(--pp-ink); } .pardee-mobmenu__foot-cta { width: 100%; } /* narrow phones: the footer's side padding gives way so the CTA label keeps one line (330px button + 2 × 12px; below 354px the label cannot fit at its size, so the footer keeps its designed padding) */ @media (min-width: 354px) and (max-width: 374px) { .pardee-mobmenu__foot { padding-left: 12px; padding-right: 12px; } } .pardee-mobmenu__foot-call { display: flex; align-items: center; justify-content: center; margin-top: 12px; font-family: var(--font-body); font-weight: var(--pardee-w-regular); font-size: 13px; letter-spacing: 0.05em; color: var(--fg-on-dark-muted); text-decoration: none; } /* BB Global Styles paint every