/* ========================================================================= Frisør Elite — Customer Results portfolio slider Self-contained styles for .fe-results*. A MULTI-CARD horizontal portrait slider — deliberately distinct from the shop carousel's single 16:9 stage. Reuses the theme's :root design tokens with safe fallbacks. Overflow is contained inside .fe-results__viewport so the component never causes horizontal page scroll. Page progress (--fe-results-progress) is set inline by JS; the slim brass bar fills as you page through the track. ========================================================================= */ .fe-results { /* Local token fallbacks (resolve to theme :root vars when present). */ --fe-r-brass: var(--fe-brass, #b58f4d); --fe-r-brass-soft: var(--fe-brass-soft, #cba968); --fe-r-olive: var(--fe-olive, #4d5a3e); --fe-r-ink: var(--fe-ink, #14110d); --fe-r-ink-2: var(--fe-ink-2, #1b1712); --fe-r-cream: var(--fe-cream, #f6efe1); --fe-r-radius: var(--fe-radius, 12px); --fe-r-shadow: var(--fe-shadow, 0 18px 44px rgba(0, 0, 0, .22)); --fe-r-ease: var(--fe-ease-standard, cubic-bezier(.2, .8, .2, 1)); --fe-r-font-display: var(--fe-font-display, "Playfair Display", Georgia, ui-serif, serif); --fe-r-font-body: var(--fe-font-body, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); /* Cards visible per page + gap drive the card flex-basis. Overridden in the responsive blocks below. */ --fe-r-visible: 3; --fe-r-gap: clamp(14px, 2vw, 22px); --fe-r-progress: 0; /* 0..1, written by JS */ display: block; width: 100%; max-width: var(--fe-container, 1200px); margin-inline: auto; } /* ---- Viewport (contains overflow) + scroll-snap track ------------------- */ .fe-results__viewport { position: relative; width: 100%; overflow: hidden; /* horizontal scroll lives here, never on */ border-radius: var(--fe-r-radius); } .fe-results__track { display: flex; gap: var(--fe-r-gap); margin: 0; padding: 4px; list-style: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: auto; /* JS owns smooth scrolling so reduced-motion can force instant */ -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } .fe-results__track::-webkit-scrollbar { display: none; /* WebKit */ } /* ---- Portrait card ------------------------------------------------------ */ .fe-results__card { flex: 0 0 calc((100% - (var(--fe-r-visible) - 1) * var(--fe-r-gap)) / var(--fe-r-visible)); margin: 0; scroll-snap-align: start; } .fe-results__figure { position: relative; margin: 0; border-radius: var(--fe-r-radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--fe-r-ink-2); border: 1px solid rgba(var(--fe-brass-rgb, 181, 143, 77), .34); /* brass hairline */ box-shadow: var(--fe-r-shadow); } /* Inset vignette — echoes the shop stage, softer here. */ .fe-results__figure::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 -70px 90px rgba(16, 13, 9, .42); } /* Scoped under the card (0,2,0) so it beats the theme's `body.fe-site img` and GeneratePress `img { height:auto }`, otherwise object-fit never engages and the portrait letterboxes. */ .fe-results .fe-results__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.97) contrast(1.02); transition: transform 480ms var(--fe-r-ease); } .fe-results__card:hover .fe-results__img, .fe-results__card:focus-within .fe-results__img { transform: scale(1.04); } /* Caption gradient bar — only present when a caption was rendered. */ .fe-results__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 26px 18px 14px; color: var(--fe-r-cream); font-family: var(--fe-r-font-display); font-size: clamp(14px, 1.6vw, 18px); line-height: 1.3; letter-spacing: -.01em; background: linear-gradient(0deg, rgba(16, 13, 9, .78), transparent 62%); } /* ---- Slim brass page-progress bar --------------------------------------- */ .fe-results__progress { position: relative; width: 100%; height: 4px; margin-top: 18px; border-radius: 999px; background: rgba(var(--fe-brass-rgb, 181, 143, 77), .18); overflow: hidden; } .fe-results__progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform: scaleX(var(--fe-r-progress, 0)); transform-origin: left center; border-radius: inherit; background: linear-gradient(90deg, var(--fe-r-brass) 0%, var(--fe-r-brass-soft) 100%); box-shadow: 0 0 8px rgba(var(--fe-brass-soft-rgb, 203, 169, 104), .3); transition: transform 320ms var(--fe-r-ease); } /* ---- Controls (ghost brass round buttons + dots) ------------------------ */ .fe-results__controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 16px; } .fe-results__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; border: 1px solid rgba(var(--fe-brass-rgb, 181, 143, 77), .4); background: transparent; color: var(--fe-r-ink, #14110d); cursor: pointer; transition: background 180ms var(--fe-r-ease), border-color 180ms ease, transform 180ms var(--fe-r-ease); } .fe-results__btn:hover, .fe-results__btn:focus-visible { border-color: var(--fe-r-brass); background: rgba(var(--fe-brass-rgb, 181, 143, 77), .12); } .fe-results__btn:focus-visible { outline: 3px solid var(--fe-r-brass-soft); outline-offset: 3px; } .fe-results__btn:active { transform: translateY(1px); } .fe-results__btn[disabled] { opacity: .4; cursor: default; } .fe-results__icon { font-size: 22px; line-height: 1; font-family: var(--fe-r-font-body); } /* Page dots — real buttons, 44px hit area, slim brass pill when active. */ .fe-results__dots { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; } .fe-results__dot { position: relative; width: 28px; height: 44px; /* full 44px hit area; visible track is the pseudo below */ padding: 0; margin: 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; } .fe-results__dot::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 999px; background: rgba(var(--fe-brass-rgb, 181, 143, 77), .3); transition: width 220ms var(--fe-r-ease), background 220ms ease; } .fe-results__dot.is-active::before { width: 24px; background: var(--fe-r-brass); box-shadow: 0 0 8px rgba(var(--fe-brass-soft-rgb, 203, 169, 104), .35); } .fe-results__dot:focus-visible { outline: 3px solid var(--fe-r-brass-soft); outline-offset: 2px; border-radius: 8px; } /* ---- Responsive --------------------------------------------------------- */ /* Tablet: 2 cards. */ @media (max-width: 1023px) { .fe-results { --fe-r-visible: 2; } } /* Mobile: 1 card + ~20% peek of the next. */ @media (max-width: 767px) { .fe-results { --fe-r-gap: 14px; } /* 1.2-up: one full card plus a 20% peek, accounting for one gap. */ .fe-results__card { flex-basis: calc((100% - var(--fe-r-gap)) / 1.2); } .fe-results__caption { padding: 22px 14px 12px; } } /* ---- Reduced motion ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .fe-results__track { scroll-behavior: auto; } .fe-results__img, .fe-results__progress-fill, .fe-results__dot::before, .fe-results__btn { transition: none !important; } .fe-results__card:hover .fe-results__img, .fe-results__card:focus-within .fe-results__img { transform: none; } }