/* ============================================================ * MW Dropdown Button Widget * * Pill-shaped "View more" button with a down-chevron that reveals * a dropdown list of links on click. * * The menu is appended to via JS to escape Elementor * stacking contexts. It uses position:absolute with page-relative * coordinates so it scrolls naturally with the page — no judder. * ============================================================ */ /* ── Wrapper ── */ .mw-dropdown-button__wrap { display: inline-block; position: relative; } /* ── Trigger Button ── */ .mw-dropdown-button__trigger, .mw-dropdown-button__trigger:hover, .mw-dropdown-button__trigger:focus, .mw-dropdown-button__trigger:focus-visible, .mw-dropdown-button__trigger:active, .mw-dropdown-button__trigger:visited { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; border: none !important; border-radius: 50px; background-color: rgba(255, 255, 255, 0.15); color: #ffffff; font-family: inherit; font-size: 18px; font-weight: 400; line-height: 1.4; cursor: pointer; white-space: nowrap; transition: background-color 0.2s ease; -webkit-appearance: none; appearance: none; outline: none !important; box-shadow: none !important; text-decoration: none; } .mw-dropdown-button__trigger:hover { background-color: rgba(255, 255, 255, 0.25); } /* ── Label ── */ .mw-dropdown-button__label { pointer-events: none; } /* ── Chevron ── */ .mw-dropdown-button__chevron { flex-shrink: 0; transition: transform 0.25s ease; } .mw-dropdown-button__trigger[aria-expanded="true"] .mw-dropdown-button__chevron { transform: rotate(180deg); } /* ── Dropdown Menu (on , positioned by JS) ── */ .mw-dropdown-button__menu { position: fixed; min-width: 200px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); padding: 8px 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 9999; } .mw-dropdown-button__menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; } /* ── Link Items ── */ .mw-dropdown-button__link, .mw-dropdown-button__link:visited { display: block; padding: 10px 20px; color: #1a1a1a; font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.4; text-decoration: none; background: transparent; transition: background-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .mw-dropdown-button__link:hover, .mw-dropdown-button__link:focus-visible { color: #2F31FC; background-color: #f5f5f5; text-decoration: none; } .mw-dropdown-button__link:focus-visible { outline: 2px solid #2F31FC; outline-offset: -2px; } /* ── Responsive ── */ @media (max-width: 767px) { .mw-dropdown-button__trigger { font-size: 16px; padding: 12px 24px; gap: 8px; } .mw-dropdown-button__link { font-size: 15px; padding: 10px 16px; } }