/** * Fashion Lookbook Slider - Frontend Styles * CSS custom properties are set inline in by class-frontend.php * so the bar color/height and arrow animation stay admin-configurable. */ :root { --fls-bar-color: #1c3d38; --fls-bar-height: 10px; --fls-line-color: #1c3d38; --fls-gap: 24px; --fls-columns: 3; } .fls-lookbook-wrap { box-sizing: border-box; margin: 32px 0; padding: 24px 0; border-top: 2px solid var(--fls-line-color); border-bottom: 2px solid var(--fls-line-color); } .fls-lookbook-wrap * { box-sizing: border-box; } .fls-lookbook-title { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 2rem; font-weight: 400; margin: 0 0 20px; color: #1a1a1a; } /* Card row */ .fls-card-row { display: flex; flex-wrap: wrap; gap: var(--fls-gap); } .fls-card { flex: 0 0 calc((100% - (var(--fls-columns) - 1) * var(--fls-gap)) / var(--fls-columns)); min-width: 0; display: flex; flex-direction: column; } @media (max-width: 992px) { .fls-card-row { --fls-columns: 2; } } @media (max-width: 600px) { .fls-card-row { --fls-columns: 1; } .fls-lookbook-title { font-size: 1.5rem; } } /* Media / slides */ .fls-card-media { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: #f2f2f2; } .fls-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 1; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease; pointer-events: none; } .fls-card-img.is-active { opacity: 1; z-index: 2; transform: translateX(0); } /* Accent bar under the image */ .fls-card-bar { width: 100%; height: var(--fls-bar-height); background: var(--fls-bar-color); flex-shrink: 0; } /* Footer: title + NEXT */ .fls-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px; gap: 12px; } .fls-card-title { font-family: Georgia, 'Times New Roman', Times, serif; font-size: 1rem; font-style: italic; color: #1a1a1a; text-decoration: none; line-height: 1.3; } a.fls-card-title:hover { text-decoration: underline; } .fls-next-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 4px 0; cursor: pointer; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #1a1a1a; white-space: nowrap; flex-shrink: 0; } .fls-next-btn:hover { color: var(--fls-bar-color); } .fls-next-arrow { display: inline-flex; align-items: center; justify-content: center; } .fls-next-arrow svg { display: block; } /* Arrow nudge animation, toggled on/off via a body-level class set in JS based on the --fls-arrow-animation custom property. */ .fls-arrow-anim-on .fls-next-arrow svg { animation: fls-arrow-nudge 1.6s ease-in-out infinite; } .fls-arrow-anim-on .fls-next-btn:hover .fls-next-arrow svg, .fls-arrow-anim-on .fls-next-btn:focus-visible .fls-next-arrow svg { animation-play-state: paused; transform: translateX(4px); } @keyframes fls-arrow-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .fls-card-img, .fls-next-arrow svg { transition: none !important; animation: none !important; } }