/* ===================================================================== BNY EXTRAS — single, de-duplicated stylesheet New classes only (none existed in style.css). Uses existing design tokens so the green + golden premium theme stays consistent. Link this ONCE, AFTER style.css, in _LayoutLanding : CONTENTS 1. Video Gallery grid + skeleton + status (/Home/VideoGallery) 2. Offer popup (SweetAlert2 skin) (home popup) 3. Photo & Video Gallery + media modal (/BnyPhotoGallery) 4. Image loading state (fallback fade-in) (galleries) 5. Admin media upload (/admin/*-upload) NOTE — "hook" classes that intentionally have NO own rules: .gal-grid → used with .vg-grid (inherits the grid) .media-modal → used with .video-modal (inherits the modal) .upload-form → a
; fields styled by existing .form-group ===================================================================== */ /* ───────────────────────────────────────────────────────────────────── 1. VIDEO GALLERY GRID (reuses .video-card inside) ───────────────────────────────────────────────────────────────────── */ .vg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } /* .video-card was built for a flex slider (flex:0 0 320px); inside a grid the flex-basis is ignored, so we just let it fill the grid cell. */ .vg-grid .video-card { flex: initial; width: 100%; } /* Skeleton loaders (premium shimmer) */ .vg-skeleton-wrap { margin-top: 0; } .vg-skeleton-card { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); background: var(--white); } .vg-skeleton-thumb { width: 100%; height: 200px; } .vg-skeleton-line { height: 14px; margin: 14px; border-radius: var(--radius-full); width: 70%; } .vg-skeleton-thumb, .vg-skeleton-line { background: linear-gradient(100deg, var(--gray-100) 30%, var(--gray-200) 50%, var(--gray-100) 70%); background-size: 200% 100%; animation: vg-shimmer 1.3s ease-in-out infinite; } @keyframes vg-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Sentinel + loader + status messages */ .vg-sentinel { display: flex; justify-content: center; align-items: center; min-height: 56px; margin-top: 1.5rem; } .vg-loader { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; color: var(--green); } .vg-status { text-align: center; margin: 2.5rem auto 0; color: var(--text-muted); font-weight: 600; font-size: .95rem; display: flex; flex-direction: column; align-items: center; gap: .85rem; } .vg-status i { font-size: 1.6rem; color: var(--gray-400); } .vg-end { color: var(--green-dark); } .vg-end i { color: var(--green); } @media (max-width: 600px) { .vg-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } .vg-skeleton-thumb, .vg-grid .video-card .video-thumb { height: 150px; } } /* ───────────────────────────────────────────────────────────────────── 2. OFFER POPUP (SweetAlert2 custom skin) ───────────────────────────────────────────────────────────────────── */ .swal2-popup.bny-offer { border-radius: var(--radius-lg); padding-top: 0 !important; overflow: hidden; border-top: 5px solid transparent; border-image: linear-gradient(135deg, var(--green), var(--golden)) 1; box-shadow: var(--shadow-xl); } .bny-offer .bny-offer__img { margin: 0 0 .25rem 0 !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-width: 100%; width: 100%; object-fit: cover; } .bny-offer__text { font-family: var(--font-main); font-size: 1rem; font-weight: 600; line-height: 1.6; color: var(--text-dark); margin: .5rem 1.25rem 0; background: linear-gradient(135deg, var(--green-xlight), var(--golden-light)); padding: .85rem 1rem; border-radius: var(--radius-md); } .bny-offer .swal2-actions { margin-top: 1rem; } .bny-offer .swal2-close { color: var(--gray-700); font-size: 1.6rem; } .bny-offer .swal2-close:hover { color: var(--green-dark); } /* ───────────────────────────────────────────────────────────────────── 3. PHOTO & VIDEO GALLERY (/BnyPhotoGallery) ───────────────────────────────────────────────────────────────────── */ /* Filter chips (active = .btn--primary; inactive styled here) */ .gal-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin: -1.5rem 0 2.25rem; } .gal-filter__btn:not(.btn--primary) { background: var(--white); color: var(--green-dark); border: 2px solid var(--green-light); box-shadow: none; } .gal-filter__btn:not(.btn--primary):hover { border-color: var(--green); background: var(--green-xlight); transform: translateY(-2px); } /* Gallery card — reuses .gallery-item frame, fills with media */ .gal-card { cursor: pointer; } .gal-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .gal-card:hover .gal-card__img { transform: scale(1.06); } /* Caption bar (same language as .video-info) */ .gal-card__info { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem .85rem .7rem; background: linear-gradient(transparent, rgba(0,0,0,.78)); color: #fff; pointer-events: none; } .gal-card__info p { margin: 0; font-size: .82rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Play button sits above the caption gradient for video cards */ .gal-card .video-overlay { z-index: 1; } .gal-card .gallery-overlay { font-size: 1.6rem; } /* Media modal body (image lightbox + video; reuses .video-modal box) */ .media-modal__body { background: #000; display: flex; align-items: center; justify-content: center; max-height: 82vh; min-height: 200px; } .media-modal__body img, .media-modal__body video { width: 100%; height: auto; max-height: 82vh; object-fit: contain; display: block; background: #000; } /* ───────────────────────────────────────────────────────────────────── 4. IMAGE LOADING STATE (gallery + video gallery) Light placeholder background while loading + soft fade-in. Base opacity stays 1 so images are never hidden, even if JS fails. ───────────────────────────────────────────────────────────────────── */ img[data-fallback] { background: var(--green-xlight); } img[data-fallback].is-loaded { animation: bny-img-fade .45s ease; } @keyframes bny-img-fade { from { opacity: .25; } to { opacity: 1; } } /* ───────────────────────────────────────────────────────────────────── 5. ADMIN MEDIA UPLOAD (/admin/video-upload, /admin/gallery-upload) ───────────────────────────────────────────────────────────────────── */ .container--narrow { max-width: 760px; margin-inline: auto; } .upload-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 1.75rem; } /* Dropzone */ .dropzone { border: 2px dashed var(--green-light); border-radius: var(--radius-md); background: var(--green-xlight); text-align: center; padding: 2.25rem 1rem; cursor: pointer; transition: border-color .25s ease, background .25s ease, transform .25s ease; margin-bottom: 1.25rem; } .dropzone:hover { border-color: var(--green); } .dropzone.is-drag { border-color: var(--golden); background: var(--golden-light); transform: scale(1.01); } .dropzone__icon { font-size: 2.4rem; color: var(--green); margin-bottom: .5rem; } .dropzone__title { margin: 0; font-weight: 700; color: var(--text-dark); } .dropzone__hint { margin: .25rem 0 0; font-size: .82rem; color: var(--text-muted); } .dropzone__file { display: block; margin-top: .6rem; font-size: .82rem; font-weight: 600; color: var(--green-dark); word-break: break-all; } /* Preview (video + auto thumbnail / image) */ .upload-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; } .upload-preview__col { display: flex; flex-direction: column; gap: .5rem; } .upload-preview__label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .upload-preview__media { width: 100%; border-radius: var(--radius-md); background: #000; max-height: 220px; object-fit: contain; } @media (max-width: 560px) { .upload-preview { grid-template-columns: 1fr; } } /* Small button variant */ .btn--sm { padding: .45rem .85rem; font-size: .8rem; align-self: flex-start; } /* Progress bar */ .upload-progress { height: 22px; background: var(--gray-200); border-radius: var(--radius-full); overflow: hidden; margin-bottom: 1.25rem; } .upload-progress__bar { height: 100%; width: 0; background: linear-gradient(135deg, var(--green), var(--golden)); color: #fff; font-size: .72rem; font-weight: 700; line-height: 22px; text-align: center; transition: width .2s ease; }