/** * Product Gallery Hero Block Styles * * Full-width image gallery with diagonal discount badge * * @package Travel\Blocks * @since 1.0.0 */ /* ===== CONTAINER ===== */ .product-gallery-hero { position: relative; width: 100%; overflow: hidden; background: var(--color-gray-900, #212121); } .product-gallery-hero-placeholder { padding: 4rem 2rem; text-align: center; background: var(--color-gray-100, #F5F5F5); color: var(--color-gray-600, #757575); } /* ===== SWIPER CONTAINER ===== */ .gallery-hero__swiper { width: 100%; height: 400px; } @media (min-width: 768px) { .gallery-hero__swiper { height: 500px; } } @media (min-width: 1024px) { .gallery-hero__swiper { height: 600px; } } .gallery-hero__image { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-hero__lightbox-link { display: block; width: 100%; height: 100%; cursor: pointer; } /* ===== DIAGONAL DISCOUNT BADGE ===== */ .gallery-hero__discount-badge { position: absolute; z-index: 10; color: white; padding: 0.5rem 4rem; font-weight: 700; font-size: 0.875rem; text-transform: capitalize; letter-spacing: 0.05em; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); transform: rotate(-45deg); transform-origin: center; } /* Top Left Position */ .gallery-hero__discount-badge--top-left { top: 2rem; left: -3rem; } /* Top Right Position */ .gallery-hero__discount-badge--top-right { top: 2rem; right: -3rem; transform: rotate(45deg); } @media (max-width: 767px) { .gallery-hero__discount-badge { font-size: 0.75rem; padding: 0.375rem 3rem; } .gallery-hero__discount-badge--top-left { top: 1.5rem; left: -2.5rem; } .gallery-hero__discount-badge--top-right { top: 1.5rem; right: -2.5rem; } } /* ===== NAVIGATION ARROWS ===== */ .gallery-hero__nav-button { display: none; } /* ===== PAGINATION (THUMBNAILS) ===== */ .gallery-hero__pagination { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(0, 0, 0, 0.3); border-radius: 2rem; backdrop-filter: blur(4px); display: none; } .gallery-hero__pagination :global(.swiper-pagination-bullet) { width: 12px; height: 12px; background: rgba(255, 255, 255, 0.5); opacity: 1; transition: all 0.3s ease; margin: 0 !important; } .gallery-hero__pagination :global(.swiper-pagination-bullet-active) { background: white; transform: scale(1.2); } /* Square thumbnails */ .swiper-pagination--square :global(.swiper-pagination-bullet) { border-radius: 2px; } /* Circle thumbnails */ .swiper-pagination--circle :global(.swiper-pagination-bullet) { border-radius: 50%; } /* ===== ACTIVITY LEVEL INDICATOR ===== */ .gallery-hero__activity-indicator { position: absolute; bottom: 1.5rem; left: 1.5rem; z-index: 20; display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-radius: 2rem; } .activity-indicator__icon { display: flex; align-items: center; width: 56px; height: 32px; } .activity-indicator__icon svg { width: 100%; height: 100%; } .activity-indicator__label { color: white; font-size: 0.875rem; font-weight: 600; white-space: nowrap; } .activity-indicator__dots { display: flex; align-items: center; gap: 0.375rem; } .activity-dot { width: 14px; height: 14px; border-radius: 50%; background: white; transition: background 0.3s ease; } .activity-dot.active { background: var(--wp--preset--color--secondary); } @media (max-width: 767px) { .gallery-hero__activity-indicator { padding: 0.5rem 0.75rem; gap: 0.5rem; bottom: 1rem; left: 1rem; } .activity-indicator__icon { width: 26px; height: 16px; } .activity-indicator__label { font-size: 0.75rem; } .activity-indicator__dots { gap: 0.25rem; } .activity-dot { width: 8px; height: 8px; } } /* ===== VIEW PHOTOS BUTTON ===== */ .gallery-hero__view-button { position: absolute; bottom: 1.5rem; right: 1.5rem; z-index: 20; background: var(--wp--preset--color--secondary); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 2rem; font-size: 0.875rem; font-weight: 600; display: inline-flex; align-items: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .gallery-hero__view-button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); background: #d97b75; } .gallery-hero__view-button:active { transform: translateY(0); } /* Hide icon if present */ .gallery-hero__view-button svg, .gallery-hero__view-button img { display: none; } @media (max-width: 767px) { .gallery-hero__view-button { padding: 0.625rem 1.25rem; font-size: 0.8125rem; bottom: 1rem; right: 1rem; } } /* ===== ALIGNMENT SUPPORT ===== */ .product-gallery-hero.alignwide { max-width: 1280px; margin-left: auto; margin-right: auto; } .product-gallery-hero.alignfull { max-width: 100%; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* ===== LOADING STATE ===== */ .gallery-hero__swiper.swiper-loading { background: var(--color-gray-200, #EEEEEE); } .gallery-hero__swiper.swiper-loading::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border: 4px solid var(--color-gray-400, #BDBDBD); border-top-color: var(--wp--preset--color--secondary); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } /* ===== ACCESSIBILITY ===== */ .gallery-hero__nav-button:focus-visible, .gallery-hero__view-button:focus-visible { outline: 2px solid white; outline-offset: 2px; } /* ===== PRINT STYLES ===== */ @media print { .gallery-hero__discount-badge, .gallery-hero__nav-button, .gallery-hero__pagination, .gallery-hero__view-button { display: none; } .gallery-hero__swiper { height: auto; } .swiper-slide:not(:first-child) { display: none; } }