/** Shopify CDN: Minification failed Line 16:0 Unexpected "=" Line 42:69 Unterminated string token **/ /* ============================================================ FRAMATICS SITE CSS — consolidated upload for Claude Design Part 1: HOME PAGE styles (token bridge in §2 must be re-pointed to the Framatics Design System tokens — see prompt) Part 2: PRODUCT PAGE styles (cascading slider, gsap slider) ============================================================ */ /* ==================== PART 1 — HOME PAGE ==================== */ /* ============================================================================ 1. RESET ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--_typography---mono), 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--gray--white); background: var(--black-site-wide); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.4; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } ul { list-style: none; margin: 0; padding: 0; } /* ============================================================================ 2. ROOT TOKEN BRIDGE — REMAPS LEGACY --fr-* TO WEBFLOW VARIABLES This is the heart of the redesign. Edits to your Variables in the Designer propagate through this layer to every section. ============================================================================ */ :root { /* ---- Hero / nav structural tokens (kept; layout-affecting) ---- */ --c-dark: var(--black-site-wide); --c-white: var(--gray--white); --c-contrast-60: rgba(255, 255, 255, 0.6); --c-contrast-15: rgba(255, 255, 255, 0.15); --c-contrast-20: rgba(255, 255, 255, 0.2); --c-success: #22c55e; --c-promo-bg: var(--black-site-wide); --ease-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); /* Layout structurals — these are em values that scale via Variable Modes if you create equivalent Variables in Core structure collection. For now they hold their layout shape; bind via Designer if you want them themed. */ --section-x: 2.5rem; --promo-h: 2.5625rem; --nav-h: 4.5rem; --hero-h1-line: 0.9; --hero-pill-size: var(--_typography---size--xxs); /* These map to your Typography size Variables and scale via Modes */ --hero-h1-size: var(--_typography---size--special-xxl); --hero-sub-size: var(--_typography---size--m); /* ---- Brand surfaces ---- */ --fr-near-black: var(--black-site-wide); --fr-deep-dark: var(--black-site-wide); --fr-dark-surface: var(--gray--900); --fr-card-bg: var(--gray--white); /* ---- Brand action colors → Cartier red ---- */ --fr-terracotta: var(--accent); --fr-coral: var(--accent); --fr-accent: var(--accent); --fr-accent-soft: var(--accent); /* ---- Light surfaces ---- */ --fr-parchment: var(--gray--white); --fr-ivory: var(--gray--white); --fr-white: var(--gray--white); --fr-warm-sand: var(--gray--100); /* ---- Neutral text ramp ---- */ --fr-charcoal-warm: var(--grey--title---tag); --fr-olive-gray: var(--gray--500); --fr-stone-gray: var(--gray--400); --fr-dark-warm: var(--gray--800); --fr-warm-silver: var(--gray--300); /* ---- Borders & rings ---- */ --fr-border-cream: var(--gray--100); --fr-border-warm: var(--gray--200); --fr-border-dark: var(--gray--800); --fr-ring-warm: var(--gray--200); --fr-ring-subtle: var(--gray--100); --fr-ring-deep: var(--gray--300); /* ---- Semantic ---- */ --fr-error: var(--accent); --fr-focus: var(--accent); /* ---- Championship accents — gold ONLY for dark surfaces ---- */ --fr-gold: var(--alternate); --fr-navy: var(--gray--800); --fr-pennant-green: var(--gray--700); /* ---- Semantic aliases ---- */ --fr-bg: var(--gray--white); --fr-bg-elevated: var(--gray--white); --fr-bg-inverse: var(--black-site-wide); --fr-fg: var(--black-site-wide); --fr-fg-muted: var(--gray--500); --fr-fg-subtle: var(--gray--400); --fr-fg-on-dark: var(--gray--300); --fr-border: var(--gray--100); --fr-border-strong: var(--gray--200); /* ---- Typography → Webflow Typography Variables ---- */ --fr-font-display: var(--_typography---main), "Helvetica Neue", Arial, sans-serif; --fr-font-body: var(--_typography---mono), "Inter", system-ui, sans-serif; --fr-font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace; /* ---- Type scale → Typography size Variables (em-based, Mode-aware) ---- */ --fr-text-hero: var(--_typography---size--special-xxl); --fr-text-section: var(--_typography---size--xl); --fr-text-h2: var(--_typography---size--m); --fr-text-h3: var(--_typography---size--r); --fr-text-h4: var(--_typography---size--s); --fr-text-h5: var(--_typography---size--xs); --fr-text-eyebrow: var(--_typography---size--xxs); --fr-text-body-lg: var(--_typography---size--s); --fr-text-body: var(--_typography---size--xs); --fr-text-body-std: var(--_typography---size--xs); --fr-text-body-sm: var(--_typography---size--xxs); --fr-text-caption: var(--_typography---size--xxs); --fr-text-label: var(--_typography---size--xxs); --fr-text-overline: var(--_typography---size--xxxs); --fr-text-micro: var(--_typography---size--xxxs); --fr-text-code: var(--_typography---size--xxs); /* ---- Spacing → Gaps Variables (em-based, Mode-aware) ---- */ --fr-space-0: 0; --fr-space-1: var(--_gaps---micro); --fr-space-2: var(--_gaps---micro); --fr-space-3: var(--_gaps---xxs); --fr-space-4: var(--_gaps---xs); --fr-space-5: var(--_gaps---xs); --fr-space-6: var(--_gaps---xxs); --fr-space-7: var(--_gaps---xs); --fr-space-8: var(--_gaps---s); --fr-space-9: var(--_gaps---s); --fr-space-10: var(--_gaps---m); --fr-space-11: var(--_gaps---m); --fr-space-12: var(--_gaps---l); --fr-space-13: var(--_gaps---l); --fr-space-14: var(--_gaps---xl); /* ---- Radii ---- */ --fr-radius-sharp: 4px; --fr-radius-subtle: 7px; --fr-radius-soft: 8px; --fr-radius-round: 999px; --fr-radius-xl: 16px; --fr-radius-2xl: 24px; --fr-radius-3xl: 32px; /* ---- Elevation ---- */ --fr-ring-1: 0 0 0 1px var(--gray--200); --fr-ring-deep: 0 0 0 1px var(--gray--300); --fr-shadow-whisper: none; --fr-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.06); --fr-shadow-inset: inset 0 0 0 1px var(--gray--200); --fr-container-max: 1200px; } /* ============================================================================ 3. (PROMO STRIP + LEGACY NAV) — REMOVED Promo strip was swapped out for the OSMO nav; legacy .nav__* rules now live in nav.css. Only the hero feature rule that lived here is kept, moved into the HERO section below. ============================================================================ */ /* ============================================================================ 4. HERO SECTION ============================================================================ */ @media (min-aspect-ratio: 16/10) and (min-width: 992px) { .hero { height: auto; max-height: 100vh; aspect-ratio: 1440 / 820; } } .hero__media.is-video-ready .hero__media-video { opacity: 1; } .hero__pill-inner { -webkit-backdrop-filter: blur(4px); } .hero__subtitle { text-wrap: balance; } .hero__feature-icon img { width: 100%; height: 100%; object-fit: contain; } @keyframes hero-rise { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero__pill, .hero__title, .hero__subtitle, .hero__footer { animation: none; opacity: 1; transform: none; } } @media (max-width: 767px) { .hero__features { -webkit-overflow-scrolling: touch; } } .hero__features::-webkit-scrollbar { display: none; } .hero__feature + .hero__feature { border-left: 1px solid var(--c-contrast-15); } @media (max-width: 360px) { .hero__feature { min-width: 200px; } } /* Hero CTA — Cartier-style translucent on dark video */ .hero__cta { background-color: transparent; color: var(--gray--white); border: 1px solid var(--gray--white); border-radius: 999px; box-shadow: none; transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease; } .hero__cta:hover { background-color: var(--gray--white); color: var(--black-site-wide); border-color: var(--gray--white); } /* ============================================================================ 5. BY LEAGUE SECTION (light bg) ============================================================================ */ .fr-byleague { background-color: var(--gray--white); } [data-flip-button="wrap"] { position: relative; } [data-flip-button="button"] { position: relative; z-index: 1; color: var(--fr-fg-muted); } [data-flip-button="button"]:has([data-flip-button="bg"]), [data-flip-button="button"].active { color: var(--fr-ivory); } [data-flip-button="bg"] { position: absolute; inset: 0; border-radius: 8px; background: var(--fr-near-black); z-index: 0; pointer-events: none; } [data-tabs="content-item"] { will-change: opacity, transform; } [data-tabs="visual-item"] { will-change: opacity, transform; } [data-tabs-fade] { will-change: transform, opacity; } @media (max-width: 860px) { [data-tabs="wrapper"] { grid-template-columns: 1fr !important; } [data-tabs="visual-wrap"] { min-height: 70vw; } } .fr-byleague__visual-item { background: linear-gradient(155deg, var(--fr-ivory) 0%, var(--fr-warm-sand) 100%); } /* By League CTA — Cartier translucent button on light bg */ .fr-byleague__cta { background-color: transparent; color: var(--black-site-wide); border: 1px solid var(--black-site-wide); border-radius: 999px; box-shadow: none; font-family: var(--_typography---mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.95rem 1.6rem; transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease; } .fr-byleague__cta:hover { background-color: var(--accent); color: var(--gray--white); border-color: var(--accent); } /* --------------------------------------------------------------------------- 5b. By League visual column: product thumbnail + tightened image inset The visual column is a 2-track grid, [thumbnail rail | big image]. The rail is pinned to the top of the row, the image stack stretches the full row, so there is no dead band above or below the image at any 2-column width. --fr-byleague-gutter is the only inset around the big image. Keep it small: the design intent is images that sit close to the edge, not a framed inset. The thumbnail is rendered into two rails (desktop + mobile) because on phones it moves beside the heading, and CSS cannot move an element between containers. Only one rail is ever displayed. --------------------------------------------------------------------------- */ .league-section { min-height: 100vh; } /* No rule between the copy and the imagery, in either layout. */ .fr-byleague__left { border-right-width: 0; border-bottom-width: 0; } /* Display heading. Fluid size, with the measure capped in em rather than px so the four-line phrase wrapping holds at every size. This class is used only here. */ .fr-byleague__head-row .sectiion-subhead-text { font-size: clamp(34px, 3.4vw, 58px); line-height: 1.02; max-width: 5.6em; } .fr-byleague__visual-wrap { --fr-byleague-gutter: clamp(10px, 1.1vw, 18px); --fr-byleague-thumb-w: clamp(150px, 17vw, 250px); --fr-byleague-thumb-overlap: calc(var(--fr-byleague-thumb-w) * .6); display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--fr-byleague-gutter); align-items: stretch; position: relative; overflow: visible; } /* The big image is half the viewport, flush to the right inside the gutter. */ .fr-byleague__visual-stack { position: relative; grid-column: 1; grid-row: 1; justify-self: end; width: 50vw; min-height: 0; overflow: hidden; } /* Rails stack their league items in one grid cell, so the rail takes the height of the tallest item and nothing jumps when tabs change. */ .fr-byleague__thumb-rail { display: grid; justify-self: start; width: 100%; } /* Sits on a white card straddling the big image's top-left corner. */ .fr-byleague__thumb-rail--desktop { position: absolute; top: var(--fr-byleague-gutter); right: calc(var(--fr-byleague-gutter) + 50vw - var(--fr-byleague-thumb-overlap)); width: var(--fr-byleague-thumb-w); z-index: 2; background-color: var(--gray--white); padding: var(--space-md) var(--space-md) var(--space-lg); } .fr-byleague__thumb-rail--mobile { display: none; } .fr-byleague__thumb-item { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: opacity 420ms ease, transform 420ms ease, visibility 0s linear 420ms; } .fr-byleague__thumb-item.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 420ms ease, transform 420ms ease, visibility 0s; } .fr-byleague__thumb-link { display: block; text-decoration: none; color: inherit; } /* The cycling window. Images are stacked and crossfaded by the tabs module. */ .fr-byleague__thumb-frame { display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background-color: var(--gray--100); } .fr-byleague__thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 700ms ease, transform 700ms ease; } .fr-byleague__thumb-img.is-active { opacity: 1; transform: none; } .fr-byleague__thumb-label { display: inline-block; margin-top: var(--space-md); font-family: var(--_typography---mono); font-size: var(--_typography---xxs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--black-site-wide); border-bottom: 1px solid var(--black-site-wide); padding-bottom: 3px; transition: color 240ms ease, border-color 240ms ease; } .fr-byleague__thumb-link:hover .fr-byleague__thumb-label { color: var(--gray--500); border-bottom-color: var(--gray--500); } /* Tab-change motion for the copy and the big image. */ .fr-byleague__content-item { transform: translateY(12px); transition: opacity 380ms ease, transform 380ms ease; } .fr-byleague__content-item.is-active { transform: none; } .fr-byleague__visual-item { transform: scale(1.03); transition: opacity 420ms ease, transform 620ms ease; } .fr-byleague__visual-item.is-active { transform: none; } /* Stacked layout. The section is already one column below 991px; the job here is to stop the visual column leaving a tall empty band above and below the image, which is what the fixed 60vh min-height used to cause. */ /* Stacked, 991px and down. The thumbnail leaves the visual column entirely and pins to the top-right of the heading, so it reads beside the title rather than stranded above the big image. It is absolutely positioned so it can hang below the heading box towards the subtitle without pushing the tabs down; the heading reserves its width with padding-right. */ @media (max-width: 991px) { /* Declared on the section so both the copy column and the visual column inherit it; custom properties do not travel between siblings. */ .league-section { --fr-byleague-thumb-w-s: clamp(96px, 21vw, 200px); min-height: 0; } /* Tight bottom padding: stacked, this is the gap between the CTA and the big image, and the section's own 40px read as dead space there. */ .fr-byleague__left { padding: 40px 32px 14px; } /* The real gap was not padding. .fr-byleague__content-wrap carries a fixed min-height:300px while its items are absolutely positioned, so the wrap stayed 300px tall no matter how short the copy was and left ~100px of dead space under the CTA. Let the active item hold the height instead. */ .fr-byleague__content-wrap { min-height: 0; } .fr-byleague__content-item { position: absolute; } .fr-byleague__content-item.is-active { position: relative; } .fr-byleague__head-row { position: relative; } .fr-byleague__head-row .sectiion-subhead-text { padding-right: calc(var(--fr-byleague-thumb-w-s) + var(--space-xl)); font-size: clamp(36px, 5vw, 50px); /* box-sizing is border-box here, so the cap has to carry the reserved padding or the measure collapses and every word wraps alone. */ max-width: calc(5.6em + var(--fr-byleague-thumb-w-s) + var(--space-xl)); } .fr-byleague__thumb-rail--desktop { display: none; } .fr-byleague__thumb-rail--mobile { display: grid; position: absolute; top: 0; right: 0; width: var(--fr-byleague-thumb-w-s); } /* Portrait, so the card runs from the heading down towards the subtitle. */ .fr-byleague__thumb-rail--mobile .fr-byleague__thumb-frame { aspect-ratio: 3 / 4; } .fr-byleague__visual-wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; align-items: start; } .fr-byleague__visual-stack { grid-column: 1; grid-row: 1; justify-self: stretch; width: auto; aspect-ratio: 4 / 3; } } /* Phones: the tab pills are nearly full width here, so an absolutely positioned card could drop onto them whenever the heading wraps to fewer lines. Put it back in normal flow beside the heading instead, where the row simply grows and overlap is structurally impossible. Top-aligned, so it still starts level with the title. */ @media (max-width: 767px) { .fr-byleague__left { padding: 36px 20px 12px; } .fr-byleague__nav { margin-top: 28px; } .fr-byleague__head-row { position: static; display: grid; grid-template-columns: minmax(0, 1fr) var(--fr-byleague-thumb-w-s); gap: var(--space-lg); align-items: stretch; } /* The card matches the heading's height by construction rather than by a tuned aspect ratio, so the two blocks stay level at every width in this range instead of drifting apart as the type scales. */ .fr-byleague__thumb-rail--mobile { align-self: stretch; } .fr-byleague__thumb-rail--mobile .fr-byleague__thumb-item { min-height: 0; } .fr-byleague__thumb-rail--mobile .fr-byleague__thumb-link { display: flex; flex-direction: column; height: 100%; } /* Scale the heading so its block stays roughly as tall as the card beside it across 320-767. The card grows with --fr-byleague-thumb-w-s, so the type has to grow with it or the heading looks stranded and short. */ .fr-byleague__head-row .sectiion-subhead-text { padding-right: 0; /* Tuned so the heading holds 4-5 lines across the range. Too steep a floor here and a 320px column forces 7 lines, which drags the card down with it and turns the photo into a sliver. */ font-size: clamp(30px, calc(12.9px + 5.35vw), 54px); /* The grid column sets the measure here; capping it too would stop the heading filling the height beside the card. */ max-width: none; } .fr-byleague__thumb-rail--mobile { position: static; width: 100%; } .fr-byleague__thumb-rail--mobile .fr-byleague__thumb-frame { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; } .fr-byleague__visual-stack { aspect-ratio: 1 / 1; } } @media (prefers-reduced-motion: reduce) { .fr-byleague__thumb-item, .fr-byleague__thumb-img, .fr-byleague__content-item, .fr-byleague__visual-item { transition-duration: 1ms; transform: none; } } /* ============================================================================ 6. FEATURED PRODUCTS SLIDER + CARDS (light bg) ============================================================================ */ .fr-feat-section { background-color: var(--gray--white); } .fr-feat-viewall svg { width: 14px; height: 14px; } .fr-feat-viewall { transition: color 200ms ease; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .fr-feat-viewall:hover { color: var(--accent); } /* --------------------------------------------------------------------------- 6a. Editorial section header: serif title, prev/next inline at top right. The header markup lives inside [data-gsap-slider-init] so the controls stay within the slider root that the GSAP module queries. Layout only happens here; do not move the controls out of the root. --------------------------------------------------------------------------- */ .fr-feat-header { align-items: flex-end; } .fr-feat-header__titles { min-width: 0; } .fr-feat-header__actions { display: flex; align-items: center; gap: var(--space-xl); } /* Title in the editorial serif, sentence case rather than the display caps. */ .test-section-header { font-family: var(--font-serif); text-transform: none; font-weight: 400; font-size: clamp(30px, 3.4vw, 54px); letter-spacing: -0.01em; line-height: 1.05; } .gsap-slider__controls-2 { position: static; display: flex; align-items: center; gap: var(--space-sm); margin: 0; padding: 0; width: auto; } .gsap-slider__control-2 { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--black-site-wide); cursor: pointer; transition: background-color 200ms ease, opacity 200ms ease; } .gsap-slider__control-2:hover { background-color: var(--gray--100); } .gsap-slider__control-2 svg { width: 20px; height: 20px; display: block; } /* Label kept for screen readers; the control reads as a chevron visually. */ .gsap-slider__control-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- 6b. Card wishlist + quick-add controls The heart opts into the shared wishlist store in theme.js via [data-wish-toggle]; theme.js writes .is-saved back onto the button, which is what turns it red. Sizing mirrors .fr-modal__close so the two circular controls read as one family. --------------------------------------------------------------------------- */ .heart-button_wrap { width: 2.5rem; height: 2.5rem; background-color: var(--gray--white); border: 1px solid var(--gray--300); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); color: var(--black-site-wide); } .heart-button_wrap:hover, .heart-button_wrap:focus-visible { background-color: var(--gray--white); border-color: var(--black-site-wide); transform: scale(1.06); } .heart-button_svg { width: 1.15rem; height: 1.15rem; display: block; } .heart-button_path { fill: none; stroke: var(--black-site-wide); stroke-width: 1.7; } /* Saved state. theme.js owns .is-saved; aria-pressed is kept in sync with it. */ .heart-button_wrap.is-saved, .heart-button_wrap[aria-pressed="true"] { border-color: var(--favorite); } .heart-button_wrap.is-saved .heart-button_path, .heart-button_wrap[aria-pressed="true"] .heart-button_path { fill: var(--favorite); stroke: var(--favorite); } .heart-button_wrap.is-saved .heart-button_svg { animation: pop 300ms ease; } /* Quick-add styling lives with the tablet/mobile visibility rule further down; the base .product-slider-card-cart-trigger sets `background: transparent` after this point in the file and would win over an override placed here. */ .gsap-slider.fr-featured-slider { --slider-status: on; --slider-spv: 3; --slider-gap: 1.5em; } /* Slides per view. Below 992px the slider runs in centre mode, so the leftover fraction is split across BOTH edges: 1.15 left a 9px sliver either side at 375px, which reads as a clipping bug rather than a peek. 1.4 gives a 0.2 card each side, enough to see it is a card. */ @media (max-width: 991px) { .gsap-slider.fr-featured-slider { --slider-spv: 2.15; --slider-gap: 1.25em; } } @media (max-width: 767px) { .gsap-slider.fr-featured-slider { --slider-spv: 1.4; --slider-gap: 1em; } } .gsap-slider__list { -webkit-user-select: none; } [data-gsap-slider-item]:last-child { margin-right: 0; } /* Edge-card dimming removed on request: cards stay at full opacity. */ [data-gsap-slider-status="not-active"] .gsap-slider__controls { display: none; } [data-gsap-slider-control-status="not-active"] { opacity: 0.25; pointer-events: none; } [data-gsap-slider-list-status="grab"] { cursor: grab; } [data-gsap-slider-list-status="grabbing"] { cursor: grabbing; } /* Slider arrows — unified circular with hover invert */ .gsap-slider__control { width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--gray--300); background-color: transparent; color: var(--black-site-wide); box-shadow: none; transition: all 240ms ease; } .gsap-slider__control:hover { background-color: var(--black-site-wide); color: var(--gray--white); border-color: var(--black-site-wide); } .gsap-slider__control svg { width: 18px; height: 18px; } .gsap-slider__control[data-gsap-slider-control="prev"] svg { transform: scaleX(-1); } /* Card */ .fr-card__art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(245,239,226,0.6) 0%, transparent 70%); pointer-events: none; } .fr-card__wish svg { width: 16px; height: 16px; } .fr-card__wish.is-wished svg path { fill: currentColor; } .fr-card__art:hover .fr-card__stack { transform: scale(1.02); } .fr-card__img:first-of-type { position: relative; } .fr-card__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 12px 28px rgba(0,0,0,0.18)); } .fr-card__art:hover .fr-card__dots { opacity: 1; } .fr-card__art:hover .fr-card__quickadd { opacity: 1; transform: translateY(0); pointer-events: auto; } .fr-card__title { text-wrap: balance; } .fr-btn svg { width: 14px; height: 14px; } .fr-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ============================================================================ 7. PRODUCT MODAL (Quick Add) ============================================================================ */ .fr-modal-backdrop { -webkit-backdrop-filter: blur(4px); } @media (max-width: 640px) { .fr-modal { grid-template-columns: 1fr; } .fr-modal__img { border-radius: 20px 20px 0 0; } } .fr-modal__img-main img { max-width: 100%; height: auto; } /* Modal arrows — unified circular */ .fr-modal__arrow { -webkit-backdrop-filter: blur(8px); width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid var(--gray--300); background-color: transparent; color: var(--black-site-wide); box-shadow: none; transition: all 240ms ease; } .fr-modal__arrow:hover { background-color: var(--black-site-wide); color: var(--gray--white); border-color: var(--black-site-wide); } .fr-modal__arrow svg { width: 13px; height: 13px; } .fr-modal__arrow--prev svg { transform: scaleX(-1); } .fr-modal__thumb img { width: 100%; height: 100%; object-fit: contain; } .fr-modal__thumb::after { content: ""; position: absolute; inset: 0; border-radius: 5px; background: rgba(20,20,19,0.42); opacity: 1; transition: opacity 200ms ease; pointer-events: none; } .fr-modal__thumb.is-active::after { opacity: 0; } .fr-modal__close svg { width: 14px; height: 14px; } .fr-modal__head .fr-modal__eyebrow { font-family: var(--fr-font-display); font-weight: 700; font-size: var(--fr-text-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fr-accent); margin-bottom: 4px; } body.fr-modal-open { overflow: hidden; } /* Modal slider dots (Webflow native slider inside the Quick-Add modal). Scoped to .fr-modal-backdrop so it doesn't bleed into other site sliders. */ .fr-modal-backdrop .w-slider-dot { background-color: #858585; width: 30px; height: 5px; border-radius: 15px; margin: 0 4px; transition: width 200ms ease, background-color 200ms ease; } .fr-modal-backdrop .w-slider-dot.w-active { background-color: #c72c41; width: 60px; } /* ============================================================================ 8. CRAFT SCROLL-WHEEL (dark bg) ============================================================================ */ .fr-craft-section { position: relative; background-color: var(--black-site-wide); } .fr-craft-list-mask { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); } @media (max-width: 1099px) { .fr-craft-card-left { padding: 36px 48px; } .fr-craft-label { top: 36px; left: 48px; } .fr-craft-list-mask { top: 90px; } .fr-craft-list { padding-left: 48px; padding-right: 48px; } .fr-craft-item { font-size: clamp(26px, 4vw, 48px); padding: 12px 0; } } @media (max-width: 600px) { .fr-craft-card-left { padding: 32px 28px; } .fr-craft-label { top: 32px; left: 28px; font-size: 16px; } .fr-craft-list-mask { top: 88px; } .fr-craft-list { padding-left: 28px; padding-right: 28px; } .fr-craft-mobile-img { width: 52%; height: 46%; } .fr-craft-item { font-size: clamp(22px, 5.4vw, 32px); padding: 8px 0; } } /* ============================================================================ 9. POWER SECTION (dark bg) ============================================================================ */ .fr-power-section { background-color: var(--black-site-wide); } .fr-power-cta { background-color: var(--gray--white); color: var(--black-site-wide); border: 1px solid var(--gray--white); border-radius: 999px; box-shadow: none; font-family: var(--_typography---mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.95rem 1.6rem; transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease; } .fr-power-cta:hover { background-color: transparent; color: var(--gray--white); border-color: var(--gray--white); } /* ============================================================================ 10. TESTIMONIALS ============================================================================ */ :where(.wftr-scope) { --fr-bg: var(--gray--white); } .wftr-quote { text-wrap: balance; } /* ============================================================================ 11. STICKY CARDS (dark bg) ============================================================================ */ .fr-sc-section, .fr-sc-bg { background-color: var(--black-site-wide); } .fr-sc-section::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%); pointer-events: none; } .fr-sc-card[data-card-index="0"] { opacity: 1; pointer-events: auto; } .fr-sc-heading { text-wrap: balance; } .fr-sc-body { text-wrap: pretty; } .fr-sc-tab { --progress: 0; } @media (max-width: 860px) { .fr-sc-tab { padding-top: clamp(10px, 1.5vw, 18px); font-size: 10px; letter-spacing: 0.04em; } } /* ============================================================================ 14. SHOPYFLOW STATE GUARDS ============================================================================ */ .sf-out-of-stock, .sf-stock-exceeded { pointer-events: none; } .sf-option-unavailable { pointer-events: none; opacity: 0.4; } /* ============================================================================ 15. GOLD-ON-DARK ENFORCEMENT ============================================================================ */ .fr-byleague .fr-pill--gold, .fr-feat-section .fr-pill--gold:not(.fr-card .fr-pill--gold), .ride-section .fr-pill--gold { background-color: var(--accent); color: var(--gray--white); } .fr-byleague .fr-byleague__league-tag { color: var(--gray--500); } .fr-byleague__accomplishment { color: var(--black-site-wide); } /* ============================================================================ 16. PRODUCT SLIDER + CARD — STRUCTURAL CSS Structural only. Colors/fonts come from Webflow / the rules above. Tune size via --slider-spv / --slider-gap on [data-gsap-slider-init]. ============================================================================ */ /* ---- Slider layout ---- */ [data-gsap-slider-init] { --slider-status: on; --slider-spv: 3; --slider-gap: 1rem; --card-width: calc(((100% - (var(--slider-gap) * (var(--slider-spv) - 1))) / var(--slider-spv)) * 0.9); } @media (max-width: 991px) { [data-gsap-slider-init] { --slider-spv: 1.15; --slider-gap: 0.625rem; } } [data-gsap-slider-collection] { overflow: hidden; width: 100%; } [data-gsap-slider-list], .gsap-slider__list { display: flex; will-change: transform; -webkit-user-select: none; user-select: none; } [data-gsap-slider-item] { flex: 0 0 var(--card-width); width: var(--card-width); margin-right: var(--slider-gap); } [data-gsap-slider-item]:last-child { margin-right: 0; } /* Desktop: all cards fully visible — no art dimming */ @media (min-width: 992px) { [data-gsap-slider-item] [data-product-slider-card-art], [data-gsap-slider-item] .product-slider-card-art { opacity: 1; } } /* Tablet/mobile centre mode: no dimming. Every card in the viewport reads at full strength, including the partially scrolled edge cards. */ @media (max-width: 991px) { [data-gsap-slider-init][data-gsap-slider-center-mode="true"] [data-product-slider-card-art], [data-gsap-slider-init][data-gsap-slider-center-mode="true"] .product-slider-card-art { opacity: 1; } } [data-gsap-slider-item-status="active"] [data-product-slider-card-info], [data-gsap-slider-item-status="inview"] [data-product-slider-card-info], [data-gsap-slider-item-status="not-active"] [data-product-slider-card-info], [data-gsap-slider-item-status="active"] .product-slider-card-info, [data-gsap-slider-item-status="inview"] .product-slider-card-info, [data-gsap-slider-item-status="not-active"] .product-slider-card-info { opacity: 1; } [data-gsap-slider-status="not-active"] [data-gsap-slider-controls] { display: none; } [data-gsap-slider-control-status="not-active"] { opacity: 0.2; pointer-events: none; } [data-gsap-slider-list-status="grab"] { cursor: grab; } [data-gsap-slider-list-status="grabbing"] { cursor: grabbing; } /* ---- Product card wrapper (matches slider item width) ---- */ [data-product-slider-card], .product-slider-card { width: 100%; max-width: none; margin: 0 auto; padding: 0; list-style: none; display: flex; flex-direction: column; } [data-product-slider-card-art], .product-slider-card-art { position: relative; width: 100%; max-width: none; aspect-ratio: 2 / 3; flex-shrink: 0; border-radius: 0.8rem; overflow: hidden; isolation: isolate; } [data-product-slider-card-images], .product-slider-card-images { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } [data-product-slider-card-interact], .product-slider-card-interact { position: absolute; inset: 0; z-index: 1; pointer-events: auto; touch-action: pan-y; background: transparent; } [data-product-slider-card-image], .product-slider-card-image { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; pointer-events: none; z-index: 0; } [data-product-slider-card-img], .product-slider-card-img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } [data-product-slider-card-img][data-active="true"], .product-slider-card-img.is-active, .fr-card__img.is-active { opacity: 1; } /* ===== Image indicator dots (desktop hover only) ===== Fades in on hover with the SAME y-slide entrance as the quick-add button (driven by GSAP in the JS). Active dot = pill, inactive = small circle. Hidden at 991px and below — desktop only, per spec. */ [data-product-slider-card-dots], .product-slider-card-dots { position: absolute; left: 50%; bottom: 3.75rem; transform: translateX(-50%); z-index: 16; display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin: 0; padding: 0; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity 0.25s ease, visibility 0.25s ease; } [data-product-slider-card-dot], .product-slider-card-dot { width: 0.375rem; height: 0.375rem; margin: 0; padding: 0; border: 0; border-radius: 999px; background-color: rgba(20, 20, 19, 0.28); transition: width 0.3s ease, background-color 0.3s ease; flex: 0 0 auto; pointer-events: none; } [data-product-slider-card-dot][data-active="true"], .product-slider-card-dot.is-active { width: 1.125rem; background-color: #141413; } /* ---- Quick add (desktop hover only, hidden ≤991px) ---- */ [data-product-slider-card-quickadd-zone], .product-slider-card-quickadd-zone { position: absolute; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; justify-content: center; align-items: flex-end; padding: 0 1rem 1rem; min-height: 3.5rem; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } /* Webflow designer visibility */ html.wf-design-mode [data-product-slider-card-quickadd-zone], html.wf-design-mode .product-slider-card-quickadd-zone, body.wf-design-mode [data-product-slider-card-quickadd-zone], body.wf-design-mode .product-slider-card-quickadd-zone, html.wf-design-mode [data-product-slider-card-quickadd], html.wf-design-mode .product-slider-card-quickadd, body.wf-design-mode [data-product-slider-card-quickadd], body.wf-design-mode .product-slider-card-quickadd, html.wf-design-mode [data-product-slider-card-dots], html.wf-design-mode .product-slider-card-dots, body.wf-design-mode [data-product-slider-card-dots], body.wf-design-mode .product-slider-card-dots { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } html.wf-design-mode [data-product-slider-card-modal]:not([data-product-slider-card-open="true"]), html.wf-design-mode .product-slider-card-modal:not(.is-open), body.wf-design-mode [data-product-slider-card-modal]:not([data-product-slider-card-open="true"]), body.wf-design-mode .product-slider-card-modal:not(.is-open) { display: none !important; } html.wf-design-mode [data-product-slider-card-cart-trigger], html.wf-design-mode .product-slider-card-cart-trigger, body.wf-design-mode [data-product-slider-card-cart-trigger], body.wf-design-mode .product-slider-card-cart-trigger { display: flex !important; } @media (min-width: 992px) { [data-product-slider-card-art], .product-slider-card-art { pointer-events: auto; } [data-product-slider-card-images], .product-slider-card-images { pointer-events: none; } [data-product-slider-card-interact], .product-slider-card-interact { pointer-events: none !important; } [data-product-slider-card-art]:hover [data-product-slider-card-quickadd-zone], [data-product-slider-card-art]:hover .product-slider-card-quickadd-zone, [data-product-slider-card][data-product-slider-card-images-hover="true"] [data-product-slider-card-quickadd-zone], [data-product-slider-card][data-product-slider-card-images-hover="true"] .product-slider-card-quickadd-zone { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } [data-product-slider-card-art]:hover [data-product-slider-card-quickadd], [data-product-slider-card-art]:hover .product-slider-card-quickadd, [data-product-slider-card][data-product-slider-card-images-hover="true"] [data-product-slider-card-quickadd], [data-product-slider-card][data-product-slider-card-images-hover="true"] .product-slider-card-quickadd { pointer-events: auto !important; position: relative; z-index: 16; opacity: 1 !important; visibility: visible !important; } /* Dots reveal on hover (desktop only) — mirrors the quick-add reveal */ [data-product-slider-card-art]:hover [data-product-slider-card-dots], [data-product-slider-card-art]:hover .product-slider-card-dots, [data-product-slider-card][data-product-slider-card-images-hover="true"] [data-product-slider-card-dots], [data-product-slider-card][data-product-slider-card-images-hover="true"] .product-slider-card-dots { visibility: visible !important; opacity: 1 !important; } } [data-product-slider-card-quickadd], .product-slider-card-quickadd { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0.5rem; cursor: pointer; background: #000; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; pointer-events: auto; } /* Wishlist */ [data-product-slider-card-wishlist], .product-slider-card-wishlist { position: absolute; top: 0.625rem; right: 0.625rem; z-index: 20; width: 2.25rem; height: 2.25rem; margin: 0; padding: 0; border: 0.0625rem solid currentColor; border-radius: 50%; cursor: pointer; background: transparent; color: inherit; display: flex; align-items: center; justify-content: center; opacity: 1; pointer-events: auto; isolation: isolate; } [data-product-slider-card-wishlist] *, .product-slider-card-wishlist * { pointer-events: none; } [data-product-slider-card-wishlist] svg, .product-slider-card-wishlist svg { width: 1rem; height: 1rem; display: block; fill: transparent; stroke: currentColor; stroke-width: 1.6; opacity: 1; } [data-product-slider-card-wishlist][data-product-slider-card-wished="true"] svg, .product-slider-card-wishlist.is-wished svg { fill: #c72c41; stroke: #c72c41; opacity: 1; } /* Modal cart trigger (tablet/mobile) */ [data-product-slider-card-cart-trigger], .product-slider-card-cart-trigger { position: absolute; right: 0.625rem; bottom: 0.625rem; z-index: 20; width: 2.5rem; height: 2.5rem; margin: 0; padding: 0; border: 0.0625rem solid currentColor; border-radius: 50%; cursor: pointer; background: transparent; color: inherit; display: none; align-items: center; justify-content: center; opacity: 1; pointer-events: auto; isolation: isolate; } [data-product-slider-card-cart-trigger] *, .product-slider-card-cart-trigger * { pointer-events: none; } [data-product-slider-card-cart-trigger] svg, .product-slider-card-cart-trigger svg { width: 1.125rem; height: 1.125rem; display: block; stroke: currentColor; fill: none; stroke-width: 1.6; opacity: 1; } /* Card info — empty wrapper only */ [data-product-slider-card-info], .product-slider-card-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.625rem 0.125rem 0; min-height: 1.25rem; pointer-events: auto; opacity: 1; width: 100%; max-width: none; } /* Modal shell */ [data-product-slider-card-modal], .product-slider-card-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 1.25rem; } [data-product-slider-card-modal][data-product-slider-card-open="true"], .product-slider-card-modal.is-open { display: flex; opacity: 1; } [data-product-slider-card-modal-inner], .product-slider-card-modal-inner { position: relative; border-radius: 1rem; width: min(45rem, 92vw); max-height: 90vh; overflow: auto; opacity: 1; /* padding controlled in Webflow at the element level */ } /* Modal close — class-based styling only. The bare [data-product-slider-card-modal-close] attribute is left unstyled so your own site-wide close button keeps its own look; JS still wires it up. */ .product-slider-card-modal-close, .fr-modal__close { position: absolute; top: 0.875rem; right: 0.875rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; opacity: 1; } .product-slider-card-modal-close svg, .fr-modal__close svg { width: 0.875rem; height: 0.875rem; display: block; opacity: 1; } [data-product-slider-card-stagger], .product-slider-card-stagger { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; } [data-product-slider-card-stagger-item], .product-slider-card-stagger-item { min-height: 0.25rem; } /* Inside slider: hide swipe UI on tablet/mobile only (desktop hover keeps quick add) */ @media (max-width: 991px) { [data-gsap-slider-init] [data-product-slider-card-quickadd-zone], [data-gsap-slider-init] .product-slider-card-quickadd-zone, [data-gsap-slider-init] [data-product-slider-card-quickadd], [data-gsap-slider-init] .product-slider-card-quickadd { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } [data-gsap-slider-init] [data-product-slider-card-interact], [data-gsap-slider-init] .product-slider-card-interact { pointer-events: none !important; cursor: default; } [data-gsap-slider-init] [data-product-slider-card-interact].is-dragging, [data-gsap-slider-init] .product-slider-card-interact.is-dragging { cursor: default; } } /* Dots: desktop only — fully removed at 991px and below (tablet + mobile) */ @media (max-width: 991px) { [data-product-slider-card-dots], .product-slider-card-dots { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } @media (min-width: 992px) { [data-gsap-slider-init] [data-product-slider-card-art]:hover [data-product-slider-card-quickadd-zone], [data-gsap-slider-init] [data-product-slider-card-art]:hover .product-slider-card-quickadd-zone, [data-gsap-slider-init] [data-product-slider-card][data-product-slider-card-images-hover="true"] [data-product-slider-card-quickadd-zone], [data-gsap-slider-init] [data-product-slider-card][data-product-slider-card-images-hover="true"] .product-slider-card-quickadd-zone, [data-gsap-slider-init] [data-product-slider-card-art]:hover [data-product-slider-card-quickadd], [data-gsap-slider-init] [data-product-slider-card-art]:hover .product-slider-card-quickadd, [data-gsap-slider-init] [data-product-slider-card][data-product-slider-card-images-hover="true"] [data-product-slider-card-quickadd], [data-gsap-slider-init] [data-product-slider-card][data-product-slider-card-images-hover="true"] .product-slider-card-quickadd { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Dots reveal inside the slider too (desktop hover) */ [data-gsap-slider-init] [data-product-slider-card-art]:hover [data-product-slider-card-dots], [data-gsap-slider-init] [data-product-slider-card-art]:hover .product-slider-card-dots, [data-gsap-slider-init] [data-product-slider-card][data-product-slider-card-images-hover="true"] [data-product-slider-card-dots], [data-gsap-slider-init] [data-product-slider-card][data-product-slider-card-images-hover="true"] .product-slider-card-dots { visibility: visible !important; opacity: 1 !important; } [data-gsap-slider-init] [data-product-slider-card-interact], [data-gsap-slider-init] .product-slider-card-interact { pointer-events: none !important; cursor: default; } } /* Tablet/mobile: wishlist + cart trigger visible — colors from Webflow */ @media (max-width: 991px) { [data-product-slider-card-wishlist], .product-slider-card-wishlist, [data-product-slider-card-cart-trigger], .product-slider-card-cart-trigger { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Quick-add sits directly on the artwork at these sizes, so give it a solid white puck to read against. Stays circular. */ [data-product-slider-card-cart-trigger], .product-slider-card-cart-trigger { background-color: var(--gray--white); border-color: var(--gray--300); color: var(--black-site-wide); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } [data-product-slider-card-interact], .product-slider-card-interact { pointer-events: auto; cursor: grab; touch-action: pan-y; } [data-product-slider-card-interact].is-dragging, .product-slider-card-interact.is-dragging { cursor: grabbing; } } @media (min-width: 992px) { [data-product-slider-card-cart-trigger], .product-slider-card-cart-trigger { display: none !important; } } /* ===== Designer-only: reveal frame 0 so card art isn't blank on the canvas ===== */ html.wf-design-mode [data-product-slider-card-img], body.wf-design-mode [data-product-slider-card-img], html.wf-design-mode .product-slider-card-img, body.wf-design-mode .product-slider-card-img { opacity: 1 !important; } html.wf-design-mode [data-product-slider-card-img] ~ [data-product-slider-card-img], body.wf-design-mode [data-product-slider-card-img] ~ [data-product-slider-card-img], html.wf-design-mode [data-product-slider-card-image] ~ [data-product-slider-card-image] [data-product-slider-card-img], body.wf-design-mode [data-product-slider-card-image] ~ [data-product-slider-card-image] [data-product-slider-card-img] { opacity: 0 !important; } /* ============================================================================ 17. CUSTOMER PHOTOS — V-pyramid grid + lightbox Hooks on data-cp attributes only. Fully scoped to [data-cp="section"]. ============================================================================ */ [data-cp="section"] { /* Was a hardcoded #f5f5f5, which rendered this section one step darker than every other light section on the homepage (all --canvas / #fff). Sourced from the shared token so it cannot drift again; the local var stays so the block remains self-contained. */ --cp-bg: var(--canvas, #fff); --cp-text: #141413; --cp-text-muted: rgba(20, 20, 19, 0.6); --cp-radius: 8px; --cp-gap: 10px; --cp-pad-x: clamp(16px, 4vw, 64px); --cp-pad-y: clamp(64px, 8vw, 128px); width: 100%; max-width: 100vw; padding: var(--cp-pad-y) var(--cp-pad-x) 0; position: relative; overflow: hidden; background: var(--cp-bg); color: var(--cp-text); box-sizing: border-box; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } [data-cp="section"] *, [data-cp="section"] *::before, [data-cp="section"] *::after { box-sizing: border-box; } [data-cp="container"] { width: 100%; margin: 0 auto; } [data-cp="heading"] { margin: 0 auto 20px; text-align: center; font-size: 36px; line-height: 1; letter-spacing: -0.02em; font-weight: 600; color: var(--cp-text); width: 12ch; text-wrap: balance; } @media (min-width: 1024px) { [data-cp="heading"] { font-size: 72px; width: 10ch; margin-bottom: 40px; } } [data-cp="subhead"] { margin: 24px auto 0; max-width: 28rem; text-align: center; font-size: 20px; line-height: 1.4; color: var(--cp-text-muted); text-wrap: balance; font-weight: 400; } [data-cp="grid"] { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--cp-gap); margin: 40px auto 0; padding-bottom: 22vh; } @media (min-width: 1024px) { [data-cp="grid"] { margin-top: var(--cp-pad-y); padding-bottom: 48vh; } } @media (max-width: 1023.98px) { [data-cp="grid"] { width: 190vw; transform: translateX(-45vw); margin-left: calc(var(--cp-pad-x) * -1); } } [data-cp="tile"] { position: relative; width: 100%; padding: 0; margin: 0; border: 0; background: transparent; appearance: none; cursor: pointer; display: block; font: inherit; color: inherit; text-align: inherit; } [data-cp="tile"]:focus-visible { outline: 2px solid var(--cp-text); outline-offset: 4px; border-radius: 12px; } [data-cp="media"] { display: block; position: relative; width: 100%; height: 100%; aspect-ratio: 180 / 276; border-radius: var(--cp-radius); overflow: hidden; background: #e6e3d8; transform: translate3d(0, 0, 0); will-change: transform; } [data-cp="image"], [data-cp="video"] { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-select: none; } [data-cp-lb="root"] { position: fixed; inset: 0; z-index: 9999; background: #0e0e0d; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 240ms ease; padding: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-tap-highlight-color: transparent; } [data-cp-lb="root"][data-cp-open="true"] { display: flex; opacity: 1; } [data-cp-lb="root"] * { box-sizing: border-box; } [data-cp-lb="stage"] { position: relative; width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 6vh, 80px) clamp(64px, 8vw, 120px); } [data-cp-lb="track"] { position: relative; width: min(560px, 86vw); height: min(86vh, 860px); aspect-ratio: 180 / 276; max-width: 86vw; max-height: 86vh; } @media (max-width: 600px) { [data-cp-lb="stage"] { padding: 60px 12px 60px; } [data-cp-lb="track"] { width: 100%; height: auto; max-height: calc(100dvh - 140px); max-width: calc(100vw - 28px); } } [data-cp-lb="slide"] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.985); transition: opacity 220ms ease, transform 280ms cubic-bezier(.2,.8,.2,1); pointer-events: none; } [data-cp-lb="slide"][data-cp-active="true"] { opacity: 1; transform: scale(1); pointer-events: auto; } [data-cp-lb="slide"] img, [data-cp-lb="slide"] video { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 12px; background: #1a1a18; display: block; max-width: 100%; max-height: 100%; } [data-cp-lb="btn"] { position: absolute; z-index: 2; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(20,20,19,0.6); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 180ms ease, transform 180ms ease, border-color 180ms ease; font: inherit; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } [data-cp-lb="btn"]:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.55); } [data-cp-lb="btn"]:active { transform: scale(0.94); } [data-cp-lb="btn"]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } [data-cp-lb="btn"] svg { width: 22px; height: 22px; display: block; } [data-cp-lb-act="close"] { top: 18px; right: 18px; } [data-cp-lb-act="prev"] { left: 16px; top: 50%; transform: translateY(-50%); } [data-cp-lb-act="next"] { right: 16px; top: 50%; transform: translateY(-50%); } [data-cp-lb-act="prev"]:active { transform: translateY(-50%) scale(0.94); } [data-cp-lb-act="next"]:active { transform: translateY(-50%) scale(0.94); } @media (max-width: 600px) { [data-cp-lb="btn"] { width: 42px; height: 42px; } [data-cp-lb="btn"] svg { width: 18px; height: 18px; } [data-cp-lb-act="close"] { top: 14px; right: 14px; } [data-cp-lb-act="prev"] { left: 8px; } [data-cp-lb-act="next"] { right: 8px; } } [data-cp-lb="counter"] { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,0.85); font-size: 13px; letter-spacing: 0.04em; pointer-events: none; font-variant-numeric: tabular-nums; } body[data-cp-locked="true"] { overflow: hidden; } @media (prefers-reduced-motion: reduce) { [data-cp-lb="slide"] { transition: opacity 120ms linear; transform: none; } [data-cp-lb="slide"][data-cp-active="true"] { transform: none; } } /* ==================== PART 2 — PRODUCT PAGE ==================== */ [data-cascading-viewport] { --gap: 0.5em; } [data-cascading-slide] { --clip: 0; --radius: 0.75em; } [data-cascading-slide][data-status="active"] { cursor: default; } [data-cascading-slide] .cascading-slider__h { transition-delay: 0ms; } [data-cascading-slide][data-status="active"] .cascading-slider__h { transition-delay: 400ms; opacity: 1; transform: translate(0px, 0em); } .wf-design-mode [data-cascading-viewport] { display: flex; flex-direction: row; gap: 1em; overflow: auto; } .wf-design-mode [data-cascading-slide] { position: relative; width: 60%; flex: 0 0 auto; } .wf-design-mode .cascading-slider__h { opacity: 1; transform: translate(0px, 0em); } .text-line-mask { padding-bottom: 0.2em; margin-bottom: -0.2em; } [data-gsap-slider-init] { --slider-status: on; /* Turn slider on/off */ --slider-spv: 3; /* Slides per view */ --slider-gap: 1.5em; /* Slides Gap */ } @media screen and (max-width: 991px) { [data-gsap-slider-init] { --slider-status: on; /* Turn slider on/off */ --slider-spv: 2.25; /* Slides per view */ --slider-gap: 1.5em; /* Slides Gap */ } } @media screen and (max-width: 767px) { [data-gsap-slider-init] { --slider-status: on; /* Turn slider on/off */ --slider-spv: 1.15; /* Slides per view */ --slider-gap: 1em; /* Gap */ } } [data-gsap-slider-item]:last-child { margin-right: 0; } /* Controls */ [data-gsap-slider-status="not-active"] [data-gsap-slider-controls] { display: none; } [data-gsap-slider-control-status="not-active"] { opacity: 0.2; pointer-events: none; } /* Customization */ .gsap-slider__control { transition: opacity 0.3s ease; } .demo-card { transition: all 0.3s ease; } .demo-card__tag { transition: all 0.3s ease; } [data-gsap-slider-item-status="not-active"] .demo-card__tag { opacity: 0; } /* ============================================================================ 18. INSPIRATION — shoppable room grid Hooks on .fr-insp* only, fully scoped to [data-insp]. Used by /pages/inspiration (sections/inspiration-grid.liquid) and the static mirror site/inspiration.html. Behaviour lives in js/inspiration.js. Row rhythm is 2 up, then 3 up, alternating, which is the House of Spoils layout the design references. Below 900px every row collapses to one column, because a 3-up row of room photography at tablet width makes the framed print too small to read, which defeats the point of the page. ASPECT: the reference uses PORTRAIT tiles. Ours are landscape (3/2) because the source images are each product's own 16:9 room shot (media position 5). Cropping 16:9 into a 3:4 portrait box would throw away most of the room and leave a photo of a wall. 3/2 crops about 8% off each side and keeps the frame, the furniture and the light, which is what makes the shot worth showing at all. ============================================================================ */ [data-insp] { --insp-gap: 10px; --insp-pad: clamp(16px, 4vw, 64px); --insp-card-w: 320px; --insp-dot: 44px; width: 100%; padding: 0 var(--insp-pad) clamp(48px, 6vw, 96px); box-sizing: border-box; } [data-insp] *, [data-insp] *::before, [data-insp] *::after { box-sizing: border-box; } .fr-insp__rows { display: flex; flex-direction: column; gap: var(--insp-gap); } .fr-insp__row { display: grid; gap: var(--insp-gap); grid-template-columns: 1fr; } @media (min-width: 900px) { .fr-insp__row--2 { grid-template-columns: repeat(2, 1fr); } .fr-insp__row--3 { grid-template-columns: repeat(3, 1fr); } } /* Rows past the first page are removed from the flow AND from the a11y tree, so Show more genuinely reveals rather than just un-dimming. */ .fr-insp__row[hidden] { display: none; } /* ---- tile ---------------------------------------------------------------- */ .fr-insp__tile { position: relative; margin: 0; overflow: hidden; background: var(--soft-cloud, #f5f5f5); } .fr-insp__media { display: block; width: 100%; aspect-ratio: 3 / 2; } .fr-insp__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ---- hotspot ------------------------------------------------------------- */ /* --x/--y come from the block settings, so the dot can be moved onto the frame per photo from the theme editor. Defaults are 50%/30%: every room mockup in the catalogue comes from the same template family and the print sits within a few percent of that point in all of them (checked across 15). */ .fr-insp__spot { position: absolute; left: var(--x, 50%); top: var(--y, 30%); width: var(--insp-dot); height: var(--insp-dot); margin: calc(var(--insp-dot) / -2) 0 0 calc(var(--insp-dot) / -2); z-index: 2; } .fr-insp__dot { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; background: var(--gray--white, #fff); color: var(--black-site-wide, #111); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22); cursor: pointer; z-index: 2; transition: transform 160ms ease; } .fr-insp__dot:hover, .fr-insp__dot:focus-visible { transform: scale(1.08); } .fr-insp__dot:focus-visible { outline: 2px solid var(--black-site-wide, #111); outline-offset: 3px; } /* the + glyph, drawn rather than shipped as an icon so it stays crisp */ .fr-insp__dot::before, .fr-insp__dot::after { content: ""; position: absolute; background: currentColor; transition: transform 200ms ease; } .fr-insp__dot::before { width: 14px; height: 1.5px; } .fr-insp__dot::after { width: 1.5px; height: 14px; } /* open state turns the + into an x, so the same control closes the card */ .fr-insp__spot.is-open .fr-insp__dot::before { transform: rotate(45deg); } .fr-insp__spot.is-open .fr-insp__dot::after { transform: rotate(45deg); } /* Pulse rings: two staggered rings expanding from under the dot. The dot sits above them on z-index 2 so they read as emanating from it. */ .fr-insp__ring { position: absolute; inset: 0; border-radius: 50%; background: var(--gray--white, #fff); opacity: 0; z-index: 1; animation: fr-insp-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .fr-insp__ring:nth-child(2) { animation-delay: 0.8s; } @keyframes fr-insp-pulse { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(2.1); opacity: 0; } 100% { transform: scale(2.1); opacity: 0; } } /* Stop pulsing once the card is open: a ring animating under an open panel is noise, and the dot is no longer the thing asking for attention. */ .fr-insp__spot.is-open .fr-insp__ring { animation: none; opacity: 0; } @media (prefers-reduced-motion: reduce) { .fr-insp__ring { animation: none; opacity: 0.35; transform: scale(1.35); } .fr-insp__dot, .fr-insp__dot::before, .fr-insp__dot::after, .fr-insp__card { transition: none; } } /* ---- product card -------------------------------------------------------- */ /* Anchored to the TILE, not to the dot, so the clamp below resolves against the tile width and the card can never hang outside the photo. */ /* --insp-cw is the card's RESOLVED width and must be used everywhere the width is referenced, including inside the clamp below. A fixed 320px card is wider than a 3-up tile between 900px and roughly 1040px (at 920px the tile is 270px), and when that happens the clamp's max drops below its min, clamp returns the min, and the card hangs out over the next tile. Capping the width to the tile keeps min <= max at every viewport. */ .fr-insp__card { --insp-cw: min(var(--insp-card-w), calc(100% - 16px)); position: absolute; z-index: 3; width: var(--insp-cw); left: clamp(8px, calc(var(--x, 50%) - (var(--insp-cw) / 2)), calc(100% - var(--insp-cw) - 8px)); top: calc(var(--y, 30%) + (var(--insp-dot) / 2) + 10px); display: flex; align-items: stretch; background: var(--gray--white, #fff); box-shadow: 0 4px 38px rgba(0, 0, 0, 0.16); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease, transform 180ms ease, visibility 180ms; } /* flipped above the dot when there is not enough room below (set by JS) */ .fr-insp__card[data-pos="above"] { top: auto; bottom: calc(100% - var(--y, 30%) + (var(--insp-dot) / 2) + 10px); transform: translateY(6px); } .fr-insp__card.is-open { opacity: 1; visibility: visible; transform: translateY(0); } /* Proportional so the thumb gives ground first when the card is capped to a narrow 3-up tile, leaving the title and price room to stay readable. */ .fr-insp__card-img { flex: 0 0 clamp(70px, 30%, 96px); display: grid; place-items: center; padding: 10px; background: var(--soft-cloud, #f5f5f5); } .fr-insp__card-img img { display: block; width: 100%; height: auto; } .fr-insp__card-body { flex: 1 1 auto; min-width: 0; padding: 16px 16px 14px; } .fr-insp__card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .fr-insp__card-title { font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; line-height: 1.25; color: var(--ink); text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .fr-insp__card-title:hover { text-decoration: underline; } .fr-insp__card-team, .fr-insp__card-meta { font-family: var(--font-body); font-size: 0.78rem; line-height: 1.45; color: var(--mute); } .fr-insp__card-team { color: var(--charcoal); margin-bottom: 4px; } /* The heart is the shared shop-card control: same [data-wish-toggle] contract, same .is-saved styling, so a save here shows up on the card and in the drawer. Only the chrome differs, because inside a popup it is an inline glyph rather than a floating circular button sitting on artwork. */ .fr-insp__card .heart-button_wrap { position: static; flex: 0 0 auto; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; background: none; border: 0; box-shadow: none; cursor: pointer; } .fr-insp__card .heart-button_wrap:hover, .fr-insp__card .heart-button_wrap:focus-visible { background: none; border: 0; transform: scale(1.12); } .fr-insp__card .heart-button_svg { width: 1.1rem; height: 1.1rem; } /* ---- sheet mode: the card pins to the bottom edge of its tile -------------- Two situations need it, for the same underlying reason: the tile is too small to host a floating card. 1. Below 768px every tile is one column of a 343px-wide grid. A 320px floating card would cover the whole photo. 2. Below 1000px a 3-up tile is under ~296px wide, so under ~197px TALL. A card is about 98px high and sits 32px below a hotspot at y=30%, which needs 138px of clearance below the hotspot. It does not fit below, and flipping it above overflows the top instead, so there is no valid floating position at all. 987px is where the arithmetic turns; 1000 is the round number above it. --insp-sheet is read by inspiration.js: in sheet mode the card is pinned by CSS and must not be given a data-pos, so the flip logic reads this flag rather than duplicating the breakpoints in JS, where they would drift. */ .fr-insp__card { --insp-sheet: 0; } @media (max-width: 767px) { .fr-insp__card, .fr-insp__card[data-pos="above"] { --insp-sheet: 1; left: 0; right: 0; top: auto; bottom: 0; width: auto; transform: translateY(100%); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18); } .fr-insp__card.is-open { transform: translateY(0); } .fr-insp__card-img { flex-basis: 78px; } .fr-insp__card-body { padding: 12px 14px; } } @media (max-width: 999px) { .fr-insp__row--3 .fr-insp__card, .fr-insp__row--3 .fr-insp__card[data-pos="above"] { --insp-sheet: 1; left: 0; right: 0; top: auto; bottom: 0; width: auto; transform: translateY(100%); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18); } .fr-insp__row--3 .fr-insp__card.is-open { transform: translateY(0); } .fr-insp__row--3 .fr-insp__card-img { flex-basis: 78px; } .fr-insp__row--3 .fr-insp__card-body { padding: 12px 14px; } } /* ---- show more ----------------------------------------------------------- */ .fr-insp__more { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: clamp(28px, 4vw, 48px) auto 0; max-width: 320px; } .fr-insp__progress { width: 100%; height: 2px; background: var(--hairline-soft, #e5e5e5); overflow: hidden; } .fr-insp__progress i { display: block; height: 100%; background: var(--ink, #111); transition: width 320ms ease; } .fr-insp__count { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); } .fr-insp__more-btn { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.72rem 1.9rem; border: 1px solid var(--ink, #111); background: transparent; color: var(--ink, #111); cursor: pointer; transition: background 160ms ease, color 160ms ease; } .fr-insp__more-btn:hover { background: var(--ink, #111); color: var(--on-primary, #fff); } .fr-insp__more-btn:focus-visible { outline: 2px solid var(--ink, #111); outline-offset: 3px; } .fr-insp__more[hidden] { display: none; }