/* ==========================================================================
Intiland Industrial — public site
Rebuilt from Figma "baru lagi" (file x1b6034KrYwZHHX6J9RuCi)
Design canvas: 1920px. Every value below is the Figma value in rem
(1rem = 16px at the 1920px canvas), so the layout scales proportionally.
========================================================================== */
:root {
/* ---- Palette (extracted from Figma) ---- */
--blue: #225B93;
--blue-hover: #1A4874;
--orange: #FF6200;
--orange-hover: #E05600;
--orange-soft: #FFF1E9;
--ink: #000000;
--white: #FFFFFF;
--bg-blue: #EBF5FF; /* section / panel tint */
--bg-blue-50: #F5FAFF; /* form panel */
--surface: #F9F9F9; /* card media well */
--border: #E0E0E0;
--border-input: #7696B9;
--divider: #E9E9E9;
--grey: #A9A9A9;
--grey-mid: #999999;
--grey-chip: #D9D9D9;
--caret: #CECECE;
/* ---- Shadows ---- */
--sh-stats: 0 .9375rem 1.5625rem .625rem rgba(0, 0, 0, .04); /* 0 15 25 10 / 4% */
--sh-card: 0 .625rem .9375rem rgba(0, 0, 0, .10); /* 0 10 15 / 10% */
--sh-mosaic-l: -.4375rem -.3125rem .625rem rgba(0, 0, 0, .15); /* -7 -5 10 / 15% */
--sh-mosaic-r: .4375rem .3125rem .625rem .1875rem rgba(0, 0, 0, .05);
--sh-map-btn: 0 .125rem .125rem rgba(0, 0, 0, .25);
--sh-modal: 0 .625rem 2.1875rem .625rem rgba(0, 0, 0, .25);
/* ---- Layout ---- */
--page: 120rem; /* 1920 */
--gutter: 12.5rem; /* 200 — main content inset */
--panel: 106.0625rem;/* 1697 — tinted rounded panels */
--header-h: 8rem; /* 128 */
}
/* Proportional scaling: 16px base at 1920, floors at 12px (0.75x) by 1440.
Below 1024 we hand off to a mobile-tuned scale. */
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
}
@media (max-width: 1919px) {
html { font-size: clamp(12px, 0.83333vw, 16px); }
}
@media (max-width: 1023px) {
html { font-size: 15px; }
}
*, *::before, *::after { box-sizing: border-box; }
/* The UA rule for [hidden] is display:none, but any author `display` declaration
outrides it — which silently keeps hidden elements on screen. Enforce it. */
[hidden] { display: none !important; }
body {
margin: 0;
font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 2rem;
color: var(--ink);
background: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
/* Authored hard break. A block box breaks the line exactly as
does, but
unlike
it can be turned back into a space at a narrower viewport — see
MOBILE REFINEMENTS at the foot of this file. The space it carries is what
survives that switch; `line-height: 0` keeps it from adding a line of
height while the box is still block-level. */
.lb { display: block; line-height: 0; }
.lb::before { content: " "; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: .1875rem solid var(--orange); outline-offset: .125rem; }
.skip-link {
position: absolute;
left: 0;
top: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
width: 1px;
height: 1px;
overflow: hidden;
z-index: 300;
padding: .75rem 1.25rem;
background: var(--blue);
color: var(--white);
font-size: 1rem;
font-weight: 600;
}
.skip-link:focus { clip: auto; clip-path: none; width: auto; height: auto; left: .5rem; top: .5rem; }
/* --------------------------------------------------------------------------
Shared primitives
-------------------------------------------------------------------------- */
.wrap { /* full-bleed row with the 200px inset */
width: 100%;
max-width: var(--page);
margin-inline: auto;
padding-inline: var(--gutter);
}
.panel { /* 1697-wide tinted rounded panel */
width: min(100% - 2rem, var(--panel));
margin-inline: auto;
background: var(--bg-blue);
border-radius: 3rem; /* 48 */
}
/* Section eyebrow — 24/50 w500 orange */
.eyebrow {
font-size: 1.5rem;
line-height: 3.125rem;
font-weight: 500;
color: var(--orange);
}
/* Section heading — 56/72 w500 black, emphasis span = 600 italic */
.h-section {
font-size: 3.5rem;
line-height: 4.5rem;
font-weight: 500;
color: var(--ink);
letter-spacing: 0;
}
.h-section em,
.h-section .em {
font-style: italic;
font-weight: 600;
}
/* Han script has no true italic — synthesised obliques look broken. Mark the
emphasised words in Chinese with colour instead. */
html:lang(zh) .h-section em,
html:lang(zh) .h-section .em,
html:lang(zh) .hero__title em,
html:lang(zh) .reason__title em {
font-style: normal;
color: var(--blue);
}
html:lang(zh) .hero__title em { color: var(--white); }
/* Page-header heading — 48/64 w500 blue */
.h-page {
font-size: 3rem;
line-height: 4rem;
font-weight: 500;
color: var(--blue);
}
.lede { font-size: 1.5rem; line-height: 2rem; font-weight: 500; }
.body-copy { font-size: 1.5rem; line-height: 2rem; font-weight: 400; }
/* "Learn More ›" link — 12/15 w600 blue over a 77px hairline */
.learn-more {
display: inline-flex;
align-items: center;
gap: .25rem;
min-width: 5.25rem; /* 84 */
white-space: nowrap;
padding-bottom: .3125rem;
border-bottom: .0625rem solid var(--border);
font-size: .75rem;
line-height: .9375rem;
font-weight: 600;
color: var(--blue);
align-self: flex-start;
transition: color .18s, border-color .18s;
}
.learn-more svg { width: .875rem; height: .875rem; flex: none; }
.learn-more:hover { color: var(--orange); border-color: var(--orange); }
/* Pill button — 117x35 r10 blue, 15/18 w600 */
.btn-pill {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.1875rem;
padding-inline: 1.0625rem;
border-radius: .625rem;
background: var(--blue);
color: var(--white);
font-size: .9375rem;
line-height: 1.125rem;
font-weight: 600;
transition: background .18s;
}
.btn-pill:hover { background: var(--blue-hover); }
/* Small blue chip button — 125x28 r4, 12/15 w600 */
.btn-chip {
display: inline-flex;
align-items: center;
gap: .3125rem;
height: 1.75rem;
padding-inline: .75rem;
border-radius: .25rem;
background: var(--blue);
color: var(--white);
font-size: .75rem;
line-height: .9375rem;
font-weight: 600;
transition: background .18s;
}
.btn-chip svg { width: .875rem; height: .875rem; flex: none; }
.btn-chip:hover { background: var(--blue-hover); }
/* Large CTA — 418x67 r15 orange w/ inner 410x60 r14 gradient, 24/17 w600 */
.btn-cta {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26.125rem;
max-width: 100%;
height: 4.1875rem;
padding: .25rem;
border-radius: .9375rem;
background: var(--orange);
color: var(--white);
font-size: 1.5rem;
font-weight: 600;
line-height: 1;
transition: filter .18s;
}
.btn-cta::before {
content: "";
position: absolute;
inset: .25rem;
border-radius: .875rem;
background: linear-gradient(to top, var(--orange) 0%, var(--orange) 46.7%, #FFC8A5 100%);
}
.btn-cta > span { position: relative; }
.btn-cta:hover { filter: brightness(.95); }
/* Solid orange submit — r12, 24 w700 */
.btn-submit {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 4.875rem;
border: 0;
border-radius: .75rem;
background: #F56F1C;
color: var(--white);
font-size: 1.5rem;
font-weight: 700;
cursor: pointer;
transition: background .18s;
}
.btn-submit:hover { background: var(--orange-hover); }
/* --------------------------------------------------------------------------
Header — 1920x128 white; lang @100, nav centred, logo @1679 (158x35)
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 60;
height: var(--header-h);
background: var(--white);
}
.site-header__inner {
display: flex;
align-items: center;
height: 100%;
max-width: var(--page);
margin-inline: auto;
padding-left: 6.25rem; /* 100 */
padding-right: 5.1875rem;/* 83 */
}
.lang {
position: relative;
flex: none;
}
.lang__btn {
display: flex;
align-items: center;
gap: .25rem;
height: 2.1875rem;
padding-inline: .8125rem;
border: .125rem solid var(--blue);
border-radius: .625rem;
background: none;
font-size: .9375rem;
line-height: 1.125rem;
font-weight: 600;
color: var(--blue);
cursor: pointer;
}
.lang__caret { width: .875rem; height: .6875rem; fill: var(--caret); }
.lang__menu {
position: absolute;
top: calc(100% + .5rem);
left: 0;
min-width: 100%;
padding: .25rem;
border: .0625rem solid var(--border);
border-radius: .625rem;
background: var(--white);
box-shadow: var(--sh-card);
}
.lang__menu a {
display: block;
padding: .375rem .625rem;
border-radius: .375rem;
font-size: .9375rem;
font-weight: 600;
color: var(--blue);
white-space: nowrap;
}
.lang__menu a:hover { background: var(--bg-blue); }
.site-nav {
display: flex;
align-items: center;
gap: 3.125rem; /* 50 — measured between every nav item */
margin-inline: auto;
}
.site-nav__link {
font-size: 1.25rem;
line-height: 1.5rem;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
transition: color .18s;
}
.site-nav__link:hover { color: var(--blue); }
.site-nav__link.is-active { color: var(--blue); }
/* Eight items in Indonesian measure ~1160px of text at 20px; at the 50px gap
that leaves no room beside the logo, so the Indonesian nav packs tighter. */
html:lang(id) .site-nav { gap: 2.25rem; }
/* "Our Projects" dropdown — the estates, under About Us */
.nav-drop { position: relative; }
.nav-drop__btn {
display: inline-flex;
align-items: center;
gap: .375rem;
padding: 0;
border: 0;
background: none;
font-family: inherit;
cursor: pointer;
}
.nav-drop__caret { width: .75rem; height: .5625rem; fill: currentColor; transition: transform .18s; }
.nav-drop__btn[aria-expanded="true"] .nav-drop__caret { transform: rotate(180deg); }
.nav-drop__menu {
position: absolute;
top: calc(100% + .75rem);
left: 50%;
z-index: 70;
min-width: 16rem;
padding: .375rem;
border: .0625rem solid var(--border);
border-radius: .75rem;
background: var(--white);
box-shadow: var(--sh-card);
transform: translateX(-50%);
}
/* Bridges the gap under the button so the pointer can reach the menu. */
.nav-drop__menu::before { content: ""; position: absolute; inset: -.75rem 0 100%; }
.nav-drop__menu a {
display: block;
padding: .625rem .875rem;
border-radius: .5rem;
font-size: 1rem;
line-height: 1.375rem;
font-weight: 600;
color: var(--ink);
white-space: nowrap;
}
.nav-drop__menu a:hover,
.nav-drop__menu a:focus-visible { background: var(--bg-blue); color: var(--blue); }
.nav-drop__menu a[aria-current="page"] { color: var(--blue); }
@media (hover: hover) and (min-width: 1280px) {
.nav-drop:hover > .nav-drop__menu[hidden] { display: block; }
.nav-drop:hover .nav-drop__caret { transform: rotate(180deg); }
}
.site-header__logo { flex: none; }
.site-header__logo img { width: 9.875rem; height: 2.1875rem; object-fit: contain; }
.nav-toggle { display: none; }
/* --------------------------------------------------------------------------
Page header — heading @200,218 on the page's own white (the client's review
dropped the #EBF5FF band on every page)
-------------------------------------------------------------------------- */
.page-head {
padding-top: 5.625rem; /* 218 - 128 = 90 */
padding-bottom: 4rem;
}
.page-head__lede { margin-top: .875rem; max-width: 50.0625rem; }
/* Project pages: bold name, and the thin rule below sits 58px under the lede */
.page-head--park { padding-bottom: 3.625rem; }
.page-head--park .h-page { font-weight: 700; }
/* --------------------------------------------------------------------------
CTA band — 1920x233: photo at 25% on white, #2191FF/25% fill above it,
heading + big button on top
-------------------------------------------------------------------------- */
.cta-band {
position: relative;
height: 14.5625rem; /* 233 */
display: grid;
place-content: center;
gap: 1.4375rem;
justify-items: center;
text-align: center;
overflow: hidden;
}
.cta-band__bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Lift the copy above the photo. Must not match .cta-band__bg —
a blanket `.cta-band > *` would override its absolute positioning. */
.cta-band__title,
.cta-band .btn-cta { position: relative; z-index: 1; }
.cta-band__title {
font-size: 2rem;
line-height: 1;
font-weight: 600;
color: var(--ink);
}
/* --------------------------------------------------------------------------
Footer — logo @168 (167x145), columns @794 / 1163 / 1391, band 1920x462
-------------------------------------------------------------------------- */
.site-footer {
background: var(--white);
padding-block: var(--footer-pt, 5.5rem) 3.5rem;
}
.site-footer__inner {
display: grid;
grid-template-columns: 39.125rem 23.0625rem 14.25rem 25.375rem;
max-width: var(--page);
margin-inline: auto;
padding-left: 10.5rem; /* 168 */
align-items: start;
}
.site-footer__logo { width: 10.4375rem; }
.site-footer__logo img { width: 100%; height: 9.0625rem; object-fit: contain; object-position: left top; }
.site-footer__cols { display: contents; }
.footer-col { min-width: 0; }
.footer-col__title {
font-size: 1.5rem;
line-height: 1.0625rem;
font-weight: 700;
color: var(--blue);
margin-bottom: 2.5rem;
}
.footer-col li { line-height: 1.5625rem; }
.footer-col li + li { margin-top: 1.5625rem; }
.footer-col a, .footer-col p {
font-size: 1.5rem;
line-height: 1.5625rem;
font-weight: 400;
color: var(--ink);
}
.footer-col a { transition: color .18s; }
.footer-col a:hover { color: var(--blue); }
.footer-col--hq p { line-height: 2rem; }
.footer-col--hq strong { font-weight: 700; display: block; margin-bottom: 1.5rem; }
.site-footer__legal {
max-width: var(--page);
margin: 4rem auto 0;
padding-inline: 10.5rem;
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: space-between;
font-size: 1rem;
color: var(--grey-mid);
}
.site-footer__legal a:hover { color: var(--blue); }
/* --------------------------------------------------------------------------
HOME · Hero — image 1920x1123 (bottom radius 100), copy @304
-------------------------------------------------------------------------- */
.hero {
position: relative;
margin-top: calc(var(--header-h) * -1);
}
.hero__media {
position: relative;
height: 70.1875rem; /* 1123 */
border-radius: 0 0 6.25rem 6.25rem;
overflow: hidden;
}
.hero__media img,
.hero__media video {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__copy {
position: absolute;
left: 19rem; /* 304 */
top: 18.25rem; /* 292 */
z-index: 2;
color: var(--white);
max-width: 45rem;
}
.hero__eyebrow {
font-size: 1.5625rem; /* 25 */
line-height: 3.0625rem; /* 49 */
font-weight: 500;
}
.hero__title {
margin-top: .375rem;
font-size: 3.5rem; /* 56 */
line-height: 4.0625rem; /* 65 */
font-weight: 500;
}
.hero__title em { font-style: italic; font-weight: 700; }
/* Light hero image (set in the CMS) — brand blue copy instead of white */
.hero--dark .hero__copy { color: var(--blue); }
html:lang(zh) .hero--dark .hero__title em { color: var(--orange); }
/* Stats bar — 1668x260 r50, overlaps the hero by 130px */
.stats {
position: relative;
z-index: 3;
width: min(100% - 2rem, 104.25rem); /* 1668 */
margin: -8.125rem auto 0;
height: 16.25rem; /* 260 */
display: flex;
align-items: center;
background: var(--white);
border-radius: 3.125rem; /* 50 */
box-shadow: var(--sh-stats);
}
/* Figma places the card at x=108 — 18px left of centre. Reproduced only where
the full 1920 canvas is on screen; below that centring reads better. */
@media (min-width: 1920px) {
.stats { transform: translateX(-1.125rem); }
}
.stats__item {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.0625rem;
text-align: center;
color: var(--blue);
}
.stats__item + .stats__item { border-left: .1875rem solid var(--divider); }
.stats__value {
font-size: 3.125rem; /* 50 */
line-height: 1;
font-weight: 600;
white-space: nowrap;
}
.stats__value sup {
font-size: 1.5625rem; /* 25 */
font-weight: 600;
vertical-align: .55em;
margin-right: .0625rem;
}
.stats__value .unit { font-size: 2.1875rem; } /* 35 — "trillion" */
.stats__label {
font-size: 1.25rem; /* 20 */
line-height: 1.5625rem; /* 25 */
font-weight: 500;
}
/* --------------------------------------------------------------------------
HOME · Decades of Excellence — copy left @200, photo mosaic right
-------------------------------------------------------------------------- */
.decades {
display: grid;
grid-template-columns: 36.875rem 1fr; /* copy 590 */
gap: 6.25rem;
align-items: start;
padding-top: 8.875rem; /* 1253 → 1395 */
padding-bottom: 12.75rem;
}
.decades__title {
margin-top: .3125rem;
/* Figma's heading box is 688 wide — wider than the 590 body column — so it
keeps "in Industrial Development" on one line. */
width: 43rem;
max-width: calc(100% + 6.25rem);
}
.decades__body { margin-top: 1.9375rem; }
.decades__body p + p { margin-top: 2rem; }
/* The collage is one fixed-ratio box (Figma 934,1394 → 1697,1964 = 763x570)
with each photo placed in percentages of it, so it keeps the same overlap
at every width and zoom level instead of switching layouts at a breakpoint.
Only phones (< 600) fall back to stacked photos. */
.mosaic {
position: relative;
width: 47.6875rem; /* 763 */
max-width: calc(100% - 2.75rem);
margin-left: 2.75rem; /* column starts at 890 → x 934 */
aspect-ratio: 763 / 570;
}
.mosaic img {
position: absolute;
border: .1875rem solid var(--white);
object-fit: cover;
}
.mosaic__a { /* @990,1394 557x371 r20/20/20/0 */
left: 7.3394%; top: 0;
width: 73.0013%; height: 65.0877%;
border-radius: 1.25rem 1.25rem 1.25rem 0;
}
.mosaic__b { /* @1311,1580 386x257 r20 */
left: 49.4102%; top: 32.6316%;
width: 50.5898%; height: 45.0877%;
border-radius: 1.25rem;
box-shadow: var(--sh-mosaic-l);
z-index: 2;
}
.mosaic__c { /* @934,1704 495x260 r20 */
left: 0; top: 54.386%;
width: 64.8754%; height: 45.614%;
border-radius: 1.25rem;
box-shadow: var(--sh-mosaic-r);
z-index: 3;
}
/* --------------------------------------------------------------------------
HOME · Strategic Growth Corridors — list left, map right, in one centred
tinted panel (design review, Oct 2026). The Figma slab was pinned to the
viewport's left edge, so on screens past 1920 it drifted off the content.
-------------------------------------------------------------------------- */
.corridors {
position: relative;
padding-block: 2.625rem 8rem;
}
.corridors__slab { display: none; }
.corridors__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 41.6875rem 52.75rem; /* 667 list · 844 map */
justify-content: space-between;
align-items: start;
/* Same footprint as the other tinted panels; the inline padding puts the
copy back on the page's 200px content line. */
width: min(100% - 2rem, var(--panel));
max-width: none;
padding: 3.5rem calc(var(--gutter) - (var(--page) - var(--panel)) / 2) 4rem;
background: var(--bg-blue);
border-radius: 3rem;
}
.corridors__title { margin-top: .3125rem; max-width: 28.8125rem; }
.corridors__body { margin-top: 1.8125rem; max-width: 32.625rem; }
/* Estate card list — 667x366 r10/10/8/8, own scrollbar, fade at the bottom */
.estate-list {
position: relative;
margin-top: 3.75rem;
width: 41.6875rem;
height: 22.875rem; /* 366 */
padding: .75rem;
background: var(--white);
border-radius: .625rem .625rem .5rem .5rem;
}
.estate-list__scroll {
height: 100%;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #A3A3A3 #E8E8E8;
}
.estate-list__scroll::-webkit-scrollbar { width: .9375rem; }
.estate-list__scroll::-webkit-scrollbar-track { background: #E8E8E8; border-radius: .46875rem; }
.estate-list__scroll::-webkit-scrollbar-thumb { background: #A3A3A3; border-radius: .46875rem; border: .25rem solid #E8E8E8; }
.estate-list__fade {
position: absolute;
left: .75rem; right: 1.75rem; bottom: .75rem;
height: 3.5rem;
border-radius: 0 0 .1875rem .1875rem;
background: linear-gradient(180deg, rgba(249,249,249,0) 0%, rgba(147,147,147,.5) 100%);
pointer-events: none;
}
.estate-item {
position: relative;
padding: .5625rem 2rem 1.5rem;
background: var(--surface);
border-radius: .1875rem;
}
.estate-item + .estate-item { margin-top: .6875rem; }
.estate-item__place {
font-size: 1rem;
line-height: 3.125rem;
font-weight: 500;
color: var(--orange);
}
.estate-item__name {
font-size: 1.5rem;
line-height: 2.125rem;
font-weight: 600;
color: var(--blue);
}
.estate-item__desc {
margin-top: .8125rem;
max-width: 20.1875rem;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 400;
}
.estate-item__foot {
display: flex;
align-items: flex-end;
gap: 3.0625rem;
margin-top: 1rem;
}
.estate-item__stat dt {
font-size: .75rem;
line-height: 1.0625rem;
font-weight: 500;
color: var(--grey);
}
.estate-item__stat dd {
margin: .0625rem 0 0;
font-size: 1rem;
line-height: 1.0625rem;
font-weight: 600;
}
.estate-item__foot .btn-chip { margin-left: auto; }
/* Map — 844x770 r24 with a 4px white frame, floating controls */
.corridor-map {
position: relative;
margin-top: .75rem;
}
.corridor-map__img {
width: 52.75rem; /* 844 */
max-width: 100%;
height: 48.125rem; /* 770 */
object-fit: cover;
border: .25rem solid var(--white);
border-radius: 1.5rem;
}
.corridor-map__ctrl {
position: absolute;
right: 1.625rem;
bottom: 1.4375rem;
display: grid;
gap: .5625rem;
}
.corridor-map__ctrl button {
width: 2rem; height: 2rem;
display: grid; place-items: center;
border: 0;
border-radius: .25rem;
background: var(--white);
box-shadow: var(--sh-map-btn);
color: var(--grey-mid);
cursor: pointer;
}
.corridor-map__ctrl svg { width: 1.125rem; height: 1.125rem; }
/* --------------------------------------------------------------------------
HOME · Product panel — 5 cards 282x701 r24
-------------------------------------------------------------------------- */
.panel-section {
position: relative;
text-align: center;
padding-top: 2.875rem;
padding-bottom: var(--section-pb, 8rem);
}
.panel-section__bg {
position: absolute;
left: 50%;
top: 0;
z-index: -1;
width: min(100% - 2rem, var(--panel));
height: var(--bg-h);
transform: translateX(-50%);
background: var(--bg-blue);
border-radius: 3rem; /* 48 */
}
.panel-section__head { margin-bottom: var(--head-mb, 5.125rem); }
.panel-section__head .h-section { max-width: 46.5625rem; margin-inline: auto; }
.panel-section__body {
width: min(100% - 5rem, 94.75rem); /* 1516 */
margin-inline: auto;
}
.product-cards {
display: flex;
justify-content: space-between;
gap: 1.65rem;
}
.product-card {
flex: 1 1 0;
min-width: 0;
height: 43.8125rem; /* 701 */
padding: 1.625rem 1.0625rem 1rem 1.125rem;
display: flex;
flex-direction: column;
background: var(--white);
border-radius: 1.5rem;
box-shadow: var(--sh-card);
text-align: left;
}
.product-card__title {
font-size: 2rem;
line-height: 2.5rem;
font-weight: 600;
color: var(--blue);
padding-inline: .5rem;
flex: none;
max-width: 11.75rem; /* 188 — reproduces the Figma wraps */
height: 8.0625rem; /* 129 — keeps every image at y 3616 */
}
.product-card__title small {
display: block;
font-size: 1rem;
line-height: 1.25rem;
font-weight: 600;
}
.product-card__img {
width: 100%;
flex: none;
height: 30.8125rem; /* 493 */
object-fit: cover;
border-radius: .75rem;
}
.product-card .learn-more { margin: .9375rem auto 0; }
/* --------------------------------------------------------------------------
HOME · Advantage panel — 6 cards 488x314 r10 with a blue edge marker
-------------------------------------------------------------------------- */
.advantage-cards {
display: grid;
grid-template-columns: repeat(3, 30.5rem); /* 488 */
justify-content: space-between;
row-gap: 1.75rem;
width: 94.0625rem; /* 1505 → x 210…1715 */
max-width: 100%;
margin-inline: auto;
}
.advantage-card {
position: relative;
min-height: 19.625rem; /* 314 */
padding: 2rem 3.125rem 1.4375rem 3.3125rem; /* Figma insets 53 / 50 */
display: flex;
flex-direction: column;
background: var(--white);
border-radius: .625rem;
text-align: left;
overflow: hidden;
}
.advantage-card::before { /* 4x238 r5/0/0/5 blue marker */
content: "";
position: absolute;
left: 0;
top: 2.4375rem;
width: .25rem;
height: 14.875rem;
background: var(--blue);
border-radius: .3125rem 0 0 .3125rem;
}
.advantage-card__title {
max-width: 24.0625rem; /* 385 */
font-size: 2rem;
line-height: 2.5rem;
font-weight: 600;
}
.advantage-card__body { margin-top: .375rem; max-width: 24.0625rem; }
.advantage-card .learn-more { margin-top: auto; margin-left: auto; margin-right: -1rem; }
/* --------------------------------------------------------------------------
HOME · Tenant marquee — closes the Advantage panel, 32/40 w700 ink at 60%
(25% in Figma read as washed out on the tint — flagged in review)
-------------------------------------------------------------------------- */
.panel-section--advantage { margin-bottom: 9.6875rem; }
.tenants-strip { padding-top: 6.25rem; }
.tenants-strip .h-section { margin-bottom: 3.5rem; }
.marquee {
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
display: flex;
width: max-content;
animation: marquee 48s linear infinite;
}
/* Spacing trails each name (not a flex gap) so the two halves are exactly
equal and the -50% jump back is invisible. */
.marquee__track > span {
padding-right: 4.5rem;
font-size: 2rem;
line-height: 2.5rem;
font-weight: 700;
color: var(--ink);
opacity: .6;
white-space: nowrap;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee__track { animation: none; }
}
/* --------------------------------------------------------------------------
Contact split — copy left on the 200px line, form in a rounded card on the
right, both inside the centred page column (design review, Oct 2026).
-------------------------------------------------------------------------- */
.contact-split {
display: grid;
grid-template-columns: minmax(0, 1fr) 58rem; /* form 768 + 2 x 80 inset */
align-items: start;
width: 100%;
max-width: var(--page);
margin-inline: auto;
padding: 1rem var(--gutter) 0;
}
.contact-split__aside {
padding-right: 3rem;
padding-top: 1rem;
}
.contact-split__title {
font-size: 3rem;
line-height: 1;
font-weight: 700;
color: var(--blue);
}
.contact-block { margin-top: 4.3125rem; }
.contact-block__label {
font-size: 1.5rem;
line-height: 1;
font-weight: 700;
color: var(--blue);
margin-bottom: 1.5rem;
}
.contact-block p { font-size: 1.5rem; line-height: 2rem; }
.contact-block strong { display: block; font-weight: 700; margin-bottom: 1.5rem; }
.contact-block a { font-weight: 700; }
.contact-block a:hover { color: var(--blue); }
.socials { display: flex; gap: .75rem; }
.socials a {
width: 4.25rem; height: 4.3125rem;
display: grid; place-items: center;
border-radius: 50%;
background: var(--grey-chip);
transition: background .18s;
}
.socials a:hover { background: var(--blue); }
.socials svg { width: 2.3125rem; height: 2.3125rem; stroke: #1E1E1E; }
.socials a:hover svg { stroke: var(--white); }
.contact-panel {
background: var(--bg-blue-50);
border-radius: 1.5rem;
padding: 5.25rem 5rem 5.5rem 5rem;
}
.contact-form {
width: 100%;
max-width: 48rem; /* 768 in the Figma canvas */
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1.25rem;
row-gap: 2.4375rem;
}
.field { display: flex; flex-direction: column; gap: .5rem; }
.field--full { grid-column: 1 / -1; }
.field > label {
font-size: 1.5rem;
line-height: 1;
font-weight: 700;
}
.field input,
.field select,
.field textarea {
width: 100%;
height: 4.3125rem; /* 69 */
padding: 0 1.75rem;
border: .03125rem solid var(--border-input);
border-radius: .75rem;
background: var(--white);
font: 400 1rem/1.0625rem "Plus Jakarta Sans", sans-serif;
color: var(--ink);
}
.field textarea {
height: 16.0625rem; /* 257 */
padding-block: 1.5rem;
resize: vertical;
line-height: 1.5rem;
}
.field select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1.75rem center;
background-size: 1.5rem;
padding-right: 4.5rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 .0625rem var(--blue);
}
.field__error { font-size: 1rem; color: #D92D20; font-weight: 500; }
.contact-form__submit { grid-column: 1 / -1; padding-inline: .25rem; margin-top: .875rem; }
.form-success {
grid-column: 1 / -1;
padding: 1.5rem 2rem;
border-radius: .75rem;
background: #E7F7EF;
color: #08653C;
font-size: 1.25rem;
font-weight: 600;
}
/* --------------------------------------------------------------------------
Entry modal — 827x459 r25 over a 50% scrim
-------------------------------------------------------------------------- */
.entry-modal {
position: fixed;
inset: 0;
z-index: 200;
display: grid;
place-items: center;
padding: 1.5rem;
background: rgba(0, 0, 0, .5);
}
.entry-modal__dialog {
position: relative;
width: 51.6875rem; /* 827 */
max-width: 100%;
min-height: 28.6875rem; /* 459 */
padding: 6.5rem 4rem 4.4375rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: var(--white);
border-radius: 1.5625rem;
box-shadow: var(--sh-modal);
}
.entry-modal__close {
position: absolute;
top: .875rem; right: 1rem;
/* px, not rem: the hit target must stay 44px even though the rest of the
page scales its rem down on narrower viewports. */
width: 44px; height: 44px;
display: grid; place-items: center;
border: 0;
border-radius: 50%;
background: none;
color: var(--ink);
cursor: pointer;
transition: background .18s, color .18s;
}
.entry-modal__close svg { width: 20px; height: 20px; }
.entry-modal__close:hover { background: var(--bg-blue); color: var(--blue); }
.entry-modal__title { font-size: 2.5rem; line-height: 1; font-weight: 700; }
.entry-modal__body {
margin-top: 1.8125rem;
max-width: 37.75rem;
font-size: 1.875rem;
line-height: 2.5rem;
font-weight: 500;
}
.entry-modal .btn-cta { margin-top: 3.625rem; }
/* --------------------------------------------------------------------------
WHY US · reason cards — 1502x447 r24, blue hairline, art fills the right 829
-------------------------------------------------------------------------- */
.reason-list {
display: grid;
row-gap: 2.625rem; /* 42 */
width: 93.875rem; /* 1502 */
max-width: 100%;
margin: 3.8125rem auto 0; /* band bottom 488 → card top 549 */
padding-bottom: 4.125rem; /* card row ends 1975 → band 2045 */
}
.reason {
display: grid;
grid-template-columns: 42.0625rem 51.8125rem; /* 673 text · 829 art */
min-height: 27.9375rem; /* 447 */
border: .0625rem solid var(--blue);
border-radius: 1.5rem;
background: var(--white);
overflow: hidden;
}
.reason__body {
display: flex;
flex-direction: column;
padding: 3.0625rem 3rem 2.1875rem 5.5rem; /* title @+50, inset 88 */
}
.reason__title {
max-width: 30.75rem; /* 492 */
font-size: 3rem;
line-height: 4.5rem; /* 72 */
font-weight: 600;
}
.reason__text {
margin-top: 1.5rem;
max-width: 29.6875rem; /* 475 */
font-size: 1.5rem;
line-height: 2rem;
font-weight: 500;
}
.reason .learn-more { margin-top: auto; }
.reason__art { width: 100%; height: 100%; object-fit: cover; }
/* --------------------------------------------------------------------------
NEWS index — two 726-wide cards per row, art 726x348 r24
-------------------------------------------------------------------------- */
.news-grid {
display: grid;
grid-template-columns: repeat(2, 45.375rem); /* 726 */
justify-content: space-between;
column-gap: 3.125rem;
row-gap: 5.5rem;
padding-top: 4.0625rem; /* band 488 → art 553 */
padding-bottom: 3.5625rem;
}
.news-card__art {
width: 100%;
height: 21.75rem; /* 348 */
object-fit: cover;
border-radius: 1.5rem;
background: var(--grey-chip);
}
.news-card__date {
display: block;
margin-top: 1.8125rem;
font-size: 1rem;
line-height: 1.0625rem;
font-weight: 500;
}
.news-card__title {
display: block;
margin-top: 1.0625rem;
max-width: 41.75rem; /* 668 */
font-size: 2rem;
line-height: 2.8125rem; /* 45 */
font-weight: 600;
color: var(--blue);
transition: color .18s;
}
.news-card a:hover .news-card__title { color: var(--orange); }
.news-card__excerpt { margin-top: 1.375rem; }
.news-pagination { display: flex; justify-content: center; gap: .75rem; padding-bottom: 4rem; }
.news-pagination a, .news-pagination span {
min-width: 3rem; padding: .5rem .75rem;
border-radius: .5rem; text-align: center;
font-size: 1.25rem; font-weight: 600; color: var(--blue);
}
.news-pagination a:hover { background: var(--bg-blue); }
/* Contact page reuses .contact-split; only the top offset differs. */
.contact-page .contact-split { padding-top: 2rem; }
.contact-page .contact-block:first-child { margin-top: 2.5rem; } /* level with the form's first label */
/* --------------------------------------------------------------------------
Slider — one photo per view, native swipe (scroll-snap), optional autoplay,
arrows and dots. See partials/slider and js/site.js.
-------------------------------------------------------------------------- */
.slider { position: relative; }
.slider__track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
outline: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide {
flex: 0 0 100%;
width: 100%;
height: 100%;
object-fit: cover;
scroll-snap-align: start;
}
.slider__nav {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
margin-top: -1.25rem;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--grey-mid);
cursor: pointer;
}
.slider__nav svg { width: 1.25rem; height: 1.25rem; }
.slider__nav:hover { background: var(--white); color: var(--blue); }
.slider__nav:focus-visible { outline: .125rem solid var(--blue); }
.slider__nav--prev { left: 0; }
.slider__nav--next { right: 0; }
.slider__dots {
position: absolute;
left: 50%;
bottom: 1.5rem;
z-index: 2;
display: flex;
gap: .625rem;
transform: translateX(-50%);
}
.slider__dot {
width: .75rem;
height: .75rem;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .55);
box-shadow: 0 0 .25rem rgba(0, 0, 0, .3);
cursor: pointer;
transition: width .2s, background-color .2s;
}
.slider__dot[aria-current="true"] { width: 2rem; border-radius: .375rem; background: var(--white); }
/* --------------------------------------------------------------------------
ABOUT — layout from the client's design review (Oct 2026): rounded
auto-swiping hero, "30+ Years of Trust" beside the group intro, photo
beside Vision / Mission, a tinted PT Intiland card linking out, Milestone.
-------------------------------------------------------------------------- */
.about-hero .slider__track { height: 45.625rem; border-radius: 1.5rem; } /* 1520x730 */
.about-group {
display: grid;
grid-template-columns: 35rem 1fr;
column-gap: 6.25rem;
row-gap: 5rem;
padding-top: 7.5rem;
padding-bottom: 7.5rem;
}
.about-trust { display: flex; flex-direction: column; color: var(--blue); }
.about-trust__value { font-size: 10rem; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.about-trust__label { margin-top: 1rem; font-size: 3rem; line-height: 1.2; font-weight: 700; }
.about-title {
font-size: 2rem;
line-height: 2.5rem;
font-weight: 700;
color: var(--blue);
}
.about-copy { margin-top: 1.5rem; font-size: 1.5rem; line-height: 2.25rem; text-align: justify; }
.about-copy p + p,
.about-copy__more { margin-top: 1.5rem; }
.about-more {
display: flex;
flex-direction: column;
align-items: center;
margin: 1.25rem auto 0;
padding: .25rem .75rem;
border: 0;
background: none;
font-size: 1.125rem;
line-height: 1.5rem;
color: var(--grey-mid);
cursor: pointer;
}
.about-more svg { width: 1.25rem; height: 1.25rem; transition: transform .2s; }
.about-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.about-more:hover { color: var(--blue); }
.about-group__photo {
width: 100%;
aspect-ratio: 560 / 330;
object-fit: cover;
border-radius: 1.5rem;
box-shadow: var(--sh-card);
}
/* Vision / Mission — two columns, each title over a #CCE6FF rule */
.about-vm {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 3.5rem;
align-content: start;
}
.about-vm__title {
padding-bottom: .75rem;
border-bottom: .125rem solid #CCE6FF;
font-size: 2rem;
line-height: 2.5rem;
font-weight: 700;
color: var(--blue);
}
.about-vm__text {
margin-top: 1.25rem;
font-size: 1.5rem;
line-height: 2.25rem;
text-align: justify;
}
.about-dev {
display: grid;
grid-template-columns: 1fr 40rem;
column-gap: 5rem;
align-items: center;
padding: 4.5rem 5rem;
background: var(--bg-blue);
border-radius: 3rem;
}
.about-dev__link { margin-top: 2.5rem; }
.about-dev__slider { padding-inline: 3rem; } /* arrows sit outside the photo */
.about-dev__slider .slider__track {
aspect-ratio: 560 / 330;
border-radius: 1.5rem;
box-shadow: var(--sh-card);
}
/* Milestone — centred column on white, year | photo | month + text, hairline rules */
.milestones {
max-width: 85rem;
margin: 0 auto;
padding: 9rem 2rem 7rem;
}
.milestones__kicker {
text-align: center;
font-size: 1.5rem;
line-height: 2.1875rem;
font-weight: 500;
color: var(--orange);
}
.milestones__title {
margin-top: .5rem;
text-align: center;
font-size: 3.5rem; /* 56/72 w500 */
line-height: 4.5rem;
font-weight: 500;
color: var(--ink);
}
.milestones__list { margin: 2.5rem 0 0; padding: 0; list-style: none; }
.milestone {
display: grid;
grid-template-columns: 17rem 22rem 1fr;
align-items: start;
padding: 2.5rem 0;
border-top: .0625rem solid #BFD3DC;
}
.milestone--no-photo .milestone__body { grid-column: 2 / -1; }
.milestone__year {
font-size: 3.5rem;
line-height: 1;
font-weight: 400;
color: var(--ink);
}
.milestone__photo {
width: 22rem;
aspect-ratio: 384 / 232;
object-fit: cover;
border-radius: .75rem;
}
.milestone__body { padding-left: 2.5rem; }
.milestone__label {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
}
.milestone__text {
margin-top: .25rem;
font-size: 1.25rem;
line-height: 2rem;
}
@media (max-width: 1023px) {
.about-hero .slider__track { height: auto; aspect-ratio: 4 / 3; border-radius: 1rem; }
.slider__dots { bottom: .875rem; }
.about-group { grid-template-columns: 1fr; row-gap: 2.5rem; padding-block: 3rem; }
.about-trust__value { font-size: 4.5rem; }
.about-trust__label { margin-top: .5rem; font-size: 1.75rem; }
.about-group__intro { margin-top: -1rem; }
.about-title { font-size: 1.375rem; line-height: 1.875rem; }
.about-copy { margin-top: 1rem; font-size: 1rem; line-height: 1.625rem; text-align: left; }
.about-copy p + p, .about-copy__more { margin-top: 1rem; }
.about-more { font-size: 1rem; }
.about-group__photo { border-radius: 1rem; }
.about-vm { grid-template-columns: 1fr; row-gap: 1.75rem; }
.about-vm__title { font-size: 1.25rem; line-height: 1.75rem; }
.about-vm__text { margin-top: .75rem; font-size: 1rem; line-height: 1.625rem; text-align: left; }
.about-dev { grid-template-columns: 1fr; row-gap: 2rem; padding: 2rem 1.25rem; border-radius: 1.5rem; }
.about-dev__link { margin-top: 1.5rem; }
.about-dev__slider { padding-inline: 0; }
.about-dev__slider .slider__track { border-radius: 1rem; }
.slider__nav { background: rgba(255, 255, 255, .9); box-shadow: var(--sh-map-btn); color: var(--ink); }
.slider__nav--prev { left: .5rem; }
.slider__nav--next { right: .5rem; }
.milestones { padding: 3.5rem var(--gutter) 2.5rem; }
.milestones__kicker { font-size: 1rem; line-height: 1.5rem; }
.milestones__title { font-size: 1.75rem; line-height: 2.25rem; }
.milestones__list { margin-top: 1.5rem; }
.milestone { grid-template-columns: 1fr; row-gap: 1rem; padding: 1.5rem 0 2rem; }
.milestone--no-photo .milestone__body { grid-column: auto; }
.milestone__year { font-size: 2.25rem; }
.milestone__photo { width: 100%; }
.milestone__body { padding-left: 0; }
.milestone__label { font-size: 1.125rem; line-height: 1.625rem; }
.milestone__text { font-size: 1rem; line-height: 1.625rem; }
}
/* --------------------------------------------------------------------------
PORTFOLIO · alternating rows — 960x462 tint slab + 825x386 art (r32)
-------------------------------------------------------------------------- */
.folio { padding-top: 4rem; }
.folio-row {
position: relative;
margin-bottom: 3rem;
}
/* Each row is one centred tinted card holding copy and photo (design review,
Oct 2026) — the old half-width slabs hung off alternate viewport edges and
drifted away from the content on screens past 1920. */
.folio-row__slab { display: none; }
.folio-row__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 3rem;
width: min(100% - 2rem, var(--panel));
margin-inline: auto;
padding: 3.5rem calc(var(--gutter) - (var(--page) - var(--panel)) / 2);
background: var(--bg-blue);
border-radius: 2rem;
}
.folio-row:nth-child(even) .folio-row__inner { flex-direction: row-reverse; }
.folio-row__copy { flex: 0 1 41.25rem; } /* 660 */
.folio-row__art {
flex: 0 1 51.5625rem; /* 825 */
min-width: 0;
height: 24.125rem; /* 386 */
object-fit: cover;
border: .3125rem solid var(--white);
border-radius: 2rem;
box-shadow: 0 .4375rem .4375rem rgba(0, 0, 0, .15);
}
.folio-row__title {
font-size: 2rem;
line-height: 2.8125rem;
font-weight: 600;
color: var(--blue);
}
.folio-row__title small { font-size: 1.75rem; font-weight: 600; }
.folio-row__text { margin-top: 1.0625rem; }
.avail { margin-top: 1.0625rem; }
.avail__label {
display: block;
margin-bottom: .75rem;
font-size: .75rem;
line-height: 1.0625rem;
font-weight: 500;
color: #A1A1A1;
letter-spacing: .02em;
}
.avail__list { display: flex; flex-wrap: wrap; gap: .5625rem .5rem; }
/* The chip moved inside the li so it can be an ; keep the li out of the way. */
.avail__list > li { display: flex; }
.avail__chip {
display: inline-flex;
align-items: center;
gap: .4375rem;
height: 1.9375rem; /* 31 */
padding: 0 1.3125rem 0 1rem;
border: .0625rem solid var(--grey);
border-radius: .625rem;
font-size: 1rem;
line-height: 1.0625rem;
font-weight: 500;
}
.avail__chip svg { width: .5rem; height: .875rem; flex: none; }
/* A pin naming one of our sites links to its detail page. The chip already
looks tappable, so hover only has to confirm it rather than announce it. */
.avail__chip--link {
transition: border-color .18s, background .18s, color .18s;
}
.avail__chip--link:hover {
border-color: var(--blue);
background: var(--bg-blue);
color: var(--blue);
}
/* --------------------------------------------------------------------------
PARK DETAIL
-------------------------------------------------------------------------- */
/* Intro: kicker + copy, then a details card beside the estate map */
.estate-intro {
max-width: var(--page);
margin-inline: auto;
/* This section runs 176…1747, not on the 200px gutter. */
padding: 0 10.8125rem 0 11rem;
}
/* Thin rule @390, 4px #CDE6FF, spanning 173…1746; the bullet follows @450 */
.estate-intro::before {
content: "";
display: block;
height: .25rem;
margin-bottom: 3.5rem;
border-radius: .125rem;
background: #CDE6FF;
}
.estate-intro__head {
display: grid;
grid-template-columns: 20.8125rem 1fr; /* 176 → 529 */
column-gap: 1.0625rem;
align-items: start;
}
.estate-intro__bullet {
display: grid;
place-items: center;
width: 1.0625rem;
height: 1.0625rem;
margin-bottom: 1.3125rem;
border-radius: 50%;
background: var(--blue);
}
.estate-intro__bullet svg { width: .375rem; height: .5625rem; fill: var(--white); }
.estate-intro__kicker {
max-width: 16rem;
font-size: 2rem;
line-height: 2.5rem;
font-weight: 600;
color: var(--blue);
}
.estate-intro__copy { max-width: 76.125rem; padding-top: 2.75rem; }
.estate-intro__body {
display: grid;
grid-template-columns: 21.0625rem 76.125rem; /* 337 card · 1218 map */
column-gap: 1rem;
margin-top: 2.1875rem; /* → 795 */
}
.estate-facts {
height: 40.8125rem; /* 653 */
padding: 2.375rem 1.375rem 0 2.625rem;
background: var(--white);
border-radius: 1rem;
box-shadow: .25rem .5rem 1rem rgba(0, 0, 0, .10);
}
.estate-facts__title {
font-size: 1.5rem;
line-height: 1.25rem;
font-weight: 600;
color: var(--blue);
margin-bottom: 2.5rem;
}
.estate-facts dt {
font-size: 1rem;
line-height: 1.375rem;
font-weight: 500;
color: var(--grey);
}
.estate-facts dd {
margin: .375rem 0 3.1875rem;
font-size: 1.5rem;
line-height: 1.25rem;
font-weight: 700;
}
.estate-map {
width: 100%;
height: 40.8125rem;
object-fit: cover;
border: .25rem solid var(--white);
border-radius: 1rem;
}
/* Banded sections with a coloured label card on the left */
.estate-band { background: var(--bg-blue-50); }
.estate-band--plain { background: var(--white); }
.estate-section {
display: grid;
grid-template-columns: 21.0625rem 1fr; /* 337 label */
column-gap: 1rem;
max-width: var(--page);
margin-inline: auto;
padding: 4.6875rem 10.8125rem 5.25rem 11rem; /* label starts x 176 */
}
.estate-label {
padding: 1.625rem 2.25rem 2rem 2.3125rem;
border-radius: 1rem;
background: var(--blue);
color: var(--white);
}
.estate-label--soft { background: var(--bg-blue); color: var(--blue); }
.estate-label__title {
font-size: 2rem;
line-height: 2.5rem;
font-weight: 700;
}
.estate-label__text {
margin-top: 2rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 400;
}
/* Location & accessibility — six white cards, icon + distance */
.access-grid {
display: grid;
grid-template-columns: 38.875rem 36.25rem; /* 622 · 580 */
justify-content: space-between;
gap: 1.125rem .9375rem;
align-content: start;
}
.access-card {
display: flex;
align-items: center;
gap: 1.75rem;
min-height: 7.75rem; /* 124 */
padding: 1.25rem 2rem 1.25rem 2.5rem;
background: var(--white);
border: .0625rem solid #D2E2F2; /* hairline, as the infra cards */
border-radius: 1rem;
}
.access-card img { width: 3rem; height: 3.4375rem; object-fit: contain; flex: none; }
.access-card__km { font-size: 2rem; line-height: 2.5rem; font-weight: 700; }
.access-card__to { font-size: 1.5rem; line-height: 2rem; font-weight: 500; }
/* Infrastructure — seven hairline cards, icon + centred label */
.infra-grid {
display: grid;
grid-template-columns: repeat(3, 25.0625rem); /* 401 */
justify-content: space-between;
gap: .5625rem .3125rem;
align-content: start;
}
.infra-card {
display: flex;
align-items: center;
gap: 2.75rem;
min-height: 8.1875rem; /* 131 */
padding: 1rem 1.5rem;
border: .0625rem solid #D2E2F2;
border-radius: .5rem;
}
.infra-card img { width: 4.1875rem; height: 4.875rem; object-fit: contain; flex: none; }
.infra-card__text {
flex: 1;
text-align: center;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 500;
}
.infra-card__text strong { font-weight: 700; }
/* Products within the estate — four cards, art on top */
.estate-products {
display: grid;
grid-template-columns: repeat(2, 37.3125rem); /* 597 */
justify-content: space-between;
gap: 1.0625rem 1.1875rem;
align-content: start;
}
.estate-product {
height: 19.8125rem; /* 317 */
display: flex;
flex-direction: column;
background: var(--white);
border-radius: 1rem;
overflow: hidden;
}
.estate-product img {
width: 100%;
height: 14rem; /* 224 */
object-fit: cover;
border-radius: 1rem;
}
.estate-product__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.5625rem 2rem 0 2rem;
}
.estate-product__name { font-size: 1.5rem; line-height: 1.1875rem; font-weight: 700; }
/* Notable tenants */
.estate-tenants { padding: 5.5rem 5rem 4.5rem; text-align: center; }
.estate-tenants .h-section { font-size: 3rem; margin-bottom: 3.5rem; }
/* Gallery rail with soft edges */
.estate-gallery { background: var(--bg-blue-50); padding: 3.375rem 0 5.5rem; }
.estate-gallery__title {
text-align: center;
font-size: 2rem;
line-height: 2.75rem;
font-weight: 700;
color: var(--blue);
margin-bottom: 3.25rem;
}
.estate-gallery__frame { position: relative; }
.estate-gallery__rail {
display: flex;
gap: 1.25rem;
padding-inline: 12.125rem;
scroll-padding-inline: 12.125rem;
scroll-snap-type: x mandatory;
overflow-x: auto;
scrollbar-width: none;
mask-image: linear-gradient(90deg, transparent, #000 13.6%, #000 86.4%, transparent);
}
.estate-gallery__rail::-webkit-scrollbar { display: none; }
.estate-gallery__rail img {
flex: none;
width: 31.125rem; /* 498 */
height: 18.75rem; /* 300 */
object-fit: cover;
border-radius: .75rem;
scroll-snap-align: start;
}
/* Arrows sit over the faded edges of the rail */
.estate-gallery__nav {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
margin-top: -1.5rem;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--white);
box-shadow: var(--sh-map-btn);
color: var(--blue);
cursor: pointer;
transition: opacity .2s, background-color .2s, color .2s;
}
.estate-gallery__nav[hidden] { display: none; }
.estate-gallery__nav svg { width: 1.375rem; height: 1.375rem; }
.estate-gallery__nav:hover { background: var(--blue); color: var(--white); }
.estate-gallery__nav:focus-visible { outline: .125rem solid var(--blue); outline-offset: .125rem; }
.estate-gallery__nav:disabled { opacity: .35; cursor: default; background: var(--white); color: var(--blue); }
.estate-gallery__nav--prev { left: 6.5rem; }
.estate-gallery__nav--next { right: 6.5rem; }
/* --------------------------------------------------------------------------
ESTATES index — 744x567 cards r24, art 744x368
-------------------------------------------------------------------------- */
.estate-grid {
display: grid;
grid-template-columns: repeat(2, 46.5rem); /* 744 */
justify-content: space-between;
gap: 2rem;
padding-top: 4rem;
padding-bottom: 4rem;
}
.estate-card {
min-height: 35.4375rem; /* 567 */
display: flex;
flex-direction: column;
background: var(--white);
border-radius: 1.5rem;
box-shadow: 0 .3125rem .625rem .3125rem rgba(0, 0, 0, .03);
}
.estate-card__art {
width: 100%;
height: 23rem; /* 368 */
object-fit: cover;
border-radius: 1.5rem;
}
.estate-card__body { padding: 1.375rem 4rem 2.25rem 4rem; }
.estate-card__place {
font-size: 1.5rem;
line-height: 2.125rem;
font-weight: 500;
color: var(--orange);
}
.estate-card__name {
margin-top: .5rem;
font-size: 2rem;
line-height: 2.8125rem;
font-weight: 600;
color: var(--blue);
}
.estate-card .btn-explore {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: 2rem;
height: 2.25rem; /* 36 */
padding-inline: 1rem;
border-radius: .5rem;
background: var(--blue);
color: var(--white);
font-size: 1rem;
line-height: 1.1875rem;
font-weight: 600;
transition: background .18s;
}
.estate-card .btn-explore svg { width: 1.375rem; height: 1.375rem; }
.estate-card .btn-explore:hover { background: var(--blue-hover); }
/* --------------------------------------------------------------------------
INVESTOR RELATIONS
-------------------------------------------------------------------------- */
.ir-why {
position: relative;
width: min(100% - 2rem, var(--panel));
margin: 3.5rem auto 0; /* band 488 → panel 544 */
padding: 3.5rem 0 4.75rem;
background: var(--bg-blue);
border-radius: 3rem;
text-align: center;
}
.ir-why__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5.5rem 0;
padding-inline: 6.5rem;
margin-top: 3.5rem;
}
.ir-why__item { display: flex; flex-direction: column; align-items: center; }
.ir-why__figure {
display: flex;
align-items: flex-end;
justify-content: center;
height: 14.5rem; /* 232 — the tallest illustration */
margin-bottom: 1.5625rem;
}
.ir-why__figure img { width: 100%; height: auto; object-fit: contain; }
.ir-why__title {
max-width: 16.625rem; /* 266 */
text-transform: capitalize;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 600;
color: var(--blue);
}
.ir-why__text {
max-width: 21rem; /* 336 */
margin-top: 1.5rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 400;
}
/* Report / disclosure tables */
.ir-block { padding-top: 5.25rem; }
.ir-block__title {
text-align: center;
font-size: 2rem;
line-height: 2.8125rem;
font-weight: 600;
color: var(--blue);
margin-bottom: 1.875rem;
}
.ir-table {
width: min(100% - 2rem, 106rem); /* 1696 */
margin-inline: auto;
border-collapse: collapse;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 500;
table-layout: fixed;
}
.ir-table thead th {
padding: .75rem 1.75rem;
background: var(--bg-blue);
font-size: 1.25rem;
line-height: 2rem;
font-weight: 500;
text-align: center;
}
.ir-table tbody td {
padding: 1.0625rem 1.75rem;
border-bottom: .03125rem solid var(--ink);
text-align: left;
vertical-align: middle;
}
.ir-table tbody tr:first-child td { border-top: .03125rem solid var(--ink); }
/* Figma column origins: reports 147 / 508 / 1429; disclosures 112 / 501. */
.ir-table--reports th:first-child,
.ir-table--reports td:first-child { width: 22.5rem; } /* 360 */
.ir-table--reports th:last-child,
.ir-table--reports td:last-child { width: 24rem; text-align: center; }
.ir-table--disclosures th:first-child,
.ir-table--disclosures td:first-child { width: 24.3125rem; } /* 389 */
.ir-table--financial th:last-child,
.ir-table--financial td:last-child { width: 24rem; text-align: center; }
.ir-table--financial th:first-child { text-align: left; }
.ir-table__filters {
display: flex;
justify-content: flex-end;
gap: .75rem;
padding: .625rem 1.75rem;
background: #C8E3FF;
}
.ir-table__filters select,
.ir-table__filters input {
height: 2rem;
padding-inline: .625rem;
border: .0625rem solid var(--white);
border-radius: .375rem;
background: var(--white);
font-size: 1rem;
font-weight: 500;
}
.ir-table__filters input { width: 15.625rem; }
.btn-download {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 8.0625rem; /* 129 */
height: 1.9375rem; /* 31 */
padding-inline: .75rem;
border-radius: .3125rem;
background: var(--orange);
color: var(--white);
font-size: 1.25rem;
line-height: 2rem;
font-weight: 500;
transition: background .18s;
}
.btn-download:hover { background: var(--orange-hover); }
.ir-more {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 1.375rem;
font-size: 1.5rem;
font-weight: 500;
color: var(--grey-mid);
}
.ir-more svg { width: 1.875rem; height: 1.875rem; }
.ir-more:hover { color: var(--blue); }
.ir-cover {
display: block;
width: min(100% - 2rem, 106.625rem); /* 1706 */
margin: 3.5rem auto 0;
height: auto;
}
/* Shareholdings */
.ir-shareholdings {
width: min(100% - 2rem, var(--panel));
margin: 5.75rem auto 0;
padding: 2.25rem 5.5rem 5.5rem;
background: var(--bg-blue);
border-radius: 3rem;
}
.ir-shareholdings .ir-table { width: 100%; }
.ir-shareholdings .ir-table thead th { background: #C8E3FF; }
.ir-shareholdings .ir-table__caption {
padding: .75rem;
background: #C8E3FF;
text-align: center;
font-size: 1.25rem;
font-weight: 500;
}
.ir-shareholdings .ir-table td { border-bottom-color: rgba(0, 0, 0, .15); }
.ir-shareholdings .ir-table td:nth-child(2),
.ir-shareholdings .ir-table th:nth-child(2) { text-align: center; width: 26rem; }
.ir-shareholdings .ir-table td:last-child { text-align: right; }
.ir-shareholdings .ir-table th:last-child { text-align: right; width: 22rem; }
.ir-shareholdings .ir-table tfoot td { font-weight: 700; border-bottom: 0; }
.ir-note {
margin-top: 1.75rem;
font-size: 1.25rem;
line-height: 2rem;
font-weight: 500;
color: #969696;
}
.ir-structure { margin-top: 3.75rem; text-align: center; }
.ir-structure__title {
font-size: 2rem;
line-height: 2.8125rem;
font-weight: 600;
color: var(--blue);
}
.ir-structure__date {
margin-top: .375rem;
font-size: 1.25rem;
line-height: 2rem;
font-weight: 500;
color: #969696;
}
.ir-structure img { width: 100%; max-width: 90.1875rem; margin: 2.5rem auto 0; height: auto; }
.ir-structure__note { text-align: left; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* --------------------------------------------------------------------------
Pages with no Figma frame — composed from the same primitives
-------------------------------------------------------------------------- */
.tenant-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
gap: 1.75rem;
padding-block: 5rem 6rem;
}
.tenant-card {
display: flex;
flex-direction: column;
gap: 1rem;
min-height: 14rem;
padding: 2rem 2.25rem;
background: var(--white);
border: .0625rem solid var(--border);
border-radius: 1rem;
transition: box-shadow .18s, border-color .18s;
}
.tenant-card:hover { box-shadow: var(--sh-card); border-color: var(--blue); }
.tenant-card__logo { height: 3.5rem; width: auto; object-fit: contain; object-position: left; }
.tenant-card__name { font-size: 1.5rem; line-height: 2rem; font-weight: 600; color: var(--blue); }
.tenant-card__sector { font-size: 1.25rem; line-height: 1.75rem; color: var(--grey-mid); }
.article { padding-block: 4.5rem 6rem; }
.article__cover {
width: 100%;
max-width: 95rem;
height: 33rem;
margin-inline: auto;
object-fit: cover;
border-radius: 1.5rem;
background: var(--grey-chip);
}
.article__meta { margin-top: 2.5rem; font-size: 1.25rem; font-weight: 500; color: var(--grey-mid); }
.article__title { margin-top: 1rem; max-width: 60rem; }
.article__body {
max-width: 60rem;
margin-top: 2.5rem;
font-size: 1.5rem;
line-height: 2.25rem;
}
.article__body > * + * { margin-top: 1.5rem; }
.article__body h2, .article__body h3 { font-size: 2rem; line-height: 2.5rem; font-weight: 600; color: var(--blue); }
.article__body a { color: var(--blue); text-decoration: underline; }
.article__back { display: inline-flex; align-items: center; gap: .5rem; margin-top: 3rem; font-size: 1.25rem; font-weight: 600; color: var(--blue); }
.article__back svg { width: 1.25rem; height: 1.25rem; transform: rotate(180deg); }
/* Product detail page: the article layout, plus where the product is offered */
.product-detail__avail { max-width: 60rem; margin-top: 3rem; }
.folio-row__more { margin-top: 1.5rem; }
/* ==========================================================================
RESPONSIVE
The Figma file only specifies the 1920 canvas. Down to 1440 the whole page
scales via the root font-size; below that the layout has to change shape,
so the rules here re-flow it. Every value is expressed in rem so the
proportions of the design survive the reflow.
========================================================================== */
@media (max-width: 1439px) {
:root { --gutter: 7.5rem; }
.site-header__inner { padding-left: 3.5rem; padding-right: 3rem; }
.site-nav { gap: 2rem; }
html:lang(id) .site-nav { gap: 1.5rem; }
.hero__copy { left: 7.5rem; }
.decades { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
.decades__title { width: auto; max-width: none; }
.mosaic { margin-left: 0; max-width: 100%; }
.corridors__inner { grid-template-columns: 1fr 1fr; gap: 3rem; padding-inline: calc(var(--gutter) - 1rem); }
.estate-list { width: 100%; }
.corridor-map__img { width: 100%; height: 40rem; }
.estate-intro, .estate-section { padding-left: var(--gutter); padding-right: var(--gutter); }
.estate-intro__body { grid-template-columns: 21.0625rem 1fr; }
.folio-row__inner { padding-inline: calc(var(--gutter) - 1rem); }
.folio-row__copy { flex: 1 1 0; }
.folio-row__art { flex: 1 1 0; width: 50%; }
.contact-split { grid-template-columns: 1fr 1.6fr; }
/* px, not rem: this is physical breathing room, and rem shrinks with the
viewport — 3.5rem collapses to 42px at 1024 and the fields start to hug. */
.contact-panel { padding-inline: 56px; }
.site-footer__inner { grid-template-columns: 1fr 1fr 1fr 1.2fr; padding-inline: var(--gutter); gap: 2rem; }
.site-footer__legal { padding-inline: var(--gutter); }
.ir-why__grid { padding-inline: 3rem; }
/* Fixed Figma track widths have to become fractional here or they overflow. */
.advantage-cards { width: 100%; grid-template-columns: repeat(3, 1fr); }
.news-grid { grid-template-columns: repeat(2, 1fr); }
.estate-grid { grid-template-columns: repeat(2, 1fr); }
.access-grid { grid-template-columns: 1fr 1fr; }
.infra-grid { grid-template-columns: repeat(3, 1fr); }
.estate-products { grid-template-columns: repeat(2, 1fr); }
.reason-list { width: calc(100% - 2 * var(--gutter)); }
.reason { grid-template-columns: 45% 55%; }
.ir-shareholdings, .ir-why { width: calc(100% - 2 * var(--gutter)); }
.ir-cover { width: calc(100% - 2 * var(--gutter)); }
.estate-gallery__rail { padding-inline: var(--gutter); }
}
/* With "Our Projects" the Indonesian nav (1.5rem gaps) needs ~1240px of the
header at 1280 and English ~1120px, so the drawer takes over below that,
well before the tablet layout does. */
@media (max-width: 1279px) {
.nav-toggle {
display: flex;
flex-direction: column;
justify-content: center;
gap: .3125rem;
order: 3;
width: 2.75rem; height: 2.75rem;
margin-left: 1.25rem;
padding: 0;
border: 0; background: none; cursor: pointer;
}
.nav-toggle span {
display: block;
height: .125rem;
background: var(--blue);
transition: transform .2s, opacity .2s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(.4375rem) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-.4375rem) rotate(-45deg); }
.lang { order: 1; }
.site-header__logo { order: 2; margin-left: auto; }
.site-nav {
position: fixed;
inset: var(--header-h) 0 auto;
z-index: 50;
display: none;
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0;
padding: .5rem 1.5rem 1.5rem;
background: var(--white);
border-bottom: .0625rem solid var(--border);
box-shadow: var(--sh-card);
}
.site-nav.is-open { display: flex; }
.site-nav__link { padding: .875rem .25rem; border-bottom: .0625rem solid var(--border); }
.site-nav .btn-pill { margin-top: 1rem; height: 3rem; }
html:lang(id) .site-nav { gap: 0; }
/* In the drawer the estates open inline under their heading. */
.nav-drop__btn { width: 100%; justify-content: space-between; padding: .875rem .25rem; }
.nav-drop__menu {
position: static;
min-width: 0;
padding: .25rem 0 .5rem 1rem;
border: 0;
border-bottom: .0625rem solid var(--border);
border-radius: 0;
box-shadow: none;
transform: none;
}
.nav-drop__menu::before { content: none; }
.nav-drop__menu a { padding: .625rem .25rem; }
}
@media (max-width: 1023px) {
html { font-size: 15px; }
:root { --gutter: 2rem; --header-h: 4.5rem; }
/* ---- Type scale for small screens ---- */
body { font-size: 1rem; line-height: 1.625rem; }
.h-section { font-size: 2rem; line-height: 2.5rem; }
.h-page { font-size: 1.75rem; line-height: 2.25rem; }
.eyebrow { font-size: 1rem; line-height: 1.75rem; }
.lede, .body-copy { font-size: 1rem; line-height: 1.625rem; }
.site-header__inner { padding-inline: 1.25rem; }
.site-header__logo img { width: 7.5rem; height: auto; }
/* ---- Hero ---- */
.hero__media { height: 30rem; border-radius: 0 0 3rem 3rem; }
/* The mobile crop brings the signage up behind the headline, so the copy
needs a scrim the 1920 design does not require. */
.hero__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .18) 55%, transparent 100%);
}
.hero--dark .hero__media::after {
background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .3) 55%, transparent 100%);
}
.hero__copy { left: var(--gutter); right: var(--gutter); top: 8rem; max-width: none; }
.hero__eyebrow { font-size: 1rem; line-height: 1.75rem; }
.hero__title { font-size: 1.875rem; line-height: 2.375rem; }
/* ---- Stats: two rows of three ---- */
.stats {
width: calc(100% - 2 * var(--gutter));
height: auto;
margin: -3rem auto 0;
padding: 2rem 1rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem 0;
border-radius: 1.5rem;
}
.stats__item + .stats__item { border-left: 0; }
.stats__item:not(:nth-child(3n + 1)) { border-left: .0625rem solid var(--divider); }
.stats__value { font-size: 1.75rem; }
.stats__value .unit { font-size: 1.125rem; }
.stats__label { font-size: .8125rem; line-height: 1.125rem; }
/* ---- Stacked sections ---- */
.decades { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3.5rem 3rem; }
.decades__title { width: auto; max-width: none; }
.mosaic { width: 100%; max-width: 40rem; }
.corridors { padding-block: 2rem 3rem; }
.corridors__slab { display: none; }
.corridors__inner { grid-template-columns: 1fr; gap: 2rem; width: 100%; padding: 2rem var(--gutter); background: var(--bg-blue); border-radius: 1.5rem; }
.corridors__title, .corridors__body { max-width: none; }
.estate-list { margin-top: 2rem; height: auto; max-height: 28rem; }
.estate-item__desc { max-width: none; }
.corridor-map { margin-top: 0; }
.corridor-map__img { height: 22rem; }
.corridor-map__ctrl { right: 1rem; bottom: 1rem; }
.panel-section { padding-inline: var(--gutter); padding-top: 2.5rem; padding-bottom: 3rem; }
.panel-section__bg { width: 100%; height: 100%; border-radius: 1.5rem; }
.panel-section__head { margin-bottom: 2rem; }
.panel-section__body { width: 100%; }
.product-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.product-card { height: auto; }
.product-card__title { height: auto; max-width: none; font-size: 1.25rem; line-height: 1.625rem; margin-bottom: 1rem; }
.product-card__img { height: 14rem; }
.advantage-cards { width: 100%; grid-template-columns: 1fr; }
.advantage-card { min-height: 0; padding: 1.5rem 1.5rem 1.25rem 1.75rem; }
.advantage-card__title { font-size: 1.25rem; line-height: 1.625rem; }
.advantage-card::before { top: 1.5rem; height: calc(100% - 3rem); }
.panel-section--advantage { margin-bottom: 3.5rem; }
.tenants-strip { padding-top: 3rem; }
.tenants-strip .h-section { margin-bottom: 2rem; }
.marquee__track > span { font-size: 1.25rem; line-height: 1.75rem; }
/* ---- Contact ---- */
.contact-split { grid-template-columns: 1fr; padding: 0; }
.contact-split__aside { padding: 2.5rem var(--gutter) 2rem; }
.contact-split__title { font-size: 1.75rem; }
.contact-block { margin-top: 2rem; }
.contact-block p, .contact-block__label { font-size: 1rem; line-height: 1.5rem; }
.socials a { width: 2.75rem; height: 2.75rem; }
.socials svg { width: 1.375rem; height: 1.375rem; }
.contact-panel { padding: 2rem var(--gutter) 2.5rem; border-radius: 1.5rem 1.5rem 0 0; }
.contact-form { grid-template-columns: 1fr; row-gap: 1.25rem; }
.field > label { font-size: 1rem; }
.field input, .field select, .field textarea { height: 3rem; padding-inline: 1rem; font-size: 1rem; }
.field select { background-position: right 1rem center; padding-right: 3rem; }
.field textarea { height: 10rem; }
.btn-submit { height: 3.25rem; font-size: 1.0625rem; }
/* ---- Page header band ---- */
.page-head { min-height: 0; padding-block: 2.5rem 2.75rem; }
/* ---- CTA band ---- */
.cta-band { height: auto; padding: 2.5rem var(--gutter); gap: 1.25rem; }
.cta-band__title { font-size: 1.375rem; line-height: 1.875rem; }
.btn-cta { width: 100%; max-width: 22rem; height: 3.25rem; font-size: 1.0625rem; }
/* ---- Footer ---- */
.site-footer { padding-block: 2.5rem 2rem; }
.site-footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; padding-inline: var(--gutter); }
.site-footer__logo { grid-column: 1 / -1; width: 6.5rem; }
.site-footer__logo img { height: auto; }
.footer-col__title { font-size: 1rem; margin-bottom: 1rem; }
.footer-col a, .footer-col p, .footer-col li { font-size: 1rem; line-height: 1.5rem; }
.footer-col li + li { margin-top: .75rem; }
.footer-col--hq { grid-column: 1 / -1; }
.site-footer__legal { margin-top: 2rem; padding-inline: var(--gutter); font-size: .875rem; }
/* ---- Why us ---- */
.reason-list { width: calc(100% - 2 * var(--gutter)); margin-top: 2rem; row-gap: 1.5rem; padding-bottom: 3rem; }
.reason { grid-template-columns: 1fr; min-height: 0; }
.reason__body { padding: 1.75rem 1.5rem 1.5rem; }
.reason__title { max-width: none; font-size: 1.5rem; line-height: 2rem; }
.reason__text { max-width: none; margin-top: 1rem; font-size: 1rem; line-height: 1.5rem; }
.reason__art { order: -1; height: 14rem; }
/* ---- News ---- */
.news-grid { grid-template-columns: 1fr; row-gap: 2.5rem; padding-block: 2.5rem 3rem; }
.news-card__art { height: 13rem; }
.news-card__title { font-size: 1.25rem; line-height: 1.75rem; max-width: none; }
/* ---- About ---- */
/* ---- Portfolio ---- */
.folio { padding-top: 2.5rem; }
.folio-row { min-height: 0; margin-bottom: 2rem; }
.folio-row__slab { display: none; }
.folio-row__inner,
.folio-row:nth-child(even) .folio-row__inner {
flex-direction: column;
align-items: stretch;
gap: 1.25rem;
min-height: 0;
width: auto;
padding: 1.75rem var(--gutter);
background: var(--bg-blue);
border-radius: 1.5rem;
margin-inline: var(--gutter);
}
.folio-row__copy { flex: none; width: 100%; padding-top: 0; }
.folio-row__art { flex: none; width: 100%; height: 13rem; order: -1; }
.folio-row__title { font-size: 1.375rem; line-height: 1.875rem; }
.folio-row__title small { font-size: 1rem; }
.avail__chip { font-size: .875rem; height: 1.75rem; }
/* ---- Estates index ---- */
.estate-grid { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2.5rem 3rem; }
.estate-card { min-height: 0; }
.estate-card__art { height: 13rem; }
.estate-card__body { padding: 1.25rem 1.5rem 1.75rem; }
.estate-card__name { font-size: 1.375rem; line-height: 1.875rem; }
/* ---- Park detail ---- */
.page-head--park { padding-bottom: 1.75rem; }
.estate-intro { padding: 0 var(--gutter); }
.estate-intro::before { margin-bottom: 1.75rem; }
.estate-intro__head { grid-template-columns: 1fr; row-gap: 1rem; }
.estate-intro__kicker { max-width: none; font-size: 1.375rem; line-height: 1.875rem; }
.estate-intro__copy { max-width: none; padding-top: 0; }
.estate-intro__body { grid-template-columns: 1fr; row-gap: 1rem; margin-top: 1.75rem; }
.estate-facts { height: auto; padding: 1.5rem; }
.estate-facts dd { margin-bottom: 1.5rem; font-size: 1.125rem; }
.estate-map { height: 16rem; }
.estate-section { grid-template-columns: 1fr; row-gap: 1.5rem; padding: 2.5rem var(--gutter) 3rem; }
.estate-label { padding: 1.5rem; }
.estate-label__title { font-size: 1.375rem; line-height: 1.875rem; }
.estate-label__text { margin-top: 1rem; font-size: 1rem; line-height: 1.5rem; }
.access-grid, .infra-grid, .estate-products { grid-template-columns: 1fr; gap: 1rem; }
.access-card { min-height: 0; padding: 1.25rem 1.25rem; gap: 1rem; }
.access-card__km { font-size: 1.375rem; line-height: 1.875rem; }
.access-card__to { font-size: 1rem; line-height: 1.5rem; }
.infra-card { min-height: 0; gap: 1.25rem; }
.infra-card__text { text-align: left; font-size: 1rem; line-height: 1.5rem; }
.estate-product { height: auto; }
.estate-product img { height: 11rem; }
.estate-product__foot { padding: 1rem 1.25rem 1.25rem; }
.estate-product__name { font-size: 1.125rem; }
.estate-tenants { padding: 2.5rem var(--gutter) 3rem; }
.estate-tenants .h-section { font-size: 1.5rem; margin-bottom: 1.5rem; }
.estate-gallery { padding-block: 2rem 3rem; }
.estate-gallery__rail { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); mask-image: none; }
.estate-gallery__nav { width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; }
.estate-gallery__nav svg { width: 1.125rem; height: 1.125rem; }
.estate-gallery__nav--prev { left: .5rem; }
.estate-gallery__nav--next { right: .5rem; }
.estate-gallery__rail img { width: 17rem; height: 11rem; }
/* ---- Investor relations ---- */
.ir-why { width: calc(100% - 2 * var(--gutter)); margin-top: 2rem; padding: 2rem 1.25rem 2.5rem; border-radius: 1.5rem; }
.ir-why__grid { grid-template-columns: 1fr; gap: 2.5rem; padding-inline: 0; margin-top: 2rem; }
.ir-why__figure { height: 9rem; }
.ir-why__figure img { max-height: 9rem; }
.ir-why__title, .ir-why__text { max-width: none; font-size: 1.0625rem; line-height: 1.5rem; }
.ir-why__text { margin-top: .75rem; }
.ir-block { padding-top: 2.75rem; padding-inline: var(--gutter); }
.ir-block__title { font-size: 1.375rem; line-height: 1.875rem; }
.ir-table { width: 100%; font-size: .9375rem; line-height: 1.375rem; }
.ir-table, .ir-table thead, .ir-table tbody, .ir-table tfoot, .ir-table tr, .ir-table td, .ir-table th { display: block; }
.ir-table thead { display: none; }
.ir-table tbody tr {
padding: .875rem 0;
border-bottom: .0625rem solid var(--border);
}
.ir-table tbody tr:first-child td { border-top: 0; }
.ir-table td { padding: .125rem 0; border: 0 !important; text-align: left !important; width: auto !important; }
.ir-table--reports td:first-child,
.ir-table--financial td:first-child { font-weight: 600; color: var(--blue); }
.ir-table td:empty { display: none; }
.ir-table__filters { flex-wrap: wrap; padding: .625rem; }
.ir-table__filters input { width: 100%; }
.ir-cover { width: calc(100% - 2 * var(--gutter)); margin-top: 2rem; }
.ir-shareholdings { width: calc(100% - 2 * var(--gutter)); margin-top: 2.5rem; padding: 1.5rem 1.25rem 2.5rem; border-radius: 1.5rem; }
.ir-shareholdings .ir-table tbody tr { border-bottom-color: rgba(0, 0, 0, .15); }
.ir-shareholdings .ir-table td:nth-child(2),
.ir-shareholdings .ir-table td:last-child { text-align: left !important; width: auto !important; }
.ir-structure { margin-top: 2.5rem; }
.ir-structure__title { font-size: 1.25rem; line-height: 1.75rem; }
.ir-structure img { margin-top: 1.5rem; }
.ir-note { font-size: 1rem; }
/* ---- Misc ---- */
.tenant-grid { grid-template-columns: 1fr 1fr; gap: 1rem; padding-block: 2.5rem 3rem; }
.tenant-card { min-height: 0; padding: 1.25rem; }
.tenant-card__name { font-size: 1.125rem; line-height: 1.5rem; }
.article { padding-block: 2.5rem 3rem; }
.article__cover { height: 14rem; }
.article__body { font-size: 1rem; line-height: 1.625rem; }
.entry-modal__dialog { width: 100%; padding: 3rem 1.5rem 2rem; border-radius: 1.25rem; }
.entry-modal__title { font-size: 1.375rem; line-height: 1.875rem; }
.entry-modal__body { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.625rem; }
.entry-modal .btn-cta { margin-top: 1.75rem; }
}
@media (max-width: 599px) {
:root { --gutter: 1.25rem; }
.stats { grid-template-columns: repeat(2, 1fr); }
.stats__item:not(:nth-child(3n + 1)) { border-left: 0; }
.stats__item:nth-child(even) { border-left: .0625rem solid var(--divider); }
.mosaic { width: auto; aspect-ratio: auto; display: grid; gap: 1rem; }
.mosaic img { position: static; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.mosaic__a { border-radius: 1.25rem; }
.mosaic__b, .mosaic__c { box-shadow: none; }
.product-cards { grid-template-columns: 1fr; }
.tenant-grid { grid-template-columns: 1fr; }
.hero__media { height: 26rem; }
.hero__title { font-size: 1.625rem; line-height: 2.125rem; }
}
.btn-download.is-disabled { background: var(--grey); cursor: not-allowed; }
/* Investor tables collapse to five rows until "More" is pressed. Collapsing is
gated on JS being present, so without it every row simply stays visible. */
html.has-js .ir-table tr.is-extra { display: none; }
html.has-js .ir-table.is-expanded tr.is-extra { display: table-row; }
button.ir-more { border: 0; background: none; cursor: pointer; }
.ir-more svg { transition: transform .25s ease; }
.ir-more[aria-expanded="true"] svg { transform: rotate(180deg); }
/* --------------------------------------------------------------------------
Maps (MapLibre GL)
The Figma "map" is itself a screenshot of a slippy map tinted to the brand
palette, so a live map is closer to the design than the flat image was. The
tiles are CARTO Positron, filtered into the same pale-blue family.
-------------------------------------------------------------------------- */
.corridor-map__canvas,
.estate-map--live {
display: block;
background: var(--bg-blue-50);
/* Clip the tiles to the rounded frame the design draws. */
overflow: hidden;
}
/* A MapLibre container must not inherit object-fit, and needs a real height. */
.estate-map--live { height: 40.8125rem; padding: 0; }
.maplibregl-map {
font: inherit;
background: var(--bg-blue-50);
}
/* No tint filter here any more. The basemap used to be CARTO raster tinted by
`grayscale() … hue-rotate()`, which was always an approximation of the Figma
palette and washed the labels out with it. The basemap is vector now, so the
palette lives in map-style.js as real paint values -- change colours there,
not here. */
/* The zoom buttons the design already drew sit above the map canvas. */
.corridor-map__ctrl { z-index: 1000; }
.corridor-map__ctrl button { cursor: pointer; }
/* Estate pin — brand orange so it reads against the blue basemap. */
.map-pin { position: relative; }
.map-pin__dot,
.map-pin__ring {
position: absolute;
left: 50%; top: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.map-pin__dot {
width: 12px; height: 12px;
background: var(--orange);
box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0, 0, 0, .3);
}
.map-pin__ring {
width: 28px; height: 28px;
background: rgba(255, 98, 0, .22);
}
.map-pin.is-active .map-pin__dot {
width: 16px; height: 16px;
background: var(--blue);
box-shadow: 0 0 0 4px #fff, 0 3px 10px rgba(0, 0, 0, .35);
}
.map-pin.is-active .map-pin__ring {
width: 40px; height: 40px;
background: rgba(34, 91, 147, .2);
}
/* Attribution is a licence condition of the tiles, so it stays — just quiet. */
.maplibregl-ctrl-bottom-left { margin: 0 0 .375rem .375rem; }
.maplibregl-ctrl-attrib {
background: rgba(255, 255, 255, .82);
border-radius: .25rem;
font-size: .625rem;
line-height: 1.4;
padding: 0 .5rem;
}
.maplibregl-ctrl-attrib a { color: var(--blue); }
/* MapLibre's own "find me" button is not in the design and duplicates the
reset control the page already draws. */
.maplibregl-ctrl-attrib-button { display: none; }
/* Estate cards double as the map's selector on the home page. */
.has-js .estate-item { cursor: pointer; }
.estate-item.is-active {
background: var(--bg-blue);
box-shadow: inset .1875rem 0 0 var(--orange);
}
@media (max-width: 1023px) {
.estate-map--live { height: 22rem; }
/* MapLibre's stylesheet is linked after this one, so matching its own
`.maplibregl-ctrl button` is not enough to win. */
.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-in,
.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-out {
width: 44px;
height: 44px;
line-height: 44px;
font-size: 22px;
}
}
/* At-a-glance card, shown while a marker or its estate card is hovered.
MapLibre's own popup chrome (background, padding, tip) is stripped so the
card can be a card. */
.maplibregl-popup.map-glance .maplibregl-popup-content {
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
white-space: normal;
}
.maplibregl-popup.map-glance .maplibregl-popup-tip { display: none; }
/* The card is a preview, not a target -- clicks belong to the pin under it.
The card's own link re-enables pointers on itself. */
.maplibregl-popup.map-glance { pointer-events: none; }
.maplibregl-popup.map-glance .map-card { pointer-events: auto; }
.map-card {
display: block;
width: 15rem;
overflow: hidden;
background: var(--white);
border-radius: .75rem;
box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .22);
text-decoration: none;
color: inherit;
}
.map-card__art {
display: block;
height: 7.5rem;
background: var(--bg-blue) center / cover no-repeat;
}
.map-card__body { display: block; padding: .625rem .875rem .75rem; }
.map-card__place {
display: block;
font-size: .75rem;
font-weight: 500;
color: var(--orange);
}
.map-card__name {
display: block;
margin-top: .125rem;
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
color: var(--blue);
}
.map-card__facts {
display: flex;
gap: 1.25rem;
margin-top: .5rem;
font-size: .8125rem;
font-weight: 600;
color: var(--text, #1a1a1a);
}
.map-card__facts b {
display: block;
font-size: .625rem;
font-weight: 500;
letter-spacing: .04em;
text-transform: uppercase;
color: #8A8A8A;
}
/* The estate-detail pin carries a permanent name plate instead of a card. */
.maplibregl-popup.map-glance--label .maplibregl-popup-content {
padding: .3125rem .75rem;
white-space: nowrap;
background: var(--white);
border-radius: 1rem;
box-shadow: 0 .375rem 1rem rgba(0, 0, 0, .18);
font-size: .8125rem;
font-weight: 600;
color: var(--blue);
}
/* ==========================================================================
MOBILE REFINEMENTS
Audited on a 390x844 and 360x800 viewport. The rules above reflow the
1920 canvas; these fix what the reflow left behind — nested scrollers that
spill, Figma line breaks that turn into one-word lines, tap targets under
44px, and the iOS focus zoom that fires on any control below 16px.
========================================================================== */
@media (max-width: 1023px) {
/* ---- Home · Growth corridors --------------------------------------
The estate list is a 366px-tall inner scroller on the desktop canvas.
On mobile `height: auto` left `.estate-list__scroll` with no height to
fill, so the cards escaped the max-height and painted over the map and
the section below it. A nested scroll area is the wrong pattern on a
touch screen anyway, so the list simply flows with the page here. */
.estate-list {
height: auto;
max-height: none;
padding: 0;
background: none;
}
.estate-list__scroll { height: auto; overflow: visible; }
.estate-list__fade { display: none; }
.estate-item { padding: .75rem 1.25rem 1.25rem; border-radius: .625rem; }
.estate-item + .estate-item { margin-top: .75rem; }
.estate-item__place { line-height: 1.75rem; }
.estate-item__foot { flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.estate-item__stat dd { white-space: nowrap; }
.estate-item__foot .btn-chip {
flex: none;
height: 44px;
padding-inline: 1rem;
font-size: .875rem;
white-space: nowrap;
}
/* ---- Home · Advantage cards --------------------------------------- */
.advantage-card .learn-more { margin-top: .25rem; margin-right: 0; }
/* ---- Home · Tenant marquee ---------------------------------------- */
.marquee__track { gap: 2.25rem; }
/* ---- Contact page ---------------------------------------------------
`.contact-page .contact-split` and its first block outrank the resets
in the responsive block, so their desktop offsets would survive as a
hole under the page header. */
.contact-page .contact-split { padding-top: 0; }
.contact-page .contact-block:first-child { margin-top: 0; }
/* ---- Authored line breaks -------------------------------------------
Headings and short labels carry breaks from the admin so they wrap the
way the 1920 canvas does. At 390px those breaks strand single words
("Lokasi / dan / Aksesibilitas"), so let the text wrap on its own.
Addresses keep their breaks — they are content, not layout. */
.h-section .lb,
.hero__title .lb,
.advantage-card__title .lb,
.advantage-card__body .lb,
.estate-intro__kicker .lb,
.estate-label__title .lb,
.estate-label__text .lb,
.infra-card__text .lb,
.access-card__to .lb,
.product-card__title .lb,
.cta-band__title .lb,
.ir-why__title .lb,
.ir-why__text .lb,
.reason__title .lb,
.folio-row__title .lb { display: inline; }
/* ---- Form controls --------------------------------------------------
iOS Safari zooms the page on focus whenever a control computes below
16px, and the mobile root is 15px — so these are set in px, not rem. */
.field input,
.field select,
.field textarea,
.ir-table__filters input,
.ir-table__filters select { font-size: 16px; }
.ir-table__filters input,
.ir-table__filters select { height: 44px; }
/* ---- Tap targets ----------------------------------------------------
Everything interactive clears 44px. `.learn-more` keeps its hairline
rule at the text baseline, so the height is added above it. */
.lang__btn { height: 44px; }
.lang__menu a { padding: .75rem .75rem; }
.learn-more { padding-top: 1.5rem; }
.product-card .learn-more { margin-top: .25rem; }
.socials a { width: 44px; height: 44px; }
.site-header__logo { display: flex; align-items: center; min-height: 44px; }
.contact-block a { display: inline-block; padding-block: .625rem; }
/* Rows this dense read as one target each; the 11px gap between them
keeps the spacing WCAG 2.5.8 asks for without a 220px-tall footer. */
.footer-col a { display: inline-block; padding-block: .625rem; }
.site-footer__legal a { display: inline-block; padding-block: .625rem; }
.article__back { min-height: 44px; align-items: center; }
.estate-card .btn-explore { height: 44px; padding-inline: 1.25rem; }
.corridor-map__ctrl { gap: .5rem; }
.corridor-map__ctrl button { width: 44px; height: 44px; border-radius: .5rem; }
.corridor-map__ctrl svg { width: 22px; height: 22px; }
/* ---- Legibility -----------------------------------------------------
Nothing informational drops below 13px on a phone. The root is 15px
here, so these are px — .8125rem would land back at 12. */
.stats__label { font-size: 14px; line-height: 1.25rem; }
.avail__label { font-size: 13px; }
.avail__chip { height: 2.25rem; }
.estate-item__stat dt { font-size: 13px; }
.maplibregl-popup.map-glance--label .maplibregl-popup-content { font-size: 13px; }
}
@media (max-width: 599px) {
/* The three-up estate footer has no room for a right-aligned chip. */
.estate-item__foot .btn-chip { width: 100%; justify-content: center; margin-left: 0; }
}
/* --------------------------------------------------------------------------
Touch ergonomics
The rules above key off width, which misses a tablet held in portrait at
1024 — a touch screen running the desktop layout. Everything here is about
the input device, not the canvas, so it keys off the pointer instead.
-------------------------------------------------------------------------- */
@media (pointer: coarse) {
.lang__btn { height: 44px; }
.lang__menu a { padding: 12px; }
.nav-toggle { width: 44px; height: 44px; }
.site-header__logo { display: flex; align-items: center; min-height: 44px; }
.learn-more { padding-top: 24px; }
.product-card .learn-more { margin-top: .25rem; }
.advantage-card .learn-more { margin-top: .25rem; }
.btn-chip { height: 44px; padding-inline: 16px; }
.estate-card .btn-explore { height: 44px; padding-inline: 20px; }
.article__back { min-height: 44px; align-items: center; }
.socials a { width: 44px; height: 44px; }
.contact-block a { display: inline-block; padding-block: 12px; }
.footer-col a { display: inline-block; padding-block: 12px; }
.site-footer__legal a { display: inline-block; padding-block: 12px; }
.corridor-map__ctrl button { width: 44px; height: 44px; border-radius: 8px; }
.corridor-map__ctrl svg { width: 22px; height: 22px; }
.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-in,
.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-out {
width: 44px;
height: 44px;
line-height: 44px;
font-size: 22px;
}
/* iOS Safari zooms the page whenever a focused control is under 16px. */
.field input,
.field select,
.field textarea,
.ir-table__filters input,
.ir-table__filters select { font-size: 16px; }
.ir-table__filters input,
.ir-table__filters select { height: 44px; }
.field input, .field select, .field textarea { min-height: 44px; }
.btn-submit { min-height: 44px; }
}