:root{ --mega-radius: 16px; --mega-shadow: 0 30px 80px rgba(0,0,0,.14); --mega-border: 1px solid rgba(0,0,0,.08); --mega-bg: #fff; --mega-gutter: 12px; --mega-dur: 220ms; --mega-open-dur: 220ms; --mega-close-dur: 220ms; --mega-ease: cubic-bezier(.2,.8,.2,1); --tabs-w: 260px; --tabs-gap: 10px; --tab-radius: 12px; --tab-pad-y: 10px; --tab-pad-x: 12px; --tab-bg: rgba(0,0,0,.04); --tab-bg-active: rgba(0,0,0,.08); --tab-color: #111; --tab-color-active: #111; --panel-pad: 16px; } .landing-mega-nav{ position: relative; overflow: visible; width: 100%; } .menu-items{ list-style:none; margin:0; padding:0; display:flex; gap:18px; align-items:center; } .menu-link{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; text-decoration:none; color:#111; } .menu-item:not(.has-mega-menu) > .menu-link:hover{ background: rgba(0,0,0,.05); } .menu-item.has-mega-menu > .menu-link:hover{ background: transparent; } @media (hover:hover) and (pointer:fine){ .menu-item.has-mega-menu.mega-trig-hover:hover > .menu-link, .menu-item.has-mega-menu.mega-trig-hover:focus-within > .menu-link{ background: rgba(0,0,0,.05); } } .menu-item.has-mega-menu.is-open > .menu-link{ background: rgba(0,0,0,.05); } .elementor-widget-container .mega-menu{ overflow: visible; } .mega-menu{ display: block; position: absolute; top: 100%; margin-top: 0; right: auto; left: auto; width: auto; max-width: none; z-index: 9999; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity; max-width: 100vw !important; height: min(var(--mega-menu-max-h, 100vh), calc(100vh - var(--mega-vh-offset))); transition: opacity var(--mega-close-dur, var(--mega-dur)) var(--mega-ease), transform var(--mega-close-dur, var(--mega-dur)) var(--mega-ease), visibility 0s linear var(--mega-close-dur, var(--mega-dur)); } .mega-menu.is-opening, .mega-menu.is-closing{ transition: none; } .mega-menu[data-mega-x="viewport"]{ inset-inline-start: 0; inset-inline-end: 0; } .mega-menu[data-mega-x="anchor"]{ inset-inline-start: var(--mega-anchor-start, 0); inset-inline-end: 0; width: calc(100% - var(--mega-anchor-start, 0)); } .mega-menu[data-mega-x="header"]{ inset-inline-start: 0; inset-inline-end: 0; width: var(--mega-panel-w); } .mega-menu[data-mega-width="custom"]{ width: min(var(--mega-panel-w, 1100px), calc(100vw - (var(--mega-gutter) * 2))); inset-inline-end: auto; } .mega-menu[data-mega-width="content"]{ width: max-content; inset-inline-end: auto; max-width: calc(100vw - (var(--mega-gutter) * 2)); } .prk-smart-trigger-mega-stack{ z-index: var(--prk-smart-trigger-mega-stack-z, 10050) !important; } .menu-item.has-mega-menu.is-open > .mega-menu, .mega-menu.is-open{ opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity var(--mega-open-dur, var(--mega-dur)) var(--mega-ease), transform var(--mega-open-dur, var(--mega-dur)) var(--mega-ease), visibility var(--mega-open-dur, var(--mega-dur)) var(--mega-ease); } .mega-menu .tabbed-menu-list{ display:flex; align-items:stretch; width:100%; height: 100%; } .mega-menu.mega--tabs-vertical .tabbed-menu-list{ flex-direction: row; } .mega-menu.mega--tabs-horizontal .tabbed-menu-list{ flex-direction: column; } .mega-menu.mega--tabs-horizontal .tabbed-menu-list-item{ flex-direction: row; flex-wrap: wrap; border-bottom: 1px solid rgba(0,0,0,.08); } .mega-menu .tab-item{ border-top: 1px solid #fff; border-bottom: 1px solid #fff; border-right: solid 3px transparent; } .mega-menu .tab-item.active{ border-right: solid 3px var(--prk-color-gradient-end, #ff6a00); background: linear-gradient(270deg, rgba(255, 10, 10, .1) 0%, rgba(239, 58, 79, .01) 100%); color: var(--prk-color-gradient-end, #ff6a00); } .mega-menu[data-mega-active-style="underline"] .tab-item.active::after{ content:""; position:absolute; inset-inline: 12px; bottom: 6px; height: 2px; border-radius: 99px; background: rgba(0,0,0,.45); } .mega-menu[data-mega-active-style="leftbar"] .tab-item.active::before{ content:""; position:absolute; inset-inline-start: 8px; top: 10px; bottom: 10px; width: 3px; border-radius: 99px; background: rgba(0,0,0,.45); } .mega-menu[data-mega-links-width="full"] .tabbed-mega-menu-content{ flex: 1 1 auto; min-width: 0; } .mega-menu[data-mega-links-width="custom"] .tabbed-mega-menu-content{ flex: 0 0 var(--mega-links-w, 1100px); max-width: 100%; } .mega-menu[data-mega-links-width="content"] .tabbed-mega-menu-content{ width: max-content; flex: 0 0 auto; max-width: 100%; } .mega-menu.mega--content-hidden .tabbed-mega-menu-content{ display:none; } .mega-menu .tabbed-mega-menu-item{ display:none; } .mega-menu .tabbed-mega-menu-item.is-active{ display:block; } @keyframes megaFadeIn{ from{ opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } } @keyframes megaFadeOut{ from{ opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(10px) scale(.985); } } @keyframes megaSlideDownIn{ from{ opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes megaSlideLeftIn{ from{ opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes megaSlideLeftOut{ from{ opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(30px); } } @keyframes megaSlideUpOut{ from{ opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } } @keyframes megaScaleIn{ from{ opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } @keyframes megaScaleOut{ from{ opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.96); } } .mega-menu.is-opening.anim-open-fade{ animation: megaFadeIn var(--mega-open-dur, var(--mega-dur)) var(--mega-ease) both; } .mega-menu.is-closing.anim-close-fade{ animation: megaFadeOut var(--mega-close-dur, var(--mega-dur)) var(--mega-ease) both; } .mega-menu[data-mega-open-anim="slide-up"].is-opening{ animation: megaSlideDownIn var(--mega-open-dur, var(--mega-dur)) both; } .mega-menu[data-mega-close-anim="slide-up"].is-closing{ animation: megaSlideUpOut var(--mega-close-dur, var(--mega-dur)) both; } .mega-menu[data-mega-open-anim="slide-left"].is-opening{ animation: megaSlideLeftIn var(--mega-open-dur, var(--mega-dur)) both; } .mega-menu[data-mega-close-anim="slide-left"].is-closing{ animation: megaSlideLeftOut var(--mega-close-dur, var(--mega-dur)) both; } .mega-menu.is-opening.anim-open-scale{ animation: megaScaleIn var(--mega-open-dur, var(--mega-dur)) var(--mega-ease) both; } .mega-menu.is-closing.anim-close-scale{ animation: megaScaleOut var(--mega-close-dur, var(--mega-dur)) var(--mega-ease) both; } @keyframes panelFadeIn{ from{opacity:0} to{opacity:1} } @keyframes panelSlideUpIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} } @keyframes panelSlideLeftIn{ from{opacity:0; transform:translateX(16px)} to{opacity:1; transform:translateX(0)} } @keyframes moveUp{ from{opacity:0; transform:translateY(25px)} to{opacity:1; transform:translateY(0)} } .tabbed-mega-menu-item.is-enter.anim-tab-fade{ animation: panelFadeIn var(--mega-dur) var(--mega-ease) both; } .tabbed-mega-menu-item.is-enter.anim-tab-slide-up{ animation: panelSlideUpIn var(--mega-dur) var(--mega-ease) both; } .tabbed-mega-menu-item.is-enter.anim-tab-slide-left{ animation: panelSlideLeftIn var(--mega-dur) var(--mega-ease) both; } .tabbed-mega-menu-item.is-enter.anim-tab-scale{ animation: panelScaleIn var(--mega-dur) var(--mega-ease) both; } .tabbed-mega-menu-item.is-enter.anim-tab-move-up{ animation: moveUp var(--mega-dur) cubic-bezier(.26,.69,.37,.96); } body.landing-mega-scroll-lock{ overflow: hidden; } .mega-menu-overlay{ position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.35); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--mega-overlay-dur, 220ms) var(--mega-ease, ease); } .mega-menu-overlay.is-active, .mega-menu-overlay.is-closing{ visibility: visible; } .mega-menu-overlay.is-active{ opacity: 1; pointer-events: auto; } .mega-menu-overlay.is-closing{ opacity: 0; pointer-events: auto; } .munu-item-title::before { content: ''; position: relative; top: 4px; width: 4px; padding: 8px 1px; margin-left: 5px; border-radius: 1px; background-color: var(--prk-color-gradient-end, #ff6a00); display: inline-block; } .mega-menu[data-mega-open-anim="height"]{ overflow: hidden; height: 0; } .mega-menu[data-mega-open-anim="height"].is-open{ height: min(var(--mega-menu-max-h, 100vh), calc(100vh - var(--mega-vh-offset))); } @keyframes megaHeightOpen{ from{ height: 0; } to { height: var(--mega-open-to-h, min(var(--mega-menu-max-h, 100vh), calc(100vh - var(--mega-vh-offset)))); } } @keyframes megaHeightClose{ from{ height: var(--mega-close-from-h, min(var(--mega-menu-max-h, 100vh), calc(100vh - var(--mega-vh-offset)))); } to { height: 0; } } .mega-menu[data-mega-open-anim="height"].is-opening{ animation: megaHeightOpen var(--mega-open-dur, var(--mega-dur)) var(--mega-ease) both; } .mega-menu[data-mega-close-anim="height"].is-closing{ animation: megaHeightClose var(--mega-close-dur, var(--mega-dur)) var(--mega-ease) both; } .mega-menu.is-closing.is-open{ height: auto; } .mega-menu[data-mega-open-anim="height"].is-opening .tabbed-menu-list-item { overflow: hidden; } .mega-menu[data-mega-open-anim="height"].is-closing .tabbed-menu-list-item { overflow: hidden; } .mega-menu[data-mega-open-anim="height"].is-opening .tabbed-mega-menu-content { overflow: hidden; } .mega-menu[data-mega-open-anim="height"].is-closing .tabbed-mega-menu-content { overflow: hidden; } @keyframes megaSlideDownInFromTop{ from{ opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes megaSlideDownOutToTop{ from{ opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } } .mega-menu[data-mega-open-anim="slide-down"].is-opening{ animation: megaSlideDownInFromTop var(--mega-open-dur, var(--mega-dur)) var(--mega-ease) both; } .mega-menu[data-mega-close-anim="slide-down"].is-closing{ animation: megaSlideDownOutToTop var(--mega-close-dur, var(--mega-dur)) var(--mega-ease) both; } @media (prefers-reduced-motion: reduce){ .mega-menu[data-mega-open-anim="slide-down"].is-opening, .mega-menu[data-mega-close-anim="slide-down"].is-closing{ animation: none !important; } } .mega-menu[data-mega-split="1"] { background: transparent; height: auto; pointer-events: none !important; } .mega-menu[data-mega-split="1"] .tabbed-menu-list { gap: 2px; } .mega-menu[data-mega-split="1"] .tabbed-menu-list-item { background: white; pointer-events: all; border: none; border-radius: 16px; } .mega-menu[data-mega-split="1"] .tabbed-mega-menu-content { background: white; pointer-events: all; border-radius: 16px; width: fit-content; height: fit-content; } @keyframes landingMegaPanelIn { from { opacity: 0; transform: translate3d(20px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes itemFade { from { opacity: 0; transform: translate3d(20px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .mega-menu[data-mega-animate="1"] .landing-mega-panel-in { animation-name: landingMegaPanelIn; animation-duration: var(--mega-dur, 220ms); animation-timing-function: cubic-bezier(.2,.8,.2,1); animation-fill-mode: both; will-change: transform, opacity; } .mega-menu[data-mega-animate="1"] .landing-mega-item-in { opacity: 0; transform: translate3d(20px, 0, 0); animation: 0.5s ease 0s 1 normal forwards running itemFade; will-change: transform, opacity; } .mega-menu[data-mega-split="1"][data-mega-animate="1"] .tabbed-mega-menu-content { border-radius: 0; } .mega-menu[data-normall-menu="1"] { right: auto; left: auto; margin-right: 0; background: transparent; top: 95%; }