/** * WP Dynamic Posts — front-end styles (gallery layouts, slider, lightbox). * Loaded only on pages that render a gallery field. */ .wpdp-gallery { --wpdp-gallery-cols: 3; --wpdp-gallery-gap: 10px; margin: 0; } .wpdp-gallery img { display: block; width: 100%; height: auto; border-radius: 4px; } .wpdp-gallery .wpdp-gallery-item { position: relative; margin: 0; display: block; } .wpdp-gallery .wpdp-gallery-link { display: block; } /* Captions (from the image's Caption in the media library). */ .wpdp-gallery figcaption { font-size: 0.85em; line-height: 1.4; padding: 6px 2px 0; opacity: 0.85; } .wpdp-gallery--captions-hover .wpdp-gallery-item { overflow: hidden; border-radius: 4px; } .wpdp-gallery--captions-hover figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 24px 12px 10px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); opacity: 0; transition: opacity 0.25s; } .wpdp-gallery--captions-hover .wpdp-gallery-item:hover figcaption { opacity: 1; } /* Hover effects (wrapper classes set by the Dynamic Gallery widget). */ .wpdp-hover-zoom .wpdp-gallery-item { overflow: hidden; } .wpdp-hover-zoom .wpdp-gallery-item img { transition: transform 0.35s ease; } .wpdp-hover-zoom .wpdp-gallery-item:hover img { transform: scale(1.06); } .wpdp-hover-lift .wpdp-gallery-item { transition: transform 0.25s ease, box-shadow 0.25s ease; } .wpdp-hover-lift .wpdp-gallery-item:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); } .wpdp-hover-fade .wpdp-gallery-item img { transition: opacity 0.25s ease; } .wpdp-hover-fade .wpdp-gallery-item:hover img { opacity: 0.75; } /* Grid: uniform tiles. */ .wpdp-gallery--grid { display: grid; grid-template-columns: repeat(var(--wpdp-gallery-cols), 1fr); gap: var(--wpdp-gallery-gap); } .wpdp-gallery--grid img { aspect-ratio: 4 / 3; object-fit: cover; height: 100%; } /* Masonry: natural heights flowing down columns. */ .wpdp-gallery--masonry { columns: var(--wpdp-gallery-cols); column-gap: var(--wpdp-gallery-gap); } .wpdp-gallery--masonry .wpdp-gallery-item { break-inside: avoid; margin-bottom: var(--wpdp-gallery-gap); } /* Stack: one image per row. */ .wpdp-gallery--stack { display: flex; flex-direction: column; gap: var(--wpdp-gallery-gap); } /* Slider: scroll-snap track with arrow buttons. */ .wpdp-slider { position: relative; } .wpdp-gallery--slider { display: flex; gap: var(--wpdp-gallery-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 4px; } .wpdp-gallery--slider::-webkit-scrollbar { display: none; } .wpdp-gallery--slider .wpdp-gallery-item { flex: 0 0 100%; scroll-snap-align: start; } .wpdp-gallery--slider img { aspect-ratio: 16 / 9; object-fit: cover; } .wpdp-slider-prev, .wpdp-slider-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; transition: background 0.2s; } .wpdp-slider-prev:hover, .wpdp-slider-next:hover { background: rgba(0, 0, 0, 0.8); } .wpdp-slider-prev { left: 12px; } .wpdp-slider-next { right: 12px; } .wpdp-slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; } .wpdp-slider-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: currentColor; opacity: 0.3; cursor: pointer; transition: opacity 0.2s; } .wpdp-slider-dots button.is-active { opacity: 0.9; } /* Lightbox overlay. Style hooks are CSS custom properties (--wpdp-lb-*). The overlay is a single shared element appended to — outside any widget's own wrapper — so Elementor's per-widget {{WRAPPER}} scoping can't reach it directly. Each Dynamic Gallery widget instead writes its style choices as --wpdp-lb-* variables on ITS OWN .wpdp-gallery container (which IS reachable), and frontend.js copies them onto the overlay the instant it opens — see the lightbox section of frontend.js. */ .wpdp-lightbox { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background: var(--wpdp-lb-bg, rgba(0, 0, 0, 0.92)); } /* The [hidden] attribute is how JS closes the lightbox. Without this rule, the unconditional `display: flex` above (equal specificity, author CSS) always beats the browser's built-in `[hidden]{display:none}` — the lightbox would stay visually open no matter what closed it. */ .wpdp-lightbox[hidden] { display: none; } .wpdp-lightbox img { max-width: var(--wpdp-lb-max-w, 92vw); max-height: var(--wpdp-lb-max-h, 86vh); border-radius: var(--wpdp-lb-radius, 4px); } .wpdp-lightbox-caption { position: absolute; bottom: 54px; left: 50%; transform: translateX(-50%); max-width: 80vw; text-align: center; color: var(--wpdp-lb-caption-color, rgba(255, 255, 255, 0.9)); background: var(--wpdp-lb-caption-bg, transparent); font-size: 14px; line-height: 1.4; padding: 6px 14px; border-radius: 4px; } .wpdp-lightbox-caption[hidden] { display: none; } .wpdp-lightbox-close, .wpdp-lightbox-prev, .wpdp-lightbox-next { position: absolute; border: 0; background: transparent; color: var(--wpdp-lb-icon-color, #fff); font-size: var(--wpdp-lb-icon-size, 32px); line-height: 1; cursor: pointer; padding: 12px; opacity: 0.8; transition: opacity 0.2s, color 0.2s; } .wpdp-lightbox-close:hover, .wpdp-lightbox-prev:hover, .wpdp-lightbox-next:hover { color: var(--wpdp-lb-icon-hover-color, var(--wpdp-lb-icon-color, #fff)); opacity: 1; } .wpdp-lightbox-close { top: 16px; right: 20px; } .wpdp-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); } .wpdp-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); } .wpdp-lightbox-counter { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.8); font-size: 14px; } /* ---- Dynamic Icon Box ---- */ .wpdp-el-icon-box { display: flex; align-items: center; gap: 10px; } .wpdp-el-icon-box--column { flex-direction: column; text-align: center; } .wpdp-el-icon-box-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .wpdp-el-icon-box-icon i, .wpdp-el-icon-box-icon svg { display: block; } .wpdp-el-icon-box-text { display: flex; flex-direction: column; } .wpdp-el-icon-box-label { font-size: 0.8em; opacity: 0.75; } /* Drop cap (Dynamic Paragraph). */ .wpdp-drop-cap > *:first-child::first-letter { float: left; font-size: 3em; line-height: 0.9; padding-right: 8px; font-weight: 700; } /* ---- Collection grid (wpdp_grid) ---- */ .wpdp-grid { --wpdp-grid-cols: 3; display: grid; grid-template-columns: repeat(var(--wpdp-grid-cols), 1fr); gap: 24px; } .wpdp-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; } /* Hover effect is opt-in via a modifier class (default "lift" is applied by Grid_Shortcode/Grid_Widget unless "none" is chosen). Excludes .wpdp-card--custom so a card template's blank-slate reset always wins, regardless of selector order. */ .wpdp-grid--hover-lift .wpdp-card:not(.wpdp-card--custom):hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .wpdp-grid--hover-zoom .wpdp-card:not(.wpdp-card--custom) .wpdp-card-image { overflow: hidden; } .wpdp-grid--hover-zoom .wpdp-card:not(.wpdp-card--custom) .wpdp-card-image img { transition: transform 0.35s ease; } .wpdp-grid--hover-zoom .wpdp-card:not(.wpdp-card--custom):hover .wpdp-card-image img { transform: scale(1.06); } .wpdp-grid--hide-field-labels .wpdp-card-field-label { display: none; } /* Custom card templates: blank slate — the template owns all styling. */ .wpdp-card--custom, .wpdp-card--custom:hover { display: block; position: relative; background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none; transform: none; } /* Whole-card click-through: stretched link overlay. Interactive elements inside the template stay above it and remain clickable. */ .wpdp-card-link { position: absolute; inset: 0; z-index: 1; } .wpdp-card--custom a:not(.wpdp-card-link), .wpdp-card--custom button { position: relative; z-index: 2; } .wpdp-card-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .wpdp-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; } .wpdp-card-title { margin: 0; font-size: 1.15em; line-height: 1.35; } .wpdp-card-title a { color: inherit; text-decoration: none; } .wpdp-card-title a:hover { text-decoration: underline; } .wpdp-card-excerpt { margin: 0; font-size: 0.92em; opacity: 0.8; } .wpdp-card-field { display: flex; gap: 6px; align-items: baseline; font-size: 0.92em; } .wpdp-card-field-label { font-weight: 600; } .wpdp-card-field-label::after { content: ':'; } .wpdp-grid-empty { text-align: center; opacity: 0.7; padding: 32px 0; } .wpdp-grid-pagination { margin-top: 28px; text-align: center; } .wpdp-grid-pagination .page-numbers { display: inline-block; padding: 6px 13px; margin: 0 3px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; } .wpdp-grid-pagination .page-numbers.current { background: #1f2327; border-color: #1f2327; color: #fff; } /* Responsive column fallback. */ @media ( max-width: 782px ) { .wpdp-gallery--grid, .wpdp-gallery--masonry, .wpdp-grid { --wpdp-gallery-cols: 2; --wpdp-grid-cols: 2; } } @media ( max-width: 480px ) { .wpdp-gallery--grid, .wpdp-gallery--masonry, .wpdp-grid { --wpdp-gallery-cols: 1; --wpdp-grid-cols: 1; } }