/** * DeveloperSD Popup Builder — frontend styles. * Loaded only on pages with at least one eligible popup. */ .dsdpb-popup { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; } .dsdpb-popup[hidden] { display: none; } .dsdpb-popup__overlay { position: absolute; inset: 0; background: var( --dsdpb-overlay-color, #000 ); opacity: var( --dsdpb-overlay-opacity, 0.6 ); backdrop-filter: blur( var( --dsdpb-blur, 0 ) ); } .dsdpb-popup__panel { position: relative; width: var( --dsdpb-width, 480px ); height: var( --dsdpb-height, auto ); max-width: var( --dsdpb-max-width, 90vw ); max-height: var( --dsdpb-max-height, 90vh ); border-radius: var( --dsdpb-radius, 8px ); box-shadow: var( --dsdpb-shadow ); padding: var( --dsdpb-padding, 32px ); background: var( --dsdpb-bg, #fff ); color: #1d2327; /* Explicit baseline text color so popup content and the close icon stay readable regardless of what color the surrounding theme applies to — skins that need a different color (dark, marketing) override this. */ overflow: auto; transition-duration: var( --dsdpb-anim-speed, 300ms ); transition-timing-function: ease-out; } .dsdpb-popup__close { position: absolute; top: 12px; right: 12px; z-index: 9999; width: 32px; height: 32px; padding: 9px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #ffffff !important; color: #e02b2b !important; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, transform 150ms ease; box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 ); } .dsdpb-popup__close:hover { background: #e02b2b !important; color: #ffffff !important; } .dsdpb-popup__close:active { transform: scale( 0.92 ); } .dsdpb-popup__close:focus-visible { outline: 2px solid #e02b2b; outline-offset: 2px; } /* The close "X" is a real HTML entity (✖ / ✖) rendered as * normal text content inside a , not a CSS pseudo-element and * not an icon font. This is deliberately the most conflict-resistant * option available: some themes/CSS frameworks globally reset * `button::before, button::after { content: none !important; }` to * suppress icon-font artifacts, which would silently blank out a * pseudo-element-drawn icon; a real DOM text node can't be affected * by that. Color is intentionally NOT inherited from the popup panel * (unlike other content) — the white-circle/red-X treatment is * fixed and deliberately the same across every theme, so the close * button reads instantly as "the way to close this" no matter what * skin or custom background color a popup uses. */ .dsdpb-icon-close { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 1; color: inherit !important; } .dsdpb-close--top_left { right: auto; left: 12px; } .dsdpb-close--outside_top_right { top: -44px; right: 0; } .dsdpb-close-style--square { border-radius: 4px; } .dsdpb-close-style--minimal { background: transparent !important; color: #e02b2b !important; box-shadow: none; } .dsdpb-close-style--minimal:hover { background: #e02b2b !important; color: #ffffff !important; } .dsdpb-close-style--text { width: auto; height: auto; padding: 6px 14px; border-radius: 4px; font-size: 13px; font-weight: 600; } /* --- Positions ------------------------------------------------------- */ .dsdpb-position-fullscreen .dsdpb-popup__panel { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; } .dsdpb-position-bottom_sheet { align-items: flex-end; } .dsdpb-position-bottom_sheet .dsdpb-popup__panel { width: 100%; max-width: 100%; border-radius: var( --dsdpb-radius, 8px ) var( --dsdpb-radius, 8px ) 0 0; } .dsdpb-position-corner { align-items: flex-end; justify-content: flex-end; padding: 24px; } .dsdpb-position-corner .dsdpb-popup__overlay { display: none; } .dsdpb-position-bar_top, .dsdpb-position-bar_bottom { align-items: flex-start; } .dsdpb-position-bar_top .dsdpb-popup__overlay, .dsdpb-position-bar_bottom .dsdpb-popup__overlay { display: none; } .dsdpb-position-bar_top .dsdpb-popup__panel, .dsdpb-position-bar_bottom .dsdpb-popup__panel { width: 100%; max-width: 100%; border-radius: 0; } .dsdpb-position-bar_bottom { align-items: flex-end; } .dsdpb-position-slide_left { justify-content: flex-start; } .dsdpb-position-slide_right { justify-content: flex-end; } /* --- Content typography (base, all themes) ----------------------------- * Popup content is arbitrary HTML from the editor/page builder, so * themes can't restyle it structurally — but headings, links, and * buttons are common enough in real popup content (headline + copy + * CTA) that giving them theme-aware defaults is what actually makes * different themes *look* different to a visitor, not just the * panel's own background/border. Each theme below overrides * `--dsdpb-theme-accent` and `--dsdpb-theme-radius` rather than * repeating every rule, so a new theme only needs a handful of lines. */ .dsdpb-popup__panel { --dsdpb-theme-accent: #2271b1; --dsdpb-theme-radius: 6px; } .dsdpb-popup__content h1, .dsdpb-popup__content h2, .dsdpb-popup__content h3 { margin: 0 0 12px; line-height: 1.25; } .dsdpb-popup__content p { margin: 0 0 14px; line-height: 1.6; } .dsdpb-popup__content a { color: var( --dsdpb-theme-accent ); } .dsdpb-popup__content .button, .dsdpb-popup__content button:not( .dsdpb-popup__close ), .dsdpb-popup__content input[type="submit"], .dsdpb-popup__content input[type="button"] { display: inline-block; padding: 11px 24px; border: none; border-radius: var( --dsdpb-theme-radius ); background: var( --dsdpb-theme-accent ); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; transition: transform 120ms ease, opacity 120ms ease; } .dsdpb-popup__content .button:hover, .dsdpb-popup__content button:not( .dsdpb-popup__close ):hover, .dsdpb-popup__content input[type="submit"]:hover { opacity: 0.9; } .dsdpb-popup__content input[type="text"], .dsdpb-popup__content input[type="email"], .dsdpb-popup__content textarea { border: 1px solid #d0d5dd; border-radius: var( --dsdpb-theme-radius ); padding: 9px 12px; } /* --- Themes ------------------------------------------------------------- * Each theme sets its own accent color/button radius (used by the * content typography rules above) plus its own panel chrome * (background, border, shadow, heading font). Position (center, * fullscreen, bottom sheet, ...) is a fully independent axis handled * by the .dsdpb-position-* rules elsewhere in this file — any theme * can be combined with any position. */ .dsdpb-skin-classic .dsdpb-popup__panel { --dsdpb-theme-accent: #1a3c6e; --dsdpb-theme-radius: 3px; border: 1px solid #e2e2e2; border-top: 4px solid var( --dsdpb-theme-accent ); } .dsdpb-skin-classic .dsdpb-popup__content h1, .dsdpb-skin-classic .dsdpb-popup__content h2, .dsdpb-skin-classic .dsdpb-popup__content h3 { font-family: Georgia, "Times New Roman", serif; } .dsdpb-skin-minimal .dsdpb-popup__panel { --dsdpb-theme-accent: #111111; --dsdpb-theme-radius: 0; box-shadow: none; border: 1px solid #e2e2e2; padding: calc( var( --dsdpb-padding, 32px ) * 1.3 ); } .dsdpb-skin-minimal .dsdpb-popup__content .button, .dsdpb-skin-minimal .dsdpb-popup__content button:not( .dsdpb-popup__close ), .dsdpb-skin-minimal .dsdpb-popup__content input[type="submit"] { background: transparent; color: var( --dsdpb-theme-accent ); border: 1px solid currentColor; } .dsdpb-skin-minimal .dsdpb-popup__content h1, .dsdpb-skin-minimal .dsdpb-popup__content h2, .dsdpb-skin-minimal .dsdpb-popup__content h3 { font-weight: 400; letter-spacing: 0.02em; } .dsdpb-skin-glass .dsdpb-popup__panel { --dsdpb-theme-accent: #0a84ff; --dsdpb-theme-radius: 10px; background: rgba( 255, 255, 255, 0.7 ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, 0.5 ); } .dsdpb-skin-glass .dsdpb-popup__content .button, .dsdpb-skin-glass .dsdpb-popup__content button:not( .dsdpb-popup__close ) { backdrop-filter: blur( 4px ); } .dsdpb-skin-modern .dsdpb-popup__panel { --dsdpb-theme-accent: #6c5ce7; --dsdpb-theme-radius: 999px; box-shadow: 0 24px 70px rgba( 108, 92, 231, 0.25 ); } .dsdpb-skin-modern .dsdpb-popup__content h1, .dsdpb-skin-modern .dsdpb-popup__content h2, .dsdpb-skin-modern .dsdpb-popup__content h3 { font-weight: 800; letter-spacing: -0.01em; } .dsdpb-skin-dark .dsdpb-popup__panel { --dsdpb-theme-accent: #00d9c0; --dsdpb-theme-radius: 6px; background: #1c1e21; color: #f5f5f5; border: 1px solid rgba( 255, 255, 255, 0.08 ); box-shadow: 0 20px 60px rgba( 0, 217, 192, 0.15 ); } .dsdpb-skin-dark .dsdpb-popup__content .button, .dsdpb-skin-dark .dsdpb-popup__content button:not( .dsdpb-popup__close ), .dsdpb-skin-dark .dsdpb-popup__content input[type="submit"] { color: #06231f; } .dsdpb-skin-marketing .dsdpb-popup__panel { --dsdpb-theme-accent: #ffffff; --dsdpb-theme-radius: 999px; background: linear-gradient( 135deg, #ff6b6b, #f06595 ); color: #fff; box-shadow: 0 24px 60px rgba( 240, 101, 149, 0.4 ); } .dsdpb-skin-marketing .dsdpb-popup__content h1, .dsdpb-skin-marketing .dsdpb-popup__content h2, .dsdpb-skin-marketing .dsdpb-popup__content h3 { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 800; } .dsdpb-skin-marketing .dsdpb-popup__content a { color: #fff; text-decoration: underline; } .dsdpb-skin-marketing .dsdpb-popup__content .button, .dsdpb-skin-marketing .dsdpb-popup__content button:not( .dsdpb-popup__close ), .dsdpb-skin-marketing .dsdpb-popup__content input[type="submit"] { color: #f06595; font-weight: 800; } /* --- Animations -------------------------------------------------------- * Each animation defines only its *entry* transform/opacity; the * `.is-open` state (added by dsdpb-core.js) transitions it back to * the resting state, and CSS `transition-duration` on `.dsdpb-popup__panel` * (set inline from --dsdpb-anim-speed) drives the timing — no JS * animation loop, so this stays off the main thread as much as * possible and never triggers layout thrash. */ .dsdpb-anim-fade .dsdpb-popup__panel { opacity: 0; transition-property: opacity; } .dsdpb-anim-fade.is-open .dsdpb-popup__panel { opacity: 1; } .dsdpb-anim-zoom .dsdpb-popup__panel, .dsdpb-anim-scale .dsdpb-popup__panel { opacity: 0; transform: scale( 0.9 ); transition-property: opacity, transform; } .dsdpb-anim-zoom.is-open .dsdpb-popup__panel, .dsdpb-anim-scale.is-open .dsdpb-popup__panel { opacity: 1; transform: scale( 1 ); } .dsdpb-anim-slide .dsdpb-popup__panel { opacity: 0; transform: translateY( 24px ); transition-property: opacity, transform; } .dsdpb-anim-slide.is-open .dsdpb-popup__panel { opacity: 1; transform: translateY( 0 ); } .dsdpb-anim-bounce .dsdpb-popup__panel { opacity: 0; transform: scale( 0.8 ); transition-property: opacity, transform; transition-timing-function: cubic-bezier( .34, 1.56, .64, 1 ); } .dsdpb-anim-bounce.is-open .dsdpb-popup__panel { opacity: 1; transform: scale( 1 ); } .dsdpb-anim-rotate .dsdpb-popup__panel { opacity: 0; transform: rotate( -4deg ) scale( 0.95 ); transition-property: opacity, transform; } .dsdpb-anim-rotate.is-open .dsdpb-popup__panel { opacity: 1; transform: rotate( 0 ) scale( 1 ); } .dsdpb-anim-flip .dsdpb-popup__panel { opacity: 0; transform: perspective( 800px ) rotateX( 20deg ); transition-property: opacity, transform; } .dsdpb-anim-flip.is-open .dsdpb-popup__panel { opacity: 1; transform: perspective( 800px ) rotateX( 0 ); } .dsdpb-anim-elastic .dsdpb-popup__panel { opacity: 0; transform: scale( 0.7 ); transition-property: opacity, transform; transition-timing-function: cubic-bezier( .68, -0.55, .27, 1.55 ); } .dsdpb-anim-elastic.is-open .dsdpb-popup__panel { opacity: 1; transform: scale( 1 ); } .dsdpb-anim-none .dsdpb-popup__panel { transition: none; } /* Respect prefers-reduced-motion regardless of the chosen animation, * as long as the popup's `reduced_motion_safe` setting is on (the * default) — the JS layer adds this class rather than us blanket * overriding every transition here, so an admin who explicitly wants * motion for a specific popup can still opt out. */ .dsdpb-reduced-motion .dsdpb-popup__panel { transition: none !important; transform: none !important; } @media ( prefers-reduced-motion: reduce ) { .dsdpb-popup__panel { transition-duration: 1ms !important; } } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect( 1px, 1px, 1px, 1px ); white-space: nowrap; }