feat(gallery): tambah CPT Galeri, template page-galeri, filter interaktif, dan native lightbox zoom
This commit is contained in:
Mas Budi Kusuma
@@ -717,3 +717,155 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl
|
||||
.sidebar-html-rendered-content { font-size: 14px; line-height: 1.7; color: var(--text-color); }
|
||||
.sidebar-html-rendered-content iframe { width: 100% !important; border-radius: 8px; border: none; }
|
||||
.sidebar-html-rendered-content img { border-radius: 8px; margin: 10px 0; }
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
MODUL GALERI & FASILITAS (GRID + LIGHTBOX)
|
||||
--------------------------------------------------------- */
|
||||
.gallery-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
|
||||
.gallery-filter-btn {
|
||||
background: #ffffff;
|
||||
border: 2px solid #e2e8f0;
|
||||
color: var(--text-muted);
|
||||
padding: 8px 22px;
|
||||
border-radius: 50px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.gallery-filter-btn:hover, .gallery-filter-btn.active {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4px 12px rgba(11, 74, 142, 0.2);
|
||||
}
|
||||
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.gallery-item-card {
|
||||
background: #ffffff;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #f1f5f9;
|
||||
}
|
||||
.gallery-item-card:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 15px 35px rgba(11, 74, 142, 0.12);
|
||||
border-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.gallery-img-wrapper {
|
||||
position: relative;
|
||||
aspect-ratio: 4/3;
|
||||
overflow: hidden;
|
||||
background: #f8fafc;
|
||||
}
|
||||
.gallery-img-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
.gallery-item-card:hover .gallery-img-wrapper img {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.gallery-overlay {
|
||||
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: linear-gradient(to bottom, rgba(11,74,142,0.2) 0%, rgba(11,74,142,0.8) 100%);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
opacity: 0; transition: opacity 0.3s ease;
|
||||
}
|
||||
.gallery-item-card:hover .gallery-overlay { opacity: 1; }
|
||||
|
||||
.gallery-zoom-icon {
|
||||
font-size: 32px; color: #fff;
|
||||
transform: translateY(20px);
|
||||
transition: transform 0.3s ease;
|
||||
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
|
||||
}
|
||||
.gallery-item-card:hover .gallery-zoom-icon { transform: translateY(0); }
|
||||
|
||||
.gallery-item-info { padding: 22px 20px; }
|
||||
.gallery-item-info h4 { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: var(--heading-color); line-height: 1.4; }
|
||||
.gallery-cat-badge {
|
||||
display: inline-block;
|
||||
font-size: 11px; font-weight: 800;
|
||||
color: var(--secondary-color);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
background: #e0f2fe; padding: 4px 12px; border-radius: 20px;
|
||||
}
|
||||
|
||||
/* NATIVE LIGHTBOX (ZOOM EFEK) */
|
||||
.ek-lightbox {
|
||||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: rgba(15, 23, 42, 0.96); z-index: 9999;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
opacity: 0; visibility: hidden; transition: all 0.3s ease;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.ek-lightbox.show { opacity: 1; visibility: visible; }
|
||||
|
||||
.ek-lb-close {
|
||||
position: absolute; top: 25px; right: 35px; font-size: 45px;
|
||||
color: rgba(255,255,255,0.6); cursor: pointer; line-height: 1;
|
||||
transition: color 0.2s, transform 0.2s; z-index: 10;
|
||||
}
|
||||
.ek-lb-close:hover { color: #f59e0b; transform: scale(1.1); }
|
||||
|
||||
.ek-lb-content {
|
||||
max-width: 900px; width: 92%; max-height: 90vh;
|
||||
display: flex; flex-direction: column;
|
||||
background: #ffffff; border-radius: 16px; overflow: hidden;
|
||||
transform: scale(0.95); transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.ek-lightbox.show .ek-lb-content { transform: scale(1); }
|
||||
|
||||
.ek-lb-img-container {
|
||||
width: 100%; height: 60vh; background: #000;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.ek-lb-img-container img {
|
||||
width: 100%; height: 100%; object-fit: contain;
|
||||
}
|
||||
|
||||
.ek-lb-caption { padding: 25px 35px; text-align: center; }
|
||||
.ek-lb-cat {
|
||||
font-size: 12px; font-weight: 800; color: var(--secondary-color);
|
||||
text-transform: uppercase; letter-spacing: 1px; display: inline-block;
|
||||
margin-bottom: 8px; background: #f1f5f9; padding: 4px 14px; border-radius: 20px;
|
||||
}
|
||||
.ek-lb-caption h3 { margin: 0 0 12px; font-size: 24px; font-weight: 800; color: var(--heading-color); }
|
||||
.ek-lb-caption p { margin: 0; font-size: 15px; color: var(--text-color); line-height: 1.7; }
|
||||
|
||||
/* Tombol Navigasi Lightbox */
|
||||
.ek-lb-nav {
|
||||
position: absolute; top: 50%; transform: translateY(-50%);
|
||||
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
|
||||
color: #ffffff; width: 56px; height: 56px; border-radius: 50%;
|
||||
font-size: 20px; cursor: pointer; transition: all 0.2s ease;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.ek-lb-nav:hover { background: var(--primary-color); border-color: var(--primary-color); transform: translateY(-50%) scale(1.1); }
|
||||
.ek-lb-prev { left: 40px; }
|
||||
.ek-lb-next { right: 40px; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ek-lb-nav { width: 44px; height: 44px; font-size: 16px; }
|
||||
.ek-lb-prev { left: 15px; }
|
||||
.ek-lb-next { right: 15px; }
|
||||
.ek-lb-close { top: 15px; right: 20px; font-size: 35px; }
|
||||
.ek-lb-img-container { height: 45vh; }
|
||||
.ek-lb-caption { padding: 20px; }
|
||||
.ek-lb-caption h3 { font-size: 20px; }
|
||||
.gallery-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user