/* ========================================================================== MadMusings Article Swipe — v1.1.1 ========================================================================== Layout overview ─────────────── #mm-content ← JS-created wrapper; slides left/right during swipe [full Elementor page content] [position:fixed Elementor elements stay directly in — untouched] #mm-overlay-layer ← position:fixed; holds ghost peek panels #mm-panel-prev ← peeks in from left while dragging right #mm-panel-next ← peeks in from right while dragging left #mm-swipe-hint ← first-visit tooltip (appended by JS) ========================================================================== */ /* -------------------------------------------------------------------------- Content wrapper (created by JS) -------------------------------------------------------------------------- */ #mm-content { /* GPU layer — avoids repaints during the swipe transform */ will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* -------------------------------------------------------------------------- Overlay layer — fixed, viewport-sized, clips the ghost panels -------------------------------------------------------------------------- */ #mm-overlay-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; pointer-events: none; /* transparent to taps/clicks while not swiping */ overflow: hidden; /* clips panels that are off-screen */ } /* -------------------------------------------------------------------------- Ghost panels — peek-cards shown during drag -------------------------------------------------------------------------- */ .mm-panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* Full-bleed background so the panel always covers content beneath */ background: var( --e-global-color-primary, #ffffff ); /* Flex: centre the peek card vertically and horizontally */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 2rem; text-align: center; opacity: 0; /* JS controls opacity during drag; CSS sets the default */ } /* Start off-screen via CSS transform so there's no flash on page load */ .mm-panel--prev { transform: translateX( -100% ); } .mm-panel--next { transform: translateX( 100% ); } /* Featured image thumbnail */ .mm-panel__thumb { width: 100%; max-width: 460px; max-height: 280px; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.20 ); flex-shrink: 0; } /* Article title */ .mm-panel__title { font-family: var( --e-global-typography-primary-font-family, inherit ); font-size: clamp( 1.05rem, 3vw, 1.55rem ); font-weight: 700; line-height: 1.25; color: var( --e-global-color-text, #1a1a1a ); max-width: 560px; } /* "← Previous" / "Next →" label */ .mm-panel__arrow { font-family: var( --e-global-typography-secondary-font-family, inherit ); font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; color: var( --e-global-color-accent, #c09a5b ); text-transform: uppercase; } /* -------------------------------------------------------------------------- Prevent text selection and show grab cursor while dragging -------------------------------------------------------------------------- */ body.mm-dragging, body.mm-dragging * { user-select: none; -webkit-user-select: none; cursor: grabbing !important; } /* -------------------------------------------------------------------------- First-visit hint -------------------------------------------------------------------------- */ #mm-swipe-hint { position: fixed; bottom: 2.25rem; left: 50%; transform: translateX( -50% ); z-index: 100000; display: flex; align-items: center; gap: 0.65rem; background: rgba( 0, 0, 0, 0.70 ); backdrop-filter: blur( 10px ); -webkit-backdrop-filter: blur( 10px ); color: #fff; border-radius: 999px; padding: 0.6rem 1.4rem; font-size: 0.875rem; letter-spacing: 0.02em; white-space: nowrap; pointer-events: none; animation: mm-hint-in 0.45s ease both; } .mm-hint__arrow { opacity: 0.75; } .mm-hint--fade { animation: mm-hint-out 0.55s ease forwards; } @keyframes mm-hint-in { from { opacity: 0; transform: translateX( -50% ) translateY( 10px ); } to { opacity: 1; transform: translateX( -50% ) translateY( 0 ); } } @keyframes mm-hint-out { to { opacity: 0; transform: translateX( -50% ) translateY( 10px ); } } /* -------------------------------------------------------------------------- Accessibility — honour prefers-reduced-motion -------------------------------------------------------------------------- */ @media ( prefers-reduced-motion: reduce ) { #mm-content, .mm-panel, #mm-swipe-hint { transition: none !important; animation: none !important; } } /* -------------------------------------------------------------------------- Responsive adjustments -------------------------------------------------------------------------- */ @media ( max-width: 480px ) { .mm-panel__thumb { max-height: 200px; } .mm-panel__title { font-size: 1rem; } #mm-swipe-hint { font-size: 0.78rem; bottom: 1.5rem; padding: 0.5rem 1.1rem; } }