/* ============================================================================
MARILOU GANAPIN — SITEWIDE DESIGN LAYER ("Garden")
----------------------------------------------------------------------------
A light garden skin for a resort-inspired DMCI site, from the two palettes
the client chose — Botanical Whisper (#2B422A #4F6D4F #7A9F76 #A9CC9F
#CEEACE) and Olive Grove (#3F432F #656C4A #8D9972 #B6BEA0 #DBE2C5):
olive-cream paper, forest-green ink, and the botanical greens as the only
chromatic move. The ornament is botanical — a leaf is the bullet and the
mark; photographs sit in soft rounded frames; the portrait stands in an arch.
Load once per page:
========================================================================== */
:root{
/* ---- paper: four steps of olive cream, lightest first ------------------- */
--mg-ivory:#f5f7ef; --mg-cream:#edf1e3; --mg-linen:#e3e9d4; --mg-sand:#dbe2c5;
/* ---- structure: hairlines, muted type ---------------------------------- */
--mg-clay:#c9d1b4; --mg-taupe:#b6bea0; --mg-umber:#5b6246;
/* ---- the greens: olive and botanical ------------------------------------ */
--mg-bronze:#656c4a; --mg-bronze-d:#476647; --mg-gold:#7a9f76; --mg-gold-lt:#ceeace;
--mg-mint:#a9cc9f; --mg-moss:#8d9972;
/* ---- ink: forest greens ------------------------------------------------ */
--mg-cocoa:#3f432f; --mg-ink:#2b422a; --mg-espresso:#1f301f;
/* ---- geometry ---------------------------------------------------------- */
--mg-cut:12px; --mg-cut-sm:8px; --mg-hair:1px;
--mg-radius:10px; --mg-radius-sm:6px;
--mg-shadow:0 1px 2px rgba(31,48,31,.05),0 10px 30px -14px rgba(31,48,31,.20);
--mg-shadow-lift:0 2px 6px rgba(31,48,31,.07),0 22px 48px -18px rgba(31,48,31,.28);
/* ---- type -------------------------------------------------------------- */
--mg-display:'Fraunces','Hoefler Text',Georgia,serif;
--mg-sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
--mg-mono:'Instrument Sans',system-ui,-apple-system,sans-serif;
/* ---- shapes: soft corners for panels, a rounded frame for photographs --- */
--mg-facet:inset(0 round var(--mg-radius));
--mg-stone:inset(0 round var(--mg-radius));
--mg-arch:inset(0 round 999px 999px var(--mg-radius) var(--mg-radius));
/* ---- the leaf, as a mask — the bullet and the mark --------------------- */
--mg-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5C11 3.5 4 8.6 4 16.2c0 1.6.4 3 .9 4.3.5-3.4 3.3-7.3 8.7-9.8-4.3 3-6.6 6.4-7.4 9.8 1.2.6 2.6.9 4.1.9 7.3 0 10.2-7.5 10.2-17.9z'/%3E%3C/svg%3E");
}
/* ============================================================================
PAPER — olive-cream stock with a fine tooth. The grain is fixed and faint.
========================================================================== */
html{background:var(--mg-ivory)}
body{position:relative;background:var(--mg-ivory);color:var(--mg-ink)}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Cfilter%20id%3D%22g%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22140%22%20height%3D%22140%22%20filter%3D%22url%28%23g%29%22%20opacity%3D%220.5%22%2F%3E%3C%2Fsvg%3E") repeat;
background-size:160px 160px;opacity:.03;mix-blend-mode:multiply}
body>*{position:relative;z-index:1}
/* ============================================================================
TYPE — Fraunces for display, set light; Instrument Sans for everything
else, including the letter-spaced labels.
========================================================================== */
body,p,li,td,th,input,select,textarea,button{font-family:var(--mg-sans)}
h1,h2,h3,h4,.hero-title,.section-title,.cx-panel-name,.cx-card-name,
.blog-card-title,.uknav-txt strong{font-family:var(--mg-display);font-weight:400;
font-variation-settings:'SOFT' 30,'WONK' 0;letter-spacing:-.018em;line-height:1.06;
color:rgb(var(--mg-fg-rgb));text-wrap:balance}
h1,.hero-title{font-size:clamp(36px,5vw,68px);letter-spacing:-.024em}
h2,.section-title{font-size:clamp(27px,3.3vw,46px);letter-spacing:-.02em}
h3{font-size:clamp(19px,1.9vw,26px);letter-spacing:-.014em}
p,li{line-height:1.7;color:rgb(var(--mg-fg-rgb) / .8)}
em{font-style:italic}
/* every label, kicker and badge is letter-spaced caps in the sans */
.eyebrow,.section-label,.cx-eyebrow,.uknav-collabel,.agent-eyebrow,.cx-card-loc,
.cx-panel-loc,.blog-meta,.blog-cat-badge,.cx-chip,.cx-tag,.agent-badge,
.uknav-trigger,.uknav-promo-pill,.cb-lbl,.status,.cc-eyebrow{
font-family:var(--mg-mono)!important;letter-spacing:.18em;text-transform:uppercase;
font-size:10.5px;font-weight:600}
.stat-value,.price,.cx-card-price,.cx-plate .v,.proof-item b,.spec-value,.cb-num,
td,th{font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.005em}
/* ============================================================================
SHAPES — soft, organic corners. Nothing is a pill except the promo tag.
========================================================================== */
:where(.btn-primary,.btn-outline,.btn,.uknav-cta,.cx-btn,.uk-bookbar-btn,.card-cta,
.blog-card-cta,button.btn-primary,a.btn-primary,a.btn-outline,.agent-badge,.cx-chip,
.cx-tag,.uk-fab-label,.filter-btn,.blog-filter-btn,.uknav-ic,input,select,textarea){
border-radius:var(--mg-radius-sm)!important}
:where(.property-card,.card,.prop-card,.blog-card,.cx-card,.cx-panel,.uknav-panel,
.uknav-fcard,.spec-card,.unit-card,.faq-item,.stat-card){border-radius:var(--mg-radius)!important}
/* photographs sit in a soft rounded frame */
.cx-card-fig,.blog-card-img-wrap,.cx-gallery figure,.uk-gal figure,
.gallery-item{overflow:hidden;border-radius:var(--mg-radius)}
.cx-card-fig img,.blog-card-img,.uknav-fcard img,.cx-gallery figure img,
.uk-gal figure img,.gallery-item img{
transition:transform .7s cubic-bezier(.22,.61,.36,1),filter .7s ease}
.cx-card:hover .cx-card-fig img,.blog-card:hover .blog-card-img,
.uknav-fcard:hover img,.cx-gallery figure:hover img,.gallery-item:hover img{
transform:scale(1.04);filter:saturate(1.06) brightness(1.03)}
/* ============================================================================
THE LEAF — the bullet, the separator and the mark that opens every kicker.
========================================================================== */
.mg-dia,.mg-leaf{display:inline-block;width:.8em;height:.8em;background:currentColor;flex:none;
-webkit-mask:var(--mg-leaf) center/contain no-repeat;mask:var(--mg-leaf) center/contain no-repeat;
vertical-align:-.08em;margin-inline:.12em}
.eyebrow::before,.section-label::before,.cx-eyebrow::before,.cc-eyebrow::before,
.agent-eyebrow::before{content:"";display:inline-block;width:11px;height:11px;
margin-right:.8em;vertical-align:-.1em;background:var(--mg-gold);
-webkit-mask:var(--mg-leaf) center/contain no-repeat;mask:var(--mg-leaf) center/contain no-repeat}
/* a hairline rule with a leaf set into the middle of it */
.mg-rule{display:flex;align-items:center;gap:14px;margin:0;border:0}
.mg-rule::before,.mg-rule::after{content:"";flex:1;height:1px;
background:linear-gradient(90deg,transparent,var(--mg-clay) 22%,var(--mg-clay) 78%,transparent)}
.mg-rule i{display:block;width:13px;height:13px;background:var(--mg-gold);flex:none;
-webkit-mask:var(--mg-leaf) center/contain no-repeat;mask:var(--mg-leaf) center/contain no-repeat}
/* ============================================================================
LIGHT — no sparkle on this site. What moves is light: a sheen that crosses
the primary call to action, and a slow one across a display word.
========================================================================== */
.mg-spark{display:none!important}
.mg-gleam{position:relative;isolation:isolate}
.mg-gleam::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(74deg,transparent 40%,rgba(236,246,232,.42) 49%,
rgba(236,246,232,.62) 51%,transparent 60%);
transform:translateX(-135%);opacity:0}
.mg-gleam:hover::before,.mg-gleam:focus-visible::before{animation:mg-sweep .9s ease-out}
@keyframes mg-sweep{0%{opacity:1;transform:translateX(-135%)}
100%{opacity:1;transform:translateX(135%)}}
.mg-gleam-idle::before{animation:mg-sweep-idle 9s ease-in-out infinite 3s}
@keyframes mg-sweep-idle{0%{opacity:0;transform:translateX(-135%)}
4%{opacity:1}14%{opacity:1;transform:translateX(135%)}
15%,100%{opacity:0;transform:translateX(135%)}}
/* a slow light across a single display word */
.mg-shine{background-image:linear-gradient(100deg,var(--mg-bronze-d) 0 32%,
var(--mg-gold) 45%,var(--mg-gold-lt) 50%,var(--mg-gold) 55%,var(--mg-bronze-d) 68% 100%);
background-size:280% 100%;background-position:120% 0;
-webkit-background-clip:text;background-clip:text;color:transparent;
animation:mg-shimmer 8s ease-in-out infinite}
@keyframes mg-shimmer{0%,100%{background-position:125% 0}52%{background-position:-25% 0}}
@media (prefers-reduced-motion:reduce){
.mg-gleam::before{display:none}
.mg-shine{animation:none;background:none;-webkit-text-fill-color:var(--mg-bronze-d);
color:var(--mg-bronze-d)}
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
/* ============================================================================
NAVIGATION — paper bar on a sage hairline, forest ink, the mega menu.
========================================================================== */
.uknav{background:rgba(245,247,239,.94)!important;
-webkit-backdrop-filter:saturate(1.1) blur(10px);backdrop-filter:saturate(1.1) blur(10px);
border-bottom:1px solid var(--mg-clay)!important;box-shadow:none!important}
.uknav.scrolled{background:rgba(245,247,239,.98)!important;
box-shadow:0 1px 0 var(--mg-clay),0 14px 34px -28px rgba(31,48,31,.5)!important;
border-bottom-color:var(--mg-clay)!important}
.uknav-logo img{height:46px;width:auto!important}
.uknav-links>.uknav-item>.uknav-trigger,.uknav-links>.uknav-item>a{
color:var(--mg-ink)!important;font-family:var(--mg-mono)!important;
letter-spacing:.16em;text-transform:uppercase;font-size:11px;font-weight:600}
.uknav-links>.uknav-item>.uknav-trigger:hover,
.uknav-links>.uknav-item>a:hover{color:var(--mg-bronze-d)!important}
.uknav-chevron{color:var(--mg-gold)!important}
.uknav-panel{background:var(--mg-ivory)!important;border:1px solid var(--mg-clay)!important;
box-shadow:var(--mg-shadow-lift)!important;backdrop-filter:none!important}
.uknav-collabel{color:var(--mg-bronze-d)!important;border-bottom:1px solid var(--mg-clay);
padding-bottom:8px;margin-bottom:8px}
.uknav-link{color:var(--mg-ink)!important;border-bottom:1px solid rgba(31,48,31,.07);
border-radius:var(--mg-radius-sm)}
.uknav-link:hover{background:var(--mg-cream)!important}
.uknav-link small{color:var(--mg-umber)!important;font-family:var(--mg-sans)}
.uknav-ic{color:var(--mg-bronze-d)!important;background:var(--mg-cream)!important}
.uknav-flabel{font-family:var(--mg-mono);letter-spacing:.14em;text-transform:uppercase;
font-size:10px;font-weight:600;color:var(--mg-ink)}
/* ============================================================================
BUTTONS — a forest tablet with cream type and a sheen that crosses it; the
secondary is a sage hairline that fills on hover.
========================================================================== */
.btn-primary,a.btn-primary,button.btn-primary,.uknav-cta,.cx-btn,.uk-bookbar-btn{
position:relative;isolation:isolate;overflow:hidden;
background:var(--mg-ink)!important;color:var(--mg-ivory)!important;
border:0!important;border-radius:var(--mg-radius-sm)!important;
box-shadow:inset 0 0 0 1px rgba(169,204,159,.35),var(--mg-shadow)!important;
font-family:var(--mg-display)!important;font-weight:500;letter-spacing:0;
text-transform:none;font-variation-settings:'SOFT' 30,'WONK' 0;
transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
.btn-primary::before,a.btn-primary::before,button.btn-primary::before,
.uknav-cta::before,.cx-btn::before,.uk-bookbar-btn::before{content:"";position:absolute;
inset:0;z-index:-1;pointer-events:none;opacity:0;transform:translateX(-135%);
background:linear-gradient(74deg,transparent 40%,rgba(206,234,206,.30) 49%,
rgba(206,234,206,.46) 51%,transparent 60%)}
.btn-primary:hover,a.btn-primary:hover,button.btn-primary:hover,.uknav-cta:hover,
.cx-btn:hover,.uk-bookbar-btn:hover{background:var(--mg-espresso)!important;
transform:translateY(-2px);
box-shadow:inset 0 0 0 1px rgba(169,204,159,.7),var(--mg-shadow-lift)!important}
.btn-primary:hover::before,a.btn-primary:hover::before,button.btn-primary:hover::before,
.uknav-cta:hover::before,.cx-btn:hover::before,.uk-bookbar-btn:hover::before{
animation:mg-sweep .9s ease-out}
.btn-primary:active,a.btn-primary:active,.uknav-cta:active{transform:translateY(0)}
.btn-outline,a.btn-outline{background:transparent!important;color:rgb(var(--mg-fg-rgb))!important;
border:1px solid var(--mg-taupe)!important;box-shadow:none!important;
border-radius:var(--mg-radius-sm)!important;
font-family:var(--mg-display)!important;letter-spacing:0;text-transform:none;
transition:background .2s ease,color .2s ease,border-color .2s ease}
.btn-outline:hover,a.btn-outline:hover{background:var(--mg-cream)!important;
border-color:var(--mg-bronze-d)!important;color:var(--mg-bronze-d)!important}
.uknav-cta{font-size:15px!important;padding-inline:20px!important}
.uknav .uknav-cta,.uknav-actions .uknav-cta{text-transform:none!important;letter-spacing:0!important;
font-family:var(--mg-display)!important}
.uknav-promo-pill{background:var(--mg-bronze-d)!important;color:var(--mg-ivory)!important;
border:0!important;border-radius:999px!important}
.uknav-links>.uknav-item>a.uknav-promo-pill,.uknav-promo-pill,.uknav-promo-pill *{color:var(--mg-ivory)!important}
/* the older nav template (RFO, Pre-selling, Promos, the office pages) */
.nav-promo-pill,.nav-promo-pill *{background:var(--mg-bronze-d)!important;color:var(--mg-ivory)!important;
border:0!important;border-radius:999px!important;box-shadow:none!important}
.btn-nav,a.btn-nav{background:var(--mg-ink)!important;color:var(--mg-ivory)!important;border:0!important;
border-radius:var(--mg-radius-sm)!important;font-family:var(--mg-display)!important;font-weight:500!important;
letter-spacing:0!important;text-transform:none!important;font-size:15px!important;box-shadow:none!important}
.btn-nav:hover,a.btn-nav:hover{background:var(--mg-espresso)!important}
/* hamburger bars were white for the old dark bar */
.uknav-toggle span,.nav-toggle span,.mob-toggle span,.hamburger span{background:var(--mg-ink)!important}
/* outline buttons that sit on a photographic hero read light, not ink */
.hero-cta .btn-outline,.hero .btn-outline,.cx-hero .btn-outline{color:var(--mg-ivory)!important;
border-color:rgba(245,247,239,.6)!important}
.hero-cta .btn-outline:hover,.hero .btn-outline:hover,.cx-hero .btn-outline:hover{
background:var(--mg-ivory)!important;color:var(--mg-ink)!important}
/* ---- category badges: the source build inlined a different hue per category */
.blog-cat-badge{background:var(--mg-bronze-d)!important;color:var(--mg-ivory)!important}
.blog-card-cta{background:none!important;color:var(--mg-bronze-d)!important;
font-family:var(--mg-mono)!important;letter-spacing:.16em;text-transform:uppercase}
/* ---- city / category filters shipped with no base styling at all ---------- */
.filter-btn,.blog-filter-btn{-webkit-appearance:none;appearance:none;
background:transparent;color:var(--mg-ink);border:1px solid var(--mg-clay);
padding:0 16px;min-height:40px;font:600 10.5px/1 var(--mg-mono);
letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
display:inline-flex;align-items:center;transition:background .18s,color .18s,border-color .18s}
.filter-btn:hover,.blog-filter-btn:hover{background:var(--mg-cream);border-color:var(--mg-taupe)}
.filter-btn.active,.blog-filter-btn.active{background:var(--mg-ink);
color:var(--mg-ivory);border-color:var(--mg-ink)}
/* ============================================================================
FOOTER — the forest bookend, on every page-level