wrappers and animates
their geometry via the Web Animations API.
========================================================================== */
.kb-services-daywear__carousel {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0; /* allow shrink inside grid column */
margin: 0;
padding: 0;
overflow: hidden; /* final overflow guard for the column */
/* Section 03 stacking context contract: the carousel
owns its own stacking context so the motion-clone
wrappers (z-index 30/20/10) stack predictably
without bleeding through the section root. */
z-index: 50;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.kb-services-daywear__viewport {
position: relative;
width: 100%;
/* Stretches to the row height (defined by the copy
column via grid align-items: stretch). This makes
the active image's top = eyebrow top and its
bottom = editorial link bottom. */
height: 100%;
flex: 1 1 auto;
min-height: 0;
margin: 0;
padding: 0;
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: hidden;
min-width: 0;
/* CSS Grid stage — single source of truth for the 3-slot
geometry. Columns sum to 100% with two 2% gutters. The
row fills the viewport height; align-items: center
guarantees that side slots (height 60%) sit at the
vertical center of the row, automatically aligned to
the active slot's vertical center. NO top: 50% / NO
translateY(-50%) hacks — those rely on a positioning
context whose height is independent of the active
image. */
display: grid;
grid-template-columns: 22% 2% 52% 2% 22%;
grid-template-rows: 100%;
align-items: center;
}
/* ==========================================================================
SLOT BASE — fixed-size figure wrapper.
------------------------------------------------------------
Each slot is a stable box that NEVER changes dimensions
during a swap. Inside the slot, the ![]()
current layer
absolutely fills the slot box. The motion-clone system
never writes to the slot's own ![]()
during the 650ms
animation; the JS clones the ![]()
into a wrapper and
animates the wrapper geometry instead.
Initial paint: PHP renders the current layer with the
correct src + alt so all three images are visible in
the first HTML response, BEFORE any JavaScript runs.
JS only ENHANCES the already-correct initial state.
========================================================================== */
.kb-services-daywear__slot {
position: relative;
margin: 0;
padding: 0;
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: hidden;
min-width: 0;
min-height: 0;
}
/* ---- Prev slot : smaller preview, vertically centered -------- */
.kb-services-daywear__slot--prev {
grid-column: 1;
/* Side previews occupy 60% of the row height and align
themselves to the vertical center of the row, which
equals the active slot's vertical center. This is
true geometric centering — no transform offset. */
align-self: center;
height: 60%;
width: 100%;
}
/* ---- Active slot : dominant center, fills the full row -------- */
.kb-services-daywear__slot--active {
grid-column: 3;
/* The active slot fills the entire row height, so its
top edge = viewport top = eyebrow top, and its
bottom edge = viewport bottom = editorial link
bottom. The side slots are centered against it. */
align-self: stretch;
height: 100%;
width: 100%;
z-index: 2;
}
/* ---- Next slot : smaller preview, vertically centered -------- */
.kb-services-daywear__slot--next {
grid-column: 5;
align-self: center;
height: 60%;
width: 100%;
}
/* ---- Reveal isolation guard ---------------------------------
The page-load reveal system (base.css [data-kb-reveal])
targets opacity + transform with its own duration. We
explicitly opt the internal carousel elements OUT of any
such rule by locking opacity:1, transform: translate3d(0,
0, 0), and a no-op transition. The slot figure is a stable
box; the layers only own the carousel transition declared
further down. Specificity (0, 3, 0) outranks the (0, 2, 1)
reveal base rule. */
.kb-services-daywear__carousel .kb-services-daywear__slot,
.kb-services-daywear__carousel .kb-services-daywear__slot-current,
.kb-services-daywear__carousel .kb-services-daywear__slot-incoming {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* The slot figure itself never animates — it is a fixed
box. Only the inner layers own the carousel transition.
This kills any inherited reveal transition on the slot. */
.kb-services-daywear__carousel .kb-services-daywear__slot {
transition: none;
}
/* ==========================================================================
SLOT → IMG SIZING CONTRACT (Section 03 port)
------------------------------------------------------------
The slot figure is a stable frame that NEVER changes
dimensions. The inner ![]()
layers absolutely fill that
frame. The direct-child `>` selector (specificity 0,2,0)
defeats the base.css `img { max-width: 100%; height: auto }`
rule (specificity 0,0,1) which would otherwise let the
slot size follow the intrinsic image size during the src
swap and cause the real center image to "shrink then
snap" after handoff. With `max-width: none; max-height:
none` enforced here, the slot owns the box and the img
only fills it — geometry is source-independent.
========================================================================== */
.kb-services-daywear__slot > .kb-services-daywear__slot-current,
.kb-services-daywear__slot > .kb-services-daywear__slot-incoming {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
display: block;
object-fit: cover;
object-position: center;
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
pointer-events: none;
transform: none;
}
.kb-services-daywear__slot-current {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* ==========================================================================
BROKEN-IMAGE FIX (Section 03 port)
------------------------------------------------------------
The PHP template renders BOTH __slot-current (with proper
src/alt) AND __slot-incoming (with empty src) per slot.
On browsers that show a broken-image placeholder for an
![]()
with src="", the unused __slot-incoming elements
rendered a small broken-image icon. Hide them completely
so the carousel contains NO broken-image placeholders.
The motion-clone system does not use these layers at all
(the JS clones the real ![]()
into motion wrappers), so
removing them visually has no functional impact.
========================================================================== */
.kb-services-daywear__slot-incoming {
display: none !important;
}
/* ==========================================================================
MOTION CLONE WRAPPER (Section 03 port)
------------------------------------------------------------
The JS creates one neutral
wrapper per slot, clones
the real ![]()
INTO the wrapper, and animates the wrapper
geometry (left/top/width/height) via the Web Animations
API. The wrapper owns ALL geometry; the inner ![]()
is
forced to 100% x 100% via inline styles + CSS `!important`
so the inner image CANNOT influence the wrapper's
intrinsic size (which would otherwise cause the moving
photo to "grow taller then snap back" at handoff).
The direct-child `>` selector + `!important` defeats any
global `img` rules (e.g. base.css `img { max-width: 100%;
height: auto }`) that could leak through and re-introduce
intrinsic sizing.
========================================================================== */
.kb-services-daywear__motion-clone {
display: block;
}
.kb-services-daywear__motion-clone > img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
object-fit: cover;
object-position: center;
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
transform: none !important;
}
/* ==========================================================================
SIDE BLUR — static editorial depth cue (Section 03 port)
------------------------------------------------------------
The two side previews (prev / next) carry a small static
blur for an editorial depth cue. The active (center)
image is always crisp (filter: none). The blur is NEVER
animated or transitioned. The .kb-services-daywear
rule below targets the ![]()
directly so it overrides
the `filter: none` on the base layer rule above.
========================================================================== */
.kb-services-daywear__slot--prev img,
.kb-services-daywear__slot--next img {
filter: blur(1.5px);
}
.kb-services-daywear__slot--active img {
filter: none;
}
/* ==========================================================================
NAV CONTROLS — canonical Gold-filled (default = former hover)
/ Gold arrow / square / 56x56 buttons. Reuses the EXACT
vocabulary from .kb-home-creations__nav-btn and the
Marriage carousel.
------------------------------------------------------------
Previous control sits visually at the transition between
prev ↔ active. Next control sits visually at the transition
between active ↔ next. They are vertically centered relative
to the carousel viewport.
Desktop positioning:
- prev : left: calc(23% - 28px) — centered on the
prev↔active transition (the 2% gap centered
at 23% of the carousel width)
- next : right: calc(23% - 28px) — centered on the
active↔next transition (100% - 77% = 23%)
The buttons are visually anchored to the prev↔active
and active↔next transitions (NOT inside the active
slide body), straddling the boundary between the
preview and the dominant center. They feel intentional
rather than floating. Layered above the active slide
via the nav's z-index.
========================================================================== */
.kb-services-daywear__nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
/* Matches the viewport height (100% of the row) so the
buttons stay vertically centered against the active
image at any row height. */
height: 100%;
/* Layer the nav above the active slide AND above the
body-appended motion clones. The motion clones are
appended to at z-index 10 / 20 / 30. The
carousel creates a stacking context at z-index 50
(see .kb-services-daywear__carousel). Inside that
context, this nav layer at z-index 200 is well above
the viewport (auto) and the active slot (z-index 2),
so the arrows stay visually above the moving
transition images for the entire 650ms motion.
The .kb-services-daywear__inner layer intentionally
has no z-index so this 200 propagates to the body
stacking context and wins over the motion clones'
10/20/30. */
z-index: 200;
pointer-events: none;
margin: 0;
padding: 0;
}
.kb-services-daywear__nav-btn {
position: absolute;
top: 50%;
appearance: none;
-webkit-appearance: none;
width: 56px;
height: 56px;
padding: 0;
margin: 0;
/* DEFAULT = FORMER HOVER STATE.
The arrow buttons are ALWAYS filled with Gold ground,
Ink arrow, and a 1px Gold border. This matches the
canonical visual weight of the project so the
controls are never faint. The :hover block below
keeps the same surface so the buttons never change
appearance on hover (no flicker, no jump). */
background: var(--kb-gold);
color: var(--kb-ink);
border: 1px solid var(--kb-gold);
border-radius: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
pointer-events: auto;
transform: translateY(-50%);
transition:
background-color 500ms cubic-bezier(0.22, 1, 0.36, 1),
color 500ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 500ms cubic-bezier(0.22, 1, 0.36, 1),
transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.kb-services-daywear__nav-btn:visited {
background: var(--kb-gold);
color: var(--kb-ink);
border-color: var(--kb-gold);
}
.kb-services-daywear__nav-btn:active {
transform: translateY(calc(-50% + 1px));
}
.kb-services-daywear__nav-btn:focus {
outline: none;
}
.kb-services-daywear__nav-btn:focus-visible {
outline: 2px solid var(--kb-gold);
outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
/* Hover state is intentionally identical to the default
so the controls never flicker or change appearance. */
.kb-services-daywear__nav-btn:hover {
background-color: var(--kb-gold);
color: var(--kb-ink);
border-color: var(--kb-gold);
}
}
.kb-services-daywear__nav-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 12px;
color: currentColor;
line-height: 0;
}
.kb-services-daywear__nav-arrow svg {
display: block;
width: 100%;
height: 100%;
color: currentColor;
stroke: currentColor;
fill: currentColor;
}
/* Previous button — centered on the prev↔active transition.
The 2% gap between prev (0–22%) and active (24–76%) is
centered at 23% of the carousel width. With a 56px-wide
button, 28px = button-half, so the button's center sits
exactly on the transition. */
.kb-services-daywear__nav-btn[data-kb-daywear-prev] {
left: calc(23% - 28px);
}
/* Next button — centered on the active↔next transition.
The 2% gap between active (24–76%) and next (78–100%) is
centered at 77%. From the right, that is 100% − 77% = 23%. */
.kb-services-daywear__nav-btn[data-kb-daywear-next] {
right: calc(23% - 28px);
}
/* ==========================================================================
TABLET (≤ 1199px)
------------------------------------------------------------
The 2-column editorial split is preserved on tablet so the
carousel remains functional and the copy stays vertically
centered. The copy column uses the locked 32px tablet
gutter; the carousel column reaches the right edge. The
carousel viewport scales down. Typography stays at the
locked 44px / 15px.
========================================================================== */
@media (max-width: 1199px) {
.kb-services-daywear {
padding-top: var(--kb-section-space-tablet);
}
.kb-services-daywear__layout {
column-gap: 32px;
}
.kb-services-daywear__copy {
/* On tablet, the 1140px content frame no longer
applies; the gutter owns the inset. */
padding-inline-start: var(--kb-gutter-tablet);
padding-inline-end: 0;
max-width: 360px;
}
.kb-services-daywear__eyebrow {
margin-bottom: 28px;
}
.kb-services-daywear__title {
font-size: 44px;
margin-bottom: 28px;
}
.kb-services-daywear__body {
font-size: 15px;
max-width: 34ch;
}
.kb-services-daywear__viewport {
/* Same row-stretch contract as desktop: the
viewport fills the row defined by the copy
column, so the active image's top/bottom
align with the eyebrow/link. */
height: 100%;
}
.kb-services-daywear__nav {
height: 100%;
}
.kb-services-daywear__nav-btn {
width: 48px;
height: 48px;
}
.kb-services-daywear__nav-btn[data-kb-daywear-prev] {
left: calc(23% - 24px);
}
.kb-services-daywear__nav-btn[data-kb-daywear-next] {
right: calc(23% - 24px);
}
}
/* ==========================================================================
MOBILE (≤ 767px)
------------------------------------------------------------
The section is intentionally recomposed to a single column
following the LOCKED mobile order:
1. eyebrow
2. title
3. body
4. editorial link
5. carousel
The grid collapses to a single column and the natural DOM
order takes over. No CSS-order hacks. The 20px mobile
gutter frames the composition.
The mobile carousel intentionally DOES NOT try to squeeze
the desktop 3-image composition into 400px — that would
create tiny unreadable 3-column images. Instead, the
__slot--prev and __slot--next slots are HIDDEN on
mobile, and the __slot--active slot fills the entire
viewport width inside the 20px gutter. The user therefore
sees one substantial active image at a time, with the
arrows controlling the rotation. This is the cleaner
implementation per the project spec.
========================================================================== */
@media (max-width: 767px) {
.kb-services-daywear {
padding-top: 0;
padding-inline: 0;
overflow: hidden;
/* PAINT-ORDER FIX: The Daywear parent sits ~40px above
the Occasion section's natural bottom (the visible
dark Bordeaux padding-bottom tail). Occasion's
positioned layers (z-index 0/1/2/3) participate
above the Daywear background in that overlap
region. Forcing a clean stacking context with
z-index 4 + isolation lets the opaque Porcelain
background paint cleanly above all Occasion layers
without moving any geometry. */
position: relative;
z-index: 4;
isolation: isolate;
}
.kb-services-daywear__inner {
width: calc(100% - 2 * var(--kb-gutter-mobile));
padding-inline: 0;
}
.kb-services-daywear__layout {
display: flex;
flex-direction: column;
align-items: stretch;
row-gap: 0;
column-gap: 0;
}
/* ---- MOBILE ORDER REBUILD ---------------------------------
The locked mobile order is:
1. eyebrow
2. title
3. body
4. CAROUSEL (between body and link)
5. editorial link (CTA, last)
The CTA link lives inside the .__copy wrapper in the
DOM, so to physically move the carousel between body
and link without changing the desktop DOM we use
`display: contents` on the copy wrapper. That makes
eyebrow / title / body / link become direct flex
children of the layout, and explicit `order: N`
values then lock the visual sequence.
The carousel itself is already a direct child of the
layout, so it just needs its own order value. */
.kb-services-daywear__copy {
padding: 0;
margin: 0;
max-width: 100%;
display: contents;
}
.kb-services-daywear__eyebrow {
margin-bottom: 24px;
order: 1;
}
.kb-services-daywear__title {
font-size: 34px;
line-height: 1.1;
margin-bottom: 28px;
order: 2;
}
.kb-services-daywear__body {
max-width: 100%;
font-size: 14px;
/* body → carousel gap = 28px (within 24-32px range) */
margin-bottom: 28px;
order: 3;
}
/* Carousel sits as the 4th visual element on mobile:
after body, before the editorial link. Centered
horizontally via the flex column's stretch alignment
and the carousel's own width: 100% + margin-inline: auto. */
.kb-services-daywear__carousel {
order: 4;
width: 100%;
max-width: 100%;
margin-inline: auto;
}
/* Editorial link is the 5th and last visual element on
mobile. Its margin-top now creates the carousel → link
gap (28px, within 24-32px range). Margin-bottom is 0
because the section's own padding-bottom is 0 and the
next section owns its own top spacing. */
.kb-services-daywear__link {
order: 5;
margin-top: 28px;
margin-bottom: 0;
}
/* Carousel — single active image, full width.
`height: auto` (NOT `0`) so `aspect-ratio: 4 / 5` is
honored: the browser computes the box height from
the width. With `height: 0` the spec says aspect-ratio
is ignored and the box collapses to 0 — that was the
Section 06 mobile invisibility bug. Mirrors the
exact final rule used by the working Section 03. */
.kb-services-daywear__viewport {
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
}
/* On mobile, only the active slot is visible. The prev
and next slots are hidden so the user never sees tiny
unreadable 3-column thumbnails. The carousel JS still
rotates through the data, so the user advances through
the full gallery one substantial image at a time. */
.kb-services-daywear__slot--prev,
.kb-services-daywear__slot--next {
display: none;
}
.kb-services-daywear__slot--active {
grid-column: 1 / -1;
align-self: stretch;
height: 100%;
width: 100%;
transform: none;
}
/* Nav controls — the nav layer uses an absolute inset
that covers the full viewport. The buttons are pinned
to the active slot's left/right edges. The nav height
matches the viewport height in JS-controlled state, but
since the viewport is now an aspect-ratio box, the
buttons are positioned relative to the viewport's actual
height via percentages (handled by the height: 100%
below + the absolute positioning of the buttons). */
.kb-services-daywear__nav {
height: 100%;
}
.kb-services-daywear__nav-btn {
width: 44px;
height: 44px;
}
.kb-services-daywear__nav-btn[data-kb-daywear-prev] {
left: 12px;
}
.kb-services-daywear__nav-btn[data-kb-daywear-next] {
right: 12px;
}
}
/* ==========================================================================
SCROLL REVEAL — Section 06 Services / Daywear Sur Mesure
------------------------------------------------------------
Only the COPY group animates on entrance. The carousel
wrapper is intentionally kept transform-free from first
paint so the motion-clone geometry morph is NEVER
composed with a 28px parent transform.
The reveal system is unchanged. We only bind the existing
fade-up behaviour to the copy group node.
========================================================================== */
.kb-services-daywear__copy[data-kb-reveal="fade-up"] {
--kb-reveal-distance: 20px;
transition-delay: 0ms;
transition-duration: 900ms;
}
/* The carousel wrapper no longer carries data-kb-reveal —
the copy's reveal is the section's one-time entrance. The
wrapper stays transform-free from first paint so the slot
layers' 6px vertical breath is NEVER composed with a 28px
parent transform. */
.kb-services-daywear__carousel {
/* Stable box: no inherited transform, no inherited
transition, no inherited reveal state. */
transform: none;
transition: none;
}
@media (max-width: 767px) {
.kb-services-daywear__copy[data-kb-reveal="fade-up"] {
--kb-reveal-distance: 14px;
transition-duration: 800ms;
transition-delay: 0ms;
}
}
/* ==========================================================================
REDUCED MOTION — no entrance offset, opacity locked to 1.
The motion-clone geometry transition collapses to near-
instant via the JS's isMobile()-style direct switch path
for non-motion contexts; the script still updates state.
Mirrors the convention used by the other KB sections.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.kb-services-daywear [data-kb-reveal] {
opacity: 1 !important;
transform: none !important;
}
}
/* ==========================================================================
EXACT-ID ELEMENTOR WRAPPER RESET — Daywear (555c27f) + Materials (749a4b4)
------------------------------------------------------------
Final surgical fix for the two bad section boundaries on
mobile. Targets ONLY the two exact Elementor container
data-ids supplied from the live rendered DOM. Replaces all
previous :has()-based and widget-level experimental rules.
Each .e-con-inner contains exactly ONE widget, so it does
not need Elementor's flex distribution. Forcing
`display: block` removes every possible source of:
- flex alignment offset
- flex gap (--widgets-spacing-row: 20px leaking)
- justify-content distribution
- height: 100% weirdness
- empty track space above the widget
The full chain is collapsed into plain block flow:
.e-con-inner top
= .elementor-widget top
= .elementor-widget-container top
= .kb-services-{daywear|materials} top
NO element box may intrude between them.
The custom section root keeps its own internal
padding-top: 64px as the single source of breathing room —
this rule does NOT touch that internal padding.
Desktop is untouched: every selector is wrapped in
@media (max-width: 767px) and the custom classes inside
the carousel are never referenced.
========================================================================== */
@media (max-width: 767px) {
/* ---- Section-to-section spacing (MOBILE ONLY) ----
Single reliable source for the 100px gap between
Section 04 / Tenues d'Occasion and Section 05 /
Daywear Sur Mesure. The Elementor inline
`style="margin-top: 100px;"` on the Daywear
parent is the intended value; we make it
explicit + !important here so no later
shorthand can wipe it. */
.elementor-element-555c27f {
margin-top: 100px !important;
}
/* ---- .e-con-inner : display: block, no geometry ---- */
.elementor-element-555c27f > .e-con-inner,
.elementor-element-749a4b4 > .e-con-inner {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
row-gap: 0 !important;
column-gap: 0 !important;
}
/* ---- Direct widget child : zero offsets, relative ---- */
.elementor-element-555c27f > .e-con-inner > .elementor-widget-atlasyn-kb-services-daywear,
.elementor-element-749a4b4 > .e-con-inner > .elementor-widget-atlasyn-kb-services-materials {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
align-self: auto !important;
}
/* ---- .elementor-widget-container : display block ---- */
.elementor-element-555c27f > .e-con-inner > .elementor-widget-atlasyn-kb-services-daywear > .elementor-widget-container,
.elementor-element-749a4b4 > .e-con-inner > .elementor-widget-atlasyn-kb-services-materials > .elementor-widget-container {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
}
/* ---- Custom section root : no external margin ---- */
/* Internal padding-top: 64px stays intact. */
.elementor-element-555c27f > .e-con-inner > .elementor-widget-atlasyn-kb-services-daywear > .elementor-widget-container > .kb-services-daywear,
.elementor-element-749a4b4 > .e-con-inner > .elementor-widget-atlasyn-kb-services-materials > .elementor-widget-container > .kb-services-materials {
margin: 0 !important;
}
}