/** * Oplus — Branded Residences, the brand page. * Layered on oplus-brands.css. Loaded only on /branded-residences/{slug}/. * * COLOUR * ------ * Two tracks arrive as inline custom properties from oplus_brand_skin_style(): * * --obr-accent / --obr-on-accent the brand's own colour. Chrome only: * rules, indices, small marks, hover tints. * --obr-action / --obr-on-action contrast-resolved in PHP against this * dark surface. The ONLY thing allowed to * paint a primary button. * * That split exists because roughly half of luxury brands are monochrome. * Mercedes is black; painting its CTA with its accent produces a black pill on * a black page. Do not "simplify" these back into one variable. * * MOTION * ------ * Elements marked .obr-rise and containers marked [data-obr-stagger] start * hidden and are revealed by GSAP. If the motion stack fails to load, the * `.obr-motion` class is never added to and the fallback rule at the * bottom of §2 makes everything visible immediately. The page must never be * blank because a CDN was slow. * * DIRECTION * --------- * Written logical-first (inline-start/end, margin-inline, text-align: start), * so the Arabic RTL build needs no mirrored stylesheet. */ /* ------------------------------------------------------------------------- * 7. STAGES — the full-viewport chapter * ---------------------------------------------------------------------- */ .obr-stage { position: relative; isolation: isolate; display: flex; align-items: center; /* vh first: a browser without svh support ignores the second declaration and still gets a full-height stage rather than a collapsed one. */ min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--obr-black); } .obr-stage-inner { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin-inline: auto; padding: calc(var(--obr-bar) + 32px) clamp(20px, 4vw, 48px) 48px; } .obr-stage-media { position: absolute; inset: 0; z-index: 0; } /* * The hero's media layer is parallaxed, so it needs headroom to travel in. * * At `inset: 0` it is exactly the height of the stage and any downward move * exposes its own top edge as a black band under the header. Only the hero * carries this — the other stages do not move. */ .obr-hero-stage .obr-stage-media { inset: auto; inset-inline: 0; top: -10%; height: 120%; } /* --- 7a. Hero --------------------------------------------------------- */ .obr-hero-stage { align-items: flex-end; } .obr-hero-poster, .obr-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Slightly oversized so the parallax never exposes an edge. */ scale: 1.08; } .obr-hero-video { opacity: 0; transition: opacity 800ms var(--obr-ease); } .obr-hero-video.is-playing { opacity: 1; } /* * Directional scrim. The text sits inline-start, so the darkening is weighted * there rather than applied as a flat vertical gradient — a uniform scrim * either washes out the film or fails to carry the type. */ .obr-hero-scrim { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.12) 70%, rgba(0, 0, 0, 0.35) 100% ), linear-gradient( to right, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0) 72% ); } [dir="rtl"] .obr-hero-scrim { background: linear-gradient( to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.12) 70%, rgba(0, 0, 0, 0.35) 100% ), linear-gradient( to left, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0) 72% ); } /* * Centred composition. * * The first build put the lockup and copy inline-start, which fought the film: * an aerial render has its subject in the middle, so text on one flank leaves * the eye with two competing centres. Centring the stack puts the brand mark * and the headline on the same axis as the shot. */ .obr-hero-stage { align-items: center; } .obr-hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; /* Leaves room for the facts bar pinned to the base of the stage. */ padding-bottom: clamp(150px, 20vh, 230px); } .obr-hero-lockup { height: clamp(64px, 8vw, 122px); width: auto; max-width: min(420px, 78vw); margin-bottom: 30px; object-fit: contain; object-position: center; } /* * Length-aware heading. * * --obr-title-len (total characters) and --obr-title-word (longest single * word) are written inline by the template. The size is then derived from the * space available divided by the character count, so "Bugatti" fills the line * and "Mercedes-Benz Places | Binghatti City" steps down to fit instead of * breaking mid-word. The two clamp bounds stop it going absurd either way. * * 0.62 is the approximate average glyph width of this typeface at 1em; it is * the factor that turns "characters across" into "font size". */ .obr-hero-title { --obr-title-space: min(92vw, 1080px); margin: 0 0 16px; /* No ch cap. The size formula is what controls the measure; a max-width in ch on top of it forces a wrap the formula was specifically sizing to avoid. */ max-width: 100%; font-size: clamp( 1.75rem, calc(var(--obr-title-space) / (var(--obr-title-len, 20) * 0.6)), 4.25rem ); line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; /* The name is already hyphen-safe from PHP; this stops the browser adding its own break points on top. */ hyphens: none; -webkit-hyphens: none; /* * NOT overflow-wrap: break-word. That permits a break inside a word when * the line is tight, which is exactly the "Manchester Cit / y" failure. * The size formula above is what keeps long names on the line; if a name * ever genuinely cannot fit, letting it overflow is the lesser evil and * the editor can shorten it. */ overflow-wrap: normal; word-break: normal; } /* * Word wrappers created by the splitter. Each holds its own characters and * refuses to break, so the animated heading wraps exactly where the plain one * would — at spaces, never mid-word. */ .obr-hero-title .obr-word { display: inline-block; white-space: nowrap; } /* * Second cap, measured against the longest single word. * * Words are now unbreakable (see .obr-word), which is what fixed the * "Manchester Cit / y" split — but it also means one very long word can push * past the stage edge instead of breaking. Sizing against that word as well * guarantees the widest unbreakable run always fits. */ @supports (font-size: min(1rem, 2rem)) { .obr-hero-title { font-size: min( clamp( 1.75rem, calc(var(--obr-title-space) / (var(--obr-title-len, 20) * 0.6)), 4.25rem ), calc(var(--obr-title-space) / (var(--obr-title-word, 10) * 0.6)) ); } } /* Per-character wrappers created by the splitter in oplus-brands.js. */ .obr-hero-title .obr-char { display: inline-block; white-space: pre; } .obr-hero-lead { margin: 0 0 34px; max-width: 46ch; font-size: clamp(1.0625rem, 0.98rem + 0.55vw, 1.4375rem); line-height: 1.45; color: var(--obr-ink-70); text-wrap: pretty; } .obr-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } .obr-play { display: inline-block; width: 0; height: 0; border-block: 6px solid transparent; border-inline-start: 10px solid currentColor; border-inline-end: 0; margin-inline-end: 4px; } /* Facts pinned to the base of the hero, so the qualifying numbers are the last thing read before the scroll. */ /* * Facts bar, pinned to the base of the stage. * * Grid, not flex-wrap. With flex the last row stretched to fill and the bar * collapsed into a ragged column on narrow screens — a two-up grid keeps every * cell the same width at every size and never orphans one item on its own row. */ .obr-hero-facts { position: absolute; inset-inline: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin: 0; width: 100%; padding-inline: clamp(20px, 4vw, 48px); border-top: 1px solid var(--obr-ink-12); background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.2)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .obr-hero-fact { padding: 18px 22px 22px; border-inline-end: 1px solid var(--obr-ink-12); } .obr-hero-fact:last-child { border-inline-end: 0; } .obr-hero-fact dt { margin: 0 0 6px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--obr-ink-50); } .obr-hero-fact dd { margin: 0; font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); font-weight: 700; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .obr-hero-inner { padding-bottom: clamp(160px, 26vh, 240px); } .obr-hero-lockup { height: clamp(58px, 15vw, 88px); margin-bottom: 22px; } .obr-hero-facts { /* Two up. Three columns at 375px gives 100px cells and the labels wrap to three lines each. */ grid-template-columns: repeat(2, 1fr); padding-inline: 0; } .obr-hero-fact { padding: 13px 16px 15px; border-bottom: 1px solid var(--obr-ink-12); } /* Restore the end border the desktop rule removes — in a two-column grid the last cell is not necessarily on the trailing edge. */ .obr-hero-fact:nth-child(odd) { border-inline-end: 1px solid var(--obr-ink-12); } .obr-hero-fact:nth-child(even) { border-inline-end: 0; } .obr-hero-facts .obr-hero-fact:nth-last-child(-n + 2):nth-child(odd), .obr-hero-facts .obr-hero-fact:last-child { border-bottom: 0; } } /* A single leftover fact should span the row rather than sit half-width. */ @media (max-width: 760px) { .obr-hero-fact:last-child:nth-child(odd) { grid-column: 1 / -1; border-inline-end: 0; } } /* * Sits inline-START, not end. The site's floating WhatsApp and call buttons * are fixed to the inline-end edge, and the two were overlapping. */ .obr-filmtoggle { position: absolute; z-index: 4; bottom: 108px; inset-inline-start: clamp(20px, 4vw, 48px); min-height: 34px; padding: 0 16px; border: 1px solid var(--obr-ink-12); border-radius: var(--obr-r-pill); background: rgba(0, 0, 0, 0.4); color: #fff; font: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(8px); } @media (max-width: 760px) { .obr-scrollcue, .obr-filmtoggle { display: none; } } /* --- 7b. Logo pause --------------------------------------------------- */ .obr-logo-stage { justify-content: center; background: var(--obr-black); } .obr-logo-stage .obr-stage-inner { display: grid; place-items: center; text-align: center; } .obr-logo-mark { max-width: min(520px, 76vw); max-height: 44svh; width: auto; object-fit: contain; } /* --- 7c. Vision, laid over the logo ----------------------------------- */ /* * The stack. The vision stage rides up over the logo stage, and the logo stage * is blurred and darkened underneath by the scroll system writing --obr-under. * The result reads as one panel resting on another rather than a scroll-past. */ .obr-logo-stage { position: sticky; top: 0; } .obr-motion .obr-logo-stage .obr-logo-mark { filter: blur(calc(var(--obr-under, 0) * 14px)); opacity: calc(1 - var(--obr-under, 0) * 0.72); transform: scale(calc(1 - var(--obr-under, 0) * 0.06)); } .obr-vision-stage { position: relative; z-index: 3; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.86), var(--obr-black) 30%); box-shadow: 0 -60px 120px -40px rgba(0, 0, 0, 0.9); } .obr-vision-inner { display: grid; place-items: center; text-align: center; max-width: 880px; } .obr-index { display: block; margin-bottom: 32px; font-size: 1.25rem; font-weight: 600; color: var(--obr-accent); font-variant-numeric: tabular-nums; } .obr-vision-title { margin: 0 0 10px; font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--obr-ink-70); } .obr-vision-sub { margin: 0 0 34px; font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem); font-weight: 700; letter-spacing: -0.01em; color: #fff; } .obr-vision-body { max-width: 62ch; font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); line-height: 1.8; color: var(--obr-ink-70); } .obr-vision-body p { margin: 0 0 1.1em; } .obr-vision-body p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------------- * 8. MEDIA HUB * ---------------------------------------------------------------------- */ .obr-media-stage { background: var(--obr-black); align-items: flex-start; } .obr-media-inner { display: flex; flex-direction: column; gap: 26px; min-height: 100svh; padding-bottom: 40px; } .obr-tabs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; } .obr-tab { position: relative; padding: 10px 26px; border: 0; background: transparent; color: var(--obr-ink-50); font: inherit; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: color var(--obr-fast) var(--obr-ease); } /* Hairline separators between tabs, drawn rather than added as markup. */ .obr-tab + .obr-tab::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: var(--obr-ink-12); } .obr-tab:hover { color: var(--obr-ink-70); } .obr-tab[aria-selected="true"] { color: #fff; } .obr-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 26px; bottom: 0; height: 2px; background: var(--obr-accent); } .obr-tab:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } .obr-panels { flex: 1; display: flex; flex-direction: column; min-height: 0; } .obr-panel { flex: 1; display: flex; flex-direction: column; gap: 18px; min-height: 0; animation: obr-panel-in 260ms var(--obr-ease) both; } .obr-panel[hidden] { display: none; } @keyframes obr-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .obr-panel-foot { margin: 0; text-align: center; } /* --- 8a. Map ---------------------------------------------------------- */ .obr-map { position: relative; flex: 1; min-height: min(58svh, 520px); border-radius: var(--obr-r); overflow: hidden; background: var(--obr-panel-2); } .obr-map iframe { width: 100%; height: 100%; min-height: min(58svh, 520px); border: 0; display: block; } /* Shown until the iframe src is written in — the map costs about a megabyte, so it is never loaded for a visitor who does not open this tab. */ .obr-map-load { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: var(--obr-panel-2); color: var(--obr-ink-70); font: inherit; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; } .obr-map.is-loaded .obr-map-load { display: none; } /* --- 8b. Sliders ------------------------------------------------------ */ .obr-slider { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .obr-slider-track { display: flex; flex: 1; min-height: 0; transition: transform 520ms var(--obr-ease); } .obr-slide { flex: 0 0 100%; display: flex; flex-direction: column; gap: 12px; margin: 0; min-width: 0; } .obr-slide-zoom { flex: 1; display: block; min-height: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in; overflow: hidden; border-radius: var(--obr-r); } .obr-slide-zoom img { width: 100%; height: 100%; max-height: min(60svh, 560px); object-fit: contain; transition: transform var(--obr-slow) var(--obr-ease); } .obr-slide-zoom:hover img { transform: scale(1.015); } .obr-slide-zoom:focus-visible { outline: 2px solid var(--obr-action); outline-offset: 3px; } .obr-slide figcaption { text-align: center; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--obr-ink-50); } .obr-slider--brochure .obr-slide-zoom img { object-fit: contain; background: #fff; } /* --- PDF brochure ------------------------------------------------------ */ .obr-pdf { position: relative; min-height: min(58svh, 520px); } .obr-pdf-page { display: block; width: auto; max-width: 100%; max-height: min(60svh, 560px); margin-inline: auto; border-radius: var(--obr-r); background: #fff; /* Print pages have hard white edges; a soft shadow stops them looking pasted onto the black section. */ box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9); } .obr-pdf .obr-slide { justify-content: center; } .obr-pdf-state { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: 16px; background: var(--obr-black); text-align: center; color: var(--obr-ink-50); font-size: 0.875rem; } .obr-pdf-state p { margin: 0; } /* The download link is a fallback — hidden while loading looks normal, shown the moment rendering fails. */ .obr-pdf-state .obr-btn { display: none; } .obr-pdf.is-failed .obr-pdf-state .obr-btn { display: inline-flex; } .obr-pdf.is-failed .obr-pdf-spinner { display: none; } .obr-pdf-spinner { width: 26px; height: 26px; border: 2px solid var(--obr-ink-12); border-top-color: var(--obr-accent); border-radius: 50%; animation: obr-spin 760ms linear infinite; } @keyframes obr-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .obr-pdf-spinner { animation-duration: 2s; } } .obr-arrow { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background-color var(--obr-fast) var(--obr-ease); } .obr-arrow:hover { background: rgba(255, 255, 255, 0.12); } .obr-arrow::before { content: ""; width: 14px; height: 14px; border-top: 2px solid currentColor; border-inline-end: 2px solid currentColor; } .obr-arrow--prev { inset-inline-start: 4px; } .obr-arrow--prev::before { transform: rotate(-135deg); margin-inline-start: 5px; } .obr-arrow--next { inset-inline-end: 4px; } .obr-arrow--next::before { transform: rotate(45deg); margin-inline-end: 5px; } [dir="rtl"] .obr-arrow--prev::before { transform: rotate(45deg); } [dir="rtl"] .obr-arrow--next::before { transform: rotate(-135deg); } .obr-arrow[disabled] { opacity: 0.25; cursor: default; } .obr-slider-count { margin: 0; text-align: center; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--obr-ink-50); font-variant-numeric: tabular-nums; } /* --- 8c. Floor plans -------------------------------------------------- */ .obr-plans { flex: 1; display: flex; flex-direction: column; gap: 18px; min-height: 0; } .obr-setswitch { display: flex; align-items: center; justify-content: center; gap: 8px; align-self: center; padding: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); } .obr-setswitch-arrow { display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: transparent; color: var(--obr-ink-70); cursor: pointer; } .obr-setswitch-arrow::before { content: ""; width: 9px; height: 9px; border-top: 2px solid currentColor; border-inline-end: 2px solid currentColor; transform: rotate(45deg); } .obr-setswitch-arrow:first-child::before { transform: rotate(-135deg); } .obr-setswitch-arrow:hover { color: #fff; } .obr-setswitch-label { min-width: 220px; text-align: center; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; } .obr-setswitch-label--static { margin: 0 0 6px; align-self: center; } .obr-planset { flex: 1; display: flex; flex-direction: column; min-height: 0; } .obr-planset[hidden] { display: none; } .obr-slide--plan .obr-slide-zoom img { background: linear-gradient(135deg, #d8d8d8, #f2f2f2); border-radius: var(--obr-r); object-fit: contain; } .obr-plan-head { text-align: center; } .obr-plan-head h3 { margin: 0 0 2px; font-size: 1.125rem; font-weight: 600; } .obr-plan-head p { margin: 0; font-size: 0.875rem; color: var(--obr-ink-50); } @media (max-width: 760px) { .obr-media-inner { gap: 18px; } .obr-tab { padding: 8px 14px; font-size: 0.75rem; letter-spacing: 0.1em; } .obr-tab + .obr-tab::before { display: none; } .obr-tab[aria-selected="true"]::after { inset-inline: 14px; } .obr-arrow { width: 42px; height: 42px; margin-top: -21px; } .obr-setswitch-label { min-width: 140px; font-size: 0.75rem; } } /* ------------------------------------------------------------------------- * 9. RELEASED FLOW — the commercial half * ---------------------------------------------------------------------- */ .obr-flow { position: relative; z-index: 4; background: var(--obr-black); } /* --- 9a. Story -------------------------------------------------------- */ .obr-story-grid { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; } @media (max-width: 860px) { .obr-story-grid { grid-template-columns: 1fr; } } /* The spec list follows the reader down the long story column. */ .obr-story-aside { position: sticky; top: calc(var(--obr-bar) + 24px); } @media (max-width: 860px) { .obr-story-aside { position: static; } } .obr-spec { margin: 0; border-top: 1px solid var(--obr-ink-12); } .obr-spec > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--obr-ink-12); } .obr-spec dt { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--obr-ink-50); } .obr-spec dd { margin: 0; font-size: 0.875rem; font-weight: 600; text-align: end; } .obr-spec a { color: var(--obr-accent); text-decoration: none; } .obr-story-body { font-size: clamp(1rem, 0.97rem + 0.2vw, 1.125rem); line-height: 1.8; color: var(--obr-ink-70); } .obr-story-body > *:first-child { margin-top: 0; } .obr-story-body p { margin: 0 0 1.15em; max-width: 68ch; } .obr-story-body h2, .obr-story-body h3 { margin: 1.8em 0 0.6em; color: #fff; line-height: 1.3; } .obr-story-body a { color: var(--obr-accent); } .obr-story-body blockquote { margin: 1.6em 0; padding-inline-start: 22px; border-inline-start: 3px solid var(--obr-accent); font-size: 1.125em; font-style: italic; color: #fff; } /* --- 9b. Amenities ---------------------------------------------------- */ .obr-amenity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; margin: 24px 0 0; padding: 0; list-style: none; background: var(--obr-ink-12); border: 1px solid var(--obr-ink-12); border-radius: var(--obr-r-lg); overflow: hidden; } .obr-amenity { display: flex; gap: 16px; padding: 26px 24px; background: var(--obr-panel); } .obr-amenity-icon { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--obr-accent-rgb), 0.16); color: var(--obr-accent); font-size: 1.125rem; } .obr-amenity-text h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; line-height: 1.35; } .obr-amenity-text p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--obr-ink-50); } /* --- 9c. Highlights --------------------------------------------------- */ .obr-highlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 24px; } .obr-highlight:nth-child(3n + 1) { grid-column: span 2; } @media (max-width: 780px) { .obr-highlight:nth-child(3n + 1) { grid-column: auto; } } .obr-highlight { position: relative; margin: 0; border-radius: var(--obr-r-lg); overflow: hidden; background: var(--obr-panel-2); } .obr-highlight .obr-slide-zoom { border-radius: 0; } .obr-highlight img { display: block; width: 100%; aspect-ratio: 3 / 2; max-height: none; object-fit: cover; } .obr-highlight figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 32px 20px 16px; background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent); color: #fff; font-size: 0.875rem; font-weight: 600; pointer-events: none; } /* --- 9d. Projects and units ------------------------------------------- */ .obr-single .obr-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 28px); align-items: stretch; margin-top: 30px; } .obr-single .obr-unit-grid { margin-top: 26px; } .obr-single .obr-project, .obr-single .obr-unit { background: var(--obr-panel); border-color: var(--obr-ink-12); } .obr-single .obr-project { min-width: 0; border-radius: clamp(16px, 1.5vw, 22px); background: linear-gradient(145deg, rgba(var(--obr-accent-rgb), 0.055), transparent 38%), var(--obr-panel); box-shadow: 0 20px 60px -46px rgba(0, 0, 0, 0.95); } .obr-single .obr-project:focus-within { outline: 2px solid var(--obr-accent); outline-offset: 4px; } .obr-single .obr-project-media { position: relative; min-width: 0; aspect-ratio: 16 / 10; background: var(--obr-panel-2); } .obr-single .obr-project-media::after { content: "; position: absolute; inset: 0; background: linear-gradient(to top, rgba(2, 8, 12, 0.32), transparent 42%); pointer-events: none; } .obr-single .obr-project-media img { display: block; max-width: 100%; } .obr-single .obr-pill--onmedia { z-index: 2; inset-block-start: 16px; inset-inline-start: 16px; height: 30px; padding-inline: 14px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } .obr-single .obr-project-body { position: relative; justify-content: center; padding: clamp(24px, 3vw, 38px); } .obr-single .obr-project-body::before { content: "; display: block; width: 42px; height: 2px; margin-bottom: 20px; background: var(--obr-accent); border-radius: 2px; } .obr-single .obr-project-title { margin-bottom: 12px; font-size: clamp(1.25rem, 1.7vw, 1.75rem); line-height: 1.18; letter-spacing: -0.025em; } .obr-single .obr-project-title a, .obr-single .obr-unit-body h3 a { color: #fff; } .obr-single .obr-project-price { font-size: clamp(1.125rem, 1.35vw, 1.375rem); } .obr-single .obr-project-meta { margin: 8px 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--obr-ink-50); } .obr-single .obr-project-cta { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; min-height: 44px; margin-top: 26px; padding: 0 18px; border: 1px solid rgba(var(--obr-accent-rgb), 0.52); border-radius: var(--obr-r-pill); background: rgba(var(--obr-accent-rgb), 0.08); color: var(--obr-accent); font-size: 0.875rem; font-weight: 700; text-decoration: none; transition: color var(--obr-fast) var(--obr-ease), background-color var(--obr-fast) var(--obr-ease), border-color var(--obr-fast) var(--obr-ease); } .obr-single .obr-project-cta:hover, .obr-single .obr-project-cta:focus-visible { border-color: var(--obr-accent); background: var(--obr-accent); color: var(--obr-on-accent); } /* A single project is treated as a featured residence, not stretched into a giant vertical card. Multiple projects retain the balanced two-column grid. */ .obr-single .obr-project-grid > .obr-project:only-child { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.75fr); width: 100%; max-width: 1120px; min-height: clamp(360px, 32vw, 430px); justify-self: center; } .obr-single .obr-project-grid > .obr-project:only-child .obr-project-media { height: 100%; min-height: 0; aspect-ratio: auto; } .obr-single .obr-project-grid > .obr-project:only-child .obr-project-body { padding: clamp(30px, 4vw, 52px); } @media (max-width: 860px) { .obr-single .obr-project-grid { grid-template-columns: minmax(0, 1fr); } .obr-single .obr-project-grid > .obr-project:only-child { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); min-height: 350px; } } @media (max-width: 700px) { .obr-single .obr-project-grid { margin-top: 22px; } .obr-single .obr-project-grid > .obr-project:only-child { display: flex; min-height: 0; max-width: 620px; } .obr-single .obr-project-grid > .obr-project:only-child .obr-project-media, .obr-single .obr-project-media { height: auto; aspect-ratio: 16 / 10; } .obr-single .obr-project-grid > .obr-project:only-child .obr-project-body, .obr-single .obr-project-body { padding: 22px 20px 24px; } .obr-single .obr-project-body::before { margin-bottom: 16px; } .obr-single .obr-project-title { font-size: clamp(1.1875rem, 5.4vw, 1.5rem); } .obr-single .obr-project-cta { width: 100%; margin-top: 22px; } } .obr-project-cta, .obr-project-price, .obr-unit-price { color: var(--obr-accent); } .obr-arrowglyph { transition: transform var(--obr-fast) var(--obr-ease); display: inline-block; } [dir="rtl"] .obr-arrowglyph { transform: scaleX(-1); } .obr-project:hover .obr-arrowglyph { transform: translateX(4px); } [dir="rtl"] .obr-project:hover .obr-arrowglyph { transform: scaleX(-1) translateX(4px); } .obr-unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .obr-unit { position: relative; border: 1px solid var(--obr-ink-12); border-radius: var(--obr-r); overflow: hidden; } .obr-unit-media { display: block; aspect-ratio: 4 / 3; } .obr-unit-media img { width: 100%; height: 100%; object-fit: cover; } .obr-unit-body { padding: 16px 18px 18px; } .obr-unit-body h3 { margin: 0 0 6px; font-size: 0.9375rem; font-weight: 700; line-height: 1.4; } .obr-unit-body h3 a { text-decoration: none; } .obr-unit-body h3 a::after { content: ""; position: absolute; inset: 0; } .obr-unit-price { margin: 0; font-size: 0.9375rem; font-weight: 700; } /* --- 9e. Developers --------------------------------------------------- */ .obr-developer-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; } .obr-developer { display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px; border: 1px solid var(--obr-ink-12); border-radius: var(--obr-r-pill); background: var(--obr-panel); color: #fff; font-weight: 600; text-decoration: none; transition: border-color var(--obr-fast) var(--obr-ease); } [dir="rtl"] .obr-developer { padding: 12px 12px 12px 22px; } .obr-developer:hover { border-color: var(--obr-accent); } .obr-developer img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--obr-panel-2); } /* --- 9f. FAQ ---------------------------------------------------------- */ .obr-faq-list { max-width: 980px; margin: 34px auto 0; border-top: 1px solid var(--obr-ink-12); } .obr-faq-item { border-bottom: 1px solid var(--obr-ink-12); } .obr-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 1rem; font-weight: 600; line-height: 1.45; color: #fff; cursor: pointer; list-style: none; } .obr-faq-item summary::-webkit-details-marker { display: none; } .obr-faq-item summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-top: 2px solid var(--obr-ink-50); border-inline-end: 2px solid var(--obr-ink-50); transform: rotate(45deg); transition: transform var(--obr-fast) var(--obr-ease), border-color var(--obr-fast) var(--obr-ease); } [dir="rtl"] .obr-faq-item summary::after { transform: rotate(-135deg); } .obr-faq-item[open] summary::after { transform: rotate(-45deg); border-color: var(--obr-accent); } [dir="rtl"] .obr-faq-item[open] summary::after { transform: rotate(135deg); } .obr-faq-item summary:focus-visible { outline: 2px solid var(--obr-action); outline-offset: 3px; } .obr-faq-answer { padding: 0 0 24px; max-width: 78ch; font-size: 0.9375rem; line-height: 1.75; color: var(--obr-ink-50); } .obr-faq-answer p:last-child { margin-bottom: 0; } /* --- 9g. Lead --------------------------------------------------------- */ .obr-lead-inner { display: grid; grid-template-columns: 1fr minmax(300px, 430px); gap: clamp(32px, 5vw, 64px); align-items: start; } @media (max-width: 860px) { .obr-lead-inner { grid-template-columns: 1fr; } } .obr-lead-copy p { margin: 0 0 26px; max-width: 52ch; line-height: 1.7; color: var(--obr-ink-70); } .obr-lead-actions { display: flex; flex-wrap: wrap; gap: 12px; } .obr-lead-brochure { margin: 22px 0 0; font-size: 0.9375rem; } .obr-lead-brochure a { color: #fff; border-bottom: 1px solid var(--obr-ink-12); text-decoration: none; } .obr-lead-form { padding: 28px; border: 1px solid var(--obr-ink-12); border-radius: var(--obr-r-lg); background: var(--obr-panel); } /* --- 9h. Related and legal -------------------------------------------- */ .obr-related-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 26px; } .obr-related-item { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border: 1px solid var(--obr-ink-12); border-inline-start: 3px solid var(--obr-accent); border-radius: var(--obr-r); background: var(--obr-panel); text-decoration: none; transition: transform var(--obr-fast) var(--obr-ease), border-color var(--obr-fast) var(--obr-ease); } .obr-related-item:hover { transform: translateY(-2px); } .obr-related-name { font-size: 1.0625rem; font-weight: 700; color: #fff; } .obr-related-count { font-size: 0.8125rem; color: var(--obr-ink-50); } .obr-single .obr-legal { background: var(--obr-black); padding-block: 40px 56px; } .obr-single .obr-legal p { color: var(--obr-ink-50); } /* ------------------------------------------------------------------------- * 12. MOTION FALLBACKS * ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .obr-hero-video { display: none; } .obr-single .obr-project, .obr-single .obr-project-media img, .obr-single .obr-project-cta, .obr-single .obr-project .obr-arrowglyph { transition: none; } .obr-single .obr-project:hover, .obr-single .obr-project:hover .obr-project-media img { transform: none; } .obr-slider-track, .obr-topbar, .obr-modal-card { transition: none; } .obr-scrollcue { display: none; } .obr-motion .obr-logo-stage .obr-logo-mark { filter: none; opacity: 1; transform: none; } .obr-logo-stage { position: static; } } /* Very short viewports: full-height stages become unusable, so let them grow. */ @media (max-height: 560px) { .obr-stage { min-height: auto; padding-block: 80px; } .obr-logo-stage { position: static; } } /* ------------------------------------------------------------------------- * 13. RESPONSIVE PASS * * Checked against 375, 414, 768, 1024, 1280 and 1440. * The recurring problems on this page type are all one of three things: * full-height stages on a short phone, the site's fixed contact buttons * overlapping content on the inline-end edge, and grids that were designed * two-up collapsing badly at 375. * ---------------------------------------------------------------------- */ /* --- Tablet, 1024 and below ------------------------------------------- */ @media (max-width: 1024px) { .obr-stage-inner { padding-inline: clamp(20px, 4vw, 40px); } .obr-lead-inner, .obr-story-grid { gap: 36px; } /* Keep the enquiry form clear of the floating call buttons. */ .obr-lead-inner { padding-inline-end: 0; } } /* --- Phone, 760 and below --------------------------------------------- */ @media (max-width: 760px) { /* * Full-height stages are measured in svh so the mobile browser chrome * appearing and disappearing does not resize the section mid-scroll — * which on iOS reads as the page jumping while you read. */ .obr-stage { min-height: 100svh; } /* The logo pause does not need a whole screen on a phone; giving it one costs the visitor a full swipe on an image with no information. */ .obr-logo-stage { min-height: 66svh; position: static; } .obr-logo-mark { max-width: 78vw; max-height: 34svh; } .obr-vision-stage { min-height: auto; padding-block: 72px; } .obr-media-stage, .obr-media-inner { min-height: auto; } .obr-media-inner { padding-block: calc(var(--obr-bar) + 28px) 40px; } .obr-slide-zoom img { max-height: 46svh; } .obr-map, .obr-map iframe { min-height: 44svh; } .obr-section { padding-block: 56px; } .obr-amenity { padding: 20px 18px; } .obr-amenity-grid { grid-template-columns: 1fr; } .obr-lead-form { padding: 22px; } .obr-faq-item summary { font-size: 0.9375rem; padding-block: 18px; } .obr-modal-card { max-height: 88svh; } /* The site's fixed WhatsApp/call stack lives bottom inline-end. Anything that would sit under it gets cleared rather than overlapped. */ .obr-lead-actions, .obr-hero-actions { padding-inline-end: 0; } .obr-legal { padding-bottom: 96px; } } /* --- Small phone, 400 and below --------------------------------------- */ @media (max-width: 400px) { .obr-hero-title { font-size: 1.75rem; letter-spacing: -0.025em; } .obr-hero-lead { font-size: 0.9375rem; } .obr-hero-lockup { max-width: 68vw; } .obr-hero-fact { padding: 11px 13px 13px; } .obr-hero-fact dt { font-size: 0.625rem; letter-spacing: 0.1em; } .obr-hero-fact dd { font-size: 0.9375rem; } .obr-btn { min-height: 44px; padding-inline: 18px; font-size: 0.875rem; } .obr-topbar-logo, .obr-topbar-home img { height: 32px; max-width: 140px; } } /* * Touch pointers: hover states never resolve, so anything that only appears * on hover has to be visible by default. Slider arrows in particular were * invisible affordances on a phone. */ @media (hover: none) { .obr-arrow { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .obr-slide-zoom:hover img, .obr-highlight:hover img, .obr-project:hover { transform: none; } /* 44px is the minimum comfortable target; several controls were smaller. */ .obr-iconbtn, .obr-setswitch-arrow { min-width: 44px; min-height: 44px; } }