/* ═══════════════════════════════════════════════
TARG Base — Main Stylesheet
Ported from the ROSAS (remax-oceansurf) theme. All colours, fonts,
radii and shadows reference the --targ-* custom properties defined in
tokens.css (enqueued BEFORE this file). A child theme re-skins the site
by overriding those tokens in its own style.css — never edit hex values
here.
════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
RESET & BASE
════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding-top offsets anchor jumps for the fixed utility bar (38px) +
nav (72px) so linked sections (e.g. #contact / #prop-contact) land just below
the header instead of hidden under it. Set on (the scroll container). */
html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: 120px; }
body {
font-family: var(--targ-font-body);
color: var(--targ-text);
background: var(--targ-white);
line-height: 1.6;
overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* WordPress alignment helpers */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin: 1em auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 12px; color: var(--targ-text-muted); text-align: center; margin-top: 4px; }
/* ═══════════════════════════════════════════════
UTILITY BAR
════════════════════════════════════════════════ */
.utility-bar {
background: var(--targ-primary);
color: rgba(255,255,255,.8);
font-size: 12px;
font-family: var(--targ-font-body);
font-weight: 400;
height: 38px;
display: flex;
align-items: center;
transition: height var(--targ-transition), opacity var(--targ-transition);
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
}
.utility-bar.hidden { height: 0; opacity: 0; }
.utility-inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 16px;
}
.utility-left { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.utility-contact {
display: flex; align-items: center; gap: 6px;
color: rgba(255,255,255,.75);
transition: color var(--targ-transition);
white-space: nowrap;
}
.utility-contact:hover { color: var(--targ-white); }
.utility-contact i { color: var(--targ-highlight); font-size: 11px; }
.utility-contact .whatsapp-icon { color: var(--targ-whatsapp); }
.utility-divider { width: 1px; height: 14px; background: rgba(255,255,255,.2); }
.utility-right { display: flex; align-items: center; gap: 14px; }
.social-icons { display: flex; align-items: center; gap: 10px; }
.social-icons a {
color: rgba(255,255,255,.55);
font-size: 12px;
transition: color var(--targ-transition);
}
.social-icons a:hover { color: var(--targ-white); }
.lang-selector {
display: flex; align-items: center; gap: 6px;
cursor: pointer; color: rgba(255,255,255,.7);
padding: 3px 8px;
border: 1px solid rgba(255,255,255,.2);
border-radius: 3px;
transition: all var(--targ-transition);
font-size: 11px;
letter-spacing: 0.03em;
}
.lang-selector:hover { border-color: rgba(255,255,255,.5); color: var(--targ-white); }
.lang-selector i { font-size: 11px; }
/* Language switcher dropdown (0002-21) */
.lang-selector { position: relative; }
.lang-menu {
position: absolute; top: calc(100% + 8px); right: 0;
background: var(--targ-white); border: 1px solid #e2e2e2; border-radius: 6px;
box-shadow: 0 8px 24px rgba(0,14,53,.18);
display: none; min-width: 132px; padding: 4px; z-index: 400;
}
.lang-selector.open .lang-menu { display: block; }
.lang-menu button {
display: block; width: 100%; text-align: left;
background: none; border: 0; padding: 8px 12px;
font-size: 12px; color: var(--targ-text); cursor: pointer;
border-radius: 4px; font-family: inherit; letter-spacing: 0.02em;
}
.lang-menu button:hover { background: var(--targ-surface); }
/* The utility bar (z 50) sits under the nav (z 100); lift it while the menu is open.
overflow:visible is REQUIRED here: the bar's overflow:hidden (scroll-collapse
animation) otherwise clips the absolutely-positioned menu, which renders below
the bar's 38px bottom edge — z-index alone cannot rescue a child from a parent's
overflow clip. The clip lifts only while .lang-open is present (JS-managed). */
.utility-bar.lang-open { z-index: 400; overflow: visible; }
/* Google Translate chrome — keep the auto banner/tooltips out of the layout.
Google renamed its widget classes (goog-te-* → obfuscated VIpgJd-*), so both
generations are listed; the body > .skiptranslate > iframe catch-all covers
future renames (the banner is always a direct iframe child of a .skiptranslate
div attached to — our own host element wraps its widget in a div). */
body { top: 0 !important; position: static !important; }
iframe.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame,
iframe.VIpgJd-ZVi9od-ORHb-OEVmcd, iframe.VIpgJd-ZVi9od-xl07Ob-OEVmcd,
.VIpgJd-yAWNEb-L7lbkb,
body > .skiptranslate > iframe { display: none !important; visibility: hidden !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
/* ═══════════════════════════════════════════════
MAIN NAVIGATION
════════════════════════════════════════════════ */
.main-nav {
position: fixed;
top: 38px;
left: 0; right: 0;
z-index: 100;
background: transparent;
transition: background var(--targ-transition), box-shadow var(--targ-transition), top var(--targ-transition);
}
.main-nav.scrolled {
background: rgba(255,255,255,.97);
backdrop-filter: blur(8px);
box-shadow: 0 2px 20px rgba(0,0,0,.1);
top: 0;
}
/* Interior pages: always white */
.main-nav.interior {
background: rgba(255,255,255,.97);
backdrop-filter: blur(8px);
box-shadow: 0 2px 20px rgba(0,0,0,.1);
}
.nav-inner {
max-width: 1320px;
margin: 0 auto;
padding: 0 24px 0 18px;
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
gap: 16px;
}
/* Logo */
.nav-logo {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
text-decoration: none;
}
.nav-logo img { height: 42px; width: auto; transition: filter var(--targ-transition); }
.main-nav:not(.scrolled):not(.interior) .nav-logo img { filter: brightness(0) invert(1); }
.logo-brand {
display: flex;
flex-direction: column;
line-height: 1;
border-left: 2px solid var(--targ-highlight);
padding-left: 12px;
}
.logo-brand-name {
font-family: var(--targ-font-heading);
font-size: 17px;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--targ-white);
white-space: nowrap;
transition: color var(--targ-transition);
}
.logo-brand-sub {
font-family: var(--targ-font-body);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--targ-highlight-light);
white-space: nowrap;
margin-top: 3px;
}
.main-nav.scrolled .logo-brand-name,
.main-nav.interior .logo-brand-name { color: var(--targ-primary); }
/* Desktop Nav Links */
.nav-links {
display: flex;
align-items: center;
gap: 2px;
flex: 1;
justify-content: center;
}
.nav-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.nav-item { position: relative; }
.nav-link-btn {
display: flex; align-items: center; gap: 5px;
padding: 8px 14px;
font-size: 13.5px;
font-weight: 500;
font-family: var(--targ-font-body);
color: rgba(255,255,255,.9);
border-radius: var(--targ-radius);
cursor: pointer;
transition: all var(--targ-transition);
white-space: nowrap;
background: none;
border: none;
letter-spacing: 0.02em;
}
.main-nav.scrolled .nav-link-btn,
.main-nav.interior .nav-link-btn { color: var(--targ-text); }
.nav-link-btn:hover,
.main-nav.scrolled .nav-link-btn:hover,
.main-nav.interior .nav-link-btn:hover { background: var(--targ-surface); color: var(--targ-primary); }
.nav-link-btn i { font-size: 9px; opacity: 0.7; }
/* Dropdown */
.dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 220px;
background: var(--targ-white);
border: 1px solid var(--targ-border);
border-radius: 8px;
box-shadow: var(--targ-shadow-lg);
padding: 8px 0;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all 0.2s ease;
z-index: 10;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown a {
display: block;
padding: 3px 18px;
font-size: 13px;
line-height: 1.25;
color: var(--targ-text-muted);
font-family: var(--targ-font-body);
transition: all var(--targ-transition);
border-left: 2px solid transparent;
}
.dropdown a:hover {
color: var(--targ-primary);
background: var(--targ-surface);
border-left-color: var(--targ-accent);
}
.dropdown .dropdown-label {
padding: 10px 18px 5px;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--targ-highlight);
font-weight: 600;
border-top: 1px solid var(--targ-border);
margin-top: 4px;
}
.dropdown .dropdown-label:first-child { border-top: none; margin-top: 0; }
/* Third-level flyout (e.g. gated communities nested under a beach).
NOTE: the flyout panel is .dropdown-sub, NOT .dropdown - the
".nav-item:hover .dropdown" rule above matches descendants at any depth,
so reusing .dropdown would open every flyout at once and stack them all
at the bottom of the panel. Keep these two class names separate. */
.dropdown-item.has-sub { position: relative; }
.dropdown .dropdown-parent {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.dropdown .dropdown-parent i {
font-size: 8px;
opacity: 0.45;
flex-shrink: 0;
transition: transform var(--targ-transition), opacity var(--targ-transition), color var(--targ-transition);
}
.dropdown-item.has-sub:hover > .dropdown-parent i,
.dropdown-item.has-sub.open > .dropdown-parent i {
opacity: 1;
color: var(--targ-accent);
transform: translateX(2px);
}
.dropdown-sub {
position: absolute;
top: -8px; /* align first child with the parent row */
left: 100%;
margin-left: 3px;
min-width: 225px;
background: var(--targ-white);
border: 1px solid var(--targ-border);
border-radius: 8px;
box-shadow: var(--targ-shadow-lg);
padding: 8px 0;
opacity: 0;
visibility: hidden;
transform: translateX(-6px);
transition: all 0.18s ease;
z-index: 11;
}
/* Invisible bridge so the cursor can cut the corner from the parent row
into the flyout without it closing mid-travel. */
.dropdown-sub::before {
content: '';
position: absolute;
top: 0;
left: -9px;
width: 9px;
height: 100%;
}
.dropdown-item.has-sub:hover > .dropdown-sub,
.dropdown-item.has-sub:focus-within > .dropdown-sub,
.dropdown-item.has-sub.open > .dropdown-sub {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
/* Flipped by JS when the flyout would run off the right edge */
.dropdown-sub.flip-left {
left: auto;
right: 100%;
margin-left: 0;
margin-right: 3px;
transform: translateX(6px);
}
.dropdown-sub.flip-left::before { left: auto; right: -9px; }
.dropdown-item.has-sub:hover > .dropdown-sub.flip-left,
.dropdown-item.has-sub:focus-within > .dropdown-sub.flip-left,
.dropdown-item.has-sub.open > .dropdown-sub.flip-left { transform: translateX(0); }
.dropdown .dropdown-sub a {
display: block;
padding: 3px 18px;
font-size: 13px;
line-height: 1.25;
color: var(--targ-text-muted);
font-family: var(--targ-font-body);
transition: all var(--targ-transition);
border-left: 2px solid transparent;
}
.dropdown .dropdown-sub a:hover {
color: var(--targ-primary);
background: var(--targ-surface);
border-left-color: var(--targ-accent);
}
/* Nav CTAs */
.nav-cta-group { display: flex; align-items: center; gap: 10px; }
.btn-search {
display: flex; align-items: center; gap: 8px;
padding: 9px 20px;
background: var(--targ-accent);
color: var(--targ-white);
font-size: 13px;
font-weight: 600;
font-family: var(--targ-font-body);
border-radius: var(--targ-radius);
border: none;
cursor: pointer;
transition: background var(--targ-transition);
white-space: nowrap;
letter-spacing: 0.03em;
}
.btn-search:hover { background: var(--targ-accent-dark); }
.btn-agent {
padding: 9px 18px;
border: 1.5px solid rgba(255,255,255,.5);
color: var(--targ-white);
font-size: 13px;
font-weight: 500;
font-family: var(--targ-font-body);
border-radius: var(--targ-radius);
background: transparent;
cursor: pointer;
transition: all var(--targ-transition);
white-space: nowrap;
}
.btn-agent:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.8); }
.main-nav.scrolled .btn-agent,
.main-nav.interior .btn-agent {
border-color: var(--targ-primary);
color: var(--targ-primary);
}
.main-nav.scrolled .btn-agent:hover,
.main-nav.interior .btn-agent:hover { background: var(--targ-surface); }
/* Hamburger */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
}
.hamburger span {
display: block; width: 22px; height: 2px;
background: var(--targ-white);
transition: all var(--targ-transition);
border-radius: 2px;
}
.main-nav.scrolled .hamburger span,
.main-nav.interior .hamburger span { background: var(--targ-text); }
/* ═══════════════════════════════════════════════
MOBILE NAV OVERLAY
════════════════════════════════════════════════ */
.mobile-nav {
position: fixed;
inset: 0;
background: var(--targ-white);
z-index: 300;
display: flex;
flex-direction: column;
padding: 24px;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 32px;
padding-bottom: 20px;
border-bottom: 1px solid var(--targ-border);
}
.mobile-close {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--targ-border);
border-radius: 50%;
cursor: pointer;
font-size: 16px;
color: var(--targ-text);
}
.mobile-menu-items { display: flex; flex-direction: column; gap: 0; flex: 1; }
.mobile-menu-item {
border-bottom: 1px solid var(--targ-border);
font-size: 16px;
font-weight: 500;
color: var(--targ-text);
cursor: pointer;
display: flex;
flex-direction: column;
}
.mobile-item-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
width: 100%;
}
.mobile-menu-item > a {
display: flex;
align-items: center;
padding: 14px 0;
color: var(--targ-text);
width: 100%;
font-weight: 500;
}
.mobile-sub {
padding: 8px 0 4px 16px;
display: none;
flex-direction: column;
gap: 2px;
}
.mobile-sub.open { display: flex; }
.mobile-sub a {
padding: 7px 0;
font-size: 14px;
color: var(--targ-text-muted);
border-bottom: 1px solid rgba(0,0,0,.04);
}
/* Nested third level inside the mobile accordion. The parent stays a link;
the chevron is its own tap target (see toggleNested in main.js). */
.mobile-sub-item {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.mobile-sub-item > .mobile-sub-parent { flex: 1 1 auto; }
.mobile-sub-toggle {
flex: 0 0 auto;
background: none;
border: none;
padding: 7px 4px 7px 14px;
margin: 0;
line-height: 1;
cursor: pointer;
color: var(--targ-text-muted);
border-bottom: 1px solid rgba(0,0,0,.04);
align-self: stretch;
}
.mobile-sub-toggle i {
font-size: 11px;
transition: transform 0.2s ease;
}
.mobile-sub2 {
flex: 0 0 100%;
display: none;
flex-direction: column;
padding: 2px 0 6px 14px;
margin: 2px 0 4px 2px;
border-left: 2px solid var(--targ-surface);
}
.mobile-sub2.open { display: flex; }
.mobile-sub2 a {
padding: 6px 0;
font-size: 13.5px;
color: var(--targ-text-muted);
border-bottom: 1px solid rgba(0,0,0,.04);
}
.mobile-ctas { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.mobile-contact {
display: flex; flex-direction: column; gap: 12px;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--targ-border);
}
.mobile-contact-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--targ-text-muted); }
.mobile-contact-item i { color: var(--targ-primary); width: 16px; }
/* ═══════════════════════════════════════════════
SHARED SECTION STYLES
════════════════════════════════════════════════ */
.section { padding: 80px 24px; }
.section-sm { padding: 56px 24px; }
.container { max-width: 1320px; margin: 0 auto; width: 100%; }
.section-eyebrow {
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--targ-highlight);
font-weight: 600;
margin-bottom: 10px;
font-family: var(--targ-font-body);
}
.section-title {
font-family: var(--targ-font-heading);
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 500;
color: var(--targ-text);
line-height: 1.15;
letter-spacing: -0.01em;
}
.section-title em { font-style: italic; color: var(--targ-primary-mid); }
.section-subtitle {
font-size: 15px;
color: var(--targ-text-muted);
max-width: 540px;
line-height: 1.7;
margin-top: 10px;
}
.section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 40px;
gap: 20px;
}
.btn-outline {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 22px;
border: 1.5px solid var(--targ-primary);
color: var(--targ-primary);
font-size: 13px;
font-weight: 600;
font-family: var(--targ-font-body);
border-radius: var(--targ-radius);
transition: all var(--targ-transition);
white-space: nowrap;
flex-shrink: 0;
}
.btn-outline:hover { background: var(--targ-primary); color: var(--targ-white); }
.btn-solid {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 28px;
background: var(--targ-primary);
color: var(--targ-white);
font-size: 14px;
font-weight: 600;
font-family: var(--targ-font-body);
border-radius: var(--targ-radius);
border: none;
cursor: pointer;
transition: background var(--targ-transition);
}
.btn-solid:hover { background: var(--targ-primary-mid); }
.btn-red { background: var(--targ-accent); }
.btn-red:hover { background: var(--targ-accent-dark); }
/* ═══════════════════════════════════════════════
HOMEPAGE HERO
════════════════════════════════════════════════ */
.hero {
position: relative;
height: 100vh;
min-height: 680px;
max-height: 980px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 40%;
transform: scale(1.03);
transition: transform 8s ease;
}
.hero-bg.loaded { transform: scale(1); }
/* ── Ken Burns hero slideshow ── */
.hero-slideshow {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--targ-primary);
}
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 42%;
opacity: 0;
will-change: transform, opacity;
/* 6 slides × 6s = 36s loop */
animation: heroKenBurns 36s infinite;
}
/* Stagger each slide by 6s so exactly one is visible at a time */
.hero-slide-1 { animation-delay: 0s; }
.hero-slide-2 { animation-delay: 6s; }
.hero-slide-3 { animation-delay: 12s; }
.hero-slide-4 { animation-delay: 18s; }
.hero-slide-5 { animation-delay: 24s; }
.hero-slide-6 { animation-delay: 30s; }
@keyframes heroKenBurns {
/* Gentle zoom + a slow left-to-right pan (drone glide) */
0% { opacity: 0; transform: scale(1.08) translateX(3.5%); }
2% { opacity: 1; }
16% { opacity: 1; }
19% { opacity: 0; transform: scale(1.12) translateX(-3.5%); }
100% { opacity: 0; transform: scale(1.12) translateX(-3.5%); }
}
/* Respect reduced-motion: hold the first frame, no movement */
@media (prefers-reduced-motion: reduce) {
.hero-slide { animation: none; transform: none; }
.hero-slide-1 { opacity: 1; }
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,14,53,.25) 0%,
rgba(0,14,53,.1) 40%,
rgba(0,14,53,.55) 75%,
rgba(0,14,53,.82) 100%
);
}
.hero-content {
position: relative;
z-index: 2;
padding: 0 24px 48px;
max-width: 1320px;
margin: 0 auto;
width: 100%;
text-align: center;
}
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--targ-highlight-light);
font-family: var(--targ-font-body);
font-weight: 500;
margin-bottom: 18px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
content: '';
display: block;
width: 28px; height: 1px;
background: var(--targ-highlight-light);
opacity: 0.7;
}
.hero-title {
font-family: var(--targ-font-heading);
font-size: clamp(42px, 6vw, 78px);
font-weight: 500;
color: var(--targ-white);
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 18px;
}
.hero-title em { font-style: italic; color: var(--targ-highlight-light); }
.hero-subtitle {
font-size: clamp(15px, 1.8vw, 18px);
color: rgba(255,255,255,.82);
font-weight: 300;
max-width: 560px;
margin: 0 auto 48px;
line-height: 1.7;
}
.hero-scroll {
position: absolute;
bottom: 20px; right: 36px;
display: flex; flex-direction: column; align-items: center; gap: 6px;
z-index: 3;
}
.hero-scroll span {
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
writing-mode: vertical-rl;
}
.scroll-line {
width: 1px; height: 40px;
background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
animation: scrollPulse 2s ease infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* Hero Search Bar */
.hero-search {
background: rgba(255,255,255,.97);
backdrop-filter: blur(12px);
border-radius: 10px;
padding: 22px 24px 20px;
max-width: 960px;
margin: 0 auto;
box-shadow: 0 8px 40px rgba(0,0,0,.3);
}
.search-label {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--targ-highlight);
font-weight: 600;
text-align: left;
margin-bottom: 14px;
font-family: var(--targ-font-body);
}
.search-fields {
display: grid;
/* keyword, price, beds, baths, location, type, button */
grid-template-columns: 1.5fr 1.2fr 0.8fr 0.8fr 1.4fr 1.2fr auto;
gap: 10px;
align-items: end;
}
.search-fields input[type="text"] { cursor: text; }
.field-group { display: flex; flex-direction: column; gap: 5px; }
.field-group label {
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--targ-text-muted);
font-weight: 600;
font-family: var(--targ-font-body);
}
.field-group select, .field-group input {
height: 42px;
padding: 0 12px;
border: 1.5px solid var(--targ-border);
border-radius: var(--targ-radius);
font-size: 13px;
font-family: var(--targ-font-body);
color: var(--targ-text);
background: var(--targ-white);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: border-color var(--targ-transition);
width: 100%;
}
.field-group select:focus, .field-group input:focus { outline: none; border-color: var(--targ-primary); }
.select-wrap { position: relative; }
.select-wrap::after {
content: '\f107';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
right: 11px; top: 50%; transform: translateY(-50%);
font-size: 10px;
color: var(--targ-text-muted);
pointer-events: none;
}
.btn-search-main {
height: 42px;
padding: 0 24px;
background: var(--targ-accent);
color: var(--targ-white);
border: none;
border-radius: var(--targ-radius);
font-size: 13px;
font-weight: 600;
font-family: var(--targ-font-body);
cursor: pointer;
display: flex; align-items: center; gap: 8px;
transition: background var(--targ-transition);
white-space: nowrap;
letter-spacing: 0.04em;
align-self: end;
}
.btn-search-main:hover { background: var(--targ-accent-dark); }
.search-links {
display: flex; align-items: center; gap: 20px;
margin-top: 12px;
font-size: 12px;
color: var(--targ-text-muted);
}
.search-links a { color: var(--targ-primary-mid); font-weight: 500; transition: color var(--targ-transition); }
.search-links a:hover { color: var(--targ-accent); }
/* Thin "Browse by Map" link under the hero search */
.hero-map-link {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 14px auto 0;
padding-top: 14px;
border-top: 1px solid rgba(0,14,53,.10);
font-family: var(--targ-font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--targ-primary);
text-decoration: none;
transition: color var(--targ-transition);
}
.hero-map-link i { color: var(--targ-accent); font-size: 19px; }
.hero-map-link:hover { color: var(--targ-accent); }
/* ═══════════════════════════════════════════════
CATEGORY TILES
════════════════════════════════════════════════ */
.categories-section {
padding: 56px 24px;
background: var(--targ-surface);
border-top: 1px solid var(--targ-border);
border-bottom: 1px solid var(--targ-border);
}
/* Horizontally scrollable card row (11 Collection categories) */
.categories-scroll {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--targ-highlight) transparent;
padding-bottom: 12px;
margin-bottom: 2px;
}
.categories-scroll::-webkit-scrollbar { height: 8px; }
.categories-scroll::-webkit-scrollbar-track { background: var(--targ-surface); border-radius: 8px; }
.categories-scroll::-webkit-scrollbar-thumb { background: var(--targ-highlight); border-radius: 8px; }
.categories-scroll::-webkit-scrollbar-thumb:hover { background: var(--targ-highlight-light); }
.categories-grid {
display: flex;
gap: 14px;
width: max-content;
min-width: 100%;
}
.categories-scroll-hint {
display: none;
align-items: center;
gap: 6px;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--targ-text-muted);
font-weight: 600;
margin-top: 4px;
}
.categories-scroll-hint i { color: var(--targ-accent); animation: cat-hint-nudge 1.4s ease-in-out infinite; }
@keyframes cat-hint-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.category-card {
position: relative;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 3/4;
cursor: pointer;
flex: 0 0 clamp(190px, 16vw, 220px);
scroll-snap-align: start;
}
.category-card img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.category-card:hover img { transform: scale(1.06); }
.category-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,14,53,.78) 0%, rgba(0,14,53,.15) 55%, transparent 100%);
transition: background var(--targ-transition);
}
.category-card:hover .category-overlay {
background: linear-gradient(to top, rgba(0,14,53,.88) 0%, rgba(0,14,53,.35) 55%, rgba(0,14,53,.1) 100%);
}
.category-body {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 16px 14px;
}
.category-badge {
display: inline-block;
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--targ-highlight-light);
font-weight: 600;
margin-bottom: 5px;
}
.category-name {
font-family: var(--targ-font-heading);
font-size: 17px;
font-weight: 500;
color: var(--targ-white);
line-height: 1.2;
margin-bottom: 6px;
}
.category-arrow {
display: flex; align-items: center; gap: 5px;
font-size: 11px;
color: rgba(255,255,255,.6);
font-weight: 500;
transform: translateX(-4px);
transition: all var(--targ-transition);
}
.category-card:hover .category-arrow { color: var(--targ-highlight-light); transform: translateX(0); }
.exclusive-badge {
position: absolute;
top: 12px; left: 12px;
background: var(--targ-accent);
color: var(--targ-white);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 3px;
}
/* Listings intro band */
.select-intro {
background: linear-gradient(135deg, var(--targ-primary) 0%, var(--targ-primary-mid) 100%);
padding: 28px 24px;
text-align: center;
}
.select-intro-inner {
display: flex; align-items: center; justify-content: center; gap: 16px;
max-width: 1320px; margin: 0 auto;
}
.select-intro-badge {
display: flex; align-items: center; gap: 8px;
background: rgba(255,255,255,.1);
border: 1px solid rgba(201,169,110,.4);
border-radius: 4px;
padding: 6px 14px;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--targ-highlight-light);
font-weight: 700;
}
.select-intro-text { font-size: 14px; color: rgba(255,255,255,.75); }
.select-intro-text strong { color: var(--targ-white); }
/* Clickable badge → /properties/ */
.select-intro-badge--link {
text-decoration: none;
cursor: pointer;
transition: background var(--targ-transition), border-color var(--targ-transition), color var(--targ-transition);
}
.select-intro-badge--link:hover {
background: var(--targ-highlight);
border-color: var(--targ-highlight);
color: var(--targ-primary);
}
/* ═══════════════════════════════════════════════
FEATURED LISTINGS
════════════════════════════════════════════════ */
.listings-section { background: var(--targ-white); }
.listings-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.listing-card {
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--targ-border);
background: var(--targ-white);
box-shadow: var(--targ-shadow-sm);
transition: box-shadow var(--targ-transition), transform var(--targ-transition);
cursor: pointer;
display: block;
}
.listing-card:hover { box-shadow: var(--targ-shadow-lg); transform: translateY(-4px); }
.listing-img-wrap {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
}
.listing-img-wrap img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.listing-card:hover .listing-img-wrap img { transform: scale(1.04); }
.listing-select-badge {
position: absolute;
top: 14px; left: 14px;
display: flex; align-items: center; gap: 5px;
background: var(--targ-primary);
color: var(--targ-white);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 4px;
}
.listing-select-badge i { color: var(--targ-highlight); font-size: 8px; }
/* ── Secondary listing source styles (legacy, unused by the parent templates) ── */
.listing-select-badge--mls { background: #335a7a; color: var(--targ-white); }
.listing-select-badge--mls i { color: var(--targ-white); }
.prop-hero-badge.listing-select-badge--mls { background: #335a7a; color: var(--targ-white); }
.mls-card-courtesy { font-size: 11px; color: var(--targ-text-muted); margin-top: 6px; }
.mls-disclaimer { font-size: 12px; color: var(--targ-text-muted); line-height: 1.6; margin-top: 28px; }
.mls-disclaimer--footer { font-size: 14px; text-align: center; max-width: 760px; margin: 40px auto 0; }
.mls-listed-office { font-weight: 600; color: var(--targ-primary); margin-bottom: 4px; }
.mls-listed-agent { color: var(--targ-text); margin-bottom: 10px; }
.mls-listed-note { font-size: 11px; color: var(--targ-text-muted); line-height: 1.5; margin: 0; }
.mls-search .btn-outline, .mls-search .mls-reset { flex-shrink: 0; padding: 9px 18px; }
.mls-demo-note {
background: #fff7e6; border: 1px solid var(--targ-highlight-light);
color: var(--targ-text); font-size: 13px; line-height: 1.6;
padding: 12px 16px; border-radius: 6px; margin-bottom: 24px;
}
.mls-demo-note i { color: var(--targ-highlight); margin-right: 6px; }
.mls-gallery {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 36px;
}
.mls-gallery img { width: 100%; height: 220px; object-fit: cover; border-radius: 6px; display: block; }
.mls-gallery img:first-child { grid-column: 1 / -1; height: 420px; }
.mls-search {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding: 12px 0;
}
.mls-search input[type="text"], .mls-search select {
padding: 9px 12px; border: 1px solid var(--targ-border); border-radius: 6px;
font-family: var(--targ-font-body); font-size: 14px; background: var(--targ-white);
}
.mls-search input[type="text"] { flex: 1 1 220px; min-width: 180px; }
.mls-search .btn-solid { flex-shrink: 0; }
/* Prominent "Search MLS Listings by Map" call-to-action on the /mls/ list view. */
.mls-map-cta { max-width: 1320px; margin: 18px auto 0; padding: 0 24px; text-align: center; }
.mls-map-cta-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 32px;
background: var(--targ-primary); color: #fff;
font-family: var(--targ-font-body); font-size: 15px; font-weight: 600;
letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
border: 1px solid var(--targ-highlight); border-radius: 6px;
transition: background .2s ease, color .2s ease;
}
.mls-map-cta-btn i { color: var(--targ-highlight); }
.mls-map-cta-btn:hover { background: var(--targ-accent); border-color: var(--targ-accent); }
.mls-map-cta-btn:hover i { color: #fff; }
/* ═══════════════════════════════════════════════════════════════
GATED COMMUNITIES — archive cards + single page
═══════════════════════════════════════════════════════════════ */
/* Cards (archive) */
.gc-card {
display: flex; flex-direction: column;
background: var(--white, #fff);
border: 1px solid var(--targ-border); border-radius: 8px; overflow: hidden;
text-decoration: none; color: inherit;
transition: box-shadow .2s ease, transform .2s ease;
}
.gc-card:hover { box-shadow: 0 12px 30px rgba(0,14,53,.12); transform: translateY(-3px); }
.gc-card-img { height: 200px; background-size: cover; background-position: center; background-color: var(--targ-surface); }
.gc-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.gc-card-loc { font-size: 12.5px; color: var(--targ-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.gc-card-loc i { color: var(--targ-accent); margin-right: 4px; }
.gc-card-title { font-family: var(--targ-font-heading); font-size: 24px; line-height: 1.15; color: var(--targ-primary); margin: 0; }
.gc-card-amenities { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gc-card-amenities li {
font-size: 12px; color: var(--targ-text);
background: var(--targ-surface); border-radius: 4px; padding: 4px 9px;
}
.gc-card-amenities-more { color: var(--targ-text-muted) !important; background: transparent !important; }
.gc-card-link { margin-top: auto; padding-top: 8px; color: var(--targ-accent); font-weight: 600; font-size: 14px; }
/* Condos archive — per-town groups (archive-condo.php) */
.condo-town-group { margin-bottom: 48px; }
.condo-town-group:last-child { margin-bottom: 0; }
/* Beach Town filter buttons on /condos/ (0002-51) */
.condo-town-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 32px; }
.condo-town-filter .town-btn {
display: inline-block; padding: 8px 18px;
border: 1px solid var(--targ-primary); border-radius: 24px;
color: var(--targ-primary); background: var(--targ-white);
font-size: 13px; font-weight: 500; letter-spacing: .03em;
text-decoration: none; transition: all var(--targ-transition);
}
.condo-town-filter .town-btn:hover,
.condo-town-filter .town-btn.active { background: var(--targ-primary); color: var(--targ-white); }
.condo-town-heading {
font-family: var(--targ-font-heading); font-size: 30px; line-height: 1.1; color: var(--targ-primary);
margin: 0 0 20px; padding-bottom: 10px; border-bottom: 2px solid var(--targ-highlight);
}
/* Hero (single) */
.gc-hero {
position: relative; background-size: cover; background-position: center;
padding: 120px 24px 64px; color: #fff; text-align: center;
}
.gc-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,14,53,.45), rgba(0,14,53,.75)); }
.gc-hero-content { position: relative; max-width: 900px; margin: 0 auto; }
.gc-hero-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--targ-highlight-light); margin-bottom: 12px; }
.gc-hero-title { font-family: var(--targ-font-heading); font-size: clamp(36px, 5vw, 58px); line-height: 1.05; margin: 0; }
.gc-hero-sub { font-size: 18px; margin: 14px auto 0; max-width: 680px; opacity: .95; }
.gc-hero-loc { margin-top: 14px; font-size: 14px; letter-spacing: .04em; }
.gc-hero-loc i { color: var(--targ-highlight-light); margin-right: 6px; }
/* Single body */
.gc-description { font-size: 16px; line-height: 1.75; color: var(--targ-text); }
.gc-description p { margin: 0 0 1.2em; }
.gc-description p:last-child { margin-bottom: 0; }
.gc-description ul, .gc-description ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.gc-description li { margin-bottom: 0.4em; }
.gc-amenities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.gc-amenities--sidebar { grid-template-columns: 1fr; gap: 9px; }
.gc-amenity { font-size: 15px; color: var(--targ-text); display: flex; align-items: center; gap: 10px; }
.gc-amenity i { color: var(--targ-highlight); font-size: 13px; }
.gc-listings-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 16px; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }
.gc-back-link { display: inline-block; margin-top: 0; color: var(--targ-primary); font-weight: 600; text-decoration: none; }
.gc-back-link:hover { color: var(--targ-accent); }
/* Sidebar photo card */
.gc-photo-card { padding: 0; overflow: hidden; }
.gc-photo-card img { display: block; width: 100%; height: auto; }
/* Sidebar CTA card */
.gc-cta-text { font-size: 14.5px; line-height: 1.6; color: var(--targ-text); margin: 0 0 14px; }
.gc-cta-address { margin-top: 14px; font-size: 13px; color: var(--targ-text-muted); display: flex; align-items: flex-start; gap: 8px; }
.gc-cta-address i { color: var(--targ-accent); margin-top: 3px; }
@media (max-width: 600px) {
.gc-amenities { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.mls-gallery { grid-template-columns: 1fr; }
.mls-gallery img, .mls-gallery img:first-child { height: 240px; }
}
.listing-price-badge {
position: absolute;
bottom: 14px; right: 14px;
background: rgba(0,14,53,.94);
color: var(--targ-white);
font-family: var(--targ-font-body);
font-size: 17px;
font-weight: 400;
letter-spacing: 0.01em;
padding: 5px 13px;
border-radius: 6px;
border: 1.5px solid rgba(255,255,255,.9);
box-shadow: 0 2px 10px rgba(0,0,0,.45);
backdrop-filter: blur(6px);
}
.listing-body { padding: 20px; }
.listing-location {
display: flex; align-items: center; gap: 6px;
font-size: 11px;
color: var(--targ-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-bottom: 8px;
}
.listing-location i { color: var(--targ-accent); font-size: 10px; }
.listing-title {
font-family: var(--targ-font-heading);
font-size: 20px;
font-weight: 500;
color: var(--targ-text);
line-height: 1.3;
margin-bottom: 10px;
}
.listing-desc {
font-size: 13px;
color: var(--targ-text-muted);
line-height: 1.65;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.listing-specs {
display: flex; align-items: center; gap: 16px;
padding: 12px 0;
border-top: 1px solid var(--targ-border);
border-bottom: 1px solid var(--targ-border);
margin-bottom: 16px;
}
.spec {
display: flex; align-items: center; gap: 6px;
font-size: 12.5px;
color: var(--targ-text-muted);
font-weight: 500;
}
.spec i { color: var(--targ-primary-mid); font-size: 12px; }
.listing-footer { display: flex; align-items: center; justify-content: flex-end; }
.listing-agent {
display: flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--targ-text-muted);
}
.listing-agent-dot {
width: 26px; height: 26px;
background: var(--targ-surface-dark);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 9px;
color: var(--targ-primary);
font-weight: 700;
}
.btn-view {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--targ-primary);
padding: 7px 14px;
border: 1.5px solid var(--targ-primary);
border-radius: var(--targ-radius);
transition: all var(--targ-transition);
}
.btn-view:hover { background: var(--targ-primary); color: var(--targ-white); }
.listings-footer {
text-align: center;
margin-top: 44px;
padding-top: 40px;
border-top: 1px solid var(--targ-border);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.listings-footer p { font-size: 14px; color: var(--targ-text-muted); }
.listings-cta-group { display: flex; align-items: center; gap: 14px; }
/* ═══════════════════════════════════════════════
TRUST BAND
════════════════════════════════════════════════ */
.trust-band {
background: var(--targ-primary);
padding: 60px 24px;
position: relative;
overflow: hidden;
}
.trust-band::before {
content: '';
position: absolute;
inset: 0;
background: url('../images/10-playa-langosta.jpg') center/cover;
opacity: 0.08;
}
.trust-inner {
position: relative;
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
gap: 0;
align-items: center;
}
.trust-divider { background: rgba(255,255,255,.15); height: 60px; }
.trust-stat { text-align: center; padding: 8px 28px; }
.trust-number {
font-family: var(--targ-font-heading);
font-size: clamp(34px, 4vw, 52px);
font-weight: 500;
color: var(--targ-highlight-light);
line-height: 1;
margin-bottom: 8px;
}
.trust-label {
font-size: 12px;
color: rgba(255,255,255,.65);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
line-height: 1.5;
}
.trust-testimonial {
margin-top: 48px;
text-align: center;
padding-top: 40px;
border-top: 1px solid rgba(255,255,255,.12);
position: relative;
}
.trust-quote-icon {
font-family: var(--targ-font-heading);
font-size: 72px;
color: var(--targ-highlight);
opacity: 0.4;
line-height: 0.5;
margin-bottom: 16px;
}
.trust-quote {
font-family: var(--targ-font-heading);
font-size: clamp(18px, 2.2vw, 24px);
font-style: italic;
color: rgba(255,255,255,.85);
max-width: 700px;
margin: 0 auto 16px;
line-height: 1.6;
}
.trust-cite { font-size: 12px; color: rgba(255,255,255,.45); letter-spacing: 0.08em; text-transform: uppercase; }
/* ── Testimonial carousel ── */
.trust-carousel {
position: relative;
max-width: 760px;
margin: 0 auto;
min-height: 150px;
}
.trust-slide {
position: absolute;
inset: 0;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s linear 0.7s;
}
.trust-slide.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.trust-slide .trust-quote { margin-bottom: 14px; }
.trust-dots {
display: flex;
justify-content: center;
gap: 9px;
margin-top: 22px;
}
.trust-dot {
width: 9px; height: 9px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,.25);
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
}
.trust-dot:hover { background: rgba(255,255,255,.5); }
.trust-dot.active { background: var(--targ-highlight); transform: scale(1.25); }
@media (max-width: 620px) {
.trust-carousel { min-height: 210px; }
}
/* ═══════════════════════════════════════════════
COMMUNITIES
════════════════════════════════════════════════ */
.communities-section { background: var(--targ-surface); }
/* Explore by Area & Type band (front-page.php) */
/* padding-top:0 so it sits a single ~80px gap below the Exclusive Listings
section (which supplies its own 80px bottom padding) instead of the stacked
160px double-padding void. */
.explore-section { background: var(--targ-white); padding-top: 0; }
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.explore-card {
position: relative; display: block; min-height: 300px; border-radius: 12px; overflow: hidden;
background-size: cover; background-position: center; color: #fff;
box-shadow: 0 4px 14px rgba(0,14,53,.10); transition: transform .3s ease, box-shadow .3s ease;
}
.explore-card:hover { transform: translateY(-4px); box-shadow: var(--targ-shadow-md); }
.explore-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,14,53,.88) 0%, rgba(0,14,53,.45) 55%, rgba(0,14,53,.22) 100%); }
.explore-body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; }
.explore-icon { font-size: 22px; color: var(--targ-highlight-light); margin-bottom: 12px; }
.explore-name { font-family: var(--targ-font-heading); font-size: 25px; line-height: 1.15; margin-bottom: 6px; }
.explore-desc { font-size: 13.5px; color: rgba(255,255,255,.85); line-height: 1.5; margin-bottom: 14px; }
.explore-link { font-size: 13px; font-weight: 600; letter-spacing: .03em; color: var(--targ-highlight-light); }
.explore-card:hover .explore-link { color: #fff; }
.explore-link i { margin-left: 4px; transition: transform .25s ease; }
.explore-card:hover .explore-link i { transform: translateX(4px); }
/* "Coming Soon" non-linked explore tile (e.g. Condo Complexes pre-launch) */
.explore-card.is-coming-soon { cursor: default; }
.explore-card.is-coming-soon:hover { transform: none; box-shadow: 0 4px 14px rgba(0,14,53,.10); }
.explore-card.is-coming-soon .explore-overlay { background: linear-gradient(to top, rgba(0,14,53,.92) 0%, rgba(0,14,53,.6) 55%, rgba(0,14,53,.4) 100%); }
.explore-card.is-coming-soon .explore-icon,
.explore-card.is-coming-soon .explore-name,
.explore-card.is-coming-soon .explore-desc { opacity: .82; }
.explore-link--soon { color: var(--targ-highlight-light); text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.explore-soon-badge {
position: absolute; top: 14px; right: 14px; z-index: 2;
background: var(--gold, var(--targ-highlight)); color: var(--navy, var(--targ-primary));
font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
padding: 5px 11px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
@media (max-width: 900px) { .explore-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.communities-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
border-radius: 10px;
overflow: hidden;
}
.community-card {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
cursor: pointer;
display: block;
}
/* Archive variant (/communities/) — separated, rounded cards, responsive cols */
.communities-grid--archive {
gap: 16px;
border-radius: 0;
overflow: visible;
}
.communities-grid--archive .community-card { border-radius: 10px; }
@media (max-width: 1024px) { .communities-grid--archive { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .communities-grid--archive { grid-template-columns: 1fr; } }
.community-card.large { grid-column: span 2; aspect-ratio: auto; }
.community-card img {
position: absolute;
inset: 0;
display: block;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.community-card:hover img { transform: scale(1.07); }
.community-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,14,53,.72) 0%, transparent 60%);
transition: background var(--targ-transition);
}
.community-card:hover .community-overlay {
background: linear-gradient(to top, rgba(0,14,53,.85) 0%, rgba(0,14,53,.2) 60%);
}
.community-body {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 20px 22px;
display: flex; align-items: flex-end; justify-content: space-between;
}
.community-name {
font-family: var(--targ-font-heading);
font-size: 22px;
font-weight: 500;
color: var(--targ-white);
line-height: 1.2;
}
.community-card.large .community-name { font-size: 30px; }
.community-tag {
font-size: 10px;
color: var(--targ-highlight-light);
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
margin-top: 4px;
}
.community-arrow {
width: 36px; height: 36px;
border: 1.5px solid rgba(255,255,255,.4);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.7);
font-size: 13px;
transition: all var(--targ-transition);
flex-shrink: 0;
}
.community-card:hover .community-arrow { background: var(--targ-white); color: var(--targ-primary); border-color: var(--targ-white); }
.communities-all {
display: flex; align-items: center; justify-content: center;
margin-top: 32px;
gap: 10px;
}
.communities-all a { font-size: 13px; font-weight: 600; color: var(--targ-primary-mid); }
.communities-all a:hover { color: var(--targ-accent); }
/* ═══════════════════════════════════════════════
BLOG / INSIGHTS
════════════════════════════════════════════════ */
.blog-section { background: var(--targ-white); }
.blog-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 24px;
}
.blog-card {
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--targ-border);
background: var(--targ-white);
transition: box-shadow var(--targ-transition);
cursor: pointer;
display: block;
}
.blog-card:hover { box-shadow: var(--targ-shadow-md); }
.blog-img { aspect-ratio: 16/9; overflow: hidden; }
.blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.blog-card:hover .blog-img img { transform: scale(1.04); }
.blog-body { padding: 20px; }
.blog-cat {
display: inline-flex; align-items: center; gap: 5px;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 10px;
padding: 3px 10px;
border-radius: 3px;
background: var(--targ-surface);
color: var(--targ-primary-mid);
}
.blog-cat.market { background: var(--targ-primary); color: var(--targ-highlight-light); }
.blog-title {
font-family: var(--targ-font-heading);
font-size: 20px;
font-weight: 500;
color: var(--targ-text);
line-height: 1.35;
margin-bottom: 10px;
}
.blog-card.featured .blog-title { font-size: 24px; }
.blog-excerpt {
font-size: 13px;
color: var(--targ-text-muted);
line-height: 1.65;
margin-bottom: 14px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-meta {
display: flex; align-items: center; justify-content: space-between;
font-size: 11.5px;
color: var(--targ-text-muted);
padding-top: 12px;
border-top: 1px solid var(--targ-border);
}
.blog-date { display: flex; align-items: center; gap: 5px; }
.blog-read { color: var(--targ-primary-mid); font-weight: 600; transition: color var(--targ-transition); }
.blog-read:hover { color: var(--targ-accent); }
/* Archive/landing variant — even 2-up grid when the blog grid sits beside a
sidebar (page-blogs.php, index.php). Overrides the homepage 1.5fr 1fr 1fr. */
.blog-grid--archive { grid-template-columns: 1fr 1fr; }
/* ═══════════════════════════════════════════════
CONTACT SECTION
════════════════════════════════════════════════ */
.contact-section {
background: var(--targ-surface);
border-top: 1px solid var(--targ-border);
border-bottom: 1px solid var(--targ-border);
}
.contact-section.standalone { padding: 80px 24px; }
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.contact-section.standalone .contact-grid {
max-width: 1320px;
margin: 0 auto;
gap: 64px;
}
.contact-left .section-title { margin-bottom: 16px; }
/* Lift the left column so the H2 lines up with the form's top border,
leaving the "Get In Touch" eyebrow just above it. */
.contact-section.standalone .contact-left { margin-top: -27px; }
@media (max-width: 900px) { .contact-section.standalone .contact-left { margin-top: 0; } }
.contact-info { margin: 28px 0; display: flex; flex-direction: column; gap: 14px; }
.contact-item {
display: flex; align-items: center; gap: 14px;
font-size: 14px;
color: var(--targ-text);
}
.contact-icon {
width: 40px; height: 40px;
background: var(--targ-white);
border: 1px solid var(--targ-border);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 15px;
color: var(--targ-primary);
flex-shrink: 0;
box-shadow: var(--targ-shadow-sm);
}
.contact-icon .fa-whatsapp { color: var(--targ-whatsapp); }
/* Text block beside the icon — stack label + value, vertically centred on the icon */
.contact-item > div:last-child {
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
min-width: 0;
}
.contact-item-label { font-size: 10px; color: var(--targ-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; line-height: 1.3; }
.contact-item-value { display: block; font-weight: 500; color: var(--targ-text); line-height: 1.35; }
a.contact-item-value:hover { color: var(--targ-accent); }
.contact-form-wrap {
background: var(--targ-white);
border: 1px solid var(--targ-border);
border-radius: 12px;
padding: 36px;
box-shadow: var(--targ-shadow-md);
}
.form-title {
font-family: var(--targ-font-heading);
font-size: 24px;
font-weight: 500;
color: var(--targ-text);
margin-bottom: 6px;
}
.form-sub { font-size: 13px; color: var(--targ-text-muted); margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--targ-text-muted);
font-weight: 600;
}
.form-group input, .form-group select, .form-group textarea {
padding: 11px 14px;
border: 1.5px solid var(--targ-border);
border-radius: var(--targ-radius);
font-size: 13.5px;
font-family: var(--targ-font-body);
color: var(--targ-text);
background: var(--targ-white);
transition: border-color var(--targ-transition);
width: 100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--targ-primary); }
.form-group textarea { resize: vertical; min-height: 90px; }
.form-submit {
width: 100%;
padding: 14px;
background: var(--targ-accent);
color: var(--targ-white);
border: none;
border-radius: var(--targ-radius);
font-size: 14px;
font-weight: 600;
font-family: var(--targ-font-body);
cursor: pointer;
transition: background var(--targ-transition);
margin-top: 6px;
display: flex; align-items: center; justify-content: center; gap: 8px;
letter-spacing: 0.03em;
}
.form-submit:hover { background: var(--targ-accent-dark); }
.form-disclaimer { font-size: 11px; color: var(--targ-text-muted); margin-top: 10px; text-align: center; }
/* Contact Form 7 reset */
.wpcf7-form p { margin-bottom: 16px; line-height: 1.5; }
/* Labels: CF7 emits the label text as a plain text node (often followed by a
)
immediately before the field. Force the label/text onto its own line with clear
spacing so it never sits underneath / hidden behind the field above it. */
.wpcf7-form label {
display: block;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--targ-text-muted);
font-weight: 600;
line-height: 1.4;
margin-bottom: 6px;
}
.wpcf7-form label .wpcf7-form-control-wrap { margin-top: 6px; }
.wpcf7-form label br { display: none; }
.wpcf7-form .wpcf7-form-control-wrap { display: block; margin-top: 4px; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
width: 100%;
padding: 11px 14px;
border: 1.5px solid var(--targ-border);
border-radius: var(--targ-radius);
font-size: 13.5px;
font-family: var(--targ-font-body);
color: var(--targ-text);
background: var(--targ-white);
transition: border-color var(--targ-transition);
}
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--targ-primary); }
.wpcf7-form textarea { min-height: 90px; resize: vertical; }
.wpcf7-submit {
width: 100%;
padding: 14px;
background: var(--targ-accent) !important;
color: var(--targ-white) !important;
border: none !important;
border-radius: var(--targ-radius) !important;
font-size: 14px !important;
font-weight: 600 !important;
font-family: var(--targ-font-body) !important;
cursor: pointer !important;
transition: background var(--targ-transition) !important;
}
.wpcf7-submit:hover { background: var(--targ-accent-dark) !important; }
/* ── Contact-Us form: required/optional hints, helper notes, radio/checkbox groups ── */
.req { color: var(--targ-accent); font-weight: 700; }
.opt { color: var(--targ-text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11px; }
.form-note {
display: flex; align-items: flex-start; gap: 7px;
margin: 8px 0 0;
font-size: 12px;
line-height: 1.5;
color: var(--targ-text-muted);
text-transform: none;
letter-spacing: 0;
font-weight: 400;
}
.form-note i { color: var(--targ-accent); margin-top: 2px; flex-shrink: 0; }
.cf-form .form-row { margin-bottom: 18px; }
.cf-form .form-group { gap: 8px; }
.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-checkbox {
display: flex; flex-wrap: wrap; gap: 10px 18px;
margin-top: 2px;
}
.wpcf7-form .interests-grid .wpcf7-checkbox { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
@media (max-width: 560px) { .wpcf7-form .interests-grid .wpcf7-checkbox { grid-template-columns: 1fr; } }
.wpcf7-form .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-list-item label {
display: flex; align-items: center; gap: 8px;
margin: 0;
font-size: 13.5px;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
color: var(--targ-text);
cursor: pointer;
}
.wpcf7-form .wpcf7-list-item input[type="radio"],
.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
width: 17px; height: 17px;
accent-color: var(--targ-accent);
margin: 0;
flex-shrink: 0;
}
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item label { align-items: flex-start; font-size: 12.5px; color: var(--targ-text-muted); }
.form-consent {
margin: 12px 0 0;
font-size: 11.5px;
line-height: 1.5;
color: var(--targ-text-muted);
text-align: center;
text-transform: none;
letter-spacing: 0;
}
/* ── Contact Us page: thin contact bar + centred form (page-contact-us.php) ── */
.contact-bar { background: var(--targ-primary); }
.contact-bar-inner {
max-width: 1100px;
margin: 0 auto;
padding: 15px 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px 28px;
}
.contact-bar-item {
display: inline-flex; align-items: center; gap: 9px;
font-size: 16px;
color: #fff;
transition: color var(--targ-transition);
}
.contact-bar-item:hover { color: var(--targ-highlight-light); }
.contact-bar-item i { color: var(--targ-highlight); font-size: 15px; }
.contact-bar-item .fa-whatsapp { color: var(--targ-whatsapp); }
.cb-label {
color: var(--targ-highlight-light);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.cb-value { font-weight: 600; font-size: 16px; letter-spacing: 0.01em; }
.contact-bar-div { width: 1px; height: 20px; background: rgba(255,255,255,.25); }
@media (max-width: 680px) {
.contact-bar-div { display: none; }
.contact-bar-inner { gap: 8px 18px; padding: 12px 18px; }
.cb-label { display: none; }
.contact-bar-item, .cb-value { font-size: 15px; }
}
.contact-us-form { background: var(--targ-surface); padding: 56px 24px 80px; }
.contact-us-form-inner { max-width: 760px; margin: 0 auto; }
.contact-us-lead {
text-align: center;
font-size: 15px;
line-height: 1.7;
color: var(--targ-text-muted);
max-width: 600px;
margin: 0 auto 28px;
}
/* ── Restore list styling inside editorial content ──
(the global `ul { list-style: none }` reset strips bullets everywhere; put
them back for imported page/community/blog body content only) */
.entry-content ul, .single-content ul, .t1-content ul,
.entry-content ol, .single-content ol, .t1-content ol {
margin: 0 0 20px;
padding-left: 24px;
}
.entry-content ul, .single-content ul, .t1-content ul { list-style: disc; }
.entry-content ol, .single-content ol, .t1-content ol { list-style: decimal; }
.entry-content ul ul, .entry-content ol ul, .single-content ul ul { list-style: circle; }
.entry-content li, .single-content li, .t1-content li {
margin: 0 0 8px;
line-height: 1.7;
color: var(--targ-text);
}
.entry-content li > ul, .entry-content li > ol,
.single-content li > ul, .single-content li > ol { margin: 8px 0 0; }
/* ── Paragraph spacing in editorial content ──
The global `*{margin:0}` reset zeroes paragraph margins and there was no
`.entry-content p` rule, so imported/pasted body copy ran together with no
gap. Restore it (and drop the trailing gap on the last paragraph). */
.entry-content p, .single-content p, .t1-content p, .gc-description p { margin: 0 0 1.15em; }
.entry-content > p:last-child, .single-content > p:last-child, .t1-content > p:last-child { margin-bottom: 0; }
/* Keep list bullets from sliding under a left/right floated image: a list forms
its own block-formatting context so it sits beside the float, not under it. */
.entry-content ul, .entry-content ol, .single-content ul, .single-content ol,
.t1-content ul, .t1-content ol { overflow: hidden; }
/* ── Editorial content tables — site-wide standard ──
Any in page / post / community content (imported, pasted, or new)
automatically gets this look — no per-table inline styling needed.
(main.js wraps each table in .table-scroll for horizontal scroll on mobile.) */
/* In-page anchor jumps (TOC links) land below the fixed header instead of under it */
.entry-content h2, .entry-content h3, .entry-content h4,
.single-content h2, .single-content h3, .single-content h4,
.t1-content h2, .t1-content h3, .t1-content h4 { scroll-margin-top: 120px; }
/* Inline images inside editorial content (e.g. gated-community descriptions) */
.entry-content img, .single-content img, .t1-content img, .gc-description img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 8px 0 20px;
}
/* ── Aligned images ──
The `.entry-content img` rule above is more specific than the global
`.alignleft` / `.alignright`, so it was overriding their side margins and
images ended up flush against the text. Restore float + margin at matching
specificity, and give the wrapping text real breathing room. */
.entry-content img.alignleft, .single-content img.alignleft, .t1-content img.alignleft, .gc-description img.alignleft,
.entry-content .alignleft, .single-content .alignleft, .t1-content .alignleft, .gc-description .alignleft {
float: left; margin: 6px 28px 16px 0;
}
.entry-content img.alignright, .single-content img.alignright, .t1-content img.alignright, .gc-description img.alignright,
.entry-content .alignright, .single-content .alignright, .t1-content .alignright, .gc-description .alignright {
float: right; margin: 6px 0 16px 28px;
}
.entry-content img.aligncenter, .single-content img.aligncenter, .t1-content img.aligncenter, .gc-description img.aligncenter {
display: block; margin: 16px auto; float: none;
}
/* Don't double-space the ![]()
inside an aligned (block editor / captions). */
.entry-content figure.alignleft img, .entry-content figure.alignright img,
.single-content figure.alignleft img, .single-content figure.alignright img,
.gc-description figure.alignleft img, .gc-description figure.alignright img { margin: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 24px; }
.entry-content table, .single-content table, .t1-content table {
width: 100%;
border-collapse: collapse;
margin: 0 0 24px;
font-family: var(--targ-font-body);
font-size: 14.5px;
line-height: 1.6;
color: var(--targ-text);
background: var(--targ-white);
border: 1px solid var(--targ-border);
border-radius: 8px;
overflow: hidden; /* clips the rounded corners over the navy header */
}
.table-scroll > table { margin: 0; }
.entry-content th, .single-content th, .t1-content th,
.entry-content td, .single-content td, .t1-content td {
padding: 12px 16px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--targ-border);
}
/* Header row — navy fill, white text, gold underline (works with or a
first row of cells) */
.entry-content thead th, .single-content thead th, .t1-content thead th,
.entry-content tr:first-child th, .single-content tr:first-child th, .t1-content tr:first-child th {
background: var(--targ-primary);
color: var(--targ-white);
font-weight: 600;
letter-spacing: 0.02em;
border-bottom: 2px solid var(--targ-highlight);
}
/* Sand zebra striping + hover */
.entry-content tbody tr:nth-child(even) td,
.single-content tbody tr:nth-child(even) td,
.t1-content tbody tr:nth-child(even) td { background: var(--targ-surface); }
.entry-content tbody tr:hover td,
.single-content tbody tr:hover td,
.t1-content tbody tr:hover td { background: var(--targ-surface-dark); }
.entry-content tbody tr:last-child td,
.single-content tbody tr:last-child td,
.t1-content tbody tr:last-child td { border-bottom: none; }
/* Optional caption styling */
.entry-content table caption, .single-content table caption, .t1-content table caption {
caption-side: top;
text-align: left;
font-family: var(--targ-font-heading);
font-size: 19px;
color: var(--targ-primary);
margin-bottom: 10px;
}
@media (max-width: 600px) {
.entry-content th, .single-content th, .t1-content th,
.entry-content td, .single-content td, .t1-content td { padding: 10px 12px; font-size: 13.5px; }
}
/* ── Community photo slideshow (single.php, below the first H2) ── */
.comm-slideshow {
position: relative;
margin: 28px 0 32px;
border-radius: 12px;
overflow: hidden;
background: var(--targ-primary);
aspect-ratio: 16 / 9;
box-shadow: var(--targ-shadow-md);
}
.comm-slides { position: absolute; inset: 0; }
.comm-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.8s ease; }
.comm-slide.active { opacity: 1; }
.comm-slide img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.comm-slide-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 42px; height: 42px;
border: none; border-radius: 50%;
background: rgba(0,14,53,.55); color: #fff;
cursor: pointer; z-index: 2;
display: flex; align-items: center; justify-content: center;
font-size: 15px;
transition: background var(--targ-transition);
}
.comm-slide-nav:hover { background: var(--targ-accent); }
.comm-slide-nav.prev { left: 14px; }
.comm-slide-nav.next { right: 14px; }
.comm-dots {
position: absolute; bottom: 14px; left: 0; right: 0; z-index: 2;
display: flex; justify-content: center; gap: 8px;
}
.comm-dot {
width: 9px; height: 9px; padding: 0;
border: none; border-radius: 50%;
background: rgba(255,255,255,.5);
cursor: pointer;
transition: background var(--targ-transition), transform var(--targ-transition);
}
.comm-dot:hover { background: rgba(255,255,255,.8); }
.comm-dot.active { background: #fff; transform: scale(1.25); }
@media (max-width: 600px) {
.comm-slideshow { aspect-ratio: 4 / 3; }
.comm-slide-nav { width: 36px; height: 36px; font-size: 13px; }
}
/* ═══════════════════════════════════════════════
FOOTER
════════════════════════════════════════════════ */
.footer { background: var(--targ-text); color: rgba(255,255,255,.75); }
.footer-main {
padding: 64px 24px 48px;
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 48px;
}
.footer-brand img { height: 38px; filter: brightness(0) invert(1); margin-bottom: 16px; }
.footer-brand p {
font-size: 13px;
line-height: 1.7;
color: rgba(255,255,255,.55);
max-width: 280px;
margin-bottom: 20px;
}
.footer-contact-list { display: flex; flex-direction: column; gap: 10px; }
.footer-contact-item {
display: flex; align-items: flex-start; gap: 10px;
font-size: 12.5px;
color: rgba(255,255,255,.6);
}
.footer-contact-item i { color: var(--targ-highlight); margin-top: 2px; width: 14px; text-align: center; flex-shrink: 0; }
.footer-social { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.footer-social a {
width: 32px; height: 32px;
background: rgba(255,255,255,.1);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px;
color: rgba(255,255,255,.6);
transition: all var(--targ-transition);
}
.footer-social a:hover { background: var(--targ-accent); color: var(--targ-white); }
.footer-col-title {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--targ-highlight);
font-weight: 600;
margin-bottom: 16px;
font-family: var(--targ-font-body);
}
/* wp_nav_menu resets for footer columns */
.footer-col-links,
.footer-col-links ul { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.footer-col-links a, .footer-links a {
font-size: 13px;
color: rgba(255,255,255,.55);
transition: color var(--targ-transition);
line-height: 1.4;
}
.footer-col-links a:hover, .footer-links a:hover { color: var(--targ-white); }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
/* Footer SEO Index */
.footer-seo {
background: rgba(0,0,0,.25);
border-top: 1px solid rgba(255,255,255,.07);
padding: 32px 24px;
}
.footer-seo-inner { max-width: 1320px; margin: 0 auto; }
.footer-seo-title {
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,.25);
margin-bottom: 16px;
}
.footer-seo-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.footer-seo-links { display: flex; flex-direction: column; gap: 5px; }
.footer-seo-links a {
font-size: 11.5px;
color: rgba(255,255,255,.35);
transition: color var(--targ-transition);
line-height: 1.5;
}
.footer-seo-links a:hover { color: rgba(255,255,255,.7); }
.footer-bar {
border-top: 1px solid rgba(255,255,255,.07);
padding: 18px 24px;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1320px;
margin: 0 auto;
}
.footer-copyright { font-size: 12px; color: rgba(255,255,255,.3); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: 12px; color: rgba(255,255,255,.3); transition: color var(--targ-transition); }
.footer-legal a:hover { color: rgba(255,255,255,.6); }
/* ── Site Index promoted to MAIN footer menu ── */
.footer-seo--main {
background: transparent;
border-top: none;
padding: 56px 24px 8px;
}
.footer-seo--main .footer-seo-title {
font-size: 11px;
letter-spacing: 0.14em;
color: var(--targ-highlight);
margin-bottom: 24px;
}
.footer-seo--main .footer-seo-grid { gap: 24px 36px; }
.footer-seo--main .footer-seo-links { gap: 0; } /* tightened 2026-07-29 per Dave (was 9px) */
.footer-seo--main .footer-seo-links a {
font-size: 13px;
color: rgba(255,255,255,.6);
line-height: 1.25; /* tightened 2026-07-29 per Dave (was 1.45) */
}
.footer-seo--main .footer-seo-links a:hover { color: var(--targ-white); }
/* ── Footer brand band (logo + tagline / newsletter + contact) ── */
.footer-brand-band {
border-top: 1px solid rgba(255,255,255,.08);
border-bottom: 1px solid rgba(255,255,255,.08);
margin-top: 24px;
}
.footer-brand-band-inner {
max-width: 1320px;
margin: 0 auto;
padding: 36px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
flex-wrap: wrap;
}
.fbb-brand { display: flex; align-items: center; gap: 22px; flex: 1 1 360px; }
.fbb-brand img { height: 46px; filter: brightness(0) invert(1); flex-shrink: 0; }
.fbb-tagline { display: flex; flex-direction: column; gap: 5px; border-left: 1px solid rgba(255,255,255,.15); padding-left: 22px; }
.fbb-tagline-main {
font-family: var(--targ-font-heading);
font-size: 18px;
font-weight: 500;
color: var(--targ-white);
line-height: 1.25;
}
.fbb-tagline-sub { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.5; }
.fbb-right { display: flex; flex-direction: column; gap: 18px; flex: 1 1 380px; align-items: flex-end; }
.fbb-newsletter { width: 100%; max-width: 420px; }
.fbb-newsletter-label {
display: flex; align-items: center; gap: 8px;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
color: var(--targ-highlight);
margin-bottom: 10px;
justify-content: flex-end;
}
.fbb-newsletter-form,
.fbb-newsletter .wpcf7-form { display: flex; gap: 8px; }
.fbb-newsletter-form input[type="email"],
.fbb-newsletter .wpcf7-form input[type="email"] {
flex: 1 1 auto;
padding: 11px 14px;
border: 1px solid rgba(255,255,255,.2);
border-radius: var(--targ-radius);
background: rgba(255,255,255,.06);
color: var(--targ-white);
font-size: 13px;
font-family: var(--targ-font-body);
}
.fbb-newsletter-form input::placeholder,
.fbb-newsletter .wpcf7-form input::placeholder { color: rgba(255,255,255,.4); }
.fbb-newsletter-form input:focus,
.fbb-newsletter .wpcf7-form input:focus { outline: none; border-color: var(--targ-highlight); }
.fbb-newsletter-form button,
.fbb-newsletter .wpcf7-form .wpcf7-submit {
display: inline-flex; align-items: center; gap: 8px;
padding: 11px 20px !important;
background: var(--targ-accent) !important;
color: var(--targ-white) !important;
border: none !important;
border-radius: var(--targ-radius) !important;
font-size: 13px !important;
font-weight: 600 !important;
font-family: var(--targ-font-body) !important;
white-space: nowrap;
cursor: pointer;
transition: background var(--targ-transition);
}
.fbb-newsletter-form button:hover,
.fbb-newsletter .wpcf7-form .wpcf7-submit:hover { background: var(--targ-accent-dark) !important; }
.fbb-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 18px; }
.fbb-contact-item {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12.5px;
color: rgba(255,255,255,.6);
transition: color var(--targ-transition);
}
.fbb-contact-item:hover { color: var(--targ-white); }
.fbb-contact-item i { color: var(--targ-highlight); }
.fbb-contact-item .fa-whatsapp { color: var(--targ-whatsapp); }
.fbb-contact-item span { color: rgba(255,255,255,.35); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.fbb-social { margin-top: 0; }
@media (max-width: 900px) {
.footer-brand-band-inner { flex-direction: column; align-items: stretch; gap: 28px; }
.fbb-right { align-items: stretch; }
.fbb-newsletter { max-width: none; }
.fbb-newsletter-label, .fbb-contact { justify-content: flex-start; }
}
@media (max-width: 560px) {
.fbb-brand { flex-direction: column; align-items: flex-start; gap: 14px; }
.fbb-tagline { border-left: 0; padding-left: 0; }
.fbb-newsletter-form { flex-direction: column; }
.fbb-newsletter-form button { justify-content: center; }
}
/* ═══════════════════════════════════════════════
T1 PAGE HERO (short banner)
════════════════════════════════════════════════ */
.page-hero {
position: relative;
padding-top: 110px;
padding-bottom: 56px;
min-height: 320px;
display: flex;
align-items: flex-end;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--targ-primary);
}
.page-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 55%;
}
.page-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,14,53,.55) 0%, rgba(0,14,53,.72) 60%, rgba(0,14,53,.88) 100%);
}
.page-hero-content {
position: relative;
z-index: 2;
max-width: 1320px;
margin: 0 auto;
padding: 0 24px;
width: 100%;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: rgba(255,255,255,.55);
letter-spacing: 0.05em;
margin-bottom: 14px;
font-family: var(--targ-font-body);
}
.breadcrumb a { color: rgba(255,255,255,.55); transition: color var(--targ-transition); }
.breadcrumb a:hover { color: var(--targ-highlight-light); }
.breadcrumb i { font-size: 8px; opacity: 0.6; }
.page-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--targ-highlight-light);
font-family: var(--targ-font-body);
font-weight: 600;
margin-bottom: 12px;
}
.page-hero-title {
font-family: var(--targ-font-heading);
font-size: clamp(30px, 4vw, 52px);
font-weight: 500;
color: var(--targ-white);
line-height: 1.1;
letter-spacing: -0.01em;
margin-bottom: 12px;
}
.page-hero-title em { font-style: italic; color: var(--targ-highlight-light); }
.page-hero-sub {
font-size: 15px;
color: rgba(255,255,255,.75);
font-weight: 300;
max-width: 560px;
line-height: 1.65;
}
/* ═══════════════════════════════════════════════
T1 PAGE LAYOUT — 2-col content + sidebar
════════════════════════════════════════════════ */
.page-wrap {
max-width: 1320px;
margin: 0 auto;
padding: 60px 24px 80px;
display: grid;
grid-template-columns: 1fr 340px;
gap: 52px;
align-items: start;
}
.page-main h2 {
font-family: var(--targ-font-heading);
font-size: clamp(22px, 2.5vw, 32px);
font-weight: 500;
color: var(--targ-text);
line-height: 1.2;
margin: 40px 0 14px;
letter-spacing: -0.01em;
}
.page-main h2:first-child { margin-top: 0; }
.page-main h3 {
font-family: var(--targ-font-body);
font-size: 16px;
font-weight: 600;
color: var(--targ-primary);
margin: 28px 0 10px;
letter-spacing: 0.01em;
}
.page-main p {
font-size: 15px;
color: var(--targ-text-muted);
line-height: 1.8;
margin-bottom: 18px;
}
.page-main p strong { color: var(--targ-text); font-weight: 600; }
.page-main ul.content-list {
list-style: none;
margin: 0 0 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.page-main ul.content-list li {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 15px;
color: var(--targ-text-muted);
line-height: 1.65;
}
.page-main ul.content-list li::before {
content: '';
display: block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--targ-highlight);
flex-shrink: 0;
margin-top: 9px;
}
.content-divider { border: none; border-top: 1px solid var(--targ-border); margin: 40px 0; }
.pullquote {
border-left: 3px solid var(--targ-highlight);
margin: 36px 0;
padding: 20px 28px;
background: var(--targ-surface);
border-radius: 0 var(--targ-radius) var(--targ-radius) 0;
}
.pullquote p {
font-family: var(--targ-font-heading);
font-size: 20px;
font-style: italic;
color: var(--targ-primary-mid);
line-height: 1.5;
margin: 0;
}
.pullquote cite {
display: block;
margin-top: 8px;
font-size: 12px;
font-style: normal;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--targ-highlight);
font-family: var(--targ-font-body);
}
.content-callout {
background: var(--targ-primary);
border-radius: 10px;
padding: 28px 32px;
margin: 36px 0;
display: flex;
gap: 20px;
align-items: flex-start;
}
.callout-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(201,169,110,.2);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 18px;
color: var(--targ-highlight-light);
}
.callout-body p { color: rgba(255,255,255,.82); font-size: 14px; margin: 0; line-height: 1.7; }
.callout-body strong {
color: var(--targ-highlight-light);
display: block;
font-family: var(--targ-font-heading);
font-size: 19px;
font-weight: 600;
letter-spacing: 0.01em;
margin-bottom: 8px;
}
/* ═══════════════════════════════════════════════
SIDEBAR WIDGETS
════════════════════════════════════════════════ */
.page-sidebar { display: flex; flex-direction: column; gap: 24px; }
/* Property + gated-community detail sidebars: stack widgets with consistent
spacing (previously they had no gap and touched). */
.prop-sidebar { display: flex; flex-direction: column; gap: 24px; }
.widget {
background: var(--targ-white);
border: 1px solid var(--targ-border);
border-radius: 10px;
overflow: hidden;
}
.widget-title {
font-family: var(--targ-font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--targ-highlight);
padding: 16px 20px 14px;
border-bottom: 1px solid var(--targ-border);
background: var(--targ-surface);
}
.widget-body { padding: 20px; }
.compact-search .widget-body { padding: 16px; }
.compact-search .field-group { margin-bottom: 10px; }
.compact-search .field-group label {
display: block;
font-size: 10px;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--targ-text-muted);
font-weight: 600;
margin-bottom: 5px;
}
.compact-search .field-group select,
.compact-search .field-group input {
width: 100%;
height: 38px;
padding: 0 10px;
border: 1.5px solid var(--targ-border);
border-radius: var(--targ-radius);
font-size: 13px;
font-family: var(--targ-font-body);
color: var(--targ-text);
background: var(--targ-white);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: border-color var(--targ-transition);
}
.compact-search .field-group select:focus,
.compact-search .field-group input:focus { outline: none; border-color: var(--targ-primary); }
.compact-search .select-wrap { position: relative; }
.compact-search .select-wrap::after {
content: '\f107';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
right: 10px; top: 50%; transform: translateY(-50%);
font-size: 10px;
color: var(--targ-text-muted);
pointer-events: none;
}
.btn-search-widget {
width: 100%;
height: 40px;
background: var(--targ-accent);
color: var(--targ-white);
border: none;
border-radius: var(--targ-radius);
font-size: 13px;
font-weight: 600;
font-family: var(--targ-font-body);
cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 14px;
transition: background var(--targ-transition);
letter-spacing: 0.04em;
}
.btn-search-widget:hover { background: var(--targ-accent-dark); }
.reach-out-intro { font-size: 14px; color: var(--targ-text-muted); line-height: 1.65; margin-bottom: 18px; }
.reach-contact-item {
display: flex; align-items: center; gap: 12px;
padding: 11px 0;
border-bottom: 1px solid var(--targ-border);
}
.reach-contact-item:last-of-type { border-bottom: none; margin-bottom: 4px; }
.reach-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--targ-surface);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 14px;
}
.reach-icon.whatsapp { background: #e8f7ef; color: var(--targ-whatsapp); }
.reach-icon.phone { color: var(--targ-primary); }
.reach-contact-label { font-size: 10px; color: var(--targ-text-muted); letter-spacing: 0.05em; text-transform: uppercase; }
.reach-contact-value { font-size: 13px; font-weight: 600; color: var(--targ-text); }
.btn-reach-out {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%;
padding: 12px;
margin-top: 16px;
background: var(--targ-primary);
color: var(--targ-white);
border-radius: var(--targ-radius);
font-size: 13px;
font-weight: 600;
font-family: var(--targ-font-body);
border: none;
cursor: pointer;
transition: background var(--targ-transition);
letter-spacing: 0.03em;
}
.btn-reach-out:hover { background: var(--targ-primary-mid); }
.sidebar-listing {
display: flex; gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--targ-border);
text-decoration: none;
transition: background var(--targ-transition);
margin: 0 -20px;
padding-left: 20px;
padding-right: 20px;
}
.sidebar-listing:first-child { padding-top: 4px; }
.sidebar-listing:last-child { border-bottom: none; padding-bottom: 4px; }
.sidebar-listing:hover { background: var(--targ-surface); }
.sidebar-listing-img {
width: 78px; height: 62px;
border-radius: 5px;
overflow: hidden;
flex-shrink: 0;
}
.sidebar-listing-img img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-listing-info { flex: 1; min-width: 0; }
.sidebar-listing-price { font-size: 13px; font-weight: 700; color: var(--targ-primary); margin-bottom: 3px; }
.sidebar-listing-name { font-size: 12px; color: var(--targ-text); line-height: 1.3; margin-bottom: 4px; font-weight: 500; }
.sidebar-listing-meta { font-size: 11px; color: var(--targ-text-muted); display: flex; gap: 8px; }
.community-links-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px 4px;
}
.community-link-item {
display: flex; align-items: center; gap: 5px;
padding: 4px 8px; /* tightened 2026-07-27 — the list is now all
communities (19+), so rows are compact to
keep the widget from dominating the sidebar */
font-size: 11.5px;
color: var(--targ-text-muted);
border-radius: 4px;
transition: all var(--targ-transition);
line-height: 1.25;
}
.community-link-item:hover { background: var(--targ-surface); color: var(--targ-primary); }
.community-link-item i { font-size: 8px; color: var(--targ-highlight); flex-shrink: 0; }
.community-links-all {
display: block;
text-align: center;
font-size: 12px;
font-weight: 600;
color: var(--targ-primary);
padding: 10px;
margin-top: 6px;
border-top: 1px solid var(--targ-border);
transition: color var(--targ-transition);
letter-spacing: 0.04em;
}
.community-links-all:hover { color: var(--targ-accent); }
/* Community page — Basic Community Information widget */
.community-info-list { list-style: none; margin: 0; padding: 0; }
.community-info-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--targ-border);
}
.community-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.community-info-row:first-child { padding-top: 0; }
.community-info-icon {
width: 32px; height: 32px;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--targ-surface);
color: var(--targ-accent);
font-size: 14px;
}
.community-info-label {
font-size: 13px;
font-weight: 500;
color: var(--targ-text);
}
.community-info-value {
margin-left: auto;
font-size: 14px;
font-weight: 700;
color: var(--targ-primary);
}
/* Community page — View Properties button (standalone, between widgets) */
.community-properties-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
text-align: center;
}
.blog-mini-post {
display: flex; gap: 12px;
padding: 14px 0;
border-bottom: 1px solid var(--targ-border);
text-decoration: none;
}
.blog-mini-post:last-child { border-bottom: none; padding-bottom: 0; }
.blog-mini-thumb {
width: 68px; height: 54px;
border-radius: 5px;
overflow: hidden;
flex-shrink: 0;
}
.blog-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-mini-title {
font-size: 13px;
font-weight: 500;
color: var(--targ-text);
line-height: 1.35;
margin-bottom: 5px;
transition: color var(--targ-transition);
}
.blog-mini-post:hover .blog-mini-title { color: var(--targ-primary); }
.blog-mini-date { font-size: 11px; color: var(--targ-text-muted); }
/* Blog sidebar — Search + Blog Categories (sidebar-blog.php) */
.blog-search-form { display: flex; gap: 8px; }
.blog-search-input {
flex: 1; min-width: 0; padding: 10px 12px; font-size: 14px; font-family: inherit;
border: 1px solid #d9d9de; border-radius: 6px; background: #fff; color: var(--targ-text);
}
.blog-search-input:focus { outline: none; border-color: var(--targ-highlight); box-shadow: 0 0 0 2px rgba(201,169,110,.2); }
.blog-search-btn {
flex: 0 0 auto; width: 42px; border: none; border-radius: 6px; cursor: pointer;
background: var(--targ-accent); color: #fff; font-size: 14px; transition: background .2s;
}
.blog-search-btn:hover { background: var(--targ-accent-dark); }
.blog-cat-list { list-style: none; margin: 0; padding: 0; }
.blog-cat-item { border-bottom: 1px solid #eee; }
.blog-cat-item:last-child { border-bottom: none; }
.blog-cat-item a {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 4px; color: var(--targ-text); font-size: 14px; font-weight: 500;
text-decoration: none; transition: color .18s;
}
.blog-cat-item a:hover .blog-cat-name { color: var(--targ-accent); }
.blog-cat-item.is-active a .blog-cat-name { color: var(--targ-accent); font-weight: 700; }
.blog-cat-name { line-height: 1.3; }
.blog-cat-count {
flex: 0 0 auto; min-width: 26px; text-align: center; padding: 2px 8px; border-radius: 20px;
background: var(--targ-surface); color: var(--targ-primary); font-size: 12px; font-weight: 600;
}
.blog-cat-item.is-active .blog-cat-count { background: var(--targ-accent); color: #fff; }
.blog-cat-empty { font-size: 13px; color: var(--targ-text-muted); margin: 0; }
.email-signup-widget { background: linear-gradient(135deg, var(--targ-primary) 0%, var(--targ-primary-mid) 100%); }
.email-signup-widget .widget-title { background: rgba(255,255,255,.06); color: var(--targ-highlight-light); border-bottom-color: rgba(255,255,255,.1); }
.email-signup-widget .widget-body { padding: 20px; }
.email-signup-desc { font-size: 13px; color: rgba(255,255,255,.75); line-height: 1.6; margin-bottom: 16px; }
.email-signup-form { display: flex; flex-direction: column; gap: 10px; }
.email-signup-form input {
width: 100%;
height: 40px;
padding: 0 12px;
border: 1.5px solid rgba(255,255,255,.2);
border-radius: var(--targ-radius);
font-size: 13px;
font-family: var(--targ-font-body);
background: rgba(255,255,255,.08);
color: var(--targ-white);
transition: border-color var(--targ-transition);
}
.email-signup-form input::placeholder { color: rgba(255,255,255,.35); }
.email-signup-form input:focus { outline: none; border-color: var(--targ-highlight); }
.btn-subscribe {
width: 100%;
height: 40px;
background: var(--targ-highlight);
color: var(--targ-primary);
border: none;
border-radius: var(--targ-radius);
font-size: 13px;
font-weight: 700;
font-family: var(--targ-font-body);
cursor: pointer;
transition: background var(--targ-transition);
letter-spacing: 0.05em;
}
.btn-subscribe:hover { background: var(--targ-highlight-light); }
.email-signup-privacy { font-size: 10px; color: rgba(255,255,255,.35); text-align: center; margin-top: 6px; }
/* ═══════════════════════════════════════════════
SCROLL ANIMATIONS
════════════════════════════════════════════════ */
.fade-up {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up.delay-1 { transition-delay: 0.1s; }
.fade-up.delay-2 { transition-delay: 0.2s; }
.fade-up.delay-3 { transition-delay: 0.3s; }
.fade-up.delay-4 { transition-delay: 0.4s; }
.fade-up.delay-5 { transition-delay: 0.5s; }
/* ═══════════════════════════════════════════════
404 PAGE
════════════════════════════════════════════════ */
.error-404 {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 24px;
text-align: center;
}
.error-404 .error-number {
font-family: var(--targ-font-heading);
font-size: 120px;
color: var(--targ-surface-dark);
line-height: 1;
margin-bottom: 20px;
}
.error-404 h1 {
font-family: var(--targ-font-heading);
font-size: 36px;
color: var(--targ-text);
margin-bottom: 16px;
}
.error-404 p { font-size: 15px; color: var(--targ-text-muted); max-width: 480px; margin: 0 auto 28px; line-height: 1.7; }
/* ═══════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════ */
/* ── 1450px: hide brand text ── */
@media (max-width: 1450px) { .logo-brand { display: none; } }
/* ── 1100px: hamburger nav — always white ── */
@media (max-width: 1100px) {
.main-nav {
background: rgba(255,255,255,.97) !important;
backdrop-filter: blur(8px);
box-shadow: 0 2px 20px rgba(0,0,0,.1);
}
.main-nav:not(.scrolled):not(.interior) .nav-logo img { filter: none; }
.main-nav:not(.scrolled) .logo-brand-name { color: var(--targ-primary); }
.main-nav:not(.scrolled) .hamburger span { background: var(--targ-text); }
.nav-links { display: none; }
.btn-agent { display: none; }
.hamburger { display: flex; }
.btn-search-text { display: none; }
.btn-search { padding: 9px 13px; }
.nav-right { gap: 8px; }
.logo-brand-name { font-size: 15px; }
.logo-brand-sub { font-size: 8px; letter-spacing: 0.12em; }
.categories-scroll-hint { display: flex; }
.trust-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
.trust-divider { display: none; }
}
/* ── 960px: stack sidebar ── */
@media (max-width: 960px) {
.page-wrap { grid-template-columns: 1fr; gap: 40px; }
.page-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.email-signup-widget { grid-column: span 2; }
}
/* ── 900px: tablet ── */
@media (max-width: 900px) {
.search-fields { grid-template-columns: 1fr 1fr 1fr; }
.search-fields .btn-search-main { grid-column: span 3; }
.listings-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
.blog-grid { grid-template-columns: 1fr; }
.communities-grid { grid-template-columns: 1fr 1fr; }
.community-card.large { grid-column: span 2; }
.contact-grid { grid-template-columns: 1fr; gap: 40px; }
.footer-main { grid-template-columns: 1fr 1fr; gap: 36px; }
.footer-seo-grid { grid-template-columns: 1fr 1fr; }
}
/* ── 620px: mobile ── */
@media (max-width: 620px) {
.utility-bar { height: 34px; }
.main-nav { top: 34px; }
.utility-left .utility-contact:not(:first-child) { display: none; }
.utility-divider { display: none; }
.social-icons { display: none; }
.category-card { flex-basis: 64vw; }
.search-fields { grid-template-columns: 1fr 1fr; }
.search-fields .btn-search-main { grid-column: span 2; }
.trust-inner { grid-template-columns: 1fr 1fr; }
.section-header { flex-direction: column; align-items: flex-start; }
.footer-main { grid-template-columns: 1fr; }
.footer-seo-grid { grid-template-columns: 1fr; }
.footer-bar { flex-direction: column; gap: 10px; text-align: center; }
.form-row { grid-template-columns: 1fr; }
.page-hero { padding-top: 96px; }
.page-wrap { padding: 36px 16px 48px; }
.page-sidebar { grid-template-columns: 1fr; }
.email-signup-widget { grid-column: span 1; }
.community-links-grid { grid-template-columns: 1fr; }
}
/* ── 480px: small phones ── */
@media (max-width: 480px) {
.nav-logo img { height: 34px; }
.logo-brand { padding-left: 8px; gap: 6px; }
.logo-brand-name { font-size: 13px; }
.logo-brand-sub { font-size: 7.5px; letter-spacing: 0.1em; }
.nav-inner { padding: 0 14px 0 12px; gap: 10px; }
}
/* ═══════════════════════════════════════════════
WORDPRESS ADMIN BAR OFFSET
Nudges fixed utility bar + nav down by 32px
(46px on mobile) when logged in to WP Admin.
════════════════════════════════════════════════ */
.admin-bar .utility-bar { top: 32px; }
.admin-bar .main-nav { top: 70px; } /* 32px admin bar + 38px utility bar */
.admin-bar .main-nav.scrolled { top: 32px; }
@media screen and (max-width: 782px) {
.admin-bar .utility-bar { top: 46px; }
.admin-bar .main-nav { top: 84px; } /* 46px admin bar + 38px utility bar */
.admin-bar .main-nav.scrolled { top: 46px; }
}
/* ═══════════════════════════════════════════════
PROPERTY ARCHIVE — FILTER BAR
════════════════════════════════════════════════ */
.prop-filter-bar {
background: var(--targ-surface);
border-bottom: 1px solid var(--targ-border);
padding: 0 24px;
position: sticky;
top: 78px; /* below fixed nav */
z-index: 40;
}
.prop-filter-inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 20px;
overflow-x: auto;
scrollbar-width: none;
padding: 14px 0;
}
.prop-filter-inner::-webkit-scrollbar { display: none; }
.prop-filter-label {
font-size: 12px;
font-weight: 600;
color: var(--targ-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
flex-shrink: 0;
}
.prop-filter-tabs {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.prop-filter-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
border-radius: 50px;
font-size: 13px;
font-weight: 500;
color: var(--targ-text);
background: var(--targ-white);
border: 1.5px solid var(--targ-border);
white-space: nowrap;
transition: all var(--targ-transition);
}
.prop-filter-tab:hover { border-color: var(--targ-primary); color: var(--targ-primary); }
.prop-filter-tab.active {
background: var(--targ-primary);
color: var(--targ-white);
border-color: var(--targ-primary);
}
.prop-filter-count {
background: rgba(255,255,255,.2);
font-size: 11px;
padding: 1px 6px;
border-radius: 10px;
}
.prop-filter-tab:not(.active) .prop-filter-count {
background: var(--targ-surface-dark);
color: var(--targ-text-muted);
}
/* ═══════════════════════════════════════════════
PROPERTY ARCHIVE — GRID SECTION
════════════════════════════════════════════════ */
.listings-archive-section {
padding: 60px 24px 80px;
background: var(--targ-white);
}
.prop-archive-grid {
grid-template-columns: repeat(3, 1fr);
}
.prop-results-count {
font-size: 14px;
color: var(--targ-text-muted);
margin-bottom: 28px;
}
.prop-results-count strong { color: var(--targ-text); }
/* Results bar: count on the left, Sort-by dropdown on the right. */
.prop-results-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 28px;
}
.prop-results-bar .prop-results-count { margin-bottom: 0; }
.prop-sort {
display: flex;
align-items: center;
gap: 8px;
}
.prop-sort-label {
font-size: 13px;
color: var(--targ-text-muted);
white-space: nowrap;
}
.prop-sort select {
font-family: inherit;
font-size: 14px;
padding: 8px 30px 8px 12px;
border: 1px solid var(--targ-highlight);
border-radius: 4px;
background: #fff;
color: var(--targ-text);
cursor: pointer;
}
.prop-active-filters {
font-size: 13px;
color: var(--targ-text-muted);
margin: -16px 0 28px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.prop-active-filters strong { color: var(--targ-text); font-weight: 600; }
.prop-active-filters a {
color: var(--targ-accent);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid transparent;
}
.prop-active-filters a:hover { border-bottom-color: var(--targ-accent); }
.listing-status-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
}
.badge-contract {
background: var(--targ-accent);
color: var(--targ-white);
}
.prop-no-results {
text-align: center;
padding: 80px 24px;
color: var(--targ-text-muted);
}
.prop-no-results i { font-size: 48px; color: var(--targ-border); margin-bottom: 20px; }
.prop-no-results h2 { font-family: var(--targ-font-heading); font-size: 28px; color: var(--targ-text); margin-bottom: 12px; }
.prop-no-results p { max-width: 480px; margin: 0 auto 28px; line-height: 1.7; }
.prop-pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 60px;
padding-top: 40px;
border-top: 1px solid var(--targ-border);
flex-wrap: wrap;
}
.prop-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 14px;
border: 1.5px solid var(--targ-border);
border-radius: var(--targ-radius);
font-size: 14px;
font-weight: 500;
color: var(--targ-text);
transition: all var(--targ-transition);
}
.prop-pagination .page-numbers:hover { border-color: var(--targ-primary); color: var(--targ-primary); }
.prop-pagination .page-numbers.current {
background: var(--targ-primary);
border-color: var(--targ-primary);
color: var(--targ-white);
}
.prop-pagination .page-numbers.dots { border: none; color: var(--targ-text-muted); }
/* ═══════════════════════════════════════════════
SINGLE PROPERTY — HERO
════════════════════════════════════════════════ */
.prop-hero {
height: 72vh;
min-height: 480px;
max-height: 720px;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: flex-end;
}
.prop-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,14,53,.75) 0%, rgba(0,14,53,.2) 60%, transparent 100%);
}
.prop-hero-content {
position: relative;
z-index: 2;
padding: 0 40px 52px;
max-width: 1280px;
width: 100%;
margin: 0 auto;
}
.prop-hero-price {
font-family: var(--targ-font-heading);
font-size: 38px;
font-weight: 600;
color: var(--targ-white);
margin-top: 8px;
text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
/* ═══════════════════════════════════════════════
SINGLE PROPERTY — SPECS BAR
════════════════════════════════════════════════ */
.prop-specs-bar {
background: var(--targ-primary);
padding: 0 24px;
}
.prop-specs-inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: stretch;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.prop-specs-inner::-webkit-scrollbar { display: none; }
.prop-spec-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 20px 28px;
border-right: 1px solid rgba(255,255,255,.1);
text-align: center;
flex-shrink: 0;
}
.prop-spec-item:last-child { border-right: none; }
.prop-spec-item i {
color: var(--targ-highlight);
font-size: 16px;
margin-bottom: 2px;
}
.prop-spec-value {
font-family: var(--targ-font-heading);
font-size: 18px;
font-weight: 600;
color: var(--targ-white);
line-height: 1;
}
.prop-spec-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255,255,255,.5);
}
/* ═══════════════════════════════════════════════
SINGLE PROPERTY — BODY (two-column)
════════════════════════════════════════════════ */
.prop-body-wrap {
padding: 60px 24px 80px;
background: var(--targ-white);
}
.prop-body-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 360px;
gap: 48px;
align-items: start;
}
/* min-width: 0 prevents grid child from expanding beyond its 1fr column */
.prop-main { min-width: 0; }
.prop-section { margin-bottom: 52px; }
.prop-section-title {
font-family: var(--targ-font-heading);
font-size: 26px;
font-weight: 500;
color: var(--targ-text);
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--targ-surface);
}
.prop-description { line-height: 1.85; color: var(--targ-text); }
.prop-description p { margin-bottom: 1.2em; }
/* Gallery Slideshow */
.prop-gallery-block {
margin-bottom: 32px;
border-radius: 8px;
overflow: hidden;
background: #111;
box-shadow: 0 4px 20px rgba(0,0,0,.18);
}
.prop-gallery-stage {
position: relative;
background: #111;
line-height: 0;
}
.prop-gallery-stage-img {
width: 100%;
height: 480px;
object-fit: contain;
display: block;
cursor: zoom-in;
background: #111; /* ensures letterbox areas stay dark */
}
.prop-gallery-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,.48);
border: none;
color: #fff;
width: 46px;
height: 46px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: background .2s;
z-index: 2;
}
.prop-gallery-arrow:hover { background: rgba(0,0,0,.78); }
.prop-gallery-prev { left: 14px; }
.prop-gallery-next { right: 14px; }
.prop-gallery-counter {
position: absolute;
bottom: 14px;
right: 14px;
background: rgba(0,0,0,.52);
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
padding: 4px 11px;
border-radius: 20px;
pointer-events: none;
}
.prop-gallery-expand {
position: absolute;
bottom: 14px;
left: 14px;
background: rgba(0,0,0,.52);
border: none;
color: #fff;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: background .2s;
z-index: 2;
}
.prop-gallery-expand:hover { background: rgba(0,0,0,.78); }
.prop-gallery-thumbs {
display: flex;
gap: 3px;
overflow-x: auto;
padding: 3px;
background: #0a0a0a;
scrollbar-width: thin;
scrollbar-color: #555 #0a0a0a;
}
.prop-gallery-thumbs::-webkit-scrollbar { height: 3px; }
.prop-gallery-thumbs::-webkit-scrollbar-track { background: #0a0a0a; }
.prop-gallery-thumbs::-webkit-scrollbar-thumb { background: #555; border-radius: 2px; }
.prop-gallery-thumb {
flex: 0 0 76px;
height: 56px;
padding: 0;
border: 2px solid transparent;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
opacity: .5;
transition: opacity .2s, border-color .2s;
background: none;
}
.prop-gallery-thumb:hover { opacity: .8; }
.prop-gallery-thumb.active { opacity: 1; border-color: var(--targ-highlight); }
.prop-gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
/* Lightbox */
.prop-lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,.93);
z-index: 9999;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
}
.prop-lightbox.open { display: flex; }
.prop-lightbox-inner {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 56px 72px 8px;
box-sizing: border-box;
}
.prop-lightbox-img {
max-width: 100%;
max-height: calc(100vh - 110px);
object-fit: contain;
display: block;
border-radius: 4px;
box-shadow: 0 8px 48px rgba(0,0,0,.6);
}
.prop-lightbox-close {
position: fixed;
top: 14px;
right: 14px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.2);
color: #fff;
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: background .2s;
z-index: 10;
}
.prop-lightbox-close:hover { background: rgba(255,255,255,.25); }
.prop-lightbox-prev,
.prop-lightbox-next {
position: fixed;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.15);
color: #fff;
width: 52px;
height: 52px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: background .2s;
z-index: 10;
}
.prop-lightbox-prev:hover,
.prop-lightbox-next:hover { background: rgba(255,255,255,.28); }
.prop-lightbox-prev { left: 14px; }
.prop-lightbox-next { right: 14px; }
.prop-lightbox-counter {
color: rgba(255,255,255,.6);
font-size: 13px;
font-weight: 500;
letter-spacing: .04em;
padding-bottom: 16px;
}
/* Content Tabs */
.prop-tabs { margin-bottom: 40px; }
.prop-tabs-nav {
display: flex;
gap: 3px;
background: var(--targ-surface);
border-radius: 8px;
padding: 4px;
margin-bottom: 28px;
overflow-x: auto;
scrollbar-width: none;
}
.prop-tabs-nav::-webkit-scrollbar { display: none; }
.prop-tab-btn {
background: transparent;
border: none;
border-radius: 6px;
padding: 10px 22px;
font-family: var(--targ-font-body);
font-size: 13px;
font-weight: 600;
color: var(--targ-text);
cursor: pointer;
text-transform: uppercase;
letter-spacing: .06em;
transition: background .18s, color .18s;
white-space: nowrap;
flex-shrink: 0;
}
.prop-tab-btn:hover { background: rgba(0,14,53,.08); }
.prop-tab-btn.active {
background: var(--targ-primary);
color: #fff;
box-shadow: 0 2px 6px rgba(0,14,53,.25);
}
.prop-tab-panel { display: none; }
.prop-tab-panel.active { display: block; }
/* Video */
.prop-video-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 8px;
}
.prop-video-wrap iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
/* Map */
.prop-map-wrap {
position: relative; /* anchors the #39 zoom controls */
border-radius: 8px;
overflow: hidden;
height: 380px;
}
.prop-map-wrap iframe { width: 100%; height: 100%; }
/* Map zoom controls (#39) — the no-key iframe embed has no usable +/-
UI, so single-property.php overlays these buttons (propMapZoom JS). */
.prop-map-zoom {
position: absolute;
right: 12px;
bottom: 24px;
display: flex;
flex-direction: column;
gap: 6px;
z-index: 2;
}
.prop-map-zoom-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--targ-white);
color: var(--targ-primary);
border: 1px solid rgba(0, 14, 53, .15);
border-radius: 6px;
font-size: 14px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
transition: background var(--targ-transition);
}
.prop-map-zoom-btn:hover { background: var(--targ-surface); }
/* Sidebar */
.prop-price-card {
background: var(--targ-white);
border: 1.5px solid var(--targ-border);
border-radius: 12px;
padding: 28px 24px;
box-shadow: var(--targ-shadow-md);
margin-bottom: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.prop-price-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--targ-highlight);
background: var(--targ-primary);
padding: 4px 10px;
border-radius: 4px;
width: fit-content;
}
.prop-asking-price {
font-family: var(--targ-font-heading);
font-size: 32px;
font-weight: 600;
color: var(--targ-primary);
line-height: 1;
}
.prop-asking-location {
font-size: 13px;
color: var(--targ-text-muted);
display: flex;
align-items: center;
gap: 6px;
}
.prop-asking-location i { color: var(--targ-accent); }
.prop-hoa-note, .prop-mls-note {
font-size: 12px;
color: var(--targ-text-muted);
padding-top: 4px;
border-top: 1px solid var(--targ-border);
}
.prop-cta-btn {
width: 100%;
justify-content: center;
text-align: center;
}
.btn-whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 20px;
background: var(--targ-whatsapp);
color: var(--targ-white);
font-size: 14px;
font-weight: 600;
border-radius: var(--targ-radius);
transition: background var(--targ-transition);
}
.btn-whatsapp:hover { background: var(--targ-whatsapp-dark); color: var(--targ-white); }
.btn-whatsapp i { font-size: 18px; }
.prop-sidebar-back {
margin-top: 24px;
margin-bottom: 24px;
}
.prop-sidebar-back a {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: var(--targ-primary);
text-decoration: none;
padding: 11px 16px;
border: 1.5px solid var(--targ-primary);
border-radius: var(--targ-radius);
transition: background var(--targ-transition), color var(--targ-transition);
}
.prop-sidebar-back a:hover {
background: var(--targ-primary);
color: var(--targ-white);
}
/* ── Agent Card ──────────────────────────────── */
.agent-card { margin-top: 24px; }
.agent-card .widget-body { padding: 16px; }
.agent-card-inner {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.agent-card-photo {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
object-position: top; /* keep tops of heads in frame */
flex-shrink: 0;
border: 2px solid var(--targ-surface);
}
.agent-card-photo--placeholder {
background: var(--targ-surface);
display: flex;
align-items: center;
justify-content: center;
color: var(--targ-text-muted);
font-size: 26px;
}
.agent-card-info { flex: 1; min-width: 0; }
.agent-card-name {
font-family: 'Cormorant Garamond', serif;
font-size: 17px;
font-weight: 600;
color: var(--targ-primary);
line-height: 1.2;
}
.agent-card-role {
font-size: 12px;
color: var(--targ-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 3px;
}
.agent-card-bio {
font-size: 13px;
color: var(--targ-text-muted);
line-height: 1.5;
margin: 0 0 14px;
}
.agent-card-contacts {
display: flex;
flex-direction: column;
gap: 8px;
}
.agent-contact-link {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: var(--targ-primary);
text-decoration: none;
padding: 8px 12px;
border: 1px solid #e2e2e2;
border-radius: var(--targ-radius);
transition: background var(--targ-transition), color var(--targ-transition), border-color var(--targ-transition);
}
.agent-contact-link i { width: 16px; text-align: center; color: var(--targ-accent); }
.agent-contact-link:hover {
background: var(--targ-surface);
border-color: var(--targ-highlight);
color: var(--targ-primary);
}
.agent-contact-link--whatsapp i { color: var(--targ-whatsapp); }
.agent-contact-link--whatsapp:hover { border-color: var(--targ-whatsapp); }
/* ── Our Agents page (page-agents.php) ───────────── */
.agents-section { background: var(--targ-white); padding: 64px 24px 72px; }
.agents-wrap { max-width: 1080px; margin: 0 auto; }
.agents-intro {
max-width: 820px;
margin: 0 auto 48px;
text-align: left;
}
.agents-intro p {
font-size: 17px;
line-height: 1.7;
color: var(--targ-text);
margin: 0 0 16px;
}
.agents-intro p:last-child { margin-bottom: 0; }
.agents-list {
display: flex;
flex-direction: column;
gap: 28px;
}
.agent-row {
display: grid;
grid-template-columns: 260px 1fr;
gap: 32px;
align-items: center;
background: var(--targ-surface);
border: 1px solid var(--targ-surface-dark);
border-left: 4px solid var(--targ-highlight);
border-radius: var(--targ-radius);
padding: 28px 32px;
}
.agent-row-photo {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: var(--targ-radius);
overflow: hidden;
background: #fff;
}
.agent-row-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top; /* keep tops of heads in frame */
display: block;
}
.agent-row-photo--placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: var(--targ-highlight);
font-size: 56px;
}
.agent-row-body { min-width: 0; }
.agent-row-name {
font-family: 'Cormorant Garamond', serif;
font-size: 30px;
font-weight: 600;
line-height: 1.15;
color: var(--targ-primary);
margin: 0;
}
.agent-row-role {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--targ-accent);
margin: 6px 0 14px;
}
.agent-row-bio {
font-size: 15px;
line-height: 1.7;
color: var(--targ-text);
margin: 0;
}
@media (max-width: 720px) {
.agents-section { padding: 44px 18px 52px; }
.agent-row {
grid-template-columns: 1fr;
gap: 20px;
padding: 22px;
text-align: center;
}
.agent-row-photo {
width: 180px;
margin: 0 auto;
}
.agent-row-role { margin-bottom: 12px; }
.agent-row-bio { text-align: left; }
}
/* Badge colours (client 2026-08-17: Hot Deals = flashy yellow, Under
Contract = red — the old gold-on-navy UC badge was hard to read) */
.badge-contract { background: var(--targ-accent); color: var(--targ-white); }
.badge-featured { background: var(--targ-highlight); color: var(--targ-primary); }
.badge-value { background: #FFD400; color: var(--targ-primary); }
.badge-financing { background: #2563eb; color: var(--targ-white); }
.badge-luxury { background: var(--targ-primary); color: var(--targ-highlight); }
/* MLS pages reuse .badge-contract for the raw feed status (usually "ACTIVE")
— keep those on the neutral gold; red would read as a warning there. */
.page-template-page-mls .badge-contract { background: var(--targ-highlight); color: var(--targ-primary); }
/* Hero badges row */
.prop-hero-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.prop-hero-badge {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 5px 12px;
border-radius: 4px;
}
/* Archive: stack badges top-right of card image */
.listing-badges-tr {
position: absolute;
top: 14px; right: 14px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
}
/* Filter bar divider */
.prop-filter-divider {
width: 1px;
background: var(--targ-border);
height: 24px;
flex-shrink: 0;
margin: 0 8px;
}
/* Features grid */
.prop-features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px 20px;
}
.prop-feature-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--targ-text);
}
.prop-feature-item i { color: var(--targ-highlight); font-size: 11px; flex-shrink: 0; }
/* Location detail rows */
.prop-location-details {
display: flex;
flex-direction: column;
gap: 10px;
}
.prop-location-row {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
color: var(--targ-text);
}
.prop-location-row i { color: var(--targ-primary-mid); margin-top: 2px; width: 14px; flex-shrink: 0; }
/* Property details table in sidebar */
.prop-details-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.prop-details-table tr + tr td { border-top: 1px solid var(--targ-border); }
.prop-details-table td {
padding: 7px 0;
color: var(--targ-text);
vertical-align: middle;
}
.prop-details-table td:first-child {
color: var(--targ-text-muted);
width: 55%;
display: flex;
align-items: center;
gap: 7px;
}
.prop-details-table td i { color: var(--targ-primary-mid); font-size: 11px; width: 12px; }
.prop-details-table td:last-child { font-weight: 600; }
/* PDF download button */
.btn-pdf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 11px 20px;
background: transparent;
color: var(--targ-primary);
font-size: 14px;
font-weight: 600;
border-radius: var(--targ-radius);
border: 1.5px solid var(--targ-primary);
transition: all var(--targ-transition);
}
.btn-pdf:hover { background: var(--targ-primary); color: var(--targ-white); }
.btn-pdf i { color: #e53e3e; }
/* ── Downloads widget buttons (2026-08-17 client request: design B with
left-aligned labels). Primary = uploaded brochure; secondaries = flyers. ── */
.btn-dl {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
box-sizing: border-box;
padding: 13px 16px;
background: var(--targ-white);
border: 1px solid var(--targ-primary);
border-radius: var(--targ-radius);
color: var(--targ-primary);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-align: left;
transition: all var(--targ-transition);
}
/* Spacing: the widget body has no gap of its own (the old buttons rode on
.prop-cta-btn margins) — space consecutive download buttons here. */
.btn-dl + .btn-dl { margin-top: 10px; }
/* Square mark — the "little square" to the left of the label (Dave
2026-08-17: checkbox-like — outlined, NOT filled, square corners, no pdf
glyph; the ::before override suppresses the Font Awesome icon). */
.btn-dl i::before { content: none; }
.btn-dl i {
display: block;
width: 14px;
height: 14px;
flex-shrink: 0;
border: 1.5px solid var(--targ-highlight);
border-radius: 0;
background: transparent;
transition: all var(--targ-transition);
}
.btn-dl:hover { background: var(--targ-surface); color: var(--targ-primary); }
.btn-dl:hover i { background: var(--targ-highlight); }
.btn-dl--primary { background: var(--targ-primary); color: var(--targ-white); }
.btn-dl--primary:hover { background: var(--targ-primary-mid); color: var(--targ-white); }
.btn-dl--primary:hover i { background: var(--targ-highlight); }
/* ═══════════════════════════════════════════════
PROPERTY NOTICE BAR (hero overlay, top edge)
════════════════════════════════════════════════ */
.prop-notice-bar {
position: absolute;
top: 110px; /* utility bar (38px) + nav (72px). WP admin bar shifts both
the page and the nav equally, so no separate admin-bar rule needed. */
left: 0;
right: 0;
z-index: 3;
margin: 0;
background: var(--targ-accent);
color: #fff;
font-family: var(--targ-font-body);
font-size: 20px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
padding: 5px 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
line-height: 1.4;
}
.prop-notice-bar i {
flex-shrink: 0;
font-size: 18px;
opacity: 0.9;
}
/* ─── Property inquiry context box ─────────────────────────────── */
.prop-inquiry-context {
background: var(--targ-surface);
border-left: 4px solid var(--targ-accent);
border-radius: 0 6px 6px 0;
padding: 14px 18px;
margin-bottom: 22px;
}
.prop-inquiry-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--targ-text-muted);
margin-bottom: 5px;
}
.prop-inquiry-label i { margin-right: 5px; color: var(--targ-accent); }
.prop-inquiry-title {
font-family: var(--targ-font-heading);
font-size: 19px;
font-weight: 600;
color: var(--targ-primary);
line-height: 1.3;
margin-bottom: 6px;
}
.prop-inquiry-link {
font-size: 12px;
font-weight: 600;
color: var(--targ-accent);
text-decoration: none;
letter-spacing: 0.02em;
}
.prop-inquiry-link:hover { text-decoration: underline; }
.prop-inquiry-link i { font-size: 10px; margin-right: 4px; }
/* ─── Inquiry form feedback messages ───────────────────────────── */
.form-feedback {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
border-radius: 6px;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.5;
}
.form-feedback i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.form-feedback--success { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
.form-feedback--success i { color: #059669; }
.form-feedback--error { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.form-feedback--error i { color: #dc2626; }
/* Listing card special notice strip */
.listing-special-notice {
display: flex;
align-items: flex-start;
gap: 7px;
background: var(--targ-highlight);
color: var(--targ-primary);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: 3px;
margin-bottom: 8px;
line-height: 1.35;
}
.listing-special-notice i {
flex-shrink: 0;
margin-top: 2px;
font-size: 10px;
}
/* ═══════════════════════════════════════════════
PROPERTY — RESPONSIVE
════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.prop-filter-bar { top: 0; }
.prop-archive-grid { grid-template-columns: repeat(2, 1fr); }
.prop-body-inner { grid-template-columns: 1fr; }
.prop-sidebar { order: -1; } /* Price card above content on mobile */
}
@media (max-width: 768px) {
.prop-hero { height: 55vh; min-height: 360px; }
.prop-hero-content { padding: 0 20px 36px; }
.prop-hero-price { font-size: 28px; }
.prop-specs-inner { gap: 0; }
.prop-spec-item { padding: 16px 18px; }
.prop-spec-value { font-size: 16px; }
.prop-features-grid { grid-template-columns: repeat(2, 1fr); }
.prop-gallery-stage-img { height: 340px; object-fit: contain; }
.prop-lightbox-inner { padding: 56px 56px 8px; }
.prop-notice-bar { font-size: 17px; padding: 4px 18px; gap: 8px; letter-spacing: 0.08em; }
.prop-notice-bar i { font-size: 15px; }
}
@media (max-width: 600px) {
.prop-gallery-stage-img { height: 260px; object-fit: contain; }
.prop-gallery-thumb { flex: 0 0 60px; height: 44px; }
.prop-tab-btn { padding: 10px 14px; font-size: 12px; }
.prop-lightbox-inner { padding: 56px 12px 8px; }
.prop-lightbox-prev { left: 6px; }
.prop-lightbox-next { right: 6px; }
.prop-features-grid { grid-template-columns: 1fr 1fr; }
.prop-notice-bar { font-size: 14px; padding: 4px 14px; gap: 6px; letter-spacing: 0.06em; line-height: 1.3; }
.prop-notice-bar i { font-size: 12px; }
}
@media (max-width: 600px) {
.prop-archive-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
.prop-filter-label { display: none; }
.prop-body-wrap { padding: 40px 16px 60px; }
}
/* ═══════════════════════════════════════════════
SEARCH BY MAP (legacy page-map styles; no parent template uses them yet)
════════════════════════════════════════════════ */
.page-hero--compact { min-height: 240px; padding-bottom: 40px; }
.map-search-section { padding: 48px 0 80px; background: var(--targ-white); }
.map-search-section > .section-inner { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.map-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 18px;
}
.map-filter-label {
font-family: var(--targ-font-body);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--targ-text);
opacity: 0.65;
margin-right: 4px;
}
.map-filter-btn {
font-family: var(--targ-font-body);
font-size: 13px;
font-weight: 600;
color: var(--targ-primary);
background: var(--targ-surface);
border: 1px solid transparent;
border-radius: 999px;
padding: 8px 16px;
cursor: pointer;
transition: background var(--targ-transition), color var(--targ-transition), border-color var(--targ-transition);
}
.map-filter-btn:hover { border-color: var(--targ-highlight); }
.map-filter-btn.active { background: var(--targ-primary); color: var(--targ-white); }
.map-filter-count {
display: inline-block;
margin-left: 4px;
font-size: 11px;
opacity: 0.7;
}
.map-canvas {
width: 100%;
height: 70vh;
min-height: 460px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 6px 28px rgba(0,14,53,.12);
background: var(--targ-surface);
}
.map-error {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-family: var(--targ-font-body);
color: var(--targ-text);
opacity: 0.7;
padding: 24px;
text-align: center;
}
.map-disclaimer {
margin-top: 16px;
font-family: var(--targ-font-body);
font-size: 13px;
color: var(--targ-text);
opacity: 0.7;
}
.map-disclaimer a { color: var(--targ-accent); text-decoration: underline; }
/* Info-window mini card */
.map-info-card {
display: flex;
width: 260px;
font-family: var(--targ-font-body);
}
.map-info-img {
flex: 0 0 96px;
align-self: stretch;
min-height: 96px;
background-size: cover;
background-position: center;
border-radius: 4px 0 0 4px;
}
.map-info-body { padding: 4px 6px 4px 12px; flex: 1; min-width: 0; }
.map-info-type {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--targ-highlight);
font-weight: 700;
margin-bottom: 3px;
}
.map-info-title {
display: block;
font-family: var(--targ-font-heading);
font-size: 17px;
line-height: 1.2;
color: var(--targ-primary);
font-weight: 600;
margin-bottom: 4px;
text-decoration: none;
}
.map-info-title:hover { color: var(--targ-accent); }
.map-info-loc { font-size: 12px; color: var(--targ-text); opacity: 0.7; margin-bottom: 4px; }
.map-info-loc i { color: var(--targ-accent); margin-right: 3px; }
.map-info-price {
font-family: var(--targ-font-heading);
font-size: 18px;
color: var(--targ-primary);
font-weight: 700;
margin-bottom: 6px;
}
.map-info-link {
font-size: 12px;
font-weight: 700;
color: var(--targ-accent);
text-decoration: none;
letter-spacing: 0.03em;
}
.map-info-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
.map-canvas { height: 60vh; min-height: 380px; }
.map-filter-label { display: none; }
}
/* ========================================================================
Staff-guide accordions — core Details block (added 2026-07-17)
Makes wp:details drawers obviously clickable (navy header bar + red
chevron badge that rotates when open). Scoped to editorial content.
======================================================================== */
.entry-content .wp-block-details {
border: 1px solid var(--targ-border);
border-radius: 10px;
margin: 0 0 18px;
overflow: hidden;
background: var(--targ-white);
box-shadow: var(--targ-shadow-sm);
}
.entry-content .wp-block-details > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 14px;
padding: 13px 22px;
background: var(--targ-primary);
color: var(--targ-white);
font-family: var(--targ-font-heading);
font-size: 19px;
font-weight: 700;
line-height: 1.2;
user-select: none;
transition: background var(--targ-transition);
}
.entry-content .wp-block-details > summary::-webkit-details-marker { display: none; }
.entry-content .wp-block-details > summary::after {
content: "\f078"; /* Font Awesome 6 solid chevron-down */
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 13px;
margin-left: auto;
flex: 0 0 30px;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--targ-white);
background: var(--targ-accent);
border-radius: 50%;
transition: transform var(--targ-transition);
}
.entry-content .wp-block-details[open] > summary::after { transform: rotate(180deg); }
.entry-content .wp-block-details > summary:hover { background: var(--targ-primary-mid); }
.entry-content .wp-block-details > summary:focus-visible { outline: 3px solid var(--targ-highlight); outline-offset: -3px; }
.entry-content .wp-block-details[open] > summary { border-bottom: 1px solid var(--targ-border); }
.entry-content .wp-block-details > :not(summary) { margin-left: 24px; margin-right: 24px; }
.entry-content .wp-block-details > summary + * { margin-top: 20px; }
.entry-content .wp-block-details > :last-child { margin-bottom: 22px; }
/* ── Imported blog posts: echo the featured/hero image at the top of the body ──
The featured image doubles as the hero behind the H1, and the blog importer
strips it from the body. single.php re-inserts it here for imported posts
(the generic scenic placeholder is skipped). */
.single-featured-inline { margin: 0 0 24px; }
.single-featured-inline img { display: block; width: 100%; margin: 0; border-radius: 8px; }
/* ═══════════════════════════════════════════════
CONTENT LINKS — make recognizable (Dave 2026-08-07, ROS-25 family)
The global `a { color: inherit }` reset (top of file) left body-content
links styled identically to plain text. Restore link affordance in the
four content areas only: dark-blue anchor text + subtle underline
(Dave's spec, rev 3 — underline restored, easier to spot);
hover mirrors the .search-links navy→red pattern.
════════════════════════════════════════════════ */
.entry-content a, .single-content a, .t1-content a, .gc-description a {
color: var(--targ-primary-mid); /* var(--targ-primary-mid) — dark brand blue */
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: rgba(13, 43, 74, .35); /* faint underline */
transition: color var(--targ-transition);
}
.entry-content a:hover, .single-content a:hover, .t1-content a:hover, .gc-description a:hover {
color: var(--targ-accent);
text-decoration-color: currentColor;
}
/* ── ROS-25: uniform editorial body text (Dave 2026-08-07) ──
Paragraphs rendered 15px muted-grey (.page-main p) while list items
rendered 16px charcoal (editorial li restore rule) — visibly mismatched.
One base for ALL content text; p/li inherit it. Headings, tables,
callouts and template sections keep their own rules. Appended at end of
file deliberately: ties with .page-main p resolve by source order. */
.entry-content, .single-content, .t1-content, .gc-description {
font-size: 16px;
line-height: 1.75;
color: var(--targ-text);
}
.entry-content p, .single-content p, .t1-content p, .gc-description p,
.entry-content li, .single-content li, .t1-content li {
font-size: inherit;
color: inherit;
line-height: inherit;
}
/* ═══════════════════════════════════════════════
FEATURED LISTINGS ROTATOR — homepage (0002-25)
════════════════════════════════════════════════ */
/* Before JS runs, only the first batch of three is visible (no flash of 9 cards) */
#featuredRotator:not(.js-rotate) .listing-card:nth-child(n+4) { display: none; }
#featuredRotator.js-rotate .listing-card.feat-hide { display: none; }
#featuredRotator .listing-card.feat-in { animation: featFade .5s ease; }
@keyframes featFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ═══════════════════════════════════════════════
TARG BASE ADDITIONS (classes introduced by the parent-theme templates)
════════════════════════════════════════════════ */
.btn-navy { background: var(--targ-primary); color: var(--targ-white); }
.btn-navy:hover { background: var(--targ-primary-mid); }
.btn-outline-navy { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border:2px solid var(--targ-primary); color:var(--targ-primary); border-radius:var(--targ-radius); font-size:14px; font-weight:600; font-family:var(--targ-font-body); transition:all var(--targ-transition); }
.btn-outline-navy:hover { background: var(--targ-primary); color: var(--targ-white); }
.widget-link { display:inline-block; margin-top:12px; font-size:13px; font-weight:600; color:var(--targ-accent); }
.widget-link:hover { color: var(--targ-accent-dark); }
.utility-links { display:flex; gap:16px; }
.utility-links a { color: rgba(255,255,255,.8); font-size:12px; }
.utility-links a:hover { color: var(--targ-white); }
.breadcrumbs { font-size:13px; color:var(--targ-text-muted); margin-bottom:20px; }
.breadcrumbs a:hover { color: var(--targ-accent); }
.breadcrumbs .sep { margin: 0 4px; opacity:.5; }
.sidebar-listing-img { width:80px; height:60px; flex-shrink:0; border-radius:var(--targ-radius); overflow:hidden; }
.sidebar-listing-img img { width:100%; height:100%; object-fit:cover; }
|