` ONLY for flagged projects * (UseNewLandingPage → useNewLanding.brandingActive). Non-flagged projects never * get the class, so their pages are byte-for-byte unchanged. * * ── WHY A SEPARATE FILE (the contract differs from unit-branding-newui.css) ── * - unit-branding-newui.css RE-POINTS existing brand spots onto design-system * tokens using the base sheet's ORIGINAL value as the `var(…, fallback)`, so * an UNSET token changes NOTHING. * - THIS file FILLS STYLING VACUUMS: globals.css has no base rule for these * spots, so historically only a hand-authored per-project * /assets/styles/.css supplied them. A new-UI project WITHOUT that CDN * sheet was left on browser/bootstrap defaults. These rules therefore CHANGE * the look even with every token unset — that is the point: a polished baseline for * sheet-less new-UI projects. Values were ported from the proven * casaneutralbay.css unit-detail rules and GENERALISED: brand cream/greens → * design-system tokens where one fits, neutral greys otherwise. NO fonts are * ported — brand faces arrive via the design system (--ls-heading-font / * --ls-body-font, applied by unit-branding-newui.css). Bespoke per-project * tinting has the sanitized `customCss` escape hatch (injected inside this * same wrapper by ). * * ── Specificity / !important discipline (same as unit-branding-newui.css) ── * globals.css keys its real unit-detail rules off `#root …` (the id `root` is on * ). Every rule below is prefixed `#root .new-ui-branded …` so it out-ranks * the base by one class at equal id count. `!important` is used in EXACTLY three * spots, each because the rule it must beat is itself `!important`: * 1. `.border-card-small` — the selected thumbnail also carries bootstrap * `.border` (ImageSlider.tsx), and the `.border` utility is `!important`. * 2. `.bg-mortgage p` / `.bg-mortgage h1` — the repayment figures carry bootstrap * `.text-dark` (`!important`, MortgageCalculator.tsx), so white text on the dark * #394150 panel must be `!important` too (readability: dark-on-dark otherwise). * 3. `.unit-info` background — beats bootstrap `.bg-white` (`!important`) on the * Land/Commercial sidebar variants so the panel greys consistently. * Everywhere else `#root .new-ui-branded …` beats the (non-important) base on * specificity alone — no `!important`. * * ── Overlap with unit-branding-newui.css ── * A few selectors appear in BOTH files with DISJOINT properties, by design: * that file owns COLOUR (tokens), this one owns STRUCTURE (size/weight/surface). * e.g. `.price-guide h5` colour ↔ size; `.box-level::after` gradient ↔ geometry; * `.filter-level-arrow` fill ↔ layout. No property is set in both. * * ── `casa:NNNN` references ── * Comments cite lines in casaneutralbay.css — a LIVE per-project CDN sheet * (assets.primaxlaunch.com/assets/styles/casaneutralbay.css) used as the visual * baseline for this port; it is NOT vendored in this repo. */ /* ──────────────────────────────────────────────────────────────────────────── * PROPERTY LIST — building name above the LEVEL (UnitCard.tsx:582) * Reveal the building name above the LEVEL row when the project has the * "Per-building unit URLs" setting on — the same setting harbourshores uses * (UnitURLPattern containing ). That setting is JS-only, so UnitCard * tags the block with `.building-url-on` when it is on; CSS keys off that marker. * The `.build-d building-below` span itself only renders when the project is multi- * building AND the unit has a BuildingName (existing JSX gate). globals.css hides * `.build-d` by default; this reveals it, but ONLY for branded projects * (`.new-ui-branded`, i.e. UseNewLandingPage) AND ONLY when the setting is on — so * it never fires on a plain multi-building project or on the old UI. `display: * contents` (matching harbourshores' own sheet) drops the wrapper so the name

