default UA margin-top (1em=16px) pushed the 2-line stat text 16px below its `top`, clipping ~11px off the card's overflow:hidden bottom edge — .ename above already resets margin:0, this brings .estat in line with it */ font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 16px; color: #c7d1db; } /* Small cards: w=308, h=252 */ .up-ecard-sm { position: absolute; width: 308px; height: 252px; border-radius: 16px; overflow: hidden; } .up-ecard-sm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .up-ecard-sm .egrad { position: absolute; left: 0; top: 113.4px; width: 308px; height: 138.6px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.85) 100%); } .up-ecard-sm .ename { position: absolute; left: 18px; top: 164px; width: 272px; font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px; color: white; line-height: normal; font-variation-settings: "SOFT" 0, "WONK" 1; margin: 0; } .up-ecard-sm .estat { position: absolute; left: 18px; top: 202px; width: 272px; margin: 0; /* 30.07 fix: same
default UA margin-top bug as .up-ecard-dubai .estat above (commit 26901e8) — was overflowing the RU Umm Al Quwain card by ~3.89px and clipping stat text */
font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 11px; color: #c7d1db; line-height: 1.3;
}
.up-ecard-rak { left: calc(var(--rail-edge) + 972px); top: 302px; }
.up-ecard-abu { left: calc(var(--rail-edge) + 648px); top: 302px; }
.up-ecard-shj { left: calc(var(--rail-edge) + 648px); top: 570px; }
.up-ecard-uaq { left: calc(var(--rail-edge) + 972px); top: 570px; } /* 18.07 v4: rail-edge-relative (was hardcoded lefts assuming a fixed 1440 box — now full-bleed §1 fix) */
/* ===== DIFFERENTIATORS (359:2) h=120, bg=#2d3745 ===== */
.up-diff {
/* 19.08: was hardcoded 1440px — bg didn't reach full viewport width below 1440px. */
position: relative; width: 100%; height: 166px; background: #2d3745;
}
.up-diff__sep {
position: absolute; width: 1px; height: 60px; top: 53px;
background: rgba(255,255,255,0.2);
}
.up-diff__num {
position: absolute; top: 44px;
font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 11px;
color: rgba(255,255,255,0.55); letter-spacing: 0.88px; line-height: normal;
}
.up-diff__val {
position: absolute; top: 40px;
font-family: 'Fraunces', serif; font-weight: 300; font-size: 36px;
color: #ffffff; line-height: normal; font-variation-settings: "SOFT" 0, "WONK" 1; white-space: nowrap;
}
.up-diff__lbl {
position: absolute; top: 83px;
font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 14px;
color: #ffffff; line-height: normal; white-space: nowrap;
}
.up-diff__sub {
position: absolute; top: 110px;
font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 12px;
color: rgba(255,255,255,0.6); line-height: normal; white-space: nowrap;
}
/* ===== WHERE TO BUY NOW (Figma 210:2) h=737, bg=#f2f0ec ===== */
.up-communities {
position: relative; width: 1440px; height: 737px; background: #f2f0ec;
}
.up-communities__kicker {
position: absolute; left: 80px; top: 80px;
font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
color: #6B6963; letter-spacing: 0.66px; white-space: nowrap;
}
.up-communities__head { /*w*/
position: absolute; left: 80px; top: 111px; width: 900px; margin: 0;
font-family: 'Fraunces', serif; font-weight: 400; font-size: 72px;
color: #0e0e10; line-height: 1; letter-spacing: -1.44px;
font-variation-settings: "SOFT" 0, "WONK" 1;
}
.up-communities__desc {
position: absolute; left: 80px; top: 205px; white-space: nowrap; margin: 0;
font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 16px;
color: #0e0e10; line-height: 1.5;
}
.up-communities__nav {
position: absolute; left: 1284px; top: 191px;
display: flex; align-items: center; gap: 12px;
}
.up-communities__nav button {
width: 32px; height: 32px; border: none; background: none; padding: 0; cursor: pointer;
}
.up-communities__nav img { width: 32px; height: 32px; display: block; }
.up-communities__wrap {
position: absolute; left: 80px; top: 271px; width: 1280px; height: 320px;
overflow-x: auto; overflow-y: hidden;
scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
}
.up-communities__wrap::-webkit-scrollbar { display: none; }
.up-communities__grid {
display: flex; height: 320px; width: max-content; gap: 16px;
}
/* 24.07: scoped to .up-communities__grid (was bare .up-comm-card, which is also the class
name the newer /communities/ grid page uses for its own, differently-structured card —
the unscoped `.up-comm-card img { position:absolute; inset:0 }` here was bleeding into that
page's cards, stretching the photo over the whole card and hiding its name/badge info panel
underneath. This block belongs only to the old homepage carousel widget, unused in src/
markup outside .up-communities__grid — scoping stops the cross-component collision without
deleting code that may still be wired up somewhere this grep didn't reach.) */
.up-communities__grid .up-comm-card {
position: relative; width: 416px; height: 320px;
overflow: hidden; flex-shrink: 0;
box-shadow: 0 4px 4px rgba(0,0,0,0.25);
}
.up-communities__grid .up-comm-card img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
pointer-events: none;
}
.up-communities__grid .up-comm-card .cgrad {
position: absolute; left: 0; top: 0; width: 100%; height: 100%;
background: linear-gradient(to bottom, #2d3745 0%, rgba(45,55,69,0) 49%, #2d3745 100%);
}
.up-communities__grid .up-comm-card .ctag {
position: absolute; left: 18px; top: 16px;
display: flex; align-items: center; gap: 7px;
font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 10px;
}
.up-communities__grid .up-comm-card .ctag-area { color: white; letter-spacing: 0.6px; }
.up-communities__grid .up-comm-card .ctag-pct { color: #d28b5a; }
.up-communities__grid .up-comm-card .cinfo {
position: absolute; left: 18px; top: 256px; width: 380px;
}
.up-communities__grid .up-comm-card .cname {
font-family: 'Fraunces', serif; font-weight: 400; font-size: 22px; color: white;
line-height: 1.1; margin: 0 0 6px 0;
font-variation-settings: "SOFT" 0, "WONK" 1;
}
.up-communities__grid .up-comm-card .cprice {
font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 12px;
color: rgba(255,255,255,0.65); white-space: nowrap; margin: 0;
}
.up-communities__dots {
position: absolute; left: 686px; top: 640px; width: 68px; height: 8px;
}
.up-communities__dots img { width: 68px; height: 8px; display: block; }
.up-communities__viewall {
position: absolute; left: 1146px; top: 631px;
font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 20px;
color: #0e0e10; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
/* ===== WHAT WE DO (Figma 359:17) h=582, bg=#2d3745 ===== */
.up-whatwedo {
position: relative; width: 1440px; height: 582px; background: #2d3745;
}
.up-whatwedo__kicker {
position: absolute; left: 80px; top: 80px;
font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px;
color: rgba(247,237,217,0.55); letter-spacing: 0.88px; white-space: nowrap;
}
.up-whatwedo__head {
position: absolute; left: 80px; top: 111px; white-space: nowrap; margin: 0;
font-family: 'Fraunces', serif; font-weight: 400; font-size: 56px;
color: #f7edd9; line-height: 64px;
font-variation-settings: "SOFT" 0, "WONK" 1;
}
.up-whatwedo__desc {
position: absolute; left: 953px; top: 152px; width: 360px; height: 36px; margin: 0;
font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px;
color: rgba(247,237,217,0.7); line-height: normal;
}
.up-whatwedo__services {
position: absolute; left: 80px; top: 263px; width: 1280px; height: 289px;
}
.up-svc {
position: absolute; height: 289px; width: 308px; overflow: hidden;
}
.up-svc__icon {
position: absolute; left: 0; top: 0; width: 56px; height: 56px;
}
.up-svc__icon img { width: 56px; height: 56px; display: block; }
.up-svc__num {
position: absolute; left: 0; top: 72px;
font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px;
color: rgba(247,237,217,0.45); white-space: nowrap;
}
.up-svc__title {
position: absolute; left: 0; top: 114px; width: 308px; margin: 0;
font-family: 'Fraunces', serif; font-weight: 400; font-size: 28px;
color: #f7edd9; line-height: normal;
font-variation-settings: "SOFT" 0, "WONK" 1;
}
.up-svc__body {
position: absolute; left: 0; top: 169px; width: 308px; height: 88px; margin: 0;
font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px;
color: rgba(247,237,217,0.7); line-height: 22px;
}
/* ===== SIX REASONS (Figma 135:2) bg=#f2f0ec, p=80 ===== */
.up-sixreasons {
position: relative; width: 100%; background: #f2f0ec;
padding: 80px max(80px, calc((100% - 1280px) / 2)); box-sizing: border-box; /* 18.07 v4: full-bleed bg, horizontal padding follows rail formula (was fixed 80px both axes on a 1440px box) */
}
.up-sixreasons__head {
display: flex; align-items: flex-start; justify-content: space-between;
/* 19.08: was hardcoded width:1280px — parent .up-sixreasons already pads via the rail formula
(line ~712), so a plain 100% here just fills the already-correct content box at any width. */
width: 100%; margin-bottom: 60px; /* 18.07 v2: canon revised 80→60px */
}
.up-sixreasons__head-l { display: flex; flex-direction: column; gap: 16px; }
.up-sixreasons__kicker {
font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
color: #6B6963; letter-spacing: 0.66px; white-space: nowrap; margin: 0;
}
.up-sixreasons__title {
font-family: 'Fraunces', serif; font-weight: 400; font-size: 64px;
/* 19.08: white-space was nowrap unconditionally — this heading's own min-content width (the
full nowrapped text, ~966px) was forcing its flex-column parent (.up-sixreasons__head-l, no
width of its own) wider than the section's rail below 1440px, which then blew out
.up-sixreasons__src's width:100% too. normal lets it wrap only when actually too narrow;
at 1440px+ (where it already fits on one line) this renders identically to nowrap. */
color: #0e0e10; line-height: 1.05; letter-spacing: -1.28px; white-space: normal; margin: 0;
font-variation-settings: "SOFT" 0, "WONK" 1;
}
.up-sixreasons__src {
font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 16px;
color: #6B6963; text-align: left; width: 100%; margin: 0;
}
.up-sixreasons__grid {
/* 20.08: 3-per-row (426px flex cells) -> 2-per-row grid, per Mikhail request.
Grid instead of flex so cells split the rail evenly at ANY viewport (the
old flex fixed-width cells only lined up at exactly 1280px content width). */
width: 100%; display: grid; grid-template-columns: repeat(2, 1fr);
background: rgba(0,0,0,0.1); gap: 1px;
}
.up-reason {
height: 220px;
display: flex; flex-direction: column; justify-content: space-between;
padding: 32px; background: #f2f0ec; box-sizing: border-box;
}
.up-reason__val {
/* 20.08: 56px->40px (Mikhail: "очень большие") — matches the existing
.up-kpi__val/.up-chart__pct big-orange-number convention elsewhere on
this same page, not a new invented size. */
font-family: 'Fraunces', serif; font-weight: 300; font-size: 40px;
color: #d28b5a; letter-spacing: -1.12px; white-space: nowrap; margin: 0; line-height: normal;
font-variation-settings: "SOFT" 0, "WONK" 1;
}
.up-reason__title {
font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 16px;
color: #0e0e10; line-height: 1.3; width: 100%; margin: 0 0 6px 0;
}
.up-reason__sub {
font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 13px;
color: #6B6963; line-height: 1.4; width: 100%; margin: 0;
}
\3c style id="up-width-override">
/* ===== WIDTH DE-FREEZE OVERRIDE v2.7.0 =====
Goal: every section = full-bleed bg (100vw), content rail = centred ≤1280px.
Strategy:
- .up-hp wrapper: 100% wide, no max-width cap.
- Sections inside .up-hp: width:100% (already set below).
- Flex sections outside .up-hp (offplan/devaccess/testimonials/desk/
quarter/faq/final-cta): width:100% + symmetric padding trick so
content rail self-centres: padding-inline: max(80px, (100%-1280px)/2).
At 1440px → 80px each side. At 1920px → 320px each side = centred 1280.
- .up-numbers: absolute-positioned internals; cannot centre purely via
padding without HTML change. Kept at max-width:1440px centred (island).
Full-bleed requires HTML wrapper — deferred.
Updated: 2026-06-12
============================================== */
/* --- Homepage wrapper: fully fluid, no cap --- */
.up-hp {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: max(0px,calc((100% - 1440px)/2)) !important;
}
/* --- Sections INSIDE .up-hp: inherit full width --- */
.up-nav,
.up-hero,
.up-strip-ext,
.up-ticker,
.up-emirate,
.up-diff,
.up-communities,
.up-whatwedo,
.up-sixreasons {
width: 100% !important;
max-width: none !important;
}
/* --- Hero internals: fill parent width --- */
.up-hero { overflow: hidden !important; }
.up-hero__bg { width: 100% !important; }
.up-hero__strip { width: 100% !important; }
.up-hero__strip img { width: 100% !important; height: auto !important; min-height: 471px; object-fit: cover !important; }
.up-hero__grad { width: 100% !important; }
.up-strip-ext img { width: 100% !important; height: auto !important; min-height: 338px; object-fit: cover !important; }
/* --- up-numbers: full-bleed dark bg; absolute children re-anchored to centred 1280 rail --- */
.up-numbers {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: max(0px,calc((100% - 1440px)/2)) !important;
}
.up-numbers__head,
.up-numbers__row {
left: max(80px, calc((100% - 1280px) / 2)) !important;
/* 19.08: width companion — base rule hardcodes width:1280px with no formula, overflowed 769-1439px. */
width: min(1280px, calc(100% - 160px)) !important;
}
/* --- Flex sections outside .up-hp: full-bleed via padding-inline trick ---
padding-inline: max(80px, calc((100% - 1280px) / 2))
ensures content stays centred in 1280px rail at any viewport ≥1440. */
.up-offplan {
width: 100% !important;
max-width: none !important;
padding-left: max(80px, calc((100% - 1280px) / 2)) !important;
padding-right: max(80px, calc((100% - 1280px) / 2)) !important;
}
/* .up-devaccess (bare, no suffix) removed 18.08: dead — class never appears
in markup anywhere; the live section is .uaeprop-sec-developer-access
(its own full-bleed rule lives further below, ~line 882). */
/* .up-testimonials duplicate removed 18.08: fully shadowed by the later,
identical-value declaration ~line 1756 (cascade order — later wins at
equal specificity/!important). */
.up-desk {
width: 100% !important;
max-width: none !important;
padding-left: max(80px, calc((100% - 1280px) / 2)) !important;
padding-right: max(80px, calc((100% - 1280px) / 2)) !important;
overflow: hidden !important;
}
/* .up-quarter duplicate removed 18.08: fully shadowed by the later
V3-5 declaration ~line 1017 ("overrides #13 centred-box"), which
carries the same padding values plus additional margin properties. */
.up-faq {
width: 100% !important;
max-width: none !important;
padding-left: max(80px, calc((100% - 1280px) / 2)) !important;
padding-right: max(80px, calc((100% - 1280px) / 2)) !important;
}
.up-final-cta {
width: 100% !important;
max-width: none !important;
padding-left: max(80px, calc((100% - 1280px) / 2)) !important;
padding-right: max(80px, calc((100% - 1280px) / 2)) !important;
}
/* --- Inner 1280-wide children: allow natural width inside padded container ---
Prevents overflow when container is narrower than declared child width. */
.up-offplan__head,
.up-offplan__row,
.up-offplan__footer,
.up-devaccess__head,
.up-devaccess__logos,
.up-testimonials__quotes,
.up-desk__hr,
.up-desk__head,
.up-desk__arts,
.up-desk__bottom,
.up-faq__list,
.up-final-cta__title,
.up-final-cta__form {
max-width: 1280px !important;
width: 100% !important;
}
/* --- uaeprop-sec-developer-access: full-bleed with padding rail --- */
.uaeprop-sec-developer-access {
width: 100% !important;
max-width: none !important;
padding-left: max(80px, calc((100% - 1280px) / 2)) !important;
padding-right: max(80px, calc((100% - 1280px) / 2)) !important;
}
.up-offplan__viewall {
font-size: 20px !important;
}
/* --- GAP-FIX 12.06: центрирование контента full-bleed секций (вердикт Mikhail) --- */
/* hero: контент переякорен на центрированный рейл 1280 (фон уже full-bleed) */
.up-hero__h1 {
left: max(80px, calc((100% - 1280px) / 2)) !important;
}
.up-hero__kicker, .up-hero__right-head, .up-hero__right-desc, .up-hero__form {
left: calc(max(80px, calc((100% - 1280px) / 2)) + 820px) !important;
}
/* 18.07 v4: full-bleed fix — LOCKED §1 requires full-bleed bg on EVERY section, no exception for
bg-matches-body sections (was a fixed centered 1440px box; up-emirate/up-sixreasons now get their
own width:100% + rail-formula-anchored children directly at their base rules above; wtbn-inner
already rail-formula-centers itself via its own scoped \3c style>, so the section here only needs
width:100% for its background to reach the viewport edge). */
.uaeprop-sec-where-to-buy-now {
width: 100% !important;
max-width: none !important;
}
/* what-we-do (тёмный фон): full-bleed + дети на рейл (паттерн NUMBERS) */
.uaeprop-sec-what-we-do {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.uaeprop-sec-what-we-do .wwd-head, .uaeprop-sec-what-we-do .wwd-services {
left: max(80px, calc((100% - 1280px) / 2)) !important;
/* 19.08: width companion to the left formula above — base rule (~line 1342/1389) hardcodes
width:1280px with no formula, so 769-1439px overflowed the section's overflow:clip and got
silently cut off (Mikhail-reported "BY EMIRATE/WHAT WE DO" mobile-spacing follow-up). */
width: min(1280px, calc(100% - 160px)) !important;
}
/* quarter: каталог-изображение к правому краю секции (в макете прилегало к правому краю 1440 бокса) */
.up-quarter__img {
left: auto !important;
right: max(0px,calc((100% - 1440px)/2)) !important;
}
/* ===== EDITS2 12.06 — вердикт Mikhail ===== */
/* #1: hero caption — re-anchor to 1280 rail
(.up-strip-cap override removed 18.08 — dead, see base-rule removal note
~line 448; class never appears in markup) */
/* #2: up-diff — сдвиг inner-wrapper на центрированный рейл
На 1920: (1920-1440)/2=240px, на 1440: (1440-1440)/2=0px */
.up-diff__inner {
position: absolute;
left: 0; top: 0;
/* 19.08: was width:1280px with no formula + a 0px floor (not the sitewide 80px rail-formula
floor) — below 1280+160=1440px this box had zero left-inset AND stayed full-1280 wide,
overflowing straight off the right edge. Matches the same 80px floor + width formula used
everywhere else on this page (--rail-edge / max(80px, calc(...))). */
width: min(1280px, calc(100vw - 160px));
transform: translateX(max(80px, calc((100vw - 1280px) / 2)));
}
/* #3 (18.07): wwd-sub — под заголовком, левый край = wwd-head local origin (не page-rail formula) */
.uaeprop-sec-what-we-do .wwd-sub {
left: 0 !important;
right: auto !important;
top: 123px !important;
text-align: left !important;
width: 1280px !important;
font-family: 'IBM Plex Sans', sans-serif !important;
font-size: 16px !important;
color: rgba(255,255,255,0.7) !important;
line-height: 1.5 !important;
}
/* #7: скруглить chart и KPI-боксы (как у up-offplan-card border-radius:16px) */
.up-chart {
border-radius: 16px !important;
}
.up-kpi {
border-radius: 16px !important;
}
/* #9: up-desk — 4 карточки в ряд (было 384px → 296px) */
.up-desk__card {
width: calc((100vw - max(80px, calc((100vw - 1280px) / 2)) * 2 - 3 * 16px - 80px) / 4) !important;
min-width: 240px !important;
max-width: 296px !important;
}
/* 18.07 v2: removed 4 redundant width:100%!important rules (card-img/card-info/card-title/
card-body) — global.css already sets width:100% (non-important) for all 4, identical
visual result, no competing rule left that needs !important to win. */
/* #12: NUMBERS вертикальные отступы — уменьшить верхний gap 80→40 */
.up-numbers__head {
top: 80px !important;
}
.up-numbers__row {
top: 311px !important; /* 18.07 v2: canon revised 80→60px */
}
.up-numbers {
height: 751px !important; /* -20 to match row shift, preserving existing 80px bottom padding */
}
/* #IJL: quote mark top breathing room — match card padding-bottom 32px */
.up-quote__mark { padding-top: 32px; }
/* #13: up-quarter — вернуть как центрированный бокс 1440 (убрать padding trick) */
.up-quarter {
width: 1440px !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 80px !important;
padding-right: 80px !important;
padding-top: 80px !important;
padding-bottom: 80px !important;
}
/* #14: FAQ title descenders fix */
.up-faq__title {
line-height: 1.2 !important;
overflow: visible !important;
padding-bottom: 4px !important;
}
/* V3-3: ON THE RECORD — explicit equal top/bottom padding on cards */
.up-quote {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
/* 18.07 v2: removed — .up-desk__card-img (aspect-ratio/object-fit/height/radius) and
.up-desk__card-title (font-size/line-height) both fully redundant with global.css's own
matching values (including the 16px radius, folded in there directly). Was the SECOND of
3 total definition sources for card-img alone — consolidation, not a value change. */
/* V3-5: Q1 REPORT — full-bleed orange background (overrides #13 centred-box) */
.up-quarter {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: max(0px,calc((100% - 1440px)/2)) !important;
padding-left: max(80px, calc((100% - 1280px) / 2)) !important;
padding-right: max(80px, calc((100% - 1280px) / 2)) !important;
}
/* V3-6: PARTNERS title — tighten line-gap + fix descenders (overflow:clip was clipping y,p) */
.uaeprop-sec-developer-access .dev-title {
line-height: 1.0 !important;
overflow: visible !important;
padding-bottom: 8px !important;
}
.uaeprop-sec-developer-access .dev-title p {
line-height: 1.15 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.uaeprop-sec-developer-access .dev-head {
overflow: visible !important;
}
.uaeprop-sec-developer-access .dev-head-l {
overflow: visible !important;
}
@font-face{
font-family: 'IBM Plex Sans';
src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display:swap;
}
@font-face{
font-family: 'IBM Plex Sans';
src: url('/fonts/ibm-plex-sans-500-cyrillic.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display:swap;
unicode-range: U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F;
}
@font-face{
font-family: 'IBM Plex Sans Arabic';
src: url('/fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display:swap;
unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
font-family: 'IBM Plex Sans Arabic';
src: url('/fonts/ibm-plex-sans-arabic-500.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display:swap;
unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
font-family: 'IBM Plex Sans Arabic';
src: url('/fonts/ibm-plex-sans-arabic-700.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display:swap;
unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
font-family: 'JetBrains Mono';
src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
font-weight: 400 500; font-style: normal; font-display:swap;
}
@font-face{
font-family: 'JetBrains Mono';
src: url('/fonts/jetbrains-mono-500-cyrillic.woff2') format('woff2');
font-weight: 400 500; font-style: normal; font-display:swap;
unicode-range: U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F;
}
/* ── Outer shell ── */
.up-site-header {
position: sticky;
top: 0;
width: 100%;
height: 92px;
background: var(--wp--preset--color--bg-light);
z-index: 200;
box-sizing: border-box;
}
.up-site-header__inner {
display: flex;
align-items: center;
width: 100%;
max-width: 1440px;
height: 92px;
margin: 0 auto;
padding: 0 80px;
box-sizing: border-box;
gap: 0;
}
/* ── Logo (left) ── */
.up-site-header__logo {
flex-shrink: 0;
display: flex;
align-items: center;
width: 73px;
height: 56px;
}
.up-site-header__logo img { display: block; width: 73px; height: 56px; object-fit: contain; }
/* ── Nav wrapper — centered via flex grow trick ── */
.up-site-header__nav {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
height: 100%;
}
/* ── Nav item gap: 28px between items (half each side = 14px) ── */
.up-nav-item {
position: relative;
}
/* ── Top-level links / buttons ── */
.up-nav-item > a,
.up-nav-item > button {
display: inline-flex; align-items: center; gap: 5px;
font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 14px;
color: var(--wp--preset--color--ink); text-decoration: none; white-space: nowrap; line-height: 1;
background: none; border: none; cursor: pointer;
padding: 36px 14px;
letter-spacing: 0;
text-transform: none;
}
.up-nav-item > a:hover,
.up-nav-item > button:hover,
.up-nav-item:hover > a,
.up-nav-item:hover > button { color: #d28b5a; }
/* chevron icon */
.up-nav-chevron {
display: inline-block; width: 10px; height: 6px;
background: none; flex-shrink: 0; opacity: 0.45;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%230e0e10' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-size: contain; background-position: center;
transition: transform 0.18s ease;
}
.up-nav-item:hover > button .up-nav-chevron,
.up-nav-item:focus-within > button .up-nav-chevron { transform: rotate(180deg); }
/* ── Dropdown panel ── */
.up-nav-dropdown {
display: none;
position: absolute; top: 100%; left: 0;
min-width: 210px;
background: var(--wp--preset--color--bg-light);
border: 1px solid rgba(14,14,16,0.08);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.09);
padding: 8px 0;
z-index: 300;
list-style: none; margin: 0;
}
.up-nav-item:hover > .up-nav-dropdown,
.up-nav-item:focus-within > .up-nav-dropdown { display: block; }
.up-nav-dropdown > li { display: block; position: relative; }
.up-nav-dropdown > li > a {
display: flex; align-items: center; justify-content: space-between;
padding: 9px 20px;
font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 14px;
color: var(--wp--preset--color--ink); text-decoration: none; white-space: nowrap; line-height: 1.4;
gap: 8px;
}
.up-nav-dropdown > li > a:hover { background: rgba(210,140,90,0.08); color: #d28b5a; }
/* ── Emirates flyout arrow ── */
.up-nav-flyout-arrow {
display: inline-block; width: 6px; height: 10px; opacity: 0.4; flex-shrink: 0;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L1 9' stroke='%230e0e10' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-size: contain; background-position: center;
}
/* ── Emirates sub-dropdown (flies right) ── */
.up-nav-submenu {
display: none;
position: absolute;
top: -8px;
left: 100%;
min-width: 190px;
background: var(--wp--preset--color--bg-light);
border: 1px solid rgba(14,14,16,0.08);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.09);
padding: 8px 0;
z-index: 400;
list-style: none; margin: 0;
}
.up-nav-has-sub:hover > .up-nav-submenu,
.up-nav-has-sub:focus-within > .up-nav-submenu { display: block; }
.up-nav-has-sub:hover > a,
.up-nav-has-sub:focus-within > a { background: rgba(210,140,90,0.08); color: #d28b5a; }
.up-nav-has-sub:hover .up-nav-flyout-arrow,
.up-nav-has-sub:focus-within .up-nav-flyout-arrow { opacity: 0.8; }
.up-nav-submenu li { display: block; }
.up-nav-submenu li a {
display: block; padding: 9px 20px;
font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 14px;
color: var(--wp--preset--color--ink); text-decoration: none; white-space: nowrap; line-height: 1.4;
}
.up-nav-submenu li a:hover { background: rgba(210,140,90,0.08); color: #d28b5a; }
/* ── Right side: lang switcher + CTA ── */
.up-site-header__right {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
/* Language switcher */
.up-lang-switch {
display: flex;
align-items: center;
gap: 0;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 500;
font-size: 13px;
line-height: 1;
}
.up-lang-switch a,
.up-lang-switch span.up-lang-active {
color: rgba(14,14,16,0.5);
text-decoration: none;
padding: 0 2px;
transition: color 0.15s;
}
.up-lang-switch a:hover { color: var(--wp--preset--color--ink); }
.up-lang-switch span.up-lang-active { color: var(--wp--preset--color--ink); cursor: default; }
.up-lang-switch .up-lang-sep {
color: rgba(14,14,16,0.25);
margin: 0 4px;
font-weight: 400;
font-size: 12px;
user-select: none;
}
/* CTA pill — edits4: enlarged to match removed float-btn (h:56px, 16px, 500) */
.up-site-header__cta a {
display: inline-flex; align-items: center; justify-content: center;
background: var(--wp--preset--color--accent); border-radius: 999px;
height: 56px; padding: 0 32px;
font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 16px;
color: var(--wp--preset--color--ink); text-decoration: none; white-space: nowrap; line-height: 1;
transition: background 0.15s;
}
.up-site-header__cta a:hover { background: #c07b48; }
/* ── Mobile hamburger ── */
.up-site-header__burger {
display: none;
flex-direction: column; gap: 5px; cursor: pointer;
background: none; border: none; padding: 8px;
flex-shrink: 0;
}
.up-site-header__burger span {
display: block; width: 24px; height: 2px; background: var(--wp--preset--color--ink); border-radius: 2px;
transition: all 0.2s;
}
/* ── Mobile menu panel ── */
.up-mobile-menu {
display: none;
position: fixed; top: 92px; left: 0; right: 0; bottom: 0;
background: var(--wp--preset--color--bg-light);
overflow-y: auto; z-index: 199;
padding: 16px 0 40px;
}
.up-mobile-menu.is-open { display: block; }
.up-mobile-menu__item { border-bottom: 1px solid rgba(14,14,16,0.08); }
.up-mobile-menu__item > a,
.up-mobile-menu__trigger {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 24px;
font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 15px;
color: var(--wp--preset--color--ink); text-decoration: none;
background: none; border: none; width: 100%; cursor: pointer; text-align: left;
}
.up-mobile-menu__sub { display: none; padding: 0 0 8px 0; background: rgba(14,14,16,0.03); }
.up-mobile-menu__sub.is-open { display: block; }
.up-mobile-menu__sub a {
display: block; padding: 10px 40px;
font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 14px;
color: rgba(14,14,16,0.75); text-decoration: none;
}
.up-mobile-menu__sub a:hover { color: #d28b5a; }
.up-mobile-menu__cta { padding: 20px 24px; }
.up-mobile-menu__cta a {
display: inline-flex; align-items: center;
background: var(--wp--preset--color--accent); border-radius: 18px; padding: 12px 24px;
font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 14px;
color: var(--wp--preset--color--ink); text-decoration: none;
}
/* Tier 1c Class B (18.08): removed dead duplicate @media(1100px)/@media(960px)
.up-site-header* rules that lived here — src/layouts/BaseLayout.astro's own
\3c style id="up-header-css"> block (later in document order, same specificity)
already wins the cascade and is the live/maintained copy. See
specs/MOBILE_DESIGN_CANON_20260817.md and the mobile spacing audit report. */
#uaeprop-hero-phone-wrap .iti { width: 100%; height: 100%; }
#uaeprop-hero-phone-wrap .iti__flag-container { top: 0; height: 100%; display: flex; align-items: center; }
/* 18.07: intl-tel-input's own JS sets padding-left to the exact flag+dial-code box width, leaving
~2px between the box and the placeholder text — add real breathing room, sitewide, every field.
Also: .iti__selected-country itself has 0 padding, so "+971" sits flush against its own right
border/divider on the OTHER side — pad that too, then widen the input's own reserved space to match. */
.iti__tel-input { padding-left: 116px !important; }
.iti__selected-country { padding-right: 10px !important; box-sizing: border-box !important; }
#uaeprop-hero-phone-wrap .iti--separate-dial-code .iti__selected-dial-code { color: rgba(255,255,255,0.95); }
#uaeprop-hero-phone-wrap .iti__country-container { background: rgba(255,255,255,0.08) !important; border-radius: 10px 0 0 10px !important; border-right: 1px solid rgba(255,255,255,0.18) !important; }
#uaeprop-hero-phone-wrap .iti__selected-country { border-radius: 10px 0 0 10px !important; }
#uaeprop-hero-phone-wrap .iti--separate-dial-code .iti__selected-flag { background: transparent; border-radius: 4px 0 0 4px; height: 100%; }
.uaeprop-sec-what-we-do {
background-color: #2d3745;
position: relative;
width: 1440px;
height: 636px; /* 18.07 v4: base/RU value. v3 (-32 from 668) fixed the box-vs-section slack but still measured to the CSS-declared .wwd-svc-desc box height (88px), not the REAL rendered text — wrong on EN/AR where text wraps to fewer lines than RU's worst-case 4 lines (RU needs the full 88px, EN only 66px/3 lines, AR only 44px/2 lines). 636 = 299(services top) + 169(desc top-in-card) + 88(RU real height) + 80(canon). See html[lang=en]/[lang=ar] overrides below for their own real-height values — this base value now serves as the RU (worst-case) height and the un-overridden fallback. */
overflow: clip;
}
/* 18.07 v4: per-locale section height so the 80px bottom-canon is real on EVERY language, not just RU (worst-case).
Formula: 299(.wwd-services top) + 169(.wwd-svc-desc top-in-card) + real-content-height(locale, measured via el.style.height='auto') + 80.
Live-measured worst-of-4-cards natural text height per locale (18.07): EN=66px(3 lines) / RU=88px(4 lines, matches base) / AR=44px(2 lines). */
html[lang="en"] .uaeprop-sec-what-we-do { height: 614px; } /* 548 + 66 */
html[lang="ar"] .uaeprop-sec-what-we-do { height: 592px; } /* 548 + 44 */
.uaeprop-sec-what-we-do .wwd-head {
word-break: break-word;
position: absolute;
height: 108px;
left: 80px;
font-style: normal;
overflow: visible;
top: 80px;
width: 1280px;
}
.uaeprop-sec-what-we-do .wwd-overline {
position: absolute;
font-family: 'JetBrains Mono', monospace;
font-weight: 500;
line-height: normal;
left: 0;
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
top: 0;
letter-spacing: 0.66px;
white-space: nowrap;
margin: 0;
}
.uaeprop-sec-what-we-do .wwd-heading {
position: absolute;
font-family: 'Fraunces', serif;
font-weight: 400;
letter-spacing: -1.28px;
line-height: 1.05;
left: 0;
color: #ffffff;
font-size: 64px;
top: 31px;
white-space: nowrap;
margin: 0;
}
.uaeprop-sec-what-we-do .wwd-sub {
position: absolute;
font-family: 'Inter', sans-serif;
font-weight: 400;
height: 36px;
line-height: normal;
left: 953px;
font-size: 14px;
color: rgba(247, 237, 217, 0.7);
top: 72px;
width: 360px;
margin: 0;
}
.uaeprop-sec-what-we-do .wwd-services {
position: absolute;
height: 289px;
left: 80px;
overflow: visible;
top: 299px; /* 18.07 v2: FIXED — real "last text" is the .wwd-sub full-width paragraph (a later !important override made it a full paragraph below the heading, not the narrow side-tagline this was originally measured against). sub→services canon = 60px (was measured against .wwd-heading by mistake, giving a false "80" reading while the real sub→services gap was only 25px) */
width: 1280px;
}
.uaeprop-sec-what-we-do .wwd-service {
position: absolute;
height: 289px;
overflow: clip;
width: 302px;
}
.uaeprop-sec-what-we-do .wwd-svc-selection { left: 0; }
.uaeprop-sec-what-we-do .wwd-svc-access { left: 326px; }
.uaeprop-sec-what-we-do .wwd-svc-support { left: 652px; }
.uaeprop-sec-what-we-do .wwd-svc-analytics { left: 978px; }
.uaeprop-sec-what-we-do .wwd-svc-icon {
position: absolute;
left: 0;
width: 56px;
height: 56px;
top: 0;
}
.uaeprop-sec-what-we-do .wwd-svc-icon img {
position: absolute;
display: block;
inset: 0;
max-width: none;
width: 100%;
height: 100%;
}
.uaeprop-sec-what-we-do .wwd-svc-num {
word-break: break-word;
position: absolute;
font-family: 'Inter', sans-serif;
font-weight: 500;
line-height: normal;
left: 0;
font-style: normal;
font-size: 14px;
color: rgba(255, 255, 255, 0.45);
top: 72px;
white-space: nowrap;
margin: 0;
}
.uaeprop-sec-what-we-do .wwd-svc-title {
word-break: break-word;
position: absolute;
font-family: 'Fraunces', serif;
font-weight: 400;
height: 31px;
line-height: normal;
left: 0;
font-style: normal;
color: #ffffff;
font-size: 28px;
top: 114px;
width: 302px;
margin: 0;
}
.uaeprop-sec-what-we-do .wwd-svc-desc {
word-break: break-word;
position: absolute;
font-family: 'Inter', sans-serif;
font-weight: 400;
height: 88px;
line-height: 22px;
left: 0;
font-style: normal;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
top: 169px;
width: 302px;
margin: 0;
}
/* Numbers, dated (222:2) — dark bg, chart + 4 KPIs */
.up-numbers {
/* 19.08: width was hardcoded 1440px (no !important, no formula) — section bg didn't reach full
viewport width below 1440px. Children position via absolute+left-formula independent of this,
but the bg itself should still be full-bleed like its siblings (up-emirate/up-sixreasons). */
position: relative; width: 100%; height: 679px; background: #2d3745;
overflow: hidden;
}
.up-numbers__head {
position: absolute; left: 80px; top: 80px;
width: 1280px; height: 200px; overflow: hidden; word-break: break-word;
}
.up-numbers__kicker {
position: absolute; left: 0; top: 0;
font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
color: rgba(255,255,255,0.6); letter-spacing: 0.66px; white-space: nowrap; margin: 0;
}
.up-numbers__title {
position: absolute; left: 0; top: 34px;
font-family: 'Fraunces', serif; font-weight: 400; font-size: 64px;
color: white; line-height: 1; letter-spacing: -1.28px; margin: 0;
font-variation-settings: "SOFT" 0, "WONK" 1;
}
.up-numbers__src {
position: absolute; left: 0; top: 123px; width: 1280px;
font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 16px;
color: rgba(255,255,255,0.65); text-align: left; line-height: 1.5; margin: 0;
}
.up-numbers__row {
position: absolute; left: 80px; top: 293px;
width: 1280px; height: 360px; overflow: hidden;
}
/* Chart (222:9) */
.up-chart {
position: absolute; left: 0; top: 0; width: 700px; height: 360px;
background: rgba(22,27,34,0.6); backdrop-filter: blur(15px);
box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.15);
box-sizing: border-box; overflow: hidden;
}
.up-chart::after {
content: ''; position: absolute; inset: 0; border-radius: inherit;
box-shadow: inset 2px 2px 4px 0 rgba(255,255,255,0.16); pointer-events: none;
}
.up-chart__header {
position: absolute; left: 32px; top: 28px; width: 292px; height: 73px; overflow: hidden;
}
.up-chart__kicker {
position: absolute; left: 0; top: 0;
font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 11px;
color: rgba(255,255,255,0.6); letter-spacing: 0.44px; margin: 0;
}
.up-chart__pct {
position: absolute; left: 0; top: 17px;
font-family: 'Fraunces', serif; font-weight: 700; font-size: 42px;
color: #d28b5a; letter-spacing: -0.42px; line-height: 1; margin: 0;
font-variation-settings: "SOFT" 0, "WONK" 1;
}
/* Bar chart area */
/* 24.08 Mikhail: "график сдвинут влево" — live-measured at 1920px: bars
sat 32px from the card's left edge but 60px from its right edge (28px
asymmetry). Root cause: the 14 bars' own left/width percentages (see
home-chart-bars.html) only spanned 0%→95.5974% of their container, not
the full 0-100% — a leftover artifact of the original fixed-pixel
desktop design (14 bars × 36px + gaps never summed to exactly 636px).
First attempt used `transform:translateX()` on this container to shift
the whole cluster right — reverted: at the tablet tier (see the
`padding:16px`+`width:100%` override further down) this container has
NO spare margin of its own (it already fills the padded card edge-to-
edge), so shifting it right pushed the "2026" label PAST the card's own
right edge — live-measured real clipping, -4px at 1024px growing to
-13px at 1439px (the wider the tablet card, the bigger the absolute
px shift from the same %, the worse the clip). Desktop's fixed 636px
box happened to have enough slack (32px unused margin either side) to
hide the same bug, which is why it wasn't caught until re-testing every
tier. Real fix instead: rescaled the bars' OWN left/width percentages
(×1.04605, see home-chart-bars.html) so they genuinely span 0%→100% of
whatever container they're in — no transform, no shift, so there's
nothing that can ever push content past a container's edge regardless
of how much (or how little) margin that container happens to have at a
given tier. The 2 middle year-label positions (HomeBody.astro, "2024"/
"2025" spans) are rescaled by the same factor to preserve their
existing relationship to the bars — "2023" (0%) and "2026" (right:0)
were already true axis endpoints, untouched. */
.up-chart__bars {
position: absolute; left: 32px; top: 101px; width: 636px; height: 220px; overflow: hidden;
}
.up-bar {
/* 20.08: 36px -> 5.6604% (36/636, the desktop bars-container width) so the
SAME markup fills a container of any width — at the desktop 636px
container this resolves back to exactly 36px (no visual change there);
the mobile bucket (≤1439px) now stretches the whole chart across its
card instead of a fixed-scale thumbnail (Mikhail: "растянуть на всю
подложку"). Bar y-position also switched left/top-px -> left/bottom-%
in the html partial — all 14 bars already shared the same bottom edge
(top+height=220 for every one), so this is a lossless re-expression,
not a redesign.
24.08: 5.6604% -> 5.9211% (×1.04605, see .up-chart__bars comment
above) — the 14 bars' left+width never actually summed to 100% of
their container (0-95.5974%), reading as "shifted left" against the
card. Rescaled so the last bar's right edge lands at exactly 100%. */
position: absolute; width: 5.9211%;
transform-origin: bottom;
transition: transform 150ms ease, filter 150ms ease;
cursor: pointer;
}
.up-bar:hover {
transform: scaleY(1.05);
filter: brightness(1.2);
}
.up-chart__labels {
position: absolute; left: 32px; top: 321px; width: 636px; height: 14px; overflow: hidden;
font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 10px;
color: rgba(255,255,255,0.6); white-space: nowrap;
}
.up-chart__labels span { position: absolute; top: 0; }
/* KPI grid */
.up-kpis {
position: absolute; left: 724px; top: 0; width: 556px; height: 360px;
}
.up-kpi-row {
position: absolute; width: 556px; height: 172px;
display: flex; gap: 16px;
}
.up-kpi {
width: 270px; height: 172px;
background: rgba(22,27,34,0.6); backdrop-filter: blur(15px);
box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.15);
display: flex; flex-direction: column; justify-content: space-between;
padding: 24px; box-sizing: border-box; position: relative; overflow: hidden;
}
.up-kpi::after {
content: ''; position: absolute; inset: 0; border-radius: inherit;
box-shadow: inset 2px 2px 4px 0 rgba(255,255,255,0.16); pointer-events: none;
}
.up-kpi__val {
font-family: 'Fraunces', serif; font-weight: 300; font-size: 40px;
color: white; letter-spacing: -0.4px; line-height: normal;
font-variation-settings: "SOFT" 0, "WONK" 1; margin: 0; white-space: nowrap; word-break: break-word;
}
.up-kpi__label {
font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 14px;
color: white; margin: 0;
}
.up-kpi__sub {
font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 12px;
color: rgba(255,255,255,0.65); margin: 0;
}
.up-offplan {
position: relative; width: 1440px; background: #f2f0ec;
padding: 80px; box-sizing: border-box;
display: flex; flex-direction: column; gap: 40px; align-items: flex-start;
}
.up-offplan__head {
display: flex; align-items: flex-end; justify-content: space-between;
overflow: hidden; width: 1280px; flex-shrink: 0;
margin-bottom: -32px; /* 18.07 v3: title→nav-top canon = 8px (flex gap:40 + margin:-32 = 8) */
}
.up-offplan__head-l {
display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
overflow: hidden; flex-shrink: 0;
/* 26.08 (live QA bug, shared component — affects every ActiveProjectsCarousel
consumer: homepage Featured Off-Plan, PropertyCard's More-from-developer/
More-in-district, DistrictHub/EmirateHub/EmirateIndex/DeveloperHub/FaqPageBody
carousels): without an explicit width, a flex-column item with no width and
`flex-shrink:0` sizes to its own max-content width regardless of the parent's
size — for a long developer/district name at the 64px desktop .up-offplan__title
size, that max-content width can exceed .up-offplan__head's fixed 1280px, and
since .up-offplan__title has no white-space:nowrap, the browser doesn't wrap it
either (nothing forces a narrower box) — the excess just gets hard-clipped
mid-word by .up-offplan__head's own overflow:hidden (live-confirmed: "More from
Palladium Prime Real Estate Development." clipped to "...Real Estate Deve" at
1440px). Constraining head-l to the same 1280px its parent already reserves
(matching the existing <=480px tier's own `width:100% !important` fix for this
same element, a few hundred lines below) makes the title wrap onto a 2nd line
within the rail instead — same technique already proven at that narrower tier,
just applied at desktop too. Short titles (e.g. "On the desk this week") are
unaffected — width:100% of an already-generous 1280px box doesn't change
anything when the content already fits on one line. */
width: 100%;
}
.up-offplan__kicker {
font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
color: #6B6963; letter-spacing: 0.66px; white-space: nowrap; margin: 0;
}
.up-offplan__title {
font-family: 'Fraunces', serif; font-weight: 400; font-size: 64px;
color: #0e0e10; line-height: 1; letter-spacing: -1.28px; margin: 0;
font-variation-settings: "SOFT" 0, "WONK" 1;
/* 26.08 code-review follow-up: head-l's own width:100% fix (above) only
wraps at normal word/space boundaries — a hypothetical single unbroken
token longer than 1280px (no real developer/district name in current
data is one word, but nothing guarantees future data won't be) would
still overflow past .up-offplan__head's overflow:hidden. Belt-and-
braces safety net, doesn't change how any current real title renders. */
overflow-wrap: anywhere;
}
.up-offplan__nav {
display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-shrink: 0;
align-self: flex-end;
margin-bottom: -20px; /* 18.07 v3: see src/styles/global.css .up-offplan__nav for full rationale (shared flex-column gap double-count + align-self fix) */
}
.up-offplan__nav button {
width: 32px; height: 32px; border: none; background: none; padding: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.up-offplan__row {
display: flex; gap: 16px; align-items: flex-start;
overflow-x: auto; overflow-y: hidden; width: 1280px; flex-shrink: 0;
scroll-snap-type: x mandatory; scroll-behavior: smooth;
}
.up-offplan__row::-webkit-scrollbar { display: none; }
/* 18.07: removed a ~70-line exact/near-exact duplicate of the whole .up-offplan-card family
(18 classes) — global.css has byte-identical rules for 16 of them, and its own versions of
the remaining 2 (.up-offplan-card base rule, .up-offplan-card__name-wrap) are the MORE
correct ones: global.css's base rule deliberately omits width:384px/scroll-snap (a real bug
fix from 2026-07-06, documented there — a universal 384px broke a WordPress-era grid
layout), scoping that width instead to `.up-offplan__row .up-offplan-card`. Verified every
current Astro consumer (HomeBody/RelatedProjects/PropertiesCatalogPage, via
ProjectOffplanCard.astro) always wraps cards in .up-offplan__row, so global.css's scoped
rule covers 100% of real usage — this wp-inline.css copy was pure redundant/stale duplication. */
.uaeprop-sec-developer-access {
background-color: #eae5dd;
display: flex;
flex-direction: column;
gap: 60px; /* 18.07 v2: FIXED — real "last text" is .dev-list (the DUBAI HOLDING·...·TIGER line), not .dev-title; only 2 direct children (dev-head, dev-logos) so bumping the shared gap is safe here, no other pair affected */
align-items: flex-start;
padding: 80px;
position: relative;
width: 1440px;
min-height: 495px;
height: auto;
box-sizing: border-box;
}
.uaeprop-sec-developer-access .dev-head {
word-break: break-word;
display: flex;
align-items: flex-start;
justify-content: space-between;
overflow: clip;
position: relative;
flex-shrink: 0;
/* 19.08: was hardcoded 1280px — parent section already pads correctly via its own !important
rule (~line 871), so 100% just fills the already-correct content box at any width. */
width: 100%;
}
.uaeprop-sec-developer-access .dev-head-l {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
overflow: clip;
position: relative;
flex-shrink: 1;
min-width: 0;
/* 19.08: was flex-shrink:0 with no width — content (dev-list, was 1280px) forced this column
to its natural (desktop) content width regardless of viewport. flex-shrink:1 + min-width:0
lets it actually shrink alongside dev-head below 1440px. */
}
.uaeprop-sec-developer-access .dev-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-weight: 500;
line-height: normal;
position: relative;
flex-shrink: 0;
color: #6B6963;
font-size: 11px;
letter-spacing: 0.66px;
white-space: nowrap;
margin: 0;
}
.uaeprop-sec-developer-access .dev-title {
font-family: 'Fraunces', serif;
font-weight: 400;
line-height: 1.05;
position: relative;
flex-shrink: 0;
color: #0e0e10;
font-size: 64px;
letter-spacing: -1.28px;
width: 720px;
font-variation-settings: "SOFT" 0, "WONK" 1;
margin: 0;
}
.uaeprop-sec-developer-access .dev-title p { line-height: 1.05; margin-bottom: 0; }
.uaeprop-sec-developer-access .dev-list {
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 400;
line-height: 1.5;
position: relative;
flex-shrink: 0;
color: #6B6963;
font-size: 16px;
letter-spacing: normal;
/* 19.08: was hardcoded 1280px, overflowed 769-1439px (parent dev-head-l now shrinks properly). */
width: 100%;
margin: 0;
}
.uaeprop-sec-developer-access .dev-logos {
/* 20.08: 6-per-row flex (200px fixed cells) -> 3-per-row grid, per Mikhail
request ("везде где у нас есть подобный блок" — same change also applied
to /about/'s own separate abt-partners__grid). Grid splits the rail evenly
at any viewport instead of only lining up at exactly 1280px content width. */
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px 16px;
align-items: center;
overflow: clip;
position: relative;
flex-shrink: 0;
width: 100%;
}
.uaeprop-sec-developer-access .logo-cell {
display: flex;
height: 88px;
align-items: center;
justify-content: center;
overflow: clip;
position: relative;
flex-shrink: 0;
width: 100%;
box-sizing: border-box;
}
.uaeprop-sec-developer-access .logo-rect {
height: 52px;
position: relative;
flex-shrink: 0;
width: 152px;
}
.uaeprop-sec-developer-access .logo-rect img {
position: absolute;
inset: 0;
max-width: none;
object-fit: contain;
pointer-events: none;
width: 100%;
height: 100%;
filter: grayscale(1);
}
/* PHP renderer uses up-devaccess__logo-cell — alias to logo-cell styles */
.uaeprop-sec-developer-access .up-devaccess__logo-cell {
display: flex;
height: 88px;
align-items: center;
justify-content: center;
overflow: clip;
position: relative;
flex-shrink: 0;
width: 100%;
box-sizing: border-box;
text-decoration: none;
}
.uaeprop-sec-developer-access .up-devaccess__logo-cell img {
position: relative;
max-width: 152px;
max-height: 52px;
object-fit: contain;
filter: grayscale(1);
width: auto;
height: auto;
}
.up-testimonials {
position: relative; width: 100% !important; max-width: none !important; background: #f2f0ec;
padding-top: 80px; padding-bottom: 80px;
padding-left: max(80px, calc((100% - 1280px) / 2)) !important;
padding-right: max(80px, calc((100% - 1280px) / 2)) !important;
box-sizing: border-box;
display: flex; flex-direction: column; gap: 56px; align-items: flex-start;
word-break: break-word;
}
.up-testimonials__head {
display: flex; align-items: flex-end; justify-content: space-between;
width: 100%; overflow: hidden; flex-shrink: 0;
margin-bottom: -48px; /* 18.07 v3: sub→nav-top canon = 8px (flex gap:56 + margin:-48 = 8) */
}
.up-testimonials__head-l {
display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.up-testimonials__head-nav {
display: flex; gap: 12px; align-items: center; justify-content: flex-end;
align-self: flex-end; /* 18.07 v3: .up-testimonials is a flex-column with align-items:flex-start — without this, nav (now a flex ITEM, not the positioning parent) shrinks to its own content width and sticks to the LEFT rail edge instead of the right, since justify-content on nav only arranges its own 2 buttons, not nav's own position */
margin-bottom: -36px; /* 18.07 v3: nav→track canon = 20px (flex gap:56 + margin:-36 = 20). Moved out of .up-testimonials__head in the markup (see .wtbn-head-nav) — .up-testimonials is a flex-column with a shared gap:56px between ALL children, so inserting nav as a new sibling silently double-counts that gap unless cancelled here */
}
.up-testimonials__chev {
width: 32px; height: 32px; border: none; background: none; padding: 0;
cursor: pointer; display: flex; align-items: center; justify-content: center;
flex-shrink: 0; opacity: 0.75; transition: opacity 150ms ease;
}
.up-testimonials__chev:hover {
opacity: 1;
}
.up-testimonials__kicker {
font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
color: #6B6963; letter-spacing: 0.66px; white-space: nowrap; margin: 0;
}
.up-testimonials__title {
font-family: 'Fraunces', serif; font-weight: 400; font-size: 64px;
color: #0e0e10; line-height: 1; letter-spacing: -1.28px; margin: 0; white-space: nowrap;
font-variation-settings: "SOFT" 0, "WONK" 1;
}
.up-testimonials__sub {
font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 16px;
color: #6B6963; line-height: 1.5; width: 720px; margin: 0;
}
.up-testimonials__quotes {
display: flex; gap: 24px; align-items: flex-start;
width: calc(100% + 80px) !important; overflow-x: auto; overflow-y: hidden;
scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;
flex-shrink: 0; scroll-snap-type: x mandatory;
}
.up-testimonials__quotes::-webkit-scrollbar { display: none; }
.up-quote {
background: #eae5dd; display: flex; flex-direction: column; gap: 24px;
align-items: flex-start; justify-content: space-between; overflow: hidden; padding: 32px;
flex-shrink: 0; width: 411px; height: 360px; box-sizing: border-box;
scroll-snap-align: start; border-radius: 16px; /* 18.07: sitewide card-radius canon, matches .up-ecard-dubai/.up-ecard-sm/.up-offplan card */
}
.up-quote__mark {
font-family: 'Fraunces', serif; font-weight: 700; font-size: 96px;
color: #d28b5a; line-height: 0.4; white-space: nowrap; margin: 0;
font-variation-settings: "SOFT" 0, "WONK" 1;
}
.up-quote__text {
font-family: 'Fraunces', serif; font-weight: 400; font-size: 22px;
color: #0e0e10; line-height: 1.3; width: 347px; margin: 0;
font-variation-settings: "SOFT" 0, "WONK" 1;
}
.up-quote__attr {
font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 12px;
color: #6B6963; line-height: 1.5; letter-spacing: 0.24px; width: 347px; margin: 0;
}
.up-testimonials__bottom {
display: flex; align-items: center; justify-content: space-between; width: 100%;
}
.up-testimonials__nav-dots {
display: flex; gap: 12px; align-items: center; flex: 1; justify-content: center;
}
.up-testimonials__dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--wp--preset--color--dot-inactive);
flex-shrink: 0;
}
.up-testimonials__dot--active {
background: var(--wp--preset--color--dot-active);
}
/* Section 14 — Quarter in 8 pages */
.up-quarter {
background: #d28b5a;
padding: 80px;
box-sizing: border-box;
width: 1440px;
display: flex;
gap: 64px;
align-items: center;
position: relative;
overflow: hidden;
min-height: 480px;
}
.up-quarter__t {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
overflow: hidden;
width: 720px;
flex-shrink: 0;
position: relative;
z-index: 2;
}
.up-quarter__kicker {
font-family: 'JetBrains Mono', monospace;
font-weight: 500;
font-size: 11px;
color: #ffffff;
letter-spacing: 0.66px;
line-height: normal;
margin: 0;
white-space: nowrap;
}
.up-quarter__title {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 80px;
color: #0e0e10;
letter-spacing: -1.6px;
line-height: 1;
font-variation-settings: "SOFT" 0, "WONK" 1;
width: 720px;
margin: 0;
}
.up-quarter__title-l1, .up-quarter__title-l2 {
display: block;
}
.up-quarter__body {
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 400;
font-size: 16px;
color: #0e0e10;
line-height: 1.6;
width: 600px;
margin: 0;
}
.up-quarter__btns {
display: flex;
gap: 12px;
align-items: flex-start;
overflow: hidden;
}
.up-quarter__btn-primary {
background: #2d3745;
color: #ffffff;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: normal;
padding: 16px 28px;
border-radius: 999px;
border: none;
cursor: pointer;
text-decoration: none;
display: inline-block;
white-space: nowrap;
}
.up-quarter__btn-secondary {
background: transparent;
color: #0e0e10;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: normal;
padding: 16px 28px;
border-radius: 999px;
border: 1px solid #2d3745;
cursor: pointer;
text-decoration: none;
display: inline-block;
white-space: nowrap;
}
.up-quarter__img {
position: absolute;
height: 641px;
left: 615px;
top: -66px;
width: 825px;
object-fit: cover;
pointer-events: none;
}
/* Section 15 — FAQ (emirate-style) */
.up-faq {
background: #f2f0ec;
padding: 80px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 48px;
position: relative;
}
.up-faq__head {
display: flex;
flex-direction: column;
gap: 16px;
overflow: hidden;
}
.up-faq__kicker {
font-family: 'JetBrains Mono', monospace;
font-weight: 500;
font-size: 11px;
color: #6B6963;
letter-spacing: 0.66px;
line-height: normal;
margin: 0;
}
.up-faq__title {
font-family: 'Fraunces', serif;
font-weight: 400;
font-size: 64px;
color: #0e0e10;
letter-spacing: -1.28px;
line-height: 1.15;
font-variation-settings: "SOFT" 0, "WONK" 1;
margin: 0;
}
/* emirate-style accordion classes (up-faq2 prefix avoids conflict with tem-faq on emirate pages) */
.up-faq2__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(14,14,16,0.12); }
.up-faq2__list li { border-bottom: 1px solid rgba(14,14,16,0.12); }
.up-faq2__q { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; cursor: pointer; gap: 24px; list-style: none; -webkit-appearance: none; }
.up-faq2__q::-webkit-details-marker { display: none; }
.up-faq2__qt { font-family: 'Fraunces', serif; font-weight: 400; font-size: 24px; color: #0e0e10; line-height: 1.3; font-variation-settings: "SOFT" 0, "WONK" 1; flex: 1; margin: 0; }
.up-faq2__icon { flex-shrink: 0; font-family: 'Fraunces', serif; font-weight: 300; font-size: 32px; color: #d28b5a; line-height: 1; transition: transform 200ms ease; user-select: none; }
details[open] .up-faq2__icon { transform: rotate(45deg); }
.up-faq2__a { font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; line-height: 1.7; color: rgba(14,14,16,0.75); padding: 0 0 20px 0; margin: 0; overflow: hidden; }
/* Section 16 — Final CTA */
.up-final-cta {
background: #d28b5a;
padding: 80px;
box-sizing: border-box;
width: 1440px;
display: flex;
flex-direction: column;
gap: 32px;
align-items: flex-start;
position: relative;
}
.up-final-cta__title {
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 64px;
color: #0e0e10;
letter-spacing: -1.28px;
line-height: 1;
font-variation-settings: "SOFT" 0, "WONK" 1;
width: 1280px;
margin: 0;
}
.up-final-cta__sub {
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 400;
font-size: 16px;
color: #0e0e10;
line-height: 1.6;
width: 100%;
max-width: 1280px;
white-space: nowrap;
margin: 0;
}
@media (max-width: 900px) {
.up-final-cta__sub { white-space: normal; }
}
.up-final-cta__form {
display: flex;
gap: 12px;
align-items: center;
overflow: visible;
width: 1280px;
}
.up-final-cta__input {
/* 24.07: reverted to the pre-18.07 white-pill spec (Mikhail explicit — the 18.07 dark-unification
was his own call at the time, but he asked today for this specific form back to white/dark-text;
button color+radius are untouched, they predate 18.07 and already match this pill shape). */
background: #ffffff;
height: 64px;
display: flex;
align-items: center;
overflow: hidden;
padding: 20px 24px;
border-radius: 999px;
width: 380px;
border: none;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 400;
font-size: 15px;
color: #0e0e10;
box-sizing: border-box;
outline: none;
}
.up-final-cta__input::placeholder {
color: #6B6963;
}
.up-final-cta__submit {
background: #2d3745;
color: #ffffff;
height: 64px;
display: flex;
align-items: center;
overflow: hidden;
padding: 20px 32px;
border-radius: 999px;
border: none;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 700;
font-size: 15px;
line-height: normal;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
}
/* ITI dropdown fix for final-cta — ensure dropdown renders above section */
.up-final-cta .iti { overflow: visible !important; }
.up-final-cta .iti__country-container { overflow: visible !important; }
.up-final-cta .iti__dropdown-content {
background: #2d3745 !important;
border: 1px solid rgba(255,255,255,0.15) !important;
border-radius: 10px !important;
z-index: 99999 !important;
}
.up-final-cta .iti__country-name,
.up-final-cta .iti__dial-code {
color: #f7edd9 !important;
}
.up-final-cta .iti__country:hover {
background: rgba(255,255,255,0.08) !important;
}
.up-final-cta .iti__search-input {
background: rgba(255,255,255,0.1) !important;
color: #f7edd9 !important;
border: 1px solid rgba(255,255,255,0.2) !important;
}
@font-face{
font-family: 'IBM Plex Sans';
src: url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display:swap;
}
@font-face{
font-family: 'IBM Plex Sans';
src: url('/fonts/ibm-plex-sans-400-cyrillic.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display:swap;
unicode-range: U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F;
}
@font-face{
font-family: 'IBM Plex Sans';
src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display:swap;
}
@font-face{
font-family: 'IBM Plex Sans';
src: url('/fonts/ibm-plex-sans-500-cyrillic.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display:swap;
unicode-range: U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F;
}
@font-face{
font-family: 'IBM Plex Sans Arabic';
src: url('/fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display:swap;
unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
font-family: 'IBM Plex Sans Arabic';
src: url('/fonts/ibm-plex-sans-arabic-500.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display:swap;
unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
font-family: 'IBM Plex Sans Arabic';
src: url('/fonts/ibm-plex-sans-arabic-700.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display:swap;
unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face{
font-family: 'JetBrains Mono';
src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
font-weight: 400 500; font-style: normal; font-display:swap;
}
@font-face{
font-family: 'JetBrains Mono';
src: url('/fonts/jetbrains-mono-500-cyrillic.woff2') format('woff2');
font-weight: 400 500; font-style: normal; font-display:swap;
unicode-range: U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F;
}
.up-footer {
position: relative; width: 100%; background: var(--wp--preset--color--bg-dark); box-sizing: border-box;
}
.up-footer__inner {
width: 100%; max-width: 1440px; margin: 0 auto;
padding: 80px 80px 40px 80px; box-sizing: border-box;
}
/* ── Top row: brand left + columns right ── */
.up-footer__top {
display: flex;
align-items: flex-start;
gap: 0;
margin-bottom: 48px;
}
/* ── Brand block (left ~44%) ── */
.up-footer__brand {
display: flex; flex-direction: column; gap: 16px;
flex: 0 0 auto;
min-width: 220px; max-width: 260px;
}
.up-footer__brand img { display: block; width: 101px; height: auto; }
.up-footer__brand p {
font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 14px;
color: rgba(255,255,255,0.65); line-height: 1.6; margin: 0;
}
/* ── 5 columns (right ~56%) — Wave-G: right-align cols block to rail edge ── */
.up-footer__cols {
display: flex;
flex: 0 0 auto;
margin-left: auto;
gap: 40px;
align-items: flex-start;
justify-content: flex-start;
}
.up-footer__col {
display: flex; flex-direction: column;
flex: 0 0 auto;
min-width: 0;
}
/* Wave-G: gap handles spacing, no margin-left needed */
.up-footer__col + .up-footer__col { margin-left: 0; }
.up-footer__col-heading {
display: block;
font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
color: #d28b5a; letter-spacing: 0.66px;
margin-bottom: 12px;
white-space: nowrap;
text-transform: none;
}
.up-footer__col a {
font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 14px;
color: rgba(255,255,255,0.85); text-decoration: none;
margin-bottom: 12px; display: block; white-space: nowrap;
}
.up-footer__col a:last-child { margin-bottom: 0; }
.up-footer__col a:hover { color: #d28b5a; }
/* ── Bottom bar ── */
.up-footer__legal {
display: flex; justify-content: space-between; align-items: center;
padding-top: 18px; border-top: 1px solid #3a3a3c;
gap: 16px; flex-wrap: wrap;
}
.up-footer__legal-copy {
font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 12px;
color: rgba(255,255,255,0.4);
}
.up-footer__legal-right {
display: flex; align-items: center; gap: 16px;
}
.up-footer__legal-privacy {
font-family: 'IBM Plex Sans', sans-serif; font-weight: 400; font-size: 12px;
color: rgba(255,255,255,0.4); text-decoration: none;
}
.up-footer__legal-privacy:hover { color: rgba(255,255,255,0.7); }
/* Lang switcher in footer bottom bar */
.up-footer__legal-lang {
font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 12px;
color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 4px;
}
.up-footer__legal-lang a { color: rgba(255,255,255,0.5); text-decoration: none; }
.up-footer__legal-lang a:hover { color: rgba(255,255,255,0.8); }
.up-footer__legal-lang .up-lang-sep { color: rgba(255,255,255,0.25); }
.up-footer__legal-lang .up-lang-active { color: rgba(255,255,255,0.85); }
/* Tier 1c Class B (18.08): removed dead duplicate @media(1100px)/@media(900px)
.up-footer* rules that lived here — src/layouts/BaseLayout.astro's own
\3c style id="up-footer-css"> block (later in document order, same specificity)
already wins the cascade (live-verified: .up-footer__inner computed to 24px
at 700px, matching BaseLayout's value, not this file's stale 20px) and is
the live/maintained copy. See specs/MOBILE_DESIGN_CANON_20260817.md and the
mobile spacing audit report. */
.uaeprop-hp-field{opacity:0;position:absolute;top:0;left:0;height:0;width:0;z-index:-1;overflow:hidden;pointer-events:none}
.up-cbm-overlay{position:fixed;inset:0;background:rgba(14,14,16,.6);z-index:99990;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .22s ease}
.up-cbm-overlay.up-cbm-visible{opacity:1}
.up-cbm-overlay[hidden]{display:none!important}
.up-cbm-card{background:rgba(45,55,69,0.8);backdrop-filter:blur(12.35px);-webkit-backdrop-filter:blur(12.35px);border:none;border-radius:24px;padding:40px 36px 36px;max-width:440px;width:100%;position:relative;box-shadow:10px 10px 20px rgba(0,0,0,0.2);font-family:inherit}
.up-cbm-close{position:absolute;top:16px;right:16px;background:none;border:none;cursor:pointer;color:rgba(255,255,255,0.8);padding:4px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .15s}
.up-cbm-close:hover{background:rgba(255,255,255,0.12)}
.up-cbm-title{font-family:'Fraunces',Georgia,serif;font-size:clamp(22px,3vw,28px);font-weight:600;color:#fff;margin:0 0 24px;line-height:1.2}
.up-cbm-form{display:flex;flex-direction:column;gap:14px}
.up-cbm-field{display:flex;flex-direction:column;gap:5px}
.up-cbm-field label{font-size:13px;font-weight:500;color:rgba(255,255,255,0.75);letter-spacing:.01em}
.up-cbm-field input{background:rgba(255,255,255,0.08);border:1.5px solid rgba(255,255,255,0.2);border-radius:10px;padding:12px 14px;font-size:15px;color:#fff;outline:none;transition:border-color .18s;width:100%;box-sizing:border-box}
.up-cbm-field input::placeholder{color:rgba(255,255,255,0.45)}
.up-cbm-field input:focus{border-color:var(--wp--preset--color--accent)}
.up-cbm-field input.up-cbm-invalid{border-color:var(--wp--preset--color--error)}
.up-cbm-submit{background:#d28b5a;color:#fff;border:none;border-radius:26px;height:52px;padding:0;font-size:14px;font-weight:700;cursor:pointer;transition:background .18s;margin-top:4px;width:100%}
.up-cbm-submit:hover{background:#c07a49}
.up-cbm-submit:disabled{opacity:.6;cursor:not-allowed}
.up-cbm-success{color:#a8f0b0;font-size:14px;font-weight:500;text-align:center;margin:8px 0 0}
.up-cbm-error{color:#ffaaaa;font-size:13px;text-align:center;margin:4px 0 0}
@media(max-width:480px){.up-cbm-card{padding:28px 20px 24px}}
.up-cbm-card .iti__selected-dial-code{color:#fff!important;}
.up-cbm-card .iti__arrow{border-top-color:rgba(255,255,255,0.7)!important;}
.up-cbm-card .iti__country-container{background:rgba(255,255,255,0.08)!important;border-radius:10px 0 0 10px!important;border-right:1px solid rgba(255,255,255,0.15)!important;}
.up-cbm-card .iti__selected-country{border-radius:10px 0 0 10px!important;}
.up-hero .iti__selected-dial-code{color:#fff!important;}
.up-hero .iti__arrow{border-top-color:rgba(255,255,255,0.7)!important;}
.up-hero .iti__country-container{background:rgba(255,255,255,0.08)!important;border-radius:10px 0 0 10px!important;border-right:1px solid rgba(255,255,255,0.18)!important;}
.up-hero .iti__selected-country{border-radius:10px 0 0 10px!important;}
/* 24.07: reverted to white/ink pill, matching .up-final-cta__input's own 24.07 revert back to white */
.up-final-cta .iti__selected-dial-code{color:var(--wp--preset--color--ink)!important;}
.up-final-cta .iti__arrow{border-top-color:rgba(14,14,16,0.5)!important;}
.up-final-cta .iti__country-container{background:#ffffff!important;border-radius:999px 0 0 999px!important;border-right:1px solid rgba(14,14,16,0.15)!important;}
.up-final-cta .iti__selected-country{border-radius:999px 0 0 999px!important;}
.googlesitekit-sign-in-with-google__frontend-output-button{max-width:320px}
/* ══════════════════════════════════════════════════════════════════════
HOMEPAGE BODY — MOBILE RESPONSIVE (added 2026-07-16)
The Figma-exported homepage sections above (hero → final-cta) had
essentially zero @media coverage — fixed 1440px-canvas absolute
positioning throughout. Confirmed live at 390px: document.body.scrollWidth
was 1360px (860px+ overflow), hero H1 ran off-screen, several section
headings were cropped ("Across the five emirates" / "Less brokerage,
more intelligence" / "Numbers, dated" / "On the record" / "The quarter
in 8 pages"). Fixed here, matching the site's existing mobile-breakpoint
convention (@media(max-width:768/480px), !important overrides — see the
About/Contact page blocks earlier in this file) rather than introducing
a new scheme. Pattern used for absolute-positioned sections: reset ALL
descendants to position:static via a blanket `.section *` rule, then
re-apply position:relative/absolute only where an overlay genuinely
needs it (image card text, chart bars) — always placed AFTER the
blanket reset in source order so the more specific override wins.
19.08: widened 768px -> 1439px. Same root cause as everywhere else fixed
today — this whole homepage (hero through final-cta) was Figma-exported
at a fixed 1440px canvas with zero coverage for 769-1439px, so every
section here overflowed in that band (confirmed via a full-site sweep:
emirate cards, WWD service cards, numbers/KPI rows, hero form/kicker —
all up to 460px overflow at 900-1300px). This block's mobile-safe
static-position + stacked-flex layout is already proven correct at
<=768px; reusing it for the whole gap is the same low-risk pattern as
the footer/emirate/wtbn fixes earlier in this session, rather than
building a bespoke tablet layout for each section under time pressure.
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1439px) {
/* ── HERO ── */
.up-hero, .up-hero * { position: static !important; }
.up-hero {
display: flex !important; flex-direction: column !important;
height: auto !important; width: 100% !important; overflow: visible !important;
}
.up-hero__bg { display: none !important; }
/* 18.08 Mikhail round 3: "text+button on top, picture below it, ticker
right after the picture" — reordered via flex `order` (all 4 visible
children share .up-hero's flex column, no markup change needed).
.up-strip-ext (a second copy of the SAME photo file, see below) is
hidden on mobile so the ticker really does land immediately after
the one photo, not after a second dark strip.
21.08: h1/kicker's own `order` rules (used to live here as order:1/2)
are dead at THIS phone tier since the tablet-grid fix wrapped them in
.up-hero__textcol (HomeBody.astro) — order only affects an item among
its OWN flex siblings, and h1/kicker are no longer direct children of
`.up-hero`'s flex column, .up-hero__textcol is. Moved the order value
to the wrapper (h1 renders before kicker inside it via plain DOM order,
.up-hero__textcol isn't flex at this phone tier so no order needed
between them). Caught by review — was silently working by accident
(an unstyled div defaults to order:0, which happened to sort first
anyway), not by the mechanism this comment describes.
22.08: .up-hero__kicker moved out of .up-hero__textcol into a new
shared wrapper with the form, .up-hero__ctacol (see the 600-1439px
block below) — needs its own order at THIS phone tier now, between
the heading (1) and the mobile CTA button (3), same visual sequence
as before (h1, kicker, button, photo); .up-hero__form inside it stays
display:none per the rule further down, only the kicker renders. */
.up-hero__textcol { order: 1 !important; }
.up-hero__ctacol { order: 2 !important; }
.up-hero__mobile-cta { order: 3 !important; }
.up-hero__strip { order: 4 !important; width: 100% !important; height: 220px !important; margin-top: 32px !important; position: relative !important; left: auto !important; top: auto !important; }
.up-hero__strip img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; min-height: 0 !important; }
.up-hero__grad { display: none !important; }
/* Same photo file as .up-hero__strip (a second desktop-only crop window
of one continuous tall image) — on mobile the single .up-hero__strip
crop is enough; showing this too would put a second dark strip
between the CTA card and the ticker instead of the ticker landing
right after the one photo, as asked. */
.up-strip-ext { display: none !important; }
.up-hero__kicker { white-space: normal !important; font-size: 11px !important; padding: 32px 24px 0 24px !important; line-height: 1.4 !important; width: 100% !important; box-sizing: border-box !important; }
.up-hero__h1 { width: auto !important; padding: 40px 24px 0 24px !important; }
.up-hero__h1-line1 { font-size: 32px !important; letter-spacing: -0.5px !important; white-space: normal !important; }
.up-hero__h1-uae { font-size: 52px !important; letter-spacing: -1px !important; white-space: normal !important; }
/* 25.08: dropped the line-height:1 override here — line1/uae above both
inherit the base rule's 0.95 unchanged, so prop having its own 1.0 was
the same class of mismatch as the desktop bug just fixed above (0.95
vs 0.42 there), just smaller (0.95 vs 1.0, ~5%). Removing it lets prop
inherit the same 0.95 as its siblings, matching them exactly. */
.up-hero__h1-prop { font-size: 52px !important; letter-spacing: -1px !important; white-space: normal !important; }
html[lang="ru"] .up-hero__h1,
html[lang="ar"] .up-hero__h1 { width: auto !important; }
html[lang="ru"] .up-hero__h1-line1,
html[lang="ar"] .up-hero__h1-line1 { font-size: 27px !important; line-height: 1.15 !important; letter-spacing: 0 !important; white-space: normal !important; }
html[lang="ru"] .up-hero__h1-uae,
html[lang="ar"] .up-hero__h1-uae { font-size: 44px !important; line-height: 1.05 !important; letter-spacing: 0 !important; white-space: normal !important; }
html[lang="ru"] .up-hero__h1-prop,
html[lang="ar"] .up-hero__h1-prop { font-size: 44px !important; line-height: 1.05 !important; letter-spacing: 0 !important; white-space: normal !important; }
/* 18.08 Mikhail: the full 3-field inline form measured ~955px tall on a
390x844 viewport (image 260 + headline ~180 + kicker ~50 + form ~465
incl. margins) — the entire first screen was the form. Replaced with
.up-hero__mobile-cta (single button opening the sitewide lead modal,
see HomeBody.astro comment at the same spot for the full rationale). */
.up-hero__form { display: none !important; }
.up-hero__mobile-cta {
display: flex !important; flex-direction: column !important; gap: 16px !important;
width: calc(100% - 40px) !important; margin: 32px 20px 0 20px !important;
/* 18.08 Mikhail round 2: bottom margin was 40px, exposing a beige sliver
of .up-hp's background between the card and .up-strip-ext's full-bleed
dark image directly below (no wrapper/spacing between them in the DOM)
— read as an accidental gap, not an intentional section break. Zeroed
so the card's bottom edge sits flush against the strip; .up-hero keeps
overflow:visible so the card's own box-shadow still renders above/
beside it without being clipped, it just has nowhere to fall below. */
padding: 24px !important; border-radius: 16px !important; box-sizing: border-box !important;
background: rgba(45,55,69,0.85) !important;
backdrop-filter: blur(12.35px) !important; -webkit-backdrop-filter: blur(12.35px) !important;
box-shadow: 10px 8px 8px rgba(0,0,0,0.28) !important;
}
.up-hero__mobile-cta-title {
margin: 0 !important; font-family: 'Fraunces', serif !important; font-weight: 400 !important;
font-size: 22px !important; color: white !important; letter-spacing: -0.3px !important;
font-variation-settings: "SOFT" 0, "WONK" 1 !important;
}
.up-hero__mobile-cta-btn {
width: 100% !important; min-height: 52px !important; padding: 14px 24px !important;
background: #d28b5a !important; border-radius: 26px !important; border: none !important; cursor: pointer !important;
font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; color: white !important;
}
/* ── BY EMIRATE ── */
.up-emirate, .up-emirate * { position: static !important; }
.up-emirate {
width: 100% !important; height: auto !important; padding: 56px 24px !important; box-sizing: border-box !important;
display: flex !important; flex-direction: column !important; gap: 12px !important;
}
.up-emirate__kicker { font-size: 11px !important; }
.up-emirate__head { font-size: 32px !important; white-space: normal !important; }
.up-emirate__desc { white-space: normal !important; width: 100% !important; font-size: 15px !important; margin-top: 4px !important; }
/* 17.08: .ename/.estat were both `position:absolute` anchored by fixed
`bottom:Xpx` offsets, sized for a single-line city name. "Ras Al
Khaimah" and "Umm Al Quwain" wrap to 2 lines at mobile card width —
the fixed bottom:52px anchor doesn't grow with the extra line, so the
wrapped name's 2nd line physically overlapped the stat text below it
(confirmed live at 390px, both single- and double-line names showed
collision). Fix: card becomes a bottom-justified flex column so the
name/stat boxes stack from real rendered height instead of guessed
fixed offsets — .ename/.estat go `position:relative` (kept "positioned"
so they still paint above .egrad's absolute gradient overlay per DOM
order, just no longer using top/bottom coordinates). */
.up-ecard-dubai, .up-ecard-sm {
position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: 220px !important; margin-top: 16px !important;
display: flex !important; flex-direction: column !important; justify-content: flex-end !important;
}
/* 19.08: the 17.08 fix above restyled .egrad/.ename/.estat for this flex card but never
re-asserted the itself — it was left on the blanket `.up-emirate *{position:static}`
reset (line 2384) with no companion rule, so its base absolute+inset:0+100%/100% (line 510,
no !important) silently stopped resolving and the image fell back to its own intrinsic
aspect ratio (~197px tall in a 220px card) instead of covering the card — leaving a bare
~23px strip of card background below the photo, with the name/stat text sitting on that
strip instead of overlaid on the image (Mikhail: "текст на подложке под картинкой, не на
картинке, как на десктопе"). Restoring it as a full-bleed absolute background layer, same
pattern as .egrad right below. */
.up-ecard-dubai img, .up-ecard-sm img {
position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important;
}
.up-ecard-dubai .egrad, .up-ecard-sm .egrad { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
.up-ecard-dubai .ename, .up-ecard-sm .ename {
position: relative !important; left: auto !important; top: auto !important; bottom: auto !important;
width: calc(100% - 40px) !important; margin: 0 20px 4px !important; font-size: 26px !important;
}
.up-ecard-dubai .estat, .up-ecard-sm .estat {
position: relative !important; left: auto !important; top: auto !important; bottom: auto !important;
width: calc(100% - 40px) !important; margin: 0 20px 18px !important; white-space: normal !important; font-size: 12px !important;
}
/* ── KEY DIFFERENTIATORS ── */
.up-diff { height: auto !important; padding: 32px 24px !important; box-sizing: border-box !important; }
.up-diff__inner {
position: static !important; transform: none !important; width: 100% !important;
display: flex !important; flex-direction: column !important; gap: 4px !important;
}
/* 20.08: markup gained a .up-diff__item wrapper per stat (see below,
needed to build a real 3-across tablet row) — phone view stays a
flat stacked column same as before, just via .up-diff__item instead
of resetting .up-diff__inner's direct children (now the items, not
the spans) one level deeper. */
.up-diff__item, .up-diff__item > * { position: static !important; }
.up-diff__item { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.up-diff__item + .up-diff__item { margin-top: 16px !important; }
.up-diff__sep { display: none !important; }
/* Base rule (desktop) sets white-space:nowrap on val/lbl/sub, sized for
fixed-width absolute-positioned boxes — never revisited when this
became a flow layout. Real risk on longer RU/AR translations (review
caught this for the tablet 3-col grid below, applies here too at
narrower single-column widths). */
.up-diff__val, .up-diff__lbl, .up-diff__sub { white-space: normal !important; }
.up-diff__num { font-size: 11px !important; }
.up-diff__val { font-size: 28px !important; }
/* ── WHERE TO BUY NOW ── */
.wtbn-head { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; width: 100% !important; }
.wtbn-head-left { width: 100% !important; }
.wtbn-heading { font-size: 28px !important; }
.wtbn-sub { font-size: 14px !important; }
.wtbn-bottom-row { flex-wrap: wrap !important; row-gap: 12px !important; }
.wtbn-viewall-wrap { width: 100% !important; }
.wtbn-view-all { white-space: normal !important; font-size: 15px !important; }
/* ── WHAT WE DO ── */
.uaeprop-sec-what-we-do { height: auto !important; width: 100% !important; padding: 56px 24px !important; box-sizing: border-box !important; }
.uaeprop-sec-what-we-do .wwd-head {
position: static !important; width: 100% !important; height: auto !important; left: auto !important; top: auto !important;
display: flex !important; flex-direction: column !important; gap: 8px !important; overflow: visible !important;
}
.uaeprop-sec-what-we-do .wwd-overline { position: static !important; }
.uaeprop-sec-what-we-do .wwd-heading {
position: static !important; width: 100% !important; font-size: 30px !important; white-space: normal !important; left: auto !important; top: auto !important;
}
.uaeprop-sec-what-we-do .wwd-sub {
position: static !important; width: 100% !important; height: auto !important; left: auto !important; right: auto !important; top: auto !important;
text-align: left !important; margin-top: 12px !important; font-size: 14px !important;
}
/* 20.08: 1-per-row stack -> 2-per-row grid, per Mikhail request (same
treatment already applied to WHY THE EMIRATES/SIX REASONS/PARTNERS
today — unrelated to .up-emirate/"BY EMIRATE" further down this
file, which keeps its own separate mobile-vs-tablet layouts).
This surrounding block is @media(max-width:1439px) (real opening at
line 2339, not the "768px" some older nearby comments still call it —
see the note above the 600-1439px tablet block) — so this one rule
already covers 390-1439px on its own. Reused the tablet block's own
gap value (32px 24px); its now-duplicate copy was removed. */
.uaeprop-sec-what-we-do .wwd-services {
position: static !important; width: 100% !important; height: auto !important; left: auto !important; top: auto !important; overflow: visible !important;
display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 32px 24px !important; margin-top: 32px !important;
}
.uaeprop-sec-what-we-do .wwd-service { position: static !important; width: 100% !important; height: auto !important; left: auto !important; overflow: visible !important; }
.uaeprop-sec-what-we-do .wwd-svc-icon { position: relative !important; left: auto !important; top: auto !important; width: 56px !important; height: 56px !important; }
.uaeprop-sec-what-we-do .wwd-svc-num,
.uaeprop-sec-what-we-do .wwd-svc-title,
.uaeprop-sec-what-we-do .wwd-svc-desc {
position: static !important; width: 100% !important; height: auto !important; left: auto !important; top: auto !important; margin-top: 8px !important;
}
/* ── SIX REASONS ── */
.up-sixreasons { padding: 56px 24px !important; }
.up-sixreasons__head { flex-direction: column !important; align-items: flex-start !important; width: 100% !important; gap: 16px !important; margin-bottom: 32px !important; }
.up-sixreasons__title { width: 100% !important; font-size: 32px !important; }
.up-sixreasons__src { text-align: left !important; width: 100% !important; }
.up-sixreasons__grid { width: 100% !important; }
/* 20.08: still 2-per-row here (grid-template-columns lives on the base rule,
unconditional) — width:100% just fills the item's own grid cell, it no
longer forces a full-row item like it did back when the container was
flex-wrap. Padding/value size shrunk so 2 columns fit a 390-440px phone
without cramming (Mikhail: phone-width report, ~440px). */
.up-reason { width: 100% !important; height: auto !important; padding: 20px !important; min-height: 160px; }
.up-reason__val { font-size: 30px !important; }
.up-reason__title, .up-reason__sub { width: 100% !important; }
/* ── NUMBERS, DATED ── */
.up-numbers { height: auto !important; padding: 56px 24px !important; box-sizing: border-box !important; }
.up-numbers__head { position: static !important; width: 100% !important; height: auto !important; left: auto !important; top: auto !important; }
.up-numbers__kicker { position: static !important; font-size: 10px !important; }
.up-numbers__title { position: static !important; width: 100% !important; font-size: 30px !important; margin-top: 8px !important; }
.up-numbers__src { position: static !important; width: 100% !important; text-align: left !important; margin-top: 12px !important; font-size: 12px !important; }
.up-numbers__row {
position: static !important; width: 100% !important; height: auto !important; left: auto !important; top: auto !important;
display: flex !important; flex-direction: column !important; gap: 32px !important; margin-top: 32px !important; overflow: visible !important;
}
/* 20.08 v2 (Mikhail: "улучши" — растянуть график на всю подложку, не
держать его узким фиксированным блоком): .up-chart back to plain
width:100%, no max-width cap — now safe because the bars themselves
are fluid (see .up-bar / .up-chart__bars below), not a fixed-scale
thumbnail, so there's no more misalignment risk at wide "mobile
bucket" widths (1024-1439px laptop windows). */
/* 20.08 v4 (Mikhail, precise diagnosis): bars/header/labels sat flush
against the card's own edges (only padding-bottom was set) — combined
with the card's border-radius:16px (§16.11 canon), square content
corners visually clashed with the rounded card corners, reading as
content "escaping" the card. Fixed with the same 16px padding the KPI
tiles right below already use (.up-kpi, ~line 2579) — matches Mikhail's
own reference ("внутренние отступы как у карточек под ним"). No
competing padding rule exists for .up-chart anywhere (grep-verified:
only border-radius + this file's own base positioning rule touch this
selector), so `!important` here is unnecessary — dropped, a review
correctly flagged it as needless specificity escalation. box-sizing:
border-box already comes from the base rule (unconditional, line
~1517), so this padding shrinks the content box rather than growing
the element past width:100% — live-verified zero horizontal overflow
both before and after this cleanup. */
.up-chart { position: relative !important; width: 100% !important; height: auto !important; min-height: 200px; overflow: hidden !important; padding: 16px; }
/* 20.08 v5 (Mikhail: "забыл про текст сверху!" — real miss): the bars got
the new padding correctly (normal-flow width:100%, respects the
parent's padding), but .up-chart__kicker/.up-chart__pct are
position:absolute — with the header itself static, they skip past it
to the NEXT positioned ancestor (.up-chart) for their containing
block, and CSS containing-block-for-absolute = the padding BOX (i.e.
starts at the padding's own outer edge, same as the border edge) —
padding only affects normal-flow layout, not absolutely-positioned
descendants' `left:0`. relative (not static) keeps .up-chart__header
in normal flow (so it's still correctly inset by the parent's
padding, unchanged) while ALSO making it the containing block for its
own absolute children — kicker/pct's `left:0`/`top:17px` then resolve
against the header's own (already-inset) box instead of skipping to
the grandparent's un-inset edge.
Self-caught bug in this exact fix: `position:relative` (unlike
`static`) DOES respect `left`/`top` — so the base rule's own
`left:32px;top:28px` (meant for the fixed-636px desktop design)
suddenly started applying too, stacking on top of the 16px padding
inset (measured: 48px/44px instead of the intended 16px/16px).
Explicitly zeroed below. */
.up-chart__header { position: relative !important; left: 0 !important; top: 0 !important; }
/* 20.08 v2: was transform:scale(0.46) on a fixed 636px-design bars box —
visually correct only at the ONE container width that scale ratio was
tuned for, and made date labels illegibly tiny when scaled together
(v1 fix). Real fix: .up-bar's width/left/height are now percentages of
their container (see .up-bar / home-chart-bars.html), so a plain
width:100% here — no transform needed — makes every bar (and the
labels below, same technique) stretch proportionally to fill whatever
width the card actually has, at ANY viewport in this range. */
.up-chart__bars { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: 140px !important; }
/* 20.08 v3 (code-review caught: flex+space-between distributes by content
width, not by container position — measured live: "2026" sat ~35-55px
right of where it should on laptop widths). Real fix: labels use the
same absolute-positioning technique as the bars instead of flex — set
inline in HomeBody.astro's 4 tags: first 3 as percentage `left`
(0/32.075/64.151%, replacing the old fixed 0/204/408px), last one
(2026) as `right:0` instead of a `left:%` value — a review caught that
a percentage `left` here overflows past the container's right edge
under `overflow:hidden` on narrow phones (the label's own text width
pushes past 100%); `right:0` anchors its right EDGE at the container
edge instead, which can never overflow.
Honesty note (a stricter review pass, correctly): none of this — old
or new — centers "2026" over the last bar. That offset (~46px on
desktop) is NOT something this fix introduced; it's baked into the
ORIGINAL fixed 612px value this replaces (live-measured: computed
left is exactly 612px / label width exactly 24px on desktop's fixed
636px box, i.e. mathematically identical to the pre-existing design,
not a new relationship). Whether the original design SHOULD have
centered the label over the bar is a separate question this fix
doesn't touch — it only reproduces the existing relationship reliably
at any container width instead of literally hardcoding it to one.
24.08: the "sdvinut vlevo" (shifted left) fix itself lives entirely in
the bars'/labels' own rescaled percentages now (see home-chart-bars.
html + HomeBody.astro's 2024/2025 label spans + the base rule's
comment above) — nothing to change at this tier, `transform:none`
here still correctly just cancels the old v1 scale() hack. */
.up-chart__labels {
position: relative !important; top: auto !important; left: auto !important;
margin-top: 10px !important; transform: none !important; width: 100% !important; height: 14px !important;
}
.up-kpis { position: static !important; width: 100% !important; height: auto !important; left: auto !important; top: auto !important; }
/* 20.08: Mikhail (phone-width report) wants the KPI tiles 2-per-row like
desktop, not stacked 1-per-row. Each .up-kpi-row already holds exactly
2 .up-kpi children (same pairing as desktop) — just switch the row back
to a wrapping flex-row and let each card claim half the width. Font
shrunk so "214,912"-class values don't overflow a ~half-phone-width card. */
.up-kpi-row { position: static !important; width: 100% !important; height: auto !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 12px !important; }
.up-kpi-row:nth-of-type(2) { margin-top: 12px !important; }
.up-kpi { width: calc(50% - 6px) !important; height: auto !important; padding: 16px !important; }
.up-kpi__val { font-size: 26px !important; }
/* ── FEATURED OFF-PLAN ── */
.up-offplan { padding: 56px 24px !important; }
.up-offplan__head { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; width: 100% !important; }
.up-offplan__head-l { width: 100% !important; }
/* 19.08 (2nd pass): was 30px — TOP COMMUNITIES (.wtbn-heading, same tier)
is 28px and was never given its own <=480px override, so it stays flat
at 28px all the way down. Matched here per Mikhail's эталон request
instead of inheriting the separate 10-section 480px canon-scale list
(MOBILE_DESIGN_CANON_20260817.md) that .up-offplan__title is also in —
see the paired 24px->28px fix at this file's @media(max-width:480px)
block for the other half of this. */
.up-offplan__title { font-size: 28px !important; width: 100% !important; }
.up-offplan__row { width: 100% !important; }
/* 19.08 (2nd pass): width 260->300 to match .up-quote (testimonial card,
same tier) per Mikhail's эталон request. Height scaled by the same ratio
(430 * 300/260 = ~496, rounded to 480) — Mikhail left height to my
judgement; img height scaled the same way (170 * 300/260 = ~196) so the
image:text proportion doesn't shift. */
.up-offplan-card { width: 300px !important; height: 480px !important; }
.up-offplan-card__img { height: 196px !important; }
.up-offplan__footer { width: 100% !important; flex-direction: column !important; gap: 12px !important; min-height: auto !important; }
/* W2_intracard: .up-offplan__dots' own padding is vertical-only (2px top/bottom
scroll-row alignment for the carousel dot indicators, ActiveProjectsCarousel.astro,
rendered on 9 consuming pages) — not a rail. The 24px side-pad already lives on
the ancestor `.up-offplan { padding: 56px 24px !important; }` rule earlier in this
same @media block (grep `.up-offplan {` in this file, not a fixed line offset —
lines shift as this file is edited). Live-verified 19.08 on the homepage at 390px:
dots row sits flush at the section's 20px @480 rail, full available width, no
edge-touching or overflow. */
.up-offplan__dots { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow-x: auto !important; overflow-y: hidden !important; justify-content: center !important; align-self: stretch !important; padding: 2px 0 !important; }
.up-offplan__dots::-webkit-scrollbar { display: none !important; }
/* 19.08 (2nd pass): justify-content was flex-start — the container is
forced full-width (for scroll capability) but the dot cluster itself
is much narrower, so flex-start left it hugging the left edge instead
of sitting centered like TOP COMMUNITIES' .wtbn-nav-dots. The earlier
"no overflow" comment above was checking a different property (overflow)
and never verified centering — Mikhail caught this live. */
.up-offplan__viewall { position: static !important; transform: none !important; font-size: 15px !important; white-space: normal !important; }
/* ── DIRECT DEVELOPER ACCESS ── */
.uaeprop-sec-developer-access { padding: 56px 24px !important; gap: 24px !important; }
.uaeprop-sec-developer-access .dev-head { flex-direction: column !important; width: 100% !important; gap: 16px !important; }
.uaeprop-sec-developer-access .dev-title { width: 100% !important; font-size: 30px !important; }
.uaeprop-sec-developer-access .dev-list { width: 100% !important; }
/* 20.08: 2-per-row -> 3-per-row (Mikhail, phone-width report) — grid columns
already come from the unconditional base rule now, this just shrinks the
logo image itself so a wide wordmark (e.g. "MAJID AL FUTTAIM") doesn't
overflow a ~1/3-phone-width cell. */
.uaeprop-sec-developer-access .dev-logos { width: 100% !important; gap: 12px 8px !important; }
.uaeprop-sec-developer-access .up-devaccess__logo-cell,
.uaeprop-sec-developer-access .logo-cell { width: 100% !important; height: 64px !important; }
.uaeprop-sec-developer-access .up-devaccess__logo-cell img,
.uaeprop-sec-developer-access .logo-rect img { max-width: 100% !important; max-height: 36px !important; }
/* ── ON THE RECORD (testimonials) ── */
.up-testimonials { padding-top: 56px !important; padding-bottom: 56px !important; padding-left: 24px !important; padding-right: 24px !important; gap: 32px !important; }
.up-testimonials__head { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
/* 19.08 (4th pass): the desktop head/head-nav margin-bottom values (-48/-36)
are negative-margin cancellations tuned against the DESKTOP gap:56px
(head→nav canon=8px: 56-48=8; nav→quotes canon=20px: 56-36=20, same
technique as .wtbn-head/.up-offplan__nav/.up-desk__head). This block
overrides gap to 32px on mobile but never recalculated the margins
against the new gap — so at mobile they over-cancel into real overlaps:
32-48=-16px (chevron row overlapping the subtitle) and 32-36=-4px
(chevron row overlapping the quote cards). Mikhail caught this live.
Recalculated for gap:32 to hit the same 8px/20px canon targets. */
.up-testimonials__head { margin-bottom: -24px !important; }
.up-testimonials__head-nav { margin-bottom: -12px !important; }
/* 19.08 (3rd pass): was 30px — matched to TOP COMMUNITIES (.wtbn-heading)
28px, same as the .up-offplan__title fix above. Paired with the
24px->28px fix at this file's @media(max-width:480px) block. */
.up-testimonials__title { font-size: 28px !important; white-space: normal !important; }
.up-testimonials__sub { width: 100% !important; }
/* Card gap: desktop 24px inherited as-is wasted width on a narrow scroll
track — tightened to the mobile card-gap canon (16px, see
MOBILE_DESIGN_CANON_20260817.md §Spacing scale). */
.up-testimonials__quotes { gap: 16px !important; }
.up-quote { width: 300px !important; height: auto !important; min-height: 280px !important; }
.up-quote__text { width: 100% !important; font-size: 18px !important; }
.up-quote__attr { width: 100% !important; }
/* Chevron nav is a 32×32 visual icon sitewide — below the 44×44 WCAG
touch-target minimum. Keep the icon size (matches the carousel's visual
language) but expand the actual hit area via an invisible ::before,
rather than blowing up the icon itself. */
.up-testimonials__chev { position: relative !important; }
.up-testimonials__chev::before {
content: ''; position: absolute; inset: -6px;
}
/* ── WRITTEN BY OUR DESK ── */
/* 19.08 (5th pass): padding-top was 56px — this is the EXACT same bug the
18.07 desktop fix already solved and documented at this file's own
`.up-desk { padding: 0 80px 80px 80px }` rule (src/styles/global.css):
the divider line .up-desk__hr gets its top-side spacing for free from
the PRECEDING section's (.up-testimonials) own bottom padding — adding
padding-top here on top of that doubles the gap around the hr line
(56+56=112px) vs the section's own top-side canon (56px, section→kicker).
Mikhail caught this live comparing dots→hr against section-top→kicker.
Set to 0 to match the desktop rule's already-fixed behavior. */
.up-desk { padding-top: 0 !important; padding-bottom: 56px !important; padding-left: 24px !important; padding-right: 24px !important; }
.up-desk__head { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
/* 19.08 (3rd pass): was 26px — matched to TOP COMMUNITIES эталон (28px),
same fix as .up-offplan__title / .up-testimonials__title above. */
.up-desk__title { font-size: 28px !important; width: 100% !important; }
/* 19.08 (5th pass): width 220->300 to match .up-quote (testimonial card)
per Mikhail's эталон request, same fix as .up-offplan-card earlier.
Also pins flex-basis/flex — the desktop `flex:0 0 296px` shorthand was
never overridden here (only width/max-width were), and flex-basis wins
over width for a non-auto flex-basis, which is why this card measured
240px live instead of the intended 220px. The image (aspect-ratio:1/1,
height:auto) scales itself automatically — no separate height rule
needed, unlike .up-offplan-card's fixed-height layout. */
.up-desk__card { width: 300px !important; max-width: 300px !important; flex: 0 0 300px !important; }
/* 19.08: was flex-direction:column + a `div[style*="flex:1"]` hide-selector —
that selector matched BOTH the empty left spacer AND the view-all link's
own wrapper (its inline style was "flex:1;text-align:right", also contains
"flex:1"), silently deleting the "View all N reports" link on every page
using this shared component (7+ pages, not just the homepage). Spacer divs
removed from the markup instead (FromTheDesk.astro) — same cleanup already
done on TOP COMMUNITIES' wtbn-bottom-row — so dots-then-viewall now stack
via plain flex-direction:column, matching the эталон layout. */
.up-desk__bottom { flex-direction: column !important; gap: 16px !important; align-items: center !important; width: 100% !important; }
.up-desk__nav-dots { flex: none !important; }
/* 19.08 (3rd pass): view-all had NO mobile override at all (stuck at the
desktop 20px), matched to TOP COMMUNITIES эталон (15px) like
.up-offplan__viewall above.
27.08: also reset position:absolute/transform back to static/none here —
the 27.08 desktop+tablet fix (src/styles/global.css) made
.up-desk__view-all unconditionally position:absolute (matching
.up-offplan__viewall's own technique) so it can sit in the same row as
the dots and stay centered. That's correct for desktop/tablet, but at
true phone widths .up-desk__bottom stacks into a column above and
view-all needs to be a normal in-flow child again to actually land
BELOW the dots (same static/none reset .up-offplan__viewall already
had here) — otherwise it stays absolutely positioned over the dots row
instead of stacking, a real regression caught live at 768px before
shipping. */
.up-desk__view-all { font-size: 15px !important; white-space: normal !important; position: static !important; transform: none !important; }
/* ── THE QUARTER IN 8 PAGES ── */
.up-quarter { flex-direction: column !important; padding: 56px 24px !important; gap: 24px !important; min-height: auto !important; overflow: hidden !important; }
.up-quarter__kicker { white-space: normal !important; } /* 18.07: was nowrap — RU/AR translations run longer than EN and got silently clipped by the parent's overflow:hidden */
.up-quarter__t { width: 100% !important; flex-shrink: 1 !important; }
.up-quarter__title { width: 100% !important; font-size: 38px !important; }
.up-quarter__body { width: 100% !important; }
.up-quarter__btns { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
.up-quarter__btn-primary, .up-quarter__btn-secondary { text-align: center !important; }
.up-quarter__img { position: static !important; width: 100% !important; height: 200px !important; left: auto !important; top: auto !important; object-fit: cover !important; border-radius: 12px !important; margin-top: 8px !important; }
/* ── FAQ ── */
.up-faq { padding: 56px 24px !important; gap: 32px !important; }
.up-faq__title { font-size: 32px !important; }
.up-faq2__qt { font-size: 18px !important; }
/* Accordion summary row itself is already a full-width ~48px+ tap target
(padding inherited from desktop
rule) — no change
needed there, only the "+" icon's own hit area is checked: it's purely
decorative inside the already-large clickable
, so no separate
target is required (WCAG 2.5.8 doesn't apply to non-interactive icons
nested inside a bigger interactive parent). */
/* ── FINAL CTA ── */
.up-final-cta { padding: 56px 24px !important; gap: 20px !important; }
.up-final-cta__title { width: 100% !important; font-size: 32px !important; white-space: normal !important; }
.up-final-cta__sub { font-size: 14px !important; }
.up-final-cta__form { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
.up-final-cta__input, .up-final-cta__submit { width: 100% !important; }
}
/* ══════════════════════════════════════════════════════════════════════
CAROUSEL DOTS/VIEW-ALL ROW RESTORE — TABLET TIER (added 2026-08-27)
Mikhail: dots must be mathematically centered on the whole row on
desktop AND tablet, with "View all N ..." in the SAME row to the right —
column stacking (view-all under dots) is allowed ONLY on true phones
(<=768px). The base <=1439px block right above this one (written
originally for phone widths, later widened to 1439px alongside other
tablet-tier work — see its own header comment) wrongly stacks
.up-offplan__footer/.up-desk__bottom into a column for the WHOLE
0-1439px range, catching real 769-1439px tablet widths too. This block
re-asserts the desktop row mechanism for 769-1439px only, using the
same later-source-wins !important technique the rest of this file
relies on throughout (e.g. the C-13 offplan-viewall font-size fix in
src/styles/global.css). 768px and below still get the base block's
column stack, untouched.
.up-offplan__footer needs its dots/viewall reset too because the base
block explicitly stretches .up-offplan__dots to width:100% and pins
.up-offplan__viewall to position:static for the phone case.
.up-desk__view-all ALSO needs position:absolute reasserted here — first
attempt at this fix assumed the base block's position:static override
(added right below it, for the real <=768px regression this same
session found live) only affected true phones, but that override lives
in the SAME 0-1439px base block, so it was silently winning at
769-1439px too and breaking centering (live-measured -86px off-center
at 769px before this correction — dots+view-all were being centered as
ONE combined group instead of view-all sitting absolutely outside the
centered dots). */
@media (min-width: 769px) and (max-width: 1439px) {
.up-offplan__footer { flex-direction: row !important; justify-content: center !important; }
.up-offplan__dots {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
overflow-x: visible !important;
align-self: auto !important;
}
/* white-space:nowrap added per code-review finding (27.08, dev_code_review.py
gpt_5_5 pass): the phone-shared base block above sets white-space:normal
!important on both of these, which this tablet block never reset — with
position:absolute and no explicit width, a much longer future "View all
N ..." string could theoretically wrap under/over the centered dots at
narrow tablet widths. Live-tested at 769px (narrowest tablet width) with
today's real strings ("View all 474 reports"/"View all properties"/
"View all 182 districts") — none wrap even without this (all measured
exactly one line-height tall) — but nowrap closes the gap for any
future longer string too, at zero cost to current content. */
.up-offplan__viewall { position: absolute !important; transform: translateY(-50%) !important; white-space: nowrap !important; }
.up-desk__view-all { position: absolute !important; transform: translateY(-50%) !important; white-space: nowrap !important; }
.up-desk__bottom { flex-direction: row !important; }
}
/* ══════════════════════════════════════════════════════════════════════
TABLET TIER — added 2026-08-17, "restores 2-column grids for sections
that can fit 2 columns without cramping" (the base block above
force-stacks everything to 1 column, right at 390-430 but wasteful at
wider phone/tablet widths). Originally written when this block AND the
base block both ended at 768px, with an explicit note that widening
past 768 would apply 2-col grids on top of un-reset desktop
positioning and break things. That's now historical, not current
behavior: 19.08 widened the base block's own ceiling to
max-width:1439px (real opening at line 2339) and this block's own
@media rule right below to match — so for sections the 19.08 widening
actually touched (.up-emirate, .wwd-services), the old 768px ceiling
concern no longer applies. Still accurate for sections that widening
did NOT touch: .up-diff stays single-column (its desktop markup is 12
flat, ungrouped absolutely-positioned spans per stat with no per-item
wrapper — a CSS-only 3-across row would need nth-child arithmetic
against interleaved siblings, too fragile without a markup change).
Check each selector's actual coverage rather than trusting "768" at
face value anywhere in this file. */
@media (min-width: 600px) and (max-width: 1439px) {
/* 19.08: widened 768px -> 1439px alongside the base block above, so the
nicer 2-col grid (emirate cards, WWD services) covers the whole tablet
gap instead of falling back to a single mobile-stack column for
900-1439px. */
/* 21.08 Mikhail: "отступы по бокам побольше в 2 раза" — doubles the side
(left/right only, vertical rhythm unchanged) padding canon from 24px
to 48px for the WHOLE tablet tier. Scoped to THIS 600-1439px block
specifically (not the shared base <=1439px block above, which phones
<600px also use) so phone side-padding stays at its own already-tuned
20/24px — only tablet gets wider. Every section below already has its
own base <=1439 rule setting the OLD 24px value; these !important
overrides win by later source order at 600-1439px, same technique the
19-20.08 sessions used for every other tablet-canon fix. */
/* .up-emirate is NOT listed here — it has its own `padding: 56px 24px`
rule later in this same block (the 2-col emirate-card grid, further
down) which would win by later source order and silently shadow a
duplicate here (caught live: measured 24px instead of 48px on first
pass). Doubled directly at that rule's own padding value instead. */
.up-diff { padding-left: 48px !important; padding-right: 48px !important; }
.uaeprop-sec-what-we-do { padding-left: 48px !important; padding-right: 48px !important; }
.up-sixreasons { padding-left: 48px !important; padding-right: 48px !important; }
.up-numbers { padding-left: 48px !important; padding-right: 48px !important; }
.up-offplan { padding-left: 48px !important; padding-right: 48px !important; }
.uaeprop-sec-developer-access { padding-left: 48px !important; padding-right: 48px !important; }
.up-testimonials { padding-left: 48px !important; padding-right: 48px !important; }
.up-desk { padding-left: 48px !important; padding-right: 48px !important; }
.up-quarter { padding-left: 48px !important; padding-right: 48px !important; }
.up-faq { padding-left: 48px !important; padding-right: 48px !important; }
.up-final-cta { padding-left: 48px !important; padding-right: 48px !important; }
/* Hero — 20.08 Mikhail: tablet keeps the full desktop-style contact
form (not the phone's compact CTA-button+modal), left-aligned at the
same 24px rail gap the rest of this tier already uses (.up-emirate,
h1/kicker above). The base <=1439px block hides .up-hero__form and
shows .up-hero__mobile-cta instead (18.08 fix — the full form
measured ~955px tall, dominating a 390px-wide phone's first screen);
reversed here for 600-1439px only, phone is untouched. Every
.up-hero__form descendant is Figma-desktop absolute positioning
(fixed pixel left/top, much of it set inline in HomeBody.astro) with
no flow-layout support at all — reset to plain block flow with
explicit per-element margins (not `gap`, which would also space the
field-background/input pairs that need to overlay each other, not
stack). .up-hero__form-field (the background box) and its
are separate sibling elements pixel-aligned on desktop — kept that
overlay in flow via margin-top:-44px (the field's own height) on the
input instead of a markup change; the phone input is already grouped
in its own wrapper (#uaeprop-hero-phone-wrap) in the markup, so only
the wrapper needs the same overlay treatment, not the input inside
it (explicit override below cancels the general rule for that case). */
.up-hero__mobile-cta { display: none !important; }
/* 21.08 Mikhail: side-by-side like desktop (heading column left, contact
card right) instead of the 20.08 fix's full-width stack below the h1 —
that fix correctly restored the full desktop-style form (name/phone/
email) but never repositioned it, so it still used 100% width under
the heading instead of sitting beside it like desktop's own absolute
layout does. Desktop's own rule (base .up-hero__form, left:900px) can't
just shrink — it's Figma-fixed-pixel and only fits >=1440px — so this
is a genuinely separate 2-column grid for the tablet tier, not the
desktop rule scaled down. */
.up-hero {
display: grid !important;
/* 22.08 Mikhail (13" tablet): flat 420px cap read as "very small" next to
how much wider the 13"/1366px column actually has room for — this used
to be a constant regardless of viewport, so the ratio of card-to-blank-
space kept SHRINKING as the tablet got wider. Scaled with clamp() over
this block's own 600-1439px range (same technique as the typography
below): exactly 420px only at the range's own 600px floor (barely above
the already-approved 768px/834px/1024px values — 436/442/460px, a mild
+16-40px lift review flagged as worth calling out precisely rather than
rounding to "unchanged"), reaching ~493px by 1366px and the full 500px
at 1439px — slightly WIDER than desktop's own fixed 460px card, since
Mikhail asked for bigger, not just "as big as desktop". */
grid-template-columns: 1fr clamp(420px, 362.8px + 9.535vw, 500px) !important;
column-gap: 24px !important;
align-items: start !important;
}
/* .up-hero__textcol (added in HomeBody.astro) now holds ONLY the h1 —
.up-hero__kicker moved out to .up-hero__ctacol (22.08, see below). */
/* 23.08: found live while checking RU today (not this session's original
ask, but a real break caught on this same page) — RU's `недвижимости`
("property", .up-hero__h1-uae) is one unbreakable 12-char word. Grid
items default to `min-width:auto`, which per spec means a `1fr` track
won't shrink below its content's min-content size — that long word's
min-content width at this tier's clamp()'d font-size exceeded the 1fr
column's fair share, blowing the WHOLE grid 157px past the viewport at
768px (confirmed live: `.up-hero` scrollWidth 925 vs its own 768px
width, `.up-hero__ctacol`, the OTHER column, rendered with its right
edge at x=877 — entirely off-screen). EN never hit this ("UAE" is short
enough) so it went unnoticed through every earlier tablet round.
`min-width:0` overrides that default so column 1 actually respects its
assigned 1fr share; `overflow-wrap` (set on .up-hero__h1 itself, next
rule — inherited property, so it reaches all 3 line spans without
naming them individually and keeps covering any line added later)
lets the long word itself break instead of overflowing its own
now-narrower box once min-width:0 stops it from forcing the grid
wider.
23.08c (same day, found while re-checking EN after the margin-bottom
change above — pre-existing since this 23.08 block was first added,
not caused by that change): with min-width:0 actually enforced, EN's
own "property." ALSO doesn't fit its 260px share at 768px (measured
natural width 303px, a real 43px shortfall — round 5/6 checks never
caught it because EN was previously the one column that happened to
silently blow the grid by a small, easy-to-miss amount instead of
visibly hiding text, the same underlying issue as RU just smaller).
Plain `overflow-wrap:break-word` alone produced a raw mid-word split
with no hyphen ("propert"/"y.") — legible but ugly. Added `hyphens:
auto` (+ `-webkit-hyphens` for Safari, the actual browser on every
target iPad) so the browser's own per-`lang` hyphenation dictionary
(html's `lang` attribute is already set correctly per-page) picks a
real syllable break instead — live-verified renders "proper-"/"ty."
with an actual hyphen mark. `overflow-wrap:break-word` stays as the
fallback for any word/language hyphens:auto can't find a break for. */
.up-hero__textcol { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; position: relative !important; z-index: 1 !important; min-width: 0 !important; }
.up-hero__h1 { padding: 40px 0 0 48px !important; overflow-wrap: break-word !important; -webkit-hyphens: auto !important; hyphens: auto !important; }
/* 22.08 Mikhail: "слова... у нас же над CTA, а не под заголовком" — the
21.08 fix packed h1+kicker into one .up-hero__textcol column so they'd
stack tightly, matching desktop's TEXT proportions, but not desktop's
actual STRUCTURE: on desktop the kicker (base rule, left:900px) sits
next to/above the form, not under the heading at all. Worse, once the
form's height (not h1+kicker's, much shorter) started driving the
.up-hero__strip photo's anchor point (see that rule's own comment),
the photo's real top edge landed well ABOVE where the kicker rendered
inside the text column — live-measured at 1366px: strip top=252px vs
kicker at 400-434px, i.e. the kicker sat 148-182px INSIDE the photo's
own area, painted above it by z-index but unreadable (light monospace
text over a busy sunset photo) — the "перекрыто" Mikhail saw.
Fix: move .up-hero__kicker into a shared wrapper with .up-hero__form
(.up-hero__ctacol, HomeBody.astro), genuinely replicating desktop's
kicker-sits-with-the-card relationship instead of approximating it via
spacing inside the text column. Same live 1366px case after the fix:
ctacol starts at the row's own 40px top margin (same offset h1 itself
uses), landing the kicker at roughly y=40-80 — the photo's new anchor
point (see .up-hero__strip) moves further down too since ctacol is
now taller than h1 alone, but even so it stays well below this range,
so the kicker clears it with room to spare instead of by coincidence. */
/* 23.08 Mikhail: "форма CTA на iPad 11"/mini должна быть меньше, а то она
прилипла к низу к бегущей строке" — .up-hero__ctacol's height ALWAYS
drives .up-hero's own height (it's the tallest column), and .up-ticker
sits directly after .up-hero with zero built-in gap at every width —
so a taller ctacol doesn't create distance from the ticker, it just
makes the whole hero (and everything sitting flush against its bottom)
bigger. Round 5's fixed 40px/16px margins (same at every width) were
fine at 1366-1439px (where Mikhail didn't flag anything this round)
but read as too much added bulk specifically at 768/834px, where the
narrower column already wraps the kicker onto more lines. Scaled both
down via the same 600-1439px clamp() technique as everything else in
this block, tapering toward the SAME 40px/16px at 1439px (unchanged
there) but noticeably tighter at 768/834px (24px/9.6px, 25.6px/10.2px)
— see .up-hero__form-inner below for the matching padding reduction.
23.08b, same day, Mikhail: "Добавь" (a real gap below the card, not
just a smaller one — 0px stayed 0px however small the card got, since
.up-ticker's top is always exactly .up-hero's bottom, and .up-hero's
bottom is always exactly the tallest column's bottom edge). A literal
`padding-bottom` on `.up-hero` itself would only add blank page
background there — this card's OWN bottom edge doesn't move, so
adding `margin-bottom` here instead grows the grid's total height
PAST the card without moving the card, and `.up-hero__strip` (still
anchored `align-self:end` to that same total height, full-bleed
across both columns, z-index BELOW the card) becomes newly visible in
exactly that new space — a strip of real photo appears between the
card and the ticker, not empty cream. Reused the identical clamp as
margin-top for a symmetric top/bottom rhythm around the card; same
mechanism also happens to push .up-hero__strip's top edge further
down at every width (bonus: eases 13"'s h1-overlap a little more too,
not just the 11"/mini gap this was aimed at). */
.up-hero__ctacol {
grid-column: 2 !important; grid-row: 1 !important; align-self: start !important;
display: flex !important; flex-direction: column !important;
position: relative !important; z-index: 1 !important;
margin: clamp(20px, 5.7px + 2.384vw, 40px) 48px clamp(20px, 5.7px + 2.384vw, 40px) 0 !important; width: auto !important;
}
.up-hero__kicker { padding: 0 !important; margin: 0 0 clamp(8px, 2.28px + 0.953vw, 16px) 0 !important; width: 100% !important; box-sizing: border-box !important; }
/* 21.08 Mikhail: "текст больше... это смотрится не пропорционально...
пропорционально уменьшать было под каждый размер" — the base
<=1439px block above sets ONE flat size for the whole 0-1439px range
(32/52/52px), so 768px and 1024px rendered identically, then jumped
straight to desktop's real 100/180/180px at 1440px — no proportional
relationship to viewport width at all in between. Replaced with
clamp() interpolating between this range's own 600px and 1439px
bounds, so a wider tablet visibly reads bigger than a narrower one,
approaching (not matching — desktop's own layout has far more
horizontal room) the real page scale as width grows. Same technique
applied to the kicker + the whole contact form's typography below. */
.up-hero__h1-line1 { font-size: clamp(36px, 15.98px + 3.337vw, 64px) !important; }
/* 23.08d, same day: Mikhail saw round 7's hyphenated wrap ("proper-"/"ty.")
and said no — shrink the font instead so it doesn't wrap at all. Live-
measured "property."'s natural width vs its actual available column
width (h1's own width minus its 48px left padding) at every tested
breakpoint: 768px needed <=~57px (was 72, natural 303 vs available
260 — a real 43px shortfall, same root numbers as round 6/7's fix);
834px was right at the edge (natural 320 vs available 320, still
wrapped in practice — sub-pixel/measurement-method variance, not a
comfortable fit). 1024px+ already had large margin (natural 369 vs
available 492) and needed no change. Recomputed min/slope keeping the
SAME 112px ceiling at 1439px (unchanged, no complaint there) so only
the low end of the curve moves: new values 56/61.5/77.4/105.9/112px
at 768/834/1024/1366/1439px (was 72/76/87/108/112) — a visible size
drop specifically where wrapping was the alternative, tapering back
to the original curve by 1439px. RU/AR's own uae/prop line ("недвижи-
мости") is NOT touched by this — its shortfall is far larger (417px
natural vs 260px available at 768px, would need a ~38% cut to ~39px
to avoid wrapping entirely, disproportionately smaller than the rest
of the heading) — kept on round 7's hyphenated wrap instead, which
reads better than an undersized word would.
Honest scope caveat (review-caught over-claim, corrected twice — 1st
fix said "eliminates wrapping down to ~724px", which 2 reviewers
independently flagged as backwards-reading since 724 > 600; restated
directionally below): this fix eliminates wrapping across ~724px up
through the media query's own 1439px ceiling — it does NOT reach all
the way down to the query's 600px floor, so the full 600-1439px range
this rule lives in is not entirely covered. Live-verified the
exact crossover: "property." still wraps at 723px viewport, stops
wrapping at 724px, confirming the fix is real for every NAMED tablet
breakpoint this whole campaign has ever tested or shown Mikhail
(768px is the smallest — iPad mini). Below 724px isn't a gap in this
fix so much as a hard space ceiling: at the query's literal 600px
floor there's only ~106px available (vs 260px at 768px, since
.up-hero__ctacol's own width clamp is still near ITS OWN floor too),
which would need an ~27px font to fit — visibly tiny next to "UAE" at
the same line, breaking the heading's proportions for a viewport no
real target device in this campaign has ever occupied. Left the
overflow-wrap/hyphens fallback in place for that narrow band rather
than force an unreadable font size to chase full-range coverage. */
.up-hero__h1-uae { font-size: clamp(42px, -8.06px + 8.343vw, 112px) !important; }
.up-hero__h1-prop { font-size: clamp(42px, -8.06px + 8.343vw, 112px) !important; }
html[lang="ru"] .up-hero__h1-line1,
html[lang="ar"] .up-hero__h1-line1 { font-size: clamp(30px, 12.84px + 2.861vw, 54px) !important; }
html[lang="ru"] .up-hero__h1-uae,
html[lang="ar"] .up-hero__h1-uae { font-size: clamp(54px, 23.96px + 5.006vw, 96px) !important; }
html[lang="ru"] .up-hero__h1-prop,
html[lang="ar"] .up-hero__h1-prop { font-size: clamp(54px, 23.96px + 5.006vw, 96px) !important; }
.up-hero__kicker { font-size: clamp(11px, 9.57px + 0.238vw, 13px) !important; }
/* 21.08 Mikhail: "картинка должна доходить до текста как на десктопной
версии, а то сейчас она приплюснута к низу" — previously .up-hero__strip
lived in its OWN grid row (row 2), starting only after row 1 fully
finished — and row 1's height is dominated by the (now much taller)
form column, so the photo sat a full row-height's worth of blank space
below the much-shorter text column, looking like a thin disconnected
band instead of a substantial background. Desktop's own real technique
(base rule, no media query) is exactly this: .up-hero__strip is
position:absolute, starting partway down .up-hero and running behind
the text/form (both position:relative there with a higher stacking
order via DOM/z-index). Replicated that here WITHOUT an absolute
top-offset (which would need a different magic number per viewport/
language) — span the strip across BOTH grid rows (grid-row:1/-1) with
align-self:end, so it anchors to the hero's own bottom edge (set by
the taller form column) and grows UPWARD from there, automatically
"reaching toward" the text regardless of exactly how tall the text or
form end up being at a given width/language. z-index:0 (vs textcol/
form below getting z-index:1) keeps it behind, matching desktop. */
/* grid-row explicitly "1 / 3" (not "1 / -1"): `.up-hero` never declares
grid-template-rows, so it has no EXPLICIT row grid at all — negative
line indices resolve against the explicit grid, not the implicit rows
content placement creates, so "-1" here is ambiguous/spec-fragile
even though it live-verified correctly in this specific layout
(row 1's own height already reaches the hero's bottom since the form
column dominates it, so spanning-vs-not made no visible difference
when tested). Caught by review — explicit line 3 removes the
ambiguity outright rather than relying on that coincidence. */
/* 23.08 Mikhail: "картинка на 13 дюймах все еще должна быть ниже" — after
round 5 moved the kicker out of .up-hero__textcol, .up-hero__ctacol
(kicker+form) got taller than the old textcol (h1+kicker together) at
every width, but the strip's own height formula was untouched — the
original 460px max was tuned BEFORE round 5, back when h1 alone (not
h1+kicker+form) determined how far up the anchored-bottom photo could
climb before overlapping real text. Live-measured overlap into h1 at
1366/1439px after round 5 (before this fix): 117px/136px of "property"
covered — well past desktop's own subtle graze. Lowered the cap
380px (was 460px) — the raw formula (151.28px+21.454vw) already sits
BELOW 380 for every viewport under ~1066px, so the 3 tested named
breakpoints below that (768/834/1024px) are BYTE-IDENTICAL to before
(316/330/371px, nowhere near either cap). Review correctly caught an
earlier draft of this comment claiming "only 1366px+ changes" — that
was imprecise: the real unaffected floor is ~1066px, so untested
landscape widths in 1067-1365px (e.g. iPad 11" landscape, ~1194px)
ALSO now flatten at 380px, not just 1366+. Not flagged as a problem —
same direction of fix (less overlap, no reopened "thin band" gap,
verified continuous formula) — just documented precisely instead of
rounding to the 2 explicitly-tested endpoints. At 1366/1439px this
cuts the overlap from 117/136px to ~53-56px, closer to desktop's own
subtle graze. */
.up-hero__strip { grid-column: 1 / -1 !important; grid-row: 1 / 3 !important; align-self: end !important; height: clamp(280px, 151.28px + 21.454vw, 380px) !important; margin-top: 0 !important; z-index: 0 !important; }
/* 22.08: no longer its own grid item (grid-column/row/align-self removed) —
.up-hero__form now lives inside .up-hero__ctacol below the kicker, which
carries the grid placement + the 40px/48px top/right offset that used to
live here. Only margin changed (40->0: the gap above the form is now the
kicker's own 16px margin-bottom, not this fixed 40px). */
.up-hero__form {
display: block !important; position: relative !important; z-index: 1 !important;
width: 100% !important; max-width: none !important; height: auto !important;
left: auto !important; top: auto !important; margin: 0 !important;
box-sizing: border-box !important;
}
/* 23.08: top/bottom padding's own MIN lowered 24->16px (same 1439px max,
same technique as .up-hero__ctacol above) — part of the same "form
smaller on 768/834" fix; left/right (20-32px, width-related, not
height) left untouched since only vertical bulk was flagged. */
.up-hero__form-inner {
position: static !important; inset: auto !important;
padding: clamp(16px, -1.17px + 2.861vw, 40px) clamp(20px, 11.42px + 1.43vw, 32px) !important;
}
/* The