/** * Group slider — photo frame. * * The card photo always keeps a fixed warm background and clips its image, and * when a card has no image it shows the Curel logo centered and faded, exactly * like the staging `.photo` component. This can't be expressed with Tailwind * utilities alone (the ::before logo placeholder + :has() image test need a * real rule), so it ships as a small dedicated class. Aspect ratio stays a * Tailwind utility on the same element (aspect-[5/6] for block 1, aspect-[3/4] * for block 2), set per block in the render. * * Colors mirror the staging theme: warm #F4F2EE, dark #1A1A1A. */ .curel-group-photo { background-color: #F4F2EE; position: relative; overflow: hidden; } /* No image (and no video): show the faded, centered logo placeholder. */ .curel-group-photo:not(:has(img)):not(:has(video))::before { content: ""; position: absolute; inset: 0; background: url("../img/curel-logo.svg") center / 28% no-repeat; opacity: 0.12; filter: grayscale(1); pointer-events: none; } /* Dark variant (reserved; matches staging .photo.is-dark). */ .curel-group-photo.is-dark { background-color: #1A1A1A; } .curel-group-photo.is-dark:not(:has(img)):not(:has(video))::before { filter: grayscale(1) invert(1); opacity: 0.18; } /* Product image fit, shared by every product image (shop cards, featured/related sliders, PDP gallery, sticky-bar thumb, …). Scale the image to the frame height at its natural width, centred in the frame. width/height are forced because Oxygen's global "img { height: auto }" otherwise wins; the frame (.curel-group-photo) is position:relative + overflow:hidden, so an image wider than the frame is centred and clipped instead of distorting it. */ .cur-card-fit img { width: auto !important; height: auto !important; max-height: 90%; max-width: 90% !important; position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% ); } /* Featured price: the small grey "desde" sits just above the price (without shifting it, so the price stays aligned with the name), shown only when the product has more than one blade size. */ .cur-price-from { position: absolute; top: -12px; right: 0; font-size: 10px; line-height: 1; color: var(--color-muted, #9a9a9a); } /* Scroll track: hide the native scrollbar (cards scroll-snap horizontally). */ [data-curel-group-track] { scrollbar-width: none; } [data-curel-group-track]::-webkit-scrollbar { display: none; } /* Headings. * * Oxygen scopes its own heading sizes to its containers and, being unlayered, * overrides the Tailwind size utilities (Winden emits those inside * @layer utilities, which always loses to unlayered author rules). Re-assert * the staging sizes, scoped to the slider, so the titles match regardless of * the surrounding Oxygen template. */ .cur-group-slider h2 { font-size: clamp(32px, 4.4vw, 64px) !important; line-height: 1.04 !important; letter-spacing: -0.025em; font-weight: 700; } /* Single-layout card. * * Width scales continuously and monotonically with the total item count via * --cur-card-w (a unitless px value set per slider in curel_render_slider): * few items -> big/tall cards, many items -> small/short cards (the 5:6 photo * makes the height follow width). The card is a container so its title scales * with it. Three viewport tiers: mobile is a count-independent vw clamp (one * card + peek); tablet caps the count width at 62vw so a big card is never * cramped on a narrow screen (it scrolls either way); desktop applies the full * count width. The cap is vw, not cqw, on purpose: only the card establishes a * query container, so cqw would resolve against the card itself and break. */ .cur-slider-card { flex: 0 0 auto; container-type: inline-size; width: clamp(260px, 84vw, 340px); /* mobile (<640): one card + small peek */ } @media (min-width: 640px) { .cur-slider-card { /* Tablet (640-1023): count-driven width, capped at 62vw. */ width: min(calc(var(--cur-card-w, 420) * 1px), 62vw); } } @media (min-width: 1024px) { .cur-slider-card { /* Desktop (>=1024): full count-driven width, clamped to a safe range. */ width: clamp(300px, calc(var(--cur-card-w, 420) * 1px), 560px); } } /* Card title scales with the card width (container query; cqi = 1% of card width); the meta, price and description keep their fixed Tailwind size. K=5.2: the 520px feature card reads ~27px, n=5 (476px) ~24.8px, dense cards floor at 18px. Re-asserted against Oxygen's unlayered heading rules. */ .cur-slider-card-title { font-size: clamp(18px, 5.2cqi, 28px) !important; line-height: 1.04 !important; letter-spacing: -0.025em; font-weight: 700; position: relative; width: fit-content; /* shrink to the text so the underline matches its width */ padding-bottom: 5px; /* reserve room below the text so the hover underline always sits inside the title box. Cards whose title is the last element (no description, e.g. the "Por linha" slider) would otherwise drop the underline outside the card, where the track's overflow (overflow-x:auto forces the y axis to clip) hides it. */ } /* Animated underline on hover, like staging: a 1px line under the title that grows from the left when the card is hovered (scaleX 0 -> 1) and retracts the same way on leave, with the staging easing/timing. */ .cur-slider-card-title::after { content: ""; position: absolute; left: 0; bottom: 2px; /* inside the title's padding-bottom, so it never clips */ width: 100%; height: 1px; background-color: var(--color-fg, #0a0a0a); transform: scaleX(0); transform-origin: left center; transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1); } .cur-slider-card:hover .cur-slider-card-title::after { transform: scaleX(1); } /* Nav buttons (prev / next circles). * * Match the staging reference: no resting border, but a dark fill with a white * arrow on hover (the Tailwind hover:bg-fg / hover:text-white utilities, which * compile and apply on dev). On staging a