/* ========================================================================== KB Services Section 02 / L'Approche — Atlasyn × Khaoula Bouabidi Scoped strictly to .kb-services-approach. All values driven by tokens.css. Elementor = content only — every visual treatment lives here. The reference image controls the COMPOSITION (large editorial copy block on the LEFT, ONE large dominant photograph on the RIGHT reaching the right edge of the section, generous negative space, calm luxury rhythm, ~50/50-ish split). The project design system controls the STYLE: full-bleed Porcelain ground, Raleway display title (no serif, no italic), Montserrat body, Gold eyebrow (no decorative line), no cards, no boxes, no icons, no radius, no border, no shadow, no overlay, no CTA, no arrow, no italic, no serif. Architecture (final): - Full-bleed Porcelain section root. The entire section reads as one calm Porcelain editorial canvas. - The inner content frame is the 1140px site content width (centered on viewports > 1140px; takes the full viewport with 32px gutter on tablet and 20px gutter on mobile). - Desktop — 2-column editorial split: LEFT : vertically centered editorial copy (eyebrow / title / body 1 / body 2). The copy is left- aligned and never crosses into the image column. The left edge of the copy is pinned to the 1140px content frame. RIGHT : ONE large real photograph. The image visually meets the right edge of the section (the right side of the visual column reaches the section's right edge, not an inner padding box). Image is rendered as a real , no background-image, no border, no radius, no shadow, no overlay, no frame. - No CTA, no link, no arrow, no icon. Purely editorial. Section spacing (locked): 100px desktop / 80px tablet / 64px mobile. TOP-ONLY. No bottom padding — the next section owns its own top spacing. Elementor contract: the image is a real selected through a MEDIA content control. No inline style="background-image:..." is ever emitted. All visual styling lives here in the child-theme CSS. No serif. No italic. No "Maison" wording. No decorative eyebrow line. No title underline. No flower / star ornament. No cards. No boxes. No icons. No CTA. No arrow. No shadow on images. No border / radius on images. No ornamental divider. ========================================================================== */ /* ========================================================================== FULL-BLEED ESCAPE — Section 02 Services ------------------------------------------------------------ The Elementor container that holds this section is reset to padding 0 / width 100% so our own section root is the single source of truth for the outer dimensions. Mirrors the same escape used by the other KB sections. ========================================================================== */ .e-con:has(.kb-services-approach) { --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-services-approach) > .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 — contained inside the 1140px content frame. Incoming top spacing: 100px desktop. No bottom padding (the next section owns its own top spacing). The section is centered on the viewport with a Porcelain ground so the right image stays FULLY contained inside the 1140px section width — it never bleeds beyond the section container and never overflows the viewport horizontally. Section HEIGHT is NOT fixed. The row height is driven by the copy column's natural content height, and the image column stretches to match (see VISUAL block). This way the right image and the left content block end at exactly the same bottom line. ========================================================================== */ .kb-services-approach { 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); padding-top: var(--kb-section-space-desktop); /* No min-height — the row drives the section height. */ min-height: 0; /* Containment safety net. The 1140px width / max-width already cap the layout, but overflow: hidden guarantees the image never escapes the section container in any edge case (very narrow viewport, transformed child, injected 100vw rule by a third-party). */ overflow: hidden; } .kb-services-approach__inner { width: 100%; max-width: var(--kb-content-width); margin-inline: auto; display: flex; align-items: stretch; } /* ========================================================================== LAYOUT — desktop 2-column editorial split. ------------------------------------------------------------ The section is a 44/56 split inside the 1140px content frame: left copy column occupies ~44% of the section width, right image column occupies ~56%. Both columns are fully contained inside the 1140px section so the right image never bleeds past the section's right edge and never overflows the viewport. A 40px column gap keeps the copy and the image from colliding. ========================================================================== */ .kb-services-approach__layout { width: 100%; max-width: 100%; display: grid; grid-template-columns: 0.44fr 0.56fr; column-gap: 40px; align-items: stretch; min-width: 0; } /* ========================================================================== COPY (LEFT) — vertically centered editorial column. The left column hosts the eyebrow, title, body 1 and body 2 stacked vertically and vertically centered inside the section's substantial height. The copy is left-aligned, never crosses into the image column, and stays inside the 1140px section frame (no special left offset needed now that the section itself is centered on the 1140px frame). ========================================================================== */ .kb-services-approach__copy { padding-inline-end: clamp(24px, 4vw, 64px); /* The copy column caps to its own grid track (44% of 1140 ≈ 502px) so the body copy stays at the editorial column width and the title never crosses over to the right image. */ max-width: 100%; width: 100%; /* Anchor the copy at the TOP of the row so the eyebrow's top edge lines up exactly with the image's top edge. The row height is now driven exclusively by the copy column's intrinsic content height (because the right visual column contributes 0 intrinsic height — its is absolutely positioned), so the column is exactly the content height and there is no extra space to distribute. justify-content is therefore a no-op, but flex-start is kept explicit so the intent is unambiguous. */ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; min-width: 0; margin-inline-end: 0; margin-inline-start: 0; } /* ========================================================================== EYEBROW Reuses the canonical .kb-section-eyebrow primitive (base.css) for Montserrat / 12px / 500 / uppercase / 0.18em / Gold. The local class only owns the bottom margin so the gap to the title is a single source. NO decorative line, NO ornament, NO underline. Reference's gold horizontal line below the eyebrow is intentionally OMITTED per project rule. ========================================================================== */ .kb-services-approach__eyebrow { margin: 0 0 44px 0; } /* ========================================================================== TITLE Raleway, Ink, non-italic, light weight. Each line is a structural so the line breaks from the Elementor control become real DOM lines (not styled with
). The title is a clean three-line editorial statement: Tout commence par la femme, jamais par le vêtement. max-width is sized to fit the longest source line ("Tout commence par", 17 chars) on a single visual line. No serif, no italic, no underline, no ornament. ========================================================================== */ .kb-services-approach__title { margin: 0 0 40px 0; display: flex; flex-direction: column; align-items: flex-start; font-family: var(--kb-font-display); font-size: 44px; font-weight: 300; font-style: normal; line-height: 1.1; letter-spacing: -0.015em; color: var(--kb-ink); text-transform: none; text-align: left; text-decoration: none; /* Sized to fit the longest source line ("Tout commence par", 17 chars at 44px Raleway light ≈ 374–400px) on a single visual line each, so the title renders as exactly three lines. */ max-width: 400px; } .kb-services-approach__title em, .kb-services-approach__title i { font-style: normal; color: var(--kb-ink); } .kb-services-approach__title-line { display: block; } /* ========================================================================== BODY 01 / BODY 02 Montserrat, Ink, restrained. Each line is a structural so the intended multi-line layout renders verbatim. Readable line-height. Restrained column width (40ch cap on the body column). No italic. ========================================================================== */ .kb-services-approach__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-family: var(--kb-font-body); font-size: 15px; font-weight: 400; font-style: normal; line-height: 1.75; color: var(--kb-ink); text-transform: none; text-align: left; text-wrap: pretty; max-width: 40ch; width: 100%; } .kb-services-approach__body em, .kb-services-approach__body i { font-style: normal; color: var(--kb-ink); } .kb-services-approach__body-line { display: block; } .kb-services-approach__body--primary { /* 24px = paragraph 1 → paragraph 2 gap (target 24px). */ margin: 0 0 24px 0; } .kb-services-approach__body--secondary { margin: 0; } /* ========================================================================== VISUAL (RIGHT) — large dominant photograph, EQUAL HEIGHT to the left content block. ------------------------------------------------------------ The visual column occupies the right grid track (~56% of the 1140px section width) and hosts ONE large real . EQUAL-HEIGHT MECHANISM ------------------------------------------------------------ The grid row height is set by the TALLEST intrinsic content in the row. The left copy column has a real intrinsic height (its stacked eyebrow + title + body content). The right visual column has effectively zero intrinsic content height because the uses `height: 100%` (a percentage height, which CSS treats as INDEFINITE for intrinsic sizing and therefore contributes nothing to the row's natural height). With `align-items: stretch` (the grid default), both columns stretch to fill the row, which is now EXACTLY the copy column's natural content height. The
therefore stretches to that same height, and the with `height: 100%` fills the figure completely. The result: the right image and the left content block end at exactly the same bottom line. The figure has: - background-color: TRANSPARENT - border: 0 - box-shadow: none - border-radius: 0 - padding: 0 - margin: 0 - overflow: hidden (so the cover crop never escapes) The image itself: - display: block - width: 100% - height: 100% - object-fit: cover - object-position: center No aspect-ratio crop. No background-image. No frame. No card. No border. No radius. No shadow. No overlay. Because the section itself is contained at max-width: 1140px, the visual column is FULLY contained inside the section — it never bleeds past the section's right edge and never overflows the viewport horizontally. ========================================================================== */ .kb-services-approach__visual { position: relative; width: 100%; max-width: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; background-color: transparent; border: 0; border-radius: 0; box-shadow: none; /* Stretch to the row height, which equals the copy column's natural content height. Using align-self: stretch (the grid default for align-items) guarantees the figure fills the row regardless of its own intrinsic content. The height: 100% declaration is kept as a redundant safety net for environments where align-self is overridden. */ align-self: stretch; height: 100%; overflow: hidden; display: block; /* Subtle fallback surface for when no image is approved yet — soft Porcelain → Ink vertical wash keeps the right column from rendering as an empty void. The Porcelain matches the section ground so the seam is invisible. */ background: linear-gradient(180deg, var(--kb-porcelain) 0%, var(--kb-ink) 100%); } .kb-services-approach__image { /* Absolute positioning removes the from the figure's normal flow, so the figure contributes ZERO intrinsic content height to the grid row's max-content sizing. This is the single cause that previously forced the row taller than the left content: the 's natural aspect ratio was being honored as the row's max-content, which made the image column dictate the row height. With the absolutely positioned, the row height is driven EXCLUSIVELY by the left copy column's intrinsic content height, and the figure (align-self: stretch) then fills exactly that height. The fills the figure via inset: 0 + object-fit: cover. */ position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background-color: transparent; border: 0; border-radius: 0; box-shadow: none; filter: none; } /* ========================================================================== TABLET (≤ 1199px) ------------------------------------------------------------ The 2-column editorial split is preserved on tablet so the image stays dominant and the copy stays vertically centered. The copy column uses the locked 32px tablet gutter; the image column remains flush to the right edge. Typography scales down one step. The 50/50 split is kept but the column gap is introduced so the copy does not collide with the image. ========================================================================== */ @media (max-width: 1199px) { .kb-services-approach { padding-top: var(--kb-section-space-tablet); min-height: 640px; } .kb-services-approach__layout { column-gap: 32px; } .kb-services-approach__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: 32px; max-width: 100%; } .kb-services-approach__eyebrow { margin-bottom: 36px; } .kb-services-approach__title { font-size: 52px; margin-bottom: 32px; } .kb-services-approach__body { font-size: 14px; max-width: 36ch; } } /* ========================================================================== MOBILE (≤ 767px) ------------------------------------------------------------ The section is intentionally recomposed to a single column following the LOCKED mobile order: 1. eyebrow (order 1) 2. title (order 2) 3. image (order 3) 4. body 01 (order 4) 5. body 02 (order 5) The image sits DIRECTLY under the title so the editorial statement (eyebrow + title) is read first, then the visual anchors the meaning, then the closing copy explains it. Implementation: the layout collapses to a single-column flex container; the copy column is flattened via `display: contents` so its children become direct flex items. The flex `order` property is then used to reorder the existing elements — NO PHP duplication, NO second mobile-only image element, NO DOM reordering. The image on mobile is full-width inside the 20px gutter (NOT 100vw), rendered as a real . The image wrapper is a transparent
with no border / shadow / radius / padding. The mobile image's width / crop / aspect / object-fit are UNCHANGED — only its flex `order` changes. No horizontal overflow. No rounded corners. No italic. No serif. No CTA. ========================================================================== */ @media (max-width: 767px) { .kb-services-approach { padding-top: var(--kb-section-space-mobile); padding-inline: 0; min-height: 0; overflow: visible; } .kb-services-approach__inner { width: calc(100% - 2 * var(--kb-gutter-mobile)); padding-inline: 0; } /* Single-column FLEX layout. The copy column is flattened with display: contents so its children (eyebrow, title, body 01, body 02) become direct flex items of the layout, alongside the visual figure. The flex `order` property below reorders the existing elements into the locked mobile order. Previous grid-template-areas approach failed because both `.kb-services-approach__body--primary` and `.kb-services-approach__body--secondary` share the base `.kb-services-approach__body` class, so a single `grid-area: body` caused BOTH paragraphs to render in the same grid cell and overlap. Flex `order` gives each element its own row in the column, so the two body paragraphs cannot overlap. Both text blocks are in normal document flow. */ .kb-services-approach__layout { display: flex; flex-direction: column; align-items: stretch; row-gap: 0; column-gap: 0; } .kb-services-approach__copy { display: contents; padding: 0; margin: 0; max-width: 100%; } /* LOCKED MOBILE ORDER via flex `order`: 1. eyebrow (order 1) 2. title (order 2) 3. visual (order 3) — sits directly under the title 4. body 01 (order 4) — main body paragraph 5. body 02 (order 5) — closing copy Each element is a SEPARATE flex item in the column, so the two body paragraphs occupy their own row and cannot overlap. Both text blocks are in normal document flow. */ .kb-services-approach__eyebrow { order: 1; } .kb-services-approach__title { order: 2; } .kb-services-approach__visual { order: 3; } .kb-services-approach__body--primary { order: 4; } .kb-services-approach__body--secondary { order: 5; } .kb-services-approach__visual { /* Reset desktop-only sizing declarations that interfere with the flex item's natural sizing. */ margin-top: 0; align-self: stretch; height: auto; width: 100%; max-width: 100%; /* The flex item's cross-size is the container width (the 20px-guttered inner). aspect-ratio then computes the main-size = width * 5 / 4, so the figure owns its full rendered height inside the flex column. */ aspect-ratio: 4 / 5; min-height: 0; overflow: hidden; } /* Body margins provide the gaps from the visual above and between the two paragraphs. Both text blocks are in normal document flow; the closing copy begins only after the main body has fully rendered. */ .kb-services-approach__body--primary { margin-top: 32px; } .kb-services-approach__body--secondary { margin-top: 28px; } .kb-services-approach__image { /* MOBILE HEIGHT-RESERVATION FIX ------------------------------------------------------------ ROOT CAUSE OF SECTION-02 / SECTION-03 OVERLAP ON MOBILE: The desktop rule keeps the `position: absolute; inset: 0;` so the figure contributes ZERO intrinsic content height to the flex column. The figure relies on `aspect-ratio: 4 / 5` to reserve its main-size from its cross-size. In a flex column, `aspect-ratio` on an item with 0 intrinsic content height and `align-self: stretch` does NOT reliably reserve the expected height across all browsers — the flex item can collapse to a height smaller than the intended aspect-ratio computed height. When that happens, section 02's container is shorter than its visible content, and section 03 (which follows in normal document flow) renders on top of the bottom of section 02's image and body copy. FIX: on mobile, reset the to normal document flow (`position: static`) so it contributes its natural aspect-ratio content height to the figure. The figure now has a real intrinsic content height (from the in-flow ), and `aspect-ratio: 4 / 5` reliably produces the correct main-size in the flex column. The still fills the figure via `width: 100%; height: 100%; object-fit: cover;` — the figure's height is now defined by the in-flow 's natural aspect ratio constrained by `width: 100%`, and `object-fit: cover` crops to fit. This fix does NOT touch the text overlay fix (flex `order` on the body paragraphs). Both fixes coexist: the text overlay fix ensures the two body paragraphs are separate flex items in the column; this height fix ensures the figure reserves its full aspect-ratio height. */ position: static; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Mobile typography. */ .kb-services-approach__eyebrow { margin-bottom: 24px; } .kb-services-approach__title { font-size: 38px; line-height: 1.08; margin-bottom: 32px; } .kb-services-approach__body { max-width: 100%; font-size: 15px; } } /* ========================================================================== SCROLL REVEAL — Section 02 Services / L'Approche ------------------------------------------------------------ Two visual groups animate as their own editorial units: - copy group (eyebrow + title + body 1 + body 2) - image group (single large photograph) The reveal system is unchanged. We only bind the existing fade-up behaviour to the group nodes. ========================================================================== */ .kb-services-approach__copy[data-kb-reveal="fade-up"] { --kb-reveal-distance: 20px; transition-delay: 0ms; transition-duration: 900ms; } .kb-services-approach__visual[data-kb-reveal="fade-up"] { --kb-reveal-distance: 28px; transition-delay: 140ms; transition-duration: 1100ms; } @media (max-width: 767px) { .kb-services-approach__copy[data-kb-reveal="fade-up"], .kb-services-approach__visual[data-kb-reveal="fade-up"] { --kb-reveal-distance: 14px; transition-duration: 800ms; transition-delay: 0ms; } } /* ========================================================================== REDUCED MOTION — no entrance offset, opacity locked to 1. Mirrors the convention used by the other KB sections. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .kb-services-approach [data-kb-reveal] { opacity: 1 !important; transform: none !important; } }