* sits directly in the card's flex column above the LEVEL. Scoped to `.unit-list` * so the detail-page similar/trending + shortlist `.build-d` variants stay * untouched. `.building-beside` (the alt spot next to the unit number) stays * hidden, matching harbourshores. * ──────────────────────────────────────────────────────────────────────────── */ #root .new-ui-branded .unit-list .build-d.building-below.building-url-on { display: contents; } /* ──────────────────────────────────────────────────────────────────────────── * MORTGAGE CALCULATOR (MortgageCalculator.tsx — used by UnitInfo / * HomeAndLandUnitInfo / CommercialUnitInfo*) * ──────────────────────────────────────────────────────────────────────────── */ /* * Calculator container — give the accordion a bounded card look (globals only * pads its inner accordion parts, 5176/5181). Neutral surface, NOT casa's brand * cream #F5F1E3; 16px matches the untokened `.unit-card` radius (globals ~1741), * not --ls-radius (default 12px would mismatch the surrounding cards). */ #root .new-ui-branded .bg-mortgage-box { background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 16px; } /* Accordion header typography (casa:573). Colour → heading token. */ #root .new-ui-branded .bg-mortgage-box .accordion-button { color: var(--ls-heading, #000); font-size: 25px; font-weight: 500; text-transform: capitalize; } @media (max-width: 575px) { #root .new-ui-branded .bg-mortgage-box .accordion-button { font-size: 20px; } } /* * Repayment RESULT panel — dark surface with white text. Deliberately NOT * --ls-surface: a light surface token would give white-on-light unreadable text * (there is no paired panel-text token). Hardcoded neutral dark guarantees * contrast. The p/h1 need `!important` (casa:1678/1683): dark-on-dark otherwise. */ #root .new-ui-branded .bg-mortgage { background-color: #394150; } #root .new-ui-branded .bg-mortgage p { color: #fff !important; font-weight: 600; } #root .new-ui-branded .bg-mortgage h1 { color: #fff !important; } /* "$" amount-input prefix (casa:1622; globals only has a mobile rule, 9644). */ #root .new-ui-branded .bg-dollar-price { background-color: #fff; color: var(--ls-body, #050705); font-weight: 500; padding-left: 21px; padding-right: 18px; } /* Reset link (casa:1662; globals only styles :disabled, 5088). */ #root .new-ui-branded .mortgage-reset { text-decoration: underline; font-weight: 500; color: var(--ls-body, #000); border: 0; } /* The Calculate button is now a FILLED PRIMARY button — fully owned by the token * layer (unit-branding-newui.css), matching the main CTA. No structure needed * here: the element already ships `border-0 rounded-pill fw-600` in its JSX. */ /* ──────────────────────────────────────────────────────────────────────────── * SIDEBAR PRICING (Common/PriceComp/PriceComp.tsx) * ──────────────────────────────────────────────────────────────────────────── */ /* Rounded price panel (casa:1710). */ #root .new-ui-branded .price-guide { border-radius: 9px; } /* * Price figure + label SIZE (casa:1714/1720). globals has no desktop rule (only * a 16px mobile rule, 9628) so the price renders at bootstrap h5 size without a * sheet. Colour is owned by the token layer (unit-branding-newui.css:253-256). * This intentionally also overrides the 16px mobile rule (matches casa's own * ~32px mobile price). */ #root .new-ui-branded .price-guide h5 { font-size: 30px; font-weight: 500; } #root .new-ui-branded .price-guide .title { font-size: 20px; font-weight: 300; } /* Hide the price for SOLD units. The sidebar renders `.sold-label` only when * SoldStatus === 'Sold' (getSoldStatusLabelClass), and both it and `.price-guide` * live under the same `.unit-info`, so `:has()` targets exactly sold units with no * component change. (The sidebar `.card-tag` holds the building/floor line, not a * price, so only `.price-guide` needs hiding.) */ #root .new-ui-branded .unit-info:has(.sold-label) .price-guide { display: none; } /* ──────────────────────────────────────────────────────────────────────────── * HERO GALLERY (UnitDetails/ImageSlider/ImageSlider.tsx) * ──────────────────────────────────────────────────────────────────────────── */ /* * Selected thumbnail indicator (casa:1692). The also carries bootstrap * `.border` (whose utility is `!important`), so this must be `!important` too. * Colour → card-accent token; 1.8px preserved from casa. */ #root .new-ui-branded .border-card-small { border: 1.8px solid var(--ls-card-accent, #d4cec6) !important; } /* ──────────────────────────────────────────────────────────────────────────── * TOP ACTION BAR — "Estimated Repayment" EMI pill (UnitLeftInfo.tsx) * ──────────────────────────────────────────────────────────────────────────── */ /* * The pill is a bootstrap `.btn btn-sm` with no variant (transparent by default); * its is already `.text-dark`. Theme it via the `--bs-btn-*` vars (the * repo's bootstrap-button pattern, cf. unit-branding-newui.css:99-107) so hover / * active are covered without `!important`. Neutral grey to match the adjacent * share / back pills (globals ~4979-5009), not casa's brand #E5E5DB. */ #root .new-ui-branded .bg-header-calculate { --bs-btn-bg: #f4f4f6; --bs-btn-border-color: #f4f4f6; --bs-btn-hover-bg: #e9e9ec; --bs-btn-hover-border-color: #e9e9ec; --bs-btn-active-bg: #e9e9ec; --bs-btn-active-border-color: #e9e9ec; } /* ──────────────────────────────────────────────────────────────────────────── * SIMILAR / TRENDING CARDS (UnitDetails/SimilarTrendingUnits/*) * ──────────────────────────────────────────────────────────────────────────── */ /* Rounded corners + hover lift (casa:1894/807; globals gives the card only * cursor:pointer, 4888 — no lift). */ #root .new-ui-branded .smiliar-trending-card { border-radius: 20px; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } #root .new-ui-branded .smiliar-trending-card:hover { transform: translateY(-7px); box-shadow: 0 8px 28px rgb(0 0 0 / 0.06); } /* Disable the lift on touch/small viewports (casa disables it ≤991.98px). */ @media (max-width: 991.98px) { #root .new-ui-branded .smiliar-trending-card:hover { transform: none; box-shadow: none; } } /* ──────────────────────────────────────────────────────────────────────────── * HOME & LAND — "HOME DESIGNS AVAILABLE" (AvailableUnitsCard.tsx) * * This is a distinct unit-detail card, not a `.unit-card.homedesign`: it used * hard-coded inline paint and therefore missed the Home & Land listing-card * treatment. These are the Arbour defaults (arbourestate.css:770-830, * 2093-2099), scoped to the marker emitted only for HomeAndLand projects. The * token layer loaded after this file owns the matching colours and geometry. * ──────────────────────────────────────────────────────────────────────────── */ #root .new-ui-branded .home-land-available-unit-card { background-color: #F2F3F0; border: 1px solid #2E474233; } #root .new-ui-branded .home-land-available-unit-card .name-available { color: #00212D !important; font-family: var(--ls-heading-font, 'Inter', sans-serif) !important; font-size: 20px; } #root .new-ui-branded .home-land-available-unit-card .available-span, #root .new-ui-branded .home-land-available-unit-card .font-15 { color: #41484B; } #root .new-ui-branded .home-land-available-unit-card .available-span span { color: #2E4742 !important; } #root .new-ui-branded .home-land-available-unit-card .icon-available { background-color: transparent; border-radius: 50%; padding: 10px 9px 8px 8px; color: #003B49; } /* The area tiles draw a 24px footprint ` glyph, and every link in that * chain is size-relative: bootstrap's reboot gives `button` `font-size: * inherit`, and the icon `:before` is pure em (`width: 1em`, `.2em` side * margins, `line-height: 1em`). So sizing the button IS sizing the glyph — 8px * halves the arrows from the 16px they inherit from body today, keeping them * subordinate to the 12px label beside them. Nothing else declares a size here * either: globals sizes `.filter-level-arrow i` only between 1200px and 1399px. * * TRADE-OFF: at 8px the glyph box is 1.4em ≈ 11px, so with the `padding: 0 4px` * above the button lands near 19x8 CSS px — under the 24x24 minimum in WCAG 2.2 * SC 2.5.8. It was already short vertically at 16px (roughly 30x16), so this * narrows an existing shortfall rather than introducing one. The fix, if it * matters, is vertical padding on the button — that grows the target without * touching the glyph size. * * No `!important`, per this file's discipline: `.span-title` is the very same * selector as its 14px rule above and simply sits later in the file, and * neither the level label nor the buttons have a competing declaration at this * breakpoint at all — globals only sizes `.filter-level-arrow span` between * 1200px and 1399px, and the legacy per-project sheet * (chathamwestryde.css:1715/2513) sets both at (0,2,0)/(0,1,1), which these * out-rank on specificity regardless of load order. */ @media (max-width: 575px) { #root .new-ui-branded .box-level .filter-level .span-title { font-size: 12px; } #root .new-ui-branded .box-level .filter-level-arrow span { font-size: 12px; } #root .new-ui-branded .box-level .filter-level-arrow button { font-size: 8px; } } /* Keyframes are GLOBAL names (can't be scoped), and legacy per-project CDN sheets * (e.g. chathamwestryde.css) define their own `moveGradient`/`glowPulse` used on * their `.box-level::after`. To guarantee legacy inertness regardless of sheet * load order, these are namespaced `nu-*` and self-contained (no reliance on * globals' `moveGradient`). * * nu-move-gradient: the horizontal shimmer (globals' background-size:300% gives it * room to travel). nu-glow-pulse: a soft brand glow — a single subtle box-shadow * in the brand primary at reduced opacity; only the blur radius animates, so the * colour stays constant across keyframes (no @property needed) and reads * --ls-primary-btn off the animated ::after (inherited from .new-ui-branded). */ @keyframes nu-move-gradient { 50% { background-position: 100% 50%; } } @keyframes nu-glow-pulse { 0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--ls-primary-btn, #050705) 50%, transparent); } 50% { box-shadow: 0 0 14px color-mix(in srgb, var(--ls-primary-btn, #050705) 50%, transparent); } } /* ──────────────────────────────────────────────────────────────────────────── * MORTGAGE-BOX DETAILS ROWS — label / value spacing (UnitInfo.tsx:1087 * `.bg-mortgage-box.bg-white` → `.data-list` → `.data-item` of `.item-label` + * `.item-input`). globals lays each row out `flex; justify-content:space-between` * with NO minimum gap (globals:2200), so a long value crowds the label. Guarantee * ≥15px between them, keep the label from shrinking, and right-align a long value. * ──────────────────────────────────────────────────────────────────────────── */ #root .new-ui-branded .bg-mortgage-box .data-list .data-item { column-gap: 15px; } #root .new-ui-branded .bg-mortgage-box .data-list .data-item .item-label { flex-shrink: 0; } #root .new-ui-branded .bg-mortgage-box .data-list .data-item .item-input { text-align: right; } /* Details rows are reorderable via CSS `order` (each .data-item carries a stable * details--item- class). `order` needs a flex/grid parent, and globals keeps * .data-list a block, so make it a column here (new-UI only). Visual layout is * unchanged; it just enables ordering. */ #root .new-ui-branded .details .data-list { display: flex; flex-direction: column; } /* ──────────────────────────────────────────────────────────────────────────── * FILTERS — structure & surfaces (property-list filter panel + dropdown popover) * COLOUR for the filter box lives in unit-branding-newui.css (── FILTERS — * --ls-filter ──: pills, checkboxes, go-btn, tabs, headings). This section owns * only STRUCTURE, so nothing overlaps. Ported from the celinechatswood / * casaneutralbay per-project sheets and generalised: brand browns/greys → neutral * dividers (--ls-border, base #dee2e6), layout kept as authored. * ──────────────────────────────────────────────────────────────────────────── */ /* Panel surface — both reference sheets paint the panel neutral #F7F7F7. */ #root .new-ui-branded .filter-box { background-color: #f7f7f7; border: 1px solid #f7f7f7; } #root .new-ui-branded .filter-box .price-range { border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; } /* Price header + range text follow the neutral field-label treatment (plain #000, * not the --ls-body brand token) — same as `.dropdown-filter-box .form-label`. */ #root .new-ui-branded .filter-box .price-range .head { color: #000 !important; } #root .new-ui-branded .filter-box .range-txt { color: #000; } #root .new-ui-branded .filter-box .bedroom-filters-div .scroll-box { border-bottom: 0; } #root .new-ui-branded .filter-box .building-check .form-check-inline label { width: auto; } #root .new-ui-branded .filter-box .building-check .scroll-box { display: block; } /* Multi-select field summary/placeholder (the div showing the selected values or * "Any", overlaying a multi-select — lives in both .filter-box and its * .dropdown-filter-box variant). globals has no rule for it (a vacuum only * per-project sheets filled), so supply the absolute positioning + ellipsis + a * NEUTRAL grey (not branded), plus celine's per-breakpoint widths. */ #root .new-ui-branded .filter-box .multiselect-label, #root .new-ui-branded .dropdown-filter-box .multiselect-label { position: absolute; left: 24px; top: 48px; width: 157px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; font-size: 14px; color: #6c757d; border: 0; } @media (max-width: 1500px) { #root .new-ui-branded .filter-box .multiselect-label, #root .new-ui-branded .dropdown-filter-box .multiselect-label { width: 156px; } } @media (min-width: 1200px) and (max-width: 1280px) { #root .new-ui-branded .filter-box .multiselect-label, #root .new-ui-branded .dropdown-filter-box .multiselect-label { width: 135px !important; } } @media (min-width: 1501px) and (max-width: 1699px) { #root .new-ui-branded .filter-box .multiselect-label, #root .new-ui-branded .dropdown-filter-box .multiselect-label { width: 154px; } } /* Mobile (≤991.98px): the .dropdown-filter-box is hidden (d-md-flex) and the full * .filter-box panel is used (sections stacked vertically) — tighten the bedroom * pill width, divide the stacked multi-select accordions, and add a divider above * the sold-status tabs. Desktop uses the horizontal dropdown, where these dividers * would look wrong. (celine @media max-width:991.98px; dividers neutral.) */ @media (max-width: 991.98px) { #root .new-ui-branded .filter-box .bedroom-filters-div .form-check-inline label { width: 60px; } #root .new-ui-branded .filter-box .multi-select-container .accordion { border-bottom: 1px solid #dee2e6; } #root .new-ui-branded .filter-box .tabs-button { border-top: 1px solid #dee2e6; } } /* Compact dropdown variant (.dropdown-filter-box) — container + accordion reset, * item chrome, and the absolutely-positioned popover. Not present in the new-UI * layer before this. */ /* Desktop dropdown CONTAINER: keep the base white card. globals paints * `.dropdown-filter-box` a white box (box-shadow + border + radius + padding) with * `!important` inside @media (min-width:992.98px) — we intentionally do NOT reset * it, so the desktop dropdown reads as a white panel holding the filter fields. * The accordion inside is flattened so the fields sit cleanly within that card. */ #root .new-ui-branded .dropdown-filter-box .accordion { border: none; border-radius: 0; margin: 0; } #root .new-ui-branded .dropdown-filter-box .accordion-button { font-weight: 500; } /* Labels, placeholders and text-input borders kept NEUTRAL (brand-independent) — * black label text, grey placeholder, grey input border — so the dropdown reads * as a plain form regardless of brand. The bedroom PILLS (`.form-check-inline * label`) stay brand-coloured via unit-branding-newui.css; this only hits the * field labels (`.form-label`) and text inputs (`.form-control`). */ #root .new-ui-branded .dropdown-filter-box .form-label { color: #000; } #root .new-ui-branded .dropdown-filter-box .form-control { border: 1px solid #ced4da; color: #000; } #root .new-ui-branded .dropdown-filter-box .form-control::placeholder, #root .new-ui-branded .dropdown-filter-box input::placeholder { color: #6c757d; } /* Unchecked bedroom pill — NEUTRAL "unselected" look (grey fill, black text), not * brand-derived. The CHECKED state stays branded (--ls-filter) in * unit-branding-newui.css. Base keys the pill off `#root … !important`, so match. */ #root .new-ui-branded .dropdown-filter-box .bedroom-filters-div .form-check-inline input:not(:checked)~label { background-color: #f2f2f2 !important; color: #000 !important; font-size: 12px; } #root .new-ui-branded .dropdown-filter-box .accordion-item { position: relative; border: 1px solid #dee2e6; border-radius: 12px; padding-left: 10px; padding-right: 4px; } #root .new-ui-branded .dropdown-filter-box .price-range { border-top: 0; border-bottom: 0; padding: 0; } #root .new-ui-branded .dropdown-filter-box .price-range .head { font-weight: 500; } #root .new-ui-branded .dropdown-filter-box .bedroom-filters-div label { font-weight: 500; } #root .new-ui-branded .dropdown-filter-box .bedroom-filters-div .scroll-box { border-bottom: none; display: block; margin-bottom: 3px; } #root .new-ui-branded .dropdown-filter-box .bedroom-filters-div .form-check-inline label { padding: 15px; font-size: 15px; } #root .new-ui-branded .dropdown-filter-box .bedroom-raduis .form-check-inline label { width: auto; height: 30px; } #root .new-ui-branded .dropdown-filter-box .scroll-box { position: absolute; z-index: 10; width: 100.7% !important; border: 1px solid #dee2e6 !important; border-top: 0 !important; border-radius: 0 0 12px 12px; margin-top: 1px; padding: 11px !important; min-height: 168px !important; background: #fff; } #root .new-ui-branded .dropdown-filter-box .accordion-item:last-of-type > .accordion-collapse { border-top: 0; padding-top: 0; margin-left: -11px; } @media (max-width: 991.98px) { #root .filter-box .bedroom-filters-div .form-check-inline label { width: 60px; } } .tabs-button button { background-color: var(--text-light); border: 1px solid #000; color: #000; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; font-weight: 500; } @media (max-width: 991.98px) { .tabs-button button { background-color: var(--text-light); } }