<style>
.hero-banner-one {
max-height: 900px !important;
}
</style>
<div class="ck-content">
<section class="rt-feature-mosaic-wrap" aria-label="Estate features">
<div class="rt-feature-mosaic">
<div class="rt-feature-mosaic__half">
<div class="rt-feature-mosaic__col">
<div class="rt-feature-mosaic__tile rt-feature-mosaic__tile--orange">
<p class="rt-feature-mosaic__label">Warehouse spaces</p>
<div class="rt-feature-mosaic__body">
<h3 class="rt-feature-mosaic__heading"><span class="rt-feature-mosaic__nowrap">4,000 – 100,000 sqm</span> over 17 buildings</h3>
<p class="rt-feature-mosaic__sub">375,000 sqm of lettable area</p>
</div>
</div>
<div class="rt-feature-mosaic__media">
<img class="rt-feature-mosaic__image" src="https://edge.sitecorecloud.io/mirvacprocu45a5-mirvacsitec7536-prodc5da-5fc1/media/project/residential/seed/media/september-26-refresh/man-on-phone.webp" alt="Man on the phone working at a laptop in a bright office" width="650" height="420" />
</div>
<div class="rt-feature-mosaic__tile rt-feature-mosaic__tile--lime">
<p class="rt-feature-mosaic__label">Future flexibility</p>
<div class="rt-feature-mosaic__body">
<h3 class="rt-feature-mosaic__heading">Small & large format flexible warehouse designs</h3>
</div>
</div>
</div>
<div class="rt-feature-mosaic__col">
<div class="rt-feature-mosaic__media">
<img class="rt-feature-mosaic__image" src="https://edge.sitecorecloud.io/mirvacprocu45a5-mirvacsitec7536-prodc5da-5fc1/media/project/residential/seed/media/september-26-refresh/plane-sunrise.webp" alt="Passenger plane on the airport apron at sunset" width="650" height="420" />
</div>
<div class="rt-feature-mosaic__tile rt-feature-mosaic__tile--dark rt-feature-mosaic__tile--fill rt-feature-mosaic__tile--trails">
<p class="rt-feature-mosaic__label">Connections</p>
<div class="rt-feature-mosaic__body">
<h3 class="rt-feature-mosaic__heading">Direct frontage to Elizabeth Drive</h3>
<p class="rt-feature-mosaic__heading rt-feature-mosaic__heading--line">800m to <span class="rt-feature-mosaic__arrow" aria-hidden="true">→</span> M12</p>
<p class="rt-feature-mosaic__heading rt-feature-mosaic__heading--line">7km to <span class="rt-feature-mosaic__arrow" aria-hidden="true">→</span> M7</p>
</div>
</div>
</div>
</div>
<div class="rt-feature-mosaic__half">
<div class="rt-feature-mosaic__col">
<div class="rt-feature-mosaic__tile rt-feature-mosaic__tile--overlay rt-feature-mosaic__tile--fill rt-feature-mosaic__tile--track">
<img class="rt-feature-mosaic__overlay-image" src="https://edge.sitecorecloud.io/mirvacprocu45a5-mirvacsitec7536-prodc5da-5fc1/media/project/residential/seed/media/september-26-refresh/bikerider.webp" alt="Cyclist riding along a quiet country road" width="650" height="420" />
<p class="rt-feature-mosaic__label">Wellness</p>
<div class="rt-feature-mosaic__body">
<h3 class="rt-feature-mosaic__heading">On site walking & running tracks</h3>
</div>
</div>
<div class="rt-feature-mosaic__tile rt-feature-mosaic__tile--overlay rt-feature-mosaic__tile--fill">
<img class="rt-feature-mosaic__overlay-image" src="https://edge.sitecorecloud.io/mirvacprocu45a5-mirvacsitec7536-prodc5da-5fc1/media/project/residential/seed/media/september-26-refresh/coffee.webp" alt="Hands holding a coffee cup at a cafe table" width="650" height="420" />
<p class="rt-feature-mosaic__label">Amenity</p>
<div class="rt-feature-mosaic__body">
<h3 class="rt-feature-mosaic__heading">On site premium end of trip & estate cafe</h3>
</div>
</div>
</div>
<div class="rt-feature-mosaic__col">
<div class="rt-feature-mosaic__tile rt-feature-mosaic__tile--lime rt-feature-mosaic__tile--star">
<p class="rt-feature-mosaic__label">Targeting</p>
<div class="rt-feature-mosaic__body">
<h3 class="rt-feature-mosaic__heading">Minimum 5‑star Green Star buildings</h3>
</div>
</div>
<div class="rt-feature-mosaic__media rt-feature-mosaic__media--fill">
<img class="rt-feature-mosaic__image" src="https://edge.sitecorecloud.io/mirvacprocu45a5-mirvacsitec7536-prodc5da-5fc1/media/project/residential/seed/media/september-26-refresh/solar-panels.webp" alt="Solar panels across a warehouse rooftop" width="650" height="420" />
</div>
<div class="rt-feature-mosaic__tile rt-feature-mosaic__tile--orange rt-feature-mosaic__tile--sun">
<p class="rt-feature-mosaic__label">Embedded sustainability</p>
<div class="rt-feature-mosaic__body">
<h3 class="rt-feature-mosaic__heading">Rooftop solar, electric vehicles & recycled rainwater</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
.rt-feature-mosaic-wrap {
--rt-mosaic-background: #dde4dc;
--rt-mosaic-orange: #f3b66c;
--rt-mosaic-lime: #dfe8a4;
--rt-mosaic-dark: #2b1a13;
--rt-mosaic-text-dark: #2b1a13;
--rt-mosaic-text-light: #ffffff;
--rt-mosaic-accent: #dfe8a4;
--rt-mosaic-font: 'Denim Ink', arial;
--rt-mosaic-gap: clamp(10px, 1vw, 16px);
--rt-mosaic-ease: cubic-bezier(0.22, 1, 0.36, 1);
position: relative !important;
width: 100vw !important;
max-width: 100vw !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin: 0 !important;
padding: clamp(32px, 4vw, 64px) 0 !important;
box-sizing: border-box;
background: var(--rt-mosaic-background) !important;
}
.rt-feature-mosaic {
display: flex;
flex-direction: column;
gap: var(--rt-mosaic-gap);
width: min(1420px, calc(100% - clamp(40px, 8vw, 128px)));
margin: 0 auto;
box-sizing: border-box;
}
.hero-banner-one {
max-height: 900px !important;
}
.rt-feature-mosaic__half {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--rt-mosaic-gap);
align-items: stretch;
}
.rt-feature-mosaic__col {
display: flex;
flex-direction: column;
gap: var(--rt-mosaic-gap);
min-width: 0;
}
.rt-feature-mosaic__media {
position: relative;
overflow: clip;
flex: 0 0 auto;
margin: 0 !important;
}
.rt-feature-mosaic__image {
display: block;
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: center;
margin: 0 !important;
}
.rt-feature-mosaic__media--fill {
flex: 1 1 auto;
min-height: clamp(220px, 24vw, 420px);
}
.rt-feature-mosaic__media--fill .rt-feature-mosaic__image {
position: absolute;
inset: 0;
height: 100% !important;
aspect-ratio: auto;
}
.rt-feature-mosaic__tile {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
flex: 0 0 auto;
overflow: clip;
padding: clamp(18px, 2vw, 32px) clamp(18px, 2.4vw, 40px) clamp(24px, 2.6vw, 44px);
box-sizing: border-box;
text-align: center;
}
.rt-feature-mosaic__tile--fill {
flex: 1 1 auto;
}
.rt-feature-mosaic__tile--orange {
background: var(--rt-mosaic-orange);
color: var(--rt-mosaic-text-dark);
}
.rt-feature-mosaic__tile--lime {
background: var(--rt-mosaic-lime);
color: var(--rt-mosaic-text-dark);
}
.rt-feature-mosaic__tile--dark {
background: var(--rt-mosaic-dark);
color: var(--rt-mosaic-text-light);
padding-top: clamp(32px, 4vw, 64px);
}
.rt-feature-mosaic__tile--overlay {
min-height: clamp(260px, 26vw, 460px);
background: var(--rt-mosaic-dark);
color: var(--rt-mosaic-text-light);
}
.rt-feature-mosaic__tile--overlay::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%);
pointer-events: none;
}
.rt-feature-mosaic__overlay-image {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
margin: 0 !important;
}
.rt-feature-mosaic__tile .rt-feature-mosaic__label,
.rt-feature-mosaic__tile .rt-feature-mosaic__body {
position: relative;
z-index: 2;
}
.rt-feature-mosaic__tile--overlay .rt-feature-mosaic__body {
justify-content: flex-end;
}
.rt-feature-mosaic__label {
font-family: var(--rt-mosaic-font) !important;
font-size: clamp(11px, 0.55rem + 0.3vw, 15px) !important;
font-weight: 400 !important;
line-height: 1.3 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: inherit !important;
margin: 0 0 clamp(14px, 1.6vw, 24px) !important;
}
.rt-feature-mosaic__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(16px, 2.4vw, 40px);
width: 100%;
}
.rt-feature-mosaic__heading {
font-family: var(--rt-mosaic-font) !important;
font-size: clamp(20px, 0.9rem + 1.3vw, 42px) !important;
font-weight: 400 !important;
line-height: 1.12 !important;
letter-spacing: 0 !important;
text-transform: uppercase !important;
color: inherit !important;
max-width: 17ch;
margin: 0 !important;
padding: 0 !important;
}
.rt-feature-mosaic__nowrap {
white-space: nowrap;
}
.rt-feature-mosaic__heading--line {
white-space: nowrap;
}
.rt-feature-mosaic__arrow {
display: inline-block;
color: var(--rt-mosaic-accent);
margin: 0 0.1em;
}
.rt-feature-mosaic__sub {
font-family: var(--rt-mosaic-font) !important;
font-size: clamp(12px, 0.6rem + 0.4vw, 17px) !important;
font-weight: 400 !important;
line-height: 1.3 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
color: inherit !important;
margin: calc(clamp(16px, 2.4vw, 40px) * -0.5) 0 0 !important;
}
/* ---------- Movement: image zoom + hover ---------- */
.rt-feature-mosaic__image,
.rt-feature-mosaic__overlay-image {
scale: 1.08;
transition: scale 1200ms var(--rt-mosaic-ease);
will-change: scale, translate;
}
@media (hover: hover) {
.rt-feature-mosaic__media:hover .rt-feature-mosaic__image,
.rt-feature-mosaic__tile--overlay:hover .rt-feature-mosaic__overlay-image {
scale: 1.16;
}
}
/* ---------- Movement: light sheen on colour tiles ---------- */
.rt-feature-mosaic__tile--orange::before,
.rt-feature-mosaic__tile--lime::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 65%);
translate: -120% 0;
transition: translate 1100ms var(--rt-mosaic-ease);
pointer-events: none;
}
@media (hover: hover) {
.rt-feature-mosaic__tile--orange:hover::before,
.rt-feature-mosaic__tile--lime:hover::before {
translate: 120% 0;
}
}
/* ---------- Graphic: arrows nudge towards the motorways ---------- */
.rt-feature-mosaic__arrow {
animation: rt-mosaic-nudge 2.4s ease-in-out infinite;
}
.rt-feature-mosaic__heading--line + .rt-feature-mosaic__heading--line .rt-feature-mosaic__arrow {
animation-delay: 0.3s;
}
@keyframes rt-mosaic-nudge {
0%, 100% { translate: 0 0; }
50% { translate: 0.22em 0; }
}
/* ---------- Graphic: traffic light trails (Connections) ---------- */
.rt-feature-mosaic__tile--trails::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -60%;
z-index: 1;
width: 60%;
background:
linear-gradient(90deg, rgba(223, 232, 164, 0), rgba(223, 232, 164, 0.45), rgba(223, 232, 164, 0)) 0 18% / 100% 1px no-repeat,
linear-gradient(90deg, rgba(243, 182, 108, 0), rgba(243, 182, 108, 0.4), rgba(243, 182, 108, 0)) 30% 84% / 70% 1px no-repeat,
linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)) 80% 92% / 55% 1px no-repeat;
animation: rt-mosaic-trail 7s linear infinite;
pointer-events: none;
}
@keyframes rt-mosaic-trail {
from { translate: 0 0; }
to { translate: 270% 0; }
}
/* ---------- Graphic: moving running track (Wellness) ---------- */
.rt-feature-mosaic__tile--track::before {
content: "";
position: absolute;
right: clamp(18px, 2.4vw, 40px);
bottom: clamp(12px, 1.2vw, 20px);
left: clamp(18px, 2.4vw, 40px);
z-index: 2;
height: 2px;
background: repeating-linear-gradient(90deg, var(--rt-mosaic-accent) 0 18px, transparent 18px 34px);
background-size: 34px 2px;
opacity: 0.85;
animation: rt-mosaic-track 1.4s linear infinite;
pointer-events: none;
}
@keyframes rt-mosaic-track {
from { background-position: 0 0; }
to { background-position: 34px 0; }
}
/* ---------- Graphic: slow-turning star (Green Star) ---------- */
.rt-feature-mosaic__tile--star::after {
content: "";
position: absolute;
top: clamp(-34px, -2.4vw, -18px);
right: clamp(-34px, -2.4vw, -18px);
z-index: 1;
width: clamp(80px, 8vw, 132px);
aspect-ratio: 1;
background: rgba(255, 255, 255, 0.55);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
animation: rt-mosaic-spin 40s linear infinite;
pointer-events: none;
}
/* ---------- Graphic: rotating sun rays (Sustainability) ---------- */
.rt-feature-mosaic__tile--sun::after {
content: "";
position: absolute;
right: clamp(-70px, -4.4vw, -40px);
bottom: clamp(-70px, -4.4vw, -40px);
z-index: 1;
width: clamp(150px, 14vw, 240px);
aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 20%, transparent 21%),
repeating-conic-gradient(rgba(255, 255, 255, 0.45) 0deg 5deg, transparent 5deg 22.5deg);
-webkit-mask: radial-gradient(circle, #000 0 20%, transparent 21% 28%, #000 29% 62%, transparent 70%);
mask: radial-gradient(circle, #000 0 20%, transparent 21% 28%, #000 29% 62%, transparent 70%);
animation: rt-mosaic-spin 50s linear infinite;
pointer-events: none;
}
@keyframes rt-mosaic-spin {
to { rotate: 360deg; }
}
/* ---------- Movement: scroll reveal + parallax (progressive enhancement) ---------- */
@supports (animation-timeline: view()) {
.rt-feature-mosaic__tile,
.rt-feature-mosaic__media {
animation: rt-mosaic-rise linear both;
animation-timeline: view();
animation-range: entry 0% entry 90%;
}
.rt-feature-mosaic__col + .rt-feature-mosaic__col .rt-feature-mosaic__tile,
.rt-feature-mosaic__col + .rt-feature-mosaic__col .rt-feature-mosaic__media {
animation-range: entry 15% entry 100%;
}
.rt-feature-mosaic__image,
.rt-feature-mosaic__overlay-image {
animation: rt-mosaic-parallax linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
.rt-feature-mosaic__tile--orange .rt-feature-mosaic__heading,
.rt-feature-mosaic__tile--lime .rt-feature-mosaic__heading,
.rt-feature-mosaic__tile--dark .rt-feature-mosaic__heading {
animation: rt-mosaic-text linear both;
animation-timeline: view();
animation-range: entry 30% entry 100%;
}
}
@keyframes rt-mosaic-rise {
from { opacity: 0; translate: 0 48px; }
to { opacity: 1; translate: 0 0; }
}
@keyframes rt-mosaic-parallax {
from { translate: 0 -4%; }
to { translate: 0 4%; }
}
@keyframes rt-mosaic-text {
from { opacity: 0; translate: 0 18px; letter-spacing: 0.06em; }
to { opacity: 1; translate: 0 0; letter-spacing: 0; }
}
@media (min-width: 1600px) {
.rt-feature-mosaic-wrap {
--rt-mosaic-gap: 18px;
}
.rt-feature-mosaic__tile {
padding: 36px 48px 48px;
}
.rt-feature-mosaic__tile--dark {
padding-top: 72px;
}
.rt-feature-mosaic__heading {
font-size: 44px !important;
}
.rt-feature-mosaic__label {
font-size: 15px !important;
}
.rt-feature-mosaic__sub {
font-size: 18px !important;
}
}
@media (max-width: 768px) {
.rt-feature-mosaic-wrap {
--rt-mosaic-gap: 12px;
padding: 28px 0 48px !important;
}
.rt-feature-mosaic {
width: min(100% - 32px, 520px);
}
.rt-feature-mosaic__half {
grid-template-columns: minmax(0, 1fr);
}
.rt-feature-mosaic__tile,
.rt-feature-mosaic__tile--fill {
flex: 0 0 auto;
padding: 22px 20px 28px;
}
.rt-feature-mosaic__tile--dark {
padding: 28px 20px 36px;
}
.rt-feature-mosaic__tile--overlay {
min-height: 0;
aspect-ratio: 4 / 5;
}
.rt-feature-mosaic__image {
aspect-ratio: 4 / 3;
}
.rt-feature-mosaic__media--fill {
flex: 0 0 auto;
min-height: 0;
}
.rt-feature-mosaic__media--fill .rt-feature-mosaic__image {
position: static;
height: auto !important;
aspect-ratio: 4 / 3;
}
.rt-feature-mosaic__label {
font-size: 12px !important;
margin-bottom: 14px !important;
}
.rt-feature-mosaic__heading {
font-size: clamp(22px, 6.4vw, 30px) !important;
}
.rt-feature-mosaic__body {
gap: 18px;
}
.rt-feature-mosaic__sub {
font-size: 13px !important;
margin-top: -8px !important;
}
.rt-feature-mosaic__tile--track::before {
right: 20px;
left: 20px;
bottom: 12px;
}
.rt-feature-mosaic__col + .rt-feature-mosaic__col .rt-feature-mosaic__tile,
.rt-feature-mosaic__col + .rt-feature-mosaic__col .rt-feature-mosaic__media {
animation-range: entry 0% entry 90%;
}
}
@media (max-width: 360px) {
.rt-feature-mosaic {
width: calc(100% - 24px);
}
.rt-feature-mosaic__tile,
.rt-feature-mosaic__tile--fill {
padding-right: 16px;
padding-left: 16px;
}
.rt-feature-mosaic__heading--line,
.rt-feature-mosaic__nowrap {
white-space: normal;
}
}
@media (prefers-reduced-motion: reduce) {
.rt-feature-mosaic-wrap *,
.rt-feature-mosaic-wrap *::before,
.rt-feature-mosaic-wrap *::after {
animation: none !important;
transition: none !important;
}
.rt-feature-mosaic__tile--trails::before {
display: none;
}
}
</style>
</div>