/* =========================================================
PRESTIGE METRO PROPERTIES
MASTER STYLESHEET — CORRECTED
========================================================= */
:root{
--green:#153f33;
--green-dark:#0b241d;
--ink:#182a24;
--muted:#637169;
--gold:#ad8c4d;
--gold-light:#d6ba7c;
--pale:#f3f5f0;
--line:#dfe5de;
--white:#fff;
/* Compatibility with the newer HTML */
--navy:#061b2d;
--navy2:#092943;
--navy3:#0e3b5b;
--cream:#f5f1e9;
--black:#000;
--text:#182a24;
--max:1440px;
}
*{
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
scroll-padding-top:112px;
}
body{
margin:0;
font:16px/1.65 'Segoe UI',Arial,sans-serif;
color:var(--ink);
background:#fff;
overflow-x:hidden;
}
body.intro-active{
overflow:hidden !important;
}
a{
color:inherit;
text-decoration:none;
}
button,
input,
select,
textarea{
font:inherit;
}
button,
a,
select,
textarea{
-webkit-tap-highlight-color:transparent;
}
button{
cursor:pointer;
}
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible{
outline:3px solid var(--gold);
outline-offset:4px;
}
/* =========================================================
GLOBAL CONTAINERS
========================================================= */
.wrap,
.container{
width:min(1320px,90%);
margin-left:auto;
margin-right:auto;
}
/* =========================================================
TOP REVIEW BAR
========================================================= */
.review{
background:var(--green-dark);
color:#f5ead4;
padding:7px 5%;
font-size:12px;
letter-spacing:1.3px;
display:flex;
justify-content:space-between;
position:relative;
z-index:500;
}
.review span{
letter-spacing:0;
color:#e0e9e3;
}
/* =========================================================
HEADER
========================================================= */
header,
.site-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:22px;
padding:16px 4%;
position:absolute !important;
top:0 !important;
left:0 !important;
right:0 !important;
width:100% !important;
z-index:50000 !important;
background:
linear-gradient(
to bottom,
rgba(5,24,19,.96) 0%,
rgba(5,24,19,.88) 60%,
rgba(5,24,19,.25) 100%
) !important;
border-bottom:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
color:#fff;
isolation:isolate;
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
}
header .brand,
header nav,
header > .button,
header .menu,
.site-header .brand,
.site-header nav,
.site-header .button,
.site-header .menu,
.site-header .site-nav{
position:relative !important;
z-index:50001 !important;
}
/* =========================================================
BRAND
========================================================= */
.brand{
display:flex;
align-items:center;
gap:11px;
flex-shrink:0;
color:#fff;
}
.brand img{
width:51px;
height:63px;
object-fit:contain;
mix-blend-mode:normal;
filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.brand span{
display:flex;
flex-direction:column;
line-height:1.25;
}
.brand strong{
font:27px Georgia,serif;
letter-spacing:3px;
color:#fff;
}
.brand b{
font-size:12px;
letter-spacing:1.8px;
color:#fff;
}
.brand small{
font-size:10px;
letter-spacing:1.45px;
margin-top:6px;
color:#d6ba7c;
}
/* =========================================================
NAVIGATION
========================================================= */
nav,
.site-nav{
display:flex;
align-items:center;
gap:19px;
font-size:14px;
position:relative;
z-index:50002;
}
nav a,
.site-nav a{
color:#fff !important;
position:relative;
padding:8px 0;
text-shadow:0 2px 8px rgba(0,0,0,.5);
transition:
color .25s ease,
opacity .25s ease;
}
nav a::after,
.site-nav a::after{
content:"";
position:absolute;
left:0;
bottom:1px;
width:0;
height:1px;
background:var(--gold-light);
transition:width .25s ease;
}
nav a:hover,
.site-nav a:hover{
color:var(--gold-light) !important;
}
nav a:hover::after,
.site-nav a:hover::after{
width:100%;
}
/* =========================================================
HEADER BUTTON
========================================================= */
.button,
.btn{
display:inline-flex;
justify-content:center;
align-items:center;
gap:14px;
padding:15px 24px;
background:var(--green);
border:1px solid var(--green);
border-radius:6px;
color:#fff !important;
font-weight:600;
font-size:14px;
transition:
background .25s ease,
transform .25s ease,
border-color .25s ease;
}
.button:hover,
.btn:hover{
background:#25634f;
border-color:#25634f;
transform:translateY(-2px);
}
.compact{
padding:12px 18px;
white-space:nowrap;
}
header > .button,
.site-header > .button,
.header-enquire{
position:relative !important;
z-index:50003 !important;
}
/* =========================================================
MOBILE MENU
========================================================= */
.menu{
display:none;
background:rgba(255,255,255,.1);
color:#fff;
border:1px solid rgba(255,255,255,.35);
padding:8px 14px;
border-radius:5px;
position:relative;
z-index:50005;
}
/* =========================================================
HERO
========================================================= */
.hero{
display:grid;
grid-template-columns:1.05fr 1fr;
gap:56px;
padding-top:145px;
padding-bottom:60px;
align-items:center;
position:relative !important;
z-index:2 !important;
}
.hero::before,
.hero::after{
pointer-events:none;
z-index:0 !important;
}
.hero-copy,
.hero-content{
position:relative;
z-index:3 !important;
}
.eyebrow{
font-size:12px;
font-weight:650;
letter-spacing:2px;
color:#947339;
margin:0 0 21px;
}
h1,
h2,
h3,
h4{
font-family:Georgia,'Times New Roman',serif;
font-weight:400;
line-height:1.12;
letter-spacing:-1.4px;
margin:0 0 22px;
}
h1{
font-size:clamp(42px,4.3vw,66px);
color:var(--green);
}
h2{
font-size:clamp(34px,3.6vw,51px);
color:var(--green);
}
h3{
font-size:29px;
letter-spacing:-.6px;
}
em{
font-weight:400;
color:#8b743f;
}
.sub{
font-size:16px;
color:var(--green);
font-weight:500;
max-width:470px;
}
.intro{
color:var(--muted);
max-width:460px;
margin:22px 0 29px;
}
.actions{
display:flex;
gap:12px;
flex-wrap:wrap;
}
.hero-bottom{
margin-top:46px;
border-top:1px solid var(--line);
padding-top:20px;
display:flex;
justify-content:space-between;
gap:10px;
font-size:12px;
color:var(--muted);
}
.hero-bottom span:first-child{
letter-spacing:1.4px;
}
/* =========================================================
PHOTOS
========================================================= */
.photo{
background-size:cover;
background-repeat:no-repeat;
background-position:center;
overflow:hidden;
}
.p0{
background-image:url('generated/plots.png');
background-position:center;
}
.p1{
background-image:url('generated/construction.png');
background-position:center;
}
.p2{
background-image:url('generated/luxury-grandeur.png');
background-position:center;
}
.p3{
background-image:url('generated/apartments.png');
background-position:center;
}
.p4{
background-image:url('generated/farmland.png');
background-position:center;
}
.hero-photo{
height:580px;
border-radius:13px;
position:relative;
z-index:2;
}
.image-label{
position:absolute;
top:24px;
left:24px;
background:#ffffffdf;
padding:8px 13px;
font-size:11px;
letter-spacing:1.5px;
border-radius:3px;
}
.photo-card{
position:absolute;
bottom:24px;
left:24px;
right:24px;
background:#fffffff2;
padding:24px 29px;
border-radius:7px;
backdrop-filter:blur(8px);
}
.photo-card small{
font-size:11px;
letter-spacing:1.7px;
color:var(--muted);
}
.photo-card strong{
font:34px/1.12 Georgia;
display:block;
margin:10px 0;
}
.photo-card a{
display:flex;
justify-content:space-between;
font-size:14px;
border-top:1px solid var(--line);
padding-top:13px;
}
/* =========================================================
SERVICE STRIP
========================================================= */
.service-strip{
background:var(--green);
color:#fff;
padding:24px 5%;
display:flex;
justify-content:space-around;
gap:25px;
font-size:14px;
position:relative;
z-index:3;
}
/* =========================================================
SECTIONS
========================================================= */
.section{
padding-top:90px;
padding-bottom:90px;
position:relative;
z-index:2;
}
.about{
display:grid;
grid-template-columns:1fr 1.15fr;
gap:80px;
}
.about p:not(.eyebrow),
.split p:not(.eyebrow){
color:var(--muted);
}
.lead{
font-size:22px;
color:var(--green) !important;
margin-top:0;
}
.about-line{
display:flex;
gap:38px;
border-top:1px solid var(--line);
padding-top:24px;
margin-top:30px;
}
.about-line span{
display:flex;
flex-direction:column;
font-size:13px;
color:var(--muted);
}
.about-line strong{
font:30px Georgia;
color:var(--green);
margin-bottom:10px;
}
.pale{
background:var(--pale);
}
/* =========================================================
SECTION HEAD
========================================================= */
.section-head{
display:flex;
justify-content:space-between;
align-items:end;
gap:25px;
margin-bottom:28px;
}
.section-head p:not(.eyebrow){
color:var(--muted);
}
/* =========================================================
FILTERS
========================================================= */
.filters,
.interior-tabs{
display:flex;
gap:12px;
margin:20px 0 28px;
flex-wrap:wrap;
}
.filters button,
.interior-tabs button{
background:transparent;
border:1px solid #ccd5ca;
border-radius:30px;
padding:9px 24px;
color:var(--green);
font-size:14px;
transition:.2s ease;
}
.filters button:hover,
.interior-tabs button:hover{
border-color:var(--gold);
}
.filters .selected,
.interior-tabs .selected{
background:var(--green);
color:#fff;
border-color:var(--green);
}
/* =========================================================
PROPERTY CARDS
========================================================= */
.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
}
.project{
background:#fff;
border:1px solid var(--line);
border-radius:10px;
overflow:hidden;
transition:
transform .25s,
box-shadow .25s;
}
.project:hover{
transform:translateY(-5px);
box-shadow:0 15px 32px #153f3310;
}
.project .photo{
height:258px;
position:relative;
}
.badge{
position:absolute;
top:15px;
left:15px;
font-size:10px;
letter-spacing:1px;
background:#fffc;
padding:5px 10px;
border-radius:3px;
}
.card-body{
padding:26px;
}
.card-body .eyebrow{
margin-bottom:12px;
}
.card-body h3{
font-size:26px;
}
.card-body p{
font-size:14px;
color:var(--muted);
}
dl{
font-size:13px;
border-top:1px solid var(--line);
padding-top:13px;
}
dl div{
display:flex;
justify-content:space-between;
gap:8px;
margin:7px 0;
}
dt{
color:var(--muted);
}
dd{
margin:0;
}
.text-button{
background:none;
border:0;
border-top:1px solid var(--line);
padding:15px 0 0;
display:flex;
justify-content:space-between;
gap:15px;
width:100%;
text-align:left;
font-size:14px;
font-weight:600;
color:var(--green);
}
/* =========================================================
SPLIT SECTIONS
========================================================= */
.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}
.feature-photo{
height:440px;
border-radius:9px;
}
.checks{
list-style:none;
padding:0;
margin:26px 0;
display:grid;
gap:11px;
}
.checks li:before{
content:'✓';
color:var(--gold);
margin-right:14px;
}
/* =========================================================
DARK SECTIONS
========================================================= */
.dark{
background:var(--green);
color:#fff;
}
.dark h2{
color:#fff;
}
.dark em{
color:#d6ba7c;
}
.dark .eyebrow{
color:#d6ba7c;
}
.dark .split p:not(.eyebrow){
color:#d0dcd5;
}
.gold{
background:#d9c18c;
border-color:#d9c18c;
color:var(--ink);
margin-top:18px;
}
/* =========================================================
CONSTRUCTION JOURNEY
========================================================= */
.journey{
display:grid;
grid-template-columns:repeat(8,1fr);
gap:12px;
margin-top:54px;
border-top:1px solid #ffffff30;
padding-top:30px;
}
.journey div{
font-size:13px;
}
.journey b{
display:block;
font:25px Georgia;
color:#d6ba7c;
margin-bottom:14px;
}
/* =========================================================
INTERIORS
========================================================= */
.interior-layout{
display:grid;
grid-template-columns:1.5fr 1fr;
min-height:420px;
border-radius:10px;
overflow:hidden;
}
.interior-layout .photo{
min-height:420px;
}
.interior-copy{
padding:44px;
background:var(--pale);
}
.interior-copy p{
color:var(--muted);
}
.interior-copy small{
display:block;
margin-top:30px;
color:var(--muted);
font-size:12px;
}
/* =========================================================
VALUES
========================================================= */
.values{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:45px;
margin-top:45px;
}
.values>div{
border-top:1px solid #cbd7ca;
padding-top:22px;
}
.values span{
color:var(--gold);
font-size:14px;
}
.values h3{
margin:18px 0;
font-size:26px;
}
.values p{
color:var(--muted);
}
/* =========================================================
CAREERS
========================================================= */
.careers{
padding:90px 0;
background:#fff;
position:relative;
z-index:2;
}
.jobs{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
}
.job{
background:#fff;
border:1px solid var(--line);
border-radius:10px;
overflow:hidden;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.job:hover{
transform:translateY(-5px);
box-shadow:0 15px 32px rgba(21,63,51,.10);
}
.job-image{
height:280px;
position:relative;
overflow:hidden;
background:#0b241d;
}
.job-image img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transition:transform .5s ease;
}
.job:hover .job-image img{
transform:scale(1.04);
}
/* Individual job images */
.job-image.job-bde{
background:
linear-gradient(
0deg,
rgba(5,24,38,.55),
transparent
),
url("generated/business.png") center/cover no-repeat;
}
.job-image.job-leader{
background:
linear-gradient(
0deg,
rgba(5,24,38,.55),
transparent
),
url("generated/leader.png") center/cover no-repeat;
}
.job-image.job-sales{
background:
linear-gradient(
0deg,
rgba(5,24,38,.55),
transparent
),
url("generated/sales.png") center/cover no-repeat;
}
/*
If the HTML contains ![]()
inside .job-image,
the actual image is used and the background remains
only as a fallback.
*/
.job-body{
padding:26px;
}
.job-body .eyebrow{
margin-bottom:12px;
}
.job-body h3{
margin-bottom:12px;
font-size:25px;
color:var(--green);
}
.job-body p{
color:var(--muted);
font-size:14px;
margin:0 0 20px;
}
.job-body .button,
.job-body .btn{
width:100%;
}
/* =========================================================
FOUNDER SECTION — FIXED
========================================================= */
.founder{
padding:120px 0;
background:#f4f0e8;
position:relative;
z-index:2;
color:#222;
}
.founder-grid{
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:80px;
align-items:center;
}
.founder-portrait{
min-height:500px;
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(
circle,
#164566,
#041522
);
overflow:hidden;
border-radius:8px;
}
.founder-portrait img{
width:220px;
height:220px;
object-fit:contain;
filter:drop-shadow(
0 20px 40px rgba(0,0,0,.4)
);
}
/* Founder content */
.founder-content{
color:#222 !important;
}
/*
IMPORTANT:
The HTML currently uses .about-lead and .about-copy
inside the Founder section.
These selectors override the old About-section colors
so the Founder text is visible on the cream background.
*/
.founder-content .about-lead{
margin:0 0 25px;
color:#061b2d !important;
font-size:22px;
font-weight:600;
line-height:1.5;
font-family:Georgia,'Times New Roman',serif;
}
.founder-content .about-copy{
margin:0 0 18px;
color:#333 !important;
font-size:16px;
line-height:1.9;
}
/*
Compatibility if the HTML is changed later to
.founder-lead / .founder-copy.
*/
.founder-lead{
margin:0 0 25px;
color:#061b2d !important;
font-size:22px;
font-weight:600;
line-height:1.5;
}
.founder-copy{
margin:0 0 18px;
color:#333 !important;
font-size:16px;
line-height:1.9;
}
.founder-content .eyebrow{
color:#b08a45 !important;
}
.founder-name{
margin:0 0 25px;
color:#061b2d !important;
font-size:clamp(40px,5vw,72px);
line-height:1.05;
}
.founder-name em{
color:#b08a45 !important;
font-style:italic;
}
.founder-signature{
margin-top:35px;
padding-top:25px;
border-top:1px solid #d6d1c8;
}
.founder-signature strong{
display:block;
color:#061b2d !important;
font-family:"Cinzel",Georgia,serif;
font-size:18px;
font-weight:500;
}
.founder-signature span{
display:block;
margin-top:6px;
color:#b08a45 !important;
font-size:9px;
font-weight:700;
letter-spacing:.18em;
text-transform:uppercase;
}
/*
Your current HTML has inline styles for the signature,
so this also handles that version safely.
*/
.founder-content strong{
color:#061b2d;
}
.founder-content span{
color:#b08a45;
}
/* =========================================================
CONTACT
========================================================= */
.contact{
display:grid;
grid-template-columns:1.15fr 1fr;
gap:90px;
}
.contact-links>div,
.contact-links>a{
display:block;
padding:17px 0;
border-bottom:1px solid var(--line);
overflow-wrap:anywhere;
}
.contact-links small{
display:block;
font-size:11px;
letter-spacing:1.5px;
color:var(--muted);
margin-bottom:5px;
}
.contact .text-button{
border:0;
}
.consult{
background:var(--pale);
padding:40px;
border-radius:10px;
}
.consult h3{
font-size:39px;
color:var(--green);
}
label{
display:block;
font-size:14px;
margin-top:18px;
margin-bottom:8px;
}
select,
textarea,
input{
width:100%;
border:1px solid #cad4c8;
border-radius:5px;
padding:12px;
background:#fff;
color:var(--ink);
}
textarea{
resize:vertical;
}
.consult .button,
.consult .btn{
width:100%;
margin-top:20px;
}
/* =========================================================
FOOTER
========================================================= */
footer{
background:#eef1eb;
padding:55px 0 20px;
position:relative;
z-index:2;
}
.footer-grid{
display:grid;
grid-template-columns:1.3fr .6fr .7fr 1fr;
gap:38px;
}
.footer-grid h4{
font-size:12px;
letter-spacing:1.5px;
margin:0 0 22px;
color:var(--green);
}
.footer-grid>div>a:not(.brand){
display:block;
margin:8px 0;
font-size:14px;
}
.footer-grid p{
font-size:14px;
color:var(--muted);
}
.email{
overflow-wrap:anywhere;
}
.social{
display:flex;
gap:17px;
flex-wrap:wrap;
}
.social a{
display:flex;
align-items:center;
gap:7px;
font-size:12px;
}
.social svg{
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:1.6;
}
.in{
font:bold 18px Arial;
}
.copyright{
border-top:1px solid #d0d9cd;
margin-top:40px;
padding-top:18px;
display:flex;
justify-content:space-between;
font-size:12px;
color:var(--muted);
}
/* =========================================================
DIALOG
========================================================= */
dialog{
border:0;
border-radius:12px;
max-width:850px;
width:92%;
padding:0;
max-height:90vh;
color:var(--ink);
}
dialog::backdrop{
background:#122b22b8;
backdrop-filter:blur(4px);
}
dialog .photo{
height:270px;
}
.close{
position:absolute;
right:15px;
top:15px;
border:0;
border-radius:50%;
width:40px;
height:40px;
background:#fff;
font-size:27px;
}
.dialog-content{
padding:34px;
}
.detail-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
background:var(--pale);
padding:20px;
}
.detail-grid h4,
.detail-grid p{
margin:0;
}
.detail-grid h4{
font-size:13px;
}
.detail-grid p{
font-size:14px;
color:var(--muted);
}
[hidden]{
display:none !important;
}
/* =========================================================
INTRO
========================================================= */
#company-intro{
position:fixed !important;
inset:0 !important;
width:100vw !important;
height:100vh !important;
z-index:100000 !important;
overflow:hidden !important;
isolation:isolate;
will-change:opacity,transform;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transform:translate3d(0,0,0);
display:flex !important;
opacity:1;
visibility:visible;
pointer-events:auto;
}
#company-intro.hide{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
transform:scale(1.04) !important;
}
/* =========================================================
INTRO MORPH
========================================================= */
#company-intro.morphing .logo-sculpture{
animation:
seamless-logo-morph
2.15s
cubic-bezier(.72,0,.18,1)
forwards !important;
will-change:transform,opacity;
backface-visibility:hidden;
}
@keyframes seamless-logo-morph{
from{
opacity:1;
transform:
translate3d(0,0,0)
scale(1);
}
to{
opacity:0;
transform:
translate3d(0,0,0)
scale(14);
}
}
#company-intro.morphing .logo-face{
animation:
seamless-face-morph
2.15s
cubic-bezier(.72,0,.18,1)
forwards !important;
will-change:transform,opacity,filter;
}
@keyframes seamless-face-morph{
from{
opacity:1;
filter:
url(#gold-cutout)
brightness(1.08)
drop-shadow(0 0 0 transparent);
}
45%{
opacity:1;
filter:
url(#gold-cutout)
brightness(1.25)
drop-shadow(
0 0 18px
rgba(214,176,91,.45)
);
}
75%{
opacity:.9;
filter:
url(#gold-cutout)
brightness(1.55)
drop-shadow(
0 0 45px
rgba(214,176,91,.7)
);
}
to{
opacity:0;
filter:
url(#gold-cutout)
brightness(1.8)
drop-shadow(
0 0 80px
rgba(214,176,91,.9)
);
}
}
#company-intro.morphing .logo-depth{
animation:
seamless-depth-morph
2.15s
cubic-bezier(.72,0,.18,1)
forwards !important;
will-change:transform,opacity;
}
@keyframes seamless-depth-morph{
from{
opacity:1;
transform:
translateZ(-3px)
scale(1);
}
to{
opacity:0;
transform:
translateZ(40px)
scale(14);
}
}
#company-intro.morphing .logo-glint{
animation:
seamless-glint-morph
2.15s
cubic-bezier(.72,0,.18,1)
forwards !important;
will-change:transform,opacity;
}
@keyframes seamless-glint-morph{
from{
opacity:.35;
transform:
translate3d(0,0,2px)
scale(1);
}
45%{
opacity:.75;
}
70%{
opacity:.9;
}
to{
opacity:0;
transform:
translate3d(0,0,50px)
scale(14);
}
}
#company-intro.morphing h1,
#company-intro.morphing .intro-tagline,
#company-intro.morphing .intro-kicker{
animation:
seamless-text-morph
1.35s
cubic-bezier(.65,0,.2,1)
forwards !important;
will-change:opacity,transform,filter;
}
@keyframes seamless-text-morph{
from{
opacity:1;
transform:
translate3d(0,0,0)
scale(1);
filter:blur(0);
}
to{
opacity:0;
transform:
translate3d(0,0,0)
scale(.88);
filter:blur(8px);
}
}
/* =========================================================
INTRO WAVE
========================================================= */
#company-intro::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:80px;
height:80px;
border-radius:50%;
pointer-events:none;
will-change:transform,opacity;
transform:
translate3d(-50%,-50%,0)
scale(0);
}
#company-intro.morphing::after{
animation:
seamless-wave
2.15s
cubic-bezier(.72,0,.18,1)
forwards !important;
}
@keyframes seamless-wave{
from{
opacity:0;
transform:
translate3d(-50%,-50%,0)
scale(0);
}
25%{
opacity:.12;
}
55%{
opacity:.28;
}
75%{
opacity:.18;
}
to{
opacity:0;
transform:
translate3d(-50%,-50%,0)
scale(115);
}
}
/* =========================================================
HOME REVEAL
========================================================= */
#home{
position:relative;
z-index:2;
visibility:visible;
}
#home.home-ready{
animation:
seamless-home-reveal
2.05s
cubic-bezier(.18,.75,.2,1)
both !important;
will-change:
opacity,
transform,
filter;
}
@keyframes seamless-home-reveal{
from{
opacity:0;
transform:
translate3d(0,0,0)
scale(1.035);
filter:blur(10px);
}
45%{
opacity:.35;
filter:blur(5px);
}
75%{
opacity:.78;
transform:
translate3d(0,0,0)
scale(1.008);
filter:blur(1.5px);
}
to{
opacity:1;
transform:
translate3d(0,0,0)
scale(1);
filter:blur(0);
}
}
/* =========================================================
PRESTIGE PORTAL
========================================================= */
.prestige-portal{
position:fixed;
z-index:100001;
pointer-events:none;
width:max-content;
height:max-content;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
transform-origin:50% 50%;
will-change:transform;
white-space:nowrap;
overflow:visible;
}
.prestige-portal-text{
display:block;
margin:0;
padding:0;
font-family:
Cinzel,
Georgia,
serif;
font-size:
clamp(3rem,8vw,8rem);
font-weight:700;
line-height:1;
letter-spacing:.08em;
white-space:nowrap;
color:#d4af37;
background:
linear-gradient(
120deg,
#8b6914 0%,
#d4af37 20%,
#fff4b0 40%,
#d4af37 58%,
#a67c00 78%,
#f4d77d 100%
);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:
0 0 8px rgba(212,175,55,.35),
0 0 25px rgba(212,175,55,.18);
transform-origin:50% 50%;
}
/* =========================================================
OLD MORPH ANIMATION RESET
========================================================= */
#company-intro.morphing .logo-sculpture,
#company-intro.morphing .logo-face,
#company-intro.morphing .logo-glint{
animation:none !important;
transition:none !important;
}
/* =========================================================
HARDWARE ACCELERATION
========================================================= */
#company-intro,
#company-intro .logo-sculpture,
#company-intro .logo-face,
#company-intro .logo-depth,
#company-intro .logo-glint,
#company-intro::after,
#home{
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
/* =========================================================
FLOATING LOGO
========================================================= */
.floating-logo{
position:fixed !important;
top:20px !important;
right:28px !important;
width:105px !important;
height:105px !important;
z-index:60000 !important;
pointer-events:none !important;
opacity:0 !important;
visibility:hidden !important;
transform:
translateY(-15px)
scale(.92) !important;
transition:
opacity .6s ease,
transform .6s ease,
visibility .6s ease !important;
}
.floating-logo.visible{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
transform:
translateY(0)
scale(1) !important;
}
body.page-scrolled .floating-logo{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
transform:
translateY(0)
scale(1) !important;
}
.site-header.scrolled{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
transform:translateY(-20px) !important;
}
/* =========================================================
HEADER SAFETY
========================================================= */
body > header,
body > .site-header,
header{
position:absolute !important;
top:0 !important;
left:0 !important;
right:0 !important;
width:100% !important;
z-index:50000 !important;
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
transform:none !important;
isolation:isolate !important;
}
body > header .brand,
body > header nav,
body > header .button,
body > header .menu,
header .brand,
header nav,
header .button,
header .menu{
position:relative !important;
z-index:50001 !important;
}
body > header nav a,
header nav a{
position:relative !important;
z-index:50002 !important;
color:#fff !important;
visibility:visible !important;
opacity:1 !important;
}
body > #home,
#home,
.hero{
position:relative;
z-index:2;
}
#home::before,
#home::after,
.hero::before,
.hero::after{
pointer-events:none !important;
}
#company-intro{
z-index:100000 !important;
}
.prestige-portal{
z-index:100001 !important;
}
/* =========================================================
LARGE SCREENS
========================================================= */
@media(min-width:1600px){
.hero-photo{
height:630px;
}
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1200px){
header,
.site-header{
gap:12px;
}
nav,
.site-nav{
gap:11px;
font-size:12px;
}
header>.button,
.site-header>.button{
display:none;
}
.hero{
gap:32px;
}
.hero-photo{
height:540px;
}
.card-body{
padding:20px;
}
.contact{
gap:45px;
}
.footer-grid{
gap:25px;
}
}
/* =========================================================
DESKTOP NAVIGATION
========================================================= */
@media(min-width:1101px){
.site-nav{
display:flex !important;
align-items:center !important;
gap:24px !important;
margin-right:130px !important;
}
.site-nav a{
white-space:nowrap !important;
}
}
/* =========================================================
TABLET NAVIGATION
========================================================= */
@media(max-width:1100px){
.site-nav{
display:none !important;
}
.header-enquire{
margin-right:120px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:850px){
header,
.site-header{
padding:16px 5% !important;
}
.menu{
display:block;
}
nav{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
background:
rgba(8,30,24,.98);
padding:20px 5%;
grid-template-columns:1fr 1fr;
font-size:16px;
box-shadow:
0 9px 25px rgba(0,0,0,.25);
border-top:1px solid rgba(255,255,255,.1);
}
nav.open{
display:grid;
}
nav a{
padding:10px 0;
}
.hero,
.about,
.split,
.contact{
grid-template-columns:1fr;
gap:35px;
}
.hero{
padding-top:125px;
}
.hero-photo{
height:440px;
}
.hero-copy{
max-width:630px;
}
.hero-bottom{
margin-top:25px;
}
.service-strip{
flex-wrap:wrap;
justify-content:flex-start;
font-size:12px;
gap:12px 30px;
}
.cards{
grid-template-columns:1fr 1fr;
}
.project:last-child{
grid-column:1/-1;
max-width:100%;
}
.section{
padding-top:60px;
padding-bottom:60px;
}
.careers{
padding:60px 0;
}
.jobs{
grid-template-columns:1fr 1fr;
}
.journey{
grid-template-columns:repeat(4,1fr);
gap:25px;
}
.interior-layout{
grid-template-columns:1fr;
}
.interior-layout .photo{
min-height:400px;
}
.values{
gap:22px;
}
.footer-grid{
grid-template-columns:1fr 1fr;
}
.review span{
max-width:65%;
text-align:right;
}
.section-head{
align-items:start;
}
.founder{
padding:80px 0;
}
.founder-grid{
grid-template-columns:1fr;
gap:45px;
}
.founder-portrait{
min-height:380px;
}
.founder-name{
font-size:48px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:750px){
.site-header{
padding:18px 5% !important;
}
.floating-logo{
width:78px !important;
height:78px !important;
top:14px !important;
right:14px !important;
}
.floating-logo img{
width:42px !important;
height:42px !important;
}
.floating-logo span{
font-size:5px !important;
}
}
@media(max-width:560px){
.review{
font-size:10px;
}
.brand strong{
font-size:23px;
}
.brand img{
width:43px;
height:54px;
}
.brand b{
font-size:10px;
}
.brand small{
font-size:9px;
}
.hero{
padding-top:120px;
}
.hero-photo{
height:390px;
}
h1{
font-size:43px;
}
.cards,
.values,
.jobs{
grid-template-columns:1fr;
}
.section-head{
display:block;
}
.section-head .button,
.section-head .btn{
margin-top:20px;
}
.hero-bottom{
font-size:10px;
}
.about-line{
gap:24px;
}
.about-line strong{
font-size:24px;
}
.photo-card strong{
font-size:29px;
}
.feature-photo{
height:320px;
}
.interior-copy,
.consult{
padding:26px;
}
.interior-layout .photo{
min-height:300px;
}
.footer-grid{
grid-template-columns:1fr;
}
.copyright{
display:block;
}
.copyright span{
display:block;
margin-top:10px;
}
.journey{
grid-template-columns:repeat(2,1fr);
}
.dialog-content{
padding:24px;
}
.detail-grid{
grid-template-columns:1fr;
}
.filters{
gap:8px;
}
.filters button{
padding:8px 17px;
}
.actions .button,
.actions .btn{
font-size:13px;
padding:13px 17px;
}
.job-image{
height:250px;
}
.founder-name{
font-size:42px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto;
}
*,
*::before,
*::after{
transition:none !important;
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
}
#company-intro.morphing .logo-sculpture,
#company-intro.morphing .logo-face,
#company-intro.morphing .logo-depth,
#company-intro.morphing .logo-glint,
#company-intro.morphing h1,
#company-intro.morphing .intro-tagline,
#company-intro.morphing .intro-kicker,
#company-intro.morphing::after,
#home.home-ready{
animation:none !important;
}
}
/* =========================================================
FINAL GLOBAL SAFETY
========================================================= */
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
/*
Prevent accidental horizontal overflow from grids.
*/
.hero,
.about,
.split,
.contact,
.cards,
.jobs,
.founder-grid,
.footer-grid,
.interior-layout{
min-width:0;
}
img{
max-width:100%;
}
/*
Founder must remain visible even if an older
reveal/animation class gets added accidentally.
*/
.founder,
.founder-content,
.founder-grid{
visibility:visible;
}
/*
Ensure Founder section is not accidentally affected
by dark-section text rules.
*/
.founder h2,
.founder h3,
.founder p{
opacity:1;
}
/*
Careers cards must remain individual cards.
*/
.jobs{
align-items:stretch;
}
.job{
min-width:0;
height:100%;
}
/* =========================================================
PRESTIGE METRO PROPERTIES
MASTER STYLESHEET — CORRECTED
========================================================= */
:root{
--green:#153f33;
--green-dark:#0b241d;
--ink:#182a24;
--muted:#637169;
--gold:#ad8c4d;
--gold-light:#d6ba7c;
--pale:#f3f5f0;
--line:#dfe5de;
--white:#fff;
/* Compatibility with the newer HTML */
--navy:#061b2d;
--navy2:#092943;
--navy3:#0e3b5b;
--cream:#f5f1e9;
--black:#000;
--text:#182a24;
--max:1440px;
}
*{
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
scroll-padding-top:112px;
}
body{
margin:0;
font:16px/1.65 'Segoe UI',Arial,sans-serif;
color:var(--ink);
background:#fff;
overflow-x:hidden;
}
body.intro-active{
overflow:hidden !important;
}
a{
color:inherit;
text-decoration:none;
}
button,
input,
select,
textarea{
font:inherit;
}
button,
a,
select,
textarea{
-webkit-tap-highlight-color:transparent;
}
button{
cursor:pointer;
}
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible{
outline:3px solid var(--gold);
outline-offset:4px;
}
/* =========================================================
GLOBAL CONTAINERS
========================================================= */
.wrap,
.container{
width:min(1320px,90%);
margin-left:auto;
margin-right:auto;
}
/* =========================================================
TOP REVIEW BAR
========================================================= */
.review{
background:var(--green-dark);
color:#f5ead4;
padding:7px 5%;
font-size:12px;
letter-spacing:1.3px;
display:flex;
justify-content:space-between;
position:relative;
z-index:500;
}
.review span{
letter-spacing:0;
color:#e0e9e3;
}
/* =========================================================
HEADER
========================================================= */
header,
.site-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:22px;
padding:16px 4%;
position:absolute !important;
top:0 !important;
left:0 !important;
right:0 !important;
width:100% !important;
z-index:50000 !important;
background:
linear-gradient(
to bottom,
rgba(5,24,19,.96) 0%,
rgba(5,24,19,.88) 60%,
rgba(5,24,19,.25) 100%
) !important;
border-bottom:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
color:#fff;
isolation:isolate;
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
}
header .brand,
header nav,
header > .button,
header .menu,
.site-header .brand,
.site-header nav,
.site-header .button,
.site-header .menu,
.site-header .site-nav{
position:relative !important;
z-index:50001 !important;
}
/* =========================================================
BRAND
========================================================= */
.brand{
display:flex;
align-items:center;
gap:11px;
flex-shrink:0;
color:#fff;
}
.brand img{
width:51px;
height:63px;
object-fit:contain;
mix-blend-mode:normal;
filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.brand span{
display:flex;
flex-direction:column;
line-height:1.25;
}
.brand strong{
font:27px Georgia,serif;
letter-spacing:3px;
color:#fff;
}
.brand b{
font-size:12px;
letter-spacing:1.8px;
color:#fff;
}
.brand small{
font-size:10px;
letter-spacing:1.45px;
margin-top:6px;
color:#d6ba7c;
}
/* =========================================================
NAVIGATION
========================================================= */
nav,
.site-nav{
display:flex;
align-items:center;
gap:19px;
font-size:14px;
position:relative;
z-index:50002;
}
nav a,
.site-nav a{
color:#fff !important;
position:relative;
padding:8px 0;
text-shadow:0 2px 8px rgba(0,0,0,.5);
transition:
color .25s ease,
opacity .25s ease;
}
nav a::after,
.site-nav a::after{
content:"";
position:absolute;
left:0;
bottom:1px;
width:0;
height:1px;
background:var(--gold-light);
transition:width .25s ease;
}
nav a:hover,
.site-nav a:hover{
color:var(--gold-light) !important;
}
nav a:hover::after,
.site-nav a:hover::after{
width:100%;
}
/* =========================================================
HEADER BUTTON
========================================================= */
.button,
.btn{
display:inline-flex;
justify-content:center;
align-items:center;
gap:14px;
padding:15px 24px;
background:var(--green);
border:1px solid var(--green);
border-radius:6px;
color:#fff !important;
font-weight:600;
font-size:14px;
transition:
background .25s ease,
transform .25s ease,
border-color .25s ease;
}
.button:hover,
.btn:hover{
background:#25634f;
border-color:#25634f;
transform:translateY(-2px);
}
.compact{
padding:12px 18px;
white-space:nowrap;
}
header > .button,
.site-header > .button,
.header-enquire{
position:relative !important;
z-index:50003 !important;
}
/* =========================================================
MOBILE MENU
========================================================= */
.menu{
display:none;
background:rgba(255,255,255,.1);
color:#fff;
border:1px solid rgba(255,255,255,.35);
padding:8px 14px;
border-radius:5px;
position:relative;
z-index:50005;
}
/* =========================================================
HERO
========================================================= */
.hero{
display:grid;
grid-template-columns:1.05fr 1fr;
gap:56px;
padding-top:145px;
padding-bottom:60px;
align-items:center;
position:relative !important;
z-index:2 !important;
}
.hero::before,
.hero::after{
pointer-events:none;
z-index:0 !important;
}
.hero-copy,
.hero-content{
position:relative;
z-index:3 !important;
}
.eyebrow{
font-size:12px;
font-weight:650;
letter-spacing:2px;
color:#947339;
margin:0 0 21px;
}
h1,
h2,
h3,
h4{
font-family:Georgia,'Times New Roman',serif;
font-weight:400;
line-height:1.12;
letter-spacing:-1.4px;
margin:0 0 22px;
}
h1{
font-size:clamp(42px,4.3vw,66px);
color:var(--green);
}
h2{
font-size:clamp(34px,3.6vw,51px);
color:var(--green);
}
h3{
font-size:29px;
letter-spacing:-.6px;
}
em{
font-weight:400;
color:#8b743f;
}
.sub{
font-size:16px;
color:var(--green);
font-weight:500;
max-width:470px;
}
.intro{
color:var(--muted);
max-width:460px;
margin:22px 0 29px;
}
.actions{
display:flex;
gap:12px;
flex-wrap:wrap;
}
.hero-bottom{
margin-top:46px;
border-top:1px solid var(--line);
padding-top:20px;
display:flex;
justify-content:space-between;
gap:10px;
font-size:12px;
color:var(--muted);
}
.hero-bottom span:first-child{
letter-spacing:1.4px;
}
/* =========================================================
PHOTOS
========================================================= */
.photo{
background-size:cover;
background-repeat:no-repeat;
background-position:center;
overflow:hidden;
}
.p0{
background-image:url('generated/plots.png');
background-position:center;
}
.p1{
background-image:url('generated/construction.png');
background-position:center;
}
.p2{
background-image:url('generated/luxury-grandeur.png');
background-position:center;
}
.p3{
background-image:url('generated/apartments.png');
background-position:center;
}
.p4{
background-image:url('generated/farmland.png');
background-position:center;
}
.hero-photo{
height:580px;
border-radius:13px;
position:relative;
z-index:2;
}
.image-label{
position:absolute;
top:24px;
left:24px;
background:#ffffffdf;
padding:8px 13px;
font-size:11px;
letter-spacing:1.5px;
border-radius:3px;
}
.photo-card{
position:absolute;
bottom:24px;
left:24px;
right:24px;
background:#fffffff2;
padding:24px 29px;
border-radius:7px;
backdrop-filter:blur(8px);
}
.photo-card small{
font-size:11px;
letter-spacing:1.7px;
color:var(--muted);
}
.photo-card strong{
font:34px/1.12 Georgia;
display:block;
margin:10px 0;
}
.photo-card a{
display:flex;
justify-content:space-between;
font-size:14px;
border-top:1px solid var(--line);
padding-top:13px;
}
/* =========================================================
SERVICE STRIP
========================================================= */
.service-strip{
background:var(--green);
color:#fff;
padding:24px 5%;
display:flex;
justify-content:space-around;
gap:25px;
font-size:14px;
position:relative;
z-index:3;
}
/* =========================================================
SECTIONS
========================================================= */
.section{
padding-top:90px;
padding-bottom:90px;
position:relative;
z-index:2;
}
.about{
display:grid;
grid-template-columns:1fr 1.15fr;
gap:80px;
}
.about p:not(.eyebrow),
.split p:not(.eyebrow){
color:var(--muted);
}
.lead{
font-size:22px;
color:var(--green) !important;
margin-top:0;
}
.about-line{
display:flex;
gap:38px;
border-top:1px solid var(--line);
padding-top:24px;
margin-top:30px;
}
.about-line span{
display:flex;
flex-direction:column;
font-size:13px;
color:var(--muted);
}
.about-line strong{
font:30px Georgia;
color:var(--green);
margin-bottom:10px;
}
.pale{
background:var(--pale);
}
/* =========================================================
SECTION HEAD
========================================================= */
.section-head{
display:flex;
justify-content:space-between;
align-items:end;
gap:25px;
margin-bottom:28px;
}
.section-head p:not(.eyebrow){
color:var(--muted);
}
/* =========================================================
FILTERS
========================================================= */
.filters,
.interior-tabs{
display:flex;
gap:12px;
margin:20px 0 28px;
flex-wrap:wrap;
}
.filters button,
.interior-tabs button{
background:transparent;
border:1px solid #ccd5ca;
border-radius:30px;
padding:9px 24px;
color:var(--green);
font-size:14px;
transition:.2s ease;
}
.filters button:hover,
.interior-tabs button:hover{
border-color:var(--gold);
}
.filters .selected,
.interior-tabs .selected{
background:var(--green);
color:#fff;
border-color:var(--green);
}
/* =========================================================
PROPERTY CARDS
========================================================= */
.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
}
.project{
background:#fff;
border:1px solid var(--line);
border-radius:10px;
overflow:hidden;
transition:
transform .25s,
box-shadow .25s;
}
.project:hover{
transform:translateY(-5px);
box-shadow:0 15px 32px #153f3310;
}
.project .photo{
height:258px;
position:relative;
}
.badge{
position:absolute;
top:15px;
left:15px;
font-size:10px;
letter-spacing:1px;
background:#fffc;
padding:5px 10px;
border-radius:3px;
}
.card-body{
padding:26px;
}
.card-body .eyebrow{
margin-bottom:12px;
}
.card-body h3{
font-size:26px;
}
.card-body p{
font-size:14px;
color:var(--muted);
}
dl{
font-size:13px;
border-top:1px solid var(--line);
padding-top:13px;
}
dl div{
display:flex;
justify-content:space-between;
gap:8px;
margin:7px 0;
}
dt{
color:var(--muted);
}
dd{
margin:0;
}
.text-button{
background:none;
border:0;
border-top:1px solid var(--line);
padding:15px 0 0;
display:flex;
justify-content:space-between;
gap:15px;
width:100%;
text-align:left;
font-size:14px;
font-weight:600;
color:var(--green);
}
/* =========================================================
SPLIT SECTIONS
========================================================= */
.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}
.feature-photo{
height:440px;
border-radius:9px;
}
.checks{
list-style:none;
padding:0;
margin:26px 0;
display:grid;
gap:11px;
}
.checks li:before{
content:'✓';
color:var(--gold);
margin-right:14px;
}
/* =========================================================
DARK SECTIONS
========================================================= */
.dark{
background:var(--green);
color:#fff;
}
.dark h2{
color:#fff;
}
.dark em{
color:#d6ba7c;
}
.dark .eyebrow{
color:#d6ba7c;
}
.dark .split p:not(.eyebrow){
color:#d0dcd5;
}
.gold{
background:#d9c18c;
border-color:#d9c18c;
color:var(--ink);
margin-top:18px;
}
/* =========================================================
CONSTRUCTION JOURNEY
========================================================= */
.journey{
display:grid;
grid-template-columns:repeat(8,1fr);
gap:12px;
margin-top:54px;
border-top:1px solid #ffffff30;
padding-top:30px;
}
.journey div{
font-size:13px;
}
.journey b{
display:block;
font:25px Georgia;
color:#d6ba7c;
margin-bottom:14px;
}
/* =========================================================
INTERIORS
========================================================= */
.interior-layout{
display:grid;
grid-template-columns:1.5fr 1fr;
min-height:420px;
border-radius:10px;
overflow:hidden;
}
.interior-layout .photo{
min-height:420px;
}
.interior-copy{
padding:44px;
background:var(--pale);
}
.interior-copy p{
color:var(--muted);
}
.interior-copy small{
display:block;
margin-top:30px;
color:var(--muted);
font-size:12px;
}
/* =========================================================
VALUES
========================================================= */
.values{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:45px;
margin-top:45px;
}
.values>div{
border-top:1px solid #cbd7ca;
padding-top:22px;
}
.values span{
color:var(--gold);
font-size:14px;
}
.values h3{
margin:18px 0;
font-size:26px;
}
.values p{
color:var(--muted);
}
/* =========================================================
CAREERS
========================================================= */
.careers{
padding:90px 0;
background:#fff;
position:relative;
z-index:2;
}
.jobs{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
}
.job{
background:#fff;
border:1px solid var(--line);
border-radius:10px;
overflow:hidden;
transition:
transform .25s ease,
box-shadow .25s ease;
}
.job:hover{
transform:translateY(-5px);
box-shadow:0 15px 32px rgba(21,63,51,.10);
}
.job-image{
height:280px;
position:relative;
overflow:hidden;
background:#0b241d;
}
.job-image img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transition:transform .5s ease;
}
.job:hover .job-image img{
transform:scale(1.04);
}
/* Individual job images */
.job-image.job-bde{
background:
linear-gradient(
0deg,
rgba(5,24,38,.55),
transparent
),
url("generated/business.png") center/cover no-repeat;
}
.job-image.job-leader{
background:
linear-gradient(
0deg,
rgba(5,24,38,.55),
transparent
),
url("generated/leader.png") center/cover no-repeat;
}
.job-image.job-sales{
background:
linear-gradient(
0deg,
rgba(5,24,38,.55),
transparent
),
url("generated/sales.png") center/cover no-repeat;
}
/*
If the HTML contains ![]()
inside .job-image,
the actual image is used and the background remains
only as a fallback.
*/
.job-body{
padding:26px;
}
.job-body .eyebrow{
margin-bottom:12px;
}
.job-body h3{
margin-bottom:12px;
font-size:25px;
color:var(--green);
}
.job-body p{
color:var(--muted);
font-size:14px;
margin:0 0 20px;
}
.job-body .button,
.job-body .btn{
width:100%;
}
/* =========================================================
FOUNDER SECTION — FIXED
========================================================= */
.founder{
padding:120px 0;
background:#f4f0e8;
position:relative;
z-index:2;
color:#222;
}
.founder-grid{
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:80px;
align-items:center;
}
.founder-portrait{
min-height:500px;
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(
circle,
#164566,
#041522
);
overflow:hidden;
border-radius:8px;
}
.founder-portrait img{
width:220px;
height:220px;
object-fit:contain;
filter:drop-shadow(
0 20px 40px rgba(0,0,0,.4)
);
}
/* Founder content */
.founder-content{
color:#222 !important;
}
/*
IMPORTANT:
The HTML currently uses .about-lead and .about-copy
inside the Founder section.
These selectors override the old About-section colors
so the Founder text is visible on the cream background.
*/
.founder-content .about-lead{
margin:0 0 25px;
color:#061b2d !important;
font-size:22px;
font-weight:600;
line-height:1.5;
font-family:Georgia,'Times New Roman',serif;
}
.founder-content .about-copy{
margin:0 0 18px;
color:#333 !important;
font-size:16px;
line-height:1.9;
}
/*
Compatibility if the HTML is changed later to
.founder-lead / .founder-copy.
*/
.founder-lead{
margin:0 0 25px;
color:#061b2d !important;
font-size:22px;
font-weight:600;
line-height:1.5;
}
.founder-copy{
margin:0 0 18px;
color:#333 !important;
font-size:16px;
line-height:1.9;
}
.founder-content .eyebrow{
color:#b08a45 !important;
}
.founder-name{
margin:0 0 25px;
color:#061b2d !important;
font-size:clamp(40px,5vw,72px);
line-height:1.05;
}
.founder-name em{
color:#b08a45 !important;
font-style:italic;
}
.founder-signature{
margin-top:35px;
padding-top:25px;
border-top:1px solid #d6d1c8;
}
.founder-signature strong{
display:block;
color:#061b2d !important;
font-family:"Cinzel",Georgia,serif;
font-size:18px;
font-weight:500;
}
.founder-signature span{
display:block;
margin-top:6px;
color:#b08a45 !important;
font-size:9px;
font-weight:700;
letter-spacing:.18em;
text-transform:uppercase;
}
/*
Your current HTML has inline styles for the signature,
so this also handles that version safely.
*/
.founder-content strong{
color:#061b2d;
}
.founder-content span{
color:#b08a45;
}
/* =========================================================
CONTACT
========================================================= */
.contact{
display:grid;
grid-template-columns:1.15fr 1fr;
gap:90px;
}
.contact-links>div,
.contact-links>a{
display:block;
padding:17px 0;
border-bottom:1px solid var(--line);
overflow-wrap:anywhere;
}
.contact-links small{
display:block;
font-size:11px;
letter-spacing:1.5px;
color:var(--muted);
margin-bottom:5px;
}
.contact .text-button{
border:0;
}
.consult{
background:var(--pale);
padding:40px;
border-radius:10px;
}
.consult h3{
font-size:39px;
color:var(--green);
}
label{
display:block;
font-size:14px;
margin-top:18px;
margin-bottom:8px;
}
select,
textarea,
input{
width:100%;
border:1px solid #cad4c8;
border-radius:5px;
padding:12px;
background:#fff;
color:var(--ink);
}
textarea{
resize:vertical;
}
.consult .button,
.consult .btn{
width:100%;
margin-top:20px;
}
/* =========================================================
FOOTER
========================================================= */
footer{
background:#eef1eb;
padding:55px 0 20px;
position:relative;
z-index:2;
}
.footer-grid{
display:grid;
grid-template-columns:1.3fr .6fr .7fr 1fr;
gap:38px;
}
.footer-grid h4{
font-size:12px;
letter-spacing:1.5px;
margin:0 0 22px;
color:var(--green);
}
.footer-grid>div>a:not(.brand){
display:block;
margin:8px 0;
font-size:14px;
}
.footer-grid p{
font-size:14px;
color:var(--muted);
}
.email{
overflow-wrap:anywhere;
}
.social{
display:flex;
gap:17px;
flex-wrap:wrap;
}
.social a{
display:flex;
align-items:center;
gap:7px;
font-size:12px;
}
.social svg{
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:1.6;
}
.in{
font:bold 18px Arial;
}
.copyright{
border-top:1px solid #d0d9cd;
margin-top:40px;
padding-top:18px;
display:flex;
justify-content:space-between;
font-size:12px;
color:var(--muted);
}
/* =========================================================
DIALOG
========================================================= */
dialog{
border:0;
border-radius:12px;
max-width:850px;
width:92%;
padding:0;
max-height:90vh;
color:var(--ink);
}
dialog::backdrop{
background:#122b22b8;
backdrop-filter:blur(4px);
}
dialog .photo{
height:270px;
}
.close{
position:absolute;
right:15px;
top:15px;
border:0;
border-radius:50%;
width:40px;
height:40px;
background:#fff;
font-size:27px;
}
.dialog-content{
padding:34px;
}
.detail-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
background:var(--pale);
padding:20px;
}
.detail-grid h4,
.detail-grid p{
margin:0;
}
.detail-grid h4{
font-size:13px;
}
.detail-grid p{
font-size:14px;
color:var(--muted);
}
[hidden]{
display:none !important;
}
/* =========================================================
INTRO
========================================================= */
#company-intro{
position:fixed !important;
inset:0 !important;
width:100vw !important;
height:100vh !important;
z-index:100000 !important;
overflow:hidden !important;
isolation:isolate;
will-change:opacity,transform;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transform:translate3d(0,0,0);
display:flex !important;
opacity:1;
visibility:visible;
pointer-events:auto;
}
#company-intro.hide{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
transform:scale(1.04) !important;
}
/* =========================================================
INTRO MORPH
========================================================= */
#company-intro.morphing .logo-sculpture{
animation:
seamless-logo-morph
2.15s
cubic-bezier(.72,0,.18,1)
forwards !important;
will-change:transform,opacity;
backface-visibility:hidden;
}
@keyframes seamless-logo-morph{
from{
opacity:1;
transform:
translate3d(0,0,0)
scale(1);
}
to{
opacity:0;
transform:
translate3d(0,0,0)
scale(14);
}
}
#company-intro.morphing .logo-face{
animation:
seamless-face-morph
2.15s
cubic-bezier(.72,0,.18,1)
forwards !important;
will-change:transform,opacity,filter;
}
@keyframes seamless-face-morph{
from{
opacity:1;
filter:
url(#gold-cutout)
brightness(1.08)
drop-shadow(0 0 0 transparent);
}
45%{
opacity:1;
filter:
url(#gold-cutout)
brightness(1.25)
drop-shadow(
0 0 18px
rgba(214,176,91,.45)
);
}
75%{
opacity:.9;
filter:
url(#gold-cutout)
brightness(1.55)
drop-shadow(
0 0 45px
rgba(214,176,91,.7)
);
}
to{
opacity:0;
filter:
url(#gold-cutout)
brightness(1.8)
drop-shadow(
0 0 80px
rgba(214,176,91,.9)
);
}
}
#company-intro.morphing .logo-depth{
animation:
seamless-depth-morph
2.15s
cubic-bezier(.72,0,.18,1)
forwards !important;
will-change:transform,opacity;
}
@keyframes seamless-depth-morph{
from{
opacity:1;
transform:
translateZ(-3px)
scale(1);
}
to{
opacity:0;
transform:
translateZ(40px)
scale(14);
}
}
#company-intro.morphing .logo-glint{
animation:
seamless-glint-morph
2.15s
cubic-bezier(.72,0,.18,1)
forwards !important;
will-change:transform,opacity;
}
@keyframes seamless-glint-morph{
from{
opacity:.35;
transform:
translate3d(0,0,2px)
scale(1);
}
45%{
opacity:.75;
}
70%{
opacity:.9;
}
to{
opacity:0;
transform:
translate3d(0,0,50px)
scale(14);
}
}
#company-intro.morphing h1,
#company-intro.morphing .intro-tagline,
#company-intro.morphing .intro-kicker{
animation:
seamless-text-morph
1.35s
cubic-bezier(.65,0,.2,1)
forwards !important;
will-change:opacity,transform,filter;
}
@keyframes seamless-text-morph{
from{
opacity:1;
transform:
translate3d(0,0,0)
scale(1);
filter:blur(0);
}
to{
opacity:0;
transform:
translate3d(0,0,0)
scale(.88);
filter:blur(8px);
}
}
/* =========================================================
INTRO WAVE
========================================================= */
#company-intro::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:80px;
height:80px;
border-radius:50%;
pointer-events:none;
will-change:transform,opacity;
transform:
translate3d(-50%,-50%,0)
scale(0);
}
#company-intro.morphing::after{
animation:
seamless-wave
2.15s
cubic-bezier(.72,0,.18,1)
forwards !important;
}
@keyframes seamless-wave{
from{
opacity:0;
transform:
translate3d(-50%,-50%,0)
scale(0);
}
25%{
opacity:.12;
}
55%{
opacity:.28;
}
75%{
opacity:.18;
}
to{
opacity:0;
transform:
translate3d(-50%,-50%,0)
scale(115);
}
}
/* =========================================================
HOME REVEAL
========================================================= */
#home{
position:relative;
z-index:2;
visibility:visible;
}
#home.home-ready{
animation:
seamless-home-reveal
2.05s
cubic-bezier(.18,.75,.2,1)
both !important;
will-change:
opacity,
transform,
filter;
}
@keyframes seamless-home-reveal{
from{
opacity:0;
transform:
translate3d(0,0,0)
scale(1.035);
filter:blur(10px);
}
45%{
opacity:.35;
filter:blur(5px);
}
75%{
opacity:.78;
transform:
translate3d(0,0,0)
scale(1.008);
filter:blur(1.5px);
}
to{
opacity:1;
transform:
translate3d(0,0,0)
scale(1);
filter:blur(0);
}
}
/* =========================================================
PRESTIGE PORTAL
========================================================= */
.prestige-portal{
position:fixed;
z-index:100001;
pointer-events:none;
width:max-content;
height:max-content;
margin:0;
padding:0;
display:flex;
align-items:center;
justify-content:center;
transform-origin:50% 50%;
will-change:transform;
white-space:nowrap;
overflow:visible;
}
.prestige-portal-text{
display:block;
margin:0;
padding:0;
font-family:
Cinzel,
Georgia,
serif;
font-size:
clamp(3rem,8vw,8rem);
font-weight:700;
line-height:1;
letter-spacing:.08em;
white-space:nowrap;
color:#d4af37;
background:
linear-gradient(
120deg,
#8b6914 0%,
#d4af37 20%,
#fff4b0 40%,
#d4af37 58%,
#a67c00 78%,
#f4d77d 100%
);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:
0 0 8px rgba(212,175,55,.35),
0 0 25px rgba(212,175,55,.18);
transform-origin:50% 50%;
}
/* =========================================================
OLD MORPH ANIMATION RESET
========================================================= */
#company-intro.morphing .logo-sculpture,
#company-intro.morphing .logo-face,
#company-intro.morphing .logo-glint{
animation:none !important;
transition:none !important;
}
/* =========================================================
HARDWARE ACCELERATION
========================================================= */
#company-intro,
#company-intro .logo-sculpture,
#company-intro .logo-face,
#company-intro .logo-depth,
#company-intro .logo-glint,
#company-intro::after,
#home{
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
/* =========================================================
FLOATING LOGO
========================================================= */
.floating-logo{
position:fixed !important;
top:20px !important;
right:28px !important;
width:105px !important;
height:105px !important;
z-index:60000 !important;
pointer-events:none !important;
opacity:0 !important;
visibility:hidden !important;
transform:
translateY(-15px)
scale(.92) !important;
transition:
opacity .6s ease,
transform .6s ease,
visibility .6s ease !important;
}
.floating-logo.visible{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
transform:
translateY(0)
scale(1) !important;
}
body.page-scrolled .floating-logo{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
transform:
translateY(0)
scale(1) !important;
}
.site-header.scrolled{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
transform:translateY(-20px) !important;
}
/* =========================================================
HEADER SAFETY
========================================================= */
body > header,
body > .site-header,
header{
position:absolute !important;
top:0 !important;
left:0 !important;
right:0 !important;
width:100% !important;
z-index:50000 !important;
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
transform:none !important;
isolation:isolate !important;
}
body > header .brand,
body > header nav,
body > header .button,
body > header .menu,
header .brand,
header nav,
header .button,
header .menu{
position:relative !important;
z-index:50001 !important;
}
body > header nav a,
header nav a{
position:relative !important;
z-index:50002 !important;
color:#fff !important;
visibility:visible !important;
opacity:1 !important;
}
body > #home,
#home,
.hero{
position:relative;
z-index:2;
}
#home::before,
#home::after,
.hero::before,
.hero::after{
pointer-events:none !important;
}
#company-intro{
z-index:100000 !important;
}
.prestige-portal{
z-index:100001 !important;
}
/* =========================================================
LARGE SCREENS
========================================================= */
@media(min-width:1600px){
.hero-photo{
height:630px;
}
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1200px){
header,
.site-header{
gap:12px;
}
nav,
.site-nav{
gap:11px;
font-size:12px;
}
header>.button,
.site-header>.button{
display:none;
}
.hero{
gap:32px;
}
.hero-photo{
height:540px;
}
.card-body{
padding:20px;
}
.contact{
gap:45px;
}
.footer-grid{
gap:25px;
}
}
/* =========================================================
DESKTOP NAVIGATION
========================================================= */
@media(min-width:1101px){
.site-nav{
display:flex !important;
align-items:center !important;
gap:24px !important;
margin-right:130px !important;
}
.site-nav a{
white-space:nowrap !important;
}
}
/* =========================================================
TABLET NAVIGATION
========================================================= */
@media(max-width:1100px){
.site-nav{
display:none !important;
}
.header-enquire{
margin-right:120px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:850px){
header,
.site-header{
padding:16px 5% !important;
}
.menu{
display:block;
}
nav{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
background:
rgba(8,30,24,.98);
padding:20px 5%;
grid-template-columns:1fr 1fr;
font-size:16px;
box-shadow:
0 9px 25px rgba(0,0,0,.25);
border-top:1px solid rgba(255,255,255,.1);
}
nav.open{
display:grid;
}
nav a{
padding:10px 0;
}
.hero,
.about,
.split,
.contact{
grid-template-columns:1fr;
gap:35px;
}
.hero{
padding-top:125px;
}
.hero-photo{
height:440px;
}
.hero-copy{
max-width:630px;
}
.hero-bottom{
margin-top:25px;
}
.service-strip{
flex-wrap:wrap;
justify-content:flex-start;
font-size:12px;
gap:12px 30px;
}
.cards{
grid-template-columns:1fr 1fr;
}
.project:last-child{
grid-column:1/-1;
max-width:100%;
}
.section{
padding-top:60px;
padding-bottom:60px;
}
.careers{
padding:60px 0;
}
.jobs{
grid-template-columns:1fr 1fr;
}
.journey{
grid-template-columns:repeat(4,1fr);
gap:25px;
}
.interior-layout{
grid-template-columns:1fr;
}
.interior-layout .photo{
min-height:400px;
}
.values{
gap:22px;
}
.footer-grid{
grid-template-columns:1fr 1fr;
}
.review span{
max-width:65%;
text-align:right;
}
.section-head{
align-items:start;
}
.founder{
padding:80px 0;
}
.founder-grid{
grid-template-columns:1fr;
gap:45px;
}
.founder-portrait{
min-height:380px;
}
.founder-name{
font-size:48px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:750px){
.site-header{
padding:18px 5% !important;
}
.floating-logo{
width:78px !important;
height:78px !important;
top:14px !important;
right:14px !important;
}
.floating-logo img{
width:42px !important;
height:42px !important;
}
.floating-logo span{
font-size:5px !important;
}
}
@media(max-width:560px){
.review{
font-size:10px;
}
.brand strong{
font-size:23px;
}
.brand img{
width:43px;
height:54px;
}
.brand b{
font-size:10px;
}
.brand small{
font-size:9px;
}
.hero{
padding-top:120px;
}
.hero-photo{
height:390px;
}
h1{
font-size:43px;
}
.cards,
.values,
.jobs{
grid-template-columns:1fr;
}
.section-head{
display:block;
}
.section-head .button,
.section-head .btn{
margin-top:20px;
}
.hero-bottom{
font-size:10px;
}
.about-line{
gap:24px;
}
.about-line strong{
font-size:24px;
}
.photo-card strong{
font-size:29px;
}
.feature-photo{
height:320px;
}
.interior-copy,
.consult{
padding:26px;
}
.interior-layout .photo{
min-height:300px;
}
.footer-grid{
grid-template-columns:1fr;
}
.copyright{
display:block;
}
.copyright span{
display:block;
margin-top:10px;
}
.journey{
grid-template-columns:repeat(2,1fr);
}
.dialog-content{
padding:24px;
}
.detail-grid{
grid-template-columns:1fr;
}
.filters{
gap:8px;
}
.filters button{
padding:8px 17px;
}
.actions .button,
.actions .btn{
font-size:13px;
padding:13px 17px;
}
.job-image{
height:250px;
}
.founder-name{
font-size:42px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto;
}
*,
*::before,
*::after{
transition:none !important;
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
}
#company-intro.morphing .logo-sculpture,
#company-intro.morphing .logo-face,
#company-intro.morphing .logo-depth,
#company-intro.morphing .logo-glint,
#company-intro.morphing h1,
#company-intro.morphing .intro-tagline,
#company-intro.morphing .intro-kicker,
#company-intro.morphing::after,
#home.home-ready{
animation:none !important;
}
}
/* =========================================================
FINAL GLOBAL SAFETY
========================================================= */
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
}
/*
Prevent accidental horizontal overflow from grids.
*/
.hero,
.about,
.split,
.contact,
.cards,
.jobs,
.founder-grid,
.footer-grid,
.interior-layout{
min-width:0;
}
img{
max-width:100%;
}
/*
Founder must remain visible even if an older
reveal/animation class gets added accidentally.
*/
.founder,
.founder-content,
.founder-grid{
visibility:visible;
}
/*
Ensure Founder section is not accidentally affected
by dark-section text rules.
*/
.founder h2,
.founder h3,
.founder p{
opacity:1;
}
/*
Careers cards must remain individual cards.
*/
.jobs{
align-items:stretch;
}
.job{
min-width:0;
height:100%;
}
/* =========================================================
END OF MASTER STYLESHEET
========================================================= */
/* =========================================================
END OF MASTER STYLESHEET
========================================================= */
/* =========================================================
PRESTIGE METRO PROPERTIES
COMPACT LAYOUT OVERRIDES
Add at the very bottom of style.css
========================================================= */
:root {
--max: 1200px;
}
/* Overall typography */
body {
font-size: 15px;
line-height: 1.6;
}
/* Content width */
.wrap,
.container {
width: min(1200px, 90%);
}
/* Header and branding */
.brand img {
width: 45px;
height: 55px;
}
.brand strong {
font-size: 24px;
}
.brand b {
font-size: 11px;
}
.brand small {
font-size: 9px;
}
nav,
.site-nav {
font-size: 13px;
gap: 16px;
}
/* Buttons */
.button,
.btn {
padding: 12px 20px;
font-size: 13px;
gap: 10px;
}
/* Hero section */
.hero {
gap: 40px;
padding-top: 125px;
padding-bottom: 45px;
}
h1 {
font-size: clamp(38px, 4vw, 58px);
}
h2 {
font-size: clamp(30px, 3.3vw, 44px);
}
h3 {
font-size: 26px;
}
.eyebrow {
font-size: 11px;
margin-bottom: 16px;
}
.sub {
font-size: 15px;
}
.intro {
font-size: 14px;
margin: 18px 0 24px;
}
.hero-photo {
height: 500px;
}
.hero-bottom {
margin-top: 32px;
padding-top: 16px;
}
/* Image cards */
.photo-card {
padding: 20px 23px;
}
.photo-card strong {
font-size: 30px;
}
.project .photo {
height: 220px;
}
.card-body {
padding: 22px;
}
.card-body h3 {
font-size: 23px;
}
/* Sections */
.section {
padding-top: 70px;
padding-bottom: 70px;
}
.about {
gap: 55px;
}
.lead {
font-size: 19px;
}
.section-head {
margin-bottom: 24px;
}
.cards,
.jobs {
gap: 22px;
}
/* Split sections */
.split {
gap: 50px;
}
.feature-photo {
height: 380px;
}
/* Construction journey */
.journey {
margin-top: 40px;
gap: 10px;
}
.journey b {
font-size: 22px;
}
/* Interior section */
.interior-layout {
min-height: 360px;
}
.interior-layout .photo {
min-height: 360px;
}
.interior-copy {
padding: 34px;
}
/* Values */
.values {
gap: 30px;
margin-top: 35px;
}
/* Careers */
.careers {
padding: 70px 0;
}
.job-image {
height: 235px;
}
.job-body {
padding: 22px;
}
.job-body h3 {
font-size: 22px;
}
/* Founder section */
.founder {
padding: 90px 0;
}
.founder-grid {
gap: 60px;
}
.founder-portrait {
min-height: 420px;
}
/* Contact */
.contact {
gap: 60px;
}
.consult {
padding: 32px;
}
.consult h3 {
font-size: 33px;
}
/* Footer */
footer {
padding-top: 42px;
}
.footer-grid {
gap: 28px;
}
/* Dialog */
.dialog-content {
padding: 28px;
}
/* Keep the existing tablet and mobile layouts */
@media (max-width: 850px) {
.hero {
padding-top: 115px;
padding-bottom: 35px;
}
.hero-photo {
height: 400px;
}
.section {
padding-top: 55px;
padding-bottom: 55px;
}
.founder {
padding: 65px 0;
}
}
@media (max-width: 560px) {
h1 {
font-size: 38px;
}
h2 {
font-size: 32px;
}
.hero-photo {
height: 340px;
}
.project .photo {
height: 220px;
}
.photo-card {
left: 16px;
right: 16px;
bottom: 16px;
padding: 17px;
}
.photo-card strong {
font-size: 26px;
}
.card-body,
.job-body {
padding: 20px;
}
.founder-name {
font-size: 38px;
}
.consult {
padding: 22px;
}
}
/* PROJECT CARDS */
.location-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin-top: 28px;
}
.location-card {
display: block;
width: 100%;
padding: 0;
overflow: hidden;
text-align: left;
font: inherit;
color: inherit;
background: var(--card-bg, #fff);
border: 1px solid rgba(0, 0, 0, 0.10);
border-radius: 14px;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.location-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.location-card-image {
display: block;
width: 100%;
height: 250px;
object-fit: cover;
}
.location-card-text {
display: flex;
flex-direction: column;
gap: 9px;
padding: 20px;
}
.location-card-text small {
font-size: 11px;
letter-spacing: 1px;
opacity: 0.75;
}
.location-card-text strong {
font-size: 21px;
line-height: 1.4;
}
.project-click-hint {
font-size: 13px;
margin-top: 4px;
color: var(--accent, #98713b);
}
/* PROJECT DETAILS */
.project-detail-panel {
margin-top: 28px;
padding: 24px;
border: 1px solid rgba(0, 0, 0, 0.10);
border-radius: 14px;
background: var(--card-bg, #fff);
}
.project-detail-panel[hidden],
#project-list[hidden] {
display: none !important;
}
.project-back-button {
display: inline-block;
margin-bottom: 22px;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 7px;
background: transparent;
color: inherit;
font: inherit;
cursor: pointer;
}
.project-detail-image {
display: block;
width: 100%;
max-height: 430px;
object-fit: cover;
border-radius: 12px;
margin-bottom: 24px;
}
.project-detail-panel h2 {
margin: 8px 0;
font-size: clamp(25px, 4vw, 36px);
}
.project-detail-panel h3 {
margin-top: 28px;
margin-bottom: 12px;
font-size: 19px;
}
.project-tagline {
font-weight: 600;
margin-bottom: 18px;
}
.project-highlight-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 24px 0;
}
.project-highlight {
display: flex;
flex-direction: column;
gap: 8px;
padding: 17px;
border-radius: 10px;
background: rgba(128, 128, 128, 0.09);
}
.project-highlight small {
font-size: 12px;
opacity: 0.8;
}
.project-highlight strong {
font-size: 16px;
}
.project-feature-list {
padding-left: 22px;
line-height: 1.9;
}
.project-offer {
margin-top: 28px;
padding: 22px;
border-radius: 12px;
background: rgba(170, 135, 74, 0.12);
}
.project-offer h3 {
margin-top: 8px;
}
.project-contact {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(128, 128, 128, 0.25);
}
.project-contact-button {
display: inline-block;
margin-top: 10px;
padding: 12px 18px;
border-radius: 7px;
text-decoration: none;
background: var(--accent, #98713b);
color: #fff;
}
.project-disclaimer {
margin-top: 20px;
font-size: 12px;
line-height: 1.6;
opacity: 0.75;
}
@media (max-width: 650px) {
.location-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.location-card-image {
height: 210px;
}
.location-card-text {
padding: 16px;
}
.project-detail-panel {
padding: 16px;
}
.project-highlight-grid {
grid-template-columns: 1fr;
}
}
#project-list[hidden],
.project-detail-panel[hidden] {
display: none !important;
}
/* =========================================
PROJECT DETAILS POPUP
========================================= */
.project-detail-panel:not([hidden]) {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: min(900px, 92vw) !important;
max-width: 92vw !important;
height: auto !important;
max-height: 85vh !important;
margin: 0 !important;
padding: 30px !important;
overflow-y: auto !important;
overscroll-behavior: contain;
background: #fff !important;
color: #222 !important;
border-radius: 16px !important;
box-shadow: 0 20px 70px rgba(0, 0, 0, 0.3) !important;
z-index: 10001 !important;
display: block !important;
animation: projectPopupIn 0.25s ease-out;
}
/* Dark overlay behind the popup */
body.project-popup-open::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 10000;
}
/* Keep the background from scrolling */
body.project-popup-open {
overflow: hidden !important;
}
/* Project image inside popup */
.project-detail-panel .project-detail-image {
width: 100%;
max-height: 260px;
object-fit: cover;
border-radius: 10px;
}
/* Keep the back button visible near the top */
.project-detail-panel .project-back-button {
position: sticky;
top: -30px;
z-index: 2;
margin-bottom: 18px;
}
/* Popup entrance animation */
@keyframes projectPopupIn {
from {
opacity: 0;
transform: translate(-50%, -47%) !important;
}
to {
opacity: 1;
transform: translate(-50%, -50%) !important;
}
}
/* Mobile popup */
@media (max-width: 600px) {
.project-detail-panel:not([hidden]) {
width: 94vw !important;
max-width: 94vw !important;
max-height: 88vh !important;
padding: 18px !important;
border-radius: 12px !important;
}
.project-detail-panel .project-detail-image {
max-height: 190px;
}
.project-detail-panel h2 {
font-size: 23px;
}
}
/* Never show hidden project panels */
.project-detail-panel[hidden],
#project-list[hidden] {
display: none !important;
}
/* Hide individual plot projects initially */
.plot-project[hidden] {
display: none !important;
}
/* MOBILE RESPONSIVE FIX */
@media screen and (max-width: 768px) {
/* Prevent the page from becoming wider than the phone */
html,
body {
max-width: 100%;
overflow-x: hidden;
}
/* Keep images inside their containers */
img {
max-width: 100%;
height: auto;
}
/* Reduce large headings */
h1 {
font-size: clamp(24px, 6vw, 34px);
line-height: 1.2;
}
h2 {
font-size: clamp(21px, 5vw, 28px);
line-height: 1.3;
}
h3 {
font-size: clamp(17px, 4vw, 22px);
line-height: 1.3;
}
/* Make paragraphs and general text comfortable to read */
p {
font-size: 14px;
line-height: 1.6;
}
/* Prevent oversized property cards */
.property-card {
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.property-card img {
width: 100%;
max-width: 100%;
height: auto;
object-fit: cover;
}
/* Keep sections from having excessive spacing */
section {
padding-left: 16px;
padding-right: 16px;
}
/* Make form controls fit the phone */
input,
select,
textarea,
button {
max-width: 100%;
box-sizing: border-box;
}
/* Prevent large fixed-width elements */
.container,
.wrapper,
.content {
max-width: 100%;
box-sizing: border-box;
}
}
/* Smaller phones */
@media screen and (max-width: 480px) {
h1 {
font-size: 25px;
}
h2 {
font-size: 21px;
}
p {
font-size: 13px;
}
section {
padding-left: 12px;
padding-right: 12px;
}
}