/* ============================================================ Wilton CERT — Shared Carousel Stylesheet (assets/carousel.css) ============================================================ Loaded by any page that uses a photo carousel via: USAGE: 1. Add the HTML structure to your page (see carousel.js) 2. Load this CSS file in 3. Load assets/carousel.js before 4. Call: initCarousel('storage-folder-name') ============================================================ */ /* ── Gallery section wrapper ── */ .gallery-section { max-width: 1100px; margin: 0 auto; padding: 0 64px 96px; } .gallery-header { margin-bottom: 24px; } /* ── Carousel stage ── */ .carousel-wrap { position: relative; width: 100%; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; max-height: 580px; } .carousel-img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity 0.3s ease; } .carousel-img.fade { opacity: 0; } /* ── Navigation arrows ── */ .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.45); border: none; color: white; font-size: 40px; padding: 16px 20px; cursor: pointer; transition: background 0.2s; z-index: 2; line-height: 1; } .carousel-arrow:hover { background: rgba(0,0,0,0.75); } .carousel-prev { left: 0; border-radius: 0 6px 6px 0; } .carousel-next { right: 0; border-radius: 6px 0 0 6px; } /* ── Counter badge ── */ .carousel-counter { position: absolute; top: 14px; right: 18px; background: rgba(0,0,0,0.55); color: white; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1px; padding: 4px 12px; border-radius: 20px; } /* ── Caption overlay (created by carousel.js when a photo has one) ── */ .carousel-caption { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,0.72)); color: white; font-size: 14px; line-height: 1.4; padding: 28px 18px 12px; text-align: center; z-index: 2; pointer-events: none; } /* ── Empty state ── */ .carousel-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: rgba(255,255,255,0.3); font-size: 16px; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 1px; text-transform: uppercase; } /* ── Dot indicators ── */ .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .carousel-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.25); border: none; cursor: pointer; padding: 0; transition: all 0.2s; } .carousel-dot.active { background: var(--green-accent); transform: scale(1.3); } /* ── Thumbnail strip ── */ .carousel-thumbs { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; } .carousel-thumb { width: 80px; height: 56px; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: 0.5; transition: all 0.2s; flex-shrink: 0; border: 2px solid transparent; } .carousel-thumb.active { opacity: 1; border-color: var(--green-accent); } /* ── Loading / error states ── */ .gallery-loading { text-align: center; padding: 48px; color: rgba(255,255,255,0.4); } .gallery-empty { text-align: center; padding: 64px 20px; color: rgba(255,255,255,0.35); } /* ── Responsive ── */ @media (max-width: 900px) { .gallery-section { padding: 0 20px 64px; } .carousel-wrap { aspect-ratio: 4/3; } .carousel-thumbs { display: none; } }