/* Engineering — "Engineered For Every Day" cinematic full-bleed banner.
Figma export chain: .background-wrapper (abs, 1440x810) > .background
(1440x810, position:relative, offset 0/0 inside the wrapper — so the child
`top`s below ARE section-relative, no ancestor offset to add).
Anchors (of 810 tall), with line boxes at Manrope's `line-height: normal`
= (hhea ascender 2132 + |descender| 600) / 2000 upem = 1.366 — measured off
the shipped font binary, and consistent with the rounded box heights Figma
did emit on the sibling section (60x1.366=81.96→82, 30x1.366=40.98→41):
.text-wrapper-24 heading top 405 (50.00%) 90px/400 → box 405–527.9
.text-wrapper-25 subtitle top 534 (65.93%) 35px/500 → box 534–581.8
.SEAMZERO-FUSION. tech row top 650 (80.25%) 25px/400 → line 650–684.2
The tech row's frame is 52px tall for a 34.2px line box, i.e. a manually
resized FIXED frame; Figma's default vertical text align is top, and this
exporter emits flex/place-items when a node is centred (it did not here), so
the row is anchored on the frame TOP.
Derived flow gaps: heading→subtitle 6px, subtitle→tech row 68.2px, and a
125.9px (8.74% of 1440) bottom gap under the tech line. flex-end + those
three values reproduce all three Figma anchors exactly and scale with the
banner via aspect-ratio.
Backdrop is the editor's background video/image over backgroundColor. */
.cc_LmUd6PvvAN_pZ4G8djH0H .eng {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 100%;
overflow: hidden;
display: flex;
color: var(--eng-text, #ffffff);
/* Scale the 1920×1080 artwork from the section's own width. Studio's page
canvas can be narrower than its outer browser window, so viewport units
would produce a different composition in the editor. */
container-type: inline-size;
/* 1% of THIS section's width — for its DESCENDANTS only. An element is never
its own query container, so `cqw` used on `.eng` itself silently falls back
to the viewport width; the height must therefore come from `aspect-ratio`
(which is relative to the box's own width) and never from a cqw/vw length.
Mixing the two is what made the banner taller than its 16:9 video and let
`object-fit: cover` zoom the footage. */
/* See Header/styles.css: WebKit measures `cqw` against the ZOOMED size
under the fixed canvas, Chromium against the layout size. The canvas
publishes an absolute px length, so prefer it when it exists. */
--eng-canvas-vw: var(--sumone-design-vw, 1vw);
/* No min-height: every breakpoint derives its own height from the media's
ratio (<=767 on .eng__media, >=768 on this box), and a floor here would
re-introduce the very gap that `object-fit: cover` filled by zooming. */
min-height: 0;
/* Anchor landing offset ("/#engineering"): utils/anchor.ts reads this to work
out where the glide stops, so the sticky header never covers the top of the
banner. --header-height is written onto by the Header at runtime. */
scroll-margin-top: calc(var(--header-height, 0px) + 0.5rem);
}
/* Safari 15 has no container queries. A `var(--x, 1vw)` fallback CANNOT save
this: custom properties accept any token, so `--x: 1cqw` parses fine there
and shadows the fallback, leaving every downstream calc() invalid — the
section then collapses. The value must therefore be SWITCHED by @supports.
1vw is the right stand-in: under the fixed canvas the body is `base`px wide
and visually scaled by viewport/base, so 1vw lands on the same painted size. */
@supports (container-type: inline-size) {
.cc_LmUd6PvvAN_pZ4G8djH0H .eng {
--eng-canvas-vw: var(--sumone-design-vw, 1cqw);
}
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Tablet + desktop: the box IS the backdrop. --eng-media-aspect-ratio is the
media's measured intrinsic ratio (useNaturalAspect), falling back to the
merchant's "Görsel Oranı" until metadata lands and when there is no media —
so the video fills the banner edge to edge and is never zoom-cropped.
Height is preferred, not clamped: copy taller than the ratio (narrow tablets)
still stretches the box instead of being clipped. */
@media (min-width: 768px) {
.cc_LmUd6PvvAN_pZ4G8djH0H .eng {
aspect-ratio: var(--eng-media-aspect-ratio, 16 / 9);
min-height: 0;
max-height: none;
}
}
/* Phone + tablet (<=1023) run the merchant's mobile asset set, so they also get
their own ratio. --eng-media-aspect-ratio-mobile is published ONLY for an
explicit pick ("Mobil Görsel/Video Oranı"); on "Otomatik" the var() chain
falls through to the measured ratio of whatever media is actually playing. */
@media (min-width: 768px) and (max-width: 1023px) {
.cc_LmUd6PvvAN_pZ4G8djH0H .eng {
aspect-ratio: var(
--eng-media-aspect-ratio-mobile,
var(--eng-media-aspect-ratio, 16 / 9)
);
}
}
/* Dark bottom gradient overlay — keeps white text legible over the backdrop */
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 30%,
rgba(0, 0, 0, 0.34) 62%,
rgba(0, 0, 0, 0.72) 100%
);
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__inner {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center; /* mobile: centered block */
padding-inline: clamp(20px, 7.22vw, 104px);
padding-block: clamp(48px, 8vw, 96px);
}
/* Desktop: pin the block to Figma's lower-middle. flex-end + 8.74% (125.9px
@1440 — padding-% resolves against width) puts the tech line's box bottom at
y684.2, so walking back up the stack lands the tech row top on 650 (80.25%),
the subtitle top on 534 and the heading top on 405 — all three exact.
Anchoring from the BOTTOM is also what makes .eng__eyebrow harmless: Figma's
.background has no eyebrow, and because the stack grows upward the eyebrow
occupies y374–389 while the heading still lands on 405. */
@media (min-width: 1024px) {
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__inner {
justify-content: flex-end;
padding-top: 0;
padding-bottom: 8.74%;
}
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__content {
/* Figma .text-wrapper-24's box is 1112px spanning x164..x1276 — dead centre of
the 1440 canvas. With the 104px inner inset the centred 1112px block
reproduces those edges exactly. (Don't read `white-space: nowrap` in the
export as "hug": .text-wrapper-38 carries it around a 776px frame holding
~536px of text. Either way the copy is centred, so the box only matters as
a wrap limit — and the heading measures 1096.6px at 90px/2px tracking, so
it stays on one line with ~15px to spare.) */
max-width: 1112px;
width: 100%;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__eyebrow {
display: block;
font-family: var(--font-label, sans-serif);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--eng-accent, #9a7b4f);
margin-bottom: var(--space-sm, 16px);
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__heading {
font-family: var(--font-display, sans-serif);
font-weight: 400; /* Figma 73:491 — Manrope Regular */
font-size: var(--text-d90);
line-height: 1.366; /* Figma `line-height: normal` @ Manrope = 122.9px @90px */
letter-spacing: 0.0222em; /* Figma tracking 2px @90px */
/* Figma: heading box ends 527.9, subtitle box starts 534 → 6px, the leading
itself supplies the visual air. (Tablet/mobile below open this up.) */
margin: 0 0 clamp(4px, 0.42vw, 6px);
color: var(--eng-text, #ffffff);
text-wrap: balance;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__sub {
font-family: var(--font-body, sans-serif);
font-weight: 500; /* Figma 73:492 — Manrope Medium */
font-size: var(--text-d35);
line-height: 1.366; /* Figma `line-height: normal` = 47.8px @35px */
letter-spacing: 0.0571em; /* Figma tracking 2px @35px */
color: var(--eng-text, #ffffff);
/* Figma .text-wrapper-25 is a hug: 953px is the MEASURED width of the TR
string (Manrope Medium advance 24.116em x 35px + 54 chars x 2px tracking
= 952.1px — a 0.9px fit). Centred in the 1112 box it reproduces x243. A
longer merchant subtitle simply wraps; nothing downstream depends on it. */
max-width: 953px;
margin: 0;
}
/* ---- Tech links row (SEAMZERO® / FUSIONBOND® / COOLMAX®) ---- */
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__links {
display: flex;
flex-direction: column;
gap: clamp(14px, 2vw, 20px);
/* Figma: subtitle box ends 581.8, tech row starts 650 → 68.2px (4.73vw) */
margin-top: clamp(30px, 4.73vw, 68px);
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__tech {
display: flex;
flex-direction: column;
gap: 6px;
color: var(--eng-text, #ffffff);
text-decoration: none;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__tech-name {
font-family: var(--font-display, sans-serif);
font-weight: 400; /* Figma 73:490 — Manrope Regular */
font-size: var(--text-d25);
line-height: 1.366; /* Figma `line-height: normal` = 34.2px @25px */
/* The carries tracking 2px but every glyph sits in a span
(.text-wrapper-22 / -23) that OVERRIDES it to 0.5px → 0.02em @25px.
The old 0.08em read the
and was 4x too wide. */
letter-spacing: 0.02em;
/* Casing is normalised in TS instead of CSS. Under `lang="tr"`, CSS
uppercase turns FUSIONBOND into FUSİONBOND; JavaScript's locale-neutral
uppercase keeps the registered brand spelling intact. */
text-decoration: underline; /* Figma: always underlined */
text-underline-offset: 4px;
text-decoration-thickness: 1px;
transition: opacity 0.3s ease;
}
.cc_LmUd6PvvAN_pZ4G8djH0H a.eng__tech:hover .eng__tech-name, .cc_LmUd6PvvAN_pZ4G8djH0H a.eng__tech:focus-visible .eng__tech-name {
opacity: 0.72;
}
/* Teknoloji açıklamaları HER genişlikte gizli. Eskiden yalnızca masaüstü ve
tablette gizlenip mobilde gösteriliyordu; aynı bölümün cihaza göre farklı
metin göstermesi istenmiyor — referans masaüstü (Figma: yalnızca isimler). */
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__tech-desc {
display: none;
font-family: var(--font-body, sans-serif);
font-size: 13px;
line-height: 1.6;
opacity: 0.68;
max-width: 44ch;
}
@media (min-width: 1024px) {
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__links {
flex-direction: row;
align-items: baseline;
/* The gap is authored in the Figma copy itself: each .text-wrapper-23
separator is 6 + 1 collapsing space = 7 rendered space chars.
Manrope's space advance is 400/2000 upem = 0.20em at EVERY weight
(read out of the shipped variable font's hmtx + HVAR), so the run is
7 × (0.20 × 25px + 0.5px tracking) = 38.5px = 2.674vw.
That is 1.54em of the tech-name size, and --text-d25 is 1.74vw, so
1.54 × 1.74vw = 2.68vw — the vw gap tracks the fluid font size across
1034–1440px instead of drifting.
(The 673px frame is a FIXED, centred text box, not a hug — .KADIN-ERKEK
in the hero is the same 673px frame around ~162px of text. The measured
line here is SEAMZERO 130.0 + FUSIONBOND 153.9 + COOLMAX® 134.4 + 13.0
tracking (26 chars × 0.5px) + 2 × 38.5 = 508.3px, ~82px of slack each
side. Reading 673px as the text width is what inflated this to ~102px.) */
gap: clamp(18px, 2.674vw, 38.5px);
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__tech-desc {
display: none;
}
}
/* Tablet (portrait + small landscape): keep the cinematic image treatment,
but simplify the copy into a calm lower-third. At this width the three
descriptions made the overlay read like a dense text block and covered the
model. The technology names remain visible as the primary actions, matching
the pared-back desktop/Figma treatment. */
@media (min-width: 768px) and (max-width: 1023px) {
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__overlay {
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 24%,
rgba(0, 0, 0, 0.12) 50%,
rgba(0, 0, 0, 0.72) 100%
);
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__inner {
justify-content: flex-end;
padding: clamp(48px, 6vw, 64px) clamp(36px, 6vw, 64px)
clamp(52px, 7vw, 72px);
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__content {
max-width: 820px;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__eyebrow {
margin-bottom: 12px;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__heading {
margin-bottom: 14px;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__sub {
max-width: 42ch;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__links {
flex-direction: row;
align-items: baseline;
flex-wrap: wrap;
gap: 18px clamp(20px, 2.674vw, 38.5px); /* same 7-space rhythm as desktop */
margin-top: clamp(32px, 4.73vw, 48px);
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__tech-desc {
display: none;
}
}
/* ---- Text alignment (data-align editor prop) — Figma default is center ---- */
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__content[data-align="center"] {
text-align: center;
margin-inline: auto;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__content[data-align="center"] .eng__sub {
margin-inline: auto;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__content[data-align="center"] .eng__links {
justify-content: center;
align-items: center;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__content[data-align="right"] {
text-align: right;
margin-left: auto;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__content[data-align="right"] .eng__sub {
margin-left: auto;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__content[data-align="right"] .eng__links {
justify-content: flex-end;
align-items: flex-end;
}
@media (max-width: 767px) {
.cc_LmUd6PvvAN_pZ4G8djH0H .eng {
display: block;
min-height: 0;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__media {
position: relative;
inset: auto;
height: auto;
aspect-ratio: var(
--eng-media-aspect-ratio-mobile,
var(--eng-media-aspect-ratio, 16 / 9)
);
object-position: center center;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__overlay {
display: none;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__inner {
padding: 36px 24px 44px;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__content {
max-width: 560px;
margin-inline: auto;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__heading {
margin-bottom: 12px;
letter-spacing: 0.015em;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__links {
gap: 18px;
margin-top: 32px;
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__tech {
gap: 4px;
}
}
/* v-eng-maxheight: banner capped to 82vh (fits viewport) */
/* v-eng-video: fusionbond bg video (autoplay muted loop) */
/* v-eng-video2: bg video via VIDEO asset (fusionbond 505b9f8e), autoplay muted loop */
/* Fixed desktop canvas — Figma 504:357, 1920×1080. The editor exposes its
W1280 preview through a narrower visual host, therefore desktop geometry is
activated at the same 1024px editor gate used by ViewportCanvas and is
resolved exclusively from this section's container width. */
@media (min-width: 1024px) {
/* NOTE: no height here on purpose. This block used to set
`height: 56.25cqw; aspect-ratio: auto`, which read `cqw` on the container
element itself — that resolves against the VIEWPORT, not the section, so
the banner's height and width came from two different widths and the video
got cropped. The ratio rule above is the only height owner now. */
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__inner {
box-sizing: border-box;
/* min-, not a hard height: the copy fills the ratio box but may also grow
it (very narrow desktop widths) instead of being clipped by overflow. */
min-height: 100%;
justify-content: center;
padding: 0 calc(var(--eng-canvas-vw, 1vw) * 4.479167);
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__content {
max-width: calc(var(--eng-canvas-vw, 1vw) * 57.916667);
}
/* PDF rhythm: heading → subtitle 24px; subtitle → links 40px. */
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__heading {
font-size: calc(var(--eng-canvas-vw, 1vw) * 4.6875);
line-height: calc(var(--eng-canvas-vw, 1vw) * 5.572917);
margin-bottom: calc(var(--eng-canvas-vw, 1vw) * 1.25);
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__sub {
max-width: calc(var(--eng-canvas-vw, 1vw) * 49.635417);
font-size: calc(var(--eng-canvas-vw, 1vw) * 1.822917);
line-height: calc(var(--eng-canvas-vw, 1vw) * 2.864583);
}
/* The three underlined technology labels are separated by 32px. */
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__links {
gap: calc(var(--eng-canvas-vw, 1vw) * 1.666667);
margin-top: calc(var(--eng-canvas-vw, 1vw) * 2.083333);
}
.cc_LmUd6PvvAN_pZ4G8djH0H .eng__tech-name {
font-size: calc(var(--eng-canvas-vw, 1vw) * 1.302083);
}
}
/* Ekran-altı bölüm: sayfa açılışında viewport dışında olduğu için tarayıcı
layout/paint maliyetini gerçekten görünene kadar erteleyebilir. `auto`
anahtar sözcüğü sayesinde ilk yerleşimden sonra gerçek boyut hatırlanır —
tahmin yalnızca ilk kaba scrollbar uzunluğunu besler, CLS üretmez. Sticky
veya scroll-pin içeren bölümlere (ShopTheLook, CollectionStories) bilerek
uygulanmadı. */
.cc_LmUd6PvvAN_pZ4G8djH0H .eng {
content-visibility: auto;
contain-intrinsic-size: auto 700px;
}