/* ==========================================================================
KB Home Experience (Section 05) — Atlasyn × Khaoula Bouabidi
Scoped strictly to .kb-home-experience. All values driven by tokens.css.
Composition (final):
Centered 1140px editorial split living inside the project's normal
content frame. The left column (~440px) holds a real atelier ![]()
with a strong editorial portrait footprint; the right column takes
the remainder (~640px) and carries the eyebrow + Gold hairline,
two-line editorial H2 (Raleway upright prefix + Raleway italic
accent), a vertical 4-step timeline (Bordeaux 1px rail, 15px
circular nodes, hollow steps 02–04, filled Bordeaux step 01),
and a restrained editorial CTA at the end of the content flow
(Gold hairline + 13px Montserrat uppercase + arrow).
Both columns sit inside a single centered wrapper (max-width 1140px).
The image no longer touches the left viewport edge — at 1920px
there is clear Porcelain breathing room on BOTH sides. The page
background is already Porcelain, so the right column does NOT
render a separate giant Porcelain half-screen.
Section spacing (locked):
Section 05 owns the 100px TOP gap to Section 04 only. No bottom
padding — Section 06 will own its own top padding.
Elementor contract: the image is still a real ![]()
selected through
a MEDIA content control. No inline style="background-image:..." is
ever emitted by the widget. All visual layering lives here in the
child-theme CSS.
No full-bleed escape. Unlike the Hero / Section 04 dark block,
Section 05 does not need to span the viewport width — it lives
inside the normal centered content frame alongside the other 1140px
sections. Global Elementor container rules are NOT touched.
========================================================================== */
/* ==========================================================================
Section root
Owns the 100px TOP gap to Section 04 only. Owns NO bottom padding —
Section 06 will own its own top padding so the 100px-top-only
architecture stays locked. The two columns (image + content) sit
side by side inside this centered wrapper as a CSS grid.
Wrapper width follows the canonical KB pattern:
width: min(calc(100% - 2 * var(--kb-gutter-desktop)),
var(--kb-content-width));
max-width: var(--kb-content-width);
margin-inline: auto;
so the section is never wider than 1140px and never collides with
narrow viewports.
========================================================================== */
.kb-home-experience {
position: relative;
width: min(
calc(100% - 2 * var(--kb-gutter-desktop)),
var(--kb-content-width)
);
max-width: var(--kb-content-width);
margin-inline: auto;
background-color: var(--kb-porcelain);
color: var(--kb-ink);
overflow: hidden;
padding-top: var(--kb-section-space-desktop);
display: grid;
/* Desktop split: 440px image + 60px gap + remainder (≈640px) for
the right Experience content. align-items: stretch so the right
column matches the image's definite height — the inner content
is then vertically centered inside that column by the panel
flex, not pinned to the top. */
grid-template-columns: 440px minmax(0, 1fr);
column-gap: 60px;
align-items: stretch;
}
/* ==========================================================================
LEFT IMAGE PANEL — atelier photograph
Sits inside the centered 1140px wrapper. The ![]()
is a real figure
+ img so the asset remains editable through the MEDIA control (no
inline background-image). object-fit: cover + object-position: center
keep the focal point on the couturière / sketch / measuring tape.
position: relative so the small bottom label can be pinned to the
lower-left of the panel.
The panel has a fixed desktop height (720px) so it reads as a
strong editorial portrait next to the right Experience column, not
a half-screen split. The grid's align-items: stretch makes the
right column match this height, and the panel's flex centers the
content vertically inside it.
========================================================================== */
.kb-home-experience__media {
position: relative;
width: 100%;
/* Stretch the media wrapper to fill its grid row (the right
column's content height) so the atelier image runs from
the top of the right block to the CTA's bottom edge —
both columns share the same row height via the grid's
align-items: stretch. min-height: 720px keeps the
approved desktop minimum footprint when the right
content happens to be shorter than 720px on a wide
screen. The figure (position:absolute; inset:0) and the
img (width:100%; height:100%; object-fit:cover) then
reflow into the new height automatically. */
height: 100%;
min-height: 720px;
overflow: hidden;
background-color: color-mix(in srgb, var(--kb-bordeaux) 6%, var(--kb-porcelain));
}
.kb-home-experience__media-figure {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
.kb-home-experience__media-figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* "center center" is the suggested focal point; tune here in
CSS only if the selected atelier image requires it. */
object-position: center center;
}
/* Placeholder surface for the editor canvas / pre-asset state. A
soft Bordeaux→Ink wash keeps the left panel from rendering as an
empty void while waiting for a real photograph. Sits BEHIND the
image (which is then on top of it via object-fit:cover) and is
never visible once the asset is in place. */
.kb-home-experience__media-figure--placeholder {
background:
linear-gradient(135deg, var(--kb-bordeaux) 0%, var(--kb-ink) 100%);
}
/* Small bottom label — Montserrat 10–11px uppercase, Porcelain,
tracking ~0.16em. Very subtle. Pinned to the lower-left of the
image with a thin short Gold line preceding the text (editorial
couture-paper signature treatment). */
.kb-home-experience__image-label {
position: absolute;
left: 28px;
bottom: 24px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--kb-font-body);
font-size: 10px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--kb-porcelain);
pointer-events: none;
}
.kb-home-experience__image-label::before {
content: "";
display: block;
width: 28px;
height: 1px;
background-color: var(--kb-gold);
opacity: 0.7;
}
/* Very subtle dark/Bordeaux gradient over the image — used ONLY as
a small readable pocket for the bottom label. Lives between the
image (z-index 0) and the label (z-index 2) and is concentrated
to the lower-left so the photograph stays warm and natural. */
.kb-home-experience__media::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to top,
color-mix(in srgb, var(--kb-ink) 38%, transparent) 0%,
color-mix(in srgb, var(--kb-ink) 12%, transparent) 22%,
transparent 38%
);
}
/* ==========================================================================
RIGHT EXPERIENCE PANEL
The right column inside the 1140px centered wrapper. The page
background is already Porcelain, so this column does NOT paint its
own background block — there is no separate giant Porcelain
half-screen. The panel is a transparent flex container that holds
the inner content wrapper and vertically centers it against the
720px image so the editorial copy is intentionally positioned
alongside the tall image, not pinned to the top.
========================================================================== */
.kb-home-experience__panel {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
/* The grid's align-items: stretch makes this column match the
image's 720px height. The flex centers the inner content
vertically inside that column. */
}
.kb-home-experience__inner {
width: 100%;
/* Inner content width. The right column is ≈640px wide (1140
minus 440 image minus 60 gap). Capping the inner at 100% of
the column keeps the editorial copy reading comfortably
without forcing it to fill the full 640px if the copy is
short. */
max-width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* ==========================================================================
EYEBROW + GOLD HAIRLINE
Montserrat 12px / 500 / uppercase / 0.18em / Gold. The small Gold
hairline precedes the text on the same baseline so the eyebrow
reads as a numbered editorial chapter mark, identical to the
treatment used in the home-creations widget.
========================================================================== */
.kb-home-experience__eyebrow {
margin: 0 0 var(--kb-space-m) 0;
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--kb-font-body);
font-size: 12px;
font-weight: 500;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--kb-gold);
}
.kb-home-experience__eyebrow-text {
display: inline-block;
}
/* ==========================================================================
EDITORIAL H2
Two-line Raleway display. The prefix carries an explicit \n
line break (white-space: pre-line) so "De la première esquisse"
sits on line 1 and "à votre" sits on line 2. The italic accent
("dernière retouche.") follows "à votre " inline on line 2.
text-wrap: balance keeps the title block editorial, not "first
line short, second line overflowing".
Desktop: 44px (locked home typography spec). font-weight 300.
line-height 1.10. Ink. NO serif. The italic accent is Raleway
italic, same approximate size — never dramatically larger.
========================================================================== */
.kb-home-experience__title {
margin: 0;
font-family: var(--kb-font-display);
font-size: 44px;
font-weight: 300;
line-height: 1.10;
letter-spacing: -0.005em;
color: var(--kb-ink);
text-wrap: balance;
}
.kb-home-experience__title-prefix {
white-space: pre-line;
}
.kb-home-experience__title-em {
/* Per the project NEVER-ITALIC rule, the emphasized word is
now visually identical to the prefix: upright Raleway,
Ink, same approximate size. markup is preserved for
semantics only. */
font-style: normal;
font-weight: 300;
color: var(--kb-ink);
margin-left: 0.18em;
}
/* ==========================================================================
TIMELINE
Vertical 4-step editorial timeline. The 1px rail sits to the left
of the steps (color-mix ink 18% / transparent per spec). Each step
owns a 15px circular node pinned to the rail, plus a body block
(number + title + text) sitting to the right.
Step 01: filled Bordeaux node.
Steps 02–04: transparent center, 1px Bordeaux/Ink-muted border.
The four steps move as ONE grouped reveal — they are never
animated individually (per spec, this is editorial, not a product
onboarding UI).
========================================================================== */
.kb-home-experience__timeline {
margin-top: 52px;
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
max-width: 460px;
position: relative;
}
/* The 1px vertical rail. Rendered as a pseudo-element on the
timeline wrapper. Endpoints are pinned to the exact CENTERS of
the step 01 and step 04 nodes (no overshoot above/below):
- first step: padding-top 4 + node margin-top 6 + node radius
7.5 = 17.5px from the wrapper top.
- last step: padding-bottom 4 + (node height 15 − node
margin-top 6) − node radius 7.5 = 11.5px from the wrapper
bottom. */
.kb-home-experience__timeline::before {
content: "";
position: absolute;
top: 17.5px;
bottom: 11.5px;
left: 7px;
width: 1px;
background-color: color-mix(
in srgb,
var(--kb-ink) 18%,
transparent
);
pointer-events: none;
}
.kb-home-experience__step {
position: relative;
display: flex;
align-items: flex-start;
gap: 28px;
/* Each step's vertical rhythm: spec calls for 92–110px between
steps. Picked 100px so the timeline feels airy without being
empty, and so a 2-line step body fits with breathing room. */
padding-block: 26px;
}
.kb-home-experience__step:first-child {
padding-top: 4px;
}
.kb-home-experience__step:last-child {
padding-bottom: 4px;
}
/* Circular timeline node — 15px diameter (within the spec's 14–16px
range). Step 01 is filled Bordeaux; steps 02–04 are transparent
with a 1px Bordeaux-tinted border. The radius:0 design system
rule does not prohibit the circular geometry of these timeline
dots — they are decorative timeline nodes, not UI controls. */
.kb-home-experience__step-node {
flex: 0 0 15px;
width: 15px;
height: 15px;
border-radius: 50%;
margin-top: 6px;
background-color: transparent;
border: 1px solid color-mix(
in srgb,
var(--kb-bordeaux) 55%,
var(--kb-ink)
);
}
.kb-home-experience__step--1 .kb-home-experience__step-node {
background-color: var(--kb-bordeaux);
border-color: var(--kb-bordeaux);
}
.kb-home-experience__step-body {
flex: 1 1 auto;
min-width: 0;
max-width: 340px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
/* Step number — Raleway 18px / 400 / Gold. The leading visual
anchor for each step. */
.kb-home-experience__step-num {
font-family: var(--kb-font-display);
font-size: 18px;
font-weight: 400;
line-height: 1;
color: var(--kb-gold);
margin-bottom: 2px;
}
/* Step title — Raleway 21px / 400 / Ink. Editorial weight, no
serif. The number + title sit close together so they read as
one labelled line. */
.kb-home-experience__step-title {
margin: 0;
font-family: var(--kb-font-display);
font-size: 21px;
font-weight: 400;
line-height: 1.25;
color: var(--kb-ink);
}
/* Step body — Montserrat 14px / line-height 1.65 / slightly muted
Ink. Capped at 340px so the wrap reads as an editorial body
paragraph, not a full-width text block. */
.kb-home-experience__step-text {
margin: 4px 0 0 0;
font-family: var(--kb-font-body);
font-size: 14px;
font-weight: 400;
line-height: 1.65;
color: color-mix(
in srgb,
var(--kb-ink) 82%,
transparent
);
}
/* ==========================================================================
CTA — restrained editorial text-link
Lives at the end of the section content (after the timeline, per
spec). NOT a primary button — a Gold uppercase text link with a
thin preceding Gold horizontal line and a subtle arrow.
Montserrat 13px / 500 / uppercase / 0.18em / Gold. Smooth hover
via color shift toward Ink + arrow translate.
========================================================================== */
.kb-home-experience__cta-wrap {
margin-top: 56px;
display: inline-flex;
align-items: center;
gap: 18px;
}
.kb-home-experience__cta-arrow {
transition:
background-color var(--kb-transition-ui),
opacity var(--kb-transition-ui),
width var(--kb-transition-ui);
}
.kb-home-experience__cta {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--kb-font-body);
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
color: var(--kb-gold);
transition:
color var(--kb-transition-editorial),
transform var(--kb-transition-editorial);
}
.kb-home-experience__cta-label {
display: inline-block;
}
.kb-home-experience__cta-arrow {
display: inline-block;
font-family: var(--kb-font-body);
font-size: 14px;
line-height: 1;
transition: transform var(--kb-transition-editorial);
}
@media (hover: hover) and (pointer: fine) {
.kb-home-experience__cta:hover {
color: var(--kb-ink);
}
.kb-home-experience__cta:hover .kb-home-experience__cta-arrow {
transform: translateX(4px);
}
}
.kb-home-experience__cta:active {
color: var(--kb-ink);
}
.kb-home-experience__cta:focus-visible {
color: var(--kb-gold);
outline: 2px solid var(--kb-gold);
outline-offset: 6px;
}
/* ==========================================================================
Tablet (≤ 1199px)
The centered 1140px wrapper still applies (it's the canonical KB
pattern), but the split compresses: the title scales to 42px, the
timeline nodes/body scale down, the image height drops to 660px,
and the column gap tightens slightly. Inner content max-width
inherits from desktop (100% of the right column).
========================================================================== */
@media (max-width: 1199px) {
.kb-home-experience {
padding-top: var(--kb-section-space-tablet);
}
.kb-home-experience__image-label {
left: 24px;
bottom: 20px;
}
.kb-home-experience__media {
/* Tablet: same stretch behavior as desktop. min-height
660px keeps the approved tablet footprint. */
height: 100%;
min-height: 660px;
}
.kb-home-experience__title {
font-size: 44px;
}
.kb-home-experience__timeline {
margin-top: 44px;
}
.kb-home-experience__step {
gap: 24px;
padding-block: 22px;
}
.kb-home-experience__step-title {
font-size: 20px;
}
}
/* ==========================================================================
Mobile (≤ 767px) — single-column editorial stack
Per the spec: image first, then eyebrow, title, timeline, CTA.
The two halves stack vertically; the image keeps a tall opening
footprint (430–500px) so the section still reads as a strong
visual entry. The Porcelain panel follows directly under the
image with 20px horizontal gutters and 48px internal top padding.
The timeline stays vertical (nodes + rail on the left, body on
the right) — never horizontal.
========================================================================== */
@media (max-width: 767px) {
.kb-home-experience {
padding-top: var(--kb-section-space-mobile);
/* Single-column on mobile. The 760px desktop min-height is
released so the section grows with its content. Section
width uses the mobile gutter formula so the reordered
children (including the image) sit inside the gutter. */
width: calc(100% - 2 * var(--kb-gutter-mobile));
max-width: none;
grid-template-columns: 1fr;
min-height: 0;
}
/* Image panel keeps a strong opening visual. Full section width
inside the section's overflow:hidden frame. */
.kb-home-experience__media {
min-height: 460px;
height: 460px;
}
.kb-home-experience__image-label {
left: 20px;
bottom: 18px;
font-size: 10px;
}
.kb-home-experience__image-label::before {
width: 22px;
}
/* Mobile reorder: flatten the panel + inner wrappers so the
eyebrow, title, image, timeline and CTA become direct grid
items of the section. order then reorders them to:
1) eyebrow 2) title 3) image 4) timeline 5) CTA
The desktop/tablet layout is untouched (display: contents
only applies inside this mobile breakpoint). */
.kb-home-experience__panel,
.kb-home-experience__inner {
display: contents;
}
.kb-home-experience__eyebrow {
order: 1;
font-size: 11px;
/* Top air (replaces the old inner padding-block: 48px 64px
that the display:contents wrapper no longer carries). */
margin-top: 48px;
}
.kb-home-experience__title {
order: 2;
font-size: 36px;
line-height: 1.10;
}
.kb-home-experience__media {
order: 3;
margin-top: 24px;
}
.kb-home-experience__timeline {
order: 4;
margin-top: 40px;
max-width: none;
}
.kb-home-experience__cta-wrap {
order: 5;
margin-top: 44px;
gap: 14px;
}
.kb-home-experience__step {
gap: 20px;
padding-block: 20px;
}
.kb-home-experience__step-node {
flex: 0 0 14px;
width: 14px;
height: 14px;
margin-top: 5px;
}
.kb-home-experience__timeline::before {
top: 6px;
left: 6px;
bottom: 6px;
}
.kb-home-experience__step-body {
max-width: none;
}
.kb-home-experience__step-num {
font-size: 17px;
}
.kb-home-experience__step-title {
font-size: 19px;
}
.kb-home-experience__step-text {
font-size: 14px;
}
}
/* ==========================================================================
SCROLL REVEAL — Section 05
------------------------------------------------------------
Per the spec, three discreet groups: image panel, right content,
and timeline. The four steps move as ONE unit — they are never
animated individually. CTA rides with the timeline group so the
link is revealed alongside the editorial content it belongs to.
Timing per spec:
- image panel: opacity 0 → 1, ~1000ms (fade, very subtle)
- right content: fade-up, ~22px, 950ms, 100ms delay
- timeline: fade-up, ~22px, 950ms, 100ms delay (rides
with right content via the same delay or a
slightly later one to feel intentional)
The eyebrow + title + image bottom label ride the parent reveal
groups — no child-level animation.
========================================================================== */
.kb-home-experience__media[data-kb-reveal="fade"] {
transition-delay: 0ms;
transition-duration: 1000ms;
--kb-reveal-distance: 0px;
}
.kb-home-experience__inner[data-kb-reveal="fade-up"] {
transition-delay: 100ms;
transition-duration: 950ms;
--kb-reveal-distance: 22px;
}
.kb-home-experience__timeline[data-kb-reveal="fade-up"] {
transition-delay: 160ms;
transition-duration: 950ms;
--kb-reveal-distance: 22px;
}
/* Mobile: same architecture, shorter distance / duration. */
@media (max-width: 767px) {
.kb-home-experience__media[data-kb-reveal="fade"],
.kb-home-experience__inner[data-kb-reveal="fade-up"],
.kb-home-experience__timeline[data-kb-reveal="fade-up"] {
--kb-reveal-distance: 14px;
transition-duration: 800ms;
}
}
/* Tablet (768–1024px) — middle point between desktop and mobile.
Only semantic typography: title 40px. */
@media (min-width: 768px) and (max-width: 1024px) {
.kb-home-experience__title {
font-size: 40px;
}
}