/* MEP Content Triggers — Frontend Styles * 2.0.0 * * Designprinzipien: * - Defaults sehen out-of-the-box ordentlich aus, ohne dass User CSS schreiben müssen. * - Jeder Layout-Type hat ein eigenes Layout-Profil (Bar ≠ Popup ≠ Toast ≠ SideTab). * - Eine zentrale --mep-radius-Variable, die von .mep-ct-shape-* gesetzt wird — * Inner-Container, Buttons und Bilder folgen alle derselben Setting konsistent. * - Close-Button ist überall ≥ 32×32 klickbar (Accessibility / Touch-Targets). * - Body-Scroll bleibt frei (overflow:hidden auf war 1.x-Bug, siehe CHANGELOG). */ /* =========================================================================== * 1. Base / Container * =========================================================================== */ #mep-ct-container { position: relative; z-index: 999999; } .mep-ct-popup { position: fixed; z-index: 999999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--mep-text, #111111); /* Default-Radius — wird von .mep-ct-shape-* überschrieben */ --mep-radius: 12px; --mep-radius-img: 8px; } /* =========================================================================== * 2. Shape (zentral via CSS-Variable) * =========================================================================== */ .mep-ct-shape-sharp { --mep-radius: 0; --mep-radius-img: 0; } .mep-ct-shape-rounded { --mep-radius: 12px; --mep-radius-img: 8px; } .mep-ct-shape-pill { --mep-radius: 24px; --mep-radius-img: 16px; } /* =========================================================================== * 3. Inner-Container, Overlay, Shadow * =========================================================================== */ .mep-ct-popup .mep-ct-overlay { position: fixed; inset: 0; background-color: var(--mep-backdrop, rgba(15, 23, 42, 0.55)); opacity: var(--mep-backdrop-opacity, 1); backdrop-filter: blur(var(--mep-backdrop-blur, 0px)); -webkit-backdrop-filter: blur(var(--mep-backdrop-blur, 0px)); } .mep-ct-popup .mep-ct-inner { position: relative; background: var(--mep-bg, #ffffff); color: var(--mep-text, #111111); border-radius: var(--mep-radius); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25); max-width: 480px; padding: 28px 32px 24px; box-sizing: border-box; } .mep-ct-shadow-soft .mep-ct-inner, .mep-ct-shadow-soft .mep-ct-inline-inner { box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22); } .mep-ct-shadow-strong .mep-ct-inner, .mep-ct-shadow-strong .mep-ct-inline-inner { box-shadow: 0 25px 60px rgba(15, 23, 42, 0.4); } .mep-ct-shadow-none .mep-ct-inner, .mep-ct-shadow-none .mep-ct-inline-inner { box-shadow: none; } /* =========================================================================== * 4. Close-Button — überall ≥ 32×32 mit sichtbarem Hover. * Vorher war's 20px font-size auf 4px Padding = mickrig + nicht klickbar. * =========================================================================== */ .mep-ct-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: none; background: rgba(0, 0, 0, 0.04); color: inherit; font-size: 22px; line-height: 1; cursor: pointer; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease-out, transform 0.15s ease-out; z-index: 2; } .mep-ct-close:hover { background: rgba(0, 0, 0, 0.12); transform: scale(1.05); } .mep-ct-close:focus-visible { outline: 2px solid var(--mep-accent, #0073aa); outline-offset: 2px; } /* Bei dunklen Hintergründen: hellerer Hover */ .mep-ct-popup[style*="--mep-bg:#1a"] .mep-ct-close, .mep-ct-popup[style*="--mep-bg:#000"] .mep-ct-close, .mep-ct-popup[style*="--mep-bg:#111"] .mep-ct-close, .mep-ct-popup[style*="--mep-bg:#222"] .mep-ct-close, .mep-ct-popup[style*="--mep-bg:#333"] .mep-ct-close { background: rgba(255, 255, 255, 0.14); } .mep-ct-popup[style*="--mep-bg:#1a"] .mep-ct-close:hover, .mep-ct-popup[style*="--mep-bg:#000"] .mep-ct-close:hover, .mep-ct-popup[style*="--mep-bg:#111"] .mep-ct-close:hover, .mep-ct-popup[style*="--mep-bg:#222"] .mep-ct-close:hover, .mep-ct-popup[style*="--mep-bg:#333"] .mep-ct-close:hover { background: rgba(255, 255, 255, 0.24); } /* =========================================================================== * 5. Content (Headline, Text, Image, CTA) * =========================================================================== */ .mep-ct-headline { margin: 0 40px 12px 0; font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } .mep-ct-text { font-size: 15px; line-height: 1.55; margin: 0 0 18px; } .mep-ct-text:last-child { margin-bottom: 0; } .mep-ct-text a { color: var(--mep-link, var(--mep-accent, #0073aa)); text-decoration: underline; } .mep-ct-text strong { font-weight: 700; } .mep-ct-image { margin: 4px 0 16px; } .mep-ct-image img { max-width: 100%; height: auto; display: block; border-radius: var(--mep-radius-img); } .mep-ct-cta { display: inline-block; padding: 11px 22px; border-radius: var(--mep-radius); background: var(--mep-btn-bg, var(--mep-accent, #0073aa)); color: var(--mep-btn-text, #ffffff); text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1.2; transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, filter 0.15s ease-out; border: none; cursor: pointer; white-space: nowrap; } .mep-ct-cta:hover { transform: translateY(-1px); filter: brightness(1.08); } .mep-ct-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* CTA-Drop-Shadow nur in Layouts, wo es passt — nicht in Bars/Toasts */ .mep-ct-type-popup_center .mep-ct-cta, .mep-ct-type-popup_fullscreen .mep-ct-cta, .mep-ct-type-slidein_br .mep-ct-cta, .mep-ct-type-slidein_bl .mep-ct-cta, .mep-ct-inline .mep-ct-cta { box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18); } .mep-ct-type-popup_center .mep-ct-cta:hover, .mep-ct-type-popup_fullscreen .mep-ct-cta:hover, .mep-ct-type-slidein_br .mep-ct-cta:hover, .mep-ct-type-slidein_bl .mep-ct-cta:hover, .mep-ct-inline .mep-ct-cta:hover { box-shadow: 0 14px 30px rgba(15, 23, 42, 0.28); } /* =========================================================================== * 6. Layout — POPUP CENTERED * =========================================================================== */ .mep-ct-type-popup_center { inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; } .mep-ct-type-popup_center .mep-ct-inner { width: 100%; } /* =========================================================================== * 7. Layout — POPUP FULLSCREEN * =========================================================================== */ .mep-ct-type-popup_fullscreen { inset: 0; } .mep-ct-type-popup_fullscreen .mep-ct-inner { max-width: 100%; width: 100%; height: 100%; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 40px; text-align: center; } .mep-ct-type-popup_fullscreen .mep-ct-headline { font-size: 36px; margin-right: 0; } /* =========================================================================== * 8. Layout — BAR TOP / BOTTOM * Container über volle Viewport-Breite (Hintergrund), Content gecapped. * Text + CTA in flex-row, Close absolut rechts. * =========================================================================== */ .mep-ct-type-bar_top, .mep-ct-type-bar_bottom { left: 0; right: 0; } .mep-ct-type-bar_top { top: 0; } .mep-ct-type-bar_bottom { bottom: 0; } .mep-ct-type-bar_top .mep-ct-overlay, .mep-ct-type-bar_bottom .mep-ct-overlay { display: none; } .mep-ct-type-bar_top .mep-ct-inner, .mep-ct-type-bar_bottom .mep-ct-inner { max-width: 100%; width: 100%; border-radius: 0; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18); padding: 0; } .mep-ct-type-bar_bottom .mep-ct-inner { box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.18); } /* Content-Wrap: max-width zentriert, alles in einer Linie */ .mep-ct-type-bar_top .mep-ct-content, .mep-ct-type-bar_bottom .mep-ct-content, .mep-ct-type-bar_top .mep-ct-variant, .mep-ct-type-bar_bottom .mep-ct-variant { max-width: 1100px; margin: 0 auto; padding: 14px 60px 14px 24px; display: flex; align-items: center; gap: 18px; box-sizing: border-box; } .mep-ct-type-bar_top .mep-ct-headline, .mep-ct-type-bar_bottom .mep-ct-headline { margin: 0; font-size: 16px; font-weight: 700; flex-shrink: 0; } .mep-ct-type-bar_top .mep-ct-text, .mep-ct-type-bar_bottom .mep-ct-text { margin: 0; font-size: 15px; flex: 1; min-width: 0; } .mep-ct-type-bar_top .mep-ct-image, .mep-ct-type-bar_bottom .mep-ct-image { display: none; } .mep-ct-type-bar_top .mep-ct-cta, .mep-ct-type-bar_bottom .mep-ct-cta { flex-shrink: 0; padding: 9px 18px; font-size: 14px; box-shadow: none; } .mep-ct-type-bar_top .mep-ct-close, .mep-ct-type-bar_bottom .mep-ct-close { top: 50%; right: 12px; width: 32px; height: 32px; transform: translateY(-50%); font-size: 20px; } .mep-ct-type-bar_top .mep-ct-close:hover, .mep-ct-type-bar_bottom .mep-ct-close:hover { transform: translateY(-50%) scale(1.05); } /* Mobile: Bar zweizeilig — Text oben, CTA unten */ @media (max-width: 600px) { .mep-ct-type-bar_top .mep-ct-content, .mep-ct-type-bar_bottom .mep-ct-content, .mep-ct-type-bar_top .mep-ct-variant, .mep-ct-type-bar_bottom .mep-ct-variant { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 56px 14px 18px; } .mep-ct-type-bar_top .mep-ct-text, .mep-ct-type-bar_bottom .mep-ct-text { font-size: 14px; line-height: 1.45; } .mep-ct-type-bar_top .mep-ct-cta, .mep-ct-type-bar_bottom .mep-ct-cta { font-size: 13px; padding: 8px 14px; } } /* =========================================================================== * 9. Layout — SLIDE-IN (bottom right / bottom left) * =========================================================================== */ .mep-ct-type-slidein_br, .mep-ct-type-slidein_bl { bottom: 20px; width: auto; max-width: 380px; } .mep-ct-type-slidein_br { right: 20px; } .mep-ct-type-slidein_bl { left: 20px; } .mep-ct-type-slidein_br .mep-ct-overlay, .mep-ct-type-slidein_bl .mep-ct-overlay { display: none; } .mep-ct-type-slidein_br .mep-ct-inner, .mep-ct-type-slidein_bl .mep-ct-inner { max-width: 380px; padding: 22px 26px 20px; } .mep-ct-type-slidein_br .mep-ct-headline, .mep-ct-type-slidein_bl .mep-ct-headline { font-size: 18px; margin-right: 32px; } .mep-ct-type-slidein_br .mep-ct-text, .mep-ct-type-slidein_bl .mep-ct-text { font-size: 14px; margin-bottom: 14px; } @media (max-width: 480px) { .mep-ct-type-slidein_br, .mep-ct-type-slidein_bl { left: 12px; right: 12px; bottom: 12px; max-width: none; } .mep-ct-type-slidein_br .mep-ct-inner, .mep-ct-type-slidein_bl .mep-ct-inner { max-width: none; } } /* =========================================================================== * 10. Layout — SIDE TAB (right / left) * =========================================================================== */ .mep-ct-type-side_tab_right, .mep-ct-type-side_tab_left { top: 50%; transform: translateY(-50%); max-width: 280px; } .mep-ct-type-side_tab_right { right: 0; } .mep-ct-type-side_tab_left { left: 0; } .mep-ct-type-side_tab_right .mep-ct-overlay, .mep-ct-type-side_tab_left .mep-ct-overlay { display: none; } .mep-ct-type-side_tab_right .mep-ct-inner, .mep-ct-type-side_tab_left .mep-ct-inner { padding: 18px 22px 16px; max-width: 280px; } .mep-ct-type-side_tab_right .mep-ct-inner { border-radius: var(--mep-radius) 0 0 var(--mep-radius); } .mep-ct-type-side_tab_left .mep-ct-inner { border-radius: 0 var(--mep-radius) var(--mep-radius) 0; } .mep-ct-type-side_tab_right .mep-ct-headline, .mep-ct-type-side_tab_left .mep-ct-headline { font-size: 16px; margin: 0 28px 6px 0; } .mep-ct-type-side_tab_right .mep-ct-text, .mep-ct-type-side_tab_left .mep-ct-text { font-size: 13px; margin-bottom: 12px; } .mep-ct-type-side_tab_right .mep-ct-cta, .mep-ct-type-side_tab_left .mep-ct-cta { padding: 8px 14px; font-size: 13px; } .mep-ct-type-side_tab_right .mep-ct-close, .mep-ct-type-side_tab_left .mep-ct-close { width: 28px; height: 28px; font-size: 18px; top: 4px; right: 4px; } @media (max-width: 480px) { .mep-ct-type-side_tab_right, .mep-ct-type-side_tab_left { max-width: 240px; } } /* =========================================================================== * 11. Layout — TOAST * =========================================================================== */ .mep-ct-type-toast { bottom: 20px; right: 20px; max-width: 340px; } .mep-ct-type-toast .mep-ct-overlay { display: none; } .mep-ct-type-toast .mep-ct-inner { max-width: 340px; padding: 14px 44px 14px 18px; } .mep-ct-type-toast .mep-ct-headline { font-size: 14px; margin: 0 0 4px; font-weight: 700; } .mep-ct-type-toast .mep-ct-text { font-size: 13px; margin: 0 0 8px; line-height: 1.45; } .mep-ct-type-toast .mep-ct-cta { font-size: 13px; padding: 6px 12px; box-shadow: none; } .mep-ct-type-toast .mep-ct-close { width: 28px; height: 28px; font-size: 18px; top: 6px; right: 6px; } @media (max-width: 480px) { .mep-ct-type-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; } .mep-ct-type-toast .mep-ct-inner { max-width: none; } } /* =========================================================================== * 12. Inline (Auto-Insert oder Shortcode) * =========================================================================== */ .mep-ct-inline { position: relative; background: var(--mep-bg, #ffffff); color: var(--mep-text, #111111); margin: 24px 0; --mep-radius: 12px; --mep-radius-img: 8px; } .mep-ct-shape-sharp.mep-ct-inline { --mep-radius: 0; --mep-radius-img: 0; } .mep-ct-shape-rounded.mep-ct-inline { --mep-radius: 12px; --mep-radius-img: 8px; } .mep-ct-shape-pill.mep-ct-inline { --mep-radius: 24px; --mep-radius-img: 16px; } .mep-ct-inline-rotation { display: block; } .mep-ct-inline-candidate { position: relative; } .mep-ct-inline-inner { padding: 22px 26px 20px; border-radius: var(--mep-radius); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14); } .mep-ct-inline .mep-ct-headline { margin: 0 0 10px; font-size: 19px; } .mep-ct-inline .mep-ct-text { margin: 0 0 14px; } .mep-ct-inline .mep-ct-cta { margin-top: 4px; } /* =========================================================================== * 13. Admin-Inline-Preview Overlay * =========================================================================== */ .mep-ct-admin-preview-overlay { inset: 0; display: flex; align-items: center; justify-content: center; } /* =========================================================================== * 14. Animations * =========================================================================== */ @keyframes mepCtFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mepCtSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes mepCtSlideDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } @keyframes mepCtSlideRight { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } @keyframes mepCtZoom { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } @keyframes mepCtBounce { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); opacity: 1; } 70% { transform: scale(0.95); } 100% { transform: scale(1); } } @keyframes mepCtElastic { 0% { transform: scale(0); opacity: 0; } 55% { transform: scale(1.1); opacity: 1; } 75% { transform: scale(0.92); } 100% { transform: scale(1); } } @keyframes mepCtFlip { from { transform: perspective(800px) rotateX(-90deg); opacity: 0; } to { transform: perspective(800px) rotateX(0deg); opacity: 1; } } @keyframes mepCtBlurIn { from { filter: blur(20px); opacity: 0; transform: scale(1.08); } to { filter: blur(0); opacity: 1; transform: scale(1); } } @keyframes mepCtScaleRotate { from { transform: scale(0.6) rotate(-8deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } } .mep-ct-anim-fade .mep-ct-inner { animation: mepCtFadeIn 0.25s ease-out; } .mep-ct-anim-slide_up .mep-ct-inner { animation: mepCtSlideUp 0.3s ease-out; } .mep-ct-anim-slide_down .mep-ct-inner { animation: mepCtSlideDown 0.3s ease-out; } .mep-ct-anim-slide_right .mep-ct-inner { animation: mepCtSlideRight 0.3s ease-out; } .mep-ct-anim-zoom .mep-ct-inner { animation: mepCtZoom 0.3s ease-out; } .mep-ct-anim-bounce .mep-ct-inner { animation: mepCtBounce 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .mep-ct-anim-elastic .mep-ct-inner { animation: mepCtElastic 0.55s cubic-bezier(0.5, 1.6, 0.4, 0.9); } .mep-ct-anim-flip .mep-ct-inner { animation: mepCtFlip 0.4s ease-out; transform-origin: top center; } .mep-ct-anim-blur_in .mep-ct-inner { animation: mepCtBlurIn 0.4s ease-out; } .mep-ct-anim-scale_rotate .mep-ct-inner { animation: mepCtScaleRotate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Stagger-In */ @keyframes mepCtStaggerFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .mep-ct-stagger .mep-ct-content > *, .mep-ct-stagger .mep-ct-variant > * { opacity: 0; animation: mepCtStaggerFadeUp 0.4s ease-out forwards; } /* Reduce Motion */ @media (prefers-reduced-motion: reduce) { .mep-ct-popup .mep-ct-inner, .mep-ct-stagger .mep-ct-content > *, .mep-ct-stagger .mep-ct-variant > * { animation: none !important; } .mep-ct-cta, .mep-ct-close { transition: none !important; } } /* =========================================================================== * 15. Multi-Step (Custom-Code) * =========================================================================== */ .mep-ct-step { display: none; } .mep-ct-step.is-active, .mep-ct-step[data-step="1"]:not(.is-rendered) { display: block; } /* =========================================================================== * 16. Countdown * =========================================================================== */ .mep-ct-countdown { display: inline-block; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-weight: 600; letter-spacing: 0.02em; } .mep-ct-countdown-expired { opacity: 0.65; } /* =========================================================================== * 17. A/B-Variant * =========================================================================== */ .mep-ct-variant[data-variant="B"] { display: none; }