/* * 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 — same logged in or out. WP already adds margin-top:32px/46px to body when admin bar shows, so we must NOT add it again here. */ 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); } body.mfylh-mode-transparent.mfylh-active { padding-top: 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: 901; background: #fff; box-shadow: 0 2px 24px rgba(0,0,0,.1); height: var(--mfylh-sticky-h); opacity: 0; transform: translateY(-100%); pointer-events: none; transition: opacity .3s var(--mfylh-ease), transform .3s var(--mfylh-ease); } .mfylh-header-sticky.mfylh-show { opacity: 1; transform: translateY(0); pointer-events: all; } .mfylh-sticky-inner { height: 100%; 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; } .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; /* No border, padding, or background — search plugin owns its own styles */ } .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: 901; background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.1); opacity: 0; transform: translateY(-100%); pointer-events: none; transition: opacity .3s var(--mfylh-ease), transform .3s var(--mfylh-ease); } .mfylh-header-mob-sticky.mfylh-show { opacity: 1; transform: translateY(0); 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; } /* FIX #3: mobile sticky search row — zero styling container */ .mfylh-mob-sticky-r2 { padding: 0 14px 10px; /* No border/background overrides on the search plugin's output */ } /* ════ SLIDE MENU (from LEFT) ════ */ .mfylh-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; 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: 1001; 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; }