/* ================================================== MAIN SECTION NO TOP OR BOTTOM PADDING ================================================== */ .wil-photo-shelf { --wil-photo-left-gutter: max( 20px, calc( (100vw - 1920px) / 2 + 20px ) ); position: relative; width: 100vw !important; max-width: none !important; left: 50%; margin-left: -50vw !important; margin-right: -50vw !important; padding: 0; overflow: hidden; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Arial, sans-serif; } /* ================================================== HEADING ================================================== */ .wil-photo-heading { width: 100%; box-sizing: border-box; margin: 0 0 28px; padding-left: var(--wil-photo-left-gutter); padding-right: 20px; } .wil-photo-heading h2 { margin: 0; padding: 0; font-size: clamp( 25px, 3vw, 32px ); line-height: 1.15; font-weight: 600; letter-spacing: -.7px; } .wil-photo-heading strong { color: #ffffff; } .wil-photo-heading span { color: #9b9ba3; } /* ================================================== OUTER SLIDER ================================================== */ .wil-photo-slider-wrap { position: relative; width: 100vw !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden; background: transparent; } /* ================================================== FULL WIDTH SCROLL AREA SMOOTH FREE SCROLLING NO CARD LOCKING ================================================== */ .wil-photo-scroll { width: 100vw !important; max-width: none !important; box-sizing: border-box; margin: 0 !important; padding: 8px 0 25px 0 !important; overflow-x: auto; overflow-y: hidden; /* * Smooth movement for arrows. */ scroll-behavior: smooth; /* * FREE SCROLLING * Removes the hard card-to-card lock. */ scroll-snap-type: none !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .wil-photo-scroll::-webkit-scrollbar { display: none; } /* ================================================== PHOTO ROW ================================================== */ .wil-photo-row { display: flex; align-items: stretch; gap: 20px; width: max-content !important; min-width: 100vw !important; max-width: none !important; box-sizing: border-box; padding-left: var(--wil-photo-left-gutter) !important; padding-right: 0 !important; margin: 0 !important; } /* ================================================== PHOTO CARD 360 × 450 4:5 ================================================== */ .wil-photo-card { position: relative; display: flex; flex-direction: column; flex: 0 0 360px; width: 360px; height: 450px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; /* * FREE SCROLLING * No snapping to individual cards. */ scroll-snap-align: none !important; scroll-snap-stop: normal !important; white-space: normal; text-decoration: none !important; background: #ffffff; box-shadow: 2px 4px 12px #00000014; transform: translateZ(0); transition: all .3s cubic-bezier( 0, 0, .5, 1 ); } /* ================================================== IMAGE ================================================== */ .wil-photo-card img { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; object-fit: cover; transform: scale(var(--wil-photo-cover-scale, 1)); transition: transform .3s cubic-bezier( 0, 0, .5, 1 ); } /* ================================================== GRADIENT ================================================== */ .wil-photo-card-gradient { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.02) 62%, rgba(0,0,0,.72) 100% ); } /* ================================================== ALBUM INFO ================================================== */ .wil-photo-album-info { position: absolute; z-index: 5; left: 18px; right: 135px; bottom: 18px; display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; pointer-events: none; } /* ================================================== ALBUM TITLE ================================================== */ .wil-photo-album-title { margin: 0; padding: 0; color: #ffffff; font-size: 17px; line-height: 1.15; font-weight: 600; letter-spacing: -.2px; text-shadow: 0 1px 4px rgba(0,0,0,.35); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ================================================== PHOTO COUNT ================================================== */ .wil-photo-count { display: block; margin: 0; padding: 0; color: #d2d2d7; font-size: 13px; line-height: 1.2; font-weight: 500; letter-spacing: 0; text-shadow: 0 1px 4px rgba(0,0,0,.35); } /* ================================================== VIEW ALBUM ================================================== */ .wil-photo-card-content { position: absolute; z-index: 6; right: 18px; bottom: 18px; left: auto; top: auto; margin: 0; padding: 0; } .wil-photo-album-button { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; margin: 0; border: 0; border-radius: 999px; background: #ffffff; color: #131317; font-size: 13px; line-height: 1.2; font-weight: 600; white-space: nowrap; text-decoration: none; box-shadow: 0 3px 10px rgba(0,0,0,.15); transition: transform .2s ease; } /* ================================================== VIEW MORE PHOTOS CARD ================================================== */ .wil-photo-view-more { display: flex; align-items: center; justify-content: center; background: #1d1d1f; color: #ffffff; text-align: center; } .wil-photo-view-more-inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; padding: 30px; } .wil-photo-view-more-icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 20px; border-radius: 50%; background: #ffffff; color: #1d1d1f; font-size: 30px; line-height: 1; font-weight: 500; box-shadow: 0 3px 10px rgba(0,0,0,.15); transition: transform .3s cubic-bezier( 0, 0, .5, 1 ); } .wil-photo-view-more-title { margin: 0; padding: 0; font-size: 25px; line-height: 1.1; font-weight: 600; letter-spacing: -.5px; color: #ffffff; } .wil-photo-view-more-subtitle { margin-top: 8px; padding: 0; font-size: 15px; line-height: 1.3; font-weight: 400; color: #9b9ba3; } /* ================================================== HOVER ================================================== */ @media (hover:hover) { .wil-photo-card:hover { transform: scale(1.015); box-shadow: 2px 8px 20px rgba(0,0,0,.16); } .wil-photo-card:hover img { transform: scale(calc(var(--wil-photo-cover-scale, 1) * 1.025)); } .wil-photo-card:hover .wil-photo-album-button { transform: scale(1.04); } .wil-photo-view-more:hover .wil-photo-view-more-icon { transform: translateX(6px); } } /* ================================================== ARROWS ================================================== */ .wil-photo-slider-arrow { position: absolute; z-index: 30; top: 50%; width: 48px; height: 48px; padding: 0; margin: 0; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba( 50, 50, 55, .92 ); color: #ffffff; font-size: 32px; font-weight: 400; line-height: 1; cursor: pointer; transform: translateY(-50%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 3px 12px rgba(0,0,0,.25); transition: transform .2s ease, opacity .2s ease, background .2s ease; } .wil-photo-slider-prev { left: 18px; } .wil-photo-slider-next { right: 18px; } .wil-photo-slider-arrow:hover { background: rgba( 75, 75, 82, .96 ); transform: translateY(-50%) scale(1.08); } .wil-photo-slider-arrow:disabled { opacity: 0; pointer-events: none; } /* ================================================== TABLET ================================================== */ @media (max-width: 900px) { .wil-photo-shelf { --wil-photo-left-gutter: 20px; padding: 0; } .wil-photo-row { gap: 16px; } .wil-photo-card { flex: 0 0 320px; width: 320px; height: 400px; aspect-ratio: 4 / 5; } .wil-photo-album-info { left: 16px; right: 125px; bottom: 16px; } .wil-photo-album-title { font-size: 16px; } .wil-photo-count { font-size: 12px; } .wil-photo-card-content { right: 16px; bottom: 16px; } .wil-photo-view-more-title { font-size: 23px; } .wil-photo-view-more-subtitle { font-size: 14px; } } /* ================================================== MOBILE NO TOP OR BOTTOM PADDING ================================================== */ @media (max-width: 600px) { .wil-photo-shelf { --wil-photo-left-gutter: 20px; padding: 0; } .wil-photo-heading { margin-bottom: 20px; } .wil-photo-heading h2 { font-size: 24px; } .wil-photo-scroll { padding-top: 6px !important; padding-bottom: 22px !important; /* * KEEP MOBILE FREE-SCROLLING */ scroll-snap-type: none !important; } .wil-photo-row { gap: 14px; } .wil-photo-card { flex: 0 0 calc(100vw - 85px); width: calc(100vw - 85px); max-width: 320px; height: auto; aspect-ratio: 4 / 5; border-radius: 18px; scroll-snap-align: none !important; } .wil-photo-album-info { left: 14px; right: 116px; bottom: 14px; gap: 4px; } .wil-photo-album-title { font-size: 15px; } .wil-photo-count { font-size: 12px; } .wil-photo-card-content { right: 14px; bottom: 14px; } .wil-photo-album-button { padding: 8px 14px; font-size: 12px; } .wil-photo-view-more-inner { padding: 25px; } .wil-photo-view-more-icon { width: 52px; height: 52px; margin-bottom: 17px; font-size: 27px; } .wil-photo-view-more-title { font-size: 22px; } .wil-photo-view-more-subtitle { margin-top: 7px; font-size: 13px; } /* MOBILE = SWIPE */ .wil-photo-slider-arrow { display: none; } }