/** * mod_nxpopup - styles * * Native popup. All themeable values come in as CSS custom * properties set on the dialog element by the template. * * Structure: * .nxpopup -> the native (rounded clip + transitions) * .nxpopup__frame -> optional white framed border (close button lives here) * .nxpopup__inner -> the visual card (background image lives here) * * @copyright Copyright (C) 2026 NexusPlugins. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt */ /* Scroll lock applied to while a popup is open. */ body.nxpopup-open { overflow: hidden; } /* --------------------------------------------------------- Dialog (root) */ .nxpopup { --nxpopup-bg: #ffffff; --nxpopup-image: none; --nxpopup-image-position: center center; --nxpopup-image-size: cover; --nxpopup-title-highlight: #f43f5e; --nxpopup-title-align: left; --nxpopup-content-align: left; --nxpopup-button-bg: #f43f5e; --nxpopup-button-color: #ffffff; --nxpopup-button-border: #f43f5e; box-sizing: border-box; display: flex; flex-direction: column; width: fit-content; max-width: calc(100vw - 1.5rem); max-height: calc(100dvh - 1.5rem); margin: auto; padding: 0; border: 0; border-radius: 16px; overflow: hidden; color: #ffffff; background: transparent; box-shadow: 0 24px 60px rgba(6, 18, 46, 0.45); /* Enter/exit transition (close also works without JS via allow-discrete). */ opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity 0.28s ease, transform 0.28s ease, overlay 0.28s ease allow-discrete, display 0.28s ease allow-discrete; } /* Closed state. Without this, the display: flex above overrides the UA's dialog:not([open]) { display: none } (author origin beats UA origin), leaving a closed dialog rendered and adding stray scrollable overflow — before JS runs and again after closing. The display transition above is allow-discrete, so the flip to none still happens after the exit transition when closing without JS. */ .nxpopup:not([open]) { display: none; } .nxpopup[open] { opacity: 1; transform: none; } /* Starting state when the dialog enters the top layer. */ @starting-style { .nxpopup[open] { opacity: 0; transform: translateY(10px) scale(0.98); } } /* Exit state driven by JS (kept after [open] so it wins on source order). */ .nxpopup.nxpopup--closing { opacity: 0; transform: translateY(10px) scale(0.98); } /* ------------------------------------------------------------ Backdrop */ .nxpopup::backdrop { background: rgba(6, 16, 40, 0.55); opacity: 0; transition: opacity 0.28s ease, overlay 0.28s ease allow-discrete, display 0.28s ease allow-discrete; } .nxpopup[open]::backdrop { opacity: 1; } @starting-style { .nxpopup[open]::backdrop { opacity: 0; } } .nxpopup.nxpopup--closing::backdrop { opacity: 0; } /* --------------------------------------------------------------- Frame */ .nxpopup__frame { position: relative; box-sizing: border-box; display: flex; flex-direction: column; min-height: 0; border-radius: inherit; } /* Initial focus lands on the frame (tabindex="-1", scripted focus), so no interactive control is pre-armed on open and no focus ring needs suppressing. :focus-visible never matches scripted focus, so real keyboard rings elsewhere are unaffected. */ .nxpopup__frame:focus { outline: none; } /* Optional white framed border (toggled by the "Render popup border" param). Extra top padding gives a full-width white strip for the close button. */ .nxpopup--bordered .nxpopup__frame { padding: 44px 10px 10px; background: var(--nxpopup-bg); } /* --------------------------------------------------------------- Inner */ .nxpopup__inner { position: relative; box-sizing: border-box; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: safe center; width: 600px; height: 600px; max-width: 100%; padding: clamp(1.75rem, 4.5vw, 2.75rem); overflow-y: auto; border-radius: 8px; color: #ffffff; background-color: var(--nxpopup-bg); background-image: var(--nxpopup-image); background-position: var(--nxpopup-image-position); background-size: var(--nxpopup-image-size); background-repeat: no-repeat; } /* Without the frame the inner fills the dialog, which clips it to 16px. */ .nxpopup:not(.nxpopup--bordered) .nxpopup__inner { border-radius: 16px; } /* ---------------------------------------------------------- Close icon */ .nxpopup__close { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: #ffffff; background: none; border: 0; border-radius: 50%; cursor: pointer; transition: opacity 0.2s ease; } /* Dark icon when it sits on the white frame. */ .nxpopup--bordered .nxpopup__close { color: #1c1b1f; } .nxpopup__close:hover { opacity: 0.7; } .nxpopup__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .nxpopup__close-icon { display: block; width: 24px; height: 24px; } /* --------------------------------------------------------------- Title */ .nxpopup__title { margin: 0; text-align: var(--nxpopup-title-align); font-size: 2.9375rem; /* ~47px */ font-weight: 800; line-height: 1.15; color: #ffffff; } .nxpopup__title span { color: var(--nxpopup-title-highlight); } /* ---------------------------------------------------------------- Body */ .nxpopup__body { margin-top: 1rem; text-align: var(--nxpopup-content-align); font-size: 0.975rem; line-height: 1.55; color: rgba(255, 255, 255, 0.88); } .nxpopup__body p { margin: 0 0 0.75rem; } .nxpopup__body p:last-child { margin-bottom: 0; } .nxpopup__body a { color: #ffffff; text-decoration: underline; } /* ----------------------------------------------------------------- CTA */ .nxpopup__actions { margin-top: 1.75rem; text-align: var(--nxpopup-content-align); } .nxpopup__cta { display: inline-block; padding: 0.85rem 1.75rem; font-size: 0.875rem; /* 14px */ font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; color: var(--nxpopup-button-color); background: var(--nxpopup-button-bg); border: 1px solid var(--nxpopup-button-border); border-radius: 48px; cursor: pointer; transition: filter 0.2s ease, transform 0.2s ease; } .nxpopup__cta:hover { filter: brightness(1.06); } .nxpopup__cta:active { transform: translateY(1px); } .nxpopup__cta:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } /* Keep the configured button text colour across every state. Templates often recolour links on hover/focus (e.g. the site recolours #sp-footer links on focus), so !important guarantees the admin's choice always wins. */ .nxpopup__cta, .nxpopup__cta:link, .nxpopup__cta:visited, .nxpopup__cta:hover, .nxpopup__cta:focus, .nxpopup__cta:focus-visible, .nxpopup__cta:active { color: var(--nxpopup-button-color) !important; } /* ------------------------------------------------------- Small screens */ @media (max-width: 639.98px) { .nxpopup { width: calc(100vw - 1.5rem); } /* The min-height floor is capped to the dialog's own viewport limit (100dvh - 1.5rem, see .nxpopup max-height), so the card always fits and flex shrinking is never defeated. No max-height needed: the dialog cap governs, and the inner card scrolls. */ .nxpopup__inner { width: 100%; height: auto; min-height: min(600px, calc(100dvh - 1.5rem)); } /* The bordered frame adds 54px vertical padding (44px top + 10px bottom); subtract it so frame + card still fit inside the dialog cap. */ .nxpopup--bordered .nxpopup__inner { min-height: min(600px, calc(100dvh - 1.5rem - 54px)); } .nxpopup__title { font-size: 2.5rem; /* ~40px */ } } /* -------------------------------------------------- Reduced motion a11y */ @media (prefers-reduced-motion: reduce) { .nxpopup, .nxpopup::backdrop { transition: none; } .nxpopup { transform: none; } }