/** * WPminty Popups Pro — shared frontend stylesheet. * * Consumes the `--wpminty-popup-*` custom properties emitted by * Modules\Renderer (zero-emission guarded: every variable has its * fallback declared here, so popups with default settings print no * inline style at all). * * Media queries mirror the wpminty theme.json viewport breakpoints * (mobile 600px / tablet 960px) — do not introduce other values. * Animations run on transform/opacity only. No !important. * * z-index map (frozen contract): * - wrapper / overlay : 99998 * - container : 99999 */ /* ------------------------------------------------------------------ */ /* Scroll lock (runtime toggles the class on ) */ /* ------------------------------------------------------------------ */ html.wpminty-popup-lock { overflow: hidden; padding-right: var(--wpminty-popup-sbw, 0px); } /* ------------------------------------------------------------------ */ /* Wrapper: closed state is invisible and interaction-free */ /* ------------------------------------------------------------------ */ .wpminty-popup { position: fixed; inset: 0; z-index: 99998; display: flex; visibility: hidden; pointer-events: none; } .wpminty-popup.is-open { visibility: visible; pointer-events: auto; } /* ------------------------------------------------------------------ */ /* Overlay */ /* ------------------------------------------------------------------ */ .wpminty-popup-overlay { position: absolute; inset: 0; z-index: 99998; background: var(--wpminty-popup-overlay, rgba(18, 21, 25, 0.5)); opacity: 0; transition: opacity var(--wpminty-popup-anim-speed, 0.3s) ease; } /* Blur applies only when the renderer emitted a positive blur value. */ .wpminty-popup--blur .wpminty-popup-overlay { -webkit-backdrop-filter: blur(var(--wpminty-popup-overlay-blur, 0px)); backdrop-filter: blur(var(--wpminty-popup-overlay-blur, 0px)); } /* ------------------------------------------------------------------ */ /* Container: shared panel styling */ /* ------------------------------------------------------------------ */ .wpminty-popup-container { position: relative; z-index: 99999; display: flex; flex-direction: column; width: 100%; max-width: var(--wpminty-popup-max-w, 600px); max-height: var(--wpminty-popup-max-h, none); background: var(--wpminty-popup-bg, #fff); padding: var(--wpminty-popup-pad, 25px); /* Panel border: the renderer emits the complete shorthand only when design.panel_border is set (zero-emission guarded). */ border: var(--wpminty-popup-border, none); border-radius: var(--wpminty-popup-radius, 6px); box-shadow: var(--wpminty-popup-shadow, 0 24px 64px rgba(10, 12, 16, 0.28)); overflow: auto; overscroll-behavior: contain; opacity: 0; transition: opacity var(--wpminty-popup-anim-speed, 0.3s) ease, transform var(--wpminty-popup-anim-speed, 0.3s) ease; } /* Overflow deviations from the `scroll` (auto) default. */ .wpminty-popup--overflow-hidden .wpminty-popup-container { overflow: hidden; } .wpminty-popup--overflow-visible .wpminty-popup-container { overflow: visible; } .wpminty-popup-content { position: relative; min-height: 0; } /* Keep inner block margins tidy against the panel padding. */ .wpminty-popup-content > :first-child { margin-top: 0; } .wpminty-popup-content > :last-child { margin-bottom: 0; } /* ------------------------------------------------------------------ */ /* Display mode: modal (9-grid placement via wrapper flex) */ /* ------------------------------------------------------------------ */ .wpminty-popup--modal { padding: var(--wpminty-popup-edge, 25px); align-items: center; justify-content: center; } .wpminty-popup--modal.wpminty-popup--pos-top-left { align-items: flex-start; justify-content: flex-start; } .wpminty-popup--modal.wpminty-popup--pos-top-center { align-items: flex-start; justify-content: center; } .wpminty-popup--modal.wpminty-popup--pos-top-right { align-items: flex-start; justify-content: flex-end; } .wpminty-popup--modal.wpminty-popup--pos-center-left { align-items: center; justify-content: flex-start; } .wpminty-popup--modal.wpminty-popup--pos-center { align-items: center; justify-content: center; } .wpminty-popup--modal.wpminty-popup--pos-center-right { align-items: center; justify-content: flex-end; } .wpminty-popup--modal.wpminty-popup--pos-bottom-left { align-items: flex-end; justify-content: flex-start; } .wpminty-popup--modal.wpminty-popup--pos-bottom-center { align-items: flex-end; justify-content: center; } .wpminty-popup--modal.wpminty-popup--pos-bottom-right { align-items: flex-end; justify-content: flex-end; } /* ------------------------------------------------------------------ */ /* Modal entrance prep states (transform/opacity only). */ /* The `.is-open` end state is declared after every prep state below. */ /* ------------------------------------------------------------------ */ .wpminty-popup--modal.wpminty-popup--anim-zoom .wpminty-popup-container { transform: scale(0.9); } .wpminty-popup--modal.wpminty-popup--anim-slide-left .wpminty-popup-container { transform: translateX(calc(var(--wpminty-popup-anim-distance, 50px) * -1)); } .wpminty-popup--modal.wpminty-popup--anim-slide-right .wpminty-popup-container { transform: translateX(var(--wpminty-popup-anim-distance, 50px)); } .wpminty-popup--modal.wpminty-popup--anim-slide-top .wpminty-popup-container { transform: translateY(calc(var(--wpminty-popup-anim-distance, 50px) * -1)); } .wpminty-popup--modal.wpminty-popup--anim-slide-bottom .wpminty-popup-container { transform: translateY(var(--wpminty-popup-anim-distance, 50px)); } /* ------------------------------------------------------------------ */ /* Display mode: drawers (full-height side panels) */ /* ------------------------------------------------------------------ */ .wpminty-popup--drawer-left .wpminty-popup-container, .wpminty-popup--drawer-right .wpminty-popup-container { position: absolute; top: 0; bottom: 0; width: var(--wpminty-popup-max-w, 600px); max-width: 100%; max-height: none; border-radius: 0; } .wpminty-popup--drawer-left .wpminty-popup-container { left: 0; transform: translateX(-100%); } .wpminty-popup--drawer-right .wpminty-popup-container { right: 0; transform: translateX(100%); } /* ------------------------------------------------------------------ */ /* Display mode: notification bars (edge-to-edge) */ /* ------------------------------------------------------------------ */ .wpminty-popup--top-bar .wpminty-popup-container, .wpminty-popup--bottom-bar .wpminty-popup-container { position: absolute; left: 0; right: 0; width: auto; max-width: none; max-height: none; border-radius: 0; } .wpminty-popup--top-bar .wpminty-popup-container { top: 0; transform: translateY(-100%); } .wpminty-popup--bottom-bar .wpminty-popup-container { bottom: 0; transform: translateY(100%); } /* ------------------------------------------------------------------ */ /* Display mode: fullscreen */ /* ------------------------------------------------------------------ */ .wpminty-popup--fullscreen .wpminty-popup-container { position: absolute; inset: 0; width: auto; max-width: none; max-height: none; border-radius: 0; } /* ------------------------------------------------------------------ */ /* Open end state: declared last so it wins over every prep transform */ /* (same-specificity ties resolve by source order). */ /* ------------------------------------------------------------------ */ .wpminty-popup.is-open .wpminty-popup-overlay { opacity: 1; } .wpminty-popup.is-open .wpminty-popup-container { opacity: 1; transform: none; } /* ------------------------------------------------------------------ */ /* Close button */ /* ------------------------------------------------------------------ */ .wpminty-popup-close { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--wpminty-popup-close-color, #4d5460); cursor: pointer; transition: color 0.2s ease; } .wpminty-popup-close:hover, .wpminty-popup-close:focus-visible { color: var(--wpminty-popup-close-hover, #12151a); } .wpminty-popup-close svg { pointer-events: none; } /* Outside variant floats over the overlay, above the panel corner. */ .wpminty-popup--close-outside .wpminty-popup-close { top: 0; right: 0; transform: translate(100%, -100%); color: var(--wpminty-popup-close-color, #fff); } .wpminty-popup--close-outside .wpminty-popup-close:hover, .wpminty-popup--close-outside .wpminty-popup-close:focus-visible { color: var(--wpminty-popup-close-hover, #d5d9e0); } /* ------------------------------------------------------------------ */ /* Responsive variable consumption (mirrors theme.json 600 / 960) */ /* ------------------------------------------------------------------ */ @media (max-width: 960px) { .wpminty-popup-container { max-width: var(--wpminty-popup-max-w-tablet, var(--wpminty-popup-max-w, 600px)); max-height: var(--wpminty-popup-max-h-tablet, var(--wpminty-popup-max-h, none)); } .wpminty-popup--modal { padding: var(--wpminty-popup-edge-tablet, var(--wpminty-popup-edge, 25px)); } /* Tablet-hidden popups are restored below 600px (mobile owns it). */ .wpminty-popup--hide-tablet { display: none; } } @media (max-width: 600px) { .wpminty-popup-container { max-width: var(--wpminty-popup-max-w-mobile, var(--wpminty-popup-max-w-tablet, var(--wpminty-popup-max-w, 600px))); max-height: var(--wpminty-popup-max-h-mobile, var(--wpminty-popup-max-h-tablet, var(--wpminty-popup-max-h, none))); } .wpminty-popup--modal { padding: var(--wpminty-popup-edge-mobile, var(--wpminty-popup-edge-tablet, var(--wpminty-popup-edge, 25px))); } /* Undo the tablet hide so "hide tablet, show mobile" works. */ .wpminty-popup--hide-tablet { display: flex; } .wpminty-popup--hide-mobile { display: none; } } @media (min-width: 960px) { .wpminty-popup--hide-desktop { display: none; } } /* ------------------------------------------------------------------ */ /* Motion preferences: CSS-side switch, runtime also adds the class */ /* ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .wpminty-popup-overlay, .wpminty-popup-container, .wpminty-popup-close { transition-duration: 0s; } } .wpminty-popup--no-motion .wpminty-popup-overlay, .wpminty-popup--no-motion .wpminty-popup-container, .wpminty-popup--no-motion .wpminty-popup-close { transition-duration: 0s; }