/* * MFY Light Header — header.css v1.0.3 * All selectors prefixed: .mfylh- */ :root { --mfylh-orange: #F47F04; --mfylh-orange-dk: #d46a00; --mfylh-topbar-h: 60px; /* #3: topbar 60px */ --mfylh-nav-h: 72px; /* #4: bottom bar 72px */ --mfylh-sticky-h: 75px; /* #5: on scroll 75px */ --mfylh-mob-h: 56px; --mfylh-max-w: 1280px; --mfylh-ease: cubic-bezier(.4,0,.2,1); --mfylh-font: 'Poppins',-apple-system,sans-serif; } /* ── Body offset ── Desktop white: offset content below the full header (topbar + nav). Desktop transparent: no offset — header floats over hero. Mobile white: offset by mob header height only. Mobile transparent: no offset. NOTE: fixed elements never add to document flow, so no bottom whitespace should come from the header. If whitespace appears it is from the theme or Elementor adding padding equal to the header height. Override below. */ body.mfylh-active { padding-top: calc(var(--mfylh-topbar-h) + var(--mfylh-nav-h)); } body.mfylh-mode-transparent.mfylh-active { padding-top: 0 !important; } @media (max-width: 768px) { body.mfylh-active { padding-top: var(--mfylh-mob-h); /* Never add bottom padding — bottom bar is fixed, not in flow */ padding-bottom: 0 !important; } body.mfylh-mode-transparent.mfylh-active { padding-top: 0 !important; padding-bottom: 0 !important; } /* Hello Elementor / Elementor sometimes adds margin-top to first child equal to the header height when a sticky header is active. Zero it out. */ body.mfylh-active .elementor-section:first-of-type, body.mfylh-active .e-con:first-of-type, body.mfylh-active .elementor > .elementor-inner > .elementor-section:first-child { margin-top: 0 !important; } /* Also zero any bottom margin/padding on last section from theme */ body.mfylh-active .elementor-section:last-of-type, body.mfylh-active .e-con:last-of-type { margin-bottom: 0 !important; padding-bottom: 0 !important; } } /* ── WordPress Admin Bar ───────────────────────────────────── WP adds .admin-bar to and sets margin-top: 32px (desktop) / 46px (mobile) on the body automatically via its own CSS. Our fixed headers sit at top:0 by default which means they land at the very top of the viewport — BEHIND the admin bar. Fix: push every fixed element down by the admin-bar height so it appears immediately below the bar. Body padding-top stays the same because WP's margin-top already accounts for the bar. ────────────────────────────────────────────────────────────── */ .admin-bar #mfylh-header-full, .admin-bar #mfylh-header-sticky, .admin-bar #mfylh-header-mob, .admin-bar #mfylh-header-mob-sticky, .admin-bar #mfylh-slide-menu { top: 32px; } @media (max-width: 782px) { .admin-bar #mfylh-header-full, .admin-bar #mfylh-header-sticky, .admin-bar #mfylh-header-mob, .admin-bar #mfylh-header-mob-sticky, .admin-bar #mfylh-slide-menu { top: 46px; } } /* container */ .mfylh-container { max-width: var(--mfylh-max-w); margin: 0 auto; padding: 0 32px; width: 100%; display: flex; align-items: center; } @media (max-width: 768px) { .mfylh-container { padding: 0 18px; } } /* ════ FULL DESKTOP HEADER ════ */ .mfylh-header-full { position: fixed; top: 0; left: 0; right: 0; z-index: 900; transition: opacity .3s var(--mfylh-ease), transform .3s var(--mfylh-ease), visibility .3s; } .mfylh-header-full.mfylh-hidden { opacity: 0; transform: translateY(-10px); visibility: hidden; pointer-events: none; } body.mfylh-mode-transparent .mfylh-header-full { background: transparent; } body.mfylh-mode-white .mfylh-header-full { background: #fff; box-shadow: 0 1px 0 #e8e8e8; } /* topbar — vertically centered (#1) */ .mfylh-topbar { height: var(--mfylh-topbar-h); display: flex; align-items: center; border-bottom: 1px solid transparent; } .mfylh-topbar .mfylh-container { justify-content: space-between; align-items: center; height: 100%; } /* transparent mode: topbar is transparent with subtle separator */ body.mfylh-mode-transparent .mfylh-topbar { background: transparent; border-bottom-color: rgba(255,255,255,.15); } /* white mode: topbar is solid white */ body.mfylh-mode-white .mfylh-topbar { background: #fff; border-bottom-color: #eeeeee; } .mfylh-topbar-left { font-family: var(--mfylh-font); font-size: 12px; font-weight: 500; } /* topbar text — white on transparent, dark on white */ body.mfylh-mode-transparent .mfylh-topbar-left { color: rgba(255,255,255,.85); } body.mfylh-mode-white .mfylh-topbar-left { color: #555; } .mfylh-topbar-right { display: flex; align-items: center; gap: 20px; margin-left: auto; } /* ── FIX #2: top bar nav WITH dropdown support ── */ .mfylh-topbar-nav { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; } .mfylh-topbar-nav > li { position: relative; } .mfylh-topbar-nav > li > a { font-family: var(--mfylh-font); font-size: 12px; font-weight: 500; text-decoration: none; transition: color .2s; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } body.mfylh-mode-transparent .mfylh-topbar-nav > li > a { color: rgba(255,255,255,.85); } body.mfylh-mode-white .mfylh-topbar-nav > li > a { color: #555; } body.mfylh-mode-transparent .mfylh-topbar-nav > li > a:hover { color: #fff; } body.mfylh-mode-white .mfylh-topbar-nav > li > a:hover { color: var(--mfylh-orange); } /* arrow for top-bar dropdown parents */ .mfylh-topbar-nav > li.mfylh-has-drop > a::after { content: ''; display: inline-block; width: 8px; height: 5px; background: currentColor; clip-path: polygon(0 0, 50% 100%, 100% 0, 85% 0, 50% 72%, 15% 0); transition: transform .2s; flex-shrink: 0; margin-left: 1px; } .mfylh-topbar-nav > li.mfylh-has-drop.mfylh-open > a::after { transform: rotate(180deg); } /* top-bar dropdown panel */ .mfylh-topbar-nav .mfylh-dropdown { position: absolute; top: calc(100% + 8px); left: 0; background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.14); min-width: 180px; z-index: 200; border-top: 3px solid var(--mfylh-orange); list-style: none; margin: 0; padding: 0; opacity: 0; transform: translateY(8px); visibility: hidden; pointer-events: none; transition: opacity .22s, transform .22s, visibility .22s; } .mfylh-topbar-nav > li.mfylh-has-drop.mfylh-open .mfylh-dropdown { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: all; } @media (hover: hover) and (min-width: 769px) { .mfylh-topbar-nav > li.mfylh-has-drop:hover .mfylh-dropdown { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: all; } .mfylh-topbar-nav > li.mfylh-has-drop:hover > a::after { transform: rotate(180deg); } } .mfylh-topbar-nav .mfylh-dropdown li { border-bottom: 1px solid #f5f5f5; } .mfylh-topbar-nav .mfylh-dropdown li:last-child { border-bottom: none; } .mfylh-topbar-nav .mfylh-drop-link { display: block; padding: 9px 16px; font-family: var(--mfylh-font); font-size: 12px; font-weight: 500; color: #333; text-decoration: none; transition: background .15s, color .15s; } .mfylh-topbar-nav .mfylh-drop-link:hover { background: #fff8f2; color: var(--mfylh-orange); } .mfylh-btn-signup { font-family: var(--mfylh-font); font-size: 12px; font-weight: 600; border: 1.5px solid var(--mfylh-orange); color: var(--mfylh-orange) !important; border-radius: 20px; padding: 4px 16px; background: transparent; text-decoration: none; transition: all .2s; cursor: pointer; white-space: nowrap; } .mfylh-btn-signup:hover { background: var(--mfylh-orange); color: #fff !important; } /* mainbar */ .mfylh-mainbar { height: var(--mfylh-nav-h); display: flex; /* #1: needed for vertical centering */ align-items: center; /* #1: vertically centre logo + nav + cta */ } body.mfylh-mode-white .mfylh-mainbar { background: #fff; } .mfylh-mainbar .mfylh-container { gap: 32px; height: 100%; align-items: center; } /* logo */ .mfylh-logo { font-family: var(--mfylh-font); font-size: 20px; font-weight: 800; letter-spacing: .06em; font-style: italic; text-decoration: none; flex-shrink: 0; color: var(--mfylh-orange); display: flex; align-items: center; } .mfylh-logo img { display: block; } .mfylh-logo-text span { font-style: normal; } body.mfylh-mode-transparent .mfylh-logo-text span { color: #fff; } body.mfylh-mode-white .mfylh-logo-text span { color: #1a1a1a; } /* nav */ .mfylh-nav-wrap { flex: 1; } .mfylh-nav { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; } .mfylh-nav > li { position: relative; } .mfylh-nav-link { font-family: var(--mfylh-font); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; transition: color .2s; white-space: nowrap; background: none; border: none; } body.mfylh-mode-transparent .mfylh-nav-link { color: rgba(255,255,255,.92); } body.mfylh-mode-white .mfylh-nav-link { color: #222; } body.mfylh-mode-transparent .mfylh-nav-link:hover { color: #fff; } body.mfylh-mode-white .mfylh-nav-link:hover { color: var(--mfylh-orange); } .mfylh-nav-arrow { display: inline-flex; flex-shrink: 0; width: 10px; height: 6px; /* Proper V chevron using clip-path — clean at any size */ background: currentColor; clip-path: polygon(0 0, 50% 100%, 100% 0, 85% 0, 50% 72%, 15% 0); transition: transform .2s; margin-left: 1px; } .mfylh-nav > li.mfylh-open .mfylh-nav-arrow { transform: rotate(180deg); } /* main nav dropdown */ .mfylh-dropdown { position: absolute; top: calc(100% + 10px); left: -16px; background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.14); min-width: 220px; z-index: 100; border-top: 3px solid var(--mfylh-orange); list-style: none; margin: 0; padding: 0; opacity: 0; transform: translateY(10px); visibility: hidden; pointer-events: none; transition: opacity .22s, transform .22s, visibility .22s; } /* Bridge the gap between nav link and dropdown so hover stays active */ .mfylh-nav > li.mfylh-has-drop, .mfylh-topbar-nav > li.mfylh-has-drop { position: relative; } .mfylh-nav > li.mfylh-has-drop::before, .mfylh-topbar-nav > li.mfylh-has-drop::before { content: ''; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; } .mfylh-nav > li.mfylh-open .mfylh-dropdown { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: all; } @media (hover: hover) and (min-width: 769px) { .mfylh-nav > li.mfylh-has-drop:hover .mfylh-dropdown { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: all; } .mfylh-nav > li.mfylh-has-drop:hover .mfylh-nav-arrow { transform: rotate(180deg); } } .mfylh-dropdown li { border-bottom: 1px solid #f5f5f5; } .mfylh-dropdown li:last-child { border-bottom: none; } .mfylh-drop-link { display: block; padding: 10px 18px; font-family: var(--mfylh-font); font-size: 13px; font-weight: 500; color: #333; text-decoration: none; transition: background .15s, color .15s; } .mfylh-drop-link:hover { background: #fff8f2; color: var(--mfylh-orange); } .mfylh-dropdown > li:first-child .mfylh-drop-link { color: var(--mfylh-orange); font-weight: 600; } /* cta */ .mfylh-cta-group { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-left: auto; } .mfylh-phone-link { font-family: var(--mfylh-font); font-size: 14px; font-weight: 700; color: var(--mfylh-orange); text-decoration: none; white-space: nowrap; } .mfylh-btn-book { font-family: var(--mfylh-font); background: var(--mfylh-orange); color: #fff !important; border: none; border-radius: 26px; padding: 11px 24px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; transition: background .2s; } .mfylh-btn-book:hover { background: var(--mfylh-orange-dk); } /* ════ STICKY DESKTOP ════ */ .mfylh-header-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 9000; background: #fff; box-shadow: 0 2px 24px rgba(0,0,0,.1); overflow: visible; /* lets search results escape below */ /* Use visibility+opacity — NOT transform — so no stacking context is created */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s var(--mfylh-ease), visibility .28s; } .mfylh-header-sticky.mfylh-show { opacity: 1; visibility: visible; pointer-events: all; } .mfylh-sticky-inner { height: var(--mfylh-sticky-h); display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 20px; max-width: var(--mfylh-max-w); margin: 0 auto; padding: 0 32px; overflow: visible; /* allow search results to escape */ } .mfylh-ham-btn { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 5px; padding: 4px; flex-shrink: 0; } .mfylh-ham-btn span { display: block; width: 22px; height: 2px; background: #333; border-radius: 2px; } .mfylh-sticky-logo { font-family: var(--mfylh-font); font-size: 17px; font-weight: 800; letter-spacing: .06em; font-style: italic; text-decoration: none; flex-shrink: 0; color: var(--mfylh-orange); display: flex; align-items: center; } .mfylh-sticky-logo span { font-style: normal; color: #1a1a1a; } .mfylh-sticky-logo img { display: block; } /* #3: sticky search — max 500px, centred */ .mfylh-sticky-search { display: flex; align-items: center; justify-content: center; width: 100%; } .mfylh-sticky-search-wrap, .mfylh-sticky-search > * { width: 100%; max-width: 500px; overflow: visible; position: relative; z-index: 9001; } /* ── MFY Search plugin — search results dropdown fix ── .mfy-ws-header-dd is position:absolute. When inside a sticky header that has opacity < 1 OR z-index set, a stacking context is created which clips the dropdown. Fix: JS moves .mfy-ws-header-dd to level and repositions it. CSS below styles it in that detached state. */ /* When detached to body by JS, the dd becomes position:fixed */ body > .mfy-ws-header-dd { position: fixed !important; z-index: 999999 !important; /* width is set by JS to match the input */ } /* Ensure the original container doesn't clip */ .mfylh-sticky-search, .mfylh-sticky-search-wrap, .mfylh-sticky-search .mfy-ws-header, .mfylh-mob-sticky-r2, .mfylh-mob-sticky-r2 .mfy-ws-header { overflow: visible !important; } .mfylh-sticky-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .mfylh-sticky-quote { font-family: var(--mfylh-font); background: var(--mfylh-orange); color: #fff !important; border: none; border-radius: 22px; padding: 9px 20px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; transition: background .2s; } .mfylh-sticky-quote:hover { background: var(--mfylh-orange-dk); } .mfylh-sticky-call { font-family: var(--mfylh-font); font-size: 13px; font-weight: 600; color: #333; background: none; border: none; cursor: pointer; text-decoration: none; } /* ════ MOBILE INITIAL HEADER ════ */ .mfylh-header-mob { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: var(--mfylh-mob-h); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; transition: opacity .3s var(--mfylh-ease), visibility .3s; } .mfylh-header-mob.mfylh-hidden { opacity: 0; visibility: hidden; pointer-events: none; } body.mfylh-mode-transparent .mfylh-header-mob { background: transparent; } body.mfylh-mode-white .mfylh-header-mob { background: #fff; box-shadow: 0 1px 0 #e8e8e8; } .mfylh-mob-logo { font-family: var(--mfylh-font); font-size: 16px; font-weight: 800; letter-spacing: .06em; font-style: italic; text-decoration: none; color: var(--mfylh-orange); display: flex; align-items: center; } body.mfylh-mode-transparent .mfylh-mob-logo .mfylh-logo-text span { color: #fff; font-style: normal; } body.mfylh-mode-white .mfylh-mob-logo .mfylh-logo-text span { color: #1a1a1a; font-style: normal; } .mfylh-mob-ham { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 5px; padding: 4px; } .mfylh-mob-ham span { display: block; width: 22px; height: 2px; border-radius: 2px; transition: background .2s; } body.mfylh-mode-transparent .mfylh-mob-ham span { background: #fff; } body.mfylh-mode-white .mfylh-mob-ham span { background: #222; } /* ════ MOBILE STICKY ════ */ .mfylh-header-mob-sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 9000; background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.1); overflow: visible; /* lets search results escape below */ /* Use visibility+opacity instead of transform so no stacking context is created. transform would create a new stacking context and clip position:absolute children */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s var(--mfylh-ease), visibility .28s; } .mfylh-header-mob-sticky.mfylh-show { opacity: 1; visibility: visible; pointer-events: all; } .mfylh-mob-sticky-r1 { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; } .mfylh-mob-sticky-logo { font-family: var(--mfylh-font); font-size: 15px; font-weight: 800; letter-spacing: .06em; font-style: italic; color: var(--mfylh-orange); text-decoration: none; display: flex; align-items: center; } .mfylh-mob-sticky-logo span { font-style: normal; color: #1a1a1a; } .mfylh-mob-sticky-ham { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 5px; padding: 4px; } .mfylh-mob-sticky-ham span { display: block; width: 22px; height: 2px; background: #333; border-radius: 2px; } .mfylh-btn-book-mob { font-family: var(--mfylh-font); background: var(--mfylh-orange); color: #fff; border: none; border-radius: 18px; padding: 7px 16px; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; } /* mobile sticky search row */ .mfylh-mob-sticky-r2 { padding: 0 14px 10px; overflow: visible; /* allow search results to drop below */ position: relative; z-index: 9001; /* above header so results appear on top */ } /* ════ SLIDE MENU (from LEFT) ════ */ .mfylh-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 9100; /* above sticky header (9000) but below slide menu */ opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .mfylh-overlay.mfylh-open { opacity: 1; visibility: visible; } .mfylh-slide-menu { position: fixed; top: 0; left: 0; bottom: 0; width: 340px; background: #fff; z-index: 9200; /* above overlay */ display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .32s var(--mfylh-ease); box-shadow: 4px 0 32px rgba(0,0,0,.15); overflow: hidden; } .mfylh-slide-menu.mfylh-open { transform: translateX(0); } @media (max-width: 768px) { .mfylh-slide-menu { width: 100%; } } .mfylh-sm-hdr { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; } .mfylh-sm-logo { font-family: var(--mfylh-font); font-size: 17px; font-weight: 800; letter-spacing: .06em; font-style: italic; color: var(--mfylh-orange); text-decoration: none; display: flex; align-items: center; } .mfylh-sm-logo span { font-style: normal; color: #1a1a1a; } .mfylh-sm-logo img { display: block; } .mfylh-sm-close { background: none; border: none; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #888; font-size: 20px; transition: background .2s, color .2s; } .mfylh-sm-close:hover { background: #f5f5f5; color: #333; } /* FIX #3: slide menu search — zero-styled container */ .mfylh-sm-search { padding: 12px 18px; border-bottom: 1px solid #f5f5f5; flex-shrink: 0; } @media (min-width: 769px) { .mfylh-sm-search { display: none; } } .mfylh-sm-nav { flex: 1; overflow-y: auto; } .mfylh-sm-list { list-style: none; margin: 0; padding: 0; } .mfylh-sm-item { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; font-family: var(--mfylh-font); font-size: 14px; font-weight: 500; color: #222; cursor: pointer; border-bottom: 1px solid #f5f5f5; transition: background .15s; user-select: none; } .mfylh-sm-item:hover { background: #fafafa; } .mfylh-sm-item.mfylh-has-sub { font-weight: 600; } .mfylh-sm-item.mfylh-current { color: var(--mfylh-orange); } .mfylh-sm-item a { text-decoration: none; color: inherit; display: block; width: 100%; font-family: var(--mfylh-font); } .mfylh-sm-chevron { width: 8px; height: 8px; flex-shrink: 0; border-right: 2px solid #bbb; border-bottom: 2px solid #bbb; transform: rotate(45deg); transition: transform .22s; margin-top: -2px; cursor: pointer; position: relative; } /* larger tap target without changing visual size */ .mfylh-sm-chevron::before { content: ''; position: absolute; top: -12px; right: -16px; bottom: -12px; left: -12px; } .mfylh-sm-item.mfylh-sub-open .mfylh-sm-chevron { transform: rotate(-135deg); margin-top: 4px; } .mfylh-sm-sub { display: none; background: #fafafa; } .mfylh-sm-sub.mfylh-open { display: block; } .mfylh-sm-sub a { display: block; padding: 10px 20px 10px 32px; font-family: var(--mfylh-font); font-size: 13px; font-weight: 400; color: #555; text-decoration: none; border-bottom: 1px solid #eee; transition: color .15s, background .15s; } .mfylh-sm-sub a:last-child { border-bottom: none; } .mfylh-sm-sub a:hover { color: var(--mfylh-orange); background: #fff8f2; } .mfylh-sm-footer { padding: 14px 18px; border-top: 1px solid #f0f0f0; display: flex; flex-direction: column; gap: 9px; flex-shrink: 0; } .mfylh-sm-phone { display: block; text-align: center; padding: 10px; border: 2px solid var(--mfylh-orange); border-radius: 26px; font-family: var(--mfylh-font); font-size: 13px; font-weight: 700; color: var(--mfylh-orange); text-decoration: none; transition: all .2s; } .mfylh-sm-phone:hover { background: var(--mfylh-orange); color: #fff; } .mfylh-sm-book { font-family: var(--mfylh-font); display: block; text-align: center; padding: 12px; background: var(--mfylh-orange); border-radius: 26px; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; border: none; width: 100%; transition: background .2s; } .mfylh-sm-book:hover { background: var(--mfylh-orange-dk); } /* ════ RESPONSIVE ════ */ @media (max-width: 768px) { .mfylh-header-full { display: none !important; } .mfylh-header-sticky { display: none !important; } .mfylh-header-mob { display: flex; } } @media (min-width: 769px) { .mfylh-header-mob { display: none !important; } .mfylh-header-mob-sticky { display: none !important; } } /* ════ MOBILE STICKY — SEARCH ROW SCROLL TOGGLE ════ The search row (#mfylh-mob-sticky-search-row) slides up and fades out when the user scrolls DOWN, and slides back in on UP. The rest of the sticky header (r1: logo/ham/book) is unaffected. Max-height trick gives a smooth natural collapse without JS measuring the element's height. ══════════════════════════════════════════════════════ */ #mfylh-mob-sticky-search-row { overflow: hidden; max-height: 80px; /* generous cap — taller than any search bar */ opacity: 1; transition: max-height .35s var(--mfylh-ease), opacity .28s var(--mfylh-ease), padding .35s var(--mfylh-ease), visibility .35s; } #mfylh-mob-sticky-search-row.mfylh-search-hidden { max-height: 0; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; visibility: hidden; } /* ════ BOTTOM FLOATING BAR (mobile only) ════ */ #mfylh-bottom-bar { display: none; /* hidden on desktop by default */ } @media (max-width: 768px) { #mfylh-bottom-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 899; background: #fff; box-shadow: 0 -2px 16px rgba(0,0,0,.1); align-items: center; justify-content: space-around; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); transition: transform .32s var(--mfylh-ease), opacity .32s var(--mfylh-ease); } #mfylh-bottom-bar.mfylh-bb-hidden { transform: translateY(100%); opacity: 0; pointer-events: none; } /* Each nav item */ .mfylh-bb-item { display: flex; flex-direction: row; align-items: center; gap: 0; text-decoration: none; color: #555; font-family: var(--mfylh-font); font-size: 12px; font-weight: 600; flex: 1; padding: 6px 4px; border-radius: 8px; transition: color .18s, background .18s; min-width: 0; text-align: center; justify-content: center; } .mfylh-bb-item:hover, .mfylh-bb-item:active { color: var(--mfylh-orange); } /* The Book now CTA button inside the bar */ .mfylh-bb-item.mfylh-bb-cta { background: var(--mfylh-orange); color: #fff; border-radius: 22px; flex: 0 0 auto; padding: 8px 18px; font-size: 12px; font-weight: 700; flex-direction: row; gap: 6px; white-space: nowrap; } .mfylh-bb-item.mfylh-bb-cta:hover, .mfylh-bb-item.mfylh-bb-cta:active { background: var(--mfylh-orange-dk); color: #fff; } /* Add bottom padding to body so content isn't hidden behind the bar body.mfylh-bb-active { padding-bottom: calc(58px + env(safe-area-inset-bottom)); } */ } div#mfylh-bottom-bar { margin-bottom: 15px; margin-left: 10px; margin-right: 10px; padding: 10px; border-radius: 40px; box-shadow: 0px 4px 6px -1px #0000001A; }