/* ==========================================================================
KB Home Vision (Section 02) — Atlasyn × Khaoula Bouabidi
Scoped strictly to .kb-home-vision. All values driven by tokens.css.
Desktop composition (final):
Section outer: full-bleed Porcelain surface, padded 100px top + 100px
bottom using the canonical --kb-section-space-desktop token so the
visible gap between the approved Hero and this section is exactly
the design-system spacing — no Elementor container margin, no
duplicate theme padding, no arbitrary offset.
Inner composition: aligned to var(--kb-content-width) (1140px),
two-column CSS grid split ~43% / ~57% (left content, right
collage). Left column stacks editorial copy (eyebrow / title /
paragraph / single Gold outline CTA at the bottom). Right column
is a position:relative artboard with aspect-ratio 0.92 / 1 —
a transparent surface, no beige panel, no inner frame, no
padding box — that hosts seven transparent cutout layers
(botanical / sketch / fabric / swatch / atelier / craft / note)
placed at percentage positions with intentional physical overlap.
Elementor contract: every collage image is still a real ![]()
selected through the existing MEDIA content controls. No inline
style="background-image:..." is ever emitted by the widget. All
visual layering lives here in the child-theme CSS. Figures have
NO background, padding, border, radius, shadow or overflow — they
exist only for position, width and z-index, so the transparent
pixels of each PNG are preserved exactly.
========================================================================== */
/* ==========================================================================
FULL-BLEED ESCAPE — Section 02
------------------------------------------------------------
Mirrors the Hero full-bleed pattern so the section spans the
true viewport width while its inner composition is aligned to
the 1140px content frame. Without this reset, the parent theme's
.atlasyn-container and Elementor's .e-con would center the
section with large side margins and add default block padding
on top of our own 100px, accidentally producing a 200px gap.
Scoped strictly via :has(.kb-home-vision) so unrelated page
.e-con containers stay untouched.
========================================================================== */
.e-con:has(.kb-home-vision) {
--container-default-width: 100% !important;
--container-max-width: 100% !important;
--container-default-padding: 0px !important;
--container-default-padding-block: 0px !important;
--container-default-padding-inline: 0px !important;
width: 100% !important;
max-width: 100% !important;
margin-inline: 0 !important;
padding-inline: 0 !important;
padding-block: 0 !important;
}
.e-con:has(.kb-home-vision) > .e-con-inner {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
--container-default-padding: 0px !important;
--container-default-padding-block: 0px !important;
--container-default-padding-inline: 0px !important;
}
/* ==========================================================================
Section root
Single source of truth for the 100px gap to the Hero above AND the
100px gap to the next section below. Elementor / theme / .e-con
padding is already neutralized above.
========================================================================== */
.kb-home-vision {
position: relative;
width: 100%;
background-color: var(--kb-porcelain);
color: var(--kb-ink);
/* Exact design-system gap. The Hero above owns no bottom margin
and the .e-con around this section is reset to padding 0, so
this single top-only declaration creates the one controlled
100px visual gap required between the Hero and Section 02.
The next section (Section 03) will own its own top padding. */
padding-top: var(--kb-section-space-desktop);
overflow: hidden;
}
/* ==========================================================================
Inner composition — 1140px content frame
Two-column grid: left editorial copy (~43fr) + right collage stage
(~57fr). Same 1140px ceiling as the global token, no side gutters
above 1140px. Centered horizontally.
========================================================================== */
.kb-home-vision__inner {
width: 100%;
max-width: var(--kb-content-width);
margin-inline: auto;
display: grid;
grid-template-columns: 43fr 57fr;
column-gap: var(--kb-grid-gap-desktop);
align-items: center;
position: relative;
z-index: 1;
}
/* ==========================================================================
Left column wrapper — desktop only
------------------------------------------------------------
The left block is now a single grid cell containing the
.kb-home-vision__copy wrapper, which itself holds the
eyebrow / title / paragraph / CTA as a single flex column.
Keeping the grid keeps the collage + left block perfectly
co-aligned in the inner composition (both anchored to the
same grid row, identical vertical bounds). The copy block
is anchored to the bottom of its cell (align-self: end) so
the editorial text + CTA sit visually flush with the
collage, exactly as in the original two-row layout, while
the entire group reveals as ONE object via the copy's
data-kb-reveal.
On mobile (≤ 767px) the wrapper is set to display:contents
so copy and collage become direct flex siblings and can be
reordered via `order` to:
copy (text + CTA) → collage
while the canonical CTA itself is NOT duplicated and the
collage still animates as ONE object.
========================================================================== */
.kb-home-vision__left {
display: grid;
grid-template-rows: 1fr;
min-width: 0;
}
/* ==========================================================================
Left content column
Vertical rhythm follows the editorial hierarchy:
eyebrow -> title -> paragraph -> CTA. The CTA is now a
flex child of this column, so the text margin is 0 and
the text → CTA gap is owned by the cta-wrap margin-top
(--kb-space-xl on desktop, --kb-space-l on mobile).
========================================================================== */
.kb-home-vision__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
align-self: end; /* Anchor to bottom of row 1 (text sits flush at the gap) */
}
.kb-home-vision__eyebrow {
/* No-op — typography / color / spacing owned by .kb-section-eyebrow. */
}
.kb-home-vision__title {
margin: 0 0 var(--kb-space-l) 0;
font-family: var(--kb-font-display);
font-size: 44px;
font-weight: 300;
line-height: 1.1;
letter-spacing: -0.005em;
color: var(--kb-ink);
text-wrap: balance;
max-width: 18ch;
}
.kb-home-vision__text {
margin: 0; /* Desktop: gap to CTA is now the cta-wrap margin-top, not the text margin */
font-family: var(--kb-font-body);
font-size: 15px;
font-weight: 400;
line-height: 1.7;
color: var(--kb-ink);
max-width: 44ch;
text-wrap: pretty;
}
/* CTA now lives INSIDE the copy flex column so the entire
eyebrow / title / paragraph / CTA group animates as ONE
object via the .kb-home-vision__copy reveal. The previous
grid row 2 / align-self:start positioning is therefore
obsolete; the text → CTA gap is owned here by margin-top. */
.kb-home-vision__cta-wrap {
margin-top: var(--kb-space-xl);
}
/* ==========================================================================
CTA — canonical Gold outline (matches Hero secondary CTA)
Transparent ground, 1px Gold frame, square corners, 54px height,
28px inline padding, Montserrat 13px / 500, 0.12em tracking,
uppercase. Hover: Gold ground + Ink label. State cascade split so
a click on a coarse-pointer device cannot get the button stuck in
its filled state (same fix as the Hero secondary CTA).
========================================================================== */
.kb-home-vision__cta,
.kb-home-vision__cta:visited {
background-color: transparent;
color: var(--kb-gold);
border-color: var(--kb-gold);
transition:
background-color var(--kb-transition-button),
color var(--kb-transition-button),
border-color var(--kb-transition-button);
}
.kb-home-vision__cta:active {
background-color: var(--kb-gold);
color: var(--kb-ink);
border-color: var(--kb-gold);
}
.kb-home-vision__cta:focus-visible {
background-color: transparent;
color: var(--kb-gold);
border-color: var(--kb-gold);
outline: 2px solid var(--kb-gold);
outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
.kb-home-vision__cta:hover {
background-color: var(--kb-gold);
color: var(--kb-ink);
border-color: var(--kb-gold);
}
}
/* ==========================================================================
Right collage stage
Single relative artboard. The section background (var(--kb-porcelain))
shows directly through the collage — there is no beige panel, no
inner frame, no padding box. Every layer is a transparent cutout
PNG placed on the section's own surface. aspect-ratio: 0.92 / 1
(≈ 0.92 width per 1 height, so the artboard is slightly taller
than wide) follows the proportions of the supplied reference.
========================================================================== */
.kb-home-vision__collage {
position: relative;
width: 100%;
aspect-ratio: 0.92 / 1;
background: transparent;
}
/* ==========================================================================
Collage layer base
Wrappers exist ONLY for: position, width, z-index. No background,
no padding, no border, no radius, no overflow, no shadow. The
transparent cutout PNGs already contain their own postcard
borders / zig-zag textile edges; the CSS must not add or crop
any of that. The ![]()
renders at its natural aspect ratio
(display:block, width:100%, height:auto) so the transparent
pixels are preserved and nothing is distorted.
========================================================================== */
.kb-home-vision__collage figure {
position: absolute;
margin: 0;
background: transparent;
padding: 0;
border: 0;
box-shadow: none;
overflow: visible;
}
.kb-home-vision__collage figure img {
display: block;
width: 100%;
height: auto;
max-width: none;
background: transparent;
}
/* The decorative is no longer
rendered as a filled ground — it is kept in the DOM only as a
forward-compatible hook. It must NEVER paint a beige panel, so
the rule below is the explicit no-op that documents the intent. */
.kb-home-vision__paper {
display: none;
}
/* ==========================================================================
Collage layer positions (z-index ascending, top of stack last)
All values are percentages of the .kb-home-vision__collage stage.
Percentages are the source of truth so the same composition scales
cleanly between 1280 / 1440 / 1920 desktop widths. No hardcoded
pixel coordinates for individual layers.
No explicit height on the figures — the ![]()
inside renders at
its natural aspect ratio (display:block; width:100%; height:auto)
so transparent cutouts are never distorted and never cropped by
a too-short figure box.
========================================================================== */
/* Botanical line art — faint printed drawing on the page, partially
behind the lower collage. Pushed even farther LEFT in this pass
(left: -8% → -12%) so the flower is more clearly visible along
/ just outside the lower-left edge of the collage, and a smaller
portion of it is covered by the craftsmanship image. Width
intentionally NOT increased (still subtle and elegant). */
.kb-home-vision__botanical {
left: -12%;
bottom: 0;
width: 46%;
z-index: 1;
pointer-events: none;
opacity: 0.4;
}
/* Bordeaux embroidery / textile swatch — STILL tucked BEHIND the
central couture sketch (z-index 2 < sketch z-index 4) so the
swatch remains clearly hidden under the sketch in the overlap
while still visible on the far left. Width ENLARGED again in
this pass (47% → 55%, ≈ +17% relative) so the swatch extends
even farther downward and further reduces the empty space
between the upper group and the lower craftsmanship photo. */
.kb-home-vision__swatch {
left: 0;
top: 3%;
width: 55%;
z-index: 2;
}
/* Couture sketch — unchanged. z-index 4 keeps the sketch ABOVE
the swatch (z-index 2) and BELOW the atelier (z-index 5),
matching the required back-to-front order. The sketch may
extend downward behind the atelier, the fabric / logo and
the craftsmanship image. */
.kb-home-vision__sketch {
left: 22%;
top: 0;
width: 52%;
z-index: 4;
}
/* Atelier / mannequin postcard — DEMOTED from z-index 10 to
z-index 5 in this pass so the atelier is now TUCKED UNDER
the ivory fabric / Bordeaux logo asset (z-index 6). The
atelier remains visible (it is still a small physical
postcard on top of the moodboard), but the fabric block
now sits on top of the atelier in the right-side overlap.
Atelier also remains above the swatch (2) and the sketch
(4). SIZE UNCHANGED. */
.kb-home-vision__atelier {
left: 24%;
top: 38%;
width: 32%;
z-index: 5;
}
/* Ivory fabric + Bordeaux logo — PROMOTED from z-index 4 to
z-index 6 in this pass so the fabric block now sits ABOVE
the atelier (z-index 5) in the right-side overlap, matching
the required atelier < fabric relationship. The fabric /
logo remains below the craftsmanship (z-index 8) and below
the editorial note (z-index 11). Folds, Bordeaux section
and gold logo all stay visible. */
.kb-home-vision__fabric {
right: 0;
top: 1%;
width: 67%;
z-index: 6;
}
/* Craftsmanship / handwork postcard — unchanged. Width 68% as
the dominant lower visual anchor, z-index 8 (above the
upper collage, below the atelier's old stacking — now
simply above the upper collage and below the note).
The wrapper now constrains the figure to the available
space below its top: 56% anchor (height 44% = the remaining
44% of the artboard). overflow: hidden on the figure clips
the image at the figure's bottom edge, and the inner ![]()
fills the figure with object-fit: cover + object-position:
center bottom, so the BOTTOM of the craftsmanship photo is
always shown instead of the center. The figure selector
(figure.kb-home-vision__craft) matches the specificity of
the base .kb-home-vision__collage figure rule so this
override wins. */
.kb-home-vision__craft,
figure.kb-home-vision__craft {
left: 14%;
top: 56%;
width: 68%;
height: 44%;
z-index: 8;
overflow: hidden;
}
.kb-home-vision__craft img,
figure.kb-home-vision__craft img {
height: 100%;
object-fit: fill;
object-position: center bottom;
}
/* ==========================================================================
Paper note — real HTML, not an image.
Lower-right, partially overlapping the craftsmanship postcard.
This is the one element that intentionally has a paper surface
(slightly differentiated from the section Porcelain using a
touch of Gold), because it IS a paper note. No radius. Only a
tiny editorial shadow so it does not float on the page.
========================================================================== */
.kb-home-vision__note {
position: absolute;
right: 0;
top: 68%;
width: 28%;
z-index: 11;
background-color: color-mix(in srgb, var(--kb-porcelain) 96%, var(--kb-gold) 4%);
padding: var(--kb-space-m) var(--kb-space-s);
box-shadow:
0 1px 0 color-mix(in srgb, var(--kb-ink) 8%, transparent),
0 8px 18px -14px color-mix(in srgb, var(--kb-ink) 22%, transparent);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--kb-space-s);
}
.kb-home-vision__note-primary {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
font-family: var(--kb-font-body);
font-size: 12px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--kb-ink);
}
.kb-home-vision__note-primary span {
display: block;
}
.kb-home-vision__note-secondary {
margin: 0;
padding-top: 10px;
border-top: 1px solid color-mix(in srgb, var(--kb-ink) 18%, transparent);
font-family: var(--kb-font-body);
font-size: 9px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--kb-ink);
width: 100%;
}
/* ==========================================================================
Tablet (≤ 1199px)
Only basic overflow protection. The full mobile design for
Section 02 will be done in a separate pass after desktop is
approved — per spec, this block is a guard rail, not a redesign.
========================================================================== */
@media (max-width: 1199px) {
/* Promote the design-system tablet section spacing so the
section-to-section gap is also controlled by the token, not
by a hardcoded 80px. */
.kb-home-vision {
padding-top: var(--kb-section-space-tablet);
}
/* Pull the inner grid inward with the tablet gutter so the
content never collides with the viewport edge. */
.kb-home-vision__inner {
padding-inline: var(--kb-gutter-tablet);
}
.kb-home-vision__title {
font-size: 44px;
}
.kb-home-vision__text {
font-size: 15px;
max-width: 40ch;
}
/* Stack the two columns vertically below 1024px so the
collage never has to compete with the copy at narrow
tablet widths. The collage keeps its 0.92 / 1 aspect
ratio; the copy now sits above the stage with the
same internal rhythm. */
@media (max-width: 1024px) {
.kb-home-vision__inner {
grid-template-columns: 1fr;
row-gap: var(--kb-space-xl);
}
.kb-home-vision__collage {
max-width: 640px;
margin-inline: auto;
width: 100%;
}
}
}
/* ==========================================================================
Tablet (768px – 1024px) — typography refinement
------------------------------------------------------------
Narrower override on top of the wider tablet band (≤ 1199px)
above so the section title reads as the visual middle point
between the desktop 44px and the mobile 36px specs. Body text
stays at 15px (same as desktop and the wider tablet band).
The eyebrow is owned by .kb-section-eyebrow in base.css.
========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
.kb-home-vision__title {
font-size: 40px;
}
}
/* ==========================================================================
Mobile (≤ 767px)
------------------------------------------------------------
Final mobile order (locked):
1. eyebrow
2. title
3. paragraph
4. full editorial collage (as ONE object)
5. CTA — last meaningful content element
Implementation: the left wrapper (which on desktop groups
copy + CTA inside the left grid column) is flattened via
`display: contents`, making copy and CTA direct flex
siblings of the collage. The collage is then placed between
the text block and the CTA using `order` — no markup
duplication, no absolute positioning, no new CTA.
The collage still receives its own single reveal animation.
The CTA reveals softly after the collage, consistent with
the global motion system (no dramatic stagger).
========================================================================== */
@media (max-width: 767px) {
.kb-home-vision {
padding-top: var(--kb-section-space-mobile);
}
/* Inner becomes a single vertical flow on mobile. The
left wrapper is flattened (display: contents) so copy,
collage and CTA become direct flex children and can
be reordered cleanly via `order`. */
.kb-home-vision__inner {
display: flex;
flex-direction: column;
align-items: stretch;
padding-inline: var(--kb-gutter-mobile);
}
.kb-home-vision__left {
display: contents;
}
/* Final mobile order: copy (which now contains text + CTA)
→ collage. The CTA is no longer a direct flex child, so
it inherits its position from inside the copy column. */
.kb-home-vision__copy { order: 1; align-self: stretch; }
.kb-home-vision__collage { order: 2; align-self: stretch; }
/* CTA is now inside the copy column, so width: 100% keeps
the full-bleed mobile feel. margin-top provides the gap
from the paragraph above. */
.kb-home-vision__cta-wrap {
margin-top: var(--kb-space-l); /* text → CTA gap on mobile */
}
.kb-home-vision__cta {
width: 100%; /* spec: full-bleed mobile CTA */
}
/* Reset the desktop `align-self: end` on the copy — in the
flex context that grid property would otherwise right-align
the item. cta-wrap is now inside copy so its own align-self
is irrelevant at this level. */
.kb-home-vision__copy {
align-self: stretch;
}
.kb-home-vision__title {
font-size: 36px;
max-width: none;
margin-bottom: var(--kb-space-m); /* spec: title → paragraph = --kb-space-m */
}
/* On mobile the text margin-bottom is 0 because the CTA now
sits between the text and the collage (inside the copy
flex column). The text → CTA gap is owned by the cta-wrap
margin-top, and the copy group → collage gap is owned by
the collage margin-top below. */
.kb-home-vision__text {
font-size: 15px;
max-width: none;
margin: 0;
}
.kb-home-vision__collage {
max-width: 100%;
margin-top: var(--kb-space-l); /* copy group → collage on mobile */
}
/* ------------------------------------------------------------------
Mobile paper-note micro-fix.
1) Widen the note slightly (36%) so the editorial letter-spacing
on COMPRENDRE never pushes outside the card at 390/375/360.
2) Trim inner padding so the same word fits inside the card.
3) Drop primary typography to 10px / 0.16em / 1.8 with
white-space:nowrap so each keyword stays on its own line
and never breaks mid-word.
4) Shrink + center the secondary line and let it wrap naturally
to "L'ESSENCE DE / CHAQUE FEMME".
Desktop is intentionally untouched.
------------------------------------------------------------------ */
.kb-home-vision__note {
width: 36%;
padding: 12px 10px;
gap: 10px;
}
.kb-home-vision__note-primary {
font-size: 10px;
letter-spacing: 0.16em;
line-height: 1.8;
white-space: nowrap;
}
.kb-home-vision__note-secondary {
font-size: 8px;
letter-spacing: 0.14em;
line-height: 1.5;
padding-top: 8px;
text-align: center;
}
}
/* ==========================================================================
SECTION 02 — SCROLL REVEAL
------------------------------------------------------------
When the section enters the viewport, two visual groups animate
as their own editorial units. The collage is ONE single object
(per spec) — no child receives its own entrance transform.
Stagger (desktop):
0ms — Left content (fade-up, 900ms, translateY 20px → 0)
150ms — Collage rises + barely-perceptible scale (1050ms,
translateY 24px → 0, scale 0.99 → 1)
Stagger (mobile):
Distance shortened to 14px (handled in base.css), collage keeps
its 16px mobile rise and drops the scale so the small-screen
composition doesn't feel like a "card lift" — it just softly
rises into place. Durations: copy 800ms, collage 900ms,
delay 120ms.
Collage children — swatch / sketch / fabric / atelier / craft /
note / botanical — receive NO individual entrance. The reveal
attribute lives ONLY on .kb-home-vision__collage, and its single
transform composes the whole stack as one art-directed object.
========================================================================== */
.kb-home-vision__copy[data-kb-reveal="fade-up"] {
--kb-reveal-distance: 28px; /* spec: 28px → 0, more noticeable */
transition-delay: 0ms;
transition-duration: 1000ms; /* spec: 1000ms */
}
html.kb-reveal-ready .kb-home-vision__collage[data-kb-reveal="fade-up"] {
transition-delay: 150ms;
transition-duration: 1050ms;
/* The collage reuses the fade-up attribute but adds a tiny
additional scale (0.99 → 1) on top of the 20px base rise.
The selector is upgraded to `html.kb-reveal-ready …` so it
outranks the generic base.css `html.kb-reveal-ready
[data-kb-reveal="fade-up"]` rule (0,2,1 vs 0,2,0) and the
composed initial transform actually applies. */
transform: translate3d(0, 24px, 0) scale(0.99);
}
html.kb-reveal-ready .kb-home-vision__collage[data-kb-reveal="fade-up"].is-revealed {
transform: none;
}
@media (max-width: 767px) {
.kb-home-vision__copy[data-kb-reveal="fade-up"] {
--kb-reveal-distance: 18px; /* spec: 18px → 0 */
transition-duration: 900ms; /* spec: 900ms */
}
html.kb-reveal-ready .kb-home-vision__collage[data-kb-reveal="fade-up"] {
transition-delay: 120ms;
transition-duration: 900ms;
/* Mobile collage: 16px rise (base.css mobile default is 14px,
but the collage intentionally keeps its own 16px rise so
the dominant artboard feels slightly more present). Scale
is omitted — the small-screen composition just rises
softly into place. */
transform: translate3d(0, 16px, 0);
}
}