/** * Elegant Popup — front-end styles. * * Typography is deliberately left alone: the popup inherits whatever the theme * has set on , and the content wrapper carries the theme's content class * so headings, links and buttons look like the rest of the site. */ .elpop-root[hidden] { display: none !important; } .elpop-root { --elpop-overlay: rgba( 17, 17, 17, 0.65 ); --elpop-max-width: 940px; --elpop-surface: #fff; /* Same colour at zero alpha — the scroll fade must dissolve into whatever the panel background is, not into white. */ --elpop-surface-fade: rgba( 255, 255, 255, 0 ); --elpop-pad: clamp( 26px, 3vw, 46px ); --elpop-heading-gap: 0.7em; position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: clamp( 12px, 3vw, 40px ); font: inherit; color: inherit; opacity: 0; transition: opacity 0.28s ease; } .elpop-root.is-open { opacity: 1; } .elpop-root *, .elpop-root *::before, .elpop-root *::after { box-sizing: border-box; } .elpop-overlay { position: absolute; inset: 0; background: var( --elpop-overlay ); cursor: pointer; } /* -------------------------------------------------------------------------- Modal -------------------------------------------------------------------------- */ .elpop-modal { position: relative; display: flex; align-items: stretch; width: 100%; max-width: var( --elpop-max-width ); max-height: min( 88vh, 780px ); min-height: min( 400px, 56vh ); overflow: hidden; background: var( --elpop-surface ); border-radius: 3px; box-shadow: 0 24px 70px -18px rgba( 0, 0, 0, 0.45 ), 0 2px 8px rgba( 0, 0, 0, 0.12 ); transform: translateY( 14px ) scale( 0.985 ); transition: transform 0.34s cubic-bezier( 0.16, 1, 0.3, 1 ); } .elpop-root.is-open .elpop-modal { transform: none; } .elpop--media-right .elpop-modal { flex-direction: row-reverse; } .elpop--no-media .elpop-modal { max-width: min( var( --elpop-max-width ), 620px ); min-height: 0; } /* -------------------------------------------------------------------------- Image column -------------------------------------------------------------------------- */ .elpop-media { position: relative; flex: 0 0 44%; overflow: hidden; background: #ece8e2; } .elpop-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; } /* -------------------------------------------------------------------------- Content column — scrolls on its own when a form runs taller than the image -------------------------------------------------------------------------- */ .elpop-body { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Auto margins centre the text against the image when there is spare room, and collapse to nothing when there is not — so a tall form still starts at the top and scrolls the whole way. justify-content: center would instead cut off the top of an overflowing form and make it unreachable. */ .elpop-content { flex: 0 0 auto; margin-top: auto; margin-bottom: auto; padding: var( --elpop-pad ); } /* Spacing only — font, size, weight and colour stay inherited from the theme. These carry three classes because a theme rule like `.entry-content h2` would otherwise out-specify them, and a stray heading margin throws off both the gap below the heading and the vertical centring above. */ .elpop-modal .elpop-content > *:first-child { margin-top: 0; } .elpop-modal .elpop-content .elpop-heading { margin: 0 0 var( --elpop-heading-gap ); } .elpop-modal .elpop-content > *:last-child { margin-bottom: 0; } /* Sticky hint that there is more below. Sits flush to the bottom edge because the scroll container itself carries no padding. */ .elpop-fade { position: sticky; bottom: 0; flex: 0 0 auto; height: 56px; margin-top: -56px; opacity: 0; pointer-events: none; background: linear-gradient( to bottom, var( --elpop-surface-fade ), var( --elpop-surface ) 82% ); transition: opacity 0.2s ease; } .elpop-body.is-scrollable .elpop-fade { opacity: 1; } .elpop-body.is-at-bottom .elpop-fade { opacity: 0; } /* -------------------------------------------------------------------------- Close button -------------------------------------------------------------------------- */ .elpop-close { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; color: #2b2b2b; cursor: pointer; background: rgba( 255, 255, 255, 0.92 ); border: 0; border-radius: 50%; box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.16 ); transition: background-color 0.18s ease, transform 0.18s ease; -webkit-appearance: none; appearance: none; } .elpop-close:hover, .elpop-close:focus-visible { background: #fff; transform: scale( 1.06 ); } .elpop-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* -------------------------------------------------------------------------- Embedded forms — light touch, Gravity Forms styles its own layout -------------------------------------------------------------------------- */ .elpop-content .gform_wrapper { margin: 1.25em 0 0; } .elpop-content .gform_wrapper form { margin: 0; } .elpop-content input, .elpop-content select, .elpop-content textarea { max-width: 100%; } .elpop-content .gform_footer { padding-bottom: 0; margin-bottom: 0; } /* -------------------------------------------------------------------------- Page scroll lock -------------------------------------------------------------------------- */ html.elpop-locked, html.elpop-locked body { overflow: hidden; } html.elpop-locked body { position: fixed; width: 100%; } /* -------------------------------------------------------------------------- Mobile — stack, cap the image, let the whole card scroll -------------------------------------------------------------------------- */ @media ( max-width: 782px ) { .elpop-root { --elpop-pad: 24px; align-items: flex-end; padding: 0; } .elpop-modal, .elpop--media-right .elpop-modal { flex-direction: column; max-width: none; max-height: 92vh; min-height: 0; border-radius: 14px 14px 0 0; } .elpop-media { flex: 0 0 auto; width: 100%; max-height: 30vh; aspect-ratio: 16 / 9; } .elpop--hide-media-mobile .elpop-media { display: none; } .elpop-content { padding: var( --elpop-pad ) var( --elpop-pad ) calc( var( --elpop-pad ) + env( safe-area-inset-bottom, 0px ) ); } .elpop-close { top: 10px; right: 10px; width: 40px; height: 40px; } } /* Very short screens — a landscape phone or a small laptop. */ @media ( max-height: 560px ) { .elpop-modal { min-height: 0; max-height: 94vh; } .elpop-media { max-height: 22vh; } } @media ( prefers-reduced-motion: reduce ) { .elpop-root, .elpop-modal, .elpop-close, .elpop-fade { transition: none; } .elpop-modal { transform: none; } }